@charset "utf-8";
/*
 * トップページ
 *
 * 元は common.css / top.css に分かれていて、
 * **このページが使うルールだけ**を抜き出して結合してある。
 * 読み込み順を保っているので、この順序を変えないこと。
 *
 * **メディアクエリより後ろに基本ルールを書かないこと。**
 * 同じ詳細度で負けてレスポンシブが効かなくなる。
 */

/* ===================================================== common.css より */

@charset "utf-8";

/* =============================================== 共通 */

.p-arrow { flex-shrink: 0; }

.is-todo { cursor: default; }

/* --- ボタン --- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 54px;
  padding: 14px 26px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-btn--outline {
  border: 1px solid #C7CCD6;
  background: #FFFFFF;
  font-weight: 500;
  color: #131313;
}

.c-btn--outline:hover { border-color: #0049C8; color: #0049C8; }

.c-btn--line { background: #06C755; color: #FFFFFF; }

.c-btn--line:hover { background: #05A948; }

.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #0049C8;
  text-decoration: none;
}

.c-textlink:hover { color: #00133F; }

.c-textlink:hover .p-arrow { transform: translateX(3px); }

.p-arrow { transition: transform 0.2s; }

/* --- 写真プレースホルダ --- */

.p-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #EDEFF4;
  border-radius: 4px;
}

.p-photo svg { width: 34px; height: 34px; }

/*
 * 素材が入ったもの（<picture>）。
 * プレースホルダと同じ枠に収める。aspect-ratio は変わらず variant が持つ。
 * 画像側に object-fit を当てないと、縦横比の違いで潰れる。
 */
.p-photo.is-set {
  display: block;
  overflow: hidden;
  background: #EDEFF4;
}

.p-photo.is-set img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-photo--brand    { aspect-ratio: 16 / 10; }

.p-photo--mfg-main { aspect-ratio: 16 / 7; }

.p-photo--mfg-sub  { aspect-ratio: 16 / 10; }

.p-check {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0049C8;
}

/* ===================================================== top.css より */

@charset "utf-8";

/*
 * トップページ（ラフ上半分: ヒーロー / 注目情報 / 製品情報 / 選ばれる理由）
 *
 * PC と SP は同一マークアップ。CSS だけで出し分ける。
 * 既存テーマ origin2 に合わせ、デスクトップ基準で書き
 * max-width: 1024px で上書きする。
 *
 * 色・フォントは docs/DESIGN-TOKENS.md の実測値。
 * CSS カスタムプロパティは既存テーマが未使用のため、
 * 局所的な受け渡し（--p-photo-ratio）以外では使わない。
 */

/* ----------------------------------------------------------- 前提 */
/*
 * box-sizing を自分のセクション配下だけに適用する。
 * 親テーマ origin2 が全体に border-box を当てている可能性は高いが、
 * それに依存すると単体では崩れる（実測で 2px の横あふれが出た）。
 * 逆に `*` へ当てると親テーマのレイアウトを壊しうるため、
 * :where() で詳細度 0 のまま自分の名前空間に限定する。
 */
:where(.p-hero, .p-pickup, .p-products, .p-value,
       .p-support, .p-mfg, .p-biz, .p-brand, .p-news, .p-closing)
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* --- 数字 --- */

.p-comparebox__num,
.p-brand__record-num {
  font-variant-numeric: tabular-nums;
}

/*
 * 数字の下に細い罫を引く。カウントアップに合わせて左から伸びるので、
 * 「量」が 増えているのが体感できる。装飾ではなく比較の補助線。
 */
.p-comparebox__value {
  position: relative;
  padding-bottom: 10px;
}

.p-comparebox__value::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #C7CCD6;
  transform: translateX(-50%);
}

.p-comparebox__col--ours .p-comparebox__value::after {
  background: #0049C8;
}

/* JS が動かないときは罫を出したままにする */
html:not(.is-anim) .p-comparebox__value::after { width: 62%; }

html:not(.is-anim) .p-comparebox__col--ours .p-comparebox__value::after { width: 91%; }

