@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.3
*/

/*****************************
 * ページ全般
 *****************************/
/* User-Agent によるスタイル変更の対策 */
address {
  font-style: normal;
}
/**
 * クエリループのページング調整
 */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.page-numbers {
  margin: 0 4px;
  display: inline-block;
  width: 46px;
  height: 46px;
  line-height: 46px;
  color: #333333;
  text-align: center;
  text-decoration: none;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background-color: rgba(128, 128, 128, 0.4);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.page-numbers:hover {
  color: white;
  background-color: #83B34CAA;
}
/* クエリーループのページング機能の現在番号の色調整 */
.page-numbers.current {
  color: white;
  background-color: #333333;
}
/* ページングの上部にマージンを付与する */
ul.wp-block-post-template + nav.wp-block-query-pagination {
  margin-top: 70px;
  margin-bottom: 0;
}
/**
 * コンテンツ間の上下の margin を排除する.
 */
.content,
.entry-content,
main#main article {
  margin: 0;
}
header#header {
  margin: 0;
}

/**
 * 要素の中央揃え(左右)
 */
.center-content {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
/**
 * カバーのマージン排除用
 */
.wp-block-cover.margin-zero {
  margin: 0;
}
/**
 * 見出しのフォントのベース色
 */
#main h2.base-font,
#main h3.base-font {
  color: #567532;
  font-family: serif;
}
@media screen and (max-width: 375px){
  #main h2.base-font,
  #main h3.base-font {
    font-size: 1.5em;
  }
}
/**
 * ベースとなるボタンのデザイン
 */
.base-btn-design > a {
  padding: 15px 50px;
  position: relative;
  width: auto;
  color: #567532;
  font-size: 1.2em;
  font-family: serif;
  letter-spacing: 0.2em;
  background-color: transparent;
}
.base-btn-design > a:hover {
  color: white;
  background-color: #83B34C;
  transition: all 0.2s ease-in-out;
}
.base-btn-design > a:hover::before,
.base-btn-design > a:hover::after {
  border: none;
}
.base-btn-design > a::before,
.base-btn-design > a::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #567532;
}
.base-btn-design > a::before {
  top: -2px;
  left: -2px;
}
.base-btn-design > a::after {
  top: 2px;
  left: 2px;
}

/*****************************
 * ヘッダー調整
 *****************************/
/**
 * 全ページ(固定・投稿)でヘッダーの高さを合わせる
 */
#header.header {
  height: 100%;
  background-size: cover;
}
#header-in.wrap {
  width: 100%;
  height: 100%;
  min-height: auto;
}
/**
 * サイトのヘッダーとフッターのフォント統一
 */
#header-container > #header-container-in,
div#container > footer#footer {
  font-family: serif;
}
/***********************************************
 * [ST] ヘッダー動画周り
 ***********************************************/
/**
 * ヘッダーの動画をヘッダーサイズいっぱいに広がるようにする
 */
#wp-custom-header {
  height: 100%;
}
#wp-custom-header > #wp-custom-header-video {
  display: block;
  object-fit: cover;
  height: 100%;
}
#wp-custom-header > #wp-custom-header-video-button {
  display: none;
}
/***********************************************
 * [ED] ヘッダー動画周り
 ***********************************************/
/***********************************************
 * [ST] ヘッダーサイト名周り
 ***********************************************/
/**
 * ヘッダーのサイト名
 */
#header-in .logo {
  margin-left: 50px;
  margin-bottom: 50px;
  padding: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  text-align: start;
}
#header-in .logo > a {
  display: block;
}
.header-type-inquiry .header-type-inquiry-title-area {
  position: relative;
}
#header-container > #header-container-in header#header .header-in {
  justify-content: flex-end;
}
#header-container > #header-container-in .site-name-text {
  display: inline-block;
  color: white;
  font-size: 3em;
  line-height: 1.1em;
  text-shadow: 3px 3px 3px grey;
}
/***********************************************
 * [ED] ヘッダーサイト名周り
 ***********************************************/
/***********************************************
 * [ST] ヘッダーメニュー周り
 ***********************************************/
/**
 * ヘッダーメニューの配色設定
 */
