@charset "UTF-8";
/* =========================================================================
   三陽商会 SSM 20261016 / SETUP STYLE GUIDE
   PC（787px以上）／SP（786px以下）。
   - アートボード幅 1920px を基準に、ルートフォントサイズを vw で可変
     （1rem = 10px @1920px）→ px値は rem() で指定すれば画面幅に追従
   - 各要素の「幅」は原則 % 指定
   - 文字サイズは fs()（PC）／fs-sp()（SP）で指定（最大＝カンプ値／最小＝12px）
   ========================================================================= */
/* -------------------------------------------------- function / mixin */
/* -------------------------------------------------- tokens */
/* MVの表示アニメーション
   再生順は ①ラベル → ②タイトル                                     */
/* スクロールに合わせた表示アニメーション
   画面内に入った要素へ script.js が .is-shown を付ける。
   セクション見出しは位置を変えず、番号 → 和文の順にフェードイン。
   そのあとLOOK群が上から降りてくる。                                  */
/* 主要カラム（1920px基準）
   ローカルナビ : left 200 / width 580 ／ メインカラム : left 780 / width 940
   .contents を「左右200pxパディング＋横並び」で組んでいるため、
   実際に使うのは左右パディング値のみ。ナビ580はフレックスの余りで確保する。 */
/* ルートフォントサイズ（このLP全体の拡大率の基準）
   rem は「ルート要素＝html」基準の単位なので、この指定だけは
   .dh_lp_wrapper の中に置けない。                                     */
html {
  font-size: 0.5208333vw;
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 10px;
  }
}
@media screen and (max-width: 786px) {
  html {
    font-size: 2.66667vw;
  }
}

/* LP本体。見た目に関わる指定はすべてこのラッパーに閉じる */
.dh_lp_wrapper {
  max-width: 1920px;
  margin-inline: auto;
  overflow-x: clip;
  background: #a5925f;
  color: #000000;
  font-family: "Yu Gothic", "游ゴシック体", YuGothic, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* サイト共通CSSは h1 や p などの要素に直接文字色を付けているため、
  親（.lead など）に指定した色が継承されず黒になる。ラッパー内では継承に戻す。 */
  /* 見出しはサイト共通CSS（base.css）が書体・字間まで上書きしてくるので、
  ラッパーの指定（$f-jp）を継承させる。 */
  /* 改行の出し分け（.u-sp＝SPだけ／.u-pc＝PCだけ） */
  /* =========================================================================
  MV
  Figmaアートボード 1920 x 850。
  位置・サイズは 1920 x 850 に対する % で指定（画面幅に追従）。
  ========================================================================= */
  /* モーションを減らす設定の場合はアニメーションせず最初から表示する */
  /* =========================================================================
  リード
  ========================================================================= */
  /* =========================================================================
  セクション部分（左：ローカルナビ／右：コンテンツ）
  ========================================================================= */
  /* Figma「セクション部分」と同じ組み方（左右200pxの余白＋左ナビ580／右940）。
  ローカルナビを position: sticky で効かせるため、横並びのフレックスにしている。
  align-items: flex-start は必須
  （stretch だとナビの高さがカラム全体になり sticky が動かなくなる）。      */
  /* =========================================================================
  タイトル（ローカルナビ／セクション見出し 共通コンポーネント）
  ※ 1em = 和文タイトルのフォントサイズ
  ========================================================================= */
  /* =========================================================================
  セクション
  ========================================================================= */
  /* --- 表示アニメーション
  初期状態はCSSで隠しておき、画面内に入ったら script.js が .is-shown を付ける。
  見出しは位置を動かさず、番号 → 和文 の順に $reveal-step 遅らせてフェード。
  LOOK群はそのあと、$reveal-delay ぶん遅れて上から降りてくる。          */
  /* 動きを減らす設定のときは、動かさずそのまま見せる */
  /* -------------------------------------------------- LOOK
  ロゴ → リード → 画像（メイン＋サブ2点）→ クレジット の順に縦積み。 */
  /* -------------------------------------------------- クレジット */
  /* =========================================================================
  トレンド（Recommend Items）
  ========================================================================= */
  /* -------------------------------------------------- レコメンドカード */
  /* =========================================================================
  変化セクション（横スクロール）
  ========================================================================= */
  /* =========================================================================
  バナー
  ========================================================================= */
  /* =========================================================================
  PAGE TOP
  ========================================================================= */
  /* =========================================================================
  SP（786px以下）
  Figmaアートボード 375px 基準。ルートフォントサイズを vw 可変にし、
  1rem = 10px @375px とする → px値は rem() でそのまま指定できる。
  マークアップはPCと共通で、ここではCSSだけを差し替える。
  ※FigmaのSPカンプにあるのは「リード」と「下部固定ナビ」のみ。
    セクション以降は前回LP（20260909）のSPと同じ組み方
    （白カラム355／画像335／テキスト・クレジット295）に合わせている。
    MVはカンプが空のため暫定レイアウト。
  ========================================================================= */
}
.dh_lp_wrapper h1,
.dh_lp_wrapper h2,
.dh_lp_wrapper h3,
.dh_lp_wrapper p,
.dh_lp_wrapper dl,
.dh_lp_wrapper dd,
.dh_lp_wrapper figure {
  margin: 0;
}
.dh_lp_wrapper h1,
.dh_lp_wrapper h2,
.dh_lp_wrapper h3,
.dh_lp_wrapper p,
.dh_lp_wrapper li,
.dh_lp_wrapper dl,
.dh_lp_wrapper dt,
.dh_lp_wrapper dd {
  color: inherit;
}
.dh_lp_wrapper h1,
.dh_lp_wrapper h2,
.dh_lp_wrapper h3 {
  font-family: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}
