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

 Contents

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

#backImg { position:relative;}
#backImg .left_area { position: absolute; top: 0; left: 50%; margin-left: -765px;}
#backImg .right_area { position: absolute; top: 0; right: 50%; margin-right: -765px;}
#backImg li {
	margin-bottom:4px;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}


/* Section 01 */
#sec01 .left_area { float:left; width:66.66%; padding:0 2px;}
#sec01 .left_area img { display:block; width:100%; height:auto;}
#sec01 .left_area .radius_box { margin-bottom:4px;}

#sec01 .right_area { float:right; width:33.33%; padding:0 2px;}
#sec01 .right_area .radius_box { margin-bottom:4px; border: #EEE 1px solid;}

#sec01 .login_area {
	display:block; padding:20px;
	background:#F7F7F7 url(../images/login_back.png) repeat-x top center;
}
#sec01 .login_area .ttl { display:block; margin-bottom:10px;}
#sec01 .login_area .ttl_sp { display:none;}

#sec01 .login_area .bg_01 { margin-bottom:8px;}
#sec01 .login_area .bg_02 { margin-bottom:0px;}
#sec01 .login_area .bg_02 span {
	padding-left:18px;
	background:url(../images/icon_login.png) no-repeat left center;
	background:url(../images/icon_login_ie.png) no-repeat left center\9;
	background-size:11px 15px;
	-webkit-background-size:11px 15px;
}

#sec01 .my_area {
	display:block; padding:10px 20px 58px;
	background:#FCF9EB url(../images/login_back.png) repeat-x top center;
}
#sec01 .my_area .ttl { display:block; margin-bottom:10px;}
#sec01 .my_area .ttl_sp { display:none;}

#sec01 .my_area .user_name { 
	position:relative; padding-bottom:10px; line-height:54px;
	border-bottom:#F2EDD5 1px solid;
}
#sec01 .my_area .user_name img { position:absolute; top:0; right:0;}
#sec01 .my_area .btn_area { margin-top:10px;}
#sec01 .my_area .btn_area li { float:left; width:50%; padding:2px;}
#sec01 .my_area .btn_area li a { width:100%; display:block; margin:0; padding:0 2px; text-align:left;}
#sec01 .my_area .btn_area li.logout a { text-align:center; color:#fff;}
#sec01 .my_area .btn_area li span {
	padding-left:22px;
	background: url(../common/images/arrow01.png) no-repeat 5px center;
	background: url(../common/images/arrow01_ie.png) no-repeat 5px center\9;
	background-size:13px 13px;
	-webkit-background-size:13px 13px;
}


#sec01 .sns_area { margin-top:28px;}
#sec01 .sns_area p { float:left; width:105px;}
#sec01 .sns_area ul { float:right;}
#sec01 .sns_area ul li { float:left; margin-left:4px;}
#sec01 .sns_area ul li a { display:block;}

#sec01 .item_area li { width:50%; float:left;}
#sec01 .item_area li a { width:100%; display:block; position:relative;}
#sec01 .item_area li img { width:100%; display:block; padding:10px;}
#sec01 .item_area li .disp_on {
	width:100%; height:100%; display:none; padding:38% 20px 0; text-align:center;
	background:url(../images/item_back.png); border:none;
	position:absolute; top:0; left:0;
}

#sec01 .item_area li span.arrow {
	display:inline-block; width:13px; height:13px; margin-top:4px;
}
#sec01 .item_area li.cd01 span.arrow {
	background: url(../common/images/arrow02.png) no-repeat;
	background: url(../common/images/arrow02_ie.png) no-repeat\9;
	background-size:13px 13px;
	-webkit-background-size:13px 13px;
}
#sec01 .item_area li.cd02 span.arrow {
	background: url(../common/images/arrow03.png) no-repeat;
	background: url(../common/images/arrow03_ie.png) no-repeat\9;
	background-size:13px 13px;
	-webkit-background-size:13px 13px;
}

#sec01 .item_area li span.new {
	display:block; width:38px; height:38px;
	position:absolute; top:10px; right:10px;
}
#sec01 .item_area li.cd01 span.new {
	background: url(../images/cd01_new.png) no-repeat;
	background: url(../images/cd01_new_ie.png) no-repeat\9;
	background-size:38px 38px;
	-webkit-background-size:38px 38px;
}
#sec01 .item_area li.cd02 span.new {
	background: url(../images/cd02_new.png) no-repeat;
	background: url(../images/cd02_new_ie.png) no-repeat\9;
	background-size:38px 38px;
	-webkit-background-size:38px 38px;
}

