@charset "UTF-8";

/* ==========================================================================
   【100円珈琲専用：1】メイン大枠
   ========================================================================== */
.coffee-page-parent {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background-color: #fcfbf9 !important;
  border-top: 3px solid var(--primary-color) !important;
  border-bottom: 1px solid #e0ded7 !important;
  border-left: 1px solid #e0ded7 !important;
  border-right: 1px solid #e0ded7 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  padding: 40px 20px !important;
}

/* ==========================================================================
   【100円珈琲専用：2】100円珈琲 タイトル枠ベース
   ========================================================================== */
.coffee-title-area {
  width: 100% !important;
  margin-bottom: 50px !important;
  padding: 25px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e0ded7 !important;
  border-top: 3px solid var(--primary-color) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* PC時の基本配置：写真サイズ固定 */
.coffee-hero-image {
  width: 34%;
  max-width: 330px;
  height: 230px;
  overflow: hidden;
}
.coffee-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffee-title-area .hotshop-vertical-tag {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
.coffee-title-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.coffee-title-content > h3 {
  margin: 0 0 20px 0 !important;
  padding: 0 0 12px 0 !important;
  color: var(--primary-color) !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #e0ded7 !important;
}
.coffee-title-content .coffee-hero {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.coffee-title-content .coffee-hero .coffee-section-title {
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  color: var(--primary-color) !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 22px !important;
  border: none !important;
}
.coffee-title-content .coffee-hero-desc {
  margin: 0 0 12px 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.coffee-title-content .coffee-hero-price {
  margin: 0 !important;
  color: var(--accent-color) !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 24px !important;
  font-weight: bold !important;
}
.coffee-title-content .coffee-hero-price span {
  font-size: 13px !important;
  color: var(--text-color) !important;
  font-weight: normal !important;
}

/* ==========================================================================
   【100円珈琲専用：3】各セクション・厳選豆紹介
   ========================================================================== */
.coffee-section {
  width: 100% !important;
  margin-bottom: 50px !important;
}
.coffee-section:last-child {
  margin-bottom: 0 !important;
}
.coffee-section-title {
  font-family: "Noto Serif JP", serif !important;
  color: var(--primary-color) !important;
  border-left: 4px solid var(--accent-color) !important;
  padding-left: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  font-size: 20px !important;
}
.coffee-intro-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
  background: #ffffff !important;
  border: 1px solid #e5e2d9 !important;
  border-radius: 4px !important;
  padding: 25px 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01) !important;
}
.coffee-intro-image {
  width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  border: 1px solid #e0ded7 !important;
  border-radius: 4px !important;
}
.coffee-intro-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}
.coffee-intro-image:hover img {
  transform: scale(1.03) !important;
}
.coffee-intro-text h4 {
  margin: 0 0 12px 0 !important;
  color: var(--primary-color) !important;
  font-size: 18px !important;
  border-bottom: 1px dashed #e0ded7 !important;
  padding-bottom: 8px !important;
}
.coffee-intro-text p {
  margin: 0 0 15px 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.coffee-bean-meta {
  list-style: none !important;
  padding: 12px 15px !important;
  margin: 0 !important;
  font-size: 13px !important;
  background: #fbfaf7 !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
}
.coffee-bean-meta li {
  margin-bottom: 6px !important;
}
.coffee-bean-meta li:last-child {
  margin-bottom: 0 !important;
}
.coffee-bean-meta strong {
  color: var(--primary-color) !important;
}

/* ==========================================================================
   【100円珈琲専用：4】美味しさのこだわり（特徴グリッド）
   ========================================================================== */
.coffee-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
.coffee-grid-card {
  background: #ffffff !important;
  border: 1px solid #e5e2d9 !important;
  border-radius: 4px !important;
  padding: 25px 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01) !important;
}
.coffee-grid-card p {
  margin: 0 !important;
  font-size: 14px !important;
}
.coffee-card-ttl {
  font-family: "Noto Serif JP", serif !important;
  color: var(--primary-color) !important;
  font-size: 17px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* ==========================================================================
   【100円珈琲専用：5】お品書き（メニュータブ切り替え）
   ========================================================================== */
.coffee-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
}
.coffee-tab-input {
  display: none !important;
}
.coffee-tab-label {
  flex: 1 !important;
  padding: 12px !important;
  text-align: center !important;
  background: #e5e2d9 !important;
  color: var(--text-color) !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 14px !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border: 1px solid #e0ded7 !important;
  border-bottom: none !important;
  transition: background 0.3s !important;
}
.coffee-tab-content {
  width: 100% !important;
  order: 1 !important;
  display: none !important;
  background: #ffffff !important;
  border: 1px solid #e0ded7 !important;
  border-radius: 0 0 4px 4px !important;
  padding: 25px 20px !important;
  box-sizing: border-box !important;
}
.coffee-tab-content p {
  margin: 0 !important;
  font-size: 14px !important;
}
.coffee-tab-content .content-lead-hot {
  margin-bottom: 10px !important;
  font-weight: bold !important;
  color: var(--primary-color) !important;
}
.coffee-tab-content .content-lead-ice {
  margin-bottom: 10px !important;
  font-weight: bold !important;
  color: var(--accent-color) !important;
}

#tab-hot:checked + .coffee-tab-label,
#tab-ice:checked + .coffee-tab-label {
  background: #ffffff !important;
  color: var(--primary-color) !important;
  border-top: 3px solid var(--primary-color) !important;
  position: relative !important;
  z-index: 2 !important;
}
#tab-hot:checked ~ #content-hot,
#tab-ice:checked ~ #content-ice {
  display: block !important;
}

