/* =========================================================
   MediLiberty v8  ―  uravation.com ベンチマーク
   配色：白基調 × ディープネイビー × ティール（青）
   装飾：角丸2-4px / シャドウ最小 / グラデなし / 線画アイコン
   ========================================================= */

:root{
  /* uravation.com ベンチマーク配色（白基調 × ネイビー × ティール） */
  --green:    #0A1628;   /* メイン：ディープネイビー（地・見出し） */
  --green-d:  #06101F;   /* より濃いネイビー（フッター） */
  --green-l:  #1C2A3A;   /* やや明るいネイビー */
  --tan:      #006E8F;   /* アクセント：ディープティール（uravation実測 rgb(0,110,143)） */
  --tan-d:    #00566F;   /* 濃いティール（hover） */
  --linen:    #FFFFFF;   /* 背景：白基調 */
  --linen-d:  #EEF3F6;   /* 区切り：ごく薄いブルーグレー */
  --cream:    #F5F1E8;   /* uravation同様のクリーム帯（限定使用） */
  --cream-d:  #EFEADF;   /* 一段濃いクリーム */
  --ink:      #1F2D3D;   /* 本文テキスト：ダークネイビーグレー */
  --ink-2:    #5A6B7B;   /* サブテキスト */
  --white:    #FFFFFF;
  --line:     #E4E9EE;   /* 罫線：ブルーグレー */
  --line-on-dark: rgba(255,255,255,.16);

  --radius:   3px;
  --radius-lg:4px;
  --shadow:   0 2px 6px rgba(0,0,0,.05);

  --container: 1180px;
  --pad-x: 24px;

  --serif: 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  --en:    'Montserrat', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--linen);
  line-height:1.9;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* uravation準拠：見出しは極太ゴシック（明朝は使わない） */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; line-height:1.42; letter-spacing:.005em; margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }

/* 英ラベル（SERVICE / 事業案内 のような） */
.eyebrow{
  font-family:var(--en);
  font-size:12px; font-weight:600; letter-spacing:.22em;
  color:var(--tan); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--tan); display:inline-block; }
.eyebrow .ja{ color:var(--ink-2); font-family:var(--sans); letter-spacing:.08em; font-weight:500; }
.eyebrow.on-dark{ color:var(--tan); }
.eyebrow.on-dark .ja{ color:rgba(255,255,255,.7); }

/* セクション見出し */
.sec{ padding:96px 0; }
.sec--tight{ padding:72px 0; }
.sec-head{ margin-bottom:48px; }
.sec-title{
  font-size:clamp(28px,3.4vw,42px); color:var(--green); margin:18px 0 0; line-height:1.4;
  font-weight:800;
}
.sec-lead{ font-size:15px; color:var(--ink-2); margin:16px 0 0; max-width:640px; }

