@charset "utf-8";

/* CommonStyling
---------------------------------------------------- */
body {
	font-family: "游ゴシック Medium","游ゴシック体","游ゴシック","Yu Gothic Medium","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
	font-feature-settings: "palt" on;
	font-size: 12px;
	color: #333332;
	line-height: 1.5;
	background: #333;

/*	-moz-appearance: none !important;
*/
/*	-moz-appearance: scrollbar-small !important;
*/
/*	overflow-y: scroll;
*/
}
body::-webkit-scrollbar {
	display: none;
}
/*
body::scrollbar {
	display: none;
}
*/

.numWebFont,
#calYear,
#calMonth,
.calendar ul,
.item-date {
	font-family: 'Hammersmith One',"游ゴシック Medium","游ゴシック体","游ゴシック","Yu Gothic Medium","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
}
h1, h2, h3 {
	font-weight: bold;
	color: #696969;
}
h1, h2 {
	line-height: 1.2;
	text-align: center;
}
h1 {	font-size: 28px;	}
h2 {	font-size: 24px;	}
h3 {	font-size: 20px;	}
h4 {	font-size: 16px;	}
h5 {	font-size: 14px;	}
h6 {	font-size: 12px;	}

/* ----- Webフォント使用箇所 ----- *//*
.fontIsOswald {
	font-family: 'Oswald',"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック Medium","游ゴシック体","游ゴシック","Yu Gothic Medium","Yu Gothic",YuGothic,Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
}
.webfont {
	color: crimson !important;
}

*//* ----- 出現アニメ―ション ----- */
@keyframes DELAYED {
	  0% { opacity: 0; }
	100% { opacity: 1; }
}

/* ----- PC-SPハンドリング ----- */
.pcOnly { display: inline-block; }
.spOnly { display: none; }
.spLsOnly { display: none; }
.spPrOnly { display: none; }

/* ----- 画像のフィッティング ----- */
.fitImage {
	position: relative;
	overflow: hidden;
}
.fitImage img {
	position: relative;
	width: 100%;
	height: auto;
}



a:link,
a:visited {
	color: #333332;
	text-decoration: none;
}
a:hover,
a:active {
	color: #333332;
	text-decoration: underline;
}
input {}
label { cursor: pointer; }
button, input, select, textarea {
	-webkit-appearance: none;
	border: none;
	border-radius: 0;
/*	font-family: inherit !important;	*/
}
input[name="note"] { display: none; }



/* ----- ボタン ----- */
.button,
a.button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: auto;
/*	min-width: 40%;	*/		/* xxx */
	min-width: 240px;
	background: #ffa3b2;

	border-radius: 4px;
	border-radius: 100px;

	border: none;
	padding: 5px 30px;

	line-height: 2;
	white-space: nowrap;
	font-size: 18px;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.button::after,
a.button::after {
	content: "";
	position: absolute;
	top: 1em;
	right: 20px;
	background: url(../img/icon_arrow-white.svg) no-repeat;
	background-size: auto;
	width: 6px;
	height: 10px;
}
.button:hover,
a.button:hover {
	text-decoration: none;
}
.nonActivated {
	opacity: 0.5;
	cursor: default;
}
input[type="submit"].nonActivated {}

.button.backward {
	background: #999;
	margin: 0 auto;
	cursor:pointer;
}
.button.backward::after {
	right: auto;
	left: 22px;
	transform: rotate(180deg);
}
.button.basicSW {
	padding: 0 10px;
	font-size: inherit;
	font-weight: bold;
	line-height: 2.1;
	min-width: 0;
	min-width: unset;
}
.button.basicSW::after {
	display: none;
}
.button.pureBtn {
	background: #fff;
	border: 3px solid #ffa3b2;
	color: #ffa3b2;
	line-height: 1.7;
}
.button.inlineBtn {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	padding: 0px 20px 0 10px;
	margin: 2px 0 0 auto;
	min-width: 0;
	min-width: unset;
	background: #f3e31e;
}
.button.inlineBtn::after {
	top: 6px;
	right: 8px;
}
.button.subMenu {
	padding: 0px 25px 0 10px;
	font-size: inherit;
	font-weight: bold;
	line-height: 2.1;
	min-width: 0;
	min-width: unset;
}
.button.subMenu::after {
	top: 10px;
	top: 0.71em;
	right: 10px;
	transform: rotate(90deg);
	transition: all 0.01s linear 0s;
}
.button.subMenu.INDICATE::after {
	transform: rotate(-90deg);
	transition: all 0.5s cubic-bezier(0, 1, 0, 1) 0s;
}
.button.pdfBtn {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	padding: 0px 10px 0 10px;
	margin: 5px 0 5px auto;
	min-width: 0;
	min-width: unset;
	background: #f3e31e;
}
.button.pdfBtn::after {
	display: none;
}



/* ----- もっと見る ----- */
.linkToMore {
	margin: 20px auto 0;
	text-align: right;
	font-weight: bold;
}
.linkToMore a::after,
.linkToMore span:not(.requiredTTL)::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../img/icon_arrow-gray.svg) no-repeat;
	background-size: auto;
	margin: 0 0 0 10px;
	width: 6px;
	height: 10px;
}
.linkToMore span:hover,
.linkToMore span:active {
	text-decoration: underline;
}
:not(.topPage) .linkToMore {
	padding: 0 30px;
	width: 100%;
	max-width: 1240px;
	line-height: 1.5;
	box-sizing: border-box;
}



