@charset "utf-8";
/***************************************************
information
  filename : users_parts.css;
***************************************************/

/******* ログイン・新規会員登録・リマインダーパーツ設定 *******/

/* ** login_box start ** */
/*** ログインエリア(基本) ***/
:root {
/* サイズ基本設定（ログイン画面） */
  --LoginArea-size: var(--size-LoginArea); /* サイズ */
  --LoginBox-size: var(--size-LoginBox); /* サイズ */
  --LoginBox-rod: var(--rod-box); /* 角丸 */
  --LoginBox-brd: var(--color-brd-authBox); /* ボーダー指定（外枠） */
  --LoginBox-sd: var(--color-sd-authBox); /* 影指定（外枠） */
  --LoginBox-brd-inn: var(--color-brd-authBox-inside); /* ボーダー指定（内枠） */

  --LoginBox-txt: var(--custom-text-authBox); /* テキスト色 */
  --LoginBox-bg: var(--custom-bg-authBox); /* 背景色（外枠） */
  --LoginBox-bg-inn: var(--custom-bg-authBox-inn); /* 背景色（内枠） */

  --LoginTi-txt: var(--color-text-mainti); /* テキスト色 */
  --LoginTi-bg: var(--color-bg-mainti); /* 背景色 */
  --LoginTi-brd-top: var(--color-brd-mainti-top); /* ボーダー指定(上) */
  --LoginTi-brd-bottom: var(--color-brd-mainti-bottom); /* ボーダー指定(下) */
}
/* タイトル 
 ※各種サイトとしてのカテゴリタイトルになります */
.LoginTi {
	margin: 0 auto;
	padding: var(--pd-cate-title);
	text-align: center;
	background: var(--LoginTi-bg);
	border-top: var(--LoginTi-brd-top);
	border-bottom: var(--LoginTi-brd-bottom);
}
.LoginTiDet {font-size: var(--font-cate-title);font-weight: var(--fw-ui);}

/* 基本枠 */
.LoginArea {width: var(--LoginArea-size);margin: 0 auto;}
.LoginBox {
	width: var(--LoginBox-size);
	margin: 1.0rem auto;
	color: var(--custom-text-authBox);
}
.LoginBoxInn {margin: 0 auto;}
.LoginBox,
.LoginBoxInn {border-radius: var(--LoginBox-rod);}
.loginDt {
	font-size: var(--font-heading);
	font-weight: var(--fw-base);
}
/* 枠あり・背景なし・シンプルボタン。 */
.authFrame .LoginBox {
	padding: 1.5rem 1.5rem;
	border: var(--LoginBox-brd);
	box-shadow: var(--LoginBox-sd);
}
.authFrame .LoginBoxInn {
	padding: 1.0rem 1.0rem;
	border: var(--LoginBox-brd-inn);
}
.authPlain .LoginBox,
.authPlain .LoginBoxInn {padding: 1.0rem 0;}

.authBoxBgN.LoginBox,
.authBoxBgN .LoginBoxInn {background: inherit;}
.authBoxBgO.LoginBox {background: var(--LoginBox-bg);}
.authBoxBgO .LoginBoxInn {background: var(--LoginBox-bg-inn);}

/*** ボタン指定 ***/

/* ログインボタン */
.BtM .LoginBt {
	margin: 1.0rem auto;
	padding: 1.5rem;
	width: 100%;
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-rod);; /* 角丸 */
}
.authBtSimple.BtM .LoginBt {
	color: var(--color-text-bt-login);
	background: var(--color-bg-bt-login);
	border: var(--color-brd-bt-login);
	box-shadow: var(--color-sd-bt-login);
}
.authBtSimple.BtM button.LoginBt.next::after,
.authBtSimple.BtM a.LoginBt.next::after,
.authBtSimple.BtM span.LoginBt.next::after,
.authBtSimple.BtM button.LoginBt.back::after,
.authBtSimple.BtM a.LoginBt.back::after,
.authBtSimple.BtM back.LoginBt.next::after {border-left-color: var(--color-text-bt-login);}/* 矢印 */

.authBtColor.BtM .LoginBt {
	color: var(--color-text-bt-login-cl);
	background: var(--color-bg-bt-login-cl);
	border: var(--color-brd-bt-login-cl);
	box-shadow: var(--color-sd-bt-login-cl);
}
.authBtColor.BtM button.LoginBt.next::after,
.authBtColor.BtM a.LoginBt.next::after,
.authBtColor.BtM span.LoginBt.next::after,
.authBtColor.BtM button.LoginBt.back::after,
.authBtColor.BtM a.LoginBt.back::after,
.authBtColor.BtM back.LoginBt.next::after {border-left-color: var(--color-text-bt-login-cl);}/* 矢印 */

/* パスワード忘れページへの遷移ボタン */
.BtM .reminderBt {
	margin: 2.0rem auto;
	padding: 0.5rem;
	width: 90%;
	font-size: var(--font-button);
	font-weight: var(--fw-base);
	border-radius: var(--BtM-rod);; /* 角丸 */
}
.authBtSimple.BtM .reminderBt {
	color: var(--color-text-bt-reminder);
	background: var(--color-bg-bt-reminder);
	border: var(--color-brd-bt-reminder);
	box-shadow: var(--color-sd-bt-reminder);
}
.authBtSimple.BtM button.reminderBt.next::after,
.authBtSimple.BtM a.reminderBt.next::after,
.authBtSimple.BtM span.reminderBt.next::after,
.authBtSimple.BtM button.reminderBt.back::after,
.authBtSimple.BtM a.reminderBt.back::after,
.authBtSimple.BtM back.reminderBt.next::after {border-left-color: var(--color-text-bt-reminder);}/* 矢印 */

.authBtColor.BtM .reminderBt {
	color: var(--color-text-bt-reminder-cl);
	background: var(--color-bg-bt-reminder-cl);
	border: var(--color-brd-bt-reminder-cl);
	box-shadow: var(--color-sd-bt-reminder-cl);
}
.authBtColor.BtM button.reminderBt.next::after,
.authBtColor.BtM a.reminderBt.next::after,
.authBtColor.BtM span.reminderBt.next::after,
.authBtColor.BtM button.reminderBt.back::after,
.authBtColor.BtM a.reminderBt.back::after,
.authBtColor.BtM back.reminderBt.next::after {border-left-color: var(--color-text-bt-reminder-cl);}/* 矢印 */

/* 新規会員登録ボタン(ログインページ用) */
.BtM .newmemBt {
	margin: 2.0rem auto;
	padding: 2.5rem 1.0rem;
	width: 100%;
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-rod);; /* 角丸 */
}
.authBtSimple.BtM .newmemBt {
	color: var(--color-text-bt-newmem);
	background: var(--color-bg-bt-newmem);
	border: var(--color-brd-bt-newmem);
	box-shadow: var(--color-sd-bt-newmem);
}
.authBtSimple.BtM button.newmemBt.next::after,
.authBtSimple.BtM a.newmemBt.next::after,
.authBtSimple.BtM span.newmemBt.next::after,
.authBtSimple.BtM button.newmemBt.back::after,
.authBtSimple.BtM a.newmemBt.back::after,
.authBtSimple.BtM back.newmemBt.next::after {border-left-color: var(--color-text-bt-newmem);}/* 矢印 */

.authBtColor.BtM .newmemBt {
	color: var(--color-text-bt-newmem-cl);
	background: var(--color-bg-bt-newmem-cl);
	border: var(--color-brd-bt-newmem-cl);
	box-shadow: var(--color-sd-bt-newmem-cl);
}
.authBtColor.BtM button.newmemBt.next::after,
.authBtColor.BtM a.newmemBt.next::after,
.authBtColor.BtM span.newmemBt.next::after,
.authBtColor.BtM button.newmemBt.back::after,
.authBtColor.BtM a.newmemBt.back::after,
.authBtColor.BtM back.newmemBt.next::after {border-left-color: var(--color-text-bt-newmem-cl);}/* 矢印 */

/* ** login_box end ** */

