@charset "UTF-8";

/*
BPメモ

カンプ　width: 1600px　100%
BP-PC　width: 1300px   81.25%
BP-TB　width: 810px    50.625%
BP-SP　width: 640px　　40％
下限値　width: 360px

*/

/*=============================================================
不動産売却・共通
=============================================================*/

.baikyaku {
	section {
		.outer {
			margin-top: 80px;

			@media print, screen and (min-width: 641px)  and (max-width: 810px) {
				margin-top: 50px;
			}
			@media print, screen and (min-width: 360px)  and (max-width: 640px) {
				margin-top: 40px;
			}
		}

		.inner {
			width: 1200px;
			margin-left: auto;
			margin-right: auto;

			@media print, screen and (max-width: 1300px) {
				width: 90%;
			}
		}

		p, a, span, li, dt, dd,h2, h3, h4, figcaption {
			font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
			color: #222;
			line-height: 1;
		}

		.baseFontGothic {
			font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
		}

		.btn_wrap {
			margin: 45px auto 0;
			font-size: 25px;
			display: flex;
			justify-content: center;

			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				margin: 30px auto 0;
			}

			.btn {
				width: 20em;
				font-size: 20px;
				line-height: 2.8;
				text-align: center;

				@media print, screen and (min-width: 811px) and (max-width: 1300px) {
					font-size: 18px;
				}
				@media print, screen and (min-width: 360px) and (max-width: 640px) {
					width: 18em;
					font-size: 16px;
				}

				a {
					display: inline-block;
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					padding: 1em;
					border: 1px solid #222;
					position: relative;
					width: 100%;
					height: 100%;
					transition: .2s ease;

					&::after {
						content: "";
						position: absolute;
						width: 1em;
						height: 1em;
						background-image: url(../images/baikyaku/parts_arrow_right.png);
						aspect-ratio: 1 / 1;
						background-size: contain;
						background-repeat: no-repeat;
						right: 1em;
						transition: .2s ease;
					}
				}

				a:hover {
					&::after {
						right: .5em;

						@media print, screen and (max-width: 1300px) {
							right: 1em;
						}
					}
				}
			}
		}
	}
}

/*=============================================================
不動産売却・baikyaku_banner
=============================================================*/

section#baikyaku_banner {
	.outer {
		margin-top: 50px;

		@media print, screen and (max-width: 810px) {
			margin-top: 0;
		}
	}
}

/*=============================================================
不動産売却・achievements
=============================================================*/

