/* Scss Document */

/*最新のsafari用*/
_::-webkit-full-page-media, _:future, :root .modaal-sp{
    display: block;
}
_::-webkit-full-page-media, _:future, :root .modaal-pc{
    display: none;
}
/*古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .modaal-sp{
    display: block;
	}
	::i-block-chrome, .modaal-pc{
    display: none;
	}
} 


@media (min-width: 1920px) {
header .logo-top img{
    width: 200px;/*logo*/
} 
}

@media (max-width: 1280px) {

.fc-content{
    width: calc((100% - 20px) / 4);
    margin-bottom: 20px;
}    
.fc-content img{
    width: 100%;
    }      
}

@media (max-width: 1024px) {
/* toggle_btn */
.toggle_btn {
  right: 0px;
  width: 55px;
  height: 55px;
}    
nav{
  width: 30%;        
    }    
header #SNS{
    right: 50px;
}    
/* TOP banner */
.top-banner{
    margin-top: -2em;
    top:90%;
    width: 100%;
}
.top-prof{
    padding: 10px;
    box-sizing: border-box;
    }
.top-prof-box h2{
    letter-spacing: 0.1em;
    margin: 1.5em 0 0.5em;
}
.shop-box h2{
    font-size: 1.1rem;
    padding: 10px 0;
}    
.shop-box{
    width: calc((100% - 160px)/4);
    margin: 20px;
}    
.gt_switcher_wrapper{
    top: 6px !important;
    right: 140px !important;
}    
}

@media (max-width: 768px) {
 nav .inner {
    width: 80%;
    padding: 5em 2em;
    margin: auto;
}
nav {
  width: 40%;
  height: 100vh;
  height: 100svh;
  font-size: 0.8rem;
}      
header .logo-top img{
    top: 30px;
}         
    
.topic-pc-f div{
    width: calc((100% - 10px)/2);
    box-sizing: border-box;
    margin: 10px;
}     
.top-news{
    margin: 3em auto;
    width: 60%;
}    
.shop-box h2{
    font-size: 1.1rem;
    padding: 10px 0;
}    
.shop-box{
    width: calc((100% - 120px)/3);
    margin: 20px;
}     
.footer-menu li{
    font-size: 0.7rem;
}    
.footer-menu-box{
    width: 50%;
    box-sizing: border-box;
}    
.fanclub-info{
    width: calc((100% - 40px) / 2);    
    height: auto;
    text-align: center;
}    
/* FC Photo ---------------- */
.fcphoto-box{
    margin: 10px;
    width: calc((100% - 60px)/3);
    aspect-ratio :1 / 1;
}    
.fcmovie-box{
    margin: 10px;
    width: calc((100% - 40px)/2);
    height: auto;
    aspect-ratio :16 / 9;
}    
.footer-menu-box p{
    line-height: 1.8;}
/*STARRY MENU*/
/*STARRY MENU*/
.footer-menu-box ul#STARRY{
    margin: 10px auto;
    width: 90%;
    text-align: center;
}      
}


@media (max-width: 600px) {
.pc_only{
    display: none;
}
.sp_only{
    display: block;
}
.switcher{
    width: 130px;
    }
header .top-img img{
    object-fit: contain;
    object-position: center 0;
    width: 100%;
    height: auto;
    overflow: hidden;
	/* じわっと画像が表示される */
 	animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}    
nav .inner {
  width: 90%;
  padding: 5em 1em;
  margin: auto;
  text-align: center;
}
header .logo-top img{
    height: 50px;/*logo*/
    width: auto;
    position: absolute;
    top: 2%;
    left: 2%;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}    
#header-child .logo-child{
    width: 98%;
    margin: auto;
}    
#header-child h1{
    margin: 0 !important;
}
#header-child .logo-child img{
    position: unset;
    height: 65px;/*logo*/
    width: auto;    
    padding: 5px 10px;
}    
.header-top-menu{
    top: 35px;
    right: 0;
}    
.header-top-menu li{
    font-size: 0.8rem;
    width: 65px;}
