/* ============================================================
   TOMLAB LP — Figma忠実実装 v2 (node 1:3 / 1440基準)
   コンテンツ幅は厳密に1080px(180-1260)。
   Services行: 本文640 + 間40 + 写真400 = 1080
   About行:    写真400 + 間55 + 本文625 = 1080
   ============================================================ */

:root {
  --lite-green: #fbfff2;
  --green-03: #31bf8f;
  --green-04: #43c298;
  --grad: linear-gradient(82deg, #50cc88 2%, #29b791 102%);
  --black: #1a1a1a;
  --lite-black: #4d4d4d;
  --gray: #dedede;
  --marker: #e3ffae;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-en: "Poppins", sans-serif;
}

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

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; } /* 固定ヘッダー分 */

/* スクリーンリーダー/検索エンジン用(視覚非表示の見出し) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 控えめフェードイン(JSでfade-item付与→表示時is-visible) ---------- */
.fade-item { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.fade-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-item { opacity: 1; transform: none; transition: none; }
}

body {
  font-family: var(--font-jp);
  color: var(--black);
  background: #fff;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.sp-br { display: none; }

/* コンテンツ幅1080を厳密に確保(1080 + 24x2パディング) */
.container { max-width: 1128px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- section label ---------- */
/* Figma指定: Poppins SemiBold 72 / 行間auto / 字間0% */
.sec-label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 72px;
  line-height: normal;
  letter-spacing: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .65;
  width: -moz-fit-content;
  width: fit-content;
}
.sec-label--center { margin-left: auto; margin-right: auto; text-align: center; }
/* D-022対策: sec-labelがJSのフェード対象になっても既定の薄さを維持する
   (.fade-item.is-visible{opacity:1}が.sec-labelのopacityを上書きして濃度が揃わなくなるため) */
.sec-label.fade-item.is-visible { opacity: .65; }

/* ---------- header ---------- */
.site-header { background: #fff; height: 70px; display: flex; align-items: center; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(26,26,26,.06); }
.header-inner { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.header-inner .logo { display: flex; align-items: center; }
.header-inner .logo img { width: 134px; height: 24px; }
.header-tagline { font-size: 11px; font-weight: 700; color: #333; line-height: 1.4; letter-spacing: .3px; }
.header-nav { display: flex; gap: 28px; margin-left: auto; }
.header-nav a {
  font-family: var(--font-jp); font-weight: 700; font-size: 14px;
  color: var(--black); text-decoration: none; letter-spacing: .3px;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.header-nav a:hover { color: var(--green-04); }
.header-nav a.is-current { border-bottom-color: var(--black); } /* AMIX型カレント表示 */
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
  border-radius: 19px; height: 38px; padding: 0 22px;
  margin-left: 16px; /* FAQ→CTAの間隔をナビ項目間(28px)と同じに: inner gap12 + 16 = 28 */
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease;
}
.header-cta:hover { opacity: .88; }

/* ハンバーガー(SPのみ表示) */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; margin-left: 4px;
  background: none; border: 0; cursor: pointer;
  position: relative; flex-shrink: 0;
}
.nav-toggle span {
  position: absolute; left: 9px; width: 22px; height: 2px;
  background: var(--black); border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ---------- FV ---------- */
.fv { background: #fdfdfd; position: relative; }
.fv-photo {
  position: absolute; top: 0; right: 0;
  /* 1440時=684px。狭い幅ではH1(コンテンツ左+約571px)と衝突しない上限に自動収縮 */
  width: min(684px, calc(50vw - 27px)); height: 625px;
  border-radius: 30px 0 0 30px; overflow: hidden;
}
.fv-photo img { width: 100%; height: 100%; object-fit: cover; }
.fv-content { position: relative; z-index: 2; padding-top: 63px; min-height: 625px; }

.area-badge {
  display: inline-flex; align-items: center;
  border: 1px solid var(--green-03); border-radius: 8px;
  padding: 7px 21px 7px 19px;
  font-size: 20px; font-weight: 700; color: var(--green-03);
  letter-spacing: .3px; line-height: 1.5;
  background: rgba(253,253,253,.9);
}
.fv-pre {
  margin-top: 22px;
  font-size: 32px; font-weight: 800;
  color: var(--lite-black); letter-spacing: .65px; line-height: 1.4;
}
.fv h1 {
  margin-top: 4px;
  font-size: 64px; font-weight: 800;
  color: var(--lite-black); letter-spacing: 1.2px; line-height: 1.4;
  white-space: nowrap;
}
.fv h1 .marker {
  background: linear-gradient(transparent 68%, var(--marker) 68%, var(--marker) 92%, transparent 92%);
}
.fv-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; list-style: none; }
.fv-chips li {
  background: var(--grad); color: #fff;
  border-radius: 20px; padding: 5px 27px 6px 23px;
  font-size: 20px; font-weight: 700; letter-spacing: .88px; line-height: 1.5;
  white-space: nowrap;
}
.fv-body { margin-top: 26px; max-width: 547px; font-size: 16px; line-height: 1.8; letter-spacing: .3px; color: var(--black); }

/* ---------- CTAカード ---------- */
.cta-card-wrap { position: relative; margin-top: -23px; z-index: 5; padding: 0 24px; }
.cta-card {
  position: relative;
  max-width: 900px; margin: 0 auto;
  background: var(--lite-green);
  border: 1px solid var(--green-04);
  border-radius: 20px;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 24px;
  overflow: hidden; /* イラストの接地はカード内で切る */
}
.cta-card--white { background: rgba(255,255,255,.85); }
/* Figma実数値: カード900px内 イラストx99/下端接地、コンテンツ中心はx522(=中央+72px) */
.cta-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-left: 144px; /* 中心を+72px右へ */
  max-width: 100%; min-width: 0;
}
.cta-card .cta-note { font-size: 24px; font-weight: 700; color: #2a2a2a; letter-spacing: .3px; text-align: center; line-height: 1.3; }
.cta-btn {
  display: flex; align-items: center; justify-content: center;
  width: min(400px, 100%); height: 70px;
  background: var(--grad); border-radius: 35px;
  color: #fff; font-size: 28px; font-weight: 700; letter-spacing: .3px;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cta-btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(67,194,152,.28); }
.cta-figure { position: absolute; left: 99px; bottom: 0; width: 166px; pointer-events: none; }

/* ---------- About ---------- */
.about { padding: 130px 0 60px; }
.about-inner { display: flex; gap: 55px; align-items: flex-start; }
.about-photo { flex: 0 0 400px; width: 400px; position: relative; }
.about-photo::after {
  content: ""; position: absolute; inset: 15px -15px -15px 15px;
  background: var(--grad); opacity: .75; border-radius: 30px; z-index: -1;
}
.about-photo img { width: 100%; height: 320px; object-fit: cover; border-radius: 30px; }
.about-text { flex: 1 1 auto; min-width: 0; }
/* Figma実測: ラベル直下にタイトル(+2px)、本文は+10px */
.about-text h2.jp { font-size: 32px; font-weight: 700; color: var(--lite-black); margin-top: 2px; }
.about-text .about-body { margin-top: 10px; font-size: 20px; line-height: 1.5; color: var(--black); max-width: 625px; }

/* ---------- Services ---------- */
.services { padding: 90px 0 40px; }
.services .container { position: relative; }
.services-lead { font-size: 32px; font-weight: 700; color: var(--lite-black); margin-top: 12px; }
.services-deco { position: absolute; right: 24px; top: 0; width: 215px; }

.service-block {
  display: flex; gap: 40px; align-items: flex-start;
  margin-top: 72px; /* Figma実測: ブロック間72px */
}
.services-lead + .service-block { margin-top: 65px; } /* リード→01は65px */
.service-main { flex: 0 1 640px; max-width: 640px; min-width: 0; }
.service-photo { flex: 0 0 400px; width: 400px; position: relative; }
.service-photo::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  background: var(--grad); opacity: .75; border-radius: 24px; z-index: -1;
}
.service-photo img { width: 100%; height: 322px; object-fit: cover; border-radius: 24px; }
/* 03: 透過イラスト(縦長)は切り抜かず、薄緑地に収める */
.service-photo--illust img { object-fit: contain; background: var(--lite-green); padding: 18px; }

.service-head { display: flex; align-items: center; gap: 12px; }
.service-num {
  font-family: var(--font-en); font-weight: 600; font-size: 64px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .75;
}
.service-head h3 { font-size: 28px; font-weight: 700; color: var(--black); line-height: 1.4; }
.service-sub { margin-top: 10px; font-size: 22px; font-weight: 700; color: var(--lite-black); line-height: 1.4; }
.service-body { margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--black); }

/* Figma実測: チップはボックス内・タイトルと同一行(境界線に重ねない) */
.service-box {
  margin-top: 24px;
  background: var(--lite-green); border: 1px solid var(--green-04); border-radius: 10px;
  padding: 15px 20px 16px;
  min-height: 113px;
}
.box-head { display: flex; align-items: center; gap: 10px; }
.box-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad); color: #fff;
  border-radius: 15px; height: 30px; padding: 0 14px;
  font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap;
  flex-shrink: 0;
}
.box-chip .chip-icon { width: 20px; height: 17px; }
.box-title { font-size: 18px; font-weight: 700; color: var(--green-04); line-height: 1.4; }
.box-text { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--black); }

