@charset "utf-8";



section#hoken * {

	box-sizing: border-box;

}



@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');



/*--------------------------------------------

■［回り込み］

--------------------------------------------*/



.clearfix:after {

	display: block;

	clear: both;

	content: "";

}



.f-left {

	float: left;

}



p.f-left {

	margin-right: 1.5em !important;

}



.f-right {

	float: right;

}



p.f-right {

	margin-left: 1.5em !important;

}



.f-clear {

	clear: both;

}



.a-left {

	text-align: left;

}





.a-right {

	text-align: right;

}



.a-center {

	text-align: center;

}









/*--------------------------------------------

■［フォント］

--------------------------------------------*/



h1, h2, h3, h4, h5, h6 {

	font-size: 1em;

	font-weight: normal;

	padding: 0;

	margin: 0;

	line-height: 1.5;

}



.f1,

.s {

	font-size: 0.8em;

}



.f2,

.m {

	font-size: 16px;

	font-size: 1rem;

}



.f3,

.l {

	font-size: 1.2em;

}



.ss {

	font-size: 0.7em;

}



.s {

	font-size: 0.88em;

}



.m {

	font-size: 16px;

	font-size: 1rem;

}



.l {

	font-size: 1.2em;

}



.ll {

	font-size: 1.4em;

}



.notes {

	color: #D30A00 !important;

}



/*--------------------------------------------

■［画像］

--------------------------------------------*/



section#hoken img {

	-webkit-backface-visibility: hidden;

	-ms-interpolation-mode: bicubic;

	vertical-align: bottom;

	max-width: 100%;

	max-height: 100%;

	width: auto;

	height: auto;

	border-style: none;

}







/*--------------------------------------------

■［非表示］

--------------------------------------------*/



.sp-view {

	display: none !important;

}



.pc-view {

	display: inherit!important;

}





/*--------------------------------------------

■［リスト］

--------------------------------------------*/

ul,

ol {

	margin: 0;

	padding: 0;

	list-style: none;

}



ul li ,

ol li {

	margin: 0;

	padding: 0;

	page-break-inside: avoid;

}



ul.disc {

	margin-bottom: 2em;

}



ul.disc li {

	margin: 0 0 0.3em 2em;

	position: relative;

	line-height: 1.5;

}



ul.disc.clearfix li {

	margin-left: 0;

	padding-left: 2em;

	padding-right: 0;

}



ul.disc > li:before {

	content: "●";

	color: #333;

	font-size: 0.6em;

	position: absolute;

	left: -2em;

	margin-top: 0.4em;

}



ul.disc.gray > li:before {

	color: #999 !important;

}



ul.disc.clearfix > li:before {

	left: 1em;

}



ol.decimal {

	margin: 0px 0px 2em 2em;

	padding: 0px;

	list-style-type: decimal;

}



ol.decimal > li {

	margin: 0px 0px 0.5em 0.5em;

}



ul.disc > li > ul, ul.disc > li > ol {

	margin-top: 0.5em !important;

	margin-bottom: 1em !important;

}



ul.icon-kome {

	margin: 0 0 2em 2em;

	padding: 0;

	position: relative;

}



p + ul.icon-kome {

	margin-top: -1em;

}



dd p + ul.icon-kome {

	margin-top: 0;

}



ul.icon-kome > li {

	margin: 0 0 0.25em 0;

	position: relative;

}



dd p + ul.icon-kome > li {

	margin: 0 0 0.25em 0;

}



ul.icon-kome > li:before {

	content: "※";

	position: absolute;

	left: -1.5em;

	top: 0;

	display: block;

}



ul.icon-kome.dc > li:before {

	color: #222;

}



p.icon-kome {

	position: relative;

	padding-left: 1.5em;

}



ul + p.icon-kome,

ol + p.icon-kome,

p + p.icon-kome {

	margin-top: -1em;

}



