@charset "UTF-8";

/* =====================
   BASE
   ===================== */
.bom-page {
  --bom-gold: #bba46d;
  --bom-plum: #32223d;
  --bom-bg: #f2f2f2;
  --bom-text: #333;
  --bom-muted: #666;
  background: var(--bom-bg);
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 300;
  color: var(--bom-text);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.bom-page img { max-width: 100%; }
.bom-page a { color: inherit; text-decoration: none; }
.bom-page sup {
  font-size: 70%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}
.bom-page .pc { display: block; }
.bom-page .sp { display: none; }

/* =====================
   KV
   ===================== */
.p-kv { width: 100%; line-height: 0; }
.p-kv img { width: 100%; display: block; }

/* =====================
   LEAD
   ===================== */
.p-lead {
  padding: 64px 20px 60px;
  text-align: center;
}
.p-lead__inner {
  max-width: 640px;
  margin: 0 auto;
}
.p-lead__title {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
.p-lead__text {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 28px;
}
/* .p-lead__text p { margin-bottom: 12px; } */
.p-lead__text p:last-child { margin-bottom: 0; }
.p-lead__note {
  font-size: 13px;
  line-height: 1.8;
}

/* =====================
   COMMON: BUTTON
   ===================== */
.p-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  background: #333;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.12em;
  border: none;
  border-radius: 0;
  transition: opacity 0.2s;
}
.p-btn:hover { opacity: 0.75; }
.p-btn--gold {
  background: var(--bom-gold);
}
.p-btn--plum {
  background: var(--bom-plum);
}

/* =====================
   COMMON: RANK BADGE
   ===================== */
.p-rank {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  color: var(--bom-gold);
  line-height: 1;
}
.p-rank__label {
  writing-mode: vertical-rl;
  font-size: 32px;
  letter-spacing: 0.08em;
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", sans-serif;
  font-weight: 200;
}
.p-rank__num {
  font-size: 91px;
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.9;
}
.p-rank--sm {
  gap: 3px;
}
.p-rank--sm .p-rank__num {
  font-size: 50px;
}
.p-rank--sm .p-rank__label {
  font-size: 18px;
  letter-spacing: 0.08em;
}

/* =====================
   COMMON: CATEGORY TITLE
   ===================== */
.p-catTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 20px 36px;
}
.p-catTitle__laurel {
  width: 132px;
  flex-shrink: 0;
}
.p-catTitle__text {
  text-align: left;
}
.p-catTitle__en {
  font-size: 50px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.15;
  margin: 0;
  font-family: "itc-avant-garde-gothic-pro", "noto-sans-cjk-jp", sans-serif;
}
.p-catTitle__ja {
  font-size: 20px;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* =====================
   COMMON: FEATURE ITEM (horizontal, used in BEST SELLER & SEASONAL PICK)
   ===================== */
.p-featureItem {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  max-width: 820px;
  margin: 0 auto 40px;
}
.p-featureItem__img {
  flex: 0 0 55%;
  max-width: 55%;
  line-height: 0;
}
.p-featureItem__img a,
.p-featureItem__img img { display: block; width: 100%; }
.p-featureItem__body {
  flex: 1;
  padding: 32px 40px;
}
.p-featureItem__name {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 6px;
}
.p-featureItem__color {
  font-size: 12px;
  margin-bottom: 12px;
}
.p-featureItem__price {
  font-size: 13px;
  margin-bottom: 20px;
}
.p-featureItem__desc {
  font-size: 12px;
  line-height: 1.9;
  margin-bottom: 24px;
}

/* =====================
   COMMON: SUB ITEMS (3-column grid, used in BEST SELLER & SEASONAL PICK)
   ===================== */
.p-subItems__wrap {
  max-width: 820px;
  margin: 0 auto;
}
.p-subItems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px 32px;
  max-width: 880px;
  margin: 0 auto;
  align-items: stretch;
}
.p-subItem {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-subItem__img { display: block; line-height: 0; }
.p-subItem__img img { width: 100%; display: block; }
.p-subItem__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 0 0;
  text-align: center;
}
.p-subItem__body .p-btn {
  margin-top: auto;
}
.p-subItem__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}
.p-subItem__color {
  font-size: 12px;
  margin-bottom: 2px;
}
.p-subItem__price {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}
.p-subItem__desc {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 16px;
  text-align: left;
}

/* Feature: 横並び（PC） */
.p-subItem--feature {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  height: auto;
}
.p-subItem--feature .p-subItem__img {
  flex: 0 0 50%;
  max-width: 50%;
}
.p-subItem--feature .p-subItem__body {
  flex: 1;
  padding: 24px 38px;
  text-align: left;
}
.p-subItem--feature .p-subItem__body .p-btn {
  margin-top: 0;
}
.p-subItem--feature .p-subItem__name {
  font-size: 18px;
  margin-bottom: 10px;
}
.p-subItem--feature .p-subItem__color {
  font-size: 12px;
  margin-bottom: 24px;
}
.p-subItem--feature .p-subItem__price {
  font-size: 12px;
  margin-bottom: 24px;
}
.p-subItem--feature .p-subItem__desc {
  font-size: 12px;
  line-height: 1.9;
  margin-bottom: 24px;
}

