@charset "UTF-8";

/*日本地図*/
#jp_map {
	max-height: 640px;
	position: relative;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 150px;
}

#jp_map::before {
	content: '';
	display: block;
	padding: 80% 0 0;
}

#jp_map ul,
#jp_map li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#jp_map a {
	display: block;
	font-weight: normal;
	text-decoration: none;
	color: var(--font-color);
	text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
	box-sizing: border-box;
	border: solid #fff 2px;
	float: none;
	font-size: 14px;
	line-height: 1;
	padding: 6px 0;
	text-align: center;
	position: absolute;
	margin: 0;
	text-decoration: none;
	cursor: pointer;
}

#jp_map a:hover {
	opacity: .85;
	text-decoration: none;
}

#jp_map a span {
	display: block;
	margin: 0 auto;
	padding: 0;
	line-height: 1.1em;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

#jp_map .hokkaido a,
#jp_map .tohoku a {
	background-color: #759ef4;
}

#jp_map .kanto a {
	background-color: #7ecfea;
}

#jp_map .chubu a {
	background-color: #7cdc92
}

#jp_map .kansai a {
	background-color: #ffe966;
}

#jp_map .chugoku a {
	background-color: #ffcc66;
}

#jp_map .shikoku a {
	background-color: #ffbb9c;
}

#jp_map .okinawa a,
#jp_map .kyushu a {
	background-color: #ffbdbd;
}

#jp_map li a {
	height: 12%;
	width: 7%;
}

#jp_map li.hokkaido a {
	top: 0;
	left: 79%;
	height: 20%;
	width: 21%;
}

#jp_map li.hokkaido a span {
	right: 7.5%;
}

#jp_map li.aomori a {
	top: 21%;
	left: 79%;
	height: 8%;
	width: 21%;
}

#jp_map li.iwate a {
	top: 29%;
	left: 89.5%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.akita a {
	top: 29%;
	left: 79%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.miyagi a {
	top: 37%;
	left: 89.5%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.yamagata a {
	top: 37%;
	left: 79%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.fukushima a {
	top: 45%;
	left: 93%;
	height: 18%;
}

#jp_map li.ibaraki a {
	top: 63%;
	left: 93%;
	height: 18%;
}

#jp_map li.tochigi a {
	top: 57%;
	left: 86%;
}

#jp_map li.gunma a {
	top: 57%;
	left: 79%;
}

#jp_map li.saitama a {
	top: 69%;
	left: 86%;
}

#jp_map li.chiba a {
	top: 81%;
	left: 93%;
	height: 17%;
}

#jp_map li.tokyo a {
	top: 81%;
	left: 86%;
}

#jp_map li.kanagawa a {
	top: 81%;
	left: 79%;
}

#jp_map li.nigata a {
	top: 45%;
	left: 79%;
	width: 14%;
}

#jp_map li.toyama a {
	top: 45%;
	left: 72%;
}

#jp_map li.ishikawa a {
	top: 45%;
	left: 65%;
	height: 17%;
}

#jp_map li.fukui a {
	top: 50%;
	left: 58%;
}

#jp_map li.yamanashi a {
	top: 69%;
	left: 79%;
}

#jp_map li.nagano a {
	top: 57%;
	left: 72%;
	height: 24%;
}

#jp_map li.gifu a {
	top: 62%;
	left: 65%;
	height: 19%;
}

#jp_map li.shizuoka a {
	top: 81%;
	left: 72%;
}

#jp_map li.aichi a {
	top: 81%;
	left: 65%;
}

#jp_map li.mie a {
	top: 86%;
	left: 58%;
}

#jp_map li.shiga a {
	top: 62%;
	left: 58%;
}

#jp_map li.kyoto a {
	top: 56%;
	left: 51%;
	height: 18%;
}

#jp_map li.osaka a {
	top: 74%;
	left: 51%;
}

#jp_map li.hyogo a {
	top: 53%;
	left: 44%;
	height: 24%;
}

#jp_map li.nara a {
	top: 74%;
	left: 58%;
}

#jp_map li.wakayama a {
	top: 86%;
	left: 51%;
}

#jp_map li.tottori a {
	top: 53%;
	left: 37%;
}

#jp_map li.shimane a {
	top: 53%;
	left: 30%;
}

#jp_map li.okayama a {
	top: 65%;
	left: 37%;
}

#jp_map li.hiroshima a {
	top: 65%;
	left: 30%;
}

