@charset "UTF-8";
/* =========================================================================
   三陽商会 SSM 20260909 / How To Start AUTUMN
   PC（787px以上）専用。786px以下のSPレイアウトは別途実装。
   - アートボード幅 1920px を基準に、ルートフォントサイズを vw で可変
     （1rem = 10px @1920px）→ px値は rem() で指定すれば画面幅に追従
   - 各要素の「幅」は原則 % 指定
   ========================================================================= */
/* -------------------------------------------------- function */
/* -------------------------------------------------- tokens */
/* MVの表示アニメーション
   再生順は ①タイトル・サブコピー → ③背景写真 → ②hello               */
/* SPの③（背景写真）だけ、ふわっと出るように別値を使う。
   PCと同じ移動量だと画面幅に対して大きすぎ（80/375 ＝ 約21%）動きが速く見えるため、
   距離を短く・時間を長く・立ち上がりの緩いイージングにしている。            */
/* スクロールに合わせた表示アニメーション
   画面内に入った要素へ script.js が .is-shown を付ける。
   セクション見出しは位置を変えず、左のパーツから順にフェードイン。
   そのあとLOOK群が上から降りてくる。                                  */
/* 主要カラム（1920px基準）
   ローカルナビ : left 200 / width 590 ／ メインカラム : left 790 / width 930
   .contents を「左右200pxパディング＋横並び」で組んでいるため、
   実際に使うのは左右パディング値のみ。ナビ590はフレックスの余りで確保する。 */
