@charset "UTF-8";
/* var(--vw) を使う clamp を生成 */
.top-section__title {
  margin: 0 auto;
  font-size: clamp(18px, calc(15.8873239437px + (0.5633802817 * var(--vw))), 24px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-columns: 1.5em auto;
  grid-template-rows: auto 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0%;
  grid-auto-flow: row;
  grid-template-areas: ". top-section__titleJa" ". top-section__titleEn";
}
@media (max-width: 767px) {
  .top-section__title {
    grid-template-columns: 2.25em auto;
  }
}

.top-section__titleJa {
  grid-area: top-section__titleJa;
}

.top-section__titleEn {
  grid-area: top-section__titleEn;
}

.top-section__title--hasIcon {
  position: relative;
}
.top-section__title--hasIcon::before {
  content: "";
  margin-top: 0.5em;
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url(../img/common/icon_title.svg);
  mask-image: url(../img/common/icon_title.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-green);
}
@media (max-width: 767px) {
  .top-section__title--hasIcon::before {
    width: 1.75em;
    height: 1.75em;
  }
}

.top-section__titleJa {
  font-size: clamp(32px, calc(30.5915492958px + (0.3755868545 * var(--vw))), 36px);
  font-weight: 700;
  font-family: var(--font-maru);
  color: var(--color-blue);
}

.top-section__titleEn {
  font-size: 17px;
  font-weight: 500;
  font-family: var(--font-en);
  color: var(--color-blue);
}

/***********************
* 背景
***********************/
.l-top-wave--type1 {
  position: relative;
  padding-top: 10%;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .l-top-wave--type1 {
    padding-top: 23.3830845771%;
    padding-bottom: 50px;
  }
}
.l-top-wave--type1::before {
  content: "";
  display: block;
  padding-top: 55px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  background: url(../img/common/bg_blue2.png) no-repeat top left/100%;
  -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave01.svg);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, top center;
  -webkit-mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave01.svg);
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, top center;
  mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (max-width: 767px) {
  .l-top-wave--type1::before {
    background-image: url(../img/common/bg_blue2_sp.png);
    -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave01_sp.svg);
    mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave01_sp.svg);
  }
}

.l-top-wave--type2 {
  position: relative;
  padding-top: 10%;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .l-top-wave--type2 {
    padding-top: 31%;
    padding-bottom: 50px;
  }
}
.l-top-wave--type2::before {
  content: "";
  display: block;
  padding-top: 55px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  background: url(../img/common/bg_blue2.png) no-repeat top left/100%;
  -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave02.svg);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, top center;
  -webkit-mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave02.svg);
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, top center;
  mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (max-width: 767px) {
  .l-top-wave--type2::before {
    background-image: url(../img/common/bg_blue2_sp.png);
    -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave02_sp.svg);
    mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave02_sp.svg);
  }
}

.l-top-dot--type01 {
  position: relative;
  padding-top: 10%;
  padding-bottom: calc(10% + 80px);
}
@media (max-width: 767px) {
  .l-top-dot--type01 {
    padding-top: 24.8756218905%;
    padding-bottom: calc(15.92039801% + 50px);
  }
}
.l-top-dot--type01::before {
  content: "";
  display: block;
  padding-top: 55px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(39, 134, 222, 0.15);
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2px);
  background-position: 0 0;
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave03.svg), url(../img/top/top_wave03_fill.svg);
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-position: 0 0, top center, bottom center;
  -webkit-mask-size: 100% 100%, 100% auto, 100% auto;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave03.svg), url(../img/top/top_wave03_fill.svg);
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-position: 0 0, top center, bottom center;
  mask-size: 100% 100%, 100% auto, 100% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (max-width: 767px) {
  .l-top-dot--type01::before {
    -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave03_sp.svg), url(../img/top/top_wave03_bottom_fill_sp.svg);
    mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave03_sp.svg), url(../img/top/top_wave03_bottom_fill_sp.svg);
  }
}

