@charset "UTF-8";

/*------------------------------------------------------------------------------
	ウチゲン
	URL: https://www.rakuten.ne.jp/gold/uchigen/
	Copyright (C) 2014 Uchigen Co Ltd., All Rights Reserved.
------------------------------------------------------------------------------*/


/*==============================================================
　body#home : トップ
===============================================================*/


/* #mainVisual 
----------------------------------------------------*/

body#home #mainVisual{
	background:url(../../img/mainVisual/bg_mainVisual.png) no-repeat left top;
	width:700px;
	height:390px;
	padding:5px;
	overflow:hidden;
	position:relative;
	z-index:999;
	margin-bottom:50px;
}

body#home #mainVisual .slides{
	position:relative;
	overflow:hidden;
	margin:0 auto;
	width:700px;
	height:390px;
}
body#home #mainVisual .flexslider .flex-direction-nav a{
	width:26px;
	height:48px;
	text-indent:-9999px;
}



/* Control Nav */
.flex-control-nav {position:absolute; width: 100%; text-align: center; z-index:9999; bottom:0;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 15px; height: 15px; display: block; background: #ccc; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;}
.flex-control-paging li a:hover { background: #f0e30c;}
.flex-control-paging li a.flex-active { background: #f0e30c; cursor: default; }



/* #guide 
----------------------------------------------------*/

body#home #main #guide {
	overflow:hidden;
	margin-bottom:40px;	
}
body#home #main #guide li{
	margin:0 20px 15px 0;	
	float:left;
}
body#home #main #guide li.clearM{
	margin-right:0;	
}



/* #ranking 
----------------------------------------------------*/

body#home #main #ranking {
	overflow:hidden;
	margin-bottom:40px;	
}
body#home #main #ranking .tabs li{
	float:left;	
	margin-right:9px;
	text-indent:-9999px;
	cursor:pointer;
}
body#home #main #ranking .tabs{
	overflow:hidden;	
	margin-bottom:0;
}
body#home #main #ranking .tabs li.tab01{
	background:url(../../img/tab_01.png) no-repeat left top;
	width:232px;
	height:49px;	
}
body#home #main #ranking .tabs li.tab01.active{
	background:url(../../img/tab_01_on.png) no-repeat left top;	
}
body#home #main #ranking .tabs li.tab02{
	background:url(../../img/tab_02.png) no-repeat left top;
	width:230px;
	height:49px;	
}
body#home #main #ranking .tabs li.tab02.active{
	background:url(../../img/tab_02_on.png) no-repeat left top;	
}
body#home #main #ranking .tabs li.tab03{
	background:url(../../img/tab_03.png) no-repeat left top;
	width:230px;
	height:49px;	
	margin-right:0;
}
body#home #main #ranking .tabs li.tab03.active{
	background:url(../../img/tab_03_on.png) no-repeat left top;	
}
body#home #main #ranking .tab_content{
	background:#fff;
	border-left:1px solid #f2eedf;
	border-right:1px solid #f2eedf;
	border-bottom:1px solid #f2eedf;
	padding: 30px 15px 0;	
	overflow:hidden;
}
body#home #main #ranking .tab_content .top3{
	width:480px;
	float:left;
	overflow:hidden;	
}
body#home #main #ranking .tab_content .top3 li{
	float:left;	
	width:150px;
	margin:0 10px 0 0;
}
body#home #main #ranking .tab_content .top3 li .photo{
	width:140px;
	height: 140px;
	text-align: center;
	margin-bottom: 15px;
	overflow: hidden;
}
body#home #main #ranking .tab_content .top3 li a{
	line-height:1.2;	
	overflow:hidden;
	display:block;
}

body#home #main #ranking .tab_content .otherRank{
	width:185px;
	float:right;
	overflow:hidden;	
}
body#home #main #ranking .tab_content .otherRank li{
	clear:left;
	margin-bottom:15px;	
	overflow:hidden;	
}
body#home #main #ranking .tab_content .otherRank li .phoL{
	width:95px;	
	height:95px;
	overflow:hidden;
	float:left;
	margin-right:5px;
}
body#home #main #ranking .tab_content li .photo img,
body#home #main #ranking .tab_content li .phoL img{
	width:100%;
	height:auto;	
}
body#home #main #ranking .tab_content li p{
	margin-bottom:5px;
	font-size:80%;	
}
body#home #main #ranking .tab_content li .price{
	text-align:center;
	font-weight:bold;
}
body#home #main #ranking .tab_content li .rankNo{
	display:block;
	margin-bottom:5px;
}



/* #bnrList 
----------------------------------------------------*/

body#home #main #bnrList{
	margin-bottom:25px;
	overflow:hidden;	
}


/* #voice 
----------------------------------------------------*/

body#home #main #voice{
	clear:both;	
	background:url(../../img/bg_voice.png) repeat-y left top;
	padding-bottom:5px;
}
body#home #main #voice .voiceInner{
	background:#fff;	
	width:700px;
	height:680px;
	overflow:auto;
	margin:0 5px;
}



