@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@media screen and (min-width: 680px) {
  .pc {
    display: inline-block;
  }
  .sp {
    display: none;
  }
}
@media screen and (max-width: 680px) {
  .pc {
    display: none;
  }
  .sp {
    display: inline-block;
  }
}
:root {
  --kon: #16336d;
}
@media (max-width: 768px) {
  :root {
    --bs-body-font-size: 0.9rem;
  }
}

.navbar {
  --bs-navbar-nav-link-padding-x: 1.2rem;
}

body {
  font-family: "Roboto", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222222;
}

a {
  text-decoration: none;
  color: var(--kon);
}

p {
  line-height: 1.6;
}

header {
  position: relative;
  color: #fff;
}

.navbar-toggler {
  background-color: var(--kon);
  padding: 0.6rem;
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 1000;
}

.hero-outer {
  background-image: url(img/top-right.svg), url(img/top-left.svg), url(img/top-back.jpg);
  background-repeat: no-repeat;
  background-position: right, left, center;
}
@media (max-width: 768px) {
  .hero-outer {
    background-position: right -100px bottom, left -100px bottom, center;
  }
}

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
}

.hero-copy {
  text-align: center;
}

.k-micchaku {
  width: 210px;
}

.hero-main {
  border-bottom: 4px solid white;
}
.hero-main img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-sub {
  font-size: 1.2rem;
  font-family: "Noto Serif JP", serif;
}

.hero-tel {
  font-size: 1.8rem;
  font-weight: 700;
}

.navbar-brand img {
  width: 150px;
}
@media (max-width: 768px) {
  .navbar-brand img {
    width: 100px;
  }
}

.section {
  padding: 4rem 0;
}

