/* =========================================================
   Renadyl LP — 02 AUTHORIZED IMPORT（正規輸入セクション）
   由来: クライアント支給 renadyl-html.zip (2026-07) をLPルールに合わせ移植
   スコープ: #renadyl-lp .section-import（SWELL既存スタイルと非干渉）
   アセット: ./assets/import/*（子テーマ同梱・$rdv()参照）
   ---------------------------------------------------------
   設計方針(2026-07 改修: コンテナ幅・文字サイズをLP規約に整合):
   - コンテナは他セクション同様 .section-inner(1152px)を使用。
     支給デザインの独自絶対配置(left 8.42%/width 41%)は廃止。
   - 文字サイズはLP規約に整合:
     リード段落=準見出し clamp(19px,1.5vw,24px)(見出しなしセクションのため
     他セクションの「見出し+本文」リズムに合わせる/クライアント確認済み)、
     詳細段落=本文 .lead-copy と同値 clamp(15px,1.05vw,17px)。
   - PC: 帯は .lp-section 共通の aspect-ratio 1672/941 +
     文字なしクリーン背景(import-bg-pc.webp)1枚。文言は支給原稿と一字一句一致。
   - SP(≤767px): 画像2枚縦積み→テクスチャ背景+テキスト(元デザイン踏襲)。
     テキスト内側幅はv3.cssのSP版section-inner相当 min(90%,620px)。
   - 超ワイド(>1920px): v3.css末尾と同じ最大幅方式(1920キャップ+地色フィル)。
   ========================================================= */

#renadyl-lp .section-import {
  /* aspect-ratio は v3.css の @media(≤1280px){.lp-section{aspect-ratio:auto}} に
     負けないようここで明示再指定(同特異度・後読みで勝つ)。SPは下のMQで解除。
     min-height:720px 解除で全PC幅において背景と同比率を維持し、
     テキストが背景の白エリアからズレないようにする */
  /* 帯高さ: コンテンツ量(本文2段落)に対し画像原寸比1672/941は高すぎるため
     浅い比率にし、背景はcoverで上下トリミング(クライアント指摘対応) */
  aspect-ratio: 1672 / 760;
  height: auto;
  min-height: 0;
  background-image: url("assets/import/import-bg-pc.webp");
  background-position: center;
  background-size: cover;
  /* 超ワイド対策(最大幅方式)。外側フィルは #renadyl-lp {background:#f9fcff} */
  max-width: 1920px;
  margin-inline: auto;
}

/* ---- PC/タブレット: .section-inner 内・左カラムにテキスト(intro-layoutと同型) ---- */
#renadyl-lp .import-layout { display: flex; align-items: center; }
#renadyl-lp .import-copy { width: 48%; }

/* キッカー下の余白。リード段落のmargin-topは v3.css の
   #renadyl-lp .lp-section p {margin-top:0}(特異度1-1-1)に負けるため
   キッカー側のmargin-bottomで確保する */
#renadyl-lp .section-import .section-kicker { margin-bottom: 22px; }

/* リード段落: 準見出し(他セクションの見出し+本文リズムに合わせる) */
#renadyl-lp .import-copy__lead {
  margin: 0;
  color: var(--v3-navy);
  font-family: var(--v3-serif);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .03em;
}

/* 詳細段落: 本文(.lead-copyと同値) */
#renadyl-lp .import-copy__detail {
  margin: 0;
  color: #1b3f66;
  font-family: var(--v3-serif);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.95;
  letter-spacing: .04em;
}

/* 金のディバイダー(先端に丸ドット) — 支給デザインの装飾を維持 */
#renadyl-lp .import-copy__divider {
  position: relative;
  width: min(100%, 440px);
  height: 1px;
  margin: 26px 0 28px;
  background: linear-gradient(90deg, #d6a33b 0%, #d6a33b 96%, transparent 96%);
}
#renadyl-lp .import-copy__divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6aa4c;
  transform: translate(50%, -50%);
  box-shadow: 0 0 4px rgba(214, 170, 76, .18);
}

/* SP用ギャラリーはPCでは非表示(背景画像内に同写真があるため) */
#renadyl-lp .import-gallery { display: none; }

/* タブレット(768〜1280px): aspect-ratio維持のためsection-innerの上下paddingを
   打ち消し、縦センターを保つ(v3.cssの≤1280ルールがpaddingを足すため) */
@media (max-width: 1280px) and (min-width: 768px) {
  #renadyl-lp .section-import .section-inner { height: 100%; padding-top: 0; padding-bottom: 0; }
  #renadyl-lp .import-copy { width: 50%; }
}

/* 768〜1100pxは浅い比率(760)だと帯が低すぎてテキストがはみ出すため、
   このレンジのみ画像原寸比に戻して高さを確保 */
@media (max-width: 1100px) and (min-width: 768px) {
  #renadyl-lp .section-import { aspect-ratio: 1672 / 941; }
}

/* ---- SP(≤767px): 画像2枚縦積み → テクスチャ背景+テキスト ---- */
@media (max-width: 767px) {
  #renadyl-lp .section-import {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    background-image: none;
    background-color: #fff;
    max-width: none;
  }

  #renadyl-lp .import-gallery {
    display: grid;
    grid-template-rows: 1.05fr .95fr;
    height: min(74vh, 640px);
    min-height: 470px;
    border-bottom: 4px solid #fff;
    background: #dbe9f4;
  }
  #renadyl-lp .import-gallery figure {
    position: relative;
    margin: 0;
    overflow: hidden;
  }
  #renadyl-lp .import-gallery figure + figure { border-top: 4px solid #fff; }
  #renadyl-lp .import-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  #renadyl-lp .import-gallery__cargo img { object-position: 58% 50%; }
  #renadyl-lp .import-gallery__documents img { object-position: 54% 55%; }

  /* テクスチャ背景の帯は全幅、内側テキストはSP版section-inner相当の幅に */
  #renadyl-lp .section-import .section-inner {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 52px 0 76px;
    background:
      linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .1)),
      url("assets/import/import-text-bg-sp.webp") center / cover no-repeat;
  }
  #renadyl-lp .import-layout { display: block; }
  #renadyl-lp .import-copy {
    position: relative;
    z-index: 1;
    width: min(90%, 620px);
    margin-inline: auto;
  }
  /* 下端を次セクションへ淡くつなぐフェード */
  #renadyl-lp .section-import .section-inner::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 68px;
    background: linear-gradient(to bottom, transparent, rgba(226, 239, 248, .8));
    pointer-events: none;
  }

  #renadyl-lp .import-copy__lead { font-size: clamp(19px, 5vw, 22px); }
  #renadyl-lp .import-copy__divider { width: 74%; margin: 24px 0 24px; }
  #renadyl-lp .import-copy__divider::after { width: 8px; height: 8px; box-shadow: none; }
}