/*
 * 公式サイトLPの見た目（日本語版・英語版で共通）。
 *
 * ページ内の <style> が骨組み（並び・大きさ・スマホの折り返し）を持ち、
 * このファイルが「見た目の調子」を上書きする。ページ内の <style> より後に
 * 読み込むこと（同じ強さのセレクタは後から来たほうが勝つ）。
 *
 * 調子の方針（参考にしたLPに合わせた）:
 *   - 色は青1色＋紺。紫やグラデーションの札は使わない
 *   - 背景は白と、ごく薄い青みのグレーを交互に。区切りは線ではなく余白で
 *   - 見出しは太すぎない（900 → 700）。小さな英字ラベル＋2行の見出し
 *   - 中身は白いカード（角丸・細い線・やわらかい影）に入れる
 *   - 押すものは青い丸ボタン。脇の選択肢は文字リンク
 */

:root {
	--blue: #2B5FDC;
	--blue-light: #5A85EA;
	--blue-tint: #EEF3FE;
	--navy: #1D2A4D;
	--navy-band: #233B69;
	--purple: #2B5FDC; /* 旧デザインの紫。青にそろえる */
	--bg: #ffffff;
	--bg-soft: #F6F8FD;
	--text: #2A3448;
	--muted: #5B6B82;
	--border: #E6ECF6;
	--radius: 18px;
	--card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(35, 59, 105, .06);
}

body { color: var(--text); letter-spacing: .01em; }

