@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');


/* ============================================================================================
	variables
============================================================================================= */
*{
	--main-fonts:'Noto Serif JP' ,serif;
	--title-fonts:'Noto Serif JP' ,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 ,
button ,input ,textarea ,select ,
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 {
	color:#000;
	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:800px) { 
	a.linkDeco:hover {
		color:#00f;
	}
}



/* ==============================================
	no display
=============================================== */
@media screen and (min-width:800px){
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:799px){
	.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:800px){
	.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:#eb0;
}
.titleBar .en {
	width:100%;
	line-height:1.5;
	font-size:300%;
	border-bottom:2px solid #eb0;
	border-image: linear-gradient( 90deg ,#000 0% ,#970 15% ,#eb0 50% ,#970 85% ,#000 100%);
	border-image-slice: 1;
}
.titleBar .jp {
	font-size:180%;
}

.titleBar.small {
	padding-bottom: 2em;
}
.titleBar.small .flex {
	color:#ed9;
}
.titleBar.small .en {
	font-size:200%;
	border-bottom:1px solid #ed9;
	border-image: linear-gradient( 90deg ,#000 0% ,#ba6 15% ,#ed9 50% ,#ba6 85% ,#000 100%);
	border-image-slice: 1;
}
.titleBar.small .jp {
	font-size:130%;
}


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

@media screen and (max-width:799px){
	.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;
	filter:drop-shadow(0 0 3px #666);
}


/* ==============================================
	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;
}


/* ==============================================
	x widget
=============================================== */



/* ==============================================
	shop information
=============================================== */

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

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



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

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

section {
	padding:4em 0;
}

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


@media screen and (min-width:800px){
	body #bgLayer {
		min-width:1200px;
	}
}
@media screen and (max-width:799px){
	section {
		padding:2em 0;
	}
	aside {
		padding:2em 1em;
	}

	body #bgLayer {
		width:480px;
	}

	.innerFrame {
		padding:0 0.5em;
	}
}


/* ==============================================
	contact butttons
=============================================== */
.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%;
}




/* ==========================================================================================================================================
	header
=========================================================================================================================================== */
@media screen and (min-width:800px){
	header {
		border-bottom:3px solid #eb0;
	}
	.h1 {
		color:#fff;
	}

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

	.header-info .time {
		font-weight:bold;
		padding-right:0.5em;
	}
	.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:799px){
}


/* ==========================================================================================================================================
	fixed navi
=========================================================================================================================================== */
@media screen and (min-width:800px){
	#headerFixedMenu {
		position:sticky;
		top:0;
		left:0;
		right:0;
		display:block;
		width:100%;
		color:#fff;
		background:rgba(0,0,0,0.9);
		box-shadow:0 1px 5px #999;
		z-index:10000;
	}

	.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:4.5em;
	}
	.navList a {
		position:relative;
		display:block;
		height:4.5em;
		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:0.4em;
		right:0.4em;
		bottom:0.6em;
		display:block;
		height:2px;
		background:#ccc;
		transform:scaleX(0);
	}
	.navList .navCell.active a:after ,
	.navList a:hover:after {
		transform:scaleX(1);
	}

	.navList .en {
		font-size: 120%;
		font-weight:bold;
	}
	.navList .jp {
		font-size: 90%;
	}
}

@media screen and (max-width:799px){
	header {
		position:sticky;
		top:0;
		left:0;
		right:0;
		padding:0.1em 0;
		color:#fff;
		background:rgba(0,0,0,0.8);
		box-shadow:0 1px 5px #999;
		z-index:10000;
	}

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

	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:#000;
		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(0,0,0,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 #ccc;
	}
	#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:799px){
	#main.innerFrame {
		padding-top:1em;
		padding-bottom:2em;
	}
}



