@charset "UTF-8";

/* ===============================================
   focus合同会社 LP
   白基調・高コントラスト・スマホ最優先

   2026-09-04 質感の作り込み：
   写真を使わないので、文字・余白・色の面・線だけで階層をつくる。
   影は使わない。面と線だけで構成する。
   =============================================== */

:root{
  --bg:            #FFFFFF;
  --bg-soft:       #FAFAFA;
  --ink:           #333333;
  --ink-strong:    #16293F;   /* 藍。見出しと面に使う */
  --sumi:          #0E1013;   /* 墨。09代表の1箇所だけに使う（最も深い色） */
  --ink-mute:      #5C6672;
  --accent:        #1E4FD8;   /* 差し色。リンクとアクセントだけに限定する */
  --accent-dark:   #163CA6;
  --line:          #DFE4EB;
  --line-strong:   #C7D0DB;
  --fig-line:      #333333;   /* 図の線 */
  --on-ink:        #EDF1F6;   /* 濃い面の汎用（ボタン等） */
  --on-ink-mute:   #AFBDCE;
  /* 濃い面の文字。真っ白を使わず少し落とすと品が出る */
  --on-head:       #F2F1EC;   /* 濃い面の見出し */
  --on-body:       #B4C3D6;   /* 藍の面の本文 */
  --on-body-sumi:  #A9BACE;   /* 墨の面の本文 */
  --on-label:      #7E93AE;   /* 濃い面の英字ラベル */
  --label-light:   #8A8E96;   /* 白い面の英字ラベル */

  --font: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
          "Meiryo", sans-serif;
  /* 数字と英字だけこちら。日本語は後ろの Zen Kaku に落ちるので混在しても崩れない */
  --font-en: "EB Garamond", "Zen Kaku Gothic New", "Times New Roman", serif;

  --pad: clamp(20px, 5.5vw, 32px);
  /* セクション間の余白は従来の約1.3倍 */
  --gap-sec: clamp(73px, 14vw, 130px);
  --r: 4px;                   /* 角丸は小さく統一する */
  --rule: 1px;                /* 構造の区切り */
  --rule-thin: 0.5px;         /* 装飾の線 */
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;           /* 横スクロールを出さない */
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

/* 数字・英字。小さいラベルは字間を大きく開ける */
.num{
  font-family:var(--font-en);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}

/* 見出しの折り返しを、日本語の文節で切る。
   これが無いと「長崎の中小企業のた／めの、」のように語の途中で割れる。
   対応していないブラウザでは今までどおりの折り返しになるだけ（害はない）。 */
.hero__title,
.section__title,
.contact__title,
.about-lead p,
.card__name,
.card__trouble,
.waycard__title,
.compare__title,
.note__title,
.block__title,
.steps h4,
.menu__list .menu__item a{
  word-break:auto-phrase;
}

.link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.28em;
  text-decoration-thickness:1px;
  transition:color .2s ease, text-decoration-thickness .2s ease;
}
.link:hover{ color:var(--accent-dark); text-decoration-thickness:2px; }

/* ---------- レイアウト ---------- */
.container{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
/* 1行が長いと読みにくく素人っぽく見えるので、本文は38emに抑える */
.container--narrow{ max-width:calc(38em + var(--pad) * 2); }

.section{ padding-block:var(--gap-sec); }
.section--soft{ background:var(--bg-soft); }

/* ---------- 見出し ---------- */
.section__title{
  position:relative;
  font-size:clamp(28px, 5vw, 52px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.02em;      /* 大きな日本語見出しは詰めたほうが締まる */
  color:var(--ink-strong);
  margin-bottom:clamp(40px, 7vw, 68px);
  padding-bottom:clamp(18px, 2.6vw, 26px);
  text-wrap:balance;
}
/* 本文幅（38em）のセクションでは、見出しが枠から溢れないよう上限を下げる */
.container--narrow .section__title{ font-size:clamp(28px, 4.4vw, 42px); }
/* 区切りの罫線。左から右へ引かれる（JSが動くときだけ） */
.section__title::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--rule);
  background:currentColor;
  transform-origin:left center;
}

.section__title--center{
  text-align:center;
  padding-bottom:clamp(22px, 3vw, 30px);
}
.section__title--center::after{
  left:50%;
  right:auto;
  width:56px;
  margin-left:-28px;
}

