@charset "utf-8";
/* CSS Document */
/* 色の定義は css/tokens.css に集約（ブランド色・無彩色・役割色）。このファイル内で #xxxxxx を直接書かないこと */
@import url("../../css/tokens.css");

/*
※※※ロゴについて※※※
	ロゴ画像【logo.png】はエントランス（index.html）でのみ使用。
	入口を通った後のページは、ヘッダーに画像を置かず店名をテキストで表示する
	（PC：電話番号の左 .c_shop_name、スマホ：上部バー #mobile-head h2）。
*/


/*リセット*/
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - //richclarkdesign.com Twitter: @rich_clark */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }  ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } / change colours to suit your needs / ins { background-color:#ff9; color:#000; text-decoration:none; } / change colours to suit your needs / mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
/*リセット*/

html{
	font-size:62.5%;
}
body{
	line-height:1.8;
	font-size: 1.6rem;
	font-family:'Century Gothic','Lato','メイリオ',sans-serif;
	color: var(--color-text);
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	height:100%;
	width:100%;
	overflow:visible !important;
	position:relative;
	z-index:0;
	background-color: var(--color-bg);
}
img {
	vertical-align : bottom;
	max-width: 100%;
	height: auto;
}
a:link{
	color: var(--color-link);
	text-decoration:none;
}
a:visited{
	color: var(--color-link);
	text-decoration:none;
}
a:hover{
	color: var(--color-link-hover);
	text-decoration:none;
}
a,a img{
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
a:hover img{
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

	opacity: 0.7;
	filter: alpha(opacity=70);
}
/*クリア*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	select,textarea,input[type="text"]{/*iosでズームになるのをふせぐ*/
		font-size: 16px;
	}
}

/*ボタン*/
.c_btn{
	text-align: center;
}
.c_btn input{
	max-width: 300px;
	width: 48%;
	padding: 20px 0;
	background-color: var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-btn-text);
	font-size: 1.8rem;
	letter-spacing: 0.08em;
	/*font-size: 2.6rem;*/

	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;

	-webkit-appearance: none;
	border-radius: 0;
	border:none;
	cursor:pointer;
}
.c_btn a{
	display: inline-block;
	max-width: 300px;
	width: 48%;
	padding: 20px 0;
	background-color: var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-btn-text);
	font-size: 1.8rem;
	letter-spacing: 0.08em;
	/*font-size: 2.6rem;*/

	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;

	-webkit-appearance: none;
	border-radius: 0;
	border:none;
	cursor:pointer;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.c_btn input,.c_btn a{
		width: 100%;
	}
}

.c_btn a:hover,.c_btn input:hover{
	background-color: var(--color-btn-hover);
	background-position: 99% 50%;
}

