@charset "utf-8";
/* TOP */
.titH2 {font-size: 5.2rem; font-weight: bold; line-height: 1.2; margin-bottom: 2rem; letter-spacing: 0.05em;}

/* MV */
.mv {position: relative;}
.mv .mvSlider {position: relative; z-index: 1;}
.mv .mvSlider .slide {position: relative;}
.mv .txt {width: 54%; position: absolute; top: 4%; left: 2%; color: #fff; z-index: 2; line-height: 1;}
.mv .txt h2 {overflow: hidden; margin-bottom: 2rem;}
.mv .txt span {transition: 1.2s ease-in-out .3s; transform-origin: left; display: block; transform: translate3d(0,100%,0) skewY(0); -webkit-transform: translate3d(0,100%,0) skewY(0);}
.mv .txt p {margin-left: 3%; overflow: hidden; width: 35%;}
.mv .txt p span {transition: 1.2s ease-in-out 1.5s;}
.mv .txt.is-view span {transform: translate3d(0,0,0) skewY(0);}

/* WE ARE */
#weAre {background: url(../images/top/bg.jpg) no-repeat center center / cover; overflow: hidden;}
#weAre .img {width: 50%;}
#weAre .txt {width: 50%; color: #fff; position: relative; overflow: hidden; background: url(../images/top/img5.png) no-repeat bottom right / 70% auto;}
#weAre .txt .txtVer {color: rgba(255, 255, 255, 0.2); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; top: 0; left: 0; font-size: 7.7rem; line-height: 0.5;}
#weAre .txt .inner {width: 70%; max-width: 580px; margin: 0 0 0 20%; position: absolute; top: 20%;}
#weAre .txt h3 {font-size: 3.4rem; line-height: 1.4; letter-spacing: 0.05em; margin-bottom: 2rem; font-weight: 500;}
#weAre .txt .desc {line-height: 2;}
#weAre .txt a {display: block; max-width: 310px; width: 100%; padding: 2rem 2rem; background: rgba(255, 255, 255, 0.7); margin-top: 6rem; color: #084364;}
#weAre .txt a:hover {background: #e86336; color: #fff;}

/* Philosophy */
#philosophy {background: url(../images/top/bg.jpg) no-repeat center center / cover; background-size: cover; color: #fff; padding: 10rem 0 8rem;}
#philosophy h3 {font-size: 4.9rem; text-align: center; margin-bottom: 6rem; letter-spacing: 0.05em;}
#philosophy ul {max-width: 1740px; width: calc(100% - 40px); margin: 0 auto;}
#philosophy ul li {width: 32%; padding: 4rem; background: rgba(3, 40, 60, 0.8); text-align: center;}
#philosophy ul li .txt {padding: 0 1rem;}
#philosophy ul li .txt h4 {font-size: 2.4rem; margin: 1.5rem 0 1rem; min-height: 68px; line-height: 1.4;}
#philosophy ul li .txt p {text-align: left; line-height: 2; min-height: 160px;}
#philosophy ul li .txt .readMore {margin-top: 2rem; display: block; font-size: 1.7rem; text-align: center; padding: 1.5rem; background: rgba(255, 255, 255, 0.2); line-height: 1; transition: all 0.2s; min-height: unset;}
#philosophy ul li a:hover img {opacity: 0.8;}
#philosophy ul li a:hover .readMore {background: #e86336;}

/* Fort */
#fort {padding: 10rem 0; background: #557B4C; color: #fff; position: relative;}
#fort .txtVer {color: rgba(255, 255, 255, 0.2); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-weight: 800; position: absolute; top: 0; left: 0; font-size: 7.7rem; line-height: 0.5;}
#fort .inner {max-width: 1350px; width: calc(100% - 40px); margin: 0 auto;}
#fort .inner h3 {font-size: 4.9rem; text-align: center; margin-bottom: 2rem; letter-spacing: 0.05em;}
#fort .inner .txt {max-width: 1120px; width: 100%; margin: 0 auto 6rem; line-height: 2;}
#fort .inner .tit {text-align: center; background: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; font-size: 2.1rem; padding: 0.5rem;}
#fort .inner .spScroll .row1 {position: relative;}
#fort .inner .spScroll .row1::before {content: ''; position: absolute; top: 0; left: 0; width: 48%; height: 100%; background: rgba(255, 255, 255, 0.2);}
#fort .inner .spScroll .row1::after {content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.2);}
#fort .inner .spScroll {overflow-x: scroll;}
#fort .inner .spScroll .map img {width: 1349px; max-width: unset;}
#fort .inner .spScroll .mapTxt {width: 1349px; max-width: unset; font-size: 1.4rem; margin-top: 3rem; justify-content: flex-start;}
#fort .inner .spScroll .mapTxt li span {border: 1px solid #fff; border-radius: 20px; line-height: 1; padding: 2px 12px; font-family: 'Noto Sans', sans-serif; font-weight: bold; display: inline-block;}
#fort .inner .spScroll .mapTxt li p {margin-top: 1rem;}
#fort .inner .spScroll .mapTxt li:nth-of-type(1) {width: 17%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(2) {width: 13%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(3) {width: 14.5%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(4) {width: 14.5%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(5) {width: 15.5%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(6) {width: 17.5%;}
#fort .inner .spScroll .mapTxt li:nth-of-type(7) {width: 8%;}
#fort .inner .contact {display: block; max-width: 620px; width: 100%; margin: 4rem auto 0; text-align: center; font-size: 2.4rem; background: rgba(255, 255, 255, 0.05); padding: 2rem 0;}
#fort .inner .contact:hover {background: #606060;}
#fort .scroll {font-size: 1.6rem; margin-top: 4rem; display: flex; flex-wrap: wrap; align-items: center;}
#fort .scroll span {margin-right: 5rem;}
#fort .scroll img {  -webkit-animation: bounceRight 2s infinite; animation: bounceRight 2s infinite;}

/* Products */
#products {padding: 60px 0; background: url(../images/top/product_bg.jpg) no-repeat bottom right / cover; color: #fff; overflow: hidden;}
#products .inner {max-width: 1800px; width: calc(100% - 40px); margin: 0 auto 60px;}
#products .slider {max-width: 900px; width: calc(100% - 40px); margin: 0 auto;}
#products .item {width: 47%; text-align: center;}
#products .item .tit {display: block; font-size: 1.8rem; font-weight: bold; margin: 15px 0;}
#products .item .readMore {display: block; text-align: center; font-size: 1.5rem; padding: 10px 20px; background: rgba(255, 255, 255, 0.2); line-height: 1;}
#products .item a {display: block;}
#products .item a:hover .readMore {background: #e86336;}
#products .item a:hover img {opacity: 0.8;}

/* customerVoice */
#customerVoice {padding: 60px 0; background: #2D3A4E; color: #fff; overflow: hidden;}
#customerVoice .inner {max-width: 900px; width: calc(100% - 40px); margin: 0 auto 60px;}
#customerVoice .inner > p {margin-bottom: 60px;}
#customerVoice .col {width: 47%;}
#customerVoice .txt {font-size: 1.8rem; margin: 15px 0;}
#customerVoice .readMore {display: block; text-align: center; font-size: 1.5rem; padding: 10px 0; background: rgba(255, 255, 255, 0.2); line-height: 1;}
#customerVoice .readMore:hover {background: #e86336;}

/* Intro */
#intro {padding: 100px 0; overflow: hidden;}
#intro .inner {max-width: 1080px; width: calc(100% - 40px); margin: 0 auto;}
#intro .inner h2 {text-align: center; font-weight: bold; font-size: 3.2rem; margin-bottom: 40px; letter-spacing: 0.1em; line-height: 1.4;}
#intro .inner .col1 {width: 24%; text-align: center; line-height: 1;}
#intro .inner .col1 p:nth-of-type(1) {font-size: 1.2rem; margin-top: 10px; margin-bottom: 5px;}
#intro .inner .col1 p:nth-of-type(2) {font-size: 2rem; font-weight: bold;}
#intro .inner .col2 {width: 70%;}
#intro .inner .col2 .tit {font-size: 2rem; font-weight: 500;}
#intro .inner .col2 p {margin-bottom: 2rem}
#intro .inner .col2 a {display: block; text-align: left; font-size: 1.5rem; padding: 2rem; background: #000; color: #fff; line-height: 1; margin-top: 5rem; max-width: 310px; width: 100%; transition: all 0.2s;}
#intro .inner .col2 a:hover {background: #e86336; color: #fff;}

/* right bounce */
@-webkit-keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  60% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
@-moz-keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-30px);
  }
  60% {
    transform: translateX(-15px);
  }
}
@keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
/* /right bounce */

