@charset "UTF-8";

/* ======================================
   ベース
   ====================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  /* ページ内アンカーは全部スムーズスクロール。
     個別のJSは書かない（リンクにも scrollIntoView にも同じように効く）。
     飛び先が固定ヘッダーに隠れないよう、対象側に scroll-margin-top を持たせること */
  scroll-behavior: smooth;
}
/* 動きを減らす設定の環境では一瞬で移動させる（酔い・めまいの配慮） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  line-height: 1.7;
  color: #333;
  background: #fff;
}
a { color: inherit; text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* コンテンツ幅1200px（1440時に左右120px空き） */
.inner { max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* 固定ヘッダー(76px)の分だけ本文を下げる */
.l-main { min-height: 60vh; padding-top: 76px; }


/* ============================================
   -show（画面幅で表示/非表示切り替え）
   ============================================ */

@media (min-width: 1061px) {
  .-show-max1060 {
    display: none !important;
  }
}

@media (min-width: 961px) {
  .-show-max960 {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .-show-min961 {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}


/* ============================================
   screen-reader-text（画面から隠して読み上げには残す）
   ============================================ */
/*
 * WordPressが出力する補助用のラベル（ページャーの「投稿ナビゲーション」等）を
 * 画面から隠すためのユーティリティ。WordPress標準と同じ実装にしてある。
 * display:none / visibility:hidden にするとスクリーンリーダーからも消えるので使わない。
 * 1pxの箱に押し込んだうえで clip-path で切り抜き、隣接コンテンツを押しのけないよう
 * negative margin で場所も取らせない。word-wrap は1文字ずつの縦積みを防ぐため。
 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  word-wrap: normal !important;
}


/* ======================================
   ヘッダー
   ====================================== */

/* ログイン中は WordPress の管理バーがヘッダーを覆ってしまい、
   ヘッダーぶんの余白だけが空いて見える。その分だけヘッダーを下げる。

   幅によって管理バーの挙動が違うので、下げてよい幅を限定する。
     ・783px以上 … position:fixed / 高さ32px  → 32px下げる
     ・601〜782px … position:fixed / 高さ46px  → 46px下げる
     ・600px以下 … **position:absolute**（admin-bar.css:1111）でスクロールと一緒に
                    流れていくため、下げたままだとスクロール後にヘッダーの上へ
                    46pxの空白が残る。ここでは下げない。 */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .header { top: 0; }
}

/* --- ヘッダー：バー --- */
/* ヘッダーは常に固定。最上部ではMENUのみ、スクロールでロゴとH1が現れる。
   ロゴ・キャッチ・MENUは一列に並ぶだけなので flex で組み、個別の絶対配置は持たせない。
   背景はトップのMV表示中だけ透明で、それ以外は白 */
.header {
  display: flex;
  align-items: center;
  gap: 47px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  padding: 0 35px 0 50px;
  background: transparent;
  transition: background-color 0.3s;
}
.header.is-fixed,
.header.is-menu-open { background: #fff; }

/* PCではラッパーを透過させ、ロゴ・キャッチ・MENUを一列の flex アイテムとして扱う */
.header__start { display: contents; }

/* ロゴとキャッチも同じタイミングで出す（DOMには常に存在させる） */
.header__logo,
.header__catch {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.header.is-fixed .header__logo,
.header.is-fixed .header__catch,
.header.is-menu-open .header__logo,
.header.is-menu-open .header__catch {
  opacity: 1;
  visibility: visible;
}

/* --- ヘッダー：ロゴ --- */
.header__logo { flex-shrink: 0; }

/* --- ヘッダー：キャッチ（H1） --- */
/* 幅が足りなくなったらMENUボタンを押し出さず、ここが縮んで省略される */
.header__catch {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.4px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- ヘッダー：MENUボタン --- */
/* ヘッダー自体が fixed なので、ボタンは flex の末尾に置くだけでよい */
.menu-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 33px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* button はフォントを継承しないので明示（MENUラベルを本文と同じ Noto Serif JP に） */
  font-family: inherit;
}

/* 2本線。open時は×に変形する */
.menu-btn__icon {
  display: block;
  position: relative;
  width: 31px;
  height: 9px;
  margin-inline: auto;
}
.menu-btn__icon::before,
.menu-btn__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 31px;
  height: 1px;
  background: #333;
  transition: transform 0.3s;
}
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { top: 8px; }

/* open時はラベルが消えるぶん、×がヘッダーの上下中央に来るよう下げる */
.menu-btn__icon { transition: transform 0.3s; }
.menu-btn[aria-expanded="true"] .menu-btn__icon { transform: translateY(10px); }

.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }

.menu-btn__label {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-align: center;
  color: #000;
}
.menu-btn[aria-expanded="true"] .menu-btn__label { visibility: hidden; }

/* 閉じるラベルは open のときだけ、見た目に出さず支援技術にだけ渡す */
.menu-btn__label-close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__label-close {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ======================================
   グローバルナビ（ハンバーガー）
   ====================================== */
/* 覆うのは画面の右半分だけ。左半分は下のページがそのまま見える */
.gnav {
  display: flex;
  position: fixed;
  inset: 0 0 0 50%;
  z-index: 90;
  padding-top: 76px; /* ヘッダー分を除いた範囲で上下中央に来るようにする */
  background: #F7F5F1 url('../img/bg-texture.jpg') repeat left top / 1440px auto;
  /* パネルの地色が下のページとほぼ同じで境目が消えるため、左端にうっすら影を落とす。
     SPは inset:0 の全画面なので画面外に出て見えない（PCのみ効く）。AUN#9 */
  box-shadow: -8px 0 20px rgba(0, 0, 0, 0.08);
  opacity: 1;
  transition: display 0.4s, opacity 0.4s ease-out;
  transition-behavior: allow-discrete;
}
/* 出るときのフェード開始値。これが無いと初回表示がアニメーションしない */
@starting-style {
  .gnav { opacity: 0; }
}
/* 消えるときのフェード先 */
.gnav[hidden] {
  display: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gnav { transition-duration: 0.1s; }
}

/* --- グローバルナビ：スクロール領域 --- */
/* 収まらないときだけスクロールする。上下の余白と、端で文字が薄くなるマスクで
   「まだ続きがある」ことを見せる（余白ぶんが空いているので、収まるときは何も起きない） */
.gnav__scroll {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding-block: 48px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* --- グローバルナビ：メニュー --- */
/* margin auto で上下中央。項目が増えて収まらなくなっても上が切れない */
.gnav__list {
  list-style: none;
  margin-block: auto;
  padding: 0;
}
.gnav__item + .gnav__item { margin-top: 18px; }
/* 子を持つ項目のあとは間隔を広く取る */
.gnav__item:has(.gnav__sub) + .gnav__item { margin-top: 38px; }
/* 2つ目のグループ（商品一覧）のあとだけ、デザイン上わずかに詰まっている */
.gnav__item:has(.gnav__sub) + .gnav__item:has(.gnav__sub) + .gnav__item { margin-top: 30px; }

.gnav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.9px;
  white-space: nowrap;
}
/* リード線 */
.gnav__link::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: #333;
}

/* 子項目は線を持たず、線の幅ぶん＋20px 下げて始まる */
.gnav__sub {
  list-style: none;
  margin: 12px 0 0;
  padding-left: 54px;
}
.gnav__sub-link {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* --- ヘッダー・ナビ：レスポンシブ --- */
/* ヘッダーは横幅が詰まる 920px 以下で「ロゴの下にキャッチ」の2段構成に切り替える
   （ヘッダー高さとハンバーガーの上余白が連動するため、ナビの全画面化も同じ幅で行う） */
@media (max-width: 920px) {
  /* ロゴの下に小さくキャッチが入る2段構成。高さ66px */
  .header { height: 66px; gap: 0; padding: 0 20px; }
  .l-main { padding-top: 66px; }
  .header__start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .header__logo img { width: 245px; height: auto; }
  /* SPはロゴを最初から見せ、背景も常に白（透明ヘッダーにしない） */
  .header { background: #fff; }
  .header .header__logo { opacity: 1; visibility: visible; }

  /* キャッチ（H1）はスクロール後（.is-fixed）だけ表示。
     高さ・余白・不透明度を同時にアニメーションさせ、
     ロゴがすっと上に動きながらキャッチがふわっと現れるようにする */
  .header__catch {
    visibility: visible;
    height: 0;
    margin-top: 0;
    opacity: 0;
    font-size: 9px;
    letter-spacing: 0;
    transition: height 0.3s, margin-top 0.3s, opacity 0.3s;
  }
  .header.is-fixed .header__catch {
    height: 16px;
    margin-top: 5px;
    opacity: 1;
  }
  /* メニュー表示中はロゴのみ */
  .header.is-menu-open .header__catch {
    height: 0;
    margin-top: 0;
    opacity: 0;
  }
  /* 狭い画面でキャッチが入るのはトップだけ。下層はロゴのみでロゴが上下中央に来る */
  body:not(.home) .header__catch { display: none; }

  /* SPは画面全体を覆う。リストは中央寄せのまま */
  .gnav { inset: 0; padding-top: 66px; }
  .gnav__scroll { padding-inline: 24px; }
}


/* ======================================
   画面追従ボタン
   ====================================== */
/*
 * 高さ0の sticky。画面下40pxに追従し、.l-sticky-area の終わり（フッター直前）で止まる。
 * pointer-events を切って、ボタン以外の場所のクリックを邪魔しないようにする。
 */
.floating-cta-area {
  position: sticky;
  bottom: 40px;
  z-index: 80;
  height: 0;
  pointer-events: none;
}

.floating-cta {
  position: absolute;
  right: 40px;
  bottom: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #932c2e;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 1.1px;
  text-align: center;
}

/* 小鳥は円の外（右上）にはみ出す */
.floating-cta__bird {
  position: absolute;
  top: -21px;
  left: 83px;
  width: 66px;
  transform: rotate(4deg);
}

/* 3行目だけ小さい。block にして改行させる */
.floating-cta__last {
  display: block;
  font-size: 18px;
}

/* --- 画面追従ボタン：レスポンシブ --- */
@media (max-width: 768px) {
  /* SPは sticky ではなく画面下部に固定（フッターでも止まらず常時表示） */
  .floating-cta-area { position: fixed; inset: auto 0 16px; }
  .floating-cta {
    right: 16px;
    width: 98px;
    height: 98px;
    font-size: 14px;
  }
  .floating-cta__last { font-size: 12px; }
  .floating-cta__bird { top: -13px; left: 56px; width: 43px; }
}


/* ======================================
   フッター
   ====================================== */
/* 背景はCTAと共通のテクスチャ。上端に建物のイラスト帯が乗る */
.footer { padding-bottom: 40px; }

/* 建物イラストの帯。テクスチャはCTAと共通。
   イラストは原寸(1440px)のまま中央寄せし、狭い画面でのはみ出しはここで切る */
.footer__band {
  display: flex;
  justify-content: center;
  overflow-x: clip;
  background: #F7F5F1 url('../img/bg-texture.jpg') repeat left top / 1440px auto;
}
/* CTAが無いページ（お問合せ・お問合せ完了）。
   このテクスチャは直前のCTAから続いている地色なので、CTAが無いなら敷かない。
   イラストだけを白地の上に置く */
.footer__band--plain { background: none; }
.footer__bg {
  display: block;
  flex-shrink: 0;
  max-width: none;
}

/* 左の列（ロゴ・住所・コピーライト）は、右のナビより内側から始まる。
   その差ぶんを左のパディングで作る（右端はナビと揃うので触らない） */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding-top: 50px;
  padding-left: 110px;
}

/* --- フッター：ロゴ・住所 --- */
.footer__logo { display: inline-block; }
.footer__address {
  margin: 30px 0 0;
  font-size: 15px;
}
/* Instagram。アイコンは公式の決まりで 29px 以上・周囲にアイコンの半分（15px）以上の余白を取る。
   上は住所との間に 20px、下はSPのナビ（36px）・PCのコピーライト行（40px）で足りている */
.footer__sns { margin: 20px 0 0; line-height: 0; }
.footer__sns-link { display: inline-block; }
.footer__sns-link img { display: block; width: 30px; height: 30px; }

/* --- フッター：ナビ --- */
/* ナビの並びは右端よりわずかに内側で終わる */
.footer__nav {
  display: flex;
  gap: 74px;
  margin-right: 9px;
}
.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 3;
}

/* --- フッター：コピーライト --- */
.footer__copyright,
.footer__privacy {
  margin: 40px 0 0;
  font-size: 14px;
  letter-spacing: 1.4px;
}
.footer__privacy { text-align: right; }
.footer__privacy a { text-decoration: underline; }

/* --- フッター：レスポンシブ --- */
@media (max-width: 768px) {
  /* 固定表示の追従ボタンと最下部が重ならないよう下に余白を足す。
     追従ボタンが出ないページ（お問合せの公開ページが無い等）では足さず、既定の40pxのままにする */
  .l-sticky-area:has(.floating-cta) + .footer { padding-bottom: 130px; }
  /* SPは全体を中央寄せ。プライバシーはコピーライトの上に来る。
     行の間隔はブロックごとに違うので、grid の gap ではなく各ブロックの margin で作る */
  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding-top: 64px;
    padding-left: 20px;
    text-align: center;
  }
  /* SPのロゴはPCより小さい */
  .footer__logo img { width: 136px; }
  .footer__address { font-size: 14px; }
  .footer__nav { margin: 36px 0 0; justify-content: center; }
  .footer__nav-list { text-align: left; line-height: 2; }
  .footer__copyright,
  .footer__privacy { text-align: center; }
  /* ナビとの間に inner と同じ幅の区切り線を引く */
  .footer__privacy {
    order: 1;
    width: 100%;
    margin-top: 25px;
    padding-top: 34px;
    border-top: 1px solid #EEEEEE;
  }
  .footer__copyright { order: 2; margin-top: 11px; }
}


/* ======================================
   パンくず
   ====================================== */
/* 下層ページ共通。固定ヘッダー直下。区切りは小さな三角。現在地はリンクなし。
   左端はコンテンツ幅(.inner)ではなくヘッダーのロゴと揃える */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: none;
  margin-top: 20px;
  padding-inline: 50px;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #333;
}
.breadcrumb__link { text-decoration: underline; }
.breadcrumb__link + .breadcrumb__link::before,
.breadcrumb__current::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 8px;
  margin-right: 10px;
  background: #CA554E;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: 0;
}