/* ---------- Works ---------- */
.works { padding: 120px 0 40px; text-align: center; }
.works-grid {
  display: grid; grid-template-columns: repeat(3, 300px); justify-content: center;
  gap: 24px 32px;
  margin: 12px auto 0; /* Figma実測: ラベル→グリッド11px */
}
.works-item { width: 300px; text-align: left; }
.works-item img {
  width: 300px; height: 200px; object-fit: cover;
  border-radius: 6px; background: #f2f2f0;
  border: 1px solid var(--gray);
  transition: transform .25s ease, box-shadow .25s ease;
}
.works-item:hover img { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(26,26,26,.10); }
.works-cap { margin-top: 10px; }
.works-tags { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .5px; color: var(--green-04); }
.works-name { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.5; }
.works-more { margin-top: 32px; display: flex; justify-content: center; }
/* セクション下部の遷移ボタン(Services等・中央寄せ) */
.sec-more { margin-top: 40px; display: flex; justify-content: center; }
/* Aboutは本文カラム下に左寄せで置く */
.about-more { margin-top: 30px; }
/* ゴースト型(1段小さく・ボーダー+文字・低コントラスト)。主CTAとの主従を明確に */
.btn-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 240px; height: 54px;
  background: #fff; border: 1px solid var(--green-04); border-radius: 27px;
  color: var(--green-04); font-size: 18px; font-weight: 700; letter-spacing: .3px;
  text-decoration: none;
  transition: background .15s ease;
}
.btn-more { transition: background .2s ease, transform .2s ease; }
.btn-more:hover { background: var(--lite-green); transform: translateY(-2px); }

