@charset "UTF-8";

	/*!
	* LP専用スタイルシート (PCファースト / リファクタリング版)
	*
	* Description: LPの全スタイルを定義します。
	* Methodology: PC表示をデフォルトとし、max-widthメディアクエリでタブレット・モバイルに対応します。
	* Main Breakpoint: 960px
	*/

	/* =========================================================
	0. 変数・基本設定
	========================================================= */

	:root {
		--header-height: 75px;
		/* PC用の高さをデフォルトに */
	}

	@media (max-width: 960px) {
		:root {
			--header-height: 60px;
			/* モバイル用の高さに上書き */
		}
	}

	html {
		box-sizing: border-box;
		font-size: 62.5%;
		/* 1rem = 10px */
		scroll-padding-top: var(--header-height);
		/* FVやページ内リンクのずれを補正 */
		/* scroll-behavior: smooth; は lp.js で制御 */
	}

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	body.lp-blank {
		font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
		font-weight: 400;
		line-height: 1.8;
		color: #333;
		background-color: #f4f7fd;
		overflow-x: hidden;
		font-size: 1.6rem;
	}

	/* =========================================================
	1. 共通レイアウト & コンポーネント
	========================================================= */

	/* ------------------------------
	リセット（最小限）
	------------------------------ */
	html,
	body,
	div,
	span,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	a,
	img,
	ol,
	ul,
	li,
	figure,
	figcaption {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;
		font: inherit;
	}

	ul,
	ol {
		list-style: none;
	}

	img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	/* ------------------------------
	コンテナ
	------------------------------ */
	.lp-container {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 20px;
	}

	@media (max-width: 960px) {
		main.lp-container {
			/* mainに限定して画像をフル幅にする */
			padding: 0;
		}
	}

	/* ------------------------------
	セクション共通
	------------------------------ */
	section {
		padding: 80px 0;
	}

	@media (max-width: 1024px) {
		section {
			padding: 60px 0;
		}
	}

	@media (max-width: 768px) {
		section {
			padding: 40px 0;
		}
	}

	/* ------------------------------
	タイポグラフィ
	------------------------------ */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 1.4;
		color: #222;
	}

	h1 {
		font-size: 3.2rem;
		margin-bottom: 2rem;
	}

	h2 {
		font-size: 4.5rem;
		font-weight: 800;
		margin-bottom: 1.5rem;
	}

	h3 {
		font-size: 3.0rem;
		margin-bottom: 1rem;
	}

	p {
		margin-bottom: 1.5em;
	}

	@media (max-width: 960px) {
		h2 {
			padding-top: 40px;
			font-size: 28px;
		}

		#wpcf7-f19-p20-o1>form>h2 {
			font-size: 28px;
		}

		/* フォーム内 h2 */
	}

	/* =========================================================
	2. ヘッダー
	========================================================= */
	.lp-header {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: var(--header-height);
		/* 変数を参照 */
		border-bottom: 1px solid #ccc;
		background: #fff;
		transition: height 0.3s ease;
	}

	.lp-header-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1200px;
		height: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}

	.lp-header-logo {
		display: flex;
		align-items: center;
	}

	h1.lp-header-logo {
		/* body > header > div > h1 の代わりに */
		margin-bottom: 0;
	}

	.lp-header-logo a {
		font-size: 22px;
		/* PCでのフォントサイズ */
		font-weight: 700;
		color: #002b5e;
		white-space: nowrap;
	}

	/* --- PCナビゲーション (デフォルト) --- */
	.lp-header-nav {
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.lp-header-nav ul {
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.lp-header-nav a {
		font-size: 18px;
		font-weight: 500;
		color: #292929;
	}

	.lp-header-btns {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.lp-header-btns img {
		height: 45px;
		width: auto;
		display: block;
	}

	.lp-hamburger {
		display: none;
		/* PCではハンバーガーを非表示 */
	}

	/* --- モバイルナビゲーション (画面幅 960px 以下) --- */
	@media (max-width: 960px) {
		.lp-header-logo a {
			font-size: 18px;
			/* モバイルでのフォントサイズ */
		}

		/* ハンバーガーボタンを表示 */
		.lp-hamburger {
			display: block;
			position: relative;
			z-index: 10001;
			width: 40px;
			height: 40px;
			border: none;
			background: none;
			padding: 0;
			cursor: pointer;
		}

		.lp-hamburger span {
			display: block;
			position: absolute;
			left: 5px;
			width: 30px;
			height: 3px;
			background-color: #333;
			border-radius: 2px;
			transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
		}

		.lp-hamburger span:nth-child(1) {
			top: 8px;
		}

		.lp-hamburger span:nth-child(2) {
			top: 18px;
		}

		.lp-hamburger span:nth-child(3) {
			top: 28px;
		}

		/* ナビゲーションメニューをスライドパネル化 */
		.lp-header-nav {
			position: fixed;
			top: 0;
			right: -100%;
			z-index: 10000;
			display: block;
			width: 100%;
			max-width: 200px;
			height: 100vh;
			padding: 100px 30px 30px;
			background-color: #012b5d;
			box-shadow: -4px 0 10px rgba(0, 0, 0, .1);
			transition: right 0.3s ease-in-out;
			overflow-y: auto;
		}

		.lp-header-nav ul {
			display: block;
		}

		.lp-header-nav li {
			margin: 0 0 20px 0;
		}

		.lp-header-nav a {
			font-size: 18px;
			color: #fff;
		}

		.lp-header-btns {
			flex-direction: column;
			gap: 15px;
			margin-top: 30px;
		}

		.lp-header-btns img {
			width: 100%;
			height: 60px;
		}

		/* モバイルメニュー内の区切り線 */
		.lp-header-nav ul li+li {
			position: relative;
			margin-top: 1rem;
			padding-top: 3rem;
		}

		.lp-header-nav ul li+li::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			border-top: 1px dashed #fff;
			opacity: 0.6;
		}

		/* メニューが開いた時のスタイル */
		body.is-menu-open .lp-header-nav {
			right: 0;
		}

		body.is-menu-open .lp-hamburger span {
			background-color: #fff;
		}

		body.is-menu-open .lp-hamburger span:nth-child(1) {
			top: 18px;
			transform: rotate(45deg);
		}

		body.is-menu-open .lp-hamburger span:nth-child(2) {
			opacity: 0;
		}

		body.is-menu-open .lp-hamburger span:nth-child(3) {
			top: 18px;
			transform: rotate(-45deg);
		}
}

@media (max-width: 767px) {
	/* 767px以下のモバイルではボタンを画面下部に固定表示 */
	.lp-header-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9998; /* トップへ戻るボタンより少し下 */

		/* ▼ レイアウトと装飾 */
		width: 100%;
		display: flex;
		flex-direction: row; /* 横並びに変更 */
		gap: 2px;
		padding: 1px 3px;
		background: #fff;
		border-top: 1px solid #ddd;
		box-shadow: 0 -2px 8px rgba(0,0,0,.08);
		box-sizing: border-box; /* paddingを含めて幅100%にする */
	}

	/* ボタン（aタグ）を均等幅にする */
	.lp-header-btns a {
		flex: 1; /* 利用可能なスペースを均等に分け合う */
	}

	/* 画像の高さを調整 */
	.lp-header-btns img {
		height: auto; /* 高さを固定 */
		width: 100%;   /* 親要素の幅に合わせる */
		object-fit: contain; /* アスペクト比を保ったままフィットさせる */
	}
}

/* =========================================================
3. 各セクションのスタイル
========================================================= */

	/* ------------------------------
	FV (#lp)
	------------------------------ */
	#lp {
		padding-top: var(--header-height);
	}

	/* ------------------------------
	CTAボタン
	------------------------------ */
	h3.cta-h3 {
		font-size: 3rem;
		padding-top: 10px;
	}

	.lp-cta-buttons {
		display: flex;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;
	}

	.lp-cta-buttons a {
		display: inline-block;
		padding: 28px;
	}

	.lp-cta-buttons a>img {
		width: clamp(200px, 37.7vw, 400px);
	}

	@media (max-width: 960px) {
		.cta-buttons-wrapper {
			padding: 10px 0;
		}

		h3.cta-h3 {
			font-size: 20px;
			font-weight: 800;
		}

		.lp-cta-buttons {
			gap: 0;
		}

		.lp-cta-buttons a {
			padding: 10px 5vw;
		}

		.lp-cta-buttons a>img {
			width: 90vw;
		}
	}

	/* ------------------------------
	FAQ (#faq)
	------------------------------ */
	#faq {
		scroll-margin-top: var(--header-height);
	}

	#faq .ea-body>p {
		font-size: 18px;
	}

	/* ------------------------------
	フッター
	------------------------------ */
	.lp-footer {
		background: #002b5c;
		color: #fff;
		padding: 24px 16px 100px 16px;
		text-align: center;
	}

	.lp-footer__inner {
		max-width: 1080px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.lp-footer__links {
		display: flex;
		gap: 16px;
		margin: 4px 0 0;
		flex-wrap: wrap;
		justify-content: center;
	}

	.lp-footer__links a {
		font-size: 12px;
	}

	.lp-footer__links a:hover {
		text-decoration: underline;
	}

	.lp-footer small {
		font-size: 14px;
		display: block;
		opacity: 0.8;
	}
.lp-footer > div > ul {
	margin: 0;
}
.lp-footer > div > ul > li {
	line-height: 1.0;
}
	/* ------------------------------
	トップへ戻るボタン
	------------------------------ */
	.to-top {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 9999;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		background: #fad226;
		box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}

	.to-top.is-show {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.to-top img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.to-top:focus-visible {
		outline: 3px solid #005fcc;
		outline-offset: 3px;
	}

	@media (max-width: 480px) {
		.to-top {
			width: 48px;
			height: 48px;
			bottom: 60px;  /* 固定ボタンより上 */
			right: 12px;
		}
	}

	/* =========================================================
	4. お問い合わせ (#contact) Contact Form 7 スタイル
	========================================================= */
	#contact {
		padding: 0 95px 95px 95px;
		background-color: #002b5c;
	}

	#contact>div {
		background-color: #fff;
		max-width: 750px;
		margin: 0 auto;
	}

	#contact form {
		padding: 0 4vw;
	}
	/* セクションタイトル「ご相談・お問い合わせ」 */
	#wpcf7-f19-p20-o1 > form > h2 {
		font-size: 46px;
		margin: 0;
		padding: 1.5rem 0;
	}
	@media (max-width: 767px) {
		#wpcf7-f19-p20-o1 > form > h2 {
			font-size: 28px;
		}
	}


	@media (max-width: 1024px) {
		#contact {
			padding: 64px;
		}
	}

	@media (max-width: 767px) {
		#contact {
			padding: 10px;
		}
	}

	.wpcf7-form p {
		margin: 0 0 14px;
		font-size: 18px;
	}

	.wpcf7-form p>label {
		display: inline-block;
		margin-bottom: 6px;
		font-size: 19px;
		font-weight: 700;
		color: #333;
	}

	.wpcf7-form .required {
		font-size: 15px;
		font-weight: 500;
		color: #d23;
		margin-left: .4em;
	}

