@charset "utf-8";

/* ==========================================================
   電設のやっとかめ 公式HP（提案用デモ）

   色：Meets のチラシ画像から実際に抜き出した4色。
       黄 #ffde59（画像の20.5%）／マゼンタ #e01898（5.6%）／水色 #00a8e0（2.7%）／濃青 #0018c0。
       黄と白を地色に、マゼンタを行動の色、濃青を文字に使う。濃い面は作らない
       （no-ai-design：ボタンと濃色面を別色相にしない → そもそも濃色面を置かない）。
   書体：Noto Sans JP 1書体。太さ（400／700／900）と大きさだけで差を付ける。
   横幅：--wrap ひとつだけ。文章も写真もこの幅にそろえる。
   ========================================================== */

:root{
  /* 2026-08-20 彩度を落とした。チラシの色相（黄・マゼンタ・濃青）はそのままに、
     大人向けの落ち着いたトーンへ。キャラクターを外したぶん、色で子供っぽくならないようにする */
  --yellow:      #f7dd85;   /* 地色（チラシの #ffde59 と #f5e1a4 の中間。鮮やかさを少し戻した） */
  --yellow-soft: #fdf5e0;   /* 淡いほう */
  --yellow-line: #e2c877;   /* 黄の地の上の罫線 */
  --pink:        #ab2b74;   /* 行動の色（白文字でコントラスト6.3） */
  --pink-strong: #bb337f;   /* 大きな見出し用 */
  --pink-dark:   #85205a;   /* ホバー */
  --navy:        #27395f;   /* 見出しと強い文字 */
  --sky:         #4b8fae;   /* 差し色（小さく使う） */

  --ink:      #22262f;
  --ink-sub:  #5a6270;
  --paper:    #ffffff;
  --rule:     #e2e0da;
  --rule-fine:#eceae5;

  --wrap: 900px;
  --gap: 20px;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17.5px; line-height:2;
  font-feature-settings:"palt";
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pink); }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.section{ padding:88px 0; }
.section--soft{ background:var(--yellow-soft); }
.section--yellow{ background:var(--yellow); }

/* ---------- 見出し ---------- */
.h2{
  font-weight:900; color:var(--pink);
  font-size:clamp(26px,3.4vw,38px); line-height:1.4;
  margin:0 0 10px; letter-spacing:.01em;
}
.section--soft .h2,.section--yellow .h2{ color:var(--navy); }
.h2-note{
  font-size:16px; color:var(--ink-sub); margin:0 0 38px;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
}
.section--soft .h2-note,.section--yellow .h2-note{ color:#4a4530; border-bottom-color:var(--yellow-line); }
.h3{ font-weight:700; font-size:20px; line-height:1.65; margin:0 0 8px; color:var(--navy); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--pink); color:#fff; text-decoration:none;
  font-size:17px; font-weight:900; letter-spacing:.02em;
  padding:17px 32px; border-radius:6px;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ background:var(--pink-dark); transform:translateY(-2px); box-shadow:0 10px 22px rgba(133,32,90,.24); }
.btn .ico{ width:20px; height:20px; flex:none; }
.btn--line{ background:none; color:var(--navy); border:2px solid var(--navy); font-weight:700; }
.btn--line:hover{ background:var(--navy); color:#fff; box-shadow:none; }
.btn--sm{ font-size:14.5px; padding:11px 20px; }
.ico{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- デモ告知 ---------- */
.demobar{
  background:var(--yellow-soft); color:#4a4530;
  font-size:14px; line-height:1.7; padding:10px 0; text-align:center;
}
.demobar b{ color:var(--pink-dark); font-weight:900; }

/* ---------- ヘッダー ---------- */
.head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.95); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule-fine);
  transition:box-shadow .3s var(--ease);
}
.head.is-stuck{ box-shadow:0 4px 18px rgba(39,57,95,.12); }
.head__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; }
.head__name{ font-size:21px; font-weight:900; letter-spacing:.04em; color:var(--navy); }
.head__sub{ font-size:11.5px; color:var(--ink-sub); letter-spacing:.04em; margin-top:1px; font-weight:500; }
.head__right{ display:flex; align-items:center; gap:22px; }
.head__tel{ font-size:11.5px; color:var(--ink-sub); text-align:right; line-height:1.5; }
.head__tel b{ display:block; font-size:21px; font-weight:900; color:var(--navy); letter-spacing:.01em; }

