/* ============================================
   力貴庵 公式サイト - スタイルシート
   和モダン: 墨黒 × 生成り × 金 × えんじ
   ============================================ */

body {
  width: 100%;
  margin: 0;
  background: #f3ecdd;
  font-family: "Noto Sans JP", sans-serif;
  color: #2c2823;
}

html {
  scroll-behavior: smooth;
}

section[id],
div[id] {
  scroll-margin-top: 84px;
}

a {
  color: #8f2f2f;
  text-decoration: none;
}

a:hover {
  color: #b8935a;
}

::selection {
  background: #b8935a;
  color: #fff;
}

/* --- アニメーション --- */
@keyframes rk-fade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rk-gA {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rk-gB {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rk-gC {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --- 三角グリッドテクスチャ（濃色エリア） --- */
[data-tri] {
  position: relative;
}
[data-tri]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(190, 150, 92, 0.1) 0 1px,
      transparent 1px 52px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(190, 150, 92, 0.1) 0 1px,
      transparent 1px 52px
    ),
    repeating-linear-gradient(
      120deg,
      rgba(190, 150, 92, 0.1) 0 1px,
      transparent 1px 52px
    );
}
[data-tri] > * {
  position: relative;
  z-index: 1;
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px max(46px, calc((100% - 1188px) / 2));
  background: rgba(44, 40, 35, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(184, 147, 90, 0.35);
}

.l-header__logo {
  gap: 8px;
  display: flex;
  align-items: center;
  
  @media (min-width: 650px) {
    gap: 14px;
  }
}
.l-header__cta {
  padding: 11px 10px;
  background: #b8935a;
  color: #2c2823;
  font: 700 10px "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
  
  @media (min-width: 650px) {
    padding: 11px 20px;
    font: 700 12px "Noto Sans JP", sans-serif;
  }
}

a.l-header__cta:hover {
  background: #cba968;
  color: #2c2823;
}

/* --- ヘッダーナビ（現在地連動） --- */
.nav-link {
  padding-bottom: 4px;
  white-space: nowrap;
  color: #d8cfbd;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  font:
    500 13px "Shippori Mincho",
    serif;
}
.nav-link:hover {
  color: #b8935a;
}
.nav-link.active {
  color: #cba968;
  border-bottom-color: #cba968;
}

/* --- 左サイド ページナビ（レール） --- */
.rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  text-decoration: none;
}
.rail-num {
  width: 24px;
  text-align: right;
  font:
    700 11px "Shippori Mincho",
    serif;
  letter-spacing: 0.04em;
  color: #8a8172;
  transition: color 0.3s;
}
.rail-tick {
  height: 2px;
  width: 12px;
  background: #5f584e;
  flex-shrink: 0;
  transition: all 0.3s;
}
.rail-label {
  font:
    600 11.5px "Shippori Mincho",
    serif;
  white-space: nowrap;
  color: #f3ecdd;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.rail-link.active .rail-num {
  color: #cba968;
}
.rail-link.active .rail-tick {
  width: 26px;
  background: #cba968;
}
.rail-link.active .rail-label {
  opacity: 1;
  max-width: 140px;
}

/* --- ヒーロー カルーセル --- */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-slide.active {
  opacity: 1;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(243, 236, 221, 0.55);
  cursor: pointer;
  transition: all 0.3s;
}
.hero-dot.active {
  width: 22px;
  background: #cba968;
}

/* --- 通販 商品画像 --- */
.prod-img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 18px rgba(44, 40, 35, 0.18));
}

/* --- FAQ アコーディオン --- */
.faq-head {
  cursor: pointer;
}
.faq-a {
  display: none;
}
.faq-item.open .faq-a {
  display: flex;
}

/* --- レスポンシブ（SP） --- */
@media (max-width: 880px) {
  section:not(#top),
  footer,
  [data-band] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  section > div[style*="grid-template-columns"],
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [data-hero] {
    padding: 104px 24px 44px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  [data-hero] h1 {
    font-size: 38px !important;
  }
  [data-badge] {
    width: 88px !important;
    top: -8px !important;
  }
  [data-shop] {
    grid-template-columns: 1fr 1fr !important;
  }
  header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  header nav > div:first-child {
    display: none !important;
  }
}
@media (max-width: 1160px) {
  [data-rail] {
    display: none !important;
  }
}

/* マップ */
.map {
  position: relative;
  width: 100%;aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(
      45deg,
      #ddd3bf 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(
      -45deg,
      #ddd3bf 0 1px,
      transparent 1px 24px
    ),
    #e7ddc9;
  border: 1px solid #d3c8b2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 通販固定ボタン */
.c-button__sideFixedToShop {
  box-sizing: content-box;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 9999;
  /* padding: 12px 20px; */
  width: 48px;
  height: 48px;
  background-color: #b8935a;
  color: #2c2823;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-button__sideFixedToShop:after {
  content: "";
  background-image: url('../uploads/svg/cart.svg');
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.c-button__sideFixedToShop:hover {
  background-color: #cba968;
  color: #2c2823;
}
@media (min-width: 850px) {
  .c-button__sideFixedToShop {
    /* content: "商品の購入はコチラ"; */
    top: 250px;
    right: 0;
    width: 24px;
    height: 150px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    /* text-orientation: upright; */
    border-radius: 4px 0 0 4px;
  }
  .c-button__sideFixedToShop:after {
    content: "商品の購入はコチラ";
    background-image: none;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
  }
}

/* HEROボタン */
.c-hero-button__wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.c-hero-button {
  font: 700 14px "Noto Sans JP", sans-serif;
  letter-spacing: 0.06em;
  padding: 16px 28px;
  text-align: center;
}
.c-hero-button__left {
  background: #b8935a;
  color: #2c2823;
}
.c-hero-button__left:hover {
  background: #cba968;
  color: #2c2823;
}
.c-hero-button__right {
  border: 1.5px solid #f3ecdd;
  color: #f3ecdd;
}
/* .c-hero-button__right:hover {
  background: #cba968;
  color: #2c2823;
} */

@media (min-width: 550px) and (max-width: 880px) {
  .c-hero-button__wrap {
    flex-direction: row;
  }
}

@media (min-width: 880px) and (max-width: 1110px) {
  .c-hero-button__wrap {
    flex-direction: column;
    gap: 12px;
  }
}

@media (min-width: 1111px) {
  .c-hero-button__wrap {
    flex-direction: row;
  }
}


/* 団体・バス相談 CTAバンド */
.p-contact-cta {
  position: relative;
  /* padding: 40px max(56px, calc((100% - 1168px) / 2)); */
  padding: 40px 0 0 0;
  background: #231f1b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
}
.p-contact-cta-illust {
  width: 280px;
  margin: 0 0 -12px 0;
}
@media (min-width: 880px) {
  .p-contact-cta {
      flex-direction: row;
  }
}