/*
Theme Name: つなぐ堂福岡
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

:root {
	--vk-size-text: 18.5px;
	--wp--preset--font-family--system-font: "Noto Sans JP", sans-serif;
	--wp--preset--font-size--small:1rem;
}


@media (max-width: 787px) {
	:root {
		--vk-width-container: 100%;
	}
}

.container-sm {
	max-width: 100%;
}


aside {
	margin-bottom: 0;
}

.flexacjbe {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.flex {
	display: flex;
}

a.btn {
	font-size: 1rem !important;
	font-weight: 600;
	padding: 1em 0 !important;
	max-width: 400px;
	width: 100%;
}


.site-body-bottom .widget_block {
	margin-bottom: 0 !important
}

/*共通パーツの編集ボタン*/
.veu_adminEdit_cta>.btn {
	font-size: 14px !important;
	padding: .5em 1em !important;
	font-weight: 400 !important;
}


.box-shadow {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

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


@media(max-width:767px) {
	.site-body {
		padding-bottom:0;
	}
}


.post-name-plan .priceTable table {
	margin-bottom:0!important;
}

.page-header-title, h1.page-header-title {
	font-size:2.6rem;
}




/* -------------------------------------------------------------------------
 * BASE
 * ------------------------------------------------------------------------- */
	body {
		/* スマホ・タブレットのサイズ */
		font-size: 18px;
		line-height: 1.8;
		/* 行間も少し広げると読みやすいです */
		color: #000;
	}

	@media (min-width: 992px) {
		body {
			/* PCのサイズ（ここを好みに調整してください） */
			font-size: 18.5px;
		}
	}

	h2 {
		font-weight: 700;
		font-size: clamp(24px, 5vw, 38px) !important;
	}

	h2.wp-block-heading {
		margin-block-end: .35em !important;
	}

	h2.wp-block-heading+p {
		margin-bottom: 2.5em;
	}

	@media (max-width: 640px) {

		body,
		p,
		li,
		.entry-body {
			font-size: 4.33vw;
		}

		.page-header-title,
		h1.page-header-title {
			font-size: 6.88vw
		}

		h2 {
			font-size: 5.66vw!important
		}

		h3 {
			font-size: 4.66vw!important
		}

		.page-header {
			min-height: 10rem;
		}

		.vk_outer-width-full.vk_outer-paddingLR-none>div>.vk_outer_container {
			padding-left: 10px;
			padding-right: 10px;
		}


	}


/* -------------------------------------------------------------------------
 * パンくず
 * ------------------------------------------------------------------------- */
	.breadcrumb {
		border: 0 !important;
	}

	.breadcrumb-list li {
		font-size: .75rem !important;
	}

/* -------------------------------------------------------------------------
 * ナビ
 * ------------------------------------------------------------------------- */
	.vk-mobile-nav-menu-btn {
		border: 0 !important;
		width: 80px;
		height: 80px;
		top:0!important;
		right:0!important;
		background-size:50px;
	}

	.vk-mobile-nav-menu-btn {
		background: url(./assets/img/vk-menu-btn-white.svg) center 50% no-repeat;
		background-color:#00639e!important;	
	}

	.vk-mobile-nav-menu-btn.menu-open {
		background: url(./assets/img/vk-menu-close-white.svg) center 50% no-repeat;
	}


	@media only screen and (max-width: 479px) {
		.vk-mobile-nav-menu-btn {
			top:0;
			width: 65px;
			height: 65px;
			right:0!important;
			background-size:40px;
		}

		.vk-mobile-nav-menu-btn.menu-open {
			background-size:40px;

		}	

	}






/* --------------------------------------------------
   PCでも完全ハンバーガーメニュー化（修正版）
-------------------------------------------------- */
	.global-nav {
		/*display: none !important;*/
	}

	/* 2. ハンバーガーボタンを強制表示 */
	.vk-mobile-nav-menu-btn {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 9999 !important;
	}

	/* 3. メニューの箱（ドロワー）をPCでも存在させる */
	@media (min-width: 992px) {
		.vk-mobile-nav {
			display: block !important;
			top: 0;
			left: 0;
		}
	}

	/* 4. 【重要】モバイルメニューリストを強制的に生かす */
	.vk-mobile-nav .vk-menu-acc {
		display: block !important;
	}

	.site-footer-content .navBtn {display:none}


	.navBtn {
		display:flex;
		flex-wrap:wrap;
		line-height:1;
		flex-wrap:nowrap;
	}

	.navBtn a {
		border:0!important;
	}


	@media (max-width:640px) {

		.navBtn {
			justify-content:space-between;
			flex-wrap:wrap;
		}	

		.navBtn a.tel {
			display:block;
			width:90%;
			margin:0 auto;
		}

		.navBtn a.mail, .navBtn a.line  {
			width:49%;
			padding:0;
		}

	}









/* -------------------------------------------------------------------------
 * header
 * ------------------------------------------------------------------------- */
	.logo {
		max-width: 260px;
	}

	header {
		z-index: 1;
		position: relative;
		box-shadow: 0 5px 10px Rgba(0, 0, 0, 0.2);
	}

	header .logo {
		margin-left: 40px;
		max-height:60px;
	}

	header .header_navs {
		height: 80px;
		margin-right: 80px;
	}

	header .header_navs p {
		line-height: 1;
	}

	header .header_navs a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}


	header .hnav_tel {
		margin-right:1em;
	}

	header .hnav_mail {
		margin-right:.5em;
	}

	header .hnav_tel img, header .hnav_mail img  {
		max-height:70px;
	}


	@media only screen and (max-width: 1024px) {
		header .logo {
			max-width: 250px;
			margin-left: 30px;
		}

		header .hnav_tel {
			font-size: 35px;
			padding: 0 20px;
		}

		header .header_navs img {
			max-width: 25px;
			position: relative;
			top: 3px;
		}

		header .hnav_mail {
			font-size: 25px;
		}

		header .header_navs {
			height: 100px;
		}
	}

	@media only screen and (max-width: 1000px) {
		header {
			height: 80px;
			padding: 15px 0;
		}

		header .header_navs {
			display: none;
		}
	}

	@media only screen and (max-width: 768px) {
		.logo {
			max-width: 250px;
		}
	}

	@media only screen and (max-width: 479px) {
		header {
			height: 65px;
			padding: 10px 0;
		}

		header .logo {
			max-width: 200px;
			margin-left: 20px;
		}
	}



.page-header {
	background-size:contain;
	background-position-y: top;
	background-repeat:repeat
}


