/* common */
h2{
width: 100%;
height: 0;
display: block;
padding-top: 56px;
background-size: auto 56px;
overflow: hidden;
}

/* header */
#header{
width: 100svw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 9000;
}

#header h1{
width: 140px;
height: 0;
display: block;
padding: 100px 0 0 0;
background: url(../img/logo.svg) no-repeat center top 10px;
background-size: auto 72px;
background-color: var(--base);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: 0 2px 4px 4px var(--shadow);
position: absolute;
top: -160px;
left: calc((100% - 1200px)/2 + 30px);
z-index: 9850;
opacity: 0;
overflow: hidden;
}

#header.under h1{
top: 0;
opacity: 1;
}

/* hero */
#hero{
height: 85svh;
min-height: 650px;
max-height: 710px;
display: block;
text-align: center;
}
#hero:before{
content: "";
width: 100%;
height: 100svh;
display: block;
background: url(../img/bg_hero.png?vvvvv01) no-repeat center top calc(50% - 60px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#hero:after{
content: "";
width: 200svw;
height: 200svh;
display: block;
background: radial-gradient(at 50% 50%, #db4e03 50%,transparent 75%);
position: absolute;
top: -95svh;
left: -95svw;
z-index: -1;
}
.mukai{
width: 608px;
height: 768px;
display: block;
background: url(../img/mukai.png) no-repeat center top;
background-size: 608px auto;
position: absolute;
top: 70px;
left: -100px;
}

.hero_date{
width: 100%;
height: 0;
display: block;
padding-top: 100%;
background: url(../img/hero_logo.png?vvvvv01) no-repeat center top 140px;
z-index: 1500;
overflow: hidden;
}

.hero_info{
width: 304px;
height: 456px;
display: block;
padding: 0 25px 0 25px;
background: url(../img/bg_tex.jpg) no-repeat center center;
background-color: var(--white);
border: 2px solid var(--white);
border-radius: 4px;
box-shadow: 0 4px 4px 4px var(--shadow);
position: absolute;
top: 154px;
right: 40px;
z-index: 1550;
}
.hero_catch{
display: flex;
flex-direction: column;
gap: 8px;
margin: 38px 0 0 0;
text-align: left;
}
.hero_catch p{
display: block;
line-height: 1;
}
.hero_catch p span{
display: inline-block;
padding: 7px 10px 9px 10px;
background-color: var(--red);
color: var(--white);
font-size: var(--font-l);
}
.hero_tit{
display: block;
margin: 35px 0 0 0;
font-size: var(--font-s);
}
.hero_list{
display: block;
margin: 10px 0 0 0;
}
.hero_list li{
display: block;
margin: 0 0 10px 0;
padding: 0 0 10px 1em;
border-bottom: 2px solid var(--light-gray);
line-height: 1.2;
text-align: left;
}
.hero_list li:first-child{
margin: 0 0 10px 0;
padding: 10px 0 10px 1em;
border-top: 2px solid var(--light-gray);
}
.hero_list li:before{
content: "・";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}
.hero_list li:first-child:before{
top: 10px;
}
.hero_list span{
display: block;
font-size: var(--font-xs);
}
.hero_link{
display: block;
margin: 15px 0 0 0;
}
.hero_link a{
display: inline-block;
color: var(--black);
font-size: var(--font-xs);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}

/* main */
main{
width: 100svw;
display: block;
}

/* message */
#message{
display: block;
padding: 60px 0 40px 0;
background-color: var(--white);
border-radius: 100px;
z-index: 3000;
}
.message_box{
width: 100%;
display: block;
padding: 0 10px 0 10px;
}
.message_box{
width: 100%;
display: block;
}
.message_txt{
display: block;
font-size: var(--font-l);
text-align: left;
}
.message_name{
display: block;
margin: 40px 0 0 0;
text-align: right;
}

