/* ==========================================================
   NOYA DESIGN STUDIO — TOP SERVICE セクション

   グリッドで複数の実子要素を並べる箇所(.nd-service-plans__grid)
   は、外側=block・内側の.wp-block-group__inner-container=grid
   という2段構成にする(WORKS/PHILOSOPHYと同じ考え方)。
========================================================== */

.nd-service {
  --service-black: #111315;
  --service-gray: #646762;
  --service-line: #D9DAD5;
  --service-accent: #B7E000;
  --service-white: #F7F7F4;

  --service-price-size: clamp(30px, 2.5vw, 40px);

  /* TOPページ セクション共通の左右余白基準(/how-to-order/と同じ) */
  --nd-page-edge: clamp(18px, 2.2vw, 38px);
  --nd-content-gap: clamp(36px, 5vw, 90px);

  /* 3カラムの余白量。displayをgridからflexへ変更したため、gapの値をgrid-template-columns側とflex-basisの計算側の両方で使う */
  --service-plan-gap: clamp(32px, 4vw, 56px);
  --service-common-col-gap: clamp(20px, 2.8vw, 38px);

  /* カードの並び(.nd-service-plans__grid)だけ、見出し・案内文の標準余白よりもさらに内側へ追加で寄せる */
  --service-plans-extra-inset: clamp(40px, 5vw, 90px);
}

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

.nd-service {
  position: relative;

  /* WORKS/PHILOSOPHYと同じ理由でグリッドは使わない */
  display: block;

  width: 100vw;
  max-width: 100vw;

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

  padding: 0;

  color: var(--service-black);
  background: var(--service-white);

  overflow: visible;
}


/* INNER */
.nd-service__inner {
  width: 100%;
  max-width: calc(1760px - var(--nd-page-edge));
  min-width: 0;

  margin: 0 auto 0 0;

  /*
   * 見出し・案内文の位置をWORKS/PHILOSOPHYと揃えるため、左右は
   * 標準の余白のまま(/how-to-order/ページの構造由来の値で、
   * 他セクションもすべて同じ値を使う)。カード列だけをさらに
   * 内側へ寄せる処理は.nd-service-plans__grid側で行う。
   */
  padding:
    clamp(33px, 3.3vw, 53px)
    clamp(52px, 6vw, 104px)
    clamp(37px, 3.3vw, 53px)
    calc(var(--nd-page-edge) + var(--nd-content-gap));
}


/*
 * HEADING — WORKS/PHILOSOPHYと完全に同じ値。
 *
 * HERO側のカスタムHTMLブロックのCSSタブに、WORKS/SERVICE
 * 共通の古いルール(html body .nd-works ..., html body
 * .nd-service ...、!important付き)が今も残っており、詳細度が
 * こちらより高いため、対象クラスを二重にして詳細度を上げる
 * (HERO自体は変更できないため、こちら側だけで対応する)。
 */
.nd-service.nd-service .nd-service__header,
html body .nd-service.nd-service .nd-service__header {
  margin: 0 0 clamp(52px, 5.8vw, 78px) !important;
}

.nd-service.nd-service .nd-service__heading-frame,
html body .nd-service.nd-service .nd-service__heading-frame {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: min(100%, 680px) !important;
  min-height: 86px !important;

  padding: 18px clamp(22px, 2.2vw, 34px) !important;

  overflow: visible !important;

  border: 3px solid var(--service-black) !important;
  background: var(--service-white) !important;
}

/*
 * HERO側のカスタムHTMLブロックのCSSタブに、".nd-hero, .nd-hero *,
 * .nd-service, .nd-service *, .nd-side-nav, .nd-side-nav *"という
 * サイト共通のfont-family指定(IBM Plex Sans JP)があり、
 * .nd-serviceが対象に含まれるため、この英字ラベルにまで本文用
 * 書体が適用されてしまう。詳細度を上げてBarlow Condensedを
 * 優先させる。
 */
.nd-service.nd-service .nd-service__title-en,
html body .nd-service.nd-service .nd-service__title-en {
  flex: none;
  color: var(--service-gray) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  white-space: nowrap;
}

.nd-service__heading-frame::before,
.nd-service__heading-frame::after,
.nd-service__title::before,
.nd-service__title::after {
  content: none !important;
  display: none !important;
}

.nd-service.nd-service .nd-service__title,
html body .nd-service.nd-service .nd-service__title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  /* SWELLの見出しブロック既定デザイン(左の色付き罫線等)を打ち消す */
  border: 0 !important;
  box-shadow: none !important;
  color: var(--service-black) !important;
  background: transparent !important;
  background-image: none !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
}


/* ==================================================
   OVERVIEW MESSAGE(初期費用0円、制作費0円。)
================================================== */

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

