@charset "UTF-8";
/*
 * 熨斗（のし）についてのページ（固定ページ スラッグ: noshi）専用スタイル
 * デザイン：Figma「noshi」の「熨斗について｜PC（Hallmark full）」「熨斗について｜SP（Hallmark full）」（2026-11-13 社内承認済み）
 *
 * ・すべて .nsh の中に閉じ、サイト共通のスタイルに影響させない（functions.php で is_page('noshi') のときだけ読む）
 * ・テーマの html は font-size が画面幅連動（calc(1000vw / 1400)）のため rem は使わず px / clamp() / cqw で指定する
 * ・リセットは :where() で詳細度0にし、部品側の margin 指定を打ち消さないようにする
 * ・書体：Figma の Noto Serif JP → サイトが読み込み済みの Typekit「ひな明朝」、Noto Sans JP → 「Zen 角ゴシック New」に置き換える
 *   （書体を追加で読み込まないため。Zen 角ゴシック New は 400・700 だけなので、Medium（500）の箇所は 400 で表示される）
 * ・幅の区切りはテーマと同じ 960px（タブレット）・699px（スマホ）
 */

.nsh {
    --nsh-green: #183e32;      /* 深緑（ヒーロー・見出し・最後の帯） */
    --nsh-gold: #c4a563;       /* 金（罫・手順の番号） */
    --nsh-goldlight: #dfcb99;  /* 淡い金（ボタン・図の引き出し線） */
    --nsh-paper: #fffcf4;      /* 掛け紙の白・深緑の上の文字 */
    --nsh-cream: #fbf8f1;      /* 目次・FAQ の地 */
    --nsh-beige: #f5f0e4;      /* 熨斗の見本の地 */
    --nsh-ondark: #d6ddd1;     /* 深緑の上の補足文字 */
    --nsh-muted: #706e65;      /* 補足文字 */
    --nsh-text: #333;          /* 本文 */
    --nsh-red: #965245;        /* 紅（ひとこと・Q） */
    --nsh-grey: #626a65;       /* 弔事の見本の罫・ひとこと */
    --nsh-rule: #d9cbaa;       /* 区切りの細い罫 */
    --nsh-serif: hina-mincho, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --nsh-sans: zen-kaku-gothic-new, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;

    color: var(--nsh-text);
    font-family: var(--nsh-sans);
    font-size: 16px;
    line-height: 1.9;
    /* サイト共通の body に letter-spacing: 0.1em があるため、Figma どおり字間なしに戻す */
    letter-spacing: normal;
    background: #fff;
    overflow-x: clip;
}

/* ---------- リセット（詳細度0） ---------- */
:where(.nsh) h1, :where(.nsh) h2, :where(.nsh) h3, :where(.nsh) p, :where(.nsh) ul, :where(.nsh) ol,
:where(.nsh) figure, :where(.nsh) dl, :where(.nsh) dt, :where(.nsh) dd { margin: 0; padding: 0; }
:where(.nsh) ul, :where(.nsh) ol { list-style: none; }
:where(.nsh) img { display: block; max-width: 100%; height: auto; }
:where(.nsh) a { color: inherit; }
:where(.nsh) h1, :where(.nsh) h2, :where(.nsh) h3 { font-weight: 400; }
.nsh *, .nsh *::before, .nsh *::after { box-sizing: border-box; }

/* 目次から飛んだとき、固定ヘッダーに見出しが隠れないようにする。動きを減らす設定の人にはなめらかなスクロールをしない */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
.nsh [id] { scroll-margin-top: 130px; }

/* 中身の幅：Figma は 1440px 幅で左右 120px（中身 1200px） */
.nsh-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }

/* キーボード操作時の位置がわかるよう、フォーカスは常に見せる */
.nsh a:focus-visible { outline: 2px solid var(--nsh-gold); outline-offset: 3px; }