/* ----- ページャー ----- */
.pager {
	margin: 30px auto 0;
	padding-top: 10px;
	width: 100%;
	max-width: 480px;
	border-top: 5px solid #c4c4c4;
}
.pager ul {
	display: flex;
	justify-content: space-around;
	align-items: baseline;
}
.pager ul li {
	position: relative;
	padding: 0 0px;
	min-width: 20px;
	height: 20px;
	white-space: nowrap;
}
.pager ul li.prev {
	padding: 0 10px 0 0;
}
.pager ul li.next {
	padding: 0 0 0 10px;
}
.pager ul li.current::after,
.pager ul li.current.prev::after,
.pager ul li.current.next::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	top: 0;
	left: 0;
}
.pager ul li.current.prev::after,
.pager ul li.current.next::after {
	top: 5px;
	background: #fff;
}
.pager ul li:not(.prev):not(.next) a {
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background: #f3e31e;
	border: 1px solid #f3e31e;
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.pager ul li.current:not(.prev):not(.next) a {
	color: #f3e31e;
	background: #fff;
}
.pager ul li.prev a::before,
.pager ul li.next a::after {
	display: inline-block;
	box-sizing: border-box;
	color: #fff;
	font-weight: bold;
	text-align: center;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;

	content: "";
	position: relative;
	top: 5px;
	background: #f3e31e url(../img/icon_arrow-white.svg) no-repeat center;
	background-size: 6px 10px;
	background-size: 20px 12px;
}
.pager ul li.prev a::before {
	margin: 0 5px 0 0;
	transform: rotate(180deg);
}
.pager ul li.next a::after {
	margin: 0 0 0 5px;
}







/* container
----------------------------- */
#wrap {
	background: #f8f8f8;
	position: relative;
	width: 100%;
/*	overflow: hidden;	*/
}
#container {
	position: relative;
	z-index: 0;
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 960px;
	min-width: 800px;
	min-height: 100vh;
}
#container::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: #63d0e4;
	width: 100vh;
	height: 100vh;
	top: 0;
	left: 50%;
	margin-left: calc(-1 * 1080px / 2 - 100vh + 137px);

	left: 0;
	margin-left: calc(-1 * 100vh + 137px);

	transform-origin: 100% 0;
	transform: rotate(45deg);
}



/* header
----------------------------- */
header {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	padding: 10px 0;
	box-sizing: border-box;
	line-height: 1;
/*	border-bottom: 1px solid #c4c4c4;	*/
/*	background: #f8f8f8;	*/
}
header > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1080px;
/*	overflow: hidden;	*/
}
header h1 {
	width: auto;
	text-align: left;
	font-size: 0;
}
header h1 p {
	display: inline-block;
	vertical-align: middle;
	width: 200px;
}
header h1 span {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 0 0 10px;
	font-size: 12px;
	font-weight: normal;
}
header nav {
	position: relative;
}
nav ul {
	position: relative;
	font-size: 0;
}
nav ul li {
	display: inline-block;
	font-size: 14px;
}
nav ul li + li {
	margin: 0 0 0 10px;
}



#memberMenu {
	display: none;
}
.sttsLogin #memberMenu {
	display: block;
}
.sttsLogin #guestMenu {
	display: none;
}
.userName {
	font-size: 18px;
	margin-right: 0.5em;
}
ul.subMenu {
	display: flex;
	flex-flow: column wrap;
	position: absolute;
	z-index: 5;
	top: calc(100% - 5px);
	right: -10px;
	box-sizing: border-box;
	width: auto;
	height: auto;
	background: #ffa3b2;
	background: rgba(255,255,255,0.9);
	border: 3px solid #ffa3b2;
	padding: 30px 20px;

	display: none;
}
ul.subMenu.INDICATE {
	display: flex;
}
ul.subMenu li::before {
	content: "＞";
	margin-right: 0.5em;
}
ul.subMenu li + li {
	margin: 30px 0 0;
}




/* footer
----------------------------- */
footer {
/*	border-top: 1px solid #c4c4c4;	*/
	margin: 50px auto 0;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	box-sizing: border-box;
	line-height: 1;
}
footer > div {
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1080px;
	overflow: hidden;
}
footer ul {
	font-size: 0;
	padding: 0px 0;
}
footer ul li {
	display: inline-block;
	font-size: 14px;
}
footer ul li + li {
	margin: 0 0 0 0.5em;
}
footer ul li + li::before {
	content: "／";
	margin-right: 0.5em;
}
footer ul li span {
	margin: 0 0 0 5px;
	font-size: 10px;
}
footer ul li span::before {
	content: "（";
}
footer ul li span::after {
	content: "）";
}
footer p {
	margin: 20px auto 0;

/*	margin: 0;
	display: inline-block;	*/
}
footer a {
	display: inline-block;
}



