@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap');

body{

    color:#1b1b1b;
	letter-spacing:	2px;
	font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;	text-align:	center;
	-webkit-text-size-adjust: 100%;
    display: flex;
	flex-flow: column;
	min-height: 100vh;
	margin: 0px;
}

section{
	margin:0;
	padding:0;
}
ul, li {
	list-style: none;
}

a:link{
	color:#C60303;
	text-decoration:none;
}

a:visited{
	color:#C60303;
	text-decoration:none;
}

a:hover{
	color:#069349;
	text-decoration:none;
}

.hidden{
	display:none;
	font-size:0px;
	text-indent:-9999px;
}

.object-fitImg{
	width:100%;
	height:100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}


#container .clear{
	clear:both;
}


@keyframes blink {
    50% {
        opacity: 0.5;
        }
}

/* end of loading */
.loaded {
    opacity: 0;
    visibility: hidden;
}
selection{
	margin: 0;
	padding:0;
}
@media screen and (min-width:1281px )
{ 
.pc { display: block !important; }
.sp { display: none !important; }

    .img{
        max-width: 100%;
        border: 0;
        margin:0;
        paddingg:0;
    }

    #container{
        width:100%;
        padding:0;
        margin:0 auto;
    }
	

	#top{
		width:100%;
		height:auto;
		margin:0 auto;
		max-width: 1280px;
	}

   #top .wrap{
        width:100%;
		height:auto;
		position: relative;
   
    }

	/*PC メニュー*/	
    .menu{
		width:1280px;
        margin:0 auto;
        height:130px;
        padding:12px 24px 0 24px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .menu .logo{
        background: url("../img/main_logo.svg")no-repeat;
        background-position: center center;
        background-size: contain;
        padding-top:96px;
        width:130px;
        float:left;
		margin:0 0 0 10px;
    }
    .menu .position{
        display: flex;
        flex-direction: row;
        justify-content:flex-end;
        list-style: none;
        margin:0 0 0 10px;
		padding: 0;
        width: 1024px;
		float: right;
    }  
	.menu .position li a{
        color:#666;
		font-size:32px;
		margin-left:12px;
    }  
	.menu .position li a:link{
		
        color:#666;
    }  
   .menu .position li a:hover{
		font-size:36px;
        color:#000;
    }  
   .menu .sns{
        top:10px;
        right:12px;
        position: absolute;
    }
  	
    .gnav {
        display: flex;
        flex-direction: row;
        justify-content:space-between;
				align-items:baseline;
        list-style: none;
        height: 26px;
        margin:0;
		padding: 0 12px 0 24px;
        width: 1100px;
        float:left;
    }
    .gnav .event{
        color:#fff;
        margin-left:-12px;
    }      
 /*   .gnav .event::after{
        content:'\e5cf';
        font-family: 'Material Icons';
        font-weight: 200;
        position: absolute;

    }
*/

     /*全てのリスト・リンク共通*/
    .gnav li {
        font-size:14px;
        color:#fff;
        font-weight: 400;
        letter-spacing: 0em;
        marign:0;
        padding: 0;
        list-style: none;
        position: relative;
    }
    .gnav li a {
        color:#fff;
        /*height: 2.5vw;*/
        display: block;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }    
    .gnav li a:hover {
        color:#00079A;
    }    
    .gnav li li {
        font-size:1vw;
        list-style: none;
        height: 0;
        width:200px;
        margin-left: -38px;
        overflow: hidden;
        transition: .3s;
        z-index: 1;

    }
   .gnav li li a {
        text-align: center;
        background: #ddd;
        color:#999;
        padding:17px 0;
        line-height: 26px;
    }
    .gnav li li a:hover {
        color:#f60;
        font-size:16px;
        transition: .5s;
    }
    .gnav li:hover > ul > li {
        height: 57px;
        overflow: visible;
    }   
  
	#navi_f {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        transition: bottom 0.2s ease-in-out;
        box-shadow: 0 -10px 32px -6px rgba(0,0,0,0.8);
        z-index:9998;
        display: none;
    }
    #navi_f .menu{
		padding:0;
    }   
    #navi_f .event{
        color:#666;
    }   
    #navi_f .gnav li {
        color:#666;
    } 
    #navi_f .gnav li a {
		font-size:14px;
        color:#666;
    }    
    #navi_f .gnav li a:hover {
        color:#000;
		
    }    
     #navi_f .gnav li li a:hover {
        color:#222;
    }
	.adjust-ac{
		padding-top:128px;
		margin-top:-128px;
	}
	
	
    #top .detail{
        width:auto;
        margin:0 auto;
        height:78%;
        text-align: left;
        padding:2vw;
    }
    #top .detail h1{
        font-size:3.25vw;
        color:#fff;
        font-weight: 100;
        line-height: 3.5vw;
        margin: 0 0 1vw 0;
        padding:0;
        animation: text-anime2 2s; 
    }
	/*コマニちゃんアニメ*/
 
   	#anime-wrap {
		width:1280px;
		position:fixed;
		height:50px;
		z-index: 3;
		inset: 0;
		margin: auto;
		top:160px;
	}
	#page-top {
		position: absolute;
		background: url("../img/anime.gif")no-repeat;
		background-position: top;
		background-size: contain;
		padding-top: 15%;
		width:105px;
        right: 10px;
		animation: UpAnime2 1s forwards;
	}