.c_btn a,.c_btn input {
	background: -webkit-linear-gradient(180deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: -webkit-linear-gradient(right, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: linear-gradient(270deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background-position: 1% 50%;
	background-size: 300% 300%;
}

/*WEB予約ボタン 共通*/
i.c_reservebtn_icon{
	margin-right: 0.4em;
	font-size: 1.8rem;
}
/*WEB予約ボタン（ログイン前）*/
.castschedule_reservebtn_public{
	text-align: center;
	margin: 20px auto 40px;
}
span.c_reservebtn_public{	
	position: relative;
	display: inline-block;
	min-width: 200px;
	max-width: 500px;
	width: 90%;
	padding: 7px;
	font-size:1.6rem;
	letter-spacing: 0.08em;
	box-sizing: border-box;
	white-space: nowrap;
	
	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;

	-webkit-appearance: none;
	border-radius: 0;
	border: solid 2px var(--color-surface-solid);/* 内側の線になる一本線の枠線をひく*/
	outline: solid 1px var(--color-border);/* 外側の線になる一本線の枠線をひく*/
	
	background-color: var(--color-surface-muted);
	box-shadow: 2px 4px 6px rgba(var(--gray-900-rgb), 0.05);
	color: var(--color-text-disabled);
	
	position: relative;
}
span.c_reservebtn_public::after{
	display: block;
	font-family: "Font Awesome 5 Free";
	/*font-weight: 600;*/
	content: "\f2bd  WEB予約はメンバーログインが必要です。";
	position: absolute;
	left: 50%;
	bottom: -2.6em;
	transform: translateX(-50%);
	font-size: 1.2rem;
	letter-spacing: 0.00em;
	color: var(--color-text-muted);
	white-space: nowrap;
}
@media screen and (min-width:0px) and ( max-width:767.9px) {/*768まで*/
}

/*========================================   header   ========================================*/
header h1{/*店名の帯。文言は各ページの $Parameter["h1"] で指定（template/header.html 参照）*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*font-weight: normal;*/
	font-weight: bolder;
	color: var(--color-band-fg);
	background-color: var(--color-band-bg);
	font-size: 1.2rem;
	box-sizing: border-box;
}
/*PC：電話番号の左に置く店名（エントランスへのリンク）*/
.c_shop_name{
	display: inline-block;
	margin-right: 1.4em;
	font-size: 2.4rem;
	font-weight: bolder;
	letter-spacing: 0.08em;
	color: var(--color-header-fg);
	vertical-align: baseline;
}
.c_shop_name:link,.c_shop_name:visited{
	color: var(--color-header-fg);
}
.c_shop_name:hover{
	color: var(--color-link-hover);
}
/*電話番号＋営業時間はひとかたまり。店名と並びきらない幅では、まるごと店名の下に折り返す（途中では折り返さない）*/
.c_info_detail{
	display: inline-block;
	white-space: nowrap;
}
.c_info{
	text-align: center;
	letter-spacing: 0.04em;
	/*font-family: 'Ubuntu Condensed', sans-serif;*/
}
.c_info span{
	margin-right: 0.1em;
}
.c_info strong{
	color: var(--color-text-strong);
	font-weight: normal;
}
.c_info strong:nth-of-type(1){
	margin-right: 1em;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	header h1{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 997;
		padding: 60px 5px 3px 10px;
		color: var(--color-accent-fg);
		/* 上部バー(60px)の直下に店名の帯を置く（以前は店舗選択・ポイントの行の余白(〜93px)があったが未使用のため詰めた） */
		background: linear-gradient(to bottom, var(--color-header-bg) 0, var(--color-header-bg) 60px, var(--color-accent-surface) 60px);
	}
	.c_info span{
		font-size: 1.2rem;
	}
	.pc_info{
		display: none;
	}
	.sp_info{
		padding-top: 95px;/*固定ヘッダー（バー60px＋店名の帯 約25px）のぶん＋余白*/
	}
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	.sp_info{
		font-size: 1.6rem;
	}
	.c_info span{
		font-size: 1.0rem;
	}
	.c_info{
		letter-spacing: 0em
	}
	.c_info strong:nth-of-type(1){
		margin-right: 0.6em;
	}
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	header h1{
		text-align: center;
		padding-top: 3px;
		height: 26px;
	}
	.pc_info{
		min-height: 60px;
		padding: 18px 10px 12px;
		box-sizing: border-box;
		line-height: 1.4;
		border-bottom: var(--color-border-strong) solid 6px;
		margin-bottom: 0;/*ナビは通常フローで直下に置くため余白不要*/
		/*店名と電話番号の並び。並びきらない幅では電話番号のかたまりが店名の下へ折り返し、その行間だけ row-gap が効く*/
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		column-gap: 1.4em;
		row-gap: 10px;
	}
	.pc_info .c_shop_name{
		margin-right: 0;/*間隔は column-gap で取る*/
	}
	.pc_info span{
		font-size: 1.4rem;
	}
	.pc_info strong{
		font-size: 2.0rem;
	}
	.sp_info{
		display: none;
	}
	
	/*ログイン前*/
	.login_user_public{
		width: 100%;
		padding: 6px 10px 5px 0;
		box-sizing: border-box;
		background-color: var(--color-accent-surface);
		color: var(--color-accent-fg);
		
		text-align: right;
		font-size: 1.2rem;
		display: flex;
		 justify-content: flex-end;
	}
	/*ログインページへのボタン*/
	a.login_btn{
		display: inline-block;
		padding: 3px 10px;
		border-radius: 3px;
		background-color: rgba(var(--gray-0-rgb), 0.85);
	}
	a.login_btn i{
		margin-right: 0.26em;
	}
	a.login_btn:hover{
		color: var(--color-text-inverse);
		background-color: rgba(var(--gray-0-rgb), 0.55);
	}
}

/*ｰｰｰｰｰショップ選択ｰｰｰｰｰ*/
.c_shop_select {
	display: inline-block;
	position: relative;
	height: 40px;
}
.c_shop_select::before,
.c_shop_select::after {
	position: absolute;
	content: '';
	pointer-events: none;
}
.c_shop_select::before {
	display: inline-block;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 0 5px 5px 0;
	background-color: var(--color-link);
}
.c_shop_select::after {
	position: absolute;
	top: 50%;
	right: 1.2em;
	transform: translate(50%, -50%) rotate(45deg);
	width: 6px;
	height: 6px;
	border-bottom: 3px solid var(--color-surface-solid);
	border-right: 3px solid var(--color-surface-solid);
}
.c_shop_select select {
	appearance: none;
	max-width: 500px;
	height: 40px;
	box-sizing: border-box;
	padding: .4em 3.6em .4em .8em;
	border: none;
	border-radius: 5px;
	background-color: var(--color-surface-subtle);
	color: var(--color-text-sub);
	font-size: 1.8rem;
	cursor: pointer;
}
.c_shop_select select:focus {
	outline: 2px solid var(--color-focus);
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.c_shop_select_wrap{
		margin-bottom: 15px;
		text-align: center;
	}
	.c_shop_select{
		border-radius: 7px;
		border: var(--color-border) solid 1px;
		box-shadow: 2px 4px 10px var(--color-shadow-strong);
	}
	.c_shop_select select {
		min-width: 230px;
	}
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.c_shop_select_wrap{
		position: fixed;
		z-index: 1000;
		top: 58px;
		left:10px;
	}
	.c_shop_select {
		height: 26px;
	}
	.c_shop_select::before {
		top: 0px;
		width: 26px;
		height: 26px;
	}
	.c_shop_select::after {
		position: absolute;
		top: 50%;
		right: 0.8em;
	}
	.c_shop_select select {
		vertical-align: top;
		max-width: 260px;
		height: 26px;
		font-size: 1.4rem;
		padding: .2em 2.6em .2em .6em;
		box-sizing: border-box;
	}
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	.c_shop_select select {
		width: 170px;
	}
}


/*ｰｰｰｰｰナビゲーションｰｰｰｰｰ*/

/*スライダーメニュー用*/
#slide_wrap{
	position:relative;
	z-index: 0;
	pointer-events: auto;
}

#top-head/*.header*/ {
	/*
	 * 以前は position:absolute + 固定ピクセル(top:-114px / margin-top:430px)で
	 * ロゴ画像が 300x150 である前提の位置に置いていた。
	 * ロゴサイズを変えてもレイアウトが崩れないよう、PCでは通常フロー（ロゴ・店舗情報の下）に配置する。
	 * スクロール時の固定表示(.fixed)は menu.js がヘッダーに同じ高さの余白を確保する。
	 */
	width: 100%;
	z-index: 998;
}


@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.header h2{
		width: 100%;
		box-sizing: border-box;
		display: table-cell;
		vertical-align: middle;
		padding: 0 70px 0 12px;/*右はハンバーガー（MENU）のぶん空ける*/
	}
	.header h2 a{
		display: block;
		color: var(--color-header-fg);
		font-size: 1.7rem;
		font-weight: bolder;
		letter-spacing: 0.06em;
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*SP用スライドメニューボタン*/
	.slide_toggle{
		position: absolute;
		right: 10px;
		top: 0px;
		width: 50px;
		height: 56px;
		cursor: pointer;
		z-index: 101;
	}

	.slide_toggle a{
		display:block;
		float:left;
		width: 50px;
		height: 56px;
		background-color:transparent;
		position:relative
	}

	.slide_toggle a:after{
		bottom:5px;
		content:"MENU";
		color: var(--color-header-fg);
		font-size:11px;
		position:absolute;
		text-align:center;
		width: 50px;
	}

	.slide_toggle div{
		margin:12px auto;
		height:20px;
		text-align:center;
		position:relative;
		width:28px
	}

	.slide_toggle div span{
		background: var(--color-header-fg);
		height:3px;
		left:0;
		position:absolute;
		width:100%;
	}
	.slide_toggle div span:nth-of-type(1){top:0}
	.slide_toggle div span:nth-of-type(2){top:8px}
	.slide_toggle div span:nth-of-type(3){top:16px}

	/*メニュー部分*/
	#menu{margin-top:60px;}

	.slide_nav{
		padding-top: 58px;
	}
	.slide_nav li > a{
		width: 100%;
		box-sizing: border-box;
		display: block;
		color: var(--color-text);
		padding: 15px 0 15px 12%;
	}
	.slide_nav a i{
		margin-right: 0.3em;
		padding-bottom: 2px;
	}
	.slide_nav span{
		font-family: 'Ubuntu Condensed', sans-serif;
		margin-right: 0.2em;
		font-size: 1.8rem;
	}
	.slide_nav small{
		font-size: 1.2rem;
		color: var(--color-text-muted);
	}

	#top-head {
	top: 0;
	position: fixed;
	margin-top: 0;
	padding: 0;
}
	/* PC幅で固定ナビ用に付けた余白（menu.js が inline で指定）はスマホ幅では無効化する */
	header{
		padding-bottom: 0 !important;
	}

	/* Fixed reset */
	#top-head.fixed {
		padding-top: 0;
		background: transparent;
	}
	#mobile-head {
		background-color: var(--color-header-bg);
		display: table;
		width: 100%;
		height: 60px;
		z-index: 998;
		position: relative;
		color: var(--color-header-fg);
	}

	#global-nav {
			position: absolute;
			/* 開いてないときは画面外に配置 */
			top: -500px;
			background: var(--color-surface-nav);
			width: 100%;
			text-align: center;
			padding: 10px 0 0;
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
	}
}