/* ---------- FAQ ---------- */
.faq { padding: 120px 0 60px; }
.faq .container { position: relative; }
.faq-head { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 27px; }
.faq-deco { width: 90px; margin-top: -26px; }
.faq-list { max-width: 700px; margin: 38px auto 0; list-style: none; }
/* Figma実測: 区切り線は項目間のみ(先頭上・末尾下には無し) */
.faq-item { border-top: 1px solid var(--gray); padding: 24px 0 30px; }
.faq-item:first-child { border-top: 0; padding-top: 0; }
/* マークとテキストは常にセンタリング(2行時もQ/A円が文字ブロックの中央に) */
.faq-q { display: flex; gap: 10px; align-items: center; }
.faq-a { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.qa-mark {
  flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 600; font-size: 28px; line-height: 1;
}
.faq-q .qa-mark { background: var(--grad); color: #fff; }
.faq-a .qa-mark { background: #fff; border: 1px solid var(--green-04); color: var(--green-04); }
.faq-q p { font-size: 18px; font-weight: 700; color: var(--lite-black); line-height: 1.4; }
.faq-a p { font-size: 16px; font-weight: 500; color: var(--lite-black); line-height: 1.4; max-width: 639px; }

/* ---------- 相談・お問い合わせ ---------- */
.contact { background: var(--lite-green); padding: 80px 24px 82px; }
.contact h2 { font-size: 36px; font-weight: 700; color: var(--lite-black); text-align: center; }
.contact .cta-card-wrap { margin-top: 35px; padding: 0; }

/* ---------- IAシェル(準備中ページ) ---------- */
.stub-page { padding: 96px 0 120px; min-height: 46vh; }
.stub-title { font-size: 30px; font-weight: 700; color: var(--lite-black); margin-top: 4px; }
.stub-body { margin-top: 16px; max-width: 640px; color: var(--lite-black); }
.stub-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.cta-btn--s { width: 240px; height: 54px; font-size: 18px; border-radius: 27px; }

/* ---------- footer ---------- */
.site-footer { background: var(--green-04); color: #fff; padding: 52px 0 28px; min-height: 259px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.footer-brand img { width: 224px; height: 41px; }
.footer-tagline { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .3px; color: rgba(255,255,255,.92); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 6px; }
.footer-nav a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .3px;
}
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-meta {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.35);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.92);
}
.footer-copy { letter-spacing: .3px; }

/* ============================================================
   中間幅 (901〜1160px): 1080が入らない帯は比率で縮める
   ============================================================ */
@media (max-width: 1160px) {
  .fv h1 { font-size: clamp(40px, 5.5vw, 60px); white-space: normal; }
  .fv-pre { font-size: clamp(24px, 2.8vw, 30px); }
  .service-main { flex: 1 1 55%; }
  .service-photo { flex: 0 0 36%; width: 36%; }
  .service-photo img { height: auto; aspect-ratio: 400 / 322; }
  .about-photo { flex: 0 0 38%; width: 38%; }
  .about-photo img { height: auto; aspect-ratio: 5 / 4; }
  .works-grid { grid-template-columns: repeat(3, minmax(0, 300px)); }
  .works-item { width: 100%; }
}

/* ============================================================
   SP (〜900px)
   ============================================================ */
@media (max-width: 900px) {
  .sp-br { display: block; }
  .sp-nowrap { white-space: nowrap; }
  .fv h1 .sp-nowrap { font-size: clamp(30px, 8.5vw, 38px); letter-spacing: 0; }
  .nav-toggle { display: block; }
  .header-inner { padding: 0 16px 0 20px; }
  .header-inner .logo img { width: 140px; height: 25px; }
  .header-cta { margin-left: auto; height: 34px; padding: 0 14px; font-size: 13px; }
  .header-tagline { display: none; }

  /* SPナビ: ヘッダー直下のドロップパネル */
  .header-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 70px; left: 0; right: 0;
    margin: 0; padding: 6px 20px 14px;
    background: #fff; border-bottom: 1px solid var(--gray);
    box-shadow: 0 12px 24px rgba(26,26,26,.08);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .header-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .header-nav a {
    padding: 14px 2px; font-size: 15px;
    border-bottom: 1px solid var(--gray);
  }
  .header-nav a:last-child { border-bottom: 0; }
  .header-nav a.is-current { border-bottom: 1px solid var(--gray); color: var(--green-04); }

  .footer-inner { flex-direction: column; }
  .footer-meta { flex-direction: column; align-items: flex-start; margin-top: 28px; }

  /* FV: 写真は3:2(元素材が正方形寄りのため16:10より切り抜きが浅い) */
  .fv-photo { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
  .fv-content { min-height: 0; padding-top: 32px; padding-bottom: 8px; }
  .area-badge { font-size: 14px; padding: 5px 14px; border-radius: 6px; }
  .fv-pre { font-size: 21px; margin-top: 18px; }
  .fv h1 { font-size: clamp(34px, 9.6vw, 44px); letter-spacing: .5px; margin-top: 6px; }
  .fv-chips { gap: 8px; margin-top: 20px; }
  .fv-chips li { font-size: 14px; padding: 4px 16px; }
  .fv-body { font-size: 15px; margin-top: 20px; }
  .fv-body { max-width: none; }
  .cta-card-wrap { margin-top: 20px; }
  .cta-card { padding: 26px 20px; }
  .cta-card .cta-note { font-size: 16px; }
  .cta-btn { font-size: 18px; height: 58px; width: 100%; }
  .cta-figure { display: none; }
  .cta-inner { margin-left: 0; width: 100%; }

  .about { padding: 72px 0 32px; }
  .about-inner { flex-direction: column; gap: 44px; }
  .about-photo { flex: none; width: min(400px, 88%); }
  .about-photo img { height: auto; aspect-ratio: 5 / 4; }
  .about-text h2.jp { font-size: 24px; }
  .about-text .about-body { font-size: 16px; }

  .sec-label { font-size: 44px; }
  .services { padding: 64px 0 24px; }
  .services-deco { display: none; }
  .services-lead { font-size: 20px; margin-top: 8px; }
  .box-head { flex-wrap: wrap; gap: 8px 10px; }
  .service-block { flex-direction: column; gap: 44px; margin-top: 56px; }
  .services-lead + .service-block { margin-top: 44px; }
  .service-main { flex: none; max-width: none; }
  .service-photo { flex: none; width: min(400px, 88%); }
  .service-photo img { height: auto; aspect-ratio: 400 / 322; }
  .service-num { font-size: 44px; }
  .service-head { gap: 10px; }
  .service-head h3 { font-size: 20px; line-height: 1.35; }
  .service-sub { font-size: 17px; }
  .service-body { font-size: 15px; }
  .service-box { padding: 14px 16px 14px; }
  .box-title { font-size: 16px; }
  .box-text { font-size: 14px; }

  .works { padding: 72px 0 24px; }
  /* SP: 1カラム・先頭3件のみ表示(4件目以降は「もっと見る」へ委ねる) */
  .works-grid { grid-template-columns: 1fr; gap: 28px; }
  .works-item { width: 100%; }
  .works-item:nth-child(n+4) { display: none; }
  .works-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .works-tags { font-size: 12px; }
  .works-name { font-size: 14px; }
  .btn-more { width: 200px; height: 48px; font-size: 15px; }

  .faq { padding: 72px 0 40px; }
  .faq-deco { display: none; }
  .faq-list { margin-top: 36px; }
  .faq-q p { font-size: 16px; }
  .faq-a p { font-size: 15px; }
  .qa-mark { flex-basis: 40px; width: 40px; height: 40px; font-size: 22px; }
  .contact h2 { font-size: 26px; }
}

/* ============================================================
   下層ページ共通コンポーネント(2026-07-08 一括ラフ実装)
   追加理由: 記事LP型下層(サービス3/about/tom/flow/faq/problems等)の
   共通文法。トークン8色のみ使用。セクション単位を明確にし、
   後のFigma調整→MCP実測反映がしやすい構造にしている。
   ============================================================ */

/* ---------- Serviceドロップダウン(PC=hover/focus/クリック、SP=タップ展開) ---------- */
.header-nav .nav-item { position: relative; display: flex; align-items: center; }
@media (min-width: 901px) {
  .header-nav { align-items: center; } /* has-subの70px化で他リンクがstretchしないよう中央固定 */
  .header-nav .has-sub { height: 70px; }
}
.sub-toggle {
  background: none; border: 0; cursor: pointer; padding: 4px 2px 4px 4px;
  display: flex; align-items: center; color: var(--black); flex-shrink: 0;
}
.sub-toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.sub-toggle:hover { color: var(--green-04); }
.sub-toggle:focus { outline: none; }
.sub-toggle:focus-visible { outline: 2px solid var(--green-04); outline-offset: 3px; border-radius: 8px; }
.sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  min-width: 232px; background: #fff;
  border: 1px solid var(--gray); border-radius: 12px;
  box-shadow: 0 14px 30px rgba(26,26,26,.10);
  padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.is-open .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sub-menu a {
  display: block; padding: 11px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 700; color: var(--black);
  text-decoration: none; border-bottom: 0;
  transition: background .15s ease, color .15s ease;
}
.sub-menu a:hover { background: var(--lite-green); color: var(--green-04); }

/* 901〜1100pxはPCナビの横幅が足りず折り返すため、SPと同じ開閉ナビへ倒す。
   1128px以上のPC基準は維持し、中間幅だけ破綻を避ける。 */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-toggle { display: block; }
  .header-inner { padding: 0 24px; }
  .header-tagline { display: none; }
  .header-cta { margin-left: auto; }
  .header-nav {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; top: 70px; left: 0; right: 0;
    margin: 0; padding: 6px 24px 14px;
    background: #fff; border-bottom: 1px solid var(--gray);
    box-shadow: 0 12px 24px rgba(26,26,26,.08);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .header-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .header-nav a {
    padding: 14px 2px; font-size: 15px;
    border-bottom: 1px solid var(--gray);
  }
  .header-nav a:last-child { border-bottom: 0; }
  .header-nav a.is-current { border-bottom: 1px solid var(--gray); color: var(--green-04); }
  .header-nav .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--gray); }
  .header-nav .nav-item > a { flex: 1 1 auto; border-bottom: 0; }
  .header-nav .has-sub { height: auto; }
  .sub-toggle { width: 44px; height: 44px; justify-content: center; }
  .has-sub.is-open .sub-toggle::after { transform: rotate(225deg) translate(-2px, -2px); }
  .sub-menu {
    position: static; transform: none; min-width: 0; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; padding: 0 0 10px 12px;
    display: none; opacity: 1; visibility: visible; transition: none;
  }
  .has-sub:hover .sub-menu,
  .has-sub:focus-within .sub-menu { display: none; }
  .has-sub.is-open .sub-menu {
    display: block;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .sub-menu a { border-bottom: 0; padding: 10px 8px; font-size: 14px; color: var(--lite-black); }
}

/* ---------- パンくず ---------- */
.breadcrumb { font-size: 13px; color: var(--lite-black); padding-top: 18px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li + li::before { content: "›"; margin: 0 6px; color: var(--gray); }
.breadcrumb a { color: var(--lite-black); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-04); }

/* ---------- ページヒーロー(下層共通) ---------- */
.page-hero { padding: 34px 0 10px; }
.page-hero h1 { font-size: 40px; font-weight: 800; color: var(--lite-black); line-height: 1.4; letter-spacing: .5px; margin-top: 2px; }
.page-lead { margin-top: 16px; max-width: 700px; font-size: 16px; line-height: 1.9; color: var(--black); }

/* page-heroの右にサブ画像を添える共通版。下層ページで画像を添える場合に使用:
   .page-hero に .page-hero--media を付け、中を <div class="hero-text">…</div> と
   <div class="hero-media"><img …></div> で包む。画像は5:4想定・幅300px・本文下限に下揃え。
   画像を添えないページは従来どおり .page-hero のみでOK(モディファイア未付与時は無影響)。 */
.page-hero--media .container { display: flex; gap: 40px; align-items: flex-end; }
.page-hero--media .hero-text { flex: 1 1 auto; min-width: 0; }
.page-hero--media .hero-media { flex: 0 0 300px; }
.page-hero--media .hero-media img { width: 100%; height: auto; border-radius: 20px; display: block; }
/* 実績詳細等・大画像版: TOP FVの流儀で画像をコンテナ右外へ逃がす(絶対配置・原寸上限600px) */
.page-hero--media.page-hero--media-lg { position: relative; min-height: 520px; display: flex; align-items: center; }
.page-hero--media.page-hero--media-lg .container { display: block; width: 100%; }
.page-hero--media.page-hero--media-lg .hero-text { max-width: 500px; position: relative; z-index: 2; }
.page-hero--media.page-hero--media-lg h1 { font-size: 36px; line-height: 1.5; } /* 実績詳細: 案件名が長いケースに対応(トム指示) */
.page-hero--media.page-hero--media-lg .hero-media {
  flex: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  right: max(24px, calc(50% - 700px)); /* 〜1448pxは右端24px、それ以上は1400フレーム内に留める */
  width: min(790px, calc(50vw - 20px)); /* テキスト領域500px+余白を常に確保する上限式 */
}
@media (max-width: 900px) {
  .page-hero--media.page-hero--media-lg { min-height: 0; display: block; }
  .page-hero--media.page-hero--media-lg .hero-media { position: static; transform: none; width: 100%; max-width: 520px; margin-top: 24px; }
}
/* 画像未定のプレースホルダ枠(画像確定後は中に<img>を入れて--phを外す) */
.hero-media--ph { aspect-ratio: 5 / 4; background: var(--lite-green); border: 1px dashed var(--gray); border-radius: 20px; }

/* FV型ヒーロー(サービスLP用)。TOP FVの流儀で右端に大きめ画像を絶対配置し、
   左にテキスト+ボタン(cv-actions)。高さはテキスト依存(FVより抑え、テキスト+余白ぶん)。
   画像はセクション右端まで伸び左角丸のみ。SPは縦積み。 */
.page-hero--fv { position: relative; overflow: hidden; padding: 0; }
.page-hero--fv .container { display: block; }
.page-hero--fv .hero-text { position: relative; z-index: 2; max-width: 560px; padding: 40px 0 52px; }
.page-hero--fv .hero-media { position: absolute; inset: 0 0 0 auto; width: min(600px, calc(50vw - 12px)); border-radius: 30px 0 0 30px; overflow: hidden; }
.page-hero--fv .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* サービスLPのFVは901〜1100pxで画像と本文が重なりやすい。
   PC完成形は1128px以上に残し、中間幅では読み物優先で縦積みにする。 */
@media (min-width: 901px) and (max-width: 1100px) {
  .page-hero--fv { overflow: visible; }
  .page-hero--fv .container { display: flex; flex-direction: column; }
  .page-hero--fv .hero-media { order: -1; }
  .page-hero--fv .hero-text { order: 1; }
  .page-hero--fv .hero-text { max-width: 760px; padding: 40px 0 28px; }
  .page-hero--fv .hero-media {
    position: static; width: min(760px, 100%); border-radius: 22px;
    margin: 8px 0 0; overflow: hidden;
  }
  .page-hero--fv .hero-media img { height: auto; border-radius: 22px; }
  .page-hero--fv .cv-actions { justify-content: flex-start; }
}

/* ---------- 記事セクション ---------- */
.article-sec { padding-top: 72px; }
.article-sec:last-of-type { padding-bottom: 24px; }
.article-sec.article-sec--end { padding-bottom: 140px; } /* page-cvを持たない文書ページ(privacy/terms)の末尾余白。:last-of-type(0,2,0)に勝つよう詳細度を揃え後置 */
/* イラスト付きセクション: 本文は他セクションと同じ中央700pxカラムのまま。
   画像は中央カラムの右端に少し重なる位置(右上・前面)。SP非表示 */
.article-sec--illust .container { position: relative; }
.sec-illust { position: absolute; top: -28px; right: 200px; width: 180px; height: auto; z-index: 2; pointer-events: none; }
.sec-title { max-width: 700px; margin: 0 auto; font-size: 30px; font-weight: 700; color: var(--lite-black); line-height: 1.5; }
.sec-sub { margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--green-04); }
.sec-body { margin: 16px auto 0; max-width: 700px; font-size: 16px; line-height: 1.9; }
.sec-note { margin: 18px auto 0; max-width: 700px; font-size: 15px; color: var(--lite-black); line-height: 1.9; }

