@charset "utf-8";



/* CSS Document */

:root {

  --keycol: #1b7895;

  --titcol: #5c2f0d;

  --pointcol: #fd930d;

  --pointcol2: #ffae0e;

  --capcol: #666666;

  --btnmail: #E561A3;

  --btnline: #07b53b;

  --btnmap: #68CC19;

  --bocol: #C4C4C4;

  --bgcol: #fff5d9;

  --bgcol2: #F1FFD9;

  --l-blue: #DFEFFF;

  --shadow: 0px 0px 34px rgba(0, 0, 0, 0.06);

  --baseft: calc(100vw/1280\*16);

  --tra: 0.5s;

  --basevw: calc(100vw/1280);

}



@media (max-width: 767px) {

  :root {

    --baseft: calc(100vw/768\*16);

    --basevw: calc(100vw/768);

  }



}



@media (min-width: 576px) {

  .xs {

    display: none;

  }

}



@media (max-width: 576px) {

  :root {

    --baseft: calc(100vw/576\*16);

    --basevw: calc(100vw/576);

  }



}



@media (max-width: 375px) {

  :root {

    --baseft: calc(100vw/375\*14);

    --basevw: calc(100vw/375);

  }



}



@media (min-width: 1280px) {

  :root {

    --baseft: 1.6rem;

    --basevw: 1px;

  }

}



html {

  font-size: 62.5%;

}



/*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

 BASE

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\**/



\* {

  margin: 0;

  padding: 0;

  font-size: 100%;

  text-align: left;

  box-sizing: border-box;

  word-break: break-all;

}



\* img {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

  padding: 0;

  border: 0;

}



\* hr {

  height: 0;

  margin: 0;

  padding: 0;

  border: 0;

}



/* common style */

.clearfix:after {

  content: "";

  display: block;

  height: 0;

  visibility: hidden;

  clear: both;

}



.clearfix {

  display: inline-table;

}



/* Hides from IE-mac */

* html .clearfix {

  height: 1%;

}



.clearfix {

  display: block;

}



/* End hide from IE-mac */



a:link {

  text-decoration: underline;

  color: #0000ff;

  outline: none;

}



a:active {

  text-decoration: none;

  color: #ff0000;

}



a:visited {

  text-decoration: underline;

  color: #0000ff;

}



a:hover {

  text-decoration: none;

  color: #ff0000;

}



a.mouse_on :hover {

  opacity: 0.7;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: 100%;

  margin: 0;

  padding: 0;

}



ul li {

  list-style-image: none;

  list-style-type: none;

  margin: 0;

  padding: 0;

  border: 0;

}



ol li {

  list-style-position: inside;

  margin: 0;

  padding: 0;

  border: 0;

}



div,

p,

li,

span {

  font-size: 100%;

  margin: 0;

  padding: 0;

  border: 0;

}



p.cap {

  font-size: 75%;

}



/* editor */

.alignnone {

  margin: 5px 20px 20px 0;

}



.aligncenter,

div.aligncenter {

  display: block;

  margin: 5px auto 5px auto;

}



.alignright {

  float: right;

  margin: 5px 0 20px 20px;

}



.alignleft {

  float: left;

  margin: 5px 20px 20px 0;

}



.aligncenter {

  display: block;

  margin: 5px auto 5px auto;

}



a img.alignright {

  float: right;

  margin: 5px 0 20px 20px;

}



a img.alignnone {

  margin: 5px 20px 20px 0;

}



a img.alignleft {

  float: left;

  margin: 5px 20px 20px 0;

}



a img.aligncenter {

  display: block;

  margin-left: auto;

  margin-right: auto
}







/* 要素配置 */

.layout_left {

  float: left;

}



.layout_right {

  float: right;

}



/* イメージ配置 */

.img_center {

  display: block;

  margin: 0 auto;

  padding: 0;

}



.img_left {

  width: auto;

  display: block;

  float: left;

}



.img_right {

  width: auto;

  display: block;

  float: right;

}



/* 文字配置 */

.txt_center {

  text-align: center;

}



.txt_left {

  text-align: left;

}



.txt_right {

  text-align: right;

}



/* 文字色 */

.txt_red {

  color: #dc143c;

}



.txt_blue {

  color: #3366cc;

}