/* -------------------------------------------------------------------------
 * 共通パーツ
 * ------------------------------------------------------------------------- */

	/**　CTA	----------------------------- */
		.cv-hd_txt {
			padding: 15px 0;
		}

		.cv-hd_txt span {
			width: 280px;
			border: solid 2px white;
			text-align: center;
			padding: 10px;
			color: white;
			font-size: 20px;
			font-weight: bold;
		}

		.cv-hd_txt h3 {
			font-size: 2rem;
			font-weight: 600;
			margin-bottom: 0 !important
		}

		.bg-cv_blue {
			background: #2b8bbb;
		}

		.cv-txt_yellow {
			color: #ffd800;
		}

		.catch-blue {
			color: #346bb6;
		}

		.cv-area {
			padding-bottom: 30px;
			overflow: hidden;
		}

		.cv-inner {
			max-width: 980px;
			width: 100%;
			position: relative;
			margin: 0 auto;
		}

		.cv-area .cv-box {
			background: #fff;
			padding: 30px;
			text-align: center;
			overflow: hidden;
			margin-top: 30px;
			border-radius: 10px;
			box-sizing: border-box;
		}

		.cv-area .cv-box p {
			font-size: 30px;
			background: #d0e8fc;
			padding: 10px;
			font-weight: bold;
		}

		.cv-area .cv-box {
			position: relative;
		}

		.cv-area .cv-box .inner {
			display: flex;
			align-items: center;
			justify-content: space-between
		}

		.cv-area .cv-box .inner a.tel {
			max-width: 400px
		}

		.cv-area .cv-box .cv-btn {
			display: flex;
			justify-content: space-around;
		}

		.cv-area .cv-box .cv-btn .contact-btn {
			width: 48%
		}

		.cv-area .cv-box .contact-btn:hover {
			opacity: 0.8;
		}


	@media only screen and (max-width: 968px) {
		.cv-inner {
			max-width: 700px;
		}

		.cv-area .cv-hd_txt span {
			width: 240px;
		}

		.cv-area .cv-hd_txt h3 {
			font-size: 30px;
		}

		.cv-area .cv-box .contact-btn {
			width: 48%;
		}

		.cv-area .cv-box::after {
			width: 260px;
			height: 148px;
			left: 25px;
		}
	}

	@media only screen and (max-width: 767px) {
		.cv-area {
			border-radius: 0;
			overflow: unset;
		}

		.cv-area .cv-box {
			padding: 15px;
			overflow: unset;
			width: 100%;
			margin: 15px auto 0;
		}

		.cv-area .cv-box p {
			font-size: 4vw;
			letter-spacing: 0;
			padding: 5px 0;
			margin-bottom:1em;
		}

		.cv-area .cv-box .inner {
			display:block;
		}


		.cv-area .cv-box .contact-btn {
			margin-top: 15px;
		}

		.cv-area .cv-hd_txt {
			padding-top: 15px;
		}

		.cv-area .cv-hd_txt h3 {
			font-size: 22px;
			line-height: 1.3;
			margin-top: 10px;
			position: relative;
			z-index: 3;
			text-shadow: 2px 2px 0px #1f7dc5, -2px 2px 0px #1f7dc5, 2px -2px 0px #1f7dc5, -2px -2px 0px #1f7dc5, 2px 0px 0px #1f7dc5, 0px 2px 0px #1f7dc5, -2px 0px 0px #1f7dc5, 0px -2px 0px #1f7dc5;
		}

		.cv-area .cv-box .cv-img {
			margin-top: 15px;
		}

		.cv-area .cv-box .cv-img>div {
			padding-left: 0;
		}

		.cv-area .cv-box .contact-btn {
			width: 100%;
		}

		.cv-area .cv-hd_txt span {
			max-width: 150px;
			font-size: 12px;
			padding: 5px;
			letter-spacing: 0;
		}

		.cv-area .cv-hd_txt .cv-inner {
			width: 90%;
			margin: 0 auto;
			flex-direction: column;
			align-items: baseline;
			flex-direction: column;
			align-items: baseline;
		}

		.cv-hd_txt span {
			width:100%;
			font-size:3.66vw;
			line-height:1;
			border-width:1px;
		}

		.cv-hd_txt h3 {
			font-size:6vw!important;
			margin-top:10px;
		}
	}







	/**　お客様の声	----------------------------- */
		#voice {
			width: 100% !important;
			max-width: 100% !important
		}

		/* Swiperコンテナの余白調整 */
		.voice-slider {
			width: 95%;
			padding-bottom: 20px;
			/* ページネーション用の下部余白 */
			padding-top: 10px;
			/* 影が見切れないように */
		}

		/* カード本体（高さ揃えを追加） */
		.voice-card {
			background: #fff;
			border-radius: 8px;
			padding: 24px;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
			border: 1px solid #eee;
			height: 100%;
			/* スライドの高さを揃える */
			box-sizing: border-box;
		}

		/* スライド自体の高さ設定 */
		.swiper-slide {
			height: auto;
			/* 中身に合わせて伸縮 */
			display: flex;
			/* 子要素の高さを揃えるため */
			flex-direction: column;
		}

		/* 以下、前回と同じ装飾 */
		.voice-header {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ddd;
			padding-bottom: 10px;
			margin-bottom: 15px;
		}

		.voice-name {
			font-size: 1rem;
			font-weight: bold;
			margin: 0 !important;
			color: #333;
		}

		.voice-body p {
			font-size: .9rem;
			line-height: 1.6;
			color: #444;
			margin-bottom: 0;
		}

		/* Swiperページネーションの色変更（テーマカラーに合わせるなら） */
		.swiper-pagination-bullet-active {
			background: #ffcc00 !important;
		}


		@media (max-width: 640px) {
			.voice-body p {
				font-size: 4.2vw;
				margin-bottom: 0;
			}

		}



	/**　サービス対応地域	----------------------------- */
		.service-area-section {
			padding: 60px 20px;

			width: 100vw;
			margin-left: calc(50% - 50vw);
			/* 左に突き抜ける */
			margin-right: calc(50% - 50vw);
			/* 右に突き抜ける */
			box-sizing: border-box;
			max-width: 100vw;
			background-size: cover;
			background-position: center;
			background-blend-mode: color;
			background-image: url(https://festa1.xsrv.jp/wp-content/uploads/2025/12/solution5.webp);
			background-color: #f9fdf9;
			/* 背景：ほんのり薄い緑 */
			background-blend-mode: color;
		}

		/* 1. 上部レイアウト（PCは横並び） */
		.area-top-row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			/* 垂直方向中央揃え */
			justify-content: space-between;
			gap: 40px;
			margin-bottom: 50px;
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}

		/* 左：テキスト */
		.area-text-box {
			flex: 1;
			/* 幅を自動調整 */
			min-width: 580px;
			/* 狭くなりすぎ防止 */
		}

		.area-sub-ttl {
			font-size: 1.3rem;
			color: #336bb6;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.area-main-ttl {
			font-size: 28px;
			font-weight: 900;
			margin-bottom: 20px;
			line-height: 1.3;
		}

		.icon-loc {
			margin-right: 5px;
			font-size: 1.2em;
		}

		.area-desc {
			line-height: 1.8;
		}

		/* 右：地図画像 */
		.area-map-box {
			flex: 1;
			min-width: 300px;
			text-align: center;
			margin: 0;
		}

		.area-map-box img {
			max-width: 100%;
			height: auto;
			filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
			/* 地図を少し浮かす */
		}

		/* 2. 下部：エリア一覧リスト */
		.area-list-box {
			max-width: 1000px;
			margin: 0 auto;
			background: #fff;
			border: 2px solid #1085D2;
			border-radius: 8px;
			overflow: hidden;
		}

		/* 緑の見出し帯 */
		.area-list-header {
			background: #1085D2;
			color: #fff;
			font-weight: bold;
			text-align: center;
			padding: 15px;
			font-size: 1.2rem;
		}

		/* リストのグリッド表示 */
		.area-list-grid {
			display: grid;
			/* 幅に合わせて自動で列数を調整する魔法（1列〜4列） */
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			gap: 15px;
			padding: 20px;
		}

		/* 各エリア名 */
		.area-item {
			font-weight: bold;
			color: #333;
			display: flex;
			align-items: center;
			padding-left: 5px;
		}

		/* 矢印アイコン（CSSで作る） */
		.area-item::before {
			content: '';
			display: inline-block;
			width: 0;
			height: 0;
			border-left: 6px solid #009944;
			/* 三角形の色 */
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			margin-right: 8px;
		}

		/* スマホ対応 */
		@media (max-width: 767px) {

			.service-area-section {
				padding:40px 1em 20px 1em;
			}	


			.area-top-row {
				flex-direction: column;
				/* 縦並び */
				gap: 20px;
				max-width:100%;
				margin-bottom:1em;
			}

			.area-sub-ttl, .area-main-ttl {
				text-align:center;
			}

			.area-map-box {
				width:100%;
			}

			.area-text-box {
				min-width:auto;
			}

			.area-list-grid {
				grid-template-columns: repeat(2, 1fr);
				/* スマホは2列固定 */
			}

			.area-list-header {
				font-size:4vw!important;
			}

			.area-list-box {
				max-width:100%;
			}

			.area-list-grid {
				gap:5px;
				padding:10px 20px;
			}
		}



	/**　お任せください	----------------------------- */
		.achieve-section {
			background-color: #fdfdf8bf;
			/* 背景：ごく薄いベージュ */
			padding: 60px 20px;
			background-image: url(https://festa1.xsrv.jp/wp-content/uploads/2025/12/achieveBkg-scaled.webp);

			width: 100vw;
			margin-left: calc(50% - 50vw);
			/* 左に突き抜ける */
			margin-right: calc(50% - 50vw);
			/* 右に突き抜ける */
			box-sizing: border-box;
			max-width: 100vw;
			background-size: cover;
			background-position: center;
			background-blend-mode: color;
		}

		/* 1. ヘッダー周り */
		.achieve-header {
			text-align: center;
			margin-bottom: 40px;
			max-width:560px;
			margin-left:auto;
			margin-right:auto;
		}

		/* 緑の吹き出しバッジ */
		.achieve-badge {
			display: inline-block;
			background: #2CB4C3;
			color: #fff;
			padding: 8px 0;
			display:block;
		}

		/* メインタイトル */
		.achieve-title {
			font-weight: 900;
			line-height: 1.4;
			color: #333;
			text-align: center;
		}

		.gold-text {
			color: #c5a059;
			/* ゴールド色 */
			font-size: 1.2em;
			margin: 0 5px;
		}

		/* 2. コンテンツエリア（左右カラム） */
		.achieve-content {
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			max-width: 1100px;
			margin: 0 auto;
		}

		/* --- 左側カラム --- */
		.achieve-left {
			flex: 1;
			/* 幅を自動調整 */
			min-width: 300px;
		}

		/* バッジの並び */
		.badges-row {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
			flex-wrap: wrap;
		}

		.crown-badge {
			border: 2px solid #c5a059;
			color: #1085d2;
			font-weight: bold;
			padding: 5px 15px;
			border-radius: 5px;
			font-size: 14px;
			background: #E7F3FA;
		}

		.achieve-sub-ttl {
			font-weight: bold;
			margin-bottom: 20px;
			border-bottom: none;
			/* Lightningの標準線を消す */
		}

		.achieve-desc {
			line-height: 1.8;
		}



		/* --- 右側カラム（4つのパネル） --- */
		.achieve-right {
			flex: 1;
			min-width: 300px;
		}

		.panel-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			/* 2列 */
			gap: 20px;
		}

		.panel-item {
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
			text-align: center;
		}

		.panel-item img {
			width: 100%;
			height: 120px;
			/* 画像の高さを揃える */
			object-fit: cover;
			display: block;
		}

		.panel-label {
			background: #2B8BBB;
			color: #fff;
			padding: 7px 5px;
			font-size: .9rem;
		}

		/* スマホ対応 */
		@media (max-width: 767px) {
			.achieve-section {
				padding-top:2em;

			}

			.achieve-badge {
				font-size:3.66vw;
				padding:2px 0;
			}


			.achieve-content {
				flex-direction: column;
				/* 縦並び */
			}

			.panel-grid {
				gap: 10px;
				/* 隙間を狭く */
			}

			.achieve-sub-ttl {
				font-size:5vw!important;
				text-align:center;
				color:#c5a059;
				font-weight:800;
			}	

			.panel-label {
				font-size:3.66vw;
				font-weight:400;
			}

			.achieve-desc {
				margin-bottom:0;
			}

		}









	/**　ご利用の流れ	----------------------------- */
		.progress-features {
			padding: 80px 20px;
			background-image: linear-gradient(134deg, #2b8bbb17, transparent);
			/* 全体の背景色（薄い水色） */
			overflow: hidden;
			/* はみ出し防止 */

			width: 100vw;
			margin-left: calc(50% - 50vw);
			/* 左に突き抜ける */
			margin-right: calc(50% - 50vw);
			/* 右に突き抜ける */
			box-sizing: border-box;
			max-width: 100vw;

		}

		/* 1. 行ごとのレイアウト */
		.p-feature-row {
			display: flex;
			align-items: center;
			/* 垂直中央揃え */
			justify-content: center;
			max-width: 1000px;
			margin: 0 auto 100px;
			/* 次のアイテムとの間隔 */
			position: relative;
			/* 数字の配置基準 */
		}

		/* 偶数番目（reverse）は左右反転 */
		.p-feature-row.reverse {
			flex-direction: row-reverse;
		}

		/* 2. 画像エリア */
		.p-feature-img {
			width: 55%;
			/* 画像の幅 */
			position: relative;
			z-index: 1;
			/* 奥側に配置 */
		}

		.p-feature-img img {
			width: 100%;
		aspect-ratio: 16 / 9; /* 強制的に16:9にする魔法 */
			object-fit: cover;    /* 枠に合わせてトリミング（歪み防止） */
			vertical-align: bottom;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		}

		/* 3. テキストボックス（白） */
		.p-feature-box {
			width: 60%;
			/* 幅 */
			background: #fff;
			padding: 2rem;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
			/* ふんわりした影 */
			position: relative;
			z-index: 2;
			/* 画像より手前に表示 */
			border-radius: 4px;

			/* ▼▼ 重ねる魔法 ▼▼ */
			margin-left: -80px;
			/* 画像に被せる（左寄せの時） */
		}

		/* 偶数番目（右寄せの時）の重なり調整 */
		.p-feature-row.reverse .p-feature-box {
			margin-left: 0;
			margin-right: -80px;
			/* 画像に被せる */
		}

		/* 見出し */
		.p-box-ttl {
			font-weight: bold;
			margin-bottom: 15px;
			border-bottom: none;
			font-size:1.3rem
		}

		/* 本文 */
		.p-box-desc {
			line-height: 1.8;
			color: #444;
			margin-bottom: 0;
		}

		/* 4. 大きな数字（01, 02） */
		.p-feature-num {
			position: absolute;
			top: -40px;
			/* 画像の上に突き出す */
			font-size: 5rem;
			font-weight: 900;
			font-style: italic;
			/* 斜体 */
			color: #1085D2;
			/* 青色 */
			line-height: 1;
			z-index: 3;
			font-family: Arial, sans-serif;
		}

		/* 左配置の時の数字位置 */
		.p-feature-row .p-feature-num {
			left: 0;
		}

		/* 右配置（reverse）の時の数字位置 */
		.p-feature-row.reverse .p-feature-num {
			left: auto;
			right: 0;
		}

		/* 5. 背景の英字飾り（Best Priceなど） */
		.p-bg-text {
			position: absolute;
			bottom: 10px;
			right: 20px;
			font-size: 40px;
			font-family: "Brush Script MT", cursive;
			/* 筆記体 */
			color: #e0eefc;
			/* ごく薄い水色 */
			z-index: -1;
			/* 文字の後ろ */
			pointer-events: none;
			/* 選択不可にする */
		}

		/* --- スマホ対応（767px以下） --- */
		@media (max-width: 767px) {

			.progress-features {
				padding: 40px 1em 20px 1em;
			}

			.p-feature-row,
			.p-feature-row.reverse {
				display: block;
				/* 縦並びにする */
				margin-bottom: 60px;
			}

			.p-feature-img {
				width: 100%;
				margin-bottom: -30px;
				/* テキストボックスを少し被せる */
			}

			.p-feature-box {
				width: 95%;
				/* 横幅いっぱい近く */
				margin: 0 auto;
				/* 中央揃え */
				padding: 30px 20px;
			}

			/* 数字の位置調整 */
			.p-feature-num {
				font-size: 60px;
				top: -30px;
				left: 10px !important;
				/* スマホはずっと左上でOK */
				right: auto !important;
			}

			.p-feature-row.reverse .p-feature-box {
				margin-left:auto;
				margin-right:auto;
				padding-bottom:20px;
			}

			.p-box-ttl {
				margin-bottom:0;
				text-align:center;
				color:#0965a1;
				font-weight:900;

			}

			.p-box-desc {
				font-size:4.33vw;
			}
		}


	/**　6つの理由	----------------------------- */
		.reason-section-full {
			position: relative;
			width: 100vw;
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
			padding: 60px 20px 80px;
			overflow: hidden;
			color: #333;
		}

		/* 背景：薄いグリーンの集中線 */
		.reason-bg {
			position: absolute;
			top: -150%;
			left: -150%;
			width: 400%;
			height: 400%;
			background: repeating-conic-gradient(from 0deg,
					#ebf6fa 0deg 10deg,
					/* かなり薄い緑 */
					#f3f9fe 10deg 20deg
					/* 少し濃い薄緑 */
				);
		}

		/* インナー（コンテンツ幅制限） */
		.reason-inner {
			max-width: 1100px;
			margin: 0 auto;
			position: relative;
		}

		/* タイトル周り */
		.reason-header {
			text-align: center;
			margin-bottom: 40px;
		}

		.reason-main-title {
			font-size: clamp(24px, 5vw, 36px);
			font-weight: bold;
			line-height: 1.3;
			margin-bottom: 20px;
			text-align: center;
		}

		/* 数字「6」の強調 */
		.num-big {
			font-size: 1.8em;
			color: #257bbf;
			/* 緑 */
			font-family: Arial, sans-serif;
			margin: 0 5px;
			position: relative;
			top: 2px;
		}

		.num-big::after {
			content: '';
			/* 下線マーカー */
			display: block;
			width: 100%;
			height: 6px;
			background: #ffff00;
			position: absolute;
			bottom: 5px;
			z-index: -1;
			left: 0;
		}


		/* --- カードグリッド --- */
		.reason-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: center;
		}

		.reason-card {
			width: 31%;
			/* PCでは3列 */
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			position: relative;
			transition: transform 0.3s;
		}

		/* スマホ対応（1列） */
		@media (max-width: 767px) {
			.reason-card {
				width: 100%;
				max-width: 400px;
				/* 広がりすぎ防止 */
			}
		}

		/* 写真エリアと番号バッジ */
		.reason-img-area {
			position: relative;
			line-height: 0;
			/* 画像の下に隙間ができないように */
		}

		.reason-img-area img {
			width: 100%;
			height: 200px;
			/* 高さを揃える */
			object-fit: cover;
		}

		/* ★ 番号バッジ（斜めカット版） ★ */
		.reason-badge {
			position: absolute;
			top: 0;
			left: 0;
			background: #2b8bbb;
			/* 緑色 */
			color: #fff;
			font-size: 28px;
			/* 数字を少し大きく */
			font-weight: bold;

			/* ▼▼ ここが変更点 ▼▼ */
			width: 80px;
			/* 幅を少し広げる */
			height: 90px;
			/* 高さを少し広げる */
			padding-left: 10px;
			/* 数字の位置を微調整 */
			padding-top: 5px;

			/* 斜めに切り抜く魔法の記述 */
			clip-path: polygon(0 0, 100% 0, 0 100%) !important;

			/* 以前の丸角は削除 */
			border-radius: 0;
			/* clip-pathを使うと通常のbox-shadowは効かなくなるので削除 */
			box-shadow: none;

			/* 数字を左上に寄せる */
			font-family: Arial, sans-serif;
			padding-left: 18px;
			padding-top: 25px;
		}

		/* テキストエリア */
		.reason-body {
			padding: 20px;
			text-align: center;
		}

		.reason-ttl {
			font-size: 1.1rem;
			text-align: center;
			font-weight: bold;
			margin-bottom: 15px;
			line-height: 1.4;
			border-bottom: 2px dotted #ddd;
			padding-bottom: 10px;
		}

		.reason-ttl .red-text {
			color: #cc0000;
			font-size: 1.1em;
		}

		.reason-desc {
			font-size: .9rem;
			text-align: left;
			/* 説明文は左揃え */
			line-height: 1.6;
			margin: 0;
		}


		/* 1. 画像ブロック（figure）のサイズを調整 */
		.reason-img-area figure.wp-block-image {
			width: 100%;
			margin: 0;
			height: 220px;
			/* ★ここで高さを固定します */
		}

		/* 2. 画像本体（img）を枠に合わせてトリミング */
		.reason-img-area figure.wp-block-image img {
			width: 100%;
			height: 100%;
			/* 親（figure）と同じ高さにする */
			object-fit: cover;
			/* ★魔法の呪文：枠いっぱいに広げて、はみ出た部分をカット */
			object-position: center center;
			/* 真ん中を中心に表示 */
			border-radius: 10px 10px 0 0;
			/* 上の角だけ丸くする（デザインに合わせて） */
		}

		@media (max-width: 767px) {

			.reason-section-full {
				padding-bottom:1em;
			}

			.reason-main-title {
				line-height:1.2;
			}

			.reason-img-area img {
				height:160px;
			}

			.reason-header {
				margin-bottom:1em;
			}
		}




	/**　料金表	----------------------------- */
		.priceTable h3.tableHeader {
			color: #fff;
			text-align: center;
			background: #2b8bbb;
			border-radius: 20px 20px 0 0;
			margin-bottom: 0;
			padding: .75em 0;
			margin-top: 1.5em;
			font-size: 1.4rem;
		}

		.priceTable table {
			border-collapse: unset;
			width: 100%;
			margin-bottom: 5px;
			border: 0;
		}

		.priceTable table th,
		.priceTable table td {
			border: solid 1px #2b8bbb;
			text-align: center;
			font-size: 1.1rem;
		}

		.priceTable table th:first-child,
		.priceTable table td:first-child {
			border-left-width: 10px;
		}

		.priceTable table th:last-child,
		.priceTable table td:last-child {
			border-right-width: 10px;
		}

		.priceTable table tr:last-child td {
			border-bottom-width: 10px;
		}

		.priceTable table td:last-child {
			font-size: 1.3rem;
			font-weight: 700;
			color: #f25d5e;
		}

		.priceTable table th {
			background: #f3f9ff;
		}

		.priceTable table td {
			padding: 10px;
			border: solid 1px #2b8bbb;
			text-align: center;
		}

		.planDetail figure {
			margin-bottom: 0 !important
		}

		.planDetail h3 {
			padding: 5px 0;
			background: #2b8bbb;
			color:#fff;
			display: block;
			width: 100%;
			margin: 0 !important;
			font-weight:500;
			border-radius:0 0 10px 10px;

		}

		.planDetail p {
			font-size: .85rem;
			text-align: left;
			line-height: 1.6;
			font-weight: 400;
			padding: 1em !important;
			border: solid 1px #ddd;
			margin-top: 0;
		}

		.notice .vk_alert_icon_icon>i {
			font-size: 2.5rem;
		}


		@media (max-width: 767px) {
			#plan .vk_block-margin-md--margin-top {
				margin-top:0!important;
			}

			#plan .common-sec-title-area {
				margin-bottom:1em;
			}

			.priceTable h3.tableHeader {
				font-size:4.33vw!important;
				line-height:1;
			}

			.priceTable h3.tableHeader {
				font-size: 4.88vw;
				padding: .75em 0;
				max-width: 100%;
			}

			.wp-block-table {
				max-width: 100%;
			}

			.priceTable table {
				table-layout:auto!important;
				margin-bottom:2em!important;
			}

			.priceTable table th,
			.priceTable table td {
				padding: .75em .5em;
				line-height: 1.4;
				font-size: 3.66vw;
				white-space:nowrap;
			}

			.priceTable table td:last-child {
				font-size:4.33vw!important;
				white-space:nowrap;
			}

			.priceTable table th:first-child, .priceTable table td:first-child {
				border-left-width:5px;
			}

			.priceTable table th:last-child, .priceTable table td:last-child {
				border-right-width:5px;
			}


			.planDetail h3 {
				font-size:3.66vw!important;
			}

			.post-name-plan .vk_alert_icon {
				gap:0;
			}

			.post-name-plan .vk_alert_icon_icon>i {
				font-size:10vw;
			}


		}


	/**　セクションタイトル（バッジなし）	----------------------------- */
		.design-section-title.nobagde {
			padding:1.75em 0;
		}

		.design-section-title.nobagde .dst-main {
			top:inherit;
		}

		.post-name-faq .design-section-title {
			background:#1e73be;
		}

		.post-name-faq .design-section-title::after {
			border-top-color:#1e73be ;
		}

		@media (max-width:767px) {
			.design-section-title.nobagde {
				padding:1.35em 0;
			}			

			.post-name-faq .design-section-title {
				padding:.25em 0;
			}
		}


	/**　セクションタイトル（シンプル）	----------------------------- */

		/* 1. 全体のエリア */
		.common-sec-title-area {
			margin-bottom: 50px;
			text-align: center;
		}

		/* 2. サブタイトル（緑文字＋スラッシュ） */
		.c-sec-sub {
			color: #336bb6;
			font-weight: bold;
			font-size: clamp(18px, 5vw, 26px);
			margin-bottom: 5px !important;
			display: inline-block;
			position: relative;
			padding: 0 25px;
			/* スラッシュとの距離を確保 */
		}

		/* 左右のスラッシュ装飾（文字として表示） */
		.c-sec-sub::before,
		.c-sec-sub::after {
			content: '／';
			/* ★ここを変更：図形ではなく文字のスラッシュを使う */
			position: absolute;
			top: 50%;
			transform: translateY(-53%);
			/* 垂直位置の微調整 */

			/* スラッシュのデザイン */
			color: #336bb6;
			/* 薄い緑 */
			font-size: 18px;
			/* スラッシュの大きさ */
			font-weight: 700;
			/* 線を細く見せる */
		}

		.c-sec-sub::before {
			left: 0;
			content: '＼';
		}

		.c-sec-sub::after {
			right: 0;
		}

		/* 3. メインタイトル */
		.c-sec-main {
			font-size: clamp(24px, 5vw, 38px);
			font-weight: 900;
			line-height: 1.4;
			color: #333;
			margin-top: 0;
		}

		/* 4. 黄色マーカー */
		.c-sec-main .marker {
			background: linear-gradient(transparent 60%, #ffd700 60%);
			padding-bottom: 2px;
			display: inline;
		}


		@media (max-width:767px) {
			body:not(.home) .common-sec-title-area {
				margin-bottom:1em!important;
			}

		}	


	/**　リード	----------------------------- */
		.lead {
			font-size:1.1rem;
			text-align:center;
			margin-bottom:0;
		}

		@media (max-width:767px) {
			.lead {
				font-size:4vw;
				text-align:left;
			}

		}



	/**　セクションタイトル	----------------------------- */
		.design-section-title {
			position: relative;
			padding: .5em 0 0;
			text-align: center;
			color: #fff;
			/* ▼▼ 追記：強制的に全幅にする魔法 ▼▼ */
			width: 100vw;
			/* 画面幅いっぱい */
			margin-left: calc(50% - 50vw);
			/* 左に突き抜ける */
			margin-right: calc(50% - 50vw);
			/* 右に突き抜ける */
			box-sizing: border-box;
			/* 余白を含めて計算 */
			max-width: 100vw;
			/* ▲▲ ここまで ▲▲ */

			background-color: #2b8bbb;
		}

		/* 下向きの矢印 */
		.design-section-title::after {
			content: '';
			position: absolute;
			bottom: -20px;
			left: 50%;
			transform: translateX(-50%);
			border-top: 30px solid #2b8bbb;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
			z-index: 10;

		}

		/* --- 上部の白いバッジ --- */
		.dst-badge {
			display: inline-block;
			background: #fff;
			color: #2b8bbb;
			font-weight: bold;
			padding: 4px 25px;
			border-radius: 50px;
			position: relative;
			margin-bottom: 10px;
			box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
			border: 2px solid #2b8bbb;
			top: -2rem;
		}

		/* --- メインの見出し文字 --- */
		.dst-main {
			font-size: clamp(24px, 5vw, 32px) !important;
			font-weight: 900;
			line-height: 1.3;
			margin: 0 !important;
			color: #fff;
			text-align: center;
			top: -1em;
		}

		/* 強調したい文字（黄色） */
		.dst-main span {
			color: #ffff00;
		}

		/* スマホ表示の調整（767px以下） */
		@media (max-width: 767px) {
			.dst-badge {
				font-size:3.33vw;
				border-width: 1px;
				top:-2em;
				margin-bottom:0;
			}
			.dst-main {
				font-size:5.33vw!important;
			}

			.design-section-title {
				padding:.5em 0 0;
			}

			.design-section-title::after {
				bottom:-10px;

			}	
		}	







/* -------------------------------------------------------------------------
 * トップページ
 * ------------------------------------------------------------------------- */


/* こんなお悩みありませんか？ -----------------------------------*/

	/* 2. 見出し周り */
	.worry-header {
		text-align: center;
		margin-bottom: 40px;
	}

	.worry-sub {
		font-weight: bold;
		margin-bottom: 0 !important;
		position: relative;
		display: inline-block;
		font-size: 1.2rem;
	}

	/* スラッシュ装飾（＼ ／） */
	.worry-sub::before {
		content: '＼';
		margin-right: 10px;
		color: #2ea7c6;
	}

	.worry-sub::after {
		content: '／';
		margin-left: 10px;
		color: #2ea7c6;
	}

	.worry-title {
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
		margin-top: 0;
	}

	/* 黄色のマーカー線 */
	.worry-title .marker {
		background: linear-gradient(transparent 60%, #fff700 60%);
		padding: 0 5px;
	}

	.worry-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		/* アイテム間の隙間 */
		max-width: 1000px;
		margin: 0 auto;
	}

	.worry-item {
		width: 48%;
		/* PCでは2列 */
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.worry-icon img {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: 2px solid #eee;
		background: #fff;
		object-fit: cover;
	}

	/* 5. 吹き出しデザイン（ここが肝！） */
	.worry-bubble {
		position: relative;
		background: #2cb4c3;
		/* 参考サイト風の水色 */
		color: #fff;
		padding: 15px 20px;
		border-radius: 10px;
		font-weight: 500;
		flex: 1;
		/* 横幅いっぱいに広げる */
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	}

	/* 吹き出しの「しっぽ（三角）」 */
	.worry-bubble::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -10px;
		/* 左側に突き出す */
		margin-top: -10px;
		border-top: 10px solid transparent;
		border-right: 10px solid #2cb4c3;
		/* 本体の色に合わせる */
		border-bottom: 10px solid transparent;
	}

	/* 黄色文字 */
	.worry-bubble .yellow {
		color: #ffff00;
		font-weight: 900;
	}


	.worry-item.reverse {
		flex-direction: row-reverse;
	}

	/* 2. 吹き出しの「しっぽ」を右側に移動 */
	.worry-item.reverse .worry-bubble::before {
		left: auto;
		/* 左の設定を解除 */
		right: -10px;
		/* 右側に配置 */

		/* 三角形の向きを逆にする */
		border-right: none;
		border-left: 10px solid #2cb4c3;
	}


	/* スマホ表示の調整（767px以下） */
	@media (max-width: 767px) {

		.worry-section {
			padding-bottom:1.5em;
		}

		.worry-icon img {
			width: 100px;
			height: 100px;
		}

		.worry-item {
			width: 100%;
			/* スマホでは1列 */
			margin-bottom: 10px;
		}


		.worry-bubble {
			line-height:1.4;
			font-weight:400;
			padding:1em;
		}
	}









/* -------------------------------------------------------------------------
 * 費用のご案内
 * ------------------------------------------------------------------------- */






/* //////////////////////////////////////////////////
 よくある質問
//////////////////////////////////////////////////*/
/* --- 1. 上部ナビゲーションボタン --- */
.faq-anchor-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 60px;
	justify-content: space-between;
}

