@charset "utf-8";
    
*{
    margin: 0 ;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    /* width:56%; */
    height:auto;
}

/*-----------------------------------------
reset
-----------------------------------------*/

body{
    line-height: 1;
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    color: #222;
    font-size: 16px;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

@media screen and (max-width:768px){
    .container {
        max-width: 100% -4;
        margin: 0 auto;
    }
}

/*-----------------------------------------
body
-----------------------------------------*/




/*-----------------------------------------
    burger - setting   
-----------------------------------------*/
@media screen and (max-width:768px){
    #burger{
        position: fixed;
        width: 50px;
        height: 45px;
        background-color: none;
        right: 5%;
        top: 12px;
        transition: .4s;
        z-index: 999;
    }
    
    #burger span{
        border-top: 1px solid #fff;
        position: absolute;
        width: 70%;
        margin-left: 15%;
        top: 50%;
        transition: .4s;
    }
    
    
    
    
    #burger span:nth-child(1){
        top: 25%;
    }
    
    #burger span:nth-child(3){
        top: 75%;
    }
    
    #burger.active{
        background-color: none;
        
    }
    
    #burger.active span:nth-child(1){
        top: 55%;
        border-top: 1px solid #fff !important;    
    }
    
    #burger.active span:nth-child(2){
        opacity: 0;
    }
    
    #burger.active span:nth-child(3){
        top: 45%;
        border-top: 1px solid #fff !important;    
    }
    
    .burgerColorScroll > span {
        border-top: 1px solid #000 !important;
        background-color: #000;  
        opacity:1.0;
        transition: color 0.5s ease-out;
      }
    
    }
/*-----------------------------------------
    g_nav - setting   
-----------------------------------------*/
#g_nav{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #222;
    z-index: 9;
    display: none;
}

.nav_inner{
    padding-top: 50px;
}

.nav_inner ul a{
    display: block;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: bold;
    letter-spacing: .1em;
    font-family: 'Josefin Slab', serif;
}

/*-----------------------------------------
    burger - setting   
-----------------------------------------*/
@media screen and (max-width:768px){
    #burger{
        position: fixed;
        width: 50px;
        height: 45px;
        background-color: none;
        right: 5%;
        top: 12px;
        transition: .4s;
        z-index: 999;
    }
    
    #burger span{
        border-top: 1px solid #fff;
        position: absolute;
        width: 70%;
        margin-left: 15%;
        top: 50%;
        transition: .4s;
    }
    
    
    
    
    #burger span:nth-child(1){
        top: 25%;
    }
    
    #burger span:nth-child(3){
        top: 75%;
    }
    
    #burger.active{
        background-color: none;
        
    }
    
    #burger.active span:nth-child(1){
        top: 55%;
        border-top: 1px solid #fff !important;    
    }
    
    #burger.active span:nth-child(2){
        opacity: 0;
    }
    
    #burger.active span:nth-child(3){
        top: 45%;
        border-top: 1px solid #fff !important;    
    }
    
    .burgerColorScroll > span {
        border-top: 1px solid #000 !important;
        background-color: #000;  
        opacity:1.0;
        transition: color 0.5s ease-out;
      }
    
    }

/*-----------------------------------------
nav
-----------------------------------------*/

.nav_menu .logo{
    display: flex;
    justify-content: flex-start;
    /* place-content: left; */
    /* gap:10px; */
    margin: 0 0 0 10px;

}
.nav_menu .logo a{
    transition:all 0.2s 0s ease;
    opacity: 1.0;
}
.nav_menu .logo a:hover{
    opacity: 0.7;
}

.logo img{
width: 40px;
height: 40px;
margin-right: 10px;
}

.nav_back{
    background-color: #333;
}

.nav_menu{
    display:grid;
    grid-template-columns: 200px 1fr 2em;
    column-gap:0px;
    background-color: #333;
    align-items: center;
    line-height: 40px;
    }

.nav_menu nav{
    grid-column:2/3;
}

.nav_menu nav ul{
    display:grid;
    grid-template-columns: 10em 7em 2em 4em 6em;
    column-gap:30px;
    font-size: 0.875em;
    /* background-color: #777; */
    color:#fff;
    padding: 10px 0 10px 0;
    place-content: center;
}

.header .nav ul li{
    color: inherit;
}

.header ul li a {
    position: relative;
    display: inline-block;
}

.header ul li a:hover {
    opacity: 0.8; 
  }

.header ul li a::after{
    position: absolute;
    content: '';
    /* bottom: -7px; */
        bottom: -1px;

    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    
    transition: transform .3s;
    /* transition: all .3s; */
    transform: scale(0,1);
    transform-origin: center top;
}