.nd-service-message {
  width: min(100%, 790px);
  margin: 0;
  padding: 0;
}

.nd-service-message__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--service-black) !important;
  background: transparent !important;
  font-size: clamp(30px, 2.75vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.04em !important;
}

.nd-service-message__body {
  width: min(100%, 700px);
  margin: clamp(14px, 1.6vw, 20px) 0 0 !important;
  padding: 0 !important;
  color: var(--service-black) !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: .01em !important;
}


/* ==================================================
   PLANS(3カラム)
================================================== */

/*
 * 3枚のカードを実際に包んでいるのは.nd-service-plans__grid自身
 * (.nd-service-plansというクラスを持つ要素はページ内に存在しない)。
 */
.nd-service-plans__grid {
  display: flex;
  flex-wrap: wrap;

  /*
   * JavaScript側で高さを揃える処理を行っているため、CSSの
   * stretchは不要。SWELL側の初期CSS(記事内ブロックの最後の
   * 要素だけmargin-bottom:0にする仕様)でカードの下余白が
   * 不揃いになるのを避けるため、flex-startにしてCSS側の伸縮を
   * 止める。
   */
  align-items: flex-start;
  gap: var(--service-plan-gap);

  /* カード列だけ、セクション標準の余白よりもさらに内側へ寄せる(見出し・案内文はここより外側=標準の余白のまま) */
  width: calc(100% - (var(--service-plans-extra-inset) * 2));

  margin: clamp(56px, 6vw, 90px) auto 0;
}

/* 3枚のカードは実際には.wp-block-group__inner-containerの内側に並ぶ */
.nd-service-plans__grid.wp-block-group {
  display: block;
}
.nd-service-plans__grid.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--service-plan-gap);
}


/* PLAN CARD */
.nd-service-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;

  /* 親のgap(--service-plan-gap)ぶんを差し引いた1/3幅で3等分にする */
  flex: 1 1 calc(33.333% - (var(--service-plan-gap) * 2 / 3));

  padding: clamp(14px, 1.4vw, 20px);

  border: 1.5px solid var(--service-black);
  background: var(--service-white);

  /* SWELL側の初期CSSが並びの最後の要素だけmargin-bottom:0にするため、カード同士の間隔はgapで確保し、ここは3枚とも一律0にする */
  margin-bottom: 0 !important;
}

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

.nd-service-plan__visual img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/*
 * プラン名の帯をカードのpadding分だけ外側へ押し出し、カード自身の
 * 黒枠の内側の面にちょうど届く位置まで伸ばす。これでカード自身の
 * 黒枠(4辺・1.5px)がそのまま帯の縁取りとして見えるため、帯自身に
 * 別の黒枠は不要になる。押し出す量はpadding分のみ(border分は
 * 足さない、枠の線に重ならないようにするため)。
 *
 * このカード(.nd-service-plan)はdisplay:flex; flex-direction:
 * columnのため、負のmargin-topが0に打ち消される(flexの主軸方向
 * 開始側だけに起こる既知の挙動)。marginではなくposition:relative
 * + topで上方向の移動を切り替えて回避している(左右はmarginの
 * まま)。position:relativeは占有スペースを動かさないため、
 * 押し出した分だけmargin-bottomを減らして価格行との間隔を相殺
 * している。
 */
.nd-service-plan__name {
  display: block !important;
  position: relative !important;

  width: calc(100% + clamp(14px, 1.4vw, 20px) * 2) !important;
  top: calc(-1 * clamp(14px, 1.4vw, 20px)) !important;
  margin:
    0
    calc(-1 * clamp(14px, 1.4vw, 20px))
    calc(clamp(18px, 1.8vw, 24px) - clamp(14px, 1.4vw, 20px))
    calc(-1 * clamp(14px, 1.4vw, 20px))
    !important;
  padding: 16px 0 !important;

  /* SWELLの見出しブロック既定デザイン(左に太いライム色の線)を打ち消す */
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;

  /* ボックスの左右いっぱいにライムの背景、その上に黒文字 */
  color: var(--service-black) !important;
  background: var(--service-accent) !important;
  background-image: none !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
  text-align: center;
  white-space: nowrap !important;
}

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


/* PRICE ROWS(月払い・年払い) */
.nd-service-plan__pricing {
  display: block;
  width: 100%;
}

