@charset "utf-8";
/* 信州ファームデザイン トップページ（デザイン第1版・2026-09）
   白地＋色の粒／縦書きロゴ／波形の帯／丸みのある写真／角丸カード／コーラルのフッター */

:root{
  --ink:#333333;
  --ink-2:#6b7480;
  --accent:#df5f47;
  --accent-d:#cf5039;
  --dark:#3b3b3b;              /* ボタン・PAGETOP・フッターの濃いグレー（2026-09-22 赤から変更） */
  --dark-d:#222;
  --dark-2:#262626;            /* フッター下（ロゴと著作権表示）の地。上の帯より一段濃く */
  --accent-pale:#f7c4b9;
  --pale:#f7fafc;
  --pale-2:#f2f5f8;
  --line:#d6dfe9;
  --c-grape:#6d56af;
  --c-pear:#a8c66c;
  --c-apricot:#f4a94a;
  --c-chest:#a9744f;
  --jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --en:"Jost",sans-serif;
  --side:clamp(30px,5vw,80px);
  --space:clamp(90px,11vw,160px);
  --wave-h:9.375vw;            /* 波の高さ＝幅×135/1440（1440で135px・390で37px） */
  --arch-h:clamp(80px,14vw,200px); /* フッター上のアーチの高さ */
  --flogo-d:clamp(120px,14vw,190px); /* フッター上のロゴの丸 */
  --head-h:74px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px);}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--jp);font-weight:500;font-size:16px;line-height:2;letter-spacing:.06em;overflow-x:clip;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.en{font-family:var(--en);font-weight:500;letter-spacing:.08em;}
.sp-only{display:none;}
.inner{width:min(100% - var(--side)*2,1080px);margin-inline:auto;position:relative;z-index:3;}
.inner.narrow{width:min(100% - var(--side)*2,760px);}
.vertical{writing-mode:vertical-rl;text-orientation:upright;font-feature-settings:"vpal" 0;}
.vertical.en{text-orientation:mixed;}

