@charset "UTF-8";
/* ------------------------------------------- initialize */
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

ul li { list-style: none; }

input, select { vertical-align: middle; }

img { height: auto; width: 100%; }

body, .container { overflow-x: hidden; }

/*************************** 顏色設定 *****************************/
.color_01,.share .share-tit::first-letter { color: #6F28F3; }
.color_02 { color: #7A2DF5; }
.bg_color_01 { background: #AB7BF7; }
.bg_color_02 { background: #AB7BF7; }
.bg_color_03 { background: #FAF7FF; }
.btn_gradient_color {
  background: linear-gradient(to right, #9671FD, #FBA9DF);
  box-shadow: 0 5px 15px rgba(150, 113, 253, 0.4);
}

.in_heading:before { color: #AB7BF7; }
.in_heading:after, .heading:before, .dot-list ul li:before { background: #AB7BF7; }
.dot-list.ching ul li:before { background: url(../images/icon_check_circle.svg); }

@media screen and (max-width: 768px) {
  .nav__trigger span,
  .nav__trigger span::before,
  .nav__trigger span::after,
  .nav__active .nav__trigger span::before,
  .nav__active .nav__trigger span::after { background: #AB7BF7; }
}

/*************************** 語言切換 *****************************/
.switch-box { pointer-events: all; }

.lang .inner{cursor: pointer; width: 60px;padding: 14px 0; border: 1px solid #000;background: #fff; border-radius: 50px; box-shadow: 0px 0px 10px #AB7BF733;text-align: center;transition: .3s;}
.lang .inner .txt{font-size: 15px;}
.lang .inner .tri{  position: relative;padding-bottom: 6px;display: block;}
.lang .inner .tri:before{  position: absolute;content: "";bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-right: 6px solid transparent;border-left: 6px solid transparent;border-top: 6px solid #000;transition: .3s;}
.lang .inner:hover{background: #000;color: #fff;transition: .3s;}
.lang .inner:hover .tri:before{border-top: 6px solid #fff;transition: .3s;}
.lang.toggle {position: relative;}
.lang.toggle.active .tri:before{transform: translateX(-50%)scale(1,-1);}

.lang.toggle ul { position: absolute;left: 50%;transform: translateX(-50%)translateY(0%); background: #fff; border-radius: 50px; box-shadow: 0px 0px 10px #AB7BF733; overflow: hidden; border: 1px solid #000;transition: .3s all; pointer-events: none;opacity: 0;}
.lang.toggle.active ul{opacity: 1;pointer-events: all;transform: translateX(-50%)translateY(20px);}
.lang.toggle ul li a { color: #B8B8B8; display: inline-block; text-decoration: none; padding: 16px 18px; font-size: 16px; font-weight: bold; transition: .2s all; text-align: center;width: 100%;}
.lang.toggle ul li a:hover { background: #000; opacity: 1; transition: .2s all; color: #fff; }
.lang.toggle ul li a.active { background: #000; color: #fff; pointer-events: none; }
.lang.toggle ul li:nth-of-type(2) a{padding: 14px 18px;}

@media screen and (max-width: 768px) { 
  .switch-wrap { width: 100%; margin-bottom: 70px; }
  .switch-box { right: 20px; width: 100%; }
  .lang .inner{display: none;}
  .lang.toggle ul { width: 100%; pointer-events: all;opacity: 1;display: flex; justify-content: center; }
  .lang.toggle ul li { width: 33.33%; }
  .lang.toggle ul li a { padding: 5px 28px; } 
  .lang.toggle ul li:nth-of-type(2) a{padding: 5px 28px;}
  .lang.toggle.active ul{transform: translateX(-50%)translateY(0px);}
}

.bg-wrap { height: 100vh; position: fixed; width: 100%; z-index: -1; pointer-events: none; }
.circle_wrap { position: relative; width: 100%; height: 100%; }
.circle_wrap .circle { position: absolute; width: 100%; top: 0; left: 0; }
.circle_wrap .circle.circle_01 { position: absolute; display: block; width: 79%; transform-origin: center; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.circle_wrap .circle.circle_01 img { animation: spin-circle 10s infinite linear; }
.circle_wrap .circle.circle_02 { position: absolute; width: 85%; display: block; transform-origin: center; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.circle_wrap .circle.circle_02 img { animation: spin-circle-rev 12s infinite linear; }
.circle_wrap .circle.circle_03 {  position: absolute; width: 95%; transform-origin: center; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.circle_wrap .circle.circle_03 img { animation: spin-circle 13s infinite linear; }
.circle_wrap .circle.bg { position: absolute; width: 20%; transform-origin: center; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.arrow_p { position: absolute; top: 50%; transform: translateY(-50%); right: 10%; transition: .4s; }
.arrow { position: relative; width: 59px; height: 59px; transition: .2s; }
.arrow:before { position: absolute; content: ""; background: url(../images/icon_btn_arrow.svg) center no-repeat; width: 100%; height: 100%; background-size: contain; transition: .2s; }

.h-outer { margin-bottom: 60px; }
#resources .h-outer { margin-bottom: 30px; }
.heading { font-size: 36px; line-height: 1.2em; position: relative; }
.heading span { font-size: 16px; display: block; font-weight: normal; }
.heading span.title_first { font-size: 36px; display: block; font-weight: bold; line-height: 2;}
.heading span.title_first_sp { font-size: 30px; display: block; font-weight: bold; line-height: 2; }
.heading:before { position: absolute; content: ""; width: 20px; height: 1px; left: 0; bottom: -20px; }
.heading .title_second { font-size: 24px; position: relative; font-weight: bold;}

.in_heading { position: relative; border-bottom: 1px solid #D5D9DB; padding-left: 30px; margin-bottom: 30px; font-size: 24px; line-height: 1.6em; }
.in_heading:before { position: absolute; content: attr(data-num) ""; font-size: 16px; top: 50%; transform: translateY(-50%); left: 1px; font-weight: normal; }
.in_heading:after { position: absolute; content: ""; width: 20px; height: 1px; bottom: -1px; left: 0; }

.bg_box-blue { padding: 30px 30px; }
.dot-list ul li { position: relative; padding-left: 1.2em; }
.dot-list ul li:before { position: absolute; content: ""; width: 10px; height: 10px; left: 0; top: .5em; border-radius: 50px; }
.dot-list ul li:not(:last-of-type) { margin-bottom: 20px; }

.dot-list.ching ul li { position: relative; padding: 1.2em 1.2em 1.2em 3.7em; font-size: 16px; font-weight: bold; background: #FAF7FF;}
.dot-list.ching ul li:before { position: absolute; content: ""; width: 30px; height: 30px; left: 1em; top: 1em; }

@media screen and (max-width: 768px) { 
  .heading { font-size: 30px; }
  .heading span { font-size: 20px; }
  .in_heading { font-size: 20px; }
  .bg_box-blue { padding: 20px; }
  .dot-list ul li { font-size: 14px; }
  .dot-list ul li:not(:last-of-type) { margin-bottom: 10px; }
  .circle_wrap .circle.circle_01 { width: 85%; }
  .circle_wrap .circle.circle_02 { width: 100%; }
  .circle_wrap .circle.circle_03 { width: 120%; }
  .circle_wrap .circle.bg { width: 40%; }
}

.header__title { max-width: 150px; float: inline-start; }
.header .nav__lists { background: #fff; border-radius: 60px; box-shadow: 0px 0px 10px #AB7BF733; padding: 0px 1.2em; margin-right: 15px; }
.header .entry { margin-right: 15px; }
.header .entry .button a { border-radius: 60px; box-shadow: 0px 0px 10px #AB7BF733; color: #fff; display: block; padding: 16px 60px 16px 25px; position: relative; font-size: min(16px,1.2vw); }
.header .entry .button a .arrow_p { right: 18px; }
.header .entry .button a .arrow_p .arrow { width: 28px; height: 28px; }
.header .sp_button { display: none; }

.v_box { display: block; }
@media screen and (max-width: 768px) { 
  .header__title { max-width: 120px; top: 22px; }
  .header .nav__lists { padding: 0px; border-top: 1px solid #B8B8B8; border-bottom: 1px solid #B8B8B8; border-radius: 0px; margin-right: inherit; background: inherit; box-shadow: none; }
  .header .nav__list { text-align: left; padding: 0; }
  .header .nav__list:not(:last-of-type) { border-bottom: 1px solid #B8B8B8; }
  .header .nav__list a { font-size: 14px; display: block; padding: 20px 12px; position: relative; }
  .header .nav__list a:before { position: absolute; content: ""; background: url(../images/icon_header_arrow.svg) center no-repeat; width: 6px; height: 14px; top: 50%; transform: translateY(-50%); right: 10px; }
  .header .nav .entry { display: none; }
  .header .sp_button { display: block; position: fixed; top: 19px; right: 50px; pointer-events: all; }
  .header .sp_button .entry .button a { padding: 10px 57px 10px 20px; font-size: 14px; }
  .header .sp_button.button02 { position: absolute; top: inherit; bottom: -100px; left: 50%; right: inherit; transform: translateX(-50%); width: 100%; }
  .header .sp_button.button02 .entry-button { width: 100%; }
  .header .sp_button.button02 .entry-button a { padding: 10px 40px; display: block; font-size: 14px; }
  .header .sp_button.button02 .entry-button a span { line-height: 1em; font-size: 50px; margin-bottom: 0; }
  .header .sp_button.button02 .entry-button a .arrow_p { right: 30px; }
}
@media screen and (min-width: 750px) { .v_box { height: 70vw; margin-bottom: 50px; } }


#top { position: absolute; top: 2%; left: 0; width: 100%; }
@media only screen and (max-width: 768px) {
  .header__inner { height: 82px; }
}

/********************** TOP *******************************/
/* loading */
.loading_wrap{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5000;
  background-color: var(--color-white);
  pointer-events: none;
}
.loading_wrap .logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 18vw, 200px);
}
.loading_wrap .logo img{ 
  width: 100%;
}
.loading_wrap.blur{
  animation: blur 1.5s ease forwards;
}
@keyframes blur {
  30%{
    opacity: 1; filter: blur(0);
  }
  100%{
    opacity: 0; filter: blur(10px);
  }
}
/* kv */
#top_kv{ position: relative;}
#top_kv .catch{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; margin: 0; z-index: 10;}
#top_kv .catch img{width: 100%;position: absolute;bottom: 0;}
#top_kv .swiper-container{ width: 100%; padding: 0 !important;}
#top_kv .swiper-container .top_slide .swiper-slide{ overflow: hidden;}
#top_kv .swiper-container .top_slide .swiper-slide img{ width: 100%;}
#top_kv .swiper-container .top_slide .swiper-slide .no_anime{ -webkit-animation:inherit !important; animation: inherit !important;}
#top_kv .swiper-container .top_slide .swiper-slide-active img,
#top_kv .swiper-container .top_slide .swiper-slide-duplicate-active img,
#top_kv .swiper-container .top_slide .swiper-slide-prev img{ -webkit-animation: kv_anime 10s linear 0s normal both; animation: kv_anime 10s linear 0s normal both;}
@keyframes kv_anime{
	0% {transform: scale(1.0);}
	100% {transform:  scale(1.15);}
}
@media only screen and (max-width: 900px){
#top_kv{ overflow: hidden; aspect-ratio: 1/1; }
.swiper-container{ width: 100%; overflow: visible; margin-right: auto; }
}


#about .about_txt { font-size: 18px; font-weight: normal; line-height: 2em; }
#about .about_txt p:not(:last-of-type) { margin-bottom: 20px; }
#about.section-wrap { max-width: 100%; width: 100%; padding-top: 30px; overflow: hidden; background:#FAF7FF;}
.about_txt { font-size: 18px; font-weight: normal; line-height: 2em; margin-bottom: 20px;}

@media screen and (max-width: 768px) { 
  #about.section-wrap { display: block; }
  #about .h-outer { width: 100%; }
  #about .content-wrap { width: 100%; }
  #about .about_txt, .about_txt { font-size: 16px; }
}

#requirement .content-wrap:not(:last-of-type) { margin-bottom: 5px; }
#requirement .flex-box .box { width: 31%; text-align: center; }
#requirement .flex-box .box:not(:nth-of-type(3n+3)) { margin-right: 3.5%; }
#requirement .flex-box .box .txt { font-size: 18px; font-weight: bold; }
#requirement .flex-box .box figure { max-width: 103px; margin: 0 auto 20px; }

@media screen and (max-width: 768px) { 
  #requirement .flex-box .box { width: 100%; display: flex; align-items: center; }
  #requirement .flex-box .box:not(:nth-of-type(3n+3)) { margin-right: inherit; margin-bottom: 3%; }
  #requirement .flex-box .box figure { margin: 0 20px 0 0; max-width: 60px; }
  #requirement .flex-box .box .txt { width: calc(100% - 60px); text-align: left; font-size: 16px; }
  .requirement.section-wrap:not(:last-of-type) { margin-bottom: 20px; }
}

#process.section-wrap { justify-content: space-between; }
#process .content-outer { max-width: 800px; width: 100%; float: right; }
#process .content-outer_left { max-width: 800px; width: 100%; float: left; }
#process .content-wrap:not(:last-of-type) { margin-top: 30px; }
#process .flow_left { border-radius: 200px 4px 4px 200px; padding: 30px; display: flex; align-items: center; color: #fff; }
#process .flow_left .num { font-size: 44px; background: #fff; border-radius: 50%; width: 124px; text-align: center; padding: 40px 0px; font-weight: 600; line-height: 1em; }
#process .flow_left .icon { width: calc(40% - 124px); }
#process .flow_left .icon img { display: block; line-height: 0; margin: 0 auto; }
#process .flow_left .icon.icon01 img { max-width: 65px; }
#process .flow_left .icon.icon02 img { max-width: 125px; }
#process .flow_left .icon.icon03 img { max-width: 65px; }
#process .flow_left .tit { font-size: 30px; font-weight: bold; width: 60%;line-height: 1.2em;}

#process .flow_right { border-radius: 4px 200px 200px 4px; padding: 30px; display: flex; align-items: center; color: #fff; }
#process .flow_right .num { font-size: 44px; background: #fff; border-radius: 50%; width: 124px; text-align: center; padding: 40px 0px; font-weight: 600; line-height: 1em; }
#process .flow_right .icon { width: calc(40% - 124px); }
#process .flow_right .icon img { display: block; line-height: 0; margin: 0 auto; }
#process .flow_right .icon.icon01 img { max-width: 65px; }
#process .flow_right .icon.icon02 img { max-width: 125px; }
#process .flow_right .icon.icon03 img { max-width: 65px; }
#process .flow_right .tit { font-size: 30px; font-weight: bold; width: 60%;line-height: 1.2em;}

@media screen and (max-width: 768px) { 
  #process.section-wrap { display: block; }
  #process .flow_left .num { font-size: 14px; width: 40px; padding: 13px 0; }
  #process .flow_left .icon { width: calc(40% - 40px); }
  #process .flow_left .icon.icon01 img { max-width: 40px; }
  #process .flow_left .icon.icon02 img { max-width: 70px; }
  #process .flow_left .icon.icon03 img { max-width: 40px; }
  #process .flow_left .tit { font-size: 18px; width: 60%; }

  #process .flow_right .num { font-size: 14px; width: 40px; padding: 13px 0; }
  #process .flow_right .icon { width: calc(40% - 40px); }
  #process .flow_right .icon.icon01 img { max-width: 40px; }
  #process .flow_right .icon.icon02 img { max-width: 70px; }
  #process .flow_right .icon.icon03 img { max-width: 40px; }
  #process .flow_right .tit { font-size: 18px; width: 60%; }
}

.entry-button { max-width: 700px; width: 92%; margin: 0 auto; text-align: left; position: relative; }
.entry-button a { color: #fff; padding: 50px 127px; display: block; border-radius: 80px; font-size: 36px; font-weight: bold; display: flex; align-items: center; transition: .3s; }
.entry-button a span { font-size: 60px; font-weight: bold; display: block; margin-right: 20px; margin-bottom: 10px; }
.entry-button a:hover { transform: scale(1.03); }
.entry-button a:hover .arrow_p { right: 12%; }
.button_block { text-align: center; margin-top: 140px; margin-bottom: 100px; }

@media screen and (max-width: 768px) { 
  .button_block .entry-button a { display: block; font-size: 16px; padding: 33px 40px 23px; }
  .button_block .entry-button a span { font-size: 50px; margin-bottom: 20px; }
}

.share { width: 92%; margin: 0 auto 60px; max-width: 700px; display: flex; align-items: center; justify-content: space-between; }
.share .share-tit { font-size: 100px; font-weight: 500; line-height: 1.4em; }
.share .sns { padding-top: 34px; margin: 0 auto; }
.share .sns ul { display: flex; }
.share .sns ul li { display: inline-block; max-width: 40px; }
.share .sns ul li:not(:last-of-type) { margin-right: 30px; }

@media screen and (max-width: 768px) { 
  .share { display: block; text-align: center; }
  .share .share-tit { font-size: 50px; }
  .share .sns ul { justify-content: center; }
}

.banner_block { max-width: 700px; margin: 0 auto 100px; width: 92%; }
.banner_block ul { display: flex; flex-wrap: wrap; justify-content: center; }
.banner_block ul li { 
  width: calc(33.33% - 4%);
  margin: 0px 2% 20px;
  height: 55px;
  box-sizing: border-box; 
}
.banner_block ul li.double-width {
  width: calc(66.66% - 4%);
  height: 55px;
}
.banner_block ul li p { display: block; }
.banner_block ul li p img { max-height: 100%; line-height: 0; display: block; object-fit: contain;}


@media screen and (max-width: 600px) { 
  .banner_block ul li { width: calc(66.66% - 4%); }
  .banner_block ul li.double-width {
    width: calc(66.66%);
    height: 55px;
  }
  .banner_block ul li p img {
    transform: scale(0.8);
    transform-origin: center center;
  }
   .banner_block ul li.double-width p img {
    margin-top: 40px;
    transform: none;
  }
}

.loader { width: 100%; height: 100vh; position: fixed; z-index: 10000; background: #fff; transition: .3s; }
.loader .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: vanish 1s both; animation-delay: 2s; }
.loader.off { opacity: 0; pointer-events: none; }
.loader.off .logo { opacity: 0; }

@keyframes vanish {
  0% { opacity: 1; filter: blur(0px); }
  100% { opacity: 0; filter: blur(20px); }
}

/* ===============================================
# anime
=============================================== */

@keyframes spin-circle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-circle-rev {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.anime { opacity: 0; }
.js-play.fadeUp { animation: fadeUpAnime 1s both; }
.js-play.fadeUp.d2 { animation: fadeUpAnime 1s both; animation-delay: .5s; }
.js-play.fadeLeft { animation: fadeLeftAnime 1s both; }
.js-play.fadeLeft.d2 { animation: fadeLeftAnime 1s both; animation-delay: .5s; }
.d2 { animation-delay: .2s; }
.d3 { animation-delay: .3s; }
.d4 { animation-delay: .4s; }
.js-play.d5 { animation-delay: .5s; }
.js-play.d6 { animation-delay: .5s; }
.js-play.d8 { animation-delay: .8s; }
.js-play.d9 { animation-delay: .9s; }
.js-play.d10 { animation-delay: 1s; }

@keyframes fadeUpAnime {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeftAnime {
  from { opacity: 0; transform: translateX(10%); }
  to { opacity: 1; transform: translateX(0); }
}

.fill_fade { position: relative; display: inline-block; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: 0.3s; }
.fill_fade:after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
.fill_fade.js-play { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.fill_fade.js-play:after { animation: fill_fade 0.6s ease forwards; }

@keyframes fill_fade {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

.both {
  clear: both;
}

#about, #requirement, #process, #caution { padding-top: 90px; }
#resources { padding-top: 30px; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #about, #requirement, #process, #caution {
    padding-top: 86px;
  }
}

@media screen and (max-width: 768px) {
  #about{ padding-top: 10px !important; }
  #resources, #process, #caution { padding-top: 80px !important; }
  .resources.section-wrap { margin-top: 50px !important; }
}

/* ===============================================
# top_second
=============================================== */
#top_second { width: 100%; margin-top: 200px; margin-bottom: 180px;}
#top_second .top__inner { width: 92%; max-width: 1200px; margin: 0 auto; }
#top_second .top__text { width: 50%; }
#top_second .top__text .title { margin-bottom: 3vw; }
#top_second .top__logo { width: 46.8%; float: right; }
#top_second .catch { margin-top: -15px; }
#top_second .catch span { display: inline-block; background: #AB7BF7; margin-bottom: 0.9vw; padding: .2vw .5vw; }

@media screen and (max-width: 768px) {
  #top .top__inner { flex-direction: column-reverse; }
  #top_second .top__text { width: 86%; margin: 0 auto; }
  /*#top_second .top__text .title { margin-bottom: 14vw; }*/
  #top_second .top__logo { width: 80%; margin: 50px 10%; }
  #top_second .catch { text-align: center; font-size: 4.3vw; white-space: nowrap; }
  #top_second .catch span { padding: 1vw 1.7vw; margin-bottom: 2vw; }
}

@media screen and (max-width: 750px) {
  #top_second { margin-top: 10%; margin-bottom: 150px;}
}

/*************************** 幻燈片 *****************************/
.about-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  width: 92%;
  margin: 0 auto;
}

.about-text {
  flex: 1;
  min-width: 300px;
  z-index: 5;
}

.img_slide {
  width: 300px;
  height: 300px;
  position: relative;
  flex-shrink: 0;
}

.slide01 {
  background-image: url(../images/img_slide.png);
  right: 30%;
  top: -40%;
}

.slide02 {
  background-image: url(../images/img_slide.png);
  right: -65%;
	top: -40%;
}

.slide01,
.slide02 {
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 1200px;
  background: url('../images/img_slide.png') top left / 100% repeat-y;
  position: absolute;
  transform: rotate(15deg);
  animation: footbgscroll1 40s linear 0s infinite normal none running;
  opacity: 0.75;
}

@keyframes footbgscroll1 {
  0% {
    background-position-y: 0;
  }

  100% {
    background-position-y: 2190px;
  }
}

#about .about-flex .img_slide {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}