/* ----------------------------------------------------------------------
 旧サイト(TCD MONAD)から移管した記事装飾クラス
 コラム・疾患ページ本文内の q_underline / q_frame / q_custom_button 用
---------------------------------------------------------------------- */

/* アンダーライン(マーカー) */
.q_underline {
  background-image: linear-gradient(to right, transparent 50%, #fff799 50%);
  background-position: 0 0.8em;
  background-repeat: repeat-x;
  background-size: 200% 0.5em;
  border: none;
  border-bottom-color: transparent;
}
.q_underline2 {
  font-weight: 600;
  background-image: linear-gradient(to right, transparent 50%, #99f9ff 50%);
}
.q_underline3 {
  font-weight: 600;
  background-image: linear-gradient(to right, transparent 50%, #ff99b8 50%);
}

/* 囲み枠(CTAボックス) */
.q_frame {
  line-height: 1.8;
  position: relative;
  padding: 1.3em 2em;
  margin-bottom: 2em;
  border: 1px solid #ddd;
  background: #fff;
}
* + .q_frame { margin-top: 2em; }
.q_frame_label {
  max-width: calc(100% - 2em);
  line-height: 1.4;
  font-weight: 600;
  display: inline-block;
  padding: 0 1em;
  background: inherit;
  position: absolute;
  top: -0.7em;
  left: 1em;
}
.q_frame2 {
  background: #ffffff;
  border-radius: 0;
  border: 1px solid #009aff;
}
.q_frame2 .q_frame_label { color: #009aff; }
.q_frame3 {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #f9b42d;
}
.q_frame3 .q_frame_label { color: #f9b42d; }
@media (max-width: 800px) {
  .q_frame { padding: 1em 1.5em; }
  .q_frame_label { padding: 0 0.5em; }
}

/* CSSボタン */
.q_button_wrap { text-align: center; margin-bottom: 55px; }
.q_custom_button {
  max-width: 100%;
  line-height: 1.5;
  padding: 0 1.5em;
  text-decoration: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  z-index: 1;
  font-weight: 600;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}
.q_custom_button:before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  z-index: -1;
  transition-property: background-color, left, opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.q_custom_button:hover { color: #fff; text-decoration: none !important; }
.q_custom_button2 {
  min-width: 260px;
  height: 60px;
  border-radius: 70px;
  color: #fff !important;
  background-color: #00a4b4;
  border: none;
}
.q_custom_button2:before { background-color: #007282 !important; opacity: 0; }
.q_custom_button2:hover:before { opacity: 1; }
.q_custom_button3 {
  min-width: 260px;
  height: 60px;
  border-radius: 70px;
  color: #fff !important;
  border-color: #00a4b4;
}
.q_custom_button3:before { background-color: #00a4b4; opacity: 1; }
.q_custom_button3:hover { color: #00a4b4 !important; border-color: #00a4b4; }
.q_custom_button3:hover:before { opacity: 0; }
@media (max-width: 800px) {
  .q_custom_button { max-height: 50px; font-size: 14px; }
  .q_custom_button2, .q_custom_button3 { min-width: 220px; height: 50px; }
  .q_button_wrap { margin-bottom: 35px; }
}

/* 汎用の枠 */
.well { margin-bottom: 30px; padding: 1.1em 2em; border: 1px solid #ddd; border-radius: 6px; background-color: #fafafa; }
.well2 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px solid #ddd; }
.well3 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px dashed #ddd; background: #fafafa; }
@media screen and (max-width: 800px) {
  .well, .well2, .well3 { padding: .9em .8em .9em 1em; }
}