section#achievements {
	.outer {
		box-sizing: border-box;
		padding: 50px 0;
		position: relative;
		height: 28.125vw;
		max-height: 450px;
		display: flex;
		align-items: center;

		@media print, screen and (max-width: 810px) {
			padding: 30px 0 60px;
			max-height: none;
			height: auto;
			min-height: 28.125vw;
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(../images/baikyaku/bg_achievements.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 20% center;
			top: 0;
			left: 0;
		}
	}

	.inner {
		position: relative;

		h2 {
			color: #fff;
			font-size: 32px;
			font-weight: 500;
			line-height: 1.4;

			br {
				display: none;
			}

			@media print, screen and (min-width: 811px) and (max-width: 1300px) {
				font-size: 28px;
			}
			@media print, screen and (min-width: 641px) and (max-width: 810px) {
				font-size: 22px;
			}
			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				font-size: clamp(1.125rem, 0.08rem + 4.64vw, 1.938rem);/*18-31px*/

				br {
					display: block;
				}
			}
		}

		.box_wrap {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			@media print, screen and (min-width: 811px) and (max-width: 1300px) {
				justify-content: flex-start;
			}
			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				flex-direction: column;
				align-items: center;
			}

			.box {
				width: 28.5%;
				display: flex;
				justify-content: center;

				@media print, screen and (min-width: 360px) and (max-width: 640px) {
					width: 90%;
					justify-content: flex-end;
				}

				.label_gold {
					content: "";
					position: relative;
					align-self: flex-start;
					width: 120px;
					aspect-ratio: 1/1;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					color: #775412;
					font-size: 21px;
					font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
					font-weight: 700;
					line-height: 1.4;
					top: 0;
					left: 0;
					z-index: 2;

					@media print, screen and (min-width: 811px) and (max-width: 1300px) {
						width: 12vw;
						font-size: clamp(1rem, 0.585rem + 0.82vw, 1.25rem); /*font-size:06-20px*/
					}
					@media print, screen and (min-width: 641px) and (max-width: 810px) {
						width: 8vw;
						font-size: clamp(0.625rem, 0.151rem + 1.18vw, 0.75rem); /*font-size:10-12px*/
					}
					@media print, screen and (min-width: 360px) and (max-width: 640px) {
						width: 22vw;
						font-size: clamp(0.625rem, 0.143rem + 2.14vw, 1rem); /*font-size:10-16px*/
					}

					&::before {
						content: "";
						position: absolute;
						width: 100%;
						height: 100%;
						background-image: url(../images/baikyaku/label_gold_bg.png);
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center center;
						z-index: -1;
						top: 2px;
						left: 2px;
					}
				}

				.num_wrap {
					align-self: flex-start;
					position: relative;
					font-size: 150px;
					width: 73%;
					margin-left: -8%;
					z-index: 2;
					padding-top: .1em;

					@media print, screen and (min-width: 811px) and (max-width: 1300px) {
						font-size: clamp(5.375rem, -0.222rem + 11.04vw, 8.75rem); /*font-size:86-140px*/
						width: calc(100% - 10vw);
						margin-left: -2vw;
					}
					@media print, screen and (min-width: 641px) and (max-width: 810px) {
						font-size: clamp(4.75rem, 0.009rem + 11.83vw, 6rem); /*font-size:76-96px*/
						width: calc(100% - 8vw);
						margin-left: -2vw;
						position: relative;
					}
					@media print, screen and (min-width: 360px) and (max-width: 640px) {
						font-size:clamp(4.875rem, -0.107rem + 22.14vw, 8.75rem);/*font-size:78-140px*/
						width: auto;
					}

					.num {
						font-size: 1em;
						color: #fff;
						font-weight: 800;
						letter-spacing: -.07em;
						text-shadow:
						2px 2px 0 #222, 
						-2px -2px 0 #222,
						-2px 2px 0 #222,
						2px -2px 0 #222,
						2px 0 0 #222,
						-2px  0 0 #222,
						0 2px 0 #222,
						0 -2px 0 #222;

						@media print, screen and (max-width: 810px) {
							text-shadow:
							1px 1px 0 #222, 
							-1px -1px 0 #222,
							-1px 1px 0 #222,
							1px -1px 0 #222,
							1px 0 0 #222,
							-1px  0 0 #222,
							0 1px 0 #222,
							0 -1px 0 #222;
						}

						@media print, screen and (min-width: 360px) and (max-width: 640px) {
							display: flex;
							justify-content: flex-end;
							align-items: flex-end;
							box-sizing: border-box;
							padding-right: 5vw;
						}

						span {
							font-size: .4em;
							text-shadow:
							2px 2px 0 #222, 
							-2px -2px 0 #222,
							-2px 2px 0 #222,
							2px -2px 0 #222,
							2px 0 0 #222,
							-2px  0 0 #222,
							0 2px 0 #222,
							0 -2px 0 #222;
							color: #fff;
							letter-spacing: 0;
							margin-left: .1em;

							@media print, screen and (max-width: 810px) {
								text-shadow:
								1px 1px 0 #222, 
								-1px -1px 0 #222,
								-1px 1px 0 #222,
								1px -1px 0 #222,
								1px 0 0 #222,
								-1px  0 0 #222,
								0 1px 0 #222,
								0 -1px 0 #222;
							}
						}
					}

					.annotation {
						font-size: 16px;
						color: #fff;
						font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
						box-sizing: border-box;
						padding-left: 1em;

						@media print, screen and (min-width: 811px) and (max-width: 1300px) {
							font-size: 10px;
						}
						@media print, screen and (min-width: 641px) and (max-width: 810px) {
							position: absolute;
							font-size: 10px;
							left: -4em;
						}
						@media print, screen and (min-width: 360px) and (max-width: 640px) {
							font-size: 14px;
							text-align: right;
							padding-right: 5vw;
							padding-left: 0;
							min-width: 12em;
						}
					}
				}
			}

			.box:nth-child(1) {
				@media print, screen and (min-width: 641px) and (max-width: 1300px) {
					margin-right: 2%;
				}

				@media print, screen and (min-width: 360px) and (max-width: 640px) {
					margin-right: 0;
				}
			}

			.box:nth-child(2) {
				width: 43%;

				@media print, screen and (min-width: 360px) and (max-width: 640px) {
					width: 90%;
				}
			}
		}
	}
}

