@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');


/* ============================================================================================
	variables
============================================================================================= */
*{
	--main-fonts:'Noto Sans JP' ,sans-serif;
	--title-fonts:'Montserrat' ,'Noto Sans JP' ,sans-serif;
}


/* =============================================================================================
	CSS reset
============================================================================================= */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
.bx-wrapper * {
}
html ,body ,div ,p ,iframe ,a ,img ,
span ,small ,i ,strong ,em ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	line-height:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	padding:0.3em;
	letter-spacing:1px;
}
input[type="submit"] ,button {
	padding:0.5em 2em;
}

html ,body {
	min-height:100%;
	height:100%;
}
a ,a:before ,a:after {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}


img {
	vertical-align:top;
	max-width:100%;
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}



/* =============================================================================================
	common
============================================================================================= */
.off {
	opacity:0;
}

.nopage {
	padding:15em 0 20em;
	text-align:center;
}

small {
	font-size:80%;
}

.noData {
	width:100%;
	padding:5em 0 10em;
	color:#999;
	text-align:center;
}


a.linkDeco {
	padding:0 0.3em;
	color:#f06;
}
@media screen and (min-width:1000px) { 
	a.linkDeco:hover {
		color:#00f;
	}
}



/* ==============================================
	no display
=============================================== */
@media screen and (min-width:1000px){
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:999px){
	.dispPC {
		display:none !important;
	}
}

.noDisp {
	display:none !important;
}


/* ==============================================
	position
=============================================== */
.align-c {
	text-align:center;
}
.align-l {
	text-align:left;
}
.align-r {
	text-align:right;
}



/* ==============================================
	flex
=============================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.base {
	align-items:baseline;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}

.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}



/* =============================================================================================
	parts layout
============================================================================================= */
.link-banner {
	border:1px solid #fff;
}
@media screen and (min-width:1000px){
	.link-banner:hover {
		box-shadow:0 0 0.8em #f39;
	}
}


/* ==============================================
	title
=============================================== */
.titleBar {
	text-align:center;
	padding-bottom:3em;
	font-weight:bold;
	font-family:var(--title-fonts);
}
.titleBar .flex {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	color:#f39;
}
.titleBar .en {
	width:100%;
	line-height:1.2;
	font-size:300%;
	border-bottom:5px solid #744;
}
.titleBar .jp {
	font-size:180%;
}

.titleImage {
	padding-bottom:1em;
	text-align:center;
}

@media screen and (max-width:999px){
	.titleBar {
		padding-bottom:2em;
	}

	.titleBar .en {
		font-size:250%;
	}
	.titleBar .jp {
		font-size:150%;
	}
}


/* ==============================================
	snsLink
=============================================== */
.snsLink {
	display:flex;
	justify-content:center;
	align-items:center;
}
.snsLink > * {
	padding:0 0.5em
}
.snsLink img {
	height:3em;
}


/* ==============================================
	pagetop button
=============================================== */
#pagetopButton {
	position:fixed;
	right:0.5em;
	bottom:0.5em;
}
#pagetopButton > .anchorLink {
	width:4em;
	aspect-ratio:1/1;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
	background:rgba(102,102,102,0.8);
	border:1px solid #ccc;
}