.faq-nav-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #2b8bbb;
	color: #fff;
	font-weight: bold;
	padding: 15px 20px;
	border-radius: 5px;
	text-decoration: none;
	width: 100%;
	/* スマホは全幅 */
	max-width: 48%;
	/* PCは2列 or 4列 */
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	transition: opacity 0.3s;
	position:relative;
}

.faq-nav-btn:after {
	content: "";
	display: block;
	position: absolute;
	top: 45%;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	transform: translateY(-25%) rotate(135deg);
	border: 2px solid #fff;
	border-left: 0;
	border-bottom: 0;
	right: 10px;
}



@media (min-width: 768px) {
	.faq-nav-btn {
		max-width: 23%;
		/* PCで4列並びにする場合 */
	}
}

.faq-nav-btn:hover {
	opacity: 0.8;
	transform: translateY(1px);
	box-shadow: none;
}

.faq-nav-arrow {
	font-size: 1.2em;
	margin-left: 10px;
}

/* --- 2. カテゴリ見出し --- */
.faq-section {
	margin-bottom: 60px;
	/* ページ内リンクで飛んだ時にヘッダーに隠れないようにする調整 */
	scroll-margin-top: 120px;
}

.faq-cat-title {
	font-size: 24px;
	border-bottom: 2px solid #333;
	padding-bottom: 10px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
}

