/*
================================================================================================================
メインビジュアル/スライドショーエリア
================================================================================================================
*/
/*スライダーエリア*/
#slider-top{position:relative; width:100%;}

/*
=============================
背景スライド
=============================
*/
#slider-background{display:block; position:relative; width:100%; z-index:2;}
#slider-background::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#0c2d57;
opacity:.3;
z-index:3;}
#slider-background .swiper-slide{position:relative; width:100%; height:450px; overflow:hidden;}
#slider-background .swiper-slide::before{
display:block;
content:"";
width:120%;
height:120%;
position:absolute;
left:-10%;
top:-10%;
filter:blur(20px);
background-position:center;
background-size:100% auto;}
@media screen and (max-width:1200px){#slider-background .swiper-slide{height:300px;}}
@media screen and (max-width:900px){#slider-background .swiper-slide{height:450px;}}
@media screen and (max-width:540px){#slider-background .swiper-slide{height:350px;}}
@media screen and (max-width:480px){#slider-background .swiper-slide{height:320px;}}

/*
=============================
メインスライド
=============================
*/
#slider-pickup{position:absolute; top:0; left:calc(50% - 387.5px); width:100%; max-width:775px; z-index:5;}
#slider-pickup img{width:100%;}
@media screen and (max-width:1200px){#slider-pickup{max-width:517px; left:calc(50% - 258.5px);}}
@media screen and (max-width:900px){#slider-pickup{max-width:450px; left:calc(50% - 225px); top:unset; bottom:0;}}
@media screen and (max-width:700px){#slider-pickup{max-width:400px; left:calc(50% - 200px);}}
@media screen and (max-width:540px){#slider-pickup{max-width:360px; left:calc(50% - 180px);}}
@media screen and (max-width:480px){#slider-pickup{max-width:300px; left:calc(50% - 150px);}}

/*ナビゲーション左右*/
#slider-pickup *:after{display:none;}
#slider-pickup .swiper{width:100%;}
#slider-pickup .swiper-button-prev,
#slider-pickup .swiper-button-next{width:44px; height:74px; background-size:100% auto; transition:opacity .2s ease;}
#slider-pickup .swiper-button-prev{left:-64px; background-image:url(../img/top/slide_back.png);}
#slider-pickup .swiper-button-next{right:-64px; background-image:url(../img/top/slide_next.png);}
#slider-pickup .swiper-button-prev:hover,#slider-pickup .swiper-button-next:hover{opacity:.7;}
@media screen and (max-width:540px){
#slider-pickup .swiper-button-prev,#slider-pickup .swiper-button-next{width:30px; height:50px;}
#slider-pickup .swiper-button-prev{left:-40px;}
#slider-pickup .swiper-button-next{right:-40px;}}

/*非表示調整*/
@media screen and (min-width:1201px) and (max-width:1600px){#slider-pickup .swiper-button-prev,#slider-pickup .swiper-button-next{display:none !important;}}
@media screen and (min-width:901px) and (max-width:1050px){#slider-pickup .swiper-button-prev,#slider-pickup .swiper-button-next{display:none !important;}}
@media screen and (max-width:400px){#slider-pickup .swiper-button-prev,#slider-pickup .swiper-button-next{display:none !important;}}

/*ナビゲーション下*/
#slider-pickup .swiper-pagination{display:flex; width:100%; bottom:-10px; justify-content:center;}
#slider-pickup .swiper-pagination span{display:block; border-radius:0; width:30px; height:5px; background:#8b8b8b; opacity:1; margin:0 3px;}
#slider-pickup .swiper-pagination span.swiper-pagination-bullet-active{background:#ff6a7a;}

/*
=============================
キャラ
=============================
*/
.chara{
position:absolute;
top:20px;
width:calc(50% - 400px);
height:100%;
background-position:center;
background-repeat:no-repeat;
background-size:auto 100%;
animation:2.5s fuwafuwa infinite;
pointer-events:none;
z-index:4;}
#chara01.chara{left:0; background-image:url(../img/top/chara01.png);}
#chara02.chara{right:0; background-image:url(../img/top/chara02.png); animation-delay:.3s;}
@media screen and (max-width:1400px){.chara{background-size:100% auto;}}
@media screen and (max-width:1200px){
.chara{width:190px;}
#chara01.chara{left:20px;}
#chara02.chara{right:20px;}}
@media screen and (max-width:980px){
.chara{width:180px;}
#chara01.chara{left:10px;}
#chara02.chara{right:10px;}}
@media screen and (max-width:900px){.chara{width:50%; height:calc(100% + 50px); top:-50px; background-position:top; background-size:300px auto;}}
@media screen and (max-width:640px){.chara{background-size:90% auto;}}
@media screen and (max-width:480px){
.chara{background-size:210px auto;}
#chara01.chara{left:-20px; background-position:top right !important;}
#chara02.chara{right:-20px; background-position:top left !important;}}
@media screen and (max-width:430px){
#chara01.chara{left:0;}
#chara02.chara{right:0;}}

/*キャラ付属品*/
.chara::before,.chara::after{display:block; content:""; position:absolute; background-repeat:no-repeat;}
#chara01.chara::after{display:none !important;}
#chara01.chara::before{top:0; right:20%; width:50px; height:70px; background-image:url(../img/top/music01.png); background-position:top right;}
#chara02.chara::before{bottom:0; right:5%; width:80px; height:65px; background-image:url(../img/top/music02.png); background-position:bottom right;}
#chara02.chara::after{top:0; left:0; width:220px; height:100px; background-image:url(../img/top/text02.png); background-position:top left;}
@media screen and (max-width:1400px){.chara::before,.chara::after{background-size:80% auto;}}
@media screen and (max-width:900px){
.chara::before,.chara::after{background-size:100% auto;}
#chara01.chara::before{top:70px; left:0; right:unset;}
#chara02.chara::before{top:70px; bottom:unset;}
#chara02.chara::after{display:none !important;}}
@media screen and (max-width:480px){
.chara::before,.chara::after{background-size:70% auto;}
#chara01.chara::before{top:60px; left:10px;}
#chara02.chara::before{top:70px; right:20px;}}
@media screen and (max-width:430px){.chara::before,.chara::after{display:none !important;}}

/*キャラ付属品-Xリンク*/
#chara01.chara a{
display:block;
position:absolute;
bottom:0;
left:0;
width:220px;
height:100px;
background-image:url(../img/top/text01.png);
background-position:bottom left;
background-repeat:no-repeat;
pointer-events:auto;
transition:all .2s ease;}
#chara01.chara a:hover{filter:brightness(1.2) blur(.5px) saturate(1.5);}
@media screen and (max-width:1400px){#chara01.chara a{background-size:80% auto;}}
@media screen and (max-width:900px){#chara01.chara a{display:none;}}

/*アニメーション*/
@keyframes fuwafuwa{
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

/*
================================================================================================================
ニュース
================================================================================================================
*/
#inner{position:relative; width:100%; max-width:980px; padding:50px 0; margin:0 auto; pointer-events:none;}
#inner > *{pointer-events:auto;}
#inner > * + *{padding-top:100px;}
@media screen and (max-width:800px){#inner > * + *{padding-top:50px;}}
@media screen and (max-width:480px){#inner{padding:30px 10px;}}

/*スライドサイズと合わせて調整*/
@media screen and (max-width:900px){#inner{max-width:450px;}}
@media screen and (max-width:700px){#inner{max-width:400px;}}
/*
@media screen and (max-width:540px){#inner{max-width:360px;}}
@media screen and (max-width:480px){#inner{max-width:300px;}}
*/

#news .head{position:relative; width:100%; margin-bottom:5px;}
#news .head > p{width:100%;}
#news .head > a{display:block; position:absolute; top:0; right:0;}
#news .head > a:hover img{opacity:.7;}
@media screen and (max-width:900px){#news .head > * > img{max-width:220px;}}
@media screen and (max-width:480px){#news .head > * > img{max-width:180px;}}
@media screen and (max-width:370px){#news .head > a > img{max-width:150px;}}

#news-list{display:flex; font-family:'M PLUS 1', sans-serif; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;}

#news-list > *{display:none; width:calc((100% / 3) - 10px); margin:0 !important;}
#news-list > *:nth-child(1),
#news-list > *:nth-child(2),
#news-list > *:nth-child(3){display:block;}
@media screen and (max-width:900px){
#news-list > *{width:100%;}
#news-list > * + *{margin-top:10px !important;}}

#news-list ul{
background-image:url(../img/common/bg_main.png);
border:4px solid #fff;
border-radius:20px;
padding:10px;
margin:0 !important;}
#news-list ul li:nth-child(1){display:none;}
#news-list ul li:nth-child(2){order:3 !important; font-size:12px; border-top:none !important;}
#news-list ul li:nth-child(3){order:2 !important; background:#a0d6ff; padding:10px; margin-top:10px;}
#news-list ul li:nth-child(4){order:1 !important;}
@media screen and (max-width:800px){#news-list ul{background-size:12px auto;}}
@media screen and (max-width:480px){#news-list ul{border:2px solid #fff; border-radius:10px;}}

/*
================================================================================================================
タイムライン
================================================================================================================
*/
#timeline{display:flex; width:100%; justify-content:space-between;}
#timeline > .box{display:block; position:relative; width:48%; background:#ffd552; border:4px solid #fff; border-radius:20px; padding:40px 15px 20px;}
#timeline > .box > p{position:absolute; top:-40px; left:0;}
#timeline > .box > .inner{min-height:100%; background-image:url(../img/common/bg_main.png); border-radius:10px; padding:10px;}
#timeline > .box > .inner > .scroll{height:300px; padding-right:10px; overflow:auto;}

@media screen and (max-width:900px){
#timeline{flex-wrap:wrap; justify-content:center;}
#timeline > .box{width:100%;}
#timeline > .box + .box{margin-top:30px;}
#timeline > .box > p{top:-20px;}
#timeline > .box > p img{max-width:220px;}}
@media screen and (max-width:800px){
#timeline > .box > .inner{background-size:12px auto;}}
@media screen and (max-width:480px){
#timeline > .box{border:2px solid #fff; border-radius:10px; padding:20px 10px 10px;}
#timeline > .box > p{top:-20px;}
#timeline > .box > p img{max-width:180px;}
#timeline > .box > .inner{padding:5px;}
#timeline > .box > .inner > .scroll{height:200px; padding-right:5px;}}

/*スクロールバー*/
.scroll::-webkit-scrollbar{width:10px;}
.scroll::-webkit-scrollbar-track{background:#e0e0e0; border-radius:6px;}
.scroll::-webkit-scrollbar-thumb{background:#ff6a7a; border-radius:6px; cursor:pointer;}

/*誕生日リスト*/
#birthday{font-family:'M PLUS 1', sans-serif; font-size:13px;}
#birthday > div{display:none; color:#0000ff; font-size:15px; font-weight:700; text-align:center; margin:10px auto;}
#birthday > div:not(:first-child){border-top:2px solid #ffd552; padding-top:10px;}
#birthday > div.today{color:#f00;}
#birthday > div.today,#birthday > div.not_today{display:block;}
#birthday > ul{display:flex; align-items:center; padding:5px;}
#birthday > ul li:nth-child(1){width:32px;}
#birthday > ul li:nth-child(2){width:calc(100% - 32px); padding-left:10px;}