/* 文字サイズ */

.fnt_10 {

  font-size: 10px;

}



.fnt_11 {

  font-size: 11px;

}



.fnt_12 {

  font-size: 12px;

}



.fnt_14 {

  font-size: 14px;

}



.fnt_14b {

  font-size: 14px;

  font-weight: bold;

}



.fnt_16 {

  font-size: 16px;

}



.fnt_16b {

  font-size: 16px;

  font-weight: bold;

}



.fnt_18 {

  font-size: 18px;

}



.fnt_18b {

  font-size: 18px;

  font-weight: bold;

}



.fnt_24 {

  font-size: 24px;

}



.fnt_24b {

  font-size: 24px;

  font-weight: bold;

}



.fnt_32 {

  font-size: 32px;

}



.fnt_32b {

  font-size: 32px;

  font-weight: bold;

}



/* マージン指定 */

.mgn_5 {

  margin: 5px;

}



.mgn_10 {

  margin: 10px;

}



.mgn_15 {

  margin: 15px;

}



.mgn_20 {

  margin: 20px;

}



.mgn_tb5 {

  margin: 5px 0;

}



.mgn_tb10 {

  margin: 10px 0;

}



.mgn_tb15 {

  margin: 15px 0;

}



.mgn_tb20 {

  margin: 20px 0;

}



.mgn_lr5 {

  margin: 0 5px;

}



.mgn_lr10 {

  margin: 0 10px;

}



.mgn_lr15 {

  margin: 0 15px;

}



.mgn_lr20 {

  margin: 0 20px;

}



.mgn_tr5 {

  margin: 5px 5px 0 0;

}



.mgn_tr10 {

  margin: 10px 10px 0 0;

}



.mgn_tr15 {

  margin: 15px 15px 0 0;

}



.mgn_tr20 {

  margin: 20px 20px 0 0;

}



.mgn_tl5 {

  margin: 5px 0 0 5px;

}



.mgn_tl10 {

  margin: 10px 0 0 10px;

}



.mgn_tl15 {

  margin: 15px 0 0 15px;

}



.mgn_tl20 {

  margin: 20px 0 0 20px;

}



.mgn_br5 {

  margin: 0 5px 5px 0;

}



.mgn_br10 {

  margin: 0 10px 10px 0;

}



.mgn_br15 {

  margin: 0 15px 15px 0;

}



.mgn_br20 {

  margin: 0 20px 20px 0;

}



.mgn_bl5 {

  margin: 0 0 5px 5px;

}



.mgn_bl10 {

  margin: 0 0 10px 10px;

}



.mgn_bl15 {

  margin: 0 0 15px 15px;

}



.mgn_bl20 {

  margin: 0 0 20px 20px;

}



.mgn_tbr5 {

  margin: 5px 5px 5px 0;

}



.mgn_tbr10 {

  margin: 10px 10px 10px 0;

}



.mgn_tbr15 {

  margin: 15px 15px 15px 0;

}



.mgn_tbr20 {

  margin: 20px 20px 20px 0;

}



.mgn_tbl5 {

  margin: 5px 0 5px 5px;

}



.mgn_tbl10 {

  margin: 10px 0 10px 10px;

}



.mgn_tbl15 {

  margin: 15px 0 15px 15px;

}



.mgn_tbl20 {

  margin: 20px 0 20px 20px;

}



.mgn_tlr5 {

  margin: 5px 5px 0 5px;

}



.mgn_tlr10 {

  margin: 10px 10px 0 10px;

}



.mgn_tlr15 {

  margin: 15px 15px 0 15px;

}



.mgn_tlr20 {

  margin: 20px 20px 0 20px;

}



.mgn_blr5 {

  margin: 0 5px 5px 5px;

}



.mgn_blr10 {

  margin: 0 10px 10px 10px;

}



.mgn_blr15 {

  margin: 0 15px 15px 15px;

}



.mgn_blr20 {

  margin: 0 20px 20px 20px;

}



.mgn_t5 {

  margin-top: 5px;

}



.mgn_t10 {

  margin-top: 10px;

}



.mgn_t15 {

  margin-top: 15px;

}



.mgn_t20 {

  margin-top: 20px;

}



.mgn_t25 {

  margin-top: 25px;

}



