@charset "utf-8";
/* 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: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
background: url("../images/bg.png");
color:#1B2C58;
min-width:1000px;
}
@media screen and (max-width:1000px){
html,body{ font-size: 4vw; min-width:240px; max-width:1080px;}
}

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


/*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:#1B2C58;}
.red{ color:#EC6F8D;}

.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: 80px 0 0; text-align: center; background: url("../images/header_bg.png") center top no-repeat;}
header h1{ text-align: center; margin-bottom: 80px;}
header .date{ margin-bottom: 60px;}
header p{ font-size: 1.6rem; letter-spacing: 0.05em; font-weight: bold;}
@media screen and (max-width:1000px){
header{ padding: 7.5% 3.75% 0;}
header h1{ margin-bottom: 7.5%;}
header .date{ margin-bottom: 5%;}
header .date img{ width: 100%;}
header p{ font-size: 1.25rem; text-align: justify;}
}

/*フッター*/
footer{ background: url("../images/footer_bg.png") center top no-repeat; padding: 120px 0 60px; margin-top: 120px;}
#footer{ width: 1000px; text-align: center; margin: auto; position: relative;}
#footer .ill01{ position: absolute; left: 0; top: -40px;}
#footer .ill02{ position: absolute; right: 0; top: 20px;}
#footer figure.logo1{ margin-bottom: 60px;}
#footer p.txt{ font-size: 1.1rem; font-weight: bold; margin-bottom: 60px; text-align: center;}
#footer figure.logo2{ margin-bottom: 30px;}
#footer .sns{ display: flex; align-items: center; justify-content: center; margin: auto;}
#footer .sns ul{ display: flex; align-items: center; justify-content: center; background: #fff; padding: 16px; border-radius: 16px;}
#footer .sns ul li{ margin: 0 16px;}
#footer p.copyright{ text-align: center; margin-top: 60px;}
@media screen and (max-width:1000px){
footer{ padding: 12.5% 0 7.5%; margin-top: 12.5%;}
#footer{ width: 92.5%;}
#footer .ill01{ width: 20vw; top: -7.5vw;}
#footer .ill02{ width: 12.5vw; top: 3.75vw;}
#footer figure.logo1{ width: 50%; margin-bottom: 7.5%;}
#footer p.txt{ text-align: justify; font-size: 0.9rem; margin-bottom: 7.5%;}
#footer figure.logo2{ width: 33.33%; margin-bottom: 3.75%;}
#footer .sns ul{ padding: 1.875vw; border-radius: 1.875vw;}
#footer .sns ul li{ margin: 0 1.875vw; line-height: 0;}
#footer .sns ul li img{ height: 7.5vw;}
#footer p.copyright{ margin-top: 7.5%;}
#footer p.copyright img{ height: 2.5vw;}
}

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

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

/*bar*/
.bar{ text-align: center; margin: 80px auto;}
@media screen and (max-width:1000px){
.bar{ margin: 12.5% auto; line-height: 0;}
}



/*plan*/
#plan{ text-align: center;}
#plan .plan02 h2{ margin-top: 120px;}
#plan h2{ margin-bottom: 40px;}
#plan p.lead{ font-size: 1.1rem; font-weight: bold; margin-bottom: 40px;}

#plan .plan_img{ width: 800px; margin: 40px auto; position: relative;}
#plan .plan_img figure img{ width: 100%; border: 8px solid #fff;}
#plan .plan01 .plan_img span.ill01{ position: absolute; left: -90px; top: 10px;}
#plan .plan01 .plan_img span.ill02{ position: absolute; right: -90px; bottom: 130px;}
#plan .plan01 .plan_img span.ill03{ position: absolute; left: -100px; bottom: -20px;}
#plan .plan02 .plan_img span.ill01{ position: absolute; right: -70px; top: -10px;}
#plan .plan02 .plan_img span.ill02{ position: absolute; left: -100px; bottom: 150px;}
#plan .plan02 .plan_img span.ill03{ position: absolute; right: -100px; bottom: -20px;}

#plan .plan_btn{ display: flex; justify-content: center; margin: 60px auto 0;}
#plan .plan_btn figure.btn{ margin: 0 40px;}
#plan .plan_btn figure.btn a{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 360px; height: 160px; background: #000; color: #fff; border-radius: 24px;}
#plan .plan_btn figure.btn a{ background: linear-gradient(to right,  #4daed9 0%,#87cbba 100%);}
#plan .plan_btn figure.btn a span{ font-size: 1.5rem; font-weight: bold; line-height: 1em; margin-bottom: 0.5em;}
#plan .plan_btn figure.btn a strong{ font-size: 1.9rem; font-weight: bold; line-height: 1em;}