/* ---------- 波形の区切り（1440幅にひとつの大きなうねり。高さ＝幅の 135/1440。yamauchinotori.jp の比率） ---------- */
.wave{position:relative;}
.wave::before,.wave.wave-b::after{content:"";position:absolute;left:0;right:0;height:var(--wave-h);background-repeat:no-repeat;background-size:100% 100%;z-index:1;pointer-events:none;}
.wave::before{top:calc(var(--wave-h) * -1 + 1px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 135' preserveAspectRatio='none'%3E%3Cpath d='M298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7V135H0V32.5C73.6 12.3 170.3 0 298 0Z' fill='%23f7fafc'/%3E%3C/svg%3E");}
.wave.wave-b::after{bottom:calc(var(--wave-h) * -1 + 1px);transform:rotate(180deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 135' preserveAspectRatio='none'%3E%3Cpath d='M298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7V135H0V32.5C73.6 12.3 170.3 0 298 0Z' fill='%23f7fafc'/%3E%3C/svg%3E");}
.wave-white::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 135' preserveAspectRatio='none'%3E%3Cpath d='M298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7V135H0V32.5C73.6 12.3 170.3 0 298 0Z' fill='%23ffffff'/%3E%3C/svg%3E");}
.bg-pale{background:var(--pale);}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 38px;border-radius:90px;background:var(--dark);color:#fff;font-size:16px;font-weight:700;letter-spacing:.1em;position:relative;z-index:3;transition:background .25s,transform .25s,box-shadow .25s;}
.btn::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn:hover{background:var(--dark-d);transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.18);}
.btn.line{background:#fff;color:var(--dark);box-shadow:inset 0 0 0 2px var(--dark);}
.btn.line:hover{background:#f3f3f3;}
.btn.white{background:#fff;color:var(--dark);}
.btn.white:hover{background:#f3f3f3;box-shadow:0 10px 20px rgba(0,0,0,.12);}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;}

/* ---------- 見出し ---------- */
.sec-head{margin-bottom:clamp(40px,5vw,64px);}
.sec-head .en{display:block;color:var(--accent);font-size:13px;letter-spacing:.2em;margin-bottom:10px;}
.sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.5;letter-spacing:.12em;font-weight:500;}
.sec-head p{margin-top:16px;color:var(--ink);text-wrap:balance;}
.sec-head.center{text-align:center;}

/* ========== 01 はじまりの画面（縦書きロゴ＋シンボル） ========== */
.key{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,7vh,90px);padding:60px var(--side);position:relative;z-index:3;overflow:hidden;}
.key .logo{position:relative;z-index:1;}
/* ヒーローに散らしたくだもの：位置・大きさ・ゆれの周期は style 属性の変数で1つずつ違える。外側＝出現、内側の svg＝ゆれ（同じ transform を2つの要素に分けて衝突を避ける） */
.key-fruits,.deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
/* 節ごとのくだもの（サイト全体に散らす。1節に1〜2個・端に小さく。SPは1つ） */
.message,.menu,.works,.journal,.sub-sec{position:relative;}
.deco .kf{width:calc(36px * var(--s));--half:calc(18px * var(--s));}
.kf{--half:calc(22px * var(--s));position:absolute;left:clamp(var(--half),var(--x),calc(100% - var(--half)));top:clamp(var(--half),var(--y),calc(100% - var(--half)));width:calc(44px * var(--s));aspect-ratio:1/1;transform:translate(-50%,-50%) translate(calc(var(--mx,0px) * var(--z)),calc(var(--my,0px) * var(--z)));opacity:0;animation:kf-in .9s cubic-bezier(.22,.61,.36,1) var(--in) forwards;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.kf svg{display:block;width:100%;height:100%;animation:kf-float var(--d) ease-in-out var(--dl) infinite alternate;}
@keyframes kf-in{from{opacity:0;scale:.6;}to{opacity:1;scale:1;}}
@keyframes kf-float{0%{transform:translateY(-6%) rotate(calc(var(--r) * -1));}100%{transform:translateY(6%) rotate(var(--r));}}
.key .logo{display:block;}
.key .logo img{width:clamp(140px,15vw,200px);height:auto;}
.key-bottom .logo img{width:clamp(96px,9vw,130px);}
.symbols{display:flex;gap:clamp(18px,4.4vw,64px);align-items:flex-end;}
.symbols li{display:flex;flex-direction:column;align-items:center;gap:10px;}
.symbols svg{display:block;}
.symbols .mt{width:34px;height:12px;}
.symbols .fr{width:clamp(30px,3.4vw,44px);height:clamp(30px,3.4vw,44px);}

/* ========== 02 大きな写真 ========== */
.kv{position:relative;z-index:3;}
.kv picture,.kv img{display:block;width:100%;}
.kv img{height:min(88svh,56vw);min-height:420px;object-fit:cover;}
.kv::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--wave-h);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 135' preserveAspectRatio='none'%3E%3Cpath d='M298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7V135H0V32.5C73.6 12.3 170.3 0 298 0Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;}

/* ========== 03 メッセージ ========== */
.message{padding:var(--space) 0 calc(var(--space) + 30px);}
.message .to{display:inline-block;color:var(--accent);font-size:15px;letter-spacing:.16em;margin-bottom:22px;padding:4px 18px;border-radius:90px;box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff;}
.message h2{font-size:clamp(30px,4.2vw,56px);line-height:1.55;letter-spacing:.1em;font-weight:500;margin-bottom:clamp(32px,4vw,52px);}
.message .body p + p{margin-top:1.4em;}
.message .btn-row{margin-top:clamp(36px,4.4vw,56px);}
.message .photos{display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(20px,4vw,56px);margin-top:clamp(50px,7vw,96px);}
.message .photos .ph{border-radius:20px;overflow:hidden;box-shadow:0 0 0 8px #fff,0 0 0 9px var(--pale-2);}
.message .photos .ph:nth-child(1){width:min(30%,300px);margin-bottom:-40px;}
.message .photos .ph:nth-child(2){width:min(52%,540px);}
.ph{position:relative;z-index:3;}

/* ========== 04 よくいただくご相談（縦書きの見出し＋番号カード） ========== */
.menu{padding:calc(var(--space) - 10px) 0 var(--space);}
.menu-grid{display:grid;grid-template-columns:110px minmax(0,1fr) 150px;gap:clamp(24px,4vw,64px);width:min(100% - var(--side)*2,1240px);margin-inline:auto;position:relative;z-index:3;}
.menu-side{position:sticky;top:calc(var(--head-h) + 40px);height:max-content;display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:40px;}
.menu-side .en{font-size:13px;letter-spacing:.22em;line-height:1.7;}
.menu-title{position:sticky;top:calc(var(--head-h) + 30px);height:max-content;justify-self:center;font-size:clamp(24px,2.6vw,36px);letter-spacing:.2em;line-height:1.8;font-weight:500;padding-top:30px;}
.menu-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 36px;padding-top:34px;}
.mcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2),0 6px 0 0 #eef2f6;transition:transform .3s,box-shadow .3s;}
.mcard:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--pale-2),0 14px 26px rgba(90,110,130,.14);}
.mcard .no{position:absolute;left:-26px;top:-56px;width:104px;height:104px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 13c-4-3.4-12.6-2.4-14.6 5.8C5.4 27 10.6 40 17 40c2 0 3-1 5-1s3 1 5 1c6.4 0 11.6-13 9.6-21.2C34.6 10.6 26 9.6 22 13z' fill='%23df5f47'/%3E%3Cpath d='M22 13c0-4 1.2-7 4.2-9' fill='none' stroke='%237a5a3c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;color:#fff;display:grid;place-items:center;padding-top:20px;font-size:19px;letter-spacing:.06em;z-index:2;transform-origin:59% 9%;}
.mcard:hover .no,.mcard:focus-visible .no{animation:sfd-apple .9s cubic-bezier(.36,.07,.19,.97);}  /* 地の色は変えない。りんごがヘタを支点に揺れる */
@keyframes sfd-apple{0%{transform:rotate(0);}15%{transform:rotate(-9deg);}35%{transform:rotate(6deg);}55%{transform:rotate(-4deg);}75%{transform:rotate(2deg);}100%{transform:rotate(0);}}
.mcard .body{padding:44px 30px 28px;text-align:center;flex:1;}
.mcard h3{font-size:21px;letter-spacing:.12em;line-height:1.6;font-weight:500;margin-bottom:22px;}
.mcard .img{border-radius:20px;overflow:hidden;margin:0 auto 22px;width:min(100%,340px);aspect-ratio:3/2;}
.mcard .img img{width:100%;height:100%;object-fit:cover;}
.mcard p{font-size:15px;line-height:1.95;text-wrap:balance;}
.mcard .made{display:block;margin-top:14px;font-size:14px;color:var(--ink-2);line-height:1.8;}
.mcard .made b{display:inline-block;font-weight:500;color:var(--accent);font-size:12px;letter-spacing:.14em;margin-right:8px;padding:0 10px;border-radius:90px;box-shadow:inset 0 0 0 1px var(--accent-pale);}
.mcard .more{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;background:var(--pale);border-radius:0 0 20px 20px;color:var(--accent);font-size:15px;letter-spacing:.14em;}
.mcard .more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}

/* ========== 05 制作実績（丸い写真の見出し＋横に流れるカード） ========== */
.works{padding:var(--space) 0;}
.lead-blob{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;margin-bottom:clamp(40px,5vw,70px);}
.lead-blob .sec-head{margin-bottom:0;}
.blob{border-radius:56% 44% 52% 48% / 48% 56% 44% 52%;overflow:hidden;position:relative;z-index:3;}
.blob img{width:100%;height:100%;object-fit:cover;}
.lead-blob .blob{width:clamp(150px,20vw,270px);aspect-ratio:1/1;margin-top:-40px;}
.slider{position:relative;z-index:3;}
/* 自動で横に流れる（同じ並びを2組ならべて、半分ぶん動かすと途切れない）
   ★すき間は gap でなく margin-right。gap だと2組の合計が「2組分＋すき間の端数」になり、-50% で継ぎ目がずれる */
.slider .viewport{overflow:hidden;padding:6px 0 14px;}
.slider .track{display:flex;width:max-content;animation:sfd-flow var(--flow,50s) linear infinite;}
.slider .track .wcard{margin-right:clamp(20px,3vw,44px);}
.slider:hover .track,.slider:focus-within .track{animation-play-state:paused;}
@keyframes sfd-flow{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.wcard{position:relative;width:clamp(250px,24vw,310px);scroll-snap-align:center;background:#fff;border-radius:20px;box-shadow:0 1px 2px rgba(90,110,130,.06),0 6px 18px rgba(90,110,130,.10);padding:26px 24px 28px;text-align:center;display:block;transition:transform .3s,box-shadow .3s;}
.wcard:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(90,110,130,.07),0 14px 30px rgba(90,110,130,.16);}
.wcard h3{text-wrap:balance;font-size:16px;letter-spacing:.1em;line-height:1.7;font-weight:500;min-height:3.4em;display:grid;place-items:center;margin-bottom:16px;padding-inline:52px;}  /* 右上のしるしに題名がぶつからないよう左右をあける */
.wcard .crops{position:absolute;top:10px;right:12px;display:flex;z-index:2;pointer-events:none;}
.wcard .crops svg{display:block;width:40px;height:40px;}
.wcard .crops svg + svg{margin-left:-8px;}  /* 2つのときは少し重ねて、ひとかたまりに見せる */
.wcard .img{border-radius:10px;overflow:hidden;aspect-ratio:4/3;margin-bottom:16px;}
.wcard .img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.wcard:hover .img img,.wcard:focus-visible .img img{transform:scale(1.07);}  /* 地の色は変えない。写真だけが枠の中で寄る */
.wcard .tag{display:inline-block;font-size:12px;letter-spacing:.12em;line-height:1.5;color:#fff;background:var(--accent);padding:6px 12px;border-radius:90px;margin-bottom:10px;}
.wcard .meta{font-size:14px;line-height:1.8;color:var(--ink-2);}
.works .btn-row{justify-content:center;margin-top:clamp(40px,5vw,60px);}

/* ========== 06 3つのお約束 ========== */
.policy{padding:var(--space) 0;}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.pcard{position:relative;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2),0 6px 0 0 #eef2f6;padding:54px 28px 34px;text-align:center;z-index:3;}
.pcard .no{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:18px;}
.pcard h3{font-size:19px;letter-spacing:.1em;line-height:1.6;font-weight:500;margin-bottom:14px;}
.pcard p{font-size:14px;line-height:2;text-align:left;}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,30px);margin-top:clamp(50px,6vw,80px);}
.stat{aspect-ratio:1/1;border-radius:54% 46% 50% 50% / 50% 52% 48% 50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent-pale);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:3;max-width:220px;width:100%;margin-inline:auto;}
.stat:nth-child(even){border-radius:48% 52% 46% 54% / 54% 48% 52% 46%;}
.stat b{font-family:var(--en);font-weight:500;font-size:clamp(32px,4vw,50px);line-height:1.1;color:var(--accent);letter-spacing:.02em;}
.stat b small{font-family:var(--jp);font-size:max(.36em,13px);margin-left:2px;letter-spacing:.08em;}
.stat b.jp{font-family:var(--jp);font-size:clamp(26px,3.2vw,40px);letter-spacing:.1em;}
.stat span{font-size:13px;line-height:1.6;margin-top:8px;padding:0 14px;}