.section-title {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #192e59;
  margin-bottom: 3rem;
}
.section-title span {
  padding-top: 0.4rem;
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

.section-title-en {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

.bg-navy {
  background-color: #11294b;
}
.bg-navy .section-title {
  color: white;
}

.text-navy {
  color: #11294b;
}

.bg-light-gray {
  background-image: url(img/white_sand.jpg);
}

.fuel-card {
  color: white;
  background-size: cover;
  background-position: center;
}

.fuel-card h3 {
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
  text-align: center;
  color: white;
  margin-bottom: 1rem;
}

.fuel-card p {
  font-size: 0.95rem;
  line-height: 1.8;
}

.badge-fuel {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgba(255, 255, 255, 0.5882352941);
}

.flow-step {
  position: relative;
  padding-left: 3rem;
  background-color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 20px;
  display: flex;
}

.flow-step-number {
  color: #11294b;
  font-family: "Barlow", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-right: 2rem;
}

.page-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 999;
  text-align: center;
  color: var(--kon);
  transition: 0.3s;
  font-size: 0.8rem;
}
.page-top img {
  width: 40px;
}
.page-top:hover {
  transform: translateY(-3px);
}

footer {
  text-align: center;
  background-image: url(img/footer-back.jpg);
  background-size: cover;
  background-position: center;
  font-size: 0.85rem;
}
footer h3 {
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.15rem;
}
footer h3 span {
  font-size: 1.1rem;
}

@media (max-width: 767.98px) {
  .hero {
    text-align: center;
    justify-content: center;
  }
  .hero-tel {
    font-size: 1.4rem;
  }
  .flow-step {
    padding-left: 2.5rem;
  }
  .flow-step-number {
    width: 1rem;
    height: 2rem;
  }
}
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.contact-buttons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 30vw, 350px);
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 1px solid #ccc;
  color: #222;
}
.contact-buttons a:hover {
  transform: translateY(3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  background: #fff;
}
.contact-buttons a .icon {
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
  color: #000;
}
.contact-buttons a .ttl {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.08em;
}
.contact-buttons a .tel {
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: #000;
  font-weight: 700;
}

/* スマホサイズ調整 */
@media (max-width: 768px) {
  .contact-buttons {
    gap: 1.5rem;
  }
  .contact-buttons a {
    width: 90%;
    padding: 0.5rem;
  }
  .contact-buttons a .icon {
    font-size: 1.8rem;
  }
  .contact-buttons a .ttl {
    font-size: 0.9rem;
  }
  .contact-buttons a .tel {
    font-size: 0.9rem;
  }
}
.nav-transparent {
  background-color: transparent !important;
}

/* ハンバーガー3本線 */
.navbar-toggler .toggler-line {
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background-color: #fff;
  margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開いたときに「×」に変形 */
.navbar-toggler[aria-expanded=true] .toggler-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar-toggler[aria-expanded=true] .toggler-line:nth-child(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded=true] .toggler-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Offcanvas スタイルカスタム */
.offcanvas {
  width: 70vw !important; /* 横幅70% */
  background: rgba(255, 255, 255, 0.9) !important; /* 少し透けた白 */
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px); /* 後ろをぼかして高級感 */
  border: none;
  bottom: 40vh; /* 下40%空白 */
  border-radius: 10px 0 0 10px; /* 左角少し丸くすると綺麗 (お好みで) */
  text-align: center;
}

/* 下20%の空白領域（閉じるための余白クリック対応） */
.offcanvas-backdrop {
  background: rgba(0, 0, 0, 0.8) !important; /* 少し暗くして操作誘導 */
  -webkit-backdrop-filter: blur(50px);
          backdrop-filter: blur(50px);
}

/* スマホメニュー内（offcanvas）の文字色 */
.offcanvas .nav-link {
  color: #111 !important; /* 黒寄りの濃いグレー */
  padding: 1rem 0;
}

/* ホバー時 */
.offcanvas .nav-link:hover {
  color: #007bff !important; /* 好きな色に変更可能（今は青） */
}

/* タイトルや閉じるボタンも黒く揃える */
.offcanvas-title,
.offcanvas .btn-close {
  color: #111 !important;
}

.nav-link {
  color: white;
  letter-spacing: 0.1rem;
  padding: 0.5rem 1rem;
}

.youto-box {
  border-radius: 20px;
  padding: 1.5rem;
  background-color: #fff;
  margin-bottom: 2rem;
  color: #222222;
}
.youto-box h2 {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
  margin-bottom: 3rem;
  color: #192e59;
}
.youto-box h2.red {
  color: #cd221c;
}
.youto-box h2 span {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  padding-top: 0.4rem;
}
.youto-box h2 img {
  margin: auto;
  width: 60px;
  display: block;
  margin-bottom: 1rem;
}

/* ご希望の油種・数量 用レイアウト */
.fuel-amount-list {
  max-width: 260px; /* 左カラムっぽく狭めにしたい場合は調整 */
}

.fuel-amount-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.fuel-label {
  width: 3.5rem; /* 「軽油」「重油」などの幅を揃える */
  font-size: 0.95rem;
}

.fuel-input {
  width: 90px; /* 白いボックスの横幅 */
  border-radius: 12px; /* 角を丸く */
  padding-inline: 0.75rem;
  padding-block: 0.35rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.fuel-unit {
  font-size: 0.95rem;
}

.form-label {
  color: #16336d;
}
.form-label .badge {
  vertical-align: middle;
  position: relative;
  top: -1px; /* 必要に応じて -1～2px 程度 */
}

.form-control {
  padding: 0.75rem;
}

.btn-daiyu {
  background-color: var(--kon);
  color: white;
  padding: 1.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 0px;
  width: min(400px, 80vw);
  letter-spacing: 0.3rem;
}
.btn-daiyu:hover {
  transform: translateY(3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

a .btn-daiyu {
  text-align: center;
  margin: auto;
  line-height: 1.8;
  margin-bottom: 1rem;
}
a .btn-daiyu span {
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
}
a .btn-daiyu img {
  width: 20px;
  margin-right: 0.5rem;
}

::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3) !important; /* 透明度 0.3 ＝薄め */
}

::placeholder {
  color: rgba(0, 0, 0, 0.3) !important; /* 透明度 0.3 ＝薄め */
}/*# sourceMappingURL=daiyu.css.map */