@charset "utf-8";

body {
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	transition: .3s;
}

/* *****************************************************************************
   PC用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 769px), print {
	a[href^="tel:"]{
		pointer-events: none;
		text-decoration: none !important;
	}
	
	/* -----------------------------------------------------------------------------
	 Header
	----------------------------------------------------------------------------- */
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		padding: 37px 137px 0;
		background-color: #000;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 99;
	}

	header #logo .mark {
		position: absolute;
		top: 27px;
        left: 22px;
	}
	
	header #logo .mark img {
		width: 170px;
		height: auto;
		vertical-align: bottom;
	}
	
	header #logo .bt-open {
		display: none;
	}
	
	header #logo .onlinebooking {
		position: absolute;
		top: 16px;
		right: 16px;
	}
	
	header #logo .onlinebooking:hover img.over {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	header #logo .onlinebooking img {
		width: 124px;
		height: auto;
		vertical-align: bottom;
	}
	
	header #logo .onlinebooking > ul {
		margin-top: -1px;
		background-color: #fff;
		text-align: center;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
		transition: .3s;
	}
	
	header #logo .onlinebooking:hover > ul {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	header #logo .onlinebooking > ul li {
		width: 101px;
		margin: 0 auto;
		border-bottom: 3px solid #000;
		display: none;
	}
	
	header #logo .onlinebooking > ul li:last-child {
		border-bottom: none;
	}
	
	header #logo .onlinebooking:hover > ul li {
		display: block;
	}
	
	header #logo .onlinebooking ul li img {
		width: 101px;
		height: auto;
		vertical-align: bottom;
	}
	
	header nav#menu {
		height: auto !important;
		display: block !important;
	}
	
	header nav#menu ul {
		width: 100%;
		max-width: 678px;
		margin: 0 auto;
		/*padding: 0 20px;*/
		text-align: center;
		display: flex;
		justify-content: space-between;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	header nav#menu ul li:last-child {
		padding: 0 0 0 0;
	}
	
	header nav#menu ul li a {
		padding-bottom: 16px;
		display: block;
		border-bottom: 2px solid #000;
		transition: .3s;
	}
	
	header nav#menu ul li a:hover {
		border-bottom: 2px solid #fff;
		transition: .3s;
	}
	
	header nav#menu ul li a:hover img {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	
	header nav#menu ul li img {
		width: auto;
		height: 19px;
	}
	
	header nav#menu ul.link {
		display: none;
	}
	
	
	/* -----------------------------------------------------------------------------
	 Main
	----------------------------------------------------------------------------- */
	main #container {
		max-width: 1280px;
		margin: 0 auto;
	}
	
	body.contents main #container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 120px 20px 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main > #sp-title {
		display: none;
	}
	
	main > #ptitle {
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		padding: 10px;
		background-color: #d64d31;
		text-align: center;
		line-height: 1em;
	}
	
	
	
	
	
	
	/* -----------------------------------------------------------------------------
	 insta
	----------------------------------------------------------------------------- */
	main #container section.insta {
		text-align: center;
	}
	
	main #container section.insta .hashtag {
		font-size: 40px;
		font-weight: bold;
		margin-bottom: 35px;
		line-height: 1em;
	}
	
	main #container section.insta .inner {
		margin: 4px;
	}
	
	.insta-gallery-actions {
		display: none;
	}
	
	
	/* -----------------------------------------------------------------------------
	 Footer
	----------------------------------------------------------------------------- */
	footer {
		position: relative;
		background-color: #000;
		padding: 75px 0 45px 0;
	}
	
	footer ul.link {
		margin: 0 auto;
		display: table;
	}
	
	footer ul.link li {
		display: table-cell;
		vertical-align: middle;
	}
	
	footer ul.link li.onlinestore {
		position: relative;
		padding-right: 70px;
	}
	
	footer ul.link li.fb {
		padding-right: 35px;
	}
	
	footer ul.link li.onlinestore img {
		width: auto;
		height: 43px;
	}
	
	footer ul.link li.fb img,
	footer ul.link li.insta img{
		width: auto;
		height: 28px;
	}
	
	footer .copy {
		color: #fff;
		font-size: 11px;
		padding-top: 45px;
		text-align: center;
	}
	

	footer p.copy a{
	color: #fff;
    text-decoration: underline 1px #fff;
    letter-spacing: 0.05em;
}

	#pagetop {
		position: absolute;
		bottom: 60px;
		right: 90px;
		display: inline-block;
	}
	
	#pagetop a {
		color: #fff;
		display: inline-block;
		line-height: 1em;
	}
	
	#pagetop a::before {
		content: "";
		width: 30px;
		height: 30px;
		margin: 0 auto;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		display: block;
	}
	
	#pagetop a:hover::before {
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
	}
	
}



