@charset "utf-8";

/* ==================================================================
	western-garden.css
=================================================================== */

.contents .main > section{
	margin-bottom:0;
}

.contents .main > section p{
	font-size:116%;
    margin-bottom: 20px;
}

/* ==================================================================
	御影石をふんだんに使用した洋風ロックガーデン・造園石工事はオールストーンにおまかせください！
=================================================================== */
#western-garden .f-l{
	font-size:180%;
}
#western-garden .indent-1 {
	margin-bottom: 4%;
}
#western-garden .box01{
	border:#1A885E 3px solid;
	border-radius: 10px; 
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px;
	background:url(../../../images/graveclose/img01.jpg) 0 100% no-repeat;
	padding:25px 25px 10px 200px;
	margin-bottom:55px;
}
	#western-garden .box01 ul{
		overflow:hidden;
		margin:15px 0 20px 0;
	}
	#western-garden .box01 li{
		font-size:200%;
		font-weight:bold;
	}
	#western-garden .box01 p{
		color:#FF0000;
		font-size:340%;
		font-weight:bold;
		line-height:1.2em;
	}

/* ==================================================================
	オールストーンなら自社一貫システムだから安心
=================================================================== */
#western-garden .step{
	overflow:hidden;
	margin-bottom:2%;
}
	#western-garden .step dl{
		float:left;
		width: 47%;
		margin-right: 3%;
        margin-bottom: 20px;
		border:2px solid #bb8624;
		position: relative;
        box-sizing: border-box;
        background-color:#fff9dd;
	}
	#western-garden .step dl:after{
		content: '';
		position: absolute;
		border-left: 10px solid red;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		bottom: 50%;
		right: -17px;
	}
	#western-garden .step dl.last-child:after{
		content: none;
	}
		#western-garden .step dt{
			background-color:#bb8624;
			text-align:center;
			color:#fff;
			padding:5px;
			font-weight:bold;
			font-size:150%;
		}
		#western-garden .step dd.img {
			text-align:center;
            margin-top: 15px;
            position: relative;
		}
		#western-garden .step dd.img span {
            position: absolute;
            background-color: #FF0000;
            color: #fff;
            top: 10px;
            right: 30px;
            display: inline-block;
            padding: 3px 5px;
            font-size: 110%;
            font-weight: bold;
		}
		#western-garden .step dd.txt {
			padding:13px;
			min-height: 60px;
		}

/* ==================================================================
	consultation
=================================================================== */
#western-garden #consultation{
}
		
#western-garden #consultation .division{
}
#western-garden #consultation .division dl.staff{
	overflow:hidden;
}
#western-garden #consultation .division dl.staff dt{
	width:30%;
	float:left;
}
#western-garden #consultation .division dl.staff dd{
	width:60%;
	float:right;
	background:#f4ecdd;
	padding:4%;
	font-size:116%;
    border-radius: 7px;
    font-size: 16px;
}
#western-garden #consultation .division dl.staff dd span{
    font-size: 120%;
    color: #FF0000;
    font-weight: bold;
}
#western-garden #consultation .division ul.image{
	clear:both;
	margin-bottom:5%;
	overflow: hidden;
}
#western-garden #consultation .division ul.image li{
	float:left;
}
#western-garden #consultation .division ul.image li:last-child{
	float:right;
}

/* ==================================================================
	price
=================================================================== */
#western-garden section.price {
    margin-bottom: 50px;
}
#western-garden section.price p.estimate {
    text-align: center;
    background-color: #FF0000;
    color: #fff;
    padding: 15px;
    font-size: 160%;
    font-weight: bold;
    border-radius: 6px;
}
#western-garden section.price ul.cost {
    overflow: hidden;
}
#western-garden section.price ul.cost li {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 20px;
}
#western-garden section.price ul.cost li:nth-child(3n) {
    margin-right: 0;
}

#western-garden section.price ul.cost li.link{
	border:2px solid #c19034;
	box-sizing: border-box;
}

#western-garden section.price ul.cost li.link p.img{
	margin-bottom:0;
}

#western-garden section.price ul.cost li.link dl dt{
	background:#c19034;
	padding: 7% 0;
}

#western-garden section.price ul.cost li.link dl dt a{
	color:#fff;
}

