@charset "UTF-8";

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

/* LPコンテンツ（カスタムプロパティは .p-feature に適用）
   --color-NN01 は星座NNの8月ラッキーカラー（NN=01牡羊〜12魚） */
.p-feature {
  --color-black: #000;
  --color-white: #FFF;
  --color-gray: #515151;
  --color-brown: #211717;
  --color-darkbrown: #2C0707;
  --color-lightpink: #FFCDCA;
  --color-pink: #FFB2AE;
  --color-0101: #ff99b0; /* 牡羊座 ピンク */
  --color-0201: #d8b596; /* 牡牛座 ベージュ */
  --color-0301: #fef4ca; /* 双子座 イエロー */
  --color-0401: #ffffff; /* 蟹座 ホワイト */
  --color-0501: linear-gradient(180deg, #f5e6b8 0%, #eab913 100%); /* 獅子座 ゴールド（金属色をグラデで近似） */
  --color-0601: #533e30; /* 乙女座 ブラウン */
  --color-0701: #be2939; /* 天秤座 レッド */
  --color-0801: #049483; /* 蠍座 グリーン */
  --color-0901: #000000; /* 射手座 ブラック */
  --color-1001: linear-gradient(180deg, #f5f5f5 0%, #cfcfcf 100%); /* 山羊座 シルバー（金属色をグラデで近似） */
  --color-1101: #fa9e81; /* 水瓶座 オレンジ */
  --color-1201: #375188; /* 魚座 ブルー */
  --fw-medium: 500;
  --fw-semibold: 600;
  --font-notoSerif: "Noto Serif JP", serif;
  --font-notoSans: "Noto Sans JP", sans-serif;

  font-family: var(--font-notoSans);
  color: var(--color-brown);
  font-weight: 400;
  background-color: var(--color-lightpink);
  letter-spacing: 0.08em;
}
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}
:where(.main-area) .js-scrollIn {
  transform: translateY(30px);
  opacity: 0;
  transition: 1s ease;
  transition-property: transform, opacity;
}
:where(.main-area) .js-scrollIn.active {
  transform: translateY(0);
  opacity: 1;
}
.contents-body {
  counter-reset: coordinationCounter;
  padding-top: 8rem;
}

.message-section__box {
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.message-section__title {
  font-family: var(--font-notoSerif);
  display: inline-block;
  background-color: var(--color-pink);
  padding: 1.8rem 3rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-darkbrown);
  text-align: center;
  position: relative;
  z-index: 2;
  border: solid 2px var(--color-darkbrown);
  border-radius: 3.25rem;
  letter-spacing: 0.08em;
}

.message-section__box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
  background-color: var(--color-darkbrown);
  z-index: 1;
}

.message-section {
  margin: 8rem auto 0;
}

.message-section__body {
  width: 81rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  column-gap: 6rem;
}
.horoscope-section__sign {
  width: 20rem;
  margin: 0 auto;
}
.horoscope-section__sign .horoscope-section__image-wrap {
  width: 100%;
  margin: 0 auto;
}

.horoscope-section__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.horoscope-section__txt {
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  margin-top: 1rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}

.message-txt_box {
  width: 55rem;
  margin: 0 auto;
}
.message-txt__title {
  font-family: var(--font-notoSerif);
  line-height: 1.6;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  font-weight: bold;
  color: var(--color-darkbrown);
}
.message-txt__lead {
  line-height: 2.2;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-align: left;
  line-break: strict;
  text-align-last: left;
  margin-top: 2rem;
}

.message-section__divider {
  text-align: center;
  margin: 8rem auto 0;
  position: relative;
}

.message-section__divider-text {
  font-family: var(--font-notoSerif);
  display: inline-block;
  background-color: var(--color-pink);
  padding: 1.8rem 3rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-darkbrown);
  text-align: center;
  position: relative;
  z-index: 2;
  border: solid 2px var(--color-darkbrown);
  border-radius: 3.25rem;
  letter-spacing: 0.08em;
}

.message-section__divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
  background-color: var(--color-darkbrown);
  z-index: 1;
}

/* ラッキーカラー */
.lucky-color-section {
  padding: 8rem 0;
  position: relative;
}
.lucky-color-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 2px;
  background-color: var(--color-darkbrown);
  z-index: 1;
}

/* カラーチップ（上の丸い円） */
.color-chips {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 3rem;
}

.chip {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: inline-block;
}

