/* ==========================================================
   NOYA DESIGN STUDIO
   /how-to-order/ PAGE v1.3.2

   v1.2.0を基盤に以下を修正:
   - STEP番号 01 → 1
   - 番号ブロック内は縦線だけライム
   - 縦線を長く
   - STEPと数字の横幅を完全一致
   - 左レールをviewport中央へ
   - 箇条書き見出しを復活
   - 箇条書きブロックを1px黒枠で囲う
========================================================== */

:root {
  --nd-black: #111315;
  --nd-gray: #646762;
  --nd-line: #D9DAD5;
  --nd-blue: #3437F2;
  --nd-accent: #B7E000;
  --nd-white: #F7F7F4;

  --nd-page-edge:
    clamp(18px, 2.2vw, 38px);

  --nd-rail-width:
    clamp(156px, 10.8vw, 210px);

  --nd-content-gap:
    clamp(36px, 5vw, 90px);

  --nd-order-content:
    1120px;

  --nd-order-body:
    clamp(15px, 1.08vw, 17px);
}


html,
body {
  overflow-x:
    clip;
}


body:has(.nd-order-page)
#content,

body:has(.nd-order-page)
.l-content,

body:has(.nd-order-page)
.l-mainContent,

body:has(.nd-order-page)
.l-mainContent__inner {
  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin-top:
    0
    !important;

  padding-top:
    0
    !important;
}


.nd-order-page,
.nd-order-page *,
.nd-order-page *::before,
.nd-order-page *::after {
  box-sizing:
    border-box;
}


/* ==========================================================
   PAGE SHELL / LEFT RAIL
========================================================== */

.nd-order-page {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    var(--nd-page-edge)
    var(--nd-rail-width)
    minmax(0, 1fr);

  width:
    100vw;

  max-width:
    100vw;

  min-height:
    100vh;

  min-height:
    100svh;

  margin:
    0
    0
    0
    calc(50% - 50vw)
    !important;

  color:
    var(--nd-black);

  background:
    var(--nd-white);
}


.nd-order-page__rail {
  position:
    relative;

  z-index:
    2;

  grid-column:
    2;

  grid-row:
    1;

  align-self:
    stretch;

  width:
    100%;

  min-width:
    0;

  margin:
    0
    0
    clamp(210px, 22vh, 330px);

  border-right:
    1px solid
    var(--nd-line);

  background:
    var(--nd-white);
}


/*
 * viewportの中央へ固定。
 * 旧: clamp(170px,28vh,290px)
 * 新: 50vh + 自身の高さの半分を戻す。
 */
.nd-order-page__rail-sticky {
  position:
    sticky;

  top:
    50vh;

  display:
    flex;

  justify-content:
    center;

  width:
    100%;

  transform:
    translateY(-50%);

  pointer-events:
    none;
}


.nd-order-page__rail-label {
  display:
    block;

  margin:
    0
    !important;

  padding:
    0
    !important;

  color:
    var(--nd-black)
    !important;

  font-family:
    "Barlow Condensed",
    sans-serif
    !important;

  font-size:
    clamp(82px, 6vw, 104px)
    !important;

  font-weight:
    600
    !important;

  line-height:
    .9
    !important;

  letter-spacing:
    .055em
    !important;

  white-space:
    nowrap
    !important;

  writing-mode:
    vertical-rl
    !important;

  text-orientation:
    mixed
    !important;
}


body.admin-bar
.nd-order-page__rail-sticky {
  top:
    calc(
      50vh
      + 16px
    );
}


/* ==========================================================
   CONTENT SHELL
========================================================== */

.nd-order-page__inner {
  grid-column:
    3;

  grid-row:
    1;

  width:
    100%;

  max-width:
    calc(
      1760px
      - var(--nd-page-edge)
      - var(--nd-rail-width)
    );

  min-width:
    0;

  margin:
    0
    auto
    0
    0;

  padding:
    clamp(80px, 6vw, 100px)
    clamp(52px, 6vw, 104px)
    clamp(126px, 10vw, 164px)
    var(--nd-content-gap);
}


.nd-order-page__content {
  width:
    min(
      100%,
      var(--nd-order-content)
    );

  margin:
    0;
}


/* ==========================================================
   BREADCRUMB / PAGE TITLE
========================================================== */

.nd-order-page__breadcrumb {
  margin:
    0
    0
    clamp(60px, 5.5vw, 82px);
}


.nd-order-page__breadcrumb-list {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin:
    0
    !important;

  padding:
    0
    !important;

  list-style:
    none
    !important;

  color:
    var(--nd-gray);

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    .08em;
}


