@charset "utf-8";
/* ------------------------------------------------------------ common */
main{ }


/* ------------------------------------------------------------ fv */
#fv{ position: relative; padding: 118px 0 363px; background: #F2F1ED url(../images/index/bg_fv.jpg) left center no-repeat;; }
#fv .text{ z-index: 1; position: absolute; top: 40%; translate: 0 -50%; }
#fv .text h2{ text-shadow: 0 0 15px #fff; font-size: 64px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; line-height: 130%; }
#fv .text p{ padding: 0 0 20px; font-size: 22px; }

.kv{ margin-left: 34%; background: none; padding-top: 0px;}
.kv .slider{ display: flex; align-items: center; }
.kv .slider-item{ width: 400px; padding: 16px; }
.kv .slider-item img{ width: 100%; height: auto; }

.kv .slider-item.slick-active{ filter: drop-shadow(-15px 15px 0px #FF8822); }

.slick-dots{ text-align: left; }
.slick-dots li,
.slick-dots li button::before{ width: 10px; height: 10px; }
.slick-dots{ bottom: 14%; left: -345px; width: 200px; }
.slick-dots li button::before{ content: ''; background: #D3D3D3; border-radius: 100px; opacity: 1; }
.slick-dots li.slick-active button::before{ background: #FF8822; opacity: 1; }


/* ------------------------------------------------------------ message */
#message{ z-index: 1; position: relative; margin-top: -228px; margin-bottom: 130px; }
#message .w-box{ display: flex; align-items: center; justify-content: space-between; padding: 50px; background: #fff; border-radius: 20px; box-sizing: border-box; filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.1)); }
#message img{ width: 570px; height: auto; border-radius: 20px; }
#message .text{ padding-left: 55px; }
#message .btn{ width: 290px; margin: 0 0 0 auto; }


/* ------------------------------------------------------------ about */
#about{ position: relative; padding: 0 0 120px; }
#about:before{ z-index: -1; position: absolute; content: ""; top: 8%; left: 50%; translate: -50% 0; width: 100%; height: 63%; background-color: #ffffff; background-image: radial-gradient(circle, #e2e2e2 1px, transparent 1px); background-position: 0 0; background-size: 10px 10px; }
#about .flex{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 60px; }
#about .text{ width: 390px; }

#about .picture{ width: 715px; }
#about .btn{ margin: 0 auto; }

.about-list.PC{display: flex;}
.about-list.SP{display: none;}
.about-list{ display: flex;flex-direction: column}
.about-list li{ position: relative; margin: 0 0; }
.about-list li a{display: block;padding: 30px 39px; }
.about-list li:hover{ filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.1)); border-radius: 10px; background: #fff; }

.about-list li:before{ position: absolute; left: 13px; top: 50%; transform: rotate(45deg) translate(0, -50%); content: ""; width: 10px; height: 10px; border-top: 1px solid #FF8822; border-right: 1px solid #FF8822; }

/* active */
.jsChangePicture,
.jsChangeBtn{ display: none; }
.jsChangePicture.active,
.jsChangeBtn.active{ display: block; }

#about .btn {
    margin: 0 auto;
    padding: 20px 10px;
}
/* ------------------------------------------------------------ job */
#job{ padding: 0 0 70px; }
#job .main-ttl{ padding: 0 0 20px; text-align: center; }

.job-list{ display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.job-list li{ width: calc(100% / 3 - 20px); margin:  30px 10px; border-radius: 20px; filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.1)); background: #fff; }
.job-list li img{ width: 100%; height: auto; border-radius: 20px 20px 0 0; }

.job-list .circle-arrw{ width: 30px; height: 30px; }
.job-list .circle-arrw::before{ left: 8px; top: 10px; width: 8px; height: 8px;}
.job-list .viewmore{ padding: 13px; font-size: 17px; }


/* ------------------------------------------------------------ beginner */
#beginner{ padding: 100px 0 110px; background: #FF8822 url(../images/index/bg_01.png) calc(50% + 200px) center no-repeat; }
#beginner .flex{ display: flex; align-items: flex-start; justify-content: space-between; }
#beginner .text{ width: 455px; }
#beginner .main-ttl{ padding: 0 0 50px;  color: #fff; }

.beginner-list{ width: 600px; }
.beginner-list li:not(:last-of-type){ padding: 0 0 30px; }
.beginner-list a{ display: block; background: #fff; border-radius: 20px; }
.beginner-list img{ width: 100%; height: auto; border-radius: 20px 20px 0 0; }
.beginner-list .viewmore{ padding: 15px 0; }
.beginner-list .circle-arrw{ width: 30px; height: 30px; }
.beginner-list .circle-arrw::before{ left: 8px; top: 10px;  width: 10px; height: 10px; }

#beginner .btn{padding: 30px 20px 29px;}
#beginner .btn .viewmore{position: relative; text-align: center;}
#beginner .btn .viewmore .circle-arrw{width: 30px; height: 30px; position: absolute; left: 0px; transform: translateY(-50%); top: 50%;}
#beginner .btn .viewmore .circle-arrw:before {left: 8px; top: 9px;width: 10px; height: 10px;}
/* ------------------------------------------------------------ faq */
#faq{ padding: 140px 0 110px; }
#faq .flex{ display: flex; align-items: flex-start; justify-content: space-between; }

#faq .main-ttl{ width: 800px; padding: 0 0 50px; }
#faq .ja-ttl{ width: auto; }
#faq .sub{ width: calc(100% - 160px); }
#faq .btn{ width: 190px; }

.qa{ position: relative; cursor: pointer; margin-bottom: 30px;/*  padding: 40px; */ background: #fff; filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.1)); border-radius: 20px; }
.qa:before,
.qa:after{ position: absolute; content: ""; top: 50px; width: 30px; height: 2px; background: #FF8822; right: 20px; }
.qa:before{ transform: rotate(90deg); transition: all .5s; }
.qa.open:before{ transition: all .5s; opacity: 0; }

.faq-list dt,
.faq-list dd{ position: relative; /* padding-left: 40px; */ padding: 40px 80px; }
.faq-list dt:before,
.faq-list dd:before{ position: absolute; /* left: 0; */ left: 40px; top: 0; width: 30px; height: 30px; font-size: 30px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; font-style: normal; }
.faq-list dt:before{ content: "Q"; color: #1F3D75; top: 40px; }
.faq-list dd:before{ content: "A"; color: #FF8822; }

.faq-list dt{ font-size: 22px; line-height: 130%; }
.faq-list dd{ /* margin-top: 30px;  */padding-top: 0; }
.faq-list dd p{ font-size: 16px; line-height: 150%; font-family: 'Noto-Sans-JP-Regular'; }




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ common */
.main-ttl h2 .en-ttl{font-size: 36px;}
.main-ttl .sub{text-align: left;padding: 15px 0 0;}

/* ------------------------------------------------------------ fv */
#fv{ padding: 70px 0 100px; }

#fv .text{ position: initial; translate: 0; padding: 30px 0 0; }
#fv .text h2{ font-size: 40px; }
#fv .text p{ padding: 0 0 15px; font-size: 16px; }

.kv{ margin-left: 0%; padding-top: 10px;}
.kv:before{display: none;}
.kv .slider-item{ width: 200px; }
.kv .slider-item.slick-active{ filter: drop-shadow(-8px 8px 0px #F82); }

.slick-dotted.slick-slider{ padding-top: 30px; }
.slick-dots{ top: 0; bottom: initial; left: 5%; }



/* ------------------------------------------------------------ message */
#message{ margin-top: -90px; margin-bottom: 80px; }
#message .w-box{ display: block; padding: 3%; border-radius: 20px; }
#message .text{ padding: 20px 0 0; }
#message .btn{ width: 100%; }
#message .viewmore{ text-align: left;  }


/* ------------------------------------------------------------ about */
#about{ padding: 0 0 60px; }
#about::before{ top: 2%; height: 50%; }
#about .flex{ display: block; padding: 0; }
#about .text{ width: 100%; }
#about .picture{ width: 100%; margin: 10px auto 0; }

.about-list{ flex-direction: column; align-items: flex-start; align-content: flex-start;}
.about-list.PC{display: none;}
.about-list.SP{display: flex; padding: 30px 0 0;}
.about-list li{ width: 100%; margin: 0 0 10px; font-size: 12px; line-height: 140%; }
.about-list li a{padding: 26px 20px 30px 44px; }
.about-list li::before{ left: 20px; top: 49%; width: 8px; height: 8px; }


/* ------------------------------------------------------------ job */
#job{ padding: 0 0 50px; }
.job-list{ justify-content: space-between; }
.job-list li{ width: 100%; margin: 10px; border-radius: 10px; }
.job-list li img{ height: 129px; width: calc(100% - 51%); object-fit: cover; border-radius: 10px 0 0 10px; }
.job-list a{display: flex;align-items: center;}
.job-list .viewmore{ padding: 15px 24px; font-size: 17px; line-height: 160%; width: 100%; position: relative; text-align: left;}
.job-list .circle-arrw{ border-radius: 0px; width: 14px; height: 14px; position: absolute; right: 5%; background: no-repeat; border: none; border-top: 1px solid #FF8822; border-right: 1px solid #FF8822; transform: rotate(45deg) translate(0, -50%); left: auto; top: 49%; }
.job-list .circle-arrw::before{ display: none;}


/* ------------------------------------------------------------ beginner */
#beginner{ padding: 35px 0 44px; }
#beginner .main-ttl{ padding: 0 0 20px; }
#beginner .main-ttl .en-ttl{ font-size: 40px; }
#beginner .text .btn{ width: 83%; margin: 0 auto 30px; }

#beginner .flex{ display: block; }
#beginner .text{ width: 100%; }
#beginner .beginner-list .circle-arrw { width: 18px; height: 18px; }
#beginner .beginner-list .circle-arrw::before { left: 5px; top: 5px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff;}

.beginner-list .viewmore { padding: 10px 0;}

.beginner-list{ width: 100%; }
.beginner-list a{ border-radius: 20px; }
.beginner-list img{ border-radius: 20px 20px 0 0; }
#beginner .btn { width: 90%;padding: 23px 20px 24px;margin: 40px auto 0;}
#beginner .btn .viewmore .circle-arrw{width: 30px; height: 30px; }
#beginner .btn .viewmore .circle-arrw:before {left: 8px; top: 9px;width: 10px; height: 10px;}

/* ------------------------------------------------------------ faq */
#faq{ padding: 60px 0; }
.qa:last-of-type{ margin-bottom: 0; }

#faq .flex{ display: block; }
#faq .main-ttl{ display: block; width: 100%; padding: 0 0 30px; }
#faq .main-ttl .en-ttl{ padding: 0 0 5px; }
#faq .ja-ttl{ width: 100%; }
#faq .sub{ width: 100%; }
#faq .btn{ width: 160px; margin: 0 auto 40px; }

.qa{ margin-bottom: 15px;/*  padding: 20px 10px; */ border-radius: 10px; }
.qa::before,
.qa::after{ top: 32px; width: 18px; right: 8px; }

.faq-list dt,
.faq-list dd{ /* padding: 0 25px; */ padding: 20px 35px; }
.faq-list dt::before,
.faq-list dd::before{ font-size: 22px; left: 10px; }

.faq-list dt::before { top: 20px; }

.faq-list dt{ font-size: 15px; }
.faq-list dd{ padding-top: 0; }
.faq-list dd p{ font-size: 14px; line-height: 150%; }


}