/*PC スクロール後の固定ナビ：以前はここで小さいロゴ（#top-head.fixed h2）を出していたが、ロゴ画像は使わないので非表示のまま*/

@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	#nav-toggle {
		display: none;
	}
	.header/*#top-head*/{
		background-color: var(--color-header-bg);
	}
	#top-head{
		position: relative;/*ロゴの高さに関係なく、店舗情報の直下に並ぶ*/
		height: auto;
		margin: 0;
		padding: 5px 0 0;
	}
	#top-head .inner {
		position: relative;
	}
	#top-head h2{
		display: none;
	}
	/* Fixed */
	#top-head.fixed {
		margin-top: 0;
		top: 0;
		left: 0;
		position: fixed;
		background-color: var(--color-header-bg);
		transition: top 0.65s ease-in;
		-webkit-transition: top 0.65s ease-in;
		-moz-transition: top 0.65s ease-in;
		box-shadow: 0 2px 8px rgba(var(--gray-900-rgb), 0.12);
	}
	.gnavi{
		width: 98%;
		max-width: 1200px;
		margin: 0 auto;
		height: 60px;
		display: table;
	}

	.gnavi li{
		/*width: 16%;*/
		width : calc(100% / 10) ;
		height: 60px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		white-space: nowrap;
	}
	/*.gnavi li:nth-child(2),.gnavi li:nth-child(6){
		width: 18%;
	}*/
	.gnavi a:link,.gnavi a:visited{
		color: var(--color-header-fg);
	}
	.gnavi li a{
		display: block;
		margin: 0 auto;
		font-size: 1.4rem;
		padding: 11px 6px 16px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		letter-spacing: 0.12em;
	}
	.gnavi li a:hover{
		background-color: var(--color-header-hover);
		color: var(--color-header-fg);
	}
	.gnavi li.stay a:first-letter{
		color: var(--color-emphasis);
		font-size: 1.3em;
	}
	.gnavi li.stay a{
		color: var(--color-header-fg);
	}
	.gnavi li.stay a:hover{
		background-color: var(--color-header-hover);
		color: var(--color-header-fg);
	}
	#top-head .login_user{
		clear: both;
	}
	/*#top-head .inner:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}*/
}

@media screen and (min-width:600px) and ( max-width:767.9px) {/*600から768まで(SP/タブレット)：10項目が600pxでも1行に収まるよう、左右の余白と字間を詰める*/
	.gnavi li a{
		font-size: 1.2rem;
		padding-left: 2px;
		padding-right: 2px;
		letter-spacing: 0.04em;
	}
	#top-head.fixed .gnavi li a{
		padding: 6px 2px;
	}
}