/* ---------- チェックリスト ---------- */
.check-list { list-style: none; max-width: 700px; margin: 22px auto 0; }
.check-list li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px dashed var(--gray); font-size: 16px; line-height: 1.7; }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 14px; height: 7px;
  border-left: 3px solid var(--green-04); border-bottom: 3px solid var(--green-04);
  transform: rotate(-45deg);
}

/* ---------- 番号リスト(判断軸/進め方 共用) ---------- */
.num-list { list-style: none; counter-reset: nl; max-width: 700px; margin: 12px auto 0; }
.num-list li { counter-increment: nl; padding: 24px 0; border-top: 1px solid var(--gray); }
.num-list li:first-child { border-top: 0; }
/* 番号+見出しを同じ行で天地中央、本文はその下に全幅(数字の縦ズレを構造で解消) */
.num-list li strong { display: flex; align-items: center; gap: 18px; font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.5; }
.num-list li strong::before {
  content: counter(nl, decimal-leading-zero);
  flex: none;
  font-family: var(--font-en); font-weight: 600; font-size: 36px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .75;
}
.num-list li p { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--black); }

/* ---------- 概要表 ---------- */
.def-table { width: 100%; max-width: 700px; border-collapse: collapse; margin: 26px auto 0; }
.def-table th { width: 170px; text-align: left; font-weight: 700; color: var(--lite-black); padding: 16px 12px 16px 0; border-bottom: 1px solid var(--gray); vertical-align: top; font-size: 15px; }
.def-table td { padding: 16px 0 16px 12px; border-bottom: 1px solid var(--gray); font-size: 15px; line-height: 1.8; }

