@charset "UTF-8";

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

Name: products.css

Description: Setting of grid layout

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


/* products/index
======================================================= */

.BgSlash .Inner { padding:0 10px;}
.BgSlash .Inner ol,
.BgSlash .Inner p {
	margin-bottom:6px;
	}

p.PdtCopy {
	margin: 10px 10px 15px 10px !important;
	padding:0 !important;
	text-align:left;
	font-weight:bold;
}

p.PdtSubCopy {
	margin: 10px 10px 0 10px !important;
	padding:0 !important;
	text-align:left;
	font-size:83% !important;
}

.PdtIndex {
	/margin: 0 0 20px 0;
}

#help_me { /color: blue; }

.PdtIndex p {
	width: 130px;
	float:left;
}
.PdtIndex dl {
	float:right;
	width:440px;
}
.PdtIndex dl dt {
	text-align:left;
	line-height: 1.4em ;
}
.PdtIndex dl dt.PdtName {
	text-align:left;
	line-height: 1.4em ;
	font-weight: bold;
	margin-bottom:5px;
}
.PdtIndex dl dd {
	text-align:right;
	margin:20px 0 0 0;
}

.productList .SubTtl{
	width:570px;
	font-size:100%;
}

.productList td{
	padding:0;
	border:none;
	font-size:90%;
}

td.productListCopy{
	width:460px;
	padding:10px 0 0 0;
	vertical-align:top;
}

td.productListImg {
	width:110px;
	padding:10px 20px 0 0;
}

td.productListBtn{
	text-align:right;
	vertical-align:top;
}

/* procedure/index 
======================================================= */

.ttl_procedure {
	margin-left: -15px;
	margin-right: -15px;
	height: 100px;
	padding-top: 0;
	padding-left: 15px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background-image: url("/group/procedure/images/bg_individual_sp.png");
	background-color: #D6E9F5;
	background-size: 234px 100px;
	background-position: right center;
	background-repeat: no-repeat;
	margin-bottom: 25PX;
	}
.ttl_procedure h1 {
	margin: 0;
	display: flex;
	flex-direction: column;
 }
.ttl_procedure h1 {
	margin: 0;
	display: flex;
	flex-direction: column;
 }
.ttl_procedure h1 span {
	margin: 0 0 5px 0; }

@media screen and (min-width: 768px) {
	.ttl_procedure {
		margin-left: 0;
		margin-right: 0;
		padding-left: 27px;
        flex-direction: row;
		background-image: url("/group/procedure/images/bg_individual_pc.png");
		background-size: 427px 100px;}
	.ttl_procedure h1 {
		margin: 0;
		flex-direction: row;
		align-items: center;
		}
	.ttl_procedure h1 span {
		margin: 0 15px 0 0; }
}
.rich.individual .BoxPatternA {
	margin-left: -15px;
	margin-right: -15px;
    border-radius: 0;
	background-color: #D6E9F5;
}
.rich.individual .BoxPatternA h2{
	text-align: center;
	color: #333;
	font-size: 110%;
	background-color: #B1D4EB;
}
.rich.individual .BoxPatternA h2{
    border-radius: 0;
}
.rich.individual .BoxPatternA .LinkListStyle1{
	margin-bottom: 25px;
}
.rich.individual .BoxPatternA .TextStyle1{
	margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
	.rich.individual .BoxPatternA {
		padding-left: 15px;
		padding-right: 15px;
		margin-left: 0;
		margin-right: 0;
		border-radius: 10px;
	}
	.rich.individual .BoxPatternA h2{
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 10px 10px 0 0;
		text-align: center;
	}
}

.BoxPatternA .inner_box {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 0 5px;
	margin-left: 15px;
	margin-right: 15px;
    margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
	.BoxPatternA .inner_box {
		padding: 20px 0 5px;
	}
}


