@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
# common-css
--------------------------------------------------------------*/
.page_title_wrap {
  margin: 6rem auto 1.7rem;
}
.page_title {
  font-size: var(--fs-page-title);
  line-height: 1;
  margin-bottom: 1.8em;
}
.breadcrumbs {
  line-height: 1.3;
}
.breadcrumbs a , .breadcrumbs span {
  color: #969696;
  font-size: 1.2rem;
}
.breadcrumbs .gt {
  display: inline-block;
  margin: 0 1em;
}
.page_visual {
  display: block;
  margin-bottom: 8rem;
  & img {
    width: 100%;
  }
}
.no_scroll {
  overflow: hidden;
  height: 100vh;
}
.section_title{
  font-size: var(--fs-sec-title);
}
.block_title{
  font-size: var(--fs-bl-title);
  line-height: 1.4;
}
img.ellipse {
  -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%22427%22%20height%3D%22313%22%20viewBox%3D%220%200%20427%20313%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M422.323%2097.5507C444.824%20177.551%20369.414%20268.745%20253.89%20301.239C138.365%20333.733%2026.4728%20295.221%203.97107%20215.221C-18.5307%20135.22%2056.8792%2044.0259%20172.404%2011.5322C287.928%20-20.9615%20399.821%2017.5503%20422.323%2097.5507Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%22427%22%20height%3D%22313%22%20viewBox%3D%220%200%20427%20313%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M422.323%2097.5507C444.824%20177.551%20369.414%20268.745%20253.89%20301.239C138.365%20333.733%2026.4728%20295.221%203.97107%20215.221C-18.5307%20135.22%2056.8792%2044.0259%20172.404%2011.5322C287.928%20-20.9615%20399.821%2017.5503%20422.323%2097.5507Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
img.ellipse_r {
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%22390%22%20height%3D%22287%22%20viewBox%3D%220%200%20390%20287%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cellipse%20cx%3D%22194.958%22%20cy%3D%22143.042%22%20rx%3D%22198.75%22%20ry%3D%22137.634%22%20transform%3D%22rotate(15.71%20194.958%20143.042)%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%22390%22%20height%3D%22287%22%20viewBox%3D%220%200%20390%20287%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cellipse%20cx%3D%22194.958%22%20cy%3D%22143.042%22%20rx%3D%22198.75%22%20ry%3D%22137.634%22%20transform%3D%22rotate(15.71%20194.958%20143.042)%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.btn_wrap {
  margin-top: 5rem;
}
.btn{
  display: flex;
  color: #FFF;
  justify-content: center;
  align-items: center;
  gap: 0 1em;
  min-width: 21rem;
  background: var(--key-color);
  padding: 1em;
  border: 0.1rem solid var(--key-color);
  border-radius: 1rem;
  position: relative;

  &::after {
    display: block;
    content: "";
    width: 2.9em;
    height: 2em;
    background: #FFF;
    mask:url(/assets/img/common/link_arrow.svg) no-repeat center /contain;
    --webikit-mask:url(/assets/img/common/link_arrow.svg) no-repeat center /contain;
  }
}
.link {
  display: flex;
  color: var(--key-color);
  justify-content: center;
  align-items: center;
  gap: 0 1em;

  &::after {
    display: block;
    content: "";
    width: 2.9em;
    height: 2em;
    background: url(/assets/img/common/link_arrow.svg) no-repeat center /contain;
  }
}
.inline_block {
  display: inline-block;
}
.column2_img_text {
  background: #FFF;
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
  
  .img_wrap {
    margin-bottom: 1.5rem;
    @media (min-width: 768px) {
      width: 41.66%;
      margin-bottom: 0;
    }
  }
  .text_wrap {
    @media (min-width: 768px) {
      width: 45.83%;
    }
    .btn_wrap {
      margin: auto 0 0 auto;
    }
  }
}
.column2_free {
  background: #FFF;
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }

  .item {
    width: 45.8%;
  }
}
.column3_img_text {
  background: #FFF;
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem,1fr));
    gap: 3%;
  }
  
  .item {
    margin-bottom: 5rem;
    @media (min-width:768px) {
      margin-bottom: 7rem;
    }
    .img_wrap {
      margin-bottom: 1.5rem;

      & img {
        width: 100%;
      }
    }
    .text {
      margin-bottom: 1em;
    }
    .btn_wrap {
      margin: auto auto 0;
    }
  }
}
.column3_free {
  background: #FFF;
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
  
  .item {
    @media (min-width: 768px) {
      width: 30.83%;
    }
  }
}
@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-block;
  color: var(--fc-base);
  font-size: var(--fs-normal);
	margin: 0.2em;
  padding: 0.2em 0.5em;
  background: var(--key-color-pale);
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  color: #FFF;
	background: var(--key-color);
}
.link_wrap {
  display: flex;
  justify-content: space-between;
  margin: 11rem auto 8rem;
  position: relative;
  @media (min-width: 768px) {
    bottom: 0;
  }
}
.link_wrap p:not(.archive) .btn {
  min-width: auto;
  padding: 1em;
  @media (min-width: 768px) {
    padding: 1em 2em;
  }
}
.link_wrap .pre .btn span {
  padding-left: 4rem;
}
.link_wrap .pre .btn::after {
  margin-left: 1.5rem;
  position: absolute;
  top: 46%;
  left: 0;
  transform: scale(-1,-1);
  @media (min-width: 768px) {
    margin-left: 3rem;
  }
}
.link_wrap .archive .btn {
  flex-shrink: 0;
  background: #218ED9;
  position: absolute;
  bottom: -7rem;
  left: 50%;
  transform: translateX(-50%);
  @media (min-width: 768px) {
    margin: 19rem auto 8rem;
  }
}
.link_wrap .archive .btn::before {
  background: var(--main-blue)
}
.link_wrap .archive .btn::after {
  display: none;
}
.link_wrap .next {
  margin: 0 0 0 auto;
}