/* ========== 07 ご相談から納品まで ========== */
.flow{padding:var(--space) 0;}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:st;}
.step{position:relative;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:44px 18px 26px;text-align:center;z-index:3;}
.step::before{counter-increment:st;content:"0" counter(st);position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);font-family:var(--en);font-size:16px;display:grid;place-items:center;letter-spacing:.04em;}
.step:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:8px;border-top:2px solid var(--accent-pale);border-right:2px solid var(--accent-pale);transform:translateY(-50%) rotate(45deg);}
.step h3{font-size:16px;letter-spacing:.08em;line-height:1.6;font-weight:500;margin-bottom:10px;}
.step p{font-size:14px;line-height:1.85;text-align:left;}
.flow .btn-row{justify-content:center;margin-top:clamp(40px,5vw,60px);}

/* ========== 08 セットプラン ========== */
.plan{padding:var(--space) 0;}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.plcard{display:flex;flex-direction:column;background:var(--pale);border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);text-align:center;position:relative;z-index:3;overflow:hidden;}
.plcard .body{padding:34px 26px 26px;flex:1;}
.plcard .tag{display:inline-block;font-size:12px;letter-spacing:.14em;line-height:1;color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1px var(--accent-pale);padding:7px 14px;border-radius:90px;margin-bottom:14px;}
.plcard h3{font-size:19px;letter-spacing:.1em;line-height:1.6;font-weight:500;margin-bottom:12px;}
.plcard p{font-size:14px;line-height:1.9;}
.plcard .price{background:#fff;padding:18px 16px;font-size:14px;border-top:2px solid var(--pale-2);}
.plcard .price b{font-family:var(--en);font-weight:500;font-size:26px;color:var(--accent);letter-spacing:.04em;margin-right:2px;}
.plan .note{text-align:center;margin-top:30px;font-size:15px;}
.plan .btn-row{justify-content:center;margin-top:30px;}

/* ========== 09 農家さんの声 ========== */
.voice{padding:var(--space) 0;}
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.vcard{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:0 26px 30px;text-align:center;position:relative;z-index:3;margin-top:50px;}
.vcard .blob{width:100px;height:100px;margin:-50px auto 18px;box-shadow:0 0 0 6px #fff;}
.vcard h3{font-size:16px;letter-spacing:.08em;line-height:1.75;font-weight:500;margin-bottom:10px;}
.vcard p{font-size:14px;line-height:1.95;text-align:left;}
.vcard .who{display:block;margin-top:14px;font-size:13px;color:var(--ink-2);text-align:center;}

/* ========== 10 読みもの ========== */
.journal{padding:var(--space) 0;}
.jcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.jcard{display:block;position:relative;z-index:3;}
.jcard .img{border-radius:20px;overflow:hidden;aspect-ratio:16/9;margin-bottom:16px;}
.jcard .img img{width:100%;height:100%;object-fit:cover;}
.jcard .tag{display:inline-block;font-size:12px;letter-spacing:.14em;line-height:1;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-pale);background:#fff;padding:6px 12px;border-radius:90px;margin-bottom:8px;}
.jcard h3{text-wrap:pretty;font-size:15px;letter-spacing:.06em;line-height:1.8;font-weight:500;}

/* ========== 11 よくある質問 ========== */
.faq{padding:var(--space) 0;}
.faq-list{display:grid;gap:16px;}
.faq-list details{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);position:relative;z-index:3;}
.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 28px;font-size:16px;letter-spacing:.08em;line-height:1.7;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::before{content:"Q";font-family:var(--en);font-size:22px;color:var(--accent);line-height:1;}
.faq-list summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .3s;margin-right:4px;}
.faq-list details[open] summary::after{transform:rotate(-135deg);}
.faq-list .a{padding:0 28px 26px 68px;font-size:15px;line-height:2;}
.faq .btn-row{justify-content:center;margin-top:clamp(36px,4.4vw,56px);}