p.icon-kome:before {

	content: "※";

	position: absolute;

	left: 0;

	top: 0;

	display: block;

}



p.icon-kome.dc:before {

	color: #222;

}



ul.c5, ul.c4, ul.c3, ul.c2 {

	margin-bottom: 2em;

}



ul.c2 > li {

	width: 50%;

	float: left;

	padding-right: 1em;

}



ul.c3 > li {

	width: 33.333%;

	float: left;

	padding-right: 1em;

}



ul.c4 > li {

	width: 25%;

	float: left;

	padding-right: 1em;

}



ul.c5 > li {

	width: 20%;

	float: left;

	padding-right: 1em;

}



ul.c5 > li:nth-child(5n+1),

ul.c4 > li:nth-child(4n+1),

ul.c3 > li:nth-child(3n+1),

ul.c2 > li:nth-child(2n+1) {

	clear: both;

}



ul.imagelist {

	margin: 0 0 2em 0;

}



ul.imagelist.clearfix {

	margin: 0 -15px 2em -15px;

}



ul.imagelist li {

	margin: 0 0 1em 0 !important;

	padding: 0 15px;

	display: inline-block;

}



ul.imagelist.clearfix li {

	display: block;

}



ul.imagelist li p.image {

	margin: 0 0 0.5em 0 !important;

}



ul.imagelist li p.image img {

	width: 100%;

	height: auto;

}



ul.imagelist li p.image + .caption {

	margin: -0.5em 0 0.5em 0 !important;

}



ul.imagelist li p.caption {

	margin: 0 !important;

	line-height: 1.3

}



dl.dllist-001 {

	margin: 0 0 2em 0;

	clear: both;

	border-bottom: 1px solid #B8C3BB;

}



dl.dllist-001 dt {

	width: 24%;

	float: left;

	clear: both;

	padding: 1em 0;

	border-top: 1px solid #B8C3BB;

	line-height: 1.5;

	font-weight: bold;

	color: #007247;

}



dl.dllist-001 dd {

	width: 76%;

	float: left;

	padding: 1em 0;

	border-top: 1px solid #B8C3BB;

	line-height: 1.5;

}







/*--------------------------------------------

■［汎用ボックス］

--------------------------------------------*/



.box {

	padding: 1.5em;

	border-radius: 0.3em;

	margin-bottom: 3em;

	border-style: solid;

	border-color: #B8C3BB;

	border-width: 4px;

}



.bdw-1 {

	border-width: 1px;

}



.bdw-2 {

	border-width: 2px;

}



.bdw-3 {

	border-width: 3px;

}



.bdw-4 {

	border-width: 4px;

}



.bdw-5 {

	border-width: 5px;

}







/*--------------------------------------------

■［横幅］

--------------------------------------------*/



.w100 {

	width: 100%;

}



.w90 {

	width: 90%;

}



.w88 {

	width: 88%;

}



.w80 {

	width: 80%;

}



.w78 {

	width: 78%;

}



.w70 {

	width: 70%;

}



.w68 {

	width: 68%;

}



.w60 {

	width: 60%;

}



.w58 {

	width: 58%;

}



.w50 {

	width: 50%;

}



.w48 {

	width: 48%;

}



.w40 {

	width: 40%;

}



.w38 {

	width: 38%;

}



.w30 {

	width: 30%;

}



.w31 {

	width: 31%;

}



.w28 {

	width: 28%;

}



.w20 {

	width: 20%;

}



.w18 {

	width: 18%;

}





/*--------------------------------------------

■［マージン］

--------------------------------------------*/



.mgt-0 {

	margin-top: 0 !important;

}



.mgt-05 {

	margin-top: 0.5em !important;

}



.mgt-10 {

	margin-top: 1em !important;

}



.mgt-15 {

	margin-top: 1.5em !important;

}



.mgt-20 {

	margin-top: 2em !important;

}



.mgt-30 {

	margin-top: 3em !important;

}