/*==============================================================
　body#guideFaq : よくあるご質問
===============================================================*/

body#guideFaq #main .section .alignR{
	color:#a88b0d;	
	font-weight:bold;
	margin-bottom:10px;
}
body#guideFaq #main .section .menu dt {
	background-color:#fff;
	background-image:url(../../guide/img/faq/ico_plus.png),url(../../guide/img/faq/ico_question.png);
	background-repeat:no-repeat,no-repeat;
	background-position:98% center,3% center;
	display: block;
	cursor: pointer;
	padding:15px 50px 15px 60px;
	border:1px solid #ccc;
	border-radius:5px;
	-webkit-border-radius:5px;  
    -moz-border-radius:5px;
	margin-bottom:10px;
	font-size:110%;
}
body#guideFaq #main .section .menu dt:hover{
	background-color:#f5efd6;
	background-image:url(../../guide/img/faq/ico_plus.png),url(../../guide/img/faq/ico_question.png);
	background-repeat:no-repeat,no-repeat;
	background-position:98% center,3% center;
}
body#guideFaq #main .section .menu dt.active {
	background-color:#f5efd6;
	background-image:url(../../guide/img/faq/ico_minus.png),url(../../guide/img/faq/ico_question.png);
	background-repeat:no-repeat,no-repeat;
	background-position:98% center,3% center;
}
body#guideFaq #main .section .menu dd {
	display: none;
	padding:10px;
	margin-bottom:10px;
}
body#guideFaq #main .section .menu dd ol,
body#guideFaq #main .section .menu dd ul{
	margin-bottom:0;	
}
body#guideFaq #main .section .menu dd li{
	margin:20px 0 0;
}
body#guideFaq #main .section .menu dd ul li{
	background:url(../../guide/img/faq/ico_arrow_001.png) no-repeat 10px 7px;
	padding-left:30px;	
}
body#guideFaq #main .section .menu dd h3{
	font-size:120%;
	margin:20px 0 10px;
	color:#cda92a;
}



/*==============================================================
　body#guideXyladecor : キシラデコール
===============================================================*/

body#guideXyladecor #main .section p{
	margin-bottom:0;	
}
body#guideXyladecor #main .section h1{
	margin:40px 0 30px;
}
body#guideXyladecor #main .section .point{
	margin-bottom:40px;
}
body#guideXyladecor #main .section .line{
	overflow:hidden;
	margin-bottom:50px;
}	
body#guideXyladecor #main .section .line ul{
	clear:both;
	overflow:hidden;
	margin-bottom:20px;
}



/*==============================================================
　body#guidePaint : きれいに塗るコツ
===============================================================*/

body#guidePaint #main .section h1{
	text-align:center;	
	margin-bottom:30px;
}
body#guidePaint #main .section li{
	margin-bottom:25px;	
}
body#guidePaint #main .section li.odd{
	float:left;
	clear:both;	
}
body#guidePaint #main .section li.even{
	float:right;	
}



/*==============================================================
　body#guideUse : 失敗しない塗り方講座（住宅場所別編）
===============================================================*/


/* #guideUseKawarayane : ベスト瓦屋根の塗り方
----------------------------------------------------*/

body#guideUseKawarayane #main .section iframe{
	margin:30px 0 70px 35px;
}
body#guideUseKawarayane #main .section li{
	overflow:hidden;
	padding-bottom:35px;	
	margin-bottom:8px;
	clear:both;
	background:url(../../guide/use/img/kawarayane/arrow.png) no-repeat 116px bottom;
}
body#guideUseKawarayane #main .section li.last{
	padding-bottom:0;
	background:none;	
	margin-bottom:50px;
}
body#guideUseKawarayane #main .section li img.phoL{
	float:left;
	margin-right:30px;	
}
body#guideUseKawarayane #main .section li img.floatR{
	margin-left:10px;	
}
body#guideUseKawarayane #main .section p.alignC{
	margin-bottom:60px;	
}
body#guideUseKawarayane #main .section p.alignC img{
	margin-bottom:35px;	
}
body#guideUseKawarayane #main .section .attention{
	padding:2px;
	background:#fff;
	border:1px dotted #ef8080;
}
body#guideUseKawarayane #main .section .attention dl{
	border:1px dotted #ef8080;		
	padding:20px 15px;
	margin-bottom:0;
	overflow:hidden;
}
body#guideUseKawarayane #main .section .attention dt{
	float:left;
	padding:5px 20px 5px 0;
	margin-right:20px;
	border-right:1px solid #ccc;	
}



/*==============================================================
　body#postage : 配送料値上げのお詫びとお知らせ
===============================================================*/