/* ---------- 関連カード ---------- */
.related { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; justify-content: center; }
/* 関連導線セクション: カード2枚でも重心が中央に来るよう全体センタリング(トム指示) */
.article-sec--center .sec-title,
.article-sec--center .sec-note { text-align: center; }
.related-card {
  flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column;
  border: 1px solid var(--gray); border-radius: 16px; padding: 22px 24px;
  text-decoration: none; background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.related-card:hover { border-color: var(--green-04); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(67,194,152,.12); }
.related-card .rel-label { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .5px; color: var(--green-04); }
.related-card h2, .related-card h3 { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.5; }
.related-card p { margin-top: 8px; font-size: 14px; color: var(--lite-black); line-height: 1.7; }
.related-card .rel-more { display: flex; align-items: center; justify-content: flex-end; width: 100%; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--green-04); }
/* リンク誘導矢印は「→」テキストではなくサービスナビ同型の山形(chevron)で統一 */
.related-card .rel-more::after, .tool-more::after, .lnk-arrow::after,
.prob-card .prob-to::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); vertical-align: middle; position: relative; top: -1px;
}
.related-card .rel-more::after, .tool-more::after, .lnk-arrow::after { margin-left: 7px; }
.prob-card .prob-to::before { margin-right: 8px; }

/* ---------- ページ下部CV(記事LP必須・フッターに埋めない) ---------- */
.page-cv { background: var(--lite-green); padding: 64px 24px 68px; margin-top: 96px; position: relative; overflow: hidden; }
.cv-illust { position: absolute; bottom: 0; width: 200px; height: auto; pointer-events: none; z-index: 0; }
.cv-illust--l { left: max(24px, calc(50% - 540px)); }
.cv-illust--r { right: max(24px, calc(50% - 540px)); }
.page-cv > :not(.cv-illust) { position: relative; z-index: 1; }
.page-cv h2 { font-size: 28px; font-weight: 700; color: var(--lite-black); text-align: center; line-height: 1.6; }
.page-cv .cv-note { margin-top: 14px; text-align: center; font-size: 15px; color: var(--lite-black); max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.9; }
.cv-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- ページ内目次(FAQ等) ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; max-width: 700px; }
.toc a {
  border: 1px solid var(--gray); border-radius: 18px; padding: 6px 16px;
  font-size: 14px; font-weight: 700; color: var(--lite-black); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.toc a:hover { border-color: var(--green-04); color: var(--green-04); background: var(--lite-green); }
.faq-cat { padding-top: 64px; }
.faq-cat h2 { font-size: 22px; font-weight: 700; color: var(--lite-black); border-left: 4px solid var(--green-04); padding-left: 14px; line-height: 1.5; }
.faq-cat .faq-list { margin-top: 20px; margin-left: 0; }

/* ---------- 困りごとカード(problems) ---------- */
.prob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; max-width: 900px; }
.prob-card {
  display: block; border: 1px solid var(--gray); border-radius: 16px; padding: 24px 26px;
  text-decoration: none; background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.prob-card:hover { border-color: var(--green-04); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(67,194,152,.12); }
.prob-card h3 { font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.6; }
.prob-card p { margin-top: 10px; font-size: 14px; color: var(--lite-black); line-height: 1.8; }
.prob-card .prob-to { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--green-04); }

