/*--------------------------------------------------------------*/
/*		製品ページの機能・サービスページで使用する共通CSS用 	*/
/*		（common.cssに対して追加するスタイルを記載）		    */
/*--------------------------------------------------------------*/


/* 文章中のインライン画像（アイコンなど）がスマホでみたときに100％にならないようにする */
/* －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：inline_img */

img.inline_img {
	float:none;
	vertical-align:middle;
	margin:0 3px;
}

@media (max-width: 640px) {
img.inline_img {
	width:auto;
}
}



/* 機能・サービスページ内に設置する動画用 */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：service_movie、ie8_spacer  */

.service_movie .block__movie {
	border: 1px #888888 solid;
	width:204px;
	}
	
.service_movie .block__movie .movie_check {
	background:url(../images/ico_movie.jpg) no-repeat 0 7px;
	margin-top:0px;
	padding:8px 10px 8px 45px;
	font-weight:bold;
	text-align:center;
	position:relative;
	}
	
.service_movie .block__movie .block__movie--caption{
	display:none;
	}
	
.service_movie .block__movie .block__movie--inset.play .block__movie--caption {
	display:block;	
	padding-left:0;
	}
	
/*IE8では画像以外からはポップアップブロックがかかってしまうための回避策*/
.service_movie .block__movie .ie8_spacer{
	display:none;
	display:block\9;
	/*background-color:#FCF;*/
	position:absolute;
	top:0px;
	left:0px;
}
.service_movie .block__movie .ie8_spacer img {
	width:204px;
	height:42px;
}

@media (max-width: 640px) {
.service_movie .block__movie {
	width:100%;
}
.service_movie .block__movie .movie_check {
	padding:10px 10px 10px 55px;
	text-align:left;
}
}


/* テキストを折り返さないようにする       */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：txt_nowrap                 */

.txt_nowrap {
	white-space:nowrap;
}


/* 画像レイアウト関係 スマホでのサイズ等調整用  */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：va_middle sp_img_xxx       */

/*画像の縦中央揃え*/
img.va_middle {
	vertical-align:middle;
}

/*スマホレイアウトでの画像サイズ*/
@media (max-width: 640px) {

img.sp_img_wauto {
	width:auto;
}

img.sp_img_w90p {
	width:90%
}

img.sp_img_w80p {
	width:80%
}

img.sp_img_w70p {
	width:70%
}

img.sp_img_w60p {
	width:60%
}

img.sp_img_w50p {
	width:50%
}

img.sp_img_w40p {
	width:40%
}

img.sp_img_w30p {
	width:30%
}

img.sp_img_w20p {
	width:20%
}

img.sp_img_w10p {
	width:10%
}

}


/* PCとスマホレイアウトで項目を出しわける */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：.pc_only　.sp_only         */

.pc_only {
}

.sp_only {
	display:none;
}

@media (max-width: 640px) {

.pc_only {
	display:none;
}

.sp_only {
	display:block;
}

}



/* H4単位でマージンを調整するためのクラス */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：mb--h4sec　mt--h4sec       */

/* H4を含むセクションに付けることで下にマージンをとる */
.mb--h4sec {
  margin-bottom: 3em;
}

@media (max-width: 640px) {
.mb--h4sec {
	margin-bottom:0;
}

.mb--h4sec .heading__image{
	margin-top:3em;
}
}

/* ひとつのカラム内でH4 が複数ある場合に、H4上にマージンをとる*/
.mt--h4sec {
	margin-top:72px;
}

@media (max-width: 640px) {
.mt--h4sec {
	margin-top:2em;
}
}




/* 機能サービス用のH5　　　　　　　　　　 */
/* －－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：　　　　　                 */

/* mb--h4sec内のH5にスタイル設定 */

.mb--h4sec .heading__lv5 {
	background:none;
	padding:0;
	margin-bottom:-0.5em
}

/* ひとつのカラム内でH4とH5がと共存する場合、もしくはH5が複数ある場合に、H5上にマージンをとる*/
.mt--h5sec {
	margin-top:24px;
}

@media (max-width: 640px) {
.mt--h5sec {
	margin-top:2em;
}
}


/* カラム内で2列のFloatのリストを作成 col--6用*/
/* －－－－－－－－－－－－－－－－－－－－－ */
/* 新規クラス：item_list　　                  */

.item_list {
	overflow:hidden;
}
.item_list li{
	float:left;
/*	min-width:170px;*/
	margin-right:40px;
	text-indent:-1em;
	padding-left:1em;
}
@media (max-width: 640px) {
.item_list li{
	float:none;
}
}


/**/
@media (max-width: 640px) {
.mt--1em-sp {
	margin-top:1em;
}
.mt--2em-sp {
	margin-top:2em;
}
.mt--3em-sp {
	margin-top:3em;
}
.mt--4em-sp {
	margin-top:4em;
}
}