/* ===============================================
  index
=============================================== */

#topMsg {
  position: relative;
  background-image: linear-gradient(45deg, rgba(203,12,15,0.3), rgba(216,182,2,0.3), rgba(5,114,147,0.5), rgba(94,5,147,0.5));
  background-size: 100% 100%;
  animation: rainbowColor 12s 2;
  padding: 8%;
}

@keyframes rainbowColor {
  0% { background-color: rgba(187,1,1,0.5); }
  20% { background-color: rgba(32,147,5,0.5); }
  40% { background-color: rgba(5,114,147,0.5); }
  60% { background-color: rgba(94,5,147,0.5); }
  80% { background-color: rgba(216,182,2,0.5); }
  100% { background-color: rgba(187,1,1,0.5); }
}

#topMsg::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/index/main_bg_01.jpg") no-repeat center center #000;
  background-size: cover;
  z-index: -1;
}

#topMsg h1 {
  font-size: 13px;
  line-height: 1;
  font-weight: normal;
  color: #fff;
  margin: 0 0 20px;
  padding: 0;
}
#topMsg h1 .box {
  display: inline-block;
  border: 1px solid #fff;
  padding: 8px 14px;
}
#topMsg .fJpn {
  margin: 0;
  font-size: min(6vw,48px);
  line-height: 1.4;
  color: #fff;
  text-shadow: rgba(0,0,0,0.5) 1px 0 10px;
}

#topMsg .fEng {
  margin: 0 0 30px;
  font-size: min(4vw,20px);
  line-height: 1.1;
  color: #fff;
  text-shadow: rgba(0,0,0,0.5) 1px 0 10px;
}

/*@media screen and (min-width: 480px) and (max-width: 767px) {
  #topMsg .box {
    text-align: center;
  }

}*/

@media screen and (max-width: 767px) {
  #topMsg .youtubeShort {
    width: 50%;
    max-width: 240px;
    aspect-ratio: 9 / 16;
    margin: 20px auto 0;
  }
  #topMsg .youtubeShort video {
    width: 100%;
    height: 100%;
  }
}

@media screen and (min-width: 768px), print {
  #topMsg {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    height: 640px;
  }
/*  #topMsg .box {
    padding-left: 8%;
  }*/
  #topMsg .fJpn {
    font-size: min(4vw,48px);
  }
}

/* topWorks */
ul#topWorks {
  list-style: none;
  margin: -10px 0 0;
  padding: 0 1%;
}
ul#topWorks > li {
  display: block;
  height: 90px;
  font-size: min(5vw,24px);
  margin: 0 2% 15px;
}
ul#topWorks a {
  position: relative;
  display: block;
  height: 100%;
  color: #fff;
  border-radius: 5px;
}
ul#topWorks a .box {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  width: 78%;
  margin: 0;
  padding: 10px;
  text-align: left;
  border-radius: 6px;
  display: flex;
  align-items: center;
}

ul#topWorks a .box strong {
  border-right: 1px solid rgba(255,255,255,0.2);
  padding-right: 10px;
}

ul#topWorks a .box .cap {
  margin: 0;
  padding: 0 0 0 14px;
  font-size: min(4vw, 14px);
  line-height: 1.4;
  text-align: left;
}
ul#topWorks a .box .cap .fS {
  display: block;
  margin: 0;
  padding: 5px 0 0;
  line-height: 1.3;
}

@media screen and (min-width: 768px), print {
  ul#topWorks {
    display: flex;
    flex-wrap: wrap;
    margin: -20px 8%;
    padding: 0;
  }
  ul#topWorks > li {
    width: 48%;
    height: 120px;
    margin: 0 1% 20px;
   }
  ul#topWorks a .box {
    width: 70%;
  }
}

@media screen and (min-width: 1400px) {
  ul#topWorks > li {
    width: 23%;
    margin: 0 1% 10px;
   }
}

.newgradBg {
  background: url("../img/common/nav_cate_newgraduate.jpg?2025") no-repeat 0 center / contain #44c1a0;
}
ul#topWorks a.newgradBg .box {
  background-color: rgba(68,193,160,0.8);
}

