@charset "utf-8";
/* CSS Document */
.sp-only {
	display: none !important;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	color: #333;
	line-height: 1.8;
	font-weight: 500;
}
p {
	line-height: 1.8;
	font-feature-settings: "palt";
}
img {
	max-width: 100%;
}
.inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

/*----------------------------------------------------------------------------------------------------------------*/
.main {
	height: 100vh;
	width: 100vw;
	margin: 0 auto;
}
.main .inner {
	height: 100%;
}
.hero {
	background-image: url("../img/mv-pc.jpg");
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	height: 100%;
	position: relative;
}
.mat-top {
	background-color: rgba(32,42,68, 0.8);
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transform-origin: left top;
/*--	transform: skewX(-45deg);--*/
}
.mat-bottom {
	background-color: rgba(32,42,68, 0.8);
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 1;
	transform-origin: right bottom;
/*--	transform: skewX(-45deg);--*/
}
.main .logo {
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 258px;
}
.main-copy {
	position: absolute;
	bottom: 0%;
	right: 0%;
}
.line1 {
	fill: none;
	stroke: #fff;
	stroke-width: 1.0035;
	stroke-miterlimit: 10;
	stroke-dasharray: 700px;
}
.main-copy h1 img {
	width: 525px;
}
.main-copy .date-wrap {
	width: 250px;
	position: relative;
	margin: 30px 0 0 auto;
}
.main-copy .date-wrap img {
	width: 187px;
	position: absolute;
	top: 19px;
	left: 25px;
}
/*----------------------------------------------------------------------------------------------------------------*/
.cta-top {
	background-color: #a85f02;
	padding: 2rem 0;
}
.cta-top img {
	max-width: 120rem;
	display: block;
	margin: 0 auto;
}
.cta {
	background-image: url("../img/cta-back.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: top center;
	padding: 5rem 0;
}
.cta ul {
	display: flex;
	justify-content: space-between;
	padding: 4rem 0;
}
.cta ul li {
	width: calc(100% / 4);
	background-color: #f0dfc6;
	border-top: .1rem solid #a85f02;
	border-bottom: .1rem solid #a85f02;
	border-left: .1rem solid #a85f02;
	padding: 1.5rem 4.6rem;
}
.cta ul li.first.active {
	background-color: #a7a8a9;
}
.cta ul li.second.active {
	background-color: #a7a8a9;
}
.cta ul li.third.active {
	background-color: #a7a8a9;
}
.cta ul li.fourth.active {
	background-color: #a7a8a9;
}
.cta ul li.fifth.active {
	background-color: #a7a8a9;
}
.cta ul li.sixth.active {
	background-color: #a7a8a9;
}
.cta ul li:last-child {
	border-right: .1rem solid #a85f02;
}
.cta02 {
	max-width: 96rem;
	display: block;
	margin: 0 auto;
}
.cta03 {
	max-width: 48rem;
	display: block;
	margin: 0 auto;
}
a.cta-btn {
	background-color: #a85f02;
	display: block;
	padding: 3rem 0;
	max-width: 50rem;
	margin: 3rem auto 0;
	filter: drop-shadow(0.5rem 0.5rem 0 #f0dfc6);
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.cta-btn-txt {
	width: 12.5rem;
	display: block;
	margin:  0 auto;
	z-index: 10;
	position: relative;
}
.cta-btn:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #1b365d;
	transition: transform .3s;
	content: "";
	transform-origin: right top;
	transform: skewX(45deg) scale(0, 1);
}
.cta-btn:hover:before {
	transform-origin: left bottom;
	transform: skewX(30deg) scale(2, 2);
	content: "";
}
.cta-btn:after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background: #a85f02;
	content: "";
}
.cta-talk {
	position: absolute;
	top: 14%;
	right: 0%;
	width: 15rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
.payment {
	padding: 8rem 0;
}
.payment-img {
	padding: 0 0 6rem;
}
/*----------------------------------------------------------------------------------------------------------------*/

.img-area {
	padding: 0;
	position: relative;
}
.img-area.xc {
	padding: 8rem 0 8rem;
}
.img-area.v {
	padding: 8rem 0 0;
	margin: -8rem 0 0;
}
.img-area .inner {
	width: 100%;
	padding: 0 10rem 0 0;
	max-width: none;
}
.img-area.xc .inner {
	padding: 0 0 0 10rem;
}
.img-area.c40:before {
	content: '';
	position: absolute;
	background-color: #141414;
	width: 35%;
	height: 120%;
	top: 0;
	right: 0;
}
.img-area.xc:before {
	content: '';
	position: absolute;
	background-color: #141414;
	width: 35%;
	height: 100%;
	top: 0;
	left: 0;
}
.img-area.v:before {
	content: '';
	position: absolute;
	background-color: #202A44;
	width: 35%;
	height: 100%;
	top: 0;
	right: 0;
}
.img-area ul.parent {
	display: flex;
	justify-content: space-between;
}
.img-area.xc ul.parent {
	flex-direction: row-reverse;
}
.img-area ul.parent > li.big-img {
	flex: 1;
	margin: 0 1rem 0 0;
	position: relative;
	background-image: url("../img/img-xc60_1.jpg");
	background-size: cover;
	background-position: center right;
}
.img-area.xc ul.parent > li.big-img {
	flex: 1;
	margin: 0 0 0 1rem;
	position: relative;
	background-image: url("../img/img-xc90_off.jpg");
	background-size: cover;
	background-position: center left;
}
.img-area.v ul.parent > li.big-img {
	background-image: url("../img/img-v60cc_off.jpg");
	background-size: cover;
	background-position: center right;
}
.img-area ul.parent > li.small-img {
	width: 46.5rem;
}
.img-area ul.child li {
	position: relative;
}
.img-area ul.child li:first-child {
	background-image: url("../img/img-xc40_on.jpg");
	background-size: cover;
	background-position: center;
}
.img-area ul.child li:nth-child(2) {
	margin: 1rem 0 0;
	background-image: url("../img/img-xc60_on.jpg");
	background-size: cover;
	background-position: center;
}
.img-area.v ul.child li:first-child {
	background-image: url("../img/img-v60_on.jpg");
	background-size: cover;
	background-position: center;
}
.img-area.v ul.child li:nth-child(2) {
	margin: 1rem 0 0;
	background-image: url("../img/img-v90_on.jpg");
	background-size: cover;
	background-position: center;
}
.c40-title-box {
	background-color: #fff;
	width: 70.77%;
	border: 1rem solid #141414;
	padding: 5rem 1rem;
}
.c40-title {
	max-width: 58.4rem;
	margin: 0 auto;
	display: block;
}
.img-area p.c40-txt {
	color: #fff;
	font-size: 1.2rem;
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	width: 65.8%;
}
.img-title {
	max-width: 55.2rem;
	display: block;
	margin: 0 auto;
}
.xc-title-box {
	background-color: #fff;
	width: 70.77%;
	border: 1rem solid #141414;
	padding: 5rem 1rem;
	margin: 0 0 0 auto;
}
.img-area .name {
	width: 18rem;
	position: absolute;
	top: 1rem;
	right: 1rem;
}
.img-area .name.r-b {
	bottom: 1rem;
	top: auto;
}
.img-area .name.l-t {
	right: auto;
	left: 1rem;
}
.img-area .name.name-v60cc {
	right: auto;
	left: 2rem;
	top: 2rem;
	width: 60.90%;
}
.img-area a .car-img {
	transition: .6s cubic-bezier(.04,.6,.52,1);
}
.img-area a:hover .car-img {
    opacity: 0;
	display: inline-block;
}
.img-area .c40txt01 {
	position: absolute;
	width: 40.12%;
	top: 1rem;
	left: 1rem;
}
.img-area .c40txt02 {
	position: absolute;
	width: 24.85%;
	bottom: 1rem;
	right: 1rem;
}
/*----------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------*/
.google {
	padding: 8rem 0;
}
/*----------------------------------------------------------------------------------------------------------------*/
.norikae {
	background-color: #1b365d;
	padding: 8rem 0;
}
/*----------------------------------------------------------------------------------------------------------------*/
footer {
	background-color: #e1dfdd;
	padding: 1rem 0;
}
footer p {
	font-size: 1.4rem;
	text-align: center;
}
/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------金利0--------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
#rate .hero {
	background-image: url("../img/mv-pc-rate.jpg");
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	height: 100%;
	position: relative;
}
#rate .main-copy {
	position: absolute;
	left: 50%;
	top: 19%;
	transform: translateX(-50%);
	right: auto;
	bottom: auto;
}
#rate .main-copy h1 {
	width: 82.74rem;
}
#rate .main-copy h1 img {
	width: 100%;
}
#rate .cta03 {
	max-width: 72rem;
}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1399px) {
	img {
		max-width:100%;
	}
	.inner {
		width: 100%;
		padding: 0 4rem;
	}
	.img-area ul.parent > li.small-img {
		width: 33.2%;
	}
}
@media screen and (min-width:768px) and (max-width:1024px) {
	img {
		max-width:100%;
	}
	.inner {
		width: 100%;
		padding: 0 4rem;
	}
	.main {
		height: 66vh;
	}
	.hero {
		background-attachment: inherit;
	}
	.cta ul li {
		padding: 1.5rem;
	}
	.cta-talk {
		top: 13%;
		right: 2%;
		width: 8rem;
	}
	.img-area .inner {
		padding: 0 5rem 0 0;
	}
	.img-area.xc .inner {
		padding: 0 0 0 5rem;
	}
	
}
@media screen and (max-width:1024px) {
	.main-copy h1 img {
		width: 370px;
	}
	.img-area p.c40-txt {
		font-size: 1rem;
	}
	.c40-title-box {
		padding: 3rem 5rem;
	}
	.xc-title-box {
		padding: 3rem 5rem;
	}
	.img-area.v {
		padding: 5rem 0 0;
	}
	#rate .main-copy h1 {
		width: 60rem;
	}
}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------スマートフォン／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:767px) {
		.sp-only {
			display: block !important;
		}
		.pc-only {
			display: none !important;
		}
		.inner {
			width: 100%;
			padding: 0 2rem;
		}
		img {
			max-width: 100%;
		}
		.main {
			height: 70vh;
		}
		.main .inner {
			padding: 0;
		}
		.hero {
			background-image: url("../img/mv-sp.jpg");
			background-position: center;
			background-size: cover;
			background-attachment: inherit;
			height: 100%;
		}
		.main .logo {
			width: 34.4%;
			top: 5vh;
		}
		.main-copy {
			right: 3%;
		}
		.main-copy h1 img {
			width: 28rem;
		}
		.main-copy .date-wrap {
			width: 55%;
			margin: 2rem 0 0 auto;
		}
		.main-copy .date-wrap img {
			width: 80%;
			top: 17%;
			left: 7%;
		}
/*----------------------------------------------------------------------------------------------------------------*/
		.cta ul {
			flex-wrap: wrap;
		}
		.cta ul li {
			width: calc(100% / 2);
			padding: 1rem 1rem;
		}
		.cta ul li:nth-child(n + 4) {
			border-top: none;
		}
		.cta ul li:nth-child(2) {
			border-right: .1rem solid #a85f02;
		}
		.cta ul li:nth-child(3) {
			border-top: none;
		}
		.cta ul li:nth-child(4) {
			border-right: .1rem solid #a85f02;
		}
		.cta03 {
			width: 100%;
		}
		.cta-btn-txt {
			width: 7rem;
		}
		a.cta-btn {
			padding: 2rem;
			width: 82.1%;
		}
		.cta-talk {
			top: 4.7%;
			right: 4%;
			width: 15.5%;
		}
/*----------------------------------------------------------------------------------------------------------------*/
		.payment {
			padding: 5rem 0;
		}
		.payment-img {
			padding: 0 0 4rem;
		}
/*----------------------------------------------------------------------------------------------------------------*/
		.img-area .inner {
			padding: 0;
		}
		.img-area.xc .inner {
			padding: 0;
		}
		.img-area.xc {
			padding: 3rem 0 8rem;
		}
		.c40-title-box {
			border: .5rem solid #141414;
			padding: 3rem 1.5rem;
			width: 85%;
		}
		.xc-title-box {
			border: .5rem solid #141414;
			padding: 3rem 1.5rem;
			width: 85%;
		}
		.img-area ul.parent {
			display: block;
		}
		.img-area ul.child {
			display: flex;
			justify-content: space-between;
		}
		.img-area ul.child li {
			width: calc((100% -.5rem) / 2);
		}
		.img-area ul.child li:first-child {
			margin: .5rem .5rem 0 0;
		}
		.img-area ul.child li:nth-child(2) {
			margin: .5rem 0 0 0;
		}
		.img-area.v ul.child li:nth-child(2) {
			margin: .5rem 0 0 0;
		}
		.img-area ul.parent > li.big-img {
			width: 100%;
			margin: 0;
			height: 38.5rem;
			background-position: 95%;
		}
		.img-area.xc ul.parent > li.big-img {
			width: 100%;
			margin: 0;
			height: 38.5rem;
		}
		.img-area.v ul.parent > li.big-img {
			height: 38.5rem;
			background-position: 90%;
		}
		.img-area ul.parent > li.small-img {
			width: 100%;
		}
		.img-area .name {
			width: 8rem;
		}
		.img-area a:hover .car-img {
			opacity: 1;
		}
		.img-area p.c40-txt {
			transform: scale(0.8);
			width: 82%;
			left: -5%;
			bottom: -1%;
			line-height: 1.5;
		}
		.img-area .name.name-v60cc {
			width: 74%;
		}
		.img-area.v {
			padding: 3rem 0 0;
		}
/*----------------------------------------------------------------------------------------------------------------*/
		.google {
			padding: 4rem 0;
		}
/*----------------------------------------------------------------------------------------------------------------*/
		.norikae {
			padding: 4rem 0;
		}
/*----------------------------------------------------------------------------------------------------------------*/	
		footer p {
			font-size: 1.2rem;
		}
/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------金利0--------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
		#rate .hero {
			background-image: url("../img/mv-sp-rate.jpg");
			background-position: center;
			background-size: cover;
			background-attachment: inherit;
			height: 100%;
		}
		#rate .main-copy {
			right: auto;
		}
		#rate .main-copy h1 {
			width: 25rem;
		}
		#rate .main-copy h1 img {
			width: 100%;
		}
		#rate .cta-talk {
			top: 5%;
			right: 4%;
			width: 18.5%;
		}
		@media screen and (max-width:360px) {
			.main {
				height: 75vh;
			}

		}