@charset "UTF-8";

@import "settings.css";

/*============================================================================================
      Header
=============================================================================================*/
.header {
  position: fixed;
  width: 100%;
  height: 76px;
  padding: 0 2.4rem 0 3.2rem;
  background-color: var(--color-bg);
  top: 0;
  z-index: 99999;
}
.header.g_bgc_white {
  background-color: var(--color-white);
}
.header_inr {
  height: 100%;
}
.header_logo {
  flex-shrink: 0;
  line-height: 1.5;
  color: var(--color-dark-blue);
  z-index: 1;
}
.header_logo img {
  max-width: 178px;
}
.header_logo_txt {
  line-height: 1.5;
  gap: 1.2rem;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.header_gnav {
  gap: 2rem;
}
.gnav_itm {
  position: relative;
  display: block;
  cursor: pointer;
}
.gnav_itm.js_acd {
  padding-right: 1.8rem;
}
.gnav_itm_ttl {
  width: 100%;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition);
}
.gnav_itm_ttl::after {
  width: 1.2rem;
  height: 0.7rem;
  background-color: var(--color-main);
  mask-image: url(../img/common/icon_arrow_down.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  right: -1.8rem;
  top: 0;
  bottom: 0;
  margin-block: auto;
}
.header_btn {
  width: 100%;
  color: var(--color-white);
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  transition: var(--transition);
  border-radius: var(--bdrs-infinite);
  z-index: 1;
}
.header_btn a {
  display: flex;
  width: 100%;
  min-width: 182px;
  height: 52px;
  align-items: center;
  justify-content: center;
}

.header_btn a span {
  position: relative;
  display: flex;
  gap: 0.8rem;
  letter-spacing: calc(1.8 / 16 * 1.6rem);
}
.header_btn a span::after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-block: auto;
  mask-image: url(../img/common/icon_search.svg);
  mask-repeat: no-repeat;
  background-color: var(--color-white);
}
.gnav_itm_link_wrap {
  position: absolute;
  padding-top: 1.2rem;
  top: 100%;
}
.header.js_scroll .gnav_itm_link_wrap {
  padding-top: 0;
}
.header.js_scroll .gnav_itm_link_wrap::before {
  top: -11px;
}
.gnav_itm_link {
  width: fit-content;
  min-width: 20rem;
  padding: 2.4rem;
  border-radius: calc(10/16 * 1.6rem);
  background: var(--color-white);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.gnav_itm_link_txt {
  position: relative;
  padding-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.gnav_itm_link_txt::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0.18rem;
  left: 0;
  bottom: -0.5rem;
  background-color: var(--color-main);
  -webkit-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
}
.gnav_itm_link_txt + .gnav_itm_link_txt {
  margin-top: 1.6rem;
}
.gnav_itm_link_txt a {
  position: relative;
  display: block;
  padding-right: calc(20 / 16 * 1.6rem);
  transition: var(--transition);
}
.gnav_itm_link_txt a::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0.2rem;
  left: 0;
  bottom: -0.9rem;
  -webkit-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
}
.gnav_itm_link_txt a::after {
  content: url(../img/common/icon_arrow.svg);
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

@media (any-hover: hover) {
  .header_btn:hover {
    color: var(--color-main);
    background-color: var(--color-white);
  }
  .gnav_itm_nobtm_link:hover .gnav_itm_ttl {
    color: var(--color-main);
  }
  .gnav_itm_link_txt:hover {
    color: var(--color-main);
  }
  .gnav_itm_link_txt:hover::after {
    width: 100%;
  }
  .header_btn a:hover span::after {
    background-color: var(--color-main);
  }
}


@media screen and (max-width:1200px){
  .header {
    height: 60px;
    padding: 0 2rem;
  }
  .header_logo {
    max-width: 200px;
  }
  .header_logo_txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1;
  }
  .header_right {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 3.8rem;
    padding-bottom: 200px;
    background-color: var(--color-bg);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 0;
  }
  .header_gnav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
    margin-inline: auto;
    max-width: 800px;
    width: calc(100% - 2rem * 2);
  }
  .gnav_itm {
    padding-bottom: 1.6rem;
  }
  .gnav_itm + .gnav_itm {
    padding-top: 2.4rem;
  }
  .gnav_itm_ttl {
    position: relative;
    font-size: 1.8rem;
    width: 100%;
  }
  .gnav_itm_ttl::after {
    content: "";
    position: absolute;
    width: 1.1rem;
    height: 1rem;
    top: calc(4 / 16 * 1.6rem);
    right: 0.8rem;
    mask-image: url(../img/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-main);
    transition: var(--transition);
  }
  .gnav_itm_link_wrap {
    position: relative;
    padding-top: 1.6rem;
  }
  .gnav_itm_link {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: unset;
    background: unset;
    box-shadow: unset;
  }
  .gnav_itm_link_txt {
    font-size: 1.6rem;
    line-height: 1.75;
    padding-bottom: 0;
  }
  .gnav_itm_link_txt + .gnav_itm_link_txt {
    margin-top: 1.6rem;
  }
  .gnav_itm_link_txt:hover::after {
    display: none;
  }
  @media (any-hover: hover) {
    .gnav_itm_link_txt:hover {
      color: unset;
    }
  }

  .gnav_itm_link_txt a::before {
    position: absolute;
    content: url(../img/header/left-arrow.svg);
    left: -1.6rem;
    bottom: 50%;
    -webkit-transform: translateY(calc(-50% - 1.1rem));
    -ms-transform: translateY(calc(-50% - 1.1rem));
    transform: translateY(calc(-50% - 1.1rem));
  }
  .gnav_itm_link_txt a::after {
    content: none;
  }
  .gnav_itm.js_acd {
    padding-right: 1.3rem;
  }
  .gnav_itm.js_acd .has_btm_ttl {
    position: relative;
  }
  .gnav_itm.js_acd .has_btm_ttl::before,
  .gnav_itm.js_acd .has_btm_ttl::after {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--color-main);
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    z-index: 1;
  }
  .gnav_itm.js_acd .has_btm_ttl::before {
    content: "";
    width: 1.2rem;
    height: 2px;
    right: -0.5rem;
    margin: auto;
  }
  .gnav_itm.js_acd .has_btm_ttl::after {
    content: "";
    width: 0.2rem;
    height: 1.2rem;
    right: 0;
    margin: auto;
  }
  .gnav_itm.js_acd.js_open .has_btm_ttl::before {
    display: none;
  }
  .gnav_itm.js_acd.js_open .has_btm_ttl::after {
    -webkit-transform: rotate(90deg) translateY(0px);
    -ms-transform: rotate(90deg) translateY(0px);
    transform: rotate(90deg) translateY(0px);
  }
  .gnav_itm .has_ico-down-arrow::after {
    display: none;
  }
  .gnav_itm_link_txt a::before {
    content: none;
  }
  .gnav_itm_link_txt a:hover::before {
    width: 0;
  }
  .header .static_entry {
    display: block;
  }
  .header_btn {
    width: calc(100% - 2rem * 2);
    max-width: 800px;
    margin-top: 2rem;
    margin-inline: auto;
  }
}

@media (max-width: 896px) {
  .header_btn a {
    padding: 0.9rem 1.6rem;
  }
}

/*============================================================================================
      Footer
=============================================================================================*/
.footer {
  background-color: var(--color-bg);
  border-radius: calc(30/16 * 1.6rem) calc(30/16 * 1.6rem) 0 0;
}
.footer_mainCont {
  position: relative;
  display: grid;
  padding : 6.6rem 12rem 10.5rem;
  justify-content: center;
  grid-template-columns: 16.5rem auto;
  grid-column-gap: 9rem;
  grid-row-gap: 5rem;
}
.footer_mainCont::after {
  content: "";
  display: block;
  position: absolute;
  width: 29.9rem;
  height: 18rem;
  background-image: url(../img/footer/footer_img_02.svg);
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
}
.footer_logo_cont {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  max-width: 165px;
}
.footer_logo_cont::before {
  content: "";
  display: block;
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  top: -2.8rem;
  left: -7.5rem;
  mask-image: url(../img/common/icon_bird.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--color-aqua-blue);
}
.footer_logo__smartCity {
  margin-top: 2.4rem;
}
.footer_lst {
  width: 100%;
  max-width: 865px;
  display: grid;
  grid-area: 1 / 2 / 3 / 3;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 5.6rem;
  align-content: start;
}
.footer_itm_wrap {
  width: 100%;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.footer_itm {
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.footer_itm:not(.footer_itm__mdl) {
  border-bottom: 0.1rem solid var(--color-border-02);
}
.footer_itm::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0.18rem;
  left: 0;
  bottom: -0.1rem;;
  background-color: var(--color-main);
  -webkit-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
}
.footer_itm_link {
  position: relative;
  display: block;
  padding-bottom: 1.2rem;
  padding-right: calc(20 / 16 * 1.6rem);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transition: var(--transition);
}
.footer_itm_link::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0.2rem;
  left: 0;
  bottom: -0.9rem;
  -webkit-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
}
.footer_itm_link::after {
  content: "";
  position: absolute;
  top: calc(4/16 * 1.6rem);
  right: 0.25rem;
  width: 1.1rem;
  height: 1rem;
  mask-image: url(../img/common/icon_arrow.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-main);
  transition: var(--transition);
}

.footer_itm__mdl_ttl {
  padding-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  border-bottom: 0.1rem solid var(--color-border-02);
}
.footer_itm__mdl_link {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.footer_itm__mdl_link a {
  position: relative;
  display: block;
  margin-top: 1.6rem;
  transition: var(--transition);
}
.footer_itm__mdl_link a::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin-block: auto;
  right: 0.25rem;
  margin: auto;
  width: 1.1rem;
  height: 1rem;
  mask-image: url(../img/common/icon_arrow.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-main);
  opacity: 0;
  transition: var(--transition);
}

.footer_emblem {
  max-width: 56px;
  grid-area: 2 / 1 / 3 / 2;
}

.footer_pageTop {
  position: absolute;
  right: 0;
  right:7.2rem;
  bottom: 1.65rem;
  z-index: 1;
}
.footer_pageTop a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
}
.footer_pageTop a::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.1rem solid var(--color-white);
  border-radius: 50%;
  transition: transform 0.3s;
}
.footer_pageTop a span {
  position: relative;
  display: inline-block;
  padding-top: 1rem;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
}
.footer_pageTop a span::before {
  content: "";
  position: absolute;
  display: block;
  width: 1.3rem;
  height: 0.7rem;
  mask-image: url(../img/common/icon_pageTop.svg);
  background-color: var(--color-white);
  top: 0;
  right: 0;
  left: 0;
  margin-inline: auto;
  transition: var(--transition);
}