/*=============================================================
不動産売却・advice
=============================================================*/

#advice {
	.inner {
		h2 {
			box-sizing: border-box;
			padding: 0 10% 25px;
			position: relative;
			border-bottom: 3px solid #0066cb;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 12%;
				aspect-ratio: 1/1;
				background-image: url(../images/baikyaku/label_free.png);
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		p {
			font-size: 20px;
			line-height: 2.8;
			text-align: center;

			@media print, screen and (min-width: 811px) and (max-width: 1300px) {
				font-size: 18px;
			}
			@media print, screen and (min-width: 641px)  and (max-width: 810px) {
				font-size: 16px;
			}
			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				font-size: 14px;
			}
		}

		h2 + p {
			margin-top: 45px;
		}
	}
}


/*=============================================================
不動産売却・type
=============================================================*/

#types {
	overflow: visible;

	.outer {
		background: repeating-linear-gradient(
			-45deg, 
			#c8e7ff 0, 
			#c8e7ff 20px,
			#e4f3ff 20px,
			#e4f3ff 40px
		);
		box-sizing: border-box;
		padding: 0 0 80px 0;
		position: relative;

		@media print, screen and (min-width: 360px) and (max-width: 640px) {
			padding: 0 0 40px 0;
		}

		.down_arrow2 {
			content: "";
			position: absolute;
			width: 100%;
			bottom: -3.5vw;
			left: 0;
			z-index: 5;

			figure {
				width: 5.25vw;
				aspect-ratio: 3 / 4;
				margin: 0 auto;
			}
		}
	}

	.content_top {
		box-sizing: border-box;
		position: relative;
		min-height: 28.125vw;

		@media print, screen and (min-width: 360px) and (max-width: 640px) {
			min-height: 56.25vw;
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(../images/baikyaku/bg_types.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 20% center;
			top: 0;
			left: 0;
		}
	}

	.content_bottom {
		position: relative;

		.bg {
			content: "";
			position: absolute;
			width: 100%;
			height: 28.125vw;
			background-color: #fff;
			clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
			top: 0;
			left: 0;

			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				min-height: 56.25vw;
			}
		}

		.circle_wrap {
			display: flex;
			justify-content: center;
			position: relative;
			z-index: 2;

			.circle {
				width: 39%;
				aspect-ratio: 1 / 1;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 50%;
				padding: 5vw 5vw 5vw 2.5vw;
				margin-top: -20vw;
				position: relative;

				.aiming {
					content: "";
					position: absolute;
					width: 7vw;
					aspect-ratio: 1/1;
					top: 50%;
					left: 50%;
				}

				.magnifying {
					content: "";
					position: absolute;
					width: 15vw;
					aspect-ratio: 2/3;
					top: 25%;
					right: -10vw;
				}
			}
		}

		.text_wrap {
			content: "";
			position: absolute;
			width: 100%;
			height: 28.125vw;
			top: 0;
			left: 0;
			box-sizing: border-box;
			font-size: clamp(1rem, -0.025rem + 2.03vw, 2rem); /*16-32px, 810-1600px*/
			padding-top: 8vw;
			z-index: 4;

			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				font-size: clamp(0.875rem, 0.071rem + 3.57vw, 1.5rem);/*14-24px*/
				min-height: 56.25vw;
			}

			h2 {
				font-size: 1em;
				line-height: 1.8;
			}

			h2 + p {
				display: block;
				font-size: 1.125em;
				text-align: center;
				background: linear-gradient(to right, #3b9ae1, #323b75);
				box-sizing: border-box;
				border-radius: 4px;
				padding: .75em 1em;
				margin-top: 2vw;

				span {
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
					font-size: 1em;
					color: #fff;
				}
			}

			.down_arrow {
				width: 4.5vw;
				aspect-ratio: 1 / 1;
				clip-path: polygon(0 0, 0% 100%, 100% 100%);
				background-color: #1761ae;
				transform: rotate(-45deg);
				margin: -1vw auto 0;
			}
		}

		#chart_wrap {
			margin-top: 12vw;

			@media print, screen and (min-width: 360px) and (max-width: 640px) {
				margin-top: 24vw;
			}

			.inner {
				position: relative;

				figure {
					margin: 0 0 0 0;
				}

				.chart_links {
					content: "";
					position: absolute;
					width: 100%;
					display: flex;
					justify-content: space-between;
					z-index: 5;
					bottom: 0;
					left: 0;

					li {
						width: 31.5%;
						aspect-ratio: 1/1;

						a {
							display: block;
							width: 100%;
							height: 100%;
							position: relative;
							transition: .2s ease;

							&::before {
								content: "";
								position: absolute;
								width: 94%;
								height: 94%;
								margin: 3% 3% 3% 3%;
								transition: .2s ease;
								background-color: rgba(255,255,255,0);
							}
						}

						a:hover {
							transition: .2s ease;

							&::before {
								background-color: rgba(255,255,255,.4);
								transition: .2s ease;
							}
						}

					}
				}
			}
		}
	}
}

