@charset "UTF-8";

/* ===============================================
 * CANAL ４℃ ギフトセレクション
 *
 * ・SP基準(モバイルファースト)で書き、769px以上でPCに切り替える
 * ・既存サイトのCSSに負けないよう、すべて .gift-main 配下に限定している
 * ・命名は「gift-ブロック__要素」。ギフトセレクション / ４℃ ギフトセレクションと揃えている
 * =============================================== */

/* アンカーリンクのスムーススクロール */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---------- 変数 ---------- */
.gift-main {
    --gift-text: #3d3a39;
    --gift-line: rgba(61, 58, 57, 0.1);
    --gift-border: rgba(61, 58, 57, 0.3);
    --gift-bg-gray: #f6f6f6;
    --gift-bg-brand: #973c37;
    /* 上段メニューの色(CANAL ４℃) */
    --gift-nav-bg: #33030f;
    --gift-nav-bg-current: #bdcee0;
    --gift-nav-text-current: #33030f;
    /* ベースフォント(CANAL ４℃)。dnp-shuei-gothic-gin-std は Adobe Fonts(head で読み込み) */
    --ff-dnp-shuei-gothic-gin-std: "dnp-shuei-gothic-gin-std";
    --gift-font-base: var(--ff-dnp-shuei-gothic-gin-std), "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', Meiryo, sans-serif;
    --gift-font-en: tt-commons-pro, Helvetica, Arial, sans-serif;   /* 英字のフォント: Adobe Fonts の TT Commons Pro(キット pry7bwk) */

    /* 共通ヘッダー(固定)の高さ。メニューの固定位置とアンカーの停止位置の基準になる。
       実際の高さと違う場合は、ここを直す(PCは幅によって変わるため、script.js の GIFT_HEADER_SELECTOR で自動計測もできる) */
    --gift-header-h: 55px;
    /* 上段メニュー(おすすめ / アイテム・価格 …)の高さ */
    --gift-nav-h: 41px;
    /* アンカーの停止位置(ヘッダーの下) */
    --gift-anchor-offset: var(--gift-header-h);
    /* 商品の横並びの、左の余白(画面の端から、コンテンツの左端まで) */
    --gift-gutter: 26px;
}

