:root{
  --paper:#F4EFE6; --ink:#3A2A21; --black:#14100E; --chrome:#3A2A21;
  /* EC(Shopify/Dawn完成案v2)と同じ「リッチゴールド」系に統一（2026-07-27） */
  --gold:#B99A55; --gold-tx:#7C6132; --gold-lt:#DABB6E; --cream:#EFE6D8;
  --btn-dark:#2B1E14;   /* ボタン専用の黒。ECと同じ、純黒より軽い */
  --gold-24:rgba(190,157,86,.26);
  --line:var(--gold-24); --paper-2:#EBE2D4;
  /* コーポレートサイトと同じOS標準フォント。Webフォントは読み込まない
     （日本語Webフォントは分割配信で1.8MB・88リクエストになるため） */
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --wrap:1120px; --r-card:16px;
  /* ECと同じ波形マスク（クリーム帯の上下境目） */
  --wv-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' preserveAspectRatio='none' viewBox='0 0 1440 80'%3E%3Cpath fill='%23000' d='M0,42 C120,16 240,14 360,34 C480,54 560,60 660,50 C780,38 840,18 960,20 C1080,22 1160,50 1280,52 C1360,53 1400,42 1440,36 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
  --wv-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' preserveAspectRatio='none' viewBox='0 0 1440 80'%3E%3Cpath fill='%23000' d='M0,38 C120,64 240,66 360,46 C480,26 560,20 660,30 C780,42 840,62 960,60 C1080,58 1160,30 1280,28 C1360,27 1400,38 1440,44 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}

/* ============ 水の気配 ============
   固定背景。1本の細い波線が横にゆっくり流れ、
   淡い水紋が息をするように膨らむ。主張しない速さにしてある。 */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;display:block}
.bg i:nth-child(1){left:0;right:0;top:38vh;height:430px;opacity:.30;
  background-repeat:repeat-x;background-size:2400px 430px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='430' viewBox='0 0 2400 430'%3E%3Cpath fill='none' stroke='%23dabb6e' stroke-width='1.6' d='M0,215 C400,10 800,10 1200,215 C1600,420 2000,420 2400,215'/%3E%3C/svg%3E");
  animation:flow 118s linear infinite}
.bg i:nth-child(2){left:0;right:0;top:64vh;height:430px;opacity:.16;
  background-repeat:repeat-x;background-size:2400px 430px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='430' viewBox='0 0 2400 430'%3E%3Cpath fill='none' stroke='%23b99a55' stroke-width='1.2' d='M0,215 C400,60 800,60 1200,215 C1600,370 2000,370 2400,215'/%3E%3C/svg%3E");
  animation:flow 168s linear infinite reverse}
.bg i:nth-child(3){top:4vh;left:-18vw;width:56vw;height:56vw;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.10),rgba(201,169,97,0) 70%);
  animation:sway 74s ease-in-out infinite alternate}
@keyframes flow{to{background-position-x:-2400px}}
@keyframes sway{to{transform:translate3d(7vw,-5vh,0) scale(1.12)}}

/* フッター手前の波。水面から陸へ上がるような区切り */
.wave{display:block;width:100%;height:clamp(56px,7vw,103px);
  margin-bottom:-1px;color:var(--black)}
html{background:var(--paper)}
body{font-family:var(--gothic);color:var(--ink);background:transparent;
  line-height:2.0;font-size:17px;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:600;letter-spacing:.08em;
  line-height:1.6;color:var(--black)}

/* header … EC(Shopify完成案v2)と同じ質感（にじみブラー＋金の縁）。
   「ブログ」バッジだけ独自に付けて、EC(店)ではなくブログだと分かるようにする。 */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--gold-24)}
.hdr-in{display:flex;align-items:center;gap:30px;height:80px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:34px;width:auto}
.logo span{font-family:var(--gothic);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  color:#fff;background:var(--gold-tx);border-radius:999px;padding:4px 11px;line-height:1}
.nav{display:flex;gap:26px;margin-left:auto;margin-right:26px;font-size:15px;letter-spacing:.09em;font-weight:500}
.nav a{position:relative;padding-block:4px;color:rgba(58,42,33,.74);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .3s}
.nav a:hover{color:var(--black)} .nav a:hover::after{width:100%}
.nav-cta{display:none}   /* PCではヘッダー右の .btn-p を使う。パネル内CTAは非表示 */
.nav-sub{display:none}   /* 副次カテゴリはPCヘッダーでは隠し、パネルでのみ出す */
/* ハンバーガー（PCでは隠す） */
.menu-btn{display:none;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;position:relative;margin-left:6px}
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--black);
  transition:transform .35s ease,opacity .25s ease}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:21px}
