@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
/* slick
-------------------------------------------------------------------------------------------------------------------------- */
.slider li {
      position: relative;
}
.slider img {
      width: 100%;
      height: calc(100vh - 120px);
      object-fit: cover;
      object-position: top;
}
.slick-slider {
      margin-bottom: 0 !important;
}
@media screen and (max-width: 1024px) {
      .slider img {
            height: 70vh;
      }
}
@media screen and (max-width: 960px) {
      .slider img {
            height: 100vh;
      }
}
@media screen and (max-width: 680px) {
      .slider img {
            object-position: center;
      }
}
@media screen and (max-width: 580px) {
      .slider img {
            object-position: top;
      }
}
/*main_v_text_box*/
.main_v_text_box {
      position: relative;
}
.main_v_title {
      font-size: 1.9rem;
      position: absolute;
      top: 43%;
      left: 12%;
      word-break: keep-all;
      transform: translate(-0%, -50%);
      writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
}
@media screen and (min-width: 1361px), print {
      .font-Large .main_v_title {
            font-size: 2.0rem !important;
            top: 38% !important;
      }
      .font-Large .main_v_title span {
            padding: 1em 0.2em 0em 0.2em !important;
      }
}
.main_v_title span {
      background: #fff;
      padding: 1em 0.2em 0em 0.2em;
      display: inline-block;
      margin-left: 0.5em;
      letter-spacing: 1px;
}
.main_v_title span:nth-child(3) {
      transform: translateY(5em);
      margin-left: auto;
}
@media screen and (max-width: 1360px) {
      .main_v_title {
            font-size: 1.6rem;
      }
      .font-Large .main_v_title span, .font-Medium .main_v_title span {
            padding: 0.5em 0.2em 0em 0.2em !important;
      }
}
@media screen and (max-width: 960px) {
      .main_v_title {
            left: 5%;
            word-break: break-all;
      }
}
@media screen and (max-width: 680px) {
      .main_v_title {
            font-size: 1.5rem;
            top: auto;
            left: auto;
            right: 10%;
            transform: translate(-0%, -0%);
            bottom: calc(70px + 15%);
      }
}
.main_v_title_sp {
      display: contents !important;
}
@media screen and (max-width: 680px) {
      .main_v_title_sp {
            display: inline-block !important;
      }
      .main_v_title_pc {
            display: contents !important;
      }
      .main_v_title span:nth-child(3) {
            transform: translateY(0);
      }
}
/*top_important_area 重要なお知らせ
-------------------------------------------------------------------------------------------------------------------------- */
.top_important_area {
      padding: 3em 0;
}
.top_important {
      font-size: 1.8rem;
      display: flex;
      border-bottom: 1px solid var(--line_gray_l);
}
.top_important .top_important_title {
      padding: 1.2em 3em 1.2em 0;
      position: relative;
      width: 25%;
      text-align: center;
      letter-spacing: 2px;
      border-top: 1px solid var(--line_gray_l);
}
.top_important .top_important_title:before {
      content: "";
      background: var(--line_gray_l);
      width: 1px;
      height: calc(100% - 2.4em);
      position: absolute;
      top: 1em;
      right: 2.5em;
}
.top_important .top_important_title span {
      background: var(--col_red);
      display: inline-block;
      padding: 0.1em 1em;
      color: #fff;
      font-size: #fff;
      text-align: center;
}
@media screen and (max-width: 960px) {
      .top_important .top_important_title {
            font-size: 0.9em;
      }
}
@media screen and (max-width: 680px) {
      .top_important {
            font-size: 1.7rem;
            display: block;
      }
      .top_important .top_important_title {
            font-size: 1em;
            width: auto;
            padding: 1.2em 0em 0em 0;
      }
      .top_important .top_important_title:before {
            content: none;
      }
}
/*top_important_list
---------------------------------------*/
.top_important .info_list {
      width: 75%;
}
.top_important .info_list > li a {
      padding: 1.2em 0em;
}
.top_important .info_list > li:last-child {
      border-bottom: none;
}
@media screen and (max-width: 960px) {
      .top_important .info_list_inner .date {
            width: 7em;
      }
      .top_important .info_list_inner .text_box {
            width: calc(100% - 7em);
      }
      .top_important .info_list > li a {
            padding: 1.2em 0.8em;
      }
}
@media screen and (max-width: 680px) {
      .top_important .info_list {
            width: auto;
      }
      .top_important .info_list .info_list_inner {
            font-size: 1.7rem;
      }
      .top_important .info_list_inner .text_box {
            width: auto;
      }
      .top_important .info_list > li:first-child {
            border-top: none;
      }
}
/*top_schedule_area 本日の公演
-------------------------------------------------------------------------------------------------------------------------- */
.top_schedule_area {
      padding-top: 10rem;
      padding-bottom: 7rem;
}
.top_important_area + .top_schedule_area {
      padding-top: 7rem;
      padding-bottom: 7rem
}
@media screen and (max-width: 680px) {
      .top_schedule_area {
            padding-top: 7rem;
            padding-bottom: 4.5rem;
      }
      .top_important_area + .top_schedule_area {
            padding-top: 4.5rem;
            padding-bottom: 4.5rem;
      }
}
@media screen and (max-width: 480px) {
      .top_schedule_area {
            padding-top: 6rem;
            padding-bottom: 4rem;
      }
      .top_important_area + .top_schedule_area {
            padding-top: 4rem;
            padding-bottom: 4rem;
      }
}
.top_schedule_flex {
      display: flex;
      justify-content: space-between;
      gap: 0 5%;
}
.top_perform_box {
      width: 48%;
}
.top_cale_box {
      width: 45%;
      position: relative;
}
@media screen and (max-width: 960px) {
      .top_schedule_flex {
            display: block;
      }
      .top_perform_box {
            width: auto;
      }
      .top_cale_box {
            width: auto;
            padding-top: 5em;
          
      }
}

