@charset "utf-8";

/*================================================================================
 
	Service: Microsoft AtLife
	FileName: cmn_device.css
 Description: PC , Tablet , SmartPhone Common Style
	LastUpdate: 2015/12/05

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


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

 ■共通ヘッダー fot PC
   |
   |-- ヘッドナビ
   |
   |-- グローバルナビ
   
==================================================================*/

html{min-width:960px;}

/*----------------------------------------------------------
  ヘッダコンテナ
--------------------------------------------------------- */
header#baseHeader div.headerInner{width:960px; padding: 12px 0 6px 0;}
header#baseHeader p#msatlifeLogo {padding: 19px 0 0 13px;}

/* 検索BOX */
header#baseHeader .headerInner #msviLSBForm{margin-top: 14px;margin-left: 43px;float: left;}
header#baseHeader .headerInner #msKiev{width:413px;}
header#baseHeader .headerInner #msKiev #msviLSBtbox2{width:370px; padding:1.2%;color: #A1A1A1;}
header#baseHeader .headerInner #msKiev #msviLSBssearch2{margin-bottom:-7px;}

/*----------------------------------------------------------
  グローバルナビ 
--------------------------------------------------------- */

header#baseHeader nav#gNavi {padding:20px 0 0 12px; /padding:20px 0 0 0; /* for IE6-7 */ clear:both; display:block;}
header#baseHeader nav#gNavi ul{margin: 0 0 8px 0;}
header#baseHeader nav#gNavi ul li{font-size:13px; font-size:1.3rem; margin: 0 3px 3px 0; display:inline;}
header#baseHeader nav#gNavi ul li a{text-decoration:none; padding:6px;}
header#baseHeader nav#gNavi ul li a:hover,
header#baseHeader nav#gNavi ul li a.selected{background:#EF404F; padding:6px; background:#F2FBF9 !important; color:#008272;}
header#baseHeader p#gmenuBtn {display:none;} /* only SmartPhone */

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

 カテゴリータイトル

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

div#titleHeader{width:100%; background:#E1E584;}
div#titleHeader div.titleWrap{color:#000; width:960px; margin:0 auto; overflow:hidden; clear:both;}
div#titleHeader div.titleBox{width:240px; float:left; padding: 0; background:#BBD80A;}
div#titleHeader div.titleBox h1#pageTitle{font-size:20px; font-size:2.0rem; padding: 24px 22px  20px  22px;}
div#titleHeader div.titleBox h1#pageTitle span{font-size:16px; font-size:1.6rem; padding: 0 0 0 1em;}
div#titleHeader div.descBox{font-weight:400; line-height:1.6; width:720px; float:left; display:inline;}
div#titleHeader div.descBox p#descTxt01{padding: 30px 24px 18px 24px;}
div#titleHeader div.descBox p#descTxt02{padding: 20px 24px 18px 24px;}
div#titleHeader div.descBox p#descTxt03{padding: 10px 24px 8px 24px;}


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

 パンくずリンク

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

nav#breadNavi{width:960px; margin:0 auto; overflow:hidden; clear:both; padding: 12px 0 0 0; overflow:hidden; clear:both;}
nav#breadNavi ul{font-size:11px; font-size:1.1rem; padding:0 12px 0 12px; margin: 0 0 20px 0;}
nav#breadNavi ul li{color:#505050; display:inline;}
nav#breadNavi ul li span,
nav#breadNavi ul li a{color:#505050;}
nav#breadNavi ul li span {padding: 0 6px;}

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

 共通コンテナ
   |
   |-- 全体コンテナ
   |
   |-- コンテンツエリア - 右サイド
   |
   |-- コンテンツセクション
   |
   |-- 2 カラムボックス、3 カラムボックス

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

/*----------------------------------------------------------
  全体コンテナ
--------------------------------------------------------- */

div#contentsWrap {width:960px; margin: 0 auto 2% auto; }