.menu-btn span:nth-child(3){top:27px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* page head */
.page-head{padding:64px 0 40px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:48px}
.page-head h1{font-size:clamp(22px,3.2vw,30px)}
.page-head .sub{font-size:15px;color:rgba(58,42,33,.7);margin-top:16px;line-height:2}

/* ブログトップだけの写真ヒーロー。ECの .hero と同じ作り
   （写真＋下からクリームへのグラデ）。header直下・main.wrapの外に置く構造なので
   100vwの負マージンなしで全幅になる。 */
.blog-hero{position:relative;width:100%;aspect-ratio:2/1;max-height:600px;
  overflow:hidden;background:var(--paper);margin-bottom:44px}
.blog-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.blog-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,239,230,0) 16%,rgba(244,239,230,.72) 48%,rgba(244,239,230,.97) 74%,var(--paper) 100%)}
.blog-hero-in{position:relative;z-index:2;height:100%;max-width:680px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:0 24px 40px}
.blog-hero .hero-eyebrow{font-family:var(--gothic);font-size:11.5px;font-weight:600;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold-tx);margin-bottom:14px}
.blog-hero h1{font-size:clamp(24px,3.6vw,34px);line-height:1.65;letter-spacing:.07em;
  text-shadow:0 1px 20px rgba(244,239,230,.9),0 1px 3px rgba(244,239,230,.85)}
.blog-hero h1 em{font-style:normal;color:var(--gold-tx)}
.blog-hero .sub{font-size:14.5px;color:rgba(58,42,33,.78);margin-top:14px;line-height:2;
  text-shadow:0 1px 14px rgba(244,239,230,.9)}
.blog-hero .count{margin-top:18px;font-size:11px;letter-spacing:.32em;color:var(--gold-tx)}
.blog-hero .chips{margin-top:28px;margin-bottom:0;padding-bottom:0}
@media(max-width:640px){
  .blog-hero{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column}
  .blog-hero img{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  .blog-hero::after{display:none}
  .blog-hero-in{height:auto;padding:26px 20px 34px;background:var(--paper)}
}

/* 商品紹介の帯（中断・末尾に1つずつ）。ECのクリーム帯と同じ、上下を波でマスク。
   main.wrap の外＝ヘッダー/ヒーローと同じ階層に置いて、そのまま全幅になる。 */
.promo-band{background:linear-gradient(158deg,#FCF8F1,#F4EDDF);position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(#000,#000) 0 50%/100% calc(100% - 96px) no-repeat, var(--wv-top) top/100% 56px no-repeat, var(--wv-bot) bottom/100% 56px no-repeat;
          mask:linear-gradient(#000,#000) 0 50%/100% calc(100% - 96px) no-repeat, var(--wv-top) top/100% 56px no-repeat, var(--wv-bot) bottom/100% 56px no-repeat;
  padding-block:64px;margin-block:52px}
.promo-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
.promo-photo{display:block;border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 44px rgba(58,42,33,.14)}
.promo-photo img{width:100%;height:100%;object-fit:cover;display:block}
.promo-tx .hero-eyebrow{font-family:var(--gothic);font-size:11px;font-weight:600;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold-tx);margin-bottom:14px}
.promo-tx h2{font-size:clamp(20px,2.6vw,26px);line-height:1.6;letter-spacing:.06em;margin-bottom:16px}
.promo-tx p{font-size:14px;color:rgba(58,42,33,.76);line-height:2}
.promo-tx .btn-p{display:inline-block;margin-top:24px}
/* 説明ブロック用の控えめなリンク（購入ボタンではなく、ブログ内の記事へ） */
.promo-link{display:inline-flex;align-items:center;gap:6px;margin-top:22px;
  font-size:13.5px;font-weight:500;letter-spacing:.05em;color:var(--gold-tx);
  border-bottom:1px solid var(--gold-24);padding-bottom:3px;transition:border-color .3s ease,color .3s ease}
.promo-link:hover{color:var(--black);border-color:var(--gold)}
.promo-band--rev .promo-photo{order:2}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:13px;font-weight:500;letter-spacing:.1em;
  padding:12px 28px;border-radius:999px;background:transparent;color:var(--ink);
  border:1px solid var(--gold-24);transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn-ghost:hover{background:var(--btn-dark);color:var(--cream);border-color:var(--btn-dark)}
/* ECの「Our Products」2カラムをそのまま移植（キャラクターは使わない） */
.promo-duo-wrap{max-width:1040px;margin-inline:auto;text-align:center}
.promo-duo-title{font-family:var(--mincho);font-weight:600;letter-spacing:.07em;
  font-size:clamp(22px,3vw,30px);color:var(--black);margin-bottom:6px}
.promo-duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:40px;text-align:left}
.pd-photo{display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--cream);
  box-shadow:0 18px 40px rgba(58,42,33,.1)}
.pd-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.promo-duo article:hover .pd-photo img{transform:scale(1.04)}
.promo-duo h3{font-size:21px;margin:26px 0 14px}
.promo-duo h3 .pd-en{font-size:14px;color:rgba(58,42,33,.5);font-weight:400;
  font-family:var(--gothic);letter-spacing:.04em;margin-left:8px}
.promo-duo p{font-size:14.5px;color:rgba(58,42,33,.74);line-height:2}
.promo-duo .pd-note{font-size:12.5px;color:rgba(58,42,33,.55);margin-top:10px;line-height:1.9}
/* お客様の声 */
.voices-sec{padding-block:88px}
.center-head{text-align:center;margin-bottom:8px}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.voice{background:#fff;border-radius:24px;padding:34px 28px;border:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:0 14px 34px rgba(58,42,33,.06)}
.voice .vh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.voice .avatar{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:1px solid var(--gold-24);background:var(--paper-2)}
.voice .avatar img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.voice .mark{font-family:var(--mincho);font-size:34px;color:var(--gold);opacity:.5;line-height:1}
.voice p{font-size:14.5px;color:rgba(58,42,33,.76);line-height:2.05;flex:1}
.voice .who{margin-top:22px;font-size:12.5px;letter-spacing:.12em;color:rgba(58,42,33,.55);
  border-top:1px solid var(--line);padding-top:16px}
.disclaimer{text-align:center;font-size:13px;color:rgba(58,42,33,.55);margin-top:34px;line-height:1.9}
@media(max-width:800px){
  .promo-in{grid-template-columns:1fr;gap:28px;text-align:center}
  .promo-band--rev .promo-photo{order:0}
  .promo-photo{max-width:420px;margin-inline:auto}
  .promo-band{padding-block:48px;margin-block:36px}
  .promo-duo{grid-template-columns:1fr;gap:36px}
  .voices{grid-template-columns:1fr;gap:20px}
  .voices-sec{padding-block:56px}
}
/* カテゴリの入口チップ */
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin:-16px 0 40px;padding-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;line-height:1;
  border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:13.5px;letter-spacing:.03em;
  color:rgba(58,42,33,.78);background:rgba(255,255,255,.5);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.chip span{font-size:11px;color:var(--gold-tx);letter-spacing:0}
.chip:hover{border-color:var(--gold);color:var(--black)}
.chip--on{background:var(--black);color:var(--cream);border-color:var(--black)}
.chip--on span{color:var(--gold-lt)}
.page-head .count{font-size:12.5px;letter-spacing:.3em;color:var(--gold-tx);margin-top:18px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;
  align-items:start}   /* 行の高さに引き伸ばさず、各カードを中身なりの高さにする */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:#fff;
  transition:transform .9s cubic-bezier(.22,.61,.36,1),
             box-shadow .9s cubic-bezier(.22,.61,.36,1),
             border-color .9s ease}
.card:hover{transform:translateY(-5px);border-color:rgba(169,139,93,.5);
  box-shadow:0 20px 46px -18px rgba(58,42,33,.22)}
/* ホバーで水紋がひとつ、ゆっくり広がる */
/* 水面の波紋。輪が2つ、ゆっくり広がって静かに消える。
   広がりすぎないようカード内に収まる大きさで止める。 */
/* 水面の波紋。輪はひとつ。水色系の淡い色で、ゆっくり広がって静かに消える。
   直径は 32px→約115px（以前の倍）。 */
.card::after{content:"";position:absolute;left:50%;top:50%;
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(120,158,178,.5);   /* 水色。暖色の地に馴染むくすみ */
  transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;z-index:1}
/* 途中で緩まず、最初から最後まで一定の速さで広がる（linear）。
   透明度だけ終盤でフェードして静かに消す。 */