.buttonRegistration {
	text-align: center;
	margin-bottom: 10px;
    flex-grow: 1;
}
.buttonRegistration li a{
	display: block;
	max-width: 400px ;
	margin: auto;
}
/* .buttonRegistration li.Inquiry a{
	background-image: url(/image/jp/r1/icon/icon_inquiry_white_hd.png) !important;
} */
@media screen and (min-width: 768px) {

	.inner_box.registration{
		display: flex;
	}
	/* .buttonRegistration {
		display: flex;
	} */
	.buttonRegistration ul{
		/* width: calc((100% - 15px) / 2 );  */
	}

}
.contact_button > ul{
	display: flex;
	margin-left: -15px;
	margin-bottom: 15px;
	align-items: stretch;
}
.contact_button > ul >li{
    margin: 0 0 0 15px;
    width: calc((100% - 15px) / 2 ); 

}
.contact_button > ul >li a{
	display:flex;
	padding:10px 0;
	align-items: center;
    flex-direction: column;
    text-align: center;
	font-size: 84%;
	background-color: #FFF;
	border-radius: 5px;
    background-image: url(../../../image/jp/r1/icon/icon_link_right_l_hd.gif);
    background-repeat: no-repeat;
    background-position: right 2px center;
	background-size: 16px 16px;
	text-decoration: none;
	height: 100%;
    height: 100%;
    box-sizing: border-box;
}
.contact_button > ul >li a span{
    flex-grow: 1;
}
.contact_button > ul >li a span:last-child{
	display:flex;
    flex-direction: column;
    flex-grow: 2;
	line-height: 1.5;
	color: #333;
}
.contact_button > ul >li a span > *{
	margin-bottom: 0;
	text-decoration: none;
	font-style: normal;
}
.contact_button > ul >li a:hover{
    background-position: right 0 center;
	background-color: #F2F2F2;
}
.contact_button > ul >li a img{
	margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
	.contact_button > ul{
		display: flex;
		margin-left: -15px;
		margin-bottom: 15px;
	}
	.contact_button > ul >li{
		margin: 0 0 0 15px;
		width: calc((100% - 15px) / 2 ); 
	}
	.contact_button > ul >li a{
		font-size: 100%;
	    flex-direction: row;
		padding:15px;
	}
	.contact_button > ul >li a img{
		margin: 0 ;
	}
	.contact_button > ul >li a span {
		width: 30%;
	}
	.contact_button > ul >li a span:last-child {
		align-items: flex-start;
		width: 70%;
	}
}

.Col4Box {
	display: flex;
	flex-wrap: wrap;
	margin-left:-15px;
}
.Col4Box > * {
	display: inline-block;
    margin-bottom: 15px;
    margin-left: 15px;
    width: calc((100% / 2) - 15px );
}
.Col4Box .col1 {
	width: calc((100% / 2) - 15px);   
}
.Col4Box .col2 {
	width: 100%;
}
.Col4Box .col3 {
	width: 100%;
}
.Col4Box .col4 {
	width: 100%;
}
@media screen and (min-width: 768px) {
    .Col4Box .col1 {
        width: calc((100% / 4) - 15px);   
    }
    .Col4Box .col2 {
        width: calc(((100% / 4) * 2) - 15px);
    }
    .Col4Box .col3 {
        width: calc(((100% / 4) * 3) - 15px);
    }
    .Col4Box .col4 {
        width: 100%;
    }
}