/* パンくず：レスポンシブ */
/* ヘッダーが2段構成に切り替わる幅で、ヘッダーの左右余白（20px）に合わせる。
   狭い画面ではヘッダーのすぐ下に置く（上の余白を取らない） */
@media (max-width: 920px) {
  .breadcrumb { margin-top: 0; padding-inline: 20px; }
}


/* ======================================
   コンポーネント
   ====================================== */

/* --- コンポーネント：セクション共通余白 --- */
/* セクション間の余白はここだけで制御する。個別Blockに余白を重複させない */
.section { padding: 100px 0; }
.mv { padding: 0; }

/* --- コンポーネント：見出し --- */
/* 葉と実のアイコンは装飾のため疑似要素で描く（画像差し替え時は background-image に） */
.section-heading { text-align: center; }
/* 見出しの上に置くアイコン */
.section-heading__icon { display: block; margin: 0 auto 16px; }
/* 見出しの左に並べるアイコン */
.section-heading__inline-icon { margin-right: 5px; vertical-align: -4px; }
/* 見出しの上に添えるオーバーライン（下層の「見せ方」から選ぶ 等） */
.section-heading__overline {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
}
.section-heading__title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.6px;
}
.section-heading__lead {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.9px;
}

/* --- コンポーネント：矢印リンク --- */
/* 矢印は円の中に白抜き「>」が入った専用アイコン。img/icon-arrow.svg を差し替える */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  /* 本文の行間だと1行の高さが25.5pxになり、下の余白が広がって見える */
  line-height: 1.2;
}
.link-arrow::after {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 15px;
  background: url('../img/icon-arrow.svg') no-repeat center / contain;
}
/* 縦書き版（トップの製造の流れ／商品詳細の対応サービス）
   横幅（＝縦書きの行の太さ）は line-height 1.2 ぶんを明示する。
   iOS Safari は横書きの親に置いた縦書き inline-flex の横幅を 0 と計算し、
   .link-ruled の右罫が文字に重なる（2026-10-13 実機で発生）。Chrome の自動計算値と同じ 18px */
