@charset "utf-8";
/* CSS Document */

/*トップページ style.css*/

/*----------------------------------------
  共通
----------------------------------------*/

.c-linkBtn01.grd {
  /* border-color: rgba(255,255,255,0); */
  color: #ed7889;
  transition: all .3s ease!important;
  background-color: rgba(255, 255, 255, 0);
}

.c-linkBtn01.grd:hover {
  border-color: #ed7889;
  color: #fff;
  background: rgb(237, 120, 137);
}

header {
  transition: all .4s;
}

header.transform {
  transition: all .4s;
}

header.transform .l-headerWrap {
  background: #fff;
}

@media print, screen and (min-width: 769px){
  header {
    opacity: 0;
  }
  header.transform {
    opacity: 1;
  }
}
@media screen and (max-width:768px){}

.p-video__wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e1c5d4;
}

.p-video__fix {
  position: fixed;
  left: 50%;
  bottom: 0;
  top: 0;
  margin: auto 0;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
  opacity: 0.5;
}

/*----------------------------------------
  ローディング
----------------------------------------*/

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner>div {
  width: 18px;
  height: 18px;
  background-color: #e77787;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/*----------------------------------------
  メインビジュアル
----------------------------------------*/

.l-mvCont {
  text-align: center;
  min-height: 760px;
  margin-bottom: 100px;
  position: relative;
}

.l-mvCont__copy {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.l-mvCont__copy * {
  font-family: 'Noto Serif JP', serif;
  color: #fff;
}

.l-mvCont__copy .eng {
  font-size: 1.5em;
}

.l-mvCont__copy .main {
  font-size: 5em;
  line-height: 1.6;
  margin: 1rem 0;
}

.l-mvCont__copy .sub {
  font-size: 1.2em;
}

.l-mvCont__copy .sub .big {
  font-size: 1.4em;
}

@media print, screen and (min-width: 769px) {
  .l-mvCont {
    padding-top: 90px;
  }
}

@media screen and (max-width: 768px) {
  .l-mvCont {
    min-height: fit-content;
    margin-bottom: 50px;
    height: 100vh;
    padding: 0 15px;
  }
  .l-mvCont__copy {
    right: 0;
    left: 0;
  }
  .l-mvCont__copy .eng {
    font-size: 1.2em;
  }
  .l-mvCont__copy .main {
    font-size: 2em;
    margin: 15px 0;
  }
  .l-mvCont__copy .sub {
    font-size: 1.2em;
  }
}

/*----------------------------------------
  イントロ #intro
----------------------------------------*/

#intro.l-secCont {
  position: relative;
  padding: 30px 0;
  margin-bottom: 150px;
  background: #fff;
}

.p-introWrap {
  text-align: center;
  padding: 150px 0;
  background-image: url(../images/common/logo_01_ico-pink.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.p-introWrap h3 {
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  #intro.l-secCont {
    margin-bottom: 80px;
  }
  .p-introWrap {
    padding: 30px 0;
  }
  .p-introWrap h3 {
    font-size: 1.15em;
  }
}

/*----------------------------------------
  サービス内容 #service
----------------------------------------*/

#service {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  max-width: 1200px;
  padding: 50px 0;
  margin: 0 auto 80px;
}

#service::before {
  content: '';
  display: inline-block;
  width: 99%;
  height: 98.8%;
  border: solid 1px #fff;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  content: none;
}

#service .p-ttl {
  margin-bottom: 50px;
}

#service .col-item {
  text-align: center;
}

#service .p-serviceName {
  background: #fff;
  padding: 5px 0;
  border-bottom: solid 3px #c7e1df;
}

#service .p-serviceName p {
  font-size: 14px;
}

@media print, screen and (min-width: 769px) {}

@media screen and (max-width: 768px) {
  #service .p-ttl {
    padding: 0 15px;
  }
}

/*----------------------------------------
  研修の目的　#purpose
----------------------------------------*/

#purpose {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  max-width: 1200px;
  padding: 50px 0 80px;
  margin: 0 auto 80px;
}