.l-top-dot--type02 {
  position: relative;
  padding-top: 10%;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .l-top-dot--type02 {
    padding-top: 23.3830845771%;
    padding-bottom: 50px;
  }
}
.l-top-dot--type02::before {
  content: "";
  display: block;
  padding-top: 55px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(39, 134, 222, 0.15);
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2px);
  background-position: 0 0;
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave04.svg);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, top center;
  -webkit-mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave04.svg);
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, top center;
  mask-size: 100% 100%, 100% auto;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (max-width: 767px) {
  .l-top-dot--type02::before {
    -webkit-mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave04_sp.svg);
    mask-image: linear-gradient(#fff, #fff), url(../img/top/top_wave04_sp.svg);
  }
}

/***********************
* mv
************************/
.mv {
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.mv .l-inner {
  padding: 50px 0;
  width: 92.1428571429%;
  max-width: 1290px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: auto 51.5503875969%;
  grid-template-rows: auto auto;
  gap: 0px 4%;
  grid-template-areas: "mv__logo mv__slider" "mv__body mv__slider";
}
.mv .l-inner .mv__logo {
  grid-area: mv__logo;
}
.mv .l-inner .mv__body {
  grid-area: mv__body;
}
.mv .l-inner .mv__slider {
  grid-area: mv__slider;
}
@media (max-width: 767px) {
  .mv .l-inner {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "mv__logo" "mv__slider" "mv__body";
    padding-top: 18px;
  }
}

.mv__logo {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: 90%;
}
@media (max-width: 767px) {
  .mv__logo {
    width: 100%;
    max-width: 450px;
  }
}
.mv__logo img {
  width: 100%;
}

/* =========================
メインビジュアル：mvSlider
========================= */
.mvSlider {
  position: relative;
  align-self: center;
}

.mv__slider {
  padding: 10% 0;
}
@media (max-width: 767px) {
  .mv__slider {
    padding: 10% 0 4%;
  }
}

.mvSlider__slide {
  position: relative;
  margin: 0 auto;
  width: 80%;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 665/508;
}

.mvSlider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ページネーション */
.mvSlider__pagination {
  margin-top: 30px;
  position: static;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  text-align: center;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .mvSlider__pagination {
    margin-top: 8px;
  }
}

.mvSlider .swiper-pagination-bullet {
  opacity: 1;
  background-color: #C9C9C9;
}

.mvSlider .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .mvSlider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 11px;
}
@media (max-width: 767px) {
  .mvSlider .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .mvSlider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
  }
}

.mv__slider .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
}
@media (max-width: 767px) {
  .mv__slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

.mvSlider .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color-blue);
}

.mv__lead {
  margin: 50px auto 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(14px, calc(12.9436619718px + (0.2816901408 * var(--vw))), 17px);
  line-height: 180%;
  text-align: center;
}
@media (max-width: 767px) {
  .mv__lead {
    margin-top: 0;
    line-height: 170%;
  }
}

.mv__link {
  position: relative;
  margin: 50px auto 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 767px) {
  .mv__link {
    margin-top: 12px;
  }
}
.mv__link::before {
  position: absolute;
  left: -8em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  content: "";
  display: block;
  width: 141px;
  aspect-ratio: 141/207;
  background: url(../img/top/mv_illust01.svg) no-repeat top/contain;
}
@media (max-width: 767px) {
  .mv__link::before {
    left: -32%;
    width: 76px;
  }
}
.mv__link::after {
  position: absolute;
  right: -8em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  content: "";
  display: block;
  background: url(../img/top/mv_illust02.svg) no-repeat top/contain;
  width: 108px;
  aspect-ratio: 108/200;
}
@media (max-width: 767px) {
  .mv__link::after {
    right: -32%;
    width: 58px;
  }
}

