@charset "UTF-8";

/* =========================================================
   スタジオアルファ 見本コーディング
   Figma: スタジオアルファHP (nvZ402Wop9C32fDvdOafl9)
   PC 1280 / SP 390 のアートボードを再現
   ========================================================= */

/* ---------------------------------------------------------
   1. デザイントークン
   --------------------------------------------------------- */
:root {
    /* color */
    --c-text: #4f4e52;
    --c-ink: rgba(35, 31, 45, 0.89);
    --c-white: #fff;
    --c-pale: #fafcff;
    --c-blue-pale: #f2f6fb;
    --c-blue-band: #cddbe8;
    --c-footer: #dbe5ea;
    --c-accent: #5688b3;
    --c-placeholder: #d9d9d9;
    --c-caption: rgba(255, 255, 255, 0.8);
    --c-caption-plan: rgba(242, 255, 255, 0.8);

    /* typography */
    --f-mincho: "Shippori Mincho B1", "Yu Mincho", "YuMincho", serif;
    --f-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --f-mono: "IBM Plex Mono", monospace;
    --f-script: "Vujahday Script", cursive;
    --lh: 1.54;
    --ls: 0.02em;

    /* layout */
    --container: 1100px;
    --gutter-pc: 90px;
    --gutter-sp: 20px;
}

/* ---------------------------------------------------------
   2. リセット / ベース
   --------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--f-gothic);
    font-weight: 400;
    line-height: var(--lh);
    letter-spacing: var(--ls);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
figure,
dl,
dd {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------
   3. レイアウト
   --------------------------------------------------------- */
.l-inner {
    width: min(var(--container), 100% - var(--gutter-pc) * 2);
    margin-inline: auto;
}

/* ---------------------------------------------------------
   4. 共通コンポーネント
   --------------------------------------------------------- */

/* 4-1. 見出し（中央・区切り線あり / なし） */
.c-heading {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 28px;
    text-align: center;
    color: var(--c-text);
}

.c-heading--ruled {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--c-ink);
}

/* 4-2. ボタン */
.c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 301px;
    max-width: 100%;
    height: 50px;
    margin-inline: auto;
    border-radius: 12px;
    background: var(--c-text);
    color: var(--c-white);
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    transition: opacity 0.2s;
}

.c-btn:hover {
    opacity: 0.8;
}

.c-btn--line {
    width: 226px;
    border-radius: 10px;
}

/* 4-3. 写真＋キャプションのカード（撮影メニュー / プラン内容） */
.c-photocard {
    display: block;
    width: 245px;
}

.c-photocard__img {
    width: 245px;
    height: 230px;
    object-fit: cover;
    object-position: center 15%;
}

.c-photocard__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--c-caption);
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    color: var(--c-text);
}

/* 4-4. スナップ写真購入バナー */
.c-snap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 252px;
    min-height: 72px;
    padding: 6px 10px;
    background: var(--c-blue-pale);
    text-align: center;
    color: var(--c-ink);
}

.c-snap__label {
    font-size: 12px;
}

.c-snap__title {
    font-weight: 900;
    font-size: 16px;
}

/* 4-5. 画像プレースホルダー（写真未支給枠） */
.c-placeholder {
    background: var(--c-placeholder);
}

/* 4-6. 表示切替ユーティリティ */
.u-sp-only {
    display: none;
}

/* ---------------------------------------------------------
   5. ヘッダー
   --------------------------------------------------------- */
.l-header {
    background: var(--c-white);
}

.l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
}

.l-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.l-header__logo {
    width: 80px;
}

.l-header__name {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.13;
    color: var(--c-ink);
}

.l-header__reserve {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    color: var(--c-ink);
}

.l-header__reserve img {
    width: 58px;
    height: 50px;
    object-fit: contain;
}

.l-header__reserve span {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.13;
}

/* ハンバーガー（SP のみ表示） */
.l-header__toggle {
    display: none;
    width: 32px;
    height: 32px;
}

.l-drawer {
    display: none;
}

/* ---------------------------------------------------------
   6. グローバルナビ（TOP のみ）
   --------------------------------------------------------- */
.l-gnav {
    background: var(--c-white);
}

.l-gnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 100px;
}

.l-gnav__list {
    display: flex;
    align-items: center;
    gap: 50px;
}

.l-gnav__list a {
    display: block;
    padding: 10px 16px;
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 20px;
    color: var(--c-ink);
    transition: opacity 0.2s;
}