/* btm */
.footer_btm_cont {
  position: relative;
  padding: 1.6rem;
  text-align: center;
  background-color: var(--color-green);
}
.footer_btm_img {
  position: absolute;
  top: -4.25rem;
  right: 0;
  left: 0;
  margin-inline: auto;
  max-width: 270px;
}
.footer_btm_lead {
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 400;
}
.footer_btm_copy {
  padding-top: 0.3rem;
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 400;
}

@media (any-hover: hover) {
  .footer_itm:not(.footer_itm__mdl):hover {
    color: var(--color-main);
  }
  .footer_itm:not(.footer_itm__mdl):hover::after {
    width: 100%;
  }
  .footer_itm:not(.footer_itm__mdl):hover .footer_itm_link::after {
    right: 0;
  }

  .footer_itm__mdl_link a:hover {
    color: var(--color-main);
  }
  .footer_itm__mdl_link a:hover::after {
    color: var(--color-main);
    right: 0;
    opacity: 1;
  }

  .footer_pageTop a:hover::after {
    transform: scale(1.1);
  }
  .footer_pageTop a:hover span::before {
    top: -1rem;
  }
}

@media screen and (max-width:1060px){
  .footer_mainCont {
    grid-column-gap: 5rem;
    padding: 13.4rem 2rem 10.5rem;
  }
}

@media screen and (max-width:896px){
  .footer {
    overflow-x: hidden;
  }
  .footer_mainCont {
    display: block;
    padding: 5.2rem 2rem 9rem;
  }
  .footer_mainCont::after {
    width: 22.7rem;
    height: 16.8rem;
    background-image: url(../img/footer/footer_img_02_sm.svg);
  }
  .footer_logo_cont {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
  .footer_logo__akiya {
    max-width: 92px;
    flex-shrink: 0;
  }
  .footer_logo__smartCity {
    max-width: 170px;
    margin-top: 0;
    flex-shrink: 0;
  }
  .footer_lst {
    display: flex;
    margin-top: 5.6rem;
    flex-direction: column;
    gap: 3.2rem;
  }
  .footer_itm_wrap {
    max-width: 100%;
    gap: 3.2rem;
  }
  .footer_itm_link {
    font-size: 1.8rem;
  }
  .footer_itm__mdl_link a {
    margin-top: 1.8rem;
    font-size: 1.6rem;
  }
  .footer_itm__mdl_ttl {
    font-size: 1.8rem;
  }
  .footer_emblem {
    max-width: 50px;
    margin-top: 6.6rem;
  }
  .footer_pageTop {
    right:2.2rem;
    bottom: 2rem;
  }
  .footer_btm_lead {
    font-size: 1rem;
  }
}

/*============================================================================================
      Contents
=============================================================================================*/
.main {
  margin-top: 76px;
}

@media screen and (max-width:1200px){
  .main {
    margin-top: 60px;
  }
}

/*============================================================================================
      Top
=============================================================================================*/
.main.main__top {
  background-color: var(--color-bg);
}
/* .main.main__top .l_wrap_inr {
  max-width: var(--cont-width-top);
} */
.top_11111 .l_wrap_inr {
  max-width: var(--cont-width-top);
}
.top_ttl {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(1.8/16 * 1.6rem);
}
.top_ttl::before {
  content: attr(data-en);
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: calc(0.98/16 * 1.6rem);
  text-transform: uppercase;
}
.top_icon_wrap:has(.top_icon) {
  position: relative;
}
.top_icon {
  position: absolute;
  z-index: 2;
}

@media screen and (max-width:896px){
  .top_ttl {
    font-size: 2.8rem;
    letter-spacing: calc(1.12/16 * 1.6rem);
    line-height: 1.4;
  }
  .top_ttl::before {
    font-size: 1.2rem;
  }
}

/* MV */
.top_mv {
  position: relative;
  overflow: hidden;
}
.top_mv_bg {
  position: relative;
  width: 2500px;
  top: 0;
  left: 49.3%;
  transform: translateX(-50%);
  aspect-ratio: 2500 / 1178;
  background: url(../img/top/mv.svg) no-repeat center bottom / cover;
}
.top_mv_inr {
  display: flex;
  position: absolute;
  width: 100%;
  max-width: none;
  top: 5.5rem;
  left: 0;
  padding-left: max(100px, calc((100vw - 1230px) / 2));
  gap: 9rem;
  transform: none;
  z-index: 1;
}
.top_mv_ttl_wrap {
  margin-top: 11rem;
  flex-shrink: 0;
}
.top_mv_ttl {
  color: var(--color-main);
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(0.06 / 16 * 1.6rem);
}
.top_mv_lead {
  margin-top: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.top_mv_lead_letter {
  color: var(--color-black);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.4 / 16 * 1.6rem);
}
.top_mv_lead_letter + .top_mv_lead_letter {
  letter-spacing: calc(-0.9 / 16 * 1.6rem);
}
.top_mv_ttl_en {
  margin-top: 3.2rem;
  color: var(--color-green-02);
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: calc(2.585/16 * 1.6rem);
  text-transform: uppercase;
}

.top_mv_slider_info_box {
  position: relative;
  flex: 1;
  min-width: 0;
}
.top_mv_slider_info_box::before {
  content: "";
  display: block;
  position: absolute;
  width:3rem;
  height: 3rem;
  top: 16rem;
  left: -2rem;
  mask-image: url(../img/common/icon_bird.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-aqua-blue);
  z-index: 2;
}
.top_mv_sliderWrap {
  width: calc(100vw - max(50px, calc((100vw - 1200px) / 2)) - 480px);
  overflow: hidden;
  border-radius: calc(20 / 16 * 1.6rem) 0 0 calc(20 / 16 * 1.6rem);
}
.top_mv_sliderWrap .swiper {
  overflow: visible;
  width: 100%;
}
.top_mv_sliderWrap .swiper-wrapper {
  transition-timing-function: ease-in-out !important;
}
.top_mv_sliderWrap .swiper-slide {
  width: 680px;
  flex-shrink: 0;
}
.top_mv_sliderWrap .swiper-slide figure {
  border-radius: calc(20/16 * 1.6rem);
}
.top_mv_sliderWrap .swiper-slide img {
  aspect-ratio: 680 / 515;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: calc(20/16 * 1.6rem);
}
.top_mv_sliderWrap .swiper-pagination {
  position: absolute;
  display: flex;
  left: -1.8rem;
  top: 2rem;
  flex-direction: column;
  gap: 0.6rem;
  width: auto;
}
.top_mv_sliderWrap .swiper-pagination-bullet {
  margin: 0 !important;
  width: 0.6rem;
  height: 0.6rem;
  background:var(--color-light-green-04);
  opacity: 1;
}
.top_mv_sliderWrap .swiper-pagination-bullet-active {
  background:var(--color-green-04);
}
.top_mv_info a {
  display: flex;
  position: absolute;
  margin-top: 2.6rem;
  padding: 0.7rem 2rem;
  width: 100%;
  max-width: 530px;
  right: -30rem;
  left: 0;
  margin-inline: auto;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--bdrs-infinite);
  transition: var(--transition);
}
.top_mv_info_data {
  flex-shrink: 0;
  color: var(--color-green-03);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: calc(0.56/16 * 1.6rem);
}
.top_mv_info_txt {
  width: 520px;
  color: var(--color-green-03);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: calc(0.56 / 16 * 1.6rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width:1400px){
  .top_mv_bg {
    width: 3000px;
  }
}

@media screen and (max-width:1360px){
  .top_mv_info {
    right: -2rem;
    left: auto;
    margin-inline: unset;
  }
}

@media screen and (max-width:896px){
  .top_mv_sliderWrap {
    border-radius: 0;
  }
  .top_mv_bg {
    position: static;
    width: 100%;
    transform: unset;
    aspect-ratio: unset;
    background: unset;
  }
  .top_mv_inr {
    position: relative;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    padding-bottom: 5.6rem;
    top: 0;
  }
  .top_mv_inr::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 13rem;
    aspect-ratio: 375 / 130;
    background-image: url(../img/top/mv_sm__up.svg);
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .top_mv_ttl_wrap {
    position: relative;
    margin-top: 8rem;
    padding: 0 2rem;
  }
  .top_mv_ttl_letter {
    font-size: 3.4rem;
    letter-spacing: calc(-0.5 / 16 * 1.6rem);
  }
  .top_mv_ttl_en {
    margin-top: 2.2rem;
    font-size: 1rem;
  }
  .top_mv_ttl {
    position: relative;
    font-size: 3.4rem;
  }
  .top_mv_lead {
    margin-top: 2.2rem;
    gap: 1.6rem;
  }
  .top_mv_lead_letter {
    font-size: 3rem;
    letter-spacing: calc(1.6 / 16 * 1.6rem);
  }
  .top_mv_slider_info_box {
    margin-top: 2.6rem;
  }
  .top_mv_slider_info_box::before {
    display: none;
  }
  .top_mv_sliderWrap {
    width: 100%;
  }
  .top_mv_sliderWrap .swiper-slide {
    width: 100%;
  }
  .top_mv_sliderWrap .swiper-slide img {
    border-radius: calc(8/16 * 1.6rem);
  }
  .top_mv_sliderWrap .swiper-pagination {
    top: auto;
    bottom: -1.6rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    flex-direction: row;
    justify-content: center;
  }
  .top_mv_info {
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 1.2rem;
    gap: 1.2rem;
    left: 8vw;
    right: auto;
    justify-content: flex-start;
  }
  .top_mv_info a {
    right: -6rem;
  }
  .top_mv_info_txt {
    width: 240px;
    font-size: 1.2rem;
  }
  .top_mv_info_data {
    font-size: 1.2rem;
  }
}

/* とちぎ空き家サイトとは */
.sec_top_about {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 24.4rem;
  overflow: hidden;
  background-color: var(--color-light-green-03);
}
.top_about_wrap {
  position: relative;
  padding-right: 40rem;
}
.sec_top_about::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 300px;
  bottom: -0.1rem;
  background-image: url(../img/top/about_mt_white.svg);
  background-repeat:no-repeat;
  background-position: bottom;
  z-index: 2;
}
.sec_top_about::after {
  content: "";
  width: 100%;
  height: 100%;
  max-height: 300px;
  position: absolute;
  bottom: 0;
  background-image: url(../img/top/about_mt_green.svg);
  background-repeat:no-repeat;
  background-position: bottom;
  right: -42rem;
  z-index: 1;
}
.l_wrap_inr.top_about_inr {
  position: relative;
  z-index: 3;
}
.top_about_txtBox {
  max-width: 630px;
  margin-inline: auto;
}
.top_about_txt {
  font-weight: 400;
  letter-spacing: calc(0.48 / 16 * 1.6rem);
}
.top_about_sliderBox {
  position: absolute;
  right: 0;
  bottom: 8.7rem;
  z-index: 3;
}
.top_about_sliderWrap.swiper-container-wrapper {
  position: relative;
}
.top_about_sliderWrap.swiper-container-wrapper::before {
  content: "";
  position: absolute;
  width: 19.4rem;
  margin-inline: auto;
  bottom: -6.4rem;
  right: 0;
  left: 0;
  background-image: url(../img/top/deco_top_about_slider.svg);
  background-repeat: no-repeat;
  aspect-ratio: 194 / 92;
}
.top_about_sliderWrap .swiper {
  position: relative;
  max-width: 283px;
  width: 100%;
  border-radius: calc(4/16 * 1.6rem) calc(4/16 * 1.6rem) 0 0;
}
.top_about_sliderWrap .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2.25rem;
  color: var(--color-blue);
  text-align: center;
  background-color: var(--color-white);
  aspect-ratio: 283 / 178;
}
.top_about_slide_ttl {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: calc(0.54/16 * 1.6rem);
}
.top_about_slide_num {
  margin-top: 0.8rem;
  font-family: var(--font-num);
  font-size: 6rem;
  font-weight: 700;
  line-height: 0.86;
}
.top_about_slide_num_unit {
  font-family: var(--font-num);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.86;
}
i + .top_about_slide_num_unit {
  padding-left: 0.4rem;
}
.top_about_slide_txt {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
}
.top_about_slide_txtSub {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
}
.top_about_sliderWrap .swiper-pagination {
  position: relative;
  max-height: 22px;
  /* margin-top: 0.8rem !important; */
  top: 0;
  background-color: var(--color-blue);
  border-radius: 0 0 calc(4/16 * 1.6rem) calc(4/16 * 1.6rem);
}
.top_about_sliderWrap .swiper-pagination-bullet {
  position: relative;
  width:0.6rem;
  height: 0.6rem;
  top: -0.7rem;
  background-color: var(--color-purple);
  margin-inline : 0.3rem !important;
  opacity: 1;
}
.top_about_sliderWrap .swiper-pagination-bullet-active {
  background-color: var(--color-white);
}
.top_about_btn.g_btn {
  width: 100%;
  max-width: 264px;
}

