@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;
  font-weight: bold;
  margin-bottom: 20px;
}

.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, .btn_a input,
.btn_b a,
.btn_b div,
.btn_b input,
.btn_c a,
.btn_c div,
.btn_c input,
.btn_d a,
.btn_d div,
.btn_d input,
.btn_red a,
.btn_red div,
.btn_red input,
.btn_blue a,
.btn_blue div,
.btn_blue input {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: block;
  text-decoration: none;
  padding: 10px 15px;
  text-align: center;
  font-size: .9em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.btn_a a:hover, .btn_a div:hover, .btn_a input:hover,
.btn_b a:hover,
.btn_b div:hover,
.btn_b input:hover,
.btn_c a:hover,
.btn_c div:hover,
.btn_c input:hover,
.btn_d a:hover,
.btn_d div:hover,
.btn_d input:hover,
.btn_red a:hover,
.btn_red div:hover,
.btn_red input:hover,
.btn_blue a:hover,
.btn_blue div:hover,
.btn_blue input:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .btn_a a, .btn_a div, .btn_a input,
  .btn_b a,
  .btn_b div,
  .btn_b input,
  .btn_c a,
  .btn_c div,
  .btn_c input,
  .btn_d a,
  .btn_d div,
  .btn_d input,
  .btn_red a,
  .btn_red div,
  .btn_red input,
  .btn_blue a,
  .btn_blue div,
  .btn_blue input {
    font-size: 1em;
  }
}

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

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

.btn_c a, .btn_c div, .btn_c input {
  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, .btn_d input {
  color: #333333;
  background: #e6e5e4;
  border: 1px solid #ccc;
  border-bottom: 4px solid #ccc;
}

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

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

/* -----------------------------------------------------------
  .btn_area
  複数のボタンある箇所
----------------------------------------------------------- */
.btn_area {
  overflow: hidden;
  background: url(../images/bg_dot.png);
  padding: 15px 5px;
}
.btn_area li {
  float: left;
  width: 33.33333%;
  padding: 0 5px;
}
.btn_area li input {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .btn_area {
    overflow: hidden;
  }
  .btn_area li input {
    font-size: 1em;
  }
}

/* -----------------------------------------------------------
  .txt_notice
  確認画面用のテキスト
----------------------------------------------------------- */
.txt_notice {
  margin-bottom: 20px;
  color: #d31c00;
  font-weight: bold;
}

/* -----------------------------------------------------------
  .txt_comp
  .txt_date
  上部の一言メッセージ
----------------------------------------------------------- */
.txt_comp,
.txt_date {
  margin-bottom: 20px;
  font-weight: bold;
}