.key_visual_images-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 0px);
  overflow: hidden; }

.key_visual_images-area img {
  width: 100%;
  height: calc(100vh - 0px);
  object-fit: cover; }

.theme_visual {
  position: relative;
  width: 100%; }

.theme_visual img {
  width: 100%;
  height: 100%;
  object-fit: contain; }

.slide_img {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  min-height: 100vh;
  object-fit: cover;
  opacity: 0;
  width: 100%; }

.slide_item:nth-of-type(1) .slide_img {
  animation-delay: 0s; }

.slide_item:nth-of-type(2) .slide_img {
  animation-delay: 5s; }

.slide_item:nth-of-type(3) .slide_img {
  animation-delay: 10s; }

@keyframes slideAnime {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(-2%); } }
.slide_item {
  bottom: 0;
  height: 100%;
  position: absolute;
  right: -2%;
  width: 103%; }

@media screen and (max-width: 960px) {
  .tab-content {
    flex-wrap: wrap;
    gap: 0 5px; } }
/* slide */
.full-movie {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  text-align: center; }
  .full-movie img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.key-visual {
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin: 0px auto; }

.news-wrapper {
  padding: 0 25px; }
  .news-wrapper dl {
    display: block; }
    .news-wrapper dl dt {
      width: 20%; }
    .news-wrapper dl dd {
      width: 80%; }
  .news-wrapper .add-flex {
    gap: 0; }
  .news-wrapper .top-news .datetime {
    display: inline-block; }
  .news-wrapper .top-news .category {
    display: inline-block;
    width: 100px;
    margin-left: 15px;
    padding: 4px 0 6px 0;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 5px; }

.toggle_contents {
  width: 100%; }

.toggle_wrap {
  position: relative;
  width: 100%;
  opacity: 0.8; }

.toggle_wrap label {
  position: absolute;
  right: 0; }

.toggle_lab1, .toggle_lab2, .toggle_lab3 {
  padding: 15px;
  cursor: pointer;
  text-decoration: underline; }

#toggle1:checked ~ .toggle_lab1 {
  display: none; }

#toggle2:checked ~ .toggle_lab2 {
  display: none; }

#toggle1:checked ~ .panels #area1 {
  display: block; }

#toggle2:checked ~ .panels #area2 {
  display: block; }

input[name="check"] {
  display: none; }

.panel {
  padding: 0 0 50px 0;
  display: none; }

