@charset "utf-8";
/* --- elements --- */
body {
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
}
main {
	font-family: "Helvetica Neue", "Arial", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
	font-size: 16px;
	color: #333;
	font-weight: normal;
	font-feature-settings: "palt"1;
	position: relative;
}
main * {
	font-size: inherit;
}
main :where(h2,h3,h4,h5) {
	font-family: inherit;
}
section {
	position: relative;
	overflow: hidden;
}
h2 {
	text-align: center;
	font-size: clamp(1.5em, 1vw + 1.25em, 2em);
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 2em;
}
h2 span {
	display: block;
	text-align: center;
	margin: 0 auto;
	width: fit-content;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
h3 span, h4 span {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
p {
	margin: 0 auto;
}
p + p {
	margin: 8px auto 0;
}
/* ---  elements --- */
/* --- parts --- */
main div.container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
main div.container > div {
	width: 95%;
	margin: 0 auto;
}
main div.container p {
	line-height: 1.8;
}
h2 span.smalltxt {
	color: #1070cf;
	font-size: clamp(0.67em, 0.56vw + 0.55em, 0.83em);
	margin-top: 16px;
}
h2 span.red {
	display: inline-block;
	margin: 0 auto;
}
a.bcp_btn {
	color: #414656;
	border: 3px solid #414656;
	border-radius: 3px;
	padding: 16px 20px 14px 32px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 30px;
	margin: 0 auto;
	max-width: 400px;
	width: 100%;
	min-width: 240px;
	background-color: #fff;
	text-align: left;
	font-size: clamp(1.00em, 0.28vw + 0.92em, 1.13em);
	word-break: keep-all;
	overflow-wrap: anywhere;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	transition: .3s;
}
@media (hover: hover) and (pointer: fine) {
	a.bcp_btn:hover {
		text-decoration: none;
		color: #8d909a;
		border-color: #8d909a;
	}
}
a[href$=".pdf"]:after {
	background: inherit;
}
a[href$=".pdf"].bcp_btn:after, a.bcp_btn:after {
	content: "";
	mask: url("../img/bcp/arrow-r.svg") no-repeat center / contain;
	-webkit-mask: url("../img/bcp/arrow-r.svg") no-repeat center / contain;
	background-color: #414656;
	aspect-ratio: 7 / 12;
	max-width: 14px;
	max-height: 24px;
	min-width: 10px;
	min-height: 17px;
	width: 100%;
	height: 100%;
	display: inline-block;
	transition: .3s;
	position: relative;
	right: 0;
	margin: 0;
}
@media (hover: hover) and (pointer: fine) {
	a.bcp_btn:hover:after {
		right: -5px;
		background-color: #8d909a;
	}
}
/* ---  parts --- */
/* --- fv --- */
#fv {
	min-height: 640px;
	max-height: 800px;
	height: 100%;
	background-image: url("../img/bcp/topimg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
#fv #fv_txt {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	position: relative;
	height: 100%;
	max-height: 800px;
	min-height: 640px;
}
#fv #fv_txt #txt_block {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 2em;
	bottom: 15%;
}
#fv #fv_txt p {
	width: fit-content;
	position: relative;
	margin-bottom: 0;
	letter-spacing: 0.1em;
	margin: 0;
}
#fv #fv_txt p:before {
	content: "";
	width: 100%;
	background-color: #036ad1;
	mix-blend-mode: multiply;
	height: 100%;
	display: block;
	position: absolute;
}
#fv #fv_txt p span {
	font-size: clamp(1.38em, 3.25vw + 0.56em, 3.00em);
	font-weight: bold;
	color: #fff;
	position: relative;
	line-height: 1em;
	display: inline-block;
	margin: 8px 32px 6px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
