/* =====================================================================
   Matalog site v2 — 課題認識ファースト構成の追加スタイル
   （既存 assets/css/style.css の後に読み込む。既存定義は上書きしない方針）
   ===================================================================== */

/* ---------- Hero 調整 ---------- */
.hero { min-height: auto; padding-bottom: 96px; }

/* ---------- 見覚えの風景（シーン集） ---------- */
.scene-section { background: var(--white); }
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.scene-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 26px 24px;
}
.scene-card::before {
  content: "“";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: "Noto Serif JP", serif;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(185, 147, 87, 0.35);
}
.scene-role {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(75, 35, 56, 0.08);
  color: var(--wine-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.scene-card p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  color: #3a2c31;
  font-size: 0.98rem;
  line-height: 1.95;
}
.scene-pivot { margin-top: 60px; }
.scene-pivot p { color: #4c4244; font-size: clamp(1rem, 1.8vw, 1.12rem); }
.scene-pivot strong { color: var(--wine-deep); }

/* ---------- 役割別入口セクション ---------- */
.path-section { background: #fffaf2; }
.path-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 52px;
}
.path-card {
  display: block;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 18px 45px rgba(43, 20, 34, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}
.path-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold), var(--wine-soft));
  opacity: 0.85;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(43, 20, 34, 0.14);
  border-color: rgba(185, 147, 87, 0.5);
}
.path-kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.path-card h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 12px;
}
.path-card p:not(.path-kicker) { color: #4c4244; margin: 0 0 18px; }
.path-arrow { color: var(--wine); font-weight: 800; font-size: 0.95rem; }
.path-card:hover .path-arrow { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 役割別大ブロック ---------- */
.importer-block { background: linear-gradient(160deg, #fbf7ef 0%, #f1e4d2 100%); }
.retailer-block { background: var(--white); }

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  margin-top: 88px;
}
.feature-row.reverse > .feature-copy { order: 2; }
.feature-row.reverse > .feature-visual { order: 1; }
.feature-num {
  margin: 0 0 14px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
}
.feature-num::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.feature-copy h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.55;
  margin-bottom: 18px;
}
.feature-copy p { color: #4c4244; }
.feature-copy .feature-sting {
  font-family: "Noto Serif JP", serif;
  color: var(--wine-deep);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  font-size: 1.02rem;
}
.feature-copy .tasting-note { color: var(--muted); font-size: 0.92rem; }

/* 提供状況バッジ（金） */
.badge-live {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- ミニモック（共通） ---------- */
.mini-browser {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--white);
}
.mini-browser .browser-bar { padding: 10px 14px; }
.mini-body { padding: 20px 22px 22px; }

.mini-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.mm-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  font-weight: 800;
  color: var(--wine-deep);
}
.mm-foot {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.mm-foot.btnish {
  color: var(--white);
  background: var(--wine);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 800;
  font-size: 0.85rem;
}

/* 個社ページモック */
.mm-brandbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mm-logo {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--white);
  font-family: "Noto Serif JP", serif;
  font-size: 1.1rem;
  flex: none;
}
.mm-brandbar strong { display: block; color: var(--wine-deep); line-height: 1.4; }
.mm-brandbar small { color: var(--muted); font-size: 0.78rem; }
.mm-event {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--wine-deep);
  font-weight: 700;
  margin-bottom: 14px;
}
.mm-line {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(75,35,56,0.12), rgba(75,35,56,0.05));
  margin-bottom: 10px;
}
.mm-line.w85 { width: 85%; }
.mm-line.w75 { width: 75%; }
.mm-line.w65 { width: 65%; }
.mm-themes { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.mm-themes span {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c, var(--wine));
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.mm-themes em { font-style: normal; color: var(--muted); font-size: 0.78rem; margin-left: 4px; }

/* 試飲会リストモック */
.mm-qr { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1.5px solid var(--wine-deep); border-radius: 4px; }
.mm-qr i { width: 7px; height: 7px; background: var(--wine-deep); }
.mm-qr i:nth-child(3) { background: transparent; border: 1.5px solid var(--wine-deep); }
.mm-taste-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(75,35,56,0.08);
}
.mm-taste-row:last-of-type { border-bottom: 0; }
.mm-heart { color: rgba(75,35,56,0.35); font-size: 1.05rem; flex: none; }
.mm-heart.on { color: var(--wine-soft); }
.mm-taste-row strong { display: block; font-family: "Noto Serif JP", serif; color: var(--wine-deep); font-size: 0.92rem; line-height: 1.5; }
.mm-taste-row small { color: var(--muted); font-size: 0.76rem; }