/* ========== 12 ご相談（大きな写真＋縦書き） ========== */
.join{position:relative;z-index:3;padding-top:var(--space);padding-bottom:calc(var(--arch-h) + var(--flogo-d) / 2);}  /* フッターのアーチとロゴの丸が食い込むぶんを帯の側に持つ＝帯の色がアーチの下まで続き、つなぎ目が出ない */
body:has(.join) .about{margin-top:0;}  /* 帯が無いページ（ご相談）だけ余白をフッター側に残す */
.join .photo{position:relative;width:min(100% - var(--side),1400px);margin-inline:auto;border-radius:20px;overflow:hidden;}
.join .photo img{width:100%;height:min(86svh,58vw);min-height:460px;object-fit:cover;}
.join .photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 46% at 50% 50%,rgba(28,42,56,.52),rgba(28,42,56,0) 72%),linear-gradient(180deg,rgba(40,60,80,.10),rgba(40,60,80,.30));}  /* 明るい写真でも白い縦書きが読めるよう、文字の後ろだけ落とす */
.join .photo .vertical{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:#fff;font-size:clamp(24px,2.8vw,38px);letter-spacing:.26em;line-height:1.9;text-shadow:0 1px 3px rgba(20,35,50,.45),0 2px 18px rgba(30,50,70,.45);height:9em;}
.join .text{padding:clamp(60px,7vw,100px) 0 clamp(60px,7vw,100px);text-align:center;}
.join .mark{width:64px;height:auto;margin:0 auto 30px;}
.join .text p{max-width:640px;margin-inline:auto;text-align:center;}
.join .btn-row{justify-content:center;margin-top:40px;}
.join .tel{margin-top:34px;line-height:1.6;}
.join .tel a{font-family:var(--en);font-size:clamp(30px,3.4vw,40px);letter-spacing:.06em;color:var(--accent);}
.join .tel small{display:block;font-size:13px;color:var(--ink-2);margin-top:6px;}

/* ========== 13 フッター（コーラルの帯） ========== */
.about{background:var(--dark);color:#fff;position:relative;z-index:3;margin-top:calc(var(--arch-h) + var(--flogo-d) / 2);padding-top:clamp(50px,6vw,90px);padding-bottom:clamp(70px,8vw,110px);}
.about::before{content:"";position:absolute;left:0;right:0;top:calc(var(--arch-h) * -1);height:calc(var(--arch-h) * 2);background:var(--dark);clip-path:ellipse(55% 50% at 50% 50%);pointer-events:none;}  /* 横幅110%の楕円の上半分。はみ出しは clip-path で出さない */
.flogo-circle{position:absolute;left:50%;top:calc(var(--arch-h) * -1);transform:translate(-50%,-50%);width:var(--flogo-d);aspect-ratio:1/1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:transform .3s;}
.flogo-circle:hover{transform:translate(-50%,-50%) scale(1.04);}
.flogo-circle img{width:62%;height:auto;display:block;}
.about h3{font-size:18px;letter-spacing:.16em;font-weight:500;margin:0 0 18px;}
.about dl{display:grid;grid-template-columns:7em minmax(0,1fr);gap:6px 14px;font-size:15px;line-height:1.9;}
.about dt{opacity:.9;}
.about .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,80px);}
.fnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;font-size:15px;}
.fnav a{display:inline-block;padding:3px 0;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .3s;}
.fnav a:hover{background-size:100% 1px;}
.about .sister{margin-top:22px;font-size:14px;line-height:1.8;padding:14px 18px;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
.about .sister a{text-decoration:underline;text-underline-offset:4px;}

.key-bottom{min-height:auto;padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(50px,6vw,80px);}
.fbottom{background:var(--dark-2);color:#fff;}
.copy{text-align:center;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.7);padding-bottom:30px;position:relative;z-index:3;}

/* ---------- ヘッダー（少しスクロールすると上から出てきて追従する） ---------- */
.head{--head-wave:clamp(18px,2.2vw,32px);position:fixed;left:0;right:0;top:0;z-index:50;background:#fcfdfe;transform:translateY(-100%);transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.head::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--head-wave) * -1 + 1px);height:var(--head-wave);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 135' preserveAspectRatio='none'%3E%3Cpath d='M298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7V135H0V32.5C73.6 12.3 170.3 0 298 0Z' fill='%23fcfdfe'/%3E%3Cpath d='M0 32.5C73.6 12.3 170.3 0 298 0C787.6 0 800 171.5 1228 112.5C1315.7 100.4 1385.3 96.7 1440 99.7' fill='none' stroke='%23e3eaf2' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;transform:rotate(180deg);pointer-events:none;}
.scrolled .head{transform:translateY(0);}
.head-in{height:var(--head-h);display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding:0 clamp(16px,2.6vw,40px);}
.head-logo{flex:0 0 auto;display:block;transition:opacity .25s;}
.head-logo img{height:clamp(46px,4.4vw,56px);width:auto;}
.head-logo:hover{opacity:.65;}
.head-nav{display:flex;gap:clamp(10px,1.8vw,28px);margin-left:auto;}
.head-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:13px;letter-spacing:.1em;line-height:1.3;padding:6px 2px 4px;transition:color .25s;}
.head-nav .ic{display:flex;align-items:flex-end;justify-content:center;height:26px;}
.head-nav .ic svg{display:block;}
.head-nav .ic .fr{width:25px;height:25px;}
.head-nav .ic .mark{width:26px;height:9px;margin-bottom:8px;}
.head-nav a .tx{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .3s;padding-bottom:2px;}
.head-nav a:hover{color:var(--accent);}
.head-nav a:hover .tx{background-size:100% 2px;}
.head-nav a.is-current{color:var(--accent);}
.head-nav a.is-current .tx{background-size:100% 2px;}
.head .cta{flex:0 0 auto;min-height:46px;padding:0 22px;font-size:14px;margin-left:clamp(6px,1.4vw,18px);}
.pagetop{position:fixed;left:clamp(16px,2.8vw,40px);bottom:30px;z-index:51;width:92px;height:84px;display:grid;place-items:center;color:#fff;font-size:12px;letter-spacing:.12em;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s,transform .3s;}
.scrolled .pagetop{opacity:1;visibility:visible;}
.pagetop svg{position:absolute;inset:0;width:100%;height:100%;}
.pagetop span{position:relative;padding-top:8px;}
.pagetop:hover{transform:translateY(-4px);}
.toggle{display:none;}

/* ---------- スクロールで現れる ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.slider .viewport{overflow-x:auto;} .slider .track{animation:none;} .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} .head{transition:none;} .kf{opacity:1;animation:none;} .kf svg{animation:none;} .wcard .img img{transition:none;} .wcard:hover .img img{transform:none;} .mcard:hover .no,.mcard:focus-visible .no{animation:none;}}
.no-js .reveal{opacity:1;transform:none;}

/* ================= タブレット ================= */
@media (max-width:1100px){
  .menu-grid{grid-template-columns:minmax(0,1fr) 90px;}
  .menu-side{display:none;}
  .menu-title{grid-column:2;grid-row:1;}
  .menu-cards{grid-column:1;grid-row:1;}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:46px;}
  .step:nth-child(3)::after{display:none;}
  .head-nav a{font-size:12px;letter-spacing:.06em;}
  .head-nav .ic .fr{width:22px;height:22px;}
}

/* ================= スマホ ================= */
@media (max-width:760px){
  :root{--side:30px;--head-h:62px;--space:84px;}
  .sp-only{display:inline;}
  .pc-only{display:none;}
  body{font-size:16px;}
  .key{min-height:100svh;gap:48px;}
  .kf{--half:calc(15px * var(--s));width:calc(30px * var(--s));}
  .deco .kf{width:calc(24px * var(--s));--half:calc(12px * var(--s));}
  .kf.pc{display:none;}
  .symbols{gap:14px;}
  .symbols .mt{width:24px;height:9px;}
  .symbols .fr{width:28px;height:28px;}
  .kv img{height:120vw;min-height:0;}
  .message h2{font-size:25px;letter-spacing:.04em;line-height:1.7;}
  .message .photos{margin-top:56px;gap:16px;}
  .message .photos .ph{box-shadow:0 0 0 5px #fff,0 0 0 6px var(--pale-2);border-radius:15px;}
  .message .photos .ph:nth-child(1){width:36%;margin-bottom:-24px;}
  .message .photos .ph:nth-child(2){width:58%;}
  .btn{width:100%;min-height:58px;padding:0 24px;}
  .menu-grid{grid-template-columns:minmax(0,1fr) 44px;gap:14px;width:calc(100% - 30px - 16px);margin-left:30px;margin-right:16px;}
  .menu-title{font-size:22px;top:calc(var(--head-h) + 26px);padding-top:34px;}
  .menu-cards{grid-template-columns:minmax(0,1fr);gap:56px;}
  .mcard .no{width:84px;height:84px;font-size:16px;left:-18px;top:-44px;padding-top:16px;}
  .mcard .body{padding:40px 22px 24px;}
  .mcard h3{font-size:19px;margin-bottom:18px;}
  .mcard p{font-size:16px;}
  .lead-blob{grid-template-columns:minmax(0,1fr);}
  .lead-blob .blob{grid-row:1;width:140px;margin:0 0 18px auto;}
  .slider .track{padding-inline:30px;gap:18px;}
  .wcard{width:74vw;max-width:300px;}
  .pcards,.plans,.voices,.jcards{grid-template-columns:minmax(0,1fr);}
  .pcards{gap:56px;}
  .pcard p,.plcard p,.vcard p{font-size:16px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:44px;}
  .step{padding:40px 24px 24px;}
  .step p{font-size:16px;text-align:center;}
  .step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-27px;transform:translateX(-50%) rotate(135deg);display:block;}
  .jcard h3{font-size:16px;}
  .faq-list summary{padding:18px 18px;gap:12px;}
  .faq-list .a{padding:0 20px 22px 20px;font-size:16px;}
  .join .text p br{display:none;}  /* PCは指定の位置で2行。スマホは箱が狭く、入れたままだと行末に1文字だけ残る */
  .join .text p{word-break:auto-phrase;}
  .join .photo{width:100%;border-radius:0;}
  .join .photo img{height:130vw;}
  .about .cols{grid-template-columns:minmax(0,1fr);}
  .about dl{grid-template-columns:6em minmax(0,1fr);}
  .head-in{padding:0 12px 0 16px;gap:8px;}
  .head-logo img{height:40px;}
  .head-nav{display:none;}
  .head .cta{width:auto;flex:0 0 auto;min-height:42px;padding:0 15px;font-size:13px;letter-spacing:.04em;margin-left:auto;}
  .pagetop{left:10px;bottom:10px;width:70px;height:64px;font-size:12px;letter-spacing:.04em;}
  /* ハンバーガー（luma-pet.com と同じ組み）
     閉：幅の違う3本（24/32/18）＋下に MENU ／ 開：×＋CLOSE。色はこのサイトの濃いグレー */
  .toggle{display:block;position:relative;flex:0 0 auto;width:44px;height:46px;background:none;z-index:60;}
  .toggle span{display:block;position:absolute;left:6px;height:2px;border-radius:2px;background:var(--dark);
    transition:top .4s,width .4s,transform .4s,opacity .4s,background .4s;}
  .toggle span:nth-child(1){top:8px;width:24px;}
  .toggle span:nth-child(2){top:16px;width:32px;}
  .toggle span:nth-child(3){top:24px;width:18px;}
  .toggle::after{content:"MENU";position:absolute;left:0;right:0;bottom:0;font-family:var(--en);font-weight:500;
    font-size:9px;letter-spacing:.12em;line-height:1;color:var(--dark);text-align:center;transition:color .4s;}
  .menu-open .toggle span:nth-child(1){top:16px;width:28px;transform:rotate(-45deg);background:#fff;}
  .menu-open .toggle span:nth-child(2){opacity:0;}
  .menu-open .toggle span:nth-child(3){top:16px;width:28px;transform:rotate(45deg);background:#fff;}
  .menu-open .toggle::after{content:"CLOSE";color:#fff;}
  /* メニューが開いているあいだは、ヘッダーを最前面に出して閉じるボタンを押せるようにする */
  .menu-open .head{z-index:60;background:transparent;box-shadow:none;}
  .menu-open .head::after{opacity:0;}
  .menu-open .head-logo,.menu-open .head .cta{opacity:0;pointer-events:none;}
  .drawer{position:fixed;inset:0;z-index:55;background:rgba(59,59,59,.98);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;}
  .menu-open .drawer{opacity:1;visibility:visible;}
  .drawer a{color:#fff;font-size:20px;letter-spacing:.2em;line-height:2.1;padding:10px 20px;}
  .drawer a.btn{margin-top:26px;width:auto;padding:0 40px;font-size:16px;letter-spacing:.1em;
    background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;}
  .drawer a.btn:hover{background:#fff;color:var(--dark);}
}
@media (min-width:761px){.drawer{display:none;}}

/* =====================================================================
   下層ページ（2026-09-19 追加）
   ===================================================================== */

/* ---------- ページの見出し（縦書き） ---------- */
.page-key{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:26px;padding:clamp(70px,8vw,110px) var(--side) clamp(46px,5vw,70px);}
.home-logo{position:absolute;left:var(--side);top:clamp(30px,4vw,48px);display:block;transition:opacity .25s;}
.home-logo img{width:clamp(62px,6.4vw,84px);height:auto;}
.home-logo:hover{opacity:.65;}
.page-title{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:16px;}
.page-title .jp{font-size:clamp(30px,3.4vw,46px);letter-spacing:.22em;line-height:1.6;font-weight:500;}
.page-title .en{color:var(--accent);font-size:13px;letter-spacing:.24em;line-height:1.5;margin-top:.4em;}
.page-lead{text-align:center;max-width:640px;text-wrap:balance;}
.page-kv{position:relative;z-index:3;width:min(100% - var(--side)*2,1240px);margin-inline:auto;border-radius:20px;overflow:hidden;}
.page-kv img{width:100%;height:clamp(260px,34vw,480px);object-fit:cover;}
.crumb{position:relative;z-index:3;width:min(100% - var(--side)*2,1240px);margin:18px auto 0;font-size:13px;letter-spacing:.08em;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 10px;}
.crumb a{color:var(--accent);}
.crumb span+span::before,.crumb a+span::before,.crumb a+a::before{content:"／";margin-right:10px;color:var(--line);}
.sub-sec{padding:var(--space) 0;}
.sub-sec.first{padding-top:clamp(70px,8vw,110px);}

/* ---------- 私たちについて ---------- */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center;}
.story .pics{position:relative;padding-bottom:18%;}
.story .pics .ph{border-radius:20px;overflow:hidden;box-shadow:0 0 0 8px #fff,0 0 0 9px var(--pale-2);}
.story .pics .ph:nth-child(1){width:84%;}
.story .pics .ph:nth-child(2){position:absolute;right:0;bottom:0;width:52%;}
.story .quote{font-size:clamp(24px,2.6vw,34px);letter-spacing:.12em;line-height:1.7;font-weight:500;margin:6px 0 30px;}
.story .text p+p{margin-top:1.2em;}
.story .text .sec-head{margin-bottom:0;}
.role-note{text-align:center;margin-top:clamp(40px,5vw,60px);font-size:17px;letter-spacing:.1em;}
.role-note b{color:var(--accent);font-weight:700;}
.members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.member{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2),0 6px 0 0 #eef2f6;padding:34px 26px 30px;text-align:center;position:relative;z-index:3;}
.avatar{width:150px;aspect-ratio:1/1;margin:0 auto 20px;border-radius:56% 44% 52% 48% / 48% 56% 44% 52%;background:var(--pale);box-shadow:inset 0 0 0 2px var(--pale-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);font-size:12px;letter-spacing:.14em;}
.avatar svg{width:40px;height:40px;}
.member .tag{display:inline-block;font-size:12px;letter-spacing:.14em;line-height:1;color:#fff;background:var(--accent);padding:6px 12px;border-radius:90px;margin-bottom:10px;}
.member h3{font-size:19px;letter-spacing:.14em;font-weight:500;line-height:1.6;margin-bottom:8px;}
.member p{font-size:14px;line-height:1.9;}
.history{position:relative;max-width:760px;margin-inline:auto;}
.history::before{content:"";position:absolute;left:47px;top:10px;bottom:10px;width:2px;background:var(--accent-pale);}
.history li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:26px;align-items:start;z-index:3;}
.history li+li{margin-top:34px;}
.history .yr{width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--en);font-size:22px;line-height:1.1;}
.history .yr small{font-family:var(--jp);font-size:12px;margin-top:2px;}
.history li:last-child .yr{background:var(--accent);color:#fff;}
.history .tx{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:22px 28px;}
.history h3{font-size:17px;letter-spacing:.08em;line-height:1.7;font-weight:500;margin-bottom:6px;}
.history p{font-size:15px;line-height:1.9;}
.company{max-width:820px;margin-inline:auto;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:clamp(20px,3vw,40px) clamp(24px,4vw,56px);position:relative;z-index:3;}
.company div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--pale-2);}
.company div:last-child{border-bottom:0;}
.company dt{color:var(--accent);letter-spacing:.12em;}
.company-foot{display:flex;justify-content:center;margin-top:36px;}

/* ---------- できること ---------- */
.gate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:960px;margin-inline:auto;}
.gate a{display:flex;align-items:center;gap:14px;background:#fff;border-radius:90px;box-shadow:inset 0 0 0 2px var(--pale-2);padding:14px 22px;font-size:15px;letter-spacing:.08em;line-height:1.5;position:relative;z-index:3;transition:box-shadow .25s,transform .25s,background .25s;}
.gate a b{font-family:var(--en);font-weight:500;color:var(--accent);font-size:15px;}
.gate a::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);flex:0 0 auto;}
.gate a:hover{background:#fff4f1;transform:translateY(-2px);}
.svc-list{display:grid;gap:clamp(70px,8vw,110px);margin-top:clamp(70px,8vw,110px);}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;scroll-margin-top:calc(var(--head-h) + 40px);}
.svc:nth-child(even) .img{order:2;}
.svc .img{position:relative;}
.svc .img .ph{border-radius:20px;overflow:hidden;aspect-ratio:4/3;}
.svc .img .ph img{width:100%;height:100%;object-fit:cover;}
.svc .img .no{position:absolute;left:-24px;top:-52px;width:100px;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 13c-4-3.4-12.6-2.4-14.6 5.8C5.4 27 10.6 40 17 40c2 0 3-1 5-1s3 1 5 1c6.4 0 11.6-13 9.6-21.2C34.6 10.6 26 9.6 22 13z' fill='%23df5f47'/%3E%3Cpath d='M22 13c0-4 1.2-7 4.2-9' fill='none' stroke='%237a5a3c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;color:#fff;display:grid;place-items:center;padding-top:19px;font-size:18px;z-index:4;}
.svc:nth-child(even) .img .no{left:auto;right:-16px;}
.svc h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:.12em;line-height:1.6;font-weight:500;margin-bottom:16px;}
.svc .desc{margin-bottom:22px;font-size:15px;line-height:1.87;font-weight:300;}
.spec{border-radius:15px;background:var(--pale);box-shadow:0 0 0 2px var(--pale-2);padding:6px 22px;}
.spec div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #e9eef4;font-size:15px;line-height:1.8;}
.spec div:last-child{border-bottom:0;}
.spec dt{color:var(--accent);font-size:14px;letter-spacing:.1em;}
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.mini li{background:#fff;border-radius:15px;box-shadow:0 0 0 2px var(--pale-2);padding:24px 18px 22px;text-align:center;position:relative;z-index:3;}
.mini li::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--accent-pale);margin:0 auto 12px;}
.mini li:nth-child(4n+2)::before{background:#d9e8bd;}
.mini li:nth-child(4n+3)::before{background:#d6cdee;}
.mini li:nth-child(4n+4)::before{background:#fae3a6;}
.mini h3{font-size:22px;letter-spacing:.1em;line-height:1.55;font-weight:500;margin-bottom:6px;text-wrap:balance;word-break:auto-phrase;}
.mini p{font-size:13px;line-height:1.7;}
.plcard ul{display:inline-grid;gap:4px;text-align:left;margin-top:6px;}
.plcard li{position:relative;padding-left:20px;font-size:15px;line-height:1.8;}
.plcard li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent-pale);}
.plcard li.first::before{background:var(--accent);}
.plcard .price small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;}
.flowlist{max-width:820px;margin-inline:auto;position:relative;counter-reset:fl;}
.flowlist::before{content:"";position:absolute;left:35px;top:20px;bottom:20px;width:2px;background:var(--accent-pale);}
.flowlist li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;align-items:start;z-index:3;}
.flowlist li+li{margin-top:26px;}
.flowlist li::before{counter-increment:fl;content:"0" counter(fl);width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--en);font-size:20px;letter-spacing:.04em;}
.flowlist .tx{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:22px 28px;}
.flowlist h3{font-size:18px;letter-spacing:.1em;line-height:1.7;font-weight:500;margin-bottom:6px;}
.flowlist h3 small{font-size:14px;color:var(--ink-2);margin-left:8px;letter-spacing:.06em;}
.flowlist p{font-size:15px;line-height:1.9;}
.support-price{text-align:center;margin-top:34px;font-size:16px;}
.support-price b{font-family:var(--en);font-weight:500;font-size:26px;color:var(--accent);margin:0 2px;}
.pcards.plain .pcard{padding-top:34px;}