/* 掲示板アニメーション */
.countUp_outer {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
}
.countUp_inner {
  display: block;
  transform: translateY(0);
}
.countUp_inner > i {
  display: block;
  line-height: 1;
}
/* is-active が付いたら動く */
.js-countUp.is-active .countUp_inner {
  animation: countRoll 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes countRoll {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--translateY)); }
}
/* 桁ごとにディレイ */
.js-countUp.is-active .countUp_outer:nth-child(1) .countUp_inner { animation-delay: 0s; }
.js-countUp.is-active .countUp_outer:nth-child(2) .countUp_inner { animation-delay: 0.08s; }
.js-countUp.is-active .countUp_outer:nth-child(3) .countUp_inner { animation-delay: 0.16s; }


@media screen and (max-width: 1360px) {
  .sec_top_about::after {
    max-width: 1100px;
    right: -29rem;
    background-image: url(../img/top/about_mt_green_sm.svg);
  }
}

@media screen and (max-width:896px){
  .sec_top_about {
    top: -2px;
    overflow: visible;
    padding-top: 0.6rem;
    padding-bottom: 18rem;
  }
  .sec_top_about::before {
    display: none;
  }
  .sec_top_about::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: unset;
    background-image: url(../img/top/about_mts_sm.png);
    background-size: cover;
    z-index: 1;
  }
  .top_about_wrap {
    padding-right: 0;
  }
  .top_about_sliderBox {
    position: static;
    margin-top: 5.6rem;
  }
  .top_about_sliderWrap .swiper-pagination {
    max-width: 283px;
    margin-inline: auto;
    margin-top: 0 !important;
    bottom: 0;
  }
  .top_about_btn.g_btn {
    max-width: 100%;
  }
}

@media screen and (max-width:576px){
  .sec_top_about::after {
    background-size: contain;
  }
}

/* 空き家バンク */
.sec_top_bank .l_wrap_inr {
  max-width: var(--cont-width-top);
}
.top_bank_wrap {
  padding: 12rem 2rem 7.2rem;
  background-color: var(--color-white);
  border-radius: calc(20/16 * 1.6rem);
}
.top_icon__bank__01 {
  top: -4.2rem;
  left: 3rem;
}
.top_icon__bank__02 {
  top: -14.8rem;
  right: 4.4rem;
}
.top_bank_about {
  width: 100%;
  max-width: 1053px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 470px;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 64px;
  grid-row-gap: 48px;
}
.top_bank_ttlBox { grid-area: 1 / 1 / 2 / 2; }
.top_bank_about_imgWrap { grid-area: 1 / 2 / 3 / 3; }
.top_bank_about_lnkBox { grid-area: 2 / 1 / 3 / 2; }

