.layout{min-height:100%;height:100%;background-color:#282828}
.layout-header{position:fixed;width:100%;height:60px;padding-left:260px;background-color:rgba(0,0,0,.3);text-align:center;transform:translateY(-100%);visibility:hidden;transition:transform .5s ease,visibility .5s ease;box-sizing:border-box;z-index:999}
.layout-header.is-active{transform:translateY(0);visibility:visible}
.navigation{font-size:0}
.navigation__item{display:inline-block;padding-top:22px}
.navigation__item+.navigation__item{margin-left:40px}
.navigation__button{position:relative;display:block;padding-bottom:2px;overflow:hidden}
.navigation__button:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background-color:#e53238;transform:translateX(-100%);transition:transform .3s ease;z-index:1}
.layout--big-smile .navigation__button:before,.layout--big-smile-sns .navigation__button:before{background-color:#f5af02}
.layout--promotion .navigation__button:before{background-color:#86b817}
.navigation__item.is-active .navigation__button:before{transform:translateX(0);transition:none}
.navigation__button.is-active:before,.navigation__button:hover:before{transform:translateX(0)}
.navigation__button>.icon{position:relative;z-index:2}
.layout-main{position:relative;min-height:100%;padding-top:60px;padding-left:260px;box-sizing:border-box}
.layout-top-button{visibility:hidden;opacity:0;position:fixed;right:17px;bottom:7px;transition:visibility .5s ease-in-out,opacity .5s ease-in-out}
.layout-top-button.is-active{visibility:visible;opacity:1}
.aside{position:fixed;top:0;left:0;width:260px;height:100%;background-color:#000;z-index:1010}
.aside-fix-area{position:fixed;top:0;left:0;width:260px;height:100%;z-index:1010}
.aside-logo{position:absolute;top:16px;left:40px;box-sizing:border-box}
.aside-menu{position:absolute;top:50%;left:40px;transform:translateY(-50%)}
.aside-menu__item+.aside-menu__item{margin-top:35px}
.aside-menu__button{display:inline-block;position:relative;padding-bottom:5px;overflow:hidden}
.aside-menu__button:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:10px;background-color:#e53238;transform:translateX(-100%);transition:transform .3s ease;z-index:1}
.aside-menu__item.is-active .aside-menu__button:before{transform:translateX(0)}
.aside-menu__button.is-active:before,.aside-menu__button:hover:before{transform:translateX(0)}
.aside-menu__button>img{position:relative;z-index:2}
.aside-menu__button--big-smile:before{background-color:#f5af02}
.aside-menu__button--promotion:before{background-color:#86b817}
.aside-footer{position:absolute;left:40px;bottom:40px}
.intro{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;background-color:#282828}
.intro-contents{flex:1;padding:40px 15%;box-sizing:border-box}
.intro-title{position:relative;padding-bottom:70px}
.intro-title:after{content:'';position:absolute;left:0;bottom:-1px;width:99px;height:1px;background-color:rgba(255,255,255,.2)}
.intro-menu{margin-top:67px}
.intro-menu__item+.intro-menu__item{margin-top:35px}
.intro-menu__button{display:inline-block;position:relative;padding-bottom:5px;overflow:hidden}
.intro-menu__button:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:10px;background-color:#e53238;transform:translateX(-100%);transition:transform .3s ease;z-index:1}
.intro-menu__item.is-active .intro-menu__button:before{transform:translateX(0)}
.intro-menu__button:hover:before{transform:translateX(0)}
.intro-menu__button>img{position:relative;z-index:2}
.intro-menu__button--big-smile:before{background-color:#f5af02}
.intro-menu__button--promotion:before{background-color:#86b817}
.intro-footer{position:fixed;bottom:40px;right:40px}
.sprite-icon{background-image:url(../../assets/images/sprites/icon.png);background-size:132px 82px}
.sprite-icon-close{width:38px;height:38px;background-position:-94px 0}
.sprite-icon-swiper-next{width:43px;height:82px;background-position:0 0}
.sprite-icon-swiper-prev{width:43px;height:82px;background-position:-47px 0}
.contents{min-height:100%}
.contents-main{display:flex;flex-direction:column;padding-top:80px;align-items:center}
.section{position:relative;padding-bottom:130px}
.section-title{padding-bottom:50px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.swiper-container{margin:0 auto;background-color:#000;box-shadow:40px 40px 40px rgba(0,0,0,.2)}
.swiper-pagination-bullets{position:relative;margin-top:34px;line-height:0}
.swiper-pagination-bullet{width:6px;height:6px;margin:0 7px;opacity:1}
.swiper-pagination-bullet-active{background:#e53238}
.swiper-button-next,.swiper-button-prev{opacity:.2;top:277px;margin:0;transition:opacity .3s linear;outline:0}
.swiper-button-next:hover,.swiper-button-prev:hover{opacity:1}
.swiper-button-prev{left:-120px;width:43px;height:82px;background-position:-47px 0}
.swiper-button-next{right:-120px;width:43px;height:82px;background-position:0 0}
.lockscreen{position:relative;width:340px;margin:0 auto;min-height:673px}
.lockscreen:before{content:'';position:absolute;top:8px;left:50%;width:188px;height:24px;background:url(../../assets/images/contents/bg-screen.png) no-repeat 0 0;transform:translateX(-50%);z-index:10}
.lockscreen .swiper-container{width:100%;height:633px;background-color:#000;border:8px solid #000;border-radius:40px;overflow:hidden;box-sizing:border-box}
.timeboard{position:relative;width:1108px;height:702px;padding:229px 189px 0 179px;box-sizing:border-box;background:url(../../assets/images/contents/bg-timeboard.png) no-repeat 0 0}
.timeboard .swiper-container{margin:0}
.timeboard .swiper-pagination-bullets{margin-top:318px}
.timeboard .swiper-button-prev{left:-66px}
.timeboard .swiper-button-next{right:-66px}
.sns,.sns-screen{position:relative;width:448px;height:702px;padding:131px 62px 0 62px;box-sizing:border-box;background:url(../../assets/images/contents/bg-sns.png) no-repeat 0 0}
.sns .swiper-container,.sns-screen .swiper-container{width:324px}
.sns .swiper-pagination-bullets,.sns-screen .swiper-pagination-bullets{margin-top:212px}
.sns .swiper-button-prev,.sns-screen .swiper-button-prev{left:-66px}
.sns .swiper-button-next,.sns-screen .swiper-button-next{right:-66px}
.contents-footer{padding-bottom:130px;text-align:center}
.layout--big-smile .swiper-pagination-bullet-active,.layout--big-smile-sns .swiper-pagination-bullet-active{background:#f5af02}
.section--multiple{display:flex;flex-wrap:wrap;width:1284px;justify-content:center}
.section--multiple .section-title{flex:1 100%}
.section--multiple .sns-screen{width:642px;padding-left:151px;padding-right:151px;background-position-x:97px}
.section--multiple .sns-screen:nth-child(1n+4){margin-top:51px}
.section--multiple .swiper-button-prev{left:29px}
.section--multiple .swiper-button-next{right:29px}
.promotion{display:flex;justify-content:center}
.promotion__grid{text-align:center}
.promotion__link{position:relative;display:inline-block;overflow:hidden;top:-38px;left:-19px;padding:0 2px 5px}
.promotion__link:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#fff;transform:translateX(-100%);transition:transform .3s ease;opacity:1;z-index:1}
.promotion__link:hover:before{transform:translateX(0)}
.promotion__link>img{position:relative;z-index:2}
.sprite-navigation{background-image:url(../../assets/images/sprites/navigation.png);background-size:172px 129px}
.sprite-navigation-bigSmile-01{width:56px;height:15px;background-position:-102px -57px}
.sprite-navigation-bigSmile-02{width:42px;height:15px;background-position:-60px -95px}
.sprite-navigation-bigSmile-03{width:42px;height:15px;background-position:-106px -95px}
.sprite-navigation-bigSmile-04{width:36px;height:15px;background-position:-46px -114px}
.sprite-navigation-campaign-01{width:56px;height:15px;background-position:-102px -76px}
.sprite-navigation-campaign-02{width:70px;height:15px;background-position:0 -19px}
.sprite-navigation-campaign-03{width:98px;height:15px;background-position:0 0}
.sprite-navigation-campaign-04{width:42px;height:15px;background-position:0 -114px}
.sprite-navigation-campaign-05{width:70px;height:15px;background-position:0 -38px}
.sprite-navigation-campaign-06{width:56px;height:15px;background-position:0 -95px}
.sprite-navigation-campaign-07{width:57px;height:15px;background-position:-102px -38px}
.sprite-navigation-campaign-08{width:27px;height:15px;background-position:-86px -114px}
.sprite-navigation-campaign-09{width:70px;height:15px;background-position:0 -57px}
.sprite-navigation-campaign-10{width:70px;height:15px;background-position:0 -76px}
.sprite-navigation-campaign-11{width:27px;height:15px;background-position:-117px -114px}
.sprite-navigation-promotion-01{width:70px;height:15px;background-position:-102px 0}
.sprite-navigation-promotion-02{width:70px;height:15px;background-position:-102px -19px}
.button--next-ad{position:relative;display:inline-block;padding:0 50px;height:29px}
.button--next-ad:hover>.icon{width:100%;opacity:.8}
.button--next-ad>.icon{position:absolute;top:0;left:0;width:0;height:100%;opacity:0;transition:width .3s ease-in-out,opacity .3s ease-in-out}
.button--next-ad>.icon:before{content:'';position:absolute;width:100%;height:1px;background-color:#fff;top:14px;left:0}
.button--next-ad>.icon:after{content:'';position:absolute;display:block;right:0;top:0;width:15px;height:29px;background-repeat:no-repeat;background-image:url(../../assets/images/layout/next-ad-arrow.png)}
.tab{width:100%;position:relative}
.tab.section--lockscreen{min-height:760px}
.tab.section--timeboard{min-height:789px}
.tab__item{position:absolute;left:50%;top:0;visibility:hidden;opacity:0;z-index:1}
.section--lockscreen .tab__item{width:462px;margin-left:-231px}
.section--timeboard .tab__item{transform:translateX(-50%)}
.tab__item.is-active{visibility:visible;opacity:1;z-index:2}
body{background-color:#282828}