/* ---------- ボタン（ヒーローと最後の帯で共通） ---------- */
.nsh-actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
.nsh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 18px 36px;
    font-family: var(--nsh-sans); font-size: 16px; font-weight: 500; line-height: 1.5; text-decoration: none;
    border: 1px solid var(--nsh-goldlight);
    transition: background-color .2s, color .2s;
}
.nsh-btn--primary { color: var(--nsh-green); background: var(--nsh-goldlight); }
.nsh-btn--primary:hover { color: var(--nsh-green); background: #e9dab6; }
.nsh-btn--secondary { color: var(--nsh-paper); background: transparent; }
.nsh-btn--secondary:hover { color: var(--nsh-green); background: var(--nsh-goldlight); }

/* ---------- ヒーロー ---------- */
.nsh-hero { padding: 28px 0 96px; color: var(--nsh-paper); background: var(--nsh-green); }
.nsh-crumb ol { display: flex; flex-wrap: wrap; color: var(--nsh-ondark); font-size: 13px; line-height: 1.6; }
.nsh-crumb li + li::before { content: "/"; margin-inline: 1em; }
.nsh-crumb a { text-decoration: none; }
.nsh-crumb a:hover { text-decoration: underline; }
.nsh-hero__row { display: flex; align-items: center; gap: 80px; margin-top: 48px; }
.nsh-hero__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 24px; min-width: 0; }
.nsh-hero__ttl { font-family: var(--nsh-serif); font-size: clamp(30px, 3.9vw, 56px); line-height: 1.4; color: var(--nsh-paper); }
.nsh-hero__lead { color: var(--nsh-gold); font-size: 18px; line-height: 1.9; }
.nsh-hero__lead span { display: block; }
.nsh-hero__free { color: #fbf8f1; font-size: 18px; font-weight: 500; line-height: 1.6; }

/* 掛け紙の図（Figma 15:58 の 470×420 をそのまま再現。中は絶対配置） */
.nsh-diagram { position: relative; flex: none; width: 470px; height: 420px; }
.nsh-diagram__paper { position: absolute; left: 0; top: 0; width: 260px; height: 420px; background: var(--nsh-paper); }
.nsh-diagram__mizuhiki { position: absolute; left: 0; top: 163px; width: 260px; height: 80px; }
.nsh-diagram__mizuhiki img { width: 100%; height: 100%; }
/* 熨斗飾り：36×64 の枠の中央に、18×58 の飾りを 14° 傾けて置く */
.nsh-diagram__kazari { position: absolute; left: 203px; top: 22px; display: grid; place-items: center; width: 36px; height: 64px; }
.nsh-diagram__kazari img { transform: rotate(14deg); }
/* 表書き・お名前は縦書き（1文字の送り＝文字の 1.18 倍。Figma の行送りと同じ） */
.nsh-diagram__omote, .nsh-diagram__name {
    position: absolute; left: 130px; transform: translateX(-50%);
    color: var(--nsh-text); font-family: var(--nsh-serif); line-height: 1; letter-spacing: .18em;
    writing-mode: vertical-rl; text-orientation: upright;
}
.nsh-diagram__omote { top: 44px; font-size: 36px; }
.nsh-diagram__name { top: 246px; font-size: 24px; }
.nsh-diagram__line { position: absolute; height: 1px; background: var(--nsh-goldlight); }
.nsh-diagram__line--omote { left: 160px; top: 106px; width: 140px; }
.nsh-diagram__line--name { left: 156px; top: 304px; width: 144px; }
.nsh-diagram__label { position: absolute; left: 312px; color: var(--nsh-paper); font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.nsh-diagram__label--omote { top: 94px; }
.nsh-diagram__label--name { top: 292px; }
.nsh-diagram__label span { display: block; }

/* ---------- 目次 ---------- */
.nsh-index { padding: 40px 0 48px; background: var(--nsh-cream); }
.nsh-index__label { color: var(--nsh-muted); font-size: 14px; line-height: 1.6; }
/* 目次は3項目（2026-11-13 改訂で「表書き・名入れ」を削除）。Figma の1項目の幅（276px）は保たず、中身の幅を3等分する */
.nsh-index__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.nsh-index__list a {
    display: block; padding: 4px 0 14px;
    color: var(--nsh-green); font-size: 17px; font-weight: 500; line-height: 1.6; text-decoration: none;
    border-bottom: 1px solid var(--nsh-gold);
}
.nsh-index__list a:hover { color: var(--nsh-red); }

/* ---------- 章の共通 ---------- */
.nsh-sec { padding: 112px 0; }
.nsh-heading { display: flex; flex-direction: column; gap: 16px; }
.nsh-heading__ttl { color: var(--nsh-green); font-family: var(--nsh-serif); font-size: 36px; line-height: 1.5; }
/* 見出しは読点などの切れ目でだけ折り返す（「熨斗を選 / ぶ」のように1文字だけ落ちないように）。収まらないときは overflow-wrap で折る */
.nsh-hero__ttl, .nsh-heading__ttl, .nsh-invite__ttl { word-break: keep-all; overflow-wrap: anywhere; }
.nsh-heading__lead { color: var(--nsh-muted); font-size: 17px; line-height: 1.8; }
.nsh-note { color: var(--nsh-muted); font-size: 14px; line-height: 1.8; }

/* ---------- 01 熨斗の種類 ---------- */
.nsh-types__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.nsh-type { display: flex; flex-direction: column; gap: 16px; }
/* 見本：上に 3px の色罫、生成りの地に画像を収める（高さ 172px） */
.nsh-type__sample { display: grid; place-items: center; height: 172px; background: var(--nsh-beige); border-top: 3px solid var(--nsh-gold); }
.nsh-type--red .nsh-type__sample { border-top-color: var(--nsh-red); }
.nsh-type--grey .nsh-type__sample { border-top-color: var(--nsh-grey); }
/* 画像の大きさの枠（「御供」を画像に対する割合で重ねるため、画像と同じ大きさにする） */
/* 幅の上限 400px：見本の高さ（169px）に収まる幅。これを超えると画像の左右に余白が出て「御供」の位置がずれるため */
.nsh-type__img { position: relative; display: block; width: min(100%, 400px); container-type: inline-size; }
.nsh-type__img img { width: 100%; }
.nsh-type__name { color: var(--nsh-green); font-family: var(--nsh-serif); font-size: 28px; line-height: 1.5; }
.nsh-type__catch { color: var(--nsh-red); font-size: 15px; font-weight: 500; line-height: 1.6; }
.nsh-type--grey .nsh-type__catch { color: var(--nsh-grey); }
.nsh-type__text { font-size: 16px; line-height: 1.9; }
.nsh-type__uses { display: flex; gap: 20px; padding-top: 16px; border-top: 1px solid var(--nsh-rule); }
.nsh-type__uses dt { flex: none; color: var(--nsh-muted); font-size: 14px; line-height: 1.8; white-space: nowrap; }
.nsh-type__uses dd { font-size: 15px; line-height: 1.8; }
.nsh-type__uses dd span { display: block; }

/* 黒白の見本：表書きを消した専用画像（noshi/noshi-img04.webp）の表書きの位置に「御供」を重ねる（位置は画像 511×215 に対する割合）
   2026-11-13：画像から「御礼」を消したので、隠すための白い下地は使わない。文字だけを置く */
.nsh-kuyo {
    position: absolute; top: 11.07%; height: 20%;
    display: flex; justify-content: center;
    color: var(--nsh-text); font-family: var(--nsh-serif); font-size: 2.25cqw; line-height: 1.6;
    writing-mode: vertical-rl; text-orientation: upright;
}
.nsh-kuyo--1 { left: 41.88%; width: 5.87%; }
.nsh-kuyo--2 { left: 72.60%; width: 3.52%; }

/* 表書きの例（PC は3列の表） */
.nsh-examples { margin-top: 56px; }
.nsh-examples__ttl { color: var(--nsh-green); font-family: var(--nsh-serif); font-size: 22px; line-height: 1.5; }
.nsh-examples__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nsh-examples__table th {
    padding: 28px 24px 16px 0; color: var(--nsh-muted); font-size: 14px; font-weight: 400; line-height: 1.7; text-align: left;
    border-bottom: 1px solid var(--nsh-gold);
}
.nsh-examples__table td { padding: 16px 24px 16px 0; font-size: 16px; line-height: 1.7; vertical-align: top; border-bottom: 1px solid var(--nsh-rule); }
.nsh-examples__table th:last-child, .nsh-examples__table td:last-child { padding-right: 0; }
.nsh-examples__omote { color: var(--nsh-green); font-family: var(--nsh-serif); font-size: 18px; line-height: 1.6; }

/* ---------- 02 ご注文時の指定方法 ---------- */
.nsh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 40px; }
.nsh-step { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--nsh-green); }
.nsh-step__num { color: var(--nsh-gold); font-family: var(--nsh-serif); font-size: 40px; line-height: 1.2; }
.nsh-step__ttl { color: var(--nsh-green); font-family: var(--nsh-serif); font-size: 24px; line-height: 1.5; }
.nsh-step__text { font-size: 16px; line-height: 1.9; }
.nsh-order .nsh-note { margin-top: 40px; }