.mv__button {
  display: block;
  padding: 2em 1.25em 2em 1.25em;
  background-color: var(--color-green);
  color: #fff;
  border-radius: 100px;
  width: 400px;
  text-align: center;
  font-size: clamp(14px, calc(13.2957746479px + (0.1877934272 * var(--vw))), 16px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media (max-width: 767px) {
  .mv__button {
    padding: 1.5em 1.5em 1.5em 1.5em;
    max-width: 237px;
    width: 100%;
  }
}
.mv__button span {
  position: relative;
  padding-right: 3em;
  display: inline-block;
  text-align: center;
}
.mv__button span::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  background: #fff;
  -webkit-mask-image: url(../img/common/button_arrow.svg);
          mask-image: url(../img/common/button_arrow.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.mv__button:hover, .mv__button:focus {
  background-color: #fff;
  color: var(--color-green);
}
.mv__button:hover span::after, .mv__button:focus span::after {
  background: var(--color-green);
}

/***********************
* topics
************************/
.top-topics {
  margin: 0 auto 0;
  max-width: 894px;
  padding: 1em 0 1em 1em;
  background-color: #fff;
}
@media (max-width: 767px) {
  .top-topics {
    position: relative;
    z-index: 2;
    padding: 0.75em 0 0.75em 1em;
    width: 93.7810945274%;
  }
}

.top-topics li {
  display: flex;
  align-items: center;
  gap: 0 1em;
}
@media (max-width: 767px) {
  .top-topics li {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 0px 1em;
    grid-template-areas: "top-topics__title top-topics__label top-topics__date" "top-topics__link top-topics__link top-topics__link";
  }
  .top-topics li .top-topics__title {
    grid-area: top-topics__title;
  }
  .top-topics li .top-topics__label {
    grid-area: top-topics__label;
  }
  .top-topics li .top-topics__link {
    grid-area: top-topics__link;
  }
  .top-topics li .top-topics__date {
    grid-area: top-topics__date;
  }
}

.top-topics__title {
  position: relative;
  padding-right: 1em;
  display: inline-block;
  font-size: clamp(19px, calc(17.2394366197px + (0.4694835681 * var(--vw))), 24px);
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--color-blue);
}
.top-topics__title::before {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  height: 55%;
  width: 1px;
  background-color: #A7A7A7;
}

.top-topics__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 1em;
  flex-grow: 1;
}
.top-topics__link:hover, .top-topics__link:focus {
  text-decoration: underline;
}

.top-topics__date {
  font-size: clamp(15px, calc(13.2394366197px + (0.4694835681 * var(--vw))), 20px);
  font-family: var(--font-en);
  line-height: 220%;
  letter-spacing: -0.05em;
  color: var(--color-blue);
  width: 5em;
}
.top-topics__label {
  font-size: clamp(10px, calc(8.9436619718px + (0.2816901408 * var(--vw))), 13px);
  font-weight: 500;
  letter-spacing: 0.05em;
  width: 7em;
  padding: 0.1em 1em;
  display: inline-block;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background-color: var(--color-red1);
  word-break: nowrap;
}

.top-topics__cat-ncat01 {
  background-color: #F1675F;
}

.top-topics__cat-ncat02 {
  background-color: #7ACB70;
}

.top-topics__cat-ncat03 {
  background-color: #8288FF;
}

.top-topics__text {
  position: relative;
  padding-right: 4.5em;
  font-size: clamp(13px, calc(11.9436619718px + (0.2816901408 * var(--vw))), 16px);
  line-height: 180%;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 767px) {
  .top-topics__text {
    -webkit-line-clamp: 1;
  }
}
.top-topics__text::after {
  position: absolute;
  left: auto;
  right: 2.5em;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url(../img/common/arrow_left.svg);
          mask-image: url(../img/common/arrow_left.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--color-blue);
}
@media (max-width: 767px) {
  .top-topics__text::after {
    right: 1.5em;
  }
}

/***********************
* aboutus
************************/
.top-aboutus {
  margin-top: -9%;
}
@media (max-width: 767px) {
  .top-aboutus {
    margin-top: -40%;
    padding-top: 32%;
    padding-bottom: 0;
  }
}

.top-aboutus__main {
  position: relative;
  padding-top: 5%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 0px 4.5%;
  grid-template-areas: "top-aboutus__deco01 top-aboutus__title" "top-aboutus__deco01 top-aboutus__lead";
}
@media (max-width: 767px) {
  .top-aboutus__main {
    padding-top: 19%;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    gap: 0px 4.5%;
    grid-template-areas: "top-aboutus__title" "top-aboutus__lead" "top-aboutus__deco01";
  }
}
.top-aboutus__main .top-aboutus__title {
  grid-area: top-aboutus__title;
}
.top-aboutus__main .top-aboutus__lead {
  grid-area: top-aboutus__lead;
}
.top-aboutus__main .top-aboutus__deco01 {
  grid-area: top-aboutus__deco01;
}
.top-aboutus__main::before {
  position: absolute;
  top: -0.5em;
  left: 0;
  content: "About us";
  font-size: clamp(85px, calc(65.6338028169px + (5.1643192488 * var(--vw))), 140px);
  font-family: var(--font-en);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 767px) {
  .top-aboutus__main::before {
    top: 0;
  }
}

.top-aboutus__title {
  position: relative;
  font-size: clamp(30px, calc(27.1830985915px + (0.7511737089 * var(--vw))), 38px);
  font-family: var(--font-maru);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-blue);
}
.top-aboutus__title::before {
  position: absolute;
  right: 11%;
  top: -26%;
  z-index: -1;
  content: "";
  display: block;
  width: 29%;
  height: auto;
  aspect-ratio: 230/126;
  background: url(../img/top/about_us_illust02.svg) no-repeat center/contain;
}
@media (max-width: 960px) {
  .top-aboutus__title::before {
    display: none;
  }
}
@media (max-width: 767px) {
  .top-aboutus__title::before {
    display: none;
  }
}

