@charset "UTF-8";

/* ====================================================
   Green
   ==================================================== */
.greenbox {
  margin-bottom: 17px; 
  background-color: #DFF2C5; 
  padding: 10px 17px 0 17px; 
}


.greenboxHeader {
  background-repeat: no-repeat;
  color: #336600;
  display: block;
  font-weight: bold;
  height: 15px;
  vertical-align: middle;
}


.greenboxContent {
  padding: 10px 0 5px 0; 
}


/* ====================================================
   Red
   ==================================================== */
.redbox {
  margin-bottom: 17px; 
  background-color: #FCEBBD; 
  padding: 10px 17px 0 17px; 
}


.redboxHeader {
  background-repeat: no-repeat;
  color: #993300;
  display: block;
  font-weight: bold;
  height: 15px;
  vertical-align: middle;
}


.redboxContent {
  padding: 10px 0 5px 0; 
}


/* ====================================================
   gray
   ==================================================== */
.graybox {
  background-color: #F0F0F0;
  margin-bottom: 17px; 
  border: 1px solid #ECECEC;
}


.grayboxContent {
  padding: 10px; 
  overflow: hidden; 
}


/* ====================================================
   yellow
   ==================================================== */
.yellowbox {
  background-color: #FFFFCE;
  margin-bottom: 17px; 
  border: 1px solid #FBEED5;
}

.yellowboxContent {
  padding: 10px; 
  overflow: hidden; 
}


/* ====================================================
   blue
   ==================================================== */
.bluebox {
  background-color: #D2E6F5;
  margin-bottom: 17px; 
}


.blueboxContent {
  padding: 10px; 
  overflow: hidden; 
}


.blueboxHeader {
  background-color: #D2E6F5;
  padding: 10px; 
  overflow: hidden; 
  margin-bottom: 17px; 
}


/* ====================================================
   grayTable
   ==================================================== */
.grayTable {
  width: 100%;
  margin-bottom: 17px;
}