#western-garden section.price ul.cost li p.img {
    margin-bottom: 10px;
}
#western-garden section.price ul.cost li p.img img {
    width: 100%;
}
#western-garden section.price ul.cost li dl {
    font-size: 120%;
    text-align: center;
}
#western-garden section.price ul.cost li dl dd {
    font-weight: bold;
}
#western-garden section.price ul.cost li dl dd span.red {
    color: #FF0000;
}
#western-garden section.price .comment {
    background-color: #f0f0f0;
    padding: 10px;
}

#western-garden section.price .order{
    margin-top: 50px;
}


/* ==================================================================
	stocklist
=================================================================== */
#western-garden section ul.stocklist {
	margin-left:-1%;
	overflow: hidden;
}

#western-garden section ul.stocklist li{
	float:left;
	width:48%;
	margin-left:2%;
	margin-bottom:4%;
}

#western-garden section ul.stocklist li dl dt img{
	width:100%;
	margin-bottom:8px;
}

#western-garden section ul.stocklist li dl dd{
	border-left:3px solid #14694B;
	padding: 8px;
	font-weight:700;
	font-size:112%;
}

#western-garden section ul.stocklist li dl dd span{
	float:right;
}

#western-garden section ul.stocklist li dl dd span.price{
	font-size:112%;
}

#western-garden section ul.stocklist li dl dd span.estimate{
    color: #FF0000;
}

#western-garden section.gardenconstruction ul.stocklist li:first-child dl:after{
	content: '';
    position: absolute;
    border-left: 10px solid red;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    bottom: 50%;
    right: -13px;
}

#western-garden section.gardenconstruction ul.stocklist li:first-child dl,
#western-garden section.gardenconstruction ul.stocklist li:nth-child(2) dl{
	position:relative;
}

#western-garden section.gardenconstruction ul.stocklist li:first-child dl dd{
	position:absolute;
	top: 20px;
    left: 20px;
	color:#fff;
	background:#999;
	border-left:none;
}

#western-garden section.gardenconstruction ul.stocklist li:nth-child(2) dl dd{
	position:absolute;
	top: 20px;
    left: 20px;
	background:#14694B;
	color:#fff;
	border-left:none;
}

#western-garden section .link{
	margin-top: 30px;
    margin-bottom: 30px;
}

#western-garden section .link ul{
	overflow: hidden;
}

#western-garden section .link ul li{
	float: left;
    width: 48%;
    margin-right: 4%;
}

#western-garden section .link ul li a{
	color: #333;
    font-size: 16px;
    display: block;
    padding: 20px 0;
    text-decoration: none;
    border-radius: 5px;
    background: 7% 50% no-repeat #fef6e3;
    transition: all 300ms 0s ease;
    padding-left: 119px;
    border: 2px solid #c38621;
    font-weight: bold;
    line-height: 1.2;
}

#western-garden section .link ul li:last-child{
	margin-right:0;
}

#western-garden section .link ul li:first-child a{
	background-image:url(../../images/item/garden/bg_ishitourou.png)
}

#western-garden section .link ul li:last-child a{
	background-image:url(../../images/item/garden/bg_ishiakari.png)
}

#western-garden section .link ul li a:hover {
    background-color: #c38621;
    color: #fff;
}


/* ==================================================================
	stocklist
=================================================================== */
#western-garden .staffImg {
	margin-bottom:15px;

}

/* ==================================================================
	qa
=================================================================== */
#western-garden section.qalist {
    margin-bottom: 50px;
}
#western-garden section.qalist dl {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
#western-garden section.qalist dl:last-child {
    margin-bottom: 0;
}
#western-garden section.qalist dl dt {
    background:url("../../images/common/icon-question.gif") 0% 50% no-repeat;
    padding: 10px 0 10px 50px;
    font-size: 16px;
    font-weight: bold;
    color: #14694b;
}
#western-garden section.qalist dl dd {
    font-size: 14px;
    background:url("../../images/common/icon-answer.gif") 0 0 no-repeat;
    padding: 8px 0 8px 50px;
}



@media only screen and
(max-width : 640px) {
 
.contents .main section#western-garden img{
	max-width:100%;
	height: auto;
}
 