.card:hover::after{animation:ripple 2.2s linear}
@keyframes ripple{
  0%  {opacity:.45; transform:translate(-50%,-50%) scale(.5)}
  75% {opacity:.2}
  100%{opacity:0;   transform:translate(-50%,-50%) scale(3.6)}
}
/* 画像はゆっくり寄る（速いズームは使わない） */
.card .c-img img{transition:transform 2.4s cubic-bezier(.22,.61,.36,1)}
.card:hover .c-img img{transform:scale(1.04)}

/* スクロールで現れる。1秒前後、下から静かに */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),
             transform 1.1s cubic-bezier(.22,.61,.36,1),
             box-shadow .9s cubic-bezier(.22,.61,.36,1),
             border-color .9s ease}
@media(prefers-reduced-motion:reduce){
  .bg{display:none}
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .card,.card .c-img img{transition:none}
  .card:hover::after{animation:none}
  *{animation:none!important}
}
.c-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.c-img img{width:100%;height:100%;object-fit:cover}
.card--text .c-body{padding:30px 26px 30px;border-top:2px solid var(--gold)}
.card--text h2{font-size:18px}
.card--text .c-body p{-webkit-line-clamp:6}
.c-body{padding:22px 22px 26px}
.c-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.1em;
  color:rgba(58,42,33,.62);margin-bottom:12px}
.badge{font-size:12.5px;letter-spacing:.16em;padding:3px 9px;border-radius:999px;
  background:var(--cream);color:var(--black);text-decoration:none;display:inline-block}
.card-note-link{position:absolute;top:12px;right:12px;z-index:2;
  font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
  background:rgba(239,230,216,.92);color:var(--black);text-decoration:none;
  backdrop-filter:blur(4px);transition:background .3s ease,color .3s ease}
.card-note-link:hover{background:var(--gold-tx);color:var(--cream)}
/* 不透明度だけの点滅は、地色に近い背景の上だと「薄くなる→溶ける」だけで
   目立たない。地色を問わず視認できるよう、色そのものをパルスさせる。 */
.blink{animation:blinkPulse 1.4s ease-in-out infinite}
@keyframes blinkPulse{
  0%,100%{background:var(--cream);color:var(--black)}
  50%{background:var(--gold-lt);color:var(--black)}
}
@media(prefers-reduced-motion:reduce){.blink{animation:none}}
.card h2{font-size:18px;line-height:1.75;margin-bottom:12px}
.c-body p{font-size:15px;line-height:1.95;color:rgba(58,42,33,.72)}
.c-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:12.5px;letter-spacing:.08em;color:var(--gold-tx);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px}

/* pager */
.pager{display:flex;align-items:center;justify-content:center;gap:26px;
  padding:64px 0 96px;font-size:15px;letter-spacing:.1em}
.pager a{border:1px solid var(--line);border-radius:999px;padding:12px 26px;transition:.25s}
.pager a:hover{background:var(--black);color:var(--cream);border-color:var(--black)}
.pg-now{font-family:var(--mincho);color:var(--gold-tx)}
.pg-link{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:14px 32px;font-size:15px;letter-spacing:.1em;transition:.25s}
.pg-link:hover{background:var(--black);color:var(--cream);border-color:var(--black)}

/* article */
.article{max-width:760px}
.a-head{padding:64px 0 34px;border-bottom:1px solid var(--line);margin-bottom:44px}
.a-head h1{font-size:clamp(22px,3.2vw,30px);margin-bottom:18px}
.rte{font-size:17px;line-height:2.1}
.rte p{margin-bottom:1.5em}
.rte h2{font-size:21px;margin:2.2em 0 .9em;padding-left:14px;border-left:2px solid var(--gold)}
.rte h3{font-size:18px;margin:1.8em 0 .7em}
.rte img{border-radius:12px;margin:1.8em auto}
/* 動画をレスポンシブに。元記事は固定pxで貼られていて狭い画面ではみ出していた */
.rte .embed{position:relative;max-width:640px;margin:1.8em auto}
.rte .embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px}
.rte video{max-width:min(100%,480px);height:auto;display:block;
  margin:1.8em auto;border-radius:12px;background:#000}
.rte .wp-video{width:auto !important;max-width:100%;margin-inline:auto}
.rte iframe{max-width:100%}
/* 絵文字・スタンプは文字の一部。中央寄せのブロックにしない */
.rte img.ei-inline{display:inline;vertical-align:-.25em;width:1.3em;height:1.3em;
  margin:0 .1em;border-radius:0}
/* このブログは本文を <pre> で書いている記事がある（56件）。
   等幅・折り返しなしだと崩れるので、本文と同じ見た目にする */
.rte pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;
  font-size:inherit;line-height:inherit;margin:0 0 1.5em}