.slick-dotted.slick-slider{
    margin-bottom: 20px !important;
    }
/* sp用*/    
.header-top-sp-menu ul li{
    text-align: center;
    margin: 0 10px;
    width: calc((100% - 40px)/2);
    height: 40px;
    line-height: 40px;    
}    
    
/* top- sns */
header #SNS{
    right: 55px;
}    
header ul#SNS li{
    margin: 0 5px;
}
header #SNS img{
    width: 20px;
    height: auto;
}    
nav {
  width: 60%;
  height: 100vh;
  height: 100svh;
  font-size: 0.8rem;
}    
/* Granslate */
.gt_switcher_wrapper{
    top: 6px !important;
    right: 120px !important;
}    
.gt_switche{
    width: 130px !important;
    }    
.area{
    margin: 1em auto 5em;
    width: 95%;
}    
h2{
    font-size: 2em;
    text-align: center;
    line-height: 1.4;}  
.slider-topic .slick-slide img{
    width: 250px;
    height: auto;
    }    
.slider-topic .slick-next::before{
    left: 8px;
    }
.slider-topic .slick-prev::before{
    right:8px;        
    }    
.slider-topic .slick-arrow{
    width: 30px;
    height: 30px;
    }    
.slider-topic .slick-arrow::before{
    width: 8px;
    height: 8px;   
    top:9px;
    }
.top-banner{
    margin-top: -1em;        
    }    
.top-news{
    margin: 0 auto 2em;
    width: 80%;
}    
.top-prof-box{
    margin: auto;
    width: 95%;
    padding-bottom: 2em;
    box-sizing: border-box;
}    
.top-prof-img{
    text-align: center;
    }
.top-prof-img img{
    height: auto;
    width: 90%;
}    
.top-prof-box h2{
    margin: 0 0 0.5em;
}    
.top-prof-1{
    margin: 0 auto 2em;
    width: 90%;
    }    
.top-prof-2,
.top-prof-3{
    margin: auto;
    width: 90%;
    padding-left: 1em;
    }     
.shop-box h2{
    font-size: 0.9rem;
    padding: 10px 0;
    text-align: left;
}    
.shop-box{
    width: calc((100% - 40px)/2);
    margin: 10px;
}     
.fanclub-info{
    margin: auto;
    width: 80%;    
    height: auto;
}        
.fcphoto-box{
    margin: 10px;
    width: calc((100% - 40px)/2);
    aspect-ratio :1 / 1;
}     
.fcmovie-box{
    margin: 10px;
    width: 90%;
    height: auto;
    aspect-ratio :16 / 9;
}    
.fc-f h3{
    text-align: center;
    }    
.fc-content{
    width: calc((100% - 10px) / 2);
    margin-bottom: 20px;
}    
.form_enter{
    margin: 20px auto;
    width: 100%;
    height: auto;
    padding: 20px 0;
    line-height: 1.4;
    text-align: center;
}
.form-f{
    width: 90%;
    margin: 0 auto 100px;
    box-sizing: border-box;
}
.form-f textarea,
.form-f input{
    box-sizing: border-box;
}
.footer-menu-box{
    margin: auto;
    width: 95%;
    box-sizing: border-box;
}    
.footer-menu-box img{
    width: 200px;
    height: auto;
}    
#page_top{
  right: 10px;
  bottom: -30px;
  background: var(--color_w);
  opacity: 0.6;
  border-radius: 50%;
}    
.copy{
    margin: 5em auto 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    }    

}



@media (max-width: 380px) {
.fcphoto-box{
    margin: 10px;
    width: 90%;
    aspect-ratio :1 / 1;
}          
}

@media (max-width: 340px) {
 nav .inner ul li {
  width: 100%;
    }
}