/* ---------- 03 よくあるご質問 ---------- */
.nsh-faq { background: var(--nsh-cream); }
.nsh-faq__list { margin-top: 40px; border-top: 1px solid var(--nsh-rule); }
.nsh-faq__item { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--nsh-rule); }
.nsh-faq__q, .nsh-faq__a { display: flex; align-items: flex-start; gap: 20px; }
.nsh-faq__mark { flex: none; width: 24px; font-family: var(--nsh-serif); }
.nsh-faq__q { color: var(--nsh-green); font-size: 18px; font-weight: 500; line-height: 1.7; }
.nsh-faq__q .nsh-faq__mark { color: var(--nsh-red); font-size: 22px; line-height: 1.4; }
.nsh-faq__a { font-size: 16px; line-height: 1.9; }
.nsh-faq__a .nsh-faq__mark { color: var(--nsh-muted); font-size: 20px; line-height: 1.5; }
.nsh-faq__a a { color: var(--nsh-green); font-weight: 500; text-underline-offset: .2em; }

/* ---------- 最後の帯 ---------- */
.nsh-invite { padding: 96px 0; color: var(--nsh-paper); background: var(--nsh-green); }
.nsh-invite__ttl { font-family: var(--nsh-serif); font-size: 36px; line-height: 1.5; }
.nsh-invite__lead { margin-top: 20px; color: var(--nsh-ondark); font-size: 17px; line-height: 1.8; }
.nsh-invite .nsh-actions { margin-top: 20px; padding-top: 20px; }

