/* CSS Document */

a:link, a:visited, a:hover, a:active {
  color: #0066cb;
}


/*--------------------------------------
  ヘッダー
--------------------------------------*/
header {
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: #2ea864;
  color: #ffffff;
  font-weight: bold;
  font-size: 220%;
}

/*--------------------------------------
  フッター
--------------------------------------*/
footer {
  background-color: #494b4a;
  margin-top: 20px;
  padding-top: 15px;
  padding-bottom: 12px;
  color: #ffffff;
  text-align: center;
}

/*--------------------------------------------------
  画像透過度選択[image_opacity]
---------------------------------------------------*/
.image_opacity a:hover {
	filter:alpha(opacity = 80);
	-moz-opacity: 0.8;
	opacity:0.8;
}

/*--------------------------------------
  タイトル・詳細内容
--------------------------------------*/
.sub_title {
  text-align: left;
}
.sub_title h1 {
  margin: 25px 0px 25px 0px;
  font-size: 140%;
  font-weight: bold;
  color: #004ea2;
  background-color: #f3f9ff;
  line-height: 180%;
  padding: 11px 10px 7px 10px;
  border-top: 1px dashed #004ea2;
  border-bottom: 1px dashed #004ea2;
}
.sub_title h2 {
  position: relative;
  margin: 0px 0px 10px 0px;
  font-size: 120%;
  font-weight: bold;
  color: #006934;
  padding: 5px 10px 2px 20px;
  line-height: 180%;
  border-bottom: 1px solid #006934;
}
.sub_title h2::after {
  position: absolute;
  top: 10px;
  left: 5px;
  content: '';
  width: 5px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #006934;
  border-radius: 1px;
}

.detail_text {
  text-align: left;
  margin-left: 1em;
  margin-right: 1em;
}
.detail_text p{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  line-height: 180%;
}


/*--------------------------------------
  ボタンデザイン
--------------------------------------*/
.btn_back {
  padding: 15px 15px;
  text-decoration: none;
  border-radius: 7px;
  color: #000000;
  background-color: #f7fff1;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  border: solid 2px #006934;
  text-align: center;
  transition: 0.5s;
  display: inline-block;
}

.btn_back:hover {
  background-color: #ffffff;
  border: solid 2px #999999;
  text-decoration: none;
}


/*--------------------------------------
youtube 埋め込み用 CSS
--------------------------------------*/
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*--------------------------------------
bootstrap オリジナル CSS
--------------------------------------*/
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1-5 {
  width: 20%;
  float: left;
}
.col-xs-2-5 {
  width: 40%;
  float: left;
}

.col-xs-3-5 {
  width: 60%;
  float: left;
}

.col-xs-4-5 {
  width: 80%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
  .col-sm-2-5 {
    width: 40%;
    float: left;
  }
  .col-sm-3-5 {
    width: 60%;
    float: left;
  }
  .col-sm-4-5 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
  .col-md-2-5 {
    width: 40%;
    float: left;
  }
  .col-md-3-5 {
    width: 60%;
    float: left;
  }
  .col-md-4-5 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;
    float: left;
  }
  .col-lg-2-5 {
    width: 40%;
    float: left;
  }
  .col-lg-3-5 {
    width: 60%;
    float: left;
  }
  .col-lg-4-5 {
    width: 80%;
    float: left;
  }
}

.col-xs-1-2, .col-sm-1-2, .col-md-1-2, .col-lg-1-2,{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}   
.col-xs-1-2 {
  width: 50%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-1-2 {
    width: 50%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-1-2 {
    width: 50%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-1-2 {
    width: 50%;
    float: left;
  }
}