/* ---------- 藍の面 ----------
   白の面との境目には罫線を入れず、色だけで切り替える。
   スクロールに応じて下から満ちる。中身は満ちてから出す（白文字が白地に乗らないように）。 */
.section--plane{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  color:var(--on-ink);
  /* 上下は必ず12vh以上。小さい画面でも96pxは確保する */
  padding-block:max(12vh, 96px);
}
.plane__fill{
  position:absolute;
  left:0; right:0; bottom:0;
  height:100%;
  background:var(--ink-strong);
  transform-origin:bottom center;
  transform:scaleY(1);         /* JSが無いときは最初から藍 */
  pointer-events:none;
}
.section--plane > .container{ position:relative; z-index:1; }
/* 墨は09代表の1箇所だけ。人が出てくる場所なので、いちばん深い色を置く */
.section--plane--sumi .plane__fill{ background:var(--sumi); }

/* ===============================================
   濃い面の中の組み方
   ここに書くものは .section--plane の中だけに効く。
   白い面（本文17px / 行間1.95 / #333333）には一切影響させない。
   =============================================== */

/* 見出しは真っ白にしない。字間を開けて、行間を広く取る */
.section--plane .section__title,
.section--plane .contact__title,
.section--plane .waycard__title,
.section--plane .ceo__name{
  color:var(--on-head);
  letter-spacing:.14em;
  line-height:1.9;
}
/* 字間を開けると最後の字の右に余白が付く。左端は動かないので text-indent は入れない
   （入れると逆に左端がずれる。実測で確認した） */

/* 本文。真っ白にせず少し落とす。サイズは白い面と同じ17pxを保つ */
.section--plane .lines > p,
.section--plane .waycard__text,
.section--plane .ceo__body p{
  font-size:17px;
  line-height:2.05;
  color:var(--on-body);
}
.section--plane--sumi .lines > p,
.section--plane--sumi .waycard__text,
.section--plane--sumi .ceo__body p{ color:var(--on-body-sumi); }

.section--plane .about-lead p{ color:var(--on-head); letter-spacing:.06em; }
.section--plane .link{ color:var(--on-head); }
.section--plane .link:hover{ color:#fff; }
.section--plane .contact__mail{ color:var(--on-label); }

/* 罫線は細く。濃い面では白を薄く敷く */
.section--plane .section__title::after{ background:rgba(255,255,255,.18); }
.section--plane .waycard{
  background:transparent;                  /* 塗らずに枠だけ */
  border-color:rgba(255,255,255,.18);
}
.section--plane .waycard:hover{ border-color:rgba(255,255,255,.45); }
.section--plane .waycard__title::after{ background:rgba(255,255,255,.30); }
.section--plane .waycard__num{ color:var(--on-label); }
.section--plane .ceo__role{ color:var(--on-label); }
.section--plane .ceo__ruby{ color:var(--on-label); letter-spacing:.02em; }

/* 図を濃い面に置いたときは、線を白系に切り替える（いまは白い面にあるが、
   移したときに黒い線が残らないように先に用意しておく） */
.section--plane .compare,
.section--plane .note,
.section--plane .account{
  background:transparent;
  border-color:rgba(255,255,255,.18);
}
.section--plane .compare__title,
.section--plane .compare__col + .compare__col{ border-color:rgba(255,255,255,.18); }
.section--plane .compare__head,
.section--plane .compare__foot{ border-color:rgba(255,255,255,.12); }
.section--plane .compare__title,
.section--plane .note__title,
.section--plane .account__name{ color:var(--on-head); }
.section--plane .compare__list li,
.section--plane .note p{ color:var(--on-body); }
.section--plane .compare__head,
.section--plane .compare__foot,
.section--plane .account__id{ color:var(--on-label); }
.section--plane .compare__col--yes .compare__list li::before,
.section--plane .account__mark,
.section--plane .account__mark--x::before,
.section--plane .account__mark--x::after,
.section--plane .account__mark--th::after{
  background:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.75);
}
.section--plane .compare__list li::before{ background:rgba(255,255,255,.35); }
.section--plane .flow__nodes::before{ background:rgba(255,255,255,.18); }
.section--plane .flow__nodes::after{ background:rgba(255,255,255,.85); }
.section--plane .flow__dot{
  background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.9);
}
.section--plane .flow__label,
.section--plane .steps h4,
.section--plane .block__title{ color:var(--on-head); }
.section--plane .steps > li::before{
  background:transparent;
  border-color:rgba(255,255,255,.5);
  color:var(--on-head);
}
.section--plane .steps > li::after{ background:rgba(255,255,255,.18); }
.section--plane .checklist li{ color:var(--on-body); }