#purpose::before {
  content: '';
  display: inline-block;
  width: 99%;
  height: 98.8%;
  border: solid 1px #fff;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  content: none;
}

#purpose .p-ttl {
  line-height: 1.5;
  font-size: 2.2em;
  font-weight: 400;
  margin-bottom: 30px;
}

#purpose .p-aboutBtn a:hover img {
  opacity: 0.8;
}

@media print, screen and (min-width: 769px) {
  #purpose .l-flexBox {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 768px) {
  #purpose {
    padding: 50px 0;
  }
  #purpose .p-ttl {
    font-size: 1.5em;
  }
  #purpose .l-flexBox {
    margin-bottom: 50px;
  }
}

/*----------------------------------------
  研修プログラム　#program
----------------------------------------*/

#program.l-secCont {
  background-color: #fff;
  position: relative;
  padding: 80px 0;
  margin-bottom: 0;
}

#program.p-bg-flower {
  background-repeat: no-repeat!important;
  background-image: url(../images/common/bg-flower-l.png), url(../images/common/bg-flower-r.png)!important;
  background-position: left bottom, right top!important;
  background-attachment: fixed;
}

#program .p-program__list {
  position: relative;
  margin-bottom: 20px;
}

#program .p-program__list__img {
  z-index: 2;
}

#program .p-program__list__detail {
  background-color: #fff;
  border: solid 12px #c7e1df;
  position: relative;
  padding: 40px 60px 30px;
}

#program .p-program__list__detail::before {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  color: #c7e1df;
  writing-mode: vertical-lr;
  letter-spacing: 1px;
  position: absolute;
  top: 20px;
  right: 10px;
}

#program .p-program__list--hs .p-program__list__detail::before {
  content: "business human skill";
}

#program .p-program__list--cs .p-program__list__detail::before {
  content: "conceptual skill";
}

#program .p-program__list__detail__title {
  margin-bottom: 0.5em;
}

#program .p-program__list__detail__title p {
  font-size: 1.2rem;
  font-weight: 700;
}

#program .p-program__list__detail__link {
  text-align: right;
}

#program .p-program__list__detail__link p {
  border-bottom: dotted 2px #e77787;
  display: inline-block;
  padding: 0 10px 5px;
}

#program .p-program__list__detail__link p::before {
  content: ">";
  color: #e77787;
  margin-right: 10px;
}

@media print, screen and (min-width: 769px) {
  #program .p-program__list__img {
    margin-right: -30px;
  }
  #program .p-program__list__detail {
    margin-top: 30px;
  }
}

@media screen and (max-width: 768px) {
  #program.p-bg-flower {
    background-size: 40%;
    background-attachment: inherit;
  }
  #program .p-program__list__img {
    text-align: center;
    margin-bottom: 10px;
  }
  #program .p-program__list__detail {
    padding: 40px 30px;
  }
  #program .p-program__list__detail::before {
    right: 5px;
  }
  #program .p-program__list__detail__desc {
    margin-bottom: 1rem;
  }
}

/*----------------------------------------
  キャッチコピーアニメーション
----------------------------------------*/

.l-mvCont__copy .eng {
  animation-delay: 3s;
  font-family: 'Mr De Haviland', cursive;
  font-size: 50px;
}

.l-mvCont__copy .main {
  transition-delay: 3.7s;
}

.l-mvCont__copy .effect-fade {
  transform: translate(0, 10px);
}

.l-mvCont__copy .effect-fade.effect-scroll {
  transform: translate(0, 0);
}

.l-mvCont__copy .sub {
  transition-delay: 4.5s;
}

#header.effect-fade {
  transition-delay: 3.5s;
}

@media screen and (max-width:768px) {
  .l-mvCont__copy {
    margin-bottom: 80px;
  }
  .l-mvCont__copy .eng {
    font-size: 35px;
  }
}

/*----------------------------------------
  ○○○○○○○○
----------------------------------------*/

@media print, screen and (min-width: 769px) {}

@media screen and (max-width: 768px) {}