@charset "UTF-8";
body

{background-color: #1995F2;
}

.block1{
display: flex;
}

/**********最初の画像***********/
.saisyo{
position: absolute;

left: -16px;
top: 25px;
z-index: 0;
}
.ue-1{
width: 96vw;
height: 1110px;
background-color: #47D4FF;
position: absolute;
left: 0;
top: 700px;
z-index: -2;
}
.ue-2-e1{
position: absolute;
top: 670px;
width: 100px;
height: 20px;
z-index: 30;
}
.ue-2-e2{
width: 0px;
position: absolute;
top: 200px;
left: 120px;
}
.line2{
background-color: #000000;
width: 96vw;
height: 0.5%;
position: absolute;
left: 0;
z-index: 50;
top: 400px;

}
/******************************************************************************************************************************/
/**************トップのタイトル**************/
.shikakutusin_ue{
width: 60vw;
height: auto;
text-align: center;
position: absolute;
left:70px;
}
.b1{
position: absolute;
top:440px;
z-index: 3;
}
.b2{
position: absolute;
top:450px;
z-index: 2;
}
.b3{
position: absolute;
top:460px;
z-index: 1;
}
.b4{
position: absolute;
font-family: "Osaka-mono", "MS Gothic", "monospace";
top: 480px;
left: 18px;
z-index: 10;
color: aliceblue;
font-size: 20px;
}
.b5{
position: absolute;
top: 1750px;
left: 80px;

}
/******************************************************************************************************************************/
.tusin_1{
width: 80vw;
height: 30vw;
position: absolute;
top: 660px;
}
.a1_img{
width: 30vw;
height: auto;
position: absolute;
right: 0;
top: 660px;
}
.a1_text{
font-size: 25px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: absolute;
top: 675px;
left: 45px;
}
.a2_img1{
width: 15vw;
height: auto;
position: absolute;
left: 10px;
top: 780px;
}
.a2_img2{
width: 15vw;
height: auto;
position: absolute;
right: 10px;
top: 880px;
}
.a2_img3{
width: 15vw;
height: auto;
position: absolute;
left: 10px;
top: 960px;
}
.a2_img4{
width: 15vw;
height: auto;
position: absolute;
right: 10px;
top: 1050px;
}
.a2_img5{
width: 15vw;
height: auto;
position: absolute;
left: 10px;
top: 1140px;
}
.a2_img6{
width: 15vw;
height: auto;
position: absolute;
right: 10px;
top: 1230px;
}
.a2_img7{
width: 15vw;
height: auto;
position: absolute;
left: 10px;
top: 1370px;
}
.a2_img8{
width: 15vw;
height: auto;
position: absolute;
right: 10px;
top: 1550px;
}
.a2_img9{
width: 15vw;
height: auto;
position: absolute;
left: 10px;
top: 1680px;
}
.a2_text{
font-size: 12px;
font-family: "Osaka-mono", "MS Gothic", "monospace";

}
.a2_text_left{
position: absolute;
left: 80px;
}
.a2_text_left p{
position: absolute;
top: 790px;

}
.a2_text_left p2{
position: absolute;
top: 990px;
}
.a2_text_left p4{
position: absolute;
top: 1170px;
}
.a2_text_left p6{
position: absolute;
top: 1400px;
}

.a2_text_right p1{
position: absolute;
top: 900px;
left: 120px;
}
.a2_text_right p3{
position: absolute;
top: 1080px;
left: 120px;
}
.a2_text_right p5{
position: absolute;
top: 1260px;
left: 120px;
}
.a2_text_right p7{
position: absolute;
top: 1580px;
left: 120px;
}
/******************************************************************************************************************************/

/**バー**/
.top{
text-align: center;
height:60px;
line-height: 60px;
color: black;
z-index: 90;
position: fixed;
top: 10px;
}
.top h1{
font-size: 10px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: relative;
top: -10px;
left: 70px;
}
.top h2{
font-size: 15px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: relative;
top: -58px;
left: 65px;
}


/**ヘッダー**/
.box {
width: 1000vw;
height: 13%;
z-index: 90;
background-color: aliceblue;
position: fixed;
top:0; 
left: -10%;
}

.line1{
background-color: #000000;
width: 110vw;
height: 0.5%;
position: fixed;
left: -5%;
z-index: 90;
top: 13%;
}
/******************************************************************************************************************************/


/******************************************************************************************************************************/

/*ハンバーガーメニュー*/
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 7%;
  width: 12%;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 2%;
  left: 2%;
  background: #F4FF00;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;}
/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #000000;
  transition: 0.5s;
  position: absolute;}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);}
  /* メニューのデザイン*/
