@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap');

/* Base Setting
==========================================================*/
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.4rem; } /* 14px */

body { font-family: Oswald,"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif; font-weight: 500; margin:0; padding: 0; -webkit-text-size-adjust: 100%; letter-spacing: 0.1em; overflow-x: hidden; line-height: 1.8; font-feature-settings: palt; color: #000; position: relative; overflow-x: hidden;}

.fn_jp{font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif;;}

a { text-decoration: none; color: #000; outline:none; transition: .4s; }
a:hover { text-decoration: none;}
img { -ms-interpolation-mode: bicubic; max-width:100%; height: auto; vertical-align: middle;}
:focus { outline: 0; }
::-moz-selection { background: #729996; color: #fffcf7;}
::selection { background: #729996; color: #fffcf7;}

.flex-jcs{display: flex; justify-content: space-between;}

.tellink{pointer-events: none;}

/* layout
==========================================================*/
#wrapper{ position: relative; z-index: 5; }
.bgwrap{ position: absolute; width: 100vw; }

.skew1,.skew2{ padding: 7% 0; height: 65vh; position: relative; z-index: 1; }
.skew1::after{ content: ''; position: absolute; left:0; top: 0; transform: skewY(12deg); transform-origin: bottom right; z-index: 1; width:100%; height:50%; }
.skew2::after{ content: ''; position: absolute; left:0; top: 0; transform: skewY(-12deg); transform-origin: bottom left; z-index: 1; width:100%; height:100%; }

.bg-yellow::after{ background-color: #ffea00; }
.bg-beige::after{ background-color: #f9f6ed; }
.bg-gray::after{ background-color: #e6e5e5; }

.skew1.first::after{ display: none; }
.skew1 > div.wrap, .skew2 > div.wrap{ position: relative; z-index: 4; }

.btn{ max-width: 300px; width: 100%; border: 3px solid #000; display: inline-block; height: 80px; line-height: 70px; position: relative; margin-top: 60px; box-sizing: border-box;}
.btn::after{ content: ""; width: 25px; height: 25px; background: url(../images/common/btn_arow.svg) center center no-repeat; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.btn p{ font-size: 1.4rem; transition: all .5s ease;}
.btn:hover p{letter-spacing: 0.3em; transition: all .5s ease}

.wrap, .wrapInner{ height: 100%; }

/* common
==========================================================*/
.bg-yellow{ background-color: #ffea00; }
.bg-beige{ background-color: #f9f6ed; }
.bg-gray{ background-color: #e6e5e5; }
.bg-white{ background-color: #fff; }

.w1120{ max-width: 960px; width: 88%; margin: 0 auto; height: 100%;}
.w860{ max-width: 860px; width: 88%; margin: 0 auto; height: 100%;}
.w100m1600{ max-width: 1550px; width: 88%; margin: 0 auto; height: 100%;  }
.w88m1400{ max-width: 1400px; width: 88%; margin: 0 auto; height: 100%;  }
#ind-Page .w88m1400{ max-width: 1400px; width: 80%; margin: 0 auto; height: 100%;  }

.PC_letter_space_small{letter-spacing: 0.02em;}
.fn_24{ font-size: 2.4rem; }

.spbr {display: none;}
@media screen and (max-width: 420px){
  .spbr {display: block;}
}

/* Header
==========================================================*/
/* menu trigger */
.navInner { display: block; position: fixed; top: 22px; right: 80px; z-index: 5555 !important; height: 60px; width: 60px;  box-sizing: border-box; }
.navInner.active{ border-bottom: none; border-left: none; }
.menu-trigger { width: 100%; height: 100%; line-height: inherit; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}
.menu-trigger.active { margin-left: 0px; z-index: 999999; left: 30%;}
.menu-trigger,
.menu-trigger span { display: inline-block; transition:all .4s; box-sizing: border-box; }
.menu-trigger span{ position: absolute; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background-color: #333333; }
.menu-trigger span:nth-of-type(1){ top: 20px;}
.menu-trigger span:nth-of-type(2){ top: 28px;}
.menu-trigger span:nth-of-type(3){ bottom: 20px;}
/* .menu-trigger:not(.active):hover span:nth-of-type(1){ top: 2px;}
.menu-trigger:not(.active):hover span:nth-of-type(3){ bottom: 2px;} */
.menu-trigger.active span:nth-of-type(1){-webkit-transform:translateY(8px) rotate(-45deg);transform:translateY(8px) rotate(-45deg); background-color: #333333;}
.menu-trigger.active span:nth-of-type(2){opacity:0}
.menu-trigger.active span:nth-of-type(3){-webkit-transform:translateY(-9px) rotate(45deg);transform:translateY(-9px) rotate(45deg); background-color: #333333;}

.headlogo{ position: absolute; top: 31px; left: 80px; z-index: 5555 !important; }
.menu{ position: fixed; top: 22px; right: 80px; z-index: 5555 !important; width: 60px; height: 60px; box-sizing: border-box; transition: .4s; transition-duration: .8s;  }
.gnavul{ display: none ;}
.menu .gnavwrap{ background-color: #f9f6ed; border: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box; }
.menu .gnavwrap .gnavul{ padding: 95px 0; font-size: 1.6rem;}
.menu .gnavwrap .gnavul li:not(:last-child){ padding-bottom: 10px;}
.menu .gnavwrap .gnavul li a img{transform: translate(-11px, 5px);}
.menu.active{ width: 255px; height: 550px; transition: .6s;  }


/* Footer
==========================================================*/
footer{position: relative; z-index: 5;}
footer .wrapInner{ padding: 100px 0 30px; }
footer .wrapInner .imgwrap{ width: 88%; max-width: 1280px; margin: 60px auto; }
.footer_info{ width: 90%; margin: 60px auto 0; font-size: 1.2rem; letter-spacing: 0.05em }
.footer_info div.flex{ width: 100%; align-items:center;}
.footer_info p{ display: inline-block; font-size: 1.2rem; }
.footer_info a.poab{top: 50%; left: 50%; transform: translate(-50%,-50%); }
.footer_info .totop::after{ content: ""; width: 17px; height: 10px; background: url(../images/common/toTop.svg) center center no-repeat; background-size: cover; position: absolute; top: -15px; left: 51%; transform: translateX(-50%); }


.footer_illust {  line-height: 0; display: block; }
.footer_illust .elm_over{ position: absolute; top: 0; left: 0;  }
.footer_illust .elm_base { }
.footer_illust .elm_atten{ z-index: 1; opacity: 0; transition: all .2s ease-out 1.5s; }
.footer_illust .elm_mlogo{ z-index: 1;  }
.footer_illust .elm_mlogo2{ z-index: 3; }
.footer_illust .elm_arrow.delighter{ display: inline-block; transition: all .8s ease-out .5s; 
    max-width: 25%; position: absolute; top: -80%; left: -100%;  z-index: 2;
    opacity: 0;}

.delighter{}
.delighter.started{}
.delighter.started.ended {}

.footer_illust .elm_atten.delighter.started {opacity: 1; }
.footer_illust .elm_arrow.delighter.started{ opacity: 1; top: 8.5%; left: 28.5%; }

@media screen and (max-width: 600px){
   .footer_illust .elm_arrow.delighter{ display: inline-block; transition: all .8s ease-out .5s; 
    max-width: 40%; position: absolute; top: -50%; left: -100%;  z-index: 2;
    opacity: 0;} 
    .footer_illust .elm_arrow.delighter.started{ opacity: 1; top: 13.5%; left: 20%; }

}


/* Index
==========================================================*/
#ind-mv{background-color: #ffea00;}
#ind-mv .mvwrap01{top: 140px; z-index: 3;}
#ind-mv .mvwrap01 .mvimg04 { padding: 54px 0; width: 100%}
#ind-philo .ttlwrap{z-index: 2;}

.intro-wrap { margin-top: 100px; padding-bottom: 120px; }
/* .intro-wrap p.tb-lr{ transform: rotate(-90deg); display: inline-block; text-align: right; position: absolute; top: 80px; left: 130px; font-size: 4.5rem; color: #000; } */
.intro-wrap p.tb-lr::after{ content: ""; width: 2px; height: 100%; background-color: #000; position: absolute; bottom: 0; right: -20px; }
.intro-wrap p.tb-lr{width: 4%; margin-top: 10px;}
.intro-wrap p.txtwrap{ display: block; margin-left: 85px; font-size: 1.5vw; line-height: 2.2; }
.intro-wrap .wrapInner .flex{justify-content: center;}

/* FVアニメーション */
#ind-mv .mvimg.poab {z-index: 5; width: 100%}
/* ーーーーーー */

#ind-philo .wrapInner .ttlwrap .imgwrap {width: 45%;margin: 0 auto;}
#ind-philo{margin-top: 300px;}
#ind-philo .wrap{ padding: 0 0 6vw 0; position: relative; top: -200px;}
#ind-philo .wrapInner{ position: relative;}
#ind-philo .wrapInner .left_img{ max-width:550px; width:50%; position: absolute; top: -30%; left: -30%; }
#ind-philo .wrapInner .right_img{ max-width:550px; width:50%; position: absolute; top: -30%; right: -30%; }
.ind_enttl{ font-size: 4.2rem; margin-top: 10px; }
#ind-philo .txtwrap{max-width: 650px; width: 88%; margin: 10px auto 0; font-size: 1.4rem;}

#ind-service .ttlwrap.left .imgwrap {width: 30%;}
#ind-service  .word{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#ind-service  .word div{ width: 7000px; height: 175px; background: url(../images/index/word_bg.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}
#ind-service  .word div:nth-child(2) {
-webkit-animation: about-anim-sp2 120linear infinite normal;
animation: about-anim-sp2 120s linear infinite normal;
transform: translateX(-100%);/*初期位置*/
animation-delay: 1s;
}
@-webkit-keyframes about-anim-sp {
  100% {
    transform: translateX(-100%);
  }
}
@keyframes about-anim-sp {
  100% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes about-anim-sp2 {
  100% {
    transform: translateX(100%);
  }
}
@keyframes about-anim-sp2 {
  100% {
    transform: translateX(100%);
  }
}

#ind-service {margin-top: 300px;}
#ind-service .wrap{padding: 0 0 200px 0;position: relative; top: -280px;}
#ind-service .ttlwrap.left {padding-top: 130px;}
#ind-service .wrapInner{ position: relative; }
#ind-service .w88m1400.pore { z-index: 2; }
#ind-service .wrapInner .left p.txtwrap{max-width: 445px; width: 40%; margin-top: 10px; font-size: 1.4rem; text-align: justify;}
#ind-service .wrapInner .right{ width: 80%; top: 0; right: -20%; }

#ind-works .wrap { position: relative; top: -240px; }
#ind-works .wrapInner .ttlwrap .imgwrap{width: 50%;}
#ind-works .wrapInner .imgwrap{ width: 65%; margin: 0 auto; padding-top: 30px;}
#ind-works .wrapInner .ttlwrap .border{ display: inline-block; width: 300px; height: 80px; margin-top: 20px; border: 10px solid #f9f6ed; }
#ind-works .wrapInner .ttlwrap .border .btn{ margin-top: 0; box-sizing: border-box; }
#ind-works .wrapInner .small_img1{ top: 78px; left: 0; }
#ind-works .wrapInner .small_img2{ top: 58%; transform: translateY(-50%); left: -10%; }
#ind-works .wrapInner .small_img3{ top: 100%; left: 0; }
#ind-works .wrapInner .small_img4{ top: 50px; right: -8%; }
#ind-works .wrapInner .small_img5{ top: 55%; transform: translateY(-50%); right: -30px; }
#ind-works .wrapInner .small_img6{ top: 85%; right: -40px; z-index: 2;}
#ind-works .wrapInner p.txtwrap{max-width: 650px; width: 100%; margin: 10px auto 0; font-size: 1.4rem;}


#ind-company .wrapInner .ttlwrap .imgwrap{max-width: 490px; width: 35vw; margin-left: auto;}
#ind-company{ padding-bottom: 300px; }
#ind-company::before { content: ""; width: 100%; height: 100%; background-color: #e6e5e5; position: absolute; top: 100%; z-index: -1;}
#ind-company .wrapInner .right{ right: 0; z-index: 2;}
#ind-company .wrapInner .left{max-width: 900px; width: 70%; margin-left: -10%; position: relative; top: 70px;}
#ind-company .wrapInner p.txtwrap{max-width: 440px; width: 100%; margin-top: 10px; font-size: 1.4rem; margin-left: auto;}

#ind-map.skew1{ height: auto; padding: 0; margin-top: -305px;}
#ind-map.skew1::after{ display: none; }
#ind-map .imgwrap.poab{ max-width: 170px; width: 15vw; top: 49%; right: 4%; /*transform: translate(-50%, -50%);*/ }

#ind-recruit .wrapInner .ttlwrap .imgwrap {width: 36%;}
#ind-recruit .wrapInner{ padding: 130px 0; }
#ind-recruit .wrapInner .right{max-width: 780px; width: 60%; right: -5%; top: 50%; z-index: 3; transform: translateY(-50%); }
#ind-recruit .wrapInner .left p.txtwrap{max-width: 420px; width: 45%; margin-top: 10px; font-size: 1.4rem; text-align: justify;}

.sankaku{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 300px 0 0 100vw;
    border-color: transparent transparent transparent #e6e5e5;
    bottom: 100%;
}
#ind-works .sankaku{bottom: 100%; border-color: transparent transparent transparent #f9f6ed;}

.sankaku1{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100vw 300px 0;
    border-color: transparent #ffea00 transparent transparent;
    top: 100%;
}
#ind-service .sankaku1{ top: auto; bottom: 0; border-color: transparent #ffea00;}
.sankaku2{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 300px 100vw 0 0;
    border-color: #007bff transparent transparent transparent; 
}
#ind-philo .sankaku2{border-color: #e6e5e5 transparent transparent transparent; top: 100%;}

.sankaku3{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 300px 100vw;
    border-color: transparent transparent #000 transparent;
    bottom: 100%;
}
#ind-service .sankaku3{ border-color: transparent transparent #ffea00 transparent; }
#ind-company .sankaku3{ border-color: transparent transparent #e6e5e5 transparent; }



/* kasou-philo
==========================================================*/
.mt300{margin-top: 300px;}
#kasou .h1ttl h1{font-size: 5rem; font-weight: 600;}
#kasou .h2ttl h2{font-size: 4rem; font-weight: 600;}

.kasou-main .wrapInner{padding-top: 130px; padding-bottom: 50px; z-index: 2;}
.formstyle .kasou-main .wrapInner{padding-bottom: 0;}
.kasou-main .wrapInner .main-imgwrap{max-width: 470px; width: 66%; margin: 50px auto;}
.kasou-main .wrapInner .imgttl img{margin: 0 auto; display: inherit;}
.kasou-main .wrapInner .txtwrap{max-width: 1000px; width: 88%; margin: 50px auto 0; font-size: 2.5rem;}
@media screen and (max-width: 1400px){
.kasou-main .wrapInner .txtwrap{font-size: 1.8vw;}
}
.kasou-main .sankaku2{border-color: #ffea00 transparent transparent transparent;}
.kasou-main  .word{ position: absolute; top: 40%; left: 0; width: 100vw; z-index: 1; overflow: hidden;}
.kasou-main  .word div{ width: 7000px; height: 175px; background: url(../images/philosophy/slide-philo.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}
.service .kasou-main  .word div{ width: 7000px; height: 175px; background: url(../images/service/slide-service.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}
.works .kasou-main  .word div{ width: 7000px; height: 175px; background: url(../images/works/slide-works.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}
.company .kasou-main  .word div{ width: 7000px; height: 175px; background: url(../images/company/slide-company.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}
.recruit .kasou-main  .word div{ width: 7000px; height: 175px; background: url(../images/recruit/slide-recruit.png) 0 0 repeat-x; background-size: cover;
-webkit-animation: about-anim-sp 120linear infinite normal;
animation: about-anim-sp 120s linear infinite normal;
transform: translateX(0%);/*初期位置*/
animation-delay: 1s;
}

@-webkit-keyframes about-anim-sp {
  100% {
    transform: translateX(-100%);
  }
}
@keyframes about-anim-sp {
  100% {
    transform: translateX(-100%);
  }
}
.origin .sankaku3 { border-color: transparent transparent #e6e5e5 transparent; }
.origin .wrap > .wrapInner{width: 76%; margin: 0 auto; padding: 210px 0;}
.origin .wrap > .wrapInner .txtwrap{font-size: 1.6rem;}
.kinsoku, .origin .wrap > .wrapInner .txtwrap, .service-list .txtwrap, .features-list .txtwrap, .subwrap ul li, .teach-wrap .teachlist .flex .comment p{word-break: normal; line-break: strict; word-wrap: break-word; overflow-wrap: break-word;}

.origin .wrap{width: 88%; height: 100%; background-color: #fff; border: 10px solid #000; border-radius: 50px;box-sizing: border-box;position: relative; top: -200px;}
.origin .wrap .originttl{width: 100%; height: 107px; line-height: 107px; background-color: #000; color: #fff; top: -1px; left: 0;
  border-radius: 25px 25px 0 0; font-size: 4rem;} 
.origin section .h2ttl{padding-bottom: 18px; margin-bottom: 30px;}
.origin section .h2ttl::after{content: ""; width: 25px; height: 5px; background-color: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.origin section:not(:last-child){margin-bottom: 90px;}
.origin section .imgwrap{width: 100%; margin-bottom: 25px;}
.origin section .imgwrap .imgitem{width: 40%; margin: 0 auto; line-height: 150px;}
.origin section .imgwrap.logo .imgitem{width: 140px; margin: 0 auto; margin-top: 60px;}
.origin section.logo .imgwrap {height: auto;}
.origin_bottom{margin-top: -296px; z-index: 2;}
.origin_bottom .imgwrap .poab{top: 0; left: 0;}
.origin section .imgwrap.bg-yellow {height: 150px;}
.philosophy_ceo{width: 100vw; height: 768px; background: url(../images/philosophy/philosophy_map.jpg) center center no-repeat; background-size: cover; }
.philosophy_ceo .wrapInner{max-width: 1120px; width: 88%; margin: 0 auto; height: auto; transform: translateY(25%);}
.philosophy_ceo .wrapInner .flex-jcs div{animation: vertical 1s ease-in-out infinite alternate;}
.philosophy_ceo .wrapInner .flex-jcs div:nth-child(2){animation-duration: 1.7s}

.btn_arow2{position: relative;}
.btn_arow2::after{ content: ""; width: 18px; height: 18px; background: url(../images/common/btn_arow2.svg?a) center center no-repeat; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.btn_arow2::before{ content: ""; width: 40px; height: 40px; background: url(../images/philosophy/philo_logo.jpg) center center no-repeat; background-size: contain; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); }

.philosophy_ceo .wrapInner .imgwrap{width: 25%; margin: 0 auto;}
.balloon2 p { transition: all .5s ease; }
.balloon2:hover p { letter-spacing: 0.15em; transition: all .5s ease; }
.remodal h2{font-size: 6rem; font-weight: 600;}
.remodal .txtwrap{font-size: 2.1rem; margin-top: 15px;}

.remodal .remodalInenr {max-width: 700px; width: 88%; margin: 140px auto; text-align: left; background-color: #fff;border: 10px solid #000; padding-top: 100px; padding-bottom: 120px; border-radius: 40px;}
.remodal .txtwrap {}
.remodal .txtwrap span {display: block; margin-bottom: 25px; text-align: left; font-size: 2.9rem; letter-spacing: 0.15em;}
.remodal.modal-credo .txtwrap span{margin-bottom: 0;}
.remodal.modal-credo .txtwrap{margin-bottom: 55px;}
.remodal.modal-credo .txtwrap{font-size: 1.5rem;}
.remodal.modal-credo  .txtwrap span{font-size: 2.1rem; margin-bottom: 10px;}

.origin-people01{ width: 30%; top: -4%; right: -15%; z-index: 3;}
.origin-people02{ width: 35%; top: 10%; left: -20%; z-index: 3;}
.origin-people03{ max-width: 395px; width: 35%; top: 46%; right: -20%; z-index: 3;}
.origin-people04{ max-width: 322px; width: 30%; top: 66%; left: -16%; z-index: 3;}

/* 吹き出し */
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 15px 0;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #000;
  /* border: solid 4px #000; */
  box-sizing: border-box;
  width: 30%;
  font-size: 2.5rem;
  cursor: pointer;
  border-radius: 10px;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top: 9px solid #000;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 14px solid #000;
  z-index: 1;
}

.balloon2 p {
  margin: 0;
  padding: 0;
  color: #fff;
}



/* kasou-service
==========================================================*/
.service .kasou-main .wrapInner .main-imgwrap{max-width: 705px; width: 70%; margin: 50px auto;padding-left: 50px;}
.service .sankaku3 { border-color:  transparent transparent #e6e5e5 transparent; }
.service .btn { max-width: calc(25% - 5px); border: 5px solid #000; text-align: center; line-height: 1.5; border-radius: 10px; margin-bottom: 10px; margin-top: 0; padding: 46px 0; display: flex; align-items: center; justify-content: center;}
.service .btn::after{width: 18px; height: 18px; transform: rotate(90deg); transform-origin: right center;}
.service .btnwrap{flex-wrap: wrap; margin-bottom: 100px;}
.service .btnwrap.foot{margin-bottom: 0; margin-top: 100px;}
.service .btn p{padding-right: 0.8em;}

.service-mainwrap .wrapInner{position: relative; top: -180px;}

.service-list {padding: 180px 70px 100px; border: 15px solid #000; background-color: #fff; border-radius: 50px;}
.service-list:nth-child(odd) {background-color: #ffea00;}
.service-list:not(:last-child) {margin-bottom: 60px;}
.service-list .left .service-list-ttl h2{ font-size: 3.5rem; font-weight: bold; }
.service-list .left .service-list-ttl{padding-bottom: 20px; margin-bottom: 20px;}
.service-list .left .service-list-ttl::after{content: ""; width: 25px; height: 4px; background-color: #000; position: absolute; bottom: 0; left: 0;}
.service-list .label {color: #fff; background: #000; top: -2px; left: -1px; padding: 15px 10% 20px; line-height: 1; border-radius: 30px 0 50px 0;} 
.service-list .label span:nth-child(1){font-size: 3rem;} 
.service-list .label span:nth-child(2){font-size: 6rem; display: inline-block; margin-left: 10px;}
.service-list .txtwrap{width: 57%; font-size: 1.8rem;}
#copy.service-list .txtwrap{width: 58.3%;}
#illust.service-list .txtwrap{width: 58%;}
.service-list .right{width: 40%; top: 50%; transform: translateY(-50%); right: -40px;}

.service-list:nth-child(3) .right,
.service-list:nth-child(4) .right,
.service-list:nth-child(5) .right,
.service-list:nth-child(6) .right,
.service-list:nth-child(7) .right,
.service-list:nth-child(8) .right,
.service-list:nth-child(9) .right
{top: 50%; transform: translateY(-50%);}



/* kasou-works
==========================================================*/
.works .kasou-main .wrapInner .main-imgwrap{max-width: 1240px; width: 90%; margin: 50px auto;}
.features-wrap .sankaku3{ border-color:  transparent transparent #e6e5e5 transparent; }
.kasou_h2_ttl h2{font-size: 4rem; font-weight: 600; padding-bottom: 30px; margin-bottom: 55px;}
.kasou_h2_ttl h2::after{content: ""; width: 25px; height: 5px; background-color: #000; position: absolute; bottom: 0; left: 50%; transform: translate(-50%);}
.features-wrap .wrapInner{position: relative; top: -180px;}
.features-list {padding: 150px 70px 70px; border: 15px solid #000; background-color: #ffea00; border-radius: 50px 50px 0 0;}
.features-list:nth-child(even) {background-color: #ffea00;}
.features-list .left .features-list-ttl h2{ font-size: 3rem; font-weight: bold; }
.features-list .left .features-list-ttl{padding-bottom: 20px; margin-bottom: 20px;}
.features-list .left .features-list-ttl::after{content: ""; width: 25px; height: 4px; background-color: #000; position: absolute; bottom: 0; left: 0;}
.features-list .label {color: #fff; background: #000; top: -2px; left: -1px; padding: 15px 10% 20px; line-height: 1; border-radius: 30px 0 50px 0;} 
.features-list .label span:nth-child(1){font-size: 3rem;} 
.features-list .label span:nth-child(2){font-size: 6rem; display: inline-block; margin-left: 10px;}
.features-list .txtwrap{width: 55.5%; font-size: 1.8rem;}
.features-list2 .txtwrap{width: 57%;}
.features-list .right{width: 48%; top: -40px; right: -70px;}

.subwrap{padding: 55px 70px 55px; margin-bottom: 60px; border: 15px solid #000; border-top: none; border-radius: 0 0 50px 50px;}
.subwrap.last{ margin-bottom: 0;}
.subwrap ul li{padding-left: 90px; position: relative; font-size: 1.8rem; margin-bottom: 40px;}
.subwrap ul li::after{content: ""; width: 70px; height: 70px; background: url("../images/company/member10.png") center center no-repeat; position: absolute; left: 0; top: 0; background-size: contain;}
.subwrap ul li.B::after{background: url("../images/company/member09.png") center center no-repeat; background-size: contain;}
.subwrap ul li.C::after{background: url("../images/company/member07.png?200210") center center no-repeat; background-size: contain;}
.subwrap ul li.D::after{background: url("../images/company/member15.png") center center no-repeat; background-size: contain;}
.subwrap ul li.E::after{background: url("../images/company/member02.png") center center no-repeat; background-size: contain;}
.subwrap ul li.F::after{background: url("../images/company/member05.png") center center no-repeat; background-size: contain;}

.client .wrapInner{width: 88%; max-width: 1020px; margin: 0 auto; margin-top: -2%;}
.client-img .imgwrap {top: 0; animation: vertical 1s ease-in-out infinite alternate; width: 100%}
.client-img .imgwrap:nth-child(2), .client-img .imgwrap:nth-child(5) {animation-duration: 1.3s}
.client-img .imgwrap:nth-child(3), .client-img .imgwrap:nth-child(6) {animation-duration: 1.5s}
.client-img .imgwrap:nth-child(4), .client-img .imgwrap:nth-child(7) {animation-duration: 1.7s}
@-webkit-keyframes vertical {
  0% { transform:translateY(-8px); }
  100% { transform:translateY(  0px); }
}
@keyframes vertical {
  0% { transform:translateY(-8px); }
  100% { transform:translateY(  0px); }
}
.client .client_toC .wrapInenr{font-size: 1.8rem; margin-top: 60px;}
.client .client_toC span{font-size: 3.5rem;}
.client .client_toC span a{color: #9a1917; text-decoration: underline;}
.client .client-zenkoku{margin-top: 120px; padding-bottom: 150px;}
.client .client-zenkoku .imgwrap{width: 88%; max-width: 1400px; margin: 0 auto; margin-left: 12%;}
.client .client-zenkoku .imgwrap.poab{width: 50%; max-width: 720px; top: 0; left: 0;}


/* kasou-company
==========================================================*/
.linkUL{text-decoration: underline;}
.company .kasou-main .word { top: 21%;}
.company .imgttl{max-width: 1240px; width: 88%; margin: 0 auto;}
.company .kasou-main .wrapInner .main-imgwrap { max-width: 672px; width: 90%; margin: 50px auto; }
.company-profile{padding-top: 80px; padding-bottom: 100px;}
.tablewrap {max-width: 860px; width: 88%; margin: 0 auto;}
.tablewrap dl{display: flex; font-size: 1.8rem; font-weight: bold; border-top: 3px solid #000; padding: 25px 0; align-items: center;}
.tablewrap dl:last-child{border-bottom: 3px solid #000;}
.tablewrap dl dt{width: 180px;}
.tablewrap dl dd{width: calc(100% - 180px); line-height: 1.5;}
.tablewrap .fn_small{font-size: 1.5rem; line-height: 1.5;}
.tablewrap .db15{display: inline-block; margin-top: 15px;}
.tablewrap .line{position: relative;}
.tablewrap .line::after{content: "｜"; position: absolute; left: 45px; bottom: calc(-100% - 10px);}

.access-wrap .kasou_h2_ttl h2{margin-bottom: 0;}
.access-wrap .wrapInner{width: 88%; max-width: 960px; height: 100%; margin: 0 auto;}
.access-wrap .sankaku3{border-color: transparent transparent #f9f6ed transparent;}
.access-wrap .wrapInner .txtwrap{font-size: 2.1rem; left: 0; top: 50%; transform: translateY(-50%);}
.access-wrap .wrapInner .txtwrap .map-icon{display: inline-block; font-size: 1.5rem; margin-top: 30px;}
.access-wrap .wrapInner .txtwrap .map-icon::after{content: ""; width: 12px; height: 18px; background: url(../images/company/map-icon.svg) center center no-repeat; background-size: contain; position: absolute; right: -28px; top: 4px;} 
.access-wrap .wrapInner .imgwrap{max-width: 1030px; width: 90%; margin-left: auto;}
.access-wrap .sankaku1 { top: 100%; bottom: 0; border-color:  transparent #f9f6ed; }
.access-wrap .wrapInner .imgwrap .poab{top: 0; left: 0;} 

.member-wrap{padding-bottom: 90px;}
.member-wrap{padding-bottom: 35%;}
@media screen and (min-width: 1401px) {
.member-wrap{padding-bottom: 450px;}
}
.member-wrap .sankaku3{border-color: transparent transparent #f9f6ed transparent;}
.member-wrap .wrapInner .member_list{width: 18%; margin: 0 3.5% 60px;}
.member-wrap .wrapInner .member_list .name{font-size: 1.8rem; margin-top: 20px; line-height: 1.2;}
.member-wrap .wrapInner .member_list .name span{font-size: 1.3rem; margin-top: 8px; display: inline-block;}
.member-wrap .wrapInner > .flex{flex-wrap: wrap;}
.member-wrap .imgwrap.poab {max-width: 455px; width: 30%; bottom: 0; right: -10%; }
.member-wrap .imgwrap.comment02 { max-width: 400px; width: 30%; bottom: 6%; right: 24%; }
.member-wrap .imgwrap.comment02 img { opacity: 0; position: relative; top: 10px; }



.tooltip span.tooltip_cmt {
  background: #FFEA00;  color: #000;
  border: solid 4px #000; border-radius: 10px;
  box-sizing: border-box;
  width: 120%;
  padding: 10px; font-weight: bold; line-height: 1.5;
  position: absolute;
  top: -75px;
  left: -10%;
  z-index: 2;
  display: none;
}

.tooltip span.tooltip_cmt:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top: 9px solid #FFEA00;
  z-index: 2;
}

.tooltip span.tooltip_cmt:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 14px solid #000;
  z-index: 1;
}

/* reflection */
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(30) rotate(25deg);
        opacity: 0;
    }
}

.member_list .imgwrap {
    overflow: hidden; border-radius: 50%;
}
.member_list .imgwrap-in {
    position: relative;
}
.member_list .imgwrap-in:before {
    content: ""; position: absolute;
    background-image: -webkit-linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%, 
      rgba(255,255,255,0.5) 50%,
      rgba(255,255,255,0) 80%
    );
    background-image: linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0.5) 50%,
      rgba(255,255,255,0) 80%
    );
    width: 200%;
    height: 200%;
    top: -100%; 
    left: -200%;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
}
.member_list .imgwrap-in:hover:before {
  top: 0%;
  left: 100%;
}
/*
.member_list .imgwrap::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
*/


/* kasou-recruit
==========================================================*/
.recruit .kasou-main .wrapInner .imgttl img{max-width: 816px; width: 88%;}
.recruit .kasou-main .sankaku2{bottom: -80px;}
.recruit .teach-wrap.pore.mt300{margin-top: 80px; }
.recruit .w100hiden{width: 100%; overflow: hidden;}

.teach-wrap .wrapInner{margin-top: 10vw;}
.teach-wrap .sankaku3 { border-color: transparent transparent #e6e5e5 transparent; }
.teach-wrap .teachlist{padding-bottom: 135px;}
.teach-wrap .teachlist > .imgwrap{width: 50%; margin: 0 auto; margin-bottom: 40px}
.teach-wrap .teachlist .flex .imgwrap{width: 13.5%; margin-right: 50px;}
.teach-wrap .teachlist .flex .comment{width: 460px; box-sizing: border-box; padding: 30px 3%; border: 3px solid #000; font-size: 1.8rem; border-radius: 10px; position: relative;}
.teach-wrap .teachlist:nth-child(even) .flex{margin-left: auto; justify-content: flex-start; flex-flow: row-reverse;}
.teach-wrap .teachlist:nth-child(even) .flex .imgwrap{margin-right: 0; margin-left: 50px;}
.teach-wrap .teachlist:nth-child(even) .flex .comment{background-color: #fff;}

/* .teach-wrap .teachlist:nth-child(odd)::after{content: ""; width: 30%; height: 100%; background: url(../images/recruit/aruaru-odd.png) center center no-repeat; background-size: contain; position: absolute;right: -5vw; bottom: 5%;} 
.teach-wrap .teachlist:nth-child(even)::after{content: ""; width: 30%; height: 100%; background: url(../images/recruit/aruaru-even.png) center center no-repeat; background-size: contain; position: absolute; left: -5vw; bottom: 5%;}  */
.teach-wrap .teachlist .aruaru.oddwrap{width: 30%; right: -5vw; bottom: 7%;}
.teach-wrap .teachlist .aruaru.evenwrap{width: 30%; left: -5vw; bottom: 7%;}
.teach-wrap .teachlist .aruaru{animation: vertical 1s ease-in-out infinite alternate;}

.teach-miraisha .flex{width: 100%; justify-content: space-between; align-items: flex-end;}
@media screen and (max-width: 600px){
.teach-miraisha .flex{width: 120%; margin-left: -10%;}
}
.teach-miraisha .flex div.imgwrap:nth-child(1){ width: 30%; margin-bottom: 10px;}
.teach-miraisha .flex div.imgwrap:nth-child(2){width: 40%;}

.teach-miraisha div.imgwrap:nth-child(2){width: 24%; bottom: 0; left: 29%;}
.teach-miraisha div.imgwrap:nth-child(3){width: 21%; bottom: 15%; right: 23%;}
.teach-miraisha div.imgwrap:nth-child(4){width: 36%; top: 15%; left: 32%;}


@media screen and (min-width: 1300px){
.teach-wrap .teachlist:nth-child(odd)::after{right: -7vw;}
.teach-wrap .teachlist:nth-child(even)::after{left: -7vw;}
}
.teach-wrap .teachlist .flex{align-items: center;}
.teach-wrap .teachlist:nth-child(odd) .flex .comment::after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 100%; border: 15px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 15px; border-right: 15px solid #000; background-color: transparent; z-index: 1;
}
.teach-wrap .teachlist:nth-child(odd) .flex .comment::before{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 100%; border: 11px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 11px; border-right: 11px solid #ffea00; background-color: transparent; z-index: 2;
}
.teach-wrap .teachlist:nth-child(even) .flex .comment::after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; border: 15px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 15px; border-left: 15px solid #000; background-color: transparent; z-index: 1;
}
.teach-wrap .teachlist:nth-child(even) .flex .comment::before{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; border: 11px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 11px; border-left: 11px solid #fff; background-color: transparent; z-index: 2;
}
.teach-wrap > p{font-size: 10rem; transform: skewY(-12deg)!important; -moz-transform: skewY(-12deg)!important; -webkit-transform: skewY(-12deg)!important; -o-transform: skewY(-12deg)!important; -ms-transform: skewY(-12deg)!important; padding: 35px 0 15px;}
.teach-wrap .sankaku2 { border-color:  #e6e5e5 transparent transparent transparent; }

.messagewrap .sankaku3{border-color: transparent transparent #ffea00 transparent;}
.recruit_infowrap{padding-bottom: 150px;}
.recruit_infowrap .sankaku { border-color: transparent transparent transparent #f9f6ed; }
.recruit_infowrap .btn{margin: 60px auto 0; display: block;}

.messagewrap .flex{justify-content: center; align-items: center;}
.messagewrap .flex .imgwrap:nth-child(1){max-width: 598px;width: 52%;}
.messagewrap .flex .imgwrap:nth-child(2){max-width: 540px;width: 48%;}



/* kasou-recruit
==========================================================*/
.hissu{color: #c81414;}
.formstyle .kasou-main .wrapInner .txtwrap{font-size: 1.8rem;}



/* kasou_contact
========================================================== */
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; -moz-appearance: button; appearance: button; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration { display: none;}
input[type="submit"]::focus,
input[type="button"]::focus { outline-offset: -2px; }
textarea{-webkit-box-shadow: none; box-shadow: none;}
/*フォーム スタイル　リセット*/ 
input[type="text"], input[type="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; border-radius: 0; outline: none; background: none; }
.contactform button,input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;  }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; }


.contactform .form_wrap dl{display: flex; align-items: center; box-sizing: border-box;}
.contactform .form_wrap dl:not(:last-child){margin-bottom: 30px;}
.contactform .form_wrap dl dt{width: 30%;}
.contactform .form_wrap dl dd{width: 70%;}
.contactform .form_wrap dl dd input, .contactform .form_wrap dl dd textarea { width: 100%; padding: 20px 30px; font-size: 1.4rem; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #6d6d6d; letter-spacing: 0.05em; line-height: 1.5; background-color: #e6e5e5; font-weight: bold; border-radius: 0;}

input[type="submit"] { width: 300px; height: 80px; line-height: 70px; background-color: #ffea00; font-size: 1.5rem; margin-top: 50px; border: 3px solid #000; font-weight: bold; letter-spacing: 0.1em; } 

#submit[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#submit:hover{letter-spacing: 0.3em;}

select::-ms-expand { display: none; }
select{	-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 20px 10px 20px 30px; font-size: 1.4rem; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #6d6d6d; letter-spacing: 0.05em; font-weight: bold; border-radius: 0;}
.birthdaywrap div.flex dd{ margin-right: 30px; width: 90px; position: relative; }
.birthdaywrap div.flex dd::after{ content: ""; width: 8px; height: 24px; background: url(../images/common/select_arrow.png) center center no-repeat; background-size: contain; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.birthdaywrap div.flex dd:nth-child(1){ width: 125px; }

/*ラジオボタン スタイル*/ 
.occupationwrap dd input{ width: auto!important; }
.occupationwrap dd label{ padding-left: 30px!important; position: relative; display: block;}
input[type="radio"] { display: none; }
.occupationwrap dd label::before{ content: ""; width: 12px; height: 12px; border: 2px solid #000; position: absolute; top: 4.5px; left: 0; -webkit-transition:all .4s; transition:all .4s; border-radius: 50%;}
.occupationwrap dd label::after{ content: ""; width: 12px; height: 12px; background-position: center center; background-color: #ffea00; position: absolute; top: 6.5px; left: 2px; -webkit-transition:all .4s; transition:all .4s; opacity: 0; border-radius: 50%;}
input[type="radio"]:checked + .radio::after { opacity: 1; }
.occupationwrap label{ margin-right: 30px; position: relative; }

/* エラーボックス */
.error_box { display: none; width: 100%; text-align: center; box-sizing: border-box; border: 1px solid #e92b2b; color: #e92b2b; padding: 25px 20px; margin: 40px auto 20px; }
/* チェックボックス */
input[type="checkbox"]{ display: none; }
.privacycheck label{ padding-left: 30px !important; }
.privacycheck label::before{ content: ""; width: 12px; height: 12px; border: 2px solid #000; position: absolute; top: 4px; left: 0; -webkit-transition:all .4s; transition:all .4s;}
.privacycheck label::after{ content: ""; width: 12px; height: 12px; border: 2px solid #000; position: absolute; top: 4px; left: 0; background-color: #ffea00; -webkit-transition:all .4s; transition:all .4s; opacity: 0; }
input[type="checkbox"]:checked + .check::after { opacity: 1; }

.thankswrap{padding-bottom: 100px;}

.privacywrapInner p{margin-bottom: 30px;}
/* .privacywrapInner dl:not(:last-child){margin-bottom: 30px;} */
.privacywrapInner dd{margin-bottom: 30px;}
.privacywrapInner dd.mbnone{margin-bottom: 0;}

div#ind-Page, div#kasou {overflow: hidden;}


@media all and (-ms-high-contrast: none){
.service-list .txtwrap{width: 58%;}
.features-list2 .txtwrap{width: 58%;}
#ind-service .wrapInner .left p.txtwrap{width: 41%;}
}