@charset "utf-8";
/* CSS Document */
html{
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}
body{
	line-height: 1.8;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
a img{width: 100%;}
a:hover{opacity: .5;}
.wrapper{
	width: 100%;
	overflow: hidden;
}
.wrap{
	margin: 0 auto;
	padding: 47px 0 65px;
	max-width: 915px;
	position: relative;
}
h3{
	color: #e73820;
	font-weight: 700;
	text-align: center;
}
h3 span{color: #f49e43;}
/*=================================================================================================================================

font-size

=================================================================================================================================*/
body,.sec2 p{font-size: 18px;}
h3{font-size: 30px;}
h4{font-size: 25px;}
.sec3 small,footer small{font-size: 14px;}
#link p{font-size: 20px;}
.text li{font-size: 14px}
@media screen and (max-width: 499px){
	body,.sec2 p{font-size: 14px}
	h3{font-size: 20px;letter-spacing: 0;}
	h4{font-size: 18px;display: inline;}
	.sec3 small,footer small{font-size: 12px;}
	#link p{font-size: 18px;}
	.text li{font-size: 9.5px}
}
/*=================================================================================================================================

fv

=================================================================================================================================*/
header{
	width: 510px;
	background: #fff;
	padding: 6px 0 23px;
	margin: -1px auto 27px;
	border-radius: 0 0 50px 50px;
}
section{padding: 0 40px 80px;}
.fv{
	background: url("../img/fv_bg.jpg") center;
	background-size: cover;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-radius: 50px 50px 0 0;
}
.fv_btn .sp{display: none;}
.fv_btn{
	background: url("../img/fvhand2.png") no-repeat;
	background-size: cover;
	padding: 147px 110px 70px 100px;
	position: absolute;
	right: 50%;
	top: 425px;
	transform: translate(50%,0);}
.fv_btn a{
	display: block;
	width: 94px;
}
.fv_btn .applestore{margin: 0 auto 35px;}
.pc{margin: -25px auto 0;}
.sp{display: none;}

/*=================================================================================================================================

sec1

=================================================================================================================================*/
.sec1{background: #e73820;}
.top{
	position: relative;
	margin-top: -72px;
}
.top2{
	position: relative;
	margin-top: -120px;
}
.top>img,.top2>img{
	width: 100%;
}
.top ul{
	background: url("../img/top_bg.jpg");
	background-size: 100%;
	position: relative;
	padding: 30px 45px 150px;
}

.sec1 ul{
	display: flex;
	justify-content: space-between;
	
}
.top2 ul{
	position: relative;
	background: url("../img/top2_bg.jpg") repeat-y;
	background-size: 100%;
	padding: 30px 45px 20px;
}
.sec1 li{
	width: 360px;
	color: #fff;
}
.sec1 li img{
	display: block;
	margin: 0 auto 30px;
}
.sec1 li div{text-align: center;}
.sec1 li div p{text-align: justify;margin: 35px auto 0;}
h4{
	text-align: center;
	font-weight: 700;
	display: inline;
    background:linear-gradient(transparent 75%, #d50900 0%);
}
.top2 h4{background:linear-gradient(transparent 75%, #e76e1e 0%);}
/*=================================================================================================================================

bnr

=================================================================================================================================*/
.bnr_box a{margin-bottom: 20px;display: block;}
.bnr_box a img{width: 100%;}
 .bnr_box .last{margin-bottom: 0;}
.bnr_sp{display: none;}
@media screen and (max-width: 1000px){
	.bnr_pc{display: none;}
	.bnr_sp{display: block;}
	.bnr_box{width: 100%;}
}
/*=================================================================================================================================

sec4_2

=================================================================================================================================*/
.sec4_2{
	padding: 0 0 80px;
	background: #e73820;
	border-radius: 0 0 50px 50px;
	margin-bottom: 120px;
}
.dl{
	background: #fff;
	padding: 70px 50px;
}
.dl div{
	display: inline-block;
	margin: 0 0 0 60px;
}
.sec4_2 .pc{vertical-align: bottom;}
.dl p{margin: 20px 0;}
.dl a img{width: 200px;}
@media screen and (max-width: 1000px){
	.sec4_2{padding: 0;}
	.sec4_2>div{padding: 40px 10%;}
	.sec4_2 .sp{
		width: 65%;
		max-width: 460px;
		min-width: 230px;
	}
	.sec4_2 div p {margin: 20px 0 10px;}
	.sec4_2 div div{
		display: block;
		margin: 0 0 0 0;
	}
	.dl div a img {width: calc(50% - 10px);}
	.sec4_2 a .applestore{margin-right: 13px;}
}
/*=================================================================================================================================

sec2

=================================================================================================================================*/
.sec2{padding: 90px 0 100px;}
.sec2 ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
	gap:50px;
}
.sec2 li{width: 47%;text-align: center;}
.sec2 h3{margin-bottom: 100px;}
.sec2 div{margin-bottom: 20px;}
.sec2 p{margin-bottom: 30px;}
.sec2 br{display: none;}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
/*=================================================================================================================================

sec3

=================================================================================================================================*/
.sec3{
	background: #e73820;
	border-radius: 50px 50px 0 0;
	padding: 40px;
}
.sec3 ul {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 80px;
}
.sec3 li{width: 390px;}
.sec3 p,.box1 li>small{color: #fff;}
.sec3 li>small{display: inline-block;}
.sec3 li:first-child p{margin-bottom: 40px;}
.sec3 p small{line-height: 1.5;}
.box1 li img{
	display: block;
	margin: 30px auto 0;
}
.sec3 h3{
	background: #fff;
	border-radius: 20px 20px 0 0;
	margin: 0 auto 30px;
}
.box2 h3{margin: 0}
.box2>div{
	width: 100%;
	background: url("../img/sec3bg.png") , #f1b2a2;
	background-size: cover;
	background-position: center center , center center;
	position: relative;
}
/*.box2 ul{
	margin: 2px auto 0;
	display: flex;
	flex-wrap: wrap;
	padding: 30px 115px 60px;
}
.box2 li:nth-child(n+2){width: 280px;}
.box2 li:nth-child(-n+2){
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
}.box2 li:last-child{margin-bottom: 0;}
.box2 li:first-child{left: -130px;}
.box2 li:nth-child(n+4){margin-bottom: 40px;}
.sec3 li, .box2 li:nth-child(n+2) img {margin: 0 auto 20px;}
.box2 li:nth-child(2){
	margin: 0;
	right: -185px;
}*/
.box2 ul{
	margin: 2px auto 0;
	display: flex;
	flex-wrap: wrap;
	padding: 40px 50px 60px;
}
.box2 li{margin-bottom: 60px;width: 48%;}


.box2 li img {margin: 0 auto 20px;display: block;}
.box2 p{color: #000;}
.sec4_2>.bnr_box{
	background: #fff;
	margin: 0 auto;
	padding: 70px 40px ;
}
/*=================================================================================================================================

sec4

=================================================================================================================================*/
.sec4{padding: 40px 50px;}
.sec4 div{
	display: inline-block;
	margin: 0 0 0 60px;
}
.sec4 .pc{vertical-align: bottom;}
.sec4 div p{margin: 20px 0;}
.sec4 a img{width: 200px;}
/*=================================================================================================================================

footer

=================================================================================================================================*/
footer{
	background: url("../img/castle.png"),#e73921;
	background-repeat: no-repeat,repeat;
	background-position: right 40px bottom ,center;
	text-align: center;
	padding: 70px 0 12px;
	border-radius: 0 0 50px 50px;
}
footer img{
	background: #fff;
	padding: 6px 10px;
	margin: 0 auto 20px;
	width: 185px;
}
footer p,footer small{color: #fff;}
footer p{margin-bottom: 60px;}
.sp,.sec3 li .sp{display: none;}
@media screen and (max-width: 1000px){
	section{padding: 0;}
	.sp,.sec3 li .sp{display: block;}
	.pc,.sec3 li .pc{display: none;}
	header{
		width: 56%;
		padding: 5px 0 15px;
		border-radius: 0 0 40px 40px;
		margin: -1px auto 40px;
	}
	h1{
		width: 50%;
		margin: 0 auto;
	}
	h1 img{width: 100%;}
	.fv{
		width: 95%;
		margin: 0 auto;
		border-radius: 40px 40px 0 0;
	}
	.fv_btn{
		background: url(../img/fvhand.png) no-repeat;
		background-size: 100%;
		padding: 44% 14% 13%;
		top: 40%;
		text-align: center;
	}
	.fv_btn a{width: 100%;}
	.fv_btn .pc{display: none;}
	.fv_btn .sp{display: block;}
	.fv_btn .applestore{margin: 0 auto 20px;}
	h2 img{width: 90%;}
	.pc{display: none;}
	.sp{
		display: block;
		width: 100%;
		margin: -10px auto 0;
	}
	.sec1 {
		background: none;
		width: 95%;
		margin: 0 auto;
	}
	.sec1 li div{text-align: left;width: calc( 80% - 15px);}
	.sec1 li div p{margin: 10px auto 0;}
	h4{text-align: left; }
	.sec1 ul{flex-direction: column;}
	.sec1 li img {
		display: inline-block;
		width: 20%;
		max-width: 100px;
		margin: 1% 15px 0 0;
	}
	.sec1 li{width: 100%;display: flex;align-items: flex-start;}
	.sec1 li:first-child{margin: 0 auto 30px;}
	.sec1 .top{
		background: none;
		padding: 0;
		margin-top: -15%;
	}
	.top>img, .top2>img {
		width: 100%;
		position: static;
		top: -25%;
	}
	.top ul{
		background: url("../img/em.png"),url("../img/top_sp_bg.jpg");
		background-repeat: no-repeat, repeat;
		background-size: 4%,100%;
		margin-top: -1px;
		padding: 25px 5% 150px;
	}
	.top2 {
		background: none;
		margin-top: -160px;
		padding: 47px 0 0;
	}
	.top2 ul{
		background: url("../img/ev.png"),url("../img/top2_sp_bg.jpg");
		background-repeat: no-repeat,repeat;
		background-position: right bottom 70px,center center;
		background-size: 4%,95%;
		margin: -2px 0 80px;
		padding: 25px 5% 35px;
		border-radius: 0 0 40px 40px;
	}	
	.pc_r{display: none;}
	.sec2 {padding: 100px 50px 90px;}
	.sec2 li{width: calc( 50% - 25px );}
	.sec4_2>.bnr_box{
		width: 85%;
		padding: 40px 7.5% ;
	}
	.sec3 {
		padding: 50px 5% 50px;
		width: 85%;
		margin: 0 auto;
		border-radius: 40px 40px 0 0;
	}
	.sec3 h3{
		margin: 0 auto 10px;
		border-radius: 0;
	}
	.sec3 ul {
		flex-direction: column;
		margin: 0 auto 50px;
	}
	.sec3 li{margin: 0 auto 40px;width: 100%;}
	.sec3 li:first-child p{
		margin-bottom: 20px;
		text-align: justify;
	}
	.sec3 li,.box2 li:nth-child(n+2){width: 100%;}
	.box1 li:last-child{margin-bottom: 0;}
	.box1 li div{display: flex;align-items: flex-start;flex-direction: row-reverse;}
	.box1 li img {
		display: inline-block;
        width: 20%;
        max-width: 100px;
        margin: 1% 15px 0 0;
	}
	.box2 h3{margin: 0 auto 2px;}
	.box2 ul {
		padding: 30px 30px 60px;
		margin: 0 auto;
	}
	.box2 li:nth-child(n+3) img {
		max-width: 600px;
		min-width: 160px;
	}
	.box2>div{
		width: 100%;
		background: url("../img/sec3bg.png") , #f1b2a2;
		background-repeat: no-repeat;
		background-size: 150% , cover;
		background-position: center center , center center;
		position: relative;
	}
	.box2 p{
		/*max-width: 600px;
		min-width: 160px;
		margin: 0 auto;*/
	}
	.sec4{padding: 50px 10% 55px;}
	.sec4 .sp{
		width: 65%;
		max-width: 460px;
		min-width: 230px;
	}
	.sec4 div p {
		margin: 20px 0 10px;
	}
	.sec4 div {
		display: block;
		margin: 0 0 0 0;
	}
	.sec4 a img {width: calc(50% - 10px);}
	.sec4 a .applestore{margin-right: 13px;}
	.box2 li:nth-child(-n+2) img {width: 100%; max-width: 450px;}
	/*.box2 li:first-child{
		left: -17%;
		width: 25%;
		top: 25%;
	}
	.box2 li:nth-child(2){
		right: -11%;
		width: 21%;
		top: 75%;
	}*/
	footer{
		width: 95%;
		margin: 0 auto;
		border-radius: 0 0 40px 40px;
		padding: 30px 0 5px;
		background: url("../img/castle.png"),#e73921;
		background-repeat: no-repeat,repeat;
		background-size: 20%,cover;
		background-position: right -10px bottom ,center;
	}
	footer img{margin-bottom: 12.5px;width: 20%;max-width: 185px; min-width: 92.5px;}
	footer p{margin-bottom: 32.5px;}
	
}
@media screen and (max-width: 750px){
	.wrap{margin: 22.5px auto 13px;padding: 0;}
	.sec4_2>div {padding: 40px 10% 0;}
	.sec2{padding: 40px 7.5% 50px;}
	
	.sec2 li{width: 100%;}
	.sec2 ul{width: 100%;gap:25px;}
	.sec2 p{margin-bottom: 0;}
	.sec2 div{margin-bottom: 10px;}
	.sec2 h3{margin-bottom: 40px;}
	.sec2 br{display: block;}
	.box2 .bnr_box {padding: 25px 0 50px;}
	.sec3 {padding: 25px 5% 25px;}
	.top2 ul{margin: -2px 0 40px;}
	.bnr_box{margin: 0 auto 40px;}
}
@media screen and (max-width: 499px){
	.fv_btn {top: 44%;}
	.sec2 h3 {margin-bottom: 40px;}
	.youtube{margin-bottom: 20px;}
	.youtube_margin{margin-bottom: 0;}
	.fv_btn .applestore {margin: -1px auto 15px;}
	 footer small span{display: block;margin-bottom: -8px;}  
}
@media screen and (max-width: 425px){
	.sec1 li img,.box1 li img {width: 20%;}
	.box2 ul {padding: 20px 20px 60px;}
}
/*=================================================================================================================================



=================================================================================================================================*/
#link{padding: 100px 0;}
#link>ul>li{padding: 40px 5% 0;}
#link>ul>li:first-child{padding: 40px 5%;}
#link ul ul li{	border: solid #ccc 1px;}
#link ul ul{display: flex; gap: 20px;flex-wrap: wrap;}
#link p{
	font-weight: 600;
	color: #e73820;
	margin-bottom: 20px;
}
.platinum{ background: #f6ded2;}
.platinum li{ width: calc((100% - 46px) / 3);}
.gold li{ width: calc((100% - 46px) / 3);}
.silver li{width: calc((100% - 68px) / 4);}
.bronze li{width: calc((100% - 90px) / 5);}

@media screen and (max-width: 750px){
	#link{padding: 50px 0;}
	#link ul ul{gap: 10px;}
	#link p{margin-bottom: 10px;}
	.platinum li{ width: 100%;}
	.gold li{ width: 100%;}
	.silver li{width: calc((100% - 14px) / 2);}
	.bronze li{width: calc((100% - 32px) / 3);}	
}
/*=================================================================================================================================



=================================================================================================================================*/
.details {
	position: absolute;
	z-index: 100000;
	right: 0;
	top: 0;
}
.details-summary {
	position: relative;
	display: block;
	padding: 10px;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	background-color: #fff;    
	width: 142px;
}
.details-summary:hover {
	cursor: pointer;
	opacity: 0.8;
}
.details-summary::-webkit-details-marker {
	display: none;
}
.details-summary p{display: inline-block;margin-right: 10px;}
.btn {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.btn:before {
	content: '';
	width: 23px;
	height: 23px;
	background: #e73921;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
.btn:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(135deg);
	position: absolute;
	left: 8px;
	bottom: -3px;
	margin: auto;
}
.details-content ul{
	text-align: center;
	padding:0 10px;
	border-radius: 10px;
	background: #000;
}
.details-content li{
	padding: 10px 0;
	border-bottom: #3c3c3c 1px solid;
}
.details-content a{
	color: #fff;
	display: block;
	font-size: 16px;
}
.sp_language{display: none;}
.span-container,
.checkbox {
	min-width: 50px;
	max-width: 100px;
	width: 100%;
	min-height: 50px;
	max-height: 100px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	background-image: url(../img/btn_sp.jpg);
	background-size: 100%;
}
.checkbox {
	opacity: 0;
	z-index: 100;
}
.checkbox:hover,.span-container:hover{cursor: pointer;}
.span-container {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	z-index: 90;
}
.span-container img {
	opacity: 0;
	width: 100%;
}
.checkbox:checked ~ .span-container img {opacity: 1;}
.nav-container{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 50;
	background: #ccc;
	transition: all 250ms ease-out;
	transform: translateX(-100%);
}
.nav-container ul{
	margin: 60px auto 0;
	text-align: center;
	padding: 0 20px;
}
.nav-container li{
	border-bottom: #fff 1px solid;
}
.nav-container a {
	text-decoration: none;
	display: block;
	color: 000;
	line-height: 50px;
}
.checkbox:checked ~ .nav-container {
  transform: translateX(0%);
}


@media screen and (max-width: 750px){
	.details{display: none;}
	.sp_language{        
		display: inline-block;
        min-width: 50px;
        max-width: 100px;
        width: 18%;
        aspect-ratio: 1 / 1;
        position: absolute;
        z-index: 100000;
	}
}