/* guest */
#guest{
display: block;
margin: 100px 0 0 0;
}
#guest h2{
background: url(../img/tit_guest.svg) no-repeat center center;
}
#guest h2.tit_hokkinin{
margin-top: 100px;
background: url(../img/tit_hokkinin.svg) no-repeat center center;
}
.guest_box{
display: block;
margin: 60px 0 0 0;
}
.guest_box ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
.guest_box ul li{
width: calc((100% - 80px)/3);
display: block;
}
.guest_box ul li dl{
display: flex;
flex-direction: column;
gap: 20px;
}
.guest_box ul li dl dt{
width: 100%;
display: block;
}
.guest_box ul li dl dt img{
width: 100%;
height: auto;
border-radius: 10px;
}
.guest_box ul li dl dd{
display: block;
color: var(--white);
}
.guest_attention{
display: inline-block;
margin: 20px 0 0 0;
padding: 0 0 0 1.2em;
color: var(--white);
font-size: var(--font-xs);
text-align: center;
}
.guest_attention:before{
content: "※";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}

/* outline */
#outline{
display: block;
margin: 100px 0 0 0;
}
#outline h2{
background: url(../img/tit_outline.svg) no-repeat center center;
}
.outline_box{
display: block;
margin: 60px 80px 0 80px;
}
.outline_box ul{
display: block;
padding: 30px 0 0 0;
border-top: 1px solid var(--line-outline);
}
.outline_box ul li{
display: block;
margin: 0 0 30px 0;
padding: 0 5px 30px 5px;
border-bottom: 1px solid var(--line-outline);
}
.outline_box ul li dl{
display: flex;
justify-content: flex-start;
color: var(--white);
text-align: left;
}
.outline_box ul li dl dt{
width: 120px;
display: block;
}
.outline_box ul li dl dd{
width: calc(100% - 150px);
display: block;
font-weight: 700;
}
.btn_access{
display: inline-block;
margin: 0 0 0 15px;
padding: 0 15px 0 15px;
color: var(--white);
border: 1px solid var(--line-outline);
border-radius: 20px;
font-size: var(--font-xs);
}

/* apply */
#apply{
width: 100svw;
display: block;
margin: 100px 0 0 0;
padding: 100px 0 100px 0;
background-color: var(--white);
border-radius: 100px;
z-index: 7000;
}
#apply h2{
background: url(../img/tit_apply.svg) no-repeat center center;
}
.apply_box{
display: block;
margin: 60px 0 0 0;
}
.apply_box ul{
display: block;
padding: 30px 0 0 0;
border-top: 1px solid var(--gray);
}
.apply_box ul li{
display: block;
margin: 0 0 30px 0;
padding: 0 5px 30px 5px;
border-bottom: 1px solid var(--gray);
}
.apply_box ul li dl{
display: flex;
justify-content: flex-start;
text-align: left;
}
.apply_box ul li dl dt{
width: 120px;
display: block;
color: var(--base);
}
.apply_box ul li dl dd{
width: calc(100% - 150px);
display: block;
font-weight: 700;
}

.link_faq{
display: inline-block;
margin: 0 5px 0 5px;
color: var(--base);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}

.btn_apply{
display: block;
margin: 60px 0 0 0;
text-align: center;
}
.btn_apply a{
width: 640px;
display: block;
margin: 0 auto 0 auto;
background-color: var(--black);
color: var(--white);
border-radius: 20px;
font-size: var(--font-l);
line-height: 110px;
box-shadow: 0 4px 8px 8px var(--shadow);
}

.privacy_list{
display: block;
margin: 60px 0 0 0;
font-size: var(--font-xs);
text-align: left;
}
.privacy_list ol{
display: block;
}
.privacy_list ol li{
display: block;
margin: 5px 0 0 0;
padding: 0 0 0 1.2em;
}
.privacy_list ol li:before{
content: "";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}
.privacy_list a{
color: var(--black);
}
.privacy_list ol li:nth-child(1):before{
content: "①";
}
.privacy_list ol li:nth-child(2):before{
content: "②";
}
.privacy_list ol li:nth-child(3):before{
content: "③";
}
.privacy_list ol li:nth-child(4):before{
content: "④";
}
.privacy_list ol li:nth-child(5):before{
content: "⑤";
}
.privacy_list ol li:nth-child(6):before{
content: "⑥";
}
.privacy_list ol li:nth-child(7):before{
content: "⑦";
}

.apply_form{
display: block;
margin: 60px 0 0 0;
padding: 40px;
background-color: var(--bg-gray);
border-radius: 20px;
}
.apply_form h3{
display: block;
margin-bottom: 30px;
color: var(--red);
}

