/* ==========================================================================
Base
========================================================================== */
/* iPhone 320px */
@media only screen and (min-width:320px){html{font-size: 72%;}}
/* Android 360px 1.125 */
@media only screen and (min-width:360px){html{font-size: 74%;}}
/* iPhone6 375px 117.1875 */
@media only screen and (min-width:375px){html{font-size: 85%;}}
/* iPhone6 plus 414px 1.29375 */
/*@media only screen and (min-width:412px){html{font-size: 73%;}}*/
/* sm */
@media(min-width: 576px){
  html{font-size: 72%;}
  .container {max-width: 100%;}
  .position-sm-absolute {position: absolute;}
  .bg-sm-none {background: none!important;}
  .bottomRight-md {bottom: 0; right: 0; left: auto!important;}
}
/* md */
@media(min-width: 768px){
  html{font-size: 78%;}
  #menu-logo a {position: relative!important; top: auto!important; left: auto!important; transform:initial!important;}
  #logo.fixed {width: 13rem!important;}
  .position-md-absolute {position: absolute;}
  .bg-md-none {background: none!important;}
  .img-align-md-center{position:relative;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}
  .mah-md-64rem{max-height: 64rem;}
}
/* lg */
@media(min-width: 992px){
  html{font-size: 76%;}
  .position-lg-absolute {position: absolute;}
  .bg-lg-none {background: none!important;}
}
/*xl*/
@media(min-width:1200px){
  html{font-size: 78%;}
  #logo.fixed {width: 15rem!important;}
}
/*xl*/
@media(min-width:1366px){
  html{font-size: 80%;}
  .container {max-width: 1300px;}
  .ob-left img {object-position: 0%!important;}
  .ob-right img {object-position: 0%!important;}
}
/*xxl*/
@media(min-width:1440px){
  html{font-size: 85%;}
  .container {max-width: 1400px;}
}
@media(max-width: 575px){
  .brsp-sm-none br {display: none;}
  #staffmv img {object-position: 10% 0%!important;}
}
@media(max-width: 768px){
  .brsp-md-none br {display: none;}
}
@media(max-width: 991px){
  .brsp-lg-none br {display: none;}
}

@media screen and (min-width:577px) and ( max-width:991px) {
  .css-md-last-none > div:last-child {display:none!important;}
}

@media screen and (min-width:577px) and ( max-width:1199px) {
  .css-lg-last-none > div:last-child {display:none!important;}
}