.midcareerBg {
  background: url("../img/common/nav_cate_midcareer_hair.jpg") no-repeat 0 center / contain #349bcd;
}
ul#topWorks a.midcareerBg .box {
  background-color: rgba(52,155,205,0.8);
}

.estheBg {
  background: url("../img/common/nav_cate_midcareer_aesthetic.jpg") no-repeat 0 center / contain #e06189;
}
ul#topWorks a.estheBg .box {
  background-color: rgba(224,97,137,0.8);
}

.frontBg {
  background: url("../img/common/nav_cate_midcareer_front.jpg") no-repeat 0 center / contain #e0b433;
}
ul#topWorks a.frontBg .box {
  background-color: rgba(224,180,51,0.8);
}
ul#topWorks a::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/common/bgimg_right.png") no-repeat right 0;
  background-size: 30% auto;
  opacity: 0.2;
}

/* About Us
----------------------------------------------- */
#topAboutus {
  background: url("../img/common/bgimg_left.png") no-repeat 0 0;
  padding: 4rem 0;
}

#topAboutus .imgBox {
  text-align: center;
}

@media screen and (max-width: 959px) {
  #topAboutus .imgBox {
    margin-bottom: 2rem;
  }
  #topAboutus .imgBox img {
    width: 70%;
    max-width: 300px;
  }
}

@media screen and (min-width: 960px), print {
  #topAboutus {
    padding: 8rem 0;
  }
  #topAboutus .sideSp {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  #topAboutus .textBox {
    flex: 1;
    padding-right: 8%;
  }
}


/* aboutStaff
----------------------------------------------- */
#aboutStaff {
  position: relative;
}
#aboutStaff.secBox {/* 調整 */
  margin-bottom: 0;
}
#aboutStaff > .fEng {
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 20vw;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0.2;
  z-index: -1;
}
#aboutStaff #goodBox .textBox,
#aboutStaff #badBox .textBox {
  padding: 1rem 8%;
}
#aboutStaff .imgBox {
  margin: 1rem 0;
}

@media screen and (min-width: 768px), print {
  
  #aboutStaff > .fEng {
    top: -150px;
  }
  #aboutStaffImg img {
    width: 50%;
  }
}
@media screen and (min-width: 1440px) {
  #aboutStaffImg img {
    width: 25%;
  }
}


@media screen and (min-width: 768px), print {
  #activeStaff {
    padding-top: 3rem;
  }
}

@media screen and (min-width: 960px), print {
  
  #aboutStaff.secBox {/* 調整 */
    margin-bottom: 4rem;
  }
  #aboutStaff #goodBox {
    display: flex;
    align-items: center;
  }
  #aboutStaff #goodBox .textBox {
    width: 50%;
  }
  
  #aboutStaff #goodBox .imgBox {
    width: 50%;
  }
}

/* 動画
----------------------------------------------- */
#topPoint {
  position: relative;
  padding-right: 8%;
  padding-left: 8%;
}

#topPoint h2 {
  position: absolute;
  top: -4rem;
  left: 0;
  font-size: 20vw;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0.2;
}


@media screen and (min-width: 768px), print {
  
  #topPoint h2 {
    top: -6rem;
  }
  
}


/* このような方には */

#badBox h2 {
  text-align: center;
}
#badBox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#aboutStaff li {
  margin: 15px auto;
  padding: 0;
}
#badBox li .text {
  display: inline-block;
  background: rgba(253,220,219,0.8);
  margin: 0;
  padding: 5px 10px;
}

#badBox li .text {
  background: #ebebeb;
}

@media screen and (min-width: 768px), print {
  #badBox {
    text-align: center;
  }
}



/* 大切にする9つのこと
----------------------------------------------- */
#important {
  position: relative;
  text-align: center;
}
#important::before {
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
  width: 100%;
  height: calc(100% - 10px);
  background: url("../img/common/bgimg_right.png") no-repeat right center #f7f4e9;
  z-index: -1;
}