/* --- fv --- */
/* --- about --- */
#about {
	padding: 96px 0 120px;
	background-image: url("../img/bcp/about_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#about .container > div {
	width: 100%;
	max-width: 1200px;
	background-color: #fff;
	padding: clamp(1.50em, 3.33vw + 0.50em, 3.00em) clamp(1.00em, 2.22vw + 0.33em, 2.00em) clamp(2.50em, 1.11vw + 2.17em, 3.00em);
	display: flex;
	align-items: center;
	gap: 48px; 
}
#about .container > div div.about_img {
	max-width: 400px;
	min-width: 320px;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
}
#about .container > div p.about_txt {
	text-indent: 1em;
}
/* --- about --- */
/* --- merit --- */
#merit {
	padding: 96px 0 120px;
	background-image: url("../img/bcp/merit_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}
#merit div.container ul {
	width: 100%;
	margin: 0 auto 0;
	padding: 0;
}
#merit div.container ul li {
	display: flex;
	align-items: center;
	gap: 0 16px;
	margin: 0;
	padding: 16px clamp(0.50rem, 2.86vw + -0.14rem, 2.00rem) 13px;
	border-bottom: 1px solid #008a8f;
	font-size: clamp(1.00em, 0.48vw + 0.89em, 1.25em);
}
#merit div.container ul li:last-of-type {
	border-bottom: none;
}
#merit div.container ul li:before {
	content: "";
	width: clamp(0.90em, 0.24vw + 0.86em, 1.00em);
	height: clamp(0.90em, 0.24vw + 0.86em, 1.00em);
	aspect-ratio: 1 / 1;
	border-radius: 9999px;
	display: inline-block;
	font-size: 1em;
	background-color: #008a8f;
}
/* --- merit --- */
/* --- checklist --- */
#checklist {
	padding: 96px 0 clamp(9.00em, 11.11vw + 3.67em, 12.00em);
	background-color: #d2efff;
}
#checklist h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 30px;
	line-height: 1.6;
}
#checklist h2:before, #checklist h2:after {
	content: "";
	width: 40px;
	height: 5px;
	display: inline-block;
	background-color: #333;
}
#checklist h2:before {
	transform: rotate(45deg);
}
#checklist h2:after {
	transform: rotate(-45deg);
}
#checklist h2 span {
	margin: 0;
}
#checklist h2 span.red:before {
	content: "『";
	font-size: 1em;
	display: inline;
}
#checklist h2 span.red:after {
	content: "』";
	font-size: 1em;
	display: inline;
}
#checklist div.container > #check_block {
	width: 100%;
	background: #fff;
	padding: clamp(2.00em, 3.70vw + 0.22em, 3.00em) clamp(1.50em, 5.56vw + -1.17em, 3.00em);
	box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.05);
}
#checklist #check_block > div {
	padding: 40px 0;
	border-bottom: 1px solid #a6abbd;
}

#checklist #check_block > div:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
}
#checklist #check_block h3 {
	border-bottom: none;
}
#checklist #check_block h3 span:not(.checknum) {
	color: #1070cf;
	font-size: clamp(1.25em, 0.93vw + 0.80em, 1.50em);
	padding: 12px 16px 14px 22px;
	display: block;
	position: relative;
}
#checklist #check_block h3 span:not(.checknum):before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 6px;
	background-color: #1070cf;
	height: 100%;
	top: 0;
	left: 0;
}
#checklist #check_block h3:after {
	content: none;
}
#checklist #check_block h3 span.checknum {
	display: flex;
	width: fit-content;
	gap: 0 8px;
	align-items: flex-end;
	background-color: #1070cf;
	color: #fff;
	font-weight: bold;
	font-size: clamp(1.13em, 1.39vw + 0.46em, 1.50em);
	margin-bottom: 16px;
	padding: 6px 12px 7px;
	line-height: 1;
}
#checklist #check_block h3 span.checknum:before {
	content: "CHECK";
	color: #fff;
	font-weight: bold;
	font-size: 0.75em;
}
#checklist .flexblock {
	display: flex;
	gap: 40px;
	width: 95%;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}