.link-arrow--vertical {
  writing-mode: vertical-rl;
  width: 1.2em;
}

/* --- コンポーネント：縦罫つきリンク --- */
/* 縦書きリンクの左右に縦罫を1本ずつ置くラッパー。
   リンク自身の ::after は矢印アイコンで使用済みのため、外側で描く */
.link-ruled {
  position: relative;
  display: inline-block;
  padding: 0 14px;
}
.link-ruled::before,
.link-ruled::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 115px;
  background: url('../img/flow-icon-line.svg') no-repeat center / contain;
}
.link-ruled::before { left: 0; }
.link-ruled::after { right: 0; }

/* --- コンポーネント：円形の前後ボタン --- */
/* 白い円の中に「く」字の矢印。スライダーの左右送りで使う。
   親要素の左右どこに置くか（left / right）と、幅が足りないときの縮小は使う側で指定する */
/* [hidden] は UA スタイルの display:none。下の display:flex に負けるので明示的に打ち消す。
   （テンプレート側でも1枚のときは出力しないが、JSが隠す経路も生かしておく） */
.arrow-circle[hidden],
.gallery__dots[hidden] { display: none; }
.arrow-circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 122px;
  height: 122px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.arrow-circle::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  border-top: .5px solid #333;
  border-right: .5px solid #333;
}
/* 角ボーダー製の山形は、回転で角（コーナー）が中心からズレるため translate で光学中央に寄せる */
.arrow-circle--prev::before { transform: translateX(4px) rotate(-135deg); }
.arrow-circle--next::before { transform: translateX(-4px) rotate(45deg); }