/* ==============================================
	page link
=============================================== */
.pageLinks {
	padding:2em 1em 0;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.pageLinks a {
	display:flex;
	justify-content:center;
	align-items:center;
	width:2em;
	height:2em;
	margin:0.3em;
	color:#000;
	font-weight:900;
	border:1px solid #ccc;
	border-radius:0.2em;
	text-align:center;
}
.pageLinks a:not(.wAuto).active {
	color:#fff;
	background:#f39;
	border:1px solid #f39;
}
.pageLinks a:not(.active):hover {
	background:#fbd;
}
@media screen and (max-width:799px){
}



/* ==============================================
	insta widget
=============================================== */
.instaImages {
	display:flex;
	justify-content:center;
	align-items:stretch;
	flex-wrap:wrap;
}
.instaCell {
	width:calc(100% / 3);
	padding:3px;
}
.instaCell a {
	position:relative;
	display:block;
}
.instaCell a:hover {
	opacity:0.8;
}
.instaCell a > * {
	display:block;
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.instaCell a > span {
	display:none;
}

.instaCell.video a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images/icons/instagram_reel_w.png) 50% 50% no-repeat;
	background-size:contain;
	filter:drop-shadow(0 0 3px #666);
	z-index:10;
}

.instaImages > div.noData {
	width:100%;
	text-align:center;
	padding:3em 0;
	font-size:90%;
	color:#666;
}


/* =============================================================================================
	base layout
============================================================================================= */

/* ==============================================
	base
=============================================== */
body {
	position:relative;
	font-size:16px;
	line-height:1.8;
	color:#000;
	background:#fff;
	font-family:var(--main-fonts);
}
body #bgLayer {
	position:relative;
	z-index:2;
}

section {
	padding:4em 0;
}

.innerFrame {
	width:1200px;
	max-width:100%;
	margin:0 auto;
	padding:0 2em;
}
.innerFrame.w1400 {
	width:1400px;
}
.innerFrame.w1000 {
	width:1000px;
}
.innerFrame.w800 {
	width:800px;
}


@media screen and (max-width:999px){
	section {
		padding:2em 0;
	}
	aside {
		padding:2em 1em;
	}

	.innerFrame {
		padding:0 0.5em;
	}
}



/* ==========================================================================================================================================
	header
=========================================================================================================================================== */
@media screen and (min-width:1000px){
	.h1 {
		color:#fff;
		background:rgba(85,17,17,0.8);
	}

	.header-info {
		padding:1em 1em;
	}
	.header-info .logo-img {
		height:4em;
	}

	.header-info .time {
		font-weight:bold;
		line-height:1.4;
	}
	.header-info .tel.flex{
		line-height:1.2;
	}
	.header-info .tel-notes {
		font-size:90%;
		padding-top:0.3em;
		padding-right:0.5em;
	}
	.header-info .tel-icon {
		height:2.5em;
	}
	.header-info .tel-link {
		font-size:200%;
		font-weight:bold;
	}

}


@media screen and (max-width:999px){
}


/* ==========================================================================================================================================
	fixed navi
=========================================================================================================================================== */
@media screen and (min-width:1000px){
	#headerFixedMenu {
		position:sticky;
		top:0;
		left:0;
		right:0;
		display:block;
		width:100%;
		color:#fff;
		background:rgba(85,17,17,0.8);
		z-index:100;
	}

	.navList {
		display:flex;
		justify-content:space-between;
		align-items:center;
		text-align:center;
	}
	.navList > li {
		flex-grow:1;
	}
	.navList > li.spIcon {
		display:none;
	}
	.navList .logo img {
		height:4em;
	}
	.navList a {
		position:relative;
		display:block;
		height:4em;
		line-height:1.3;
		padding:0 0.5em 0.3em;
		white-space:nowrap;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}
	.navList a:after {
		content:"";
		position:absolute;
		left:6px;
		right:6px;
		bottom:6px;
		display:block;
		height:3px;
		background:#fff;
		transform:scaleX(0);
	}
	.navList .navCell.active a:after ,
	.navList a:hover:after {
		transform:scaleX(1);
	}

	.navList .en {
		display:none;
	}
	.navList .jp {
		font-weight:bold;
	}
}