/* ===================== タブレット（960px 以下） ===================== */
@media (max-width: 960px) {
    /* 図はテキストの下へ。3列に並ぶ部品は2列（熨斗の種類）・1列（手順）に。目次は3列のまま間隔だけ詰める */
    .nsh-hero__row { flex-direction: column; align-items: flex-start; gap: 48px; }
    .nsh-types__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nsh-index__list { gap: 16px; }
    .nsh-steps { grid-template-columns: 1fr; gap: 32px; }
}

/* ===================== スマホ（699px 以下）：Figma「熨斗について｜SP」 ===================== */
@media (max-width: 699px) {
    .nsh-wrap { width: min(1200px, 100% - 40px); }

    .nsh-hero { padding: 16px 0 56px; }
    .nsh-crumb ol { font-size: 12px; }
    .nsh-hero__row { gap: 24px; margin-top: 20px; }
    .nsh-hero__text { gap: 16px; padding-top: 16px; }
    .nsh-hero__ttl { font-size: 30px; }
    .nsh-hero__lead { color: var(--nsh-ondark); font-size: 16px; }
    .nsh-hero__lead span { display: inline; }
    .nsh-hero__free { color: var(--nsh-goldlight); font-size: 16px; }
    .nsh-actions { flex-direction: column; gap: 12px; padding-top: 8px; width: 100%; }
    .nsh-btn { width: 100%; }

    /* 掛け紙の図（Figma 22:90 の 335×280） */
    .nsh-diagram { width: 335px; max-width: 100%; height: 280px; }
    .nsh-diagram__paper { width: 170px; height: 280px; }
    .nsh-diagram__mizuhiki { top: 110.27px; width: 170px; height: 52.31px; }
    .nsh-diagram__kazari { left: 134px; top: 14px; width: 23.54px; height: 41.85px; }
    .nsh-diagram__omote, .nsh-diagram__name { left: 85px; }
    .nsh-diagram__omote { top: 26px; font-size: 26px; }
    .nsh-diagram__name { top: 164px; font-size: 18px; }
    .nsh-diagram__line--omote { left: 108px; top: 72px; width: 92px; }
    .nsh-diagram__line--name { left: 104px; top: 206px; width: 96px; }
    .nsh-diagram__label { left: 208px; font-size: 14px; }
    .nsh-diagram__label--omote { top: 62px; }
    .nsh-diagram__label--name { top: 196px; }

    .nsh-index { padding: 28px 0 32px; }
    .nsh-index__label { font-size: 13px; }
    /* スマホの目次は Figma の SP と同じ2列（3項目なので2段目は1つ） */
    .nsh-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }

    .nsh-sec { padding: 64px 0; }
    .nsh-heading { gap: 12px; }
    .nsh-heading__ttl { font-size: 26px; }
    .nsh-heading__lead { font-size: 16px; }

    .nsh-types__list { grid-template-columns: 1fr; margin-top: 32px; }
    .nsh-examples { margin-top: 32px; }
    .nsh-examples__ttl { font-size: 20px; }
    /* 表を「表書き（大）→ 場面・熨斗（小）」の縦並びに組み替える */
    .nsh-examples__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .nsh-examples__table, .nsh-examples__table tbody { display: block; }
    .nsh-examples__table { margin-top: 12px; }
    .nsh-examples__table tr { display: flex; flex-wrap: wrap; column-gap: 1em; row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--nsh-rule); }
    .nsh-examples__table td { display: block; padding: 0; border: 0; color: var(--nsh-muted); font-size: 14px; }
    .nsh-examples__table td.nsh-examples__omote { order: -1; width: 100%; color: var(--nsh-green); font-size: 18px; }

    .nsh-order .nsh-note { margin-top: 32px; }
    .nsh-steps { margin-top: 32px; }

    .nsh-faq__list { margin-top: 32px; }
    .nsh-faq__q, .nsh-faq__a { gap: 12px; }
    .nsh-faq__q { font-size: 16px; }

    .nsh-invite { padding: 64px 0; }
    .nsh-invite__ttl { font-size: 26px; }
    .nsh-invite__lead { margin-top: 16px; font-size: 16px; }
    .nsh-invite .nsh-actions { margin-top: 0; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nsh-btn { transition: none; }
}