/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;padding:var(--space-13) 0;background:var(--color-surface-brand)}
.hero__bg{position:absolute;inset:0}
.hero__bg picture{display:contents}   /* picture を挟んでも img が直接の子と同じに振る舞う */
/* 図版は右下寄せ。寸法はヒーローの高さで決め、はみ出しは overflow:hidden が切る */
.hero__bg img{
  position:absolute;inset:auto 0 0 auto;
  width:auto;height:100%;max-width:none;
  transform:translateX(8%) scale(.9);transform-origin:right bottom;
}
/* 本文の列に掛かる図版をベージュのベールで沈める。704px＝本文列の右端（余白32＋本文672） */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--color-surface-brand) 70%,transparent) 0,
    color-mix(in srgb,var(--color-surface-brand) 45%,transparent) 704px,
    transparent 960px);
}
/* 下端を白へ落とし、次の節（白地）と地続きにする */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(180deg,transparent,var(--color-surface));
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero__content{max-width:672px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-7)}
.hero__title{
  font-size:var(--text-4xl);line-height:var(--leading-4xl);letter-spacing:.08em;
  color:var(--color-text-heading);
}
/* 補足の色にしない。図版に重なると 2.7 まで落ちる（本文の色なら 6.22 を保つ） */
.hero__text{color:var(--color-text)}
.hero__actions{display:flex;gap:var(--space-4)}

/* ---------- ソリューション ---------- */
.solutions__lead{max-width:var(--max-text);margin-top:var(--space-4);color:var(--color-text-subtle)}
/* 群は1枚のベージュの面で示し、カードは白に反転する */
.solution-group{
  margin-top:var(--space-9);
  padding:var(--space-8);
  background:var(--color-surface-brand);
}
.solution-group .card{background:var(--color-surface)}
/* 型の特徴チップ。分類のタグ（.tag）と役割が違うため形も分ける（丸・本文の文字色） */
.solution-group__feats{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.solution-group__feat{
  display:inline-flex;align-items:center;
  padding:var(--space-1) var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  font-size:var(--text-xs);line-height:1.5;color:var(--color-text);white-space:nowrap;
}
.solution-group__desc{margin-top:var(--space-4);color:var(--color-text-subtle)}
.solution-group__cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  margin-top:var(--space-6);
}
/* 節の導線。右下・btn--tertiary・btn--sm */
.section__more{display:flex;justify-content:flex-end;margin-top:var(--space-6);padding-right:var(--space-2)}
.solution-group .section__more{padding-right:0}
.divider{margin:0;border:0;border-top:1px solid var(--color-border)}

/* ---------- フィロソフィー ---------- */
.philosophy{display:flex;flex-direction:column;gap:var(--space-12)}
.philosophy__lead{max-width:var(--max-text);color:var(--color-text-subtle)}
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
/* リンクでない面。radius-xl・金 2px の枠で .card と形を分ける */
.value-card{
  display:grid;grid-template-columns:3rem 1fr;
  grid-template-areas:"figure title" "text text";
  column-gap:var(--space-4);row-gap:var(--space-4);align-items:center;
  padding:var(--space-7) var(--space-6);
  background:var(--color-surface-brand);
  border:2px solid color-mix(in srgb,var(--color-brand-gold) 30%,transparent);
  border-radius:var(--radius-xl);
}
.value-card__figure{
  grid-area:figure;
  display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:var(--radius-full);
  background:var(--color-surface-inverse);
}
.value-card__icon{width:1.5rem;height:1.5rem;color:var(--color-surface-brand)}
.value-card__title{
  grid-area:title;
  font-size:var(--text-xl);letter-spacing:.04em;line-height:1.5;
  color:var(--color-text-heading);
}
.value-card__text{grid-area:text;font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}

/* ---------- フィロソフィーの図（実業⇄開発の循環） ----------
   円・矢印はSVG、言葉はHTMLで重ねる（書体・色がトークンに追従し、文字が選択できる）。
   動きは1回だけ・4.6s で終える＝5s を超えると停止手段が要る（WCAG 2.2.2） */
.cycle{display:flex;flex-direction:column;gap:var(--space-9)}
/* 器の比率は viewBox と同じ 760:300 に固定＝% の座標が SVG とずれない。
   文字は cqi で器の幅に追従。cqi 未対応は直前のトークン指定に落ちる（2行書き） */