.chip0101 { background: var(--color-0101); }
.chip0201 { background: var(--color-0201); }
.chip0301 { background: var(--color-0301); }
.chip0401 { background: var(--color-0401); border: solid 1px #D5D5D5; }
.chip0501 { background: var(--color-0501); }
.chip0601 { background: var(--color-0601); }
.chip0701 { background: var(--color-0701); }
.chip0801 { background: var(--color-0801); }
.chip0901 { background: var(--color-0901); }
.chip1001 { background: var(--color-1001); border: solid 1px #D5D5D5; }
.chip1101 { background: var(--color-1101); }
.chip1201 { background: var(--color-1201); }

/* ラッキーカラー名 */
.lucky-color-title {
  font-size: 1.6rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 6rem;
  letter-spacing: 0.08em;
  text-align: center;
}

/* おすすめアイテム見出し */
.item-list-title {
  font-size: 1.8rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 3rem;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.7;
}

/* おすすめアイテム（画像付き商品カード：PC 4列 / SP 2列） */
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3rem;
  row-gap: 4rem;
  max-width: 81rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.product-card {
  width: 100%;
}
.product-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.product-card__img {
  width: 100%;
  overflow: hidden;
}
.product-card__img img {
  display: block;
  width: 100%;
  height: auto;
}
.product-card__brand {
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  color: var(--color-gray);
  margin-top: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
}
.product-card__name {
  font-size: 1.3rem;
  color: var(--color-brown);
  margin-top: 0.5rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
}

/* ボタン（{色名}のアイテムを見る） */
.lucky-color-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 36.8rem;
  margin: 6rem auto 0;
}

.color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5.2rem;
  text-decoration: none;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.color-btn.txt-black { color: var(--color-black); }
.color-btn.txt-white { color: var(--color-white); }

.color-btn0101 { background: var(--color-0101); }
.color-btn0201 { background: var(--color-0201); }
.color-btn0301 { background: var(--color-0301); }
.color-btn0401 { background: var(--color-0401); border: solid 1px #D5D5D5; }
.color-btn0501 { background: var(--color-0501); }
.color-btn0601 { background: var(--color-0601); }
.color-btn0701 { background: var(--color-0701); }
.color-btn0801 { background: var(--color-0801); }
.color-btn0901 { background: var(--color-0901); }
.color-btn1001 { background: var(--color-1001); border: solid 1px #D5D5D5; }
.color-btn1101 { background: var(--color-1101); }
.color-btn1201 { background: var(--color-1201); }

.common-section__button-area {
  display: grid;
  grid-template-columns: 100%;
  margin: 0 auto;
  gap: 2rem;
  width: 36.8rem;
  padding-block: 8rem 10rem;
}
.contents-footer__button {
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.08em;
  border: 1px solid;
  height: 5.2rem;
  font-size: 1.5rem;
}
.contents-footer__button--fill {
  color: var(--color-white);
  background-color: var(--color-brown);
  border-color: var(--color-brown);
}
.contents-footer__button--outline {
  color: var(--color-brown);
  background-color: var(--color-lightpink);
  border-color: var(--color-brown);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .contents-body {
    padding-top: calc(50 *(100vw / 375));
  }
  .message-section__title {
    padding: calc(12 *(100vw / 375)) calc(16 *(100vw / 375));
    font-size: calc(16 *(100vw / 375));
    border-radius: calc(23.5 * (100vw / 375));
  }

  .message-section {
    margin: calc(50 *(100vw / 375)) auto 0;
  }

  .message-section__body {
    width: calc(325 *(100vw / 375));
    flex-direction: column;
    column-gap: 0;
    row-gap: calc(30 *(100vw / 375));
  }
  .horoscope-section__sign {
    width: calc(180 *(100vw / 375));
  }
  .horoscope-section__txt {
    font-size: calc(13 *(100vw / 375));
    margin-top: calc(10 *(100vw / 375));
  }

  .message-txt_box {
    width: calc(325 *(100vw / 375));
  }
  .message-txt__title {
    font-size: calc(22 *(100vw / 375));
  }
  .message-txt__lead {
    line-height: 2.4;
    font-size: calc(13 *(100vw / 375));
    margin-top: calc(20 *(100vw / 375));
  }

  .message-section__divider {
    margin: calc(50 *(100vw / 375)) auto 0;
  }

  .message-section__divider-text {
    padding: calc(12 *(100vw / 375)) calc(16 *(100vw / 375));
    font-size: calc(16 *(100vw / 375));
    border-radius: calc(23.5 * (100vw / 375));
  }

  /* ラッキーカラー */
  .lucky-color-section {
    padding: calc(50 *(100vw / 375)) 0;
  }

  /* カラーチップ */
  .color-chips {
    gap: calc(20 *(100vw / 375));
    margin-bottom: calc(20 *(100vw / 375));
  }

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

  .lucky-color-title {
    font-size: calc(14 *(100vw / 375));
    margin-bottom: calc(40 *(100vw / 375));
  }

  .item-list-title {
    font-size: calc(16 *(100vw / 375));
    margin-bottom: calc(20 *(100vw / 375));
  }

  /* おすすめアイテム SP：2列 */
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    width: calc(345 *(100vw / 375));
    max-width: none;
    column-gap: calc(15 *(100vw / 375));
    row-gap: calc(20 *(100vw / 375));
  }
  .product-card__brand {
    font-size: calc(12 *(100vw / 375));
    margin-top: calc(10 *(100vw / 375));
  }
  .product-card__name {
    font-size: calc(12 *(100vw / 375));
    margin-top: calc(5 *(100vw / 375));
  }

  /* ボタン */
  .lucky-color-buttons {
    gap: calc(10 *(100vw / 375));
    max-width: calc(300 *(100vw / 375));
    margin: calc(40 *(100vw / 375)) auto 0;
  }

  .color-btn {
    height: calc(50 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }

  .common-section__button-area {
    gap: calc(10 *(100vw / 375));
    width: calc(300 *(100vw / 375));
    padding-block: calc(50 *(100vw / 375));
  }
  .contents-footer__button {
    height: calc(50 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .pc_only { display: block; }
  .sp_only { display: none; }
}
@media screen and (max-width: 767px) {
  .pc_only { display: none; }
  .sp_only { display: block; }
}