/* faq */
#faq{
display: block;
margin: 0 0 -100px 0;
padding: 200px 0 160px 0;
background-color: var(--beige);
top: -100px;
z-index: 5000;
}
#faq h2{
background: url(../img/tit_faq.svg) no-repeat center center;
}
#faq h4{
text-align: left;
margin: 60px 0 0 30px;
color: var(--base);
}
.faq_list{
display: block;
margin: 40px 0 0 0;
}
.faq_list li{
display: block;
margin: 30px 0 0 0;
padding: 40px 80px 40px 80px;
background-color: var(--white);
border-radius: 40px;
text-align: left;
}
.faq_list li dl{
display: block;
}
.faq_list li dl dt{
display: block;
padding: 0 30px 0 72px;
font-weight: 700;
line-height: 42px;
cursor: pointer;
}
.faq_list li dl dt{
background: url(../img/ico_open.png) no-repeat right top 6px;
background-size: 30px 30px;
}
.faq_list li dl dt.on{
background: url(../img/ico_close.png) no-repeat right top 6px;
background-size: 30px 30px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--line-faq);
}
.faq_list li dl dt:before{
content: "Q";
width: 42px;
height: 42px;
display: block;
padding: 7px 0 0 0;
background-color: var(--base);
color: var(--white);
border-radius: 4px;
font-size: var(--font-h4);
font-weight: 700;
line-height: 1;
text-align: center;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
.faq_list li dl dd{
display: none;
min-height: 73px;
margin: 0 0 0 0;
padding: 0 5px 0 72px;
}
.faq_list li dl dd:before{
content: "A";
width: 42px;
height: 42px;
display: block;
padding: 7px 0 0 0;
background-color: var(--black);
color: var(--white);
border-radius: 4px;
font-size: var(--font-h4);
font-weight: 700;
line-height: 1;
text-align: center;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}

/* map */
#map{
display: block;
margin: 0 0 0 0;
}
#map iframe {
vertical-align: bottom;
}

/* contact */
#contact{
display: block;
padding: 100px 0 100px 0;
}
#contact h2{
background: url(../img/tit_contact_w.svg) no-repeat center center;
}
#contact .txt{
display: block;
margin: 40px 0 0 0;
color: var(--white);
}
#contact .txt span{
display: inline-block;
margin: 0 0 0 0;
font-size: var(--font-xs);
}
.btn_contact{
display: block;
margin: 50px 0 0 0;
text-align: center;
}
.btn_contact a{
width: 640px;
display: block;
margin: 0 auto 0 auto;
padding: 0 30px 0 30px;
background: url(../img/ico_contact.png) no-repeat right 30px center;
background-size: 29px auto;
background-color: var(--btn-contact);
color: var(--white);
border-radius: 20px;
font-size: var(--font-l);
line-height: 110px;
box-shadow: 0 4px 8px 8px var(--shadow);
box-sizing: border-box;
}

#contact_page{
display: block;
padding: 150px 0 0 0;
}
#contact_page h2{
background: url(../img/tit_contact_w.svg) no-repeat center center;
}
.contact_box{
display: block;
margin: 60px 0 0 0;
}

/* coop */
#coop{
display: block;
padding: 100px 0 100px 0;
background-color: var(--white);
border-radius: 100px;
}
#coop dl{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
#coop dl dt{
display: inline-block;
letter-spacing: 2px;
font-weight: 700;
}
#coop dl dd{
display: inline-block;
}
#coop dl dd a{
width: 300px;
height: 0;
display: block;
padding-top: 60px;
background: url(../img/logo_kokopelli.svg) no-repeat center center;
background-size: contain;
overflow: hidden;
}

#coop dl.sponsorship{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin: 40px 0 0 0;
}
#coop dl.sponsorship dt{
display: inline-block;
letter-spacing: 2px;
font-weight: 700;
}
#coop dl.sponsorship dd{
display: inline-block;
font-size: 125%;
}

#coop ul{
display: inline-block;
margin: 0 auto 0 auto;
}
#coop ul li{
display: flex;
text-align: left;
}



/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */


/* common */
h2{
padding-top: 41px;
background-size: auto 41px;
}

/* header */
#header{
}
#header h1{
}
#header.under h1{
width: 100%;
padding: 48px 0 0 0;
background: url(../img/logo_sp.svg) no-repeat center center;
background-size: contain;
background-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
top: 7px;
left: -10px;
opacity: 1;
}

