@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Noto+Serif+JP:wght@200..900&display=swap");
html {
  font-size: 0.625rem;
  width: 100%; }

body {
  background: #FFF9B2;
  color: #1c1c1c;
  font-family: "BIZ UDPGothic", sans-serif;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.8;
  font-feature-settings: "palt";
  text-align: left; }
  @media screen and (min-width: 960px) {
    body {
      font-size: 1.6rem; } }
  @media screen and (min-width: 1260px) {
    body {
      font-size: 1.8rem; } }



.info h1 {
  text-align: center;
      color: #1E2581;
}
.info h1 img {
  width: min(80%, 520px);
}
@media screen and (min-width: 1260px) {
  .info h1 img {
    width: clamp(520px, 40vw, 680px);
  }
}

.info h2 {
  font-family: "BIZ UDPGothic", sans-serif;
  text-align: center;
      color: #1E2581;
      font-size: 5rem;
}

.info p{
  text-align: center;  
  margin: 20px;  
}


/* ----- header ----- */

header {
	display: flex;
	flex-direction: column;
}
header .kab {
	width:60px;
	height:auto;
	margin:15px 0 10px 20px;
}
header .kab img {
	width:100%;
	height:auto;
}


@media (min-width: 960px) {
	header .kab img {
		width:63px;
	}
	.header_inner p {
		font-size: 17px;
		margin-left:15%;
	}
	.header_inner a {
		font-size: 17px;
		padding-left:15%;
	}
}



/* ----- intro ----- */