.top_bank_about_txt {
  font-weight: 400;
  letter-spacing: calc(0.48 / 16 * 1.6rem);
}
.top_bank_about_btnWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
}
.top_bank_about_btnWrap .g_btn {
  width: 100%;
}
.top_bank_about_btnWrap .g_btn:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.top_bank_about_btnWrap .g_btn:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.top_bank_about_btnWrap .g_btn:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.top_bank_about_imgWrap {
  position: relative;
}
.top_bank_about_img img {
  max-width: 490px;
}
.top_bank_about_city_num {
  position: absolute;
  width: 4.6rem;
  height: 2.6rem;
  padding-top: 0.6rem;
  justify-content: center;
  align-items: center;
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(0.84 / 16 * 1.6rem);
  border-radius: var(--bdrs-infinite);
}
.top_bank_about_city_num.top_bank_about_city_num__nasu {
  top: 6.2rem;
  right: 8.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__nasiShiobara {
  top: 10.3rem;
  right: 17.2rem;
}
.top_bank_about_city_num.top_bank_about_city_num__nikko {
  top: 19.4rem;
  right: 31rem;
}
.top_bank_about_city_num.top_bank_about_city_num__yaita {
  top: 18.7rem;
  right: 16.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__shioya {
  top: 20.8rem;
  right: 21.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__otawara {
  top: 17.6rem;
  right: 7.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__sakura {
  top: 24.4rem;
  right: 12rem;
}
.top_bank_about_city_num.top_bank_about_city_num__nakagawa {
  top: 23.4rem;
  right: 4.2rem;
}
.top_bank_about_city_num.top_bank_about_city_num__nasuKarasuyama {
  top: 28.2rem;
  right: 5.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__takanezawa {
  top: 29.6rem;
  right: 11.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__utsunomiya {
  top: 31.7rem;
  right: 18.1rem;
}
.top_bank_about_city_num.top_bank_about_city_num__kanuma {
  top: 34.3rem;
  right: 29.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__haga {
  top: 35.3rem;
  right: 11.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__ichikai {
  top: 33.4rem;
  right: 5.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__motegi {
  top: 37.5rem;
  right: 1.6rem;
}
.top_bank_about_city_num.top_bank_about_city_num__mashiko {
  top: 40.6rem;
  right: 7.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__kaminokawa {
  top: 40rem;
  right: 16.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__mibu {
  top: 39.7rem;
  right: 23.1rem;
}
.top_bank_about_city_num.top_bank_about_city_num__shimotsuke {
  top: 45.1rem;
  right: 19.1rem;
}
.top_bank_about_city_num.top_bank_about_city_num__moka {
top: 45rem;
right: 13rem;
}
.top_bank_about_city_num.top_bank_about_city_num__oyama {
  top: 50.2rem;
  right: 20.8rem;
}
.top_bank_about_city_num.top_bank_about_city_num__nogi {
  top: 55.2rem;
  right: 24.7rem;
}
.top_bank_about_city_num.top_bank_about_city_num__tochigi {
  top: 47.1rem;
  right: 27.5rem;
}
.top_bank_about_city_num.top_bank_about_city_num__sano {
  top: 43.4rem;
  right: 33.4rem;
}
.top_bank_about_city_num.top_bank_about_city_num__ashikaga {
  top: 47.6rem;
  right: 38.7rem;
}
.top_bank_about_city_num_unit {
  font-size: 1rem;
  font-weight: 400;
}
.top_bank_newListing {
  max-width: 1053px;
  margin-inline: auto;
}
.top_bank_newListing_lst {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3.2rem;
}
.top_bank_newListing_itm_img img {
  aspect-ratio: 230 / 140;
  object-fit: cover;
}
.top_bank_newListing_itm_priceBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_bank_newListing_itm_price {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(0.17/16 * 1.6rem);
}
.top_bank_newListing_itm_price_unit {
  font-size: 1.6rem;
  font-family: var(--font-jp);
  color: var(--color-text);
  font-weight: 700;
  line-height: var(--line-height);
  letter-spacing: 0.48px;
}
.top_bank_newListing_itm_price_category {
  padding: calc(5/16 * 1.6rem) calc(8/16 * 1.6rem) calc(6/16 * 1.6rem);
  border: 0.1rem solid var(--color-main);
  border-radius: calc(80/16 * 1.6rem);
  background-color: var(--color-white);
  color: var(--color-main);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_bank_newListing_itm_place {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_bank_newListing_itm_roomSpec {
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_bank_newListing_itm_roomSpec_layout {
  padding-right: 0.8rem;
}
.top_bank_newListing_itm_roomSpec_age {
  position: relative;
  padding-left: 0.8rem;
}
.top_bank_newListing_itm_roomSpec_age::before {
  content: "";
  position: absolute;
  height: 1.6rem;
  width: 0.1rem;
  left: 0;
  top: 0;
  bottom: 0;
  margin-block: auto;
  background-color: var(--color-text);
}
.top_bank_newListing_itm_btn .g_arrow {
  display: flex;
  justify-content: end;
}
.top_bank_newListing_itm_btn .g_arrow::before {
  width: 2.4rem;
  height: 2.4rem;
}
.top_bank_newListing_itm_btn .g_arrow::after {
  right: calc(6/16 * 1.6rem);
}

@media screen and (max-width:1100px){
  .top_bank_about {
    grid-template-columns: auto;
  }
  .top_bank_about_imgWrap {
    max-width: 320px;
    margin-inline: auto;
  }
  .top_bank_about_img img {
    max-width: 100%;
  }

  .top_bank_about_city_num {
    width: 3.2rem;
    height: 1.6rem;
    padding-top: 0.2rem;
    font-size: 1.2rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nasu {
    top: 4.5rem;
    right: 5.1rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nasiShiobara {
    top: 6.7rem;
    right: 11.5rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nikko {
    top: 13.3rem;
    right: 21.2rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__yaita {
    top: 12.7rem;
    right: 11.4rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__shioya {
    top: 14.1rem;
    right: 14.8rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__otawara {
    top: 12rem;
    right: 5.3rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__sakura {
    top: 16.6rem;
    right: 8rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nakagawa {
    top: 15.9rem;
    right: 2.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nasuKarasuyama {
    top: 19.2rem;
    right: 3.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__takanezawa {
    top: 20rem;
    right: 8rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__utsunomiya {
    top: 21.5rem;
    right: 12.5rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__kanuma {
    top: 23.4rem;
    right: 20.4rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__haga {
    top: 23.9rem;
    right: 7.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__ichikai {
    top: 22.8rem;
    right: 3.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__motegi {
    top: 25.5rem;
    right: 1.3rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__mashiko {
    top: 27.6rem;
    right: 5.3rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__kaminokawa {
    top: 27.2rem;
    right: 11.3rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__mibu {
    top: 27rem;
    right: 15.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__shimotsuke {
    top: 30.7rem;
    right: 13rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__moka {
    top: 30.6rem;
    right: 8.8rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__oyama {
    top: 34.2rem;
    right: 14.2rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__nogi {
    top: 37.8rem;
    right: 16.9rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__tochigi {
    top: 32.1rem;
    right: 18.5rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__sano {
    top: 29.5rem;
    right: 22.8rem;
  }
  .top_bank_about_city_num.top_bank_about_city_num__ashikaga {
    top: 32.4rem;
    right: 26.4rem;
  }
}

@media screen and (max-width:896px){
  .sec_top_bank {
    padding-top: 3.2rem;
  }
  .sec_top_bank .l_wrap_inr {
    width: calc(100% - 2rem * 0.8);
  }
  .top_icon__bank__01 {
    top: -2rem;
    left: 0.9rem;
    max-width: 8.24rem;
  }
  .top_icon__bank__02 {
    max-width: 20rem;
    top: -10.1rem;
    right: 1.5rem;
  }
  .top_bank_newListing_itm_price {
    gap: 0.4rem;
    font-size: 2.8rem;
  }
  .top_bank_newListing_itm_price_unit {
    font-size: 1.4rem;
  }
  .top_bank_newListing_itm_place {
    font-size: 1.6rem;
  }
  .top_bank_wrap {
    padding: 4rem 2rem 3.2rem;
  }
  .top_bank_about {
    display: block;
  }
  .top_bank_about_imgWrap {
    margin-top: 4rem;
  }
  .top_bank_newListing_lst {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.8rem 1.6rem;
  }
}

@media screen and (max-width:576px){
  .top_bank_about_btnWrap {
    display: block;
  }
  .top_bank_about_btnWrap .g_btn + .g_btn {
    margin-top: 0.8rem;
  }
}

/* お役立ちコンテンツ */
.sec_top_helpful {
  padding-top: 6.4rem;
  padding-bottom: 11.2rem;
}
.sec_top_helpful .l_wrap_inr {
  max-width: var(--cont-width-top);
}
.top_helpful_wrap {
  padding: 10.4rem 12.8rem;
  background-color: var(--color-white);
  border-radius: calc(20/16 * 1.6rem);
}
.top_icon__helpful {
  top: 3.5rem;
  right: 5.6rem;
}
.top_helpful_lead {
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_helpful_lst {
  margin-top: 5.6rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 27px;
  grid-row-gap: 22px;
}
.top_helpful_itm {
  background-color: var(--color-bg);
  border-radius: calc(10/16 * 1.6rem);
}
.top_helpful_itm.top_helpful_itm__01 { grid-area: 1 / 1 / 2 / 3; }
.top_helpful_itm.top_helpful_itm__02 { grid-area: 2 / 1 / 3 / 2; }
.top_helpful_itm.top_helpful_itm__03 { grid-area: 2 / 2 / 3 / 3; }
.top_helpful_itm.top_helpful_itm__04 { grid-area: 3 / 1 / 4 / 2; }
.top_helpful_itm.top_helpful_itm__05 { grid-area: 3 / 2 / 4 / 3; }

.top_helpful_itm_ttl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: calc(0.5/16 * 1.6rem);
}
.top_helpful_itm_Subttl {
  display: inline-block;
  padding-left: 0.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_helpful_itm a {
  display: inline-block;
  padding: 2.4rem;
  transition: var(--transition);
}
.top_helpful_itm_txt_box {
  display: flex;
  margin-top: 0.8rem;
  padding-top: 1rem;
  gap: 1.2rem;
  border-top: 0.1rem solid var(--color-light-orange);
}
.top_helpful_itm_txt {
font-style: normal;
font-weight: 400;
line-height: 30px; /* 187.5% */
}
.top_helpful_itm_txt_img {
  flex-shrink: 0;
  width: 100%;
  max-width: 119px;
}
.top_helpful_itm_txt_img img {
  max-width: 119px;
  aspect-ratio: 119 / 116;
}



@media screen and (max-width:896px){
  .sec_top_helpful {
    padding-top: 4rem;
    padding-bottom: 11rem;
  }
  .top_icon__helpful {
    max-width: 100px;
    top: -1.5rem;
    right: -0.4rem;
  }
  .sec_top_helpful .l_wrap_inr {
    width: calc(100% - 2rem * 0.8);
  }
  .top_helpful_lst {
    margin-top: 2.4rem;
    display: block;
  }
  .top_helpful_itm + .top_helpful_itm {
    margin-top: 2.4rem;
  }
  .top_helpful_itm a {
    padding: 1.6rem;
  }
  .top_helpful_itm_ttl {
    padding-right: 3rem;
    font-size: 1.8rem;
    letter-spacing: calc(0.3 / 16 * 1.6rem)
  }
  .top_helpful_itm_Subttl {
    font-size: 1.6rem;
  }
  .top_helpful_itm_txt_box {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    flex-direction: column-reverse;
    align-items: center;
  }
}

/* 空き家の活かし方 */
.sec_top_case {
  padding-top: 8.8rem;
  padding-bottom: 12rem;
  overflow-x: clip;
}
.top_icon__case__01 {
  max-width: 350px;
  top: -5.2rem;
  left: -120rem;
  right: 0;
  margin-inline: auto;
}
.top_icon__case__02 {
  max-width: 350px;
  top: -6rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 3;
}
.top_icon__case__03 {
  max-width: 500px;
  top: -7.6rem;
  right: -100rem;
  left: 0;
  margin-inline: auto;
}
.top_case_sliderWrap.swiper-container-wrapper {
  position: relative;
}
.top_case_sliderWrap .swiper-slide figure {
  border-radius: calc(10 / 16 * 1.6rem);
}
.top_case_sliderWrap .swiper-slide img {
  height: auto;
  width: 100%;
  aspect-ratio:453 / 311;
}
.top_case_slider_itm_category {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 132px;
  height: 25px;
  margin-top: 1.2rem;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(0.56 / 16 * 1.6rem);
  border-radius: calc(80 / 16 * 1.6rem);
  background: var(--color-main);
}
.top_case_slider_itm_txt {
  margin-top: 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: calc(0.5 / 16 * 1.6rem);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.top_case_slider_itm_infoBox span {
  position: relative;
  display: inline-block;
  padding: 0 calc(8 /16 * 1.6rem);
  font-weight: 400;
  letter-spacing: calc(0.48/16 * 1.6rem);
}
.top_case_slider_itm_infoBox span:first-child {
  padding-left: 0;
}
.top_case_slider_itm_infoBox span + span::before {
  content: "";
  position: absolute;
  height: 1.6rem;
  width: 0.1rem;
  left: 0;
  top: 0;
  bottom: 0;
  margin-block: auto;
  background-color: var(--color-text);
}
.top_case_sliderWrap .swiper-pagination {
  position: relative;
  margin-top: 1rem;
}
.top_case_sliderWrap .swiper-pagination-bullet {
  background-color: var(--color-light-orange);
  opacity: 1;
}
.top_case_sliderWrap .swiper-pagination-bullet-active {
  background-color: var(--color-main)
}

@media screen and (max-width:1360px){
  .top_icon__case__01 {
    left: -9rem;
    right: auto;
    margin-inline: unset;
  }
  .top_icon__case__03 {
    right: -9rem;
    left: auto;
    margin-inline: unset;
  }
}


@media screen and (max-width:896px){
  .sec_top_case {
    padding-top: 5.8rem;
    padding-bottom: 9.6rem;
  }
  .top_helpful_wrap {
    padding: 4.2rem 2rem 3.2rem;
  }
  .top_icon__case__01 {
    max-width: 16rem;
    top: -9.2rem;
    left: -7rem;
  }
  .top_icon__case__04 {
    right: 0;
    top: -7.6rem;
  }

  .top_case_sliderWrap .swiper-slide figure {
    border-radius: calc(5 / 16 * 1.6rem);
  }
  .top_case_slider_itm_txt {
    margin-top: 1.2rem;
    font-size: 1.8rem;
  }
  .sec_top_case .g_btn {
    width: 100%;
  }
}

/* お知らせ */
.sec_top_news {
  padding-top: 14.4rem;
  padding-bottom: 14.4rem;
}
.top_icon__news__01 {
  top: -8.8rem;
  left: -1rem;
}
.top_icon__news__02 {
  top: -10rem;
  right: 7rem;
}
.top_icon__news__03 {
  bottom: 0;
  left: 3rem;
}
.top_news_inr {
  position: relative;
  display: grid;
  padding-left: max(170px, calc((100vw - 1200px) / 2));
  grid-template-columns: 27.8rem 1fr;
  grid-template-rows: 7.4rem auto;
  grid-column-gap: 4rem;
  grid-row-gap: 2.4rem;
}
.top_ttl__news { grid-area: 1 / 1 / 2 / 2; }
.top_news_btn {
  width: 100%;
  height: fit-content;
  grid-area: 2 / 1 / 3 / 2;
}
.top_news_cont {
  overflow-x: hidden;
}
.top_news_lst {
  max-width: 874px;
  flex: 1;
  min-width: 0;
  padding: 0 2.4rem;
  background-color: var(--color-bg);
  border-radius: calc(10 / 16 * 1.6rem);
  grid-area: 1 / 2 / 3 / 3;
}
.top_news_itm a {
  display: block;
  padding: 1.6rem 0;
  transition: var(--transition);
}
.top_news_itm {
  border-bottom: 0.1rem solid var(--color-border-03);
}
.top_news_itm:last-child {
  border-bottom: unset;
}
.top_news_itm_metaBox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.top_news_itm_meta_time {
  font-family: var(--font-en);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.top_news_itm_meta_category {
  color: var(--color-white);
  background-color: var(--color-main);
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: calc(0.48 / 16 * 1.6rem);
  border-radius: var(--bdrs-infinite);
  padding: calc(5/16 * 1.6rem) calc(8/16 * 1.6rem);
}
.top_news_itm_txt {
  padding-top: 1rem;
  letter-spacing: calc(0.48 / 16 * 1.6rem);
}

@media (any-hover: hover) {
  .top_news_itm a:hover {
    opacity: var(--opacity);
  }
}

/* 1360px以下：右側を画面端にくっつける */
@media (max-width: 1360px) {
  .top_news_lst {
    max-width: none;
    border-radius: calc(10 / 16 * 1.6rem) 0 0 calc(10 / 16 * 1.6rem);
  }
}

@media screen and (max-width:896px){
  .sec_top_news {
    padding-top: 6.4rem;
    padding-bottom: 15.2rem;
  }
  .top_icon__news__01 {
    display: none;
  }
  .top_icon__news__02 {
    max-width: 10.6rem;
    top: -5.6rem;
    right: 1.1rem;
  }
  .top_icon__news__03 {
    max-width: 166px;
    bottom: 1.3rem;
    left: 1.4rem;
  }
  .top_news_inr {
    display: block;
    width: calc(100% - 2rem * 2);
    max-width: var(--cont-width);
    margin: auto;
    padding-left: 0;
  }
  .top_news_lst {
    margin-top: 2.4rem;
    padding: 2.4rem;
    margin-right:0;
    border-radius: calc(10 / 16 * 1.6rem);
  }
  .top_news_itm a {
    padding: 1.2rem 0;
  }
  .top_news_itm:first-child a {
    padding-top: 0;
  }
  .top_news_itm:last-child a {
    padding-bottom: 0;
  }
  .top_news_btn {
    margin-top: 3.2rem;
    width: 100%;
  }
}

/*============================================================================================
      下層ページ
=============================================================================================*/
/*    下層MV
=====================================================*/
.btm_mv {
  position: relative;
  padding-top: 8.4rem;
  padding-bottom: 11.8rem;
  padding-left: 6.4rem;
  background-color: var(--color-bg);
  overflow: hidden;
}
.btm_mv.u_ic::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70.7rem;
  aspect-ratio: 707 / 330;
  background-image: url(../img/common/bottom_mv_img.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
.btm_mv > * {
  max-width: 1232px;
  margin-inline: auto;
}
.btm_hd {
  position: relative;
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  z-index: 2;
}
.btm_hd::before {
  content: "";
  display: block;
  margin-bottom: 0.8rem;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}
.btm_wrapper {
  position: relative;
  margin-top: -4rem;
  background-color: var(--color-white);
  border-radius: 3rem 3rem 0 0;
  z-index: 2;
}
.btm_wrapper.u_ic::before {
  top: -4rem;
  left: 5rem;
  width: 20.4rem;
  height: 5.6rem;
  background-image: url(../img/common/bottom_house_img.svg);
}
.btm_breadcrumb {
  position: relative;
  z-index: 2;
}
.btm_ttl {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.112rem;
}

@media (max-width: 897px) {
  .btm_hd {
    font-size: 2.8rem;
    line-height: 1.4;
    letter-spacing: 1.12px;
  }
  .btm_hd::before {
    margin-bottom: 0.8rem;
  }
  .btm_mv {
    padding: 4rem 1.8rem 17.6rem;
  }
  .btm_mv.u_ic::after {
    width: 80%;
  }
}

@media (max-width: 576px) {
  .btm_mv.u_ic::after {
    width: 100%;
    background-image: url(../img/common/bottom_mv_sp_mountain.svg);
    aspect-ratio: 375 / 160;
  }
  .btm_wrapper.u_ic::before {
    top: -3.5rem;
    left: 1.6rem;
    width: 13rem;
    height: 4.8rem;
    background-image: url(../img/common/bottom_house_sp_img.svg);
  }
}

/*============================================================================================
      news
=============================================================================================*/
.news_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.news_hd::before {
  content: "news";
}
.news_category_btn {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border: 0.1rem solid var(--color-main);
  border-radius: 8rem;
  color: var(--color-main);
  line-height: 1;
  letter-spacing: 0.48px;
  cursor: pointer;
}
.news_category_btn.is_active {
  background-color: var(--color-main);
  color: var(--color-white);
}
.news_itm {
  border-top: 0.1rem solid var(--color-border);
  border-bottom: 0.1rem solid var(--color-border);
}
.news_itm_inr {
  display: block;
  padding: 2.4rem 0;
}
.news_category {
  padding: 0.5rem 0.8rem;
  border: 0.1rem solid var(--color-main);
  border-radius: 8rem;
  background-color: var(--color-main);
  line-height: 1;
  letter-spacing: 0.48px;
}
.news_itm_category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8rem;
  background-color: var(--color-main);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.48px;
}
.news_time {
  line-height: 1;
  -webkit-transition: color var(--transition);
  -o-transition: color var(--transition);
  transition: color var(--transition);
}
.news_itm_ttl {
  line-height: 1.75;
  letter-spacing: 0.48px;
  -webkit-transition: color var(--transition);
  -o-transition: color var(--transition);
  transition: color var(--transition);
}
.news_page_num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 1rem;
  border: 0.1rem solid #E0E0E0;
  border-radius: 0.2rem;
  letter-spacing: 0.42px;
  line-height: 1;
  cursor: pointer;
}
.news_page_num.is_current {
  background-color: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
}
.news_page_ellipsis {
  width: 1.4rem;
  position: relative;
  pointer-events: none;
}
.news_page_ellipsis::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: #666;
  border-radius: 50%;
  -webkit-box-shadow:
    4px 0 0 #666,
    8px 0 0 #666;
          box-shadow:
    4px 0 0 #666,
    8px 0 0 #666;
}
.news_page_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 0.1rem solid #E0E0E0;
  border-radius: 0.2rem;
}
.news_arrow {
  width: 100%;
  max-width: 0.5rem;
  aspect-ratio: 1 / 2;
}
.news_ttl {
  line-height: 1.5;
  letter-spacing: 1.12px;
}
.news_ttl.u_ic::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-main);
}
.news_cnt_ttl {
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.news_cnt_txt {
  line-height: 1.75;
  letter-spacing: 0.48px;
}
.news_cnt_subttl {
  line-height: 1.75;
  letter-spacing: 0.54px;
}
.news_cnt_txt__lg {
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.news_cnt_txt_link {
  color: #0700D4;
  text-decoration: underline;
}
.news_cnt_img {
  width: 100%;
  max-width: 540px;
}
.news_cnt_img img {
  aspect-ratio: 27 / 16;
}
.news_cnt_img_cap {
  display: block;
  line-height: 1.65;
  letter-spacing: 0.42px;
}
.news_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 27.7rem;
  height: 5.8rem;
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  color: var(--color-white);
  border-radius: 95px;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}
.news_btn.u_ic::before {
  top: 50%;
  left: 1.2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-white);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}
.news_btn.u_ic::after {
  top: 50%;
  left: 2.1rem;
  width: 1.1rem;
  height: 1rem;
  background-color: var(--color-main);
  -webkit-mask-image: url(../img/news/ico_arrow_prev.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  mask-image: url(../img/news/ico_arrow_prev.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.news_table {
  width: 100%;
  border: 0.1rem solid var(--color-border);
  border-collapse: collapse;
}
.news_th,
.news_td {
  padding: 1.6rem;
  line-height: 1.75;
  letter-spacing: 0.64px;
}
.news_th {
  min-width: 19.8rem;
  background-color: var(--color-main);
  color: var(--color-white);
  border-bottom: 0.1rem solid var(--color-border);
}
.news_td {
  width: 100%;
  border-bottom: 0.1rem solid var(--color-border);
}

@media (any-hover: hover) {
  .news_itm:hover .news_itm_time,
  .news_itm:hover .news_itm_ttl {
    color: var(--color-main);
  }
  .news_itm:hover .news_itm_ttl {
    text-decoration: underline;
  }
  .news_cnt_txt_link:hover {
    text-decoration: none;
  }
  .news_btn:hover {
    background-color: var(--color-white);
    color: var(--color-main);
  }
  .news_btn.u_ic:hover::before {
    background-color: var(--color-main);
  }
  .news_btn.u_ic:hover::after {
    background-color: var(--color-white);
  }
}

@media (max-width: 896px) {
  .news_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0;
  }
  .news_table tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .news_th,
  .news_td {
    width: 100%;
  }
}

/*============================================================================================
      policy
=============================================================================================*/
.policy_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.policy_hd::before {
  content: "policy";
}
.policy_ttl {
  letter-spacing: 0.56px;
}
.policy_txt {
  line-height: 1.75;
  letter-spacing: 0.48px;
}
.policy_num_lst {
  counter-reset: policy-num;
}
.policy_num_itm {
  position: relative;
  counter-increment: policy-num;
  padding-left: 1em;
}
.policy_num_itm::before {
  content: counter(policy-num) ".";
  position: absolute;
  left: 0;
  top: 0;
}
.policy_dot_itm + .policy_dot_itm {
  margin-top: 0.4rem;
}
.policy_dot_itm {
  position: relative;
  padding-left: 1em;
}
.policy_dot_itm::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.policy_subttl {
  line-height: 1.6;
  letter-spacing: 0.5px;
}

@media screen and (max-width:896px){
  .policy_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0rem;
  }
}

/*============================================================================================
      faq
=============================================================================================*/
.faq_hd::before {
  content: "Q&A";
}
.faq_wrapper {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.faq_side_wrap {
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: sticky;
  top: 10rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.faq_side_nav {
  position: static;
}
.faq_nav_itm {
  color: #A4CEBA;
}
.faq_nav_itm_target {
  display: block;
  padding-left: 3.6rem;
}
.faq_nav_itm_target.u_ic::before {
  width: 1.2rem;
  height: 1.2rem;
  top: 30%;
  left: 1rem;
  background-color: #A4CEBA;
  -webkit-mask-image: url("../img/faq/ico_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/faq/ico_arrow_right.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  rotate: 90deg;
  -webkit-transition: rotate var(--transition);
  -o-transition: rotate var(--transition);
  transition: rotate var(--transition);
}
.faq_nav_itm.js_current .faq_nav_itm_target {
  color: var(--color-main);
}
.faq_nav_itm.js_current .faq_nav_itm_target.u_ic::before {
  rotate: 0deg;
  background-color: var(--color-main);
}
.faq_cnt {
  width: 100%;
}
.faq_itm {
  padding: 1.2rem 0;
  border-top: 0.1rem solid var(--color-border);
  cursor: pointer;
}
.faq_itm:last-of-type {
  border-bottom: 0.1rem solid var(--color-border);
}
.faq_itm_q {
  width: 100%;
  padding: 1.6rem 6.6rem 1.6rem 3.6rem;
  line-height: 1.68;
  letter-spacing: 0.54px;
}
.faq_itm_q.u_ic::before {
  content: "Q";
  top: 1.9rem;
  left: 0;
  color: var(--color-main);
  font-size: 2.4rem;
  font-family: var(--font-en);
  line-height: 1;
  letter-spacing: 0.72px;
}
.faq_acd {
  position: absolute;
  right: 2.4rem;
  width: 2.6rem;
  height: 2.6rem;
  background-color: var(--color-main);
  border-radius: 50%;
}
.faq_acd::before,
.faq_acd::after {
  width: 1.2rem;
  height: 0.2rem;
  background-color: var(--color-white);
  border-radius: var(--bdrs-infinite);
  inset: 0;
  margin: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}
.faq_acd::before {
  rotate: 90deg;
}
.faq_itm.js_open .faq_acd::before {
  rotate: 180deg;
}
.faq_itm_a {
  display: none;
  padding: 2.4rem;
  background-color: #FCF8F2;
  border-radius: 10px;
  letter-spacing: 0.48px;
}
.faq_itm_a_inr {
  padding-left: 3.5rem;
}
.faq_itm_a_inr.u_ic::before {
  content: "A";
  top: 0.4rem;
  left: 0;
  color: #B24639;
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.faq_itm_link {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 1.6rem;
  color: #0700D4;
  text-decoration: underline;
  cursor: pointer;
}
.faq_itm_link.u_ic::before {
  width: 1.2rem;
  height: 1.2rem;
  top: 1rem;
  left: 0;
  background-image: url(../img/faq/ico_arrow_right.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

@media (any-hover: hover) {
  .faq_itm_link:hover {
    text-decoration: none;
  }
}

@media screen and (max-width:896px){
  .faq_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0rem;
  }
}

/*============================================================================================
      case
=============================================================================================*/
.case_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.btm_hd.case_hd {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(1.8 / 16 * 1.6rem);
}
.case_lst_hd::before ,
.case_hd::before {
  content: "case study";
}
.case_mv_img img {
  border-radius: calc(30 / 16 * 1.6rem);
}
.case_category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5rem 0.8rem;
  border: 0.1rem solid var(--color-main);
  border-radius: 8rem;
  color: var(--color-main);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.case_category.is_current {
  background-color: var(--color-main);
  color: var(--color-white);
}
.case_lst_ttl {
  margin-top: 0.8rem;
  line-height: 1.68;
  letter-spacing: 0.54px;
}
.case_lst_category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 1.6rem;
  padding: 0.5rem 0.8rem;
  border: 0.1rem solid var(--color-main);
  border-radius: 8rem;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
}
.case_itm {
  -webkit-transition: opacity var(--opacity);
  -o-transition: opacity var(--opacity);
  transition: opacity var(--opacity);
}

@media (any-hover: hover) {
  .case_category:hover {
    background-color: var(--color-main);
    color: var(--color-white);
  }
  .case_itm:hover {
    opacity: var(--opacity);
  }
}

@media screen and (max-width:896px){
  .case_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0rem;
  }
  .case_mv_img img {
    border-radius: calc(20 / 16 * 1.6rem);
  }
}

/* 詳細ページ */
.case_main_img img{
  border-radius: 3rem;
}
.case_ttl {
  line-height: 1.5;
  letter-spacing: 1.12px;
}
.case_sec + .case_sec {
  margin-top: 5.2rem;
}
.case_ttl_sub {
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.case_txt {
  font-size: 1.6rem;
}
.case_txt + .case_txt {
  margin-top: 1.6rem;
}
.case_img {
  width: 100%;
  max-width: 45rem;
  flex-shrink: 0;
}
.case_img img {
  border-radius: 1rem;
}
.case_related {
  padding: 2.4rem;
  border: 0.1rem solid var(--color-border-02);
  border-radius: 2rem;
}
.case_related_ttl {
  letter-spacing: 0.054rem;
}
.case_related_link {
  display: inline-block;
  padding-left: 0.8rem;
  color: var(--color-aqua-blue-02);
}
.case_related_link.u_ic::before {
  width: 0.5rem;
  height: 0.9rem;
  top: 0.3rem;
  bottom: 0;
  left: 0;
  background-color: var(--color-aqua-blue-02);
  mask-image: url(../img/diagnosis/ico_blue_arrow.svg);
  background-size: cover;
}
.case_btn_wrap {
  padding-bottom: 12rem;
}
.case_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 27.7rem;
  height: 5.8rem;
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}
.case_btn.u_ic::before {
  top: 50%;
  left: 1.2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}
.case_btn.u_ic::after {
  top: 50%;
  left: 2.1rem;
  width: 1.2rem;
  height: 1.1rem;
  background-color: var(--color-main);
  -webkit-mask-image: url(../img/common/ico_arrow_prev.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url(../img/common/ico_arrow_prev.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

@media (any-hover: hover) {
  .case_btn:hover {
    background-color: var(--color-white);
    color: var(--color-main);
  }
  .case_btn.u_ic:hover::before {
    background-color: var(--color-main);
  }
  .case_btn.u_ic:hover::after {
    background-color: var(--color-white);
  }
}

@media (max-width: 897px) {
  .case_sec + .case_sec {
    margin-top: 8rem;
  }
  .case_btn_wrap {
    padding-bottom: 0;
  }
  .btm_mv.case_mv {
    padding-bottom: 2.6rem;
  }
  .btm_hd.case_hd {
    font-size: 2.4rem;
  }
  .btm_mv.case_mv + .btm_wrapper {
    margin-top: 0;
  }
}

/*============================================================================================
      diagnosis 診断チャート
=============================================================================================*/
.diag_wrap {
  max-width: 128.5rem;
  width: calc(100% - 2rem * 2);
  margin: 0 auto;
}
.diag_breadcrumb_lst {
  padding-top: 0;
  padding-left: 1.6rem;
}
.diag_breadcrumb_lst .g_breadcrumb_itm + .g_breadcrumb_itm::before {
  border-color: var(--color-white);
}
.diag_start {
  padding: 7.8rem 8rem;
  background-color: var(--color-white);
  border-radius: 1.6rem;
}
.diag_start_img {
  width: 100%;
  max-width: 40rem;
}
.diag_start_ttl {
  font-size: clamp(2.8rem, 3.529vw, 4.8rem);
  line-height: 1.4;
  letter-spacing: 2.4px;
  text-wrap: nowrap;
}
.diag_start_ttl::before {
  content: "diagnostic chart";
  display: block;
  color: var(--color-main);
  font-size: 1.2rem;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}
.g_btn.diag_start_btn {
  max-width: 27.7rem;
  width: 100%;
}
.g_btn.diag_start_btn a {
  justify-content: start;
}

@media (max-width: 896px) {
  .diag_breadcrumb_lst {
    padding-left: 0;
  }
  .diag_start {
    padding: 3.2rem 2.4rem;
  }
  .diag_start_img {
    max-width: 30rem;
    width: 90%;
    margin-inline: auto;
  }
  .diag_start_txtWrap {
    width: 100%;
  }
  .g_btn.diag_start_btn {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .diag_start {
    padding: 2.4rem 1.6rem;
  }
  .diag_start_ttl {
    text-wrap: wrap;
  }
}
/* 選択ページ */
.diag_select {
  padding: 16rem 1.2rem 9.2rem;
  background-color: var(--color-white);
  border-radius: 1.6rem;
}
.diag_select_ttl {
  text-align: center;
  line-height: 1.53;
  letter-spacing: 0.64px;
}
.diag_select_txt {
  width: 100%;
  max-width: 89.4rem;
}
.diag_select_btn_wrap {
  width: 100%;
  max-width: 24rem;
}
.diag_select_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 6.4rem;
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1.68;
  letter-spacing: 0.54px;
}

@media (any-hover: hover) {
  .diag_select_btn:hover {
    background-color: var(--color-white);
    color: var(--color-main);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
}

@media (max-width: 896px) {
  .diag_select {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 47.5rem;
    padding: 8rem 2.4rem 3.2rem;
  }
  .diag_select_ttl {
    text-align: left;
  }
}

/* 結果 */
.diag_complete_breadcrumb {
  padding: 3.6rem 6.4rem 0;
}
.diag_complete {
  width: 100%;
  max-width: 81.4rem;
}
.diag_complete_result {
  color: var(--color-light-green);
  line-height: 1.57;
  letter-spacing: 0.56px;
}
.diag_complete_ttl {
  font-size: 4.8rem;
}
.diag_complete_related {
  padding: 2.4rem;
  border: 0.1rem solid var(--color-border-02);
  border-radius: 2rem;
}
.diag_related_ttl {
  letter-spacing: 0.054rem;
}
.diag_related_link {
  display: inline-block;
  padding-left: 0.8rem;
  color: var(--color-aqua-blue-02);
}
.diag_related_link.u_ic::before {
  top: 0.8rem;
  left: 0;
  width: 0.5rem;
  height: 0.9rem;
  background-color: var(--color-aqua-blue-02);
  mask-image: url(../img/diagnosis/ico_blue_arrow.svg);
  background-size: cover;
}
@media (max-width: 896px) {
  .diag_complete_ttl  {
    font-size: 4rem;
  }
}
@media (max-width: 579px) {
  .diag_complete_ttl  {
    font-size: 3.6rem;
  }
}


/*============================================================================================
      Support information 空き家に関する支援案内
=============================================================================================*/
.support_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.support_hd::before {
  content: "Support information";
}
.support_btn {
  display: block;
  padding: 1.4rem 5.4rem 1.4rem 2.4rem;
  width: 100%;
  max-width: 40.7rem;
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.48px;
  line-height: 1.75;
}
.support_btn.u_ic::before {
  top: 50%;
  right: 1.2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.support_btn.u_ic::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.9rem;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--color-main);
  -webkit-mask-image: url(../img/common/icon_tab.svg);
          mask-image: url(../img/common/icon_tab.svg);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.support_table_wrap {
  width: 100%;
  overflow-x: auto;
}
.support_table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.support_table th,
.support_table td {
  border: 0.1rem solid #E0E0E0;
  font-size: 1.6rem;
  line-height: 1.75;
  vertical-align: middle;
}
.support_table thead th {
  padding: 0.8rem 1rem;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 1.6rem;
  text-align: center;
}
.support_table tbody td{
  padding: 1.2rem;
}
.support_table tbody .support_table_nikko td {
  padding: 1.6rem 1.2rem;
}
.support_table col:nth-child(3) {
  min-width: 460px;
}

.support_table_img {
  width: 100%;
  max-width: 13rem;
}
.support_table_tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 5.2rem;
  margin-right: 0.6rem;
  padding: 0.5rem 0;
  border: 0.1rem solid var(--color-main);
  border-radius: 8rem;
  color: var(--color-main);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.48px;
  line-height: 1;
}
.support_table_link {
  color: #4C7EDB;
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: 0.42px;
  padding-right: 1.5rem;
}
.support_table_link.u_ic::after {
  top: 50%;
  right: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-color: #4C7EDB;
  -webkit-mask-image: url(../img/common/icon_tab.svg);
          mask-image: url(../img/common/icon_tab.svg);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (any-hover: hover) {
  .support_btn:hover {
    background-color: var(--color-white);
    color: var(--color-main);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  .support_btn.u_ic:hover::before {
    background-color: var(--color-main);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  .support_btn.u_ic:hover::after {
    background-color: var(--color-white);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  .support_table_link:hover {
    text-decoration: underline;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
}

@media screen and (max-width:896px){
  .support_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0rem;
  }
}


/*============================================================================================
      notebook わが家の終活ノート
=============================================================================================*/
.note_hd::before {
  content: "Ending Notes";
}
.note_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.note_lead {
  line-height: 1.75;
  letter-spacing: 0.48px;
}
.note_block {
  padding: 4.8rem;
  border-radius: 2rem;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(0, 0, 0, 0.10);
}
.note_main_img {
  width: 100%;
  max-width: 225px;
  flex-shrink: 0;
  margin-inline: auto;
}
.note_main_img img {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}
.note_main_ttl {
  line-height: 1.5;
  letter-spacing: 1.12px;
}
.note_main_txt {
  line-height: 1.75;
  letter-spacing: 0.48px;
}
.note_btn_icon {
  display: block;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
}
.note_btn {
  display: block;
  width: 100%;
  max-width: 25rem;
  padding: 1.5rem 7.8rem 1.5rem 2.4rem;
  background-color: var(--color-main);
  border: 0.2rem solid var(--color-main);
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  white-space: nowrap;
}
.note_btn.u_ic::before {
  top: 50%;
  right: 1.2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translateY(-50%);
}
.note_btn.u_ic::after {
  top: 50%;
  right: 1.95rem;
  width: 1.4rem;
  height: 1.8rem;
  mask-image: url(../img/common/icon_pdf.svg);
  mask-size: contain;
  background-color: var(--color-main);
  transform: translateY(-50%);
}
.note_block_use {
  padding: 2.4rem;
}
.note_use_ttl {
  line-height: 1.57;
  letter-spacing: 0.6px;
}
.note_use_itm {
  padding: 2.4rem 1.6rem 1.6rem;
  background-color: var(--color-white);
  border-radius: 1rem;
}
.note_use_itm.u_ic::after {
  top: 50%;
  right: -1.7rem;
  width: 1.3rem;
  height: 2.6rem;
  background-image: url(../img/notebook/icon_triangle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.note_use_itm_step {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.6rem 2.4rem;
  background-color: var(--color-main);
  border-radius: 8.1rem;
  color: var(--color-white);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.note_use_itm_ttl {
  line-height: 1.68;
  letter-spacing: 0.54px;
}

@media (any-hover: hover) {
  .note_btn:hover {
    background-color: var(--color-white);
    color: var(--color-main);
    transition: var(--transition);
  }
  .note_btn.u_ic:hover::before {
    background-color: var(--color-main);
    transition: var(--transition);
  }
  .note_btn.u_ic:hover::after {
    background-color: var(--color-white);
    transition: var(--transition);
  }
}

@media (max-width: 896px) {
  .note_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0rem;
  }
  .note_block {
    padding: 2.4rem 1.6rem;
  }
  .note_block_use {
    padding: 1.6rem;
  }
  .note_use_itm.u_ic::after {
    top: auto;
    right: auto;
    bottom: -2.3rem;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
  }
  .note_main_img img {
    max-width: 135px;
  }
  .note_btn {
    max-width: 100%;
  }
}

/*============================================================================================
      consultation 空き家に関する相談窓口
=============================================================================================*/
.consul_hd::before {
  content: "consultation counte";
}
.consul_wrapper {
  padding-top: 8rem;
  padding-bottom: 12rem;
}
.consul_ttl {
  line-height: 1.5;
  letter-spacing: 0.112rem;
}
.consul_ttl_sub {
  line-height: 1.65;
  letter-spacing: 0.042rem;
}
.consul_table_wrap {
  width: 100%;
  overflow-x: auto;
}
.consul_table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.consul_table thead th {
  padding: 0.8rem 0;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
.consul_table thead th:nth-of-type(1) {
  width: 36.5%;
}
.consul_table thead th:nth-of-type(2) {
  width: 28.3%;
}
.consul_table thead th:nth-of-type(3) {
  width: 18%;
}
.consul_table tbody th {
  padding: 1.2rem 1.5rem;
  font-size: 1.6rem;
  font-weight: 700;
}
.consul_table tbody td {
  padding: 0.8rem 1.2rem;
}
.consul_table th,
.consul_table td {
  border: 0.1rem solid #E0E0E0;
  vertical-align: middle;
}
.consul_table_time {
  line-height: 1;
}

@media screen and (max-width:896px){
  .consul_wrapper {
    padding-top: 6.4rem;
    padding-bottom: 0;
  }
}

/*============================================================================================
      knowledge 共通
=============================================================================================*/
.knowledge_info {
  height: 100%;
  padding: 2.4rem;
  background-color: var(--color-bg);
  border-radius: 1rem;
}
.knowledge_info_hd.u_ic::before {
  right: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-main);
}
.knowledge_info_hd.u_ic::after {
  top: 1rem;
  right: 0.9rem;
  width: 1.2rem;
  height: 1.2rem;
  mask-image: url(../img/common/icon_arrow.svg);
  background-color: var(--color-white);
}
.knowledge_info_ttl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05rem;
  padding-right: 3.2rem;
}
.knowledge_info_content {
  padding-top: 0.8rem;
}
.knowledge_info_content.u_ic::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-light-orange);
}
.knowledge_info_txt {
  line-height: 1.87;
}

@media screen and (max-width:896px){
  .knowledge_info_content figure {
    max-width: 100px;
    margin-inline: auto;
  }
}

/*============================================================================================
      removal
=============================================================================================*/
.removal_hd::before {
  content: "removal of dangerous vacant houses";
}
.removal_condition_txt {
  line-height: 1.65;
  letter-spacing: 0.42px;
}
.removal_condition_lst {
  padding-left: 1.4rem;
}
.removal_condition_itm {
  padding-left: 1.4rem;
}
.removal_condition_itm.u_ic::before {
  content: "・";
  left: 0;
}
.removal_risk_itm {
  padding: 1.6rem ;
  border-radius: 0.5rem;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.12);
}
.removal_ttl {
  line-height: 1.5;
  letter-spacing: 0.096rem;
}

/*============================================================================================
      utilization 空き家の活用
=============================================================================================*/
.util_hd::before {
  content: "Utilization of vacant houses";
}
.util_ttl {
  line-height: 1.5;
  letter-spacing: 0.096rem;
}
.util_info_img {
  padding-top: 2.2rem;
}
.util_info_img img {
  max-width: 33.7rem;
}
@media (max-width: 896px) {
  .util_info_img  {
    padding-top: 0;
  }
}

/*============================================================================================
      questionnaire アンケートフォーム
=============================================================================================*/
.ques_wrapper {
  padding-top: 2.8rem;
  padding-bottom: 12rem;
}
.ques_hd {
  margin-top: 2rem;
  font-size: 4.8rem;
  letter-spacing: 2.4px;
}
.ques_hd::before {
  content: "questionnaire";
  display: block;
  margin-bottom: 0.8rem;
  color: var(--color-main);
  font-size: 1.2rem;
  font-family: var(--font-en);
  line-height: 1.6;
  text-transform: uppercase;
}
.ques_breadcrumb {
  padding: 0 6.4rem;
}
.ques_sec_inr {
  position: relative;
  width: 100%;
  max-width: 102.2rem;
  padding: 7.2rem 10.4rem 8rem;
  background-color: var(--color-white);
  border-radius: 3rem;
}
.ques_sec_inr::before {
  content: "";
  position: absolute;
  top: -3.6rem;
  left: 0;
  width: 20.3rem;
  height: 5.6rem;
  background-image: url(../img/common/bottom_house_img.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.ques_status_lst {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 3;
}
.ques_status_lst.u_ic::before {
  top: 1.9rem;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background-color: #AFAFAF;
  z-index: -1;
}
.ques_status_num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.8rem;
  height: 3.8rem;
  background-color: #AFAFAF;
  border-radius: 50%;
  color: var(--color-white);
  line-height: 8;
  font-family: var(--font-en);
}
.ques_status_current .ques_status_num {
  background-color: var(--color-main);
}
.ques_status_current .ques_status_txt {
  color: var(--color-main);
}
/* アンケートフォーム内 */
.ques_itm {
  padding: 3.2rem 0;
  border-bottom: 0.1rem solid var(--color-border);
}
.ques_itm:first-child {
  padding-top: 0;
}
.ques_itm:nth-last-of-type(2) {
  padding-bottom: 0;
  border-bottom: 0;
}
.ques_ttl {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
}
.ques_ttl.ques_ttl__multiple {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.ques_ttl.ques_ttl__multiple span {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.7;
}
.ques_label {
  line-height: 1;
  letter-spacing: 0.42px;
}
input[type="checkbox"],
input[type="radio"] {
  margin: 0 0.5rem 0 0;
}
input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
}
input[type="radio"]:checked {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-main);
  position: relative;
}

input[type="radio"]:checked::after {
  content: "";
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.ques_checkbox input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--color-main);
}
.ques_clear_btn {
  width: 100%;
  max-width: 24rem;
  height: 5.8rem;
  -webkit-transition: opacity var(--transition);
  -o-transition: opacity var(--transition);
  transition: opacity var(--transition);
}
.ques_clear_btn_target {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #AFAFAF;
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.48px;
  border: none;
}
.ques_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 27.7rem;
  padding: 1.4rem 4.2rem 1.4rem 2.4rem;
  background-color: var(--color-main);
  border-radius: 9.5rem;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  -webkit-transition: opacity var(--opacity);
  -o-transition: opacity var(--opacity);
  transition: opacity var(--opacity);
}
.ques_btn.u_ic::before {
  top: 50%;
  right: 1.2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ques_btn.u_ic::after {
  top: 50%;
  right: 2rem;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-main);
  -webkit-mask-image: url("../img/common/icon_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/common/icon_arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ques_btn.ques_btn__top {
  padding: 1.4rem 2.4rem 1.4rem 4.2rem;
}
.ques_btn.ques_btn__top.u_ic::before {
  top: 50%;
  right: auto;
  left: 1.2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-white);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ques_btn.ques_btn__top.u_ic::after {
  top: 28%;
  left: 2rem;
  right: auto;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-main);
  -webkit-mask-image: url("../img/common/icon_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/common/icon_arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-transform: translateY(-28%);
      -ms-transform: translateY(-28%);
          transform: translateY(-28%);
  rotate: 180deg ;
}
.ques_text_label {
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: 0.42px;
}
input.ques_text {
  height: 4.6rem;
  padding: 0.8rem 1.2rem;
  border: 0.1rem solid #CCC;
  font-size: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.ques_select_wrap {
  width: 100%;
  max-width: 14.4rem;
}
.ques_select_wrap.u_ic::after {
  top: 50%;
  right: 1.2rem;
  width: 0.9rem;
  height: 0.5rem;
  background-image: url("../img/common/icon_arrow.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 1.1rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
select.ques_select {
  width: 100%;
  height: 4.6rem;
  padding: 0.8rem 1.2rem;
  border: 0.1rem solid #CCC;
  color: #CCC;
  font-size: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  appearance: none;           
  -webkit-appearance: none; 
  -moz-appearance: none; 
}
.ques_select:valid,
.ques_select option {
  color: #333;
}
.ques_terms {
  border: 0.1rem solid #CCC;
  padding: 0.8rem 2.4rem 0.8rem 1.6rem;
  height: 12rem;
  overflow-y: scroll;
}
.ques_terms::-webkit-scrollbar {
  width: 0.845rem; 
  border-left: 0.1rem solid #CCC;
}
.ques_terms::-webkit-scrollbar-button {
  display: none;
}
.ques_terms::-webkit-scrollbar-track {
  background: transparent;
}
.ques_terms::-webkit-scrollbar-thumb {
  background-color: #AFB7B3;
  border-radius: 0; 
}
.confirm_itm {
  padding: 2.4rem 0;
  border-bottom: 0.1rem solid #CCC;
}
.confirm_itm:first-of-type {
  padding-top: 0;
}
.ques_thanks_ttl {
  color: #122B06;
  line-height: 1.5;
  letter-spacing: 1.12px;
}
.ques_thanks_txt {
  color: #122B06;
}
@media (any-hover: hover) {
  .ques_clear_btn:hover {
    opacity: var(--opacity);
  }
  .ques_btn:hover {
    opacity: var(--opacity);
  } 
}

@media (max-width: 896px) {
  .ques_breadcrumb  {
    padding: 0 2rem;
  }
  .ques_sec_inr::before {
    background-image: url("../img/common/bottom_house_sp_img.svg");
  }
  .ques_hd {
    font-size: 3rem;
  }
  .ques_sec_inr {
    padding: 7.2rem 3.2rem 8rem;
  }
  .ques_ttl.ques_ttl__multiple {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 576px) {
  .ques_sec_inr {
    padding: 7.2rem 1.6rem 8rem;
  }
}

/*============================================================================================
      404 not found
=============================================================================================*/
.nfound_hd::before {
  content: "404 not found";
}


/*============================================================================================
      空き家の基本情報
=============================================================================================*/
.basic_hd::before {
  content: "Basic information about vacant houses";
}
.sec_basic {
  padding-top: 8rem;
}
.sec_basic:last-child {
  padding-bottom: 16rem;
}
.basic_ttl {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(1.12 / 16 * 1.6rem);
}
.basic_info_lead {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: calc(0.5 / 16 * 1.6rem);
}
.basic_risk_itm {
  padding: 3.2rem 2.4rem;
  border-radius: calc(10/16 * 1.6rem);
  border: 0.4rem solid var(--color-white);
  box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.15);
}
.basic_risk_itm_ttl {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: calc(0.5 / 16 * 1.6rem);
}
.basic_info_itm {
  padding: 3.2rem 4rem;
  border-radius: calc(10/16 * 1.6rem);
  background: var(--color-bg);
  justify-content: space-between;
  align-items: center;
}
.basic_info_itm + .basic_info_itm {
  margin-top: 2.4rem;
}
.basic_info_itm_ttl {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(1.12 / 16 * 1.6rem);
}

.basic_info_itm {
  display: grid;
  grid-template-columns: auto 18.5rem;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: calc((100vw / var(--vw-value-lg)) * 75);
  grid-row-gap: 0px;
}
.basic_info_itm_ttl { grid-area: 1 / 1 / 2 / 2; }
.basic_info_itm_txt  { grid-area: 2 / 1 / 3 / 2; }
.basic_info_itm .u_img { grid-area: 1 / 2 / 4 / 3; }
.basic_info_itm_btn { grid-area: 3 / 1 / 4 / 2; }

@media screen and (max-width:896px){
  .sec_basic:last-child {
    padding-bottom: 0;
  }
  .basic_info_itm {
    padding: 1.6rem;
  }
  .basic_info_lead {
    font-size: 1.8rem;
    text-align: left;
  }
  .basic_info_itm_ttl {
    font-size: 2.4rem;
  }
}

@media screen and (max-width:576px){
  .basic_info_itm {
    display: block;
  }
  .basic_info_itm_btn {
    margin-inline: auto;
  }
}

/*============================================================================================
      about とちぎ空き家サイトとは
=============================================================================================*/
.about_sec {
  overflow: hidden;
  background-color: var(--color-bg);
  margin-top: 7.6rem;
}
.about_hd_wrap::after {
  right: -7rem;
  bottom: 3rem;
  width: 10.5rem;
  height: auto;
  aspect-ratio: 105/115.21;
  background-image: url(../img/about/about_hd_decoR.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.about_hd {
  position: relative;
  font-size: 4.8rem;
  line-height: 1.4;
  letter-spacing: 2.4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.about_hd::before {
  content: "about";
  display: block;
  color: var(--color-main);
  font-size: 1.2rem;
  font-family: var(--font-en);
  line-height: 1.6;
  text-transform: uppercase;
}
.about_hd::after {
  position: absolute;
  content: "";
  top: -2rem;
  left: -28rem;
  width: 17.1rem;
  height: auto;
  aspect-ratio: 171/370.68;
  background-image: url(../img/about/about_hd_decoL.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.about_hd_msg {
  position: relative;
  max-width: 84rem;
  margin-top: 3.4rem;
  z-index: 1;
}
.about_img {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  margin-top: 5.4rem;
}
.about-purpose_wrap {
  background-color: #DEF5C5;
}
.about-purpose_deco img {
  position: relative;
  top: 1.5rem;
  width: 32.952rem;
  z-index: 1;
}
.about_purpose_wrap {
  border-radius: 2rem 2rem 0 0;
  padding-top: 10.4rem;
}
.about_purpose_inr {
  border-radius: 1.3rem;
  padding: 6.4rem 6.4rem 7.8rem;
}
@media (max-width:1200px) {
  .about_sec {
    margin-top: 6rem;
  }
}
@media (max-width:896px) {
  .about_sec {
    padding-top: 8rem;
  }
  .about_hd::after {
    top: -6rem;
    left: -4rem;
    width: 12.9rem;
    aspect-ratio: 129/75;
    background-image: url(../img/about/about_hd_decoL_sp.png);
  }
  .about_hd_wrap::after {
    right: 2.4rem;
    bottom: -7.4rem;
    width: 10.5rem;
    aspect-ratio: 105/58;
    background-image: url(../img/about/about_hd_decoR_sp.png);
  }
  .about_hd {
    font-size: 2.8rem;
    line-height: 1.5;
    letter-spacing: 1.12px;
  }
  .about_hd_msg {
    margin-top: 3.2rem;
  }
  .about_purpose_inr {
    padding: 4rem 2rem;
  }
}

/*============================================================================================
      bank-about 空き家バンクとは
=============================================================================================*/
.bankAbout_hd::before {
  content: "About vacant houses";
}
.bank_structure_item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--color-white);
  font-size: 2.4rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: #888;
  max-width: 40.15rem;
  border-radius: 0.9rem 0.9rem 0 0;
  padding: 1.6rem 9.3rem;
  cursor: pointer;
}
.bank_structure_item.js_crnt {
  background-color: var(--color-main);
}
.bank_structure_inr {
  background-color:var(--color-bg);
  border-radius: 0.9rem;
  padding: 5.6rem 6.4rem;
}
.bank_structure_btn a {
  min-width: 27.7rem;
}

@media (max-width:896px) {
  .bank_structure_item {
    font-size: 1.4rem;
    line-height: 1.71;
    letter-spacing: 0.042rem;
    padding: 1rem 0.8rem;
  }
  .bank_structure_inr {
    padding: 3.2rem 1.6rem;
  }
}

/*============================================================================================
      空き家の適正管理
=============================================================================================*/
.management_img {
  flex: 0 0 16.131rem;
}
.management_ttl {
  color: var(--color-main);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.96px;
}
.management_item {
  border-radius: 1rem;
}
.management_item a {
  padding: 2.4rem;
}
.management_item_ttl {
  padding-right: 3.2rem;
}
.management_item_ttl_lg {
  line-height: 1.6;
}
.management_item_text {
  padding-top: 0.8rem;
}
.management_item_text::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-light-orange);
}
.management_item_img {
  flex: 0 0 11.9rem;
}
.management_img_wrap .management_img_item:first-child {
  max-width: 25.5774rem;
}
.management_img_wrap .management_img_item:nth-child(2) {
  max-width: 30.4rem;
}
.management_img_wrap .management_img_item:nth-child(3) {
  max-width: 26.1rem;
}


@media screen and (max-width:896px){
  .management_img_wrap {
    display: none;
  }
  .management_img {
    display: none;
  }
  .management_ttl {
    font-size: 2rem;
  }
  .management_item_img {
    flex: auto;
    max-width: 100px;
    margin-inline: auto;
  }
  .management_img_sp {
    max-width: 340px;
    margin-inline: auto;
  }
  .management_item_ttl::before {
    bottom: auto;
  }
  .management_item_ttl::after {
    top: 1rem;
    bottom: auto;
  }
}