/* ============================================
   guide.css — 40〜50代の方が迷わず操作できるための見た目
   ・上のメニューは「押せるボタン」に見せる
   ・予約とLINEは、スクロールしなくても見つかる場所に置く
   ============================================ */

/* --- 上のメニュー：ボタンの形にして、押せると分かるように --- */
.site-nav__list {
  gap: 0.375rem;
}

/* 文字数に合わせて幅を配分する（等幅にすると「サロンについて」がはみ出して横にずれる） */
.site-nav__list > li {
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav__link {
  display: block;
  padding: 0.6em 0.45em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: var(--color-surface);
  box-shadow: 0 1px 2px rgba(59, 51, 44, 0.06);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform 0.15s ease;
}

@media (min-width: 25rem) {
  .site-nav__link {
    font-size: 0.8125rem;
  }
}

/* 下線の飾りは、ボタンの形にしたので使わない */
.site-nav__link::after {
  display: none;
}

.site-nav__link:hover {
  opacity: 1;
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}

/* いま見ているページは、塗りつぶして分かりやすく */
.site-nav__link[aria-current="page"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: #fff;
}

/* 押した瞬間に少し沈む（押せたことが指で分かる） */
.site-nav__link:active {
  transform: scale(0.95);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

@media (min-width: 48rem) {
  .site-nav__list > li {
    flex: none;
  }

  .site-nav__link {
    padding: 0.5em 1.1em;
    font-size: 0.875rem;
  }
}

/* 初めて開いたときだけ、メニューのボタンが順番にふわっと出る（押せる場所だと気づいてもらう） */
.js-motion .site-nav.is-intro .site-nav__link {
  animation: guide-pop 1s var(--ease-soft, ease) both;
  animation-delay: calc(0.6s + var(--i, 0) * 0.1s);
}

/* はねる動きはチープに見えるので、ぼかしから静かに浮かぶ */
@keyframes guide-pop {
  0% { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* --- ヘッダーのLINEボタン（パソコンだけ。スマホは画面下のボタンで出す） --- */
.site-header__line {
  display: none;
}

@media (min-width: 48rem) {
  .site-header__line {
    display: inline-block;
    order: 4;
    padding-inline: var(--space-md);
    border-color: #06c755;
    color: #06a346;
  }

  .site-header__line:hover {
    background-color: #06c755;
    border-color: #06c755;
    color: #fff;
  }
}

/* --- トップの「ご予約・ご相談はこちら」 --- */
.contact-quick {
  padding-block: var(--space-lg);
  background-color: var(--color-surface);
  border-block-end: 1px solid var(--color-line);
}

.contact-quick__title {
  margin-block-end: var(--space-sm);
  font-size: 1.125rem;
  text-align: center;
  letter-spacing: 0.08em;
}

.contact-quick__grid {
  display: grid;
  gap: var(--space-xs);
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .contact-quick__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-quick__card {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 1rem 2.6rem 1rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-bg);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, border-color var(--transition), box-shadow var(--transition);
}

.contact-quick__card:hover {
  opacity: 1;
  border-color: var(--color-accent);
}

.contact-quick__card:active {
  transform: scale(0.98);
}

.contact-quick__who {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
}

.contact-quick__main {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink);
}

.contact-quick__sub {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

/* 右端の矢印：ここを押すと進むと分かるように */
.contact-quick__card::after {
  content: "›";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.3s ease;
}

.contact-quick__card:hover::after {
  transform: translate(3px, -50%);
}

.contact-quick__card--reserve {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.contact-quick__card--reserve .contact-quick__who,
.contact-quick__card--reserve .contact-quick__main,
.contact-quick__card--reserve .contact-quick__sub,
.contact-quick__card--reserve::after {
  color: #fff;
}

.contact-quick__card--line {
  border-color: #06c755;
}

.contact-quick__card--line .contact-quick__main {
  color: #06a346;
}

.contact-quick__card--line::after {
  color: #06c755;
}

.contact-quick__note {
  margin-block-start: var(--space-xs);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  text-align: center;
  max-width: none;
}

/* --- スマホの画面下：予約とLINEのボタンを大きく、ずっと表示 --- */
@media (max-width: 767px) {
  .mobile-cta a {
    display: grid;
    gap: 0.05rem;
    padding: 0.55em 0.4em;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .mobile-cta a small {
    font-size: 0.6875rem;
    font-weight: 400;
    opacity: 0.85;
  }

  .mobile-cta__line {
    border-color: #06c755 !important;
    color: #06a346 !important;
  }

  .has-mobile-cta .site-footer {
    padding-block-end: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .site-nav.is-intro .site-nav__link {
    animation: none;
  }
}

/* タブレット幅では、ロゴ・予約・LINEを1段目、メニューを2段目に（1行に詰めると予約ボタンが下に落ちる） */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .site-header .site-nav {
    order: 5;
    width: 100%;
  }

  .site-header .site-nav .site-nav__list {
    justify-content: flex-start;
  }

  .site-header__cta {
    order: 2;
  }

  .site-header__line {
    order: 3;
  }
}


/* 幅が狭いスマホ（360px前後）でも4つのボタンが1行に収まるように、文字と余白を少し詰める */
@media (max-width: 23.75rem) {
  .site-nav__list {
    gap: 0.25rem;
  }

  .site-nav__link {
    padding: 0.6em 0.3em;
    font-size: 0.6875rem;
  }
}

/* 320px前後のとても小さい画面 */
@media (max-width: 21rem) {
  .site-nav__link {
    padding: 0.55em 0.2em;
    font-size: 0.625rem;
  }
}