@charset "shift_jis";


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

Name: susume.css

Description: Setting of  Susume page

Create: 2015.05.19
Update: 2015.06.08

Copyright 2015 Hitachi, Ltd. 

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


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

[m0] ストレージマガジン

[m2] ストレージ管理のススメ

[m99] 共通

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


/* [m0] ストレージマガジン
=========================================================================================== */

/*--プロフィール--*/
.ConversationStyle.Susume {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 1em;
	background: #ECF2DA;
	border: 2px solid #ACCC73!important;
	border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.ConversationStyle.Susume img {
	padding: .25em;
	position: relative;
	float: left;
	max-width: 100%;
	margin: 0 20px 0 0;
	z-index: 1
}

.ConversationStyle.Susume .ImgSet div{
	z-index: 1;
	padding: 1em 1em 1em 8em;
	
	} 

.TextStyle1.Name {
	font-weight: bold;
	margin: 0 0 .25em;
	font-size: 100%;

}

/*-- SNS 設定 --*/
div#BtnFb,
div#BtnTw {
	float: right;
	margin: .2em;
}

#BtnTw:after {

	content: "";
	display: block;
	clear: both;
}

div#BtnSocial {}
div#BtnSocial:after {
	content: "";
	display: block;
	clear: both;
}


/*--- お任せ、ススメのタイトル、各回メモ ---*/
div#MagazineTop div.ColumnOmakase h2,
div#MagazineTop div.ColumnOmakase p,
div#MagazineTop div.ColumnSusume h2,
div#MagazineTop div.ColumnSusume p {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

div#MagazineTop div.ColumnOmakase h2 img,
div#MagazineTop div.ColumnOmakase p img,
div#MagazineTop div.ColumnSusume h2 img,
div#MagazineTop div.ColumnSusume p img { vertical-align: bottom; }

/*-- バックナンバー追加 --*/
div#MagazineTop div.ColumnOmakase p { position: relative; }
div#MagazineTop div.ColumnOmakase p span.BackNumber {
	position: absolute;
	left: 50px;
	bottom: 0;
}
div#MagazineTop div.ColumnOmakase p span.BackNumber img { vertical-align: bottom; }
div#MagazineTop div.ColumnSusume p { position: relative; }
div#MagazineTop div.ColumnSusume p span.BackNumber {
	position: absolute;
	left: 0;
	bottom: 0;
}
div#MagazineTop div.ColumnSusume p span.BackNumber img { vertical-align: bottom; }

/*--- これまでの特集記事 ---*/
div#MagazineTop p#BtnPressroomSpecial {
	position: absolute;
	left: 414px;
	top: 693px;
}
div#MagazineTop p#BtnPressroomSpecial img { vertical-align: bottom; }


/*--- ピックアップコンテンツ 導入事例、製品情報 ---*/
div.BoxPatternA.MagazinePickup {
	margin: 0 0 15px;
	padding: 25px 0 0;
	background: url("/it-pf/mag/susume/image/bg_magazine_pickup_top.jpg") no-repeat 0 0;
	zoom: 1;
}
div.BoxPatternA.MagazinePickup h2.Image {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	text-align: center;
}
div.BoxPatternA.MagazinePickup h2.Image img { vertical-align: bottom; }
div.BoxPatternA.MagazinePickup div.Inner {
	padding: 11px 6px 15px 5px;
	border: none;
	background: url("/it-pf/mag/susume/image/bg_magazine_pickup_bottom.jpg") no-repeat 0 100%;
}
div.BoxPatternA.MagazinePickup div.Inner p.ImgOnlyStyle { margin-bottom: 10px; }
div.BoxPatternA.MagazinePickup div.Inner p.TextStyle1 {
	margin: 0;
	padding: 0 5px 0 6px;
}

/*--- HitachiSS Twitterウィジェット ---*/
div#Timeline { border: 8px solid #f9df7d; }

/*---文字画像の横中央揃え---*/
p.TextStyle1.Middle,
p.TextStyle1.Middle img { vertical-align:middle;}