/* main
----------------------------- */
main {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: 100%;
	min-height: calc(100vh - 51px - 87px);		/* headerH - footerH */
/*	min-height: calc(100vh - 51px - 55px);	*/
}
main article {
	margin: 0 auto;
	padding: 40px 0;
}
/*
main article:not(#papers),
main article:not(#shop) {
*/
article:not(#papers),
article:not(#shop) {
	background: #fff;
}
main article section {
	box-sizing: border-box;
}
main article section > div {
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1080px;
}



/* article > header
----------------------------- */
article > header {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;

	margin: 0 auto;
	padding: 0 10px 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1080px;
	height: auto;
	line-height: 59px;
	text-align: center;
}
article > header h1 {
	order: 1;
	white-space: normal;
	font-weight: normal;
	line-height: 1.2;
	font-size: 32px;
}
.headingTitle {
	order: 2;
	font-size: 16px;
	line-height: 1.2;
	margin-top: 10px;
	padding-bottom: 4px;
}
body:not(#guidePage) article > header h1,
body:not(#guidePage):not(.modalPage) .headingTitle {
	border-bottom: 5px solid #63d0e4;
}
.headingTitle::before {
	content: "／";
	margin: 0 0.5em;
	font-size: 10px;
}
h2 span {
	font-size: inherit;
}
h2.heading {
	font-size: 16px;
	padding: 0;
	text-align: left;

	margin: 0 auto 25px;
	width: 100%;
	max-width: 480px;
}
#contactPage h2.heading {
	text-align: center;
}



/* ●form - 共通 ●
---------------------------------------------------- */
form {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 500px;

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
form input, form textarea {
	display: block;
	width: 100%;
	min-height: 42px;
	background: #fff;
	font-size: 12px;
	box-sizing: border-box;

	background: #f0f0f0;
	font-weight: bold;
/*
	font-size: 17px;
*/
	font-size: 14px;
}
form *::-webkit-input-placeholder {
	color: #63d0e4;
}
form *:placeholder-shown {
	color: #63d0e4;
}
form > ul {
	width: 100%;
}
form ul + ul {
	margin: 50px auto 0;
}
form ul li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#contactPage form ul li:last-child {
	align-items: flex-start;
}
form#confirm ul li {
	align-items: flex-end;
}
#contactPage form#confirm ul li {
	align-items: flex-start;
}
#reservePage form#confirm ul li {
	align-items: center;
}
form ul li + li {
	margin: 20px auto 0;
}
form ul li + li.pair {
	margin: 5px auto 0;
}
form ul li p,
.modalPage:not(#loginPage) form ul li p.customCheckbox.linkToMore {
	margin: 0;
	display: inline-block;
	width: calc(100% - 110px);
	font-size: 24px;
	text-align: left;
}
form ul li p:first-child {
	font-size: 12px;
	font-weight: normal;

	width: 100px;
	margin: 0 10px 0 0;
}
#contactPage form ul li:last-child p:first-child {
	margin-top: 10px;
}
#contactPage form#confirm ul li p:first-child,
#contactPage form#confirm ul li:last-child p:first-child {
	margin-top: 10px;
}



.requiredTTL {
	display: inline-block;
	width: auto;
}
.customCheckbox .requiredTTL + input + label {
	margin-left: 50px;
}
.requiredTTL::after,
.requiredMark {
	content: "*";
	color: #ff0000;
	font-size: 20px;
	display: inline-block;
/*	vertical-align: top;	*/
	margin: 0 0 0 5px;
	line-height: 12px;
	vertical-align: -6px;
}



/*
font-size, font-weight, marginは少し上のform ul li p:first-childと同じ
直下の.requiredTTLでwidthが上書きされるので、ここで個別に定義しています
*/
form.for_pet ul li.pair p.requiredTTL {
	font-size: 12px;
	font-weight: normal;
	margin: 0 10px 0 0;
}



form ul li p .message {
	display: block;
	margin: 6px auto 0 -40px;
	font-size: 12px;
	width: 100%;
	min-width: 250px;
	text-align: left;
}



#rsvPet {}
#rsvMenu {}
#rsvTrimmer {}
#rsvDate {}
#rsvStart, #reserve #target_start_time, #confirm #target_start_time {}
#rsvStart::after, #reserve #target_start_time:after, #confirm #target_start_time:after {
	content: "～";
	margin: 0 0.5em;
}
#rsvEnd, #target_end_time:not(.at_dev) {
	opacity: 0.0;
}



form ul li input,
form ul li textarea {
	padding: 10px;
}
form input[type="submit"] {
	width: 100%;
	max-width: 316px;
}
form select {
	width: 100%;
	max-width: 480px;
	padding: 10px;
	background: #fff;
	cursor: pointer;

	background: #f0f0f0;
}



/* ----- customCheckbox ----- */
.customCheckbox {
	margin: 25px auto 0;
	padding: 0 0 0 25px;
	text-align: left;
	width: auto;
}
.modalPage .customCheckbox.linkToMore {
	padding: 0 0 0 40px;
}
.customCheckbox input {display: none;}
.customCheckbox label {
	position: relative;
	display: inline-block;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
}
.customCheckbox label::before,
.customCheckbox label::after {
	content: "";
	position: absolute;
	top: 50%;
	display: block;
}
.customCheckbox label::before {
	background: #ffa3b2;
	opacity: 0;

	left: -31px;
	margin: -6px auto 0;
	width: 14px;
	height: 14px;
}
#loginPage .customCheckbox label::before {
	left: -21px;
	margin: -6px auto 0;
	width: 8px;
	height: 8px;
}
.customCheckbox label::after {
	border: 1px solid #4c4c4c;
	margin: -10px auto 0;

	left: -35px;
	width: 20px;
	height: 20px;
}
#loginPage .customCheckbox label::after {
	left: -25px;
	width: 14px;
	height: 14px;
}
.customCheckbox input:checked + label::before {
	opacity: 1;
}
.customCheckbox label + input + label {
	margin-left: 80px;
}


