/* ============================
	top css
============================ */

/* top-main
=============================================== */

#top-main-area { width:980px; margin:20px auto; }
#top-main { position:relative; width:100%; height:0; padding-top:56.1224489795918%; /* for animation */ opacity:0; animation: top-main-fade 1s forwards; }
#top-main > span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/top/top_main0323.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

@keyframes top-main-fade {
  0% { opacity:0; transform:scale(0.98); }
  50% { transform:scale(1.01); }
  100% { opacity:1;  transform:scale(1.0); }
}

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

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

#top-main-area { width:auto; margin:0 auto; }

}


/* top-2col
=============================================== */

#top-2col:after {content:"";clear:both;display:block;}
#top-twitter { width:470px; float:left; }

#top-banner { width:470px; float:right; padding-top:130px; text-align:center; }

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

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

#top-twitter { width:auto; float:none; }

#top-banner { width:auto; float:none; padding-top:0; }

}


/* top-notice
=============================================== */

.top-notice { margin-bottom:20px; padding:20px; border-radius:20px; background-color:#fff; color:#333; font-size:160%; line-height:140%; box-shadow:0px 0px 40px rgba(0,0,0,0.2) inset; font-weight:700; }

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

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

.top-notice { margin-bottom:10px; padding:10px; border-radius:10px; font-size:120%; }

}


/* top-yt
=============================================== */

#top-yt-list { margin-bottom:20px; padding:0 50px; /* for space */ font-size:0; }
.top-yt-list-item { display:inline-block; width:278px; margin:0 7px; vertical-align:middle; /* for space */ font-size:1rem; }
.top-yt-list-item .tmb { position:relative; width:100%; height:0; margin-bottom:5px; padding-top:56.25%; background-color:rgba(0,0,0,0.2); }
.top-yt-list-item .tmb a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .top-yt-list-item .tmb a:hover { opacity:0.5; } }
.top-yt-list-item .tmb a span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.top-yt-list-item .cap { line-height:140%; color:#fff; }

#top-yt-list .slick-arrow { position:absolute; top:0; width:50px; 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; }
#top-yt-list .slick-prev { left:-50px; z-index:12; background-image:url(../img/top/ar_l_w.png); }
#top-yt-list .slick-next { right:-50px; z-index:13; background-image:url(../img/top/ar_r_w.png); }
#top-yt-list .slick-arrow:hover { background-color:rgba(255,255,255,0.2); }

#top-yt-pl { margin-bottom:20px; padding:20px 10px 10px 10px; border:#F8CB02 2px solid; border-radius:20px; text-align:center; }
#top-yt-pl-ttl { margin-bottom:20px; font-size:180%; color:#F8CB02; }
#top-yt-pl-btn { width:100%; /* for space */ font-size:0; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:23%; vertical-align:middle; /* for space */ font-size:1rem; }
#top-yt-pl-btn li a { display:inline-block; position:relative; width:100%; padding:1.0em 0; border-radius:2.2em; line-height:130%; font-weight:bold; color:#fff; text-decoration:none; background:#c71322; transition: opacity 0.2s ease-out; }
#top-yt-pl-btn li a::before { display:inline-block; position:absolute; top:1.95em; left:2.2em; margin-right:0.7em; content:"▶︎"; font-size:50%; }
#top-yt-pl-btn li a:hover { opacity:0.5; }


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

@media all and (max-width: 767px) {
#top-yt-list { margin:0 -3% 20px -3%; padding:0 8.0vw; /* for space */ font-size:0; }
.top-yt-list-item { width:30vw; margin:0 1vw; }
.top-yt-list-item .cap { font-size:90%; }

#top-yt-list .slick-arrow { width:8.0vw; }
#top-yt-list .slick-prev { left:-8.0vw; }
#top-yt-list .slick-next { right:-8.0vw; }

#top-yt-pl-ttl { font-size:160%; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:48%; vertical-align:middle; /* for space */ font-size:1rem; }
}


/* top-attention
=============================================== */
.br_smp { display: -webkit-block; display: block; }
@media all and (min-width: 768px) {.br_smp{ display: none; } }
#top-attention { width:980px; margin:0 auto 20px auto; padding:20px; box-sizing:border-box; border-radius:20px; background-color:#fff; color:#333;  box-shadow:0px 2px 4px rgba(0,0,0,0.2);}
#top-attention .title {color:#fe4900; font-size:150%;font-weight:600; line-height:180%;text-align:center; }
#top-attention p { line-height:180%;padding:5px;}
#top-attention .big-txt { font-size:130%;line-height:180%;padding:5px;}
#top-attention .big{font-weight:600; }
/* ---- Media Queries ---- */

@media all and (max-width: 767px) {
#top-attention .title {color:#fe4900; font-size:105%;font-weight:600; line-height:180%;text-align:center; }
#top-attention { width:94%; margin:10px 3%; padding:10px; border-radius:10px; font-size:120%; }

}

.imgCB span {width:980px;height:320px;margin:8px auto 15px;display:block;text-indent: -9999px;  }

@media all and (max-width: 767px) {.imgCB span{width:100%; height:0; padding-top:32.6530612244898%; display:block;background-size: contain;position:relative;text-indent:-9999px;}

}


#mov-main{margin-bottom:10px;}