@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@font-face {
font-family: 'Alice in Wonderland';
src: url('font/Alice_in_Wonderland_3.eot');
src: url('font/Alice_in_Wonderland_3.eot?#iefix') format('embedded-opentype'),
url('font/Alice_in_Wonderland_3.woff') format('woff'),
url('font/Alice_in_Wonderland_3.ttf') format('truetype');
}

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:18px;
text-align:left;
color:#191919;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:3vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.gothic{ font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.mincho{ font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', serif;}
.alice{ font-family: 'Alice in Wonderland', sans-serif;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#C81400;}
.blue{ color:#326496;}
.bg_y{
background: -moz-linear-gradient(top, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
background: -webkit-linear-gradient(top, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00faf078', endColorstr='#00faf078',GradientType=0 );
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
#header #menu{ position: fixed; left: 0; right: 0; top: 0; width: 100%; background: #C81400; color: #fff; z-index: 999;}
#header #menu ul{ display: flex; align-items: center; justify-content: center; margin: 0 auto;}
#header #menu ul li{ margin: 1em;}
#header #menu ul li a{ display: inline-block; padding: 0; font-size: 24px; letter-spacing: 0.1em; line-height: 1em; position: relative; font-family: 'Alice in Wonderland', sans-serif;}
#header #menu ul li a:after{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: -2px; margin: auto; transition: 0.3s;}
#header #menu ul li a:hover:after{ width: 100%;}
@media screen and (max-width:767px){
body{ padding-top: 0 !important;}
#header #menu{ display: none;}
#header #menu{ width: 100%; height: 100%;}
#header #menu ul{ display: flex; flex-direction: column; width: 100%; height: 100%;}
#header #menu ul li a{ font-size:7.5vw;}
}
@media print, screen and (min-width:768px){
#header #menu{ display: block !important; opacity: 1.0 !important;}
#smp_nav_btn{ display: none !important;}
}
@media screen and (max-width:767px){
#smp_nav_btn{ width:10vw; height:10vw; border: 2px solid #fff; border-top: none; border-right: none; background: #c81400; display:flex; justify-content:center; align-items:center; position:fixed; right:0; top:0; z-index:9999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:2px; width:7.5vw; background:#fff; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transition:0.3s;}
#smp_nav_btn span:before{ content: ""; display:block; height:2px; width:7.5vw; background:#fff; position:absolute; bottom:2.25vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:2px; width:7.5vw; background:#fff; position:absolute; top:2.25vw; transition:0.3s;}
#header.active #smp_nav_btn{ border-color:#fff;}
#header.active #smp_nav_btn span{ background:rgba(255,255,255,0);}
#header.active #smp_nav_btn span:before{ bottom:0; transform: rotate(45deg); background:#fff;}
#header.active #smp_nav_btn span:after{ top:0; transform: rotate(-45deg); background:#fff;}
}

/*キャッチ*/
#catch{ background: #C81400; text-align: center; padding: 40px 0;}
@media screen and (max-width:767px){
#catch{ padding: 0 5%;}
}

/*フッター*/
#footer p.copyright{ text-align: center; background: #c81400; color: #fff; padding: 0.5em;}
/*プロフ*/
#profile{ background: url("../images/bg04.jpg") fixed; padding: 40px;}
#profile dl{ display: flex; align-items: center; justify-content: center; margin: 0 auto;}
#profile dl dt{ width: 240px; margin-right: 40px;}
#profile dl dd{ text-align: center;}
#profile dl dd .txt{ background: #fff; padding: 20px; border-radius: 20px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#profile dl dd .txt a{ display: flex; align-items: center; justify-content: center; margin: 10px auto 0; color: #1DA1F2; font-size: 24px; font-weight: bold; line-height: 1em;}
#profile dl dd .txt a i{ margin-right: 0.25em; margin-top: 0.25em;}
#profile dl dd .txt a span{ text-decoration: underline;}
#profile dl dd .txt a:hover span{ text-decoration: none;}
@media screen and (max-width:767px){
#profile{ padding:5%;}
#profile dl{ display:block;}
#profile dl dt{ width:100%; margin:0 auto 2.5%; text-align:center;}
#profile dl dt img{ width:33.33%;}
#profile dl dd h2{ font-size:10vw;}
#profile dl dd .txt{ padding:5% 2.5%; border-radius:2.5vw;}
#profile dl dd .txt a{ margin:2.5% auto 0; font-size:5vw;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; background:#fff; margin:0 auto; padding: 80px 0;}
.maincontent{ padding:0; margin:0 auto; width:1080px;}
@media screen and (max-width:767px){
section{ padding:10% 0;}
.maincontent{ padding:0; margin:0 auto; width:95%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em; font-family: 'Alice in Wonderland', sans-serif;}
h2{ text-align: center; font-size: 96px;}
@media screen and (max-width:767px){
h2{ font-size:15vw;}
}


/*about*/
#about{ background: url("../images/bg01.jpg") center center fixed;}
#about .maincontent{ background: #fff; padding-bottom: 40px; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
#about h2{ background: #C81400; color: #fff; padding: 0.25em; font-size: 60px; position: relative;}
#about h2:before{ content: ""; width: 100px; height: 50px; background: url("../images/tit_ico1.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; top: 0;}
#about h2:after{ content: ""; width: 100px; height: 50px; background: url("../images/tit_ico2.png") center center no-repeat; background-size: 100%; position: absolute; right: 0; bottom: 0;}
#about p.lead{ text-align: center; margin: 40px auto; font-size: 24px;}
#about h3{ margin: 40px 40px 20px; text-align: center; position: relative; font-size: 72px; line-height: 1em; color: #C81400; z-index: 3;}
#about h3:after{ content: ""; width: 100%; height: 2px; background: #C81400; position: absolute; left: 0; right: 0; top: 50%; z-index: -1;}
#about h3 strong{ display: inline-block; background: #fff; padding: 0 0.5em;}
#about dl{ display: flex; align-items: center; justify-content: center; margin: 0 auto;}
#about dl dt{ width: 240px; margin-right: 40px;}
#about dl dt figure:first-child{ margin-bottom: 20px;}
#about dl dd{ font-size: 21px;}
#about dl dd p{ margin: 0 auto;}
#about dl dd ul{ margin: 0.5em auto;}
#about dl dd ul li{ padding: 0.25em 0 0.25em 1.5em; border-bottom: 2px dotted #191919; position: relative;}
#about dl dd ul li:first-child{ border-top: 2px dotted #191919;}
#about dl dd ul li i{ position: absolute; left: 0.25em; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
#about .maincontent{ padding-bottom:5%;}
#about h2{ font-size:7.5vw;}
#about h2:before{ width:10vw; height:5vw;}
#about h2:after{ width:10vw; height:5vw;}
#about p.lead{ margin:5%; font-size:3.5vw; text-align: left;}
#about h3{ margin:5% 5% 2.5%; font-size:7.5vw;}
#about dl{ display:block;}
#about dl dt{ width:95%; display:flex; margin:0 auto 5%;}
#about dl dt figure{ width: 50%; padding: 0 2.5%;}
#about dl dt figure:first-child{ margin-bottom: 0;}
#about dl dd{ margin: 5%; font-size: 3vw;}
}


/*list*/
#list{ background: url("../images/bg02.jpg") center center fixed; background-size: cover;}
#list h2{ margin-bottom: 20px;}
#list .maincontent{ background: rgba(255,255,255,0.8); padding: 20px; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#list .maincontent ul{ display: flex; flex-wrap: wrap;}
#list .maincontent ul li{ width: calc(25% - 20px); margin: 10px;}
#list .maincontent ul li p{ text-align: center; font-size: 15px; font-weight: bold; line-height: 1.25em; margin-top: 0.5em;}
#list .maincontent ul li dl{ position: relative; transition: 0.3s;}
#list .maincontent ul li dl dd{ opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; transition: 0.3s;}
#list .maincontent ul li dl dd p{ font-size: 15px; line-height: 1.5em; word-break: normal;}
#list .maincontent ul li dl dd p.price{ border-bottom: 1px solid #fff; border-top: 1px solid #fff; width: 100%; text-align: center;}
#list .maincontent ul li dl dd a{ display: block; width: 100%; text-align: center; background: #fff; color: #191919; border-radius: 1em; padding: 0 0 0.25em; transition: 0.3s;}
@media print, screen and (min-width:768px){
#list .maincontent ul li dl:hover{ transform: scale(1.25); z-index: 99;}
#list .maincontent ul li dl:hover dd{ opacity: 1.0;}
#list .maincontent ul li dl dd a:hover{ background: #000; color: #fff;}
}
@media screen and (max-width:767px){
#list h2{ margin-bottom: 5%;}
#list .maincontent{ padding:0 2.5%;}
#list .maincontent ul{ display:flex; flex-wrap:wrap;}
#list .maincontent ul li{ width:100%; margin:0 auto; padding: 5% 0 3.75%; border-bottom: 1px solid #191919;}
#list .maincontent ul li:last-child{ border-bottom:none;}
#list .maincontent ul li p{ font-size: 3.5vw;}
#list .maincontent ul li dl{ display:flex;}
#list .maincontent ul li:nth-child(2n) dl{ flex-direction:row-reverse;}
#list .maincontent ul li dl dt{ display:flex; align-items:center; justify-content:center; width:50%;}
#list .maincontent ul li dl dd{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:50%; height:auto; background:#000; position:relative; opacity:1.0;}
#list .maincontent ul li dl dd p{ font-size:2.5vw;}
}


/*roadmap*/
#roadmap{ background: url("../images/bg03.jpg"); color: #fff;}
#roadmap .roadmap_box{ display: flex; align-items: center; margin: 40px auto;}
#roadmap .roadmap_box:nth-child(2n+1){ flex-direction: row-reverse;}
#roadmap .roadmap_box:nth-child(2n+1) h3{ margin: 0 0 0 20px;}
#roadmap .roadmap_box:last-child{ margin-bottom: 0;}
#roadmap .roadmap_box h3{ width: 220px; text-align: center; padding: 0.5em 0.125em 0.25em; font-size: 18px; border: 1px solid #fff; margin-right: 20px;}
#roadmap .roadmap_box h3 strong{ display: block; font-size: 36px; line-height: 1em;}
#roadmap .roadmap_box dl{ display: flex; align-items: center; justify-content: center; width: calc(100% - 240px);}
#roadmap .roadmap_box dl dt{ width: 180px; margin-right: 20px;}
#roadmap .roadmap_box dl dt img{ box-shadow:rgba(0, 0, 0, 1.0) 0 0 5px 2px;}
#roadmap .roadmap_box dl dd{ width: calc(100% - 200px); background: rgba(0,0,0,0.9); padding: 20px; border-radius: 20px; font-size: 18px; box-shadow:rgba(0, 0, 0, 1.0) 0 0 5px 2px;}
#roadmap .roadmap_box dl dd ul{ display: flex; flex-wrap: wrap;}
#roadmap .roadmap_box dl dd ul li{ background: #fff; color: #000; padding: 0.25em 1.5em; margin: 0 1em 0 0; border-radius: 2em;}
@media screen and (max-width:767px){
#roadmap .roadmap_box{ display:block; margin:5% auto;}
#roadmap .roadmap_box:nth-child(2n+1) h3{ margin:0 auto 2.5%;}
#roadmap .roadmap_box h3{ width:100%; font-size:5vw; margin:0 auto 2.5%;}
#roadmap .roadmap_box h3 strong{ font-size:10vw;}
#roadmap .roadmap_box dl{ display:block; width:100%;}
#roadmap .roadmap_box dl dt{ width:100%; margin:5% auto; text-align:center;}
#roadmap .roadmap_box dl dt img{ width:50%;}
#roadmap .roadmap_box dl dd{ width:100%; padding:5%; border-radius:2.5vw; font-size:3.5vw;}
#roadmap .roadmap_box dl dd ul{ display: flex;}
#roadmap .roadmap_box dl dd ul li{ font-size:3vw; padding: 0.25em 1.25em; margin: 1.25vw; text-align: center;}
}


/*question*/
#question{ background: url("../images/bg01.jpg");}
#question h2{ color: #000;}
#question_list dl{ margin: 40px auto;}
#question_list dl:last-child{ margin-bottom: 0;}
#question_list dl dt{ background: #C81400; color: #fff; padding: 0.5em 3em 0.5em 2em; font-size: 21px; font-weight: bold; line-height: 1.25em; position: relative; cursor: pointer;}
#question_list dl dt:before{ content: "Q."; position: absolute; left: 0.5em; top: 50%; transform: translateY(-50%);}
#question_list dl dt i{ position: absolute; right: 1em; top: 50%; transform: translateY(-50%); transition: 0.3s;}
#question_list dl dt.active i{ transform: translateY(-50%) rotateX(180deg);}
#question_list dl dd{ background: #fff; padding: 20px; display: none;}
@media screen and (max-width:767px){
#question_list dl{ margin:5% auto;}
#question_list dl dt{ font-size:3.5vw;}
#question_list dl dd{ padding:2.5%;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}