#jp_map li.yamaguchi a {
	top: 59%;
	left: 23%;
}

#jp_map li.tokushima a {
	top: 89.5%;
	left: 36.5%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.kagawa a {
	top: 81.5%;
	left: 36.5%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.ehime a {
	top: 81.5%;
	left: 26%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.kochi a {
	top: 89.5%;
	left: 26%;
	height: 8%;
	width: 10.5%;
}

#jp_map li.fukuoka a {
	top: 55%;
	left: 15%;
}

#jp_map li.saga a {
	top: 55%;
	left: 8%;
}

#jp_map li.nagasaki a {
	top: 55%;
	left: 1%;
	height: 16%;
}

#jp_map li.kumamoto a {
	top: 67%;
	left: 8%;
}

#jp_map li.oita a {
	top: 67%;
	left: 15%;
}

#jp_map li.miyazaki a {
	top: 79%;
	left: 15%;
}

#jp_map li.kagoshima a {
	top: 79%;
	left: 8%;
}

#jp_map li.okinawa a {
	top: 88%;
	left: 0;
}

#jp_map_select {
	display: none;
	margin-bottom: 65px;
}

#mb_text {
	display: none;
}

@media screen and (max-width:991px) {
	#jp_map {
		display: none;
	}

	#pc_text {
		display: none;
	}

	#jp_map_select {
		display: block;
	}

	#mb_text {
		display: block;
	}
}

#pref_title {
	font-size: 21px;
}

.city_title {
	font-size: 18px;
}

#dealer_area {
	display: none;
	overflow-y: auto;
	height: 445px;
}

#header_area {
	display: none;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.pos-relative {
	position: relative;
}

.text-bold {
	font-weight: bold !important;
}

.pro-service-area {
	background-color: #f2f2f2;
}

.pro-service-item {
	justify-self: center;
	width: 350px;
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

.pro-service-text {
	position: relative;
	margin-top: -1.5rem;
}

@media (max-width: 768px) {
	.pros-top-image {
		width: 400px;
		margin-top: 1rem;
	}
}

@media (min-width: 769px) {
	.pros-top-image {
		width: 40%;
		text-align: center;
		margin-top: 1rem;
	}
}

.pros-heading {
	color: #09f;
}

.pros-p {
	margin-bottom: 1rem;
}

@media screen and (max-width:991px) {
	.trouble-icon {
		bottom: -6vw;
	}
}

@media screen and (min-width:992px) {
	.trouble-icon {
		bottom: -4vw;
	}
}

@media (max-width: 768px) {
	.trouble-icon {
		position: static;
		width: 33%;
		margin-left: 36%;
	}
}

/* icon */
.new_icon {
	position: relative;
}

.new_icon:before {
	position: absolute;
	color: red;
	font-weight: bold;
	content: "NEW";
	top: 0.5rem;
	left: 0.75rem;
}

.mini-icon {
	display: inline-block;
	padding: 0.25rem 0.4rem;
	margin-left: 0.5rem;
	font-size: 75%;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	color: #fff;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25rem;
	background: #dc3545;
}

.new_icon_20deg_l {
	position: relative;
}

.new_icon_20deg_l:before {
	position: absolute;
	font-size: 0.9rem;
	color: #fff;
	background-color: #c2664d;
	padding: 0 0.5rem;
	content: "NEW!";
	top: 0.1rem;
	left: -0.7rem;
	rotate: -20deg;
	box-shadow: 2px 3px 3px #555;
}

.new_icon_20deg_r::after {
	display: inline-block;
	font-size: 0.9rem;
	color: #fff;
	background-color: #c2664d;
	content: "NEW!";
	rotate: -20deg;
	padding: 0 0.5rem;
	position: relative;
	top: -0.8rem;
	left: 0.4rem;
	box-shadow: 2px 3px 3px #555;
}

.pros-note {
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	margin-bottom: 1rem;
	background: #fff8dc !important;
}

.pros_servicemenu_h4 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	border-bottom: none;
}

.pros_servicemenu_box {
	margin: 2.5rem !important;
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
	padding-left: 3rem !important;
	padding-right: 3rem !important;
	border-radius: 20px;
}