#checklist #check_block > div:first-of-type .flexblock {
	justify-content: flex-start;
}
#checklist .flexblock > div {
	border: 1px solid #414656;
	padding: 0 0 40px;
	max-width: 490px;
	width: calc(50% - 20px);
}
#checklist .flexblock > div:has(+ div):after {
	content: "";
	width: 1px;
	height: calc(100% - 80px);
	margin: auto 0;
	background-color: #cccccc;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#checklist .flexblock > div h4 {
	background-color: #414656;
	color: #fff;
	text-align: center;
	padding: 0;
	border-bottom: 3px solid #414656;
	position: relative;
	margin-bottom: 16px;
}
#checklist .flexblock > div h4:after {
	content: "";
	width: 100%;
	height: 5px;
	background-color: #fff;
	display: block;
	text-align: center;
	position: absolute;
	bottom: 0;
}
#checklist .flexblock > div h4 span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 40px;
	font-size: clamp(1.00em, 0.83vw + 0.75em, 1.38em);
	line-height: 1.5;
	height: 101px;
}
#checklist .flexblock .checkimg {
	text-align: center;
	margin: 0 auto 16px;
	padding: 0 40px;
}
#checklist .flexblock .checkimg img {
	max-width: 400px;
	min-width: 240px;
	aspect-ratio: 200 / 133;
	width: 100%;
	height: auto;
	display: inline-block;
}
#checklist .flexblock .checkimg + div {
	text-align: center;
	padding: 0 40px;
}
/* --- checklist --- */
/* --- plan --- */
#plan {
	padding: clamp(8.00em, 7.66vw + 3.26em, 9.00em) 0 96px;
	background-color: #fff;
}
#plan div.container {
	max-width: 704px;
	width: 90%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#plan:before, #plan:after {
	content: "";
	display: inline-block;
	position: absolute;
	aspect-ratio: 215 / 134;
	max-width: 860px;
	min-width: 430px;
	height: auto;
	width: 45%;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
}
#plan:before {
	background-image: url("../img/bcp/plan_triangle-l.png");
	transform: translateX(-32.5%);
	left: 0;
}
#plan:after {
	background-image: url("../img/bcp/plan_triangle-r.png");
	transform: translateX(32.5%);
	right: 0;
}
#plan .bcp_btn {
	max-width: 420px;
}
#plan div:has(a.bcp_btn) {
	text-align: center;
}
#plan div:has(> a.form_btn) {
	margin-bottom: 72px;
}
#plan div:has(> a.form_btn) p {
	margin: 8px auto 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
#plan a.form_btn {
	background-color: #f39800;
	color: #fff;
	border-color: #f39800;
	font-size: clamp(1.25em, 1.11vw + 0.92em, 1.75em);
	max-width: 480px;
}
#plan a.bcp_btn.form_btn:after {
	background-color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	#plan a.form_btn:hover {
		background-color: #f6b240;
		color: #fff;
		border-color: #f6b240;
	}
	#plan a.bcp_btn.form_btn:hover:after {
		right: -5px;
		background-color: #fff;
	}
}
/* --- plan --- */
/* --- contact --- */
#contact {
	padding: 136px 0 136px;
	background-image: url("../img/bcp/contact_bg.jpg");
	background-repeat: no-repeat;
	background-size: auto 100%;
    background-position: top center;
}
#contact h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	gap: 0 24px;
	margin-bottom: 0;
}
#contact h3:after {
    line-height: 0;
    overflow: inherit;
    position: inherit;
    bottom: 0;
    width: auto;
    border: none;
}
#contact h3:before,
#contact h3:after {
	content:"";
	width: 40px;
	height: 4px;
	background-color: #333;
	display: inline-block;
}
#contact h3 span {
	font-size: clamp(1.13em, 0.83vw + 0.88em, 1.50em);
	text-align: center;
	display: inline-block;
	width: auto;
}
#contact .container p {
	text-align: center;
}
#contact .container > p:last-of-type {
	margin-bottom: clamp(2.50em, 1.94vw + 1.92em, 3.38em);
}
#contact .container div {
	background: #fff;
	border: 2px solid #a6abbd;
	padding: 48px 32px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
#contact .container div p {
	display: block;
	text-align: center;
	width: fit-content;
	margin: 0 auto;
}
#contact .container > p {
	font-size: clamp(1.00em, 0.56vw + 0.83em, 1.25em);
	letter-spacing: 0.05em;
}
#contact .container div p:not(.tel) {
	border-bottom: 3px solid #1070cf;
	margin-bottom: 24px;
	padding: 32px 8px 16px;
}
#contact .container div p:not(.tel) strong {
	font-size: clamp(1.13em, 0.28vw + 1.04em, 1.25em);
}
#contact .container div p:not(.tel):has(strong) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

#contact .container div p br + br {
	display: none;
}