#header-container > #header-container-in nav#navi {
  background-color: #778F57;
}
#header-container > #header-container-in nav#navi .navi-in a {
  color: white;
  font-size: 0.9em;
}
#header-container > #header-container-in nav#navi .navi-in a:hover {
  background-color: #83B34C;
  transition: all 0.2s ease-in-out;
}
/**
 * ヘッダーメニューの区切り
 */
#navi .navi-in > ul > li {
  position: relative;
  display: inline-block;
  width:140px;
}
#navi .navi-in > ul > li .item-label::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: calc(50% - 9px); /* 線の上下位置(ここの指定で中央に来るようにする) */
  right: 0;
  width: 2px; /* 線の幅 */
  height: 18px; /* 線の高さ */
  background-color: white; /* 線の色 */
}
/* 右端の区切りを取り除く */
#navi .navi-in > ul > li:last-child .item-label::after {
  content: "";
  width: 0px; /* 線の幅 */
}
.navi-in > ul > .menu-item-has-children > a::after {
  right: 10px;
}
/***********************************************
 * [ED] ヘッダーメニュー周り
 ***********************************************/
/***********************************************
 * [ST] ヘッダーの「LINEでお問い合わせ」要素用
 ***********************************************/
.header-type-inquiry {
  display: flex;
  height: 100%;
  /* LINEでお問い合わせのエリアサイズ用変数 */
  --variable-header-type-inquiry-area: 120px;
}
.header-type-inquiry .header-type-inquiry-title-area {
  display: flex;
  flex-basis: calc(100% - var(--variable-header-type-inquiry-area));
  justify-content: center;
  align-items: center;
}
.header-type-inquiry-area {
  display: flex;
  padding-top: 50px;
  padding-bottom: 50px;
  flex-basis: var(--variable-header-type-inquiry-area);
  justify-content: center;
  align-items: center;
  background-color: white;
}
.header-type-inquiry-area > a {
  padding-top: 100px;
  position: relative;
  writing-mode: vertical-lr;
  font-size: 47px;
  text-decoration: none;
}
.header-type-inquiry-area > a:link,
.header-type-inquiry-area > a:visited,
.header-type-inquiry-area > a:hover {
  color: inherit;
}
/** LINE アイコン表示 */
.header-type-inquiry-area > a::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  --variable-header-type-inquiry-area-image: 85px;
  width: var(--variable-header-type-inquiry-area-image);
  height: calc((var(--variable-header-type-inquiry-area-image) / 128) * 122);
  background-image: url("/wp-content/uploads/2022/12/line_icon.png");
  background-repeat: no-repeat;
  background-size: contain;
}
/***********************************************
 * [ED] ヘッダーの「LINEでお問い合わせ」要素用
 ***********************************************/

/*****************************
 * フッター調整
 *****************************/
footer#footer #footer-in {
  margin: 0;
  width:100%;
}
footer#footer #footer-in .footer-bottom {
  margin: 0 auto;
}
.footer-left {
  width: 20%;
}
.footer-center {
  width: 60%;
  border-bottom: 2px solid #ffffff;
}
.footer-right {
  display: none;
}
.footer-left aside.widget,
.footer-center aside.widget {
  margin: 0;
}
/**
 * フッター中央
 */
