@charset "UTF-8";
/* base */
body { color: #000; font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", Meiryo, serif; font-size: 14px; line-height: 24px; background: #000; letter-spacing: 1px; }
p { margin-bottom: 10px; }
a { color: #ff2200; }
a:hover { text-decoration: none; }
input { font-size: 100%; }
li { list-style: none; }
.placeholder { color: #aaa!important; }
.left { float: left; }
.right { float: right; }
.clear { display: block; clear: both; height: 1px; line-height: 0px; font-size: 0px; margin-bottom: -1px; }
.clearfix { width: 100%; }
.clearfix:after { content: ""; display: block; clear: both; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.no-margin { margin: 0 !important; }
/* frame */
#wrapper { position: relative; min-width: 1100px; }
#mobile-nav { display: none; }
#header-logo2 { display: none; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: url(../images/bg-header.png); z-index: 100; }
#header-inner { display: table; width: 1200px; height: 80px; margin: 0 auto; }
#header-logo,
#header-nav,
#header-sns { display: table-cell; text-align: center; vertical-align: middle; }
#header-logo { padding: 0 0 10px 0; }
#header-mobile { display: none; }
#header-nav li { display: inline; }
#header-nav a { color: #fff; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; margin: 0 5px 0 0; padding: 0 10px 0 0; border-right: solid 1px #ccc; text-decoration: none; }
#header-nav li:last-child a { margin: 0; padding: 0 0 0 20px; border: none; background: url(../images/ico-mail.png) 0 50% no-repeat; }
#header-sns a:first-child { margin: 0 5px 0 0; }
#copyright { color: #fff; font-size: 12px; height: 50px; line-height: 50px; background: #000; text-align: center;clear: both; }
#footer { font-size: 12px; padding: 30px 0 50px; text-align: center; }
#footer li { display: inline; }
#footer a { margin: 0 0 0 5px; padding: 0 0 0 10px; border-left: solid 1px #ddd; text-decoration: none; }
#footer li:first-child a { margin: 0; padding: 0; border: none; }
#footer a:hover { text-decoration: underline; }
/* pinterest */
.pin-box { position: relative; height: 200px; }
.pin-inner { position: relative; width: 100%; white-space: nowrap; overflow: hidden; }
.pin-item { display: inline-block; position: relative; width: 200px; min-height: 200px; margin: 0 2px 0 0; }
.pin-shop { position: absolute; color: #fff; width: 200px; margin-top: 90px; text-align: center; }
.pin-ico { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url(../images/ico-pin-white.png) no-repeat; z-index: 15; }
.pin-pic { position: absolute; top: 0; left: 0; width: 200px; height: 200px; border-radius: 5px; overflow: hidden; }
.pin-pic img { min-width: 200px; min-height: 200px; }
.pin-txt { display: none; position: absolute; color: #fff; font-size: 12px; line-height: 18px; top: 120px; left: 0; width: 160px; min-height: 40px; padding: 20px; border-radius: 0 0 5px 5px; background: url(../images/black-50.png); z-index: 10; white-space: normal; box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.pin-txt a { color: #fff; }
/* parts */
.box-1 {/*会社概要*/ margin-top: 80px; padding: 30px; border-radius: 10px; background: #fff; }
.box-1 h3 { margin-top: 0; }
.btn-1 {/*キービジュアル*/ display: inline-block; font-size: 13px; width: 210px; margin: 0 5px 0 0; padding: 10px 0; border-radius: 5px; background: url(../images/ico-arrow-green.png) 20px 50% no-repeat #fff; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-2 {/*トップページ*/ display: inline-block; color: #fff; font-size: 16px; width: 360px; padding: 15px 0; border-radius: 5px; background: url(../images/ico-arrow-white.png) 20px 50% no-repeat #306b50; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-3 {/*トップページ（Pinterest）*/ display: inline-block; color: #fff; font-size: 16px; width: 180px; padding: 15px 0; border-radius: 5px; background: url(../images/ico-pin-white.png) 20px 50% no-repeat #306b50; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-4 {/*コンセプト*/ display: inline-block; color: #000; font-size: 16px; width: 300px; margin: 50px 5px 0; padding: 15px 0; border-radius: 10px; background: url(../images/ico-arrow-black.png) 20px 50% no-repeat #fff; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-5 {/*施工の流れ*/ display: inline-block; color: #fff; font-size: 16px; padding: 15px 30px; border: solid 2px #fff; border-radius: 10px; background: url(../images/ico-arrow-white.png) 20px 50% no-repeat; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-6 {/*緑枠*/ display: inline-block; font-size: 16px; padding: 15px 30px; border: solid 2px #306b50; border-radius: 10px; background: url(../images/ico-arrow-green.png) 20px 50% no-repeat; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-7 {/*緑枠（Pinterest）*/ display: inline-block; font-size: 16px; padding: 15px 30px; border: solid 2px #306b50; border-radius: 10px; background: url(../images/ico-tumblr.png) 20px 50% no-repeat; text-indent: 20px; text-align: center; text-decoration: none; }
.btn-8 {/*ショップ*/ display: inline-block; color: #fff; font-size: 16px; width: 100%; padding: 15px 0; border-radius: 5px; background: url(../images/ico-arrow-white.png) 20px 50% no-repeat #306b50; text-align: center; text-decoration: none; }
.btn-1:hover { color: #306b50; }
.btn-set .btn-5 { margin: 0 10px 10px 0; }
.round { border-radius: 10px; }
.style-1 {/* 文字小 */ font-size: 12px; line-height: 20px; }
.tbl-1 {/*トップページ（190px）*/ margin: 50px auto; }
.tbl-1 td { width: 190px; height: 190px; vertical-align: middle; text-align: center; }
.tbl-2 {/*トップページ（260px）*/ margin: 50px auto; }
.tbl-2 td { width: 260px; height: 260px; vertical-align: middle; text-align: center; }
.tbl-3 {/*ガーデン（5つのポイント）*/ margin: 0 auto; }
.tbl-3 td { width: 240px; height: 350px; vertical-align: middle; text-align: center; }
.tbl-4 {/*ガーデン（施工の流れ）*/ margin: 80px auto; }
.tbl-4 td { width: 170px; height: 150px; vertical-align: middle; text-align: center; }
.tbl-5 {/*レイアウト用（ガーデン・ショップ）*/ width: 100%; margin-bottom: 30px; }
.tbl-5 td { width: 50%; padding: 20px; vertical-align: top; }
.tbl-6 {/*汎用（採用ページ）*/ width: 100%; margin: 30px 0 50px; border-collapse: collapse; }
.tbl-6 td { padding: 15px 0 15px 20px; border-bottom: solid 1px #c9d4ce; vertical-align: top; }
.tbl-7 {/*汎用（Shop Information）*/ width: 100%; margin: 0 0 30px; border-collapse: collapse; }
.tbl-7 td { width: auto; padding: 15px 20px 15px 0; border-top: solid 1px #c9d4ce; border-bottom: solid 1px #c9d4ce; vertical-align: top; }
.tbl-8 {/*GardenDesign お庭相談会*/ width: 100%; font-size: 18px; margin-bottom: 5px; border-top: solid 1px #c9d4ce; border-collapse: collapse; }
.tbl-8 td { padding: 10px 0 10px 0; border-bottom: solid 1px #c9d4ce; vertical-align: middle; }
.tbl-8 tr:nth-child(odd) td { padding: 20px 10px 20px 0; }
.tbl-9 { width: 100%; margin: 0px 0 0px; border-collapse: collapse; }
.tbl-9 th { padding: 5px 0 0px 0px; text-align: left; vertical-align: top; }
.tbl-9 td { padding: 5px 0 5px 20px; vertical-align: top; }
.tbl-9 td.pri { padding: 5px 0 5px 20px; text-align: right; vertical-align: top; }