/* ---------- お問い合わせフォーム ---------- */
.contact-form { max-width: 700px; margin: 40px auto 0; text-align: left; }
.form-row { margin-top: 22px; }
.form-row > label { display: block; font-weight: 700; font-size: 15px; color: var(--lite-black); }
.req {
  display: inline-block; margin-left: 8px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 9px; vertical-align: 2px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%; margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--gray); border-radius: 10px;
  font: inherit; font-size: 15px; background: #fff; color: var(--black);
}
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--green-04); outline: none; box-shadow: 0 0 0 3px rgba(67,194,152,.15);
}
.radio-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; cursor: pointer; }
.radio-row input { accent-color: var(--green-04); }
/* honeypot: 視覚・支援技術の両方から隠す(botのみが埋める) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--lite-black); margin-top: 16px; line-height: 1.8; }
.form-note a { color: var(--green-04); }
.form-submit { display: flex; justify-content: center; margin-top: 30px; }
.form-submit .cta-btn { border: 0; cursor: pointer; font-family: inherit; }
.form-submit .cta-btn:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.form-status { display: none; margin-top: 18px; text-align: center; font-size: 15px; font-weight: 700; color: var(--green-04); }
.form-status.is-visible { display: block; }
.turnstile-widget { min-height: 65px; margin-top: 20px; display: flex; justify-content: center; }

/* ---------- ツールカード(tools/インラインから移設) ---------- */
.tool-list { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.tool-card {
  display: block; width: min(480px, 100%);
  border: 1px solid var(--gray); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--black); background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tool-card:hover { border-color: var(--green-04); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(67,194,152,.14); }
.tool-card--pending { opacity: .78; }
.tool-card--pending:hover { border-color: var(--gray); transform: none; box-shadow: none; }
.tool-card--pending .tool-more::after { display: none; }
.tool-thumb { aspect-ratio: 16 / 9; background: var(--lite-green); border-bottom: 1px solid var(--gray); overflow: hidden; }
.tool-thumb img, .tool-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-body { padding: 22px 28px 24px; }
.tool-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--green-04);
  background: var(--lite-green); border: 1px solid var(--green-04); border-radius: 12px; padding: 2px 12px;
}
.tool-card h2, .tool-card h3 { font-size: 20px; font-weight: 700; margin-top: 12px; line-height: 1.4; }
.tool-desc { font-size: 14px; color: var(--lite-black); margin-top: 8px; line-height: 1.8; }
.tool-more { display: inline-block; font-size: 14px; font-weight: 700; color: var(--green-04); margin-top: 14px; }

/* ---------- 代表プロフィール(/tom/) ---------- */
.profile-head { display: flex; align-items: center; gap: 28px; margin-top: 10px; }
/* about代表セクションのprofile-headも読み物カラム(700中央)に揃える(/tom/ヒーローは対象外) */
.article-sec .profile-head { max-width: 700px; margin-left: auto; margin-right: auto; }
.profile-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gray); }
.profile-name h1 { font-size: 38px; font-weight: 800; color: var(--lite-black); line-height: 1.3; }
.profile-kana { font-size: 15px; color: var(--lite-black); margin-top: 2px; }
.profile-role { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--black); }
.profile-role small { display: block; font-size: 13px; font-weight: 500; color: var(--lite-black); margin-top: 2px; }
.profile-quote {
  margin-top: 28px; max-width: 700px;
  border-left: 4px solid var(--green-04); padding: 4px 0 4px 18px;
  font-size: 18px; font-weight: 700; color: var(--lite-black); line-height: 1.7;
}
.link-list { list-style: none; margin-top: 18px; max-width: 700px; }
.link-list li { padding: 9px 0; border-bottom: 1px dashed var(--gray); font-size: 15px; }
.link-list li:last-child { border-bottom: 0; }
.link-list a { color: var(--green-04); font-weight: 700; text-decoration: none; }
.link-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404/薄いページ用 ---------- */
.slim-page { padding: 88px 0 96px; min-height: 46vh; }
.slim-page h1 { font-size: 32px; font-weight: 800; color: var(--lite-black); margin-top: 4px; }
.slim-body { margin-top: 16px; max-width: 640px; color: var(--lite-black); line-height: 1.9; }

