/*  Top
=============================================== */

/* top-carousel
-------------------------------- */

#top-carousel { position:relative; margin-bottom:45px; }
#top-carousel-list { /* for space */ font-size:0; }
#top-carousel-list li { display:inline-block; width:800px; vertical-align:middle; /* for space */ font-size:1rem; }
#top-carousel-list li .item { position:relative; display:block; width:100%; height:0; padding-top:56.25%; background-color:#ecedf0; }
#top-carousel-list li .item-inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position: center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #top-carousel-list li .item-inner:hover { opacity:0.7; } }

.slick-arrow { position:absolute; top:0; width:65px; height:100%; background-position:center center; background-repeat:no-repeat; background-size:50% auto; text-indent:-9999px; /* reset */ background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none; text-indent: -9999px; }
.slick-prev { left:0; z-index:12; background-image:url(../img/top/ar_l_w.png); }
.slick-next { right:0; z-index:13; background-image:url(../img/top/ar_r_w.png); }
.slick-arrow:hover { background-color:rgba(255,255,255,0.2); }

#top-carousel-list .slick-dots { position:absolute; bottom:-35px; width:100%; padding:10px 5px; box-sizing:border-box; /* for space */ font-size:0; }
#top-carousel-list .slick-dots li { display:inline-block; margin:0 6px; width:10px; height:10px; /* for space */ font-size:1rem; }
#top-carousel-list .slick-dots li button { width:10px; height:10px; border-radius:50%; margin:0; padding:0; border:0; background-color:#fff; text-indent:-9999px; cursor:pointer; }
#top-carousel-list .slick-dots li.slick-active button { background-color:#0055ff; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-carousel ul li { width:100vw; }
.slick-arrow { width:7vw; }

}


/* top-search / top-today
-------------------------------- */

#top-box1 { width:980px; margin:0 auto 15px auto; }

#top-box1 { /* for space */ font-size:0; }
#top-search,
#top-today { /* for space */ font-size:1rem; }

#top-search { display:inline-block; margin:0 15px 0 0; vertical-align:top; }

#top-search .textarea,
#top-search .button { font-size:1.2rem; vertical-align:top; -webkit-appearance:none; }
#top-search .textarea { /* reset - */ -moz-appearance:none; -webkit-appearance:none; appearance:none; background-color:transparent; background-image:none; color:inherit; font-family:inherit; /* - reset */ width:422px; margin:0; padding:0 1.0em; height:3.0em; box-sizing:border-box; border-radius:1.0em 0 0 1.0em; border-top:#bec8dc 1px solid; border-left:#bec8dc 1px solid; border-bottom:#bec8dc 1px solid; border-right:0; background-color:#fff; }
#top-search .textarea:focus { border:1px solid rgba(0, 0, 0, 0.32); box-shadow:none; outline:none; }
#top-search .button { width:60px; margin:0; padding:0; height:3.0em; box-sizing:border-box; border-radius:0 1.0em 1.0em 0; background:url(../img/common/icon_search.png) 40% center no-repeat; background-size:1.5em; background-color:#0055ff; border:0; text-indent:-9999px; cursor:pointer; }

#top-today { display:inline-block; vertical-align:top; }

#btn-today { width:482px; margin:auto; font-size:120%; }
#btn-today a { position:relative; display:block; width:100%; padding:0.9em; border-radius:1.0em; box-sizing:border-box; background-color:#fff; color:#0055ff; border:#bec8dc 1px solid; text-decoration:none; font-family: source-han-sans-japanese, sans-serif; font-weight:700; font-style:normal; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #btn-today a:hover { opacity:0.7; } }
#btn-today a i { display:inline-block; content:""; width:1.4em; height:1.4em; vertical-align:middle; margin-top:-0.2em; margin-right:0.5em; background:url(../img/common/icon_today.png) center center no-repeat; background-size:cover; }
#btn-today a i::before { position:absolute; top:0; left:0; display:block; content:""; width:2.5em; height:3.1em; border-right:#dce2ed 2px dashed; background:url(../img/common/arrow_b.png) 55% center no-repeat; background-size:30%; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-box1 { width:auto; }

#top-search { display:block; margin:0 0 15px 0; }
#top-search .textarea,
#top-search .button { font-size:0.9rem; }
#top-search .textarea { width:86%; }
#top-search .button { width:8%; }

#top-today { display:block; }
#btn-today { width:94%; font-size:100%; }

}


/* top-info
-------------------------------- */

#top-info { padding-bottom:1px; }

