@charset "utf-8";

/* CSS Document */
/*
=====lp用 ======================================
*/
:root {
	--color-main: #df0000;
	/*--color-sub: #FA9600;*/
	--color-yellow: #ffe400;
	--color-black: #111;
	--color-red: #FF2200;
	--color-palemain: #E4FFE0;
	--color-palesub: #fef7f0;
	--fontsize-normal: 16px;
	--fontsize-medium: 24px;
	--fontsize-big: 36px;
	--fontsize-huge: 40px;
	--gutter-wide: clamp(80px, 8vw, 100px);
	--gutter: 60px;
	--gutter-narrow: 30px;
}

@media only screen and (max-width: 767px) {
	:root {
		--gutter-wide: 8%;
		--gutter: 5%;
		--gutter-narrow: 3%;
	}
}

body {
	font-family: "Noto Sans JP", sans-serif !important;
	color: var(--color-black);
	font-weight: 500;
}

img {
	max-width: 100%;
	height: auto;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none !important;
}

/* common */
.inline_block {
	display: inline-block;
}

.common__mainTtl {
	font-size: var(--fontsize-huge);
	text-align: center;
	font-weight: bold;
	margin-bottom: var(--gutter-narrow);
}

.marker_yellow {
	background: linear-gradient(transparent 60%, var(--color-yellow) 30%);
}

.largeFont {
	font-size: 38px;
}
.mediumFont {
	font-size: 34px;
}

.dot-text {
	position: relative;
}


@media only screen and (min-width: 767px) {
	.pc_hidden {
		display: none !important;
	}
}

@media only screen and (max-width: 767px) {
	.sp_hidden {
		display: none !important;
	}
}

/* contactTel */
.contactTel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 15px;
}

.contactTel__numBox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-bottom: 5px;
}

.contactTel__num {
	font-size: 2.6rem;
	font-weight: 900;
	line-height: 1;
	flex-shrink: 0;
}
.contactTel__img {
	width: 2.2em;
	height: 2.2em;
	position: relative;
	top: 2px;
}

.contactTel__time {
	line-height: 1.4;
	width: 100%;
	font-size: 0.98rem;
	padding: 2px;
}

/*****************************
header
*****************************/
.header {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	width: 100%;
	position: relative;
}
.header.fixed {
	height:auto;
}
.header__inner {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	width: min(96%, 1200px);
	margin: 0 auto;
	align-items: center;
}

.header__contact .contactTel {
	font-size: 11px;
}

.header img {
	max-height: 48px;
	width: auto;
}

.header.fixed+.fvBox {
	padding-top: 99px;
}

