@charset "UTF-8";

/* ==========================================================================
 * 秋の開運コーディネート  crossplus / 260911_goodluck_coordinate
 *
 * デザイン: SP アートボード 375px ／ PC アートボード 1400px（SP特化型）
 *   PC は「左 760px = 運気別ナビ＋ラッキーカラー導線（sticky で追従）」
 *          「右 480px = SP レイアウトをそのまま流用」の 2 カラム。
 *
 * ▼ 単位について
 *   デザイン値 1px = --u として .p-feature に定義し、サイズは calc(● * var(--u)) で書く。
 *     SP (767px 以下) : --u = calc(100vw / 375)  → calc(● * (100vw / 375)) と同義
 *     PC (768px 以上) : --u = 0.1rem             → 1rem = 10px なので ●px = ●/10 rem と同義
 *   これによりデザイン値をそのまま書きつつ、SP は vw 連動・PC は rem 固定になる。
 *   line-height は単位なし／letter-spacing は em で記述する。
 * ========================================================================== */

@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
 * ベース
 * -------------------------------------------------------------------------- */

.p-feature {
  /* デザイン値 1px 相当の単位（SP: vw 連動 / PC: rem） */
  --u: calc(100vw / 375);

  /* カラー（Figma variables） */
  --lc-text: #151515;
  --lc-bg: #faf8f6;
  --lc-border: #b78e4c;
  --lc-gray: #717171;
  --lc-black: #050505;
  --lc-red: #c80000;
  --lc-work: #236496;
  --lc-money: #916864;
  --lc-relationship: #85a2ec;
  --lc-beauty: #ea7fc1;
  --lc-health: #bd9ea5;
  --lc-purify: #8e8e93;

  /* セクションごとのテーマカラー（section-coordinate--* で上書き） */
  --lc-theme: var(--lc-text);

  /* 欧文（Jost）／和文はサイト共通 variables.css の --noto-sans */
  --lc-en: "Jost", sans-serif;

  background-color: #fff;
  color: var(--lc-text);
  font-family: var(--noto-sans, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif);
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .p-feature {
    --u: 0.1rem;
  }

  /* 追従メニューは SP のみ表示のため PC では余白を戻す */
  .p-feature.is-anchor-nav-visible {
    padding-bottom: 0;
  }
}

/* SP 追従メニュー表示中はメニュー高さ分の余白を確保し、最下部の CTA を覆わせない */
/* .p-feature.is-anchor-nav-visible {
  padding-bottom: calc(40 * var(--u));
} */

.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

.p-feature a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
 * レイアウト
 * -------------------------------------------------------------------------- */

.p-feature .project-side {
  margin-top: calc(60 * var(--u));
  padding-inline: calc(15 * var(--u));
}

.p-feature .project-main {
  padding-top: calc(60 * var(--u));
  background-color: #fff;
}

.p-feature .project-main > * + * {
  margin-top: calc(60 * var(--u));
}

@media only screen and (min-width: 768px) {
  .p-feature{
    background: #FAF8F6;
  }

  .p-feature .project-body {
    display: grid;
    grid-template-columns: calc(760* (100vw /1400)) 48rem;
    /* grid-template-columns: minmax(0, 76rem) 48rem; */
    /* justify-content: center; */
    /* max-width: 140rem; */
    width: 100%;
    margin-inline: auto;
  }

  .p-feature .project-head {
    grid-column: 2;
    grid-row: 1;
    background: #fff;
  }

  .p-feature .project-main {
    grid-column: 2;
    grid-row: 2;
    width: 48rem;
    margin-right: auto;
    margin-left: 0;
  }

  /* PC は左カラム。2 行にまたがらせて高さを確保し、内側を sticky で追従させる */
  .p-feature .project-side {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-inline: 0;
  }

  .p-feature .project-side__inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 37.5rem;
    max-width: 100%;
    height: 100vh;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
 * メインビジュアル
 * -------------------------------------------------------------------------- */

.p-feature .project-mainvisual {
  line-height: 0;
}

/* --------------------------------------------------------------------------
 * リード
 * -------------------------------------------------------------------------- */

.p-feature .section-lead {
  padding-top: calc(60 * var(--u));
  padding-inline: calc(15 * var(--u));
  text-align: center;
}

.p-feature .section-lead__catch {
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 2;
}

.p-feature .section-lead__text {
  margin-top: calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  line-height: 2;
}

/* 原稿の空行 1 行分（font-size × line-height 2） */
.p-feature .section-lead__text + .section-lead__text {
  margin-top: 2em;
}

/* --------------------------------------------------------------------------
 * 運気別ナビ（SP: 本文中 / PC: 左カラムで追従）
 * -------------------------------------------------------------------------- */

.p-feature .component-nav__heading {
  padding-bottom: calc(20 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.p-feature .component-nav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--u));
  height: calc(128 * var(--u));
}

