@charset "UTF-8";

:root {
--btob-mincho: 'Yu Mincho','YuMincho','Hiragino Mincho ProN','HGS明朝E','Times New Roman',serif;
--btob-gothic: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN',YuGothic,'Yu Gothic',sans-serif;
}

#sub #mainVisual img {
height: auto;
display: block;
}

#btobIntro,
#btobScene,
#btobQuality,
#btobPlan {
width: 90%;
max-width: 1120px;
margin: 7rem auto 0;
text-align: center;
font-size: 1.06rem;
}

#btobIntro *,
#btobScene *,
#btobQuality *,
#btobPlan * {
font-family: var(--btob-mincho);
}

#btobIntro h2 span,
#btobScene h2 span,
#btobQuality h2 span,
#btobPlan h2 span {
font-family: var(--btob-gothic);
}

#btobIntro h2,
#btobScene h2,
#btobQuality h2,
#btobPlan h2 {
font-size: 2.15rem;
font-weight: 800;
}

.lead {
margin-top: 3rem;
font-size: 1.55rem;
font-weight: 600;
color: #444;
}

.note {
margin-top: 1rem;
font-size: 1.06rem;
font-weight: 600;
}

.introBlock {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 4rem;
text-align: left;
}

.introBlock .txtArea {
width: 48%;
}

.introBlock .txtArea p {
margin-bottom: 1rem;
font-size: 1.14rem;
font-weight: 600;
line-height: 2.2;
}

.introBlock figure {
width: 48%;
}

.introBlock figure img {
width: 100%;
height: auto;
}

.sceneList {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 4rem;
text-align: left;
}

.sceneList li {
background: #f2f8fa;
}

.sceneList figure img {
width: 100%;
height: auto;
}

.sceneList li > div {
padding: 2rem 1.8rem 2.2rem;
}

.sceneList h3 {
text-align: center;
font-size: 1.45rem;
font-weight: 600;
color: #444;
line-height: 1.5;
}

#btobScene .sceneList p {
margin-top: 1rem;
font-weight: 500;
line-height: 1.6;
font-family: var(--btob-gothic);
}

#btobQuality ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 4rem;
text-align: left;
}

#btobQuality li {
background: #faf6ed;
padding: 0 1.5rem 1.5rem;
}

#btobQuality .point {
height: 51px;
margin: -1.2rem 0 1rem;
text-align: center;
}

#btobQuality .point img {
width: auto;
height: 51px;
}

#btobQuality h3 {
text-align: center;
font-size: 1.4rem;
font-weight: 600;
color: #444;
}

#btobQuality li p:last-child {
margin-top: 0.4rem;
font-size: 1rem;
font-weight: 600;
    line-height: 1.6;
font-family: var(--btob-gothic);
}

#btobPlan .holiday {
font-family: var(--btob-gothic);
}

/* planDetail内の文字をページ全体（本文1.06〜1.14rem・h3 1.4〜1.45rem・h2 2.15rem）に合わせて縮小
   プラン名 2.2→1.8rem／料金 1.45→1.2rem／金額 2.3→2rem／半日 1.45→1.15rem／項目 1.65→1.25rem */
#btobPlan .planDetail > h3 {
font-size: 1.8rem;
}

#btobPlan .planDetail .price {
font-size: 1.2rem;
}

#btobPlan .planDetail .price strong {
font-size: 2rem;
}

#btobPlan .planDetail .holiday {
font-size: 1.15rem;
}

#btobPlan .planDetail > ul > li {
font-size: 1.25rem;
}

/* =======================================
picGallery
======================================= */
#picGallery {
position: relative;
padding: 0 0 3rem;
margin: 8rem auto 0;
}

#gallery {
width: 90% !important;
max-width:1280px !important;
margin: 5rem auto 3rem;
}

#gallery .item:nth-child(-n+10) {
display: block;
}

#gallery .item {
width: 19%;
margin: .5%;
display: none;
}

#gallery + p a {
background: #fff;
color: #9cd8d8;
width: 90%;
max-width:380px;
display: block;
padding: .5rem;
text-align: center;
margin: 0 auto;
border-radius: 30px;
font-weight: 600;
}

#picGallery:after {
content: "";
width: 100%;
display: block;
height: 60%;
background: #9CD8D8;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

/* =======================================
#bnrList バナー
======================================= */
#bnrList {
display: flex;
flex-wrap:wrap;
max-width: 1280px;
margin: 5rem auto;
justify-content: center;
}

#bnrList li {
width: 31%;
margin: 0 1%;
}

@media screen and (max-width: 1366px) {
#gallery {
width: 98% !important;
}
}

@media screen and (max-width: 1080px) {
.sceneList {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#gallery .item {
width: 32%;
}
}

@media screen and (max-width: 812px) {
.introBlock {
display: block;
}

.introBlock .txtArea,
.introBlock figure {
width: 100%;
}

.introBlock figure {
margin-top: 2rem;
}

.sceneList,
#btobQuality ul {
grid-template-columns: 1fr;
}

#gallery {
margin-top: 50px;
}

#picGallery {
margin: 5rem auto 0;
}
}

@media screen and (max-width: 480px) {
#btobIntro,
#btobScene,
#btobQuality,
#btobPlan {
width: 86%;
font-size: 0.94rem;
}

/* スマホ：見出しを縮小（本文は上のbase 0.94rem=15pxを継承） */
#btobIntro h2,
#btobScene h2,
#btobQuality h2,
#btobPlan h2 {
font-size: 1.5rem;
}

#btobQuality h3 {
font-size: 1.2rem;
}

.lead {
font-size: 1.2rem;
}

/* スマホ：planDetail内の文字を本文（0.94rem）・h2（1.5rem）とのバランスで縮小
   プラン名 1.4rem／料金 1.05rem／金額 1.7rem／半日 1rem／項目 1.05rem */
#btobPlan .planDetail > h3 {
font-size: 1.4rem;
}

#btobPlan .planDetail .price {
font-size: 1.05rem;
}

#btobPlan .planDetail .price strong {
font-size: 1.7rem;
}

#btobPlan .planDetail .holiday {
font-size: 1rem;
}

#btobPlan .planDetail > ul > li {
font-size: 1.05rem;
}

#gallery {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin-top: 30px;
}

#gallery p {
width: 49% !important;
}

#picGallery {
margin: 50px auto 0;
}

#bnrList li {
width: 48%;
margin-bottom: 1rem;
}

#bnrList li:last-child {
margin-bottom: 0;
}
}