.header ul li a:hover::after {
    transform: scale(1,1);
}

/* .nav_menu .nav ul li a:hover::after {
    transform: scale(1,1);
} */

@media screen and (max-width:768px){
    .nav_back nav ul li{
        display: none;
    }
    .fontawesome{
        display: none;
    }

    .nav_menu .logo{
        margin: 10px 0 10px 10px;
    
    }
}





/*-----------------------------------------
mainvisual
-----------------------------------------*/


.belt{
    height: 20px;
    background-color: #000000;
}

.row_title{
visibility: hidden;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
display: inline-block;
text-align: center;
width:860px;
color: #fff;
text-shadow: #000 5px 5px 7px,#000 5px 5px 7px;
line-height: 1.5;
letter-spacing: 1.05px;
/* height: 400px; */
}
.main_visual_container{
  width: 960px;
  margin: 0 auto;
}
.main_visual{
background-image:url(../img/sakuraroad.jpg);
background-position : center center;
background-size:cover;
background-repeat:no-repeat;

animation:zoomIn 12s linear 0s;
animation-fill-mode: both;
-webkit-animation: zoomUp 12s linear 0s;
-webkit-animation-fill-mode: both;

z-index: -1;
}

  
@keyframes zoomUp { 
    0% {
        -webkit-transform: scale(1) rotate(0.001deg);
        transform: scale(1) rotate(0.001deg);
    }
    100% {
        -webkit-transform: scale(1.15) rotate(0.001deg);
        transform: scale(1.15) rotate(0.001deg);
    }
  }
@-webkit-keyframes zoomUp {
    0% {
        -webkit-transform: scale(1) rotate(0.001deg);
        transform: scale(1) rotate(0.001deg);
    }
    100% {
        -webkit-transform: scale(1.15) rotate(0.001deg);
        transform: scale(1.15) rotate(0.001deg);
    }
  }
.sub_title{

    text-align: left;
    text-indent:-1em;
    padding: 30px 10px 0 0;
}



h1{
    font-size: 40px;
}

.gray_belt{
    height: 25px;
    background-color: #555;
    position: relative;

}

.bxslider > li[aria-hidden="false"] {
    animation: anime_zoom 8s linear;
}
.bxslider > li[aria-hidden="true"] {
    transform: scale(1.2);
}

@keyframes anime_zoom {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
    }
}




/*-----------------------------------------
news
-----------------------------------------*/
/* .news_container{
    position: absolute;
    background-color: #ffffff;
    box-shadow: 3px 3px 10px #000;
    margin-top: -202px;
    background-position-x: -10%;
    height: 70px;
    z-index: 10;
} */

.mask{
    position:absolute;
    height:70px;
    margin-top: -70px;
    background-color: #ffffff;
    z-index:99;
}

.news{
    position: absolute;
    background-color: #ffffff;
    box-shadow: 3px 3px 10px #000;
    width: 500px;
    padding: 10px 20px 10px 15px;
    display:grid;
    grid-template-columns:6em 1fr;
    font-size: 13px;
    line-height: 1.2;
    align-items:center;
    /* z-index:1; */
    margin-top: -50px;
    z-index: 999;
}
.news dl{
    display: grid;
    grid-template-columns: 7em 1fr;
    align-items:center;
}

.news_container{
    width: 960px;
    margin: 0 auto;
    padding: 0 0 0 0;
}

.fontawesome i{
    font-size: 16px;
}
/*-----------------------------------------
あらすじ
-----------------------------------------*/

.myth{
    padding: 80px 0 40px 0;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    /* background-color: #ccffaa; */
    line-height: 2;
    text-indent: -1.5em;
}

h2{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /* width:30px;     */
    position: relative;
    /* background-color: #4499ff; */
    margin-bottom: 35px;
    letter-spacing: 1.23px;
}


/* .myth_introduction{
    width: 480px;
    margin: 0 auto;
    line-height: 1.9;
    margin-bottom: 50px;
    font-size: 14px;
} */

/*-----------------------------------------
subvisal
-----------------------------------------*/
.subvisual{
    background-image: url(../img/about_pics.jpg);
    background-position: center;
    background-size: cover;
    height: 200px;
    margin-bottom: 50px;
}
.subvisual::after{
    content:"";
    border-bottom: 5px solid #000;
}


/*-----------------------------------------
inner_content
-----------------------------------------*/

.inner_content{

    margin-bottom: 60px;
    line-height: 1.7;
    font-size: 15px;
}

.about_title{
    margin-bottom: 30px;
    text-align: center;
}

.about{
    width: 640px;
    margin: 0 auto;

    /* background-color: #caf; */
    column-gap:30px;
    position: relative;
}