.grayTable th {
  background: none repeat scroll 0 0 #F0F0F0;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}

.grayTable td {
  border: 1px solid #dddddd;
  padding: 10px 15px;
  vertical-align: middle;
}


/* ====================================================
   grayTable2
   ==================================================== */
.grayTable2 {
  width: 100%;
  margin-bottom: 17px;
}

.grayTable2 td {
  border: 1px solid #dddddd;
  padding: 10px 15px;
  vertical-align: middle;
}

.pink {
  background: none repeat scroll 0 0 #ff69b4;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.pink2 {
  background: none repeat scroll 0 0 #ffc0cb;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.green {
  background: none repeat scroll 0 0 #0A8C6E;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.green2 {
  background: none repeat scroll 0 0 #008000;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.blue {
  background: none repeat scroll 0 0 #1E8CBE;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.blue2 {
  background: none repeat scroll 0 0 #506E96;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.purple {
  background: none repeat scroll 0 0 #503C78;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.purple2 {
  background: none repeat scroll 0 0 #7b68ee;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.purple3 {
  background: none repeat scroll 0 0 #9370db;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.yellow {
  background: none repeat scroll 0 0 #f0be1e;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.yellow2 {
  background: none repeat scroll 0 0 #f0e68c;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.glay {
  background: none repeat scroll 0 0 #b0c4de;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.glay2 {
  background: none repeat scroll 0 0 #708090;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.red {
  background: none repeat scroll 0 0 #DC3C6E;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}
.red2 {
  background: none repeat scroll 0 0 #ff0000;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
}

/* ====================================================
   grayTable3　※幅指定なし
   ==================================================== */
.grayTable3 {
}

.grayTable3 th {
  background: none repeat scroll 0 0 #F0F0F0;
  border: 1px solid #dddddd;
  font-weight: bold;
  color : #252525;
  padding: 5px 10px;
  vertical-align: middle;
}

.grayTable3 td {
  border: 1px solid #dddddd;
  padding: 0px 5px;
  vertical-align: middle;
}

.yellow3 {
  background: none repeat scroll 0 0 #f0be1e;
}
.yellow4 {
  background: none repeat scroll 0 0 #f0e68c;
}
.glay3 {
  background: none repeat scroll 0 0 #b0c4de;
}
.glay4 {
  background: none repeat scroll 0 0 #708090;
}

/* ====================================================
   grayTable4　※セル内、長い英単語改行OK（「word-break: break-word;」追記）
   ==================================================== */
.grayTable4 {
  width: 100%;
  margin-bottom: 17px;
}

.grayTable4 th {
  background: none repeat scroll 0 0 #F0F0F0;
  border: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px;
  color : #252525;
  padding: 10px 15px;
  vertical-align: middle;
　word-break: break-word;
}

.grayTable4 td {
  border: 1px solid #dddddd;
  padding: 10px 15px;
  vertical-align: middle;
　word-break: break-word;
}

/* ====================================================
   RelaseNote
   ==================================================== */
.uichange {
  font-size: 13px;
  background-color: #84a2d4;
}

.addnew {
  background-color: #E6B422;
}

.change {
  background-color: #82ae46;
}

.fix {
  background-color: #1E90FF;
}

.warning {
  background-color: #cd5e3c;
}

.delete {
  background-color: #90918a;
}

.uichange, .change, .fix, .delete, .addnew, .warning {
  letter-spacing: 0;
  margin: 3px;
  padding: 1px 4px;
  color: #FFFFFF;
}

.appname {
  font-weight: bold;
  background-color: #F0F0F0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #ECECEC;
}

/* ====================================================
   Bug
   ==================================================== */
.appetc {
  background-color: #90918a;
}
.appknt {
  background-color: #0095d9;
}
.appkeh {
  background-color: #E6B422;
}
.appmst {
  background-color: #cd5e3c;
}
.appgw {
  background-color: #2ca9e1;
}
.appjnji {
  background-color: #3cb371;
}
.apppro {
  background-color: #7058a3;
}
.appyjt {
  background-color: #e14024;
}

.appetc , .appknt ,.appkeh ,.appmst ,.appgw ,.appjnji,.apppro,.appyjt {
  letter-spacing: 0;
  margin: 2px;
  padding: 1px 2px;
  font-size: 13px;
  color: #FFFFFF;
}

/* ====================================================
   Fix(2022/12/28) MV-image
   ==================================================== */

.hero {
  background-position: center;
  background-size: cover;
  height: 0;
  /* heightで高さを固定すると、スマホ表示時に画像の縦横比が変わったときに表示しきれなくなるため、
  後述するpadding-top, padding-bottomで高さを指定 */
  padding: 0 20px;
  padding-top: calc(calc(170 / 768) * 100%);
  padding-bottom: calc(calc(50 / 768) * 100%);
  /* padding-top, padding-bottomを%で指定することで、画面幅に対する比率で高さを指定
  padding-topは、幅768pxの時に、高さ170pxになる比率
  padding-bottomは、幅768pxの時に、高さ50pxになる比率で指定 */
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
  .hero {
    padding-top: calc(calc(250 / 1600) * 100%);
    padding-bottom: calc(calc(50 / 1600) * 100%);
    /* padding-top, padding-bottomを%で指定することで、画面幅に対する比率で高さを指定
  padding-topは、幅1600pxの時に、高さ250pxになる比率
  padding-bottomは、幅1600pxの時に、高さ50pxになる比率で指定 */
  }
}

.search {
  font-size: min(max(0.97222vw, 12px), 14px);
  /* font-sizeをvwで指定することで、画面幅が小さくなった時にfont-sizeが小さくなるように指定
  ただし、画面幅を小さくしたときにfont-sizeが小さくなりすぎないように、最小font-sizeを12pxに指定
  (max(0.97222vw, 12px)→0.97222vwと12pxのうち、大きい方を指定) 
  同様に、画面幅を大きくしたときにfont-sizeが大きくなりすぎないように、最大font-sizeを14pxに指定
  */
}

.search input[type="search"] {
  height: 3.298vw;
  min-height: 16px;
  max-height: 40px;
  /* heightをvwで指定することで、画面幅の変動に対して検索ボックスの高さも変わるように指定。
  min-height, max-heightで、検索ボックスの高さの最小値・最大値も指定 */
  font-size: min(max(0.97222vw, 12px), 14px);
  /* font-sizeをvwで指定することで、画面幅が小さくなった時にfont-sizeが小さくなるように指定
  ただし、画面幅を小さくしたときにfont-sizeが小さくなりすぎないように、最小font-sizeを12pxに指定
  (max(0.97222vw, 12px)→0.97222vwと12pxのうち、大きい方を指定) 
  同様に、画面幅を大きくしたときにfont-sizeが大きくなりすぎないように、最大font-sizeを14pxに指定
  */
  padding-left: max(calc(calc(40 / 610) * 100%), 20px);
}

.search::before {
  font-size: min(max(0.97222vw, 12px), 14px);
  /* font-sizeをvwで指定することで、画面幅が小さくなった時にfont-sizeが小さくなるように指定
  ただし、画面幅を小さくしたときにfont-sizeが小さくなりすぎないように、最小font-sizeを12pxに指定
  (max(0.97222vw, 12px)→0.97222vwと12pxのうち、大きい方を指定) 
  同様に、画面幅を大きくしたときにfont-sizeが大きくなりすぎないように、最大font-sizeを14pxに指定
  */
  left: calc(calc(15 / 610) * 100%);
}