@charset "UTF-8";

/*--------------------------------------------------------------
# common-css
--------------------------------------------------------------*/
.no_scroll {
  overflow: hidden;
  height: 100vh;
}
.page_visual {
  margin-top: 6rem;
  background: url(/assets/img/common/page_visual_sp.png) no-repeat right bottom / cover;
  @media (min-width:992px) {
    margin-top: 10rem;
    background: url(/assets/img/common/page_visual.png) no-repeat center bottom / cover;
  }
}
.page_title {
  color: #847B6E;
  font-size: var(--fs-page-title);
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  padding: 1em 0 2em;
  @media (min-width:992px) {
    padding: 2.5em 0 4em;
  }

  &::before {
    display: block;
    content: attr(data-title);
    color: var(--key-color);
    font-size: var(--fs-normal);
    font-weight: 700;
    text-transform: uppercase;
  }
}
section {
  padding: 6rem 0;
  @media (min-width:768px) {
    padding: 10rem 0;
  }
}
.block_title {
  font-size: var(--fs-block-title);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.btn_wrap {
  margin-top: 5rem;

  .btn_i {
    display: block;
    font-weight: 700;
    color: var(--fc-base);
    text-align: center;
    width: fit-content;
    min-width: 19rem;
    padding: 0.5em 2em;
    background: #FFF;
    border: 1px solid currentColor;
    border-radius: 999rem;

    &:hover {
      color: var(--key-color);
    }
    &::after {
      display: inline-flex;
      content: "→";
      color: #FFF;
      justify-content: center;
      align-items: center;
      width: 2em;
      height: 2em;
      margin-left: 0.5em;
      background: var(--key-color);
      border-radius: 50%;
    }
  }
  .btn {
    display: block;
    color: #FFF;
    text-align: center;
    width: fit-content;
    padding: 0.5em 2em;
    background: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 999rem;

    &:hover {
      color: var(--accent-green);
      background: #FFF;
    }
  }
  .btn_arrow {
    color: var(--fc-base);
    font-weight: 700;
    position: relative;

    &::after {
      display: block;
      content: "";
      width: calc(100% + 2.2em);
      height: 1.5rem;
      border-right: 0.3rem solid var(--orange);
      border-bottom: 0.3rem solid var(--orange);
      position: absolute;
      top: 80%;
      left: -1.2em;
      transform: skew(30deg, 0);
      transition: 0.4s left ease;
    }
    &:hover::after {
      left: -0.5em;
    }
  }
}
.column2_img_text {
  background: #FFF;
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
  
  .img_wrap {
    margin-bottom: 1rem;
    @media (min-width: 768px) {
      width: 47.8%;
      margin-bottom: 0;
    }
  }
  .text_wrap {
    @media (min-width: 768px) {
      width: 47.76%;
    }
  }
  + .column2_img_text {
    margin-top: 6rem;
    @media (min-width:768px) {
      margin-top: 10rem;
    }
  }
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
  gap: 4.5rem 5.6%;
  
  .item {
    display: flex;
    flex-direction: column;
    background: #FFF;

    .text:last-of-type {
      flex-grow: 1;
    }
    .btn_wrap {
      margin-top: 2rem;
    }
  }
}
.page_intro .section_title {
  font-size: clamp( 2rem, calc( 1.4061855670103093rem + 1.6494845360824744vw ), 3.6rem );
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-bottom: 3rem;
}
.page_intro .section_title::after {
  display: block;
  content: "";
  width: 4.1rem;
  height: 1.6rem;
  margin: 2rem auto 0;
  background: radial-gradient(circle at 80%, var(--key-color) 7px,transparent 8px),
              radial-gradient(circle at 50%, var(--accent-green) 7px,transparent 8px),
              radial-gradient(circle at 20%, #F1F3D7 7px,transparent 8px);
}
.page_intro .text {
  max-width: 70rem;
  margin: 0 auto;
}
.contact_section {
  background: var(--bage);
  @media (min-width:768px) {
    padding: 8rem 0;
  }

  .content_block {
    text-align: center;
  }
  .text {
    color: #000;
    font-size: clamp( 1.4rem, calc( 1.2285714285714285rem + 0.4761904761904762vw ), 1.8rem );
    line-height: 2.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin: 0;
  }
  .btn_wrap {
    text-align: center;
    margin-top: 5rem;

    .btn_i {
      margin: 0 auto;
    }
  }
}
.category_badge {
  display: block;
  color: #FFF;
  font-size: clamp( 1.2rem, calc( 1.1142857142857142rem + 0.2380952380952381vw ), 1.4rem );
  width: fit-content;
  margin: 0.5em 0.5em 0.5em 0;
  padding: 0 0.5em;
  background: var(--orange);
  border-radius: 0.5rem;
}
span.green {
  display: inline-block;
  color: var(--key-color);
}
span.orange {
  display: inline-block;
  color: var(--orange);
}
.inline_block {
  display: inline-block;
}
@media (min-width: 768px) {
  .reverse {
    flex-direction: row-reverse;
  }
}
/*--------------------------------------------------------------
ページナビ
--------------------------------------------------------------*/
.wp-pagenavi {
	width: fit-content;
  margin: 0 auto;
}
.wp-pagenavi a, .wp-pagenavi span {
  display: inline-flex;
  color: #FFF;
  font-size: var(--fs-normal);
  justify-content: center;
  align-items: center;
	text-decoration: none;
	width: 5rem;
  height: 5rem;
	margin: 0.2rem 0.5rem;
  background: #B9B9B9;
  border: 0.1rem solid var(--blue);
  border-radius: 50%;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  color: #FFF;
	background: var(--key-color);
}