.p-feature .component-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: calc(5 * var(--u));
  border-radius: calc(4 * var(--u));
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
}

.p-feature .component-nav__link--work { background-color: var(--lc-work); }
.p-feature .component-nav__link--money { background-color: var(--lc-money); }
.p-feature .component-nav__link--relationship { background-color: var(--lc-relationship); }
.p-feature .component-nav__link--beauty { background-color: var(--lc-beauty); }
.p-feature .component-nav__link--health { background-color: var(--lc-health); }
.p-feature .component-nav__link--purify { background-color: var(--lc-purify); }

@media only screen and (min-width: 768px) {
  .p-feature .component-nav {
    width: 100%;
  }

  .p-feature .component-nav__heading {
    font-size: calc(18 * var(--u));
  }
}

/* --------------------------------------------------------------------------
 * ラッキーカラー導線（SP: 本文中 / PC: 左カラムで追従）
 * -------------------------------------------------------------------------- */

.p-feature .component-guide {
  margin-top: calc(30 * var(--u));
  text-align: center;
}

.p-feature .component-guide__label {
  padding-bottom: calc(20 * var(--u));
}

.p-feature .component-guide__text {
  display: block;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .component-guide__color {
  display: block;
  margin-top: calc(15 * var(--u));
  color: var(--lc-red);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .component-guide__button {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .p-feature .component-guide {
    width: 100%;
    margin-top: calc(40 * var(--u));
  }

  /* PC は「2026年下半期のラッキーカラー "赤"」を横並びにする */
  .p-feature .component-guide__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    padding-bottom: 0;
  }

  .p-feature .component-guide__color {
    margin-top: 0;
  }

  .p-feature .component-guide__button {
    margin-top: calc(10 * var(--u));
  }
}

/* --------------------------------------------------------------------------
 * 監修メッセージ
 * -------------------------------------------------------------------------- */

.p-feature .section-message {
  padding-block: calc(60 * var(--u));
  padding-inline: calc(15 * var(--u));
  border-top: 1px solid var(--lc-border);
  border-bottom: 1px solid var(--lc-border);
  background-color: var(--lc-bg);
  text-align: center;
}

.p-feature .section-message__sub {
  font-size: calc(12 * var(--u));
  letter-spacing: 0.05em;
  line-height: 1;
}

.p-feature .section-message__title {
  margin-top: calc(15 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.p-feature .section-message__lead {
  margin-top: calc(40 * var(--u));
}

.p-feature .section-message__label {
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.p-feature .section-message__catch {
  margin-top: calc(20 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.p-feature .section-message__text {
  margin-top: calc(40 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: left;
}

/* --------------------------------------------------------------------------
 * 運気別コーディネート（6 セクション共通）
 * -------------------------------------------------------------------------- */

.p-feature .section-coordinate {
  padding-inline: calc(15 * var(--u));
}

.p-feature .section-coordinate--work { --lc-theme: var(--lc-work); }
.p-feature .section-coordinate--money { --lc-theme: var(--lc-money); }
.p-feature .section-coordinate--relationship { --lc-theme: var(--lc-relationship); }
.p-feature .section-coordinate--beauty { --lc-theme: var(--lc-beauty); }
.p-feature .section-coordinate--health { --lc-theme: var(--lc-health); }
.p-feature .section-coordinate--purify { --lc-theme: var(--lc-purify); }

.p-feature .section-coordinate__head {
  text-align: center;
}

.p-feature .section-coordinate__logo {
  line-height: 0;
}

.p-feature .section-coordinate__heading {
  margin-top: calc(15 * var(--u));
  padding-inline: calc(5 * var(--u));
}

.p-feature .section-coordinate__item-line {
  display: block;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .section-coordinate__item-line + .section-coordinate__item-line {
  margin-top: calc(10 * var(--u));
}

.p-feature .section-coordinate__cross {
  display: block;
  width: calc(12.5 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(15 * var(--u)) auto;
  line-height: 0;
}

/* デザイン (Figma) と同じく 2px のストロークは 12.5×12 の枠外へはみ出させる */
.p-feature .section-coordinate__cross svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.p-feature .section-coordinate__theme {
  display: block;
  color: var(--lc-theme);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .section-coordinate__lead,
.p-feature .section-coordinate__text {
  margin-top: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  line-height: 1.75;
}

.p-feature .section-coordinate__text{
  text-align: left;
}

.p-feature .section-coordinate__image {
  margin-top: calc(20 * var(--u));
  line-height: 0;
}

/* --------------------------------------------------------------------------
 * 商品情報（Main Item / Other Items）
 * -------------------------------------------------------------------------- */

.p-feature .component-product {
  margin-top: calc(20 * var(--u));
}

.p-feature .component-product__title {
  color: var(--lc-gray);
  font-family: var(--lc-en);
  font-size: calc(14 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .component-product__title--other {
  margin-top: calc(20 * var(--u));
}

.p-feature .component-product__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  margin-top: calc(10 * var(--u));
}

/* 空白のない長い商品名・ブランド名でも BUY を押し出さない */
.p-feature .component-product__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.p-feature .component-product__group {
  margin-top: calc(10 * var(--u));
}

.p-feature .component-product__group .component-product__item {
  margin-top: 0;
}

.p-feature .component-product__group .component-product__item + .component-product__item {
  margin-top: calc(12 * var(--u));
}

.p-feature .component-product__brand {
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .component-product__name {
  margin-top: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.p-feature .component-buy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(2 * var(--u));
  background-color: var(--lc-black);
  color: #fff;
  font-family: var(--lc-en);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
 * おすすめアイテム（自動で横に流れるスライダー）
 * -------------------------------------------------------------------------- */

.p-feature .component-slider {
  margin-top: calc(20 * var(--u));
  margin-inline: calc(-15 * var(--u));
  padding-inline: calc(15 * var(--u));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* JS でリストを複製できたときだけ自動スクロールに切り替える。
   overflow: clip はスクロールコンテナを作らないため、Tab でカードにフォーカスしても
   中身が勝手に横スクロールしない（未対応ブラウザは hidden にフォールバック） */
.p-feature .component-slider.is-marquee {
  padding-inline: 0;
  overflow: hidden;
  overflow: clip;
}

.p-feature .component-slider__track {
  display: flex;
  width: max-content;
}

.p-feature .component-slider.is-marquee .component-slider__track {
  animation: lc-marquee 40s linear infinite;
}

/* 操作中は止めて BUY ボタンを押せるようにする */
.p-feature .component-slider.is-marquee:hover .component-slider__track,
.p-feature .component-slider.is-marquee:focus-within .component-slider__track {
  animation-play-state: paused;
}

@keyframes lc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.p-feature .component-slider__list {
  display: flex;
}

.p-feature .component-slider__item {
  flex: 0 0 auto;
  width: calc(200 * var(--u));
  margin-right: calc(15 * var(--u));
}

.p-feature .component-card {
  display: block;
}

.p-feature .component-card__image {
  display: block;
  line-height: 0;
}

.p-feature .component-card__brand {
  display: block;
  margin-top: calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .component-card__name {
  display: block;
  margin-top: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-feature .component-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  margin-top: calc(5 * var(--u));
}

.p-feature .component-card__price {
  min-width: 0;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * ラッキーカラー "赤"
 * -------------------------------------------------------------------------- */

.p-feature .section-lucky {
  padding-top: calc(60 * var(--u));
  padding-inline: calc(15 * var(--u));
  border-top: 1px solid var(--lc-border);
  text-align: center;
}

.p-feature .section-lucky__heading {
  padding-bottom: calc(20 * var(--u));
  padding-inline: calc(5 * var(--u));
}

.p-feature .section-lucky__text {
  display: block;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .section-lucky__color {
  display: block;
  margin-top: calc(15 * var(--u));
  color: var(--lc-red);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .section-lucky__image {
  line-height: 0;
}

.p-feature .section-lucky__body {
  margin-top: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: left;
}

.p-feature .section-lucky__button {
  margin-top: calc(30 * var(--u));
  margin-bottom: calc(61 * var(--u));
}

.main-area{
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
 * ボタン
 * -------------------------------------------------------------------------- */

.p-feature .component-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(50 * var(--u));
  padding: calc(13 * var(--u)) calc(20 * var(--u));
  border-radius: calc(4 * var(--u));
  background-color: var(--lc-text);
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.p-feature .component-button--red {
  background-color: var(--lc-red);
}

/* --------------------------------------------------------------------------
 * 監修者プロフィール
 * -------------------------------------------------------------------------- */

.p-feature .section-artist{
  background: #fff;
}

.p-feature .section-artist_inner {
  margin-inline: calc(15 * var(--u));
  padding-bottom: calc(20 * var(--u));
  text-align: center;
  border: 1px solid var(--lc-border);
  border-radius: calc(4 * var(--u));
  background-color: var(--lc-bg);
}

.p-feature .section-artist__image {
  width: calc(200 * var(--u));
  margin-inline: auto;
  line-height: 0;
}

.p-feature .section-artist__body {
  margin-top: calc(30 * var(--u));
}

.p-feature .section-artist__role {
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1;
}

.p-feature .section-artist__title {
  margin-top: calc(10 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.46;
}

.p-feature .section-artist__text {
  margin-top: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.08em;
  line-height: 2.2;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .p-feature .section-artist__text{
    width: calc(305 * var(--u));
    margin-inline: auto;
  }

  .p-feature .section-artist_inner{
    padding-top: calc(40 * var(--u));
  }
}

@media only screen and (min-width: 768px) {
  /* PC は 2 カラムの下に全幅で置き、画像と本文を横並びにする */

  .p-feature .section-artist{
    padding-top: calc(80 * var(--u));
  }

  .p-feature .section-artist_inner {
    display: flex;
    align-items: flex-start;
    width: 100rem;
    max-width: calc(100% - 4rem);
    margin-inline: auto;
    padding: calc(80 * var(--u));
    text-align: left;
  }


  .p-feature .section-artist__image {
    flex: 0 0 auto;
    width: calc(250 * var(--u));
    margin-inline: 0;
  }

  .p-feature .section-artist__body {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    margin-left: calc(60 * var(--u));
  }

  .p-feature .section-artist__text {
    font-size: calc(14 * var(--u));
    margin-top: calc(37 * var(--u));
  }
}

/* --------------------------------------------------------------------------
 * トップページに戻る
 * -------------------------------------------------------------------------- */
.p-feature .section-return{
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(40 * var(--u));
  background: #fff;
}

.p-feature .section-return_inner {
  margin-inline: calc(15 * var(--u));
}

@media screen and (max-width: 767px) {
  .p-feature .section-return {
    padding-top: calc(110 * var(--u));
    padding-bottom: calc(80 * var(--u));
  }
}


@media only screen and (min-width: 768px) {

  .p-feature .section-return{
    padding-bottom: calc(80 * var(--u));
  }

  .p-feature .section-return_inner {
    width: calc(375 * var(--u));
    margin-inline: auto;
  }

  .p-feature .section-return_inner .component-button {
    min-height: calc(60 * var(--u));
  }
}

/* --------------------------------------------------------------------------
 * SP 追従メニュー（赤ボタンが画面上部から出たら表示）
 * -------------------------------------------------------------------------- */

.p-feature .project-anchor {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease, visibility 0.3s ease;
}

.p-feature .project-anchor.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.p-feature .project-anchor__inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-feature .project-anchor__list {
  display: flex;
  width: max-content;
  min-width: 100%;
}

.p-feature .project-anchor__link {
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding-inline: calc(15 * var(--u));
  border-right: 1px solid #fff;
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  white-space: nowrap;
}

.p-feature .project-anchor__item:last-child .project-anchor__link {
  border-right: 0;
}

.p-feature .project-anchor__link--work { background-color: var(--lc-work); }
.p-feature .project-anchor__link--money { background-color: var(--lc-money); }
.p-feature .project-anchor__link--relationship { background-color: var(--lc-relationship); }
.p-feature .project-anchor__link--beauty { background-color: var(--lc-beauty); }
.p-feature .project-anchor__link--health { background-color: var(--lc-health); }
.p-feature .project-anchor__link--purify { background-color: var(--lc-purify); }