/*****************************
fvBox
*****************************/
.fvBox {
	margin-bottom: var(--gutter);
	background-image: linear-gradient(90deg, #8b0202, #ed1717);
}

.fvBox__contentBox {
	text-align: center;
	padding: 50px 0;
	position: relative;
}
.fvBox__ttl {
	margin-bottom: var(--gutter-narrow);
}
.fvBox__contentBox::after {
	content: '';
	width: 241px;
	height: 509px;
	aspect-ratio: 241 / 500;
	background: url(/share/img/page/forrea/fvBox_person.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 10px;
	right: -50px;
	z-index: 99;
}

.formbtn {
	background: var(--color-yellow);
	border: 2px solid var(--color-black);
	font-size: clamp(18px, 4vw, 24px);
	font-weight: bold;
	padding: 5px;
	width: 40%;
	position: relative;
	margin: var(--gutter-narrow) 0;
}
.formbtn span {
	font-size: clamp(22px, 4vw, 34px);
}
.formbtn::after{
	content:"";
	width: 12px;
	height: 12px;
	display:block;
	border-bottom:3px solid #111;
	border-right:3px solid #111;
	position:absolute;
	top:50%;
	right:6%;
	transform: rotate(45deg) translateY(-50%);
}

.fvBox__list {
	width: 80%;
	margin: 0 auto 20px;
}
.fvBox__item {
	background: #fff;
	padding: 15px;
	margin-bottom: 10px;
	font-size: clamp(20px, 4vw, 34px);
	font-weight: 900;
}

.fvBox__message {
	color: #fff;
	font-size: clamp(18px, 4vw, 26px);
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1.2;
}
.fvBox__message .font_yellow {
	color: var(--color-yellow);
	font-size: clamp(20px, 4vw, 34px);
}
.fvBox__message .small {
	font-size: clamp(16px, 4vw, 20px);
}

/*****************************
introBox
*****************************/
.introBox {
	margin-bottom: var(--gutter);
	text-align: center;
}
.introBox__ttl {
	font-size: clamp(22px, 4vw, 34px);
	font-weight: 900;
	text-align: center;
	margin: 0 auto 20px;
	border-bottom: 5px double #DF0000;
  display: inline-block;
}
.introBox__txt {
	font-size: clamp(18px, 4vw, 22px);
}

/*****************************
formBox
*****************************/
.formBox {
	font-size: var(--fontsize-normal);
}

.formInfoBox {
	margin: var(--gutter-wide) 0 var(--gutter-narrow);
}

.formInfoBox__mainTtlBox {
 	text-align: center;
 	background: var(--color-main);
 	font-size: 2.4em;
 	margin-bottom: 3%;
 	overflow: hidden;
 }

 .formInfoBox__ttl {
 	display: inline-block;
 	background: #fff;
 	border: 1px solid #fff;
 	color: var(--color-main);
 	padding: 0 3em;
 	line-height: 160%;
 	font-weight: bold;
 	position: relative;
 	max-width: 80%;
 }

 .formInfoBox__ttl::before,
 .formInfoBox__ttl::after {
 	content: "";
 	display: inline-block;
 	width: 0;
 	height: 0;
 	border-style: solid;
 	border-width: 0 0 4em 0.5em;
 	border-color: transparent transparent #fff transparent;
 	position: absolute;
 }

 .formInfoBox__ttl::before {
 	top: -1px;
 	left: -0.5em;
 }

 .formInfoBox__ttl::after {
 	bottom: -1px;
 	right: -0.5em;
 	transform: scale(-1, -1);
 }
/* form */
.formBox form {
	width: min(96%, 1200px);
	margin: 0 auto;
}

/* formタイトル */
.formBox .formBox__ttl {
	font-size: var(--fontsize-huge);
	margin-bottom: var(--gutter-narrow);
	text-align: center;
	font-weight: bold;
}
.formBox .page_title02 {
	font-weight: bold;
	font-size: var(--fontsize-medium);
	margin: 0 0 20px;
}

.formBox .form_step {
	color: #fff;
	background-color: var(--color-main);
	padding: 2px 8px 3px 8px;
	margin-right: 10px;
}

/* formスタイル */
.formBox .form_box02 {
	margin-top: clamp(30px, 4vw, 60px);
}

.formBox .arbitrary,
.formBox .required {
	background-size: 38px 19px;
	padding: 20px 14px 20px 60px;
}

.formBox .entrytbl {
	border-top: 1px solid #D6D6D6!important;
}

.formBox .entrytbl tr {
	border-bottom: 1px solid #D6D6D6!important;
}

.formBox .entrytbl th {
	border: none;
	width: 300px;
	font-weight: bold;
}

.formBox .entrytbl .brdr_td {
	padding: 20px;
	border: none;
}

.formBox .entrytbl .listTd .wpcf7-list-item {
	margin-bottom: 0!important;
}

.formBox .form_caution01 {
	font-size: 14px;
	display: inline-block;
}

.formBox .submit_warning {
	font-size: 16px;
	margin: 20px 0;
}

/* ボタン */
.formBox .submitBox {
	text-align: center;
}

.formBox .submitBox_inner {
	display: inline-block;
	width: clamp(260px, 4vw, 300px);
	height: auto;
	aspect-ratio: 300 / 80;
	position: relative;
}

.formBox .submitBox_inner::after {
	content: "";
	position: absolute;
	top: 40%;
	right: 40px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

.formBox .btn_submit_form_lp {
	width: 100%;
	height: 100%;
	border-radius: 100px;
	background: var(--color-main);
	color: #fff;
	border: none;
	font-weight: bold;
	font-size: clamp(16px, 2vw, 18px);
	transition: 0.3s;
}

.formBox .btn_submit_form_lp:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.formBox .btn_submit_form_lp:not(:disabled):hover {
	opacity: 0.7;
}

.formBox .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 10px;
	align-items: center;
}

.td_flex {
	display: flex;
	align-items: center;
}

/*****************************
footer
*****************************/
.footer__inner {
	padding: 0 0 30px;
	display: flex;
	justify-content: space-between;
	width: min(90%, 1200px);
	margin: 0 auto;
	align-items: center;
	gap: 20px;
}

.foot__copyrightBox {
	background: var(--color-main);
	color: #fff;
	padding: 10px 0;
}

.formBox__ttl {
	padding: 0px 0 24px;
	border-bottom: 3px solid var(--color-main);
}

.footer img {
	max-height: 68px;
	width: auto;
}
footer .foot__wrapper {
	border-top: none;
	margin-top: 0;
	padding: 3% 0 0;
}
.footer__inner .contactTel__time {
	font-size: 1rem;
}

/*****************************
完了ページ
*****************************/
.lp_thanksBox {
	padding: 40px 0;
}

.lp_thanksBox .page_title01 {
	color: var(--color-black);
	text-align: center;
	font-weight: bold;
	font-size: var(--fontsize-huge);
}

.lp_thanksBox__inner {
	width: min(96%, 1200px);
	margin: 0 auto;
}

.lp_thanksBox .page_title02 {
	text-align: center;
	font-size: var(--fontsize-medium);
	font-weight: bold;
	padding: 10px;
	border-bottom: 4px solid var(--color-main);
	margin: 10px 0;
}

.lp_thanksBox .bg_thanks01 {
	font-size: var(--fontsize-normal);
	text-align: center;
	background: #EEE;
	line-height: 1.6;
	padding: 30px;
}

.lp_thanksBox__btn {
	display: block;
	width: clamp(260px, 4vw, 300px);
	height: auto;
	aspect-ratio: 300 / 80;
	position: relative;
	margin: 30px auto;
}

.lp_thanksBox__btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 40px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(-135deg);
}

.lp_thanksBox__btn a {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 100px;
	background: var(--color-black);
	color: #fff;
	border: none;
	font-weight: bold;
	font-size: clamp(16px, 2vw, 18px);
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 0 15px;
	box-sizing: border-box;
}

.lp_thanksBox__btn a:hover {
	opacity: 0.7;
}

/* スマホ時 */
@media screen and (max-width: 767px) {
	header {
		height:auto;
	}
	.header__inner {
		display:block;
	}
	header h1 {
		background: #fff;
		text-align: left;
		line-height: 1;
	}
	input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea {
		font-size: 16px;
	}

	.fvBox__contentBox {
		padding: 20px 10px 30px;
	}
	.fvBox__txt {
		width: 67%;
		margin: auto;
	}
	.fvBox__contentBox::after {
		width: 16%;
		height: auto;
		right: 5px;
		top: 55px;
	}

	.formbtn {
		width: 90%;
	}

	.fvBox__list {
		width: 95%;
	}
	.fvBox__item {
		padding: 10px;
	}

/*****************************
formBox
*****************************/
.formBox {
	font-size: var(--fontsize-normal);
}

.formInfoBox {
	margin: var(--gutter-wide) 0;
}

.formInfoBox__mainTtlBox {
	text-align: center;
	background: var(--color-main);
	font-size: 1.5em;
	margin-bottom: 20px;
}

.formInfoBox__ttl {
	padding: 0 1.6em;
}

.formInfoBox__ttl::before,
.formInfoBox__ttl::after {
	border-width: 0 0 4em 0.5em;
	border-color: transparent transparent #fff transparent;
}

.formBox form input[type="file"] {
	width: 90%!important;
}

.formInfoBox__note {
	text-align: left;
}

.formBox .arbitrary,
.formBox .required {
	background-size: 34px 17px;
	padding: 0;
}

.formBox .entrytbl th {
	background-color: #EDEDED;
	font-weight: bold;
	border-radius: 0px;
	color: #222;
	display: list-item;
	border: none;
	list-style-type: none;
	margin: 0px;
	padding: 10px 8px;
	width: 100%;
}

.formBox .entrytbl .brdr_td {
	display: list-item;
	border: none;
	list-style-type: none;
	margin: 0px;
	padding: 10px 8px;
}

.entrytbl td, .estimate_tbl td, #editBox table td {
	margin: 20px 10px;
	padding: 0;
}

.lp_thanksBox .page_title01{
	font-size: clamp(22px, 8.6vw, 48px);
	line-height: 1.2;
}
}

@media screen and (max-width: 900px)  {
	.footer__inner img {
		max-height: 48px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.fvBox__contentBox {
		width: 95%;
	}
	.fvBox__contentBox .fvBox__txt img {
		width: 60%;
	}
	.fvBox__contentBox::after {
		width: 18%;
		height:auto;
		right: 0;
		top: 130px;
	}
	.fvBox__list {
		width: 90%;
	}
	.formbtn {
		width: 70%;
	}

	/*****************************
	formInfoBox
	*****************************/
	.formInfoBox__mainTtlBox {
		font-size: clamp(40px, 4vw, 50px);
	}

	.formInfoBox__ttl {
		padding: 0 2em;
	}

	.footer__logo p {
		font-size:0.9rem;
	}
	.footer__inner .contactTel__time {
		font-size: 0.8rem;
	}
}