/* [m2] ストレージ管理のススメ
=========================================================================================== */
/*--- ページタイトル+SNSBtn ---*/
#SusumeTopPageTitle { position: relative; }
#SusumeTopPageTitle #BtnFb,
#SusumeTopPageTitle #BtnTw {
	position: absolute;
	top: 240px;
}
#SusumeTopPageTitle #BtnFb { left: 500px; }
#SusumeTopPageTitle #BtnTw { left: 620px; }


/*--- 登場じんぶつ紹介 ---*/
#SusumeCharacterProfile {
	width: 633px;
	padding: 20px 16px 0 10px;
	height: 292px;
	margin: 0 auto 15px;
	background: url("/it-pf/mag/susume/image/bg_susume_profile.gif") no-repeat 0 0;
}
#SusumeCharacterProfile div.ImgSetStyleSusume p.Img { float: left; }
#SusumeCharacterProfile div.ImgSetStyleSusume div.ImgSet { float: right; }
#SusumeCharacterProfile div.ImgSetStyleSusume dl { margin: 0 0 11px; }
#SusumeCharacterProfile div.ImgSetStyleSusume dl dt { margin: 0 0 11px; }

#Pchan {
	float: left;
	width: 311px;
}
#Pchan p.Img { padding-top: 85px; }
#Kouzu {
	float: right;
	width: 302px;
}
#Kouzu p.Img { padding-top: 10px; }


/*--- 下層ページのページタイトル+ページャ+SNS Btn ---*/
div#SusumePageTitle {
	position: relative;
	margin-bottom: 30px;
}
div#SusumePageTitle ul {
	position: absolute;
	top: 5px;
	left: 521px;
}
div#SusumePageTitle ul li {
	display: inline;
	margin-right: 12px;
}
div#SusumePageTitle #BtnFb,
div#SusumePageTitle #BtnTw {
	position: absolute;
	top: 115px;
}
div#SusumePageTitle #BtnFb { left: 500px; }
div#SusumePageTitle #BtnTw { left: 620px; }


/*--- ページ下のページャ ---*/
div.SusumePager {
	margin: 0 0 15px;
	height: 105px;
}

div.SusumePager ul {
	width: 301px;
	margin: 0 auto;
}

div.SusumePager ul li {
	display: inline;
	margin-right: 12px;
}

div.SusumePager ul li.LastItem { margin: 0; }

/*--- ススメ4回語注 ---*/
span#susume04note {
	font-size: 80%;
}



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

div.ConversationStyle1,
div.ConversationStyle2 {
	margin: 0 0 15px!important;
}

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;
}

/*---記事ページ設定---*/
.PageTitleStyle.Susume {
	position: relative;
	padding: .55em;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	background-image: url("/it-pf/image/title_bg.png");
	background-repeat: repeat;
	background-position: left top;
	-webkit-box-shadow: 2px -1px  2px  #bfbfbf;
	-moz-box-shadow: 2px -1px  2px  #bfbfbf;
	-ms-box-shadow: 2px -1px  2px  #bfbfbf;
	-o-box-shadow: 2px -1px  2px  #bfbfbf;
	box-shadow: 2px -1px  2px  #bfbfbf;
}

.PageTitleStyle.Susume h1 { padding:0 8em 0 0em;}