.l-gnav__list a:hover {
    opacity: 0.6;
}

/* ---------------------------------------------------------
   7. メインビジュアル
   --------------------------------------------------------- */
.p-mv {
    height: 840px;
    background: var(--c-white);
}

.p-mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

/* 下層ページ MV（タイトル帯つき） */
.p-pagehead {
    position: relative;
    height: 700px;
    background: #fcfff4;
    overflow: hidden;
}

.p-pagehead__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.p-pagehead__title {
    position: absolute;
    left: 0;
    top: 472px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 483px;
    max-width: 90%;
    padding: 0 40px;
    background: var(--c-blue-pale);
    filter: drop-shadow(0 4px 6.5px rgba(0, 0, 0, 0.25));
    font-family: var(--f-mincho);
    font-weight: 700;
    font-size: 40px;
    color: var(--c-ink);
}

/* ---------------------------------------------------------
   8. TOP: あなたに感動を残したい
   --------------------------------------------------------- */
.p-about {
    position: relative;
    min-height: 500px;
    background: var(--c-white);
    overflow: hidden;
}

.p-about__photo {
    position: absolute;
    left: 0;
    top: -213px;
    width: 100%;
    height: 852px;
    opacity: 0.7;
}

.p-about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-about__inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-top: 64px;
}

.p-about__body {
    display: flex;
    flex-direction: column;
    gap: 21px;
    flex: 0 1 547px;
    padding: 40px 80px 0 0;
}

.p-about__title {
    font-family: var(--f-mincho);
    font-weight: 700;
    font-size: 28px;
}

.p-about__lead {
    font-family: var(--f-mincho);
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;
}

.p-about__text {
    font-weight: 500;
    font-size: 14px;
}

/* ---------------------------------------------------------
   9. TOP: お知らせ / 営業カレンダー
   --------------------------------------------------------- */
.p-info {
    background: var(--c-pale);
}

.p-info__inner {
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
}

.p-news {
    width: 640px;
    padding: 60px 0;
}

.p-news__title {
    max-width: 570px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--c-ink);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--c-text);
}

.p-news__list {
    padding: 20px 0;
}

.p-news__item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 0;
    color: var(--c-text);
}

.p-news__date {
    flex-shrink: 0;
    font-size: 18px;
}

.p-news__label {
    font-size: 16px;
}

.p-news__more,
.p-calendar__more {
    display: block;
    padding: 10px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: var(--c-text);
}

.p-calendar {
    width: 460px;
    padding: 60px 0;
}

.p-calendar__title {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--c-ink);
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 24px;
    color: var(--c-text);
}

.p-calendar__body {
    width: 410px;
    max-width: 100%;
    padding: 30px 10px;
}

.p-calendar__embed {
    display: block;
    width: 100%;
    height: 295px;
    border: 0;
}

/* ---------------------------------------------------------
   10. TOP: 撮影メニュー
   --------------------------------------------------------- */
.p-menu {
    padding: 60px 0 138px;
    background: var(--c-white);
}

.p-menu__list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 46px;
}

.p-menu__foot {
    margin-top: 27px;
}

/* ---------------------------------------------------------
   11. LINE CTA
   --------------------------------------------------------- */
.p-cta {
    padding: 30px 0;
    background: var(--c-white);
}

.p-cta__frame {
    width: min(var(--container), 100% - var(--gutter-pc) * 2);
    margin-inline: auto;
    padding: 0 80px;
    border: 5px dashed var(--c-accent);
    background: var(--c-white);
}

.p-cta__inner {
    display: flex;
    align-items: center;
    padding: 49px 0;
}

.p-cta__line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
    flex-shrink: 0;
    width: 350px;
    padding: 39px 23px;
    background: var(--c-pale);
}

.p-cta__line-title {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    color: var(--c-ink);
}

.p-cta__qr {
    width: 163px;
    height: 163px;
}

.p-cta__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    flex: 1 1 0;
    min-height: 449px;
    padding: 0 50px;
    color: var(--c-ink);
}

.p-cta__title {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 32px;
}

.p-cta__text {
    max-width: 507px;
    font-size: 14px;
    line-height: 1.88;
}

.p-cta__tel {
    display: block;
    margin-top: 4px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.88;
}

.p-cta__hours dt {
    font-weight: 700;
    font-size: 21px;
}