.mt0 {margin-top:0px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt30 {margin-top:30px!important;}

.mb0 {margin-bottom:0px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb60 {margin-bottom:60px!important;}

/*----------------------------------------------------------
  コンテンツエリア - 右サイド
--------------------------------------------------------- */

div#contentsWrap article#contentsArea {width:696px; margin: 0 22px 0 0; padding: 0 12px; float: left; overflow:hidden; clear:both;}

/*----------------------------------------------------------
  コンテンツセクション
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection{margin: 0 0 48px 0; clear:both; overflow:hidden;}

/*----------------------------------------------------------
  2 カラムボックス、3 カラムボックス
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection div.twoBox{width:335px; margin: 0 0 0 24px;  float:left;}
div#contentsWrap article#contentsArea section.articleSection div.threeBox{width:216px; margin: 0 0 0 24px;  float:left;}
div#contentsWrap article#contentsArea section.articleSection div.twoBox figure ,
div#contentsWrap article#contentsArea section.articleSection div.threeBox figure {margin: 12px 0;}
div#contentsWrap article#contentsArea section.articleSection div.twoBox figure figcaption,
div#contentsWrap article#contentsArea section.articleSection div.threeBox figure figcaption{margin: 12px 0;}


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

 共通タイトル
   |
   |-- 汎用タイトル
   |
   |-- タイトル見出し h1
   |
   |-- タイトル見出し h2
   |
   |-- タイトル見出し h3
   |
   |-- タイトル見出し h4

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

/*----------------------------------------------------------
  タイトル見出し 汎用
--------------------------------------------------------- */

div#contentsWrap article#contentsArea .titleType01{font-size:23px; font-size:2.3rem; line-height:1.3; color:#505050; margin: 0 0 14px 0;}
div#contentsWrap article#contentsArea .titleType02{font-size:18px; font-size:1.8rem; line-height:1.3; color:#505050; margin: 0 0 12px 0;}
div#contentsWrap article#contentsArea .titleType03{font-size:13px; font-size:1.3rem; line-height:1.3; color:#505050; margin: 0 0 7px 0;}


/*----------------------------------------------------------
  タイトル見出し h1
--------------------------------------------------------- */

div#contentsWrap h1.h1Type01{font-size:24px; font-size:2.4rem; line-height:1.3; margin: 6px 0; float:left;} /* Top */
div#contentsWrap h1.h1Type01 span{font-size:13px; font-size:1.3rem;}

/*----------------------------------------------------------
  タイトル見出し h2
--------------------------------------------------------- */

div#contentsWrap h2.h2Type01{font-size:23px; font-size:2.3rem; line-height:1.3; color:#505050; margin: 0 0 12px 12px; clear:both;}
div#contentsWrap h2.h2Type01 span{font-size:18px; font-size:1.8rem;}
div#contentsWrap h2.h2Type02{font-size:23px; font-size:2.3rem; line-height:1.3; color:#505050; padding: 0 0 6px 0; float:left;}
div#contentsWrap h2.h2Type03{font-size:21px; font-size:2.1rem; line-height:1.3; color:#F00; margin: 0 0 4px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type04{font-size:28px; font-size:2.8rem; line-height:1.3; color:#442358; margin: 0 0 12px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type05{font-size:24px; font-size:2.4rem; line-height:1.3; color:#78057E; margin: 0 0 36px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type06{font-size:24px; font-size:2.4rem; line-height:1.3; color:#000000; margin: 0 0 12px 0; clear:both;} /* Club MS */

div#contentsWrap h2.h2Type10{font-size:2rem; line-height:1.3; color:#000000; margin:20px 0 30px 0; padding:1.5%; clear:both; border-bottom:1px solid #b2b2b2; background:#f0f0f0;} /* TOPICS/TIPS Archive 用 */




/*----------------------------------------------------------
  タイトル見出し h3
--------------------------------------------------------- */

div#contentsWrap h3.h3Type01{font-size:13px; font-size:1.3rem; padding: 0 0 24px 0;} /* オンライン店舗検索結果 */
div#contentsWrap h3.h3Type02{font-size:18px; font-size:1.8rem; line-height:1.5; color:#000; margin: 0 0 24px 0; clear:both;} /* Office Tips */
div#contentsWrap h3.h3Type03{font-size:13px; font-size:1.3rem; font-weight:bold; padding: 0 0 24px 0;} /* MSスタッフ在籍店舗検索結果 */

/*----------------------------------------------------------
  タイトル見出し h4
--------------------------------------------------------- */

div#contentsWrap h4.h4Type01{font-size:18px; font-size:1.8rem; color:#000; margin: 0 0 12px 0; clear:both;} /* Office Tips */



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

 共通テキスト
   |
   |-- ベーステキスト
   |
   |-- リンクアイコン付テキスト

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

/*----------------------------------------------------------
  ベーステキスト
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection p.baseTxt{padding: 0 0 12px 0;}

/*----------------------------------------------------------
  リンクアイコン付テキスト
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection p.baseTxt a{color:#0073C5; background:url(/ja-jp/atlife/images/common/ico_arrow_05.png) no-repeat left center; padding: 0 0 0 22px;}


/*----------------------------------------------------------
  クローズテキスト
--------------------------------------------------------- */
p.attentionClosetxt{
	border: 1px solid #d41429;
    color: #d41429;
    font-size: 200%;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 10px 10px 10px 30px;
    text-align: center;
}



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

 共通リスト
   |
   |-- ベースリスト
   |
   |-- リンクアイコン付リスト
   |
   |-- 定義リスト

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

/*----------------------------------------------------------
  ベースリスト
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection ul.baseList {margin: 0 0 12px 0; padding: 0 0 0 14px;}
div#contentsWrap article#contentsArea section.articleSection ul.baseList li{list-style:disc !important;;margin: 0 0 6px 0; }

/*----------------------------------------------------------
  リンクアイコン付リスト
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection ul.linkList {margin: 0 0 12px 0; padding: 0 0 0 0;}
div#contentsWrap article#contentsArea section.articleSection ul.linkList li {margin: 0 0 6px 0; padding: 0 0 0 0;}
div#contentsWrap article#contentsArea section.articleSection ul.linkList li a{color:#0073C5; background:url(/ja-jp/atlife/images/common/ico_arrow_05.png) no-repeat left center;  padding: 0 0 0 22px;}


/*----------------------------------------------------------
  定義リスト
--------------------------------------------------------- */

div#contentsWrap article#contentsArea section.articleSection dl.descList{}
div#contentsWrap article#contentsArea section.articleSection dl.descList dt{padding: 0 0 12px 0;}
div#contentsWrap article#contentsArea section.articleSection dl.descList dd{padding: 0 0 36px 0;}


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

 共通サイドエリア

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

aside#sideArea {width: 216px; float:right; }
aside#sideArea h2.sideTitle{font-size:18px; font-size:1.8rem; margin:48px 0 6px 0; padding: 0 0 2px 0;}
aside#sideArea h2.sideTitle a{color:#505050; text-decoration:none; display:block;}
aside#sideArea h2.sideTitle a:hover{text-decoration:underline;}
aside#sideArea ul{ list-style:none !important;}
aside#sideArea ul li{margin: 0 1px 12px 0;}
aside#sideArea ul.shopList li{margin: 14px 0;}


aside#sideArea div#ranking{border:1px solid #d9d9d9;padding:15px; overflow:hidden; margin-bottom:48px; background-color:#ffffff;}
aside#sideArea div#ranking ul {}
aside#sideArea div#ranking ul li#ranking01{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}
aside#sideArea div#ranking ul li#ranking02{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}
aside#sideArea div#ranking ul li#ranking03{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}
aside#sideArea div#ranking ul li#ranking04{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}
aside#sideArea div#ranking ul li#ranking05{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}
aside#sideArea div#ranking ul li#other{background:url() no-repeat left center;  padding: 5px 0 0 0; margin-bottom:5px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;width: 180px;white-space: nowrap;}



aside#sideArea div#sideParts02 aside.sideInner{background:#EEF0EF; padding:12px 11px 0 11px; /padding:12px 11px 12px 11px; overflow:hidden; clear:both}
aside#sideArea div#sideParts02 aside.sideInner ul{clear:both;}
aside#sideArea div#sideParts02 aside.sideInner ul li{float:left;}
aside#sideArea div#sideParts02 aside.sideInner ul li a {position:relative; display:block;}
aside#sideArea div#sideParts02 aside.sideInner ul li a img.tblank{position:absolute !important; top:0px !important; left:0px !important; z-index:99;}

aside#sideArea div#sideParts03 aside.sideInner{background:#EEF0EF; padding:12px 11px 0 11px; /padding:12px 11px 12px 11px; overflow:hidden; clear:both}
aside#sideArea div#sideParts03 aside.sideInner ul{ clear:both;}
aside#sideArea div#sideParts03 aside.sideInner ul li{float:left;}
aside#sideArea div#sideParts03 aside.sideInner ul li a.tipssmall{display:block; overflow:hidden; position:relative;}
aside#sideArea div#sideParts03 aside.sideInner ul li a.tipssmall img.crop {position:absolute; left:-60px;}
aside#sideArea div#sideParts03 aside.sideInner ul li a img.tblank{position:absolute !important; top:0px !important; left:0px !important; z-index:99;}


aside#sideArea div#sideParts04 ul li a.tipssmall img.crop {position:absolute; left:-60px; top:-60px;}
aside#sideArea div#sideParts04 ul li a {position:relative; display:block;}
aside#sideArea div#sideParts04 ul li a img.tblank{position:absolute !important; top:0px !important; left:0px !important; z-index:99;}


aside#sideArea div#sideParts05 dl.guideList{font-size:11px; font-size:1.1rem; padding:12px 0 0 0}
aside#sideArea div#sideParts05 dl.guideList dt{}
aside#sideArea div#sideParts05 dl.guideList dd{color:#505050}

aside#sideArea div#sideParts07 p.announceTxt{font-size:11px; font-size:1.1rem; color:#505050; line-height:1.8;}
aside#sideArea div#sideParts07 p.announceTxt span{color:#e81123;}



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

 共通フッタ

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

footer#baseFooter{width:100%; padding: 12px 0; height:auto; background:#505050; overflow:hidden;}
footer#baseFooter div.footerInner h1{float:left; padding: 2px 0 0 0;}
footer#baseFooter div.footerInner{width:960px; overflow:hidden; margin:0 auto;}
footer#baseFooter ul.flt{float:left; padding: 2px 0 0 0; font-size:1.1rem;}
footer#baseFooter ul.flt li{display:inline; margin: 0;}
footer#baseFooter ul.flt li a{color:#FFFFFF;}
footer#baseFooter aside{float:right;}
footer#baseFooter aside ul{display:inline;}
footer#baseFooter aside ul li{display:inline; margin: 0;}
footer#baseFooter form#msviLSBForm{margin:0px 6px 0 0;}
footer#baseFooter form#msviLSBForm input#msviLSBtbox2{color:#A1A1A1; width:238px; vertical-align:top; margin: 2px 0 0 0;}
footer#baseFooter form#msviLSBForm input#msviLSBssearch2{vertical-align:top;}
footer#baseFooter small{font-size:12px; font-size:1.2rem; color:#FFFFFF; padding:3px 5px 0 0px; display:block; float:left;}
.w386{width:386px;} .w425{width:425px;}

p.attentionClosetxt{
	border: 1px solid #d41429;
    color: #d41429;
    font-size: 200%;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 10px 10px 10px 30px;
    text-align: center;
}
.attentiontxt_min{
    color: #d41429;
    font-size: 120%!important;
    font-weight: normal!important;
    line-height: 1.4!important;
    margin-bottom: 15px!important;
    margin-top: 15px!important;
    padding:0px!important;
}
/*  汎用パーツ　*/
.pcContent{display:block;}
.tbSpContent{display:none;}

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

 ■共通ヘッダー fot Tablet
   |
   |-- ヘッドナビ
   |
   |-- グローバルナビ
   
==================================================================*/

@media only screen and (max-width: 768px) and (min-width: 481px){
html { min-width: 481px;}
img {
    max-width: 100%;
    height: auto;
}
/*----------------------------------------------------------
  ヘッダコンテナ
  #baseHeader
--------------------------------------------------------- */
header#baseHeader p#msatlifeLogo{margin: 0 25px 20px 0;padding:0;}
header#baseHeader p#msLogo{margin: -23px 3px 20px 0;}


#baseHeader .headerInner {
	padding: 12px;
}

#headSide:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}

/* 検索BOX */
header#baseHeader .headerInner #msviLSBForm{margin:0 85px 0 0;float:none;}
header#baseHeader .headerInner #msKiev{width:250px;}
header#baseHeader .headerInner #msKiev #msviLSBtbox2{width:210px; padding:1.2%;}
header#baseHeader .headerInner #msKiev #msviLSBssearch2{margin-bottom:-7px;}


/*----------------------------------------------------------
   subPage ヘッダボーダー 
--------------------------------------------------------- */

div#titleHeader div.hBob01{width: 25%;}
div#titleHeader div.hBob02{width: 75%;}

/*----------------------------------------------------------
  ヘッドナビ
--------------------------------------------------------- */

#headNavi {
	font-size: 130%;
	text-align: right;
	margin-top: .5em;
}
#headNavi ul li {
	display: inline;
	margin-left: 15px;
}

