/* =========================================================
   SKI / CAUTION
   /ski/caution/ 4 pages + /ski/_inc/caution.php
   Load after ski/css/common.css
   ========================================================= */

.caution-layout {
  --c-accent:#44535f;
  --c-accent-dark:#273640;
  --c-soft:#f4f6f7;
  --c-line:#dfe5e8;
  --c-pale:#f8fafb;
  color:#263640;
  background:#fff;
  padding:0 0 48px;
}
.caution-layout--bus { --c-accent:#1769aa; --c-accent-dark:#0f568d; --c-soft:#eef6fc; --c-line:#d7e8f5; }
.caution-layout--jr  { --c-accent:#137452; --c-accent-dark:#0d5b40; --c-soft:#eef8f4; --c-line:#d5ebe2; }
.caution-layout--stay{ --c-accent:#b34848; --c-accent-dark:#913838; --c-soft:#fcf1f1; --c-line:#efdada; }

.caution-layout *, .caution-common * { box-sizing:border-box; }
.caution-layout .main-in, .caution-common .main-in { max-width:1040px; margin-left:auto; margin-right:auto; }

/* ---------- top / page heading ---------- */
.caution-intro,
.caution-page__content { margin-top:28px; }

.caution-intro__inner {
  margin:0 10px;
  padding:30px 34px 28px;
  background:#fff;
  border-top:4px solid #273640;
  border-bottom:1px solid #dfe5e8;
}
.caution-intro__lead { margin:0 0 8px; color:#65737d; font-size:14px; font-weight:700; line-height:1.7; }
.caution-intro__title { margin:0; color:#202e37; font-size:30px; font-weight:700; line-height:1.45; letter-spacing:.02em; }
.caution-intro__en { margin:9px 0 0; color:#99a3aa; font-size:11px; line-height:1.5; }

.caution-page__content {
  margin-left:10px;
  margin-right:10px;
  padding:0 34px 34px;
  background:#fff;
  border:1px solid #e0e5e8;
  border-top:4px solid var(--c-accent);
  border-radius:0 0 10px 10px;
}
.caution-page__lead-title {
  margin:0 -34px 0;
  padding:22px 34px 18px;
  color:#202e37;
  background:#fff;
  border-bottom:1px solid #e3e7ea;
  font-size:23px;
  font-weight:700;
  line-height:1.55;
}
.caution-page__plan-title {
  margin:0 -34px 0 !important;
  padding:18px 34px !important;
  color:var(--c-accent-dark);
  background:var(--c-soft) !important;
  border:0 !important;
  border-bottom:1px solid var(--c-line) !important;
  font-size:20px;
  font-weight:700;
  line-height:1.5;
}
.caution-page__note {
  margin:0 -34px 8px !important;
  padding:11px 34px 12px;
  color:#a04438 !important;
  background:#fffaf8;
  border-bottom:1px solid #eee5e1;
  font-size:13px !important;
  line-height:1.7 !important;
}

/* ---------- long-form reading ---------- */
.caution-page__content > h3,
.caution-common__body > h3 {
  position:relative;
  margin:30px 0 12px;
  padding:0 0 10px 15px;
  color:#24333d;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #dfe5e8 !important;
  font-size:17px;
  font-weight:700;
  line-height:1.6;
}
.caution-page__content > h3:before {
  content:"";
  position:absolute;
  left:0; top:.32em; bottom:.45em;
  width:4px;
  border-radius:3px;
  background:var(--c-accent);
}
.caution-common__body > h3:before {
  content:"";
  position:absolute;
  left:0; top:.32em; bottom:.45em;
  width:4px;
  border-radius:3px;
  background:#77858e;
}
.caution-page__content > p,
.caution-common__body > p {
  margin:0 0 20px;
  color:#3d4b54;
  font-size:15px;
  line-height:2.05;
  letter-spacing:.01em;
}
.caution-page__content > h3 + p,
.caution-common__body > h3 + p { margin-top:0; }

/* JR address / small information box */
.caution-page__content .col_1,
.caution-common__subbox {
  margin:14px 0 22px;
  padding:16px 18px;
  background:#f7f9fa;
  border:1px solid #e0e5e8;
  border-radius:6px;
}
.caution-page__content .col_1 p,
.caution-common__subbox p { margin:0 0 5px; font-size:14px; line-height:1.85; }
.caution-page__content .col_1 p:last-child,
.caution-common__subbox p:last-child { margin-bottom:0; }

/* ---------- index selector ---------- */
.caution-page-title {
  margin:30px 0 0;
  padding:0 0 12px;
  border-bottom:1px solid #dfe5e8;
}
.caution-page-title h2 { margin:0; color:#24333d; font-size:21px; line-height:1.6; }
.caution-plan-select { padding:22px 0 4px; }
.caution-plan-select > p { margin:0 0 18px; color:#46545e; font-size:15px; line-height:1.9; }

.plan-link-faq,
.caution-plan-links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; }
.plan-link-faq p,
.caution-plan-links p { margin:0 !important; }
.plan-link-faq a,
.caution-plan-links a {
  position:relative;
  display:flex;
  align-items:center;
  min-height:64px;
  padding:14px 42px 14px 18px;
  color:#263640 !important;
  background:#fff;
  border:1px solid #dce3e7;
  border-radius:7px;
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  text-decoration:none !important;
  transition:.18s ease;
}
.plan-link-faq a:before,
.caution-plan-links a:before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:5px; border-radius:7px 0 0 7px; }
.plan-link-faq a:after,
.caution-plan-links a:after { content:"›"; position:absolute; right:17px; top:50%; transform:translateY(-52%); color:#7d8991; font-size:25px; font-weight:400; }
.plan-link-faq a.is-bus:before,.caution-plan-links a.is-bus:before{background:#1769aa}
.plan-link-faq a.is-jr:before,.caution-plan-links a.is-jr:before{background:#137452}
.plan-link-faq a.is-stay:before,.caution-plan-links a.is-stay:before{background:#b34848}
.plan-link-faq a:hover,.caution-plan-links a:hover { background:#f8fafb; border-color:#cbd5da; }
.caution-page__links-wrap { margin:24px 10px 0; padding-top:20px; border-top:1px solid #dfe5e8; }

/* ---------- common include ---------- */
.caution-common {
  margin-top:34px;
  padding:34px 0 32px;
  background:#f5f7f8;
  border-top:1px solid #e1e6e9;
  border-bottom:1px solid #e1e6e9;
}
.caution-common__body {
  margin:0 10px;
  padding:0 34px 30px;
  background:#fff;
  border:1px solid #e0e5e8;
  border-radius:8px;
}
.caution-common__title {
  margin:0 -34px 8px !important;
  padding:18px 34px !important;
  color:#263640;
  background:#e9eef1 !important;
  border:0 !important;
  border-radius:8px 8px 0 0;
  font-size:20px;
  font-weight:700;
  line-height:1.5;
}
.caution-common__body > h4 {
  margin:16px 0 8px;
  padding:9px 12px !important;
  color:#394750;
  background:#f4f6f7;
  border:0 !important;
  border-left:3px solid #9aa6ad !important;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
}
.caution-common__baggage {
  margin:18px 10px 0;
  padding:18px 20px;
  background:#fffdf7;
  border:1px solid #e7dfc7;
  border-left:4px solid #c7a64b;
  border-radius:6px;
}
.caution-common__baggage p { margin:0 0 7px; color:#465159; font-size:14px; line-height:1.9; }
.caution-common__baggage p:last-child { margin-bottom:0; }
.caution-common__baggage .fb { color:#3b4348; font-size:15px; }

/* old utility styles must not repaint caution headings */
.caution-layout .bg_beige,
.caution-common .bg_beige { background:transparent !important; }

@media (max-width:767px) {
  .caution-layout { padding-bottom:34px; }
  .caution-intro,.caution-page__content { margin-top:16px; }
  .caution-intro__inner { margin:0; padding:22px 18px 20px; border-top-width:3px; }
  .caution-intro__title { font-size:23px; line-height:1.45; }
  .caution-intro__lead { font-size:13px; }
  .caution-page__content { margin-left:0; margin-right:0; padding:0 18px 26px; border-left:0; border-right:0; border-radius:0; border-top-width:3px; }
  .caution-page__lead-title { margin:0 -18px; padding:18px; font-size:20px; }
  .caution-page__plan-title { margin:0 -18px !important; padding:15px 18px !important; font-size:18px; }
  .caution-page__note { margin:0 -18px 4px !important; padding:10px 18px 11px; font-size:12px !important; }
  .caution-page__content > h3,.caution-common__body > h3 { margin-top:25px; padding-left:12px; font-size:16px; }
  .caution-page__content > p,.caution-common__body > p { font-size:14px; line-height:1.95; }
  .caution-page-title { margin-top:22px; }
  .caution-page-title h2 { font-size:18px; }
  .caution-plan-select { padding-top:16px; }
  .plan-link-faq,.caution-plan-links { grid-template-columns:1fr; gap:9px; }
  .plan-link-faq a,.caution-plan-links a { min-height:54px; padding:12px 40px 12px 16px; font-size:14px; }
  .caution-common { margin-top:24px; padding:22px 0; }
  .caution-common__body { margin:0; padding:0 18px 24px; border-left:0; border-right:0; border-radius:0; }
  .caution-common__title { margin:0 -18px 6px !important; padding:15px 18px !important; border-radius:0; font-size:18px; }
  .caution-common__baggage { margin:14px 0 0; border-radius:0; border-right:0; }
  .caution-page__links-wrap { margin:18px 0 0; padding:18px 0 0; }
}