@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : component.css
s style info : 各部パーツ
=================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1;
}

/* -----------------------------------------------------------
	見出し
----------------------------------------------------------- */
.st_a,
.st_b,
.st_c {
  padding: 10px;
  font-size: 18px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

.st_a {
  background: #669933;
  color: #fff;
}

.st_b {
  background: #e6e5e4;
}

.st_c {
  border-bottom: 4px solid #ccc;
  position: relative;
}
.st_c:after {
  content: "";
  width: 20%;
  height: 4px;
  background: #669933;
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -4px;
}

/* -----------------------------------------------------------
  ボタン
----------------------------------------------------------- */
.btn_a a, .btn_a div, button.btn_a,
.btn_b a, .btn_b div, button.btn_b,
.btn_c a, .btn_c div, button.btn_c,
.btn_d a, .btn_d div, button.btn_d,
.btn_ch a, .btn_ch div, button.btn_ch,
.btn_red a, .btn_red div, button.btn_red,
.btn_blue a, .btn_blue div, button.btn_blue,
.btn_login {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: block;
  text-decoration: none;
  padding: 10px 15px;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.btn_a a:hover, .btn_a div:hover, button.btn_a:hover,
.btn_b a:hover, .btn_b div:hover, button.btn_b:hover,
.btn_c a:hover, .btn_c div:hover, button.btn_c:hover,
.btn_d a:hover, .btn_d div:hover, button.btn_d:hover,
.btn_ch a:hover, .btn_ch div:hover, button.btn_ch:hover,
.btn_red a:hover, .btn_red div:hover, button.btn_red:hover,
.btn_blue a:hover, .btn_blue div:hover, button.btn_blue:hover,
.btn_login:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.btn_a a, .btn_a div, button.btn_a {
  color: #fff;
  background: #669933;
  border: 1px solid #669933;
  border-bottom: 4px solid #154b08;
}

.btn_b a, .btn_b div, button.btn_b {
  color: #fff;
  background: #999999;
  border: 1px solid #999999;
  border-bottom: 4px solid #999999;
}

.btn_c a, .btn_c div, button.btn_c {
  color: #333333;
  border: 1px solid #ccc;
  border-bottom: 4px solid #ccc;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
  background: -moz-linear-gradient(#ffffff, #e5e5e5);
  background: -webkit-linear-gradient(#ffffff, #e5e5e5);
  background: linear-gradient(#ffffff, #e5e5e5);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE5E5E5');
}

.btn_d a, .btn_d div, button.btn_d {
  color: #333333;
  background: #e6e5e4;
  border: 1px solid #ccc;
  border-bottom: 4px solid #ccc;
}

.btn_ch a, .btn_ch div, button.btn_ch {
  color: #333333;
  background: #e6e5e4 url(../images/ic_chk.png) 5px 4px no-repeat;
  padding-left: 30px;
  border: 1px solid #ccc;
}
.btn_ch.on a, .btn_ch.on div, button.btn_ch.on {
  background: #e6e5e4 url(../images/ic_chk_on.png) 5px 4px no-repeat;
}

.btn_red a, .btn_red div, button.btn_red {
  color: #fff;
  background: #d31c00;
  border: 1px solid #d31c00;
  border-bottom: 4px solid #AD1700;
}

.btn_blue a, .btn_blue div, button.btn_blue {
  color: #fff;
  background: #386DB1;
  border: 1px solid #386DB1;
  border-bottom: 4px solid #2B5387;
}

.btn_login {
  color: #fff;
  background: transparent;
  border: 2px solid #fff;
  padding: 10px 30px;
}

/* loading */
.is-hide {
  display: none;
}
.loader {
  font-size: 10px;
  margin: 10px;
  text-indent: -9999em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #cccccc;
  background: -moz-linear-gradient(left, #cccccc 10%, rgba(204,204,204, 0) 42%);
  background: -webkit-linear-gradient(left, #cccccc 10%, rgba(204,204,204, 0) 42%);
  background: -o-linear-gradient(left, #cccccc 10%, rgba(204,204,204, 0) 42%);
  background: -ms-linear-gradient(left, #cccccc 10%, rgba(204,204,204, 0) 42%);
  background: linear-gradient(to right, #cccccc 10%, rgba(204,204,204, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #cccccc;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #f6f7f8;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}