@charset "utf-8";
/* =========================================================
   RICH Car Rental - page style (4 patterns)
   ========================================================= */

:root{
  --navy:#1f2f54;
  --navy-dark:#162545;
  --beige:#c9b596;
  --beige-bg:#efe9e0;
  --blue-bg:#dbe7ed;
  --text:#222;
  --muted:#666;
  --line:#d6d6d6;
  --danger:#d85a4a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.8;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:#1a57c6; }
a:hover{ opacity:.9; }

.container{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.center{ text-align:center; }

/* ===== Hero ===== */
.hero{
  background:#555;
}
.hero__img{
  width:100%;
  height:auto;
}

/* ===== Catch ===== */
.catch{
  background: var(--beige-bg);
  padding: 18px 0 22px;
  text-align:center;
  font-size:16px;
  letter-spacing:.02em;
}
.catch__text{
  margin:0;
}

/* ===== Section label ===== */
.section{
  padding: 34px 0;
}
.section__label{
  display:inline-block;
  background: var(--beige);
  color:#111;
  font-weight:700;
  letter-spacing:.12em;
  padding: 10px 28px;
  border-radius:2px;
  font-size:16px;
}

.section__lead{
  margin: 14px auto 0;
  max-width: 720px;
  font-size:15px;
  color:#333;
}

/* ===== Flow ===== */
.flow{
  padding-top: 26px;
}
.steps{
  margin-top: 18px;
}
.step{
  max-width: 760px;
  margin: 0 auto;
}
.step__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin: 12px 0 10px;
}
.step__badge{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--beige);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex: 0 0 auto;
}
.step__badge span{
  font-size:12px;
  letter-spacing:.06em;
  line-height:1;
  margin-bottom: 3px;
}
.step__badge strong{
  font-size:22px;
  line-height:1;
}
.step__title{
  flex: 1;
  background: var(--navy);
  color:#fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight:800;
  text-align:center;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16);
}
.step__body{
  margin: 0 auto;
  max-width: 720px;
  font-size:15px;
  color:#222;
}
.step__list{
  margin: 0;
  padding-left: 18px;
}
.step__list li{
  margin: 4px 0;
}
.step__text{
  margin: 0;
  text-align:center;
}
.step__arrow{
  width:0;
  height:0;
  margin: 10px auto;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 22px solid #d7b45f;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.12));
}

/* ===== Price / Hours beige block with triangle ===== */
.section--beige{
  background: var(--beige-bg);
  position: relative;
}
.section--beige.section--point::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-60px;
  height:60px;
  background: var(--beige-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.section--beige.section--point{
  padding-bottom: 64px;
  margin-bottom: 60px;
}

/* ===== Price ===== */
.price__intro{
  max-width: 820px;
  margin: 14px auto 0;
  font-size:15px;
}
.price__badge{
  display:inline-block;
  background: var(--navy);
  color:#fff;
  padding: 6px 10px;
  border-radius: 3px;
  font-weight:800;
  font-size:14px;
  margin-right: 8px;
}
.price__discount{
  display:inline-block;
  background:#fff;
  border:1px solid #d0b9a0;
  padding: 0 6px;
  color: var(--danger);
  font-weight:900;
  border-radius:2px;
}
.price__legend{
  width: max-content;
  margin: 10px 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: end;
  padding-bottom: 6px;
  border-bottom: 4px solid var(--navy);
}

.price__legend .price__tax{
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: end;
  font-size:20px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.price__legend .legend{
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px 7px;
  background: var(--navy);
  color: #fff;
  font-size:15px;
  font-weight: 900;
  line-height: 1;
  border: none;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
}

.price__legend .legend::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-width: 7px 7px 0 7px;
  border-style: solid;
  border-color: var(--navy) transparent transparent transparent;
}

.price__legend .legend--disc{
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  color: var(--danger);
  font-size:22px;
  font-weight: 900;
  line-height: 1;
}

.price__legend .legend--disc::after{
  content: none;
}

@media (max-width: 480px){
  .price__legend{
    column-gap: 10px;
    padding-bottom: 5px;
    border-bottom-width: 3px;
  }
  .price__legend .price__tax{
    font-size:18px;
  }
  .price__legend .legend{
    font-size:14px;
    padding: 5px 14px 6px;
  }
  .price__legend .legend::after{
    bottom: -6px;
    border-width: 6px 6px 0 6px;
  }
  .price__legend .legend--disc{
    font-size:20px;
  }
}


.table-box{
  max-width: 860px;
  margin: 16px auto 0;
  border: 2px solid var(--navy);
  border-radius: 10px;
  overflow:hidden;
  background:#fff;
}
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.price-table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size:14px;
}
.price-table th,
.price-table td{
  border:1px solid var(--navy);
  padding: 8px 6px;
  text-align:center;
  vertical-align:middle;
  line-height:1.25;
}
.price-table thead th{
  background: var(--navy);
  color:#fff;
  font-weight:800;
}
.price-table .col-car{
  background: var(--navy);
  color:#fff;
  font-weight:800;
  width: 92px;
}
.price-table .col-season{
  background: #f3f3f3;
  font-weight:800;
  width: 92px;
}
.price-table .price-normal{
  display:inline-block;
  padding: 4px 10px 5px;
  background: var(--navy);
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  position:relative;
  margin: 0 0 10px;
  border-radius: 0;
}
.price-table .price-normal::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border-width:6px 6px 0 6px;
  border-style:solid;
  border-color: var(--navy) transparent transparent transparent;
}

