html,body {
	width:100%;
	color: #313131;
	background-image: url('../images/bg.png');
}
body {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
	letter-spacing: 0.1em;
	overflow-x: hidden;
}
header {
	width:100%;
	height:auto;
	padding: 15px 0;
	position: fixed;
	z-index: 9999;
	background-image: url('../images/bg.png');
}
header>nav {
	width:955px;
	margin-left: auto;
	margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header>nav>ul.pc-menu>li {
	font-size: 18px;
	display: inline-block;
	margin-top: 0px;
	margin-right: 35px;
	margin-bottom: 0;
	align-items: center;
}
header>nav>ul.pc-menu>li:last-child{margin-right: 0;}
header>nav>ul.pc-menu>li img {
	width: 100%;
	height: auto;
}
header > nav > ul.pc-menu li a {
	position: relative;
	display: inline-block;
	padding-left: 20px;
  }
header > nav > ul.pc-menu li a:hover {
	background: url("../images/allow.png") no-repeat left center;
	background-size: 15px auto;
	padding-left: 20px;
}
header>nav>ul.pc-menu li a {
    display: inline-block;
}
header>nav>ul.pc-menu li a:hover {
	background-color: transparent; /* IE6対応 */
}
header>nav>ul.pc-menu li a:hover img {
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	visibility: hidden;
}
header>nav>ul.sp-menu {display: none;}
header #header-logo {
	width: 125px;
	height: auto;
	float: left;
}

/* TOP */
#visual #main-image {
    width: 450px;
    height: auto;
	margin: 0 auto;
	padding: 100px 0;
}
#home #visual-txt{
	width: 100%;
}
#home #visual-txt .dscp {
	text-align: center;
	font-size: 18px;
	line-height: 2.0em;
}
#home #visual-txt #visual_link01 {
	width: 350px;
    height: auto;
    margin: 80px auto 0;
}
#home #visual-txt #visual_link02 {
	width: 220px;
    height: auto;
    margin: 50px auto 100px;

}
/* フッター */
#footer_menu .inner-width {
	padding: 50px 0;
}
#footer_menu .title {
	width: 230px;
    height: auto;
	margin: 0 auto 50px;
}
#footer_menu #navi {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 0;
	list-style: none;
	font-size: 18px;
}
#footer_menu #navi li {
	flex: 1;
	text-align: center;
}
footer{
	line-height: 45px;
	text-align: center;
	padding: 20px 0;
	border-top: 10px solid #313131;
}
footer>p{
	font-size: 21px;
	color: #313131;
}
/* Other */
#visual #other-image {
    width: 100%;
    height: auto;
	margin: 0 auto;
	padding-top: 107px;
}
.breadcrumb-container {
    padding: 20px 0;
}
#privacy .breadcrumb-container {
    padding-top: 130px
}
.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 16px;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li + li::before {
    content: " > ";
    padding: 0 8px;
}
.breadcrumb li a {
    text-decoration: underline;
}
.breadcrumb li a:hover {
    text-decoration: underline;
}

/* 共通 */
div.pagetop {
	position:fixed;
	right:20px;
	display:none;
	cursor: pointer;
	z-index: 2;
}
div.pagetop img {
	width: 70px;
	height: 70px;
}
div.pagetop:hover {opacity:0.7;}
.full_width {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
section {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.bg-color01 {
	background-color: #f2f1ed !important;
}
.bg-color02 {
	background-color: #ffffff !important;
}
.bg-color-black {
	background-color: rgba(0, 0, 0, 0.5) !important;
}
.txt {
	text-align: center;
	font-size: 18px;
	line-height: 2.0em;
	margin: 50px 0px;
}
.inner-width {
	width:955px;
	margin-left: auto;
	margin-right: auto;
}
.two_columns {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 600px;
}
.two_columns li {
	width: 50%;
	display: flex;
}
.two_columns li img,
.two_columns li iframe {
  width: 100%;
  height: auto;
  object-fit: fill; 
  display: block;
}
.three_columns {
	width: 100%;
    display: flex; 
    justify-content: space-between;
    gap: 100px;
    padding: 0;
    list-style: none; 
}
.three_columns li {
    flex: 1;
    text-align: center;
}
.three_columns li img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.img_link {
	width: 420px;
	height: auto;
	margin: 50px auto;
}
/* お問い合わせ */
#contact {
	width: 100%;
	height: auto;
	padding: 0 0 50px;
	background-color: #313131;
	color: #f2f1ed;
}
#reservation #contact {
	color: #313131;
}
#contact .inner-width {
	padding: 120px 0;
}
#contact .title {
	width: 320px;
	height: auto;
	margin: 0 auto 60px;
}
#formContainer .form-part1{width: 44.5%; margin: 0 0 0 2.5%; float: left;}
#formContainer .form-part2{width: 44.5%; margin: 0 0 0 2%; float: left;}
#formContainer .form-part2{margin-left: 4%;}
#formContainer .form-part3 {clear: both; width: 100%; text-align: center}
#formContainer .form-elem:not(:last-of-type) {margin-bottom: 15px}
#formContainer .form-ttl {font-size: 14px;margin-left: 34px}
#formContainer .form-ttl label {font-weight: bold;}
#formContainer .form-wrap {position: relative;color: #000000}
#formContainer .form-wrap {padding: 10px 20px}
#formContainer .form-wrap.select:after {font-size: 14px;right: 20px}
#formContainer .form-wrap.textarea textarea {display: block;box-sizing: border-box}
#formContainer .form-wrap.textarea2 {height: 70px;overflow: hidden}
#formContainer .form-wrap.textarea2 textarea {display: block; box-sizing: border-box}
#formContainer .form-wrap input,
#formContainer .form-wrap select,
#formContainer .form-wrap textarea {
	width: 100%!important;
	color: #000000;
	font-size: 14px;
	line-height: 37px;
	border-style: none;
}
#formContainer .form-wrap select {
	height: 38px!important;;
}
#formContainer .form-wrap textarea {
	height: 232px!important;;
}
#formContainer button#submit {
	border-style: none;
	width: 300px;
	background-color: #313131;
	padding: 0;
}
#reservation #formContainer button#submit {
	border-style: none;
	width: 300px;
	background-color: #f2f1ed !important;
	padding: 0;
}


