
*{
    padding: 0;
    margin: 0;
}
   

.body{
    
}





@import 'https://fonts.googleapis.com/css?family=Cinzel';




.menu{
    background-color: rgb(207, 218, 236);

    height: 60px;
width: 100%;
   
opacity: 0.7; 

z-index: 0;

position: fixed;
}

.menu1{
    text-align: center;
    padding-top: 10px;
}


.menu2{
    /*background-color:rgb(207, 227, 236)*/
    background-color:rgba(255, 255, 255, 0.2)

    height:100px;
    width:100%;


   z-index: 10;

   position: fixed;

  display:flex;
    
}


.menu3{
    
font-size: 20px;
}


.menu3 a{
color: #ffffff;

font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;

      margin-left:30px ;

      
}


.menu4{
    display: flex;

    padding-top: 30px;
    padding-left: 600px;


}


.menu5{
    padding-top: 30px;
    padding-left: 100px;
}




.bg{
   background-image:url("35.png");
background-size:100% 100%;
    
   
   
height: 100vh;
width: 100%;

filter: blur(px) ;


  }


.bg1{
    color: #fff;

    font-size: 28px;

    font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;


      padding-top: 200px;
      padding-left: 900px;

}


.aisatu{
    background-color: #333;
    height: 100vh;
    width: 100%;
}


.aisatu2{ 
  
color: #fff;
}

.aisatu3{
  text-align:center;

  font-size: 40px;

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;

padding-top: 40px;

}

.aisatu4{
  text-align:center;
}


.aisatuimg{
  text-align:center;
}


  #concept{
    background-image:url("24.png");
    background-size: 100% 100%;
   
position: relative;

    width: 100%;
    height: 100vh;

    z-index: 0;

    overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
   

#concept::before{

    background: inherit;
    content: '';
    filter: blur(10px);
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;

    z-index: -1;
   
}

.concept1{
    color: #fff;
    padding-top: 150px;
    padding-left: 150px;
}


.concept2{
    font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;


      font-size:50px;
}


.concept3{
  font-size:30px;

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;

}


.conceptm{
    display: flex;
}


.concept4{
    padding-left: 250px;
    padding-top: 100px;
}


.concept5{
  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;
}




.c{
background-color: black;
}




.sisetu{

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;

  width: 100%;
  height:1800px;

  background-color: #333;
  color: #fff;
}

.sisetu1{
  text-align: center;

padding-top: 40px;

}

.sisetu2{
 background-color: #333;

  width: 100%;
  height: 100vh;

  background-size:100% 100%;

 

}

.sisetu3{
  background-color: #333;

  width: 100%;
  height: 100vh;

  background-size:100% 100%;


  text-align: right;

}

.sisetu4{
  background-color: #333;

  width: 100%;
  height: 100vh;

  background-size:100% 100%;
}



.contact{
  background-color: #333;

  width: 100%;
  height: 700px;

text-align: center;

}


.contact1 {
  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;

color:#fff;

font-size:30px;

}


.contact2{

}




.ryokin{
  background-color: #333;

  width: 100%;
  height: 700px;

text-align: center;

}








/*見えている部分*/
.slide-wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden; /* はみ出したスライドを隠す */
  }

/*見えてない部分まで全部*/
  .slide { /*スライド全体 */
    width: 300%;
    height: 100%;
    display: flex;
    transition: all 0.3s;
  }

  .slide div { /* スライド */
    width: 33.33%;
    height: 100%;
    font-size: 16px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .slide1 { /* スライドさせるために必要なクラス */
    transform: translateX(0);
  }
  .slide2 { /* スライドさせるために必要なクラス */
    transform: translateX(-33.33%);
  }
  .slide3 { /* スライドさせるために必要なクラス */
    transform: translateX(-66.66%);
  }
  .slide div:nth-of-type(1){ /* 背景色 */
    background-image:url(unnamed.jpg);
    background-size: 100% 100%;
  }
  .slide div:nth-of-type(2){ /* 背景色 */
    background-color: #FCE8F0;
  }
  .slide div:nth-of-type(3){ /* 背景色 */
    background-color: #E3F1E4;
  }


  .next {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 10px;
    bottom: 50%;

    z-index: 10;

    cursor: pointer;

    border-top: solid 3px #ead1d1;
    border-right: solid 3px #000;
    -webkit-transform: rotate(45deg) translateY(50%);
    transform: rotate(45deg) translateY(50%);
  }
  .prev {
    position: absolute;
    width: 15px;
    height: 15px;
    left: 25px;
    bottom: 50%;
    z-index: 10;
    cursor: pointer;
    border-top: solid 3px #000;
    border-right: solid 3px #000;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
  }