﻿@charset "utf-8";


/*-----------------------------------------------
　　Reset
-------------------------------------------------*/
html{
    overflow-y: scroll;
	}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,form,p{
    margin:0;
    padding:0;
}

body{
	color:#333;
	text-align:center;
	font-size:80%!important;
	font-family:"メイリオ","Meiryo", MS Pゴシック, Verdana, Arial;
	line-height:1.4; 
	background:#fdfbf3;
	}
* {
	font-size: 100%;
}/* 2009 作成 all css の遺産… いずれ削除 */


ul li ,dl,dt,dd {
	list-style-type:none;
	}

table {
	border-collapse:collapse;
	border-spacing:0;
	}
caption, th{
    text-align: left;
	}

textarea {
	font-size: 100%;
	}

img,abbr,acronym,fieldset {
	border:none;
	}

img{
    border:none;
	vertical-align:bottom;
	}

a  {outline:0;}



body#home h1,
body#home h2,
body#home h3,
body#home h4,
body#home h5,
body#home h6,
body#home table,

body#magazine h1,
body#magazine h2,
body#magazine h3,
body#magazine h4,
body#magazine h5,
body#magazine h6,
body#magazine table {
	clear:both;
	}



		/*-----------------------------------------------
		　　旧デザイン(～2011.10.12)  新デザイン(2011.10.12 ～) 併用 CSS
		-------------------------------------------------*/
/* 旧 全体用 // 新デザイン ヘッダーを旧コンテンツとの併用のため、設定 　全てのリニューアル完了次第削除 OK // */
		table{ margin:0 auto; text-align:center;/*IE 下層ページ用で必要*/ }

		/* 旧 コンテンツ内用 */
		#contents_mag,
		#contents_mag2,
		#contents_all_mag #contents_mag,

		/* 旧 記事用 */
		.asoc_contents,
		.asoc_contents_left,
		.asoc_contents_right,
		.asoc_layout_table_270,

		/* インデックス アイコン用 */
		table.asoc_layout_table,

		/* Umall 旧 右ナビ用 */
		#common_mall,
		#common_editorial,
		#common_editorial_contents ,

		#contents_all_mall,
		#contents_contents_mall,
		.m_contents_contents,
		#nd_content,
		
		/* Club */
		#club_body,
		.club_info_txt
			{
			text-align:left;
			}

		/* Club 右ナビ トップ */
		table #common_mall{
			padding-top:0px!important;
			}


/* 旧 右ナビ リンク用 */
		table #common_mall a,
		table #common_editorial a,
		table #common_editorial_contents a {
			text-decoration:none;
			line-height:1.4;
			}

/* 旧 左ナビ用 リンク用 */

		#navi_contents ul li a,
		#navi_contents ul li a:hover,
		#navi_mag_all a,
		#navi_mag_all a:hover,

		#leftContent a ,
		#leftContent a:hover,
		#navi_mall a,
		#navi_mall a:hover {
			text-decoration:none;
			line-height:1.4;
			color:#333;
			}


/* Umall */  #footer_contents_mall
			 {
			background:#fff!important;
			}



/* footer */
/* Magaine */#footer_contents{
			height:10px;
			background:#fff;
			height: auto;
			overflow: hidden;
			padding-bottom:100px;
			}

		#club_body .club_info_box {width:715px;}
		#common_mall div.m_right_contents{/margin-top:10px;}







		/* h1 見出し部分 */
		#contents_contents #h1_box04, 
		#contents_contents_mag #h1_box04{
		    background: url("/ja-jp/atlife/tips/archive/image/template/middle_title.jpg") no-repeat scroll 0 0 transparent;
		    height: 28px;
		    margin-bottom: 10px;
		    width: 580px;
			}

		#contents_contents_mall #h1_box04 {
			background: url("/ja-jp/atlife/tips/archive/image/template/middle_title_campaign_c.jpg") no-repeat scroll 0 0 transparent;
			height: 28px;
			margin-bottom: 10px;
			width: 750px;
		}


		#contents_contents #h1_box04 h1,
		#contents_contents_mag #h1_box04 h1,
		#contents_contents_mall #h1_box04 h1 {
			color: #FFFFFF;
			font-size: 100%;
			margin: 0;
			padding: 6px 0 0 7px;
			}


		/* h2 見出し部分 */

		#contents_contents h2.asoc_h2, 
		#contents_contents_mag h2.asoc_h2,
		#contents_contents_mall h2.asoc_h2 {
			clear: both;
			margin: 20px 0px 20px;
			border-top: solid 1px #999;
			border-bottom: solid 1px #999;
			padding: 5px 10px;
			font-size: 14px;
			font-weight: bold;
			color: #369;
			border-radius:0px;
		}