/*メンバー用navi*/
span.messagecount{
	display: inline-block;
	margin-left: 10px;
	height:25px;
	width:25px;
	border-radius: 50%;
	font-size:14px;
	text-align: center;
	background-color: var(--color-accent-surface);
	color: var(--color-accent-fg);
}
.login_user{
	text-align: right;
	font-size: 1.2rem;
	position: relative;
}
.login_user > li:nth-child(2){
	color: var(--color-text-strong);
}
.menu_title{
	text-align: center;
	background-color: var(--color-surface-muted);
	color: var(--color-text-inverse);
	font-size: 1.0rem;
}
.sp_login_navi{
	background: var(--color-surface-nav);
	text-align: left;
}
.sp_login_navi dt{
	padding: 15px 0 15px 12%;
	color: var(--color-text-strong);
}
.sp_login_navi dd a{
	width: 100%;
	box-sizing: border-box;
	padding: 15px 0 15px 14%;
	border-top: var(--color-border) solid 1px;
	font-size: 1.4rem;
	color: var(--color-text);
	position: relative;
	display: block;
	vertical-align: middle;
}
.login_user_name{/*ユーザーネーム*/
	margin-right: 0.6em;
	color: var(--color-accent-fg);
}
.c_login_user_point{/*ポイント残高*/
	margin-right: 1em;
	color: var(--color-accent-fg);
}
.c_login_user_point span{
	margin-left: 0.2em;
	margin-right: 0.2em;
	font-weight: bolder;
}
/*仮・予約有*/
span.provisiona_icon{/*仮予約*/
	background-color:var(--color-warning);
	display: inline-block;
	padding: 0px 5px;
	font-size: 1.0rem;
}
span.provisiona_icon a,span.reserve_icon a{
	color: var(--color-text-inverse);
}
span.reserve_icon{/*予約*/
	background-color:var(--color-info);
	display: inline-block;
	padding: 0px 5px;
	font-size: 1.0rem;
}
span.provisiona_icon i,span.reserve_icon i{
	margin-right: 0.3em;
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	span.provisiona_icon,span.reserve_icon{
		margin-right: 0.6em;
	}
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで*/
	span.reserve_icon_wrap{
		display: inline-block;
		width: 77px;
		height: 34px;
		box-sizing: border-box;
		position: relative;
	}
	span.provisiona_icon{
		position: absolute;
		top: 0px;
		left: 0;
	}
	span.reserve_icon{
		position: absolute;
		bottom: -2px;
		left: 0;
	}
	span.provisiona_icon,span.reserve_icon{
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/*ログアウト*//*オフィシャルサイト*/
a.c_header_logout{
	margin-right: 1em;
}
a.c_header_logout,.c_header_oficialsite{
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
}
a.c_header_logout{
	background-color: rgba(var(--gray-0-rgb), 0.85);
}
a.c_header_oficialsite{
	color: var(--color-text-inverse);
	background-color: rgba(var(--brand-secondary-rgb), 0.85);
}
a.c_header_logout i{
	margin-right: 0.26em;
}
.c_header_oficialsite img{
	margin-right: 0.26em;
	max-width: 20px;
}
a.c_header_logout:hover{
	color: var(--color-text-inverse);
	background-color: rgba(var(--gray-0-rgb), 0.55);
}
a.c_header_oficialsitea:link,a.c_header_oficialsitea:visited{
	color: var(--color-text-inverse);
}
.c_header_oficialsite:hover{
	color: var(--color-text-inverse);
	background-color: rgba(var(--brand-secondary-rgb), 0.55);
}
/*ログアウト*//*オフィシャルサイト*/

.sp_navi_logout,.sp_navi_login{
	background: var(--color-surface-nav);
	text-align: left;
}
.sp_navi_logout a,.sp_navi_login a{
	width: 100%;
	box-sizing: border-box;
	padding: 15px 0 15px 12%;
	border-top: var(--color-border) solid 1px;
	font-size: 1.4rem;
	color: var(--color-text);
	position: relative;
	display: block;
	vertical-align: middle;
}
.sp_navi_logout i,.sp_navi_login a{
	margin-right: 0.3em;
	padding-bottom: 2px;
}

/*ログイン前（スマホ）*/
#id_flogin-error{
	color: var(--color-danger);
	text-align: center;
	font-size: 1.4rem;
	padding: 10px 0;
}
input#id_flogin-id,input#id_flogin-pw{
	border: var(--color-border) solid 1px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	font-size: 1.6rem;
	padding:0.6rem 1rem;
	box-sizing:border-box;
	width: 70%;
	/*width: 8rem;*/
	margin: 0 1.6rem 0 0.4rem;
}
@media screen and (min-width:0px) and ( max-width:779.9px) {/*780まで*/
	.c_login_user_point small{/*ポイントっていう文字*/
		display: none;
	}
	a.c_header_logout{
		margin-right: 0;
	}
	a.c_header_oficialsite{
		display: none;
	}
}