@media screen and (max-width:999px){
	header {
		position:fixed;
		top:0;
		left:0;
		right:0;
		padding:0.3em 0;
		color:#fff;
		background:rgba(85,17,17,0.8);
		z-index:100;
	}

	header .logo-img {
		height:3em;
	}

	header .spIcons {
		display:flex;
		align-items:center;
	}

	header .spIcons > .spIcon {
		height:3.4em;
		z-index:100;
	}
	header .spIcons > .spIcon + .spIcon {
		padding-left:0.3em;
	}
	header .spIcons > .spIcon > * {
		position:relative;
		display:block;
		height:100%;
		aspect-ratio:1/1;
		border-radius:50%;
		background:#fff;
		overflow:hidden;
		cursor:pointer;
		z-index:100;
	}

	header .spMenuIcon {
	}
	header .spMenuIcon span ,
	header .spMenuIcon:before ,
	header .spMenuIcon:after {
		position:absolute;
		top:calc(50% - 2px);
		left:20%;
		right:20%;
		display:block;
		height:4px;
		background:#744;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	header .spMenuIcon:before ,
	header .spMenuIcon:after {
		content:"";
	}
	header .spMenuIcon span {
	}
	header .spMenuIcon:before {
		transform:translateY(-0.7em);
	}
	header .spMenuIcon:after {
		transform:translateY(0.7em);
	}

	.menuOn header .spMenuIcon span {
		opacity:0;
	}
	.menuOn header .spMenuIcon:before {
		transform:rotate(45deg);
	}
	.menuOn header .spMenuIcon:after {
		transform:rotate(-45deg);
	}


	body.menuOn {
		overflow:hidden;
    }

	#headerFixedMenu .navList {
		position:fixed;
		top:0;
		bottom:0;
		right:-110%;
		display:block;
		width:100%;
		height:100%;
		padding:4.5em 2em 0;
		background:rgba(255,255,255,0.95);
		z-index:99;
		overflow:auto;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	.menuOn #headerFixedMenu .navList {
		right:0%;
	}

	#headerFixedMenu .navCell {
		border-bottom:1px solid #ccf;
	}
	#headerFixedMenu .navCell a {
		padding:0.3em 2em;
		line-height:1.6;
		display:flex;
		align-items:baseline;
	}
	#headerFixedMenu .navCell .en {
		font-size:180%;
		font-weight:bold;
		font-family:var(--title-fonts);
	}
	#headerFixedMenu .navCell .jp {
		padding-left:0.5em;
		font-size:110%;
	}
	#headerFixedMenu .navCell a:after {
		content:"";
		align-self:center;
		margin-left:auto;
		width:2em;
		height:2em;
		background:url(images/icons/arrow_bk.png) 50% 50% no-repeat;
	}

	#headerFixedMenu .shopInfo {
		padding-bottom:1em;
		text-align:center;
		line-height:1.4;
	}
	#headerFixedMenu .shopInfo .logo {
		padding-top:0;
	}
	#headerFixedMenu .shopInfo .info {
		padding-top:0;
		font-weight:bold;
		font-family:var(--title-fonts);
	}
	#headerFixedMenu .shopInfo .time {
		font-size:80%;
	}
	#headerFixedMenu .shopInfo .tel {
		font-size:150%;
	}
}

/* ==============================================
	main
=============================================== */
#main.innerFrame {
	padding-bottom:4em;
}


@media screen and (max-width:999px){
	#main.innerFrame {
		padding-top:5em;
		padding-bottom:2em;
	}
}




/* ==============================================
	footer
=============================================== */
footer {
	padding:2em 0;
	color:#fff;
	background:#744;
	text-align:center;
}

.shopInfo {
	padding-top:1em;
	font-size:120%;
}
.shopInfo > div {
	padding-top:1em;
}
.shopInfo .logo img {
	width:15em;
}
.shopInfo .time {
	line-height:1.4;
}
.shopInfo .tel {
	line-height:1.4;
	font-size:150%;
	font-weight:bold;
}

#copyright {
	font-size:90%;
}

@media screen and (max-width:999px){
	footer {
		padding-top:0;
	}
	.shopInfo .logo img {
		width:10em;
	}
}


/* =============================================================================================
	contents layout
============================================================================================= */


/* ==============================================
	fv
=============================================== */
section#fv {
	padding-bottom:0;
}
#fv .slick-dotted.slick-slider {
	margin:inherit;
}

@media screen and (max-width:999px){
	section#fv {
		padding-top:0;
	}
}


/* ==============================================
	menu list
=============================================== */
.menuList {
	font-size:180%;
	text-align:center;
}
.menuList div span {
	padding:0 0.5em;
	white-space:nowrap;
}
.menuList div + div {
	padding-top:0.5em;
}



