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

.mt5 {padding-top: 5%}

body {margin: 0;}

nav {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  position: fixed;
  height: auto;
  top: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  }

.navi_box img{
    width: 10%;
}
.navi_box{
    margin-left: 5%;
  margin-right: 5%;
    display: flex;
  align-items: flex-end;
}
.nav_text{
    margin-left: 20%;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav ul li{
list-style: none;
display: inline-block;
width: 18%;
min-width: 150px;
    text-align: center;
    letter-spacing: 0.1em;
    color: #595757;
}


/* ズームスライダー */
@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.20);
      transform: scale(1.20);
  }
}

@keyframes zoomUp { /* 1.10倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.20);
      transform: scale(1.20);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 15秒かけて拡大させる */
    -webkit-animation: zoomUp 20s linear 0s;
    animation: zoomUp 20s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
    height: 100vh; /* 600pxの高さで表示させる */
}
/* ズームスライダー */

/* ズームスライダーテキスト */
.slide-text {
  position: absolute;
  z-index: 10;
  font-size: 3.7rem;
  color: #575757;
  width: 100%;
  top: 13%;
  font-weight: normal;
  text-shadow: 0px 0px 3px #fff;
  letter-spacing: 0.2em;
  line-height: 140%;
}
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.slide-text-sab {
  font-size: 18px;
  letter-spacing: 0.1em;
  width: 60%;
  display: block;
  margin-left: 20%;
  margin-top: 2%;
  line-height: 150%;
}
/* ズームスライダーテキスト */

.vertical {
        writing-mode: vertical-rl;
    }
.swiper-pagination {
  top: 97%;
}
/* プロダクト */
.product_box{
    background-color: #CCE2EC;
    width: 100%;
    height: auto;
    display:flex;
    background-image: linear-gradient(150deg, rgba(171, 211, 229, 1) 10%, rgba(204, 226, 236, 1) 90%);
}
.product_box_left{
    width: 50%;
}
.product_box_left_box {
  width: 70%;
  margin-left: 15%;
  margin-top: 15%;
  margin-bottom: 15%;
}
.product_box_left img{
    width: 100%;
}
.product_box_right{
    background-color: #9BBDCC;
    width: 50%;
    background-image: linear-gradient(150deg, rgba(171, 211, 229, 1) 10%, rgba(155, 189, 204, 1) 90%);
}
.product_box_right_box {
  width: 80%;
  margin-left: 10%;
  margin-top: 10%;
  margin-bottom: 10%;
}
.product_text{
text-align: center;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.1em;
}

.product_text01{
text-align: center;
  font-size: 55px;
  color: #fff;
  margin-bottom: 15%;
}

.product_title {
  text-align: center;
  font-size: 33px;
  letter-spacing: 0.18em;
  color: #fff;
  font-weight: normal;
  line-height: 140%;
}


.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}

.parisienne-regular {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}
.cactus-classical-serif-regular {
  font-family: "Cactus Classical Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.playwrite-ie- {
  font-family: "Playwrite IE", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* プロダクト */

/* 特徴 */
.features{
    
}
.parallax-box-1 {
  clip-path: inset(0);
  width: 100%;
  height: auto;
  padding: 5%;
  box-sizing:border-box;
  color: #fff;
}

.parallax-box-1::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width:100%;
  height:100%;
  background-image: url( "img/water.jpg");
  background-size: cover;
}

.para_contents {
    width: 100%;
    display:flex;
}
.para_contents_box {
    width: 20%;
    margin-left: 4%;
}
.para_contents_box img{width: 100%;}

.para_contents02{
    width: 100%;
}
.para_contents02_con {
  width: 100%;
  display: flex;
}
.para_contents02_con_box {
  width: 24%;
  margin-left: 2.5%;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.7);
  padding: 3%;
}
.para_contents02_con_box_icon {
  background-color: #B3C9D3;
  text-align: center;
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 10px;
  letter-spacing: 0.1em;
}
.para_contents02_con_box_title {
  color: #6BA0B2;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 28px;
}
.para_contents02_con_box_text{
    color: #595757;
  letter-spacing: 0.1em;
  line-height: 200%;
}
.para_contents02_con_box img{
    width: 100%;
    border-radius: 10px;
}