.customCheckbox a {
	text-decoration: underline;
}
.customCheckbox a:hover {
	text-decoration: none;
}
.customCheckbox a::after {
	display: none;
}



/* ----- customRadio ----- */
.customRadio {
	font-size: 0;
}
.customRadio input {display: none;}
.customRadio label {
	display: inline-block;
	background: #4c4c4c;
	background: #999;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
}
.customRadio input:checked + label {
	background: #48c980;
	background: #ffa3b2;
}
.customRadio label + input + label {
	margin: 0 0 0 10px;
}



/* ----- formSubmit ----- */
.formSubmit {
	margin: 50px auto 0;
	text-align: center;
	max-width: 230px;
	max-width: 240px;
}
.modalPage .formSubmit {
	display: inline-block;
}
.modalPage .mailIsSent .formSubmit {
	width: 100%;
	max-width: unset;
}
.modalPage .formSubmit + .formSubmit {
/*	margin: 20px auto 0;	*/
	margin-left: 15px;
}
.formSubmit .button {
	margin: 0 auto;
}
.formSubmit input {display: none;}

#confirm .formSubmit#confirm,
#contactPage .formSubmit{
	width: 100%;
	max-width: unset;
}
#confirm .formSubmit#confirm .button.backward {
	margin-right: 15px;
}
#contactPage .formSubmit .button {
	margin: 0 10px;
}





.message {
	margin: 10px auto 30px;
	width: 100%;
	text-align: center;
	color: #63d0e4;

/*	display: none;	*/
}



/* ----- エラー表示 ----- */
#forError.none {
        display: none;
}
#forError .error {
        margin: 30px auto 0;
        width: 100%;
        max-width: 500px;
        text-align: center;
}
#forError .error li {
        color: #ff0000;
        font-size: 24px;
        line-height: 1.2;

}
#forError .error li:not(:first-child) {
        margin-top: 0.5em;
}
section #resetError {
	margin-top:10px;
}



/* ----- confirmPage ----- */
.confirmPage main {
	min-height: calc(100vh - 110px - 24px - 20px);
}
.confirmPage section {
	margin: 10px auto 0;
	padding: 40px 20px;
}
.confirmPage h2 {
	margin: 0 auto 20px;
	max-width: 360px;
}
.confirmPage form {
	margin: 10px auto 0;
	width: 100%;
	max-width: 360px;
}



/*
#confirm .button:not(.backward) {
	margin: 0 0 0 20px;
}
#confirm .button + .button {
*/
.button + .button {
	margin-left: 20px;
}
#confirm .linkToMore {
	margin: 50px auto 0;
}



.mailIsSent {
	padding: 0;
	width: 100%;
	height: 290px;
}
.msgPage {
	margin: 0 auto 20px;
	font-size: 12px;
	text-align: center;
}
.btnArea {
	margin: 50px auto 0;
	text-align: center;
}





/* ● 共通スタイルとして ●
---------------------------------------------------- */
.flexBox {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
}
.pdf {}



/* ● TOP ●
---------------------------------------------------- */
/* shop */
main article#shop,
#shop {
/*	background: #f8f8f8;	*/
	background: none;
	padding: 20px 0;
}
#shop section {
	padding: 0;
}
#shop section > * {
	display: flex;
	flex-flow: row wrap;
/*	justify-content: space-between;
*/
}
.shopImage {
	width: 300px;
	height: 200px;

	width: 400px;
	height: auto;

	box-sizing: border-box;
	padding: 0 0px 10px 0;
}
.shopImage .fitImage {
	border: 1px solid #444;
	box-shadow: 4px 4px 0 0px #4c4c4c;
}
.shopImage .fitImage img, .shopImage .fitImage span {
	box-sizing: border-box;
	border: 8px solid #fff;
}
/*
.shopImage.fitImage img::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 5px 5px 0 0px #4c4c4c;
}
*/
.shopInfo {
	margin: 0 0 0 20px;
	box-sizing: border-box;
	width: calc(100% - 420px);
	padding: 40px;
	background: #fff;
	box-shadow: 2px 4px 4px 0 rgba(100,100,100,0.1);
}
.shopInfo h1 {
	text-align: left;
}
.shopInfo h1 a {
	text-decoration: underline;
}
.shopInfo h1 a::after {
	content: "";
	display: inline-block;
	margin-left: -0.5em;
	width: 2em;
	height: 2em;
	margin: 0em auto -0.2em 0.2em;
	width: 1em;
	height: 1em;
	margin: 0em auto -0.25em 0.2em;
	width: 1.5em;
	height: 1.5em;

	background: url(../img/icon_home.svg) no-repeat center;
	background-size: auto 100%;
}


.shopInfo div {
	margin: 10px auto 0;
}
.shopInfo .flexBox {
	margin: 0;
}
.shopInfo dl {
	display: flex;
	align-items: baseline;
	font-size: 0;
}
.shopInfo dl + dl {
	margin: 5px auto 0;
}
.shopInfo dl dt,
.shopInfo dl dd {
	font-size: 12px;
}
.shopInfo dl dt {
	width: 80px;
	font-size: 12px;
	line-height: 18px;
}
.shopInfo dl dd {
	width: calc(100% - 100px);
}
.shopInfo dl dd  a {
	font-size: 24px;
}