.mgn_t30 {

  margin-top: 30px;

}



.mgn_t35 {

  margin-top: 35px;

}



.mgn_t40 {

  margin-top: 40px;

}



.mgn_b5 {

  margin-bottom: 5px;

}



.mgn_b10 {

  margin-bottom: 10px;

}



.mgn_b15 {

  margin-bottom: 15px;

}



.mgn_b20 {

  margin-bottom: 20px;

}



.mgn_b25 {

  margin-bottom: 25px;

}



.mgn_b30 {

  margin-bottom: 30px;

}



.mgn_b35 {

  margin-bottom: 35px;

}



.mgn_b40 {

  margin-bottom: 40px;

}



.mgn_l5 {

  margin-left: 5px;

}



.mgn_l10 {

  margin-left: 10px;

}



.mgn_l15 {

  margin-left: 15px;

}



.mgn_l20 {

  margin-left: 20px;

}



.mgn_l25 {

  margin-left: 25px;

}



.mgn_l30 {

  margin-left: 30px;

}



.mgn_l35 {

  margin-left: 35px;

}



.mgn_l40 {

  margin-left: 40px;

}



.mgn_r5 {

  margin-right: 5px;

}



.mgn_r10 {

  margin-right: 10px;

}



.mgn_r15 {

  margin-right: 15px;

}



.mgn_r20 {

  margin-right: 20px;

}



.mgn_r25 {

  margin-right: 25px;

}



.mgn_r30 {

  margin-right: 30px;

}



.mgn_r35 {

  margin-right: 35px;

}



.mgn_r40 {

  margin-right: 40px;

}



/* パディング指定 */

.pdn_5 {

  padding: 5px;

}



.pdn_10 {

  padding: 10px;

}



.pdn_15 {

  padding: 15px;

}



.pdn_20 {

  padding: 20px;

}



.pdn_tb5 {

  padding: 5px 0;

}



.pdn_tb10 {

  padding: 10px 0;

}



.pdn_tb15 {

  padding: 15px 0;

}



.pdn_tb20 {

  padding: 20px 0;

}



.pdn_lr5 {

  padding: 0 5px;

}



.pdn_lr10 {

  padding: 0 10px;

}



.pdn_lr15 {

  padding: 0 15px;

}



.pdn_lr20 {

  padding: 0 20px;

}



.pdn_t5 {

  padding-top: 5px;

}



.pdn_t10 {

  padding-top: 10px;

}



.pdn_t15 {

  padding-top: 15px;

}



.pdn_t20 {

  padding-top: 20px;

}



.pdn_t25 {

  padding-top: 25px;

}



.pdn_t30 {

  padding-top: 30px;

}



.pdn_t35 {

  padding-top: 35px;

}



.pdn_t40 {

  padding-top: 40px;

}



.pdn_b5 {

  padding-bottom: 5px;

}



.pdn_b10 {

  padding-bottom: 10px;

}



.pdn_b15 {

  padding-bottom: 15px;

}



.pdn_b20 {

  padding-bottom: 20px;

}



.pdn_b25 {

  padding-bottom: 25px;

}



.pdn_b30 {

  padding-bottom: 30px;

}



.pdn_b35 {

  padding-bottom: 35px;

}



.pdn_b40 {

  padding-bottom: 40px;

}



.pdn_l5 {

  padding-left: 5px;

}



.pdn_l10 {

  padding-left: 10px;

}



.pdn_l15 {

  padding-left: 15px;

}



.pdn_l20 {

  padding-left: 20px;

}



.pdn_l25 {

  padding-left: 25px;

}



.pdn_l30 {

  padding-left: 30px;

}



.pdn_l35 {

  padding-left: 35px;

}



.pdn_l40 {

  padding-left: 40px;

}



.pdn_r5 {

  padding-right: 5px;

}



.pdn_r10 {

  padding-right: 10px;

}



.pdn_r15 {

  padding-right: 15px;

}



.pdn_r20 {

  padding-right: 20px;

}



.pdn_r25 {

  padding-right: 25px;

}



.pdn_r30 {

  padding-right: 30px;

}



.pdn_r35 {

  padding-right: 35px;

}



.pdn_r40 {

  padding-right: 40px;

}







/* ナビゲーション */



