/* ==========================================================================
   base.css — 白紙の土台（デザインは何も決めていない）
   ・色・フォント・角丸・余白の値は、案件ごとに「02_デザインの決め方.md」で決めて差し替える。
   ・ここにあるグレーの値は「まだ決めていない」印。このまま納品しないこと。
   ・見た目の部品（ヘッダー、ヒーロー、カードなど）は案件ごとに新しく作る。過去作品のCSSは流用しない。
   ========================================================================== */
:root{
  /* --- 色（ロゴから決める。役割ごとに1つずつ） --- */
  --c-bg:#FFFFFF;        /* 背景 */
  --c-bg-2:#F2F2F2;      /* 背景2（セクションの切り替え） */
  --c-ink:#222222;       /* 本文 */
  --c-sub:#666666;       /* 補足 */
  --c-line:#DDDDDD;      /* 罫線 */
  --c-main:#555555;      /* メイン色（見出し・ブランド） */
  --c-accent:#888888;    /* 差し色（CTA・強調） */
  --c-on-accent:#FFFFFF; /* 差し色の上の文字 */
  /* --- 文字（日本語・英字・見出しの3役。02の候補から選ぶ） --- */
  --f-body:system-ui,sans-serif;
  --f-head:system-ui,sans-serif;
  --f-en:system-ui,sans-serif;
  --fw-body:400; --fw-head:700;
  --ls-body:.04em; --ls-head:.08em;
  --lh-body:1.9;
  /* --- 形 --- */
  --radius:0px;          /* 角丸（0／小さめ／大きめ／丸 を案件で決める） */
  --pad:clamp(20px,5vw,80px);
  --sec:clamp(80px,11vw,160px);
  --max:1160px;
  --hd:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-weight:var(--fw-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--c-main);outline-offset:3px}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.u-pc{display:inline}@media(max-width:767px){.u-pc{display:none}}
.u-sp{display:none}@media(max-width:767px){.u-sp{display:inline}}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--c-ink);color:var(--c-bg);padding:8px 14px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(var(--max),100% - var(--pad)*2);margin-inline:auto}
.sec{padding:var(--sec) 0}
h1,h2,h3{font-family:var(--f-head);font-weight:var(--fw-head);letter-spacing:var(--ls-head);text-wrap:balance}

/* ==========================================================================
   動きの部品（motion.js と対で使う）。見た目は持たない。仕組みだけ。
   ========================================================================== */
/* 表示演出（JSが無くても最終的に表示される） */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.12s}[data-reveal-d="2"]{transition-delay:.24s}[data-reveal-d="3"]{transition-delay:.36s}
/* 文字分割 */
[data-split] .ch{display:inline-block}
.js-anim [data-split] .ch{opacity:0;transform:translateY(.5em)}
/* 写真の開き（初期状態はJSが付ける） */
[data-clip]{overflow:hidden}
[data-clip] img{width:100%;height:100%;object-fit:cover}
/* 重なるカード：子要素が順に sticky で積み上がる */
[data-stack]{display:grid;gap:clamp(20px,3vw,32px)}
[data-stack] > *{position:sticky;top:calc(var(--hd) + 20px);transform-origin:50% 0}
@media(max-width:800px){[data-stack] > *{position:relative;top:auto}}
/* 横スクロール（PCは縦スクロールで横に進む／スマホは指で横スクロール） */
[data-hscroll] [data-hscroll-track]{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
[data-hscroll] [data-hscroll-track]::-webkit-scrollbar{display:none}
[data-hscroll] [data-hscroll-track] > *{flex:none;scroll-snap-align:start}
.js-anim.is-pinned [data-hscroll] [data-hscroll-track]{overflow:visible}
[data-hscroll-progress]{position:relative;height:2px;background:var(--c-line);margin:20px var(--pad) 0}
[data-hscroll-progress] > i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c-main)}
/* 流れる帯 */
[data-marquee]{overflow:hidden}
[data-marquee] > .mq{display:flex;gap:16px;width:max-content;animation:mq var(--mq-dur,50s) linear infinite}
[data-marquee="rev"] > .mq{animation-direction:reverse}
[data-marquee]:hover > .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* 線を描く */
.js-anim [data-draw] path,.js-anim [data-draw] line,.js-anim [data-draw] circle,.js-anim [data-draw] polyline{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
/* オープニング（初回のみ。中身は案件ごとに作る） */
.op{display:none}
.is-first .op{display:grid;place-items:center;position:fixed;inset:0;z-index:900;background:var(--c-bg)}
.is-first body{overflow:hidden}
/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-marquee] > .mq{animation:none}
}