/* =============================================== 共通コンポーネント */

/* --- セクション見出し（ラフ全体で一貫: 青い縦バー + 日本語 + 英字） --- */

.p-sechead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-sechead__bar {
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 26px;
  background: #0049C8;
}

.p-sechead__ja {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #131313;
}

/* --- ボタン --- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 親を超えないようにする。長いラベル + 矢印で溢れるのを防ぐ */
  max-width: 100%;
  min-height: 56px;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-btn--primary {
  background: #0049C8;
  color: #FFFFFF;
}

.c-btn--primary:hover {
  background: #00133F;
}

.c-btn--outline {
  border: 1px solid #0049C8;
  background: #FFFFFF;
  color: #0049C8;
}

.c-btn--outline:hover {
  background: #F5F8FF;
}

/* 暗い面に置くボタン（MDL ブランド帯） */
.c-btn--onDark {
  border: 1px solid #4A79D8;
  background: transparent;
  color: #FFFFFF;
}

.c-btn--onDark:hover {
  background: #0049C8;
  border-color: #0049C8;
}

/* LINE。公式ブランドカラー #06C755 を使う
   （ラフの実測値は生成ノイズでばらついていた。DESIGN-TOKENS.md §2 参照） */
.c-btn--line {
  background: #06C755;
  color: #FFFFFF;
}

.c-btn--line:hover {
  background: #05A948;
}

/* --- テキストリンク --- */

.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #0049C8;
  text-decoration: none;
}

.c-textlink:hover {
  color: #00133F;
}

.c-textlink:hover .p-arrow {
  transform: translateX(3px);
}

.p-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* URL 未確定のリンク。見た目は通常と同じにして
   デザイン確認を邪魔しない。追跡は aria-disabled と data-todo で行う。 */
.is-todo {
  cursor: default;
}

/* --- 写真プレースホルダ --- */

.p-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #EDEFF4;
  border-radius: 4px;
}

/* 縦横比は用途ごとに CSS で持つ。
   インラインの custom property にすると CSS から上書きできず、
   ブレークポイントごとに調整できなくなる。 */
.p-photo--hero   { aspect-ratio: 16 / 11; }

.p-photo--pickup { aspect-ratio: 16 / 7; }

.p-photo--prod   { aspect-ratio: 1 / 1; }

.p-photo--reason { aspect-ratio: 16 / 9; }

.p-photo--support  { aspect-ratio: 3 / 4; }

.p-photo--mfg-main { aspect-ratio: 16 / 8; }

.p-photo--mfg-sub  { aspect-ratio: 16 / 10; }

.p-photo--biz      { aspect-ratio: 4 / 3; }

.p-photo--brand    { aspect-ratio: 16 / 9; }

.p-photo--news     { aspect-ratio: 16 / 9; }

.p-photo svg {
  width: 36px;
  height: 36px;
}

/* 素材が入ったもの（<picture>）。common.css と同じ扱い */
.p-photo.is-set {
  display: block;
  overflow: hidden;
  background: #EDEFF4;
}

.p-photo.is-set img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================ ヒーロー */

.p-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
  gap: 48px;
}

.p-hero__headline {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: #131313;
}

/* 意図した改行位置を保つ。ラフの見出しは2行で組まれている。 */
.p-hero__headline span,
.p-hero__lead span,
.p-pickup__headline span,
.p-pickup__lead span,
.p-prodcard__lead span,
.p-value__headline span,
.p-value__lead span,
.p-reason__lead span {
  display: block;
}

.p-hero__lead {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.95;
  color: #4B5563;
}

.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ========================================================= 注目情報 */

.p-pickup {
  margin-top: 96px;
}

.p-pickup__card {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: 40px;
  margin-top: 24px;
  padding: 40px;
  background: #EDEFF4;
  border-radius: 6px;
}

.p-pickup__eyebrow {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0049C8;
}

.p-pickup__headline {
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #131313;
}

.p-pickup__lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #4B5563;
}

.p-pickup__card .c-textlink {
  margin-top: 12px;
}

/* ========================================================= 製品情報 */

