@charset "utf-8";
/* CSS Document */
html { font-size: 14px; } /* 10px */

body {
	font-family: "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 1000px;
	margin: 0 auto;
}
a{
	text-decoration: none;
	color: #584332;
}
.clearfix:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0;
	clear:both;
}

/* ----- header ----- */
header{
	height: 130px;
}
header .reservation{
	max-width: 240px;
}

/* ----- PC_nav ----- */
.nav{
	background-image: url("../img/bg1.png");
}
.nav ul{
	width: 978px;
	margin: 0 auto;
}
.fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	width: 100%;
}

/* ---------- content5---------- */
#content5 .box1 img{
	max-width: 116px;
}
#content5 .box2 a{
	max-width: 310px;
	border-radius: 10px;
}

/* ----- ページスクロール ----- */
#scroll{
	bottom: 30px;
	right: 20px;
	z-index: 1000;
}
#scroll a{
	z-index: 999;
	padding: 8px 8px 10px 8px;
}

/* ----- footer ----- */
footer{
	background-image: url(../img/bg2.png);
}
.footer_box figure.logo img{
	max-width: 220px;
}
.footer_box figure.df_banner img{
	max-width: 460px;
}
.footer_box ul li a:hover{
	text-decoration: underline;
}

/* ----- sub_title ----- */
.sub_title{
	background-image: url(../img/bg2.png);
}
.sub_title h2 img{
	width: 70%;
	max-width: 320px;
}
.breadcrumbs{
	background-image: url(../img/nav_bg.png);
}
/* ---------- ボタンのアニメーション ---------- */
.btn{
	position: relative;
	z-index: 1;
}
.btn_border{
	position:absolute;
	background:none;
	transition:all .3s ease-in-out;
	z-index: -1;
}
.btn>.btn_border:nth-of-type(1){
  top:0;
  left:0;
  border-left:1px solid #584332;
  border-top:1px solid #584332;
  width:30px;
  height:30px;
}
.btn>.btn_border:nth-of-type(2){
  bottom:0;
  right:0;
  border-right:1px solid #584332;
  border-bottom:1px solid #584332;
  width:30px;
  height:30px;
}
.btn:hover .btn_border{
  width:100%;
  height:100%;
}

/* ---------- animation ---------- */
.fadein_c2-1{
	opacity : 0;
	transform : translate(-20px, 0);
	transition: all 400ms ease-in-out;
	transition-delay:300ms;
}
.fadein_c2-2{
	opacity : 0;
	transform : translate(-20px, 0);
	transition: all 400ms ease-in-out;
	transition-delay:600ms;
}
.fadein_c2-3{
	opacity : 0;
	transform : translate(-20px, 0);
	transition: all 400ms ease-in-out;
	transition-delay:900ms;
}
.fadein_c2-4{
	opacity : 0;
	transform : translate(-20px, 0);
	transition: all 400ms ease-in-out;
	transition-delay:1200ms;
}
.fadein_c3-1{
	opacity : 0;
	transform : translate(0, 0);
	transition: all 1600ms ease-in-out;
	transition-delay:600ms;
}
.fadein_c3-2{
	opacity : 0;
	transform : translate(0, 0);
	transition: all 1600ms ease-in-out;
	transition-delay:300ms;
}
.fadein_c3-3{
	opacity : 0;
	transform : translate(0, 0);
	transition: all 1600ms ease-in-out;
	transition-delay:900ms;
}
.fadein{
	opacity : 0;
	transform : translate(0, 0);
	transition: all 1600ms ease-in-out;
}
.fadein2{
	opacity : 0;
	transform : translate(0, 20px);
	transition: all 400ms ease-in-out;
	transition-delay:100ms;
}
.fadein_c2-1.scrollin, .fadein_c2-2.scrollin, .fadein_c2-3.scrollin, .fadein_c2-4.scrollin, 
.fadein.scrollin, .fadein2.scrollin{
	opacity : 1;
	transform : translate(0, 0);
}


/* ---------- PC ---------- */
@media screen and (min-width:769px){
	
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	body{
		min-width: 320px;
	}
	header{
		height: 60px;
	}
	#header{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: #fff4e5;
		height: 60px;
	}
	#header img{
		width: auto;
		height: 50px;
	}
	#scroll{
		bottom: 15px;
		right: 5px;
	}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#content5 .box2 a{
		max-width: 260px;
		border-radius: 10px;
	}
	#scroll{
		bottom: 20px;
		right: 5px;
	}
	#scroll a{
		z-index: 999;
		padding: 6px 8px 8px 8px;
	}
}