/* =========================================================
   inCruises専用ページ｜安心して使うために知っておきたい5つのルール
   （スマートフォン専用）
   実装パック 04_rules5.css を .rules5 配下のまま移植。
   重要文字はすべてHTMLテキスト。画像は既存サイトの正式アイコン5点のみ。
   PC版（769px以上）は既存の1600pxキャンバスをそのまま維持する。
   グローバルセレクタは一切使用しない。
========================================================= */

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

/* =========================================================
  5つのルール：HTMLテキスト完全分解版
  - 重要文字は画像化しない
  - PC: 5列
  - Smartphone: 横スライド
========================================================= */

.rules5 {
  --navy:#102f63;
  --navy2:#173e7a;
  --gold:#c8922a;
  --gold-soft:#ead8b5;
  --ivory:#fffdf9;
  --line:#e9dcc6;
  --text:#2f2b28;
  --muted:#6e665e;
  --green:#2c9c52;
  --orange:#df7a16;
  --red:#dc332e;
  background: #fff;
  color: var(--text);
  padding: 42px 0 48px;
}

.rules5 * { box-sizing:border-box; }

.rules5__inner {
  width:min(1600px, calc(100% - 40px));
  margin:0 auto;
}

.rules5__header {
  text-align:center;
  margin-bottom:24px;
}

.rules5__eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--gold);
  font-size:16px;
  margin-bottom:6px;
}