.top-aboutus__lead {
  margin-top: 36px;
}
@media (max-width: 767px) {
  .top-aboutus__lead {
    margin-top: 25px;
  }
}

.top-aboutus__deco01 {
  position: relative;
  margin-left: auto;
  z-index: 1;
  align-self: center;
}
@media (max-width: 767px) {
  .top-aboutus__deco01 {
    margin: 40px auto 0;
    width: 48%;
  }
}

/***********************
*アレルギー疾患を知る
************************/
.top-know .l-inner {
  position: relative;
}
@media (max-width: 767px) {
  .top-know .l-inner {
    width: 100%;
  }
}

.top-knowBox {
  position: relative;
  padding: 142px 0 65px;
  border-radius: var(--radius-lg);
  border: var(--borderLine);
  background-color: #fff;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top-knowBox {
    --radius-lg:0;
    padding: 100px 0 56px;
  }
}

.top-know__title {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 1em 0 2em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 424px;
  aspect-ratio: 424/174;
  text-align: center;
  -webkit-mask-image: url(../img/top/bg_title_know.svg);
          mask-image: url(../img/top/bg_title_know.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background: url(../img/common/bg_footer.png);
}
@media (max-width: 767px) {
  .top-know__title {
    top: -71px;
    width: 94%;
    max-width: 338px;
    -webkit-mask-image: url(../img/top/bg_title_know_sp.svg);
            mask-image: url(../img/top/bg_title_know_sp.svg);
    aspect-ratio: 338/155;
  }
}

.top-know__titleJa {
  font-family: var(--font-maru);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(24px, calc(22.5915492958px + (0.3755868545 * var(--vw))), 28px);
  line-height: 170%;
  text-align: center;
  letter-spacing: 0.15em;
  color: #FFFFFF;
}

.top-know__titleEn {
  font-family: var(--font-en);
  font-size: clamp(15px, calc(14.2957746479px + (0.1877934272 * var(--vw))), 17px);
  color: rgba(255, 255, 255, 0.5);
}

.top-knowCards {
  margin: 0 auto;
  width: 86.75%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 4%;
}
@media (max-width: 767px) {
  .top-knowCards {
    width: 94%;
    grid-template-columns: repeat(2, 1fr);
  }
}

.top-knowCard__link {
  display: block;
}
.top-knowCard__link:hover .top-knowCard__thumb img, .top-knowCard__link:focus .top-knowCard__thumb img {
  filter: brightness(80%);
}

.top-knowCard__title {
  position: relative;
  font-size: clamp(16px, calc(13.8873239437px + (0.5633802817 * var(--vw))), 22px);
  font-weight: 600;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-blue);
}
.top-knowCard__title::after {
  position: absolute;
  left: auto;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url(../img/common/arrow_left.svg);
          mask-image: url(../img/common/arrow_left.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--color-blue);
}
@media (max-width: 767px) {
  .top-knowCard__title::after {
    right: 0;
    width: 1.5em;
    height: 1.5em;
  }
}