.faq-title-icon {
	font-size: 0.8em;
	margin-left: 10px;
}

/* --- 3. Q&Aリスト --- */
.faq-item {
	background: #fff;
	border: 1px solid #eee;
	/* 薄い枠線 */
	border-radius: 8px;
	padding: 30px;
	margin-bottom: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* 質問 (Q) */
.faq-q {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	border-bottom: 1px dashed #ddd;
	/* QとAの間の点線 */
	padding-bottom: 20px;
}

/* 回答 (A) */
.faq-a {
	display: flex;
	align-items: flex-start;
}

/* Q/A マークアイコン共通 */
.faq-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1.2rem;
	margin-right: 20px;
	flex-shrink: 0;
	/* 縮まないように */
}

.q-mark {
	background-color: #1e73be24;
	/* 薄い黄色背景 */
	color: #1e73be
	/* 文字色 */
}

.a-mark {
	background-color: #1e73be;
	/* 濃いオレンジ背景 */
	color: #fff;
}

/* テキスト部分 */
.faq-question-text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	padding-top: 5px;
	/* アイコンと高さを合わせる */
}

.faq-answer-text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	padding-top: 5px;
	font-weight: 400;
}

.faq-item:first-of-type {
	margin-top:3em;
}


@media (max-width:767px) {
	.faq-nav-btn:hover {
		opacity:1!important;
	}	

	.faq-anchor-nav {
		gap:2%;
		margin-bottom:30px;
	}

	.faq-nav-btn {
		font-size:3.66vw;
		padding:1em;
		margin-bottom:1em;
		line-height:1;
	}

	.faq-question-text {
		font-size:4vw!important;
	}

	.faq-answer-text {
		font-size:4vw!important;
		padding-top:0;
	}



	.faq-item {
		padding:.75em;
	}

	.faq-mark {
		width:33px;
		height:33px;
		margin-right:.5em;
	}

}




