@charset "UTF-8";

/* ==========================================================================
  global
========================================================================== */

/* ======CSS変数====== */
:root{
  --main-wrapper: 1008px;
  --px24:24px;
  --sitemap-color: #ff1493;
  --disease-color: #8F93D3;
}

/* ==========================================================================
  foundation
========================================================================== */

/* ======基本設定====== */

/* ==========================================================================
  layout
========================================================================== */

/* ======レイアウト====== */
.h1color{
  background-color: #FFE9F2 !important;
}

.h1color--disease{
  background-color: #FDE8FF !important;
}

#mainWrapper {
  display: flex;
  justify-content: space-between;
  max-width: var(--main-wrapper);
  margin: 40px auto 0;
}

/* メイン */
.mainContent {
  width: 726px;
}

/* サイドナビ */
.sideNavIn {
  width: 222px;
}

.sideNavPforCC {
  background: #125bf5;
  border-radius: 5px;
  border: 1px solid #2f528f;
}

.sideNavPforCC a {
  display: flex;
  align-items: center;
  padding: 15px 10px 15px 1em;
  justify-content: center;
}

.sideNavPforCC p {
  color: #fff;
  font-size: var(--px16);
}

/* 下層recommend */
.p-recommend {
  margin-top: 57px;
  padding-top: 120px;
  border-top: 1px solid #E6E6E6;
}



/* ==========================================================================
  component
========================================================================== */

/* ======コンポーネント（最小単位のパーツ）====== */

/* h2 */
#mainWrapper h2 {
  position: relative;
  padding: 0 0 12px 10px;
  font-size: var(--px24);
}
#mainWrapper h2::after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 2px solid var(--sitemap-color);
}

#mainWrapper .mainContent--disease h2::after {
  border-bottom: 2px solid var(--disease-color);
}

/* h3 */
#mainWrapper h3 {
  display: block;
  margin-top: 40px;
  padding: 15px 15px 13px;
  background: #FFE9F2;
  border-left: 7px solid var(--sitemap-color);
  font-size: var(--px18);
  font-weight: bold;
}
#mainWrapper .mainContent--disease h3 {
  border-left: 7px solid var(--disease-color);
  background: #FDE8FF;
}
#mainWrapper h3 a {
  color: #125BF5;
}

/* link */
.defaultTxtListS {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.defaultTxtListS li {
  display: inline-block;
  padding: 10px 15px;
}

.defaultTxtListS li a:hover{
  color: var(--sitemap-color);
  text-decoration: underline;
}

.mainContent--disease .defaultTxtListS li a:hover{
  color: var(--disease-color);
}

.defaultTxtListS li:before {
  content: "\276F";
  margin-right: 5px;
  vertical-align: text-top;
  font-size: var(--px12);
  color: var(--sitemap-color);
}
.mainContent--disease .defaultTxtListS li:before {
  color: var(--disease-color);
}


.defaultTxtListS p {
  margin: -18px 0 0 15px;
  font-size: var(--px16);
}


/* ==========================================================================
  メディアクエリ（1099px以下）
========================================================================== */

@media screen and (max-width: 1099px) {
  :root{
    --main-wrapper: 91.72vw;
    --px24: 2.18vw;
  }

  /* メイン */
  .mainContent {
    width: 66.06vw;
  }

  /* サイドナビ */
   .sideNavIn {
    width: 20.2vw;
  }
  .sideNavPforCC a {
    padding: 1.36vw 0.91vw;
  } 

  /* 下層recommend */
  .p-recommend {
    margin-top: 5.19vw;
    padding-top: 10.92vw;
  }
}

@media screen and (max-width: 500px) {
  :root{
    --main-wrapper: 94.67vw;
    --px24: 6.4vw;
  }
}

/* ==========================================================================
  メディアクエリ（500px以下）
========================================================================== */

@media screen and (max-width: 500px) {
  :root{
    --main-wrapper: 94.67vw;
    --px24: 6.4vw;
  }

  /* メイン */
  .mainContent {
    width: var(--main-wrapper);
  }


  /* サイドナビ */
  .sideNavIn {
    display: none;
  }

  .p-recommend {
    margin-top: 10.67vw;
    border-top: none;
    padding-top: 0;
  }

  .defaultTxtListS li {
    display: block;
  }  
}