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

@media(max-width:899px){


.top {}
.top .sec01 {position:relative;background:#0091E1;}
.top .sec01::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url("../img/top/fr01.png"); background-size:140rem 400rem;z-index:2;}
.top .sec01 .mainimg {position:relative;z-index:5;}
	.top .sec01 .area01 {padding-bottom:6rem;}
	.top .sec01 .area01 .wrap {padding: 4rem 2rem 0;}
	.top .sec01 .area01 .wrap .titles {margin-bottom:4rem;}
	.top .sec01 .area01 .wrap .titles .title {font-size:2.2rem;line-height:4rem;padding:2rem 0;}
	.top .sec01 .area01 .wrap .titles::before{width:0.6rem;height:0.6rem;}
	.top .sec01 .area01 .wrap .titles::after{width:0.6rem;height:0.6rem;}
	.top .sec01 .area01 .wrap .titles .title::before{height:0.6rem;}
	.top .sec01 .area01 .wrap .titles .title::after{height:0.6rem;}
	.top .sec01 .area01 .wrap .text {font-size:1.4rem;line-height:2.4rem;letter-spacing:0.04em;color:#FFF;margin-bottom:4rem;text-align:justify;}
	.top .sec01 .area01 .wrap .link {height:8rem;}
	.top .sec01 .area02 {padding-top:4rem;padding-bottom:9rem;}
	.top .sec01 .area02::before{height:11.25rem;background-position:bottom center;background-repeat: no-repeat;top:-9rem;}
	.top .sec01 .area02 .wrap {padding: 0 2rem;}
	.top .sec01 .area02 .wrap .names {margin: 0 auto 3rem;padding-top:3rem;}
	.top .sec01 .area02 .wrap .names .img {width:14rem;}
	.top .sec01 .area02 .wrap .names .name {font-size:2.2rem;line-height:4rem;padding-bottom:1rem;}
	.top .sec01 .area02 .wrap .names .name::before{width:0.6rem;height:0.6rem;}
	.top .sec01 .area02 .wrap .names .name::after{height:0.6rem;}
	.top .sec01 .area02 .wrap .names .caption {font-size:1.4rem;line-height:2.4rem;}

	.top .sec01 .area02 .wrap .youtube {border-radius:2rem;padding-bottom:2rem;}
	.top .sec01 .area02 .wrap .youtube .name {font-size:1.8rem;}
	.top .sec01 .area02 .wrap .youtube iframe {width:32rem;height:18rem;}
.top .sec02 {position:relative;}
	.top .sec02 .tabs {padding: 0 2rem;box-sizing:border-box;}
	.top .sec02 .tabs label + label{margin-left:1rem;}
	.top .sec02 .tabs .tab{font-size:1.4rem;line-height:4rem;width:11rem;border-radius:1rem 1rem 0 0;}
	.top .sec02 .tabs .tab::before{border-left-width:1.6rem;border-right-width:1.6rem;border-top-width:1.4rem;}

.top .sec02 .areas {}
	.top .sec02 .areas .area01 {padding:3rem 2rem;}
	.top .sec02 .areas .area01 .wrap {border-radius:1rem;padding-bottom:1rem;}
	.top .sec02 .areas .area01 .items {background:#FFF;}
	.top .sec02 .areas .area01 .items .item {flex-wrap:wrap;}
	.top .sec02 .areas .area01 .items .item .name {font-size:1.4rem;line-height:2.4rem;letter-spacing:0.04em;width:100%;padding:1rem;box-sizing:border-box;}
	.top .sec02 .areas .area01 .items .item .text {font-size:1.4rem;line-height:2.4rem;letter-spacing:0.04em;width:100%;padding:1rem;box-sizing:border-box;}
	.top .sec02 .areas .area01 .items .item::before{display:none;}
	.top .sec02 .areas .area01 .items .item:last-child::before {background:#CBCBCB;display:block;}
	.top .sec02 .areas .area01 .texts {font-size:1.3rem;line-height:2.3rem;padding:1rem;}

	.top .sec02 .areas .area02 {padding:3rem 2rem;}
	.top .sec02 .areas .area02 .wrap {border-radius:1rem;padding-bottom:1rem;}
	.top .sec02 .areas .area02 .items {background:#FFF;}
	.top .sec02 .areas .area02 .items .item {flex-wrap:wrap;}
	.top .sec02 .areas .area02 .items .item .name {font-size:1.4rem;line-height:2.4rem;letter-spacing:0.04em;width:100%;padding:1rem;box-sizing:border-box;}
	.top .sec02 .areas .area02 .items .item .text {font-size:1.4rem;line-height:2.4rem;letter-spacing:0.04em;width:100%;padding:1rem;box-sizing:border-box;}
	.top .sec02 .areas .area02 .items .item::before{display:none;}
	.top .sec02 .areas .area02 .items .item .game {padding:2rem 0 0;margin-top:2rem;border-top:2px solid #CBCBCB;}
	.top .sec02 .areas .area02 .items .item .game .titles .icon {width:3.5rem;}
	.top .sec02 .areas .area02 .items .item .game .titles .title {font-size:2rem;width:calc(100% - 5rem);}
	.top .sec02 .areas .area02 .items .item .game .captions .caption {font-size:1.4rem;line-height:2.4rem;}
	.top .sec02 .areas .area02 .items .item .game .captions .subcaption {font-size:1.3rem;line-height:2.3rem;margin-top:1rem;}
	.top .sec02 .areas .area02 .texts {font-size:1.3rem;line-height:2.3rem;padding:1rem;}
	
	.top .sec02 .areas .area03 {padding:3rem 2rem;}
	.top .sec02 .areas .area03 .wrap {border-radius:0;padding:0;background:initial}
	.top .sec02 .areas .area03 .view01 .name {font-size:2.2rem;line-height:4rem;border-radius:1rem 1rem 0 0 ;margin-bottom:1rem;}
	.top .sec02 .areas .area03 .view02 {margin-top:4rem;}
	.top .sec02 .areas .area03 .view02 .name {font-size:2.2rem;line-height:4rem;border-radius:1rem 1rem 0 0 ;margin-bottom:1rem;}
	.top .sec02 .areas .area03 .view02 .img {margin-bottom:1rem;}
	.top .sec02 .areas .area03 .text {font-size:1.4rem;line-height:2.4rem;background:#FFF;border-radius:1rem;padding:1rem;}
	.top .sec02 .areas .area03 .comming {font-size:2rem;line-height:4rem;padding:10rem 0;background:#FFF;border-radius:1rem;}

	

.top .sec02 #in_tab01:checked ~ .tabs::before{background:#F7A919;}
.top .sec02 #in_tab02:checked ~ .tabs::before{background:#0095E5;}
.top .sec02 #in_tab03:checked ~ .tabs::before{background:#15AE90;}
	.top .sec02 #in_tab01:checked ~ .tabs .tab01{line-height:5rem;}
	.top .sec02 #in_tab02:checked ~ .tabs .tab02{line-height:5rem;}
	.top .sec02 #in_tab03:checked ~ .tabs .tab03{line-height:5rem;}
.top .sec02 #in_tab01:checked ~ .tabs .tab01::before{transform:translate(-50%,0);transition:0.5s;}
.top .sec02 #in_tab02:checked ~ .tabs .tab02::before{transform:translate(-50%,0);transition:0.5s;}
.top .sec02 #in_tab03:checked ~ .tabs .tab03::before{transform:translate(-50%,0);transition:0.5s;}

.top .sec02 #in_tab01:not(:checked) ~.areas .area01 {height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.top .sec02 #in_tab01:not(:checked) ~.areas .area01 *{padding-top:0;padding-bottom:0;}
.top .sec02 #in_tab02:not(:checked) ~.areas .area02 {height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.top .sec02 #in_tab02:not(:checked) ~.areas .area02 *{padding-top:0;padding-bottom:0;}
.top .sec02 #in_tab03:not(:checked) ~.areas .area03 {height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.top .sec02 #in_tab03:not(:checked) ~.areas .area03 *{padding-top:0;padding-bottom:0;}

.top .sec02 #in_tab01:checked ~.areas .area01 {transition:0.5s;}
.top .sec02 #in_tab02:checked ~.areas .area02 {transition:0.5s;}
.top .sec02 #in_tab03:checked ~.areas .area03 {transition:0.5s;}


}