/* AIKATA トップ：最初の画面（2026-10-22 作り直し）
   この画面の見た目はこのファイルだけで決める。古い hero110・trust227・service-facts111 のルールは scripts/aikata-css-purge.py で削除済み
   参考にした考え方（n-works.link）：色は墨・青・白にしぼる／影とグラデーションを使わず、青一色の面で区切る／見出しは1つの型
   チャット画面（.chat165）は「流れ」のページと共通の部品なので、ここでは置き場所だけを決める */

html body.aikata .fv {
  --fv-ink: #1b1e2b;
  --fv-muted: #55607a;
  --fv-blue: #0f64ae;
  --fv-cta: #d9480f;
  --fv-cta-hover: #b83c0c;
  --fv-row: #e2e6ec;
  --fv-ease: cubic-bezier(.26, .16, .1, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 浮かぶヘッダーの後ろまで色を敷く（--header211 はヘッダーの高さ。final211.js が入れる） */
  margin-top: calc(var(--header211, 100px) * -1);
  padding: calc(var(--header211, 100px) + clamp(40px, 5vw, 80px)) 0 clamp(40px, 5vw, 72px);
  background: linear-gradient(180deg, #e3eef9 0%, #eef5fc 62%, #fff 100%);
  color: var(--fv-ink);
}
/* 方眼（上ほど濃く、下で消える） */
html body.aikata .fv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(15, 100, 174, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 100, 174, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 85%);
  pointer-events: none;
}
/* チャットの後ろの青い円 */
html body.aikata .fv::after {
  content: '';
  position: absolute;
  top: calc(var(--header211, 100px) - 120px);
  right: -160px;
  z-index: -1;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(15, 100, 174, .30), rgba(15, 100, 174, .10) 55%, transparent 70%);
  pointer-events: none;
}
html body.aikata .fv .chat165 { box-shadow: 0 24px 48px rgba(15, 50, 90, .14); }

html body.aikata .fv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* 見出しまわり */
/* 小見出しは h1 の中（検索語「定額制のWEBマーケティング支援」を h1 に含めるため） */
html body.aikata .fv-eyebrow {
  display: block;
  margin: 0 0 20px;
  font: 700 15px/1.6 'Noto Sans JP', sans-serif;
  letter-spacing: .08em;
  color: var(--fv-blue);
}
html body.aikata .fv-title {
  margin: 0;
  font: 700 clamp(32px, 3.4vw, 50px)/1.45 'Noto Sans JP', sans-serif;
  letter-spacing: .02em;
  color: var(--fv-ink);
  text-align: left;
}
html body.aikata .fv-row { display: block; overflow: hidden; }
html body.aikata .fv-title em {
  font-style: normal;
  color: inherit;
  background: linear-gradient(transparent 62%, rgba(255, 221, 51, .55) 62%);
}
html body.aikata .fv-lead {
  margin: 28px 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--fv-ink);
}
html body.aikata .fv-lead strong { display: block; font-weight: 700; }

/* ボタン（申し込みは朱色。白い文字とのコントラストのため 19px の太字） */
html body.aikata .fv-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
html body.aikata .fv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 30px;
  border-radius: 999px;
  font: 700 19px/1.2 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .4s var(--fv-ease), color .4s var(--fv-ease), transform .4s var(--fv-ease);
}
html body.aikata .fv-btn.is-primary { background: var(--fv-cta); color: #fff; }
html body.aikata .fv-btn.is-primary:hover { background: var(--fv-cta-hover); }
html body.aikata .fv-btn.is-primary span { transition: transform .4s var(--fv-ease); }
html body.aikata .fv-btn.is-primary:hover span { transform: translateX(4px); }
html body.aikata .fv-btn.is-ghost { background: #fff; color: var(--fv-ink); box-shadow: inset 0 0 0 1.5px var(--fv-ink); font-size: 17px; }
html body.aikata .fv-btn.is-ghost:hover { background: var(--fv-ink); color: #fff; }
html body.aikata .fv-btn:focus-visible { outline: 3px solid var(--fv-blue); outline-offset: 3px; }
html body.aikata .fv-note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--fv-muted); }

/* 3つの数字：青一色の面 */
html body.aikata .fv-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: 0;
  padding: clamp(28px, 3vw, 40px) 0;
  list-style: none;
  background: var(--fv-blue);
  border-radius: 24px;
  color: #fff;
}
html body.aikata .fv-proof li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 clamp(24px, 3.5vw, 48px);
}
html body.aikata .fv-proof li + li { border-left: 1px solid rgba(255, 255, 255, .32); }
html body.aikata .fv-proof span { font-size: 14px; font-weight: 700; line-height: 1.6; }
html body.aikata .fv-proof strong {
  font: 800 clamp(36px, 3.4vw, 52px)/1.1 'Barlow', 'Noto Sans JP', sans-serif;
  letter-spacing: .01em;
}
html body.aikata .fv-proof small { margin: 0 2px; font: 700 16px/1.4 'Noto Sans JP', sans-serif; }