/*----------------------------------------------------------
  グローバルナビ
  #gNavi
--------------------------------------------------------- */
header#baseHeader div.headerInner{padding:12px;width:auto; min-width: initial;}
header#baseHeader nav#gNavi {
	padding:0;
	display:block;
}

header#baseHeader nav#gNavi:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
header#baseHeader nav#gNavi ul {
	margin: 1em 0 0;
}
header#baseHeader nav#gNavi ul li {
	margin: 0 3px 3px 0;
	display: inline-block;
	/display: inline; /* for IE6-7 */
	border: 1px solid transparent;
}
header#baseHeader nav#gNavi a {
	text-decoration: none;
	padding: 6px;
	display: block;
}
header#baseHeader nav#gNavi a:hover,
header#baseHeader nav#gNavi a.selected {
	background: #EF404F;
	background: #F2FBF9;
	color: #008272;
}
#gmenuBtn {
	display: none;
}
aside#sideArea{
		width:100%!important;
		float:none!important;
		margin:5% auto;
		padding:0;
		font-size:200%!important;
		box-sizing:border-box;
		text-align:center;
		overflow:hidden;
	}

	aside#sideArea h2{
		clear:both;
		font-size:130%!important;
		overflow:hidden;
	}

	aside#sideArea section p{
		clear:both;
	}
	
	aside#sideArea div#ranking {margin:0 8% 48px 8%; font-size:90%;}
	aside#sideArea div#ranking ul{padding:2% 2% 2% 5%;}
	aside#sideArea div#ranking ul li#ranking01, 
	aside#sideArea div#ranking ul li#ranking02, 
	aside#sideArea div#ranking ul li#ranking03, 
	aside#sideArea div#ranking ul li#ranking04, 
	aside#sideArea div#ranking ul li#ranking05, 
	aside#sideArea div#ranking ul li#other{
		font-size:89%; padding: 5px 0 0 0; margin:0 0 5px 0;width: 100%; text-align:left;
	}
	aside#sideArea div#ranking ul li img{vertical-align:middle;}
	aside#sideArea ul li{margin: 0 0 12px 15px;float:left;width: 47%;text-align:left;}
	aside#sideArea ul li:nth-child(2n+1){margin: 0 0 12px 0;text-align:right;}