/*-----------------------------------------------
　　tempHeaderArea
-------------------------------------------------*/
#tempHeaderArea {
	width:925px;
		_width:960px;
	height:30px;
	margin:0px auto 10px auto;
	padding-top:10px;
	padding-right:20px;
	padding-left:20px;
	background:#faf1e4;
	text-align:center;
	}


div.searchArea {
	text-align:center;
	margin: 0 auto;
	}


div.searchArea .description{
	float:left;
	}

/*-----------------------------------------------
　　検索ボックス
-------------------------------------------------*/
.searchbox{
	float: right;
	text-align: left;
	margin-top: -3px;
	/margin-top: -6px;
	}

.searchbox form {
	padding-top: 3px;
	}

.searchText {
	border:2px solid #CCC;
	font-size: 95% !important;
	padding-left:5px;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	color:#666;
	/*background: url("/japan/athome/image/ico/icoBing.gif") no-repeat right center #fff!important;*/
	position: relative;
	right: -28px;
	top: -7px;
	}

/* ボタン */
div.searchArea .icoSearchb {
	background:url(/japan/athome/image/ico/icoSearchb.gif) no-repeat;
	margin-right:3px;
	position: relative;
	top: 0;
		/top:-5px;
		/right:-2px;
	}


.searchButtom{
	border: 0 !important;
	width:40px;
	height:20px;
		/height:30px;
	background: url(/japan/athome/image/ico/icoWeb.gif) no-repeat left bottom !important;
	cursor: pointer;
	position:relative;
	top:-4px;
		/top:-8px;
	}



/*-----------------------------------------------
　　headerArea
-------------------------------------------------*/
#headerArea {
	width:960px;
	height:auto;
	margin:0px auto 10px auto;
	}



#headerArea div.headerAreainner {
	clear:both;
	height:auto;
	}

#headerArea div.headerAreainner h1.logo,
#headerArea div.headerAreainner p.logo {
	float:left;
	margin-bottom:15px;
	}

#tempHeaderArea h1.description{
	font-weight:normal;
	}


#headerArea div.headerAreainner ul.subnavigation{
	float:right;
	width:auto;
	}

body#home #headerArea div.headerAreainner ul.subnavigation,
body#magazine #headerArea div.headerAreainner ul.subnavigation{
	margin-top:0px;
	}


#headerArea div.headerAreainner ul.subnavigation li{
	float:left;
	font-size:14px;
	letter-spacing:0.4;
	margin-top:8px;
	margin-right:-1px;
	padding:2px;
	}



#headerArea div.headerAreainner ul.subnavigation li a{
	width:auto;
	height:35px;
	padding:8px 2px 8px 30px;
	margin-right:10px;
	}
#headerArea div.headerAreainner ul.subnavigation li{ background:url(/japan/athome/image/dotteLine.jpg) no-repeat right center;}
#headerArea div.headerAreainner ul.subnavigation li.rss a{background:url(/japan/athome/image/ico/icorss.gif) no-repeat left center;}
#headerArea div.headerAreainner ul.subnavigation li.first a{background:url(/japan/athome/image/ico/icofirst.gif) no-repeat left center; margin-right:8px; margin-left:8px;}
#headerArea div.headerAreainner ul.subnavigation li.sitemap a{background:url(/japan/athome/image/ico/icositemap.gif) no-repeat left center; margin-left:8px;}


