@charset "UTF-8";

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

:root {
--sn-green: #8ad7d6;
--sn-yellow: #e8c469;
--sn-beige: #fdf6ec;
--sn-text: #555;
--sn-serif: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Times New Roman", serif;
--sn-gothic: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", sans-serif;
}

#snIntro,
#snService,
#snGift,
#snRental,
#snPlan {
width: 90%;
max-width: 1170px;
margin: 6rem auto 0;
text-align: center;
font-family: var(--sn-serif);
color: var(--sn-text);
}

/* main内の文字をほぼ明朝に（base.cssのゴシック指定を上書き）。
   例外：h2 spanの英語、.holiday は明朝にしない（下で個別指定） */
#snIntro *,
#snService *,
#snGift *,
#snRental *,
#snPlan * {
font-family: var(--sn-serif);
}

/* 見出し共通（このページは明朝） */
#snIntro h2,
#snService h2,
#snGift h2,
#snRental h2,
#snPlan h2 {
font-size: 2.1rem;
font-weight: 600;
color: var(--sn-green);
letter-spacing: .22em;
line-height: 1.4;
}

/* common.cssのh2斜線装飾はこのページでは使わない（フォトギャラリーは除く） */
#snIntro h2::after,
#snService h2::after,
#snGift h2::after,
#snRental h2::after,
#snPlan h2::after {
display: none;
}

#snIntro h2 span,
#snGift h2 span,
#snPlan h2 span {
display: block;
margin-top: .5rem;
font-family: var(--sn-gothic);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .12em;
color: var(--sn-yellow);
}

/* corporateと同様、「土日祝は＋5,500円」は明朝にしない */
#snPlan .holiday {
font-family: var(--sn-gothic);
}

/* =======================================
intro
======================================= */
#snIntro {
position: relative;
padding-top: 1rem;
}

#snIntro .introFlower {
position: absolute;
left: 2%;
top: -9.5rem; /* 上のメインビジュアルに少し重ねる */
width: clamp(110px, 13vw, 190px);
z-index: 1;
}

#snIntro .introFlower img {
display: block;
width: 100%;
height: auto;
}

#snIntro .introLead {
margin-top: 2.4rem;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.9;
letter-spacing: .12em;
}

#snIntro .introBody {
max-width: 760px;
margin: 0 auto;
}

#snIntro .introBody p {
margin-top: 2.2rem;
font-size: 1.25rem;
font-weight: 500;
line-height: 2.1;
letter-spacing: .08em;
text-align: left;
}

/* =======================================
人気の撮影サービス
======================================= */
#snService .lead {
margin-top: 2.2rem;
font-size: 1.45rem;
font-weight: 600;
letter-spacing: .14em;
}

#snService .serviceMain {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
margin-top: 2.6rem;
}

#snService .serviceMain figure {
aspect-ratio: 670 / 505;
overflow: hidden;
}

#snService .serviceMain h3 {
margin-top: 1.4rem;
font-size: 1.45rem;
font-weight: 600;
letter-spacing: .1em;
}

#snService .serviceMain > li > p {
margin-top: 1rem;
padding: 0 1rem;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.9;
letter-spacing: .05em;
text-align: left;
}

#snService .serviceSub {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin-top: 3rem;
}

#snService .serviceSub figure {
aspect-ratio: 444 / 505;
overflow: hidden;
}

#snService .serviceSub p {
margin-top: 1rem;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: .1em;
}

#snService figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* =======================================
フォトギフト
======================================= */
#snGift {
width: 100%;
max-width: none;
}

#snGift .giftBand {
background: var(--sn-beige);
margin-top: 2.6rem;
padding: 3.5rem 0 4rem;
}

#snGift .giftGrid {
width: 90%;
max-width: 1170px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
align-items: center;
}

#snGift .giftGrid img {
display: block;
width: 100%;
height: auto;
}

/* =======================================
レンタル衣装
======================================= */
#snRental ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 2.4rem;
}

#snRental figure {
aspect-ratio: 465 / 510;
background: #333;
overflow: hidden;
}

#snRental figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

#snRental li p {
margin-top: 1rem;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: .12em;
}

/* =======================================
撮影プラン（ベースは common.css の planList）
======================================= */
#snPlan .planList {
font-family: var(--sn-serif);
}

#snPlan .planDetail > h3 {
font-family: var(--sn-serif);
letter-spacing: .08em;
font-size: 1.9rem;
}

/* 2列のままカードが細くなる幅では、長い「スタンダードプラン」がカメラ枠に被るので、
   その範囲だけ標準プランのタイトルを幅に応じて少し縮小（カメラ枠を常に避ける） */
@media screen and (min-width: 813px) and (max-width: 1255px) {
#snPlan .planList article:first-child .planDetail > h3 {
font-size: clamp(1.15rem, 3.1vw - 0.5rem, 1.9rem);
}
}

