/* ==========================================================================
   【共通】1. 変数・全体の基本設定
   ========================================================================== */
:root {
  --primary-color: #325233; /* ほんの少し深みとくすみを増した、落ち着いた千歳緑 */
  --accent-color: #c94a1f;  /* 鮮やかさをわずかに抑え、夕日のような温かみを持たせた柿色 */
  --bg-color: #f2ede2;      /* 【重要】全体の背景を、より昔ながらの「木綿・和紙」に近い濃いめの生成り色に */
  --text-color: #332f2b;    /* 真っ黒ではなく、古い印刷物のような「墨色（セピアがかったダークブラウン）」に */
}
body {
  margin: 0; padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-color); background-color: var(--bg-color);
  line-height: 1.9; overflow-x: hidden;
  /* 全体にうっすらとレトロな空気感を通すため、微細なグラデーションを背景に重ねます（暗くはなりません） */
  background-image: linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 100% 4px;
}

/* 【新設】今まで「真っ白」だったWebサイト内の全ての背景ボックスを、
   画面が暗くならないギリギリの「まろやかな特製ミルク色（#fcfbf9）」に変え、懐かしい温かみを演出します */
.site-header, 
.intro-section, 
.card, 
.coffee-integrated-box, 
.products-list-section, 
.page-content-wrapper {
  background-color: #fcfbf9 !important;
}

h2, h3, h4, .kanji, .japan-tag {
  font-family: "Noto Serif JP", serif;
}

/* ==========================================================================
   【共通】2. ヘッダー・ナビゲーション
   ========================================================================== */
.site-header {
  background: #ffffff;
  border-top: 3px solid var(--accent-color);
  border-bottom: 2px solid #e0ded7;
  position: sticky; top: 0; z-index: 100;
}
.header-container { max-width: 1100px; margin: 0 auto; padding: 12px 20px; }
.header-catch { margin: 0; font-size: 11px; color: #777; text-align: center; }
.header-main { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.logo { margin: 0 0 15px 0; padding: 0; font-size: 22px; letter-spacing: 0.05em; }
.logo a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #555; }
.logo-mark { width: 70px; height: auto; object-fit: contain; }
.logo-text { font-size: 19px; font-weight: bold; white-space: nowrap; }
.logo-text .kanji { color: var(--accent-color); font-size: 23px; margin-left: 3px; }

.global-nav { width: 92%; margin: 0 auto; }
.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; width: 100%; justify-content: center; box-sizing: border-box;
}
.nav-links li { flex: 1; text-align: center; position: relative; }
.nav-links li:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background-color: #e0ded7;
}
.nav-links a {
  text-decoration: none; color: var(--text-color); font-weight: 500;
  font-size: min(3.2vw, 13px); display: block; padding: 6px 2px;
  white-space: nowrap; letter-spacing: -0.03em;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent-color); }

/* ==========================================================================
   【共通】3. メインレイアウト・基本パーツ
   ========================================================================== */
.container { max-width: 1000px; margin: 0 auto; padding: 50px 20px; box-sizing: border-box; }
.japan-tag {
  background: var(--accent-color); color: #fff; writing-mode: vertical-rl; padding: 15px 8px; font-size: 14px; letter-spacing: 0.2em;
}

/* ==========================================================================
   【共通】4. アニメーション・フッター設定
   ========================================================================== */
.js-scroll { opacity: 0; transform: translateY(40px); transition: opacity 1.6s ease-out, transform 1.6s ease-out; }
.js-scroll.scrolled { opacity: 1; transform: translateY(0); }
.fade-in-up { animation: fadeInUp 1.2s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.site-footer { background-color: #333332; color: #e0ded7; padding: 40px 20px 20px 20px; border-top: 4px solid var(--primary-color); text-align: center; }
.footer-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.footer-logo { margin: 0 0 15px 0; font-size: 20px; color: #ffffff; }
.footer-address p { margin: 0 0 8px 0; font-size: 13px; font-style: normal; line-height: 1.6; }
.footer-nav { text-align: center; }
.footer-nav h4 {
  margin: 0 auto 15px auto;
  font-size: 13px;
  color: #ffffff;
  background-color: var(--accent-color); /* 柿色（オレンジ）を適用 */
  display: inline-block;                 /* 文字の幅ぴったりにオレンジ背景を敷く */
  padding: 4px 15px;
  letter-spacing: 0.15em;
  font-weight: normal;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 4px; }
.footer-nav a { color: #c8c6c0; text-decoration: none; font-size: 13px; line-height: 1.4; display: block; padding: 2px 0; transition: color 0.3s; }
.footer-nav a:hover { color: var(--accent-color); }
.footer-copy { text-align: center; border-top: 1px solid #444; margin-top: 30px; padding-top: 20px; font-size: 11px; color: #999; }

/* ==========================================================================
   【共通】5. 上に戻るボタン
   ========================================================================== */
.page-top-btn {
  position: fixed; bottom: 25px; right: 25px; width: 48px; height: 48px;
  background-color: var(--primary-color); border: none; border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 99;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
}
.page-top-btn::after {
  content: ""; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 10px; height: 10px; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff;
}
.page-top-btn.is-show { opacity: 1; visibility: visible; }

/* ==========================================================================
   【共通】6. PC大画面での共通レスポンシブ
   ========================================================================== */
@media screen and (min-width: 769px) {
  .header-main { flex-direction: row; justify-content: space-between; align-items: center; }
  .logo { margin: 0; } .logo-mark { width: 85px; }
  .global-nav { width: auto; margin: 0; } .nav-links { width: auto; gap: 10px; }
  .nav-links li::after { display: none; } .nav-links a { font-size: 14px; padding: 8px 16px; letter-spacing: 0.05em; }
  .nav-links a:hover { border-bottom: 2px solid var(--accent-color); }
  
  .site-footer { text-align: left; }
  .footer-container { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-nav { text-align: left; } .footer-nav ul { display: block; }
  .page-top-btn:hover { transform: translateY(-4px); background-color: var(--accent-color); }
}