@charset "utf-8";

/* ===================================================================
css information

File Name  : top.css
Author     :
Style Info :
Route name : homepage
=================================================================== */

/*********************************************************************

common

*********************************************************************/

.top-margin-1 { margin-bottom:70px; }

/* SP --------------------------------*/
@media (max-width: 768px) {
.top-margin-1 { margin-bottom:40px; }
}

/*********************************************************************

#top-main-slide

*********************************************************************/

#top-main-slide-wrap { margin-bottom:60px; }
#top-main-slide { width: 100%; height: 370px; overflow: hidden; opacity:0; visibility:hidden; }
#top-main-slide.slick-initialized { opacity:1; visibility:visible; }
#top-main-slide .slick-slide { pointer-events: none; cursor:default; }
#top-main-slide .slick-active { pointer-events: auto; cursor:default; }
#top-main-slide .slick-slide img { opacity: 0.4; width: 100%; }
#top-main-slide .slick-active img { opacity: 1; }
#top-main-slide .slick-dots { display:block; width:100%; position:absolute; bottom:20px; height:12px; text-align:center; }
#top-main-slide .slick-dots li { display:inline-block; vertical-align:top; padding:0 5px; }
#top-main-slide .slick-dots button { width:12px; height:12px; border:1px solid #666; display:block; text-indent:-9999px; background:#fff; cursor:pointer; padding:0; display:block; border-radius:50%; }
#top-main-slide .slick-dots .slick-active button { background:#f54a72; }
#top-main-slide .slick-arrow { width:calc( calc(100% - 717px) / 2 ); height:370px; position:absolute; top:0; z-index:1; cursor:pointer; }
#top-main-slide .slick-prev { left:0; }
#top-main-slide .slick-next { right:0; }

/* SP --------------------------------*/
@media (max-width: 768px) {
#top-main-slide-wrap { position:relative; overflow:hidden; padding:100% 0 0 0; height:0; margin-bottom:30px; }
#top-main-slide { height:100%; position:absolute; top:0; left:0; }
#top-main-slide .slick-slide img { opacity: 1; }
#top-main-slide .slick-dots { bottom:10px; }
#top-main-slide .slick-arrow { display:none !important; }
}

/*********************************************************************

#insta-list

*********************************************************************/

#insta-list { width:100%; font-size:12px; text-align: center; }
#insta-list a { text-decoration:none; }
#insta-list .account { font-size: 16px; margin-bottom:16px; }
#insta-list .insta-content { text-align:left; overflow:hidden; }
#insta-list .insta-content li { float:left; vertical-align:top; width:11.11%; height:10.9vw; overflow:hidden; }
#insta-list .insta-content li img { width:100%; }
#insta-list .more-btn { position:relative; color:#f54a72; padding-left:16px; margin-top:20px; line-height:1; cursor:pointer; }
#insta-list .more-btn:before { content: ''; position:absolute; width:12px; height:12px; top:50%; left:0; margin-top: -6px; background:url(../img/plus@2x.png) no-repeat center center; background-size:100% 100%; }
#insta-list .official-btn a { display:inline-block; margin-top:20px; }
#insta-list .close-btn { width:100px; border:1px solid #f54a72; color:#f54a72; margin:10px auto 0; height:26px; line-height:26px; border-radius:3px; cursor:pointer; }

/* js */
#insta-list .more-btn,
#insta-list .official-btn,
#insta-list .close-btn,
#insta-list .insta-content .feed-item { display:none; }

@media (min-width: 769px) {
#insta-list .insta-content .feed-item.pc-visible,
#insta-list .more-btn.pc-visible,
#insta-list .official-btn.pc-visible { display:inline-block; }
#insta-list .close-btn.pc-visible { display:block; }
}

/* SP --------------------------------*/
@media (max-width: 768px) {
#insta-list .insta-content li { width:33.33%; height:32vw; }
#insta-list .insta-content .feed-item.sp-visible,
#insta-list .more-btn.sp-visible,
#insta-list .official-btn.sp-visible { display:inline-block; }
#insta-list .close-btn.sp-visible { display:block; }
#insta-list .error-message { padding:20px 0; }
}