/* ==============================================
	sns
=============================================== */
.sns {
}

.sns-cell {
	padding:0 1em;
}

.sns-cell iframe {
	aspect-ratio:1/1;
}

.sns-cell .tiktok-embed {
	margin:0 auto;
}

@media screen and (max-width:999px){
	.sns.flex.col2 {
		flex-wrap:wrap;
	}
	.sns.flex.col2 > .sns-cell {
		width:100%;
		padding:0 0.5em;
	}
	.sns.flex.col2 > .sns-cell + .sns-cell {
		padding-top:3em;
	}
	.sns-cell .sns-cell-content {
		padding:0 1em;
	}

}


/* ==============================================
	access map
=============================================== */
#access iframe {
	display:block;
	width:96%;
	max-height:60vh;
	margin:0 auto;
}



/* ==============================================
	shop table
=============================================== */
.shopTable {
	margin:0 auto;
	font-size:160%;
}

.shopTable th {
	padding:0.3em 0.5em;
	text-align:right;
	vertical-align:top;
}
.shopTable td {
	padding:0.3em 0.5em;
}


@media screen and (max-width:999px){
	.shopTable {
		font-size:130%;
	}
	.shopTable th ,
	.shopTable td {
		padding:0.1em 0.3em;
	}
}


/* ==============================================
	reserve
=============================================== */
.reserveText {
	text-align:center;
}
.reserveText p {
	font-size:160%;
}
.contactList {
	padding-top:2em;
	display:flex;
	justify-content:center;
	align-items:center;
}

.contactList > .contactButton {
	padding:0 1em;
}
.contactButton a {
	position:relative;
	width:35em;
	max-width:100%;
	height:7em;
	padding:0.5em 1em;
	background:#960;
	display:flex;
	justify-content:center;
	align-items:center;
}
.contactButton a > * {
	position:relative;
	z-index:2;
}
.contactButton a > .icon {
	padding-right:2em;
}
.contactButton a > .icon img {
	width:4.5em;
	aspect-ratio:1/1;
	border-radius:0.5em;
}
.contactButton a > .text {
	font-size:120%;
	line-height:1.4;
}
.contactButton a > .text em {
	font-size:180%;
	line-height:1.2;
}

.contactButton a:before {
	content:"";
	position:absolute;
	z-index:1;
	bottom:50%;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:0%;
	background:#c90;
}

.contactButton a:hover:before {
	bottom:0%;
	height:100%;
}

.contactList + .reserveText{
	padding-top:3em;
}
.contactList + .reserveText p {
	font-size:150%;
}


/* ==============================================
	faq list
=============================================== */
.faqList {
	line-height:1.5;
}
.faqList li {
	background:#ffc;
	border:1px solid #ccc;
}
.faqList li + li {
	margin-top:3em;
}

.faqList .q {
	font-size:160%;
	padding:0.5em;
	background:rgba(255,255,255,0.8);
}
.faqList .q p {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.faqList .q .number{
	color:#f06;
	font-size:180%;
	line-height:1;
	padding-right:0.2em;
}
.faqList .q .date{
	color:#ff9;
	line-height:1;
	padding-right:0.2em;
}

.faqList .a {
	padding:1.5em;
	font-size:130%;
	background:rgba(255,255,255,0.5);
	border-top:1px solid #ccc;
}
.faqList .a p {
}

@media screen and (max-width:999px){
	.faqList .q {
		font-size:130%;
	}
	.faqList .a {
		padding:1em;
		font-size:120%;
	}
}



/* ==============================================
	faq list - news custom
=============================================== */
#news .faqList li + li {
	margin-top:0.2em;
}
#news .faqList .q {
	font-size:120%;
	padding:0.4em 0.8em 0.3em;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	cursor:pointer;
}
#news .faqList .q p {
	flex-direction:column;
	align-items:flex-start;
}
#news .faqList .q .number {
	font-size:80%;
}
#news .faqList .q .head {
	padding-left:0.5em;
}
#news .faqList .toggle {
	margin-left:auto;
	font-size:75%;
}

