@charset "UTF-8";

main{
  background-color: #f9f8f4;
}

.mv{
  position: relative;
}
.mv .tit{
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}
.mv .tit img{
  display: block;
  max-width: 390px;
  margin: 0 auto 10px;
}
.mv .tit span{
  color: #142f5a;
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1.6;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}
.mv .img span{
  bottom: 0;
  right: 0;
  display: block;
  padding: 5px 30px;
  background: linear-gradient(to right,  rgba(51,51,51,0) 0%,rgba(51,51,51,0.5) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media screen and (max-width: 767px) {
  .mv .tit{
    top: 25px;
  }
  .mv .tit img{
    max-width: 200px;
  }
  .mv .tit span{
    position: relative;
    bottom: initial;
    left: initial;
    text-align: center;
    font-size: clamp(14px, 4vw, 22px);
  }
  .mv .img span{
    bottom: 0;
    right: 0;
    display: block;
    padding: 5px 20px;
  }
}

.conts{
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 100px;
  overflow-x: hidden;
}
.conts .box{
  position: relative;
}
.conts .box .text{
  font-size: clamp(11px, 2.8vw, 28px);
  line-height: 2;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  color: #142f5a;
  letter-spacing: .25rem;
}
.conts .b01 .text{
  right: 20%;
  top: 10%;
}
.conts .b01 .logo{
  position: absolute;
  left: 50%;
  bottom: -9%;
  max-width: 630px;
  width: 60%;
  transform: translate(-50%,50%);
  z-index: 1;
}
.conts .b02 .text{
  left: 20%;
  top: 35%;
}
.conts .b03 .text{
  right: 22%;
  top: 25%;
}
.conts .img{
  position: absolute;
}
.conts .p01,
.conts .p02 {
  transition: transform 0.6s ease-out;
}
.conts .b01 .p01{
  width: 30%;
  top: 0;
  left: 24%;
}
.conts .b01 .p02{
  width: 19%;
  bottom: 0;
  left: 4%;
}
.conts .b02 .p01{
  width: 17%;
  top: 5%;
  right: 4%;
}
.conts .b02 .p02{
  width: 30%;
  top: 35%;
  left: 48%;
}
.conts .b03 .p01{
  bottom: 3%;
  width: 17%;
  left: 35%;
}
.conts .b03 .p02{
  width: 30%;
  left: 4%;
  top: 2%;
}
@media screen and (max-width: 1500px) {
  .conts .box .text{
    font-size: 1.85vw;
  }
  .conts .b01 .logo{
    max-width: none;
    width: 42%;
  }
}
@media screen and (max-width: 767px) {
  .conts{
    padding-bottom: 50px;
  }
  .conts .box .text{
    font-size: 3.5vw;
    letter-spacing: .05rem;
  }
  .conts .b01{
    padding-top: 5%;
  }
  .conts .b01 .text{
    right: 5%;
    top: 5%;
  }
  .conts .b01 .logo{
    position: relative;
    left: initial;
    bottom: initial;
    width: 60%;
    transform: none;
    margin: 20% auto;
  }
  .conts .b02{
    padding-top: 22%;
  }
  .conts .b02 .text{
    left: 5%;
    top: 0;
  }
  .conts .b03{
    padding-top: 25%;
    margin-top: 3%;
  }
  .conts .b03 .text{
    right: 5%;
    top: 0;
  }
  .conts .b01 .p03{
    width: 46%;
    top: 5%;
    left: 0;
  }
  .conts .b01 .p04{
    width: 24%;
    top: 61%;
    left: 29%;
  }
  .conts .b02 .p01{
    width: 31%;
    top: 12%;
    right: 0%;
  }
  .conts .b02 .p02{
    width: 47%;
    top: 42%;
    left: 35%;
  }
  .conts .b03 .p01{
    bottom: 3%;
    width: 27%;
    left: 46%;
  }
  .conts .b03 .p02{
    width: 45%;
    left: 0;
    top: 10%;
  }
}