@charset "UTF-8";
/* CSS Document */


@media screen and (max-width: 414px) { /*ウィンドウ幅が最大479pxの場合に適用*/
#menu-bg {
display:none; /*非表示*/
}
}


body {
    background-color: #D4DEE5;
    width: 100%;
    height: 100%;
}

div.top{
    width: 100%;
    height: 80px;
}

img.topba-{
    z-index: 100;
    position: fixed;
    top: 10%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%); 
}

img.hanba-ga-{
	z-index: 101;
	position: fixed;
	top:63px;
	left: 80px;
}

div.home{
    position: relative;
    width:100% ;
    height:650px;
}

img.renga-1{
	overflow:hidden;
	z-index: 5px;
	position: absolute;
	top: -55px;
	left: 199px;
	/* じわっと画像が表示される 
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;  */
}



img.musimegane{
	width: 120%;
	height: 100%;
	z-index: 10;
	position: absolute;
	top: 18%;
	left:-23%;
}

img.renga-2{
	z-index: 5;
	position: absolute;
	top: 470px;
	left:-40px;
}

/*足跡*/
img.asi1-1{
    position: absolute;
	top:110px;
	left: 50px;
	 transform: rotate(-10deg);
}

img.asi1-2{
	 position: absolute;
	top:143px;
	left: 122px;
	 transform: rotate(-10deg);
}

img.asi1-3{
	 position: absolute;
	top:220px;
	left: 90px;
	 transform: rotate(5deg);
}

img.asi2-1{
	z-index: 5;
	 position: absolute;
	top:570px;
	left: 245px;
	 transform: rotate(5deg);
}

img.asi2-2{
		z-index: 5;
	 position: absolute;
	top:620px;
	left: 330px;
	 transform: rotate(18deg);
}

img.asi2-3{
		z-index: 5;
	 position: absolute;
	top:660px;
	left: 280px;
	 transform: rotate(-12deg);
}

img.asi2-4{
		z-index: 5;
	 position: absolute;
	top:730px;
	left: 330px;
	 transform: rotate(-12deg);
}

img.asi2-5{
		z-index: 5;
	 position: absolute;
	top:780px;
	left:260px;
	 transform: rotate(-10deg);
}

