@charset "UTF-8";
.container{
  overflow: hidden;
}
/* Intro---------------------------------------------------------------------------------------------- */
.labo-logo{
  margin: clamp(30px, 6vw, 60px) auto 24px;
  max-width: 720px;
}
.intro{
  overflow: hidden;
  background: linear-gradient(180deg, rgba(251, 250, 247, 1) 0%, rgba(245, 236, 222, 1) 100%);
}
.intro.general-section .inner{
  padding-bottom: clamp(80px, 12vw, 200px);
}
.intro .lead{
  margin: 1.2em 0;
  font-size: clamp(1.3rem, 2.25vw, 2rem);
}
.intro .tertiary-heading{
  margin-top: 2em;
  font-size: clamp(1.6rem, 2.67vw, 2.4rem);
  line-height: 1.8;
  letter-spacing: .1rem;
}
.slider-wrap{
  margin: clamp(80px, 12vw, 200px) calc(50% - 50vw) 0;
  width: 100vw;
  position: relative;
}
.intro-slider{
  width: 100%;
}
.intro-slider .slick-slider div {
  transition: none;
}
.intro-slider .slick-list{
  padding: 0 -20px;
  overflow: visible!important;
}
.intro-slider .slick-slide{
  margin: 0 20px;
  height: auto !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
.intro-slider .slick-slide:nth-child(even) {
  transform: translateY(40px);
}
.intro-slider .slick-slide:nth-child(odd) {
  transform: translateY(0);
}
.deco{
  position: absolute;
  z-index: 2;
}
.deco-01{
  width: min(27.8vw, 400px);
  top: -17vw;
  left: calc(160 / 1680 * -100vw);
}
.deco-02{
  width: min(35.8vw, 600px);
  top: -19vw;
  right: calc(288 / 1680 * -100vw);
}
.deco-03{
  width: min(42.3vw, 709px);
  top: -16vw;
  right: calc(140 / 1680 * -100vw);
}
.deco-04{
  width: min(28.2vw, 473px);
  top: -16vw;
  left: calc(134 / 1680 * -100vw);
}
@media screen and (max-width: 767px) {
  .intro .tertiary-heading{
    line-height: 1.6;
  }
  .deco-01{
    width: 160px;
    left: calc(56 / 375 * -100vw);
  }
  .deco-02{
    width: 200px;
    right: calc(96 / 375 * -100vw);
  }
  .deco-03{
    width: 180px;
    right: calc(33 / 375 * -100vw);
  }
  .deco-04{
    width: 165px;
    top: -23vw;
    left: calc(47/ 375 * -100vw);
  }
}

/* News---------------------------------------------------------------------------------------------- */
.news.general-section .inner{
  padding: clamp(60px, 12.5vw, 180px) 0 clamp(72px, 5.6vw, 80px);
}
.news-wrap{
  grid-template-columns: auto 1fr;
  gap: min(10.71vw, 120px);
}
.news-wrap .heading-wrap .secondary-heading{
  margin-bottom: .3em;
  font-size: clamp(1.45rem, 2.45vw, 2.2rem);
  font-weight: 500;
}
.news-wrap .heading-wrap .lead{
  margin-bottom: 0;
  font-family: var(--font-infant);
  font-size: clamp(.8rem, 1.34vw, 1.2rem);
}
.news-lists-wrap{
  padding-top: 26px;
}
.news-link{
  padding-bottom: clamp(1.75em, 2.95vw, 3em);
  margin-bottom: clamp(1.75em, 2.95vw, 3em);
  width: 100%;
  display: block;
  color: var(--color-bk);
  border-bottom: 1px solid #ccc;
}
.news-link:last-child{
  margin-bottom: 0;
}
.news-link:hover{
  color: var(--color-orange);
}
.news-lists{
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 20px;
  font-size: clamp(.9rem, 1.34vw, 1.2rem);
}
.news-ttl{
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .news-wrap {
    grid-template-columns: auto;
  }
  .news-wrap .heading-wrap .secondary-heading{
    margin-bottom: .1em;
  }
  .news-lists-wrap{
    padding-top: 0;
  }
  .news-lists{
    grid-template-columns: auto;
  }
}

/* Sec1---------------------------------------------------------------------------------------------- */
.sec .secondary-heading{
  margin-bottom: clamp(1.4em, 2.8vw, 2em);
}
.sec1{
  background: url(../images/top/sec1-bg.webp) no-repeat top center / cover;
  position: relative;
}
.sec1 .inner{
  padding: clamp(60px, 8.4vw, 120px) 0 clamp(80px, 11.2vw, 160px);
}
.heading-wrap .lead{
  margin-bottom: .6em;
  font-family: var(--font-zenkaku-gothic);
}
.sec1 .note{
  line-height: 1.8;
}
.sec1 .note + .note{
  margin-top: clamp(1.4em, 2.8vw, 2em);
}
.sec1 .note .large-text{
  margin: 0 -10px;
  font-size: 140%;
  font-weight: 500;
}
.sec1-lead{
  margin: 2.8em 0 0;
  font-size: clamp(1.3rem, 2.25vw, 2rem);
}
@media screen and (max-width: 767px) {
  .sec1 .note .large-text{
    font-size: 130%;
  }
}

/* Sec2---------------------------------------------------------------------------------------------- */
.sec2 .inner{
  padding: clamp(80px, 11.2vw, 160px) 0;
}
.sec2 .note + .note{
  margin-top: min(4.2vw, 3em);
}
.feature-lists{
  margin-top: clamp(60px, 16vw, 100px);
  justify-content: center;
  gap: clamp(20px, 5vw, 60px) 32px;
}
.feature-list-card{
  padding: clamp(24px, 3.2vw, 32px) 16px;
  width: calc(calc(100% - 64px) / 3);
  background: var(--color-wh);
  border: 3px solid var(--color-gold);
}
.list-heading-wrap{
  margin-bottom: clamp(1.8em, 2.56vw, 2.6em);
  padding-bottom: 1.8rem;
  position: relative;
}
.list-heading-wrap::after{
  content: "";
  width: calc(167 / 380 * 100%);
  height: 1px;
  background: var(--color-gold);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.list-num{
  margin-bottom: .3em;
  font-family: var(--font-infant);
  font-size: clamp(2.6rem, 4.25vw, 3.8rem);
}
.list-ttl{
  margin-bottom: .4em;
  font-size: clamp(1.3rem, 2.25vw, 2rem);
  font-weight: 500;
  letter-spacing: .1rem;
  line-height: 1.3;
}
.ls-s{
  margin: 0 -8px;
}
.list-lead{
  font-family: var(--font-infant);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: .1rem;
}
.feature-list-card .lead{
  margin-bottom: 0;
  line-height: 1.6;
}
.bg .list-heading-wrap::after{
  background: var(--color-wh);
}
.bg-navy{
  background: var(--color-navy2);
}
.bg-gray{
  background: var(--color-gray2);
}
.sec2-img{
  margin: clamp(60px, 8.4vw, 120px) auto 0;
  max-width: 680px;
}
@media screen and (max-width: 767px) {
  .feature-list-card{
    width: 100%;
  }
}

/* Sec3---------------------------------------------------------------------------------------------- */
.sec3{
  background: url(../images/top/sec3-bg.webp) no-repeat top center / cover;
}

/* Sec4---------------------------------------------------------------------------------------------- */
.sec4 .lead{
  margin-bottom: clamp(2em, 3.4vw, 2.4em);
}
.sec4-heading{
  margin-bottom: 1.6em;
  font-size: clamp(1.45rem, 2.45vw, 2.2rem);
  font-weight: 500;
  line-height: 1.3;
}
.sec4-img{
  margin-top: clamp(60px, 7vw, 100px);
}
.sec4 .lead{
  margin-top: min(4.2vw, 3em);
}
.sec4 .note{
  line-height: 1.8;
}

/* Bnr Area---------------------------------------------------------------------------------------------- */
.bnr-area{
  background: var(--color-orange);
}
.bnr-lists{
  gap: 24px 16px;
}
.bnr-item{
  flex: 1;
  position: relative;
}
.bnr-item::before{
  content: "";
  width: min(3.6vw, 48px);
  height: min(3.6vw, 48px);
  background: url(../images/common/icon-arrow.svg) center / cover;
  position: absolute;
  bottom: 8px;
  right: 8px;
  transition: all .3s ease-out;
}
.bnr-item a{
  width: 100%;
  display: block;
}
.bnr-item:hover::before{
  transform: rotate(-30deg);
}
@media screen and (max-width: 767px) {
  .bnr-item{
    flex: auto;
  }
  .bnr-item::before{
    width: 36px;
    height: 36px;
  }
}