@charset "UTF-8";
/* CSS Document */
.single_col .inner .list {
  position: relative;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  margin: 10px 10px 90px;
  padding: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
.single_col .inner .list .tbl_dl, .single_col .inner .list .contact_dl {
  border: 1px solid #ddd;
  margin: 0 0 30px;
}
.single_col .inner .list strong {
  font-size: 2.4rem;
}
.single_col .inner .list h3 {
  font-size: 2.4rem;
}

.flextitle {
  display: block;
}

@media (min-width: 768px) {
  .single_col .inner .list {
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #ddd;
    margin: 10px 10px 90px;
    padding: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  }
  .single_col .inner .list .tbl_dl, .single_col .inner .list .contact_dl {
    border: 1px solid #ddd;
    margin: 0 0 30px;
  }
  .single_col .inner .list strong {
    font-size: 2.4rem;
  }
  .single_col .inner .list h3 {
    font-size: 2.4rem;
  }

  .flextitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.option1, .option2, .option3, .new {
  font-size: 12px;
  text-align: center;
  display: block;
  width: 80px;
  line-height: 30px;
  position: absolute;
  right: 40px;
  top: 0px;
}

.new {
  color: #FFF;
  background: #F00;
}

.icon {
  display: inline-block;
  margin: 2px;
  font-size: 12px;
  /*文字サイズ*/
  padding: 0 5px;
  /*ボックス内の余白*/
  border-radius: 4px;
  /*角丸のサイズ*/
  border: 1px solid #ccc;
  /*枠線の幅、線種、色*/
  background: #eee;
  /*背景色（古いブラウザ用）*/
  background: linear-gradient(#fff, #eee);
  /*グラデーション*/
}

.icon a {
  text-decoration: none;
}

.icon.color1 {
  border: 1px solid #de0707;
  /*枠線の幅、線種、色*/
  background: #ff0808;
  /*背景色（古いブラウザ用）*/
  background: linear-gradient(#ff0808, #de0707);
  /*グラデーション*/
  color: #fff !important;
  /*文字色*/
}

/*アイコン色付き（アルバイト）*/
.icon.color2 {
  border: 1px solid #161995;
  /*枠線の幅、線種、色*/
  background: #2b2ebc;
  /*背景色（古いブラウザ用）*/
  background: linear-gradient(#2b2ebc, #161995);
  /*グラデーション*/
  color: #fff;
  /*文字色*/
}

/*アイコン色付き（パート）*/
.icon.color3 {
  border: 1px solid #161995;
  /*枠線の幅、線種、色*/
  background: #2b2ebc;
  /*背景色（古いブラウザ用）*/
  background: linear-gradient(#2b2ebc, #161995);
  /*グラデーション*/
  color: #fff;
  /*文字色*/
}

a.btn, button.btn {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  /*文字色*/
  font-size: 20px;
  /*文字サイズ*/
  text-align: center;
  /*文字をセンタリング*/
  padding: 10px;
  /*ボタン内の余白*/
  border-radius: 8px;
  /*角丸のサイズ*/
  letter-spacing: 0.2em;
  /*文字間隔を広くとる設定*/
  border: 1px solid #006cb7;
  max-width: 300px;
  margin: auto;
  background: linear-gradient(#006cb7, rgba(0, 108, 183, 0.9));
}
a.btn::before, button.btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  transition: 0.3s ease-in-out;
  background: #de0707;
  background: #006cb7;
  /*グラデーション*/
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  /*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
  border-radius: 8px;
  /*角丸のサイズ*/
}
a.btn::after, button.btn::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 8px;
  /*角丸のサイズ*/
}
a.btn:hover, button.btn:hover {
  color: #006cb7;
}
a.btn:hover::before, button.btn:hover::before {
  background: rgba(0, 108, 183, 0.1);
}