#contact p.tel span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 16px;
	color: #1070cf;
	font-weight: bold;
	font-size: 1.5em;
	white-space: nowrap;
}
#contact p.tel span:before {
	content: "";
	display: inline-block;
	max-width: 32px;
	max-height: 36px;
	aspect-ratio: 8 / 9;
	min-width: 20px;
	min-height: 22.5px;
	width: 100%;
	height: auto;
	background-image: url(../img/bcp/tel_icon.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
/* --- contact --- */
/* --- other --- */
.red {
	color: #d9213f;
}
/* --- other --- */
@media(max-width: 991.98px) {
	/* --- checklist ---*/
	#checklist .flexblock > div {
		width: 46%;
	}
	#checklist .flexblock > div h4 span, #checklist .flexblock .checkimg, #checklist .flexblock .checkimg + div {
		padding: 0 20px;
	}
	/* --- checklist ---*/
	/* --- plan --- */
	#plan:before, #plan:after {
		opacity: 0.25;
	}
	/* --- plan --- */
}
@media(max-width:768px) {
	/* --- parts --- */
	main div.container {
		width: 90%;
	}
	main div.container > div {
		margin: 0 auto;
	}
	.bcp_btn {
		padding: 12px 16px 10px 20px;
		gap: 20px;
	}
	.bcp_btn small {
		display: none;
	}
	/* --- fv ---*/
	#fv {
		background-size: auto 100%;
	}
	#fv #fv_txt #txt_block {
		bottom: 8%;
	}
	#fv #fv_txt p span {
		margin: 8px 20px 6px;
		line-height: 1.4em;
	}
	/* --- about --- */
	#about .container > div {
		width: 90%;
		max-width: 1020px;
		justify-content: center;
		flex-wrap: wrap;
		gap: 32px;
	}
		#about .container > div div.about_img {
		max-width: 450px;
		min-width: 90%;
	}
	/* --- about --- */
	/* --- merit --- */
	#merit div.container ul li {
		padding: 16px 16px 15px;
	}
	/* --- merit --- */
	/* --- checklist --- */
	#checklist h2 {
		gap: 0 24px;
	}
	#checklist h2:before, #checklist h2:after {
		width: 48px;
		height: 4px;
	}
	#checklist h2:before {
		transform: rotate(60deg);
	}
	#checklist h2:after {
		transform: rotate(-60deg);
	}
	#checklist #check_block > div:first-of-type .flexblock {
		justify-content: center;
	}
	#checklist .flexblock > div {
		width: 100%;
	}
	#checklist .flexblock > div:has(+ div):after {
		content: none;
	}
	#checklist .flexblock .checkimg img {
		min-width: inherit;
	}
	/* --- checklist --- */
	/* --- plan --- */
	#plan {
		padding-bottom: 120px;
	}
	#plan:before, #plan:after {
		width: 30%;
	}
	#plan:before {
		top: 0;
		transform: translateX(0);
	}
	#plan:after {
		transform: translateX(0);
	}
	/* --- plan --- */
	/* --- contact --- */
	#contact {
		padding: clamp(6.00em, 9.26vw + 1.56em, 8.50em) 0 clamp(6.50em, 7.41vw + 2.94em, 8.50em);
	}
	main #contact div.container {
		width: 90%;
	}
	main #contact div.container p {
		width: 93%;
	}
	#contact .container > p {
		text-align: left;
	}

	#contact .container div p:not(.tel) {
	margin-bottom: 16px;
	padding: 24px 8px 16px;
	}
	#contact .container div p:not(.tel) strong {
		line-height: 1.4;
		display: block;
		margin-bottom: 8px;
	}
	#contact .container div p:not(.tel) strong + br {
		display: none;
	}
	#contact .container div p br + br {
		display: inline-block;
	}
	/* --- contact --- */
}
@media(max-width: 480px) {
	/* --- parts --- */
	a.bcp_btn {
		padding: 16px 16px 14px 16px;
		gap: 0 16px;
	}
	/* --- parts --- */
	/* --- fv --- */
	#fv #fv_txt #txt_block {
		gap: 10px 0;
	}
	/* --- fv --- */
	/* --- checklist --- */
	#checklist h2 {
		gap: 16px;
	}
	#checklist h2 span.red:before, #checklist h2 span.red:after {
		content: none;
	}
	/* --- checklist --- */
}
@media(max-width: 400px) {
	/* --- checklist --- */
	#checklist h2 {
		font-size: 20px;
	}
	#checklist #check_block > div {
		padding: 40px 0;
	}
	#checklist #check_block > div:first-of-type {
		padding-top: 20px;
	}
	#checklist .flexblock {
		width: 100%;
	}
	#checklist .flexblock > div {
		padding-bottom: 20px;
	}
	#checklist .flexblock > div h4 span {
		height: 91px;
	}

}