/* =========================================================
   inCruises専用ページ｜安心してご利用いただくために（スマートフォン専用）
   完成見本: 実装パック assets/reference_mobile_target.png
   実装パック 04_safety_section.css を .ic-safety 配下へ移植。
   文言・画像は既存PCキャンバスの正式資産をそのまま再利用している。
   PC版（769px以上）は既存の1600pxキャンバスを維持する。
   グローバルセレクタは一切使用しない。
========================================================= */

/* 769px以上では一切表示しない（PC版は既存キャンバスのまま） */
.ic-safety{ display: none; }

@media (max-width: 768px){

  /* スマホでは既存のPCキャンバスを隠し、こちらへ差し替える */
  #incruises-assurance-guide .ag-viewport{ display: none; }

  .ic-safety{
    --ic-bg:#fffdfa;
    --ic-card:#ffffff;
    --ic-text:#193766;
    --ic-gold:#c99834;
    --ic-line:#eadcc2;
    --ic-shadow:0 8px 24px rgba(24,52,106,.06);
    display: block;
    background: var(--ic-bg);
    color: var(--ic-text);
    padding: 22px 16px 30px;
    font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  }
  .ic-safety *{ box-sizing: border-box; }

  /* ---- 見出し（すべてHTMLテキスト） ---- */
  .ic-safety__head{ text-align: center; margin: 0 auto 16px; }
  .ic-eyebrow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 9px;
    color: var(--ic-gold);
  }
  .ic-eyebrow span{
    display: block;
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ic-gold), transparent);
  }
  .ic-eyebrow em{
    font-style: normal;
    font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .ic-safety__head h2{
    margin: 0 0 10px;
    font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(21px, 6.35vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    color: #12244a;
  }
  .ic-safety__lead{
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ic-text);
  }

  /* ---- カード共通 ---- */
  .ic-safety-card{
    position: relative;
    background: var(--ic-card);
    border: 1px solid var(--ic-line);
    border-radius: 22px;
    box-shadow: var(--ic-shadow);
    padding: 14px 14px 15px;
    margin: 0 0 12px;
  }
  .ic-safety-card__head{
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
  }
  .ic-section-no{
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: auto;
  }
  .ic-safety-card h3{
    margin: 0;
    font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.01em;
    color: var(--ic-text);
  }
  .ic-safety-card h3 .ic-en{
    display: block;
    margin-top: 2px;
    font-family: "Noto Sans JP","Yu Gothic",sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    color: #5d6a82;
  }
  .ic-safety-card__desc{
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ic-text);
  }

  /* ---- ①：見出し＋説明（左）とチェック（右）の2段組み ---- */
  .ic-pm-top{
    display: grid;
    grid-template-columns: .93fr 1.07fr;
    gap: 10px;
    align-items: start;
    margin-bottom: 11px;
  }
  .ic-pm-top .ic-safety-card__desc{ margin-bottom: 0; }
  .ic-pm-top .ic-check-list{ margin-bottom: 0; }

  /* ---- ①のチェックリスト ---- */
  .ic-check-list{
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
  }
  .ic-check-list li{
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.42;
    color: var(--ic-text);
  }
  .ic-check-list li img{
    display: block;
    flex: 0 0 auto;
    width: 17px;
    height: auto;
    margin-top: 2px;
  }

  /* ---- ①の3ステップ横スライド ---- */
  .ic-pm-slider-wrap{ margin-top: 2px; }
  .ic-pm-slider{
    display: flex;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ic-pm-slider::-webkit-scrollbar{ display: none; }

  .ic-pm-step{
    flex: 0 0 86%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--ic-line);
    border-radius: 16px;
    background: #fff;
    padding: 11px 11px 12px;
    box-shadow: 0 4px 14px rgba(17,41,78,.05);
    display: grid;
    grid-template-rows: 62px 200px 1fr;
  }
  .ic-pm-step__head{
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .ic-step-label{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #173b78;
    color: #fff;
    line-height: 1;
  }
  .ic-step-label em{ font-style: normal; font-size: 10px; letter-spacing: .04em; }
  .ic-step-label b{ margin-top: 2px; font-size: 21px; font-weight: 600; }
  .ic-pm-step h4{
    margin: 0;
    font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-text);
  }
  .ic-mini-shot{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 9px;
    min-height: 0;
  }
  .ic-mini-shot img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .ic-pm-step ul{
    margin: 0;
    padding-left: 17px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ic-text);
  }

  .ic-pm-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  .ic-pm-dots button{
    appearance: none;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9dce5;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
  }
  .ic-pm-dots button.is-active{
    background: #163a76;
    transform: scale(1.2);
  }

  /* ---- ②の3パネル ---- */
  .ic-safety-tag{ margin: 0 0 9px; }
  .ic-safety-tag span{
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #d8dde8;
    border-radius: 999px;
    background: #f4f6fa;
    font-size: 12.5px;
    line-height: 1.3;
    color: #48526b;
  }
  .ic-s2-panels{ display: grid; gap: 9px; }
  .ic-s2-panel{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border: 1px solid var(--ic-line);
    border-radius: 14px;
    background: #fffdfa;
  }
  .ic-s2-icon{ display: block; flex: 0 0 auto; width: 46px; height: auto; }
  .ic-s2-body{ flex: 1; min-width: 0; }
  .ic-s2-body h4{
    margin: 0 0 5px;
    font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-text);
  }
  .ic-s2-body .ic-check-list{ gap: 4px; }
  .ic-s2-body .ic-check-list li{ font-size: 12.5px; line-height: 1.4; }
  .ic-s2-body .ic-check-list img{ width: 15px; margin-top: 1px; }
  .ic-check-list.is-2col{ grid-template-columns: .92fr 1.08fr; column-gap: 8px; }
  .ic-check-list.is-2col li:last-child{ grid-column: 1 / -1; }

  /* ---- ③④の本文 ---- */
  .ic-safety-row{ display: flex; align-items: flex-start; gap: 12px; }
  .ic-safety-icon{ display: block; flex: 0 0 auto; width: 54px; height: auto; }
  .ic-safety-copy{ flex: 1; min-width: 0; }
  .ic-safety-copy p{
    margin: 0 0 5px;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--ic-text);
  }
  .ic-safety-copy p:last-child{ margin-bottom: 0; }
  .ic-safety-copy .ic-note{ margin-top: 6px; font-size: 12px; line-height: 1.6; color: #55627d; }

  /* ---- 最下部の注記 ---- */
  .ic-safety__footnote{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
  }
  .ic-safety__footnote span{
    flex: 0 1 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ic-gold), transparent);
  }
  .ic-safety__footnote p{
    flex: 0 1 auto;
    margin: 0;
    max-width: 292px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ic-text);
  }
}