/* ---------------- ヘッダー ---------------- */
header { background: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(230, 236, 246, .8); }
.nav-links a { font-weight: 500; font-size: 13.5px; color: #3A4560; }
/* メニューが横に並ぶ幅では、ロゴとの間を必ず空け、ロゴは縮めず、項目の間を少し詰める
   （クラウド版はメニューの文字が長く、ロゴにくっついていた） */
@media (min-width: 961px) {
	.nav { gap: 28px; }
	.nav-logo { flex: 0 0 auto; } /* ロゴは縮めない */
	.nav-links { gap: 15px; }
}
@media (min-width: 961px) and (max-width: 1120px) {
	.nav-links { gap: 8px; }
	.nav-links a { font-size: 12.5px; }
	.nav-links .nav-cta .btn { padding: 10px 16px; font-size: 13px; }
}
/* 上の一文より強くしておかないと、ヘッダーの青いボタンの文字まで紺になる */
.nav-links a.btn, .nav-links a.btn-primary, .nav a.btn-primary { color: #fff; font-weight: 700; }
.btn { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.btn-primary {
	background: var(--blue);
	box-shadow: 0 6px 16px rgba(43, 95, 220, .22);
	background-image: none;
}
.btn-primary:hover { background: #2453C7; }
.btn-ghost { border-color: var(--border); color: var(--navy); background: #fff; }

/* ---------------- ヒーロー ---------------- */
.hero {
	padding: 56px 0 64px;
	background:
		radial-gradient(900px 420px at 85% 10%, rgba(90, 133, 234, .10), transparent 70%),
		linear-gradient(180deg, #fff 0%, #FBFCFF 100%);
	text-align: left;
	overflow: hidden;
}
.hero::before, .hero::after { display: none; }

.hv {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: center;
}
.hv-eyebrow {
	font-size: 12px; font-weight: 600; letter-spacing: .16em;
	color: var(--muted); text-transform: uppercase; margin: 0 0 18px;
	font-family: 'Nunito', 'Noto Sans JP', sans-serif;
}
.hv-title {
	font-size: clamp(34px, 4.6vw, 54px);
	line-height: 1.32;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: .02em;
	margin: 0 0 22px;
}
.hv-title em {
	font-style: normal;
	color: var(--blue);
	font-size: 1.12em;
}
.hv-lead { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 30px; }
.hv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 14px; }
.hv-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--blue); color: #fff; text-decoration: none;
	padding: 15px 30px; border-radius: 999px;
	font-weight: 700; font-size: 15.5px; letter-spacing: .02em;
	box-shadow: 0 10px 24px rgba(43, 95, 220, .25);
	transition: transform .15s, background .15s;
}
.hv-btn:hover { background: #2453C7; transform: translateY(-1px); }
/* クリック計測のため旧ボタンの名前（mv-btn）も付けている。旧ボタンの矢印の色を引き継がない */
.hv-btn.mv-btn span { color: inherit; }
.hv-link { color: var(--navy); font-weight: 600; font-size: 14.5px; text-decoration: none; border-bottom: 1px solid rgba(29, 42, 77, .25); padding-bottom: 2px; }
.hv-link:hover { color: var(--blue); border-color: var(--blue); }
.hv-note { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.hv-news {
	display: inline-flex; align-items: flex-start; gap: 10px;
	background: #FFFBEB; border: 1px solid #FCEFC7; color: #6B5310;
	border-radius: 12px; padding: 9px 14px; font-size: 12.5px; line-height: 1.6;
	text-decoration: none; max-width: 100%;
}
.hv-news .tag { background: #F5B301; color: #fff; font-weight: 800; font-size: 10.5px; border-radius: 6px; padding: 1px 7px; flex: 0 0 auto; margin-top: 1px; }
.hv-news:hover { border-color: #F5D77A; }

.hv-visual { position: relative; padding: 26px 0 40px 26px; }
.hv-frame {
	border-radius: 28px; overflow: hidden;
	background: #fff; border: 1px solid var(--border);
	box-shadow: 0 30px 60px rgba(35, 59, 105, .14);
}
.hv-frame img { display: block; width: 100%; height: auto; }
.hv-float {
	position: absolute; background: #fff; border: 1px solid var(--border);
	border-radius: 14px; box-shadow: 0 14px 34px rgba(35, 59, 105, .14);
	font-size: 12.5px; color: var(--navy);
}
.hv-float-top { top: 0; left: 0; padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hv-float-top .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
.hv-float-card { left: 0; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 14px 18px 14px 14px; min-width: 260px; }
.hv-float-card .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-tint); display: grid; place-items: center; flex: 0 0 auto; }
.hv-float-card .body { display: grid; gap: 2px; }
.hv-float-card .k { font-weight: 700; font-size: 13px; }
.hv-float-card .t { color: var(--muted); font-size: 11.5px; }
.hv-float-card .bars { display: flex; gap: 4px; margin-top: 6px; }
.hv-float-card .bars i { width: 14px; height: 6px; border-radius: 3px; background: #C9D7FA; }
.hv-float-card .bars i:nth-child(-n+6) { background: var(--blue); }

/* スマホのヘッダー画像は前のまま（日本語版）。PCでは出さない。 */
.hv-mobile { display: none; }

/* 旧ヒーローの部品は使わない（英語版で残っていても出さない） */
.mv-band, .mv-mobile, .hero-note, .new-pill { display: none !important; }

/* 信頼の帯 */
.hv-trust { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hv-trust ul { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; }
.hv-trust li { font-size: 12.5px; color: #4A5670; display: flex; align-items: center; gap: 8px; }
.hv-trust li::before {
	content: ""; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
	background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232B5FDC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* 4つの工程 */
.hero-steps { padding: 64px 0 24px; }
.loop-label { color: var(--muted); font-weight: 500; font-size: 13px; letter-spacing: .08em; }
.loop-step {
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--card-shadow);
}
.loop-step .num { color: var(--blue); font-weight: 700; letter-spacing: .14em; font-size: 11px; }
.loop-step .t { color: var(--navy); font-weight: 700; }
.loop-step .d { color: var(--muted); }

/* ---------------- セクションの型 ---------------- */
section { padding: 96px 0; }
/* 背景は白と淡い青を交互に。旧デザインの紫・緑がかったグラデーションはやめる。
   並び順どおりに1つずつ決める（alt の付け方に任せると、淡い青が続く所があった）。 */
.adopt-band, #results, #vs-ai, #types, #podcast, #compare, #faq { background: var(--bg-soft); }
#features, #lp-builder, #mcp, #pricing, #director, #voices { background: #fff; }
.sec-label {
	font-size: 11.5px; font-weight: 600; letter-spacing: .22em; color: var(--blue);
	font-family: 'Nunito', 'Noto Sans JP', sans-serif;
}
.sec-title {
	font-weight: 700; color: var(--navy);
	font-size: clamp(24px, 3.2vw, 32px);
	line-height: 1.55; letter-spacing: .03em;
	margin: 12px 0 16px;
}
.sec-lead { color: var(--muted); font-size: 14.5px; line-height: 1.95; margin-bottom: 56px; }

/* カード類。どれも「白・角丸・細い線・やわらかい影」にそろえる */
.feature, .feature-mini, .vs-card, .voice, .type, .plan, .info-card, .adopt-kind,
.flow-step, .podcast-point, .mcp-chat, .mcp-tool, .kata-card, .cal-demo {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
}
.feature h3, .vs-card b, .voice-title, .type b, .plan h3, .adopt-kind b { color: var(--navy); font-weight: 700; }
.feature p, .vs-card span, .voice-quote, .type span, .adopt-kind span { color: var(--muted); }
/* アイコンは、淡い青の角丸の四角に載せる */
.feature .icon, .vs-icon {
	display: inline-grid; place-items: center;
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--blue-tint); font-size: 24px; line-height: 1;
}
.badge-new, .feature-mini .badge-new { background: var(--blue); background-image: none; }
/* 旧デザインの紫のグラデーションを青1色にそろえる */
.mcp-msg.is-ai .who { background: var(--blue); background-image: none; }
.flow-step.is-new { border-color: var(--blue); box-shadow: 0 10px 26px rgba(43, 95, 220, .16); }
.bill-toggle .save { color: var(--blue); }
.bill-toggle.active .save { color: #fff; }

/* 導入実績 */
.adopt-label { color: var(--blue); font-weight: 600; letter-spacing: .22em; font-size: 11.5px; }
.adopt-count .num { color: var(--blue); background: none; -webkit-text-fill-color: currentColor; font-weight: 700; }

/* 表 */
.cmp-table, .vs-table { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.cmp-table thead th, .vs-table thead th { background: #F8FAFE; color: var(--navy); font-weight: 600; }
.cmp-table thead th.is-us, .vs-table thead th:last-child { background: var(--blue); background-image: none; color: #fff; }
.cmp-table td.is-us, .vs-table td:last-child { background: #F3F7FF; color: var(--navy); font-weight: 600; }
.cmp-bar { background: #C9D7FA; }
.cmp-row:first-child .cmp-bar, .cmp-bar.is-us { background: var(--blue); }

/* ---------------- 料金 ---------------- */
.bill-toggle { border-radius: 999px; }
.bill-toggle.active { background: var(--blue); background-image: none; color: #fff; }
.plan { padding-top: 34px; }
.plan.featured {
	border: 1.5px solid var(--blue);
	box-shadow: 0 18px 44px rgba(43, 95, 220, .16);
}
.plan .badge {
	background: var(--blue); background-image: none; color: #fff;
	border-radius: 999px; font-weight: 700; letter-spacing: .04em;
}
.plan .price { font-weight: 800; color: var(--navy); }
.plan li { border-bottom: 1px solid #F1F4FA; }
.plan li::before { color: var(--blue); }

/* ---------------- よくある質問 ---------------- */
.faq details {
	background: #fff; border: 1px solid var(--border); border-radius: 14px;
	box-shadow: none; margin-bottom: 10px;
}
.faq summary { color: var(--navy); font-weight: 600; }

/* ---------------- 最後のCTA（濃紺 → 淡い青） ---------------- */
.cta-band {
	background:
		radial-gradient(700px 300px at 50% 0%, rgba(90, 133, 234, .18), transparent 70%),
		linear-gradient(180deg, #F1F5FE 0%, #E8EFFD 100%);
	color: var(--navy);
	border-top: 1px solid var(--border);
}
.cta-band h2 { color: var(--navy); font-weight: 700; letter-spacing: .03em; }
.cta-band p { color: var(--muted); }
.cta-band .btn-primary, .cta-band .btn { background: var(--blue); color: #fff; border: none; }

/* ---------------- フッター（濃紺 → 白） ---------------- */
footer { background: #fff; color: var(--muted); border-top: 1px solid var(--border); }
.footer-grid a { color: #4A5670; }
.footer-grid a:hover { color: var(--blue); }
.footer-grid h4, .footer-grid b, .footer-grid strong { color: var(--navy); }
.copyright { color: #8A95AB; border-color: var(--border); }

/* ---------------- スマホ ---------------- */
@media (max-width: 900px) {
	.hv { grid-template-columns: 1fr; gap: 40px; }
	.hv-visual { padding: 22px 0 46px 0; }
	.hv-float-top { left: 12px; }
	.hv-float-card { left: 12px; right: 12px; min-width: 0; }
}
@media (max-width: 767px) {
	.hero { padding: 36px 0 44px; }
	/* 前のヘッダー画像を、前と同じく画面の端から端まで出す。
	   見出し・説明・管理画面は絵の中にあるので、HTMLのほうは隠す
	   （ボタンとリンク、NEWのお知らせは残す）。 */
	.hero:has(.hv-mobile) { padding-top: 24px; }
	.hv:has(.hv-mobile) { gap: 28px; }
	.hv-mobile { display: block; margin: 0 calc(50% - 50vw); }
	.hv-mobile img { display: block; width: 100%; height: auto; }
	.hv:has(.hv-mobile) .hv-eyebrow,
	.hv:has(.hv-mobile) .hv-title,
	.hv:has(.hv-mobile) .hv-lead,
	.hv:has(.hv-mobile) .hv-visual { display: none; }
	.hv-title { font-size: clamp(30px, 8.4vw, 40px); }
	.hv-lead { font-size: 15px; }
	.hv-lead .pc-br { display: none; }
	.hv-actions { gap: 12px 18px; }
	.hv-btn { width: 100%; justify-content: center; }
	.hv-trust ul { justify-content: flex-start; gap: 8px 18px; padding: 14px 0; }
	.hv-trust li { font-size: 12px; }
	section { padding: 72px 0; }
	.hero-steps { padding: 48px 0 8px; }
}

/* 英語版は見出しが本物の h1。旧ヒーローの「.hero h1」（中央寄せ・極太）に負けないよう強めに書く */
.hero h1.hv-title {
	font-size: clamp(34px, 4.6vw, 54px); line-height: 1.22; font-weight: 700;
	color: var(--navy); text-align: left; margin: 0 0 22px; letter-spacing: -.005em;
}
@media (max-width: 767px) {
	.hero h1.hv-title { font-size: clamp(30px, 8.4vw, 40px); }
}
/* 長い大見出し（クラウド版の「1記事198円から、…」など）は一段小さく。
   製品トップと同じ大きさだと左の列に収まらず、「、」だけが次の行に落ちる。 */
.hv-title.is-long, .hero h1.hv-title.is-long { font-size: clamp(30px, 3.9vw, 46px); }
@media (max-width: 767px) {
	.hv-title.is-long, .hero h1.hv-title.is-long { font-size: clamp(28px, 7.8vw, 36px); }
}

/* セキュリティ（#security） */
.sec-shield { background: linear-gradient(180deg, #F3F7FF 0%, #fff 100%); }
.shield-panel { max-width: 760px; margin: 0 auto 36px; background: #fff; border: 1px solid #DCE8FB; border-radius: 16px; box-shadow: 0 12px 32px rgba(29,42,77,.08); overflow: hidden; }
.shield-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--navy); color: #fff; font-size: 14px; }
.shield-head span { opacity: .75; font-size: 12px; }
.shield-rows { list-style: none; margin: 0; padding: 6px 0; }
.shield-rows li { display: grid; grid-template-columns: 28px minmax(0, 190px) 1fr; gap: 10px; align-items: center; padding: 11px 20px; border-top: 1px solid #EEF2F8; font-size: 14px; }
.shield-rows li:first-child { border-top: 0; }
.shield-rows .st { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; background: #1F9D55; }
.shield-rows .is-warn .st { background: #E0892B; }
.shield-rows b { color: var(--navy); }
.shield-rows .d { color: var(--muted); }
.shield-rows .is-warn .d { color: #B5661A; font-weight: 600; }
.shield-points { margin-top: 32px; max-width: 1030px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.shield-credit { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }
@media (max-width: 600px) {
	.shield-rows li { grid-template-columns: 26px 1fr; padding: 10px 14px; }
	.shield-rows .d { grid-column: 2; font-size: 13px; }
	.shield-head { padding: 12px 14px; }
}
.hv-trust li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }