@charset "UTF-8";

/* **************************************************

Name: style.css

Description: Setting of grid layout

***************************************************** */


/* /lp/choinori/ 
======================================================= */
*{
	box-sizing: border-box;
}
.bg {
	margin-left: -15px;
    margin-right: -15px;
}
.bgInner {
	padding: 20px 15px;
}

@media screen and (min-width: 994px) {
	.bg {
		margin-left: 0;
		margin-right: 0;
	}
	.bgInner {
		padding: 30px 0;
	}

}
/* 見出し
--------------------------------------- */
.bg h2{
	background-image: none;
}

/* 各ブロック
--------------------------------------- */

.bg .MainCont {
	margin: 0 0 0;
	padding: 0 0 0;
	overflow: hidden; 
	margin-bottom: 15px;
}
.bg .MainCont:last-of-type {
	margin-bottom: 0;
}

/* 調整
--------------------------------------- */

.ShowRWD {display: block !important;}
.HideRWD {display: none !important;}

@media screen and (min-width: 767px) {
	.ShowRWD {display: none !important;}
	.HideRWD {display: block !important;}
}

.red {
	color: #CC0022;
}

/* TOP
=========================================================================================== */

.BrandingImgStyle{
	padding: 0 0 115px;
	background: #fff ;
}
.BrandingImgStyle .title {
	text-align: center;
}
.BrandingImgStyle .title h1 {
	display: inline-block;
	position: relative;
	margin-bottom: 2rem;
}
.BrandingImgStyle .box_border{
	padding: 15px 0  0;
	border: 3px solid #019CE5;
	margin: auto;
}
.BrandingImgStyle .box_border .bg_blue {
	margin: 0 0 15px;
	padding-bottom: 20px;
	background-color: #E5F7FF;
	position: relative;

}
.BrandingImgStyle .box_border .bg_blue dt{
	position: absolute;
	top: -19px;
	left: 50%;
    transform: translateX(-50%);
	min-width: 295px ;
}
.BrandingImgStyle .box_border .bg_blue dd{
	padding: 20px 0 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}
.BrandingImgStyle .title h1 img {
    max-width: 100%;
}
.BrandingImgStyle .LinkListStyle1 {
	font-size: 18px;
	font-weight: 700;
}
@media screen and (min-width: 768px) {
	.BrandingImgStyle{
		padding: 0 0 80px;
	}
	.BrandingImgStyle .box_border{
		max-width: 741px ;
	}
	.BrandingImgStyle .box_border .bg_blue {
		margin: 0 20px 15px;
		border-radius: 15px;
	}
}


/* 誰が購入できるの？
=========================================================================================== */

.bg.persons {
	background-color: #D5F0FC;
}
.bg.persons .MainCont {
	overflow: initial;
}
.bg.persons .MainCont > div.box > div {
    background: #FFF;
    border-radius: 5px;
	padding: 20px 0 5px;
	text-align: center;
}
.bg.persons .MainCont > div.box > div.box_button {
	padding-left:  15px;
	padding-right:  15px;
	margin-bottom: 15px;
}
.bg.persons .MainCont > div.box > div.box_button h3 {
	color: #0F83B9;
	font-size: 18px;
	padding-bottom: 15px;
	border-bottom: 1px #ccc solid;
	margin-bottom: 15px;
}
.bg.persons .MainCont > div.box > div.box_button .TextStyle1{
	margin-bottom: 10px;
}
.bg.persons .MainCont > div.box > div.box_button .ButtonStyle1 a{
	font-size: 16px;
	font-weight: 700;
	border-radius: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 100%;
}
.bg.persons .MainCont > div.box > div.box_qr {
	background-color: #B2E1F9;
}
.bg.persons .MainCont > div.box > div.box_qr h3 {
	color: #333;
	font-size: 14px;
}
.bg.persons .MainCont > div.box > div > dd > ul {
	display: inline-block;
	text-align: left;
}

.bg.persons .MainCont > div.box > div.box_button {
	position: relative;
}
.application {
	width: calc(100% - 30px);
	top: -115px;
	padding: 10px 0 5px;
	text-align: center;
	position: absolute;
	background: #ffffff;
	border: 3px solid #019CE5;
	border-radius: 10px;
}
.application:after, .application:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.application:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 14px;
	margin-left: -14px;
}
.application:before {
	border-color: rgba(1, 156, 229, 0);
	border-top-color: #019CE5;
	border-width: 18px;
	margin-left: -18px;
}

