@charset "UTF-8";

/* グローバルメニューCSSインポート */
@import url("./gmenu.css");



/* CSS Document */

/* box-sizingの優先値 */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* 画像がコンテナを超えないようにするため */
img {
    max-width: 100%;
}

/* テーブルのセル間のスペースを削除します */
table{
    border-collapse: collapse;
}

img,a img{
	border:none;
	background:transparent;
	vertical-align:bottom;
}


/*----------------------------------------------------*/

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 70px;
}
body{
	font-size:1.6rem;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

.txt-center {
	text-align:center;
}

.txt-right {
	text-align:right;
}

.txt-left {
	text-align:left;
}

.font-bold {
	font-weight:bold;
}

.font-normal {
	font-weight:normal;
}


main {
	width:800px;
}

@media (max-width: 800px) {
	main {
		width:100%
	}
}

.pinfo {
	margin:20px 0;
	padding:30px 10px;
	background:#fafafa;
	border-radius:5px;
}

.pname {
	font-family: 'Noto Sans JP', sans-serif;
	font-size:2.5rem !important;
	font-weight:bold;
}

section {
	margin-bottom:100px;
}


h1 {
	margin:0 0 30px;
	padding:10px;
	border-bottom:2px solid #222;
	line-height:120%;
	font-size:3rem;
	font-weight:bold;
}


h2 {
	border-bottom:2px dashed #333;
	margin:0 0 30px;
	padding: 50px 0 5px 10px;
	font-size:2.5rem;
	color:#222;
}

h3 {
	margin:50px 0 30px 10px;
	padding: 0 0 0 10px;
	border-left:10px solid #f67d28;
	font-size:2rem;
	color:#333;
}


p {
	margin:20px 10px;
	line-height:150%;
}


.imgbox {
	text-align:center;
	margin:50px auto;
}




@media (max-width: 576px) {
	.pinfo {
		margin:20px 0;
		padding:10px;
	}
	h1 {
		font-size:2rem;
	}
	h2 {
		font-size:2rem;
	}

	h3 {
		font-size:1.5rem;
	}

	p {
		margin:20px 5px;
		font-size:1.5rem;
	}
}


/* flex */

.flx {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:20px 0;
}

.press-flx {
	display:flex;
	justify-content: center;
}

.press-flx-lft {
	width:50%;
	margin:20px;
}

@media (max-width: 576px) {
	.press-flx {
		display: block;
	}

	.press-flx-lft {
		width:100%;
		margin:0;
		text-align: center;
	}
	
}



/* mp4 */

.video {
	text-align:center;
	margin-bottom:50px;
}

.video video {
	width:750px;
}


@media (max-width: 576px) {
	.video video {
		width:100%;
	}
}



/* ラベルアイコン */

.r-icon {
	background: #df002c;
	padding: 1px 5px;
	margin-left: 5px;
	vertical-align: middle;
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
}

.y-icon {
	background: #f39801;
	padding: 1px 5px;
	margin-left: 5px;
	vertical-align: middle;
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
}

.g-icon {
	background: #666;
	padding: 1px 5px;
	margin-left: 5px;
	vertical-align: middle;
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
}

.b-icon {
	background: #48bbf2;
	padding: 1px 5px;
	margin-left: 5px;
	vertical-align: middle;
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
}



/* 表 */


.tbl {
	width:90%;
	margin: 0 auto;
	padding:5px;
	border:1px solid #404040;
	background:#fff;
	font-size:0.9em;
}

.tbl th {
	background:#f67d28;
	border:1px solid #404040;
	padding:5px;
	font-weight:bold;
	text-align:center;
	color:#fff;
}

.tbl td {
	border:1px solid #404040;
	padding:5px;
}

.tbl td ul {
	margin-left:-10px;
}

.tbl td li {
	list-style:square;
	list-style-position: outside;

}

@media (max-width: 576px) {
	.tbl {
		width:100%;
		margin:0 5px;
	}

}




.env2 {
	width:80%;
	margin: 0 auto;
	padding:5px;
	font-size:0.9em;
}

.env2 td {
	padding:5px;
	border-bottom:1px solid #ccc;
}

@media (max-width: 576px) {
	.env2 {
		width:90%;
	}
}

.tri {
	margin: 0 auto;
	border:1px solid #404040;
	padding:5px;
	width:80%;
}

.tri td {
	border:1px solid #404040;
	padding:10px;
	text-align:center;
}



/* 購入 */

.buytable {
	width:98%;
	margin: 0 auto;
	border:1px solid #404040;
}

.buytable td {
	border:1px solid #404040;
	padding:10px;
}

.buytable p{
	margin-bottom:10px;
}
.buy-img {
	text-align:center;
	width:40%;
}

.buy-name {
	font-weight:bold;
	font-size:2rem;
}




footer {
	width:800px;
	margin:50px 0 0;
	text-align:center;
}

footer p {
	margin:20px;
	color:#666;
}

.copy {
	padding-top:10px;
	border-top:1px solid #aaa;
	font-size:1.2rem;
	margin-bottom:10px;
}

@media (max-width: 576px) {
	footer {
		width:100%;
	}
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ccc;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/* 法人向けライセンス */
.companypoint li {
	margin:0 0 10px 0;
	list-style-type: square;
}

.companyprodinfo {
	margin:20px 30px;
}

.companyprodinfo dt {
	font-weight:bold;
	margin:20px 0;
}

.companyprice {
	width:100%;
	margin: 0 auto;
	border:1px solid #fff;
	padding:5px;
	font-size:0.9em;
}

.companyprice th {
	border:1px solid #fff;
	padding:5px;
	background:#404040;
	color: #fff;
	font-weight: bold;
}

.companyprice td {
	border:1px solid #999;
	padding:5px;
}

.companyprice td{
	text-align: center;
}

.companyprice td:nth-child(4){
	text-align: right;
}


.kind01 {
	background: #e2fbdb;
}

.kind02 {
	background: #f6f0ff;
}

.kind03 {
	background:#e8ffff;
}
.companydocdl {
	display: flex;
	width:600px;
	margin:20px auto;
}

.companydocdl div {
	margin:10px 30px;
	text-align: center;
	font-size:1.3rem;
}



/* 製品をお選びください -------------- */
.catlist {
	background:#ececec;
	padding:10px;
}

.catlist ul {
	column-count: 3;
	font-size: 1.4rem;
}

.catlist ul li {
	list-style: none;
	margin-bottom:0.5rem;
}

.catlist ul li a {
	color:#000;
	text-decoration: none;
}
.catlist ul li:before {
	font-family: "Font Awesome 5 Free";
	content: '\f0da';
	font-weight: 900;
	color:#000;
	margin-right:5px;
}

.flimg {
	float:left;
	margin:0 20px 20px;
}

.clear {
	clear:both;
	margin-top:50px;
}


@media (max-width: 576px) {
	.catlist ul {
		margin-left:-30px;
	}

	.flimg {
		float:none;
	}

	.companydocdl {
		display: block;
		width:100%;
	}

	.companydocdl div {
		margin:20px 0;
	}

}




/* 楕円 */
.btn-oval {
	position: relative;
	width:300px;
	height:50px;
	margin:5px auto 20px;
	background: #eee;
	border-radius:50px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	text-align:center;
}

.btn-oval a {
	position: absolute;
	padding:13px;
	top: 0;
	left: 0;
	height:100%;
	width: 100%;
	color:#555;
	font-weight:bold;
	text-decoration:none;
}

.btn-oval a:hover {
	color:#000;
	border-radius:50px;
	background:#f8f4e6;
	text-decoration:none;
}

.responsive {
width: 100%;
aspect-ratio: 16/9;
}

.responsive {
width: 100%;
aspect-ratio: 16/9;
}

.responsive iframe {
width: 100%;
height: 100%;
}
/* v22: Vertical dropdown submenu like GitMind Chat */
.lp-page #menu .pnav-pc{ overflow:visible !important; }
.lp-page #menu .pnav-pc .has-sub{ position:relative; }

/* container */
.lp-page #menu .pnav-pc .submenu{
  display:none;
  position:absolute;
  left:0; top:100%;
  padding:0; margin:0;
  border:1px solid #e5e7eb;
  border-top:none;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  z-index:1000;
}

/* items as vertical blocks */
.lp-page #menu .pnav-pc .submenu li{ list-style:none; margin:0; padding:0; width:240px; }
.lp-page #menu .pnav-pc .submenu a{
  display:block;
  padding:12px 14px;
  background:#f67d28;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  line-height:1.3;
}
.lp-page #menu .pnav-pc .submenu a:hover{ background:#ff8d40; }