#news .faqList .a {
	display:none;
	width:100% !important;
	padding:1em;
	padding-left:1em !important;
	padding-right:1em !important;
	font-size:110%;
	line-height:1.4;
}

#news .q .toggle {
	white-space:nowrap;
}
#news .q:not(.open) .toggle > :nth-child(2) {
	display:none;
}
#news .q.open .toggle > :nth-child(1) {
	display:none;
}


.newsLink {
	padding:1em 1em 0;
	text-align:right;
}



/* =============================================================================================
	reserve
============================================================================================= */
.reservePlan {
	padding:1em 0;
}
.reservePlan-bg {
	background-position:100% 50%;
	background-repeat:no-repeat;
	background-size:auto 100%;
}
.reservePlan-bg.bg1 {
	background-image:url(images/common/interior1.webp);
}
.reservePlan-bg.bg2 {
	background-image:url(images/common/interior2.webp);
}
.reservePlan-inner {
	padding:2em 0;
	line-height:1.4;
	background:linear-gradient(100deg,#000f 60%,#0006 70%,#0000)
}

.reservePlan .systemList{
	padding-bottom:0.5em;
}

.reservePlan table{
	width:100%;
}
.reservePlan th ,
.reservePlan td {
	width:50%;
	padding:0.5em 1em;
	border-bottom:1px solid #666;
}
.reservePlan .text {
	font-size:140%;
	color:#eee;
	text-align:center;
}
.reservePlan .text.time {
	padding-top:0.5em;
	font-size:160%;
	color:#ff6;
}
.reservePlan .text p + p {
	padding-top:0.5em;
}

@media screen and (max-width:999px){
	.reservePlan td ,
	.reservePlan th {
		padding:0.5em 0.6em;
	}
}

.shopInfo .info > .text {
	padding:2em 0 0.5em;
	font-size:80%;
	line-height:1.6;
}

.shopInfo .info > .text p{
	padding-bottom:0.5em
}


@media screen and (max-width:999px){
	.shopInfo .info > .text {
		font-size:70%;
	}
}


/* =============================================================================================
	recruit
============================================================================================= */
.recruit-table {
	min-width:80%;
	max-width:96%;
	margin:0 auto;
	line-height:1.5;
	font-size:120%;
	background:rgba(255,255,255,0.5);
}
.recruit-table th ,
.recruit-table td {
	border:1px solid #999;
	padding:1em;
	vertical-align:top;
}
.recruit-table th {
	color:#f39;
	font-weight:bold;
	white-space:nowrap;
}

.recruit-table a {
	padding:0 0.3em;
	color:#f06;
	background:linear-gradient(180deg,transparent 80%,#fbd 80%);
}

@media screen and (min-width:1000px){
	.recruit-table a:hover {
		color:#00f;
	}
}
@media screen and (max-width:999px){
	.recruit-table {
		font-size:110%;
	}
	.recruit-table th ,
	.recruit-table td {
		padding:0.3em 0.5em;
	}
}


/* =============================================================================================
	slider
============================================================================================= */
.fv-slider {
	width:1600px;
	max-width:100%;
	margin:0 auto;
}
@media screen and (max-width:999px){
	.fv-slider .fv-slider-img img.resize {
		width:100%;
	}
}


#fv .slick-dots {
	position:relative;
	bottom:initial;
	padding:1em 0;
}
#fv .slick-dots li {
	width:30px;
	height:30px;
}
#fv .slick-dots li button {
	width:30px;
	height:30px;
	padding:5px;
}
#fv .slick-dots li button:before {
	position:relative;
	width:20px;
	height:20px;
	font-size:20px;
	line-height:20px;
	color:#ddd;
	opacity:1;
}
#fv .slick-dots li.slick-active button:before {
	color:#f06;
}




/* =============================================================================================
	system
============================================================================================= */
.system {
	width:800px;
	max-width:100%;
	margin:0 auto;
	font-size:180%;
	line-height:2;
	text-align:center;
	overflow:hidden;
}

