@charset "utf-8";
/* ------------------------------------------------------------
   記事内 無料体験レッスンCTA  2026-08-02（B-1案）
   markup: inc/cta_lesson.php
   配色はロゴから抜き出した2色  cyan #1bacdc ／ orange #f09400

   ■ 注意：CTA内の <p> の margin はテーマ側が握っている
   common.css の `body.single .content p, body.page .content p` は
   詳細度 (0,2,2) で、このファイルの `.content .spf-cta__◯◯` (0,2,0) より強い。
   そのため tagline / lead / text / note の margin 指定は効かず、
   実際には テーマの margin: 30px 0 0（1025px以下は 20px 0 0）が適用されている。
   余白を変えたいときは `.content .spf-cta p.spf-cta__◯◯` のように
   p 要素とカードのクラスを足して (0,3,1) にすること。
------------------------------------------------------------ */

/* ===== 記事末尾（ボックス型） ===== */
.content .spf-cta--box {
	position: relative;
	box-sizing: border-box;
	margin: 42px 0 30px;
	padding: 38px 32px 26px;
	border: 3px solid #1bacdc;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	box-shadow: 0 4px 14px rgba(27, 172, 220, .16);
}

/* top はリボンの高さの半分 ＋ カードの枠線3px。font-size / padding を変えたらここも合わせること */
.content .spf-cta__ribbon {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	padding: 11px 34px;
	border-radius: 99px;
	background: #f09400;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(240, 148, 0, .45);
}

.content .spf-cta__logo {
	display: block;
	width: 280px;
	max-width: 78%;
	height: auto;
	aspect-ratio: 660 / 104;
	margin: 0 auto 8px;
}

.content .spf-cta__tagline {
	margin: 0 0 16px;
	color: #1490bb;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: .08em;
}

.content .spf-cta__rule {
	position: relative;
	z-index: 2;
	height: 1px;
	margin: 0 0 18px;
	background: linear-gradient(90deg, transparent, #cfe9f3 20%, #cfe9f3 80%, transparent);
}

/* 機材写真を敷く範囲
   ::before はカードの内側（paddingぶん）ちょうどまで広げている。
   カードに overflow:hidden を付けるとリボンが切れるため、あえて付けていない。 */
.content .spf-cta__lower {
	position: relative;
}

.content .spf-cta__lower::before {
	content: "";
	position: absolute;
	top: -20px;
	right: -32px;
	bottom: -26px;
	left: -32px;
	z-index: 0;
	background-image: url(../img/cta_bg_gear.jpg);
	background-image: image-set(url(../img/cta_bg_gear.webp) type("image/webp"), url(../img/cta_bg_gear.jpg) type("image/jpeg"));
	background-position: center 58%;
	background-size: cover;
	opacity: .12;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 26%);
	        mask-image: linear-gradient(180deg, transparent, #000 26%);
	pointer-events: none;
}

/* 写真より前に出す */
.content .spf-cta__lead,
.content .spf-cta__text,
.content .spf-cta__points,
.content .spf-cta__btn,
.content .spf-cta__note {
	position: relative;
	z-index: 2;
}

.content .spf-cta__lead {
	margin: 0 0 14px;
	color: #1a1a1a;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.45;
}

.content .spf-cta__lead mark {
	padding: 0 2px;
	background: linear-gradient(transparent 62%, #ffe08a 62%);
	color: inherit;
}

.content .spf-cta__text {
	color: #333;
	font-size: 14px;
	line-height: 1.9;
	text-align: left;
}

/* ===== 体験レッスン紹介動画（押されるまでiframeを作らない） ===== */
.content .spf-cta__video {
	position: relative;
	z-index: 2;
	max-width: 480px;
	margin: 0 auto 22px;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	aspect-ratio: 16 / 9;
}

.content .spf-cta__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.content .spf-cta__video-btn {
	position: relative;
	display: block;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.content .spf-cta__video-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 再生ボタン（画像を使わずCSSだけで描く） */
.content .spf-cta__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	background: rgba(0, 0, 0, .68);
	transition: background .15s;
}

.content .spf-cta__video-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -8px;
	border-width: 11px 0 11px 19px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
}

.content .spf-cta__video-btn:hover .spf-cta__video-play,
.content .spf-cta__video-btn:focus .spf-cta__video-play {
	background: #f09400;
}

.content .spf-cta__video-label {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px 12px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
}

/* 指定の位置で改行する。長い行はそのまま折り返す */
.content .spf-cta__text-line {
	display: block;
}

/* 強調。カード内の他の強調（見出しのマーカー）と同じ見た目にそろえる */
.content .spf-cta__text strong {
	padding: 0 2px;
	background: linear-gradient(transparent 62%, #ffe08a 62%);
	color: #1a1a1a;
	font-weight: bold;
}

/* 説明文とチップ列の間隔（PCのみ）
   common.css の `body.single .content p { margin: 30px 0 0 }` は詳細度 (0,2,2) で、
   `.content .spf-cta__text` (0,2,0) より強い。そのためCTA内の <p> の margin は
   すべてテーマ側の値（上30px・下0）になっている。
   ここは p 要素とカードのクラスを明示して (0,3,1) にし、下マージンだけを上書きする。
   上マージンはテーマの値のままにしたいので margin-bottom 単体で指定すること。 */
@media screen and (min-width: 769px) {
	.content .spf-cta p.spf-cta__text {
		margin-bottom: 28px;
	}
}

.content .spf-cta__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 22px;
}

.content .spf-cta__point {
	padding: 7px 14px;
	border-radius: 99px;
	background: #e8f6fb;
	color: #1490bb;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
}

.content .spf-cta__btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	min-width: 380px;
	padding: 18px 40px;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffa93d, #f09400);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 5px 0 #c97c00, 0 8px 16px rgba(0, 0, 0, .15);
	transition: transform .12s, box-shadow .12s;
}