.mgt-40 {

	margin-top: 4em !important;

}



.mgb-0 {

	margin-bottom: 0 !important;

}



.mgb-05 {

	margin-bottom: 0.5em !important;

}



.mgb-10 {

	margin-bottom: 1em !important;

}



.mgb-15 {

	margin-bottom: 1.5em !important;

}



.mgb-20 {

	margin-bottom: 2em !important;

}



.mgb-30 {

	margin-bottom: 3em !important;

}



.mgb-40 {

	margin-bottom: 4em !important;

}



.mgt-20 {

	margin-top: 2em !important;

}





/*--------------------------------------------

■［本文共通］

--------------------------------------------*/



section#hoken {

	max-width: 1000px;

	padding: 0 10px;

	margin: 0 auto;

	text-align: left;

	box-sizing: border-box;

}



section#hoken *:first-child {

	margin-top: 0;

}



section#hoken *:last-child {

	margin-bottom: 0;

}



section#hoken p {

	margin: 0 0 1.5em 0;

}



section#hoken hr {

	margin: 1.5em 0;

	border: none;

	height: 1px;

	background-color: #000;

}





/*--------------------------------------------

■［トップ］

--------------------------------------------*/



div#top {

	padding: 1em 0 3em 0;

}



div#top h1 {

	margin: 0 0 3em 0;

}



div#top ul#mainvisual {

	margin: 0 auto 5em auto;

	position: relative;

	border: 1px solid #B5B5B6;

	max-width: 740px;

	border-radius: 0.5em;

}



div#top ul#mainvisual div.slick-list {

	border-radius: 0.5em;

}



div#top ul#mainvisual button.slick-arrow {

	background-color: transparent;

	border: none;

	cursor: pointer;

	outline: none;

	padding: 0;

	appearance: none;

	position: absolute;

	width: 40px;

	height: 0;

	padding-top: 40px;

	overflow: hidden;

	background-image: url(../img/icon_prev.png);

	background-position: center center;

	background-size: contain;

	background-repeat: no-repeat;

	top: 0;

	bottom: 0;

	margin: auto;

	z-index: 1;

}



div#top ul#mainvisual button.slick-arrow.slick-prev {

	left: 0;

}



div#top ul#mainvisual button.slick-arrow.slick-next {

	background-image: url(../img/icon_next.png);

	right: 0;

}



div#top ul#mainvisual ul.slick-dots {

	position: absolute;

	left: 0;

	right: 0;

	bottom: -30px;

	text-align: center;

	font-size: 0;

	line-height: 1;

}



div#top ul#mainvisual ul.slick-dots li {

	display: inline-block;

	font-size: 0.8rem;

	margin: 0 5px;

	vertical-align: top;

	padding: 0;

	height: 12px;

	line-height: 1;

}



div#top ul#mainvisual ul.slick-dots li button {

	background-color: transparent;

	border: none;

	cursor: pointer;

	outline: none;

	padding: 0;

	margin: 0;

	appearance: none;

	width: 10px;

	height: 0;

	padding-top: 8px;

	border-radius: 5px;

	overflow: hidden;

	background-color: #fff;

	border: 1px solid #B5B5B6;

	line-height: 1;

}



div#top ul#mainvisual ul.slick-dots li.slick-active button {

	background-color: #ED6C00;

}



div#top div#recorder,

div#top div#accident,

div#top div#comparison {

	border: 5px solid #ED6C00;

	margin: 0 0 3em 0;

}



div#top div#accident h3,

div#top div#comparison h3 {

	background-color: #000;

	padding: 1em;

	text-align: center;

}



div#top div#accident h3 img,

div#top div#comparison h3 img {

	max-height: 2em;

}



div#top div#accident div#accident-container,

div#top div#comparison div#comparison-container {

	padding: 2em;

}



div#top div#comparison div#comparison-container h4 {

	margin: 0 0 1.5em 0;

	text-align: left;

}