/* ---------- ベース ---------- */
.gift-main {
    padding: 0;   /* 共通CSSの padding-top を打ち消す */
    color: var(--gift-text);
    background: #fff;
    font-family: var(--gift-font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}
.gift-main *,
.gift-main *::before,
.gift-main *::after { box-sizing: border-box; }
.gift-main h1,
.gift-main h2,
.gift-main h3,
.gift-main p,
.gift-main ul,
.gift-main li { margin: 0; padding: 0; border: 0; background: none; font-weight: 400; }
.gift-main ul { list-style: none; }
.gift-main img { display: block; max-width: 100%; height: auto; }
.gift-main a { color: inherit; text-decoration: none; transition: opacity 0.3s; }
.gift-main a:hover { opacity: 0.7; }
.gift-main button { font-family: inherit; }
.gift-main [hidden] { display: none !important; }

/* アンカーのジャンプ先(idを持つ要素すべて) */
.gift-main [id] { scroll-margin-top: var(--gift-anchor-offset); }

/* 出し分け(SP / PC)。改行・文言・項目の切り替えに使う */
.gift-main .gift-br-pc { display: none; }
.gift-main .gift-br-sp { display: inline; }
.gift-main .gift-pc-only { display: none !important; }

/* ユーティリティ: 表示の出し分け(PCは769px以上、SPは768px以下)。br・span・divなど、どの要素にも使える
   ・.u-sp-only: SPだけ表示(PCでは非表示)   例: <br class="u-sp-only">
   ・.u-pc-only: PCだけ表示(SPでは非表示)   例: <br class="u-pc-only"> */
@media (max-width: 768px) {
    .gift-main .u-pc-only { display: none !important; }
}
@media (min-width: 769px) {
    .gift-main .u-sp-only { display: none !important; }
}

/* ---------- 共通：セクション ---------- */
.gift-main .gift-section { padding: 80px 26px; }
.gift-main .gift-section--gray { background: var(--gift-bg-gray); }
.gift-main .gift-section--wrapping { background: #e6edf4; }   /* ラッピングサービスの背景 */
.gift-main .gift-inner { max-width: 1160px; margin: 0 auto; }

/* ---------- 共通：見出し ---------- */
.gift-main .gift-heading { text-align: center; }
.gift-main .gift-heading__sub { margin-bottom: 10px; font-size: 13px; line-height: 1; }
.gift-main .gift-heading__title { font-size: 24px; line-height: 1; }
.gift-main .gift-heading__fee { margin-top: 10px; font-size: 14px; line-height: 1; }
.gift-main .gift-heading__lead { margin-top: 20px; font-size: 13px; line-height: 1.7; }

/* ---------- 共通：画像 + テキスト ---------- */
.gift-main .gift-media { margin: 30px auto 0; }
.gift-main .gift-media img { width: 100%; }
.gift-main .gift-media__link { display: block; }
.gift-main .gift-egift__more { margin-top: 30px; }
.gift-main .gift-media--wrapping { max-width: 502px; }
.gift-main .gift-media--message { max-width: 520px; }
.gift-main .gift-media--egift { max-width: 502px; }
.gift-main .gift-text { margin-top: 30px; font-size: 13px; line-height: 1.7; text-align: left; }
/* ※ではじまる注記は、2行目以降を※の分だけ字下げする */
.gift-main .gift-text__note { margin-top: 5px; padding-left: 1em; font-size: 11px; text-indent: -1em; }

/* ---------- 共通：ボタン(テキストの下に線があるだけの、シンプルなボタン) ---------- */
.gift-main .gift-button {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--gift-text);
    background: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
}

/* ===============================================
 * MV
 * =============================================== */
.gift-main .gift-mv { padding-bottom: 50px; }
.gift-main .gift-mv__heading { font-size: 0; line-height: 0; }   /* h1(画像の代替テキスト = GIFT SELECTION) */
.gift-main .gift-mv__img { width: 100%; height: auto; aspect-ratio: 402 / 301; object-fit: cover; }
.gift-main .gift-mv__lead { margin-top: 46px; padding: 0 26px; font-size: 14px; line-height: 1.7; }

/* ===============================================
 * 商品ブロック(おすすめ / アイテム・価格 / お相手 / 誕生石)
 * ・.gift-shop が、固定メニューの範囲(おすすめ〜誕生石)
 * ・.gift-nav(上段メニュー)は .gift-shop の中で固定される
 * ・.gift-subnav(下段メニュー・タブ)は、各 .gift-block の中で固定される
 * =============================================== */
.gift-main .gift-shop { background: #fff; }

/* ----- 上段メニュー ----- */
.gift-main .gift-nav {
    position: sticky;
    top: var(--gift-header-h);
    z-index: 30;
    background: #fff;
}
.gift-main .gift-nav__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gift-main .gift-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 41px;
    padding: 0 5px;
    border-right: 1px solid #fff;
    background: var(--gift-nav-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}
.gift-main .gift-nav__item:last-child .gift-nav__link { border-right: 0; }
/* 矢印( v ) */
.gift-main .gift-nav__link::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 1.5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(135deg);
}
/* いま見ているブロックの項目 */
.gift-main .gift-nav__item.is-current .gift-nav__link {
    background: var(--gift-nav-bg-current);
    color: var(--gift-nav-text-current);
}

/* ----- ブロック ----- */
/* 上段メニューが固定されている範囲(.gift-shop)の中は、ヘッダー + 上段メニューの下で止める */
.gift-main .gift-shop [id] { scroll-margin-top: calc(var(--gift-header-h) + var(--gift-nav-h)); }

/* ブロック冒頭(画像 + タイトル)。SPは、画像の左下にタイトルを重ねる */
/* ブロックの間の線(おすすめ / アイテム・価格 / お相手 / 誕生石)。色は #3d3a39 の10%。
   次のブロックの margin-top(PC 100px)は、線の外側にあるため、border-top にすると線が余白の下に来てしまう。
   そこで、前のブロックの下に線を引き、線の上は前のブロックの下余白、線の下は次のブロックの margin-top になるようにしている。 */
.gift-main .gift-block:not(.gift-block--birthstone) { border-bottom: 1px solid var(--gift-line); }
.gift-main .gift-block__hero { position: relative; }
.gift-main .gift-block__img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.gift-main .gift-block__text { position: absolute; left: 26px; bottom: 30px; color: #fff; }
.gift-main .gift-block--birthstone .gift-block__text { color: var(--gift-text); }
.gift-main .gift-block__title { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.gift-main .gift-block__en {
    font-family: var(--gift-font-en);
    font-size: 35px;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}
.gift-main .gift-block__ja { font-size: 15px; font-weight: 500; line-height: 1; }
.gift-main .gift-block__lead { font-size: 13px; line-height: 1.7; }
.gift-main .gift-block__lead--sp { margin-top: 50px; padding: 0 26px; }
.gift-main .gift-block--recommend .gift-subnav { margin-top: 30px; }

/* ----- 下段メニュー(タブ) ----- */
.gift-main .gift-subnav {
    position: sticky;
    top: calc(var(--gift-header-h) + var(--gift-nav-h));
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(var(--gift-sub-cols, 3), minmax(0, 1fr));
    row-gap: 5px;
    padding: 10px 5px;
    background: #fff;
    box-shadow: 0 8px 5.5px rgba(0, 0, 0, 0.1);
    overflow-x: clip;   /* 万一はみ出しても、ページが横にスクロールしないようにする(影は、縦方向に出る) */
}
.gift-main .gift-subnav--recommend { --gift-sub-cols: 2; --gift-sub-w: 300px; }   /* 4タブ。PCは、全体の幅(1200px)を4等分 */
.gift-main .gift-subnav--item { --gift-sub-cols: 3; --gift-sub-w: 180px; padding-inline: 0; }   /* 7タブ。PCは、1つ180px(全体で1260px)。SPは、左右の余白なしの3等分(デザインどおり) */
.gift-main .gift-subnav--partner { --gift-sub-cols: 3; --gift-sub-w: 200px; padding-inline: 0; }
.gift-main .gift-subnav--birthstone { --gift-sub-cols: 6; --gift-sub-w: 103px; }
.gift-main .gift-subnav__tab {
    min-width: 0;
    margin: 0;
    padding: 3.5px 0;   /* 1行のときの高さは、デザインどおり(22px) */
    border: 0;
    border-right: 1px solid rgba(61, 58, 57, 0.2);
    border-radius: 0;
    background: none;
    color: var(--gift-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    /* 枠に収まらない長い項目は、改行してよい位置(HTMLの <wbr>)で折り返す。
       それでも収まらない場合だけ、文字の途中で折り返す(はみ出さない) */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: opacity 0.3s;
}
.gift-main .gift-subnav__tab:hover { opacity: 0.7; }
.gift-main .gift-subnav__tab:last-child { border-right: 0; }
.gift-main .gift-subnav__tab.is-active { text-decoration: underline; text-underline-position: from-font; }

/* SP：行の右端の項目は、区切り線を消す(1行に並ぶ数は、ブロックごとに違う) */
@media (max-width: 768px) {
    .gift-main .gift-subnav--recommend .gift-subnav__tab:nth-child(2n) { border-right: 0; }
    .gift-main .gift-subnav--item .gift-subnav__tab:nth-child(3n) { border-right: 0; }   /* 3列(3・6番目が、行の右端) */
    .gift-main .gift-subnav--birthstone .gift-subnav__tab:nth-child(6n) { border-right: 0; }
}

/* ----- パネル(タブの中身) ----- */
.gift-main .gift-panels { background: #fff; }   /* CANAL ４℃は、デザインどおり白(４℃・総合ギフトはグレー) */
.gift-main .gift-panel { padding-top: 50px; padding-bottom: 40px; }
.gift-main .gift-panel__title,
.gift-main .gift-panel__lead,
.gift-main .gift-price__label,
.gift-main .gift-stone,
.gift-main .gift-more { padding-inline: var(--gift-gutter); }
.gift-main .gift-panel__title { font-size: 18px; font-weight: 500; line-height: 1; }
.gift-main .gift-panel__lead { margin-top: 30px; font-size: 13px; line-height: 1.7; }
.gift-main .gift-panel__title + .gift-products,
.gift-main .gift-panel__title + .gift-products-box,
.gift-main .gift-panel__title + .gift-stone,
.gift-main .gift-stone + .gift-products,
.gift-main .gift-stone + .gift-products-box { margin-top: 30px; }
.gift-main .gift-panel__lead + .gift-price { margin-top: 30px; }
.gift-main .gift-more { margin-top: 30px; }
.gift-main .gift-price .gift-more { margin-top: 50px; }   /* 価格帯の中は、商品とボタンの間が50px */

/* 誕生石の説明 */
.gift-main .gift-stone__inner { padding: 16px 13px 10px; background: rgba(61, 58, 57, 0.05); }
.gift-main .gift-stone__title { font-size: 13px; font-weight: 700; line-height: 1; }
.gift-main .gift-stone__text { margin-top: 6px; font-size: 13px; line-height: 1.7; }

/* 価格ごとのまとまり */
.gift-main .gift-price { padding-bottom: 50px; }
.gift-main .gift-price__label {
    margin-bottom: 20px;
    font-family: tt-commons-pro, var(--gift-font-base);
    font-size: 14px;
    line-height: 1;
}
.gift-main .gift-price__line {
    height: 0;
    margin: 50px var(--gift-gutter) 0;   /* ボタンの下 50px */
    border: 0;
    border-top: 1px solid var(--gift-line);
}
.gift-main .gift-price:last-child { padding-bottom: 0; }
.gift-main .gift-price:last-child .gift-price__line { display: none; }

/* ----- 商品(横スクロール) ----- */
.gift-main .gift-products {
    overflow-x: auto;
    overflow-y: hidden;   /* 縦にはスクロールさせない */
    padding-left: var(--gift-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gift-main .gift-products::-webkit-scrollbar { display: none; }
.gift-main .gift-products__list { display: flex; gap: 10px; width: max-content; padding-right: 26px; }
.gift-main .gift-product { flex: 0 0 158px; width: 158px; }
.gift-main .gift-product__link { display: block; }
.gift-main .gift-product__img {
    width: 158px;
    height: 158px;
    object-fit: cover;
    -webkit-user-drag: none;
}
.gift-main .gift-product__name { margin-top: 20px; font-size: 12px; font-weight: 500; line-height: 1.3; }
/* ラベル(期間限定 / オンライン限定)。画像の下、商品名の上 */
.gift-main .gift-product__label {
    display: block;
    width: fit-content;
    max-width: 100%;   /* 長いラベルでも、カードの幅からはみ出さない(収まらないときだけ、末尾を「…」にする) */
    overflow: hidden;
    text-overflow: ellipsis;
    height: 17px;
    margin-top: 20px;
    padding: 0 4px;
    border: 1px solid rgba(61, 58, 57, 0.2);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
    font-family: var(--gift-font-en);   /* ラベルは、英字(Online Limitedなど) */
    font-size: 10px;
    line-height: 15px;
    white-space: nowrap;
}
.gift-main .gift-product__label + .gift-product__name { margin-top: 10px; }
.gift-main .gift-product__desc { margin-top: 8px; color: rgba(61, 58, 57, 0.5); font-size: 12px; line-height: 1.3; }
.gift-main .gift-product__price { margin-top: 8px; font-family: tt-commons-pro, var(--gift-font-base); font-size: 12px; font-weight: 500; line-height: 1; }
.gift-main .gift-product__price--multi { line-height: 1.5; }   /* ペア商品(L / M の2行) */
/* マウスのドラッグでも横に動かせる(script.js) */
@media (hover: hover) and (pointer: fine) {
    .gift-main .gift-products { cursor: grab; }
}
.gift-main .gift-products.is-dragging { cursor: grabbing; user-select: none; }

/* 商品の横並びの矢印(前へ / 次へ)。script.js が、.gift-products を .gift-products-box で包んで、ボタンを追加する。
   スクロールできるときだけ表示し、端まで来たら薄くして押せなくする。位置は、商品画像の縦の中央、右の矢印は、画面の右端に固定 */
.gift-main .gift-products-box { position: relative; }
/* 同じパネルに、商品の横並びが2つあるとき(掲載の切り替え前の確認用)の間隔 */
.gift-main .gift-products-box + .gift-products-box { margin-top: 50px; }
.gift-main .gift-products__arrow {
    position: absolute;
    top: 79px;   /* 画像(158px)の縦の中央 */
    z-index: 5;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0;
    border: 0;
    background: none;   /* 背景なし(矢印だけ)。押せる範囲は、40×40px */
    color: var(--gift-text);
    cursor: pointer;
    transition: opacity 0.3s;
}
.gift-main .gift-products__arrow[hidden] { display: none; }
.gift-main .gift-products__arrow:hover { opacity: 0.7; }
.gift-main .gift-products__arrow:disabled { opacity: 0.3; cursor: default; }
.gift-main .gift-products__arrow--prev { left: 8px; }
.gift-main .gift-products__arrow--next { right: 8px; }   /* 画面の右端に固定(画面の幅が変わっても、同じ位置) */
/* 矢印の記号(コラム・ボタンの矢印と同じ作り。少し大きい)。疑似要素は、共通CSSに上書きされることがあるため、実際の要素(span)で描く */
.gift-main .gift-products__arrow-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 0 solid currentColor;
    pointer-events: none;
}
.gift-main .gift-products__arrow--prev .gift-products__arrow-icon { border-width: 0 0 1px 1px; transform: translateX(2px) rotate(45deg); }
.gift-main .gift-products__arrow--next .gift-products__arrow-icon { border-width: 1px 1px 0 0; transform: translateX(-2px) rotate(45deg); }

/* ===============================================
 * ホリデーコレクション限定ラッピング / 限定グッズ
 * 赤茶色の背景に、白いカードが2枚
 * =============================================== */
.gift-main .gift-limited { padding: 100px 26px; background: var(--gift-bg-brand); }
.gift-main .gift-limited + .gift-limited { padding-top: 0; }   /* 11/12版と11/19版を、続けて表示するとき(切り替え前の確認用) */
.gift-main .gift-limited__block { max-width: 1160px; margin: 0 auto; text-align: center; }
.gift-main .gift-limited__block + .gift-limited__block { margin-top: 60px; }
.gift-main .gift-limited__title { color: #fff; font-family: var(--gift-font-en); font-size: 30px; line-height: 1.3; }   /* .gift-heading__title(24px)より大きく、.gift-block__en(35px)より小さく */
.gift-main .gift-limited__lead { margin-top: 24px; color: #fff; font-size: 14px; line-height: 1.7; }
.gift-main .gift-limited__card { margin-top: 31px; padding: 40px 20px; background: #fff; }
.gift-main .gift-limited__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 10px;
}
/* SP: 1個だけの行は、中央に置く(幅は、ほかの商品と同じ) */
@media (max-width: 768px) {
    .gift-main .gift-limited__item--solo { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }
}
.gift-main .gift-limited__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.gift-main .gift-limited__item { display: flex; flex-direction: column; }   /* 同じ行で、名前の行数が違っても、リンクを下にそろえる */
.gift-main .gift-limited__name { margin-top: 9px; font-size: 12px; font-weight: 500; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.gift-main .gift-limited__sub { display: block; font-size: 10px; font-weight: 400; }   /* 色などの2行目(小さい文字) */
.gift-main .gift-limited__price { margin-top: 8px; font-family: tt-commons-pro, var(--gift-font-base); font-size: 12px; font-weight: 500; line-height: 1; }
.gift-main .gift-limited__notes { margin-top: 40px; font-size: 11px; line-height: 1.7; }   /* ラッピングの「※商品のデザインによって…」(.gift-text__note)と同じ大きさ */
.gift-main .gift-limited__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    margin-top: auto;   /* 同じ行の、いちばん下にそろえる */
    padding-top: 15px;   /* 価格との間隔 */
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gift-text);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}
/* 矢印( > ) */
.gift-main .gift-limited__link::after {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-left: -1px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

/* ===============================================
 * ラッピングサービス(複数のブロックがあるときは、線で区切る)
 * =============================================== */
.gift-main .gift-wrapping__more { margin-top: 30px; }
.gift-main .gift-wrapping__line {
    height: 0;
    margin: 50px 0;
    border: 0;
    border-top: 1px solid var(--gift-line);
}

/* ===============================================
 * ショッピングガイド
 * =============================================== */
.gift-main .gift-guide__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
}
.gift-main .gift-guide__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--gift-border);
    background: #fff;
}
.gift-main .gift-guide__body { flex: 1 1 auto; min-width: 0; }
.gift-main .gift-guide__title { font-size: 16px; font-weight: 500; line-height: 1; }
.gift-main .gift-guide__text { margin-top: 10px; font-size: 13px; line-height: 1.7; }
.gift-main .gift-guide__more { margin-top: 8px; font-size: 13px; line-height: 1.7; }   /* 「詳しくはこちら」のテキストリンク */
.gift-main .gift-guide__link { display: inline; font-weight: 700; text-decoration: underline; }
/* アイコンの幅はCSSで指定する(width属性だけだと、サイト共通CSSの img { width: 100% } などに負けて大きくなる) */
.gift-main .gift-guide__icon { flex: 0 0 auto; max-width: none; height: auto; }
.gift-main .gift-guide__icon--size { width: 40px; }
.gift-main .gift-guide__icon--warranty { width: 46px; }
.gift-main .gift-guide__icon--repair { width: 42px; }
.gift-main .gift-guide__icon--delivery { width: 53px; }
.gift-main .gift-guide__icon--shipping { width: 43px; }

/* ===============================================
 * ふわっと表示(スクロールで画面に入った要素が、フェードインしながら少し上がる)
 * ・対象は、HTMLで .js-fade を付けた要素
 * ・is-fade-ready は、JSが動いたときだけ付く(JSが動かない環境では、最初から表示される)
 * =============================================== */
.gift-main.is-fade-ready .js-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.gift-main.is-fade-ready .js-fade.is-visible {
    opacity: 1;
    transform: none;
}
/* アンカーで移動した先は、アニメーションなしですぐ表示する */
.gift-main.is-fade-ready .js-fade.is-instant { transition: none; }

/* ===============================================
 * PC (769px以上)
 * =============================================== */
@media (min-width: 769px) {
    .gift-main {
        --gift-header-h: 60px;
        --gift-nav-h: 44px;
        /* 商品の横並び・見出しの、左の余白。1440pxのデザイン値(140px)で止める(それより広い画面でも、左の余白は広げない) */
        --gift-gutter: max(20px, min(140px, calc((100% - 1160px) / 2)));
    }
    .gift-main .gift-br-pc { display: inline; }
    .gift-main .gift-br-sp { display: none; }
    .gift-main .gift-pc-only { display: revert !important; }
    .gift-main .gift-sp-only { display: none !important; }

    /* 共通 */
    .gift-main .gift-section { padding: 150px 20px; }
    .gift-main .gift-heading__sub { font-size: 16px; }
    .gift-main .gift-heading__title { font-size: 32px; }
    .gift-main .gift-heading__lead { font-size: 14px; }
    .gift-main .gift-media { margin-top: 50px; }
    .gift-main .gift-text { margin-top: 50px; font-size: 14px; text-align: center; }
    .gift-main .gift-text__note { padding-left: 0; font-size: 12px; text-indent: 0; }

    /* MV */
    .gift-main .gift-mv { padding-bottom: 88px; }
    .gift-main .gift-mv__img { aspect-ratio: 1440 / 617; }
    .gift-main .gift-mv__lead { margin-top: 100px; padding: 0 20px; font-size: 16px; text-align: center; }

    /* 上段メニュー */
    .gift-main .gift-nav { border-bottom: 1px solid var(--gift-line); }
    .gift-main .gift-nav__link { flex-direction: row; gap: 20px; height: 43px; font-size: 14px; }
    /* 矢印は、テキストの右横(SPは下) */
    .gift-main .gift-nav__link::after { margin: 0; transform: translateY(-2.5px) rotate(135deg); }

    /* ブロック */
    .gift-main .gift-block { margin-top: 100px; }
    /* 冒頭(画像 + タイトル)：幅を固定して2等分し、左に文字・右に画像を置く。
       画像の位置が、どのブロックでも同じになる */
    .gift-main .gift-block__hero {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 30px;
        width: min(1030px, calc(100% - 40px));
        margin-inline: auto;
    }
    .gift-main .gift-block__img {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        width: 100%;
        max-width: 500px;
        height: auto;
    }
    .gift-main .gift-block__text {
        position: static;
        grid-column: 1;
        grid-row: 1;
        justify-self: center;   /* 文字は、左の列の中で中央揃え */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        max-width: 100%;
        color: var(--gift-text);
        text-align: center;
    }
    .gift-main .gift-block__title { gap: 10px; align-items: center; }
    .gift-main .gift-block__en { font-size: 40px; letter-spacing: 0.05em; }
    .gift-main .gift-block__ja { font-size: 18px; }
    .gift-main .gift-block__lead { font-size: 14px; }
    .gift-main .gift-block--recommend .gift-subnav,
    .gift-main .gift-subnav { margin-top: 80px; }

    /* 下段メニュー(タブ) */
    .gift-main .gift-subnav { display: flex; justify-content: center; padding: 15px 0; }
    .gift-main .gift-subnav__tab { flex: 1 1 0; max-width: var(--gift-sub-w); padding: 3px 5px; font-size: 14px; }   /* 1行の高さ24px */

    /* パネル */
    .gift-main .gift-panel { padding-top: 100px; padding-bottom: 100px; }
    .gift-main .gift-panel__title { font-size: 24px; }
    /* 広い画面で、説明文・区切り線が、横に広がりすぎないように(幅は、コンテンツ幅の1160pxまで)。
       誕生石の説明ボックスは、左右の余白が同じ(140px)になるよう、幅の上限を決めない */
    .gift-main .gift-panel__lead { max-width: calc(1160px + 2 * var(--gift-gutter)); }
    .gift-main .gift-price__line { max-width: 1160px; }
    .gift-main .gift-panel__lead { margin-top: 30px; font-size: 14px; }
    .gift-main .gift-panel__title + .gift-products,
    .gift-main .gift-panel__title + .gift-products-box,
    .gift-main .gift-panel__title + .gift-stone,
    .gift-main .gift-stone + .gift-products,
    .gift-main .gift-stone + .gift-products-box { margin-top: 50px; }
    .gift-main .gift-panel__lead + .gift-price { margin-top: 50px; }

    .gift-main .gift-stone__inner { padding: 18px 20px 13px; }
    .gift-main .gift-stone__title { font-size: 14px; }
    .gift-main .gift-stone__text { margin-top: 5px; font-size: 14px; }

    .gift-main .gift-price { padding-bottom: 80px; }
    .gift-main .gift-price__label { margin-bottom: 20px; font-size: 18px; }
    .gift-main .gift-price__line { margin-top: 50px; }
    .gift-main .gift-more { margin-top: 50px; }
    .gift-main .gift-price:last-child { padding-bottom: 0; }

    .gift-main .gift-products__list { gap: 20px; padding-right: 20px; }
    .gift-main .gift-product { flex-basis: 260px; width: 260px; }
    .gift-main .gift-product__img { width: 260px; height: 260px; }
    .gift-main .gift-product__name { font-size: 14px; }
    .gift-main .gift-product__label { height: 20px; padding: 0 5px; border-radius: 4px; font-size: 12px; line-height: 18px; }
    .gift-main .gift-products__arrow { top: 130px; }   /* 画像(260px)の縦の中央 */
    .gift-main .gift-products__arrow--prev { left: max(8px, calc(var(--gift-gutter) - 48px)); }   /* コンテンツの左の外側 */
    .gift-main .gift-products__arrow--next { right: 24px; }   /* 画面の右端に固定 */
    .gift-main .gift-product__desc { font-size: 14px; }
    .gift-main .gift-product__price { font-size: 14px; }

    /* HOLIDAY SPECIAL WRAPPING / GOODS */
    .gift-main .gift-limited { padding: 150px 20px; }
    .gift-main .gift-limited + .gift-limited { padding-top: 0; }
    .gift-main .gift-limited__block + .gift-limited__block { margin-top: 100px; }
    .gift-main .gift-limited__title { font-size: 36px; }   /* .gift-heading__title(32px)より大きく、.gift-block__en(40px)より小さく */
    .gift-main .gift-limited__lead { margin-top: 17px; }
    .gift-main .gift-limited__card { margin-top: 50px; padding: 80px; }
    /* 5列。最後の行が、5個に満たないときは、左にそろえる */
    .gift-main .gift-limited__list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px 20px; }
    .gift-main .gift-limited__item { width: calc((100% - 80px) / 5); }
    .gift-main .gift-limited__name { font-size: 14px; }
    .gift-main .gift-limited__sub { font-size: 12px; }
    .gift-main .gift-limited__price { font-size: 14px; }
    .gift-main .gift-limited__notes { margin-top: 60px; font-size: 12px; }
    .gift-main .gift-limited__link { font-size: 12px; }

    /* ラッピングサービス */
    .gift-main .gift-wrapping { max-width: 760px; margin: 0 auto; }
    .gift-main .gift-wrapping__more,
    .gift-main .gift-egift__more { margin-top: 50px; }
    .gift-main .gift-wrapping__line { max-width: 588px; margin: 100px auto; }

    /* ショッピングガイド */
    .gift-main .gift-guide__list { grid-template-columns: repeat(3, 1fr); margin-top: 50px; }
    .gift-main .gift-guide__text,
    .gift-main .gift-guide__more { font-size: 14px; }
}

/* 狭いPC幅：HOLIDAY SPECIAL WRAPPING / GOODSは、3列 */
@media (min-width: 769px) and (max-width: 1100px) {
    .gift-main .gift-limited__card { padding: 60px 40px; }
    .gift-main .gift-limited__item { width: calc((100% - 40px) / 3); }
}

/* タブレット幅：ガイドは2列 */
@media (min-width: 769px) and (max-width: 1100px) {
    .gift-main .gift-guide__list { grid-template-columns: repeat(2, 1fr); }
}