/* 新デザインの共通パーツ（トップページ・下層ページで共通）
 * 見出し・本文・ボタンはどのページでもここのクラスを使う */

/* 画面には出さず、読み上げ・検索エンジン向けにだけ残すテキスト */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 改行させたくない語句のまとまり（折り返すときはこの手前で改行される） */
.u-nowrap {
	white-space: nowrap;
}

/* PCだけで使う改行 */
@media screen and (max-width: 900px) {
	.u-pc-only {
		display: none;
	}
}

/* スマートフォンだけで使う改行 */
.u-sp-only {
	display: none;
}
@media screen and (max-width: 600px) {
	.u-sp-only {
		display: inline;
	}
}

/* 新デザインのセクション共通（色と余白）。セクション同士の間隔は上下の余白の合計（PC 96px / SP 64px）
 * 色のルール
 *   --sec-blue   : メインの青。セクション見出し・ボタン・枠線・本文リンクなど
 *   --sec-accent : アクセントの青。リスト内の強調語句・チェックアイコン・カードの小見出しなど、目を引かせたい部分 */
.sec {
	--sec-blue: #009df1;
	--sec-accent: #309dff;
	--sec-orange: #ff932d; /* 申し込みボタン */
	--sec-text: #333;
	--sec-gutter: clamp(16px, 4vw, 56px);

	padding: 48px var(--sec-gutter);
	color: var(--sec-text);
}

/* 見出しと本文のまとまり（.sec-intro--center で中央そろえ）
 * <div class="sec-intro">
 *   <hgroup class="sec-head">…</hgroup>
 *   <p class="sec-text">…</p>
 * </div> */
.sec-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.sec-intro--center {
	align-items: center;
	text-align: center;
}

/* セクション見出し：大きな英字ラベル + 日本語の見出し（h2） */
.sec-head__en {
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
}
.sec-head__title {
	color: var(--sec-blue);
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

/* 英字ラベルを付けない大きな日本語の見出し（h2）。<em> で囲んだ語句をメインの青にする */
.sec-title {
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
.sec-title em {
	color: var(--sec-blue);
	font-style: normal;
}

/* 見出し下の本文（複数段落は <div class="sec-text"><p>…</p><p>…</p></div>） */
.sec-text {
	max-width: 100%;
	font-size: 16px;
	font-weight: 200;
	line-height: 1.8;
	letter-spacing: 0.02em;
}
.sec-text p + p {
	margin-top: 24px;
}
.sec-text a {
	color: var(--sec-blue);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.sec-text a:hover {
	text-decoration: none;
}

/* ボタンの置き場所（.sec-action--center で中央そろえ）
 * 本文のすぐ下なら 32px、カードやリストなどのブロックの下なら 56px あける */
.sec-action {
	display: flex;
	margin-top: 56px;
}
.sec-intro + .sec-action {
	margin-top: 32px;
}
.sec-action--center {
	justify-content: center;
}

/* 矢印付きの丸ボタン */
.btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 40px;
	border-radius: 999px;
	background: var(--sec-blue);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	transition: opacity 0.2s;
}
.btn-arrow img {
	transition: translate 0.2s;
}
.btn-arrow:hover {
	opacity: 0.85;
}
.btn-arrow:hover img {
	translate: 4px 0;
}
.btn-arrow:focus-visible {
	outline: 3px solid var(--sec-blue);
	outline-offset: 4px;
}

/* 申し込み（無料トライアルなど）用のオレンジの大きなボタン（.btn-cta--sm で小さいサイズ） */
.btn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	min-height: 72px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--sec-orange);
	box-sizing: border-box;
	color: #fff;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
	transition: opacity 0.2s;
}
/* 小さいサイズは文字に合わせた幅にする */
.btn-cta--sm {
	width: auto;
	max-width: none;
	min-height: 56px;
	padding: 12px 40px;
	font-size: 16px;
}
.btn-cta:hover {
	opacity: 0.85;
}
.btn-cta:focus-visible {
	outline: 3px solid var(--sec-orange);
	outline-offset: 4px;
}

@media screen and (max-width: 900px) {
	.sec {
		padding-block: 32px;
	}
	.sec-action {
		margin-top: 40px;
	}
	.sec-intro + .sec-action {
		margin-top: 24px;
	}
	.sec-text {
		font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	/* スマートフォンではボタンを押しやすい幅に広げる */
	.btn-arrow {
		width: 100%;
		max-width: 400px;
	}
}