body#postage #main .lead h2{
    font-size: 30px;
    text-align: center;
    font-weight: 500;
    color: #9e0001;
    margin-bottom: 30px;
}
body#postage #main .section {
	margin:30px 0;
}
body#postage #main .lead .import{
    border-radius: 10px;
    background: #fff;
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
    width: 60%;
    margin: 0 auto 30px;
    color: #9e0001;
    border: 3px solid #9e0001;
	font-feature-settings : "palt";
}
body#postage #main .section h3{
    background: url(../../img/bg_h2.png) repeat-x left top;
    height: 40px;
    font-size: 140%;
    margin-bottom: 20px;
    padding: 15px 0 0 20px;
    color: #36231d;
	font-weight:500;
}
body#postage #main .section h3 span{
	font-size:15px;
	margin-left:20px;
	color:#cc5f40;
}
body#postage #main .section h4{
	text-align:center;
	margin:50px 0 20px;
	font-size:28px;
}
body#postage #main .section h4 strong{
	padding:0 10px;		
}
body#postage #main .section h4 strong span{
	font-size:70%;
	margin-left:10px;
}
body#postage #main .pay01 h4 strong,
body#postage #main .pay02 h4 strong{
    background: linear-gradient(transparent 65%, #f8c9cc 30%);
	color:#b90b00;
}
body#postage #main .pay03 h4 strong{
    background: linear-gradient(transparent 65%, #d1e2f3 30%);
	color:#005bb9;	
}
body#postage #main .pay04 h4 strong,
body#postage #main .pay05 h4 strong{
    background: linear-gradient(transparent 65%, #d9f0d6 30%);
	color:#1e930e;	
}

body#postage #main .section table {
	width:100%;
	background:#fff;
	margin-bottom:20px;
}
body#postage #main .section table th{
    background: #36231d;
	color:#fff;
}
body#postage #main .section table tbody th{
    color: #36231d;
    background: #e2d7b0;

}
body#postage #main .section table th,
body#postage #main .section table td{
	padding:15px 0;
	text-align:center;
	vertical-align:middle;
	line-height:1.5;
    border: 1px solid #d0c395;
}
body#postage #main .section table td strong{
	color:#b90b00;	
	font-size:120%;
}
body#postage #main .pay2 .import{
    display: block;
    padding: 10px;
    background: #e2d7b0;
    text-decoration: none;
    color: #311f19;
    border-bottom: 1px solid #d0c395;
	text-align:center;
	font-weight:500;
	font-size:120%;
}
body#postage #main .section .list001 li{
	font-size:90%;
	margin-bottom:5px;
}
body#postage #main .section .payment li{
	text-align:center;
	font-size:105%;
	margin-bottom:10px;
	font-weight:500;	
}
body#postage #main .section .emergency{
	border:3px dashed #b90b00;
	padding:1.5em 10px 0;
	background:#fff;
	margin-bottom:20px;
	text-align:center;
	font-weight:500;
}
body#postage #main .section .smpBtn{
	display:none;
}

@media only screen and (max-width:768px) {
	body#postage div#header,
	body#postage div#sub,
	body#postage div#shopGuide,
	body#postage div#footer{
		display:none;
	}
	body#postage div#wrapperInner{
		width:auto;
	}
	body#postage div#main {
		width: auto;
		float: none;
		margin-bottom: 0;
		padding: 0 3%;
	}
	/* tableスクロールバー */
	body#postage div#main .spTbl {
		overflow: auto;
		white-space: nowrap;
		margin-bottom: 10%;
		padding-bottom: 3.2%;
		/*-webkit-overflow-scrolling: touch;*/
	}
	body#postage div#main .spTbl table {
		margin-bottom: 0;
	}
	body#postage div#main .spTbl::-webkit-scrollbar {
		height: 5px;
	}
	body#postage div#main .spTbl::-webkit-scrollbar-track {
		background: #F1F1F1;
	}
	body#postage div#main .spTbl::-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
	body#postage #main .section table th, body#postage #main .section table td{
    	padding: 15px 10px;
	}
	body#postage #main .lead h2 {
		font-size: 1.4rem;
		text-align: left;
		margin-bottom: 5%;
	}
	body#postage #main .lead .import{
		font-size: 1rem;
		width: 95%;
		padding: 10px 0;
		margin: 0 auto;
	}
	body#postage #main .section h4 {
		margin: 8% 0 5%;
		font-size: 1.3rem;
	}
	body#postage #main .section .payment li{
    	font-size: 90%;		
	}
	body#postage #main .section h3 {
		background: #fff url(../../img/bg_h2.png) repeat-x left bottom;
		font-size: 1rem;
		padding: 3% 2% 5%;
    	height: auto;
	}
	body#postage #main .section .emergency,body#postage #main .section .payment li{
    	text-align: left;
	}
	/*body#postage #main .section .smpBtn {
		display: block;
		text-align: center;
		width: 50%;
		margin: 0 auto;
		padding: 4% 0;
		background: #666;
		color: #fff;
	}*/
}
/* #foo : 説明文
----------------------------------------------------*/

/* #foo : 説明文
........................................*/

/* .foo : 説明文 */


/*--EOF-----------------------------------------------------------------------*/