@media screen and (max-width: 576px) {
	.pros_servicemenu_box {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

.pros_pdf {
	margin: 0;
}

.pros-app-products li {
	margin: 4px;
	width: calc(50% - 8px);
	padding: 0.5rem 1rem;
	margin-bottom: 0.5rem;
	background: #2caaff;
	color: #fff;
	text-align: center;
	border-radius: 7px;
}

/*@media screen and (min-width: 612px) {
	.pros-app-products li {
		min-width: 49%;
	}
}*/

.glay-box {
	background: #f2f2f2;
}

.lead-area {
	width: 75%;
	margin: 0 auto;
}

h1.pros {
	font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	font-weight: bold;
	text-align: center;
	color: #09f;
	margin: 3.5rem 0;
	margin-top: 1rem;
	font-size: 32px;
}

.text-xlg {
	font-size: 1.4rem;
	font-weight: 600;
}

.text-benefit {
	color: #09f !important;
}

.list-basic li:before {
	content: "";
	width: 1rem;
	height: 1rem;
	display: inline-block;
	margin-right: 0.3rem;
	background-color: #999;
	border-radius: 50%;
}

.pros-down_arrow {
	box-sizing: content-box;
}

.w-10 {
	width: 10% !important;
	margin: 0 auto;
}

.w-80 {
	padding: 0;
}

.list-benefit li:before {
	content: "";
	width: 1rem;
	height: 1rem;
	display: inline-block;
	margin-right: 0.3rem;
	background-color: #09f;
	border-radius: 50%;
}

li .circle {
	position: relative;
	padding: 1rem;
	margin-bottom: 1rem;
}

li .circle:before {
	content: "";
	display: block;
	padding-top: 100%;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 10px rgba(63, 182, 182, 0.4);
}

li .circle p {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 1.25;
	color: #3fb6ba;
	width: 70%;
	margin-bottom: 0 !important;
}

@media screen and (max-width: 576px) {
	.container-lg .contents-feature li .circle:before {
		box-shadow: none;
		border-radius: 0;
		padding-top: 5%;
	}
}

/* ステップバー */
.nav-stepbar {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	width: 95%;
}

.nav-stepbar li {
	position: relative;
	height: 10rem;
	width: 33.333333%;
}

.nav-stepbar li a {
	display: block;
	height: 100%;
	text-align: center;
	font-size: 1.15rem;
	line-height: 1.5;
	padding-top: 20%;
	padding-left: 20%;
}

.nav-stepbar li a:hover {
	text-decoration: none !important;
}

/* ステップバーの先端三角 */
.nav-stepbar li:after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	border-width: 5em 2.5em;
	border-style: solid;
	z-index: 10;
}

/* ステップバーの先端三角 一番目のみ */
.nav-stepbar li:first-of-type:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-width: 5em 2.5em;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	z-index: 10;
}

/* ステップバーのレスポンシブサイズ調整 */
@media screen and (max-width: 768px) {
	.nav-stepbar li a {
		text-align: right;
		margin-right: 0.5rem;
	}

	.nav-stepbar li:after {
		right: -3rem;
		border-width: 5rem 1.5rem;
	}
}

@media screen and (max-width: 576px) {
	.nav-stepbar li a {
		font-size: 1rem;
	}
}

/* ステップバーのパーツ */
.nav-stepbar .step1,
#Step1 {
	background: #f0f0f0;
}

.nav-stepbar .step1:after {
	border-color: transparent transparent transparent #f0f0f0;
}

.nav-stepbar .step2,
#Step2 {
	background: #bae4f7;
}

.nav-stepbar .step2:after {
	border-color: transparent transparent transparent #bae4f7;
}

.nav-stepbar .step3,
#Step3 {
	background: #fffae1;
}

.nav-stepbar .step3:after {
	border-color: transparent transparent transparent #fffae1;
}

.step-cntnt {
	padding: 2rem;
	margin-top: 2rem;
}

@media screen and (min-width:577px) and (max-width: 992px) {
	.nav-stepbar li a {
		padding-top: 17%;
	}
}

@media screen and (min-width:576px) and (max-width: 767px) {
	.container-lg .contents-feature li .circle p {
		font-size: 2vw;
	}
}

@media screen and (min-width:767px) and (max-width: 992px) {
	.container-lg .contents-feature li .circle p {
		font-size: 1.8vw;
	}
}

@media screen and (min-width:992px) and (max-width: 1200px) {
	.container-lg .contents-feature li .circle p {
		font-size: 1.5vw;
	}
}

@media screen and (min-width:1200px) {
	.container-lg .contents-feature li .circle p {
		font-size: 1.8vw;
	}
}

.pl-3,
.px-3 {
	padding-left: 1rem !important;
}

