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

.customers {
  background-color: #f4f9fa;
  color: #0b3e6d;
}
.bule-message {
  color: #395678;
  font-size: 1rem;
  font-weight: bold;
}
.representative-name {
  font-family: 'Yuji Syuku', serif;
  font-size: 1.5rem;
}
.overview {
  background-image: url("../image/info/company_message_bg.jpg");
  background-size: cover;
  background-position: inherit;
}
.inner-bg {
  background: #ffffffba;
  border-radius: 10px;
}
.overview p {
  font-size: 1rem;
  font-weight: 600;
  color: #395678;
}
.overview a {
  color: #395678;
  border-bottom: solid #395678 1px;
}
tr {
  width: 100%;
  font-size: 0.9rem;
}
th, td {
  display: block;
}
th {
  background: #395678;
  color: #fff;
  font-weight: 600;
  padding: 10px;
}
.fa-map-marked-alt:before {
  color: #395678;
}

/* ========
  eyecatch
================ */
#eyecatch .left .neko {
  bottom: 1%;
  left: -2%;
}
#eyecatch .left .oyako {
  bottom: -9%;
  right: 0%;
  z-index: 100;
}
.eyecatch-triangle {
  bottom: -1px;
  left: 0;
}

.slide-items {
  width: 100%;
  height: 100%;
}
.slide-items img {
  width: 100%;
  object-fit: cover;
}
.slider-zoon {
  /*height: 60vw;*/
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  /*width: 80vw;*/
  z-index: 0;
}
.slider-zoon .slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.slider-zoon .add-animation {
  animation: zoomUp 10s linear 0s normal both;
}


/* 頭をフリフリアニメーション */
.neko {
  transform-origin: center bottom;
  animation: furifuri 2s infinite;
}
@keyframes furifuri {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  51% {transform: rotate(5deg);}
  99% {transform: rotate(5deg);}
  100% {transform: rotate(0deg);}
}



/* ========
  message
================ */
#message h3 {
  line-height: 1.8;
}


/* ========
  works
================ */
#works {
  background: #324267;
}
#works .img-cover {
  height: 180px;
  background-color: #324267;
}
#works .img-cover img {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
#works .title-en {
  color: white;
}
#works .new {
  width: 65px;
  height: 65px;
  right: 7%;
  top: 5%;
  object-fit: contain;
}



/* ========
  topics
================ */
#topics .topics-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}
#topics img {
  width: 100%;
  height:150px;
}
#topics .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}
#topics .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
#topics .slick-prev, 
#topics .slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

#topics .slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
#topics .slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
#topics .slick-prev:before,
#topics .slick-next:before {
  color: #333!important;
  display: none;
}

#topics .slash::before,
#topics .slash::after {
  display: inline-block;
  transform: scaleX(-1);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f715";
  color: #80AECD;
}
#card {
  border: solid #548e8b 2px;
  background: #ebf3f3;
  border-radius: 15px;
}
/* ========
  column
================ */
#column {
  background: #F2F2F2;
}
#column .img-cover {
  height: 150px;
}
#column .img-cover img {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

#column .reforme .slash::before,
#column .reforme .slash::after {
  display: inline-block;
  transform: scaleX(-1);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f715";
  color: #CD898D;
}
#column .reforme .slash::before {
  margin-right: 1rem;
}
#column .reforme .slash::after {
  margin-left: 1rem;
}

#column .katsudou .slash::before,
#column .katsudou .slash::after {
  display: inline-block;
  transform: scaleX(-1);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f715";
  color: #80AECD;
}
#column .katsudou .slash::before {
  margin-right: 1rem;
}
#column .katsudou .slash::after {
  margin-left: 1rem;
}

#column .text-overflow-multiple {
  -webkit-line-clamp: 2;
  height: 2.9rem;
  line-height :1.5;
}
#column .slick-prev:before,
#column .slick-next:before {
  color: #80aecd;
}

/* ========
  company
================ */
#company .bg-tate {
  background: #F2F2F2;
}

@media(min-width:768px) {
  .bule-message {
  font-size: 1rem;
}
  .overview p {
    font-size: 1.2rem;
    font-weight: 400;
    border-right: solid 1px #395678;
  }
  tr {
    display: flex;
    font-size: 1rem;
  }
  th {
    background: #00000000;
    color: #395678;
    font-weight: 400;
  }

  #eyecatch .left .neko {
    top: 3%;
    left: 3%;
  }
  #eyecatch .left .oyako {
    bottom: 0;
    right: 10%;
    z-index: 100;
  }
  #works {
    background: linear-gradient(180deg, white 0%, white 45%, #324267 45%, #324267 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #works .img-cover {
    background-color: white;
  }
  #works .title-en {
    color: black;
  }
  #column {
    background: linear-gradient(180deg, white 0%, white 40%, #F2F2F2 40%, #F2F2F2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #company .bg-tate {
    background: linear-gradient(90deg, white 0%, white 20%, #F2F2F2 20%, #F2F2F2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}