.p-products {
  margin-top: 96px;
}

.p-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

.p-prodcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}

.p-prodcard__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #131313;
}

.p-prodcard__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4B5563;
}

.p-prodcard__body .c-textlink {
  margin-top: 10px;
}

.p-products__more {
  margin-top: 20px;
  text-align: center;
}

/* ==================================================== 選ばれる理由 */

.p-value {
  margin-top: 96px;
}

.p-value__top {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
  gap: 48px;
  margin-top: 28px;
}

.p-value__headline {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.32;
  color: #131313;
}

.p-value__lead {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.95;
  color: #4B5563;
}

/* --- 147% の比較ブロック --- */

.p-compareboxwrap {
  margin: 0;
  padding: 24px;
  background: #F3F4F6;
  border-radius: 6px;
}

.p-comparebox__caption {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #DFE3EA;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: #4B5563;
}

/* 2列を必ず横並びに保つ。比較なので隣接していないと意味がない。
   さらに**行単位で高さを揃える**。左はロゴ画像・右はテキストとラベルの
   高さが違うため、揃えないと数字と罫と注記が全部ずれる。 */
.p-comparebox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
}

.p-comparebox__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

/* subgrid が使えない環境向けの保険。
   ラベル行の高さをロゴに合わせて固定し、以降の行を揃える */
@supports not (grid-template-rows: subgrid) {
  .p-comparebox__col {
      display: flex;
      flex-direction: column;
    }

  .p-comparebox__label {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
    }
}

.p-comparebox__col--ours {
  border-right: 1px solid #DFE3EA;
}

.p-comparebox__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #4B5563;
}

/* 自社側はロゴを出す。ブランド資産なので画像をそのまま使う（トレースしない） */
.p-comparebox__logo {
  display: block;
  width: auto;
  height: 42px;
  margin: 0 auto;
}

.p-comparebox__value {
  margin: 10px 0 0;
  line-height: 1;
}

.p-comparebox__num {
  font-family: Poppins, sans-serif;
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #131313;
}

.p-comparebox__col--ours .p-comparebox__num {
  color: #0049C8;
}

.p-comparebox__unit {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #131313;
}

.p-comparebox__col--ours .p-comparebox__unit {
  color: #0049C8;
}

.p-comparebox__note {
  margin: 12px 0 0;
  font-size: 13px;
  color: #4B5563;
}

.p-comparebox__col--ours .p-comparebox__note {
  color: #0049C8;
}

.p-comparebox__footnote {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #8B8B8B;
}

/* --- 01 / 02 / 03 --- */

.p-value__reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.p-reason__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  color: #131313;
}

.p-reason__lead {
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.85;
  color: #4B5563;
}

/* ==================================================================
   ラフ下半分（design/rough/TOPPAGE2.png）
   ================================================================== */

/* ------------------------------------------------- 月桂樹の飾り（共通） */

.p-laurel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  color: #B6BDC9;
}

.p-laurel__leaf {
  width: 18px;
  height: 48px;
  flex-shrink: 0;
}

.p-laurel__body {
  text-align: center;
}

.p-laurel--support .p-laurel__body {
  font-size: 12px;
  line-height: 1.6;
  color: #4B5563;
}

.p-laurel--support .p-laurel__body span {
  display: block;
}

/* ------------------------------------------------- 01/02/03 の手順（共通） */

.p-steps {
  display: grid;
}

/* 横並び（サポート体制）。矢印で区切る */
.p-steps--row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 24px;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 4px;
}

/* 縦積み（品質・製造）。番号とテキストを横に並べる */
.p-steps--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 26px;
}

/* 番号を廃止したため、テキストだけの縦積みにする */
.p-steps__item {
  display: block;
}

.p-steps__sep {
  align-self: center;
  color: #B6BDC9;
  flex-shrink: 0;
}

.p-steps__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: #131313;
}

.p-steps__lead {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4B5563;
}

.p-steps__lead span {
  display: block;
}

/* --------------------------------------------------------- サポート体制 */

.p-support {
  margin-top: 96px;
}

