/**
 * お客様の声（スライダー）— cabf/voice-slider・cabf/voice-card
 *
 * cabf-studio.com のトップページ「お客様の声」（section.cabf-d.voice-section）と同じ見た目にする。
 *
 * ■ 2段構え
 * 1. マークアップ（クラス名）はトップページと同じ。トップページ（#cabf-top の中）に置くと、
 *    サイトの CSS（<style id="cabf-top-css">）がそのまま効くので、見た目は今と変わらない。
 * 2. このファイルは、サイトの CSS のうち「お客様の声」に効いているルールを
 *    ブラウザで1つずつ調べて写したもの（2026-10-13 時点）。
 *    編集画面や、#cabf-top の外のページでも同じ見た目にするために使う。
 *
 * ■ 範囲と強さ
 * 元の「#cabf-top」を「:is(.cabf-voice-scope, #cabf-voice-scope)」に置き換えている。
 * - .cabf-voice-scope はこのブロックのいちばん外側の div。ブロックの中だけに効く（ほかのセクションには触らない）
 * - #cabf-voice-scope は使っていない ID。:is() の強さが「ID 1つ分」になり、元のルールと同じ強さになる
 *   （SWELL の .post_content h2 などの装飾に負けない）
 *
 * サイト側の CSS を変えたときは、ここも合わせて直すこと。
 */

/* いちばん外側の div。公開画面では箱を作らない（今の section の位置・余白をそのまま保つ） */
.cabf-voice-scope:not(.block-editor-block-list__block) {
	display: contents;
}

