/* =========================================================
   アルクコト — 下層ページ共通
   house.css のあとに読み込みます。
   ========================================================= */

/* 道の線がないぶん、本文の柱は中央に置く */
.sub{--col-left:24px}
@media (min-width:720px){ .sub{--col-left:calc(50% - 320px)} }

/* ---------- パンくず ---------- */
.sub main{padding-top:calc(var(--hh) + clamp(26px,4vw,48px))}   /* 余白は padding で。margin だと body ごと下がる */
.crumbs{margin:0 var(--gutter) 0 var(--col-left);font-size:12.5px;letter-spacing:.1em;line-height:1.8;color:var(--ink-3)}
.crumbs a{text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;margin:0 .8em;color:var(--rule)}

/* ---------- ページの頭 ---------- */
.page-head{padding:clamp(22px,3vw,34px) 0 clamp(72px,10vw,124px)}
.page-eyebrow{font-family:var(--f-say);font-weight:600;font-size:clamp(16px,1.7vw,21px);letter-spacing:.26em;color:var(--accent)}
.page-title{margin-top:clamp(20px,2.6vw,32px);font-family:var(--f-say);font-weight:600;font-size:clamp(29px,4.4vw,56px);line-height:1.52;letter-spacing:.05em;font-feature-settings:"palt" 1}
.page-lead{margin-top:clamp(28px,3.6vw,44px);color:var(--ink-2)}
.page-lead p + p{margin-top:1.2em}

/* ---------- サービス1件 ---------- */
.svc{padding:clamp(76px,10vw,132px) 0}
.svc + .svc{border-top:1px solid var(--rule)}
.svc-head{display:flex;align-items:flex-end;gap:clamp(14px,2vw,26px)}
.svc-no{font-family:var(--f-num);font-weight:300;font-size:clamp(48px,6.4vw,92px);line-height:.72;letter-spacing:.01em;color:var(--paper);-webkit-text-stroke:1px rgba(34,32,29,.42);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;pointer-events:none;user-select:none;flex:none}
.svc-name{font-family:var(--f-say);font-weight:600;font-size:clamp(25px,3.2vw,42px);line-height:1.25;letter-spacing:.09em}
.svc-says{margin-top:clamp(18px,2.2vw,28px);font-family:var(--f-say);font-weight:600;font-size:clamp(17px,1.8vw,23px);line-height:1.8;letter-spacing:.04em}