/* ルートフォントサイズ（このLP全体の拡大率の基準）
   rem は「ルート要素＝html」基準の単位なので、この指定だけは
   .dh_lp_wrapper の中に置けない。中に書くと `.dh_lp_wrapper html` という
   絶対にマッチしないセレクタになり、rem() が全部ブラウザ既定の16px基準
   （＝カンプの1.6倍）になって画面幅にも追従しなくなる。
   PC・SPの3状態をここ1箇所にまとめてある。                            */
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: #fcf7ed;
  color: #532a1b;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.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 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 {
  /* SPだけで入れる改行（PCでは無効化する） */
}
.dh_lp_wrapper .u-sp {
  display: none;
}
.dh_lp_wrapper {
  /* =========================================================================
     MV
     Figmaアートボード 1920 x 850。
     アニメーションを個別に付けられるよう、画像1枚ではなく要素ごとに実装する。
     位置・サイズはすべて 1920 x 850 に対する % で指定（画面幅に追従）。
     ========================================================================= */
}
.dh_lp_wrapper .mv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/850;
  overflow: hidden;
  background: #fcf7ed;
  /* --- 背景写真（左上r200・右下r150／下端はMV枠でトリミング） */
}
.dh_lp_wrapper .mv__bg {
  position: absolute;
  top: 8.47059%;
  left: 34.11458%;
  width: 74.27083%;
  height: 114.23529%;
  overflow: hidden;
  border-radius: 20rem 0 15rem 0;
}
.dh_lp_wrapper .mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.dh_lp_wrapper .mv {
  /* --- ロゴ（SANYO Style MAGAZINE） */
}
.dh_lp_wrapper .mv__logo {
  position: absolute;
  top: 6.82353%;
  left: 2.70833%;
  width: 12.53%;
}
.dh_lp_wrapper .mv__logo img {
  width: 100%;
}
.dh_lp_wrapper .mv {
  /* --- タイトル */
}
.dh_lp_wrapper .mv__howto {
  position: absolute;
  top: 37.83165%;
  left: 10.67708%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 19.41635%;
  height: 8.01765%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.dh_lp_wrapper .mv__howto span {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-transform: skewX(-9deg) scaleY(0.99);
          transform: skewX(-9deg) scaleY(0.99);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 6.717rem;
  font-weight: 500;
  line-height: 1.02245;
  color: #a10000;
  white-space: nowrap;
}
.dh_lp_wrapper .mv__autumn {
  position: absolute;
  top: 49.62176%;
  left: 10.42253%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 13.06rem;
  font-weight: 600;
  line-height: 0.83833;
  color: #a10000;
  white-space: nowrap;
}
.dh_lp_wrapper .mv__autumn span:nth-child(1) {
  letter-spacing: -0.27413rem;
}
.dh_lp_wrapper .mv__autumn span:nth-child(2) {
  letter-spacing: 0.40458rem;
}
.dh_lp_wrapper .mv__autumn span:nth-child(3) {
  letter-spacing: 0.3rem;
}
.dh_lp_wrapper .mv__autumn span:nth-child(4) {
  letter-spacing: 0.2rem;
}
.dh_lp_wrapper .mv__autumn span:nth-child(5) {
  letter-spacing: 0.51373rem;
}
.dh_lp_wrapper .mv__autumn span:nth-child(6) {
  letter-spacing: 0.2rem;
}
.dh_lp_wrapper .mv {
  /* --- サブコピー */
}
.dh_lp_wrapper .mv__marker {
  position: absolute;
  top: 61.86%;
  left: 29.01%;
  width: 6.82%;
  height: 1.76%;
  background: #ffffff;
}
.dh_lp_wrapper .mv__sub {
  position: absolute;
  top: 60.82353%;
  left: 15.36458%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3rem;
  font-weight: 400;
  line-height: 0.8453;
  letter-spacing: 0.49559rem;
  color: #2c1107;
  white-space: nowrap;
}
.dh_lp_wrapper .mv__sub span:nth-child(2) {
  letter-spacing: 0.60569rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(4) {
  letter-spacing: 0.28549rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(5) {
  letter-spacing: 0.60064rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(6) {
  letter-spacing: -0.55997rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(8) {
  letter-spacing: 0.59559rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(9) {
  letter-spacing: 0.60064rem;
}
.dh_lp_wrapper .mv__sub span:nth-child(10) {
  font-size: 2.7rem;
  font-weight: 800;
}
.dh_lp_wrapper .mv__rule {
  position: absolute;
  top: 61.17647%;
  left: 10.57292%;
  width: 3.46354%;
  border-top: 1px solid #7f7f7f;
}
.dh_lp_wrapper .mv {
  /* --- Hello, new season. */
}
.dh_lp_wrapper .mv__hello {
  position: absolute;
  top: 70.17412%;
  left: 29.75433%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 12.68915%;
  height: 9.80421%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.dh_lp_wrapper .mv__hello span {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-transform: rotate(-8.14deg);
          transform: rotate(-8.14deg);
  font-family: "Tangerine", cursive;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: #a10000;
  white-space: nowrap;
}
.dh_lp_wrapper .mv__hello-line {
  position: absolute;
  top: 71.71988%;
  left: 30.39089%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 11.9897%;
  height: 4.7917%;
}
.dh_lp_wrapper .mv__hello-line img {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 99.742%;
  -webkit-transform: rotate(-4.33deg);
          transform: rotate(-4.33deg);
}
.dh_lp_wrapper .mv {
  /* --- 表示アニメーション
     ① タイトル・サブコピー（フェード）   1番目
     ③ 背景写真（左からフェードイン）      2番目
     ② hello（フェード）                   3番目
     の順に再生する。速度・間を変えるときは $mv-anim-* だけ触ればよい。 */
}
.dh_lp_wrapper .mv__howto, .dh_lp_wrapper .mv__autumn, .dh_lp_wrapper .mv__marker, .dh_lp_wrapper .mv__sub {
  -webkit-animation: mv-fade 0.8s ease 0.2s both;
          animation: mv-fade 0.8s ease 0.2s both;
}
.dh_lp_wrapper .mv__hello-line, .dh_lp_wrapper .mv__hello {
  -webkit-animation: mv-fade 0.8s ease 1.6s both;
          animation: mv-fade 0.8s ease 1.6s both;
}
.dh_lp_wrapper .mv__bg {
  --mv-bg-x: -8rem;
  -webkit-animation: mv-fade-in-left 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
          animation: mv-fade-in-left 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
}
@-webkit-keyframes mv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dh_lp_wrapper {
  /* 移動量は --mv-bg-x で持たせる（PCとSPで距離を変えるため） */
}
@-webkit-keyframes mv-fade-in-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(var(--mv-bg-x));
            transform: translateX(var(--mv-bg-x));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes mv-fade-in-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(var(--mv-bg-x));
            transform: translateX(var(--mv-bg-x));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.dh_lp_wrapper {
  /* モーションを減らす設定の場合はアニメーションせず最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .mv__howto,
  .dh_lp_wrapper .mv__autumn,
  .dh_lp_wrapper .mv__marker,
  .dh_lp_wrapper .mv__sub,
  .dh_lp_wrapper .mv__hello-line,
  .dh_lp_wrapper .mv__hello,
  .dh_lp_wrapper .mv__bg {
    -webkit-animation: none;
            animation: none;
  }
}
.dh_lp_wrapper {
  /* =========================================================================
     リード
     ========================================================================= */
}
.dh_lp_wrapper .lead {
  padding: 12rem 0;
  text-align: center;
}
.dh_lp_wrapper .lead__ttl {
  font-size: 2.4rem;
  color: #532a1b;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.105rem;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.dh_lp_wrapper .lead__body {
  margin-top: 3rem;
}
.dh_lp_wrapper .lead__txt {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.105rem;
}
.dh_lp_wrapper .lead__txt + .lead__txt {
  margin-top: 2rem;
}
.dh_lp_wrapper {
  /* =========================================================================
     セクション部分（左：ローカルナビ／右：コンテンツ）
     ========================================================================= */
  /* Figma「セクション部分」と同じ組み方（左右200pxの余白＋左ナビ590／右930）。
     ローカルナビを position: sticky で効かせるため、フロートや絶対配置ではなく
     横並びのフレックスにしている。align-items: flex-start は必須
     （stretch だとナビの高さがカラム全体になり sticky が動かなくなる）。      */
}
.dh_lp_wrapper .contents {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: 10.41667%;
  /* メインカラム（Figma「右側」930幅）は白ベタ。
     ページ全体の背景 $c-bg（#fcf7ed）に対してこのカラムだけ白く抜く。
     START.1の上端から PAGE TOP の下端までが白。
     ※幅の%は .contents のコンテンツ幅（1920 - 200×2 = 1520）基準        */
}
.dh_lp_wrapper .contents__main {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 61.18421%;
  background: #ffffff;
}
.dh_lp_wrapper .localnav {
  position: sticky;
  top: calc(50vh - 16.8rem);
  z-index: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
  /* stickyは「はみ出さない範囲」の下端（＝.contentsの下端）で止まるので、
     何もしないと最下部までスクロールしたときナビが白カラムの一番下に密着する。
     margin-bottom のぶんだけ手前で止まるようになり、下の余白が残る。
     .contents は align-items: flex-start なので、この余白を足しても
     カラム全体の高さ（＝.contents__main の高さ）は変わらない。            */
  margin-bottom: 12rem;
}
.dh_lp_wrapper .localnav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
}
.dh_lp_wrapper {
  /* =========================================================================
     タイトル（ローカルナビ／セクション見出し 共通コンポーネント）
     ※ 1em = 和文タイトルのフォントサイズ
     ========================================================================= */
}
.dh_lp_wrapper .ttl {
  --ttl-color: #532a1b;
  --ttl-bar: #a10000;
  --ttl-num: #532a1b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.0714em;
  height: 2.5714em;
  color: var(--ttl-color);
  /* --- 左のライン */
}
.dh_lp_wrapper .ttl__bar {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  width: 0.2857em;
  background: var(--ttl-bar);
}
.dh_lp_wrapper .ttl {
  /* --- How To START.n */
}
.dh_lp_wrapper .ttl__en {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  gap: 0.5714em;
}
.dh_lp_wrapper .ttl__en-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.dh_lp_wrapper .ttl {
  /* 斜体。Figmaはイタリック字形ではなくローマン体の「skewX(-11.37°)＋scaleY(0.98)」。
     font-style: italic だと字形そのもの（a・w など）が変わって字幅も動くため、
     MV（.mv__howto span）と同じくtransformで傾ける。
     .ttl__en-inner が flex のため、この要素はブロック化されていてtransformが効く。
     transformはレイアウトに影響しないので、周囲の位置はFigmaどおりのまま。   */
}
.dh_lp_wrapper .ttl__howto {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.0489em;
  font-weight: 500;
  line-height: 0.6;
  text-transform: capitalize;
  -webkit-transform: skewX(-11.37deg) scaleY(0.98);
          transform: skewX(-11.37deg) scaleY(0.98);
}
.dh_lp_wrapper .ttl__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.15em;
  margin-top: 0.1071em;
}
.dh_lp_wrapper .ttl__start {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.4985em;
  font-weight: 700;
  line-height: 0.62;
  text-transform: capitalize;
}
.dh_lp_wrapper .ttl__num {
  color: var(--ttl-num);
  font-family: "Aboreto", "Cormorant Garamond", serif;
  font-size: 1.8929em;
  font-weight: 400;
  line-height: 0.698;
  letter-spacing: 0.0962rem;
}
.dh_lp_wrapper .ttl__dot {
  font-size: 0.7736em;
}
.dh_lp_wrapper .ttl {
  /* --- 和文 */
}
.dh_lp_wrapper .ttl__jp {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.0714em;
}
.dh_lp_wrapper .ttl {
  /* --- ローカルナビ用 */
}
.dh_lp_wrapper .ttl--nav {
  --ttl-color: #bca69e;
  --ttl-bar: #bca69e;
  --ttl-num: #bca69e;
  font-size: 2.8rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.dh_lp_wrapper .ttl--nav .ttl__bar {
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.dh_lp_wrapper .ttl--nav {
  /* 数字は .ttl__num 自身が色を持っていて a の color を継承しないため、
     上の transition: color が効かない。個別に指定する。               */
}
.dh_lp_wrapper .ttl--nav .ttl__num {
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.dh_lp_wrapper .ttl--nav {
  /* 未選択の項目にホバーしたときだけ中間色にする。
     .is-current との併用はありえないので詳細度の衝突は起きない。      */
}
.dh_lp_wrapper .ttl--nav:not(.is-current):hover {
  --ttl-color: #a75c58;
  --ttl-bar: #a75c58;
  --ttl-num: #af534f;
}
.dh_lp_wrapper .ttl--nav.is-current {
  --ttl-color: #911111;
  --ttl-bar: #911111;
  --ttl-num: #a10000;
}
.dh_lp_wrapper .ttl {
  /* --- セクション見出し用 */
}
.dh_lp_wrapper .ttl--sec {
  font-size: 3.6278rem;
}
.dh_lp_wrapper .ttl--sec .ttl__num {
  font-size: 2.0603em;
  line-height: 0.6957;
  letter-spacing: 0;
}
.dh_lp_wrapper .ttl--sec .ttl__dot {
  font-size: 0.636em;
}
.dh_lp_wrapper {
  /* =========================================================================
     セクション
     ========================================================================= */
}
.dh_lp_wrapper .sec {
  padding-top: 14rem;
  scroll-margin-top: 6rem;
}
.dh_lp_wrapper .looks {
  margin-top: 10rem;
}
.dh_lp_wrapper {
  /* --- 表示アニメーション
     初期状態はCSSで隠しておき、画面内に入ったら script.js が .is-shown を付ける。
     見出しは位置を動かさず、左の罫線 → 欧文（How To / START.n）→ 和文 の順に
     $reveal-step ずつ遅らせてフェードさせる（左から順に現れて見える）。
     LOOK群はそのあと、$reveal-delay ぶん遅れて上から降りてくる。          */
}
.dh_lp_wrapper .ttl--sec .ttl__bar,
.dh_lp_wrapper .ttl--sec .ttl__en-inner,
.dh_lp_wrapper .ttl--sec .ttl__jp {
  opacity: 0;
  -webkit-transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dh_lp_wrapper .ttl--sec.is-shown .ttl__bar,
.dh_lp_wrapper .ttl--sec.is-shown .ttl__en-inner,
.dh_lp_wrapper .ttl--sec.is-shown .ttl__jp {
  opacity: 1;
}
.dh_lp_wrapper .ttl--sec.is-shown .ttl__en-inner {
  -webkit-transition-delay: 0.18s;
          transition-delay: 0.18s;
}
.dh_lp_wrapper .ttl--sec.is-shown .ttl__jp {
  -webkit-transition-delay: 0.36s;
          transition-delay: 0.36s;
}
.dh_lp_wrapper .looks {
  opacity: 0;
  -webkit-transform: translateY(-4rem);
          transform: translateY(-4rem);
  -webkit-transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s, -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s, -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
  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;
  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, -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.dh_lp_wrapper .looks.is-shown {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.dh_lp_wrapper {
  /* 動きを減らす設定のときは、動かさずそのまま見せる */
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .ttl--sec .ttl__bar,
  .dh_lp_wrapper .ttl--sec .ttl__en-inner,
  .dh_lp_wrapper .ttl--sec .ttl__jp,
  .dh_lp_wrapper .looks {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
    transition: none;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
}
.dh_lp_wrapper {
  /* -------------------------------------------------- LOOK */
}
.dh_lp_wrapper .look + .look {
  margin-top: 14rem;
}
.dh_lp_wrapper .look {
  /* --- メインビジュアル */
}
.dh_lp_wrapper .look__main {
  position: relative;
  width: 74.19355%;
  margin-inline: auto;
}
.dh_lp_wrapper .look {
  /* ブランドロゴ。高さも画像への重なり量もロゴごとに異なるため、
     Figma実測値を --logo-h（高さ）／--logo-ov（重なり）で個別指定する。 */
}
.dh_lp_wrapper .look__logo {
  --logo-h: 4.8rem;
  --logo-ov: 2.6rem;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: var(--logo-h);
  margin-bottom: calc(var(--logo-ov) * -1);
}
.dh_lp_wrapper .look__logo img {
  width: auto;
  height: 100%;
}
.dh_lp_wrapper .look__logo--sm {
  --logo-h: 4.5rem;
  --logo-ov: 2.4rem;
}
.dh_lp_wrapper .look__logo--md {
  --logo-h: 5.1rem;
  --logo-ov: 2.6rem;
}
.dh_lp_wrapper .look__logo--lg {
  --logo-h: 10.8rem;
  --logo-ov: 4.3rem;
}
.dh_lp_wrapper .look__logo--xl {
  --logo-h: 12.6rem;
  --logo-ov: 4.8rem;
}
.dh_lp_wrapper .look__logo {
  /* 上のsm〜xlの並びに収まらない3ブランドは、
     ブランド頭文字の修飾子で個別に持たせる。 */
}
.dh_lp_wrapper .look__logo--ps {
  --logo-h: 5.2rem;
  --logo-ov: 2.6rem;
}
.dh_lp_wrapper .look__logo--mp {
  --logo-h: 7.4rem;
  --logo-ov: 3.9rem;
}
.dh_lp_wrapper .look__logo--se {
  --logo-h: 11.9rem;
  --logo-ov: 4.8rem;
}
.dh_lp_wrapper .look__img {
  display: block;
}
.dh_lp_wrapper .look__img img {
  width: 100%;
  aspect-ratio: 690/776.25;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20rem 0 0 0;
}
.dh_lp_wrapper .look {
  /* サブ画像が続かないLOOK（Paul Stuart / EPOCA / AMACA / CAST:）は
     メイン画像でブロックが終わるので、右下も丸める。
     詳細度は上の &__img img と同じなので、必ずこの順（あと出し）で書く。   */
}
.dh_lp_wrapper .look__img--round img {
  border-radius: 20rem 0 20rem 0;
}
.dh_lp_wrapper .look {
  /* メイン画像を2枚重ねて自動クロスフェード（script.js の .js-subswitch）。
     サブ画像1点目（.look__sub-item--switch）とまったく同じ仕組み。
     img を absolute にすると高さが出ないので、コンテナ自身に画像と同じ比率を持たせる。
     角丸・object-fit は上の2つがそのまま効くので、ここでは触らない。      */
}
.dh_lp_wrapper .look__img--switch {
  position: relative;
  aspect-ratio: 690/776.25;
}
.dh_lp_wrapper .look__img--switch img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease;
}
.dh_lp_wrapper .look__img--switch img.is-active {
  opacity: 1;
}
.dh_lp_wrapper .look {
  /* --- サブ画像（2点） */
}
.dh_lp_wrapper .look__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.44928%;
  width: 74.19355%;
  margin: 1rem auto 0;
}
.dh_lp_wrapper .look__sub-item {
  width: 49.27536%;
}
.dh_lp_wrapper .look__sub-item img {
  width: 100%;
  aspect-ratio: 340/364.64;
  -o-object-fit: cover;
     object-fit: cover;
}
.dh_lp_wrapper .look {
  /* 1点目のサブ画像は2枚重ねて自動クロスフェード（script.js の .js-subswitch）。
     枠が潰れないよう、li 自身に画像と同じアスペクト比を持たせる。 */
}
.dh_lp_wrapper .look__sub-item--switch {
  position: relative;
  aspect-ratio: 340/364.64;
}
.dh_lp_wrapper .look__sub-item--switch img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease;
}
.dh_lp_wrapper .look__sub-item--switch img.is-active {
  opacity: 1;
}
.dh_lp_wrapper .look {
  /* --- リード */
}
.dh_lp_wrapper .look__lead {
  position: relative;
  width: 73.9785%;
  margin: 5rem auto 0;
}
.dh_lp_wrapper .look {
  /* Point（筆記体＋手書き風の下線）。
     Tangerineをアウトライン化してSVG1枚にまとめてある。
     位置・サイズはFigmaのグループ（101.178 x 96.055 / left -3.02 / top -39.93）どおり。 */
}
.dh_lp_wrapper .look__point {
  position: absolute;
  top: -3.993rem;
  left: -0.4387%;
  width: 14.7061%;
}
.dh_lp_wrapper .look__point img {
  width: 100%;
}
.dh_lp_wrapper .look__catch {
  width: 86.9186%;
  margin-inline: auto;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.105rem;
  text-align: center;
}
.dh_lp_wrapper .look__desc {
  width: 86.9186%;
  margin: 2.4rem auto 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.105rem;
  text-align: justify;
}
.dh_lp_wrapper .look {
  /* --- アイテムクレジット */
}
.dh_lp_wrapper .look__items {
  width: 43.01075%;
  margin: 5rem auto 0;
}
.dh_lp_wrapper {
  /* キャッチ内のアクセント。文字色に加えて、マーカーで引いたような下線が入る。
     Figma実測：色 color/マーカー、高さ12px、インラインボックスの下端に揃う。   */
}
.dh_lp_wrapper .is-accent {
  color: #a10000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#faeded), to(#faeded));
  background-image: linear-gradient(#faeded, #faeded);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.2rem;
}
.dh_lp_wrapper {
  /* -------------------------------------------------- クレジット */
}
.dh_lp_wrapper .credit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.dh_lp_wrapper .credit + .credit {
  margin-top: 1.5rem;
}
.dh_lp_wrapper .credit--main {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.dh_lp_wrapper .credit__name {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2rem;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}
.dh_lp_wrapper .credit__buy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
}
.dh_lp_wrapper .credit__price {
  font-family: "Aboreto", "Cormorant Garamond", serif;
  font-size: 1.6rem;
  line-height: 0.69;
}
.dh_lp_wrapper .credit__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.6rem 1.5rem;
  background: #532a1b;
  color: #ffffff;
  font-family: "Aboreto", "Cormorant Garamond", serif;
  font-size: 1.6rem;
  line-height: 0.69;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .credit__btn:hover {
  opacity: 0.7;
}
.dh_lp_wrapper {
  /* =========================================================================
     トレンド（Recommend Items）
     ========================================================================= */
}
.dh_lp_wrapper .trend {
  width: 86.02151%;
  margin: 12rem auto 0;
}
.dh_lp_wrapper .trend__ttl {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  color: #532a1b;
}
.dh_lp_wrapper .trend__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 3.125%;
     -moz-column-gap: 3.125%;
          column-gap: 3.125%;
  row-gap: 4rem;
  width: 80%;
  margin: 5.8rem auto 0;
}
.dh_lp_wrapper .trend__more {
  margin-top: 9rem;
  text-align: center;
}
.dh_lp_wrapper .trend__more-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #532a1b;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 0.875;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .trend__more-link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .trend__arrow {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 0.6rem;
  height: 0.8rem;
}
.dh_lp_wrapper {
  /* -------------------------------------------------- レコメンドカード */
}
.dh_lp_wrapper .rec {
  width: 48.4375%;
}
.dh_lp_wrapper .rec__link {
  display: block;
  text-align: center;
}
.dh_lp_wrapper .rec__link:hover .rec__img img {
  opacity: 0.8;
}
.dh_lp_wrapper .rec__img img {
  width: 100%;
  aspect-ratio: 310/372;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .rec__brand {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.105rem;
}
.dh_lp_wrapper .rec__name {
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.105rem;
}
.dh_lp_wrapper .rec__price {
  margin-top: 0.6rem;
  font-family: "Aboreto", "Cormorant Garamond", serif;
  font-size: 1.6rem;
  line-height: 1.03;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
.dh_lp_wrapper {
  /* =========================================================================
     変化セクション（横スクロール）
     ========================================================================= */
}
.dh_lp_wrapper .marquee {
  padding-top: 14rem;
  /* 見える幅は690（LOOKのKVと同幅）。
     中のトラックは800幅で左右に55pxずつはみ出し、ここでクリップされる。 */
}
.dh_lp_wrapper .marquee__inner {
  width: 74.19355%;
  margin-inline: auto;
  overflow: hidden;
}
.dh_lp_wrapper .marquee {
  /* 速度は「見えている窓（.marquee__inner）の中身が入れ替わるまでの時間」で
     PC・SPを揃えている。1セットの幅は
       PC : 235.215×5 + 6.82×5  = 1210.175（窓690 ＝ 1.754窓ぶん）
       SP : 155.292×5 + 4.502×5 =  798.97（窓355 ＝ 2.251窓ぶん）
     とSPのほうが窓に対して長いので、同じ秒数だとSPが速く見える。
     PC 20s に対して SP は 20 × (2.251 / 1.754) ≒ 26s（末尾のSPブロックで指定）。 */
}
.dh_lp_wrapper .marquee__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: marquee-scroll 20s linear infinite;
          animation: marquee-scroll 20s linear infinite;
}
.dh_lp_wrapper .marquee__set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.682rem;
  padding-right: 0.682rem;
}
.dh_lp_wrapper .marquee__item {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 23.5215rem;
}
.dh_lp_wrapper .marquee__item img {
  width: 100%;
  aspect-ratio: 235.215/252.377;
  -o-object-fit: cover;
     object-fit: cover;
}
@-webkit-keyframes marquee-scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes marquee-scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dh_lp_wrapper .marquee__track {
    -webkit-animation: none;
            animation: none;
  }
}
.dh_lp_wrapper {
  /* =========================================================================
     バナー
     ========================================================================= */
}
.dh_lp_wrapper .banners {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2.15054%;
  padding-top: 12rem;
}
.dh_lp_wrapper .banners__item {
  width: 24.73118%;
}
.dh_lp_wrapper .banners__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 5rem;
  border: 1px solid #4c4c4c;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .banners__link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .banners__link img {
  width: 60.8696%;
  height: auto;
}
.dh_lp_wrapper {
  /* =========================================================================
     PAGE TOP
     ========================================================================= */
}
.dh_lp_wrapper .pagetop {
  padding: 10rem 0;
  text-align: center;
}
.dh_lp_wrapper .pagetop__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  color: #4c4c4c;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.dh_lp_wrapper .pagetop__link:hover {
  opacity: 0.7;
}
.dh_lp_wrapper .pagetop__arrow {
  width: 0.6rem;
  height: 0.4rem;
}
.dh_lp_wrapper .pagetop__txt {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.105rem;
}
.dh_lp_wrapper {
  /* =========================================================================
     SP（786px以下）
     Figmaアートボード 375px 基準。PCと同じ考え方でルートフォントサイズを
     vw可変にし、1rem = 10px @375px とする → px値は rem() でそのまま指定できる。
     マークアップはPCと共通で、ここではCSSだけを差し替える。
     ========================================================================= */
}
@media screen and (max-width: 786px) {
  .dh_lp_wrapper .u-sp {
    display: inline;
  }
  .dh_lp_wrapper {
    /* ---------------------------------------------------------------- MV */
  }
  .dh_lp_wrapper .mv {
    aspect-ratio: 375/561;
  }
  .dh_lp_wrapper .mv__bg {
    top: 27.62923%;
    left: 5.33333%;
    width: 147.2%;
    height: 70.23173%;
    border-radius: 12.745rem 0 5.8084rem 0;
    /* ふわっと出す（移動量を短く・時間を長く・減速を緩やかに） */
    --mv-bg-x: -2.4rem;
    -webkit-animation-duration: 1.6s;
            animation-duration: 1.6s;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .dh_lp_wrapper {
    /* ③が長くなるぶん、②（hello）の開始も後ろにずらして順番を保つ */
  }
  .dh_lp_wrapper .mv__hello-line,
  .dh_lp_wrapper .mv__hello {
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
  }
  .dh_lp_wrapper .mv__logo {
    top: 4.45633%;
    left: 5.86667%;
    width: 33.33333%;
  }
  .dh_lp_wrapper .mv__howto {
    top: 16.21212%;
    left: 5.4%;
    width: 55.4936%;
    height: 6.86631%;
  }
  .dh_lp_wrapper .mv__howto span {
    font-size: 3.7397rem;
    line-height: 1.02244;
  }
  .dh_lp_wrapper .mv__autumn {
    top: 25.23886%;
    left: 4.69867%;
    font-size: 7.1304rem;
    line-height: 0.83833;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(1) {
    letter-spacing: -0.34967rem;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(2) {
    letter-spacing: 0.02089rem;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(3) {
    letter-spacing: -0.03621rem;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(4) {
    letter-spacing: -0.09081rem;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(5) {
    letter-spacing: 0.08048rem;
  }
  .dh_lp_wrapper .mv__autumn span:nth-child(6) {
    letter-spacing: -0.09081rem;
  }
  .dh_lp_wrapper .mv__marker {
    top: 33.96%;
    left: 62.68%;
    width: 22.47%;
    height: 1.77%;
  }
  .dh_lp_wrapper .mv__sub {
    top: 33.42959%;
    left: 20.31467%;
    font-size: 1.972rem;
    line-height: 0.84533;
    letter-spacing: 0.32577rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(1) {
    letter-spacing: 0.12304rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(2) {
    letter-spacing: 0.19541rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(3) {
    letter-spacing: 0.12304rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(4) {
    letter-spacing: -0.01507rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(5) {
    letter-spacing: 0.19209rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(6) {
    letter-spacing: -0.36809rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(7) {
    letter-spacing: 0.32577rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(8) {
    letter-spacing: 0.39151rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(9) {
    letter-spacing: 0.29483rem;
  }
  .dh_lp_wrapper .mv__sub span:nth-child(10) {
    font-size: 1.7748rem;
    letter-spacing: 0.32577rem;
  }
  .dh_lp_wrapper .mv__rule {
    top: 33.86809%;
    left: 5.06667%;
    width: 13.33333%;
  }
  .dh_lp_wrapper .mv__hello {
    top: 95.50089%;
    left: 68.11733%;
    width: 27.71893%;
    height: 6.27986%;
  }
  .dh_lp_wrapper .mv__hello span {
    font-size: 2.1344rem;
  }
  .dh_lp_wrapper .mv__hello-line {
    top: 96.53119%;
    left: 69.50667%;
    width: 26.20453%;
    height: 3.09911%;
  }
  .dh_lp_wrapper {
    /* ------------------------------------------------------------- リード */
  }
  .dh_lp_wrapper .lead {
    padding: 7rem 0;
  }
  .dh_lp_wrapper .lead__ttl {
    font-size: 2rem;
  }
  .dh_lp_wrapper .lead__body {
    margin-top: 3rem;
  }
  .dh_lp_wrapper .lead__txt {
    font-size: 1.4rem;
    letter-spacing: 0;
  }
  .dh_lp_wrapper .lead__txt + .lead__txt {
    margin-top: 2rem;
  }
  .dh_lp_wrapper {
    /* --------------------------------------------------- セクション部分 */
  }
  .dh_lp_wrapper .contents {
    display: block;
    padding-inline: 0;
  }
  .dh_lp_wrapper {
    /* Figmaは「左側」(y1101・高さ58.289) の直後に「右側」が始まる＝隙間0。
       ナビ下の余白は .localnav の padding-bottom: 30 が受け持つ。          */
  }
  .dh_lp_wrapper .contents__main {
    width: auto;
    margin-inline: 1rem;
    margin-top: 26px;
  }
  .dh_lp_wrapper {
    /* ------------------------------------------------- ローカルナビ（横並び）
       Figmaでは和文なし・ラインなしで「How To START.n」だけが横に3つ並ぶ。   */
  }
  .dh_lp_wrapper .localnav {
    position: static;
    top: auto;
    height: 2.8289rem;
    margin-bottom: 0;
    padding-bottom: 3rem;
  }
  .dh_lp_wrapper .localnav__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
    height: 2.8289rem;
    padding-inline: 2rem;
  }
  .dh_lp_wrapper .localnav__item {
    position: relative;
  }
  .dh_lp_wrapper {
    /* 項目間の区切り線（Figma実測：太さ4・アクセント色） */
  }
  .dh_lp_wrapper .localnav__item + .localnav__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2.475rem;
    width: 0.4rem;
    background: #a10000;
  }
  .dh_lp_wrapper {
    /* スクロールで画面上部から消えたら、画面下部からスライドインさせる。
       戻したときは元のナビがすぐ出るよう、この固定バーは即座に消す
       （トランジションは .is-in 側だけに付けて、出るときだけ動かす）。      */
  }
  .dh_lp_wrapper .localnav.is-fixed .localnav__list {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: auto;
    padding-block: 2rem;
    background: rgba(252, 247, 237, 0.96);
    -webkit-box-shadow: 0 -0.2rem 1.2rem rgba(83, 42, 27, 0.1);
            box-shadow: 0 -0.2rem 1.2rem rgba(83, 42, 27, 0.1);
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .dh_lp_wrapper .localnav.is-fixed.is-in .localnav__list {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .dh_lp_wrapper {
    /* --------------------------------------------------------- タイトル */
  }
  .dh_lp_wrapper .ttl--nav {
    height: auto;
    gap: 0;
    font-size: 2.05rem;
  }
  .dh_lp_wrapper .ttl--nav .ttl__bar,
  .dh_lp_wrapper .ttl--nav .ttl__jp {
    display: none;
  }
  .dh_lp_wrapper .ttl--nav .ttl__en {
    -ms-flex-item-align: auto;
        align-self: auto;
    gap: 0;
  }
  .dh_lp_wrapper .ttl--nav .ttl__howto {
    font-size: 1.435rem;
    line-height: 0.615;
  }
  .dh_lp_wrapper .ttl--nav .ttl__row {
    gap: 0.205rem;
    margin-top: 0.1466rem;
  }
  .dh_lp_wrapper .ttl--nav .ttl__start {
    font-size: 2.05rem;
  }
  .dh_lp_wrapper .ttl--nav {
    /* line-height はPCと同じ .698（Aboretoのキャップハイト比）をそのまま使う。
       Figmaの leading 値を入れると行の高さが潰れてSTARTがHow Toに詰まる。 */
  }
  .dh_lp_wrapper .ttl--nav .ttl__num {
    font-size: 2.5895rem;
    letter-spacing: 0.047rem;
  }
  .dh_lp_wrapper .ttl--nav .ttl__dot {
    font-size: 0.77358em;
  }
  .dh_lp_wrapper .ttl--sec {
    height: 3.42785em;
    gap: 1.42829em;
    font-size: 1.566rem;
  }
  .dh_lp_wrapper .ttl--sec .ttl__bar {
    width: 0.38084em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__en {
    gap: 0.76175em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__howto {
    font-size: 1.39847em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__start {
    font-size: 1.7em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__row {
    gap: 0.19974em;
    margin-top: 0.14285em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__num {
    font-size: 2.23499em;
    letter-spacing: 0;
  }
  .dh_lp_wrapper .ttl--sec .ttl__dot {
    font-size: 0.71429em;
  }
  .dh_lp_wrapper .ttl--sec .ttl__jp {
    letter-spacing: 0.09522em;
    font-size: 1.33em;
  }
  .dh_lp_wrapper {
    /* ------------------------------------------------------- セクション */
  }
  .dh_lp_wrapper .sec {
    padding-top: 8rem;
  }
  .dh_lp_wrapper .looks {
    margin-top: 8rem;
  }
  .dh_lp_wrapper .look + .look {
    margin-top: 8rem;
  }
  .dh_lp_wrapper .look__main {
    width: 94.3662%;
  }
  .dh_lp_wrapper {
    /* ロゴはPCより相対的に大きい（Figma実測：高さ×0.6048／重なり×0.4032） */
  }
  .dh_lp_wrapper .look__logo {
    --logo-h: 2.9032rem;
    --logo-ov: 1.0484rem;
  }
  .dh_lp_wrapper .look__logo--sm {
    --logo-h: 2.7217rem;
    --logo-ov: 0.9678rem;
  }
  .dh_lp_wrapper .look__logo--md {
    --logo-h: 3.0847rem;
    --logo-ov: 1.0484rem;
  }
  .dh_lp_wrapper .look__logo--lg {
    --logo-h: 6.5322rem;
    --logo-ov: 1.7339rem;
  }
  .dh_lp_wrapper .look__logo--xl {
    --logo-h: 7.6209rem;
    --logo-ov: 1.9355rem;
  }
  .dh_lp_wrapper .look__logo--ps {
    --logo-h: 3.145rem;
    --logo-ov: 1.0484rem;
  }
  .dh_lp_wrapper .look__logo--mp {
    --logo-h: 4.4756rem;
    --logo-ov: 1.5725rem;
  }
  .dh_lp_wrapper .look__logo--se {
    --logo-h: 7.1972rem;
    --logo-ov: 1.9355rem;
  }
  .dh_lp_wrapper .look__img img {
    border-radius: 8.0645rem 0 0 0;
  }
  .dh_lp_wrapper .look__img--round img {
    border-radius: 8.0645rem 0 8.0645rem 0;
  }
  .dh_lp_wrapper .look__sub {
    gap: 1.79104%;
    width: 94.3662%;
    margin-top: 0.6rem;
  }
  .dh_lp_wrapper .look__sub-item {
    width: 49.10448%;
  }
  .dh_lp_wrapper .look__lead {
    width: 100%;
    margin-top: 4rem;
  }
  .dh_lp_wrapper .look__point {
    top: -3.832rem;
    left: 0.84507%;
    width: 19.32958%;
  }
  .dh_lp_wrapper .look__catch {
    width: 83.09859%;
    font-size: 1.8rem;
    letter-spacing: 0.04234rem;
  }
  .dh_lp_wrapper .look__desc {
    width: 83.09859%;
    margin-top: 2rem;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.04234rem;
    text-align: left;
  }
  .dh_lp_wrapper .look__items {
    width: 83.09859%;
    margin-top: 4rem;
  }
  .dh_lp_wrapper .is-accent {
    background-size: 100% 0.9rem;
  }
  .dh_lp_wrapper {
    /* ------------------------------------------------------- クレジット */
  }
  .dh_lp_wrapper .credit + .credit {
    margin-top: 1.4rem;
  }
  .dh_lp_wrapper .credit--main {
    padding-bottom: 1.6rem;
  }
  .dh_lp_wrapper .credit--main + .credit {
    margin-top: 1.6rem;
  }
  .dh_lp_wrapper .credit__name {
    font-size: 1.2rem;
    letter-spacing: 0.1517rem;
  }
  .dh_lp_wrapper .credit__buy {
    gap: 1.2136rem;
  }
  .dh_lp_wrapper .credit__price {
    font-size: 1.2rem;
    line-height: 1.04292;
  }
  .dh_lp_wrapper .credit__btn {
    width: 5.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.3rem;
    line-height: 0.96269;
  }
  .dh_lp_wrapper {
    /* --------------------------------------------- トレンド／レコメンド */
  }
  .dh_lp_wrapper .trend {
    width: 90.86789%;
    margin-top: 8rem;
  }
  .dh_lp_wrapper .trend__ttl {
    font-size: 2rem;
    line-height: 0.9;
  }
  .dh_lp_wrapper .trend__list {
    -webkit-column-gap: 2.48%;
       -moz-column-gap: 2.48%;
            column-gap: 2.48%;
    row-gap: 2.4rem;
    width: 100%;
    margin-top: 4rem;
  }
  .dh_lp_wrapper .rec {
    width: 48.76%;
  }
  .dh_lp_wrapper .rec__brand {
    margin-top: 1.6rem;
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: 0.04234rem;
  }
  .dh_lp_wrapper .rec__name {
    margin-top: 1.6rem;
    font-size: 1.2rem;
    letter-spacing: 0.04234rem;
    line-height: 1.4;
  }
  .dh_lp_wrapper .rec__price {
    margin-top: 1.4rem;
    font-size: 1.2rem;
    line-height: 1;
  }
  .dh_lp_wrapper .trend__more {
    margin-top: 4rem;
  }
  .dh_lp_wrapper .trend__more-link {
    gap: 0.4032rem;
    padding-bottom: 0.502rem;
    font-size: 1.2rem;
    line-height: 0.47042;
  }
  .dh_lp_wrapper .trend__arrow {
    width: 0.6177rem;
    height: 0.8236rem;
  }
  .dh_lp_wrapper {
    /* --------------------------------------------------- 変化セクション */
  }
  .dh_lp_wrapper .marquee {
    padding-top: 8rem;
  }
  .dh_lp_wrapper {
    /* 親（.marquee ＝ .contents__main の幅 355）とぴったり同じ幅にする。
       PCの width: 74.19355% と margin-inline: auto を打ち消す。          */
  }
  .dh_lp_wrapper .marquee__inner {
    width: auto;
    margin-inline: 0;
  }
  .dh_lp_wrapper {
    /* PCと同じ見た目の速度に揃える（算出根拠は .marquee__track のコメント参照） */
  }
  .dh_lp_wrapper .marquee__track {
    -webkit-animation-duration: 26s;
            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 {
    /* --------------------------------------------------------- バナー */
  }
  .dh_lp_wrapper .banners {
    gap: 1rem;
    width: 94.3662%;
    margin-inline: auto;
    padding-top: 8rem;
  }
  .dh_lp_wrapper .banners__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: auto;
  }
  .dh_lp_wrapper .banners__link {
    height: 3.5rem;
  }
  .dh_lp_wrapper .banners__link img {
    width: 85.2459%;
  }
  .dh_lp_wrapper {
    /* ------------------------------------------------------- PAGE TOP
       SPでは白カラムの外（背景色の上）に出る                              */
  }
  .dh_lp_wrapper .pagetop {
    margin: 8rem -1rem 0;
    padding: 6rem 0 0;
    background: #fcf7ed;
  }
  .dh_lp_wrapper .pagetop__link {
    gap: 0;
    color: #393939;
  }
  .dh_lp_wrapper .pagetop__arrow {
    width: 0.75rem;
    height: 0.4286rem;
  }
  .dh_lp_wrapper .pagetop__txt {
    font-size: 2rem;
    line-height: 2.0625;
    letter-spacing: 0.13125rem;
  }
}

.pf-color-scheme-1 {
  background-color: #fcf7ed;
  padding-bottom: 5rem;
}/*# sourceMappingURL=style.css.map */