@charset "utf-8";
/* =========================================================
   ゼロナビ Theme Refresh — 構成は維持し、見た目をモダンに刷新
   （common.css の後に読み込み、必要箇所のみ上書き）
   Palette: navy #0e2a4f / blue #1f6fb2 / deep #0e4d8c / sky #eaf2fb
   ========================================================= */
:root{
  --navy:#0e2a4f; --blue:#1f6fb2; --blue-d:#0e4d8c;
  --sky:#eef4fb; --sky2:#f6f9fd; --line:#dbe6f2; --ink:#26405f;
  --shadow:0 10px 30px rgba(16,42,79,.10);
  --shadow-sm:0 4px 14px rgba(16,42,79,.08);
  --radius:16px;
}

/* ---------- Base typography ---------- */
body{ font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
      color:var(--ink); line-height:1.9; -webkit-font-smoothing:antialiased; letter-spacing:.01em; }
strong{ color:var(--blue-d); }
a{ transition:all .18s ease; }

/* ---------- Section rhythm ---------- */
section{ position:relative; }
.section-inner{ max-width:1100px; padding:64px 24px; }
@media (max-width:767px){ .section-inner{ padding:44px 18px; } }

/* Alternating airy backgrounds (差し色は帯ではなく余白で見せる) */
.about{ background:linear-gradient(180deg,#fff 0%,var(--sky) 100%) !important; color:var(--ink) !important; }
.reason{ background:#fff; }
.flow{ background:var(--sky2) !important; border-top:1px solid var(--line) !important; }
.company{ background:var(--navy) !important; color:#fff; }

/* ---------- Modern section headings ---------- */
.title,
.about > h1,
.reason > h1{
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif !important;
  font-weight:900 !important; color:var(--navy) !important;
  font-size:2rem !important; line-height:1.4 !important; letter-spacing:.02em;
  text-align:center; margin:0 auto .4rem !important; border:0 !important;
  padding-bottom:.7rem; position:relative;
}
.title::after,
.about > h1::after,
.reason > h1::after{
  content:""; display:block; width:56px; height:4px; border-radius:4px;
  margin:.85rem auto 0; background:linear-gradient(90deg,var(--blue),var(--blue-d));
}
/* small eyebrow above headings */
.about > h1::before,
.reason > h1::before{
  content:"ZERONAVI"; display:block; font-family:"Roboto",sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.22em; color:var(--blue); margin-bottom:.5rem;
}
@media (max-width:767px){ .title,.about>h1,.reason>h1{ font-size:1.5rem !important; } }

.about strong{ color:var(--blue-d) !important; }
.about h1{ border:0 !important; }
.about .text{ background:transparent !important; color:var(--ink) !important; font-size:1.02rem !important;
  max-width:820px; margin:0 auto !important; padding:18px 20px 8px !important; }

/* brand slider — 角丸＋余白 */
#slide-brand{ max-width:1000px; margin:26px auto 0; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); }
#slide-brand img{ border-radius:0; }

/* ---------- Hero ---------- */
.mainvisual{ box-shadow:none !important; border-bottom:1px solid var(--line); }
.mainvisual img{ max-width:860px !important; }
.index .mainvisual{ padding-bottom:34px; }

/* ---------- 選ばれる理由：カード化 ---------- */
.reason .section-inner{ }
.reason-single{ background:#fff !important; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
  max-width:1000px; margin:0 auto 26px !important; transition:transform .2s, box-shadow .2s; }
.reason-single:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.reason-single.even{ background:#fff !important; }
.reason-single .section-inner{ padding:30px !important; }
.reason .reason-img{ border-radius:12px; }
.reason-single strong{ color:var(--blue-d) !important; }

/* number chip before each reason title (装飾) */
.reason h2{ position:relative; }

/* ---------- ご利用の流れ：ステップカード ---------- */
.flow-single{ background:#fff !important; border:1px solid var(--line) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important;
  overflow:hidden; transition:transform .2s, box-shadow .2s; }
.flow-single:hover{ transform:translateY(-4px); box-shadow:var(--shadow) !important; }
.flow-single h3{ background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff !important;
  margin:0 !important; padding:14px 16px !important; font-weight:700; }
.flow-single .number{ background:#fff !important; color:var(--blue-d) !important;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; padding:0 !important; margin-right:10px !important;
  font-family:"Roboto",sans-serif; font-weight:900; }
.flow-single .text{ padding:14px 16px !important; }
.flow-single a{ color:var(--blue-d) !important; }

/* ---------- 会社概要：ダークネイビーのカード ---------- */
.company{ background:var(--navy) !important; }
.company h2{ color:#fff !important; }
.company .title::after{ background:linear-gradient(90deg,#7fb0e0,#cfe0f2); }
.company .table-company{ max-width:720px; margin:0 auto; background:rgba(255,255,255,.06) !important;
  border-radius:var(--radius); overflow:hidden; }
.company .table-company th{ background:rgba(255,255,255,.10) !important; color:#dceafa !important;
  border:0 !important; }
.company .table-company td{ color:#eaf2fb !important; background:transparent !important; border:0 !important; }
.company .table-company a{ color:#9fd0ff !important; }

/* ---------- Buttons ---------- */
.btn{ border-radius:999px !important; }
.btn-zerogreen,.btn-zeroorange{
  background:linear-gradient(135deg,var(--blue),var(--blue-d)) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important; box-shadow:0 8px 20px rgba(16,42,79,.22) !important;
  text-shadow:none !important; transition:transform .16s, box-shadow .16s !important; }
.btn-zerogreen:hover,.btn-zeroorange:hover,
.btn-zerogreen:active,.btn-zeroorange:active,
.btn-zerogreen:focus,.btn-zeroorange:focus{
  border:0 !important; transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(16,42,79,.3) !important; color:#fff !important; }

/* ---------- Property list cards (下層) ---------- */
.list-single{ border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important; transition:transform .2s, box-shadow .2s !important; }
.list-single:hover{ transform:translateY(-4px); box-shadow:var(--shadow) !important; }
.list-single h3.detail-title{ background:var(--navy) !important; }
.list-single .data dt{ background:var(--navy) !important; }
.list-single .labels .is-newbuild{ background:var(--blue-d) !important; border-color:var(--navy) !important; }
.list-single .labels .is-new{ background:var(--blue) !important; }
.list-single .labels .fee{ background:var(--navy) !important; color:#fff !important; }

/* ---------- Fixed bottom CTA (sp) ---------- */
.btn-yellow{ background:linear-gradient(135deg,#2a8fe0,#0e4d8c) !important; color:#fff !important; }
.btn-yellow:hover{ background:linear-gradient(135deg,#1f6fb2,#0e2a4f) !important; color:#fff !important; }
#footer-contact{ background:rgba(14,42,79,.82) !important; }
#footer-contact .btn{ color:#fff !important; }

/* ---------- Contact ---------- */
.title-blue .title-inner{ color:var(--navy) !important; }

/* remove residual warm accents */
.about strong{ color:var(--blue-d) !important; }