@charset "utf-8";



/****************************************************
for SmartPhones		/ iPhone6+ >> 736px /
*****************************************************/
@media only screen and (max-width:740px) {

.pcOnly { display: none; }
.spOnly { display: inline-block; }
.spLsOnly { display: inline-block; }
.spPrOnly { display: none; }



h1, h2, h3 {
}
h1 {	font-size: 24px;	}
h2 {	font-size: 20px;	}
h3 {
	font-size: 16px;
/*	color: #333332;		*/
}
h4 {}
h5 {}
h6 {}



.button,
a.button {
	padding: 5px 40px;
	min-width: 230px;
}





/* container
----------------------------- */
#container {
	min-width: 320px;
}
.modalPage #container {
	min-width: 300px;
}





/* header
----------------------------- */
header {
	height: auto;
}
header > div {
}
header h1 p {
	display: block;
}
header h1 span {
	display: block;
	margin: 5px auto 0;
}
nav ul {
	margin: 10px auto 0;
}
nav ul li {
	font-size: 12px;
}



ul.subMenu {
	top: calc(100% - 15px);
}





/* footer
----------------------------- */
footer {
}
footer > div {
}
footer ul {
	text-align: left;
	margin: 0 auto;
	padding: 20px 0;
	width: 160px;
}
footer ul li {
	display: block;
	white-space: nowrap;
}
footer ul li::before,
footer ul li + li::before {
	content: "＞";
	margin-right: 0.5em;
}
footer ul li + li {
	margin: 20px auto 0;
}
footer ul li span {
	display: block;
	margin: 10px auto 0 10px;
	line-height: 2;
}
footer ul li span::before,
footer ul li span::after {
	content: none;
}



/* main
----------------------------- */
main {
	min-height: calc(100vh - 100px - 245px);		/* headerH - footerH */
}
main article section > div {
	padding: 0;
}
.inner



#contactPage main header {
	border-bottom: 1px solid #c4c4c4;
}
#contactPage main article section > div,
.modalPage main article section > div {
	padding: 0 20px;
}







/* ●form - 共通 ●
---------------------------------------------------- */
#confirm .button:not(.backward) {
/*
	margin: 20px auto 0;
*/
}
/*
#confirm .button + .button {
*/
.button + .button {
	margin-left: auto;
	margin-top: 20px;
}





/* ● TOP ●
---------------------------------------------------- */
/* shop */
#shop section {
	padding: 0 20px;
}
#shop section > div {
	flex-flow: row wrap;
}
.shopImage {
	width: calc((100% - 10px) /3);
	width: calc((100% - 10px) /2);
}
.shopInfo {
	margin: 0 0 0 10px;
	width: calc((100% - 10px) /3 *2);
	width: calc((100% - 10px) /2);
	padding: 20px;
}
.shopInfo dl {
	flex-flow: row wrap;
}
.shopInfo dl dt {
	width: 70px;
}
.shopInfo dl dd {
	width: calc(100% - 70px);
}



#letsReserve {
	padding: 0;
}



/* schedule */
#schedule section {
}
main article#schedule section > div {
}

/* tab */
.tab {
	margin: 20px auto -1px;
}
.tab li#fullList {
	width: calc(160px);
}
.tab li#nominatedList {
	margin-left: 5px;
	width: calc(100% - 175px);
}
.tab li#fullList a {
/*	line-height: 3;
	line-height: 55px;
*/
	letter-spacing: 0em;
	font-size: 20px;
	padding: 10px 15px;
}
.tab li > * {
	font-size: 12px;

/*	padding: 5px 0;
*/
	line-height: 1;
}
.tab li#nominatedList > small {
/*	top: 60px;
	font-size: 9px;
	height: auto;
*/
	line-height: 1.5;
/*	width: 100px;
	*/
	padding: 0 10px;

	font-size: 9px;
	letter-spacing: 0em;
}
.tab select {
	margin: 5px auto 0 20px;
/*	padding: 10px 5px;	*/
}
.tab input[type=date] {
	margin: 5px auto 0 20px;
}
#schedule .tab select {
	margin: 0;
}



.contents {
	margin: 0 auto;
}


.contents h3 span {
	font-size: 24px;
}



.msgWelcome {
	margin: 0 20px;
	text-align: justify;
}



/* prev / next */
.contents > ul {
}
.contents > ul li.prev::before {
}
.contents > ul li.next::after {
}

/* exoskelton */
.exoskelton {
}

/* calendar */
.calendar > ul,
.calendar > div {
	width: calc(100% / 8);
}
.date:nth-of-type(n+8){
	display: none;
}





/* ● PP/GUIDELINE ●
---------------------------------------------------- */
#guidePage {}