/* --- コンポーネント：ボタン --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 34px;
  background: #932c2e;
  color: #fff;
  border-radius: 999px;
  font-size: 20px;
  letter-spacing: 1.6px;
}
/* 白抜きの和菓子アイコン */
.btn-primary::after {
  content: '';
  flex-shrink: 0;
  width: 19px;
  height: 18px;
  background: url('../img/icon-btn-arrow.svg') no-repeat center / contain;
}

.btn-bordered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 266px;
  /* デザインはPC・SPとも高さ54px。SPは文字が小さくなるので下限で揃える */
  min-height: 54px;
  padding: 14px 33px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 20px;
  font-weight: 500;
  /* 本文の行間(1.7)だとボタン高さが60pxになる。デザインは54px */
  line-height: 1.2;
}
/* 白背景のボタンなので、アイコンは赤い矢印（塗りボタンの白抜きとは別） */
.btn-bordered::after {
  content: '';
  flex-shrink: 0;
  width: 18.162px;
  height: 17.471px;
  background: url('../img/icon-arrow.svg') no-repeat center / contain;
}


/* --- コンポーネント：制作実績はこちらCTA（詳細ページ共通） --- */
/* 左のテキストを右の画像に重ねる（デザイン通り） */
.cta-works__inner {
  display: flex;
  align-items: center;
  max-width: 1100px;
}
.cta-works__body {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 340px;
  /* 画像の左端に重ねる */
  margin-right: -100px;
}
.cta-works__heading {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1.6px;
}
.cta-works__text {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.cta-works__more { margin: 32px 0 0; }
/* SP用画像に差し替えるための <picture>。箱としては数えず、img を直接レイアウトに乗せる */
.cta-works__inner > picture { display: contents; }
.cta-works__image {
  flex-grow: 1;
  min-width: 0;
  width: 100%;
  aspect-ratio: 900 / 430;
  object-fit: cover;
  /* 左上・右下だけ角丸100px（PC・SP共通） */
  border-radius: 100px 0 100px 0;
}

@media (max-width: 768px) {
  /* SPは画像が先頭・全幅。テキストは左寄せで画像の裾に少し重ねる */
  .cta-works__inner { flex-direction: column; }
  .cta-works__body { width: 100%; margin-right: 0; margin-top: -48px; }
  .cta-works__image {
    order: -1;
    /* inner の左右padding(20px)を打ち消して画面幅いっぱいに出す。
       グローバルの img { max-width: 100% } に阻まれるので解除する */
    width: calc(100% + 40px);
    max-width: none;
    margin-inline: -20px;
    /* SPは横長ではなく375:340（デザイン実測） */
    aspect-ratio: 375 / 340;
  }
  .cta-works__heading { font-size: 24px; }
  .cta-works__more { text-align: center; }
}

/* --- コンポーネント：ラベル --- */
/* 薄黄の角丸タグ（コンセプト）。デザイン上は幅固定。リンクとして使う */
.label-tag {
  display: grid;
  place-items: center;
  width: 152px;
  height: 54px;
  border: 1px solid #ddd;
  border-radius: 100px;
  background: #fffef0;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
/* リンク先が入っているときは a になる。見た目は span のときと同じにして、
   押せることは下線ではなくホバーの反応で示す（デザインに下線が無いため） */
a.label-tag {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
a.label-tag:hover,
a.label-tag:focus-visible {
  border-color: #ca554e;
  background: #fff;
}

/* 赤のポイントピル（見せ方・商品）。追従ボタンの赤とは別色。
   タグ名は自由入力なので幅は内容に追従させる。min-width はデザインのピル幅 */
.label-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 83px;
  /* 高さを固定すると、タグ名が長くて折り返したときに文字がピルの外にはみ出す。
     下限だけ決めて、余白は上下パディングで持たせる */
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 100px;
  background: #e50012;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
}
.label-point__icon { flex-shrink: 0; }

/* 事例のカテゴリ（塗り）。塗りのほうは枠線を持たない。トップの制作実績・事例一覧・事例詳細で共通。
   カテゴリ名は自由入力なので、折り返しても崩れないよう高さは下限だけにする */
.label-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 12px;
  text-align: center;
  border-radius: 100px;
  background: #7CB9B8;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

/* 事例のタグ（白地に枠線）。カテゴリと同じ3箇所で使う。折り返しの扱いも同じ */
.label-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 12px;
  text-align: center;
  border: 1px solid #7CB9B8;
  border-radius: 100px;
  background: #fff;
  color: #7CB9B8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

/* --- コンポーネント：ページャー --- */
/*
 * 一覧・アーカイブ共通のページ送り。WordPress標準の出力に当てる。
 *   nav.navigation.pagination > span.screen-reader-text + div.nav-links > a/span.page-numbers
 * 読み上げ用のラベルは上の .screen-reader-text で画面から隠れる
 * （このサイトでは nav の中に見出しを置かないため span に差し替えている。functions.php 参照）。
 * 前後のセクションの padding に上乗せする形で、ページャー自身の上下間隔を持たせる
 * （次のセクションに背景色があると、余白ゼロでは帯の縁に貼り付いて見えるため）。
 */
.pagination { margin: 40px 0; }
.pagination .nav-links {
  display: flex;
  /* 桁数が多い・画面が狭いときは折り返して逃がす（横スクロールを出さない） */
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  /* 1桁でも指で押せる大きさ（44px）を確保する。桁が増えたら padding ぶん横に伸びる */
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  /* 本文の行間(1.7)だと文字が下にずれて円の中心に来ない */
  line-height: 1;
}
/* 現在地とホバーは同じ茜色。current は span なのでホバーはリンクにだけ当てる */
.pagination .page-numbers.current,
.pagination a.page-numbers:hover { background: #CA554E; color: #fff; }
/* 塗りが乗るので、リンク共通の透過ホバー（a:hover）は打ち消す */
.pagination a.page-numbers { transition: background-color 0.3s, color 0.3s; }
.pagination a.page-numbers:hover { opacity: 1; }
/* 「前へ」「次へ」は文字ぶん横に広げる */
.pagination .page-numbers.prev,
.pagination .page-numbers.next { padding: 0 16px; }
/* 省略記号は押せないので、当たり判定ぶんの幅を持たせない */
.pagination .page-numbers.dots { min-width: 0; padding: 0 4px; }

/* --- コンポーネント：レスポンシブ --- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .mv { padding: 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading__title { font-size: 24px; letter-spacing: 1.2px; }
  .section-heading__lead { font-size: 16px; }
  .section-heading__overline { font-size: 18px; }
  /* ページャー：最大構成（前へ・数字5つ・省略記号2つ・次へ）が375px幅で1行に収まるまで詰める */
  .pagination { margin: 32px 0; }
  .pagination .nav-links { gap: 2px; }
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .pagination .page-numbers.prev,
  .pagination .page-numbers.next { padding: 0 8px; }
}


/* ================= 共通セクション（トップ・詳細で共有）：見せ方/商品/お見積りCTA/よくあるご質問 ================= */

/* ======================================
   「見せ方」から選ぶ
   ====================================== */

/* 3列。カード幅は最大340pxまでで、余りは列間に回す */
.style__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: space-between;
  gap: 40px;
  margin: 34px 0 0;
  padding: 0;
}
/* カード全体が1つのリンク。説明文の行数が違ってもポイント・詳細を見るの位置が揃うようにする */
.style__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 説明文の下端を最も行数が多いカードに合わせる */
.style__text { flex-grow: 1; }

/* 画像の左下に白帯の縦書きラベルを重ねる。白帯は画像の左へはみ出す */
.style__visual {
  position: relative;
}
/* 角丸は左上70・右下20。
   運用で入る写真の縦横比がまちまちでもカードが揃うよう、比率を固定して切り抜く */
.style__image {
  width: 100%;
  aspect-ratio: 340 / 480;
  object-fit: cover;
  border-radius: 70px 0 20px 0;
}
/* 白帯は文字数が多いときだけ縦に伸びる（下端は画像の下端に固定）。
   画像の左端から 40px はみ出し、残りが画像に重なる */
.style__label {
  position: absolute;
  left: -40px;
  bottom: 0;
  display: grid;
  place-items: center;
  min-height: 233px;
  margin: 0;
  padding: 24px;
  background: #fff;
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 4px;
}

.style__text {
  margin: 12px 0 0;
  line-height: 1.6;
}

.style__points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 29px 0 0;
  padding: 0;
}
.style__item .link-arrow { margin-top: 24px; }

