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

:root{
--clr-gold:#cf9600;
--clr-yel:#f9f27f;
}

/*=============================================================
	design
=============================================================*/
#wrapper{ width: 100%; margin: 0px auto; overflow: hidden;}
.spbr{ display: none;}

/* hero
-------------------------------------------------------------*/
#hero{ width: 100%; height: auto; background: url("../../images/hero_all_bg.webp") no-repeat center top , #000; background-size: 100%; padding: 4.0rem 0 8.0rem; position: relative;}
#hero:after{ content: ""; width: 100%; height: 100%; background: url("../../images/hero_bg_right_top.webp") no-repeat right top; background-size: 100%; position: absolute ;top: 0; right: 0; z-index: 1;}
#hero:before{ content: ""; width: 100%; height: 100%; background: url("../../images/hero_bg_pc.webp") no-repeat center top; background-size: 100%; position: absolute; bottom: -10%; left: 0; z-index: 2; opacity: 1.0;}
#hero section{ width: 90%; margin: 0px auto; max-width: 1000px; position: relative; z-index: 100;}
#hero section h1{ width: 120%; position: relative; left: -10%;}
#hero section h1 img{ width: 100%; height: auto;}
#hero section h2{ width: 80%; margin: 2.4rem auto 0;}
#hero section h2 img{ width: 100%; height: auto;}

@media screen and (min-width:768px) and (max-width:1080px) and (orientation: landscape) {
#hero section h1{ width: 100%; position: relative; left: 0;}
#about section dl.period{ width: 72% !important;}
}
#terms section article .inner:focus,
#faq .scrool:focus { outline: none;}

/* terms
-------------------------------------------------------------*/
#terms{ width: 100%; padding: 8.0rem 0; background: url("../../images/bg_terms.webp") no-repeat; background-size: cover;}
#terms section{ width: 90%; margin: 0px auto; max-width: 800px;}
#terms section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center;}
#terms section article{ background: #FFF; padding: 1.0em; margin-top: 1.0em; min-height: 0;}
#terms section article .inner{ height: 400px; overflow-y: auto; padding: 1.0em;}
#terms section article .inner h3{ margin-top: 2.0em; color: #333; font-weight: 600;}
#terms section article .inner p{ margin-top: 0.5em; color: #333;}
#terms section article .inner p:first-child{ margin-top: 0;}
#terms section article .inner ul{ padding-left: 1.5em; margin-top: 0.5em;}
#terms section article .inner ul li{ list-style-type: disc; list-style-position: outside; color: #333;}

#entryForm{ margin-top: 2.4rem;}
#entryForm p{ text-align: center; font-size: 2.4rem;}
#entryForm p input{ width: 2.4rem; height: 2.4rem; display: inline-block; margin-right: 0.5em; position: relative; top: 0.2em;}
#entryForm .entry{ margin-top: 4.0rem; text-align: center;}

#submitBtn {border:none;background:none;padding:0;cursor:pointer;display:inline-block;}
#submitBtn img {display:block;width:480px;height:auto;transition:0.3s;}
#submitBtn.inactive img {opacity:0.5;filter:grayscale(80%);cursor:not-allowed;}
#submitBtn.active img {opacity:1;cursor:pointer;}

/* about
-------------------------------------------------------------*/
#about{ width: 100%; padding: 8.0rem 0 16.0rem; position: relative;}
#about section{ width: 90%; margin: 0px auto; max-width: 1000px; position: relative;}
#about section h2{ width: 72%; position: relative; left: 14%;}
#about section h2 img{ width: 100%; height: auto;}
#about section h3{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; color: #111; margin-top: 1.0em;}
#about section dl.period{ width: 64%; margin: 1.0em auto 0; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: var(--clr-gold); border-radius: 100px; padding: 1.0em 2.0em;}
#about section dl.period dt{ font-size: 2.4rem; width: 3.0em; color: #111;}
#about section dl.period dd{ font-size: 2.4rem; color: #111; /*width: calc(100% - 3.0em);*/}
#about section dl.period strong{ font-size: 3.2rem; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal;}
#about section .information{ margin: 2.0em auto 0; width: 72%; background: #898989; border: solid 1px #FFF; border-radius: 8px; padding: 2.0em;}
#about section .information p{ text-align: center;}
#about section .intro{ margin-top: 4.0rem; position: relative;}
#about section .intro:before{ content: ""; width: calc(100% - 28%); height: 1px; background: rgba(17,17,17,0.64); position: absolute; top: 0; left: 28%; z-index: 9;}
#about section .intro dl{ padding-left: 35%; padding-top: 2.0em;}
#about section .intro dl dt{ font-weight: 600; font-size: 2.0rem; color: #111;}
#about section .intro dl dd{ color: #111;}
#about section .intro figure{ position: absolute; top: -1.0em; right: 66%; z-index: 10;}
#about section h4{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; color: #111; margin-top: 2.0em;}
#about section ul{ width: 64%; margin: 2.0em auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
#about section ul li a{ display: block; opacity: 1.0;}
#about section ul li a:hover{ opacity: 0.72;}
#about section p.sup{ text-align: center; margin-top: 2.0em;color: #111;}
#about section p.sup a{ color: #111; text-decoration: underline;}
#about section p.sup a:hover{ color: rgba(17,17,17,0.64); text-decoration: none;}