.price-table .price-disc{
  display:block;
  margin-top: 0;
  font-size:17px;
  font-weight:900;
  color: var(--danger);
}
.price__season{
  max-width: 860px;
  margin: 10px auto 0;
  text-align:right;
  font-size:14px;
  color:#333;
}
.link-chip{
  display:inline-block;
  margin: 0 4px;
  background: var(--navy);
  color:#fff !important;
  text-decoration:none;
  padding: 2px 10px;
  border-radius: 2px;
  font-weight:800;
  font-size:14px;
}

.season-period{
  max-width: 860px;
  margin: 28px auto 0;
  text-align:left;
}
.season-period__title{
  display:inline-block;
  background:#5d6779;
  color:#fff;
  padding: 11px 34px 12px;
  border-radius:8px;
  font-size:20px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.03em;
}
.season-period__lead{
  margin: 22px 0 20px;
  font-size:16px;
  color:#222;
  line-height:1.5;
}
.season-period__row{
  display:flex;
  align-items:stretch;
  border:5px solid #223054;
  border-radius:999px;
  background:#f7f7f9;
  overflow:hidden;
}
.season-period__row + .season-period__row{
  margin-top:14px;
}
.season-period__name{
  flex:0 0 34%;
  max-width:34%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 20px;
  border-right:5px solid #223054;
  color:#223054;
  font-size:20px;
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
}
.season-period__text{
  flex:1;
  padding: 10px 26px 11px;
  color:#223054;
  font-size:20px;
  line-height:1.22;
}

/* hint for mobile scroll */
.table-hint{
  display:none;
  max-width: 860px;
  margin: 8px auto 0;
  font-size:14px;
  color: var(--muted);
}

/* ===== Hours ===== */
.hours__text{
  margin: 12px 0 0;
  font-size:16px;
  color:#222;
}

/* ===== Cars ===== */
.car-list{
  max-width: 860px;
  margin: 18px auto 0;
}
.car-item{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  padding: 18px 0;
}
.car-item + .car-item{
  border-top: 1px solid var(--line);
}
.car-item__img{
  width: 260px;
  flex: 0 0 auto;
  text-align:center;
}
.car-item__img img{
  border: 1px solid #ddd;
  background:#fff;
}
.car-item__cap{
  margin-top: 6px;
  font-size:13px;
  color:#777;
}
.car-item__body{
  flex: 1;
}
.car-item__title{
  margin: 0 0 8px;
  font-size:16px;
  font-weight:900;
  color:#111;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.car-item__title::before{
  content:"■";
  color: var(--navy);
  font-weight:900;
}
.car-pill{
  display:inline-block;
  background: var(--navy);
  color:#fff;
  padding: 2px 10px;
  border-radius: 2px;
  font-size:14px;
  font-weight:800;
}
.car-item__desc{
  margin:0;
  font-size:15px;
  color:#222;
}