#important h2 {
  text-align: center !important;
}

#important ol {
  list-style: none;
  margin: 10px auto;
  padding: 0;
  max-width: 640px;
}
#important ol li {
  display: flex;
  align-items: center;
  background-color: rgba(255,255,255,0.7);
  border-radius: 6px;
  padding: 10px 0.6rem 10px 0;
  text-align: left;
}
#important ol li .fNum {
  font-size: 1.2rem;
  line-height: 1;
  width: 1.5em;
  text-align: center;
  color: #44c1a0;
}
#important ol li:nth-child(2n) .fNum { color: #349bcd; }
#important ol li:nth-child(3n) .fNum { color: #e06189; }

#important ol li .text {
  margin: 0;
  padding: 0 0 0 0.5rem;
  border-left: 1px dotted #393939;
  font-size: min(3.5vw, 18px);
}
#important ul li .text {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}
#important ul li .text::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 15px solid #e0edff;
}

@media screen and (min-width: 800px) {
  #important ol li .fNum {
    width: 2em;
  }
  #important ol li .text {
    padding-left: 0.8em;
  }
}

/* スタッフの働き甲斐を大切に */
#importantStaff {
  padding: 1rem 0 0;
}
#importantStaff ul {
  position: relative;
  list-style: none;
  max-width: 600px;
  margin: 3rem auto 0;
  padding: 0;
}
#importantStaff li {
  margin: 1rem auto;
  padding: 0;
  text-align: center;
}
#importantStaff li:not(:first-child):nth-child(odd) {
  text-align: right;
}
#importantStaff li:nth-child(even) {
  text-align: left;
}
#importantStaff .imgBox {
  text-align: center;
}
@media screen and (max-width: 800px) {
  
  #importantStaff ul {
    margin-top: 2rem;
  }

  #importantStaff li img {
    width: auto;
    max-height: 30px;
  }
  #importantStaff .imgBox img {
    width: 100%;
    max-width: 400px;
  }
}




/* お客様が抱くカルディアのイメージ
----------------------------------------------- */
#atmosphere {
  position: relative;
  background: url("../img/index/atmosphere_bgimg_01.jpg") no-repeat center center;
  background-size: cover;
  text-align: center;
  padding: 2rem 0;
  overflow: hidden;
}
#atmosphere .bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center  center;
}
#atmosphere .bgImg.img01 {
  background-image: url("../img/index/atmosphere_bgimg_01.jpg");
}
#atmosphere .bgImg.img02 {
  background-image: url("../img/index/atmosphere_bgimg_02.jpg");
}
#atmosphere .bgImg.img03 {
  background-image: url("../img/index/atmosphere_bgimg_03.jpg");
}
#atmosphere .bgImg.cover {
  background: rgba(34,24,21,0.2);
}

@media screen and (max-width: 639px) {
  /* スマホ表示では背景画像縦並び */
  #atmosphere .bgImg.img01 {
    height: 33.3%;
  }
  #atmosphere .bgImg.img02 {
    top: 33.3%;
    height: 33.3%;
  }
  #atmosphere .bgImg.img03 {
    top: 66.6%;
    height: 33.3%;
  }
}

@media screen and (min-width: 640px), print {
  /* PC表示では背景画像フェード切替 */
  #atmosphere .bgImg.img01 {
    animation: slideAnimation01 20s infinite;
  }
  #atmosphere .bgImg.img02 {
    animation: slideAnimation02 20s infinite;
  }
  #atmosphere .bgImg.img03 {
    animation: slideAnimation03 20s infinite;
  }
}

@keyframes slideAnimation01 {
  0% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  90% {opacity: 0}
  100% {opacity: 1;}
}
@keyframes slideAnimation02 {
  0% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slideAnimation03 {
  0% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

#atmosphere .box {
  position: relative;
  z-index: 10;
}
#atmosphere h2 {
  padding: 0 8%;
  text-align: center;
}

#atmosphere ul {
  list-style: none;
  margin: 0 8%;
  padding: 0;
}
#atmosphere li {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

