/* +++++++++++++++++++++++++++++++++++　基本レイアウト */

body {
    -webkit-text-size-adjust: 100%;
	min-width:inherit;
	word-break: break-all;
	line-height:1.8em;
	padding-top:33px;
}
img {
	width:100%;
}
.sp-only{
	display:block !important;
}
.pc-only{
	display:none;
}
.content-area{
	width:100%;
	padding:0 20px;
}

/* +++++++++++++++++++++++++++++++++++　共通パーツ */


/* ヘッダー */

#common-header{
	height:33px;
	z-index:100;
}
#common-header-inner{
	width:100%;
	padding: auto 20px;
}
#common-header #header-logo{
	position:absolute;
	top:3px;
	left:10px;
}
#common-header #header-logo img{
	width:70%;
}


/* ナビゲーション */

#common-header .spnavi .toggle{
	display:block;
	position:absolute;
	top:0;
	right:0px;
	width:36px;
	height:33px;
	background: url(../img/sp/navi-btn.jpg) no-repeat left top;
	background-size:100% 100%;
	text-indent:-2000px;
	z-index:100;
}
#common-header .spnavi .open-btn{
	background: url(../img/sp/navi-btn_open.jpg) no-repeat left top;
	background-size:100% 100%;
}
#common-header #g-navi{
    display: none;
	position: absolute;
	z-index:2000;
	top:33px;
	left:0px;
	width:100%;
	background-color:#eee;
}
#common-header #g-navi li{
	float: none;
	margin-right: inherit;
	padding:10px 20px;
	border-bottom: solid 1px #ddd;
}
#common-header #g-navi li a{
	position:relative;
	display:block !important;
	font-size:1em;
	text-decoration:none;
}
#common-header #g-navi li a:after{
	content:"";
	position: absolute;
	top: 50%;
	right: 0px;
	width: 13px;
	height: 13px;
	margin-top:-6px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
#common-header #g-navi li a:hover{
	color:#D1D1D1;
	text-decoration:none;
}
#common-header #g-navi .home-btn{
	padding:10px 20px;
}
#common-header #g-navi .home-btn a{
	display: inline;
	width: inherit;
	height: inherit;
	background: none;
	text-indent: inherit;
}
#common-header #header-contact-btn li{
	margin-right:1em;
	padding:0px;
	display:block;
}
#common-header #g-navi .home-btn a:hover{
	background: none;
}
#common-header #header-contact-btn{
	margin-right:50px;
	padding-top: inherit;
}
#common-header #header-contact-btn li a{
	font-size:0.8em;
	white-space:nowrap;
	min-height: inherit;

}
#common-header #header-contact-btn .contact-btn a{
	padding:2px 0px 2px 20px;
	background: url(../img/common/contact-icon.png) no-repeat left center;
	background-size:15px 15px;
	color:#C8B41E;
}
#common-header #header-contact-btn .d-request-btn a{
	padding:2px 0px 2px 20px;
	background: url(../img/common/d-request-icon.png) no-repeat left center;
	background-size:15px 15px;
	color:#00285A;
}
#common-header #header-contact-btn .contact-btn a:hover{
	background-size:15px 15px;
}
#common-header #header-contact-btn .d-request-btn a:hover{
	background-size:15px 15px;
}





#fadeLayer {
	display:none;
    top: 0;
    left: 0;
	z-index:3;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    position: fixed;
    background: #000;
    opacity: 0.5;
}

/* フッター */

#footer-bg{
}
#footer-bg .content-area{
	padding:0;
}
#footer-bg:before {
	display:none;
}
#footer-bg:after {
	display:none;
}
#footer .company-data {
	padding:20px;
	width:100%;
	float: none;
	background-color:#C8B41E;
}
#footer .company-txt{
	float:left;
	width:45%;
	margin-right:4%;
}
#footer .company-ttl {
	display: block;
	width: 100%;
	font-size:1em;
}
#footer .company-address {
	display: block;
	width: 100%;
	margin-bottom:0;
	font-size:0.6em;
}
#footer .company-tel {
	float:left;
	width:51%;
}