.p-support__card {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  gap: 0;
  margin-top: 24px;
  background: #F3F4F6;
  border-radius: 6px;
  overflow: hidden;
}

/* 写真は本文の高さに合わせて伸ばす。
   aspect-ratio を残すと写真がカード高を決めてしまい、本文側に余白が出る。 */
.p-support__visual,
.p-support__visual .p-photo {
  height: 100%;
}

.p-support__visual .p-photo {
  aspect-ratio: auto;
  min-height: 260px;
  border-radius: 0;
}

.p-support__body {
  padding: 32px;
}

.p-support__lead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.p-support__headline {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #131313;
}

.p-support__headline span,
.p-support__lead span,
.p-mfg__headline span,
.p-mfg__lead span,
.p-bizcard__lead span,
.p-brand__headline span,
.p-brand__lead span,
.p-news__excerpt span,
.p-closing__headline span,
.p-closing__lead span {
  display: block;
}

.p-support__lead {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: #4B5563;
}

/* ----------------------------------------------------------- 品質・製造 */

.p-mfg {
  margin-top: 96px;
}

.p-mfg__inner {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: start;
  gap: 40px;
  margin-top: 24px;
  padding: 32px;
  background: #F3F4F6;
  border-radius: 6px;
}

.p-mfg__headline {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #131313;
}

.p-mfg__lead {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: #4B5563;
}

.p-mfg__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.p-mfg__gallery-main {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------ 法人のお客様へ */

.p-biz {
  margin-top: 96px;
}

.p-biz__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

.p-bizcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: #F3F4F6;
  border-radius: 6px;
}

.p-bizcard__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #131313;
}

.p-bizcard__lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4B5563;
}

.p-bizcard__checks {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-bizcard__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #131313;
}

.p-check {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0049C8;
}

.p-bizcard__body .c-textlink {
  margin-top: 10px;
}

/* ---------------------------------------------------- MDL ブランド帯 */

.p-brand {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 38fr) minmax(0, 28fr);
  align-items: center;
  gap: 32px;
  margin-top: 96px;
  padding: 40px;
  background: #050A10;
  border-radius: 6px;
}

/*
 * ブランド帯のロゴ。地が近黒なので**白版**を使う
 * （通常版は濃色なので沈む）。jpg は透過を持てないため出していない。
 */
.p-brand__logo-img {
  display: block;
  width: 160px;
  height: auto;
}

.p-brand__logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

.p-brand__headline {
  margin: 20px 0 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.45;
  color: #FFFFFF;
}

.p-brand__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #A9B4C4;
}

.p-brand__record {
  text-align: center;
}

.p-laurel--brand {
  color: #6F7C90;
}

.p-brand__record-label {
  margin: 0;
  font-size: 12px;
  color: #A9B4C4;
}

.p-brand__record-value {
  margin: 6px 0 0;
  line-height: 1;
}

.p-brand__record-num {
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: #FFFFFF;
}

.p-brand__record-suffix {
  font-family: Poppins, sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #FFFFFF;
}

.p-brand__record-note {
  margin: 10px 0 18px;
  font-size: 12px;
  line-height: 1.6;
  color: #7A8697;
}

/* ------------------------------------------------------------ お知らせ */

.p-news {
  margin-top: 96px;
}

.p-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

.p-news__item {
  display: flex;
  flex-direction: column;
}

.p-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.p-news__date {
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  color: #4B5563;
}

.p-news__cat {
  background: #E4EBFA;
  color: #0049C8;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 3px;
}

.p-news__title {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
}

.p-news__excerpt {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #4B5563;
}

.p-news__item .c-textlink {
  margin-top: auto;
}

/* --------------------------------------------------------- 締めの CTA */

.p-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin-top: 96px;
  padding: 40px;
  background: #F3F4F6;
  border-radius: 6px;
}

.p-closing__headline {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: #131313;
}

.p-closing__lead {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: #4B5563;
}

.p-closing__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-closing__actions .c-btn {
  width: 100%;
}

/* ================================================================
   スマホ・タブレット（origin2 に合わせて 1024px 一段切り）
   ここは文字サイズと余白だけを担当する。レイアウトの1カラム化は 768px。
   ================================================================ */