#atFirst {
	box-shadow: 0 -15px 0px 40px rgba(0,0,0,0.1);

	box-shadow: 0 -30px 0px 30px rgba(0,0,0,0.1);
	margin-bottom: 25px;
	padding: 40px 0 0;
	text-align: center;
}
#beforeReserve {
	display: block;
	padding: 0 0 50px;
}
		.sttsLogin #beforeReserve {
			display: none;
		}

#letsReserve {
	display: none;
	padding: 0 0 40px;
}
		.sttsLogin #letsReserve {
			display: block;
		}

#atFirst h2 {
	position: relative;
	z-index: 0;
	display: inline-block;

	font-size: 26px;
	font-weight: normal;
	letter-spacing: 0.1em;
	margin-bottom: 0.5em;
}
#beforeReserve h2 {
	position: relative;
	z-index: 0;
	display: inline-block;

	font-size: 37px;
/*	border-bottom: 5px solid #63d0e4;	*/
/*	text-decoration: underline #63d0e4;	*/
}
#atFirst h2::after,
#beforeReserve h2::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
/*	box-sizing: border-box;	*/
	width: 100%;
	height: 100%;
/*	background: #63d0e4;	*/

	border-bottom: 5px solid #f3e31e;
	border-bottom: 5px solid #63d0e4;
}
#beforeReserve h2::after {
/*	border-bottom: 5px solid #ffa3b2;	*/
}
#atFirst p {
	position: relative;
	z-index: 1;
}
#beforeReserve h2 + p {
	margin-top: 20px;
	font-size: 16px;
}
#atFirst .flow {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin-top: 20px;
}
#atFirst .flow p {
	position: relative;
	background: #63d0e4;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 25px;
/*	text-align: left;	*/
	font-size: 16px;
	color: #fff;

	display: flex;
	flex-flow: column wrap;
	justify-content: center;
}
#atFirst .flow p:nth-of-type(1) {
	background: #ffa3b2;
}
#atFirst .flow p:nth-of-type(2) {
	margin-top: 20px;
}
#atFirst .flow p:nth-of-type(3) {
	margin-top: 10px;
}
#atFirst .flow p:nth-of-type(4) {
	margin-top: -20px;
}
#atFirst .flow p:nth-of-type(2n) {
	background: #f5e400;
}
#atFirst .flow p:nth-of-type(n+2)::before {
	content: ">";
	color: #c4c4c4;
	font-size: 16px;
	line-height: 16px;
	position: absolute;
	top: calc(150px / 2 - (16px / 2));
	left: -16px;
}
#atFirst .flow p a {
	color: #fff;
	text-decoration: underline;
}
#atFirst .flow p small,
#atFirst .flow p big {
	display: block;
	margin-top: 1em;
}
#atFirst p {
}
#atFirst select[name="petName"] + p {
	font-size: 10px;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 3;	
	color: #696969;
}
#atFirst .tab li,
#atFirst .tab li.ACTIVE {
	background: #fff;
	border: 1px solid #4c4c4c;
	border: none;
}



/* schedule */
#schedule {
/*	box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.1);
*/
	text-align: center;
	display: none;
}
		.sttsLogin #schedule {
			display: block;
		}

#schedule section {
	padding: 0;
}
main article#schedule section > div {
	padding: 0;
	max-width: unset;
}
#schedule h2 {
	position: relative;
	z-index: 0;
}
#schedule h2 span {
	position: relative;
	z-index: 0;
	display: inline-block;
/*	width: 300px;	*/
	height: 100%;
	background: #fff;
	padding: 0 1em;

/*	font-size: 26px;
	font-weight: normal;
*/
	letter-spacing: 0.1em;
/*	margin-bottom: 0.5em;	*/
}
#schedule h2::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 20px;
	left: calc( -100vw + 150px );
	left: calc( -50vw + 150px );
/*	box-sizing: border-box;	*/
	width: 100%;
	height: 100%;
/*	background: #63d0e4;	*/


	border-top: 1px dashed #f8f8f8;
	border-top: 1px dashed rgba(0,0,0,0.3);

	border-top: 1px dashed #333332;
	border-top: 1px dashed #63d0e4;

	width: 200vw;
	width: 100vw;
	height: 1px;

	width: 100%;
	left: 0;

	transform: scale(0.5,10);
	transform: scale(0.9,10);
}



