/* ==== 配色トークン（木とオフホワイトのブランド配色。ライト固定） ==== */
  :root {
    color-scheme: light;
    --paper:        #fbf9f5;  /* ページ地色 */
    --surface:      #f4efe6;  /* 一段沈んだ面（帯・カード） */
    --surface-2:    #ece5d8;  /* さらに一段濃い面 */
    --wood:         #f0e7d7;  /* 写真代替の明るい木肌 */
    --wood-2:       #dcc9a8;  /* 写真代替の陰 */
    --brand-brown:  #6a5a48;  /* 見出し・ロゴ */
    --footer-brown: #8a7b68;  /* フッター背景 */
    --text:         #4a4038;  /* 本文 */
    --text-sub:     #5e5348;  /* 補足。細い字でも埋もれない濃さにする */
    --line:         rgba(106, 90, 72, 0.14);  /* 通常の罫線 */
    --line-strong:  rgba(106, 90, 72, 0.30);  /* 円・ボタンの線 */
    --leaf:         #c3d0ae;  /* 背景の葉の淡い緑 */

    /* フォント。読み込みに失敗してもOS標準の同系統に落ちるよう順番を組んでいる */
    --font-mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    --font-sans: "Zen Kaku Gothic New", "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
    /* 数字と英字だけに使う。「2/3」やセクションラベルの表情をつくる */
    --font-latin: "EB Garamond", "Zen Old Mincho", serif;
    /* ロゴ専用。デザイン案のロゴは明朝ではなく幾何学的なサンセリフ */
    --font-logo: "Jost", "Century Gothic", "Zen Kaku Gothic New", sans-serif;

    --wrap: 1180px;   /* コンテンツ最大幅 */
    --radius: 4px;    /* ほぼ直角にして引き締める */
    --radius-photo: 2px;

    /* ヘッダーの高さ。固定にしておくと、縮むときに本文が動かない */
    --header-h: 134px;
    --header-h-compact: 64px;
  }

  * { box-sizing: border-box; }

  /* display を指定した要素でも hidden 属性を効かせる。
     これがないと .product__spec { display: grid } が [hidden] に勝ってしまい、
     JS で閉じたつもりの仕様表が開いたままになる */
  [hidden] { display: none !important; }

  html {
    scroll-behavior: smooth;
    /* 縮んだヘッダーに隠れないようアンカー位置を下げる */
    scroll-padding-top: 88px;
  }

  body {
    margin: 0;
    /* ヘッダーは fixed なので、その分の余白を本文側で確保する */
    padding-top: var(--header-h);
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 2;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
  }

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

  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 32px;
  }

  /* 画面には出さないが読み上げには残す見出し用 */
  .srOnly {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ==== ヘッダー ==== */
  /* fixed にしてあるのは、縮んだときに本文の位置が動かないようにするため。
     sticky（通常フロー）だと高さの変化で本文が上下し、
     その動きがスクロール判定に跳ね返ってヘッダーが震える */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(251, 249, 245, 0.88);
    backdrop-filter: blur(10px);
    transition: box-shadow 0.35s ease;
  }
  .header__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    height: var(--header-h);
    transition: height 0.35s ease;
  }
  /* 下にスクロールすると縮めて、本文を見やすくする（クラスは JS が付ける） */
  .header.is-compact { box-shadow: 0 6px 24px rgba(106, 90, 72, 0.07); }
  .header.is-compact .header__inner { height: var(--header-h-compact); }
  .header.is-compact .logo__mark { font-size: 24px; }
  .header.is-compact .logo__tag { opacity: 0; max-height: 0; margin-top: 0; }

  /* ロゴ。span は block にして縦に積む（inline のままだと横一列に崩れる） */
  .logo {
    text-decoration: none;
    text-align: center;
    flex: none;
    padding-right: 44px;
    /* 案の縦罫線はロゴより背が高いので、擬似要素で伸ばす */
    position: relative;
  }
  .logo::after {
    content: "";
    position: absolute;
    top: -14px;
    bottom: -14px;
    right: 0;
    width: 1px;
    background: var(--line-strong);
  }
  .logo__mark,
  .logo__name,
  .logo__tag { display: block; }
  .logo__mark {
    font-family: var(--font-logo);
    font-weight: 500;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--brand-brown);
    transition: font-size 0.35s ease;
  }
  .logo__name {
    font-family: var(--font-logo);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2em;
    line-height: 1.4;
    color: var(--brand-brown);
    margin-top: 3px;
  }
  .logo__tag {
    font-size: 10px;
    letter-spacing: 0.06em;
    /* 10px と小さいので本文より濃い色を当てる */
    color: var(--text);
    line-height: 1.7;
    margin-top: 7px;
    overflow: hidden;
    max-height: 40px;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin-top 0.35s ease;
  }

  /* ナビ（英字＋日本語の2段組み） */
  .nav { margin-left: auto; }
  .nav__list {
    display: flex;
    gap: clamp(18px, 2.6vw, 44px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__link {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-block: 6px;
    position: relative;
  }
  /* 下線はホバー時に中央から伸ばす */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 1px;
    background: var(--brand-brown);
    transform: translateX(-50%);
    transition: width 0.28s ease;
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after { width: 100%; }
  .nav__en {
    display: block;
    font-family: var(--font-latin);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.06em;
    color: var(--brand-brown);
    /* 案では ABOUT ではなく About。頭文字だけ大文字にする */
    text-transform: capitalize;
  }
  .nav__ja {
    display: block;
    font-family: var(--font-mincho);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-sub);
    line-height: 1.9;
  }

  /* ハンバーガー（モバイルのみ表示） */
  .navToggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--brand-brown);
    cursor: pointer;
  }

  /* ==== ファーストビュー ====
     デザイン案では、1枚の商品写真がヒーローと3つの特徴カードの背後まで続き、
     カードが写真の上に浮いている。その構造を .fv でまとめて再現する */
  .fv {
    position: relative;
    overflow: hidden;
  }
  .fv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* .fv はヒーロー＋3つの特徴カードぶんの高さがあり、そこに100%でcoverすると
       写真が大きく拡大されすぎて商品が巨大化してしまう。
       高さをヒーロー1つぶん程度に固定し、拡大率を抑えたうえで横いっぱいに敷き詰める */
    height: clamp(560px, 76vh, 760px);
    object-fit: cover;
    object-position: center;
    z-index: 0;

    animation: heroBg 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;

    filter: brightness(1.06) saturate(0.9) contrast(0.94);
  }
  /* 左と下を紙の色へ溶かす。文字が乗る側を白く抜き、カードの下は地色に戻す */
  .fv__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
    rgba(255,255,255,0.2)
  }

  .hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: clamp(500px, 64vh, 660px);
    padding-block: clamp(36px, 4.5vw, 64px);
  }
  /* 背景の淡い光。写真の上に薄くのせて奥行きを足す */
  .hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.42;
  }
  .hero__glow span {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
  }
  .hero__glow span:nth-child(1) {
    width: 520px; height: 520px;
    top: -180px; left: -220px;
    background: radial-gradient(circle, var(--leaf), transparent 68%);
    opacity: 0.5;
  }
  .hero__glow span:nth-child(2) {
    width: 300px; height: 300px;
    top: 32%; left: -120px;
    background: radial-gradient(circle, var(--leaf), transparent 70%);
    opacity: 0.32;
  }
  .hero__glow span:nth-child(3) {
    width: 480px; height: 480px;
    top: -200px; left: 34%;
    background: radial-gradient(circle, var(--leaf), transparent 70%);
    opacity: 0.34;
  }
  .hero__glow span:nth-child(4) {
    width: 420px; height: 420px;
    top: -140px; right: -170px;
    background: radial-gradient(circle, var(--wood-2), transparent 70%);
    opacity: 0.34;
  }

  .hero__grid {
    position: relative;
    z-index: 3;
    width: 100%;
    /* ここだけ本文より広くとって、コピーと円の両方に余裕を持たせる */
    max-width: 1340px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr) minmax(0, 1.42fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
  }

  .hero__copy {
    font-family: var(--font-mincho);
    font-size: clamp(30px, 3.5vw, 52px);
    line-height: 1.7;
    letter-spacing: 0.09em;
    color: var(--brand-brown);
    margin: 0 0 36px;
    font-weight: 500;
    text-shadow: 0 6px 24px rgb(206 146 77 / 20%);
  }
  .hero__lead {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 2.3;
    letter-spacing: 0.05em;
    color: var(--text);
  }
  .hero__lead:last-child { margin-bottom: 0; }

  /* 中央の円形ブランド説明。輪郭は CSS の枠線ではなく SVG の円弧で描く */
  .circle {
    /* 右の写真に少し重ねて、添付デザインの重なりを再現する */
    position: relative;
    z-index: 2;
    margin-right: clamp(-72px, -4.2vw, -28px);
    /* デザイン案の輪郭は正円ではなく、縦に長い楕円 */
    aspect-ratio: 100 / 147;
    border-radius: 50%;
    background: rgba(251, 249, 245, 0.96);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 2.6vw, 34px);
    text-align: center;
  }
  .circle__mark {
    font-family: var(--font-logo);
    color: var(--brand-brown);
    line-height: 1.2;
    font-size: 40px;
    font-weight: 500;
  }
  .circle__name {
    font-family: var(--font-logo);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--brand-brown);
    margin-bottom: 14px;
  }
  .circle__lead {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-sub);
    margin: 0 0 16px;
  }
  .circle__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    text-align: left;
    font-size: 12px;
    line-height: 1.65;
    justify-content: center;
  }
  .circle__list li {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .circle__list svg { flex: none; color: var(--brand-brown); opacity: 0.85; }

  /* 円の輪郭。薄い全周の下に、濃い「三分の二」の弧を重ねる */
  .circle__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  /* 楕円の枠に合わせて非等比に伸ばす（preserveAspectRatio は SVG 側の属性で指定）*/
  /* viewBox(100×147) と枠の比率をそろえてあるので、線は等比に拡大され太さが均一になる。
     縮尺は約2.5倍なので、stroke-width 0.55 が画面上およそ1.4px */
  .circle__ring path {
    fill: none;
    stroke-width: 0.55;
  }
  /* 残りの三分の一は、うっすら残して「欠けている」ことが分かるように */
  .circle__ringBase { stroke: rgba(106, 90, 72, 0.16); }
  .circle__ringArc {
    stroke: var(--brand-brown);
    stroke-width: 0.72;
    stroke-linecap: round;
    /* pathLength="3" で全長を3と宣言してあるので、
       「2 描いて 3 空ける」と書けば実寸に関係なく必ず三分の二になる。
       offset 2 が描く前、0 が描き終わり */
    stroke-dasharray: 2 3;
    stroke-dashoffset: 2;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .circle.is-drawn .circle__ringArc { stroke-dashoffset: 0; }

  /* ==== 演出 ==== */
  /* 初回ロード：ヒーローの各要素を順に浮かび上がらせる */
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  .hero__copy span,
  .hero__lead,
  .hero .circle {
    animation: heroIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  /* 背景写真は、わずかに引きながら浮かび上がらせる */
  @keyframes heroBg {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
  .hero__copy span { display: block; }
  .hero__copy span:nth-child(1) { animation-delay: 0.1s; }
  .hero__copy span:nth-child(2) { animation-delay: 0.26s; }
  .hero__lead:nth-of-type(1) { animation-delay: 0.46s; }
  .hero__lead:nth-of-type(2) { animation-delay: 0.6s; }
  .hero .circle { animation-delay: 0.52s; }

  /* スクロールで登場。.reveal は JS が付けるので、
     JS が動かない環境では最初から普通に表示される */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* ==== 写真の差し込み口（あとで img に差し替える） ==== */
  .photo {
    position: relative;
    margin: 0;
    border-radius: var(--radius-photo);
    overflow: hidden;
    /* 木口の年輪を思わせる同心円を、明るい木肌に薄く重ねた代替表示 */
    background:
      radial-gradient(125% 115% at 26% 20%, rgba(255, 255, 255, 0.6), transparent 55%),
      repeating-radial-gradient(circle at 38% 42%,
        rgba(132, 104, 68, 0.035) 0 1px,
        rgba(132, 104, 68, 0) 1px 13px),
      linear-gradient(158deg, var(--wood), var(--wood-2));
    box-shadow: inset 0 0 0 1px rgba(106, 90, 72, 0.08);
    display: grid;
    place-items: center;
  }
  /* 写真は枠いっぱいに切り抜いて表示する。
     object-position は、見せたい被写体が枠に収まるよう写真ごとに指定している */
  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* サイトの配色（オフホワイトと木）に馴染ませる程度の軽い補正 */
    filter: saturate(0.94) brightness(1.02);
  }
  .photo--tall { aspect-ratio: 3 / 4; }
  .photo--wide { aspect-ratio: 4 / 3.2; }

  /* ==== 3つの特徴カード ==== */
  .features__outer {
    position: relative;
    z-index: 2;
    /* 案のカードは本文より広く、画面幅の9割ほどある */
    max-width: 1360px;
    padding-bottom: clamp(20px, 2.2vw, 32px);
  }
  /* 写真の上に浮くカード。地色より少し明るくして浮きを出す */
  .features {
    background: rgba(252, 250, 247, 0.94);
    backdrop-filter: blur(3px);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(106, 90, 72, 0.07);
    padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 26px);
  }
  .feature {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: stretch;
  }
  /* 本文の行数が違っても「詳しく見る」の位置を3枚で揃える */
  .feature > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .feature__icon { align-self: start; }
  .feature .more { align-self: flex-start; margin-top: auto; }
  .feature + .feature {
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 2.2vw, 32px);
  }
  .feature__icon {
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-latin);
    font-size: 27px;
    color: var(--brand-brown);
  }
  .feature__title {
    font-family: var(--font-mincho);
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--brand-brown);
    margin: 4px 0 8px;
    font-weight: 500;
  }
  .feature__body {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--text-sub);
  }

  /* テキストリンク（詳しく見る →） */
  .more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--brand-brown);
    text-decoration: none;
  }
  .more::after {
    content: "→";
    transition: transform 0.28s ease;
  }
  .more:hover::after,
  .more:focus-visible::after { transform: translateX(5px); }

  /* ==== 各セクション共通の見出し ==== */
  .section { padding-block: clamp(64px, 7.5vw, 124px); }
  .section--tint { background: var(--surface); }
  .sectionHead { margin-bottom: clamp(32px, 4vw, 60px); }
  .sectionHead__en {
    display: block;
    font-family: var(--font-latin);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.42em;
    color: var(--text-sub);
    text-transform: uppercase;
  }
  .sectionHead__title {
    font-family: var(--font-mincho);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.6;
    letter-spacing: 0.13em;
    color: var(--brand-brown);
    margin: 10px 0 16px;
    font-weight: 500;
  }
  .sectionHead__lead {
    margin: 0;
    max-width: 36em;
    font-size: 13.5px;
    color: var(--text-sub);
  }

  /* ==== ABOUT：事業所紹介 ==== */
  .about {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: clamp(28px, 3.6vw, 56px);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 3.6vw, 56px);
    align-items: start;
  }
  .about__title {
    font-family: var(--font-mincho);
    font-size: clamp(18px, 1.9vw, 23px);
    line-height: 1.75;
    letter-spacing: 0.05em;
    color: var(--brand-brown);
    margin: 0 0 22px;
    font-weight: 500;
  }
  .about__body { margin: 0 0 20px; font-size: 13.5px; }
  /* ブランドロゴ（仮）。差し替えは img の src だけで済む */
  .brandLogo {
    margin: 0 0 30px;
    max-width: 290px;
    border-radius: var(--radius-photo);
    overflow: hidden;
  }
  .brandLogo img { width: 100%; height: auto; display: block; }

  /* 事業所の地図。写真と同じ角丸・同じ間隔でそろえる */
  .map {
    margin-top: 16px;
    border-radius: var(--radius-photo);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(106, 90, 72, 0.08);
  }
  .map iframe {
    display: block;
    width: 100%;
    height: 600px;
    border: 0;
  }
  .map__note {
    margin: 10px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-sub);
  }

  /* 案どおり3枚を横に並べる */
  .about__photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: stretch;
  }
  .about__photos .photo {
    aspect-ratio: 0.92;
  }
  /* 店頭写真の緑が浮くので、この列だけ彩度を落とす */
  .about__photos img { filter: saturate(0.78) brightness(1.03); }
  /* 事業所情報 */
  .infoTable {
    margin: 28px 0 0;
    font-size: 13px;
    display: grid;
    grid-template-columns: 7em 1fr;
  }
  .infoTable dt {
    color: var(--text-sub);
    padding: 11px 0;
    border-top: 1px solid var(--line);
  }
  .infoTable dd {
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid var(--line);
  }

  /* ==== PRODUCTS：商品カード（枠線を使わず余白で仕切る） ==== */
  .productGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 32px);
  }
  .product { display: flex; flex-direction: column; }
  /* 写真の左右を少し落として、商品が大きく見えるようにする */
  .product .photo { aspect-ratio: 1 / 0.92; }
  .product .photo { transition: transform 0.5s ease; }
  .product:hover .photo { transform: translateY(-4px); }
  .product__body { padding-top: 20px; display: flex; flex-direction: column; flex: 1; }
  .product__tag {
    align-self: flex-start;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-sub);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 14px;
  }
  .product__name {
    font-family: var(--font-mincho);
    font-size: 16.5px;
    letter-spacing: 0.05em;
    color: var(--brand-brown);
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.65;
  }
  .product__desc {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--text-sub);
    flex: 1;
  }
  .product__meta {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--text-sub);
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }

  /* 商品詳細の開閉ボタン（＋／−） */
  .product__more {
    align-self: flex-start;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--brand-brown);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .product__more::after {
    content: "＋";
    font-size: 11px;
  }
  /* 文字だけだと押せると分からないので、触れたら下線を出す */
  .product__more:hover,
  .product__more:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
  .product__more[aria-expanded="true"]::after { content: "−"; }

  /* 開いたときに出る仕様表 */
  .product__spec {
    margin: 0 0 14px;
    font-size: 11.5px;
    display: grid;
    grid-template-columns: 5em 1fr;
  }
  .product__spec dt {
    color: var(--text-sub);
    padding: 7px 0;
    border-top: 1px solid var(--line);
  }
  .product__spec dd {
    margin: 0;
    padding: 7px 0;
    border-top: 1px solid var(--line);
  }

  /* ==== CARE：使い方とお手入れ ==== */
  .careLayout {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .photo--care { aspect-ratio: 3 / 4; }
  .careList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.4vw, 28px);
  }
  .care { border-top: 1px solid var(--line); padding-top: 20px; }
  .care__title {
    font-family: var(--font-mincho);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: var(--brand-brown);
    margin: 0 0 8px;
    font-weight: 500;
  }
  .care__body { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--text-sub); }

  /* ==== FAQ：よくある質問 ==== */
  .faqList { list-style: none; margin: 0; padding: 0; }
  .faqList li { border-top: 1px solid var(--line); }
  .faqList li:last-child { border-bottom: 1px solid var(--line); }
  .faq__q {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px 44px 20px 40px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease;
  }
  .faq__q:hover { background: rgba(106, 90, 72, 0.045); }
  /* 行頭の Q と、右端の開閉マーク */
  .faq__q::before {
    content: "Q";
    position: absolute;
    left: 10px;
    top: 19px;
    font-family: var(--font-mincho);
    font-size: 14px;
    color: var(--brand-brown);
  }
  .faq__q::after {
    content: "＋";
    position: absolute;
    right: 14px;
    top: 21px;
    font-size: 11px;
    color: var(--brand-brown);
  }
  .faq__q[aria-expanded="true"]::after { content: "−"; }
  .faq__a {
    position: relative;
    margin: 0;
    padding: 0 44px 24px 40px;
    font-size: 13px;
    line-height: 2;
    color: var(--text-sub);
  }
  .faq__a::before {
    content: "A";
    position: absolute;
    left: 10px;
    top: 0;
    font-family: var(--font-mincho);
    font-size: 14px;
    color: var(--text-sub);
  }

  /* ==== STORY：想いと工程 ==== */
  .storyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .photo--story { aspect-ratio: 16 / 9; margin-bottom: 32px; }
  .storyGrid p { margin: 0 0 22px; font-size: 13.5px; line-height: 2.15; }
  .storyGrid p:last-child { margin-bottom: 0; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
  .step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 20px;
    align-items: start;
  }
  .step__num {
    width: 46px; height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-latin);
    font-size: 16px;
    letter-spacing: 0.06em;
    color: var(--brand-brown);
  }
  .step__title {
    font-family: var(--font-mincho);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: var(--brand-brown);
    margin: 8px 0 4px;
    font-weight: 500;
  }
  .step__body { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--text-sub); }

  /* ==== NEWS：お知らせ一覧 ==== */
  .newsList { list-style: none; margin: 0; padding: 0; }
  .newsList li { border-top: 1px solid var(--line); }
  .newsList li:last-child { border-bottom: 1px solid var(--line); }
  .news {
    display: grid;
    grid-template-columns: 7.5em 7em 1fr;
    gap: 24px;
    align-items: center;
    padding: 22px 8px;
    text-decoration: none;
    transition: background 0.25s ease;
  }
  .news:hover, .news:focus-visible { background: rgba(106, 90, 72, 0.045); }
  .news__date {
    font-family: var(--font-latin);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--text-sub);
  }
  .news__cat {
    justify-self: start;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--brand-brown);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px 14px;
  }
  .news__title { font-size: 13.5px; line-height: 1.8; }

  /* ==== NEWS：お知らせ個別ページ（news.php） ==== */
  .newsArticle__wrap { max-width: 720px; }
  .newsArticle__back {
    display: inline-block;
    margin-bottom: 40px;
    font-size: 13px;
    color: var(--brand-brown);
    text-decoration: none;
  }
  .newsArticle__back:hover { text-decoration: underline; }
  .newsArticle__loading,
  .newsArticle__error {
    font-size: 14px;
    color: var(--text-sub);
  }
  .newsArticle__img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-photo);
    margin: 0 0 28px;
  }
  .newsArticle__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
  .newsArticle__date {
    font-family: var(--font-latin);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--text-sub);
  }
  .newsArticle__cat {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--brand-brown);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px 14px;
  }
  .newsArticle__title {
    font-family: var(--font-mincho);
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.6;
    color: var(--brand-brown);
    margin: 0 0 28px;
  }
  .newsArticle__text {
    font-size: 14px;
    line-height: 2;
    color: var(--text);
    white-space: pre-wrap;
    margin: 0;
  }

  /* ==== CONTACT：フォーム ==== */
  .contactGrid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .photo--contact{
    margin-top: 36px;
    background: unset;
    box-shadow: unset;
    display: unset;
    place-items: unset;
  }
  .photo--contact img{
    width: 270px;
    height: auto;
  }
  .contactInfo { margin: 0; }
  .contactInfo dt {
    font-family: var(--font-latin);
    font-size: 12.5px;
    letter-spacing: 0.3em;
    color: var(--text-sub);
    margin-top: 26px;
    text-transform: uppercase;
  }
  /* 日本語のラベルは字間を詰める（英字と同じ字間だと間延びする） */
  .contactInfo dt[lang="ja"] { letter-spacing: 0.1em; }
  .contactInfo dt:first-child { margin-top: 0; }
  .contactInfo dd {
    margin: 4px 0 0;
    font-size: 21px;
    letter-spacing: 0.04em;
    color: var(--brand-brown);
  }
  .form { display: grid; gap: 20px; }
  .form__row { display: grid; gap: 8px; }
  .form__label { font-size: 12px; letter-spacing: 0.06em; color: var(--text-sub); }
  .form__req { color: #a4553f; }
  .form input,
  .form select,
  .form textarea {
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: 12px 14px;
    width: 100%;
  }
  /* 標準の矢印を消し、細い山形を自前で描く */
  .form select {
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--brand-brown) 50%),
      linear-gradient(135deg, var(--brand-brown) 50%, transparent 50%);
    background-position: right 20px center, right 14px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
  }
  .form textarea { resize: vertical; min-height: 130px; }
  .form input:focus-visible,
  .form select:focus-visible,
  .form textarea:focus-visible {
    outline: 1px solid var(--brand-brown);
    outline-offset: 1px;
  }
  .form__submit { justify-self: start; cursor: pointer; }
  .form__note { margin: 0; font-size: 11.5px; color: var(--text-sub); }

  /* ==== CONTACT：送信結果モーダル ==== */
  .contactModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(74, 64, 56, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
  }
  .contactModal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--paper);
    border-radius: var(--radius);
    padding: 40px 42px;
    text-align: center;
  }
  .contactModal__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--brand-brown);
    cursor: pointer;
  }
  .contactModal__close:hover { background: rgba(106, 90, 72, 0.06); }
  .contactModal__title {
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.6;
    color: var(--brand-brown);
    margin: 0 0 12px;
  }
  .contactModal--error .contactModal__title { color: #9a4a3f; }
  .contactModal__body {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text);
    margin: 0;
  }

  /* 枠線ボタン */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 15px 30px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--brand-brown);
    text-decoration: none;
    background: transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .btn::after { content: "→"; transition: transform 0.28s ease; }
  .btn:hover, .btn:focus-visible {
    background: var(--brand-brown);
    color: #fff;
    border-color: var(--brand-brown);
  }
  .btn:hover::after, .btn:focus-visible::after { transform: translateX(5px); }

  /* ==== フッター ==== */
  .footer {
    background: var(--footer-brown);
    color: #fff;
    padding-block: clamp(40px, 5vw, 64px);
  }
  .footer__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
  }
  .footer__logo { text-align: center; }
  .footer__logo .mark {
    font-family: var(--font-latin);
    font-size: 30px;
    letter-spacing: 0.04em;
  }
  .footer__logo .name { font-size: 12px; letter-spacing: 0.24em; }
  .footer__logo .sub {
    font-family: var(--font-mincho);
    font-size: 18px;
    letter-spacing: 0.14em;
    opacity: 0.92;
    margin-top: 6px;
  }
  .footer__logo .note {
    font-size: 9.5px;
    letter-spacing: 0.22em;
    opacity: 0.7;
  }
  .footer__statement {
    font-family: var(--font-mincho);
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: clamp(28px, 4.5vw, 64px);
    font-weight: 500;
  }
  .footer__actions { display: grid; justify-items: center; gap: 20px; }
  .btn--onFooter { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
  .btn--onFooter:hover, .btn--onFooter:focus-visible {
    background: #fff;
    color: var(--footer-brown);
    border-color: #fff;
  }
  .sns { display: flex; gap: 14px; }
  .sns a {
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .sns a:hover, .sns a:focus-visible { background: #fff; color: var(--footer-brown); }

  /* フォーカスリング（キーボード操作を見失わないように） */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--brand-brown);
    outline-offset: 3px;
  }

  /* ==== 中間サイズ ==== */
  @media (max-width: 1100px) {
    /* ヒーローは左テキスト＋円の2列にし、写真は下段いっぱいに置く */
    .hero__grid { grid-template-columns: 1fr 0.85fr; }
    .circle { margin-right: 0; }
    .productGrid { grid-template-columns: repeat(2, 1fr); }
    .storyGrid, .contactGrid, .about { grid-template-columns: 1fr; }
    .features { grid-template-columns: repeat(2, 1fr); }
    .feature + .feature { border-left: none; padding-left: 0; }
    .footer__inner { grid-template-columns: 1fr; }
    .footer__statement { border-left: none; padding-left: 0; }
  }

  /* ==== モバイル ==== */
  @media (max-width: 767px) {
    .wrap { padding-inline: 20px; }
    /* 狭い画面ではメニューが開いて高さが変わるので、
       高さ固定と fixed をやめて通常の sticky に戻す（縮小演出も無効） */
    body { padding-top: 0; }
    .header { position: sticky; }
    .header__inner {
      height: auto;
      padding-block: 12px;
      gap: 16px;
      flex-wrap: wrap;
    }
    .logo { padding-right: 20px; }
    .logo__mark { font-size: 26px; }
    .navToggle { display: block; }
    .nav {
      flex-basis: 100%;
      margin-left: 0;
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }
    .nav__list { flex-direction: column; gap: 12px; }
    .nav__link { text-align: left; }
    .nav__link::after { display: none; }
    .hero__grid { grid-template-columns: 1fr; }
    /* 縦積みでは写真の上に文字が重なるため、かすみを全面にかける
       （content が無いと疑似要素は生成されないため必須） */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(180deg,
        rgba(251, 249, 245, 0.75) 0%,
        rgba(251, 249, 245, 0.5) 55%,
        rgba(251, 249, 245, 0.3) 100%);
    }
    /* 縦積みでは画面を埋めたいので cover に戻す */
    .fv__bg { object-fit: cover; object-position: 52% 50%; padding: 0; }
    /* テキスト量に合わせて高さを詰め、下の特徴カードとの間延びを防ぐ */
    .hero { min-height: auto; padding-block: 32px 24px; }
    .circle {
      aspect-ratio: auto;
      border-radius: var(--radius);
      padding: 22px 20px;
      /* 縦積みでは中央寄せをやめ、本文と同じ左揃えに統一する */
      text-align: left;
      /* 角丸の四角になるので、円弧ではなく通常の枠線に戻す */
      border: 1px solid var(--line-strong);
      text-align: center;
    }
    .circle__ring { display: none; }
    .circle__list { justify-content: center; }
    .features, .productGrid { grid-template-columns: 1fr; }
    .about__photos { grid-template-columns: 1fr; }
    .about__photos .photo { aspect-ratio: 4 / 3; }
    .infoTable { grid-template-columns: 1fr; }
    .infoTable dd { border-top: none; padding-top: 0; }
    /* 日付・カテゴリ・見出しを縦積みに */
    .news { grid-template-columns: 1fr; gap: 8px; }
    .careLayout { grid-template-columns: 1fr; }
    /* 狭い画面では意図した改行が邪魔になるので、自然な折り返しに任せる */
    .sectionHead__lead br { display: none; }
    .photo--care { aspect-ratio: 4 / 3; }
    .faq__q { padding: 18px 40px 18px 34px; }
    .faq__a { padding: 0 40px 20px 34px; }
    .map iframe { height: 300px;}
    /* セクション同士・特徴カードの余白が間延びするので詰める */
    .section { padding-block: 48px; }
    .features { padding: 24px 20px; }
    .features__outer { padding-bottom: 20px; }
  }

  /* 動きを控えたい設定の人には、演出を切って最終状態だけ見せる */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .circle__ringArc { stroke-dashoffset: 0 !important; }
  }