.dh_lp_wrapper ul,
.dh_lp_wrapper ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dh_lp_wrapper img,
.dh_lp_wrapper svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.dh_lp_wrapper a {
  color: inherit;
  text-decoration: none;
}
.dh_lp_wrapper .u-sp {
  display: none;
}
.dh_lp_wrapper .mv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/850;
  overflow: hidden;
  background: #b2b2b2;
  /* --- 背景写真（左：トルソー） */
  /* --- 写真に落とす影（乗算＋ぼかし） */
  /* --- 背景写真（右：平置き）。Figmaのトリミング値をそのまま再現 */
  /* --- 左のゴールド帯 */
  /* --- ラベル（Figmaの「ラベル」をSVG1枚で書き出したもの） */
  /* --- テキスト（教えて！／SETUP STYLE GUIDE／セットアップの着こなし方）
     Figmaの「テキスト」グループをSVG1枚で書き出したもの（846 x 392） */
  /* --- 表示アニメーション
  ① ラベル → ② タイトル の順にフェードで再生する。 */
}
.dh_lp_wrapper .mv__bg {
  position: absolute;
  top: -21.9592%;
  left: -29.79167%;
  width: 131.25%;
  height: 197.80075%;
}
.dh_lp_wrapper .mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dh_lp_wrapper .mv__shadow {
  position: absolute;
  border-radius: 4.75rem;
  background: rgba(94, 94, 94, 0.3);
  mix-blend-mode: multiply;
}
.dh_lp_wrapper .mv__shadow--01 {
  top: 49.29412%;
  left: 10.26042%;
  width: 31.04167%;
  height: 56%;
  filter: blur(9rem);
}
.dh_lp_wrapper .mv__shadow--02 {
  top: 47.05882%;
  left: 42.76042%;
  width: 18.02083%;
  height: 58.23529%;
  filter: blur(15rem);
}
.dh_lp_wrapper .mv__bg2 {
  position: absolute;
  top: -18.94118%;
  left: 62.76042%;
  width: 37.23958%;
  height: 124.23529%;
  overflow: hidden;
}
.dh_lp_wrapper .mv__bg2 img {
  position: absolute;
  top: -7.85%;
  left: -3.49%;
  width: 117.53%;
  max-width: none;
  height: 119.41%;
}
.dh_lp_wrapper .mv__band {
  position: absolute;
  top: 0;
  left: 0;
  width: 19.94792%;
  height: 100%;
  background: #a5925f;
}
.dh_lp_wrapper .mv__label {
  position: absolute;
  top: 0;
  left: 5.41667%;
  width: 7.03125%;
}
.dh_lp_wrapper .mv__label img {
  width: 100%;
}
.dh_lp_wrapper .mv__text {
  position: absolute;
  top: 47.04706%;
  left: 5.20833%;
  width: 44.0625%;
}
.dh_lp_wrapper .mv__text img {
  width: 100%;
}
.dh_lp_wrapper .mv__label {
  animation: mv-fade 0.8s ease 0.2s both;
}
.dh_lp_wrapper .mv__text {
  animation: mv-fade 0.8s ease 1s both;
}
@keyframes mv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .mv__text,
  .dh_lp_wrapper .mv__label {
    animation: none;
  }
}
.dh_lp_wrapper .lead {
  padding: 12rem 0;
  color: #ffffff;
  text-align: center;
}
.dh_lp_wrapper .lead__ttl {
  color: #ffffff;
  font-size: max(12px, 2.6rem);
  font-weight: 700;
  line-height: 1.80769;
}
.dh_lp_wrapper .lead__body {
  margin-top: 3rem;
}
.dh_lp_wrapper .lead__txt {
  color: #ffffff;
  font-size: max(12px, 1.8rem);
  font-weight: 500;
  line-height: 1.77778;
}
.dh_lp_wrapper .contents {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: 10.41667%;
  /* メインカラム（Figma「右側」940幅）は白ベタ。
  ※幅の%は .contents のコンテンツ幅（1920 - 200×2 = 1520）基準        */
}
.dh_lp_wrapper .contents__main {
  flex: none;
  width: 61.84211%;
  background: #ffffff;
}
.dh_lp_wrapper .localnav {
  position: sticky;
  top: calc(50vh - 30.06rem);
  z-index: 1;
  flex: 1 0 0;
  min-width: 0;
  margin-top: 16.64rem;
  padding-left: 5rem;
  /* stickyは .contents の下端で止まるので、何もしないと最下部でナビが
  カラムの一番下に密着する。margin-bottom のぶんだけ手前で止める。      */
  margin-bottom: 12rem;
}
.dh_lp_wrapper .localnav__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.dh_lp_wrapper .ttl {
  display: flex;
  align-items: center;
  gap: 1.5em;
  color: #000000;
  /* --- 番号（黒ベタ＋左右の縦ライン） */
  /* --- 和文 */
  /* --- ローカルナビ用（横並び） */
  /* --- セクション見出し用（縦並び・中央揃え） */
}
.dh_lp_wrapper .ttl__num {
  flex: none;
  display: flex;
  gap: 0.1818em;
  width: 3.1818em;
  height: 4.5459em;
}
.dh_lp_wrapper .ttl__num::before, .dh_lp_wrapper .ttl__num::after {
  content: "";
  flex: none;
  width: 0.1818em;
  background: #000000;
}
.dh_lp_wrapper .ttl__num-inner {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  font-family: "jubilat", serif;
  font-weight: 400;
  font-style: normal;
  font-weight: 300;
  font-size: 1.1818em;
  line-height: 1;
}
.dh_lp_wrapper .ttl__jp {
  font-weight: 700;
  line-height: 1.4;
}
.dh_lp_wrapper .ttl--nav {
  font-size: max(12px, 1.941rem);
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .ttl--nav:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .ttl--sec {
  flex-direction: column;
  font-size: max(12px, 2.2rem);
  text-align: center;
}
.dh_lp_wrapper .ttl--sec .ttl__num {
  height: 3.6364em;
}
.dh_lp_wrapper .ttl--sec .ttl__jp {
  line-height: 1.4;
  margin-block: -0.33em -0.32em;
}
.dh_lp_wrapper .sec {
  padding-top: 18rem;
  scroll-margin-top: -6rem;
}
.dh_lp_wrapper .looks {
  margin-top: 3rem;
}
.dh_lp_wrapper .ttl--sec .ttl__num,
.dh_lp_wrapper .ttl--sec .ttl__jp {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dh_lp_wrapper .ttl--sec.is-shown .ttl__num,
.dh_lp_wrapper .ttl--sec.is-shown .ttl__jp {
  opacity: 1;
}
.dh_lp_wrapper .ttl--sec.is-shown .ttl__jp {
  transition-delay: 0.18s;
}
.dh_lp_wrapper .looks {
  opacity: 0;
  transform: translateY(-4rem);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.dh_lp_wrapper .looks.is-shown {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .ttl--sec .ttl__num,
  .dh_lp_wrapper .ttl--sec .ttl__jp,
  .dh_lp_wrapper .looks {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}
.dh_lp_wrapper .look {
  width: 72.34043%;
  margin-inline: auto;
  /* ブランドロゴ。幅と上下の余白はロゴごとに異なるため、
  Figma実測値を --logo-w（幅）／--logo-py（上下余白）で個別指定する。 */
  /* --- リード */
  /* --- 画像 */
  /* メイン画像。Figmaのトリミング（枠に対する画像の位置・サイズ）を
  --l / --t / --w / --h で受け取る。指定がなければ枠いっぱいにcover。 */
  /* --- サブ画像（2点） */
  /* --- アイテムクレジット */
}
.dh_lp_wrapper .look + .look {
  margin-top: 10rem;
}
.dh_lp_wrapper .look__logo {
  --logo-w: 27rem;
  --logo-py: 0;
  width: var(--logo-w);
  margin: 0 auto 4rem;
  padding-block: var(--logo-py);
}
.dh_lp_wrapper .look__logo img {
  width: 100%;
}
.dh_lp_wrapper .look__logo--mp {
  --logo-w: 19rem;
  --logo-py: 1rem;
}
.dh_lp_wrapper .look__logo--eu {
  --logo-w: 15rem;
  --logo-py: 0.5rem;
}
.dh_lp_wrapper .look__logo--ps {
  --logo-w: 19rem;
  --logo-py: 1rem;
}
.dh_lp_wrapper .look__logo--bs {
  --logo-w: 23rem;
  --logo-py: 0;
}
.dh_lp_wrapper .look__logo-eu {
  position: relative;
  display: block;
  aspect-ratio: 230/91;
}
.dh_lp_wrapper .look__logo-eu img {
  position: absolute;
  max-width: none;
}
.dh_lp_wrapper .look__logo-eu img:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
}
.dh_lp_wrapper .look__logo-eu img:nth-child(2) {
  top: 72.84%;
  left: 19.76%;
  width: 56.29%;
}
.dh_lp_wrapper .look__lead {
  width: 88.23529%;
  margin-inline: auto;
}
.dh_lp_wrapper .look__catch {
  margin-bottom: 1rem;
  font-size: max(12px, 1.8rem);
  font-weight: 700;
  line-height: 1.61111;
  text-align: center;
}
.dh_lp_wrapper .look__desc {
  font-size: max(12px, 1.6rem);
  font-weight: 400;
  line-height: 1.625;
}
.dh_lp_wrapper .look__kv {
  margin-top: 3rem;
}
.dh_lp_wrapper .look__img {
  position: relative;
  display: block;
  aspect-ratio: 680/851;
  overflow: hidden;
}
.dh_lp_wrapper .look__img img {
  position: absolute;
  top: var(--t, 0);
  left: var(--l, 0);
  width: var(--w, 100%);
  max-width: none;
  height: var(--h, 100%);
  object-fit: cover;
}
.dh_lp_wrapper .look__sub {
  display: flex;
  gap: 1.47059%;
  aspect-ratio: 700/370;
  margin-top: 1rem;
}
.dh_lp_wrapper .look__sub-item {
  flex: 1 0 0;
  min-width: 0;
}
.dh_lp_wrapper .look__sub-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dh_lp_wrapper .look__items {
  width: 58.82353%;
  margin: 4rem auto 0;
}
.dh_lp_wrapper .credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  /* 区切り線（セットアップ本体と、合わせたアイテムの間） */
}
.dh_lp_wrapper .credit + .credit {
  margin-top: 1.5rem;
}
.dh_lp_wrapper .credit + .credit--sep, .dh_lp_wrapper .credit--sep {
  margin-top: calc(1.5rem - 1px);
  padding-top: 1.5rem;
  border-top: 1px solid #c2b9a1;
}
.dh_lp_wrapper .credit__name {
  font-size: max(12px, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  font-feature-settings: "palt" 1;
}
.dh_lp_wrapper .credit__note {
  color: #808080;
  font-size: 12px;
}
.dh_lp_wrapper .credit__buy {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.6rem;
}
.dh_lp_wrapper .credit__price {
  font-size: max(12px, 1.4rem);
  line-height: 1;
}
.dh_lp_wrapper .credit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  background: #725916;
  color: #ffffff;
  font-family: "jubilat", serif;
  font-weight: 400;
  font-style: normal;
  font-weight: 300;
  font-size: max(12px, 1.4rem);
  line-height: 0.68;
  letter-spacing: 0.2rem;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .credit__btn:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 63.82979%;
  margin: 10rem auto 0;
}
.dh_lp_wrapper .trend__ttl {
  color: #725916;
  font-family: "jubilat", serif;
  font-weight: 400;
  font-style: normal;
  font-size: max(12px, 2.6rem);
  font-weight: 400;
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 0.9;
  margin-block: -0.195em -0.07em;
}
.dh_lp_wrapper .trend__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.66667%;
  row-gap: 3.5rem;
  width: 100%;
}
.dh_lp_wrapper .trend__more {
  padding-top: 4rem;
}
.dh_lp_wrapper .trend__more-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 0 0.5rem 1.2rem 0.2rem;
  border-bottom: 2px solid #725916;
  color: #725916;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .trend__more-link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .trend__more-brand {
  font-family: "jubilat", serif;
  font-weight: 400;
  font-style: normal;
  font-size: max(12px, 1.7rem);
  line-height: 0.82353;
}
.dh_lp_wrapper .trend__more-txt {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: max(12px, 1.8rem);
  font-weight: 700;
  line-height: 0.77778;
}
.dh_lp_wrapper .trend__arrow {
  flex: none;
  width: 1.1358rem;
}
.dh_lp_wrapper .rec__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.dh_lp_wrapper .rec__link:hover .rec__img img {
  opacity: 0.8;
}
.dh_lp_wrapper .rec__img {
  width: 100%;
}
.dh_lp_wrapper .rec__img img {
  width: 100%;
  aspect-ratio: 1000/1200;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .rec__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  padding-bottom: 0.6rem;
}
.dh_lp_wrapper .rec__name {
  font-size: max(12px, 1.4rem);
  letter-spacing: 0.105rem;
  line-height: 1.8;
  margin-block: -0.53em -0.52em;
}
.dh_lp_wrapper .rec__price {
  font-size: max(12px, 1.4rem);
  line-height: 1.17857;
  margin-block: -0.219285em -0.209285em;
}
.dh_lp_wrapper .marquee {
  padding-top: 18rem;
  /* 見える幅は690。中のトラックは左右にはみ出し、ここでクリップされる。 */
}
.dh_lp_wrapper .marquee__inner {
  width: 73.40426%;
  margin-inline: auto;
  overflow: hidden;
}
.dh_lp_wrapper .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 20s linear infinite;
}
.dh_lp_wrapper .marquee__set {
  display: flex;
  gap: 0.682rem;
  padding-right: 0.682rem;
}
.dh_lp_wrapper .marquee__item {
  flex: none;
  width: 23.5215rem;
}
.dh_lp_wrapper .marquee__item img {
  width: 100%;
  aspect-ratio: 235.215/252.377;
  object-fit: cover;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .marquee__track {
    animation: none;
  }
}
.dh_lp_wrapper .banners {
  display: flex;
  justify-content: center;
  gap: 2.12766%;
  padding-top: 12rem;
}
.dh_lp_wrapper .banners__item {
  width: 28.7234%;
}
.dh_lp_wrapper .banners__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 9rem;
  padding: 2rem 0 1.5rem;
  box-sizing: border-box;
  border: 1px solid #4c4c4c;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .banners__link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .banners__logo {
  flex: none;
  width: 62.96296%;
  /* SANYO Style MAGAZINE は3つのSVG（SANYO／Style／MAGAZINE）で構成 */
}
.dh_lp_wrapper .banners__logo img {
  width: 100%;
}
.dh_lp_wrapper .banners__logo--ssm {
  position: relative;
  aspect-ratio: 170/18;
}
.dh_lp_wrapper .banners__logo--ssm img {
  position: absolute;
  max-width: none;
}
.dh_lp_wrapper .banners__logo--ssm img:nth-child(1) {
  top: 0;
  left: 0;
  width: 32.02%;
}
.dh_lp_wrapper .banners__logo--ssm img:nth-child(2) {
  top: 21.68%;
  left: 34.45%;
  width: 16.09%;
}
.dh_lp_wrapper .banners__logo--ssm img:nth-child(3) {
  top: 3.22%;
  left: 52.96%;
  width: 47.04%;
}
.dh_lp_wrapper .banners__txt {
  font-size: max(12px, 1.3rem);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  margin-block: -0.13em -0.12em;
}
.dh_lp_wrapper .pagetop {
  padding: 10rem 0;
  text-align: center;
}
.dh_lp_wrapper .pagetop__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: #4c4c4c;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .pagetop__link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .pagetop__arrow {
  width: 1.1rem;
  transform: rotate(180deg);
}
.dh_lp_wrapper .pagetop__txt {
  font-family: "jubilat", serif;
  font-weight: 400;
  font-style: normal;
  font-size: max(12px, 1.8rem);
  line-height: 1.83333;
}
@media screen and (max-width: 786px) {
  .dh_lp_wrapper {
    padding-bottom: 6rem;
    /* ---------------------------------------------------------------- MV
    アートボード 786 x 952。上34%がゴールドの帯、その下が写真。
    写真はトルソーと平置きを1枚にまとめたSP専用の画像（1572 x 1254／
    クロップ済み）で、index.html の <picture> で差し替えている。
    タイトルは帯と写真の境目にまたがる。PC用のトルソー写真と影は使わない。
    位置・サイズはSPカンプの書き出し画像（303 x 367）からの実測値。     */
    /* 写真は帯の下にそのまま敷く（クロップ済みなのでトリミングはしない） */
    /* ------------------------------------------------------------- リード */
    /* --------------------------------------------------- セクション部分 */
    /* ------------------------------------------------- ローカルナビ（横並び）
    和文と黒ベタの枠は出さず、番号だけを横に5つ並べる。区切りは縦線。
    画面下部の固定バーとしてだけ表示する（リード直下には置かない）。
    セクション01が画面に入ったら script.js が .is-in を付け、下からスライド
    インさせる。01より上に戻ると下へ引っ込む。
    .localnav 自身は流れの中で場所を取らないよう、高さ・余白を0にしている。 */
    /* 下部固定バー。Figma「左側」：高さ60／上15・下30・左右20の余白。影なし。
    隠れている間は visibility: hidden にして、タップやフォーカスが当たらない
    ようにする（引っ込むアニメーションが終わってから切り替える）。        */
    /* Figmaの区切り線は幅0のベクター。線の1pxぶん項目が広がらないよう打ち消す */
    /* ------------------------------------------------------- セクション */
    /* LOOKの外枠は画像の幅（335）。テキストとクレジットはその内側（295） */
    /* ロゴはPCの0.7倍 */
    /* ------------------------------------------------------- クレジット */
    /* --------------------------------------------- トレンド／レコメンド */
    /* --------------------------------------------------- 変化セクション */
    /* 親（白カラム 355）と同じ幅にする */
    /* 1セットが窓に対して長くなるぶん、PCと同じ見た目の速度になるよう延ばす */
    /* --------------------------------------------------------- バナー */
    /* ------------------------------------------------------- PAGE TOP */
  }
  .dh_lp_wrapper .u-sp {
    display: inline;
  }
  .dh_lp_wrapper .u-pc {
    display: none;
  }
  .dh_lp_wrapper .mv {
    aspect-ratio: 786/952;
  }
  .dh_lp_wrapper .mv__bg,
  .dh_lp_wrapper .mv__shadow {
    display: none;
  }
  .dh_lp_wrapper .mv__bg2 {
    top: 34.2%;
    left: 0;
    width: 100%;
    height: 65.8%;
  }
  .dh_lp_wrapper .mv__bg2 img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dh_lp_wrapper .mv__band {
    width: 100%;
    height: 34.2%;
  }
  .dh_lp_wrapper .mv__label {
    left: 80.53%;
    width: 15.51%;
  }
  .dh_lp_wrapper .mv__text {
    top: 13.62%;
    left: 5.78%;
    width: 80.53%;
  }
  .dh_lp_wrapper .lead {
    padding: 7rem 0;
  }
  .dh_lp_wrapper .lead__ttl {
    font-size: clamp(12px, 1.8rem, 18px);
  }
  .dh_lp_wrapper .lead__body {
    margin-top: 3rem;
    padding-inline: 2rem;
  }
  .dh_lp_wrapper .lead__txt {
    font-size: clamp(12px, 1.4rem, 14px);
    text-align: left;
  }
  .dh_lp_wrapper .contents {
    display: block;
    padding-inline: 0;
  }
  .dh_lp_wrapper .contents__main {
    width: auto;
    margin-inline: 1rem;
  }
  .dh_lp_wrapper .localnav {
    position: static;
    top: auto;
    height: 0;
    margin: 0;
    padding: 0;
  }
  .dh_lp_wrapper .localnav__list {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 6rem;
    padding: 1.5rem 2rem 3rem;
    background: #a5925f;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0.45s;
  }
  .dh_lp_wrapper .localnav.is-in .localnav__list {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }
  .dh_lp_wrapper .localnav__item {
    display: flex;
  }
  .dh_lp_wrapper .localnav__item + .localnav__item {
    margin-left: -1px;
    border-left: 1px solid #000000;
  }
  .dh_lp_wrapper .ttl--nav {
    position: relative;
    gap: 0;
    padding-inline: 2.5rem;
    font-size: clamp(12px, 1.6rem, 16px);
    /* 見た目は高さ15のまま、タップできる範囲だけバーの高さいっぱいに広げる */
    /* 数字は大文字の高さ基準で区切り線（高さ15）の上下中央に置く */
  }
  .dh_lp_wrapper .ttl--nav::after {
    content: "";
    position: absolute;
    inset: -1.5rem 0 -3rem;
  }
  .dh_lp_wrapper .ttl--nav .ttl__jp {
    display: none;
  }
  .dh_lp_wrapper .ttl--nav .ttl__num {
    width: auto;
    height: auto;
  }
  .dh_lp_wrapper .ttl--nav .ttl__num::before, .dh_lp_wrapper .ttl--nav .ttl__num::after {
    display: none;
  }
  .dh_lp_wrapper .ttl--nav .ttl__num-inner {
    display: block;
    flex: none;
    background: none;
    color: #000000;
    font-size: 1em;
    line-height: 1;
    margin-block: -0.245em -0.12em;
  }
  .dh_lp_wrapper .ttl--sec {
    font-size: clamp(12px, 1.8rem, 18px);
  }
  .dh_lp_wrapper .sec {
    padding-top: 8rem;
    scroll-margin-top: -4rem;
  }
  .dh_lp_wrapper .looks {
    margin-top: 3rem;
  }
  .dh_lp_wrapper .look {
    width: 94.3662%;
  }
  .dh_lp_wrapper .look + .look {
    margin-top: 8rem;
  }
  .dh_lp_wrapper .look__logo {
    --logo-w: 18.9rem;
    margin-bottom: 3rem;
  }
  .dh_lp_wrapper .look__logo--mp, .dh_lp_wrapper .look__logo--ps {
    --logo-w: 13.3rem;
    --logo-py: 0.7rem;
  }
  .dh_lp_wrapper .look__logo--eu {
    --logo-w: 10.5rem;
    --logo-py: 0.35rem;
  }
  .dh_lp_wrapper .look__logo--bs {
    --logo-w: 16.1rem;
  }
  .dh_lp_wrapper .look__lead {
    width: 88.0597%;
  }
  .dh_lp_wrapper .look__catch {
    font-size: clamp(12px, 1.6rem, 16px);
  }
  .dh_lp_wrapper .look__desc {
    font-size: clamp(12px, 1.4rem, 14px);
    line-height: 1.8;
  }
  .dh_lp_wrapper .look__kv {
    margin-top: 3rem;
  }
  .dh_lp_wrapper .look__sub {
    gap: 1.79104%;
    margin-top: 0.6rem;
  }
  .dh_lp_wrapper .look__items {
    width: 88.0597%;
    margin-top: 4rem;
  }
  .dh_lp_wrapper .credit {
    gap: 1rem;
  }
  .dh_lp_wrapper .credit + .credit {
    margin-top: 1.4rem;
  }
  .dh_lp_wrapper .credit + .credit--sep, .dh_lp_wrapper .credit--sep {
    margin-top: calc(1.6rem - 1px);
    padding-top: 1.6rem;
  }
  .dh_lp_wrapper .credit__name,
  .dh_lp_wrapper .credit__price,
  .dh_lp_wrapper .credit__btn {
    font-size: clamp(12px, 1.2rem, 12px);
  }
  .dh_lp_wrapper .credit__buy {
    gap: 1.2rem;
  }
  .dh_lp_wrapper .credit__btn {
    width: 5.5rem;
    height: 2.5rem;
    padding: 0;
    letter-spacing: 0.15rem;
  }
  .dh_lp_wrapper .trend {
    gap: 4rem;
    width: 90.86789%;
    margin-top: 8rem;
  }
  .dh_lp_wrapper .trend__ttl {
    font-size: clamp(12px, 2rem, 20px);
  }
  .dh_lp_wrapper .trend__list {
    column-gap: 2.48%;
    row-gap: 2.4rem;
  }
  .dh_lp_wrapper .rec__link {
    gap: 1.4rem;
  }
  .dh_lp_wrapper .rec__body {
    gap: 1.2rem;
  }
  .dh_lp_wrapper .rec__name,
  .dh_lp_wrapper .rec__price {
    font-size: clamp(12px, 1.2rem, 12px);
  }
  .dh_lp_wrapper .rec__name {
    letter-spacing: 0.05rem;
  }
  .dh_lp_wrapper .trend__more {
    padding-top: 0;
  }
  .dh_lp_wrapper .trend__more-link {
    gap: 1.4rem;
    padding-bottom: 1rem;
  }
  .dh_lp_wrapper .trend__more-brand {
    font-size: clamp(12px, 1.3rem, 13px);
    line-height: 1;
  }
  .dh_lp_wrapper .trend__more-txt {
    gap: 0.8rem;
    font-size: clamp(12px, 1.4rem, 14px);
    line-height: 1;
  }
  .dh_lp_wrapper .trend__arrow {
    width: 0.9rem;
  }
  .dh_lp_wrapper .marquee {
    padding-top: 8rem;
  }
  .dh_lp_wrapper .marquee__inner {
    width: auto;
    margin-inline: 0;
  }
  .dh_lp_wrapper .marquee__track {
    animation-duration: 26s;
  }
  .dh_lp_wrapper .marquee__set {
    gap: 0.4502rem;
    padding-right: 0.4502rem;
  }
  .dh_lp_wrapper .marquee__item {
    width: 15.5292rem;
  }
  .dh_lp_wrapper .banners {
    gap: 1rem;
    width: 94.3662%;
    margin-inline: auto;
    padding-top: 8rem;
  }
  .dh_lp_wrapper .banners__item {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
  }
  .dh_lp_wrapper .banners__link {
    gap: 0.8rem;
    height: 6.4rem;
    padding: 1.4rem 0 1rem;
  }
  .dh_lp_wrapper .banners__logo {
    width: 80%;
  }
  .dh_lp_wrapper .banners__txt {
    font-size: 12px;
  }
  .dh_lp_wrapper .pagetop {
    padding: 6rem 0;
  }
  .dh_lp_wrapper .pagetop__txt {
    font-size: clamp(12px, 1.6rem, 16px);
  }
}

.pf-color-scheme-1 {
  background-color: #fcf7ed;
  padding-bottom: 5rem;
}

/*# sourceMappingURL=style.css.map */