/* tab */
.tab {
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	justify-content: space-between;
	align-items: stretch;

	margin: 20px auto 0;

	padding: 0 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: 960px;
	text-align: center;
}
.tab li {
	position: relative;
	background: #f2f2f2;
/*	border: 1px solid #4c4c4c;

	border-bottom: none;
*/
	border-bottom: 1px solid #4c4c4c;

	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	box-sizing: border-box;
	width: calc(50% - 10px);

	padding: 10px 0 0px;
}
.tab li + li {
/*	margin-left: 10px;
*/
}
.tab li.ACTIVE {
	background: #fff;
	border: 1px solid #4c4c4c;
	border-bottom: none;
}
.tab li.ACTIVE::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	background: transparent;
}
.tab li.ACTIVE a {
	border: 1px solid #fff;
}
.tab li > * {
	display: block;
/*	padding: 10px 0;
*/
	box-sizing: border-box;
/*
	width: 100%;
	height: 100%;
*/
	font-size: 16px;
/*	line-height: 44px;
*/
}
.tab li > span {
}
.tab li a {
	font-size: 24px;
/*	text-decoration: none;
*/
	background: #fff;
	display: inline-block;
	letter-spacing: 0.1em;
	padding: 0 20px;
/*	border: 1px solid #4c4c4c;
*/
	border-radius: 100px;
	border: 1px solid #ffa3b2;
}
.tab li p {
	font-size: 12px;
}
/*
.tab li#nominatedList > small {
*/
.tab li small {
/*	position: absolute;
	top: 41px;
*/
	font-size: 12px;

	font-size: 10px;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 3;
	color: #696969;

}
.tab li span > small {
	display:inline-block;
	line-height: 1;
}
.tab li span > small:not(.alamode) {
	margin-left: 10px;
}
.tab select {
	position: relative;
	z-index: 1;
	margin: 0 0 0 10px;

	padding: 0 20px;
	padding: 10px 20px;
	background: #fff;

	border: 1px solid #4c4c4c;
	font-size: 12px;
	cursor: pointer;

	padding: 10px 25px 10px 10px;
	padding: 10px 35px 10px 10px;

	border: none;
	border-left: 10px solid #ffa3b2;
	border-right: 10px solid #ffa3b2;

	border: 1px solid #ffa3b2;
	border-radius: 5px;

	width: 100%;
	margin: 0;

	background-image: url(../img/ui_select_pink.svg);
	background-repeat: no-repeat;
	background-position: calc(100% + 1px) center;
	background-size: auto calc(100% + 2px);
}
/*
.tab select::after {
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: 10px;
	display: inline-block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	background: url(../img/ui_arrow1.svg) no-repeat center 50%;
	background-size: auto auto;
	background-size: contain;
}
*/

.tab input[type=date] {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid #4c4c4c;
	font-size: 12px;
	cursor: pointer;
	padding: 10px 10px 5px 10px;
	border: 1px solid #ffa3b2;
	border-radius: 5px;
	width: 12em;
	margin-bottom:10px;
}

#schedule .tab select {
	width: auto;
	margin: 0 0 0 10px;
}





.contents {
	position: relative;
	border-top: 1px solid #4c4c4c;
	margin: -1px auto 0;

	padding: 20px 0;
	width: 100%;
	box-sizing: border-box;
/*
	-webkit-overflow-scrolling: touch;
	overflow: scroll;
*/
}
.contents.nohr {
	border-top: none;
}
.contents h3 {
	position: absolute;
	left: 0;
	z-index: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.contents h3 span {
	font-size: 32px;
	font-weight: normal;
}
.contents h3 .unit {
	font-size:20px;
	font-weight:bold;
}


.msgWelcome {
	position: relative;
	top: 7px;
	display: inline-block;
	padding: 10px;
	border: 3px solid #f3e31e;

/*	padding: 5px;
	border: 5px solid #c4c4c4;
	border: 2px dotted #c4c4c4;
*/
	padding: 0 10px 10px calc(10px + 1.5em);
	padding: 5px 0px 5px calc(0px + 1.5em);
	border: none;
	border-top: 2px dotted #c4c4c4;
	border-bottom: 2px dotted #c4c4c4;

	font-size: 10px;
	letter-spacing: 0.1em;
	font-weight: bold;
/*	line-height: 3;		*/
	color: #696969;
	color: #969696;

}
.msgWelcome::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 10px;
	top: 5px;
	left: 0px;
}
.msgWelcome .pcOnly {
	display: none;
}



/* prev / next */
.contents > ul {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
	max-width: 1080px;
	box-sizing: border-box;
}
.contents > ul li {
	position: relative;
}
.contents > ul li a {
	display: block;
}
.contents > ul li.prev a::before,
.contents > ul li.next a::after {
	display: inline-block;
	box-sizing: border-box;
	color: #fff;
	font-weight: bold;
	text-align: center;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;

	content: "";
	position: relative;
	top: 5px;
	background: #f3e31e url(../img/icon_arrow-white.svg) no-repeat center;
	background-size: 6px 10px;
	background-size: 20px 12px;

	top: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background-position: 57% center;
	background-size: auto 40%;
	vertical-align: middle;

	width: 40px;
	height: 40px;
	line-height: 40px;
}
.contents > ul li.prev a::before {
	margin: 0 5px 0 0;
	transform: rotate(180deg);
}
.contents > ul li.next a::after {
	margin: 0 0 0 5px;
}
.contents > ul li.nonActive::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	background: rgba(255,255,255,0.777);
	top: 0;
	left: 0;
}