@media screen and (max-width: 768px) {
	.xs_mb-4 {
		margin-bottom: 1.5rem !important;
	}
}

[class*="list-"] li {
	margin-bottom: 0.5rem;
	padding-left: 1.3rem;
	text-indent: -1.3rem;
}

.step:hover {
	cursor: pointer;
}

.box-shadow {
	box-shadow: 2px 2px 5px 1px #ccc;
}

.bg-light {
	background-color: #fff !important;
	padding: 0.5rem 0;
}

.w-70 {
	width: 70% !important;
	margin: 0 auto;
}

.w-100 {
	width: 100% !important;
}

#main img {
	width: 100%;
	height: auto;
}

.trouble-icon {
	position: absolute;
	/*bottom: -1vw;*/
	right: 0;
	width: 30%;
}

@media (max-width: 991px) {
	.trouble-icon {
		width: 45%;
	}
}

@media (max-width: 768px) {
	.trouble-icon {
		position: static;
		width: 33%;
		margin-left: 36%;
	}
}

@media (max-width: 991px) {
	.feat-gen-hypoid .trouble-icon {
		position: static;
		width: 100%;
		margin-left: 0;
	}
}

.detail-box dd {
	padding: 1.8rem;
	border: 2px solid #ccc;
	border-radius: 20px;
	margin-bottom: 1rem;
}

.text-sxlg-light {
	font-size: 1.5rem;
}

.text-bold {
	font-weight: bold !important;
}

.text-benefit {
	color: #09f !important;
}

.bg-gley {
	background: #E9E9E9;
	color: #666 !important;
}

.dtl-dummy-link {
	position: absolute;
	bottom: 0;
	right: 1rem;
	text-align: left;
	color: #1a6ba1;
	text-decoration: none;
	padding-left: 10px;
	margin-left: 5px;
	background: url(../img/sprt/a_link_right.gif) no-repeat left;
}

.text-lg {
	font-size: 1.2rem;
	font-weight: 300;
}

.p_font_s20 {
	font-size: 20px
}

.p_height_21 {
	height: 21px;
}

.p_height_42 {
	height: 42px;
}



























.card {
	--bs-card-border-color: none;
}



.top_button {
	height: 40%;
	width: 80%;
}

.pc-only {
	display: none;
}

@media (min-width: 1200px) {
	.pc-only {
		display: block;
	}
}

.okigaru {
	margin: auto 0;
	text-align: center;
}

.contact {
	padding: 5px 20px 5px 25px;
}

.contact::before {
	content: none;
}

.download {
	padding: 5px 20px 5px 25px;
}

.download::before {
	content: none;
}

.underline01_b {
	border-bottom: 4px solid #0099ff;
}

.pro-service {
	border-bottom: solid 10px #FFDA68;
}


.icon-box-2 {
	margin: 0 auto;
	width: 90%;
	max-width: 300px;
	min-height: 250px;
	padding: 0.8rem;
	margin-bottom: 1rem;
}

.full-width-bg {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 40px 0;
	background-color: #D7E8FD;
}

.arrow_down01 {
	background: #2caaff;
}

.analysis-note {
	padding: 0.8rem;
    margin: 0 auto;
    background: white;
    position: relative;
    border: solid 3px #bae4f7;
    border-radius: 8px;
}


@media (min-width: 992px) {
	.w-lg-20 {
		width: 20% !important;
	}
}


@media (min-width: 375px) {
	.steps {
		max-width: 40%;
	}

	.step,
	.step_current,
	.step_end {
		padding: 0px 25px;
		min-height: 40px;
	}

	.nav_label {
		font-size: 10px;
	}

	.nav_badge {
		min-width: 40px;
		min-height: 40px;
		border: 4px solid #00a8e8;
		font-size: 10px;
	}
}

@media (min-width: 576px) {
	.steps {
		max-width: 60%;
	}
}

@media (min-width: 768px) {
	.steps {
		max-width: 70%;
	}
}

@media (min-width: 992px) {
	.steps {
		max-width: 75%;
	}
}

@media (min-width: 1200px) {
	.steps {
		max-width: 88%;
	}
}

@media (min-width: 1400px) {
	.steps {
		max-width: 100%;
	}

	.step,
	.step_current,
	.step_end {
		min-height: 42px;
	}

	.nav_label {
		font-size: 12px;
	}

	.nav_badge {
		font-size: 15px;
	}
}