div#contentsWrap{background:none!important;width:100%;margin:0;padding:0 10px;box-sizing:border-box;}
div#contentsWrap article#contentsArea { width: 100%; margin: 0; padding: 0;float:none; overflow: hidden;clear: both;}


/*----------------------------------------------------------
  矢印リスト - サイドナビ
--------------------------------------------------------- */

.listR{background:url(/ja-jp/atlife/images/common/ico_arrow_02.png) no-repeat 84% center;}

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

 パンくずリンク

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

nav#breadNavi{width:auto; padding:10px;}
nav#breadNavi ul{font-size:13px; font-size:1.3rem; padding:0 ; margin: 0;}
nav#breadNavi ul li{color:#505050; display:inline;}
nav#breadNavi ul li span,
nav#breadNavi ul li a{color:#505050;}
nav#breadNavi ul li span {padding: 0 6px;}
/*20151205*/
div#titleHeader div.titleWrap { width: 100%; color: #000;margin: 0 auto; overflow: hidden;clear: both;}
/*==================================================================

 ■共通フッタ

==================================================================*/
footer#baseFooter div.footerInner{width:auto;}
footer#baseFooter {
	padding: 12px;
	box-sizing: border-box;
}
footer#baseFooter a {
	color: #fff;
}
footer#baseFooter h1 {
	padding: 2px 0 0 0;
}
footer#baseFooter ul.flt {
	font-size: 110%;
}
footer#baseFooter ul.flt li {
	display: inline-block;
	padding: .5em 1em;
}
footer#baseFooter aside {
	margin-top: 1em;
	text-align: center;
}
footer#baseFooter aside ul li {
	display: inline;
}
#msviLSBForm,
#msKiev {
	display: inline-block;
}
#msviLSBtbox2 {
	
	color: #A1A1A1;
	width: 238px;
}
#msviLSBssearch2 {
	vertical-align: top;
}
#baseFooter small {
	font-size: 120%;
	margin: 1em 0 0 1em;
	display: inline-block;
}