@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.login_user{
		position: absolute;
		z-index: 999;
		top: 10px;
		right: 60px;
		line-height: 1.4;
		text-align: right;
	}
	.member_navi,.login_user_public{
		display: none;
	}
	.login_user_name{/*ユーザーネーム*/
		display: block;
		text-align: right;
		white-space: nowrap;
		margin-right: 0;
		position: absolute;
		bottom: -66px;
		right: -50px;
	}
	.c_login_user_point{/*ポイント*/
		display: block;
		white-space: nowrap;
		margin-right: 0;
		position: absolute;
		bottom: -36px;
		right: -50px;
		/*width: 148px;*//*オフィシャルサイトへのリンクがある場合*/
		width: 130px;
		text-align: center;
		padding: 3px 0px;
		border-radius: 3px;
		background-color: var(--color-header-hover);/*白い面の上に置くため、薄い茶色の地に茶色の文字*/
		color: var(--color-header-fg);
	}
	.c_login_user_point span{/*ポイント*/
		font-size: 1.4rem; 
	}
	.c_login_user_point i{
		/*color: rgba(255,234,0,1.00);*/
	}
	/*ログアウト*//*オフィシャルサイト*/
	a.c_header_logout {
		display: none;
	}
	a.c_header_logout,.c_header_oficialsite{
		width: 40px;
		height: 38px;
		text-align: center;
		box-sizing: border-box;
	}
	a.c_header_logout{
		padding: 7px 0px 0;
	}
	a.c_header_oficialsite{
		padding: 5px 0px 0;
		background-color: rgba(var(--gray-0-rgb), 0.85);
	}
	a.c_header_logout i{
		font-size: 2.0rem;
		margin: 0;
	}
	.c_header_oficialsite img{
		max-width: 24px;
		margin: 0;
	}
	a.c_header_logout span,.c_header_oficialsite span{
		display: none;
	}
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.login_user{
		width: 100%;
		padding: 6px 10px 5px;
		box-sizing: border-box;
		background-color: var(--color-accent-surface);
		color: var(--color-accent-fg);
	}

	#top-head.fixed .login_user{
		border-top: var(--color-surface-solid) solid 2px;
	}

	/* drop down-----------------------------------------*/
	.member_navi{
		position:relative;
		display:inline-block;
		margin-right: 0.6em;
	}

	.member_navi_btn{
		font-family:'Century Gothic','Lato','メイリオ',sans-serif;
		color: var(--color-text-strong);
		font-size: 1.2rem;

		display:flex;
		align-items:center;
		gap:6px;

		cursor: pointer;

		background-color: transparent;
		border: none;
		outline: none;
		padding: 0;
		appearance: none;
	}
	.member_navi_btn:hover{
		color: var(--color-text-muted);
	}

	/* ===== ▼▲ 回転 ===== */
	.member_navi_arrow{
		/*display:inline-block;
		width:1em;*/
		margin-right: -3px;
		transition:	transform .25s ease;
	}

	/* 開いたら180度回転 */

	.member_navi[data-open="true"] .member_navi_arrow{
	  transform:rotate(180deg);
	}

	/* ===== メニュー ===== */
	.member_navi_list{
		position:absolute;
		top:calc(100% + 8px);
		left:0;

		min-width:106px;
		padding:6px;

		background-color: var(--color-band-bg);
		box-shadow: 2px 4px 6px var(--color-shadow-strong);
		color: var(--color-band-fg);
		text-align: center;

		/*box-shadow: 2px 4px 10px var(--color-shadow);*/

		opacity:0;
		transform:translateY(-6px);

		pointer-events:none;

		transition:
		opacity .18s ease,
		transform .18s ease;

		z-index:9999;
	}
	.member_navi_list:after {
		content: "";
		position: absolute;
		top: -10px; left: 50%;
		margin-left: -10px;
		display: block;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 0 10px 10px 10px;
		border-color: transparent transparent var(--color-band-bg) transparent;
	}

	.member_navi[data-open="true"] .member_navi_list{
		opacity:1;
		transform:translateY(0);
		pointer-events:auto;
	}

	.member_navi_list a{
		display:block;
		padding:10px;
		color: var(--color-text-inverse);
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
	}
	.member_navi_list a:hover{
		background-color:rgba(var(--gray-0-rgb), 0.30);
	}
}
@media screen and (min-width:600px) and ( max-width:959.9px) {/*600から960まで(SP/タブレット)*/
}
/*メンバーナビ（センター）*/
li.login_navi_center{
	max-width: 1100px;
	width: 72%;
}
li.login_navi_center ul{
	display: flex;
	justify-content: space-between;
	max-width: 800px;
}
li.login_navi_center a{
	background-color: var(--color-surface-solid);
	display: inline-block;
	width: 7.6em;
	padding: 1px 0;
	border-radius: 3px;
	text-align: center;
}
li.login_navi_center a.login_navi_log{
	width: 8.2em;
}
li.login_navi_center i{
	margin-right: 0.4em;
}
@media screen and (min-width : 1200px) {/*1200以上(タブレット/PC)*/
	li.login_navi_center{
		position: absolute;
		top: 4px;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	li.login_navi_center ul{
		margin: 0 auto;
	}
}
@media screen and (min-width:960px) and ( max-width:1199.9px) {/*960から1200まで(PC/タブレット)*/
	li.login_navi_center{
		position: absolute;
		top: 4px;
		left: 0;
	}
	li.login_navi_center ul{
		margin: 0 0 0 auto;
	}
}
@media screen and (min-width:0px) and ( max-width:959.9px) {/*960まで(SP/タブレット/PC)*/
	li.login_navi_center{
		display: none;
	}
}

/*========================================   content   ========================================*/
/*タイトル*/
h3{
	text-align: center;
	max-width: 360px;
	width: 90%;
	margin: 0 auto 30px;
	background-color: var(--color-surface-subtle);
	line-height: 1.4;
	padding: 5px;
}

h3 span:nth-of-type(1){
	font-size: 1.8rem;
	display: block;
	font-family: 'Ubuntu Condensed', sans-serif;
	color: var(--color-text-strong);
	letter-spacing: 0.16em;
	padding-top: 10px;
	border-top:var(--color-border-strong) solid 1px;
}
h3 span:nth-of-type(1):first-letter{
	color: var(--color-accent);
	font-size: 2.2rem;
}
h3 span:nth-of-type(2){
	display: block;
	font-weight: normal;
	font-size: 1.2rem;
	letter-spacing: 0.1em;

	padding-bottom: 15px;
	border-bottom:var(--color-border-strong) solid 1px;
}
h3 span{
	border-left:var(--color-border-strong) solid 1px;
	border-right:var(--color-border-strong) solid 1px;
	position: relative;
}
h3 span:nth-of-type(1)::before,h3 span:nth-of-type(1)::after,h3 span:nth-of-type(2)::before,h3 span:nth-of-type(2)::after{
	content:'';
	display:block;
	line-height:0;
	width: 6px;
	height: 6px;
	background-color: var(--color-surface-subtle);

}
h3 span:nth-of-type(1)::before{
	position: absolute;
	top: -2px;
	left: -2px;
}
h3 span:nth-of-type(1)::after{
	position: absolute;
	top: -2px;
	right: -2px;
}
h3 span:nth-of-type(2)::before{
	position: absolute;
	bottom: -2px;
	left: -2px;
}
h3 span:nth-of-type(2)::after{
	position: absolute;
	bottom: -2px;
	right: -2px;
}

h4{
	/*max-width: 1280px;
	width: 90%;*/
	margin: 0 auto 20px;
	padding-left: .5em;
	box-sizing: border-box;
	/*text-align: center;*/
	font-weight: normal;
	font-size: 1.8rem;
	color: var(--color-text-strong);

	position: relative;
	padding-bottom: .2em;
	border-bottom: 2px solid var(--color-border-light);
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP/タブレット)*/
	h4{
		/*width: 100%;*/
	}
}
h4::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 2px;
	background-color: var(--color-border-strong);
}