/* ---------- 制作実績（一覧・詳細） ---------- */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);}
.wgrid .wcard{width:auto;}
.wgrid .wcard[hidden]{display:none;}
.wcard .meta small{display:block;font-size:13px;}
.filters{background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,36px);margin-bottom:clamp(30px,4vw,50px);display:grid;gap:14px;position:relative;z-index:3;}
.filters .row{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;align-items:start;}
.filters .row>span{font-size:14px;letter-spacing:.1em;color:var(--ink-2);padding-top:8px;}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;}
.chips button,.chips label{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:90px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px;letter-spacing:.08em;line-height:1.4;transition:background .2s,color .2s,box-shadow .2s;cursor:pointer;}
.chips button:hover{background:#fff4f1;color:var(--accent);}
.chips label:hover{background:var(--pale-2);color:var(--accent);}
.chips button.on{background:var(--accent);color:#fff;box-shadow:none;}
.result{font-size:14px;color:var(--ink-2);letter-spacing:.08em;text-align:right;margin:-10px 0 18px;}
.result b{font-family:var(--en);font-weight:500;font-size:20px;color:var(--accent);margin:0 3px;}
.empty{text-align:center;padding:40px 0;color:var(--ink-2);}
.more-wrap{display:flex;justify-content:center;margin-top:clamp(40px,5vw,60px);}
.detail-head{max-width:1000px;margin-inline:auto;}
.detail-head .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
.detail-head .tags span{font-size:13px;letter-spacing:.12em;line-height:1;padding:7px 14px;border-radius:90px;background:var(--accent);color:#fff;}
.detail-head .tags span.sub{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-pale);}
.detail-head h1{font-size:clamp(26px,3vw,40px);letter-spacing:.12em;line-height:1.6;font-weight:500;text-align:center;}
.detail-head .client{text-align:center;color:var(--ink-2);margin-top:8px;}
.detail-main{max-width:1000px;margin:clamp(34px,4vw,50px) auto 0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;}
.detail-main img{width:100%;height:100%;object-fit:cover;}
/* 実績詳細のデータ＝表組（できることの .spec と同じ組み） */
.detail-meta{max-width:680px;margin:0 auto;border-radius:15px;background:#fff;box-shadow:0 0 0 2px var(--pale-2);padding:6px 24px;}  /* 帯（--pale）と同じ色だと沈むので白 */
#gallery .gallery + .sec-head{margin-top:clamp(64px,8vw,104px);}  /* 写真のあとに見出しが来るぶんの余白 */
.detail-meta div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid #e9eef4;}
.detail-meta div:last-child{border-bottom:0;}
.detail-meta dt{font-size:14px;letter-spacing:.1em;color:var(--accent);line-height:1.8;}
.detail-meta dd{font-size:15px;line-height:1.8;}
.tbd{border-radius:20px;background:var(--pale);box-shadow:0 0 0 2px var(--pale-2);padding:clamp(24px,3vw,36px) clamp(24px,4vw,44px);position:relative;z-index:3;}
.tbd .label{display:inline-block;font-size:12px;letter-spacing:.16em;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:90px;padding:4px 12px;margin-bottom:12px;}
.tbd p{color:var(--ink-2);}
.tbd p+p{margin-top:.6em;}
.bg-pale .tbd{background:#fff;}
.dsteps{max-width:820px;margin-inline:auto;}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.gallery figure{border-radius:15px;overflow:hidden;aspect-ratio:4/3;background:#fff;box-shadow:0 0 0 2px var(--pale-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--ink-2);font-size:13px;letter-spacing:.1em;position:relative;z-index:3;}
.gallery figure img{width:100%;height:100%;object-fit:cover;flex:1 1 auto;min-height:0;}
.gallery figure figcaption{flex:none;width:100%;padding:14px 16px;line-height:1.6;}  /* 説明の上下に余白。無いと切れる */
.gallery figure svg{margin-bottom:10px;}
.gallery figure svg{width:40px;height:40px;opacity:.9;}
.after-stats{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;margin:0 auto;}
.after-note{max-width:760px;margin:clamp(30px,4vw,44px) auto 0;}
.big-voice{max-width:820px;margin-inline:auto;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2);padding:clamp(30px,4vw,48px);display:grid;grid-template-columns:120px minmax(0,1fr);gap:30px;align-items:center;position:relative;z-index:3;}
.big-voice .blob{width:120px;height:120px;}
.big-voice h3{font-size:19px;letter-spacing:.08em;line-height:1.7;font-weight:500;margin-bottom:8px;}
.big-voice p{color:var(--ink-2);}
.big-voice .who{display:block;font-size:13px;color:var(--ink-2);margin-top:10px;}

/* ---------- よくある質問 ---------- */
.faq-group+.faq-group{margin-top:clamp(56px,6vw,80px);}
.faq-group h2{display:flex;align-items:center;gap:14px;font-size:clamp(20px,2vw,24px);letter-spacing:.14em;line-height:1.5;font-weight:500;margin-bottom:22px;}
.faq-group h2 .en{color:var(--accent);font-size:13px;letter-spacing:.2em;}
.faq-group h2::after{content:"";flex:1;height:2px;background:var(--pale-2);}

/* ---------- ご相談 ---------- */
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:880px;margin-inline:auto;}
.steps.three .step:nth-child(3)::after{display:none;}
.form{max-width:820px;margin:clamp(60px,7vw,90px) auto 0;background:#fff;border-radius:20px;box-shadow:0 0 0 2px var(--pale-2),0 6px 0 0 #eef2f6;padding:clamp(28px,4vw,56px) clamp(22px,5vw,64px);position:relative;z-index:3;}
.form .field{display:grid;grid-template-columns:12em minmax(0,1fr);gap:14px 24px;align-items:start;padding:20px 0;border-bottom:1px solid var(--pale-2);}
.form .field:first-of-type{padding-top:0;}
.form .field>label,.form .field>.label{padding-top:12px;font-size:15px;letter-spacing:.08em;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.req,.opt{font-size:12px;line-height:1;padding:5px 9px;border-radius:90px;letter-spacing:.1em;}
.req{background:var(--accent);color:#fff;}
.opt{background:var(--pale-2);color:var(--ink-2);}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font:inherit;font-size:16px;letter-spacing:.04em;color:var(--ink);background:var(--pale);border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--pale-2);padding:13px 16px;transition:box-shadow .2s,background .2s;}
.form textarea{min-height:170px;resize:vertical;line-height:1.8;}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);}
.form .hint{grid-column:2;font-size:13px;color:var(--ink-2);margin-top:-4px;}
.chips.check input{position:absolute;opacity:0;width:1px;height:1px;}
.chips.check input:checked+span{color:var(--accent);}
.chips.check label:has(input:checked){background:#fff4f1;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);}
.chips.check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
.agree{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:30px;font-size:15px;}
.agree input{width:20px;height:20px;accent-color:var(--accent);}
.agree a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
.form .submit{display:flex;justify-content:center;margin-top:26px;}
.form .submit .btn{min-width:280px;font-family:inherit;}
.form-note{text-align:center;font-size:13px;color:var(--ink-2);margin-top:16px;}
.form-done{display:none;text-align:center;margin-top:18px;color:var(--accent);}
.form.sent .form-done{display:block;}
.telbox{max-width:820px;margin:34px auto 0;border-radius:20px;background:var(--pale);box-shadow:0 0 0 2px var(--pale-2);padding:30px 24px;text-align:center;position:relative;z-index:3;}
.telbox .label{font-size:14px;letter-spacing:.14em;}
.telbox a{display:block;font-family:var(--en);font-size:clamp(32px,3.6vw,42px);letter-spacing:.06em;color:var(--accent);line-height:1.4;margin:4px 0;}
.telbox small{font-size:13px;color:var(--ink-2);}

@media (max-width:1100px){
  .mini{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .page-key{padding-top:96px;gap:22px;}
  .home-logo{top:16px;left:18px;}
  .home-logo img{width:58px;}
  .page-title .jp{font-size:28px;}
  .page-kv{width:100%;border-radius:0;}
  .page-kv img{height:62vw;}
  .crumb{width:calc(100% - 60px);}
  .story{grid-template-columns:minmax(0,1fr);}
  .story .quote{font-size:23px;}
  .members,.gallery{grid-template-columns:minmax(0,1fr);}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .history::before{left:35px;}
  .history li{grid-template-columns:72px minmax(0,1fr);gap:16px;}
  .history .yr{width:72px;height:72px;font-size:18px;}
  .history .tx{padding:18px 20px;}
  .history p{font-size:16px;}
  .company div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;}
  .gate{grid-template-columns:minmax(0,1fr);gap:10px;}
  .svc{grid-template-columns:minmax(0,1fr);}
  .svc:nth-child(even) .img{order:0;}
  .svc .img .no,.svc:nth-child(even) .img .no{left:-14px;right:auto;top:-40px;width:82px;height:82px;font-size:16px;padding-top:15px;}
  .spec{padding:4px 18px;}
  .spec div{grid-template-columns:minmax(0,1fr);gap:2px;font-size:16px;}
  .mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .mini li{padding:20px 12px 18px;}
  .mini h3{font-size:20px;}
  .mini p{font-size:12px;line-height:1.67;}
  .flowlist::before{left:27px;}
  .flowlist li{grid-template-columns:56px minmax(0,1fr);gap:14px;}
  .flowlist li::before{width:56px;height:56px;font-size:17px;}
  .flowlist .tx{padding:18px 20px;}
  .flowlist p{font-size:16px;}
  .flowlist h3 small{display:block;margin-left:0;}
  .wgrid{grid-template-columns:minmax(0,1fr);}
  .filters .row{grid-template-columns:minmax(0,1fr);gap:6px;}
  .filters .row>span{padding-top:0;}
  .chips button,.chips label{min-height:38px;padding:0 14px;}
  .result{text-align:left;}
  .after-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .after-stats .stat span{font-size:12px;padding:0 6px;}
  .big-voice{grid-template-columns:minmax(0,1fr);text-align:center;gap:16px;}
  .big-voice .blob{margin:0 auto;}
  .steps.three{grid-template-columns:minmax(0,1fr);}
  .steps.three .step:nth-child(3)::after{display:none;}
  .form .field{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0;}
  .form .field>label,.form .field>.label{padding-top:0;}
  .form .hint{grid-column:1;}
  .form .submit .btn{min-width:0;}
  .agree{justify-content:flex-start;}
}

/* ========== 読みもの（thematetokyo.com「暮らしのヒント」の組み） ========== */
.journal .sec-head{margin-bottom:0;}
.jr-wrap{width:min(100% - var(--side)*2,1120px);margin-inline:auto;position:relative;z-index:3;}
.jr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,520px));justify-content:space-between;align-items:start;margin-top:80px;}
.jr-big{display:block;}
.jr-bigwrap{position:relative;display:block;}
.jr-back{position:absolute;inset:0;background:var(--accent-pale);border-radius:18px;transform:rotate(4deg);}
.jr-bigimg{position:relative;display:block;width:100%;height:auto;aspect-ratio:520/347;object-fit:cover;border-radius:18px;box-shadow:0 0 9px 1.5px rgba(60,40,30,.16);}
.jr-date{display:flex;align-items:center;gap:8px;margin-top:32px;font-family:var(--en);font-weight:500;font-size:20px;line-height:1;letter-spacing:.04em;color:var(--accent);}
.jr-date i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.jr-date.sm{font-size:13px;gap:5px;margin-top:0;}
.jr-date.sm i{width:4px;height:4px;}
.jr-bigtitle{display:block;margin-top:16px;font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.06em;color:var(--ink);}
.jr-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:20px;font-size:14px;line-height:1.8;letter-spacing:.04em;color:var(--ink);}
.jr-list{display:block;}
.jr-row{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-bottom:2px dotted var(--line);}
.jr-row:first-child{border-top:2px dotted var(--line);}
.jr-thumb{flex:none;width:200px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;}
.jr-rowbody{display:block;min-width:0;padding:8px 0;}
.jr-rowtitle{display:block;margin-top:12px;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.04em;color:var(--ink);}
.jr-big:hover .jr-bigtitle,.jr-row:hover .jr-rowtitle{color:var(--accent);}
.jr-bigtitle,.jr-rowtitle{transition:color .25s;}
.jr-btnrow{margin-top:90px;text-align:center;}
.jr-pill{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#fff;border:1px solid var(--ink);color:var(--ink);border-radius:36px;padding:14px 32px;font-size:16px;font-weight:500;line-height:24px;letter-spacing:.06em;transition:background .25s,color .25s;}
.jr-pill:hover{background:var(--ink);color:#fff;}
@media (max-width:1100px){
  .jr-cols{gap:40px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .jr-thumb{width:140px;}
}
@media (max-width:760px){
  .jr-wrap{width:calc(100% - 40px);}
  .jr-cols{display:block;margin-top:52px;}
  .jr-back{border-radius:12px;}
  .jr-bigimg{border-radius:12px;box-shadow:0 0 6px 1px rgba(60,40,30,.16);}
  .jr-date{font-size:16px;}
  .jr-date.sm{font-size:12px;}
  .jr-bigtitle{font-size:20px;}
  .jr-excerpt{-webkit-line-clamp:3;}
  .jr-list{margin-top:36px;}
  .jr-row-3{display:none;}
  .jr-thumb{width:100px;border-radius:4px;}
  .jr-rowtitle{font-size:14px;}
  .jr-btnrow{margin-top:52px;}
  .jr-pill{font-size:14px;padding:14px 30px;}
}