@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	font-size: clamp(14px, 4vw, 18px);
	font-family: メイリオ, Arial, sans-serif;
	overflow-x: hidden;
	background: #f1f1f1;
	line-height: 1.7;
	margin-bottom: 5em;
}
h2 {
	font-size: clamp(22px, 4vw, 40px);
	font-weight: bold;
	text-align: center;
	border-bottom: 3px solid #080d55;
	color: #080d55;
	padding: 0.5em 1em;
	width: 95%;
	margin: 0 auto;
}
h2 span {
	font-size: clamp(16px, 3vw, 20px);
	font-weight: normal;
}
h3 {
	font-size: clamp(18px, 5vw, 24px);
	font-weight: bold;
	color: #080d55;
	padding: 1em 0;
}
.wrap {
	max-width: 780px;
	overflow-x: hidden;
	position: relative;
	margin: 0 auto;
	background: #fff;
}
.u_head {
	position: relative;
	margin-top: 120px;
	width: 100%; /* または任意の幅 */
	aspect-ratio: 3/1; /* 画像の比率を指定 */
	background-size: cover; /* 背景画像をdivにフィット */
	background-position: center;
	background-repeat: no-repeat;
	font-size: clamp(15px, 4.5vw, 34px);
	font-family: "Serif", "Noto Serif", "游明朝", "明朝体", sans-serif; /* 明朝体フォントの指定 */
	font-weight: 700;
	padding: 1em
}
.service .u_head {
	background-image: url('/img/bg_service.webp');
}
.company .u_head {
	background-image: url('/img/bg_company.webp');
}
.faq .u_head {
	background-image: url('/img/bg_faq.webp');
}
.contact .u_head {
	background-image: url('/img/bg_contact.webp');
}
.box {
	padding: 1em;
}
#logo {
	max-height: 50px;
	width: auto;
	margin-bottom: 10px;
}
.dc {
	font-size: 60%;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #080d55;
	color: #fff;
	height: 120px;
	position: fixed;
	width: 100%;
	max-width: 780px;
	box-sizing: border-box;
	z-index: 10;
}
.logo {
	font-weight: bold;
}
.menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
}
.menu-icon {
	width: 50px;
	height: 60px;
}
.nav-menu {
	position: fixed;
	top: 120px;
	right: -80%;
	width: 60%;
	max-width: 450px;
	height: 100vh;
	background: #f9f9f9;
	display: flex;
	flex-direction: column;
	padding: 20px;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
	transition: right 0.3s ease;
	z-index: 1000;
}
.nav-menu a {
	margin: 15px 0;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dashed #080d55;
	color: #080d55;
	display: block;
}
.nav-menu.active {
	right: 0;
}
.hero {
	position: relative;
	margin-top: 120px;
	width: 100%; /* または任意の幅 */
	aspect-ratio: 3/4; /* 画像の比率を指定 */
	background-image: url('/img/header_img.webp');
	background-size: cover; /* 背景画像をdivにフィット */
	background-position: center;
	background-repeat: no-repeat;
}
.top_txt {
	font-size: clamp(15px, 5vw, 40px);
	font-family: "Serif", "Noto Serif", "游明朝", "明朝体", sans-serif; /* 明朝体フォントの指定 */
	font-weight: 700;
	padding: clamp(45px, 10vw, 80px);
	text-shadow:
		-2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 2px 2px 4px white;
}
.top_txt span {
	font-size: clamp(16px, 5.5vw, 50px);
	color: #080d55;
}
.sub_txt {
	font-size: clamp(15px, 4vw, 30px);
	color: #fff;
	position: absolute;
	bottom: 40px;
	left: 20px;
}
.next {
	fill: #fff;
	width: clamp(16px, 2vw, 20px);
	margin-right: 2vw;
}
.tel_area {
	text-align: center;
	padding: 2vw;
}
.flex2 {
	display: flex;
	justify-content: space-around;
}
.flow_link_area > div {
	flex: 1;
	position: relative;
}
.flow_link_area > div a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
#cta {
	background: #fff;
}
.bnr {
	padding: clamp(15px, 2vw, 30px);
}
.bnr li {
	margin-bottom: 1em;
}
.bnr li a {
	display: flex;
	font-size: clamp(16px, 3vw, 20px);
	color: #fff;
	font-weight: bold;
	align-items: center;
	justify-content: space-between;
	padding: 1em 4vw;
}
.bnr li a.tel {
	background: linear-gradient(167deg, rgba(27, 36, 105, 1) 0%, rgba(27, 36, 105, 1) 50%, rgba(0, 11, 87, 1) 50%, rgba(0, 11, 87, 1) 100%);
}
.bnr li a.line {
	background: linear-gradient(167deg, rgba(0, 184, 0, 1) 0%, rgba(0, 184, 0, 1) 50%, rgba(42, 152, 63, 1) 50%, rgba(42, 152, 63, 1) 100%);
}
.bnr li a.web {
	background: linear-gradient(167deg, rgba(105, 101, 27, 1) 0%, rgba(105, 101, 27, 1) 50%, rgba(87, 84, 0, 1) 50%, rgba(87, 84, 0, 1) 100%);
}
.tel_link span img {
	width: clamp(15px, 8vw, 30px);
	height: auto;
}
img {
	max-width: 100%;
}
.point, .step {
	padding: clamp(10px, 2vw, 20px);
}
.step1 {
	background: url(../img/step01.webp);
}
.step2 {
	background: url(../img/step02.webp);
}
.step3 {
	background: url(../img/step03.webp);
}
.step li {
	font-size: clamp(15px, 3vw, 20px);
	width: 100%; /* または任意の幅 */
	aspect-ratio: 3/1; /* 画像の比率を指定 */
	background-size: contain; /* 背景画像をdivにフィット */
	background-position: center;
	background-repeat: no-repeat;
	padding-top: clamp(60px, 8vw, 100px);
	padding-left: 1em;
}
#fix_bt_area {
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
	position: fixed;
	width: 100%;
	max-width: 780px;
	bottom: -100px; /* 最初は非表示 */
}
#fix_bt_area img {
	width: 30px;
	height: auto;
}
#fix_bt_area .line {
	background: linear-gradient(167deg, rgba(0, 184, 0, 1) 0%, rgba(0, 184, 0, 1) 50%, rgba(42, 152, 63, 1) 50%, rgba(42, 152, 63, 1) 100%);
	width: 49%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	gap: 0;
	line-height: 0.5;
}
#fix_bt_area .tel {
	background: linear-gradient(167deg, rgba(27, 36, 105, 1) 0%, rgba(27, 36, 105, 1) 50%, rgba(0, 11, 87, 1) 50%, rgba(0, 11, 87, 1) 100%);
	width: 49%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	gap: 0;
	line-height: 0.5;
}
#fix_bt_area.active {
	bottom: 0;
	opacity: 1;
}
#fix_bt_area.offdisp {
	opacity: 0;
	bottom: -100px;
}
.bnr_area {
	display: flex;
	justify-content: space-between;
	padding: 1em;
}
.bnr_area a {
	width: 49%;
}
.bnr_area img {
	width: 100%;
}
.form {
	font-size: 90%;
	padding: 0.5em;
}
.form table {
	font-size: 90%;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	border: 2px solid #000;
}
.form th {
	background: #fff;
	padding: 1em;
	font-weight: bold;
	display: block;
	width: 100%;
	border-bottom: 1px solid #aaa;
}
.form th span {
	color: #f00;
}
.form td {
	background: #eee;
	padding: 1em;
	display: block;
	width: 100%;
	font-size: 80%;
	border-bottom: 1px solid #aaa;
}
.form input[type="text"], .form textarea {
	border: 1px solid #999;
	padding: 0.5em;
	background: #fff;
}
.form input[type="submit"] {
	border: 5px solid #0f0f53;
	background: #0f0f53;
	border-radius: 60px;
	display: block;
	color: #fff;
	font-weight: 900;
	padding: 0.5em 2em;
	width: 100%;
	margin: 1em auto;
	text-align: center;
	font-size: clamp(24px, 5vw, 40px);
	max-width: 500px;
}
.form textarea {
	width: 100%;
}
.company table {
	display: block;
	margin: 0 auto;
}
.company th {
	background: #eee;
	padding: 1em;
	font-weight: bold;
	width: 30%;
	border: 1px solid #ccc;
}
.company td {
	padding: 1em;
	width: 69%;
	border: 1px solid #ccc;
}
.faq dl {
	margin-bottom: 1em;
}
.faq dt {
	font-weight: bold;
}
.faq dt:before {
	content: "Q.";
	font-size: 110%;
}
.faq dd {
	position: relative;
	padding-left: 1em;
}
.faq dd:before {
	content: "A.";
	font-weight: bold;
	margin-left: -1em;
}
#fmenu {
	background: #eee;
	padding: 1em;
}
#fmenu ul {
	background: #fff;
	padding: 1em;
	border: 1px solid #ccc;
}
#fmenu ul li {
	border: 1px solid #ccc;
	padding: 0.8em;
}
#fmenu h3 {
	border-left: 10px solid #0f0f53;
	padding: 0.5em 1em;
}
.faq dt {
	cursor: pointer;
	position: relative;
	padding: 10px;
	border: 1px solid #ddd;
	margin-top: 10px;
	background: #f1f1f1;
}
.faq dt .toggle-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 18px;
}
.faq dd {
	display: none;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-top: none;
	boder: 1px solid #BCC1F9;
	padding-left: 2em;
}
.faq.open dt .toggle-icon {
	content: "−";
}