/* ** reminder_box start ** */
/*** リマインダーエリア(基本) ***/
:root {
/* サイズ基本設定（リマインダー画面） */
  --ReminderArea-size: var(--size-ReminderArea); /* サイズ */
  --ReminderBox-size: var(--size-ReminderBox); /* サイズ */
  --ReminderBox-rod: var(--rod-box); /* 角丸 */
  --ReminderBox-brd: var(--color-brd-authBox); /* ボーダー指定（外枠） */
  --ReminderBox-sd: var(--color-sd-authBox); /* 影指定（外枠） */
  --ReminderBox-brd-inn: var(--color-brd-authBox-inside); /* ボーダー指定（内枠） */

  --ReminderBox-txt: var(--custom-text-authBox); /* テキスト色 */
  --ReminderBox-bg: var(--custom-bg-authBox); /* 背景色（外枠） */
  --ReminderBox-bg-inn: var(--custom-bg-authBox-inn); /* 背景色（内枠） */

  --ReminderTi-txt: var(--color-text-mainti); /* テキスト色 */
  --ReminderTi-bg: var(--color-bg-mainti); /* 背景色 */
  --ReminderTi-brd-top: var(--color-brd-mainti-top); /* ボーダー指定(上) */
  --ReminderTi-brd-bottom: var(--color-brd-mainti-bottom); /* ボーダー指定(下) */
}
/* タイトル 
 ※各種サイトとしてのカテゴリタイトルになります */
.ReminderTi {
	margin: 0 auto;
	padding: var(--pd-cate-title);
	text-align: center;
	background: var(--ReminderTi-bg);
	border-top: var(--ReminderTi-brd-top);
	border-bottom: var(--ReminderTi-brd-bottom);
}
.ReminderTiDet {font-size: var(--font-cate-title);font-weight: var(--fw-ui);}

/* 基本枠 */
.ReminderArea {width: var(--ReminderArea-size);margin: 0 auto;}
.ReminderBox {
	margin: 1.0rem auto;
	width: var(--ReminderBox-size);
	color: var(--custom-text-authBox);
}
.ReminderBoxInn {margin: 0 auto;}
.ReminderBox,
.ReminderBoxInn {border-radius: var(--ReminderBox-rod);}
.ReminderDt {
	font-size: var(--font-heading);
	font-weight: var(--fw-base);
}
/* 枠あり・背景なし・シンプルボタン。 */
.authFrame .ReminderBox {
	padding: 1.5rem 1.5rem;
	border: var(--ReminderBox-brd);
	box-shadow: var(--ReminderBox-sd);
}
.authFrame .ReminderBoxInn {
	padding: 1.0rem 1.0rem;
	border: var(--ReminderBox-brd-inn);
}
.authPlain .ReminderBox,
.authPlain .ReminderBoxInn {padding: 1.0rem 0;}

.authBoxBgN.ReminderBox,
.authBoxBgN .ReminderBoxInn {background: inherit;}
.authBoxBgO.ReminderBox {background: var(--ReminderBox-bg);}
.authBoxBgO .ReminderBoxInn {background: var(--ReminderBox-bg-inn);}

/* パスワード問い合わせボタン */
.remCtBt {
	margin: 1.5em auto;
	padding: 1.0em;
	width: 100%;
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-sub-rod);; /* 角丸サブ */
}
.authBtSimple.BtM .remCtBt {
	color: var(--color-text-bt-remCt);
	background: var(--color-bg-bt-remCt);
	border: var(--color-brd-bt-remCt);
	box-shadow: var(--color-sd-bt-remCt);
}
.authBtSimple.BtM button.remCtBt.next::after,
.authBtSimple.BtM a.remCtBt.next::after,
.authBtSimple.BtM span.remCtBt.next::after,
.authBtSimple.BtM button.remCtBt.back::after,
.authBtSimple.BtM a.remCtBt.back::after,
.authBtSimple.BtM back.remCtBt.next::after {border-left-color: var(--color-text-bt-remCt);}/* テキスト色 */

.authBtColor.BtM .remCtBt {
	color: var(--color-text-bt-remCt-cl);
	background: var(--color-bg-bt-remCt-cl);
	border: var(--color-brd-bt-remCt-cl);
	box-shadow: var(--color-sd-bt-remCt-cl);
}
.authBtColor.BtM button.remCtBt.next::after,
.authBtColor.BtM a.remCtBt.next::after,
.authBtColor.BtM button.remCtBt.back::after,
.authBtColor.BtM span.remCtBt.next::after,
.authBtColor.BtM a.remCtBt.back::after,
.authBtColor.BtM back.remCtBt.next::after {border-left-color: var(--color-text-bt-remCt-cl);}/* テキスト色 */

/* ** reminder_box end ** */

/* ** newreg_box start ** */

/*** 新規会員登録エリア(基本) ***/
:root {
/* サイズ基本設定（ログイン画面） */
  --NewregArea-size: var(--size-NewregArea); /* サイズ */
  --NewregBox-size: var(--size-NewregBox); /* サイズ */
  --NewregBox-rod: var(--rod-box); /* 角丸 */
  --NewregBox-brd: var(--color-brd-authBox); /* ボーダー指定（外枠） */
  --NewregBox-sd: var(--color-sd-authBox); /* 影指定（外枠） */
  --NewregBox-brd-inn: var(--color-brd-authBox-inside); /* ボーダー指定（内枠） */

  --NewregBox-txt: var(--custom-text-authBox); /* テキスト色 */
  --NewregBox-bg: var(--custom-bg-authBox); /* 背景色（外枠） */
  --NewregBox-bg-inn: var(--custom-bg-authBox-inn); /* 背景色（内枠） */

  --NewregTi-txt: var(--color-text-mainti); /* テキスト色 */
  --NewregTi-bg: var(--color-bg-mainti); /* 背景色 */
  --NewregTi-brd-top: var(--color-brd-mainti-top); /* ボーダー指定(上) */
  --NewregTi-brd-bottom: var(--color-brd-mainti-bottom); /* ボーダー指定(下) */
}
/* タイトル 
 ※各種サイトとしてのカテゴリタイトルになります */
.NewregTi {
	margin: 0 auto;
	padding: var(--pd-cate-title);
	text-align: center;
	background: var(--LoginTi-bg);
	border-top: var(--LoginTi-brd-top);
	border-bottom: var(--LoginTi-brd-bottom);
}
.NewregTiDet {font-size: var(--font-cate-title);font-weight: var(--fw-ui);}

/* 基本枠 */
.NewregArea {width: var(--NewregArea-size);margin: 0 auto;}
.NewregBox {
	width: var(--NewregBox-size);
	margin: 1.0rem auto;
	color: var(--custom-text-authBox);
}
.NewregBoxInn {margin: 0 auto;}
.NewregBox,
.NewregBoxInn {border-radius: var(--NewregBox-rod);}
.NewregDt {
	font-size: var(--font-heading);
	font-weight: var(--fw-base);
}
/* 枠あり・背景なし・シンプルボタン。 */
.authFrame .NewregBox {
	padding: 1.5rem 1.5rem;
	border: var(--NewregBox-brd);
	box-shadow: var(--NewregBox-sd);
}
.authFrame .NewregBoxInn {
	padding: 1.0rem 1.0rem;
	border: var(--NewregBox-brd-inn);
}
.authPlain .NewregBox,
.authPlain .NewregBoxInn {padding: 1.0rem 0;}

.authBoxBgN.NewregBox,
.authBoxBgN .NewregBoxInn {background: inherit;}
.authBoxBgO.NewregBox {background: var(--NewregBox-bg);}
.authBoxBgO .NewregBoxInn {background: var(--NewregBox-bg-inn);}

/*** ボタン指定 ***/

/* ログインボタン */
.BtM .newRegBt {
	margin: 1.0rem auto;
	padding: 2.0rem 1.0rem;
	width: var(--size-NewregBt);
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-rod);; /* 角丸 */
}
.authBtSimple.BtM .newRegBt {
	color: var(--color-text-bt-newReg);
	background: var(--color-bg-bt-newReg);
	border: var(--color-brd-bt-newReg);
	box-shadow: var(--color-sd-bt-newReg);
}
.authBtSimple.BtM button.newRegBt.next::after,
.authBtSimple.BtM a.newRegBt.next::after,
.authBtSimple.BtM span.newRegBt.next::after,
.authBtSimple.BtM button.newRegBt.back::after,
.authBtSimple.BtM a.newRegBt.back::after,
.authBtSimple.BtM back.newRegBt.next::after {border-left-color: var(--color-text-bt-newReg);}/* 矢印 */