/* //////////////////////////////////////////////////
 プライバシーポリシー
//////////////////////////////////////////////////*/
body.privacy-policy .site-body h3 {
	font-size: 1rem;
	font-weight: 600;
	color: #000;
	margin-bottom: .5em;
	margin-top: 2.5em !important;
}

body.privacy-policy .site-body p,
body.privacy-policy .site-body li {
	font-weight: 400;
}

body.privacy-policy .site-body ol {
	margin-top: 0 !important;
	padding-top: 0;
}

body.privacy-policy .site-body li {
	font-size: .95rem;
	margin: 0 0 .25em 0;
}



/* //////////////////////////////////////////////////
 フッター
//////////////////////////////////////////////////*/
.site-footer {
	background-color: #eaf6f9 !important;
	border-top: none !important;
}


.site-footer-content {
	padding: 2.5vw 0;
}

.site-footer-content .footerLogo {
	margin-bottom:0;
}

.site-footer-content .footerLogo img {
	max-height:80px;

}

/* コピーライトバー */
.site-footer-copyright {
	background-color: #2ea7c6 !important;
	/* 濃い青 */
	color: #fff !important;
	width: 100%;
	max-width: 100% !important;
}

.site-footer-copyright p {
	color: #fff !important;
	margin: 0 !important;
}

