@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
/*
100=Thin (Hairline)
300=Light
400=Normal
500=Medium
700=Bold
800=Extra Bold (Ultra Bold)
900=Black (Heavy)
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*フォントウェイト　100,300,350,400,500,700,900*/
body { /*font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/ /*メインで使用するフォントが明朝体のとき
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
*/ /*メインで使用するフォントが丸ゴシックのとき
font-family: "Rounded Mplus 1c",'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';*/ font-family: 'Noto Sans Japanese', sans-serif; color: #231815; font-size: 15px; line-height: 1.75; overflow-x: hidden; }
@media screen and (max-width: 767px) { body { font-size: 13px; width: 100vw; overflow-x: hidden !important; } }

/*/////////////////////////////
ティザーサイト
/////////////////////////////*/
#teaser { background-image: url(../img/cmn/bg_green.jpg); position: relative; }
#teaser img { vertical-align: top; width: 100%; }
#teaser .main { width: 100%; padding: 0 25px; padding-bottom: 0; padding-bottom: 50px; }
@media screen and (max-width: 767px) { #teaser .main { padding: 0 0; } }
#teaser .comming { background-color: #006979; text-align: center; padding: 2%; font-weight: bolder; font-size: 25px; color: #ffffff; }
#teaser .comming a { color: #ffffff; font-size: 18px; text-decoration: underline; }
#teaser .sns { position: absolute; width: 45%; right: 25px; text-align: center; top: 65%; font-weight: 600; }
@media screen and (max-width: 767px) { #teaser .sns { width: 100%; top: 100%; position: static; margin-top: 20px; padding: 4%; } }
#teaser .sns p { font-size: 13px; font-weight: 400; }
@media screen and (max-width: 767px) { #teaser .sns p { font-size: 11px; } }
#teaser .sns .icons { display: flex; width: 250px; margin: auto; justify-content: space-between; margin-top: 10px; margin-bottom: 25px; }
@media screen and (max-width: 767px) { #teaser .sns .icons { margin-bottom: 25px; } }
#teaser .sns .icons li img { width: 60px; }

/*/////////////////////////////
共通装飾クラス
/////////////////////////////*/
.h_001 { text-align: center; margin-bottom: 50px; }
@media screen and (max-width: 767px) { .h_001 { margin-bottom: 5%; } }
.h_001 img { height: 165px; }
@media screen and (max-width: 767px) { .h_001 img { height: 20vh; } }

.btn_open { margin-top: 50px; width: 230px; display: inline-block; background-color: #C30061; color: #ffffff; padding: 10px; font-size: 13px; background-image: url(../img/cmn/icon_cursor.png); background-repeat: no-repeat; background-position: center right 10px; background-size: 6px; }

.btn_open:hover { text-decoration: none; cursor: pointer; }

/*/////////////////////////////
共通レイアウト＋トップページ
/////////////////////////////*/
#sp_menu { position: fixed; right: 10px; top: 10px; z-index: 99999; }
@media screen and (max-width: 767px) { #sp_menu { right: 0; top: 0; width: 20%; } }

#sp_menu:hover { cursor: pointer; }

nav { background-color: #006979; position: fixed; right: 0; width: 350px; height: 100%; z-index: 9999; display: none; }
@media screen and (max-width: 767px) { nav { width: 95%; } }
nav ul.gnav { margin-bottom: 25px; }
nav ul.gnav li a { color: #ffffff; font-size: 20px; font-weight: 600; display: block; padding: 7.5px; padding-left: 20px; }
@media screen and (max-width: 767px) { nav ul.gnav li a { font-size: 18px; padding: 2%; padding-left: 4%; line-height: 1.25; } }
nav ul.gnav li a span { font-weight: 500; display: block; font-size: 12px; color: #231815; }
@media screen and (max-width: 767px) { nav ul.gnav li a span { font-size: 10px; } }
nav ul.gnav li a:hover { text-decoration: none; background-color: #023740; }
nav .sns { color: #ffffff; font-weight: 600; text-align: center; }
nav .sns .icons { width: 80%; margin: auto; display: flex; justify-content: space-between; }
nav .sns .icons li img { height: 50px; }
@media screen and (max-width: 767px) { nav .sns .icons li img { height: 13vw; } }

#main_vis { background-image: url(../img/cmn/bg_green.jpg); display: flex; padding-bottom: 50px; }
@media screen and (max-width: 767px) { #main_vis { flex-wrap: wrap; } }
#main_vis .vis { width: 52%; }
@media screen and (max-width: 767px) { #main_vis .vis { width: 100%; } }
#main_vis .vis img { width: 100%; }
#main_vis .title { width: 47%; margin-left: 1%; }
@media screen and (max-width: 767px) { #main_vis .title { width: 94%; margin: auto; } }
#main_vis .title h1 img { width: 95%; margin-top: 15%; }
@media screen and (max-width: 767px) { #main_vis .title h1 img { width: 100%; margin-top: 5%; } }
#main_vis .title .works img { width: 95%; margin-top: 4%; margin-bottom: 4%; }
@media screen and (max-width: 767px) { #main_vis .title .works img { width: 100%; } }
#main_vis .title .theater img { width: 95%; margin-bottom: 5%; }
@media screen and (max-width: 767px) { #main_vis .title .theater img { width: 100%; } }
#main_vis .title .credit { text-align: center; width: 95%; margin-bottom: 4%; }
@media screen and (max-width: 767px) { #main_vis .title .credit { width: 100%; } }
#main_vis .title .credit .bansou { font-size: 23px; font-weight: 600; margin-bottom: 2%; }
@media screen and (max-width: 767px) { #main_vis .title .credit .bansou { font-size: 16px; } }
#main_vis .title .credit .ant { font-size: 12px; }
@media screen and (max-width: 767px) { #main_vis .title .credit .ant { font-size: 10px; } }
#main_vis .inner { width: 95%; }
#main_vis .sns { text-align: center; width: 55%; margin: auto; border-top: solid 1px #231815; border-bottom: solid 1px #231815; padding: 1.5% 0; margin-bottom: 5%; }
@media screen and (max-width: 767px) { #main_vis .sns { width: 100%; } }
#main_vis .sns p { font-size: 15px; font-weight: 600; margin-bottom: 2%; }
@media screen and (max-width: 767px) { #main_vis .sns p { font-size: 13px; } }
#main_vis .sns ul { display: flex; justify-content: space-between; width: 60%; margin: auto; }
#main_vis .sns ul li { width: 28%; }
#main_vis .sns ul li img { width: 100%; }
#main_vis .credit2 { text-align: center; font-size: 12px; }
@media screen and (max-width: 767px) { #main_vis .credit2 { font-size: 10px; } }

#sec_01 .inner, #sec_02 .inner, #sec_03 .inner, #sec_04 .inner, #sec_05 .inner, #sec_06 .inner { width: 1000px; margin: auto; }
@media screen and (max-width: 767px) { #sec_01 .inner, #sec_02 .inner, #sec_03 .inner, #sec_04 .inner, #sec_05 .inner, #sec_06 .inner { width: 94%; } }

#sec_01 { background-image: url(../img/cmn/bg_beijue.jpg); padding: 50px 0; }
#sec_01 h3 { color: #B90808; font-weight: 800; font-size: 35px; margin-bottom: 25px; line-height: 1.25; }
@media screen and (max-width: 767px) { #sec_01 h3 { font-size: 20px; } }
#sec_01 h3 ruby rt { font-size: 13px; }
@media screen and (max-width: 767px) { #sec_01 h3 ruby rt { font-size: 9px; } }
#sec_01 .intro_01 { position: relative; background-image: url(../img/pic_01.jpg); background-size: 70%; background-repeat: no-repeat; background-position: right bottom; padding-bottom: 50px; margin-bottom: 50px; }
@media screen and (max-width: 767px) { #sec_01 .intro_01 { background-size: 90%; padding-bottom: 30vh; } }
#sec_01 .intro_01 .pic { position: absolute; width: 70%; right: 0; bottom: 0; z-index: 1; }
#sec_01 .intro_01 .inner { width: 1000px; margin: auto; z-index: 999; }
@media screen and (max-width: 767px) { #sec_01 .intro_01 .inner { width: 100%; } }
#sec_01 .intro_01 .inner .box { background-color: rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); width: 680px; padding: 30px; }
@media screen and (max-width: 767px) { #sec_01 .intro_01 .inner .box { width: 96%; padding: 4%; } }
#sec_01 .intro_02 { position: relative; background-image: url(../img/pic_02.jpg); background-size: 70%; background-repeat: no-repeat; background-position: left top 50px; padding-bottom: 150px; margin-bottom: 50px; }
@media screen and (max-width: 767px) { #sec_01 .intro_02 { background-size: 90%; background-position: left bottom; padding-bottom: 35vh; } }
#sec_01 .intro_02 .pic { position: absolute; width: 70%; right: 0; bottom: 0; z-index: 1; }
#sec_01 .intro_02 .inner { width: 1000px; margin: auto; z-index: 999; }
@media screen and (max-width: 767px) { #sec_01 .intro_02 .inner { width: 100%; } }
#sec_01 .intro_02 .inner .box { background-color: rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); width: 680px; padding: 30px; margin-left: 320px; }
@media screen and (max-width: 767px) { #sec_01 .intro_02 .inner .box { width: 96%; margin-left: 4%; } }

#sec_02 { background-image: url(../img/cmn/bg_green.jpg); padding: 50px 0; }
#sec_02 .prof { display: flex; background-color: #006979; }
@media screen and (max-width: 767px) { #sec_02 .prof { flex-wrap: wrap; } }
#sec_02 .prof .txt { width: 65%; color: #ffffff; padding: 35px; }
@media screen and (max-width: 767px) { #sec_02 .prof .txt { width: 100%; padding: 4%; } }
#sec_02 .prof .txt h3 { font-weight: 600; line-height: 1.25; font-size: 28px; margin-bottom: 25px; }
@media screen and (max-width: 767px) { #sec_02 .prof .txt h3 { font-size: 20px; } }
#sec_02 .prof .txt h3 span { font-size: 20px; }
@media screen and (max-width: 767px) { #sec_02 .prof .txt h3 span { font-size: 16px; } }
#sec_02 .prof .pic { width: 35%; }
@media screen and (max-width: 767px) { #sec_02 .prof .pic { width: 60%; margin: auto; margin-bottom: 4%; } }
#sec_02 .prof .pic img { width: 100%; vertical-align: bottom; }
#sec_02 .about { padding: 25px; margin: 50px 0; }
#sec_02 .about p { margin-bottom: 1em; }
#sec_02 .about h3 { text-align: center; font-size: 32px; font-weight: 700; color: #B90808; margin-bottom: 35px; }
@media screen and (max-width: 767px) { #sec_02 .about h3 { font-size: 23px; } }
#sec_02 .about h3 span { display: block; font-size: 15px; color: #231815; }
@media screen and (max-width: 767px) { #sec_02 .about h3 span { font-size: 13px; } }
#sec_02 .about .pic_01 { text-align: center; padding: 35px; }
#sec_02 .about .pic_01 img { width: 50%; }
@media screen and (max-width: 767px) { #sec_02 .about .pic_01 img { width: 100%; } }
#sec_02 .about .pic_02 { text-align: center; padding: 35px; }
#sec_02 .about .pic_02 img { width: 70%; }
@media screen and (max-width: 767px) { #sec_02 .about .pic_02 img { width: 100%; } }
#sec_02 .about .ant { margin-top: 35px; font-size: 12px; }
@media screen and (max-width: 767px) { #sec_02 .about .ant { font-size: 10px; } }
#sec_02 .about .more { display: none; }

#sec_03 { background-image: url(../img/cmn/bg_beijue.jpg); padding: 50px 0; }
#sec_03 .lineup { display: flex; flex-wrap: wrap; justify-content: space-between; }
#sec_03 .lineup li { width: 475px; margin-bottom: 75px; }
#sec_03 .lineup li img { width: 100%; margin-bottom: 15px; }
#sec_03 .lineup li h3 { color: #C30061; font-weight: 700; font-size: 28px; }
@media screen and (max-width: 767px) { #sec_03 .lineup li h3 { font-size: 23px; } }
#sec_03 .lineup li p { font-weight: 600; }
#sec_03 .music { background-color: #BC8B77; color: #ffffff; padding: 10px 20px; }
#sec_03 .music h3 { font-size: 23px; font-weight: 600; }
@media screen and (max-width: 767px) { #sec_03 .music h3 { font-size: 20px; } }
#sec_03 .music .ant { font-size: 13px; margin-top: 10px; }
@media screen and (max-width: 767px) { #sec_03 .music .ant { font-size: 10px; } }

#sec_04 { background-image: url(../img/cmn/bg_green.jpg); padding: 50px 0; }
#sec_04 .coming { text-align: center; font-size: 28px; font-weight: 600; padding-bottom: 100px; }
#sec_04 #video { width: 800px; margin: auto; }
@media screen and (max-width: 767px) { #sec_04 #video { width: 90%; } }
#sec_04 #video .youtube { position: relative; width: 100%; padding-top: 56.25%; }
#sec_04 #video .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

#sec_05 { background-image: url(../img/cmn/bg_beijue.jpg); padding: 50px 0; position: relative; }
@media screen and (max-width: 767px) { #sec_05 { padding-bottom: 50%; } }
#sec_05 h3 { font-size: 23px; color: #C30061; font-weight: 600; }
@media screen and (max-width: 767px) { #sec_05 h3 { font-size: 20px; } }
#sec_05 h3 span { font-size: 18px; color: #231815; }
@media screen and (max-width: 767px) { #sec_05 h3 span { font-size: 15px; } }
#sec_05 .bold { font-weight: 500; }
#sec_05 .box { margin-bottom: 50px; }
#sec_05 table tr { border-bottom: dotted 1px #666666; }
#sec_05 table td { padding: 20px 10px; }
@media screen and (max-width: 767px) { #sec_05 table td { display: inline-block; width: 100%; padding: 4%; } }
#sec_05 table .td_01 { width: 10%; font-weight: 600; font-size: 18px; }
@media screen and (max-width: 767px) { #sec_05 table .td_01 { font-size: 15px; width: 100%; padding: 1%; } }
#sec_05 table .td_02 { width: 40%; }
@media screen and (max-width: 767px) { #sec_05 table .td_02 { width: 100%; } }
#sec_05 table .td_03 { width: 50%; }
@media screen and (max-width: 767px) { #sec_05 table .td_03 { width: 100%; } }
#sec_05 table .td_03 a { text-decoration: underline; }
#sec_05 .font_pink { font-size: 18px; font-weight: 600; color: #C30061; }
@media screen and (max-width: 767px) { #sec_05 .font_pink { font-size: 15px; } }
#sec_05 .star { font-size: 13px; color: #C30061; }
#sec_05 .ant { font-size: 13px; }
#sec_05 .font_bold { font-size: 18px; font-weight: 600; }
@media screen and (max-width: 767px) { #sec_05 .font_bold { font-size: 15px; } }
#sec_05 strong { font-weight: 600; }
#sec_05 .chara { width: 275px; position: absolute; right: 25px; bottom: 50px; }
@media screen and (max-width: 767px) { #sec_05 .chara { width: 40%; } }

#sec_06 { background-image: url(../img/cmn/bg_green.jpg); padding: 50px 0; }
#sec_06 table { font-weight: 600; width: 100%; }
#sec_06 table tr { border-bottom: dotted 2px #333333; }
#sec_06 table td { padding: 20px 0; }
#sec_06 table a { text-decoration: underline; }

footer { background-color: #006979; color: #ffffff; text-align: center; padding: 25px 0; }
footer .icons { display: flex; width: 230px; margin: auto; justify-content: space-between; margin-bottom: 25px; margin-top: 5px; }
footer .icons li img { height: 50px; }
footer .copy { font-size: 13px; }
@media screen and (max-width: 767px) { footer .copy { font-size: 10px; } }

@media screen and (max-width: 767px) { .ptop { right: 4%; width: 12%; bottom: 0; } }

@media screen and (max-width: 767px) { .ptop img { width: 100%; vertical-align: bottom; } }

/*# sourceMappingURL=cb.css.map */