@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	h3 span:nth-of-type(1){
		font-size: 2.2rem;
	}
	h3 span:nth-of-type(1):first-letter{
		font-size: 2.6rem;
	}
	h3 span:nth-of-type(2){
		ont-size: 1.4rem;
	}
}
/*コンテンツボックス(top以外の全てのページ)*/
.contents_box{
	padding-top: 30px;
	margin-bottom: 60px;
}
	/*フォームの背景*/
.contents_box_wrap{
	max-width: 1000px;
	width: 90%;
	box-sizing: border-box;
	margin:0px auto 60px;
	padding: 40px 40px 30px;
	background-color:var(--color-surface);
	box-shadow: 2px 4px 10px var(--color-shadow);
}
.common_contents_wrap{
	max-width: 1280px;
	width: 90%;
	margin: 0 auto 50px;
	box-sizing: border-box;
	padding: 40px 30px 40px;
	background-color:var(--color-surface);
	box-shadow: 2px 4px 10px var(--color-shadow);
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.contents_box{
		padding-top: 80px;
		margin-bottom: 100px;
	}
	.common_contents_wrap{
		padding: 40px 40px 60px;
	}
}

/*========================================   cast関係   ========================================*/
/*新人マーク*/
.c_new{
	position: absolute;
	right: 0;
	bottom:0;
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 40px solid rgba(var(--color-new-rgb), 0.8);
	border-bottom: 40px solid rgba(var(--color-new-rgb), 0.8);
	border-left: 40px solid transparent;
}
.c_new span{
	color: var(--color-text-inverse);
	font-family: 'Ubuntu Condensed', sans-serif;
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	.c_new{
		border-top: 25px solid transparent;
		border-right: 25px solid rgba(var(--color-new-rgb), 0.8);
		border-bottom: 25px solid rgba(var(--color-new-rgb), 0.8);
		border-left: 25px solid transparent;
	}
	.c_new span{
		position: absolute;
		top:-5px ;
		left: -5px;
		display: inline-block;
		 transform: rotate(-45deg);
		font-size: 1.4rem;
	}
}
/*お気に入り登録ボタン*/
.c_favorite_btn{
	width: 90%;
	text-align: center;
}
.c_favorite_btn input[type='checkbox'] {
	display: none;
}
.c_favorite_btn span {/*通常時のチェックボックスの設定*/
	position: relative;
	/*display: flex;
	align-items: center;*/
	display: inline-block;
	width: 100%;
	height: 37px;
	box-sizing: border-box;
	padding-top: 5px;
	color: var(--color-text);
	background-color: var(--color-surface-muted);
	border-radius: 4px;
	z-index: 99;
}
@media screen and (min-width:0px) and ( max-width:1279.9px) {/*1280まで(SP/タブレット)*/
	p.schedule_favorite_btn span{
		font-size: 1.4rem;
		padding-top: 6px;
		padding-right: 2em;
		display: inline-block;
	}
}
@media screen and (min-width:479.9px) and ( max-width:559.9px) {/*480から560まで(SP)*/
	span.c_favorite_btn_txt_small{
		font-size: 1.4rem;
		padding-top: 6px;
		padding-right: 2em;
		display: inline-block;
	}
}
div.reservation_contents_box p.c_favorite_btn span{
	background-color: var(--color-surface-disabled);
	color: var(--color-text-muted);
}
.c_favorite_btn label{
	position: absolute;
	right: -8px;
	top: -4px;
	font-size: 2.2rem;
	background-color: var(--color-surface-solid);
	border: var(--color-border) solid 2px;
	color: var(--color-text-muted);
	border-radius: 50%;
	width: 39px;
	height: 39px;
	display: inline-block;
	cursor: pointer;
}
/* Transition */
.c_favorite_btn label,
.c_favorite_btn label::before {
	transition: 0.25s all ease;
}
.c_favorite_btn input[type='checkbox']:checked + span {
	background: var(--color-favorite);
	color: var(--color-text-inverse);
}
.c_favorite_btn input[type='checkbox']:checked + span::after {
	content: '登録中';
}
.c_favorite_btn input[type='checkbox']:checked + span label {
	border: var(--color-favorite-border) solid 2px;
	color: var(--color-favorite);
}


/*名前文字制限*/
.c_cast_name_limit{
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align:top;
}
.cast_prof span.c_cast_name_limit{/*在籍一覧名前*/
	max-width: calc(100% - 5em);
}
.profilepage_link strong.c_cast_name_limit{/*在籍一覧プロフリンク名前*/
	max-width: calc(100% - 7em);
}
p.castname strong.c_cast_name_limit{/*出勤表PC用名前*/
	max-width: calc(100% - 320px - 13em);
}
p.castname_sp strong.c_cast_name_limit{/*出勤表SP用名前*/
	max-width: calc(100% - 5em);
}
ul.castprofile_basic li strong.c_cast_name_limit{/*プロフPC用名前*/
	max-width: calc(100% - 5em);
}
@media screen and (min-width:768px) and ( max-width:1279.9px) {/*768から1280まで(SP/タブレット)*/
	p.castname strong.c_cast_name_limit{/*出勤表PC用名前*/
		max-width: calc(100% - 15em);
	}
}
@media screen and (min-width:479.9px) and ( max-width:599.9px) {/*480から600まで(SP)*/
}

/*案内状況*/
.c_current_status{
	margin:30px auto;
	text-align: center;
	background-color:rgba(var(--gray-900-rgb), 0.7);
	color: var(--color-text-inverse);
	width:300px;
	max-width: 90%;
	border-radius: 5px;
	padding:5px 0px;
}