/* ---------- 下層SP ---------- */
@media (max-width: 900px) {
  .header-nav .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--gray); }
  .header-nav .nav-item > a { flex: 1 1 auto; border-bottom: 0; }
  .sub-toggle { width: 44px; height: 44px; justify-content: center; }
  .has-sub.is-open .sub-toggle::after { transform: rotate(225deg) translate(-2px, -2px); }
  .sub-menu {
    position: static; transform: none; min-width: 0; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; padding: 0 0 10px 12px;
    display: none; opacity: 1; visibility: visible; transition: none;
  }
  .has-sub.is-open .sub-menu {
    display: block;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .sub-menu a { border-bottom: 0; padding: 10px 8px; font-size: 14px; color: var(--lite-black); }

  .page-hero h1 { font-size: 26px; }
  .page-hero--media .container { flex-direction: column; gap: 22px; align-items: flex-start; }
  .page-hero--media .hero-media { flex: none; width: min(260px, 60%); }
  .page-hero--fv .container { display: flex; flex-direction: column; }
  .page-hero--fv .hero-media { order: -1; }
  .page-hero--fv .hero-text { order: 1; }
  .page-hero--fv .hero-text { max-width: none; padding: 28px 0 20px; }
  .page-hero--fv .hero-media { position: static; width: 100%; border-radius: 16px; margin-top: 22px; }
  .page-hero--fv .hero-media img { height: auto; border-radius: 16px; }
  .page-hero--fv .cv-actions {
    align-items: stretch;
    gap: 12px;
  }
  .page-hero--fv .cv-actions .cta-btn,
  .page-hero--fv .cv-actions .btn-more {
    width: 100%;
    max-width: 320px;
    height: 58px;
    border-radius: 29px;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
  }
  .sec-title { font-size: 21px; }
  .sec-sub { font-size: 16px; }
  .article-sec { padding-top: 56px; }
  .num-list li { padding: 20px 0; }
  .num-list li strong::before { font-size: 28px; }
  .def-table th { width: 108px; font-size: 13px; }
  .def-table td { font-size: 14px; }
  .page-cv { margin-top: 72px; padding: 52px 20px 56px; }
  .page-cv h2 { font-size: 20px; }
  .cv-actions { flex-direction: column; }
  .page-cv .cv-actions .cta-btn,
  .page-cv .cv-actions .btn-more {
    width: 100%;
    max-width: 320px;
    height: 58px;
    border-radius: 29px;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
  }
  .cv-illust { display: none; }
  .sec-illust { display: none; }
  .article-sec--illust .sec-title,
  .article-sec--illust .check-list,
  .article-sec--illust .sec-note { max-width: none; }
  .related { flex-direction: column; align-items: stretch; }
  .related-card { flex: none; width: 100%; max-width: none; }
  .prob-grid { grid-template-columns: 1fr; }
  .profile-head { gap: 18px; }
  .profile-photo img { width: 96px; height: 96px; }
  .profile-name h1 { font-size: 28px; }
  .faq-cat h2 { font-size: 18px; }
}

/* /works/ 一覧: SPでも全件表示(TOPの3件制限を解除) */
@media (max-width: 900px) {
  .works-grid--all .works-item:nth-child(n+4) { display: block; }
}

/* ============================================================
   記事LPセクションの型バリエーション(2026-07-08 第11ラン・トム依頼)
   目的: num-list縦積みの3連発を解消。役割別に見せ方を分ける。
   ルール: 番号を持つのは時系列(steps-flow)だけ。診断=カード、列挙=2カラムチェック。
   ============================================================ */

/* --- 広幅セクション修飾: 見出し/本文を900に広げ、カード・グリッド群と左端を揃える --- */
.article-sec--wide .sec-title,
.article-sec--wide .sec-body,
.article-sec--wide .sec-note,
.article-sec--wide .check-list,
.article-sec--wide .def-table,
.article-sec--wide .num-list,
.article-sec--wide .profile-head { max-width: 900px; }

/* --- 型1: 診断カード(判断軸・2×2) --- */
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 30px auto 0; }
.type-card { position: relative; border: 1px solid var(--gray); border-radius: 16px; background: #fff; padding: 26px 28px 24px; overflow: hidden; }
.type-card::before { content: ""; position: absolute; top: 0; left: 28px; width: 56px; height: 4px; border-radius: 0 0 4px 4px; background: var(--grad); opacity: .85; }
.type-card .type-num {
  font-family: var(--font-en); font-weight: 600; font-size: 30px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .75;
  display: block;
}
.type-card h3 { font-size: 18px; font-weight: 700; color: var(--black); margin-top: 10px; line-height: 1.5; }
.type-card p { margin-top: 8px; font-size: 14px; color: var(--lite-black); line-height: 1.8; }

/* --- 型2: 2カラムチェック項目(できること等・タイトル+1行説明) --- */
.can-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 48px; max-width: 900px; margin: 26px auto 0; list-style: none; }
/* チェックマークなし(対象者fit-listの丸チェックと重複するため・トム指示)。タイトル+説明のプレーン2カラム */
.can-grid li { position: relative; padding: 15px 0 16px 2px; border-bottom: 1px dashed var(--gray); }
.can-grid strong { display: block; font-size: 16px; font-weight: 700; color: var(--green-04); line-height: 1.6; } /* タイトル緑=チェックの代替アクセント(トム指示) */
.can-grid p { margin-top: 4px; font-size: 14px; color: var(--lite-black); line-height: 1.7; }