/* 画面の見本（パソコンとスマートフォン） */
.svc-shot{margin-top:clamp(38px,5vw,62px)}
.svc-shot a{position:relative;display:block;text-decoration:none;padding-right:16%}
.svc-pc{display:block;position:relative;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(34,32,29,.1),0 30px 52px -34px rgba(34,32,29,.5);transition:transform .6s var(--ease-out)}
.svc-bar{display:flex;gap:6px;align-items:center;height:clamp(17px,2.2vw,26px);padding:0 clamp(8px,1.1vw,12px);background:#E9E4DB}
.svc-bar i{width:clamp(5px,.6vw,7px);aspect-ratio:1;border-radius:50%;background:rgba(34,32,29,.16)}
.svc-pc img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.svc-sp{position:absolute;right:0;bottom:0;width:22%;aspect-ratio:9/19.4;border-radius:18px;background:#191715;padding:5px;box-shadow:0 22px 38px -18px rgba(34,32,29,.6);transition:transform .6s var(--ease-out)}
.svc-sp img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:13px}
.svc-shot a:hover .svc-pc{transform:translateY(-5px)}
.svc-shot a:hover .svc-sp{transform:translateY(-11px)}
@media (max-width:719px){
  .svc-shot a{padding-right:19%}
  .svc-sp{width:24%;border-radius:11px;padding:3px}
  .svc-sp img{border-radius:8px}
}

/* 悩み */
.worries{margin-top:clamp(40px,5vw,64px);padding-left:clamp(18px,2vw,26px);border-left:1px solid var(--rule);font-family:var(--f-say);font-weight:500;font-size:clamp(17px,1.75vw,22px);line-height:1.95;letter-spacing:.04em;color:var(--ink-2)}
.worries li + li{margin-top:.15em}
.worries li.gap{margin-top:1.1em}

/* 語りかけ */
.svc-say{margin-top:clamp(44px,5.5vw,72px);font-family:var(--f-say);font-weight:600;font-size:clamp(20px,2.3vw,30px);line-height:1.75;letter-spacing:.05em;font-feature-settings:"palt" 1}
.svc-key{margin-top:clamp(20px,2.4vw,30px);font-family:var(--f-say);font-weight:600;font-size:clamp(26px,3.6vw,46px);line-height:1.55;letter-spacing:.05em;font-feature-settings:"palt" 1}
.svc .prose{margin-top:clamp(26px,3vw,38px)}

/* 3つの柱 */
.triple{margin-top:clamp(30px,3.6vw,44px);font-family:var(--f-say);font-weight:600;font-size:clamp(18px,1.9vw,24px);line-height:1.8;letter-spacing:.04em;display:grid;gap:.5em}
.triple li{position:relative;padding-left:1.5em}
.triple li::before{content:"";position:absolute;left:0;top:.86em;width:12px;height:1px;background:var(--accent)}

/* 料金 */
.price{margin-top:clamp(34px,4vw,52px);display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .55em;font-family:var(--f-say);font-weight:600;letter-spacing:.04em}
.price b{font-family:var(--f-num);font-weight:400;font-size:clamp(38px,5vw,66px);line-height:1;letter-spacing:.01em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.price span{font-size:clamp(17px,1.8vw,23px)}
.price i{font-style:normal;color:var(--rule);font-size:clamp(17px,1.8vw,23px);margin:0 .2em}

/* サイトへ */
.svc-go{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.svc-go a{display:inline-flex;align-items:center;gap:14px;padding:15px 26px 15px 28px;border:1px solid var(--accent);border-radius:999px;color:var(--accent-ink);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.1em;line-height:1.5;transition:background-color .3s,color .3s,transform .4s var(--ease-out)}
.svc-go a svg{width:22px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .4s var(--ease-out)}
.svc-go a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.svc-go a:hover svg{transform:translateX(4px)}
.svc-url{font-size:13px;letter-spacing:.06em;color:var(--ink-3);font-family:var(--f-num);font-variant-numeric:lining-nums}

/* 他のカテゴリーへ */
.more{padding:clamp(72px,9vw,110px) 0 clamp(20px,3vw,36px);border-top:1px solid var(--rule)}
.more-t{font-family:var(--f-say);font-weight:600;font-size:clamp(17px,1.8vw,22px);letter-spacing:.08em}
.more-list{margin-top:clamp(22px,2.6vw,32px);display:grid;gap:2px}
.more-list a{display:flex;flex-direction:column;align-items:flex-start;gap:.34em;padding:18px 4px 20px;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-left .35s var(--ease)}
.more-list a:hover{padding-left:14px}
.more-list b{font-family:var(--f-say);font-weight:600;font-size:clamp(18px,1.9vw,24px);letter-spacing:.06em;line-height:1.5}
.more-list span{font-size:15px;line-height:1.85;letter-spacing:.02em;color:var(--ink-2)}

/* ---------- ページの頭（副題つき） ---------- */
.page-sub{margin-top:clamp(16px,1.8vw,24px);font-family:var(--f-say);font-weight:600;font-size:clamp(18px,2vw,26px);line-height:1.7;letter-spacing:.05em;color:var(--ink-2);font-feature-settings:"palt" 1}

/* ---------- ページ内の章 ---------- */
.chap{padding:clamp(76px,10vw,132px) 0 0;border-top:1px solid var(--rule)}
.chap-t{font-family:var(--f-say);font-weight:600;font-size:clamp(26px,3.6vw,46px);line-height:1.5;letter-spacing:.07em;font-feature-settings:"palt" 1}
.chap-lead{margin-top:clamp(20px,2.4vw,30px);color:var(--ink-2)}
.chap + .svc{padding-top:clamp(52px,7vw,92px);border-top:0}
.page-head + .svc{padding-top:clamp(22px,3vw,44px)}
.page-head + .svc:not(:has(.svc-head)){padding-top:0}
.page-head + .svc:not(:has(.svc-head)) > .col:first-child > .svc-say:first-child{margin-top:0}

/* ---------- こんな方におすすめです ---------- */
.fit{margin-top:clamp(40px,5vw,64px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--rule)}
.fit-t{font-family:var(--f-say);font-weight:600;font-size:clamp(16px,1.7vw,20px);letter-spacing:.12em}
.fit ul{margin-top:clamp(16px,2vw,24px);display:grid;gap:.55em}
@media (min-width:720px){ .fit ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55em clamp(24px,3vw,44px)} }
.fit li{position:relative;padding-left:1.7em;font-size:15px;line-height:1.95;letter-spacing:.02em;color:var(--ink-2)}
.fit li::before{content:"";position:absolute;left:.2em;top:.72em;width:10px;height:5px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}

/* ---------- 2つ並び（レスキューとドクター） ---------- */
.duo{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(36px,4.4vw,52px)}
@media (min-width:720px){ .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,56px)} }
.duo > div{padding-top:clamp(16px,1.8vw,22px);border-top:1.5px solid var(--ink)}
.duo h4{font-family:var(--f-say);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.4;letter-spacing:.1em}
.duo h4 span{display:block;margin-bottom:.5em;font-family:var(--f-num);font-weight:400;font-size:11.5px;letter-spacing:.24em;color:var(--ink-3)}
.duo p{margin-top:clamp(14px,1.6vw,20px);font-size:14.5px;line-height:2.05;letter-spacing:.02em;color:var(--ink-2)}
.duo p + p{margin-top:1.1em}