/*  汎用パーツ　*/
.pcContent{display:none;}
.tbSpContent{display:block;}

}/* @media/Tab 閉じタグ */








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

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

 ■共通ヘッダー fot SmartPhone
   |
   |-- ヘッドナビ
   |
   |-- グローバルナビ

==================================================================*/
html{min-width:inherit;}
/*----------------------------------------------------------
  ヘッダ
--------------------------------------------------------- */

header#baseHeader div.headerInner{width:100%;padding:0;position: relative;}
header#baseHeader p#msatlifeLogo{padding: 15px 0 0 10px;}
header#baseHeader p#msatlifeLogo img{width:80%;}
header#baseHeader p#msLogo{position: absolute;top: 15px;right: 15px;margin:0;}
header#baseHeader .headerInner #msviLSBForm{margin: 0 0 0 5px; width:100%;}

/*----------------------------------------------------------
  グローバルナビ 
--------------------------------------------------------- */

header#baseHeader p#gmenuBtn {width:36px; height:36px; float:right; padding: 0 0 10px 0; cursor:pointer;display:block;}
header#baseHeader .normal{ background:url(/ja-jp/atlife/images/common/ico_menu_01.png) no-repeat; margin:8px 8px 0 0;}
header#baseHeader .op{ background:#4C4C4C url(/ja-jp/atlife/images/common/ico_menu_02.png) no-repeat  !important; margin: 8px 8px 0 0; }
header#baseHeader nav#gNavi { width:100%; height:auto; clear:both; display:none; padding:0;}
header#baseHeader nav#gNavi ul{display:block;margin:0;}
header#baseHeader nav#gNavi ul li{display:block;margin:0;font-size:14px; text-align:left; height: 28px; padding: 12px 0 0 32px; background:#4C4C4C url(/ja-jp/atlife/images/common/ico_arrow_03.png) no-repeat 8px 12px;}
header#baseHeader nav#gNavi ul li{border-top: 1px solid #FFF;}
header#baseHeader nav#gNavi ul li:first-child{border:none !important;}
header#baseHeader nav#gNavi ul li a{color:#FFF !important;padding:0;display:block;}
header#baseHeader nav#gNavi ul li a:hover,
header#baseHeader nav#gNavi ul li a.selected{background:#EF404F; padding:0; background:none !important; color:#008272;}
header#baseHeader .headerInner #msKiev {width: 100%;text-align: left;} 
header#baseHeader .headerInner #msKiev #msviLSBtbox2{width: 80%;margin-right: 10px;font-size:1.3rem;}
header#baseHeader .headerInner #msKiev #msviLSBssearch2{margin-top: 3px;}
header#baseHeader nav#headNavi{float:left;}
header#baseHeader nav#headNavi ul {margin:18px 0 0 5px;}
header#baseHeader nav#headNavi ul li:first-child{ margin-left: 5px;}
/*==================================================================

 カテゴリータイトル

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

div#titleHeader div.titleWrap{width:100%; color:#000; margin:0 auto; overflow:hidden; clear:both;}
div#titleHeader div.titleBox{width:100%;  clear:left; padding: 0; background:#BBD80A;}


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

 ■パンくずリンク

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

nav#breadNavi{display:none;}


/*----------------------------------------------------------
  全体コンテナ
--------------------------------------------------------- */

