@charset "utf-8";

/*===============================================
 カーライフ carlife.css
===============================================*/
/*=======================================================
 - ～414.9px	：スマートフォン縦画面 (iPhone XS Max)
 - 415px ～		：タブレット環境
 - 700px ～		：切り替えが必要な場合
 - 970px ～		：PC環境
 - ～1399.9px	：iPad Pro 12.9横幅基準
 - ～1579.9px	：横幅最大値

●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (min-width: 415px) {
}
@media print, screen and (min-width: 700px) {
}
@media print, screen and (min-width: 970px) {
}
@media print, screen and (min-width: 1400px) {
}
@media print, screen and (min-width: 1580px) {
}



/*===============================================
 共通
===============================================*/
.title_wrap {
	background-image: url(../../images/carlife/back_pagetitle.png);
}



/*===============================================
 カーライフ
===============================================*/
/*
 トップリンク(indexからコピー)
===============================================*/
.carlife_first {
	margin: 0 auto 50px;
	text-align: center;
	max-width: 90%;
}

.carlife_link {
	background: no-repeat -10% -10% #fff;
	background-size: 50%;
	border: 4px solid #ffbd30;
	border-radius: 20px;
	position: relative;
	text-align: center;
	width: 48%;
}

@media print, screen and (min-width: 700px) {
	.carlife_link {
		width: 23%;
	}
}

.carlife_link:nth-of-type(2n) {
	border: 4px solid #62baab;
}

.carlife_link:nth-of-type(1) {
	background-image: url(../../images/index/carlife_back1.png);
}

.carlife_link:nth-of-type(2) {
	background-image: url(../../images/index/carlife_back2.png);
}

.carlife_link:nth-of-type(3) {
	background-image: url(../../images/index/carlife_back3.png);
}

.carlife_link:nth-of-type(4) {
	background-image: url(../../images/index/carlife_back4.png);
}

/* SP 順番 */
@media screen and (max-width: 699.9px) {
	.carlife_link:nth-last-of-type(n-2) {
		margin-top: 4.375%;
	}

	.carlife_link:nth-of-type(1) {
		order: 1;
	}

	.carlife_link:nth-of-type(2) {
		order: 2;
	}

	.carlife_link:nth-of-type(3) {
		order: 4;
	}

	.carlife_link:nth-of-type(4) {
		order: 3;
	}
}

/* 正方形用 */
.carlife_link:before {
	content: '';
	display: block;
	padding: 100% 0 0;
}

/* 矢印 */
.carlife_link:after {
	background: url(../../images/index/carlife_arrow_odd.png) no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	right: -17.5%;
	top: 0;
	width: 17.5%;
	z-index: 2;
}

.carlife_link:nth-of-type(2n):after {
	background-image: url(../../images/index/carlife_arrow_even.png);
}

.carlife_link:last-child:after {
	display: none;
}

@media screen and (max-width: 699.9px) {
	.carlife_link:nth-of-type(2):after {
		bottom: -100%;
		transform: rotate(90deg);
		transform-origin: top left;
		top: auto;
	}

	.carlife_link:nth-of-type(3):after {
		left: -17.5%;
		right: auto;
		transform: scale(-1,1);
	}
}

@media print, screen and (min-width: 700px) {
	.carlife_link:nth-of-type(2n):after {
		background-image: url(../../images/index/carlife_arrow_even.png);
	}

	.carlife_link:last-child:after {
		display: none;
	}
}

/* リンク内部 */
.carlife_link a {
	display: block;
	height: 100%;
	left: 0;
	padding: 40px 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.carlife_link_element {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}

.carlife_link img {
	margin: 0 auto 10%;
	transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	width: 35%;
}

.carlife_link .hover img {
	transform: scale(1.1);
}

.carlife_link span {
	font-size: 2.5vw;
	margin: 0 auto;
}

@media print, screen and (min-width: 700px) {
	.carlife_link span {
		font-size: 1.5vw;
	}
}

@media print, screen and (min-width: 970px) {
	.carlife_link span {
		font-size: 1.5rem;
	}
}

.ie .carlife_link .arrow,
.edge .carlife_link .arrow {
	background-position: 90% 50%;
	display: inline-block;
	padding-right: 3em;
}

.ie .carlife_link .arrow.hover,
.edge .carlife_link .arrow.hover {
	background-position: 92% 50%;
}


/*
 コンテンツ
===============================================*/
/* タイトル */
.emphasis_title-h3 {
	align-items: center;
	display: flex;
}

.emphasis_title-h3:before {
	background: no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	height: 2em;
	margin: 0 .5em 0 0;
	width: 2em;
}

.democar_title_wrap .emphasis_title-h3:before {
	background-image: url(../../images/index/carlife_img_democar.png);
}

.business_title_wrap .emphasis_title-h3:before {
	background-image: url(../../images/index/carlife_img_business.png);
}

.mainte_title_wrap .emphasis_title-h3:before {
	background-image: url(../../images/index/carlife_img_mainte.png);
}

.insurance_title_wrap .emphasis_title-h3:before {
	background-image: url(../../images/index/carlife_img_insurance.png);
}

@media print, screen and (min-width: 700px) {
	.emphasis_title_titleback {
		left: calc((100% - (100% - 200px)) / 2 + 5em);
	}
}

/* コンテンツ上部 */
.carlife_block {
	margin: 0 auto 60px;
}

.carlife_block .text {
	margin: 0 0 20px;
	width: 100%;
}

.carlife_block .img {
	margin: 0 auto 20px;
	width: 90%;
}

.carlife_block .link {
	width: 100%;
}

@media print, screen and (min-width: 700px) {
	.carlife_block .text {
		margin: 0;
		width: 68%;
	}

	.carlife_block .img {
		margin: -170px 0 0;
		width: 28%;
	}

	.carlife_block .link {
		margin: 60px 0 0;
	}
}

/* デモカーリンク */
#democar .box_partback:before {
	height: 45%;
}

