@charset "utf-8";
/****************************************
 放射線診断科  #style-radiological-diagnosis.css
*****************************************/
/* 変数（カスタムプロパティ）の定義 */
:root {
  --question-padding: 1.5rem;
  --color-blue: #4892e3;
  --color-orange: #fcaf17;
}

/*-------------------------------------
  common
-------------------------------------*/
.heading-4 {
  margin-bottom: 0.5em;
  position: relative;
  font-weight: bold;
}
.heading-4::before {
  position: absolute;
  display: block;
  content: '';
  width: 0.9em;
  height: 0.9em;
  top: 0.15em;
  left: -1.2em;
  background: #ffc40f;
}

/*-------------------------------------
  Q&A
-------------------------------------*/
.question-and-answer-wrap {
  margin-top: 2em;
}

.question-and-answer {
  padding-bottom: 1em;
}
.question-and-answer:last-child {
  margin-bottom: 0;
}
.question-and-answer + .question-and-answer {
  padding-top: 1em;
  border-top: 1px dashed #ccc;
}

.question_text,
.answer_title {
  position: relative;
  font-weight: bold;
  padding: 0 var(--question-padding);
}
.question_text {
  margin-bottom: 0;
  cursor: pointer;
}
.question_text[aria-expanded='true'] {
  margin-bottom: 0.5em;
}

.answer {
  margin: 0;
  display: none;
}

.question_icon,
.answer_icon {
  position: absolute;
  left: 0;
}
.question_icon {
  color: var(--color-blue);
}
.answer_icon {
  color: var(--color-orange);
}

.answer_description {
  position: relative;
  margin: 0;
  padding: 0 var(--question-padding);
}
.answer_description p {
  margin-bottom: 0.25em;
}
.answer_description .answer_icon {
  font-weight: bold;
}

/* アコーディオンの挙動 */
.question_text::before,
.question_text::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 2px;
  background-color: #ccc;
}
.question_text::after {
  transform: translateY(-50%) rotate(90deg);
}
.question_text[aria-expanded='true']::after {
  transform: translateY(-50%);
}

.question_text[aria-expanded='true'] + .answer {
  display: block;
}