.nd-order-page__breadcrumb-list a {
  color:
    inherit;

  text-decoration:
    none;
}


.nd-order-page__header {
  margin:
    0
    0
    clamp(88px, 7vw, 110px);
}


.nd-order-page__heading-frame {
  display:
    flex;

  align-items:
    center;

  width:
    min(100%, 620px);

  min-height:
    78px;

  margin:
    0
    0
    26px;

  padding:
    16px
    clamp(22px, 2vw, 30px);

  border:
    3px solid
    var(--nd-black);

  background:
    var(--nd-white);
}


.nd-order-page__title {
  margin:
    0
    !important;

  padding:
    0
    !important;

  color:
    var(--nd-black)
    !important;

  background:
    transparent
    !important;

  font-size:
    clamp(36px, 3.35vw, 54px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.08
    !important;

  letter-spacing:
    -.05em
    !important;
}


.nd-order-page__title::before,
.nd-order-page__title::after,
.nd-order-page__heading-frame::before,
.nd-order-page__heading-frame::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


.nd-order-page__lead {
  width:
    min(100%, 760px);
}


.nd-order-page__lead p {
  margin:
    0;

  color:
    var(--nd-black);

  font-size:
    var(--nd-order-body);

  line-height:
    1.9;
}


.nd-order-page__lead p + p {
  margin-top:
    8px;
}


/* ==========================================================
   FLOW HEADER
========================================================== */

.nd-order-flow__header {
  width:
    min(100%, 900px);

  margin:
    0
    0
    clamp(46px, 4.4vw, 62px);
}


.nd-order-flow__title {
  margin:
    0
    !important;

  padding:
    0
    !important;

  color:
    var(--nd-black)
    !important;

  background:
    transparent
    !important;

  font-size:
    clamp(34px, 3vw, 46px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.3
    !important;

  letter-spacing:
    -.045em
    !important;
}


.nd-order-flow__title::before,
.nd-order-flow__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


/* ==========================================================
   STEP LIST
========================================================== */

.nd-order-flow__list {
  margin:
    0
    !important;

  padding:
    0
    !important;

  border-top:
    1px solid
    var(--nd-line);

  list-style:
    none
    !important;
}


.nd-order-step {
  display:
    grid;

  grid-template-columns:
    clamp(112px, 10.5vw, 146px)
    minmax(0, 1fr);

  gap:
    clamp(42px, 5.2vw, 76px);

  min-width:
    0;

  margin:
    0;

  padding:
    clamp(52px, 5.8vw, 82px)
    0
    clamp(58px, 6.2vw, 90px);

  border-bottom:
    1px solid
    var(--nd-line);
}


/* ==========================================================
   STEP INDEX
========================================================== */

.nd-order-step__index {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  min-width:
    0;

  padding-top:
    2px;
}


/*
 * STEPと数字は同じwidthを持つ。
 */
.nd-order-step__label,
.nd-order-step__number {
  display:
    block;

  width:
    58px;

  color:
    var(--nd-black);

  text-align:
    center;
}


.nd-order-step__label {
  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .11em;

  text-align-last:
    justify;
}


.nd-order-step__number {
  margin-top:
    9px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    clamp(68px, 5.8vw, 86px);

  font-weight:
    500;

  font-variant-numeric:
    tabular-nums;

  line-height:
    .82;

  letter-spacing:
    -.04em;
}


/*
 * 番号エリアでライムを使うのは縦線だけ。
 */
.nd-order-step__line {
  display:
    block;

  width:
    3px;

  height:
    clamp(118px, 10vw, 154px);

  margin-top:
    clamp(28px, 3vw, 40px);

  background:
    var(--nd-accent);
}


/* ==========================================================
   STEP CONTENT
========================================================== */

.nd-order-step__content {
  width:
    min(100%, 820px);

  min-width:
    0;

  padding-top:
    1px;
}


.nd-order-step__title {
  margin:
    0
    !important;

  padding:
    0
    !important;

  color:
    var(--nd-black)
    !important;

  background:
    transparent
    !important;

  font-size:
    clamp(25px, 2.1vw, 32px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.45
    !important;

  letter-spacing:
    -.035em
    !important;
}


.nd-order-step__title::before,
.nd-order-step__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


.nd-order-step__summary {
  width:
    min(100%, 780px);

  margin:
    clamp(22px, 2.2vw, 30px)
    0
    0
    !important;

  color:
    var(--nd-gray);

  font-size:
    clamp(17px, 1.4vw, 21px)
    !important;

  font-weight:
    500;

  line-height:
    1.75
    !important;

  letter-spacing:
    .005em;
}


/* ==========================================================
   LIST DETAILS
   見出し + 箇条書きを細い黒枠で一体化。
========================================================== */

.nd-order-step__details {
  width:
    min(100%, 780px);

  margin-top:
    clamp(26px, 2.8vw, 36px);

  border:
    1px solid
    var(--nd-black);

  background:
    transparent;
}


.nd-order-step__list-title {
  margin:
    0
    !important;

  padding:
    11px
    15px
    12px
    !important;

  border-bottom:
    1px solid
    var(--nd-black);

  color:
    var(--nd-black);

  background:
    transparent;

  font-size:
    clamp(13px, .95vw, 14px)
    !important;

  font-weight:
    600;

  line-height:
    1.6;

  letter-spacing:
    .025em;
}


.nd-order-step__list {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px
    clamp(26px, 3vw, 42px);

  width:
    100%;

  margin:
    0
    !important;

  padding:
    16px
    18px
    17px
    !important;

  list-style:
    none
    !important;
}


.nd-order-step__list li {
  position:
    relative;

  min-width:
    0;

  margin:
    0
    !important;

  padding:
    0
    0
    0
    21px
    !important;

  color:
    var(--nd-black);

  font-size:
    clamp(14px, 1vw, 15px)
    !important;

  line-height:
    1.7
    !important;
}


/*
 * 前回確定した箇条書きのライムバーは維持。
 * 「番号デザイン内」では縦線のみライム。
 */
.nd-order-step__list li::before {
  content:
    "";

  position:
    absolute;

  top:
    .72em;

  left:
    0;

  width:
    11px;

  height:
    3px;

  background:
    var(--nd-accent);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 959px) {

  .nd-order-page {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0
      !important;
  }


  .nd-order-page__rail {
    display:
      none;
  }


  .nd-order-page__inner {
    width:
      100%;

    max-width:
      none;

    padding:
      clamp(82px, 9vw, 96px)
      clamp(42px, 7.5vw, 72px)
      clamp(108px, 12vw, 136px);
  }


  .nd-order-page__content {
    width:
      100%;
  }


  .nd-order-step {
    grid-template-columns:
      104px
      minmax(0, 1fr);

    gap:
      34px;

    padding:
      48px
      0
      58px;
  }


  .nd-order-step__number {
    font-size:
      70px;
  }


  .nd-order-step__line {
    height:
      124px;
  }


  .nd-order-step__list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

  .nd-order-page__inner {
    padding:
      76px
      clamp(22px, 6vw, 38px)
      92px;
  }


  .nd-order-page__breadcrumb {
    margin-bottom:
      42px;
  }


  .nd-order-page__header {
    margin-bottom:
      70px;
  }


  .nd-order-page__heading-frame {
    min-height:
      68px;

    margin-bottom:
      22px;

    padding:
      14px
      18px;

    border-width:
      2px;
  }


  .nd-order-page__title {
    font-size:
      33px
      !important;
  }


  .nd-order-page__lead p {
    font-size:
      15px
      !important;

    line-height:
      1.85
      !important;
  }


  .nd-order-flow__header {
    margin-bottom:
      28px;
  }


  .nd-order-flow__title {
    font-size:
      28px
      !important;

    line-height:
      1.4
      !important;
  }


  .nd-order-step {
    grid-template-columns:
      62px
      minmax(0, 1fr);

    gap:
      16px;

    padding:
      34px
      0
      42px;
  }


  .nd-order-step__label,
  .nd-order-step__number {
    width:
      46px;
  }


  .nd-order-step__label {
    font-size:
      11px;
  }


  .nd-order-step__number {
    margin-top:
      6px;

    font-size:
      48px;
  }


  .nd-order-step__line {
    width:
      2px;

    height:
      94px;

    margin-top:
      22px;
  }


  .nd-order-step__title {
    font-size:
      21px
      !important;

    line-height:
      1.45
      !important;
  }


  .nd-order-step__summary {
    margin-top:
      14px
      !important;

    font-size:
      15px
      !important;

    line-height:
      1.75
      !important;
  }


  .nd-order-step__details {
    margin-top:
      20px;
  }


  .nd-order-step__list-title {
    padding:
      9px
      11px
      10px
      !important;

    font-size:
      12px
      !important;
  }


  .nd-order-step__list {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      8px;

    padding:
      12px
      12px
      13px
      !important;
  }


  .nd-order-step__list li {
    padding-left:
      18px
      !important;

    font-size:
      13px
      !important;

    line-height:
      1.68
      !important;
  }


  .nd-order-step__list li::before {
    width:
      9px;
  }

}


/* ==========================================================
   NOYA DESIGN STUDIO
   /how-to-order/ PAGE v1.3.1

   Refinement:
   - STEPラベルを拡大
   - STEP文字そのものと数字そのものの視覚幅を調整
   - ライム縦線をさらに延長
   - STEP説明文をblack / normal weightへ
========================================================== */


/* ==========================================================
   01. STEP LABEL
========================================================== */

/*
 * v1.3.0の15pxは数字とのコントラストが強すぎ、
 * 小さな補助ラベルに見えていたため18pxへ。
 *
 * Barlow Condensedの字形幅を基準に、
 * 18px + -0.054emでSTEPの文字列そのものを
 * 数字1文字の実幅へ近づける。
 */
.nd-order-step__label {
  width:
    auto
    !important;

  color:
    var(--nd-black)
    !important;

  font-size:
    18px
    !important;

  font-weight:
    600
    !important;

  letter-spacing:
    -.054em
    !important;

  line-height:
    1
    !important;

  text-align:
    center
    !important;

  text-align-last:
    auto
    !important;
}


/*
 * 数字側も固定58pxの「箱」で揃えるのではなく、
 * テキスト自体の幅を基準に中央配置。
 */
.nd-order-step__number {
  width:
    auto
    !important;

  min-width:
    0
    !important;

  color:
    var(--nd-black)
    !important;

  font-variant-numeric:
    tabular-nums;

  text-align:
    center
    !important;
}


/* ==========================================================
   02. LONGER LIME LINE
========================================================== */

.nd-order-step__line {
  height:
    clamp(176px, 14vw, 220px)
    !important;

  margin-top:
    clamp(30px, 3.2vw, 42px)
    !important;

  background:
    var(--nd-accent)
    !important;
}


/* ==========================================================
   03. SUMMARY TEXT
========================================================== */

.nd-order-step__summary {
  color:
    var(--nd-black)
    !important;

  font-weight:
    400
    !important;
}


/* ==========================================================
   04. TABLET
========================================================== */

@media (max-width: 959px) {

  .nd-order-step__label {
    font-size:
      17px
      !important;

    /*
     * TabletでもSTEPと数字の実幅差を抑える。
     */
    letter-spacing:
      -.045em
      !important;
  }


  .nd-order-step__line {
    height:
      172px
      !important;
  }

}


/* ==========================================================
   05. MOBILE
========================================================== */

@media (max-width: 767px) {

  .nd-order-step__label {
    width:
      auto
      !important;

    font-size:
      14px
      !important;

    letter-spacing:
      -.04em
      !important;
  }


  .nd-order-step__number {
    width:
      auto
      !important;
  }


  .nd-order-step__line {
    height:
      132px
      !important;

    margin-top:
      24px
      !important;
  }


  .nd-order-step__summary {
    color:
      var(--nd-black)
      !important;

    font-weight:
      400
      !important;
  }

}


/* ==========================================================
   NOYA DESIGN STUDIO
   /how-to-order/ PAGE v1.3.2

   STEP LABEL REFINEMENT
   - STEPの字間圧縮を撤回
   - 通常の字間へ戻す
   - フォントサイズをさらに拡大
   - STEPの文字幅が数字を超えても許容
   - STEP / 数字は中心軸だけを完全一致
========================================================== */


/* ==========================================================
   01. PC
========================================================== */

.nd-order-step__index {
  align-items:
    center
    !important;
}


.nd-order-step__label {
  display:
    block
    !important;

  width:
    max-content
    !important;

  min-width:
    0
    !important;

  margin:
    0
    auto
    !important;

  color:
    var(--nd-black)
    !important;

  font-size:
    22px
    !important;

  font-weight:
    600
    !important;

  line-height:
    1
    !important;

  letter-spacing:
    normal
    !important;

  text-align:
    center
    !important;

  text-align-last:
    auto
    !important;
}


.nd-order-step__number {
  display:
    block
    !important;

  width:
    max-content
    !important;

  min-width:
    0
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;

  text-align:
    center
    !important;
}


/* ==========================================================
   02. TABLET
========================================================== */

@media (max-width: 959px) {

  .nd-order-step__label {
    font-size:
      20px
      !important;

    letter-spacing:
      normal
      !important;
  }

}


/* ==========================================================
   03. MOBILE
========================================================== */

@media (max-width: 767px) {

  .nd-order-step__label {
    width:
      max-content
      !important;

    font-size:
      17px
      !important;

    letter-spacing:
      normal
      !important;
  }


  .nd-order-step__number {
    width:
      max-content
      !important;
  }

}