/* MEDIA */
@media (max-width: 1600px){
    .titH2 {font-size: 4rem;}
    
    .mv .txt h2 {font-size: 3vw;}

    #weAre .txt h3 {font-size: 2.6rem;}
    #weAre .txt .desc {line-height: 1.7;}
    #weAre .txt .txtVer {font-size: 6rem;}
    #weAre ul {margin-top: 30px;}

    #intro .inner h2 {font-size: 2.8rem;}
}   

@media (max-width: 1300px) and (min-width: 768px) {
    #weAre .txt .txtVer {font-size: 4vw;}
    #weAre .txt .inner {width: 80%; margin: 0 0 0 10%}

    #philosophy ul li {padding: 1rem;}
    #philosophy ul li .txt {padding: 0;}
    
    #fort .scroll {display: flex !important; justify-content: center;}
}

@media (max-width: 1080px) and (min-width: 768px) {
    #weAre .img {width: 100%; margin-bottom: 4rem;}
    #weAre .txt {width: 100%; background-size: auto 100%;}
    #weAre .txt .inner h3 {font-size: 3.4rem;}
    #weAre .txt .inner {position: static;}
}

@media (max-width: 767px){
    .titH2 {font-size: 6vw; letter-spacing: 0.1em; margin-bottom: 1rem;}

    .mv::before {content: ''; height: 150px; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ); position: absolute; top: 0; left: 0; z-index: 2;}    
    .mv .txt {width: 16%; top: 2%; left: 3%;}
    
    #weAre .txt {padding: 15% 0 0; width: 100%; background: none;}
    #weAre .txt .inner {position: static; transform: translateY(0); -webkit-transform: translateY(0); margin: 0 auto; width: 100%;}
    #weAre .txt .inner h3 {margin: 0 0 1rem 15%; font-size: 7vw;}
    #weAre .txt .inner p {margin: 0 15% 0 15%;}
    #weAre .txt .txtVer {font-size: 13vw;}
    #weAre .txt a {padding: 3.5vw; max-width: unset; margin-top: 8% !important; width: calc(100% - 40px); margin: 0 auto; text-align: center;}
    #weAre .img {width: 100%;}
    #weAre .map {text-align: center; margin-top: 2%;}
    #weAre ul {margin-top: 8%;}
    #weAre ul li {width: 100%; margin-bottom: 20px; text-align: center;}
    #weAre ul li:last-of-type {margin-bottom: 0;}
    
    #philosophy h3 {font-size: 6vw;}
    #philosophy ul {width: calc(100% - 40px); margin: 0 auto;}
    #philosophy ul li {width: 100%; padding: 0; margin-bottom: 5%;}
    #philosophy ul li:last-of-type {margin-bottom: 0;}
    #philosophy ul li a {display: flex; flex-wrap: wrap; justify-content: space-between;}
    #philosophy ul li picture {width: 37%; position: relative; overflow: hidden;}
    #philosophy ul li picture img {height: 100%; width: auto; max-width: inherit; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
    #philosophy ul li .txt {width: 63%; padding: 5%;}
    #philosophy ul li .txt h4 {font-size: 4vw; text-align: left; margin: 0 0 0.5rem; line-height: 1.4; min-height: unset;}
    #philosophy ul li .txt p {font-size: min(1.4rem, 3.5vw); min-height: unset; line-height: 1.6;}
    #philosophy ul li .txt .readMore {font-size: min(1.4rem, 2.5vw); margin-top: 1rem;}

    #fort  {display: flex !important;}
    #fort .txtVer {font-size: 13vw;}
    #fort .inner {width: calc(100% - 40px); margin: 0 auto;}
    #fort .inner h3 {font-size: 6vw; text-align: left; margin: 0 0 2rem 15%;}
    #fort .inner .tit {text-align: left;}
    #fort .inner .txt {padding: 0 10% 0 15%;}    

    #products {padding: 12% 0; background: #000 url(../images/top/product_bg_sp.jpg) no-repeat right bottom / auto auto;}
    #products .inner {width: 78%; margin-bottom: 5rem;}
    #products .item {width: 48%;}
    #products .item .tit {font-size: min(1.6rem, 3vw); margin: 1rem 0;}

    #customerVoice {padding: 12% 0;}
    #customerVoice .inner {width: 100%; margin: 0 auto;}
    #customerVoice .inner .titH2 {width: 78%; margin: 0 auto 2rem;}
    #customerVoice .inner > p {width: 78%; margin: 0 auto 2rem;}
    #customerVoice .col {width: 100%; margin-bottom: 40px; padding: 0 20px;}
    #customerVoice .col:last-of-type{margin-bottom: 0;}
    #customerVoice .txt{font-size: 1.6rem;}

    #intro {padding: 16% 0;}
    #intro .inner {width: 78%; margin: 0 auto;}
    #intro .inner .col1 {width: 100%; margin-bottom: 5%; text-align: center;}
    #intro .inner .col1 figure img {max-width: 350px; width: 100%;}
    #intro .inner .col2 {width: 100%;}   
    #intro .inner .col2 a {font-size: 1.6rem; width: 100%; max-width: 100%; text-align: center; background: rgba(0, 0, 0, 0.7);}
}

#schedule {
  padding: 60px 0;
  background: #4BA5CE;
  background: url(../images/top/bg01.jpg) no-repeat center center / cover;
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

#schedule .inner {
  max-width: 1400px;
  width: calc(100% - 40px);
  margin: 0 auto 60px;
}

#schedule .titH2 {
  text-align: center;
}

#schedule .box {
  border-radius: 16px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.77);
}

#schedule .scroll {
  font-size: 1.6rem;
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#schedule .scroll span {
  margin-right: 5rem;
}

#schedule .scroll img {
  -webkit-animation: bounceRight 2s infinite;
  animation: bounceRight 2s infinite;
}

@media (max-width: 767px){
  #schedule .spScroll {
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 20px;
  }

  #schedule .box img {
    width: 1000px;
    max-width: unset;
  }
}