@charset "UTF-8";
/* TATAKI — Web サイトの 3 ページ（services/web・samples・samples/web）だけで使う部品。
   全ページ共通の部品は lp.css、サービス詳細の共通（見積もりの並び・納期の表・特長）は service-detail.css。
   動きは lp.css の 3 種のうち「ふわっと出る（data-reveal）」と「hover で 4px 持ち上げ」だけを使う。 */

/* 本文は文節で折り返す（「Web サイ／ト」「トー／ンで」のような切れ方をさせない。対応していないブラウザでは今までどおり） */
#main p,
#main li,
#main dd,
#main figcaption,
#main summary { word-break: auto-phrase; }

/* ==========================================================================
   services/web
   ========================================================================== */

/* ---------- ヒーロー：同じ会社のスライドとサイトを重ねる ---------- */
.web-visual { margin: 0; }
.web-visual__stage { position: relative; padding-bottom: 18%; }
.web-visual__browser {
  margin-left: 14%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-l);
}
.web-visual__bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--soft); }
.web-visual__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.web-visual__browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.web-visual__deck {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-l);
  rotate: -3deg;
}
.web-visual__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--sub);
  font-size: 12.5px;
  line-height: 1.6;
}
.web-visual__cap::before {
  content: "";
  flex: none;
  width: 14px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--accent);
}
@media (max-width: 959px) {
  .web-visual { max-width: 520px; }
}

/* ---------- 作れるサイト ---------- */
.kinds {
  display: grid;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}
@media (min-width: 640px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.kind {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
/* 小さなブラウザ枠（ロゴと同じく、墨の枠＋朱の面） */
.kind__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 19px;
  border: 1.5px solid var(--ink);
  border-top-width: 5px;
  border-radius: 3px;
}
.kind__icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
}
.kind__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.kind__desc { margin-top: 8px; color: var(--sub); font-size: 14px; line-height: 1.8; }
.kind__eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.kind__eg li {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
}

/* 記事のページ（テンプレート）とサンプルの記事への入口 */
.articles {
  display: grid;
  gap: 32px;
  margin-top: clamp(24px, 3vw, 32px);
  padding: clamp(24px, 3.4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
@media (min-width: 960px) {
  .articles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  .articles__head { grid-column: 1 / span 5; }
  .articles__links { grid-column: 7 / span 6; }
}
.articles__en,
.web-bundle__en {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--accent-ink);
}
.articles__title {
  margin-top: 8px;
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
.articles__lead { margin-top: 14px; color: var(--sub); font-size: 15px; line-height: 1.9; word-break: auto-phrase; }
.articles__label { margin-bottom: 4px; color: var(--sub); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.articles__head .articles__label { margin-top: 24px; }
.articles__parts { display: grid; gap: 2px; margin-top: 8px; }
.articles__parts li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 14.5px;
  line-height: 1.7;
}
.articles__parts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
}
.articles__list { border-top: 1px solid var(--line); }
.article-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.article-row__kind { font-size: 15.5px; font-weight: 700; line-height: 1.6; transition: color .2s; }
.article-row__site { grid-column: 1; color: var(--sub); font-size: 13px; line-height: 1.6; }
.article-row svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--sub); transition: color .2s; }
.article-row:hover .article-row__kind,
.article-row:hover svg { color: var(--accent-ink); }

