@charset "UTF-8";

/* =========================================================
 * 261002_10horoscope — 星座別ページ（Aries.html 〜 Pisces.html）
 * style.css を読み込んだうえで追加で読み込む
 * SP: calc(● * (100vw / 375))  /  PC: rem (1rem = 10px)
 * ======================================================= */

.p-feature {
  /* 星座別ラッキーカラー */
  --color-01: #b89bd2; /* 牡羊座 パープル */
  --color-02: #fbea93; /* 牡牛座 イエロー */
  --color-03: linear-gradient(180deg, #f0f0f0 0%, #b9b5b5 100%); /* 双子座 シルバー */
  --color-04: linear-gradient(180deg, #f5d442 0%, #cba605 100%); /* 蟹座 ゴールド */
  --color-05: #2c3c69; /* 獅子座 ネイビー */
  --color-06: #ffffff; /* 乙女座 ホワイト */
  --color-07: #53a9d9; /* 天秤座 ブルー */
  --color-08: #fce3db; /* 蠍座 ピンク */
  --color-09: #000000; /* 射手座 ブラック */
  --color-10: #8c8823; /* 山羊座 グリーン */
  --color-11: #cb6946; /* 水瓶座 オレンジ */
  --color-12: #c10522; /* 魚座 レッド */
  --color-chip-border: #d5d5d5;
}

.contents-body--detail {
  padding-top: 6rem;
}

/* ---------------------------------------------------------
 * 今月の運勢
 * ------------------------------------------------------- */
.fortune-section__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6rem;
  padding: 8rem 0;
}

.fortune-section__sign {
  flex-shrink: 0;
  width: 20rem;
}

.fortune-section__sign-txt {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  line-height: 1.8;
  letter-spacing: 0.01em;
  text-align: center;
}

.fortune-section__detail {
  width: 55rem;
  max-width: 100%;
}

.fortune-section__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.fortune-section__body {
  margin-top: 2rem;
  font-size: 1.4rem;
  line-height: 2.4;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
 * ラッキーカラー
 * ------------------------------------------------------- */
.lucky-color {
  border-bottom: solid 2px var(--color-text);
}

.lucky-color__inner {
  width: 81rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 8rem 0;
}

.zodiac-color {
  text-align: center;
}

.zodiac-color__chip {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  vertical-align: top;
}

.zodiac-color__chip--bordered {
  border: solid 1px var(--color-chip-border);
}

.zodiac-color__name {
  margin-top: 3rem;
  font-size: 1.6rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.zodiac-color__chip--01 { background: var(--color-01); }
.zodiac-color__chip--02 { background: var(--color-02); }
.zodiac-color__chip--03 { background: var(--color-03); }
.zodiac-color__chip--04 { background: var(--color-04); }
.zodiac-color__chip--05 { background: var(--color-05); }
.zodiac-color__chip--06 { background: var(--color-06); }
.zodiac-color__chip--07 { background: var(--color-07); }
.zodiac-color__chip--08 { background: var(--color-08); }
.zodiac-color__chip--09 { background: var(--color-09); }
.zodiac-color__chip--10 { background: var(--color-10); }
.zodiac-color__chip--11 { background: var(--color-11); }
.zodiac-color__chip--12 { background: var(--color-12); }

/* ---------------------------------------------------------
 * おすすめアイテム
 * ------------------------------------------------------- */
.recommend {
  margin-top: 6rem;
}

.recommend__title {
  font-size: 1.8rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}

.recommend__list {
  display: grid;
  /* 狭いPC幅でも画面端に付かないよう、カラムは 18rem を上限に縮む */
  grid-template-columns: repeat(4, minmax(0, 18rem));
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.product-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.product-card__image {
  height: 24rem;
  margin-bottom: 1rem;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__brand,
.product-card__name,
.product-card__price {
  font-size: 1.3rem;
  line-height: 1.75;
  letter-spacing: 0.08em;
  /* 商品名に長い英数字が来てもカードからはみ出さないようにする */
  overflow-wrap: anywhere;
}

.product-card__detail {
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------
 * 「〈色〉のアイテムを見る」ボタン
 * ------------------------------------------------------- */
.lucky-color__button-area {
  margin-top: 4rem;
}

.lucky-color__button {
  display: grid;
  place-content: center;
  width: 34.5rem;
  height: 5rem;
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
}

.lucky-color__button--txt-black { color: #000; }
.lucky-color__button--txt-white { color: var(--color-white); }
.lucky-color__button--bordered { border: solid 1px var(--color-chip-border); }

.lucky-color__button--01 { background: var(--color-01); }
.lucky-color__button--02 { background: var(--color-02); }
.lucky-color__button--03 { background: var(--color-03); }
.lucky-color__button--04 { background: var(--color-04); }
.lucky-color__button--05 { background: var(--color-05); }
.lucky-color__button--06 { background: var(--color-06); }
.lucky-color__button--07 { background: var(--color-07); }
.lucky-color__button--08 { background: var(--color-08); }
.lucky-color__button--09 { background: var(--color-09); }
.lucky-color__button--10 { background: var(--color-10); }
.lucky-color__button--11 { background: var(--color-11); }
.lucky-color__button--12 { background: var(--color-12); }

/* ---------------------------------------------------------
 * ページ下部のボタン（星座ページはトップページより 1 段小さい）
 * ------------------------------------------------------- */
.contents-body--detail .contents-footer__button {
  font-size: 1.5rem;
}

/* =========================================================
 * SP (〜767px)
 * ======================================================= */
@media only screen and (max-width: 767px) {
  .contents-body--detail {
    padding-top: calc(40 * (100vw / 375));
  }

  .fortune-section__inner {
    flex-direction: column;
    align-items: center;
    gap: calc(30 * (100vw / 375));
    width: calc(325 * (100vw / 375));
    margin: 0 auto;
    padding: calc(50 * (100vw / 375)) 0;
  }

  .fortune-section__sign {
    width: calc(180 * (100vw / 375));
  }

  .fortune-section__sign-txt {
    margin-top: calc(10 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
  }

  .fortune-section__detail {
    width: 100%;
    padding-top: 0;
  }

  .fortune-section__headline {
    font-size: calc(24 * (100vw / 375));
  }

  .fortune-section__body {
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .lucky-color__inner {
    width: calc(345 * (100vw / 375));
    padding: calc(50 * (100vw / 375)) 0 calc(80 * (100vw / 375));
  }

  .zodiac-color__chip {
    width: calc(70 * (100vw / 375));
    height: calc(70 * (100vw / 375));
  }

  .zodiac-color__name {
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .recommend {
    margin-top: calc(60 * (100vw / 375));
  }

  .recommend__title {
    font-size: calc(16 * (100vw / 375));
  }

  .recommend__list {
    grid-template-columns: repeat(2, calc(165 * (100vw / 375)));
    column-gap: calc(15 * (100vw / 375));
    row-gap: calc(20 * (100vw / 375));
    margin-top: calc(20 * (100vw / 375));
  }

  .product-card__image {
    height: calc(220 * (100vw / 375));
    margin-bottom: calc(10 * (100vw / 375));
  }

  .product-card__brand,
  .product-card__name,
  .product-card__price {
    font-size: calc(13 * (100vw / 375));
  }

  .product-card__detail {
    margin-top: calc(5 * (100vw / 375));
  }

  .lucky-color__button-area {
    margin-top: calc(40 * (100vw / 375));
  }

  .lucky-color__button {
    width: calc(300 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .contents-body--detail .contents-footer__button-area {
    gap: calc(10 * (100vw / 375));
    width: calc(300 * (100vw / 375));
    padding: calc(50 * (100vw / 375)) 0 calc(80 * (100vw / 375));
  }

  .contents-body--detail .contents-footer__button {
    font-size: calc(14 * (100vw / 375));
  }
}

/* =========================================================
 * PC (768px〜)
 * style.css で .contents-body に左右 2rem の余白を付けているため、
 * 画面幅いっぱいに引く下罫線はその分だけ外側へ広げる
 * ======================================================= */
@media only screen and (min-width: 768px) {
  .lucky-color {
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lucky-color__button {
    max-width: 100%;
  }
}