.intro {
  position: relative;
  padding-top: 30px; }
  .intro .inner {
    width: min(80vw, 1260px);
    margin: 0 auto;
    grid-template: "title loop" auto "text loop" auto / 1fr 36vw;
    padding: 32px;
    background: #FFFADF;    
    border-radius: 4px;
    /*@include pc-thin {
        padding: 48px;
    }*/ }
    @media screen and (max-width: 520px) {
      .intro .inner {
        grid-template: "title" auto "loop" auto "loop2" auto "text" auto "link" auto / 1fr;
        height: auto; } }
    @media screen and (min-width: 768px) {
      .intro .inner {
        column-gap: 32px; } }
    @media screen and (min-width: 960px) {
      .intro .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 220px 220px;
        column-gap: 16px;
        padding: 48px 32px 48px 48px; } }
    @media screen and (min-width: 1260px) {
      .intro .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 100px 100px;
         } }
    .intro .inner .title {
      grid-area: title;
      align-self: center;
      width: 11.5em;
      color: #1E2581;
      font-size: clamp(1.8rem, 1.5rem + 0.75vw, 2.4rem); }
      @media screen and (max-width: 520px) {
        .intro .inner .title {
          font-size: 2.4rem;          
          width: 100%;
          text-align: center; } }
      @media screen and (min-width: 768px) {
        .intro .inner .title {
          align-self: flex-end; } }
      @media screen and (min-width: 1260px) {
        .intro .inner .title {
          font-size: 3.0rem;
          width: 100%; } }
      .intro .inner .title span {
        display: inline-block; }
    .intro .inner .text {
      grid-area: text;
      align-self: center;
      align-self: flex-start;
      width: min(100%, 500px);
      margin: 0 auto;
      color: #1c1c1c; }
      @media screen and (min-width: 768px) {
        .intro .inner .text {
          width: 100%; } }
      @media screen and (min-width: 960px) {
        .intro .inner .text {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .intro .inner .text {
          padding-right: 36px; } }
      .intro .inner .text p + p {
        margin-top: 0.75em; }
      .intro .inner .text .note {
        font-size: 1.4rem; }
    .intro .inner .loop {
      grid-area: loop;
      display: flex;
      flex-direction: column;
      gap: min(2vw, 16px);
      overflow: hidden;
      margin: -32px 0; }
      @media screen and (max-width: 520px) {
        .intro .inner .loop {
          flex-direction: row;
          margin: 0 -32px; } }
      @media screen and (min-width: 768px) {
        .intro .inner .loop {
          justify-self: flex-end; } }
      @media screen and (min-width: 960px) {
        .intro .inner .loop {
          margin: -48px 0; } }
      .intro .inner .loop .loop-box {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: min(2vw, 16px);
        animation: loop-vertical 40s infinite linear; }
        @media screen and (max-width: 520px) {
          .intro .inner .loop .loop-box {
            flex-direction: row;
            animation: loop-horizon 40s infinite reverse linear; } }
        @media screen and (min-width: 960px) {
          .intro .inner .loop .loop-box {
            animation-duration: 30s; } }
        @media screen and (min-width: 1260px) {
          .intro .inner .loop .loop-box {
            animation-duration: 40s; } }
        .intro .inner .loop .loop-box img {
          display: block;
          width: clamp(160px, 36vw, 400px);
          border-radius: 4px; }
          @media screen and (min-width: 1260px) {
            .intro .inner .loop .loop-box img {
              width: 100%; } }
          @media screen and (max-width: 520px) {
            .intro .inner .loop .loop-box img.is-only {
              display: none; } }
          @media screen and (min-width: 960px) {
            .intro .inner .loop .loop-box img.is-only {
              display: none; } }
    .intro .inner .loop.is-second {
      grid-area: loop2;
      display: none; }
      @media screen and (max-width: 520px) {
        .intro .inner .loop.is-second {
          display: flex;
          margin-top: -16px; }
          .intro .inner .loop.is-second .loop-box {
            animation: loop-horizon 40s infinite linear; } }
      @media screen and (min-width: 960px) {
        .intro .inner .loop.is-second {
          display: flex; }
          .intro .inner .loop.is-second .loop-box {
            animation: loop-vertical 40s infinite reverse linear; } }
    .intro .inner .link {
      grid-area: link; }
      @media screen and (min-width: 960px) {
        .intro .inner .link {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .intro .inner .link {
          padding-right: 36px; } }
      .intro .inner .link a {
        background: #1E2581;
        color: #FFFADF; }
        .intro .inner .link a:hover {
          background: #1c1c1c;
          color: #FFFADF; }


/* 学生部門の2行目のインデント用 */

.intro .inner .text p {
  display: flex;
  align-items: flex-start;
}

.intro .inner .text p span.separator {
  display: inline-block;
  margin: 0 0.3em;
  flex-shrink: 0;
}

.intro .inner .text p span.content {
  flex: 1;
}

/* 学生部門の2行目のインデント用 */
.intro .inner .text p.student-second-line {
  padding-left: calc(7em + 0.6em); /* 「学生部門」の幅 + 「｜」の位置 */
}

@media screen and (max-width: 520px) {
  .intro .inner .text p.student-second-line {
    padding-left: 0;
  }
}






/* ----- main-visual ----- */
.main-visual {
  margin-top: min(5vw, 24px);
  padding-bottom: 160px;
  background: linear-gradient(345deg, #FFFADF 55%, #FFF9B2 55%); }
  @media screen and (min-width: 768px) {
    .main-visual {
      margin-top: calc((1.5em * 1.36 + min(5vw, 24px)) * -1); } }
  @media screen and (min-width: 960px) {
    .main-visual {
      padding-bottom: 160px; } }
  .main-visual .inner {
    grid-template: "img" auto "title" auto "info" auto / 1fr;
    justify-items: stretch;
    width: min(100%, 1260px);
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .main-visual .inner {
        grid-template: ". img" 0.6fr "title img" 2fr "info img" 1fr / 1fr 2fr; } }
    @media screen and (min-width: 960px) {
      .main-visual .inner {
        grid-template: ". img" 0.5fr "title img" 2fr "info img" 1fr / 3.25fr 7fr; } }
    .main-visual .inner .main-title {
      grid-area: title;
      margin-top: calc(min(20vw,100px) * -1);
      z-index: 2; }
      @media screen and (min-width: 768px) {
        .main-visual .inner .main-title {
          align-self: flex-end;
          margin-top: 0;
          margin-right: -30px;
          padding-left: min(2vw, 20px); } }
      .main-visual .inner .main-title img {
        display: block;
        width: min(70%, 375px);
        margin: 0 auto;
        filter: drop-shadow(30px 30px 50px rgba(0, 0, 0, 0.25)); }
        @media screen and (min-width: 768px) {
          .main-visual .inner .main-title img {
            width: 100%; } }
    .main-visual .inner .information {
      grid-area: info;
      margin-top: 1em;
      padding: 0 min(5vw, 20px);
      color: #eeeeee;
      font-size: clamp(2.2rem, 1.161rem + 1.35vw, 3.0rem);
      line-height: 1.25;
      text-align: center;
      z-index: 3; }
      @media screen and (min-width: 768px) {
        .main-visual .inner .information {
          margin-right: -30px;
          padding: 0 0 0 min(2vw, 20px); } }
      .main-visual .inner .information > span {
        display: inline-block; }
        .main-visual .inner .information > span span {
          color: #FFFADF;
          font-weight: 600; }
          .main-visual .inner .information > span span.lv02 {
            font-size: 1.4em; }
          .main-visual .inner .information > span span.lv03 {
            color: #eeeeee;
            font-size: 1.15em; }
    .main-visual .inner .img {
      grid-area: img;
      width: 100%;
      height: min(68vw, 420px);
      overflow: hidden; }
      @media screen and (min-width: 768px) {
        .main-visual .inner .img {
          height: clamp(420px, 50vw, 540px);
          border-radius: 0 0 4px 4px; } }
      @media screen and (min-width: 960px) {
        .main-visual .inner .img {
          height: clamp(520px, 50vw, 640px); } }
      .main-visual .inner .img img {
        max-inline-size: none;
        max-block-size: none;
        width: 100%;
        object-fit: cover; }

    /* main-visual -full */
    .main-visual.-full .inner .main-title {
      margin-top: 0;
      width: 100%; }
    .main-visual.-full .inner .main-title .media {
      width: 100%;
      height: auto; }
    .main-visual.-full .inner .main-title .media.-pc {
      display: none; }
    .main-visual.-full .inner .main-title .media.-tab {
      display: none; }
    .main-visual.-full .inner .main-title .media.-sp {
      display: block; }
    .main-visual.-full .inner .information {
      margin-top: 1.5em;
      margin-right: 0;
    }
  
    @media screen and (min-width: 520px) {
      .main-visual.-full .inner .main-title .media.-pc {
      display: none; }
      .main-visual.-full .inner .main-title .media.-tab {
      display: block; }
      .main-visual.-full .inner .main-title .media.-sp {
      display: none; }
      .main-visual.-full .inner {
        grid-template:
          "title" auto
          "info" auto /
          1fr; } }

    @media screen and (min-width: 768px) {
      .main-visual.-full {
        margin-top: min(5vw, 24px); }
      .main-visual.-full .inner .main-title {
        padding: 0; }
      .main-visual.-full .inner .main-title .media.-pc {
      display: block; }
      .main-visual.-full .inner .main-title .media.-tab {
      display: none; }
      .main-visual.-full .inner .main-title .media.-sp {
      display: none; } }




/* ----- streaming ----- */
@keyframes loop-vertical {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0); } }
.streaming {
  position: relative;
  padding-top: 30px; }
  .streaming .inner {
    width: min(80vw, 1260px);
    margin: 0 auto;
    padding: 32px;
    background: #FFFADF;    
    border-radius: 4px;
    /*@include pc-thin {
        padding: 48px;
    }*/ }

    @media screen and (min-width: 768px) {
      .streaming .inner {
        column-gap: 32px; } }


    .streaming .inner .title {
      grid-area: title;
      align-self: center;
      width: 11.5em;
      color: #1E2581;
      font-size: clamp(1.8rem, 1.5rem + 0.75vw, 2.4rem); }
      @media screen and (max-width: 520px) {
        .streaming .inner .title {
          font-size: 2.4rem;          
          width: 100%;
          text-align: center; } }
      @media screen and (min-width: 768px) {
        .streaming .inner .title {
          align-self: flex-end; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .title {
          font-size: 3.0rem;
          width: 100%; } }
      .streaming .inner .title span {
        display: inline-block; }
    .streaming .inner .text {
      grid-area: text;
      align-self: center;
      align-self: flex-start;
      width: min(100%, 500px);
      margin: 0 auto;
      color: #1c1c1c; }
      @media screen and (min-width: 768px) {
        .streaming .inner .text {
          width: 100%; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .text {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .text {
          padding-right: 36px; } }
      .streaming .inner .text p + p {
        margin-top: 0.75em; }
      .streaming .inner .text .note {
        font-size: 1.4rem; }
    .streaming .inner .loop {
      grid-area: loop;
      display: flex;
      flex-direction: column;
      gap: min(2vw, 16px);
      overflow: hidden;
      margin: -32px 0; }
      @media screen and (max-width: 520px) {
        .streaming .inner .loop {
          flex-direction: row;
          margin: 0 -32px; } }
      @media screen and (min-width: 768px) {
        .streaming .inner .loop {
          justify-self: flex-end; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .loop {
          margin: -48px 0; } }
      .streaming .inner .loop .loop-box {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: min(2vw, 16px);
        animation: loop-vertical 40s infinite linear; }
        @media screen and (max-width: 520px) {
          .streaming .inner .loop .loop-box {
            flex-direction: row;
            animation: loop-horizon 40s infinite reverse linear; } }
        @media screen and (min-width: 960px) {
          .streaming .inner .loop .loop-box {
            animation-duration: 30s; } }
        @media screen and (min-width: 1260px) {
          .streaming .inner .loop .loop-box {
            animation-duration: 40s; } }
        .streaming .inner .loop .loop-box img {
          display: block;
          width: clamp(160px, 36vw, 400px);
          border-radius: 4px; }
          @media screen and (min-width: 1260px) {
            .streaming .inner .loop .loop-box img {
              width: 100%; } }
          @media screen and (max-width: 520px) {
            .streaming .inner .loop .loop-box img.is-only {
              display: none; } }
          @media screen and (min-width: 960px) {
            .streaming .inner .loop .loop-box img.is-only {
              display: none; } }
    .streaming .inner .loop.is-second {
      grid-area: loop2;
      display: none; }
      @media screen and (max-width: 520px) {
        .streaming .inner .loop.is-second {
          display: flex;
          margin-top: -16px; }
          .streaming .inner .loop.is-second .loop-box {
            animation: loop-horizon 40s infinite linear; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .loop.is-second {
          display: flex; }
          .streaming .inner .loop.is-second .loop-box {
            animation: loop-vertical 40s infinite reverse linear; } }
    .streaming .inner .link {
      grid-area: link; }
      @media screen and (min-width: 960px) {
        .streaming .inner .link {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .link {
          padding-right: 36px; } }
      .streaming .inner .link a {
        background: #1E2581;
        color: #FFFADF; }
        .streaming .inner .link a:hover {
          background: #1c1c1c;
          color: #FFFADF; }




.intro .streaming {
  margin: 0 -16px -16px;
  padding-top: 0; }
  @media screen and (max-width: 520px) {
    .intro .streaming {
      margin: 0 -24px -24px; } }
  @media screen and (min-width: 768px) {
    .intro .streaming {
      margin: 0; } }
  .intro .streaming .inner {
    width: 100%; }

    .intro .streaming .inner .title {
      width: auto; }
      @media screen and (min-width: 768px) {
        .intro .streaming .inner .title {
          text-align: left; } }
    @media screen and (min-width: 768px) {
      .intro .streaming .inner .text {
        text-align: left; } }
    @media screen and (min-width: 768px) {
      .intro .streaming .inner .loop {
        height: 360px; } }
.intro .streaming::before, .intro .streaming::after {
  display: none; }

.intro .streaming.notice .inner {
  grid-template: "title" auto "text" auto "link" auto / 1fr;
  height: auto;
  position: relative;
}
  @media screen and (max-width: 520px) {
    .intro .streaming.notice .inner {
      grid-template: "title" auto "text" auto "link" auto / 1fr; } }
  @media screen and (min-width: 768px) {
    .intro .streaming.notice .inner {
    grid-template: "title link" auto "text link" auto / 1fr auto;
    align-items: start;
    column-gap: 32px;
    padding: 48px 52px; } }
  @media screen and (min-width: 960px) {
  .intro .streaming.notice .inner {
    padding: 48px 64px; } }
@media screen and (min-width: 1260px) {
  .intro .streaming.notice .inner {
    column-gap: 48px;
    padding: 48px 72px;
  } }
  @media screen and (min-width: 768px) {
    .intro .streaming.notice .inner .link {
      align-self: center;
      justify-self: center;
      padding-right: 0; } }




.intro .streaming.notice .inner {
  grid-template: "title" auto "text" auto "link" auto / 1fr;
  height: auto;
  position: relative;
}

@media screen and (min-width: 768px) {
  .intro .streaming.notice .inner {
    grid-template: "title text link" auto / auto 1fr auto;
    align-items: center;
    column-gap: 32px;
    padding: 48px 52px;
  }
}

@media screen and (min-width: 960px) {
  .intro .streaming.notice .inner {
    padding: 48px 64px;
  }
}

@media screen and (min-width: 1260px) {
  .intro .streaming.notice .inner {
    column-gap: 48px;
    padding: 48px 72px;
  }
}

.intro .streaming.notice .inner .title {
  width: auto;
  grid-area: title;
}

.intro .streaming.notice .inner .text {
  padding-right: 0;
  grid-area: text;
}

.intro .streaming.notice .inner .text p {
  margin-bottom: 0.5em;
}

.intro .streaming.notice .inner .text p:last-child {
  margin-bottom: 0;
}

.intro .streaming.notice .inner .link {
  padding-right: 0;
  grid-area: link;
  align-self: center;
  justify-self: end;
}

@media screen and (max-width: 767px) {
  .intro .streaming.notice .inner .link {
    justify-self: center;
    margin-top: 20px;
  }
}



/* 募集要項ブロックを右側に配置 */
.intro .streaming.notice .inner {
  grid-template:
    "title requirements" auto
    "text  requirements" auto
    / 1fr 320px;
  column-gap: 40px;
}

.req-title {
  margin: 0 0 20px 0;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #1c1c1c;
}

.req-btn {
  display: inline-block;
  background: #1E2581;
  color: #FFFADF;
  text-align: center;
  padding: 20px 40px;
  margin-bottom: 24px;
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transition: 0.2s;
}

.req-btn:hover {
  opacity: 0.85;
}


  .requirements {
    margin-top: 20px;
    text-align: center;  /* ボタンを中央に配置 */
  }

@media screen and (max-width: 768px) {
  .intro .streaming.notice .inner {
    grid-template:
      "title" auto
      "text" auto
      "requirements" auto
      / 1fr;
  }
}






/* ----- base ----- */
.base-title {
  font-family: "BIZ UDPGothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.36; }

.base-button {
  text-align: end;
  word-break: auto-phrase;
  line-break: strict; }
  .base-button a {
    display: inline-block;
    padding: 0.65em 1.6em;
    background: #C41D1D;
    color: #FFFADF;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.36;
    border-radius: 5em;
    box-shadow: 0px 29px 12px 0px rgba(0, 0, 0, 0.01), 0px 16px 10px 0px rgba(0, 0, 0, 0.04), 0px 7px 7px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
    transition: .3s; }
    @media screen and (min-width: 960px) {
      .base-button a {
        font-size: 2.0rem; } }
    .base-button a:hover {
      background: #1c1c1c; }

.base-button.is-large a {
  font-size: 2.2rem;
  padding: 0.6em 1.8em; }
  @media screen and (min-width: 960px) {
    .base-button.is-large a {
      font-size: clamp(2.4rem,1.0rem + 1.5vw,3.0rem); } }









/* ----- cast ----- */
.cast {
  position: relative; }
  .cast .inner {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: flex-start;
    width: min(90vw, 1260px);
    margin: 90px auto 0; }
    @media screen and (max-width: 520px) {
      .cast .inner {
        display: block; } }
    @media screen and (min-width: 768px) {
      .cast .inner {
        grid-template-columns: 1fr 3fr;
        margin-top: 120px; } }
    @media screen and (min-width: 960px) {
      .cast .inner {
        margin-top: 140px; } }
    .cast .inner .title {
      position: sticky;
      top: 24px;
      font-size: 2.4rem;
      margin-bottom: 100px; }
      @media screen and (max-width: 520px) {
        .cast .inner .title {
          position: relative;
          top: 0;
          text-align: center;
          margin-bottom: 24px; } }
      @media screen and (min-width: 960px) {
        .cast .inner .title {
          font-size: 3.0rem; } }
    .cast .inner .list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; }
      .cast .inner .list .item {
        display: grid;
        row-gap: 12px;
        column-gap: 20px;
        padding: 32px;
        background: #FFFADF;
        border-radius: 4px; }
        @media screen and (max-width: 520px) {
          .cast .inner .list .item {
            column-gap: 16px; } }
        @media screen and (min-width: 768px) {
          .cast .inner .list .item {
            row-gap: 16px; } }
        @media screen and (min-width: 960px) {
          .cast .inner .list .item {
            row-gap: 20px;
            column-gap: 32px;
            padding: 40px; } }
        /* cast size:large */
        .cast .inner .list .item.is-large {
          width: 100%;
          grid-template:
            "img" auto
            "title" auto
            "name" auto
            "comment" auto /
            1fr;
          justify-items: center; }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-large {
              grid-template:
                "img title" auto
                "img name" auto
                "comment comment" auto /
                200px 1fr;
              justify-items: left; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-large {
              grid-template:
                "img title" auto
                "img name" auto
                "img comment" 1fr /
                220px 1fr; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-large {
              grid-template:
                "img title" auto
                "img name" auto
                "img comment" 1fr /
                240px 1fr; } }
        /* cast size:large type:no-sub-title */
        .cast .inner .list .item.is-large.-no-sub-title {
          grid-template:
            "img" auto
            "name" auto
            "comment" auto /
            1fr; }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-large.-no-sub-title {
              grid-template:
                "img name" auto
                "comment comment" auto /
                200px 1fr; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-large.-no-sub-title {
              grid-template:
                "img name" auto
                "img comment" 1fr /
                220px 1fr; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-large.-no-sub-title {
              grid-template:
                "img name" auto
                "img comment" 1fr /
                240px 1fr; } }
          /* --- */
        /* cast size:large type:no-sub-title + reverse */
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-large.-no-sub-title.-reverse {
              grid-template:
                "name img" auto
                "comment comment" auto /
                1fr 200px; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-large.-no-sub-title.-reverse {
              grid-template:
                "name img" auto
                "comment img" 1fr /
                1fr 220px; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-large.-no-sub-title.-reverse {
              grid-template:
                "name img" auto
                "comment img" 1fr /
                1fr 240px; } }
          /* --- */
        /* cast size:large type:two-third */
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-large.-two-third {
              width: calc((100% / 3 - 8px) * 2);
              grid-template:
                "img comment" auto
                "name comment" 1fr /
                240px 1fr; }
            .cast .inner .list .item.is-large.-two-third.-no-sub-title .name {
              margin: 0;
              text-align: center; } }
          /* --- */
          .cast .inner .list .item.is-large .sub-title {
            margin-top: 8px;
            justify-self: center; }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .sub-title {
                margin-top: 0;
                justify-self: left; } }
            @media screen and (min-width: 960px) {
              .cast .inner .list .item.is-large .sub-title {
                margin-top: 1em; } }
          .cast .inner .list .item.is-large .name {
            text-align: center;
            font-size: clamp(2.2rem, 1.816rem + 0.96vw, 3.2rem);
            margin-bottom: 8px; /* ← 追加 */ }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .name {
                text-align: left; } }
            @media screen and (min-width: 960px) {
              .cast .inner .list .item.is-large .name {
                margin-bottom: 0.5em; } }
          /*  nameの .group がある場合 */
          .cast .inner .list .item.is-large .name .group {
            font-size: 0.8em; }
          /*  is-large & -no-sub-title の場合の name のスタイル */
          .cast .inner .list .item.is-large.-no-sub-title .name {
            margin-top: 8px; }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large.-no-sub-title .name {
                align-self: center; } }
            @media screen and (min-width: 960px) {
              .cast .inner .list .item.is-large.-no-sub-title .name {
                margin-top: 0.5em; } }
          /* --- */
          .cast .inner .list .item.is-large .img {
            width: min(50vw, 180px); }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .img {
                width: 100%;
                align-self: start; } }
        /* cast size:medium */
        .cast .inner .list .item.is-medium {
          width: 100%;
          grid-template: "img title" auto "img name" auto / auto 1fr;
          justify-items: flex-start; }
          .cast .inner .list .item.is-medium.is-reporter {
            grid-template: "title img" auto "name img" auto / 1fr 20vw; }
          @media screen and (max-width: 520px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 30vw 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 26vw; } }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 160px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 140px; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 180px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                width: calc(50% - 6px);
                grid-template: "title img" auto "name img" auto / 1fr 120px;
                column-gap: 0; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-medium {
              width: calc(50% - 6px);
              grid-template: "img title" auto "img name" auto / 200px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 140px;
                column-gap: 32px; } }
        /* cast size:medium type:no-sub-title */
        .cast .inner .list .item.is-medium.-no-sub-title {
          grid-template:
            "img name" auto /
            auto 1fr;
          justify-items: flex-start; }
          @media screen and (max-width: 520px) {
            .cast .inner .list .item.is-medium.-no-sub-title {
              grid-template:
                "img name" auto /
                30vw 1fr; } }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-medium.-no-sub-title {
              grid-template:
                "img name" auto /
                160px 1fr; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-medium.-no-sub-title {
              grid-template:
                "img name" auto /
                180px 1fr; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-medium.-no-sub-title {
              grid-template:
                "img name" auto /
                200px 1fr; } }
          /* --- */
        /* cast size:medium type:one-third */
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-medium.-one-third {
              width: calc(100% / 3 - 8px);
              grid-template:
                "img" auto
                "name" 1fr /
                1fr;
              justify-items: center;
              align-items: flex-start;
              text-align: center; } }
          /* --- */
          .cast .inner .list .item.is-medium .name {
            font-size: clamp(2.2rem, 1.969rem + 0.58vw, 2.8rem); }
          /*.  is-medium & -no-sub-title の場合の name のスタイル */
          .cast .inner .list .item.is-medium .name {
            align-self: center; }
          /* --- */
          /*.  name に name-sub を含む場合 */
          .cast .inner .list .item.is-medium .name.has-sub {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 0px; }
            @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-medium .name.has-sub {
            justify-content: center; } }
          .cast .inner .list .item.is-medium .name .name-sub {
            font-size: 1.4rem;
            line-height: 1.4;
            opacity: 0.8; }
          /* --- */
          .cast .inner .list .item.is-medium .img {
            width: 140px; }
            @media screen and (max-width: 520px) {
              .cast .inner .list .item.is-medium .img {
                width: 30vw; } }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-medium .img {
                width: 100%; } }
        .cast .inner .list .item.is-small {
          width: 100%;
          grid-template: "title name" auto / auto 1fr; }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-small {
              grid-template: ". title name ." auto / 1fr auto auto 1fr; } }
          .cast .inner .list .item.is-small .sub-title {
            justify-self: flex-start;
            align-self: center; }
          .cast .inner .list .item.is-small .name {
            font-size: clamp(2.2rem, 1.969rem + 0.58vw, 2.8rem); }
        .cast .inner .list .item .sub-title {
          grid-area: title;
          align-self: flex-end;
          display: inline-block;
          padding: 0 0.4em;
          color: #1E2581;
          font-size: 1.4rem;
          border: 1px solid #1E2581;
          border-radius: 2px; }
        .cast .inner .list .item .name {
          grid-area: name;
          width: 100%;
          color: #1E2581;
          font-weight: 500;
          line-height: 1.3; }
          .cast .inner .list .item .name span {
            display: inline-block; }
        .cast .inner .list .item .img {
          grid-area: img;
          align-self: center;
          border-radius: 4px; }
        .cast .inner .list .item .comment {
          grid-area: comment;
          width: 100%;
          padding: 16px;
          background: #f8f1d1;
          border-radius: 4px; }
          .cast .inner .list .item .comment .small-title {
            color: #1E2581;
            font-size: 1.4rem; }
          .cast .inner .list .item .comment .detail {
            margin-top: 0.75em;
            font-size: 1.4rem; }

.cast::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 80px;
  left: 0;
  background: #FFFEEC;
  z-index: -1;
  /*@include pc-thin {
      top:80px;
  }*/ }

/* ナレーター背景・見出し文字色調整 */
.cast + .cast .inner .title {
  color: #FFFADF;
}
.cast + .cast::before {
  display: none;
}


/* bnr */
.bnr {
  display: flex;
  justify-content: center;
  margin-top: min(12vw, 96px);
  margin-bottom: min(12vw, 96px); }
  .bnr__wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    row-gap: min(2vw, 15px);
    width: min(90%, 900px);
    padding: min(5vw, 30px) min(5%, 30px); }
    .bnr__wrap a {
      width: min(48%, 240px);
      margin: 0 1%; }
      .bnr__wrap a img {
        width: 100%;
        height: auto; }
      .bnr__wrap a:hover img {
        opacity: 0.8; }



/* info__credit */
.info__credit {
  margin-top: 40px;
  padding-inline: 15px;
}
@media screen and (min-width: 520px) {
  .info__credit {
    display: grid;
    grid-template-columns: 4em 1fr;
    align-items: baseline;
    row-gap: 0.35em;
    -moz-column-gap: 0.75em;
         column-gap: 0.75em;
    width: min(100%, 500px);
    margin-inline: auto;
    padding-inline: 25px;
  }
}
@media screen and (min-width: 960px) {
  .info__credit {
    width: clamp(500px, 50vw, 870px);
    padding-inline: min(3vw, 45px);
  }
}
.info__credit dt {
  font-size: min(0.8em, 1.8rem);
  font-weight: 300;
}
.info__credit dd {
  font-size: 0.9em;
}
.info__credit dd span {
  display: inline-block;
}
.info__credit dd + dt {
  margin-top: 15px;
}
@media screen and (min-width: 520px) {
  .info__credit dd + dt {
    margin-top: 0;
  }
}


/* ----- footer ----- */
.footer {
  margin-top: 60px;
  padding: 32px 16px 24px;
  background: #1E2581;
  text-align: center; }
  @media screen and (min-width: 960px) {
    .footer {
      margin-top: 120px;
      padding-top: 40px;
      padding-bottom: 38px; } }
  .footer small {
    display: block;
    margin-top: 16px;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.35;
    color: #f8f1d1; }