.top-knowCard__thumb {
  margin-top: 1em;
  border-radius: 32px;
  aspect-ratio: 4/3;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top-knowCard__thumb {
    aspect-ratio: 180/162;
    border-radius: 16px;
  }
}
.top-knowCard__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-knowBox_button {
  margin-top: 40px;
  text-align: center;
}
/***********************
*Pickup
************************/
.pickupBnr {
  margin-top: 60px;
}
@media (max-width: 767px) {
  .pickupBnr {
    margin: 24px auto 0;
    width: 94%;
  }
}

.pickupBnr__title {
  font-size: clamp(33px, calc(33px + (0 * var(--vw))), 33px);
  text-align: center;
  font-family: var(--font-en);
  text-transform: capitalize;
  color: var(--color-blue);
}

.pickupBnrList {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 4%;
}
@media (max-width: 767px) {
  .pickupBnrList {
    margin-top: 30px;
    grid-template-columns: repeat(1, 1fr);
  }
}

.pickupBnrList__link {
  display: block;
}
.pickupBnrList__link img {
  width: 100%;
  height: auto;
}
.pickupBnrList__link:hover img, .pickupBnrList__link:focus img {
  filter: brightness(80%);
}

.pickupBnrList__item:first-child:last-child {
  grid-column: 2;
}
.pickupBnrList__item:nth-child(1) {
  transform: translateX(calc(50% + 20px));
}
@media (max-width: 767px) {
  .pickupBnrList__item:nth-child(1) {
    transform: none;
  }
}
.pickupBnrList__item:nth-child(2) {
  transform: translateX(calc(50% + 20px));
}
@media (max-width: 767px) {
  .pickupBnrList__item:nth-child(2) {
    transform: none;
  }
}

/***********************
*アレルギーの基礎知識
************************/
.top-box__title {
  font-size: clamp(24px, calc(22.5915492958px + (0.3755868545 * var(--vw))), 28px);
  text-align: center;
}

.top-box__titleJa {
  font-size: clamp(24px, calc(22.5915492958px + (0.3755868545 * var(--vw))), 28px);
  font-weight: 700;
  font-family: var(--font-maru);
}

.top-box__titleEn {
  font-family: var(--font-en);
  font-size: clamp(15px, calc(14.2957746479px + (0.1877934272 * var(--vw))), 17px);
  color: rgba(255, 255, 255, 0.5);
}

.top-boxCards {
  margin: 45px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 1em;
  max-width: 1200px;
  width: 92%;
}
.top-boxCards .c-card__list {
  padding: 0.5em 1.25em 1em;
}
.top-boxCards .c-card__title {
  min-height: 7em;
}
.top-boxCards .c-card__thumb {
  margin-top: auto;
}
@media (max-width: 767px) {
  .top-boxCards {
    margin: 28px auto 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 3.5%;
  }
  .top-boxCards .c-card__link {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0px 0%;
    grid-template-areas: "c-card__title c-card__title" "c-card__thumb c-card__list";
  }
  .top-boxCards .c-card__title {
    grid-area: c-card__title;
  }
  .top-boxCards .c-card__thumb {
    grid-area: c-card__thumb;
  }
  .top-boxCards .c-card__list {
    grid-area: c-card__list;
  }
}