/* =====================
   BEST SELLER SECTION
   ===================== */
.p-bestSeller {
  background: var(--bom-bg);
  padding: 0 40px 60px;
}
.p-bestSeller__laurelWrap {
  text-align: center;
  padding: 56px 0 24px;
}
.p-bestSeller__laurelWrap img { width: 256px; }
.p-bestSeller__heading {
  text-align: center;
  margin-bottom: 36px;
}
.p-bestSeller__title {
  font-size: 50px;
  font-weight: 300;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  font-family: "itc-avant-garde-gothic-pro", "noto-sans-cjk-jp", sans-serif;
}
.p-bestSeller__sub {
  font-size: 20px;
  letter-spacing: 0.06em;
}

/* Progress bar &#8212; SPのみ表示 */
.p-sliderBar {
  display: none;
}

/* =====================
   RANKING SECTION
   ===================== */
.p-ranking { background: var(--bom-bg); padding: 0 40px 60px; }
.p-ranking__header {
  padding: 120px 0 120px;
  text-align: center;
}
.p-ranking__title {
  font-size: 50px;
  font-weight: 300;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  font-family: "itc-avant-garde-gothic-pro", "noto-sans-cjk-jp", sans-serif;
}
.p-ranking__sub {
  font-size: 20px;
}

/* Ranking card (white card per category) */
.p-rankCard {
  background: #fff;
  max-width: 1100px;
  margin: 0 auto 100px;
  overflow: hidden;
}
.p-rankCard:last-child { margin-bottom: 0; }

/* BEST 1 item layout */
.p-rankItem1 {
  display: flex;
  align-items: flex-start;
  padding: 0 0 60px;
  box-sizing: border-box;
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.p-rankItem1__badge {
  flex-shrink: 0;
  width: 56px;
  padding: 8px 0 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.p-rankItem1__img {
  flex: 0 0 50%;
  max-width: 50%;
  line-height: 0;
  box-sizing: border-box;
}
.p-rankItem1__img img {
  width: 100%;
  display: block;
}
.p-rankItem1__body {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  padding: 8px 0 0 36px;
  box-sizing: border-box;
}
.p-rankItem1__catch {
  font-size: 20px;
  color: var(--bom-gold);
  border-bottom: 1px solid var(--bom-gold);
  padding-bottom: 12px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.p-rankItem1__name {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 2px;
}
.p-rankItem1__color {
  font-size: 18px;
  margin-bottom: 2px;
}
.p-rankItem1__price {
  font-size: 16px;
  margin-bottom: 32px;
}
.p-rankItem1__desc {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 40px;
}

/* BEST 2 & 3 two-column */
.p-rankSub {
  display: grid;
  grid-template-columns: 363px 363px;
  justify-content: center;
  border-top: 5px solid #ebebeb;
  gap: 94px;
}
.p-rankSubItem {
  position: relative;
  padding: 44px 0;
  box-sizing: border-box;
}
.p-rankSubItem:last-child { border-right: none; }
.p-rankSubItem__badgeWrap {
  position: absolute;
  top: 36px;
  right: 28px;
  z-index: 2;
  margin: 0;
}
.p-rankSubItem__img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin-bottom: 20px;
  padding: 8px 48px 0 8px;
  line-height: 0;
  box-sizing: border-box;
}
.p-rankSubItem__img img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  display: block;
}
.p-rankSubItem__name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}
.p-rankSubItem__color {
  font-size: 14px;
  margin-bottom: 2px;
}
.p-rankSubItem__price {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}
.p-rankSubItem__desc {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* =====================
   SEASONAL PICK SECTION
   ===================== */
.p-seasonal {
  background: var(--bom-bg);
  padding: 0 40px 60px;
}
.p-seasonal__header {
  padding: 56px 0 36px;
  text-align: center;
}
.p-seasonal__laurelWrap {
  margin-bottom: 16px;
}
.p-seasonal__laurelWrap img { width: 72px; }
.p-seasonal__title {
  font-size: 50px;
  font-weight: 300;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  font-family: "itc-avant-garde-gothic-pro", "noto-sans-cjk-jp", sans-serif;
}
.p-seasonal__sub {
  font-size: 20px;
  letter-spacing: 0.06em;
}

/* =====================
   FOOTNOTES
   ===================== */
.p-footnotes {
  background: var(--bom-bg);
  padding: 40px 40px 120px;
  max-width: 880px;
  margin: 0 auto;
  box-sizing: border-box;
}
.p-footnotes p {
  font-size: 8px;
  color: #888;
  line-height: 1.8;
}

footer.pane-footer {
  margin-top: 0;
}