/* hero */
#hero{
height: 82svh;
min-height: 500px;
display: block;
text-align: center;
}
#hero .wrapper{
height: 82svh;
z-index: 1600;
}
#hero:before{
height: 100svh;
background: url(../img/bg_hero.png?vvvvv01) no-repeat center center;
background-size: cover;
}
#hero:after{
content: "";
width: 200svw;
height: 200svh;
display: block;
background: radial-gradient(at 50% 50%, #db4e03 50%,transparent 75%);
position: absolute;
top: -95svh;
left: -95svw;
z-index: -1;
}
.mukai{
width: 450px;
height: 768px;
display: block;
background: url(../img/mukai.png) no-repeat center top;
background-size: 400px auto;
position: absolute;
top: 30px;
left: calc((100svw - 450px)/2 - 20px);
}

.hero_date{
width: 100%;
height: 0;
display: block;
padding-top: 82svh;
background: url(../img/hero_logo.png?vvvvv01) no-repeat center bottom 10px;
background-size: 252px auto;
position: absolute;
top: 0;
left: 0;
z-index: 8000;
}
.hero_info{
width: 100%;
height: auto;
padding: 0;
background: none;
border: none;
box-shadow: none;
position: absolute;
top:0;
right: 0;
z-index: 8050;
}
.hero_catch{
display: none;
flex-direction: column;
gap: 4px;
margin: 0 0 0 0;
text-align: left;
}
.hero_catch p{
display: block;
line-height: 1;
}
.hero_catch p span{
display: inline-block;
padding: 7px 10px 9px 10px;
background-color: var(--red);
color: var(--white);
font-size: var(--font-l);
}
.hero_tit{
display: none;
}
.hero_list{
display: none;
}
.hero_link{
width: calc(88svw - 64px);
position: absolute;
top: 0;
left: 6svw;
z-index: 8500;
}
.hero_link a{
width: 100%;
display: block;
background-color: var(--red);
color: var(--white);
border-radius: 20px;
font-size: var(--font-xs);
line-height: 40px;
text-decoration: none;
box-shadow: 0 2px 3px 3px var(--shadow);
}

/* main */
main{
}

/* message */
#message{
padding: 60px 0 40px 0;
border-radius: 80px;
}
.message_box{
padding: 0 10px 0 10px;
}
.message_box{
width: 100%;
display: block;
}
.message_txt{
font-size: var(--font-s-sp);
}
.message_name{
margin: 40px 0 0 0;
font-size: var(--font-s-sp);
}

/* guest */
#guest{
margin: 80px 0 0 0;
}
#guest h2{
}
.guest_box{
margin: 60px 0 0 0;
}
.guest_box ul{
gap: 30px;
}
.guest_box ul li{
width: calc((100% - 30px)/2);
}
.guest_box ul li.one{
width: calc((100% - 30px)/2 + 15%);
}
.guest_box ul li dl{
gap: 15px;
}
.guest_box ul li dl dt{
}
.guest_box ul li dl dt img{
border-radius: 10px;
}
.guest_box ul li dl dd{
color: var(--white);
}
.guest_attention{
font-size: var(--font-xs-sp);
text-align: left;
}
.guest_attention:before{
}

/* outline */
#outline{
margin: 80px 0 0 0;
}
#outline h2{
}
.outline_box{
margin: 60px 0 0 0;
}
.outline_box ul{
padding: 30px 0 0 0;
border-top: 1px solid var(--line-outline);
}
.outline_box ul li{
margin: 0 0 30px 0;
padding: 0 1px 30px 1px;
border-bottom: 1px solid var(--line-outline);
}
.outline_box ul li dl{
flex-direction: column;
}
.outline_box ul li dl dt{
width: 100%;
}
.outline_box ul li dl dd{
width: 100%;
margin-top: 10px;
}
.btn_access{
margin: 0 0 0 10px;
padding: 0 10px 0 10px;
border: 1px solid var(--line-outline);
font-size: var(--font-xs-sp);
}

/* apply */
#apply{
margin: 80px 0 0 0;
padding: 80px 0 90px 0;
border-radius: 80px;
}
#apply h2{
}
.apply_box{
margin: 60px 0 0 0;
}
.apply_box ul{
padding: 30px 0 0 0;
border-top: 1px solid var(--gray);
}
.apply_box ul li{
margin: 0 0 30px 0;
padding: 0 1px 30px 1px;
border-bottom: 1px solid var(--gray);
}
.apply_box ul li dl{
flex-direction: column;
}
.apply_box ul li dl dt{
width: 100%;
}
.apply_box ul li dl dd{
width: 100%;
margin-top: 10px;
}