div#contentsWrap {width:100%; margin: 0 auto 30px auto; padding:0 10px; box-sizing:border-box;}

img{max-width: 100%; height:auto;}

/*----------------------------------------------------------
  コンテンツエリア - 右サイド
--------------------------------------------------------- */

div#contentsWrap article#contentsArea {width:100%; margin: 0 auto; padding: 0; float: none; overflow:hidden; clear:both;}

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

 ■共通サイドエリア
   |
   |-- サイド基本パーツ
   |
   |-- ご購入情報
   |
   |-- 関連情報
   |
   |-- その他の情報

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


/*----------------------------------------------------------
  サイド基本パーツ 
--------------------------------------------------------- */
aside#sideArea div#ranking{width:auto; margin:30px 0px 20px 0px;}
aside#sideArea div#ranking ul li{margin:0;display:block;text-align: left;}
aside#sideArea {width:100%; padding:0 0 30px; overflow:hidden; float:none;clear:right;}
aside#sideArea h2.sideTitle{font-size:14px; margin:24px 0 6px 0; padding: 0 0 2px 0;}
aside#sideArea h2.sideTitle a{color:#505050; text-decoration:none;}
aside#sideArea h2.sideTitle a:hover{text-decoration:underline;}
aside#sideArea ul{}
aside#sideArea ul li{margin: 0 0px 10px 10px;width: 47%;display: inline-block; text-align:left;}
aside#sideArea ul li:nth-child(2n+1){margin: 0 0px 10px 0; text-align:right;}


/*----------------------------------------------------------
  ご購入情報 
--------------------------------------------------------- */

aside#sideArea div#sideParts01{text-align:center; margin: 24px 0 0 0;}
aside#sideArea div#sideParts01 img{max-width:100%; height:auto;}


/*----------------------------------------------------------
  関連情報 
--------------------------------------------------------- */

/*======side contents=======*/
aside#sideArea div#sideParts02,
aside#sideArea div#sideParts03,
aside#sideArea div#sideParts04,
aside#sideArea div#sideParts05{width:100%; margin:0 3% 12px 0px;}

aside#sideArea div#sideParts01 { display:none; }
/*aside#sideArea div#sideParts01 img { content: ""; }*/
/*aside#sideArea div#sideParts01 img:after { content: attr(alt); color:#000; display:block; }*/
/*aside#sideArea div#sideParts02 img { content: ""; }*/
aside#sideArea div#sideParts02 img:after { content: attr(alt); color:#000; display:block; }
/*aside#sideArea div#sideParts03 img { content: ""; }*/
aside#sideArea div#sideParts03 img:after { content: attr(alt); color:#000; display:block; }
/*aside#sideArea div#sideParts04 img { content: ""; }*/
aside#sideArea div#sideParts04 img:after { content: attr(alt); color:#000; display:block; }
/*aside#sideArea div#sideParts05 img { content: ""; }*/
aside#sideArea div#sideParts05 img:after { content: attr(alt); color:#000; display:block; }

/*aside#sideArea div#sideParts06 img { content: ""; }*/
/*aside#sideArea div#sideParts06 img:after { content: attr(alt); color:#000; display:block; }*/