/* exoskelton */
.exoskelton {
	position: relative;
	display: flex;

	margin: 20px auto 0;
	padding: 0 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1080px;
}
/* calendar */
.calendar {
	display: flex;
	justify-content: space-between;
	justify-content: flex-start;
/*	border: 1px solid #4c4c4c;	*/
	width: 100%;
	max-width: 800px;
	max-width: 796px;		/*割り切れず隙間できる為*/
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
.calendar a {
	display: block;
	text-decoration: none;
}
.calendar > ul,
.calendar > div {
	width: calc(100% / 15);
}
.calendar > div {
}
.calendar ul {
/*	margin-top: 50px;	*/
	text-align: center;
}
.calendar ul li {
	position: relative;
	box-sizing: border-box;
	height: 100px;
	line-height: 50px;
	background: #95eeff;

/*	border-top: 1px solid #4c4c4c;	*/
	font-size: 16px;
	border-bottom: 4px solid #fff;
	border-right: 2px solid #fff;
}
.calendar ul li.calTitle {
	position: relative;
	z-index: 1;
	height: 54px;
	border-top: 1px solid #fff;
	border-bottom: 4px solid #fff;
	background: #fff;
}
.calendar:not(.animal) ul li:not(.calTitle)::after {
	content: ":30";
	position: absolute;
	bottom: 0;
	right: 6px;

	display: block;
}

.date {
/*	border-left: 1px solid #4c4c4c;	*/
}
.date .calTitle {
	box-sizing: border-box;	
	position: relative;
	z-index: 1;
	width: 100%;
	height: 54px;
	background: #fff;
/*	padding: 0 0 0 1px;	*/
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
}
.date .calTitle p {
	box-sizing: border-box;	
/*
	position: relative;
	width: 100%;
*/
	height: 25px;
	line-height: 25px;
/*	border: 1px solid #4c4c4c;	*/
	border-top: 1px solid #fff;
	font-size: 16px;
}
.date .calTitle p + p {
	font-weight: bold;
/*	border-top: 1px solid #4c4c4c;	*/
}
.item-date {
	background: #fff;
	background: #95eeff;
}
.item-day {

	background: #95eeff;
	background: #fff;

	background: #ededed;
	background: #d2f8ff;

}
.saturday {
	color: #83daea;
	color: #63d0e4;
}
.sunday,
.holiday {color: #ffa3b2;}



.period-item {
	height: 100px;
	box-sizing: border-box;
/*	padding: 0 0 1px 0;	*/
	padding: 0 2px 0;
	border-bottom: 2px solid #fff;
}
.period-item:nth-of-type(n+3) {
/*	border-top: 4px solid #fff;	*/
}
.period-item:nth-of-type(2n) {
/*	background: #f8f8f8;	*/
}
.period-item > p {
/*	border-top: 1px solid #4c4c4c;		*/

	height: 50px;
	box-sizing: border-box;
	padding: 0 0 1px;
}
.period-item > p + p {
/*	border-top: 1px solid #c4c4c4;		*/
/*	margin-top: 1px;	*/
}
.period-item > p > * {
	font-size: 16px;
	height: 49px;
	line-height: 49px;
	padding: 0 0 1px;
	box-sizing: border-box;
	height: 46px;
	line-height: 46px;
	padding: 0;
}
.period-item > p > a {
	background: #ffc6cf;
	font-weight: normal;
}
.period-item > p.aFew > a {
	background: #feaab8;
}
.period-item > p > a:hover,
.period-item > p.aFew > a:hover {
	background: #ffa3b2;
	color: #fff;
}
.period-item > p > span {
	display: block;
	background: rgba(0,0,0,0.1);
	background: #c4c4c4;
}
.period-item > p.notOpen:not(.past) {
	background: rgba(0,0,0,0.2);
	background: #f2f2f2;
	margin-bottom: -4px;
}
.period-item > p.notOpen:not(.past) * {
	display: none;
}






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

main article#papers,
#papers {
/*	background: #fafafa;	*/
	background: none;
	box-sizing: border-box;
	min-height: calc(100vh - 51px - 87px);
}
#papers .inner {
	margin: 10px auto;
	padding: 100px;
	max-width: 900px;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0px 2px 4px 0 rgba(100,100,100,0.1);
}
#papers article {
	margin: 0 auto;
	padding: 20px 0;
}
#papers article > header {
	border: none;
}
#papers h2 {
	margin: 20px auto 10px;

	margin: 0px auto 50px;
}
#papers h3 {
	margin-bottom: 10px;
}
#papers dt {
	margin-top: 20px;
	font-size: 120%;
}
#papers dd {
	margin-left: 20px;
}
#papers small {
	display: block;
	margin: 20px auto;
	text-align: right;
/*	font-size: 14px;*/
}





/* ◆◆◆アイフレーム／ライトボックス◆◆◆
---------------------------------------------------- */
.MSK {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	display: block;
	width: 100vw;
	height: 100vh;
	cursor: pointer;
}
.MSK.modalMode {
	cursor: default;
}
.modalCloseBtn {
	position: fixed;
	z-index: 12;
	top: 10px;
	margin-left: calc(50%);
	left: 0;
	background: #fff;
	border-radius: 100px;
	padding: 10px;
	width: 20px;
	height: 20px;
}
.modalCloseBtn a {
	background: url(../img/icon_delete-gray.svg) no-repeat;
	background-size: 100%;
	display: block;
	width: 20px;
	height: 20px;
}
.iframeLightBox {
	position: fixed;
	z-index: 11;
	top: 0px;
	box-sizing: border-box;
	width: 360px;
	height: calc(100vh - 100px);
	overflow: hidden;
}
.MSKwh {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	display: block;
	width: 100vw;
	height: 100vh;
}
.modalLightBox {
	position: fixed;
	z-index: 11;
	top: 0px;
	box-sizing: border-box;
	width: auto;
	width: 100vw;
	height: auto;
	padding: 20px;
	background: rgba(0,0,0,0.5);
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
	color: #fff;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}
.modalLightBox p {
	margin: 0px auto;
}
.modalLightBox > .button {
	margin: 10px auto 0;
	padding: 0 20px;
	width: 240px;

}
.modalLightBox > .button + .button {
	margin-left: 20px;
}





/* login ～ ●モーダル系共通●
---------------------------------------------------- */
.modalPage,
.modalPage #wrap {
	background: transparent;
}
.modalPage #container {
/*	background: #fff;	*/
	min-height: unset;
	height: calc(100vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modalPage #container::after {
	left: 50%;
	margin-left: calc(-1 * 1080px / 2 - 100vh + 137px);

	left: 0;
	margin-left: calc(-1 * 100vh + 100px);
	z-index: 1;
}
.modalPage #container::-webkit-scrollbar {
	display: none;
}



