/* ===========================================
   freight_custom.css
   荷物用エレベーターページ 個別調整CSS
   スコープ: .t-elevatorFreight[class] .freight_index

   方針:
     - style.css と同じ「PCがデフォルト、SPは @media で上書き」パターン
     - !important は使わない
     - style.cssと同じセレクタパターンで詳細度を揃え、後勝ちで上書き
     - ★重要★ 上書きしたくないプロパティ（position等）は書かない
       書いていないプロパティは style.css の値がそのまま生きる
   =========================================== */


/* -------------------------------------------
   1. タイトル：ブルー縁取り＋光彩 + PC位置調整
   ------------------------------------------- */

.t-elevatorFreight[class] .freight_index .freight_header .title {
  -webkit-text-stroke: 6px #0187d1;
  paint-order: stroke fill;
  text-shadow:
    0 0 4px #0187d1,
    0 0 8px #0187d1,
    0 0 14px #0187d1,
    0 0 25px rgba(1, 135, 209, 0.85),
    0 0 45px rgba(1, 135, 209, 0.55);

  /* PC：全体を左にずらす（SPでは下のメディアクエリで打ち消し） */
  margin-left: -30px;
}

/* タイトル2行目（括弧）の頭を1行目に揃える */
.t-elevatorFreight[class] .freight_index .freight_header .title .title__sub {
  display: block;
  text-indent: -20px;
}


/* -------------------------------------------
   2. キャッチ文 & リード文 & 注記
   - .catch           : フォントを一回り大きく
   - .text            : フォント1.2倍。.catch の折り返しに合わせた幅
   - #selection .lead : .text と同じサイズ・幅（中央揃えは style.css を維持）
   - .note            : ほんのり小さめ、ぶら下げインデント付き
                        ※ .container が box-sizing:content-box なので
                          border-box を明示しないと overflow する
   ------------------------------------------- */

.t-elevatorFreight[class] .freight_index #head_info .catch {
  font-size: 2em;             /* style.cssデフォルト1.71em → 一回り大きく */
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* 本文リード（#head_info .text）*/
.t-elevatorFreight[class] .freight_index #head_info .text {
  max-width: 760px;           /* .catch の折り返し位置に合わせて3文字分詰めた幅 */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: block;
  font-size: 1.2em;           /* 1.2倍に拡大 */
  line-height: 2.2;           /* 行間ゆったり（body デフォルト1.8より広め）*/
  letter-spacing: 0.04em;     /* 字間ほんのり開ける（0と0.08emの中間）*/
}

/* 選定セクションのリード（#selection .lead）: .text と同じサイズ感
   ※ text-align は style.css の center をそのまま活かす */
.t-elevatorFreight[class] .freight_index #selection .lead {
  max-width: 760px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

/* 注記（.note）: 注記らしくほんのり小さめ、左寄せ
   ※ .text と同じ幅に揃えて左端面も合わせる
   ※ ぶら下げインデント：2行目以降を「※」の次の文字位置に揃える
   ※ box-sizing: border-box を明示指定
     （style.css の .container が content-box なので、何もしないと
      padding が width の外側に足されて親からはみ出す）*/
.t-elevatorFreight[class] .freight_index #head_info .note {
  box-sizing: border-box;     /* padding を width の内側に収める */
  max-width: 760px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: block;
  font-size: 0.88em;          /* 注記はほんのり小さく（約14px相当）*/
  padding-left: 2em;          /* 2行目以降のインデント位置 */
  text-indent: -1em;          /* 1行目だけ1em戻す → ※が1emだけ右にずれた位置に来る */
}


/* -------------------------------------------
   3. サムネイル画像（PCデフォルト）
   ★position/right/bottomは意図的に書かない
   → style.cssの「position:absolute; right:0; bottom:79.44%」が自然に有効
   → 画像は右上に配置される
   ------------------------------------------- */

.t-elevatorFreight[class] .freight_index #head_info .thumb {
  width: 480px;
  height: 460px;
  flex-shrink: 0;
  overflow: visible;
  margin-bottom: 20px;
}

.t-elevatorFreight[class] .freight_index #head_info .thumb img {
  width: 90%;
  height: 90%;
  max-width: none;
  object-fit: contain;
  position: absolute;
  bottom: -55px;
  right: -50px;
}


/* -------------------------------------------
   4. SP（767px以下）専用：PCデフォルトを必要な所だけ上書き
   ------------------------------------------- */

@media (max-width: 767px) {

  /* タイトル：縁取り細め＋PC用 margin-left を打ち消し */
  .t-elevatorFreight[class] .freight_index .freight_header .title {
    -webkit-text-stroke: 3px #0187d1;
    margin-left: 0;
  }

  /* タイトル2行目：括弧の左寄せを微調整 */
  .t-elevatorFreight[class] .freight_index .freight_header .title .title__sub {
    text-indent: -10px;
  }

  /* タイトル位置：縦中央 → 上端寄せ＋左揃え */
  .t-elevatorFreight[class] .freight_index .freight_header {
    top: 35px;
    transform: none;
    text-align: left;
  }

  /* キャッチ：PCの font-size:2em と max-width を打ち消し
     style.cssのSPデフォルト(1.29em)を維持 */
  .t-elevatorFreight[class] .freight_index #head_info .catch {
    font-size: 1.29em;
    max-width: none;
  }

  /* リード文：PCの max-width:760px と font-size:1.2em を打ち消し */
  .t-elevatorFreight[class] .freight_index #head_info .text,
  .t-elevatorFreight[class] .freight_index #selection .lead {
    max-width: none;
    font-size: 1em;
  }

  /* 注記：PCで指定した max-width:760px を打ち消し
     ぶら下げインデントは維持しつつ、「※」は左端に寄せる（SPは余白が狭いため）
     左右対称 1em で OK（box-sizing:border-box でちゃんと内側に入るので overflow しない）*/
  .t-elevatorFreight[class] .freight_index #head_info .note {
    max-width: none;
    padding-left: 1em;
    padding-right: 1em;
    text-indent: -1em;
  }

  /* サムネ画像：PCデフォルトを完全に上書き、中央寄せ＆拡大
     ※ position/right/bottom もSP用に明示的に設定して style.cssのSP値を上書き */
  .t-elevatorFreight[class] .freight_index #head_info .thumb {
    width: 65%;
    max-width: 216px;
    height: auto;
    position: absolute;
    right: auto;
    left: 50%;
    bottom: auto;
    top: -120px;
    margin-right: 0;
    margin-bottom: 0;
    transform: translateX(-50%);
  }

  .t-elevatorFreight[class] .freight_index #head_info .thumb img {
    width: 100%;
    height: auto;
    max-width: 100%;
    position: static;
    bottom: auto;
    right: auto;
  }

  /* サムネ拡大＆上移動の分、リード文との余白を確保
     （画像とキャッチの間を適度に空けるため padding-top で調整）*/
  .t-elevatorFreight[class] .freight_index #head_info > .container {
    padding-top: 85px;        /* 画像下〜テキスト間を少し広げる（+5px）*/
  }

  /* 本文系は全部左揃えで統一（読みやすさ優先） */
  .t-elevatorFreight[class] .freight_index #head_info .catch,
  .t-elevatorFreight[class] .freight_index #head_info .note {
    text-align: left;
  }
}