@charset "utf-8";

/* voice.css
 * Kidney - v1.0.0
 * Created : 2025-5-15
 * 私の体験
 * **************************************************
 * Root
 * Section
 * Heading
 * Voice
 * 
 * 更新履歴：
 * **************************************************
 */

 /* Root
------------------------------------------------------------------ */
:root {
  --font-size-subpage-voice-h2: 1.5rem;
  --font-size-subpage-voice-h3: 1.0rem;
}

 /* Section
------------------------------------------------------------------ */
#subpage.voice .content__inner section:first-child,
#subpage.voice .content__inner section + section {
  padding-bottom: 30px;
}

/* Heading
------------------------------------------------------------------ */
#subpage.voice .voice-exp-ttl h2 {
  font-size: var(--font-size-subpage-voice-h2);
  font-weight: 600;
  line-height: 1.6;
}
#subpage.voice .voice-exp-ttl h3 {
  margin-top: 10px;
  font-size: var(--font-size-subpage-voice-h3);
  font-weight: 500;
}

#subpage.voice .voice-cmt-ttl h2 {
  font-size: var(--font-size-subpage-voice-h2);
  font-weight: 600;
  line-height: 1.6;
}
#subpage.voice .voice-cmt-ttl h3 {
  margin-top: 10px;
  font-size: var(--font-size-subpage-voice-h3);
  font-weight: 500;
}

/* Voice
------------------------------------------------------------------ */
#subpage.voice .voice-exp {
  background: url(../images/voice/voice-ill-kidney.svg) right 50px top 0 / 320px auto no-repeat
}
#subpage.voice .voice-exp-ttl {
  padding: 20px 50px 20px 70px;
  border-left: 5px solid #e78aa5;
}
#subpage.voice .voice-exp-body {
  margin-top: 20px;
  padding: 30px 50px 30px 70px;
  border-left: 1px solid var(--color-sub-elem);
}
#subpage.voice .voice-exp-body .voice-exp-body__inner {
}

 /* Comment
------------------------------------------------------------------ */
#subpage.voice .voice-cmt {
  padding: 50px 70px 30px 70px;
  background-color: #fafafa;
}
#subpage.voice .voice-cmt-ttl {
}
#subpage.voice .voice-cmt-body {
  margin-top: 40px;
  padding-bottom: 30px;
}


@media screen and (max-width: 980px) {
  /* Root
  ------------------------------------------------------------------ */
  :root {
    --font-size-subpage-voice-h2: 1.375rem;
    --font-size-subpage-voice-h3: 1.0rem;
  }

 /* Section
  ------------------------------------------------------------------ */
  #subpage.voice .content__inner section:first-child {
    padding-bottom: 0;
  }
  #subpage.voice .content__inner section + section {
    padding-bottom: 30px;
  }

  /* Heading
  ------------------------------------------------------------------ */
  #subpage.voice .voice-exp-ttl h2 {
    font-size: var(--font-size-subpage-voice-h2);
  }
  #subpage.voice .voice-exp-ttl h3 {
    margin-top: 20px;
    font-size: var(--font-size-subpage-voice-h3);
  }

  #subpage.voice .voice-cmt-ttl h2 {
    font-size: var(--font-size-subpage-voice-h2);
    line-height: 1.6;
  }
  #subpage.voice .voice-cmt-ttl h3 {
    margin-top: 20px;
    font-size: var(--font-size-subpage-voice-h3);
  }

  /* Voice
  ------------------------------------------------------------------ */
  #subpage.voice .voice-exp {
    background: url(../images/voice/voice-ill-kidney.svg) right -5px top 80px / 180px auto no-repeat
  }
  #subpage.voice .voice-exp-ttl {
    margin-left: -10px;
    padding: 10px 0 20px 20px;
    border-left: 5px solid #e78aa5;
  }
  #subpage.voice .voice-exp-body {
    margin: 10px 0 0 -7px;
    padding: 30px 0 30px 20px;
    border-left: 1px solid var(--color-sub-elem);
  }

  /* Comment
  ------------------------------------------------------------------ */
  #subpage.voice .voice-cmt {
    margin: 0 -20px;
    padding: 30px 30px 30px 30px;
    background-color: #fafafa;
  }
  #subpage.voice .voice-cmt-body {
    margin-top: 30px;
    padding-bottom: 0;
  }
}