@charset "UTF-8";
/*
  File Name   : top.css
  Description : Write top content styles
*/
/* TOP 共通パーツ
============================================================ */
.top-moreBtn {
  max-width: 250px;
}

/* HERO AREA
============================================================ */
.top-hearoArea {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 66px 60px;
  z-index: 2;
}
@media only screen and (max-width: 1024px) {
  .top-hearoArea {
    padding: 46px 10px;
  }
}

/* KV
============================================================ */
.top-kv {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
  display: block;
  width: 100%;
  max-width: 1800px;
  height: 100%;
  min-height: 450px;
  border-radius: 40px;
  background-color: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 1024px) {
  .top-kv {
    min-height: 400px;
    border-radius: 30px;
  }
}
.top-kv::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color_main);
  opacity: 0.1;
  z-index: 1;
  pointer-events: none;
}
.top-kv .top-kv-slider {
  position: absolute;
  display: block;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.top-kv .top-kv-slider .splide {
  height: 100%;
}
.top-kv .top-kv-slider .splide__track {
  height: 100%;
}
.top-kv .top-kv-slider .splide__slide--pict {
  position: relative;
  width: 100%;
  height: 100%;
}
.top-kv .top-kv-slider .splide__slide--pict > img {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.top-kv .top-kv-pickupLink {
  position: absolute;
  display: block;
  width: 280px;
  height: auto;
  aspect-ratio: 280/310;
  bottom: 6%;
  right: min(8.9vw, 172px);
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
  -webkit-animation: fluffy 3s ease-in-out infinite;
          animation: fluffy 3s ease-in-out infinite;
  z-index: 2;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-pickupLink {
    width: clamp(200px, 62.666vw, 235px);
    bottom: 4%;
    right: -14px;
  }
}
.top-kv .top-kv-pickupLink:hover {
  opacity: 1 !important;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
@media print, screen and (min-width: 1025px) {
  .top-kv .top-kv-pickupLink:hover {
    -webkit-transform: translate(0, -3%);
            transform: translate(0, -3%);
  }
}
@-webkit-keyframes fluffy {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}
@keyframes fluffy {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}
.top-hearoArea:has(.top-importantNotice) .top-kv {
  padding-bottom: 34px;
}
.top-hearoArea:has(.top-importantNotice) .top-kv .top-kv-pickupLink {
  bottom: calc(60px + 6%);
}
@media only screen and (max-width: 1024px) {
  .top-hearoArea:has(.top-importantNotice) .top-kv .top-kv-pickupLink {
    bottom: calc(50px + 4%);
  }
}

/* IMPORTANT NOTICE
============================================================ */
.top-importantNotice {
  display: block;
  width: 100%;
  position: relative;
  margin: -60px auto 0;
  z-index: 10;
}
@media only screen and (max-width: 1024px) {
  .top-importantNoticeInner {
    padding: 0 10px;
  }
}
.top-importantNotice .top-importantNotice-hl {
  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;
  min-height: 60px;
  background-color: var(--color_notice);
  border-radius: 20px 20px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-hl {
    min-height: 50px;
  }
}
.top-importantNotice .top-importantNotice-hl .hlTxt {
  position: relative;
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0.1em;
  padding: 0 2em;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-hl .hlTxt {
    font-size: 22px;
    padding: 0 2.2em;
  }
}
.top-importantNotice .top-importantNotice-hl .hlTxt::before, .top-importantNotice .top-importantNotice-hl .hlTxt::after {
  content: "";
  position: absolute;
  display: block;
  width: 1.28em;
  height: 100%;
  background: url(../images/common/icon/icon_notice_white.svg) no-repeat center/contain;
  top: 0;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-hl .hlTxt::before, .top-importantNotice .top-importantNotice-hl .hlTxt::after {
    width: 1.4em;
  }
}
.top-importantNotice .top-importantNotice-hl .hlTxt::before {
  left: 0;
}
.top-importantNotice .top-importantNotice-hl .hlTxt::after {
  right: 0;
}
.top-importantNotice .top-importantNotice-posts {
  border: 3px solid var(--color_notice);
  border-top: none;
  border-radius: 0 0 20px 20px;
  background-color: #fff;
}
.top-importantNotice .top-importantNotice-posts > ul {
  font-size: 20px;
  padding: 0.5em 1.5em;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-posts > ul {
    font-size: 18px;
    padding: 0.25em 0.5em;
  }
}
.top-importantNotice .top-importantNotice-posts > ul > li {
  font-size: inherit;
  border-bottom: 1px dotted var(--color_notice);
}
.top-importantNotice .top-importantNotice-posts > ul > li > a {
  display: grid;
  grid-template-columns: 6.75em 1fr;
  width: 100%;
  font-size: inherit;
  color: var(--color_font);
  font-size: inherit;
  text-decoration: none;
  padding: 0.7em 0.9em;
  -webkit-transition: background-color 0.2s ease-in;
  transition: background-color 0.2s ease-in;
  border-radius: 0.25em;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-posts > ul > li > a {
    grid-template-columns: 100%;
    gap: 0.25em 0;
    padding: 0.5em 0.25em;
  }
}
.top-importantNotice .top-importantNotice-posts > ul > li > a .date {
  display: block;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  text-indent: 0em;
}
@media only screen and (max-width: 1024px) {
  .top-importantNotice .top-importantNotice-posts > ul > li > a .date {
    font-size: 16px;
  }
}
.top-importantNotice .top-importantNotice-posts > ul > li > a .title {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.09em;
  text-indent: 0em;
}
.top-importantNotice .top-importantNotice-posts > ul > li > a:hover {
  opacity: 1 !important;
}
@media print, screen and (min-width: 1025px) {
  .top-importantNotice .top-importantNotice-posts > ul > li > a:hover {
    background-color: rgba(180, 60, 60, 0.1);
  }
}
.top-importantNotice .top-importantNotice-posts > ul > li:last-child {
  border-bottom: none;
}

/* NEWS
============================================================ */
.top-news {
  position: relative;
  padding: 33px 0 120px;
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .top-news {
    padding: 16px 0 80px;
  }
}
.top-news::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: calc(100% + max(350px, 50vh));
  height: calc(100% + max(350px, 50dvh));
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f5f3));
  background: -webkit-linear-gradient(#fff 0%, #f0f5f3 100%);
  background: linear-gradient(#fff 0%, #f0f5f3 100%);
  z-index: 0;
}
@media only screen and (max-width: 1024px) {
  .top-news::before {
    height: calc(100% + max(300px, 50vh));
    height: calc(100% + max(300px, 50dvh));
  }
}
.top-news .com-news-list {
  margin: 39px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-news .com-news-list {
    margin: 29px 0 0;
  }
}
.top-news .com-news-list > ul {
  gap: 13px 0;
  border: none;
}
.top-news .com-news-list > ul > li {
  display: block;
  border: none;
}
.top-news .com-news-list > ul > li > a {
  display: grid;
  border: 1px solid transparent;
  border-radius: 2.25em;
  overflow: hidden;
  background-color: #fff;
  padding: 1.48em 3em 1.48em 2.25em;
  -webkit-transition: border-color 0.2s ease-in;
  transition: border-color 0.2s ease-in;
}
@media only screen and (max-width: 1024px) {
  .top-news .com-news-list > ul > li > a {
    border-radius: 20px;
    padding: 0.85em 2.25em 0.9em 1.2em;
  }
}
.top-news .com-news-list > ul > li > a::after {
  width: 0.4em;
  right: 1.75em;
}
@media only screen and (max-width: 1024px) {
  .top-news .com-news-list > ul > li > a::after {
    right: 1.25em;
  }
}
@media print, screen and (min-width: 1025px) {
  .top-news .com-news-list > ul > li > a:hover {
    border-color: var(--color_main);
  }
  .top-news .com-news-list > ul > li > a:hover::after {
    right: 1em;
  }
}
.top-news .top-news-moreBtn {
  margin: 41px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-moreBtn {
    margin-top: 51px;
  }
}
.top-news .com-noneText {
  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%;
  font-size: 1.1rem;
  height: 100%;
  text-align: center;
  letter-spacing: var(--letterSpacing_base);
  text-indent: var(--letterSpacing_base);
  opacity: 0.8;
}

/* SECTION GROUP 01
============================================================ */
.top-sectionGroup__01 {
  padding: 120px 0 190px;
  background: -webkit-linear-gradient(45deg, #c4e0bf 0%, #c2d7ed 100%);
  background: linear-gradient(45deg, #c4e0bf 0%, #c2d7ed 100%);
  /***** SUB SECTION *****/
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 {
    padding: 80px 0 114px;
  }
}
.top-sectionGroup__01Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 90px 0;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01Inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px 0;
  }
}
.top-sectionGroup__01 .subsection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0 0;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 800px;
  }
}
.top-sectionGroup__01 .subsection .pict {
  position: relative;
  display: block;
  width: min(53.34%, 640px);
  min-height: 400px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  border-radius: 30px;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .pict {
    width: 94%;
    max-width: 500px;
    height: auto;
    min-height: initial;
    aspect-ratio: 315/197;
    border-radius: 20px;
  }
}
.top-sectionGroup__01 .subsection .pict > img {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.top-sectionGroup__01 .subsection .txt {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  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;
  background-color: #fff;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  border-radius: 0 30px 30px 0;
  padding: 40px 40px 40px 20px;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .txt {
    width: 100%;
    -webkit-transform: none;
            transform: none;
    border-radius: 0 0 20px 20px;
    padding: 30px 15px 59px;
  }
}
.top-sectionGroup__01 .subsection .txt::before {
  content: "";
  position: absolute;
  display: block;
  width: min(14.29%, 80px);
  height: 100%;
  top: 0;
  left: 1px;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  background-color: #fff;
  border-radius: 30px 0 0 30px;
  pointer-events: none;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .txt::before {
    width: 100%;
    height: clamp(87px, 27.2vw, 156px);
    top: 1px;
    left: 0;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
    border-radius: 20px 20px 0 0;
  }
}
.top-sectionGroup__01 .subsection .txt__hl {
  font-size: 35px;
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .txt__hl {
    font-size: clamp(23px, 7.2vw, 30px);
  }
}
.top-sectionGroup__01 .subsection .txt__description {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6em;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-align: center;
  margin: 30px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .txt__description {
    font-size: clamp(15px, 4.8vw, 19px);
    line-height: 1.65em;
    margin-top: 18px;
  }
}
.top-sectionGroup__01 .subsection .txt__moreBtn {
  margin: 39px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-sectionGroup__01 .subsection .txt__moreBtn {
    margin-top: 29px;
  }
}
@media print, screen and (min-width: 1025px) {
  .top-sectionGroup__01 .subsection:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .top-sectionGroup__01 .subsection:nth-child(even) .pict {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  .top-sectionGroup__01 .subsection:nth-child(even) .txt {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    border-radius: 30px 0 0 30px;
    padding: 40px 20px 40px 40px;
  }
  .top-sectionGroup__01 .subsection:nth-child(even) .txt::before {
    left: auto;
    right: 1px;
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
    border-radius: 0 30px 30px 0;
  }
}

/* GUIDE
============================================================ */
/* RECEPTION
============================================================ */
/* CATCH COPY SLIDER
============================================================ */
.top-catchCopySlider {
  width: 3100px;
  margin-top: -43px;
  padding: 0 0 170px;
}
@media only screen and (max-width: 1024px) {
  .top-catchCopySlider {
    padding-bottom: 150px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-catchCopySlider {
    width: 2200px;
    margin-top: -30px;
  }
}
@media only screen and (max-width: 599px) {
  .top-catchCopySlider {
    width: 1830px;
    margin-top: -25px;
  }
}
.top-catchCopySlider .splide__slide {
  display: block;
  color: #E7F5F3;
  font-family: var(--fontFamily_sub_en);
  font-size: 85px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: 0em;
  font-style: italic;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-catchCopySlider .splide__slide {
    font-size: 60px;
  }
}
@media only screen and (max-width: 599px) {
  .top-catchCopySlider .splide__slide {
    font-size: 50px;
  }
}