@media screen and (max-width: 639px) {
  #atmosphere li img {
    width: auto;
    height: 60px;
  }
  #atmosphere li img.row2 {
    height: 80px;
  }
}

@media screen and (min-width: 640px), print {
  #atmosphere {
    padding: 4rem 0;
  }
  #atmosphere li {
    display: inline-block;
  }
  #atmosphere li:nth-child(1) {
    margin-right: -15px;
  }
  #atmosphere li:nth-child(2) {
    margin-top: 30px;
  }
  #atmosphere li:nth-child(3) {
    margin-top: 5px;
    margin-left: -15px;
  }
}


/* 大切なこと
----------------------------------------------- */
#topImportant .imgBox {
  margin: 0 auto;
  padding-top: 2rem;
  text-align: center;
  width: 50%;
  max-width: 300px;
}


@media screen and (min-width: 960px), print {
  #topImportant {
    display: flex;
    align-items: center;
  }
  #topImportant .box {
    flex: 1;
    padding-right: 8%;
    
  }
  #topImportant .imgBox {
    padding-top: 0;
    width: auto;
  }
}

/* -------------------- */

/* スライダーのスタイル */
.slider {
    text-align: center;
    margin: 0 8%;
}

/* ナビゲーションのスタイル */
.slider-nav {
  width: 84%;
  max-width: 800px;
  margin: 20px auto;
  text-align: center;
}
.balloon {
  position: relative;
  display: block;
  margin: 1.5em auto 0;
  padding: 7px 10px;
  color: #555;
  font-size: 16px;
  background: url("../img/common/bgimg_right.png") no-repeat right center #f7f4e9;
}

.balloon::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 15px solid #f7f4e9;
}


.slider-nav .slick-list img {
    width: 100%;
    padding: 0 10px;
    cursor: pointer;
}

@media (hover: hover) {
  .slider-nav .slick-list img:hover {
    opacity: 0.6;
  }
}

.prev-arrow {
    position: absolute;
    top: 100px;
    left: -40px;
}

.prev-arrow:hover {
	cursor: pointer;
}

.next-arrow {
  position: absolute;
  bottom: 100px;
  left: unset;
  right: -40px;
}

.next-arrow:hover {
  cursor: pointer;
}


/**/
ul.youtubeList {
  margin: 30px 5% !important;
  padding: 0;
  border: none;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
ul.youtubeList li {
  width: 47%;
}
ul.youtubeList li a {
  display: flex;
  flex-direction: column;
  height: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
ul.youtubeList li a:hover {
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
  transform: translateY(-4px);
  text-decoration: none;
}
ul.youtubeList li a:hover:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgb(0,0,0,0.4);
  border-radius: 6px;
}
ul.youtubeList li a:hover:after {
  content: "\f03d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  color: #fff;
}
ul.youtubeList li a img {
  border-radius: 6px;
}
ul.youtubeList li p {
  margin: 0;
  text-decoration: none;
  color: #393939;
  padding: 5px 0 0;
  font-size: min(2.5vw,11px);
  line-height: 1.4;
  text-align: center;
}
ul.youtubeList li p.excerpt {
  font-size: min(3vw,12px);
  position: relative;
  display: inline-block;
  margin: 1.5em 0 0;
  padding: 10px 10px 8px;
  width: 100%;
  background: rgba(235,235,235,0.8);
  text-align: left;
}
ul.youtubeList li p.excerpt::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 15px solid #ebebeb;
}
ul.youtubeList li p.excerpt::after {
  content: "Interview";
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}
ul.youtubeList li p .staffName {
  display: block;
  font-size: min(3vw, 11px);
  font-weight: bold;
}

@media screen and (min-width: 768px), print {
  ul.youtubeList li {
    width: 23%;
    max-width: 420px;
  }
  #aboutStaff ul.youtubeList li {
    margin: 15px 1%;
  }
}

@media screen and (min-width: 1600px) {
  ul.youtubeList li p .staffName {
    display: inline-block;
    margin-left: 10px;
  }
}