/* ---------- 03 focusとは（宣言文1行・中央・大きく） ---------- */
.about-lead{ text-align:center; }
.about-lead p{
  font-size:clamp(21px, 3.6vw, 34px);
  font-weight:500;
  line-height:1.9;
  letter-spacing:-.01em;
  color:#fff;
  text-wrap:balance;
}

/* ---------- 1文＝1行 ---------- */
.lines > p{ font-size:16px; line-height:1.85; }
.lines > p + p{ margin-top:.95em; }

/* ---------- ヘッダー（ハンバーガー方式） ---------- */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:var(--rule) solid var(--line);
  transition:border-color .25s ease;
}
/* 影は使わない。スクロールしたら罫線を濃くして浮かせる */
.header.is-stuck{ border-bottom-color:var(--line-strong); }

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
  min-height:58px;
}
@media (min-width:820px){ .header__inner{ min-height:72px; } }

.header__logo{
  font-size:22px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-strong);
  text-decoration:none;
}
.header__right{
  display:flex;
  align-items:center;
  gap:clamp(10px, 2.5vw, 16px);
}

/* ---------- ハンバーガー（CSSだけで描く） ---------- */
.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink-strong);
}
.burger__box{ position:relative; display:block; width:24px; height:16px; }
.burger__line{
  position:absolute;
  left:0;
  width:24px;
  height:1.5px;
  background:currentColor;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.burger__line:nth-child(1){ top:0; }
.burger__line:nth-child(2){ top:7.25px; }
.burger__line:nth-child(3){ top:14.5px; }
.burger[aria-expanded="true"] .burger__line:nth-child(1){ top:7.25px; transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3){ top:7.25px; transform:rotate(-45deg); }

/* ---------- 開いたときのメニュー ---------- */
.menu{
  position:fixed;
  inset:0;
  z-index:55;
  background:#fff;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .4s ease, transform .4s ease;
}
.menu.is-open{ opacity:1; transform:none; }
.menu[hidden]{ display:none; }

.menu__inner{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:clamp(88px, 16vw, 116px) clamp(40px, 8vw, 64px);
}
.menu__list{ list-style:none; }

.menu__item,
.menu__cta,
.menu__sns{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.menu.is-open .menu__item,
.menu.is-open .menu__cta,
.menu.is-open .menu__sns{ opacity:1; transform:none; }

/* nth-child は必ず .menu__list の中に限定する。
   限定しないと .menu__cta（.menu__inner の2番目）が2番目の遅延を横取りする */
.menu.is-open .menu__list .menu__item:nth-child(1){ transition-delay:.10s; }
.menu.is-open .menu__list .menu__item:nth-child(2){ transition-delay:.15s; }
.menu.is-open .menu__list .menu__item:nth-child(3){ transition-delay:.20s; }
.menu.is-open .menu__list .menu__item:nth-child(4){ transition-delay:.25s; }
.menu.is-open .menu__list .menu__item:nth-child(5){ transition-delay:.30s; }
.menu.is-open .menu__list .menu__item:nth-child(6){ transition-delay:.35s; }
.menu.is-open .menu__list .menu__item:nth-child(7){ transition-delay:.40s; }
.menu.is-open .menu__list .menu__item:nth-child(8){ transition-delay:.45s; }
.menu.is-open .menu__list .menu__item:nth-child(9){ transition-delay:.50s; }
.menu.is-open .menu__cta{ transition-delay:.55s; }
.menu.is-open .menu__sns{ transition-delay:.60s; }

.menu__list .menu__item a{
  display:flex;
  align-items:baseline;
  gap:clamp(14px, 3.5vw, 24px);
  padding-block:clamp(10px, 2.2vw, 14px);
  font-size:clamp(20px, 5vw, 24px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.menu__list .menu__item a:hover{ color:var(--accent); transform:translateX(4px); }
/* ここはヘッダー依頼で「モノスペース」と明示されているので変えない。
   （追加したWebフォントは EB Garamond 1書体だけ。monospace はシステム書体） */
.menu__num{
  flex:none;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  font-weight:400;
  letter-spacing:.35em;
  color:var(--label-light);
}

.menu__cta{
  margin-top:clamp(28px, 5vw, 40px);
  padding-top:clamp(28px, 5vw, 40px);
  border-top:var(--rule) solid var(--line-strong);
}
.menu__cta .btn{ width:100%; max-width:360px; }

.menu__sns{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:clamp(28px, 5vw, 36px);
}
.menu__sns a{
  font-size:14px;
  letter-spacing:.08em;
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:var(--rule-thin) solid var(--line-strong);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.menu__sns a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.is-menu-open,
.is-menu-open body{ overflow:hidden; }

/* ---------- ボタン ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:17px 26px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn--ghost{ background:transparent; color:var(--ink-strong); border-color:var(--ink-strong); }
.btn--ghost:hover{ background:var(--ink-strong); color:#fff; }
.btn--sm{ padding:10px 16px; font-size:14px; }
.btn--lg{ padding:20px 34px; font-size:18px; }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(30px, 5vw, 40px);
}
.btn-row .btn{ flex:1 1 240px; }
@media (min-width:560px){ .btn-row .btn{ flex:0 0 auto; } }

/* ---------- 01 ファーストビュー ---------- */
.hero{ padding-block:clamp(48px, 9vw, 88px) clamp(60px, 11vw, 104px); }
.hero__grid{ display:grid; gap:clamp(30px, 6vw, 56px); }

.hero__title{
  font-size:clamp(28px, 4.4vw, 46px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--ink-strong);
  text-wrap:balance;          /* 折れるときに1行だけ極端に短くならないように */
}
.hero__lead{
  margin-top:clamp(26px, 4.5vw, 36px);
  font-size:clamp(16px, 4.1vw, 19px);
  line-height:2;
}
.hero__meta{
  margin-top:26px;
  font-size:13px;
  font-weight:500;
  color:var(--ink-mute);
  letter-spacing:.2em;        /* 小さいラベルは字間を開ける */
}
.hero__photo img{
  width:100%;
  max-height:min(58vh, 460px);
  object-fit:cover;
  object-position:center 22%;
  border-radius:var(--r);
}
@media (min-width:900px){
  .hero__grid{ grid-template-columns:1fr 320px; gap:56px; align-items:center; }
  .hero__photo img{ max-height:460px; }
}

/* ---------- 02 できること ---------- */
.cards{ display:grid; gap:16px; }
@media (min-width:760px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
  padding:clamp(26px, 5vw, 38px);
  transition:border-color .2s ease;
}
.card:hover{ border-color:var(--ink-strong); }
/* 番号は大きく、色は薄く。読ませる文字ではなく目印 */
.card__num{
  display:block;
  margin-bottom:18px;
  font-family:var(--font-en);
  font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(40px, 9vw, 60px);
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
  color:var(--line-strong);
}
.card__trouble{
  font-size:16px;
  font-weight:500;
  line-height:1.75;
  color:var(--ink-mute);
  padding-left:16px;
  border-left:2px solid var(--line-strong);
}
.card__name{
  margin-top:20px;
  font-size:clamp(20px, 4.2vw, 24px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--ink-strong);
  text-wrap:balance;
}
.card__text{ margin-top:14px; font-size:16px; line-height:1.9; flex:1; }
.card__link{
  align-self:flex-start;
  margin-top:24px;
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
  border-bottom:var(--rule) solid currentColor;
  padding-bottom:3px;
  transition:color .2s ease;
}
.card__link::after{
  content:"→";
  display:inline-block;
  margin-left:.4em;
  transition:transform .2s ease;
}
.card__link:hover{ color:var(--accent-dark); }
.card__link:hover::after{ transform:translateX(4px); }

/* ---------- 02 事業の流れ（図） ---------- */
.flow{
  margin-top:clamp(48px, 8vw, 76px);
  padding-block:clamp(8px, 2vw, 16px);
}
.flow__nodes{
  position:relative;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.flow__nodes::before{
  content:"";
  position:absolute;
  left:16.6667%;
  right:16.6667%;
  top:6px;
  height:var(--rule-thin);
  background:var(--line-strong);
}
.flow__nodes::after{
  content:"";
  position:absolute;
  left:16.6667%;
  width:66.6667%;
  top:6px;
  height:var(--rule);
  background:var(--fig-line);
  transform-origin:left center;
}
.flow__node{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.flow__dot{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid var(--ink-strong);
  background:var(--ink-strong);
}
.flow__label{
  margin-top:16px;
  font-size:clamp(13px, 3.4vw, 16px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--ink-strong);
  text-align:center;
}

/* ---------- 本文ブロック ---------- */
.block__title{
  font-size:clamp(19px, 4.4vw, 23px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  margin-top:clamp(44px, 7vw, 64px);
  margin-bottom:26px;
}
.block__title:first-of-type{ margin-top:0; }

.checklist{ list-style:none; }
.checklist li{
  position:relative;
  padding-left:28px;
  font-size:16px;
  line-height:1.9;
}
.checklist li + li{ margin-top:16px; }
.checklist li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}

/* 見出し一行だけを、番号の円と縦線でつなぐ */
.steps{ list-style:none; counter-reset:step; }
.steps > li{
  counter-increment:step;
  position:relative;
  padding-left:52px;
  padding-bottom:26px;
}
.steps > li:last-child{ padding-bottom:0; }
.steps > li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  width:34px;
  height:34px;
  border-radius:50%;
  border:var(--rule) solid var(--ink-strong);
  background:#fff;
  color:var(--ink-strong);
  font-family:var(--font-en);
  font-variant-numeric:lining-nums;
  font-size:16px;
  line-height:32px;
  text-align:center;
}
.steps > li::after{
  content:"";
  position:absolute;
  left:17px;
  top:34px;
  bottom:0;
  width:var(--rule-thin);
  background:var(--line-strong);
}
.steps > li:last-child::after{ display:none; }
.steps h4{
  font-size:clamp(17px, 4.2vw, 20px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  padding-top:4px;
}

/* ---------- 比較の図 ---------- */
.compare{
  margin-top:clamp(40px, 6.5vw, 56px);
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
  background:#fff;
  overflow:hidden;
}
.section:not(.section--soft) .compare{ background:var(--bg-soft); }
.compare__title{
  padding:clamp(22px, 4vw, 28px) clamp(20px, 4vw, 30px);
  font-size:clamp(18px, 4.3vw, 22px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  border-bottom:var(--rule) solid var(--line-strong);
}
.compare__grid{ display:grid; }
.compare__col{ padding:clamp(22px, 4vw, 30px); }
.compare__col + .compare__col{ border-top:var(--rule) solid var(--line-strong); }
@media (min-width:640px){
  .compare__grid{ grid-template-columns:1fr 1fr; }
  .compare__col + .compare__col{
    border-top:none;
    border-left:var(--rule) solid var(--line-strong);
  }
}
.compare__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  margin-bottom:18px;
  border-bottom:var(--rule-thin) solid var(--line);
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--ink-mute);
}
.compare__col--yes .compare__head{ color:var(--ink-strong); }
.compare__mark{
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  border:var(--rule) solid currentColor;
  font-size:12px;
  font-weight:700;
  line-height:22px;
  text-align:center;
  letter-spacing:0;
}
.compare__list{ list-style:none; }
.compare__list li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.85;
}
.compare__list li + li{ margin-top:10px; }
.compare__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.9em;
  width:9px;
  height:var(--rule-thin);
  background:var(--line-strong);
}
.compare__col--yes .compare__list li::before{
  top:.68em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink-strong);
}
.compare__foot{
  margin-top:18px;
  padding-top:14px;
  border-top:var(--rule-thin) solid var(--line);
  font-size:14px;
  line-height:1.85;
  color:var(--ink-mute);
}

.note{
  margin-top:clamp(40px, 6.5vw, 56px);
  padding:clamp(26px, 5vw, 36px);
  background:#fff;
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
}
.section:not(.section--soft) .note{ background:var(--bg-soft); }
.note__title{
  font-size:clamp(18px, 4.3vw, 22px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  margin-bottom:20px;
}
.note p{ font-size:16px; line-height:1.9; }
.note p + p{ margin-top:1.4em; }

/* ---------- 05 発信一覧（SNSアカウント） ---------- */
.accounts-block{ margin-top:clamp(16px, 3vw, 22px); }
.accounts{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (min-width:760px){ .accounts{ grid-template-columns:repeat(4, 1fr); } }
.account{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:clamp(18px, 3.6vw, 24px);
  background:#fff;
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
  text-decoration:none;
  transition:border-color .2s ease, background-color .2s ease;
}
.section:not(.section--soft) .account{ background:var(--bg-soft); }
.account:hover{ border-color:var(--ink-strong); background:#fff; }
.account__name{
  margin-top:16px;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink-strong);
  transition:color .2s ease;
}
.account__id{
  margin-top:6px;
  font-family:var(--font-en);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--ink-mute);
  overflow-wrap:anywhere;
}
.account:hover .account__name{ color:var(--accent); }

/* 印は線の図形のみ。画像もアイコンフォントも使わない */
.account__mark{
  position:relative;
  flex:none;
  width:26px;
  height:26px;
  border:var(--rule) solid var(--ink-strong);
}
.account__mark--ig{ border-radius:8px; }
.account__mark--tt{ border-radius:50%; }
.account__mark--th{ border-radius:50%; }
.account__mark--th::after{
  content:"";
  position:absolute;
  inset:5px;
  border:var(--rule) solid var(--ink-strong);
  border-radius:50%;
}
.account__mark--x{ border:none; }
.account__mark--x::before,
.account__mark--x::after{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:26px;
  height:var(--rule);
  background:var(--ink-strong);
}
.account__mark--x::before{ transform:rotate(45deg); }
.account__mark--x::after{ transform:rotate(-45deg); }

/* ---------- 08 focusのやり方（大きな2カード） ---------- */
.waycards{ display:grid; gap:16px; }
@media (min-width:760px){ .waycards{ grid-template-columns:1fr 1fr; } }
.waycard{
  background:#fff;
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
  padding:clamp(30px, 5.5vw, 48px);
  transition:border-color .2s ease;
}
.waycard:hover{ border-color:var(--ink-strong); }
/* 英字ラベル。小さく・字間を大きく開けて・色を落とす */
.waycard__num{
  display:block;
  font-family:var(--font-en);
  font-variant-numeric:lining-nums tabular-nums;
  font-size:10px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.35em;
  color:var(--label-light);
}
.waycard__title{
  position:relative;
  margin-top:18px;
  padding-bottom:28px;
  text-wrap:balance;
  font-size:clamp(21px, 4.4vw, 28px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--ink-strong);
}
.waycard__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:44px;
  height:var(--rule);
  background:var(--fig-line);
  transform-origin:left center;
}
.waycard__text{ margin-top:24px; font-size:16px; line-height:1.95; }

/* ---------- 09 代表 ---------- */
.ceo{ display:grid; gap:clamp(24px, 5vw, 44px); }
.ceo__photo img{
  width:100%;
  max-height:min(52vh, 420px);
  object-fit:cover;
  object-position:center 22%;
  border-radius:var(--r);
}
.ceo__name{
  font-size:clamp(22px, 4.8vw, 28px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--ink-strong);
}
.ceo__ruby{ font-size:16px; font-weight:400; letter-spacing:0; color:var(--ink-mute); }
.ceo__role{
  margin-top:10px;
  margin-bottom:28px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--ink-mute);
}
.ceo__body p{ font-size:16px; line-height:1.95; }
.ceo__body p + p{ margin-top:1.5em; }
.ceo__links{ margin-top:1.8em; font-weight:500; }
.ceo__links a{ line-height:2.2; }
@media (min-width:760px){
  .ceo{ grid-template-columns:300px 1fr; align-items:start; }
  .ceo__photo img{ max-height:400px; }
}

/* ---------- 10 よくある質問 ---------- */
.faq__item{
  background:#fff;
  border:var(--rule) solid var(--line-strong);
  border-radius:var(--r);
  transition:border-color .2s ease;
}
.faq__item:hover{ border-color:var(--ink-strong); }
.faq__item + .faq__item{ margin-top:12px; }
.faq__item summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px clamp(18px, 4vw, 28px);
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:var(--ink-strong);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{
  content:"Q";
  flex:none;
  font-family:var(--font-en);
  font-size:18px;
  font-weight:500;
  color:var(--accent);
  line-height:1.6;
}
.faq__item summary::after{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  margin-left:auto;
  margin-top:.6em;
  border-right:1.5px solid var(--ink-mute);
  border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__q{ font-size:17px; line-height:1.75; letter-spacing:-.01em; }
.faq__a{
  padding:0 clamp(18px, 4vw, 28px) 24px;
  border-top:var(--rule-thin) solid var(--line);
  margin-inline:clamp(18px, 4vw, 28px);
  padding-inline:0;
}
.faq__a p{ margin-top:18px; font-size:16px; line-height:1.95; }

/* ---------- 11 会社概要 ---------- */
.profile{ border-top:var(--rule) solid var(--line-strong); }
.profile__row{
  display:grid;
  gap:2px;
  padding-block:18px;
  border-bottom:var(--rule) solid var(--line-strong);
}
.profile dt{
  font-size:13px;
  font-weight:700;
  color:var(--ink-mute);
  letter-spacing:.18em;
}
.profile dd{ font-size:16px; line-height:1.85; }
@media (min-width:600px){
  .profile__row{ grid-template-columns:170px 1fr; gap:16px; align-items:baseline; }
}

/* ---------- 12 お問い合わせ（藍の面） ---------- */
.contact__title{
  /* 1行目が17字あるので、38em の枠に収まる大きさに抑える */
  font-size:clamp(23px, 3.6vw, 36px);
  font-weight:700;
  line-height:1.55;
  letter-spacing:-.02em;
  color:#fff;
  margin-bottom:clamp(28px, 5vw, 40px);
  text-wrap:balance;
}
.section--contact .lines > p{ font-size:17px; line-height:2.05; }
.section--contact .btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.section--contact .btn--primary{ background:#fff; color:var(--ink-strong); border-color:#fff; }
.section--contact .btn--primary:hover{ background:#DDE6F5; border-color:#DDE6F5; }
.contact__mail{
  margin-top:clamp(34px, 6vw, 46px);
  font-size:15px;
  line-height:2.1;
  color:var(--on-ink-mute);
}
.section--contact .link{ color:#fff; }
.section--contact .link:hover{ color:#DDE6F5; }

/* ---------- 13 フッター ---------- */
/* 藍の面のすぐ下なので、罫線は入れず色だけで切り替える */
.footer{ padding-block:clamp(52px, 9vw, 72px); background:#fff; }
.footer__name{ font-size:17px; font-weight:700; color:var(--ink-strong); }
.footer__addr{ margin-top:4px; font-size:15px; color:var(--ink-mute); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:26px; }
.footer__nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:var(--rule-thin) solid var(--line-strong);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.footer__nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.footer__copy{
  margin-top:36px;
  font-family:var(--font-en);
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:.14em;
}

/* ---------- 法務ページ（プライバシーポリシー） ---------- */
.legal-head{
  padding-block:clamp(56px, 10vw, 88px) clamp(30px, 6vw, 44px);
  border-bottom:var(--rule) solid var(--line);
}
.legal-head h1{
  font-size:clamp(26px, 5vw, 40px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--ink-strong);
}
.legal-lead{ margin-top:clamp(18px, 4vw, 24px); }
.legal-section{
  padding-block:clamp(38px, 7vw, 60px);
  border-bottom:var(--rule) solid var(--line);
}
.legal-num{
  font-family:var(--font-en);
  font-size:14px;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--ink-mute);
}
.legal-section h2{
  margin:8px 0 22px;
  font-size:clamp(19px, 4.4vw, 24px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink-strong);
}
.legal-section p + p{ margin-top:1.5em; }
.legal-list{ list-style:none; margin-block:1.5em; }
.legal-list li{ padding:14px 0; border-top:var(--rule-thin) solid var(--line); }
.legal-list li:first-child{ border-top:none; padding-top:0; }
.legal-list li:last-child{ padding-bottom:0; }
.legal-table{ width:100%; border-collapse:collapse; margin-top:.5em; }
.legal-table th,
.legal-table td{
  text-align:left;
  vertical-align:top;
  padding:16px 0;
  border-top:var(--rule-thin) solid var(--line);
  line-height:1.9;
}
.legal-table tr:first-child th,
.legal-table tr:first-child td{ border-top:none; padding-top:0; }
.legal-table th{
  width:9em;
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--ink-mute);
  white-space:nowrap;
}
.legal-table td{ padding-left:1.4em; }
@media (max-width:600px){
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td{ display:block; width:auto; }
  .legal-table tr{ padding:14px 0; border-top:var(--rule-thin) solid var(--line); }
  .legal-table tr:first-child{ border-top:none; padding-top:0; }
  .legal-table th{ padding:0 0 2px; border-top:none; }
  .legal-table td{ padding:0; }
}
.legal-enacted{
  margin-bottom:clamp(28px, 6vw, 40px);
  font-size:15px;
  color:var(--ink-mute);
}

/* ===============================================
   動き
   「気づくかどうか」の強さに留める。
   JS が動くときだけ初期状態（非表示）を有効にする。
   =============================================== */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* 見出しが先、本文が少し遅れて出る */
.js .reveal + .reveal{ transition-delay:.14s; }
.js .reveal + .reveal + .reveal{ transition-delay:.24s; }

/* 大見出しは移動量を増やして、少し遅れて下から現れる */
.js .reveal.section__title,
.js .reveal.hero__title,
.js .reveal.contact__title{
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:.06s;
}
.js .reveal.section__title.is-visible,
.js .reveal.hero__title.is-visible,
.js .reveal.contact__title.is-visible{ transform:none; }

/* 区切りの罫線が、左から右へ0.8秒で引かれる */
.js .section__title::after,
.js .waycard__title::after{
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) .25s;
}
.js .section__title.is-visible::after,
.js .waycard.is-visible .waycard__title::after{ transform:scaleX(1); }

/* 02のカードは0.08秒ずつ遅れて現れる */
.js .cards .card:nth-child(1){ transition-delay:0s; }
.js .cards .card:nth-child(2){ transition-delay:.08s; }
.js .cards .card:nth-child(3){ transition-delay:.16s; }
.js .cards .card:nth-child(4){ transition-delay:.24s; }

/* 番号は、わずかに上から落ちる */
.js .card__num{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.js .card.is-visible .card__num{
  opacity:1;
  transform:none;
  transition-delay:.22s;
}

/* 藍の面は、スクロールに応じて下から満ちる */
.js .plane__fill{
  transform:scaleY(var(--fill, 0));
  will-change:transform;
}
/* 面が満ちるまで中身は出さない（白文字が白地に乗るのを防ぐ） */
.js .section--plane:not(.is-filled) .reveal.is-visible{
  opacity:0;
  transform:translateY(14px);
}
.js .section--plane.is-filled .reveal.is-visible{ opacity:1; transform:none; }

/* 事業の流れの図 */
.js .flow__nodes::after{
  transform:scaleX(0);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1) .15s;
}
.js .flow.is-visible .flow__nodes::after{ transform:scaleX(1); }
.js .flow__dot{
  background:#fff;
  border-color:var(--line-strong);
  transition:background-color .3s ease, border-color .3s ease;
}
.js .flow__label{ color:#9AA3AE; transition:color .3s ease; }
.js .flow.is-visible .flow__dot{ background:var(--ink-strong); border-color:var(--ink-strong); }
.js .flow.is-visible .flow__label{ color:var(--ink-strong); }
.js .flow.is-visible .flow__node:nth-child(1) > *{ transition-delay:.25s; }
.js .flow.is-visible .flow__node:nth-child(2) > *{ transition-delay:.75s; }
.js .flow.is-visible .flow__node:nth-child(3) > *{ transition-delay:1.2s; }

/* ---------- 動きを減らす設定では、動かさず表示だけする ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal,
  .js .reveal.section__title,
  .js .reveal.hero__title,
  .js .reveal.contact__title{ opacity:1; transform:none; transition:none; }
  .js .reveal + .reveal,
  .js .reveal + .reveal + .reveal,
  .js .cards .card:nth-child(1),
  .js .cards .card:nth-child(2),
  .js .cards .card:nth-child(3),
  .js .cards .card:nth-child(4){ transition-delay:0s; }
  .js .card__num{ opacity:1; transform:none; transition:none; }
  .js .section__title::after,
  .js .waycard__title::after{ transform:scaleX(1); transition:none; }
  .js .plane__fill{ transform:scaleY(1); transition:none; }
  .js .section--plane:not(.is-filled) .reveal.is-visible{ opacity:1; transform:none; }
  .btn, .faq__item summary::after, .card__link::after,
  .header, .card, .waycard, .faq__item, .account{ transition:none; }
  .menu, .menu__item, .burger__line{ transition:none; }
  .menu{ opacity:1; transform:none; }
  .menu__item{ opacity:1; transform:none; }
  .menu.is-open .menu__item,
  .menu.is-open .menu__cta,
  .menu.is-open .menu__sns{ transition-delay:0s; }
  .js .flow__nodes::after,
  .js .flow__dot,
  .js .flow__label{ transition:none; }
  .js .flow__nodes::after{ transform:scaleX(1); }
  .js .flow__dot{ background:var(--ink-strong); border-color:var(--ink-strong); }
  .js .flow__label{ color:var(--ink-strong); }
}