@charset "utf-8"; * { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .css-1dbjc4n { border: none!important; border-radius: 0!important; } html { min-width: 320px; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; color: #333333; background-color: rgba(255,255,255,1.00); position: relative; } section { clear: both; padding: 2.5em 0; } section p span:not(.sp) { display: inline-block; } /*.leadbox br { display: none; }*/ header { background-image: url(../img/mv.jpg); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } header h1 { float: right; } header h1 img { height: 21em; margin-bottom: 3em; margin-right: 10%; } header nav { background-color: rgba(0,0,0,.5); height: 3em; } header nav::after { display: block; content: ""; clear: both; width: 100%; } header #menu { float: left; width: 100%; } header #menu > li { float: left; width: calc(100% / 10); border-right: 1px solid rgba(255,255,255,.2); } header #menu > li:first-child { border-left: 1px solid rgba(255,255,255,.2); } header #menu > li:last-child { border-right: none; } header #menu > li a { display: block; width: 100%; height: 3em; line-height: 3em; text-align: center; color: rgba(255,255,255,.8); text-decoration: none; transition: all 300ms 0s ease-in-out; } header #menu > li a:hover { color: rgba(255,237,0,0.80); background-color: rgba(255,255,255,.2); transition: all 300ms 0s ease-in-out; } header #menu > li.ulz a { color: rgba(255,255,255,.8); background-color: rgba(5,134,124,0.5); -webkit-box-shadow: 0px 0px 10px rgba(25,255,229,0.68); box-shadow: 0px 0px 10px rgba(25,255,229,0.68); } header #menu > li.ulz a:hover { color: rgba(0,84,84,0.80); background-color: rgba(82,248,235,.80); text-shadow: 0px 0px 8px rgba(255,255,255,1.00); } header #social { display: flex; } header #social li { width: calc(100% / 3); text-align: center; } header #social li img { max-width: 3em; } header #information { clear: both; background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%); } header #information .ct::after { display: block; content: ""; clear: both; width: 100%; } header #information .ct > div { width: 48%; margin: 0 1%; float: left; text-align: left; background-color: rgba(0,0,0,.6); border-radius: 0.3em; margin-bottom: 1em; padding: 1em 2em; color: rgba(255,255,255,1.0); } header #information .ct div#bnr { padding: 0; line-height: 0; background: none; border-radius: 0; } header #information .ct div#bnr img { border-radius: 0.3em; } header #information .ct div#tw { clear: both; } header #information .ct div div { width: 100%; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: relative; } header #information .ct #news dl { height: 203px; overflow-y: auto; border-bottom: 1px solid #86929b; border-top: 1px solid #86929b; margin-bottom: 0px; } header #information .ct #news dl dt { font-weight: bold; color: #ccd6dd; float: left; padding: .8em .8em 0 .8em; line-height: 1em; } header #information .ct #news dl dd { padding-left: 3em; padding-top: 2.2em; padding-bottom: 1em; padding-right: 1em; line-height: 130%; border-bottom: 1px solid #86929b; } header #information .ct #news dl dd:hover { background-color: rgba(0,0,0,.5); } header #information .ct #news dl dd:last-child { border-bottom: none; } header #information .ct #news dl dd a { color: rgba(255,204,35,1.00); text-decoration: none; } main { clear: both; } main section:nth-child(even) { background-color: rgba(0,0,0,.05); } main section .num { text-align: center; display: block; margin: 0 auto 1em; } footer { /*main-sectionの最後に白が来ない場合はrgba(242,242,242,1.00)*/ /*main-sectionの最後に白が来る場合はrgba(255,255,255,1.00)*/ background-color: rgba(255,255,255,1.00); /*background-color: rgba(0,0,0,.05);*/ color: rgba(255,255,255,.9); font-size: 80%; line-height: 160%; text-align: center; background-image: -webkit-linear-gradient(270deg,rgba(39,49,39,0.00) 0%,rgba(39,49,39,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(39,49,39,0.00) 0%,rgba(39,49,39,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(39,49,39,0.00) 0%,rgba(39,49,39,1.00) 100%); background-image: linear-gradient(180deg,rgba(39,49,39,0.00) 0%,rgba(39,49,39,1.00) 100%); } footer section { } footer a { color: #FFCC00; text-decoration: none; } footer img { margin: 1.5em auto; } footer .copyright { color: #333; } #page-top { position: fixed; bottom: 10px; right: 10px; font-size: 12px; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 80px; padding-right: 0; padding-left: 0; text-align: center; display: block; border-radius: 5px; -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50); height: 80px; line-height: 80px; } #page-top a:hover { text-decoration: none; -moz-opacity:0.9; opacity:0.9; filter: alpha(opacity=90); background-color: #FC0; } main section .ct > p { font-size: 120%; } main section p { text-align: center; margin-top: 2em; } main section dl { padding-top: 2em; font-size: 120%; line-height: 1.5em; } main section dl dt { text-align: center; border-bottom: solid thin rgba(0,0,0,0.20); margin-bottom: .3em; } main section dl dd { text-align: center; margin-bottom: 1.5em; } h2 { text-align: center; font-size: 235%; text-shadow: 0px 0px 10px rgba(205,0,3,.30); } h2 span { display: inline-block; } h3 { text-align: center; font-size: 240%; text-shadow: 0px 0px 10px rgba(205,0,3,.30); margin-bottom: 1em; line-height: 1.3em; } h3 span { display: inline-block; } main section p.catch { text-align: center; font-size: 180%; text-shadow: 0px 0px 10px rgba(205,0,3,.30); } main section p.catch span.red { color: rgba(145,0,0,1.00); text-shadow: 0px 0px 10px rgba(51,51,51,.30); font-size: 160%; } main section p.catch span.underline { text-decoration: underline; } main section p.catch span { display: inline-block; } main section h1.catch { color: #910000; text-align: center; font-size: 235%; text-shadow: 0px 0px 10px rgba(51,51,51,.30); } main section h1.catch span { display: inline-block; } main section img { display: block; max-width: 100%; margin: 1em auto 0; } main section ul { } main section ul li { text-align: center; margin-top: 2em; } main section ul li img { max-width: 90%; } .font90 { margin-top: .2em; font-size: 90%; } main section ul.cast_photo { display: flex; justify-content: center; width: 100%; max-width: 540px; margin: 2em auto 0; } main section ul.cast_photo li { text-align: center; margin: 0 .2em; padding: .2em .2em .5em; background: rgba(0,0,0,.05); } main section ul.cast_photo li img { max-width: 100%; margin: 0 0 .5em; } main section ul.cast_photo li span { display: block; font-size: 70%; line-height: 1em; letter-spacing: -.06em } th { font-weight: normal; } td strong { display: inline-block; margin-right: 2em } .bnr { display: block; width: 100%; text-align: left; padding: .5em 1em; border: thin solid rgba(255,204,0,1.00); border-radius: .3em; background-color: rgba(255,255,255,1); position: relative; text-decoration: none; } .bnr:hover { background-color: rgba(255,204,0,1.00); color: rgba(0,0,0,1); } .bnr::after { content: ">"; position: absolute; right: 1em; } .out del { text-decoration: line-through; } .ticketbox tr td { padding: .2em 0em; vertical-align: top; } .ticketbox tr td span { display: inline-block; } .ticketbox tr td.text-right { text-align: right; } .youtube { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 1em; clear: both; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } header #information .ct #bnr a:nth-child(2) img { margin-top: 10px; } .box { border: thin solid rgba(145,0,0,1.00); border-radius: .3em; padding: 1em; background-color: rgba(255,255,255,1.00); margin-top: 2em; } .cast p.name { font-weight: 400; font-size: 150%; margin-top: 1em; } .cast > p:nth-of-type(2) { margin-bottom: 4em; } .cast p.more { text-align: center; } ul.attention { margin-top: 1em; font-size: 90%; } ul.attention li { padding-left: 1em; line-height: 1.2em; margin-bottom: .3em; margin-top: 0; } ul.attention li::before { content: '※'; display: inline-block; width: 1em; margin-left: -1em; } @media screen and (min-width:1201px){ .pconly { display: inherit; } .sponly { display: none; } .ct { width: 1080px; margin: 0 auto; } header { background-position: center center; } header #menubox .ct { width: 1200px; } table { margin: 1em auto 2em; } td { text-align: left; } th { text-align: left; } header #information .ct #bnr { width: calc(80% / 6 * 3); float: left; margin: 0; } .cast::after { clear: both; display: block; width: 100%; content: ''; } .cast img { float: left; max-width: 40%; margin: 0 2em 0 0; } .cast p { text-align: left; } .cast p.name { font-weight: 400; font-size: 150%; padding-top: .5em; } .list ul{ display: flex; flex-wrap: wrap; } .list ul li { width: calc(100% / 2); padding: 0; margin: 0; } .list ul li p { font-weight: 400; font-size: 150%; margin-top: .5em; text-align: center; display: block; line-height: 1em; } .list ul li p span { font-size: calc((100% / 1.5) * .8); display: block; } } @media screen and (min-width:961px) and (max-width:1200px){ .cast::after { clear: both; display: block; width: 100%; content: ''; } .cast img { float: left; max-width: 40%; margin: 0 2em 0 0; } .cast p { text-align: left; } .cast p.name { font-weight: 400; font-size: 150%; padding-top: .5em; } .cast > p span { display: inline-block; } .list ul{ display: flex; flex-wrap: wrap; } .list ul li { width: calc(100% / 2); padding: 0; margin: 0; } .list ul li p { font-weight: 400; font-size: 150%; margin-top: .5em; text-align: center; display: block; line-height: 1em; } .list ul li p span { font-size: calc((100% / 1.5) * .8); display: block; } } @media screen and (min-width:641px) and (max-width:1200px){ .pconly { display: inherit; } .sponly { display: none; } .ct { width: 90%; margin: 0 auto; } table { margin: 1em auto 2em; } td { text-align: left; } th { text-align: left; } header #information .ct #bnr { width: calc(80% / 6 * 3); float: left; margin: 0; } header #menubox .ct { width: 100%; } header nav { height: 6em; } header #menu { float: left; width: 100%; } header #menu > li { float: left; width: calc(100% / 5); border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); } header #menu > li:first-child { border-left: none; } header #menu > li:nth-child(6), header #menu > li:nth-child(7), header #menu > li:nth-child(8), header #menu > li:nth-child(9), header #menu > li:nth-child(10){ border-bottom: none; } header #menu > li:nth-child(5), header #menu > li:nth-child(10){ border-right: none; } header #menu > li > a { display: block; width: 100%; height: 3em; line-height: 3em; text-align: center; color: rgba(255,255,255,.8); text-decoration: none; } header #social { text-align: right; display: flex; justify-content: flex-end; } header #social li { width: auto; text-align: center; } .cast > p span { display: inline-block; } #tw iframe { width: 1240px !important; } .list ul{ display: flex; flex-wrap: wrap; } .list ul li { width: calc(100% / 2); padding: 0; margin: 0; } .list ul li p { font-weight: 400; font-size: 150%; margin-top: .5em; text-align: center; display: block; line-height: 1em; } .list ul li p span { font-size: calc((100% / 1.5) * .8); display: block; } } @media screen and (max-width:640px){ .pconly { display: none; } .sponly { display: inherit; } .ct { width: 100%; } header { background-image: url(../img/mv.jpg); background-repeat: no-repeat; background-position: center top; background-size: auto 90%; } header h1 { float: none; text-align: center } header h1 img { height: 16em; margin-bottom: 16em; margin-right: 0; } header nav { min-height: calc(9em + 4px); } header #menu { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; float: none; } header #menu > li { float: none; width: calc(100% / 4); border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); } header #menu > li:nth-child(10){ width: calc(100% / 4 * 3); } header #menu > li:first-child { border-left: none; } header #menu > li:nth-child(9), header #menu > li:nth-child(10){ border-bottom: none; } header #menu > li:nth-child(4), header #menu > li:nth-child(8){ border-right: none; } header #menu > li > a { display: block; width: 100%; height: 3em; line-height: 3em; text-align: center; color: rgba(255,255,255,.8); text-decoration: none; } header #social { float: none; display: flex; width: 100%; text-align: center; margin: 0; justify-content: flex-end; } header #social li { width: 3em; } header #social li a { height: auto!important; line-height: 1em; } header #social li img { } header nav ul li a span { } h2 { font-size: 160%; } h2 .catch { font-size: 200%; } main section h1.catch { font-size: 160%; } main section p { text-align: left; margin-left: 2em; margin-right: 2em; } /*main section:last-child p { text-align: center; }*/ header #information { padding-bottom: 0; } header #information .ct > div { width: 90%; margin: 0 5% 1em; float: none; padding: 1em 1em; } main section dl { margin-left: 2em; margin-right: 2em; } main section dl dt { text-align: left; } main section dl dd { text-align: left; padding: 0; } main section dl dd.cast { text-align: left; padding-left: 0em; } .cast p { margin-left: 0; margin-right: 0; } header #information .ct #bnr { width: 90%; margin: 0 5% 1em; float: none; clear: both; } #tw iframe { width: 740px !important; } .list { padding: 0!important; } .list ul{ } .list ul li { width: 100%; padding: 0; margin: 0; text-align: left; clear: both; } .list ul::after { display: block; clear: both; width: 100%; content: ''; } .list ul li img { float: left; width: 30%; margin: 0 1em 1em 0; } .list ul li p { text-align: left; padding-top: 3em; font-weight: 400; font-size: 150%; display: block; line-height: 1em; margin: 0; } .list ul li p span { font-size: calc((100% / 1.5) * .8); display: block; } } @media screen and (max-width:480px){ main section p { margin-left: 1em; margin-right: 1em; } main section dl { margin-left: 1em; margin-right: 1em; } main section p.cafe { margin: 2em 0 0; line-height: 0; } main section ul li img { max-width: 60%; } main section .flexslider ul li img { width: 100%; max-width: 640px; } #tw iframe { width: 740px !important; } .cast p.more { text-align: left; } ul.attention li { text-align: left; } } @media (max-width:900px) and (min-width:481px) { main section p.catch { font-size: calc(100vw / 40); font-weight: bold; } main section p.catch span.red, main section h1.catch { font-size: calc(100vw / 30); } } @media (max-width:480px) { main section p.catch { font-size: calc(100vw / 30); font-weight: bold; } main section p.catch span.red, main section h1.catch { font-size: calc(100vw / 26); font-weight: bold; } }