/* ==========================================================================
   【100円珈琲専用：6】ご注文からご提供まで・よくあるご質問
   ========================================================================== */
.coffee-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.coffee-step-item {
  background: #ffffff !important;
  border: 1px solid #e5e2d9 !important;
  border-radius: 4px !important;
  padding: 20px !important;
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
}
.coffee-step-number {
  background: var(--primary-color) !important;
  color: #ffffff !important;
  font-family: "Noto Serif JP", serif !important;
  font-weight: bold !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
.coffee-step-body h4 {
  margin: 0 0 5px 0 !important;
  color: var(--primary-color) !important;
  font-size: 16px !important;
}
.coffee-step-body p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.coffee-faq-item {
  margin-bottom: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e5e2d9 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.coffee-faq-details summary {
  padding: 15px 20px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  color: var(--primary-color) !important;
  user-select: none !important;
  list-style: none !important;
  position: relative !important;
}
.coffee-faq-details summary::-webkit-details-marker {
  display: none !important;
}
.coffee-faq-details summary::after {
  content: "＋" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--accent-color) !important;
}
.coffee-faq-details[open] summary::after {
  content: "ー" !important;
}
.coffee-faq-answer {
  padding: 0 20px 15px 20px !important;
  border-top: 1px solid #f2ede2 !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   【100円珈琲専用：7】スマートフォン表示（横幅768px以下）★ここを特定最適化！
   ========================================================================== */
@media screen and (max-width: 768px) {
  .coffee-title-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
  }

  /* オレンジ色の「挽きたて珈琲」タグ：スマホでは中央寄せに配置 */
  .coffee-title-area .hotshop-vertical-tag {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-block !important;
    align-self: center !important; /* スマホ画面：中央に寄せる */
    width: auto !important;
    height: auto !important;
    flex: none !important;
    box-sizing: border-box !important;
    padding: 6px 15px !important;
    margin: 0 0 5px 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }

  .coffee-title-content {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  /* スマホのヒーローセクション全体：中央揃えを基準にする */
  .coffee-title-content .coffee-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 内部要素を中央に集める */
    width: 100% !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important; /* 文字を基本センターに */
  }

  .coffee-hero-text {
    width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 【大見出し（100円珈琲）】センター配置 */
  .coffee-title-content > h3 {
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
  }

  /* 【小見出し（当店名物）】センター配置 */
  .coffee-title-content .coffee-hero .coffee-section-title {
    text-align: center !important;
    margin: 0 auto 15px auto !important;
  }

  /* 【要修正：説明文】ご指示通り、この紹介テキストだけを美しい『左寄せ（left）』に維持 */
  .coffee-title-content .coffee-hero-desc {
    text-align: left !important;
    align-self: stretch !important; /* 横幅いっぱいに広げて文章を読みやすくする */
    margin: 0 0 15px 0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* 【価格表示】センター配置 */
  .coffee-title-content .coffee-hero-price {
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* スマホの写真：中央寄せで大きく綺麗に見せる */
  .coffee-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    flex: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid #e0ded7 !important;
    border-radius: 4px !important;
    margin: 5px auto 0 auto !important;
  }
  .coffee-hero-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ==========================================================================
   【100円珈琲専用：8】PC用レスポンシブ（横幅769px以上）
   ========================================================================== */
@media screen and (min-width: 769px) {
  .coffee-page-parent {
    padding: 60px 40px !important;
  }
  .coffee-title-area {
    padding: 35px 40px !important;
    gap: 25px !important;
    margin-bottom: 50px !important;
  }
  .coffee-title-content > h3 {
    font-size: 28px !important;
    margin-bottom: 22px !important;
    text-align: left !important;
  }
  .coffee-title-content .coffee-hero .coffee-section-title {
    font-size: 24px !important;
    text-align: left !important;
  }
  .coffee-title-content .coffee-hero-desc {
    font-size: 15px !important;
    text-align: left !important;
  }
  .coffee-title-content .coffee-hero-price {
    font-size: 26px !important;
    text-align: left !important;
  }

  /* PC環境：文章が左・写真は右の2カラムに端正に整列 */
  .coffee-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    width: 100% !important;
    margin-bottom: 40px !important;
    padding: 20px 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .coffee-hero-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .coffee-hero-image {
    flex: 0 0 330px !important;
    width: 330px !important;
    height: 230px !important;
    overflow: hidden !important;
    border: 1px solid #e0ded7 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }
  .coffee-hero-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 各下部セクションのPC最適化 */
  .coffee-intro-block {
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 35px 30px !important;
  }
  .coffee-intro-image {
    width: 45% !important;
    height: auto !important;
    min-height: 250px !important;
  }
  .coffee-intro-text {
    width: 55% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .coffee-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
  }
  .coffee-steps {
    flex-direction: row !important;
  }
  .coffee-step-item {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 25px 15px !important;
  }
}