/* ============================================================
   SP版：セクションごとの作り込み（900px以下）
   sp.css の土台の上に、節ごとの見せ方を載せる。
   ============================================================ */

@media (max-width: 900px) {

/* ---- 赤ベタコピー ------------------------------------------
   B11 のタグライン節。段組みは原稿の改行どおり、語は読み順に立ち上がる。
   「限界なんてない。」（原稿で明朝の .mi 指定）だけ一回り大きい */
.sec--copy { background: var(--red); padding-block: var(--s6); position: relative; z-index: 0; }
.sec--copy .a {
  color: #fff; font-size: var(--sp-lead); line-height: var(--lh-ja);
  text-align: left; font-weight: 700; text-wrap: balance;
  max-width: min(68rem, 100%);
  overflow-wrap: anywhere;   /* 長い欧文が1語で溢れないように */
}
.sec--copy > p.a { position: relative; z-index: 1; }   /* 飛沫より前 */
.sec--copy .a span.mi { font-size: var(--t-3xl) !important; }
/* 段落の切れ目（原稿の空行） */
.sec--copy .tw-gap { display: block; height: var(--sp-300); }
/* 語ごとの立ち上がり。淡色→本色を読み順に送る */
.sec--copy .tw {
  color: rgba(11, 2, 0, .3);
  transition: color var(--dur) var(--ease);
  transition-delay: var(--tw-d, 0ms);
}
.sec--copy .tw.is-lit { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .sec--copy .tw { color: var(--ink); transition: none; }
}

/* 飛沫。PCと同じ素材（splatter-left/right.svg）を画面端から食い込ませる。
   置き場所もPCと同じ：左は下寄り、右は上寄り。文字の後ろに敷く */
.sec--copy .clip-x {
  display: block; position: absolute; inset: 0;
  top: 0; left: 0; width: auto; height: auto;
  overflow: hidden; pointer-events: none; padding: 0;
}
.sec--copy .clip-x .b {
  position: absolute; aspect-ratio: auto; width: auto; padding: 0;
}
.sec--copy .clip-x .b:first-child {   /* 左の飛沫（PC: x-120 の左端食い込み） */
  left: -9.6rem; right: auto; bottom: -8rem; top: auto;
  width: 24rem; height: 26.8rem;
}
.sec--copy .clip-x .b:last-child {    /* 右の飛沫（PC: 右上） */
  right: -8rem; left: auto; top: -6.4rem; bottom: auto;
  width: 22rem; height: 20.8rem;
}
.sec--copy .clip-x .b > img { width: 100%; height: 100%; }

/* ---- OUR BUSINESS（VISION / MISSION / VALUE） --------------- */
.sec--business { padding-block: var(--s6) 0; --gap: var(--s6); }
/* 透かしロゴは薄い装飾。SPでは主張させずラベルの上に小さく置く */
.sec--business .b.op30 {
  width: var(--sp-700); aspect-ratio: 1; opacity: .25;
}
.sec--business .b.op30 > img { object-fit: contain; }
.sec--business .ol svg { fill: #fff; height: var(--t-xl); }
.sec--business .a.w8 { color: var(--ink-3); }

/* taste-skill v2: 動くマーキーは1ページ1本まで（Marquee max-one-per-page）。
   動きは最初の VISION の帯にだけ残し、MISSION / VALUE の帯は
   静止した写真バンドとして働かせる。静止側は texture ではなく
   content になるので不透明度を上げる */
.sec--business .u--mission .strip__track,
.sec--business .u--value .strip__track {
  animation: none; left: 0; opacity: .85;
}


/* VALUE の3語。
   「箱の下端合わせ＋ずらし」はフォントの縦メトリクス差（ヒラギノ/Noto）が
   そのまま見た目に出て、実機とプレビューで揃い方が変わってしまった。
   今回はフォント非依存の組みに変える：
     ・明朝と角ゴは align-self: baseline で「同じベースライン」に載せる。
       文字組みとして正しい揃え方なので、どの端末のどのフォントでも必ず揃う
     ・下敷きは行いっぱい（80px）に敷き、文字は同量の relative シフトで
       光学的に中央へ置くだけ。行ごとの差が生まれる要素がない */
.sec--business .u--value {
  display: grid; grid-template-columns: max-content 1fr;
  align-items: start;
  column-gap: var(--sp-25);   /* 明朝と角ゴの間。12pxでは「挑 戦」に割れて読める */
}
.sec--business .u--value > * { grid-column: 1 / -1; }

/* 下敷き。.sec .fill の一括非表示 (0,2,0) をここ (0,4,0) で戻す */
.sec--business .u--value .fill.value-plate {
  display: block; position: static;
  height: var(--sp-800); align-self: center; z-index: 0;
  margin-left: var(--sp-75);
  width: 100%;
}
/* 右端は段違いにしてリズムを写す */
.sec--business .u--value > .fill[data-o="4"]  { grid-row: 4; width: calc(100% - var(--sp-900) - var(--sp-75)); }
.sec--business .u--value > .fill[data-o="7"]  { grid-row: 5; width: calc(100% - var(--sp-500) - var(--sp-75)); }
.sec--business .u--value > .fill[data-o="10"] { grid-row: 6; width: calc(100% - var(--sp-200) - var(--sp-75)); }

.sec--business .u--value .a.mincho {
  grid-column: 1; z-index: 1; align-self: baseline;
  font-family: var(--mincho); font-weight: 800;
  font-size: var(--t-6xl); line-height: 1; color: var(--red);
  padding-inline: 0; padding-inline-start: var(--sp-pad);
  position: relative; top: var(--sp-100);   /* 皿の中の光学センターへ。両方同量 */
}
.sec--business .u--value > [data-o="5"]  { grid-row: 4; }
.sec--business .u--value > [data-o="8"]  { grid-row: 5; }
.sec--business .u--value > [data-o="11"] { grid-row: 6; }

.sec--business .u--value .a.w7.gray {
  grid-column: 2; z-index: 1; align-self: baseline;
  font-size: var(--t-4xl); line-height: 1; color: var(--ink); font-weight: 700;
  letter-spacing: .02em; padding-inline: 0;   /* 語中の字送りも詰める */
  position: relative; top: var(--sp-100);   /* 明朝と同量 → ベースライン共有が保たれる */
}
.sec--business .u--value > [data-o="6"]  { grid-row: 4; }
.sec--business .u--value > [data-o="9"]  { grid-row: 5; }
.sec--business .u--value > [data-o="12"] { grid-row: 6; }

.sec--business .u--value > [data-o="13"] { grid-row: 7; margin-top: var(--sp-500); }
/* 「続きを読む」は本文(7)と写真帯(9)の間の行に入れる。畳んでいないときは空行として潰れる */
.sec--business .u--value > .sp-more { grid-row: 8; grid-column: 1 / -1; }
.sec--business .u--value > [data-o="14"] { grid-row: 9; margin-top: var(--sp-300); }

/* VALUEは幾何が命。出現の途中でも形が変わって見える演出は持ち込まない */
.js .sec--business .u--value [data-rv] { scale: none; clip-path: none; }
.js .sec--business .u--value .fill[data-rv] {
  translate: none; filter: none; transition-property: opacity;
}

/* ---- MERIT ---------------------------------------------------
   XD: 白いベタ矩形(667x118・角丸なし)の上に赤の見出しが乗り、
       白の巨大英字 MERIT{n} がその上端に食い込む。角丸のピルではない */
.sec--merit { background: var(--red); padding-block: var(--s6); --gap: var(--s6); }
.sec--merit .a.dl { color: #fff; }
.sec--merit .u--merit .a.disp.dl { color: #fff; font-size: var(--sp-sub); }
.sec--merit .u--merit .fill { display: none; }
.sec--merit .a.w8.red {
  align-self: start; width: fit-content; max-width: 100%;
  background: #fff; color: var(--red);
  font-size: var(--sp-statement); font-weight: 700; line-height: var(--lh-2xl);
  padding: var(--sp-100) var(--sp-pad);
  margin-top: calc(var(--sp-200) * -1);   /* 巨大英字の字面に食い込ませる */
  border-radius: 0; text-align: left;
}
.sec--merit .a.w5 { color: #fff; }
.sec--merit .u--merit .b { margin-top: var(--sp-200); aspect-ratio: 16 / 10; }

/* ---- ONE DAY SCHEDULE ----------------------------------------
   XD: 塗りなし＋白2px枠のカード＋角丸ピルの時刻。
   縦一列に積み替えるが、カードと枠という造形はそのまま残す。
   本文だけは #cbcbcb 地に白だと読めないので墨に置き換えている */
.sec--oneday { --gap: var(--s4); }
.sec--oneday .a.dl { color: var(--red); }
.sec--oneday .u--head .a.disp.dl { color: #fff; }   /* ONE DAY SCHEDULE は地に沈める（XD通り） */
.sec--oneday .u--head { order: 0; }
.sec--oneday .u--lead { order: 1; }
.sec--oneday .u--lead .a { color: var(--ink-3); }
.sec--oneday .u--step { order: 2; }

.sec--oneday .u--step {
  border: var(--sp-25) solid #fff; border-radius: 0;
  margin-inline: var(--sp-pad);
  padding: 0 var(--sp-200) var(--sp-300); gap: var(--sp-200);
}
.sec--oneday .u--step > * { padding-inline: 0; }
/* 写真はカードの内寸いっぱい。隙間0なので入れ子の角丸は外側と同じ（B3） */
.sec--oneday .u--step .b {
  order: 1; width: calc(100% + var(--sp-400)); max-width: none;
  margin-inline: calc(var(--sp-200) * -1); margin-top: 0;
  aspect-ratio: 16 / 9; border-radius: 0;
}
.sec--oneday .u--step .a.c.white:not(.w6):not(.w3) {   /* 時刻ピル */
  order: 2; align-self: start; width: fit-content;
  background: #fff; color: var(--red);
  font-size: var(--sp-caption); font-weight: 700; letter-spacing: .1em;
  line-height: var(--lh-xs);
  padding: var(--sp-75) var(--sp-200); border-radius: var(--r-full);
}
.sec--oneday .u--step .a.c.w6.white {    /* 見出し */
  order: 3; color: var(--ink); font-size: var(--t-xl); font-weight: 700;
  line-height: var(--lh-xl); margin-top: calc(var(--sp-200) * -1 + var(--sp-50));
}
.sec--oneday .u--step .a.c.w3.white {    /* 説明 */
  order: 4; color: var(--ink-3); font-size: var(--sp-small); line-height: var(--lh-ja);
  margin-top: calc(var(--sp-200) * -1 + var(--sp-50));
}

/* ---- MEMBER --------------------------------------------------
   全幅の縦写真 → 氏名を写真の下端に重ねる（PC版の重ね言語を継承） */
.sec--member { background: var(--red); padding-block: var(--s6) 0; --gap: var(--s6); }
.sec--member .a.dl { color: #fff; }
.sec--member .u--member .fill { display: none; }
/* 元写真はぴったり 4:3 の横位置。同じ比で出せば切り抜きゼロで
   顔も全身も入り、高さも 281px に収まる。
   member-02 にはPC用のズーム（translateY+scale）がインラインで付いていて
   SPでは顔が枠の外に押し出されるため、ここで無効化する */
.sec--member .u--member .b { order: 1; aspect-ratio: 4 / 3; }
.sec--member .u--member .b > img { transform: none !important; }
.sec--member .u--member .a.disp.gray {
  order: 2; color: var(--pale);
  /* 一番長い MISAKI TAKAHASHI が狭い実機で2行に折れると
     3人の間隔が揃わなくなる。折り返しを禁止し、画面が狭いときは
     名前のほうを縮めて全員1行に保つ */
  font-size: min(var(--sp-name), 9.6vw); line-height: var(--lh-4xl);
  white-space: nowrap;
  margin-top: calc(var(--sp-300) * -1); position: relative;
  /* 見出しの裁ち落としは氏名には適用しない。名前は全部読ませる */
  margin-inline-start: 0; padding-inline: var(--sp-pad);
}
.sec--member .u--member .a.w5.pale { order: 3; color: var(--pale); margin-top: var(--sp-300); }
.sec--member .u--member:last-of-type { padding-bottom: var(--s6); }

/* ---- MESSAGE -------------------------------------------------- */
.sec--message .a.dl { color: var(--red); }
/* 元写真は横位置(3:2)。社員写真と同じ4:3で揃え、
   PC用の拡大トランスフォーム（インライン指定）はSPでは外す */
.sec--message .u--message .b { order: 1; aspect-ratio: 4 / 3; }
.sec--message .u--message .b > img { transform: none !important; }
.sec--message .u--message h3.a.w7.red {
  order: 2; color: var(--red); font-size: var(--sp-statement);
  line-height: var(--lh-ja); margin-top: var(--sp-500);
}
.sec--message .u--message .a.w5 { order: 3; }

/* ---- 会社概要 -------------------------------------------------- */
.sec--company { --gap: var(--sp-500); }
.sec--company .a.dl { color: var(--red); }
.sec--company > h2.a, .sec--flow > h2.a { font-size: var(--sp-h2); letter-spacing: .02em; }
.corp { position: static; width: auto; }
.corp dl { display: block; margin: 0; }
.corp dt {
  display: block; width: auto; background: var(--red); color: #fff;
  font-size: var(--sp-small); font-weight: 600; line-height: var(--lh-sm);
  letter-spacing: .06em;
  padding: var(--sp-75) var(--sp-200); border-radius: 0; margin-top: var(--sp-300);
}
.corp dt:first-of-type { margin-top: 0; }
.corp dd {
  display: block; width: auto; background: #fff; color: var(--ink-2);
  font-size: var(--sp-small); font-weight: 400; line-height: var(--lh-ja);
  padding: var(--sp-200); margin: 0; border-radius: 0;
}

/* ---- FLOW ------------------------------------------------------ */
.sec--flow { --gap: var(--sp-500); }
.sec--flow .a.dl { color: var(--red); }
/* リストは中身の幅で確定させて中央へ。左に寄せると右が空洞になる */
.flow {
  position: static; display: grid; gap: var(--s3); padding: 0;
  width: fit-content; margin-inline: auto;
}
.flow li {
  position: static; width: auto; transform: none; translate: none;
  display: grid; grid-template-columns: var(--sp-700) 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: var(--sp-200); row-gap: 0; text-align: left;
}
.flow__circle { grid-area: 1 / 1 / 3 / 2; align-self: center; }
.flow__step   { grid-area: 1 / 2 / 2 / 3; align-self: end; }
.flow__label  { grid-area: 2 / 2 / 3 / 3; align-self: start; }
.flow__circle { width: var(--sp-700); height: var(--sp-700); margin: 0; }
.flow__circle img { width: var(--t-4xl); }
.flow__step  { margin: 0; font-size: var(--sp-caption); color: var(--gray-label);
               line-height: var(--lh-xs); }
.flow__label { margin: var(--sp-25) 0 0; font-size: var(--t-xl); line-height: var(--lh-xl); }

/* ---- Q&A -------------------------------------------------------- */
.sec--qa .a.dl { color: var(--red); }
.qa { position: static; width: auto; }
.qa details { margin-bottom: var(--s2); }
.qa summary {
  height: auto; min-height: var(--sp-600); padding: var(--sp-200);
  font-size: var(--sp-body); letter-spacing: .04em; line-height: var(--lh-base);
  border-radius: 0;
}
.qa .qa__a {
  min-height: 0; padding: var(--sp-200); font-size: var(--sp-small);
  line-height: var(--lh-ja); letter-spacing: .04em; border-radius: 0;
}

/* ---- ENTRY ------------------------------------------------------ */
.sec--entry { text-align: center; --gap: var(--s3); }
.sec--entry .a.dl { color: var(--red); }
.sec--entry .a { text-align: center; }
.sec--entry .cta {
  position: static; display: flex; align-items: center; justify-content: center;
  gap: var(--sp-200); width: auto; height: auto; min-height: var(--sp-700);
  margin-inline: var(--sp-pad); padding: var(--sp-100) var(--sp-300);
  border-radius: var(--r-full);
}
.cta__logo  { position: static; width: var(--sp-400); height: var(--sp-400); flex: none; }
.cta__arrow { position: static; width: var(--sp-200); height: var(--sp-300); flex: none; }
.cta__txt {
  position: static; width: auto; text-align: left;
  font-size: var(--sp-body); line-height: var(--lh-base); letter-spacing: .04em;
}

/* ---- フッター ---------------------------------------------------- */
.sec--footer { background: var(--pale); padding: var(--s5) 0 0; text-align: center; --gap: var(--s3); }
.sec--footer .foot, .sec--footer .foot__bar {
  position: static; width: auto; height: auto;
}
.sec--footer { align-items: center; }
.sec--footer > * { width: 100%; }
.sec--footer a.b { width: 12.8rem; aspect-ratio: auto; }       /* RYOMAロゴ */
.sec--footer div.b { width: var(--sp-400); aspect-ratio: 1; margin-top: var(--sp-300); }
.sec--footer .b img { width: 100%; height: auto; object-fit: contain; }
.sec--footer .foot-sns {
  margin-top: calc(var(--sp-300) * -1 + var(--sp-75)); padding: var(--sp-75) 0;
}
.sec--footer .a { font-size: var(--sp-caption); line-height: var(--lh-xs); text-align: center; }
.sec--footer nav { display: grid; margin-top: var(--sp-200); }
.sec--footer .ol.foot-link { display: block; padding: var(--sp-100) 0; }   /* タップ領域 */
.sec--footer .ol svg { height: var(--t-lg); margin: 0 auto; display: block; }
.sec--footer .foot__bar {
  background: var(--red); margin-top: var(--sp-200); padding: var(--sp-200) 0;
}

/* 節の導入文。見出し直下の短いラベルとは別扱いにする（12pxでは読めない） */
.sec .a.disp[data-role="lead"] {
  font-size: var(--sp-body); font-weight: 400; letter-spacing: .02em;
  line-height: var(--lh-ja); color: var(--ink-3); background: none;
  padding-inline: var(--sp-pad);
  margin-top: var(--sp-200); align-self: stretch; width: auto;
}
.sec--member .a.disp[data-role="lead"] { color: var(--pale); }

} /* @media */

/* ---- タブレット帯（600〜900px）-----------------------------------
   375px 用の字面のままだと1行が長くなりすぎて読めない。
   文字だけ一段上げ、本文の行長を抑える。写真と色面はフルブリードのまま */
@media (min-width: 600px) and (max-width: 900px) {
  /* 段を1つ上げるだけ。段の外の値は作らない */
  :root {
    --sp-display: 9.6rem;              /* text-8xl */
    --sp-sub: var(--t-6xl); --sp-name: var(--t-5xl);
    --sp-h2: var(--t-4xl);  --sp-statement: var(--t-3xl);
    --sp-label: var(--t-2xl); --sp-lead: var(--t-xl);
    --sp-body: var(--t-lg);  --sp-small: var(--t-base);
    --sp-caption: var(--t-sm);
    --sp-pad: var(--sp-500);
  }
  .sec .a:not(.dl), .corp dd, .qa summary, .qa .qa__a { max-width: min(64rem, 100%); }
  .sec--copy .a { max-width: min(68rem, 100%); margin-inline: auto; }
  .sec--entry .a, .sec--footer .a { margin-inline: auto; }
  .sec--entry .cta { max-width: min(48rem, 100%); margin-inline: auto; }
  .sec--business .u--value .a.mincho { font-size: 9.6rem; }   /* text-8xl */
  .sec--business .u--value .a.w7.gray { font-size: var(--t-6xl); }
  .sec--business .u--value .fill.value-plate { height: 12rem; }
  .sec--member .u--member .a.disp.gray { margin-top: calc(var(--sp-500) * -1); }
  .flow li { grid-template-columns: var(--sp-800) 1fr; }
  .flow__circle { width: var(--sp-800); height: var(--sp-800); }
  .flow__label { font-size: var(--t-2xl); }
}