.about .caption{
    width: 400px;
    margin: 0 auto;
    text-indent:1em;
}

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

    margin-bottom: 60px;
    line-height: 1.7;
    font-size: 15px;
    }

    .about_title{
        margin-bottom: 30px;
        text-align: center;
    }

    .about{
        width:400px;
        margin: 0 auto;

        /* background-color: #caf; */
        column-gap:30px;
        position: relative;
    }

    .about_text{
        margin: 0 auto;
    }

    .about .caption{
        width: 350px;
        margin: 0 auto;
        text-indent:1em;
    
    }

}


/*-----------------------------------------
access
-----------------------------------------*/

.access{
    margin: 0 auto;
}

.access_title{
    position: relative;
    width: 100px;
    margin: 0 auto 0px;
    text-align: center;
    background-color: #ffffff;
    z-index: 999;
}

.bar{
    width: 600px;
    border-bottom: 2px solid #000;
    margin: -10px auto 40px;
}

.end_visual{
    position: relative;
    background-image: url(../img/hana.jpg);
    background-position: center center;
    background-size: cover;
    height: 200px;
    margin-bottom: 50px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 160px;
}

.end_visual::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
/*-----------------------------------------
要素スライドインCSS
-----------------------------------------*/
.animation {
    opacity : 0;
	visibility: hidden;
    transition : all 1.0s;
    transform : translateY(80px);
  }
  
.loading {
    opacity : 1;
    visibility: visible;
    transform : translateY(0);
}

/*-----------------------------------------
contact_btn
-----------------------------------------*/

.contact_text{
    /* position: absolute;
    top: 80px;
    left:60px; */

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.6;
    background-color: #ffffff77;
    color: #ffffff;
    text-shadow:0px 0px 3px #000,0px 0px 3px #000,0px 0px 5px #000;
    box-shadow:0px 0px 5px #fff;
    width: 260px;
    height: 45px;
    }

.contact_btn{
    /* position: absolute;
    top: 80px;
    left:400px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.6;
    background-color: #ffffff77;
    color: #ffffff;
    text-shadow:0px 0px 3px #000,0px 0px 3px #000,0px 0px 5px #000;
    box-shadow:0px 0px 5px #fff;
    width: 100px;
    height: 45px;
    
    }
    




/*-----------------------------------------
footer
-----------------------------------------*/
.footer{
    color: #ffffff;
    background-color: #555555;
    line-height: 2.2;
    padding: 100px 0 100px 0;
    display: grid;
    grid-template-columns: 200px 40% 40% 10%; 
    font-size: 14px;
    height: 400px;
}

.footer_back{
    background-color: #555555;
    height: 400px;
    max-width: 100%;
}

.logo_footer{
    /* display: flex;
    gap:10px;
    grid-column: 1/2; */
    margin: 0 0 0 30px;
}
.logo_footer img{
    width: 130px;
    height: 130px;
    }

.footer ul li a:hover {
    opacity: 0.8; 
}
.fa-instagram:hover{
        opacity: 0.8; 
}

address{
    font-style:normal;
    }

.address_list{
    grid-column:2/3;
}

.footer_nav{
    grid-column:3/4;
}

@media screen and (max-width:768px){
    .footer{
        color: #ffffff;
        background-color: #555555;
        line-height: 2.2;
        padding: 50px 0 50px 0;
        display: grid;

        grid-template-columns:none;
        grid-template-rows: 1fr 130px 1fr; 
        font-size: 14px;
        height: 530px;
        width: 100% - 4vh;
        margin: 0 auto;
    }
    
    .footer_back{
        background-color: #555555;
        height: 400px;
        max-width: 100%;
    }

    .logo_footer{
        /* display: flex;
        gap:10px;
        grid-column: 1/2; */
        margin: 0 auto;
        grid-row:2/3;
    }
    .logo_footer img{
    width: 130px;
    height: 130px;
    }
    
    .footer ul li a:hover {
        opacity: 0.8; 
    }
    .fa-instagram:hover{
            opacity: 0.8; 
    }
    
    address{
        font-style:normal;
        }
    
    .address_list{
        grid-column:auto;
        grid-row:3/4;
        margin: 0 auto;
        width:100% - 4vh;
        text-align: center;
    }
    
    .footer_nav{
        grid-column:auto;
        grid-row:1/2;
        width: 100% - 4vh;
        margin: 0 auto 10px;

    }

    .footer_nav ul li{
        border-bottom: 1px solid #fff;
    }
}

/*-----------------------------------------
    #top - setting   
-----------------------------------------*/
    

#top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #333;
    opacity: 0.8;
    border-radius: 50%;
    }
  #top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }