:root {--main_padding: 60px;--grid_gap: min(38px, 2vw)} @media only screen and (max-width: 835px) { :root { --main_padding: 40px} } .container {width: 90%;max-width: 1300px;margin: 0 auto;} h2.h_title {position: relative;display: inline-block;font-family: "Russo One", YakuHanJP, "Noto Sans JP", "Noto Sans", "メイリオ", "Meiryo", "MS PGothic", sans-serif;font-size: 70px;line-height: 1em;} h2.h_title::after {position: absolute;display: block;content: "";top: 0em;right: -4%;transform: translateX(100%);width: 0.6em;height: 0.6em;background: no-repeat top left url(../images/svg/blue_star.svg);background-size: contain;} h2.h_title img {width: auto;height: min(50px, 4vw);} .h_outer {position: relative;padding: min(50px, 4vw) 0} .h_outer .text_slide {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 120vw;height: 100%;display: flex} .h_outer .text_slide img {height: 100%;width: auto;animation: hor_move_r 20s linear infinite} .link_btn {position: relative;display: block;width: 320px;padding: 0.8em;font-size: 18px;font-weight: bold;color: #fff;background-color: #e73927;text-align: center;border-radius: 1000px;transition: 0.2s} .link_btn.arrow {padding-right: 2em} .link_btn.arrow::after {position: absolute;display: block;content: "";top: 50%;right: 1.5em;transform: translateY(-50%);height: 12px;width: 7px;background: no-repeat center url(../images/svg/right_arrow.svg);background-size: contain} .link_btn.alt {background-color: #1696BC} .link_btn:hover {transform: translateY(-3px)} @media only screen and (max-width: 835px) { h2.h_title { font-size: 40px} .h_outer { text-align: left; padding: min(50px, 8vw) 0} .link_btn { width: 260px; font-size: 16px; padding: 0.8em} } #fv {position: relative;height: 30vw;background: no-repeat center url(../images/top_bg_plus.png);background-size: cover} #fv::before {position: absolute;display: block;content: "";left: 0;bottom: 0;width: 100%;height: 100%;background: no-repeat center bottom url(../images/svg/top_bottom_curve.svg);background-size: contain} #fv .logo {position: absolute;top: 27%; left:50%; transform: translateX(-50%);height: min(100px, 8vw)} #fv .logo img {position: relative;width: 80%;} @media only screen and (max-width: 835px) { #fv { height: 60vw;} #fv .logo::before { transform: translate(-60%, -50%); width: 160%} #fv .logo{width: 84%; top: 40%;} #fv .logo img {width: 100%;} } #copy {padding: 0 0 calc(var(--main_padding)*1);} #copy .container .copy_txt { margin: 0 auto; width: 100%; font-weight: bold;font-size: 32px;line-height: 1.4em;margin-bottom: 40px;} #copy .container .center_txt { margin: 0 auto; width: 100%;max-width: 740px; margin-bottom: 20px;font-weight: bold;font-size: 20px; line-height: 1.8em; letter-spacing: .05em;} #copy .container .main_txt { margin: 0 auto; width: 100%;max-width: 740px; text-align: left;margin-bottom: 16px;} @media only screen and (max-width: 835px) { #copy .container .copy_txt {width: 100%;font-size: 20px;line-height: 1.4em;} #copy .container .center_txt {width: 98%;font-size: 16px;line-height: 1.8em; text-align: left;} #copy .container .main_txt {width: 98%;font-size: 16px;line-height: 1.8em;} #copy {padding: calc(var(--main_padding)*1) 0 calc(var(--main_padding)*1);} } #event {position: relative;padding: calc(var(--main_padding)*1) 0 calc(var(--main_padding)*1);background-color: #f2f2f2} #event .container .h_outer {margin-bottom: calc(var(--main_padding)*0.3)} #event .container .bnr_grid {display: grid;grid-template-columns: repeat(2, calc((100% - (var(--grid_gap))) / 2));grid-gap: var(--grid_gap)} #event .container .bnr_grid li {width: 100%} #event .container .bnr_grid li .number{border: 1px solid #ff7d71;color: #ff7d71;font-size: 14px;line-height: 1.6em;letter-spacing: 0.08em;font-weight: bold;/* background-color: #ff7d71; */border-radius: 4px;display: inline-block;padding: 4px 34px;} #event .container .bnr_grid li a {position: relative;display: block;width: 100%;padding-top: calc(100% * 250 / 410);background-color: #fff} #event .container .bnr_grid li a img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain} @media only screen and (max-width: 835px) { #event { padding: calc(var(--main_padding)*1) 0 calc(var(--main_padding)*1)} #event .container .h_outer { margin-bottom: 0} #event .container .bnr_grid { grid-template-columns: repeat(1, calc((100% - (var(--grid_gap))) / 1))} #event .container .bnr_grid li:not(:last-child){margin-bottom: 24px;} } #top_link{padding: calc(var(--main_padding)*1) 0 calc(var(--main_padding)*1);} #top_link .container .top_btn .top_btn_img{width: 40%; min-width: 340px;} main.in {margin-top: 50px} .totop {display: flex;justify-content: center;padding-top: 50px} #event_detail .h_outer {background-image: url("../images/top_bg_plus.png");background-size: cover;height: 33vw} #event_detail .h_outer .text_slide {height: 33%} #event_detail .h_outer .text_slide img {margin-right: 8vw} #event_detail .container {max-width: 1200px} #event_detail .detail_wrap {background-color: #fff;margin-top: -30vw;position: relative;z-index: 10;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);padding: 20px;text-align: left;margin-bottom: 10px} #event_detail .detail_wrap figure img {width: 100%;height: auto} #event_detail .detail_wrap .detail_txt {padding: 20px 30px 30px} #event_detail .detail_wrap .detail_txt p:last-of-type {margin-bottom: 0} #event_detail .detail_wrap .detail_txt .tit {font-size: 40px;line-height: 1.5em;font-weight: bold;margin-bottom: 0.3em} #event_detail .detail_wrap .detail_txt .date {color: #e73927;font-weight: bold;font-size: 18px;line-height: 1.5em;margin-bottom: 1em !important} #event_detail .detail_wrap .detail_txt .date span {font-size: 2em} #event_detail .detail_wrap .detail_txt .place {font-weight: bold;font-size: 24px;line-height: 1.5em;margin-bottom: 0.75em !important} #event_detail .detail_wrap .detail_txt .place span {font-size: 0.7em;display: block;line-height: 1.5em;float: left} #event_detail .detail_wrap .detail_txt .place .map {display: flex;background-color: #000;color: #fff;font-size: 12px;line-height: 1em;width: 4em;justify-content: center;align-items: center;height: 24px;margin-left: 1em;float: left} #event_detail .detail_wrap .detail_txt .time {background-color: #f2f2f2;padding: 1em 1.5em;margin-bottom: 30px;font-size: 16px;line-height: 1.7em} #event_detail .detail_wrap .detail_txt .time p {margin: 0} #event_detail .detail_wrap .detail_txt .time span {font-size: 0.8em} #event_detail .detail_wrap .detail_txt .cast {margin-bottom: 30px;font-weight: bold} #event_detail .detail_wrap .detail_txt .ticket {border-top: 1px solid #ccc;padding-top: 40px;margin-bottom: 40px} #event_detail .detail_wrap .detail_txt .ticket .ticket_tit {display: flex;align-items: center;font-size: 14px;line-height: 1em;margin-bottom: 10px} #event_detail .detail_wrap .detail_txt .ticket .ticket_tit .ticket_gray {background-color: #e73927;color: #fff;padding: 0.5em 1.5em;font-weight: bold;margin-right: 0.5em} #event_detail .detail_wrap .detail_txt .ticket .price h2{font-size: 1.2em;display: block;line-height: 1.7em;color:#e73927;font-weight: bold;border-left: 3px solid #e73927;padding: 0.2em 1em;margin: 2em 0 1em;} #event_detail .detail_wrap .detail_txt .ticket .price span {font-size: 0.8em;display: block;line-height: 1.7em} #event_detail .detail_wrap .detail_txt .ticket_link {background-color: #f5f5f5;padding: 1.5em 2em} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box {margin-bottom: 50px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_name {color: #fb4a4a;text-align: center;margin-bottom: 1.5em} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_name h2 {font-size: 30px;line-height: 1.5em;font-weight: bold;margin-bottom: 0.2em} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block {margin-bottom: 30px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block h3 {font-weight: bold;text-align: left;font-size: 20px;line-height: 1.7em;margin-bottom: 15px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li {border: 1px solid #fb4a4a;padding: 25px 30px;display: flex;justify-content: space-between;border-radius: 10px;align-items: center;margin-bottom: 10px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li .playguide {width: 64.66%;font-size: 20px;line-height: 1.5em;font-weight: bold} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li .playguide span{ font-size: 14px; line-height: 1.5em; font-weight: 100;} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li .link_btn {background-color: #fb4a4a;padding: 1em 0;width: 33.33%;text-align: center} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box.stream .ticket_name {color: #626cb9} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box.stream .ticket_block ul li {border: 1px solid #626cb9} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box.stream .ticket_block ul li .link_btn {background-color: #626cb9} #event_detail .free_txt {margin-bottom: 50px;text-align: left} #event_detail .free_txt p {margin-bottom: 1.5em} #event_detail .detail_wrap .detail_txt li{margin-bottom: 0.5em;} #event_detail .detail_wrap .detail_txt li p{line-height: 1.6em;} #event_detail .free_txt h1 {font-weight: bold;background-color: #d73a3a;color: #fff;padding: 0.5em 1em;margin: 2em 0 1em;font-size: 20px;line-height: 1.5em} #event_detail .free_txt h2 {font-weight: bold;border-left: 3px solid #000;padding: 0.5em 1em;margin: 2em 0 1em;font-size: 18px;line-height: 1.5em} #event_detail .free_txt h3 {font-weight: bold;margin: 2em 0 0.75em;font-size: 18px;line-height: 1.5em} #event_detail .free_txt blockquote {border: 1px solid #ccc;padding: 1.5em 2em} #event_detail .free_txt .casts{ padding-top: 20px;} #event_detail .free_txt .casts ul{ display: flex; flex-wrap: wrap;} #event_detail .free_txt .casts li{ width: 50%; display: flex;margin: 1% 0;} #event_detail .free_txt .casts li figure{ width: 40%;} #event_detail .free_txt .casts li .txt{ width: 60%; padding: 0 5%;} #event_detail .free_txt .casts li span{ font-size: 0.8em; line-height: 1.7em; display: block;} #event_detail .free_txt .casts.vert{ padding:40px 0 20px;} #event_detail .free_txt .casts.vert li{ width:20%; display:block;padding: 0 1%; } #event_detail .free_txt .casts.vert li figure{ width: 100%; margin-bottom:0.5em;} #event_detail .free_txt .casts.vert li .txt{ width: 100%; padding:0; line-height:1.5em; text-align:center;} #event_detail .free_txt .btn{ display: block; background-color:#e73927; color: #fff; border-radius: 100vw; padding: 1em 0; text-align: center;} #event_detail .livereport{background-color: #fff;position: relative;z-index: 10;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);padding: 20px;text-align: left;margin: 30px auto 50px;} #event_detail .livereport .report_tit{text-align: center;border: none;padding: 0.7em 0;background-color: #e73927;color: #fff;margin: 10px 0;font-size: 40px;line-height: 1em;} #event_detail .livereport .report_stit{font-weight: bold;border-left: 3px solid #000;padding: 0.5em 1em;margin: 2em 0 1em;font-size: 26px;line-height: 1.5em;} #event_detail .livereport img{ margin-bottom: 0.5em;} #event_detail .livereport .one{ text-align: center; margin: 2em 0 1em;} #event_detail .livereport .two{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0 1em;} #event_detail .livereport .two div{ width: 49%;} #event_detail .livereport .three{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0 1em;} #event_detail .livereport .three div{ width: 32.33%;} #event_detail .livereport .four{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0 1em;} #event_detail .livereport .four div{ width: 24%;} #event_detail .livereport .four .block2{ width:50%;} #event_detail .livereport .five{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0 1em;} #event_detail .livereport .five div{ width: 19%;} @media only screen and (max-width: 835px) { .totop { padding-top: 20px} #event_detail .h_outer { height: 50vw} #event_detail .detail_wrap { margin-top: -45vw; margin-bottom: 0; padding: 0; box-shadow: none} #event_detail .detail_wrap .detail_txt { padding: 20px 0} #event_detail .detail_wrap .detail_txt .tit { font-size: 20px; margin-bottom: 1em} #event_detail .detail_wrap .detail_txt .date { font-size: 14px; margin-bottom: 0.5em !important} #event_detail .detail_wrap .detail_txt .place { font-size: 18px} #event_detail .detail_wrap .detail_txt .place span { font-size: 14px} #event_detail .detail_wrap .detail_txt .time { padding: 10px} #event_detail .detail_wrap .detail_txt .time p { margin-bottom: 0} #event_detail .detail_wrap .detail_txt .time span { display: block; line-height: 1.5em} #event_detail .detail_wrap .detail_txt .ticket { padding-bottom: 20px; margin-bottom: 20px} #event_detail .detail_wrap .detail_txt .ticket .price span { display: block; line-height: 1em} #event_detail .detail_wrap .detail_txt .ticket .price p { margin-bottom: 0.5em} #event_detail .detail_wrap .detail_txt .ticket_link { padding: 15px 15px 5px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_name { margin-bottom: 15px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_name h2 { font-size: 24px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_name p { font-size: 14px; line-height: 1.5em; text-align: left} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block h3 { font-size: 18px; margin-bottom: 10px; color: #2d2d2d;} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li { display: inherit; padding: 15px; border: 2px solid #e73927; margin-bottom: 18px;} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li .playguide { width: 100%; text-align: center; font-size: 16px; margin-bottom: 10px} #event_detail .detail_wrap .detail_txt .ticket_link .ticket_box .ticket_block ul li .link_btn { width: 100%; font-size: 16px; padding: 10px 0} #event_detail .free_txt { margin-bottom: 40px} #event_detail .free_txt blockquote { padding: 10px} #event_detail .free_txt .casts{ padding-top: 10px;} #event_detail .free_txt .casts li{ width: 100%; } #event_detail .free_txt .casts li .txt{ padding: 0 0 0 5%;} #event_detail .free_txt .casts.vert li{ width:50%; } #event_detail .livereport{padding: 0; box-shadow: none; border-bottom: 1px solid #666; padding-bottom: 20px; margin-bottom: 20px;} #event_detail .livereport .report_tit{padding: 0.7em 0;font-size: 20px;} #event_detail .livereport .report_stit{font-size: 18px; margin: 1em 0;} #event_detail .livereport .one{ margin: 1em 0;} #event_detail .livereport .two{ margin: 1em 0;} #event_detail .livereport .two div{ width: 100%; margin-bottom: 10px;} #event_detail .livereport .three{ margin: 1em 0;} #event_detail .livereport .three div{ width: 100%;} #event_detail .livereport .four{ margin: 1em 0;} #event_detail .livereport .four div{ width: 49%; line-height: 1.5em; margin-bottom: 10px;} #event_detail .livereport .four .block2{ width:100%;} #event_detail .livereport .five{ margin: 1em 0 1em;} #event_detail .livereport .five div{ width: 49%; line-height: 1.5em; margin-bottom: 10px;} } #top_link .container .top_btn .top_btn_img{width: 40%; min-width: 340px;} .pop_block{ background-color: #fff; padding: 50px;} .pop_block .tit{ font-size: 20px; font-weight: bold; margin-bottom: 40px;} .pop_block .info_box{ text-align: left; margin-bottom: 40px; border: 1px solid; padding: 20px 20px 14px;} .pop_block .info_box .stit{ font-size: 16px; line-height: 1.5em; background-color: #000; color: #fff; padding: 5px 12px 8px;} .pop_block .info_box p{ font-size: 16px; line-height: 1.5em;} .pop_block .txt_box{ text-align: left; margin-bottom: 40px;} .pop_block .txt_box .stit{ font-size: 18px; font-weight: bold; margin-bottom: 8px;} .pop_block .txt_box p{} @media only screen and (max-width: 769px){ .cancel{ font-size: 14px; padding: 12px 0; bottom: 0; top: inherit;} .pop_block{ padding: 20px 12px;} .pop_block .tit{ font-size: 18px; margin-bottom: 20px;} .pop_block .info_box{ padding: 8px; margin-bottom: 12px;} .pop_block .info_box .stit{ font-size: 14px; padding: 2px 8px;} .pop_block .info_box p{ font-size: 14px; line-height: 1.5em;} .pop_block .txt_box{ margin-bottom: 28px;} .pop_block .txt_box .stit{ font-size: 16px; margin-bottom: 4px;} .pop_block .txt_box p{ font-size: 14px; line-height: 1.5em;} } /*lightbox*/ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; } #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} #cboxOverlay{background:#02bcb9;} #colorbox{outline:none;} /* Edge */ _:-ms-lang(x)::backdrop, #colorbox{ transition:0.1s;} /* #cboxContent{margin-bottom:60px; overflow:visible;}*/ #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;} .cboxIframe{background:#000;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{background:#000;} #cboxLoadingGraphic{background:url(../images/loading_b.gif) no-repeat center center;} #cboxLoadingOverlay{background:#02bcb9;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;} #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;} #cboxClose:hover{background-position:-40px 0;} @media screen and (max-width: 769px) { #cboxContent{ margin-right:0; margin-bottom:50px;} #cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;} } .cancel.top_btn{ display: block; padding: 1.2em 1em; background-color: #c00; color: #fff; width:100%; margin:3vw auto; line-height: 1.5em; text-align: center;} /*# sourceMappingURL=pages.css.map */