/*-----------------------------------------------
　　Globalnavi
-------------------------------------------------*/
#headerArea div.headerAreainner {
	height:auto;
	}

#headerArea div.headerAreainner ul.globalnavigation li{
	float:left;
	text-indent:-9999px;
	}


#headerArea div.headerAreainner ul.globalnavigation {
	clear:both;
	display:block;
	width:960px;
	height:79px;
	background:url(/japan/athome/image/navigation/gnavi.gif) no-repeat left bottom;
	}

body#home #headerArea div.headerAreainner ul.globalnavigation{
	margin-bottom:10px;
	}


#headerArea div.headerAreainner ul.globalnavigation li.homenavi,
#headerArea div.headerAreainner ul.globalnavigation li.homenavi a {
	display:block;
	width:191px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnHome_off.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.homenavi a:hover {
	background:url(/japan/athome/image/navigation/btnHome_on.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.homenaviOn a {
	display:block;
	width:191px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnHome_on.gif) no-repeat left bottom;
	}



#headerArea div.headerAreainner ul.globalnavigation li.magnavi,
#headerArea div.headerAreainner ul.globalnavigation li.magnavi a {
	display:block;
	width:250px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnMagazine_off.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.magnavi a:hover {
	background:url(/japan/athome/image/navigation/btnMagazine_on.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.magnaviOn a {
	display:block;
	width:250px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnMagazine_on.gif) no-repeat left bottom;
	}



#headerArea div.headerAreainner ul.globalnavigation li.mallnavi,
#headerArea div.headerAreainner ul.globalnavigation li.mallnavi a {
	display:block;
	width:250px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnUmall_off.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.mallnavi a:hover {
	background:url(/japan/athome/image/navigation/btnUmall_on.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.mallnaviOn a {
	display:block;
	width:250px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnUmall_on.gif) no-repeat left bottom;
	}



#headerArea div.headerAreainner ul.globalnavigation li.clubnavi,
#headerArea div.headerAreainner ul.globalnavigation li.clubnavi a {
	display:block;
	width:269px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnClubmicrosoft_off.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.clubnavi a:hover {
	background:url(/japan/athome/image/navigation/btnClubmicrosoft_on.gif) no-repeat left bottom;
	}
#headerArea div.headerAreainner ul.globalnavigation li.clubnaviOn a {
	display:block;
	width:269px;
	height:79px;
	background:url(/japan/athome/image/navigation/btnClubmicrosoft_on.gif) no-repeat left bottom;
	}





/*-----------------------------------------------
　　breadArea
-------------------------------------------------*/
div.breadArea {
	overflow:hidden;
	height:auto;
	width:940px;
	text-align:left;
	padding:7px 10px;
	margin:0.5em  auto 1em auto;
	background:url(/japan/athome/image/dotteLine1.gif) repeat-x left bottom #E9E6D1;
	}
div.breadArea ol li{
	float:left;
	list-style:none;
	margin-right:10px;
	padding-left:17px;
	line-height:1.4;
	color:#333;
	background:url(/japan/athome/image/ico/icoarrowblack1.gif) no-repeat left center;
	}
div.breadArea ol li a{
	color:#333;
	}
div.breadArea ol li a:hover{
	color:#2068FF;
	}

div.breadArea h1{font-weight:normal;}

/*-----------------------------------------------
　　Footer
-------------------------------------------------*/

/* キャンペーン用バナー 告知 */
.footAdArea p{
	display:none;
	}

#footCamp .footAdArea p, 
#magazine .footAdArea p{
	display:block;
	clear:both;
	width:720px!important;
	padding-top:10px;
	padding-left:200px;
	margin:10px auto 0px auto;
	text-align:center;
	}


#magazine2 .footAdArea p{
	display:block;
	clear:both;
	width:960px!important;
	padding-top:20px;
	margin:30px auto 0px auto;
	text-align:center;
	background: url(/japan/athome/image/dotteLine1.gif) repeat-x left top;
	}





