/* ==========================================================================
   一般社団法人AIクリエイター認定機構 コーポレートサイト 共通スタイル
   基本デザインは「AIクリエイター通信」（site/src/styles/global.css・subpage.css）と同じ。
   トークン・ボタン・ヘッダー・フッター・ページ見出し・本文（prose）は通信から写している。
   通信より落ち着いた「公式」寄りのトーンにするため、余白を多めにとり、ニュースの密度は出さない。
   ブランドの決まり：主要ボタンは墨色（Ink）の単色、グラデーションは線・文字などのアクセントだけ、
   線で囲む枠は角丸なし（ピル型のボタン・タグは形として残す）。
   ========================================================================== */

:root{
  --ink:#1a2138; --muted:#5b6478; --faint:#8b93a8;
  --paper:#ffffff; --soft:#f7f8fc; --soft2:#eef1f7; --line:#e7e9f0; --line2:#dfe3ee;
  --blue:#2f6bff; --purple:#7b2ff7; --magenta:#d6249f;
  --grad:linear-gradient(120deg,var(--blue),var(--purple) 55%,var(--magenta));
  --r-sm:0; --r-md:0; --r-lg:0; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(26,33,56,.06);
  --sh-md:0 8px 24px rgba(26,33,56,.08);
  --mark-white:url("/assets/img/ai_creator_mark_mono_white.png");
  --mark:url("/assets/img/ai_creator_mark_3d.webp");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-pill);font-weight:800;font-size:14px;
  padding:10px 17px;border:1.5px solid transparent;cursor:pointer;line-height:1;transition:.15s;white-space:nowrap;font-family:inherit}
.btn.pri{background:var(--ink);color:#fff}
.btn.pri:hover{background:#11172b}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--muted)}
.btn.sm{font-size:12.5px;padding:8px 13px}
.btn.lg{font-size:15px;padding:14px 26px}
.btn.block{width:100%}
.lnk{color:var(--blue);border-bottom:1px solid transparent}
.lnk:hover{border-bottom-color:currentColor}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}

/* header（通信と同じ） */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
header::before{content:"";display:block;height:4px;background:var(--grad)}
.head{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mk{width:62px;height:40px;background:var(--mark) center/contain no-repeat}
.brand .wm{font-weight:800;font-size:18px;line-height:1.15}
.brand .wm small{display:block;font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.04em}
nav.main{display:flex;gap:22px;margin-left:8px;font-size:14px;font-weight:600}
nav.main a{padding:6px 2px;opacity:.85;border-bottom:2px solid transparent}
nav.main a:hover{opacity:1;border-image:var(--grad) 1;border-bottom-width:2px}
nav.main a[aria-current="page"]{opacity:1;border-image:var(--grad) 1;border-bottom-width:2px}
.head .sp{flex:1}
.head .hbtns{display:flex;gap:9px}

/* section shell */
section.blk{padding:64px 0}
section.soft{background:var(--soft);border-block:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.shead h2{font-size:clamp(21px,2.5vw,27px);line-height:1.4}
.shead h2 .bar{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--grad);margin-right:10px;vertical-align:middle}
.shead .desc{font-size:13.5px;color:var(--muted);margin-top:4px}
.shead .more{font-size:13px;font-weight:800;white-space:nowrap}
.eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--purple);margin-bottom:4px}

