@charset "utf-8";


html, body { 
    margin: 0px;
    padding: 0px;
   }


body {
    font-family: "Noto Serif JP", sans-serif; 
    font-size: 1em;
    color: #333333;
    line-height:1.8em;
    background-color: #37352a;
    background-image: url(img/back_dot.png);
    }


a{text-decoration: none;}
a:link {color: #333333;} 
a:visited{color: #333333;}
a:hover{color: #51004a;}
a:active{color: #6f0066;}

/*書きます*/
#contaner{
    /* position:absolute; */
    top: 0;
    margin: 0 auto;


    background-color: #EFDAB9;
    text-align: left;

    width: 390px;
    height: 11586px;   
}

.haikeiimg1{
    position:absolute;
    top: 210px;
    z-index:1;
    display: flex;
    margin: 0 auto;

    width: 390px;
    height:11376px;
    
    }

.haikei_img2{
    position:absolute;
    top: 0px;
    z-index:6;

    width: 390px;
    height:5086px;
    display: flex;

    margin: 0 auto;
    }

 .haikei_img3{
        position:absolute;
        top: 5097px;
        z-index:4;
    
        width: 390px;
        height:1995px;
        display: flex;
    
        margin: 0 auto;
  }

.haikei_img4{
     position:absolute;
     top: 7213px;
     z-index:4;
        
     width: 390px;
     height:3795px;
     display: flex;
        
     margin: 0 auto;
 }
 .haikei_img5{/*エッセンス背景*/
    position:absolute;
    top: 3604px;
    z-index:0;
       
    width: 390px;
    height:1169px;
    display: flex;
       
    margin: 0 auto;
}
.haikei_img6{
    position:absolute;
    top: 5069px;
    z-index:2;
       
    width: 390px;
    height:2110px;
    display: flex;
       
    margin: 0 auto;
}
.haikei_img7{
    position:absolute;
    top: 7364px;
    z-index:2;
       
    width: 390px;
    height:2767px;
    display: flex;
       
    margin: 0 auto;
}
.haikei_img8{
    position:absolute;
    top: 2902px;
    z-index:0;
       
    width: 390px;
    height:523px;
    display: flex;
       
    margin: 0 auto;
}
/* ここからヘッダー */
.header{
    display:flex;
    justify-content: space-between;
    width: 100%;
    max-width :390px;
  height: 50px;
  position: fixed;
  top:0;
  z-index:10;
  
  /* background-color: #000; */

  /* box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .5); */
  }

  .hidariue{
    width:57px;
    height:60px;

    position:absolute;
    
    left:20px;
    top:0px
  }

  .migiue{
    width:23px;
    height:60px;

    position:absolute;
    
    right:20px;
    top:0px
  }

  .follow-banner {
    position: fixed;
    justify-content: space-between;

    top: 550px;
    left: 10px;
    width: 100%;
    max-width: 170px;
    height:125px;
    /* background-color: #F9F5EE; */
    border-radius: 10px;

    color: #fff;
    text-align: center;
    /* padding: 10px; */

    z-index: 15;
  }
  
  .close-btn {
    position: absolute;
    top: 0px;
    right: -20px;
    background-color: transparent;
    border: none;
    font-size: 40px;
    color: #231705;
    cursor: pointer;
  }

  #seal img{
    position: absolute;
    width: 176px;
    height: 115px;

    top: 25px;
    left: 0px;
    /* z-index: 16; */
  }
  #seal_text{
    position: absolute;
    text-align: left;


    bottom: -25px;
    color: #231705;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;

    font-size: 15px;
    line-height: 20px;
  }
  #komozi{
    position: absolute;
    text-align: left;
    left: 5px;

    bottom: 15px;
    color: #231705;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;

    font-size: 10px;
    line-height: 20px;
    
  }


  /* ここまでヘッダー */

.top{
    /* width:390px;
    height:794px; */
position:relative;
top:50px;
z-index:5;
}

.top_marble{
    position:absolute;

    width:140px;
    height:80px;

    left:210px;
    top:210px;
}