.authBtColor.BtM .newRegBt {
	color: var(--color-text-bt-newReg-cl);
	background: var(--color-bg-bt-newReg-cl);
	border: var(--color-brd-bt-newReg-cl);
	box-shadow: var(--color-sd-bt-newReg-cl);
}
.authBtColor.BtM button.newRegBt.next::after,
.authBtColor.BtM a.newRegBt.next::after,
.authBtColor.BtM span.newRegBt.next::after,
.authBtColor.BtM button.newRegBt.back::after,
.authBtColor.BtM a.newRegBt.back::after,
.authBtColor.BtM back.newRegBt.next::after {border-left-color: var(--color-text-bt-newReg-cl);}/* 矢印 */

/*** 会員番号・仮パスワード等システム情報表示 ******/
:root {
/* サイズ基本設定（ログイン画面） */
  --ThkSysArea-size: var(--size-NewregArea); /* サイズ */
  --ThkSysBox-size: var(--size-NewregBox); /* サイズ */
  --ThkSysBox-rod: var(--rod-box); /* 角丸 */
  --ThkSysBox-brd: var(--color-brd-authBox); /* ボーダー指定（外枠） */
  --VBox-sd: var(--color-sd-authBox); /* 影指定（外枠） */
  --ThkSysBox-brd-inn: var(--color-brd-authBox-inside); /* ボーダー指定（内枠） */

  --ThkSysBox-txt: var(--custom-text-authBox); /* テキスト色 */
  --ThkSysBox-bg: var(--custom-bg-authBox); /* 背景色（外枠） */
  --ThkSysBox-bg-inn: var(--custom-bg-authBox-inn); /* 背景色（内枠） */
}
/* 基本枠 */
.ThkSysArea {width: var(--ThkSysArea-size);margin: 0 auto;}
.ThkSysBox {
	width: var(--ThkSysBox-size);
	margin: 1.0rem auto;
	color: var(--custom-text-authBox);
}
.ThkSysBoxInn {margin: 0 auto;}
.ThkSysBox,
.ThkSysBoxInn {border-radius: var(--ThkSysBox-rod);}
.ThkSysDt {
	font-size: var(--font-heading);
	font-weight: var(--fw-base);
}
/* 枠あり・背景なし・シンプルボタン。 */
.authFrame .ThkSysBox {
	padding: 1.5rem 1.5rem;
	border: var(--ThkSysBox-brd);
	box-shadow: var(--ThkSysBox-sd);
}
.authFrame .ThkSysBoxInn {
	padding: 1.0rem 1.0rem;
	border: var(--ThkSysBox-brd-inn);
}
.authPlain .ThkSysBox,
.authPlain .ThkSysBoxInn {padding: 1.0rem 0;}

.authBoxBgN.ThkSysBox,
.authBoxBgN .ThkSysBoxInn {background: inherit;}
.authBoxBgO.ThkSysBox {background: var(--ThkSysBox-bg);}
.authBoxBgO .ThkSysBoxInn {background: var(--ThkSysBox-bg-inn);}

/* タイトル指定 */
.ThkSysIdTi,
.ThkSysPassTi {
	padding: 0.5rem 0;
	text-align: center;
	font-size: var(--font-heading);
	font-weight: var(--fw-base);
}
:root {
/* サイズ基本設定（ログイン画面） */
  --ThkSysBox-id-pass-brd: var(--color-brd-authBox-SysBox); /* ボーダー指定（外枠） */
  --ThkSysBox-id-pass-txt: var(--color-text-authBox-SysBox); /* テキスト色 */
  --ThkSysBox-id-pass-bg: var(--color-bg-authBox-SysBox); /* 背景色（外枠） */
}
/* 会員番号情報表示 仮パスワード情報表示 */
.ThkSysId,
.ThkSysPass {
	font-size: var(--font-heading-lg);
	font-weight: var(--fw-ui);
	text-align: center;
	color: var(--ThkSysBox-id-pass-txt);
	border: var(--ThkSysBox-id-pass-brd);
	background: var(--ThkSysBox-id-pass-bg);
	border-radius: var(--ThkSysBox-rod);
}
.ThkSysCap {padding: 1.0rem;text-align: center;font-size: var(--font-label);}/* 注意書き */

