@charset "UTF-8";

/* =============================================================================
 * N.O.R.C / Smooth Mild Wool 新感覚のウールシリーズ
 *
 * デザイン: Figma アートボード SP 375 / PC 1400
 * 単位: SP (767px以下) = calc(● * (100vw / 375)) ／ PC (768px以上) = rem (1rem = 10px)
 * PC のセクションは 1400 デザインに対する % でグリッドを組み、
 * .p-feature を max-width 140rem で中央寄せしている (1400px 以上で原寸一致)。
 * ========================================================================== */

/* LP はパンくずと MV の間に余白がないため、PC のパンくず下に余白を追加する */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* -----------------------------------------------------------------------------
 * 基本設定
 * -------------------------------------------------------------------------- */

.p-feature {
  --color-text: #2b2b2b;
  --color-label: #979797;
  --color-note: #676767;
  --color-base: #fff;

  /* variables.css 登録済みの --inter / --noto-sans を使う。
     和欧混在のテキストは欧文 Inter → 和文 Noto Sans JP の順にフォールバックさせる */
  --ff-lp-en: var(--inter);
  --ff-lp-ja: var(--noto-sans);
  --ff-lp-mix: "Inter", var(--noto-sans);

  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--ff-lp-ja);
}

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

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

/* スクロール連動フェード (js-intersection と同一要素に付与する)。
   フェード前の状態は script.js が付与する html.js が付いているときだけ適用する
   = JS が読み込めなかった場合はフェードなしでそのまま表示される */
.js .fade-up {
  opacity: 0;
  transform: translateY(calc(30 * (100vw / 375)));
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js .fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .fade-up,
  .section-item__sub-item {
    transition: none;
  }
}

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

.project-mainvisual__img {
  display: block;
}

/* -----------------------------------------------------------------------------
 * リード (動画 / コンセプト / 機能アイコン)
 * -------------------------------------------------------------------------- */

.section-intro__movie {
  width: calc(300 * (100vw / 375));
  margin: calc(40 * (100vw / 375)) auto 0;
}

.section-intro__line {
  width: 1px;
  height: calc(60 * (100vw / 375));
  margin: calc(30 * (100vw / 375)) auto 0;
  background: var(--color-text);
}