.contents .main section#western-garden{
	margin: 0 3% 30px;
}

#western-garden .box01 {
	overflow:hidden;
    padding: 3%;
    height: auto;
    margin-bottom: 6%;
	background-size: 35%;
}

#western-garden .box01 p {
    font-size: 120%;
    float: right;
    width: 62%;
}

#western-garden .box01 ul {
	margin: 0px auto 15px;
    width: 62%;
    float: right;
    font-size: 70%;
}

#western-garden .f-l {
    font-size: 130%;
}

#western-garden dl.cost01,
#western-garden dl.cost02,
#western-garden dl.cost05{
    background-size: 15%;
    padding: 0px 0 100px 90px;
}
#western-garden dl.cost03{
    background-size: 19%;
    padding: 20px 0 140px 90px;
}

#western-garden dl.cost04{
    background-size: 19%;
    padding: 20px 0 195px 90px;
}

#western-garden dl.cost dt {
    font-size: 150%;
}

#western-garden dl.cost dd {
    font-size: 200%;
}

#western-garden .step {
    background:none;
    margin-bottom: 15px;
}

#western-garden .step dl {
    float: none;
    width: auto;
    margin: 0 0 20px 0;
}

#western-garden .attention .mlt {
    margin-left: 0;
}


/* ==================================================================
	consultation
=================================================================== */

#western-garden #consultation .division dl.staff{
	display:table;
}

#western-garden #consultation .division dl.staff dt{
	display:table-cell;
	width:30%;
	float:none;
	vertical-align:bottom;
}
#western-garden #consultation .division dl.staff dd{
	display:table-cell;
	width:auto;
	float:none;
	padding:4%;
	font-size:100%;
	position:relative;
}
#western-garden #consultation .division dl.staff dd span{
    font-size: 120%;
    color: #FF0000;
    font-weight: bold;
}
#western-garden #consultation .division ul.image{
	clear:both;
	margin-top:3px;
	margin-bottom:5%;
	overflow: hidden;
}
#western-garden #consultation .division ul.image li{
	width:50%;
}
#western-garden #consultation .division ul.image li img{
	width:95%;
}

/* ==================================================================
	price
=================================================================== */
#western-garden section.price {
    margin-bottom: 10px;
}
#western-garden section.price p.estimate {
    font-size: 120%;
}
#western-garden section.price ul.cost {
    overflow: hidden;
    margin-left: -1%;
}
#western-garden section.price ul.cost li {
    float: left;
    width: 48%;
    margin-left: 2%;
	margin-right:0;
    margin-bottom: 20px;
}
#western-garden section.price ul.cost li:nth-child(3n) {
    margin-left: 2%;
	margin-right:0;
}

#western-garden section.price ul.cost li dl dt,
#western-garden section.price ul.cost li dl dd {
	text-align:left;
	line-height:1.2;
}

#western-garden section.price .order{
    margin-top: 20px;
}
    
    
#western-garden section .link{
	margin-top: 30px;
    margin-bottom: 30px;
}

#western-garden section .link ul{
	overflow: hidden;
}

#western-garden section .link ul li{
	float: none;
    width: auto;
    margin-right: 0;
    margin-bottom: 15px;
}

#western-garden section .link ul li:last-child{
    margin-bottom: 0;
}


    
/* ==================================================================
	stocklist
=================================================================== */
#western-garden section ul.stocklist li dl dd{
	border:0;
	padding:1%;
	font-weight:100;
}


#western-garden section ul.stocklist li dl dd span{
	display:block;
	float:none;
	font-weight:700;
}

#western-garden section ul.stocklist li dl dd span.price{
	font-size:100%;
}

/* ==================================================================
	qa
=================================================================== */
#western-garden section.qalist dl {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#western-garden section.qalist dl:last-child {
    margin-bottom: 0;
}
#western-garden section.qalist dl dt {
    background:url("../../images/common/icon-question.gif") 0% 50% no-repeat;
    padding: 10px 0 10px 50px;
    font-size: 16px;
    font-weight: bold;
    color: #14694b;
}
#western-garden section.qalist dl dd {
    font-size: 14px;
    background:url("../../images/common/icon-answer.gif") 0 0 no-repeat;
    padding: 8px 0 8px 50px;
}