/* ==========================================================
   NOYA DESIGN STUDIO
   /service/ DETAIL PAGE v2.0.1

   Source:
   noya-service-design-spec.txt

   Design policy:
   - 現行SERVICE / WORKSのページ骨格を維持
   - 左レール / 上部余白 / H1枠を変更しない
   - 不要なボックスを増やさない
   - 詳細条件は2カラムの線ベース
   - FAQは線ベースのdetails/summary
   - ライム+グレーを連結したアンダーバーは使用しない
========================================================== */

: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-rail-sticky-top:
    clamp(170px, 28vh, 290px);

  --nd-service-content:
    1120px;

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


html,
body {
  overflow-x:
    clip;
}


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

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

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

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

  max-width:
    none
    !important;

  margin-top:
    0
    !important;

  padding-top:
    0
    !important;
}


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


/* ==========================================================
   PAGE SHELL / LEFT RAIL
   現行SERVICEの確定値を維持。
========================================================== */

.nd-service-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-service-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-service-page__rail-sticky {
  position:
    sticky;

  top:
    var(--nd-rail-sticky-top);

  display:
    flex;

  justify-content:
    center;

  width:
    100%;

  pointer-events:
    none;
}


.nd-service-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:
    .08em
    !important;

  white-space:
    nowrap
    !important;

  writing-mode:
    vertical-rl
    !important;

  text-orientation:
    mixed
    !important;
}


body.admin-bar
.nd-service-page__rail-sticky {
  top:
    calc(
      var(--nd-rail-sticky-top)
      + 32px
    );
}


/* ==========================================================
   CONTENT SHELL
   WORKS / SERVICE共通の上部余白。
========================================================== */

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

  margin:
    0;
}


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

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


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

  text-decoration:
    none;
}


.nd-service-page__header {
  margin:
    0
    0
    clamp(90px, 7.5vw, 116px);
}


.nd-service-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-service-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-service-page__title::before,
.nd-service-page__title::after,
.nd-service-page__heading-frame::before,
.nd-service-page__heading-frame::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


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


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

  color:
    var(--nd-black);

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

  line-height:
    1.9;
}


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

  color:
    var(--nd-gray);
}


/* ==========================================================
   COMMON SECTION HEADER
========================================================== */

.nd-service-block-header {
  width:
    min(100%, 820px);

  margin:
    0
    0
    clamp(46px, 4.5vw, 64px);
}