/*========================================   footer   ========================================*/
/*電話btn*/
.sp_info_footer{
	max-width: 900px;
	width: 90%;
	box-sizing: border-box;
	margin: 0 auto 60px;
	text-align: center;
	font-style:normal;
	background-color:var(--color-surface);
	box-shadow: 2px 4px 10px var(--color-shadow);
	padding: 20px 20px 30px;
	/*padding: 30px 0;*/
}
.sp_info_title{
	margin-bottom: 10px;
}
.sp_info_title span{
	font-family: 'Ubuntu Condensed', sans-serif;
	color: var(--color-text-strong);
	font-weight: bolder;
	font-size: 1.8rem;
	letter-spacing: 0.16em;
}
.sp_info_title:first-letter{
	color: var(--color-accent);
	font-size: 2.4rem;
}
.sp_info_title small{
	margin-left: 0.5em;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
}
.sp_info_footer p:nth-of-type(3){
	line-height: 1.2;
	margin-bottom: 30px;
}
.sp_info_footer p:nth-of-type(3) a{
	padding: 14px 0 13px;
}
.sp_infobtn{
	margin-top: 10px;
}
.sp_infobtn a{
	/*height: 2.4em;*/
}
.sp_info_footer small{
		font-size: 1.2rem;
	}
.sp_info_footer i{
	margin-right: 0.2em;
	font-size: 2.0rem;
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	/*.sp_info_footer{
		display: none;
	}*/
}

/*fooetr*/
footer{
	text-align: center;
	width: 100%;
	background-color: var(--color-footer-bg);
	font-size: 1.4rem;
	padding-bottom: 30px;
}
.c_footer_nav{
	width: 100%;
	box-sizing: border-box;
	padding: 20px 4% 30px;
	margin-bottom: 50px;
	background-color:
	var(--color-surface-solid);
}

.c_footer_nav ul{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}
.c_footer_nav li{
	width : calc(100% / 3) ;
	font-size: 1.4rem;
	padding-top: 10px;
}
.c_footer_nav li a{
	/*border-bottom: var(--color-text-muted) dotted 1px;*/
	width: 88%;
	display: block;
	white-space: nowrap;
	margin: 0 auto;
}
footer p{
	padding: 0 4%;
}
.c_oficialsite_footer{
	margin-top: 30px;
}
.c_oficialsite_footer img{
	max-width: 26px;
	margin-right: 0.4em;
}
.c_oficialsite_footer a{
	display: inline-block;
	max-width: 300px;
	width: 48%;
	padding: 10px 0;
	background-color:var(--color-btn-hover);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-btn-text);
	letter-spacing: 0.02em;

	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
.c_oficialsite_footer a:hover{
	background-color: var(--color-btn-bg);
	background-position: 99% 50%;
}
.c_oficialsite_footer a {
	background: -webkit-linear-gradient(180deg, var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-hover));
	background: -webkit-linear-gradient(right, var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-hover));
	background: linear-gradient(270deg, var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-hover));
	background-position: 1% 50%;
	background-size: 300% 300%;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.c_oficialsite_footer a{
		width: 100%;
	}
}
.c_copyright{
	color: var(--color-text-inverse);
	margin-top: 30px;
}
.c_copyright a:link{
	color: var(--color-text-inverse);
}
.c_copyright a:visited{
	color: var(--color-text-inverse);

}
.c_copyright a:hover{
	color: var(--color-link-hover);
}
.c_copyright span{
	display: inline-block;
}
@media screen and (min-width:0px) and ( max-width:959.9px) {/*960まで(SP/タブレット/PC)*/
	.c_footer_nav li{
		font-size: 1.2rem;
	}
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.c_copyright{
		font-size: 1.2rem;
	}
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	.c_footer_nav li{
		font-size: 1.0rem;
	}
	.c_oficialsite_footer{
		font-size: 1.2rem;
	}
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)：折り返さず1行に並べる*/
	.c_footer_nav ul{
		flex-wrap: nowrap;
		gap: 0 clamp(6px, 2vw, 28px);
	}
	.c_footer_nav li{
		width: auto;
		flex: 0 0 auto;
	}
	.c_footer_nav li a{
		width: auto;
	}
}
@media screen and (min-width : 1280px) {/*1280以上(タブレット/PC)*/
	.c_footer_nav ul{
		justify-content: space-between;
	}
}

/*ページトップへ*/
#page-top {
	position: fixed;
	bottom:10px;
	right: 15px;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	#page-top {
		right: 10px;
	}
}
#page-top a {
	background-color: var(--color-btn-bg);
	text-decoration: none;
	color: var(--color-btn-text);
	box-sizing:border-box;
	width: 46px;
	position: relative;
	height:46px;
	line-height:46px;
	text-align: center;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-transition: all .3s;
	transition: all .3s;
}
#page-top a:hover {
	text-decoration: none;
	background-color: rgba(var(--brand-secondary-rgb), 0.85);
}
#page-top a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: 14px;
	height: 14px;
	margin: -5px -8px 0 0;
	border-top: solid 2px var(--color-surface-solid);
	border-left: solid 2px var(--color-surface-solid);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

h5.update{
	margin:20px auto;
	text-align: right;
	max-width: 1280px;
	width: 90%;
}
h5.update span{
	display: inline-block;
	background-color: var(--color-surface-solid);
	padding:5px;
	width:250px;
	text-align: center;
	color: var(--color-text);
	font-size: 14px;
	border-radius:5px;
}

/*debugへのリンク*/
.debuglink{
	text-align: center;
}
.debuglink a{
	display: inline-block;
	width: 50px;
	height: 30px;
}