#symptoms_page .disease-nav {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

  max-width: 950px;

  margin: 0 auto;

}



#symptoms_page .disease-nav__item {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  position: relative;



  min-height: 76px;

  padding: 15px 42px 15px 16px;



  background: #f8fbfb;

  border: 1px solid #d8e7e9;

  border-radius: 8px;



  color: #5c2f0d !important;

  text-decoration: none !important;



  transition: .25s;

}



#symptoms_page .disease-nav__item:hover {

  background: #1b7895;

  border-color: #1b7895;

  color: #fff !important;

  opacity: 1;

  transform: translateY(-2px);

  box-shadow: 0 5px 12px rgba(0, 0, 0, .12);

}





/* 01〜05 */



#symptoms_page .disease-nav__icon {

  display: flex;

  justify-content: center;

  align-items: center;



  flex-shrink: 0;



  width: 38px;

  height: 38px;

  margin-right: 12px;



  border-radius: 50%;

  background: #ffae0e;



  color: #fff !important;

  font-size: 12px;

  font-weight: 700;

}





/* 病名 */



#symptoms_page .disease-nav__name {

  color: inherit !important;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.4;

}





/* ↓ */



#symptoms_page .disease-nav__arrow {

  position: absolute;

  right: 15px;

  top: 50%;



  transform: translateY(-50%);



  color: #ffae0e !important;

  font-size: 17px;

  font-weight: 700;

}



#symptoms_page .disease-nav__item:hover .disease-nav__arrow {

  color: #fff !important;

}





/* アンカー位置 */



#dementia,

#parkinson,

#headache,

#carpal,

#gravis {

  scroll-margin-top: 30px;

}





/* =========================================

   スマホ

========================================= */



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



  #symptoms_page>section:first-child {

    padding: 30px 0;

  }



  #symptoms_page .disease-guide {

    padding: 28px 18px;

    border-radius: 10px;

  }



  #symptoms_page .disease-guide__head {

    margin-bottom: 24px;

  }



  #symptoms_page .disease-guide__sub {

    font-size: 11px;

  }



  #symptoms_page .disease-guide__head h2 {

    font-size: 24px;

  }



  #symptoms_page .disease-guide__head p {

    font-size: 14px;

    line-height: 1.8;

    text-align: left;

  }



  #symptoms_page .disease-nav {

    grid-template-columns: 1fr;

    gap: 9px;

  }



  #symptoms_page .disease-nav__item {

    min-height: 62px;

    padding: 11px 38px 11px 12px;

  }



  #symptoms_page .disease-nav__icon {

    width: 32px;

    height: 32px;

    margin-right: 10px;

    font-size: 10px;

  }



  #symptoms_page .disease-nav__name {

    font-size: 14px;

  }

}





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



  #symptoms_page .disease-guide {

    padding: 28px 18px;

    border-radius: 10px;

  }



  #symptoms_page .disease-guide__head {

    margin-bottom: 24px;

  }



  #symptoms_page .disease-guide__head p {

    text-align: left;

    font-size: 14px;

  }



  #symptoms_page .disease-nav {

    grid-template-columns: 1fr;

    gap: 9px;

  }



  #symptoms_page .disease-nav__item {

    min-height: 62px;

    padding: 11px 38px 11px 12px;

  }



  #symptoms_page .disease-nav__icon {

    width: 32px;

    height: 32px;

    margin-right: 10px;

    font-size: 10px;

  }



  #symptoms_page .disease-nav__name {

    font-size: 14px;

  }

}



/* =========================================================

   病気の説明ページ

   explanation.html

========================================================= */



/* 上部セクション */

#symptoms_page>section:first-child {

  padding: 50px 0 55px;

}





/* 病気ガイド全体 */

#symptoms_page .disease-guide {

  width: 100%;

  margin: 0 auto;

  padding: 42px 45px 48px;



  background: #fff;

  border-top: 4px solid var(--keycol);

  border-radius: 14px;



  box-shadow: var(--shadow);



  box-sizing: border-box;

}





/* ==============================

   見出し

============================== */



#symptoms_page .disease-guide__head {

  margin-bottom: 32px;

  text-align: center;

}





#symptoms_page .disease-guide__sub {

  display: block;



  margin-bottom: 8px;



  color: var(--keycol);



  font-family: "Overpass", sans-serif;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.16em;



  text-align: center;

}





#symptoms_page .disease-guide__head h2 {

  margin: 0 0 18px;

  padding-bottom: 20px;



  color: var(--titcol);



  font-size: 30px;

  font-weight: 700;

  line-height: 1.4;



  text-align: center;

}





#symptoms_page .disease-guide__head p {

  margin: 0;



  color: var(--titcol);



  font-size: 15px;

  line-height: 1.9;



  text-align: center;

}





/* ==============================

   病気ナビゲーション

============================== */



#symptoms_page .disease-nav {

  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 14px;



  width: 100%;

  max-width: 1000px;



  margin: 0 auto;

}





/* 各ボタン */



#symptoms_page .disease-nav__item,

#symptoms_page .disease-nav__item:link,

#symptoms_page .disease-nav__item:visited {

  position: relative;



  display: flex;

  align-items: center;



  min-width: 0;

  min-height: 76px;



  padding: 15px 42px 15px 16px;



  background: #f8fbfb;



  border: 1px solid #d8e7e9;

  border-radius: 8px;



  color: var(--titcol) !important;



  text-decoration: none !important;



  box-sizing: border-box;



  transition: 0.25s;

}





#symptoms_page .disease-nav__item:hover {

  background: var(--keycol);



  border-color: var(--keycol);



  color: #fff !important;



  text-decoration: none !important;



  opacity: 1;



  transform: translateY(-2px);



  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);

}





/* ==============================

   01〜05

============================== */



#symptoms_page .disease-nav__icon {

  display: flex;



  justify-content: center;

  align-items: center;



  flex: 0 0 38px;



  width: 38px;

  height: 38px;



  margin-right: 12px;



  border-radius: 50%;



  background: var(--pointcol2);



  color: #fff !important;



  font-size: 12px;

  font-weight: 700;

  line-height: 1;

}





/* ==============================

   病名

============================== */



#symptoms_page .disease-nav__name {

  min-width: 0;



  color: inherit !important;



  font-size: 15px;

  font-weight: 700;

  line-height: 1.4;

}





/* ==============================

   矢印

============================== */



#symptoms_page .disease-nav__arrow {

  position: absolute;



  top: 50%;

  right: 15px;



  color: var(--pointcol2) !important;



  font-size: 17px;

  font-weight: 700;

  line-height: 1;



  transform: translateY(-50%);

}





#symptoms_page .disease-nav__item:hover .disease-nav__arrow {

  color: #fff !important;

}





/* ==============================

   アンカー位置

============================== */



#dementia,

#parkinson,

#headache,

#carpal,

#gravis {

  scroll-margin-top: 30px;

}





/* =========================================================

   スマートフォン

========================================================= */



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



  #symptoms_page>section:first-child {

    padding: 30px 0 35px;

  }





  #symptoms_page .disease-guide {

    padding: 28px 18px 30px;



    border-radius: 10px;

  }





  #symptoms_page .disease-guide__head {

    margin-bottom: 24px;

  }





  #symptoms_page .disease-guide__sub {

    margin-bottom: 6px;



    font-size: 11px;

  }





  #symptoms_page .disease-guide__head h2 {

    margin-bottom: 15px;



    padding-bottom: 16px;



    font-size: 24px;

  }





  #symptoms_page .disease-guide__head p {

    font-size: 14px;

    line-height: 1.8;



    text-align: left;

  }





  #symptoms_page .disease-nav {

    grid-template-columns: 1fr;



    gap: 9px;



    max-width: none;

  }





  #symptoms_page .disease-nav__item,

  #symptoms_page .disease-nav__item:link,

  #symptoms_page .disease-nav__item:visited {

    min-height: 62px;



    padding: 11px 38px 11px 12px;

  }





  #symptoms_page .disease-nav__icon {

    flex-basis: 32px;



    width: 32px;

    height: 32px;



    margin-right: 10px;



    font-size: 10px;

  }





  #symptoms_page .disease-nav__name {

    font-size: 14px;

  }





  #symptoms_page .disease-nav__arrow {

    right: 12px;



    font-size: 15px;

  }





  #dementia,

  #parkinson,

  #headache,

  #carpal,

  #gravis {

    scroll-margin-top: 20px;

  }

}

/* 右側固定ボタンの文字色を白に固定 */
.fixed_btn .fixed_btn-item a,
.fixed_btn .fixed_btn-item a:link,
.fixed_btn .fixed_btn-item a:visited,
.fixed_btn .fixed_btn-item a:hover,
.fixed_btn .fixed_btn-item a:active {
  color: #fff !important;
}

/* =========================================================
   病気の説明｜各疾患セクションを読みやすく
========================================================= */

/* 各疾患セクション */
#symptoms_page .sec {
  margin-bottom: 70px;
}

/* 認知症・パーキンソン病などの見出し */
#symptoms_page .sec>h2,
#symptoms_page .sec>h3 {
  position: relative;
  margin: 0 0 28px;
  padding: 0 0 16px 18px;

  color: #5c2f0d;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;

  border-bottom: 2px solid #1b7895;
}

/* 見出し左のアクセント */
#symptoms_page .sec>h2::before,
#symptoms_page .sec>h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;

  width: 5px;
  height: 32px;

  background: #ffae0e;
  border-radius: 3px;
}

/* 本文を白いカードに */
#symptoms_page .sec>.row,
#symptoms_page .sec>.content,
#symptoms_page .sec>.box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);

  overflow: hidden;
}

/* 本文 */
#symptoms_page .sec p {
  color: #5c2f0d;
  font-size: 16px;
  line-height: 2;
}

/* セクション内の小見出し */
#symptoms_page .sec h3,
#symptoms_page .sec h4 {
  color: #1b7895;
  font-weight: 700;
  line-height: 1.5;
}

/* リスト */
#symptoms_page .sec ul,
#symptoms_page .sec ol {
  line-height: 1.9;
}

#symptoms_page .sec li {
  margin-bottom: 7px;
}

/* 画像 */
#symptoms_page .sec img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   スマホ
========================================================= */

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

  #symptoms_page .sec {
    margin-bottom: 45px;
  }

  #symptoms_page .sec>h2,
  #symptoms_page .sec>h3 {
    margin-bottom: 20px;
    padding: 0 0 12px 14px;

    font-size: 22px;
  }

  #symptoms_page .sec>h2::before,
  #symptoms_page .sec>h3::before {
    top: 3px;
    width: 4px;
    height: 27px;
  }

  #symptoms_page .sec p {
    font-size: 14px;
    line-height: 1.85;
  }
}

/* =========================================================
   病気の説明ページ
   各疾患セクション PC / SP 改善版
========================================================= */

/* -------------------------
   疾患セクション全体
------------------------- */

#symptoms_page .container>section {
  margin-bottom: 90px;
}

#symptoms_page .section_s.staff {
  margin-bottom: 42px;
}


/* -------------------------
   大見出し
   認知症 / パーキンソン病 / 頭痛
   手根管症候群 / 重症筋無力症
------------------------- */

#symptoms_page h3.u_l {
  position: relative;
  margin: 0 0 30px !important;
  padding: 0 0 16px 18px !important;

  color: #5c2f0d !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.4;

  border-bottom: 3px solid #1b7895 !important;
}

/* 左のオレンジアクセント */
#symptoms_page h3.u_l::before {
  content: "";
  position: absolute;

  left: 0;
  top: 5px;

  width: 5px;
  height: 32px;

  background: #ffae0e;
  border-radius: 4px;
}


/* -------------------------
   疾患トップ
   画像＋説明
------------------------- */

#symptoms_page h3.u_l+.staff-prof-box {
  display: flex;
  align-items: stretch;

  margin-bottom: 50px;

  background: #fff;
  border: 1px solid #eee7dc;
  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}


/* 左側画像 */
#symptoms_page h3.u_l+.staff-prof-box .img {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34%;
  width: 34%;

  margin: 0 !important;
  padding: 35px;

  background: #fff3f7;

  box-sizing: border-box;
}

#symptoms_page h3.u_l+.staff-prof-box .img img {
  display: block;

  width: auto;
  max-width: 100%;
  max-height: 270px;

  margin: auto;
}


/* 右側文章 */
#symptoms_page h3.u_l+.staff-prof-box .staff-txt {
  display: flex;
  align-items: center;

  flex: 1;

  padding: 38px 42px !important;

  background: #fff;

  box-sizing: border-box;
}