@media (max-width: 389px){
  .ic-safety{ padding-inline: 14px; }
  .ic-safety-card h3{ font-size: 20px; }
  .ic-pm-step{ flex-basis: 87%; }
}

@media (prefers-reduced-motion: reduce){
  .ic-pm-slider{ scroll-behavior: auto; }
  .ic-pm-dots button{ transition: none; }
}

/* =========================================================
   ②クルーズ支払い保護：3パネルを「予約キャンセル保護制度」の下で折りたたむ
   （スマートフォン専用ブロック内。PC 1600pxキャンバスは対象外）
========================================================= */
@media (max-width: 768px){
  .ic-s2-fold{ margin: 0; }
  .ic-s2-fold__sum{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    margin: 0 0 9px;
    padding: 0;
  }
  .ic-s2-fold__sum::-webkit-details-marker{ display: none; }
  .ic-s2-fold__sum .ic-safety-tag{ margin: 0; }
  .ic-s2-fold__hint{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #6c6153;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .02em;
  }
  .ic-s2-fold__ic{
    font-size: 10px;
    line-height: 1;
    color: #b9903f;
    transition: transform .18s ease;
  }
  .ic-s2-fold[open] .ic-s2-fold__ic{ transform: rotate(180deg); }
  .ic-s2-fold[open] .ic-s2-fold__txt{ font-size: 0; }
  .ic-s2-fold[open] .ic-s2-fold__txt::after{
    content: "閉じる";
    font-size: 14px;
  }
  .ic-s2-fold .ic-s2-panels{ margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce){
  .ic-s2-fold__ic{ transition: none; }
}

/* =========================================================
   ①プライスマッチング：右側のチェック4項目はSTEP1〜3の説明と重複するため
   スマートフォンでは非表示にし、左の説明文を横いっぱいに広げて全文を表示する
   （マークアップは削除していない。PC 1600pxキャンバスは対象外）
========================================================= */
@media (max-width: 768px){
  .ic-pm-top{ display: block; }
  .ic-pm-top > .ic-check-list{ display: none; }
  .ic-pm-top .ic-safety-card__desc{ margin-bottom: 0; }
}

/* =========================================================
   スマートフォン：50〜70代向けの文字サイズ統一
   大見出し28px／リード20px／本文17px／チップ15px／注記14px
   （PC 1600pxキャンバスは対象外）
========================================================= */
@media (max-width: 768px){
  .ic-safety__head h2{
    font-size: 28px;
    white-space: normal;      /* 28pxでは1行に収まらないため折り返しを許可 */
    text-wrap: balance;
  }
  .ic-safety__lead{ font-size: 20px; line-height: 1.7; }

  /* カードの説明文 */
  .ic-safety-card__desc{ font-size: 17px; line-height: 1.65; }
  .ic-safety-card h3 .ic-en{ font-size: 13px; }

  /* STEP1〜3 */
  .ic-step-label em{ font-size: 14px; }
  .ic-pm-step ul{ font-size: 17px; line-height: 1.6; }

  /* ②の3パネル */
  .ic-safety-tag span{ font-size: 15px; }
  .ic-s2-body h4{ font-size: 17px; }
  .ic-s2-body .ic-check-list li{ font-size: 15px; line-height: 1.45; }

  /* ③④の本文と注記 */
  .ic-safety-copy p{ font-size: 17px; line-height: 1.7; }
  .ic-safety-copy .ic-note{ font-size: 14px; }

  /* 最下部の注記 */
  .ic-safety__footnote p{ font-size: 14px; max-width: none; }
}