/* 運営会社の実績：月桂樹のエンブレム3つ（月桂樹は symbol #fv-laurel を左右反転して使う） */
html body.aikata .fv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html body.aikata .fv-trust { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }
html body.aikata .fv-emblems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body.aikata .fv-emblem { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; }
html body.aikata .fv-laurel { flex: 0 0 auto; width: 46px; height: 96px; color: #b08a3e; }
html body.aikata .fv-laurel.is-r { transform: scaleX(-1); }
html body.aikata .fv-emblem p { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0; }
html body.aikata .fv-emblem span { font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--fv-muted); }
html body.aikata .fv-emblem strong { font: 800 clamp(26px, 2.4vw, 34px)/1.2 'Barlow', 'Noto Sans JP', sans-serif; letter-spacing: .02em; color: var(--fv-ink); white-space: nowrap; }
html body.aikata .fv-emblem strong small { margin-left: 2px; font: 700 15px/1 'Noto Sans JP', sans-serif; }
html body.aikata .fv-emblem strong em { font: 700 clamp(15px, 1.3vw, 18px)/1.5 'Noto Sans JP', sans-serif; font-style: normal; }
html body.aikata .fv-trust > small { display: block; margin-top: 12px; font-size: 12px; color: var(--fv-muted); }

/* 見出しは一行ずつ下からせり上がる（入場演出が開いてから） */
@media (prefers-reduced-motion: no-preference) {
  html body.aikata .fv-row > * , html body.aikata .fv-row { animation: fv-rise 1s cubic-bezier(.43, .05, .17, 1) both; }
  html body.aikata .fv-row:nth-child(3) { animation-delay: .08s; }
  html body.aikata .fv-row:nth-child(4) { animation-delay: .16s; }
  html.op222-pre .fv-row, html.op222-on:not(.op222-split) .fv-row { animation-play-state: paused; }
}
@keyframes fv-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* 入場演出が開くまで、チャットの吹き出しも止めておく（もとは .hero110 .c165 に付いていた） */
html.op222-pre .fv .c165, html.op222-pre .fv .c165 i,
html.op222-on:not(.op222-split) .fv .c165, html.op222-on:not(.op222-split) .fv .c165 i { animation-play-state: paused !important; }

