/* ========== Base ========== */
figure { font-size: 0; }

.only_sp { display: none !important; }

/* ========== Key Visual ========== */
.mssKeyVisual__text { padding: 35px 40px; }
.mssKeyVisual__twoUpItem { padding: 0 1vw 0 2vw; }
.mssKeyVisual__sub { font-size: 16px; line-height: 32px; }

/* ========== Content wrappers ========== */
.contarea { margin-top: 55px; padding-bottom: 60px; }
.cont_sub01 { margin-top: 15px; }
.cont_sub02,
.cont_sub03 { margin-top: 65px; }
.cont_inner { overflow: hidden; }

.cont_title_wrap { margin-bottom: 35px; }
.cont_title {
  line-height: 1.5;
  font-size: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid #CDB182;
}

/* ========== Flex blocks ========== */
.cont_flex,
.cont_flex2,
.cont_flex_center,
.cont_flex_reverse {
  padding: .1px;
  display: flex;
  justify-content: space-between;
}

.cont_flex { margin-top: 55px; }
.cont_flex2 { margin-top: 40px; }
.cont_flex_center { align-items: center; margin-top: 30px; }
.cont_flex_reverse { margin-top: 65px; flex-direction: row-reverse; }

/* ========== Columns ========== */
.cont_flex_img,
.cont_flex_text { width: 46%; }

/* ========== Media blocks ========== */
.cont_img { width: 100%; margin-top: 45px; }

.cont_img670 {
  width: 100%;
  max-width: 670px;
  margin: 70px auto 0;
}

.cont_flex_img img,
.cont_img img,
.cont_img670 img { width: 100%; }

/* ========== Text blocks ========== */
.cont_1col_text { margin-top: 50px; }
.cont_text { font-size: 16px; line-height: 32px; }
.cont_text a { color: #0277FF; }

/* ========== Captions ========== */
.caption {
  font-size: 12px;
  line-height: 22px;
  margin: 10px 0 0;
  display: inline-block;
  text-align: left;
}

.cont_img .caption,
.cont_youtube .caption {
  text-align: center;
  display: block;
  margin: 10px auto 0;
}

/* ========== Related ========== */
.related_title { font-size: 17px; margin: 0; }

.related_text {
  font-size: 13px;
  line-height: 1.6;
  margin: 15px 0 0;
}

.related_text p { margin: 0; }
.related_link { margin: 8px 0 0; }

.note { font-size: 10px; line-height: 1.6; margin: 0; }

/* ========== YouTube block ========== */
.cont_youtube { margin-top: 60px; }

.cont_youtube_inner {
  width: 100%;
  max-width: 885px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.cont_youtube iframe {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: block;
}

.video_content_title {
  font-size: 16px;
  text-align: center;
  margin: 15px auto 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.video_content_title::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateY(-50%) rotate(135deg);
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transition: .3s;
  display: inline-block;
}

.video_content_wrap {
  width: 100%;
  max-width: 885px;
  margin: 0 auto;
  text-align: center;
}

.video_content_child {
  font-size: 13px;
  margin: 15px 0 0;
  display: none;
  text-align: left;
}

.open::after { transform: rotate(-45deg); }

/* ========== Mobile (<=767px) ========== */
@media (max-width: 767px) {

  .only_pc { display: none !important; }
  .only_sp { display: block !important; }

  .mssKeyVisual__text { padding: 4.6666vw 5vw; }
  .mssKeyVisual__heading { text-align: left; }
  .mssKeyVisual__image img { border-radius: 0; }

  .mssKeyVisual__twoUpItem { width: 100%; padding: 0; }

  .mssKeyVisual__sub {
    font-size: 3.6vw;
    line-height: 7.3333vw;
  }

  .contarea { margin-top: 10vw; padding-bottom: 16vw; }

  .cont_sub01,
  .cont_sub02,
  .cont_sub03 { margin-top: 7vw; }

  .cont_title_wrap { margin-bottom: 7.3vw; }
  .cont_title { font-size: 5.6vw; padding-bottom: 5vw; }

  .cont_flex,
  .cont_flex2,
  .cont_flex_center,
  .cont_flex_reverse {
    margin-top: 0;
    display: block;
  }

  .cont_flex_img { width: 100%; margin-top: 9.3333vw; }
  .cont_flex_text { width: 100%; margin-top: 12vw; }

  .cont_img { margin-top: 9vw; }
  .cont_img670 { margin-top: 12vw; }

  .cont_1col_text { margin-top: 9.3333vw; }

  .cont_text {
    font-size: 3.6vw;
    line-height: 7.3333vw;
  }

  .caption {
    font-size: 2.9333vw;
    line-height: 6vw;
    margin: 2.6vw 0 0;
  }

  .cont_img .caption,
  .cont_youtube .caption {
    display: inline-block;
    text-align: left;
  }

  .related_title { font-size: 3.4667vw; }

  .related_text {
    font-size: 2.9333vw;
    margin: 2vw 0;
  }

  .related_text p { margin: 1vw 0; }

  .note {
    font-size: 2.4vw;
    margin: 0 0 7vw !important;
  }

  .mssRelated__image {
    width: 55%;
    margin: 0 auto;
  }

  .cont_youtube { margin-top: 11.3vw; }

  .video_content_title {
    font-size: 3.59vw;
    margin-top: 6.6vw;
    padding: 0 2.6vw;
  }

  .video_content_title::after {
    width: 1vw;
    height: 1vw;
  }

  .video_content_child {
    font-size: 3vw;
    margin: 2vw 0 0;
  }
}