.banner-list {
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
.banner-cell {
	padding:0 1em;
}
.banner-cell a {
	display:block;
}

@media screen and (min-width:800px){
	.banner-cell a:hover {
		box-shadow:0 0 0.5em #fff;
	}
}

@media screen and (max-width:799px){
	.banner-list.flex {
		flex-direction:column;
		padding:0 2em;
	}
	.banner-list.flex.col2 > * {
		width:100%;
	}
	.banner-list.flex.col2 > * + * {
		padding-top:2em;
	}
}


/* ==============================================
	footer
=============================================== */
footer {
	padding:0 0 2em;
	text-align:center;
	box-shadow: 0 -1px 5px #666;
}

.shopInfo {
	padding-top:1em;
	font-size:120%;
}
.shopInfo > div {
	padding-top:1em;
}
.shopInfo .logo img {
	width:15em;
}

.shopInfo .tel {
	line-height:1.4;
	font-size:150%;
	font-weight:bold;
}

#copyright {
	font-size:90%;
}

@media screen and (max-width:799px){
	.shopInfo .info {
		font-size:90%;
		line-height:1.5;
	}
	.shopInfo .info .addr {
		padding-bottom:0.8em;
	}

	#copyright {
		font-size:80%;
	}
}


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

/* ==============================================
	fv
=============================================== */
@media screen and (max-width:799px){
	#fv img {
		aspect-ratio: 1/1;
		object-fit: cover;
	}
}


/* ==============================================
	slider
=============================================== */

.topSlider {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
.topSlider-img {
	text-align:center;
}
.topSlider-img img {
	border:1px solid #666;
}

.topSlider .slick-dotted.slick-slider {
	margin:inherit;
}

.topSlider .slick-dots {
	position:relative;
	bottom:initial;
	padding:1em 0;
}
.topSlider .slick-dots li {
	width:1.5em;
	height:1.5em;
}
.topSlider .slick-dots li button {
	width:100%;
	height:100%;
	background:#999;
	border-radius:50%;
	opacity:1;
}
.topSlider .slick-dots li button:before {
	content:none;
}
.topSlider .slick-dots li.slick-active button {
	background:#eb0;
}


@media screen and (max-width:799px){
	.topSlider {
		padding:0 2em;
	}
}




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

.sns-cell {
	width:calc(560px + 4em);
	padding:0 2em;
}

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

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

@media screen and (max-width:799px){
	.sns.flex {
		flex-wrap:wrap;
	}
	.sns.flex > .sns-cell {
		width:100%;
		padding:0 0.5em;
	}
	.sns.flex > .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;
}

@media screen and (max-width:799px){
	#access iframe {
		max-height:40vh;
	}
}




/* =============================================================================================
	shop information
============================================================================================= */
.concept-info {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:0 1em;
	line-height:2;
}

.concept-info + .concept-info {
	padding-top:3em;
}

.concept-info.main {
	font-size:150%;
}
.concept-info.sub {
	font-size:140%;
}

@media screen and (max-width:799px){
	#concept-fv img {
		height:15em;
		object-fit:cover;
	}

	.concept-info {
		line-height:1.8;
	}
	.concept-info.main {
		font-size:120%;
	}
	.concept-info.sub {
		font-size:115%;
	}
}


/* =============================================================================================
	shop information
============================================================================================= */
.shop-block.flex {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 2em;
}

.shop-block.flex > .image {
	width:40%;
	min-height:100%;
	padding:2em 0;
	text-align:center;
}
.shop-block.flex .image-frame img {
	object-fit:cover;
	border:1px solid #666;
}
.shop-block.flex > .info {
	width:60%;
}


@media screen and (min-width:800px){
	.shop-block.flex .image-frame {
		position:relative;
		width:100%;
		height:100%;
	}
	.shop-block.flex .image-frame img {
		position:absolute;
		top:0;
		right:0;
		width:100%;
		height:100%;
	}
}

@media screen and (max-width:799px){
	.shop-block.flex {
		flex-direction:column;
		padding:0;
	}
	.shop-block.flex > .image {
		width:100%;
	}
	.shop-block.flex .image-frame img {
		width:100%;
		aspect-ratio:2/1;
	}

	.shop-block.flex > .info {
		width:100%;
	}
}