/* keep hover bridge to avoid losing focus while moving down */
.lp-page #menu .pnav-pc .has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:8px;
}

/* show on hover */
.lp-page #menu .pnav-pc .has-sub:hover .submenu{ display:block; }

/* Mobile: show the same list stacked under item (no absolute) */
.lp-page #menu .pnav-sp .submenu-sp{
  display:block; position:static; padding:6px 0 0; margin:0;
  border:none; box-shadow:none;
}
.lp-page #menu .pnav-sp .submenu-sp li{ list-style:none; margin:0 0 6px 0; }
.lp-page #menu .pnav-sp .submenu-sp a{
  display:block; padding:10px 12px; background:#f67d28; color:#fff; text-decoration:none;
}

/* v23: SP nav accordion submenu */
@media (max-width: 1024px){
  /* デフォルトは非表示 */
  .lp-page #menu .submenu-sp{ display:none !important; padding:0 !important; margin:0 !important; }

  /* open時にpnavのoverflow:hiddenを解除 */
  .lp-page #menu .pnav-sp:has(.has-sub-sp.open) {
    overflow: visible;
  }

  /* 製品概要liをposition基点に */
  .lp-page #menu .pnav-sp .has-sub-sp {
    position: relative;
  }

  /* .open クラスが付いた時だけ表示（absoluteでフロー外に） */
  .lp-page #menu .pnav-sp .has-sub-sp.open .submenu-sp{
    display:block !important;
    position:absolute;
    top:100%;
    left:0;
    z-index:100;
    min-width:200px;
    padding:0 !important;
    margin:0 !important;
    box-shadow:0 4px 8px rgba(0,0,0,0.12);
  }

  /* サブメニュー各アイテムのスタイル */
  .lp-page #menu .pnav-sp .submenu-sp li{
    list-style:none; margin:0; display:block;
  }
  .lp-page #menu .pnav-sp .submenu-sp a{
    display:block;
    padding:8px 16px;
    font-size:1.3rem;
    color:#555;
    text-decoration:none;
    background:#fff;
    border-bottom:1px solid #e8e8e8;
    white-space:nowrap;
  }
  .lp-page #menu .pnav-sp .submenu-sp a:hover{ background:#f5f5f5; }

  /* 製品概要リンクに矢印を追加 */
  .lp-page #menu .pnav-sp .has-sub-sp > a{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .lp-page #menu .pnav-sp .has-sub-sp > a::after{
    content:'▼';
    font-size:0.7em;
    transition:transform 0.2s;
    display:inline-block;
  }
  .lp-page #menu .pnav-sp .has-sub-sp.open > a::after{
    transform:rotate(180deg);
  }
}