/* ---------- 対象エリア ---------- */
.area{margin-top:clamp(26px,3vw,36px);padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,24px);border:1px solid var(--rule);border-radius:10px;font-size:13.5px;line-height:1.9;letter-spacing:.04em;color:var(--ink-2)}
.area b{font-weight:700;letter-spacing:.06em}

/* ---------- 準備中のサービス ---------- */
.svc--soon{padding:clamp(54px,6.5vw,86px) 0}
.svc--soon .svc-no{-webkit-text-stroke-color:rgba(34,32,29,.24)}
.svc--soon .svc-name,.svc--soon .svc-says{color:var(--ink-2)}
.soon{display:inline-block;margin-left:.7em;padding:5px 12px 6px;border:1px solid var(--rule);border-radius:999px;font-family:var(--f-body);font-weight:500;font-size:12px;letter-spacing:.14em;line-height:1;color:var(--ink-3);white-space:nowrap;vertical-align:middle;transform:translateY(-.15em)}
.svc-note{margin-top:clamp(18px,2.2vw,26px);font-size:13.5px;letter-spacing:.06em;color:var(--ink-3)}

/* 長めの決めゼリフ（1行に収める） */
.svc-key--tight{font-size:clamp(23px,3.05vw,38px)}

/* ---------- 3つ並び ---------- */
@media (min-width:720px){ .duo--3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- 会社概要の表 ---------- */
.facts{margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--rule)}
.facts > div{display:grid;gap:3px 24px;padding:clamp(15px,1.8vw,20px) 2px;border-bottom:1px solid var(--rule)}
@media (min-width:720px){ .facts > div{grid-template-columns:clamp(120px,14vw,172px) 1fr;gap:0 clamp(20px,2.6vw,36px)} }
.facts dt{font-family:var(--f-say);font-weight:600;font-size:14px;letter-spacing:.12em;line-height:1.9;color:var(--ink-2)}
.facts dd{font-size:14.5px;line-height:1.95;letter-spacing:.02em}
.facts dd small{display:block;margin-top:.2em;font-size:12.5px;color:var(--ink-3)}
.facts dd .num{font-family:var(--f-num);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-size:1.06em;letter-spacing:.02em}

/* ---------- 賛同プロジェクト ---------- */
.projs{margin-top:clamp(30px,3.6vw,44px);display:grid;gap:0;border-top:1px solid var(--rule)}
.projs li{display:flex;align-items:center;gap:12px 1.6em;padding:clamp(16px,2vw,24px) 2px;border-bottom:1px solid var(--rule)}
.proj-mark{flex:none;width:clamp(168px,21vw,224px);min-height:64px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid var(--rule);border-radius:8px;background:#fff;text-align:center}
.proj-mark img{display:block;width:auto;max-width:100%;max-height:42px;height:auto}
.proj-mark--sq img{max-height:52px}
.proj-mark--tb{font-weight:700;font-size:15px;letter-spacing:.06em;line-height:1.5;color:#E6013A}
.proj-mark--slp{font-weight:700;font-size:13px;letter-spacing:.04em;line-height:1.55;color:#2D69B4}
.proj-desc{font-size:13.5px;line-height:1.9;letter-spacing:.02em;color:var(--ink-3)}
@media (max-width:719px){ .projs li{flex-direction:column;align-items:flex-start} .proj-mark{width:200px} }
.facts dd a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(210,87,58,.3);padding-bottom:1px;transition:border-color .25s}
.facts dd a:hover{border-bottom-color:var(--accent)}

/* ---------- 予約カレンダー（Amelia Booking） ---------- */
.booking,.embed{margin-top:clamp(34px,4.4vw,56px)}
.booking-ph,.embed-ph{display:grid;place-items:center;gap:12px;min-height:clamp(300px,40vw,500px);padding:clamp(34px,5vw,64px) clamp(20px,3vw,36px);border:1px dashed var(--rule);border-radius:14px;background:rgba(255,255,255,.5);text-align:center}
.booking-ph b,.embed-ph b{font-family:var(--f-say);font-weight:600;font-size:clamp(17px,1.9vw,22px);letter-spacing:.08em;line-height:1.7}
.booking-ph span,.embed-ph span{font-size:13px;line-height:1.95;letter-spacing:.03em;color:var(--ink-3)}
.booking-ph code,.embed-ph code{display:inline-block;padding:6px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.02em;color:var(--ink-2)}
/* Amelia を入れたあと、このサイトの字と色に馴染ませる */
.booking .amelia-app-booking,.booking .amelia-v2-booking{font-family:var(--f-body)!important;max-width:100%}
.booking .amelia-app-booking .el-button--primary{border-radius:999px!important}

/* ---------- 相談ページの補足 ---------- */
.note-sm{margin-top:clamp(16px,2vw,22px);font-size:13px;line-height:1.95;letter-spacing:.03em;color:var(--ink-3)}

/* ---------- ページ上部の写真 ---------- */
.hero-img{margin-block:0;border-radius:14px;background:none}
.hero-img picture{display:block;border-radius:14px;overflow:hidden;background:var(--paper-2)}
.hero-img figcaption{margin-top:clamp(12px,1.5vw,18px);font-size:12.5px;line-height:1.9;letter-spacing:.06em;color:var(--ink-3)}
.hero-img img{display:block;width:100%;height:auto}
.hero-img + .svc{padding-top:clamp(66px,8.5vw,116px)}

/* ---------- 線：区切りは、ゆるい波で ---------- */
:root{--wave-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6.6C18 4.6 34 4.1 54 5.5C74 6.9 88 9.5 108 9.2C128 8.9 146 6.2 166 5.4C180 4.8 192 5.2 200 5.7' fill='none' stroke='%23C6BEB2' stroke-width='0.55' stroke-linecap='round'/%3E%3C/svg%3E")}
.svc + .svc,.chap,.more{border-top:0;background-image:var(--wave-rule);background-repeat:no-repeat;background-position:center top;background-size:100% 26px}

/* ---------- 線：決めゼリフの下に、ロゴと同じ一本 ---------- */
.key-road{display:block;width:100%;height:.58em;margin-top:.3em;overflow:visible;pointer-events:none;
  clip-path:inset(-80% 100% -80% -1%);transition:clip-path 1.15s cubic-bezier(.22,.61,.36,1) .2s}
.key-road path{fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.svc-key.is-in .key-road{clip-path:inset(-80% -2% -80% -1%)}
@media (prefers-reduced-motion:reduce){ .key-road{transition:none;clip-path:inset(-80% -2% -80% -1%)} }

.embed-ph{min-height:clamp(240px,28vw,340px)}

.facts dd .embed{margin-top:clamp(14px,1.8vw,20px)}
.facts dd .embed-ph{min-height:clamp(200px,22vw,280px);padding:clamp(26px,3.4vw,40px) clamp(18px,2.4vw,28px)}

/* 最後のセクションが直接CTAに続くとき（お問い合わせ→相談）は、ひと続きに見せる */
.svc:has(+ .cta){padding-bottom:clamp(14px,1.8vw,24px)}
.svc:has(+ .cta) + .cta,
.more + .cta{padding-top:clamp(52px,7vw,96px)}