/* ==============================================
	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:799px){
	.shopTable {
		font-size:120%;
	}
	.shopTable th ,
	.shopTable td {
		padding:0.1em 0.3em;
	}
}





/* =============================================================================================
	recruit
============================================================================================= */
.recruit-block.color-0 {
	--table-bg:#433;
}
.recruit-block.color-1 {
	--table-bg:#334;
}

.recruit-block + .recruit-block {
	padding-top:3em;
}

.recruit-frame {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:2em;
	background:var(--table-bg);
}

.recruit-image {
	padding:1em;
	text-align:center;
}
.recruit-image + .recruit-image {
	padding-top:0;
}

.recruit-table {
	width:100%;
	line-height:1.6;
	font-size:120%;
}

.caption ,
.recruit-table caption {
	text-align:left;
	border-bottom:1px solid #ccc;
	margin-bottom:0.5em;
	padding:0 1em;
}
.caption .en ,
.recruit-table caption .en {
	font-size:200%;
}
.caption .ja  ,
.recruit-table caption .ja {
	font-size:120%;
	padding-left:1em;
}

.recruit-table th ,
.recruit-table td {
	border-bottom:1px solid #999;
	padding:1em;
	vertical-align:top;
}
.recruit-table th {
	width:20%;
	font-weight:bold;
	white-space:nowrap;
	text-align:right;
	background:rgba(255,255,255,0.2)
}

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

@media screen and (min-width:800px){
	.recruit-table a:hover {
		color:#00f;
	}
}
@media screen and (max-width:799px){
	.recruit-frame {
		padding:0.5em;
	}
	.recruit-table {
		font-size:110%;
	}
	.caption ,
	.recruit-table caption {
		padding-left:0.5em
	}
	.caption .en ,
	.recruit-table caption .en {
		font-size:180%;
	}
	.caption .ja ,
	.recruit-table caption .ja {
		padding-left:0.5em;
		font-size:110%;
	}

	.recruit-table th ,
	.recruit-table td {
		padding:0.3em 0.5em;
	}
}





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

.systemCell {
	padding:0.5em 2em;
	line-height:1.3;
	display:flex;
	justify-content:center;
	align-items:center;
}
.systemCell.title {
	margin-bottom:0.3em;
	padding:0 2em 0.2em;
	color:#ec0;
	font-size:180%;
	font-weight:bold;
	border-bottom:1px solid #eb0;
	border-image: linear-gradient( 90deg ,#000 0% ,#750 10% ,#db0 50% ,#750 90% ,#000 100%);
	border-image-slice: 1;
}
.systemCell.price {
	font-size:160%;
	justify-content:space-between;
}
.systemCell.price .L {
	text-align:left;
}

.systemCell.line {
	padding-bottom:0.5em;
	margin-bottom:2em;
	border-bottom:1px solid #eb0;
	border-image: linear-gradient( 90deg ,#000 0% ,#970 10% ,#ec0 50% ,#970 90% ,#000 100%);
	border-image-slice: 1;
}

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

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

@media screen and (min-width:800px){
	.systemCell .L .small:before {
		content:"/";
	}
}
@media screen and (max-width:799px){
	.systemCell {
		padding: 0.5em 1em;
	}
	.systemCell .L .small {
		display:block;
		font-size:80%;
	}
	.systemCell.line {
		padding-bottom:1em;
	}
}




/* =============================================================================================
	menu
============================================================================================= */
.menu + .menu {
	padding-top:3em;
}

.menu-list {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	font-size:130%;
	line-height:2;
}

.menu-list li {
	padding:0 1.5em;
}

@media screen and (max-width:799px){
	.menu-list.flex.col2 > * {
		width:100%;
	}
}




/* =============================================================================================
	gallery
============================================================================================= */
.gallery-list li {
	padding:0 1em 2em;
}
.gallery-list li img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	outline:1px solid #666;
}

.spotlight {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	cursor:pointer;
}

@media screen and (min-width:800px){
	.spotlight:hover {
		box-shadow:0 0 0.5em #fff;
	}
}

@media screen and (max-width:799px){
	.gallery-list li {
		width:calc(100% / 2);
		padding:0 0.3em 0.6em;
	}

}


/* ==============================================
	spotlight custom
=============================================== */
body #spotlight .header {
	height:60px;
}
body #spotlight .header div {
	width:80px;
	height:60px;
	padding-top:20px;
	opacity:0.8;
}
body #spotlight .icon {
	background-size:40px;
}

