@charset "utf-8";
html { overflow-x : hidden; }
body {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-weight : 600;
  font-size: 16px;
  position : relative;
  color : #3c3c3c;
  /* overflow-x : hidden; */
}
p {
  letter-spacing: 0.04em;
  margin : 0;
}
img {
  display : block;
  width : 100%;
}
.c_white { color: #FFFFFF;}
.c_red { color: #A40000;}
.c_green { color: #48C299;}
.c_yellow { color: #FFEE32;}
.quoc_w:before {
  background: url(../imgs/quoc_w_l.png) no-repeat 0 0 / cover;
  content: "";
  display: inline-block;
  height: 30px;
  width: 36px;
  margin-left: -36px;
  position: relative;
  left: -9px;
  top: -18px;
}
.quoc_w:after {
  background: url(../imgs/quoc_w_r.png) no-repeat 0 0 / cover;
  content: "";
  display: inline-block;
  height: 30px;
  width: 36px;
  position: relative;
  top: 18px;
  right: -9px;
}
@media screen and (max-width: 767px) {
  .quoc_w:before { margin-left: -18px; width: 18px; height: 15px;}
  .quoc_w:after { width: 18px; height: 15px; top: 9px; right: 0;}
}
.quoc_b:before {
  background: url(../imgs/quoc_b_l.png) no-repeat 0 0 / cover;
  content: "";
  display: inline-block;
  height: 30px;
  width: 36px;
  margin-left: -36px;
  position: relative;
  left: -9px;
  top: -18px;
}
.quoc_b:after {
  background: url(../imgs/quoc_b_r.png) no-repeat 0 0 / cover;
  content: "";
  display: inline-block;
  height: 30px;
  width: 36px;
  position: relative;
  top: 18px;
  right: -9px;
}
@media screen and (max-width: 767px) {
  .quoc_b:before { margin-left: -18px; width: 18px; height: 15px;}
  .quoc_b:after { width: 18px; height: 15px; top: 9px; right: -4px;}
}

/*=============== fadein effect ===============*/
.js-fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 800ms;
}
.js-fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/*=============== header ===============*/
header {
  position : relative;
}
.logo-area {
  position : absolute;
  top : 0;
  left : 0;
  padding : 10px;
  height : 75px;
  display : flex;
  justify-content : left;
  align-items : center;
  z-index : 2;
}
.logo {
  width : 350px;
}

@media screen and (max-width: 767px) {
  .logo-area,
  .logo {
    height : calc(50 / 750 * 100vw);
    width : auto;
  }
  .logo-area {
    padding-top : 25px;
  }
}

.mv {
  position : relative;
  z-index: 1;
  padding-left: 10%;
  overflow: hidden;
}
.mv_bg {
  border-radius: 0 0 0 100px;
  overflow: hidden;
  position: relative;
}
.mv_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  overflow-x: hidden
}
.mv_copy > div {
  background-color: #fff;
  display: block;
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: all linear 0.6s;
  opacity: 0;
  transform: translateX(-100%);
}
.mv.on .mv_copy > div {
  opacity: 1;  
  transform: translateX(0);
}
.mv_copy > div.lg {
  font-size: 52px;
  line-height: 1.4;
  padding: 10px 0 10px 15px;
}
.mv_copy > div.sm {
  font-size: 24px;
  padding: 12px 40px 8px 10px;
}
.mv_copy > div.line01 { transition-delay: 0.1s; }
.mv_copy > div.line02 { transition-delay: 0.4s; }
.mv_copy > div.line03 { transition-delay: 0.8s; }
.mv_copy > div > div.opa { opacity: 0; transition: opacity ease-in 0.6s; }
.mv.on .mv_copy > div > div.opa { opacity: 1; }
.mv_copy > div.line01 > div.opa { transition-delay: 0.7s; }
.mv_copy > div.line02 > div.opa { transition-delay: 1.1s; }
.mv_copy > div.line03 > div.opa { transition-delay: 1.5s; }

@media screen and (max-width: 1023px) {
  .mv_bg { border-radius: 0 0 0 0; overflow: visible;}
  .mv_copy > div.lg { font-size: 26px;}
  .mv_copy > div.sm { font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .mv_bg { border-radius: 0 0 0 25px;}
  .mv_copy { gap: 5px; position: relative; top: 0; left: 20px; transform: translateY(-15%);}
  .mv_copy > div.lg { font-size: 26px; padding: 5px 0 5px 10px; letter-spacing: 0.04em;}
  .mv_copy > div.sm { font-size: 16px; line-height: 1.4;}
}

.scroll_down {
  position: absolute;
  left: 5%;
  bottom: 0;
}
.scroll_down .text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  transform: rotate(-90deg) translateX(50%);
  position: relative;
}
.scroll_down .line {
  background-color: #fff;
  display: block;
  height: 200px;
  width: 1px;
  margin: 0 auto;
  position: relative;
}
.scroll_down .line:before {
  background-color: #48C299;
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  animation: linescrollY 1.5s both cubic-bezier(.15, .31, .24, .88) infinite;
}
@keyframes linescrollY {
  0% {
    height: 0;
    bottom: 100%;
  }
  50% {
    height: 100%;
    bottom: 0;
  }
  100% {
    height: 100%;
    bottom: -100%;
  }
}
@media screen and (max-width: 767px) {
  .scroll_down { left: 0; bottom: 100px;}
  .scroll_down .text { font-size: 10px;}
  .scroll_down .line { height: 100px;}
}

/*=============== informations ===============*/
.informations {
  background-color: #48C299;
  margin-top: -155px;
  padding: 220px 0 80px;
}
.informations .wrap {
  margin: 0 auto;
  max-width: 1100px;
  width: calc(100% - 30px);
}
.informations .btn_cv {
  margin: 0 auto 80px;
  max-width: 610px;
  position: relative;
  z-index: 11;
}
.informations .ttl {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-bottom: 35px;
}
.informations .txt {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 2;
}
.experience {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 150px;
  overflow: unset;
}
.experience .list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: calc(444 / 1110 * 100%);
}
.experience .list li {
  border-radius: 30px;
  overflow: hidden;
}
.experience .info {
  position: sticky;
  top: 0;
  padding-top: 20px;
  width: calc(540 / 1110 * 100%);
}
.recruit .info {
  margin-bottom: 30px;
  padding-left: 40px;
}
.recruit .diagram img {
  margin-bottom: 30px;
}
@media screen and (max-width: 1023px) {
  .informations .btn_cv { max-width: 305px;}
  .informations .ttl { font-size: 27px;}
  .informations .txt { font-size: 17px;}
  .recruit .diagram span { font-size: 12px; }
}
@media screen and (max-width: 767px) {
  .informations { margin-top: -180px; padding-bottom: 50px;}
  .informations .btn_cv { max-width: 305px; margin-bottom: 40px;}
  .informations .ttl { font-size: 20px; margin-bottom: 25px; padding: 0 30px;}
  .informations .txt { font-size: 18px; line-height: 1.7; padding-left: 30px;}
  .experience { display: block; margin-bottom: 75px;}
  .experience .list { gap: 15px; margin-top: 30px; width: 100%; }
  .experience .list li { border-radius: 15px;}
  .experience .info { position: relative; width: 100%;}
  .recruit .info { padding-left: 0;}
  .recruit .diagram span { font-size: 9px; }
}

/*=============== reasons ===============*/
.reasons {
  padding-bottom: 100px;
}
.reasons .wrap {
  margin: 0 auto;
  max-width: 1100px;
  width: calc(100% - 30px);
}
.reasons .head {
  position: relative;
}
.reasons .head img {
  width: 70%;
  margin-left: auto;
}
.reasons .head .ttl {
  font-size: 55px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  z-index: 1;
}
.reasons .list {
  padding: 0 45px;
}
.reasons .list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 150px;
}
.reasons .list li:nth-child(even) {
  flex-direction: row-reverse;
}
.reasons .list .info {
  width: 40%;
}
.reasons .list h3 {
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 25px;
}
.reasons .list p {
  font-size: 22px;
  font-weight: 500;
  line-height: 2;
}
.reasons .list img {
  border-radius: 30px;
  width: 54%;
}
@media screen and (max-width: 1023px) {
  .reasons .head .ttl { font-size: 35px; letter-spacing: 0.05em;}
  .reasons .list h3 { font-size: 20px; letter-spacing: 0.05em; margin-bottom: 10px;}
  .reasons .list p { font-size: 18px;}
}
@media screen and (max-width: 767px) {
  .reasons { padding-bottom: 60px; }
  .reasons .head img { margin-bottom: 60px; width: 100%;}
  .reasons .head .ttl {
    font-size: 25px;
    position: static;
    transform: translateY(0);
    text-align: center;
  }
  .reasons .list { padding: 0;}
  .reasons .list li { display: block; margin-top: 50px;}
  .reasons .list .info { margin-bottom: 25px; width: 100%;}
  .reasons .list img { border-radius: 15px; width: 100%;}
}