/*top_perform_list*/
.top_perform_list > li {
      padding: 1em;
}
.top_perform_title {
      margin-bottom: 2em;
}
.perform_all_btn {
      margin-top: 2em;
}
@media screen and (max-width: 680px) {
      .top_perform_list > li {
            margin-bottom: 3em;
      }
}
/*top_perform_list_inner*/
.top_perform_list_inner {
      font-size: 1.8rem;
      display: flex;
      justify-content: space-between;
      gap: 0 8%;
}
.top_perform_list_inner .img {
      width: 36%;
}
.top_perform_list_inner .img img {
      width: 100%;
}
.top_perform_list_inner .text_box {
      width: 64%;
}
.top_perform_list_inner .btn {
      padding-top: 1.5em;
}
.top_perform_list_inner .btn > * {
      width: 12em;
      justify-content: center;
}
@media screen and (max-width: 680px) {
      .top_perform_list_inner {
            display: block;
      }
      .top_perform_list_inner .img {
            width: 50%;
            margin: auto auto 1em auto;
            z-index: 0;
      }
      .top_perform_list_inner .text_box {
            width: auto;
            position: relative;
            padding-bottom: 2em;
      }
      .top_perform_list_inner .text_box:before {
            content: "";
            background: var(--bg_gray_l2);
            width: 150%;
            height: 130%;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -0%);
            z-index: -1;
      }
      .top_perform_list_inner .btn {
            padding-top: 0.5em;
            text-align: center;
      }
      .top_perform_list_inner .btn > * {
            width: 80%;
      }
}
/*top_info_area お知らせ 展示・ワークショップタイトル
-------------------------------------------------------------------------------------------------------------------------- */
.top_info_area {
      padding: 6em 0;
}
.top_info {
      display: flex;
      justify-content: space-between;
}
.top_info_title {
      width: 6em;
      margin-right: 7em;
}
.top_info_area .top_info_box {
      width: calc(100% - 13em);
}
.top_info_area .info_list {
      padding-top: 1em;
}
.top_info_btn .btn > * {
      margin: auto 0 auto auto;
}
@media screen and (max-width: 680px) {
      .top_info_area {
            padding: 2em 0;
      }
      .top_info {
            display: block;
      }
      .top_info_title {
            width: auto;
            text-align: left;
            margin-bottom: 2em;
      }
      .top_info_area .top_info_box {
            width: auto;
      }
      .top_info_btn .btn > * {
            margin: auto auto auto auto;
      }
}
/*top_workshop_area  展示・ワークショップ
-------------------------------------------------------------------------------------------------------------------------- */
.top_workshop_area {
      padding: 3em 0 8em 0;
      gap: 0 13em;
}
.top_workshop_flex {
      position: relative;
      display: flex;
      justify-content: space-between;
      min-height: 30em;
}
.top_ws_slide_area {
      width: 100%;
      /*   position: absolute;
      top: 0;
      left: 0;
      width: calc(100% + 13em);
      transform: translateX(13em);*/
}
@media screen and (max-width: 680px) {
      .top_workshop_area {
            padding: 3em 0 3em 0;
      }
      .top_workshop_area .sp_section_13 {
            max-width: 100%;
      }
      .top_workshop_flex {
            display: block;
            min-height: inherit;
      }
      .top_ws_slide_area {
            position: static;
            top: auto;
            left: auto;
            width: auto;
            transform: translateX(0);
      }
      .top_workshop_area .top_info {
            max-width: 90%;
            margin: auto;
      }
}
/*slider
--------------------------------------------------------------*/
/*1枚の時*/
.one_slide > li {
      width: 28%;
      border: solid 1px var(--line_gray_l);
}
.top_ws_slider li .ws_inner {
      padding: 1.2em 1em;
}
@media screen and (max-width: 960px) {
      .one_slide > li {
            width: 42%;
      }
}
@media screen and (max-width: 680px) {
      .one_slide {
            width: 80%;
            margin: auto;
      }
      .one_slide > li {
            width: 100%;
      }
}
/*2枚以上の時*/
.top_ws_slider li.slick-slide {
      margin: 0 0.8em;
      border: solid 1px var(--line_gray_l);
}
.top_ws_slider li.slick-slide .ws_inner {
      padding: 1.2em 1em;
}
.top_ws_slider .slick-slide {
      height: auto !important;
}
.top_ws_slider .slick-track {
      display: flex !important;
}
@media screen and (max-width: 680px) {
      .top_ws_slider {
            margin-bottom: 3em !important;
      }
      .top_ws_slider li.slick-slide {
            margin: 0 1em;
      }
}
/*dots
--------------------------------------------------------------*/
@media screen and (min-width: 681px), print {
      .top_ws_slider .slick-dots {
            width: 40% !important;
            left: 0.5em;
            text-align: left;
      }
}
/*dotsデザイン*/
.top_ws_slider .slick-dots li {
      width: 30px !important;
      height: 20px;
}
.top_ws_slider .slick-dots li button {
      width: 100% !important;
      height: 100% !important;
}
.top_ws_slider .slick-dots li button:before {
      font-size: userset !important;
      width: 100% !important;
      height: 3px !important;
      content: '' !important;
      opacity: 1 !important;
      top: 50%;
      background: #d6d6d6;
}
.top_ws_slider .slick-dots li.slick-active button:before {
      background: #aec2ce;
}
/*arrow
--------------------------------------------------------------*/
@media screen and (min-width: 681px), print {
      .slick-prev, .slick-next {
            top: auto !important;
            bottom: -8em !important;
      }
      .slick-prev {
            left: 0.8em !important;
      }
      .slick-next {
            right: auto !important;
            left: calc(5rem + 2em);
      }
}
/*矢印デザイン*/
.slick-prev, .slick-next {
      font-size: 1.6rem !important;
      width: 5.0rem !important;
      aspect-ratio: 1;
      border: solid 1px var(--col_main) !important;
      height: auto !important;
      z-index: 90;
      background: #fff !important;
}
.slick-next {
      transform: rotate(180deg);
}
.slick-prev:before, .slick-next:before {
      font-size: 1.6rem;
      line-height: 1;
      opacity: 1 !important;
      content: "" !important;
      background: url("../images/slide_arrow.svg") no-repeat;
      aspect-ratio: 9/16;
      width: 0.5em !important;
      display: block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
}
@media screen and (min-width: 961px), print {
      .slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus {
            background: var(--col_main) !important;
      }
      .slick-prev:hover:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-next:focus:before {
            filter: invert(100%) brightness(100%);
      }
}
@media screen and (max-width: 680px) {
      .slick-prev, .slick-next {
            border: none !important;
            background: transparent !important;
      }
      .slick-prev {
            left: 1em !important;
      }
      .slick-next {
            right: 1em !important;
      }
}
/*top_workshop_btn
--------------------------------------------------------------*/
.top_workshop_btn {
      padding-top: 2em;
}
/*top_dendo_area 横浜の大衆芸能の殿堂
-------------------------------------------------------------------------------------------------------------------------- */
.top_dendo_area {
      padding: 5em 0;
}
.top_dendo_w {
      max-width: 1171px;
      margin: auto;
}
@media screen and (max-width: 1200px) {
      .top_dendo_w {
            max-width: 90%;
      }
}
@media screen and (max-width: 680px) {
      .top_dendo_area {
            padding: 3em 0;
      }
      .top_dendo_w {
            max-width: inherit;
      }
}
@media screen and (min-width: 681px), print {
      .top_dendo_flex {
            position: relative;
      }
      .top_dendo_flex .img {
            width: 77%;
            margin: auto 0 auto auto;
            position: relative;
            z-index: 0;
      }
      .top_dendo_flex .img img {
            width: 100%;
      }
      .top_dendo_flex .img:before {
            content: "";
            background: var(--bg_blue_l);
            width: 160%;
            height: 73%;
            position: absolute;
            bottom: -37%;
            right: -50%;
            z-index: -1;
      }
      .top_dendo_flex .text_box {
            display: contents;
      }
      .top_dendo_flex .top_dendo_title_box {
            position: absolute;
            top: 0;
            left: 0;
      }
      .top_dendo_flex .top_dendo_title {
            position: relative;
            writing-mode: vertical-rl;
            font-family: var(--font_min);
      }
      .top_dendo_flex .top_dendo_title span {
            position: relative;
            display: inline-block;
            padding: 1.5em 0;
      }
      .top_dendo_flex .top_dendo_title span:before, .top_dendo_flex .top_dendo_title span:after {
            content: "";
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            background: var(--col_main);
      }
      .top_dendo_flex .top_dendo_title span:before {
            top: 0;
      }
      .top_dendo_flex .top_dendo_title span:after {
            bottom: 0;
      }
      .top_dendo_flex .top_dendo_flex_text {
            width: 46%;
            position: relative;
            transform: translateY(-6em);
      }
      .top_dendo_flex_text_pd {
            padding: 3em 2em 2em 0;
            background: #fff;
      }
}
@media screen and (max-width: 960px) {
      .top_dendo_flex .top_dendo_flex_text {
            width: 70%;
            transform: translateY(3em);
      }
}
@media screen and (max-width: 680px) {
      .top_dendo_flex {
            position: relative;
            padding-bottom: 2em;
      }
      .top_dendo_flex:before {
            content: "";
            background: var(--bg_blue_l);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
      }
      .top_dendo_flex .text_box {
            background: #fff;
            width: 90%;
            margin: 2em auto auto auto;
            position: relative;
      }
      .top_dendo_flex .top_dendo_title {
            text-align: center;
            font-family: var(--font_min);
            padding: 0.8em 1em 0.5em 1em;
      }
      .top_dendo_flex .top_dendo_flex_text {
            width: 90%;
            background: #fff;
            padding: 1em;
            transform: translateY(0);
      }
}
/*top_dendo_btn
------------------------------------------------------------------*/
.top_dendo_btn {
      padding-top: 2em;
}