/*コマニちゃんアニメ
	 	#anime-wrap {
		width:1280px;
		position:fixed;
		z-index: 3;
		inset: 0;
		height:220px;
		margin: auto;
		border:1px solid #ff0;
		top:160px;
		
	}
	#page-top {
		position:absolute;
		width:1270px;
		background: url("../img/anime.gif")no-repeat;
		background-position: top right;
		background-size: contain;
		padding-top: 220px;
		top:0;
		margin-right:10px;
		animation: UpAnime2 1s forwards;
		border:1px solid #f09;
	}
	
*/		
	@keyframes UpAnime2{
		0% {
    	opacity: 0;
		transform: translateY(2000px);
	  }
	  90% {
		opacity: 0.2;
	  }
	  100% {
		opacity: 1;
		transform: translateY(0);  
	  }
	}
/*　上に上がる動き　*/

	#page-top.UpMove{
		animation: UpAnime 0.5s forwards;
	}
	@keyframes UpAnime{
	  from {
		opacity: 1;
		transform: translateY(150px);
	  }
	  to {
		opacity: 1;
		transform: translateY(37vh);
	  }
	}

	/*　下に下がる動き　*/

	#page-top.DownMove{
		animation: DownAnime 0.5s forwards;
	}
	@keyframes DownAnime{
	  from {
		opacity: 1;
		transform: translateY(0);
	  }
	  to {
		opacity: 1;
		transform: translateY(150px);
	  }
	}

}