img.asi3-1{
	z-index: 5;
	 position: absolute;
	top:860px;
	left:280px;
	 transform: rotate(-10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}

img.asi3-2 {
    z-index: 5;
    position: absolute;
    top: 900px;
    left: 190px;
    transform: rotate(-10deg);
    object-fit: cover;
    width: 13%;
    height: auto;
}


/*足跡　スクロールしたら表示*/
.sa {
  opacity: 0;
  transition: all .5s ease;
}



img.asi3-2{
	z-index: 5;
	 position: absolute;
	top:900px;
	left:190px;
	 transform: rotate(-10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}

img.asi3-2{
	z-index: 5;
	 position: absolute;
	top:900px;
	left:190px;
	 transform: rotate(-10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}

img.asi3-3{
	z-index: 5;
	 position: absolute;
	top:1000px;
	left:200px;
	 transform: rotate(10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}

img.asi3-4{
	z-index: 5;
	 position: absolute;
	top:1045px;
	left:100px;
	 transform: rotate(-10deg);
	
    object-fit: cover;
    width: 11%;
    height: auto;
}

img.asi3-5{
	z-index: 5;
	 position: absolute;
	top:1130px;
	left:147px;
	 transform: rotate(10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}

img.asi4-1{
	z-index: 5;
	 position: absolute;
	top:1130px;
	left:147px;
	 transform: rotate(10deg);
	
    object-fit: cover;
    width: 13%;
    height: auto;
}







/*足跡をふわっとだす*/
img.asiato-zenbu{
	position: absolute;
	top:-640px;
	left: 50px;
	opacity:0.1;
}
.fade{
  position: absolute;
  animation: fadeIn 2.0s ease 1s 1 alternate;
}

@keyframes fadeIn { /*animetion-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}
/*足跡ふわっとだす　ここまで*/


div.jikoshoukai{
    position: relative;
    width: 100%;
    height: 550px;
   }


p.jikoshoukai{
    width: 100%;
    position: absolute;
    text-align: center;
    color: #143664;
    font-family: "筑紫A丸ゴシック ボールド";
    top: 200px;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    font-size: 15pt;
    line-height: 1.5;
}

img.otokonoko{
	position: absolute;
	top:20px;
	left: 30px;
}

img.onnanoko{
    position: absolute;
	top:190px;
	left:350px;
}



div.topic{
	 position: relative;
    width: 100%;
    height: 1600px;
}

img.dd{
	position: absolute;
	top:-35px;
	left:100px;
}

img.toshositu{
	z-index: 20;
    position: relative;
	top:330px;
	left:-8px;
}

img.hyokkori-1{
	z-index: 10;
	 object-fit: cover;
    width: 20%;
    height: auto;
	  position: relative;
	top:250px;
	left:-50px;
}

img.atorie{
	position: absolute;
	top:600px;
	left:30%;
}

img.proto{
	z-index: 15;
	position: absolute;
	top:910px;
	left:-8px;
}

img.hyokkori-2{
	z-index: 10;
	 object-fit: cover;
    width: 20%;
    height: auto;
	position: absolute;
	top:890px;
	left:20px;
}

img.hyokkori-3{
		z-index: 10;
	 object-fit: cover;
    width: 24%;
    height: auto;
	position: absolute;
	top:1080px;
	left:220px;
	transform: rotate(30deg);
}

img.rouka{
	position: absolute;
	top:1230px;
	left:100px;
}

div.mokuji{
	z-index: 15;
    width: 100%;
    height: 650px;
    background-color: #FFFFFF;
    position: relative;
	top:130px;
}


img.rogo{
	position: absolute;
	top: 20px;
	left: 20px;
}

img.asiato-annai{
	  object-fit: cover;
    width: 73%;
    height: auto;
	z-index: 5;
	transform: rotate(-10deg);
	position: absolute;
	top: 24px;
	left: 64px;
}

img.sisetuannnai{
	z-index: 10; 
    object-fit: cover;
    width: 10%;
    height: auto;
    position: absolute;
	top: 64px;
	left: 197px;
}

img.siryouseikyuu{
	z-index: 10; 
    object-fit: cover;
    width: 10%;
    height: auto;
    position: absolute;
	top: 153px;
	left: 274px;
}

img.jugyouannai{
		z-index: 10; 
    object-fit: cover;
    width: 10%;
    height: auto;
    position: absolute;
	top: 173px;
	left: 131px;
}

img.akusesu{
		z-index: 10; 
    object-fit: cover;
    width: 10%;
    height: auto;
    position: absolute;
	top: 260px;
	left: 206px;
}

img.kyouinshoukai{
	z-index: 10; 
    object-fit: cover;
    width: 10%;
    height: auto;
    position: absolute;
	top: 330px;
	left: 108px;
}

div.sns{
	 position: relative;
    width: 100%;
    height: 100px;
	top:470px;
}

p.sns{
    position: absolute;
    top: -20%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    color: #143664;
    font-family: "游ゴシック体 ";
    font-weight: bold;
}

img.facebook{
		z-index: 10; 
    object-fit: cover;
    width: 12%;
    height: auto;
    position: absolute;
	/*top: 5px;
	left: 20%;*/
	
		top: 40%;
    left: 30%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

img.twitter{
	z-index: 10; 
    object-fit: cover;
    width: 12%;
    height: auto;
    position: absolute;

	top: 40%;
    left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

img.youtube{
	z-index: 10; 
    object-fit: cover;
    width: 12%;
    height: auto;
    position: absolute;
	/*top: 5px;
	left: 80%;*/
	
	top: 40%;
    left: 70%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

img.asiato-sns-1{
	position: absolute;
	top: 85%;
	left: 35%;
}

img.asiato-sns-2{
	position: absolute;
	top: 5px;
	left: 80%;
}

img.asiatosaigo{
	z-index: 10;
	position: absolute;
	top: 190px;
	left: 20%;
}



div.tophe{
	position:relative;
	width: 100%;
	height: 100px;
}

img.tophe{
    z-index: 30;
    position: absolute;
    top: 220%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    margin-bottom: 50px;	
	
}