@charset "UTF-8";

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

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

/* セクション共通枠 */
#fmIntro,
#fmScene,
#fmGift,
#fmPlan {
width: 90%;
max-width: 1130px;
margin: 6rem auto 0;
text-align: center;
font-family: var(--fm-serif);
color: var(--fm-text);
}
#fmScene{
margin: 2rem auto 0;
}

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

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

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

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

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

#fmIntro .introBlock {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
margin-top: 3.2rem;
text-align: left;
}

#fmIntro .introBlock + .introBlock {
margin-top: 3rem;
}

#fmIntro .introBlock .txt p {
font-size: 1.3rem;
font-weight: 500;
line-height: 2.1;
letter-spacing: .06em;
}

#fmIntro .introBlock .txt p + p {
margin-top: 1.8rem;
}

#fmIntro .introBlock figure {
aspect-ratio: 690 / 480;
overflow: hidden;
}

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

/* =======================================
scene（3点キャプション）
======================================= */
#fmScene ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}

#fmScene figure {
/* aspect-ratio: 360 / 300; */
overflow: hidden;
}

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

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

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

#fmGift h2 {
width: 90%;
max-width: 1130px;
margin: 0 auto;
}

#fmGift .giftBand {
background: var(--fm-beige);
    max-width: 1200px;
    margin: 2.6rem auto 0;
padding: 3.5rem 0 3rem;
}

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

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

#fmGift .giftLead {
width: 90%;
max-width: 1130px;
margin: 2.4rem auto 0;
font-size: 1.3rem;
font-weight: 600;
line-height: 1.9;
letter-spacing: .06em;
}

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

#fmPlan .planDetail > h3 {
font-family: var(--fm-serif);
letter-spacing: .08em;
font-size: 1.9rem; /* 2.2rem → セクション見出しh2（2.1rem）より小さく */
}

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

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

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

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

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

/* =======================================
picGallery（corporate-photography と同一の共通スタイル）
======================================= */
#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 バナー（corporate-photography と同一）
======================================= */
#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) {
#gallery .item {
width: 32%;
}
}

@media screen and (max-width: 812px) {
#fmIntro .introBlock {
grid-template-columns: 1fr;
gap: 1.8rem;
}

#fmIntro .introBlock figure {
order: -1;
}

#gallery {
margin-top: 50px;
}

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

@media screen and (max-width: 480px) {


#fmIntro h2,
#fmGift h2,
#fmPlan h2 {
font-size: 1.55rem;
}

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

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

#fmIntro .introBlock .txt p {
font-size: 0.94rem;
line-height: 1.95;
}

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

#fmScene li p {
font-size: 0.94rem;
}

#fmGift .giftGrid {
grid-template-columns: 1fr;
gap: 1.6rem;
}

#fmGift .giftLead {
font-size: 1.2rem;
text-align: left;
}

/* スマホ：planDetail内の文字を本文（0.94rem）とのバランスで縮小（senior-photoと同値）
   撮影料 1.05rem／金額 1.7rem／土日祝 1rem／項目 1.1rem
   プラン名はsenior-photoと同じく、改行させずカード幅に合わせて縮小し
   左のカメラのイラスト（plan_photo.png）に被らないようにする（1.7remでは被っていた） */
#fmPlan .planDetail > h3 {
white-space: nowrap;
font-size: clamp(.9rem, 5.6vw - .1rem, 1.9rem);
}

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

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

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

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

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