@media screen and (max-width: 768px) {
	/*header*/
	header{width:100%; background-image: none; background-color:#313131; height:70px; position: fixed; z-index: 6; padding: 0;}
	header>nav{width:100%; position: relative;}
	header>nav>div#smp-btn {float: right; width: 15%;}
	header > nav > div#smp-btn {
        position: absolute;
        top: 40px;
        right: 25px;
        transform: translateY(-50%);
        height: 36px;
        width: 40px;
        cursor: pointer;
    }
	/* header>nav>div#smp-btn {position: relative; height: 36px; width: 40px; cursor: pointer; float: right; margin: 22px 5% 3% 0;} */
	header>nav>div#smp-btn span {display: block; position: absolute; height: 4px; width: 100%; background: #f2f1ed; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;}
	header>nav>div#smp-btn span:nth-child(1) {top: 0;}
	header>nav>div#smp-btn span:nth-child(2) {top: 11px;}
	header>nav>div#smp-btn span:nth-child(3) {top: 22px;}
	header>nav>div.open span:nth-child(1) { -webkit-transform: translateY(25px) rotate(-315deg); transform: translateY(10px) rotate(-315deg);}
	header>nav>div.open span:nth-child(2) {opacity: 0;}
	header>nav>div.open span:nth-child(3) {-webkit-transform: translateY(-25px) rotate(315deg); transform: translateY(-12px) rotate(315deg);}

	/*menu*/
	header>nav>ul.pc-menu {display: none;}
	header>nav>ul {position: absolute; top:70px; width:100%; display: none; width: 100%; background-color: rgba(7,13,19,0.7); z-index: 2;}
	header>nav>ul>li{display: inline-block; font-size: 14px; color: #ffffff;}
	header>nav>ul>li {border-bottom: 1px dotted #ccc; width:100%; text-align: left; line-height: 40px;}
	header>nav>ul>li:last-child{border-bottom: none;}
	header>nav>ul>li>a{display: block; padding: 1.5%; text-indent: 1em;}
	header>nav>ul>li>a:link{color:#fff;}
	header>nav>ul>li>a:visited{color:#fff;}
	header>nav>ul.open {display: block;}
	header #header-logo {display: none;}

	.inner-width {
		width:90%;
		margin-left: auto;
		margin-right: auto;
	}
	/* TOP */
	#visual {
		padding-top: 70px
	}
	#visual #main-image {
		width: 60%;
		padding: 60px 0 30px;
	}
	#home #visual-txt .dscp {
		font-size: 14px;
		line-height: 1.6em;
	}
	#home #visual-txt #visual_link01 {
		width: 60%;
		margin: 50px auto 0;
	}
	#home #visual-txt #visual_link02 {
		width: 40%;
		margin: 40px auto 50px;
	}
	/* Other */
	#visual #other-image {
		padding-top: 0;
	}
	/* 共通 */
	.img_link {
		width: 100%;
		margin: 40px auto 0;
	}
	.txt {
		text-align: left;
		font-size: 16px;
		line-height: 1.8em;
		margin: 50px 0px;
	}
	.two_columns {
		flex-direction: column;
		height: auto;
	}
	.two_columns li {
		width: 100%;
		height: auto;
	}
	.two_columns li img,
	.two_columns li iframe {
		height: 400px;
	}
    .three_columns {
        flex-direction: column;
        align-items: center;
		gap: 10px;
    }
    .three_columns li {
        width: 85%;
    }
	/* お問い合わせ */
	#contact .inner-width {
		padding: 70px 0;
	}
	#contact .title {
		width: 70%;
		margin: 0px auto 30px;
	}
	#formContainer .form-part1 {
	    width: 90%;
		margin: 0 auto;
	    float: none;
	}
	#formContainer .form-part2 {
	    width: 90%;
		margin: 0 auto 30px;
	    float: none;
	}
	#formContainer .form-wrap {
		padding: 0;
	}
	#formContainer .form-ttl {
		margin-left: 16px;
		margin-bottom: 3px;
	}
	/* footer */
    #footer_menu .inner-width {
        padding: 30px 0;
    }
    #footer_menu .title {
        width: 180px;
        margin-bottom: 30px;
    }
    #footer_menu #navi {
        display: block;
        text-align: center;
    }
    #footer_menu #navi li {
        padding: 10px 0;
        flex: none;
    }
	footer {
		border-top: none;
	}
	footer>p{
		font-size: 14px;
	}
}