.PageTitleStyle.Susume h1:hover, 
.PageTitleStyle.Susume h1 a:hover { color:#333;}

.PageTitleStyle.Susume ul{
	position: absolute;
	bottom: 0 ;
	right: 0;
}

.PageTitleStyle ul li.Clip_01 {
  float: right;
  margin: .25em;
  right: 14%;
  top: 0;
}

.PageTitleStyle ul li.Clip_02 {
  float: right;
  margin: .25em;
  right: 0%;
  top: 0;
}

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

.PageTitleStyle.Susume  p.TextStyle1 {
	margin: 0 0 22px;
	word-break: break-word;
	padding: 0 12.5em 0 0;
}


.PageTitleStyle.Susume  p.TextStyle3 {
	margin: 0 0 0px;
	word-break: break-word;
	padding: 0 12.5em 0 0;
}


/*--目次設定--*/

.PageTitleStyle.IndexStyle {
	background-image: url("/it-pf/mag/susume/profile/image/susume_profile_bg.png");
	background-repeat: repeat;
	background-color: transparent;
	border: 3px solid #FFE66F;
	margin: 0 0 .5em 0; 
	padding: 1em 0 1.5em 1em;
	}
	
.PageTitleStyle.IndexStyle h1 {
	color: #2B6396;
	padding: .5em 0 1em;
	font-size: 180%;
	max-width: 100%;
	height: auto;
	margin-right: 4em;
}

.PageTitleStyle.IndexStyle h1 a:hover {color: #2B6396;}

.PageTitleStyle.IndexStyle p.ImgOnlyStyle,
.PageTitleStyle.IndexStyle p.ImgOnlyStyle img {margin:0;}

.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle {
	position:absolute;
	bottom:0;
	right:0;
	margin:0;
	padding:0;
	}
	
.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle img {
	margin: 0;
	padding: 0;
	}

/*--プロフィール設定--*/

.PageTitleStyle.Profile.B {
	background-image: url("/it-pf/mag/susume/profile/image/susume_profile_bg.png");
	background-repeat: repeat;
	background-color: transparent;
	border: 3px solid #FFE66F;
	margin: 0 0 .5em 0; 
	padding: 1em 0 0 1em;
}
	
.PageTitleStyle.Profile.B h1{
	padding: 0 3.5em 1.5em 0;
}

.PageTitleStyle.Profile.A {
	min-height: 160px;
}

.PageTitleStyle.Profile {
	background-image: url("/it-pf/mag/susume/image/title_bg.png");
	background-repeat: repeat;
	background-color: transparent;
	border: 2px solid #ccc, 2px solid #ccc, none, 2px solid #ccc;
	margin: 0 0 .5em 0; 
	padding: 1em 0 0 1em;
}
	
.PageTitleStyle.Profile h1 {
	color: #333;
	margin: 0 7em 0 0;
	padding: 0 .25em 1em 0;
	font-size: 180%;
}

.PageTitleStyle.Profile h1 a:hover {color: #333;}

.PageTitleStyle.Profile p.ImgOnlyStyle,
.PageTitleStyle.Profile p.ImgOnlyStyle img {margin:-.25em;}

.PageTitleStyle.Profile h1+p.ImgOnlyStyle {
	position:absolute;
	bottom:0;
	right:0;
	margin:0;
	padding:0;
	}
	
.PageTitleStyle.Profile h1+p.ImgOnlyStyle img {
	width: 80%;

	margin: 0;
	padding: 0;
}

.PageTitleStyle.Profile.B h1+p.ImgOnlyStyle img {
  width: 100%;
  margin: 0;
  padding: 0;
 }
  
  
/*吹き出し設定*/
div.ConversationStyle1,
div.ConversationStyle2,
div.ConversationStyle1 img,
div.ConversationStyle2 img { max-width: 100%; height: auto;}
div.ConversationStyle1 div.ImgSet div,
div.ConversationStyle2 div.ImgSet div {
	padding: 20px 20px 5px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

div.ConversationStyle1 div.ImgSet,
div.ConversationStyle2 div.ImgSet {
	float: left;
	width: 596px;
	border-radius: 10px;
}

div.ConversationStyle1 div.ImgSet {
	background: #F1FADB;
	border: 2px solid #ACCC73!important;

}

div.ConversationStyle2 div.ImgSet {
	background: #FFF8D4;
	border: 2px solid #FDD200!important;
}

.ImgOnlyStyle.Title {max-width: 55%; height:auto;}

/*---お題＆解説---*/
div.AnswerStyle,
div.ThemeStyle {
	max-width: 100%;
	height: auto;
	position: relative;
}

div.AnswerStyle:after,
div.AnswerStyle .ImgSet:after,
div.ThemeStyle:after,
div.ThemeStyle .ImgSet:after {
	content: "";
	display: block;
	clear: both;
}

div.ThemeStyle p.ImgOnlyStyle,
div.AnswerStyle p.ImgOnlyStyle {
	position: absolute;
	z-index:2;
	clear: both;
	top:0;
	left: 1em;
	max-width: 100%;
	height:auto;
}	

div.AnswerStyle p.ImgOnlyStyle img,
div.ThemeStyle p.ImgOnlyStyle img { max-width: 100%; width:auto;}
div.AnswerStyle div.ImgSet,
div.ThemeStyle div.ImgSet {
	position: relative;
	padding: 2.8em 0 1.2em;

}	
div.AnswerStyle div.ImgSet>div,
div.ThemeStyle div.ImgSet>div {
	position: relative;
	top: 0;
	border: 4px solid #908167;
	background-color: #FEFDF9;
	padding: 2em .8em 0 .8em;
	font-weight: bold;
		clear: both;
}

/*---BoxPatternC MOD　バナー広告設定---*/
.BoxPatternC.ImgSet {
	background-color: transparent;
	padding: 10px;
	border: 1px solid #cdcdcd;
	}
	
.BoxPatternC.ImgSet  .ImgSet { margin-left: -220px; width:107%;}

.BoxPatternC.ImgSet .ImgW180SetStyle .Img { padding:0px;}

.BoxPatternC.ImgSet dl { padding-right: 0;}

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

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

/*========================*/
/*========[Susume]========*/
/*========================*/

li.Clip_02 img,
li.Clip_01 img { 
	min-width: 85px;
	position: absolute;
	bottom: .3em;
	clip: rect(69px 85px 96px 0px)!important;
}

	li.Clip_02 img {/*p-chan_icon_clip*/
		 right: .3em;
		}
	li.Clip_01 img {/*kouzu_icon_clip*/
		right: 6em;
		}
	.BoxPatternC.ImgSet .ImgW180SetStyle p.Img,
	.BoxPatternC.ImgSet .ImgW180SetStyle { margin: 0 auto; float: none;}
	.PageTitleStyle.Profile.B h1 img { max-width: 90%; height: auto;}
	.BoxPatternC.ImgSet  .ImgSet {  width:100%;}
}

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


/*=======================================================*/
/*[@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;}

/*768以下トピックパス消し*/
div#TopicPath {padding-top: 1em;}

div#TopicPath ul { 
	display: none;

}


/*--768以下カラム中央寄せ--*/
div.ColumnSet  .ImgOnlyStyle { margin: 0 auto!important; text-align:center;}


/*---768以下アイコンリサイズ---*/
	p.Img img { 
		width: 75%; 
		height: auto;
	}

/*---768以下吹き出し---*/

	div.ConversationStyle1,
	div.ConversationStyle2 {width: 100%!important;}
	div.ConversationStyle1 div.ImgSet,
	div.ConversationStyle2 div.ImgSet { width: 100%!important; }

/*768以下プロフィール設定*/
.ConversationStyle.Susume .Img img {
	width: 15%;
	height: auto;
}

.ConversationStyle.Susume {
	padding: 1em 1em 0px 1.5em;
}

.ConversationStyle.Susume div.ImgSet div{
	padding: 1em 1em 1em .5em;
	}
	
.ConversationStyle.Susume div.ImgSet div p.TextStyle1.Name+p.TextStyle1{
	clear:both;
	}
	.PageTitleStyle.Profile {
		padding: 2em 0 0 1em;
	}
	
	.PageTitleStyle.Profile h1 {
	font-size: 140%!important;
	padding: .25em .25em 1em 0;
	}

	.PageTitleStyle.Profile h1 a {
	margin: 0 6em 0 0 !important;
	display: block;
	}


/*--ページタイトルデフォルトセッティング--*/	
	.PageTitleStyle h1 {
		font-weight: bold;
		font-size: 150%!important;
		display: block;
		width:90%!important;
		float: none!important;
		line-height: 130%; 
	}

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

/*--記事ページ--*/	
	.PageTitleStyle.Susume h1 { padding:0 .5em;}
	.PageTitleStyle.Susume p.TextStyle1 { padding: 0 0 .5em 0;}

/*--目次（インデックス）タイトル--*/
.PageTitleStyle.IndexStyle {padding: 1me 0 2em 1em;}

.PageTitleStyle.IndexStyle h1 img {
	width: 75%;
	height: auto;
	}

.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle {
	max-width: 100%;
	height: auto;
	}
.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle img {
	width: 90%;
	height: auto;
	
	}

/*---お題＆解説---*/
	div.AnswerStyle p.ImgOnlyStyle,
	div.ThemeStyle p.ImgOnlyStyle {
		top: 1em;
		max-width: 100%; height: auto;
	}
	div.AnswerStyle p.ImgOnlyStyle img,	
	div.ThemeStyle p.ImgOnlyStyle img {
		width: 90%;
	}
	
/*---BoxPatternC MOD　バナー広告設定---*/	
.BoxPatternC.ImgSet .ImgW180SetStyle { margin:0;}
.BoxPatternC.ImgSet .ImgW180SetStyle p.Img {
	max-width:100%!important;
	float:left;
	margin-bottom: 0;
	padding-bottom: 0;
	}
	
	.BoxPatternC.ImgSet .ImgW180SetStyle p.Img img { width: 100% }
}


/*=======================================================*/
/*[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;
	}
	.PageTitleStyle h1 {
		font-weight: bold;
		font-size: 120%!important;
		display: block;
		width:90%!important;
		float: none!important;
		line-height: 130%; 
		}
		
/*--目次（インデックス）ページタイトル--*/
	.PageTitleStyle.IndexStyle { padding: .5em 0 0 .5em;}	
	.PageTitleStyle.IndexStyle h1 { padding: 0 0 2em;/* margin-bottom: 2em;*/}
	.PageTitleStyle.IndexStyle>p.ImgOnlyStyle { margin:0 0 3em;}	
	.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle {
		position:absolute;
		bottom:0;
		right:0px;
		left: auto;
		margin:0;
		padding:0;
		max-width:100%;
		text-align:right;
		
		}
	.PageTitleStyle.IndexStyle h1+p.ImgOnlyStyle img {
		margin: 0;
		padding: 0;
		width:50%;
		max-width: 122px;
		min-width: 100px;
		height:auto;
		}
	.PageTitleStyle.IndexStyle h1 img {/* width: 100%;*/}

		
/*--プロフィール--*/		
	.PageTitleStyle.Profile { padding: 1.5em 0 0 .5em;}	

	.PageTitleStyle.Profile h1 {
		padding: .25em .25em 1em 0;
		font-size: 130%!important;		
		}

	.PageTitleStyle.Profile h1 a {
		margin: 0 4.5em 0 0 !important;
		display: block;
	}

	.PageTitleStyle.Profile>p.ImgOnlyStyle { margin:0 ;}
	
	
	.PageTitleStyle.Profile h1+p.ImgOnlyStyle {
		position:absolute;
		bottom:0;
		right:-60px;
		margin:0;
		padding:0;
		max-width:100%;
		}
	.PageTitleStyle.Profile h1+p.ImgOnlyStyle img {
		margin: 0;
		padding: 0;
		width:65%;
		}

		
	.PageTitleStyle.Profile.A h1+p.ImgOnlyStyle {
		position:absolute;
		bottom:0;
		right:-3em;
		margin:0;
		padding:0;
		max-width:100%;
		}
	.PageTitleStyle.Profile.A h1+p.ImgOnlyStyle img {
		margin: 0;
		padding: 0;
		width:70%;
		}

	.PageTitleStyle.Profile.B h1 img { max-width: 90%!important;}
	.PageTitleStyle.Profile.B h1	 {
		margin: 0 0 0 -.25em;
		padding: 0 3.5em 1em 0;
		
	}
	
	/*---BoxPatternC MOD---*/	
	.BoxPatternC.ImgSet .ImgW180SetStyle { float:none; margin:0 auto;}
	.BoxPatternC.ImgSet .ImgW180SetStyle p.Img {
		max-width:100%!important;
		margin: 0 auto;
		float: none;
		}
	.BoxPatternC.ImgSet .ImgW180SetStyle p.Img img {
	width: 100%;
	height: auto;
	}

	.JS .ImgW180SetStyle .Img { 
	width: 180px;
	height: auto;
	}
}

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