@media screen and (max-width: 900px) {
	header {
		padding: 50px 100px 0;
	}

	header #logo .mark {
		top: 26px;
		left: 25px;
	}
	
	header #logo .mark img {
		width: 65px;
	}
		
	header #logo .onlinebooking {
		top: 35px;
	}
	
	header #logo .onlinebooking img {
		width: 80px;
	}	
	header nav#menu ul li img {
		height: 18px;
	}	
	
}




/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 769px) {

	/* -----------------------------------------------------------------------------
	 Header
	----------------------------------------------------------------------------- */
	header {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 99;
	}

	header #logo .mark {
		display: none;
	}
	
	header #logo .bt-open {
		position: absolute;
		top: 22px;
		right: 13px;
		width: 52px;
		height: 52px;
		display: block;
		z-index: 81;
	}
	
	header #logo .bt-open::before {
		position: absolute;
		top: 16px;
		right: 17px;
		content: "";
		width: 20px;
		height: 2px;
		background-color: #000;
	}
	
	header #logo .bt-open::after{
		position: absolute;
		bottom: 16px;
		right: 17px;
		content: "";
		width: 20px;
		height: 2px;
		background-color: #000;
	}
	
	header #logo .bt-open span {
		position: absolute;
		top: 26px;
		right: 17px;
		width: 20px;
		height: 1px;
		display: block;
	}
	
	header #logo .bt-open span::before {
		position: absolute;
		top: -4px;
		right: 0;
		content: "";
		width: 20px;
		height: 2px;
		background-color: #000;
	}
	
	header #logo .bt-open span::after{
		position: absolute;
		bottom: -3px;
		right: 0;
		content: "";
		width: 20px;
		height: 2px;
		background-color: #000;
	}
	
	header #logo .onlinebooking {
		position: absolute;
		top: 83px;
		right: 13px;
		z-index: 80;
	}
	
	header #logo .onlinebooking img {
		width: 52px;
		height: auto;
		vertical-align: bottom;
	}
	
	header #logo  .onlinebooking img.over {
		filter:alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
		transition: .3s;
	}
	
	header #logo  .onlinebooking.show img.over {
		filter:alpha(opacity=100) !important;
		-moz-opacity: 1 !important;
		opacity: 1 !important;
		transition: .3s;
	}
	
	header #logo .onlinebooking > ul {
		display: none;
	}
	
	header #logo .onlinebooking.show > ul {
		position: absolute;
		top: 72px;
		right: -13px;
		width: 100vw;
		padding-left: 4%;
		background-color: #d2d4d7;
		text-align: center;
		transition: .3s;
		display: flex;
		justify-content: center;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	header #logo .onlinebooking:hover > ul {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	header #logo .onlinebooking > ul li {
		margin: 0px 3% 0;
		padding: 2vw 0;
	}
	
	header #logo .onlinebooking ul li img {
		width: auto;
		max-width: 100%;
		height: 55px;
		vertical-align: bottom;
	}
	
	header nav#menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 79.2%;
		background-color: #000;
		display: none;
		z-index: 99;
	}
	
	header nav#menu ul {
		width: 100%;
		padding: 74px 0 0;
		text-align: center;
		justify-content: space-between;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	header nav#menu ul li {
		padding-bottom: 42px;
	}
	
	header nav#menu ul li img {
		width: auto;
		height: 17px;
	}
	
	header nav#menu ul.link {
		padding-top: 6px;
		padding-bottom: 80px;
		display: flex;
		justify-content: center;
	}
	
	header nav#menu ul.link li {
		padding: 0 15px 0;
	}
	
	header nav#menu ul.link li img {
		width: auto;
		height: 24px;
	}
	
	
	
	
	
	
	
	
	
	footer {
		position: relative;
		background-color: #000;
		padding: 48px 0 15px 0;
	}
	
	footer ul.link {
		margin: 0 auto;
		display: table;
	}
	
	footer ul.link li {
		display: table-cell;
		vertical-align: middle;
	}
	
	footer ul.link li.onlinestore {
		position: relative;
		padding-right: 45px;
	}
	
	footer ul.link li.fb {
		padding-right: 30px;
	}
	
	footer ul.link li.onlinestore img {
		width: auto;
		height: 37px;
	}
	
	footer ul.link li.fb img,
	footer ul.link li.insta img{
		width: auto;
		height: 24px;
	}
	
	footer .copy {
		color: #fff;
		font-size: 11px;
		padding-top: 45px;
		text-align: center;
	}	

	footer p.copy a{
	color: #fff;
    text-decoration: underline 1px #fff;
    letter-spacing: 0.05em;
	}
	
}