@charset "UTF-8";
/*
  File Name   : top.css
  Description : Write top content styles
*/
/* TOP 共通パーツ
============================================================ */
.top .top-moreBtn {
  max-width: 300px;
}
@media only screen and (max-width: 1024px) {
  .top .top-moreBtn {
    max-width: 280px;
    font-size: 20px;
    min-height: 3em;
  }
}
.top .top-section-contentsBlock.typeA {
  position: relative;
  padding: 120px 0 120px;
}
@media only screen and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA {
    padding: 76px 0 76px;
  }
}
.top .top-section-contentsBlock.typeA .contentsBlock__description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: 0em;
  text-indent: 0em;
  text-align: center;
  margin: 30px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__description {
    font-size: 19px;
  }
}
.top .top-section-contentsBlock.typeA .contentsBlock__description > span {
  display: block;
}
.top .top-section-contentsBlock.typeA .contentsBlock__servicesList {
  width: 100%;
}
@media print, screen and (min-width: 1025px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__servicesList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 25px 20px;
    max-width: 1080px;
    font-size: 22px;
    margin: 44px auto 0;
  }
}
@media only screen and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__servicesList {
    display: grid;
    font-size: 18px;
    margin-top: 28px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__servicesList {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 599px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__servicesList {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.top .top-section-contentsBlock.typeA .contentsBlock__servicesList > li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0;
  width: calc(25% - (20px * 3 / 4));
  max-width: 250px;
  min-height: 130px;
  font-size: inherit;
  background-color: #fff;
  border-radius: 20px;
  padding: 3.75em 0.5em 0.5em;
}
@media only screen and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__servicesList > li {
    width: 100%;
    max-width: initial;
    min-height: 114px;
    border-radius: 15px;
    padding: 3.75em 0.5em 1em;
  }
}
.top .top-section-contentsBlock.typeA .contentsBlock__servicesList > li .icon {
  position: absolute;
  display: block;
  font-size: inherit;
  width: 2.25em;
  height: auto;
  aspect-ratio: 1/1;
  top: 1em;
  right: 50%;
  -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
}
.top .top-section-contentsBlock.typeA .contentsBlock__servicesList > li .txt {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  color: var(--color_font__sub);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  text-indent: 0em;
  text-align: center;
}
.top .top-section-contentsBlock.typeA .contentsBlock__servicesList > li .txt > span {
  display: block;
}
.top .top-section-contentsBlock.typeA .contentsBlock__moreBtn {
  margin: 50px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top .top-section-contentsBlock.typeA .contentsBlock__moreBtn {
    margin-top: 52px;
  }
}

/* KV
============================================================ */
.top-kv {
  padding: 20px 0 40px;
}
.top-kvInner {
  position: relative;
}
.top-kv .top-kv-slider .splide__slide--pict {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000/750;
  overflow: hidden;
  border-radius: 30px;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider .splide__slide--pict {
    border-radius: 20px;
  }
}
.top-kv .top-kv-slider .splide__slide--pict > img {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.top-kv .top-kv-slider .splide a.splide__slide:hover {
  opacity: 1 !important;
}
@media print, screen and (min-width: 1025px) {
  .top-kv .top-kv-slider .splide a.splide__slide:hover .splide__slide--pict > img {
    -webkit-transform: translate(50%, -50%) scale(1.1);
            transform: translate(50%, -50%) scale(1.1);
  }
}
.top-kv .top-kv-slider .splide__pagination {
  position: relative;
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  gap: 10px;
  width: 100%;
  margin: 15px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider .splide__pagination {
    margin-top: 10px;
  }
}
.top-kv .top-kv-slider .splide__pagination > li {
  display: block;
}
.top-kv .top-kv-slider .splide__pagination > li .splide__pagination__page {
  display: block;
  width: 10px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #DDDDDD;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider .splide__pagination > li .splide__pagination__page {
    width: 7px;
  }
}
.top-kv .top-kv-slider .splide__pagination > li .splide__pagination__page.is-active {
  background-color: var(--color_main);
}
.top-kv .top-kv-decore.decore__01 {
  position: absolute;
  display: block;
  width: min(13.34%, 256px);
  right: 18.65%;
  bottom: 0;
  -webkit-transform: translate(0, 10%);
          transform: translate(0, 10%);
  pointer-events: none;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@media screen and (min-width: 1921px) {
  .top-kv .top-kv-decore.decore__01 {
    right: 50%;
    -webkit-transform: translate(calc(50% + 477px), 10%);
            transform: translate(calc(50% + 477px), 10%);
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-kv .top-kv-decore.decore__01 {
    width: 130px;
    right: 50%;
    -webkit-transform: translate(calc(50% + 220px), 8%);
            transform: translate(calc(50% + 220px), 8%);
  }
}
@media only screen and (max-width: 599px) {
  .top-kv .top-kv-decore.decore__01 {
    width: min(48%, 180px);
    right: 0;
    bottom: -11px;
    -webkit-transform: translate(23%, 0) rotate(-13deg);
            transform: translate(23%, 0) rotate(-13deg);
  }
}

/* NEWS
============================================================ */
.top-news {
  padding: 55px 0 60px;
}
@media only screen and (max-width: 1024px) {
  .top-news {
    padding: 38px 0 62px;
  }
}
.top-newsInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0 70px;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .top-newsInner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.top-news .top-news-header {
  width: 230px;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-header {
    width: 100%;
  }
}
.top-news .top-news-header .top-news-header-hl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-header .top-news-header-hl {
    width: 100%;
  }
}
.top-news .top-news-body {
  width: 100%;
  max-width: 813px;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-body {
    max-width: initial;
    margin: 18px 0 0;
  }
}
.top-news .top-news-body .com-news-list > ul {
  border-top: none;
}
.top-news .top-news-body .com-noneText {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.top-news .top-moreBtn {
  margin: 33px 0 0;
  min-height: 3em;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-moreBtn {
    margin: 50px auto 0;
  }
}
.top-news .top-moreBtn::after {
  right: 0.75em;
}
.top-news .top-moreBtn:hover::after {
  right: 0.4em;
}

/* HOKEN
============================================================ */
.top-hoken {
  padding: 70px 0 70px;
}
@media only screen and (max-width: 1024px) {
  .top-hoken {
    padding: 40px 0 63px;
  }
}
.top-hokenInner {
  position: relative;
}
.top-hoken .com-roundBox {
  background-color: #FFF7DB;
  background: -webkit-radial-gradient(ellipse, #FDFCF4, #FFF7DB 70%, #FFF7DB);
  background: radial-gradient(ellipse, #FDFCF4, #FFF7DB 70%, #FFF7DB);
}
.top-hoken .top-hoken-decore {
  position: absolute;
  display: block;
  pointer-events: none;
}
.top-hoken .top-hoken-decore > img {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.top-hoken .top-hoken-decore.decore__01 {
  width: 58px;
  height: auto;
  aspect-ratio: 1/1;
  top: -70px;
  left: 9px;
}
@media only screen and (max-width: 599px) {
  .top-hoken .top-hoken-decore.decore__01 {
    width: 42px;
    top: -37px;
    left: 0;
  }
}
.top-hoken .top-hoken-decore.decore__02 {
  width: 190px;
  height: auto;
  aspect-ratio: 190/96;
  top: -24px;
  left: -14px;
}
@media screen and (max-width: 1539px) {
  .top-hoken .top-hoken-decore.decore__02 {
    left: 10px;
  }
}
@media only screen and (max-width: 599px) {
  .top-hoken .top-hoken-decore.decore__02 {
    width: 140px;
    top: -12px;
    left: 0;
  }
}
.top-hoken .top-hoken-decore.decore__03 {
  width: 110px;
  height: auto;
  aspect-ratio: 110/80;
  top: -60px;
  right: -20px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
@media screen and (max-width: 1539px) {
  .top-hoken .top-hoken-decore.decore__03 {
    right: 10px;
  }
}
@media only screen and (max-width: 599px) {
  .top-hoken .top-hoken-decore.decore__03 {
    width: 78px;
    top: -41px;
    right: 0;
  }
}

/* SERVICE
============================================================ */
.top-service {
  padding: 0 0 50px;
}
@media only screen and (max-width: 1024px) {
  .top-service {
    padding: 0 0 82px;
  }
}
.top-serviceInner {
  position: relative;
}
.top-service .com-roundBox {
  background-color: #FFF7DB;
  background: -webkit-radial-gradient(ellipse, #FFF8FB, #FDEDF1 70%, #FDEDF1);
  background: radial-gradient(ellipse, #FFF8FB, #FDEDF1 70%, #FDEDF1);
}
.top-service .top-hoken-decore {
  position: absolute;
  display: block;
}
.top-service .top-hoken-decore > img {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.top-service .top-hoken-decore.decore__01 {
  width: 80px;
  height: auto;
  aspect-ratio: 1/1;
  top: 135px;
  left: -14px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-service .top-hoken-decore.decore__01 {
    top: -20px;
    left: -11px;
  }
}
@media only screen and (max-width: 599px) {
  .top-service .top-hoken-decore.decore__01 {
    width: 54px;
    top: -13px;
    left: -8px;
  }
}
.top-service .top-hoken-decore.decore__01 > img {
  -webkit-transform: scale(-1, 1) rotate(-23deg);
          transform: scale(-1, 1) rotate(-23deg);
}
.top-service .top-hoken-decore.decore__02 {
  width: 75px;
  height: auto;
  aspect-ratio: 110/80;
  top: 212px;
  left: 36px;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-service .top-hoken-decore.decore__02 {
    top: 60px;
    left: 39px;
  }
}
@media only screen and (max-width: 599px) {
  .top-service .top-hoken-decore.decore__02 {
    width: 50px;
    top: 40px;
    left: 27px;
  }
}
.top-service .top-hoken-decore.decore__02 > img {
  -webkit-transform: scale(-1, 1) rotate(47deg);
          transform: scale(-1, 1) rotate(47deg);
}
.top-service .top-hoken-decore.decore__03 {
  width: 156px;
  height: auto;
  aspect-ratio: 190/96;
  bottom: -23px;
  right: 3px;
}
@media only screen and (max-width: 599px) {
  .top-service .top-hoken-decore.decore__03 {
    width: 128px;
    bottom: -23px;
    right: -10px;
  }
}
.top-service .top-hoken-decore.decore__03 > img {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}