/* =========================
   オンライン購入ページ 共通
========================= */

body.shop {
  background-color: #fffdf8;
}

.shop-main {
  padding-bottom: 80px;
}

.shop-hero,
.shop-block {
  padding: 56px 0;
}

/* ヒーロー直下の境目をうっすら */
.shop-hero + .shop-block {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* コンテナの最大幅調整（base.css に .l-container がある前提） */
.shop-main .l-container {
  max-width: 1040px;
  margin: 0 auto;
}

/* =========================
   HERO
========================= */

.shop-hero {
  background: #ffffff;
  padding: 2rem 0 3rem;
}

.shop-hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.shop-hero__intro {
  flex: 1 1 55%;
  max-width: 560px;
}

.shop-hero__eyecatch {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  color: #8a6b3f;
}

.shop-hero__title {
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 14px;
  color: #4a3522;
}

.shop-hero__lead {
  font-size: 0.98rem;
  line-height: 1.9;
  color: #4f4a43;
  max-width: 32em;
}

/* ヒーロー画像（右側） */
.shop-hero__image {
  flex: 1 1 45%;
  max-width: 480px;
}

.shop-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* =========================
   セクション共通
========================= */

.shop-block__inner {
  max-width: 960px;
  margin: 0 auto;
}

.shop-block__title {
  font-size: 1.5rem;
  margin-bottom: 14px;
  color: #4a3522;
}

.shop-block__lead {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #59524a;
  margin-bottom: 26px;
}

.shop-block--direct {
  background-color: #fffaf2;
}

.shop-block--marketplace {
  background-color: #ffffff;
}

/* =========================
   ご購入窓口ガイド
========================= */

.shop-guide {
  background: #fff7ec;
  padding: 32px 0 36px;
}

.shop-guide__inner {
  max-width: 960px;
  margin: 0 auto;
}

.shop-guide__title {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #4a3522;
}

.shop-guide__lead {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #5a5248;
  margin-bottom: 18px;
}

.shop-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.shop-guide__item {
  display: block;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 14px 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.shop-guide__item:hover,
.shop-guide__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  border-color: rgba(180,81,31,0.4);
}

.shop-guide__label {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #4a3522;
}

.shop-guide__text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #5e574f;
  margin-bottom: 8px;
}

.shop-guide__link {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #b4511f;
}

/* SP のときは1カラムにして読みやすく */
@media (max-width: 880px) {
  .shop-guide__grid {
    grid-template-columns: 1fr;
  }

  .shop-guide {
    padding: 24px 0 28px;
  }

  .shop-guide__title {
    font-size: 1.2rem;
  }

  .shop-guide__lead {
    font-size: 0.9rem;
    margin-bottom: 14px;
  }
}

/* =========================
   直営ショップカード（共生／公式EC）
   PC：1列で縦に2枚
   カード内：画像左＋説明右
========================= */

/* カードは常に縦に並べる＆中央寄せ */
.shop-direct-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center; /* カードを中央に */
}

/* カード本体 */
.shop-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  padding: 14px 24px 10px;      /* コンパクト＆左右24px */
  transition: box-shadow .2s ease, transform .2s ease;
  width: 100%;
  max-width: 960px;
}

@media (hover: hover) {
  .shop-card:hover {
    box-shadow: 0 8px 26px rgba(0,0,0,.11);
    transform: translateY(-2px);
  }
}

/* タイトル・タグは左寄せでシンプルに */
.shop-card__title {
  font-size: 1.1rem;
  margin: 0 0 4px;
  color: #4a3522;
  text-align: left;
}

.shop-card__tag {
  font-size: .82rem;
  color: #846b4d;
  margin: 0 0 8px;
  text-align: left;
}

/* 画像＋説明を横に並べるコンテナ（中身を横いっぱいに） */
.shop-card__content {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

/* 画像側（少しだけ細くしてテキスト側に幅を回す） */
.shop-card__thumb {
  flex: 0 0 180px;   /* 200→180 にしてテキスト側を広く */
  max-width: 180px;
}

.shop-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: contain;
}

/* 説明側（右） */
.shop-card__body {
  flex: 1 1 auto;
  font-size: .92rem;
  line-height: 1.8;
  color: #5a5148;
}

/* 説明リスト */
.shop-card__list {
  margin: 0;
  padding: 0;
}

.shop-card__list > div {
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
}

/* 行間を少し広め */
.shop-card__list div + div {
  margin-top: 6px;
}

.shop-card__list dt {
  flex: 0 0 8em;
  font-weight: 600;
  color: #6a5236;
  font-size: .9rem;
}

.shop-card__list dd {
  flex: 1 1 auto;
  margin: 0;
}

/* 強調（割引率など） */
.shop-card__em {
  font-weight: 700;
  color: #c25a1b;
}

/* ボタン行 */
.shop-card__actions {
  margin-top: 6px;
  text-align: right;
}

.shop-card__actions .home-btn {
  min-width: 220px;
}

/* 注釈文 */
.shop-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #7a7267;
  line-height: 1.7;
}

/* ===== スマホ時（768px以下）は縦並びに ===== */
@media (max-width: 768px) {

  .shop-card {
    padding: 16px 14px 14px;
  }

  .shop-card__content {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .shop-card__thumb {
    max-width: 230px;
  }

  .shop-card__body {
    width: 100%;
  }

  .shop-card__list > div {
    margin-bottom: 6px;
  }

  .shop-card__list dt {
    flex: 0 0 5.2em;   /* 項目幅を少し細く */
  }

  .shop-card__actions {
    text-align: left;
  }
}

/* =========================
   マーケットプレイス部分
========================= */

.shop-mall-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.shop-mall-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
  .shop-mall-card:hover {
    box-shadow: 0 7px 22px rgba(0,0,0,.1);
    transform: translateY(-2px);
  }
}

.shop-mall-card__title {
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: #4a3522;
}

.shop-mall-card__desc {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #554d46;
  margin-bottom: 10px;
}

.shop-mall-card .home-btn--small {
  font-size: 0.85rem;
  padding: 6px 12px;
}

/* =========================
   読みやすさ向上用の幅制限
========================= */

.shop-block__lead,
.shop-card__body,
.shop-mall-card__desc {
  max-width: 36em;
}

/* =========================
   レスポンシブ調整
========================= */

@media (max-width: 880px) {
  .shop-mall-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  /* 余白を全体的に詰める */
  .shop-main {
    padding-bottom: 56px;
  }

  .shop-hero {
    padding: 20px 0 16px;
  }

  .shop-block {
    padding: 32px 0;
  }

  .shop-hero__inner {
    flex-direction: column;
    gap: 1.2rem;
  }

  .shop-hero__title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .shop-hero__lead {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .shop-hero__image {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .shop-block__title {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  .shop-block__lead {
    font-size: 0.92rem;
    margin-bottom: 20px;
  }
}

/* =========================
   カード全体クリックの見た目
   （JS 側は main.js の実装を使用）
========================= */

.shop-card--link,
.shop-mall-card--link {
  cursor: pointer;
}

.shop-card--link:focus,
.shop-card--link:focus-visible,
.shop-mall-card--link:focus,
.shop-mall-card--link:focus-visible {
  outline: 2px solid #c25a1b;
  outline-offset: 3px;
}