.section-intro__heading {
  margin-top: calc(30 * (100vw / 375));
  font-family: var(--ff-lp-ja);
  font-size: calc(18 * (100vw / 375));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.section-intro__text {
  margin-top: calc(30 * (100vw / 375));
  font-size: calc(13 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 段落間の空きはデザイン上「空行 1 行」なので line-height 分をそのまま取る */
.section-intro__text-block + .section-intro__text-block {
  margin-top: calc(26 * (100vw / 375));
}

.section-intro__function {
  margin-top: calc(40 * (100vw / 375));
}

.section-intro__icon-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(10 * (100vw / 375));
  width: calc(345 * (100vw / 375));
  margin: 0 auto;
}

.section-intro__icon-item {
  position: relative;
  width: calc(90 * (100vw / 375));
}

.section-intro__icon-img {
  display: block;
}

/* 支給アイコンには文言が焼き込まれているため、白帯を重ねてテキストで組み直す */
.section-intro__icon-label {
  position: absolute;
  top: calc(70 * (100vw / 375));
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(5 * (100vw / 375)) calc(10 * (100vw / 375));
  background: var(--color-base);
  color: #000;
  font-family: var(--ff-lp-mix);
  font-size: calc(10 * (100vw / 375));
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  white-space: nowrap;
}

/* 「90%以上UVカット」は 9 文字あり、0.12em のままだとラベル幅 90px を使い切って
   代替フォント時にアイコン外へはみ出すため、この 1 つだけトラッキングを詰める */
.section-intro__icon-label--small {
  font-size: calc(9 * (100vw / 375));
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

.section-intro__note {
  margin-top: calc(20 * (100vw / 375));
  color: var(--color-note);
  font-size: calc(10 * (100vw / 375));
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

/* -----------------------------------------------------------------------------
 * 商品セクション
 * -------------------------------------------------------------------------- */

.section-item {
  margin-top: calc(80 * (100vw / 375));
}

.section-intro + .section-item {
  margin-top: calc(50 * (100vw / 375));
}

.section-item__head {
  padding: 0 0 calc(20 * (100vw / 375)) calc(15 * (100vw / 375));
}

.section-item__title {
  font-family: var(--ff-lp-en);
  font-size: calc(20 * (100vw / 375));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.1em;
}

.section-item__sub {
  margin-top: calc(15 * (100vw / 375));
  font-family: var(--ff-lp-en);
  font-size: calc(13 * (100vw / 375));
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.1em;
}

.section-item__main-img {
  display: block;
}

/* SP: 4 点をフェードで自動切替するスライダー。PC: 4 点を横並びで表示する */
.section-item__subs {
  position: relative;
  width: calc(300 * (100vw / 375));
  margin: calc(-30 * (100vw / 375)) auto 0;
  aspect-ratio: 5 / 6;
}

.section-item__sub-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.section-item__sub-item.is-current {
  opacity: 1;
}

.section-item__sub-img {
  display: block;
  height: 100%;
  object-fit: cover;
}

.section-item__info {
  padding: calc(30 * (100vw / 375)) calc(15 * (100vw / 375)) 0;
}

/* -----------------------------------------------------------------------------
 * 商品リスト (Main Item / Others)
 * -------------------------------------------------------------------------- */

.component-product + .component-product {
  margin-top: calc(20 * (100vw / 375));
}

.component-product__label {
  color: var(--color-label);
  font-family: var(--ff-lp-en);
  font-size: calc(14 * (100vw / 375));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.08em;
}

.component-product__list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * (100vw / 375));
  margin-top: calc(10 * (100vw / 375));
}

.component-product__link,
.component-product__button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

/* 【ブランド表記】/ 商品名 / 価格 を折り返し単位にする。
   インライン要素どうしの境目では nowrap が効いて改行機会が消えるため、
   名前ボックス自体を flex-wrap のコンテナにして単位の境目でだけ折り返させる
   (デザインもこの位置で改行している)。 */
.component-product__name {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
  min-width: 0; /* flex の自動最小サイズで縮まなくなるのを防ぐ */
  font-family: var(--ff-lp-mix);
  font-size: calc(12 * (100vw / 375));
  font-weight: var(--font-weight-regular);
  /* Figma の 2 行アイテム高さ 42px (= 21px x 2) に合わせる。
     1 行のときの行高は BUY/INFO タグの 25px が支配するためデザインと一致する */
  line-height: 1.75;
  letter-spacing: 0.08em;
}

.component-product__name.flex_change {
  flex-direction: column;
}

.component-product__brand,
.component-product__group,
.component-product__title,
.component-product__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ブランド表記がある行は「商品名 + 価格」をひとまとめにして、
   デザインどおり【ブランド表記】の直後で改行させる */
.component-product__group {
  display: flex;
}

/* 商品名と価格の間の全角スペース分の余白。
   価格が次の行に落ちたときに行頭がずれないよう margin-right で取る */
.component-product__title {
  margin-right: 1em;
}

.component-product__tag {
  flex: 0 0 calc(55 * (100vw / 375));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * (100vw / 375)) calc(8 * (100vw / 375));
  background: var(--color-text);
  color: var(--color-base);
  font-family: var(--ff-lp-en);
  font-size: calc(13 * (100vw / 375));
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

/* INFO クリックで開くクレジット。
   商品行との間隔は擬似要素のスペーサーで取る。
   padding や margin だと閉じている間も高さが残る / scrollHeight に乗らないため
   (JS は scrollHeight を max-height に入れて開閉する)。 */
.component-product__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.component-product__detail::before {
  content: "";
  display: block;
  height: calc(10 * (100vw / 375));
}

.component-product__detail-inner {
  width: max-content;
  margin-left: auto;
  padding: 0 calc(10 * (100vw / 375));
  border-right: 1px solid var(--color-text);
  text-align: right;
}

.component-product__detail-row {
  font-family: var(--ff-lp-mix);
  font-size: calc(12 * (100vw / 375));
  line-height: 1;
  letter-spacing: 0.08em;
}

.component-product__detail-row + .component-product__detail-row {
  margin-top: calc(8 * (100vw / 375));
}

/* -----------------------------------------------------------------------------
 * フッターボタン
 * -------------------------------------------------------------------------- */

.section-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * (100vw / 375));
  margin-top: calc(80 * (100vw / 375));
  padding-bottom: calc(80 * (100vw / 375));
}

.section-footer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(266 * (100vw / 375));
  height: calc(50 * (100vw / 375));
  font-size: calc(16 * (100vw / 375));
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  text-indent: 0.1em;
}