#pageCategory08 aside#sideArea { width:100%; padding:0; overflow:hidden; clear:right; background-color: #FFFFFF;margin:10px auto 0; }
aside#sideArea h2.sideTitle{font-size:1.5rem; margin:24px 0 6px 0; padding: 0 0 2px 0;}
.listR{ background-image: url(../../images/common/ico_arrow_02.png); background-repeat: no-repeat; background-position: 160px center; }
aside#sideArea div#sideParts07 p.announceTxt span{color:#e81123;}


/*----------------------------------------------------------
  その他の情報 
--------------------------------------------------------- */

aside#sideArea div#sideParts06{width:100%; overflow:hidden; clear:both;}
aside#sideArea div#sideParts06 ul li{margin: 0 0px 10px 10px;width: 47%;display: inline-block;}
aside#sideArea div#sideParts06 ul li:nth-child(2n+1){margin: 0 0px 10px 0;}


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

 ■共通フッタ

==================================================================*/
footer#baseFooter div.footerInner{width:auto;}
footer#baseFooter a {
	color: #fff;
}
footer#baseFooter h1 {
	float: left;
	padding: 2px 0 0 0;
}
footer#baseFooter ul.flt {
	width:100%;
	padding: 12px;
}
footer#baseFooter ul.flt li {
	font-size: 120%;
	padding: 12px;
	padding: .25em 0;
	display: block;
}
footer#baseFooter aside ul li {
	display: inline;
}


#msKiev {
	text-align: center;
}
#msviLSBtbox2 {
	font-size: 140%;
	color: #A1A1A1;
	width: 238px;
}
#msviLSBssearch2 {
	vertical-align: top;
}
footer#baseFooter small {
	margin-top: .5em;
	font-size: 120%;
	display: block;
	text-align: center;
	float:none;
}
/* snsBox */
.snsBox {
	position: static !important;
	background-color: #505050;
}
.snsBox:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
.snsBox li {
	float: left;
	width: 50%;
	height: 32px;
	margin: 0 !important;
	overflow: hidden;
}
.snsBox li a {
	display: block;
	height: 32px;
}
.snsBox li:first-child a {
	background: url(/ja-jp/atlife/images/common/ico_foot_twitter2.png) no-repeat center center;
}
.snsBox li:last-child a {
	background: url(/ja-jp/atlife/images/common/ico_foot_facebook2.png) no-repeat center center;
}
.snsBox li img {
	opacity: 0;
}


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

 共通タイトル
   |
   |-- 汎用タイトル
   |
   |-- タイトル見出し h1
   |
   |-- タイトル見出し h2
   |
   |-- タイトル見出し h3
   |
   |-- タイトル見出し h4

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

/*----------------------------------------------------------
  タイトル見出し 汎用
--------------------------------------------------------- */

div#contentsWrap article#contentsArea .titleType01{font-size:23px; line-height:130%; color:#505050; margin: 0 0 14px 0;}
div#contentsWrap article#contentsArea .titleType02{font-size:18px; line-height:130%; color:#505050; margin: 0 0 12px 0;}
div#contentsWrap article#contentsArea .titleType03{font-size:13px; line-height:130%; color:#505050; margin: 0 0 7px 0;}


/*----------------------------------------------------------
  タイトル見出し h1
--------------------------------------------------------- */

div#contentsWrap h1.h1Type01{font-size:24px; line-height:130%; margin: 6px 0; float:left;} /* Top */
div#contentsWrap h1.h1Type01 span{font-size:13px;}

/*----------------------------------------------------------
  タイトル見出し h2
--------------------------------------------------------- */

div#contentsWrap h2.h2Type01{font-size:18px; line-height:130%; color:#505050; margin: 12px 0 ; clear:both;}
div#contentsWrap h2.h2Type01 span{font-size:18px;}
div#contentsWrap h2.h2Type02{font-size:18px; line-height:130%; color:#505050; padding: 0 0 6px 12px; float:left;}
div#contentsWrap h2.h2Type03{font-size:21px; line-height:130%; color:#F00; margin: 0 0 4px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type04{font-size:28px; line-height:130%; color:#442358; margin: 0 0 12px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type05{font-size:24px; line-height:130%; color:#78057E; margin: 0 0 36px 0; clear:both;} /* Office Tips */
div#contentsWrap h2.h2Type06{font-size:24px; line-height:130%; color:#0071C7; margin: 0 0 12px 0; clear:both;} /* Club MS */


/*----------------------------------------------------------
  タイトル見出し h3
--------------------------------------------------------- */

div#contentsWrap h3.h3Type01{font-size:13px; padding: 12px 0 24px 0;} /* オンライン店舗検索結果 */
div#contentsWrap h3.h3Type02{font-size:18px; line-height:150%; color:#000; margin: 0 0 24px 0; clear:both;} /* Office Tips */
div#contentsWrap h3.h3Type03{font-size:13px; font-weight:bold; padding: 12px 0 24px 0;} /* MSスタッフ在籍店舗検索結果 */

