/* ================================
   全体・ベース設定
   ================================ */

html {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    /* ★背景画像をなくし、温かみのあるカフェラテのようなグラデーションに変更 */
    background: linear-gradient(135deg, #f7f1ea 0%, #e8ded1 100%);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/* ヘッダー */
.head {
  /* ★ヘッダーも背景画像をなくし、少し深みのあるマイルドな珈琲ブラウンのグラデーションに */
  background: linear-gradient(to right, #4a3b32, #614e43);
  margin: 0;
  height: 180px;
  display: flex;
  align-items: center;
}

.head span {
  font-size: 2.2rem;
  font-weight: bold;
  color: #fffaf0;
  margin-left: 20px;
  font-family: "Times New Roman", "YuMincho", "遊明朝", "ヒラギノ明朝 ProN", serif;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/* タブ */
.tab-4 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.tab-4 > label {
    flex: 1;
    order: -1;
    position: relative;
    min-width: 60px;
    padding: .8em .5em;
    background-color: #dfd5c6; /* 背景に合わせた落ち着いたベージュ */
    color: #6d6053;
    font-size: 1.1rem;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: bold;
}

/* タブの選択状態 */
.tab-4 > label:hover,
.tab-4 label:has(:checked),
.tab-4 input:checked + label {
    background-color: #7c2d2d; /* どぎつさを抑えた、高級感のあるクラシックローズ */
    color: #fff;
}

.tab-4 label:has(:checked)::before,
.tab-4 input:checked + label::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #7c2d2d;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 10;
}

.tab-4 input {
    display: none;
}

.tab-4 > div {
    display: none;
    width: 100%;
    padding: 1.5em 0.5em;
    box-sizing: border-box;
}

/* タブ切り替えの連動 */
.tab-4 label:has(:checked) + div,
.tab-4 input:checked + label + div,
.tab-4 input:checked ~ div {
    display: block;
}

/* 背景 */
.list {
    background: transparent; /* 背景はbodyのグラデーションをそのまま活かします */
    height: auto;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
} 
/* ================================
   ★ ハブページ用：リンクデザインの共通リセット
   ================================ */
.list a {
  text-decoration: none !important; /* すべての下線を一括で消す */
  transition: opacity 0.2s ease;
}
.list a:hover {
  text-decoration: none !important;
  opacity: 0.7; /* ホバー時にふわっと薄くしてクリックできることを伝える */
}

/* ================================
   1. ロースター名（dt）の調整
   ================================ */
.list dt {
  background: #4a3b32; /* 深い珈琲ブラウン */
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  margin: 32px 0 12px 4px;
}
/* 中のリンクを生成り色に固定（青文字化を防ぐ） */
.list dt a {
  color: #fffaf0 !important;
  display: inline-block;
}

/* ================================
   2. 豆カード（dd）と豆名リンクの調整
   ================================ */
.list dd {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 16px 20px;
  /* ブラウザ標準のddの左余白をリセットし、左右のバランスを均等に */
  margin: 12px 16px 24px 16px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden; /* 子要素のfloat（バッジ）による崩れ防止 */
}

/* 豆名リンク：しっかり目立たせる */
.list dd > a {
  color: #4a3b32 !important; /* 豆名はハッキリとした深いブラウン */
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px dashed #4a3b32;
  padding-bottom: 1px;
  display: inline-block;
  margin-right: 4px; /* 産地との間に少しだけ隙間を作る */
}

/* 産地テキスト（aに囲まれていないプレーンな文字列） */
.list dd {
  color: #8c7b70 !important; /* 産地（カッコ内のテキストなど）を少し薄い茶色に */
}

/* ================================
   3. 抽出履歴リンクの調整
   ================================ */
.history-link {
  clear: both; /* これでバッジの下に確実に線が配置されます */
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid #e8ded1;
}

.history-link a {
  color: #7c2d2d !important; /* クラシックローズ（アクセントカラー） */
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
}
.history-link a:hover {
  text-decoration: underline !important; /* 履歴だけは分かりやすく下線を表示 */
}

/* ================================
   4. NEW / DECAFバッジの配置調整
   ================================ */
/* ================================
   ★ NEW / DECAF バッジの装飾
   ================================ */

/* NEWバッジ：アクセントになるクラシックローズ */
.list dd .new {
  background-color: #7c2d2d !important; /* タブと統一した赤茶色 */
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  padding: 3px 8px !important;
  border-radius: 4px !important; /* 角を少し丸く */
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(124, 45, 45, 0.2); /* ほんのり影をつけて立体感 */
  
  /* 位置の調整 */
  /* float: right; */ /* ⬅️削除 */
  /* margin-left: 6px; */
  /* margin-top: 4px; */
  
  /* ⭕ 代わりにこれを追加 */
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

/* DECAFバッジ：落ち着いた珈琲ブラウン */
.list dd .decaf {
  background-color: #4a3b32 !important; /* ロースター名と統一した深い茶色 */
  color: #fffaf0 !important;             /* 生成り色の文字 */
  font-size: 0.75rem !important;
  font-weight: bold !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(74, 59, 50, 0.2);
  
  /* 位置の調整 */
  /* float: right; */ /* ⬅️削除 */
  /* margin-left: 6px; */
  /* margin-top: 4px; */
  
  /* ⭕ 代わりにこれを追加 */
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}


/* ================================
   ★ 【修正版】カフェ風フッターのデザイン
   ================================ */
.cafe-footer {
  background: #362820; /* 濃厚なビターチョコ・ブラウン */
  color: #fffaf0;      /* 優しい生成り色の文字 */
  padding: 40px 20px;  /* 上下に心地よい余白を作る */
  margin-top: 60px;    /* 商品リストとの間にゆったりとした隙間を空ける */
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.15); /* 内側に少し影を入れて奥行きを出す */
  
  /* 🔽 ここが重要：画面いっぱいに広げて中央寄せにする */
  width: 100%;
  box-sizing: border-box;
  clear: both;         /* 前の要素の回り込み影響を完全にリセット */
  display: block;
}

/* フッター内の文字コンテナを一括で中央揃えに指定 */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center; /* 🔽 中のテキストをすべて中央揃えにする */
}

/* フッター内の店名ロゴ */
.footer-logo {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 6px 0;
  letter-spacing: 0.05em;
  text-align: center; /* 念のための二重ガード */
}

/* サブタイトル・説明文 */
.footer-sub {
  font-size: 0.85rem;
  color: #c4b5a9; /* マイルドなベージュブラウン */
  margin: 0 0 24px 0;
  letter-spacing: 0.08em;
  text-align: center;
}

/* コピーライト（著作権表記） */
.copyright {
  font-size: 0.75rem;
  color: #a39285;
  margin: 0;
  letter-spacing: 0.03em;
  text-align: center;
}

/* パソコンなどの大画面向け調整 */
@media screen and (min-width: 768px) {
  .cafe-footer {
    padding: 50px 20px;
  }
  .footer-logo {
    font-size: 1.8rem;
  }
}

/* ================================
   💻 パソコン画面向け（横幅が広い場合）
   ================================ */
@media screen and (min-width: 768px) {
  .head {
    height: 240px;
  }
  .head span {
    font-size: 3.0rem;
  }
  .tab-4 > label {
    font-size: 1.4rem;
  }
  .list dt {
    font-size: 1.5rem;
  }
  .list dd {
    font-size: 1.15rem;
  }
}