/* 公開カレンダーモック */
.mm-cal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.mm-cal-row.hl { background: var(--cream); box-shadow: inset 0 0 0 1px rgba(185,147,87,0.45); }
.mm-date {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--wine);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
}
.mm-date small { font-size: 0.66rem; font-weight: 500; opacity: 0.85; }
.mm-cal-row strong { display: block; color: var(--wine-deep); font-size: 0.92rem; line-height: 1.5; }
.mm-cal-row small { color: var(--muted); font-size: 0.76rem; }

/* 注文一覧モック */
.mm-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(75,35,56,0.08);
}
.mm-order-row strong { display: block; color: var(--wine-deep); font-size: 0.92rem; line-height: 1.5; }
.mm-order-row small { color: var(--muted); font-size: 0.78rem; }
.mm-chip {
  flex: none;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(111,99,101,0.12);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.mm-chip.ok { background: rgba(47,107,61,0.12); color: #2f6b3d; }

/* ダッシュボードモック */
.mm-bar { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin-bottom: 12px; }
.mm-bar span { color: var(--muted); font-size: 0.8rem; }
.mm-bar i {
  display: block;
  height: 14px;
  width: var(--w, 50%);
  border-radius: 7px;
  background: linear-gradient(90deg, var(--wine-soft), var(--wine));
}
.mm-bar:nth-child(odd) i { background: linear-gradient(90deg, var(--gold), #a07c42); }

/* ---------- 営業担当の一日 ---------- */
.day-strip-wrap { margin-top: 88px; }
.day-strip-title {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  color: var(--wine-deep);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 0 0 28px;
}
.day-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.day-strip > div {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 24px 22px;
  box-shadow: 0 14px 36px rgba(43,20,34,0.06);
}
.day-strip span {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--white);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  margin-bottom: 12px;
}
.day-strip p { margin: 0; color: #4c4244; font-size: 0.94rem; }

/* ---------- ブロック末尾CTA ---------- */
.block-cta { margin-top: 80px; }
.block-cta p { color: #4c4244; }
.block-cta .button { margin-top: 10px; }

/* ---------- 小売店: 3カード＋比較図 ---------- */
.retailer-grid { margin-top: 56px; }
.retailer-grid h3 { margin-bottom: 14px; }

.flow-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 44px;
}
.flow {
  border-radius: var(--radius-md);
  padding: 30px 30px 26px;
  border: 1px solid var(--line);
}
.flow.before { background: var(--paper); }
.flow.after {
  background: linear-gradient(160deg, rgba(75,35,56,0.97), rgba(43,20,34,0.98));
  color: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.flow-label {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.flow.after .flow-label { color: var(--gold); }
.flow-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.flow-steps span {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--wine-deep);
  white-space: nowrap;
}
.flow.after .flow-steps span {
  background: rgba(255,253,248,0.12);
  border-color: rgba(255,253,248,0.28);
  color: var(--white);
}
.flow-steps i { font-style: normal; color: var(--gold); font-weight: 800; }
.flow small { display: block; font-size: 0.85rem; color: var(--muted); }
.flow.after small { color: rgba(255,253,248,0.8); }

/* ---------- コンセプト要約 ---------- */
.concept-link { margin-top: 48px; }

/* ---------- concept.html 用 ---------- */
.concept-page .hero-mini {
  padding: 170px 0 84px;
  background:
    radial-gradient(circle at 85% 20%, rgba(185,147,87,0.18), transparent 34%),
    linear-gradient(135deg, #fffaf2 0%, #f3e6d7 100%);
}
.concept-page .hero-mini h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.concept-back { margin-top: 56px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .scene-grid { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .path-cards { grid-template-columns: 1fr; margin-top: 44px; }
  .feature-row { grid-template-columns: 1fr; gap: 30px; margin-top: 68px; }
  .feature-row.reverse > .feature-copy { order: 1; }
  .feature-row.reverse > .feature-visual { order: 2; }
  .day-strip { grid-template-columns: 1fr; }
  .flow-compare { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .scene-grid { grid-template-columns: 1fr; }
  .scene-pivot { margin-top: 44px; }
  .path-card h3 { font-size: 1.25rem; }
  .path-section .center h2 br { display: none; }
  .feature-copy h3 br { display: none; }
  .importer-block .center h2 br,
  .retailer-block .center h2 br { display: none; }
  .mm-bar { grid-template-columns: 92px 1fr; }
  .day-strip-wrap { margin-top: 64px; }
  .block-cta { margin-top: 56px; }
}