/* ===== Options ===== */
.opt-title{
  margin: 24px 0 8px;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#111;
  letter-spacing:.04em;
}
.opts{
  max-width: 860px;
  margin: 14px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.opt{
  border: 1px solid #bfc6d1;
  border-radius: 10px;
  overflow:hidden;
  background:#fff;
}
.opt__top{
  background: var(--navy);
  color:#fff;
  text-align:center;
  padding: 10px 6px;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}
.opt__bottom{
  text-align:center;
  padding: 14px 8px;
  font-size:16px;
  font-weight:900;
  color:#111;
  line-height:1.2;
}
.opt__bottom small{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#333;
  margin-top: 6px;
}

/* ===== FAQ ===== */
.section--faq{
  background: var(--blue-bg);
}
.faq-list{
  max-width: 860px;
  margin: 18px auto 0;
}
.qa{
  border: 2px solid #8fa3b6;
  border-radius: 10px;
  background: rgba(255,255,255,.25);
  padding: 14px;
  margin: 14px 0;
}
.qa__q{
  display:inline-block;
  background: var(--navy);
  color:#fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight:900;
  margin-bottom: 10px;
  font-size:15px;
}
.qa__a{
  margin:0;
  font-size:15px;
  color:#223;
}
.qa__a ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.qa__a li{
  margin: 4px 0;
}

/* ===== Terms / Contact ===== */
.terms__text{
  margin: 14px auto 0;
  max-width: 820px;
  font-size:15px;
  color:#222;
}
.tel{
  margin: 10px 0 0;
  font-size:30px;
  font-weight: 1000;
  color:#1a57c6;
}
.contact__hotel{
  margin-top: 6px;
  font-size:15px;
  font-weight: 700;
}
.contact__addr{
  margin-top: 2px;
  font-size:14px;
  color:#333;
}

/* ===== Footer background ===== */
.footer-hero{
  margin-top: 18px;
  padding: 34px 0 70px;
  background: center/cover no-repeat;
  position:relative;
}
.footer-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,0) 45%);
  pointer-events:none;
}
.footer-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
}
.footer-logo{
  display:block;
  width:min(340px, 78vw);
  height:auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.footer-logo__mark{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:#fff;
  color:#1a57c6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size:14px;
}
.footer-bar{
  height: 20px;
  background: var(--beige);
}


.price__sep{
  max-width: 860px;
  margin: 18px auto;
  border-top: 1px solid #cfc7bc;
}
.qa__a p{
  margin: 0 0 8px;
}
.qa__a p:last-child{
  margin-bottom: 0;
}

/* ===== Responsive ===== */
@media (max-width: 760px){
  .section{ padding: 28px 0; }
  .section__label{ padding: 9px 18px; font-size:15px; }
  .catch{ font-size:15px; }

  .step__head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .step__title{ text-align:center; }
  .step__body{ padding: 0 8px; }
  .step__text{ text-align:left; }

  .table-hint{ display:block; }

  .season-period{
    margin-top:18px;
  }
  .season-period__title{
    font-size:18px;
    padding: 10px 18px 11px;
  }
  .season-period__lead{
    font-size:15px;
    margin: 14px 0 12px;
  }
  .season-period__row{
    display:block;
    border-width:4px;
    border-radius:22px;
  }
  .season-period__name{
    max-width:none;
    border-right:none;
    border-bottom:4px solid #223054;
    justify-content:flex-start;
    font-size:18px;
    padding: 10px 14px;
    white-space:normal;
  }
  .season-period__text{
    font-size:17px;
    line-height:1.3;
    padding: 10px 14px 12px;
  }

  .car-item{
    flex-direction: column;
    align-items:center;
    gap: 12px;
  }
  .car-item__img{
    width: 100%;
    max-width: 520px;
  }
  .car-item__title{
    justify-content:center;
    text-align:center;
  }
  .car-item__desc{
    text-align:left;
  }

  .opts{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tel{ font-size:26px; }
}

@media (max-width: 420px){
  .opts{ grid-template-columns: 1fr; }
  .price-table{ min-width: 680px; }
}
/* =========================
   Simple Web Editor (edit=1)
   ========================= */

body.is-edit{
  background:#f6f7fb;
}

.editorBar{
  position:sticky;
  top:0;
  z-index:9999;
  background:#111;
  color:#fff;
  padding:10px 14px;
  font-size:15px;
}
.editorBar__inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.editorBar a{
  color:#fff;
  text-decoration:underline;
}

.editorPanel{
  max-width:980px;
  margin:14px auto 26px;
  padding:0 14px;
}

.editorCard{
  background:#fff;
  border:2px solid #111;
  border-radius:14px;
  padding:14px;
}

.editorCard h2{
  margin:0 0 8px;
  font-size:18px;
}

.editorForm details{
  border:1px solid #d7d7d7;
  border-radius:12px;
  padding:10px;
  margin:12px 0;
  background:#fafafa;
}
.editorForm summary{
  cursor:pointer;
  font-weight:900;
  color:#111;
}

.editorField{ margin-top:10px; }
.editorField label{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#222;
  margin-bottom:6px;
}

.editorField input,
.editorField textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #cfcfcf;
  border-radius:10px;
  font:inherit;
  font-size:16px;
  line-height:1.6;
}
.editorField textarea{
  min-height:86px;
  resize:vertical;
}

.editorGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.editorActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.editorBtn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.editorBtn--primary{ background:var(--navy); color:#fff; }
.editorBtn--secondary{ background:#666; color:#fff; }

.editorMsg{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:12px;
  background:#e7f6ed;
  border:1px solid #8ed1a8;
  color:#0b5b2b;
  font-size:15px;
}

@media (max-width: 560px){
  .editorGrid2{ grid-template-columns:1fr; }
}