/* footer（通信と同じ） */
footer{background:var(--ink);color:#c9cede;font-size:13px}
footer .wrap{padding:48px 20px 30px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
footer .fbrand .mk{width:78px;height:46px;background:var(--mark-white) left center/contain no-repeat}
footer .fbrand .wm{color:#fff;font-weight:800;font-size:16px;margin-top:8px;line-height:1.4}
footer .fbrand .wm small{display:block;font-size:11px;font-weight:600;color:#a7adbe}
footer h4{color:#fff;font-size:12px;letter-spacing:.08em;margin-bottom:10px;opacity:.85}
footer ul{list-style:none} footer li{margin:6px 0} footer a:hover{color:#fff}
footer .ext .ico{width:12px;height:12px;margin-left:4px;opacity:.7}
.endorse{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:18px;font-size:12px;color:#a7adbe;line-height:1.9}
.copy{margin-top:6px;font-size:11.5px;color:#8b91a4}

/* サブページ見出し・パンくず（通信の subpage.css と同じ） */
.pagehead{background:var(--soft);border-bottom:1px solid var(--line);padding:34px 0 32px}
.crumbs{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:11px}
.crumbs a:hover{color:var(--ink)} .crumbs .sep{opacity:.45}
.pagehead h1{font-size:clamp(23px,3vw,31px);line-height:1.34}
.pagehead h1 .bar{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--grad);margin-right:11px;vertical-align:middle}
.pagehead .desc{font-size:14px;color:var(--muted);margin-top:9px}

/* 本文 */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.layout>.main{min-width:0}
.aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.asidecard{border:1px solid var(--line);background:#fff;padding:18px}
.asidecard.grad{position:relative;overflow:hidden}
.asidecard.grad::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.asidecard h4{font-size:14px;font-weight:800;margin-bottom:6px}
.asidecard p{font-size:12.5px;color:var(--muted);margin-bottom:11px}
.toc{list-style:none;font-size:13.5px}
.toc li{border-bottom:1px solid var(--line)}
.toc li:last-child{border-bottom:0}
.toc a{display:block;padding:8px 0}
.toc a:hover{color:var(--blue)}
.prose{font-size:16px;line-height:1.95}
.prose>*{margin-top:18px}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:21px;line-height:1.5;padding-left:13px;border-left:4px solid var(--blue);margin-top:46px;scroll-margin-top:90px}
.prose h3{font-size:17px;margin-top:28px}
/* 機構について：ミッション・ビジョン・バリュー */
.prose .mvv{margin-top:52px;scroll-margin-top:90px}
.prose .mvv:first-child{margin-top:0}
.prose .mvv .eyebrow{margin-bottom:6px}
.prose .mvv h2{margin-top:0;border-left:0;padding-left:0;font-size:15px;color:var(--muted);letter-spacing:.06em}
.prose .mvv .stmt{font-size:clamp(22px,2.8vw,30px);font-weight:800;line-height:1.5;color:var(--ink);margin:6px 0 16px;letter-spacing:.01em}
.prose ol.values{list-style:none;padding:0;margin:18px 0 0;counter-reset:val;border-top:1px solid var(--line2)}
.prose ol.values li{counter-increment:val;position:relative;padding:18px 0 18px 52px;border-bottom:1px solid var(--line2);margin:0}
.prose ol.values li::before{content:counter(val,decimal-leading-zero);position:absolute;left:0;top:19px;font-size:15px;font-weight:800;letter-spacing:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prose ol.values h3{margin:0 0 4px;font-size:17px}
.prose ol.values p{margin:0}
.prose ul,.prose ol{padding-left:1.45em}
.prose li{margin-top:6px}
.prose a{color:var(--blue);border-bottom:1px solid transparent}.prose a:hover{border-bottom-color:currentColor}
.prose a.btn{color:inherit;border-bottom:1.5px solid var(--line2)}
.prose a.btn.pri{color:#fff;border-color:transparent}
.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--purple);padding:15px 18px;font-size:13.5px;color:#39415a}

/* データ表（法人概要など） */
table.data{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line)}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top}
table.data tbody th{width:9.5em;background:var(--soft);font-weight:700;white-space:nowrap}

/* ==========================================================================
   コーポレートサイトで足したもの
   ========================================================================== */

/* 公開前に埋める箇所（〔　〕）。見落とさないよう目立たせている。埋めたら span ごと外す。 */
.tbd{background:#fff4fb;outline:1px dashed var(--magenta);color:#9c1d72;padding:0 4px;font-weight:600}

/* トップのファーストビュー：通信の画像カルーセルの代わりに、理念のキャッチを大きく置く */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#fff}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad);opacity:.5}
.herogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding-block:84px 88px}
.hero .lead-s{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.32;letter-spacing:.01em;margin:14px 0 18px;font-weight:800}
.hero p.sub{font-size:16px;color:#39415a;line-height:1.95;max-width:34em}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .visual{position:relative;aspect-ratio:1/1;max-width:400px;justify-self:center;width:100%}
/* ヒーロー右側：分野アイコンの3×3（中央にシンボル）。マウス位置で3Dに傾く。動きは assets/js/hero.js */
.hero .visual.v2{max-width:420px}
.v2 .cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.v2 .cell{position:relative;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink);background:#fff;transition:color .5s,background .5s}
.v2 .cell svg{width:34%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.v2 .cell span{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);transition:color .5s}
.v2 .cell::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s}
.v2 .cell.on{color:var(--purple);background:var(--soft)}
.v2 .cell.on svg{transform:translateY(-2px)}
.v2 .cell.on span{color:var(--ink)}
.v2 .cell.on::after{transform:scaleX(1)}
.v2 .core{background:#fff}
.v2 .core .mk{position:absolute;inset:16%;background:var(--mark) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.v2 .cell,.v2 .cell svg,.v2 .cell::after{transition:none}}
/* 3D：盤面全体はマウス位置でわずかに傾き、乗せたマスのアイコンは大きく傾いて浮き上がる */
.v2{perspective:1100px}
.v2 .board{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--brx,0deg)) rotateY(var(--bry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.v2 .board.live{transition:transform .12s linear}
.v2 .cell{perspective:420px}
.v2 .cell.tilt{z-index:3}
.v2 .tile{position:absolute;inset:10%;border:1px solid transparent;background:transparent;box-shadow:0 0 0 rgba(26,33,56,0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,box-shadow .3s}
.v2 .cell.tilt .tile{transition:transform .08s linear,background .3s,border-color .3s,box-shadow .3s;background:#fff;border-color:var(--line2);box-shadow:calc(var(--ry,0deg) / 1deg * -.6px) calc(var(--rx,0deg) / 1deg * .6px + 14px) 26px rgba(26,33,56,.16)}
.v2 .tile svg{transform:translateZ(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s}
.v2 .tile span{transform:translateZ(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),color .5s}
.v2 .cell.tilt .tile svg{transform:translateZ(46px) scale(1.06);filter:drop-shadow(calc(var(--ry,0deg) / 1deg * -.5px) calc(var(--rx,0deg) / 1deg * .5px + 8px) 6px rgba(26,33,56,.18))}
.v2 .cell.tilt .tile span{transform:translateZ(22px)}
.v2 .cell.on .tile svg{transform:translateY(-2px)}
.v2 .cell.tilt.on .tile svg{transform:translateZ(46px) scale(1.06)}
.v2 .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;transition:opacity .3s}
.v2 .cell.tilt .sheen{opacity:1}
@media (prefers-reduced-motion:reduce){.v2 .board,.v2 .tile,.v2 .tile svg,.v2 .tile span{transition:none;transform:none!important}}

/* 3つの責任のカード */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{position:relative;border:1px solid var(--line);background:#fff;padding:26px 24px 24px}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.pillar .no{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--purple)}
.pillar h3{font-size:18px;line-height:1.5;margin:6px 0 10px}
.pillar p{font-size:14px;color:#39415a;line-height:1.85}

/* 2つの事業のカード（同じ重さで並べる） */
.biz{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bizcard{position:relative;border:1px solid var(--line);background:#fff;padding:32px 32px 30px;display:flex;flex-direction:column}
.bizcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.bizcard .kind{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.bizcard h3{font-size:22px;line-height:1.45;margin:6px 0 12px}
.bizcard p{font-size:14.5px;color:#39415a;line-height:1.9}
.bizcard ul{margin:14px 0 0;padding-left:1.2em;font-size:14px;color:#39415a}
.bizcard li{margin:4px 0}
.bizcard .acts{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px}

/* 「準備中」の表示。工事中の画像は使わず、開始時期をはっきり示す */
.soon{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:5px 14px;font-size:12.5px;font-weight:800;background:#fff;line-height:1.4}
.soon .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.soonpanel{position:relative;border:1px solid var(--line);background:#fff;padding:52px 40px 48px;text-align:center}
.soonpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.soonpanel .when{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.4;margin:18px 0 6px;letter-spacing:.02em}
.soonpanel .when .gt{font-weight:800}
.soonpanel .state{font-size:clamp(18px,2.4vw,22px);font-weight:800;color:var(--muted);letter-spacing:.3em}
.soonpanel p{font-size:15px;color:#39415a;line-height:1.95;max-width:36em;margin:22px auto 0}

/* 監修体制 */
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bmember{border:1px solid var(--line);background:#fff;padding:24px}
.bmember .role{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--purple)}
.bmember h3{font-size:17px;margin:4px 0 8px}
.bmember p{font-size:14px;color:#39415a;line-height:1.85}

/* お知らせ一覧 */
.newslist{list-style:none;border-top:1px solid var(--line)}
.newslist li{border-bottom:1px solid var(--line)}
.newslist a{display:grid;grid-template-columns:8.5em auto 1fr;gap:16px;align-items:baseline;padding:18px 4px}
.newslist a:hover h3{color:var(--blue)}
.newslist time{font-size:13px;color:var(--muted)}
.newslist .tag{font-size:11px;font-weight:800;border:1.5px solid var(--blue);color:var(--blue);border-radius:var(--r-pill);padding:1px 10px;white-space:nowrap}
.newslist h3{font-size:15.5px;line-height:1.6;font-weight:700}
.newsmeta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:10px}
.newsmeta .tag{font-size:11px;font-weight:800;border:1.5px solid var(--blue);color:var(--blue);border-radius:var(--r-pill);padding:1px 10px}

/* 帯の案内（パートナー・お問い合わせ） */
.band{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);padding:34px 38px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--sh-sm)}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.band h2{font-size:clamp(19px,2.3vw,24px);line-height:1.45}
.band p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.85}
.band .acts{display:flex;flex-wrap:wrap;gap:10px}

/* 機能の一覧（情報発信のページなど） */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feat{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px;background:#fff}
.feat h3{font-size:15.5px;margin-bottom:4px}
.feat p{font-size:13.5px;color:#39415a;line-height:1.85}

/* お問い合わせの種類 */
.ctypes{list-style:none;border-top:1px solid var(--line);padding:0}
.ctypes li{border-bottom:1px solid var(--line);padding:14px 2px;display:grid;grid-template-columns:13em 1fr;gap:16px;margin:0}
.ctypes b{font-size:15px}
.ctypes span{font-size:14px;color:#39415a}
.mailbox{border:1px solid var(--line);background:var(--soft);padding:22px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.mailbox .addr{font-size:18px;font-weight:800}

@media(max-width:1000px){
  .head{flex-wrap:wrap;height:auto;row-gap:0;padding-top:12px}
  nav.main{order:10;width:100%;margin:6px 0 0;padding:0 0 4px;gap:18px;font-size:13.5px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
}
@media(max-width:900px){
  section.blk{padding:48px 0}
  .herogrid{grid-template-columns:1fr;padding-block:52px 56px;gap:8px}
  .hero .visual{display:none}
  .pillars,.biz,.board,.feats{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .aside{position:static}
  .band{grid-template-columns:1fr;padding:28px 24px}
  .fcols{grid-template-columns:1fr 1fr}
  .fcols .fbrand{grid-column:1/-1}
  .soonpanel{padding:40px 22px 38px}
  .newslist a{grid-template-columns:auto 1fr;row-gap:4px}
  .newslist h3{grid-column:1/-1}
  .ctypes li{grid-template-columns:1fr;gap:2px}
  table.data tbody th{width:7em;white-space:normal}
  .shead{flex-wrap:wrap}
}
@media(max-width:560px){
  .head{gap:8px}
  .brand{gap:8px}
  .brand .mk{width:42px;height:27px}
  .brand .wm{font-size:15px}
  .brand .wm small{font-size:9.5px}
  .bizcard{padding:26px 22px 24px}
  table.data th,table.data td{padding:11px 12px}
}
@media(max-width:380px){
  .brand .wm small{display:none}
  .head .hbtns .btn.sm{padding:7px 10px}
}