.nd-service-block-header__title {
  margin:
    0
    !important;

  padding:
    0
    !important;

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

  background:
    transparent
    !important;

  font-size:
    clamp(32px, 2.8vw, 44px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.3
    !important;

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


.nd-service-block-header__title::before,
.nd-service-block-header__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


.nd-service-block-header__intro {
  width:
    min(100%, 720px);

  margin:
    clamp(15px, 1.5vw, 20px)
    0
    0
    !important;

  color:
    var(--nd-gray);

  font-size:
    var(--nd-service-body)
    !important;

  line-height:
    1.9
    !important;
}


/* ==========================================================
   01. DETAIL
========================================================== */

.nd-service-detail {
  scroll-margin-top:
    120px;
}


.nd-service-info-grid {
  display:
    grid;

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

  column-gap:
    clamp(48px, 5.6vw, 82px);

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


.nd-service-info-card {
  min-width:
    0;

  padding:
    clamp(30px, 3vw, 40px)
    0
    clamp(38px, 3.6vw, 48px);

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


.nd-service-info-card__title {
  position:
    relative;

  margin:
    0
    0
    24px
    !important;

  padding:
    0
    0
    0
    22px
    !important;

  color:
    var(--nd-black);

  font-size:
    clamp(22px, 1.85vw, 28px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.45
    !important;

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


.nd-service-info-card__title::before {
  content:
    "—";

  position:
    absolute;

  top:
    0;

  left:
    0;

  color:
    var(--nd-accent);

  font-weight:
    700;
}


.nd-service-info-card__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


/* compact facts */
.nd-service-info-facts {
  display:
    grid;

  width:
    100%;

  margin:
    0
    0
    26px;

  padding:
    0;

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


.nd-service-info-facts__row {
  display:
    grid;

  grid-template-columns:
    minmax(100px, 132px)
    minmax(0, 1fr);

  gap:
    16px;

  align-items:
    baseline;

  padding:
    10px
    0;

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


.nd-service-info-facts dt,
.nd-service-info-facts dd {
  margin:
    0;
}


.nd-service-info-facts dt {
  color:
    var(--nd-gray);

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

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.4;

  letter-spacing:
    .055em;
}


.nd-service-info-facts dd {
  color:
    var(--nd-black);

  font-size:
    clamp(15px, 1.05vw, 16px);

  font-weight:
    700;

  line-height:
    1.55;

  text-align:
    right;
}


/* readable bullet list */
.nd-service-info-list {
  display:
    grid;

  gap:
    11px;

  margin:
    0
    !important;

  padding:
    0
    !important;

  list-style:
    none
    !important;
}


.nd-service-info-list li {
  position:
    relative;

  margin:
    0
    !important;

  padding:
    0
    0
    0
    20px
    !important;

  color:
    var(--nd-black);

  font-size:
    clamp(15px, 1.02vw, 16px)
    !important;

  line-height:
    1.8
    !important;
}


.nd-service-info-list li::before {
  content:
    "—";

  position:
    absolute;

  top:
    0;

  left:
    0;

  color:
    var(--nd-accent);

  font-weight:
    700;
}


.nd-service-info-card__note {
  margin:
    20px
    0
    0
    !important;

  padding:
    0
    !important;

  color:
    var(--nd-gray);

  font-size:
    14px
    !important;

  line-height:
    1.85
    !important;
}


/* ==========================================================
   02. ORDER
   行動ブロックだけ細枠で明確化。
========================================================== */

.nd-service-order {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, 410px);

  gap:
    clamp(48px, 6vw, 86px);

  align-items:
    center;

  margin-top:
    clamp(104px, 8.5vw, 132px);

  padding:
    clamp(42px, 4.2vw, 56px);

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

  background:
    transparent;
}


.nd-service-order__copy {
  width:
    min(100%, 610px);
}


.nd-service-order__title {
  margin:
    0
    !important;

  padding:
    0
    !important;

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

  background:
    transparent
    !important;

  font-size:
    clamp(28px, 2.35vw, 35px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.45
    !important;

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


.nd-service-order__title::before,
.nd-service-order__title::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


.nd-service-order__body {
  margin-top:
    16px;
}


.nd-service-order__body p {
  margin:
    0;

  color:
    var(--nd-black);

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

  line-height:
    1.9;
}


.nd-service-order__body p + p {
  margin-top:
    7px;

  color:
    var(--nd-gray);
}


.nd-service-order__action {
  width:
    100%;
}


.nd-service-order__action.nd-button-area {
  display:
    flex;

  justify-content:
    flex-end;
}


/* service page scoped common button */
.nd-service-order .nd-button {
  position:
    relative;

  isolation:
    isolate;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    64px;

  align-items:
    stretch;

  width:
    min(100%, 410px);

  min-height:
    72px;

  margin:
    0
    !important;

  padding:
    0
    !important;

  overflow:
    hidden;

  border:
    2px solid
    var(--nd-black)
    !important;

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

  background:
    var(--nd-white)
    !important;

  text-decoration:
    none
    !important;
}


.nd-service-order .nd-button::before {
  content:
    "";

  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  background:
    var(--nd-accent);

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform
    420ms
    cubic-bezier(.22, 1, .36, 1);
}


.nd-service-order .nd-button:hover::before,
.nd-service-order .nd-button:focus-visible::before {
  transform:
    scaleX(1);
}


.nd-service-order .nd-button__label,
.nd-service-order .nd-button__arrow {
  position:
    relative;

  z-index:
    1;
}


.nd-service-order .nd-button__label {
  display:
    flex;

  align-items:
    center;

  padding:
    18px
    24px;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.4;

  letter-spacing:
    .05em;
}


.nd-service-order .nd-button__arrow {
  display:
    grid;

  place-items:
    center;

  border-left:
    2px solid
    var(--nd-black);

  transition:
    transform
    300ms
    cubic-bezier(.22, 1, .36, 1);
}


.nd-service-order .nd-button__arrow-icon {
  display:
    block;

  width:
    30px;

  height:
    18px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.nd-service-order .nd-button:hover
.nd-button__arrow,

.nd-service-order .nd-button:focus-visible
.nd-button__arrow {
  transform:
    translate3d(5px, 0, 0);
}


.nd-service-order .nd-button:focus-visible {
  outline:
    2px solid
    var(--nd-blue);

  outline-offset:
    5px;
}


/* ==========================================================
   03. FAQ
========================================================== */

.nd-service-faq {
  margin-top:
    clamp(110px, 9vw, 142px);

  scroll-margin-top:
    120px;
}


.nd-service-faq__list {
  border-bottom:
    1px solid
    var(--nd-black);
}


.nd-service-faq-item {
  margin:
    0;

  padding:
    0;

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

  background:
    transparent;
}


.nd-service-faq-item__question {
  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    34px;

  gap:
    14px;

  align-items:
    center;

  min-height:
    78px;

  margin:
    0;

  padding:
    20px
    4px;

  color:
    var(--nd-black);

  cursor:
    pointer;

  list-style:
    none;
}


.nd-service-faq-item__question::-webkit-details-marker {
  display:
    none;
}


.nd-service-faq-item__q,
.nd-service-faq-item__a {
  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    22px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .04em;
}


.nd-service-faq-item__q {
  color:
    var(--nd-black);
}


.nd-service-faq-item__question-text {
  font-size:
    clamp(16px, 1.18vw, 18px);

  font-weight:
    700;

  line-height:
    1.7;
}


.nd-service-faq-item__icon {
  position:
    relative;

  display:
    block;

  width:
    22px;

  height:
    22px;

  justify-self:
    end;
}


.nd-service-faq-item__icon::before,
.nd-service-faq-item__icon::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    18px;

  height:
    2px;

  background:
    var(--nd-black);

  transform:
    translate(-50%, -50%);
}


.nd-service-faq-item__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);

  transition:
    transform
    220ms
    ease;
}


.nd-service-faq-item[open]
.nd-service-faq-item__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


.nd-service-faq-item__answer {
  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap:
    14px;

  padding:
    0
    52px
    26px
    4px;
}


.nd-service-faq-item__a {
  color:
    var(--nd-accent);
}


.nd-service-faq-item__answer p {
  width:
    min(100%, 780px);

  margin:
    0;

  color:
    var(--nd-gray);

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

  line-height:
    1.9;
}


.nd-service-faq-item__question:hover
.nd-service-faq-item__question-text,

.nd-service-faq-item__question:focus-visible
.nd-service-faq-item__question-text {
  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    5px;
}


.nd-service-faq-item__question:focus-visible {
  outline:
    2px solid
    var(--nd-blue);

  outline-offset:
    3px;
}


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

@media (max-width: 959px) {

  .nd-service-page {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0
      !important;
  }


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


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

    max-width:
      none;

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


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


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

    column-gap:
      0;
  }


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

    gap:
      32px;

    margin-top:
      90px;

    padding:
      32px
      28px
      36px;
  }


  .nd-service-order__action {
    max-width:
      410px;
  }


  .nd-service-order__action.nd-button-area {
    justify-content:
      flex-start;
  }


  .nd-service-faq {
    margin-top:
      94px;
  }

}


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

@media (max-width: 767px) {

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


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


  .nd-service-page__header {
    margin-bottom:
      72px;
  }


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

    margin-bottom:
      22px;

    padding:
      14px
      18px;

    border-width:
      2px;
  }


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


  .nd-service-page__lead p,
  .nd-service-block-header__intro,
  .nd-service-order__body p,
  .nd-service-faq-item__answer p {
    font-size:
      15px
      !important;

    line-height:
      1.85
      !important;
  }


  .nd-service-block-header {
    margin-bottom:
      34px;
  }


  .nd-service-block-header__title {
    font-size:
      28px
      !important;

    line-height:
      1.4
      !important;
  }


  .nd-service-info-card {
    padding:
      26px
      0
      32px;
  }


  .nd-service-info-card__title {
    margin-bottom:
      20px
      !important;

    font-size:
      22px
      !important;
  }


  .nd-service-info-facts__row {
    grid-template-columns:
      minmax(82px, 104px)
      minmax(0, 1fr);

    gap:
      12px;

    padding:
      9px
      0;
  }


  .nd-service-info-facts dt {
    font-size:
      12px;
  }


  .nd-service-info-facts dd {
    font-size:
      15px;

    text-align:
      right;
  }


  .nd-service-info-list li {
    font-size:
      15px
      !important;

    line-height:
      1.78
      !important;
  }


  .nd-service-info-card__note {
    font-size:
      13px
      !important;
  }


  .nd-service-order {
    margin-top:
      72px;

    padding:
      28px
      20px
      30px;
  }


  .nd-service-order__title {
    font-size:
      26px
      !important;
  }


  .nd-service-order__action,
  .nd-service-order .nd-button {
    width:
      100%;
  }


  .nd-service-order .nd-button {
    grid-template-columns:
      minmax(0, 1fr)
      58px;

    min-height:
      66px;
  }


  .nd-service-order .nd-button__label {
    padding:
      16px
      18px;

    font-size:
      13px;
  }


  .nd-service-order .nd-button__arrow-icon {
    width:
      26px;

    height:
      16px;
  }


  .nd-service-faq {
    margin-top:
      78px;
  }


  .nd-service-faq-item__question {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      28px;

    gap:
      10px;

    min-height:
      72px;

    padding:
      18px
      2px;
  }


  .nd-service-faq-item__q,
  .nd-service-faq-item__a {
    font-size:
      20px;
  }


  .nd-service-faq-item__question-text {
    font-size:
      15px;

    line-height:
      1.7;
  }


  .nd-service-faq-item__answer {
    grid-template-columns:
      28px
      minmax(0, 1fr);

    gap:
      10px;

    padding:
      0
      38px
      22px
      2px;
  }


  .nd-service-faq-item__icon {
    width:
      20px;

    height:
      20px;
  }


  .nd-service-faq-item__icon::before,
  .nd-service-faq-item__icon::after {
    width:
      16px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .nd-service-order .nd-button,
  .nd-service-order .nd-button::before,
  .nd-service-order .nd-button__arrow,
  .nd-service-faq-item__icon::after {
    transition:
      none
      !important;
  }

}

/* ==========================================================
   /service/ DETAIL PAGE v2.0.1 / READABILITY REFINEMENT
========================================================== */

/* 月額ホームページ制作の内容：導入文をブラックへ */
.nd-service-detail .nd-service-block-header__intro {
  color: var(--nd-black) !important;
}

/* 各項目タイトル：ライムのダッシュを撤去し、細い黒枠へ */
.nd-service-info-card__title {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 42px;
  margin: 0 0 24px !important;
  padding: 7px 13px 8px !important;
  border: 1px solid var(--nd-black);
  color: var(--nd-black);
  background: transparent;
  font-size: clamp(19px, 1.55vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -.025em !important;
}

.nd-service-info-card__title::before,
.nd-service-info-card__title::after {
  content: none !important;
  display: none !important;
}

/* 日本語プラン名に合わせてラベル列を拡張 */
.nd-service-info-facts__row {
  grid-template-columns: minmax(126px, 158px) minmax(0, 1fr);
}

.nd-service-info-facts dt {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: clamp(12px, .88vw, 13px);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ご依頼方法：2行ともブラック */
.nd-service-order__body p,
.nd-service-order__body p + p {
  color: var(--nd-black) !important;
}

/* FAQ導入文をブラックへ */
.nd-service-faq .nd-service-block-header__intro {
  color: var(--nd-black) !important;
}

@media (max-width: 767px) {
  .nd-service-info-card__title {
    min-height: 38px;
    margin-bottom: 19px !important;
    padding: 6px 10px 7px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .nd-service-info-facts__row {
    grid-template-columns: minmax(112px, 138px) minmax(0, 1fr);
  }

  .nd-service-info-facts dt {
    font-size: 12px;
  }
}