#snPlan .price small {
display: block;
margin-top: .2rem;
font-size: 1.15rem;
font-weight: 600;
}

/* planDetail内の文字をページ全体（本文1.25rem・小見出し1.45rem）に合わせて縮小
   撮影料 1.45→1.3rem／金額 2.3→2rem／土日祝 1.45→1.25rem／項目 1.65→1.4rem */
#snPlan .planDetail .price {
font-size: 1.3rem;
}

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

#snPlan .planDetail .holiday {
font-size: 1.25rem;
}

#snPlan .planDetail > ul > li {
font-size: 1.4rem;
}

/* オプション内訳 1.35→1.15rem */
#snPlan .planDetail > ul small {
font-size: 1.15rem;
}

/* ②⑤ 写真・ヘアメイクの補足（カッコ書き）は項目より2段階小さく（1.35→1.15rem） */
#snPlan .planDetail > ul .planNote {
font-size: 1.15rem;
}

/* ③⑥ オプション：「オプション」はセンターのまま、内訳は
   センターに置いたブロックの中で「・」を含めて左揃え。改行させない */
#snPlan .planDetail > ul .optionItems {
display: block;
width: fit-content;
margin: .5rem auto 0;
}

#snPlan .planDetail > ul small {
text-align: left;
white-space: nowrap;
}

#snBanner {
max-width: 970px;
margin: 4.5rem auto 0;
}

#snBanner img {
display: block;
width: 100%;
height: auto;
}

/* =======================================
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 banner
======================================= */
#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: 1080px) {
#snIntro .introFlower {
width: clamp(80px, 10vw, 130px);
}

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

@media screen and (max-width: 812px) {
#snService .serviceMain {
grid-template-columns: 1fr;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}

#snGift .giftGrid {
grid-template-columns: 1fr;
max-width: 560px;
}

/* 縦並び時は「写真→文字ボックス」の交互になるよう03と04を入れ替え */
#snGift .giftGrid figure:nth-child(3) {
order: 4;
}

#snGift .giftGrid figure:nth-child(4) {
order: 3;
}

#gallery {
margin-top: 50px;
}

#picGallery {
margin: 5rem auto 0;
}

/* ①④ 1列表示時：プラン名を改行させず、カメラ枠（plan_photo.png）に被らない大きさに。
   PC（813〜1255px）の縮小式と同じ「カード幅に対する比率」で算出 */
#snPlan .planDetail > h3 {
white-space: nowrap;
font-size: clamp(1.15rem, 5.2vw - .3rem, 1.9rem);
}
}

@media screen and (max-width: 480px) {
#snIntro,
#snService,
#snRental,
#snPlan {
width: 86%;
}

#snIntro h2,
#snService h2,
#snGift h2,
#snRental h2,
#snPlan h2 {
font-size: 1.5rem;
}

/* スマホ：フォトギャラリーのh2をkids/omiya.htmlと同じ1.5remに（spanはcommon.cssの1remのまま） */
#picGallery h2 {
font-size: 1.5rem;
}

#snIntro .introFlower {
position: static;
width: 90px;
margin: 0 auto 1rem;
}

#snIntro .introLead {
font-size: 1.3rem;
}

#snIntro .introBody p {
font-size: 0.94rem;
line-height: 1.9;
}

#snService .lead {
font-size: 1.3rem;
line-height: 1.8;
}

#snService .serviceMain h3 {
font-size: 1.3rem;
}

#snService .serviceMain > li > p {
font-size: 0.94rem;
}

#snService .serviceSub {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}

#snService .serviceSub p,
#snRental li p {
font-size: 0.94rem;
}

#snRental ul {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}

#snPlan .price small {
font-size: 0.94rem;
}

/* スマホ：planDetail内の文字をページの本文（0.94rem）とのバランスで縮小
   撮影料 1.05rem／金額 1.7rem／土日祝 1rem／項目 1.1rem */
#snPlan .planDetail .price {
font-size: 1.05rem;
}

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

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

#snPlan .planDetail > ul > li {
font-size: 1.1rem;
}

/* ①④ スマホ：プラン名をカード幅に合わせて縮小（改行させず、カメラ枠に被らない） */
#snPlan .planDetail > h3 {
font-size: clamp(.9rem, 5.6vw - .1rem, 1.9rem);
}

/* ②⑤ スマホ：カッコ書きは項目（1.1rem）より小さく本文と同じ0.94rem。改行させない */
#snPlan .planDetail > ul .planNote {
font-size: 0.94rem;
white-space: nowrap;
}

/* ③⑥ スマホ：オプション内訳も本文と同じ0.94rem（改行なしは上の指定を継承） */
#snPlan .planDetail > ul small {
font-size: 0.94rem;
}

#snBanner {
margin-top: 3rem;
}

#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;
}
}