/* テキスト入力・テキストエリア・セレクトのみに適用 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d6dce5;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
	font-size: 18px;
}

/* ラジオボタンとチェックボックスは別スタイル */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
	width: auto;
	padding: 0;
}

	.wpcf7 textarea {
		min-height: 220px;
		line-height: 1.7;
		resize: vertical;
	}

	.wpcf7 input:focus,
	.wpcf7 textarea:focus,
	.wpcf7 select:focus {
		outline: none;
		border-color: #9bb7e0;
		box-shadow: 0 0 0 3px rgba(155, 183, 224, .2);
	}

	.wpcf7 .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}

	.wpcf7-radio {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 16px;
		width: 100%;
	}

	.wpcf7-radio .wpcf7-list-item {
		flex: 0 0 auto;
		min-width: max-content;
		margin: 0;
	}

	.wpcf7-radio .wpcf7-list-item>label {
		display: inline-flex;
		align-items: center;
		gap: .6em;
	}

	.wpcf7-radio .wpcf7-list-item-label {
		font-size: 18px;
		white-space: nowrap;
		line-height: 1.6;
	}

	.wpcf7-form input.wpcf7-submit {
		color: #fff;
		background-color: #ff6600;
		padding: 12px 22px;
		margin-bottom: 50px;
		border-radius: 8px;
		cursor: pointer;
	}

	.wpcf7-form input.wpcf7-submit[disabled] {
		opacity: .6;
		cursor: not-allowed;
	}

	.wpcf7-response-output {
		margin-top: 14px;
		width: 100%;
	}

	.wpcf7-not-valid {
		border-color: #e06b6b !important;
	}

	.wpcf7-not-valid-tip {
		color: #c33;
		margin-top: 6px;
		font-size: .92em;
	}

	/* 同意チェックボックス */
	.wpcf7-acceptance .wpcf7-list-item {
		display: block;
		width: 100%;
	}

	.wpcf7-acceptance .wpcf7-list-item>label {
		display: grid;
		grid-template-columns: 1.2em 1fr;
		align-items: start;
		column-gap: .6em;
		width: 100%;
	}

	.wpcf7-acceptance .wpcf7-list-item>label>input[type="checkbox"] {
		margin-top: .3em;
	}

	.wpcf7-acceptance .wpcf7-list-item-label {
		white-space: normal;
		line-height: 1.7;
		overflow-wrap: anywhere;
	}

	/* CF7ラジオの疑似要素装飾を無効化（iPhoneでの被り防止） */
	.wpcf7-form .wpcf7-radio .wpcf7-list-item label::before,
	.wpcf7-form .wpcf7-radio .wpcf7-list-item label::after,
	.wpcf7-form .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::before,
	.wpcf7-form .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::after {
		content: none !important;
		display: none !important;
	}
	/* gap未対応端末（古いiOS Safariなど）対策 */
	.wpcf7-radio .wpcf7-list-item > label {
	  display: inline-flex;
	  align-items: center;
	  gap: .6em;              /* 新しいブラウザ用 */
	}

	.wpcf7-radio .wpcf7-list-item > label > input[type="radio"] {
	  margin-right: .6em;     /* 古いブラウザ用フォールバック */
	}