/* ボタン（uravation準拠：pill型 radius 999px） */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:700;
  padding:16px 34px; border-radius:999px; border:1.5px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  cursor:pointer; letter-spacing:.04em;
}
.btn:hover{ transform:translateY(-1px); }
.btn .ar{ font-family:var(--en); font-weight:600; }
/* メインCTA = ティール塗り pill（uravation の「無料で相談する」） */
.btn--accent{ background:var(--tan); color:#fff; }
.btn--accent:hover{ background:var(--tan-d); }
.btn--green{ background:var(--green); color:#fff; }
.btn--green:hover{ background:var(--green-d); }
.btn--tan{ background:var(--tan); color:#fff; }
.btn--tan:hover{ background:var(--tan-d); }
/* セカンダリ = 枠線 pill */
.btn--ghost{ background:transparent; color:var(--green); border-color:var(--line); }
.btn--ghost:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--ghost-light:hover{ background:#fff; color:var(--green); border-color:#fff; }
.btn--white{ background:#fff; color:var(--green); }
.btn--white:hover{ background:var(--linen-d); }

/* ========== HEADER ========== */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header__in{ max-width:1280px; margin:0 auto; padding:16px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__logo{ width:30px; height:30px; }
.brand__name{ font-family:var(--en); font-weight:700; font-size:19px; letter-spacing:.02em; color:var(--green); }
.gnav{ display:flex; align-items:center; gap:30px; }
.gnav a{ font-family:var(--en); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--ink); text-transform:uppercase; transition:color .2s; }
.gnav a:hover{ color:var(--tan); }
.gnav a.ja{ font-family:var(--sans); letter-spacing:.04em; text-transform:none; font-weight:500; }
.gnav .cta{
  font-family:var(--sans); text-transform:none; letter-spacing:.03em;
  background:var(--tan); color:#fff; padding:10px 22px; border-radius:6px; font-weight:700; font-size:13px;
}
.gnav .cta:hover{ background:var(--tan-d); color:#fff; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; width:30px; height:24px; position:relative; }
.menu-btn span{ position:absolute; left:0; width:100%; height:2px; background:var(--green); transition:.25s; }
.menu-btn span:nth-child(1){ top:2px; } .menu-btn span:nth-child(2){ top:11px; } .menu-btn span:nth-child(3){ top:20px; }

/* ========== HERO（全画面・背景画像＋テキスト重ね） ========== */
.hero{
  position:relative; overflow:hidden;
  background:var(--green) center/cover no-repeat;
  min-height:clamp(560px, 86vh, 840px);
  display:flex; align-items:center;
}
/* 可読性のための暗幕（左を濃く、右へフェード） */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,16,31,.90) 0%, rgba(6,16,31,.74) 40%, rgba(6,16,31,.34) 72%, rgba(6,16,31,.18) 100%);
}
.hero__in{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:72px var(--pad-x); width:100%; }
.hero .eyebrow{ color:#5fd3ea; }
.hero .eyebrow::before{ background:#5fd3ea; }
.hero h1{
  font-size:clamp(40px,5.4vw,72px); color:#fff; line-height:1.3; margin:24px 0 0;
  font-weight:900; letter-spacing:.01em;
}
.hero__lead{ font-size:clamp(15px,1.7vw,18px); color:rgba(255,255,255,.86); margin:28px 0 0; max-width:600px; line-height:2; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__rule{ height:1px; background:rgba(255,255,255,.2); margin:48px 0 0; max-width:680px; }
.hero__stats{ display:flex; gap:56px; margin-top:30px; flex-wrap:wrap; }
.hstat__n{ font-family:var(--en); font-size:38px; font-weight:700; color:#fff; line-height:1; }
.hstat__n small{ font-size:15px; font-weight:600; margin-left:4px; color:rgba(255,255,255,.85); }
.hstat__l{ font-size:13px; color:rgba(255,255,255,.7); margin-top:8px; }

/* ========== SERVICE CARDS（番号付き） ========== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 30px; transition:border-color .2s, transform .2s;
  display:flex; flex-direction:column;
}
.svc:hover{ border-color:var(--tan); transform:translateY(-2px); }
.svc--feat{ background:var(--green); border-color:var(--green); color:#fff; }
.svc--feat .svc__name, .svc--feat .svc__no{ color:#fff; }
.svc--feat .svc__desc{ color:rgba(255,255,255,.78); }
.svc__no{ font-family:var(--en); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--tan); }
.svc__icon{ width:38px; height:38px; margin:18px 0 16px; color:var(--green); }
.svc--feat .svc__icon{ color:var(--tan); }
.svc__name{ font-size:19px; color:var(--green); margin:0 0 10px; }
.svc__desc{ font-size:14px; color:var(--ink-2); line-height:1.85; margin:0; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.svc__tag{ font-size:12px; color:var(--ink-2); background:var(--linen-d); border:1px solid var(--line); border-radius:var(--radius); padding:3px 9px; }
.svc--feat .svc__tag{ background:rgba(255,255,255,.1); border-color:var(--line-on-dark); color:#fff; }
.svc__more{ font-family:var(--en); font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--tan); margin-top:auto; padding-top:18px; }
.badge{ display:inline-block; width:auto; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.05em; background:var(--tan); color:#fff; border-radius:var(--radius); padding:3px 10px; margin-bottom:14px; }
.svc--feat .badge{ background:var(--tan); }

/* ========== WHY（3カラム） ========== */
.bg-linen-d{ background:var(--linen-d); }
.bg-cream{ background:var(--cream); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.why__no{ font-family:var(--en); font-size:34px; font-weight:700; color:var(--tan); line-height:1; }
.why__t{ font-size:19px; color:var(--green); margin:14px 0 10px; }
.why__d{ font-size:14px; color:var(--ink-2); line-height:1.9; margin:0; }
.why__icon{ width:34px; height:34px; color:var(--green); margin-bottom:6px; }

/* ========== ABOUT 帯 ========== */
.about-band{ background:var(--green-d); color:#fff; }
.about-band .sec-title{ color:#fff; }
.about-band .sec-lead{ color:rgba(255,255,255,.72); }
.about-band__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.about-band__body p{ font-size:15px; color:rgba(255,255,255,.82); line-height:2; margin:0 0 18px; }
.about-band__body em{ color:var(--tan); font-style:normal; font-weight:600; }

/* ========== 代表メッセージ ========== */
.message{ background:var(--linen-d); }
.message__card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:54px 56px; }
.message__q{ font-family:var(--sans); font-weight:700; font-size:clamp(20px,2.6vw,28px); color:var(--green); line-height:1.66; letter-spacing:.01em; margin:0 0 24px; }
.message__body{ font-size:15px; color:var(--ink-2); line-height:2; margin:0 0 26px; max-width:760px; }
.message__sign{ display:flex; align-items:center; gap:14px; }
.message__sign .line{ width:30px; height:1px; background:var(--tan); }
.message__name{ font-size:16px; color:var(--green); font-weight:700; }
.message__role{ font-size:13px; color:var(--ink-2); margin-left:6px; }

/* ========== CONTACT CTA 帯 ========== */
.cta-band{ background:var(--green); color:#fff; text-align:center; }
.cta-band .eyebrow{ justify-content:center; }
.cta-band h2{ font-size:clamp(26px,3.4vw,40px); color:#fff; margin:18px 0 14px; }
.cta-band p{ font-size:15px; color:rgba(255,255,255,.8); margin:0 0 34px; }

/* ========== FOOTER ========== */
.footer{ background:var(--green-d); color:rgba(255,255,255,.7); padding:64px var(--pad-x) 30px; }
.footer__in{ max-width:var(--container); margin:0 auto; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-on-dark); }
.footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer__brand .brand__name{ color:#fff; }
.footer__desc{ font-size:13px; color:rgba(255,255,255,.6); line-height:1.9; margin:0; }
.footer__col h4{ font-family:var(--en); font-size:12px; letter-spacing:.12em; color:var(--tan); margin-bottom:16px; font-weight:600; }
.footer__col a{ display:block; font-size:14px; color:rgba(255,255,255,.75); padding:6px 0; transition:color .2s; }
.footer__col a:hover{ color:var(--tan); }
.footer__bottom{ padding-top:24px; font-size:12px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer__bottom a{ color:rgba(255,255,255,.5); }
.footer__bottom a:hover{ color:var(--tan); }

/* ========== パンくず ========== */
.crumb{ font-size:12px; color:var(--ink-2); padding:20px 0 0; }
.crumb a:hover{ color:var(--tan); }

/* ========== page hero（サブページ共通） ========== */
.phero{ background:var(--green-d); color:#fff; padding:84px var(--pad-x); }
.phero__in{ max-width:var(--container); margin:0 auto; }
.phero h1{ font-size:clamp(32px,4.6vw,52px); color:#fff; margin:22px 0 0; line-height:1.4; }
.phero__lead{ font-size:15px; color:rgba(255,255,255,.78); margin:26px 0 0; max-width:560px; line-height:2; }

/* ========== 汎用 ========== */
.bg-white{ background:#fff; }
.center{ text-align:center; }

/* ========== サブページ：共通プロセス／特徴 ========== */
.lead-block{ max-width:760px; }
.lead-block p{ font-size:15px; color:var(--ink-2); line-height:2; margin:0 0 16px; }

/* 特徴リスト（2カラム） */
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 30px; }
.feat__icon{ width:34px; height:34px; color:var(--tan); margin-bottom:14px; }
.feat__t{ font-size:18px; color:var(--green); margin:0 0 8px; }
.feat__d{ font-size:14px; color:var(--ink-2); line-height:1.85; margin:0; }

/* 進め方（ステップ） */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; }
.step__no{ font-family:var(--en); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--tan); }
.step__t{ font-size:16px; color:var(--green); margin:10px 0 8px; }
.step__d{ font-size:13px; color:var(--ink-2); line-height:1.8; margin:0; }

/* 料金カード */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; display:flex; flex-direction:column; }
.plan--feat{ border-color:var(--tan); border-width:1.5px; }
.plan__tag{ font-family:var(--en); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--tan); }
.plan__name{ font-size:20px; color:var(--green); margin:8px 0 6px; }
.plan__price{ font-size:15px; color:var(--ink-2); margin:0 0 18px; }
.plan__price b{ font-family:var(--en); font-size:30px; color:var(--green); font-weight:700; }
.plan__list{ list-style:none; padding:0; margin:0 0 8px; }
.plan__list li{ font-size:14px; color:var(--ink-2); line-height:1.7; padding:9px 0 9px 26px; border-top:1px solid var(--line); position:relative; }
.plan__list li::before{ content:""; position:absolute; left:2px; top:16px; width:12px; height:7px; border-left:2px solid var(--tan); border-bottom:2px solid var(--tan); transform:rotate(-45deg); }
.plan__note{ font-size:12px; color:var(--ink-2); margin:18px 0 0; }

/* FAQ */
.faq{ max-width:820px; }
.faq__item{ border-top:1px solid var(--line); padding:24px 0; }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{ font-size:16px; color:var(--green); font-weight:700; margin:0 0 10px; padding-left:30px; position:relative; }
.faq__q::before{ content:"Q"; position:absolute; left:0; top:-2px; font-family:var(--en); font-weight:700; color:var(--tan); }
.faq__a{ font-size:14px; color:var(--ink-2); line-height:1.9; margin:0; padding-left:30px; }

/* 実績カード（数字の捏造はしない：取り組み内容を抽象化して提示） */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.case{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 30px; }
.case__cat{ font-family:var(--en); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--tan); }
.case__t{ font-size:19px; color:var(--green); margin:10px 0 12px; line-height:1.5; }
.case__ba{ display:flex; gap:14px; margin:0 0 14px; flex-wrap:wrap; }
.case__col{ flex:1; min-width:130px; background:var(--linen-d); border-radius:var(--radius); padding:14px 16px; }
.case__col h5{ font-size:12px; color:var(--ink-2); margin:0 0 6px; font-weight:600; }
.case__col p{ font-size:13px; color:var(--ink); margin:0; line-height:1.7; }
.case__col--after{ background:#EAF4F7; }
.case__d{ font-size:13px; color:var(--ink-2); line-height:1.85; margin:0; }

/* 代表プロフィール */
.profile{ display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:start; }
.profile__photo{ width:100%; aspect-ratio:1/1; background:var(--linen-d); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:13px; }
.profile__name{ font-size:24px; color:var(--green); margin:0; }
.profile__role{ font-size:13px; color:var(--tan); font-family:var(--en); font-weight:600; letter-spacing:.06em; margin:6px 0 22px; }
.profile__body p{ font-size:15px; color:var(--ink-2); line-height:2; margin:0 0 16px; }

/* 会社概要テーブル */
.spec{ width:100%; border-collapse:collapse; }
.spec th, .spec td{ text-align:left; padding:16px 6px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.spec th{ width:200px; color:var(--green); font-weight:700; }
.spec td{ color:var(--ink-2); }

/* お問い合わせ：フォーム＋情報 */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
.cinfo__row{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.cinfo__icon svg{ width:22px; height:22px; stroke:var(--tan); fill:none; stroke-width:1.6; }
.cinfo__row b{ display:block; font-size:15px; color:var(--green); }
.cinfo__row span{ font-size:13px; color:var(--ink-2); }
.cinfo__co{ font-size:13px; color:var(--ink-2); line-height:1.9; margin:22px 0 0; }
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; }
.form__row{ margin-bottom:20px; }
.form__label{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--green); font-weight:700; margin-bottom:8px; }
.form input, .form textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; transition:border-color .2s; }
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--tan); }
.form textarea{ min-height:130px; resize:vertical; line-height:1.8; }
.form__pp{ font-size:12px; color:var(--ink-2); margin:0 0 20px; }
.form__pp a{ color:var(--tan); text-decoration:underline; }
.badge--req{ font-size:10px; background:var(--tan); color:#fff; border-radius:var(--radius); padding:2px 7px; font-weight:700; }
.badge--opt{ font-size:10px; background:var(--linen-d); color:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:2px 7px; font-weight:600; }

/* 本文プロセ（特商法・プライバシー） */
.prose{ max-width:820px; }
.prose h2{ font-size:20px; color:var(--green); margin:40px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ font-size:14px; color:var(--ink-2); line-height:1.95; margin:0 0 14px; }
.prose ul{ padding-left:20px; margin:0 0 14px; }
.prose li{ font-size:14px; color:var(--ink-2); line-height:1.9; }
.prose a{ color:var(--tan); text-decoration:underline; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 14px; }
.prose th, .prose td{ text-align:left; padding:14px 6px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); vertical-align:top; }
.prose th{ width:220px; color:var(--green); font-weight:700; }

/* サンクス */
.thanks{ text-align:center; max-width:560px; margin:0 auto; }
.thanks__icon{ width:64px; height:64px; margin:0 auto 24px; }
.thanks__icon svg{ width:100%; height:100%; stroke:var(--tan); fill:none; stroke-width:1.5; }

/* ========== 写真メディア（AI生成画像。未配置でもネイビーで成立） ========== */
.media-img{
  background:var(--green) center/cover no-repeat;
  border-radius:var(--radius-lg); position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.media-img::after{ /* 画像が無い時にうっすら幾何モチーフ */
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(circle at 72% 30%, rgba(0,110,143,.28), transparent 42%),
    radial-gradient(circle at 30% 78%, rgba(255,255,255,.06), transparent 40%);
}
.media-img.is-loaded::after{ display:none; }
.media-img > img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
.media-img > .deco{ position:absolute; inset:0; z-index:1; opacity:.55; }
.media-img > .deco svg{ width:100%; height:100%; }

/* hero を 2カラム（左テキスト／右写真）に */
.hero__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:46px; align-items:center; }
.hero__media{ aspect-ratio:4/3; width:100%; }
.hero .hero__grid .hero__col{ position:relative; z-index:2; }

/* ページヒーローに写真を敷く（任意） */
.phero--photo{ position:relative; overflow:hidden; }
.phero--photo .phero__bg{
  position:absolute; inset:0; background:var(--green-d) center/cover no-repeat; opacity:.34; z-index:0;
}
.phero--photo .phero__in{ position:relative; z-index:1; }

/* お知らせ（news） */
.news-list{ max-width:840px; }
.news-item{ display:grid; grid-template-columns:130px 110px 1fr; gap:18px; align-items:baseline; padding:22px 0; border-top:1px solid var(--line); }
.news-item:last-child{ border-bottom:1px solid var(--line); }
.news-item time{ font-family:var(--en); font-size:13px; color:var(--ink-2); letter-spacing:.04em; }
.news-item .cat{ font-size:11px; font-weight:700; color:var(--tan); border:1px solid var(--line); border-radius:var(--radius); padding:3px 8px; text-align:center; justify-self:start; }
.news-item .ttl{ font-size:15px; color:var(--green); line-height:1.6; }

/* 代表 no-face 抽象ビジュアル */
.avatar-abst{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-lg); background:var(--green); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.avatar-abst svg{ width:64%; height:64%; }

/* サービス詳細ページ：イントロ2カラム */
.detail-intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.detail-intro__media{ aspect-ratio:4/3; }
.detail-intro h2{ font-size:clamp(24px,3vw,34px); color:var(--green); line-height:1.4; margin:14px 0 0; }
.detail-intro p{ font-size:15px; color:var(--ink-2); line-height:2; margin:18px 0 0; }

/* ========== レスポンシブ ========== */
@media(max-width:920px){
  .feat-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .plan-grid{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .profile{ grid-template-columns:1fr; gap:28px; }
  .profile__photo{ max-width:280px; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .detail-intro{ grid-template-columns:1fr; gap:30px; }
  .avatar-abst{ max-width:280px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; gap:28px; }
  .about-band__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:680px){
  .gnav{ position:fixed; inset:64px 0 auto 0; background:var(--linen); flex-direction:column; align-items:stretch; gap:0; padding:8px 0; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .3s; }
  .gnav.open{ transform:translateY(0); }
  .gnav a{ padding:14px 24px; border-top:1px solid var(--line); }
  .gnav .cta{ margin:10px 24px; text-align:center; }
  .menu-btn{ display:block; }
  .svc-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__deco{ display:none; }
  .message__card{ padding:36px 26px; }
  .hero__stats{ gap:28px; }
  .steps{ grid-template-columns:1fr; }
  .spec th{ width:130px; }
  .form{ padding:26px 22px; }
  .news-item{ grid-template-columns:1fr; gap:6px; }
  .news-item time{ order:-1; }
}