/*=============================================================
選ばれる4つの理由・Reasons
=============================================================*/

#reasons {
	.outer {
		box-sizing: border-box;
		padding: 50px 0;

		@media print, screen and (min-width: 641px)  and (max-width: 810px) {
			padding: 30px 0;
		}
		@media print, screen and (min-width: 360px)  and (max-width: 640px) {
			padding: 0 0 40px;
		}
	}

	.inner {
		h2 {
			box-sizing: border-box;
			padding: 0 10% 25px;
			position: relative;
			border-bottom: 3px solid #0066cb;
			position: relative;
		}

		.btn_wrap {
			margin-top: 80px;

			@media print, screen and (min-width: 641px)  and (max-width: 810px) {
				margin-top: 50px;
			}
			@media print, screen and (min-width: 360px)  and (max-width: 640px) {
				margin-top: 40px;
			}
		}
	}

	.box_wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.box {
			width: 23%;
			margin-top: 50px;
			box-sizing: border-box;
			border: 4px solid #0066cb;

			@media print, screen and (min-width: 641px)  and (max-width: 810px) {
				width: 48.5%;
			}
			@media print, screen and (min-width: 360px)  and (max-width: 640px) {
				width: 48.5%;
			}

			.num_wrap {
				width: 100%;
				aspect-ratio: 3 / 1;
				background-image: url(../images/baikyaku/bg_reason.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				box-sizing: border-box;
				padding: 0 min(.5vw,8px) min(1.0vw,16px) 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				@media print, screen and (min-width: 360px)  and (max-width: 640px) {
					aspect-ratio: 5 / 2;
					background-size: 100% 100%;
					box-sizing: border-box;
					padding-bottom: 6vw;
				}

				span {
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
					font-size: (0.625rem, -0.016rem + 1.27vw, 1.25rem);/*10-20px, 810-1600px*/
					color: #fff;
					margin-right: .25em;
				}

				b {
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
					font-size: clamp(1.625rem, -0.041rem + 3.29vw, 3.25rem);/*26-52px, 810-1600px*/
					color: #fff;
				}
			}

			h3 {
				font-size: clamp(1rem, -0.025rem + 2.03vw, 2rem); /*16-32px, 810-1600px*/
				font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
				line-height: 1.8;
				font-weight: bold;
				text-align: center;

				@media print, screen and (min-width: 641px)  and (max-width: 810px) {
					font-size: 28px;
				}

				span {
					color: #cb050f;
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
				}
			}

			figure {
				@media print, screen and (max-width: 810px) {
					margin: 0 0 0 0;
					box-sizing: border-box;
					padding: 0 2.5vw;
				}
			}

			.text_wrap {
				box-sizing: border-box;
				font-size: clamp(0.625rem, 0.241rem + 0.76vw, 1rem);/*10-16px, 810-1600px*/
				padding: 1em;

				@media print, screen and (min-width: 641px)  and (max-width: 810px) {
					font-size: 16px;
				}

				@media print, screen and (min-width: 360px)  and (max-width: 640px) {
					font-size: 12px;
				}

				p {
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
					font-size: 1em;
					margin-top: 1em;
					line-height: 1.6;
					text-align: center;

					@media print, screen and (min-width: 360px)  and (max-width: 640px) {
						text-align: left;
					}
				}

				p:first-of-type {
					border-top: 4px solid #ccc;
					margin-top: 0;
					padding-top: 1em;
				}
			}
		}
	}
}