.section-footer__button--fill {
  background: var(--color-text);
  color: var(--color-base) !important;
  font-family: var(--ff-lp-en);
}

.section-footer__button--outline {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-family: var(--ff-lp-ja);
}

/* =============================================================================
 * PC (768px以上)
 * ========================================================================== */

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

  /* 1400 のアートボード原寸で表示できるよう幅を制限する */
  .p-feature {
    max-width: 140rem;
    margin-inline: auto;
  }

  .js .fade-up {
    transform: translateY(3rem);
  }

  /* ▽ リード ▽ */
  .section-intro__movie {
    width: 30rem;
    margin-top: 8rem;
  }

  .section-intro__line {
    height: 6rem;
    margin-top: 3rem;
  }

  .section-intro__heading {
    margin-top: 3rem;
    font-size: 2rem;
    line-height: 2;
  }

  .section-intro__text {
    margin-top: 3rem;
    font-size: 1.4rem;
  }

  .section-intro__text-block + .section-intro__text-block {
    margin-top: 2.8rem;
  }

  .section-intro__function {
    margin-top: 4rem;
  }

  .section-intro__icon-list {
    flex-wrap: nowrap;
    gap: 1rem;
    width: 49rem;
  }

  .section-intro__icon-item {
    width: 9rem;
  }

  .section-intro__icon-label {
    top: 7rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }

  .section-intro__icon-label--small {
    font-size: 0.9rem;
  }

  .section-intro__note {
    margin-top: 2rem;
    font-size: 1rem;
  }

  /* ▽ 商品セクション ▽
     1400 デザインのカラム: 0-440 / 440-500 / 500-935 / 935-1340 / 1340-1400
     メイン画像が 1-2 列 (0-500)、サブ 4 点が 2-4 列 (440-1340)、
     見出しと商品リストが右寄せ (右余白 60) の重なりレイアウト。 */
  .section-item {
    display: grid;
    grid-template-columns: 31.4286% 4.2857% 31.0714% 28.9286% 4.2857%;
    /* メイン画像 (600px) を満たすための余りが auto 行に均等配分され、
       サブ画像行まで伸びてしまうため、余りは商品リスト行 (3行目) だけに逃がす */
    grid-template-rows: 8.9rem auto 1fr;
    margin-top: 12rem;
  }

  .section-intro + .section-item {
    margin-top: 10rem;
  }

  .section-item__head {
    grid-row: 1;
    grid-column: 3 / 5;
    padding: 0;
    text-align: right;
  }

  .section-item__title {
    font-size: 3rem;
  }

  .section-item__sub {
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }

  .section-item__main {
    grid-row: 1 / 4;
    grid-column: 1 / 3;
    align-self: start;
  }

  .section-item__subs {
    position: static;
    display: flex;
    gap: 1.1111%; /* 10 / 900 */
    width: auto;
    margin: 0;
    aspect-ratio: auto;
    grid-row: 2;
    grid-column: 2 / 5;
  }

  .section-item__sub-item {
    position: static;
    flex: 1 1 0;
    opacity: 1;
    transition: none;
  }

  .section-item__sub-img {
    height: auto;
  }

  .section-item__info {
    grid-row: 3;
    grid-column: 4;
    align-self: start;
    padding: 4rem 0 0;
  }

  /* ▽ 商品リスト ▽ */
  .component-product + .component-product {
    margin-top: 2rem;
  }

  .component-product__label {
    font-size: 1.4rem;
  }

  .component-product__list {
    gap: 1.2rem;
    margin-top: 1rem;
  }

  .component-product__name {
    font-size: 1.2rem;
  }

  .component-product__tag {
    flex-basis: 5.5rem;
    padding: 0.6rem 0.8rem;
    font-size: 1.3rem;
  }

  .component-product__detail::before {
    height: 1rem;
  }

  .component-product__detail-inner {
    padding: 0 1rem;
  }

  .component-product__detail-row {
    font-size: 1.2rem;
  }

  .component-product__detail-row + .component-product__detail-row {
    margin-top: 0.8rem;
  }

  /* ▽ フッターボタン ▽ */
  .section-footer {
    gap: 1rem;
    margin-top: 12rem;
    padding-bottom: 8rem;
  }

  .section-footer__button {
    width: 34.5rem;
    height: 5rem;
    font-size: 1.6rem;
  }

}