@charset "UTF-8";

/*-----------------------
 main
 -----------------------*/
 
 body, html, main {
    /* important */
    height: 100%;
}
.dm img{
	width: 50%;
}

.logo{
	max-width: 28%;
	margin: 50px auto !important;
	display: none;
}

.conceptText{
	position: relative;
	margin:  0 auto;
	text-align: center;
	max-width: 380px;
	line-height: 280%;
	margin-top: 50px;
	margin-bottom: 80px;
	padding-top: 30px;
}

.conceptText h2{
	border-bottom: 1px solid;
	width: 150px;
	margin: 0 auto;
	padding-bottom: 10px;
	margin-bottom: 30px; 
	letter-spacing: 0.3em;
}

.kodawari{
	background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 4px);
	background-size: 5px 1px;
	background-position: top;
	background-repeat: repeat-x;
	padding-top: 100px;
	margin-top: 100px;
}

.kodawari ul li{
	float: left;
}

.no{
	width: 70px;
}

.kodawari_text{
	max-width: 350px;
	margin-top: 30px;
	margin-left: 28px;
	margin-right: 70px;
}

.kodawari h2{
	margin-bottom: 20px;
}

.kodawari p{
	line-height: 200%;
}

.yasashisa h2{
	margin-top: 100px;
	text-align: center;
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
　　　font-weight: 500;
	font-size: 25px;
	letter-spacing: 0.03em;
	margin-right: 50px;
	margin-bottom: 30px;
}

.yasashisa .number{
	font-size: 50px;
	padding: 0 20px;
}

.mainImage1 li{
	float: left;
	width: 115px;
	padding-left: 3px;
}

.mainImage1 img{
	width: 100%;
}

.mainImage2 li{
	float: left;
	width: 172px;
	margin-top: 3px;
	padding-left: 3px;
}

.mainImage2 img{
	width: 100%;
}

.text{
	width: 200px;
	position: absolute;
	right: 40px;
	top: 70px;
}

.text h3{
	font-size: 40px;
	text-align: center;
	border-bottom: 1px solid;
	padding: 10px 0;
	margin-bottom: 5px;
	font-weight: bold;
}

.title{
	text-align: center;
}

.detail{
    line-height: 180%;
	padding-top: 40px;
}

.more a{
	font-size: 13px;
	padding-bottom: 5px;
	max-width: 700px;
	display: inline-block;
	text-align: center;
	margin-bottom: 50px;
	margin-left: 122px;
}

#instagram h3{
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 150%;
}

.image-box,.figure{
height: 100%!important;
}


.moreI{
	width: 100px;
	float: right;
}
.fuwafuwa{
    -webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}

@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}


.katakata {
    display: inline-block;
    animation: hurueru .4s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.reservationAnimatin {
    animation: fluffy1 2s ease infinite;
}


@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.switch ,.switch2{
 -webkit-animation: switchtext 0.5s infinite alternate;
 -moz-animation: switchtext 0.5s infinite alternate;
 animation: switchtext 0.5s infinite alternate;
}
@-webkit-keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@-moz-keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}


 @media only screen and (max-width: 480px) {
	 
	 	 .layer_board {
	left: 100%!important;
	 margin: 50px 0px 0px -370px!important;
	 }
.dm img {
    width: 77%!important;
}
.kodawari ul li {
    float: inherit;
}
	 
.logo{
	max-width: 44%;
	margin: 100px auto !important;
     }
	 
.no {
    margin: 0 auto!important;
}

	 
.kodawari_text {
    max-width: 400px;
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 30px;
	margin-bottom: 50px;
}
	.kodawari_text h2{
		 font-size: 21px;
		text-align: center;
		 line-height: 150%;
	 }
	 
	 .reserved img {
    max-width: 100%; 
}
 

}
 @media only screen and (max-width: 320px) {
	 	 	 .layer_board {
	 	 margin: 50px 0px 0px -323px!important;
	 }

}