/***********************
* お役立ち情報　
************************/
.topBookend {
  padding: 48px 0;
}
.topBookend .l-inner {
  max-width: 1061px;
}
@media (max-width: 767px) {
  .topBookend .l-inner {
    width: 100%;
  }
}

.topBookend__head {
  display: flex;
  align-items: center;
  gap: 0 6.5975494816%;
}
@media (max-width: 767px) {
  .topBookend__head {
    flex-direction: column;
    gap: 40px 0;
  }
}

.topBookend__title {
  display: grid;
  place-content: center;
  width: 100%;
  padding: 1em 0.5em;
  padding-bottom: 4%;
  width: 31.3854853911%;
  aspect-ratio: 333/255;
  font-size: clamp(24px, calc(22.5915492958px + (0.3755868545 * var(--vw))), 28px);
  text-align: center;
  -webkit-mask-image: url(../img/top/bg_title_bookend.svg);
          mask-image: url(../img/top/bg_title_bookend.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background: url(../img/common/bg_footer.png);
}
@media (max-width: 767px) {
  .topBookend__title {
    width: 90%;
    max-width: 285px;
    padding-bottom: 13%;
  }
}

.topBookend__titleJa {
  font-family: var(--font-maru);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(24px, calc(22.5915492958px + (0.3755868545 * var(--vw))), 28px);
  line-height: 170%;
  text-align: center;
  letter-spacing: 0.15em;
  color: #FFFFFF;
}

.topBookend__titleEn {
  font-family: var(--font-en);
  font-size: clamp(15px, calc(14.2957746479px + (0.1877934272 * var(--vw))), 17px);
  color: rgba(255, 255, 255, 0.5);
}

.topBookend__lead {
  width: 61.1687087653%;
}
@media (max-width: 767px) {
  .topBookend__lead {
    width: 92%;
  }
}

.bookShowcase {
  display: grid;
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 767px) {
  .bookShowcase {
    margin-top: 40px;
  }
}

/* 画像側 */
.bookShowcase__mediaSlide.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1;
}

.bookShowcase__mediaSlide.swiper-slide-prev,
.bookShowcase__mediaSlide.swiper-slide-next {
  transform: scale(0.8) !important;
}

.bookShowcase__mediaSlide.swiper-slide-next {
  transform-origin: right;
}

.bookShowcase__mediaSlide.swiper-slide-prev {
  transform-origin: left;
}

.bookShowcase__mediaSlide {
  transform: scale(0.6) !important;
  opacity: 0.4;
  background-color: #fff;
}

.bookShowcase__media {
  position: relative;
  width: 100%;
  --active-half: 100px;
  --gap: 16px;
  --nav-size: 86px;
}
@media (max-width: 767px) {
  .bookShowcase__media {
    --nav-size: 48px;
    --active-half: 93px;
    --gap: 32px;
  }
}

.bookShowcase__media--link {
  display: block;
}

.bookShowcase__mediaSlide img {
  display: block;
  width: 100%;
  aspect-ratio: 26/37;
  -o-object-fit: cover;
     object-fit: cover;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

/* book：ナビ＆ページネーション */
.bookShowcase__pagination {
  margin-top: 36px;
  text-align: center;
}

.bookShowcase__media .swiper-pagination-bullet {
  opacity: 1;
  background-color: #C9C9C9;
}

.bookShowcase__media .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .bookShowcase__media .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 11px;
}
@media (max-width: 767px) {
  .bookShowcase__media .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .bookShowcase__media .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
  }
}

.bookShowcase__media .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
}
@media (max-width: 767px) {
  .bookShowcase__media .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

.mvSlider .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color-blue);
}

.bookShowcase__nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  width: var(--nav-size);
  aspect-ratio: 86/116;
  cursor: pointer;
}
@media (max-width: 767px) {
  .bookShowcase__nav {
    top: 42%;
  }
}

.bookShowcase__nav--prev {
  left: calc(50% - var(--active-half) - var(--gap) - var(--nav-size));
  color: #fff;
  background: url(../img/top/bookend_nav_left.svg) no-repeat center/contain;
}