@media screen and (max-width:799px){
	body #spotlight .header div {
		opacity:1;
	}
}


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

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

.staffInfo {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display:block;
	padding:0.3em 0 0.5em;
	line-height:1.2;
	text-align:center;
	border-top:1px solid #666;
	background:rgba(0,0,0,0.8);
}
.staffInfo .staffName-en {
	font-size:160%;
}
.staffInfo .staffName-ja {
	font-size:110%;
}


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







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

.profileName {
	padding:0 1em 1em;
	line-height:1;
	border-bottom:1px solid #999;
}
.profileName > .name {
	font-size:300%;
	font-weight: 900;
}
.profileName > .name-ja {
	padding-left:1em;
	font-size:150%;
	font-weight:bold;
}



/* ==============================================
	profile layout
=============================================== */
#profileMainBloc {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:1em;
	display:flex;
	justify-content:space-evenly;
}

#profileMainBloc > #profileImageFrame {
	width:55%;
	padding-top:0.2em;
	padding-right:2em;
	display:flex;
}

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

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


/* ==============================================
	profile > images
=============================================== */

#profileImageFrame .bx-wrapper{
	width:calc(100% - 90px);
}

#profileThumbs .imageFrame {
	padding:0.5em;
}
#profileThumbs .imageFrame img {
	border:1px solid #666;
}

#profileImageFrame #bx-pager {
	width:75px;
	padding:0.3em 0;
	margin-left:auto;
	flex-direction:column;
	justify-content:space-between;
}
#profileImageFrame #bx-pager a {
	width:100%;
	max-width: none;
}
#profileImageFrame #bx-pager img {
	width:100%;
	aspect-ratio:3/4;
	border:1px solid #666;
	object-fit:cover;
}
#profileImageFrame #bx-pager a.active img {
	border:1px solid #eb0;
}

@media screen and (max-width:799px){
	#profileImageFrame .bx-wrapper{
		width:calc(100% - 75px);
	}

	#profileImageFrame #bx-pager {
		width:70px;
	}
}



/* ==============================================
	profile > details
=============================================== */
#profileTable {
	padding:0.5em;
	line-height:1.6;

	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
#profileTable > * {
	padding:1em;
	font-size:150%;
}
#profileTable > dt {
	width:6em;
	text-align:right
}
#profileTable > dd {
	width:calc(100% - 6em);
}


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

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

@media screen and (max-width:799px){
	#profileInfoFrame .titleBar.small {
		padding-bottom:1em;
	}
	#profileTable > * {
		padding: 0 1em 0.5em;
		font-size:120%;
	}
	#profileTable > dt {
		width:40%;
	}
	#profileTable > dd {
		width:60%;
	}
}



/* ==============================================
	profile > sns icons
=============================================== */
#profileInfoFrame .titleBar.small {
	padding-top:2em;
}
#profileInfoFrame .titleBar.small .en {
	padding-left:1em;
	text-align:left;
}

.profSNSicons.flex > * {
	padding:0 0.3em;
}

.profSNSicons img {
	width:4em;
}