/* Section 02 */
#sec02 .info_box { float:left; width:33.33%; padding:0 2px; position:relative;}
#sec02 .info_box img { width:100%; height:auto;}
#sec02 .info_box .disp_on { display:none; padding:0 2px; position:absolute; top:0; left:0;}
#sec02 .info_box .disp_on h3 { padding:40px; position:absolute; top:0; left:0; font-size:14px; line-height:1.6em;}
#sec02 .info_box .disp_on span.ttl { display:block; font-size:16px; font-weight:bold; margin-bottom:10px;}

#sec02_sp { display:none;}
#sec02_sp .disp_off { width:100%; margin-bottom:1px;}
#sec02_sp .disp_area { display:none;}
#sec02_sp .disp_on {
	padding:20px; margin:0 1px 1px; display:block;
	font-size:16px; font-weight:bold; text-align:center; 
}
#products_sp_hit .disp_on {
	background:#A7E19D url(../images/products_img_icon.png) no-repeat 10px 10px;
	background-size:54px 58px;
	-webkit-background-size:54px 58px;
	margin-bottom:10px;
}
#support_sp_hit .disp_on {
	background:#FCCB71 url(../images/support_img_icon.png) no-repeat 10px 10px;
	background-size:54px 58px;
	-webkit-background-size:54px 58px;
	margin-bottom:10px;
}
#catalog_sp_hit .disp_on {
	background:#F8A7D0 url(../images/catalog_img_icon.png) no-repeat 10px 10px;
	background-size:54px 58px;
	-webkit-background-size:54px 58px;
	margin-bottom:10px;
}

#sec02_sp .disp_on h3 { padding-left:60px; text-align:left; line-height:1.3em;}
#sec02_sp span.btn_02 { font-size:14px; margin:10px auto 0;}


/* Section 03 */
#sec03 .left_area,
#sec03 .right_area { float:left; width:50%;}
#sec03 .left_area .radius_box,
#sec03 .right_area .radius_box { margin:4px 2px 0; }

#sec03 .radius_box a { display:block; height:117px; padding:20px; position:relative;}
#sec03 .radius_box img.box_img { width:80px; height:auto; margin:0; position:absolute; top:20px; left:20px;}
#sec03 .radius_box h3 { padding-left:100px; font-size:12px; line-height:1.6em;}
#sec03 .radius_box h3 span.ttl { display:block; font-size:16px; font-weight:bold; margin-bottom:10px;}
#sec03 .radius_box h3 span.ttl img { width:222px;}

/* Section 04 */
#sec04 .radius_box { margin:4px 2px 0; }
#sec04 .radius_box a { display:block; height:116px; padding:20px; position:relative;}
#sec04 .radius_box img.box_img { width:80px; height:auto; margin:0; position:absolute; top:20px; left:20px;}
#sec04 .radius_box h3 { padding-left:100px; font-size:12px; line-height:1.6em;}
#sec04 .radius_box h3 span.ttl { display:block; font-size:16px; font-weight:bold; margin-bottom:10px;}

#sec04 .radius_box h3 span.ttl img { width:222px;}




/* PC - タブレットスタイル */
@media screen and (max-width: 990px) {
	
	#backImg { display:none;}
	#sec01 .sns_area { display:none;}
	
	#sec01 .my_area { padding:10px 20px 10px;}
	#sec01 .my_area .user_name { line-height:20px;}
	#sec01 .my_area .user_name img { display:none;}
	#sec01 .my_area .btn_area li a { font-size:12px;}
	
}


/* Miniタブレットスタイル */
@media screen and (max-width: 740px) {

	#sec01 .left_area { float:none; width:100%; padding:0 2px;}
	#sec01 .left_area .radius_box {
		margin-bottom: 4px;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	}
	#sec01 .right_area { float:none; width:100%; padding:0 2px;}
	
	#sec01 .login_area {
		display:none;
		width:100%; margin:0; padding:0px 10%; background:none; border:none !important;
		position:absolute; top:46px; left:0; z-index:9999;
	}
	#sec01 .login_area .inner {
		position:relative; background-color:#FFF; padding:0;
		border:#E0E0E0 1px solid;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	}
	#sec01 .login_area .ttl { display:none;}
	#sec01 .login_area .ttl_sp {
		display:block; height:35px; position:relative; padding-left:10px;
		color:#CF9323; font-weight:bold; line-height:35px;
		background-color:#F3F3F3;
	}
	#sec01 .login_area .ttl_sp .close_btn {
		width:35px; height:34px;
		position:absolute; top:0px; right:0px;
	}
	#sec01 .login_area .btn_area { padding:20px;}
	#sec01 .login_area .sns_area {
		display:block; margin:0; padding:20px;
		background-color:#F3F3F3;
	}
	
	#sec01 .my_area {
		display:none;
		width:100%; margin:0; padding:0px 10%; background:none; border:none !important;
		position:absolute; top:46px; left:0; z-index:9999;
	}
	#sec01 .my_area .inner {
		position:relative; background-color:#FFF; padding:0;
		border:#E0E0E0 1px solid;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	}
	#sec01 .my_area .ttl { display:none;}
	#sec01 .my_area .ttl_sp {
		display:block; height:35px; position:relative; padding-left:10px;
		color:#CF9323; font-weight:bold; line-height:35px;
		background-color:#F3F3F3;
	}
	#sec01 .my_area .ttl_sp .close_btn {
		width:35px; height:34px;
		position:absolute; top:0px; right:0px;
	}
	#sec01 .my_area .btn_area { margin:0;}
	#sec01 .my_area .btn_area li { float:none; width:100%; padding:0 10px; border-top:#E0E0E0 1px dotted;}
	#sec01 .my_area .btn_area li.logout { position: absolute; top: 85px; right:0; width:100%; border:none;}
	#sec01 .my_area .btn_area li a {
		border: none;
		height:50px; line-height:50px;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	}
	#sec01 .my_area .btn_area li.logout a {
		height:40px; line-height:40px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	}
	#sec01 .my_area .btn_area li span {
		padding-left:0; display:block;
		background: url(../common/images/arrow01.png) no-repeat right center;
		background: url(../common/images/arrow01_ie.png) no-repeat right center\9;
		background-size:13px 13px;
		-webkit-background-size:13px 13px;
	}
	#sec01 .my_area .user_name { line-height:34px; border:none; padding:10px 10px 55px;}
	#sec01 .my_area .user_name img { display:block; top:10px; right:10px;}
	
	
	
	
	#sec01 .item_area { margin-bottom:4px;}
	#sec01 .item_area li { width:25%;}

	#sec02 .info_box .disp_on h3 { padding:10px; position:absolute; top:0; left:0; font-size:14px; line-height:1.6em;}

	#sec03 .left_area,
	#sec03 .right_area { float:none; width:100%;}
}

/* スマホスタイル */
@media screen and (max-width: 480px) {
	
	#sec01 .item_area { margin-bottom:1px;}
	#sec01 .item_area li { width:50%;}
	#sec01 .left_area { padding:0;}
	#sec01 .left_area .radius_box { margin-bottom:1px;}
	
	#sec01 .login_area { padding:0px 10px;}
	#sec01 .my_area { padding:0px 10px;}
	
	#sec02 { display:none;}
	#sec02_sp { display:block;}
	
	#sec03 .text,
	#sec04 .text { display:none;}
	
	#sec03 .left_area .radius_box,
	#sec03 .right_area .radius_box,
	#sec04 .radius_box {
		margin: 1px 0 0; border: none;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	}
	
	#sec03 .radius_box a,
	#sec04 .radius_box a { padding:10px; height:80px; line-height:80px;}
	
	#sec03 .radius_box img.box_img,
	#sec04 .radius_box img.box_img { width:60px; top:10px; left:10px;}
	#sec03 .radius_box h3,
	#sec04 .radius_box h3 { padding-left:70px; line-height: 60px;}
	
	#sec03 .radius_box h3 span.ttl,
	#sec04 .radius_box h3 span.ttl { margin:0;}
	#sec03 .radius_box h3 span.ttl img { width:180px; margin-top:20px;}
	#sec04 .radius_box h3 span.ttl img { width:180px; margin-top:20px;}
	
	span.arrow01 { position:absolute; top:50%; right:10px; margin-top:-6px;}
}