/* --- 型4: 対象者リスト(丸チェックアイコン+薄枠カード・2カラム) --- */
.fit-list { list-style: none; max-width: 900px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.fit-list li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--gray); border-radius: 12px; background: #fff; padding: 14px 18px; }
.fit-mark { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); position: relative; }
.fit-mark::after {
  content: ""; position: absolute; left: 10px; top: 11px;
  width: 13px; height: 7px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}
.fit-list p { font-size: 15px; font-weight: 500; color: var(--black); line-height: 1.7; }

/* --- 型3: 横並びステップフロー(進め方・時系列のみ番号を持つ) --- */
.steps-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 900px; margin: 34px auto 0; list-style: none; }
.steps-flow li { position: relative; }
.steps-flow .sf-num {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-family: var(--font-en); font-weight: 600; font-size: 19px;
}
.steps-flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; left: 62px; right: -16px; height: 2px;
  background: var(--gray);
}
.steps-flow h3 { font-size: 17px; font-weight: 700; color: var(--black); margin-top: 14px; line-height: 1.5; }
.steps-flow p { margin-top: 6px; font-size: 14px; color: var(--lite-black); line-height: 1.8; }

@media (max-width: 900px) {
  .type-grid { grid-template-columns: 1fr; gap: 16px; }
  .fit-list { grid-template-columns: 1fr; gap: 10px; }
  .can-grid { grid-template-columns: 1fr; gap: 0; }
  .steps-flow { grid-template-columns: 1fr; gap: 22px; max-width: 700px; }
  .steps-flow li { padding-left: 64px; }
  .steps-flow .sf-num { position: absolute; left: 0; top: 0; }
  .steps-flow h3 { margin-top: 0; min-height: 48px; display: flex; align-items: center; }
  .steps-flow li:not(:last-child)::after { top: 54px; bottom: -12px; left: 23px; right: auto; width: 2px; height: auto; }
}

/* ---------- 型2b: アイコン付き2カラム項目(できること/効きやすい業務・2026-07-08) ----------
   薄緑の円(グラデ色の低透過=トークン派生)+緑ストロークの線画アイコン。 */
.can-grid--icon { gap: 8px 48px; }
.can-grid--icon li { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; padding: 18px 0; }
.can-ic {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(67, 194, 152, .08); /* --green-04の8%(トム指示でさらに薄く) */
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.can-ic svg { width: 40px; height: 40px; stroke: var(--green-04); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .can-grid--icon li { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; }
  .can-ic { width: 64px; height: 64px; }
  .can-ic svg { width: 30px; height: 30px; }
}

/* ---------- 画像付き説明セクション(左4:3画像+右テキスト・2026-07-08) ----------
   費用/地域/信用系の説明セクション用。画像未定時は破線プレースホルダ、
   実画像は .sec-media 内に <img> を置くだけ。 */
.media-row { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: center; max-width: 900px; margin: 0 auto; }
.media-row .sec-title, .media-row .sec-body, .media-row .sec-note { max-width: none; margin-left: 0; margin-right: 0; }
.sec-media { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--lite-green); align-self: center; }
.sec-media--ph { border: 2px dashed rgba(67, 194, 152, .4); }
.sec-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .media-row { grid-template-columns: 1fr; gap: 20px; }
  .sec-media { max-width: 360px; }
}

/* ---------- 実績詳細(works case・2026-07-08) ----------
   型: hero(タグ+h1+概要リード)→概要表→課題→設計セクション(本文+図版)→担当範囲→CV。
   図版は.case-figure(枠+角丸・実寸比率のまま)。今後の案件はこの型で増やす。 */
.case-tags { font-family: var(--font-en); font-weight: 600; font-size: 13px; letter-spacing: .5px; color: var(--green-04); margin-top: 2px; }
.case-figure { max-width: 900px; margin: 32px auto 0; border: 1px solid var(--gray); border-radius: 16px; overflow: hidden; background: #f7f7f5; }
.case-figure img { width: 100%; height: auto; display: block; }
.case-figure--narrow { max-width: 640px; } /* 縦長図版用 */
.case-cap { max-width: 900px; margin: 10px auto 0; font-size: 13px; color: var(--lite-black); text-align: center; }

/* ---------- 実績モーダル(詳細ページのないフライヤー類・2026-07-08) ---------- */
[data-wmodal] { cursor: zoom-in; }
.wmodal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 26, 26, .72);
  display: none; align-items: center; justify-content: center; padding: 32px;
}
.wmodal.is-open { display: flex; }
.wmodal img { max-width: min(1100px, 92vw); max-height: 88vh; width: auto; height: auto; border-radius: 8px; background: #fff; }
.wmodal-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--black);
  font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1;
}
@media (max-width: 900px) { .wmodal { padding: 16px; } }

/* ---------- PC限定・費用シミュレーターフローティング導線 ---------- */
.price-float { display: none; }
@media (min-width: 1024px) {
  .price-float {
    display: block;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    width: clamp(320px, 30vw, 400px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0);
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
  }
  .price-float.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
  .price-float__link {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #fffcdf;
    box-shadow: 0 12px 34px rgba(26, 26, 26, .18);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .price-float__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(26, 26, 26, .22);
  }
  .price-float__link:focus-visible {
    outline: 3px solid var(--green-04);
    outline-offset: 3px;
  }
  .price-float__link img {
    display: block;
    width: 100%;
    height: auto;
  }
  .price-float__close {
    position: absolute;
    top: -13px;
    right: -13px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(26, 26, 26, .14);
    border-radius: 50%;
    background: #fff;
    color: var(--black);
    box-shadow: 0 4px 14px rgba(26, 26, 26, .15);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .price-float__close:hover { background: var(--lite-green); }
  .price-float__close:focus-visible {
    outline: 3px solid var(--green-04);
    outline-offset: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-float,
  .price-float__link { transition: none; }
}