#footer .contact-btn {
	position:relative;
	width:100%;
	float: none;
	z-index:2;
	background-color:#00285A;
}
#footer .contact-btn li {
	width:100%;
	border-bottom: solid 1px #fff;
	border-right: none;
}
#footer .contact-btn a {
	display:block;
	width:100%;
	padding: 1.6em 0;
	text-align:center;
	font-size:1.5em;
	color:#fff;
	text-decoration:none;
}
#footer .contact-btn a span {
	position:relative;
	display:inline-block;
	padding-left:25px;
	white-space:nowrap;
}
#footer .contact-btn a:hover {
	background-color:#7F93AD;
}
#copyright{
	padding: 1em 20px;
}
.footer-company-sp{
	padding: 0 20px;
	
	
}


/* タイトル関連 */

.sub-ttl01{
	margin-bottom:15px;
	padding-bottom:15px;
	font-size:1.5em;
}

/* ---- */

.sub-ttl02{
	width:80%;
	margin: auto auto;
	margin-bottom:25px;
	font-size:1.5em;
	line-height:1.5em;
}
/* ---- */

.sub-ttl03 {
	margin-bottom:10px;
	font-size:1.5em;
}
/* ---- */

.sub-ttl04 {
	padding:10px 0;
	background-color:#656565;
	text-align:center;
	color:#FFF;
	font-size:1.5em;
}


/* お問い合わせボタンリスト */

#content-bottom-contact{
	padding:40px 0 80px 0;
}
.contact-btn-list {
	text-align:center;
}
.contact-btn-list li {
	display:block;
	margin: auto auto;
	white-space:nowrap;
	width:70%;
	margin-bottom:20px;
}
.contact-btn-list li:last-child {
	margin-right: auto;
}
.contact-btn-list li a {
	display:block;
	padding: 0.5em 0;
	border-radius:1000px;
	background-color:#73000A;
	font-size:1.5em;
	color:#FFF;
	text-decoration:none;
}
.contact-btn-list li a:hover {
	background-color:#B97F84;
}


/* だから私は三州瓦を選びました！ */

.point-ttl-sp{
}
.point-ttl-sp img{
	position:relative;
	margin-top:-80px;
}
.point-list{
	padding: 30px 0;
}
.point-list .case-ttl{
	font-size:1.2em;
	line-height:1.5em;
}
.point-list .data{
}
.point-list .case-txt{
	float:left;
	width:48%;
	font-size:0.8em;
}
.point-list .case-photo{
	position: static;
	float:right;
	width:48%;
}
.point-list .case-data{
	width:100%;
	font-size:0.8em;
}


/* よくある質問 */

#faq{
	padding:50px 0;
}
.faq-list{
	padding-top:20px;
}
.faq-list dt{
	min-height:50px;
	margin-bottom:10px;
	padding:0.5em 0 0.5em 60px;
	background: url(../img/common/q-icon.png) no-repeat left top;
	background-size:50px 50px;
	font-size:1.5em;
	line-height:1.4em;
	font-weight:bold;
	color:#00285A;
}
.faq-list dd{
	min-height:50px;
	margin-bottom:30px;
	padding-left:60px;
	background: url(../img/common/a-icon.png) no-repeat left top;
	background-size:50px 50px;
}


/* +++++++++++++++++++++++++++++++++++　トップページ */
#top-main{
	width:100%;
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 54.06%;
	background: url(../img/sp/top-main-img.jpg) no-repeat center top;
	background-size: contain;
}

#top-secret{
	margin-bottom:80px;
}
#top-secret-list{
	margin-bottom:30px;
	display: block;
}
#top-secret-list li{
	width:70%;
	margin: auto auto 20px auto;
	text-align:center;
}
#top-secret-list .top-secret-ttl{
	margin-bottom:15px;
	padding:10px 0;
	font-size:1.2em;
}
#top-secret-list .top-secret-icon img{
	width:70%;
}
#top-secret-list li p{
	padding: 15px 25px;
}



/* +++++++++++++++++++++++++++++++++++　お財布にやさしい瓦 */

