@charset "UTF-8";
/* =============================================================
   Asia nursery リニューアル デモ
   参考: kawashimaseed.jp の「左サイドバー型」レイアウトを忠実に再現
   ============================================================= */

/* -------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------- */
:root {
  --green: #2e8b57;  /* 面（ボタン/丸/枠）。6/27 #00a23f→くすませ（ビビッド緑とセージの中間） */
  --accent: #db7093;  /* アクセント(palevioletred)：文字・リンク用 */
  --green-deep: #256e45;  /* ボタンhover＝--green の濃色 */
  --ink: #2f342f;
  --gray: #687770;
  --gray-2: #88948f;
  --muted: #9a9a96;
  --line: #dcdcd8;
  --bg: #ffffff;          /* ページ背景（ホワイト） */
  --card: #eef0eb;        /* 商品カード等の薄グレー */
  --white: #fff;
  --wm: #d7d7d2;          /* 巨大英字ウォーターマーク色 */
  --dark: rgb(68, 93, 74); /* Information / フッター セクション緑 */
  --paper-soft: #f4f4f1;

  --c-red:    #d82129;  /* 必須バッジ */

  --f-en: "Outfit", sans-serif;
  --f-ja: "Zen Kaku Gothic New", sans-serif;
  --f-serif: "Libertinus Serif Display", serif;   /* 見出し英字(c-head__en/p-pagehead__en/c-sectitle__en)用セリフ：Linux Libertine系譜のトランジショナル。GF配信・wt400のみ。6/25確定 */

  --side: clamp(208px, 17vw, 248px);  /* 左サイドバー幅：769px〜で流動（6/27、981-1200の固定調整を廃止しBP1本化） */
  --content-max: 985px;   /* 本文の最大幅＝1280時の本文域(1280−side218−余白77)。これ以上は伸ばさずロック＝左寄せ右ガター。hero/フッター背景は対象外で全幅維持（6/27） */
  --btn-line: #c4c3be;   /* ボタンリンクの枠線（グレー）。白背景＋緑矢印で全ボタン統一 6/27 */
  --pad-l: clamp(16px, 2vw, 32px);
  --pad-r: clamp(16px, 2vw, 32px);
  --radius: 22px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* -------------------------------------------------------------
   2. リセット & ベース
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-ja); font-weight: 400;
  color: var(--ink); background: var(--bg);
  line-height: 1.9; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s, opacity .3s; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p,figure { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
.u-en { font-family: var(--f-en); }

/* スクロールフェードイン（JS有効時のみ。JS無効でも内容は必ず表示） */
.js .u-fade { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .u-fade.is-shown { opacity: 1; transform: none; }
.u-fade[data-delay="1"] { transition-delay: .1s; }
.u-fade[data-delay="2"] { transition-delay: .2s; }
.u-fade[data-delay="3"] { transition-delay: .3s; }

/* -------------------------------------------------------------
   3. ページ骨格（左サイドバー＋メイン）
   ------------------------------------------------------------- */
.l-page { display: flex; align-items: flex-start; }   /* 左寄せ。hero/フッターは全幅維持（旧:max-width1440中央寄せだと大画面でhero/footer右に白余白が出るため撤去 6/29）。本文の伸びは --content-max:985 でキャップ */
.l-main { flex: 1; min-width: 0; padding: 0 var(--pad-r) 0 var(--pad-l); overflow-x: clip; }   /* 装飾の右はみ出しをここで抑える（html に置くとサイドバーの sticky が壊れる） */
/* 左サイドバー（実サイトの lHeader 相当：sticky） */
.l-side {
  position: sticky; top: 0; flex-shrink: 0;
  width: var(--side); height: 100vh;
  display: flex; flex-direction: column;
  padding: 40px 26px 34px 38px;
  z-index: 1002;
}
.l-side__logo { display: block; }
.l-side__logo img { width: clamp(140px, 11.5vw, 168px); height: auto; }   /* サイドバー幅(clamp)に追従 6/27 */
.l-side__toggle { display: none; }   /* PCでは非表示（モバイルでハンバーガー） */
.l-side__body { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.l-side__nav { margin-top: clamp(40px, 7vh, 92px); }
.l-side__nav li { margin-bottom: 22px; }
.l-side__nav a { font-size: .98rem; font-weight: 500; position: relative; }
.l-side__nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--green); transition: width .4s var(--ease); }
.l-side__nav a:hover,
.l-side__nav .is-current a { color: var(--accent); }
.l-side__nav a:hover::after,
.l-side__nav .is-current a::after { width: 100%; }
.l-side__nav .is-current .en { color: var(--accent); }
.l-side__foot { margin-top: auto; }
.l-side__tels { display: none; margin-top: 20px; }
.l-side__tels-head { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); margin-bottom: 5px; }
.l-side__tels-desc { font-size: .74rem; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
.l-side__tel-list { border-top: 1px solid var(--line); }
.l-side__tel-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.l-side__tel-item small { font-size: .66rem; letter-spacing: .08em; color: var(--muted); }
.l-side__tel { font-family: var(--f-en); font-weight: 600; font-size: 1.04rem; letter-spacing: .01em; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; }
.l-side__tel small { font-size: .7rem; font-weight: 600; }
.l-side__sns { display: flex; gap: 12px; margin-top: 16px; }
.l-side__sns img { width: 26px; height: 26px; }
/* メニューEN表記（小さなキッカー）＋ foot サブナビ（news/company/contact）6/25 */
.l-side__nav a, .l-side__foot-nav a { display: inline-block; }
.l-side__nav .en { display: block; font-family: var(--f-en); font-size: .58rem; font-weight: 600; letter-spacing: .14em; line-height: 1; color: var(--muted); margin-bottom: 3px; }
.l-side__foot-nav { margin-top: 24px; }
.l-side__foot-nav li { margin-bottom: 13px; }
.l-side__foot-nav li:last-child { margin-bottom: 0; }
.l-side__foot-nav a { font-size: .82rem; font-weight: 500; color: var(--muted); }
.l-side__foot-nav .en { display: block; font-family: var(--f-en); font-size: .5rem; font-weight: 600; letter-spacing: .14em; line-height: 1; color: var(--muted); margin-bottom: 2px; }
.l-side__nav a:hover .en, .l-side__foot-nav a:hover .en { color: var(--accent); }
.l-side__foot-nav a:hover { color: var(--accent); }

/* -------------------------------------------------------------
   4. 共通コンポーネント
   ------------------------------------------------------------- */
.l-section { padding-block: clamp(56px, 8vw, 110px); max-width: var(--content-max); margin-inline: auto; }   /* 1280でロック。広い画面ではmain内で中央寄せ（hero/footerは全幅）6/29。hero(.p-hero)/フッター(.l-footer)は.l-sectionでないため全幅維持 */

/* セクション見出し：● 日本語ラベル ＋ 巨大英字ウォーターマーク */
.c-head { margin-bottom: clamp(28px, 4vw, 52px); }
.c-head__label { display: flex; align-items: center; gap: 11px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.c-head__label::before { content: ""; width: 28px; height: 1px; background: currentColor; flex-shrink: 0; }   /* L1 装飾線（1px・ラベル色に追従）6/25 */
.c-head__en { font-family: var(--f-serif); font-weight: 400; font-size: clamp(3.4rem, 8vw, 5.5rem); line-height: .95; color: var(--wm); letter-spacing: .02em; margin-top: 2px; }   /* 字間を下層 .c-sectitle__en と統一(.02em) 6/26 */
/* EN上・ラベル下のロックアップ（全セクション見出し統一）6/25。非split=.c-head直下／split=内側div */
.c-head:not(.c-head--split), .c-head--split > div { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
/* 見出し右に説明文 */
.c-head--split { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }   /* 見出し左・説明文右で両端寄せ（6/27）。align center／introを広めにして間延びを抑える。flex-wrapで狭幅は折返し */
.c-head--on-dark.c-head--split { margin-left: 30px; margin-top: clamp(24px, 3vw, 44px); }   /* p-info の左上角丸（反転後）を避ける＋見出し上の余白 */
.c-head__intro { max-width: 640px; font-size: .92rem; color: var(--gray); padding-bottom: 12px; }   /* PC で広め（特に Lineup の長文）。space-between の間延び対策で 560→640（6/27）。モバイルは折返しで実質フル幅 */
.c-head--on-dark .c-head__label { color: #fff; }
.c-head--on-dark .c-head__en { color: #fff; }   /* Information：intro削除に伴い白の可視見出しに。サイズは既定の大型(.c-head__en)に復帰 6/25 */
.c-head--on-dark .c-head__intro { color: rgba(255,255,255,.7); }
/* ≤768：見出しを縮小し「横並び（見出し左・説明文右）」を維持（6/27） */
@media (max-width: 768px) {
  .c-head__en, .c-sectitle__en { font-size: clamp(2rem, 7.5vw, 3.5rem); }
  .c-head--on-dark .c-head__en { font-size: clamp(2rem, 7.5vw, 3rem); } /* Information は現状維持 */
  .c-head--split { gap: 16px; }   /* justify-content は PC の space-between を継承 */
  .c-head--split > div { flex-shrink: 0; }
  .c-head__intro { flex: none; max-width: 420px; font-size: .82rem; padding-bottom: 0; }
}

/* 矢印付きボタン */
.c-btn { display: inline-flex; align-items: center; gap: 16px; padding: 15px 24px 15px 30px; border: 1px solid var(--btn-line); border-radius: 999px; font-family: var(--f-en); font-weight: 500; font-size: .88rem; letter-spacing: .06em; transition: background .4s var(--ease), color .4s, border-color .4s; }
.c-btn__arrow { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.c-btn__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: #fff; transform: translate(-50%,-50%); }
.c-btn__arrow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translate(calc(-50% + 4px),-50%) rotate(45deg); }
.c-btn:hover { background: var(--ink); color: #fff; }
/* c-btn--fill は通常ボタン(.c-btn)と統一＝白背景・グレー枠・緑矢印。緑ベタ塗りは廃止（6/27）。Information のみ下記 .p-info で白ボタン化 */
/* ダーク背景（Information）上：白背景ボタンに反転。矢印バッジは緑のまま映える */
.p-info .c-btn--fill { background: #fff; border-color: #fff; color: var(--ink); }
.p-info .c-btn--fill .c-btn__arrow { background: var(--green); }
.p-info .c-btn--fill .c-btn__arrow::before { background: #fff; }
.p-info .c-btn--fill .c-btn__arrow::after { border-color: #fff; }
.p-info .c-btn--fill:hover { background: #e9efe9; border-color: #e9efe9; }
.c-btn-wrap { margin-top: 44px; }
.c-btn-wrap--center { text-align: center; }

/* カテゴリータグ */
.c-tag { display: inline-block; min-width: 84px; text-align: center; padding: 3px 12px; font-size: .7rem; font-weight: 500; letter-spacing: .04em; border-radius: 4px; line-height: 1.7; background: transparent; }
/* 案C＝アウトライン（枠線＋同系の色文字・塗りなし・細字500）。セージ×ローズ軸 6/27 */
.c-tag--info   { border: 1px solid #cdddcf; color: #3f5d49; }  /* お知らせ：セージ */
.c-tag--event  { border: 1px solid #e6bccb; color: #b3597a; }  /* キャンペーン：ローズ */
.c-tag--stock  { border: 1px solid #e3d4a6; color: #8a6a1e; }  /* 入荷情報：ゴールド */
.c-tag--sale   { border: 1px solid #e6c8b8; color: #a85d3c; }  /* お買得情報：テラコッタ */
.c-tag--report { border: 1px solid #ddccdf; color: #74577e; }  /* 重要：プラム */

/* -------------------------------------------------------------
   5. ヒーロー（全幅1枚・ふんわりフェードスライダー）
   ------------------------------------------------------------- */
.p-hero { position: relative; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); }
.p-hero__slider { position: relative; height: min(86vh, 800px); overflow: hidden; border-radius: 0 0 0 250px; }
.p-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease-in-out; }
.p-hero__slide.is-active { opacity: 1; }
.p-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s ease-in-out; }
/* 3枚で拡大／縮小／拡大と交互ズーム。非アクティブ側にもtransformトランジションを効かせ、切替の段差(カクッ)を解消 */
.p-hero__slide:nth-child(odd).is-active img  { transform: scale(1.14); }  /* ズームイン */
.p-hero__slide:nth-child(even).is-active img { transform: scale(1.02); }  /* ズームアウト */
.p-hero__slider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(25,38,28,.62), rgba(25,38,28,.05) 52%, rgba(0,0,0,0) 75%); }
.p-hero__copy { position: absolute; z-index: 3; left: 185px; bottom: 55px; color: #fff; }   /* PC/タブレットは左下・左寄せ（en と h1 が左揃え）。中央寄せは≤480のみ 6/29訂正 */
.p-hero__en { font-family: var(--f-en); font-weight: 600; letter-spacing: .28em; font-size: clamp(.82rem,1.4vw,1.05rem); margin-bottom: 14px; }
.p-hero__catch { font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.38; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 2px 34px rgba(0,0,0,.4); }
/* NEWS行（スライダー下・白地） */
.p-hero__news { display: flex; align-items: center; gap: 18px; padding: 22px var(--pad-r) 0 var(--pad-l); font-size: .9rem; }   /* hero直下のティッカー＝heroブロックの一部として左寄せ維持 */
.p-hero__news .lbl { font-family: var(--f-en); font-weight: 600; letter-spacing: .12em; color: var(--accent); flex-shrink: 0; }
.p-hero__news .date { font-family: var(--f-en); color: var(--muted); flex-shrink: 0; }
.p-hero__news .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hero__news .txt:hover { color: var(--accent); }

/* -------------------------------------------------------------
   6. About（葉アイコン＋大見出し＋丸写真＋本文）
   ------------------------------------------------------------- */
.p-about { text-align: center; position: relative; }
.p-about__catch { font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.7; }
.p-about__body { position: relative; z-index: 1; max-width: 560px; margin: 36px auto 0; color: var(--gray); font-size: .98rem; text-align: center; }
.p-about__body p + p { margin-top: 1.3em; }

/* -------------------------------------------------------------
   7. Lineup（非対称 角丸カード）
   ------------------------------------------------------------- */
.p-lineup__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-lineup__item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--card); aspect-ratio: 3 / 4; }
.p-lineup__item:nth-child(4n+2), .p-lineup__item:nth-child(4n+3) { margin-top: 44px; }  /* 交互に下げて段差 */
.p-lineup__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.p-lineup__item:hover img { transform: scale(1.07); }
.p-lineup__ja { position: absolute; top: 16px; left: 18px; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); z-index: 1; }
.p-lineup__en { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-family: var(--f-en); font-size: .78rem; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); z-index: 1; }
.p-lineup__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 58%, rgba(0,0,0,.34)); }

/* -------------------------------------------------------------
   8. Information（ダークセクション）
   ------------------------------------------------------------- */
.p-info { background: var(--dark); color: #fff; border-radius: 250px 0 250px 0; overflow: hidden; padding: clamp(44px, 5.5vw, 76px) clamp(56px, 5vw, 72px) clamp(92px, 10vw, 120px); }
.p-info__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 8px; }
/* カード：アイブロウ / 見出し / リード / リンク / 横幅画像（組み方のみ参考。背景・アイブロウは元のまま） */
.p-info__card { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border-radius: 18px; padding: 30px; transition: background .4s; }
.p-info__card:hover { background: rgba(255,255,255,.09); }
.p-info__card .en { font-family: var(--f-en); font-size: .74rem; letter-spacing: .12em; color: var(--accent); }
.p-info__card h3 { font-size: 1.3rem; font-weight: 700; margin: 5px 0 10px; }
.p-info__card p { font-size: .88rem; color: rgba(255,255,255,.72); margin-top: 14px; }
.p-info__card .arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .85rem; font-weight: 500; color: var(--accent); }
.p-info__card .arrow::after { content: "→"; font-family: var(--f-en); transition: transform .3s; }
.p-info__card:hover .arrow::after { transform: translateX(5px); }
.p-info__card-img { margin-top: 18px; border-radius: 12px; overflow: hidden; }
.p-info__card .c-btn { margin-top: 20px; align-self: flex-start; }
.p-info__card-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
/* 特集バナー（あまえくぼ枠＝当日予約） */
.p-info__feature { display: grid; grid-template-columns: 1fr 240px; gap: clamp(24px,3vw,40px); align-items: center; margin-top: 20px; background: rgba(255,255,255,.05); border-radius: 18px; padding: 26px clamp(26px,3vw,40px); }
.p-info__feature .body { padding: 0; }
.p-info__feature .en { font-family: var(--f-en); letter-spacing: .14em; color: var(--accent); font-size: .76rem; }
.p-info__feature h3 { font-size: clamp(1.2rem,2vw,1.6rem); margin: 4px 0 10px; line-height: 1.5; }
.p-info__feature h3 b { color: var(--accent); }
.p-info__feature p { font-size: .88rem; color: rgba(255,255,255,.75); }
.p-info__feature .pic { display: flex; align-items: center; justify-content: center; }
.p-info__feature .pic img { width: 100%; max-width: 200px; height: auto; filter: brightness(0) invert(1); } /* ハナノワ白ロゴ */

/* -------------------------------------------------------------
   9. Q&A（アコーディオン）／ 旧カードグリッドは削除済み
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   10. News（一覧）
   ------------------------------------------------------------- */
.p-news__filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.p-news__filter button { padding: 7px 20px; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; color: var(--gray); background: #fff; transition: all .3s; }
.p-news__filter button.is-active, .p-news__filter button:hover { background: var(--green); color: #fff; border-color: var(--green); }
.p-news__item { display: flex; align-items: center; gap: 20px; padding: 20px 6px; border-bottom: 1px solid var(--line); }
.p-news__item .date { font-family: var(--f-en); color: var(--muted); font-size: .85rem; flex-shrink: 0; width: 90px; }
.p-news__item .title { font-size: .94rem; font-weight: 500; }
.p-news__item .title:hover { color: var(--accent); }

/* 新着記事（単一投稿）ページ 6/26 */
.p-article { max-width: 760px; }
.p-article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.p-article__meta .date { font-family: var(--f-en); color: var(--muted); font-size: .9rem; }
.p-article__title { font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 700; line-height: 1.6; padding-bottom: clamp(20px,3vw,28px); border-bottom: 1px solid var(--line); }
.p-article__body { margin-top: clamp(28px,4vw,40px); color: var(--ink); font-size: .88rem; }   /* 記事本文(p/li)も .88rem に統一（旧16px継承）6/29 */
.p-article__body p { line-height: 2; margin-bottom: 1.6em; }
.p-article__body h2 { font-size: clamp(1.2rem,2.2vw,1.45rem); font-weight: 700; line-height: 1.6; margin: 2.2em 0 1em; padding-left: 14px; border-left: 3px solid var(--green); }
.p-article__body figure { margin: 2em 0; }
.p-article__body figure img { width: 100%; border-radius: var(--radius); display: block; }
.p-article__body figcaption { margin-top: 8px; font-size: .8rem; color: var(--muted); text-align: center; }
.p-article__body ul { margin: 1.6em 0; padding-left: 1.3em; }
.p-article__body li { line-height: 1.95; list-style: disc; }
.p-article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.p-article-nav { display: flex; justify-content: space-between; gap: 16px; max-width: 760px; margin-top: clamp(36px,5vw,56px); padding-top: clamp(22px,3vw,30px); border-top: 1px solid var(--line); font-size: .9rem; }
.p-article-nav a { color: var(--gray); }
.p-article-nav a:hover { color: var(--accent); }
.p-article-nav span.is-disabled { color: var(--line); }

/* -------------------------------------------------------------
   11. Instagram
   ------------------------------------------------------------- */
.p-insta__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.p-insta__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; }
.p-insta__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.p-insta__item:hover img { transform: scale(1.08); }
.p-sns-links { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 32px; }
.p-sns-links a { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-en); font-size: .9rem; }
.p-sns-links img { width: 28px; height: 28px; }

/* -------------------------------------------------------------
   11b. 制作事例（トップ・特集3カード／gallery 導線）
   ------------------------------------------------------------- */
.p-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.p-works__card { display: block; color: inherit; text-decoration: none; }
.p-works__img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.p-works__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-works__card:hover .p-works__img img,
.p-works__card:focus-visible .p-works__img img { transform: scale(1.05); }
.p-works__label { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.p-works__label .ja { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; color: var(--ink); }
.p-works__label .en { font-family: var(--f-en); font-size: .66rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.p-works__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--accent); }
.p-works__go span { transition: transform .3s var(--ease); }
.p-works__card:hover .p-works__go span { transform: translateX(4px); }
@media (max-width: 768px) { .p-works__grid { gap: 14px; } }   /* 768px: 3列維持・gap縮小のみ */

/* -------------------------------------------------------------
   12. フッター
   ------------------------------------------------------------- */
.l-footer { background: var(--dark); color: rgba(255,255,255,.8); margin: clamp(60px,8vw,100px) calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); border-radius: 250px 0 0 0; padding: clamp(96px,10vw,128px) clamp(64px,7vw,104px) 30px; }
.l-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 36px; padding-bottom: 44px; max-width: var(--content-max); margin-inline: auto; }   /* 背景は全幅ブリード維持・中身は本文と同じくロック＆中央寄せ 6/29 */
.l-footer__logo { font-family: var(--f-serif); color: #fff; line-height: 1.05; }   /* ロゴはテキスト表示（見出しENと同じLibertinus）6/26 */
.l-footer__logo .en { display: block; font-size: .82rem; letter-spacing: .14em; }
.l-footer__logo .name { display: block; font-size: clamp(1.8rem,2.8vw,2.2rem); margin-top: 2px; }
.l-footer__brand p { margin-top: 18px; font-size: .82rem; color: rgba(255,255,255,.6); max-width: 34em; }   /* 30ch=CJKに狭すぎ→折返し。em(≈1字)で説明文を1行に 6/26 */
.l-footer__nav { display: flex; gap: clamp(36px,5vw,72px); flex-wrap: wrap; }
.l-footer__nav-head { font-family: var(--f-en); font-size: .78rem; letter-spacing: .12em; color: var(--accent); margin-bottom: 16px; background: transparent; border: 0; padding: 0; cursor: default; }   /* PCは見出し扱い（クリック無効・トグル非表示）*/
.l-footer__nav-head .toggle { display: none; }
.l-footer__nav li { margin-bottom: 11px; }
.l-footer__nav a { font-size: .88rem; color: rgba(255,255,255,.82); }
.l-footer__nav a:hover { color: #fff; }
.l-footer__sns { display: flex; gap: 12px; margin-top: 14px; }
.l-footer__sns a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #fff; border-radius: 50%; transition: transform .3s; }
.l-footer__sns a:hover { transform: translateY(-3px); }
.l-footer__sns img { width: 22px; height: 22px; }
.l-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: var(--content-max); margin-inline: auto; }   /* topと揃えて中央寄せ 6/29 */
.l-footer__copy { font-family: var(--f-en); font-size: .74rem; color: rgba(255,255,255,.5); letter-spacing: .06em; }
.l-footer__bottom a { font-size: .78rem; color: rgba(255,255,255,.6); }

/* ページトップへ戻る（フロート）。既定=緑背景/白矢印、濃色セクション重なり時=白背景/緑矢印（JSで is-on-dark 付与）6/29 */
.c-pagetop { position: fixed; right: clamp(16px,3vw,32px); bottom: clamp(16px,3vw,32px); z-index: 80; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; border: 1px solid var(--green); box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s, color .4s, border-color .4s; }
.c-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.c-pagetop.is-on-dark { background: #fff; color: var(--green); border-color: #fff; }
.c-pagetop__arrow { width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(-45deg); margin-top: 3px; }
body.is-menu-open .c-pagetop { opacity: 0; visibility: hidden; }   /* ドロワー表示中は隠す */

/* -------------------------------------------------------------
   13. 下層ページ共通：ページ見出し（メイン領域の上部）
   ------------------------------------------------------------- */
.p-pagehead { padding: 40px 0 8px; }
.p-pagehead__inner { text-align: right; }   /* 下層ページ見出しを右寄せ（パンくずは別領域なので影響なし）6/26 */
.p-pagehead__en { font-family: var(--f-serif); font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 400; line-height: 1; color: var(--ink); letter-spacing: .02em; }
.p-pagehead__ja { font-size: .92rem; font-weight: 700; color: var(--accent); margin-top: 6px; }
.p-breadcrumb { font-size: .76rem; color: var(--muted); padding: 14px 0 0; }
.p-breadcrumb a:hover { color: var(--accent); }
.p-breadcrumb span { margin: 0 8px; }
.p-lead { margin: 0 0 clamp(40px,5vw,64px); color: var(--gray); }
.p-lead h2 { font-size: clamp(1.4rem,2.6vw,1.9rem); color: var(--ink); margin-bottom: 16px; }
.p-lead p { font-size: .88rem; }   /* 導入文も本文に統一（旧16px継承）6/29 */

/* 店舗案内 */
.p-store__item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: stretch; }   /* 画像とテキストの縦幅を揃える（画像をテキスト高さにstretch）6/26 */
.p-store__item + .p-store__item { margin-top: clamp(40px,6vw,80px); }
/* 全店「写真左・テキスト右」で統一（6/26・旧zigzag反転を解除） */
.p-store__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }   /* height:100%=PC2カラム時はテキスト高さに追従／aspect-ratioは1カラム時のフォールバック */
.p-store__badge { display: inline-block; margin-bottom: 12px; padding: 4px 16px; border-radius: 999px; background: #eef3ee; color: var(--green-deep); font-size: .74rem; font-weight: 700; }
.p-store__name { font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 700; }
.p-store__name .en { display: block; font-family: var(--f-en); font-size: .78rem; color: var(--accent); font-weight: 600; letter-spacing: .12em; margin-bottom: 4px; }
.p-store__table { margin-top: 18px; font-size: .88rem; }
.p-store__table th, .p-store__table td { text-align: left; vertical-align: top; padding: 11px 0; border-bottom: 1px solid var(--line); }
.p-store__table th { width: 96px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.p-store__tel { font-family: var(--f-en); font-weight: 600; }

/* 会社案内 */
.p-company__greeting { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,5vw,64px); align-items: center; }
.p-company__greeting img { border-radius: var(--radius); }
.p-company__greeting h3 { font-size: clamp(1.4rem,2.6vw,1.9rem); line-height: 1.7; margin-bottom: 20px; }
.p-company__greeting h3 span { color: var(--accent); }
.p-company__greeting p { color: var(--gray); font-size: .88rem; }
.p-company__greeting .sign { margin-top: 22px; font-size: .9rem; }
.p-company__greeting .sign b { font-size: 1.15rem; margin-left: 8px; }
.p-table { font-size: .88rem; max-width: 900px; }   /* 会社概要テーブル 本文統一（.93→.88）6/29 */
.p-table th, .p-table td { text-align: left; vertical-align: top; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.p-table th { width: 200px; color: var(--accent); font-weight: 700; background: #f3f5f1; padding-left: 22px; }

/* フォーム */
.p-form { max-width: 760px; margin-inline: auto; }   /* フォームを中央寄せ 6/26 */
.p-form__row { margin-bottom: 26px; }
.p-form__row label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 9px; }
.p-form__row .req { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: .66rem; background: var(--c-red); color: #fff; border-radius: 3px; vertical-align: middle; }
.p-form__row .opt { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: .66rem; background: var(--gray-2); color: #fff; border-radius: 3px; vertical-align: middle; }
.p-form input[type=text], .p-form input[type=email], .p-form input[type=tel], .p-form select, .p-form textarea { width: 100%; padding: 13px 15px; border: 1px solid #cfcfca; border-radius: 10px; font-family: inherit; font-size: 1rem; background: #fff; transition: border-color .3s, box-shadow .3s; }
.p-form input:focus, .p-form select:focus, .p-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,139,87,.12); }
.p-form textarea { min-height: 160px; resize: vertical; }
.p-form__radio { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.p-form__radio label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.p-form__agree { text-align: center; margin: 32px 0; font-size: .9rem; }
.p-form__agree a { color: var(--accent); text-decoration: underline; }
.p-form__submit { text-align: center; }
.p-contact-info { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; max-width: 760px; margin-bottom: 48px; }
.p-contact-info--3 { grid-template-columns: repeat(3,1fr); max-width: 980px; }   /* 店舗連絡先3カード（PCのみ3列／768以下は下記MQで1列）旧インラインstyleから移行 6/29 */
.p-contact-info__card { text-align: center; padding: 30px 22px; background: #fff; border: 1px solid #eceeea; border-radius: var(--radius); box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }
.p-contact-info__card .en { font-family: var(--f-en); color: var(--accent); font-size: .76rem; font-weight: 600; letter-spacing: .12em; }
.p-contact-info__card .big { font-family: var(--f-en); font-size: 1.7rem; font-weight: 600; margin: 4px 0; display: block; }
.p-contact-info__card p { font-size: .8rem; color: var(--muted); }

/* ギフトページ */
.p-gift__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.p-gift__hero img { border-radius: var(--radius); }
.p-gift__hero .en { font-family: var(--f-en); color: var(--accent); font-weight: 600; letter-spacing: .14em; font-size: .74rem; }   /* 他のenラベルと統一（旧:未指定で16px）6/29 */
.p-gift__hero h2 { font-size: clamp(1.7rem,3.2vw,2.4rem); line-height: 1.5; margin: 12px 0 20px; }
.p-gift__hero h2 span { color: var(--accent); }
.p-gift__hero p { color: var(--gray); font-size: .88rem; }   /* 本文統一（旧:未指定で16px）6/29 */
.p-gift__hero p + p { margin-top: .9em; }   /* 本文の段落間余白（6/26） */
.p-step { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: step; margin-top: clamp(22px,3vw,34px); }   /* 番号バッジ(::before top:-20px)が見出しに近づく分、上に余白を足す 6/26 */
.p-step__item { position: relative; background: #fff; border: 1px solid #eceeea; border-radius: var(--radius); padding: 40px 26px 30px; text-align: center; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }
.p-step__item::before { counter-increment: step; content: "0" counter(step); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--f-en); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.p-step__item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.p-step__item p { font-size: .88rem; color: var(--gray); }
.p-gift__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.p-gift__cards figure { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid #eceeea; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }
.p-gift__cards figcaption { padding: 15px; font-size: .8rem; text-align: center; color: var(--gray); }
/* TEL ORDER セクション：見出し左＋丸バッジ右（TEL ORDER の右隣・セクション内に収める）6/26 */
.p-telorder { position: relative; }
.p-telorder-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(28px,4vw,52px); }
.p-telorder-head .c-sectitle { margin-bottom: 0; }   /* 下余白は親(.p-telorder-head)側で管理 */
.p-telbadge { flex-shrink: 0; width: clamp(144px,16vw,166px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); text-align: center; }
.p-telorder:not(.l-section--soft) .p-telbadge { margin-right: clamp(20px,3vw,44px); }   /* 白背景TEL ORDER(gift)：soft時の padding-inline 相当の右余白をバッジに（6/26） */
.p-telbadge__lead { font-size: .76rem; font-weight: 700; color: var(--accent); line-height: 1.2; }   /* 大歓迎！＝小さめのリード（ローズ）6/29 */
.p-telbadge__main { font-size: clamp(.92rem,1.5vw,1.02rem); font-weight: 700; color: var(--ink); line-height: 1.3; }
.p-telbadge__sub { font-size: clamp(.86rem,1.5vw,.98rem); font-weight: 700; color: var(--ink); line-height: 1.35; margin-top: 2px; }
.p-telbadge__sub b { color: var(--accent); font-weight: 700; font-size: 1.18em; }
.p-telorder-more { text-align: center; margin-top: clamp(22px,3vw,34px); }
.p-telorder-link { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.p-telorder-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.p-telorder-link__arrow { transition: transform .3s var(--ease); }
.p-telorder-link:hover .p-telorder-link__arrow { transform: translateX(4px); }

/* TEL ORDER 注記（フットノート：カード下・小・控えめ）6/26 */
.p-telorder-note { font-size: .8rem; color: var(--muted); text-align: center; margin: clamp(20px,2.5vw,28px) 0 0; }

/* 背景色セクション（l-section--soft）内のカードは枠線・影なし＝面で見せる。白背景上のカード（contact等）は従来通り（6/26） */
.l-section--soft .p-contact-info__card,
.l-section--soft .p-step__item,
.l-section--soft .p-svc__card,
.l-section--soft .p-pay__card,
.l-section--soft .p-gift__cards figure { border: none; box-shadow: none; }

/* FAQ アコーディオン */
.p-faq__cat { font-family: var(--f-en); font-size: 1.3rem; font-weight: 600; color: var(--accent); margin: 48px 0 6px; padding-bottom: 10px; border-bottom: 2px solid #fff; }
.p-faq__cat:first-child { margin-top: 0; }
.p-qa-acc { max-width: 920px; }
.p-qa-acc__item { border-bottom: 1px solid var(--line); }
.p-qa-acc__q { display: flex; align-items: center; gap: 16px; padding: 22px 6px; font-weight: 700; font-size: 1rem; width: 100%; text-align: left; }
.p-qa-acc__q .mark { font-family: var(--f-en); font-size: 1.3rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.p-qa-acc__q .toggle { margin-left: auto; position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.p-qa-acc__q .toggle::before, .p-qa-acc__q .toggle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--green); transition: transform .4s; }
.p-qa-acc__q .toggle::before { width: 15px; height: 2px; }
.p-qa-acc__q .toggle::after { width: 2px; height: 15px; }
.p-qa-acc__item.is-open .toggle::after { transform: translate(-50%,-50%) scaleY(0); }
.p-qa-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.p-qa-acc__a > div { overflow: hidden; }
.p-qa-acc__item.is-open .p-qa-acc__a { grid-template-rows: 1fr; }
.p-qa-acc__a-inner { display: flex; gap: 16px; padding: 0 6px 26px; color: var(--gray); font-size: .88rem; }
.p-qa-acc__a-inner .mark { font-family: var(--f-en); font-size: 1.3rem; font-weight: 700; color: var(--gray-2); flex-shrink: 0; }

/* プライバシー等 文書 */
.p-doc { max-width: 860px; }
.p-doc h3 { font-size: 1.15rem; margin: 36px 0 12px; padding-left: 14px; border-left: 4px solid var(--green); }
.p-doc h3:first-child { margin-top: 0; }
.p-doc p, .p-doc li { color: var(--gray); font-size: .88rem; }   /* 本文統一（.93→.88）6/29 */
.p-doc ul { list-style: disc; padding-left: 1.4em; margin: 8px 0; }
.p-doc li { margin-bottom: 5px; }

/* -------------------------------------------------------------
   14. モバイル ドロワー（サイドバーが上部バー化）
   ------------------------------------------------------------- */
.l-drawer-backdrop { display: none; }

@media (max-width: 768px) {
  .l-page { display: block; }
  /* サイドバー → 上部固定バー（≤768px＝モバイル。iPad縦もこちら。BP1本化 6/27） */
  .l-side {
    position: fixed; top: 0; left: 0; width: 100%; height: 75px;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 18px; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.06);
  }
  .l-side__logo img { height: 50px; width: auto; }   /* 横バーは高さ基準でフィット（旧 width:132px は縦81px超でバーから溢れていた）6/27 */
  .l-side__toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 48px; height: 48px; border-radius: 50%; background: var(--green); z-index: 2; }
  .l-side__toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
  body.is-menu-open .l-side__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.is-menu-open .l-side__toggle span:nth-child(2) { opacity: 0; }
  body.is-menu-open .l-side__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* ナビ・連絡先をドロワー化 */
  .l-side__body {
    position: fixed; inset: 75px 0 0; width: 100%; height: auto;
    background: #fff; padding: 34px 20px 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .4s, transform .5s var(--ease), visibility .4s;
  }
  body.is-menu-open .l-side__body { opacity: 1; visibility: visible; transform: none; }
  .l-side__body { text-align: center; }
  .l-side__nav { margin-top: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .l-side__nav li { margin-bottom: 18px; }
  .l-side__nav a { font-size: 1.12rem; font-weight: 700; }
  .l-side__foot { margin-top: 28px; }
  .l-side__tels { display: block; margin-top: 0; }
  /* 店舗連絡先：3カード横並び */
  .l-side__tel-list { display: flex; gap: 6px; border-top: none; }
  .l-side__tel-item { flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
                      padding: 12px 4px; border: 1px solid var(--line); border-bottom-color: var(--line); border-radius: 10px; }
  .l-side__tel-item small { font-size: .68rem; }
  .l-side__tel { font-size: .86rem; }
  .l-side__sns { justify-content: center; margin-top: 24px; }
  /* サブナビ：横並び */
  .l-side__foot-nav { margin-top: 20px; }
  .l-side__foot-nav ul { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
  .l-side__foot-nav li { margin-bottom: 0; }
  .l-side__foot-nav .en { display: none; }
  .l-page { --pad-l: 18px; --pad-r: 18px; }
  .l-main { margin-top: 75px; }
  .l-footer { border-radius: 90px 0 0 0; padding: 70px 50px 28px; }
}


@media (max-width: 768px) {   /* ★主モバイルブロック：720→768 に統一（BP1本化）6/27 */
  .p-hero__slider { height: 65vh; border-radius: 0 0 0 90px; }   /* 62vh→65vh 6/27 */
  .p-hero__copy { left: 70px; }   /* 768は左寄せ（インセット縮小）*/
  .p-hero__catch { font-size: clamp(1.7rem, 6.5vw, 2.4rem); white-space: normal; }
  .p-hero__news { flex-wrap: wrap; gap: 8px 16px; }
  .p-lineup__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .p-lineup__item:nth-child(4n+2), .p-lineup__item:nth-child(4n+3) { margin-top: 0; }
  .p-lineup__item:nth-child(2n) { margin-top: 30px; }
  .p-lineup__item:nth-child(n+5) { display: none; }   /* ≤768px: 4枚表示 */
  .p-info { border-radius: 0 90px 0 90px; padding: 40px 22px clamp(56px,12vw,84px); }
  /* .p-info__cards は768でも2列維持（PC踏襲）。480以下で縦積みに */
  .p-qa__grid { grid-template-columns: 1fr; }
  .p-insta__grid { grid-template-columns: repeat(3, 1fr); }
  /* store__item/gift__hero/company__greeting/contact-info は768でPC多列を維持→≤480のみ1列（6/29訂正：768=多列が正） */
  .p-step, .p-gift__cards { grid-template-columns: 1fr; }
  .p-contact-info__card .big { font-size: 1.4rem; }   /* 連絡先3列(768)で電話番号が折り返さないよう縮小。375の1列でも適正 */
  /* ニュース一覧テキストを ≤768 で本文系に統一（タイトル.88/日付.8） */
  .p-news__item .title { font-size: .88rem; }
  .p-news__item .date { font-size: .8rem; }
  .p-about__body { font-size: .88rem; }   /* ≤768で本文統一（PCのみ.98）→768/375を揃える 6/29 */
  .l-footer__brand { max-width: 260px; }   /* 768px: テキスト幅を狭めてMENU/INFORMATIONを横並び */
  .p-table th { width: 120px; padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .u-fade { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------
   15. 下層ページ用 追加スタイル
   ------------------------------------------------------------- */
.l-container { width: 100%; }
.l-section--soft { background: #f4f4f1; border-radius: 28px; padding-inline: clamp(20px,3vw,44px); padding-block: clamp(32px,4.5vw,56px); }   /* 上下余白を全softセクションで統一（store電話セクション準拠）6/26 */

/* 旧 c-sectitle を新見出し（●ラベル＋巨大英字）スタイルに */
.c-sectitle { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: clamp(28px,4vw,52px); }   /* EN上・ラベル下（c-headに合わせる）6/26 */
.c-sectitle--left { align-items: flex-start; }
.c-sectitle__en { font-family: var(--f-serif); font-weight: 400; font-size: clamp(3.4rem, 8vw, 5.5rem); line-height: .95; color: var(--wm); letter-spacing: .02em; }   /* サイズをトップ .c-head__en と統一 6/26 */
.c-sectitle__ja { display: flex; align-items: center; gap: 11px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }   /* c-head__label と同体裁。ただし色は黒(--ink)維持 6/26 */
.c-sectitle__ja::before { content: ""; width: 28px; height: 1px; background: currentColor; flex-shrink: 0; }   /* L1 装飾線（1px・ラベル色=黒に追従）*/

/* 取扱商品ページ：その他のサービス（白カード） */
.p-svc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }   /* 4カード＝2×2（6/26） */
.p-svc__card { background: #fff; border: 1px solid #eceeea; border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }   /* 情報カード（非リンク）／gift動線はグリッド下のボタンに集約 6/26 */
.p-svc__thumb { aspect-ratio: 16/11; overflow: hidden; }
.p-svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-svc__body { padding: 24px 24px 28px; }
.p-svc__body .en { font-family: var(--f-en); color: var(--accent); font-size: .74rem; font-weight: 600; letter-spacing: .12em; }
.p-svc__body h3 { font-size: 1.2rem; font-weight: 700; margin: 6px 0 10px; }
.p-svc__body p { font-size: .88rem; color: var(--gray); }
.p-svc__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; list-style: none; padding: 0; }   /* 用途タグ（アウトラインピル）6/26 */
.p-svc__tags li { font-size: .72rem; font-weight: 600; color: var(--gray); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
/* SERVICES グリッド：768は2列維持（トップ踏襲）→ 480以下で1列。旧720BPは廃止（6/29） */

/* 取扱商品グリッドの旧ラベル（cap）互換 */
.p-lineup__cap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p-lineup__cap .ja { position: absolute; top: 16px; left: 18px; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.p-lineup__cap .en { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-family: var(--f-en); font-size: .78rem; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* -------------------------------------------------------------
   16. ハナノワ（外部 予約・EC サービス）連携
   ------------------------------------------------------------- */
.c-hananowa-logo { display: inline-block; width: 160px; margin-bottom: 16px; }
.c-hananowa-logo img { width: 100%; height: auto; display: block; border-radius: 0; }   /* .p-gift__hero img の角丸を打ち消す（ロゴは角丸不要）6/26 */
.c-hananowa-logo--white img { filter: brightness(0) invert(1); } /* ダーク背景用：白く */

/* COMING SOON ラベル（ローズのアウトラインピル・見出し上）6/26 */
.p-coming { align-self: flex-start; display: inline-block; border: 1px solid var(--accent); color: var(--accent); font-family: var(--f-en); font-size: .72rem; font-weight: 700; letter-spacing: .16em; padding: 3px 13px; border-radius: 999px; }
/* お支払い方法カード */
.p-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 40px 0 0; }
.p-pay__card { background: #fff; border: 1px solid #eceeea; border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }
.p-pay__card .en { font-family: var(--f-en); color: var(--accent); font-size: .74rem; font-weight: 600; letter-spacing: .12em; }
.p-pay__card h4 { font-size: 1.12rem; font-weight: 700; margin: 6px 0 10px; }
.p-pay__card p { font-size: .88rem; color: var(--ink); font-weight: 500; }
.p-pay__card .note { font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: 6px; }
/* お支払い：768は2列維持（トップ踏襲）→ 480以下で1列。旧720BPは廃止（6/29） */

/* -------------------------------------------------------------
   17. 線画装飾アニメーション（.c-mix 系のみ。旧 .c-draw / .c-flourish は削除済み）
   ------------------------------------------------------------- */
.c-deco { position: absolute; pointer-events: none; z-index: 0; }
/* 試作：About↔Lineup 境界に跨ぐ横長装飾。--deco-w=大きさ / --deco-rot=角度 */
.c-deco--ablineup { top: 0; left: 50%; width: var(--deco-w, 380px); transform: translate(-50%, -50%) rotate(var(--deco-rot, -3deg)); z-index: 1; }
/* 試作：ダーク境界（Information上端）を跨ぐ色変化装飾。グレー版＋白版を重ね、白版は下半分(ダーク側)だけclipで見せる */
.c-deco--info-top { top: clamp(56px, 8vw, 110px); left: 73%; width: clamp(264px, 36.7vw, 440px); aspect-ratio: 175.65 / 53.21; transform: translate(-50%, -50%) rotate(var(--deco-rot, 0deg)); z-index: 2; }
.c-deco--info-top .c-mix { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-deco--info-top .c-mix--over { color: #fff; clip-path: inset(50% 0 0 0); }   /* 白線は下半分(ダーク側)だけ。グレー版は全面のまま＝花の塗りも境界も連続（info-bottomと同方式） */

/* プランB：各所の配置（初回ざっと置き。位置・サイズ・角度は --deco-w/--deco-rot と top/left/right で調整） */
.c-deco--about-leaf   { top: clamp(28px,6vw,84px); left: clamp(40px,6vw,86px);  width: clamp(54px, 6.25vw, 90px); transform: rotate(var(--deco-rot, -8deg)); z-index: 1; }
.c-deco--about-flower { bottom: clamp(6px,2vw,28px); right: clamp(8px,2vw,32px); width: clamp(60px, 7vw, 100px); transform: rotate(var(--deco-rot, 5deg)); z-index: 1; }
.c-deco--news         { top: clamp(-110px,-6vw,-28px);  right: clamp(16px,4vw,76px); width: clamp(144px, 20vw, 240px); transform: rotate(var(--deco-rot, 4deg)); z-index: 1; }   /* PCで上寄せ（section上端より上へ・6/27、-6vw） */
.c-deco--footer-top   { top: 0; left: 42%; width: clamp(180px, 25vw, 300px); aspect-ratio: 117.97 / 62.91; transform: translate(-50%, -50%) rotate(var(--deco-rot, 0deg)); z-index: 3; }
.c-deco--footer-top .c-mix { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-deco--footer-top .c-mix--over { color: #fff; clip-path: inset(50% 0 0 0); }   /* 白線は下半分(ダーク側)だけ。グレー版は全面のまま＝花の塗りも境界も連続（info-bottomと同方式） */

/* Information 下境界（ダーク→白）：色変化は上境界の逆＝上(ダーク)が白 / 下(白地)がグレー */
.c-deco--info-bottom { bottom: clamp(56px,8vw,110px); left: 74%; width: clamp(300px, 41.7vw, 500px); aspect-ratio: 191.04 / 29.94; transform: translate(-50%, 50%) rotate(var(--deco-rot, 0deg)); z-index: 3; }
.c-deco--info-bottom .c-mix { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-deco--info-bottom .c-mix--over { color: #fff; clip-path: inset(0 36% 50% 0); }   /* 上半分かつ左64%だけ白線。右36%＝右モチーフは白背景なので白版を出さない（グレー線を残す） */
/* Instagram 右の渦コーナー（縦） */
.c-deco--insta { top: clamp(-110px,-6vw,-28px); right: clamp(16px,4vw,76px); width: clamp(126px, 17.5vw, 210px); transform: rotate(var(--deco-rot, 0deg)); z-index: 1; }   /* PCで上寄せ（section上端より上へ・6/27、-6vw） */

/* モバイル(≤768px)：コーナー系の装飾を間引いてすっきり。境界の色変化装飾(info-top/info-bottom/footer-top)は残す */
@media (max-width: 768px) {
  .c-deco--about-leaf, .c-deco--about-flower, .c-deco--news, .c-deco--insta { display: none; }
}
@media (max-width: 480px) {
  .c-deco--info-top    { width: 150px; }
  .c-deco--info-bottom { width: 160px; }
  .c-deco--footer-top  { width: 120px; }
  /* hero：≤480のみ中央寄せ＋1行キャッチ + news 縮小 */
  .p-hero__copy { left: 0; right: 0; text-align: center; }
  .p-hero__en { font-size: .74rem; }
  .p-hero__catch { font-size: 1.3rem; white-space: nowrap; }
  .p-hero__news { font-size: .78rem; }
  /* セクション間隔（上下padding）・見出し下余白（Information除く） */
  .l-section { padding-block: 46px; }
  .c-head:not(.c-head--on-dark), .c-sectitle { margin-bottom: 38px; }   /* 下層のセクション見出しもトップと同じ下余白に統一 */
  /* 基本本文サイズ縮小 */
  .p-about__body { font-size: .88rem; }
  .p-about__catch { line-height: 1.5; }   /* 2行見出しの行間が広すぎ（1.7）たため詰める */
  /* 見出しsplit：≤480px で縦積み・左寄せ */
  .c-head--split { flex-direction: column; gap: 8px; align-items: flex-start; }
  .c-head__en, .c-sectitle__en { font-size: 3rem; }
  .c-head--on-dark .c-head__en { font-size: 2.6rem; }   /* Information は枠内幅の都合でやや小さめ */
  .c-head__intro { flex: none; max-width: none; font-size: .78rem; text-align: left; }
  /* Information 見出しの余分な左マージンをリセット */
  .c-head--on-dark.c-head--split { margin-left: 0; }
  /* News：日付+タグ1行目 / タイトル2行目 */
  .p-news__item { flex-wrap: wrap; gap: 6px 14px; }
  .p-news__item .title { flex-basis: 100%; }
  /* ハナノワ：≤480px で縦積み（左テキスト列が 87px に潰れるため）。ロゴはテキストの下（DOM順 body→pic のまま） */
  .p-info__feature { grid-template-columns: 1fr; }
  /* Information カード：≤480px で縦積み */
  .p-info__cards { grid-template-columns: 1fr; }
  /* ボタンリンクありカード（店舗案内・ギフト）は「ボタンのみ」センター寄せ */
  .p-info__card:has(.c-btn) .c-btn { align-self: center; }
  /* 下層：SERVICES / お支払い も ≤480px で1列（768は2列維持） */
  .p-svc__grid { grid-template-columns: 1fr; max-width: 420px; }
  .p-pay { grid-template-columns: 1fr; }
  /* store詳細 / gift hero / 会社あいさつ / 店舗連絡先：768はPC多列を維持し、≤480のみ1列に */
  .p-store__item, .p-gift__hero, .p-company__greeting { grid-template-columns: 1fr; gap: 22px; }
  .p-store__item:nth-child(even) .p-store__photo { order: 0; }
  .p-contact-info { grid-template-columns: 1fr; }
  /* gift（白背景TEL ORDER）：375は「はみ出し」でなく見出しを小さくしてバッジと横並び（giftのみ）6/29 */
  .p-telorder:not(.l-section--soft) .p-telorder-head { flex-wrap: nowrap; align-items: center; gap: 14px; }
  .p-telorder:not(.l-section--soft) .c-sectitle__en { font-size: 2.6rem; }
  .p-telorder:not(.l-section--soft) .p-telbadge { position: static; margin-right: 0; }
  /* TEL ORDER 丸バッジ：375は小型化（store/soft版は右上に絶対配置で飛び出す）*/
  .p-telorder-head { position: relative; }
  .p-telbadge { position: absolute; top: -96px; right: -6px; width: 96px; padding: 0 5px; gap: 3px; }
  .p-telbadge__lead { font-size: .54rem; line-height: 1.15; }
  .p-telbadge__main { font-size: .86rem; line-height: 1.15; }   /* 当日予約＝大 */
  .p-telbadge__sub { font-size: .62rem; line-height: 1.15; margin-top: 0; }   /* margin-topを0にしてgapで均等に */
  .p-telbadge__sub b { font-size: 1.1em; }
  /* 制作事例：≤480px で縦積み＋ラベル・導線をセンター寄せ */
  .p-works__grid { grid-template-columns: 1fr; }
  .p-works__card { text-align: center; }
  .p-works__label { align-items: center; }
  /* FAQ：質問テキスト縮小 */
  .p-qa-acc__q { font-size: .88rem; }
  /* フッター：左右を本文(18px)に近づけて統一（50px→24px）、上も圧縮 */
  .l-footer { padding: 60px 24px 28px; }
  .l-footer__brand { max-width: none; }   /* 375は縦積みのため幅制限不要 */
  .l-footer__bottom { border-top: none; padding-top: 14px; }   /* アコーディオンの区切り線と重複→上線削除＋詰める */
  .l-footer__top { padding-bottom: 24px; }   /* ナビ〜コピーライト間を詰める（44→24）*/
  /* フッターナビ：縦並びアコーディオン */
  .l-footer__nav { flex-direction: column; gap: 0; width: 100%; }
  .l-footer__nav-group { border-top: 1px solid rgba(255,255,255,.14); }
  .l-footer__nav-group:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
  .l-footer__nav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 0; padding: 16px 2px; cursor: pointer; text-align: left; }
  .l-footer__nav-head .toggle { display: block; position: relative; width: 14px; height: 14px; flex-shrink: 0; }
  .l-footer__nav-head .toggle::before, .l-footer__nav-head .toggle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.7); transition: transform .4s; }
  .l-footer__nav-head .toggle::before { width: 13px; height: 2px; }
  .l-footer__nav-head .toggle::after { width: 2px; height: 13px; }
  .l-footer__nav-group.is-open .toggle::after { transform: translate(-50%,-50%) scaleY(0); }
  .l-footer__nav-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
  .l-footer__nav-panel > div { overflow: hidden; }
  .l-footer__nav-group.is-open .l-footer__nav-panel { grid-template-rows: 1fr; }
  .l-footer__nav-panel ul { padding-bottom: 16px; }
}
.c-deco .c-draw, .c-deco .c-reveal, .c-deco .c-mix { width: 100%; height: auto; }

/* インポートSVG：完成形を保ったまま左→右ワイプで表示（元画像をすべて表示） */
.c-reveal { color: #a6a8a1; display: block; }
.c-reveal path, .c-reveal polyline, .c-reveal line { vector-effect: non-scaling-stroke; stroke-width: 1; }
.js .u-fade.c-reveal { opacity: 1; transform: none; }
.js .c-reveal { clip-path: inset(0 100% 0 0); }
.c-reveal.is-shown { animation: cReveal var(--reveal-dur, 2s) ease-in-out forwards; }
@keyframes cReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .js .c-reveal { clip-path: none; animation: none; } }

/* ハイブリッド：線＝一筆書き描画 / 面（塗り）＝あとから一気に表示。終了時は完成形 */
.c-mix { color: #d1d1d1; display: block; }   /* やわらかいグレー（威圧感を抑えて薄め。調整値：#979991→#d1d1d1） */
/* non-scaling-stroke は付けない：WebKit系で dash の単位が画面pxになり pathLength 正規化が無効化され、
   長いパスが点線化（マーチング）して消えるため。stroke-width は viewBox スケール相当で指定。 */
.c-mix path, .c-mix polyline, .c-mix line { stroke: currentColor; stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.c-mix .is-line { fill: none; stroke-dasharray: 1; }
.js .c-mix .is-line { stroke-dashoffset: 1; stroke-opacity: 0; }   /* 未描画。stroke-opacity:0 で round-cap の開始点ドット（点々）も隠す */
.js .c-mix .is-fill { opacity: 0; }
.js .u-fade.c-mix { opacity: 1; transform: none; }
.c-mix.is-shown .is-line { animation: cDrawF var(--line-dur, .9s) ease-out var(--d, 0s) forwards; }
.c-mix.is-shown .is-fill { animation: cFillIn var(--fill-dur, .5s) ease-out var(--d, 0s) forwards; }
@keyframes cFillIn { from { opacity: 0; } to { opacity: 1; } }
/* 色変化の白版：塗り面まで白にすると花がベタ潰れ → 白版は塗りを消し「白い線画」だけ残す（全色変化箇所に一括適用） */
.c-mix--over .is-fill { animation: none !important; opacity: 0 !important; }
/* c-mix の線：正offset(1→0)のみ。負offsetは Safari 等で描画されないため使わず、向きはパス側で右始点に揃える */
@keyframes cDrawF { 0% { stroke-dashoffset: 1; stroke-opacity: 0; } 2% { stroke-opacity: 1; } 100% { stroke-dashoffset: 0; stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .c-mix .is-line { stroke-dashoffset: 0; stroke-opacity: 1; } .js .c-mix .is-fill { opacity: 1; } .c-mix.is-shown .is-line, .c-mix.is-shown .is-fill { animation: none; } }