/* --- メニューの2列化＆アイコン装飾 --- */
.site-footer ul.menu,
.site-footer ul.wp-block-navigation-link__container {
	list-style: none;
	padding: 0;
	margin: 0;

	/* ▼ここで自動2列化▼ */
	columns: 2;
	column-gap: 40px;
}

/* 各メニュー項目の調整 */
.site-footer ul.menu li,
.site-footer li.wp-block-navigation-link {
	break-inside: avoid;
	/* 変な位置での改行防止 */
}

/* リンク文字とアイコン */
.site-footer ul.menu li a,
.site-footer li.wp-block-navigation-link a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	background: none !important;
	font-size: .9rem;
	font-weight: 400;
	border: 0;
	padding: .25em 0;
	display: inline-block;
}

/* 青い「＞」アイコン生成 */
.site-footer ul.menu li a::before,
.site-footer li.wp-block-navigation-link a::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-top: 2px solid #2ea7c6;
	border-right: 2px solid #2ea7c6;
	transform: rotate(45deg);
	margin-right: 10px;
	margin-bottom: 2px;
}


.site-footer .spnav-btn {
	display: none !important;
}




/* スマホでは1列に戻す */
@media (max-width: 767px) {

	.footerContent a {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}



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

	.site-footer-content {
		padding: 2.5em 0 60px 0;
	}

	.site-footer .widget_media_image {
		display: block;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 240px;
	}


	.site-footer ul.menu,
	.site-footer ul.wp-block-navigation-link__container {
		columns: 1;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;

	}


	.site-footer ul.menu li a,
	.site-footer li.wp-block-navigation-link a {
		display: block;
		border-bottom: solid 1px #ddd;
		padding: .5em 0 .5em .25em;
	}

	.site-footer ul.menu li:first-child a {
		border-top: solid 1px #ddd;
	}
}


