@charset "UTF-8";
/* TATAKI — 資料内製化キット（services/kit/）だけで使う部品。接頭辞は kit-。service-detail.css（見積もりの並び
   .estimate__grid・納期の表 .terms）の後に読む。見積もり .est・FAQ・CTA などの共通の部品は lp.css、計算は lp.js の
   [data-estimate="kit"]。動きは lp.css の 3 種だけ（ここでは足さない。計算の棒も動かさない）。
   事実は tataki/docs/BRIEF-v2.md §1「新商品：資料内製化キット」だけ。 */

/* ---------- ヒーロー ---------- */
.kit-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;
}
.kit-phr { display: inline-block; }
.kit-hero .page-lead { margin-top: 18px; }

/* 右の絵：テンプレート（16:9 の枠）に、プロンプト集のカードと「実装支援」の札を重ねる（aria-hidden。中身は本文にもある） */
.kit-hero__visual { width: 100%; max-width: 480px; margin-inline: auto; }
@media (min-width: 960px) {
  .page-hero__grid > .kit-hero__visual { grid-column: 8 / span 5; max-width: none; padding-left: clamp(0px, 2vw, 24px); }
}
.kit-visual { position: relative; aspect-ratio: 5 / 4.4; }
.kit-visual::before {
  content: "";
  position: absolute;
  inset: 8% 0 6% 8%;
  border-radius: 24px;
  background: var(--soft);
}
.kit-visual__tpl {
  position: absolute;
  top: 0;
  left: 0;
  width: 82%;
  rotate: -2deg;
}
.kit-visual__tpl svg {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-l);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.kit-visual__prompt {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 56%;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-l);
  rotate: 2deg;
}
.kit-visual__prompt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.kit-visual__prompt-head::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
}
.kit-visual__prompt ul { display: grid; gap: 6px; margin-top: 10px; }
.kit-visual__prompt li {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  line-height: 1.5;
}
.kit-visual__prompt li:first-child { background: var(--accent); color: var(--ink); font-weight: 700; }
.kit-visual__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-s);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
/* テンプレートの札は左上に（左下だと、狭い幅でプロンプト集のカードに隠れる） */
.kit-visual__tpl .kit-visual__tag { left: 12px; top: -14px; }
.kit-visual__tag--support { left: 6%; bottom: 6%; background: var(--accent-ink); color: #fff; }
@media (max-width: 959px) {
  .kit-hero .page-hero__grid { gap: 40px; }
}
@media (max-width: 479px) {
  .kit-visual__prompt { padding: 10px 12px 12px; }
  .kit-visual__prompt li { padding: 3px 8px; font-size: 11px; }
  .kit-visual__tag { padding: 3px 10px; font-size: 11px; }
}

/* ---------- キットに含まれるもの（3 つ） ---------- */
.kit-items {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 56px);
}
@media (min-width: 900px) {
  .kit-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.kit-item {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
.kit-item--key { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kit-item__head { display: flex; align-items: baseline; gap: 12px; }
.kit-item__no { font-family: var(--font-en); font-size: 15px; font-weight: 800; color: var(--accent-ink); }
.kit-item__en {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--sub);
}
.kit-item__name {
  margin-top: 10px;
  font-size: clamp(20px, 2vw, 23px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
.kit-item__text { margin-top: 10px; color: var(--sub); font-size: 15px; line-height: 1.85; }
.kit-item__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.kit-item__list li {
  padding: 3px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.kit-item__point {
  margin-top: auto;
  padding-top: 18px;
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
}

/* ---------- 費用対効果：外注 2 件分でキットの料金に届く（例。帯の長さは 30 万円 × 2 件 ＝ キットの額でそろえる） ---------- */
.kit-compare {
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
.kit-compare__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.kit-compare__ex {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}
.kit-compare__rows {
  position: relative;
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  margin-top: 20px;
}
/* 2 件分の位置（60%）に縦の破線：キットの帯の右端と、外注の 2 件目の右端がそろう */
.kit-compare__rows::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: calc(4.5em + 16px + (100% - 4.5em - 16px) * .6);
  border-left: 2px dashed var(--accent);
  pointer-events: none;
}
.kit-compare__name { font-size: 14px; font-weight: 700; }
.kit-compare__name.is-kit { color: var(--accent-ink); }
.kit-compare__bar { display: flex; min-height: 52px; border-radius: 10px; overflow: hidden; }
.kit-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.kit-seg--out { flex: 0 0 30%; background: var(--line); }
.kit-seg--out + .kit-seg--out { border-left: 2px solid #fff; }
.kit-seg--more { flex: 1 1 auto; background: repeating-linear-gradient(-45deg, var(--soft) 0 8px, #fff 8px 16px); color: var(--sub); font-weight: 500; }
.kit-seg--kit { flex: 0 0 60%; background: var(--ink); color: #fff; font-family: var(--font-en); font-size: 15px; font-weight: 800; }
.kit-seg--free { flex: 1 1 auto; background: var(--accent-tint); color: var(--accent-ink); }
.kit-compare__note { margin-top: 20px; color: var(--sub); font-size: 13px; }
@media (max-width: 599px) {
  .kit-compare__rows { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kit-compare__rows::after { left: 60%; top: 28px; }
  .kit-compare__name + .kit-compare__bar { margin-bottom: 8px; }
  .kit-seg { padding: 6px; font-size: 11.5px; }
  .kit-seg--kit { font-size: 13px; }
}

.kit-merits {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 720px) {
  .kit-merits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
}
.kit-merit {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-l);
  background: var(--soft);
}
.kit-merit__en {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--accent-ink);
}
.kit-merit__title {
  margin-top: 8px;
  font-size: clamp(20px, 2vw, 23px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.kit-merit__text { margin-top: 8px; color: var(--sub); font-size: 15px; line-height: 1.85; }

/* ---------- 回収の目安（lp.js の [data-estimate="kit"]） ---------- */
.kit-calc__fields { display: grid; gap: 20px; }
@media (min-width: 600px) {
  .kit-calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.kit-calc__yen { width: 100%; max-width: 220px; }
.est--kit .est__count { min-width: 0; }
.est--kit .est__number { min-width: 0; }
.kit-out { display: grid; gap: 14px; }
.kit-out__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
}
.kit-out__label { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.kit-out__yen {
  font-family: var(--font-en);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.kit-out__yen small { margin-left: 2px; font-family: var(--font-ja); font-size: 13px; font-weight: 700; }
.kit-out__bar {
  grid-column: 1 / -1;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.kit-out__bar i { display: block; height: 100%; border-radius: inherit; background: var(--line-2); }
.kit-out__row.is-kit .kit-out__bar i { background: var(--ink); }
.est--kit.is-filled .kit-out__row:first-child .kit-out__bar i { background: var(--accent); }
.kit-out__verdict { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line-2); }
/* 狭い幅：名前を上の行に、金額をその下に（「資料内製化キッ／ト」と折れないように） */
@media (max-width: 479px) {
  .kit-out__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kit-out__bar { margin-top: 6px; }
}
.kit-out__verdict b { font-size: 1.1em; }
.est--kit .est__table td:last-child { color: var(--ink); }
.est--kit .est__table tbody tr:nth-child(2) td { color: var(--accent-ink); font-weight: 700; }

/* ---------- 文節で折り返す（「テンプレー／ト」「しま／す。」のような語の途中の改行を防ぐ） ---------- */
.page-lead,
.metrics__note,
.sec-lead,
.kit-item__text,
.kit-merit__text,
.kit-compare__note,
.kit-seg,
.kit-out__verdict,
.est--kit .est__note,
.qa__a p,
.terms .facts dd {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.faq .qa__text { word-break: auto-phrase; text-wrap: pretty; }