@charset "utf-8";
/* ===========================================================
 *
 * 想庭樹 スタイルシート
 * Last UpDate : 2022/10/13
 *
=========================================================== */

/* ----------------------------------------------------------
	style.css
---------------------------------------------------------- */

/* ----------------------------------------------------------
 common
---------------------------------------------------------- */


html {
  font-feature-settings: "palt";
}

body {
color: #333;
background-color: #fff;
font-family: "Helvetica Neue", "Helvetica","source-han-sans-japanese","Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
/*
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .h2Wrap{ line-height: 1.7 !important; }

}
*/




/* ----------------------------------------------------------
 link
---------------------------------------------------------- */
/*a:link		{ color: #fff; text-decoration: none; }
a:visited	{ color: #333; text-decoration: none; }
a:hover		{ color: #425a9f; text-decoration: none; }
a:active	{ color: #425a9f; text-decoration: none; }*/



/* ----------------------------------------------------------
 header
---------------------------------------------------------- */

header{  box-shadow: 0px 8px 16px -6px rgba(0,0,0,0.3); position: fixed; width: 100%; background: rgba(255, 255, 255, 1); height: 100px; overflow: hidden; z-index: 999;}
.header_sec{ margin: 0 0 0 auto; display: flex; height: 100px; align-items: center;}
.header_logo01{}
.header_logo01 a{}

.header_navi{margin: 0 0 0 auto;}
.header_navi .gnavi{display: flex; height: 100px;}
.header_navi ul{display: flex;  font-weight: 700; font-style: normal; gap: 25px; align-items: center; margin-right: 20px;}
.header_item01{font-weight: 400; font-size: 1.7rem;}

.header_item02{margin-right: 30px;}
.header_item02 p{display: block; font-weight: 700; background-color: #eee; text-align: center; font-size: 1.4rem; padding: 7px 10px;}
.header_contact_item{display: flex; gap: 20px; margin-top: 15px;}
.header_telnumber i{font-size: 1.5rem; color: #fff; padding: 7px; background-color: #008C23; border-radius: 100%; margin-right: 5px;}
.header_form{}
.header_form a{color: #fff; background-color: #E88E00; font-size: 1.5rem; font-weight: 700; padding: 5px 15px; border-radius: 6px; border: 1px solid #E88E00; transition: .5s;}
.header_form a:hover{color: #E88E00; background-color: #fff; transition: .5s;}
.header_form i{margin-right: 10px;}
.header_instagram{text-align: center; width: 100px; font-size: 5rem;}
.header_instagram a{color: #fff; background-color: #666; display: block; padding: 13px 0 12px; transition: .5s;}
.header_instagram a:hover{color: #666; background-color: #fff; transition: .5s;}


.header_item01 a{
	position: relative;
	display: inline-block;
	text-decoration: none;
  }
  
.header_item01 a::after{
	position: absolute;
	bottom: -30px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	opacity: 0;
	visibility: hidden;
	transition: .4s;
	background-color: #008C23;
  }
.header_item01 a:hover::after {
	bottom: -10px;
	opacity: 1;
	visibility: visible;
  }


/*ACCORDION toggle*/
 
	.accordion_logo{width: 80%; margin: 0 auto 30px; text-align: center;}





	.toggle{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    border: none;
    transition: background-color 0.2s ease;
    cursor: pointer;}
	
	.toggle::before, .toggle::after {
    content: "";
    background-color: #000;
    transition: background-color 0.3s ease;
}
	
	.toggle > span, .toggle:before, .toggle:after{
	display: block;
        background-color: #3F9466;
    position: absolute;
    top: 45%;
    left: 48%;
    width: 35px;
    height: 2px;
    margin: -2px 0 0 -15px;}
	.toggle:before{transform: translateY(-7px);}
	.toggle:after{transform: translateY(7px);}

  .toggle .toggle_menu{
    position: absolute;
    color: #3F9466;
    left: 50%;
    bottom: 27px;
    font-family: zen-old-mincho, sans-serif; font-weight: 700;
    transform: translate(-50%, 0);
    top: initial;
    margin: initial;
    width: initial;
    height: initial;
    background-color: initial;}

.toggle {
  position: fixed;

}



.menu_list {
 	display: none; 
	position: fixed;
	width: 100%;
	height: 100vh;
	margin: 0;
	list-style: none;
	top: 0;
	left: 0;
	padding: 60px 25px;
  background-color: #fff;
  font-family: zen-old-mincho, sans-serif; font-weight: 700;
  
    }
.toggle[aria-expanded=true] > span {
  opacity: 0;
}
.toggle[aria-expanded=true]::before, .toggle[aria-expanded=true]::after {

}
.toggle[aria-expanded=true]::before {
  animation: 0.3s ease closeBar1 forwards;
}
.toggle[aria-expanded=true]::after {
  animation: 0.3s ease closeBar2 forwards;
}
.toggle.-close::before {
  animation: 0.3s ease closeBar1Rev forwards;
}
.toggle.-close::after {
  animation: 0.3s ease closeBar2Rev forwards;
}

@keyframes closeBar1 {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
	
@keyframes closeBar2 {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes closeBar1Rev {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes closeBar2Rev {
  0% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(10px);
  }
}
  
.nav {
	position: fixed;
	top: 0;
    right: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	padding: 60px;
    border: 1px solid #f5f5f5;
	justify-content: center;
	align-content: center;
	align-items: center;
	overflow: scroll;
	background-color: rgba(255, 255, 255, 0.9);
	color: #333;
	transition: opacity 0.3s ease, visibility 0.3s ease;
    /* スクロールバー非表示 */
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}

 /*Google Chrome、Safariへの対応*/
.nav::-webkit-scrollbar{
  display: none;

}

.nav[aria-hidden=true] {
  	visibility: hidden;
  	opacity: 0;
 	pointer-events: none;
    
}
.nav[aria-hidden=false] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
    overflow: scroll;
}

.menu li {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.5;
}
.menu li a {
	color: #333;
	transition: .5s;
	border-bottom: 1px solid #c6c6c6;
	display: block;
	padding: 12px 0;
  font-family: zen-old-mincho, sans-serif;
}

.menu i{margin-left: 10px;}
.menu li a:hover{ transition: .5s; background-color: #F1F1F1}
.menu_sub li{line-height: 2rem;}
.menu_sub li a{font-size: 1.5rem; padding: 8px 20px; border-bottom: none; position: relative;}
.menu_sub li a:after{content: ""; padding: 1.5px; position: absolute; top: 17px; left: 12px; background-color: #333; border-radius: 100%;}
/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
footer{width: 100%; background-color: #eee; margin-top: 100px;}
.footer_wrapper{position: relative;}
.footer_sec{ text-align: center;}
.footer_logo{margin-bottom: 20px;}
.footer_sns{display: flex; justify-content: center; gap: 10px; font-size: 2.3rem; }
.footer_copyright{font-size: 1.2rem; padding: 10px 0 ; margin: 0 auto; text-align: center; color: #999;}



/* ぱんくず */
.breadcrumbs{font-size: 1.3rem; }  
.breadcrumbs > ol{} 
.breadcrumbs > ol > li{ display: inline-block; position: relative; color: #fff; }
.breadcrumbs > ol > li:before,
.breadcrumbs > ol > li:before{ content: "/"; display: block; position: absolute; top: 0; left: 6px;  font-size: 1.9rem; }
.breadcrumbs > ol > li:first-child:before{ content: ""; font-size: 1.4rem;}
.breadcrumbs > ol > li a{ font-size: 1.6rem; margin: 0 0 0 35px; }
.breadcrumbs > ol > li:first-child a{ margin: 0 0 0 0; }
.breadcrumbs > ol > li a:hover{ opacity: 0.6; }
.breadcrumbs ol span a{margin: 0 8px 0 8px;}
.breadcrumbs ol span:first-child a{margin: 0 8px 0 0;}

/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{ position: relative;}
.top_wrapper{padding-top: 100px;}
.contents{background-color: #fff;  margin: 0 auto; padding: 80px 0 0;}

img{max-width: 100%; height: auto;}


h2{text-align: center; font-size: 5rem; margin-bottom: 60px; line-height: 7rem;  font-weight: 700;}


.page_404{padding: 20% 0 0; text-align: center; font-size: 5rem;}



/* トップページ */
.top_first_wrapper{width: 100%;  position: relative; }
/*.top_first_blue{position: absolute; width: 40%; height: 100%; left: 0; top: 0; background: linear-gradient(to right, #74AE60 25%, rgba(0,0,0,0) ); z-index: 1;}
*/
.top_first_wrapper img{width: 100%; height: auto;}
.top_first_topic{position: absolute; top: 0; left: 0; z-index: 1;  width: 100%; font-family: zen-old-mincho, sans-serif; padding: 20px 0 30px;
  color: #fff; font-size: 5rem; text-align: center; background: linear-gradient(to bottom, rgb(50, 117, 66 , 1) 0%, rgb(50, 117, 66 , 1) 80%, rgb(50, 117, 66 , 0) 100%);}

.swiper-slide{text-align: right;}
.swiper-button-next, .swiper-rtl .swiper-button-prev{display: none;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{display: none;}
.swiper-pagination-bullet{display: none;}


.top_advantage_sec{max-width: 1620px; padding: 50px 0 100px; position: relative; margin: 0 auto;}
.top_sec_tit{font-family: sans-serif; color: #fff; background-color: #008C23; font-size: 1.8rem; font-weight: 700; border-radius: 24px; 
  padding: 10px 20px 6px; width: 200px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1; text-align: center;}

.top_advantage_list{display: flex; gap: 60px; padding-top: 50px;}
.top_advantage_list li{width: calc((100% - 120px)/3); position: relative;}
.top_advantage_number{position: absolute; font-family: komu-b, sans-serif; font-weight: 400; font-size: 13rem; color: #008C23; font-style: normal; top: 0; left: 0; top: -100px; left: 20px;}
.top_advantage_img{margin-bottom: 20px;}
.top_advantage_img img{width: 100%; height: auto;}
.top_advantage_txt{ }
.top_advantage_topic{font-size: 3.5rem; font-weight: 700; margin-bottom: 20px;}
.top_advantage_txt p{font-size: 1.6rem; line-height: 4rem;}

.top_work_wrapper{width: 100%;  background-color: #eee;}
.top_work_sec{max-width: 1300px; margin: 0 auto; padding: 40px 0 100px; position: relative; }
.top_work_list{display: flex; gap: 40px; flex-wrap: wrap;}
.top_work_list li{width: calc((100% - 40px)/2);}
.top_work_item01{display: flex; align-items: center; gap: 15px; margin-bottom: 20px; transition: .5s;}
.top_work_tit{font-size: 3rem; color: #008C23; font-weight: 700; opacity: .5s;}
.top_work_tit:hover{opacity: 0.7; transition: .5s;}
.top_work_cat{font-size: 1.3rem; display: flex; gap: 5px; background-color: #fff; padding: 5px 10px; border-radius: 24px; transition: .5s;}
.top_work_cat span{position: relative;}
.top_work_cat span:last-child::before{content: "/";}
.top_work_img{transition: .5s;}
.top_work_img:hover{opacity: 0.7; transition: .5s;}
.top_work_more{text-align: center; width: 400px; position: absolute; bottom: -70px; left: 50%; transform: translate(-50%, -50%); }
.top_work_more a{display: block; background-color: #666; color: #fff; font-size: 2rem; font-weight: 700; padding: 20px 0; border: 1px solid #666; transition: .5s;}
.top_work_more a:hover{background-color: #fff; color: #666; transition: .5s;}

.top_instagram_wrapper{width: 100%; padding: 160px 0; background: url(/info/wp-content/uploads/img_top_instagram_bg01.jpg); background-size: cover;}
.top_instagram_sec{max-width: 1300px; margin: 0 auto; padding: 60px 0; background-color: #fff; position: relative; border-radius: 8px;}

.top_profile_wrapper{width: 100%;  margin-bottom: 50px;}
.top_profile_sec{max-width: 1300px; margin: 0 auto; padding: 100px 0 50px; position: relative;}
.top_profile_wrapper .top_sec_tit{position: initial; margin: 0 auto 30px; transform: none;}
.top_profile_item{display: flex; gap: 70px; }
.top_profile_table{width: 750px; border-top: 2px solid #008C23; }
.top_profile_table table{width: 100%;}
.top_profile_table tr{ border-bottom: 1px solid #008C23;}
.top_profile_table th{width: 150px; padding: 20px 0 20px 20px; color: #008C23; font-size: 2rem; font-weight: 500; text-align: left;}
.top_profile_table td{ padding: 20px 0 20px 20px; font-size: 2rem; font-weight: 500; text-align: left;}
.top_profile_name{margin-top: 30px; font-size: 3rem; font-weight: 700; text-align: center;}
.top_profile_name span{margin-right: 20px; font-size: 2.3rem;}

.top_profile_sec02{max-width: 1300px; margin: 0 auto; margin-top: 90px; position: relative;}
.top_office_table{display: flex; gap: 60px; border-top: 2px solid #008C23;}
.top_office_table table{width: calc((100% - 60px)/2); }
.top_office_table tr{ border-bottom: 1px solid #008C23;}
.top_office_table th{width: 150px; padding: 20px 0 20px 20px; color: #008C23; font-size: 2rem; font-weight: 500; text-align: left;}
.top_office_table td{ padding: 20px 0 20px 20px; font-size: 2rem; font-weight: 500; text-align: left;}

.top_googlemap iframe{width: 100%;}

.top_contact_sec{max-width: 1020px; margin: 0 auto; position: relative; padding-top: 100px;}


/*施工実績*/
.work_sec{max-width: 1300px; margin: 0 auto;}
.work_list{display: flex; flex-wrap: wrap; gap: 40px;}
.work_list li{width: calc((100% - 40px)/2);}
.work_list .top_work_cat{border: 1px solid #666;}


/* 実績詳細 */
.work_detail_sec{max-width: 1300px; margin: 0 auto; }
.work_detail_sec h2{margin-bottom: 100px;}
.work_detail_sec h3{font-size: 3rem; font-weight: 700; margin-bottom: 30px;}
.work_detail_sec p{font-size: 1.6rem; line-height: 4rem;}
.work_sec01_txt{width: 50%;}

.work_detail_img_list ul{display: flex; gap: 30px; flex-wrap: wrap; }
.work_detail_img_list ul li{width: calc((100% - 60px)/3);}



/* h1見出し*/
.h1_wrapper{position: relative; width: 100%;  padding: 200px 0 140px; font-family: zen-old-mincho, sans-serif; font-weight: 700; color: #fff; background: url(/info/wp-content/uploads/img_work_h1.jpg); background-size: cover; background-position-x: center; z-index: 1;}
.h1_wrapper::before{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #333; opacity: 0.5; z-index: -1;}
.h1_tit_item{max-width: 1300px; margin: 0 auto; text-align: left;}
.h1_tit_item01{display: block; font-size: 6.5rem; letter-spacing: 8px; font-weight: 500;}




/* お問合せ */
.contact_sec{max-width: 1000px; margin: 0 auto 80px; font-family: zen-old-mincho, sans-serif;}

.policy_sec h3{font-size: 2.5rem; letter-spacing: 1px;}
.policy_wrapper{background-color: #fff;}
.policy_sec{max-width: 1000px; margin: 0 auto; padding: 50px 0 80px; width: 90%;}
.policy_sec h3{font-family: zen-old-mincho, sans-serif; font-weight: 700; font-size: 3.5rem; color: #ccc;}
.contents .policy_sec h3{margin-bottom: 15px;}
.policy_txt{margin-bottom: 40px;}
.policy_txt p{ font-weight: 300; line-height: 3.5rem;}




/* pagenation */ 
.wp_pagination{margin-top: 80px;}
.wp_pagination ul{display: flex; justify-content: space-around; color: #3F9466;}
.wp_pagination li{border: 1px solid #3F9466; padding: 2px 0; width: 180px; text-align: center;}
.wp_pagination a{display: block; transition: .5s; color: #3F9466;}
.wp_pagination a:hover{color: #254D48; transition: .5s;}
.wp_noprev svg, .wp_prev svg{margin-right: 15px; font-size: 1.4rem;}
.wp_nonext svg, .wp_next svg{margin-left: 15px; font-size: 1.4rem;}

.access_sec h3{font-size: 3.5rem; font-family: zen-old-mincho, sans-serif; font-weight: 700;}
.access_sec h3::after{content: ""; display: block; margin: 15px 0; width: 100%; height: 3px; background-color: #ccc;}
.access_sec p{font-size: 1.7rem; margin-bottom: 20px;}
.access_item{display: flex; gap: 50px; margin-bottom: 60px;}
.access_item .access_img{width: calc((100% - 50px)/2);}
.access_item .access_img img{height: auto; width: 100%;}
.access_item .access_map{width: calc((100% - 50px)/2);}
.access_factory iframe,
.access_factory02 iframe{width: 100%; height: 100%;}

.access_factory03 .access_item iframe{}
.access_factory p,
.access_factory02 p,
.access_factory03 p{margin-bottom: 15px; font-size: 1.7rem;}

.anchor{ padding-top:180px; margin-top:-180px; display: block;}






/* フォーム */
.contact_item{display: flex; width: 100%; padding: 20px 20px; border-bottom: 1px solid #ccc;}
.contact_tit{width: 35%;  font-weight: 700; position: relative; margin-left: 80px;}
.contact_tit span{position: absolute;  background-color: #E02E30; color: #fff; margin-right: 15px; border: 1px solid #E02E30; padding: 4px 8px; left: -80px; top: -5px;}
.contact_txt,
.contact_adress,
.contact_txtarea{width: 65%;}
.contact_txt input{font-size: 2rem; background: #f7f7f7; height: 35px; padding: 8px; border: 1px solid #ccc; font-family: zen-old-mincho, sans-serif; width: 80%;}
.contact_txtarea textarea{font-size: 2rem; padding: 8px; background: #f7f7f7; border: 1px solid #ccc; font-family: zen-old-mincho, sans-serif; width: 80%;}
.contact_adress_sub p{padding: 15px 0;}
.contact_adress input{background: #f7f7f7; border: 1px solid #ccc; height: 35px; margin-left: 15px; font-size: 2rem; font-family: zen-old-mincho, sans-serif;}
.contact_submit{border-bottom: none;}
.contact_submit_btn{text-align: center; }
.contact_submit_btn input{ font-weight: 300; background-color: #333; color: #fff; font-size: 1.6rem; 
    letter-spacing: 1px; padding: 8px 12px; cursor: pointer; }



input[type="checkbox"]{float: left;}
.contact_check{display: flex;}
.contact_submit .contact_tit{width: 30%;}
.wpcf7-spinner{display: block;}

.form_sec{max-width: 1000px; margin: 0 auto; padding-bottom: 80px;}
.form_tit{position: relative; max-width: 1000px; margin: 0 auto 100px;}
.form_tit01{ position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  width: 140px;
  padding: 4px 0;
  border-radius: 18px;
  background-color: #5083CF;}

.form_tit02{font-size: 4rem;
  font-weight: 500;
  display: block;
  text-align: center;
  padding: 30px 0;
  border-bottom: 2px solid #333;
  border-top: 2px solid #5083CF;}

.main .nf-form-content .list-select-wrap .nf-field-element>div, .main .nf-form-content input:not([type=button]), .main .nf-form-content textarea{color: #333;}
.main .nf-form-content .list-select-wrap .nf-field-element>div:focus, .main .nf-form-content input:not([type=button]):focus, .main .nf-form-content textarea:focus{color: #333;}
#ninja_forms_required_items.hidden-container, #ninja_forms_required_items.hr-container, .nf-field-container.hidden-container, .nf-field-container.hr-container{margin: 10px 0 20px!important;}




/* サンクスページ */
.thanks_sec{max-width: 1100px; margin: 0 auto; padding: 80px 0 80px; line-height: 4rem;}







/* ----------------------------------------------------------
 SP CSS
---------------------------------------------------------- */
@media screen and (max-width:680px){
img,video {
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 60%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; height: auto !important; padding-top: 0; }

/* 非表示用 */
.noneSP	{ display: none !important; }


/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{position: fixed; background-color: #fff; height: 60px; width: 100%; z-index: 999;}

.header{background-color:  rgba(0, 0, 0, 0.6); height: 70px; }
.header_sec{height: 60px;}
.header_logo{height: 60px; flex-basis: initial;}
.header_logo h1{margin-left: 10px; padding-top: 0; text-align: left;}
.header_logo01{padding: 13px 17px 12px; width: 100%;}
.header_logo01 img{width: 190px;}



/*ACCORDION*/
.toggle{width: 70px; height: 60px;}
.toggle .toggle_menu{bottom: 8px;}

.accordion_icon{display: flex; gap: 10%; justify-content: center; margin: 60px auto 20px;font-size: 2.5rem;}
nav .accordion_icon a{border-bottom: none;}
nav .accordion_tell a i{color: #4DABE9;  border-radius: 100%; background-color: #fff; border: 2px solid #4DABE9; padding: 12px; }
nav .accordion_contact a i{color: #1D497B;  border-radius: 100%; background-color: #fff; border: 2px solid #1D497B; padding: 12px;}
nav .btn_trial_wrapper a{color: #fff; text-align: center;  border-bottom: solid 5px #AE6333;}
nav .btn_trial_item01 .free_trial{font-size: 2.3rem;}

/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */

footer{}
.footer_sec{display: block; text-align: center;}
.footer_sec01{padding: 0; border: none; display: block;}
.footer_sitemap_wrapper{display: none;}
.footer_logo{text-align: center; margin-bottom: 40px;}
.footer_info{line-height: 2.5rem; text-align: left; width: 300px; margin: 0 auto 40px;}
.footer_info span{text-align: center;}


.footer_copyright{margin: 0 auto; text-align: center;}

/* ページ下部 固定メニュー */
.btm_menu { position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #74AE60; z-index: 99; }
.btm_menu li { float: left; width: 50%; }
.btm_menu li:first-child a { border-right: 1px solid #fff; }
.btm_menu li a { display: block; height: 30px; text-align: center; font-size: 1.6rem; padding: 15px 5px 5px; background-color: #5FAFBB; color: #fff; transition: .5s;}
.btm_menu li a i{ font-size: 1.8rem; margin-right: 10px; }
.btm_menu li a:hover { background-color: #fff; color: #5FAFBB; transition: .5s;}
.btm_menu ul:after { content: ''; clear: both; display: block; }




/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */





h3{ font-size: 2.2rem; font-weight: 700; letter-spacing: 2px; line-height: 1.8; }

/* ぱんくず */
.breadcrumbs{ position: relative; z-index: 1; padding: 4px 0; font-weight: 700;}  
.breadcrumbs > ol{} 
.breadcrumbs > ol > li{ display: inline-block; position: relative;  }
.breadcrumbs > ol > li:before{ content: "/"; display: block; position: absolute; top: -3px; left: 3px;  font-size: 1.9rem; }
.breadcrumbs > ol > li:first-child:before{ content: ""; }
.breadcrumbs > ol > li a{ font-size: 1.2rem; margin: 0 0 0 20px; }
.breadcrumbs > ol > li:first-child a{ margin: 0 0 0 0; }
.breadcrumbs > ol > li a:hover{ opacity: 0.6; }


    
    
/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{ position: relative; overflow: hidden; padding-top: 60px;}

.contents h2 {font-size: 4rem; letter-spacing: 2px; margin-bottom: 25px;}
    
.contents{  margin: 0 auto; padding: 40px 0; }


.lnavi{ margin: 0 auto 80px;}
.lnavi_list{ flex-wrap: wrap; margin: 0 auto; width: 90%;}
.lnavi_list li{width: calc((100% - 30px) / 2);}
.lnavi a{font-size: 1.5rem; }

.title_br{display: block;}


/*トップページ*/
.top_first_wrapper img{width: 100%;}
.top_first_topic{font-size: 3rem; background: linear-gradient(to bottom, rgb(50, 117, 66 , 0.5) 0%, rgb(50, 117, 66 , 0.5) 80%, rgb(50, 117, 67 , 0) 100%);}

.top_sec_tit{position: initial; transform: none; margin: 0 auto 20px;}
.top_wrapper h2{font-size: 3.3rem; margin-bottom: 30px;}

.top_advantage_sec{width: 90%; padding: 50px 0 70px;}
.top_advantage_number{font-size: 9rem; top: -75px;}
.top_advantage_list{flex-direction: column; gap: 70px; padding-top: 15px;}
.top_advantage_list li{width: 100%;}
.top_advantage_topic{text-align: center; font-size: 2.5rem;}

.top_work_sec{width: 90%;}
.top_work_list{flex-direction: column; gap: 50px;}
.top_work_list li{width: 100%;}
.top_work_tit{font-size: 2.5rem; margin-bottom: 10px;}
.top_work_item01{display: block;}
.top_work_cat{display: inline-flex;}
.top_work_more{width: 80%; max-width: 400px;}
.top_work_more a{font-size: 1.7rem;}

.top_instagram_wrapper{padding: 120px 0;}
.top_instagram_sec{width: 90%; padding: 30px 0 40px;}

.top_profile_sec{width: 90%; padding: 60px 0 50px;}
.top_profile_item{flex-direction: column;}
.top_profile_table{width: 100%;}
.top_profile_table th,
.top_profile_table td{display: block; width: 100%;}
.top_profile_table td{padding: 10px 0 10px 20px;}
.top_profile_table th{padding: 15px 0 0 20px;}
.top_profile_sec02{width: 90%; margin-top: 20px;}
.top_office_table{flex-direction: column; gap: 0;}
.top_office_table table{width: 100%;}
.top_office_table th,
.top_office_table td{display: block; width: 100%;}
.top_office_table th{padding: 15px 0 0 20px;}
.top_office_table td{padding: 10px 0 10px 20px;}
.top_profile_wrapper .page_br{display: block;}
.top_profile_img{text-align: center;}
.top_contact_sec{width: 90%;}



/* 施工実績 */
.work_sec{width: 90%;}
.work_list{flex-direction: column;}
.work_list li{width: 100%;}

/* 実績詳細 */
.work_detail_sec{width: 90%;}
.work_detail_sec h2{margin-bottom: 50px;}
.work_sec01{flex-direction: column;}
.work_sec01_txt{width: 100%;}
.work_detail_sec h3{text-align: center;}

.work_sec02_img{flex-direction: column;}
.work_detail_img_list ul{flex-direction: column;}
.work_detail_img_list ul li{width: 100%;}

/* h1見出し */
.h1_wrapper{width: 100%; padding: 60px 0 40px;}
.h1_tit_item{width: 90%; margin: 0 auto;}
.h1_tit_item01{font-size: 3rem; letter-spacing: 3px;}


/* pagenation */ 
.wp_pagination ul{gap: 15px;}
.wp_pagination li{font-size: 1.6rem; min-width: 100px;}



/* お問合せフォーム */
.contact_sec{width: 90%; margin: 0 auto;}
.contact_item{display: block;}
.contact_tit{margin: 0 0 25px 0; width: initial;}
.contact_essential .contact_tit{margin-left: 80px; width: initial;}
.wpcf7-form-control-wrap{}
.contact_txt, .contact_adress, .contact_txtarea{width: 100%;}
.contact_txt input{width: calc(100% - 16px); margin: 0 auto;}
.contact_adress input{width: 100%; margin-left: 0;}
input[type="checkbox"]{padding: 8px;}
.form-width{max-width: 100%;}
.contact_sec .wpcf7-spinner{display: block;}
.contact_txtarea textarea{width: calc(100% - 16px);}




    
::placeholder{ color: #999;}
/* 旧Edge対応 */
::-ms-input-placeholder{ color: #999; }
/* IE対応 */
:-ms-input-placeholder{ color: #999; }



/* ヘッダー */
header{box-shadow: 0px 8px 16px -6px rgba(0,0,0,0.3);}







}

/* ----------------------------------------------------------
 SP CSS END
---------------------------------------------------------- */

/* ----------------------------------------------------------
 TAB CSS
---------------------------------------------------------- */
@media screen and (min-width:681px) and (max-width:1024px){

img,video {
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 62.5%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; padding-top: 0; }

/* 非表示用 */
.noneTAB		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{position: fixed; background-color: #fff; height: 60px; width: 100%; z-index: 999;}

.header{background-color:  rgba(0, 0, 0, 0.6); height: 70px; }
.header_sec{height: 60px;}
.header_logo{height: 60px; flex-basis: initial;}
.header_logo h1{margin-left: 10px; padding-top: 0; text-align: left;}
.header_logo01{padding: 13px 17px 12px; width: 100%;}
.header_logo01 img{width: 190px;}



/*ACCORDION*/
.toggle{width: 70px; height: 60px;}
.toggle .toggle_menu{bottom: 8px;}

.accordion_icon{display: flex; gap: 10%; justify-content: center; margin: 60px auto 20px;font-size: 2.5rem;}
nav .accordion_icon a{border-bottom: none;}
nav .accordion_tell a i{color: #4DABE9;  border-radius: 100%; background-color: #fff; border: 2px solid #4DABE9; padding: 12px; }
nav .accordion_contact a i{color: #1D497B;  border-radius: 100%; background-color: #fff; border: 2px solid #1D497B; padding: 12px;}
nav .btn_trial_wrapper a{color: #fff; text-align: center;  border-bottom: solid 5px #AE6333;}
nav .btn_trial_item01 .free_trial{font-size: 2.3rem;}


.menu_sub li{line-height: 2rem;}
.menu_sub li a{font-size: 1.5rem; padding: 8px 20px; border-bottom: none; position: relative;}
.menu_sub li a:after{content: ""; padding: 1.5px; position: absolute; top: 17px; left: 12px; background-color: #333; border-radius: 100%;}

.accordion_icon{display: flex; gap: 10%; justify-content: center; margin-top: 60px; font-size: 2.5rem;}
nav .accordion_tell a{color: #4DABE9; padding: 12px; border-radius: 100%; background-color: #fff; border: 2px solid #4DABE9;}
nav .accordion_contact a{color: #1D497B; padding: 12px; border-radius: 100%; background-color: #fff; border: 2px solid #1D497B;}
nav .btn_trial_wrapper a{color: #fff; text-align: center; bottom: -70px; border-bottom: solid 5px #AE6333;}
nav .btn_trial_item01 .free_trial{font-size: 2.3rem;}


.gnavi li{margin-right: 0; width: initial;}
.gnavi a{font-size: 2rem;}
.gnavi_list{flex-direction: column; gap: 20px; max-width: 320px; margin: 0 auto;}



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
footer{}
.footer_sec{display: block; text-align: center;}
.footer_copyright{margin: 0 auto; text-align: center;}

/* ページ下部 固定メニュー */
.btm_menu { position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #74AE60; z-index: 99; }
.btm_menu li { float: left; width: 50%; }
.btm_menu li:first-child a { border-right: 1px solid #fff; }
.btm_menu li a { display: block; height: 30px; text-align: center; font-size: 1.6rem; padding: 15px 5px 5px; background-color: #5FAFBB; color: #fff; transition: .5s;}
.btm_menu li a i{ font-size: 1.8rem; margin-right: 10px; }
.btm_menu li a:hover { background-color: #fff; color: #5FAFBB; transition: .5s;}
.btm_menu ul:after { content: ''; clear: both; display: block; }
	
/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */







/* ぱんくず */
.breadcrumbs{ position: relative; z-index: 1;  padding: 4px 0;}  
.breadcrumbs > ol{} 
.breadcrumbs > ol > li{ display: inline-block; position: relative; }
.breadcrumbs > ol > li:before{ content: "/"; display: block; position: absolute; top: 0; left: 6px;  font-size: 1.9rem; }
.breadcrumbs > ol > li:first-child:before{ content: ""; }
.breadcrumbs > ol > li a{ font-size: 1.6rem; margin: 0 0 0 20px; }
.breadcrumbs > ol > li:first-child a{ margin: 0 0 0 0; }
.breadcrumbs > ol > li a:hover{ opacity: 0.6; }

/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{ position: relative; overflow: hidden; padding-top: 60px;}
		
/* 見出し */
.h1_wrapper{width: 100%; padding: 35px 0 30px;}
.h1_tit_item{width: 90%; margin: 0 auto; padding: 0;}
.h1_tit_item01{display: block;}
.h1_tit_item02{font-size: 3rem;}
    .contents h2{margin-bottom: 45px;}

.contents{  margin: 0 auto; padding: 90px 0 0;}

    .lnavi{ margin: 0 auto 40px; min-width: 400px; }
    .lnavi_list li span{}


/*トップページ*/
.top_first_wrapper img{width: 100%;}
.top_first_topic{font-size: 3rem; background: linear-gradient(to bottom, rgb(50, 117, 66 , 0.7) 0%, rgb(50, 117, 66 , 0.7) 80%, rgb(50, 117, 67 , 0) 100%);}

.top_sec_tit{position: initial; transform: none; margin: 0 auto 10px;}
.top_wrapper h2{font-size: 4rem; margin-bottom: 40px;}

.top_advantage_sec{width: 90%;}
.top_advantage_list{flex-direction: column; gap: 90px; max-width: 640px; margin: 0 auto;}
.top_advantage_list li{width: 100%;}
.top_advantage_topic{text-align: center; font-size: 2.5rem;}

.top_work_sec{width: 90%;}
.top_work_list{flex-direction: column; gap: 50px;}
.top_work_list li{width: 100%; max-width: 640px; margin: 0 auto;}
.top_work_tit{font-size: 2.5rem; margin-bottom: 10px;}
.top_work_item01{display: block;}
.top_work_cat{display: inline-flex;}
.top_work_more{width: 80%; max-width: 400px;}
.top_work_more a{font-size: 1.7rem;}

.top_instagram_wrapper{padding: 120px 0;}
.top_instagram_sec{width: 90%; padding: 30px 0 40px;}

.top_profile_sec{width: 90%; padding: 60px 0 50px;}
.top_profile_item{flex-direction: column;}
.top_profile_table{width: 100%;}
.top_profile_table th{padding: 15px 0 0 20px;}
.top_profile_sec02{width: 90%; padding: 20px 0; margin-top: 20px;}
.top_office_table{flex-direction: column; gap: 0;}
.top_office_table table{width: 100%;}
.top_office_table th{padding: 15px 0 0 20px;}
.top_profile_wrapper .page_br{display: block;}
.top_profile_img{text-align: center;}
.top_contact_sec{width: 90%;}


/* h1見出し */
.h1_wrapper{width: 100%; padding: 80px 0 70px;}
.h1_tit_item{width: 90%; margin: 0 auto;}
.h1_tit_item01{font-size: 3rem; letter-spacing: 3px;}

/* 施工実績 */
.work_sec{width: 90%;}
.work_list{gap: 30px;}
.work_list li{width: calc((100% - 30px)/2);}

/* 実績詳細 */
.work_detail_sec{width: 90%;}
.work_detail_sec h3{text-align: center;}
.work_sec01{flex-direction: column;}
.work_sec01_txt{width: 100%;}
.work_detail_img_list ul{gap: 2em;}
.work_detail_img_list ul li{width: calc((100% - 2em) / 2);}




/* お問合せフォーム */
.top_contact_sec{width: 90%; margin: 0 auto;}
.contact_item{display: block; padding: 20px 5%;}
.contact_tit{margin: 0 0 40px 0; width: initial;}
.contact_essential .contact_tit{margin-left: 80px; width: initial;}
.form_tit01{display: none;}
.form_tit02{padding: 20px 0; font-size: 3rem;}
.form_sec{width: 90%;}

.list-checkbox-wrap .nf-field-element li label{text-align: left;}
.wpcf7-form-control-wrap{}
.contact_txt, .contact_adress, .contact_txtarea{width: 100%;}
.contact_txt input{width:  calc(100% - 16px); margin: 0 auto;}
.contact_txtarea textarea{width:  calc(100% - 16px);}
.contact_adress input{width: 100%; margin-left: 0;}
input[type="checkbox"]{padding: 8px;}
.form-width{max-width: 100%;}
.contact_sec .wpcf7-spinner{display: block;}


/* お知らせ */
.news_category_list{width: 90%; margin: 0 auto; gap: 30px;}
.news_category_list li{width: calc((100% - 30px)/2);}



 /* 選ばれる理由 */
.reason_sec{width: 90%; max-width: 700px;}
.reason_h2_number{font-size: 4rem; margin-right: 30px;}
.reason_img img{width: 100%; height: auto;}
.reason_h2_txt{font-size: 2.3rem; line-height: 3.5rem;}
.reason_item{flex-direction: column-reverse;}
.reason_link{margin: 0 auto;}
.reason_detail{gap: 10px;}

/* 業務内容 */
.service_sec{padding: 40px 0; width: 90%;}
.service_sec h3{font-size: 2.3rem; line-height: 3rem;}
.service_item{flex-direction: column; }
.service_item p{width: 100%; font-size: 1.5rem;}

.service_achievements_sec{flex-direction: column; row-gap: 50px;}
.service_achievements_item{width: 100%;}

    
/* お知らせ */
.news_item{display: block; padding: 30px 0 20px;}  
.news_cate_news{float: left;}
.news_cate_news:after{content: ""; clear: both;}
.news_tit{display: block; margin-top: 15px;}
.news_date{ display: inline;}

  

/* お問合せ */
.contact_item{display: block; padding: 20px 5%;}
.contact_tit{margin: 0 0 20px 0; width: initial;}
.contact_essential .contact_tit{margin-left: 80px; width: initial;}
    





    
    

::placeholder{ color: #999;}
	

/* 旧Edge対応 */
::-ms-input-placeholder{ color: #999; }
/* IE対応 */
:-ms-input-placeholder{ color: #999; }














}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 TAB CSS END
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 PC CSS
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
@media print, screen and (min-width:1025px) and (max-width:1370px){

/* フォントサイズ10px */
html{ font-size: 62.5%; }

/* 基本のフォントサイズ */
body{  font-size: 1.8rem; }

/* 非表示用 */
.nonePC		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
.header_navi{margin: 0 0 0 auto;}
.header_logo01{ margin: 0 15px; max-width: 180px;}
.header_logo01 img{width: 150px; height: auto;}
.header_item01{font-size: 1.4rem;}
.header_item02{font-size: 1.4rem;}
.header_br{display: block;}
.header_navi ul{}
.header_contact_item{margin-top: 20px; gap: 15px;}
.header_item02{margin-right: 20px;}
.header_item02 p{font-size: 1.2rem;}
.header_telnumber img{width: 80%; max-width: 180px;}
.header_instagram{width: 90px;}

/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }
.footer_sec{}
.footer_sec01{padding: 0 20px 60px 0;}
.footer_copyright{}


/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.gnavi_item > a{font-size: 1.5rem;}

	
/* パンくず */
.breadcrumbs > ol{max-width: 1100px; margin: 0 auto;} 
	
/* トップページ */
.top_first_topic{font-size: 4rem;}

.top_advantage_sec{width: 94%;}
.top_advantage_list{gap: 40px;}
.top_advantage_list li{width: calc((100% - 80px)/2);}
.top_advantage_topic{font-size: 2.4rem;}
.top_advantage_txt p{font-size: 1.4rem; line-height: 4rem;}
.top_advantage_number{font-size: 12rem;}

.top_link_sec img{display: none;}
.top_link_img::before{z-index: -1;}
.top_link_tit{position: initial; transform: none;  margin: 0 auto; display: block; padding: 40px 0;}
.top_link_other{position: relative; }
.top_link_other::before{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(/info/wp-content/uploads/img_top_link_bg01.jpg); background-size: cover; background-position-x: 70%; z-index: -2;}
.top_work_sec{width: 90%;}

.top_instagram_sec{width: 90%;}
.top_profile_sec{width: 94%;}
.top_profile_sec02{width: 94%;}
.top_contact_sec{width: 90%;}

.h1_tit_item{width: 90%;}

/* 施工実績 */
.work_sec{width: 90%;}


/* 実績詳細 */
.work_detail_sec{width: 90%;}
.work_detail_sec h3{text-align: center;}
.work_sec01{flex-direction: column;}
.work_sec01_txt{width: 100%;}

    
}
/* ----------------------------------------------------------
 PC CSS END
---------------------------------------------------------- */
/* ----------------------------------------------------------
 PC WIDE CSS
---------------------------------------------------------- */
@media screen and (min-width:1371px){
/* フォントサイズ10px */
html{ font-size: 62.5%; height: 100%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem;  }

/* 非表示用 */
.nonePCWIDE		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
    .nav{right: 0; width: 40%}
    .header_logo01{margin-left: 5%; width: 15%; max-width: 250px;}
/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }



/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */



/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.top_reason_topic{font-size: clamp(1.8rem ,1.4vw ,2.5rem);}

/* 会社案内 */
.company_table_place{display: flex; justify-content: space-between; flex-wrap: wrap;}
.company_table_place p{width: 48%;}


}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 PCWIDE CSS END
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */