/* トップページの配置。部品の見た目は components 側。 */

/* 地の色が一段変わる帯。罫線ではなく面で区切る */
.p-top__band {
  background: var(--se-surface);
  border-block: var(--se-rule);
}

/* --- ファーストビュー --- */
.p-top__hero {
  padding-block: var(--se-space-7) var(--se-space-8);
}

@media (min-width: 900px) {
  .p-top__hero {
    padding-block: var(--se-space-9);
  }
}

.p-top__hero-grid {
  display: grid;
  gap: var(--se-space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .p-top__hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--se-space-8);
  }
}

.p-top__hero-title {
  font-family: var(--se-font-en);
  font-size: var(--se-text-xs);
  font-weight: 500;
  letter-spacing: var(--se-tracking-wide);
  color: var(--se-ink-sub);
}

.p-top__hero-catch {
  margin-top: var(--se-space-4);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

@media (min-width: 900px) {
  .p-top__hero-catch {
    font-size: 34px;
  }
}

.p-top__hero-body {
  margin-top: var(--se-space-5);
  font-size: var(--se-text-sm);
  color: var(--se-ink-sub);
}

.p-top__hero-body + .p-top__hero-body {
  margin-top: var(--se-space-4);
}

.p-top__hero-body strong {
  color: var(--se-ink);
}

.p-top__hero-actions {
  margin-top: var(--se-space-6);
}

.p-top__hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--se-tile);
}

.p-top__hero-visual figcaption {
  margin-top: var(--se-space-3);
  font-size: var(--se-text-xs);
  letter-spacing: 0.08em;
  color: var(--se-ink-sub);
}

/* --- 共通の項目(タイトル・サブ・本文) --- */
.p-top__item-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.p-top__item-sub {
  margin-top: var(--se-space-1);
  font-size: var(--se-text-sm);
  font-weight: 500;
}

.p-top__item-text {
  margin-top: var(--se-space-2);
  font-size: var(--se-text-sm);
  color: var(--se-ink-sub);
}

/* --- カテゴリー --- */
.p-top__categories {
  display: grid;
  gap: var(--se-space-7) var(--se-space-5);
  margin-top: var(--se-space-7);
}

@media (min-width: 640px) {
  .p-top__categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-top__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-top__category-thumb {
  display: block;
  width: 100%;
  margin-bottom: var(--se-space-4);
  aspect-ratio: 3 / 2;
  background: var(--se-tile);
  overflow: hidden;
}

.p-top__category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top__category .p-top__item-text {
  margin-bottom: var(--se-space-4);
}

.p-top__category .c-link {
  margin-top: auto;
}

/* --- 味わい: 3 列の表。罫線で区切る --- */
.p-top__flavors {
  margin-top: var(--se-space-7);
  border-top: var(--se-rule);
}

.p-top__flavor {
  display: grid;
  gap: var(--se-space-1) var(--se-space-6);
  padding-block: var(--se-space-5);
  border-bottom: var(--se-rule);
}

@media (min-width: 900px) {
  .p-top__flavor {
    grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr);
  }
}

.p-top__flavor-title {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.p-top__flavor-lead {
  font-size: var(--se-text-sm);
  font-weight: 500;
}

.p-top__flavor-desc {
  font-size: var(--se-text-sm);
  color: var(--se-ink-sub);
}

/* --- 迷ったときの選び方 --- */
.p-top__decisions {
  display: grid;
  gap: var(--se-space-6) var(--se-space-5);
  margin-top: var(--se-space-7);
}

@media (min-width: 900px) {
  .p-top__decisions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-top__decision {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--se-space-1);
  padding-top: var(--se-space-4);
  border-top: var(--se-rule-strong);
}

.p-top__decision .p-top__item-text {
  margin-bottom: var(--se-space-3);
}

.p-top__decision .c-link {
  margin-top: auto;
}

.p-top__aside {
  margin-top: var(--se-space-7);
  display: grid;
  gap: var(--se-space-2);
  justify-items: start;
}

.p-top__aside-btn {
  margin-top: var(--se-space-3);
}

/* --- 淹れ方・必要なもの --- */
.p-top__split {
  display: grid;
  gap: var(--se-space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .p-top__split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--se-space-8);
  }
}