/* --- 見せ方：レスポンシブ --- */
@media (max-width: 768px) {
  .style__list { grid-template-columns: 1fr; gap: 32px; }
  /* 画像は最大440pxで中央寄せ。縦フレックス内なので幅を明示して潰れを防ぐ。
     白帯のはみ出し分（35px）は左の余白として内側に確保する */
  .style__visual { width: 100%; max-width: 440px; margin: auto; padding-left: 35px; }
  .style__label { left: 0; }
}


/* ======================================
   「商品」から選ぶ
   ====================================== */
/* 見出しと一覧を横に並べる。画像は右端まで敷き詰めるので .inner を使わず全幅で組む */
.product {
  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 1440px;
  margin-inline: auto;
  padding-top: 0;
}

/* --- 商品：縦書き見出し --- */
/* 見出し列とリードは、それぞれの左右中央を揃えて縦に並べる。
   ただし置かれる位置は左カラム(420px)のちょうど中央ではなく、やや画像寄り。
   その差を padding-left で作る（1440px 前提の固定値。それ未満はタブレット帯で上書き） */
.product__heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 113px;
}

/* アイコンは見出しの上。左右中央を揃えて1列にまとめる */
.product__heading-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product__title-vertical {
  writing-mode: vertical-rl;
  margin: 3px 0 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 6.4px;
}
.product__lead {
  writing-mode: vertical-rl;
  margin: 52px 0 0;
  font-size: 18px;
  letter-spacing: 3.5px;
}

