@charset "utf-8";
/*----------------------------------------
	reset
----------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, main, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

main, article, aside, details, figcaption, figure, img, video, footer, header, hgroup, menu, nav, section, picture {
  display: block;
}

ul, ol, li {
  list-style: none;
}

a {
  color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: opacity .3s ease;
}

a:hover {
  opacity: .6;
}

a:link img, a:visited img, a:hover img, a img {
  border: none;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

body {
  color: #3a3a3a;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1;
}

.wrapper {
  overflow: hidden;
}

/*----------------------------------------
	header
----------------------------------------*/
.wrapper .header {
  background: #fff;
  width: 100%;
}

.wrapper .header .header__inner {
  align-items: center;
  display: flex;
  height: 58px;
  margin: 0 auto;
  width: min(90%, 1306px);
}

/*----------------------------------------
	main
----------------------------------------*/

.wrapper .main .section .text {
  font-size: 18px;
  line-height: 1.7;
  text-indent: 1em;
}

.wrapper .main .section .text--white {
  color: #fff;
}

.wrapper .main .section .text.text--no-indent {
  text-indent: 0;
}

.wrapper .main .section .youtube {
  aspect-ratio: 16 / 9;
  margin: 0 auto 45px;
  position: relative;
  width: min(480px, 90%);
}

.wrapper .main .section .youtube iframe {
  height: 100%;
  width: 100%;
}

.wrapper .main .section .section__main-visual {
  position: relative;
}

.wrapper .main .section .section__main-visual .section__main-visual__movie {
  height: 100vh;
  margin: 0;
  max-height: 525px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100vw;
}

.wrapper .main .section .section__main-visual .section__main-visual__movie:after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.wrapper .main .section .section__main-visual .section__main-visual__movie video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wrapper .main .section .section__main-visual .section__main-visual__title {
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}

.wrapper .main .section .section__main-visual .section__main-visual__title h1 {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  width: 945px;
}

.wrapper .main .section .section__task {
  background: url(../images/task_back.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper .main .section .section__task__inner {
  margin: 0 auto;
  padding: 46px 0 82px;
  width: min(90%, 894px);
}

.wrapper .main .section .section__task__inner h2 {
  margin-bottom: 60px;
}

.wrapper .main .section .section__task__inner div .task-list li:nth-child(-n + 2) {
  margin-bottom: 75px;
}

.wrapper .main .section .section__task__inner div .task-list li {
  width: calc((100% / 2) - 27px);
}

.wrapper .main .section .section__task__inner div .task-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 32px;
}

.wrapper .main .section .section__task__inner div .task-list li .task-list__box {
  background: #fff;
  padding: 90px 60px 66px;
  position: relative;
}

.wrapper .main .section .section__task__inner div .task-list li .task-list__box .task-icon {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: -35px;
}

.wrapper .main .section .section__task__inner div .task-list li .task-list__box .task-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 9px;
  text-align: center;
}

.wrapper .main .section .section__task__inner div .task-list li .task-list__box .task-text {
  line-height: 1.7;
  margin-top: 32px;
}

