@charset "utf-8";
/***************************************************
information
  filename : app_dez.css;
***************************************************/
/* 基本リンク */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

/***************************************************
表示切替タグ
***************************************************/
@media screen and (min-width:426px) {
  .sp { display: none; }
}
@media screen and (max-width: 425px) {
  .pc { display: none; }
}
@media screen and (min-width: 768px) {
  .tb { display: none; }
}
@media screen and (max-width: 767px) {
  .nb { display: none; }
}

/***************************************************
body font
***************************************************/
* { margin: 0; padding: 0; box-sizing: border-box;}
a, a:hover{text-decoration: none}
body {
  color: var(--app-glnv-txt);
  font-family: var(--main-font);
}
@media screen and (max-width:540px){
  body{font-size:14px;}
}

p.center {
  text-align: center;
}
p.small {
  font-size: var(--txt-size-s);
  line-height: 1.65;
  padding: 12px 0px;
}
@media screen and (max-width:425px) {
  p.small {
    font-size: 13px;
  }
}

ul li {
  font-size: 16px;
  line-height: 1.75;
  list-style: none;
}
@media screen and (max-width:425px) {
  ul li {
    font-size: 14px;
  }
}
/***************************************************
ページ背景指定
***************************************************/
/* コース */
body.contents{
	background:var(--app-bg-cr);
}
/* フォーム */
body.form{
	background:var(--app-bg-cr);
  }
  
/***************************************************
ボタンパーツ
***************************************************/
/* デフォルトボタン1 */
.buttonBox{
	text-align: center;
	margin:16px auto;
  }
  button,.buttonBox a{
	font-size:16px;
	background:var(--app-main-cr);
	color:#fff;
	border:none;
	width:360px;
	padding:16px 8px;
	border-radius: 4px;
	box-shadow: 0 2px 20px rgba(0,0,0,0.08);
	transition:0.4s ease;
  }
  .buttonBox a{
	display: block;
	margin:auto;
  }
  button:hover{
	transform:scale(0.99);
	box-shadow: none;
	transition:0.2s ease;
  }
  
  @media screen and (max-width:767px){
	button,.buttonBox a{
	  width:320px;
	}
  }
  @media screen and (max-width:440px){
	button,.buttonBox a{
	  width:71%;
	}
  }
  
/* デフォルトボタン2 */
button.line,.buttonBox a.line{
	color: var(--app-main-txt);
	padding:14px 8px;
	background:none;
	border:2px solid var(--app-main-txt);
	box-shadow: none;
  }
  button.line:hover{
	color:#fff;
	background:var(--app-main-txt);
	transform:scale(1);
  }

/* 強調ボタン中 */
button.main,.buttonBox a.main{
	background:var(--app-main-cr-c);
  }
  
/* 強調ボタン大 */
button.mainBig,.buttonBox a.mainBig{
	font-size:18px;
	width:480px;
	background:var(--app-main-cr-c);
  }
  
  @media screen and (max-width:650px){
	button.mainBig,.buttonBox a.mainBig{
	  width:85%;
	}
  }
  @media screen and (max-width:540px){
	button.mainBig,.buttonBox a.mainBig{
	  width:90%;
	}
}
  
/* アイコンボタン */
.icon-Work{

}

/* フェイスブックアイコン */
.buttonBox a.fb{
  width:100%;
  position:relative;
  border:1px solid var(--form-brd);
  background:none;
  color: var(--app-glnv-txt);
}
.buttonBox a.fb:before{
  position:absolute;
  content:'';
  background:url(../../../../images/sys/f_logo_blue.png)no-repeat;
  background-size:contain;
  width:30px;
  height:30px;
  top:50%;
  left:16px;
  transform:translateY(-50%);
}
.snsloginBox .buttonBox a:hover{
transform: scale(0.99);
    box-shadow: none;
    transition: 0.2s ease;
}
.snsrewregBox h2{
  text-align: center;
margin:0;
}
.snsrewregBox .buttonBox a.fb{
  border:none;
  background:#1877F2;
  color:#fff;
  width:360px;
}
.snsrewregBox .buttonBox a.fb:before{
  background:url(../../../../images/sys/f_logo_white.png)no-repeat;
  background-size:contain;
}
@media screen and (max-width:540px){
.inputBox.snsrewregBox{
padding: 16px 24px 16px;
}
.snsrewregBox .buttonBox a.fb{
  width:100%;
}
.snsrewregBox h2{
font-size:16px;
}
}
/****************** フォームボタン ******************/

/* 確認ボタン */
button.check{
  background:var(--app-main-c-txt);
}

/* 完了ボタン */
button.save{
  background:var(--app-main-cr-c);
  margin:0 4px;
}

/* 戻るボタン */
button.back{
  background:var(--app-btn-back, #58BFFD);
  margin:16px 4px 0px;
}
@media screen and (max-width:1200px){
button.back{width:45%;}
button.save{width:45%;}
}
/***************************************************
画像
***************************************************/
img{ display:block; width:100%;}


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

/****** アラート系共通 ******/
/* 背景黄色注意書き部分 */
.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,
.errBox {
	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;
}

.ord_art_reg {
	margin: 10px auto;
	padding: 15px;
	background: #f3f3f3;
	border-radius: 3px;
}
/* 空きに余裕あり */
.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;
}

@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;}

	.CautTxt,
	.CautTxtW {padding: 10px;}

}

/*** アイコン ***/
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;display:inline-block;}
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.BgPnc {background:#ff5757;color:#fff;}
span.BgBlu {background:#31a6dc;color:#fff;}


/***************************************************
ヘッダー
***************************************************/

/* マイページ */
header.mypage{
  position:fixed;
  top:0;
  width:100vw;
  z-index: 9;
}
.contents form,.mypage form,.account form{
  padding-top:50px;
}


/***************************************************
サブヘッダー
***************************************************/
.headerSub h1{
  font-size:22px;
  font-weight:normal;
  text-align: center;
  color:var(--app-basic-txt);
}
@media screen and (max-width:767px){
  .headerSub h1{
    font-size:18px;
  }
}

/* サブタイトル */
.headerSub__title{
	padding:16px;
	color:#666666;
  }
  .headerSub__title h1{
	font-weight:normal;
  }
  @media screen and (max-width:540px){
  
	.headerSub__title{
	  padding:12px 16px;
	}
  }