@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/* 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: YakuHanJP, "M PLUS 1", sans-serif;
font-size:20px;
font-weight: 500;
font-feature-settings: "palt";
letter-spacing: 0.1em;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#fff;
min-width:1080px;
background: url("../images/bg_pc.webp") center center;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px ;background: url("../images/bg_smp.webp") center center fixed;}
}

/*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;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
figure.img img{ padding: 1.25vw;}
}

/*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;}

.white{ color:#fff;}
.black{ color:#191919;}

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

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



/*ヘッダー*/
header{ padding: 0; margin: 0;}
@media screen and (max-width:767px){
}

/*フッター*/
footer{ background: #e8b91f; color: #013f58; padding-top: 40px;}
footer .message{ margin: 0 auto 40px; text-align: center; position: relative;}
footer .message p{ font-size: 1.6rem; line-height: 1.5em;}
footer ul.sns{ display: flex; align-items: center; justify-content: center; padding: 0;}
footer ul.sns li{ margin: 0 20px;}
footer ul.sns li i{ font-size: 2.4rem;}
footer ul.sns li a{ display: inline-block; transition: 0.3s;}
footer ul.sns li a:hover{ transform: scale(1.1);}
footer ul.foot_link{ padding: 0; margin: 40px auto; display: flex; align-items: center; justify-content: center;}
footer ul.foot_link li{ font-size: 0.8rem; line-height: 1em;}
footer ul.foot_link li:after{ content: "|"; margin: 0 1em;}
footer ul.foot_link li:first-child:before{ content: "|"; margin: 0 1em;}
footer ul.foot_link li a:hover{ text-decoration: underline;}
footer p.copyright{ margin-top: 40px; font-size: 0.6rem; padding: 1em; text-align: center; background: #013f58; color: #fff;}
@media screen and (max-width:768px){
footer{ padding-top: 7.5%;}
footer .message{ margin: 0 auto 7.5%;}
footer .message p{ font-size: 1.4rem;}
footer ul.sns li{ margin: 0 2.5%;}
footer ul.sns li i{ font-size: 2rem;}
footer ul.foot_link{ margin: 7.5% auto; flex-wrap: wrap;}
footer ul.foot_link li{ width: calc(50% - 1em); margin: 0.5em; font-size: 0.8rem; line-height: 1.5em; text-align: center;}
footer ul.foot_link li:after{ display: none;}
footer ul.foot_link li:first-child:before{ display: none;}
footer p.copyright{ margin-top: 0;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto; padding: 120px 0;}
section.bg_blue{ background: url("../images/black-felt.png") #013f58;}
.maincontent{ padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
section{ padding: 15% 0;}
.maincontent{ padding:0; margin:0 auto; width:88.75%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}

/*border*/
hr.border{ width: calc(100% + 160px); height: 20px; margin: 80px 0 80px -80px; border: none; background: url("../images/border.png") center center no-repeat; background-size: 100% auto;}
@media screen and (max-width:767px){
hr.border{ width: calc(100% + 7.5vw); height: 5vw; margin: 15% 0 10% -3.75vw;}
}



/*lead*/
#lead .maincontent{ position: relative;}
#lead .bg_ico01_1{ width: 480px; position: absolute; right: calc(-480px - 80px); top: 0; transform: rotateY(180deg);}
#lead .bg_ico01_2{ width: 480px; position: absolute; left: calc(-480px - 80px); top: 50%; transform: translateY(-50%);}
#lead .bg_ico01_3{ width: 480px; position: absolute; right: calc(-480px - 80px); bottom: 0; transform: rotateY(180deg);}

#lead .lead p{ text-align: center; font-size: 1.6rem; font-weight: 600;}
#lead .lead h3{ text-align: center; font-size: 3rem; font-weight: 700; margin: 40px auto;}
#lead .lead h3 strong{ padding: 0 0.25em 0.125em; display: inline-block; background: #f6b735; color: #013f58;}
#lead .lead h4{ text-align: center; font-size: 2rem; font-weight: 700; margin: 30px auto;}
#lead .lead h4 strong{ display: inline-block; position: relative; z-index: 1;}
#lead .lead h4 strong:after{ content: ""; width: 100%; height: 4px; background: rgba(255,255,255,1.0); position: absolute; left: 0; right: 0; bottom: -8px; z-index: -1;}

#lead .about h2{ font-size: 3rem; padding-bottom: 0.25em; text-align: center; border-bottom: 2px solid #fff; margin-bottom: 40px;}
#lead .about dl{ display: flex; justify-content: space-between;}
#lead .about dl dt{ width: 480px;}
#lead .about dl dt p{ font-size: 1.2rem; text-align: justify;}
#lead .about dl dt p.txt_link a{ text-decoration: underline;}
#lead .about dl dt p.txt_link a:hover{ text-decoration: none;}
#lead .about dl dt p.txt_link a i{ margin-right: 0.5em;}
#lead .about dl dd ul li{ display: flex; align-items: center; margin-bottom: 16px;}
#lead .about dl dd ul li:last-child{ margin-bottom: 0;}
#lead .about dl dd ul li span{ width: 60px; flex-shrink: 0;}
#lead .about dl dd ul li span img{ border-radius: 50%;}
#lead .about dl dd ul li strong{ margin-left: 16px; font-size: 1.4rem;}
@media screen and (max-width:767px){
#lead .bg_ico01_1,
#lead .bg_ico01_2,
#lead .bg_ico01_3{ display: none;}

#lead .lead p{ text-align: justify; font-size: 1rem;}
#lead .lead h3{ text-align: center; width: 100%; font-size: 1.6rem; margin: 7.5% auto;}
#lead .lead h3 strong{ width: 100%; padding: 0.25em 0.75em 0.33em;}
#lead .lead h3 span{ display: block; text-align: left;}
#lead .lead h3 span:last-child{ text-align: right;}
#lead .lead h4{ text-align: justify; font-size: 1.2rem; margin: 5% auto;}
#lead .lead h4 strong:after{ height: 0.125em; bottom: -0.25em;}

#lead .about h2{ font-size: 1.8rem; margin-bottom: 5%;}
#lead .about dl{ display: block;}
#lead .about dl dt{ width: 100%;}
#lead .about dl dt p{ font-size: 1rem;}
#lead .about dl dd{ margin-top: 10%;}
#lead .about dl dd ul li{ margin-bottom: 3.75vw;}
#lead .about dl dd ul li span{ width: 10vw;}
#lead .about dl dd ul li strong{ margin-left: 3.75vw; font-size: 1.2rem;}
}



/*camp*/
#camp h2{ text-align: center; margin: 0 40px 40px; background: #e8b91f; color: #013f58; font-size: 2.4rem; padding: 0.5em 0.5em 0.66em; position: relative; z-index: 1;}
#camp h2:after{ content: ""; width: calc(100% - 16px); height: calc(100% - 16px); border: 2px solid #013f58; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}

#camp .maincontent{ position: relative;}
#camp .maincontent .bg_ico02_1{ width: 260px; position: absolute; left: calc(-260px - 40px); top: 40px;}
#camp .maincontent .bg_ico02_2{ width: 260px; position: absolute; right: calc(-260px - 40px); bottom: 40px;}

#camp p.txt{ text-align: center; font-size: 1.6rem; line-height: 2em;}
#camp p.txt strong{ display: inline-block; background: #fff; color: #013f58; line-height: 1em; padding: 0.25em 0.5em 0.33em; margin: 0.25em;}
#camp p.limited{ font-size: 1rem; text-align: center;}
#camp figure.camp_btn{ margin: 60px auto 20px; display: flex; align-items: center; justify-content: center;}
#camp figure.camp_btn a{ display: flex; align-items: center; justify-content: center; width: 360px; height: 60px; background: #fff; color: #013f58; font-size: 1.6rem; line-height: 1em; font-weight: bold; border-radius: 2em; padding-bottom: 0.125em; transition: 0.3s;}
#camp figure.camp_btn a i{ margin-right: 0.5em; line-height: 1em; position: relative; top: 0.0625em;}
#camp figure.camp_btn a:hover{ transform: scale(1.1); box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
@media screen and (max-width:767px){
#camp h2{ margin: 0 3.75vw 5%; font-size: 1.6rem;}
#camp h2:after{ width: calc(100% - 2.5vw); height: calc(100% - 2.5vw);}

#camp .maincontent .bg_ico02_1,
#camp .maincontent .bg_ico02_2{ display: none;}

#camp p.txt{ text-align: left; font-size: 1.2rem;}

#camp p.limited{ font-size: 0.8rem; text-align: center;}
#camp figure.camp_btn{ margin: 10% auto 2.5%;}
#camp figure.camp_btn a{ width: 100%; height: 12.5vw; font-size: 1.4rem;}
#camp figure.camp_btn a:hover{ transform: none; box-shadow: none;}
}

#camp .scroll_img{ margin-top: 60px;}
#camp .scroll_img{ position: relative;}
#camp .scroll_img ul{ display: flex; width: calc(2100px*3); position: relative;}
#camp .scroll_img ul{ animation: scroll_img linear 21.0s forwards infinite; animation-delay: 0s;}
@media screen and (max-width:767px){
#camp .scroll_img{ margin-top: 10%;}
#camp .scroll_img ul{ width: calc(210vw*3); position: relative;}
#camp .scroll_img ul{ animation: scroll_img_smp linear 16.3s forwards infinite; animation-delay: 0s;}
}
@keyframes scroll_img{
0%{ left: 0;}
100%{ left: -2100px;}
}
@keyframes scroll_img_smp{
0%{ left: 0;}
100%{ left: -210vw;}
}



/*schedule*/
#schedule .maincontent{ position: relative;}
#schedule .maincontent .bg_ico01_1{ width: 480px; position: absolute; left: calc(-480px - 80px); top: 80px;}
#schedule .maincontent .bg_ico01_2{ width: 480px; position: absolute; right: calc(-480px - 80px); top: 50%; transform: translateY(-50%) rotateY(180deg);}
#schedule .maincontent .bg_ico01_3{ width: 480px; position: absolute; left: calc(-480px - 80px); bottom: 80px;}

#schedule h2{ font-size: 3rem; padding-bottom: 0.25em; text-align: center; border-bottom: 2px solid #fff; margin-bottom: 40px;}

#schedule dl{ display: flex; align-items: center; justify-content: space-between;}
#schedule dl dt{ width: 100px; margin-right: 20px; flex-shrink: 0;}
#schedule dl dd p{ font-size: 1.2rem; letter-spacing: 0.05em;}
#schedule dl dd p a{ text-decoration: underline;}
#schedule dl dd p a:hover{ text-decoration: none;}

#schedule h3{ margin: 60px auto 20px; overflow: hidden;}
#schedule h3 strong{ font-size: 2rem; line-height: 1em; display: inline-block; padding: 0 0.5em 0 0; position: relative;}
#schedule h3 strong:after{ content: ""; width: 100vw; height: 2px; background: #fff; position: absolute; right: -100vw; top: 50%;}

#schedule table{ width: 100%; border-collapse: separate; border-spacing: 20px 20px;}
#schedule table th{ width: 10em; background: #fff; color: #013f58; font-size: 1.6rem; line-height: 1em; padding: 0.5em; text-align: center; vertical-align: middle;}
#schedule table td{ font-size: 1.6rem; padding: 0.5em 0; vertical-align: middle;}
#schedule table td p{ line-height: 1.5em;}
#schedule table td p span{ display: block; font-size: 75%; line-height: 1.5em;}

#schedule .att{ background: rgba(0,0,0,0.25); padding: 40px; margin-top: 60px;}
#schedule .att h4{ font-size: 1rem; margin-bottom: 1em; text-align: center;}
#schedule .att ul li{ font-size: 0.8rem; line-height: 1.5em; padding-left: 1em; margin-top: 0.5em; position: relative;}
#schedule .att ul li:before{ content: "・"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#schedule h2{ font-size: 1.8rem; margin-bottom: 5%;}

#schedule dl{ display: block;}
#schedule dl dt{ display: none;}
#schedule dl dd p{ font-size: 1rem; letter-spacing: 0.1em;}

#schedule h3{ margin: 10% auto 5%;}
#schedule h3 strong{ font-size: 1.6rem;}

#schedule table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#schedule table th{ display: block; width: 100%; font-size: 1.2rem; padding: 0.25em 0 0.33em;}
#schedule table td{ display: block; width: 100%; font-size: 1.2rem; letter-spacing: 0.05em; text-align: center; padding: 0.25em 0; margin-bottom: 1em;}
#schedule table td p span{ font-size: 66.66%;}

#schedule .att{ padding: 5vw; margin-top: 5%;}
#schedule .att h4{ font-size: 1rem; text-align: center;}
#schedule .att ul li{ font-size: 0.7rem;}
}



/*shop_list*/
#shop_list .maincontent{ position: relative;}
#shop_list .maincontent .bg_ico03_1{ width: 360px; position: absolute; left: calc(-360px - 40px); top: 50%; transform: translateY(-50%);}
#shop_list .maincontent .bg_ico03_2{ width: 360px; position: absolute; right: calc(-360px - 40px); top: 50%; transform: translateY(-50%) rotateX(180deg);}

#shop_list h2{ font-size: 3rem; padding-bottom: 0.25em; text-align: center; border-bottom: 2px solid #fff; margin-bottom: 40px;}
#shop_list ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px;}
#shop_list ul li{ width: calc(33.33% - (80px/3)); text-align: center;}
#shop_list ul li:nth-child(1){ width: 520px; margin: 0 120px;}
#shop_list ul li a{ display: block; transition: 0.3s;}
#shop_list ul li a:hover{ transform: scale(1.1); box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
@media screen and (max-width:767px){
#shop_list .maincontent .bg_ico03_1,
#shop_list .maincontent .bg_ico03_2{ display: none;}

#shop_list h2{ font-size: 1.8rem; margin-bottom: 5%;}
#shop_list ul{ gap: 2vw;}
#shop_list ul li{ width: calc(50% - (4vw/2));}
#shop_list ul li:nth-child(1){ width: calc(100% - (4vw/2)); margin: 0;}
#shop_list ul li a{ display: block; background: #fff; transition: 0.3s;}
#shop_list ul li a:hover{ transform: none; box-shadow: none;}
#shop_list ul li:nth-child(1) a img{ height: 31.5vw;}
}



/*shop_cont*/
#shop h2{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 3rem; margin-bottom: 80px; overflow: hidden;}
#shop h2 strong{ display: flex; align-items: center; justify-content: center; position: relative;}
#shop h2 strong:before{ content: ""; width: 100vw; height: 25%; background: #fff; position: absolute; left: calc(-100vw - 40px); top: 55%; transform: translateY(-50%) skewX(-45deg);}
#shop h2 strong:after{ content: ""; width: 100vw; height: 25%; background: #fff; position: absolute; right: calc(-100vw - 40px); top: 55%; transform: translateY(-50%) skewX(-45deg);}

.shop_cont{ position: relative; z-index: 1;}
.shop_cont .bg{ width: 840px; filter: blur(8px); opacity: 0.75; position: absolute; left: -720px; top: 50%; transform: translateY(-50%); z-index: -1;}
.shop_cont .bg_ico04{ width: 400px; position: absolute; right: calc(-400px - 40px); top: 50%; transform: translateY(-50%);}
.shop_cont.even .bg{ left: auto; right: -720px;}
.shop_cont.even .bg_ico04{ left: calc(-400px - 40px); right: auto; transform: translateY(-50%) rotateY(180deg);}

.shop_cont h3{ text-align: center; font-size: 2rem; line-height: 1.5em; border-bottom: 1px solid #fff; padding-bottom: 0.25em; margin-bottom: 0.25em;}
.shop_cont h4{ text-align: center; font-size: 1.6rem; margin-bottom: 40px;}

.shop_cont dl{ display: flex; align-items: center; justify-content: space-between;}
.shop_cont.even dl{ flex-direction: row-reverse;}
.shop_cont dl dt{ width: 480px;}
.shop_cont dl dt img{ width: 100%; overflow: hidden; border: 8px solid #fff; box-shadow:rgba(0, 0, 0, 1) 0 0 5px 2px;}
.shop_cont dl dd{ width: 480px;}
.shop_cont dl dd h5{ text-align: justify; display: flex; background: #fff; padding: 0.5em 0.75em; font-size: 1.2rem; color: #013f58; margin-bottom: 10px;}
.shop_cont dl dd p{ text-align: justify; font-size: 1rem; line-height: 2em;}
.shop_cont dl dd .price{ margin-top: 40px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: flex; align-items: center; justify-content: center;}
.shop_cont dl dd .price p{ font-size: 1rem; font-weight: 600; padding: 0.25em;}
.shop_cont dl dd .price p strong{ font-size: 150%; font-weight: 700; margin: 0 0.25em;}
.shop_cont dl dd .price p small{ font-size: 75%;}
.shop_cont dl dd figure.shop_btn{ margin-top: 20px; display: flex; align-items: center; justify-content: center;}
.shop_cont dl dd figure.shop_btn a{ width: 100%; display: flex; align-items: center; justify-content: center; background: #e8b91f; color: #013f58; font-size: 1.6rem; font-weight: 600; padding: 0.25em 1em 0.33em; border-radius: 2em; transition: 0.3s;}
.shop_cont dl dd figure.shop_btn a i{ margin-right: 0.5em; position: relative; top: 0.1em;}
.shop_cont dl dd figure.shop_btn a:hover{ transform: scale(1.1); box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
@media screen and (max-width:768px){
#shop h2{ font-size: 1.8rem; margin-bottom: 10%;}
#shop h2 strong:before{ left: calc(-100vw - 7.5vw);}
#shop h2 strong:after{ right: calc(-100vw - 7.5vw);}

.shop_cont .bg,
.shop_cont .bg_ico04{ display: none;}

.shop_cont h3{ font-size: 1.6rem;}
.shop_cont h4{ font-size: 1.2rem; margin-bottom: 7.5%;}

.shop_cont dl{ display: block;}
.shop_cont dl dt{ width: 100%; margin-bottom: 5%;}
.shop_cont dl dt img{ border-width: 1.25vw;}
.shop_cont dl dd{ width: 100%;}
.shop_cont dl dd h5{ font-size: 1rem; margin-bottom: 2.5%;}
.shop_cont dl dd p{ font-size: 0.8rem;}
.shop_cont dl dd .price{ margin-top: 5%;}
.shop_cont dl dd .price p{ font-size: 1rem;}
.shop_cont dl dd figure.shop_btn{ margin-top: 5%;}
.shop_cont dl dd figure.shop_btn a{ font-size: 1.4rem;}
.shop_cont dl dd figure.shop_btn a:hover{ transform: none;}
}

.shop_cont dl dt{ padding-bottom: 32px;}
.shop_cont dl dt .bx-wrapper .bx-pager{ bottom: -32px; line-height: 0;}
.shop_cont dl dt .bx-wrapper .bx-pager.bx-default-pager a{ background: #fff; width: 16px; height: 16px; margin: 0 8px;}
.shop_cont dl dt .bx-wrapper .bx-pager.bx-default-pager a.active { background: #e8b91f;}
@media screen and (max-width:768px){
.shop_cont dl dt .bx-wrapper .bx-pager{ bottom: -5vw;}
.shop_cont dl dt .bx-wrapper .bx-pager.bx-default-pager a{ width: 2.5vw; height: 2.5vw; margin: 0 1.25vw;}
}





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