/* ============================================================
   Nest Lab — デザイン案B「SOFT / AURORA」
   トーン: dentsu-ho.com（淡いパステルグラデ背景・白カードが浮く・英字ウォーターマーク・サイドバー）
   構成: seohacks.net（価値訴求ヒーロー・サムネイル付きカード・カテゴリ・CTA）
   ＋ モノ案の「インパクトあるヒーロー」を融合。サムネイル前面。公式リンクなし＝独立メディア。
   構造フックは js/site.js と共有（.arow / [data-count] / [data-rise] / .filter / .burger / .mnav）
   ============================================================ */
:root {
  --ink:   #1f1f2b;
  --ink2:  #353542;
  --sub:   #6b6b79;
  --faint: #a6a4b4;
  --line:  #ece9f3;
  --card:  #ffffff;
  --accent:   #ef5777;   /* dentsu風コーラル（カテゴリドット/リンク） */
  --accent-d: #d63e60;
  --font-disp: "Archivo", "Zen Kaku Gothic New", sans-serif;
  --font-jp:   "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-mono: "Archivo", sans-serif;
  --pad-x: clamp(24px, 5vw, 80px);
  --pad-y: clamp(64px, 8vw, 120px);
  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--ink2);
  font-size: 16px; line-height: 1.9; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased;
  overflow-x: hidden; position: relative;
  background: #f4f1fb;
}
/* オーロラ背景: background-attachment:fixed はiOSが正しく描画できない（スクロール先が
   空白に見える）ため、ビューポート固定の擬似要素で同じ見た目を全環境で再現する */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 820px at 2% -10%,  #ffcdb3 0%, rgba(255,205,179,0) 52%),
    radial-gradient(1150px 880px at 100% -6%, #c9d4fb 0%, rgba(201,212,251,0) 54%),
    radial-gradient(1300px 980px at 48% 116%, #e6cbfb 0%, rgba(230,203,251,0) 54%),
    radial-gradient(900px 700px at 80% 60%,   #ffd9e6 0%, rgba(255,217,230,0) 50%),
    #f4f1fb;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: #fff; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

.eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.dot { color: var(--accent); }

.btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.03em; padding: 14px 28px; border-radius: 999px; cursor: pointer; border: none; background: var(--ink); color: #fff; transition: 0.35s var(--ease); }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(239,87,119,0.3); }
.btn:hover .arr { transform: translateX(5px); }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--ink); box-shadow: 0 10px 24px rgba(31,31,43,0.22); }

/* ---------- top strip ---------- */
.topbar { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-align: center; padding: 9px 16px; color: var(--ink); }
.topbar .jp { font-family: var(--font-body); letter-spacing: 0.03em; color: var(--sub); }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.7); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__name { font-family: var(--font-disp); font-weight: 900; font-size: 23px; letter-spacing: -0.01em; color: var(--ink); }
.brand__name .dot { color: var(--accent); }
.brand__sub { font-size: 10.5px; color: var(--sub); letter-spacing: 0.03em; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px); }
.nav a { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--ink2); position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); border-radius: 2px; }
.nav a:hover::after { transform: scaleX(1); }
.hd__cta { font-size: 12.5px; padding: 10px 20px; }
.burger { display: none; width: 44px; height: 44px; border: none; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 9px; width: 26px; height: 2px; background: var(--ink); transition: 0.3s var(--ease); }
.burger span:nth-child(1){ top: 15px; } .burger span:nth-child(2){ top: 21px; } .burger span:nth-child(3){ top: 27px; }
.burger.on span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.burger.on span:nth-child(2){ opacity: 0; }
.burger.on span:nth-child(3){ top: 21px; transform: rotate(-45deg); }
/* モバイルメニュー（2026-07-14 公式サイト風にコンパクト刷新・配色はNest Labトーン） */
.mnav { position: fixed; inset: 0; z-index: 99; background: linear-gradient(160deg, #fbfaff 0%, #fff5f7 100%); padding: calc(72px + env(safe-area-inset-top)) var(--pad-x) calc(40px + env(safe-area-inset-bottom)); display: none; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* セーフセンタリング: 余裕がある時は中央・画面が短い時は上からスクロール可（先頭/末尾のmargin:auto） */
.mnav .mn-home { margin-top: auto; }
.mnav .mn-cats { margin-bottom: auto; }
.mnav.on { display: flex; animation: mnavIn 0.28s var(--ease); }
@keyframes mnavIn { from { opacity: 0; } to { opacity: 1; } }
.mn-home { display: inline-flex; align-items: center; gap: 9px; padding: 12px 28px; min-height: 44px; border: 1.5px solid var(--accent); border-radius: 999px; background: rgba(239,87,119,0.06); color: var(--accent-d); font-family: var(--font-disp); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.16em; margin-bottom: 14px; transition: background 0.28s var(--ease), color 0.28s var(--ease); }
.mn-home svg { width: 18px; height: 18px; }
.mn-home:hover, .mn-home:active { background: var(--accent); color: #fff; }
.mn-main { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mn-main a { font-family: var(--font-jp); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.08em; color: var(--ink); padding: 9px 18px; min-height: 44px; display: flex; align-items: center; border-bottom: none; }
.mn-main a:active { color: var(--accent-d); }
.mn-sep { width: 44px; height: 1px; background: #e6dfe9; margin: 14px 0 10px; }
.mn-cap { font-family: var(--font-disp); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--faint); text-transform: uppercase; margin-bottom: 8px; }
.mn-cats { display: grid; grid-template-columns: repeat(2, minmax(128px, 152px)); gap: 10px; }
.mn-cats a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--font-jp); font-weight: 700; font-size: 0.86rem; color: var(--ink2); }
.mn-cats a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.mn-cats a:active { border-color: var(--accent); color: var(--accent-d); }
@media (prefers-reduced-motion: reduce){ .mnav, .burger span, .mn-home { transition: none; } .mnav.on { animation: none; } }

/* ============================================================
   HERO（インパクト融合＋淡いグラデ）
   ============================================================ */
.hero { position: relative; padding: clamp(40px,4.5vw,72px) 0 clamp(44px,5vw,80px); overflow: hidden; }
.hero__wm { position: absolute; right: -1%; top: 4%; font-family: var(--font-disp); font-weight: 900; font-size: clamp(100px, 16vw, 280px); line-height: 1; color: #fff; opacity: 0.5; letter-spacing: -0.04em; pointer-events: none; z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(28px,4vw,60px); align-items: center; }
.hero__t { font-family: var(--font-jp); font-weight: 900; font-size: clamp(32px, 5.2vw, 74px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: clamp(16px,1.8vw,24px) 0 clamp(20px,2.4vw,30px); }
.hero__t .nb { display: block; white-space: nowrap; }
.hero__lead { max-width: 520px; font-size: clamp(14px,1.05vw,16px); line-height: 2.0; color: var(--sub); }
.hero__lead b { color: var(--ink); font-weight: 700; }
.hero__cta { margin-top: clamp(24px,2.6vw,32px); display: flex; gap: 14px; flex-wrap: wrap; }
/* hero featured card */
.feat { display: block; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(40,30,80,0.12); transition: 0.4s var(--ease); }
.feat:hover { transform: translateY(-6px); box-shadow: 0 32px 70px rgba(40,30,80,0.18); }
.feat__media { aspect-ratio: 16/10; overflow: hidden; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s var(--ease); }
.feat:hover .feat__media img { transform: scale(1.04); }
.feat__body { padding: clamp(20px,2vw,30px); }
.feat__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--faint); margin-bottom: 14px; }
.feat__pick { color: var(--accent); font-weight: 700; }
.feat__t { font-family: var(--font-jp); font-weight: 900; font-size: clamp(19px,1.8vw,25px); line-height: 1.5; color: var(--ink); }
.feat__e { margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: var(--sub); }
@media (max-width: 900px){ .hero__grid { grid-template-columns: 1fr; } .hero__wm { opacity: 0.4; } }

/* ============================================================
   DATA（時代の数字・白カードが浮く）
   ============================================================ */
.data .wrap { }
.data__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.data__note { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.data__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.data__tier { font-family: var(--font-jp); font-weight: 900; font-size: clamp(15px,1.7vw,20px); color: var(--ink); margin: 6px 0 16px; display: flex; align-items: center; gap: 11px; }
.data__grid + .data__tier { margin-top: clamp(26px,3vw,44px); }
.data__tier-no { font-family: var(--font-disp); font-weight: 800; font-size: 12.5px; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 6px; padding: 2px 7px; letter-spacing: 0.03em; }
.dcell { background: var(--card); border-radius: 16px; padding: 30px 26px; box-shadow: 0 12px 34px rgba(40,30,80,0.07); border-top: 3px solid var(--accent); }
.dcell:nth-child(2){ border-top-color: #2bb673; } .dcell:nth-child(3){ border-top-color: #2f9be0; } .dcell:nth-child(4){ border-top-color: #7b5cff; }
.dcell__n { font-family: var(--font-disp); font-weight: 800; font-size: clamp(38px,4.4vw,60px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.dcell__n .u { font-size: 0.4em; margin-left: 3px; }
.dcell__l { margin-top: 13px; font-size: 12.5px; line-height: 1.7; color: var(--sub); }
.dcell__s { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; }
.dcell__s a { color: var(--faint); text-decoration: underline; }
.dcell__s a:hover { color: var(--accent); }
@media (max-width: 860px){ .data__grid { grid-template-columns: 1fr 1fr; } .dcell { padding: 24px 18px; } }
@media (max-width: 380px){ .data__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION 見出し（英字ウォーターマーク）
   ============================================================ */
.sec { padding: var(--pad-y) 0; position: relative; }
.sec__head { position: relative; margin-bottom: clamp(30px,3.5vw,48px); }
.sec__wm { font-family: var(--font-disp); font-weight: 900; font-size: clamp(54px,9vw,150px); line-height: 0.9; color: #fff; opacity: 0.6; letter-spacing: -0.03em; position: absolute; right: 0; top: -0.2em; z-index: 0; pointer-events: none; }
.sec__h { position: relative; z-index: 1; font-family: var(--font-jp); font-weight: 900; font-size: clamp(26px,3.4vw,46px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 14px; }
.sec__h::before { content: ""; width: 5px; height: 1.1em; background: var(--accent); border-radius: 3px; }
.sec__bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.viewall { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; }
.viewall .arr { transition: transform 0.3s var(--ease); }
.viewall:hover { color: var(--accent); } .viewall:hover .arr { transform: translateX(5px); }

/* ============================================================
   LATEST（2カラム: 記事カード＋サイドバー）＝メディアの核
   ============================================================ */
.media { display: grid; grid-template-columns: 1fr 312px; gap: clamp(28px,3.5vw,56px); align-items: start; }
.filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.filter button { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; padding: 8px 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.6); color: var(--ink2); cursor: pointer; border-radius: 999px; transition: 0.25s var(--ease); }
.filter button.on, .filter button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.morewrap { text-align: center; margin-top: clamp(28px,3vw,42px); }
.morebtn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; letter-spacing: 0.03em; padding: 14px 32px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--ink); cursor: pointer; transition: 0.3s var(--ease); box-shadow: 0 8px 24px rgba(40,30,80,0.06); }
.morebtn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.morebtn .arr { transition: transform 0.3s var(--ease); } .morebtn:hover .arr { transform: translateX(4px); }
.morebtn .n { font-family: var(--font-disp); font-weight: 800; }

#alist, .ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,26px); }
.ind-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); }
.arow { display: flex; flex-direction: column; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(40,30,80,0.06); transition: 0.35s var(--ease); }
.arow:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(40,30,80,0.13); }
.arow.hide { display: none; }
.arow__media { aspect-ratio: 16/10; overflow: hidden; }
.arow__media img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s var(--ease); }
.arow:hover .arow__media img { transform: scale(1.05); }
.arow__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.arow__cat { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.arow__cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.arow__cat .date { margin-left: auto; color: var(--faint); font-weight: 600; letter-spacing: 0.04em; }
.arow__t { font-family: var(--font-jp); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--ink); }
.arow__e { margin-top: 10px; font-size: 12.5px; line-height: 1.85; color: var(--sub); flex: 1; }
.arow__go { margin-top: 16px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.arow__go .arr { transition: transform 0.3s var(--ease); }
.arow:hover .arow__go .arr { transform: translateX(5px); }
@media (max-width: 1040px){ .media { grid-template-columns: 1fr; } .side { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 620px){ #alist { grid-template-columns: 1fr; } .side { grid-template-columns: 1fr; } }

/* sidebar */
.side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 26px; }
.panel { background: var(--card); border-radius: 14px; padding: 24px 22px; box-shadow: 0 10px 30px rgba(40,30,80,0.06); }
.panel__h { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; align-items: center; gap: 9px; }
.panel__h::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.panel__sub { font-family: var(--font-jp); font-weight: 500; font-size: 9px; letter-spacing: 0.02em; color: var(--faint); text-transform: none; margin-left: auto; }
.rank { display: flex; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rank:last-child { border-bottom: none; }
.rank__no { font-family: var(--font-disp); font-weight: 800; font-size: 16px; color: var(--accent); width: 26px; flex-shrink: 0; }
.rank:nth-child(2) .rank__no, .rank:nth-child(3) .rank__no, .rank:nth-child(4) .rank__no { font-size: 17px; }
.rank__th { width: 56px; height: 40px; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.rank__th img { width: 100%; height: 100%; object-fit: cover; }
.rank__t { font-size: 12.5px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.cats { display: flex; flex-direction: column; }
.cats a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: 0.2s; }
.cats a:last-child { border-bottom: none; }
.cats a:hover { color: var(--accent); padding-left: 4px; }
.cats a .c { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.panel--cta { background: linear-gradient(135deg, #2a2a38, #1f1f2b); color: #fff; text-align: center; }
.panel--cta h4 { font-family: var(--font-jp); font-weight: 900; font-size: 17px; line-height: 1.5; }
.panel--cta p { font-size: 12px; color: rgba(255,255,255,0.7); margin: 10px 0 18px; line-height: 1.7; }
.panel--cta .btn { background: #fff; color: var(--ink); width: 100%; justify-content: center; }
.panel--cta .btn:hover { background: var(--accent); color: #fff; }

/* ============================================================
   TOPICS（カテゴリ・色付きカード）
   ============================================================ */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tcell { display: flex; flex-direction: column; gap: 10px; background: var(--card); border-radius: 14px; padding: 26px 24px; min-height: 200px; box-shadow: 0 10px 30px rgba(40,30,80,0.06); border-left: 4px solid var(--accent); transition: 0.3s var(--ease); }
.tcell:nth-child(2){ border-left-color: #f0457a; } .tcell:nth-child(3){ border-left-color: #7b5cff; } .tcell:nth-child(4){ border-left-color: #2bb673; }
.tcell:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(40,30,80,0.13); }
.tcell__no { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--faint); }
.tcell__h { font-family: var(--font-jp); font-weight: 900; font-size: clamp(20px,2vw,26px); color: var(--ink); margin-top: auto; }
.tcell__d { font-size: 12.5px; line-height: 1.7; color: var(--sub); }
.tcell__c { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; }
@media (max-width: 920px){ .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .tgrid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about__big { font-family: var(--font-jp); font-weight: 900; font-size: clamp(24px,3.4vw,46px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); max-width: 17em; }
.about__big .u { background: linear-gradient(transparent 62%, rgba(239,87,119,0.28) 0); }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,60px); margin-top: clamp(32px,4vw,52px); }
.about__cols p { color: var(--sub); font-size: 14.5px; line-height: 2.05; }
.about__cols p b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px){ .about__cols { grid-template-columns: 1fr; } }

/* ============================================================
   CTA
   ============================================================ */
.cta__box { background: linear-gradient(135deg, #2a2a3a 0%, #1f1f2b 100%); border-radius: 24px; padding: clamp(44px,5vw,80px) clamp(24px,4vw,64px); text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta__box::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(239,87,119,0.4), transparent 70%); }
.cta__h { position: relative; z-index: 1; font-family: var(--font-jp); font-weight: 900; font-size: clamp(24px,3.6vw,46px); line-height: 1.4; letter-spacing: -0.01em; }
.cta__h .u { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--accent); }
.cta__p { position: relative; z-index: 1; margin: 20px auto 32px; max-width: 540px; color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.9; }
.cta__box .btn { position: relative; z-index: 1; background: #fff; color: var(--ink); }
.cta__box .btn:hover { background: var(--accent); color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft { padding: clamp(52px,6vw,84px) 0 36px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: clamp(40px,5vw,80px); }
.ft__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px,4vw,60px); }
.ft__brand .brand__name { font-size: 26px; }
.ft__brand p { margin-top: 16px; font-size: 13px; line-height: 1.9; color: var(--sub); max-width: 360px; }
.ft__col h4 { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.ft__col li { margin-bottom: 11px; } .ft__col a { font-size: 13.5px; color: var(--ink2); }
.ft__col a:hover { color: var(--accent); }
.ft__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: clamp(36px,5vw,64px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
@media (max-width: 760px){ .ft__top { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }

/* ---------- design switcher（案A/案B切替） ---------- */
.dsw { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: inline-flex; gap: 3px; padding: 4px; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(40,30,80,0.16); font-family: var(--font-mono); }
.dsw a { font-weight: 600; font-size: 12px; padding: 7px 14px; border-radius: 999px; color: var(--ink2); transition: 0.2s; }
.dsw a.on { background: var(--ink); color: #fff; }
@media (max-width: 680px){ .dsw { right: 10px; bottom: 10px; } .dsw a { padding: 6px 11px; font-size: 11px; } }

/* ---------- reveal ---------- */
[data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
html.reduced [data-rise] { opacity: 1; transform: none; }
@media (max-width: 920px){ .nav, .hd__cta { display: none; } .burger { display: block; } }

/* ============================================================
   ARTICLE（記事詳細・案Bソフト）
   ============================================================ */
.art-hero { padding: clamp(36px,4vw,64px) 0 clamp(20px,2.5vw,34px); }
.art-hero .wrap { max-width: 940px; }
.art-chip { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 6px 14px; border-radius: 999px; display: inline-block; }
/* 「まず読む1本」バッジ（業種トップの総括に付与） */
.art-chip--ghost { color: var(--accent-d); background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 34%, #fff); margin-left: 8px; }
.art-chip--ghost::before { content: "★ "; }
/* 業種トップの「この業界のデータ記事」一覧セクション */
.ind-sec { padding: clamp(36px,4vw,60px) 0 clamp(20px,3vw,40px); }
.ind-sec__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px,2.5vw,30px); }
.ind-sec__h { font-family: var(--font-jp); font-weight: 900; font-size: clamp(22px,2.6vw,32px); line-height: 1.3; color: var(--ink); display: inline-flex; align-items: center; gap: 12px; }
.ind-sec__h::before { content: ""; width: 5px; height: 1em; background: var(--accent); border-radius: 3px; }
.ind-sec__n { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); font-weight: 600; }
.ind-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ind-filter button { font-family: var(--font-mono); font-weight: 600; font-size: 12px; padding: 7px 15px; border: 1px solid var(--line); background: rgba(255,255,255,0.6); color: var(--ink2); cursor: pointer; border-radius: 999px; transition: 0.25s var(--ease); }
.ind-filter button.on, .ind-filter button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 業種ページ：①専用記事（主役・淡いコーラルの帯）＋②あわせて読みたい共通データ（従属・境界線で区切る） */
.ind-sec--own { background: linear-gradient(180deg, rgba(239,87,119,0.05), transparent 72%); }
.ind-own__em { color: var(--accent); }
.ind-sec__lead { font-family: var(--font-jp); font-size: 13.5px; line-height: 1.75; color: var(--sub); margin: -12px 0 24px; max-width: 60ch; }
.ind-sec--rel { border-top: 1px solid var(--line); }
.ind-sec--rel .ind-sec__h { font-size: clamp(18px,2.2vw,24px); color: var(--ink2); }
.art-hero__t { font-family: var(--font-jp); font-weight: 900; font-size: clamp(28px,3.8vw,52px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin: clamp(18px,2vw,26px) 0 16px; }
.art-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--faint); }
.art-thumb { width: min(940px, calc(100% - 2 * var(--pad-x))); margin: clamp(20px,2.5vw,32px) auto 0; aspect-ratio: 16/7; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 56px rgba(40,30,80,0.14); }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px){ .art-thumb { aspect-ratio: 16/10; } }
.art-body-sec { padding: clamp(34px,4vw,60px) 0 clamp(60px,7vw,100px); }
.art-wrap { width: min(760px, calc(100% - 2 * var(--pad-x))); margin: 0 auto; }
.art-lead { font-size: clamp(16px,1.4vw,19px); line-height: 2.0; font-weight: 500; color: var(--ink); margin-bottom: 40px; }
.art-body h2 { font-family: var(--font-jp); font-weight: 900; font-size: clamp(21px,2.4vw,30px); line-height: 1.5; color: var(--ink); margin: 48px 0 18px; padding-left: 16px; border-left: 5px solid var(--accent); }
.art-body h3 { font-family: var(--font-jp); font-weight: 700; font-size: clamp(17px,1.8vw,21px); color: var(--ink); margin: 30px 0 12px; }
.art-body p { font-size: 15.5px; line-height: 2.1; color: var(--ink2); margin-bottom: 18px; }
.art-body b { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(239,87,119,0.22) 0); }
.art-body a.inl { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.art-body blockquote { background: #fff; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 24px 0; font-weight: 500; color: var(--ink); box-shadow: 0 8px 24px rgba(40,30,80,0.05); }
.adata { background: #fff; border-radius: 14px; padding: 24px 26px; margin: 26px 0; box-shadow: 0 10px 30px rgba(40,30,80,0.06); border-top: 3px solid var(--accent); }
.adata__n { font-family: var(--font-disp); font-weight: 800; font-size: clamp(30px,3.6vw,46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.adata__n .u { font-size: 0.42em; margin-left: 3px; }
.adata__t { font-weight: 700; color: var(--ink); margin: 8px 0 6px; line-height: 1.5; }
.adata__s { font-size: 11.5px; color: var(--faint); }
.adata__s a { color: var(--accent); text-decoration: underline; word-break: break-all; }
/* chart (soft) */
.chart { background: #fff; border-radius: 14px; padding: 26px 28px; margin: 28px 0; box-shadow: 0 10px 30px rgba(40,30,80,0.06); }
.chart__ttl { font-family: var(--font-jp); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 18px; }
.chart__row { display: grid; grid-template-columns: 168px 1fr 64px; gap: 14px; align-items: center; margin-bottom: 14px; }
.chart__lab { font-size: 13px; line-height: 1.4; color: var(--ink2); }
.chart__track { height: 14px; background: #efedf6; border-radius: 999px; overflow: hidden; }
.chart__fill { display: block; height: 100%; border-radius: 999px; background: var(--bar, var(--accent)); width: 0; transition: width 1.1s var(--ease); }
.chart.on .chart__fill { width: var(--w,0%); }
html.reduced .chart__fill { transition: none; }
.chart__val { font-family: var(--font-disp); font-weight: 800; font-size: 16px; text-align: right; color: var(--bar, var(--accent)); }
.chart__src { font-size: 11px; color: var(--faint); margin-top: 12px; }
.chart__src a { color: var(--accent); text-decoration: underline; }
@media (max-width: 600px){ .chart__row { grid-template-columns: 104px 1fr 52px; gap: 10px; } .chart__lab { font-size: 12px; } }
/* sources / related / cta */
.art-sources { background: #fff; border-radius: 14px; padding: 26px 28px; margin-top: 44px; box-shadow: 0 10px 30px rgba(40,30,80,0.06); }
.art-sources h4 { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.art-sources ol { padding-left: 20px; }
.art-sources li { font-size: 12.5px; line-height: 1.9; color: var(--sub); margin-bottom: 8px; }
.art-sources a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.art-related { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 18px; }
.relc { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(40,30,80,0.06); transition: 0.3s var(--ease); }
.relc:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(40,30,80,0.12); }
.relc__media { aspect-ratio: 16/10; overflow: hidden; } .relc__media img { width: 100%; height: 100%; object-fit: cover; }
.relc__b { padding: 12px 14px 16px; } .relc__c { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; } .relc__t { font-family: var(--font-jp); font-weight: 700; font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 6px; }
@media (max-width: 700px){ .art-related { grid-template-columns: 1fr; } }
.art-back { margin-top: 30px; }
.art-cta { margin-top: clamp(40px,5vw,64px); }

/* ============================================================
   独立エリア: 実績(Case Studies) / 絆コラム(Column)
   通常の記事フィードとは別世界。セクション固有アクセントで世界観を分離。
   ============================================================ */
.world-cases  { --accent:#0ea5a4; --accent-d:#0b7e7d; }
.world-column { --accent:#e0843c; --accent-d:#c06a26; }

.area-hero { padding: clamp(40px,6vw,84px) 0 clamp(20px,3vw,40px); position:relative; overflow:hidden; }
.area-hero__wm { position:absolute; top:2%; right:1%; font-family:var(--font-disp); font-weight:900; font-size:clamp(92px,18vw,250px); color:var(--accent); opacity:.09; letter-spacing:-.04em; pointer-events:none; line-height:1; z-index:0; }
.area-hero .wrap { position:relative; z-index:1; }
.area-hero__t { font-family:var(--font-disp); font-weight:800; font-size:clamp(32px,5.2vw,60px); line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:16px 0 16px; }
@media (max-width: 430px){ .area-hero__t { font-size: 24px; line-height: 1.34; } }
.area-hero__lead { max-width:700px; font-size:16px; color:var(--ink2); }
.area-note { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--accent-d); background:color-mix(in srgb, var(--accent) 12%, #fff); border:1px solid color-mix(in srgb, var(--accent) 32%, #fff); padding:9px 15px; border-radius:999px; }
.area-note::before { content:"●"; font-size:8px; }

/* --- 実績カード --- */
.case-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:22px; padding:clamp(10px,2vw,24px) 0 clamp(40px,6vw,90px); }
.case-card { background:#fff; border-radius:18px; padding:26px 26px 22px; box-shadow:0 12px 34px rgba(40,30,80,.07); border:1px solid var(--line); display:flex; flex-direction:column; gap:13px; transition:.3s var(--ease); }
.case-card:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(14,165,164,.16); }
.case-card__tag { align-self:flex-start; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.07em; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:5px 12px; border-radius:6px; }
.case-card__h { font-family:var(--font-jp); font-weight:700; font-size:19px; line-height:1.45; color:var(--ink); }
.case-card__row { font-size:13.5px; line-height:1.7; color:var(--sub); }
.case-card__row b { color:var(--ink2); font-weight:700; }
.case-card__foot { margin-top:8px; font-size:12px; color:var(--faint); }

/* --- 絆コラム --- */
.col-author { display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 24px; margin:clamp(8px,2vw,18px) 0 8px; box-shadow:0 12px 34px rgba(40,30,80,.06); max-width:880px; }
.col-author__av { width:62px; height:62px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--accent),var(--accent-d)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-disp); font-weight:800; font-size:22px; }
.col-author__name { font-family:var(--font-jp); font-weight:700; color:var(--ink); }
.col-author__role { font-size:12.5px; color:var(--sub); }
.col-list { display:flex; flex-direction:column; padding-bottom:clamp(40px,6vw,90px); max-width:880px; }
.col-entry { display:grid; grid-template-columns:96px 1fr; gap:24px; padding:28px 14px 28px 0; border-top:1px solid var(--line); align-items:start; transition:.3s var(--ease); border-radius:12px; }
.col-list .col-entry:last-child { border-bottom:1px solid var(--line); }
.col-entry:hover { background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 7%,transparent), transparent); }
.col-entry__no { font-family:var(--font-disp); font-weight:800; font-size:44px; color:var(--accent); opacity:.85; line-height:1; padding-left:6px; }
.col-entry__meta { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--faint); margin-bottom:8px; display:flex; gap:14px; flex-wrap:wrap; }
.col-entry__h { font-family:var(--font-jp); font-weight:700; font-size:21px; line-height:1.45; color:var(--ink); margin-bottom:8px; }
.col-entry__ex { font-size:14.5px; color:var(--ink2); }
@media (max-width:600px){
  .col-entry { grid-template-columns:54px 1fr; gap:14px; }
  .col-entry__no { font-size:30px; }
}

/* ---------- home: 実績/絆コラムへの入口バンド ---------- */
.worldband { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.wcard { position:relative; overflow:hidden; border-radius:20px; padding:clamp(26px,3vw,42px); background:#fff; border:1px solid var(--line); box-shadow:0 12px 34px rgba(40,30,80,.07); transition:.3s var(--ease); display:flex; flex-direction:column; gap:11px; min-height:196px; }
.wcard:hover { transform:translateY(-4px); box-shadow:0 20px 46px rgba(40,30,80,.13); }
.wcard__wm { position:absolute; right:-4px; bottom:-34px; font-family:var(--font-disp); font-weight:900; font-size:150px; line-height:1; color:var(--accent); opacity:.09; pointer-events:none; }
.wcard__h { font-family:var(--font-jp); font-weight:700; font-size:clamp(21px,2.3vw,28px); color:var(--ink); }
.wcard__d { font-size:14.5px; color:var(--ink2); max-width:92%; position:relative; }
.wcard__go { margin-top:auto; font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--accent-d); display:inline-flex; gap:8px; align-items:center; position:relative; }
.wcard__go .arr { transition:transform .3s var(--ease); }
.wcard:hover .wcard__go .arr { transform:translateX(5px); }
@media(max-width:760px){ .worldband{ grid-template-columns:1fr; } }

/* ---------- 絆コラム：記事本文の著者まわり ---------- */
.col-byline { display:flex; align-items:center; gap:14px; margin-bottom:30px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.col-byline .col-author__av { width:54px; height:54px; font-size:20px; }
.col-byline__name { font-family:var(--font-jp); font-weight:700; color:var(--ink); }
.col-byline__role { font-size:12.5px; color:var(--sub); }
.col-sign { margin-top:42px; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 34px rgba(40,30,80,.06); display:flex; align-items:center; gap:16px; }
.col-sign .col-author__av { width:56px; height:56px; font-size:20px; flex:none; }
.col-sign__txt { font-family:var(--font-jp); }
.col-sign__txt b { color:var(--ink); font-weight:700; font-size:15px; }
.col-sign__txt span { display:block; font-size:12.5px; color:var(--sub); margin-top:3px; }

/* ---------- 実績カード：顧客の声・結果の補足 ---------- */
.case-voice { font-size:13px; line-height:1.7; color:var(--ink2); background:color-mix(in srgb,var(--accent) 8%,#fff); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:11px 14px; }
.case-voice b { color:var(--accent-d); font-weight:700; }
.case-card__svc { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.case-card__svc span { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 10%,#fff); border:1px solid color-mix(in srgb,var(--accent) 28%,#fff); padding:3px 9px; border-radius:999px; }

/* 佐々木CMOの実写真アバター（コラム） */
.col-author__av { overflow: hidden; }
.col-author__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ============================================================
   日本語見出し・キャッチコピーの改行最適化
   word-break:auto-phrase = 文節単位で改行（「お/店」のような語中切れを防止）
   text-wrap:balance = 複数行の見出しの行長をそろえて美しく
   ============================================================ */
.hero__t, .about__big, .cta__h, .feat__t, .sec__h,
.area-hero__t, .art-hero__t, .arow__t, .case-card__h, .col-entry__h,
.relc__t, .tcell__h, .rank__t, .dcell__l, .panel__h, .panel--cta h4,
.hero__lead, .feat__e, .cta__p, .area-hero__lead, .art-lead, .art-chip,
.feat__meta, .arow__cat, .col-author__role, .case-card__tag {
  word-break: auto-phrase;
  line-break: strict;
}
.about__big, .cta__h, .feat__t, .area-hero__t, .art-hero__t,
.sec__h, .case-card__h, .col-entry__h, .arow__t {
  text-wrap: balance;
}

/* 追補: 入口バンド・記事本文見出し・引用・データ見出しも文節改行に */
.wcard__h, .wcard__d, .art-body h2, .art-body h3, .art-body blockquote,
.adata__t, .chart__ttl, .col-byline__role, .col-sign__txt, .about__cols p {
  word-break: auto-phrase;
  line-break: strict;
}
.wcard__h, .art-body h2, .art-body blockquote { text-wrap: balance; }

/* 定性（結果＝状態）ブロック。既定は非表示、レビューモードで表示 */
.case-state { display:flex; gap:12px; align-items:flex-start; margin-top:4px; padding-top:15px; border-top:1px dashed var(--line); }
.case-state__label { flex:none; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:4px 11px; border-radius:6px; margin-top:1px; }
.case-state__txt { font-size:13.5px; line-height:1.75; color:var(--ink2); }

/* 絆コラム一覧: 単発（随筆）エントリの番号スロット */
.col-entry__no--essay { display:inline-block; font-family:var(--font-jp); font-size:12.5px; font-weight:700; line-height:1; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 12%,#fff); border:1px solid color-mix(in srgb,var(--accent) 30%,#fff); padding:7px 12px; border-radius:999px; letter-spacing:.08em; white-space:nowrap; margin-top:6px; }