/** フッターのナビゲーションの並び調整(フッターメニュー) */
footer .nav-wrap {
  display: flex;
  justify-content: center;
  align-items: start;
  margin-bottom: 50px;
}
@media screen and (max-width: 834px){
  footer .nav-wrap {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
footer .nav-wrap nav {
  margin-right: 100px;
}
footer .nav-wrap nav:last-child {
  margin-right: 0;
}
/* 各ナビゲーションの並びを左寄せの縦並びにする */
footer div.nav-wrap nav.wp-block-navigation  > ul {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
}
/* 各ナビゲーション項目のクリック可能な領域を広げる */
footer div.nav-wrap nav.wp-block-navigation > ul > li.wp-block-navigation-item {
  display: block;
  width: 100%;
}
footer div.nav-wrap nav.wp-block-navigation > ul > li.wp-block-navigation-item > a:hover {
  background-color: #83B34C;
  transition: all 0.2s ease-in-out;
}
/* 項目に「・」を付与する */
footer div.nav-wrap nav.wp-block-navigation > ul > li.wp-block-navigation-item > a {
  padding-left: 1.1em;
  position: relative;
  color: white;
  font-size: 1.1em;
}
footer div.nav-wrap nav.wp-block-navigation > ul > li.wp-block-navigation-item > a:before {
  content: "・";
  position: absolute;
  top: 0.5em;
  left: 0em;
}
/* 下部のナビゲーションの並びを左寄せの横並びにする */
footer div.nav-wrap-under nav.wp-block-navigation  > ul {
  flex-flow: row;
}
footer div.nav-wrap-under nav.wp-block-navigation > ul > li.wp-block-navigation-item {
  width: auto;
}
footer div.nav-wrap-under nav.wp-block-navigation > ul > li.wp-block-navigation-item:first-child > a:before {
  content: "";
}
footer div.nav-wrap-under nav.wp-block-navigation > ul > li.wp-block-navigation-item > a:before {
  content: "|";
}
@media screen and (max-width: 580px){
  footer div.nav-wrap-under nav.wp-block-navigation  > ul {
    flex-flow: column;
  }
  footer div.nav-wrap-under nav.wp-block-navigation > ul > li.wp-block-navigation-item:first-child > a:before,
  footer div.nav-wrap-under nav.wp-block-navigation > ul > li.wp-block-navigation-item > a:before {
    content: "・";
  }
}

ul.contact-us, footer .copyright{
	font-size: 1.4em;
}

.fullimg{
	width: 100%;
}
/**
 * アドレス等の項目の調整
 */
footer address {
  font-style: normal;
  color: white;
}
ul.contact-us {
  font-size: 1.3em;
  letter-spacing: 0.3em;
}
ul.contact-us li {
  display: flex;
  justify-content: center;
  align-items: center;
}
/**
 * copyright の表示調整
 */
footer .copyright {
  font-size: 1.0em;
}
/**
 * フッターにシルエットを装飾する
 */
footer#footer {
  margin: 0;
  color: white;
  background-color: #567532;
  background-image: url("/wp-content/uploads/2022/11/01_03_雑草シルエット.png");
  padding-bottom: 80px;
  background-repeat: repeat-x;
  background-position: bottom;
}
/**
 * 画面が小さくなった際にフッターメニューが消されないようにする
 */
@media screen and (max-width: 834px){
  .footer-widgets {
    display: inherit;
  }
}
/**
 * フッターの住所と copyright のサイズ調整
 */
@media screen and (max-width: 375px){
  footer address {
    font-size: 10px;
  }
  footer .copyright {
    font-size: 1.1em;
  }
}

/*****************************
 * コンテンツ別
 *****************************/
/***********************************************
 * [ST] お知らせ
 ***********************************************/
.news {
  padding: 150px 0;
}
#main .news h2.news-headline {
  color: #567532;
  font-weight: 500;
  margin-top: -50px;
  margin-bottom: 50px;
}
/** お知らせ一覧の横幅を調整する */
.news ul {
  margin-left:  25%;
  margin-right: 25%;
  padding: 0;
  font-family: sans-serif;
}
/** 狭い画面に合わせて左右の余白を緩和する */
@media screen and (max-width: 1079px){
  .news ul {
    margin-left:  5%;
    margin-right: 5%;
  }
}
/** お知らせの1コンテンツに対する枠組みの設定 */
.news ul > li {
  margin-bottom: 50px;
}
.news .news-property {
  margin: 0;
  border-bottom: 1px solid #567532;
  box-sizing: border-box; /* border が外にはみ出さないようにする */
}
.news .news-property > div.wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  margin-bottom: 5px;
  row-gap: 5px;
}
/** 投稿日 */
.news-post-date {
  color: #567532;
  font-weight: bold;
}
/** 投稿カテゴリ */
.news-category > a:first-child {
  margin-left: 30px;
}
.news-category > a {
  padding: 3px 15px;
  color: #ffffff;
  text-decoration: none;
  background-color: #567532;
}
.news-category > a:link,
.news-category > a:visited,
.news-category > a:hover {
  color: #ffffff;
}
.news-category > a:hover {
  background-color: #83B34C
}
/** 投稿タイトル */
.news h3.news-post-title {
  padding: 0px;
}
.news h3.news-post-title > a {
  margin-left: 15px;
  color: #567532;
  font-size: 24px;
  text-decoration: none;
}
.news h3.news-post-title > a:hover {
  color: #83B34C
}
/***********************************************
 * [ED] お知らせ
 ***********************************************/