.top-info-box,
.top-emergency-box { width:980px; margin:0 auto 15px auto; padding:0.7em 1.0em; box-sizing:border-box; background-color:#fff; border-radius:1.0em; text-align:left; }
.top-info-ttl,
.top-emergency-ttl { margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:#dce2ed 1px solid; color:#fc3b1e; line-height:160%; }
.top-info-txt,
.top-emergency-txt { line-height:160%; }
.top-info-txt a,
.top-emergency-txt a { color:#333; }
@media (hover: hover) { .top-info-txt a:hover { text-decoration:none; } }

.top-bn { width:800px; margin:0 auto 15px auto; }
.top-bn p { width:100%; height:100%; }
.top-bn p a { position:relative; display:block; width:100%; height:0; padding-top:20%; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .top-bn p a:hover { opacity:0.5; } }
.top-bn p a span { position:absolute; z-index:3; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; }
.top-bn p a i { position:absolute; z-index:1; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:130%; text-indent:-9999px; opacity:0.2; overflow:hidden; }
.top-bn p a span,
.top-bn p a i { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:130%; text-indent:-9999px; }
.top-bn p a span { z-index:2; background-size:auto 100%; }
.top-bn p a i { z-index:1; background-size:130%; opacity:0.2; overflow:hidden; }
.top-bn p a i::before { position:absolute; z-index:2; content:""; left:-5px; top:-5px; right:-5px; bottom:-5px; filter:blur(5px); background:inherit; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-info,
#top-emergency { width:94%; margin:0 3%; }

.top-info-box,
.top-emergency-box { width:auto; font-size:90%; }

.top-bn { width:auto; }
.top-bn p a { padding-top:33.673%; }

}


/* top-list
-------------------------------- */

#top-list-area { width:980px; background-color:#ecedf0; background-color:#dadce2; margin:auto; padding:20px 0 0 2px; box-sizing:border-box; }
#top-list { margin:auto; width:100%!important; }
.tpl-itm { width:325px; padding:0 5px 20px 5px; box-sizing:border-box; }
.tpl-itm-box { position:relative; width:100%; text-align:left; background-color:#fff; border-radius:10px; font-size:75%; box-shadow:0px 0px 5px rgba(0,0,0,0.05); }

.tpl-gr { padding:7px; border-radius:10px 10px 0 0; color:#fff; font-family:source-han-sans-japanese, sans-serif; font-weight:700; font-style:normal; }
.tpl-gr::before { content:""; display:inline-block; width:1.2em; height:1.2em; margin:0 0.5em -0.1em 0; vertical-align:bottom; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.top-streaming .tpl-gr { background-color:#3ec75a; }
.top-streaming .tpl-gr::before { background-image:url(../img/common/icon_filter_streaming.png); }
.top-stage .tpl-gr,
.top-stage.top-streaming .tpl-gr { background-color:#fc3b1e; }
.top-stage .tpl-gr::before,
.top-stage.top-streaming .tpl-gr::before { background-image:url(../img/common/icon_filter_stage.png); }
.top-art .tpl-gr,
.top-art.top-streaming .tpl-gr { background-color:#fda91f; }
.top-event .tpl-gr,
.top-event.top-streaming .tpl-gr { background-color:#ff91a0; }
.top-art .tpl-gr::before,
.top-art.top-streaming .tpl-gr::before { background-image:url(../img/common/icon_filter_art.png); }
.top-event .tpl-gr::before,
.top-event.top-streaming .tpl-gr::before { background-image:url(../img/common/icon_filter_event.png); }

.tpl-p { background-color:#f1f2f5; }
.tpl-p a { position:relative; display:block; width:100%; height:0; }
.tpl-p a span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

.tpl-itm dl { padding:10px; line-height:150%; }
.tpl-itm dl dt { margin-bottom:10px; font-size:110%; font-family:source-han-sans-japanese, sans-serif; font-weight:700; font-style:normal; }
.top-streaming dl dt { color:#3ec75a; }
.top-stage dl dt,
.top-stage.top-streaming dl dt { color:#fc3b1e; }
.top-art dl dt,
.top-art.top-streaming dl dt { color:#fda91f; }
.top-event dl dt,
.top-event.top-streaming dl dt { color:#ff91a0; }

.tpl-itm dl dd .txt { padding-bottom:10px; }

.tpl-b { text-align:center; }

.tpl-b a { position:relative; display:block; width:92%; margin:3px 4%; padding:0.25em 0; border-radius:1.0em; color:#fff; text-decoration:none; font-family:source-han-sans-japanese, sans-serif; font-weight:700; font-style:normal; cursor:pointer; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .tpl-b a:hover { opacity:0.5; } }
.tpl-b a::before { position:absolute; top:50%; left:0.6em; display:block; content:""; width:0.5em; height:0.5em; vertical-align:middle; margin-top:-0.25em; background:url(../img/common/arrow.png) center center no-repeat; background-size:cover; }
.tpl-b.tpl-b-site { margin-bottom:10px; }
.tpl-b.tpl-b-site a::before { position:absolute; top:50%; left:0.6em; display:block; content:""; width:1.0em; height:1.0em; vertical-align:middle; margin-top:-0.5em; background:url(../img/common/icon_site.png) center center no-repeat; background-size:cover; }
.top-streaming .tpl-b a { background-color:#3ec75a; }
.top-stage .tpl-b a,
.top-stage.top-streaming .tpl-b a { background-color:#fc3b1e; }
.top-art .tpl-b a,
.top-art.top-streaming .tpl-b a { background-color:#fda91f; }
.top-event .tpl-b a,
.top-event.top-streaming .tpl-b a { background-color:#ff91a0; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-list-area { width:auto; padding:20px 5px 0 5px; box-sizing:border-box; }
.tpl-itm { width:50%; padding:0 5px 10px; }

}

@media all and (max-width: 374px) {

.tpl-b a { font-size:90%; }
.tpl-itm dl { padding:5px; }

}


/* bn twitter
-------------------------------- */

#bn-twitter { width:400px; margin:0 auto 20px auto; }
#bn-twitter p { position:relative; width:100%; height:0; padding-top:18.75%; }
#bn-twitter p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:10px; background:url(../img/top/bn_twitter2.png) center center no-repeat; background-size:cover; text-indent:-9999px; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#bn-twitter { width:90%; margin:0 5% 20px 5%; }

}


/* bn stakeholders
-------------------------------- */

#bn-stakeholders { width:350px; margin:0 auto 20px auto; }
#bn-stakeholders p { position:relative; width:100%; height:0; padding-top:22.857%; }
#bn-stakeholders p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/top/bn_stakeholders.png) center center no-repeat; background-size:cover; text-indent:-9999px; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#bn-stakeholders { width:90%; margin:0 5% 20px 5%; }

}

/*eof*/