:root {
  --c-text: #555;

  --gutter: clamp(16px, 2.8vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--c-text);
}
h1, h2, h3, h4, h5, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.bg-product { background: url(../img/product_bg.jpg) center / cover no-repeat; }

.hero__img {
  width: 100%;
  height: auto;
}

.lead {
  padding: clamp(24px, 4.17vw, 60px) var(--gutter) clamp(28px, 5vw, 73px);
}
.lead__title img,
.lead__body img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.lead__title { margin-top: 10px; }
.lead__title img { max-width: 555px; }
.lead__body img { max-width: 590px; }
.lead__body {
  margin-top: calc(clamp(11px, 2.31vw, 33px) + 5px);
}

.section-ttl {
  display: grid;
  place-items: center;
  height: 76px;
  padding: 0 var(--gutter);
  background: url(../img/ttl_bg.svg) center / cover no-repeat;
}
.section-ttl img {
  width: auto;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  object-fit: contain;
}

.lineup__desc {
  padding: clamp(16px, 2.53vw, 37px) var(--gutter) 0;
}
.lineup__desc img {
  width: 570px;
  margin: 0 auto;
}
.lineup__list {
  --lineup-gap: clamp(24px, 8.68vw, 125px);
  --lineup-free: max(0px, (100vw - var(--gutter) * 2 - 698px - var(--lineup-gap) - 20px) / 2);
  --lineup-btn-over: min(var(--gutter) - 8px + var(--lineup-free), var(--lineup-gap) / 2 - 4px);
  padding: 32px var(--gutter) 50px;
  display: flex;
  justify-content: center;
  gap: var(--lineup-gap);
}
.lineup__item {
  flex: 0 1 304px;
  min-width: 0;
}
.lineup__item--2 {
  flex-basis: 394px;
}
.lineup__item img {
  width: 100%;
  height: auto;
}
.lineup__btn-txt {
  margin-top: 36px;
}
.lineup__item .lineup__btn-txt img {
  width: 148px;
  margin: 0 auto;
}
.lineup__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: min(392px, calc(100% + var(--lineup-btn-over) * 2));
  margin: 10px 0 0 50%;
  transform: translateX(-50%);
}
.lineup__btns a {
  display: block;
  transition: opacity .2s;
}
.lineup__item--2 .lineup__btns {
  width: min(392px, calc(77.4% + var(--lineup-btn-over) * 2));
}
.lineup__item .lineup__btns img {
  width: 100%;
  height: auto;
}
.lineup__btns a:hover {
  opacity: .7;
}

.point__list {
  padding: 60px var(--gutter);
  display: flex;
  justify-content: center;
  gap: 40px;
}
.point__item {
  flex: 0 1 230px;
  min-width: 0;
}
.point__item img {
  width: 100%;
  height: auto;
}

.special-contents,
.study {
  display: flow-root;
  padding-bottom: clamp(32px, 4.86vw, 70px);
}
.special-contents {
  background: url(../img/special_back_bg.jpg) left top / 250px 250px repeat;
}
.study {
  background: url(../img/study_back_bg.jpg) left top / 250px 250px repeat;
}

.point__divider,
.study__divider {
  height: clamp(26px, 3.54vw, 51px);
  background: url(../img/section_divider.svg) left top / auto 100% repeat-x;
}

