@charset "UTF-8";
/* TATAKI — スライドの 2 サービス（services/deck・services/consulting）だけで使う部品。接頭辞は sd-。
   共通の部品（見出し・ボタン・見積もり .est・キャンペーン・流れ .steps・FAQ・CTA）は lp.css、
   コンサル図解は consult.css（build.mjs が自動で読む）。動きは lp.css の 3 種だけ（ここでは hover の 4px 持ち上げのみ）。 */

/* ---------- ヒーロー ---------- */
.sd-tagline {
  margin-top: 12px;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
.sd-hero .page-lead { margin-top: 18px; }
/* キャンペーンの札は 1 行を占める（後ろの英字ラベルと並ばないように）。押せる高さは 40px 以上 */
.sd-hero .promo-pill { display: flex; width: fit-content; max-width: 100%; min-height: 40px; }
/* サービス資料（PDF）への導線（download/ ができたらページ側のコメントを外す） */
.sd-hero__pdf { margin-top: 16px; font-size: 14px; font-weight: 700; }
.sd-hero__pdf a { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 3px; }
.sd-hero__pdf a:hover { color: var(--accent-ink); }

/* 句のまとまりで折り返す（見出しの <span class="sd-phr">） */
.sd-phr { display: inline-block; }
/* 行末に 1〜2 文字だけ残らないように（対応ブラウザのみ。効かなくても崩れない）。
   短い 1〜2 行の文は句のまとまりで折り返し、長い本文は最後の行だけ整える */
.sd-target__desc,
.sd-decide__q,
.sd-checks li,
.sd-diagrams .cs-cap__desc,
.sd-diagrams .consulting__docs-title,
.sd-diagrams .consulting__doc-list li,
.sd-estimate .est__sub,
.faq .qa__text {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 本文も句のまとまりで折り返す（「トー／ン」「しま／す。」のような語の途中の改行を防ぐ）。
   入りきらない句は lp.css の overflow-wrap: break-word で折れるので、はみ出さない。
   3 行以上になる本文は pretty を掛けない（句の折り返しと重なると、行が短く不ぞろいになる） */
.page-lead,
.metrics__note,
.sec-lead,
.step__text,
.qa__a p,
.sd-pair__text,
.sd-points .point__text,
.sd-flow__note,
.sd-estimate .est__note,
.sd-works .work__desc,
.sd-campaign .campaign__text,
.sd-diagrams .consulting__lead {
  word-break: auto-phrase;
  text-wrap: wrap;
}
.sd-pair__note,
.sd-terms .facts dd,
.sd-extras span,
.sd-terms__hint,
.sd-works__note,
.sd-campaign .campaign__note,
.sd-diagrams .consulting__note {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 伝える資料：束ねたスライド（3 枚） */
.sd-hero__visual { width: 100%; max-width: 480px; margin-inline: auto; }
@media (min-width: 960px) {
  .page-hero__grid > .sd-hero__visual { grid-column: 8 / span 5; max-width: none; padding-left: clamp(0px, 2vw, 24px); }
}
.sd-stack { position: relative; aspect-ratio: 5 / 4; }
.sd-stack img {
  position: absolute;
  width: 80%;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.sd-stack img:nth-child(1) { right: 0; top: 0; rotate: 5deg; box-shadow: var(--shadow-s); }
.sd-stack img:nth-child(2) { right: 7%; top: 23%; rotate: 1.5deg; }
.sd-stack img:nth-child(3) { left: 0; bottom: 0; rotate: -3deg; box-shadow: var(--shadow-l); }

/* 考える資料：こんな判断に使う資料です */
.sd-decide {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-l);
  background: var(--soft);
}
.sd-decide__title { font-size: 15px; font-weight: 900; line-height: 1.5; letter-spacing: .04em; }
.sd-decide__list { margin-top: 14px; border-top: 1px solid var(--line-2); }
.sd-decide__list li {
  display: grid;
  gap: 2px;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.sd-decide__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.sd-decide__name { font-size: 15.5px; font-weight: 700; line-height: 1.6; font-feature-settings: "palt"; }
.sd-decide__q { color: var(--sub); font-size: 13.5px; line-height: 1.7; }
@media (min-width: 600px) and (max-width: 959px) {
  .sd-decide__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* ---------- 伝える資料：対象（誰に届ける資料か） ---------- */
.sd-targets {
  display: grid;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}
@media (min-width: 560px) { .sd-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sd-targets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.sd-target {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.sd-target__to {
  align-self: flex-start;
  padding: 2px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}
.sd-target__name {
  margin-top: 12px;
  font-size: 17.5px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .03em;
  font-feature-settings: "palt";
}
.sd-target__name small {
  margin-left: 8px;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sd-target__desc { margin-top: 6px; color: var(--sub); font-size: 14px; line-height: 1.8; }
.sd-target--more {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
}
.sd-target--more .sd-target__name { margin-top: 0; }
.sd-target__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 40px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 700;
  text-underline-offset: 3px;
}
.sd-target__link svg { width: 16px; height: 16px; flex: none; }
.sd-target__link:hover { color: var(--accent-ink); }
/* スマホ：1 枚の白い面に行で並べる（読み手の札は右に） */
@media (max-width: 559px) {
  .sd-targets {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
  }
  .sd-target {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name to" "desc desc" "link link";
    column-gap: 12px;
    align-items: center;
    padding: 16px 18px 17px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .sd-target__to { grid-area: to; align-self: center; }
  .sd-target__name { grid-area: name; margin-top: 0; font-size: 16.5px; }
  .sd-target__desc { grid-area: desc; margin-top: 2px; font-size: 13.5px; }
  .sd-target__link { grid-area: link; padding-top: 8px; }
  .sd-target--more { border-bottom: 0; background: var(--soft); }
}

/* ---------- 2 つの資料サービスのちがい ---------- */
.sd-pair {
  display: grid;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line-2);
}
.sd-pair__head { padding-bottom: 8px; }
.sd-pair__title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.sd-pair__note { margin-top: 10px; color: var(--sub); font-size: 14px; line-height: 1.9; }
.sd-pair__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.sd-pair__item.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sd-pair__tag {
  align-self: flex-start;
  padding: 2px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}
.is-current .sd-pair__tag { border-color: var(--ink); background: var(--ink); color: #fff; }
.sd-pair__name {
  display: block;
  margin-top: 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .04em;
}
.sd-pair__text { display: block; margin-top: 6px; color: var(--sub); font-size: 14.5px; line-height: 1.85; }
.sd-pair__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 700;
}
.sd-pair__more svg { width: 16px; height: 16px; flex: none; }
.sd-pair__item--link { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.sd-pair__item--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.sd-pair__item--link:hover .sd-pair__more { color: var(--accent-ink); }
@media (min-width: 720px) {
  .sd-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-pair__head { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sd-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: stretch; }
  .sd-pair__head { grid-column: 1 / span 4; padding: 8px 16px 0 0; }
  .sd-pair__item.is-current { grid-column: 5 / span 4; }
  .sd-pair__item--link { grid-column: 9 / span 4; }
}

/* ---------- 特長・つくり方（.points の図つき。見出しは少し小さく） ---------- */
.sd-point__title { font-size: clamp(21px, 2vw, 25px); letter-spacing: .04em; }
@media (max-width: 899px) {
  /* 1 列のときは図を低くして、縦に長くなりすぎないように */
  .sd-points .point__fig { aspect-ratio: auto; height: 128px; margin-bottom: 22px; }
  .sd-points .point__fig svg { width: auto; height: 100%; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* タブレット：図を左、文を右に */
  .sd-points .point {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 28px;
  }
  .sd-points .point__fig { grid-row: 1 / span 3; align-self: center; height: auto; aspect-ratio: 16 / 10; margin-bottom: 0; }
  .sd-points .point__fig svg { width: 84%; height: auto; }
}

/* ---------- 料金と見積もり ＋ 納期・含まれるもの ---------- */
.sd-estimate {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 1024px) {
  .sd-estimate { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; }
  .sd-estimate > .est { grid-column: 1 / span 7; }
  .sd-estimate > .sd-terms { grid-column: 8 / span 5; }
}
.sd-terms {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
.sd-terms__title { margin-bottom: 14px; font-size: 17px; font-weight: 900; line-height: 1.5; letter-spacing: .04em; }
.sd-terms__title--sub { margin-top: 32px; }
.sd-terms .facts > div { padding: 13px 0; font-size: 14.5px; }
.sd-checks { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.sd-checks li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.7;
}
.sd-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
}
.sd-extras { border-top: 1px solid var(--line); }
.sd-extras li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.8;
}
.sd-extras b { font-weight: 700; }
.sd-extras span { color: var(--sub); }
.sd-terms__hint { margin-top: 12px; color: var(--sub); font-size: 13px; line-height: 1.8; }
@media (max-width: 479px) {
  .sd-extras li { gap: 12px; font-size: 14px; }
}

.sd-campaign { margin-top: clamp(32px, 4vw, 48px); }
.sd-campaign .campaign { margin: 0; }

/* ---------- サンプル ---------- */
.sd-works__note { margin-top: 32px; text-align: center; }
/* スマホ：2 列の小さなカードに（説明文は省き、選ぶとビューアで 5 枚見られる） */
@media (max-width: 559px) {
  .sd-works .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; margin-top: 32px; }
  .sd-works .work__media { margin: 0 6px 6px 0; }
  .sd-works .work__media::after { translate: 3px 3px; }
  .sd-works .work__media::before { translate: 6px 6px; }
  .sd-works .work__frame,
  .sd-works .work__media::before,
  .sd-works .work__media::after { border-radius: 6px; }
  /* 「5 SLIDES」の札は、小さいカードでは表紙の見出しにかぶり文字も小さすぎるので出さない（5 枚ずつ見られることは見出しの説明で伝える） */
  .sd-works .work__count { display: none; }
  .sd-works .work__body { margin-top: 12px; }
  .sd-works .work__meta { gap: 8px; font-size: 11.5px; }
  .sd-works .work__title { margin-top: 2px; font-size: 15px; }
  .sd-works .work__desc { display: none; }
  .sd-works__note { text-align: left; }
}

/* ---------- 流れ ---------- */
.sd-flow__note { margin-top: 28px; color: var(--sub); font-size: 14px; line-height: 1.9; }

/* ---------- 考える資料：コンサル図解（consult.css の断片をこのページの見出し・余白にそろえる） ---------- */
.consulting.sd-diagrams { padding-block: var(--section-y); background: var(--bg); }
.consulting.sd-diagrams .consulting__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  padding-inline: var(--gutter);
}
.consulting.sd-diagrams .consulting__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: .2em;
}
.consulting.sd-diagrams .consulting__label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--accent);
  box-shadow: 3px -3px 0 -1px var(--bg), 3px -3px 0 0 var(--line-2);
}
.consulting.sd-diagrams .consulting__docs .consulting__label { margin-bottom: 14px; }
.consulting.sd-diagrams .consulting__docs .consulting__label::before { box-shadow: 3px -3px 0 -1px var(--soft), 3px -3px 0 0 var(--line-2); }
.consulting.sd-diagrams .consulting__title {
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.42;
  letter-spacing: .04em;
  word-break: auto-phrase;
}
.consulting.sd-diagrams .consulting__lead {
  max-width: 38em;
  margin-top: 24px;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 2;
}
.consulting.sd-diagrams .consulting__docs { border-color: transparent; background: var(--soft); }
.sd-diagrams__more { margin-top: clamp(40px, 5vw, 56px); }