/* ラジオボタンとチェックボックスはwidth:100%を解除 */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
	width: auto !important;
	flex-shrink: 0;
	margin: 0;
}

/* iOS Safari対策：ラジオボタンの配置を明示 */
.wpcf7-radio .wpcf7-list-item > label {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	position: relative;
}

.wpcf7-radio .wpcf7-list-item > label > input[type="radio"] {
	margin: 0;
	margin-right: .6em; /* gap未対応ブラウザ用 */
	position: relative;
	top: 0;
	-webkit-appearance: radio;
	appearance: radio;
}

/* ラベルテキストの配置を安定化 */
.wpcf7-radio .wpcf7-list-item-label {
	font-size: 18px;
	white-space: nowrap;
	line-height: 1.6;
	flex-shrink: 0;
}

	/* =========================================================
	5. ユーティリティ & 補助クラス
	========================================================= */

	/* ------------------------------
	レスポンシブ表示切り替え
	------------------------------ */
	.show-pc {
		display: block;
	}

	.show-tb,
	.show-sp {
		display: none;
	}

	@media (max-width: 1024px) {
		.show-pc {
			display: none;
		}

		.show-tb {
			display: block;
		}
	}

	@media (max-width: 768px) {
		.show-tb {
			display: none;
		}

		.show-sp {
			display: block;
		}
	}

	/* ------------------------------
	ベースのレスポンシブ調整
	------------------------------ */
	@media (max-width: 1100px) {
		.lp-container {
			max-width: 100%;
		}
	}

	@media (max-width: 768px) {
		html {
			font-size: 58%;
		}
	}

	@media (max-width: 480px) {
		html {
			font-size: 54%;
		}
	}

	/* ------------------------------
	画像レイアウト
	------------------------------ */
	.img-full {
		width: 100%;
		height: auto;
	}

	img.wp-image-49,
	img.wp-image-39 {
		width: 100%;
	}

	.img-center,
	.aligncenter {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.img-center img {
		margin: 0 auto;
	}

	.alignfull>img {
		width: 100%;
	}

	#lp figure>figcaption {
		display: none !important;
	}

	/* ------------------------------
	テキスト・マージン
	------------------------------ */
	.has-text-align-center,
	.text-center {
		text-align: center;
	}

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

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

	.mt-0 {
		margin-top: 0 !important;
	}

	.mb-0 {
		margin-bottom: 0 !important;
	}

	.mt-20 {
		margin-top: 2rem;
	}

	.mb-20 {
		margin-bottom: 2rem;
	}

	/* =========================================================
	6. プライバシーポリシーのページ専用
	========================================================= */
body.lp-privacy h1, body.lp-privacy h2, body.lp-privacy p {
	font-family: "Noto Sans JP",sans-serif;
}
body.lp-privacy > main {
	padding: 0 25px;
}
body.lp-privacy > main > h1 {
	padding-top: 50px;
    font-size: 32px;
	font-weight: 600;
}
body.lp-privacy > main > h2 {
	font: 500 24px "Noto Sans JP",sans-serif;
    line-height: 1.5;
    border-left: 6px solid #18273d;
    padding: 7px 0 7px 20px;
    color: #18273d;
}
body.lp-privacy > main > p {
	font: 400 16px "Noto Sans JP",sans-serif;
}
body.lp-privacy ul > li {
	font-size: 16px;
}