@charset "utf-8";
/* =====================================================================
   Marine（マリネ） — Natural / Organic Light Theme
   main.css の後に読み込まれる上書きレイヤー。main.css は無変更。
   元に戻す場合はこのファイルを空にすればよい。
   ===================================================================== */

:root {
  --cream: #F6F1E7;
  --surface: #EFE7D7;
  --sand: #E7DBC6;
  --paper: #FBF8F1;
  --euca: #747875;
  --euca-deep: #747875;
  --sage: #94A48C;
  --clay: #C08457;
  --clay-deep: #A96A45;
  --bark: #2D2A24;
  --muted: #747875;
  --taupe: #8A8170;
  --line: #DACEB8;
}

/* ---------- Base ---------- */
body {
  background: var(--cream) !important;
  color: var(--bark) !important;
}

a {
  /* color: #747875 !important; */
}

a:hover {
  color: var(--clay) !important;
}

/* ---------- Header ---------- */
header {
  background: var(--paper) !important;
  border-image: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 0;
}

.logo-area a {
  background-image: url("../brand/marine-logo-light.svg") !important;
}

/* ---------- Sections (dark alt -> warm surface) ---------- */
#section02,
#section04,
#section06,
#section08,
#section10 {
  background: var(--surface) !important;
}

#section06,
#section08 {
  background: var(--surface) !important;
  color: var(--bark) !important;
}

.index-concept {
  background: var(--sand) !important;
}

.underlayer {
  background: var(--cream) !important;
}

.banner-content {
  background: var(--euca-deep) !important;
  color: var(--cream) !important;
}

/* ---------- Section headings (silver text -> eucalyptus) ---------- */
.contents-ttl h2 {
  background: none !important;
  -webkit-text-fill-color: var(--euca) !important;
  color: var(--euca) !important;
  border-bottom: 1px solid var(--line) !important;
}

.contents-ttl h2:after {
  background: none !important;
  -webkit-text-fill-color: var(--sage) !important;
  color: var(--sage) !important;
}

/* ---------- Silver metallic -> eucalyptus (active / confirm buttons) ---------- */
.more-list-btn a,
.route-list-btn a,
.news-pager li a.pager-current,
.weekly-schedule li a.current,
.tab-wrap li.active,
.tab-box label.active,
.shop-cmt+div.btn-review,
#rev-submit span {
  background: var(--euca) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border-color: var(--euca) !important;
}

.shop-cmt+div.btn-review:hover {
  background: var(--euca-deep) !important;
  color: var(--paper) !important;
}

/* ---------- Outline buttons (white border -> eucalyptus) ---------- */
.more-btn a,
.news-pager li a,
.tab-box label,
.accordion>ul>li>div {
  border: 1px solid var(--euca) !important;
  color: var(--euca) !important;
}

.accordion>ul>li>p {
  color: var(--bark) !important;
}

.accordion li .accordion_icon {
  background: var(--euca) !important;
}

/* ---------- Primary CTA (reserve / submit -> clay) ---------- */
.form-wrap button,
.submit-btn input[type="submit"],
.filter-inner input[type="submit"],
.comp-btn a,
.error-btn a,
.reserve-wrap a {
  background: var(--clay) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border: 1px solid var(--clay) !important;
}

.form-wrap button:hover,
.comp-btn a:hover,
.error-btn a:hover,
.reserve-wrap a:hover {
  background: var(--clay-deep) !important;
  border-color: var(--clay-deep) !important;
}

.form-wrap button[disabled] {
  background: var(--taupe) !important;
  color: var(--cream) !important;
}

.reserve-tel a {
  color: var(--euca) !important;
}

/* ---------- Badges ---------- */
.weekly-schedule li a {
  color: var(--bark) !important;
}

.weekly-schedule .nextweek,
.job-box dl dt {
  background: var(--euca) !important;
  color: var(--cream) !important;
}

.job-box dl dt a {
  color: var(--cream) !important;
}

.job-box dl dd a {
  color: var(--euca) !important;
}

.new-topics span.cat-ico {
  background: var(--sage) !important;
  color: var(--bark) !important;
}

.shame-box a {
  color: var(--euca) !important;
}

/* ---------- White borders -> sand line ---------- */
#pickup-slide,
.twi-wrap,
.blog-image a,
.sch-tbl dl dt,
.sch-tbl dl dd,
.news-text,
.price-list dl {
  border-color: var(--line) !important;
}

/* ---------- Price table (white-on-black -> bark on paper) ---------- */
.price-list dl {
  background: var(--paper) !important;
}

.price-list dl dt,
.price-list dl dd {
  color: var(--bark) !important;
  text-shadow: none !important;
}

/* ---------- Link text (dark-theme white -> eucalyptus) ---------- */
.blog-text p a {
  color: var(--euca) !important;
}

.info-comm {
  color: var(--bark) !important;
}

.rank_tab {
  color: var(--bark) !important;
}

/* ---------- Slider arrows ---------- */
.slick-prev:before,
.slick-next:before {
  color: var(--euca) !important;
}

/* ---------- Nav (drawer) ---------- */
nav,
#navi-menu {
  background: var(--euca-deep) !important;
}

nav ul li {
  border-bottom: 1px solid rgba(246, 241, 231, 0.18) !important;
}

nav ul li a,
.navi-contact,
.navi-contact a,
.navi-contact a i {
  color: var(--cream) !important;
}

/* ---------- Footer / sp fixed footer ---------- */
footer {
  background: var(--euca-deep) !important;
  color: var(--cream) !important;
}

footer a {
  color: var(--cream) !important;
}

.footer-logo,
/* .footer-logo a{ background-image:url("../brand/marine-logo-light.svg") !important; } */
.sp-foot {
  background: var(--euca-deep) !important;
}

.sp-foot li a {
  background: transparent !important;
  color: var(--cream) !important;
}

.hback-btn a {
  background: var(--euca) !important;
  color: var(--cream) !important;
}

.footer-wrap {
  padding: 0;
}

/* ---------- Loading ---------- */
#loader {
  background: var(--cream) !important;
  color: var(--euca) !important;
}

/* ---------- Main visual (hero bg image swap) ---------- */
.mainvisual-bg:before {
    content: "";
    display: block;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.2) 100%), url(../img/mainvisual.jpg);
    background-size: cover;
    background-position: right 10% top 4rem;
    background-repeat: no-repeat;
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}