/*----------------------------------------------------------
  タイトル見出し h4
--------------------------------------------------------- */

div#contentsWrap h4.h4Type01{font-size:18px; color:#000; margin: 0 0 12px 0; clear:both;} /* Office Tips */



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

 画像拡大 (モバイル表示用）

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


img.auto{width:auto !important;}  img.zoom10{width:10% !important;} 
img.zoom20{width:20% !important;} img.zoom30{width:30% !important;} 
img.zoom40{width:40% !important;} img.zoom50{width:50% !important;} 
img.zoom60{width:60% !important;} img.zoom70{width:70% !important;} 
img.zoom80{width:80% !important;} img.zoom90{width:90% !important;}




/* 以下 INDEX専用CSS に移行予定 ********************************************** /


/* =================================================================
   2nd Page
==================================================================*/

header#titleHeader {width:100%; background:#FF8B00; overflow:hidden; clear:both;}
header#titleHeader div.titleWrap{color:#FFF; width:100%; margin:0 auto; overflow:hidden; clear:both;}
header#titleHeader div.titleBox{width:100%; float:left;}
header#titleHeader div.titleBox h1#pageTitle{font-size:18px; padding: 24px;}
header#titleHeader div.descBox{width:100%; float:left;}
header#titleHeader div.descBox p#descTxt{padding: 18px 24px 22px 24px;}
nav#breadNavi{width:100%; margin:0 auto; overflow:hidden; clear:both; padding: 12px 12px 24px 12px;}
nav#breadNavi ul{font-size:11px; padding:12px 0;}
nav#breadNavi ul li{color:#969696; display:inline;}
nav#breadNavi ul li span,
nav#breadNavi ul li a{color:#969696;}


/* =================================================================
   2nd Page Article
==================================================================*/

div#contentsWrap article#contents section.sectionArea{clear:both;}
div#contentsWrap article#contents aside.topicharfArea p.catDesc{width:240px;}


/* サイトマップ */

div#contentsWrap article#contents h2.catTitle{font-size:18px; padding:5px 0 0 0;}
div#contentsWrap article#contents h2.catTitle span img{padding: 0 0 2px 8px; vertical-align:middle;}
div#contentsWrap article#contents h2.catTitle a{color:#000; text-decoration:none;}
div#contentsWrap article#contents h2.catTitle a:hover{text-decoration:underline;}
div#contentsWrap article#contents h3.catsubTitle{font-size:12px; padding:5px 0 0 0;}
div#contentsWrap article#contents h3.catsubTitle a{color:#7F7F7F; text-decoration:none;}
div#contentsWrap article#contents h3.catsubTitle a:hover{text-decoration:underline;}
div#contentsWrap article#contents ul.mapList{padding:12px 0;}
div#contentsWrap article#contents ul.mapList li{padding: 0 0 5px 0;}
div#contentsWrap article#contents ul.mapList li a{color:#C43338; text-decoration:none;}
div#contentsWrap article#contents ul.mapList li a:hover{text-decoration:underline;}



/* =================================================================
   Hero Area
==================================================================*/

div#heroArea{width:100%; height:auto; margin: 0 0 30px 0; overflow:hidden; clear:both;}
div#heroArea aside#mainVisual{width:100%;}
div#heroArea aside#mainVisual h1 img{width:100%; max-width:100%; height:auto;}

/*---------------------------------------------------------------
  Personal Navi
-------------------------------------------------------------- */

div#heroArea aside#mainVisual nav#personalNavi ul li img{width:100%; display:block;}
div#heroArea nav#personalNavi{font-size:10px; color:#FFF; width:100%; height:auto; overflow:hidden;}

/*---------------------------------------------------------------
  Topic Navi Club Microsoft
-------------------------------------------------------------- */

div#heroArea nav#topicNavi{width:100%; background:#6DC2EB; overflow:hidden;}
div#heroArea nav#topicNavi dl{padding:12px;}
div#heroArea nav#topicNavi dl dt{}
div#heroArea nav#topicNavi dl dd{font-size:11px; color:#1B43A5;}
div#heroArea nav#topicNavi ul{float:left; padding: 0 0 18px 8px;}
div#heroArea nav#topicNavi ul.mobList{float:left; padding: 0 0 18px 0;}
div#heroArea nav#topicNavi ul li{font-size:11px; background:url(/ja-jp/atlife/images/common/ico_arrow_01.gif) no-repeat left top; padding:  2px 4px 4px 20px;}
div#heroArea nav#topicNavi ul li a{color:#FFFFFF;}
div#heroArea nav#topicNavi p img{vertical-align:bottom; width:100%;}


/*  汎用パーツ　*/
.pcContent{display:none;}
.tbSpContent{display:block;}
}