/* ============================================================
   FURUSU テーマ
   デザインの決まりは YOSUMI 販売ページ（MT/yosumi_lp/…_LP_v03.src.html）の :root と部品。
   白ベース・左の固定レール・英字大＋和文小の見出し・黒の角なしボタン。
   白ベースが要件なので、ライトの単一テーマで確定させている。
   ============================================================ */

:root{
  --paper:     #FFFFFF;
  --paper-2:   #F7F7F4;   /* 交互に敷く淡い面 */
  --ink:       #1B1B18;
  --ink-soft:  #5C5C55;
  --ink-faint: #6F6F68;   /* LP は #94948A。小さい文字の読みやすさ（コントラスト4.5:1以上）のため濃くした */
  --olive:     #273200;   /* FURUSU のアクセント色 */
  --rule:      #E4E4DE;
  --rule-soft: #EFEFEA;
  --btn:       #16160F;

  --rail: 200px;
  --measure: 34rem;
  --measure-wide: 42rem;
  --page: 64rem;
  --gut: clamp(1.25rem, 5vw, 3rem);

  --f-latin:  "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 本文は端末の標準ゴシック（ウェブフォントの通信量を減らすため。2026-09-30）。見出しの明朝と英字はウェブフォント */
  --f-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-gothic);
  font-size: 16px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
img, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }
p{ margin: 0 0 1.35em; }
p:last-child{ margin-bottom: 0; }
figure{ margin: 0; }
strong, b{ font-weight: 700; }
button{ font: inherit; }
:focus-visible{ outline: 2px solid var(--olive); outline-offset: 3px; }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
}
.skip:focus{ left: 1rem; top: 1rem; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   左の固定レール（広い画面）
   ============================================================ */
.rail{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  padding: 2rem 1.25rem 1.5rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  z-index: 30;
  overflow-y: auto;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
@media (min-width: 64rem){ .rail{ display: flex; } }

.rail-logo{ display: block; color: var(--ink); text-decoration: none; }
.rail-logo .logo{ transition: filter .35s ease; }
.rail-logo .logo{ width: 80px; height: auto; }

/* 縦書きの2列（古巣／守屋建具店の家具ブランド）を、同じ中心線に縦に並べる */
.rail-tagline{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-mincho);
  color: var(--ink-soft);
}
.rail-tagline span{
  writing-mode: vertical-rl;
  line-height: 1;
}
.rail-brand{
  font-size: 1.35rem;
  letter-spacing: .2em;
  color: var(--ink);
}
.rail-sub{
  font-size: .82rem;
  letter-spacing: .28em;
}

.rail-nav{
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 .6rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
}
.rail-nav a{
  font-family: var(--f-latin);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.rail-nav a:hover, .rail-nav .current-menu-item > a{ color: var(--ink); }
.rail-nav .current-menu-item > a{ border-bottom: 1px solid currentColor; }

.rail-cta{ width: 100%; margin-top: auto; }
.rail-cta .btn{ width: 100%; }

/* トップページ：背景動画の上ではレールを透明・白文字に（旧サイトの見せ方） */
.has-hero.on-hero .rail{
  background: transparent;
  border-right-color: transparent;
}
.has-hero.on-hero .rail-logo .logo{ filter: brightness(0) invert(1); }   /* 黒い PNG を白く見せる */
.has-hero.on-hero .rail-tagline,
.has-hero.on-hero .rail-brand,
.has-hero.on-hero .rail-nav a{ color: #FFFFFF; }
.has-hero.on-hero .rail-nav a{ text-shadow: 0 0 6px rgba(0,0,0,.35); }
.has-hero.on-hero .rail-cta .btn{ background: transparent; border-color: rgba(255,255,255,.8); color: #fff; }

/* ============================================================
   上部バー＋メニュー（狭い画面）
   ============================================================ */
.topbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem var(--gut);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 64rem){ .topbar{ display: none; } }
.topbar-logo{ display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.topbar-logo .logo{ width: 38px; height: 38px; }
.topbar-name{
  font-family: var(--f-latin); font-weight: 700; font-size: .82rem; letter-spacing: .22em; line-height: 1.3;
  display: flex; flex-direction: column;
}
.topbar-name small{ font-family: var(--f-mincho); font-weight: 500; font-size: .7rem; letter-spacing: .18em; color: var(--ink-soft); }

.menu-btn{
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 1px solid var(--ink); color: var(--ink);
  padding: .5rem .85rem; cursor: pointer;
  font-family: var(--f-latin); font-size: .68rem; letter-spacing: .2em;
}
.menu-btn-bars{ position: relative; width: 16px; height: 1px; background: currentColor; }
.menu-btn-bars::before, .menu-btn-bars::after{ content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transition: transform .2s ease; }
.menu-btn-bars::before{ top: -5px; } .menu-btn-bars::after{ top: 5px; }
.menu-btn[aria-expanded="true"] .menu-btn-bars{ background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn-bars::before{ transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-bars::after{ transform: translateY(-5px) rotate(-45deg); }

.drawer{
  position: fixed; inset: 0; z-index: 35;
  background: var(--paper);
  padding: 6rem var(--gut) 3rem;
  overflow-y: auto;
  text-align: center;
}
.drawer[hidden]{ display: none; }
@media (min-width: 64rem){ .drawer{ display: none !important; } }
.drawer-nav{ list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .2rem; }
.drawer-nav a{
  display: block; padding: .7rem 0;
  font-family: var(--f-latin); font-size: .9rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-tagline{ font-family: var(--f-mincho); color: var(--ink-soft); letter-spacing: .14em; font-size: .9rem; }
body.menu-open{ overflow: hidden; }

/* ============================================================
   版面
   ============================================================ */
@media (min-width: 64rem){ .shell{ margin-left: var(--rail); } }

.wrap{
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.measure{ max-width: var(--measure); }
.measure-wide{ max-width: var(--measure-wide); }
.centered{ margin-inline: auto; }
p.centered, .centered > p{ text-align: center; }

.band{ padding-block: clamp(3.5rem, 9vw, 6rem); }
.band + .band{ border-top: 1px solid var(--rule-soft); }
.tint{ background: var(--paper-2); }
.page-top{ padding-top: clamp(2.5rem, 7vw, 4.5rem); }

/* ============================================================
   見出し（英字大 ＋ 和文小、中央寄せ）
   ============================================================ */
.head{ text-align: center; margin: 0 0 clamp(2.25rem, 5vw, 3.25rem); font-weight: 400; }
.head .en{
  display: block;
  font-family: var(--f-latin);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--olive);
  line-height: 1.25;
  margin-bottom: .5rem;
}
.head .ja{
  display: block;
  font-family: var(--f-mincho);
  font-size: .92rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
  line-height: 1.7;
}

h2, h3, h4, h5{ font-family: var(--f-mincho); font-weight: 500; letter-spacing: .04em; line-height: 1.7; }
h3{ font-size: 1.1rem; margin: 0 0 .6rem; }

.lead{
  font-family: var(--f-mincho);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  line-height: 2.1;
  letter-spacing: .04em;
}
.note{ font-size: .82rem; line-height: 1.85; color: var(--ink-faint); }
.more{ margin-top: 1.5rem; }
.text-link{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: .1rem; font-size: .92rem; letter-spacing: .06em; }
.text-link:hover{ border-bottom-color: var(--ink); }
.more-btn{ text-align: center; margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  background: var(--btn);
  color: #FFFFFF;
  font-family: var(--f-gothic);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-decoration: none;
  padding: 1.05rem 2.5rem;
  border: 1px solid var(--btn);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn:hover{ background: var(--paper); color: var(--ink); }
.btn .arrow{ font-family: var(--f-latin); }
.btn.ghost{ background: transparent; color: var(--ink); }
.btn.ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-sm{ padding: .8rem .5rem; font-size: .78rem; letter-spacing: .12em; }

/* ============================================================
   トップの背景動画（旧サイトの見せ方を再現）
   ============================================================ */
.hero-video{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  background: #000;
  overflow: hidden;
  color: #fff;
}
.hero-poster, .hero-movie{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-movie{ opacity: 0; transition: opacity 1.2s ease; }
.hero-movie.is-playing{ opacity: 1; }
.hero-dots{
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.45) 1px, transparent 1.2px);
  background-size: 3px 3px;
  pointer-events: none;
}
.hero-copy{
  position: absolute; left: 0; right: 0; bottom: clamp(5rem, 14vh, 8rem);
  text-align: center; padding-inline: var(--gut);
}
.hero-catch{
  font-family: var(--f-mincho);
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: .2em;
  margin: 0 0 .6rem;
  text-shadow: 0 0 12px rgba(0,0,0,.5);
}
.hero-catch span{ display: inline-block; }
.hero-sub{
  font-family: var(--f-latin);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  margin: 0; opacity: .85;
}
.hero-scroll{
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  font-family: var(--f-latin); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: #fff; text-decoration: none; padding-bottom: 2.2rem;
}
.hero-scroll::after{
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 1.8rem; background: rgba(255,255,255,.8);
  animation: scrollline 2s ease-in-out infinite;
}
@keyframes scrollline{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }
/* 広い画面：動画を左レールの下まで広げ、レールを動画の上に重ねる（旧サイトと同じ） */
@media (min-width: 64rem){ .hero-video{ margin-left: calc(var(--rail) * -1); } }
/* 狭い画面は旧サイトと同じく静止画。高さを抑える */
@media (max-width: 63.99rem){
  .hero-video{ height: 72svh; min-height: 26rem; }
  .hero-movie{ display: none; }
  .hero-dots{ background-image: radial-gradient(rgba(0,0,0,.28) 1px, transparent 1.2px); }
  .hero-catch{ letter-spacing: .14em; }
}

.intro .lead{ text-align: center; }
.intro .more{ text-align: center; }

/* ============================================================
   カード（商品・記事）
   ============================================================ */
.cards{ display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.75rem); }
.cards-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 54rem){ .cards-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card, .post-card-link{ display: block; text-decoration: none; color: var(--ink); }
.card-img{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img, .post-card-link:hover .card-img img{ transform: scale(1.03); }
.card-title{ margin: .9rem 0 0; text-align: center; font-weight: 400; line-height: 1.5; }
.card-title .en{ display: block; font-family: var(--f-latin); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.card-title .ja{ word-break: keep-all; display: block; font-family: var(--f-mincho); font-size: .82rem; letter-spacing: .08em; color: var(--ink-soft); margin-top: .2rem; }
.card[hidden]{ display: none; }

.post-meta{ margin: .85rem 0 .3rem; font-family: var(--f-latin); font-size: .72rem; letter-spacing: .12em; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.post-cat{ font-family: var(--f-gothic); letter-spacing: .06em; color: var(--ink-soft); text-decoration: none; }
.post-card-title{ margin: 0; font-family: var(--f-mincho); font-weight: 500; font-size: .95rem; line-height: 1.75; letter-spacing: .03em; }

/* ブログ一覧：1ページ10件のうち先頭を横長に大きく、残り9件を3列に */
@media (min-width: 54rem){
  .cards-feature .post-card:first-child{ grid-column: 1 / -1; }
  .cards-feature .post-card:first-child .post-card-link{ display: grid; grid-template-columns: 3fr 2fr; gap: 0 2.5rem; align-items: center; }
  .cards-feature .post-card:first-child .card-img{ grid-row: 1 / span 2; }
  .cards-feature .post-card:first-child .post-card-title{ font-size: 1.2rem; }
  .cards-feature .post-card:first-child .post-meta{ align-self: end; }
  .cards-feature .post-card:first-child .post-card-title{ align-self: start; }
}

/* 絞り込み・カテゴリー */
.filter{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 clamp(2rem, 5vw, 3rem); }
.chip{
  display: inline-block; padding: .45rem 1rem;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft);
  font-size: .8rem; letter-spacing: .08em; text-decoration: none; cursor: pointer; line-height: 1.5;
}
.chip:hover{ border-color: var(--ink-soft); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: #fff; }

/* ページ送り */
.pager{ margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.pager ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pager a, .pager span{
  display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
  border: 1px solid var(--rule); text-decoration: none; font-family: var(--f-latin); font-size: .85rem; color: var(--ink-soft);
}
.pager .current{ background: var(--ink); color: #fff; border-color: var(--ink); }
.pager .dots{ border: none; }

/* ============================================================
   2段組・写真
   ============================================================ */
.split{ display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
@media (min-width: 54rem){
  .split{ grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .split.narrow-first{ grid-template-columns: 5fr 6fr; }
  .split.narrow-last{  grid-template-columns: 6fr 5fr; }
}
figure img{ width: 100%; height: auto; background: var(--paper-2); }
figcaption{ font-size: .78rem; letter-spacing: .06em; color: var(--ink-faint); margin-top: .7rem; line-height: 1.75; }

/* 会社情報などの定義リスト */
.facts{ margin: 1.5rem 0 0; }
.fact{ display: grid; gap: .1rem 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; }
.fact:first-child{ border-top: 1px solid var(--rule-soft); }
@media (min-width: 40rem){ .fact{ grid-template-columns: 7rem 1fr; align-items: baseline; } }
.fact dt{ font-family: var(--f-latin); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.fact dd{ margin: 0; color: var(--ink-soft); }
.fact a{ color: inherit; }

/* ============================================================
   YOSUMI の帯（トップ）
   ============================================================ */
.yosumi-label{ font-family: var(--f-latin); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--olive); margin-bottom: 1rem; }
.yosumi-wordmark{ width: min(15rem, 60vw); margin-bottom: .6rem; }
.yosumi-sub{ font-family: var(--f-mincho); letter-spacing: .14em; color: var(--ink-soft); margin-bottom: 1.4rem; }
.yosumi-text p:not(.note):not(.yosumi-label):not(.yosumi-sub){ font-size: .95rem; }

/* ============================================================
   お問い合わせ枠
   ============================================================ */
.contact-band .lead{ text-align: center; }
.contact-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 2rem 0 1.25rem; }

/* ============================================================
   商品詳細
   ============================================================ */
.product-hero img{ width: 100%; max-height: 80vh; object-fit: cover; }
.product-intro .lead{ text-align: center; }
.notice{ border: 1px solid var(--rule); background: var(--paper-2); padding: 1rem 1.25rem; font-size: .9rem; color: var(--ink-soft); text-align: center; margin-top: 1.5rem; }
.photo-pair{ display: grid; gap: clamp(1rem, 3vw, 1.5rem); margin-top: clamp(2.5rem, 6vw, 3.5rem); }
@media (min-width: 40rem){ .photo-pair{ grid-template-columns: 1fr 1fr; } }
.gallery-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 2vw, 1rem); margin-top: clamp(1rem, 3vw, 1.5rem); }
@media (min-width: 40rem){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
.gallery-item{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.03); }
.sec-text{ max-width: var(--measure-wide); margin-inline: auto; }
.spec-note{ max-width: 42rem; margin: 1.5rem auto 0; text-align: left; }
.sec-figure{ max-width: 48rem; margin: 2rem auto 0; }
.materials{ display: grid; gap: 1.5rem; max-width: 48rem; margin-inline: auto; }
.material{ display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 40rem){ .material{ grid-template-columns: 9rem 1fr; } }
.material figure img{ aspect-ratio: 1; object-fit: cover; }
.material p{ font-size: .92rem; color: var(--ink-soft); }

table.spec{ width: 100%; max-width: 42rem; margin-inline: auto; border-collapse: collapse; font-size: .92rem; }
table.spec th, table.spec td{ text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.spec tr:first-child th, table.spec tr:first-child td{ border-top: 1px solid var(--rule); }
table.spec th{ width: 9em; font-weight: 500; color: var(--ink-soft); padding-right: 1rem; }

/* 拡大表示 */
.lightbox{ border: none; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
.lightbox::backdrop{ background: rgba(20,20,16,.88); }
.lightbox img{ max-width: 96vw; max-height: 86vh; width: auto; height: auto; }
.lightbox button{
  position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem;
  background: rgba(255,255,255,.9); border: none; cursor: pointer; font-size: 1.2rem;
}

/* ============================================================
   本文（固定ページの整えた HTML・ブログ記事の旧 HTML）
   ============================================================ */
.entry{ max-width: var(--measure-wide); margin-inline: auto; }
.entry-page{ max-width: 48rem; }
.entry > *:first-child{ margin-top: 0; }
.entry h2{ font-size: 1.3rem; margin: 3rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.entry h3{ font-size: 1.1rem; margin: 2.5rem 0 .8rem; }
.entry h4{ font-size: 1rem; margin: 2rem 0 .6rem; }
.entry h5{ font-size: .95rem; margin: 1.5rem 0 .5rem; }
.entry a:not(.btn){ color: var(--olive); text-underline-offset: .2em; }
.entry ul, .entry ol{ padding-left: 1.4em; margin: 0 0 1.35em; }
.entry li{ margin-bottom: .3em; }
.entry img{ margin-block: .5rem 1.25rem; }
.entry .aligncenter, .entry img.aligncenter{ margin-inline: auto; }
.entry .alignleft{ float: left; margin: .4rem 1.5rem 1rem 0; max-width: 50%; }
.entry .alignright{ float: right; margin: .4rem 0 1rem 1.5rem; max-width: 50%; }
.entry::after{ content: ""; display: table; clear: both; }
@media (max-width: 40rem){ .entry .alignleft, .entry .alignright{ float: none; margin: .5rem auto 1rem; max-width: 100%; } }
.entry .wp-caption{ max-width: 100%; }
.entry .wp-caption-text{ font-size: .78rem; color: var(--ink-faint); margin-top: -.6rem; }
.entry table{ width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9rem; }
.entry th, .entry td{ border-bottom: 1px solid var(--rule); padding: .75rem .5rem; text-align: left; vertical-align: top; }
.entry th{ font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.entry thead th{ background: var(--paper-2); }
.entry blockquote{ margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 2px solid var(--rule); color: var(--ink-soft); }
.entry iframe{ max-width: 100%; }
.table-scroll{ overflow-x: auto; }

/* 固定ページ用の部品（整えた HTML の中で使う） */
.page-hero{ margin: 0 0 clamp(2.5rem, 6vw, 3.5rem); }
.page-hero img{ width: 100%; margin: 0; }
.steps{ list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: step; }
.steps > li{ position: relative; padding: 1.2rem 0 1.2rem 3.2rem; border-bottom: 1px solid var(--rule-soft); margin: 0; }
.steps > li::before{
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1.15rem;
  font-family: var(--f-mincho); font-size: 1.3rem; color: var(--olive);
}
.steps h3, .steps h4{ margin: 0 0 .4rem; }
.choice{ display: grid; gap: 1.25rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 40rem){ .choice{ grid-template-columns: repeat(3, 1fr); } }
.choice > div{ border-top: 1px solid var(--ink); padding-top: 1rem; }
.choice img{ margin: 0 0 .8rem; width: 100%; height: auto; }
.choice h3{ font-size: 1rem; margin: 0 0 .3rem; }
.choice p{ font-size: .88rem; color: var(--ink-soft); }
.map{ aspect-ratio: 4 / 3; width: 100%; border: 0; background: var(--paper-2); }
@media (min-width: 40rem){ .map{ aspect-ratio: 16 / 9; } }
.video-embed{ position: relative; aspect-ratio: 16 / 9; background: #000; margin: 2rem 0; }
.video-embed button{ position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: #000; }
.video-embed button img{ width: 100%; height: 100%; object-fit: cover; opacity: .85; margin: 0; }
.video-embed button span{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.65); color: #fff; padding: .8rem 1.4rem; font-size: .85rem; letter-spacing: .1em;
}
.video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.qa{ border-top: 1px solid var(--rule); margin-bottom: 2rem; }
.qa details{ border-bottom: 1px solid var(--rule); }
.qa summary{
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--f-mincho); font-size: .98rem; letter-spacing: .04em;
}
.qa summary::-webkit-details-marker{ display: none; }
.qa summary::after{ content: "＋"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: .85rem; }
.qa details[open] summary::after{ content: "－"; }
.qa details > div{ padding: 0 0 1.25rem; font-size: .92rem; color: var(--ink-soft); }
.window{ display: grid; gap: 1rem; margin: 2rem 0; }
@media (min-width: 40rem){ .window{ grid-template-columns: 1fr 1fr; } }
.window > div{ border: 1px solid var(--rule); padding: 1.5rem 1.4rem; background: var(--paper); }
.window h2{ font-size: 1.05rem; margin: 0 0 .6rem; border: 0; padding: 0; }
.window p{ font-size: .92rem; color: var(--ink-soft); }
.window .btn{ margin-top: .5rem; }
.big-tel{ font-family: var(--f-latin); font-size: 1.6rem; letter-spacing: .06em; color: var(--ink) !important; text-decoration: none; }

/* ============================================================
   ブログ記事
   ============================================================ */
.post-head{ max-width: var(--measure-wide); margin: 0 auto 2.5rem; text-align: center; }
.post-head .post-meta{ justify-content: center; }
.post-title{ font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.6; margin: .4rem 0 0; }
.post-nav{ max-width: var(--measure-wide); margin: 3.5rem auto 0; display: grid; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
@media (min-width: 40rem){ .post-nav{ grid-template-columns: 1fr 1fr; } .post-nav .next{ text-align: right; } }
.post-nav a{ text-decoration: none; color: var(--ink); display: block; }
.post-nav .dir{ display: block; font-size: .72rem; letter-spacing: .12em; color: var(--ink-faint); }
.post-nav .t{ font-family: var(--f-mincho); font-size: .9rem; }

/* 検索フォーム */
.search-form{ display: flex; gap: .5rem; margin-top: 1.5rem; }
.search-form label{ flex: 1; }
.search-field{ width: 100%; padding: .8rem; border: 1px solid var(--rule); font-size: 16px; border-radius: 0; }
.search-submit{ background: var(--btn); color: #fff; border: 1px solid var(--btn); padding: .8rem 1.2rem; cursor: pointer; }

/* ============================================================
   フッター
   ============================================================ */
.site-foot{
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
  font-size: .84rem;
  color: var(--ink-soft);
}
.foot-grid{ display: grid; gap: 2rem; align-items: start; }
@media (min-width: 54rem){ .foot-grid{ grid-template-columns: 1fr 1.4fr; } }
.foot-brand{ text-align: center; }
@media (min-width: 54rem){ .foot-brand{ text-align: left; } }
.foot-logo{ display: inline-block; color: var(--ink); }
.foot-logo .logo{ width: 64px; height: auto; }
.foot-name{ font-family: var(--f-mincho); font-size: .98rem; color: var(--ink); margin: .8rem 0 .2rem; letter-spacing: .08em; }
.foot-catch{ font-family: var(--f-mincho); font-size: .82rem; letter-spacing: .1em; }
.foot-info{ margin: 0; }
.foot-info > div{ display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); }
.foot-info dt{ color: var(--ink-faint); font-size: .78rem; }
.foot-info dd{ margin: 0; }
.foot-info a{ color: inherit; }
.foot-links{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem 1.5rem; list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule-soft);
  font-size: .78rem;
}
.foot-links a{ color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover{ color: var(--ink); }
.foot-copy{ text-align: center; font-family: var(--f-latin); font-size: .68rem; letter-spacing: .16em; color: var(--ink-faint); margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation: none !important; }
  html{ scroll-behavior: auto; }
}