/***********************************************
 * [ST] お問い合わせ
 ***********************************************/
/** お問い合わせ背景 */
.inquiry-cover {
  padding: 0;
}
/** お問い合わせコンテンツ全体 */
.inquiry {
  color: #567532;
  font-family: serif;
}
/** お問い合わせタイトル */
#main .inquiry h2.inquiry-title {
  margin-top: 150px;
  margin-bottom: 30px;
  padding: 0;
}
/** お問い合わせアドレス部 */
.inquiry-address {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
/** 問い合わせ説明 */
.inquiry .inquiry-detail {
  margin-bottom: 15px;
  font-size: 1.6em;
  line-height: 1.4em;
  text-align: center;
}
/** 問い合わせ情報 */
.inquiry .inquiry-info {
  padding: 1em;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 16em;
  max-width: 100%;
  color: black;
  font-size: 2em;
  line-height: 1.0em;
  background: rgba(200, 182, 149, 0.8);
}
@media screen and (max-width: 375px){
  .inquiry .inquiry-detail {
    font-size: 1.3em;
  }
  .inquiry .inquiry-info {
    font-size: 1.5em;
  }
}
/** お問い合わせ(TEL) */
.inquiry .inquiry-info .inquiry-tel {
  margin-bottom: 15px;
  font-size: 2em;
  line-height: 1.0em;
}
/** お友だち追加して無料相談するボタン */
.inquiry-line-btn-padding {
  margin: auto;
  padding: 120px 40px; /* 疑似要素を挿入する領域を確保してレスポンシブに対応する */
  padding-bottom: 60px;
  position: relative;
  width: calc(432px + 80px);
  max-width: 100%;
  overflow: hidden;
}
.inquiry-line-btn > a {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 100%;
  height: 4em;
  text-decoration: none;
  color: #567532;
  font-size: 1.2em;
  font-family: serif;
  background: rgba(210, 255, 210, 0.6);
  border-radius: 1.2em;
  border: 3px solid #00B900;
  overflow: hidden;
}
.inquiry-line-btn > a:hover {
  background: rgba(210, 255, 210, 0.30);
}
/** ボタンの光るアニメーション */
@keyframes shiny-anima {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: scale(25) rotate(25deg);
    opacity: 0;
  }
}
.inquiry-line-btn > a::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny-anima;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/** LINE アイコン */
.inquiry-line-icon {
  width: 0;
  height: 0;
}
.inquiry-line-icon::after {
  content: url("/wp-content/uploads/2022/12/line_icon.png");
  display: block;
  position: absolute;
  top: 35px;
  right: -10px;
  transform: rotate(15deg) scale(0.7);
}

#main p.think-detail {
	color: white;
}

.consul-images{
	margin: 10%;
}

