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

#header_pc{
    display: none;
}

.openbtn,#g-nav,#header_sp{
    display: flex;
}

#g-nav,#header_pc{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	bottom:-150%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:url("../img/岩プードル.png");
    background-size: cover;
    background-repeat: no-repeat;
    /*動き*/
	transition: all 0.6s;
}

#g-nav:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(0,51,7,.5);
    background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
  }


/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    bottom: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 99999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px 10px 50px 10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
    font-size:4vw;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	padding-top:20px;
    top:2%;
	right: 3%;
	cursor: pointer;
    width: 50px;
    height:50px;
}

#header_sp img{
    position:fixed;
    z-index: 9999;
    top:2%;
	left: 3%;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 3%;
    height: 5%;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxの場合に適用*/
    

    body{
        font-sixe:10px;
    }
    
    h2{
    width: 20%;
    margin:0 auto;
    font-size:18px;
    background: url("../img/題名背景.png");
    background-repeat: no-repeat;
    background-size:cover;
    
}
    
    
    .img-frame{
        display:none; /*非表示*/
    }
 
    .img-frame_sp{
        display: block;
        text-align: center;
		position: relative;
		/*top:50px;*/
	   	width: 100%;
       padding-top: 185%;
	   	overflow: hidden;
	   /*	margin: 0 auto;*/
    } 
    
     .img-frame_sp:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(100, 100, 100, .4);
    background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
  }
    
  .about,.menu,.gallery,.contact{
    background:url("../img/葉っぱ_sp.png");
    background-repeat: no-repeat;
    background-size: 100%;
      height: 20%;
 /*  z-index: 1;*/
}

    
#toptext{
		  top:25%;
          right:4%;
		  font-size:50px;
         line-height: 140%;
        overflow: hidden;
		 
}
  
    .toptext1{
         right:25%;
        font-size:12px;
    }
    
.scrolldown4{
	bottom:-5%;
	right:10%;    
}
.scrolldown4 span{
	left:-10px;
	bottom:10px;  
    font-size: 3em;
}

.scrolldown4:after{    
     width: 1px;
    height:60px;
}

    
    #waku{
        display: none;
    } 
    
    #waku_sp{
        display: block;
        position: relative;
        width: 100%;
    }
    
    #contents{
           top:5%;
         /*  left:26%;*/

    }    
    
  #co_text1{
    font-size:18px;
     line-height:1.5;
      text-align: center;
}

#co_text2{
    line-height:1.5;
     font-size:12px;
    margin-top:10%;
    padding-right:0;
}  
    
    .text_box{
    width:85%;
  
  
}
    
.box{
    display:list-item;
    margin-right: 15%;
}
    
.img_box  img{
    width:100%;
}

.img_box{
    width:60%;
    display: flex;
    margin:20% 0 2% 10%;
} 

#btn1{
    font-size:12px;
    margin-top: -78%;
    margin-left: 45%;
}    
    
#news{
    font-size:12px;
    margin-top:230%;
} 
  
dl{
    width:80%;
    margin: 0 auto;
    margin-top:10%;
}    
    
dd{
   clear: left;
   padding: 8% 0% 15% 0%; 
} 
    
.slide-container{
        display: none;
    }    
/*==================================================
スライダーのためのcss
===================================*/
    #gallery{
        margin-top:30%;
    }

#none {
    display: block;
	height:100%;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/



.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}    
    
    #gallery_tx{
        margin:0 auto;
        text-align: center;
        padding: 5%;
        font-size:12px;
    } 
    
    #gallery h2,#access h2{
        margin:10% 0 10% 30%;
    }
    
    #btn3,#btn4{
        font-size:12px;
    }
    
    #access img{
        width:80%;
        margin-left:20%;
    }
    
    .text_boxs{
        width:100%;
        margin-left:30%;
        font-size:10px;
    }
    
    #page-top {
	right:50px;
	bottom:20%;
	z-index: 2;
	opacity: 0;
	transform: translateY(50);
    
}
    
#page-top a{
    font-size:10px;        
} 
    
/*about*/    
#about_shop,#about_shampu{
        display: block;
    }
    .boxs{
        width:85%;
        margin:10% 0% 5% 10%;
        font-size:10px;
        line-height: 1.5;
      
    } 
    
    .tx02,.tx03{
        text-align: left;
    }
    
    .tx01{
    font-size:12px;
    line-height: 190%;
   
}
    
    .imgbox{
    width:80%; 
    padding-top: 15%;
    }
    
    .imgbox1{
        width:80%;
        margin:10% 0 5% 10%;
    }
    
    .imgbox1 p{
    background-size: cover;
    background-repeat: no-repeat;
    margin-top:5%;
    font-size:10px;
    line-height: 1.5;
}
    
    /*menu*/
    #ryokin_about dl{
        width: 85%;
        clear: left;
        font-size:10px;
        line-height: 1.5;
        text-align: left;
    } 
    
      
     #ryokin_about h2,#gallery_about h2,#gallery_box h2{
        width: 60%;
        margin:0 auto;
        font-size:18px;
         line-height: 1.5;
    }
    
    #cat_shampoo h2,#shampoo h2{
        width: 90%;
        font-size:14px;
        padding: 5% 0 12% 0;
    }
    
    #option h2{
        width: 60%;
         font-size:14px;
         margin:0 auto;
        padding: 5% 0 5% 0;
    }
    
    #shampoo table,#cat_shampoo table,#option table{
        font-size:10px;
        line-height: 1.5;
        margin-top:10%;
    }
    
    th,td{
        padding: 0.4em;
    }
    
    #shampoo,#cat_shampoo,#option{
        margin-top:50%;
    }
    
    #shampoo,#cat_shampoo{
        margin-left:10%;
    }
    
    /*gallery*/
    
    .boxss{
        display: block;
        border-style: none;
        margin:5% 0 10% 0;
    }
    
    .boxss img{
        width:50%;
        margin:0 0 5% 15%;
    }
    
    .textbox{
        width:100%;
          font-size:9px;
        line-height: 1.5;
    }
    
    #gallery_box h2,gallery_about h2{
        width:90%;
        padding: 3% 5% 6% 10%;
        background-size: 100%;
    }
    
    #gallery_box p{
        font-size:10px;
        line-height: 1.5;
    }
   
    .modal__images{
        padding-left:2%;
    }
    
    .modal__images .modal__image {
  width:calc((300% - (5px * 0)) / 6);
  margin-top:10%;
}
	
/*reserver*/	
	#contact h2{
		font-size: 18px;
		width:80%;
		padding: 5% 0 12% 0;
	}
	
	.box1{
		font-size:9px;
		line-height: 1.5;
	}
	
	.form_kome{
		font-size:8px;
		line-height: 1.5;
	}
}

@keyframes arrowmove{
      0%{bottom:4%;}
      50%{bottom:6%;}
     100%{bottom:4%;}
 }    

@media screen and (min-width:100px){
.img-frame_sp{
   width: 100%;
   
}
.img-01, .img-02, .img-03{
   position: absolute;
   width: 100%;
    height:100%;
     top:0;
    left: 0;
}
.img-01{
   animation: slide-animation-01 24s infinite;
}
.img-02{
   animation: slide-animation-02 24s infinite;
}
.img-03{
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}