/* ===========================================================================
   当社のつよみ 専用スタイル
     B案 = 写真プレーンの奥行きスタック（WebGL・sticky・白背景）
     F案 = 線の図版（SVG・全幅フルブリード・通常スクロール・ループアニメ）
   ※ strengths.html でのみ読み込む。TOP・他ページには影響なし。
   ※ body.bw の一括指定（背景透明・文字#1a1a1a）に勝つため要所で !important
   =========================================================================== */

/* ---- モード出し分け（body[data-sw-mode] で切替） ---- */

/* ===========================================================================
   F案：線の図版（上に全幅／左下キャッチ／右下ボディ・通常スクロール）
   =========================================================================== */
.swf { background: #ffffff !important; }
.swf__block {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto;   /* 図版とテキストを密着させ、塊ごと上下中央に */
  align-content: center;
  padding-block: clamp(32px, 7vh, 88px);
}
/* 図版：画面の両端まで伸ばす */
.swf__fig {
  display: block;
  width: 100%;
  height: auto;
  align-self: center;
}
/* 左右50%。見出しとボディを同じ行に置くことで、始点の高さが揃う */
.swf__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "meta  ."
    "title body";
  column-gap: clamp(20px, 4vw, 72px);
  align-items: start;
  padding-inline: var(--gutter, 44px);
  margin-top: clamp(8px, 1.6vh, 22px);   /* 図版のすぐ下 */
}
.swf__meta  { grid-area: meta; }
.swf__title { grid-area: title; }
.swf__body  { grid-area: body; }
.swf__no {
  display: block;
  font-family: var(--serif-en, serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1;
  color: rgba(26,26,26,.26) !important;
  margin-bottom: 6px;
}
.swf__en {
  font-family: var(--serif-en, serif);
  letter-spacing: .14em; font-size: clamp(.68rem, .85vw, .78rem);
  color: #8a8a8a !important; margin-bottom: 8px;
}
/* 見出し：F案のなかで一番大きい階層 */
.swf__title {
  font-family: var(--sans-ja, sans-serif);
  font-size: clamp(1.15rem, 1.85vw, 1.6rem);
  font-weight: 400; line-height: 1.6; letter-spacing: .03em;
  color: #1a1a1a !important;
}
/* 上段ボディ：右カラムいっぱい（＝下段の枠線と同じ右端）まで広げる */
.swf__body { justify-self: stretch; }

/* 下段：肉付け情報（2カラム。各カラム＝上にキャッチ／下にボディ） */
.swf__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  align-items: stretch;
  padding-inline: var(--gutter, 44px);
  margin-top: clamp(56px, 9.5vh, 118px);   /* 上の英文ボディとの間隔 */
}
/* 各カラムをグレーの細い線で囲み、中は「テキスト｜正方形写真」の2カラム */
.swf__subcol {
  border: 1px solid #dcdad5 !important;
  padding: clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(110px, 12vw, 168px);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
/* 正方形写真：枠内の右の余白に収める */
.swf__subfig {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0efec !important;
}
.swf__subfig img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* ワイヤーの画像非表示（body.bw img）に勝たせて実写真を表示 */
body.bw .swf__subfig img { opacity: 1 !important; }
/* リードコピー：見出しより小さく */
.swf__catch2 {
  font-family: var(--sans-ja, sans-serif);
  font-size: clamp(.86rem, 1.12vw, 1.02rem);
  font-weight: 400; line-height: 1.8; letter-spacing: .04em;
  color: #1a1a1a !important;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
.swf__subcol .swf__lead { max-width: 58ch; font-size: clamp(.76rem, .9vw, .86rem); }
.swf__lead {
  font-family: var(--sans-ja, sans-serif);
  font-size: clamp(.82rem, 1vw, .95rem); line-height: 2;
  color: #4a4a4a !important;
}
.swf__lead-en {
  margin-top: 12px; font-size: clamp(.7rem, .88vw, .8rem);
  line-height: 1.85; color: #a7a7a7 !important;
}

/* ---- 図版の線・ラベル ---- */
.swf__fig .ln, .swf__fig .ln * {
  fill: none; stroke: #1a1a1a; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.swf__fig .ln--faint, .swf__fig .ln--faint * { stroke: #c4c2bd; }
.swf__fig .ln--dash, .swf__fig .ln--dash * { stroke-dasharray: 3 4; }
.swf__fig .dot, .swf__fig .dot * { fill: #1a1a1a; stroke: none; }
.swf__fig .fill { fill: #1a1a1a; stroke: none; }
.swf__fig .lb {
  fill: #1a1a1a; stroke: none;
  font-family: var(--serif-en, serif);
  font-size: 15px; letter-spacing: .18em;
}
.swf__fig .lb--sm { font-family: var(--serif-en, serif); font-size: 12.5px; letter-spacing: .16em; fill: #1a1a1a; }
.swf__fig .lb--xs { font-family: var(--serif-en, serif); font-size: 11px; letter-spacing: .12em; fill: #6b6b6b; }
.swf__fig .lb--tiny { font-family: var(--serif-en, serif); font-size: 9.5px; letter-spacing: .18em; fill: #a2a09b; }

/* ---- アニメーション（ループ） ---- */
.swf__fig [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.swf__fig [data-fade] { opacity: 0; }
.swf__block.is-in .swf__fig [data-draw] {
  animation: swf-draw 8s var(--ease, ease) var(--d, 0s) infinite;
}
.swf__block.is-in .swf__fig [data-fade] {
  animation: swf-fade 8s var(--ease, ease) var(--d, 0s) infinite;
}
@keyframes swf-draw {
  0%   { stroke-dashoffset: 1; }
  16%  { stroke-dashoffset: 0; }
  78%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
@keyframes swf-fade {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}
/* 04：軌道リングはゆっくり回転 */
.swf__fig .orbit { transform-origin: 1080px 262px; animation: swf-orbit 70s linear infinite; }
@keyframes swf-orbit { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .swf__fig .orbit { animation: none; }
  .swf__block.is-in .swf__fig [data-draw],
  .swf__block.is-in .swf__fig [data-fade] { animation: none; }
  .swf__fig [data-draw] { stroke-dashoffset: 0; }
  .swf__fig [data-fade] { opacity: 1; }
}


@media (max-width: 860px) {
  .swf__foot {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "title" "body";
    row-gap: 14px;
  }
  .swf__sub { grid-template-columns: 1fr; gap: 16px; }
  .swf__subcol { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; }
  .swf__body { justify-self: stretch; }
}

/* ---- 回遊エリア：bw の一括指定（背景透明・文字#1a1a1a）に勝たせる ---- */
body.bw .swf__subfig { background: #f0efec !important; }