/* ==========================================================
   NOYA DESIGN STUDIO
   /privacy-policy/ PAGE v1.0.0

   Design principles:
   - WORKS / SERVICE / HOW TO ORDERと同じ下層ページシェル
   - 長文可読性を最優先
   - セクションカードなし
   - 大型セクション番号なし
   - 不要な罫線なし
   - 共通.nd-buttonを再利用
========================================================== */

: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-privacy-content:
    1120px;

  --nd-privacy-article:
    820px;

  --nd-privacy-copy:
    780px;
}


html,
body {
  overflow-x:
    clip;
}


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

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

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

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

  max-width:
    none
    !important;

  margin-top:
    0
    !important;

  padding-top:
    0
    !important;
}


/*
 * PRIVACY POLICYは右メニューの独立項目ではないため、
 * HOME横に空の「>」を表示しない。
 */
body:has(.nd-privacy-page)
.nd-side-nav__breadcrumb {
  display:
    none
    !important;
}


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


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

.nd-privacy-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-privacy-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);
}


.nd-privacy-page__rail-sticky {
  position:
    sticky;

  top:
    50vh;

  display:
    flex;

  justify-content:
    center;

  width:
    100%;

  transform:
    translateY(-50%);

  pointer-events:
    none;
}


.nd-privacy-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-privacy-page__rail-sticky {
  top:
    calc(50vh + 16px);
}


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

.nd-privacy-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-privacy-page__content {
  width:
    min(
      100%,
      var(--nd-privacy-content)
    );

  margin:
    0;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

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


.nd-privacy-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-privacy-page__breadcrumb-list a {
  color:
    inherit;

  text-decoration:
    none;
}


/* ==========================================================
   PAGE TITLE / LEAD
========================================================== */

.nd-privacy-page__header {
  width:
    min(100%, var(--nd-privacy-article));

  margin:
    0
    0
    clamp(80px, 7vw, 96px);
}


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

  align-items:
    center;

  width:
    min(100%, 620px);

  min-height:
    78px;

  margin:
    0
    0
    clamp(32px, 3vw, 38px);

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

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

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


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

  padding:
    0
    !important;

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

  background:
    transparent
    !important;

  font-family:
    "IBM Plex Sans JP",
    sans-serif
    !important;

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

  font-weight:
    700
    !important;

  line-height:
    1.35
    !important;

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


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

  display:
    none
    !important;
}


.nd-privacy-page__lead {
  width:
    min(100%, 720px);

  margin:
    0
    !important;

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

  font-family:
    "IBM Plex Sans JP",
    sans-serif
    !important;

  font-size:
    16px
    !important;

  font-weight:
    400
    !important;

  line-height:
    1.9
    !important;

  letter-spacing:
    0
    !important;
}


/* ==========================================================
   POLICY ARTICLE
========================================================== */

.nd-privacy-policy {
  width:
    min(100%, var(--nd-privacy-article));

  margin:
    0;
}


.nd-privacy-policy__section {
  width:
    100%;

  margin:
    0
    0
    clamp(72px, 6vw, 88px);

  padding:
    0;

  border:
    0;

  background:
    transparent;
}