/* --- フッターメニューを右寄せにする設定（PCのみ） --- */
@media (min-width: 768px) {

	/* メニューが入っている箱（ウィジェット）の設定 */
	.site-footer .widget_nav_menu {
		width: fit-content;
		/* 箱の大きさを中身ぴったりに縮める */
		margin-left: auto;
		/* 左側の余白を目一杯とる（＝右寄せになる） */
		margin-right: 0;
	}
}














/* --- プログレス風スマホ固定フッターのデザイン --- */

/* 1. 全体の枠組み */
.custom-fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	font-family: sans-serif;

	transform: translateY(110%);
	transition: transform 0.2s ease; /* ふわっと出すための動き */
	
	box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
}

/* ▼ 表示用のクラス（JSでこれをつける） */
.custom-fixed-footer.is-visible {
	transform: translateY(0); /* 元の位置（画面内）に戻す */
}


/* 2. 上段：青いメッセージバー */
.cff-message {
	background-color: #1e73be;
	color: #fff;
	text-align: center;
	font-size: 3.33vw;
	padding: 4px 0;
	font-weight: 500;
}

/* 3. 下段：ボディエリア（横並び） */
.cff-body {
	display: flex;
	height: 65px;
	background-color: #fff;
}

/* --- 左側：電話エリア (幅広) --- */
.cff-tel {
	flex: 1.6;
	/* ボタンより少し広く取る */
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #333;
	padding: 0 5px;
	border-right: 1px solid #eee;
}

/* 赤い丸バッジ */
.cff-tel-badge {
	background-color: #cc0000;
	color: #fff;
	font-size: 10px;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;	
	line-height: 1.1;
	margin-right: 5px;
	flex-shrink: 0;
	font-weight: bold;
}

/* 電話番号まわり */
.cff-tel-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cff-tel-number {
	font-size: 5.44vw;
	font-weight: bold;
	color: #333;
	line-height: 1;
	width:100%;
	border-bottom: solid 1px;
	padding-bottom:5px;
}

.cff-tel-sub {
	font-size: 2.66vw;
	color: #666;
	margin-top: 2px;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.cff-tel-sub .hour {
	font-size:2.66vw;
}

.cff-tel-sub .free {
	border:#f0c1be 2px solid;
	color:#ce3328;
	padding:2px 4px;
	font-size:.95em;
	line-height:1;

}



/* --- 右側：ボタンエリア (メール・LINE) --- */
.cff-buttons {
	flex: 1.5;
	display: flex;
}

.cff-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #fff !important;
	font-size: 2.66vw;
	line-height: 1.1;
	text-align: center;
	font-weight:bold;
}

/* 色設定 */
.cff-mail {
	background-color: #EC6A17;
	/* メール：オレンジ */
}

.cff-line {
	background-color: #06c755;
	/* LINE：緑 */
}

.cff-icon {

}

.cff-icon img {
	height:16px;
	width:auto;
	margin-bottom:5px;
}


