@charset "UTF-8";

/* preset */
*, *:before, *:after{-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

:root{
	--black:#343735;
	--lebois-green:#48724c;
	--green:#5ea829;
	--green-deep:#245837;
	--hover:#97cb67;
	--serif:'Noto Serif JP', serif;
	--sans:'Noto Sans JP', sans-serif;
	--en:'Playfair Display', serif;
	--border-thin:1px solid #cad7d1;
	--border2px:2px solid #e2e9e5;
	--border2pxdot:2px dotted #e2e9e5;
	--border-solid: 1px solid #e0e6e6;
	}

body{font-family:var(--sans);background-color:#f2f4f3;color:var(--black);margin:0;padding:0;}
@media (max-width:767px){body{font-size:16px;}}
@media (min-width:768px){body{font-size:14px;}}
ul,ol,li,dd,dt,dl,address,table,tr,td,div,form,th,label,legend{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:normal;line-height:1.8rem;}
p,ul,ol,li,dd,dt,dl,address,table,tr,td,div,form,label,em{font-weight:normal;font-style:normal;line-height:1rem;letter-spacing:0.02rem;}
ul,ol,li{list-style-type:none;}
table{border-collapse:collapse;}
th{text-align:inherit;}
caption{caption-side:bottom;}
img{max-width:100%;height:auto;border-style:none;}
main,header,footer,section,article{position:relative;margin:0;padding:0;}
figure{margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;}

/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

p{margin:0;padding:0;text-align:justify;line-height:1.7rem;}
p ~ p{margin-top:15px;}
p img,p svg,li img,li svg{vertical-align:middle;padding-bottom:0.2em;}
th,td{line-height:1.4rem;letter-spacing:0.02rem;}

@media (max-width:767px){p,li,td,dd{font-size:15px;}}
@media (min-width:768px){p,li,td,dd{font-size:14px;}}

/* a */
a{color:#48724c;text-decoration:none;transition: all 0.3s ease 0s;border:0;backface-visibility:hidden;}
a:hover{color:var(--hover);}
a .st0{fill:#48724c;}
a:hover .st0{fill:var(--hover);}

/* btn */
.btn{font-family:var(--serif);position:relative;background-color:#cad7d1;transition: all 0.3s ease 0s;line-height:1rem;border:0;letter-spacing:0.2em;}
.btn .en{font-family:var(--en);letter-spacing:0;}

a:hover .btn,a:hover.btn,button:hover{background-color:#7db364;color:white;}
#column .column_nav .btn:hover{color:white;}
#company .btn:hover span{color:white;}
#instagram .btn:hover{background-color:#7db364;color:white;}
.btn.small:before,.btn.more:before{position:absolute;right:30px;top:50%;content:url('../img/arrow_small_right.svg');transform:translateY(-50%);z-index:2;}
.btn.small,.btn.more{display:inline-block;font-size:16px;letter-spacing:0.15em;text-align:center;padding:8px 60px;}
button.btn.small.reset:before{position:absolute;left:30px;right:auto;top:50%;content:url('../img/arrow_small_left.svg');transform:translateY(-50%);z-index:2;}
.btn:before{position:absolute;right:30px;top:50%;content:url('../img/arrow_right.svg');transform:translateY(-50%);z-index:2;}
@media (max-width:599px){
button.btn.small.reset:before{left:15px;}
.btn.small:before,.btn.more:before{right:15px;}
.btn:before{right:15px;}
}

/* a img*/
a img,a .st0{transition:.3s ease-in-out;}
a:hover.btn.trimming:after,
a:hover .trimming:after{background-color:rgba(255,255,255,.5);}
a:hover.btn.trimming:before,
a:hover .trimming:before{font-size:16px;}
a:hover.btn.trimming img,
a:hover .trimming img{transition:.3s ease-in-out;transform:scale(1.4);opacity:0.7;}

a.trimming:after{transition:0.5s;content:'';background-color:rgba(255,255,255,.0);position:absolute;top:0;right:0;bottom:0;left:0;}
a.trimming:before{white-space: pre;z-index:2;font-size:14px;position: absolute;margin:0;padding:0;right:0%;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);color:#fff;font-family:'Noto Serif JP', serif;transition:0.5s;text-align:center;line-height:1.5rem;}


/*  img trimming */

.trimming{z-index:1;overflow:hidden;position:relative;flex-wrap:wrap;justify-content:center;}
.trimming img{object-fit:cover;min-height:100%;min-width:100%;transition:.3s ease-in-out;position: absolute; top: 0}
a .trimming img{object-fit:cover;min-height:100%;min-width:100%;}
a:hover .trimming img{object-fit:cover;min-height:100%;min-width:100%;transform:scale(1.3);opacity:0.8;}

/* breadcrumbs */
#breadcrumbs p{margin:16px 0 0 25px;font-size:12px;}
#breadcrumbs p span::before{content: '＞' ;font-family:var(--sans);margin: 0 6px;}
#breadcrumbs p span:first-child{position: relative;}
#breadcrumbs p span:first-child::before{content: '';margin: 0;}

@media screen and (min-width:600px) {
#breadcrumbs p{margin:16px 0 0 55px;}
}

/* page_links */
#page_links a,
#cad_links a,.link_inside{position:relative;}

.link_inside:after{position:absolute;display:inline-block;content:url('../img/arrow_down_green.svg');right:30px;top:50%;
transform:translateY(-50%);}
@media screen and (min-width:600px) {
.link_inside:after{right:55px;}
}
@media screen and (min-width:900px) {
.link_inside:after{position:relative;display:inline-block;margin:25px auto 0;right:auto;top:auto;bottom:0;}
}

.link_other:after{position:absolute;display:inline-block;content:url('../img/arrow_right_green.svg');right:30px;top:50%;transform:translateY(-50%);}

@media screen and (min-width:900px) {
.link_other:after{position:relative;margin:25px auto 0;right:auto;top:auto;}
}

.link_inside_up:after{position:relative;display:inline-block;content:url('../img/arrow_up_green.svg');margin:25px auto 0;}

/* footer */
/* info_contact */
#info_contact{padding:50px 25px;background-color:white;}
#info_contact a{border-bottom:solid 2px #cad7d1;display:block;padding:20px 0;}
#info_contact li a:hover{color:#7db364;}
#info_contact a:first-child{border-top:solid 2px #cad7d1;}
@media screen and (min-width:600px) {
#info_contact{padding:90px 55px;}
#info_contact a{padding:20px;}
}
@media screen and (min-width:750px) {
#info_contact{display:flex;flex-wrap:wrap;justify-content:space-between;}
#info_contact a{flex:1;padding:0;}
#info_contact a{border:0;border-right:solid 2px #cad7d1;}
#info_contact a:first-child{border:0;border-left:solid 2px #cad7d1;border-right:solid 2px #cad7d1;}
}

#info_contact h2{font-family: var(--serif);font-size:18px;margin-bottom: 18px;}

#info_contact .phone .icon svg{width: 46px;height: 57px;margin-bottom: 13px;}
#info_contact .phone{display: flex;justify-content: center;align-items: center;flex-direction: column;}
#info_contact .tel-btn{font-size: 36px;font-family: var(--serif);margin-bottom:3px;}
#info_contact .time{font-size: 16px;font-family: var(--sans);margin-top:3px;}

#info_contact .form h2{margin-bottom: 26px;}
#info_contact .form .icon svg{width: 46px;height: 38px;margin-bottom: 18px;}
#info_contact .form{display: flex;justify-content: center;align-items: center;flex-direction: column;}
#info_contact .form span.en{font-size: 18px;font-family: var(--en);}
#info_contact .form span.jp{font-size: 28px;font-family: var(--serif);margin-top:4px;}
#info_contact .form p{display: flex;justify-content: center;align-items: center;flex-direction: column;}

@media screen and (max-width:599px) {
#info_contact .tel-btn{font-size: 28px;}
#info_contact .form span.jp{font-size: 20px;}
}


/* sitemap */
#sitemap h2, #sitemap h3{margin-bottom:13px;}
#sitemap h3 a{font-size:13px;}
#sitemap a{font-size:12px;}
#sitemap > div{flex: 1;}
#sitemap ul ~ ul{margin-top:13px;}

@media screen and (min-width:700px) {
#sitemap{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:30px;margin:90px 55px;}
#sitemap li{padding:3px 0;}
}
@media screen and (min-width:1000px) {
#sitemap{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;margin:90px 90px;}
}

@media screen and (max-width:699px) {
#sitemap{display:block;margin:30px 0 2px;}
.accordion-single  {border-bottom: 1px solid #efefef;margin-top: 10px;}

#sitemap h2{padding-left:40px;}
#sitemap h3{border-top:2px solid #efefef;padding:20px 40px;cursor: pointer;position: relative;font-size: 20px;margin: 0;}
#sitemap h3:hover{background-color:white;}
#sitemap li{border-top:2px solid #efefef;cursor: pointer;position: relative;margin: 0;}
#sitemap li a{display:block;padding:20px 40px;background-color:#e2e9e5;}
#sitemap li a:hover{background-color:#49524c;}
#sitemap ul ~ ul{margin-top:0;}
.accordion-single-title::after{
content: "";
position: absolute;
right: 25px;
top: 50%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #999;
border-right: solid 2px #999;
transform: translateY(-50%) rotate(135deg);
}
.accordion-single-content {max-height:0;overflow:hidden;transition:.3s ease-in-out;}
.accordion-single-item.is-open .accordion-single-content{max-height:500px;}
.accordion-single-item.is-open .accordion-single-title::after{transform: translateY(-50%) rotate(315deg);}
}

/* sns */
#sns{background-color:white;padding:45px;}
#sns p{font-family: var(--en);text-align:center;font-size:20px;margin-bottom:15px;letter-spacing:0.05em;}
#sns .sns-list{display:flex;align-items:center;justify-content:center;}
#sns .sns-list li{display:inline-block;}
#sns .sns-list li a{display:inline-block;border-radius:50%;width:44px;height:44px;background-color:var(--black);display:flex;align-items:center;justify-content:center;margin:0 15px;}
#sns .sns-list li a:hover{background-color:var(--hover)}

/* page top */
#page_top{position: fixed;right: 0px;bottom: 45px;z-index: 1;}

/* copyright */
#copyright{background-color:var(--black);color:white;display:flex;align-items:center;justify-content:center;height:50px;}
#copyright p{font-size:11px;letter-spacing:0;}

/* h1,h2,h3,h4,h5,h6 */
.headline{text-align:center;color:#245837;}

.jp{font-family:var(--serif);display:block;}
.en,.en-lebois{font-family:var(--en);display:block;}
h1 .jp,h2 .jp,h3 .jp,h4 .jp,h5 .jp,h6 .jp{letter-spacing:0.1rem;}

h2.headline,h3.headline{margin-bottom:60px;font-size:16px;line-height:1.5rem;}

h3.headline .en{font-size:36px;}
h3.headline .jp{font-size:14px;margin-top:16px;}
@media screen and (max-width:599px) {h3.headline .en{font-size:28px;}}

#headline{padding:90px 55px;text-align:center;}
#headline h1{color:#245837;position:relative;display:inline-block;margin-bottom:1em;}
#headline h1 .subhead{font-family:var(--serif);font-size:18px;letter-spacing:0.15em;}
#headline h1 .en{font-size:60px;line-height:2.8rem;}
#headline h1 .en-lebois{font-size:80px;margin-top:40px;}
#headline h1 .en-sub{font-size:42px;margin-top:16px;color:#72ae56;display:inline-block;position:relative;top:-14px;margin-right:15px;}
#headline h1 .jp{font-size:16px;margin-top:25px;}

#headline h1:before{content:'';position:absolute;left: 50%;bottom: -25px;display:inline-block;width:70px;height:2px;transform:translateX(-50%);background-color:#dae0dd;}

h2.lead{font-family:var(--serif);margin-top:30px;font-size:24px;letter-spacing:0.1em;line-height:2em;}
div.lead, div.lead p{text-align:center;margin-top:35px;font-size:15px;letter-spacing:0.07em;line-height:1.9em;}
h2 + P.lead{margin-top:20px;}

@media screen and (max-width:799px) {
h2.lead{font-size:18px;letter-spacing:0.05em;}
}
@media screen and (max-width:599px) {
#headline{padding:80px 25px;text-align:center;}
#headline h1 .subhead{font-size:17px;letter-spacing:0.1em;}
#headline h1 .en{font-size:54px;}
#headline h1 .en-lebois{font-size:60px;}
#headline h1 .en-sub{font-size:30px;}
}

.right{text-align:right;}
.center{text-align:center;}

@media screen and (max-width:599px) {
br.pc{display:none;}
br.mb{display:inline;}
}
@media screen and (min-width:600px) {
br.pc{display:inline;}
br.mb{display:none;}
}

/* for rouph design */
.trimming{color:white;}

/* list mark */
.check li{position:relative;padding-left:40px;}
.check li:before{position:absolute;left:0;top:1px;font-family:"Font Awesome 5 Free";font-weight:900;content:'\f00c';}

.point li{position:relative;padding-left:25px;line-height:2.2em;}
.point li:before{position:absolute;left:0;top:1px;font-family:"Font Awesome 5 Free";font-weight:900;content:'\f111';color:white;}

/* works */
#works .category a.trimming:after{background-color:rgba(51,69,61,.2);}
#works .category a.trimming:hover:after{background-color:rgba(20,30,35,.5);}

.trimming.gate:before{content:"Gate\A門・門柱・門壁";width:100%;}
.trimming.approach:before{content:"Approach\A玄関・アプローチ";width:100%;}
.trimming.fence:before{content:"Fence\Aフェンス";width:100%;}
.trimming.parking:before{content:"Parking＆Carport\A駐車場・カーポート";width:100%;}
.trimming.garden:before{content:"Garden\A庭・設備";width:100%;}
.trimming.planting:before{content:"Planting\A植栽";width:100%;}
.trimming.lighting:before{content:"Lighting\A照明";width:100%;}
.trimming.waterplace:before{content:"Water Place\A屋外水まわり";width:100%;}
.trimming.design:before{content:"Design\A設計";width:100%;}

/* column */
#column .container a i:hover{color:#72ae56;z-index: 2;}

#page-top {position:fixed;bottom:50px;right:0;opacity:0;z-index:3;width:55px;height:55px;display:flex;justify-content:center;align-items:center;}
#page-top.fade-in{background-color:var(--black);opacity:.8;transition: opacity 1s;}
#page-top:hover.fade-in{background-color:var(--hover);}

.fade-in {opacity: 0;transition-duration: 500ms;transition-property: opacity, transform;}
.fade-in-up {transform: translate(0, 50px);}
.fade-in-down {transform: translate(0, -50px);}
.fade-in-left {transform: translate(-50px, 0);}
.fade-in-right {transform: translate(50px, 0);}
.scroll-in {opacity: 1;transform: translate(0, 0);}

/* pagination */
.pagination{display: flex;justify-content: center;margin-top: 45px;}
.pagination a{display: inline-block;width: 25px;height: 35px;background-color: #cad7d1;border-radius: 5px / 5px;text-align: center;line-height: 35px;}
.pagination a.active{background-color: #72ae56;}
.pagination a:hover{background-color: #72ae56;}
.pagination .page-numbers{font-size: 14px;margin: 0 10px;}


/* WP-Admin */
.admin-bar #wpadminbar {
	position: fixed !important;
	top: auto;
	bottom: 0;
	z-index: 80 !important;
	}
	.admin-bar #wpadminbar img {
	opacity: 1;
	}
	.admin-bar .btn-top {
	bottom: 50px;
	}
	.admin-bar .menupop .ab-sub-wrapper {
	bottom: 100%;
	}