@charset "utf-8";

/******************************************************
 SP・PC共通
******************************************************/
body {
	position: relative;
	z-index: 1000;
}

/* IE対策 */
main {
	display: block;
}

/* ページ遷移時フェードイン */
.pageWrap {
	display: none;
}

/* 画面外にいる状態 */
.js-fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1s;
}

/* 画面内に入った状態 */
.js-fadein.js-scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/* ファーストビュー */
article{
	animation-name: fadeinArticle;
	animation-duration: 2s;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeinArticle {
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

@media print {
	.pageWrap {
		display: block;
	}
	.js-fadein {
		opacity : 1;
		transform : translate(0, 0);
	}
}

/* ページ読み込み中のローディング画面を表示 */
#loader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: #fff;
	z-index: 10;
}
#loader img {	
	background: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* mainContents */
.mainContents {
	background-image: url(/img/common/bg_c_01.png);
	background-repeat: repeat;
	background-position: center center;
}

/* pageTtl */
#pageTtl .hn {
	animation-name: fadeinPageTtl;
	animation-duration: 2s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeinPageTtl {
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

/* subTtl */
#subTtl {
	animation-name: fadeinSubTtl;
	animation-duration: 2s;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeinSubTtl {
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

/******************************************************
 SP
******************************************************/
@media only screen and (max-width: 768px) {
	/* ------------------------------------------------
	 共通
	------------------------------------------------ */
	body {
		-webkit-text-size-adjust: 100%;
	}
	.spDisNone {
		display: none !important;
	}
	img {
		max-width: 100%;
	}
	
	/* ------------------------------------------------
	 header
	------------------------------------------------ */
	#header {
		position: fixed;
		z-index: 100;
	}
	
	/* バーガーメニュー */
	.bm {
		position: absolute;
		top: 20px;
		left: 0;
		display: table-cell;
		width: 70px;
		vertical-align: middle;
		z-index: 101;
	}
	.menu-trigger {
		cursor: pointer;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 23px;
		top: 3px;
		left: 20px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
	}
	#top .menu-trigger span {
		background-color: #333;
	}
	.menu-trigger.active span {
		background-color: #fff !important;
	}
	.menu-trigger span:nth-of-type(1) {	top: 0px;}
	.menu-trigger span:nth-of-type(2) {	top: 10px;}
	.menu-trigger span:nth-of-type(3) {	bottom: 0;}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
	
	/* サブロゴ */
	.subLogo {
		position: fixed;
		top: 50%;
		left: 15px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		width: 30px;
		opacity: 0;
		visibility: hidden;
		transition: all 1s;
	}
	#header.active .subLogo {
		opacity: 1;
		visibility: visible;
	}
	
	/* サイドメニュー */
	.sideMenu {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.9);
		z-index: 100;
	}
	.sideMenu.active {
	}
	.sideMenu .inner {
		height: 100%;
		padding: 30px 50px;
		overflow-y: scroll;
	}
	.sideMenu .inner .sideLogo {
		text-align: center;
		margin-bottom: 10px;
	}
	.sideMenu .inner .sideLogo img {
		width: 30px;
	}
	.sideMenu .inner .sideList {
		padding: 30px 0;
	}
	.sideMenu .inner .sideList.borderB {
		border-bottom: 1px solid #222;
	}
	.sideMenu .inner .sideList li {
		line-height: 1;
	}
	.sideMenu .inner .sideList li:not(:first-child) {
		margin-top: 1.5em;
	}
	.sideMenu .inner .sideList li a {
		display: block;
		font-size: 2.0rem;
		color: #fff;
		text-decoration: none;
	}
	.sideMenu .inner .sideList li a span {
		float: right;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 2.4rem;
		font-style: italic;
		color: #797979;
	}
	.sideMenu .inner .sideLang {
		text-align: center;
	}
	.sideMenu .inner .sideLang li {
		display: inline-block;
		padding: 0;
	}
	.sideMenu .inner .sideLang li:not(:last-child)::after {
		content: '/';
		color: #fff;
		padding-left: 8px;
	}
	.sideMenu .inner .sideLang li a {
		font-size: 1.8rem;
		color: #fff;
		text-decoration: none;
		padding-bottom: 5px;
	}
	.sideMenu .inner .sideLang li.current a {
		font-weight: bold;
		border-bottom: 2px solid #fff;
	}
	
	/* 言語選択 */
	#lang {
		display: none;
	}
	
	/* ------------------------------------------------
	 footer
	------------------------------------------------ */
	#pageTop {
		position: fixed;
		right: 15px;
		z-index: 90;
	}
	#pageTop .pageTopBtn {
		position: relative;
		width: 45px;
		height: 57px;
		background-image: url(/img/common/btn_pageback.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		text-indent: -9999px;
		cursor: pointer;
	}
	#footer .footerNav {
	}
	#footer .footerNav li {
	}
	#footer .footerNav li a {
		position: relative;
		display: block;
		font-size: 2.0rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding: 30px 20px;
	}
	#footer .footerNav li:nth-child(1) a { background-image: url(/img/common/bg_footer_nav_1.png);}
	#footer .footerNav li:nth-child(2) a { background-image: url(/img/common/bg_footer_nav_2.png);}
	#footer .footerNav li a::after {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		bottom: 0;
		right: 20px;
		margin: auto 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#footer .footerNav li:nth-child(1) a::after {
		width: 23px;
		height: auto;
		background-image: url(/img/common/ic_arrow_r.png);
	}
	#footer .footerNav li:nth-child(2) a::after {
		width: 20px;
		height: auto;
		background-image: url(/img/common/ic_arrow_r.png);
	}
	#footer .footerCr {
		padding: 15px 0;
		text-align: center;
	}
	#footer .footerCr p {
		font-size: 1.3rem;
		color: #aaa;
	}
	#footer .footerCr span {
		display: block;
		font-size: 1.3rem;
		text-align: right;
		padding: .5em 1em 0 0;
	}
	#footer .footerCr span a {
		color: #aaa;
	}
	
	/* ------------------------------------------------
	 下層ページ共通
	------------------------------------------------ */
	/* pageTtl */
	#pageTtl {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	#pageTtl::before {
		content: '';
		display: block;
		padding-top:;
		padding-top: 63.28125%;
	}
	#about #pageTtl {
		background-image: url(/img/about/bg_page_ttl_sp.png);
	}
	#room #pageTtl {
		background-image: url(/img/room/bg_page_ttl_sp.png);
	}
	#menu #pageTtl {
		background-image: url(/img/menu/bg_page_ttl_sp.png);
	}
	#greeting #pageTtl {
		background-image: url(/img/greeting/bg_page_ttl_sp.png);
	}
	#shop #pageTtl {
		background-image: url(/img/namba/bg_page_ttl_sp.png);
	}
	#mio #pageTtl {
		background-image: url(/img/mio/bg_page_ttl_sp.png);
	}
	#access #pageTtl,
	#contact #pageTtl,
	#photo #pageTtl,
	#gift #pageTtl {
		background-color: #1b1b1b;
	}
	#access #pageTtl::before,
	#contact #pageTtl::before,
	#photo #pageTtl::before,
	#gift #pageTtl::before {
		padding-top: 40%;
	}
	#photo #pageTtl span,
	#access #pageTtl span {
		padding-bottom: 10px;
	}
	#contact #pageTtl spsan,
	#shop #pageTtl span,
	#gift #pageTtl span {
		padding-bottom: 0;
	}
	
	#pageTtl .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-65%) translateX(-50%);
		-webkit-transform: translateY(-65%) translateX(-50%);
		width: 70%;
		font-size: 2.4rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#pageTtl .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 4.0rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 30px;
	}
	
	/* subTtl */
	#subTtl {
		background-color: rgba(255,255,255,0.3);
		padding: 50px 20px;
	}
	#subTtl .hn {
		font-size: 2.8rem;
		text-align: center;
	}
	
	/* pageNav */
	#pageNav {
		padding: 30px 0 95px;
	}
	#pageNav .inner {
		background-color: #000;
		padding: 10px 0;
	}
	#pageNav .item {
	}
	#pageNav .item a {
		position: relative;
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
	}
	#pageNav .item a::before {
		content: '';
		display: block;
		padding-top: 39.755011135%;
	}
	#pageNav .item a::after {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		bottom: 0;
		right: 15px;
		width: 42px;
		height: auto;
		margin: auto 0;
		background-image: url(/img/common/ic_arrow_r_2.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#pageNav .item:nth-child(1) a { background-image: url(/img/common/page_nav_01.png);}
	#pageNav .item:nth-child(2) a { background-image: url(/img/common/page_nav_02.png);}
	#pageNav .item:nth-child(3) a { background-image: url(/img/common/page_nav_03.png);}
	#pageNav .item:nth-child(4) a { background-image: url(/img/common/page_nav_04.png);}
	#pageNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.4rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
		white-space: nowrap;
	}
	#pageNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 3.2rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 30px;
	}
}

