@charset "UTF-8";
/* home menu
 * --------------------------------------------------------*/
#home_menu {
  max-width: calc(800px + 4.5em);
}
#home_menu svg {
  fill: #F0E1BE;
}
#home_menu a {
  color: #000;
}
#home_menu h3 {
  background-color: #fff;
  border-radius: 100%;
}
#home_menu #home_contents {
  margin-right: 2em;
  margin-left: 2em;
}
@media (min-width: 992px) {
  #home_menu #home_contents {
    margin-right: auto;
    margin-left: auto;
  }
}

.pc {
  display: none;
}
@media (min-width: 992px) {
  .pc {
    display: initial;
  }
}

.sp {
  display: initial;
}
@media (min-width: 992px) {
  .sp {
    display: none;
  }
}

/* --------------------------------------------------------*/
dt {
  font-weight: initial;
}

body {
  background-image: url(../images/base_2.jpg);
  background-attachment: fixed;
  font-family: "Aoto Gothic Regular", "Roboto", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.5;
  font-size: 16px;
  color: #3d3a39;
}

*[class*=yodogawa] br,
.info_text br,
.how_list dd br {
  display: none;
}
@media (min-width: 992px) {
  *[class*=yodogawa] br,
  .info_text br,
  .how_list dd br {
    display: block;
  }
}

img {
  max-width: 100%;
}
a img:hover {
  opacity: 0.5;
}

main {
  max-width: calc(800px + 4.5em + 4em);
  margin-right: auto;
  margin-left: auto;
}
main img {
  border-radius: 12px;
}

/* TOP page */
a {
  text-decoration: none;
  color: #00437C;
}
a:hover {
  color: #dc5514;
}

h3, h4 {
  font-weight: normal;
}

.hero {
  width: calc(100% - 4em);
  max-width: calc(800px + 4em);
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin: 2em auto;
  font-family: "Reimin Regular";
  letter-spacing: 1px;
}
.hero div {
  grid-column: span 2/span 2;
}
.hero .hero_ttl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}
.hero .hero_yodogawa {
  font-size: 15px;
  margin-bottom: 1em;
  line-height: 1.8;
  font-family: "Reimin Regular";
}
.cap {
  font-size: 12px;
  font-family: "Reimin Regular";
  line-height: 4.0;
}
@media (min-width: 992px) {
  .hero {
    grid-template-columns: 2fr 2fr 0.98fr;
  }
  .hero img:first-child {
    position: relative;
    left: -20px;
  }
  .hero div {
    grid-column: initial;
    grid-column-start: 1;
    grid-row-start: 1;
    align-self: flex-end;
  }
  .hero .hero_ttl {
    font-size: 20px;
    margin-bottom: 2.5em;
  }
  .hero .hero_yodogawa {
    writing-mode: vertical-rl;
    line-height: 2em;
    font-size: 15px;
  }
}