.drawer-content {
  width: 60%;
  height: 40%;
  position: fixed;
  top: 13%;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  transition: .5s;}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */}
.drawer-list{line-height: 3;}
.drawer-list{position: relative;
top: 20%;}
/******************************************************************************************************************************/

/*========= トップページのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 2px;
bottom:30px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(150px);}
/*　上に上がる動き　*/
#page-top.UpMove{
animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(150px);}
to {
opacity: 1;
transform: translateY(0);
}}
/*　下に下がる動き　*/
#page-top.DownMove{
animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);}
to {
opacity: 1;
transform: translateY(150px);}}
/*画像の切り替えと動き*/
#page-top a {
/*aタグの形状*/
display: block;
width: 65px;
height: 40px;
color: #333;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
font-size:0.6rem;
/*背景画像の指定*/
background: url("1x/bikkuri3.png")center;
background-repeat: no-repeat;
background-size: contain;}
#page-top.floatAnime a{
width: 65px;
height: 40px;
/*背景画像の指定*/
background: url("1x/bikkuri2.png");
background-repeat: no-repeat;
background-size: contain;
/*アニメーションの指定*/
animation: floatAnime 5s linear infinite;
opacity: 0;}
@keyframes floatAnime {
0% { transform: translateX(0); opacity: 0; }
25% { transform: translateX(-6px);opacity: 1; }
50% { transform: translateX(0) }
100% { transform: translateX(6px);opacity: 1; }}
/*Page Topと書かれたテキストの位置*/
#page-top span{
position: absolute;
bottom: -10px;
right: 20px;
color: #666;}
/*検証のためのCSS*/
section{
padding: 500px 0;}
.slide-bottom img{
width: 100%;
height: auto;}
/******************************************************************************************************************************/
/* フェードイン用のCSS */

/* 下からフェードイン */
.slide-bottom {
opacity: 0;
transform: translate(0, 20px);
transition: all 1s ease-out;
}

/**********************最後************************/
.sigonohaikei1{
width: 360px;
height: 180px;
background:#FFFEFE;
border-radius: 50%/100% 100% 0 0;
position: absolute;
left: 0;
top: 1960px;
z-index: 0;
}
.sigonohaikei2{
width: 96vw;
height: 30%;
background:#FFFEFE;
position: absolute;
left: 0;
top: 2140px;
z-index: 0;
vertical-align: bottom;
}
/*******************************/
.aicon1{
width: 8.7vw;
height: auto;
float: left;
margin: 5px;
}
.block2{
position: absolute;
top: 1080px;
left: 150px;
}
.aicon1{
width: 10vw;
height: auto;
}
.aicon1_img{
position: relative;
top: 5px;
}
.nagaoka-aicon{
width: 20vw;
height: auto;
position: absolute;
top: 2050px;
left: 50px;
}
.text{
font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
}
.text_1{
font-size: 13px;
letter-spacing: 0.1em;
position: absolute;
top: 1500px;
right: 105px;
}
.text_2{
font-size: 12px;
position: absolute;
top: 1680px;
left: 40px;
}
.text_3{
font-size: 10px;
position: absolute;
color: #808080;
text-align: center;
left: 95px;
top: 1730px;
}
.line_1{
background-color: #17EC63;
width: 80vw;
height: 1%;
position: absolute;
left: 30px;
top: 2170px;
z-index: 30;
}
/******************************************************************************************************************************/

/*浮いてる*/
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background:url("hito1.png")center center / 300px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 340px;
height: 320px;
position: absolute;
top: 30%;
left: -5%;
z-index: 80;
background-repeat: no-repeat;
}
 
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-7deg);
}
50% {transform:translate(0, -7px) rotate(0deg);
}
100% {transform:translate(0, 0) rotate(7deg);
}
}
/******************************************************************************************************************************/
/**********しかく***********/
.a3_img1{
position: absolute;
top: 800px;
z-index: -1;
left: 40px;
}
.a3_img2{
position: absolute;
top: 980px;
z-index: -1;
left: 40px;
}
.a3_img3{
position: absolute;
top: 1160px;
z-index: -1;
left: 40px;
}
.a3_img4{
position: absolute;
top: 1390px;
z-index: -1;
left: 40px;
}
.a4_img1{
position: absolute;
top:890px;
z-index: -1;
left: 100px;
}
.a4_img2{
position: absolute;
top:1070px;
z-index: -1;
left: 100px;
}
.a4_img3{
position: absolute;
top:1250px;
z-index: -1;
left: 100px;
}
.a4_img4{
position: absolute;
top:1570px;
z-index: -1;
left: 100px;
}