.scroll{
    position:absolute;
    left:264px;
    top:315px;

    z-index:5;
}
/* .scroll{
    position:relative;
  } */
  .scroll::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    backdrop-filter:blur(3px);
    animation:blur 1600ms ease-in-out forwards;
  }
  @keyframes blur{
    0%{backdrop-filter:blur(3px);}
    100%{backdrop-filter:none;}
  }
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }

  .scroll_up2 {
    transition: 1s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up2.on {
    transform: translateY(0);
    opacity: 1.0;
  }

  .fadeIn500ms {
    animation-name: fadeIn1s;
    animation-delay: 300ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fadeIn_ue {
    animation-name: fadeIn500ms;
    animation-delay: 100ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.top_text{
    display:block;
    position: absolute;
    text-align: center;
    top:840px;
    right: 0;
    left: 0;
    margin: 0 auto;

    z-index: 8;
}

.top_oomozi{
    display:block;
    margin-left:30px;

    color: #231705;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: 36px;

    z-index: 8;
}
.top_komozi{
    display:block;
    margin-top: 15px;
    margin-left:20px;

color: #231705;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 15px;
}

.top_komozi2{
    display:block;
    margin-top: 10px;
    margin-left:10px;

color: #231705;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
font-size: 17px;
}

.menu{
    display:block;
    position: absolute;
    text-align: center;
    top:1520px;
    right: 0;
    left: 0;
    margin: 0 auto;

    width: 300px;
    height:385px;
    z-index: 8;
}

.news{
    display:flex;
    justify-content: space-between;
    text-align: center;

    position: absolute;
    top:2040px;
    right: 0;
    left: 0;
    margin: 0 auto;

    width: 325px;
    height:527px;
    z-index: 8;
}
.news_tittle{
    width: 95px;
    height:235px;
}

.news_content{
    margin-top: 85px;
    text-align: left;
    padding:15px 0 0 15px;

    width: 232px;
    height:404px;

    background-color: #F9F5ED;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .5);
}
.news h1{
    color: #D66B11;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-size: 13px;

margin: 0 0 3px 0;
}

.news p{
    margin: 0 0 3px 0;

    color: #000000;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 10px;
    line-height: 12px;
}
.news hr{
    margin: 15px 0 0 -5px;
    width: 200px;
}
.news_more{
margin-top: 20px;

    right: 0;
    left: 0;
    margin: 20px auto;
    padding: 5px 0 0 0;

    background-color: #CEC3B2;
    color: #000000;

    width: 95px;
    height: 18px;
    border-radius: 7px;
}
.news_more p{
    text-align: center;
}

.history{
    display:block;
    text-align: center;

    position: absolute;
    top:2855px;
    right: 0;
    left: 0;
    margin: 0 auto;

    width: 344px;
    height:572px;
    z-index: 8;
}

.history_tittle{
    width: 343px;
    height:89px;
    z-index: 8;
}

.history h1{
    position: absolute;
    text-align: left;
    margin:20px 0 100px 20px;

    color: #804A4A;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 15px;

}
.history_rect{
    position: absolute;
    text-align: left;
    top:3085px;
    left: 41px;

    width: 69px;
    height:21px;

    z-index: 8;
}

.history p{
    text-align: left;
    margin:120px 0 0 15px;

    color: #804A4A;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 12px;
line-height: 20px;
}
.kakou{
    text-align: left;
    margin:20px 0 15px 10px;

    color: #804A4A;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 15px;
line-height: 60px;
}

.syasin{
    position: absolute;
 top:4552px;
 right: 0;
 left: 0;
 margin: 0 auto;

    width: 390px;
    height:7036px;

    z-index: 8;

}

.syasin2{
    position: absolute;
 top:3186px;
 right: 0;
 left: 0;
 margin: 0 auto;

    width: 390px;
    height:1653px;

    z-index: 8;

}

.copyright{
    margin: 0;
    padding: 5px 5px 15px 20px;
    background-color: #231705;
    font-family: "Cinzel", serif;
    font-size: 0.7em;
    color: #F9F5ED;
  }