main article#papers,
#papers {
	background: none;
	background: #fff;

	padding: 50px 0px 20px;
	min-height: calc(100vh - 100px - 245px);
}
#papers .inner {
	margin: 0 auto;
	padding: 0px 20px;
	background: none;
	box-shadow: none;
}
#papers h2 {
	margin: 0px auto 50px;
	margin: 0px auto 20px;
	font-size: 36px;
	font-size: 30px;
	font-weight: normal;
}







}
/****************************************************
for SmartPhones		//iPhone5 landscape//
*****************************************************/
@media only screen and (max-width:570px) {



.modalLightBox > .button + .button {
	margin-top: 10px;
	margin-left: auto;
}



.shopImage {
	width: 100%;
	max-width: 375px;
}
.shopInfo {
	margin: 0 0 0 0px;
	width:100%;
}



#beforeReserve h2 {
	font-size: 24px;
	max-width: 250px;
}
#beforeReserve h2 + p {
	font-size: 32px;
}
#atFirst .flow {
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}
#atFirst .flow p:nth-of-type(n+2) {
	margin-top: 0px;
}
#atFirst .flow p:nth-of-type(2) {
	margin-left: 50%;
}
#atFirst .flow p:nth-of-type(3) {
	margin-top: -70px;
	margin-left: -30%;
}
#atFirst .flow p:nth-of-type(4) {
	margin-left: 30%;
}
#atFirst .flow p:nth-of-type(5) {
	margin-top: 20px;
}
#atFirst .flow p:nth-of-type(n+2)::before {
	transform-origin: 50%;
	transform: rotate(90deg);
	top: -20px;
	left: calc(150px / 2 - (16px / 4));
}



}
/****************************************************
for SmartPhones		//portrait Limited//
*****************************************************/
@media only screen and (max-width:485px) {

.pcOnly { display: none; }
.spOnly { display: inline-block; }
.spLsOnly { display: none; }
.spPrOnly { display: inline-block; }



body:not(.modalPage) #container > header {
	margin: 0 auto 37px;
}

.modalPage #container > header {
	margin: 0 auto;
}



header > div {
	justify-content: center;
}
header h1 {
	text-align: center;
}
.modalPage header h1 {
/*	width: 100%;	*/
	border-bottom: 5px solid #63d0e4;
}
header h1 p {
	width: 100%;
}
.modalPage header .headingTitle {
	width: 100%;
	border: none;
}
.modalPage header .headingTitle::before {
	display: none;
}


header nav {
	width: 100%;
/*	background: #f8f8f8;	*/

	position: absolute;
	left: 0;
	bottom: -37px;

	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
}
nav ul {
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}



ul.subMenu {
	top: calc(100% - 7px);
	right: 10px;
	text-align: left;

	width: calc((100vw - 20px) *2 /3);
	width: 200px;
}
ul.subMenu li {
}




.shopInfo {
	box-shadow: 1px 2px 3px 0 rgba(100,100,100,0.1);
}
.shopImage.fitImage {
	width: 100%;
	margin: 0px auto 20px;
}
.shopInfo {
	width: 100%;
	margin: 0 auto;
}



.tab li#fullList {
	width: calc(120px);
}
.tab li#fullList a {
/*	line-height: 60px;	*/
}
.tab li#nominatedList {
	width: calc(100% - 135px);
}
.tab select {
	margin: 5px auto 0;
}
.tab input[type=date] {
	margin-left:0;
}
.tab li h2 {
	letter-spacing: 0;
}
.tab li p {
	line-height:2;
}
#atFirst {
	padding: 20px 0;

	padding: 40px 0 20px;
}
#atFirst .tab li {
	width: 100%;
}



.calendar ul li {
	height: 80px;
	line-height: 40px;
}
.calendar ul li,
.date .calTitle p {
	font-size: 12px;
}
.calendar ul li:not(.calTitle)::after {
	right: 3px;
}
.period-item > p a {
	font-size: 14px;
}
.period-item {
	height: 80px;
}
.period-item > p {
	height: 40px;
}
.period-item > p > * {
	height: 39px;
	line-height: 39px;
	height: 36px;
	line-height: 36px;
}


form ul li p,
form ul li p:first-child {
	width: 100%;
}
.customCheckbox label + input + label {
	margin-left: 0px;
}
.customCheckbox .requiredTTL + input + label {
	margin-left: auto;
}



.modalPage .formSubmit {
	display: block;
}
.modalPage .formSubmit + .formSubmit {
	margin: 20px auto 0;
}
.modalPage .formSubmit .button.backward,
#confirm .formSubmit#confirm .button.backward {
	margin: 0 0 20px;
}

#contactPage form#confirm ul li p {

/*	border-left: 1px solid #fff;	*/
}
#contactPage form#confirm ul li p + p {
/*	border: 1px solid #fff;	*/
	border: none;
}





}
/****************************************************
	// iPhone(lt5) Limited//
*****************************************************/
@media only screen and (max-width:359px) {

header > div,
footer > div,
#shop section,
.tab,
.contents > ul,
.exoskelton {
	padding: 0 10px;
}

#papers .inner {
	padding: 0px 10px;
}





}
/****************************************************
	//逆に大きいデバイス
*****************************************************/
@media only screen and (min-width:1361px) {}