/* ============================================================
   Zoth Consulting — 下層ページ共通 (style.css の後に読み込む)
   時間の流れ: 夜明けのヒーロー → 日中の紙面 → 夕暮れの Contact
   参考: Ramp OnRamp (中央揃えヒーロー・パターン・白紙面へ溶ける・3列アイコン)
         Teamway (色面カード) / fivot (大英字+小日本語) / Vorking (数値)
   ============================================================ */

.pc-br{display:inline}

/* ---------- page hero (夜空 → 朝焼け → 紙面へ連続的に溶ける) ---------- */
.ph{
  position:relative;overflow:hidden;
  min-height:min(86svh,900px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:170px 0 clamp(140px,18vw,240px);
  background:linear-gradient(180deg,
    #070B22 0%,#0C1544 15%,#1B2A78 32%,#4B4681 47%,#9A6C6C 58%,
    #D39A7C 68%,#EBC3A6 77%,#F1D9C6 86%,#F5E8DC 94%,#F6EFE7 100%);
}
/* 地平線から昇る太陽の光 */
.ph-glow{
  position:absolute;left:50%;top:58%;
  width:min(120vw,1500px);height:min(70vh,640px);border-radius:50%;
  transform:translate(-50%,-30%);
  background:radial-gradient(closest-side,
    rgba(255,232,204,.9) 0%,rgba(250,190,132,.6) 28%,rgba(236,140,92,.26) 56%,transparent 100%);
  filter:blur(40px);mix-blend-mode:screen;pointer-events:none;
  animation:phGlow 12s ease-in-out infinite alternate;
}
@keyframes phGlow{from{transform:translate(-50%,-30%) scale(1)}to{transform:translate(-50%,-36%) scale(1.06)}}
/* タイトル背面のやわらかい円 (Ramp のタイトル背面のハイライト) */
.ph-halo{
  position:absolute;left:50%;top:42%;
  width:min(70vw,620px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 45%,transparent 70%);
  filter:blur(18px);pointer-events:none;
}
.ph .hero-rings{
  opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 88%);
}
.ph-inner{position:relative;z-index:1}
.ph-label{
  margin:0 0 1.4rem;
  font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,224,196,.85);
}
.ph-label span{font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.14em;color:rgba(255,246,238,.9)}
.ph-en{
  font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:400;
  font-size:clamp(3rem,7.6vw,6.4rem);line-height:1.04;letter-spacing:0;
  color:#fff;margin:0 0 1.6rem;text-shadow:0 2px 40px rgba(10,12,40,.3);
}
.ph-sub{
  max-width:32em;margin:0 auto;
  font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.95;letter-spacing:.03em;
  color:rgba(255,246,238,.92);text-shadow:0 1px 18px rgba(10,12,40,.4);
}
@media (prefers-reduced-motion:reduce){.ph-glow{animation:none}}
/* フィルムグレイン (TOP FV と同じ質感):
   .hero-grain の overlay は中間〜暗部に効くが白に近い部分では消えるため、
   明部に効く multiply のノイズを重ねて全域に粒子を乗せる */
.ph .hero-grain{
  opacity:.6;
  /* 下端で粒子が途切れると境目に見えるため、紙面へ向けて徐々に抜く
     (以降は .page-grain が引き継ぐので質感が連続する) */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%);
}
/* 暗部用: screen 合成の白い粒子 (multiply は暗部では効かないため) */
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.1;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='phs'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23000'/%3E%3Crect width='100%25' height='100%25' filter='url(%23phs)' opacity='.55'/%3E%3C/svg%3E");
  background-size:200px 200px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 72%);
}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='phm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Crect width='100%25' height='100%25' filter='url(%23phm)' opacity='.55'/%3E%3C/svg%3E");
  background-size:200px 200px;
  /* 最下部は紙面へ溶ける部分なので粒子を抜き、継ぎ目が出ないようにする */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
}


/* ---------- 共通 ---------- */
.split{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.split .sec-head{margin:0}
.body-copy p{font-size:.95rem;line-height:2.05;color:var(--body)}
.body-copy p:last-child{margin-bottom:0}
.body-copy,.st-big,.st-body,.wd-lead,.wd-item p,.co-table dd,.cc-card p,.num-note,.num-lead,.ph-sub{
  text-wrap:pretty;word-break:auto-phrase;overflow-wrap:anywhere;
}
.body-copy{max-width:40em}

/* ---------- statement (Mission / Vision) — Ramp「On the guest list」型 ---------- */
.st{background:transparent}
.st.is-first{padding-top:clamp(24px,4vw,56px)}
.st.is-first,.hero-bleed{position:relative}
/* ヒーロー下端と同じ色から始めて紙面へ溶かす。境界の両側が同色になり、
   セクションの切れ目が見えなくなる */
.st.is-first::before,.hero-bleed::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(180px,24vw,320px);pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,#F6EFE7 0%,rgba(246,239,231,.55) 38%,rgba(246,239,231,.18) 68%,rgba(246,239,231,0) 100%);
}
.st + .st{padding-top:0}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 clamp(1.8rem,3.2vw,2.6rem)}
.pills li{
  padding:.42em 1.05em;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:.78rem;font-weight:500;letter-spacing:.06em;color:var(--graphite);
}
.pills li.is-on{
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -12px rgba(217,118,92,.9);
}
.st-big{
  margin:0 0 1.5rem;max-width:24em;
  font-size:clamp(1.5rem,3vw,2.35rem);font-weight:500;line-height:1.65;letter-spacing:.03em;
  color:var(--ink);
}
.st-body p{font-size:1rem;line-height:2.05;color:var(--body);max-width:40em}
.st-body p:last-child{margin-bottom:0}

/* ---------- what we do — Ramp「On what to expect」型 (太いグラデーションのアイコン3列) ---------- */
.wd{background:transparent}
.wd-lead{max-width:38em;margin:0 0 clamp(2.6rem,4.6vw,3.8rem);font-size:.95rem;line-height:2.05;color:var(--body)}
.wd-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,3.4vw,3.2rem);
}
.wd-icon{width:64px;height:64px;margin-bottom:1.3rem}
.wd-icon svg{width:100%;height:100%;overflow:visible}
.wd-item h3{font-size:1.06rem;letter-spacing:.05em;margin-bottom:.55rem}
.wd-item h3 small{display:block;margin-top:.2rem;font-family:"DM Mono",monospace;font-size:.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
.wd-item p{font-size:.88rem;line-height:1.95;color:var(--body);max-width:30em;margin-bottom:1rem}
.wd-link{ /* Teamway の下線付きテキストリンク */
  display:inline-flex;align-items:center;gap:.5em;
  padding-bottom:.25em;border-bottom:1px solid var(--ink);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--ink);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.wd-link .arrow{transition:transform .35s var(--ease)}
.wd-link:hover{color:var(--glow);border-color:var(--glow)}
.wd-link:hover .arrow{transform:translateX(4px)}

/* ---------- numbers (数値で見る) — 大きな数字 + 小さなラベル (Vorking 型) ---------- */
.num{background:transparent}
.num-lead{margin:clamp(1.2rem,2vw,1.6rem) 0 0;max-width:22em;font-size:.95rem;line-height:2.05;color:var(--body)}
.num-note{margin:1.2rem 0 0;font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.1em;color:var(--faint)}
.num-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,3.4vw,3rem) clamp(1.2rem,2.4vw,2.4rem);
}
.num-item{padding-top:1.1rem;border-top:1px solid var(--line)}
.num-val{margin:0;display:flex;align-items:baseline;gap:.18em}
.num-val .n{
  font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.num-val .u{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--glow)}
.num-label{margin:.7rem 0 0;font-size:.88rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}

/* ---------- concept (ゾスとは / ロゴの由来) — Teamway 型の色面カード ---------- */
.cc{background:transparent}
.cc-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem);
}
.cc-card{
  position:relative;overflow:hidden;border-radius:20px;
  padding:clamp(1.8rem,3.4vw,3rem);
  border:1px solid rgba(23,24,28,.05);
  display:flex;flex-direction:column;justify-content:center;  /* カード内で縦センター */
}
.cc-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='.8'/%3E%3C/svg%3E");
}
.cc-card > *{position:relative;z-index:1}
.cc-warm{background:linear-gradient(140deg,#FFF7F1 0%,#FBEADF 58%,#F6DCCB 100%)}
.cc-cool{background:linear-gradient(150deg,#F5F5F3 0%,#ECEDF3 60%,#E2E4EF 100%)}
.cc-tag{
  display:inline-flex;align-items:center;gap:.55em;margin:0 0 1.4rem;
  padding:.4em .95em;border-radius:999px;background:rgba(255,255,255,.75);
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
  border:1px solid rgba(23,24,28,.06);
}
.cc-tag::before{content:"";width:.55em;height:.55em;border-radius:50%;background:linear-gradient(90deg,#eb745a,#e4bf93)}
.cc-card h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.6;letter-spacing:.04em;margin-bottom:1.1rem}
.cc-card p{font-size:.93rem;line-height:2.05;color:var(--body);max-width:36em}
.cc-card p:last-of-type{margin-bottom:0}
.cc-orb{
  position:absolute;right:-16%;bottom:-24%;width:min(62%,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#F5C9A9 0%,#EB9A7A 36%,#D9765C 70%,#C46248 100%);
  opacity:.55;filter:blur(2px);
  box-shadow:0 40px 90px -30px rgba(217,118,92,.6);
  animation:ccBreath 9s ease-in-out infinite alternate;
}
@keyframes ccBreath{from{transform:scale(1) translateY(0)}to{transform:scale(1.05) translateY(-8px)}}
.cc-logo{margin:.6rem 0 1.8rem;color:var(--ink);display:flex;justify-content:center}
.cc-logo .wm{width:min(100%,300px);height:auto}
.cc-logo .wm .o{transform-box:fill-box;transform-origin:center;animation:oGlow 5s ease-in-out infinite alternate}
@keyframes oGlow{from{filter:drop-shadow(0 0 0 rgba(235,116,90,0))}to{filter:drop-shadow(0 0 18px rgba(235,116,90,.55))}}
.cc-swatches{display:flex;justify-content:center;gap:.6rem;margin-top:1.6rem}
.cc-swatches span{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(23,24,28,.06)}
@media (prefers-reduced-motion:reduce){.cc-orb,.cc-logo .wm .o{animation:none}}

/* ---------- company (会社情報) ---------- */
.co{background:transparent}
.co-table{margin:0}
.co-table > div{
  display:grid;grid-template-columns:180px 1fr;gap:1rem 2rem;
  padding:1.25rem 0;border-top:1px solid var(--line);
}
.co-table > div:last-child{border-bottom:1px solid var(--line)}
.co-table dt{
  font-family:"Noto Sans JP",sans-serif;font-size:.85rem;letter-spacing:.06em;
  font-weight:700;color:var(--ink);padding-top:.15em;
}
.co-table dd{margin:0;font-size:.95rem;line-height:1.9;color:var(--body)}
.co-table dd ul li{position:relative}
.co-table dd ul li + li{margin-top:.3em}
.co-table dd .tbd{color:var(--faint);font-size:.82rem}

/* ---------- page end (夕暮れ → 夜: Contact + Footer) ---------- */
.page-end{
  position:relative;margin-top:clamp(2rem,5vw,4rem);
  background:linear-gradient(180deg,#3A2447 0%,#241C46 28%,#161642 56%,#0F1236 78%,#0A0C24 100%);
}
.page-end::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(240px,32vw,400px);pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(247,247,246,.86) 18%,rgba(247,247,246,.58) 40%,rgba(247,247,246,.28) 62%,rgba(247,247,246,.09) 82%,rgba(247,247,246,0) 100%);
}
.page-end .contact{padding-top:clamp(200px,26vw,340px)}
.page-end::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)' opacity='.95'/%3E%3C/svg%3E");
  background-size:260px 260px;
}
.page-end > *{position:relative;z-index:1}


/* ============================================================
   サービスページ / 採用ページ の部品
   ============================================================ */

/* ---------- hero 追加 (サービスロゴ・日本語タイトル・ピルCTA) ---------- */
.ph-svclogo{width:min(64vw,320px);margin:0 auto clamp(1.2rem,2.4vw,1.8rem)}
.ph-svclogo img{width:100%;height:auto;display:block}
.ph-title{
  margin:0 0 1.2rem;font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:700;line-height:1.5;
  letter-spacing:.06em;color:#fff;text-shadow:0 2px 30px rgba(10,12,40,.35);
}
.ph-cta{
  display:inline-flex;align-items:center;gap:.9em;margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:.55em .55em .55em 1.7em;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.06em;
  transition:background .35s var(--ease);
}
.ph-cta .cp-arrow{width:44px;height:44px;font-size:.78rem}
.ph-cta:hover{background:rgba(255,255,255,.2)}
.ph-cta:hover .cp-arrow{background:var(--glow);border-color:var(--glow)}
.ph-cta:hover .cp-arrow span{transform:translateX(4px)}

/* ---------- orbs (課題 / 特徴: 3つの円) ---------- */
.orb-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem);
}
.orb{
  position:relative;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(1.6rem,3.4vw,3rem);
  background:linear-gradient(160deg,#FFF7F1 0%,#FBEADF 58%,#F5DCCB 100%);
  border:1px solid rgba(23,24,28,.05);
}
.orb::before{ /* 内側の細いリング: 太陽の輪 */
  content:"";position:absolute;inset:5.5%;border-radius:50%;
  border:1px solid rgba(217,118,92,.3);pointer-events:none;
}
.orb-n{margin:0 0 .8rem;font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.22em;color:var(--glow)}
.orb h3{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;letter-spacing:.04em;margin-bottom:.6rem}
.orb p{margin:0;max-width:19em;font-size:.84rem;line-height:1.9;color:var(--body)}
.orb.is-cool{background:linear-gradient(160deg,#F7F7F5 0%,#EEEFF4 60%,#E4E6F0 100%)}
.orb.is-cool::before{border-color:rgba(36,56,166,.18)}

/* ---------- solution cards (Paysafe: アイコンタイル + 見出し + 本文) ---------- */
.sol-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.3rem);margin-top:clamp(2rem,4vw,3rem);
}
.sol{
  padding:clamp(1.4rem,2.2vw,1.9rem);border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.sol:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(23,24,28,.35)}
.sol-ic{
  width:44px;height:44px;border-radius:12px;margin-bottom:1.1rem;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--sun-1),var(--sun-2));
  font-family:"Gotham","Montserrat",sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.08em;
}
.sol h3{font-size:1rem;letter-spacing:.04em;line-height:1.55;margin-bottom:.5rem}
.sol p{margin:0;font-size:.84rem;line-height:1.9;color:var(--body)}