.footpagetop{
	clear: both;
	width:75em!important;
	margin:25px auto 4px auto;
	padding:15px 0px;
	background:url(/japan/athome/image/dotteLine1.gif) repeat-x left top;
	}

#footerArea {
	margin-top:10px;
	padding-top:10px;
	padding-bottom:15px;
	background:#faf1e4;
	}

#footerArea .footermainArea {
	width:960px;
	margin:0px auto;
	padding-top:20px;
	padding-bottom:20px;
	text-align:right;
	}


#footerArea .footermainArea div.copyArea{
	float:right;
	width:130px;
	margin-left: 10px;
	}

#footerArea .footermainArea p.copyright {
	clear:both;
	font-size:10px;
	margin-top:5px;
	text-align:center;
	}

#footerArea .footermainArea  p.footerArealogo{
	width:130px;
	margin:5px auto;
	}


#footerArea .footermainArea ul{
	margin-bottom:10px;
	}

#footerArea .footermainArea ul li{
	display:inline;
	}



/*-----------------------------------------------
　　#contentsArea HERO
-------------------------------------------------*/
#contentsArea .maincontentsArea .hero{
	margin-bottom:25px;
	}
	/* main > Line.26 p.subbanner >> margin-bottom:: */


/*-----------------------------------------------
　　#contentsArea p
-------------------------------------------------*/
#contentsArea .maincontentsArea p{
	margin-bottom:15px;
	line-height:1.6;
	}

/*-----------------------------------------------
　　Text Link
-------------------------------------------------*/
a:link    {color:#005bb6; text-decoration: underline;}
a:visited {text-decoration: underline;}
a:hover   {color:#2068FF; text-decoration: none;}
a:active  {text-decoration: underline;}


/*----------------------------------------------
　　headerArea Footer sidenavi Text Link
-------------------------------------------------*/
#headerArea  div.headerAreainner ul.subnavigation a:link,
#footer .footermain a:link,
.tabslider ul a:link {
	color:#333; text-decoration: underline;
	}

#headerArea  div.headerAreainner ul.subnavigation a:visited ,
#footer .footermain a:visited ,
.tabslider ul a:visited {
	color:#333; text-decoration: underline;
	}

#headerArea  div.headerAreainner ul.subnavigation a:hover,
#footer .footermain a:hover,
.tabslider ul a:hover {
	color:#2068FF; text-decoration: none;
	}

#headerArea  div.headerAreainner ul.subnavigation a:active,
#footer .footermain a:active,
.tabslider ul a:active {
	color:#333; text-decoration: underline;
	}


#contentsArea .sidenavigation ul a:link,
#contentsArea .sidenavigation ul a:visited,
#contentsArea .sidenavigation ul a:active{
	color:#333; text-decoration:none;
	}

#contentsArea .sidenavigation ul a:hover{
	color:#2068FF; text-decoration: none;
	}



/*-----------------------------------------------
　　pagetop
-------------------------------------------------*/
.topagetop {
	clear:both;
	overflow:hidden;
	height:1%;
	margin-top:5px;
	margin-bottom:15px;
	}

.topagetop a {
	background:url(/japan/athome/image/pagetop.jpg) no-repeat left center;
	width:76px;
	height:15px;
	text-indent:-9999px;
	float:right;
	}


/*-----------------------------------------------
　　Module
-------------------------------------------------*/

/* ------------------------
 [display none]
---------------------------*/
.dno{display:none;}