.content .spf-cta__btn:hover,
.content .spf-cta__btn:focus {
	transform: translateY(2px);
	box-shadow: 0 3px 0 #c97c00, 0 5px 10px rgba(0, 0, 0, .15);
	color: #fff;
	opacity: 1;
	text-decoration: none;
}

/* ボタンの光沢 */
.content .spf-cta__btn::before,
.content .spf-cta__bar-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -70%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	animation: spf-cta-shine 3.4s infinite;
}

@keyframes spf-cta-shine {
	0%   { left: -70%; }
	45%  { left: 130%; }
	100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.content .spf-cta__btn::before,
	.content .spf-cta__bar-btn::before { animation: none; }
}

.content .spf-cta__note {
	margin: 13px 0 0;
	color: #5f6b70;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
}

/* ===== 記事中盤（バー型） ===== */
.content a.spf-cta--bar {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin: 32px 0;
	border: 2px solid #1bacdc;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	color: #1a1a1a;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(27, 172, 220, .14);
}

.content a.spf-cta--bar:hover,
.content a.spf-cta--bar:focus {
	color: #1a1a1a;
	opacity: 1;
	text-decoration: none;
}

.content .spf-cta__bar-mark {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 10px 16px;
	background: #1bacdc;
	color: #fff;
}

.content .spf-cta__bar-logo {
	display: block;
	width: 120px;
	height: auto;
	aspect-ratio: 660 / 104;
}

/* common.css の `:where(.soundcloud) img` が
   白背景＋3pxのグレー枠＋4pxのpaddingを付けてくる。
   記事内に .soundcloud で囲まれた箇所があり、そこへ中盤バーが入ると
   白抜きロゴが白背景に乗って見えなくなる（2026-08-02に発生）。
   :where() は詳細度0なので、宣言しておけばこちらが勝つ。 */