@media screen and (min-width:641px ) and (max-width:1280px)
{

/*トップ*/
.pc { display: block !important; }
.sp { display: none !important; }

    .img{
        max-width: 100%;
        border: 0;
        margin:0;
        paddingg:0;
    }
	main{
		margin: 0;
		padding: 0;
	}

    #container{
        width:100%;
        padding:0;
        margin:0 auto;
    }
	
	
	#top{
		width:100%;
		height:auto;

	}
	
  	#top .wrap{
        width:100%;
        height:auto;
		position: relative;
    }
	
	/*PC メニュー*/	
    .menu{
        max-width:1280px;
		width:100%;
        margin:0 auto;
        height:10vw;
        padding:1vw 2vw 0 2vw;
        display: flex;
        align-items: center;
        position: relative;
    }
    .menu .logo{
        background: url("../img/main_logo.svg")no-repeat;
        background-position: center center;
        background-size: contain;
        padding-top:7%;
        width:10%;
        float:left;
		margin:0 0 0 0.5%;
    }
    .menu .position{
        display: flex;
        flex-direction: row;
        justify-content:flex-end;
        list-style: none;
        margin:0 0 0 0.5%;
		padding: 0;
        width: 80%;
		float: right;
    }  
	.menu .position li a{
        color:#666;
		font-size:2.5vw;
		margin-left:1vw;
    }  
	.menu .position li a:link{
        color:#666;
    }  
   .menu .position li a:hover{
		font-size:2.75vw;
        color:#000;
    }  
   .menu .sns{
        top:0.5vw;
        right:1%;
        position: absolute;
    }
  	
    .gnav {
        display: flex;
        flex-direction: row;
        justify-content:space-between;
				align-items:baseline;
        list-style: none;
        height: 2vw;
        margin:0;
		padding: 0 1% 0 2%;
        width: 86%;
        float:left;
    }
    .gnav .event{
        color:#fff;
        margin-left:-1vw;
    }      
 /*   .gnav .event::after{
        content:'\e5cf';
        font-family: 'Material Icons';
        font-weight: 200;
        position: absolute;

    }
*/

     /*全てのリスト・リンク共通*/
    .gnav li {
        font-size:1.15vw;
        color:#fff;
        font-weight: 400;
        letter-spacing: 0em;
        marign:0;
        padding: 0;
        list-style: none;
        position: relative;
    }
    .gnav li a {
        color:#fff;
        /*height: 2.5vw;*/
        display: block;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }    
    .gnav li a:hover {
        color:#00079A;
    }    
    .gnav li li {
        font-size:1vw;
        list-style: none;
        height: 0;
        width:15.5vw;
        margin-left: -3vw;
        overflow: hidden;
        transition: .3s;
        z-index: 1;

    }
   .gnav li li a {
        text-align: center;
        background: #ddd;
        color:#999;
        padding:1.3vw 0;
        line-height: 2vw;
    }
    .gnav li li a:hover {
        color:#f60;
        font-size:1.1vw;
        transition: .5s;
    }
    .gnav li:hover > ul > li {
        height: 4.5vw;
        overflow: visible;
    }   
  
	#navi_f {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        transition: bottom 0.2s ease-in-out;
        box-shadow: 0 -0.75vw 2.5vw -0.5vw rgba(0,0,0,0.8);
        z-index:9998;
        display: none;
    }
    #navi_f .menu{
        /*padding:0vw 0.75vw 0vw 2vw;*/
		padding:0;
    }   
    #navi_f .circle{
        border:0.07vw solid #666;
    }   
    #navi_f .event{
        color:#666;
    }   
    #navi_f .gnav li {
        color:#666;
    } 
    #navi_f .gnav li a {
        color:#666;
        /*height: 2.5vw;*/
    }    
    #navi_f .gnav li a:hover {
        color:#000;
		
    }    
     #navi_f .gnav li li a:hover {
        color:#222;
    }
	.adjust-ac{
		padding-top:10vw;
		margin-top:-10vw;
	}
	
	
    #top .detail{
        width:auto;
        margin:0 auto;
        height:78%;
        text-align: left;
        padding:2vw;
    }
    #top .detail h1{
        font-size:3.25vw;
        color:#fff;
        font-weight: 100;
        line-height: 3.5vw;
        margin: 0 0 1vw 0;
        padding:0;
        animation: text-anime2 2s; 
    }
	/*コマニちゃんアニメ*/
   	#anime-wrap {
		max-width:128px;
		width:10%;
		position:fixed;
		height: 80vw;
		max-height: 640px;
		z-index: 3;
		right:0;
		top:0;

	}
	#page-top {
		position: absolute;
		background: url("../img/anime.gif")no-repeat;
		background-position: top;
		background-size: contain;
		padding-top: 150%;
		width:8vw;
        right: 1vw;
		bottom:1vw;
		animation: UpAnime2 1s forwards;
	}
	@keyframes UpAnime2{
		0% {
    	opacity: 0;
		transform: translateY(2000px);
	  }
	  90% {
		opacity: 0.2;
	  }
	  100% {
		opacity: 1;
		transform: translateY(0);  
	  }
	}
/*　上に上がる動き　*/

	#page-top.UpMove{
		animation: UpAnime 0.5s forwards;
	}
	@keyframes UpAnime{
	  from {
		opacity: 1;
		transform: translateY(0vh);
	  }
	  to {
		opacity: 1;
		transform: translateY(5vh);

	  }
	}

	/*　下に下がる動き　*/

	#page-top.DownMove{
		animation: DownAnime 0.5s forwards;
	}
	@keyframes DownAnime{
	  from {
		opacity: 1;
		transform: translateY(0);
	  }
	  to {
		opacity: 1;
		transform: translateY(0vh);
	  }
	}
}


/* スマートフォン用 */

@media screen and (max-width:640px )
{
	.pc { display: none !important; }
	.sp { display: block !important; }
/*	
	img {
		border: 0;
		width: 100%;
	}
	
*/
    #container{
		width:100%;
		margin:0 auto;
		padding:0;
      /*  flex: 1;*/
	}
			
	#top{
		width:100%;
		height:auto;
	}
	
	#top .wrap{
        width:100%;
        height:auto;
		position: relative;
    }
 
     /*スマホナビゲーション*/   
	#g-nav{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 9998;
        /*ナビのスタート位置と形状*/
        top:0;
        right: -120%;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background:#ccc;
        /*動き*/
        transition: all 0.6s;
    }

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
        right: 0;
}

    /*navi scroll vertical*/
    #g-nav.panelactive #g-nav-list{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*navi*/
    #g-nav ul {
        /*ナビゲーション天地中央揃え*/
        width:80%;
        position: absolute;
        z-index: 999;
        top:45%;
        left:50%;
        transform: translate(-50%,-50%);
    }

    /* list layouts */

    #g-nav li{
        list-style: none;
        text-align: left;
        font-size:4vw;
        padding:1.5vw 0;
    }

    #g-nav li a{
        color: #fff;
        text-decoration: none;
      /*  display: block;*/
        font-weight: bold;
    }
    #g-nav li .bsp{
        margin-top:3vw;
    }
    #g-nav .cd{
        list-style: none;
        text-align: left;
        font-size:3.25vw;
        line-height:0;
        padding:0 0 0 3em;
        position: relative;
		margin:0;
    }
    #g-nav .cd::before{
        content: '\e5e1';
        font-family: 'Material Icons';
        font-size:3.25vw;
        position: absolute;
        top:0.5em;
        margin-left: -1.5em;
    }

    /* button */
    .openbtn1{
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        top:3vw;
        right: 4.5vw;
        width: 10vw;
        height:10vw;
        border-radius: 0.5vw;
    }
	.openbtn_cover{
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        top:2vw;
        right: 3.5vw;
        width: 12vw;
        height:12vw;
        border-radius: 25%;
		opacity: .9;

    }
    /*×に変化*/	
    .openbtn1 span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 0;
        height: 0.65vw;
        border-radius: 0.3vw;
        background-color: #fff;
        width: 100%;
      	filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8))
   }

    .openbtn1 span:nth-of-type(1) {
        top:2.5vw;	
    }

    .openbtn1 span:nth-of-type(2) {
        top:5vw;
    }

    .openbtn1 span:nth-of-type(3) {
        top:7.5vw;
    }
    
    .openbtn1.active{
            background:rgba(255,255,255,0);
        }
    .openbtn1.active span:nth-of-type(1) {
        top: 3.8vw;
        left: 0vw;
        transform: translateY(0.93vw) rotate(-45deg);
        width: 100%;
        background-color: #fff;
		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0))
    }

    .openbtn1.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn1.active span:nth-of-type(3){
        top: 5.68vw;
        left: 0vw;
        transform: translateY(-0.93vw) rotate(45deg);
        width: 100%;
        background-color: #fff;
		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0))
    }
    header{
        width:100%;
        padding: 0;
        position: fixed;
        z-index: 998;
        height:20vh;
        top:0;
    }
    header .logoDC{
        background: url("../img/main_logo.svg")no-repeat;
        background-position: leff center;
        background-size: contain;
        padding-top:16vh;
        width:11.5vh;
        height:14vh;
        margin: 2vh 0 0 2vh;        
    }
    header .sns{
        display: flex;
        flex-direction: row;
        justify-content:flex-end;
        width:100%;
        bottom:20vw;
        right:5.75vw;
        position: absolute;
		font-size:12vw;
    }
	
    header .sns .space{
		margin:0 0 0 5vw;
		color:#fff
    }
	.adjust-ac{
		padding-top:0.25vw;
		margin-top:-0.25vw;
	}
	/*コマニちゃんアニメ*/
   	#anime-wrap {
		
		width:20%;
		position:fixed;
		height: 20vh;
		z-index: 3;
		bottom:2.5vw;
		right:0;
	}
	#page-top {
		position: absolute;
		background: url("../img/anime.gif")no-repeat;
		background-position: top;
		background-size: contain;
		padding-top: 180%;
		width:24vw;
		right:2%;
		bottom:8vw;
		animation: UpAnime2 1s forwards;
		transform: translate(-50%, 50%);
	}
	@keyframes UpAnime2{
		0% {
    	opacity: 0;
		transform: translateY(2000px);
	  }
	  90% {
		opacity: 0.2;
	  }
	  100% {
		opacity: 1;
		transform: translateY(0);  
	  }
	}
/*　上に上がる動き　*/

	#page-top.UpMove{
		animation: UpAnime 0.5s forwards;
	}
	@keyframes UpAnime{
	  from {
		opacity: 1;
		transform: translateY(5vw);  
	  }
	  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(0);
	  }
	}
}