/*********************************************************************

.top-ranklist-slide

*********************************************************************/

.top-ranklist-slide-wrap { margin-bottom:40px; }
.top-ranklist-slide { width:100%; opacity:0; visibility:hidden; margin:0 auto; font-size:12px; text-align: center; }
.top-ranklist-slide.slick-initialized { opacity:1; visibility:visible; }
.top-ranklist-slide a { color:#333; text-decoration:none; }
.top-ranklist-slide .slick-slide { position: relative; padding:0 10px; }
.top-ranklist-slide .slick-slide img { width:100%; }
.top-ranklist-slide .slick-slide .price { color:#f54a72; }
.top-ranklist-slide .slick-slide .rank { position:absolute; width:40px; top:0; }
.top-ranklist-slide .slick-arrow { width:38px; height:75px; position:absolute; top:50%; margin:-37px 0 0 0; z-index:1; background:center center no-repeat; background-size:100%; cursor:pointer; }
.top-ranklist-slide .slick-arrow:before { content:''; display:none; }
.top-ranklist-slide .slick-prev { left:5px; background-image:url(../img/left@3x.png); }
.top-ranklist-slide .slick-next { right:5px; background-image:url(../img/right@3x.png); }

/* SP --------------------------------*/
@media (max-width: 768px) {
.top-ranklist-slide-wrap { margin-bottom:15px; }
.top-ranklist-slide { width:100%; }
.top-ranklist-slide .slick-slide { padding:0 10px; }
.top-ranklist-slide .slick-slide .rank { width:22%; max-width:36px; }
.top-ranklist-slide .slick-arrow { width:32px; height:63px; margin-top:-31px; }
.top-ranklist-slide .slick-prev { left:-15px; }
.top-ranklist-slide .slick-next { right:-15px; }
}

/*********************************************************************

.top-event-slide

*********************************************************************/

.top-event-slide { width:100%; opacity:0; visibility:hidden; margin:0 auto; }
.top-event-slide.slick-initialized { opacity:1; visibility:visible; }
.top-event-slide .slick-slide { padding:0 10px; }
.top-event-slide .slick-arrow { width:38px; height:75px; position:absolute; top:50%; margin:-37px 0 0 0; z-index:1; background:center center no-repeat; background-size:100%; cursor:pointer; }
.top-event-slide .slick-arrow:before { content:''; display:none; }
.top-event-slide .slick-prev { left:5px; background-image:url(../img/left@3x.png); }
.top-event-slide .slick-next { right:5px; background-image:url(../img/right@3x.png); }

/* SP --------------------------------*/
@media (max-width: 768px) {
.top-event-slide .slick-arrow { width:32px; height:63px; margin-top:-31px; }
.top-event-slide .slick-prev { left:-15px; }
.top-event-slide .slick-next { right:-15px; }
}

/*********************************************************************

.top-contents-slide

*********************************************************************/

.top-contents-slide { width:100%; opacity:0; visibility:hidden; margin:0 auto; }
.top-contents-slide.slick-initialized { opacity:1; visibility:visible; }
.top-contents-slide .slick-slide { padding:0 10px; }
.top-contents-slide .slick-arrow { width:38px; height:75px; position:absolute; top:50%; margin:-37px 0 0 0; z-index:1; background:center center no-repeat; background-size:100%; cursor:pointer; }
.top-contents-slide .slick-arrow:before { content:''; display:none; }
.top-contents-slide .slick-prev { left:5px; background-image:url(../img/left@3x.png); }
.top-contents-slide .slick-next { right:5px; background-image:url(../img/right@3x.png); }

/* SP --------------------------------*/
@media (max-width: 768px) {
.top-contents-slide .slick-arrow { width:32px; height:63px; margin-top:-31px; }
.top-contents-slide .slick-prev { left:-15px; }
.top-contents-slide .slick-next { right:-15px; }
}

/*********************************************************************

.top-news-cont

*********************************************************************/

.top-news-cont.cmn-table-border-link-wrap,
.top-news-cont.cmn-table-border-link-wrap a:last-child .cmn-table-border-link,
.top-news-cont .cmn-table-border-link--sub { border: none; }