/*　for smartphone & ALL　*/

*,
*:before,
*:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Noto Sans JP";
    color: #615d54;
}



.page_main{
    background: url('./img/bk_page.jpg');
}

p{
    line-height: 1.7em;
    margin-bottom: 1.4em;
}
.p_center{
    text-align: center;
}


h1,h2,h3,h4,h5,h6{
    letter-spacing: 0.02em;
    margin-bottom: 0.4em;
}
h2 span,h3 span,h4 span,h4 span,h5 span,h6 span{
    font-size: 0.5em;
    margin-left: 0.5em;
}

h2{
    border-left: solid 6px #8eb92a;
    text-indent: 0.3em;
}

h3{
    color: #cccccc;
    background-color: #48473d;
    float: left;
    padding: 2px 10px 5px;
    font-weight: 290;
}

nav ul li,footer ul li{
    list-style: none;
}


a{
    color: #8eb92a;
    text-decoration: none;
}

a:hover{
    color: #e09812;
}

.effect1 {
    animation: anime 0.75s ease-in 1 forwards;
    }
    @keyframes anime {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

.bk1{background: url('./header/no1.jpg'); background-position: top center; background-size: cover;}
.bk2{background: url('./header/no2.jpg'); background-position: top center; background-size: cover;}
.bk3{background: url('./header/no3.jpg'); background-position: top center; background-size: cover;}
.bk4{background: url('./header/no4.jpg'); background-position: top center; background-size: cover;}
.bk5{background: url('./header/no5.jpg'); background-position: top center; background-size: cover;}
.bk6{background: url('./header/no6.jpg'); background-position: top center; background-size: cover;}
.bk7{background: url('./header/no7.jpg'); background-position: top center; background-size: cover;}
.bk8{background: url('./header/no8.jpg'); background-position: top center; background-size: cover;}
.bk9{background: url('./header/no9.jpg'); background-position: top center; background-size: cover;}

.oc_button{
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 27px;
    height: 27px;
    position: relative;
    overflow: hidden;
    margin: 12px;
}
.line1,.line2,.line3{
    display: block;
    width: 37px;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
}
.line1{top:2px;left: -5px;}
.line2{top:12px;left: -5px;}
.line3{top:22px;left: -5px;}
.move1{animation: op_anime1 0.5s ease-in 1 forwards;}
@keyframes op_anime1 {
    0% {top:2px;}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:12px; transform: rotate(-45deg);}
    }
.move2{animation: op_anime2 0.5s ease-in 1 forwards;}
@keyframes op_anime2 {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100%{opacity: 0;}
    }
.move3{animation: op_anime3 0.5s ease-in 1 forwards;}
@keyframes op_anime3 {
    0% {top:34px;}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:12px; transform: rotate(45deg);}
    }

.move4{animation: op_anime4 0.5s ease-out 1 forwards;}
 @keyframes op_anime4 {
    0% {top:12px; transform: rotate(45deg);}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:2px;}
    }
.move5{animation: op_anime5 0.5s ease-out 1 forwards;}
 @keyframes op_anime5 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100%{opacity: 1;}
   }
.move6{animation: op_anime6 0.5s ease-out 1 forwards;}
@keyframes op_anime6 {
    0% {top:12px;transform: rotate(-45deg);}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:22px;}
    }

section figure{
    float: left;
    margin-right: 15px;
}


/*　for smartphone----------------------------------------------------------------------------------------　*/
@media screen and (max-width:767px) {

   header{
       display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: 50px auto;
       background-color: #48473d;
       position: fixed;
       width: 100%;
       z-index: 1000;
   }
   header .oc_button{
       grid-column: 1;
       grid-row: 1;
   }
   header figure{
       grid-column: 1;
       grid-row: 1;
       text-align: center;
       background-color: #48473d;
   }
   header figure img{
       height: 36px;
       padding-top: 12px;
       width: auto;
   }
   header nav{
       grid-column: 1;
       grid-row: 2;
   }

   .default{
       display: none;
   }

.close{
    animation: anime1 0.5s ease-in 1 forwards;
    overflow: hidden;
    display: block;
}
.open{
    animation: anime2 0.5s ease-in 1 forwards;
    overflow: hidden;
    display: block;
}
@keyframes anime1 {
    0% {height:812px;opacity: 1;}
    100% {height:0px; opacity: 0.3;}
    }
@keyframes anime2 {
    0% {height: 0px;opacity: 0.3;}
    100% {height:812px; opacity: 1;}
    }

nav ul{
    width: 86vw;
    height: 75vh;
    margin: 20px auto 0px;
    border-radius: 5px;
    overflow-y: scroll;
    padding: 20px;
    background: url(./img/bk_menu.jpg);
    background-position: top;
    background-size: cover;
}

nav a{
    display:inline-block;
    width: 100%;
    height: 40px;
    margin: 5px 0px;
    padding: 6px;
    text-indent: 0.5em;
    color: #ffffff;
    border-radius: 5px;
    border: solid thin #858270;
    background-color: rgba(0, 0, 0, 0.6);
}



.main_image{
    display: inline-block;
    margin-top: 50px;
    width: 100%;
    height: 65vh;
    text-align: center;
}
.small_display{
    margin-top: 40vh;
}
.big_display{
    display: none;
}

.contents{
    width: 94vw;
    margin: 0px auto;
    margin: 30px auto 0px;
    padding-bottom: 30px;
}
    
footer{
    width: 100%;
    float: left; 
    background-color: #999999;
}
footer ul{
    width: 86vw;
    margin: 20px auto 30px;
}
footer ul a{
    display: inline-block;
    width: 100%;
    height: 32px;
    color: #ffffff;
    font-size: 0.9em;
    border-bottom: solid thin #c0c0c0;
    margin: 5px 0px;
    line-height: 1.9em;
}

footer .call a{
    display: block;
    width: 70vw;
    height: 40px;
    border: solid thin #ffffff;
    border-radius: 5px;
    margin: 0px auto 30px;
    text-align: center;
    line-height: 2.2em;
    color: #ffffff;
    background: #bfd255; /* Old browsers */
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
    text-shadow: 0px 0px 3px #0a4704;
}

footer p{
    color: #ffffff;
    display: block;
    text-align: center;
    font-size: 0.9em;
    margin: 0 auto;
    padding-bottom: 45px;
    line-height: 1.8em;
}

}