/* --- Lightning標準の固定ナビを消す --- */
.mobile-fixed-nav {
	display: none !important;
}

/* --- PCでは表示しない --- */
@media (min-width: 768px) {
	.custom-fixed-footer {
		display: none;
	}
}










/* 1. 巨大な「遺品整理」文字（青グラデーション＋白フチ） */
.mv-main-title {
	font-weight: 900;
	font-size: clamp(30px, 7vw, 60px) !important;
	/* スマホ〜PCで巨大化 */
	line-height: 1.2;
	margin-bottom: 10px !important;
	margin-top: 0 !important;

	/* 青のグラデーション（魔法の記述） */
	background: linear-gradient(to bottom, #0055aa, #003377);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	/* 白いフチ取り */
	filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow(2px -2px 0 #fff);
}

.mv-main-title span {
	display: block;
	font-size: clamp(40px, 10vw, 70px) !important;
	/* スマホ〜PCで巨大化 */
}


/* 2. 巨大な価格「15,000円〜」（赤文字＋白フチ） */
.mv-price-text {
	font-weight: 900;
	color: #cc0000;
	/* 赤色 */
	font-size: clamp(30px, 8vw, 60px) !important;
	line-height: 1;
	margin-bottom: 20px !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* スマホで折り返し */
	gap: 10px;

	/* 白いフチ取り */
	text-shadow:
		2px 2px 0 #fff, -2px -2px 0 #fff,
		-2px 2px 0 #fff, 2px -2px 0 #fff;
}

/* 価格の「(税込) 円〜」を少し小さく */
.mv-price-text span {
	font-size: 0.6em;
}

/* 3. 赤い帯のテキスト */
.mv-red-band {
	background-color: #e34045;
	color: #fff;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 4px;
	margin-bottom: 15px;
	display: block;
	text-align: center;

}

.mv-red-band span {
	font-size: clamp(20px, 8vw, 30px) !important;
}




.mainVisual {}

#mainVisual .vk_outer_container {
	max-width:1200px!important;
	width:100%;
	margin:0;
	padding:0;
}


@media (max-width: 767px) {
	#mainVisual .wp-block-vk-blocks-grid-column-item {
		padding:0 10px;
	}
}




/* -------------------------------------------------------------------------
 * お問い合わせ
 * ------------------------------------------------------------------------- */
body.post-name-contact .site-body {
	background-image:url(https://festa1.xsrv.jp/wp-content/uploads/2025/12/achieveBkg-scaled.webp);
	background-color:rgba(255,255,255,.8);
	background-blend-mode:color;
	background-position:top;
}


 /* --- コンテナ全体 --- */
.form {
    max-width: 920px; /* PCでの程よい幅 */
    margin: 0 auto;
    color: #333;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 30px 30px 0 30px;
    margin-bottom:2em;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    margin-top:4em;
}

.form p {
	margin-bottom:0;
}


/* --- 行のデザイン --- */
.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-bottom: 1px solid #e0e0e0; /* 薄い区切り線 */
    padding: 24px 0;
}
.form-row.no-border {
    border-bottom: none;
}

/* --- 左側：ラベルエリア --- */
.label-col {
    width: 30%; /* PCでの幅 */
    display: flex;
    align-items: center;
    padding-right: 20px;
    box-sizing: border-box;
}

.label-col p {
	display:flex;
	align-items:center;
}

/* テキストエリアなどは上寄せにする */
.label-col.align-top {
    align-items: flex-start;
    padding-top: 10px;
}

.label-text {
    font-weight: bold;
    margin-left: 10px;
}

/* --- バッジ（必須・任意） --- */
.badge-req {
    background-color: #2b8bbb; /* 画像から抽出した青緑色 */
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    line-height:1;
}

.badge-any {
    background-color: #9caeb7; /* 画像に近い落ち着いたグレー */
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    line-height:1;
}

/* --- 右側：入力エリア --- */
.input-col {
    width: 70%; /* PCでの幅 */
}

/* 入力フィールドの装飾 */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .9rem;
    box-sizing: border-box;
    background: #fff;
	line-height:1.6
}
.form input:focus,
.form textarea:focus {
    outline: 2px solid #3eb3a6; /* バッジと同じ色でフォーカス */
    border-color: #3eb3a6;
}

/* ラジオボタンの横並び */
.wpcf7-list-item {
    display: inline-block;
    margin: 0 15px 5px 0!important;
}


/* エラーメッセージ（Contact Form 7標準）の色調整 */
.wpcf7-not-valid-tip {
    color: #e60012;
    font-size: .9rem!important;
    line-height:1!important;
}

/* --- 送信ボタン --- */
.submit-area {
    text-align: center;
}
.form input[type="submit"] {
    background-color: #000; /* 真っ黒 */
    color: #fff;
    padding:1.25em 0;
    border: none;
    border-radius: 50px; /* 角丸のピル型 */
    cursor: pointer;
    transition: opacity 0.3s;
    line-height:1;
    display:block;
    margin: 0 auto;
    min-width:300px;
}
.form input[type="submit"]:hover {
	background:#2b8bbb;

}

.form textarea {
	margin-bottom:0!important;
}

/* エラーメッセージ枠の調整 */
.wpcf7-response-output {
    margin: 20px 0 30px !important; /* 上20px、下30pxの余白 */
    text-align: center; /* テキストを中央寄せ */
    font-weight: bold;
    border-radius: 4px;
}


/* --- メッセージ枠の共通設定 --- */
/* クラス名を .form に変えたとのことなので合わせました */
.form .wpcf7-response-output {
    border: none !important;
    border-radius: 6px;
    padding: 1em 1em !important;
    margin: 20px 0 30px !important;
    text-align: center;
    font-weight: bold;
}

/* --- エラー時（赤） --- */
/* 親のformタグが「invalid（無効）」になった時、中身を赤くする */
form.invalid .form .wpcf7-response-output,
form.failed .form .wpcf7-response-output {
    background-color: #ffe0e0 !important; /* ピンク背景 */
    color: #cc0000 !important;           /* 赤文字 */
}

/* --- 送信成功時（緑） --- */
/* 親のformタグが「sent（送信済）」になった時、中身を緑にする */
form.sent .form .wpcf7-response-output {
    background-color: #28a745 !important; /* 緑背景 */
    color: #ffffff !important;            /* 白文字 */
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    .form {
        padding: 20px 15px; /* 余白を少し狭く */
        border: 1px solid #e5e5e5;
        border-radius: 12px;
    }
    .form-row {
        display: block; /* 縦並びにする */
        padding: 15px 0;
    }
    .label-col {
        width: 100%;
        margin-bottom: 10px;
    }
    .input-col {
        width: 100%;
    }
    .form input[type="submit"] {
        width: 100%; /* スマホではボタンを幅一杯に */
    }

    .wwpcf7-form-control.wpcf7-radio {
    	display:flex;
    	flex:wrap;

    }

    .wpcf7-list-item {
    	width:40%;
    }


}