.updated {
  background-color: #fff;
  border-radius: 12px;
  position: relative;
  padding: 2em;
  margin: 1em;
  max-width: calc(800px + 4.5em);
}
.updated h2 {
  position: absolute;
  top: -1em;
}
.updated img {
  margin-bottom: 1em;
}
.updated h3 {
  font-size: 22px;
  line-height: 1.2;
  font-family: "Reimin Regular";
}
.updated span {
  font-family: "Reimin Regular";
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.updated .new_yodogawa {
  margin-top: 1em;
  margin-bottom: 1.5em;
  font-size: 15px;
  line-height: 1.8em;
}
@media (min-width: 992px) {
  .updated {
    margin: 1em 2em;
    padding: 3em;
  }
  .updated h2 {
    top: -1.3em;
  }
  .updated > div {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3em;
  }
}

.ttl img {
  height: 1.5em;
  border-radius: 0;
}
@media (min-width: 992px) {
  .ttl img {
    height: 2.5em;
  }
}

.contents_ttl {
  color: #00437C;
  border: 1px solid #00437C;
  padding-right: 0.5em;
  padding-left: 0.2em;
  padding-top: 0.5em;
  padding-bottom: 0.4em;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  font-size: 15px;
  margin-top: 2em;
  margin-bottom: 1.5em;
}

.section_ttl {
  background-image: url(../images/main_image_boy.png);
  background-position: calc(100% - 0.5em) 50%;
  background-size: contain;
  background-repeat: no-repeat;
  height: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .section_ttl {
    height: 20em;
    background-position: calc(100% - 2em) 50%;
    margin-bottom: -4em;
  }
  .section_ttl .ttl {
    margin-bottom: 1.5em;
  }
}

.lineup {
  margin-right: 2em;
  margin-left: 2em;
}
.lineup button {
  border: 0;
  background-color: transparent;
}
.lineup .guest {
  font-size: 14px;
}
.lineup .lineup_list {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.lineup .lineup_list:not(:last-child) {
  border-bottom: 1px dashed #000;
}
.lineup .thumbnail {
  position: relative;
  display: block;
  margin-bottom: 0.5em;
}
.lineup .thumbnail::after {
  font-family: "Font Awesome 6 Free";
  content: "\f04b";
  font-weight: 900;
  z-index: 1;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00437C;
  padding-left: 3px;
}
.lineup .thumbnail::before {
  opacity: 0;
  content: "配信先をみる";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00437C;
  background-color: rgba(255, 248, 240, 0.8);
  padding: 0.5em 1em;
  border: 1px solid #00437C;
  font-size: smaller;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  z-index: 1;
}
.lineup .thumbnail.pay::after {
  background-color: #EE9300;
  color: #fff;
}
.lineup figcaption {
  font-family: "Reimin Medium";
  font-size: 14px;
}

.lineup_list > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-bottom: 2em;
}
.lineup_list > ul > li {
  width: calc((100% - 1.5em) / 2);
  max-width: 200px;
  position: relative;
}
.lineup_list figure {
  text-align: left;
  transition: 0.2s all;
}
.lineup_list figure:hover {
  transform: scale(1.02);
}
.lineup_list figure:hover figcaption,
.lineup_list figure:hover img {
  opacity: 0.5;
}
.lineup_list figure:hover .thumbnail::before {
  opacity: 1;
}

.detail {
  opacity: 0;
  position: fixed;
  background: rgba(89, 87, 87, 0.9);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 10;
}
.detail.view {
  opacity: 1;
}
.detail .btn_close {
  position: absolute;
  top: -2em;
  right: 0em;
}
.detail .btn_close img {
  width: 25px;
}
.detail > div {
  background-color: #fff;
  border-radius: 12px;
  position: relative;
  max-width: 440px;
  width: 90vw;
  padding: 2em;
}
.detail dt {
  display: flex;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
  font-family: "Reimin Bold";
}
.detail dt img {
  max-width: 100px;
}
.detail .detail_yodogawa {
  border-top: 1px dashed #595757;
  font-size: 13px;
  padding-top: 1em;
  padding-bottom: 1em;
  max-height: 30vh;
  overflow: auto;
}
@media (min-width: 992px) {
  .detail .detail_yodogawa {
    max-height: 16vh;
  }
}

.broadcast_list {
  border-top: 1px dashed #595757;
  padding-top: 1em;
}
.broadcast_list li {
  max-width: 280px;
  letter-spacing: 1px;
}
.broadcast_list li:first-child {
  font-size: 13px;
  margin-bottom: 1.5em;
}
.broadcast_list li:not([class]) {
  font-size: 15px;
}
.broadcast_list li:not([class]) a {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2px;
}
.broadcast_list li:not([class]) a::before {
  content: "→ ";
  font-weight: bolder;
}
.broadcast_list li[class^=li] {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-family: "Aoto Gothic DemiBold";
  font-size: 18px;
}
.broadcast_list li[class^=li] a {
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 3em;
  color: #fff;
  width: 100%;
}
.broadcast_list li[class^=li] a::before {
  content: "";
  width: 2em;
  height: 2em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-left: 0.5em;
}
.broadcast_list li[class^=li] a:hover {
  opacity: 0.5;
}
.broadcast_list .li_apple a {
  background-color: #9932CC;
}
.broadcast_list .li_apple a::before {
  background-image: url(../images/Icon_ApplePodcast.png);
}
.broadcast_list .li_spotify a {
  background-color: #1EB955;
}
.broadcast_list .li_spotify a::before {
  background-image: url(../images/Icon_Spotify.png);
}
.broadcast_list audio {
  max-width: 100%;
}

.read {
  padding: 1px 2em 2em 2em;
  position: relative;
}
.read::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #E1E1E1;
  mix-blend-mode: multiply;
}
.read dl {
  max-width: calc(800px + 4.5em);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.read ul {
  display: grid;
  gap: 1.5em;
}
@media (min-width: 992px) {
  .read ul {
    grid-template-columns: 1fr 1fr;
  }
}
.read img {
  border: 1px solid rgba(128, 128, 128, 0.1);
}
.read .contents_ttl {
  padding-right: 0.5em;
  padding-left: 0.8em;
}

footer {
  background-color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
@media (min-width: 992px) {
  footer .inner {
    max-width: calc(800px + 4.5em);
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
footer ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
footer ul:last-child {
  font-size: 12px;
}
@media (min-width: 992px) {
  footer ul {
    flex-wrap: nowrap;
  }
  footer ul:last-child {
    margin-left: auto;
    gap: 3em;
  }
  footer ul:last-child img {
    max-height: 18px;
  }
}
footer img {
  max-height: 45px;
  max-width: 35vw;
}
footer .home {
  margin-bottom: 8px;
}
@media (min-width: 992px) {
  footer .home {
    margin-bottom: 2px;
  }
}

/* How */
.how,
.itoi {
  width: 82%;
  max-width: 700px;
}
.how hr,
.itoi hr {
  border: dashed 0.1px #666;
}

.yodogawa_ttl {
  font-size: 26px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  font-family: "Reimin Bold";
  padding-top: 20px;
  padding-bottom: 30px;
}
@media (min-width: 992px) {
  .yodogawa_ttl {
    font-size: 32px;
  }
}

.yodogawa {
  max-width: 520px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 60px;
  letter-spacing: 0.05em;
  line-height: 1.9em;
  font-family: "Reimin Regular";
}
@media (min-width: 992px) {
  .yodogawa {
    padding-top: 30px;
  }
}

.how_list dl {
  width: 100%;
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
}
.how_list dt {
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  font-family: "Reimin Bold";
  padding-bottom: 20px;
}
.how_list dd {
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-family: "Hiragino Mincho ProN";
}
.how_list .base_white {
  width: 100%;
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
  padding-right: 10%;
  padding-left: 10%;
  background: rgb(255, 255, 255);
  border: solid 0.2px #666;
  border-radius: 10px;
}
@media (min-width: 992px) {
  .how_list .base_white {
    margin-top: 60px;
    padding: initial;
  }
}
.how_list .info {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.8em;
  padding-top: 35px;
  padding-bottom: 30px;
}
.how_list .info_title {
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  font-family: "Reimin Bold";
  padding-bottom: 20px;
}
.how_list .info_photo {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.how_list .info_text {
  font-family: "Hiragino Mincho ProN";
  margin-bottom: 40px;
}
.how_list .info_link li + li {
  margin-top: 20px;
}

.btn_link {
  padding: 0.4em 1em;
  text-decoration: none;
  color: #4E443D;
  border: solid 1px #4E443D;
  border-radius: 5px;
  transition: 0.4s;
  text-align: left;
  width: 360px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn_link::before {
  content: "▶";
}
.btn_link:hover {
  background-color: #ffdb00;
  border-color: #ffdb00;
  color: #00437c;
}

.btn_link_top {
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
}
.btn_link_top::before {
  content: "◁";
}

/*  itoi  */
.yodogawa_photo {
  max-width: 520px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.yodogawa_photo img {
  border-radius: 0;
}

.yodogawa_title_s {
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  font-family: "Reimin Bold";
  padding-bottom: 30px;
}
@media (min-width: 992px) {
  .yodogawa_title_s {
    font-size: 24px;
  }
}

.itoi p + p {
  margin-top: 2em;
}/*# sourceMappingURL=index_2023.css.map */