/******************************************************
 PC
******************************************************/
@media print,
screen and (min-width: 769px) {
	/* ------------------------------------------------
	 共通
	------------------------------------------------ */
	.pcDisNone {
		display: none !important;
	}
	
	/* ------------------------------------------------
	 header
	------------------------------------------------ */
	#header {
		position: fixed;
		z-index: 100;
	}
	
	/* バーガーメニュー */
	.bm {
		position: absolute;
		top: 30px;
		left: 10px;
		display: table-cell;
		width: 70px;
		vertical-align: middle;
		z-index: 101;
	}
	.menu-trigger {
		cursor: pointer;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 23px;
		top: 3px;
		left: 20px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
	}
	#top .menu-trigger span {
		background-color: #333;
	}
	.menu-trigger.active span {
		background-color: #fff !important;
	}
	.menu-trigger span:nth-of-type(1) {	top: 0px;}
	.menu-trigger span:nth-of-type(2) {	top: 10px;}
	.menu-trigger span:nth-of-type(3) {	bottom: 0;}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
	
	/* サブロゴ */
	.subLogo {
		position: fixed;
		top: 50%;
		left: 25px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		opacity: 0;
		visibility: hidden;
		transition: all 1s;
	}
	.subLogo a {
		transition: all .5s;
	}
	.subLogo a:hover {
		opacity: .8;
	}
	#header.active .subLogo {
		opacity: 1;
		visibility: visible;
	}
	
	/* サイドメニュー */
	.sideMenu {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 520px;
		height: 100vh;
		background-color: rgba(0,0,0,0.9);
		z-index: 100;
	}
	.sideMenu.active {
	}
	.sideMenu .inner {
		height: 100%;
		padding: 40px 0 0;
		margin-left: 85px;
		border-left: 1px solid #222;
		overflow-y: auto;
	}
	.sideMenu .inner .sideLogo {
		text-align: center;
		margin-bottom: 20px;
	}
	.sideMenu .inner .sideLogo a {
		transition: all .5s;
	}
	.sideMenu .inner .sideLogo a:hover {
		opacity: .8;
	}
	.sideMenu .inner .sideList {
		padding: 30px 60px;
	}
	.sideMenu .inner .sideList.borderB {
		border-bottom: 1px solid #222;
	}
	.sideMenu .inner .sideList li {
		line-height: 1;
	}
	.sideMenu .inner .sideList li:not(:first-child) {
		margin-top: 1.5em;
	}
	.sideMenu .inner .sideList li a {
		display: block;
		color: #fff;
		text-decoration: none;
		transition: all .5s;
	}
	.sideMenu .inner .sideList li a:hover {
		opacity: .5;
	}
	.sideMenu .inner .sideList li a span {
		float: right;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 2.2rem;
		font-style: italic;
		color: #797979;
	}
	.sideMenu .inner .sideLang {
		text-align: center;
		padding-bottom: 40px;
	}
	.sideMenu .inner .sideLang li {
		display: inline-block;
		padding: 0;
		color: #999;
	}
	.sideMenu .inner .sideLang li:not(:last-child)::after {
		content: '/';
		color: #fff;
		padding-left: 8px;
	}
	.sideMenu .inner .sideLang li a {
		font-size: 1.4rem;
		color: #fff;
		text-decoration: none;
		padding-bottom: 5px;
		transition: all .5s;
	}
	.sideMenu .inner .sideLang li a:hover {
		opacity: .5;
	}
	.sideMenu .inner .sideLang li.current a {
		font-weight: bold;
		border-bottom: 2px solid #fff;
	}
	
	/* 言語選択 */
	#lang {
		position: absolute;
		top: 30px;
		right: 30px;
		z-index: 100;
	}
	#lang li {
		display: inline-block;
		padding: 0;
		color: #999;
	}
	#lang li:not(:last-child)::after {
		content: '/';
		color: #fff;
		padding-left: 8px;
	}
	#lang li a {
		font-size: 1.4rem;
		color: #fff;
		text-decoration: none;
		padding-bottom: 5px;
		transition: all .5s;
	}
	#lang li a:hover {
		opacity: .5;
	}
	#lang li.current a {
		font-weight: bold;
		border-bottom: 2px solid #fff;
	}
	#top #lang li:not(:last-child)::after {
		color: #333 !important;
	}
	#top #lang li a {
		color: #333 !important;
	}
	#top #lang li.current a {
		border-bottom: 2px solid #000 !important;
	}
	
	/* ------------------------------------------------
	 footer
	------------------------------------------------ */
	#pageTop {
		position: fixed;
		/*bottom: 190px;*/
		right: 30px;
		z-index: 90;
	}
	#pageTop .pageTopBtn {
		position: relative;
		width: 55px;
		height: 70px;
		background-image: url(/img/common/btn_pageback.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		text-indent: -9999px;
		cursor: pointer;
		transition: all .5s;
	}
	#pageTop .pageTopBtn:hover {
		opacity: .8;
	}
	#footer .footerNav {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	#footer .footerNav li {
		width: 100%;
	}
	#footer .footerNav li a {
		position: relative;
		display: block;
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding: 45px 30px;
		transition: all .5s;
	}
	#footer .footerNav li a:hover {
		opacity: .8;
	}
	#footer .footerNav li:nth-child(1) a { background-image: url(/img/common/bg_footer_nav_1.png);}
	#footer .footerNav li:nth-child(2) a { background-image: url(/img/common/bg_footer_nav_2.png);}
	#footer .footerNav li a::after {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		bottom: 0;
		right: 30px;
		margin: auto 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#footer .footerNav li:nth-child(1) a::after {
		width: 33px;
		height: auto;
		background-image: url(/img/common/ic_arrow_r.png);
	}
	#footer .footerNav li:nth-child(2) a::after {
		width: 24px;
		height: auto;
		background-image: url(/img/common/ic_arrow_r.png);
	}
	#footer .footerCr {
		position: relative;
		padding: 15px 0;
		text-align: center;
	}
	#footer .footerCr p {
		font-size: 1.3rem;
		color: #aaa;
	}
	#footer .footerCr span {
		position: absolute;
		top: 15px;
		right: 10px;
		font-size: 1.3rem;
	}
	#footer .footerCr span a {
		color: #aaa;
	}
	
	/* ------------------------------------------------
	 下層ページ共通
	------------------------------------------------ */
	/* pageTtl */
	#pageTtl {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	#about #pageTtl {
		background-image: url(/img/about/bg_page_ttl.png);
	}
	#room #pageTtl {
		background-image: url(/img/room/bg_page_ttl.png);
	}
	#menu #pageTtl {
		background-image: url(/img/menu/bg_page_ttl.png);
	}
	#greeting #pageTtl {
		background-image: url(/img/greeting/bg_page_ttl.png);
	}
	#shop #pageTtl {
		background-image: url(/img/namba/bg_page_ttl.png);
	}
	#mio #pageTtl {
		background-image: url(/img/mio/bg_page_ttl.png);
	}
	#access #pageTtl,
	#contact #pageTtl,
	#photo #pageTtl,
	#gift #pageTtl {
		background-color: #1b1b1b;
	}
	#access #pageTtl::before,
	#contact #pageTtl::before,
	#photo #pageTtl::before,
	#gift #pageTtl::before {
		padding-top: 20%;
	}
	#photo #pageTtl span,
	#access #pageTtl span {
		padding-bottom: 30px;
	}
	#contact #pageTtl span,
	#shop #pageTtl span,
	#gift #pageTtl span {
		padding-bottom: 0;
	}
	
	#pageTtl::before {
		content: '';
		display: block;
		padding-top: 30%;
	}
	#pageTtl .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 80%;
		font-size: 3.4rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#pageTtl .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 5.6rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 50px;
	}
	
	/* subTtl */
	#subTtl {
		background-color: rgba(255,255,255,0.3);
		padding: 80px 10%;
	}
	#subTtl .hn {
		font-size: 3.6rem;
		text-align: center;
	}
	
	/* pageNav */
	#pageNav {
		padding: 110px 0 110px;
	}
	#pageNav .inner {
		display: flex;
		flex-flow: row wrap;
		background-color: #000;
		padding: 10px 0;
	}
	#pageNav .item {
		width: 50%;
	}
	#pageNav .item a {
		position: relative;
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
		transition: all .5s;
	}
	#pageNav .item a::before {
		content: '';
		display: block;
		padding-top: 39.755011135%;
	}
	#pageNav .item a::after {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		bottom: 0;
		right: 30px;
		width: 62px;
		height: auto;
		margin: auto 0;
		background-image: url(/img/common/ic_arrow_r_2.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#pageNav .item a:hover {
		opacity: .8;
	}
	#pageNav .item:nth-child(1) a { background-image: url(/img/common/page_nav_01.png);}
	#pageNav .item:nth-child(2) a { background-image: url(/img/common/page_nav_02.png);}
	#pageNav .item:nth-child(3) a { background-image: url(/img/common/page_nav_03.png);}
	#pageNav .item:nth-child(4) a { background-image: url(/img/common/page_nav_04.png);}
	#pageNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.7rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
		white-space: nowrap;
	}
	#pageNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 4.8rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 40px;
	}
}

/******************************************************
 印刷
******************************************************/
@media print {
.js-fadein {
	opacity : 1;
	transform : translate(0, 0);
}
.js-tile-fadein {
	opacity: 1;
	transform : translate(0, 0);
}
}