.p-top__split--second {
  margin-top: var(--se-space-9);
  padding-top: var(--se-space-8);
  border-top: var(--se-rule-strong);
}

.p-top__block-title {
  margin-top: var(--se-space-2);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.p-top__prose {
  display: grid;
  gap: var(--se-space-4);
  font-size: var(--se-text-sm);
  justify-items: start;
}

.p-top__prose > .c-heading__label {
  color: var(--se-ink-sub);
}

.p-top__prose > .p-top__block-title {
  margin-top: calc(var(--se-space-3) * -1);
  color: var(--se-ink);
  font-size: 22px;
}

.p-top__emphasis {
  font-weight: 700;
  color: var(--se-accent);
}

.p-top__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-3);
  margin-top: var(--se-space-5);
}

.p-top__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--se-tile);
}

.p-top__quotes {
  display: grid;
  gap: var(--se-space-1);
  width: 100%;
}

.p-top__view {
  display: grid;
  gap: var(--se-space-4);
  padding: var(--se-space-6);
  border: 1px solid var(--se-ink);
  font-size: var(--se-text-sm);
}

.p-top__view-title {
  font-size: 15px;
  letter-spacing: 0.14em;
}

.p-top__view strong {
  color: var(--se-success);
}

/* --- About --- */
.p-top__about {
  display: grid;
  gap: var(--se-space-5);
  justify-items: start;
}

.p-top__about > .c-heading__label {
  color: var(--se-ink-sub);
}

.p-top__about > .p-top__block-title {
  margin-top: calc(var(--se-space-3) * -1);
}

/* --- ガイド --- */
.p-top__guides {
  display: grid;
  gap: var(--se-space-6) var(--se-space-5);
  margin-top: var(--se-space-7);
}

@media (min-width: 640px) {
  .p-top__guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .p-top__guides {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.p-top__guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--se-space-4);
  border-top: var(--se-rule-strong);
}

.p-top__guide .p-top__item-text {
  margin-bottom: var(--se-space-3);
}

.p-top__guide .c-link {
  margin-top: auto;
}

.p-top__center {
  display: flex;
  justify-content: center;
  margin-top: var(--se-space-7);
}

/* --- FAQ --- */
.p-top__faq {
  margin-top: var(--se-space-6);
  border-top: var(--se-rule);
}

.p-top__faq-item {
  padding-block: var(--se-space-5);
  border-bottom: var(--se-rule);
}

.p-top__faq-q {
  display: flex;
  gap: var(--se-space-4);
  font-size: var(--se-text);
  font-weight: 500;
}

.p-top__faq-mark {
  font-family: var(--se-font-en);
  font-weight: 600;
  color: var(--se-accent);
}

.p-top__faq-a {
  display: grid;
  gap: var(--se-space-3);
  justify-items: start;
  margin-top: var(--se-space-3);
  padding-left: calc(var(--se-space-4) + 0.8em);
  font-size: var(--se-text-sm);
  color: var(--se-ink-sub);
}

/* --- 最終メッセージ --- */
.p-top__final {
  padding-block: var(--se-space-9);
  text-align: center;
}

.p-top__final .l-container {
  display: grid;
  gap: var(--se-space-5);
  justify-items: center;
}

.p-top__final-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.p-top__final-text {
  font-size: var(--se-text-sm);
  color: var(--se-ink-sub);
}

/* 実商品の写真(白背景の切り抜き)は、商品カードと同じくタイルに収める */
.p-top__category-thumb--product img {
  padding: var(--se-space-3);
  object-fit: contain;
  mix-blend-mode: multiply;
}