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


/**ｓｕｍａｈｏ
*********************************/
@media screen and (max-width:1279px){

	.waku_uchi,
	.waku_1024,
	.waku_1200{
	  max-width: 100%;
	  width: 100%;
	 padding:0 15px; 
	}
	#access .conte_top{
	  background: url(../img/bn_ac_top.jpg)no-repeat;
	  background-position:center top;
	}
	#room .conte_top{
	  background: url(../img/bg_fa_top.jpg)no-repeat;
	  background-position:center top;
	}
	#cuisine .conte_top{
	  background: url(../img/bg_cui_top.jpg)no-repeat;
	  background-position:center top;
	}

	.plan_rss .search {
	    display: none;
	}

	.conte_main .ph img{
		width: 100%;
	}
	.conte_main .ph .leaf img{
		width: auto;
	}

	.bn_card li {
	    width: 46%;
	    margin: 0 1% 30px;
	}
	.per_4_6 .text {
	    padding: 60px 20px 40px;
	    top: 30px;
	}
	.each li,
	.each {
	    width: 25%;
	}
	.each li{
		width: 100%;
		height: 180px;
	}
	.each .title img{
		max-width: 100%;
		padding: 0 15px;
	}
	.slideup_box .slideup{
		top: 160px;
		width: 100%;
	}

}
@media screen and (max-width:1023px){
  header .drawer-hamburger{
    display: block;
  }
  nav.normal {
    display: none;
  }
  header .language{
  	display: none;
  }
  .drawer-nav{
  background: url(../img/h_logo02.png)no-repeat center 15px,#fff;
  }
	.conte_main {
	    padding: 0 0 0px;
	}
	.conte_main .detail {
	    float: none;
	    width: 100%;
	    padding-top: 0px;
	}
	.conte_main .detail h3 {
	    display: table;
	    margin: 60px auto 15px;
	}
	.conte_main .detail h3 + p {
	    margin: 0px auto 30px;
	}
	.conte_main .ph {
	    float: none;
	    width: 100%;
	}
	.conte_main .ph img{
	    width: 100%;
	}
	.bn_card{
		margin: 0 auto;
		display: table;
	}
	.bn_card li{
	  width: 178px;
	  height: 262px;
	  margin: 0 10px 30px;
	  float: left;
	  text-align: center;
	}
	.conte_main .detail table, .conte_main .detail dl, .conte_main .detail ul, .conte_main .detail p {
	    margin: 30px auto;
	}

	.per_4_6 .text {
	    padding: 30px 20px 30px;
	    top: 20px;
	    width: 60%;
	}
	.per_4_6 .text h3 {
	    margin-bottom: 15px;
	}


	.each {
	    width: 50%;
	}
	.each li{
		width: 100%;
	    height: 240px;
	}
	.slideup_box .slideup {
	    top: 220px;
	}



}



@media screen and (max-width:767px){
  header{
  height: auto;
  }

  h1 .large{
    display: none;
  }
  h1 .sumaho{
    display: block;
  }
  h1{
    padding:15px 0 0; 
    text-align: center;
    display: table;
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-height: 70px;
    /*background:#577a33;*/
  }
  h1 img{
    max-width: 260px;
    max-height: 34px;
    height: auto;
    display: inline-block;
  }
  header .bn_plan{
    display: none;
  }
  h1 img{
    padding-left: 40px;
  }
  footer address{
    margin: 50px auto 70px;
  }
  footer p{
  	font-size: 0.8em;
  }
  footer .logo{
  	padding: 0 15px;
  }
  footer .logo img{
  	width: 100%;
  }
	/*
	to_top
	******************/
	footer .to_top{
	opacity: 0.8;
	}
	footer .to_top:hover{
	opacity: 0.3;
	}
	footer .to_top img{
	width: 60px;
	}
	.h2_bg{
	  padding: 60px 0 0;
	}

	.plan_rss .one {
	    float: none;
	    padding: 0 15px 20px;
	    width: 100%;
	    margin: 0 0 30px;
	}
	.loop_sl .sl_cover_l{
		display: none;
	}

	.per_4_6 .text {
	    background: url(../img/bg_leaf.jpg)no-repeat;
	    background-position: center top;
	    background-size: cover;
	    width: 100%;
	    padding: 60px 20px 60px;
	    position: relative;
	    top: 0px;
	    -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
	    -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
	    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
	}
	.per_4_6 .ph {
	    width: 100%;
	    float: none;
	    z-index: -1;
	    position: relative;
	}
	.bn_card li {
	    width: 46%;
	    height: 262px;
	    margin: 0 2% 30px;
	    /*float: none;*/ 
	    text-align: center;
	}

	.each li{
		width: 100%;
	    height: 120px;
	}
	.each .title {
	    padding: 15px 0 0;
	}
	.each:hover .slideup {
	    padding: 5px 5px;
	    font-size: 0.7em;
	}

	.col02 {
	    width: 100%;
	    float: none;
	}
	.row .col02,
	.row .col02.right {
	    padding: 0px;
	}
	.row .col02{
		margin-bottom: 30px;
	}




}
@media screen and (max-width:699px){
	.bn_card{
		width: 100%;
		max-width: 345px;
		margin: 0;
	}
}
@media screen and (max-width:479px){
	.bn_card{
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
}
@media screen and (max-width:320px){
	.each li{
		width: 100%;
	    height: 96px;
	}
	.bn_card li .over130{
		width: 100%;
	}
	.bn_card li img.arrow{
		width: auto;
	}
}