/*xxl*/
/*@media(min-width:1600px){html{font-size: 104%;}}*/
html,html a{text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html,body{overflow-x: hidden;height: 100%;}
body{position: relative;background-color: #fff;min-height: 100%;height: auto; color: #000;font-family:TsukuGoPr5-D,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;letter-spacing: .005rem;background: none;font-weight: 300;}

p{font-family: 'Noto Sans JP', sans-serif;font-weight: 400;line-height: 1.8;text-align: justify;text-justify: inter-ideograph;}
li {font-family: 'Noto Sans JP', sans-serif;font-weight: 500;letter-spacing: .05em;}
h1,h2,h3,h4,h5,h6{font-family: 'Noto Sans JP', sans-serif;font-weight: 700;line-height: 1.6;}

.mt--6, .my--6 {margin-top: -3.5rem!important;}
.my--6 {margin-bottom: -3.5rem!important;}
.bw-2px {border-width: 2px!important;}
.bw-3px {border-width: 3px!important;}
.bw-4px {border-width: 4px!important;}
.bw-5px {border-width: 5px!important;}
.bw-6px {border-width: 6px!important;}

.text-shadow-blk {
    text-shadow: 1px 1px 2px rgb(0 0 0 / 60%), 0px 0px 13px rgb(0 0 0 / 60%), 0px 0px 6px rgb(0 0 0 / 60%);
}

/*お問合せフォームのデフォルト値を消す*/
/*input,textarea{appearance:none}*/

.select {
  cursor: pointer;
}
.select:after {
    display: inline-block;
    position: absolute;
    top: calc(50% - 3px);
    right: 15px;
    width: 0;
    height: 0;
    border-width: 10px 6px 0;
    border-style: solid;
    border-color: #000 transparent transparent;
    content: "";
}

/* font */
.font-TsukuGo-D{font-family: TsukuGoPr5-D;}
.font-TsukuGo-B{font-family: TsukuGoPro-B;}
.font-TsukuGo-E{font-family: TsukuGoPro-E;}
.font-TsukuGo-H{font-family: TsukuGoPro-H;}
.font-Din{font-family: DINNextLTPro-Regular;}
.font-Din-b{font-family: DINNextLTPro-Bold;}
.font-Din-c{font-family: DINNextLTPro-MediumCond;}
.font-telop{font-family: TelopMinProN-E;}
.font-NotoSans{font-family: 'Noto Sans JP', sans-serif;}
.font-NotoSans400{font-family: 'Noto Sans JP', sans-serif;font-weight: 400;}
.font-NotoSans500{font-family: 'Noto Sans JP', sans-serif;font-weight: 500;}
.font-NotoSans700{font-family: 'Noto Sans JP', sans-serif;font-weight: 700;}
.font-Kosugi{font-family: 'Kosugi', sans-serif;}
.shippori-mincho-400 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
.shippori-mincho-500 {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
}
.shippori-mincho-600 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}
.shippori-mincho-700 {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}
.shippori-mincho-800 {
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
}

.clr-red{color: #e70000}
.clr-yellow{color: #F6AB00}
.clr-blue{color: #003585}
.clr-blue02{color: #1e90ff}
.clr-pink{color: #ff69b4}
.clr-blue-light{color: #00A1EC}
.clr-green{color: #10823B!important}
.clr-green-light{color: #A9C300!important}
.clr-beige{color: #EAB060!important}
.clr-orange{color: #ff6347!important}

.ls-0105{letter-spacing: 0.15rem;}
.ls-0305{letter-spacing: 0.35rem;}


.z-0{z-index: 0;}
.z-50{z-index: 50;}
.z-100{z-index: 100;}

.bdr-none {
  border: none!important;
}

.p-center {
  position: absolute;
  top: 30%;
  left: 0;
  margin: auto;
}

.h-0 {height:0;}
.h-05rem{height: .5rem;}
.h-13vh{height: 13vh;}
.h-23vh{height: 23vh;}
.h-45vh{height: 45vh;}
.h-77vh{height: 77vh;}
.mh-5rem{min-height: 5rem;}
.mh-6rem{min-height: 6rem;}
.mh-20rem{min-height: 20rem;}
.mah-20rem{max-height: 20rem;}
.mah-21rem{max-height: 21rem;}
.mah-22rem{max-height: 22rem;}
.mah-23rem{max-height: 23rem;}
.mah-24rem{max-height: 24rem;}
.mah-26rem{max-height: 26rem;}
.mah-28rem{max-height: 28rem;}
.mah-35rem{max-height: 35rem;}
.mah-60rem{max-height: 60rem;}
.mah-64rem{max-height: 64rem;}
.mah-80vh{max-height: 80vh;}
.mw-100{max-width:100%!important;}

.pb-100 {padding-bottom: 100%;}
.word-break{word-break: break-word;}

.txt-ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mix-blend-screen {mix-blend-mode: screen;}

.bg-top01 {background: url(../img/c01.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-top02 {background: url(../img/c14.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-top03 {background: url(../img/c16.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-top04 {background: url(../img/c17.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
}
.palt {
  font-feature-settings: "palt" 1, "trad" 1;
}

.bg-top-recruit-cont {
    border-top-left-radius : 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-bottom-left-radius : 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-right-radius : 5rem;
    -webkit-border-top-right-radius: 5rem;
    -moz-border-radius-topright: 5rem;
    border-bottom-right-radius : 5rem;
    -webkit-border-bottom-right-radius: 5rem;
    -moz-border-radius-bottomright: 5rem;
}
.bg-cramschool {background: url(../img/lesson/mv.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-cramschool02 {background: url(../img/lesson/mv02.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-cherished {background: url(../img/about/mv.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
.bg-company {background: url(../img/company/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-about {background: url(../img/about/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-greeting {background: url(../img/greeting/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-lesson {background: url(../img/lesson/mv02.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-possible {background: url(../img/about/possible/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-vision {background: url(../img/about/vision/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-approach {background: url(../img/about/approach/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-construction {background: url(../img/about/construction/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-material {background: url(../img/about/material/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-equipment {background: url(../img/about/equipment/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-promise {background: url(../img/about/promise/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-qanda {background: url(../img/qanda/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-recruit {background: url(../img/recruit/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-case {background: url(../img/case/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-ob-interview {background: url(../img/ob/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-catalog {background: url(../img/catalog/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg-360view {background: url(../img/360view/mv.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.triangle-left {
  border-top: 50px solid #10823B;
  border-right: 50px solid #10823B;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

a,.page-link{color: #000;}
a:hover,.hvr-clr-pink:hover{color: #5A5A7C !important;text-decoration: none;}
a:active,a:focus {color: inherit; text-decoration: none;}
.hvr-red:hover{color: #ae0e16 !important;text-decoration: none;}

a:hover span.bbsd.d-inline-block.text-left{border-bottom-color: #5A5A7C !important;}
.img-align-bottom {position: relative;z-index: 1;top: 100%;left: 50%;transform: translate(-50%,-100%);}
.outline-none {outline:none;}
.c-p{cursor: pointer;}

.bg-stripe {background: linear-gradient(-45deg,#e6e6e6 50%, #F8F8F8 50%,#F8F8F8);}
.bg-stripe-grn {background: linear-gradient(-45deg,#009133 50%, #00A73B 50%,#00A73B);}
.bg-stripe-grn-2 {background: linear-gradient(45deg,#00A73B 40%, #009133 40%,#009133);}
.bg-stripe-beige {background: linear-gradient(-45deg,#f3f0df 50%, #dfdcca 50%,#dfdcca);}
.bg-stripe-beige-2 {background: linear-gradient(45deg,#dfdcca 40%, #f3f0df 40%,#009133);}
.bg-blk {background: #000;}
.bg-dark{background-color: #313639}
.bg-green{background-color: #10823B;}
.bg-green-light{background-color: #C3D600;}
.bg-green-light03{background-color: #F4FAF6;}
.bg-green-light04{background-color: #26c67d;}
.bg-green-light05{background-color: #CCFFCC;}
.bg-green03 {
  background-image: linear-gradient(90deg, rgba(229, 241, 229, 1) 75%, rgba(9, 144, 0, 1));
}
.bg-green04 {
  background-image: linear-gradient(90deg, rgba(9, 144, 0, 1), rgba(229, 241, 229, 1) 22%);
}
.bg-gray-light{background-color: #F7F8F8;}
.bg-gray-light02{background-color: #f0f0f0;}
.bg-gray-u-light{background-color: #fcfcfc;}
.bg-gray-mid{background-color: #e6e6e6;}
.bg-yellow{background-color: #F6AB00}
.bg-yellow-light{background-color: #ffffe2}
.bg-blue{background-color: #ebf2fc}
.bg-blue02{background-color: #4169e1}
.bg-blue-dark{background-color: #00002E}
.bg-gray-dark{background-color: #3f3f3f}
.bg-wht{background-color: #fff}
.bg-navy{background-color: #333355}
.bg-grg {background-color: #FF7A5A;}
.bg-d-gray{background-color: #E6E6E5;}
.bg-beige{background-color: #f9e5cd;}
.bg-beige-light{background-color: #FFF7ED;}
.bg-beige02{background-image: linear-gradient(90deg, rgba(227, 167, 34, 1), rgba(241, 236, 229, 1) 22%)}
.bg-orange{background-color: #FFC071;}
.txt-under{text-decoration: underline;}
.bg-blue-light{background-color: #D3E1E9;}

.bg-under-shadow:before {content:""; width: 100%; height: 8rem; position: absolute; bottom: 0;left: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); }


.bc-blk{border-color: #000!important}
.bc-dark{border-color: #313639!important}
.bc-green{border-color: #00A73B !important;}
.bc-green-light{border-color: #a2dbc7 !important;}
.bc-red{border-color: #e61919 !important;}
.bc-gray{border-color: #ccc !important}
.bc-gray-dark{border-color: #333 !important}
.bc-yellow{border-color: #F6AB00 !important}
.bc-blue{border-color: #003585 !important}
.bc-navy{border-color: #303253 !important}
.bc-orange{border-color: #303253 !important}
.bc-beige{border-color: #E3AD5F !important}

.bg-blue2{background-color: #1e90ff !important}
.bg-pink{background-color: #ff1493 !important}
.bg-pink02{background-color: #ff6347 !important}

.bg-purple{background-color: #9932cc !important}

.hvr-bg-green:hover{background-color: #7ec400 !important;}
.hvr-bg-gray-light:hover{background-color: #f8f8f8 !important;}
.hvr-bg-red:hover{background-color: #e61919 !important;}
.hvr-tdu:hover{text-decoration: underline;}
.hvr-clr-blk:hover{color: #333 !important;}
.hvr-clr-yellow:hover{color: #F7B101 !important;}
.hvr-clr-wht:hover{color: #fff !important;}
.hvr-clr-gray:hover{color: #f8f8f8 !important;}
.hvr-clr-Lightnavy:hover{color: #5C5C7F !important;}

.featherlight-sample {
  display: none;
}


.txt-line-wht {background: linear-gradient(transparent 13%, #fff 0%);}
.txt-line-blk {background: linear-gradient(transparent 13%, #000 0%);}
/*.txt-line-wht:after,.txt-line-blk:after {white-space: pre-wrap; content:" ";}*/

.liComment{padding-left: 1rem;}
  .liComment>li{position: relative;padding-left: .25rem;}
    .liComment>li::before{position: absolute;content: "*";top:0;left:-1.15rem;color: #191919;vertical-align: middle;font-size: 1em;}

/* loading
------------------------------------------*/
#loading {position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%;-moz-transition-property: color; -o-transition-property: color; -webkit-transition-property: color; transition-property: color; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;background: rgba(255, 255, 255,1)}
  #load-wrap {position: relative;left: -.35rem;width: 30rem; height: 6rem;-moz-transition: -moz-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s;}
  #loading.active {opacity: 0; z-index: -100;visibility: hidden;-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}

.spinner {position: relative;width: 3rem;height: 1.2rem;text-align: center;}
  .spinner > div {background-color: #999;height: 100%;margin-right: .15rem;width: 2px;display: inline-block;-webkit-animation: sk-stretchdelay 1.3s infinite ease-in-out;animation: sk-stretchdelay 1.3s infinite ease-in-out;}
  .spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
  .spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
  .spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
  .spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
  @-webkit-keyframes sk-stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.55) } 20% { -webkit-transform: scaleY(1.0) }}
  @keyframes sk-stretchdelay {0%, 40%, 100% { transform: scaleY(0.55);  -webkit-transform: scaleY(0.55);}  20% { transform: scaleY(1.0);  -webkit-transform: scaleY(1.0);}}


/* header
------------------------------------------*/
#mainlogo {transition: .9s cubic-bezier(.165,.84,.44,1);}
#mainlogo{background-image: url(../img/global/main_logo.svg);}

  .obfit img {width: 100%;height:100%;object-fit: cover; font-family: 'object-fit: cover; object-position: center;'}

  .ob-left img {object-position: 0 100%}
  .ob-right img {object-position: 100% 0}

  .loadshow {opacity: 0; transition: 1s;}
    .loadshow.open {opacity: 1;}
    #nav-header.open {transition-delay: .3s;}
    #copy.open {transition-delay: .4s;}
    #top-contact.open {transition-delay: .8s;}

  #menu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; opacity: 0; visibility: hidden;}
    #menu.open {opacity: 1; z-index: 80; visibility: visible;}
    #menu #menu-logo {opacity:0; transition: .5s cubic-bezier(.165,.84,.44,1);}
    #menu-logo a {position: fixed; top: 50%; left:16.5%; transform:translate(-50%,-50%)}
    #menu ul:before {content:""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background: #FFF; transition: .9s cubic-bezier(.165,.84,.44,1);}
    #menu li {position: relative;}
    #menu .fade {margin-left: -.5rem; opacity: 0; transition: .5s cubic-bezier(.165,.84,.44,1);}
      #menu li:before {content:""; width: 0rem; height: 1px; background: #fff; position: absolute; left: 0; top: 40%; transition: 2s cubic-bezier(.165,.84,.44,1);}

    #menu.open ul:before {height:100%; transition-delay: .3s;}
    #menu.open #menu-logo {opacity: 1; transition-delay: .2s;}
    #menu.open #menu-1:before {transition-delay: .2s;}
    #menu.open #menu-2:before {transition-delay: .3s;}
    #menu.open #menu-3:before {transition-delay: .4s;}
      #menu.open #menu-1 li:before {width: 7rem; transition-delay: .5s;}
      #menu.open #menu-2 li:before {width: 7rem; transition-delay: .6s;}
      #menu.open #menu-3 li:before {width: 7rem; transition-delay: .7s;}
    @media(min-width:1200px){
      #menu.open #menu-1 li:before {width: 10rem;}
      #menu.open #menu-2 li:before {width: 10rem;}
      #menu.open #menu-3 li:before {width: 10rem;}
    }
    #menu.open #menu-1 .fade {opacity: 1; margin-left: 0; transition-delay: .5s;}
    #menu.open #menu-2 .fade {opacity: 1; margin-left: 0; transition-delay: .6s;}
    #menu.open #menu-3 .fade {opacity: 1; margin-left: 0; transition-delay: .7s;}

  #hd-menu li {position: relative;}
    #hd-menu li:before {content:""; width: 0; height: 1px; background: #000; position: absolute; left: 0; top: 50%; transition: 1s cubic-bezier(.165,.84,.44,1);}
    #hd-menu a {display: block; background: #FFF; position: relative; z-index: 1; }
    #hd-menu a div {opacity: 0; margin-left: -.5rem; transition: 1s;}

    #mv a,#mv img {opacity: 1!important;}
    #mv.open #hd-menu-1:before {width: 5rem; transition-delay: .5s;}
    #mv.open #hd-menu-2:before {width: 5rem; transition-delay: .6s;}
    #mv.open #hd-menu-3:before {width: 5rem; transition-delay: .7s;}
    #mv.open #hd-menu-4:before {width: 5rem; transition-delay: .8s;}
    #mv.open a div {opacity: 1; margin: 0;}
    #mv.open #hd-menu-1 a div {transition-delay: .6s;}
    #mv.open #hd-menu-2 a div {transition-delay: .7s;}
    #mv.open #hd-menu-3 a div {transition-delay: .8s;}
    #mv.open #hd-menu-4 a div {transition-delay: .9s;}

  /* mv */
    #mv-sub {opacity: 0; margin-left: -.5rem; transition: 1s;}
    #mv-sub.open  {opacity: 1; margin-left:0;}

  /* menu-toggle */
    #menu-toggle {width: 4rem; height: 4rem; position: relative; cursor: pointer; border-radius:100%; background:#fff; z-index: 100; transition: .5s cubic-bezier(.165,.84,.44,1);}
    #menu-toggle.open {background: none;}
    #menu-toggle span {transition: .15s cubic-bezier(.165,.84,.44,1);box-sizing: border-box; display: block;background: #000;border-radius: 1px;}
    #menu-toggle #hamburger {position: absolute;height: 100%;width: 100%;}
    #menu-toggle #hamburger span {height: 3px;position: relative; top: .7rem; right: .7rem; margin: .5rem 0 .5rem auto;}
    #menu-toggle #hamburger span:nth-child(1) {width: 2.5rem; transition-delay: .5s;}
    #menu-toggle #hamburger span:nth-child(2) {width: 1.7rem; transition-delay: .625s;}
    #menu-toggle #hamburger span:nth-child(3) {width: 1rem; transition-delay: .75s;}
    #menu-toggle #cross {position: absolute;height: 100%;width: 100%;transform: rotate(45deg);}
    #menu-toggle #cross span:nth-child(1) {background: #fff; height: 0%;width: 3px;position: absolute;top: 25%;left: 2rem;transition-delay: 0s;}
    #menu-toggle #cross span:nth-child(2) {background: #fff; width: 0%;height: 3px;position: absolute;left: 25%;top: 2rem;transition-delay: .25s;}
    #menu-toggle.open #hamburger span {width: 0%;}
    #menu-toggle.open #hamburger span:nth-child(1) {transition-delay: 0s;}
    #menu-toggle.open #hamburger span:nth-child(2) {transition-delay: .125s;}
    #menu-toggle.open #hamburger span:nth-child(3) {transition-delay: .25s;}
    #menu-toggle.open #cross span:nth-child(1) {height: 50%;transition-delay: .625s;}
    #menu-toggle.open #cross span:nth-child(2) {width: 50%;transition-delay: .375s;}

    #contact-btn {width: 4rem; height: 4rem; background: #00A73B; border-radius:100%; font-size: 90%; opacity: 0;}
      #contact-btn.fixed {opacity: 1;}
      #contact-btn:hover {color: #00A73B; background: #fff;}

    @media(min-width: 576px){
      #contact-btn,#menu-toggle {width: 5rem; height: 5rem;}
      #menu-toggle #hamburger span {top: .8rem; right: .9rem; margin: .7rem 0 .7rem auto;}
      #menu-toggle #hamburger span:nth-child(1) {width: 3.2rem;}
      #menu-toggle #hamburger span:nth-child(2) {width: 2.2rem;}
      #menu-toggle #hamburger span:nth-child(3) {width: 1.2rem;}
      #menu-toggle #cross span:nth-child(1) {left: 2.4rem;}
      #menu-toggle #cross span:nth-child(2) {top: 2.4rem;}
    }

    @media(min-width: 992px){
      #contact-btn,#menu-toggle {width: 6rem; height: 6rem;}
      #contact-btn {font-size: 100%;}
      #menu-toggle #hamburger span {top: 1.2rem; right: 1.3rem; margin: .8rem 0 .8rem auto;}
      #menu-toggle #hamburger span:nth-child(1) {width: 3.5rem;}
      #menu-toggle #hamburger span:nth-child(2) {width: 2.5rem;}
      #menu-toggle #hamburger span:nth-child(3) {width: 1.5rem;}
      #menu-toggle #cross span:nth-child(1) {left: 2.9rem;}
      #menu-toggle #cross span:nth-child(2) {top: 2.9rem;}
    }


  /* label */
  .p-gram {position: relative; z-index: 1;}
  .p-gram:before {position: absolute; top: 0; left: 0; z-index: -1; content:""; width: 100%; height: 100%; background: #000; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}
  .label-slash:after {content: ''; position: absolute; display: inline-block; width: 4rem; height: 1px; margin-left: -1rem; background-color: #949494; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); }
  .col-stripe,.col-stripe:before {position: absolute; top: 0;  width: 100%; height: 100%;}
  .col-stripe {background: rgb(255,255,255); background: linear-gradient(-45deg, rgba(0,0,0,.2) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 2; left:0;}
  .col-stripe.red {background: rgb(255,255,255); background: linear-gradient(-45deg, rgba(181,0,0,1) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 2; left:0;}
  .col-stripe:before {content:""; background: linear-gradient(-45deg, rgba(255,255,255,1) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 1; left:1px;}

  .balloon {position: relative;}
  .balloon:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -15px;border: 15px solid transparent;border-top: 15px solid #000;}


  .triangle{
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1rem solid #003585;
}
  .triangle-sp{
    border-top: 1rem solid #003585;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
}

.balloon1-left {
  position: relative;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #FFF7ED;
}
.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 25px solid #FFF7ED;
}
.balloon1-left02 {
  position: relative;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #ccc;
}
.balloon1-right {
  position: relative;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #F4FAF6;
}
.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 25px solid #F4FAF6;
}
  /* link */
  [class*="i-link"] {position: relative;}
  [class*="i-link"] * {position: relative; z-index: 1;}
  [class*="i-link"]:hover {-webkit-transition:none!important; -moz-transition:none!important; -o-transition:none!important; transition:none!important;}
  [class*="i-link"]:after {height: 100%; content: ""; position: absolute;right: 0;top: 0;}
  [class*="i-link"]:hover:after {right:auto; left: 0;}
  .i-link {border: 2px solid #000; color: #000; background-color: #FFF;}
    .i-link:hover {color: #FFF!important;}
    .i-link:after {background: #000;animation: anim-out .2s ease forwards;}
    .i-link:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-blk {color: #fff; background-color: #000;}
    .i-link-blk:hover {color: #000!important;}
    .i-link-blk:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-blk:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-grn {border: 2px solid #00A73B; color: #fff; background-color: #00A73B;}
    .i-link-grn:hover {color: #00A73B!important;}
    .i-link-grn:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-grn:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .img-link a {display: block;}
    .img-link img {-webkit-transform: scale(1);transform: scale(1); transition: .8s cubic-bezier(.165,.84,.44,1); opacity: 1!important;}
    .img-link:hover img,.img-link.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}
    .img-link2 img {-webkit-transform: scale(1);transform: scale(1); transition: 4s cubic-bezier(.165,.84,.44,1); }
    .img-link2:hover img,.img-link2.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}

  .btn-share-twitter:hover{color:#55ACEE!important;}
  .btn-share-line:hover{color:#00C300!important;}
  .btn-share-facebook:hover{color:#3B5999!important;}

/* interview
------------------------------------------*/
  #interview p {font-size: 1.1rem;line-height: 1.8;margin-top: 1.5rem;}
  #interview .img-fluid {width: 100%;}
  @media(min-width: 576px){
    #interview p {font-size: 1.2rem;}
  }


  @media only screen and (min-width:375px){html{font-size: 85%;}}

/* ==========================================================================
wp plugin
========================================================================== */
  .wp-pagenavi,.wp-pagenavi * {display: inline-block;}
  .wp-pagenavi {font-family: DINNextLTPro-MediumCond; border-right:2px solid #000; font-size: 1.5rem;}
  .wp-pagenavi .current,.wp-pagenavi a, .wp-pagenavi .extend {padding:.2rem 1rem .1rem!important; margin: 0rem!important; border:2px solid #000!important; background: #FFF!important; border-right: none!important;}
  .wp-pagenavi .current {font-weight: 500!important; color: #aaaaaa!important;}
  .wp-pagenavi .pages {display: none; border: none; font-size: 1.5rem; margin-right:.5rem;}
  .wp-pagenavi a { -webkit-transition: .3s;transition: .3s;}
  .wp-pagenavi a:hover {color: #FFF!important; background: #000!important;}

  #pager a {display: block; width: 100%; padding:.5rem 0 ;}
/* ==========================================================================
plugin
========================================================================== */

/*! slick */
.slick-slide {outline: none!important;}
.slick-dots {position: relative !important; top:.2rem; line-height: 1;}
.loop-dots .slick-dots {top:0rem;}
  .slick-dots li{margin: 0 !important;}
.slider-nav button{background: none;}
.slider-nav .slick-current button{color: #19b7bd;}
.slick-dotted.slick-slider {margin-top: 0!important; margin-bottom: 0!important;}
.slick-dots li.slick-active button:before {opacity: 1!important;}

.mv-arrows {position: absolute; bottom: 1.5rem; width: 100%; z-index: 90;}
  .mv-arrows .slide-prev,.mv-arrows .slide-next {background: none; position: absolute;}
  .mv-arrows .slide-prev {left:5rem;}
  .mv-arrows .slide-next {right:5rem;}

.arrows {position: absolute; bottom: 1.5rem; width: 100%;}
  .arrows .slide-prev,.arrows .slide-next {background: none; position: absolute;}
  .arrows .slide-prev {left:-.5rem;}
  .arrows .slide-next {right:-.5rem;}

  @media(min-width: 576px){
    .arrows {bottom: auto; top: 50%;}
    .arrows .slide-prev {left:-1.6rem;}
    .arrows .slide-next {right:-1.6rem;}
  }

#slide .slick-slide {opacity: 0.2; transition: .8s cubic-bezier(.165,.84,.44,1);}
#slide .slick-current {opacity: 1;}
#slide .slick-list {overflow:visible;}


.motion-txt {display: inline-block;position: relative;overflow: hidden;}
.motion-txt:after {content: '';position: absolute;opacity: 1;left: 0;top: 0;bottom: 0;width: 100%;background-color: #fff;transform: translate3d(-101%, 0, 0);}
.motion-txt.mtaBfBlk:after {background-color: #000!important;}
.js-scroll.show .motion-txt:after {transition-property: transform, opacity;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(0, 0, 0);}
.js-scroll.done .motion-txt:after {transition-property: transform;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(103%, 0, 0);}
.js-scroll-mv.show .motion-txt:after {transition-property: transform, opacity;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(0, 0, 0);}
.js-scroll-mv.done .motion-txt:after {transition-property: transform;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(103%, 0, 0);}
.motion-txt .motion-inner {display: inline-block;opacity: 0;}
[class*="js-scroll"].done .motion-txt .motion-inner {opacity: 1;}


  /* link */
  [class*="i-link"] {position: relative;}
  [class*="i-link"] * {position: relative; z-index: 1;}
  [class*="i-link"]:hover {-webkit-transition:none!important; -moz-transition:none!important; -o-transition:none!important; transition:none!important;}
  [class*="i-link"]:after {height: 100%; content: ""; position: absolute;right: 0;top: 0;}
  [class*="i-link"]:hover:after {right:auto; left: 0;}
  .i-link {border: 2px solid #000; color: #000; background-color: #FFF;}
    .i-link:hover {color: #FFF!important;}
    .i-link:after {background: #000;animation: anim-out .2s ease forwards;}
    .i-link:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-blk {color: #fff; background-color: #000;}
    .i-link-blk:hover {color: #000!important;}
    .i-link-blk:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-blk:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-grn {border: 2px solid #00A73B; color: #fff; background-color: #00A73B;}
    .i-link-grn:hover {color: #00A73B!important;}
    .i-link-grn:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-grn:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .img-link a {display: block;}
    .img-link img {-webkit-transform: scale(1);transform: scale(1); transition: .8s cubic-bezier(.165,.84,.44,1); opacity: 1!important;}
    .img-link:hover img,.img-link.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}
    .img-link2 img {-webkit-transform: scale(1);transform: scale(1); transition: 4s cubic-bezier(.165,.84,.44,1); }
    .img-link2:hover img,.img-link2.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}

  .btn-share-twitter:hover{color:#55ACEE!important;}
  .btn-share-line:hover{color:#00C300!important;}
  .btn-share-facebook:hover{color:#3B5999!important;}


.triangle-top {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}

.bg-green-light02 {background: url(../img/top/bg-green.jpg) no-repeat;
    background-size: cover;
    background-position: top;
    overflow: hidden;
  }
.cont-title {
    border-top-left-radius : 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-bottom-left-radius : 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-right-radius : 5rem;
    -webkit-border-top-right-radius: 5rem;
    -moz-border-radius-topright: 5rem;
    border-bottom-right-radius : 5rem;
    -webkit-border-bottom-right-radius: 5rem;
    -moz-border-radius-bottomright: 5rem;
}
.bottomLeftCont {
  bottom: -1rem;
  left: 0;
}
.bottomLeftCont02 {
    bottom: -9rem;
    left: 0;
}
.bg-wht-angle{
    background:linear-gradient(to top left, #fff 50%, transparent 50%) top left/ 50% 100% no-repeat,
    linear-gradient(to top right, #fff 50%, transparent 50%) top right / 50% 100% no-repeat;
}

/*メニューボタン*/
#btn-menu {
  text-align: right;
  cursor: pointer;
}
#btn-menu p {
  background: url(../img/top/menu_icon_on.svg)no-repeat;
  background-position: 10px 3px;
  background-size: 15px;
  display: block;
  text-decoration: none;
  padding: 0 11px 0 35px;
}

/* メニューオープン */
.nav {
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: block;
}
#sp-menu {
  display: flex;
  visibility: hidden;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color:rgba(255,255,255,0.8);
  opacity: 0;
  transition: all .3s ease-in;
}
.sub_nav {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  width: 50vw;
  height: 100vh;
  background-color: #fff;
  transition: all .3s ease-in;
}
@media(max-width: 1100px){
  .sub_nav {
    width: 80vw!important;
    height: 100vh!important;
  }
}
@media(max-width: 750px){
  .sub_nav {
    width: 80vw!important;
    height: 100vh!important;
  }
}
@media(max-width: 500px){
  .sub_nav {
    width: 100vw!important;
    height: 100vh!important;
  }
}
.open-menu #sp-menu {
  visibility: visible;
  opacity: 1;
}
#sp-menu-position {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%,-50%);
  width: auto;
  height: auto;
  margin: 0 auto;
}
.close_btn {
  width: 100px;
  height: auto;
  border: 2px solid #10823B;
  border-radius: 20px;
  text-align: right;
  background: #10823B;
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.close_btn p {
  background: url(../img/global/close_icon.svg)no-repeat;
  background-position: 10px 5px;
  background-size: 12px;
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 0 11px 0 35px;
}

.num-row {counter-reset: number 0; }
.num-list {position: relative;}
.num-list:after {
  counter-increment: number 1;content:"0" counter(number) " ";
  position: absolute;
  top: -.6rem; right:-.3rem; color: rgba(0,0,0,.15);
  font-size:1.5rem; font-weight: bold;
}
@media(max-width: 380px){
  .num-list:after {
    counter-increment: number 1;content:"0" counter(number) " ";
    position: absolute;
    top: 0.3rem; right:-.3rem; color: rgba(0,0,0,.15);
    font-size:1.5rem; font-weight: bold;
  }
}

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 12秒かけて拡大させる */
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
    height: 600px; /* 600pxの高さで表示させる */
}

.Form-CheckItem {
  margin-top: 24px;
}
@media screen and (max-width: 480px) {
.Form-CheckItem {
  margin-top: 18px;
}
}
.Form-CheckItem-Label {
  margin-top: 20px;
  /* position: relative; */
  /* top: 0; */
  /* left: 0; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  cursor: pointer;
}
.Form-CheckItem-Label-Input {
  display: none;
}
.Form-CheckItem-Label-SquareIcon {
  border: 1px solid #ddd;
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background: #eaedf2;
}
@media screen and (max-width: 480px) {
.Form-CheckItem-Label-SquareIcon {
  width: 15px;
  height: 15px;
}
}
.Form-CheckItem-Label-Text {
  padding-left: 8px;
  font-size: 24px;
}
@media screen and (max-width: 480px) {
.Form-CheckItem-Label-Text {
  padding-left: 6px;
  font-size: 3.6vw;
}
}
.Form-Btn {
  /* border-radius: 6px; */
  /* margin-top: 32px; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  padding-top: 20px;
  padding-bottom: 20px;
  /* width: 280px; */
  display: block;
  /* letter-spacing: 0.05em; */
  background: #10824B;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  opacity: 0.2;
  pointer-events: none;
  transition: all 0.2s;
}
@media screen and (max-width: 480px) {
.Form-Btn {
  margin-top: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 160px;
  font-size: 16px;
}
}
.Form-Btn.isActive {
  opacity: 1;
  pointer-events: inherit;
}
.Form-CheckItem-Label-Input:checked + *:before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: #5bc8ac;
  transform-origin: bottom left;
  transform: rotateZ(90deg);
}
.Form-CheckItem-Label-Input:checked + *:after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background: #5bc8ac;
  transform-origin: bottom left;
  transform: rotateZ(0deg);
}
.Form-CheckItem-Label-Input:checked + * {
  width: 0;
  height: 0;
  transform: translate(8px, 8px) rotateZ(-135deg) scale(1.5);
}
@media screen and (max-width: 480px) {
.Form-CheckItem-Label-Input:checked + * {
  transform: translate(5px, 7px) rotateZ(-135deg) scale(1.5);
}
}
video {
  width: 100%!important;
  height: auto;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-80px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

.bg-beige-back {
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.d-demo__wrap {
  display: flex;
  overflow: hidden;
}
.d-demo__list {
  display: flex;
  list-style: none;
}
.d-demo__list--left{
animation :infinity-scroll-left 100s infinite linear 0.5s both;
}
.d-demo__item {
  width: calc(75vw / 3);
}
@media screen and (max-width: 800px) {
.d-demo__item {
  width: calc(90vw / 2);
}
}
.d-demo__item > img{
   width: 100%;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
.d-demo__list--right{
animation :infinity-scroll-right 60s infinite linear 0.5s both;
}

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}