#plan .camp_ban{ margin: 40px auto;}
#plan .amenity{ background: rgba(255,255,255,0.5); border: 4px dotted #5483A7; padding: 40px; border-radius: 24px;}
#plan .amenity h3{ text-align: center; font-size: 2.1rem; color: #62BFED; margin-bottom: 20px;}
#plan .amenity p{ text-align: center; font-size: 1.1rem; font-weight: bold; margin-bottom: 40px;}
#plan .amenity ul{ display: flex; justify-content: center; width: calc(100% + 80px); margin: 0 0 0 -40px;}
#plan .amenity ul li{ margin: 0 40px; text-align: center;}
#plan .amenity ul li h4{ margin-top: 20px; font-size: 1.25rem; color: #F4A244; line-height: 2.5em;}
#plan .amenity ul li h4.row2{ line-height: 1.25em;}
#plan .att{ margin-top: 40px; display: flex; align-items: center; justify-content: center; text-align: left;}
#plan .att ul li{ font-size: 0.7rem; line-height: 1.5em; padding-left: 1.25em; margin: 0.25em 0 0; position: relative;}
#plan .att ul li:before{ content: "※"; line-height: 1.5em; position: absolute; left: 0; top: 0;}
@media screen and (max-width:1000px){
#plan .plan02 h2{ margin-top: 20%;}
#plan h2{ margin-bottom: 5%;}
#plan h2 img{ height: 8.75vw;}
#plan p.lead{ text-align: justify; font-size: 0.9rem; margin-bottom: 5%;}

#plan .plan_img{ width: 90%; margin: 7.5% auto;}
#plan .plan_img figure img{ width: 100%; border: 1.25vw solid #fff;}
#plan .plan01 .plan_img span.ill01{ width: 12.5vw; left: -7.5vw; top: 1.25vw;}
#plan .plan01 .plan_img span.ill02{ width: 12.5vw; right: -7.5vw; bottom: 12.5vw;}
#plan .plan01 .plan_img span.ill03{ width: 17.5vw; left: -7.5vw; bottom: -1.25vw;}
#plan .plan02 .plan_img span.ill01{ width: 12.5vw; right: -7.5vw; top: -1.25vw;}
#plan .plan02 .plan_img span.ill02{ width: 12.5vw; left: -7.5vw; bottom: 15vw;}
#plan .plan02 .plan_img span.ill03{ width: 17.5vw; right: -7.5vw; bottom: -1.25vw;}

#plan .plan_btn{ width: calc(100% + 2.5vw); margin: 7.5% 0 0 -1.25vw;}
#plan .plan_btn figure.btn{ width: calc(50% - 2.5vw); margin: 0 1.25vw;}
#plan .plan_btn figure.btn a{ width: 100%; height: 20vw; border-radius: 1.875vw;}
#plan .plan_btn figure.btn a span{ font-size: 0.9rem;}
#plan .plan_btn figure.btn a strong{ font-size: 1.25rem;}

#plan .camp_ban{ width: 75%; margin: 5% auto;}
#plan .amenity{ padding: 5%; border-width: 0.875vw; border-radius: 2.5vw;}
#plan .amenity h3{ font-size: 1.6rem; margin-bottom: 3.75%;}
#plan .amenity p{ text-align: justify; font-size: 0.9rem; margin-bottom: 5%;}
#plan .amenity ul{ display: block; width: 100%; margin: 0;}
#plan .amenity ul li{ width: 100%; margin: 5% 0 0;}
#plan .amenity ul li img{ height: 50vw;}
#plan .amenity ul li h4{ margin-top: 2.5%; font-size: 1.1rem; line-height: 1em;}
#plan .amenity ul li h4.row2{ line-height: 1em;}
#plan .att{ margin-top: 5%;}
#plan .att ul li{ font-size: 0.66rem;}
}



/*price*/
#price h3{ text-align: center; font-size: 1.6rem; line-height: 1.75em; margin-bottom: 60px;}
#price h3 strong{ font-size: 2.1rem; margin: 0 0.25em;}
#price .price{ background: rgba(255,255,255,0.5); border: 4px dotted #5483A7; padding: 40px 40px 40px; border-radius: 24px;}
#price .price h4{ text-align: center; font-size: 1.1rem; margin-bottom: 30px;}
#price .price h5{ text-align: center; font-size: 1.6rem; color: #EC6F8D;}
#price .price h5 strong{ font-size: 2.1rem;}
#price .price .att{ margin-top: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#price .price .att p{ font-size: 0.9rem; line-height: 1.5em; padding-left: 1.25em; position: relative;}
#price .price .att p:before{ content: "※"; line-height: 1.5em; position: absolute; left: 0; top: 0;}
@media screen and (max-width:1000px){
#price h3{ font-size: 1.5rem; letter-spacing: 0; margin-bottom: 7.5%;}
#price h3 strong{ font-size: 2rem;}

#price .price{ border-width: 0.875vw; padding: 5% 2.5% 2.5%; border-radius: 2.5vw;}
#price .price h4{ font-size: 1rem; margin-bottom: 5%;}
#price .price h5{ font-size: 1.25rem; letter-spacing: 0;}
#price .price h5 strong{ font-size: 1.75rem;}
#price .price h5 span{ font-size: 1rem;}
#price .price .att{ margin-top: 2.5%;}
#price .price .att p{ font-size: 0.66rem;}
}



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