div#top div#comparison div#comparison-container h4 img {

	max-height: 2em;

}



div#top div#recorder div#recorder-container p.a-right img,

div#top div#comparison div#comparison-container p.a-right img {

	max-height: 4em;

}



div#top div#recorder div#recorder-container p strong,

div#top div#accident div#accident-container p strong {

	font-size: 1.8em;

	font-weight: bold;

	color: #ED6C00;

}



div#top div#recorder {

	padding: 0 !important;

}



div#top div#recorder div#recorder-container {

	padding: 0 !important;

	margin: 0;

	max-width: inherit;

}



div#top div#recorder div#recorder-container div.f-left {

	background-color: #000;

	padding: 2em;

	margin: 0;

	width: 46%;

}



div#top div#recorder div#recorder-container div.f-right {

	padding: 2em;

	margin: 0;

	width: 54%;

}



div#top ul#guide {

	margin: 0 0 3em 0;

}



div#top ul#guide li {

	width: 33.333%;

	float: left;

	text-align: center;

}



div#top div#insurancecompany {

	position: relative;

	padding-top: 27.2%;

	background-image: url(../img/top_015.png);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: contain;

	overflow: hidden;

	height: 0;

	margin-bottom: 3em;

}



div#top div#insurancecompany ul li a {

	padding-top: 0;

	height: 0;

	overflow: hidden;

	position: absolute;

	left: 0;

	top: 0;

}



div#top div#insurancecompany ul li:first-child a {

	left: 2%;

	top: 28%;

	width: 12%;

	padding-top: 18%;

}



div#top div#insurancecompany ul li:nth-child(2) a {

	left: 15%;

	top: 28%;

	width: 12%;

	padding-top: 18%;

}



div#top div#insurancecompany ul li:nth-child(3) a {

	left: 29%;

	top: 28%;

	width: 12%;

	padding-top: 18%;

}



div#top div#insurancecompany ul li:nth-child(4) a {

	left: 42%;

	top: 28%;

	width: 12%;

	padding-top: 18%;

}



div#top div#insurancecompany ul li:nth-child(5) a {

	left: 56%;

	top: 10%;

	width: 20%;

	padding-top: 22%;

}



div#top p.footercaption a {

	display: inline-block;

	padding: 0.5em;

	border: 1px solid #ED6C00;

	color: #ED6C00;

	text-decoration: none;

	line-height: 1;

}





/*--------------------------------------------

■［ドライブレコーダー特約］

--------------------------------------------*/



div#recorder {

	padding: 1em 0 3em 0;

}



div#recorder h1 {

	margin: 0 0 1.5em 0;

	padding: 0.5em 1em;

	font-size: 1.8em;

	font-weight: bold;

	background-color: #ED6C00;

	color: #fff;

}



div#recorder div#recorder-container {

	max-width: 780px;

	margin: 0 auto;

}



div#recorder h4 {

	margin: 3em 0 0 0;

	font-size: 1.3em;

	font-weight: bold;

	color: #ED6C00;

}







/*--------------------------------------------

■［自動車保険加入Check!ポイント］

--------------------------------------------*/



div#checkpoint {

	padding: 2em 0 3em 0;

}



div#checkpoint h1 {

	margin: 0 0 3em 0;

}



div#checkpoint div#checkpoint-container {

	max-width: 780px;

	margin: 0 auto;

}



div#checkpoint div.checkpoint-box {

	background-color: #FEF1D8;

	padding: 30px;

	margin: 0 0 3em 0;

}



div#checkpoint h2 {

	max-width: 340px;

	margin: 0 0 1.5em -30px;

}



div#checkpoint h3 {

	font-weight: bold;

	font-size: 2em;

	color: #ED6C00;

	margin: 0 0 1em 0;

	font-family: 'Noto Sans JP', sans-serif;

	font-weight: 900;

}



div#checkpoint h4 {

	font-size: 1.5em;

	color: #333;

	margin: 0 0 1em 0;

	font-weight: bold;

}