.p-cta__hours dd {
    margin-top: 4px;
    font-size: 18px;
}

/* ---------------------------------------------------------
   12. TOP: アクセス（GOOGLE MAP）
   --------------------------------------------------------- */
.p-access {
    padding: 97px 0;
    background: var(--c-pale);
}

.p-access__map {
    height: 530px;
    background: var(--c-pale);
}

.p-access__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.p-access__address {
    padding: 10px;
    font-size: 20px;
    color: var(--c-ink);
}

/* ---------------------------------------------------------
   13. フッター
   --------------------------------------------------------- */
.l-footer {
    padding: 40px 0 84px;
    background: var(--c-footer);
}

.l-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.l-footer__brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.l-footer .c-snap {
    width: 216px;
    min-height: 61px;
    background: var(--c-white);
}

.l-footer__logo {
    width: 70px;
}

.l-footer__name {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 26px;
    color: var(--c-text);
}

.l-footer__info {
    margin-top: 39px;
    font-size: 18px;
    line-height: 1.24;
    color: var(--c-text);
}

.l-footer__info p + p {
    margin-top: 20px;
}

/* ---------------------------------------------------------
   14. 下層: ウエディング
   --------------------------------------------------------- */
.p-wd-intro {
    padding: 0;
    background: var(--c-white);
    overflow: hidden;
}

.p-wd-intro__inner {
    display: flex;
    align-items: center;
    gap: 80px;
    min-height: 480px;
}

.p-wd-intro__body {
    width: 480px;
    flex-shrink: 0;
}

.p-wd-intro__script {
    padding: 30px 0;
    text-transform: uppercase;
    font-family: var(--f-script);
    font-weight: 400;
    font-size: 65px;
    line-height: 1.86;
    color: rgba(0, 0, 0, 0.12);
    transform: rotate(-3.44deg);
    transform-origin: left center;
}

.p-wd-intro__lead {
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 18px;
}

.p-wd-intro__text {
    margin-top: 55px;
    font-weight: 500;
    font-size: 14px;
}

.p-wd-intro__photo {
    width: 479px;
    height: 364px;
    object-fit: cover;
}

/* ギャラリー / 貸衣装（共通グリッド） */
.p-gallery {
    padding: 60px 0;
    background: var(--c-white);
}

.p-gallery--tinted {
    background: var(--c-blue-pale);
}

.p-gallery__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 22px;
    margin-top: 41px;
}

.p-gallery__item {
    width: 200px;
    height: 151px;
    object-fit: cover;
    /* 縦長写真は上（人物の顔側）を優先して表示する */
    object-position: top;
}

/* 頭上に余白が多い寄りのカット用。上端ではなく頭の少し上から切り抜く */
.p-gallery__item--head-top {
    object-position: 50% 20%;
}

.p-gallery__foot {
    margin-top: 41px;
}

/* ウエディングプラン内容 */
.p-plan {
    padding: 58px 0;
    background: var(--c-blue-pale);
}

.p-plan__list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    padding: 37px 10px 60px;
    background: var(--c-white);
}

.p-plan__list .c-photocard__body {
    background: var(--c-caption-plan);
}

.p-plan__cardtitle {
    font-family: var(--f-gothic);
    font-weight: 900;
    font-size: 20px;
}

.p-plan__cardnote {
    font-family: var(--f-gothic);
    font-weight: 400;
    font-size: 16px;
}

.p-plan__plus {
    align-self: flex-start;
    margin-top: 89px;
    padding: 10px 20px;
    font-weight: 900;
    font-size: 20px;
    color: var(--c-text);
}

/* 料金詳細 */
.p-price {
    padding: 80px 0;
    background: var(--c-white);
}

.p-price__inner {
    width: min(900px, 100% - var(--gutter-pc) * 2);
    margin-inline: auto;
}

.p-price__title {
    padding: 0 10px;
    background: var(--c-blue-band);
    font-family: var(--f-mincho);
    font-weight: 800;
    font-size: 28px;
    text-align: center;
    color: var(--c-text);
}

.p-price__block {
    padding: 50px 0;
    color: var(--c-text);
}

.p-price__block dt {
    font-weight: 700;
    font-size: 24px;
}

.p-price__block dd {
    margin-top: 15px;
    font-weight: 500;
    font-size: 21px;
}

/* ギャラリー画像の拡大モーダル（ライトボックス） */
.c-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 70px 20px;
    background: rgb(0 0 0 / 80%);
}