@media screen and (max-width: 375px){
  .inquiry-line-btn-padding {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/***********************************************
 * [ED] お問い合わせ
 ***********************************************/

/***************************************
 * フェードインのアニメーション設定
 * 主に見出しである h2 タグに適用する
 ***************************************/
/*
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anima-fade-in {
  animation: fadeIn 1s ease 0.3s 1 normal;
}
*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.article ul, .article ol{
		padding-left: 0;
	}
	#header-container > #header-container-in .site-name-text {
		font-size: 2em;
	}
	h1#header-in .logo {
		margin-left: 100px;
		margin-right: 100px;
	}
	#header.header{
		height: 500px;
	}
	div.header-type-inquiry-area > a::before{
		--variable-header-type-inquiry-area-image: 50px;
	}
	div.header-type-inquiry-area > a{
		padding-top: 70px;
		font-size: 27px;
	}
	div.header-type-inquiry{
		--variable-header-type-inquiry-area:60px;
	}
	div.header-type-inquiry-area{
		padding: 20px 0;
	}
	#header.header{
		background-position: 80% 0%;
	}
	
	div.service-card > .detail{
		padding: 3%;
		font-size: 1em;
		text-align:left;
	}
	div.service-card > .detail > p{
		text-align:left;
	}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	p.safe-detail,p.base-detail,p.service-contents-detail,p.danger-detail,p.weeder-detail,p.reason-detail,p.pro-detail {
    font-size: 0.9em;
	padding: 3%;
  }
	#header-in .logo {
		margin-left: 3%;
		margin-bottom: 7%;
		font-size:0.7em;
	}	div.route-detail{
        font-size: 0.9em;
	}
  .detail > p {
	  text-align:left;
  }
  .service-cards {
	  margin: 8%;
  }
  main#main h2.base-font,main#main h2.news-headline{
	font-size:1.8em;
	  padding:0;
  }
  div.frend-add-line-btn > a {
	font-size: 2.0em;
  }
  div.news h3.news-post-title > a{
	font-size: 16px;
  }
  .news-post-date{
	font-size: 18px;
  }
  .news .news-category > a{
	font-size:12px;	
  }
  
  p.wp-block-post-excerpt__excerpt{
	font-size: 14px	
  }
  div.journal-contents-group {
	margin: 0 5%	
  }
	.inquiry .inquiry-detail{
		font-size:1.3em;
	}
	.inquiry .inquiry-info p.inquiry-tel {
		font-size:1.3em;
	}
	.inquiry .inquiry-info p {
		font-size:0.8em;
	}
	main#main .inquiry h2.inquiry-title{
		margin-top: 50px;
	}
	main#main h2.frend-title{
	    letter-spacing: 5px;
	}
	.wp-block-post-template.is-flex-container li{
		margin: 5%;
        width: 90%;
	}
	.wp-container-8,.wp-container-24{
		display: inline-flex;
    	flex-direction: column-reverse;
	}
	section.safe-section-padding{
		padding-bottom: 0;
	}
	section.base-section.wp-block-group{
		margin: 5%;
	}
	section.weeder-section-padding{
		padding-bottom:0;
	}
	main#main h2.effect-title{
		width:80%;
		padding: 3%;
		margin-top:0;
	}
	p.effect-detail {
        font-size: 0.9em;
		padding:10%;
	}
	main#main h2.reason-title{
		margin:10%;
		width:80%;
		padding: 5%;
	}
	section div.pro-title-group-padding.wp-block-group{
		padding-bottom: 0;
	}
	p.pro-narration{
		padding:5%;
		font-size: 1.0em;
	}
	p.pro-plan{
		font-size:1.4em;
		left: 0;
	}
	div.profile-cover.wp-block-cover{
		padding:5%;
		margin: 5%;
	}
	main#main h2.journal-title{
		margin:15%;
		width: 70%;
        max-width: 70%;
		padding: 5%;
	}
	div.journal-post-group{
		padding: 5%
	}
	main#main h3.journal-post-title{
		font-size: 1.5em;
	}
	ul.contact-us, footer .copyright{
		font-size: 0.8em;
	}
	.wp-block-image img{
		padding: 0;
	}
	p.agency-detail, p.consul-detail, p.assist-detail{
		font-size: 15px
	}
	#header.header{
		height: 100%;
	}
	#main div > h2.agency-title, #main div > h2.consul-title, #main div > h2.assist-title{
		margin-top: 100px; 
     	margin-bottom: 10px; 
    	width: 80%;
	}
	div.assist-detail-paddng{
		padding-top: 0;
		padding-bottom: 50px;
	}
	div.profile-detail, p.pro-narration{
		font-size:0.8em;
	}
	#main div > h2.profile-title{
		font-size: 2em;
	}
	
	.wp-container-8{
    	flex-direction: column;
	}
	
	#post-1121 ul{
		margin-left: 5%;
	}
	
	main#main article#post-3{
		margin: 5%;
	}
	figure.josoimg{
		padding-left: 20%;
		padding-right: 20%;
	}
	div.josoimg{
		padding-left: 8%;
		padding-right: 8%;
	}
}