@media screen and (max-width: 1024px) {
  /* --- 共通 --- */

    .p-sechead__bar { height: 20px; }

  .p-sechead__ja { font-size: 19px; }

  .c-btn {
      min-height: 52px;
      padding: 12px 18px;
      font-size: 14px;
    }

  .c-textlink { font-size: 13.5px; }

  .p-photo svg { width: 30px; height: 30px; }

  /* SP では画像が全幅になるため、縦に伸びすぎる比率を詰める */
    .p-photo--hero   { aspect-ratio: 16 / 10; }

  .p-photo--pickup { aspect-ratio: 16 / 9; }

  .p-photo--prod   { aspect-ratio: 16 / 10; }

  /* --- ヒーロー --- */

    .p-hero__headline { font-size: 32px; }

  .p-hero__lead {
      margin-top: 18px;
      font-size: 15px;
      line-height: 1.9;
    }

  .p-hero__actions {
      margin-top: 24px;
      gap: 10px;
    }

  /* --- 注目情報 --- */

    .p-pickup { margin-top: 64px; }

  .p-pickup__headline {
      margin-top: 10px;
      font-size: 23px;
    }

  .p-pickup__lead {
      margin-top: 12px;
      font-size: 14.5px;
    }

  /* --- 製品情報 ---
       カードは1列に。カード内はテキスト左・画像右のまま保つ。
       製品画像が視覚的な手掛かりなので、縦積みにすると
       カードの区切りが分かりにくくなる。 */

    .p-products { margin-top: 64px; }

  .p-prodcard {
      grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
      gap: 16px;
      padding: 20px;
    }

  .p-prodcard__title { font-size: 18px; }

  .p-prodcard__lead {
      margin-top: 12px;
      font-size: 14px;
    }

  /* --- 選ばれる理由 --- */

    .p-value { margin-top: 64px; }

  .p-value__headline { font-size: 27px; }

  .p-value__lead {
      margin-top: 16px;
      font-size: 14.5px;
    }

  /* 147% の比較ブロックは 2 列のまま。
       比較なので隣接していないと意味を失う（比較表と同じ判断）。 */

    .p-compareboxwrap { padding: 18px 14px; }

  .p-comparebox__caption {
      margin-bottom: 14px;
      padding-bottom: 12px;
      font-size: 12px;
    }

  .p-comparebox__col { padding: 0 6px; }

  .p-comparebox__label { font-size: 11px; min-height: 32px; }

  .p-comparebox__logo { height: 32px; }

  @supports not (grid-template-rows: subgrid) {
    .p-comparebox__label { min-height: 32px; }
  }

  .p-comparebox__num { font-size: 40px; }

  .p-comparebox__unit { font-size: 17px; }

  .p-comparebox__note {
      margin-top: 8px;
      font-size: 12px;
    }

  .p-comparebox__footnote {
      margin-top: 14px;
      font-size: 12px;
    }

  /* 01 / 02 / 03 は縦積み。3列を 375px に押し込むと文字が破綻する。 */

    .p-reason__title { font-size: 20px; }

  .p-reason__lead {
      margin: 8px 0 14px;
      font-size: 14px;
    }

  /* --- 下半分: 文字サイズと余白 --- */
  .p-support,
  .p-mfg,
  .p-biz,
  .p-news { margin-top: 64px; }

  .p-brand,
  .p-closing { margin-top: 64px; }

  .p-support__card,
  .p-mfg__inner { margin-top: 16px; }

  .p-biz__grid,
  .p-news__grid { margin-top: 16px; }

  .p-support__body { padding: 22px 20px; }

  .p-support__headline { font-size: 23px; }

  .p-support__lead { margin-top: 12px; font-size: 14px; }

  .p-mfg__inner { padding: 22px 20px; gap: 24px; }

  .p-mfg__headline { font-size: 23px; }

  .p-mfg__lead { margin-top: 12px; font-size: 14px; }

  .p-steps--row { margin-top: 18px; padding: 16px; gap: 10px; }

  .p-steps--stack { margin-top: 20px; }

  .p-steps__title { font-size: 17px; }

  .p-steps__lead { font-size: 13.5px; }

  .p-bizcard { padding: 20px; gap: 16px; }

  .p-bizcard__title { font-size: 18px; }

  .p-bizcard__lead { font-size: 13.5px; }

  .p-bizcard__check { font-size: 13.5px; }

  .p-brand { padding: 24px 20px; gap: 24px; }

  .p-brand__logo { font-size: 22px; }

  .p-brand__logo-img { width: 136px; }

  .p-brand__headline { margin-top: 14px; font-size: 21px; }

  .p-brand__lead { margin-top: 12px; font-size: 13.5px; }

  .p-brand__record-num { font-size: 34px; }

  .p-brand__record-suffix { font-size: 22px; }

  .p-news__title { font-size: 14.5px; }

  .p-news__excerpt { font-size: 13.5px; }

  .p-closing { padding: 24px 20px; gap: 22px; }

  .p-closing__headline { font-size: 24px; }

  .p-closing__lead { margin-top: 12px; font-size: 14px; }
}

/* ================================================================
   レイアウトの1カラム化

   1024px（タイポグラフィと余白の境界）で 1 カラムにすると、
   900px 幅では全幅の画像が巨大になりページ高が 375px より長くなる。
   レイアウトの切り替えは 768px で行い、1024px は文字サイズと余白だけを
   担当させる。origin2 の 1024px 一段切りは踏襲したまま、
   自前セクションの都合を別のクエリに分けている。
   ================================================================ */
@media screen and (max-width: 768px) {
  /* ヒーローは画像を先に出す。SP では写真が最初の掴みになる（依頼者の判断） */
    .p-hero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

  .p-hero__visual { order: -1; }

  /* SP は画像が上、テキストが下（全セクション共通の規則） */
    .p-pickup__card {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

  .p-pickup__visual { order: -1; }

  .p-products__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

  .p-value__top {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

  .p-value__reasons {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
      margin-top: 36px;
    }

  /* --- 下半分 --- */

    /* サポート体制: 写真が上、本文が下 */
    .p-support__card {
      grid-template-columns: minmax(0, 1fr);
    }

  .p-support__visual { order: -1; }

  /* 品質・製造: 写真が上、本文が下 */
    .p-mfg__inner {
      grid-template-columns: minmax(0, 1fr);
    }

  .p-mfg__gallery { order: -1; }

  .p-biz__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

  /* MDL ブランド帯: 写真 → 本文 → 実績の順に積む */
    .p-brand {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

  .p-brand__visual { order: -1; }

  .p-brand__record .c-btn {
      width: 100%;
    }

  .p-news__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }

  .p-closing {
      grid-template-columns: minmax(0, 1fr);
    }

  /* 01/02/03 の横並びは 3 列を維持できないため縦積みにする。
       矢印の区切りは縦積みでは意味を失うので隠す。 */
    .p-steps--row {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

  .p-steps__sep {
      display: none;
    }
}

/* ================================================================
   ボタンを全幅にする。横に並べると文字が詰まる幅
   ================================================================ */
@media screen and (max-width: 600px) {
  .p-hero__actions .c-btn {
      flex: 1 1 100%;
    }

  /* 見出しの隣に月桂樹バッジを置くと窮屈になるため下へ回す */
    .p-support__lead-row {
      flex-direction: column;
      gap: 14px;
    }

  .p-laurel--support {
      align-self: flex-start;
    }
}

/* ================================================================
   狭いスマホ。カード内のテキストと画像が窮屈になる幅で縦積みへ
   ================================================================ */
@media screen and (max-width: 400px) {
  .p-prodcard {
      grid-template-columns: minmax(0, 1fr);
    }

  /* 画像を先に出すとカードの切れ目が分かりやすい */
    .p-prodcard__visual { order: -1; }

  .p-bizcard {
      grid-template-columns: minmax(0, 1fr);
    }

  .p-bizcard__visual { order: -1; }
}