/* ---------- ヒーロー ---------- */
.hero{ position:relative; background:var(--yellow); overflow:hidden; }
.hero__media{ position:absolute; right:0; top:0; bottom:0; width:40%; overflow:hidden; background:#ded8cc; }
.hero__shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero__shot.is-on{ opacity:1; animation:heroZoom 9s linear forwards; }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.hero__copy{ position:relative; z-index:2; padding:84px 0 88px; width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.hero__inner{ max-width:min(100%, 560px); }
.hero__eyebrow{
  display:inline-block; margin:0 0 16px;
  font-size:15px; font-weight:900; color:var(--navy);
  padding-bottom:6px; border-bottom:3px solid var(--navy);
}
.hero__title{
  font-weight:900; color:var(--navy);
  font-size:clamp(28px,3.5vw,44px); line-height:1.4; margin:0 0 20px; letter-spacing:.01em;
}
.hero__title em{ font-style:normal; color:var(--pink-strong); }
.hero__lead{ font-size:17px; color:#3c3722; margin:0 0 28px; font-weight:500; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; }
.hero__tel{ font-size:14px; color:#4a4530; font-weight:700; }
.hero__tel b{ display:block; font-size:24px; font-weight:900; color:var(--navy); letter-spacing:.01em; }

/* ---------- できること ---------- */
.can{ display:grid; gap:0; }
.can__item{
  display:grid; grid-template-columns:280px 1fr; gap:var(--gap);
  align-items:start; padding:30px 0;
}
.can__item + .can__item{ border-top:1px solid var(--rule-fine); }
.section--soft .can__item + .can__item{ border-top-color:var(--yellow-line); }
.can__item figure{ margin:0; overflow:hidden; border-radius:6px; }
.can__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.can__item:hover img{ transform:scale(1.05); }

/* ---------- 施工の記録 ---------- */
.works{ display:grid; gap:60px; }
.work + .work{ border-top:1px solid var(--yellow-line); padding-top:60px; }
/* 日付は面を作らずに文字だけで見せる（no-ai-design：塗りのタグを使わない） */
.work__date{ font-size:14px; font-weight:900; letter-spacing:.1em; color:var(--navy); margin:0 0 6px; }
.work__photos{ display:grid; gap:var(--gap); margin:24px 0 0; }
.work__photos--2{ grid-template-columns:1fr 1fr; }
.work__photos--3{ grid-template-columns:1fr 1fr 1fr; }
.work__photos figure{ margin:0; }
.frame{ display:block; overflow:hidden; border-radius:6px; }
.work__photos img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.work__photos figure:hover img{ transform:scale(1.05); }
.work__photos--1 img{ aspect-ratio:16/10; }
.work__photos figcaption{ font-size:14.5px; color:#4a4530; margin-top:8px; line-height:1.7; font-weight:500; }

/* ---------- 前と後 ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.ba figure{ margin:0; }
.ba img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .8s var(--ease); }
.ba figure:hover img{ transform:scale(1.04); }
.ba figcaption{ font-size:16px; margin-top:12px; line-height:1.85; }
.ba figcaption b{ display:block; font-size:18px; font-weight:900; color:var(--navy); margin-bottom:3px; }
.ba figcaption .after{ color:var(--pink); }

/* ---------- 親方 ---------- */
.oyakata{ display:grid; grid-template-columns:1fr 1fr; gap:44px var(--gap); align-items:start; }
.facts{ margin:0; font-size:16px; line-height:1.9; }
.facts dt{ font-size:13.5px; font-weight:900; color:var(--navy); letter-spacing:.1em; margin-top:20px; }
.facts dt:first-child{ margin-top:0; }
.facts dd{ margin:3px 0 0; }
.placeholder{
  border:2px dashed var(--yellow-line); background:rgba(255,255,255,.7);
  padding:22px; font-size:15px; color:var(--ink-sub); line-height:1.85; margin-top:28px; border-radius:6px;
}
.placeholder b{ display:block; color:var(--navy); font-size:15px; font-weight:900; margin-bottom:4px; }

/* ---------- 料金 ---------- */
.price{ margin:0; }
.price div{
  display:flex; justify-content:space-between; gap:24px;
  padding:15px 0; border-bottom:1px solid var(--rule-fine);
}
.price dt{ font-weight:700; }
.price dd{ margin:0; white-space:nowrap; color:var(--navy); font-weight:900; }
.price-note{ font-size:16px; color:var(--ink-sub); margin-top:24px; }

/* ---------- 流れ ---------- */
.flow{ list-style:none; margin:0; padding:0; }
.flow__step{ display:grid; grid-template-columns:88px 1fr; position:relative; padding-bottom:38px; }
.flow__step::before{
  content:""; position:absolute; left:31px; top:16px; bottom:-16px;
  width:3px; background:var(--yellow-line);
  transform:scaleY(0); transform-origin:top; transition:transform .7s var(--ease);
}
.reveal-active .flow.is-in .flow__step::before{ transform:scaleY(1); }
.flow.is-in .flow__step:nth-child(2)::before{ transition-delay:.09s; }
.flow.is-in .flow__step:nth-child(3)::before{ transition-delay:.18s; }
.flow.is-in .flow__step:nth-child(4)::before{ transition-delay:.27s; }
.flow__step:last-child{ padding-bottom:0; }
.flow__step:last-child::before{ content:none; }
.flow__no{ position:relative; z-index:1; }
.flow__no span{
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:24px; font-weight:900; line-height:1;
}
.flow__body{ padding-top:13px; }
.flow__body p{ color:#4a4530; font-size:16px; }

/* ---------- お問い合わせ ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:44px var(--gap); align-items:start; }
.contact__label{ font-size:13.5px; font-weight:900; letter-spacing:.12em; color:var(--navy); display:block; }
.contact__tel b{ display:block; font-size:36px; font-weight:900; line-height:1.3; color:var(--navy); letter-spacing:.01em; margin-top:4px; }
.contact__memo{ font-size:15.5px; color:#4a4530; margin-top:6px; }
.contact .btn{ margin-top:16px; }

/* ---------- フッター ---------- */
.foot{ border-top:1px solid var(--rule); padding:40px 0 96px; font-size:15px; color:var(--ink-sub); }
.foot dl{ margin:0 0 20px; display:grid; grid-template-columns:170px 1fr; gap:6px var(--gap); }
.foot dt{ font-size:12px; font-weight:900; color:var(--navy); letter-spacing:.08em; }
.foot dd{ margin:0; color:var(--ink); }

/* ---------- スマホの固定CTA ---------- */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--rule-fine);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.cta-bar.is-on{ transform:translateY(0); }
.cta-bar .btn{ flex:1; justify-content:center; padding:14px 12px; font-size:15px; }

/* ---------- 出現アニメーション ---------- */
.reveal-active [data-reveal]{ opacity:0; transform:translateY(18px); }
.reveal-active [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-active [data-reveal][data-delay="1"].is-in{ transition-delay:.10s; }
.reveal-active [data-reveal][data-delay="2"].is-in{ transition-delay:.20s; }
.reveal-active [data-reveal][data-delay="3"].is-in{ transition-delay:.30s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__media img{ animation:none; transform:none; }
  .reveal-active [data-reveal]{ opacity:1; transform:none; }
  .flow__step::before{ transform:scaleY(1); }
  .btn:hover{ transform:none; }
  .can__item:hover img,.work__photos figure:hover img,.ba figure:hover img{ transform:none; }
}

/* 追従ヘッダーの分だけ、アンカー先を下げる */
section[id]{ scroll-margin-top:84px; }

/* ---------- 幅の切り替え ---------- */
@media (max-width:860px){
  .section{ padding:60px 0; }
  /* スマホは写真が主役。小さすぎると印象が弱いので画面の高さから決める（2026-08-20 指摘） */
  .hero__media{ position:relative; right:auto; top:auto; bottom:auto; width:100%; height:min(40vh, 340px); min-height:250px; }
  .hero__inner{ max-width:100%; }
  .hero__copy{ padding:44px 0 52px; }
  .oyakata,.contact{ grid-template-columns:1fr; gap:30px; }
  .work__photos--3{ grid-template-columns:1fr 1fr; }
  .foot dl{ grid-template-columns:1fr; gap:0; }
  .foot dt{ margin-top:14px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  section[id]{ scroll-margin-top:60px; }
  .head .btn,.head__tel{ display:none; }
  .head__in{ padding:11px 0; }
  .head__name{ font-size:19px; }
  .hero__media{ height:min(42vh, 320px); min-height:240px; }
  .hero__title{ font-size:27px; line-height:1.45; }
  .hero__lead{ font-size:15.5px; }
  .hero__tel b{ font-size:22px; }
  .can__item{ grid-template-columns:1fr; gap:14px; padding:24px 0; }
  .work__photos--2,.work__photos--3{ grid-template-columns:1fr; }
  .ba{ grid-template-columns:1fr; gap:28px; }
  .flow__step{ grid-template-columns:56px 1fr; }
  .flow__step::before{ left:24px; }
  .flow__no span{ width:48px; height:48px; font-size:20px; }
  .price div{ flex-direction:column; gap:2px; }
  .price dd{ white-space:normal; }
  .contact__tel b{ font-size:30px; }
  .cta-bar{ display:flex; }
  .foot{ padding-bottom:110px; }
}

/* ==========================================================
   kobaden.biz を参考にした追加分（2026-08-20）
   ・右端の固定タブ ・見出し（アイコン＋日本語＋英字） ・丸いお困りごと導線
   ・横スライダー ・吹き出し ・町並みの帯（画像はあとで差し替えるプレースホルダー）
   ========================================================== */

/* ---------- プレースホルダー ---------- */
.ph{
  display:grid; place-items:center; text-align:center;
  border:2px dashed var(--yellow-line); background:rgba(255,255,255,.55);
  color:#6b5c2a; font-size:12.5px; font-weight:700; line-height:1.5; padding:8px;
  border-radius:8px;
}
.ph--town{ width:100%; height:110px; font-size:13px; }
.ph--circle{ width:150px; height:150px; border-radius:50%; }
.ph--ico{ width:74px; height:74px; flex:none; font-size:11.5px; border-radius:12px; }
.ph--photo{ width:100%; aspect-ratio:4/3; margin-top:26px; font-size:14px; }

/* ---------- 右端の固定タブ（kobaden の見せ方） ---------- */
.rail{ position:fixed; right:0; top:38%; z-index:45; display:grid; gap:8px; }
.rail__tab{
  display:grid; justify-items:center; gap:10px; width:56px; padding:20px 0 22px;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-decoration:none;
  border-radius:10px 0 0 10px; transition:width .25s var(--ease), filter .25s var(--ease);
}
.rail__tab .ico{ width:20px; height:20px; }
.rail__tab:hover{ width:64px; filter:brightness(1.08); }
.rail__tab--mail{ background:var(--pink); color:#fff; }
.rail__tab--tel{ background:var(--yellow); color:var(--navy); }
.rail__tab--insta{ background:var(--navy); color:#fff; }
@media (max-width:1180px){ .rail{ display:none; } }

/* ---------- ヘッダー（ロゴとナビ） ---------- */
.head__logo{ text-decoration:none; display:block; }
.head__eyebrow{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-sub); letter-spacing:.04em; }
.head__name{ display:flex; align-items:baseline; gap:10px; font-size:22px; font-weight:900; color:var(--navy); letter-spacing:.04em; }
.head__rome{ font-size:13px; font-weight:900; color:var(--pink); letter-spacing:.16em; }
.head__nav{ display:flex; gap:22px; }
.head__nav a{
  font-size:15px; font-weight:700; color:var(--ink); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.head__nav a:hover{ color:var(--pink); border-bottom-color:var(--pink); }
@media (max-width:1000px){ .head__nav{ display:none; } }

/* ---------- 吹き出し ---------- */
.bubble{
  position:relative; margin:0; background:#fff; color:var(--navy);
  font-size:16px; font-weight:900; line-height:1.5;
  padding:12px 20px; border-radius:22px;
}
.bubble::after{
  content:""; position:absolute; left:-12px; top:50%; margin-top:-8px;
  border:8px solid transparent; border-right-color:#fff; border-left:0;
}
.pop-bubble{
  position:relative; margin:0 0 0 auto; align-self:center;
  background:var(--pink); color:#fff; font-size:14.5px; font-weight:700; line-height:1.55;
  padding:24px 44px; border-radius:50%; text-align:center; white-space:nowrap;
}
.pop-bubble b{ display:block; font-size:21px; font-weight:900; }
.pop-bubble::after{
  content:""; position:absolute; left:50%; margin-left:-9px; bottom:-8px;
  border:9px solid transparent; border-top-color:var(--pink); border-bottom:0;
}
.pop-bubble--navy{ background:var(--navy); }
.pop-bubble--navy::after{ border-top-color:var(--navy); }
.pop-bubble--sky{ background:var(--sky); color:var(--navy); }
.pop-bubble--sky::after{ border-top-color:var(--sky); }
/* スマホでは見出しの下に回す（かめさんはスマホでご覧になる想定） */
@media (max-width:860px){
  .shead{ flex-wrap:wrap; }
  .pop-bubble{ margin:16px auto 0; font-size:13.5px; padding:18px 34px; }
  .pop-bubble b{ font-size:19px; }
}

/* ---------- ヒーローのキャラクター ---------- */
.hero__say{ display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.hero__icon{
  width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none;
  border:4px solid #fff; box-shadow:0 6px 18px rgba(60,50,10,.16);
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

/* ---------- イラスト（プレースホルダーから差し替え） ---------- */
/* 帯は「幅に合わせて縮める」のではなく「高さを決めて横に繰り返す」。
   幅いっぱいに縮めるとスマホで高さ22pxまで潰れて絵が読めなくなる（2026-08-20 指摘） */
.townline{
  display:block; width:100%; height:120px; margin:0; line-height:0; overflow:hidden;
  background-color:var(--yellow-soft);
  background-image:url("../images/illust/town.svg");
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto 100%;
}
.townline img{ display:none; }
.hero .townline{ position:relative; z-index:3; }

.trouble__ico{
  display:grid; place-items:center; width:150px; height:150px; border-radius:50%;
  background:var(--yellow-soft); transition:transform .3s var(--ease);
}
.trouble__ico img{ width:88px; height:88px; }
.trouble:hover .trouble__ico{ transform:translateY(-6px); }

.shead__ico{ flex:none; display:grid; place-items:center; width:74px; height:74px; }
.shead__ico img{ width:100%; height:100%; }

/* ---------- こんなときに ---------- */
.lead-center{ text-align:center; font-size:18.5px; font-weight:700; color:var(--navy); margin:0 0 36px; }
.troubles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); justify-items:center; }
.trouble{ display:grid; justify-items:center; gap:14px; text-decoration:none; color:var(--navy); }
.trouble__t{ font-size:16.5px; font-weight:900; text-align:center; line-height:1.6; }
@media (max-width:640px){
  .troubles{ grid-template-columns:1fr; gap:26px; }
  .lead-center{ font-size:15.5px; }
}

/* ---------- セクション見出し ---------- */
.shead{ display:flex; align-items:center; gap:16px; margin:0 0 10px; }
.shead__en{ margin:3px 0 0; font-size:13.5px; font-weight:900; letter-spacing:.2em; color:var(--pink); }
.section--soft .shead__en,.section--yellow .shead__en{ color:#7a4f00; }
.shead .h2{ margin:0; }
.shead--center{ justify-content:center; text-align:left; }

/* ---------- 横スライダー ---------- */
.slider{ position:relative; margin-top:8px; }
.slider__track{
  display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px max(20px, calc((100% - var(--wrap)) / 2)) 8px;
  /* 端の余白を snap で食われないようにする */
  scroll-padding-inline-start:max(20px, calc((100% - var(--wrap)) / 2));
  scrollbar-width:none;
}
.slider__track::-webkit-scrollbar{ display:none; }
.slide{ flex:0 0 300px; scroll-snap-align:start; }
.slide img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.slide:hover img{ transform:scale(1.06); }
.slide__date{ font-size:14px; font-weight:900; letter-spacing:.1em; color:var(--navy); margin:12px 0 2px; }
.slide .h3{ font-size:18px; margin-bottom:4px; }
.slide p{ font-size:15.5px; color:#4a4530; line-height:1.85; }
.slider__btn{
  position:absolute; top:110px; z-index:3; width:48px; height:48px; border:0; border-radius:50%;
  background:var(--pink); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(133,32,90,.26); transition:background .2s, transform .2s;
}
.slider__btn .ico{ width:22px; height:22px; stroke-width:2.4; }
.slider__btn:hover{ background:var(--pink-dark); transform:scale(1.06); }
.slider__btn--prev{ left:12px; }
.slider__btn--next{ right:12px; }
@media (max-width:640px){
  .slide{ flex:0 0 250px; }
  .slider__btn{ display:none; }
}

/* ---------- フッター ---------- */
.foot__top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:30px; }
.foot__logo{ display:flex; align-items:center; gap:14px; }
.foot__icon{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--yellow); }
.foot__cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  border:2px solid var(--yellow-line); color:var(--navy); border-radius:999px; padding:13px 24px;
  transition:background .2s;
}
.pill:hover{ background:var(--yellow-soft); }
.pill b{ font-size:20px; font-weight:900; letter-spacing:.01em; }
.foot__info{ margin:0 0 18px; display:grid; grid-template-columns:170px 1fr; gap:6px var(--gap); }
.foot__info dt{ font-size:13.5px; font-weight:900; color:var(--navy); letter-spacing:.08em; }
.foot__info dd{ margin:0; color:var(--ink); }
.foot__note{ font-size:14px; }
@media (max-width:860px){
  .foot__info{ grid-template-columns:1fr; gap:0; }
  .foot__info dt{ margin-top:14px; }
  .foot__top{ flex-direction:column; align-items:flex-start; }
}

.btn--tel{ flex:0 0 auto; background:var(--navy); }
.btn--tel:hover{ background:#1c2a47; }
.pill .ico{ width:22px; height:22px; flex:none; }
.head__name{ flex-wrap:wrap; }
.head__jp{ white-space:nowrap; }
/* 下の固定バーは2行に折れないように詰める */
.cta-bar .btn{ white-space:nowrap; padding:14px 8px; letter-spacing:0; }
.cta-bar .btn--tel{ flex:0 0 100px; }

/* ---------- WCAG まわり（2026-08-20 追加） ----------
   ・本文17.5px、注記も14px以上にそろえた
   ・キーボード操作でどこにいるか分かるようにする（2.4.7 Focus Visible）
   ・出現アニメーションの遅延を5段まで用意（流れを1段ずつ出すため） */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--navy); outline-offset:3px; border-radius:6px;
}
.section--yellow a:focus-visible, .section--yellow button:focus-visible,
.rail__tab:focus-visible{ outline-color:var(--navy); }
.rail__tab--insta:focus-visible{ outline-color:#fff; outline-offset:-4px; }

.reveal-active [data-reveal][data-delay="4"].is-in{ transition-delay:.40s; }
.reveal-active [data-reveal][data-delay="5"].is-in{ transition-delay:.50s; }

/* 流れは1段ずつ出す。丸が少し弾んで出る */
.reveal-active .flow__no[data-reveal]{ transform:translateY(18px) scale(.86); }
.reveal-active .flow__no[data-reveal].is-in{
  transform:none;
  transition:opacity .5s var(--ease), transform .55s cubic-bezier(.2,1.5,.4,1);
}

/* ---------- 代表の写真（2026-08-20 実写に差し替え） ---------- */
.portrait{ margin:0 0 22px; display:flex; align-items:center; gap:20px; }
.portrait img{
  width:132px; height:132px; border-radius:50%; object-fit:cover; flex:none;
  border:5px solid #fff; box-shadow:0 6px 18px rgba(60,50,10,.18);
}
.portrait figcaption{ font-size:15px; color:var(--ink-sub); line-height:1.75; }
.portrait b{ display:block; font-size:23px; font-weight:900; color:var(--navy); margin-bottom:2px; }
.quote{
  font-size:18.5px; font-weight:700; color:var(--navy); line-height:1.9; margin:0 0 22px;
}
@media (max-width:640px){
  .portrait{ gap:16px; }
  .portrait img{ width:108px; height:108px; }
  .portrait b{ font-size:20px; }
  .quote{ font-size:17px; }
}

/* ---------- 事務所の地図（2026-08-20 追加） ---------- */
.about-bottom{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
  align-items:start; margin-top:30px;
}
.about-bottom .ph--photo{ margin-top:0; }
.mapbox{ margin:0; }
.mapbox iframe{
  display:block; width:100%; aspect-ratio:4/3; border:0; border-radius:6px;
  background:var(--yellow-soft);
}
.mapbox figcaption{ font-size:15px; color:#4a4530; line-height:1.85; margin-top:12px; }
.mapbox b{ display:block; font-size:16.5px; font-weight:900; color:var(--navy); margin-bottom:2px; }
.tag-kari{
  margin-left:8px; font-size:12.5px; font-weight:900; color:#fff;
  background:var(--pink); padding:2px 9px; border-radius:4px; vertical-align:2px;
}
@media (max-width:640px){
  .about-bottom{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- 大きな画面での左右の余白（2026-08-20） ----------
   幅の変数をひとつ上げるだけで、文章も写真もそろったまま広がる */
@media (min-width:1500px){
  :root{ --wrap:1100px; }
  body{ font-size:18px; }
  .hero__inner{ max-width:min(100%, 620px); }
  .hero__copy{ padding:100px 0 104px; }
  .slide{ flex:0 0 340px; }
}
@media (min-width:1900px){
  :root{ --wrap:1280px; }
  .hero__inner{ max-width:min(100%, 700px); }
  .hero__media{ width:44%; }
  .can__item{ grid-template-columns:340px 1fr; }
  .slide{ flex:0 0 380px; }
}
@media (max-width:860px){ .townline{ height:100px; } }
@media (max-width:640px){ .townline{ height:84px; } }

/* 説明文を置かない見出しは、見出し自身が区切り線を持つ（他の段とリズムをそろえる） */
.shead--solo{ margin-bottom:38px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.section--soft .shead--solo,.section--yellow .shead--solo{ border-bottom-color:var(--yellow-line); }