.special-contents__inner,
.study__inner {
  width: min(1020px, 100% - var(--gutter) * 2);
  margin: clamp(32px, 4.86vw, 70px) auto 0;
}
.special-contents__inner img,
.study__inner img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.special-contents__head {
  aspect-ratio: 1020 / 164;
  padding-top: calc(5.1% - 15px);
  background: url(../img/special_head_bg.svg) center bottom / 100% auto no-repeat;
}
.special-contents__head,
.study__head {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.special-contents__ttl {
  width: 29.4%;
  margin: 0 auto;
}
.special-contents__body {
  display: flow-root;
  background: #fff5e1;
}
.special-contents__body > * {
  margin-left: auto;
  margin-right: auto;
}
.special-contents__catch { position: relative; z-index: 2; width: 49%; margin-top: calc(36px - 6.08%); }
.special-contents__lead { width: 52%; margin-top: 50px; }
.special-contents__subttl { width: 75.5%; margin-top: 60px; }
.special-contents__txt { width: 74.5%; margin-top: 10px; }
.special-contents__q { width: 71.6%; margin-top: clamp(40px, 7.84vw, 80px); }
.special-contents__q:first-of-type { margin-top: clamp(32px, 5.88vw, 60px); }
.special-contents__q-ttl { margin: 0; }
.special-contents__q-fig { margin: 10px 0 0; }
.special-contents__q:first-of-type .special-contents__q-ttl {
  width: 104.11%;
  margin-left: -2.055%;
}
.special-contents__foot {
  aspect-ratio: 375 / 21;
  margin-top: -1px;
  background: url(../img/special_bottom_bg.svg) center top / 100% auto no-repeat;
}
.special-contents__foot,
.study__foot {
  position: relative;
  z-index: 1;
}
.special-contents__btn {
  position: relative;
  z-index: 2;
  display: block;
  width: 49%;
  margin: clamp(24px, 4.9vw, 50px) auto 0;
  transition: opacity .2s;
}
.special-contents__btn:hover { opacity: .7; }

.study__head {
  aspect-ratio: 1020 / 82;
  padding-top: 3.43%;
  background: url(../img/study_head_bg.svg) center bottom / 100% auto no-repeat;
}
.study__ttl {
  width: 46.67%;
  margin: 0 auto;
}
.study__body {
  position: relative;
  display: flow-root;
  background: #f7faff;
}
.study__body > :not(.study__deco) {
  margin-left: auto;
  margin-right: auto;
}
.study__body .study__deco {
  position: absolute;
  top: 0;
  width: 19.6%;
}
.study__deco--left { left: 4.9%; }
.study__deco--right { right: 2.94%; }
.study__catch { width: 47.06%; margin-top: clamp(12px, 2.16vw, 22px); }
.study__lead { width: 52.16%; margin-top: clamp(24px, 4.7vw, 48px); }
.study__subttl { width: 81.76%; margin-top: clamp(32px, 5.88vw, 60px); }
.study__member { width: 76.47%; margin-top: clamp(16px, 3.33vw, 34px); }
.study__member-list {
  display: grid;
  gap: 40px;
  width: 75.88%;
  margin-top: clamp(11px, 2.29vw, 23px);
}
.study__movie-ttl { width: 280px; margin-top: clamp(32px, 6.86vw, 70px); }
.study__movie {
  width: min(500px, 88%);
  aspect-ratio: 16 / 9;
  margin-top: 10px;
}
.study__movie iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.study__cta {
  width: min(500px, 88%);
  margin-top: clamp(24px, 2.78vw, 40px);
}
.study__cta-btn {
  display: block;
  transition: opacity .2s;
}
.study__cta-btn:hover { opacity: .7; }
.study__foot {
  aspect-ratio: 1020 / 70;
  margin-top: -1px;
  background: url(../img/study_bottom_bg.svg) center top / 100% auto no-repeat;
}

@media (max-width: 600px) {
  .lead { padding-bottom: 40px; }
  .lead__title { margin-top: 5px; }
  .lead__body { margin-top: 6.94vw; }
  .lead__title img,
  .lead__body img {
    width: 85%;
    max-width: none;
  }
  .lineup__list {
    flex-direction: column;
    align-items: center;
  }
  .lineup__item {
    flex: none;
    width: 77.4%;
    max-width: 342px;
  }
  .lineup__item--2 {
    width: 100%;
    max-width: 442px;
  }
  .lineup__desc img { width: 540px; }
  .lineup__item .lineup__btn-txt img { width: 140px; }
  .lineup__btns,
  .lineup__item--2 .lineup__btns {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 190px;
  }
  .special-contents__ttl { width: 50%; }
  .special-contents__catch,
  .special-contents__lead,
  .study__lead,
  .study__subttl,
  .study__movie,
  .study__cta { width: 88%; }
  .study__ttl { width: calc(70% + 40px); }
  .study__head {
    aspect-ratio: auto;
    padding-top: 30px;
    background:
      url(../img/study_head_bg.svg) center top / 100% auto no-repeat,
      linear-gradient(#f7faff, #f7faff) center bottom / 100% calc(100% - 8.04vw + 1px) no-repeat;
  }
  .study__catch { width: min(300px, 88%); }
  .study__member { width: min(303px, 88%); }
  .study__member-list { width: min(320px, 88%); }
  .study__movie-ttl { width: 250px; }
  .special-contents__inner,
  .study__inner { width: 100%; }
  .study__body .study__deco { display: none; }
  .special-contents__subttl { width: min(338px, 92%); }
  .special-contents__txt { width: min(306px, 88%); }
  .special-contents__q { width: min(318px, 88%); }
  .special-contents__q-ttl,
  .special-contents__q:first-of-type .special-contents__q-ttl { width: min(315px, 100%); margin: 0 auto; }
  .special-contents__head { padding-top: 5.1%; }
  .special-contents__catch { margin-top: 0; }
  .special-contents__lead,
  .special-contents__subttl { margin-top: clamp(24px, 4.9vw, 50px); }
  .special-contents__btn { width: min(318px, 88%); }
  .special-contents__body,
  .study__body {
    padding-bottom: 50px;
  }
  .special-contents__foot,
  .study__foot { display: none; }
  .special-contents,
  .study { padding-bottom: 0; }
  .point__list {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .point__item {
    flex: none;
    width: min(70vw, 260px);
  }
}
.m-footer {
    text-align: center;
    line-height: 1.5
}

.m-footer .footer1 {
    padding: 32px 0 27px;
    display: flex;
    grid-gap: 30px;
    gap: 30px;
    justify-content: center;
    background: #00157b
}

.m-footer .footer1 a {
    color: #fff;
    text-decoration: underline
}

.m-footer .footer2 {
    padding: 0 0 32px;
    background: #00157b
}

.m-footer .footer2 img {
    width: 44px
}

.m-footer .footer3 {
    padding: 33px 0;
    background: #fff;
    line-height: 10px
}

.m-footer .footer3 img {
    width: 120px;
    display: inline-block;
}

.m-footer .footer4 {
    padding: 33px 0;
    color: #fff;
    background: #00157b
}

@media (max-width: 767px) {
  .m-footer {
      font-size:2.6666vw
  }
}