.cycle__figure{position:relative;max-width:820px;width:100%;margin-inline:auto;aspect-ratio:760/300;container-type:inline-size}
.cycle__svg{position:absolute;inset:0;width:100%;height:100%}
/* 図が画面に入るまで動かさない。class は JS が外す（→ assets/js/header.js）＝JS が無ければ読み込み時に流れる */
.cycle__figure--deferred .cycle__chev,
.cycle__figure--deferred .cycle__lit-ring,
.cycle__figure--deferred .cycle__lit-fill{animation:none}
.cycle__ring{fill:none;stroke:var(--color-text-subtle);stroke-width:1}
.cycle__chev{
  fill:none;stroke:var(--color-brand-gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.22;
  animation:cycle-chev 6s linear forwards;
}
@keyframes cycle-chev{
  0%{opacity:.22;stroke-width:2}
  5%{opacity:1;stroke-width:3}
  13%{opacity:1;stroke-width:2}
  100%{opacity:1;stroke-width:2}
}
.cycle__lit-ring{fill:none;stroke:var(--color-brand-gold);stroke-width:2;opacity:0}
.cycle__lit-fill{fill:color-mix(in srgb,var(--color-brand-gold) 10%,transparent);opacity:0}
.cycle__lit-ring--r,.cycle__lit-fill--r{animation:cycle-lit-r 6s linear forwards}
@keyframes cycle-lit-r{
  0%,16%{opacity:0}
  21%{opacity:1}
  44%{opacity:1}
  52%{opacity:0}
  100%{opacity:0}
}
.cycle__lit-ring--l,.cycle__lit-fill--l{animation:cycle-lit-l 6s linear forwards}
@keyframes cycle-lit-l{
  0%{opacity:1}
  6%{opacity:0}
  66%{opacity:0}
  71%{opacity:1}
  100%{opacity:1}
}
/* 言葉。円の中心（145/760・615/760）に重ねる */
.cycle-pole{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;gap:var(--space-2);
  text-align:center;pointer-events:none;
}
.cycle-pole--l{left:19.1%}
.cycle-pole--r{left:80.9%}
.cycle-pole__title{
  font-weight:var(--weight-bold);
  font-size:var(--text-4xl);font-size:clamp(15px,4.2cqi,2rem);
  letter-spacing:.14em;text-indent:.14em;line-height:1.2;
  color:var(--color-text-heading);
}
.cycle-pole__text{
  font-size:var(--text-xs);font-size:clamp(10px,1.6cqi,.75rem);
  line-height:1.7;color:var(--color-text-subtle);
}
/* 流れの名前。面でなく文字の縁取りで地の色を置く＝狭い幅で白い矩形が円に被らない */
.cycle-flow{
  position:absolute;left:50%;transform:translateX(-50%);
  padding:var(--space-1) 0;
  white-space:nowrap;line-height:1.5;color:var(--color-text);
  font-size:var(--text-sm);font-size:clamp(11px,1.85cqi,.875rem);
  text-shadow:
    0 0 3px var(--color-surface),0 0 3px var(--color-surface),
    0 0 3px var(--color-surface),0 0 3px var(--color-surface),
    0 0 6px var(--color-surface);
}
.cycle-flow--top{top:22%}
.cycle-flow--bottom{top:70%}
.cycle__gains{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.cycle-gain{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding-left:var(--space-4);border-left:2px solid var(--color-brand-gold);
}
.cycle-gain__label{font-weight:var(--weight-bold);font-size:var(--text-md);letter-spacing:.04em;color:var(--color-text-heading)}
.cycle-gain__text{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}
/* 動きを止める設定では流し終わった状態を出す。向きはシェブロンの形が言うので情報は落ちない */
@media (prefers-reduced-motion:reduce){
  .cycle__chev,.cycle__lit-ring,.cycle__lit-fill{animation:none}
  .cycle__chev{opacity:1}
  .cycle__lit-ring,.cycle__lit-fill{opacity:0}
}

/* ---------- FAQ（一覧の共通スタイルは components.css の .faq-list） ---------- */
.faq{background:var(--color-surface-brand)}

/* ---------- お知らせ ---------- */
.news{background:var(--color-surface-brand)}
.news .news-list{margin-top:var(--space-9)}

/* ---------- レスポンシブ（ヘッダーの切り替えは components.css） ---------- */
@media (max-width:1080px){
  .solution-group__cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .section{padding:var(--space-11) 0}
  .hero{padding:var(--space-12) 0}
  /* btn--wide が2つ並ぶと 400px を超えるため縦に積む */
  .hero__actions{flex-direction:column;align-self:stretch;max-width:var(--max-action)}
  .solution-group{padding:var(--space-6) var(--space-5)}
  .solution-group__cards{grid-template-columns:1fr;gap:var(--space-4)}
  .value-cards{grid-template-columns:1fr}
  .cycle__gains{grid-template-columns:1fr}
}
/* 図の中の切り替えは器の container query で決める。しきい値は viewport 560px・430px 相当（左右余白 24px を引いた値） */
@container (max-width:512px){
  .cycle-pole__text{display:none}
}
@container (max-width:382px){
  /* ラベルは下限（11px）で縮み止まるため、円の上端・下端へ逃がす */
  .cycle-flow--top{top:0}
  .cycle-flow--bottom{top:auto;bottom:0}
}