/* ---------- サンプルサイト 7 種（小さなカード）＋収録ページへ ---------- */
.web-minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin-top: clamp(40px, 5vw, 56px);
}
@media (min-width: 720px) { .web-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1024px) { .web-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.web-mini { position: relative; }
.web-mini__shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top-width: 10px;
  border-radius: 8px;
  background: var(--soft);
  box-shadow: var(--shadow-s);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.web-mini:hover .web-mini__shot { transform: translateY(-4px); box-shadow: var(--shadow); }
.web-mini__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.web-mini__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.web-mini__pages { flex: none; font-family: var(--font-en); font-size: 10.5px; letter-spacing: .12em; }
.web-mini__name { margin-top: 2px; font-size: 15.5px; font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; }
.web-mini__name a { text-decoration: none; }
.web-mini__name a::after { content: ""; position: absolute; inset: -8px; z-index: 1; border-radius: 12px; }
.web-mini__name a:focus-visible { outline: none; }
.web-mini__name a:focus-visible::after { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.web-mini__name svg { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; }
/* 8 枚目：収録ページの一覧へ */
.web-mini__count { background: #fff; color: var(--ink); }
.web-mini__count-in {
  display: grid;
  place-content: center;
  justify-items: center;
  aspect-ratio: 16 / 10;
  text-align: center;
}
.web-mini__count b { font-family: var(--font-en); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.web-mini__count small { margin-top: 4px; color: var(--sub); font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.web-samples__note { margin-top: 40px; color: var(--sub); font-size: 13px; }

/* ---------- 料金：2 つのプラン＋まとめて依頼 ---------- */
@media (min-width: 960px) {
  .web-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
}
.web-bundle {
  display: grid;
  gap: 20px;
  max-width: 520px;
  margin: 24px auto 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--soft);
}
@media (min-width: 960px) {
  .web-bundle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 32px;
    max-width: 880px;
  }
}
/* ブラウザ枠＋スライドを重ねた印（サイト＋資料） */
.web-bundle__icon { position: relative; width: 64px; height: 48px; }
.web-bundle__icon::before,
.web-bundle__icon::after { content: ""; position: absolute; border-radius: 4px; }
.web-bundle__icon::before { right: 0; top: 0; width: 48px; height: 34px; border: 1.5px solid var(--ink); border-top-width: 6px; background: #fff; }
.web-bundle__icon::after { left: 0; bottom: 0; width: 34px; height: 20px; background: var(--accent); }
.web-bundle__name { margin-top: 6px; font-size: 24px; font-weight: 900; line-height: 1.4; letter-spacing: .06em; }
.web-bundle__desc { margin-top: 6px; color: var(--sub); font-size: 14.5px; line-height: 1.8; }
.web-bundle__eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.web-bundle__eg li {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.web-bundle__side { display: grid; gap: 16px; justify-items: start; }
@media (min-width: 960px) { .web-bundle__side { justify-items: end; text-align: right; } }
.web-bundle__price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.web-bundle__price .plan__yen { font-size: clamp(28px, 2.8vw, 36px); }

/* ---------- 見積もりの目安 ---------- */
.web-estimate { margin-top: clamp(88px, 11vw, 136px); }
.web-estimate__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.web-estimate .sec-lead { margin-top: 16px; }
/* JS で計算できるときは、同じ内容の静的な料金表を隠す（プランのカードにも金額があるため） */
.est--web .est__calc:not([hidden]) ~ .est__table { display: none; }
.terms .facts dd b { color: var(--ink); font-weight: 700; }
.web-campaign { margin-top: clamp(56px, 7vw, 88px); }
.web-campaign .campaign { margin: 0; }

/* ---------- 相談の帯（2 つのボタン・料金のまとめ） ---------- */
.cta-prices {
  display: grid;
  max-width: 640px;
  margin: 32px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.cta-prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}
.cta-prices li + li { border-top: 1px solid var(--line); }
.cta-prices b { font-family: var(--font-en); font-size: 16px; font-weight: 800; white-space: nowrap; }
@media (min-width: 640px) {
  .cta-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-prices li { flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px; text-align: center; }
  .cta-prices li + li { border-top: 0; border-left: 1px solid var(--line); }
  .cta-prices span { color: var(--sub); font-size: 12.5px; }
  .cta-prices b { font-size: 19px; }
}
.cta-prices__note { margin-top: 12px; color: var(--sub); font-size: 12.5px; }

/* ==========================================================================
   samples/web
   ========================================================================== */

/* ---------- ヒーロー：数（7 サイト・37 ページ・記事 12 ページ） ---------- */
.sites-count {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.sites-count > div { padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.sites-count > div:first-child { padding-left: 0; border-left: 0; }
.sites-count dt { color: var(--sub); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.sites-count dd { margin-top: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sites-count b { margin-right: 4px; font-family: var(--font-en); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- ヒーローの右：サイトの目次 ---------- */
.site-index {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
.site-index__label { color: var(--sub); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.site-index ol { margin-top: 10px; border-top: 1px solid var(--line); }
.site-index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.site-index__letter {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
}
.site-index__name { font-size: 14.5px; font-weight: 700; line-height: 1.5; transition: color .2s; }
.site-index__kind { color: var(--sub); font-size: 12px; font-weight: 500; }
.site-index__name .site-index__kind { margin-left: 8px; }
.site-index a:hover .site-index__name { color: var(--accent-ink); }
@media (max-width: 959px) {
  .site-index { max-width: 560px; }
}
/* スマホ：折り返すチップに（縦に長くしない） */
@media (max-width: 599px) {
  .site-index { padding: 0; border: 0; border-radius: 0; background: none; }
  .site-index ol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; border-top: 0; }
  .site-index a {
    display: inline-flex;
    gap: 8px;
    min-height: 40px;
    padding: 4px 12px 4px 5px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: #fff;
  }
  .site-index__letter { width: 24px; height: 24px; border-radius: 50%; }
  .site-index__name { font-size: 13px; }
  .site-index__name .site-index__kind { display: none; }
}

/* ---------- 一覧の頭 ---------- */
.sites-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.sites-bar__title { font-size: 18px; font-weight: 900; line-height: 1.5; letter-spacing: .04em; }
.sites-bar__note { color: var(--sub); font-size: 13.5px; line-height: 1.7; }
.sites-bar + .sites__grid { margin-top: clamp(40px, 5vw, 56px); }

/* 収録ページのチップ：lp.css は押せる高さ 40px・見た目 34px。指で押す画面では見た目も 40px に */
@media (max-width: 959px), (hover: none) {
  .page-link { margin-block: 0; }
  .page-link::before { inset: 0; }
}

/* ---------- 対応スライドをその場で開く（lp.js の .work / .work__btn を使う） ---------- */
.site__pair.work { z-index: 4; }
.site__pair-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 40px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.site__pair-view {
  display: inline-flex;
  margin-top: 1px;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.site__pair-view svg { width: 13px; height: 13px; }
.site__pair.work:hover .site__pair-btn { text-decoration: underline; text-underline-offset: 3px; }
.site__pair.work:hover .site__pair-view { text-decoration: none; }
.site__foot .site__open { margin-left: auto; }
.site__pair.work img { transition: box-shadow .2s; }
.site__pair.work:hover img { box-shadow: 0 0 0 1px var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .web-mini:hover .web-mini__shot { transform: none; }
}