/* Isolated CSS. It intentionally contains ZERO rules for the existing horizontal slider. */
/* ヒーロー：横幅いっぱい（フルブリード）／比例スケール。デザイン基準1600px。 */
/* イントロ：以降のセクション（.ic-trust）と同一の内容幅・タイポグラフィに統一。 */
:root{--icx-coral:#e85c36;--icx-gold:#a67928;--icx-blue:#064282;--icx-ink:#21170f}

/* ============ HERO（横画面いっぱい） ============ */
.icx-hero{position:relative;width:100%;max-width:none;margin:0;overflow:hidden;
  aspect-ratio:1600/634;background:#fffdf9;box-sizing:border-box;
  font-family:"Noto Serif JP","Noto Serif CJK JP",YuMincho,"Yu Mincho",serif;color:var(--icx-ink)}
.icx-hero *{box-sizing:border-box}
.icx-hero-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.icx-hero-copy{position:absolute;left:7.1125%;top:3.170%;width:40.744%;z-index:2}
.icx-compass{position:absolute;left:max(-104.6px,-5.45vw);top:min(1.3px,.0688vw);width:min(100.7px,5.244vw);height:auto}
.icx-hero-title{margin:0;font-weight:600;letter-spacing:.005em;line-height:1.08;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.icx-hero-title span,.icx-hero-title strong{display:block}
.icx-hero-title span:first-child{font-size:min(95.5px,4.975vw)}
.icx-hero-title span:nth-child(2){font-size:min(64.9px,3.381vw);margin-top:min(13.0px,.675vw)}
.icx-hero-title strong{font-size:min(80.9px,4.213vw);color:var(--icx-coral);font-weight:500;margin-top:min(6.5px,.338vw);width:max-content}
.icx-hero-subtitle{margin:min(11.9px,.619vw) 0 0;font-size:min(33.1px,1.725vw);line-height:1.35;font-weight:600;color:#9a6e22;
  border-bottom:1px solid rgba(188,137,42,.35);padding-bottom:min(11.9px,.619vw);width:max-content}
.icx-hero-body{margin:min(40.7px,2.119vw) 0 0;font-size:min(26.5px,1.381vw);line-height:1.58;font-weight:500;letter-spacing:.003em;color:#18110c}

/* 金線（区切り）：「その選択肢が inCruises」と「3つの特典」の間へ */
#incruises-benefits{border-top:4px solid #b68b45}

/* スマートフォン専用の導入ブロック：PC版では非表示 */
.icx-sp-lead{display:none}
/* スマートフォン専用の見出し・まとめ文：PC版では非表示 */
.icx-sp-headline,.icx-sp-summary{display:none}

/* ============ INTRO（その選択肢が inCruises） ============ */
.icx-intro{width:100%;background:#fff;box-sizing:border-box}
.icx-intro *{box-sizing:border-box}
.icx-intro-inner{width:min(1600px,calc(100% - 32px));margin:0 auto;padding:64px 35px 48px;overflow-x:auto;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif;color:#20242a}

/* 見出し：.ic-trust__title と同一のフォント・色・サイズ */
.icx-intro-header{text-align:center;margin:0 0 34px}
.icx-intro-header h2{position:relative;display:inline-block;margin:0;padding:0 132px;text-align:center;
  font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;font-size:54px;line-height:1.16;font-weight:700;
  letter-spacing:.005em;color:#082754}
.icx-intro-header h2::before,.icx-intro-header h2::after{content:"";position:absolute;top:50%;width:104px;height:1px;
  background:linear-gradient(90deg,rgba(201,162,83,0),#c9a253)}
.icx-intro-header h2::before{left:8px}
.icx-intro-header h2::after{right:8px;background:linear-gradient(270deg,rgba(201,162,83,0),#c9a253)}
.icx-intro-header h2 i.icx-dia{position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;background:#c9a253;transform:rotate(45deg)}
.icx-intro-header h2 i.icx-dia--l{left:0}
.icx-intro-header h2 i.icx-dia--r{right:0}
.icx-intro-header h2 .icx-tl{display:block;white-space:nowrap}
.icx-incruises-text{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;color:#0a3d7d;font-size:1.06em;letter-spacing:-.025em}
.icx-incruises-text::first-letter{color:#c4932e}
.icx-reg{font-family:Georgia,serif;font-size:.30em;vertical-align:.95em;color:#0a3d7d;margin-left:.06em}
/* リード：.ic-trust__subtitle と同一 */
.icx-intro-lead{margin:16px 0 0;font-family:"Noto Serif JP",serif;font-size:25px;line-height:1.35;font-weight:600;color:#4b4742}

/* 3カード：カード幅は以降のセクションと同じ内容幅（1600px時 1498px／1枚486px）。
   カード内部の写真・番号・アイコン・文字サイズ・行間・余白はオリジナル完成見本の実測値に一致させる。 */
.icx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;min-width:1498px}
.icx-card{position:relative;background:#fff;border:1px solid #ece4d8;border-radius:15px;
  box-shadow:0 6px 16px rgba(70,55,40,.10);padding:3px 4px 21px;text-align:center;overflow:hidden}
.icx-card-media{display:block;width:100%;height:auto;margin:0 0 -19px}
/* 小見出し：オリジナル実測 31px / 明朝 / #074384 */
.icx-card h3{margin:0;font-family:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN",serif;
  font-size:32px;line-height:1.2;font-weight:600;color:#074384;white-space:nowrap}
/* 説明文：オリジナル実測 18.4px / 行送り1.40 / 明朝 */
.icx-card p{width:max-content;max-width:calc(100% - 30px);margin:23px auto 0;text-align:left;
  font-family:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN",serif;
  font-size:18.4px;line-height:1.40;font-weight:500;color:#17120f}

@media(max-width:1200px){
  /* 1600px設計のまま横スクロール（信頼性セクションと同じ挙動）。文字サイズは縮小しない。 */
  .icx-intro-inner{padding:clamp(34px,4.6vw,64px) 35px 40px}
}

@media(max-width:760px){
  /* ===== スマートフォンTOPヒーロー（2026-08-29 全面再設計）=====
     目的：写真とタイトルを1つのヒーロービジュアルとして一体化し、
     初見の人が数秒で「会員になって世界のクルーズを賢くお得に何度も楽しむ仕組み」だと分かること。
     写真はトリミングせず縦横比のまま。固定高さ・大きな余白は使わない。 */
  .icx-hero{
    height:auto;
    aspect-ratio:auto;
    padding:6px 12px 0;
    background:#fffdf9;
    overflow:visible;
  }
  /* 写真：object-fitで切らず、元画像の縦横比をそのまま保持（船・女性・寄港地を全部見せる） */
  .icx-hero-visual{
    position:static;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:fill;
    border-radius:12px 12px 6px 6px;
  }
  .icx-hero::after{display:none}
  .icx-compass{display:none}

  /* コピー面：写真の下部およそ3割に薄いアイボリーを重ね、写真から続く一体の面にする */
  .icx-hero-copy{
    position:relative;
    left:auto;right:auto;top:auto;
    width:auto;
    z-index:2;
    display:flex;
    flex-direction:column;
    margin-top:-12.5%;
    padding:34px 12px 18px;
    border-radius:14px 14px 0 0;
    background:linear-gradient(180deg,
      rgba(255,253,249,.46) 0,
      rgba(255,253,249,.97) 30px,
      #fffdf9 48px);
  }
  /* PC版の情緒的なタイトル・長い導入文はスマホでは使わない（HTMLからは削除していない） */
  .icx-hero-title,
  .icx-hero-body{display:none}

  /* --- メインタイトル（3行・明朝） --- */
  .icx-sp-lead{display:block;order:1}
  .icx-sp-title{
    margin:0;
    font-family:"Noto Serif JP","Noto Serif CJK JP",YuMincho,"Yu Mincho",serif;
    font-weight:600;
    line-height:1.36;
    letter-spacing:0;
    color:#3b2a1e;
    font-feature-settings:"palt" 1;
  }
  .icx-sp-title span{display:block}
  .icx-sp-t1{font-size:27px}
  .icx-sp-t2{font-size:29px}
  .icx-sp-t3{font-size:27px}
  .icx-sp-title strong{font-weight:600;color:#c96a4a}

  /* --- サブコピー（1行・ゴールドブラウン） --- */
  .icx-hero-subtitle{
    display:block;
    order:2;
    width:auto;
    margin:10px 0 0;
    padding:0;
    border:0;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.45;
    letter-spacing:-.01em;
    color:#8a6522;
    font-feature-settings:"palt" 1;
    /* 収まらない幅では読点で改行させ、不自然な位置で折り返さないようにする */
    word-break:keep-all;
  }

  /* ===== クラブの基本的な仕組み（3枚の写真ストリップ）=====
     PC版の1600pxキャンバスを縮小表示するのをやめ、スマホ専用の横3分割に組み替える。
     写真・見出しは既存の3カードをそのまま使用（HTMLからは削除していない）。 */
  .icx-intro{
    display:block;
    height:auto!important;
    overflow:visible;
    background:#fffdf9;
    padding:18px 0 6px;
  }
  .icx-intro-inner{
    width:auto!important;
    transform:none!important;
    margin:0;
    padding:0 18px;
    overflow:visible;
  }
  .icx-intro-header{margin:0 0 12px;text-align:left}
  /* PC版の見出し・リード文はスマホでは使わない */
  .icx-intro-header h2,.icx-intro-lead{display:none}
  .icx-sp-headline{
    display:block;margin:0;
    font-family:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN",serif;
    font-size:23px;font-weight:600;line-height:1.45;letter-spacing:0;color:#3b2a1e;
  }
  .icx-sp-headline strong{font-weight:600;color:#a67928}

  /* --- 3枚横一列の写真ストリップ --- */
  .icx-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
    min-width:0;align-items:stretch;counter-reset:icxcard;
  }
  .icx-card{
    position:relative;aspect-ratio:1/1;
    padding:0;border:0;border-radius:9px;box-shadow:none;overflow:hidden;background:#e9eef2;
  }
  .icx-card-media{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;margin:0;
  }
  /* 3枚とも被写体が中央に来るよう、写真ごとに表示位置を調整（トリミング位置のみ） */
  .icx-card:nth-child(1) .icx-card-media{object-position:52% 46%}
  .icx-card:nth-child(2) .icx-card-media{object-position:70% 44%}
  .icx-card:nth-child(3) .icx-card-media{object-position:52% 50%}
  /* ラベル面：3枚とも同じ高さ・下揃えにして、文字の位置をそろえる */
  .icx-card h3{
    position:absolute;left:0;right:0;bottom:0;z-index:2;height:64px;
    display:flex;flex-direction:column;justify-content:flex-end;
    margin:0;padding:0 4px 9px;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    /* PC版の見出し文はスマホでは表示せず（HTMLからは削除していない）、
       スマホ用の短い文言を ::after で重ねる */
    font-size:0;line-height:0;
    white-space:normal;color:#fff;text-align:center;
    text-shadow:0 1px 3px rgba(20,15,10,.6);
    background:linear-gradient(180deg,rgba(18,14,10,0) 0,rgba(18,14,10,.5) 42%,rgba(18,14,10,.74) 100%);
  }
  .icx-card h3::before{
    counter-increment:icxcard;content:"0" counter(icxcard);
    display:block;margin-bottom:2px;
    font-size:12.5px;font-weight:700;line-height:1.3;letter-spacing:.1em;color:#f0d79a;
  }
  /* スマホ用の短い文言（3枚とも1行） */
  .icx-card h3::after{
    display:block;
    font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em;
    white-space:nowrap;color:#fff;
  }
  .icx-card:nth-child(1) h3::after{content:"特典を知る"}
  .icx-card:nth-child(2) h3::after{content:"活用する"}
  .icx-card:nth-child(3) h3::after{content:"次の旅へ"}
  /* 長い説明文は写真の上に載せない */
  .icx-card p{display:none}

  /* --- 写真の下に1文だけ --- */
  .icx-sp-summary{
    display:block;margin:14px 0 0;padding:0 2px;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:17px;font-weight:400;line-height:1.65;color:#2f2a24;text-align:left;
  }

  /* → 3つの特典 の間隔 */
  #incruises-benefits{border-top-width:1px}
}

/* =========================================================
   2026-09-08：ファーストビュー（ヒーロー）を1600pxで固定する
   ・これまで枠は幅に比例して伸び続ける一方、文字は約1920pxで頭打ちだったため、
     画面が広い／ブラウザを縮小表示すると、写真が上下に切れて文字だけ小さく見えていた。
   ・PC基準幅の1600pxで枠を止め、文字の基準も vw → cqw（枠の幅）に変えることで、
     1600pxを超えても見た目が変わらないようにする。
   ・1600px以下の見え方は従来とまったく同じ（cqw は枠＝画面幅なので vw と一致）。
   ・761px以下（スマートフォン）には適用しない。
   ・横バー（.ic-subnav-inner）は元から max-width:1661px で固定済みのため、変更なし。
   ========================================================= */
@media (min-width: 761px){
  .icx-hero{
    max-width: 1600px;
    margin-inline: auto;
    container-type: inline-size;
  }
}
/* 2026-09-10 修正：ここに閉じかっこ「}」が1個余分にあった（対応する開きかっこが無い）。
   CSSの決まりで、余分な閉じかっこは「その次に来るかたまりを1つ飲み込んで捨てる」ため、
   この下に書き足した指定がブラウザに完全に無視されていた。
   もともとこの行はファイルの最終行で、後ろに何も無かったので、
   取り除いてもPC版の見た目は一切変わらない。控えは /root/bk_top-redesign_pre_ipad.css */

/* =========================================================================
   2026-09-10 追加：iPad・ノートPCで「Memberになって、世界のクルーズを」の
   3枚のカードが右へはみ出し、横スクロールしないと②③が見られなかった。
   （版面1568px ／ iPad縦768px・横1024px ／ ノートPC1366px）
   縮小表示（incruises-intro-scale.js）が働く幅を広げたので、それに合わせて
   はみ出しの切り取りと縮小の基準点をこの範囲だけに与える。
   ・760px以下 … スマホ専用レイアウト（従来どおり。ここには入らない）
   ・1600px以上 … PC正式幅（従来どおり。ここには入らない）
   既存の行は1行も書き換えていない。控えは /root/bk_top-redesign_pre_ipad.css
   ========================================================================= */
@media (min-width:761px) and (max-width:1599px){
  .icx-intro{ overflow:hidden; }
  .icx-intro-inner{ overflow-x:visible; transform-origin:top left; }
}