/*=============================================================
お客様の声・voice
=============================================================*/

#voice {
	.outer {
		box-sizing: border-box;
		padding: 50px 0 0;
		position: relative;

		@media print, screen and (min-width: 360px)  and (max-width: 640px) {
			padding: 40px 0 0;
			margin-top: 0;
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(../images/baikyaku/bg_voice.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.inner {
		.hd_wrap {
			font-size:clamp(3.75rem, -0.095rem + 7.59vw, 7.5rem);/*60-120px, 810-1600px*/

			h2 {
				position: relative;
				font-size: 1em;
				color: #f3f7f8;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
	
				.jp {
					content: "";
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: .2667em;
					left: 0;
					right: 0;
	
				}
			}

			h2 + p {
				font-size: .16667em;
				text-align: center;
				margin-top: 1em;

				@media print, screen and (min-width: 360px)  and (max-width: 810px) {
					font-size: 14px;
				}
			}
		}

		.box_wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.box {
				width: 48.5%;
				display: flex;
				justify-content: space-between;
				margin-top: 60px;

				@media print, screen and (min-width: 641px)  and (max-width: 810px) {
					flex-direction: column;
					align-items: center;
					justify-content: normal;
				}

				@media print, screen and (min-width: 360px)  and (max-width: 640px) {
					width: 100%;
				}

				.fig_wrap {
					width: 30%;

					@media print, screen and (min-width: 641px)  and (max-width: 810px) {
						width: 50%;
					}

					figure {
						filter: drop-shadow(4px 4px 4px rgba(132,132,132,0.5));
						margin: 0;
					}

					figcaption {
						text-align: center;
						font-size: clamp(0.688rem, -0.017rem + 1.39vw, 1.375rem);/*11-22px, 810-1600px*/
						font-weight: bold;
						font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
						margin-top: 1em;

						@media print, screen and (min-width: 641px)  and (max-width: 810px) {
							font-size: 16px;
						}
					}
				}

				.text_wrap {
					width: 63%;
					background-color: #f3f7f8;
					border-radius: 10px;
					font-size: clamp(0.625rem, 0.241rem + 0.76vw, 1rem);/*10-16px, 810-1600px*/
					box-sizing: border-box;
					padding: 2em 1em;
					filter: drop-shadow(4px 4px 4px rgba(132,132,132,0.5));
					position: relative;

					@media print, screen and (min-width: 641px)  and (max-width: 810px) {
						width: 90%;
						font-size: 14px;
						margin-top: 2em;
					}
					@media print, screen and (min-width: 360px)  and (max-width: 640px) {
						font-size: 12px;
					}

					&::before {
						content: "";
						position: absolute;
						width: 8%;
						aspect-ratio: 1/1;
						background-color: #f3f7f8;
						clip-path: polygon(0 0, 100% 100%, 100% 0);
						top: 20%;
						left: calc((8% - 4px)* -1);
					}

					@media print, screen and (min-width: 641px)  and (max-width: 810px) {
						&::before {
							content: none;
							position: static;
						}
					}

					h3 {
						font-size: clamp(0.688rem, -0.017rem + 1.39vw, 1.375rem);/*11-22px, 810-1600px*/
						color: #034275;
						font-weight: bold;
						line-height: 1.6;

						@media print, screen and (min-width: 641px)  and (max-width: 810px) {
							font-size: 16px;
						}
						@media print, screen and (min-width: 360px)  and (max-width: 640px) {
							font-size: 13px;
						}
					}

					p {
						font-size: 1em;
						font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
						line-height: 1.8;
					}

					h3 + p {
						margin-top: 1em;
					}
				}
			}
		}
		.btn_wrap {
			margin-top: 80px;
		}
	}
}

/*=============================================================
faq Q&A
=============================================================*/

#faq {
	.outer {
		box-sizing: border-box;
		padding: 50px 0 0;
		position: relative;
	}

	.hd_wrap {
		font-size:clamp(3.75rem, -0.095rem + 7.59vw, 7.5rem);/*60-120px, 810-1600px*/

		h2 {
			position: relative;
			font-size: 1em;
			color: #f3f7f8;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.jp {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: .2667em;
				left: 0;
				right: 0;

			}
		}

		h2 + p {
			font-size: .16667em;
			text-align: center;
			margin-top: 1em;

			@media print, screen and (min-width: 360px)  and (max-width: 810px) {
				font-size: 14px;
			}
		}
	}

	.acco_wrap {
		margin-top: 80px;

		dl {
			margin-top: 40px;

			dt {
				background-color: #f3f7f8;
				display: flex;

				.num {
					display: flex;
					align-items: center;
					background-color: #0066cb;
					font-size:clamp(1.313rem, -0.033rem + 2.66vw, 2.625rem);/*21-42px, 810-1600px*/
					color: #fff;
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
					box-sizing: border-box;
					padding: .5em;
				}

				.text {
					display: flex;
					align-items: center;
					color: #034275;
					font-size: 20px;
					box-sizing: border-box;
					line-height: 1.6;
					padding: 1.0em calc(5vw + .5em) 1.0em .5em;

					@media print, screen and (min-width: 811px) and (max-width: 1300px) {
						font-size: 18px;
					}
					@media print, screen and (min-width: 641px)  and (max-width: 810px) {
						font-size: 16px;
					}
					@media print, screen and (min-width: 360px)  and (max-width: 810px) {
						font-size: 14px;
						padding: 1.0em calc(9vw + .5em) 1.0em .5em;
					}
				}
			}

			dd {
				background-color: #f3f7f8;
				margin-top: .5em;

				.text_wrap {
					display: flex;

					.num {
						display: flex;
						align-items: center;
						font-size:clamp(1.313rem, -0.033rem + 2.66vw, 2.625rem);/*21-42px, 810-1600px*/
						color: #0066cb;
						font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
						box-sizing: border-box;
						padding: .5em;
					}
	
					.text {
						display: flex;
						align-items: center;
						color: #222;
						font-size: 20px;
						box-sizing: border-box;
						line-height: 1.6;
						padding: 1.0em .5em 1.0em;

						@media print, screen and (min-width: 811px) and (max-width: 1300px) {
							font-size: 18px;
						}
						@media print, screen and (min-width: 641px)  and (max-width: 810px) {
							font-size: 16px;
						}
						@media print, screen and (min-width: 360px)  and (max-width: 810px) {
							font-size: 14px;
						}
					}
				}
			}
		}
	}

	.btn_wrap {
		margin-top: 50px;
	}
}