#price-content01{
	padding:40px 0 80px 0;
}
#price-main{
	padding:40px 0;
	text-align:center;
}
#price-main .icon{
	margin-bottom:40px;
}
#price-main .icon img{
	width:20%;
}
#price-main .ttl{
	margin-bottom:30px;
	font-size:2em;
}
#price-main .txt{
	padding: 0 40px;
}
#price-flow{
	margin-bottom:60px;
	text-align:center;
}
.price-point-txt{
	float: none;
	width: inherit;
	margin-bottom:30px;
}
.price-point-txt p{
	margin-bottom:20px;
}
.price-point-photo{
	float: none;
	width: inherit;
	padding:20px;
}
.price-point-photo li{
	float:left;
	width:48%;
	margin-bottom:0;
	text-align:center;
}

.price-point-photo li:nth-child(2n){
	float:right;
}




/* +++++++++++++++++++++++++++++++++++　商品ラインナップ */

#product-universal .content-area{
	min-height: inherit;
	padding-right: inherit;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding: 88.1% 50px 60px 50px;
	background: url(../img/sp/universal-bg.jpg) no-repeat right top;
	background-size: contain;
	
}
#product-provence .content-area{
	min-height: inherit;
	padding-left: inherit;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding: 88.1% 50px 60px 50px;
	background: url(../img/sp/provence-bg.jpg) no-repeat left top;
	background-size: contain;
}
#product-simple .content-area{
	min-height: inherit;
	padding-right: inherit;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding: 88.1% 50px 60px 50px;
	background: url(../img/sp/simple-bg.jpg) no-repeat right top;
	background-size: contain;
}
#product-modern .content-area{
	min-height: inherit;
	padding-left: inherit;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding: 88.1% 50px 60px 50px;
	background: url(../img/sp/modern-bg.jpg) no-repeat left top;
	background-size: contain;
}
#product-japanese .content-area{
	min-height: inherit;
	padding-right: inherit;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding: 88.1% 50px 60px 50px;
	background: url(../img/sp/japanese-bg.jpg) no-repeat right top;
	background-size: contain;
}
#product-bg{
	padding:0px 0 20px 0;
}
#product-main{
	padding:40px 0;
	text-align:center;
}
#product-main .icon{
	margin-bottom:40px;
}
#product-main .icon img{
	width:20%;
}
#product-main .ttl{
	margin-bottom:30px;
	font-size:2em;
}
#product-main .txt{
	padding: 0 40px;
}

#product-nav{
	padding:10px 0 0 0;
	background-color:#C8B41E;
}
#product-nav ul{
	width:100%;
	padding:0 20px;
	text-align:center;
}
#product-nav li{
	float: none;
	margin-bottom:15px;
	margin-right:20px;
	letter-spacing:0em;
}
#product-nav li a{
	position:relative;
	display:inline-block;
	white-space:nowrap;
	padding-left:20px;
	color:#FFF;
	font-size:1em;
	text-decoration:none;
}
#product-nav li a:before{
	content:"";
	position: absolute;
	top: 50%;
	left: 0px;
	width: 13px;
	height: 13px;
	margin-top:-7px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.product-list-ttl{
	padding-top:30px;
	margin-bottom:30px;
}
.product-list-ttl img{
	width: auto;
	zoom: .7;
}

.kawara-name{
	margin-bottom:25px;
	padding:5px;
	border: solid 1px #00285A;
	text-align:center;
	color:#00285A;
	font-size:1em;
}

/*  */

.kawara-tow-column .photo{
	margin-bottom:20px;
	text-align:center;
}
.kawara-tow-column .photo img{
	width: auto;
	zoom: .7;
}

.kawara-tow-column li{
	float: none;
	width:100%;
	margin-right:0;
	margin-bottom:40px;
}
.kawara-tow-column li:last-child{
	margin-bottom:0;
}

/*  */

.kawara-one-column{
}
.kawara-one-column .photo{
	float: none;
	width:100%;
	margin-bottom:20px;
	text-align:center;
}
.kawara-one-column .photo img{
	width: auto;
	zoom: .7;
}
.kawara-one-column .txt{
	float: none;
	width:100%;
}



