@charset "UTF-8";

/* 大山皮膚科　コラム用スタイル
   配色はサイト共通：リンク #009999 ／ 見出し #4e9da6 ／ 地 #fdf9f2 ／ 本文 #333 */

.col-wrap {
  clear: both;
  width: 920px;
  margin: 0 auto;
  padding: 0 0 50px 0;
  text-align: left;
  color: #333;
  font-size: 15px;
  line-height: 1.95;
}

.col-inner {
  width: 840px;
  margin: 0 auto;
}

.col-wrap a { color: #009999; }

/* グローバルナビは画像だけを見せる */
#glovalNavi span,
#glovalNavi i { display: none; }

/* 画像が枠からはみ出さないようにする */
#headCol img,
#glovalNavi img,
.col-wrap img { max-width: 100%; height: auto; }


/* ---------- パンくず ---------- */

#crumbs {
  width: 840px;
  margin: 0 auto;
  padding: 14px 0 4px 0;
}


/* ---------- 記事ヘッダー ---------- */

.col-head {
  border-bottom: 3px solid #4e9da6;
  padding: 0 0 16px 0;
  margin: 6px 0 30px 0;
}

.col-cat {
  display: inline-block;
  background: #4e9da6;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 7px 14px;
  margin: 0 0 14px 0;
}

.col-title {
  font-size: 28px;
  line-height: 1.5;
  color: #4e9da6;
  font-weight: bold;
  margin: 0 0 12px 0;
}