/*=============================================================
faq Q&A　アコーディオン挙動
=============================================================*/

.acco_wrap {

	.acco {
		.acco_menu {
            position: relative;
            cursor: pointer;

            .btn_toggle {
                content: "";
				display: block;
                position: absolute;
                height: 100%;
                aspect-ratio: 1/1;
                box-sizing: border-box;
                right: 0;
                top: 0;

				&::before,
				&::after {
					content: '';
					width: min(3vw, 36px);
					height: 2px;
					background: #0066cb;
					position: absolute;
					top: calc(50% - 1px);
					right: min(1.5vw, 18px);
					transform: translateY(-50%);
					z-index: 2;
				}
				&::after {
					transform: translateY(-50%) rotate(90deg);
					transition: .5s;
				}

				@media print, screen and (min-width: 360px)  and (max-width: 640px) {
					&::before,
					&::after {
						width: 5vw;
						right: 2.5vw;
					}
				}
			}
        }

        .is-active.acco_menu .btn_toggle::after { 
            transform: translateY(-50%) rotate(0);
        }

        .acco_contents {
            line-height: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition: padding .25s ease, opacity .5s ease;
            padding: 0 0;
        }

        .is-acco.acco_contents {
            line-height: normal;
            height: auto;
            opacity: 1;
            transition: padding .25s ease, opacity .5s ease;
            padding: 1em 0;
        }
	}
}

/*=============================================================
footer直前背景
=============================================================*/

#baikyaku_footer {

	.outer {
		box-sizing: border-box;
		padding: 120px 0 0;
		position: relative;
		margin-top: 0;

		@media print, screen and (min-width: 360px)  and (max-width: 640px) {
			padding: 75px 0 0;
		}
	}

	.bg {
		overflow-x: hidden;
		position: relative;

		figure {
			margin: 0 0 0 0;
			width: 150vw;

			@media print, screen and (min-width: 811px) and (max-width: 1300px) {
				width: 175vw;
			}
			@media print, screen and (min-width: 641px)  and (max-width: 810px) {
				width: 200vw;
			}
			@media print, screen and (min-width: 360px)  and (max-width: 640px) {
				width: 300vw;
			}
		}

		figure.bg_back {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	}
}


















































/* @media print, screen and (min-width: 769px) {

#contents .loan .sub_txt {
	width: 95%;
	margin: 0 auto;
}

#contents .loan{
	margin: 20px auto;
	padding: 0 0 10px 0;
	width: 100%;
}
#contents .loan2{
	background: #fffbeb;
	padding: 30px 0;
}
#contents .loan .calcu_area{
	border: 1px solid #347fb3;
	margin: 0 auto 20px;
	padding: 0;
	max-width: 1300px;
	width: 95%;
}
#contents .loan .calcu_area h3{
	background: #3B9AE1;
	border-bottom: 1px dotted #3B9AE1;
	padding: 12px 0 12px 24px;
	color: #fff;
}
#contents .loan .calcu_area dl{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
#contents .loan .calcu_area dl dt{
	background: #F0FBFF;
    border-right: 1px dotted #3B9AE1;
    border-bottom: 1px dotted #3B9AE1;
    color: #333;
    text-align: center;
    padding: 12px 0 12px;
    width: 20%;
    font-size: 15px;
    font-weight: bold;
}
#contents .loan .calcu_area dl dd{
	background: #fff;
	color: #333;
	padding: 12px 0 12px 20px;
}
#contents .loan .calcu_area dl dd.cell-1{
	border-right: 1px dotted #3B9AE1;
	border-bottom: 1px dotted #3B9AE1;
	width: calc(25% - 22px);
}
#contents .loan .calcu_area dl dd.cell-2{
	border-bottom: 1px dotted #3B9AE1;
	width: calc(55% - 22px);
}
#contents .loan .calcu_area dl .dd_red input{
	color: #dc0000;
}
#contents .loan .calcu_area .form-btn{
	background: #89C6E5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	padding: 12px 0 12px;
	width: 100%;
}
#contents .loan .calcu_area input[type="number"],
#contents .loan .calcu_area input[type="text"]{
	border: 1px solid #3B9AE1;
	padding: 10px 10px;
    margin: 0 10px 0 0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
}
#contents .loan2 .calcu_area input[type="number"],
#contents .loan2 .calcu_area input[type="text"]{
	background: #fcfbe0;
	color: #dc0000;
}
#contents .loan .calcu_area .form-btn input[type="button"]{
	background: #00b60f;
	border: none;
	color: #fff;
	padding: 10px 0;
	margin: 0;
	width: 180px;
	position: relative;
	top: 0;
	transition: all ease 0.8s;
}
#contents .loan .calcu_area .form-btn input[type="button"]:hover{
	top: 5px;
}
#contents .loan .calcu_area .form-btn input[type="reset"]{
	background: #cccccc;
	border: 1px solid #fff;
	color: #333;
	padding: 0;
	margin: 0;
	width: 180px;
	position: relative;
	top: 0;
	transition: all ease 0.8s;
}
#contents .loan .calcu_area .form-btn input[type="reset"]:hover{
	top: 5px;
}
#contents .loan .loaninfo{
	background: #fff;
	border: 1px dotted #347fb3;
	border-radius: 60px;
	margin: 30px auto 0;
	padding: 15px 0;
	max-width: 1300px;
	width: 95%;
}
#contents .loan .loaninfo p{
	margin: 0 auto;
    padding: 0 0 0 130px;
    max-width: 660px;
    width: calc(90% - 130px);
    position: relative;
}
#contents .loan .loaninfo p:before{
	content: "";
	background: url(/images/loan/icon_loan.png);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 80px;
}
}

@media print, screen and (max-width: 768px) {

#contents .loan .sub_txt {
	width: 95%;
	margin: 0 auto;
}


#contents .loan{
	margin: 20px auto;
	padding: 0 0 10px 0;
	width: 100%;
}
#contents .loan2{
	background: #fffbeb;
	padding: 30px 0;
}
#contents .loan .calcu_area{
	margin: 0 auto 20px;
	padding: 0;
	width: 95%;
}
#contents .loan .calcu_area h3{
	background: #3B9AE1;
	border-bottom: 1px dotted #3B9AE1;
	font-size: 16px;
	margin: 0 0 10px;
	padding: 12px 0 12px 24px;
	color: #fff;
}
#contents .loan .calcu_area dl{
	border: 1px solid #347fb3;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 10px;
}
#contents .loan .calcu_area dl dt{
	background: #F0FBFF;
    border-right: 1px dotted #3B9AE1;
    border-bottom: 1px dotted #3B9AE1;
    color: #333;
    text-align: center;
    padding: 12px 10px 12px;
    width: calc(35% - 20px);
    font-size: 14px;
    font-weight: bold;
}
#contents .loan .calcu_area dl dd{
	background: #fff;
	color: #333;
	padding: 12px 0 12px 20px;
}
#contents .loan .calcu_area dl dd.cell-1{
	border-bottom: 1px dotted #3B9AE1;
	width: calc(65% - 24px);
}
#contents .loan .calcu_area dl dd.cell-2{
	width:100%;
}
#contents .loan .calcu_area dl .dd_red input{
	color: #dc0000;
}
#contents .loan .calcu_area .form-btn{
	background: #89C6E5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	padding: 12px 0 12px;
	width: 100%;
}
#contents .loan .calcu_area input[type="number"],
#contents .loan .calcu_area input[type="text"]{
	border: 1px solid #3B9AE1;
	padding: 10px 10px;
    margin: 0 10px 0 0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    width: 50%;
}
#contents .loan2 .calcu_area input[type="number"],
#contents .loan2 .calcu_area input[type="text"]{
	background: #fcfbe0;
	color: #dc0000;
}
#contents .loan .calcu_area .form-btn input[type="button"]{
	background: #00b60f;
	border: none;
	color: #fff;
	padding: 10px 0;
	margin: 0;
	width: 42%;
	position: relative;
	top: 0;
	transition: all ease 0.8s;
}
#contents .loan .calcu_area .form-btn input[type="button"]:hover{
	top: 5px;
}
#contents .loan .calcu_area .form-btn input[type="reset"]{
	background: #cccccc;
	border: 1px solid #fff;
	color: #333;
	padding: 0;
	margin: 0;
	width: 42%;
	position: relative;
	top: 0;
	transition: all ease 0.8s;
}
#contents .loan .calcu_area .form-btn input[type="reset"]:hover{
	top: 5px;
}
#contents .loan .loaninfo{
	background: #fff;
	border: 1px dotted #347fb3;
	border-radius: 60px;
	margin: 30px auto 0;
	padding: 15px 0;
	max-width: 1300px;
	width: 95%;
}
#contents .loan .loaninfo p{
	font-size: 14px;
	margin: 0 auto;
    padding: 0 0 0 60px;
    width: calc(95% - 100px);
    position: relative;
}
#contents .loan .loaninfo p:before{
	content: "";
	background: url(/images/loan/icon_loan.png);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 40px;
}
} */