div#checkpoint h4 strong {

	background-color: #000;

	color: #fff;

	display: inline-block;

	padding: 0.3em 0.75em;

	line-height: 1;

	vertical-align: middle;

	margin-right: 0.5em;

	font-size: 0.8em;

}





/*--------------------------------------------

■［オートバックスで自動車保険に入るメリット］

--------------------------------------------*/



div#merit {

	padding: 2em 0 3em 0;

}



div#merit h1 {

	margin: 0 0 120px 0;

}



div#merit div#merit-container {

	max-width: 780px;

	margin: 0 auto;

}



div#merit div.merit-box {

	border: 4px solid #ED6C00;

	position: relative;

	padding: 30px;

	margin: 0 0 3em 0;

}



div#merit div.merit-box h2 {

	max-width: 260px;

	margin: -50px 0 20px 0;

}



div#merit div.merit-box p.illust {

	position: absolute;

	right: 20px;

	top: -105px;

	width: 200px;

}





/*--------------------------------------------

■［知って得する！ 自動車保険の基礎知識］

--------------------------------------------*/



div#knowledge {

	padding: 2em 0 3em 0;

}



div#knowledge h1 {

	margin: 0 0 3em 0;

}



div#knowledge div#knowledge-container {

	max-width: 780px;

	margin: 0 auto;

}



div#knowledge div.knowledge-container {

	margin: 0 0 0 70px;

}



div#knowledge div#knowledge-container h3 {

	margin: 4em 0 1em 0;

}



div#knowledge div#knowledge-container h4 {

	margin: 1.5em 0 0.5em 0;

	font-weight: bold;

	font-size: 1.4em;

}



div#knowledge div#knowledge-container h5 {

	margin: 3em 0 1em 0;

	font-weight: bold;

	font-size: 1.4em;

	text-align: center;

	border-bottom: 1px solid #ED6F00;

	padding-bottom: 0.5em;

}



div#knowledge div#knowledge-container div.box {

	border: 1px solid #ED6C00;

}



div#knowledge div#knowledge-container div.box h5 {

	margin: 0 0 1em 0;

	text-align: center;

	font-size: 1.4em;

	font-weight: bold;

	color: #ED6F00;

	border: none;

	padding: 0;

}



div#knowledge div#knowledge-container ul.imagelist li {

	padding: 0;

	margin: 0;

}



div#knowledge div#knowledge-container ul.imagelist li img {

	width: 100%;

}



div#knowledge div.case {

	background-color: #FEF1D8;

	padding: 20px;

	margin: 0 0 4em 0;

}



div#knowledge div.case h3 {

	padding: 3em 1em;

	margin: 0 !important;

	position: relative;

	background-position: right 1em bottom;

	background-repeat: no-repeat;

	background-size: contain;

}



div#knowledge div#case1.case h3 {

	background-image: url(../img/knowledge_016.png);

}



div#knowledge div#case2.case h3 {

	background-image: url(../img/knowledge_022.png);

}



div#knowledge div#case3.case h3 {

	background-image: url(../img/knowledge_028.png);

}



div#knowledge div#case4.case h3 {

	background-image: url(../img/knowledge_034.png);

}



div#knowledge div.case h3 img {

	height: 2em;

}



div#knowledge div.case div.case-container {

	background-color: #fff;

	padding: 20px;

	margin-bottom: 20px;

}



div#knowledge div.case h4 {

	border: 1px solid #ED6C00;

	margin: 3em 0 1em 0 !important;

	padding: 0.5em 1em;

	color: #ED6C00;

	font-weight: bold;

}



div#knowledge div.case h5 {

	margin: 2em 0 1em 0 !important;

	padding: 0 !important;

	color: #ED6C00;

	font-weight: bold;

	border: none !important;

	text-align: left !important;

}