.c-lightbox.is-open {
    display: flex;
}

.c-lightbox__image {
    display: block;
    max-width: min(900px, 100%);
    max-height: 100%;
    width: auto;
    height: auto;
}

.c-lightbox__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.c-lightbox__close::before,
.c-lightbox__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background: var(--c-white);
    content: '';
}

.c-lightbox__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.c-lightbox__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダルを開いている間は背面をスクロールさせない */
body.is-modal-open {
    overflow: hidden;
}

/* JS でモーダルを紐付けた画像だけクリック可能に見せる */
.p-gallery__item.is-zoomable {
    cursor: pointer;
    transition: opacity 0.2s;
}

.p-gallery__item.is-zoomable:hover,
.p-gallery__item.is-zoomable:focus-visible {
    opacity: 0.8;
}

/* =========================================================
   SP（〜767px）
   ========================================================= */
@media (max-width: 767px) {
    .l-inner {
        width: min(350px, 100% - var(--gutter-sp) * 2);
    }

    .u-sp-only {
        display: inline;
    }

    /* 罫線見出しの罫線はコンテナ幅を越えて引く（Figma 実測 w460） */
    .c-heading--ruled,
    .p-calendar__title {
        margin-inline: calc(var(--gutter-sp) * -1);
        padding-inline: var(--gutter-sp);
    }

    /* ヘッダー */
    .l-header__inner {
        min-height: 70px;
    }

    .l-header__logo {
        width: 80px;
        opacity: 0.7;
    }

    .l-header__name,
    .l-header__reserve {
        display: none;
    }

    .l-header__toggle {
        display: block;
    }

    .l-drawer {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: var(--c-blue-pale);
        transition: max-height 0.3s ease;
    }

    .l-drawer.is-open {
        max-height: 520px;
    }

    .l-drawer__list {
        padding: 10px 0;
    }

    .l-drawer__list a {
        display: block;
        padding: 14px var(--gutter-sp);
        border-bottom: 1px solid rgba(35, 31, 45, 0.15);
        font-family: var(--f-mincho);
        font-weight: 800;
        font-size: 18px;
        color: var(--c-ink);
    }

    .l-drawer__foot {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px;
    }

    /* グローバルナビ（PC のみ） */
    .l-gnav {
        display: none;
    }

    /* MV */
    .p-mv {
        height: 344px;
    }

    .p-pagehead {
        height: 490px;
    }

    .p-pagehead__title {
        top: 388px;
        width: 263px;
        font-size: 30px;
    }

    /* あなたに感動を残したい */
    .p-about {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-bottom: 20px;
    }

    .p-about__inner {
        order: 1;
        display: block;
        padding-top: 41px;
    }

    .p-about__photo {
        order: 2;
        position: static;
        width: 350px;
        max-width: calc(100% - var(--gutter-sp) * 2);
        height: 234px;
        margin: 20px auto 0;
        opacity: 1;
    }

    .p-about__body {
        gap: 20px;
        padding: 0;
    }

    .p-about__title {
        font-size: 24px;
    }

    .p-about__lead {
        font-size: 19px;
        white-space: normal;
    }

    /* お知らせ / カレンダー */
    .p-info__inner {
        display: block;
        padding-top: 0;
    }

    .p-news,
    .p-calendar {
        width: 100%;
        padding: 20px 0;
    }

    .p-news__title {
        max-width: none;
    }

    .p-news__item {
        gap: 20px;
    }

    .p-calendar {
        padding-top: 60px;
        text-align: center;
    }

    .p-calendar__title {
        text-align: center;
    }

    .p-calendar__body {
        width: 100%;
        padding: 30px 10px;
    }

    /* 撮影メニュー */
    .p-menu {
        padding: 60px 0 30px;
    }

    .p-menu__list {
        flex-direction: column;
        align-items: center;
        gap: 80px;
        margin-top: 67px;
    }

    .p-menu__foot {
        margin-top: 67px;
    }

    .p-menu__foot .c-btn {
        width: 330px;
    }

    /* CTA */
    .p-cta__frame {
        width: min(330px, 100% - var(--gutter-sp) * 2);
        padding: 0;
        border: 0;
    }

    .p-cta__inner {
        display: block;
        padding: 0;
    }

    .p-cta__line {
        width: 100%;
    }

    .p-cta__line-title {
        font-size: 19px;
    }

    .p-cta__body {
        gap: 10px;
        min-height: 0;
        padding: 30px 0 0;
    }

    .p-cta__title {
        font-size: 21px;
    }

    .p-cta__hours {
        display: none;
    }

    /* アクセス */
    .p-access {
        padding: 0 0 40px;
    }

    .p-access__map {
        height: 272px;
    }

    .p-access__address {
        padding: 10px 0 40px;
        text-align: center;
    }

    /* フッター */
    .l-footer {
        padding: 36px 0 40px;
    }

    .l-footer__top {
        display: block;
    }

    .l-footer__info {
        margin-top: 26px;
    }

    .l-footer .c-snap {
        margin-top: 30px;
    }

    /* ウエディング */
    .p-wd-intro__inner {
        display: block;
        min-height: 0;
        padding: 0 0 40px;
    }

    .p-wd-intro__body {
        width: 100%;
    }

    /* 「WEDDING」は 1 語で折り返せないため画面幅に追従させる */
    .p-wd-intro__script {
        font-size: min(65px, 16vw);
    }

    .p-wd-intro__text {
        margin-top: 22px;
    }

    .p-wd-intro__photo {
        width: 100%;
        height: 240px;
        margin-top: 30px;
    }

    .p-gallery__grid {
        justify-content: space-between;
        column-gap: 17px;
        margin-top: 41px;
    }

    .p-gallery__item {
        width: calc((100% - 17px) / 2);
        height: 151px;
    }

    .p-plan__list {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 20px 10px 40px;
    }

    .p-plan__plus {
        align-self: center;
        margin-top: 0;
        padding: 20px;
    }

    .p-price {
        padding: 40px 0;
    }

    .p-price__inner {
        width: min(350px, 100% - var(--gutter-sp) * 2);
    }

    .p-price__block {
        padding: 30px 0;
    }
}

