@charset "Shift_JIS";

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

Name: life.css

Description: Setting of content module

Create: 2017.02

Copyright 2017 Hitachi Life, Ltd. 

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



/* content===========================================

[c11-7] リンクリスト
[c14] Data Table
[c16] Box
[] 汎用

===================================================== */






/* [c11-7] リンクリスト
=========================================================================================== */


/* ---[c11-7-1] リンクリスト > サムネール+説明文あり > サムネール100pix > 文字サイズ90%--- */

/*
.ImgW60SetStyle .ImgSet dl,
.ImgW60SetStyle .ImgSet ul,
.ImgW60SetStyle .ImgSet ol,
.ImgW60SetStyle .ImgSet p {margin-left: 80px;}
.ImgW120SetStyle .ImgSet dl,
.ImgW120SetStyle .ImgSet ul,
.ImgW120SetStyle .ImgSet ol,
.ImgW120SetStyle .ImgSet p {margin-left: 140px;}
.ImgW180SetStyle .ImgSet dl,
.ImgW180SetStyle .ImgSet ul,
.ImgW180SetStyle .ImgSet ol,
.ImgW180SetStyle .ImgSet p {margin-left: 200px;}
.ImgW230SetStyle .ImgSet dl,
.ImgW230SetStyle .ImgSet ul,
.ImgW230SetStyle .ImgSet ol,
.ImgW230SetStyle .ImgSet p {margin-left: 250px;}
*/


/* --- [c11-5-1-1] Link List > Thumbnail + Descriptive Text > Thumbnail 60px > Text Size 90% --- */
/* --- [c11-5-1-2] Link List > Thumbnail + Descriptive Text > Thumbnail 60px > Text Size 83% --- */
/* --- [c11-5-2-1] Link List > Thumbnail + Descriptive Text > Thumbnail 120px > Text Size 90% --- */
/* --- [c11-5-2-2] Link List > Thumbnail + Descriptive Text > Thumbnail 120px > Text Size 83% --- */
/* --- [c11-5-3-1] Link List > Thumbnail + Descriptive Text > Thumbnail 180px > Text Size 90% --- */
/* --- [c11-5-3-2] Link List > Thumbnail + Descriptive Text > Thumbnail 180px > Text Size 83% --- */
/* --- [c11-5-4-1] Link List > Thumbnail + Descriptive Text > Thumbnail 230px > Text Size 90% --- */
/* --- [c11-5-4-2] Link List > Thumbnail + Descriptive Text > Thumbnail 230px > Text Size 83% --- */

.ImgW60SetStyle .Img,
.ImgW120SetStyle .Img,
.ImgW180SetStyle .Img,
.ImgW210SetStyle .Img,
.ImgW230SetStyle .Img{
	float: left;
	padding: 0 20px 15px 0;
}

.ImgW60SetStyle .Img {width: 60px;}
.ImgW120SetStyle .Img {width: 120px;}
.ImgW180SetStyle .Img {width: 180px;}
.ImgW210SetStyle .Img {width: 210px;}
.ImgW230SetStyle .Img {width: 230px;}

.ImgW60SetStyle .ImgSet,
.ImgW120SetStyle .ImgSet,
.ImgW180SetStyle .ImgSet,
.ImgW210SetStyle .ImgSet,
.ImgW230SetStyle .ImgSet{
	float: none !important;
	width: auto !important;
	margin-left: 0 !important;
	overflow: hidden !important;
	zoom: 1;
}
.ImgW60SetStyle .ImgSet dl,
.ImgW120SetStyle .ImgSet dl,
.ImgW180SetStyle .ImgSet dl,
.ImgW210SetStyle .ImgSet dl,
.ImgW230SetStyle .ImgSet dl { margin-left: 0 !important; }

/* [c14] Data Table
=========================================================================================== */

/* プログラム紹介 */
td.stripeColor {
	background-color: #ffffcc;
}

/* IE8で使えなかった
.stripeTable tr:nth-child(odd){ background-color: #ffffcc; }
*/

/* 各種変更手続きほか */
th.bgColor1,
td.bgColor1 {
	background-color: #ffee99 !important;
}
/* 入会のご案内 */
th.bgColor2,
td.bgColor2 {
	background-color: #d9f0db !important;
}
th.bgColor3,
td.bgColor3 {
	background-color: #d8e6ff !important;
}