/* for pad-------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1024px) {


    header{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px auto;
        background-color: #48473d;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    header .oc_button{
        grid-column: 1;
        grid-row: 1;
    }
    header figure{
        grid-column: 1;
        grid-row: 1;
        text-align: center;
        background-color: #48473d;
    }
    header figure img{
        height: 36px;
        padding-top: 12px;
        width: auto;
    }
    header nav{
        grid-column: 1;
        grid-row: 2;
    }
 
    .default{
        display: none;
    }
 
 .close{
     animation: anime1 0.5s ease-in 1 forwards;
     overflow: hidden;
     display: block;
 }
 .open{
     animation: anime2 0.5s ease-in 1 forwards;
     overflow: hidden;
     display: block;
 }
 @keyframes anime1 {
     0% {height:1366px;opacity: 1;}
     100% {height:0px; opacity: 0.3;}
     }
 @keyframes anime2 {
     0% {height: 0px;opacity: 0.3;}
     100% {height:1366px; opacity: 1;}
     }
 
 nav ul{
     width: 86vw;
     height: 75vh;
     margin: 20px auto 0px;
     border-radius: 5px;
     overflow-y: scroll;
     padding: 20px;
     background: url(./img/bk_menu.jpg);
     background-position: top;
     background-size: cover;
 }
 
 nav a{
     display:inline-block;
     width: 100%;
     height: 40px;
     margin: 5px 0px;
     padding: 6px;
     text-indent: 0.5em;
     color: #ffffff;
     border-radius: 5px;
     border: solid thin #858270;
     background-color: rgba(0, 0, 0, 0.6);
 }
 
 
 
 .main_image{
     display: inline-block;
     margin-top: 50px;
     width: 100%;
     height: 45vh;
     text-align: center;
 }
 .small_display{
     margin-top: 26vh;
 }
 .big_display{
     display: none;
 }
 
 .contents{
     width: 94vw;
     margin: 0px auto;
     margin: 30px auto 0px;
     padding-bottom: 30px;
 }
     
 footer{
     width: 100%;
     float: left; 
     background-color: #999999;
 }
 footer ul{
     width: 86vw;
     margin: 20px auto 30px;
 }
 footer ul a{
     display: inline-block;
     width: 100%;
     height: 32px;
     color: #ffffff;
     font-size: 0.9em;
     border-bottom: solid thin #c0c0c0;
     margin: 5px 0px;
     line-height: 1.9em;
 }
 
 footer .call a{
     display: none;
 }
 
 footer p{
     color: #ffffff;
     display: block;
     text-align: center;
     font-size: 0.9em;
     margin: 0 auto;
     padding-bottom: 45px;
     line-height: 1.8em;
 }


}


/*　for PC---------------------------------------------------------------------------------------------------　*/
@media screen and (min-width:1025px) {

    header{
        background-color: #48473d;
        position: fixed;
        width: 100%;
        height: 80px;
        z-index: 1000;
    }
    header .oc_button,header figure,header figure img{
       display: none;
    }

    .default{
        display: block;
    }
    
    header nav{
        max-width:1080px;
        margin: 0px auto;
    }
    header nav ul{
        display: grid;
        grid-auto-flow: column;
    }
    
    header nav li{
        width: 100%;
        text-align: center;
    }

    header nav a{
        display: inline-block;
        width: 100%;
        color: #c0c0c0;
        height: 80px;
        line-height: 6em;
    }
    
    header nav a:hover{
        color: #ffffff;
        border-bottom: solid 3px #bfd255;
        }
  
        .main_image{
            display: inline-block;
            margin-top: 80px;
            width: 100%;
            height: 600px;
            text-align: center;
        }
        .small_display{
            display: none;
        }
        .big_display{
            display: block;
            margin-top: 400px;
        }   
    


        .contents{
            max-width: 1080px;
            margin: 0px auto;
            margin: 30px auto 0px;
            padding-bottom: 30px;
        }






        footer{
            width: 100%;
            float: left; 
            background-color: #999999;
        }
        footer ul{
           max-width: 1080px;
           margin: 50px auto;
           display: grid;
           grid-auto-flow: column;
        }

        footer ul a{
            display: inline-block;
            width: 100%;
            height: 32px;
            color: #ffffff;
            font-size: 0.9em;
            border-bottom: solid thin #c0c0c0;
            margin: 5px 0px;
            line-height: 1.9em;
            text-align: center;
        }

        footer ul a:hover{
            color: #ffffff;
            border-bottom: solid thin #bfd255;
        }
        
        footer .call a{
            display: none;
        }
        
        footer p{
            color: #ffffff;
            display: block;
            text-align: center;
            font-size: 0.9em;
            margin: 0 auto;
            padding-bottom: 80px;
        }
       

        footer p br{
            display: none;
        }


}