.systemCell {
	padding:0.2em 2em;
	display:flex;
	justify-content:center;
	align-items:center;
}
.systemCell.title {
	padding:0 2em;
	background:rgba(255,0,102,0.3);
}
.systemCell.price {
	justify-content:space-between;
}

.systemCell.line {
	border-bottom:0.5em solid rgba(255,0,102,0.2);
}

.systemCell .size-s {
	font-size:80%;
}
.systemCell .size-l {
	font-size:120%;
}

.systemCell.image img{
	width:80%;
}

@media screen and (max-width:999px){
	.systemCell {
		padding: 0.1em 1em
	}
}




/* =============================================================================================
	event(coupon)
============================================================================================= */
.event {
	padding:0 2em 2em;
	text-align:center;
}

.event-cell {
	padding-bottom:6em;
}
.event-cell .head {
	font-size:180%;
	background:rgba(255,153,204,0.1);
	border:2px solid #f6c;
}
.event-cell .image {
	padding:3em 3em 0;
}
.event-cell .text-box {
	padding:2em 3em 0;
}
.event-cell .text {
	padding:1em;
	line-height:1.6;
	border:1px solid #744;
}
.event-cell .text .html {
    letter-spacing: -0.05em;
}
.event-cell .text strong {
	font-weight:bold;
}

.coupon .event-cell .image {
	padding:0 2em 2em;
}

@media screen and (max-width:999px){
	.event {
		padding:0 0.5em;
	}
	.event-cell .head {
		font-size:160%;
	}
	.event-cell .image {
		padding:2em 1em 3em;
	}

	.coupon .event-cell .image {
		padding:0 0.5em 3em;
	}
}



/* =============================================================================================
	staff
============================================================================================= */
.staffList {
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.staffCell {
	width:calc(100% / 4);
	padding:0.5em;
}
.staffCell .aFrame {
	display:block;
	border:1px solid #bbb;
	text-align:center;
}
@media screen and (min-width:1000px){
	.staffCell a.aFrame:hover {
		box-shadow:0 0 0.3em #f39;
	}
}

.staffImage {
	aspect-ratio:600 / 800;
}
.staffImage > img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.staffInfo {
	line-height:1.6;
}
.staffInfo .staffName {
	font-size:120%;
}
.staffInfo .staffName small {
	font-size:80%;
}
.staffInfo .staffSize {
	font-size:80%;
}

.staffTime {
	padding:0.1em 0 0.3em;
}
.staffTime.flagToday:before {
	content:"本日出勤";
	display:inline-block;
	margin-right:1em;
	padding:0 0.8em 0.1em;
	line-height:1.4;
	font-size:90%;
	font-weight: bold;
	color:#fff;
	background:#f69;
	border-radius:2em;
}
.staffTime.flagToday.after:before {
	content:"出勤予定";
	background:#39f;
}
.staffTime.flagToday.next:before {
	content:"次回出勤";
	background:#96f;
}

@media screen and (max-width:999px){
	.staffCell {
		width:calc(100% / 2);
		padding: 0.2em;
	}
	.staffInfo .staffSize {
		font-size:100%;
	}
}



/* =============================================================================================
	schedule
============================================================================================= */
#dateList {
	width:100%;
	padding:0 0 3em;
	text-align:center;
	display:flex;
	justify-content:space-between;
}
#dateList li {
	width:calc(100% / 7 - 3px);
	min-height:2.4em;
	line-height:1.2;
	padding:0.3em 0 0.5em;
	font-size:140%;
	font-weight:900;
	color:#999;
	background:#eee;
	border:2px solid #999;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
#dateList li.on {
	color:#f39;
	background:#fff;
	border-color:#f39;
}
#dateList li:not(.on):hover {
	color:#c66;
	background:rgba(255,255,255,0.8);
}

#dateList li span.wday {
	font-size:80%;
}

@media screen and (max-width:999px){
	#dateList li {
		padding:0.2em 0 0.3em;
		flex-direction:column;
		font-size: 120%;
	}
}






/* =============================================================================================
	profile
============================================================================================= */
.profileMainBloc {
	display:flex;
}

.profileName {
	padding:1em 0;
	text-align:center;
	border:1px solid #bbb;
}
.profileName > .name {
	font-size:200%;
	color: #f06;
	font-weight: 900;
}
.profileName > .size {
	display:block;
	font-size:150%;
	color: #06f;
	font-weight:bold;
}



/* ==============================================
	profile layout
=============================================== */
#profileMainBloc {
	padding:3em 1em 0;
	display:flex;
	justify-content:space-evenly;
}

#profileMainBloc > #profileImageFrame {
	width:40%;
	padding-right:3em;
}

#profileMainBloc > #profileInfoFrame {
	width:60%;
}

@media screen and (max-width:999px){
	#profileMainBloc {
		padding: 3em 0 0;
		flex-direction:column;
	}
	#profileMainBloc > #profileImageFrame {
		width:100%;
		max-width:600px;
		margin:0 auto;
		padding:0 1em;
	}
	#profileMainBloc > #profileInfoFrame {
		width:100%;
		padding:3em 1em 0;
	}
}


/* ==============================================
	profile > images
=============================================== */
#profileThumbs .imageFrame {
	padding:0.5em;
}
#profileThumbs img {
	width:100%;
	border:1px solid #bbb;
}

#profileThumbs + #bx-pager {
	display:none;
}



/* ==============================================
	profile > details
=============================================== */
#profileTable {
	padding:0.2em 0.5em;
	line-height:1.4;
	border:1px solid #bbb;

	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
#profileTable > * {
	padding:0.5em;
}
#profileTable > *:not(:last-of-type) {
	border-bottom:1px solid #ddd;
}
#profileTable > dt {
	width:12em;
	color:#f06;
}
#profileTable > dd {
	width:calc(100% - 12em);
}


.profBlogBloc {
	padding-top:3em;
	text-align:center;
}

.blogFrame {
	width:100%;
	height:400px;
	border:1px solid #bbb;
}

@media screen and (max-width:999px){
	#profileTable {
		font-size:110%;
		flex-direction:column;
	}

	#profileTable > dt {
		width:100%;
		padding:0.3em;
	}
	#profileTable > dt:not(:last-of-type) {
		border-bottom:0 none;
	}

	#profileTable > dd {
		width:100%;
		padding:0 0.3em 0.3em 1.3em;
	}

}


/* ==============================================
	profile > schedule
=============================================== */
#profileScheduleBloc {
	padding-top:3em;
}

.profileSchedule {
	width:100%;
	margin:auto;
	text-align:center;
	border-collapse:collapse;
}
.profileSchedule th ,
.profileSchedule td {
	width:14%;
	background:rgba(255,255,255,0.5);
	border:1px solid #999;
}
.profileSchedule th {
	padding:5px 0;
}
.profileSchedule th.week0 {
	background-color:rgba(255,0,0,0.1);
}
.profileSchedule th.week6 {
	background-color:rgba(0,0,255,0.1);
}

.profileSchedule th span.wday {
	font-size:85%;
}

.profileSchedule td {
	padding:0.5em 0;
}

@media screen and (max-width:999px){
	.profileSchedule {
		font-size:110%;
	}
	.profileSchedule th ,
	.profileSchedule td {
		padding:0.3em 0;
	}
}



/* ==============================================
	profile > guide
=============================================== */
#profileGuideBottom {
	width:450px;
	max-width:100%;
	margin:0 auto;
	padding:6em 0 3em;

	display:flex;
	justify-content:space-between;
	align-items:center;
	text-align:center;
}
#profileGuideBottom li {
	width:calc(100% / 3 - 1px);
}

#profileGuideBottom li a {
	width:100%;
	padding:0.5em 0 0.6em;
	font-size:90%;
	border:1px solid #ccc;

	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}
#profileGuideBottom li a span {
}
#profileGuideBottom li a:hover {
	background:rgba(255,153,204,0.2);
}

@media screen and (max-width:999px){
	#profileGuideBottom {
		padding:2em 0 0;
	}
}