@charset 'utf-8';
/* page
--------------------------*/
.page-ttl-01{ display: flex; align-items: center; justify-content: center; height: 4.1666em; font-size: 6em; font-weight: 400; font-family: var(--ff-science-gothic); letter-spacing: 0.03em; line-height: calc(66/60); text-align: center; }
.page-ttl-02{ margin-bottom: .7812em; font-size: 3.2em; line-height: calc(48/32); }
.page-txt-01{ font-size: 1.6em; line-height: calc(27.2/16); }

a.page-link{ position: relative; color:#4BB132; }
a.page-link{ display: inline-flex; }
a.page-link::before{ content: ''; width: 100%; height: 1px; position: absolute; right: 0; bottom: 0; background-color: #4BB132; transition: .2s ease; }
.page-thanks-link{ margin-top: 8em; }
@media only screen and (min-width: 769px) {
  a.page-link:hover:before {
    width: 0;
  }
}
@media only screen and (max-width: 768px) {
	.page-ttl-01{ font-size: 3em; height: 4.333em; line-height: calc(37.4/30); }
}

/* 
filter
------------------------- */
.filters{ margin-bottom: 7em; display: flex; flex-wrap: wrap; justify-content: center; gap:2em; }
.filter{ position:relative; width:26.4em; }

  .filter__btn{
    width:100%;
    height:5.2em;
    padding:0 3.7em 0 1.5em;
	font-size: 1em;
	line-height: calc(18.2/14);
    border:0;
    background:#0D1116;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:bold;
    cursor:pointer;
	border-bottom:2px solid #84888B;
  }

  .filter__btn span{ font-size: 1.4em; }
  .filter__btn svg{ position: absolute; right: 1.07em; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; }
  .filter__selected{ font-size: 1.8em; }
  .filter.is-open .filter__btn svg{ transform: translateY(-50%) rotate(180deg); }
  .filter__chev{
    width:22px;
    height:22px;
    color:var(--accent);
    transition:transform .2s ease;
  }

  .filter.is-open .filter__chev{ transform:rotate(180deg); }

  .filter__menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#E8E8E8;
    border:1px solid var(--menu-border);
    padding:1.8em 0;
    border-radius: 0 0 .5em .5em;
    overflow: hidden;
    z-index: 2;
    /* hidden by default */
    display:none;
  }

  .filter.is-open .filter__menu{ display:block; }

  .filter__item{
    position:relative;
    padding:.5em 1.4285em .5em 2.1428em;
    font-size:1.4em;
	line-height: calc(15.4/14);
    color:#0D1116;
    user-select:none;
	cursor: pointer;
  }
  .filter__tick{
    position:absolute;
    left:.928em;
    top:50%;
    transform:translateY(-50%);
    width: 1em;
	height: 1em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#111;
	opacity: 0;
  }
  .filter__item.is-active .filter__tick { opacity: 1; }

  .filter__tick svg{ width:18px; height:18px; }

  .filter__item:hover{ background:rgba(0,0,0,.06); }

@media only screen and (max-width: 768px) {
  .page-ttl-02{ margin-bottom: .7272em; font-size: 2.2em; line-height: calc(33/22); }
	.filters{ justify-content: space-between; margin-bottom: 3em; }
	.filter{ flex: 1; }
	.filter__btn{ padding:0 2.6em 1.5em 1em; height: unset; }
	.filter__btn svg{ right: .8333em; top: .4166em; transform: rotate(0); }
	.filter.is-open .filter__btn svg{transform: rotate(180deg);}
	.filter__btn span{ font-size: 1em; }
	.filter__selected{ font-size: 1.4em; }
}

  /* posts lists
  ------------------------*/
.posts__lists{ display: flex; flex-wrap: wrap; gap: 5em 4em; }

.posts__list{
  flex: 0 0 calc((100% - 2 * 4em) / 3);
}
.posts__list-empty{ flex: 1; text-align: center; color:#fff; font-size: 3em; }
.posts__list--link{ display: block; color: inherit; }
.posts__list--meta{ margin-top: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: 2.2em; }
.posts__list--date{ font-size: 1.4em; font-family: var(--ff-science-gothic); line-height: calc(15.4/14); color: #84888b; }
.posts__list--thumb{
  position: relative;
  border-radius: .5em;
  height: 26em;
  overflow: hidden;
}
.posts__list--thumb.sample-img::before{ 
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #5c5c5b;
  border-radius: .5em;
  background-color: transparent;
  pointer-events: none;
  z-index: 1;
}
.posts__list--thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}
.posts__list--link:hover .posts__list--thumb img{
  transform: scale(1.1);
}

.posts__list--tag {
  position: relative;
  height: 2em;
  min-width: 11.3em;
  padding: 0 1.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #84888b;
  background: url(../../img/share/cat_border.png) no-repeat 0 0 / 100% 100%;
}

/* .posts__list--tag::after {
  content: "";
  position: absolute;
  left: 0;
  top:0;
  background: #0D1116;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0% 50%
  );
  z-index: -1;
}
.posts__list--tag::before {
  content: "";
  position: absolute;
  left: -1px;
  top:-1px;
  background: #5c5c5b;
  width: calc(100% + 2px);
  height: calc(100% + 2px);

  clip-path: polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0% 50%
  );
  z-index: -2;
} */

.posts__list--tag span {
  position: relative;
  z-index: 1;
  font-family: "Noto Sans", sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
}
.posts__list--ttl{ margin-top: .625em; font-size: 1.6em; font-weight: bold; line-height: calc(27.2/16); }

@media only screen and (max-width: 768px) {
	.posts__lists{ gap:3.5em 2em; }
	.posts__list{ flex:0 0 calc((100% - 1 * 2em) / 2); }
	.posts__list--thumb{ height: 10.9em; }
	.posts__list--meta{ margin-top: 1.5em; }
	.posts__list--date{ font-size: 1.1em; }
	.posts__list--tag{ margin-top: 1em; min-width: 10.2em; height: 1.8em; }
	.posts__list--tag span{ font-size:1em; }
	.posts__list--ttl{ font-size: 1.4em; line-height: calc(21/14); }
}

/* detail
------------------------- */
#detail{ padding-top: 8em; }
.detail-meta{ display: flex; flex-wrap: wrap; font-size: 1.4em; font-weight: 400; font-family: var(--ff-science-gothic); line-height: calc(15.4/14); color:#84888b; }
.detail-meta span{ position: relative; }
.detail-meta span+span{ margin-left: 36px; }
.detail-meta span+span:before{ content:''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 1px; background-color: #84888b; }
.detail-ttl-01{ margin-top: .7812em; font-size: 3.2em; line-height: calc(48/32); }
.detail-thumb{ margin-top: 5em; margin-bottom: 8em; border-radius: .5em; overflow: hidden; }
.detail-thumb img{ width: 100%; }
.detail-wrap{ max-width: 80em; margin: 0 auto; }
.detail--no-thumb{ margin-top: 5em; }
.detail-content{ font-size: 1.6em; line-height: calc(27.2/16); }
.detail-content p{ margin-bottom: 2.1875em; }
.detail-content h2{ margin-bottom: .63em; font-size: 200%; }
.detail-content h3{ margin-bottom: .63em; font-size: 180%; }
.detail-content h4{ margin-bottom: .63em; font-size: 160%; }
.detail-content h5{ margin-bottom: .63em; font-size: 140%; }
.detail-content table{ margin-bottom: 2.1875em; width: 100%; border-collapse: collapse; }
.detail-content table th,
.detail-content table td{ padding: .5em; border:1px solid #84888b; }
.detail-content ul,
.detail-content ol{ padding-left: 1.2em; margin-bottom: 2.1875em; list-style-position: inside; }
.detail-content ul{ list-style: disc; }
.detail-content ol{ list-style: decimal; }
.detail-content a{ position: relative; color:#4BB132; }
.detail-content a:not(.wp-block-button__link),
.detail-content a:not(.wp-element-button){ display: inline-flex; }
.detail-content a:not(.wp-block-button__link)::before,
.detail-content a:not(.wp-element-button)::before{ content: ''; width: 100%; height: 1px; position: absolute; right: 0; bottom: 0; background-color: #4BB132; transition: .2s ease; }
.detail-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 12em auto 0; gap:5em; }
.detail-btn-next,
.detail-btn-prev{ width: 5em; }
.detail-btn-next a,
.detail-btn-next span,
.detail-btn-prev a,
.detail-btn-prev span{ width: 100%; height: 5em; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; border:1px solid #fff; border-radius: 50%; overflow: hidden; }
.detail-btn-prev span{ visibility: hidden; }
.detail-btn-next a:hover,
.detail-btn-prev a:hover{ background-color: #fff; }
.detail-btn-next a:hover path,
.detail-btn-prev a:hover path{ fill: #84888b; }
.detail-btn-next a:hover line,
.detail-btn-prev a:hover line{ stroke: #84888b; }
.mb-0{ margin-bottom: 0 !important; }

@media only screen and (max-width: 768px) {
	#detail{ padding-top: 3.5em; }
	.detail-meta{ font-size: 1.1em; }
	.detail-meta span+span{ margin-left: 27px; }
	.detail-meta span+span:before{ left: -15px; }
	.detail-ttl-01{ margin-top: 0.444em; font-size: 1.8em; line-height: calc(23.4/18); }
	.detail-thumb{ width: calc(100% + 5em); margin-left: -2.5em; margin-top: 3.5em; border-radius: 0; }
  .detail--no-thumb{ margin-top: 3.5em; }
	/* .detail-content{ margin-top:3.125em; } */
	.detail-bottom{ margin-top: 8em; gap: 2.5em; }
	.detail-btn-prev,
	.detail-btn-next{width: 4em;}
	.detail-btn-next a,
	.detail-btn-prev a{ height: 4em; }
	.detail-btn-center{ width: 14.2em; }
	.detail-btn-center .btn-01{ width: 100%; }
	.detail-btn-center .btn-01 span{ font-size: 1.5em; }
  .detail-content p{ margin-bottom: 2.8125em; } 
  .detail-content h2,
  .detail-content h3,
  .detail-content h4,
  .detail-content h5{ margin-bottom: .8181em; font-size: 1.375em; }
}

a.wp-block-button__link{
  margin-bottom: 1em;
	display: inline-flex; align-items: center; justify-content: center; min-width: 15em; height: 3.5em;
	background: linear-gradient(90deg, #006f2e 30%, #9ac717 75%);
    border: 0;
    color: #fff !important;
    background-size: 200% 100%;
    background-position: 30% 0;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	font-size: 1em;
	cursor: pointer;
	border-radius: .25em;
	overflow: hidden;
  font-size: 1.25em; 
  font-weight: bold;
}


@media only screen and (min-width: 769px) {
  .detail-content a:hover:before{ width: 0; }
	.wp-block-button__link:hover{ background-position: 100% 0; }
}

@media only screen and (max-width: 768px) {
  a.wp-block-button__link{ font-size: 1.0625em; min-width: 16.117em; height: 4.1176em; }
}

/*
contact
------------------------*/
.contant-form{ margin-top: 8em; }
.contact-top-desc{ font-size: 1.6em; }

/*
form
------*/
.form-table{ width: 100%; border-collapse: collapse; border-bottom: 1px solid #4F5255; }
.form-table th,
.form-table td{ text-align: left; vertical-align: top; border-top:1px solid #4F5255; }
.form-table th{ width: 18.125em; padding: 1.875em 0; font-size: 1.6em; font-weight: bold; line-height: calc(27.2/16); }
.form-table td{ padding: 3em 0; }
.form-table input,
.form-table textarea{ padding: 0.625em; width: 100%; height: 3.125em; font-size: 1.6em; font-weight: 400; line-height: calc(27.2/16); color: #fff; border:1px solid #4F5255; border-radius:.3125em; background-color: transparent; }
.form-table textarea{ height: 18.75em; }
.form-table textarea{ font-family: inherit; }
.form-table p,
.error-txt{ font-size: 1.2em; line-height: calc(15.6/12); }
.form-comfirm-txt{ display: block; font-size: 1.6em; line-height: calc(27.2/16); }
.form-table p+p{ margin-top: 1em; }
.error-txt{ margin-top: 0.5em; color: #4bb132; }
.error-input{color:#232323 !important;background-color: #D7E2D5 !important;}
/* .error-input{ background-color: #D7E2D5 !important; color: #0D1116; } */
.form-request-txt{ margin-right: 6em; width: 2.923em; padding:.1538em 0; float:right; display: inline-block; font-size: .8125em; background-color: #337922; border-radius: .384em; text-align: center; }
.form-w-m{ max-width: 360px; }
.form-flex{ display: flex; flex-wrap: wrap; gap:2em; }
.flex-two .form-flex-item{ flex:1; }
.flex-post-code{ gap: 3em; }
.flex-post-code .form-flex-item{ position: relative; flex: 0 0 calc((100% - 2 * 3em) / 3); }
.flex-post-code .form-flex-item+.form-flex-item:before{ content: ''; position: absolute; left: -2em; top: 50%; transform: translateY(-50%); width: 1em; height: 1px; background-color: #fff; }

.form-agree{ margin-top: 6em; display: flex; flex-direction: column; align-items: center; }
.custom-radio {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  cursor: pointer;
}
.radio-text{ font-size: 1.6em; line-height: calc(27.2/16); }

/* hide native radio */
.custom-radio input {
  display: none;
}

/* outer circle */
.radio-mark {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1px solid #4BB132;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

/* inner dot */
.radio-mark::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #4BB132;
  transform: scale(0);
  transition: transform 0.2s ease;
}

/* checked state */
.custom-radio input:checked + .radio-mark::after {
  transform: scale(1);
}

/* optional hover */
.custom-radio:hover .radio-mark {
  box-shadow: 0 0 0 4px rgba(76, 209, 55, 0.15);
}

.form-select{ position: relative; }
/* .form-select select{ position: absolute; visibility: hidden; pointer-events: none; } */
  .select_pannel{
	position: relative;
  }
  .select_custome{ display: flex; flex-wrap:wrap; justify-content: space-between; align-items: center; padding: 0.625em; width: 100%; height: 3.125em; font-size: 1.6em; font-weight: 400; line-height: calc(27.2/16); color: #fff; border:1px solid #4F5255; border-radius:.3125em; background-color: transparent; cursor: pointer; }

  .select_custome i{ font-style: normal; font-size: .75em; }
  .select_custome.is-opend i{ transform: rotate(180deg); }
  .select__menu{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:#E8E8E8;
    border:1px solid var(--menu-border);
    padding:.8em 0;
    border-radius: .5em;
    overflow: hidden;
    z-index: 1;
  }
  .select__menu[aria-hidden="true"]{
    display: none;
  }

  .select.is-open .select__menu{ display:block; }

  .select__item{
    position:relative;
    padding:.5em 1.4285em .5em 2.1428em;
    font-size:1.6em;
	line-height: calc(15.4/14);
    color:#0D1116;
    user-select:none;
	cursor: pointer;
  }
  .select__tick{
    position:absolute;
    left:.928em;
    top:50%;
    transform:translateY(-50%);
    width: 1em;
	height: 1em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#111;
	opacity: 0;
  }
  .select__item.is-active .select__tick { opacity: 1; }
  .select__tick svg{ width:18px; height:18px; }
  .select__item:hover{ background:rgba(0,0,0,.06); }
  .form-btns{ margin-top: 7.5em; display: flex; flex-wrap: wrap; justify-content: center; gap: 5em; }

  @media only screen and (max-width: 768px) {
    .contant-form{ margin-top: 7em; }
    .contant-form.comfirm-form{ margin-top: 4.8em; }
    .form-table th,
    .form-table td{ display: block; width: 100%; }
    .form-table td{ padding: 0 0 2em; border-top:0; }
    .form-table th{ padding: 1.25em 0 1em; }

    .form-request-txt{ margin: 0 0 0 .8em; float: none; }

    .form-table p,
    .error-txt{ font-size: 1.4em; }
    .flex-post-code .form-flex-item+.form-flex-item:before{ width: .5em; left: -1.8em; }
    .form-table textarea{ height: 16.25em; }

    .form-agree{ margin-top: 3.8em; }
    .form-btns{ margin-top: 6em; }
    .form-btns.sp-flex-row{ gap: 2em; }
    .form-btns.sp-flex-row .btn-03,
    .form-btns.sp-flex-row .btn-02{ flex:0 0 calc((100% - 1 * 2em) / 2); }
  }

#js-posts-wrap.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.wp-block-image{ margin-top:4.375em; margin-bottom:2.1875em; border-radius: .3125em; overflow: hidden; }
.wp-block-image img{ width: 100%; }
@media only screen and (min-width: 769px) {
  .wp-block-group{ margin-top: 5em; }
  .wp-block-image{ width: calc(100% + 10em); margin-left: -5em; }
}

.pagination{ margin-top: 7.5em; }
.pagi{ display: flex; flex-wrap: wrap; justify-content: center; gap:1em; }
.pagi__btn{ display: inline-flex; align-items: center; justify-content: center; width: 3.125em; height: 3.125em; font-size: 1.6em; font-weight: 500; font-family: "Roboto", sans-serif; color: #fff; background-color: transparent; border:1px solid #707072; border-radius: 50%; overflow: hidden; cursor: pointer; }
.pagi__btn.is-active,
.pagi__btn:hover{ color:#707072; background-color: #fff; }
.pagi__next span,
.pagi__prev span{ font-size: 1.25em; line-height: 1; margin-top: 3px; }
  @media only screen and (max-width: 768px) {
    .pagi{ gap:.7em; }
    .pagi__btn{ width: 3.0769em; height: 3.0769em; font-size: 1.3em; }
  }