/* +++++++++++++++++++++++++++++++++++　自然に強い */

#nature-bg{
	background-color:#FEFFF1;
}
#nature-main{
	padding:40px 0;
	text-align:center;
}
#nature-main .icon{
	margin-bottom:40px;
}
#nature-main .icon img{
	width:20%;
}
#nature-main .ttl{
	margin-bottom:30px;
	font-size:2em;
}
#nature-main .txt{
	margin-bottom:20px;
	padding: 0 40px;
}

#nature-nav{
	width:100%;
	padding:0 30px;
}
#nature-nav li{
	float:left;
	width:45%;
	margin-bottom:10px;
	margin-right:10%;
}
#nature-nav li:nth-child(2n){
	margin-right:0%;
}
#nature-nav li a{
	font-size:1.2em;
}
#nature-nav li a:hover{
	filter: alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 
}
#nature-nav li:last-child{
	margin-right:0px;
}
#nature-nav li:nth-child(1n) a{
	background-color:#005064;
}
#nature-nav li:nth-child(2n) a{
	background-color:#DC9931;
}
#nature-nav li:nth-child(3n) a{
	background-color:#AE6565;
}
#nature-nav li:nth-child(4n) a{
	background-color:#73000A;
}


#nature-content04{
	border-top: solid 1px #00285A;
}
.nature-ttl{
	margin-bottom:30px;
	font-size:1.5em;
}
.nature-ttl01{
	background-color:#005064;
}
.nature-ttl02{
	background-color:#DC9931;
}
.nature-ttl03{
	background-color:#AE6565;
}
.nature-ttl04{
	margin-bottom:20px;
	text-align:center;
	font-weight:normal;
	color:#00285A;
	font-size:2em;
}

/*  */

.main-movie-area{
	margin-bottom:30px;
	padding-bottom: inherit;
	border: none;
}
.main-movie-area .movie-box{
	float: none;
	width: inherit;
	margin-bottom:20px;
}
.main-movie-area .movie-data{
	float: none;
	width: inherit;
}
.movie-ttl01{
	position:relative;
	margin-bottom:15px;
	padding:5px 10px;
	background-color:#00285A;
	font-size:1.2em;
	color:#fff;
}
.movie-ttl01 span{
	position:absolute;
	right:10px;
}
.movie-ttl02{
	margin-bottom:10px;
	font-size:1.3em;
	color:#00285A;
}
.movie-ttl02 span{
	margin-bottom:5px;
	padding:2px 10px;
	background-color:#00285A;
	color:#fff;
	font-size:0.8em;
}
.movie-list{
	margin-bottom:20px;
}
.movie-list li{
	float: none;
	width: inherit;
	margin-right: inherit;
}
.movie-list li:after{content:".";display:block;height:0px;clear:both;visibility:hidden; overflow:hidden;}

.movie-list .movie-box{
	float:left;
	width:55%;
	margin-bottom: inherit;
}
.movie-list .movie-data{
	float:right;
	width:42%;
}
.other-movie-btn{
	margin-bottom:20px;
	text-align:center;
}
.other-movie-btn a{
	text-align:center;
	display: inline-block;
	padding: 0.5em 1em;
	border-radius:1000px;
	background-color:#005064;
	font-size:1.2em;
	color:#FFF;
	text-decoration:none;
	white-space:nowrap;
}
.other-movie-btn a:hover {
	filter: alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 
}

/*  */

#nature-content02 .txt{
	float: none;
	width: inherit;
	margin-bottom:35px;
}
#nature-content02 .txt p{
	margin-bottom:35px;
}
#nature-content02 .photo{
	float: none;
}

/*  */

#nature-content03 .txt{
	float: none;
	width: inherit;
	margin-bottom:35px;
}
#nature-content03 .txt p{
	margin-bottom:35px;
}
#nature-content03 .photo{
	float: none;
}

/*  */

#nature-content04-table{
	width:100%;
}
.nature-content04-txt{
	width:100%;
}