/* --- 商品：一覧 --- */
/* 3列×2行。画像同士は隙間なく、右端まで届く */
.product__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 340px);
  justify-content: end;
  gap: 39px 0;
  margin: 0;
  padding: 0;
}
.product__item { text-align: center; }
/* カード全体が1つのリンク。文字は左右12pxの余白の中、画像だけカード幅いっぱいに出す */
.product__link { display: block; padding-inline: 12px; }
/* 運用で入る写真の縦横比がまちまちでもカードが揃うよう、比率を固定して切り抜く */
.product__image {
  width: calc(100% + 24px);
  /* グローバルの img { max-width: 100% } がリンクの内側幅で止めるので解除する */
  max-width: none;
  margin-inline: -12px;
  aspect-ratio: 340 / 480;
  object-fit: cover;
}
/* 角丸は一覧の先頭1枚の左上だけ。:first-child 基準なので個数が変わっても付く位置は崩れない */
.product__item:first-child .product__image { border-radius: 70px 0 0 0; }

.product__name {
  margin: 13px 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
/* ふりがな。未入力なら要素ごと出力されない */
.product__ruby {
  margin-left: 15px;
  font-size: 14px;
}

.product__points {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
.product__item .link-arrow { margin-top: 25px; }

/*
 * 件数ちがいの並べ替え（デザイン指示）
 * 5件＝上段2・下段3 ／ 4件＝上段2・下段2。6件は3×2のまま。
 */
/* 5件は上段2・下段3。上段を右寄せのまま2枚に */
.product__list--5 .product__item:nth-child(1) { grid-column: 2; }
.product__list--5 .product__item:nth-child(2) { grid-column: 3; }

/* 4件は上段2・下段2 */
.product__list--4 { grid-template-columns: repeat(2, 340px); }

/*
 * --- 商品：下層（商品詳細）のレイアウト ---
 * 見出しは中央寄せの共通 .section-heading。カードは 1100px 幅・340px×3列・gap 40px、
 * 画像は角丸なしで、商品名の下にキャッチコピーが入る。
 */
.product--grid { display: block; }
/* 見出し内の間隔とリードの級数は、共通見出しの既定値とこのセクションで異なる */
.product--grid .section-heading__icon { margin-bottom: 20px; }
.product--grid .section-heading__lead {
  margin-top: 25px;
  font-size: 16px;
  letter-spacing: 0;
}
/*
 * 見た目は3列。半列ずらせるよう6分割し、カードを2列ぶん占有させている
 * （列幅・列間はどちらの数え方でも同じ値になる）。
 * こうすると件数が3の倍数でないときに、最終行のカードを中央へ寄せられる。
 * 商品が運用で増えても最終行が左に寄らない。
 */
.product--grid .product__list {
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  width: min(100% - 40px, 1100px);
  margin-top: 45px;
  margin-inline: auto;
}
.product--grid .product__item { grid-column: span 2; }
/* 最終行が1枚（4・7・10件…）のとき中央へ */
.product--grid .product__item:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
/* 最終行が2枚（5・8・11件…）のとき、2枚まとめて中央へ（次の1枚は自動で右隣に入る） */
.product--grid .product__item:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }

.product__catch {
  margin: 13px 0 0;
  line-height: 1.625;
}
.product--grid .product__points { margin-top: 24px; }
/* inline-flex のままだと親の行ボックス（strut）が残り、カード下端に余白が付く */
.product--grid .product__item .link-arrow {
  display: flex;
  justify-content: center;
}

/* --- 商品：レスポンシブ --- */
@media (max-width: 768px) {
  /* 横2分割をやめ、見出しを上に、一覧を全幅2列で下に置く */
  .product { display: block; }
  .product__heading {
    display: block;
    text-align: center;
    padding: 0 20px 32px;
  }
  /* アイコンと見出しを横並び中央に */
  .product__heading-main {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  /* 見出しの縦書きを解除して横書き中央に */
  .product__title-vertical,
  .product__lead { writing-mode: horizontal-tb; margin: 0; }
  .product__title-vertical { font-size: 22px; letter-spacing: 2px; }
  .product__lead { margin-top: 16px; font-size: 14px; line-height: 1.8; letter-spacing: 0; }

  .product__list,
  .product__list--4,
  .product__list--5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .product__list--5 .product__item:nth-child(1),
  .product__list--5 .product__item:nth-child(2) { grid-column: auto; }
  /* 下層も2列（PCと同じ理由で4分割）。SPは左右の余白も列間もなく、画面幅いっぱいに敷き詰める */
  .product--grid .product__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 0;
    width: auto;
    margin-top: 49px;
  }
  /* 3列前提の寄せを解除してから、2列用の寄せに置き換える */
  .product--grid .product__item:last-child:nth-child(3n + 1),
  .product--grid .product__item:nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
  /* 最終行が1枚（奇数件）のとき中央へ */
  .product--grid .product__item:last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
  .product__name { margin-top: 16px; font-size: 20px; }
  .product__catch { font-size: 14px; }
  .product__points { margin-top: 10px; }
  .product--grid .product__points { margin-top: 16px; }
  .product__item .link-arrow { margin-top: 12px; }
}
/* ======================================
   お見積り・ご相談CTA
   ====================================== */
/* 上部に飾り罫、その下に職人イラストが乗る */
.cta {
  padding: 80px 0;
  background: #F7F5F1 url('../img/bg-texture.jpg') repeat left top / 1440px auto;
  text-align: center;
}
/* 飾り罫。上は本文の前、下は本文の後に置く */
.cta__line {
  display: block;
  margin: 0 auto;
}
.cta__line:first-child { margin-bottom: 68px; }
.cta__line:last-child { margin-top: 68px; }

/* セクションの間に単独で置く飾り罫（詳細ページのFAQ〜「見せ方」間 等） */
.section-line {
  display: block;
  margin: 0 auto;
  max-width: calc(100% - 40px);
}
/* SPデザインにはこの罫が無い */
@media (max-width: 768px) {
  .section-line { display: none; }
}

.cta__illust {
  display: block;
  margin: 0 auto 19px;
}
/* CTAの見出しとリード文の間は、他のセクションより広く空ける */
.cta .section-heading__lead { margin-top: 39px; }
.cta__button { margin: 22px 0 0; }
/* フッターの直前に置くCTA（飾り罫なし）は、ボタンの下を広く取る */
.cta:not(:has(.cta__line)) { padding-bottom: 97px; }

/* --- CTA：レスポンシブ --- */
@media (max-width: 768px) {
  .cta { padding: 32px 0; }
  .cta:not(:has(.cta__line)) { padding-bottom: 60px; }
  .cta .section-heading__lead { margin-top: 20px; }
  /* 飾り罫は .inner と同じ幅（左右20px余白）に収める */
  .cta__line { width: calc(100% - 40px); }
  .cta__line:first-child { margin-bottom: 24px; }
  .cta__line:last-child { margin-top: 32px; }
  .cta__illust { width: 56px; margin: 0 auto 24px; }
}
/* ======================================
   よくあるご質問
   ====================================== */
.faq { padding-top: 0; text-align: center; }
.faq__illust { display: block; margin: 0 auto 30px; }
.faq__more { margin: 24px 0 0; }


/* ======================================
   エディター本文（.wysiwyg）
   ====================================== */
/*
 * 管理画面のエディターで入力された本文の共通スタイル。
 * 運用者が何を入れるか分からないので、エディターで出せる要素はひととおり面倒を見る。
 * 使う側は「共通クラス .wysiwyg ＋ 固有クラス」の2枚重ねにして、
 * 位置や幅の調整は固有クラス側でやる（ここには余白の外側を書かない）。
 */
.wysiwyg { font-size: 16px; }
/* 隣り合う要素の余白は相殺されないので、上マージンだけで間隔を作る。
   先頭と末尾はブロックの外に余白が漏れないよう落とす */
.wysiwyg > * { margin: 28px 0 0; }
.wysiwyg > :first-child { margin-top: 0; }
.wysiwyg > :last-child { margin-bottom: 0; }

.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4 { font-weight: 500; line-height: 1.4; }
.wysiwyg h2 { margin-top: 56px; font-size: 24px; }
.wysiwyg h3 { margin-top: 44px; font-size: 20px; }
.wysiwyg h4 { margin-top: 36px; font-size: 18px; }

.wysiwyg ul,
.wysiwyg ol { padding-left: 1.5em; }
.wysiwyg li + li { margin-top: 8px; }
/* 「項目名とその説明」の並び。見出しタグを増やさずに済むので、
   原因1〜3のような対になった内容はこれで組む */
.wysiwyg dt { font-weight: 700; }
.wysiwyg dt + dd { margin-top: 8px; }
.wysiwyg dd { margin-left: 0; }
.wysiwyg dd + dt { margin-top: 28px; }

/* 本文中のリンクだけは下線を出す。
   グローバルの a は下線なし（ボタン・カード用）なので、ここで戻す */
/* 本文中のリンクは下線を出す。ただしボタンの見た目を持つものは除く。
   注文の流れのように、エディターの中にボタンのマークアップを書く箇所があるため */
.wysiwyg a:not([class*="btn-"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wysiwyg strong { font-weight: 700; }

.wysiwyg blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid #ccc;
  color: #666;
}

.wysiwyg img { display: block; }
.wysiwyg figure { margin-inline: 0; }
.wysiwyg figcaption { margin-top: 8px; font-size: 14px; color: #666; }

/* 表は狭い画面でも横スクロールで逃がす（レイアウトを割らない） */
.wysiwyg table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.wysiwyg th,
.wysiwyg td {
  padding: 12px 16px;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
}
.wysiwyg th { background: #f7f7f7; font-weight: 500; }

@media (max-width: 768px) {
  .wysiwyg h2 { margin-top: 44px; font-size: 20px; }
  .wysiwyg h3 { margin-top: 36px; font-size: 18px; }
  .wysiwyg h4 { margin-top: 28px; font-size: 16px; }
}


/* ======================================
   タブレット（769px〜1439px）
   ====================================== */
/*
 * PC版は 1440px を前提に px 固定で組んでいる。
 * それ未満の幅では固定値のままだと横スクロールが出るため、ここで流動化させる。
 * 768px 以下は各セクションのSP指定が受け持つので、この帯には含めない。
 */
@media (min-width: 769px) and (max-width: 1439px) {
  /* 商品：カードは最大340px */
  .product__list { grid-template-columns: repeat(3, minmax(0, 340px)); }
  /* 幅が狭いほど左カラムも狭いので、右寄せ量は画面幅に応じて増やす。
     min() で 1440px 時の 144px を超えないよう抑え、狭い帯では一覧に被らせない（AUN#1） */
  .product__heading { padding: 0 20px 0 min(144px, max(20px, calc((100vw - 1040px) * 0.36))); }

  /* 見せ方：白帯が画像の左へ40pxはみ出すぶんの逃げ。
     1440px 未満はコンテンツの外側に余白が無く、入れないと白帯が画面外に出る */
  .style__list { padding-left: 40px; }
}