.col-meta {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.col-meta time { margin-right: 16px; }


/* ---------- 目次 ---------- */

.col-toc {
  background: #fdf9f2;
  border: 1px solid #e3ded4;
  padding: 20px 28px;
  margin: 0 0 40px 0;
}

.col-toc-h {
  font-weight: bold;
  color: #4e9da6;
  font-size: 16px;
  margin: 0 0 10px 0;
}

.col-toc ol { margin: 0; padding: 0 0 0 1.5em; list-style: decimal; }
.col-toc li { margin: 4px 0; }


/* ---------- 本文 ---------- */

.col-body h3 {
  clear: both;
  font-size: 22px;
  line-height: 1.55;
  color: #4e9da6;
  font-weight: bold;
  border-left: 7px solid #009999;
  padding: 3px 0 3px 16px;
  margin: 50px 0 20px 0;
}

.col-body p { margin: 0 0 1.5em 0; }

.col-body strong { font-weight: bold; }

.col-body ul,
.col-body ol {
  margin: 0 0 1.8em 0;
  padding: 0 0 0 1.7em;
}

.col-body ul { list-style: disc; }
.col-body ol { list-style: decimal; }
.col-body li { margin: 0 0 .6em 0; }

.col-body figure { margin: 0 0 1.6em 0; }

.col-body figure img {
  max-width: 100%;
  height: auto;
}


/* ---------- 実例 ---------- */

.col-case {
  border: 1px solid #e3ded4;
  padding: 26px 28px 10px 28px;
  margin: 0 0 26px 0;
}

.col-case-h {
  font-weight: bold;
  color: #4e9da6;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.col-case figure { margin: 0 0 16px 0; text-align: center; }

.col-case figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e3ded4;
}

.col-spec {
  list-style: none !important;
  background: #fdf9f2;
  padding: 16px 20px !important;
  margin: 16px 0 18px 0 !important;
  font-size: 14px;
  line-height: 1.85;
}

.col-spec li { margin: 0 0 .5em 0; }
.col-spec li:last-child { margin-bottom: 0; }


/* ---------- よくあるご質問 ---------- */

.col-faq { margin: 0 0 10px 0; }

.col-faq .col-qa {
  border-bottom: 1px solid #e8e8e8;
  padding: 0 0 18px 0;
  margin: 0 0 18px 0;
}

.col-faq .col-qa:last-child { border-bottom: none; }

.col-faq .col-q,
.col-faq .col-a {
  position: relative;
  padding-left: 46px;
  margin: 0;
}

.col-faq .col-q {
  font-weight: bold;
  font-size: 17px;
  line-height: 1.7;
  color: #2f6f75;
  margin: 0 0 12px 0;
}

.col-faq .col-a { line-height: 1.9; }

.col-faq .col-q:before,
.col-faq .col-a:before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.col-faq .col-q:before {
  content: "Q";
  background: #4e9da6;
  color: #fff;
}

.col-faq .col-a:before {
  content: "A";
  background: #fdf9f2;
  color: #4e9da6;
  border: 1px solid #cfe1df;
  line-height: 30px;
}


/* ---------- 治療の概要 ---------- */

.col-summary {
  border: 2px solid #4e9da6;
  padding: 24px 28px 10px 28px;
  margin: 46px 0 26px 0;
}

.col-summary-h {
  font-weight: bold;
  color: #4e9da6;
  font-size: 19px;
  margin: 0 0 14px 0;
}

.col-summary ul { list-style: none; padding: 0; margin: 0 0 1em 0; }
.col-summary li { margin: 0 0 .7em 0; }


/* ---------- 断り書き ---------- */

.col-note {
  font-size: 14px;
  color: #666;
  background: #f6f6f6;
  padding: 16px 20px;
  margin: 0 0 40px 0;
  line-height: 1.8;
}


/* ---------- あわせてご覧ください ---------- */

.col-cta { margin: 0 0 44px 0; }

.col-cta-h {
  font-weight: bold;
  color: #4e9da6;
  font-size: 19px;
  margin: 0 0 16px 0;
}

.col-btns { list-style: none; padding: 0; margin: 0; }

.col-btns li { margin: 0 0 12px 0; }

.col-btns a {
  display: block;
  position: relative;
  background: #fdf9f2;
  border: 1px solid #cfe1df;
  border-radius: 34px;
  color: #2f6f75 !important;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  padding: 17px 54px 17px 30px;
}

.col-btns a:after {
  position: absolute;
  right: 26px;
  top: 50%;
  margin-top: -5px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #4e9da6;
  border-right: 2px solid #4e9da6;
  transform: rotate(45deg);
  content: "";
}

.col-btns a:hover {
  background: #4e9da6;
  color: #fff !important;
  border-color: #4e9da6;
}

.col-btns a:hover:after { border-color: #fff; }


/* ---------- 記事監修者 ---------- */

.col-sv {
  border: 1px solid #cfe1df;
  background: #fdf9f2;
  padding: 28px;
  margin: 0 0 40px 0;
  overflow: hidden;
  zoom: 1;
}

.col-sv-photo {
  float: left;
  width: 150px;
  margin: 0 28px 0 0;
  text-align: center;
}

.col-sv-photo img {
  width: 100%;
  height: auto;
  border: 3px solid #fff;
  border-radius: 50%;
}

.col-sv-photo a {
  display: inline-block;
  margin: 10px 0 0 0;
  font-size: 13px;
}

.col-sv-body { overflow: hidden; }

.col-sv-label {
  display: inline-block;
  background: #4e9da6;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 6px 12px;
  margin: 0 0 12px 0;
}

.col-sv-name {
  font-size: 21px;
  font-weight: bold;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.col-sv-name small {
  font-size: 13px;
  font-weight: normal;
  color: #666;
  margin-left: 12px;
}

.col-sv-qual {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
}

.col-sv-career {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.col-sv-career li { margin: 0; }


/* ---------- 参考文献 ---------- */

.col-ref {
  border-top: 1px solid #e3ded4;
  padding: 26px 0 0 0;
  margin: 0 0 34px 0;
}

.col-ref-h {
  font-weight: bold;
  color: #4e9da6;
  font-size: 17px;
  margin: 0 0 12px 0;
}

.col-ref ol { padding: 0 0 0 2em; margin: 0; font-size: 13px; line-height: 1.85; list-style: decimal; }
.col-ref li { margin: 0 0 .7em 0; word-break: break-all; }


/* ---------- 記事下の戻り導線 ---------- */

.col-back { text-align: center; margin: 0; }

.col-back a {
  display: inline-block;
  border: 1px solid #4e9da6;
  border-radius: 30px;
  color: #4e9da6 !important;
  font-size: 15px;
  padding: 13px 40px;
  text-decoration: none;
}

.col-back a:hover { background: #4e9da6; color: #fff !important; }


/* ---------- 一覧ページ ---------- */

.col-lead { margin: 0 0 32px 0; }

.col-cats {
  list-style: none;
  padding: 0;
  margin: 0 0 34px 0;
  overflow: hidden;
  zoom: 1;
}

.col-cats li { float: left; margin: 0 12px 12px 0; }

.col-cats a {
  display: block;
  border: 1px solid #cfe1df;
  border-radius: 30px;
  background: #fdf9f2;
  color: #2f6f75 !important;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 26px;
}

.col-cats a:hover,
.col-cats a.is-current { background: #4e9da6; color: #fff !important; border-color: #4e9da6; }

.col-list { list-style: none; padding: 0; margin: 0; }

.col-list > li {
  border: 1px solid #e3ded4;
  padding: 24px 28px;
  margin: 0 0 18px 0;
}

.col-list-meta {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px 0;
}

.col-list-meta .col-list-cat {
  display: inline-block;
  background: #4e9da6;
  color: #fff;
  line-height: 1;
  padding: 5px 10px;
  margin-left: 12px;
}

.col-list-title {
  font-size: 19px;
  line-height: 1.6;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.col-list-title a { color: #4e9da6 !important; text-decoration: none; }
.col-list-title a:hover { text-decoration: underline; }

.col-list-ex { margin: 0; font-size: 14px; line-height: 1.85; }


/* ---------- 画面が狭いとき ---------- */

@media screen and (max-width: 919px) {

  /* グローバルナビの画像は固定184pxのため、狭い画面で横にはみ出す。
     はみ出すとヘッダーとフッターの背景が右端まで届かなくなるので、
     画像を枠にあわせて伸縮させる。 */
  #glovalNavi {
    width: 90%;
    margin: 0 auto 14px auto;
  }
  #glovalNavi ul { display: block; width: 100%; height: auto; }
  #glovalNavi ul:after { content: ""; display: block; clear: both; }
  #glovalNavi ul li {
    float: left;
    width: 50%;
    padding: 0 5px 10px 5px;
  }
  #glovalNavi ul li a { display: block; }
  #glovalNavi ul li img {
    display: block;
    width: 100%;
    max-width: 184px;
    height: auto;
    margin: 0 auto;
  }

  /* 診療時間の表も、枠に収める */
  #headCol .headtxt_sche table { width: 100%; }

  /* フッターの帯が右端まで届かない件。
     サイト共通のCSSに * { box-sizing: border-box } があるため、
     width:90% にパディング5%+5%が含まれてしまい、幅が90%で止まる。
     パディングはそのままに、幅だけ100%へ戻す。 */
  #footer .footcol { width: 100%; }

  #crumbs {
    width: 90%;
    padding: 12px 0 4px 0;
    text-align: left;
    font-size: 12px;
    line-height: 1.7;
  }

  .col-wrap { width: 100%; padding: 0 0 36px 0; font-size: 15px; }
  .col-inner { width: 90%; }
  .col-title { font-size: 21px; }
  .col-body h3 { font-size: 18px; margin-top: 38px; padding-left: 12px; }
  .col-case-h,
  .col-faq .col-q { font-size: 16px; }
  .col-toc,
  .col-case,
  .col-summary,
  .col-sv { padding: 18px; }
  .col-summary-h,
  .col-cta-h { font-size: 17px; }
  .col-sv-photo { float: none; width: 130px; margin: 0 auto 16px auto; }
  .col-btns a { font-size: 15px; padding: 15px 44px 15px 20px; }
  .col-faq .col-q,
  .col-faq .col-a { padding-left: 40px; }
  .col-faq .col-q:before,
  .col-faq .col-a:before { width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
  .col-faq .col-a:before { line-height: 26px; }
}