.bookShowcase__nav--next {
  right: calc(50% - var(--active-half) - var(--gap) - var(--nav-size));
  color: #fff;
  background: url(../img/top/bookend_nav_right.svg) no-repeat center/contain;
}

.bookShowcase .swiper-pagination-bullet {
  opacity: 1;
  background-color: #C9C9C9;
}

.bookShowcase .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color-blue);
}

/* テキスト側 */
.bookShowcase__foot {
  display: flex;
  gap: 1em;
  margin: 0 auto;
  width: 92%;
  max-width: 759px;
}
@media (max-width: 767px) {
  .bookShowcase__foot {
    flex-direction: column;
    width: 81%;
  }
}

.bookShowcase__content {
  width: 100%;
}

.bookShowcase__item {
  display: none;
  min-height: 10em;
}
@media (max-width: 767px) {
  .bookShowcase__item {
    min-height: 8em;
  }
}

.bookShowcase__item.is-active {
  display: block;
}

.bookShowcase__link {
  display: block;
}

.bookShowcase__title {
  position: relative;
  padding-bottom: 0.5em;
  color: var(--color-blue);
  font-size: clamp(18px, calc(15.8873239437px + (0.5633802817 * var(--vw))), 24px);
  font-weight: 700;
  line-height: 190%;
}
.bookShowcase__title::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-blue);
}
@media (max-width: 767px) {
  .bookShowcase__title::after {
    width: 30px;
  }
}

.bookShowcase__text {
  margin-top: 1em;
  color: var(--color-blue);
  font-size: clamp(13px, calc(12.2957746479px + (0.1877934272 * var(--vw))), 15px);
}

.bookShowcase_button > * {
  width: 194px;
}
@media (max-width: 767px) {
  .bookShowcase_button {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .bookShowcase {
    grid-template-columns: 1fr;
  }
}
/***********************
* コンテンツ
************************/
.topContents__head {
  display: flex;
}
@media (max-width: 767px) {
  .topContents__head {
    display: block;
  }
}

.topContents__title {
  margin-left: 0;
  text-align: left;
}

.topContents__lead {
  width: 75.5833333333%;
}
@media (max-width: 767px) {
  .topContents__lead {
    margin-top: 40px;
    width: 100%;
  }
}

.topContentsList {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 50px auto 0;
  max-width: 1056px;
}
@media (max-width: 767px) {
  .topContentsList {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    margin-top: 30px;
    max-width: 326px;
  }
}

.topContentsList__item {
  position: relative;
  padding-bottom: 29.1666666667%;
}
@media (max-width: 767px) {
  .topContentsList__item {
    padding-bottom: 8%;
  }
}

.topContentsList__link {
  display: grid;
  place-content: center;
  aspect-ratio: 1/1;
  background: url(../img/top/bg_contents.png) no-repeat center/contain;
}
.topContentsList__link:hover, .topContentsList__link:focus {
  opacity: 0.8;
}

.topContentsList__title {
  display: flex;
  flex-direction: column;
  padding-bottom: 2em;
}
@media (max-width: 767px) {
  .topContentsList__title {
    padding-bottom: 7em;
  }
}

.topContentsList__titleJa {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, calc(25.2957746479px + (0.1877934272 * var(--vw))), 28px);
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.15em;
  color: var(--color-blue);
}

.topContentsList__titleEn {
  font-family: var(--font-en);
  font-size: clamp(15px, calc(14.2957746479px + (0.1877934272 * var(--vw))), 17px);
  color: rgba(var(--color-blueRgb), 0.5);
  text-align: center;
}

.topContentsList__deco {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
}
@media (max-width: 767px) {
  .topContentsList__deco {
    width: 60%;
  }
}
.topContentsList__deco img {
  width: 100%;
}

/***********************
*ピックアップ動画
************************/
.topMovies {
  padding: 80px 0;
}
@media (max-width: 767px) {
  .topMovies {
    padding: 40px 0;
  }
}