.wrapper .main .section .section__products {
  background: url(../images/point4_back.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper .main .section .section__products .section__products__inner {
  padding: 36px 0 72px;
}

.wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner {
  align-items: center;
  column-gap: 14%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 84px;
  max-width: 100%;
  transform: translateX(-160px);
  width: 1100px;
}

.wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner h2 {
  margin-top: min(10vw, 100px);
  position: relative;
}

.wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner h2:after {
  background: #ec3af4;
  content: "";
  display: block;
  height: 25px;
  left: 0;
  position: absolute;
  top: clamp(-65px, -7vw, -40px);
  width: 100vw;
}

.wrapper .main .section .section__products .section__products__inner .products-wrap {
  position: relative;
}

.wrapper .main .section .section__products .section__products__inner .products-wrap:after {
  background: url(../images/point4_back_image.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 673px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 692px;
}

.wrapper .main .section .section__products .section__products__inner .products-wrap ul {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: min(90%, 968px);
}

.wrapper .main .section .section__products .section__products__inner .products-wrap ul li {
  margin-bottom: 48px;
  width: calc((100% / 3) - 21px);
}

.wrapper .main .section .section__products .section__products__inner .products-wrap ul li div .product {
  border-bottom: 5px solid #ec3af4;
  min-height: 150px;
  overflow: hidden;
}

.wrapper .main .section .section__products .section__products__inner .products-wrap ul li div .product img {
  transform: scale(2);
}

.wrapper .main .section .section__products .section__products__inner .products-wrap ul li div .text {
  color: #fff;
  margin-top: 16px;
}

.wrapper .main .section .section__products .section__products__inner .point4 {
  margin: 0 auto;
  position: relative;
  width: min(90%, 571px);
}

.wrapper .main .section .section__products .section__products__inner .point4:after {
  background: url(../images/circle.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  height: 122px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 124px;
  width: 16px;
  z-index: 5;
}

.wrapper .main .section .section__points {
  position: relative;
}

.wrapper .main .section .section__points:before {
  background: url(../images/back_w.png), url(../images/back_b.png);
  background-position: top -220px left calc(50% + 30px), bottom center;
  background-repeat: no-repeat, no-repeat;
  background-size: 1076px, 946px;
  content: "";
  height: 100%;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 3;
}

.wrapper .main .section .section__points:after {
  background: #000;
  bottom: 0;
  clip-path: polygon(100% 0, -110% 100%, 100% 100%);
  content: "";
  display: block;
  height: 69%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.wrapper .main .section .section__points .section__points__inner {
  padding: 120px 0;
  position: relative;
  z-index: 3;
}

.wrapper .main .section .section__points .section__points__inner .point .text-area, .wrapper .main .section .section__points .section__points__inner .point {
  position: relative;
}

.wrapper .main .section .section__points .section__points__inner .point .text-area h2 {
  align-items: flex-end;
  display: flex;
  margin-bottom: 54px;
  position: relative;
}

.wrapper .main .section .section__points .section__points__inner .point:nth-child(odd) .text-area h2:after {
  background: #ec3af4;
  bottom: -25px;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  width: 100vw;
}

.wrapper .main .section .section__points .section__points__inner .point:nth-child(even) .text-area h2:after {
  background: #ec3af4;
  bottom: -25px;
  content: "";
  height: 10px;
  position: absolute;
  right: 0;
  width: 100vw;
}

.wrapper .main .section .section__points .section__points__inner .photo {
  flex-shrink: 0;
}

.wrapper .main .section .section__points .section__points__inner .point:nth-child(-n + 3) .text-area h2 span:last-child {
  transform: translateX(30px);
}

.wrapper .main .section .section__points .section__points__inner .point:last-child .text-area h2 span:first-child {
  transform: translateX(-30px);
}

.wrapper .main .section .section__points .section__points__inner .point .text-area h3 {
  line-height: 1.7;
  margin-bottom: 12px;
}

.wrapper .main .section .section__points .section__points__inner .point .text-area h3 span {
  display: block;
}

.wrapper .main .section .section__points .section__points__inner .point1 .point1__inner {
  column-gap: 63px;
  display: flex;
  margin: 0 auto;
  transform: translateX(calc(100% - 1238px));
  width: min(90%, 1218px);
}

.wrapper .main .section .section__points .section__points__inner .point1 .point1__inner .text-area {
  margin-bottom: 100px;
  max-width: 100%;
  width: 630px;
}

.wrapper .main .section .section__points .section__points__inner .point2 .point2__inner {
  align-items: flex-end;
  column-gap: 10px;
  display: flex;
  margin: 0 auto 200px;
  transform: translateX(calc(100% - 1088px));
  width: min(90%, 1218px);
}

.wrapper .main .section .section__points .section__points__inner .photo.photo--point2 {
  transform: scale(2) translateY(20px);
}

.wrapper .main .section .section__points .section__points__inner .point2 .point2__inner .text-area {
  max-width: 100%;
  width: 630px;
}

.wrapper .main .section .section__points .section__points__inner .point3 .point3__inner {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto 400px;
  position: relative;
  width: min(90%, 1485px);
}

.wrapper .main .section .section__points .section__points__inner .point3 .point3__inner .text-area {
  flex-shrink: 0;
  max-width: 100%;
  width: 702px;
}

.wrapper .main .section .section__points .section__points__inner .photo.photo--point3 {
  transform: translate(250px, 200px);
}

.wrapper .main .section .section__points .section__points__inner .point4 .point4__inner {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
  transform: translateX(calc(100% - 1130px));
  width: min(90%, 1180px);
}

.wrapper .main .section .section__points .section__points__inner .point4 .point4__inner .text-area {
  max-width: 100%;
  width: 612px;
}

.wrapper .main .section .section__points .section__points__inner .photo.photo--point4 {
  transform: translateY(-100px);
}

.wrapper .main .section .section__products-link {
  background: #ec3af4;
  padding: 206px 0 132px;
  position: relative;
  z-index: 10;
}

.wrapper .main .section .section__products-link:before {
  background: #000;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: "";
  display: block;
  height: 110px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
}

.wrapper .main .section .section__products-link__inner {
  background: rgba(255, 255, 255, .9);
  margin: 0 auto;
  padding: 46px 72px;
  width: min(90%, 840px);
}

.wrapper .main .section .section__products-link__inner div {
  display: flex;
  justify-content: space-between;
}

/*----------------------------------------
	footer
----------------------------------------*/
.wrapper .footer {
  background: #1f1f1f;
}

.wrapper .footer .footer__inner {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  line-height: 1.4;
  margin: 0 auto;
  padding: 25px 0;
  width: min(90%, 1260px);
}

.wrapper .footer .footer__inner ul {
  display: flex;
}

.wrapper .footer .footer__inner ul > * + * {
  margin-left: 36px;
}

@media screen and (max-width: 1366px) {
  .wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner {
    transform: translateX(-10vw);
  }
}

@media screen and (max-width: 1280px) {
  .wrapper .main .section .section__points .section__points__inner .point1 .point1__inner, .wrapper .main .section .section__points .section__points__inner .point2 .point2__inner, .wrapper .main .section .section__points .section__points__inner .point4 .point4__inner {
    transform: translateX(0);
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .wrapper .main .section .section__points .section__points__inner .photo:not(.photo.photo--point3) {
    width: 40%;
  }

  .wrapper .main .section .section__points .section__points__inner .point:nth-child(-n + 3) .text-area h2 span:last-child {
    transform: translateX(15px);
  }

  .wrapper .main .section .section__points .section__points__inner .point:last-child .text-area h2 span:first-child {
    transform: translateX(-15px);
  }

  .wrapper .main .section .section__points .section__points__inner .point1 .point1__inner {
    column-gap: 45px;
  }

  .wrapper .main .section .section__points .section__points__inner .point2 .point2__inner, .wrapper .main .section .section__points .section__points__inner .point4 .point4__inner {
    align-items: center;
  }

  .wrapper .main .section .section__points .section__points__inner .point3 .point3__inner .text-area {
    width: 60%;
  }

  .wrapper .main .section .section__points .section__points__inner .photo.photo--point3 {
    transform: translate(calc(50% - 23vw), 200px);
  }
}

@media screen and (min-width: 769px) and (max-width: 994px) {
  .wrapper .main .section .section__task__inner div .task-list li .task-list__box {
    padding: 90px 30px 66px;
  }

  .wrapper .main .section .section__products .section__products__inner .products-wrap ul li div .product img {
    transform: scale(1.5);
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .section .section__task__inner div .task-list {
    justify-content: center;
  }

  .wrapper .main .section .section__task__inner div .task-list li {
    max-width: 420px;
    width: 100%;
  }

  .wrapper .main .section .section__task__inner div .task-list li:nth-child(3) {
    margin-bottom: 75px;
  }

  .wrapper .main .section .section__task__inner div .task-list li .task-list__box {
    padding: 90px 30px 36px;
  }

  .wrapper .main .section .section__task__inner div .task-list li .task-list__box .task-title {
    font-size: 19px;
  }

  .wrapper .main .section .section__task__inner div .task-list li .task-list__box .task-text {
    margin-top: 18px;
  }

  .wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner {
    margin-bottom: 40px;
  }

  .wrapper .main .section .section__products .section__products__inner .products-title .products-title__inner h2:after {
    height: 18px;
  }

  .wrapper .main .section .section__products .section__products__inner .products-wrap ul {
    flex-direction: column;
    justify-content: center;
  }

  .wrapper .main .section .section__products .section__products__inner .products-wrap ul li {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    width: 100%;
  }

  .wrapper .main .section .section__points:after {
    clip-path: polygon(100% 0, -800% 100%, 100% 100%);
    height: 51%;
  }

  .wrapper .main .section .section__points .section__points__inner .point .text-area h2 {
    align-items: center;
    flex-direction: column;
  }

  .wrapper .main .section .section__points .section__points__inner .point:last-child .text-area h2 span:first-child, .wrapper .main .section .section__points .section__points__inner .point:nth-child(-n + 3) .text-area h2 span:last-child {
    transform: translateX(0);
  }

  .wrapper .main .section .section__points .section__points__inner .point .text-area h2 span:first-child {
    margin-bottom: 21px;
    max-width: 100px;
    transform: translateX(0);
  }

  .wrapper .main .section .section__points .section__points__inner .photo {
    flex-shrink: unset;
  }

  .wrapper .main .section .section__points .section__points__inner .point1 .point1__inner {
    column-gap: 0;
    flex-direction: column-reverse;
    margin-bottom: 75px;
  }

  .wrapper .main .section .section__points .section__points__inner .point1 .point1__inner .text-area {
    margin-bottom: 40px;
    width: 100%;
  }

  .wrapper .main .section .section__points .section__points__inner .point2 .point2__inner {
    column-gap: 0;
    flex-direction: column;
  }

  .wrapper .main .section .section__points .section__points__inner .point2 .point2__inner .text-area {
    width: 100%;
    z-index: 3;
  }

  .wrapper .main .section .section__points .section__points__inner .point3 .point3__inner {
    flex-direction: column-reverse;
    margin-bottom: 125px;
  }

  .wrapper .main .section .section__points .section__points__inner .point3 .point3__inner .text-area {
    flex-shrink: unset;
    margin-bottom: 40px;
    width: 100%;
  }

  .wrapper .main .section .section__points .section__points__inner .photo.photo--point3 {
    transform: scale(1.5) translate(0, 20px);
  }

  .wrapper .main .section .section__points .section__points__inner .point4 .point4__inner {
    flex-direction: column;
  }

  .wrapper .main .section .section__points .section__points__inner .point4 .point4__inner .text-area {
    width: 100%;
  }

  .wrapper .main .section .section__points .section__points__inner .photo.photo--point4 {
    margin: 40px auto 0;
    transform: translateY(0);
  }

  .wrapper .main .section .section__products-link__inner {
    padding: 18px 28px;
  }

  .wrapper .footer .footer__inner {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .wrapper .footer .footer__inner ul {
    flex-direction: column;
  }

  .wrapper .footer .footer__inner ul > * + * {
    margin-left: 0;
  }

  .wrapper .footer .footer__inner ul li {
    margin-bottom: 12px;
  }

  .wrapper .footer .footer__inner ul li:last-child {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 635px) {
  .wrapper .main .section .section__products .section__products__inner .point4:after {
    top: calc(100% + 3vw);
  }
}

@media screen and (max-width: 320px) {
  .wrapper .main .section .section__products .section__products__inner .products-wrap ul li div .product img {
    transform: scale(1.5);
  }
}