@charset "utf-8";


/********************** 共通 *******************************/
main{ padding-top:170px; display:block;}
main.in{ padding-top:200px; display:block;}
main img{ width:100%;}

.container{ max-width:1000px; width: 94%; margin: 0 auto;}

h2{ text-align: left; color: #fff; font-size: 30px; font-weight: 200; line-height: 1.5em; margin-bottom: 14px;}
h2 span{ font-size: 14px; padding-left: 18px; position:relative;}
h2 span:after{ content:""; position:absolute; right: -48px; bottom: 3px; width: 40px; height: 2px; background-color: #fff;}

/* カテゴリー背景色 */
.box.c_01 .c_name{ background-color: #a65656;}/* コンサート */
.box.c_02 .c_name{ background-color: #cc8426;}/* 演劇・ミュージカル・伝統芸能・お笑い */
.box.c_03 .c_name{ background-color: #769d57;}/* クラシック・ダンス・バレエ */
.box.c_04 .c_name{ background-color: #4e89ac;}/* スポーツ */
.box.c_05 .c_name{ background-color: #3d5b6d;}/* イベント */

/* 文字色 */
.box.c_01 h3{ color: #a65656;}/* コンサート */
.box.c_02 h3{ color: #cc8426;}/* 演劇・ミュージカル・伝統芸能・お笑い */
.box.c_03 h3{ color: #769d57;}/* クラシック・ダンス・バレエ */
.box.c_04 h3{ color: #4e89ac;}/* スポーツ */
.box.c_05 h3{ color: #3d5b6d;}/* イベント */

@media screen and (max-width: 910px) {
main{ padding-top:60px;}
main.in{ padding-top:80px;}
}
@media screen and (max-width: 768px) {
h2{ font-size:22px; margin-bottom: 6px;}
h2 span{ font-size:12px; padding-left:12px;}
h2 span:after{ right: -44px; width: 35px; height: 1px;}
}


/********************** TOP *******************************/
.note{ max-width:1000px; width:94%; margin:0 auto 20px; padding: 12px 0; background-color:#f4f4f4;}

.slide_contents{ width: 100%; margin-bottom: 40px; overflow: hidden; padding: 10px 0;}
.slide_contents ul{}
.slide_contents li{ width:50%; line-height: 0; position:relative;}
.slide_contents li img{ max-width:800px;}
.slide_contents li p{ position:absolute; bottom:0; width:100%; background-color:rgba(255,255,255,0.8); font-size: 14px; line-height: 1.5em; margin-bottom: 0; text-align: left; padding: 12px;}

.top_news{ width:100%; margin-bottom: 20px; border:1px solid #f4f4f4;}
.top_news .n_tit{ width:10%; padding: 12px 0 8px 11px; color:#dc0d23; vertical-align: middle;}
.top_news .n_tit span{ background-color: #dc0d23; color: #fff; width: 20px; height: 20px; display: inline-block; border-radius: 50px; font-size: 12px; margin-right: 4px;}
.top_news .n_content{ width:100%; padding:0 12px 12px 14px;}
.top_news .n_content dl{ display:table; width:100%;}
.top_news .n_content dt{ display:table-cell; width:10%; color:#7453b3; text-align:left;}
.top_news .n_content dd{ display:table-cell; width:90%; text-align:left;}
.top_news .n_content dd a{ color: #7453b3; font-weight: bold; text-decoration: underline;}

.rec{ background-color:#8f6fb3; padding: 30px 0;}

.box{ float:left; width:24%; margin-right:1.33%; margin-bottom: 1.33%; background-color:#fff; padding: 10px; border-radius: 5px; border: 1px solid #dadada; transition:0.2s;}
.box:nth-child(4n){ margin-right:0;}
.box figure{ margin-bottom: 8px;}
.box figure img{}
.box .cat{ margin-bottom: 8px;}
.box .cat .c_name,
.box .cat .reader{ color:#fff; display: inline-block; padding: 1px 12px; line-height: 1.5em; margin-bottom:0;}
.box .cat .c_name{ float:left;}
.box .cat .reader{ float:right; border-radius: 4px; background-color: #8f6fb3;}
.box h3{ text-align: left; font-size: 14px; font-weight: bold; line-height: 1.5em; margin-bottom: 2px;}
.box .txt{ text-align: left; font-size: 14px; font-weight: 200; line-height: 1.4em;}
.box:hover{ opacity:1; transform:translateX(-2px) translateY(-2px); box-shadow:2px 2px 2px 0px rgba(0,0,0,0.2);}

.pickup{ padding: 30px 0;}
.pickup h2{ color:#000;}
.pickup h2 span:after{ background-color:#000;}

.bottom_news{ margin-bottom: 60px;}
.bottom_news h2{ color:#000;}
.bottom_news h2 span:after{ background-color:#000;}
.bottom_news .news_box{ float: left; width: 60%;  border-right: 1px solid #acafb1; padding-right: 20px;}
.bottom_news .news_box ul{}
.bottom_news .news_box li{ display: block; border-left: 7px solid #000; border-bottom: 1px solid #acafb1; margin-bottom: 16px; padding: 4px 12px 12px;}
.bottom_news .news_box dl{ text-align:left;}
.bottom_news .news_box dt{ color:#7453b3;}
.bottom_news .news_box dd{}
.bottom_news .news_box dd a{ color: #7453b3; font-weight: bold; text-decoration: underline;}
.bottom_news .news_box .n_link{ display: inline-block; width: 56%; border: 1px solid #000; border-radius: 5px; padding: 8px 0; position:relative;}
.bottom_news .news_box .n_link:after{ content:"\025b6"; position:absolute; font-size:12px; right:12px;}
.bottom_news .bnr_box{ float: right; width: 40%; padding-left: 20px;}
.bottom_news .bnr_box a{}
.bottom_news .bnr_box a img{ margin-bottom: 12px;}



@media screen and (max-width: 768px) {
.note{ text-align: left; padding: 8px 10px; font-size: 12px; line-height: 1.5em; width: 100%; margin-bottom: 6px;}

.slide_contents{ margin-bottom:8px;}

.top_news .n_tit{ display:block; width:100%; padding: 12px 8px 0; text-align:left;}
.top_news .n_content{ display:block; width:100%; padding: 8px;}
.top_news .n_content dt{ display:block; width:100%; text-align: left; margin-bottom: 2px;}
.top_news .n_content dd{ display:block; width:100%;}
.top_news .n_tit span{ padding-left:8px;}

.rec{ padding:20px 0;}

.box{ width:49%; margin-right:2%; margin-bottom:2%; padding: 7px 7px 0;}
.box:nth-child(2n){ margin-right:0;}
.box figure{ height:27vw;}
.box .cat .c_name, 
.box .cat .reader{ padding: 1px 4px; font-size: 3vw;}
.box h3{ font-size: 13px; line-height:1.4em; margin-bottom: 4px;}
.box .txt{ font-size:12px; line-height:1.4em;}
.box:hover{ opacity:1; transform:translateX(0) translateY(0); box-shadow:none;}

.pickup{ padding:20px 0;}

.bottom_news{ margin-bottom:12px;}
.bottom_news .news_box{ float: none; width: 100%; border-right: none; padding-right: 0; margin-bottom: 20px;}
.bottom_news .news_box li{ margin-bottom: 12px;}
.bottom_news .news_box dd{ font-size:13px; line-height:1.5em;}
.bottom_news .news_box .n_link{ width: 100%; padding: 6px 0;}
.bottom_news .bnr_box{ float:none; width:100%; padding-left:0;}
.bottom_news .bnr_box a img{ margin-bottom:2px;}
}


/********************** お知らせ *******************************/
.in .bottom_news .news_box{ float: none; width: 100%;  border-right:none; padding-right: 0;}
.in .bottom_news .news_box li{ margin-bottom:38px;}

@media only screen and (max-width: 768px){
.in .bottom_news .news_box li{ margin-bottom:12px;}
}


/********************** 特定商取引 *******************************/
.specific{ margin-bottom: 80px;}
.specific h2{ color:#000; margin-bottom: 34px;}
.specific .des_txt{text-align:left;}
.specific .specific_box{}
.specific .specific_box ul{}
.specific .specific_box li{ margin-bottom: 40px;}
.specific .specific_box li dl{}
.specific .specific_box li dt{ background-color: #f1edf5; padding: 6px 0 6px 18px; text-align: left; font-size: 20px; line-height: 1.5em;}
.specific .specific_box li dd{ padding: 20px 18px 0; text-align: left; font-weight: 300;}
.specific .specific_box li dd a{ color: #7453b3; font-weight:bold; text-decoration:underline;}

@media only screen and (max-width: 768px){
.specific{ margin-bottom:40px;}
.specific h2{ margin-bottom: 14px; line-height: 1.3em;}
.specific .des_txt{ font-size:12px; line-height: 1.5em; text-align: left;}
.specific .specific_box li{ margin-bottom:30px;}
.specific .specific_box li dt{ font-size: 15px; padding: 6px 0 6px 12px;}
.specific .specific_box li dd{ padding: 18px 12px 0;}
}


/********************** ご利用ガイド *******************************/
.guide{ margin-bottom: 80px;}
.guide .container{ max-width:1000px}
.guide h2{ color:#000; margin-bottom: 34px;}
.guide .guide_box{}
.guide .guide_box .guide_inbox{ margin-bottom: 40px; text-align:left;}
.guide .guide_box .guide_inbox h3{ background-color: #f1edf5; padding: 6px 0 6px 18px; text-align: left; font-size: 20px; line-height: 1.5em; margin-bottom: 18px;}
.guide .guide_box .guide_inbox h4{ border-bottom:1px solid #f1edf5; border-left:40px solid #f1edf5; padding: 6px 0 6px 18px; font-size: 20px; line-height: 1.5em; margin-bottom: 18px; position:relative;}
.guide .guide_box .guide_inbox h4:before{ content:""; position:absolute; left:-35px; background-repeat:no-repeat; background-size:30px; width: 30px; height: 30px;}
.guide .guide_box .guide_inbox h4.no_1:before{ background-image:url(../images/no1.jpg);}
.guide .guide_box .guide_inbox h4.no_2:before{ background-image:url(../images/no2.jpg);}
.guide .guide_box .guide_inbox h4.no_3:before{ background-image:url(../images/no3.jpg);}
.guide .guide_box .guide_inbox h4.no_4:before{ background-image:url(../images/no4.jpg);}
.guide .guide_box .guide_inbox h5{ border-bottom: 1px solid #f1edf5; border-left: 10px solid #f1edf5; padding: 6px 0 6px 18px; font-size: 16px; line-height: 1.5em; margin-bottom: 18px; width: 50%;}
.guide .guide_box .guide_inbox p{ font-weight: 300; line-height: 1.5em; font-size: 14px;}
.guide .guide_box .guide_inbox .flow_img{ position:relative; text-align:center;}
.guide .guide_box .guide_inbox .flow_img img.bg{ width:100%; max-width:1000px;}
.guide .guide_box .guide_inbox .flow_img a.flow_01{ width:13.6%; max-width:136px; position: absolute; top: 34.1%; left: 5.9%;}
.guide .guide_box .guide_inbox .flow_img a.flow_02{ width:14.6%; max-width:146px; position: absolute; top: 13.7%; left: 25.3%;}
.guide .guide_box .guide_inbox .flow_img a.flow_03{ width:14.6%; max-width:146px; position: absolute; top: 53.4%; left: 25.3%;}
.guide .guide_box .guide_inbox .flow_img a.flow_04{ width:14.6%; max-width:146px; position: absolute; top: 34.1%; left: 43.9%;}
.guide .guide_box .guide_inbox .flow_img a.flow_05{ width:11.3%; max-width:113px; position: absolute; top: 34.1%; left: 64.5%;}
.guide .guide_box .guide_inbox .flow_img a.flow_06{ width:11.3%; max-width:113px; position: absolute; top: 34.1%; left: 82.2%;}
.guide .guide_box .guide_inbox a{ color: #7453b3; font-weight:bold; text-decoration:underline;}
.guide .guide_box .guide_inbox a.btn_01{ text-align:left; display:block; margin-bottom: 20px; position:relative; padding-left: 18px;}
.guide .guide_box .guide_inbox a.btn_01:before{ content: "\025b6"; position: absolute; font-size: 12px; left:0;}
.guide .guide_box .guide_inbox a.btn_02{ display:block; text-align:center; background-color:#e85098; color:#fff; padding: 18px 0; font-size: 20px; font-weight: 400; text-decoration: none; border-radius: 8px; width: 60%; margin: 30px auto 0;}

.guide .guide_box .guide_inbox .note_box{ background-color: #f1edf5; padding: 20px; width: 100%; margin-bottom: 20px;}
.guide .guide_box .guide_inbox .note_box p.tit{ font-size: 24px; border-bottom: 1px solid #ccc; padding-bottom: 12px; display: inline-block; width: 100%; font-weight: 500; text-align:center;}
.guide .guide_box .guide_inbox .note_box p{ font-weight: 200;}
.guide .guide_box .guide_inbox .note_box p span{ font-weight: 400;}

.pay{}
.pay li{ float:left; width:32%; margin-right:2%; margin-bottom: 2%;}
.pay li:nth-child(3n){ margin-right:0;}
.pay li h5{ width:100% !important; font-weight: bold;}
.pay li p{}
.pay li img{}
.pay li.famiry{}
.pay li.famiry .float .in_box:first-child{ float:left; width:32%; margin-right:2%;}
.pay li.famiry .float .in_box:first-child img{ max-width:95px; width:100%;}
.pay li.famiry .float .in_box:last-child{ float:right; width:66%;}
.pay li.seven .in_box{}
.pay li.seven .in_box img:first-child{ max-width:91px; width:100%;}
.pay li.seven .in_box img:last-child{ max-width:178px; width:100%;}

.receipt .in_box{ margin-bottom: 20px;}
.receipt h5{ background-color: #f1edf5; width: 80% !important; margin: 0 auto; text-align: center; font-size: 18px !important; position:relative; border-left: none !important;}
.receipt h5:after{ content:"\025bc"; position:absolute; font-size:20px; color:#f1edf5; left:calc(50% - 10px); bottom:-20px;}
.receipt h6{ border-bottom: 1px solid #f1edf5; border-left: 10px solid #f1edf5; padding: 6px 0 6px 18px; font-size: 16px; line-height: 1.5em; margin-bottom: 18px; width: 100%; font-weight:bold;}
.receipt p.span{ background-color: #f1f1f1; text-align: center; padding: 7px; width: 80%; margin: 0 auto 26px;}
.receipt .pay{ width: 70%; margin: 0 auto;}
.receipt .pay li{ width:49%;}
.receipt .pay li:nth-child(2){ margin-right:0;}
.receipt .note_box2{ text-align:center;}
.receipt p.note{color: #dd0000; background-color: transparent; text-align: center; font-size: 20px !important; font-weight: 500 !important; position: relative; display: inline-block; width: inherit; padding: 0 1em;}
.receipt p.note:before,
.receipt p.note:after{ background: url(../images/exclamation.png) center center no-repeat; background-size: contain; content: ""; position: absolute; top: calc(50% - 30px); width: 66px; height: 59px;}
.receipt p.note:before{ left:-3em;}
.receipt p.note:after{ right: -3em;}
.receipt .float2{ width:60%; margin:0 auto 34px; text-align:center;}
.receipt .float2 img{ display:inline-block; max-width:134px;}
.receipt p.note2{ width:60%; margin: 0 auto;}

.scr_mgn{ padding-top:114px; margin-top:-114px;}

@media only screen and (max-width: 768px){
.guide{ margin-bottom: 30px;}
.guide .guide_box .guide_inbox .flow_img img.bg{ max-width:100%;}
.guide .guide_box .guide_inbox .flow_img a.flow_01{ width:100%; max-width:80%; top: 3.4%; left: 12.2%;}
.guide .guide_box .guide_inbox .flow_img a.flow_02{ width:100%; max-width:42%; top: 25.6%; left: 7.7%;}
.guide .guide_box .guide_inbox .flow_img a.flow_03{ width:100%; max-width:42%; top: 25.6%; left: 53.1%;}
.guide .guide_box .guide_inbox .flow_img a.flow_04{ width:100%; max-width:80%; top: 43%; left: 12.2%;}
.guide .guide_box .guide_inbox .flow_img a.flow_05{ width:100%; max-width:80%; top: 65.4%; left: 12.5%;}
.guide .guide_box .guide_inbox .flow_img a.flow_06{ width:100%; max-width:80%; top: 88%; left: 12.5%;}
}
@media only screen and (max-width: 639px){
.guide h2{ margin-bottom: 12px;}
.guide .guide_box .guide_inbox{ margin-bottom:30px;}
.guide .guide_box .guide_inbox h3{ font-size: 15px; padding: 6px 0 6px 12px;}
.guide .guide_box .guide_inbox h4{ padding: 6px 0 9px 10px; font-size: 16px;}
.guide .guide_box .guide_inbox h5{ font-size:15px; width:100%; margin-bottom: 8px;}
.guide .guide_box .guide_inbox h4:before{ background-size: 27px; width: 27px; height: 27px; left: -34px;}
.guide .guide_box .guide_inbox p{ font-size:13px;}
.guide .guide_box .guide_inbox .flow_img img.bg{ max-width:606px;}
.guide .guide_box .guide_inbox .flow_img a.flow_01{ width:79.5%; max-width:481px;}
.guide .guide_box .guide_inbox .flow_img a.flow_02{ width: 43%; max-width: 261px;}
.guide .guide_box .guide_inbox .flow_img a.flow_03{ width: 43%; max-width: 261px;}
.guide .guide_box .guide_inbox .flow_img a.flow_04{ width:79.5%; max-width:481px;}
.guide .guide_box .guide_inbox .flow_img a.flow_05{ width:79.5%; max-width:481px;}
.guide .guide_box .guide_inbox a.btn_01{ margin-bottom:16px;}
.guide .guide_box .guide_inbox a.btn_02{ font-size: 16px; padding: 12px 0; width: 100%; margin:0 auto;}

.guide .guide_box .guide_inbox .note_box{ padding:12px 12px 4px; margin: 0 auto 16px;}
.guide .guide_box .guide_inbox .note_box p.tit{ font-size: 16px; padding-bottom:6px;}

.pay li{ float:none; width:100%; margin-bottom:26px;}
.pay li h5{ background-color: #f1edf5; padding: 6px !important; font-size: 14px !important;}
.pay li.border{ padding: 12px; border: 1px solid #ccc; margin-bottom: 0;}

.receipt h5{ padding: 4px !important; font-size: 14px !important; width: 100% !important; margin:0 auto 16px !important;}
.receipt h5:after{ bottom:-17px;}
.receipt p.span{ width:100%;}
.receipt .pay{ width:100%;}
.receipt .pay li{ width:100%; margin-bottom:0;}
.receipt .pay li:nth-child(2){ margin-bottom:36px;}
.receipt p.note{ font-size: 14px !important; text-align: left;  padding: 0 0 0 3em;}
.receipt p.note:before, 
.receipt p.note:after{ width: 44px;}
.receipt p.note:after{ display:none;}
.receipt p.note:before{ left:-.8em;}
.receipt .float2{ width:100%; }
.receipt p.note2{ width:100%;}

.scr_mgn{ padding-top:55px; margin-top:-55px;}
}


/********************** 案内ページ *******************************/
.txt_wrap{ margin-bottom: 80px;}
.txt_wrap h2{ color:#000; margin-bottom: 34px;}
.txt_wrap .txt_box{ margin-bottom: 40px;}
.txt_wrap .txt_box h3{ background-color: #f1edf5; padding: 6px 0 6px 18px; text-align: left; font-size: 20px; line-height: 1.5em; margin-bottom: 18px;}
.txt_wrap .txt_box p{ font-weight: 300; line-height: 1.5em; font-size: 14px; text-align:left;}
.txt_wrap .txt_box a{ color: #7453b3; font-weight:bold; text-decoration:underline;}

@media only screen and (max-width: 768px){
.txt_wrap{ margin-bottom:20px;}
.txt_wrap h2{ margin-bottom:14px;}
.txt_wrap .txt_box{ margin-bottom:20px;}
.txt_wrap .txt_box h3{ font-size: 15px; padding: 6px 0 6px 12px;}
.txt_wrap .txt_box p{ font-size:13px;}
}



/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-track:before,
.slick-track:after {display: table; content: ''; }
.slick-track:after {clear: both; }
.slick-loading .slick-track {visibility: hidden; }
.slick-slide {display: none; float: left; outline: none; height: 100%; min-height: 1px; opacity: .9; margin: 0 1px; cursor:pointer;}
.slick-initialized .slick-slide {display: block; }
/** slick **/
.slick-next,
.slick-prev{  background-size: 100%; background-repeat: no-repeat; border: none; background-color: transparent; text-indent: -9999px; width: 31px; height: 68px;position: absolute; top: calc(50% - 30px); z-index:20; outline: 0;}
.slick-list{position:relative;}
.slick-list:before,
.slick-list:after{ content: ""; position: absolute; width: 42%; height: 2px; background-color: #000;left: 29%;}
.slick-list:before{ top: -7px;}
.slick-list:after{ bottom: -7px;}

.slick-dots{ position: inherit; bottom: -12px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button{ font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
.slick-dots li button::before{ font-family: slick; font-size: 30px; line-height: 20px; position: inherit; top: 0px; left: 0px; width: 20px; height: 20px; content: "•"; text-align: center; color: #fff; -webkit-font-smoothing: antialiased; -webkit-text-stroke: 1.1px black;}
.slick-dots li.slick-active button:before{ opacity: .75; color: #000;}

@media only screen and (max-width: 768px){
.slick-next,
.slick-prev{ background-size: contain; width:15px; height:34px;}
.slick-next{ right:-6px;}
.slick-prev{ left:-6px;}
.slick-next:hover{ right:-6px;}
.slick-prev:hover{ left:-6px;}
.slick-center{ transform: none;}

.slick-list:before,
.slick-list:after{ height: 1px; width:100%; left:0;}
.slick-list:before{ top: -4px; }
.slick-list:after{ bottom: -4px; }

.slick-dots li button::before{ font-size:24px;}
}