@media screen and (min-width: 767px) {
	.bg.persons > .bgInner {
		padding: 40px 0;
	}
	.bg.persons .MainCont > div.box  {
		display: flex ;
		flex-direction: row ;
	}
	.bg.persons .MainCont > div.box > div {
		padding: 30px 0 20px;
	}
	.bg.persons .MainCont > div.box > div.box_button {
		flex-grow: 2;
		padding-left:  15px;
		padding-right:  15px;
		margin-bottom: 0;
	}
	.bg.persons .MainCont > div.box > div.box_button h3 {
		padding-bottom: 20px;
		margin-bottom: 25px;
	}
	.bg.persons .MainCont > div.box > div.box_qr {
		flex-grow: 1;
		max-width: 311px;
	}
	.bg.persons .MainCont > div.box > div.box_button .ButtonStyle1 a{
		width: 50%;
	}
	.bg.persons .MainCont > div.box > div:first-of-type {
		margin-right: 15px ;
	}
	.application {
		top: -95px;
	}

}



/* 1日自動車保険無事故割引
=========================================================================================== */

.bg.discount h2 {
    background: #019CE5;
    border-radius: 5px ;
    padding: 5px 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #FFF;
	}
.bg.discount .MainCont .box {
	display: flex;
    flex-direction: column;
}
.bg.discount .MainCont .box > div > table{
	width: 100%;
}
.bg.discount .MainCont .box > div > table th{
	vertical-align: middle;
	text-align: center;
	font-weight: 700;
	padding: 10px 0;
}
.bg.discount .MainCont .box > div > table thead th{
	background-color: #FDA045;
	border-color: #F07721;
}
.bg.discount .MainCont .box > div > table thead tr:nth-of-type(2) th {
	background-color: #FFBD7D;
}
.bg.discount .MainCont .box > div > table tbody th{
	border-color: #FDA045;
}
.bg.discount .MainCont .box > div > table tbody tr:nth-of-type(2n + 1) th {
	background-color: #FAD966;
}
.bg.discount .MainCont .box > div > table tbody tr:nth-of-type(2n) th {
	background-color: #FBE28C;
}
.bg.discount .MainCont .box > div > table tbody td{
	background-color: #FFF5C4;
	border-color: #FDA045;
	text-align: center;
	vertical-align: middle;
}
.bg.discount .MainCont .box > div > table tbody tr:nth-of-type(2n) td {
	background-color: #FFF7D3;
}
.bg.discount .MainCont .box_2 {
	border: #CCC 1px solid;
	padding: 15px 15px 0;
}
.bg.discount .MainCont .box_2 .LinkListStyle1 li {
	padding: 0 0 0 0;
	background-image: none;
}


@media screen and (min-width: 767px) {
	.bg.discount .MainCont .box {
		flex-direction: row;
		justify-content: center;
	}
	.bg.discount .MainCont .box > div{
		width: calc(50% - 15px);
	}
	.bg.discount .MainCont .box > div:nth-of-type(1){
		width: calc(50% + 5px);
		margin-right: 10px;
	}
	.bg.discount .MainCont .box > div > table th{
		padding: 15px;
	}
	.bg.discount .MainCont .box_2 {
	    display: flex;
		padding: 20px 20px 0;
	}
	.bg.discount .MainCont .box_2 > ul {
	    margin-right: 25px;
	}
	.bg.discount .MainCont .box_2 > p {
	    min-width: 200px;
	}
}


/* 当社扱の団体扱自動車保険の～
=========================================================================================== */

.bg.underwriter {
	background-color: #D5F0FC;
}
.bg.underwriter .MainCont {
	background-color: #FFF;
	border-radius: 10px;
	padding: 15px 15px 0;
	text-align: left;
}
.bg.underwriter .MainCont .border_blue{
	border: #019CE5 3px solid;
	padding: 15px 15px 5px;
	margin-bottom: 15px;
}
.bg.underwriter .MainCont .border_blue dl{
	clear: both;
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
}
.bg.underwriter .MainCont .border_blue dt{
	width: 9em;
	display: inline-block;
}
.bg.underwriter .MainCont .border_blue dd{
	display: inline-block;
}

@media screen and (min-width: 767px) {
	.bg.underwriter .MainCont {
		padding: 20px 40px 5px;
	}
	.bg.underwriter .MainCont .midashi .TextStyle1 {
		font-size: 16px;
	}
	.bg.underwriter .MainCont .border_blue dl{
		font-size: 16px;
	}
	.bg.underwriter .MainCont .notice {
		display: flex;
		position: relative;
	}
	.bg.underwriter .MainCont .notice .ListStyleNone{
		width: calc(100% - 215px);
	}
	.bg.underwriter .MainCont .notice p{
		display: inline-block;
		margin-bottom: 15px;
	}
	.bg.underwriter .MainCont .notice .insurance_num {
		position: absolute;
		bottom: 0;
		left: 0;
	}

}