.content .spf-cta__logo,
.content .spf-cta__bar-logo,
.content .spf-cta__video-btn img {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.content .spf-cta__bar-label {
	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .08em;
	text-align: center;
}

.content .spf-cta__bar-text {
	flex: 1;
	min-width: 0;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
}

.content .spf-cta__bar-btn {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	margin: 10px 14px 10px 0;
	padding: 12px 22px;
	border-radius: 6px;
	background: linear-gradient(180deg, #ffa93d, #f09400);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 3px 0 #c97c00;
}

/* ===== 記事冒頭の大きいバー（spf-cta--bar-lg） =====
   中盤バーは1行のまま残したいので、冒頭だけこのクラスで上書きする。
   高さの目安は中盤バーの約2倍。 */

/* 背景の機材写真。末尾ボックスと同じ画像・同じ濃さ（12%）にそろえている。
   バーには overflow:hidden が効いているので角丸からはみ出さない。 */
.content a.spf-cta--bar-lg {
	position: relative;
}

.content a.spf-cta--bar-lg::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background-image: url(../img/cta_bg_gear.jpg);
	background-image: image-set(url(../img/cta_bg_gear.webp) type("image/webp"), url(../img/cta_bg_gear.jpg) type("image/jpeg"));
	background-position: center 58%;
	background-size: cover;
	opacity: .12;
	pointer-events: none;
}

/* PCではバーが 960×125px と横に細長く、cover だと写真のごく一部しか映らず
   何の画像か分からなくなる。写真を縮小して横に並べ、そのぶん薄くする。
   スマホ（縦積み・高さ256px）は cover のままで問題ないので触らない。
   `auto 130%` … 1枚 245×163px が約3.9枚。写真の縦8割ほどが入り、機材と分かる大きさ。
   写真1枚を完全に収めたい場合は `auto 100%`（1枚 187×125px・約5.1枚）にする。 */
@media screen and (min-width: 769px) {
	.content a.spf-cta--bar-lg::before {
		background-position: center center;
		background-repeat: repeat-x;
		background-size: auto 130%;
		opacity: .08;
	}
}

/* 写真より前に出す。左のcyan帯は不透明なので写真は透けない */
.content a.spf-cta--bar-lg .spf-cta__bar-mark,
.content a.spf-cta--bar-lg .spf-cta__bar-text,
.content a.spf-cta--bar-lg .spf-cta__bar-btn {
	position: relative;
	z-index: 1;
}

.content a.spf-cta--bar-lg .spf-cta__bar-mark {
	gap: 7px;
	padding: 14px 22px;
}

.content a.spf-cta--bar-lg .spf-cta__bar-logo {
	width: 165px;
}

.content a.spf-cta--bar-lg .spf-cta__bar-label {
	font-size: 12px;
}

.content a.spf-cta--bar-lg .spf-cta__bar-text {
	padding: 18px 24px;
	font-size: inherit;
	font-weight: normal;
}

.content .spf-cta__bar-lead {
	display: block;
	margin: 0 0 7px;
	padding: 0 2px;
	background: linear-gradient(transparent 62%, #ffe08a 62%);
	color: #1a1a1a;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.5;
}

.content .spf-cta__bar-line {
	display: block;
	color: #333;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.75;
}

.content a.spf-cta--bar-lg .spf-cta__bar-btn {
	margin: 14px 18px 14px 0;
	padding: 15px 24px;
	font-size: 15px;
}

/* ===== スマートフォン ===== */
@media screen and (max-width: 768px) {
	.content .spf-cta--box {
		margin: 34px 0 24px;
		padding: 32px 15px 20px;
	}

	.content .spf-cta__ribbon {
		top: -22px;
		padding: 9px 20px;
		font-size: 15px;
	}

	.content .spf-cta__tagline { font-size: 13px; }

	.content .spf-cta__note { font-size: 13px; }

	.content .spf-cta__logo { width: 220px; }

	/* カードのpaddingが 32px 15px 20px になるのに合わせる */
	.content .spf-cta__lower::before {
		right: -15px;
		bottom: -20px;
		left: -15px;
	}

	.content .spf-cta__lead { font-size: 20px; }

	.content .spf-cta__text { font-size: 13px; }

	.content .spf-cta__point {
		padding: 6px 11px;
		font-size: 12px;
	}

	.content .spf-cta__btn {
		display: block;
		min-width: 0;
		width: 100%;
		padding: 16px 10px;
		font-size: 17px;
	}

	.content a.spf-cta--bar {
		display: block;
		margin: 26px 0;
	}

	.content .spf-cta__bar-mark {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 9px 12px;
	}

	.content .spf-cta__bar-logo { width: 110px; }

	.content a.spf-cta--bar-lg .spf-cta__bar-mark { padding: 11px 12px; }

	.content a.spf-cta--bar-lg .spf-cta__bar-logo { width: 145px; }

	.content a.spf-cta--bar-lg .spf-cta__bar-text {
		padding: 15px 15px 0;
		text-align: center;
	}

	.content .spf-cta__bar-lead { font-size: 17px; }

	.content .spf-cta__bar-line { font-size: 13px; }

	.content a.spf-cta--bar-lg .spf-cta__bar-btn {
		margin: 14px 15px 15px;
		padding: 14px 10px;
		font-size: 15px;
	}

	.content .spf-cta__bar-text {
		padding: 14px 14px 0;
		font-size: 14px;
		text-align: center;
	}

	.content .spf-cta__bar-btn {
		display: block;
		margin: 12px 14px 14px;
		padding: 13px;
		text-align: center;
	}
}