@media (max-width: 960px) {
  /* スマホ・タブレット：見出しのすぐ下に、相談のやり取りを短くして入れる（「何をしてくれるか」が最初の画面でわかるように）
     並び：見出し → やり取り（2つの吹き出し） → 説明 → ボタン → 3つの数字 → 実績
     PC の「右にチャット」をそのまま下に落とすと、数字の後ろに回って意味がなくなるため、.fv-grid と .fv-copy をほどいて並べ替える */
  html body.aikata .fv { display: flex; flex-direction: column; padding-top: calc(var(--header211, 80px) + clamp(16px, 5vw, 40px)); }
  html body.aikata .fv::after { top: 40px; right: -40vw; width: 110vw; }
  html body.aikata .fv-grid, html body.aikata .fv-copy { display: contents; }
  html body.aikata .fv-title, html body.aikata .fv-lead, html body.aikata .fv-ctas, html body.aikata .fv-note,
  html body.aikata .fv .chat165 { box-sizing: border-box; width: min(100% - 32px, 720px); margin-inline: auto; }
  html body.aikata .fv-title { order: 1; }
  html body.aikata .fv .chat165 { order: 2; margin-top: 20px; }
  html body.aikata .fv-lead { order: 3; }
  html body.aikata .fv-ctas { order: 4; }
  html body.aikata .fv-note { order: 5; }
  html body.aikata .fv-proof { order: 6; margin-top: 32px; }
  html body.aikata .fv-trust { order: 7; }
  html body.aikata .fv-title { font-size: clamp(28px, 7.4vw, 44px); }
  /* やり取りは「依頼先が別々で大変」→「まとめてお任せください」の2つだけ。見出し・テーマ選びは出さない（すぐ下にボタンがあるため） */
  html body.aikata .fv .chat165-head, html body.aikata .fv .chat165-foot, html body.aikata .fv .c165.me:first-child,
  html body.aikata .fv .c165.typing { display: none; }
  /* 説明文は、やり取りの返事と同じ内容になるので出さない */
  html body.aikata .fv-lead { display: none; }
  html body.aikata .fv .chat165 { border-radius: 20px; }
  html body.aikata .fv .chat165-log { min-height: 0; height: auto; gap: 10px; padding: 14px; }
  html body.aikata .fv .c165 { font-size: 14px; line-height: 1.7; }
  html body.aikata .fv .c165.me { padding: 10px 14px; }
  html body.aikata .fv .c165.ai p { padding: 12px 14px; }
  html body.aikata .fv .c165.ai br { display: none; }
  html body.aikata .fv .c165.ai .c169-l1 { display: block; font-weight: 700; }
  html body.aikata .fv-ctas { margin-top: 24px; }
}
@media (max-width: 640px) {
  html body.aikata .fv-eyebrow { margin-bottom: 12px; font-size: 13px; }
  html body.aikata .fv-title { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.5; }
  html body.aikata .fv-lead { margin-top: 18px; font-size: 15px; line-height: 1.9; }
  html body.aikata .fv-ctas { flex-direction: column; gap: 10px; margin-top: 24px; }
  html body.aikata .fv-btn { width: 100%; justify-content: center; min-height: 58px; }
  html body.aikata .fv-btn.is-ghost { min-height: 50px; font-size: 16px; }
  html body.aikata .fv-note { font-size: 13px; text-align: center; }
  /* 数字：料金を一段目に大きく、残り2つを二段目に並べる */
  html body.aikata .fv-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; border-radius: 20px; }
  html body.aikata .fv-proof li { padding: 18px 20px; }
  html body.aikata .fv-proof li:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(255, 255, 255, .32); }
  html body.aikata .fv-proof li + li { border-left: 0; }
  html body.aikata .fv-proof li:last-child { border-left: 1px solid rgba(255, 255, 255, .32); }
  html body.aikata .fv-proof span { font-size: 12px; }
  html body.aikata .fv-proof strong { font-size: 30px; }
  html body.aikata .fv-proof li:first-child strong { font-size: 40px; }
  html body.aikata .fv-proof small { font-size: 13px; }
  html body.aikata .fv-emblems { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html body.aikata .fv-laurel { width: 32px; height: 68px; }
  html body.aikata .fv-emblem strong { font-size: 28px; }
}

/* パンくず（/aikata/team に移したので「トップページ › AIKATA WEBマーケティングチーム」） */
html body.aikata .fv-crumb { margin: 0 0 18px; }
html body.aikata .fv-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--fv-muted); }
html body.aikata .fv-crumb li { display: flex; gap: 6px; margin: 0; }
html body.aikata .fv-crumb a { color: var(--fv-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  html body.aikata .fv-crumb { order: 0; box-sizing: border-box; width: min(100% - 32px, 720px); margin-inline: auto; }
}