@charset "shift_jis";


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

Name: magazine.css

Description: Setting of  magazine common page

Create: 2015.05.19
Update: 2015.06.03

Copyright 2015 Hitachi, Ltd. 

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


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


[m99] 共通

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

/*170509追加　ニュースリリース用サブタイトル調整テスト

.PageTitleStyle1 .SubTitleNR {
	margin: 0;
	font-size: 65%;
	line-height: bottom;
	color: #777;
	float: right;

}
.PageTitleStyle1 .SubTitleNR strong {color: #777;}*/




/*ススメ　サブタイトル調整*/

.PageTitleStyle.Susume  p.TextStyle1.mb0 {
	margin-bottom: 0.1em;
}


/*マガジン用フロート調整*/

div.Grid3 div.ImgW260SetStyle div.ImgSet,
div.Grid4 div.Column3 div.ImgW260SetStyle div.ImgSet { width: 445px; }
div.Grid3 div.ImgW360SetStyle div.ImgSet,
div.Grid4 div.Column3 div.ImgW360SetStyle div.ImgSet { width: 345px; }


/*マガジン用サイドエリア調整*/
.Grid1 {
	padding-top: 0;
}
.Under995 .Grid1 {
	padding-top: 0;
}

/*
.Grid1 .BoxPatternC {
	margin-top: 0!important;
	
	}
*/
div.SusumePager {
  margin: 0 0 15px;
  background: url("/it-pf/mag/susume/image/bg_susume_pager.gif") no-repeat 0 0;
  height: 105px;
}



/* [m99] 共通
=========================================================================================== */

/*ポップアップMove*/
div.MovieWindow {
/*	max-width: 100%;
	height:100%;*/
	margin: 0 auto;
	padding:3em;
	}
div.MovieWindow iframe { margin: 0 auto; max-width: 100%; min-height:100%;}

div.ConversationStyle1,
div.ConversationStyle2 {
	margin: 0 0 10px;
}
div.ConversationStyle1 p.Img,
div.ConversationStyle2 p.Img {
	float: left;
	width: 100px;
	margin: 0 20px 0 0;
}



.Bold {font-weight: bold;}


p.ImgRight {
 	display: block;
	position: absolute; 
	bottom: 0;
	right: 0;
	max-width: 100%;
	height: auto;
	margin: .4em;
}


/*2019.6.11*/
/*枠組み内 ol の余白調整*/

.BoxPatternA ol,
.BoxPatternB ol,
.BoxPatternC ol {
    margin-bottom: 10px;
    padding-left: 2.8em;
    padding-right: 15px;
}








/*========[標準記事タイトル]========*/
/*===========================*/
/*=========[Default_Style]=========*/
/*===========================*/


.PageTitleStyle {
	position: relative;
	padding: .5em;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
}

.PageTitleStyle:after { 
	content: "";
	clear: both;
	display: block;
}

.PageTitleStyle h1 {
	font-weight: bold; 
	font-size: 160%; 
	display: block;
}

.PageTitleStyle h1 a:hover {
	color: #666;
}

.PageTitleStyle ul li {
	float: right; 
	margin: .3em;
}


/*=========[日立ID会員サービス タイトル]=========*/
h2 span.Hjid {
    padding: 0 0 3px 0;
    font-size: 85%;
}


/*=============================*/
/*==========[Next_Prev_Btn]=========*/
/*=============================*/

#Contents button {
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-weight: bold;
}

div#btn_parts { 
	max-width: 100%; 
	margin: 0 auto;
	position: relative;
}

div.btn_group { max-width: 100%;}

div.btn_group .btn_page { max-width: 25%;}

div.btn_group_No {
	width: 100%; 
	margin: 0 auto;
	text-align: center;
}

.btn_group_No div { 
	margin: 0 auto;
/*	min-width: 320px;*/
	display: inline-block; 
}

button.btn_page_L,
button.btn_page_R {
	width: 25%; 
	cursor: pointer; 
	background: #e5e5e5; 
	border: 2px solid #c9c9c9;
	padding:.75em 1.2em; 
	margin: .3em; 
}
/*ページラストのボタン非表示設定*/
button.btn_page_R.Last,
button.btn_page_R.Last:hover,
button.btn_page_R.Last:active {
	outline: none;
	width: 25%; 
	cursor:default; 
	background-color: transparent ; 
	border: none;
	padding:.75em 1.2em; 
	margin: .3em; 
	box-shadow:none;
}
/* ページラストのボタン非活性表示設定(20150724) */
button.btn_page_R_disabled{
	border-radius: 2px;
	box-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.3);
}
button.btn_page_R_disabled{
	float: right;
}
button.btn_page_R_disabled{
	width: 25%;
	background: #E5E5E5 none repeat scroll 0% 0%;
	border: 2px solid #C9C9C9;
	padding: 0.75em 1.2em;
	margin: 0.3em;
}

/*==========[Next_Prev_Btn2]=========*/
/*========== (2015.7.24追加)=========*/
div.btn_group2 { max-width: 100%;}

