@charset "utf-8";

.prog_body {
  font-size: 15px;
}

.prog_body img {
  vertical-align: middle;
}

.prog_body .bg_area {
  background: url(/tv/programs/moriomamorukoto/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 8em 0;
}

.prog_body section {
  width: 1080px;
  margin: 0 auto;
}

.prog_body section.speace {
  margin: 8em auto 0;
}

.prog_ttl {

}

.prog_ttl h3 {
  /* font-family: m-plus-2p, sans-serif; */
  font-family: "maru-maru-gothic-bsr-stdn", sans-serif;
  font-size: 48px;
  font-weight: 600;
  /* color: #0d6f20; */
  color: #F4B3A1;
  text-align: center;
  text-shadow :
  3px  3px 6px #ffffff,
  -3px  3px 6px #ffffff,
   3px -3px 6px #ffffff,
  -3px -3px 6px #ffffff,
   3px  0px 6px #ffffff,
   0px  3px 6px #ffffff,
  -3px  0px 6px #ffffff,
   0px -3px 6px #ffffff
}

.prog_ttl h3 img {
  width: 840px;
  margin: 0 0 0.5em;
}

.prog_ttl h3 span {
  font-size: 56px;
}

.prog_ttl h4 {
  text-align: center;
  margin: 2em 0 0;
}

.prog_ttl h4 img {
  width: 720px;
}

.prog_dtl {
  font-family: "uddigikyokasho-pro", sans-serif;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
  line-height: 3em;
  text-shadow :
  5px  5px 8px #000000,
  -5px  5px 8px #000000,
   5px -5px 8px #000000,
  -5px -5px 8px #000000,
   5px  0px 8px #000000,
   0px  5px 8px #000000,
  -5px  0px 8px #000000,
   0px -5px 8px #000000;
}

.prog_str .flex_box {
  color: #f9e503;
  text-shadow :
  4px  4px 6px #000000,
  -4px  4px 6px #000000,
   4px -4px 6px #000000,
  -4px -4px 6px #000000,
   4px  0px 6px #000000,
   0px  4px 6px #000000,
  -4px  0px 6px #000000,
   0px -4px 6px #000000;
}

.prog_str {
  margin: 3em 0 0;
  text-align: center;
}

.prog_str .flex_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video_txt {
  font-size: 36px;
}

.video_box {
  width: 640px;
  margin: 0 0 0 4em;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 6px solid #ffffff;
  border-radius: 2em;
}

.video_box iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 899px) {

  .prog_body {
    margin: 0 0 3em;
  }

  .prog_body .bg_area {
    background-position: center;
    padding: 4em 0;
  }

  .prog_body section {
    width: auto;
  }

  .prog_ttl h3 {
    font-size: 27px;
    text-shadow:
    0.1em 0.1em 0.2em #ffffff,
    -0.1em 0.1em 0.2em #ffffff,
    0.1em -0.1em 0.2em #ffffff,
    -0.1em -0.1em 0.2em #ffffff,
    0.1em 0px 0.2em #ffffff,
    0px 0.1em 0.2em #ffffff,
    -0.1em 0px 0.2em #ffffff,
    0px -0.1em 0.2em #ffffff;
  }

  .prog_ttl h3 img {
    width: 95%;
  }

  .prog_ttl h3 span {
    font-size: 36px;
  }

  .prog_ttl h4 img {
    width: 95%;
  }

  .prog_body section.speace {
    margin: 6em auto 0;
  }

  .prog_dtl {
    font-size: 21px;
    line-height: 2.25em;
    margin: 0 0.5em;
    text-shadow:
    0.18em 0.18em 0.48em #000000,
    -0.18em 0.18em 0.48em #000000,
    0.18em -0.18em 0.48em #000000,
    -0.18em -0.18em 0.48em #000000,
    0.18em 0px 0.48em #000000,
    0px 0.18em 0.48em #000000,
    -0.18em 0px 0.48em #000000,
    0px -0.18em 0.48em #000000;
  }

  .prog_str .flex_box {
    display: block;
    text-shadow :
    0.2em  0.2em 0.3em #000000,
    -0.2em  0.2em 0.3em #000000,
     0.2em -0.2em 0.3em #000000,
    -0.2em -0.2em 0.3em #000000,
     0.2em  0px 0.3em #000000,
     0px  0.2em 0.3em #000000,
    -0.2em  0px 0.3em #000000,
     0px -0.2em 0.3em #000000;
  }

  .video_txt {
    font-size: 18px;
  }

  .video_box {
    width: 90%;
    margin: 1em auto 0;
    border: 4px solid #ffffff;
    border-radius: 1em;
  }
}