html {
  /* スマホでの勝手なフォント拡大を抑制 */
  /*横向きや colspan セルなどの崩れ対策にも有効 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
body { color: #000; background-color: white; line-height:1.4; font-family:Osaka-mono, Osaka-等幅, "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
font-size:0.9em; margin: 0;
padding: 0; }
*/
body {
  color: #000; background-color: white; line-height:1.4; font-family:"noto sans jp", Osaka-mono, Osaka-等幅, "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  font-size:0.9em; margin: 0;
  padding: 0;

  /* スマホでの勝手なフォント拡大を抑制 */
  /*横向きや colspan セルなどの崩れ対策にも有効 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* モバイルファースト方式 */
/* スマホ（縦）想定 */
.tbl_login {
  width: 360px;
  border-color: red;
}
.scrBd { overflow: auto;
  width: 300px; background-color: #fff; border:#000000 solid 1px;
}


/* スマホ（縦）～スマホ（横）想定 */
@media screen and (min-width: 480px) {
  .tbl_login {
    width: 460px;
    border-color: green;
  }
  .scrBd { overflow: auto;
    width: 400px; background-color: #fff; border:#000000 solid 1px;
  }
}


/* スマホ（横）～タブレット想定 */
@media screen and (min-width: 600px) {
  .tbl_login {
    width: 580px;
    border-color: blue;
  }
  .scrBd { overflow: auto;
    width: 520px; background-color: #fff; border:#000000 solid 1px;
  }
}


/* タブレット～ノートＰＣ想定 */

@media screen and (min-width: 960px) {
  .tbl_login {
    width: 940px;
  }
}


/* ノートＰＣ～デスクトップＰＣ想定 */
/*
@media screen and (min-width: 1280px) {
  .tbl_login {
    width: 1260px;
  }
}
*/




.tbl_login_v2 {
/*  width: 90%; */
  width: 94%;
/*  max-width: 580px; */
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid #000;
  box-sizing: border-box;
}

.scrBd_v2 {
  overflow: auto;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
  background-color: #fff;
  border: #000 solid 1px;
  box-sizing: border-box;
}




/* Edge のパスワード可視化アイコンを非表示にする（ChromeやFirefoxではこのアイコンは元々表示されない） */
input[type="password"]::-ms-reveal {
  display: none;
}




/* スクロール表示 */ 
.scr200_300Bd { overflow: auto;
  width: 300px; height: 200px; background-color: #fff; border:#000000 solid 1px;}


.scrBd_100per { overflow: auto;
  width: 100%; background-color: #fff; border:#000000 solid 1px;}


.scrBd_99per { overflow: auto;
  width: 99%; background-color: #fff; border:#000000 solid 1px;}



/* 折り返しさせない */
.no-wrap-scroll {
    white-space: nowrap;
    overflow: auto;
}





.maintitle{
  display:block;
  font-size:48px;
  line-height:48px;
  letter-spacing:-4px;
  text-shadow:3px 3px 6px #888;

  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}


.maintitle_s{
  display:block;
  font-size:24px;
  line-height:24px;
  letter-spacing:-2px;
  text-shadow:1px 1px 3px #888;

  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}

.maintitle_ss{
  display:block;
  font-size:12px;
  line-height:12px;
  letter-spacing:-2px;
  text-shadow:1px 1px 3px #888;

  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}


.description{
  display:block;
  font-size:24px;
  line-height:10px;
  letter-spacing:1px;
  text-shadow:1px 1px 5px #fff, 5px 5px 10px #888;

  text-align:center;
}

.description_s{
  display:block;
  font-size:12px;
  line-height:10px;
  letter-spacing:1px;
  text-shadow:1px 1px 3px #fff, 3px 3px 5px #888;

  text-align:center;
}



/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


.required:before {
content: " *";
font-size: 14pt;
color: #FF3399;
}

.required_s:before {
content: " *";
font-size: 10pt;
color: #FF3399;
}


.required_af:after {
content: "*";
font-size: 14pt;
color: #FF3399;
}

.required_af_s:after {
content: "*";
font-size: 10pt;
color: #FF3399;
}



h1{
  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}
h2{
  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}
h3{
  font-family: 'Vidaloka', serif;
  text-align:center;
  font-weight:normal;
  color:#444;
}



.margin1 {
     margin-top:12px;
}

.margin1_s {
     margin-top:6px;
}

.margin1_l {
     margin-top:24px;
}

.margin1_l2 {
     margin-top:36px;
}

.margin2 {
     margin-left:12px;
}



.span_margin1 {
     display: inline-block;
     margin-top:12px;
}


.font_sz8 { font-size: 8px; }

.font_sz8_red { font-size: 8px; color: #ff0000; }
.font_sz8_orange { font-size: 8px; color: #ff7f00; }
.font_sz8_yellow { font-size: 8px; color: #ffff00; }
.font_sz8_yellowgreen { font-size: 8px; color: #7fff00; }
.font_sz8_green { font-size: 8px; color: #00ff00; }
.font_sz8_springgreen { font-size: 8px; color: #00ff7f; }
.font_sz8_cyan { font-size: 8px; color: #00ffff; }
.font_sz8_cyanblue { font-size: 8px; color: #007fff; }
.font_sz8_blue { font-size: 8px; color: #0000ff; }
.font_sz8_purple { font-size: 8px; color: #7f00ff; }
.font_sz8_pink { font-size: 8px; color: #ff00ff; }
.font_sz8_pinkred { font-size: 8px; color: #ff007f; }

.font_sz8_silver { font-size: 8px; color: #c0c0c0; }
.font_sz8_gray { font-size: 8px; color: #808080; }
.font_sz8_midblue { font-size: 8px; color: #0080ff; }
.font_sz8_brown { font-size: 8px; color: #990000; }
.font_sz8_violet { font-size: 8px; color: #6666cc; }
.font_sz8_bright_yellow { font-size: 8px; color: #ff9900; }
.font_sz8_midgreen { font-size: 8px; color: #00cc00; }

.font_sz8_white { font-size: 8px; color: #ffffff; }


.font_sz10 { font-size: 10px; }

.font_sz10_red { font-size: 10px; color: #ff0000; }
.font_sz10_orange { font-size: 10px; color: #ff7f00; }
.font_sz10_yellow { font-size: 10px; color: #ffff00; }
.font_sz10_yellowgreen { font-size: 10px; color: #7fff00; }
.font_sz10_green { font-size: 10px; color: #00ff00; }
.font_sz10_springgreen { font-size: 10px; color: #00ff7f; }
.font_sz10_cyan { font-size: 10px; color: #00ffff; }
.font_sz10_cyanblue { font-size: 10px; color: #007fff; }
.font_sz10_blue { font-size: 10px; color: #0000ff; }
.font_sz10_purple { font-size: 10px; color: #7f00ff; }
.font_sz10_pink { font-size: 10px; color: #ff00ff; }
.font_sz10_pinkred { font-size: 10px; color: #ff007f; }

.font_sz10_silver { font-size: 10px; color: #c0c0c0; }
.font_sz10_gray { font-size: 10px; color: #808080; }
.font_sz10_midblue { font-size: 10px; color: #0080ff; }
.font_sz10_brown { font-size: 10px; color: #cc0000; }
.font_sz10_violet { font-size: 10px; color: #6666cc; }
.font_sz10_bright_yellow { font-size: 10px; color: #ff9900; }
.font_sz10_midgreen { font-size: 10px; color: #00cc00; }

.font_sz10_white { font-size: 10px; color: #ffffff; }


.font_sz11 { font-size: 11px; }
.font_sz11_white { font-size: 11px; color: #ffffff; }


.font_sz12 { font-size: 12px; }
.font_sz12_B { font-size: 12px; font-weight: bold;}

.font_sz12_red_B { color: #ff0000; font-size: 12px; font-weight: bold; }
.font_sz12_orange_B { color: #ff7f00; font-size: 12px; font-weight: bold; }

.font_sz12_red { font-size: 12px; color: #ff0000; }
.font_sz12_orange { font-size: 12px; color: #ff7f00; }
.font_sz12_yellow { font-size: 12px; color: #ffff00; }
.font_sz12_yellowgreen { font-size: 12px; color: #7fff00; }
.font_sz12_green { font-size: 12px; color: #00ff00; }
.font_sz12_springgreen { font-size: 12px; color: #00ff7f; }
.font_sz12_cyan { font-size: 12px; color: #00ffff; }
.font_sz12_cyanblue { font-size: 12px; color: #007fff; }
.font_sz12_blue { font-size: 12px; color: #0000ff; }
.font_sz12_purple { font-size: 12px; color: #7f00ff; }
.font_sz12_pink { font-size: 12px; color: #ff00ff; }
.font_sz12_pinkred { font-size: 12px; color: #ff007f; }

.font_sz12_silver { font-size: 12px; color: #c0c0c0; }
.font_sz12_gray { font-size: 12px; color: #808080; }
.font_sz12_midblue { font-size: 12px; color: #0080ff; }
.font_sz12_brown { font-size: 12px; color: #cc0000; }
.font_sz12_violet { font-size: 12px; color: #6666cc; }
.font_sz12_bright_yellow { font-size: 12px; color: #ff9900; }
.font_sz12_midgreen { font-size: 12px; color: #00cc00; }

.font_sz12_white { font-size: 12px; color: #ffffff; }


.font_sz14 { font-size: 14px; }
.font_sz14_B { font-size: 14px; font-weight: bold;}

.font_sz14_red { font-size: 14px; color: #ff0000; }
.font_sz14_orange { font-size: 14px; color: #ff7f00; }
.font_sz14_yellow { font-size: 14px; color: #ffff00; }
.font_sz14_yellowgreen { font-size: 14px; color: #7fff00; }
.font_sz14_green { font-size: 14px; color: #00ff00; }
.font_sz14_springgreen { font-size: 14px; color: #00ff7f; }
.font_sz14_cyan { font-size: 14px; color: #00ffff; }
.font_sz14_cyanblue { font-size: 14px; color: #007fff; }
.font_sz14_blue { font-size: 14px; color: #0000ff; }
.font_sz14_purple { font-size: 14px; color: #7f00ff; }
.font_sz14_pink { font-size: 14px; color: #ff00ff; }
.font_sz14_pinkred { font-size: 14px; color: #ff007f; }

.font_sz14_silver { font-size: 14px; color: #c0c0c0; }
.font_sz14_gray { font-size: 14px; color: #808080; }
.font_sz14_midblue { font-size: 14px; color: #0080ff; }
.font_sz14_brown { font-size: 14px; color: #cc0000; }
.font_sz14_violet { font-size: 14px; color: #6666cc; }
.font_sz14_bright_yellow { font-size: 14px; color: #ff9900; }
.font_sz14_midgreen { font-size: 14px; color: #00cc00; }

.font_sz14_white { font-size: 14px; color: #ffffff; }


.font_sz16 { font-size: 16px; }
.font_sz16_B { font-size: 16px; font-weight: bold;}

.font_sz18 { font-size: 18px; }
.font_sz18_B { font-size: 18px; font-weight: bold;}

.font_sz20 { font-size: 20px; }
.font_sz20_B { font-size: 20px; font-weight: bold;}

.font_sz24 { font-size: 24px; }
.font_sz24_B { font-size: 24px; font-weight: bold;}




/* font */
.ft_error{
color: #ff0000;
font-weight: bold;
text-decoration: blink;
}

.ft_ok{
color: #0000ff;
font-weight: bold;
text-decoration: blink;
}

.ft_red{
color: #ff0000;
}

.ft_blue{
color: #0000ff;
}

.ft_cyan{
color: #00ffff;
}

.ft_black{
color: #000000;
}




.bg_white { background-color: #ffffff; }

.bg_light_red { background-color: #ff9999; }
.bg_light_orange { background-color: #ffcc99; }
.bg_light_blue { background-color: #99ccff; }
.bg_light_silver { background-color: #eeeeee; }
.bg_light_midblue { background-color: #66ffff; }
.bg_light_cyan { background-color: #ccffff; }
.bg_light_lime { background-color: #99ff99; }
.bg_light_midgreen { background-color: #ccff99; }



/* テーブルのマウスオーバー時にセル背景色を変更 */
tr.trhover_cyan td.tdhover_cyan:hover {
  background-color: #00FFFF;    /* マウスオーバー時のセルの背景色 */
}



/* 作業順のライン */
.wkseq_hr_nomal {
 height: 2px;
 background-color: #808080;
 width: 50%;
 border: none;
 margin: 1px 0px 1px 0px;
}

.wkseq_hr_red {
 height: 2px;
 background-color: #ff0000;
 width: 50%;
 border: none;
 margin: 1px 0px 1px 0px;
}


.wkseq_hr_nomal_wide {
 height: 2px;
 background-color: #808080;
 width: 90%;
 border: none;
 margin: 1px 0px 1px 0px;
}

.wkseq_hr_red_wide {
 height: 2px;
 background-color: #ff0000;
 width: 90%;
 border: none;
 margin: 1px 0px 1px 0px;
}




/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}



/* チェックボックスラベル上にマウスが来た時ポインタの表示を変更 */
label, input[type='checkbox'] {
    cursor: pointer;
}

/* マウスポインタの形状を「指」にする */
.mouse_pointer {
	cursor:pointer;
}

/* マウスポインタの形状を「パー」にする */
.mouse_grab {
	cursor:grab;
}

/* マウスポインタの形状を「グー」にする */
.mouse_grabbing {
	cursor:grabbing;
}

/* テキストエリアをマウス等でリサイズさせない */
.txtarea_noresize { resize: none; }




a:link { color: blue }

/* 通常時 */
/* a.link2 { text-decoration:underline; color:#0099ff; padding:0 3px; } */
a.link2 { text-decoration:underline; color:#0099ff; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2:visited { color:#0099ff; }
/* マウスが乗った時 */
a.link2:hover { text-decoration:none; color:#fff; background-color:#0099ff; }
/* クリック中 */
a.link2:active { text-decoration:none; color:#fff; background-color:#0000ff; }


/* 通常時（色を赤系） */
a.link2r { text-decoration:underline; color:#ff0000; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2r:visited { color:#ff0000; }
/* マウスが乗った時 */
a.link2r:hover { text-decoration:none; color:#fff; background-color:#ff0000; }
/* クリック中 */
a.link2r:active { text-decoration:none; color:#fff; background-color:#cc0000; }


/* Append_s 24.Dec.2019 M.U. */
/* 通常時（色を橙系） */
a.link2org { text-decoration:underline; color:#ff6600; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2org:visited { color:#ff6600; }
/* マウスが乗った時 */
a.link2org:hover { text-decoration:none; color:#fff; background-color:#ff6600; }
/* クリック中 */
a.link2org:active { text-decoration:none; color:#fff; background-color:#ff0000; }
/* Append_e 24.Dec.2019 M.U. */


/* 通常時（色を緑系） */
a.link2g { text-decoration:underline; color:#00cc66; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2g:visited { color:#00cc66; }
/* マウスが乗った時 */
a.link2g:hover { text-decoration:none; color:#fff; background-color:#00cc66; }
/* クリック中 */
a.link2g:active { text-decoration:none; color:#fff; background-color:#006633; }


/* 通常時（色を黒系） */
a.link2blk { text-decoration:underline; color:#999999; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2blk:visited { color:#999999; }
/* マウスが乗った時 */
a.link2blk:hover { text-decoration:none; color:#fff; background-color:#999999; }
/* クリック中 */
a.link2blk:active { text-decoration:none; color:#fff; background-color:#666666; }


/* 通常時（色を黒系・文字は黒） */
a.link2blk_fntblk { text-decoration:underline; color:#000000; padding:0px 0px 0px 0px; } /* padding上右下左 */
/* 訪問後のリンク */
a.link2blk_fntblk:visited { color:#000000; }
/* マウスが乗った時 */
a.link2blk_fntblk:hover { text-decoration:none; color:#fff; background-color:#999999; }
/* クリック中 */
a.link2blk_fntblk:active { text-decoration:none; color:#fff; background-color:#666666; }


/* 通常時（色を黒系・文字は黒・下線無し） */
a.link2blk_fntblk_nounder { text-decoration:none; color:#000000; padding:0px 0px 0px 0px; } /* padding上右下左 */ /* 下線なし */
/* 訪問後のリンク */
a.link2blk_fntblk_nounder:visited { color:#000000; }
/* マウスが乗った時 */
a.link2blk_fntblk_nounder:hover { text-decoration:none; color:#fff; background-color:#999999; }
/* クリック中 */
a.link2blk_fntblk_nounder:active { text-decoration:none; color:#fff; background-color:#666666; }



/* 通常時 */
a.link3 { text-decoration:underline; color:#000000; padding:0 3px; }
/* 訪問後のリンク */
a.link3:visited { color:#000000; }
/* マウスが乗った時 */
a.link3:hover { text-decoration:none; color:#fff; background-color:#999999; }
/* クリック中 */
a.link3:active { text-decoration:none; color:#fff; background-color:#666666; }



/* Append_s 13.Dec.2019 M.U. */
/* 通常時 */
a.link4 { text-decoration:none; color:#0099ff; padding:0px 0px 0px 0px; } /* padding上右下左 */ /* 下線なし */
/* 訪問後のリンク */
a.link4:visited { color:#0099ff; }
/* マウスが乗った時 */
a.link4:hover { text-decoration:none; color:#fff; background-color:#0099ff; }
/* クリック中 */
a.link4:active { text-decoration:none; color:#fff; background-color:#0000ff; }
/* Append_e 13.Dec.2019 M.U. */



a.link5 { text-decoration:none; color:inherit; padding:0px 0px 0px 0px; } /* padding上右下左 */ /* 下線なし */ /* 文字色は変更しない */
/* 訪問後のリンク */
a.link5:visited { color:inherit; }
/* マウスが乗った時 */
a.link5:hover { text-decoration:none; color:#fff; background-color:#0099ff; }
/* クリック中 */
a.link5:active { text-decoration:none; color:#fff; background-color:#0000ff; }



a.link5_tbl { text-decoration:none; color:inherit; padding:0px 0px 0px 0px; } /* padding上右下左 */ /* 下線なし */ /* 文字色は変更しない */
/* 訪問後のリンク */
/* a.link5_tbl:visited { color:inherit; } */
/* マウスが乗った時 */
/* a.link5_tbl:hover { text-decoration:none; color:inherit; background-color:#0099ff; } */
/* クリック中 */
/* a.link5_tbl:active { text-decoration:none; color:inherit; background-color:#0000ff; } */

/* ↑のlink5_tblのaタグで囲った、その外側のtdで参照してそのtd背景色を変更する目的で使用している */
.hover-cell:hover {
  background-color: #ccffff;  /* ホバー時の背景色 */
}





.select-box01 select {
	width: 70%;
/*	padding: 10px; */
	padding: 3px 2px 3px 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
/*	background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%); */
/*	background: url(arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%); */
	background-size: 20px, 100%;
}


/* IE10、11でプルダウンの矢印ボタンを非表示（それ以前のバージョンでは無効） */
.custom-ie-select::-ms-expand {
    display: none;
}




.btn_inst_s {
	text-decoration: none;
	text-align: center;
	font-size: 10px;
	display: block;
	background: #EEE;
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	color:#111;
	width: 40px;
	padding: 2px 0px;
}

.btn_inst_m {
	text-decoration: none;
	text-align: center;
	font-size: 12px;
	display: block;
	background: #EEE;
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	color:#111;
	width: 80px;
	padding: 2px 0px;
}






.blink {
	-webkit-animation: blink 2s ease infinite;
	animation: blink 2s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}








.axis path,
.axis line {
    shape-rendering: crispEdges;
}

.line_sharp {
    shape-rendering: crispEdges;
}

/* SVGをセンタリング */
.svg_center {
    margin-left:auto; margin-right:auto; display:block;
}



/* 縦書きとなり、行は左から右へ */
.vlr {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  -o-writing-mode: vertical-lr;
  writing-mode: vertical-lr;

  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}




.text_vertical {
    writing-mode: tb-rl;			/* IE */
    /* writing-mode: vertical-rl; */			/* FireFox、chromeで必要 ※ただし次の「white-space: nowrap;」記述がある場合はこの記述がなくてもうまくいく？ */

    white-space: nowrap;			/* chromeで必要 */
    /* text-orientation: upright; */		/* アルファベットを縦表記した時の文字も縦向きにする（IEは効かない） */

   /*  text-anchor: middle; */		/* 横向きと併用の場合は上下方向の中央？ */


  -webkit-text-orientation: upright; /* 実装済 */
  -moz-text-orientation: upright; /* 未実装 */
  -ms-text-orientation: upright; /* 未実装 */
  text-orientation: upright;
}



.radio-plain {
  top: 1px;
  position: relative;
}




@media print{
  .noprint {
    display: none; /* 印刷の場合は非表示とする */
  }
}





/* tableを角丸 */
/* ※行連結がある場合は先頭や最終の判定に難があるので、全て綺麗な角丸にはならない */
.radius-table{
    border-radius: 8px;
    border-spacing: 0;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}
.radius-table tr>*{
    padding: 2px 6px;		/* 上下、左右の余白 */
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
/* 先頭行の先頭列 左上角丸 */
.radius-table tr:first-child>*:first-child{
    border-radius: 8px 0 0 0;
}
/* 先頭行の最終列 右上角丸 */
.radius-table tr:first-child>*:last-child{
    border-radius: 0 8px 0 0;
}

/* 最終行の先頭列 左下角丸 */
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 8px;
}
/* 最終行の最終列 右下角丸 */
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 8px 0;
}

/* 先頭行に１列のみ存在 左上・右上角丸 */
.radius-table tr:first-child>*:only-child{
    border-radius: 8px 8px 0 0;
}

/* 最終行に１列のみ存在 左下・右下角丸 */
.radius-table tr:last-child>*:only-child{
    border-radius: 0 0 8px 8px;
}


/* １行のみの先頭列 左上・左下角丸 */
.radius-table tr:only-child>*:first-child{
    border-radius: 8px 0 0 8px;
}
/* １行のみの最終列 右上・右下角丸 */
.radius-table tr:only-child>*:last-child{
    border-radius: 0 8px 8px 0;
}

/* １行のみで１列のみ存在 全て角丸 */
.radius-table tr:only-child>*:only-child{
    border-radius: 8px 8px 8px 8px;
}






/* --------------------------------------------------
   coder Table
-------------------------------------------------- */
.coder {
    border-spacing: 0;
	
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
         -o-border-radius: 6px;
            border-radius: 6px;
    box-shadow: 0 1px 1px #CCC;	
}
.coder th,
.coder td {
    padding:10px;
    background:#FFF;
    border-bottom:solid 1px #CCC;
    border-right:solid 1px #CCC;
}
.coder th {
    background:#e3dcd5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    color:#69655c;
}

/* -----------------------
  左上角丸　最初の行の最初のセル
----------------------- */
.coder tr:first-child th:first-child,
.coder tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}
/* -----------------------
  右上角丸　最初の行の最後のセル
----------------------- */
.coder tr:first-child th:last-child,
.coder tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}
/* -----------------------
  左下角丸　最後の行の最初のセル
----------------------- */
.coder tr:last-child th:first-child,
.coder tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}
/* -----------------------
  右下角丸　最後の行の最後のセル
----------------------- */
.coder tr:last-child th:last-child,
.coder tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}
/* --------------------------------------------
  thaed,tbodyを使う場合の設定
-------------------------------------------- */
.coder thead th {background:#e3dcd5;}
.coder thead+tbody th {background:#f4ede6;}
.coder tbody th {text-align:left;}/*IE*/
/* -----------------------
  左上角丸 thead内　最初の行の最初のセル
----------------------- */
.coder thead tr:first-child th:first-child,
.coder thead tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}
/* -----------------------
  右上角丸 thead内　最初の行の最後のセル
----------------------- */
.coder thead tr:first-child th:last-child,
.coder thead tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}
/* -----------------------
  角丸なし　thaedの後のtbody 最初の行の最初のセル
  角丸なし　thaedの後のtbody 最初の行の最後のセル
----------------------- */
.coder thead+tbody tr:first-child th:first-child,
.coder thead+tbody tr:first-child td:first-child,
.coder thead+tbody tr:first-child th:last-child,
.coder thead+tbody tr:first-child td:last-child {
    -webkit-border-radius:0px;
       -moz-border-radius:0px;
         -o-border-radius:0px;
            border-radius:0px;
}
/* -----------------------
  左下角丸　thaedの後のtbody 最後の行の最初のセル
----------------------- */
.coder thead+tbody tr:last-child th:first-child,
.coder thead+tbody tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}
/* -----------------------
  右下角丸　thaedの後のtbody 最後の行の最後のセル
----------------------- */
.coder thead+tbody tr:last-child th:last-child,
.coder thead+tbody tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}           






/* --------------------------------------------------
   coder_pad_s Table padding値を小さく
-------------------------------------------------- */
.coder_pad_s {
    border-spacing: 0;
	
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
         -o-border-radius: 6px;
            border-radius: 6px;
    box-shadow: 0 1px 1px #CCC;	
}
.coder_pad_s th,
.coder_pad_s td {
    padding:4px;
    background:#FFF;
    border-bottom:solid 1px #CCC;
    border-right:solid 1px #CCC;
}
.coder_pad_s td.r1 {
    padding:4px;
    background:#fafafa;			/* 淡グレー */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

/* Append_s 25.Dec.2017 M.U. */
.coder_pad_s td.r2 {
    padding:4px;
    background:#c0c0c0;			/* 濃グレー */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}
/* Append_e 25.Dec.2017 M.U. */

/* Append_s 25.Dec.2017 M.U. */
.coder_pad_s td.r3 {
    padding:4px;
    background:#dcdcdc;			/* 中間グレー */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}
/* Append_e 25.Dec.2017 M.U. */

/* Append_s 20.Jan.2018 M.U. */
.coder_pad_s td.rc01 {
    padding:4px;
    background:#ffcccc;			/* 薄赤 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

.coder_pad_s td.rc02 {
    padding:4px;
    background:#ffffcc;			/* 薄黄 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

.coder_pad_s td.rc03 {
    padding:4px;
    background:#ccffcc;			/* 薄緑 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

.coder_pad_s td.rc04 {
    padding:4px;
    background:#ccffff;			/* 薄青 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

.coder_pad_s td.rc05 {
    padding:4px;
    background:#ccccff;			/* 薄紫 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

.coder_pad_s td.rc06 {
    padding:4px;
    background:#ffccff;			/* 薄桃 */
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}
/* Append_e 25.Dec.2017 M.U. */

.coder_pad_s th {
    background:#e3dcd5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    color:#69655c;
}

/* -----------------------
  左上角丸　最初の行の最初のセル
----------------------- */
.coder_pad_s tr:first-child th:first-child,
.coder_pad_s tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}
/* -----------------------
  右上角丸　最初の行の最後のセル
----------------------- */
.coder_pad_s tr:first-child th:last-child,
.coder_pad_s tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}
/* -----------------------
  左下角丸　最後の行の最初のセル
----------------------- */
.coder_pad_s tr:last-child th:first-child,
.coder_pad_s tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}
/* -----------------------
  右下角丸　最後の行の最後のセル
----------------------- */
.coder_pad_s tr:last-child th:last-child,
.coder_pad_s tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}
/* --------------------------------------------
  thaed,tbodyを使う場合の設定
-------------------------------------------- */
.coder_pad_s thead th {background:#e3dcd5;}
.coder_pad_s thead+tbody th {background:#f4ede6;}
.coder_pad_s tbody th {text-align:left;}/*IE*/
/* -----------------------
  左上角丸 thead内　最初の行の最初のセル
----------------------- */
.coder_pad_s thead tr:first-child th:first-child,
.coder_pad_s thead tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}
/* -----------------------
  右上角丸 thead内　最初の行の最後のセル
----------------------- */
.coder_pad_s thead tr:first-child th:last-child,
.coder_pad_s thead tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}
/* -----------------------
  角丸なし　thaedの後のtbody 最初の行の最初のセル
  角丸なし　thaedの後のtbody 最初の行の最後のセル
----------------------- */
.coder_pad_s thead+tbody tr:first-child th:first-child,
.coder_pad_s thead+tbody tr:first-child td:first-child,
.coder_pad_s thead+tbody tr:first-child th:last-child,
.coder_pad_s thead+tbody tr:first-child td:last-child {
    -webkit-border-radius:0px;
       -moz-border-radius:0px;
         -o-border-radius:0px;
            border-radius:0px;
}
/* -----------------------
  左下角丸　thaedの後のtbody 最後の行の最初のセル
----------------------- */
.coder_pad_s thead+tbody tr:last-child th:first-child,
.coder_pad_s thead+tbody tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}
/* -----------------------
  右下角丸　thaedの後のtbody 最後の行の最後のセル
----------------------- */
.coder_pad_s thead+tbody tr:last-child th:last-child,
.coder_pad_s thead+tbody tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}




/* --------------------------------------------------
   coder_like Table（coder準拠：色やラインは同様だが角丸は無し）
-------------------------------------------------- */
.coder_like {
    border-spacing: 0;
	
    border: 1px solid #CCC;
/*
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
         -o-border-radius: 6px;
            border-radius: 6px;
*/
    box-shadow: 0 1px 1px #CCC;	
}
.coder_like th,
.coder_like td {
    padding:1px;
    background:#FFF;
    border-bottom:solid 1px #CCC;
    border-right:solid 1px #CCC;
}
.coder_like th {
    background:#e3dcd5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    color:#69655c;
}
/*** Application ***/
a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 300px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 8px;
	transition: 0.5s;
}

.btn_submit {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 4rem;        /* 余白       */
  background    : #0f9ed5;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #0f9ed5;    /* 枠の指定 */

  height: 40px;
  width: 300px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit:hover {
  background    : #39bbed;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #39bbed;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit:active {
  background    : #99ffff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #99ffff;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}


.btn_submit_s {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px;        /* 余白       */
  background    : #0f9ed5;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #0f9ed5;    /* 枠の指定 */

  height: 20px;
  width: 300px;
  font-size: 14px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_s:hover {
  background    : #39bbed;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #39bbed;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_s:active {
  background    : #99ffff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #99ffff;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}




.btn_submit_rem {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #5b9dd5;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #5b9dd5;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem:hover {
  background    : #79b9f3;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #79b9f3;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem:active {
  background    : #8dcdff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #8dcdff;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}




.btn_submit_rem_s {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0px 4px;       /* 余白       */
  background    : #5b9dd5;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 2px 2px 0px #666666;  /* 影の設定 */
  border        : 2px solid #5b9dd5;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_s:hover {
  background    : #79b9f3;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #79b9f3;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_s:active {
  background    : #8dcdff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #8dcdff;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 1px 1px 0px #666666;  /* 影の設定 */
}




/*（ボタン色赤・文字黒バージョン） */
.btn_submit_rem_fr_black_bg_red {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #ff3333;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #ff3333;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_fr_black_bg_red:hover {
  background    : #ff6666;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ff6666;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_fr_black_bg_red:active {
  background    : #ff9999;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ff9999;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}



/*（ボタン色濃いクリーム・文字黒バージョン） */
.btn_submit_rem_fr_black_bg_dark_cream {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #ffd688;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #ffa456;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_fr_black_bg_dark_cream:hover {
  background    : #ffea9c;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ffa456;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_fr_black_bg_dark_cream:active {
  background    : #ffc274;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ffa456;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}



/*（ボタン色淡いクリーム・文字黒バージョン） */
.btn_submit_rem_fr_black_bg_light_cream {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #fff2cc;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #ffcaa4;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_fr_black_bg_light_cream:hover {
  background    : #ffffe0;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ffcaa4;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_fr_black_bg_light_cream:active {
  background    : #ffdeb8;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #ffcaa4;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}



/*（ボタン色白・文字黒バージョン） */
.btn_submit_rem_fr_black_bg_white {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #ebebeb;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #c3c3c3;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_fr_black_bg_white:hover {
  background    : #ffffff;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #c3c3c3;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_fr_black_bg_white:active {
  background    : #d7d7d7;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  border        : 2px solid #c3c3c3;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}



/*（ボタン色黒・文字白バージョン） */
.btn_submit_rem_fr_white_bg_black {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #3c3c3c;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
/*  box-shadow    : 4px 4px 1px #666666; */  /* 影の設定 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #000000;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}
/* マウスが乗った時 */
.btn_submit_rem_fr_white_bg_black:hover {
  background    : #5a5a5a;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #000000;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_rem_fr_white_bg_black:active {
  background    : #000000;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #000000;    /* 枠の指定 */
/*  transform: translate(2px, 2px); */
  transform: translate(1px, 1px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 2px 2px 1px #666666;  /* 影の設定 */
}




/*（非活性ボタン） */
.btn_submit_rem_disabled {
  display       : inline-block;
  border-radius : 4px;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 2px 4px;       /* 余白       */
  background    : #c0c0c0;     /* 背景色     */
  color         : #808080;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  border        : 2px solid #c0c0c0;    /* 枠の指定 */

/*    height: 20px; */
/*    width: 300px; */
/*  font-size: 14px; */
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}





.btn_submit_front_end {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 4rem;        /* 余白       */
  background    : #5b9dd5;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #5b9dd5;    /* 枠の指定 */

  height: 40px;
  width: 300px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
  cursor:pointer;
}
/* マウスが乗った時 */
.btn_submit_front_end:hover {
  background    : #79b9f3;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #79b9f3;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_front_end:active {
  background    : #8dcdff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #8dcdff;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}




.btn_submit_back_office {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 4rem;        /* 余白       */
  background    : #70ad47;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #70ad47;    /* 枠の指定 */

  height: 40px;
  width: 300px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
  cursor:pointer;
}
/* マウスが乗った時 */
.btn_submit_back_office:hover {
  background    : #8ecb63;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #8ecb63;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_back_office:active {
  background    : #a2e177;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #a2e177;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}



.btn_submit_back_office_width_half {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 1rem;        /* 余白       */
  background    : #70ad47;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #70ad47;    /* 枠の指定 */

  height: 40px;
  width: 140px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
  cursor:pointer;
}
/* マウスが乗った時 */
.btn_submit_back_office_width_half:hover {
  background    : #8ecb63;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #8ecb63;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_back_office_width_half:active {
  background    : #a2e177;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #a2e177;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}


.btn_submit_back_office_width_half_red {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 1rem;        /* 余白       */
  background    : #c00000;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #c00000;    /* 枠の指定 */

  height: 40px;
  width: 140px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
  cursor:pointer;
}
/* マウスが乗った時 */
.btn_submit_back_office_width_half_red:hover {
  background    : #dc3c3c;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #dc3c3c;    /* 枠の指定 */
}
/* クリック中 */
.btn_submit_back_office_width_half_red:active {
  background    : #ff6060;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  border        : 2px solid #ff6060;    /* 枠の指定 */
  transform: translate(2px, 2px);
  transition    : .1s;         /* なめらか変化 */
  box-shadow    : 4px 4px 3px #666666;  /* 影の設定 */
}


.btn_submit_back_office_width_half_red_disabled {
  display       : inline-block;
  border-radius : 4%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  padding: 0.5rem 1rem;        /* 余白       */
  background    : #c00000;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .2s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #c00000;    /* 枠の指定 */

  height: 40px;
  width: 140px;
  font-size: 16px;
/*  padding: 0 10px; */
  position: relative;
/*    border-radius: 6px; */
}




/* 画像やカラー要素全体にグレー（モノクロ）調のフィルタをかける */
.gray-filter-table {
  filter: grayscale(100%);
  /* background-color: #f5f5f5; */
  /* background-color: #ededed; */
  background-color: #c0c0c0;
}





h2 {
  padding: 0.1rem 2rem;
  border-bottom: 6px double #000;
  background: #f4f4f4;
}

.td_line01 {
  border-width:0.5px;
  padding: 0rem 0rem;
  border-style: none solid solid solid ;
}

/*** select Box ***/
.selectbox-001 {
    position: relative;
}

.selectbox-001::before,
.selectbox-001::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-001::before {
    display: inline-block;
    right: 0;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0 8px 8px 0;
    background-color: #2589d0;
}

.selectbox-001::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}

.selectbox-001 select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: none;
    border-radius: 8px;
    background-color: #e6edf3;
    color: #333;
    font-size: 1em;
    cursor: pointer;
}

.selectbox-001 select:focus {
    outline: 2px solid #2589d0;
}

.input {
  height: 40px;
  width: 300px;
  border-radius: 8px;
  position: relative;
  z-index: 1; 
}

input[type="text"],
input[type="password"] {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #333;
/* height: 40px; */
/* width: 300px; */
  font-size: 16px;
  padding: 0 10px;
  position: relative;
  border-radius: 6px;
/*  background: linear-gradient(#f1f6f5,#e1e6f5); */
}


.input-login {
  height: 40px;
  width: 94%;
  z-index: 1; 
}


.input-shipping {
  height: 40px;
  width: 210px;
  border-radius: 8px;
  position: relative;
  z-index: 1; 
}


.input-shipping {
  height: 40px;
  width: 210px;
  border-radius: 8px;
  position: relative;
  z-index: 1; 
}


.input-radio {
  height: 18px;
  width: 18px;
  position: relative;
  z-index: 1; 
}


.input-checkbox {
  height: 20px;
  width: 20px;
  border-radius: 8px;
  position: relative;
  z-index: 1; 
}


.textarea {
  height: 40px;
  width: 300px;
  border-radius: 8px;
  position: relative;
  z-index: 1; 
}

textarea {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #333;
  width: 250px;
  font-size: 16px;
  padding: 0 10px;
  position: relative;
  border-radius: 12px;
/*  background: linear-gradient(#f1f6f5,#e1e6f5); */
}


.textarea-comment {
  border-radius: 4px;
  font-size: 12px;
}



/* ▼タブ */
#tabcontrol a {
   display: inline-block;            /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
   border-style: solid;              /* 枠線の種類：実線 */
   border-color: black;              /* 枠線の色：黒色 */
   border-radius: 0.6em 0.6em 0 0;   /* 枠線の左上角と右上角だけを丸く */
   padding: 0.25em 0.25em;           /* 内側の余白 */
   text-decoration: none;            /* リンクの下線を消す */
   color: black;                     /* 文字色：黒色 */
   background-color: white;          /* 背景色：白色 */
   font-weight: bold;                /* 太字 */
   position: relative;               /* JavaScriptでz-indexを調整するために必要 */
}
/* ▼タブにマウスポインタが載った際(任意) */
#tabcontrol a:hover {
   text-decoration: underline;       /* 文字に下線を引く */
}

/* ▼タブの中身 */
#tabbody div {
   border: 1px solid black; /* 枠線：黒色の実線を1pxの太さで引く */
   margin-top: -1px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
   /* padding: 1em; */            /* 内側の余白量 */
   padding: 0.6em 0 2.0em 0;            /* 内側の余白量 */
   background-color: white; /* 背景色：白色 */
   position: relative;      /* z-indexを調整するために必要 */
   z-index: 0;              /* 重なり順序を「最も背面」にするため */
}
/* ▼タブの配色 */
/* #tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: #ffffdd; } */ /* 1つ目のタブとその中身用の配色 */
/* #tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: #ddffdd; } */ /* 2つ目のタブとその中身用の配色 */
/* #tabcontrol a:nth-child(3), #tabbody div:nth-child(3) { background-color: #ddddff; } */ /* 3つ目のタブとその中身用の配色 */

#tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: #ffffff; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: #ffffff; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), #tabbody div:nth-child(3) { background-color: #ffffff; }/* 3つ目のタブとその中身用の配色 */






.selectbox-cust01 {
  appearance: none;
  width: 98%;                 /* セレクトボックスの横幅 */
  /* height: 24px; */               /* ※この指定で高さを定めておかないと矢印の上からの位置が文字サイズ変更の影響でずれてきてしまう。だが文字が小さい場合に高さが無駄に大きい事になってしまう */
  padding: 2px 4px;           /* テキスト周りの余白 */
  color: #000;                /* テキストの色 */
  border: 1px solid #000;     /* 枠線の太さ・形状・色 */
  border-radius: 3px;         /* 枠線の角丸 */
  background-color: #fff;     /* 背景色 */
  cursor: pointer;            /* マウスカーソルをポインターに */
}
.selectbox-cust01:focus {
  outline: none;              /* focus時の枠線を消去 */
}

.selectbox-cust01_01 {
  position: relative;
  width: 100%;                 /* 親要素の横幅 */
}
.selectbox-cust01_01::before {
  position: absolute;
  /* top: 7px; */                  /* 矢印の上からの位置 */
  top: calc((100% / 2) - (10px / 2));                  /* 矢印の上からの位置（ユーザー文字サイズが変更された場合でも矢印の位置をmiddle位置にするための苦肉の策） */
  right: 6px;                /* 矢印の右からの位置 */
  content: '';
  width: 12px;                /* 矢印の横幅 */
  height: 10px;               /* 矢印の縦幅 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);  /* 逆三角形の描画 */
  background-color: #000;     /* 矢印の色 */
  pointer-events: none;       /* 矢印部分をクリックできるようにする */
}







/* -------------------- */
/* ▼メニューバーの装飾（フロントエンド） */
/* -------------------- */
ul.ddmenu_fe {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 0px; /* メニューバー内側の余白(ゼロ) */
   background-color: #bdd7ee; /* バーの背景色(淡い青) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu_fe li {
/*   width: 140px; */           /* メニュー項目の横幅 */
   width: 160px;           /* メニュー項目の横幅 */ /* バックオフィスと違い文字サイズ変更があるので、サイズ大だと「パスワード変更」が折り返されてしまう対応で幅を広げる */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu_fe a {
   background-color: #bdd7ee; /* メニュー項目の背景色(淡い青) */
   color: #000000;            /* メニュー項目の文字色(黒色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
   border-radius : 6px;       /* 角丸       */
}
ul.ddmenu_fe a:hover {
   background-color: #5b9bd5; /* メニュー項目にマウスが載ったときの背景色(暗い青) */
   color: #ffffff;            /* メニュー項目にマウスが載ったときの文字色(白色) */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu_fe ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px 0px 0px -4px;         /* ★2:サブメニュー外側の余白(左側を-4としてメインメニュー項目と中心揃えになるようにしている) ※サブメニュー内側の余白と関連する */
   padding: 4px;        /* ★3:サブメニュー内側の余白 */
   position: absolute;  /* ★4:絶対配置にする */
   background-color: #bdd7ee; /* メニュー項目の背景色(淡い青) */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu_fe li:hover ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}






/* -------------------- */
/* ▼メニューバーの装飾（バックオフィス） */
/* -------------------- */
ul.ddmenu_bo {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 0px; /* メニューバー内側の余白(ゼロ) */
   background-color: #c6e0b4; /* バーの背景色(淡い緑) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu_bo li {
   width: 180px;           /* メニュー項目の横幅 */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu_bo a {
   background-color: #c6e0b4; /* メニュー項目の背景色(淡い緑) */
   color: #000000;            /* メニュー項目の文字色(黒色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
   border-radius : 6px;       /* 角丸       */
}
ul.ddmenu_bo a:hover {
   background-color: #70ad47; /* メニュー項目にマウスが載ったときの背景色(暗い緑) */
   color: #ffffff;            /* メニュー項目にマウスが載ったときの文字色(白色) */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu_bo ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px 0px 0px -4px;         /* ★2:サブメニュー外側の余白(左側を-4としてメインメニュー項目と中心揃えになるようにしている) ※サブメニュー内側の余白と関連する */
   padding: 4px;        /* ★3:サブメニュー内側の余白 */
   position: absolute;  /* ★4:絶対配置にする */
   background-color: #c6e0b4; /* メニュー項目の背景色(淡い緑) */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu_bo li:hover ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}





/* ★★★★★ */
/* ★★★★★ */
/* ★★★★★ */
.content_area {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
   /* padding: 30px 20px; */
}


/*---------- スクロール可能なテーブル関連のCSS ----------*/
.table_box {
    display: block;
    overflow: auto;
}

.table_box th,
.table_box td {
    white-space: nowrap;
}

/* スクロールバー全体を対象にする */
.table_box::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
}

/* スクロールバーの背景部分をカスタマイズ */
.table_box::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分をカスタマイズ */
.table_box::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分にホバーした時のスタイル */
.table_box::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
}
/* ★★★★★ */
/* ★★★★★ */
/* ★★★★★ */





.password-container {
  position: relative;
  /* width: 300px; */
}

/*
input[type="password"], input[type="text"] {
  width: 100%;
  padding: 10px 40px 10px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
*/

.toggle-password {
  position: absolute;
  top: 55%;
/*  right: 100px; */
  left: 82%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-password img {
/*  width: 23px; */
/*  height: 12px; */
  opacity: 0.7;
}

.toggle-password:hover img {
  opacity: 1;
}




.toggle-password_fe {
  position: absolute;
  top: 55%;
/*  right: 100px; */
  left: 92%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-password_fe img {
/*  width: 23px; */
/*  height: 12px; */
  opacity: 0.7;
}

.toggle-password_fe:hover img {
  opacity: 1;
}