div.btn_group2 .btn_page { max-width: 45%;}

button.btn_page_L2,
button.btn_page_R2 {
	width: 45%; 
	cursor: pointer; 
	background: #e5e5e5; 
	border: 2px solid #c9c9c9;
	padding:.75em 1.2em; 
	margin: .3em; 
	margin-bottom: 3em;
}
/*ページラストのボタン非表示設定*/
button.btn_page_R.Last2,
button.btn_page_R.Last2:hover,
button.btn_page_R.Last2:active {
	outline: none;
	width: 45%; 
	cursor:default; 
	background-color: transparent ; 
	border: none;
	padding:.75em 1.2em; 
	margin: .3em; 
	margin-bottom: 3em;
	box-shadow:none;
}
/* ページラストのボタン非活性表示設定(20150724) */
button.btn_page_R_disabled2{
	border-radius: 2px;
	box-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.3);
}
button.btn_page_R_disabled2{
	float: right;
}
button.btn_page_R_disabled2{
	width: 45%;
	background: #E5E5E5 none repeat scroll 0% 0%;
	border: 2px solid #C9C9C9;
	padding: 0.75em 1.2em;
	margin: 0.3em;
	margin-bottom: 3em;
}

button.btn_page_L,
button.btn_page_L2 {float: left;}

button.btn_page_R,
button.btn_page_R2 {float: right;}

button.btn_page_L:after,
button.btn_page_R:after,
button.btn_page_L2:after,
button.btn_page_R2:after {clear: both;}


/*=============================*/
/*=======[No._Btn]=======*/
/*=============================*/

button.btn_page:active,
button.btn_page:hover,
button.btn_page_L:active,
button.btn_page_R:active,
button.btn_page_L:hover,
button.btn_page_R:hover,
button.btn_page_L2:active,
button.btn_page_R2:active,
button.btn_page_L2:hover,
button.btn_page_R2:hover {
	background: #2b86ad; 
	color: #fff;
	border: 2px solid #aaa; 
}

button.btn_page { 
	cursor: pointer; 
	background: #e5e5e5; 
	border: 2px solid #c9c9c9; 
	padding:.75em 1.2em; 
	float: left; 
	margin: .3em;
}

button.btn_page.current {
	background: #2b86ad; 
	color: #fff; 
	cursor: default;
	border: 2px solid #aaa; 

}

button.btn_page_L,
button.btn_page_R ,
button.btn_page_L2,
button.btn_page_R2 ,
button.btn_page,
button.btn_page.current {
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	-webkit-box-shadow: 0px 0px 0.5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 0.5px rgba(0,0,0,0.3);
	-ms-box-shadow: 0px 0px 0.5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 0.5px rgba(0,0,0,0.3);
}


/*=======================================================*/
/*[@media screen width:934px]*/
/*=======================================================*/

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

		.btn_group_No:after,
		.btn_group:after {
			content: "";
			display: block;
			clear: both;
			float: none;
	}
	button.btn_page { 
		padding:.75em 1em; 
		float: none; 
		margin: .3em;
	}
}

/*=======================================================*/
/*[END_OF_@media screen width:934px]*/
/*=======================================================*/


/*=======================================================*/
/*[@media screen width:767px]*/
/*=======================================================*/

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


body {background-color: #fff!important;}

/*topic_path*/
div#TopicPath {padding-top: 1em;}
div#TopicPath ul { 
	display: none;

}

/*icon_resize*/
	p.Img img { 
		width: 75%; 
		height: auto;
	}

/*fukidasi*/

	div.ConversationStyle1,
	div.ConversationStyle2 {width: 100%!important;}
	div.ConversationStyle1 div.ImgSet,
/*	div.ConversationStyle2 div.ImgSet { width: 90%!important; }*/
	div.ConversationStyle2 div.ImgSet { width: 100%!important; }
/*title_mod*/	
	.PageTitleStyle h1 {
		font-weight: bold;
		font-size: 120%!important; 
		display: block;
		width:90%!important;
		float: none!important;
		line-height: 130%; 
		}

	p.ImgRight img {	
		max-width: 100%!important; 
		height: auto;
	}


	/*ojyousama_cin&sin_btn*/
	.btn_group { max-width: 70%;}
		button.btn_page_L,
		button.btn_page_R {width: 35%!important;}
		.btn_group_No:after,
		.btn_group:after {
			content: "";
			display: block;
			clear: both;
	}

}
/*=======================================================*/
/*[END_OF_@media screen width:767px]*/
/*=======================================================*/


/*=======================================================*/
/*[@media screen width:579px]*/
/*=======================================================*/

@media screen and (max-width:579px){
	p.ImgRight img {	
		max-width: 80%!important; 
		height: auto;
	}

	p.ImgRight img.Jii {display: none;}

	button.btn_page { 
		padding:.75em 1.02em!important; 
		float: none; 
		margin: .3em;
	}

}

/*=======================================================*/
/*[END_OF_@media screen width:579px]*/
/*=======================================================*/