@media screen and (min-width:800px){
	.profSNSicons a:hover {
		filter:drop-shadow(0 0 0.2em #eb0)
	}
}




/* ==============================================
	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 #666;

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

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


/* ======================================================================================================
	form
====================================================================================================== */
.section-contact {
    background-color: #e0f2fe;
}

.form-wrapper {
	width:100%;
	max-width:600px;
	margin:0 auto;
	padding-bottom:4em;
	font-size:130%;
}

.form-notes {
	width:100%;
	max-width:800px;
	margin:0 auto;
	padding-bottom:1em;
	font-size:120%;
}
.form-notes p + p {
	padding-top:0.3em;
}

.form-wrapper dl{
	width:100%;
}

.form-wrapper dt{
	padding:1.5em 0 0;
}

.form-wrapper dd{
	padding-left:1em;
	padding-top:0.5em;
}

@media screen and (max-width:799px){
	.form-wrapper dl {
		padding:0 1.5em;
	}

	.form-notes {
		padding:0 1em 1em;
		font-size:105%;
	}
}




/* ====================================================================
	form - optional / required
==================================================================== */
.optional,
.required{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.optional:before,
.required:before{
	content:attr(data-text);
	display:inline-block;
	margin-right:0.5em;
	padding:0.1em 0.5em 0.2em;
	background-color:#f00;
	border-radius:0.3em;
	color:#ffffff;
	font-size:80%;
}
.optional:before{
	background-color:#06f;
}

@media screen and (max-width:799px){
	.required{
		justify-content:flex-start;
	}

	.optional:before,
	.required:before{
		margin-right:0.3em;
		padding:0.1em 0.3em 0.2em;
	}
	span.check > label {
		font-size:85%;
	}
}



/* ====================================================================
	form - field
==================================================================== */
input ,textarea{
	width:100%;
	-webkit-appearance:none; 
	appearance:none;
	border-radius:0.3em;
	font-size:90%;
}
input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}

input:not([type="submit"]){
	border:2px solid #999;
	padding:0.2em 0.5em;
}

.textarea-text{
	padding:2.5em 5em !important;
}

textarea{
	resize:none;
	height:8em;
	padding:0.5em;
	border:2px solid #999;
}

span.check {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
span.check > label {
	padding-left:0.3em;
}


@media screen and (max-width:799px){
	input[type="submit"]{
		width:auto;
		padding:0.5em 1em;
	}

	input:focus ,textarea:focus{
		border:solid 2px #000000;
		outline:none;
		background-color:#99e5ff;
	}

}



/* ====================================================================
	form - button
==================================================================== */
.formButton{
	padding-top:2em;
	padding-left:1em;
	display:flex;
	justify-content:center;
	text-align:center;
}

input[type="submit"] ,
.formButton a {
	position:relative;
	z-index:2;
	width:auto;
	padding:0.5em 2em;
	font-size:110%;
	line-height:1;
	text-indent:0.3em;
	letter-spacing:0.3em;
	color:#fff;
	background-color:transparent;
	border:2px solid #fb0;
	border-radius:0.3em;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	cursor:pointer;
}
.formButton a{
	font-size:100%;
	text-indent:0.1em;
	letter-spacing:0.1em;
	border-radius:0.5em;
}

@media screen and (min-width:800px){
	input[type="submit"]:hover {
		color:#fff;
		background:rgba(255,255,255,0.3);
	}


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


/* ====================================================================
	form - error
==================================================================== */
.error {
	display:block;
	width:100%;
	margin:0.3em auto 0.5em;
	padding:0.2em 2em;
	color:#f00;
	border:1px solid #f00;
	background:rgba(255,255,255,0.6);
	border-radius:0.2em;
	font-size:90%;
}


/* ====================================================================
	form - confirm
==================================================================== */
.status2 #form-table {
	line-height:1.4;
}

@media screen and (max-width:799px){
	.status2 dd.form-5 {
		font-size:90%;
	}
}


/* ====================================================================
	form - customize
==================================================================== */
.field-group.flex {
	display:flex;
	justify-content:center;
}

#privacyBox {
	height:12em;
	padding:0.5em;
	font-size:65%;
	line-height:1.4;
	color:#333;
	background:rgba(255,255,255,0.9);
	border:2px solid #999;
	border-radius:0.5em 0 0 0.5em;
	overflow:auto;
}
#privacyBox > h2{
	font-weight:bold;
}
#privacyBox > div{
	padding-left:1em;
	padding-bottom:0.5em;
}
#privacyBox dt{
}

.status2 #privacyBox {
	display:none;
}