/* faq
-------------------------------------------------------------*/
#faq{ padding: 0 0 16.0rem 0;}
#faq section{ width: 90%; max-width: 1000px; margin: 0px auto; border: solid 1px #111; border-radius: 8px; padding: 2.0em;}
#faq section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center; color: #111;}
#faq section .scrool{ height: 500px; overflow-y: auto; margin-top: 1.0em;}
#faq section .scrool dl{}
#faq section .scrool dl dt{ font-weight: 600; padding-left: 1.5em; color: #727171; position: relative;}
#faq section .scrool dl dt:before{ content: "Q."; font-family: Arial, Helvetica, "sans-serif"; font-weight: 600; position: absolute; top: 0; left: 0;}
#faq section .scrool dl dd{ padding-left: 1.5em; position: relative; color: #111; border-bottom: solid 1px rgba(17,17,17,0.8); padding-bottom: 1.0em; margin-bottom: 1.0em;}
#faq section .scrool dl dd:before{ content: "A."; font-family: Arial, Helvetica, "sans-serif"; font-weight: 600; position: absolute; top: 0; left: 0;}
#faq section .scrool dl dd:last-child{ padding-bottom: 0; border-bottom: none; margin-bottom: 0;}
#faq section .scrool dl dd a{ display: inline-block; color: #111; text-decoration: underline;}
#faq section .scrool dl dd a:hover{ color: rgba(17,17,17,0.64); text-decoration: none;}

/* footer
-------------------------------------------------------------*/
footer{ width: 100%; margin: 0px auto;}
footer section{ width: 100%; margin: 0px auto; text-align: center; background: var(--clr-gold); padding: 3.2rem 0;}
footer section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center;}
footer section h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; margin-top: 1.0em; text-align: center;}
footer section p{ text-align: center; margin-top: 0.5em;}
footer section p a{ display: inline-block; color: #FFF; text-decoration: underline;}
footer section p a:hover{ color: rgba(255,255,255,0.64); text-decoration: none;}
footer .copyright{ text-align: center; padding: 3.2rem 0; background: url("../../images/bg_terms.webp") no-repeat; background-size: cover;}

/* CTA
-------------------------------------------------------------*/
#cta{ background-image: linear-gradient(-35deg, #a17023, #e2c07c 15%, #ac7c20 30%, #fbeac8 50%, #ac7c20 70%, #e3bf79 85%, #ac7c20); padding: 1.8em 0; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 1000;}
#cta section{ width: 90%; max-width: 1200px; margin: 0px auto;}
#cta section figure{ width: 400px; margin: 0px auto; position: relative;}
#cta section figure:after{ content: ""; width: 284px; height: 110px; background: url("../../images/cta_after_pc.webp") no-repeat; background-size: contain; position: absolute; top: 50%; left: 110%; transform: translateY(-50%);}
#cta section figure:before{ content: ""; width: 298px; height: 107px; background: url("../../images/cta_before_pc.webp") no-repeat; background-size: contain; position: absolute; top: 50%; right: 110%; transform: translateY(-50%);}
#cta section figure img{ width: 100%; height: auto;}

/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: -apple-system,"Zen Kaku Gothic New", BlinkMacSystemFont, "Helvetica Neue", YuGothic, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #FFF;
	background: url("../../images/background.webp") repeat center top, #000;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(51,51,51,1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure{ margin: 0;}

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

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*----- lenis -----*/
html.lenis { height: auto;}
.lenis.lenis-smooth { scroll-behavior: auto;}
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain;}
.lenis.lenis-stopped { overflow: hidden;}