/*======================================

	0. WPネイティブ設定
	
=======================================*/

/* editor */
 
p {
    display: block;
    margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
 
/* img */
 
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
 
/* clearfix */
 
.clearfix {
    overflow: hidden;
    zoom: 1;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/*======================================

	1. フォント設定
	
=======================================*/

p,
pre,
cite,
blockquote {
	font-size: 100%;
}

li,dt,dd {
	font-size: 100%;
}

* {
font-style: normal;
}

strong {
	font-weight:bold;
}


/*======================================

	2. サイト構造
	
=======================================*/

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0 auto;
padding: 0;
color: #333333;
background-color: #FFF;
line-height: 1.8;
font-family: "Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
font-style: normal;
}

br.clear {
clear: both;
font: 0pt/0pt sans-serif;
}

a {
color: #009de1;
text-decoration: none;
}

a:hover {
color: #009de1;
}

section {
clear: both;
}

.main-contents {
margin: 100px auto;
padding: 100px 50px;
background-color: #FFF;
}


/*======================================

	3. アニメーション共通
	
=======================================*/

.animate-fade-in {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-fade-in-down {
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animated {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}


/*======================================

	3. ヘッダ設定
	
=======================================*/

header {
margin: 0;
padding: 0 30px;
height: 130px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 900;
background-color: rgba(255, 255, 255, 0.9);
border-top: 7px solid #567d19;
position: fixed;
}

header h1 {
width: 600px;
height: auto;
}

.header-tel {
margin: 0 100px 0 0;
padding: 0;
line-height: 1;
font-size: 16px;
vertical-align: middle;
}

.header-tel span {
font-size: 35px;
font-weight: bold;
}

/*======================================

	3. ドロワーメニュー設定
	
=======================================*/

/* checkbox */
.drawer-toggle {
  display: none;
}

/* open button */
.drawer-open,
.drawer-overlay {
  cursor: pointer;
  position: fixed;
  margin-bottom: 0;
}

.drawer-open {
  z-index: 1002;
  top: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background: #2d2e2e;
  transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.drawer-open::before,
.drawer-open::after,
.drawer-open span:first-child {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 2px solid #fff;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s ease;
}

.drawer-open::before {
  transform: translateY(-8px);
}

.drawer-open::after {
  transform: translateY(8px);
}

.drawer-open .button-menu {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #000;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* overlay */
.drawer-overlay {
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background .4s ease;
}

/* nav */
.drawer-nav {
  z-index: 1001;
  position: fixed;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  width: 260px;
  max-width: 85vw;
  height: 100dvh;
  margin: 0;
  padding: 20px 10px;
  box-sizing: border-box;
  background: #fff;
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-shadow: -8px 0 20px rgba(0, 0, 0, 0.08);
}

.drawer-inner {
  min-height: 100%;
}

.drawer-nav h1.sp-logo {
  margin: 10px 30px 20px;
  text-align: center;
  float: none;
}

.drawer-nav h1 img {
  width: 100%;
  height: auto;
  float: none;
}

.drawer-menu {
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid #aaa;
}

.drawer-menu li {
  line-height: 1.4;
  border-bottom: 1px solid #aaa;
  list-style: none;
}

.drawer-menu li a {
  display: block;
  padding: 12px 10px;
  color: #2d2e2e;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}

.drawer-menu li a:hover {
  background-color: #f7f7f7;
}

.drawer-nav p {
  margin: 10px 0 30px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #567d19;
}

/* open state */
.drawer-toggle:checked + .drawer-open {
  transform: translateX(-260px);
}

.drawer-toggle:checked + .drawer-open .button-menu {
  opacity: 0;
}

.drawer-toggle:checked + .drawer-open span:first-child {
  transform: scaleX(0);
}

.drawer-toggle:checked + .drawer-open::before {
  transform: rotate(135deg) scaleX(1.2);
}

.drawer-toggle:checked + .drawer-open::after {
  transform: rotate(-135deg) scaleX(1.2);
}

.drawer-toggle:checked ~ .drawer-overlay {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.3);
}

.drawer-toggle:checked ~ .drawer-nav {
  transform: translateX(0);
}

/* body lock class */
body.is-drawer-open {
  overflow: hidden;
  touch-action: none;
  height: 100%;
}

/* -------------------------
   同ページ内リンクのヘッダかぶり対策
   ------------------------- */
#problem::before,
#support::before {
  content: "";
  display: block;
  height: 146px;
  margin-top: -146px;
  visibility: hidden;
  pointer-events: none;
}

/* mobile */
@media (max-width: 767px) {
  .drawer-open {
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
  }

  .drawer-open .button-menu {
    font-size: 11px;
    top: 46px;
  }

  .drawer-nav {
    width: 280px;
    max-width: 86vw;
  }

  .drawer-toggle:checked + .drawer-open {
    transform: translateX(-280px);
  }
}


/*======================================

	4. TOP設定
	
=======================================*/


/* --- TOPのイメージ部 ---*/

.main-image {
margin: 0 0 146px 0;
padding: 150px 0 100px 0;
background-image: url("img/wave.svg");
background-position: bottom center;
background-repeat: no-repeat;
}

.main-image .logo {
margin: 0 auto;
width: 250px;
}

.main-image .logo img {
width: 100%;
height: auto;
}

.main-image h2 {
margin: 0 auto;
padding: 10px 20px;
width: 600px;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
background-color: #e85200;
border-radius: 80px;
display: block;
font-size: 32px;
color: #FFF;
text-align: center;
line-height: 1.2;
}

.main-image h2 span {
font-size: 40px;
}

.main-image-box {
display: flex;
justify-content: center;
align-items: center;
}

.main-image-left {
width: 25%;
}

.main-image-center {
width: 50%;
}

.main-image-right {
width: 25%;
}

.main-image-left img {
width: 100%;
height: auto;
}

.main-image h3 {
text-align: center;
margin: 20px 0 0 0;
padding: 7px 20px;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 46px;
line-height: 1;
}

.main-image h3 span {
padding: 7px 20px;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 70px;
color: #e85200;
}

.main-image-center p {
text-align: center;
font-size: 22px;
}

.main-image-button {
margin: 50px auto 0 auto;
width: 300px;
}

.main-image-button a {
padding: 8px 20px;
display: block;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
background-color: #7cb242;
border-radius: 50px;
color: #FFF;
font-size: 28px;
text-decoration: none;
text-align: center;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.main-image-button a:hover {
background-color: #457a0c;
border-radius: 50px;
}

.main-image-right img{
width: 100%;
height: auto;
}


/* --- こんなことでお困りではありませんか？ ---*/

.problem {
margin: 0 0 146px 0;
padding: 0 0 100px 0;
background-color: #d4e3b6;
background-image: url("img/grass.svg");
background-position: bottom center;
background-repeat: no-repeat;
background-size: 101%;
}

.problem h2 {
text-align: center;
margin: 0;
padding: 0;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 50px;
line-height: 1;
white-space: nowrap;
}

.problem h2 span {
padding: 0;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 70px;
color: #e85200;
}

.problem-img {
margin: 0 auto;
width: 450px;
}

.problem-img img {
width: 100%;
height: auto;
}

.problem ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}

.problem ul li {
margin: 0 10px;
list-style: none;
text-align: center;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 16px;
line-height: 1.4;
}

.problem ul li .house-box {
margin: 0 0 10px 0;
width: 210px;
height: 210px;
background-color: #FFF;
border-radius: 15px;
box-shadow: 0px 5px 15px 0px rgba(165, 207, 80, 0.35);
position: relative;
}

.problem ul li .house-box img {
position: absolute;
bottom: 0;
right: 0;
width: 280px;
height: auto;
}

.problem-button {
margin: 50px auto 0 auto;
display: block;
width: 550px;
}

.problem-button a {
padding: 25px 0;
background-color: #349b2e;
display: block;
color: #FFF;
width: 100%;
line-height: 1;
text-align: center;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 24px;
border-radius: 10px;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.problem-button a span {
font-size: 16px;
color: #b5d39c;
}

.problem-button a:hover {
background-color: #6cca66;
border-radius: 10px;
}


/* --- ワンストップのサポート体制 ---*/
.support {
margin: 0 auto;
padding: 0 0 100px 0;
background: linear-gradient(to bottom,#97b764 0%,#97b764 10%,#d4e3b6 90%,#d4e3b6 100%);
position: relative;
}

.support-img {
position: absolute;
top: 46px;
right: 0;
width: 400px;
}

.support-img img {
width: 100%;
height: auto;
}

.support h2 {
margin: 0 0 50px 0;
padding: 0;
line-height: 1;
text-align: center;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
color: #FFF;
font-size: 50px;
}

.support h2 span {
color: #ff6f20;
}

.support p {
color: #FFF;
font-size: 18px;
text-align: center;
}

.support ul {
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
width: 1200px;
}

.support ul li {
margin: 100px 15px 0 15px;
padding: 100px 0 0 0;
background-color: #FFF;
border-radius: 20px;
width: 340px;
list-style: none;
text-align: center;
position: relative;
box-shadow: 0px 5px 15px 0px rgba(91, 128, 32, 0.65);
}

.support ul li .number {
position: absolute;
left: 50%;
top: -70px;
transform: translateX(-50%);
width: 140px;
height: 140px;
border: 15px solid #FFF;
border-radius: 150px;
background-color: #97b764;
font-family: hiragino-mincho-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 60px;
color: #FFF;
}

.support ul li img {
width: 90%;
height: auto;
}

.support ul li h3 {
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
color: #000;
font-size: 20px;
}

.support ul li p {
padding: 0 15px;
text-align: left;
color: #000;
line-height: 1.6;
}

.support-button {
margin: 50px auto 0 auto;
display: block;
width: 550px;
}

.support-button a {
padding: 25px 0;
background-color: #ff6f20;
display: block;
color: #FFF;
width: 100%;
line-height: 1;
text-align: center;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 30px;
border-radius: 10px;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.support-button a span {
font-size: 16px;
color: #FFF;
}

.support-button a:hover {
background-color: #ff3c00;
border-radius: 10px;
}


/* --- LINEバナー ---*/
.line-banner {
background-image: url("img/line-bg.jpg");
background-position: right center;
background-repeat: no-repeat;
background-size: 60%;
}

.line-banner a {
display: flex;
justify-content: center;
align-items: stretch;
}

.line-left {
width: 55%;
color: #FFF;
display: flex;
justify-content: center;
align-items: stretch;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
background-color: #06C755;
}

.line-left img {
width: 120px;
height: auto;
}

.line-left-text {
padding: 80px 0 80px 10px;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 40px;
line-height: 1;
text-align: center;
}

.line-left-text span {
font-size: 20px;
}

.line-left-text .npo {
display: block;
margin: 15px auto 0 auto;
padding: 7px 20px;
text-align: center;
color: #FFF;
background-color: #ff6f20;
border-radius: 50px;
font-size: 20px;
}

.line-right {
width: 45%;
}

/*======================================

	5. FOOTER設定
	
=======================================*/

footer {
margin: 0;
padding: 50px 0;
background-color: #d4e3b6;
color: #567d19;
border-bottom: 7px solid #567d19;
text-align: center;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
}

footer .footer-logo {
margin: 0 auto;
width: 150px;
}

footer .footer-logo img {
width: 100%;
height: auto;
}

footer h2 {
margin: 0;
padding: 0;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 30px;
}

footer p {
margin: 0 0 10px 0;
}

.cr {
margin: 0 auto;
padding: 10px 0 0 0;
border-top: 1px solid #567d19;
width: 1100px;
text-align: center;
font-size: 16px;
}


#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 12px;
font-weight: bold;
width: 90px;
height: 90px;
}
#page-top a {
display: block;
background: #3ab483;
text-decoration: none;
color: #fff;
width: 90px;
height: 90px;
padding: 33px 0 0 0;
text-align: center;
border-radius: 50%;
}
#page-top a:hover {
text-decoration: none;
background: #3ab483;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}


/*======================================

	5. お問い合わせ設定
	
=======================================*/

.contact {
margin: 0 auto 0 auto;
padding: 146px 0 100px 0;
background-color: #d4e3b6;
background-image: url("img/contact.svg");
background-repeat: no-repeat;
background-position: top 146px right;
background-size: 400px;
}

.contact-box {
margin: 0 auto;
padding: 80px;
width: 1100px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 5px 15px 0px rgba(165, 207, 80, 0.35);
border-radius: 10px;
}

.contact h2 {
margin: 0 auto;
padding: 70px 0 0 0;
font-size: 50px;
line-height: 1;
width: 1100px;
}

.contact-comm {
margin: 0 auto;
padding: 50px 0 10px 0px;
max-width: 1100px;
}

.contact-comm h3 {
font-size: 30px;
line-height: 1.2;
text-align: center;
}

.contact-comm h4 {
margin: 0 0 70px 0;
font-size: 24px;
line-height: 1.2;
text-align: center;
}

.contact-comm .comment {
text-align: center
}

/*---- SNOWMONKEY ------*/

.wp-block-snow-monkey-forms-item {
margin: 0 0 50px 0;
}

.smf-item {

}

.smf-item__label {
font-size: 16px;
font-weight: bold;
}

.smf-text-control__control {
border: 1px solid #9ece09!important;
width: 100%;
padding: 20px!important;
font-size: 16px;
}

.smf-text-control__control:focus {
outline: 2px solid #568700!important;
}

.smf-textarea-control__control {
border: 1px solid #9ece09!important;
width: 100%;
padding: 20px!important;
font-size: 16px;
line-height: 1.6;
}

.smf-textarea-control__control:focus {
outline: 2px solid #568700!important;
}

.smf-action {
text-align: center;
}

.smf-button-control__control {
margin: 0 auto;
padding: 10px;
width: 200px;
font-size: 18px;
border: 1px solid #9ece09;
}

.smf-item__col {

}

.smf-item__col--label {
font-size: 16px;
font-weight: bold;
}

/* .smf-placeholder 内に .smf-text-control__control が無い場合だけ、
   親（= .smf-placeholder）にボーダーを出す */
.smf-placeholder:not(:has(.smf-text-control__control, .smf-textarea-control__control)) {
border: 1px solid #9ece09!important;
width: 100%;
padding: 20px!important;
font-size: 16px;
line-height: 1.6;
background-color: #FFF;
border-radius: 2px;
}



/*======================================

	5. wp-pagenavi設定
	
=======================================*/

/*---- wp-pagenavi ------*/

.wp-pagenavi {
margin: 0 auto 100px auto;
overflow: hidden;
text-align: center;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

/*---- wp-pagenavi ページ「〇/〇」 ------*/
.wp-pagenavi .pages {
display: none;
}

/*---- wp-pagenavi ≪ 先頭 ------*/
.wp-pagenavi .first {
display: none;
}

/*---- wp-pagenavi ≪ ------*/
.wp-pagenavi a.previouspostslink {
margin: 0 5px;
padding: 10px;
display: inline-block;
width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.previouspostslink:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 省略「...」 ------*/
.wp-pagenavi .extend {
border: none;
}

/*---- wp-pagenavi 各ページ（リンクあり） ------*/
.wp-pagenavi a.page {
margin: 0 5px;
padding: 10px;
display: inline-block;
min-width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.page:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 現在のページ ------*/
.wp-pagenavi .current {
margin: 0 5px;
padding: 10px;
display: inline-block;
min-width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 各ページ（現在のページより前のページ） ------*/
.wp-pagenavi .smaller {

}

/*---- wp-pagenavi 各ページ（現在のページより後のページ） ------*/
.wp-pagenavi .larger {

}

/*---- wp-pagenavi ≫ ------*/
.wp-pagenavi a.nextpostslink {
margin: 0 5px;
padding: 10px;
display: inline-block;
width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.nextpostslink:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 最後 ≫ ------*/
.wp-pagenavi .last {
display: none;
}