@charset "utf-8";
/***************************************************
information
  filename : app_dez.css;
***************************************************/
:root {
  --app-main-brd: #cdcdcd; /* メインボーダー色 */
  --app-main-brd-k: #333; /* メインボーダー色（濃） */
  --app-main-brd-a: #e7e7e7; /* メインボーダー色（薄） */
  --app-main-brd-u: #fff; /* メインボーダー反対色 */

  --app-main-cr-a: #f6f6f6; /* メイン色（薄） */
  --app-main-cr-b: #000; /* メイン色（黒） */
  --app-main-cr-u: #fff; /* メイン色（白） */
  --app-main-cr-ar: #fff7df; /* アラート色(コメント・掲示板で使用) */

  --app-main-txt-a: #535353; /* メイン色（薄） テキスト */
  --app-main-txt-u: #fff; /* 白テキスト */
  --app-main-txt-ub: #e60012; /* テキスト赤下線(エディタで使用) */
  --app-main-txt-dis: #eaeaea; /* テキストdisable時 */

  --form-brd: #cdcdcd; /* フォームボーダー色 */
  --form-brd-dis: #e2e2e2; /* フォームボーダーdisable時 */
  --form-txt: #000; /* フォームテキスト色 */
  --form-txt-dis: #cdcdcd; /* フォームテキストdisable時 */
  --form-fc: #fffef6; /* フォーム背景基本色 */
  --form-fc-cr: #fffbd7; /* フォームフォーカス色 */
  --form-fc-dis: #eaeaea; /* フォームdisable時 */
  --form-rd-ch: #202020; /* フォームラジオ・チェック色 */
  --form-rd-dis: #e2e2e2; /* フォームラジオ・チェックdisable時 */

  --sp-slnavi-cs: rgba(255,255,255,0.9); /* スマホスライドメニュー背景白 */
  --sp-slnavi-csb: rgba(33,33,33,0.9); /* スマホスライドメニュー背景黒 */

  --bt-w: linear-gradient(180deg, #fff, #fafafa); /* グラデボタン白 */
  --bt-w-u: linear-gradient(180deg, #fff, #fffdea); /* グラデボタン白ホバー */
  --bt-w-brd: 1px solid #b6b6b6; /* グラデボタン白ボーダー */
  --bt-w-txt: #303030; /* グラデボタン白テキスト */
  --bt-w-sd: 0 0 3px #e0e0e0; /* グラデボタン白影 */

  --bt-bl: linear-gradient(180deg, #0085ba, #007aab); /* グラデボタン青 */
  --bt-bl-u: linear-gradient(180deg, #1399cf, #0386ba); /* グラデボタン青ホバー */
  --bt-bl-brd: 1px solid #007eb0; /* グラデボタン青ボーダー */
  --bt-bl-txt: #fff; /* グラデボタン青テキスト */
  --bt-bl-sd: 0 0 3px #e0e0e0; /* グラデボタン青影 */

  --bt-gr: linear-gradient(180deg, #8abc1e, #77ae01); /* グラデボタン緑 */
  --bt-gr-u: linear-gradient(180deg, #99ce26, #7cb600); /* グラデボタン緑ホバー */
  --bt-gr-brd: 1px solid #74aa00; /* グラデボタン緑ボーダー */
  --bt-gr-txt: #fff; /* グラデボタン緑テキスト */
  --bt-gr-sd: 0 0 3px #e0e0e0; /* グラデボタン緑影 */

  --bt-or: linear-gradient(180deg, #fb8800, #ef8100); /* グラデボタン橙 */
  --bt-or-u: linear-gradient(180deg, #ff9920, #fb8800); /* グラデボタン橙ホバー */
  --bt-or-brd: 1px solid #e97e00; /* グラデボタン橙ボーダー */
  --bt-or-txt: #fff; /* グラデボタン橙テキスト */
  --bt-or-sd: 0 0 3px #e0e0e0; /* グラデボタン橙影 */

  --bt-rd: linear-gradient(180deg, #e44e4e, #d32c2c); /* グラデボタン赤 */
  --bt-rd-u: linear-gradient(180deg, #ed7272, #ea5353); /* グラデボタン赤ホバー */
  --bt-rd-brd: 1px solid #d21010; /* グラデボタン赤ボーダー */
  --bt-rd-txt: #fff; /* グラデボタン赤テキスト */
  --bt-rd-sd: 0 0 3px #e0e0e0; /* グラデボタン赤影 */

  --bt-bk: linear-gradient(180deg, #2a2a2a, #1a1a1a); /* グラデボタン黒 */
  --bt-bk-u: linear-gradient(180deg, #353535, #2a2a2a); /* グラデボタン黒ホバー */
  --bt-bk-brd: 1px solid #131313; /* グラデボタン黒ボーダー */
  --bt-bk-txt: #fff; /* グラデボタン黒テキスト */
  --bt-bk-sd: 0 0 3px #e0e0e0; /* グラデボタン黒影 */
}

/* 基本リンク */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

/*** ビデオ埋め込み共通 ***/
.innvideo{position:relative;width:100%;padding-top:56.25%;}
.innvideo iframe{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;max-width:95%;max-height:95%;}


/*** リストカテゴリ表示 ***/
.cateIco {color: #fff;}
.DetcateIco {color: #fff;}

/****** アラート系共通 ******/
/* 背景黄色注意書き部分 */
.Art {
	padding: 10px;
	border: 1px solid #e00012;
	color: #e00012;
	background: #fff4ab;
	border-radius: 3px
}

/* 背景グレー注意書き部分 */
.CautTxt {
	padding: 20px;
	border: 1px solid #d3d3d3;
	background: #f3f3f3;
	border-radius: 3px
}
/* 入力フォーム注意書き部分 */
p.CautTxtS {
	padding: 10px;
	border: 1px solid #d3d3d3;
	background: #f3f3f3;
	border-radius: 3px;
	font-size: 14px;
}
/* 背景白注意書き部分 */
.CautTxtW {
	padding: 20px;
	border: 1px solid #d3d3d3;
	background: #fff;
	border-radius: 3px
}
/* 入力フォーム個別エラー */
.err {
	margin: 5px 0;
	padding: 5px 10px;
	border: 1px solid #e00012;
	color: #e00012;
	background: #fff4ab;
	border-radius: 3px;
	font-size: 14px;
}

/*** 申込アラート ***/
.ord_artBox {
	margin: 10px 0;
	padding: 10px 15px;
	border-radius: 3px;
	font-size: 14px;
}

.ord_art_reg {
	margin: 10px auto;
	padding: 15px;
	background: #f3f3f3;
	border-radius: 3px;
	font-size: 14px;
}
/* 空きに余裕あり */
.ord_empty {
	border: 1px solid #10a800;
	color: #10a800;
	background: #e3ffcd;
}
/* 残席僅か */
.ord_little {
	border: 1px solid #c71a1a;
	color: #c71a1a;
	background: #fffbcb;
}
/* 残席ありません */
.ord_can {
	border: 1px solid #008abd;
	color: #008abd;
	background: #d5f0f4;
}
/* 受付完了 */
.ord_sout {
	border: 1px solid #c71a1a;
	color: #c71a1a;
	background: #ffe5e5;
}
/* 受付終了 */
.ord_ordthk {
	border: 1px solid #e06900;
	color: #e06900;
	background: #fffdea;
}
/* 受付できない */
.ord_ordno {
	border: 1px solid #e06900;
	color: #e06900;
	background: #fffdea;
}
/* 既に申し込みされている */
.ord_done {
	border: 1px solid #c71a1a;
	color: #c71a1a;
	background: #ffe5e5;
}
/* 他の時間帯で既に申し込みされている */
.ord_otdone {
	border: 1px solid #c71a1a;
	color: #c71a1a;
	background: #ffe5e5;
}

/******* LINK button Size *******/
/* 基本ボタンサイズ */
a.btWtW,
span.btWtW,
button.btWtW {width: 500px;padding: 20px 0px;font-size:16px;}
a.btWtM,
span.btWtM,
button.btWtM {width: 300px;padding: 15px 0px;font-size:16px;}
a.btWtS,
span.btWtS,
button.btWtS {width: 200px;padding: 15px 0px;font-size:16px;}
a.btWtN,
span.btWtN,
button.btWtN {width: 90%;padding: 15px 0px;font-size:16px;}
a.btWtSS,
span.btWtSS,
button.btWtSS {width: 80%;padding: 8px 0;font-size:14px;}
a.btCart,
span.btCart,
button.btCart {width: 400px;padding: 15px 0px;font-size:20px;}
a.btInp,
span.btInp,
button.btInp {width: 100%;padding: 10px 0px;font-size:16px;}

a.btWtW,
a.btWtM,
a.btWtS,
a.btWtN,
a.btWtSS,
a.btCart,
a.btInp {display: block;text-align:center;}
a.btWtW:hover,
a.btWtM:hover,
a.btWtS:hover,
a.btWtN:hover,
a.btWtSS:hover,
a.btCart:hover,
a.btInp:hover {text-decoration: none;}

/******* LINK BUTTON COLOR *******/

/* グラデボタン白 */
.commonBT a,
.editBt a,
a.slide_btn,
.commonBT span,
.editBt span,
span.slide_btn,
a.whBT,
button.whBT,
span.whBTN {background: var(--bt-w);border: var(--bt-w-brd);color: var(--bt-w-txt);box-shadow: var(--bt-w-sd);}
.commonBT a:hover,
.editBt a:hover,
a.slide_btn:hover,
a.whBT:hover,
button.whBT:hover {background: var(--bt-w-u);}

/* グラデボタン青 */
a.blBT,
button.blBT,
span.blBTN {background: var(--bt-bl);border: var(--bt-bl-brd);color: var(--bt-bl-txt);box-shadow: var(--bt-bl-sd);}
a.blBT:hover,
button.blBT:hover {background: var(--bt-bl-u);}

/* グラデボタン緑 */
a.grBT,
button.grBT,
span.grBTN {background: var(--bt-gr);border: var(--bt-gr-brd);color: var(--bt-gr-txt);box-shadow: var(--bt-gr-sd);}
a.grBT:hover,
button.grBT:hover {background: var(--bt-gr-u);}

/* グラデボタン橙 */
a.orBT,
button.orBT,
span.orBTN {background: var(--bt-or);border: var(--bt-or-brd);color: var(--bt-or-txt);box-shadow: var(--bt-or-sd);}
a.orgBT:hover,
button.orBT:hover {background: var(--bt-or-u);}

/* グラデボタン赤 */
a.rdBT,
button.rdBT,
span.rdBTN {background: var(--bt-rd);border: var(--bt-rd-brd);color: var(--bt-rd-txt);box-shadow: var(--bt-rd-sd);}
a.rdBT:hover,
button.rdBT:hover {background: var(--bt-rd-u);}

/* グラデボタン黒 */
a.bkBT,
button.bkBT,
span.bkBTN {background: var(--bt-bk);border: var(--bt-bk-brd);color: var(--bt-bk-txt);box-shadow: var(--bt-bk-sd);}
a.bkBT:hover,
button.bkBT:hover {background: var(--bt-bk-u);}

/* グラデボタン矢印 */
.BtM button.whBT.next::after,
.BtM a.whBT.next::after,
.BtM span.whBTN.next::after {border-left-color:  var(--bt-w-txt);}
.BtM button.whBT.back::after,
.BtM a.whBT.back::after,
.BtM span.whBTN.back::after {border-right-color: var(--bt-w-txt);}

/* ボタン操作無し */
.commonBT span,
.editBt span,
span.slide_btn,
span.whBTN,
span.blBTN,
span.grBTN,
span.orBTN,
span.rdBTN,
span.bkBTN {filter: alpha(opacity=40);-moz-opacity:0.40;opacity:0.40;}

/*** ファイルアップボタン ***/
.fileUpBT a,
.fileUpBT span,
.fileDelBT a,
.fileDelBT span {width:230px;padding: 8px;display:block;text-decoration: none;text-align: center;font-size:12px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
.fileUpBT a.crt,
.fileUpBT a:hover,
.fileDelBT a.crt,
.fileDelBT a:hover {text-decoration: none;}

.fileUpBT a {border: 1px solid var(--app-main-cr);background: var(--app-main-cr);color: #fff;text-decoration: none;font-weight: bold;}
.fileDelBT a {border: 1px solid var(--app-main-cr);background: var(--app-main-cr);color: #fff;text-decoration: none;font-weight: bold;}
.fileUpBT a:hover,
.fileDelBT a:hover {filter: alpha(opacity=65);-moz-opacity:0.75;opacity:0.75;}
.fileUpBT span,
.fileDelBT span {filter: alpha(opacity=65);-moz-opacity:0.75;opacity:0.75;}

/******* 共通ボタン *******/

.commonBT a {width:180px;padding: 5px;display:block;text-decoration: none;text-align: center;font-size:13px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
.commonBT a.crt,
.commonBT a:hover {text-decoration: none;}
.commonBT span {width:140px;padding: 5px;display:block;text-decoration: none;text-align: center;font-size:13px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}

.editBt a {padding: 5px 10px;display:block;text-decoration: none;text-align: center;font-size:13px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
.editBt a.crt,
.editBt a:hover {text-decoration: none;}
.editBt span {padding: 5px;display:block;text-decoration: none;text-align: center;font-size:13px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}

/* オープンクローズボタン */
.htibrd {margin: 20px auto;padding: 6px 5px;border-bottom: 1px dotted var(--app-main-brd);}
.htibrd .editBt a {width: 180px;}
a.slide_btn {width:60px;padding: 2px 5px;display:block;text-decoration: none;text-align: center;font-size:12px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}

/*** アイコン ***/
span.IcoBox {border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}
span.NrIcBg {margin: 0px 2px;padding: 3px 5px;text-align:center;font-size:13px;display:block;}
span.NewIcBg {width:40px;margin: 0px 5px;padding: 2px 3px;text-align:center;font-size:10px;}
span.StIcBg {width:65px;margin: 0px 2px;padding: 1px;text-align:center;font-size:13px;display:block;}
span.IcBg {width:75px;display:block;}
span.MdIcBg {width:120px;margin: 0px 2px;padding: 3px;text-align:center;font-size:13px;font-weight:bold;display:block;}

/******* アイコンカラー *******/
span.BgGry {background:#a6a6a6;color:#fff;}
span.BgGrn {background:#7ec617;color:#fff;}
span.BgOyl {background:#eab219;color:#fff;}
span.BgBrn {background:#a29c71;color:#fff;}
span.BgRed {background:#d11900;color:#fff;}
span.BgBlu {background:#31a6dc;color:#fff;}
span.BgBlk {background:#5a899f;color:#fff;}
span.BgPnc {background:#ff5757;color:#fff;}
span.BgYel {background:#ffcc00;color:#fff;}
span.BgBls {background:#00b4ff;color:#fff;}
span.BgKrd {background:#f84b4b;color:#fff;}
span.BgKgr {background:#7fbe25;color:#fff;}
span.BgBrk {background:#343434;color:#fff;}
span.BgEng {background:#922222;color:#fff;}

/* Tableカラー指定 */
.TableBox th {background:#f4f4f4;}
.TableBox td {background:#fff;}
.TableBox td.no {background:#f4f4f4;}
.TableBox td.TableBgGrn {background:#f2fff1;}
.TableBox td.TableBgPnc {background:#fff1e4;}
.TableBox td.TableBgYel {background:#fffcde;}
.TableBox td.TableBgBlu {background:#dcfaff;}
.TableBox td.TableBgPlp {background:#ffecff;}
.TableBox td.TableBGTotal {background:#f9f2e1;}
.TableBox td.TableBGdiameter {background:#e7f1db;}
.TableBox td.TableBGbreakdown {background:#f4f4f4;}

/* ===================================================================================
for Ipad max-width: 1024px
=================================================================================== */
@media screen and (min-width:768px) and ( max-width:1024px) {
	.sideClnW a.btWtW,
	.sideClnW span.btWtW,
	.sideClnW button.btWtW {width: 500px;padding: 20px 0px;font-size:16px;}
	#SNSboxArea {width: var(--app-main-width-con-ipad);}
}

/* ===================================================================================
for SP max-width: 640px
=================================================================================== */
@media screen and (max-width: 640px) {

	/****** アラート系共通 ******/
	.Art,
	.CautTxt,
	.CautTxtW,
	.ord_artBox,
	.ord_art_reg {font-size: 4.0vw;}
	.InputForm dd p.CautTxtS {font-size: 3.6vw;}

	/******* LINK button Size *******/
	a.btWtW,
	span.btWtW,
	button.btWtW {width: 80%;padding: 15px 0px;font-size:4.0vw;}
	a.btWtM,
	span.btWtM,
	button.btWtM {width: 80%;padding: 15px 0px;font-size:4.0vw;}
	.NBLink button.btWtM,
	.spLR button.btWtM {width: 160px;}
	.popup .spBtM span.btWtM,
	.popup .spBtM button.btWtM {width: 155px;}
	a.btWtS,
	span.btWtS,
	button.btWtS {width: 100%;font-size:4.0vw;}
	a.btWtN,
	span.btWtN,
	button.btWtN {width: 100%;font-size:4.0vw;}
	a.btWtSS,
	span.btWtSS,
	button.btWtSS {width: 80%;font-size:4.0vw;}

	a.btCart,
	span.btCart,
	button.btCart {width: 165px;padding: 10px 0px;font-size:4.0vw;}

	a.btInp,
	span.btInp,
	button.btInp {width: 80%;font-size:4.0vw;}

	.mainClnD a.btCartW,
	.mainClnD span.btCartW,
	.mainClnD button.btCartW,
	a.btCartW,
	span.btCartW,
	button.btCartW {width: 100%;padding: 10px 0px;font-size:4.0vw;}

	span.NrIcBg {font-size:3.8vw;}
	span.NewIcBg {font-size:3.2vw;}
	span.StIcBg {font-size:3.8vw;}
	span.MdIcBg {font-size:3.8vw;}

	.commonBT a,
	.commonBT span,
	.editBt a,
	.editBt span {font-size:4.0vw;padding: 5px;}
}