.topMovies__box {
  padding: 80px 1em;
}
@media (max-width: 767px) {
  .topMovies__box {
    padding: 40px 1em;
  }
}

.topMovies__head {
  display: flex;
  margin: 0 auto;
  max-width: 950px;
  gap: 1em 2em;
}
@media (max-width: 767px) {
  .topMovies__head {
    gap: 2em 1em;
    flex-direction: column;
  }
}

.topMovies__title {
  margin-left: 0;
  margin-right: 0;
}

.topMovies__list {
  margin: 78px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em 4%;
  max-width: 950px;
}
@media (max-width: 767px) {
  .topMovies__list {
    margin-top: 35px;
    gap: 2em 4%;
    grid-template-columns: repeat(1, 1fr);
    width: 88%;
  }
}

.topMovies__button {
  margin-top: 76px;
  text-align: center;
}
@media (max-width: 767px) {
  .topMovies__button {
    margin-top: 40px;
  }
}
/***********************
*お知らせ
************************/
.topNews.is-beforeFooter {
  padding-bottom: calc(10% + 80px);
}

.topNews__wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: auto 58.5833333333%;
  grid-template-rows: auto 1fr;
  gap: 50px 9.5%;
  grid-template-areas: "topNews__title topNewsArchive__list" "topNews__button topNewsArchive__list";
}
.topNews__wrapper .topNews__title {
  grid-area: topNews__title;
}
.topNews__wrapper .topNewsArchive__list {
  grid-area: topNewsArchive__list;
}
.topNews__wrapper .topNews__button {
  grid-area: topNews__button;
}
@media (max-width: 767px) {
  .topNews__wrapper {
    grid-template-columns: auto;
    grid-template-rows: 1fr;
    gap: 40px 0;
    grid-template-areas: "topNews__title" "topNewsArchive__list" "topNews__button";
  }
}

.topNews__title {
  margin-left: 0;
}

.topNews__button {
  text-align: center;
}
/*******************
* modal
*******************/
body.modal-open {
  overflow: hidden;
}

.is-modal-open {
  overflow: hidden;
}

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  position: relative;
  margin: 0 auto;
  padding: 30px 4%;
  width: 72%;
  max-width: 432px;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 2px solid #1D52BB;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
  border-radius: 28px;
}
@media (max-width: 767px) {
  .modal__container {
    width: 80%;
  }
}

.modal__header {
  font-size: clamp(18px, calc(16.5915492958px + (0.3755868545 * var(--vw))), 22px);
  text-align: center;
  color: var(--color-blue);
  font-family: var(--font-maru);
  font-weight: 700;
}

.modal__content {
  margin-top: 30px;
  font-size: clamp(14px, calc(13.2957746479px + (0.1877934272 * var(--vw))), 16px);
  width: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

* + .modal__button {
  margin-top: 20px;
}

.modal__button {
  position: relative;
  padding: 0.75em 1.25em;
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: var(--borderLine);
  border-radius: 38px;
  font-weight: 500;
  font-family: var(--font-ja);
  font-size: 15px;
  line-height: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--color-blue);
  width: 100%;
}
.modal__button:hover, .modal__button:focus {
  opacity: 0.6;
}

.modal__close {
  position: relative;
  margin: 30px auto 0;
  padding: 0.75em 1.25em;
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: var(--borderLine);
  border-radius: 38px;
  font-weight: 500;
  font-family: var(--font-ja);
  font-size: 15px;
  line-height: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.05em;
  color: var(--color-blue);
  background-color: #fff;
  width: 147px;
}
.modal__close:hover, .modal__close:focus {
  color: #fff;
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

/**************************\
  Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes mmslideIn {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5%);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5%);
  }
}
.micromodal-quest {
  display: none;
}

.micromodal-quest.is-open {
  display: block;
}

.micromodal-quest[aria-hidden=false] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-quest[aria-hidden=false] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-quest[aria-hidden=true] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-quest[aria-hidden=true] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-quest .modal__container,
.micromodal-quest .modal__overlay {
  will-change: transform;
}