/*=============== work ===============*/
.work {
  background-color: rgba(72, 194, 153, 0.05);
  padding: 250px 0 175px;
}
.work .wrap {
  margin: 0 auto;
  max-width: 1100px;
  width: calc(100% - 30px);
}
.work .ttl {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.work .list {
  padding: 0 45px;
}
.work .list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 220px;
}
.work .list .info {
  width: 44%;
}
.work .list li:nth-child(2) .info {
  width: 57%;
}
.work .list h3 {
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 25px;
}
.work .list p {
  font-size: 22px;
  font-weight: 500;
  line-height: 2;
}
.work .list img {
  border-radius: 30px;
  width: 51.5%;
}
.work .list li:nth-child(2) img {
  width: 40%;
}
@media screen and (max-width: 1023px) {
  .work { padding: 120px 0 100px;}
  .work .ttl { font-size: 27px;}
  .work .list li { margin-top: 100px;}
  .work .list h3 { font-size: 20px; letter-spacing: 0.05em;}
  .work .list p { font-size: 18px;}
}
@media screen and (max-width: 767px) {
  .work { padding: 60px 0;}
  .work .ttl { font-size: 20px;}
  .work .list { padding: 0;}
  .work .list li { display: block; margin-top: 50px;}
  .work .list .info,
  .work .list li:nth-child(2) .info { margin-bottom: 25px; width: 100%;}
  .work .list img,
  .work .list li:nth-child(2) img { border-radius: 15px; width: 100%;}
  .work .list li:nth-child(2) img { max-width: 200px; margin: 0 auto;}
}

/*=============== FAQ ===============*/
.faq {
  background-color: #fff;
  padding: 220px 0 120px;
}
.faq .wrap {
  margin: 0 auto;
  max-width: 1170px;
  width: calc(100% - 30px);
}
.faq .ttl {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.faq .list li {
  margin-top: 150px;
}
.faq .list .faq_q {
  background: url(../imgs/icon_q.png) no-repeat 0 0 / 45px;
  border-bottom: 1px solid #000;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 20px 42px 0 100px;
  position: relative;
}
.faq .list .faq_q:before {
  background-color: #000;
  content: "";
  display: block;
  height: 1px;
  width: 21px;
  position: absolute;
  right: 20px;
  top: 50%;
}
.faq .list .faq_q:after {
  background-color: #000;
  content: "";
  display: block;
  height: 22px;
  width: 1px;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.faq .list .faq_q.active:after {
  opacity: 0;
}
.faq .list .faq_q > p {
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.faq .list .faq_a {
  background: url(../imgs/icon_a.png) no-repeat 0 0 / 45px;
  display: none;
  max-width: 970px;
  padding: 10px 0 0 100px;
}
.faq .list .faq_a > p {
  font-size: 22px;
  font-weight: 500;
  line-height: 2;
}
.faq .list .faq_q_num {
  background-color: #48C299;
  border-radius: 50%;
  color: #FFF;
  display: block;
  font-weight: bold;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  left: 30px;
  top: 30px;
}
@media screen and (max-width: 1023px) {
  .faq { padding: 120px 0 100px;}
  .faq .ttl { font-size: 27px;}
  .faq .list li { margin-top: 100px;}
  .faq .list .faq_q { padding: 20px 42px 20px 70px;}
  .faq .list .faq_q > p { font-size: 18px; letter-spacing: 0.05em;}
  .faq .list .faq_a { padding: 10px 0 0 70px;}
  .faq .list .faq_a > p { font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .faq { padding: 60px 0;}
  .faq .ttl { font-size: 20px;}
  .faq .list li { margin-top: 50px;}
  .faq .list .faq_q > p { font-size: 18px;}
  .faq .list .faq_a > p { line-height: 1.7;}
}

/*=============== voice ===============*/
.voice {
  background-color: rgba(72, 194, 153, 0.05);
  background: #edf9f5;
  overflow-x: hidden;
  padding: 120px 0 80px;
}
.voice .wrap {
  margin: 0 auto;
  max-width: 1170px;
  width: calc(100% - 30px);
}
.voice .ttl {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 100px;
  text-align: center;
}
.voice__slide .slick-dots li button::before {
	content: "●";
  color: #D9D9D9;
	font-size: 10px;
  opacity: 1;
}
.voice__slide .slick-dots li {
  margin: 0;
}
.voice__slide .slick-dots li button:hover::before, 
.voice__slide .slick-dots li button:focus::before,
.voice__slide .slick-dots li.slick-active button::before {
	color: #48C299;
}
.voice .slick-slide {
  float : none;
}
.voice .slick-track {
  display : flex;
  justify-content : space-between;
  align-items : stretch;
  height : 100%;
}
.voice__item {
  background: #fff;
	margin: 0 20px 20px;
	padding: 25px 30px 50px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
  min-width: 350px;
  min-height: 670px;
	height: auto !important;
  text-align: center;
}
.voice__item-ttl {
  color: #48c299;
	font-size: 27px;
	margin-bottom: 15px;
	line-height: 1.8;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.voice__item-sub {
  color: #48c299;
	font-size: 24px;
  font-weight: 500;
	margin-bottom: 10px;
	line-height: 1.4;
}
.voice__item-img {
	width: 50%;
	min-width: 160px;
	display: block;
	margin: 0 auto 35px;
}
.voice__item-txt {
	font-size: 22px;
  font-weight: 400;
	line-height: 2;
	text-align: left;
	position: relative;
  min-height: 180px;
}
@media screen and (max-width: 1023px) {
  .voice .ttl { font-size: 27px;}
  .voice__item { margin: 0 10px 10px; min-width: 250px; min-height: 450px;}
  .voice__item { padding: 25px 15px ;}
  .voice__item-ttl { font-size: 18px;}
  .voice__item-sub { font-size: 14px;}
  .voice__item-img { min-width: 100px;}
  .voice__item-txt { font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .voice { padding: 60px 0;}
  .voice .ttl { font-size: 20px; margin-bottom: 50px;}
  .voice__item { min-height: inherit; min-width: inherit;}
  .voice__item-txt { font-size: 14px; min-height: inherit;}
}

/*=============== flow ===============*/
.flow {
  background-color: #48C299;
  padding: 160px 0 80px;
}
.flow .wrap {
  margin: 0 auto;
  max-width: 1100px;
  width: calc(100% - 30px);
}
.flow .btn_cv {
  margin: 0 auto 50px;
  max-width: 610px;
}
.flow .ttl {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 80px;
  text-align: center;
}
.flow .img {
  max-width: 1040px;
  margin: 0 auto 60px;
}
.flow .txt {
  color: #fff;
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .flow { padding: 120px 0 60px;}
  .flow .ttl { font-size: 27px;}
  .flow .btn_cv { max-width: 305px;}
  .flow .txt { font-size: 17px;}
}
@media screen and (max-width: 767px) {
  .flow { padding: 60px 0;}
  .flow .ttl { font-size: 20px; margin-bottom: 50px;}
  .flow .img { border-radius: 15px; overflow: hidden;}
  .flow .txt { font-size: 15px;}
}

/*=============== benefit ===============*/
.benefit {
  background-color: #fff;
  padding: 220px 0 50px;
}
.benefit .wrap {
  margin: 0 auto;
  max-width: 1330px;
  width: calc(100% - 30px);
}
.benefit .ttl {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 60px;
  text-align: center;
}
.benefit .ttl02 {
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 120px;
  text-align: center;
}
.benefit .list {
  display: flex;
  gap: 60px;
}
@media screen and (max-width: 1023px) {
  .benefit { padding: 120px 0 30px;}
  .benefit .ttl { font-size: 27px;}
  .benefit .ttl02 { font-size: 17px;}
}
@media screen and (max-width: 767px) {
  .benefit { padding: 60px 0 0;}
  .benefit .ttl { font-size: 20px; letter-spacing: 0.05em; margin-bottom: 20px;}
  .benefit .ttl02 { font-size: 15px; letter-spacing: 0.05em; margin-bottom: 50px;}
  .benefit .txt { font-size: 15px;}
  .benefit .list { flex-wrap: wrap; justify-content: center; gap: 15px; }
  .benefit .list li { max-width: 250px;}
}

/*=============== footer ===============*/
footer {
  margin: 100px 0 0;
  padding: 40px 20px 80px;
  text-align: center;
  background-color: #f2f2f2;
}
footer p a {
  position: relative;
  top: 0;
  transition: all 0.2s ease;
}
footer p a:hover {
  top: 3px;
  opacity: 0.8;
}
footer address {
  margin: 30px 0 0;
  font-size: 0.8125rem;
  font-style: normal;
}
footer img {
  display : block;
  width : 241px;
  margin : 0 auto;
}
@media screen and (min-width: 48em) { /* 768px md */
  footer {
    padding: 40px 20px 40px;
  }
}
/*=============== page_top ===============*/
#page_top {
  position: fixed;
  right: 15px;
  bottom: 10px;
  margin: 0;
}
#page_top p {
  margin: 0;
}
#page_top p a {
  position: relative;
  top: 0;
  transition: all 0.2s ease;
}
#page_top p a:hover {
  top: 3px;
  opacity: .5;
}
@media screen and (min-width: 48em) { /* 768px md */
  #page_top {
    right: 30px;
    bottom: 30px;
  }
}
.float-bnr {
  width : 220px;
  position : absolute;
  top : 0;
  right: 0;
  z-index: 101;
  margin-right: 20px;
  transform: translate(0, 30vh);
  opacity : 0;
  transition : .5s;
}
.float-bnr.fixed {
  position : fixed;
  opacity : 1;
}
.float-bnr-close {
  background: #48C299;
  border-radius: 50%;
  position : absolute;
  right : 0px;
  top : -10px;
  font-size : 25px;
  cursor : pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
}
@media screen and (max-width: 767px) {
  .float-bnr {
    width : 150px;
    margin-right : 5px;
    transform: translate(0, -85px);
    top : auto;
    bottom : 0;
  }
  .float-bnr-close {
    font-size : 20px;
  }
}

/*=============== PC SP display ===============*/
.pc { display :  block; }
.sp { display :  none; }
@media screen and (max-width: 767px) {
  .pc { display :  none!important; }
  .sp { display :  block!important; }
}

/*=============== swipe ===============*/


.swipe-area {
  width : 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  max-width: none;
  position : relative;
  padding-bottom: 20px;
}
.swipe-area img {
  max-width: none;
  height: auto;
  width: 1100px;
}
.swipe-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  display: none;
}
.swipe-icon img {
  position: relative;
  width: 100%;
  animation: horizontal 1s ease-in-out infinite alternate;
}

@keyframes horizontal {
  0% { transform:translate(-20%,-20%); }
  100% { transform:translate(30%,-20%); }
}

@media screen and (max-width: 767px) {
  .swipe-icon,
  .point3__con2 .swipe-icon img {
    display: block;
    width : 77px;
  }
}



/*.diagram {
  position: relative;
}
.swipe_scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.swipe_scroll img {
  display: inline-block;
  max-width: none;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

@media screen and (max-width: 768px) {
  .swipe_scroll {
    width: 100%;
    position: relative;
    height: 400px; 
  }

  .swipe_scroll img {
    width: auto;
    height: 400px;
  }

  .swipe_hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: swipe-motion 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
  }

  .swipe_hint img {
    height: 80px;
  }
}

  @keyframes swipe-motion {
    0%, 100% {
      transform: translate(-50%, -50%) translateX(0);
    }
    50% {
      transform: translate(-50%, -50%) translateX(-30px);
    }
  }*/