.feature_title {
  text-align: center;
  color: #2f80a4;
  font-size: 32px;
  letter-spacing: 0.1em;
}
.feature_text {
  color: #4d4d4d;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  letter-spacing: 0.1em;
  line-height: 200%;
}


/* 特徴 */

/* 使い方 */
.how{
    width: 100%;
    height: auto;
}
.how_icon{text-align: center;}
/* 長方形を描く */
.how_icon::before, .how_icon::after {
  content: '';
  background-color: #000;
  height: 1px; 
  width: calc((100% - 132px)/2);
  display: inline-block;
}

.how_bar {
  padding: 0 10px; /* 「通知は以上です」の両側の余白 */
}

.how_icon .how_bar, .how_icon::before, .how_icon::after {
  /* ... */
  vertical-align: middle;
}

.how_movie {
  width: 70%;
  height: 550px;
  background-color: #ccc;
  margin-left: 15%;
  margin-bottom: 15%;
    margin-top: 5%;
}
/* 使い方 */

.fadeIn {
  opacity: 0;
  transition: 3s;
}
.fadeIn.is-show {
  opacity: 1;
}

/* フッター */
.footer_box{
    width: 100%;
    height: auto;
    background-image: linear-gradient(150deg, rgba(171, 211, 229, 1) 10%, rgba(204, 226, 236, 1) 90%);
    padding-bottom: 10%;
}

.swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  display: inline-block;

  background: #77ccf2;
  opacity: .2;

  border-radius: 0;
  margin-left: 5px;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #00acf9;
}



/* スマホナビ */
.header {
  position: relative;
  padding: 20px;
}

.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .4s;
  z-index: 90;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 100px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 20px;
}

.nav__link {
  display: block;
  padding: 15px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
/* スマホナビ */

/* ボタン */
.button-23 a {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  border: 1px solid #333;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  z-index:999;
  transition: all 0.3s;
}

.button-23 a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 1px;
  background: #333;
  transition: all 0.3s ease;
}

.button-23 a:hover::after {
  animation: OutIn-Line 700ms;
  transition: all 0.3s;
}

@keyframes OutIn-Line {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50.1% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}
/* ボタン */

.copy_box{text-align: center;margin-top: 3%;}
.copy_box img {
  width: 15%;
}
.copyright {
color: #555;
  font-size: 11px;
  text-align: center;
  letter-spacing: 1px;
  margin: 14px 0 30px 0;
}
.sns {width: 100%;
  text-align: center;
  margin-top: 5%;}
.sns img {width: 4%;}


@media screen and (max-width:768px) {

.slide-text {
  font-size: 2rem;
  color: #575757;
  font-weight: normal;
  text-shadow: 0px 0px 10px #fff;
  letter-spacing: 0.2em;
  line-height: 120%;
margin-top: 3%;
}
.nav_text {
  margin-left: 55%;
  display: none;
}
 .navi_box img {
    width: 28%;
    margin-top: 1%;
    padding-top: 1%;
  }
    .product_box {
  display: block;
}
    .product_box_left {
  width: 100%;
}
    .product_box_right {
  width: 100%;
        padding-bottom: 15%;
}
    .product_box_left_box {
 margin-top: 0%;

  padding-top: 15%;
}
    .product_title {
  font-size: 25px;
}
    .product_text01 {
  margin-top: 0%;
}
    .feature_title {
  text-align: center;
  color: #2f80a4;
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 150%;
}
    .para_contents {
  display: block;
}
    .para_contents_box {
  width: 45%;
  margin-left: 4%;
  float: left;
}
    .feature_text {
  color: #4d4d4d;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  letter-spacing: 0.1em;
  line-height: 200%;
}
    .para_contents02_con {
  display: block;
}
    .para_contents02_con_box {
  width: 95%;
  margin-left: 0%;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.7);
  padding: 3%;
}
.copy_box img {
  width: 30%;
}
    .sns img {
  width: 10%;
}
    
    }