table.layoutTable tr th,
table.layoutTable tr td {
    border: none;
    padding: 0 10px 2px 0;
	font-size: 90% !important;
}



/* [c16] Box
=========================================================================================== */
.BoxPatternA ol,
.BoxPatternB ol,
.BoxPatternC ol {
	margin-bottom: 10px;
	margin-left: 15px;
	padding-right: 15px;
}
.BoxPatternB table {
	margin: 0 15px 10px;
}
.BoxPatternB table th,
.BoxPatternB table td {
    border: none;
    padding: 0 10px 2px 0;
    background-color: #f2f2f2;
}
.BoxPatternB table.TableStyle2 caption {
	margin: 0;
    padding: 0;
}
/*
[class^='BoxPattern'] .ImgLeftAdjust .ImgOnlyStyle {
	padding-right: 0;
}
[class^='BoxPattern'] .ImgLeftAdjust + p {
	padding-left: 0;
}
[class^='BoxPattern'] .ImgRightAdjust .ImgOnlyStyle {
	padding-left: 0;
}
*/
.BoxPatternA > div > div[class^="ImgW"] .Img,
.BoxPatternB > div > div[class^="ImgW"] .Img,
.BoxPatternC > div[class^="ImgW"] .Img {
	padding-left: 15px;
}
.BoxPatternA > div > div[class^="ImgW"] .ImgSet p,
.BoxPatternB > div > div[class^="ImgW"] .ImgSet p,
.BoxPatternC > div[class^="ImgW"] .ImgSet p,
.BoxPatternA > div > div[class^="ImgW"] .ImgSet ul,
.BoxPatternB > div > div[class^="ImgW"] .ImgSet ul,
.BoxPatternC > div[class^="ImgW"] .ImgSet ul,
.BoxPatternA > div > div[class^="ImgW"] .ImgSet dl,
.BoxPatternB > div > div[class^="ImgW"] .ImgSet dl,
.BoxPatternC > div[class^="ImgW"] .ImgSet dl {
	padding-left: 0;
	padding-right: 0;
	margin-right: 15px;
}
.BoxPatternA .ImgLeftAdjust p,
.BoxPatternB .ImgLeftAdjust p,
.BoxPatternC .ImgLeftAdjust p {
	padding-right: 0;
}

/* [] 地図レスポンシブ
=========================================================================================== */
.iframe_responsive {
    padding: 75% 0 0;
    position: relative;
    width: 100%;
}
.iframe_responsive iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* [] 汎用
=========================================================================================== */

.marginTopM05 {
	margin-top: -5px !important;
}

.marginBtm15 {
	margin-bottom: 15px !important;
}
.marginBtm30 {
	margin-bottom: 30px !important;
}


/* for - 994px
=========================================================================================== */

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

	/* ------ Box ------ */
	.JS .BoxPatternA > div > div[class^="ImgW"] .Img,
	.JS .BoxPatternB > div > div[class^="ImgW"] .Img,
	.JS .BoxPatternC > div[class^="ImgW"] .Img {
		padding-left: 0;
	}

}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
	/* ------ Image ------ */

	.JS .ImgLeftAdjust.w230,
	.JS .ImgRightAdjust.w230 {
		width: 100% !important;
	}

	.JS .ImgOnlyStyle {
		text-align: center;
	}

	.JS .BoxPatternA .ImgLeftAdjust p,
	.JS .BoxPatternB .ImgLeftAdjust p,
	.JS .BoxPatternC .ImgLeftAdjust p {
		padding-right: 15px;
	}

}


/* for - 579px
=========================================================================================== */

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

	.JS .movie iframe {
		width: 100%;
		height: auto;
	}
    
    .JS .BoxPatternA .ImgSet p,
	.JS .BoxPatternB .ImgSet p,
	.JS .BoxPatternC .ImgSet p,
    .JS .BoxPatternA .ImgSet ul,
	.JS .BoxPatternB .ImgSet ul,
	.JS .BoxPatternC .ImgSet ul{
		padding-left: 15px !important;
	}

}


/* for - 399px
=========================================================================================== */

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

	.JS .ImgLeftAdjust .ImgOnlyStyle img,
	.JS .ImgRightAdjust .ImgOnlyStyle img {
		width: 100%;
		height: auto;
	}
	.JS .movie iframe {
		width: 100%;
		height: auto;
	}

}