/* #cabf-top で決めていた色・文字（サイトの CSS から） */
.cabf-voice-scope {
	--ink: #11141c;
	--ink-soft: #31425e;
	--blue: #164bd8;
	--cyan: #77d8ff;
	--pale: #eaf3ff;
	--line: #dbe1ea;
	--paper: #fff;
	--white: #fff;
	--mist: #f4f7fc;
	--font: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	color: var(--ink);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: normal;
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

/* ───── ここから、サイトの CSS から写したルール（順番もそのまま） ───── */

:is(.cabf-voice-scope, #cabf-voice-scope) :where(div > :last-child):where(.cabf-d, .cabf-d *, .wp-block-group) {
	margin-bottom: revert !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :where(div > :first-child):where(.cabf-d, .cabf-d *, .wp-block-group) {
	margin-top: revert !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :where(.wp-block-group__inner-container > *):where(.cabf-d, .cabf-d *, .wp-block-group) {
	margin-bottom: revert;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, thead, tbody, tr, th, td, caption, blockquote, figure, figcaption, img, a, strong, em, b, small, time, details, summary, hr, button):where(.cabf-d, .cabf-d *) {
	margin: revert;
	padding: revert;
	border: revert;
	border-radius: revert;
	background: revert;
	color: revert;
	font-size: revert;
	font-weight: revert;
	line-height: revert;
	letter-spacing: revert;
	text-align: revert;
	position: revert;
	z-index: revert;
	list-style: revert;
	width: revert;
	max-width: revert;
	height: revert;
	clear: revert;
	box-shadow: revert;
	text-decoration: revert;
	vertical-align: revert;
	display: revert;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :is(h1, h2, h3, h4, h5, h6, li, blockquote):where(.cabf-d, .cabf-d *)::before,
:is(.cabf-voice-scope, #cabf-voice-scope) :is(h1, h2, h3, h4, h5, h6, li, blockquote):where(.cabf-d, .cabf-d *)::after {
	content: revert;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *),
:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *)::before,
:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *)::after {
	box-sizing: border-box;
}

:is(.cabf-voice-scope, #cabf-voice-scope) button:where(.cabf-d, .cabf-d *),
:is(.cabf-voice-scope, #cabf-voice-scope) input:where(.cabf-d, .cabf-d *),
:is(.cabf-voice-scope, #cabf-voice-scope) textarea:where(.cabf-d, .cabf-d *) {
	font: inherit;
}

:is(.cabf-voice-scope, #cabf-voice-scope) button:where(.cabf-d, .cabf-d *) {
	cursor: pointer;
}

:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *)::selection {
	background: rgb(180, 221, 255);
	color: var(--ink);
}

:is(.cabf-voice-scope, #cabf-voice-scope) :focus-visible:where(.cabf-d, .cabf-d *) {
	outline: 3px solid var(--cyan);
	outline-offset: 4px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .container {
	width: min(100% - 64px, 1320px);
	margin-inline: auto !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-pad {
	padding: 126px 0px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) section[id] {
	scroll-margin-top: 88px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading {
	display: grid;
	grid-template-columns: 26% 1fr;
	gap: 5%;
	align-items: start;
	margin-bottom: 54px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading h2:where(.cabf-d, .cabf-d *) {
	font-size: clamp(38px, 4.2vw, 66px);
	letter-spacing: -0.075em;
	line-height: 1.3;
	margin: -14px 0px 8px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading p:where(.cabf-d, .cabf-d *) {
	color: rgb(100, 116, 139);
	font-size: 16px;
	margin: 0px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section {
	overflow: hidden;
	background: rgb(11, 27, 59);
	color: rgb(255, 255, 255);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .section-heading p:where(.cabf-d, .cabf-d *) {
	color: rgb(168, 187, 215);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-intro {
	display: flex;
	align-items: end;
	gap: 34px;
	margin: -5px 0px 34px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .carousel-controls {
	display: flex;
	gap: 9px;
	margin-left: auto !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .carousel-controls button:where(.cabf-d, .cabf-d *) {
	width: 49px;
	height: 49px;
	border: 1px solid rgb(88, 112, 146);
	background: transparent;
	color: rgb(255, 255, 255);
	border-radius: 50%;
	font-size: 20px;
	transition: background 0.2s;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .carousel-controls button:hover:where(.cabf-d, .cabf-d *) {
	background: var(--blue);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgb(93, 128, 174) transparent;
	padding: 4px 0px 20px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-card {
	flex: 0 0 min(420px, 85vw);
	min-height: 310px;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: rgb(20, 43, 84);
	padding: 30px;
	border: 1px solid rgb(52, 80, 121);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgb(133, 217, 255);
	font-size: 18px;
	letter-spacing: 0.06em;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-rating b:where(.cabf-d, .cabf-d *) {
	font-size: 15px;
	color: rgb(255, 255, 255);
	letter-spacing: 0px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-card p:where(.cabf-d, .cabf-d *) {
	font-size: 15px;
	line-height: 1.85;
	flex: 1 1 0%;
	color: rgb(237, 245, 255);
	margin: 25px 0px 22px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-type {
	font-size: 12px;
	font-weight: 800;
	color: rgb(154, 178, 209);
	padding-top: 15px;
	border-top: 1px solid rgb(52, 80, 121);
}

@media (max-width: 980px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-pad {
		padding: 100px 0px;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .container {
		width: min(100% - 36px, 1320px);
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-pad {
		padding: 76px 0px;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .concept-grid,
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading,
	:is(.cabf-voice-scope, #cabf-voice-scope) .flow-grid,
	:is(.cabf-voice-scope, #cabf-voice-scope) .about-grid,
	:is(.cabf-voice-scope, #cabf-voice-scope) .content-layout,
	:is(.cabf-voice-scope, #cabf-voice-scope) .contact-layout {
		display: block;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading {
		margin-bottom: 36px !important;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading h2:where(.cabf-d, .cabf-d *) {
		font-size: clamp(35px, 8vw, 52px);
		margin: 18px 0px 6px !important;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading p:where(.cabf-d, .cabf-d *) {
		font-size: 14px;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .voice-intro {
		flex-wrap: wrap;
		gap: 10px 25px;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .carousel-controls {
		width: 100%;
		justify-content: flex-end;
	}
}

@media (max-width: 720px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .voice-card {
		padding: 22px;
		min-height: 270px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *),
	:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *)::before,
	:is(.cabf-voice-scope, #cabf-voice-scope) :where(.cabf-d, .cabf-d *)::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-pad {
	padding: 118px 0px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading h2:where(.cabf-d, .cabf-d *) {
	color: rgb(20, 25, 37);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading p:where(.cabf-d, .cabf-d *) {
	color: rgb(114, 123, 137);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section {
	background: linear-gradient(rgb(255, 255, 255) 0%, rgb(244, 248, 254) 24%, rgb(234, 242, 252) 70%, rgb(244, 246, 252) 100%);
	color: var(--ink);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-card {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65));
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 18px;
	box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(42, 75, 125, 0.043) 0px 8px 24px;
	backdrop-filter: blur(12px);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-type {
	border-color: rgb(220, 230, 243);
	color: rgb(101, 117, 139);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-card p:where(.cabf-d, .cabf-d *) {
	color: rgb(72, 86, 106);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-rating,
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-rating b:where(.cabf-d, .cabf-d *),
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .big-number {
	color: var(--blue);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .carousel-controls button:where(.cabf-d, .cabf-d *) {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgb(207, 221, 240);
	color: var(--blue);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .carousel-controls button:hover:where(.cabf-d, .cabf-d *) {
	background: var(--blue);
	border-color: var(--blue);
	color: rgb(255, 255, 255);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .carousel-controls button:focus-visible:where(.cabf-d, .cabf-d *) {
	outline: 2px solid var(--blue);
	outline-offset: 4px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track {
	scrollbar-color: rgb(174, 197, 231) transparent;
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-pad {
		padding: 76px 0px;
	}
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading {
	display: block;
	position: static;
	text-align: center;
	margin: 0px 0px 60px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading .section-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	color: rgb(48, 52, 58);
	line-height: 1.1;
	letter-spacing: normal;
	margin: 0px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-title-en {
	display: block;
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: clamp(36px, 4vw, 54px);
	font-weight: 750;
	letter-spacing: 0.015em;
	line-height: 1;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-title-ja {
	display: block;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.07em;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading .section-description {
	max-width: 700px;
	font-size: 15px;
	line-height: 1.9;
	color: rgb(104, 115, 130);
	margin: 25px auto 0px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .bilingual-heading .section-title {
	color: rgb(48, 52, 58);
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .bilingual-heading .section-description {
	color: rgb(104, 115, 130);
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading {
		margin-bottom: 40px !important;
	}
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading .section-title {
		gap: 15px;
	}
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-title-en {
		font-size: clamp(30px, 8.5vw, 38px);
	}
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-title-ja {
		font-size: 14px;
	}
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .section-heading.bilingual-heading .section-description {
		font-size: 14px;
		margin-top: 20px !important;
	}
}

:is(.cabf-voice-scope, #cabf-voice-scope) .ui-chevron {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
	flex-shrink: 0;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .ui-chevron polyline:where(.cabf-d, .cabf-d *) {
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track {
	cursor: grab;
	scroll-snap-type: none;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 5px;
	border-radius: 18px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .bilingual-heading {
	margin-bottom: 30px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .bilingual-heading .voice-summary {
	font-size: 14px;
	line-height: 1.9;
	color: rgb(82, 98, 121);
	margin: 8px auto 0px !important;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-intro {
	justify-content: flex-end;
	margin: 0px 0px 20px !important;
}

@media (max-width: 680px) {
	:is(.cabf-voice-scope, #cabf-voice-scope) .voice-section .bilingual-heading .voice-summary {
		font-size: 13px;
	}
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-rating > span:where(.cabf-d, .cabf-d *),
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-star {
	color: rgb(233, 181, 23);
}

/* ───── ここから追加分（サイトの CSS には無いもの） ───── */

/* 見出しや本文の書体は、テーマの見出し用の書体などに変えられないよう、いつも外側から受け継ぐ。
   サイトでは SWELL がこれらに書体を指定していないので、今の見た目は変わらない（編集画面のテーマの指定よけ） */
:is(.cabf-voice-scope, #cabf-voice-scope) :is(h1, h2, h3, h4, h5, h6, p, b, strong, small, button, figure, figcaption):where(.cabf-d, .cabf-d *) {
	font-family: inherit;
}

/* いただいた評価のスクショ。星の下・本文の上に置き、押すと拡大表示
   （本文の上の余白 25px はサイトのまま。星との間は 22px）。写真は切らずに全体を見せ、カードの中で中央に置く */
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot {
	position: relative;
	margin: 22px 0 0;
	padding: 0;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__button {
	/* 枠はカードの幅いっぱい。ただし写真ごとに「高さ 360px を超えない幅」と「元の写真の幅」の小さいほうを
	   上限にする（render.php が style="max-width: …px" で渡す）ので、枠は写真の大きさにぴったり合う */
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgb(220, 230, 243);
	border-radius: 12px;
	background: #fff;
	cursor: zoom-in;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__button:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__button img {
	/* 写真全体を見せる（切らない）。縦横比はそのままで、枠の幅いっぱいに出す。
	   写真の大きさが分からないとき（URL だけの写真）も、高さ 360px を超えたら全体が入るよう縮める */
	display: block;
	width: 100% !important; /* テーマが画像に直接書く幅・高さ（Twenty Twenty-One など）より優先する */
	max-width: none;
	height: auto !important;
	max-height: 360px;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}

/* 「タップで拡大」は写真に重ねず、枠の下の細い帯に出す（写真の文字を隠さない） */
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__hint {
	display: block;
	padding: 3px 10px;
	border-top: 1px solid rgb(220, 230, 243);
	background: rgb(244, 247, 252);
	color: rgb(101, 117, 139);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .04em;
	text-align: right;
}

/* ───── 編集画面だけ ───── */

/* 公開画面ではいちばん外側の div が箱を作らないので、テーマの「本文の幅」の制限を受けず、置いた場所の幅いっぱいになる。
   編集画面でも同じ幅・余白にする（テーマによっては、編集画面だけ全ブロックに幅の上限と上下の余白を付けるため） */
:is(.cabf-voice-scope, #cabf-voice-scope).block-editor-block-list__block,
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track > .voice-card.block-editor-block-list__block {
	max-width: none;
	margin: 0;
}

/* カードの文字を選びやすいよう、つかむカーソルにしない */
:is(.cabf-voice-scope, #cabf-voice-scope).block-editor-block-list__block .voice-track {
	cursor: auto;
}

/* 「＋」（カードを追加）はカードの列の最後に、縦の中央で出す */
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-track > .block-list-appender {
	position: static;
	flex: 0 0 auto;
	align-self: center;
	margin: 0 8px;
}

/* スクショがまだ無いカードに出す「スクショを追加」 */
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__add {
	display: block;
	width: 100%;
	margin: 22px 0 0;
	padding: 10px;
	border: 1px dashed rgb(174, 197, 231);
	border-radius: 12px;
	background: transparent;
	color: var(--blue);
	font-size: 13px;
	cursor: pointer;
}

/* 編集画面でスクショを外すボタン */
:is(.cabf-voice-scope, #cabf-voice-scope) .voice-shot__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 20, 28, .72);
	color: #fff;
	font-size: 14px;
	line-height: 26px;
	cursor: pointer;
}