.rte figure{margin:1.8em 0}
.rte figcaption{font-size:13px;color:rgba(58,42,33,.6);text-align:center;margin-top:10px}
.rte a{color:var(--gold-tx);border-bottom:1px solid var(--line)}
.rte blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 20px;
  margin:1.6em 0;color:rgba(58,42,33,.78)}
.rte ul,.rte ol{margin:0 0 1.5em 1.4em}
.rte li{margin-bottom:.5em}
.rte table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.rte td,.rte th{border:1px solid var(--line);padding:10px 12px}
.rte strong{font-weight:700}
.origin{margin-top:48px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;
  font-size:14px;color:rgba(58,42,33,.74);background:var(--paper)}
.pn{display:flex;justify-content:space-between;gap:20px;padding:56px 0 96px;font-size:14px}
.pn a{border:1px solid var(--line);border-radius:999px;padding:11px 22px;transition:.25s}
.pn a:hover{background:var(--black);color:var(--cream);border-color:var(--black)}
.pn .r{margin-left:auto}

/* search */
.search{max-width:800px}
.s-box{position:sticky;top:82px;background:var(--paper);padding-bottom:20px;z-index:10}
#q{width:100%;background:#fff;font-family:var(--gothic);font-size:17px;letter-spacing:.05em;
  padding:19px 24px;border:1px solid var(--line);border-radius:999px;outline:none;
  transition:border-color .25s,box-shadow .25s;color:var(--ink)}
#q:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,139,93,.13)}
.s-stat{font-size:13px;letter-spacing:.14em;color:var(--gold-tx);margin-top:14px;text-align:center}
.s-res{padding-bottom:96px}
.s-item{display:block;padding:24px 4px;border-bottom:1px solid var(--line)}
.s-item:hover h3{color:var(--gold-tx)}
.s-item h3{font-size:18px;margin-bottom:8px;transition:color .2s}
.s-item p{font-size:15px;color:rgba(58,42,33,.72);line-height:1.9}
.s-more{text-align:center;font-size:13px;color:rgba(58,42,33,.5);padding-top:28px}

/* footer */
/* 追従ボタン … コーポレートと同じ意匠 */
.floating{position:fixed;right:26px;bottom:26px;z-index:70;
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.floating.show{opacity:1;transform:none;pointer-events:auto}
.fl-ico{width:46px;height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--ink);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -16px rgba(58,42,33,.5);
  transition:background .5s ease,color .5s ease,border-color .5s ease,transform .5s ease}
.fl-ico{flex-direction:column;gap:3px;width:auto;min-width:58px;height:58px;
  border-radius:29px;padding:0 14px}
.fl-ico svg{width:19px;height:19px;stroke-linecap:round;stroke-linejoin:round}
.fl-cap{font-size:12px;letter-spacing:.06em;line-height:1;white-space:nowrap}
.fl-ico:hover{background:var(--black);border-color:var(--black);color:var(--cream);
  transform:translateY(-2px)}
.fl-main{display:inline-block;border-radius:999px;padding:14px 26px;font-size:16px;
  letter-spacing:.08em;background:var(--btn-dark);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(214,184,108,.34),0 0 0 0 rgba(218,187,110,.35),0 14px 34px -14px rgba(58,42,33,.55);
  animation:btnPulse 2.8s ease-in-out infinite;
  transition:background .5s ease,color .5s ease,border-color .5s ease,transform .5s ease,box-shadow .3s ease}
.fl-main:hover{background:var(--gold-tx);transform:translateY(-2px);animation-play-state:paused}
.fl-sub{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--line);
  backdrop-filter:blur(8px);box-shadow:0 14px 34px -14px rgba(58,42,33,.4)}
.fl-sub:hover{background:var(--black);border-color:var(--black);color:var(--cream)}

/* footer … コーポレートと同じ3カラム */
/* 直前の .wave と地続きにする。margin も border も入れないこと
   （入れると波とフッターの間に生成り色の帯が出る） */
.ftr{background:var(--black);color:#b3a290;padding:24px 0 40px;font-size:14px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:44px 0;
  border-bottom:1px solid rgba(201,169,97,.28)}
.ftr h4{font-family:var(--mincho);font-weight:500;color:var(--gold-lt);
  font-size:16px;letter-spacing:.12em;margin:0 0 20px}
.f-lead{line-height:1.9}
.f-back{display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:13px;letter-spacing:.06em;color:var(--gold-lt);
  border-bottom:1px solid rgba(218,187,110,.4);padding-bottom:3px;transition:border-color .4s ease}
.f-back:hover{border-color:var(--gold-lt)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:12px}
.ftr a{transition:color .4s ease}
.ftr a:hover{color:var(--gold-lt)}
.copy{padding-top:30px;text-align:center;color:#8b7c6d;font-size:12.5px}

/* ヘッダーのCTA … ECの .btn と同じ「静かに脈打つ」金のピル */
.btn-p{display:inline-block;background:var(--btn-dark);color:var(--cream);
  border-radius:999px;padding:12px 26px;font-size:13px;letter-spacing:.1em;
  box-shadow:inset 0 0 0 1px rgba(214,184,108,.34),0 0 0 0 rgba(218,187,110,.35);
  animation:btnPulse 2.8s ease-in-out infinite;
  transition:background .4s ease,transform .4s ease,box-shadow .3s ease}
.btn-p:hover{background:var(--gold-tx);transform:translateY(-2px);animation-play-state:paused}
@keyframes btnPulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(214,184,108,.34),0 0 0 0 rgba(218,187,110,.35)}
  50%{box-shadow:inset 0 0 0 1px rgba(214,184,108,.34),0 0 0 8px rgba(218,187,110,0)}
}
@media(prefers-reduced-motion:reduce){.btn-p,.fl-main{animation:none}}

/* PC以外（〜1040px）：ナビをハンバーガー式のパネルにする */
@media(max-width:1040px){
  /* ヘッダーの backdrop-filter は fixed の基準枠を作り、メニューパネルを
     ヘッダー内(80px)に閉じ込めてしまう。モバイルでは無効化する。 */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(244,239,230,.97)}
  .menu-btn{display:block;margin-left:auto}
  .btn-p{display:none}
  /* .nav を「画面を覆う固定レイヤー」にして overflow:hidden で切り取る。
     こうすると中の帯が画面右外に出ても横スクロールが発生しない。 */
  .nav{position:fixed;inset:0;z-index:60;margin:0;padding:0;
    display:block;overflow:hidden;pointer-events:none;visibility:hidden}
  .nav.open{visibility:visible;pointer-events:auto}
  /* 中身のリンク群を右寄せの帯にまとめる（.nav 直下の <a> をflexで縦積み）*/
  .nav{--panel:min(80vw,320px)}
  .nav a{position:relative;display:block;width:var(--panel);margin-left:auto;
    box-sizing:border-box;background:#fff;
    padding:16px 22px;border-bottom:1px solid var(--line);font-size:16px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .nav a::after{display:none}
  /* 帯の上部余白と左境界線・影を最初のリンクで作る */
  .nav a:first-of-type{padding-top:96px;
    box-shadow:-20px 0 50px -18px rgba(20,16,14,.5)}
  .nav-sub{display:block}   /* パネルでは全カテゴリを出す */
  .nav.open a{transform:none}
  /* リンクを順に少しずつ出す */
  .nav.open a:nth-child(1){transition-delay:.02s}
  .nav.open a:nth-child(2){transition-delay:.05s}
  .nav.open a:nth-child(3){transition-delay:.08s}
  .nav.open a:nth-child(n+4){transition-delay:.1s}
  .nav-cta{margin-top:0;background:var(--gold) !important;color:#fff !important;
    text-align:center;letter-spacing:.1em;border-bottom:0 !important}
  /* 背景オーバーレイ（.nav 内に敷く） */
  .nav::before{content:"";position:absolute;inset:0;background:rgba(20,16,14,.5);
    opacity:0;transition:opacity .38s ease}
  .nav.open::before{opacity:1}
}
@media(max-width:749px){
  .logo span{display:none}
  .page-head{padding:40px 0 28px;margin-bottom:32px}
  .grid{grid-template-columns:1fr;gap:24px}
  .s-box{top:66px}
  .f-top{grid-template-columns:1fr 1fr;gap:32px 20px}
  .floating{left:10px;right:10px;bottom:10px;gap:7px;flex-wrap:wrap;justify-content:flex-end}
  .fl-ico{width:44px;height:44px;min-width:0;padding:0;border-radius:50%}
  .fl-ico .fl-cap{display:none}
  .fl-ico svg{width:18px;height:18px}
  .fl-main{padding:11px 16px;font-size:13px;letter-spacing:.03em;white-space:nowrap}
}