/*予約できる時間のツールチップ*/
/* ツールチップ本体 */
p.tgToolTip {
	padding:1.0em 1.2em 0;
	box-sizing: border-box;
	background-color: var(--color-surface-solid);
	filter: drop-shadow(1px 2px 8px rgba(var(--gray-900-rgb), 0.5));
	border-radius: 5px;
	-moz-border-radius: 5px;
	min-width: 260px;
	width: 90% ;
	height: 90px;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
}
span.guidance_reserve_tooltip{
	display: flex;
}
span.guidance_reserve_mark_tooltip{
	display: inline-block;
	width:50px;
	text-align: center;
	padding:2px;
	border-radius: 5px;
	background-color: var(--color-slot-selected);
	color: var(--color-text-inverse);
	font-size:2.0rem;
	margin-right:0.6em;
	position: relative;
}
span.guidance_reserve_mark_tooltip i{
	color: var(--color-emphasis);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	p.tgToolTip {
		padding: 1.2em 1em 0;
		width: 98% ;
	}
	span.guidance_reserve_tooltip{
		font-size: 1.4rem;
	}
	span.guidance_reserve_mark_tooltip{
		width:40px;
		margin-right:0.4em;
	}
}
.close_icon{/*飾りの×アイコン*/
	position: absolute;
	right: 0.7em;
	top: 0.7em;
	color: var(--color-text-muted);
}
.close_area {/*閉じるためのトリガー範囲*/
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 100;
}

/*チップ内のWEB予約ボタン*/
a.c_tooltip_reservebtn{
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	padding: 8px 0;
	text-align: center;
	background-color:var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-btn-text);
	letter-spacing: 0.02em;
	border: solid 2px var(--color-surface-solid);/* 内側の線になる一本線の枠線をひく*/
	outline: solid 1px var(--color-btn-bg);/* 外側の線になる一本線の枠線をひく*/
	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
a.c_tooltip_reservebtn:hover{
	background-color: var(--color-btn-hover);
	background-position: 99% 50%;
}
a.c_tooltip_reservebtn {
	background: -webkit-linear-gradient(180deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: -webkit-linear-gradient(right, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: linear-gradient(270deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background-position: 1% 50%;
	background-size: 300% 300%;
}
#slide_wrap.tooltips-active {
	pointer-events: none;
	cursor: default;
	z-index: 101;
}
.reserve_data_tooltip {
	pointer-events: auto;
}

@media screen and (min-width : 760px) {/*760以上(タブレット/PC)*/
	a.c_tooltip_reservebtn{
		width: 220px;
	}
}
@media screen and (min-width : 960px) {/*960以上(タブレット/PC)*/
	a.c_tooltip_reservebtn{
		width: 280px;
	}
}
@media screen and (min-width:0px) and ( max-width:759.9px) {/*760まで(SP/タブレット/PC)*/
	a.c_tooltip_reservebtn{
		padding: 8px 10px;
	}
}
@media screen and (min-width:0px) and ( max-width:479.9px) {/*480まで(SP)*/
	.guidance_reserve_data_tooltip{
	 	font-size: 1.2rem;
	}
}
@media screen and (min-width:0px) and ( max-width:399.9px) {/*400まで(SP)*/
	a.c_tooltip_reservebtn{
		right: 25px;
	}
}

/*========================================   シティヘブン ブログパーツ（写メ日記・即ヒメ など）   ========================================*/
/*高さは js/heaven-widget.js が幅から計算する*/
.heaven_widget{
	max-width: 1280px;
	width: 90%;
	margin: 0 auto 50px;
	padding: 1em;
	box-sizing: border-box;
	background-color: var(--color-surface-muted);
	border: var(--color-border) dotted 1px;
}
.heaven_widget_frame{
	display: block;
	width: 100%;
	border: 0;
	background-color: transparent;
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.heaven_widget{
		padding: 0.6em;
		margin-bottom: 40px;
	}
}


/*========================================   注意・禁止事項（template/agreement.html：TOP・システム共通）   ========================================*/
.agreement ul{
	margin:20px 0;
}
.agreement ul li{
	padding-left:1em;
	text-indent:-1em;
}
.agreement_list li{
	padding-top: 5px;
	border-bottom: var(--color-border) dotted 1px;
}
.mark{
	color: var(--color-emphasis);
	margin-right:0.2em;
}
@media screen and (min-width:0px) and ( max-width:599px) {/*600まで(SP)*/
	.agreement_list,.agreement .agreement_note{
		font-size:1.2rem;
	}
}
/*リスト後の注意文*/
.agreement .agreement_note{
	margin: 25px 0 0;
	padding: 1em 1.2em;
	background-color: var(--color-surface-muted);
	line-height: 1.9;
}


/*========================================   お知らせ・イベント記事（index.html / event.html 共通：top.css から移設）   ========================================*/
.news_topics{
	max-width: 1280px;
	width: 90%;
	margin: 0 auto 60px;
	padding: 30px 2%;
	box-sizing: border-box;
	background-color:var(--color-surface);
	box-shadow: 2px 4px 10px var(--color-shadow);
}

.news_date{
	text-align: center;
	clear: both;
}
p.news_date{
	margin-top: 60px;
}
p.news_date:first-of-type{
	margin-top: 0px;
}

.news_date span{
	position: relative;
	display: inline-block;
	padding: 0 40px;
	font-weight: bolder;
	margin: 0 auto;
	color: var(--color-text-strong);
}
.news_date span:before, .news_date span:after{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 30px;
	height: 1px;
	background-color: var(--color-border-strong);
}
.news_date span:before {left:0;}
.news_date span:after {right: 0;}
.news_title{
	text-align: center;
	color: var(--color-text-strong);
	font-weight: bolder;
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.news_img{
	max-width: 300px;
	margin-right: 20px;
	margin-bottom: 10px;
}

.news_img{
	max-width: 300px;
	margin-right: 20px;
	margin-bottom: 10px;
}
.news_txt{
	font-size: 1.4rem;
	line-height: 1.8;
	margin-bottom: 10px;
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.news_topics{
		margin: 0 auto 100px;
	}
	.news_content{
		display: flex;
	}
}
@media screen and (min-width:0px) and ( max-width:599px) {/*600まで(SP)*/
	.news_img{
		width: 90%;
		text-align: center;
		margin: 0 auto 10px;
	}
}
/*記事がないとき*/
.news_empty{
	text-align: center;
	padding: 40px 0;
	color: var(--color-text-muted);
}