/* v24: chip buttons for feature shortcuts */
.lp-page .chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:12px 8px 4px;
  align-items:center;
}
.lp-page .chips .chip{
  display:inline-block;
  padding:8px 14px;
  border-radius:9999px; /* full pill */
  background:#eef2ff;
  color:#1d4ed8;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  box-shadow:0 0 0 1px rgba(29,78,216,.15) inset;
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.lp-page .chips .chip:hover{
  background:#e0e7ff;
  box-shadow:0 0 0 1px rgba(29,78,216,.35) inset;
}
.lp-page .chips .chip:active{
  transform:translateY(1px);
}
.lp-page .chips .chip:visited{
  color:#1d4ed8;
}
@media (max-width: 576px){
  .lp-page .chips{ gap:10px; margin:10px 6px 0; }
  .lp-page .chips .chip{ padding:9px 12px; font-weight:600; }
}

/* v25: Sections — checklist, cards, badges, stacks, images */
.lp-page section h2{ margin: 28px 0 14px; font-weight: 800; font-size: var(--h2); }
.lp-page section#chatpdf h2{ border-bottom: 2px dashed #bdbdbd; padding-bottom: 10px; }

/* Checklist with green checks */
.lp-page ul.list-check{ list-style: none; margin: 8px 0 18px; padding-left: 0; }
.lp-page ul.list-check li{
  position: relative; padding-left: 28px; margin: 8px 0;
}
.lp-page ul.list-check li::before{
  content: "✔"; color: #16a34a; font-weight: 700;
  position:absolute; left:0; top:0; line-height:1.2;
}

/* Cards */
.lp-page .card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:18px 20px; margin:14px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.lp-page .card h4{ margin:0 0 8px; font-size: var(--h4); font-weight:700; }
.lp-page .card p{ margin:0; color:#111827; }

/* Badge */
.lp-page .badge{
  display:inline-block; font-size:1.2rem; line-height:1;
  padding:6px 10px; border-radius:9999px;
  background:#eef2ff; color:#475569; margin-bottom:10px;
  box-shadow:0 0 0 1px rgba(71,85,105,.18) inset;
}

/* Stack grid */
.lp-page .stack{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lp-page .stack .card{ margin:0; }
.lp-page .stack.stack-1col{
  grid-template-columns: 1fr;
}

/* Images */
.lp-page .imgbox.full img{ width:100%; height:auto; display:block; }




/* "プロンプト例" a bit larger and bolder */
.lp-page .card h4{ font-size: var(--h4); font-weight:800; }

/* Create suite - larger badge and title */
.lp-page #create .badge{ font-size:1.6rem; padding:7px 12px; }
.lp-page #create .card h4{ font-size: var(--h4); }

/* Feature grid card titles & body balance */
.lp-page .stack .card h4{ font-size: var(--h4); margin-bottom:6px; }
/* 全カード本文の文字を少し大きく */
.lp-page .stack .card p{ font-size: 1.6rem; line-height: 1.75; }
@media (max-width: 576px){
  .lp-page .stack .card p{ font-size: 1.4rem; }
}


/* v27: Unified heading scale using CSS variables */
:root{
  --h1: 2.7rem;
  --h2: 2.5rem;
  --h3: 2.0rem;
  --h4: 1.6rem;
}
@media (max-width: 576px){
  :root{
    --h1: 2.2rem;
    --h2: 2.0rem;
    --h3: 1.6rem;
    --h4: 1.6rem;
  }
}
/* Apply the scale globally (placed late to override prior rules) */
.lp-page h1{ font-size: var(--h1); line-height:1.25; }
.lp-page h2{ font-size: var(--h2); }
.lp-page h3{ font-size: var(--h3); }
.lp-page h4{ font-size: var(--h4); }


/* prompts */
#assistant-prompts .lead { margin: 0.5rem 0 1rem; }
#assistant-prompts .prompt-block { padding: 16px 0; border-top: 1px solid #e5e7eb; }
#assistant-prompts .prompt-block:first-of-type { border-top: none; }
#assistant-prompts .prompt-list { margin: 8px 0 0; padding-left: 1.2rem; }
#assistant-prompts .prompt-list li { margin: 6px 0; line-height: 1.7; }
#assistant-prompts .note.small { color: #6b7280; margin-top: 12px; font-size: .9rem; }

/* 動画ボックス */

.video-box {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  margin: 30px 0;
  background: #fafafa;
}

.video-caption {
  text-align: center;
  margin: 6px 0;
}

.video-caption .title {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.video-caption .desc {
  font-size: 1.3rem;
  color: #555;
  margin-top: 8px;
  line-height: 1.4;
}



/* ===== Feature cards 画像共通サイズ（1つだけ残す） ===== */
.lp-page img.toolimg{
  width:160px;
  height:auto;
  display:block;
}

/* two-cols 対象のみ：スマホで確実に2列、超狭幅は1列 */
.lp-page .stack.two-cols .card{ min-width:0; } /* 保険 */

/* 狭幅でも 2 列固定（SE 375px を含む） */
@media (max-width: 740px){
  .lp-page .stack.two-cols{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .lp-page .stack.two-cols .card{ padding: 8px !important; }
  .lp-page .stack.two-cols img.toolimg{ width: 120px; height:auto; }
}

/* ←ここを 380px → 340px などに下げる（SEは二列のまま） */
@media (max-width: 340px){
  .lp-page .stack.two-cols{ grid-template-columns: 1fr !important; }
  .lp-page .stack.two-cols img.toolimg{ width:75%; max-width:160px; height:auto; }
}

/* mainと同じ幅に揃えつつ左寄せ */
.banner {
  width: 800px;        /* 本文と同じ幅 */
  margin: 0 0 20px 0;  /* 左寄せ、下余白だけ */
}

.banner img {
  width: 100%;   /* コンテナ幅(800px)いっぱいに広げる */
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .banner {
    width: 100%;   /* スマホでは画面幅いっぱい */
  }
}


.lp-page .card h3 {
  margin: 0 0 12px;
  padding: 0 0 0 10px;
  border-left: 10px solid #f67d28;
}

#faq .card h3 {
  margin: 0 0 12px;
  padding: 0;
  border-left: none;
}

/* ===== expert KPI / note ===== */
.expert-kpi{
  margin:8px 0 16px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.pill{
  display:inline-block;
  background:#fff; border:1px solid #ddd; border-radius:999px;
  padding:6px 12px; font-size:.95rem; line-height:1; font-weight:500;
}
.pill.highlight{
  background:#f67d28; color:#fff; border-color:#f67d28;
}
.expert-note{
  margin:-4px 0 18px; font-size:.88rem; color:#666;
}
.expert-note a{ color:#333; text-decoration:underline; }


/* ===== KPI pills tune up ===== */
.expert-kpi{
  margin: 12px 0 16px;
  display: flex; flex-wrap: wrap; gap: 10px;
}

.expert-kpi .pill{
  /* 小さく見える原因が font-size: .95rem なので拡大＆太字 */
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.28rem);
  line-height: 1.15;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  border-width: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.expert-kpi .pill.highlight{
  background: #f67d28; color: #fff; border-color: #f67d28;
  box-shadow: 0 2px 6px rgba(246,125,40,.35);
}

/* h2 が大きいページで視覚バランスを合わせる（任意） */
.expert-head h2{ margin-bottom: 6px; }

/* 注記は読みやすく、でも控えめに */
.expert-note{
  margin: 4px 0 18px;
  font-size: .95rem; color: #666;
}


/* ===== expert badges bigger ===== */
.expert-badges{
  /* 以前に display:none を入れていた場合も上書き表示 */
  display:flex; flex-wrap:wrap; gap:10px;
  margin:10px 0 18px;
}

/* 下段バッジの強調を解除して統一（白×グレー枠） */
.expert-badges .badge{
  font-size: clamp(1rem, 0.86rem + 0.6vw, 1.18rem);
  font-weight: 700;
  line-height: 1.15;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid #d5d5d5;
  background: #fff;
  color: #222;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

@media (max-width: 768px){
  .expert-badges .badge{ font-size: 1rem; }
}

/* ===== expert text tune ===== */
.expert-lead{
  margin: 10px 0 18px;
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.18rem);
  line-height: 1.8;
  color: #222;
}
.expert-lead a{ color:#333; text-decoration: underline; }

/* サブ見出し（用途別ユースケース／話者識別／要約テンプレート） */
.expert-subttl{
  margin: 18px 0 10px;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  /* グローバルh3の左ボーダーを無効化 */
  border-left: none;
  padding: 0;
  color:#111;
}

.expert-details{
  margin-top: 10px;
}
.expert-details p{
  margin: 4px 0 12px;
  font-size: 1rem;
  line-height: 1.9;
  color:#333;
}


/* カード本文を一段読みやすく */
.expert-card p{
  font-size: clamp(1.02rem, 0.96rem + 0.45vw, 1.18rem);
  line-height: 1.9;
}

/* 機能の柱（話者識別/要約テンプレ）の本文も合わせる */
.detail-card p{
  font-size: clamp(1.02rem, 0.96rem + 0.45vw, 1.18rem);
  line-height: 1.9;
}

.note-inline{ color:#666; font-size:.95em; }

.expert-card h3 i{ margin-right:.45em; vertical-align: -0.05em; }


/* ===== lead text bigger ===== */
.expert-sec .expert-lead{
  /* 先に書いた指定を上書きします */
  font-size: clamp(1.20rem, 1.0rem + 1.0vw, 1.60rem);
  line-height: 1.95;
  letter-spacing: .01em;
  color: #111;
}
.expert-sec .expert-lead .note-inline{ font-size: .98em; color:#666; }

/* ===== intro card below "用途別ユースケース" ===== */
.expert-right .expert-intro{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  margin: 8px 0 14px;
}
.expert-right .expert-intro p{
  font-size: clamp(1.06rem, 0.98rem + 0.55vw, 1.24rem);
  line-height: 1.9;
  color:#222;
}

/* 既存カード本文もやや拡大（読みやすく） */
.expert-card p,
.detail-card p{
  font-size: clamp(1.04rem, 0.98rem + 0.45vw, 1.20rem);
  line-height: 1.9;
}

/* ===== 専門領域セクション 文字サイズアップ ===== */

/* 「会議・医療・法律・インタビューなど〜」の説明（導入カード） */
.lp-page .expert-sec .expert-right .expert-intro p{
  font-size: clamp(1.18rem, 0.90rem + 1.00vw, 1.46rem);
  line-height: 1.95;
  color:#111;
}

/* 用途カードの本文（例：50万件超の医療対話で〜 など） */
.lp-page .expert-sec .expert-card p{
  font-size: clamp(1.12rem, 0.95rem + 0.80vw, 1.34rem);
  line-height: 1.90;
  color:#222;
}

/* 強調（60分→約6分／10分→約1分 など）を少し太く */
.lp-page .expert-sec .expert-card p strong{
  font-weight: 800;
}

/* 余白の微調整（文字が大きくなったぶん） */
.lp-page .expert-sec .expert-card{ padding: 18px 22px; }

/* ===== 用途別ユースケース：本文を大きく、上下の余白を縮める ===== */

/* カード本文（例：録音をアップロードするだけで〜）のサイズUP */
.lp-page .expert-sec .expert-grid .expert-card p{
  font-size: clamp(1.20rem, 1.00rem + 0.90vw, 1.50rem); /* ←一回り大きく */
  line-height: 1.90;
  color:#111;
  margin: 6px 0 0; /* 上下に広がる余白を抑える */
}

/* 見出しまわりの大きな上マージンを完全に無効化（余白の原因対策） */
.lp-page .expert-sec .expert-grid .expert-card > h3{
  margin: 0 0 6px !important;
  padding: 0 !important;
  border-left: none !important;
}

/* 行間の詰め（グリッドの縦方向の隙間を小さく） */
.lp-page .expert-sec .expert-grid{
  column-gap: 16px;
  row-gap: 12px; /* ←ここを小さめに */
}

/* カードの内側余白も少しだけ詰める */
.lp-page .expert-sec .expert-card{
  padding: 14px 18px;
}

/* ===== 話者識別／用途別要約テンプレ：文字サイズ調整 ===== */

/* 小見出し（話者識別／用途別要約テンプレ）を一段大きく */
.lp-page .expert-sec .expert-details .expert-subttl{
  font-size: clamp(1.32rem, 1.06rem + 1.00vw, 1.72rem);
  line-height: 1.35;
  margin: 8px 0 10px;   /* 余白が広がるのを防ぐ */
}

/* 本文（「発話の切れ目や声質をAIが解析し…」「決定事項・タスク…」など） */
.lp-page .expert-sec .detail-card p{
  font-size: clamp(1.16rem, 0.98rem + 0.90vw, 1.48rem);
  line-height: 1.95;
  color: #111;
  margin: 4px 0 10px;   /* 上下の間延びを抑える */
}

/* 強調の太さを統一（必要なら） */
.lp-page .expert-sec .detail-card p strong{ font-weight: 800; }

/* ===== Compact media card: H3 → 2-column (thumb + text) ===== */
.expert-grid .expert-card.uc-compact{ display:block; padding:16px 18px; }

.expert-grid .expert-card.uc-compact > h3{
  /* グローバルh3の大きい上マージン/左ボーダーを無効化 */
  margin: 0 0 8px !important;
  padding: 0 !important;
  border-left: none !important;
  font-size: clamp(1.12rem, 1.0rem + 0.55vw, 1.32rem);
}

.expert-grid .expert-card.uc-compact .uc-2col{
  --thumb-w: 160px;               /* ← 画像の幅。小さくしたい時は 140px などに調整 */
  display: grid;
  grid-template-columns: var(--thumb-w) 1fr;
  gap: 12px;
  align-items: start;
}

.expert-grid .expert-card.uc-compact .uc-thumb{
  width: var(--thumb-w);
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.expert-grid .expert-card.uc-compact .uc-thumb img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display:block;
}

.expert-grid .expert-card.uc-compact p{
  font-size: clamp(1.12rem, 0.98rem + 0.8vw, 1.34rem);
  line-height: 1.9;
  color: #111;
  margin: 0;                       /* 上下の余白を詰める */
}

/* PCで画像が大きくなりすぎないように保険 */
@media (min-width: 992px){
  .expert-grid .expert-card.uc-compact .uc-thumb{ --thumb-w: 180px; }
}

/* SPは縦積み（画像 → 文章）で読みやすく */
@media (max-width: 768px){
  .expert-grid .expert-card.uc-compact .uc-2col{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .expert-grid .expert-card.uc-compact .uc-thumb{
    width: 100%;
    aspect-ratio: 16/9;         /* モバイルでは横長に */
  }
}

/* === 会議・議事録：見出しを大きく、2カラムの重なりを解消 === */

/* 見出しサイズを戻す（小さくなっていた原因は uc-compact > h3 の縮小指定） */
.expert-grid .expert-card.uc-compact > h3{
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem) !important;
  margin: 0 0 8px !important;
}

/* 2カラムの定義を明示：右カラムが縮められるように minmax(0, 1fr) を使用 */
.expert-grid .expert-card.uc-compact .uc-2col{
  --thumb-w: 160px;
  display: grid;
  grid-template-columns: var(--thumb-w) minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  text-align: left;           /* 念のため中央寄せを無効化 */
}

/* 右カラムの段落がはみ出して画像に重なるのを防止（Gridの既定 min-width:auto 対策） */
.expert-grid .expert-card.uc-compact .uc-2col > p{
  min-width: 0;
  margin: 0;
  font-size: clamp(1.12rem, 0.98rem + 0.8vw, 1.34rem);  /* 説明文を読みやすい大きさに */
  line-height: 1.9;
  color:#111;
}

/* 画像をさらに控えめにする場合はここだけ変える（例：140px） */
@media (min-width: 992px){
  .expert-grid .expert-card.uc-compact .uc-2col{ --thumb-w: 170px; }
}
@media (max-width: 768px){
  /* SPは縦積み、重なり防止 */
  .expert-grid .expert-card.uc-compact .uc-2col{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .expert-grid .expert-card.uc-compact .uc-thumb{
    width: 100%; aspect-ratio: 16/9;
  }
}

/* === 会議・議事録カード：2カラム重なり解消＆本文サイズUP === */

/* 見出しは大きめ・左寄せを強制 */
.expert-grid .expert-card.uc-compact{
  text-align: left;                    /* 万一の継承センタリングを打ち消し */
}
.expert-grid .expert-card.uc-compact > h3{
  font-size: clamp(1.6rem, 1.2rem + 1.0vw, 2.0rem) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border-left: none !important;
}

/* コア：2カラムを確実に有効化（重なりの原因を排除） */
.expert-grid .expert-card.uc-compact .uc-2col{
  --thumb-w: 160px;                   /* 画像幅。もっと小さく → 140px などに調整可 */
  display: grid !important;
  grid-template-columns: var(--thumb-w) minmax(0, 1fr) !important;
  column-gap: 14px;
  align-items: start;
}
.expert-grid .expert-card.uc-compact .uc-2col > *{
  min-width: 0;                       /* テキストのはみ出しを防止 */
}

/* サムネ（控えめサイズ＆固定比率） */
.expert-grid .expert-card.uc-compact .uc-thumb{
  width: var(--thumb-w);
  aspect-ratio: 4/3;
  margin: 0;                           /* figure の既定マージンを無効化 */
  border-radius: 10px;
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.expert-grid .expert-card.uc-compact .uc-thumb img{
  width: 100%; height: 100%; object-fit: cover; object-position: center; display:block;
}

/* 本文を読みやすい大きさに＆左寄せ・余白調整 */
.expert-grid .expert-card.uc-compact .uc-2col > p{
  font-size: clamp(1.24rem, 1.05rem + 0.9vw, 1.56rem);  /* ←一段大きく */
  line-height: 1.9;
  color: #111;
  margin: 0;                                           /* 上下の余白を詰める */
  text-align: left;                                    /* 念のため */
}

/* PC時にさらに画像を小さくしたい場合の保険 */
@media (min-width: 992px){
  .expert-grid .expert-card.uc-compact .uc-2col{ --thumb-w: 150px; } /* ←お好みで */
}

/* SPは縦積み（画像 → 文章）で重なりゼロに */
@media (max-width: 768px){
  .expert-grid .expert-card.uc-compact .uc-2col{
    grid-template-columns: 1fr !important;
    row-gap: 10px;
  }
  .expert-grid .expert-card.uc-compact .uc-thumb{
    width: 100%; aspect-ratio: 16/9;
  }
}

/* === 会議・議事録カード：Flex 2カラムに変更して重なり解消 === */

/* 念のため左寄せを強制（上位からの center 継承対策） */
.expert-grid .expert-card.uc-compact{
  text-align: left !important;
}

/* 見出しサイズ */
.expert-grid .expert-card.uc-compact > h3{
  font-size: clamp(1.6rem, 1.2rem + 1.0vw, 2.0rem) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border-left: none !important;
}

/* ★ Grid → Flex に置き換え（重なりの根本対策） */
.expert-grid .expert-card.uc-compact .uc-2col{
  --thumb-w: 150px;                       /* ←画像幅。さらに小さくしたければ 140px などに */
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
}

/* 左：サムネは固定幅、figure の既定 margin をゼロ */
.expert-grid .expert-card.uc-compact .uc-thumb{
  flex: 0 0 var(--thumb-w);
  width: var(--thumb-w);
  aspect-ratio: 4/3;
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.expert-grid .expert-card.uc-compact .uc-thumb img{
  width: 100%; height: 100%; object-fit: cover; object-position: center; display:block;
}

/* 右：本文は自動伸長。はみ出し・重なり防止のため min-width:0 を明示 */
.expert-grid .expert-card.uc-compact .uc-2col > p{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.24rem, 1.05rem + 0.9vw, 1.56rem);  /* 読みやすい大きさに */
  line-height: 1.9;
  color: #111;
  text-align: left;
}

/* SPは縦積み（画像 → 文章） */
@media (max-width: 768px){
  .expert-grid .expert-card.uc-compact .uc-2col{
    flex-direction: column;
    gap: 10px;
  }
  .expert-grid .expert-card.uc-compact .uc-thumb{
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* ===== caption line with small phone mock ===== */
.expert-sec .phone-caption{
  /* 元の中央寄せを維持しつつ横並び */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;               /* 既存より気持ちだけ広め */
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

.expert-sec .phone-caption .phone-chip{
  width: 120px;                  /* ← 小さめ。必要なら 100～140px で調整 */
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  flex: 0 0 auto;
}

/* SP は縦積みで見やすく */
@media (max-width: 768px){
  .expert-sec .phone-caption{
    display: block;
  }
  .expert-sec .phone-caption .phone-chip{
    display: block;
    width: 160px;                /* スマホでは少しだけ大きく */
    margin: 0 auto 6px;
  }
}

/* --- Mini flow under the phone mock --- */
.mini-flow{
  list-style: none;   /* ← これで番号を出さない */
  padding: 0;         /* ← ol の既定インデントを消す */
  /* ここまで追加 ↑↑↑ */

  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  margin:10px 0 0;
}
/* Safari などで確実に消すための保険（直後に追記） */
.mini-flow > li{ list-style: none; }
.mini-flow > li::marker{ content: ""; }
.mini-flow .step{
  display:flex; align-items:center; gap:6px;
}
.mini-flow .badge{
  width:36px; height:36px; border-radius:999px;
  display:inline-grid; place-items:center;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.mini-flow .badge i{ font-size:16px; }
.mini-flow .label{ font-size:1.2rem; color:#111; }

.mini-flow .connector{
  width:24px; height:2px; background:#d1d5db; border-radius:2px; position:relative;
}
.mini-flow .connector::after{
  content:""; position:absolute; right:-4px; top:50%;
  transform:translateY(-50%) rotate(45deg);
  border:4px solid transparent; border-left-color:#d1d5db;
}

/* stacked icon（文字起こし）中央の線色反転用 */
.mini-flow .text-invert{ color:#fff; font-size:12px; }

/* brand-ish colors */
.mini-flow .c-green i{ color:#10b981; }   /* 録音 */
.mini-flow .c-blue i{ color:#0ea5e9; }    /* アップロード */
.mini-flow .c-violet .fa-comment{ color:#8b5cf6; } /* 文字起こしベース */
.mini-flow .c-amber i{ color:#f59e0b; }   /* 要約 */
.mini-flow .c-orange i{ color:#f67d28; }  /* 共有（ブランド寄り） */

/* SPで詰める */
@media (max-width: 576px){
  .mini-flow{ gap:8px; }
  .mini-flow .badge{ width:32px; height:32px; }
  .mini-flow .badge i{ font-size:14px; }
  .mini-flow .label{ font-size:1.1rem; }
  .mini-flow .connector{ width:16px; }
}

/* ---- video block ---- */
.video-wrap { margin-top: 8px; }
.feature-video{
  width: 100%;
  aspect-ratio: 16 / 9;      /* レイアウトのガタつき防止 */
  display: block;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  outline: none;
}
.translate-card .caption{
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

/* 既存がグリッドでもフレックスでも 1列に寄せられる安全策 */
#video-suite .stack.stack-1col { 
  display: block;              /* flex/grid の幅指定を無効化 */
}
#video-suite .stack.stack-1col .card {
  width: 100%;
  margin-bottom: 16px;         /* カード間の余白。必要に応じて調整 */
}

/* 動画カード用（既出のもの。未追加なら併記） */
.video-wrap { margin-top: 8px; }
.feature-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* 完成動画にバッジを重ねる用 */
.video-wrap.badged { position: relative; }

.translate-card .caption{
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

/* ---- 動画生成セクションは 1 列で表示 ---- */
#video-gen .stack.stack-1col{
  /* どちらの実装（flex / grid）でも 1列にする */
  display: block;
  gap: 16px;            /* カード間の余白（必要なら調整） */
}
/* flexベースのレイアウト対策 */
#video-gen .stack.stack-1col > .card{
  width: 100% !important;
  max-width: 100%;
  flex: 0 0 100% !important;
}
/* gridベースのレイアウト対策（PCブレークポイントで上書きされるのを防ぐ） */
@media (min-width: 768px){
  #video-gen .stack.stack-1col{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Image→Video ギャラリー */
.i2v-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:12px;
}

@media (max-width: 768px){
  .i2v-gallery{ grid-template-columns: 1fr; }
}

.i2v-item{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.i2v-thumb{
  position:relative;
  aspect-ratio:16/9;            /* 16:9で統一 */
  overflow:hidden;
}

.i2v-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;              /* 縦横比が違っても見栄えをそろえる */
  display:block;
}

.i2v-pill{
  position:absolute;
  left:10px;
  top:10px;
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:#fff;
  backdrop-filter:saturate(160%) blur(4px);
}

.i2v-item figcaption{
  font-size:13px;
  color:#555;
  padding:10px 12px;
}

/* 静止画⇄動画 ペアのレイアウト */
.i2v-pairs {
  display: grid;
  gap: 18px;
}

.i2v-pair {
  display: grid;
  grid-template-columns: 1fr 40px 1fr; /* 静止画 | → | 動画 */
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.i2v-arrow {
  text-align: center;
  font-size: 22px;
  color: #9aa0a6;
}

.i2v-media { position: relative; }

/* 16:9の表示枠で統一 */
.i2v-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f8f9;
}

.i2v-aspect img,
.i2v-aspect video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比が違っても見栄えを揃える */
  display: block;
}

.i2v-video { outline: none; }

/* 角丸ラベル */
.i2v-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  z-index: 1;
}
.i2v-badge--video { background: rgba(255,115,0,.75); }

/* キャプション */
.i2v-pair figcaption {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #555;
  margin-top: 6px;
}

/* モバイルは縦積み（矢印は中央に） */
@media (max-width: 768px){
  .i2v-pair {
    grid-template-columns: 1fr;
  }
  .i2v-arrow {
    font-size: 18px;
    margin: 4px 0;
  }
}

/* 各セクション見出しに「1〜5」の丸数字を自動付与 */
body { counter-reset: feat; }
.feature > h2 {
  display:flex; align-items:center; gap:.6rem;
  scroll-margin-top: 84px; /* 固定ヘッダー分のずれ補正：必要に応じて調整 */
}
.feature, .hero{
  scroll-margin-top: 84px;  /* 固定ヘッダー高に合わせて */
}
.feature > h2::before {
  counter-increment: feat;
  content: counter(feat);
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: 50%;
  font-weight: 700;
  color:#fff;
  background: linear-gradient(135deg,#42d392,#2eaadf);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

html { scroll-behavior: smooth; } /* アンカー移動をスムーズに */

.features-nav {
  position: sticky; top: 64px; /* 固定ヘッダー高に合わせて調整 */
  z-index: 20;
  background: #fff;
  border-block: 1px solid #eee;
}
.features-nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display:flex; gap: 12px; align-items:center;
}
.features-nav__title { font-weight:700; white-space:nowrap; }

.features-nav__links {
  list-style: none; margin:0; padding:0;
  display:flex; gap:10px; overflow:auto;
}
.features-nav__links a {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #e6e6e9; border-radius:999px;
  background:#fff; color:#222; text-decoration:none; white-space:nowrap;
  transition: box-shadow .15s, transform .15s;
}
.features-nav__links a:hover { box-shadow:0 6px 14px rgba(0,0,0,.06); transform: translateY(-1px); }

.features-nav__links .num{
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; font-size:12px; font-weight:700; color:#fff;
  background: linear-gradient(135deg,#42d392,#2eaadf);
}

/* アクティブ表示（スクロール連動で付く） */
.features-nav__links a.is-active {
  border-color:#42d392; background: rgba(66,211,146,.08);
}

/* カウンタだけ維持 */
body { counter-reset: feat; }
section.feature { scroll-margin-top: 84px; }

/* 番号バッジをフレックス要素として並べる */
.feature .feature-title{
  display: flex;
  align-items: center;
  gap: .6rem;           /* バッジと本文の間隔 */
  line-height: 1.3;
}

/* ここでは position:static（= デフォルト）。transform 不要 */
.feature .feature-title::before{
  counter-increment: feat;
  content: counter(feat);
  flex: 0 0 36px;       /* 固定幅の丸 */
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 700 16px/1 "Noto Sans JP",sans-serif;
  color: #fff;
  background: linear-gradient(135deg,#42d392,#2eaadf);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* もし #expert だけ行間が高いなら、ここでフォントサイズ/line-heightを合わせる */
#expert .feature-title{ line-height: 1.3; }

/* ===== 5つの特長：グリッド目次 ===== */
.features-toc{ margin: 12px 0 28px; }
.toc-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.6rem;
}
@media (max-width:1024px){
  .toc-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .toc-grid{ grid-template-columns:repeat(2,1fr); }
}

.toc-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.65rem .9rem; border-radius:999px;
  background:#fff; border:1px solid #e6e9ef;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  color:#111; text-decoration:none; line-height:1.2;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.toc-item .num{
  flex:0 0 28px; width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:50%;
  font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,#42d392,#2eaadf);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.toc-item:hover{ border-color:#cfd6e2; box-shadow:0 4px 10px rgba(0,0,0,.06); }

/* アクティブ表示（現在のセクション） */
.toc-item.is-active{
  border-color:#2eaadf;
  box-shadow:0 6px 14px rgba(46,170,223,.15);
}

/* アンカー位置のズレ防止（ヘッダ分オフセット） */
section.feature{ scroll-margin-top: 84px; }

/* ===== 新着情報バー ===== */
.news-bar{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid #d0e8f5;
  border-radius:8px;
  padding:14px 20px;
  margin:0 0 0;
  box-shadow:0 2px 8px rgba(46,170,223,.08);
}
.news-bar__label{
  flex:0 0 auto;
  display:inline-block;
  background:#2eaadf;
  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:5px 14px;
  border-radius:4px;
  white-space:nowrap;
  margin-top:2px;
}
.news-bar__list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1;
}
.news-bar__list li{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:1.6rem;
  color:#333;
  line-height:1.7;
}
.news-bar__list a{
  color:#1178b0;
  text-decoration:none;
  flex:1;
}
.news-bar__list a:hover{ text-decoration:underline; }
.news-bar__list time{
  flex:0 0 auto;
  font-size:1.4rem;
  color:#888;
  white-space:nowrap;
}
@media (max-width:768px){
  .news-bar{ flex-direction:column; gap:10px; }
  .news-bar__list li{ flex-wrap:wrap; gap:4px; }
}


/* 画像つき・コンパクト用途カード（2～3カラム切替） */
.expert-grid.grid-compact {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.expert-grid.grid-compact.cols-3 { --cols: 3; }
.expert-grid.grid-compact.cols-2 { --cols: 2; }

/* ブレークポイント（PC→タブ→SP） */
@media (max-width: 1024px) {
  .expert-grid.grid-compact { --cols: 2; }
}
@media (max-width: 640px) {
  .expert-grid.grid-compact { --cols: 1; }
}

/* カード本体 */
.expert-mini {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.expert-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* サムネイル（比率は 4:3。必要に応じて変更可） */
.expert-mini-thumb {
  position: relative;
  background: #f6f7f9;
  aspect-ratio: 4 / 3;          /* 近代ブラウザ */
}
.expert-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト部 */
.expert-mini-body { padding: 14px 16px 16px; }
.expert-mini-body h3 {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.05rem; margin: 0 0 .35rem;
}
.expert-mini-body h3 i { opacity: .85; }
.expert-mini-body p  { margin: 0; line-height: 1.65; }

/* === コンパクト用途カードの文字サイズ調整 === */
.expert-grid.grid-compact .expert-mini-body h3{
  font-size: 1.4rem;   /* 見出しを大きく */
  font-weight: 700;
  line-height: 1.25;
}

.expert-grid.grid-compact .expert-mini-body p{
  font-size: 1.2rem;    /* 説明文をやや小さく */
  line-height: 1.65;
}

/* アイコンの視認性も少し上げる（お好みで） */
.expert-grid.grid-compact .expert-mini-body h3 i{
  font-size: 1.05rem;
  opacity: .9;
}

/* タブレット/スマホでは微調整 */
@media (max-width: 1024px){
  .expert-grid.grid-compact .expert-mini-body h3{ font-size: 1.4rem; }
  .expert-grid.grid-compact .expert-mini-body p { font-size: 1.2rem; }
}
@media (max-width: 640px){
  .expert-grid.grid-compact .expert-mini-body h3{ font-size: 1.4rem; }
  .expert-grid.grid-compact .expert-mini-body p { font-size: 1.2rem; }
}

/* === 用途ミニカード：レスポンシブ列数 === */
/* PC：3列 */
.expert-sec .expert-grid.grid-compact{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* タブレット：2列 */
@media (max-width: 1100px){
  .expert-sec .expert-grid.grid-compact{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

/* スマホ：1列 */
@media (max-width: 640px){
  .expert-sec .expert-grid.grid-compact{
    grid-template-columns: 1fr;
  }
}

/* 画像の比率維持＆はみ出し防止（保険） */
.expert-grid.grid-compact .expert-mini figure img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* --- デフォルトは正方形（PC/タブレット） --- */
.expert-grid.grid-compact .expert-mini figure{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}
.expert-grid.grid-compact .expert-mini figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- スマホでは3:1にする --- */
@media (max-width: 640px){
  .expert-grid.grid-compact .expert-mini figure{
    aspect-ratio: 3 / 1;
  }
}

/* ===== Tablet 以下は SP ナビに統一（PCドロップダウン無効） ===== */
@media (max-width: 1024px) {
  /* PC ナビは隠す */
  #menu .pnav-pc { display: none !important; }
  /* SP ナビ（ハンバーガー）は表示 */
  #menu .pnav-sp { display: block !important; }

  /* 念のため：PC用サブメニューは絶対に表示させない */
  #menu .pnav-pc .submenu,
  #menu .pnav-pc li.has-sub:hover > .submenu,
  #menu .pnav-pc li.has-sub:focus-within > .submenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* --- 用途ミニカード：はみ出し解消（自動で列数調整） --- */
.expert-sec .expert-grid.grid-compact{
  /* 幅に合わせて 3/2/1 列に自動調整、はみ出さない */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}
.expert-grid.grid-compact .expert-mini{ min-width: 0; } /* 念のため */


/* AI質問セクション：大きめ画像と説明 */
.ai-qa { margin-top: 8px; }
.aiqa-hero{
  margin: 10px 0 14px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #0b0f14;           /* 画像の縁が目立たないように */
}
.aiqa-hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* 下の説明ブロック */
.aiqa-points { margin-top: 8px; }
.aiqa-examples__title{
  margin: .4rem 0 .3rem;
  font-weight: 700;
  color:#111;
}
.aiqa-note{ margin-top:.5rem; }

/* CTA ボタン（簡易） */
.aiqa-cta .btn{
  display:inline-block;
  margin-top:.6rem;
  padding:.65rem 1rem;
  border-radius:10px;
  background:#0ea5e9;
  color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 6px 14px rgba(14,165,233,.25);
}
.aiqa-cta .btn:hover{ background:#0790cb; }

/* mini-flow の番号を消す（バグ修正） */
.mini-flow { list-style: none; padding-left: 0; }
.mini-flow > li { list-style: none; }

/* === TTSセクション専用調整 === */
#tts .card{
  width: 100%;
  margin-bottom: 16px;
}
#tts .card h3{
  margin: 0 0 12px;
  padding: 0 0 0 10px;
  border-left: 10px solid #f67d28;
}
#tts .card p{
  font-size: 1.6rem;   /* 本文と統一 */
  line-height: 1.8;
  margin: 0;
}
#tts .lead{
  font-size: 1.6rem;
  line-height: 1.9;
}
#tts .tools-thumb img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ヒーロー画像上のクリック領域 */
.rc-hero-spotwrap { display:block; position: relative; }

.imgbox.full { position: relative; }  /* 既存のヒーロー枠を重ね合わせの基準に */
.imgbox.full picture { display:block; }

.rc-spot{
  position:absolute;
  display:block;
  /* 透明ヒットボックス：開発時は background:rgba(255,0,0,.15) で範囲確認OK */
  background: transparent;
  /* スマホでも押しやすいよう最小サイズを確保（必要なら調整） */
  min-width: clamp(56px, 12vw, 250px);
  min-height: clamp(42px, 8vw, 170px);
  z-index: 1;
  cursor: pointer;
  outline: none;
  border-radius: 8px;
}

/* キーボード操作の可視フォーカス */
.rc-spot:focus-visible{
  outline: 3px solid rgba(66,211,146,.9);
  outline-offset: 2px;
}

/* --- 位置（例）: 画像 1600×900 を基準にした割合指定 --- */
/* AIボイスレコーダー */
.rc-spot--expert{
  left: 2%; top: 2%; width: 18%; height: 40%;
}
/* AI動画編集 */
.rc-spot--videoedit{
  left: 36%; top: 2%; width: 18%; height: 40%;
}
/* AI動画生成 */
.rc-spot--videogen{
  left: 2%; top: 52%; width: 18%; height: 40%;
}
/* AIナレーション */
.rc-spot--tts{
  left: 36%; top: 52%; width: 18%; height: 40%;
}
/* クラウド共有 */
.rc-spot--cloud{
  left: 68%; top: 2%; width: 18%; height: 40%;
}

/* 画面幅に応じて微調整したい場合のブレークポイント例 */
@media (max-width: 480px){
  .rc-spot{
    min-width: clamp(44px, 18vw, 120px);
    min-height: clamp(36px, 12vw, 90px);
  }
}



/* ヒーローのpictureに比率を与えてレイアウトを安定化 */
.imgbox.full picture{
  display:block;            /* 既に入れてOK */
  width:100%;
  aspect-ratio: 16 / 9;     /* ← これを追加（ヒーローが16:9なら） */
}

/* 子要素（source/img）もブロック化してはみ出しを予防 */
.imgbox.full picture > *{
  display:block;
  width:100%;
  height:auto;
}

/* ========================================
   新アプリUI紹介セクション
   ======================================== */
.app-ui-new {
  margin: 48px 0;
  padding: 32px 28px;
  background: linear-gradient(135deg, #f0f5ff 0%, #f5f0ff 100%);
  border-radius: 16px;
  border: 1px solid #dce4ff;
}

.app-ui-new .expert-subttl {
  margin-bottom: 12px;
}

.app-ui-intro {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 28px;
}

.app-screens {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 0 auto 28px;
}

.app-screen {
  flex: 1;
  max-width: 240px;
  text-align: center;
}

.app-screen img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.app-screen figcaption {
  margin-top: 14px;
  font-size: 1.4rem;
  color: #555;
  line-height: 1.6;
}

.realtime-highlight {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  border-left: 5px solid #6c3fe0;
  margin-top: 8px;
}

.realtime-highlight h4 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #2a2a2a;
  margin: 8px 0 14px;
}

.badge-new {
  display: inline-block;
  background: #6c3fe0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .app-screens {
    flex-direction: column;
    align-items: center;
  }
  .app-screen {
    max-width: 220px;
  }
  .app-ui-new {
    padding: 24px 16px;
  }
}

/* YouTube埋め込み 16:9 アスペクト比 */
.yt-aspect {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.yt-aspect iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}