div#knowledge div.case h6 {

	margin: 1.5em 0 1em 0 !important;

	padding: 0 0 0.5em 0!important;

	color: #333;

	font-weight: bold;

	font-size: 1.2em;

	border-bottom: 1px solid #ED6C00;

}



div#knowledge div.case div.case-container *:first-child {

	margin-top: 0 !important;

}





/*  スマートフォン  */

@media only screen and (max-width: 767px) {





	/*--------------------------------------------

	■［非表示］

	--------------------------------------------*/



	.sp-view {

		display: inherit !important;

	}



	.pc-view {

		display: none !important;

	}

	

	

	/*--------------------------------------------

	■［回り込み］

	--------------------------------------------*/



	p.f-right,

	p.f-left {

		margin-left: 0 !important;

		margin-right: 0 !important;

		float: none;

		text-align: center;

	}

	/*--------------------------------------------

	■［リスト］

	--------------------------------------------*/



	ul.c5 li, ul.c4 li, ul.c3 li, ul.c2 li {

		width: auto;

		float: none;

		padding: 0;

		margin-bottom: 0.5em;

	}



	ul.imagelist.clearfix,

	ul.imagelist {

		margin: 0 0 2em 0;

	}



	ul.imagelist li {

		padding: 0 0 1em 0;

	}



	ul.imagelist li p.image {

		padding: 0;

		background-color: transparent;

	}



	ul.imagelist li p.image img {

		width: auto;

	}





	dl.dllist-001 dt {

		width: auto;

		float: none;

		padding: 1em 0;

	}



	dl.dllist-001 dd {

		width: auto;

		float: none;

		padding: 0 0 1em 0;

		border-top: none;

	}



	/*--------------------------------------------

	■［横幅］

	--------------------------------------------*/



	.w100,

	.w98,

	.w90,

	.w88,

	.w80,

	.w78,

	.w70,

	.w68,

	.w60,

	.w58,

	.w50,

	.w48,

	.w40,

	.w38,

	.w30,

	.w31,

	.w28,

	.w20,

	.w18,

	.w10,

	.w8 {

		width: auto;

		max-width: 100%;

		float: none;

		margin-bottom: 1.5em;

	}





	/*--------------------------------------------

	■［top］

	--------------------------------------------*/



	div#top div#recorder div#recorder-container div.f-left,

	div#top div#recorder div#recorder-container div.f-right {

		float: none;

		width: auto;

	}



	/*--------------------------------------------

	■［ドライブレコーダー特約］

	--------------------------------------------*/



	div#recorder h1 {

		font-size: 1.6em;

	}



	/*--------------------------------------------

	■［オートバックスで自動車保険に入るメリット］

	--------------------------------------------*/



	div#merit h1 {

		margin: 0 0 20vw 0;

	}



	div#merit div.merit-box h2 {

		max-width: 46%;

	}



	div#merit div.merit-box p.illust {

		top: -16vw;

		width: 34%;

	}







	/*--------------------------------------------

	■［自動車保険加入Check!ポイント］

	--------------------------------------------*/



	div#checkpoint div.checkpoint-box {

		padding: 15px;

	}



	div#checkpoint h2 {

		max-width: 60%;

		margin: 0 0 1.5em -15px;

	}



	div#checkpoint h3 {

		font-size: 1.6em;

	}





	/*--------------------------------------------

	■［知って得する！ 自動車保険の基礎知識］

	--------------------------------------------*/



	div#knowledge h1 {

		margin: 0 0 2em 0;

	}



	div#knowledge div.knowledge-container {

		margin: 0 0 0 2em;

	}



	div#knowledge div#knowledge-container h3 {

		margin: 2em 0 1em 0;

	}



	div#knowledge div#knowledge-container h5 {

		margin: 2em 0 1em 0;

	}



	div#knowledge div.case h3 {

		padding: 2em 0;

		background-position: right bottom;

	}



	div#knowledge div.case h3 img {

		height: 1.6em;

	}





}