/* バナーリンク */
.carlife_block .link a {
	margin: 0 auto 20px;
	width: 90%;
}

@media screen and (max-width: 699.9px) {
	.carlife_block .link a:nth-last-of-type(1) {
		margin: 0 auto;
	}
}

@media print, screen and (min-width: 700px) {
	.carlife_block .link a {
		border-radius: 32px;
		font-size: 1.6rem;
		line-height: 64px;
		height: 64px;
		width: 30.6%;
	}

	.carlife_block .link a {
		margin: 0 3% 0 0;
	}

	.carlife_block .link a:nth-last-of-type(1) {
		margin: 0;
	}
}

/* バナー */
#mainte .box_partback:before {
	height: 25%;
}

.carlife_banner_wrap.big {
	margin: 0 auto 20px;
}

.carlife_banner_wrap a.bannerr {
	border-radius: 10px;
	overflow: hidden;
}

@media screen and (max-width: 699.9px) {
	.carlife_banner_wrap a {
		margin: 0 auto 20px;
		width: 90%;
	}
	.carlife_banner_wrap a:nth-last-of-type(1) {
		margin: 0 auto;
	}
}

@media print, screen and (min-width: 700px) {
	.carlife_banner_wrap.three a {
		width: 30.6%;
	}

	.carlife_banner_wrap.four a {
		width: 22%;
	}

	.carlife_banner_wrap a:nth-last-of-type(1) {
		margin: 0;
	}

	.carlife_banner_wrap.big {
		margin-bottom: 30px;
	}

	.carlife_banner_wrap.big a {
		width: 48%;
	}

	.carlife_banner_wrap.big.recommended a {
		width: 31.333%;
	}
}



/*===============================================
 自動車保険
===============================================*/
.insurance_banner_wrap {
	margin: 20px 0 0;
}

.insurance_banner_wrap li {
	margin: 0 0 10px;
	width: 100%;
}

@media screen and (max-width: 699.9px) {
	.insurance_banner_wrap li:last-child {
		margin: 0;
	}
}

@media print, screen and (min-width: 700px) {
	.insurance_banner_wrap li {
		margin: 0 1%;
		width: 30.6%;
		max-width: 222px;
	}
}

@media print, screen and (min-width: 970px) {
	.insurance_banner_wrap li {
		margin: 0 20px;
	}
}

.insurance_banner_wrap li a {
	border: 1px solid #000;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 222px;
}

.insurance_policy_wrap {
	margin: 0 0 50px;
	width: 100%;
}

.insurance_policy_wrap:last-child {
	margin: 0;
}

.insurance_subtitle {
	font-weight: bold;
	margin: 0 0 10px;
}

.insurance_policy_wrap .insurance_subtitle + .list_ul:nth-of-type(1) {
	margin: 0 0 20px;
}

.insurance_policy_wrap .index_wrap {
	border: 1px solid #000;
	margin: 0 auto 1em;
	padding: 1em 2em;
	text-align: center;
	width: 90%;
	max-width: 300px;
}

@media print, screen and (min-width: 700px) {
	.insurance_policy_wrap .index_wrap {
		margin: 0 1%;
		width: 30.6%;
	}
}

.insurance_policy_wrap .ol_number_counter.fd li {
	padding: 0 0 0 3.5em;
}

.insurance_policy_wrap .ol_number_counter.fd li:before {
	content: '\65B9\91DD' counter(counter) '.';
}

.insurance_policy_wrap .index_wrap span {
	display: block;
}

.insurance_policy_wrap .index_wrap .title {
	font-size: 1.5em;
	margin: .3em 0;
}

.insurance_policy_wrap .index_wrap .percent {
	font-size: 1.8em;
	font-weight: bold;
	margin: 0 0 .5em;
}

.insurance_policy_wrap .index_wrap .achievement {
	font-weight: bold;
}



/*===============================================
 初めてご利用になる方へ
===============================================*/
.welcome_top {}

@media print, screen and (min-width: 700px) {
	.welcome_top {
		margin-top: -50px;
	}
}

@media print, screen and (min-width: 970px) {
	.welcome_top {
		margin-top: -120px;
	}
}

.welcome_top_inner {
	margin: 0 0 60px;
}

@media print, screen and (min-width: 700px) {
	.welcome_top_inner {
		background: url(../../images/carlife/welcome/welcome_back.png) no-repeat 95% 0;
		background-size: contain;
		margin: 0 0 120px;
		padding: 30px 0;
	}
}

@media print, screen and (min-width: 970px) {
	.welcome_top_inner {
		padding: 60px 0 30px;
	}
}

.welcome_top_inner .text .title {
	font-size: 2rem;
	font-weight: bold;
	display: block;
	margin: 0 0 15px;
}

@media print, screen and (min-width: 700px) {
	.welcome_top .text .title {
		font-size: 2.8rem;
		margin: 0 0 30px;
	}
}

.welcome_top_inner p {
	margin: 0 0 20px;
}

.welcome_top_inner .img {
	width: 100%;
}

@media print, screen and (min-width: 700px) {
	.welcome_top_inner .img {
		width: 73%;
	}
}



/*===============================================
 ご要望にお応えします！
===============================================*/
/*
 トップ
===============================================*/
@media print, screen and (min-width: 970px) {
	.requests  {
		margin: -40px 0 0;
	}
}

@media print, screen and (min-width: 700px) and (max-width: 969.9px) {
	.requests_top_wrap {
		margin-bottom: 40px;
	}
}

.requests_top_wrap .text_wrap {
	margin: 0 auto;
	width: 100%;
}

.requests_top_wrap .title {
	font-size: 2rem;
	font-weight: bold;
	display: block;
	margin: 0 0 15px;
	text-align: center;
}

.requests_top_wrap .text {
	margin: 0 auto 30px;
}

.requests_top_wrap .img {
	margin: 0 auto;
	width: 85%;
}

.requests_top_wrap .photo {
	display: none;
	position: absolute;
	top: 0;
}

.requests_top_wrap .photo.left {
	left: 0;
}

.requests_top_wrap .photo.right {
	right: 0;
}

@media print, screen and (min-width: 700px) {
	.requests_top_wrap .text_wrap {
		width: 50%;
	}

	.requests_top_wrap .title {
		font-size: 2vw;
		margin: 0 0 30px;
	}

	.requests_top_wrap .text {
		font-size: 1.1vw;
		margin: 0 auto 30px;
		text-align: center;
	}

	.requests_top_wrap .photo {
		display: block;
		width: 23%;
	}
}

@media print, screen and (min-width: 970px) {
	.requests_top_wrap .text {
		margin: 0 auto 70px;
	}
}

@media print, screen and (min-width: 1400px) {
	.requests_top_wrap .title {
		font-size: 2.8rem;
	}

	.requests_top_wrap .text {
		font-size: 1.6rem;
	}
}


/*
 要望回答
===============================================*/
.rr_wrap {
	border-top: 1px solid #d4d0c8;
	margin: 0 0 30px;
}

.rr_wrap:last-child {
	margin: 0;
}

@media print, screen and (min-width: 700px) {
	.rr_wrap {
		margin: 0 0 50px;
	}
}

.rr_title {
	background: #eee;
	margin: 0 0 15px;
	padding: 10px 15px 10px 60px;
	position: relative;
	width: 100%;
	word-break: break-all;
}

.rr_text {
	min-height: 46px;
	margin: 0 0 15px;
	padding: 0 0 0 60px;
	position: relative;
	width: 100%;
	word-break: break-all;
}

@media print, screen and (min-width: 480px) {
	.rr_title {
		padding: 15px 0 15px 90px;
	}

	.rr_text {
		padding: 0 0 0 90px;
	}
}

.rr_title:before,
.rr_text:before {
	background: url('../../images/carlife/requests/icon_guest.png') no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	height: 35px;
	left: 15px;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(0,-50%);
	width: 30px;
}

.rr_text:before {
	background-image: url('../../images/carlife/requests/icon_shop.png');
}

@media print, screen and (min-width: 480px) {
	.rr_title:before,
	.rr_text:before {
		height: 52px;
		left: 20px;
		line-height: 30px;
		width: 45px;
	}
}

/* 画像 */
.split_wrap.img_only .split_short {
	margin: 0 auto;
	width: 48%;
}

/* 画像2枚 */
@media print, screen and (min-width: 700px) {
	.split_wrap.img_only .split_short {
		margin: 0;
		width: 21%;
	}

	.split_wrap.img_only .split_long {
		width: 75%;
	}

	.split_wrap.img_multiple .split_short {
		margin: 0;
		width: 44%;
	}

	.split_wrap.img_multiple .split_long {
		width: 50%;
	}
}

.split_wrap.img_multiple .double {
	width: 48%;
}