#symptoms_page h3.u_l+.staff-prof-box .staff-txt p {
  margin: 0 !important;

  color: #5c2f0d;
  font-size: 16px;
  line-height: 2;
}


/* -------------------------
   小見出し
   1. アルツハイマー病 等
------------------------- */

#symptoms_page h5.u_l {
  position: relative;

  margin: 48px 0 20px !important;
  padding: 15px 20px 15px 62px !important;

  color: #5c2f0d !important;

  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.5;

  background: #f8fbfb;

  border: 1px solid #d8e7e9 !important;
  border-left: 5px solid #1b7895 !important;
  border-radius: 8px !important;

  box-sizing: border-box;
}


/* 小見出しのオレンジ丸 */
#symptoms_page h5.u_l::before {
  content: "";

  position: absolute;

  left: 20px;
  top: 50%;

  width: 25px;
  height: 25px;

  background: #ffae0e;

  border-radius: 50%;

  transform: translateY(-50%);
}


/* -------------------------
   小見出し下の本文
------------------------- */

#symptoms_page h5.u_l+.staff-prof-box {
  margin: 0 !important;
  padding: 0 !important;

  background: #fff;

  border: 1px solid #eee7dc;
  border-radius: 12px;

  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);

  overflow: hidden;
}

#symptoms_page h5.u_l+.staff-prof-box .staff-txt {
  width: 100% !important;

  padding: 28px 32px !important;

  box-sizing: border-box;
}

#symptoms_page h5.u_l+.staff-prof-box .staff-txt p {
  margin: 0 !important;

  color: #5c2f0d;

  font-size: 16px;
  line-height: 2;
}


/* -------------------------
   セクション間アンカー位置
------------------------- */

#dementia,
#parkinson,
#headache,
#carpal,
#gravis {
  scroll-margin-top: 30px;
}


/* =========================================================
   SP
========================================================= */

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

  /* 疾患ごとの間隔 */
  #symptoms_page .container>section {
    margin-bottom: 55px;
  }

  #symptoms_page .section_s.staff {
    margin-bottom: 28px;
  }


  /* -------------------------
       大見出し
    ------------------------- */

  #symptoms_page h3.u_l {
    margin-bottom: 20px !important;

    padding:
      0 0 12px 14px !important;

    font-size: 23px !important;

    border-bottom-width: 2px !important;
  }

  #symptoms_page h3.u_l::before {
    top: 3px;

    width: 4px;
    height: 27px;
  }


  /* -------------------------
       トップ画像＋文章
       SPは縦並び
    ------------------------- */

  #symptoms_page h3.u_l+.staff-prof-box {
    display: block;

    margin-bottom: 35px;

    border-radius: 12px;
  }

  #symptoms_page h3.u_l+.staff-prof-box .img {
    width: 100%;
    max-width: none;
    min-height: 210px;

    padding: 25px;

    background: #fff3f7;
  }

  #symptoms_page h3.u_l+.staff-prof-box .img img {
    max-width: 180px;
    max-height: 180px;
  }

  #symptoms_page h3.u_l+.staff-prof-box .staff-txt {
    display: block;

    width: 100%;

    padding: 22px 20px !important;
  }

  #symptoms_page h3.u_l+.staff-prof-box .staff-txt p {
    font-size: 14px;
    line-height: 1.9;
  }


  /* -------------------------
       小見出し
    ------------------------- */

  #symptoms_page h5.u_l {
    margin: 32px 0 14px !important;

    padding:
      13px 14px 13px 50px !important;

    font-size: 17px !important;

    border-left-width: 4px !important;
    border-radius: 7px !important;
  }

  #symptoms_page h5.u_l::before {
    left: 15px;

    width: 22px;
    height: 22px;
  }


  /* -------------------------
       小項目本文
    ------------------------- */

  #symptoms_page h5.u_l+.staff-prof-box {
    border-radius: 9px;
  }

  #symptoms_page h5.u_l+.staff-prof-box .staff-txt {
    padding: 20px 18px !important;
  }

  #symptoms_page h5.u_l+.staff-prof-box .staff-txt p {
    font-size: 14px;
    line-height: 1.9;
  }

}