.link_faq{
margin: 0 3px 0 3px;
}

.btn_apply{
margin: 60px 0 0 0;
}
.btn_apply a{
width: 100%;
max-width: 420px;
margin: 0 auto 0 auto;
border-radius: 15px;
font-size: var(--font-l-sp);
line-height: 110px;
box-shadow: 0 2px 5px 5px var(--shadow);
}

.privacy_list{
margin: 30px 0 0 0;
font-size: var(--font-xs-sp);
}
.privacy_list ol{
}
.privacy_list ol li{
display: block;
margin: 5px 0 0 0;
padding: 0 0 0 1.2em;
}
.privacy_list ol li:before{
content: "";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}
.privacy_list a{
}

.apply_form{
margin: 40px 0 0 0;
padding: 10px;
border: 10px solid var(--bg-gray);
border-radius: 10px;
background-color: var(--white);
}
.apply_form h3{
margin-top: 20px;
margin-bottom: 0;
}


/* faq */
#faq{
margin: 0 0 -80px 0;
padding: 160px 0 120px 0;
top: -80px;
}
#faq h2{
padding-top: 45px;
background-size: auto 45px;
}
#faq h4{
margin: 60px 0 0 10px;
}
.faq_list{
margin: 40px 0 0 0;
}
.faq_list li{
margin: 30px 0 0 0;
padding: 30px 12px 30px 20px;
border-radius: 20px;
}
.faq_list li dl{
}
.faq_list li dl dt{
padding: 0 24px 0 42px;
font-weight: 700;
line-height: 1.6;
cursor: pointer;
}
.faq_list li dl dt{
background: url(../img/ico_open.png) no-repeat right  top 6px;
background-size: 16px 16px;
}
.faq_list li dl dt.on{
background: url(../img/ico_close.png) no-repeat right top 6px;
background-size: 16px 16px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--line-faq);
}
.faq_list li dl dt:before{
width: 30px;
height: 30px;
padding: 4px 0 0 0;
border-radius: 4px;
font-size: var(--font-h4-sp);
}
.faq_list li dl dd{
display: none;
min-height: 63px;
margin: 0 0 0 0;
padding: 0 24px 0 42px;
}
.faq_list li dl dd:before{
width: 30px;
height: 30px;
padding: 4px 0 0 0;
border-radius: 4px;
font-size: var(--font-h4-sp);
}

/* map */
#map{
}
#map iframe{
height: 400px;
}

/* contact */
#contact{
padding: 80px 0 80px 0;
}
#contact .txt{
margin: 40px 0 0 0;
text-align: left;
}
#contact .txt span{
display: block;
margin: 0 0 0 0;
font-size: var(--font-xs-sp);
}
.btn_contact{
margin: 50px 0 0 0;
}
.btn_contact a{
width: 100%;
max-width: 420px;
margin: 0 auto 0 auto;
padding: 0 20px 0 20px;
background: url(../img/ico_contact.png) no-repeat right 20px center;
background-size: 20px auto;
background-color: var(--btn-contact);
border-radius: 15px;
font-size: var(--font-base-sp);
line-height: 110px;
box-shadow: 0 2px 5px 5px var(--shadow);
}

#contact_page{
padding: 120px 0 0 0;
}
#contact_page h2{
}
.contact_box{
margin: 40px 0 0 0;
}

/* coop */
#coop{
padding: 60px 0 80px 0;
border-radius: 80px;
}
#coop dl{
flex-direction: column;
gap: 30px;
}
#coop dl dt{
display: block;
letter-spacing: 2px;
}
#coop dl dd{
}
#coop dl dd a{
width: 300px;
height: 0;
display: block;
padding-top: 50px;
background: url(../img/logo_kokopelli.svg) no-repeat center center;
background-size: contain;
overflow: hidden;
}

#coop dl.sponsorship{
flex-direction: column;
gap: 20px;
}
#coop dl.sponsorship dt{
display: block;
letter-spacing: 2px;
}
#coop dl.sponsorship dd{
}

#coop ul{
display: block;
margin: 0 auto 0 auto;
}
#coop ul li{
display: block;
text-align: center;
}

/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */