@charset "UTF-8";

/* --------------------------------
	余白調整
-------------------------------- */
/* SP */
@media (max-width: 767px) {
	.occasions__section {
		padding: 52px 0 0 0;
	}
	.occasions-bottom {
		padding: 0 0 80px 0;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.occasions__section:first-child {
		padding: 64px 0 0 0;
	}
	.occasions__section {
		padding: 80px 0 0 0;
	}
	.occasions-bottom {
		padding: 0 0 115px 0;
	}
}
/* PC */
@media (min-width: 1280px) {
	.occasions__section:first-child {
		padding: 64px 0 0 0;
	}
	.occasions__section {
		padding: 84px 0 0 0;
	}
	.occasions-bottom {
		padding: 0 0 146px 0;
	}
}

/* --------------------------------
	吹き出し
-------------------------------- */
.occasions-balloon {
	box-sizing: border-box;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	-webkit-align-content: space-between;
	align-content: space-between;
}

.occasions-balloon__unit {
	position: relative;
	box-sizing: border-box;
	background-color: #efdf00;
}

.occasions-balloon__btn {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #333;
	z-index: 100;
}

/* 吹き出し内 テキスト */
.occasions-balloon__description {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.4;
}

/* 吹き出し内 矢印 */
.occasions-balloon__unit .occasions-balloon__btn .arrow:after {
	background-position: 0 -3em;
}

/* でっぱり */
.occasions-balloon__unit:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 50%;
	bottom: -8px;
	margin-left: -10px;
	background-color: #efdf00;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

/* SP */
@media (max-width: 767px) {
	.occasions-balloon {
		padding: 0 16px;
		width: 100%;
	}
	.occasions-balloon__unit {
		margin: 0 0 28px 0;
		width: 48%;
	}
	.occasions-balloon__btn {
		height: 120px;
		padding: 10px 0;
	}
	.occasions-balloon__description {
		font-size: 1.2rem;
	}
	.occasions-balloon__description:first-child {
		font-size: 1.0rem;
	}
	.occasions-balloon__description__warranty,
	.occasions-balloon__description__finance {
		padding: 0 0 11px 0;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.occasions-balloon {
		padding: 0 32px 16px 32px;
		width: 100%;
	}
	.occasions-balloon__unit {
		width: 23%;
	}
	.occasions-balloon__btn {
		height: 146px;
		padding: 10px 0;
	}
	.occasions-balloon__description {
		font-size: 1.4rem;
	}
	.occasions-balloon__description:first-child {
		font-size: 1.0rem;
	}
}
/* PC */
@media (min-width: 1280px) {
	.occasions-balloon {
		margin: 0 auto;
		padding: 0 0 16px 0;
		width: 1024px;
	}
	.occasions-balloon__unit {
		width: 244px;
	}
	.occasions-balloon__btn {
		height: 146px;
		padding: 10px 0;
	}
	.occasions-balloon__btn:hover,
	.occasions-balloon__unit:hover:after {
		background-color: #f8eb4c;
	}
	.occasions-balloon__description:first-child {
		font-size: 1.2rem;
	}
}

/* 画像 */
.occasions-balloon__icon {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 60px;
	height: 60px;
	background: url(../img2016/approved_ucar/occation_icon.svg) no-repeat;
	background-size: 60px 240px;
}

.occasions-balloon__icon--1 {
	background-position: 0 0;
}

.occasions-balloon__icon--2 {
	background-position: 0 -60px;
}

.occasions-balloon__icon--3 {
	background-position: 0 -120px;
}

.occasions-balloon__icon--4 {
	background-position: 0 -180px;
}
/* SP */
@media (max-width: 767px) {
	.occasions-balloon__icon {
		width: 30px;
		height: 30px;
		background-size: 30px 120px;
	}

	.occasions-balloon__icon--1 {
		background-position: 0 0;
	}

	.occasions-balloon__icon--2 {
		background-position: 0 -30px;
	}

	.occasions-balloon__icon--3 {
		background-position: 0 -60px;
	}

	.occasions-balloon__icon--4 {
		background-position: 0 -90px;
	}
}


/* --------------------------------
	認定中古車の延長保証料金表
-------------------------------- */
.occasions-table__body {
	box-sizing: border-box;
	width: 100%;
	border-collapse: collapse;
}

.occasions-table th {
	border: 1px solid #dcdcdc;
	border-left: none;
	background-color: #fbfbfb; 
}

.occasions-table td {
	text-align: center;
	border: 1px solid #dcdcdc;
	border-right: none;
}

/* SP */
@media (max-width: 767px) {
	.occasions-table {
		width: 100%;
		margin: 0 0 16px 0;
	}
	.occasions-table col {
		width: 25%;
	}
	.occasions-table th,
	.occasions-table td {
		height: 40px;
		font-size: 1.0rem;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.occasions-table {
		width: 100%;
		margin: 0 0 18px 0;
	}
	.occasions-table col {
		width: 25%;
	}
	.occasions-table th,
	.occasions-table td {
		padding: 16px 0;
		font-size: 1.2rem;
	}
}
/* PC */
@media (min-width: 1280px) {
	.occasions-table {
		width: 1024px;
		margin: 0 auto 18px;
	}
	.occasions-table col {
		width: 254px;
	}
	.occasions-table th,
	.occasions-table td {
		padding: 16px 0;
		font-size: 1.2rem;
	}
}


/* --------------------------------
	ボタン
-------------------------------- */
.l-link .occasions__btn {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	margin: 0;
	line-height: 1.5;
	text-decoration: none;
	background-color: #efdf00;
	color: #333;
}
.l-link .occasions__btn.arrow:after {
	position: absolute;
}

/* SP */
@media (max-width: 767px) {
	.l-link .occasions__btn {
		width: 100%;
		padding: 12px 0 12px 10px;
		font-size: 1.0rem;
	}
	.l-link .occasions__btn.arrow:after {
		top: 15px;
		right: 6px;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.l-link .occasions__btn {
		width: 380px;
		padding: 10px 32px 10px 20px;
		font-size: 1.2rem;
	}
	.l-link .occasions__btn.arrow:after {
		top: 15px;
		right: 12px;
	}
}
/* PC */
@media (min-width: 1280px) {
	.l-link .occasions__btn {
		width: 436px;
		padding: 10px 32px 10px 20px;
	}
	.l-link .occasions__btn:hover {
		background-color: #f8eb4c;
	}
	.l-link .occasions__btn.arrow:after {
		top: 15px;
		right: 12px;
	}
}


/* --------------------------------
	販売中古車検索 バナー
-------------------------------- */
/* SP */
@media (max-width: 767px) {
	.occasions-banner__top,
	.occasions-banner__bottom {
		padding: 0 16px;
	}
	.occasions-banner__top .contents {
		width: 100%;
		padding: 8px 0 0 0;
	}
	.occasions-banner__bottom .contents {
		width: 100%;
		padding: 0 0 14px 0;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.occasions-banner__top,
	.occasions-banner__bottom {
		padding: 0 32px;
	}
	.occasions-banner__top .contents {
		width: 100%;
		padding: 16px 0 0 0;
	}
	.occasions-banner__bottom .contents {
		width: 100%;
		padding: 0 0 20px 0;
	}
}
/* PC */
@media (min-width: 1280px) {
	.occasions-banner__top .contents {
		width: 1024px;
		margin: 0 auto;
		padding: 16px 0 0 0;
	}
	.occasions-banner__bottom .contents {
		width: 1024px;
		margin: 0 auto;
		padding: 0 0 32px 0;
	}
}


/* --------------------------------------------
	認定中古車の点検・整備状態について バナー
-------------------------------------------- */
/* SP */
@media (max-width: 767px) {
	#maintenance .l-link .occasions__btn.arrow:after {
		top: 22px;
		right: 6px;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	#maintenance .l-link .occasions__btn.arrow:after {
		top: 22px;
		right: 12px;
	}
}
/* PC */
@media (min-width: 1280px) {
	#maintenance .l-link .occasions__btn.arrow:after {
		top: 24px;
		right: 12px;
	}
}


/* --------------------------------
	注釈
-------------------------------- */
.occasions-annotasion {
	line-height: 1.7;
}
/* SP */
@media (max-width: 767px) {
	.occasions-annotasion {
		font-size: 1.0rem;
	}
}
/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
	.occasions-annotasion {
		font-size: 1.0rem;
	}
}
/* PC */
@media (min-width: 1280px) {
	.occasions-annotasion {
		font-size: 1.2rem;
	}
}