/* 共通設定 */
body {
  font-family: 'Lato', sans-serif;
  color: #0A1D37;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 4%;
}

.sp {
  display: none;
}

.fadeUpTrigger{
  opacity: 0;
  }

  .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 右上のボーダー */
.header-border {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  transition: all 0.6s;
}

.border {
  width: 10px;
  height: 50px;
}

.border.left {
  background: #10ddd6;
}

.border.right {
  background-color: #0A1D37;
}

.openbtn {
  width: 45px;
  height: 45px;
  position: relative;
  padding-left: 10px;
}

.openbtn span {
  display: inline-block;
  transition: all .4s;
  /*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #0A1D37;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
  top: 15px;
}

.openbtn span:nth-of-type(2) {
  top: 23px;
}

.openbtn span:nth-of-type(3) {
  top: 31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
  z-index: 100000;
  background: #ffffff;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
  /*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
  z-index: 100000;
  background: #ffffff;
}

/* header */
/* header { */
/* display: flex; */
/* justify-content: space-between; */
/* } */

.sitecopy {
  font-size: 12px;
  letter-spacing: 7px;
}

.logo {
  font-size: 40px;
  letter-spacing: -2px;
  font-weight: bold;
}

/* 要素を横並びにさせる */
.logoarea {
  padding-top: 1.5%;
  display: inline-block;
}

.top-navi {
  display: inline-block;
  padding-left: 4%;
}

.navi-common {
  line-height: 6;
}

.list-common {
  display: inline-block;
  padding: 0 30px;
  transition: 0.4s;
}

.list-common:hover {
  cursor: pointer;
  color: #10ddd6;
}


/* 隠れバナー */


.top-hidenavi {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: -250%;
  left: 0;
  width: 100%;
  height:auto;
  /*ナビの高さ*/
  background: #0A1D37;
  /*動き*/
  transition: all 0.6s;
}

.panelactive{
  top: 0;
}

.hidelist {
  display: block;
  text-align: center;
  color: #ffffff;
  transition: 0.5s;
  line-height: 4;
}

.hidelist:hover {
  color: #10ddd6;
}


/*  slickのCSS */
/* メインスライドが表示されるように高さを設定 */
.slick-track {
  height: 600px;
}

/* スライダー */
.main-slider {
  background-color: #ececec;
}

.slider-common {
  height: 100vh;
  margin: 80px 30px 60px 30px;
  background-size: cover;
}

.main-slider-common {
  box-shadow: 10px 10px 15px -10px;
}


.img01 {
  background-image: url("../image/slider-img01.jpeg");
}

.img02 {
  background-image: url("../image/slider-img02.png");
}

.img03 {
  background-image: url("../image/slider-img03.png");
}

.topcopyarea {
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  background: linear-gradient(to bottom, #ececec 0%, #ececec 50%, #ffffff 50%, #ffffff 100%);
}

.topcopy1 {
  font-size: 80px;
}

.topcopy2 {
  padding-top: 1%;
  letter-spacing: 7px;
  font-size: 21px;
}

/* コンテンツ */
.contents {
  padding: 60px 0 100px 0;
}

.contents-text {
  text-align: center;
  font-weight: bold;
  letter-spacing: 7px;
  line-height: 2.5;
}


/* work */
.work {
  position: relative;
  overflow: hidden;
}

.work-title {
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
}

/* ワークのスライダー */
/* ワークスライダーとテキストを表示させるため高さの設定 */
.work-slider>.slick-list {
  height: 700px;
}

/* スライド画像とテキストを表示させる */
.work-slider-common {
  height: 420px;
}

/* スライダー画像 */
.work-slider-img01 {
  background-image: url("../image/work-slider-img01.png");
}

.work-slider-img02 {
  background-image: url("../image/work-slider-img02.png");
}

.work-slider-img03 {
  background-image: url("../image/work-slider-img03.png");
}

/* スライダー下のテキスト */
.text-slider-common {
  margin: 0 30px;
  letter-spacing: 2px;
  line-height: 2;
}

/* スライダー下のタイトル */
.text-slider-title {
  font-weight: bold;
  line-height: 3;
  letter-spacing: 1px;
}



.btn {
  text-align: center;
  width: 300px;
  margin: 0 auto;
  line-height: 3;
  border: solid 1px;
  transition: 1s;
  margin-bottom: 150px;
  margin-top: 75px;
}

.btn:hover {
  background-color: #0A1D37;
  color: #ffffff;
  cursor: pointer;
}

.work-bg {
  background-color: #ececec;
  width: 65%;
  height: 380px;
  position: absolute;
  z-index: -1;
  top: 4%;
  left: 35%;
}

/* service */
.service {
  border: solid 10px;
  position: relative;
  left: -10%;
  padding: 1% 12% 6% 15%;
  margin-bottom: 230px;
}

.service-title {
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  transform: rotate(90deg);
  position: absolute;
  background-color: white;
  top: 45%;
  left: 87%;
  padding: 0 15px;
}

.service-copy {
  letter-spacing: 7px;
  font-size: 21px;
  font-weight: bold;
  text-align: left;
  padding: 4% 0% 6% 4%;
}

.service-wrap {
  display: flex;
  justify-content: space-between;
}

.service-box {
  width: 33%;
}

.seivice-img {
  width: 100%;
  height: 250px;
  background-size: cover;
}

.service-img-01 {
  background-image: url(../image/service-img01.png);
}

.service-img-02 {
  background-image: url(../image/service-img02.png);
  background-position-y: center;
}

.service-img-03 {
  background-image: url(../image/service-img03.png);
}

.service-name {
  padding: 7% 5% 5% 5%;
  font-weight: bold;
}

.service-text {
  padding: 0 5%;
  line-height: 2;
}

/* design */
.design {
  padding-bottom: 100px;
}

number {
  font-weight: 400;
}

.design-wrap {
  border: solid 10px;
  position: relative;
}

.design-title {
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  position: absolute;
  padding: 0 15px;
  background-color: white;
  top: -8%;
  left: 37%;
}

.design-copy {
  letter-spacing: 7px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  padding: 4% 3% 5%;
}

.design-copy1 {
  padding: 0 0 30px 0;
}

.design-copy2 {
  padding: 50px 0 30px 0;
}

.design-text {
  padding: 0 10% 10%;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 2;
  text-align: center;
}

/* contact */
.contact {
  color: #ffffff;
  background-color: #0A1D37;
  padding: 100px 0 60px 0;
  text-align: center;
  font-weight: bold;
}

.contact-title {
  font-size: 80px;
  letter-spacing: 2px;
  text-align: center;
  padding-bottom: 40px;
}

.contact-text {
  line-height: 2;
  letter-spacing: 7px;
  padding-bottom: 40px;
}

.contact-btn {
  margin-bottom: 40px;
}

.contact-btn:hover {
  color: #0A1D37;
  background-color: #ffffff;
}

/* footer */
footer {
  margin: 100px 0 40px 0;
  text-align: center;
}

.footer-navi li {
  padding: 0 50px;
  line-height: 3;
}

.footer-navi1 {
  border-right: solid 1px #0A1D37;
}

.footer-sitecopy {
  text-align: center;
  padding-bottom: 100px;
  padding-top: 3.5%;
}

.copylight {
  letter-spacing: 3px;
  font-size: 12px;
  transform: rotate(90deg);
  position: fixed;
  left: -80px;
  text-align: left;
  bottom: 150px;
  z-index: 1000;
}

/* ----------------------------------
work.htmlのCSS
----------------------------------- */
.page-title {
  text-align: center;
  font-size: 80px;
  font-weight: bold;
  line-height: 2.5;
  background: linear-gradient(to bottom, #ececec 0%, #ececec 58%, #ffffff 58%, #ffffff 100%);
}

.breadcrumb {
  padding-bottom: 30px;
}

.breadcrumb li {
  list-style: none;
  display: inline-block;
  padding: 0 1%;
}


.prev-page {
  color: blue;
}

.prev-page:hover {
  border-bottom: solid blue 1px;
}

.now-page::before {
  content: ">";
  padding-right: 30%;
  color: #0A1D37;
}






/* アイテム */
.items {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-around;
}

.item {
  width: 50%;
  text-align: center;
  padding-bottom: 65px;
  padding-right: 2%;
  padding-left: 2%;
}

.item-text a {
  color: blue;
  font-weight: 100;
}

.item-text a:hover {
  border-bottom: solid 1px blue;
}

.item-text .text-slider-title {
  padding-bottom: 2%;
}

.item-text .text-slider-common {
  height: auto;
  width: 100%;
  margin: 0;
  text-align: left;
  line-height: 2;
}

.text-br {
  display: block;
  content: "";
  margin-bottom: 5%;
}

.item-last {
  padding-bottom: 100px;
}

video {
  width: 100%;
  padding-top: 10%;
}