.nd-service-plan__price {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;

  width: 100%;
  padding: 14px 0;

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

/* 月払い行(.nd-service-plan__price--annualが付いていない方)の下側の余白だけを狭める。年払い行の上側の余白はそのまま */
.nd-service-plan__price:not(.nd-service-plan__price--annual) {
  padding-bottom: 4px;
}

.nd-service-plan__price-label {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding-top: 0;
  color: var(--service-gray);
  font-size: 13px;
  font-weight: 400;
  /* line-height:1.45だと行送り分の余白が上下不均等な書体で中央からズレて見えるため、文字の実寸に近いline-height:1にする */
  line-height: 1;
  text-align: left;
}

.nd-service-plan__price-value {
  grid-column: 2;
  justify-self: end;
  display: flex;
  /* 「円/月(税込)」が数字の桁数が変わっても常に数字の下端に合わせて配置されるよう下揃えにする */
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
}

.nd-service-plan__price-value strong {
  /* HEROセクションの金額表示と同じ数字専用書体に統一する */
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--service-price-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
}

.nd-service-plan__price-meta {
  /* 「円/月」「(税込)」を縦2行ではなく横1行に並べ、ブロックの高さを数字の高さより十分小さくすることで下揃えの効果を出す */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  color: var(--service-black);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.nd-service-plan__price-meta > span {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* SAVING BUBBLE — 枠線・ツノのある吹き出し型は廃止し、ミニマルなテキスト表記(黒文字+チェックマーク)に */
.nd-service-plan__saving {
  /* 上のグレーの罫線(.nd-service-plan__priceのborder-top)と同じ幅まで、1列目・2列目両方にまたがる */
  grid-column: 1 / -1;
  /* 割り当てられた幅いっぱいに広がるstretchにすることで、実際にグレーの罫線と同じ幅になる */
  justify-self: stretch;
  align-self: end;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;

  margin: 0 !important;
  padding: 8px 10px !important;

  border: 1px solid var(--service-black);
  background: transparent;

  color: var(--service-black);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 数字部分はJavaScript側で<strong>タグに自動的に囲んでいる(noya-service-home.js参照)。周囲の文字と同じ書体を継承し、太字だけ解除する */
.nd-service-plan__saving strong {
  font-weight: 400;
}

/* JS(noya-service-home.js)が<strong>と残りの文字を1つにまとめて包むラッパー。1つのフレックスアイテムにすることで上下中央揃えのズレを防ぐ */
.nd-service-plan__saving-text {
  line-height: 1;
}

.nd-service-plan__saving::before {
  content: "";
  flex: none;
  display: block;
  width: 8px;
  height: 5px;
  margin-bottom: 2px;
  border-left: 1.5px solid var(--service-black);
  border-bottom: 1.5px solid var(--service-black);
  transform: rotate(-45deg);
}


/* PLAN CTA */
.nd-service-plan__cta-wrap {
  width: 100%;
  display: flex;
  justify-content: center;

  margin: 16px 0 18px;
  padding: 0;
}

/* ボタンB(nd-ds-button-b)は他ページでは軽い導線用のため文字が小さめ(14px)。ここは購入導線の本ボタンのため、このカード内での使用時だけサイズを引き上げる */
.nd-service-plan__cta-wrap .nd-ds-button-b {
  gap: 12px !important;
  font-size: 16px !important;
  padding-bottom: 7px !important;
}
.nd-service-plan__cta-wrap .nd-ds-button-b::after {
  width: 8px !important;
  height: 8px !important;
}


/* SPEC ROWS */
.nd-service-plan__specs {
  width: 100%;
  margin: 0;
  padding: 0;
}

.nd-service-plan__spec {
  display: grid;
  grid-template-columns: minmax(92px, .9fr) minmax(0, 1.1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
}

.nd-service-plan__spec dt,
.nd-service-plan__spec dd {
  margin: 0;
  padding: 0;
}

.nd-service-plan__spec dt {
  color: var(--service-gray);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.nd-service-plan__spec dd {
  justify-self: end;
  text-align: right;
  color: var(--service-black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}


/* ==================================================
   COMMON(全プラン共通)
================================================== */

.nd-service-common {
  width: min(88%, 1040px);
  margin: clamp(40px, 4vw, 64px) auto 0;
  padding: clamp(28px, 3vw, 42px) clamp(26px, 3.6vw, 50px);
  border: 0;
  background: #EEEEEA;
}

.nd-service-common__header { margin: 0; padding: 0; border: 0; }

.nd-service-common__title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  /* H2/H4と同じSWELL既定装飾を打ち消す */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--service-black) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -.03em !important;
}

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

.nd-service-common__lead {
  width: min(100%, 690px);
  margin: 0 !important;
  padding: 0 !important;
  color: var(--service-black) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/*
 * ulにタグ指定することで、編集画面で個別の「リスト項目」ブロック
 * (li)側に誤って同じCSSクラスが入力されてしまっても、liには
 * このレイアウト指定(display:flexなど、3等分の入れ物としての
 * 役割)が効かないようにしている。
 */
ul.nd-service-common__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--service-common-col-gap);
  row-gap: 10px;
  width: 100%;
  margin: 40px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nd-service-common__list li {
  position: relative;
  min-width: 0;
  flex: 0 0 calc(33.333% - (var(--service-common-col-gap) * 2 / 3));
  margin: 0 !important;
  padding: 0 0 0 18px;
  color: var(--service-black);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

.nd-service-common__list li::before {
  content: "—";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--service-black);
  font-weight: 400;
}


/* SECTION CTA(サービス内容を詳しく見る) */
.nd-service__footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(62px, 6.5vw, 92px);
}
.nd-service__footer .nd-ds-button-b {
  font-size: 16px !important;
}


/* ==================================================
   見出しの登場演出(WORKSと同じ仕組み)
================================================== */

.is-heading-pending {
  opacity: 0 !important;
  transform: translate3d(0, 46px, 0) !important;
  will-change: opacity, transform;
}
.is-heading-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 1000ms cubic-bezier(.22,.61,.36,1),
    transform 1200ms cubic-bezier(.22,1,.36,1) !important;
}


/* ==================================================
   レスポンシブ
================================================== */

@media (max-width: 959px) {
  .nd-service { display: block; }

  .nd-service__inner {
    max-width: none;
    padding:
      clamp(28px, 4vw, 40px)
      clamp(34px, 7vw, 68px)
      clamp(31px, 4vw, 44px);
  }

  .nd-service-plans__grid,
  .nd-service-plans__grid.wp-block-group > .wp-block-group__inner-container {
    gap: 24px;
  }

  /* タブレット以下は1列積みでカード自体が中央寄せされるため、外側の追加インセットは不要(二重に狭くなるのを防ぐ)。上の余白だけは案内文との間隔を保つため引き続き必要 */
  .nd-service-plans__grid {
    width: 100%;
    margin: clamp(45px, 5vw, 65px) 0 0;
  }

  .nd-service-plan {
    flex-basis: 100%;
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .nd-service-common { width: min(92%, 920px); }
  .nd-service-common__list li { flex-basis: calc(50% - (var(--service-common-col-gap) / 2)); }
}

@media (max-width: 767px) {
  .nd-service { --service-price-size: 34px; }

  .nd-service__inner {
    padding: 36px clamp(22px, 6vw, 38px) 44px;
  }

  .nd-service__heading-frame { min-height: 68px; padding: 13px 18px; border-width: 2px; }
  .nd-service.nd-service .nd-service__title,
  html body .nd-service.nd-service .nd-service__title { font-size: 26px !important; }

  .nd-service-message__title { font-size: 28px !important; line-height: 1.35 !important; }
  .nd-service-message__body { font-size: 15px !important; margin-top: 12px !important; }

  .nd-service-plans__grid { margin-top: 36px; }

  /* このブレークポイントでは.nd-service-planのpaddingが固定値(縦18px/横16px)に変わるため、帯の押し出し量・価格行との間隔もその固定paddingに合わせて計算し直す */
  .nd-service-plan__name {
    width: calc(100% + 16px * 2) !important;
    top: calc(-1 * 18px) !important;
    margin-left: calc(-1 * 16px) !important;
    margin-right: calc(-1 * 16px) !important;
    /* 縦の押し出し量(18px)と価格行との間隔(18px)が同じ値のため、相殺すると0になる */
    margin-bottom: 0 !important;
    font-size: 21px !important;
  }

  /*
   * カード自体の横幅を控えめにして中央寄せにすることで、
   * 「左ラベル・右の値」の行でラベルと値の距離が間延びするのを
   * 詰める。カードはflexアイテム(flex-basis:100%)のため、
   * max-widthで縮めた上で、親をこのブレークポイントに限り
   * display:gridの1列レイアウトに切り替え、縮めても必ず1枚ずつ
   * 縦に並ぶようにしている。
   */
  .nd-service-plans__grid.wp-block-group > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .nd-service-plan {
    padding: 18px 16px;
    width: min(90%, 300px) !important;
    max-width: min(90%, 300px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nd-service-plan__price {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 10px;
    padding: 11px 0;
  }
  .nd-service-plan__spec { grid-template-columns: 96px minmax(0, 1fr); padding: 8px 0; }

  .nd-service-common { width: 100%; margin-top: 60px; padding: 26px 20px; }
  .nd-service-common__list { row-gap: 9px; margin-top: 30px !important; }
  .nd-service-common__list li { flex-basis: 100%; font-size: 15px; }

  .nd-service__footer { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-service *, .nd-service *::before, .nd-service *::after {
    transition: none !important;
  }
}


/* ==================================================
   Gutenberg編集画面だけの完成状態表示
================================================== */
.editor-styles-wrapper .nd-service .is-heading-pending {
  opacity: 1 !important;
  transform: none !important;
}