.modalPage #container > header,
.modalPage #container > footer {
	padding: 0;
	border: none;

	display: none;
}
.modalPage main {
	min-height: calc(100vh);
	z-index: auto;
}
.modalPage main > article {
	padding: 20px 0 0;
}
.modalPage main > article > section {
	position: relative;
/*	background: #f7f7f7;	*/
	margin: 0 auto;
	padding: 30px 0 70px;
	padding: 0px 0 70px;
	padding: 0px 0 150px;
/*	border-bottom: 1px solid #c4c4c4;	*/
}
.modalPage .linkToMore {
	padding: 0;
	text-align: center;
}
.modalPage:not(#loginPage) .linkToMore {
	margin: 50px auto 0;
}





/* reminder
----------------------------- */
.remindMessage {
	margin: 0 auto 20px;
	text-align: center;
	font-size: 12px;
}
.remindMessage a {
/*	font-weight: bold;	*/
	font-size: 1.5em;
}
.remindMessage a:link, 
.remindMessage a:visited {
	text-decoration: underline;
}

.heading {}
.headingTitle {}
/* 上記使用中 */

.title {
	display: block;
//	background: #f2f2f2;
	padding: 1em 0;
	font-size: 1.2em;
	font-weight: bold;
	color: #696969;
}
.attentionCard {
	margin: 2em auto 1em;
	padding: 1em 2em 2em;
	border: 5px solid #ffa3b2;
	border: 5px solid #f2f2f2;
	border: 5px solid #c4c4c4;
	line-height: 2;
}





/* contact
----------------------------- */
#contactPage #wrap {
	background: #fff;
}
#contactPage main header {
	border: none;
}
#contactPage main > article {
	padding: 40px 0 0;
	background: none;
}
#contactPage main > article > section {
/*	background: #f7f7f7;	*/
	padding: 30px 0 70px;
	padding: 0px 0 70px;
}
#contactPage form {
	max-width: 720px;
}
#contactPage form#confirm ul li p {
	border-bottom: 1px solid #fff;
	min-height: 1.5em;
}



/* 動物病院向けカスタマイズ */
.calendar.animal ul li {
	height: 60px;
}
.calendar.animal .period-item {
	height: 60px;
}
.calendar.animal .period-item > p:first-child {
	height: 60px;
}
.calendar.animal .period-item > p:last-child {
    display:none;
}
.calendar.animal .period-item > p:first-child > * {
	height: 56px;
}
.calendar.animal ul li:first-child {
    height:54px;
}



/* towards... LINE!
---------------------------------------------------- */

.introLinePage .button,
.introLinePage a.button,
a.lineBtn {
	background: #05bf4a;
}
.modalCloseBtn.noneed {
	display:none;
}
.line_rich_menu {
	visibility:hidden;
}



/* --------- はじめて～ログイン --------- */
.loginAtFirst {
	margin: 2em auto;
}
.inner > h3 {}
#loginPage h3 {
	margin: 1em auto;
}
.loginAtFirst .formSubmit {

	margin-top: 3em;
}
.remindZone {
	margin: 2em auto 4em;
}

/* コーナンEC連携 */
h1.ecHead + nav .ecBtn {
	background-color: #3f4faf;
}
h1.ecHead + nav a.ecBtn + span {
display: block;
    margin-top: 0.5em;
    font-size: 12px;
    color: #696969;
}



/* ■■■ ■■■ モック用テンポラリ ■■■ ■■■ ■■■ ■■ ■
----------------------------------------------------------------*/
.DYNAMICS.on,
.DYNAMICS.on a {color: palevioletred;}
.checkSwitch {
	position: fixed;
	bottom: 10px;
	left: 10px;
	z-index: 100;
	box-sizing: border-box;
	padding: 0px 8px;
	line-height: 16px;
	min-width: 20px;
	min-height: 20px;
	background: palevioletred;
	border: 1px solid palevioletred;
	border-radius: 100px;
	opacity: 0.5;
	cursor: pointer;
}
.checkSwitch.on {
	opacity: 1;
}
.checkSwitch::after {
	content: "";
	font-size: 0px;
	letter-spacing: 0.2em;
	color: white;
	transition: all 0s cubic-bezier(0, 1.5, 0, 1) 0s;
}
.checkSwitch.on::after {
	content: "＼動的要素を表示中／";
	font-size: 10px;
	transition: all 0.3s cubic-bezier(0, 1.5, 0, 1) 0s;
}



#fromMail {
	position: fixed;
	bottom: 60px;
	left: 10px;
	z-index: 9;
	box-sizing: border-box;
	padding: 3px 6px 0;
	line-height: 16px;
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 100px;
}
#fromMail a {
	white-space: nowrap;
	color: #c4c4c4;
}



.TEMP_LINK {
	position: absolute;
	bottom: 10px;
	left: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
.TEMP_LINK a {
	color: #999;
}
/* ■■■ ■■■ モック用テンポラリ ■■■ ■■■ ■■■ ■■ ■ */