/* =========================================================
   Purgatoria 共通スタイル（全ページ共有）
   このファイルの色や余白を変えると、全ページに反映されます
   ========================================================= */

/* デザイントークン（色・余白などの共通設定） */
:root{
  --brand:      #08F6CB;   /* ティファニーブルー（メイン） */
  --brand-deep: #09CBA9;   /* 濃いティファニー（ボタン・リンク） */
  --brand-ink:  #0A7A68;   /* さらに濃い緑青（小さな文字用） */
  --ink:        #14181A;   /* ほぼ黒（本文） */
  --muted:      #616B70;   /* グレー（補足文） */
  --line:       #E6ECEC;   /* 罫線 */
  --bg:         #FFFFFF;   /* 背景（白） */
  --bg-soft:    #F5F8F8;   /* 背景（うすいグレー） */
  --radius:     18px;
  --maxw:       1160px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --font-jp:    "Noto Sans JP", -apple-system, "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en:    "Manrope", var(--font-jp);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-jp);
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
html{ overflow-x:hidden; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* セクション共通 */
section{ padding:clamp(72px,10vw,140px) 0; }
.eyebrow{
  font-family:var(--font-en);
  font-size:13px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand-deep);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background:var(--brand-deep); }
.h2{
  font-size:clamp(24px,3.6vw,38px); font-weight:600; line-height:1.36;
  letter-spacing:.02em; margin-bottom:22px;
}
.lead{ color:var(--muted); font-size:clamp(15px,1.6vw,17px); max-width:60ch; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-weight:600; font-size:15px;
  padding:15px 28px; border-radius:100px; cursor:pointer; border:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 10px 30px -12px rgba(20,24,26,.5);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(20,24,26,.55); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--brand-deep); color:var(--brand-ink); transform:translateY(-3px); }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* =========================================================
   ヘッダー（画面上部に固定）
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.header.scrolled{
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{
  font-family:var(--font-en); font-weight:600; font-size:20px; letter-spacing:.28em;
  text-transform:uppercase; padding-left:.28em;
  display:inline-flex; align-items:center;
}
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); margin-left:2px; margin-bottom:-2px; }
.brand .accent{ color:var(--brand-deep); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink); opacity:.85; transition:opacity .2s; }
.nav-links a:hover{ opacity:1; color:var(--brand-ink); }
.nav-cta{ padding:11px 22px; font-size:14px; background:var(--brand); box-shadow:0 10px 26px -16px rgba(8,246,203,.9); }
/* お問い合わせボタン＝明るいIAカラー地。文字は読めるよう濃い同系色に反転 */
.nav-links a.nav-cta{ color:#0C3A37; opacity:1; font-weight:700; }
.nav-links a.nav-cta:hover{ color:#0C3A37; opacity:1; background:#34F5D2; }
.burger{ display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px auto; transition:.35s var(--ease); }

/* =========================================================
   ヒーロー（最初の大きな見せ場）
   ========================================================= */
.hero{ position:relative; padding-top:clamp(140px,20vh,200px); padding-bottom:clamp(80px,12vw,150px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg .blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.hero-bg .b1{ width:560px; height:560px; background:radial-gradient(circle,#08F6CB,transparent 68%); top:-160px; right:-120px; }
.hero-bg .b2{ width:420px; height:420px; background:radial-gradient(circle,#A6FBEC,transparent 70%); bottom:-140px; left:-100px; opacity:.5; }
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
}
/* ヒーロー背景写真（hero.jpg があれば表示） */
.hero-photo{ position:absolute; inset:0; background:url('hero.jpg') center right / cover no-repeat; }
/* 左側を白くぼかして文字を読みやすくする膜 */
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,.35) 52%, rgba(255,255,255,0) 72%); }
@media (max-width:860px){
  .hero-scrim{ background:linear-gradient(180deg, rgba(255,255,255,.9) 30%, rgba(255,255,255,.6) 60%, rgba(255,255,255,.85) 100%); }
}
.hero-inner{ max-width:860px; }
.hero .tag{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500;
  color:var(--brand-ink); background:rgba(8,246,203,.16);
  padding:8px 16px; border-radius:100px; margin-bottom:28px;
}
.hero .tag .pulse{ width:7px; height:7px; border-radius:50%; background:var(--brand-deep); box-shadow:0 0 0 0 rgba(8,246,203,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(8,246,203,0);} 100%{ box-shadow:0 0 0 0 rgba(8,246,203,0);} }
.hero h1{
  font-size:clamp(28px,5vw,54px); font-weight:500; line-height:1.42; letter-spacing:.04em;
  margin-bottom:28px;
}
.hero h1 .accent{
  background:linear-gradient(120deg,var(--brand-deep),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.sub{ font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:52ch; margin-bottom:40px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* サブページ用ヒーロー（トップより少し控えめ） */
.subhero{ padding-top:clamp(128px,17vh,178px); padding-bottom:clamp(48px,7vw,88px); }
.subhero .hero-inner{ max-width:780px; }

/* 事業タブ（ヒーロー下の小さな指標） */
.hero-stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,64px); margin-top:clamp(56px,8vw,88px); padding-top:36px; border-top:1px solid var(--line); }
.hero-stats .item .num{ font-family:var(--font-en); font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.01em; }
.hero-stats .item .num .s{ color:var(--brand-deep); }
.hero-stats .item .lbl{ font-size:13.5px; color:var(--muted); margin-top:2px; }

/* =========================================================
   カード（事業紹介・課題など）
   ========================================================= */
.section-head{ max-width:640px; margin-bottom:clamp(40px,6vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.biz-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card{
  position:relative; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(28px,3.5vw,42px);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  overflow:hidden;
}
.card::after{ content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(180deg,transparent 60%,rgba(8,246,203,.08)); opacity:0; transition:opacity .45s;
  pointer-events:none; }
.card:hover{ transform:translateY(-6px); border-color:var(--brand); box-shadow:0 26px 50px -30px rgba(8,246,203,.45); }
.card:hover::after{ opacity:1; }
.card .ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,rgba(8,246,203,.22),rgba(8,246,203,.06));
  color:var(--brand-ink); margin-bottom:22px;
}
.card .ico svg{ width:28px; height:28px; }
.card .num-badge{ position:absolute; top:26px; right:30px; font-family:var(--font-en); font-weight:800; font-size:15px; color:var(--brand); opacity:.6; }
.card h3{ font-size:22px; font-weight:700; margin-bottom:6px; }
.card .en{ font-family:var(--font-en); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); margin-bottom:16px; display:block; }
.card p{ color:var(--muted); font-size:15px; margin-bottom:22px; }
.card p:last-child{ margin-bottom:0; }
.card .more{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ink); }
.card .more svg{ width:16px; transition:transform .3s var(--ease); }
.card:hover .more svg{ transform:translateX(4px); }

/* =========================================================
   強み（3カラム）
   ========================================================= */
.strength{ background:var(--bg-soft); }
.str-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(40px,5vw,56px); }
.str{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; }
.str .n{ font-family:var(--font-en); font-size:14px; font-weight:700; color:var(--brand-deep); letter-spacing:.1em; }
.str h4{ font-size:21px; font-weight:700; margin:14px 0 10px; }
.str p{ color:var(--muted); font-size:14.5px; }

/* =========================================================
   タグ（対応技術など）
   ========================================================= */
.tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,40px); }
.tag-chip{ font-family:var(--font-en); font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:11px 20px; border-radius:100px; border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.tag-chip:hover{ border-color:var(--brand); color:var(--brand-ink); transform:translateY(-2px); }

/* =========================================================
   フロー（手順・4ステップ）
   ========================================================= */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:clamp(40px,5vw,56px); }