.nd-privacy-policy__title {
  width:
    min(100%, var(--nd-privacy-copy));

  margin:
    0
    0
    clamp(22px, 2vw, 26px)
    !important;

  padding:
    0
    !important;

  border:
    0
    !important;

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

  background:
    transparent
    !important;

  font-family:
    "IBM Plex Sans JP",
    sans-serif
    !important;

  font-size:
    clamp(27px, 2.2vw, 32px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.45
    !important;

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


.nd-privacy-policy__title::before,
.nd-privacy-policy__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


.nd-privacy-policy__body {
  width:
    min(100%, var(--nd-privacy-copy));
}


.nd-privacy-policy__body p {
  margin:
    0
    0
    18px
    !important;

  padding:
    0
    !important;

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

  font-family:
    "IBM Plex Sans JP",
    sans-serif
    !important;

  font-size:
    16px
    !important;

  font-weight:
    400
    !important;

  line-height:
    2
    !important;

  letter-spacing:
    0
    !important;
}


.nd-privacy-policy__body p:last-child {
  margin-bottom:
    0
    !important;
}


.nd-privacy-policy__operator {
  margin-bottom:
    22px
    !important;

  font-size:
    17px
    !important;

  font-weight:
    600
    !important;
}


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

.nd-privacy-policy__list {
  display:
    grid;

  gap:
    15px;

  margin:
    24px
    0
    24px
    !important;

  padding:
    0
    !important;

  list-style:
    none
    !important;
}


.nd-privacy-policy__list li {
  position:
    relative;

  margin:
    0
    !important;

  padding:
    0
    0
    0
    28px
    !important;

  color:
    var(--nd-black);

  font-family:
    "IBM Plex Sans JP",
    sans-serif;

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.9;
}


.nd-privacy-policy__list li::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    .95em;

  width:
    12px;

  height:
    2px;

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


/* ==========================================================
   OFFICIAL REFERENCES
========================================================== */

.nd-privacy-policy__references {
  width:
    100%;

  margin-top:
    28px;
}


.nd-privacy-policy__references-label {
  margin:
    0
    0
    14px
    !important;

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

  font-size:
    13px
    !important;

  font-weight:
    600
    !important;

  line-height:
    1.5
    !important;

  letter-spacing:
    .04em
    !important;
}


.nd-privacy-policy__references-list {
  display:
    grid;

  gap:
    12px;

  margin:
    0
    !important;

  padding:
    0
    !important;

  list-style:
    none
    !important;
}


.nd-privacy-policy__references-list li {
  margin:
    0
    !important;

  padding:
    0
    !important;
}


.nd-privacy-policy__references-list a {
  display:
    inline;

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

  font-family:
    "IBM Plex Sans JP",
    sans-serif;

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.75;

  text-decoration-line:
    underline
    !important;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    4px;

  transition:
    color
    180ms
    ease;
}


.nd-privacy-policy__references-list a:hover,
.nd-privacy-policy__references-list a:focus-visible {
  color:
    var(--nd-gray)
    !important;
}


.nd-privacy-policy__references-list a:focus-visible {
  outline:
    2px solid
    var(--nd-blue);

  outline-offset:
    4px;
}


/* ==========================================================
   CLOSING / BUTTON / DATE
========================================================== */

.nd-privacy-policy__closing {
  width:
    min(100%, var(--nd-privacy-copy));

  margin-top:
    clamp(6px, 1vw, 14px);
}


.nd-privacy-policy__button-area {
  width:
    min(100%, 410px);
}


.nd-privacy-policy__button-area
.nd-button {
  width:
    100%;
}


.nd-privacy-policy__dates {
  display:
    grid;

  gap:
    6px;

  margin-top:
    clamp(48px, 4vw, 60px);
}


.nd-privacy-policy__dates p {
  margin:
    0
    !important;

  padding:
    0
    !important;

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

  font-family:
    "IBM Plex Sans JP",
    sans-serif
    !important;

  font-size:
    13px
    !important;

  font-weight:
    400
    !important;

  line-height:
    1.7
    !important;
}


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

@media (max-width: 959px) {

  .nd-privacy-page {
    display:
      block;

    width:
      100%;
  }


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


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

    max-width:
      none;

    padding:
      clamp(82px, 9vw, 96px)
      clamp(42px, 7.5vw, 72px)
      clamp(104px, 11vw, 132px);
  }


  .nd-privacy-page__content {
    width:
      100%;

    max-width:
      900px;
  }


  .nd-privacy-page__header,
  .nd-privacy-policy {
    width:
      min(100%, 760px);
  }


  .nd-privacy-page__title {
    font-size:
      clamp(38px, 5.4vw, 46px)
      !important;
  }


  .nd-privacy-policy__section {
    margin-bottom:
      clamp(64px, 8vw, 76px);
  }


  .nd-privacy-policy__title {
    font-size:
      clamp(26px, 3.6vw, 30px)
      !important;
  }


  .nd-privacy-policy__body p,
  .nd-privacy-policy__list li {
    font-size:
      16px
      !important;

    line-height:
      1.95
      !important;
  }

}


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

@media (max-width: 767px) {

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


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


  .nd-privacy-page__breadcrumb-list {
    gap:
      8px;

    font-size:
      13px;
  }


  .nd-privacy-page__header {
    margin-bottom:
      64px;
  }


  .nd-privacy-page__heading-frame {
    width:
      100%;

    min-height:
      76px;

    margin-bottom:
      26px;

    padding:
      15px
      18px;

    border-width:
      2px;
  }


  .nd-privacy-page__title {
    font-size:
      clamp(30px, 8.3vw, 33px)
      !important;

    line-height:
      1.4
      !important;
  }


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

    line-height:
      1.9
      !important;
  }


  .nd-privacy-policy__section {
    margin-bottom:
      clamp(56px, 14vw, 64px);
  }


  .nd-privacy-policy__title {
    margin-bottom:
      clamp(18px, 5vw, 22px)
      !important;

    font-size:
      clamp(24px, 6.8vw, 26px)
      !important;

    line-height:
      1.5
      !important;
  }


  .nd-privacy-policy__body p {
    margin-bottom:
      16px
      !important;

    font-size:
      15px
      !important;

    line-height:
      1.9
      !important;
  }


  .nd-privacy-policy__operator {
    margin-bottom:
      18px
      !important;

    font-size:
      16px
      !important;
  }


  .nd-privacy-policy__list {
    gap:
      14px;

    margin-top:
      20px
      !important;

    margin-bottom:
      20px
      !important;
  }


  .nd-privacy-policy__list li {
    padding-left:
      24px
      !important;

    font-size:
      15px
      !important;

    line-height:
      1.9
      !important;
  }


  .nd-privacy-policy__list li::before {
    width:
      11px;
  }


  .nd-privacy-policy__references {
    margin-top:
      24px;
  }


  .nd-privacy-policy__references-list {
    gap:
      14px;
  }


  .nd-privacy-policy__references-list a {
    font-size:
      14px;

    line-height:
      1.75;
  }


  .nd-privacy-policy__button-area {
    width:
      100%;
  }


  .nd-privacy-policy__button-area
  .nd-button {
    width:
      100%;

    max-width:
      none;
  }


  .nd-privacy-policy__dates {
    margin-top:
      44px;
  }

}