@keyframes SlideUp {
  0% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
.panel_content {
  animation-name: SlideUp;
  animation-duration: 2s;
  background-color: #fff;
  width: 100%; }

.bannar-wrapper .flex-box .text-wrap {
  width: 40%;
  right: 5%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  /* backdrop-filter: blur(4px); */
  -webkit-backdrop-filter: blur(4px); }
  .bannar-wrapper .flex-box .text-wrap.white {
    color: #ffffff; }
  .bannar-wrapper .flex-box .text-wrap.gray {
    color: #333333; }
  .bannar-wrapper .flex-box .text-wrap p {
    font-size: 12px; }

.cm-wrapper .text-wrap img {
  width: 70%; }

.cm-wrap .cm-box {
  position: absolute;
  display: flex;
  right: 25px;
  bottom: 25px;
  width: calc(100% - 50px / 1);
  height: 170px;
  background-color: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0px 0px 10px rgba(17, 17, 17, 0.3); }
  .cm-wrap .cm-box .flex-box {
    display: flex;
    position: relative;
    flex-grow: 1;
    width: 100%;
    border-right: 1px solid white;
    text-align: center; }
    .cm-wrap .cm-box .flex-box:last-child {
      border-right: none; }
    .cm-wrap .cm-box .flex-box .logo-box {
      position: absolute;
      top: 30%;
      left: 50%;
      min-width: 55%;
      min-height: 30px;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .logo-box img {
        pointer-events: none;
      }
      
    .cm-wrap .cm-box .flex-box .text-area {
      position: absolute;
      bottom: 25%;
      left: 10px;
      padding: 10px 20px 0 0;
      width: 100%; }
      .cm-wrap .cm-box .flex-box .text-area p{
        font-size: 0.9rem;
      }
    .cm-wrap .cm-box .flex-box a {
      display: block;
      width: 100%;
      color: #ffffff; }
      .cm-wrap .cm-box .flex-box a:hover {
        opacity: 0.2; }

.title-box {
  position: absolute;
  bottom: calc(50px / 2 + 200px);
  left: 25px;
  background-color: #ffffff;
  color: #111111; }
  .title-box h3 {
    font-family: "Noto Serif JP", "serif";
    font-size: 70px;
    margin: 0;
    padding: 0;
    line-height: 1; }

.full-banner {
  margin-left: auto;
  margin-right: auto;
  min-width: 1200px;
  max-width: 1400px; }

.logo-box-maar{
  margin-inline: auto;
  margin-bottom: 5px;
  width: 90%;
}

@media screen and (max-width: 960px) {
  .header-wrapper {
    background-color: #333333; }

  #header.scroll .header-wrapper .logo {
    display: block; }

  .full-screen {
    height: calc(43vh - 60px); }

  .full-movie {
    height: calc(43vh - 60px); }

  .video {
    height: calc(50vh - 60px); }

  .key-visual {
    margin-top: 60px; }

  .bannar-wrapper .flex-box .image-wrap {
    height: 150px;
    width: 100%; }
  .bannar-wrapper .flex-box .text-wrap {
    width: 46%;
    right: 2%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); }
    .bannar-wrapper .flex-box .text-wrap p {
      font-size: 11px; }
    .bannar-wrapper .flex-box .text-wrap h3 {
      font-size: 18px;
      font-weight: 300;
      padding-bottom: 5px; }

  .cm-wrap {
    display: none; }

  .news-wrapper {
    padding: 0; }
    .news-wrapper dl {
      padding-top: 51px; }
      .news-wrapper dl .add-flex {
        display: flex; }
      .news-wrapper dl dt {
        width: 32%; }
      .news-wrapper dl dd {
        width: 68%; }
    .news-wrapper .add-flex {
      gap: 0; }
    .news-wrapper .top-news .datetime {
      display: block;
      font-size: 0.75rem; }
    .news-wrapper .top-news .category {
      width: 80px;
      font-size: 0.625rem;
      margin-left: 0px; }

  .toggle_wrap {
    width: 100%;
    margin: 0 auto; }
    .toggle_wrap label {
      width: 100%;
      top: calc(2rem + 37.5px);
      position: absolute;
      text-align: center; }

  .full-banner {
    min-width: 90%;
    max-width: 90%; }

  .bannar-wrapper {
    padding-top: 0; } }

/*バナー 2023.07.29*/
.box_bnr{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: min(100% - 3rem, 1400px);
  margin-block: 5rem 2rem;
  margin-inline: auto;
  gap: 5rem;

  & a {
    cursor: pointer;

    & img{
      width: 100%;
    }
  }
}

@media screen and (max-width: 1000px) {
  main.top-page section{
    margin-bottom: 0;
  }

  .cm-wrapper{
    margin-top: 30px;
  }

    section h1 {
        margin-top: 15px !important;
        margin-bottom: 13px !important;
    }


  .box_bnr{
    overflow: initial;
    margin-top: 3rem;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4等分の列を作成 */
    gap: 10px;

    & a{
      &:nth-child(1){
        grid-column: 1 / span 4;
        grid-row: 1;
      }
      &:nth-child(2){
        grid-column: 1;
        grid-row: 2;
        grid-column: 1 / span 2;
      }
      &:nth-child(3){
        grid-column: 2;
        grid-row: 2;
        grid-column: 3 / span 2;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .bannar-wrapper{
    &.flex-box{
      &.image-wrap{
        width: auto;
      }
    }
  }
    
  .image-wrap {
    &.anime.accent{
      & img{
        object-fit: contain;
      }
    }
  }
  .bannar-wrapper .flex-box .image-wrap{
    height: 117px;
  }
}