/* ------------------------
 [Area]
---------------------------*/
.left  {float:left;}
.right {float:right;}
.clear {clear:both;}
.center{ text-align:center; margin:0 auto;}
.btncenter{clear:both; text-align:center; margin:15px auto;}
.smallcap{text-size:11px; color:#666; margin-right:8px;margin-left:8px;}

.backnone{background:none!important; boreder:none;}
.rnone{margin-right:0px!important;}
.leftimg{float: left; padding-right:10px; padding-bottom:10px; overflow:hidden; height:auto;}
.rightimg{float: right; padding-left:10px; padding-bottom:10px; overflow:hidden; height:auto;}


.button{margin:10px 0px;}
.mt10{margin-top:10px!important;}
.mt20{margin-top:20px!important;}
.mt30{margin-top:30px!important;}
.mt40{margin-top:40px!important;}
.mt50{margin-top:50px!important;}
.mtb10{margin-top:10px!important; margin-bottom:10px!important;}
.mr5{margin-right:5px!important;}
.mr10{margin-right:10px!important;}
.mr20{margin-right:20px!important;}
.mrl10{margin-right:10px!important;margin-left:10px!important;}
.mrnone{margin-right:0px!important;}
.mnone{margin:0px!important;}

.mb13{margin-bottom:13px!important;}
.mb15{margin-bottom:15px!important;}
.mb30{margin-bottom:30px!important;}
.mb50{margin-bottom:50px!important;}
.pd15{padding-bottom:15px!important;}
.bottompm20{padding-bottom:20px; margin-bottom:30px;}

.bbdot{
	border-bottom: 1px dotted #ccc;
	overflow:hidden;
	margin-bottom:10px;
	padding-bottom:10px;
	}

span.paragraph{
	display:block;
	margin-bottom:15px;
	}


/* ------------------------
 [New Icon]
---------------------------*/
span.insertNew {
	margin-right:8px;
	padding:1px 3px;
	color:#fff;
	font-weight:bold;
	font-size:75%;
	background:#B10F58;
	}

span.insertTextnew{
	margin-left:1px;
	color:#B10F58;
	font-size:10px;
	}

/* ------------------------
 [Line]
---------------------------*/
.dotbox{
	overflow:hidden;
	background:url(/japan/athome/image/dotteLine1.gif) repeat-x left bottom;
	}

.uline{
	text-decoration:underline;
	}

/* ------------------------
 [List Arrow]
---------------------------*/
ul.squareArrow li{
	line-height:1.5;
	padding-left:22px;
	background:url(/japan/athome/image/ico/icoarrowblown1.gif) no-repeat left center;
	}


/* ------------------------
 [Round Sercle 角丸]
---------------------------*/
#headerArea  div.headerAreainner div.searchArea,
#magazine #contentsArea .magTipsTitle,
#magazine #contentsArea .magTipsTitle span.explanation,
h1.magTitle, 
h2,
h4.windowsSupport,
h4.officeSupport,

div.sale,
div.breadArea,
.onepoint
	{
	border-radius: 2px;         /* CSS3 */
	-moz-border-radius: 2px;    /* Firefox */
	-webkit-border-radius: 2px; /* Safari,Chrome */
	/*behavior: url(/japan/athome/js/PIE.htc);*/ /* IE 6,7,8 */
	}

div.tabslider ul li span
	{
	border-radius: 2px;         /* CSS3 */
	-moz-border-radius: 2px;    /* Firefox */
	-webkit-border-radius: 2px; /* Safari,Chrome */
	}


#contentsArea .relatedLinkArea ul.reltextList li a,
#contentsArea .relatedLinkArea ul.reltextList li a:hover
	{
	border-radius: 3px;         /* CSS3 */
	-moz-border-radius: 3px;    /* Firefox */
	-webkit-border-radius: 3px; /* Safari,Chrome */
	}



/* ------------------------
 [Group]
 ※Box のオーバーフロー解除
---------------------------*/
/*** by - base.css ***/
#headerArea div.headerAreainner ,
#headerArea div.headerAreainner div.searchArea ,
#headerArea div.headerAreainner ,
#footer, 

/*** by - home.css ***/
.searchbox, 
.searchbox form, 
.anchorLink ul, 
div.introUmall, 
.titlecolumn, 
#contents .magazineArea ul.magNinfo, 
.clubGuide, 
.clubArea , 
.supportArea, 
.anchorLink ul, 
#contents div.umallGuide div.umallGuidebox, 
#contents ul.tomagazine, 

/*** by - main.css ***/
.leftcolumn, 
.rightcolumn, 
.largeLeftcolumn, 
.largeRightcolumn
	{
	overflow:hidden!important;
	}

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
	}