/* ---------- steps (流れ: ○ > ○ > ○) ---------- */
.steps{
  list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);
}
.step{position:relative}
.step-dot{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--sun-1),var(--sun-2));
  font-family:"Gotham","Montserrat",sans-serif;font-weight:400;font-size:1.05rem;
  box-shadow:0 10px 24px -14px rgba(217,118,92,.9);
}
.step::before{ /* 次の丸へ伸びる線 */
  content:"";position:absolute;left:54px;right:calc(-1 * clamp(.8rem,1.6vw,1.4rem));top:27px;height:1px;
  background:var(--line-2);
}
.step:last-child::before{display:none}
.step h3{margin-top:1.1rem;font-size:.95rem;letter-spacing:.04em}
.step p{margin:.4rem 0 0;font-size:.8rem;line-height:1.85;color:var(--body)}

/* ---------- case / interview cards: TOP のニュースカードをグリッドに ---------- */
.case-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);
}
.case-grid .nw-card{flex:none;width:auto}
.iv-slider{margin-top:clamp(2rem,4vw,3rem)}
.case-note{margin:1.2rem 0 0;font-size:.8rem;color:var(--faint)}

/* ---------- logo strip (導入企業ロゴ: 共通カンバスで光学サイズを揃える) ---------- */
.logos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(2.4rem,4.2vw,3.6rem) clamp(1.2rem,2.2vw,2rem);
  margin-top:clamp(2.8rem,4.6vw,4rem);align-items:center;
}
.logos li{display:grid;place-items:center}
.logos img{
  width:100%;height:auto;aspect-ratio:600/150;object-fit:contain;display:block;
  opacity:.92;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.logos li:hover img{opacity:1;transform:translateY(-2px)}
.logos-note{margin:clamp(2.2rem,3.4vw,3rem) 0 0;font-size:.78rem;color:var(--faint)}

/* ---------- faq (details アコーディオン) ---------- */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  padding:1.3rem 0;font-size:1rem;font-weight:700;letter-spacing:.03em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font-family:"Gotham","Montserrat",sans-serif;font-weight:400;font-size:.95rem;color:var(--glow)}
.tg{
  position:relative;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);flex:0 0 auto;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.tg::before,.tg::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--ink);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),background .3s var(--ease);
}
.tg::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .tg{background:var(--ink);border-color:var(--ink)}
details[open] .tg::before,details[open] .tg::after{background:#fff}
details[open] .tg::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 0 1.5rem calc(.95rem + 1.2rem + .6rem);font-size:.9rem;line-height:1.95;color:var(--body);max-width:44em}
.faq .a p{margin:0}
.faq-group{margin:2.2rem 0 .4rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--glow)}
.faq-group:first-child{margin-top:1.4rem}