.rules5__eyebrow span {
  width:76px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.rules5__eyebrow em { font-style:normal; }

.rules5__header h2 {
  margin:0;
  font-family:var(--cruise-mincho, "Yu Mincho","Hiragino Mincho ProN",serif);
  font-size:clamp(34px,3vw,50px);
  line-height:1.2;
  color:#3a2720;
  font-weight:600;
}

.rules5__five {
  color:var(--gold);
  font-size:1.35em;
  vertical-align:-.06em;
  margin:0 .03em;
}

.rules5__header p {
  margin:10px auto 0;
  max-width:940px;
  font-size:17px;
  line-height:1.65;
  color:#5c534d;
}

.rules5__swipe-hint { display:none; }

.rules5__track {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.rules5-card {
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 16px;
  box-shadow:0 7px 20px rgba(64,47,25,.05);
}

.rules5-card__heading {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
}

.rules5-card__number {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:21px;
  font-weight:700;
  box-shadow:0 4px 10px rgba(16,47,99,.15);
}

.rules5-card__heading h3 {
  margin:0;
  font-family:var(--cruise-mincho, "Yu Mincho","Hiragino Mincho ProN",serif);
  font-size:21px;
  line-height:1.2;
  font-weight:600;
  color:#2e211b;
}

.rules5-card__icon {
  height:92px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px 0 8px;
  color:var(--navy);
}


/* 既存サイトの正式アイコンを表示する枠 */
.rules5-card__icon img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.rules5-card__body { font-size:14px; line-height:1.6; }

.rules5-card__lead { margin:0 0 10px; }
.rules5-card__accent { margin:0 0 10px; font-weight:600; }
.rules5-card__accent--red, .is-red { color:var(--red); }

.rules5-list { margin:0 0 12px; padding:0; list-style:none; }
.rules5-list li { position:relative; padding-left:24px; margin:7px 0; }
.rules5-list--checks li::before {
  content:"✓"; position:absolute; left:0; top:.1em; width:18px;height:18px;border-radius:50%;border:2px solid var(--gold);
  color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}

.rules5-mini-title {
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  text-align:center;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  margin:10px 0 6px;
}

.rules5-rp-table {
  border:1px solid #cfd7e5;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:8px;
}
.rules5-rp-table > div {
  display:flex;align-items:center;justify-content:space-between;padding:9px 10px;background:#fbfdff;
}
.rules5-rp-table > div + div { border-top:1px solid #dfe4ed; }
.rules5-rp-table strong { font-size:18px;color:var(--navy); }
.rules5-rp-table strong.is-red { color:var(--red); }

.rules5-card__note { margin:8px 0 0; font-size:12px; line-height:1.5; color:#5d5752; }

.rules5-warning {
  display:grid;grid-template-columns:34px 1fr;gap:8px;background:#fff7e8;border:1px solid #f0d6a5;border-radius:11px;padding:10px;
}
.rules5-warning__icon {
  width:30px;height:30px;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--gold);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding-top:8px;
}
.rules5-warning strong { color:#6f4d18; }
.rules5-warning p { margin:4px 0 0; }

.rules5-info-box {
  border:1px solid #ced9e9;border-radius:9px;background:#f4f8fc;padding:8px 10px;margin:10px 0;
}
.rules5-info-box strong { display:block;color:var(--navy);margin-bottom:3px; }
.rules5-info-box span { font-size:12px; }

.rules5-card h4 { margin:11px 0 7px; font-size:14px; color:var(--navy); }

.rules5-timeline { display:grid; gap:6px; }
.rules5-timeline > div {
  display:grid;grid-template-columns:1fr 1.25fr;gap:8px;align-items:center;border-left:5px solid currentColor;padding:7px 8px;background:#fafafa;border-radius:7px;
}
.rules5-timeline b { font-size:13px; }
.rules5-timeline span { font-size:12px; }
.rules5-timeline .is-blue{color:#315c96}
.rules5-timeline .is-green{color:#2f9d48}
.rules5-timeline .is-orange{color:#db7a16}
.rules5-timeline .is-red{color:#d72d2b}

.rules5-plan-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;
}
.rules5-plan-grid div {
  border:1px solid #ced9e9;border-radius:9px;background:#f7faff;text-align:center;padding:8px 5px;
}
.rules5-plan-grid span { display:block;font-size:12px;font-weight:700;color:var(--navy); }
.rules5-plan-grid strong { display:block;font-size:20px;color:var(--navy);margin-top:2px; }

.rules5-restart-box {
  border-radius:9px;padding:8px 9px;margin:6px 0;display:flex;flex-direction:column;gap:2px;
}
.rules5-restart-box b { font-size:13px; }
.rules5-restart-box span { font-size:12px; }
.rules5-restart-box.is-green { background:#eef9ef;border:1px solid #cfe7d1;color:#267f39; }
.rules5-restart-box.is-orange { background:#fff6e9;border:1px solid #f0d8b0;color:#bc6815; }

.rules5-feature {
  display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;border:1px solid #e3e0db;border-radius:10px;padding:8px 9px;margin:7px 0;background:#fff;
}
.rules5-feature__icon {
  width:34px;height:34px;border-radius:8px;background:#f2f5fa;color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
}
.rules5-feature__icon--rp { border-radius:50%;background:#fff4df;color:var(--gold);border:2px solid var(--gold); }
.rules5-feature__icon--x { border-radius:50%;background:#fff0f0;color:var(--red);border:2px solid var(--red);font-size:22px; }
.rules5-feature p { margin:0; font-size:12.5px; line-height:1.45; }

.rules5__dots { display:none; }

@media (max-width:768px) {
  /* スマホでは既存のPCキャンバスを隠し、こちらへ差し替える */
  #incruises-rules-guide .rg-viewport{ display:none; }

  .rules5 { display:block; padding:28px 0 36px; background:#fff; }
  .rules5__inner { width:100%; }
  .rules5__header { padding:0 18px; margin-bottom:16px; }
  .rules5__eyebrow { font-size:13px; gap:8px; }
  .rules5__eyebrow span { width:46px; }
  .rules5__header h2 { font-size:28px; line-height:1.22; }
  .rules5__header p { font-size:15px; line-height:1.6; margin-top:8px; }
  .rules5__swipe-hint { display:block; color:#b17b1c !important; font-size:13px !important; margin-top:9px !important; }

  .rules5__viewport { overflow:hidden; }
  .rules5__track {
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:2px 18px 10px;
    scroll-padding-left:18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    align-items:flex-start;
  }
  .rules5__track::-webkit-scrollbar { display:none; }

  .rules5-card {
    flex:0 0 86%;
    max-width:340px;
    scroll-snap-align:start;
    border-radius:16px;
    padding:13px 13px 15px;
    box-shadow:0 7px 20px rgba(64,47,25,.06);
  }

  .rules5-card__heading { min-height:44px; }
  .rules5-card__number { width:36px;height:36px;flex-basis:36px;font-size:19px; }
  .rules5-card__heading h3 { font-size:22px; }
  .rules5-card__icon { height:82px; margin:2px 0 6px; }
  .rules5-card__body { font-size:16px; line-height:1.55; }
  .rules5-card__lead { margin-bottom:8px; }
  .rules5-card__note { font-size:13px; }
  .rules5-feature p { font-size:14px; }

  .rules5__dots {
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:8px;
  }
  .rules5__dots button {
    width:9px;height:9px;border:0;border-radius:50%;padding:0;background:#e4d8c6;cursor:pointer;
  }
  .rules5__dots button.is-active {
    background:var(--gold);
    transform:scale(1.25);
  }
}

@media (max-width:430px) {
  .rules5-card { flex-basis:86.5%; }
}

@media (prefers-reduced-motion:reduce) {
  .rules5__track { scroll-behavior:auto; }
}

/* =========================================================
   スマートフォン：50〜70代向けの文字サイズ統一
   リード20px／本文17px／小さなラベル15px／注記14px
   （PC 1600pxキャンバスは対象外）
========================================================= */
@media (max-width:768px) {
  .rules5__eyebrow { font-size:15px; }
  .rules5__header p { font-size:20px; line-height:1.65; }
  .rules5__swipe-hint { font-size:14px !important; }

  /* カード本文 */
  .rules5-card__body { font-size:17px; line-height:1.6; }
  .rules5-card h4 { font-size:17px; }
  .rules5-feature p { font-size:17px; line-height:1.5; }

  /* 表・タイムライン・プラン欄の小さなラベル */
  .rules5-mini-title { font-size:15px; }
  .rules5-info-box span { font-size:15px; }
  .rules5-timeline b { font-size:15px; }
  .rules5-timeline span { font-size:15px; }
  .rules5-restart-box b { font-size:15px; }
  .rules5-restart-box span { font-size:15px; }
  .rules5-plan-grid span { font-size:15px; }

  /* 注記 */
  .rules5-card__note { font-size:14px; line-height:1.55; }
}

/* 2026-09-07：休止のタイムラインを、規約どおりの4段に書き直したことに伴う調整。
   左の見出し列を少し広げ、右側は「結論」を1行目に太字で置いて読みやすくする。 */
.rules5-timeline > div{ grid-template-columns:78px 1fr; align-items:start; }
.rules5-timeline b{ line-height:1.5; }
.rules5-timeline span{ line-height:1.65; }
.rules5-timeline span em{ display:block; font-style:normal; font-weight:700; color:inherit; }
@media(min-width:769px){
  .rules5-timeline > div{ grid-template-columns:110px 1fr; }
}