.rich.individual .bg_section{
	background-color: #D6E9F5;
}
.rich.individual .bg_section .inner_box.lineup{
	padding: 10px 5px 10px 15px;
    margin-bottom: 5px;
	display: flex;
	align-items: center;
}
.rich.individual .bg_section .inner_box.lineup:last-of-type{
    margin-bottom: 25px;
}
.rich.individual .bg_section .inner_box.lineup dt{
	width: 80px;
}
.rich.individual .bg_section .inner_box.lineup dd{
	width: calc(100% - 80px);
}
.rich.individual .bg_section .inner_box.lineup dt h3{
	margin-bottom: 0;
	color: #569FD1;
}
.rich.individual .bg_section .inner_box.lineup dd img{
	border: #ccc solid 1px;
}
.rich.individual .bg_section .inner_box.lineup dd h4{
	margin-bottom: 5px;
}
.rich.individual .bg_section .inner_box.lineup dd h4 span{
	display: inline-block;
	font-size: .76rem;
	font-weight: 400;
	padding: 0 5px;
}
.rich.individual .bg_section .inner_box.lineup dd h4 span.seido{
	color: #FFF;
	background-color: #666666;
}
.rich.individual .bg_section .inner_box.lineup dd h4 span.discount{
	color: #F2635F;
	border: #F2635F solid 1px;
}
.rich.individual .bg_section .inner_box.lineup dd h4 > *{
	margin-bottom: 5px;
}
.rich.individual .bg_section .inner_box.lineup dd h4 > *:last-child{
	margin-bottom: 0;
}
.rich.individual .bg_section .inner_box.lineup dd ul li{
	display: flex;
	align-items: center;
}
.rich.individual .bg_section .inner_box.lineup dd ul li:nth-of-type(n+2){
	border-top: solid 1px #D6E9F5;
	margin-top: 10px;
	padding: 10px 0 0;
}
.rich.individual .bg_section .inner_box.lineup dd ul li > *{
	width: 65px;
}
.rich.individual .bg_section .inner_box.lineup dd ul li > *:last-of-type{
	width: calc(100% - 65px);
}
.rich.individual .bg_section .inner_box.lineup dd ul li > * .TextStyle2{
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.rich.individual .bg_section .inner_box.lineup dt{
		width: 100px;
	}
	.rich.individual .bg_section .inner_box.lineup dd{
		width: calc(100% - 100px);
	}
	.rich.individual .bg_section .inner_box.lineup dd h4{
		width: 240px;
		display: inline-block;
		margin-bottom: 0px;
	}
	.rich.individual .bg_section .inner_box.lineup dd ul li > *{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.rich.individual .bg_section .inner_box.lineup dd ul li > *{
		width: 75px;
	}
	.rich.individual .bg_section .inner_box.lineup dd ul li > *:last-of-type{
		width: calc(100% - 75px);
	}
}

/* products/form 
======================================================= */
.bgFormTop{
	background: url(../../group/products/images/bg_formAreaT.gif) no-repeat left top;
	width: 570px;
	padding:5px 0 0 0;
}

 .bgFormBottom{
	background: url(../../group/products/images/bg_formAreaB.gif) no-repeat left bottom;
	width: 570px;
	padding:0 0 5px 0;
}

 .bgForm{
	background: url(../../group/products/images/bg_formAreaM.gif) repeat-y;
	width: 570px;
	margin: 0 auto 15px;
}

div .FormAreaM{
	width: 560px;
	padding:0 5px;
}

.bgForm p.ImgOnlyStyle {
	margin-bottom: 0;
}

div .FormAreaM tabel{
	border:0;
}

.FormAreaM th{
	border-width:0 1px 0 0;
	border-style:dotted;
	border-color:#CCCCCC;
}

.FormAreaM td{
	border-width:0;
}

.FormAreaM .cell1{
	background: url(../images/site/bg_formCell01.jpg) repeat-x left bottom;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #F00;
}

.FormAreaM .cell2{
	background: url(../images/site/bg_formCell01.jpg) repeat-x left bottom;
}

.FormAreaM .cell2 .spanR{
	width:300px;
	color:#F00;
	font-size:90%;
	line-height:1.2em;
}

.FormAreaM .cell4{
	background: url(../images/site/bg_formCell04.jpg) no-repeat;
	background-repeat:no-repeat;
	vertical-align: text-top;
	background-position: left bottom;
}

.FormAreaM .cell4 span{
	display:block;

}

.FormAreaM .cell5{
	background: url(../images/site/bg_formCell04.jpg) repeat-x right bottom;
	vertical-align: text-top;
}

.FormAreaM .cell6{
	background: url(../images/site/bg_formCell05.jpg) repeat-x left bottom;
	vertical-align: text-top;
}

.FormAreaM .cell7{
	background: url(../images/site/bg_formCell07.jpg) repeat-x left bottom;
	vertical-align:text-top;
}

div .FormAreaM2{
	border-width:0 1px;
	border-style:solid;
	border-color:#D8D7C5;
	padding:20px 10px 10px 10px;
	background:url(../../group/products/images/bg_formAreaT2.gif) no-repeat left top;
}

.FormAreaM2 table{
	width:100%;
}

.FormAreaM2 caption
{ display: none; }


.FormAreaM2 table th {
	background-color:#9C927A;
	color: #FFFFFF;
	font-weight:bold;
	border-width:1px 2px 1px 1px;
	border-style:solid;
	border-color:#D6D5C0;
	vertical-align: top;	
}

.FormAreaM2 table td {
	background-color:#FFFFFF;
	color: #000000;
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:#9C927A;
	vertical-align: top;
	text-align:center;
}

.FormAreaM2.cell02{  
	border-width:1px 1px 1px 0;
	border-style:solid;	
	border-color:#9C927A;	
}

.FormAreaM2 .cell01{ 
	background-color:#EAEADF;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #9C927A;
	color:#000000;
}

.FormAreaM2 .cell03{
	border:none;
	background-color:#FFFFFF;
}

.FormAreaM2 .cell04{
	border-color:#9C927A;
	border-width: 1px 1px 1px 1px;
}

.FormAreaM2 .deActive{
	background-color:#EEEEEE;
	color:#CCCCCC;
}

.FormAreaM2 h3{
	margin:0;
	padding:0;
	border:none;
	line-height:0;
	font-size:0;
	cursor:pointer;
}

.FormAreaM2 .closeArea{
	width:518px;
	margin:0 0 20px 0;
	padding:10px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:0 1px 1px 1px;
}



th.result{
	background-color:#FFCC33 !important;
	border:1px solid #9C927B !important;
	text-align:center !important;
	color: #000 !important;
}
td.deActive{
	background-color:#EEEEEE;
	color:#CCCCCC;
}


/* products/maruki 
======================================================= */

.IndexBox .IndexList{
	margin:10px 0;
	font-size:90%;
	text-align:left;
}

.IndexBox .IndexList li{
	margin:0 0 10px 0;
}

.IndexBox .BorderSolidBottom{
	border-bottom:1px solid #E4E2D6;
}

/* Life Stage Table Style6を流用
======================================================= */

table.TableStyle6 th.brwnPale{
	background:#EAEADF;
	text-align:center;
}
table.TableStyle6 td.brwnPale{
	background:#EAEADF;
	font-weight:bold;
	text-align:left;
}
table.TableStyle6 th.brwnDeep,
table.TableStyle6 th.brwnDeepLast{
	background:#9C927A;
	font-weight:bold;
	color:#FFF;
	vertical-align:top !important;		
}
table.TableStyle6 th.brwnDeep{
	border-bottom:1px solid #D6D5C0;
}
table.TableStyle6 th.brwnDeepLast{
	border-bottom:1px solid #D6D5C0;
}


table.TableStyle6 td{
	text-align:center;
}

.BorderArea{
	padding:10px;
	border:1px solid #cccccc;
	font-size:90%;
}


/* individual/leisure/abroad.html
======================================================= */

ul.hkn_abroad01 li {
text-align: right;
padding: 10px 0;
}
ul.hkn_abroad01 li span { 
padding: 10px 0 10px 5em;
}
ul.hkn_abroad01 li.hkn_abroad01-1{
text-align: left;
padding-left: 10%;
}
table.hkn_abroad02 th.sum {width: 40%;}
table.hkn_abroad02 th.yen {width: 40%;}
@media screen and (max-width: 994px) {
	.JS ul.hkn_abroad01 li span {
	padding: 10px 0 10px 1.5em;
	}
}
@media screen and (max-width: 579px) {
	.JS ul.hkn_abroad01 li.hkn_abroad01-1{
	text-align: center;
	padding: 0;
	}
	.JS ul.hkn_abroad01 li {
	text-align: center;
	padding: 10px 0 5px;
	}
	.JS ul.hkn_abroad01 li span {
	display: block;
	padding: 0 0 10px;
	}
}
@media screen and (max-width: 399px) {
	.JS table.hkn_abroad02 th.sum {width: 45%;}
	.JS table.hkn_abroad02 th.yen {width: 45%;}
}


/* residence/earthquake
======================================================= */
.hkn_earthquake01 dt {
float: left;
clear: left;
width: 4em;
text-align: center;
background-color: #fbcdd5;
border-radius: 5px;
color: #ff0000;
padding: 0.5em 0;
font-size: 90%;
font-weight: bold;
}
.hkn_earthquake01 dd {
margin: -2.75em 0 5px 4.75em;
float: left;
clear: both;
font-size: 90%;
}
.hkn_earthquake02{
background-color:#f1f1eb;
border: 2px solid #d9d9c5;
border-radius: 5px;
padding: 10px 10px 0;
margin-bottom: 15px;
}
@media screen and (min-width: 768px) {
	.hkn_earthquake02{
		border: 3px solid #d9d9c5;
		padding: 15px 15px 0;
	}
	.hkn_earthquake02 strong {
		display: inline-block;
		padding: 0 0 10px;
		font-size: 1rem;
	}
} 

.hkn_earthquake03 {
width: 474px;
margin: 0 auto;
}
.hkn_earthquake03 p {padding: 0;}
.hkn_earthquake03 .ImgLeftAdjust {margin: 0 30px 0 0;}
.hkn_earthquake03 .ImgLeftAdjust img {padding-top: 30px;}
.hkn_earthquake03 .btn {text-align: center;}

@media screen and (max-width: 579px) {
	.JS .hkn_earthquake03 {width: auto;}
	.JS .hkn_earthquake03 .title {line-height: 40px;}
	.JS .hkn_earthquake03 .ImgLeftAdjust img {padding-top: 0;}
} /* //for 579px */



/* individual/medical
======================================================= */

/*　PageTitleArea　*/
.medical_ever .img{width: 188px;}
.medical_ever .title {width: calc(100% - 350px);}
@media screen and (max-width: 579px) {
	.JS .medical_ever .title {width: calc(100% - 198px);}
} /* //for 579px */


/* individual/medical/plus
======================================================= */
.rich .BoxPatternA                                    { background-color: #F2E8F5;}
.plus .rich .BoxPatternA > *:nth-child(1)             { background-color: #925A97;}
.plus .rich .bg_section .BoxPatternA > *:nth-child(1) { background-color: #E5D3EB;}
.plus .rich .bg_section .inner_box h4                 { color: #925A97;}
.plus .rich .point_ttl                                { color: #925A97;}
.plus .rich .point_ttl span                           { border-color: #925A97;}
.plus .rich .bg_section                               { background-color: #F2E8F5;}
.plus .rich .bg_section dl.listA > dt                 { background-color: #925A97;}
.plus .rich .bg_section .CardListA > dl > dt          { background-color: #E5D3EB;}
.plus .rich .bg_section .CardListA > dl > dt > span   { background-color: #925A97;}


/* individual/car
======================================================= */

/*　PageTitleArea　*/
.car_liability .title {width: calc(100% - 390px);}
.car_liability .btn {width: 260px;text-align: center;}
.car_liability .btn .LinkListStyle2 {margin: 2px 0 0;}



/*　accordion Note　*/
.hkn_car01 .accordionNote {
padding-right:17px!important;
}
.hkn_car01 .note_more {
display: none;
padding: 0;
border: none;
text-align: left;
}
.hkn_car01 .note_more div {
background-color: #E1E1E1;
padding:15px 0 5px;
margin: 0 15px 15px;
}

/*  ご自身でご契約のお手続きをする バナー */
.btnStyleBorder p { 
	background-position: right 5px center;
	background-size: 16px;
	background-repeat: no-repeat;
}
.btnStyleBorder:hover p { 
	/* border: solid #c02 1px; */
	background-color: #ccc;
}
.car_bnr_by_yourself p {
	margin-left: -4px;
	display: block;
}
.car_bnr_by_yourself:hover p{
	background-color: #ccc;
}
.car_bnr_by_yourself:hover p img{
	opacity: 0.7;
}

@media screen and (max-width: 767px) {
	.car_bnr_by_yourself p {
		border: 1px solid #CCCCCC;
		padding: 10px 0;
		margin-left: 0 ;
	}
	.car_bnr_by_yourself:hover p img{
		opacity: 1;
	}

} 


/* other
======================================================= */
.ImgOnlyStyle img.btnSimulation {
margin-right: 30px;
}
.ImgOnlyStyle img.btnStep {}