@charset "UTF-8";
/* ============================================================
   マルフミコーヒー / 独自スタイル
   Tailwind CDN で表現しきれない部分だけをここに記述しています。
   （配色・フォントの定義は index.html 内の tailwind.config を参照）
   ============================================================ */

/* ------------------------------------------------------------
   1. ベース設定
   ------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  /* 固定ヘッダーの高さぶん、アンカー移動位置をずらす */
  scroll-padding-top: 5rem;
}

body {
  /* 和文の可読性を上げる */
  line-height: 1.9;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

/* モバイルメニューを開いている間は背面スクロールを止める */
body.is-menu-open {
  overflow: hidden;
}

/* 画像の下に隙間ができるのを防ぐ */
img {
  display: block;
}

/* ------------------------------------------------------------
   2. ヘッダー
   ------------------------------------------------------------ */
/* 初期状態は透明。スクロールすると main.js が .is-scrolled を付与する */
#header {
  background-color: transparent;
}

#header.is-scrolled {
  background-color: rgba(251, 247, 241, 0.92); /* cream の半透明 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(107, 79, 58, 0.08);
}

/* PCナビ：ホバーで下線がのびる */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #A9855F; /* mocha */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ------------------------------------------------------------
   3. ハンバーガーボタン（3本線 → ×）
   ------------------------------------------------------------ */
.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: #6B4F3A; /* coffee */
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#menu-toggle.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#menu-toggle.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

#menu-toggle.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------
   4. モバイルメニューのリンク
   ------------------------------------------------------------ */
.mobile-link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid rgba(223, 203, 178, 0.4); /* latte */
  color: #6B4F3A;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-link span {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(62, 51, 43, 0.55);
}

.mobile-link:hover,
.mobile-link:focus-visible {
  color: #A9855F;
  padding-left: 0.6rem;
}

/* ------------------------------------------------------------
   5. 肉球の背景パターン（犬モチーフ）
   ------------------------------------------------------------ */
.paw-pattern {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23A9855F' fill-opacity='0.06'%3E%3Cellipse cx='24' cy='38' rx='4' ry='5'/%3E%3Cellipse cx='33' cy='32' rx='4' ry='5.4'/%3E%3Cellipse cx='43' cy='34' rx='4' ry='5.2'/%3E%3Cellipse cx='51' cy='41' rx='3.6' ry='4.6'/%3E%3Cpath d='M36 45c5.6 0 10.8 4.2 10.8 9 0 4-3.3 6.3-7.5 6.3-1.9 0-2.7-.6-4.6-.6s-2.7.6-4.6.6c-4.2 0-7.5-2.3-7.5-6.3 0-4.8 5.2-9 10.8-9z'/%3E%3Cg transform='translate(62 62) rotate(24 24 24)'%3E%3Cellipse cx='24' cy='38' rx='4' ry='5'/%3E%3Cellipse cx='33' cy='32' rx='4' ry='5.4'/%3E%3Cellipse cx='43' cy='34' rx='4' ry='5.2'/%3E%3Cellipse cx='51' cy='41' rx='3.6' ry='4.6'/%3E%3Cpath d='M36 45c5.6 0 10.8 4.2 10.8 9 0 4-3.3 6.3-7.5 6.3-1.9 0-2.7-.6-4.6-.6s-2.7.6-4.6.6c-4.2 0-7.5-2.3-7.5-6.3 0-4.8 5.2-9 10.8-9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ------------------------------------------------------------
   6. スクロール表示アニメーション
   （main.js の IntersectionObserver が .is-visible を付与）

   ※ .js が付いているときだけ要素を隠します。
     JavaScript が無効／読み込み失敗の場合は html に .js が付かないため、
     コンテンツが透明のまま消えてしまう事故を防げます。
   ------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   7. Hero のスクロールインジケーター
   ------------------------------------------------------------ */
.scroll-line {
  animation: scroll-hint 1.8s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0.2); opacity: 0.2; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.2; }
}

/* ------------------------------------------------------------
   8. Googleマップ埋め込みプレースホルダー
   iframe に差し替えたあとも枠のサイズが崩れないようにしておく
   ------------------------------------------------------------ */
.map-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 12px,
    rgba(169, 133, 95, 0.06) 12px,
    rgba(169, 133, 95, 0.06) 24px
  );
}

#access iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------
   9. アクセシビリティ
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid #A9855F;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 動きを減らす設定の端末ではアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-line {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}