/* =========================================================
   タブレット〜小型 PC（768〜1279px）— PC レイアウトを縮小追従
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px) {
    .l-inner {
        width: min(var(--container), 100% - 60px);
    }

    .p-cta__frame {
        width: min(var(--container), 100% - 60px);
        padding-inline: 30px;
    }

    .p-cta__body {
        padding-inline: 24px;
    }

    /* LINE カードと本文の取り合いを幅に追従させる */
    .p-cta__line {
        width: clamp(272px, 38%, 350px);
    }

    .p-cta__title {
        font-size: clamp(20px, 2.5vw, 32px);
    }

    .p-cta__tel {
        font-size: clamp(18px, 2vw, 24px);
    }

    /* グローバルナビは折り返さず詰める */
    .l-gnav__list {
        gap: clamp(0px, 1.4vw, 50px);
    }

    .l-gnav__list a {
        padding: 10px 6px;
        font-size: 18px;
        white-space: nowrap;
    }

    /* 撮影メニューは 4 列を維持したまま縮小 */
    .p-menu__list {
        gap: 20px;
    }

    .c-photocard {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .c-photocard__img {
        width: 100%;
        height: auto;
        aspect-ratio: 245 / 230;
    }

    /* ギャラリーは 5 列を維持したまま縮小 */
    .p-gallery__grid {
        justify-content: space-between;
        column-gap: 22px;
    }

    .p-gallery__item {
        width: calc((100% - 88px) / 5);
        height: auto;
        aspect-ratio: 200 / 151;
    }

    .p-wd-intro__inner {
        gap: 40px;
    }

    .p-wd-intro__body {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .p-wd-intro__photo {
        flex: 0 1 45%;
        width: auto;
        min-width: 280px;
        height: auto;
        aspect-ratio: 479 / 364;
    }
}

/* プラン内容は 1100px の器に収まらなくなる時点で縦積みに切替 */
@media (min-width: 768px) and (max-width: 1099px) {
    .p-plan__list {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .p-plan__list .c-photocard {
        flex: 0 0 auto;
        width: 245px;
    }

    .p-plan__list .c-photocard__img {
        width: 245px;
        height: 230px;
        aspect-ratio: auto;
    }

    .p-plan__plus {
        align-self: center;
        margin-top: 0;
        padding: 20px;
    }
}

/* =========================================================
   PC 実寸（1280px 以上）
   ========================================================= */
@media (min-width: 1280px) {
    .p-cta__title {
        white-space: nowrap;
    }
}