.flow-step{ position:relative; padding-top:16px; }
.flow-step::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--brand),transparent); border-radius:2px; }
.flow-step .st{ font-family:var(--font-en); font-weight:800; font-size:13px; color:var(--brand-deep); letter-spacing:.12em; }
.flow-step h4{ font-size:17px; font-weight:700; margin:12px 0 8px; }
.flow-step p{ color:var(--muted); font-size:14px; }

/* =========================================================
   会社概要
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.about-visual{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg,#0A7A68,#09CBA9 55%,#08F6CB); }
.about-visual .ring{ position:absolute; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.about-visual .r1{ inset:12%; }
.about-visual .r2{ inset:26%; }
.about-visual .r3{ inset:40%; border-color:rgba(255,255,255,.5); }
.about-visual .mark{ position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  font-family:var(--font-en); font-weight:800; font-size:clamp(40px,7vw,72px); letter-spacing:.1em; }
.about-visual .mark .dot{ color:#DFF7F4; }
.info-table{ width:100%; border-collapse:collapse; margin-top:34px; }
.info-table th,.info-table td{ text-align:left; padding:18px 4px; border-bottom:1px solid var(--line); vertical-align:top; font-size:15.5px; }
.info-table th{ width:130px; font-weight:700; color:var(--ink); white-space:nowrap; }
.info-table td{ color:var(--muted); }

/* =========================================================
   CTA 帯
   ========================================================= */
.cta{ position:relative; overflow:hidden; }
.cta-box{
  background:linear-gradient(135deg,#08F6CB,#1EEAC8 55%,#03E4BE);
  border-radius:calc(var(--radius) + 4px); padding:clamp(40px,4.5vw,58px) clamp(28px,5vw,60px);
  text-align:center; position:relative; overflow:hidden;
}
.cta-box .glow{ position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); top:-150px; left:50%; transform:translateX(-50%); }
.cta-box .eyebrow{ color:#0C3A37; justify-content:center; }
.cta-box .eyebrow::before{ background:#0C3A37; }
.cta-box h2{ color:#08302B; font-size:clamp(20px,2.5vw,29px); font-weight:600; line-height:1.44; letter-spacing:.01em; margin-bottom:12px; position:relative; }
.cta-box p{ color:rgba(8,48,43,.72); font-size:14.5px; max-width:42ch; margin:0 auto 26px; position:relative; }
.cta-box .btn-primary{ background:var(--ink); color:#fff; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }
.cta-box .btn-line{ background:transparent; color:#0C3A37; border:1.5px solid rgba(10,58,52,.4); }
.cta-box .btn-line:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-3px); }

/* =========================================================
   フッター
   ========================================================= */
.footer{ border-top:1px solid var(--line); padding:64px 0 40px; }
.foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:48px; }
.foot-brand .brand{ font-size:18px; letter-spacing:.26em; margin-bottom:18px; }
.foot-brand p{ color:var(--muted); font-size:14px; max-width:34ch; }
.foot-cols{ display:flex; gap:clamp(40px,8vw,88px); flex-wrap:wrap; }
.foot-col h5{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; font-family:var(--font-en); }
.foot-col a{ display:block; font-size:14.5px; color:var(--ink); opacity:.82; margin-bottom:12px; transition:.2s; }
.foot-col a:hover{ opacity:1; color:var(--brand-ink); padding-left:4px; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* スクロール出現アニメ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   レスポンシブ（スマホ・タブレット）
   ========================================================= */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
    padding:14px 24px 28px; box-shadow:0 20px 40px -20px rgba(0,0,0,.2);
    transform:translateY(-120%); transition:transform .45s var(--ease); border-bottom:1px solid var(--line);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ width:100%; padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-links .nav-cta{ width:100%; justify-content:center; margin-top:16px; border-bottom:none; }
  .burger{ display:block; z-index:101; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .biz-grid{ grid-template-columns:1fr; }
  .str-grid{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; }
  /* スマホでは装飾のPパネルを隠して、無駄な縦スクロールを減らす */
  .about-visual{ display:none; }
}
@media (max-width:520px){
  .flow{ grid-template-columns:1fr; }
}

/* =========================================================
   モバイル優先の調整（縦の余白を詰めて、スクロール量を減らす）
   ========================================================= */
@media (max-width:640px){
  section{ padding:56px 0; }
  .hero{ padding-top:110px; padding-bottom:52px; }
  .subhero{ padding-top:102px; padding-bottom:36px; }
  .hero-stats{ margin-top:38px; padding-top:26px; gap:18px 30px; }
  .section-head{ margin-bottom:30px; }
  .cta-box{ padding:44px 24px; }
  .card{ padding:26px 24px; }
  .str{ padding:28px 24px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   フォーム（お問い合わせ）
   ========================================================= */
.form{ max-width:680px; margin-top:clamp(32px,4vw,44px); }
.form-row{ margin-bottom:22px; }
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.form label .req{ color:var(--brand-deep); font-size:11px; margin-left:6px; }
.form input, .form select, .form textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s, box-shadow .2s; }
.form input::placeholder, .form textarea::placeholder{ color:#AEB6BB; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--brand-deep); box-shadow:0 0 0 3px rgba(8,246,203,.12); }
.form textarea{ min-height:150px; resize:vertical; }
.form .check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); cursor:pointer; }
.form .check input{ width:auto; margin-top:5px; }
.form .submit{ margin-top:8px; }
@media(max-width:560px){ .form-row.two{ grid-template-columns:1fr; } }

/* =========================================================
   法務・長文ページ
   ========================================================= */
.legal{ max-width:760px; }
.legal p{ color:var(--muted); font-size:15px; margin-bottom:14px; }
.legal h3{ font-size:18px; font-weight:700; margin:34px 0 12px; color:var(--ink); }
.legal ol, .legal ul{ color:var(--muted); font-size:15px; padding-left:1.4em; margin-bottom:14px; }
.legal li{ margin-bottom:7px; }
.legal .updated{ color:var(--muted); font-size:13.5px; margin-top:40px; }

/* =========================================================
   NEWS（一覧・記事）
   ========================================================= */
.news-list{ margin-top:16px; border-top:1px solid var(--line); }
.news-item{ display:grid; grid-template-columns:118px 116px 1fr 24px; gap:22px; align-items:center;
  padding:24px 4px; border-bottom:1px solid var(--line); transition:background .25s var(--ease); }
.news-item:hover{ background:var(--bg-soft); }
.news-item .date{ font-family:var(--font-en); font-size:14px; color:var(--muted); }
.news-item .cat{ font-size:12px; font-weight:600; color:var(--brand-ink); background:rgba(8,246,203,.16);
  padding:5px 12px; border-radius:100px; justify-self:start; }
.news-item .ttl{ font-size:15.5px; font-weight:500; color:var(--ink); }
.news-item .go{ color:var(--brand-deep); transition:transform .25s var(--ease); }
.news-item:hover .go{ transform:translateX(4px); }
@media(max-width:680px){
  .news-item{ grid-template-columns:auto 1fr; row-gap:10px; padding:20px 4px; }
  .news-item .go{ display:none; }
}
.article{ max-width:760px; }
.article .meta{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.article .meta .date{ font-family:var(--font-en); color:var(--muted); font-size:14px; }
.article-body p{ color:var(--ink); font-size:16px; margin-bottom:20px; line-height:1.95; }
.article-body h3{ font-size:20px; font-weight:700; margin:36px 0 14px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; margin-top:44px; font-weight:600; color:var(--brand-ink); }

/* =========================================================
   写真の使い方（メディアブロック / 写真カード）
   写真は background-image で指定。未設定でも淡いミント色で崩れない
   ========================================================= */
.ph-bg{ background-color:#DBFBF3; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* Pattern 02：写真＋文章を左右交互に */
.media{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.media + .media{ margin-top:clamp(40px,6vw,80px); }
.media-img{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.media.reverse .media-img{ order:2; }
.media-txt .eyebrow{ margin-bottom:12px; }
.media-txt h3{ font-size:clamp(20px,3vw,28px); font-weight:700; line-height:1.42; margin-bottom:14px; }
.media-txt p{ color:var(--muted); margin-bottom:22px; }
@media (max-width:760px){
  .media{ grid-template-columns:1fr; gap:18px; }
  .media.reverse .media-img{ order:0; }   /* スマホは常に写真が上 */
  .media-img{ aspect-ratio:16/10; }
}

/* Rental：写真を使わないスペース紹介（中央バンド・デザイン重視） */
.space-intro .space-intro-inner{
  position:relative; overflow:hidden; text-align:center;
  max-width:none; margin-inline:auto;
  padding:clamp(48px,7vw,96px) clamp(26px,6vw,88px);
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(135deg,#F1FFFB 0%,#E7FBF5 55%,#FFFFFF 100%);
  border:1px solid var(--line);
}
.space-intro .space-intro-inner > *{ position:relative; z-index:1; }
.space-intro .space-intro-inner::before,
.space-intro .space-intro-inner::after{ content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
.space-intro .space-intro-inner::before{ width:clamp(170px,28vw,280px); height:clamp(170px,28vw,280px); top:-18%; right:-8%;
  background:radial-gradient(circle,rgba(8,246,203,.36),transparent 66%); }
.space-intro .space-intro-inner::after{ width:clamp(120px,20vw,200px); height:clamp(120px,20vw,200px); bottom:-16%; left:-6%;
  background:radial-gradient(circle,rgba(8,246,203,.20),transparent 70%); }
.space-intro .eyebrow{ margin-bottom:14px; }
.space-intro h3{ font-size:clamp(22px,3.6vw,33px); font-weight:700; line-height:1.42; margin-bottom:16px; }
.space-intro p{ color:var(--muted); max-width:44ch; margin:0 auto 28px; }
/* PCのみ整える（スマホ≤760pxには影響なし） */
@media (min-width:761px){
  .space-intro .space-intro-inner{ padding:clamp(78px,8vw,120px) clamp(56px,7vw,96px); }
  .space-intro h3{ font-size:clamp(29px,3vw,38px); line-height:1.4; }
  .space-intro p{ font-size:17px; max-width:52ch; margin-bottom:32px; }
  .space-intro .space-intro-inner::before{ width:clamp(240px,26vw,340px); height:clamp(240px,26vw,340px); }
  .space-intro .space-intro-inner::after{ width:clamp(180px,20vw,260px); height:clamp(180px,20vw,260px); }
}

/* Pattern 03：写真つきカード */
.photocards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pcard{ display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; color:inherit;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.pcard:hover{ transform:translateY(-6px); border-color:var(--brand); box-shadow:0 26px 50px -30px rgba(8,246,203,.45); }
.pcard .ph{ aspect-ratio:16/10; overflow:hidden; }
.pcard .ph .img{ width:100%; height:100%; transition:transform .6s var(--ease); }
.pcard:hover .ph .img{ transform:scale(1.05); }
.pcard .body{ padding:clamp(22px,3vw,32px); }
.pcard .en{ font-family:var(--font-en); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); }
.pcard h3{ font-size:21px; font-weight:700; margin:8px 0 8px; }
.pcard p{ color:var(--muted); font-size:14.5px; margin-bottom:18px; }
.pcard .more{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ink); }
.pcard .more svg{ width:16px; transition:transform .3s var(--ease); }
.pcard:hover .more svg{ transform:translateX(4px); }
.photocards.cols3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .photocards, .photocards.cols3{ grid-template-columns:1fr; } }

/* =========================================================
   トップ・ヒーロー：実写＋ティファニーの膜（本格版）
   写真の上に暗→ティファニーのグラデを重ね、文字は白。ブランドの青も残す
   ========================================================= */
.hero-city .hero-photo{ background:url('hero.jpg') center center / cover no-repeat; }
.hero-city .hero-scrim{
  background:linear-gradient(100deg,
    rgba(6,22,20,.44) 0%,
    rgba(8,42,39,.28) 42%,
    rgba(8,120,104,.12) 72%,
    rgba(8,246,203,.05) 100%);
}
.hero-city .tag{ background:rgba(255,255,255,.16); color:#fff; }
.hero-city .tag .pulse{ background:#EAFBF8; box-shadow:0 0 0 0 rgba(234,251,248,.5); }
.hero-city h1{ color:#fff; text-shadow:0 2px 20px rgba(0,14,12,.6), 0 1px 4px rgba(0,14,12,.5); }
.hero-city h1 .accent{ background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#08F6CB; color:#08F6CB; }
.hero-city p.sub{ color:rgba(255,255,255,.94); text-shadow:0 1px 16px rgba(0,14,12,.62), 0 1px 3px rgba(0,14,12,.45); }
.hero-city .hero-cta .btn-primary{ background:#fff; color:var(--ink); }
.hero-city .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.hero-city .btn-ghost:hover{ color:#fff; border-color:#fff; }
.hero-city .hero-stats{ border-top-color:rgba(255,255,255,.25); }
.hero-city .hero-stats .item .num{ color:#fff; }
.hero-city .hero-stats .item .num .s{ color:#08F6CB; }
.hero-city .hero-stats .item .lbl{ color:rgba(255,255,255,.78); }
/* モバイルは縦方向の暗グラデで白文字を読みやすく */
@media (max-width:860px){
  .hero-city .hero-scrim{ background:linear-gradient(180deg,
    rgba(6,22,20,.50) 0%, rgba(8,46,43,.32) 52%, rgba(8,140,120,.18) 100%); }
}

/* =========================================================
   改行・体裁の自動調整（見やすさ）
   見出し＝行の長さをそろえる／本文＝行末の孤立文字を防ぐ
   ========================================================= */
.h2, .hero h1, .cta-box h2,
.card h3, .pcard h3, .media-txt h3, .str h4, .flow-step h4{
  text-wrap:balance;
}
.lead, .hero p.sub, .card p, .pcard p, .media-txt p, .str p,
.cta-box p, .article-body p, .legal p, .flow-step p, .info-table td{
  text-wrap:pretty;
}

/* =========================================================
   暗いヒーローの上ではヘッダーを白くして見やすく（トップのみ）
   ========================================================= */
body.dark-hero .header:not(.scrolled) .brand{ color:#fff; }
body.dark-hero .header:not(.scrolled) .brand .accent{ color:#08F6CB; }
body.dark-hero .header:not(.scrolled) .burger span{ background:#fff; }
@media (min-width:861px){
  body.dark-hero .header:not(.scrolled) .nav-links a:not(.nav-cta){ color:#fff; opacity:.92; }
  body.dark-hero .header:not(.scrolled) .nav-links a:not(.nav-cta):hover{ color:#DFF7F4; opacity:1; }
}
/* トップ最上部（暗ヒーロー上）でも、お問い合わせボタンは明るいIAカラー地＋濃い文字で統一 */
body.dark-hero .header:not(.scrolled) .nav-cta{ background:var(--brand); color:#0C3A37; box-shadow:0 8px 22px -12px rgba(0,0,0,.3); }

/* キーボード操作時のフォーカス表示（アクセシビリティ／プロ仕様） */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand-deep); outline-offset:3px; border-radius:8px;
}

/* microCMSから差し込む代表挨拶（リッチエディタ）の段落をleadと同じ見た目に */
[data-mc="ceoMessage"] p{ color:var(--muted); font-size:clamp(15px,1.6vw,17px); line-height:1.9; margin-bottom:18px; }
[data-mc="ceoMessage"] p:last-child{ margin-bottom:0; }