@charset "utf-8";
/****************************************
 センター病院  呼吸器外科 style-thoracic-surgery.css
*****************************************/
/* 変数（カスタムプロパティ）の定義 */
:root {
  --question-padding: 1.5rem;
  --color-blue: #4892e3;
  --color-orange: #fcaf17;
}

div {
  margin: 0;
  padding: 0;
}

/*-------------------------------------
  Top
-------------------------------------*/
.feature_label {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.feature {
  background-color: #f8f8f8;
  margin: 1.75em 0;
  padding: 1.15em;
  border-radius: 6px;
  width: 75%;
  box-sizing: border-box;
}

.article .txtbox ul li.feature_list {
  padding-left: 16px;
}

.article .txtbox ul li.feature_list::before {
  width: 6px;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: none;
  background-color: #333;
  border-radius: 50%;
}

.feature_list-wrap {
  margin: 0;
  padding-left: 12px;
}

/*-------------------------------------
  科長挨拶
-------------------------------------*/
.article .txtbox img.greeting_img {
  float: right;
  width: 33%;
  max-width: 33%;
  margin: 0 0 0.5em 1.5em;
}

.signature {
  margin-top: 2em;
  text-align: right;
  clear: both;
}
.signature p {
  margin-bottom: 0;
}
.signature p + p {
  margin-top: 0.5em;
}

/*-------------------------------------
  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_title {
  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 {
  margin: 0;
  padding: 0 var(--question-padding);
}
.answer_description p {
  margin-bottom: 0.25em;
}

/* アコーディオンの挙動 */
.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;
}

/*-------------------------------------
  ロボット手術について
-------------------------------------*/
.robotic-surgery_figure,
.mediastinal-tumor_figure,
.lung-cancer_figure {
  display: flex;
  gap: 1em;
  padding: 0 3em;
  margin-bottom: 1em;
  overflow: initial;
}
.robotic-surgery_figure.robotic-surgery_figure-single {
  padding: 0;
  justify-content: center;
}

.robotic-surgery_figure figure,
.mediastinal-tumor_figure figure,
.lung-cancer_figure figure {
  margin: 0;
}
.robotic-surgery_figure figcaption,
.lung-cancer_figure figcaption {
  margin-top: 0.5em;
  text-align: center;
}

.headline-text {
  margin: 1em 0 1em 0;
  padding-left: 0.25em;
}
.headline-text p {
  margin: 0;
}
.headline-text p + p {
  margin-top: 0.75em;
}

/*-------------------------------------
  肺がんの手術　
-------------------------------------*/
.lung-operation {
  display: flex;
  gap: 1em;
}
.lung-operation .lung-operation_text {
  flex: 5;
}
.lung-operation .lung-operation_img-wrap {
  flex: 4;
}

.partial-resection {
  width: 90%;
  display: block;
  margin: 0 auto;
}

/*-------------------------------------
  縦隔腫瘍の手術
-------------------------------------*/
.related-link {
  margin-bottom: 0.5em;
}

/*-------------------------------------
  レスポンシブ対応
-------------------------------------*/
@media screen and (max-width: 484px) {
  /* modal */
  .modal-container {
    max-width: 95%;
    max-height: 95vh;
  }

  /* Top */
  .feature {
    width: 100%;
  }

  /* 科長挨拶 */
  .article .txtbox img.greeting_img {
    display: block;
    float: initial;
    width: 50%;
    max-width: 50%;
    margin: 0 auto 1em;
  }

  /* ロボット手術について */
  .robotic-surgery_figure,
  .mediastinal-tumor_figure,
  .lung-cancer_figure {
    flex-direction: column;
    padding: 0;
  }
}

@media screen and (max-width: 787px) {
  /* 肺がん手術 */
  .lung-operation {
    flex-direction: column;
  }

  .partial-resection {
    width: 100%;
  }
}