/* ---------- whitepaper (2 カード) ---------- */
.wp-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);
}
.wp{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(1.2rem,2vw,1.8rem);align-items:center;
  padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:20px;
  background:linear-gradient(150deg,#F5F5F3 0%,#ECEDF3 60%,#E2E4EF 100%);
  border:1px solid rgba(23,24,28,.05);
}
.wp-cover{
  position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;
  background:linear-gradient(165deg,#141949 0%,#2438A6 52%,#D9765C 100%);
  box-shadow:0 18px 30px -18px rgba(20,25,73,.6);
}
.wp-cover::after{
  content:"PDF";position:absolute;left:10px;bottom:8px;
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.2em;color:rgba(255,255,255,.75);
}
.wp h3{font-size:1rem;line-height:1.55;letter-spacing:.03em;margin-bottom:.45rem}
.wp p{margin:0 0 .9rem;font-size:.82rem;line-height:1.85;color:var(--body)}

/* ---------- tag (Teamway のドット付きピル) ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.36em .9em;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:.72rem;font-weight:500;letter-spacing:.06em;color:var(--graphite);white-space:nowrap;
}
.tag::before{content:"";width:.5em;height:.5em;border-radius:50%;background:linear-gradient(90deg,#eb745a,#e4bf93)}
.tag.is-muted{color:var(--faint)}
.tag.is-muted::before{background:var(--line-2)}

/* ---------- recruit ---------- */
.rc-photo{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#EAE7E3;box-shadow:0 30px 60px -40px rgba(23,24,28,.5)}
.rc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.rc-grid.is-rev{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.msg-photo{border-radius:20px;overflow:hidden;aspect-ratio:3/4;max-width:360px;background:#EAE7E3}
.msg-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.msg-name{margin:1.2rem 0 0;font-size:.85rem;color:var(--graphite)}
.msg-name strong{display:block;font-size:1.05rem;color:var(--ink);letter-spacing:.06em;margin-top:.15rem}
.members{overflow:hidden}
.members .nw-bleed{margin-top:clamp(2rem,4vw,3rem)}
.members .cr-slider-wrap{position:relative}

.positions{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.pos{border-bottom:1px solid var(--line)}
.pos summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center;
  padding:1.4rem 0;
}
.pos summary::-webkit-details-marker{display:none}
.pos-title{font-size:1.08rem;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.pos-title small{display:block;margin-top:.25rem;font-size:.78rem;font-weight:400;color:var(--faint);letter-spacing:.04em}
.pos-body{padding:0 0 1.8rem;max-width:56em}
.pos-dl{display:grid;grid-template-columns:130px 1fr;gap:.7rem 1.6rem;margin:0}
.pos-dl dt{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.06em;padding-top:.15em}
.pos-dl dd{margin:0;font-size:.9rem;line-height:1.9;color:var(--body)}
.pos-dl dd ul li+li{margin-top:.25em}

.apply{text-align:center;padding-top:0}
.apply .btn{font-size:1rem;padding:1.05em 2.4em}
.apply-note{margin:1.4rem 0 0;font-size:.85rem;color:var(--body)}
.ext-link{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--ink);padding-bottom:.25em;border-bottom:1px solid var(--ink);transition:.3s var(--ease)}
.ext-link:hover{color:var(--glow);border-color:var(--glow)}


/* ---------- sun list (参考: "Problem" スライド — 左に項目、右に昇る太陽) ---------- */
.sun-wrap{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem);
}
.sun-list{position:relative;z-index:1;display:flex;flex-direction:column}
.sun-item{position:relative;padding:clamp(1.3rem,2.2vw,1.8rem) 0;border-top:1px solid var(--line)}
.sun-item:last-child{border-bottom:1px solid var(--line)}
/* 太陽へ伸びる細い線と先端の点 */
.sun-item::after{
  content:"";position:absolute;left:100%;top:calc(clamp(1.3rem,2.2vw,1.8rem) + .9em);
  width:calc(clamp(2rem,5vw,5rem) + 14%);height:1px;
  background:linear-gradient(90deg,var(--line-2) 0%,rgba(217,118,92,.75) 100%);pointer-events:none;
}
.sun-item::before{
  content:"";position:absolute;left:calc(100% + clamp(2rem,5vw,5rem) + 14%);top:calc(clamp(1.3rem,2.2vw,1.8rem) + .9em - 3px);
  width:7px;height:7px;border-radius:50%;background:var(--sun-1);pointer-events:none;
  box-shadow:0 0 0 4px rgba(217,118,92,.18);
}
.sun-item .sun-fig{
  margin:0;font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:400;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sun-item .sun-fig.is-ja{font-family:"Noto Sans JP",sans-serif;font-weight:500;letter-spacing:.02em}
.sun-item .sun-fig .u{font-size:.46em;font-weight:700;color:var(--glow);margin-left:.12em;letter-spacing:.04em}
.sun-item .sun-fig.is-idx{color:var(--sun-1);opacity:.5}
.sun-item h3{margin:.6rem 0 .35rem;font-size:1rem;letter-spacing:.04em;line-height:1.5}
.sun-item p{margin:0;max-width:30em;font-size:.84rem;line-height:1.85;color:var(--body)}
.sun-tag{
  display:inline-block;margin-top:.8rem;padding:.32em .7em;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.14em;color:var(--faint);
}
.sun-art{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin-inline:auto}
.sun-glow{ /* ぼかした熱 */
  position:absolute;left:50%;top:52%;width:66%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(228,120,80,.8) 0%,rgba(238,150,110,.5) 38%,rgba(245,190,160,.18) 60%,transparent 72%);
  filter:blur(36px);
  animation:sunBreath 9s ease-in-out infinite alternate;
}
@keyframes sunBreath{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-52%) scale(1.06)}}
.sun-art svg{position:relative;z-index:1;width:100%;height:100%;display:block;overflow:visible}
.sun-art .ticks line{stroke:url(#sunTick)}
.sun-art .arc{fill:none;stroke:var(--sun-1);stroke-width:1}
@media (prefers-reduced-motion:reduce){.sun-glow{animation:none}}
@media (max-width:900px){
  .sun-wrap{grid-template-columns:1fr;gap:1.2rem}
  .sun-art{max-width:320px;order:-1}
  .sun-item::after,.sun-item::before{display:none}
}


/* ---------- sun の意味レイヤー (ホバーした項目に合わせて図が変わる) ---------- */
.sun-art .sl{opacity:0;transition:opacity .45s var(--ease)}
.sun-art .sl text{font-family:"Noto Sans JP","Hiragino Sans",sans-serif}
.sun-art .sl .mono{font-family:"DM Mono",ui-monospace,monospace;letter-spacing:.24em;fill:var(--faint)}
.sun-art .sl .num{font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:400;fill:var(--ink)}
.sun-art.is-idle .sl-biz{opacity:.5}
.sun-art.is-biz .sl-biz,.sun-art.is-office .sl-office,.sun-art.is-team .sl-team{opacity:1}
.sun-art.is-office .ticks,.sun-art.is-team .ticks{opacity:.55}

/* ---------- カーソルに追従して浮かぶ写真 ---------- */
.cursor-img{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  width:clamp(220px,22vw,320px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.86) rotate(-3deg);
  transition:opacity .35s var(--ease),transform .55s var(--ease);
  box-shadow:0 30px 60px -24px rgba(23,24,28,.5);will-change:transform,left,top;
}
.cursor-img.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.cursor-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:none),(pointer:coarse),(max-width:900px){.cursor-img{display:none}}


/* ---------- SP: 太陽を上に固定し、スクロールで層と写真が切り替わる ---------- */
.sun-photo{display:none}
@media (max-width:900px){
  .sun-wrap{gap:.4rem}
  .sun-art{
    position:sticky;top:68px;z-index:3;align-self:start;
    max-width:none;width:100%;  /* 全幅にして、下を通る項目のテキストが脇から透けないようにする */
    background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 90%,rgba(247,247,246,0) 100%);
  }
  .sun-art svg{width:min(100%,320px);height:auto;margin:0 auto}
  .sun-glow{width:58%}
  .sun-photo{
    display:block;position:absolute;left:50%;bottom:2%;z-index:2;
    width:56%;aspect-ratio:4/3;transform:translateX(-50%);
    border-radius:12px;overflow:hidden;background:#EAE7E3;
    box-shadow:0 22px 40px -22px rgba(23,24,28,.5);
  }
  .sun-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
  .sun-art.is-idle .sp-biz,.sun-art.is-biz .sp-biz,.sun-art.is-office .sp-office,.sun-art.is-team .sp-team{opacity:1}
  /* 写真と重なる地平線下のラベルは SP では出さない */
  .sun-art .sl-office text,.sun-art .sl-team text:not(.num){display:none}
  .sun-art.is-idle .sl-biz{opacity:.7}
  .sun-list{padding-top:.4rem}
  .sun-item{transition:opacity .4s var(--ease)}
  .sun-list.has-active .sun-item:not(.is-active){opacity:.4}
}


/* ============================================================
   サービスページ (1枚に3サービス)
   ============================================================ */
/* ---------- ヒーロー内のロゴ列 ---------- */
.ph-logos{display:flex;justify-content:center;gap:clamp(1.2rem,3vw,2.6rem);margin-top:clamp(1.8rem,3vw,2.6rem);flex-wrap:wrap}
.ph-logos a{display:block;width:clamp(120px,15vw,190px);opacity:.92;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.ph-logos a:hover{opacity:1;transform:translateY(-3px)}
.ph-logos img{width:100%;height:auto;display:block}

/* ---------- サブナビ (3サービスへジャンプ、上部に固定) ---------- */
.svc-nav{position:sticky;top:82px;z-index:30;background:rgba(247,247,246,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.svc-nav ul{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.svc-nav ul::-webkit-scrollbar{display:none}
.svc-nav a{
  display:flex;align-items:center;gap:.7em;padding:1.15rem 1.6rem 1.15rem 0;margin-right:1.8rem;
  font-size:.92rem;font-weight:700;letter-spacing:.06em;color:var(--faint);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.svc-nav a img{width:22px;height:22px;flex:0 0 auto;opacity:.75;transition:opacity .3s var(--ease)}
.svc-nav a:hover img,.svc-nav a.is-active img{opacity:1}
.svc-nav a:hover,.svc-nav a.is-active{color:var(--ink);border-color:var(--glow)}

/* ---------- 各サービスのブロック ---------- */
.svc{padding-block:clamp(100px,13vw,170px);scroll-margin-top:150px}
.svc + .svc{border-top:1px solid var(--line)}
.svc-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.4rem,6vw,6rem);align-items:end}
.svc-logo{width:min(100%,300px);height:auto;display:block}
.svc-title{margin:1rem 0 0;font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:700;letter-spacing:.06em;color:var(--ink)}
.svc-head .st-big{margin:0 0 1rem}
.svc-lead{margin:0;font-size:.95rem;line-height:2.05;color:var(--body);max-width:36em}
.svc-block{margin-top:clamp(5rem,9vw,8rem)}
.svc-label{
  display:flex;align-items:center;gap:.8em;margin:0 0 clamp(2rem,3.4vw,2.8rem);
  font-size:.82rem;font-weight:700;letter-spacing:.12em;color:var(--glow);
}
.svc-label::before{content:"";width:22px;height:1px;background:var(--glow);opacity:.7}
/* ---------- こんな課題に: 夜の紺の面 (白文字・淡い番号) ---------- */
.iss-panel{
  position:relative;overflow:hidden;border-radius:24px;
  padding:clamp(2.4rem,4vw,3.6rem) clamp(1.8rem,3.4vw,3.2rem);
  background:
    radial-gradient(60% 50% at 82% 8%,rgba(226,148,114,.28) 0%,rgba(226,148,114,0) 60%),
    radial-gradient(50% 60% at 8% 100%,rgba(64,58,140,.5) 0%,rgba(64,58,140,0) 60%),
    linear-gradient(160deg,#0B1240 0%,#131C55 48%,#1B2A78 100%);
  color:#fff;
}
.iss-panel::after{ /* 粒子 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='ip'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ip)' opacity='.7'/%3E%3C/svg%3E");
}
.iss-panel > *{position:relative;z-index:1}
.iss-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3.4vw,3rem);list-style:none;padding:0;margin:0}
.iss-row li{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.iss-n{display:block;font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;color:#FFD9AE;opacity:.75}
.iss-row h3{margin:1rem 0 .6rem;font-size:1.04rem;letter-spacing:.04em;line-height:1.55;color:#fff}
.iss-row p{margin:0;font-size:.86rem;line-height:1.95;color:rgba(230,234,250,.82)}

/* ---------- ご支援の流れ: 丸をカードの上に浮かせ、線は丸の中心だけを通す ---------- */
.svc .steps{position:relative;margin-top:0;gap:clamp(.9rem,1.6vw,1.3rem);padding-top:58px}
.svc .step{
  position:relative;padding:clamp(1.6rem,2.2vw,2rem) clamp(1.1rem,1.6vw,1.4rem) clamp(1.5rem,2vw,1.8rem);
  border-radius:18px;background:var(--surface);border:1px solid rgba(23,24,28,.05);
  box-shadow:0 22px 40px -32px rgba(23,24,28,.25);text-align:center;
}
.svc .step::before{ /* 丸からカードへ落ちる短い縦線 */
  content:"";position:absolute;left:50%;top:-28px;width:1px;height:28px;
  background:linear-gradient(180deg,var(--sun-1),rgba(217,118,92,.25));right:auto;
}
.svc .step-dot{
  position:absolute;left:50%;top:-58px;transform:translateX(-50%);width:60px;height:60px;
  box-shadow:0 0 0 6px var(--paper),0 12px 26px -12px rgba(217,118,92,.9);
}
.svc .step h3{margin:0 0 .5rem;font-size:.98rem}
.svc .step p{font-size:.8rem;line-height:1.85}

/* サービス内容の波形 (参考の流れる色面) */
.sol-wave{position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.sol-wave.w1{left:-38%;top:-42%;width:150%;aspect-ratio:1;background:rgba(255,226,200,.32);transform:rotate(-14deg);border-radius:52% 48% 46% 54%/50% 44% 56% 50%}
.sol-wave.w2{right:-46%;bottom:-44%;width:135%;aspect-ratio:1;background:rgba(120,40,18,.34);border-radius:48% 52% 45% 55%/55% 42% 58% 45%}
.sol-wave.w3{right:-30%;top:-52%;width:92%;aspect-ratio:1;background:rgba(255,205,170,.18);border-radius:50%}

@media (max-width:900px){
  .iss-panel{padding:1.8rem 1.3rem}
  .svc .steps{padding-top:0}
  .svc .step::before{display:none}
  .svc .step{display:block;text-align:left;padding:1.4rem 1.2rem 1.4rem 5.4rem}
  .svc .step-dot{left:1.2rem;top:1.3rem;transform:none;width:52px;height:52px;box-shadow:none}
  .svc .step h3{margin-top:0}
}

/* サービス内容: 参考 (流れる色面のグラデーションカード + 白文字 + 白いピル) */
.sol-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.4rem);list-style:none;padding:0;margin:0}
.sol-row li{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:320px;border-radius:22px;
  padding:clamp(2rem,3vw,2.6rem) clamp(1.4rem,2vw,1.8rem) clamp(2.2rem,3vw,2.8rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;
  background:linear-gradient(160deg,#F7A472 0%,#EE8656 46%,#DE6C42 100%);
  box-shadow:0 34px 56px -34px rgba(190,85,48,.6);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.sol-row li:nth-child(2){background:linear-gradient(160deg,#F49868 0%,#E5764C 50%,#CC5B36 100%)}
.sol-row li:nth-child(3){background:linear-gradient(160deg,#F08C5E 0%,#DB6A44 50%,#B54D2E 100%)}
.sol-row li:nth-child(4){background:linear-gradient(160deg,#EA7E52 0%,#CD5E3C 50%,#963F25 100%)}
.sol-row li:hover{transform:translateY(-5px);box-shadow:0 44px 70px -36px rgba(190,85,48,.7)}
.sol-row li::after{ /* 粒子 */
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='sg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sg)' opacity='.6'/%3E%3C/svg%3E") 0 0/220px 220px;
}
.sol-row li > :not(.sol-wave){position:relative;z-index:1}
.sol-n{margin:0 0 1.6rem;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.26em;color:rgba(255,255,255,.78)}
.sol-row h3{margin:0 0 .9rem;font-size:1.12rem;letter-spacing:.05em;line-height:1.55;color:#fff}
.sol-row p{margin:0;font-size:.84rem;line-height:1.95;color:rgba(255,247,240,.92)}

.svc-cta{margin-top:clamp(3.4rem,6vw,5rem)}
.svc-cta .cp-link-label{color:var(--ink)}
.svc-cta .cp-arrow{background:transparent;border-color:var(--line-2);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.svc-cta:hover .cp-link-label{color:var(--glow)}
.svc-cta:hover .cp-arrow{background:var(--glow);border-color:var(--glow);color:#fff}
/* ---------- 概要: 3つの円が重なるベン図 (キャリア・組織・テクノロジーは人の熱量を中心に重なる) ---------- */
.venn{position:relative;max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0}
.venn-glow{
  position:absolute;left:50%;top:54%;width:36%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(228,120,80,.62) 0%,rgba(238,150,110,.32) 38%,rgba(245,190,160,.1) 60%,transparent 72%);
  filter:blur(30px);animation:sunBreath 9s ease-in-out infinite alternate;
}
.venn svg{position:relative;z-index:1;width:100%;height:auto;display:block;overflow:visible}
.venn circle.v{fill:rgba(217,118,92,0);stroke:var(--sun-1);stroke-opacity:.5;stroke-width:1.2;transition:fill .5s var(--ease),stroke-opacity .5s var(--ease)}
.venn.is-career .v-career,.venn.is-consulting .v-consulting,.venn.is-ai .v-ai{fill:rgba(217,118,92,.09);stroke-opacity:1}
.venn .vc{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:13px;fill:var(--ink);letter-spacing:.06em}
.venn .vm{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.24em;fill:var(--faint)}
.venn .vlogo{transition:opacity .4s var(--ease)}
/* ---------- 概要カード (参考: 白カード・中央にロゴ・右上に↗・下部に分類/一文/説明) ---------- */
.ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem);margin-top:clamp(3.4rem,6vw,5rem);list-style:none;padding:0}
.ov-card{
  position:relative;display:flex;flex-direction:column;min-height:440px;
  padding:clamp(1.6rem,2.6vw,2.2rem);border-radius:22px;
  background:var(--surface);border:1px solid rgba(23,24,28,.05);
  box-shadow:0 24px 44px -34px rgba(23,24,28,.28);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .4s var(--ease);
}
.ov-card:hover{transform:translateY(-4px);box-shadow:0 36px 60px -34px rgba(23,24,28,.36)}
.ov-arrow{
  position:absolute;right:1.3rem;top:1.3rem;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);font-size:.78rem;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.ov-card:hover .ov-arrow{background:var(--glow);border-color:var(--glow);color:#fff}
.ov-mark{flex:1;display:grid;place-items:center;padding:2.6rem 0 2.2rem}
.ov-mark img{width:min(72%,230px);height:auto;display:block}
.ov-cat{margin:0 0 .45rem;font-size:.74rem;letter-spacing:.06em;color:var(--faint)}
.ov-name{margin:0 0 .6rem;font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--ink)}
.ov-desc{margin:0;font-size:.84rem;line-height:1.85;color:var(--body)}
.ov-grid.has-hot .ov-card:not(.is-hot){opacity:.55}
@media (max-width:900px){
  .ov-grid{grid-template-columns:1fr;gap:.9rem}
  .ov-card{min-height:0}
  .ov-mark{padding:1.8rem 0 1.4rem}
}
@media (max-width:900px){
  .venn{max-width:520px}
}

/* 概要 (3つの事業): 太陽リストの項目にロゴ */
.shared{border-top:1px solid var(--line)}

@media (max-width:1100px){.sol-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .svc-head{grid-template-columns:1fr;gap:1.4rem}
  .iss-row{grid-template-columns:1fr;gap:1rem}
  .svc-nav a{padding:.9rem 1.1rem .9rem 0;margin-right:.9rem;font-size:.86rem}
  .venn .vlogo{display:none}
  .venn .vc{font-size:30px}
}
@media (max-width:768px){.svc-nav{top:68px}}
@media (max-width:640px){.sol-row{grid-template-columns:1fr;gap:1rem}.sol-row li{min-height:0}}


/* ---------- About: Mission/Vision の背景に浮かぶ球体とリング (参考: glassmorphism の 3D オブジェクト) ---------- */
.mv-wrap{position:relative;overflow:hidden}
.mv-wrap > section{position:relative;z-index:1}
.mv-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.mv-deco::after{ /* FV と同じ粒子 */
  content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='mg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23mg)' opacity='.55'/%3E%3C/svg%3E");
}
.mv-deco .fl{position:absolute;inset:0;will-change:transform,opacity;opacity:0;transform:translate3d(0,90px,0);transition:none}
.mv-deco .orb,.mv-deco .ring{position:absolute;border-radius:50%;will-change:transform;mix-blend-mode:multiply}
/* 球体: 左上からの光と、右下の落ち影 */
.mv-deco .orb{
  /* TOP の FV と同じ、ぼかした光としての球 */
  background:
    radial-gradient(circle at 34% 30%,rgba(255,240,224,.9) 0%,rgba(255,224,200,.55) 22%,rgba(246,160,116,.6) 46%,rgba(217,118,92,.55) 68%,rgba(180,80,50,.35) 86%,rgba(150,60,30,0) 100%);
  box-shadow:none;
}
.mv-deco .o1{width:clamp(260px,30vw,440px);aspect-ratio:1;right:-8%;top:2%;opacity:.85;filter:blur(14px);animation:mvFloat 16s ease-in-out infinite alternate}
.mv-deco .o2{width:clamp(200px,22vw,320px);aspect-ratio:1;left:-8%;bottom:-8%;opacity:.6;filter:blur(26px);animation:mvFloat 20s ease-in-out infinite alternate-reverse}
.mv-deco .o3{width:clamp(64px,8vw,110px);aspect-ratio:1;right:14%;bottom:40%;opacity:.9;filter:blur(3px);animation:mvFloat 11s ease-in-out infinite alternate}
.mv-deco .o4{width:clamp(36px,4vw,56px);aspect-ratio:1;left:78%;top:8%;opacity:.8;filter:blur(5px);animation:mvFloat 9s ease-in-out infinite alternate-reverse}
/* リング (トーラス): 円錐グラデーションをリング状にマスク、遠近で楕円に */
.mv-deco .ring{
  aspect-ratio:1;
  background:conic-gradient(from 200deg,#FFD6B8 0%,#F5A272 22%,#D9765C 48%,#B85838 64%,#F2B48F 84%,#FFD6B8 100%);
  -webkit-mask:radial-gradient(circle,transparent 52%,rgba(0,0,0,.6) 56%,#000 62%,#000 96%,transparent 100%);
  mask:radial-gradient(circle,transparent 52%,rgba(0,0,0,.6) 56%,#000 62%,#000 96%,transparent 100%);
  box-shadow:none;
}
.mv-deco .r1{width:clamp(180px,22vw,300px);left:72%;top:52%;opacity:.8;filter:blur(4px);transform:perspective(700px) rotateX(58deg) rotateZ(-18deg);animation:mvRing 18s ease-in-out infinite alternate}
.mv-deco .r2{width:clamp(120px,15vw,200px);right:6%;bottom:4%;opacity:.6;filter:blur(10px);transform:perspective(700px) rotateX(62deg) rotateZ(24deg);animation:mvRing 22s ease-in-out infinite alternate-reverse}
.mv-deco .r3{width:clamp(90px,10vw,140px);left:-3%;top:44%;opacity:.45;filter:blur(16px);transform:perspective(700px) rotateX(55deg) rotateZ(10deg);animation:mvRing 15s ease-in-out infinite alternate}
@keyframes mvFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,-22px,0)}}
@keyframes mvRing{from{transform:perspective(700px) rotateX(58deg) rotateZ(-18deg) translateY(0)}to{transform:perspective(700px) rotateX(58deg) rotateZ(-8deg) translateY(-18px)}}
.mv-deco .r2{animation-name:mvRing2}
@keyframes mvRing2{from{transform:perspective(700px) rotateX(62deg) rotateZ(24deg) translateY(0)}to{transform:perspective(700px) rotateX(62deg) rotateZ(34deg) translateY(-14px)}}
.mv-deco .r3{animation-name:mvRing3}
@keyframes mvRing3{from{transform:perspective(700px) rotateX(55deg) rotateZ(10deg) translateY(0)}to{transform:perspective(700px) rotateX(55deg) rotateZ(2deg) translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.mv-deco .orb,.mv-deco .ring{animation:none}.mv-deco .fl{opacity:1!important;transform:none!important}}
@media (max-width:900px){
  /* SP は文字が全幅なので、オブジェクトは縁に逃がして薄く */
  .mv-deco .o1{right:-38%;top:-4%;width:230px;opacity:.5;filter:blur(3px)}
  .mv-deco .o2{left:-30%;bottom:-10%;width:190px;opacity:.4}
  .mv-deco .o3{right:-6%;top:44%;bottom:auto;width:44px;opacity:.85}
  .mv-deco .o4{display:none}
  .mv-deco .r1{left:auto;right:-34%;top:38%;width:180px;opacity:.5;filter:blur(2px)}
  .mv-deco .r2{right:auto;left:-26%;bottom:26%;width:130px;opacity:.45}
  .mv-deco .r3{display:none}
}


/* ============================================================
   サービス個別ページ v2: ブランド色 × 爽やか × 図解
   ============================================================ */
.page-career{--svc:#FC4015;--svc-2:#FE8110;--svc-soft:#FFF1E5;--svc-tint:#FFE1C6;--svc-ink:#B52E0F}
.page-consulting{--svc:#339029;--svc-2:#74CC40;--svc-soft:#F0F9EA;--svc-tint:#DEF3D1;--svc-ink:#25681E}
.page-ai{--svc:#3E61CE;--svc-2:#4577F7;--svc-soft:#EBF0FE;--svc-tint:#D2DEFD;--svc-ink:#2D4694}
.page-service .sec-en{color:var(--svc)}
.page-service .svc-label{color:var(--svc)}
.page-service .svc-label::before{background:var(--svc)}
.page-service .page-end .sec-en{color:#F0B383}

/* ---------- 明るいヒーロー: 太陽が背景 ---------- */
.sh{position:relative;overflow:hidden;min-height:min(78svh,760px);display:flex;align-items:center;padding:clamp(150px,18vw,190px) 0 clamp(72px,9vw,120px);
  background:linear-gradient(180deg,var(--svc-soft) 0%,var(--paper) 100%)}
.sh .blob{position:absolute;pointer-events:none;border-radius:42% 58% 55% 45%/50% 40% 60% 50%;
  background:radial-gradient(circle at 36% 34%,var(--svc-2) 0%,var(--svc) 48%,transparent 72%);
  filter:blur(46px);opacity:.42;animation:blobDrift 16s ease-in-out infinite alternate}
.sh .b1{right:-14%;top:-22%;width:min(72vw,820px);aspect-ratio:1;opacity:.2}
.sh .b2{left:-16%;bottom:-40%;width:min(48vw,520px);aspect-ratio:1;opacity:.22;animation-direction:alternate-reverse}
@keyframes blobDrift{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(-4%,5%) rotate(9deg) scale(1.07)}}
.sh::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(140px,18vw,240px);pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(247,247,246,0) 0%,var(--paper) 100%)}
.sh::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hg)' opacity='.55'/%3E%3C/svg%3E")}
.sh-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.sh-copy{max-width:36em}
.sh-logo img{width:min(100%,300px);height:auto;display:block}
.sh-label{margin:0 0 1.2rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--svc)}
.sh-title{margin:1.4rem 0 1rem;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;line-height:1.4;letter-spacing:.04em;color:var(--ink)}
.sh-lead{margin:0 0 1.8rem;max-width:32em;font-size:.95rem;line-height:2;color:var(--body)}
.sh-cta{display:inline-flex;align-items:center;gap:.9em;padding:.55em .55em .55em 1.6em;border-radius:999px;
  background:var(--svc);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.06em;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--svc) 70%,transparent);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sh-cta .cp-arrow{width:42px;height:42px;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);backdrop-filter:none}
.sh-cta:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px color-mix(in srgb,var(--svc) 80%,transparent)}
/* ---------- ヒーロー: ロゴタイプ ｜ 球 ｜ ロゴタイプ (参考: GPT-6 Astra の FV — 左右に大きな語、中央にモチーフ) ---------- */
.sh.sh-split{min-height:100svh;display:flex;align-items:center;padding:clamp(100px,12vw,130px) 0 clamp(48px,6vw,80px)}
.sh.sh-split>.container{flex:0 0 auto;width:100%;max-width:none;padding-inline:clamp(1.25rem,3.2vw,3.5rem)}
.sh-row{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(1.4rem,3vw,3rem)}
.sh-side-l{justify-self:start}
.sh-side-r{justify-self:end;text-align:right}
.sh-side-l .sh-logo .lt{display:block;height:clamp(34px,4.4vw,62px);width:auto;max-width:100%;fill:var(--ink)}
.sh-side-r .sh-title{margin:0}
/* リードと CTA は球の下に中央揃え */
.sh-under{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(1.6rem,3.2vw,2.8rem)}
.sh-under>*{max-width:min(100%,var(--maxw))}
.sh-under .sh-lead{margin:0 0 1.6rem;max-width:34em}
/* 中央の球: サービスロゴのマークそのものを、粒子感のあるグラデーション球として拡大・アニメーション (参考: Vibrant Abstract Gradient Blends) */
.sh-orb-wrap{position:relative;width:min(46vh,34vw,500px);aspect-ratio:1;justify-self:center}
.sun{position:absolute;inset:0;animation:sunIn 1s cubic-bezier(.2,.7,.2,1) both,orbBreath 10s 1s ease-in-out infinite alternate}
.sun svg{width:100%;height:100%;display:block;overflow:visible}
/* 登場: 内側から熱が湧き出る — 外円は薄く現れ、中・明・芯が中心から順に膨らむ */
.sun .base{animation:baseIn 1.8s ease-out both}
.sun .ly{transform-box:fill-box;transform-origin:center;will-change:transform}
.sun .ly-mid{animation:lyIn 1.5s .25s cubic-bezier(.2,.7,.2,1) both,lyMid 18s 1.75s ease-in-out infinite alternate}
.sun .ly-light{animation:lyIn 1.5s .45s cubic-bezier(.2,.7,.2,1) both,lyLight 14s 1.95s ease-in-out infinite alternate-reverse}
.sun .ly-core{animation:coreIn 1.7s .6s cubic-bezier(.2,.7,.2,1) both,lyCore 11s 2.3s ease-in-out infinite alternate}
/* 登場後: 静かな揺らぎ (芯の明るさがわずかに揺れる) */
.sun .core{animation:coreGlow 6.5s 2.3s ease-in-out infinite}
.sun .grain{mix-blend-mode:overlay;opacity:.55}
@keyframes sunIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes baseIn{from{opacity:.25}to{opacity:1}}
@keyframes lyIn{from{transform:scale(.25);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes coreIn{0%{transform:scale(.1);opacity:0}55%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes coreGlow{0%,100%{opacity:1}37%{opacity:.86}58%{opacity:.95}80%{opacity:.9}}
@keyframes lyMid{from{transform:rotate(0deg) translate(0,0)}to{transform:rotate(4deg) translate(-2%,2%)}}
@keyframes lyLight{from{transform:rotate(0deg) translate(0,0) scaleY(1)}50%{transform:rotate(-2.5deg) translate(1%,-2%) scaleY(1.04)}to{transform:rotate(-5deg) translate(2%,-1.5%) scaleY(1)}}
@keyframes lyCore{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-3%) scale(1.07)}}
.sun-halo{position:absolute;inset:-30%;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#fff 0%,var(--svc-2) 30%,color-mix(in srgb,var(--svc) 50%,transparent) 54%,transparent 70%);
  animation:haloIn 2s .5s ease-out both,orbBreath 14s 2.5s ease-in-out infinite alternate-reverse}
@keyframes haloIn{from{opacity:0;transform:scale(.6)}to{opacity:.45;transform:scale(1)}}
@keyframes orbBreath{from{transform:scale(1)}to{transform:scale(1.035)}}
/* 球の下: キャッチ・リード・CTA を中央揃え */
.sh .blob{display:none}
@media (max-width:900px){
  .sh.sh-split{min-height:0;padding-top:110px}
  .sh-row{grid-template-columns:1fr;gap:1.6rem;text-align:center;justify-items:center}
  .sh-side-l,.sh-side-r{justify-self:center;text-align:center}
  .sh-side-l .sh-logo .lt{height:clamp(30px,7.4vw,42px);margin-inline:auto}
  .sh-orb-wrap{width:min(62vw,320px)}
  .sh-under{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){.sun,.sun .ly,.sun .base,.sun .core,.sun-halo{animation:none}}
/* スクロールで熱が分散する (JS が --p を 0→1 で更新) */
.sun .dis{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
/* 直下 (課題) セクションの背景: About の Mission/Vision と同じ浮かぶ球体・リングをブランド色で */
.page-service .svc-issue{padding-bottom:clamp(40px,5vw,64px)}
.page-service .svc-cont{padding-top:clamp(40px,5vw,64px)}
.page-service .mv-deco .orb{background:radial-gradient(circle at 34% 30%,#fff 0%,color-mix(in srgb,var(--svc-2) 45%,#fff) 22%,var(--svc-2) 46%,var(--svc) 68%,color-mix(in srgb,var(--svc) 70%,#3a0c1a) 86%,transparent 100%)}
.page-service .mv-deco .ring{background:conic-gradient(from 200deg,color-mix(in srgb,var(--svc-2) 45%,#fff) 0%,var(--svc-2) 22%,var(--svc) 48%,color-mix(in srgb,var(--svc) 70%,#2a0c1a) 64%,var(--svc-2) 84%,color-mix(in srgb,var(--svc-2) 45%,#fff) 100%)}
.page-service .mv-deco .orb,.page-service .mv-deco .ring{mix-blend-mode:normal}
.page-service .mv-deco .o1{opacity:.7}.page-service .mv-deco .o2{opacity:.5}
.page-service .mv-deco::after{opacity:.25}

/* ---------- ピクトグラム付きカード (課題 / サービス内容) ---------- */
.pic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.4rem);list-style:none;padding:0;margin:0}
.pic-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pic{position:relative;overflow:hidden;border-radius:20px;padding:clamp(1.5rem,2.4vw,2rem);
  background:var(--svc-soft);border:1px solid color-mix(in srgb,var(--svc) 10%,transparent);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pic:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px color-mix(in srgb,var(--svc) 45%,transparent)}
.pic-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:#fff;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--svc) 50%,transparent)}
.pic-ic svg{width:26px;height:26px;fill:none;stroke:var(--svc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pic h3{margin:0 0 .5rem;font-size:1rem;letter-spacing:.04em;line-height:1.55}
.pic p{margin:0;font-size:.84rem;line-height:1.9;color:var(--body)}
.pic .deco{position:absolute;right:-18%;bottom:-30%;width:58%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--svc-2) 0%,transparent 68%);opacity:.32;filter:blur(6px)}
/* ---------- サービス内容カード: Teamway 型 (パステル色面 + 幾何学グラフィック) ---------- */
.pic-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.4rem)}
.pic.is-grad{
  background:linear-gradient(135deg,var(--svc-soft) 0%,var(--svc-tint) 100%);
  border:1px solid color-mix(in srgb,var(--svc) 8%,transparent);color:var(--ink);
  min-height:300px;padding:clamp(1.8rem,2.8vw,2.4rem);display:flex;flex-direction:column;
}
.pic.is-grad .pic-ic{background:#fff;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--svc) 50%,transparent);width:48px;height:48px;border-radius:14px}
.pic.is-grad .pic-ic svg{stroke:var(--svc);width:22px;height:22px}
.pic.is-grad h3{color:var(--ink);font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:.04em;margin:.2rem 0 .7rem;max-width:12em}
.pic.is-grad p{color:var(--body);max-width:17em;font-size:.86rem}
.pic.is-grad{padding-right:46%}
.pic.is-grad > *{position:relative;z-index:1}
.pic.is-grad .geo{position:absolute;z-index:0;right:-2%;top:50%;transform:translateY(-50%);width:42%;aspect-ratio:1;pointer-events:none}
.pic.is-grad .geo svg{width:100%;height:100%;display:block;overflow:visible}
.geo .s1{stop-color:var(--svc-2)}
.geo .s2{stop-color:var(--svc)}
.geo .s3{stop-color:#fff}
/* グラフカードも同じパステル面に */
.chart-card{background:linear-gradient(135deg,#fff 0%,var(--svc-soft) 100%);border:1px solid color-mix(in srgb,var(--svc) 8%,transparent)}
@media (max-width:640px){
  .pic.is-grad{min-height:0;padding-right:44%}
  .pic.is-grad .geo{width:52%;right:-8%}
}

/* ---------- グラフ (Vorking 型: 棒 / ドーナツ) ---------- */
.chart-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(2.4rem,4vw,3.4rem)}
.chart-card{border-radius:22px;padding:clamp(1.6rem,2.6vw,2.2rem)}
.chart-title{margin:0 0 1.4rem;font-size:.82rem;font-weight:700;letter-spacing:.1em;color:var(--faint)}
.bars{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:7.5em 1fr;gap:.9rem;align-items:center;font-size:.84rem;color:var(--ink);font-weight:700}
.bar{display:grid;gap:.35rem}
.bar i{display:block;height:12px;border-radius:999px;background:var(--svc-tint);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:999px;background:linear-gradient(90deg,var(--svc),var(--svc-2));
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.is-in .bar i::after,.chart-card.is-in .bar i::after{transform:scaleX(1)}
.bar i.lo::after{background:var(--line-2)}
.bar-key{display:flex;gap:1.2rem;margin-top:1.4rem;font-size:.72rem;color:var(--faint)}
.bar-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.45em;vertical-align:middle;background:var(--svc)}
.bar-key span.lo::before{background:var(--line-2)}
.donut{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.donut svg{width:170px;height:170px}
.donut .seg{fill:none;stroke-width:22;stroke-linecap:butt;transition:stroke-dasharray 1.1s var(--ease)}
.donut .legend{display:grid;gap:.6rem;font-size:.84rem;color:var(--ink);font-weight:700;list-style:none;padding:0;margin:0}
.donut .legend li{display:flex;align-items:center;gap:.6em}
.donut .legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.chart-copy .st-big{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.chart-copy p{font-size:.92rem;line-height:2;color:var(--body);max-width:36em}

/* ---------- 流れ: ステップにピクトグラム ---------- */
.page-service .step-dot{background:linear-gradient(135deg,var(--svc),var(--svc-2));box-shadow:0 0 0 6px var(--paper),0 12px 26px -12px color-mix(in srgb,var(--svc) 80%,transparent)}
.page-service .svc .step::before{background:linear-gradient(180deg,var(--svc),color-mix(in srgb,var(--svc) 25%,transparent))}
.step-ic{width:40px;height:40px;margin:0 auto .8rem;border-radius:12px;background:var(--svc-soft);display:grid;place-items:center}
.step-ic svg{width:20px;height:20px;fill:none;stroke:var(--svc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 導入事例カードのティントもブランド色に ---------- */
.page-service .nw-thumb.is-svc{background:linear-gradient(150deg,var(--svc-soft) 0%,var(--svc-tint) 55%,var(--svc-2) 100%)}
.page-service .nw-thumb.is-svc2{background:linear-gradient(150deg,var(--svc-2) 0%,var(--svc) 100%)}
.page-service .nw-thumb.is-svc3{background:linear-gradient(160deg,#F5F5F3 0%,var(--svc-tint) 100%)}


@media (max-width:900px){
  .sh{padding-top:120px}
  .sh-grid{grid-template-columns:1fr;gap:2rem}
  .pic-grid{grid-template-columns:1fr}
  .chart-wrap{grid-template-columns:1fr;gap:1.6rem}
  .donut{grid-template-columns:1fr;justify-items:center}
}
@media (max-width:700px){.pic-grid.is-4{grid-template-columns:1fr}}


/* 明るいヒーローのページ: ナビは最初から黒文字・スクリムなし */
.page-light .nav::before{opacity:0}
.page-light .nav-logo,.page-light .nav-menu .en{color:var(--ink)}
.page-light .nav-menu .ja{color:var(--graphite)}
.page-light .nav-burger span{background:var(--ink)}
.page-light .nav-menu a:hover .en{color:var(--svc,var(--ember))}
.page-service .svc{padding-top:clamp(56px,7vw,96px)}
.sh-title{text-wrap:pretty;word-break:auto-phrase;overflow-wrap:anywhere}

/* ---------- responsive (サービス / 採用) ---------- */
@media (max-width:1100px){
  .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .rc-grid,.rc-grid.is-rev{grid-template-columns:1fr;gap:1.6rem}
  .orb-grid{grid-template-columns:1fr;gap:.9rem}
  .orb{aspect-ratio:auto;border-radius:24px;padding:1.6rem 1.4rem;text-align:left;align-items:flex-start}
  .orb::before{inset:8px;border-radius:18px}
  .orb p{max-width:none}
  .steps{grid-template-columns:1fr;gap:1.4rem}
  .step{display:grid;grid-template-columns:54px 1fr;gap:0 1.1rem}
  .step-dot{grid-row:1/3}
  .step h3{margin-top:.6rem}
  .step::before{left:27px;right:auto;top:54px;bottom:-1.4rem;width:1px;height:auto}
  .case-grid{grid-template-columns:1fr 1fr}
  .wp-grid{grid-template-columns:1fr}
  .msg-photo{max-width:280px}
}
@media (max-width:640px){
  .sol-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pos-dl{grid-template-columns:1fr;gap:.2rem .8rem}
  .pos-dl dt{margin-top:.6rem}
  .faq summary{grid-template-columns:auto 1fr auto;font-size:.95rem}
  .faq .a{padding-left:0}
  .ph-cta{font-size:.84rem}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:1.4rem}
  .cc-grid{grid-template-columns:1fr}
  .wd-grid{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:768px){
  .pc-br{display:none}
  .ph{min-height:auto;padding:130px 0 110px}
  .num-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.2rem}
  .co-table > div{grid-template-columns:1fr;gap:.3rem;padding:1rem 0}
}

/* ---------- Mission / Vision: セクション全体を中央に置き、文章だけ左揃え ---------- */
.st.is-center .st-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.st.is-center .sec-head{text-align:center}
.st.is-center .st-big{max-width:26em;margin-inline:auto}
/* 本文は中央のブロックに収め、文字は左揃えのまま */
.st.is-center .st-body{max-width:40em;margin-inline:auto;text-align:left}
.st.is-center .st-body p{max-width:none}
@media (max-width:640px){
  .st.is-center .st-body{text-align:left}
}

/* ---------- FV のサブテキストを少し大きく ---------- */
.ph-sub{font-size:clamp(1.12rem,2vw,1.42rem);max-width:34em}

/* ---------- What We Do: ピクトグラムをサービスロゴ (マーク) に ---------- */
/* サービスロゴ (マーク + ロゴタイプ) は高さ基準で配置する */
.wd-icon.is-logo{width:auto;height:auto;margin-bottom:1.1rem;display:block}
.wd-icon.is-logo img{height:clamp(26px,2.4vw,34px);width:auto;max-width:100%;object-fit:contain;display:block}

/* ---------- About: Mission / Vision の背景を「流れる熱のグラデーション」に
   (参考: 暖色のにじみが大きく流れるビジュアル。赤血球状の球と輪は廃止) ---------- */
body:not(.page-service) .mv-deco .ring{display:none}
body:not(.page-service) .mv-deco .orb{
  border-radius:52% 48% 43% 57%/45% 52% 48% 55%;
  mix-blend-mode:normal;
  background:
    radial-gradient(60% 55% at 32% 30%, rgba(255,247,238,.95) 0%, rgba(255,226,198,.55) 38%, rgba(255,226,198,0) 70%),
    linear-gradient(128deg, #FFD9B0 0%, #F6A272 32%, #E2704F 58%, #C0654B 78%, rgba(160,72,56,0) 100%);
  animation:mvFlow 26s ease-in-out infinite alternate;
}
@keyframes mvFlow{
  0%  {border-radius:52% 48% 43% 57%/45% 52% 48% 55%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50% {border-radius:44% 56% 58% 42%/56% 44% 56% 44%;transform:translate3d(-3%,2%,0) rotate(6deg) scale(1.06)}
  100%{border-radius:58% 42% 50% 50%/48% 58% 42% 52%;transform:translate3d(2%,-2%,0) rotate(-4deg) scale(1.02)}
}
/* 大きく流し、輪郭が出ないよう強めにぼかす */
body:not(.page-service) .mv-deco .o1{width:clamp(420px,52vw,760px);right:-16%;top:-14%;filter:blur(64px);opacity:.62;animation-duration:26s}
body:not(.page-service) .mv-deco .o2{width:clamp(360px,44vw,640px);left:-18%;bottom:-20%;filter:blur(76px);opacity:.46;animation-duration:32s;animation-direction:alternate-reverse}
body:not(.page-service) .mv-deco .o3{width:clamp(220px,26vw,380px);right:16%;bottom:26%;filter:blur(48px);opacity:.4;animation-duration:21s}
body:not(.page-service) .mv-deco .o4{width:clamp(160px,18vw,260px);left:64%;top:4%;filter:blur(40px);opacity:.34;animation-duration:18s;animation-direction:alternate-reverse}
@media (prefers-reduced-motion:reduce){body:not(.page-service) .mv-deco .orb{animation:none}}

/* ============================================================
   ZOTH by the numbers — 図解 (暗い面 + 発光するグラフ)
   ============================================================ */
.num.is-dark{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,#1A1330 0%,#141949 38%,#10143A 72%,#0B0E28 100%);
  color:#E7EAF7;padding-block:clamp(72px,9vw,120px);
}
.nm-deco{position:absolute;inset:0;pointer-events:none}
.nm-flow{position:absolute;border-radius:52% 48% 43% 57%/45% 52% 48% 55%;filter:blur(80px);opacity:.42;
  background:linear-gradient(128deg,#FFD9B0 0%,#F6A272 34%,#E2704F 62%,rgba(192,101,75,0) 100%);
  animation:mvFlow 28s ease-in-out infinite alternate}
.nm-flow.f1{width:min(58vw,660px);aspect-ratio:1;right:-14%;top:-22%}
.nm-flow.f2{width:min(42vw,460px);aspect-ratio:1;left:-12%;bottom:-24%;opacity:.28;animation-duration:34s;animation-direction:alternate-reverse}
.num.is-dark .container{position:relative;z-index:1}
.num.is-dark .sec-en{color:#FFD9AE;text-shadow:0 2px 24px rgba(10,6,20,.5)}
.num.is-dark .sec-ja{color:rgba(255,248,240,.9)}
.num.is-dark .num-lead{color:#AAB2DC;max-width:40em;margin:1.4rem 0 clamp(2.4rem,4vw,3.4rem)}

.nm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem);align-items:stretch}
.nm-card{
  margin:0;padding:clamp(1.5rem,2.2vw,2rem);border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:1rem;
}
.nm-card.is-line{grid-column:span 2}
.nm-card figcaption{margin-top:auto;font-size:.88rem;font-weight:700;letter-spacing:.04em;color:#F3F3F1}
.nm-card figcaption span{display:block;margin-top:.4em;font-size:.72rem;font-weight:400;letter-spacing:.03em;color:#8891C4}

/* ドーナツ */
.nm-donut{position:relative;width:100%;max-width:210px;margin-inline:auto;aspect-ratio:1}
.nm-donut svg{width:100%;height:100%;display:block}
.nm-arc{transition:stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1)}
.is-in .nm-arc,.nm-card.is-in .nm-arc{stroke-dashoffset:95}   /* 82% */
.nm-donut-c{position:absolute;inset:0;display:grid;place-items:center;line-height:1}
.nm-donut-c .n{font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:700;color:#fff}
.nm-donut-c .u{font-size:.9rem;font-weight:700;color:#FFD9AE;margin-left:.15em}

/* 折れ線 */
.nm-line{width:100%;aspect-ratio:21/10}
.nm-line svg{width:100%;height:100%;display:block}
.nm-path{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 2.2s cubic-bezier(.22,.61,.36,1)}
.nm-card.is-in .nm-path{stroke-dashoffset:0}
.nm-area,.nm-dots{opacity:0;transition:opacity 1.2s var(--ease) .6s}
.nm-card.is-in .nm-area,.nm-card.is-in .nm-dots{opacity:1}
.nm-line-v{line-height:1}
.nm-line-v .n{font-size:clamp(2.2rem,3.6vw,3.1rem);font-weight:700;color:#fff}
.nm-line-v .u{font-size:.95rem;font-weight:700;color:#FFD9AE;margin-left:.2em}

/* 横棒 */
.nm-bars{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.nm-bars li{display:grid;gap:.45rem}
.nb-l{font-size:.74rem;letter-spacing:.04em;color:#AAB2DC}
.nb-t{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.nb-t i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#C0654B,#E2704F 46%,#FFD9AE);
  box-shadow:0 0 18px rgba(226,112,79,.8);
  transition:width 1.6s cubic-bezier(.22,.61,.36,1)}
.nm-card.is-in .nb-t i{width:var(--w)}
.nb-v{font-size:1.05rem;font-weight:700;color:#fff}
.nb-v .n{font-size:1.35rem}

/* 数字のみ */
.nm-card.is-fig{justify-content:center}
.nm-big{margin:0;line-height:1}
.nm-big .n{font-size:clamp(2.6rem,4.6vw,3.8rem);font-weight:700;
  background:linear-gradient(115deg,#FFD9AE,#E2704F);-webkit-background-clip:text;background-clip:text;color:transparent}
.nm-big .u{font-size:1rem;font-weight:700;color:#FFD9AE;margin-left:.2em}

@media (max-width:1000px){
  .nm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nm-card.is-line{grid-column:span 2}
}
@media (max-width:620px){
  .nm-grid{grid-template-columns:1fr}
  .nm-card.is-line{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){
  .nm-flow{animation:none}
  .nm-arc{stroke-dashoffset:95}.nm-path{stroke-dashoffset:0}.nm-area,.nm-dots{opacity:1}.nb-t i{width:var(--w)}
}

/* Original flat pictograms — isolated from logos, navigation and contact CTAs. */
.wj-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#FFD9AE;color:#D9765C;flex-shrink:0}
.wj-ic .zoth-picto{display:block;width:26px;height:26px}
.pic-ic .zoth-picto,.pic.is-grad .pic-ic .zoth-picto{display:block;width:30px;height:30px;stroke:none;fill:currentColor}
.step-ic .zoth-picto{display:block;width:20px;height:20px;stroke:none;fill:currentColor}
.wj-ic .zoth-picto{--icon-light:#FFD9AE;stroke:none;fill:currentColor}
.page-career .zoth-picto{--icon-light:#FEFEC8}
.page-consulting .zoth-picto{--icon-light:#E2FCC2}
.page-ai .zoth-picto{--icon-light:#D3DEFC}
#numbers .zoth-picto{--icon-primary:#D9765C;--icon-secondary:#EDB98E;--icon-light:#FFD9AE;--icon-ink:#FFD9AE;display:inline-block;width:36px;height:36px;flex:none;vertical-align:middle}
#numbers .nm-donut-c{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
#numbers .nm-donut-c .zoth-picto{width:30px;height:30px}
#numbers .nm-line-v .zoth-picto,#numbers .nm-big .zoth-picto{margin-right:12px}
#numbers .nb-l{display:flex;align-items:center;gap:8px}
#numbers .nb-l .zoth-picto{width:22px;height:22px}

/* Why join us: illustrated facts, revised against the user's infographic references. */
.page-recruit #features{background:#F6F3EE;scroll-margin-top:100px}
.page-recruit #features .sec-head{text-align:center;margin-bottom:48px}
.page-recruit #features .sec-en{font-size:clamp(1.9rem,3.6vw,3.2rem);color:#141949;letter-spacing:-.025em}
.page-recruit #features .sec-ja{margin-top:12px;color:#C0654B;font-size:.9rem;letter-spacing:.12em}
.page-recruit .wj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#E6DDD4;border:1px solid #E6DDD4;list-style:none;counter-reset:reason}
.page-recruit .wj-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 28px 32px;background:#FFFDFA;min-width:0;counter-increment:reason}
.page-recruit .wj-item::before{content:none} /* 左上の番号 (01, 02…) は表示しない */
.page-recruit .wj-ic{width:144px;height:144px;display:grid;place-items:center;background:none;border-radius:0;margin:0 0 20px;flex:none}
.page-recruit .wj-ic .zoth-picto{width:144px;height:144px;--icon-primary:#D9765C;--icon-secondary:#EDB98E;--icon-light:#FFD9AE;--icon-ink:#141949;--icon-deep:#C0654B}
.page-recruit .wj-fig{display:flex;align-items:baseline;justify-content:center;gap:5px;min-height:76px;margin:0 0 12px;color:#C0654B;font-family:"Montserrat","Noto Sans JP",sans-serif;font-size:72px;font-weight:500;letter-spacing:-.055em;line-height:1.05;font-variant-numeric:tabular-nums}
.page-recruit .wj-fig .u{font-size:21px;letter-spacing:0;font-weight:700}
.page-recruit .wj-fig.is-word{font-family:"Noto Sans JP",sans-serif;font-size:32px;letter-spacing:-.03em;align-items:center;font-weight:700;gap:7px}
.page-recruit .wj-item:nth-child(4) .wj-fig{font-size:23px}
.page-recruit .wj-cross{font-size:21px;color:#141949;font-weight:400}
.page-recruit .wj-item h3{font-size:15px;font-weight:700;line-height:1.6;color:#141949;margin:0 0 14px;letter-spacing:0}
.page-recruit .wj-desc{font-size:13px;line-height:1.9;color:#555963;margin:0;max-width:26em;text-align:left}
.page-recruit .wj-item:last-child .wj-fig{gap:12px}
.page-recruit .wj-zero{font-family:"Montserrat",sans-serif;font-size:62px;font-weight:500;letter-spacing:-.055em}
.page-recruit .wj-zero>span{font-size:31px;margin:0 3px;color:#141949;vertical-align:middle}
.page-recruit .wj-zero-label{font-size:12px;letter-spacing:.05em;writing-mode:vertical-rl}
@media(max-width:1000px){
 .page-recruit .wj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-recruit .wj-item{padding-inline:24px}
}
@media(max-width:600px){
 .page-recruit #features .sec-head{margin-bottom:30px}
 .page-recruit .wj-grid{grid-template-columns:1fr}
 .page-recruit .wj-item{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;padding:36px 24px 26px;text-align:left;align-items:center}
 .page-recruit .wj-ic,.page-recruit .wj-ic .zoth-picto{width:120px;height:120px;margin:0}
 .page-recruit .wj-fig{min-height:0;margin:0;justify-content:center;font-size:66px}
 .page-recruit .wj-fig.is-word{font-size:27px}
 .page-recruit .wj-fig .u{font-size:17px}
 .page-recruit .wj-item:nth-child(4) .wj-fig{flex-direction:column;justify-content:center;gap:0;font-size:22px;line-height:1.3}
 .page-recruit .wj-cross{font-size:20px;line-height:1.2}
 .page-recruit .wj-item h3{grid-column:1/-1;margin:18px 0 8px;font-size:15px}
 .page-recruit .wj-desc{grid-column:1/-1;font-size:13px;max-width:none}
 .page-recruit .wj-item:last-child .wj-fig{gap:7px}
 .page-recruit .wj-zero{font-size:48px}
 .page-recruit .wj-zero>span{font-size:24px}
 .page-recruit .wj-zero-label{font-size:10px}
}
@media(max-width:360px){.page-recruit .wj-item{grid-template-columns:100px minmax(0,1fr);padding-inline:18px;column-gap:12px}.page-recruit .wj-ic,.page-recruit .wj-ic .zoth-picto{width:100px;height:100px}.page-recruit .wj-fig{font-size:54px}}

/* ============================================================
   復元: 採用情報の指示反映分 (2026-09)
   ※ ピクトグラム作業時に失われたため、コミット e8304d1 から復元
   ============================================================ */
/* FV: ラベルを大きく / CTA はホバーで全体がオレンジに */
.ph-label.is-lg span{font-size:.9rem;letter-spacing:.16em}
.ph-label.is-lg{font-size:.82rem}
.ph-cta.is-fill{transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.ph-cta.is-fill:hover{
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));
  border-color:transparent;color:#fff;transform:translateY(-2px);
  box-shadow:0 18px 40px -16px rgba(217,118,92,.9);
}
.ph-cta.is-fill:hover .cp-arrow{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}

/* About Us: 写真と見出しラベルを外し、中央に置いて本文は左揃え */
.rc-intro.is-center .rc-solo{display:flex;flex-direction:column;align-items:center;text-align:center}
.rc-intro.is-center .st-big{max-width:24em;margin-bottom:1.8rem}
.rc-intro.is-center .st-body{max-width:42em;text-align:left}
.rc-intro.is-center .st-body p{max-width:none}

/* ---------- 会社紹介資料 ---------- */
#deck{position:relative;overflow:hidden;background:linear-gradient(180deg,#141949 0%,#1B2260 46%,#0F1236 100%);color:#E7EAF7}
.dk-deco{position:absolute;inset:0;pointer-events:none}
.dk-glow{position:absolute;right:-8%;top:-20%;width:min(60vw,700px);aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle at 42% 38%,#FFD9AE 0%,#E29472 40%,rgba(217,118,92,0) 72%)}
#deck .container{position:relative;z-index:1}
#deck .sec-en{color:#FFD9AE}
#deck .sec-ja{color:rgba(255,248,240,.9)}
.dk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:clamp(2rem,3.4vw,3rem)}
.dk-copy .st-big{color:#fff;margin-bottom:1.2rem}
.dk-lead{margin:0 0 2rem;max-width:26em;font-size:.92rem;line-height:2;color:#AAB2DC}
.dk-dl{display:inline-flex;align-items:center;gap:1rem;padding:1rem 1.6rem;border-radius:14px;
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));color:#fff;
  box-shadow:0 18px 40px -18px rgba(217,118,92,.9);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dk-dl.is-soon{cursor:default}
.dk-dl.is-soon:hover{transform:none}
.dk-dl:not(.is-soon):hover{transform:translateY(-3px);box-shadow:0 26px 52px -18px rgba(217,118,92,.95)}
.dk-dl-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2)}
.dk-dl-ic svg{width:20px;height:20px}
.dk-dl-t{display:flex;flex-direction:column;gap:.2em;line-height:1.3}
.dk-dl-t strong{font-size:.95rem;font-weight:700;letter-spacing:.04em}
.dk-dl-t span{font-size:.7rem;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.dk-slides{position:relative;aspect-ratio:16/11}
.dk-slides img{position:absolute;width:82%;border-radius:10px;box-shadow:0 30px 70px -30px rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.14)}
.dk-slides .dk-s1{left:0;bottom:0;z-index:3}
.dk-slides .dk-s2{left:9%;bottom:14%;z-index:2;opacity:.9}
.dk-slides .dk-s3{left:18%;bottom:28%;z-index:1;opacity:.75}
@media (max-width:900px){
  .dk-grid{grid-template-columns:1fr}
  .dk-slides{aspect-ratio:16/10;max-width:520px;margin-inline:auto}
}

/* ---------- 「もっとよく知る」ボタン (枠付き / ホバーでオレンジ) ---------- */
.btn-ghost{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.8rem;
  padding:.85em 1.9em;border-radius:999px;border:1.5px solid var(--ink);
  font-size:.88rem;font-weight:700;letter-spacing:.06em;color:var(--ink);
  transition:.35s var(--ease);
}
.btn-ghost:hover{
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));
  border-color:transparent;color:#fff;transform:translateY(-2px);
  box-shadow:0 16px 36px -16px rgba(217,118,92,.9);
}

/* Recruit introduction: the hero dissolves into paper; the accent enters from the side. */
.page-recruit .ph-edge-blend{position:absolute;pointer-events:none;z-index:0;inset:auto 0 0;height:120px;background:linear-gradient(180deg,rgba(246,239,231,0),#F6EFE7)}
.page-recruit #about.rc-intro{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#F6EFE7 0%,#FFFDFA 48%,#F6F3EE 100%);scroll-margin-top:100px}
.page-recruit #about.rc-intro::before{z-index:0}
.page-recruit #about.rc-intro::after{content:"";position:absolute;z-index:0;pointer-events:none;width:900px;height:100%;right:calc((100% - min(100% - 2.5rem,1180px))/2 - 30px);top:0;background:url("../assets/img/about-message-warmth.svg") center calc(50% + 140px)/900px 684px no-repeat;opacity:.8;mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.page-recruit #about .rc-solo{position:relative;z-index:1}
@media(max-width:1000px){.page-recruit #about.rc-intro::after{right:-65px;width:720px;background-size:720px 547px;opacity:.85}}
@media(max-width:600px){.page-recruit #about.rc-intro::after{width:520px;right:-100px;background-size:520px 395px;opacity:.75}}

/* CEO message: echo the introduction on the portrait side, leaving the reading column quiet. */
.page-recruit #message{position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:100px;background:radial-gradient(ellipse at 16% 38%,rgba(255,217,174,.24),rgba(255,217,174,0) 55%)}
.page-recruit #message::before{content:"";position:absolute;z-index:0;pointer-events:none;left:-235px;top:-45px;width:740px;height:832px;background:url("../assets/img/recruit-heat-accent.svg") center/contain no-repeat;transform:scaleX(-1) rotate(14deg);opacity:.66;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 65%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 65%,transparent)}
.page-recruit #message>.container{position:relative;z-index:1}
@media(max-width:1000px){.page-recruit #message{background:radial-gradient(ellipse at 12% 22%,rgba(255,217,174,.22),rgba(255,217,174,0) 48%)}.page-recruit #message::before{width:700px;height:788px;left:-170px;top:-70px;opacity:.61}}
@media(max-width:600px){.page-recruit #message::before{width:490px;height:551px;left:-170px;top:10px;opacity:.58}.page-recruit #message{background:radial-gradient(ellipse at 7% 17%,rgba(255,217,174,.25),rgba(255,217,174,0) 40%)}}

/* Desktop: let the ember curve emerge beside and below the CEO portrait. */
@media(min-width:1001px){
 .page-recruit #message::before{left:calc((100% - min(100% - 2.5rem,1180px))/2 - 195px);top:-105px;width:980px;height:1103px;opacity:.8;transform:scaleX(-1) rotate(8deg);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 73%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 73%,transparent)}
}

/* Brand palette becomes a soft decorative layer inside the logo card. */
#logo .cc-swatches{position:absolute;z-index:0;pointer-events:none;display:block;width:125%;height:auto;aspect-ratio:10/9;right:-27%;bottom:-13%;margin:0;padding:0;background:url("../assets/img/zoth-brand-color-background.svg") center/contain no-repeat;opacity:.44;filter:blur(4px);transform:rotate(-15deg);mask-image:linear-gradient(135deg,transparent 8%,rgba(0,0,0,.55) 40%,#000 90%);-webkit-mask-image:linear-gradient(135deg,transparent 8%,rgba(0,0,0,.55) 40%,#000 90%)}
@media(max-width:600px){#logo .cc-swatches{width:155%;right:-37%;bottom:-5%;opacity:.4}}

/* About CEO: diffuse warmth flows from the portrait toward the message. */
.page-about #message{position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:100px}
.page-about #message::before{content:"";position:absolute;pointer-events:none;z-index:0;left:calc((100% - min(100% - 2.5rem,1180px))/2 + 80px);top:15px;width:1120px;height:851px;background:url("../assets/img/about-message-warmth.svg") center/contain no-repeat;opacity:.8;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 65%,transparent 100%)}
.page-about #message>.container{position:relative;z-index:1}
@media(max-width:1000px){.page-about #message::before{left:80px;top:0;width:880px;height:669px;opacity:.85}}
@media(max-width:600px){.page-about #message::before{left:-25px;top:210px;width:650px;height:494px;opacity:.75}}

/* ---------- 数値セクション: グリッドの収まりを整える (PC で余白が出ないように) ----------
   3 列構成。1 行目 = ドーナツ(1) + 折れ線(2) / 2 行目 = 横棒(2) + 数字(1) */
.nm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nm-card.is-donut{grid-column:span 1}
.nm-card.is-line{grid-column:span 2}
.nm-card.is-bar{grid-column:span 2}
.nm-card.is-fig{grid-column:span 1}
/* 折れ線はカード内で高さを取りすぎないように */
.nm-card.is-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;gap:1rem 1.6rem;align-items:end}
.nm-card.is-line .nm-line{grid-column:1/-1;aspect-ratio:auto;height:clamp(150px,15vw,210px)}
.nm-card.is-line .nm-line-v{grid-column:1;align-self:end}
.nm-card.is-line figcaption{grid-column:2;text-align:right;margin-top:0;align-self:end}
/* 数字カードは中央に置いて間延びを防ぐ */
.nm-card.is-fig{align-items:flex-start;justify-content:center;gap:.6rem}
@media (max-width:1000px){
  .nm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nm-card.is-line,.nm-card.is-bar{grid-column:span 2}
  .nm-card.is-donut,.nm-card.is-fig{grid-column:span 1}
  .nm-card.is-line{grid-template-columns:1fr;align-items:stretch}
  .nm-card.is-line .nm-line-v,.nm-card.is-line figcaption{grid-column:1;text-align:left}
}
@media (max-width:620px){
  .nm-grid{grid-template-columns:1fr}
  .nm-card.is-donut,.nm-card.is-line,.nm-card.is-bar,.nm-card.is-fig{grid-column:span 1}
}
/* 数字のみのカードは中身をまとめて縦中央に (下端に離れないように) */
.nm-card.is-fig{justify-content:center;gap:.5rem}
.nm-card.is-fig figcaption{margin-top:0}
/* 折れ線はもう少し起伏を出す */
.nm-card.is-line .nm-line{height:clamp(170px,16vw,230px)}

/* ---------- タブレット (621〜1000px): 2 列で隙間が出ないよう並び順を入れ替える
   1 行目 = ドーナツ + 平均年齢 / 2 行目 = 折れ線 / 3 行目 = 横棒
   ※ PC (1001px 以上) と SP (620px 以下) の並びは変更しない ---------- */
@media (min-width:621px) and (max-width:1000px){
  .nm-card.is-donut{order:1}
  .nm-card.is-fig{order:2}
  .nm-card.is-line{order:3}
  .nm-card.is-bar{order:4}
  .nm-card.is-fig{justify-content:center}
  .nm-card.is-donut .nm-donut{max-width:170px}
}

/* ============================================================
   お問い合わせ (システムは RESEED の contact.php のまま、見た目のみ ZC)
   ============================================================ */
.ph.is-short{min-height:min(58svh,560px);padding-bottom:clamp(60px,8vw,100px)}
.ct{padding-block:clamp(56px,8vw,110px) clamp(72px,10vw,130px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5rem);align-items:start}

/* 左: 案内 */
.ct-side .sec-en{margin-bottom:.3rem}
.ct-notes{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.6rem}
.ct-notes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.ct-n{font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;color:var(--glow);padding-top:.25em}
.ct-notes h3{margin:0 0 .45rem;font-size:.92rem;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.ct-notes p{margin:0;font-size:.82rem;line-height:1.95;color:var(--body)}
.ct-svc{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.ct-svc-t{margin:0 0 .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--faint)}
.ct-svc ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ct-svc a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;
  font-size:.86rem;font-weight:700;letter-spacing:.03em;color:var(--ink);transition:background .25s var(--ease)}
.ct-svc a:hover{background:var(--sunk)}
.ct-svc img{width:22px;height:22px}

/* 右: フォーム */
.ct-main{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:0 26px 60px -34px rgba(23,24,28,.3)}
.ct-form{display:grid;gap:clamp(1.1rem,1.8vw,1.5rem)}
.ct-row{display:grid;gap:clamp(1.1rem,1.8vw,1.5rem)}
.ct-row.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-field{display:grid;gap:.5rem}
.ct-label{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--graphite);display:flex;align-items:center;gap:.6em}
.ct-label em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:#fff;
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));padding:.25em .6em;border-radius:999px}
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:.85em 1em;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.ct-field textarea{resize:vertical;line-height:1.9;min-height:9em}
.ct-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2353565D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;background-size:12px;padding-right:2.6em}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#A7ADB6}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{
  outline:0;background:var(--surface);border-color:var(--ember);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sun-2) 28%,transparent);
}
/* 自動送信対策 */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ct-agree{display:flex;align-items:flex-start;gap:.7rem;font-size:.84rem;line-height:1.8;color:var(--body);cursor:pointer}
.ct-agree input{width:18px;height:18px;margin-top:.2em;accent-color:var(--sun-1);flex:0 0 auto}
.ct-agree em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:#fff;margin-left:.5em;
  background:linear-gradient(115deg,var(--sun-1),var(--sun-2));padding:.25em .6em;border-radius:999px}
.ct-link{color:var(--glow);border-bottom:1px solid currentColor}

.ct-msg{margin:0;min-height:1.2em;font-size:.84rem;letter-spacing:.03em;color:var(--body)}
.ct-msg.is-error{color:#C0392B;font-weight:700}
.ct-submit{justify-self:start;border:0;cursor:pointer;font:inherit;font-size:.92rem;font-weight:500;letter-spacing:.05em}
.ct-submit:disabled{opacity:.6;cursor:default}
.ct-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(217,118,92,.95)}

@media (max-width:960px){
  .ct-grid{grid-template-columns:1fr;gap:2.6rem}
  .ct-side{order:2}
}
@media (max-width:600px){
  .ct-row.is-2{grid-template-columns:1fr}
}
/* 送信完了 */
.tk-box{max-width:44em;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;padding:clamp(2rem,4vw,3.2rem);
  box-shadow:0 26px 60px -34px rgba(23,24,28,.3)}
.tk-lead{margin:0 0 1.1rem;font-size:1.05rem;font-weight:700;line-height:1.9;letter-spacing:.03em;color:var(--ink)}
.tk-note{margin:0 0 2rem;font-size:.86rem;line-height:1.95;color:var(--body)}
.tk-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn-ghost-line{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn-ghost-line:hover{border-color:var(--ember);color:var(--glow)}

/* ==========================================================
   NEWS (一覧 / 記事詳細) — RESEED のニュース CMS を ZC のレイアウトで表示 (js/news.js)
   ========================================================== */
.nwl [hidden],.nwa-wrap [hidden]{display:none!important} /* .btn などの display 指定より hidden を優先 */
.nwl{padding-block:clamp(48px,7vw,96px) clamp(72px,10vw,130px)}
.nwl-inner{max-width:1080px}
.nwl-status{margin:0;padding:clamp(48px,7vw,80px) 0;text-align:center;font-size:.9rem;color:var(--faint);border-top:1px solid var(--line)}
.nwl-status.is-error{color:#B4452A;line-height:1.9}
.nwl-list{border-top:1px solid var(--line)}
.nwl-row{
  display:grid;grid-template-columns:170px minmax(0,1fr) 200px;gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  padding:clamp(1.4rem,2.4vw,1.9rem) clamp(0rem,1vw,.8rem);border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.nwl-row:hover{background:var(--surface)}
.nwl-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding-top:.2rem}
.nwl-date{font-family:"DM Mono",monospace;font-size:.78rem;letter-spacing:.08em;color:var(--faint)}
.nwl-cat{
  display:inline-flex;align-items:center;padding:.26em .9em;border-radius:999px;
  border:1px solid rgba(217,118,92,.45);color:var(--glow);background:rgba(237,185,142,.12);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;white-space:nowrap;
}
.nwl-title{margin:0;font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;line-height:1.65;color:var(--ink);transition:color .3s var(--ease);text-wrap:pretty}
.nwl-row:hover .nwl-title{color:var(--glow)}
.nwl-excerpt{
  margin:.6rem 0 0;font-size:.86rem;line-height:1.9;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nwl-thumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.nwl-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s var(--ease)}
.nwl-row:hover .nwl-thumb img{transform:scale(1.04)}
.nwl-thumb.is-mark,.nwa-rel-thumb.is-mark{background:var(--surface);border:1px solid var(--line)}
.nwl-thumb .thumb-mark,.nwa-rel-thumb .thumb-mark{width:46%;height:auto;color:#C3C7CD}
.nwl-foot{margin-top:clamp(2rem,4vw,3rem);text-align:center}
.nwl-more{min-width:220px;justify-content:center;cursor:pointer;font:inherit}
.nwl-more:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:900px){
  .nwl-row{grid-template-columns:minmax(0,1fr);gap:.9rem;padding-inline:0}
  .nwl-thumb{order:-1;aspect-ratio:16/10}
  .nwl-meta{flex-direction:row;align-items:center;gap:.7rem;padding-top:0}
}

/* ---------- 記事詳細 ---------- */
.nwa-wrap{padding-block:clamp(48px,7vw,88px) clamp(72px,10vw,130px)}
.ph.is-short.is-news{min-height:min(42svh,400px)}
.nwa-inner{max-width:800px}
.nwa-state{text-align:center;padding:clamp(40px,6vw,72px) 0;color:var(--body);font-size:.9rem;line-height:1.9}
.nwa-state .sec-en{color:var(--glow)}
.nwa-state-ttl{margin:.8rem 0 1rem;font-size:clamp(1.5rem,3vw,2rem);line-height:1.5;color:var(--ink)}
.nwa-state .is-error{color:#B4452A;font-weight:700}
.nwa-crumb{margin:0 0 1.6rem;font-family:"Montserrat",system-ui,sans-serif;font-size:.72rem;letter-spacing:.12em;color:var(--faint);display:flex;gap:.6rem}
.nwa-crumb a{color:var(--graphite)}
.nwa-crumb a:hover{color:var(--glow)}
.nwa-meta{display:flex;align-items:center;gap:.8rem}
.nwa-title{margin:1rem 0 0;font-size:clamp(1.55rem,3.2vw,2.2rem);font-weight:700;line-height:1.5;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.nwa-hero:empty{display:none}
.nwa-fig{margin:1.8rem 0 0}
.nwa-fig img{display:block;width:100%;height:auto;border-radius:14px}
.nwa-fig.is-s{max-width:340px}
.nwa-fig.is-m{max-width:560px}
.nwa-fig.is-l{max-width:100%}
.nwa-fig.is-center{margin-inline:auto}
.nwa-fig.is-left{margin-right:auto}
.nwa-fig.is-hero{max-width:100%}
.nwa-fig figcaption{margin-top:.6rem;text-align:center;font-size:.74rem;line-height:1.7;color:var(--faint)}
.nwa-content{margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.nwa-sec{padding-block:0} /* サイト共通の section 余白を記事本文では使わない */
.nwa-sec + .nwa-sec{margin-top:2.6rem}
.nwa-h2{
  margin:0 0 1.1rem;padding-left:.9rem;border-left:3px solid var(--sun-1);
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;line-height:1.55;color:var(--ink);
}
.nwa-p{margin:1.2rem 0 0;font-size:clamp(.92rem,1.2vw,1rem);line-height:2.1;color:var(--graphite);overflow-wrap:anywhere}
.nwa-p:first-child,.nwa-h2 + .nwa-p{margin-top:0}
.nwa-p strong{color:var(--ink);font-weight:700}
.nwa-related{margin-top:clamp(3rem,6vw,4.2rem);padding-top:2.4rem;border-top:1px solid var(--line)}
.nwa-related .sec-en{margin:0;color:var(--glow)}
.nwa-related-ttl{margin:.4rem 0 1.4rem;font-size:1.15rem;font-weight:700;color:var(--ink)}
.nwa-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.nwa-rel{display:flex;flex-direction:column}
.nwa-rel-thumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.nwa-rel-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s var(--ease)}
.nwa-rel:hover .nwa-rel-thumb img{transform:scale(1.04)}
.nwa-rel-meta{margin:.7rem 0 0;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.nwa-rel-title{
  margin-top:.45rem;font-size:.88rem;line-height:1.6;color:var(--ink);transition:color .3s var(--ease);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nwa-rel:hover .nwa-rel-title{color:var(--glow)}
.nwa-note{margin-top:clamp(2.4rem,5vw,3.2rem);padding:1.3rem 1.5rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:.86rem;line-height:1.9;color:var(--body)}
.nwa-note a{color:var(--glow);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.nwa-back{display:inline-flex;margin-top:2.2rem;padding-top:1.6rem;font-size:.86rem;font-weight:700;color:var(--ink);transition:color .3s var(--ease)}
.nwa .nwa-back{display:flex;border-top:1px solid var(--line)}
.nwa-back:hover{color:var(--glow)}
@media (max-width:640px){
  .nwa-related-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 一覧: タグ絞り込み + 3 列カード (ワイヤーフレーム準拠) ---------- */
.nwl-inner{max-width:1180px}
.nwl-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;padding-bottom:1.2rem;margin-bottom:clamp(1.8rem,3.4vw,2.6rem);border-bottom:1px solid var(--line)}
.nwl-bar-ttl{margin:0;display:flex;align-items:baseline;gap:.8rem}
.nwl-bar-ttl .sec-en{margin:0;color:var(--glow)}
.nwl-bar-ja{font-size:.74rem;letter-spacing:.06em;color:var(--faint)}
.nwl-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.nwl-tag{
  appearance:none;cursor:pointer;font:inherit;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  padding:.5em 1.1em;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--graphite);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.nwl-tag:hover{border-color:var(--sun-1);color:var(--glow)}
.nwl-tag[aria-pressed="true"]{background:linear-gradient(135deg,var(--sun-1),var(--sun-2));border-color:transparent;color:#fff}
.nwl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,2.2vw,2rem)}
.nwl .nwl-status{border-top:0}
.nwg-card{display:flex;flex-direction:column}
.nwg-thumb{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#FFFFFF;
  border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 16px 36px -30px rgba(16,10,30,.5);transition:box-shadow .5s var(--ease);
}
.nwg-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s var(--ease)}
.nwg-thumb .thumb-mark{width:46%;height:auto;color:#C3C7CD}
/* TOP と同じ: カーソルを乗せるとオレンジがじわっと広がる */
.nwg-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(150deg,rgba(217,118,92,.9),rgba(226,148,114,.84) 45%,rgba(237,185,142,.78));
  transition:opacity .6s var(--ease);
}
.nwg-card:hover .nwg-thumb::after,.nwg-card:focus-visible .nwg-thumb::after{opacity:1}
.nwg-card:hover .nwg-thumb{box-shadow:0 26px 48px -32px rgba(16,10,30,.6)}
.nwg-card:hover .nwg-thumb img{transform:scale(1.03)}
.nwg-arrow{
  position:absolute;right:.8rem;top:.8rem;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);color:#fff;font-size:.74rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-4px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.nwg-card:hover .nwg-arrow,.nwg-card:focus-visible .nwg-arrow{opacity:1;transform:none}
.nwg-body{padding-top:1rem}
.nwg-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.nwg-tags{margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.nwg-title{
  margin:.65rem 0 0;font-size:.98rem;font-weight:700;line-height:1.65;color:var(--ink);transition:color .3s var(--ease);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty;
}
.nwg-card:hover .nwg-title{color:var(--glow)}
.nwa-meta .nwa-tags{margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.nwa-rel-meta{justify-content:space-between}
@media (max-width:1024px){ .nwl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .nwl-grid{grid-template-columns:minmax(0,1fr)}
  .nwl-bar{align-items:flex-start;flex-direction:column}
  .nwl-tags{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 1.25rem);padding-bottom:.3rem;scrollbar-width:none}
  .nwl-tags::-webkit-scrollbar{display:none}
  .nwl-tag{flex:0 0 auto}
}

/* ---------- カード全体リンク + タグリンク ---------- */
.nwg-card,.nwa-rel{position:relative}
.card-link{color:inherit}
.card-link::after{content:"";position:absolute;inset:0;z-index:1} /* タイトルのリンクをカード全面に */
.nwg-card:focus-within .nwg-thumb::after{opacity:1}
.nwg-card:focus-within .nwg-arrow{opacity:1;transform:none}
.card-link:focus-visible{outline:none}
.nwg-card:has(.card-link:focus-visible),.nwa-rel:has(.card-link:focus-visible){outline:2px solid var(--sun-1);outline-offset:6px;border-radius:14px}
a.nwl-cat.is-link{position:relative;z-index:2;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
a.nwl-cat.is-link:hover,a.nwl-cat.is-link:focus-visible{background:linear-gradient(135deg,var(--sun-1),var(--sun-2));border-color:transparent;color:#fff}
.nwg-card:hover .nwg-title .card-link,.nwa-rel:hover .card-link{color:var(--glow)}