/* トップページへ進むボタン */
.LoginTopBt {
	margin: 1.5em auto;
	padding: 1.0em;
	width: var(--size-LoginAftBt);
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-sub-rod);; /* 角丸サブ */
}
.authBtSimple.BtM .LoginTopBt {
	color: var(--color-text-bt-LoginTop);
	background: var(--color-bg-bt-LoginTop);
	border: var(--color-brd-bt-LoginTop);
	box-shadow: var(--color-sd-bt-LoginTop);
}
.authBtSimple.BtM button.LoginTopBt.next::after,
.authBtSimple.BtM a.LoginTopBt.next::after,
.authBtSimple.BtM span.LoginTopBt.next::after,
.authBtSimple.BtM button.LoginTopBt.back::after,
.authBtSimple.BtM a.LoginTopBt.back::after,
.authBtSimple.BtM back.LoginTopBt.next::after {border-left-color: var(--color-text-bt-LoginTop);}/* テキスト色 */

.authBtColor.BtM .LoginTopBt {
	color: var(--color-text-bt-LoginTop-cl);
	background: var(--color-bg-bt-LoginTop-cl);
	border: var(--color-brd-bt-LoginTop-cl);
	box-shadow: var(--color-sd-bt-LoginTop-cl);
}
.authBtColor.BtM button.LoginTopBt.next::after,
.authBtColor.BtM a.LoginTopBt.next::after,
.authBtColor.BtM button.LoginTopBt.back::after,
.authBtColor.BtM span.LoginTopBt.next::after,
.authBtColor.BtM a.LoginTopBt.back::after,
.authBtColor.BtM back.LoginTopBt.next::after {border-left-color: var(--color-text-bt-LoginTop-cl);}/* テキスト色 */

/* マイページへ進むボタン */
.LoginMypBt {
	margin: 1.5em auto;
	padding: 1.0em;
	width: var(--size-LoginAftBt);
	font-size: var(--font-button-lg);
	font-weight: var(--fw-bt);
	border-radius: var(--BtM-sub-rod);; /* 角丸サブ */
}
.authBtSimple.BtM .LoginMypBt {
	color: var(--color-text-bt-LoginMypBt);
	background: var(--color-bg-bt-LoginMypBt);
	border: var(--color-brd-bt-LoginMypBt);
	box-shadow: var(--color-sd-bt-LoginMypBt);
}
.authBtSimple.BtM button.LoginMypBt.next::after,
.authBtSimple.BtM a.LoginMypBt.next::after,
.authBtSimple.BtM span.LoginMypBt.next::after,
.authBtSimple.BtM button.LoginMypBt.back::after,
.authBtSimple.BtM a.LoginMypBt.back::after,
.authBtSimple.BtM back.LoginMypBt.next::after {border-left-color: var(--color-text-bt-LoginMypBt);}/* テキスト色 */

.authBtColor.BtM .LoginMypBt {
	color: var(--color-text-bt-LoginMypBt-cl);
	background: var(--color-bg-bt-LoginMypBt-cl);
	border: var(--color-brd-bt-LoginMypBt-cl);
	box-shadow: var(--color-sd-bt-LoginMypBt-cl);
}
.authBtColor.BtM button.LoginMypBt.next::after,
.authBtColor.BtM a.LoginMypBt.next::after,
.authBtColor.BtM button.LoginMypBt.back::after,
.authBtColor.BtM span.LoginMypBt.next::after,
.authBtColor.BtM a.LoginMypBt.back::after,
.authBtColor.BtM back.LoginMypBt.next::after {border-left-color: var(--color-text-bt-LoginMypBt-cl);}/* テキスト色 */

/* ** newreg_box end ** */