@media screen and (min-width:821px){
  .pc_hide{
    display: none!important;
  }
}/*@media screen and (min-width:1201px){*/

@media screen and (max-width:820px){
  .sp_hide{
    display: none!important;
  }

  .container{
    max-width: 330px;
    margin:0 auto;
    padding:0 ;
  }

  main{
    padding-top: 72px;
  }


  /*
  ------------------------------------
  メインコンテンツ
  ------------------------------------
  */

  .top_mv_section{
    position: relative; 
  }

  .top_mv_section .mv_img{
    width:100%;
    max-width: 600px;
    margin:128px auto 0;
    animation-delay:0.6s;
  }

  .top_mv_section .text_area{
    position: static;
    width:300px;
    max-width: 100%;
    margin:auto;
    padding:0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  } 


  .top_mv_section .text_area .site_logo{
    width:60px;
    margin-left: 0;
    animation-delay:0.2s;
  }

  .top_mv_section .text_area .mv_text{
    width:115px;
    animation-delay:0.4s;
  }


  .top_section01{
    position: relative;
    padding-top: 132px;
    overflow: hidden;
  }

  .top_section01 .container{
    width: 100%;
    max-width: 100%;
  }

  .top_section01 .bg{
    position: absolute;
    width:300px;
    z-index: -1;
    top:220px;
    right:calc(50% - 50px);
  }

  .top_section01 .flex{
    max-width: 300px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }

  .top_section01 .flex .left{
    line-height: 2.53;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .top_section01 .flex .right{
    width:100%;
    margin-top: 100px;
    animation-delay: 0.2s;
  }

  .top_section01 .img_area{
    max-width: 600px;
    margin:175px auto 0;
  }

  .top_section01 .img_area .sec01_img02{
    width:264px;
  }

  .top_section01 .img_area .sec01_img03{
    width:208px;
    margin-left: auto;
    margin-right: 33px;
    margin-top: 132px;
    animation-delay: 0.2s;
  }

  .top_episode_section{
    padding-top: 200px;
    padding-bottom: 190px;
  }

  .top_episode_section .flex{
    width: 88%;
    max-width: 600px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }

  .top_episode_section .flex .left{
    width:100%;
    margin-left: 0;
    margin-left: 0;
    flex-shrink: 0;
  }

  .top_episode_section .flex .episode_title{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top_episode_section .flex .episode_title img{
    height:19px;
  }

  .top_episode_section .flex .episode_sign01{
    width:124px;
    margin: 10px auto 0;
  }

  .top_episode_section .flex .episode_text{
    margin-top: 48px;
    font-size: 14px;
    line-height: 2.8;
    letter-spacing: 0.08em;
    animation-delay: 0.2s;
    text-align: center;
  }

  .top_episode_section .flex .right{
    width:100%;
    margin-top: 40px;
    animation-delay: 0.4s;
  }

  .top_episode_section .flex .right img{
    width:100%;
  }

  .anime_para_box01{
    /* height:486px; */
    height:400px;
    width: 100%;
  }

  .anime_para_box01 img{
    /* width:245%; */
    width:280%;
    left:-120%;
  }


  .top_story_section{
    padding-top: 152px;
  
  }

  .top_story_section .story_area{
    position: relative;
    max-width: 310px;
    margin:0 auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }


  .top_story_section .story_img_area{
    width:100%;
    position: sticky;
    top:0;
    left:0;
    display: none;
  }

  .top_story_section .story_img_area_inner{
    position: relative;
    height:0;
    min-height:100vh ;
  }


  .top_story_section .thumb_name{
    font-size: 14px;
    line-height:1;
    margin-top: 24px;
  }

  .top_story_section .thumb_name::before{
    width:72px;
  }

  .top_story_section .story_text_area{
    width:100%;
  }

  .top_story_section .story_text_item{
    padding: 0;
    min-height: auto;
    margin-top: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
  }

  /* .top_story_section .story_text_item::before{
    content:'';
    width:99vw;
    height:100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index:11;
    opacity: 0.7;
  } */

  .top_story_section .story_text_item:first-child{
    /* margin-top: 200px; */
    /* margin-top: 0; */
  }

  .top_story_section .story_text_item_inner{
    position: relative;
    z-index: 12;
  }

  .top_story_section .story_num{
    font-size: 14px;
    line-height:1;
    margin-top: 28px;
  }

  .top_story_section .story_title{
    font-size: 20px;
    line-height: 1.3;
    margin-top: 6px;
  }

  .top_story_section .story_text{
    margin-top: 32px;
    font-size: 14px;
    line-height: 2.5;
  }

  .top_product_section{
    /* padding-top: 350px; */
    padding-top: 80px;
    padding-bottom: 210px;
  }


  .top_product_section .product_list{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 64px;
    
  }

  .top_product_section .product_item{
    width:270px;
    margin-right:0;
    margin-top: 172px;
  }

  .top_product_section .product_item:first-child{
    margin-top: 0;
  }

  .top_product_section .product_item:nth-child(2){
    animation-delay: 0;
  }
  .top_product_section .product_item:nth-child(3){
    animation-delay: 0;
  }

  .top_product_section .product_item:nth-child(3n){
    margin-right: 0;
  }

  .top_product_section .product_item .product_up{
    width: 100%;
  }

  .top_product_section .product_item .product_down{
    width: 100%;
    padding-top: 32px;
  }

  .top_product_section .product_item .product_img{
    aspect-ratio: 1/1.28;
  }

  .top_product_section .product_item .product_text {
    margin-top:16px;
}

  .top_product_section .online_link{
    width:325px;
    height: 74px;
    margin:56px auto 0;

  }


  .top_bag_section{

  }

  .top_bag_section .anime_para_box02{
    
  }

  .top_bag_section .bag_contents{
    padding:180px 0;
    color:#fff;
  }

  .top_bag_section .bag_text{
    margin-top: 40px;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 2.5;
    text-align: center;
  }


  .top_movie_section{
    padding-top: 100px;
    padding-bottom: 205px;
    position: relative;
    overflow: hidden;
  }

  .top_movie_section .container{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    max-width: none;
  }

  .top_movie_section .movie_play{
    width: 87%;
    max-width: 600px;
    margin:40px auto 0;
  }

  
  .top_movie_section .movie_frame{
    position: relative;
    aspect-ratio: 1/0.5625;
  }

  .top_movie_section .movie_start{
    width: 84px;
    height: 84px;
    font-size: 14px;
  }

  .top_movie_section .movie_play img{
    width:100%;
  }

  .top_movie_section .bg{
    position: absolute;
    z-index: -1;
    width:300px;
    bottom:64px;
    left:calc(50% - 16px);
  }


  .top_news_section{
    background-image: url('../img/news_bg_sp.jpg');
  }

  .top_news_section .news_area{
    display: block;
    /* padding:40px 0; */
    padding:calc(40 / 375 * 100vw) 0;
    padding-bottom: calc(18 / 375 * 100vw);
    min-height: auto;
  }

  .top_news_section .news_box{
    width:300px;
    padding:5px;
    margin-top: 272px;
    margin-top: calc(284 / 375 * 100vw);
    margin-inline: auto;
  }

  .top_news_section .news_inner{
    min-height: 116px;
    padding:12px 8px;
  }

  .top_news_section .news_head{
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    
  }

  .top_news_section .news_text{
    margin-top: 6px;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6;
  }

  .top_news_section .news_logo_list{
      position: static;
      transform: translateY(0);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap:24px;
  }

  .top_news_section .news_logo01{
    width:160px;
    order: 1;
  }

  .top_news_section .news_logo02{
    width:70px;
    order: 0;
  }


  .top_shop_section{
    padding:56px 0 120px;
    background-color: #F5F5F5;
  }

  .top_shop_section .shop_list{
    width: 85%;
    max-width: 550px;
    display: flex;
    justify-content: space-between;
    margin: 64px auto 0;
    gap:64px 0;
  }

  @media screen and (max-width:600px){
    .top_shop_section .shop_list{
      width: 100%;
      flex-direction: column;
      align-items: center;
    }
  }

  .top_shop_section .shop_item{
    /* width:170px; */
    margin-right: 0;

  }


  .top_shop_section .shop_item .shop_name{
    font-size: 17px;
  }

  .top_shop_section .shop_item .shop_name::before{
    width:8px;
    height:8px;
    margin-right: 8px;
    margin-top: 8px;
  }


  .top_shop_section .shop_item .shop_name span{
    font-size: 11px;
    left:16px;
    top:26px;
  }
  .top_shop_section .shop_item .shop_adress{
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.3;
  }

  .top_shop_section .shop_item .shop_tel{
    margin-top: 6px;
  }

  .top_shop_section .shop_item .shop_tel a{
    font-size: 14px;
    line-height: 1.1;
    
  }

  .top_shop_section .shop_item .shop_link{
    margin-top: 16px;
    width: 100%;
    height:36px;
    border-radius: 8px;
  }



  /*
  ------------------------------------
  フッター
  ------------------------------------
  */

  footer{
    position: relative;
    background-image: url('../img/footer_bg_sp.jpg');

  }

  footer .page_top{
    position: absolute;
    z-index: 20;
    cursor: pointer;
    top:40px;
    right:min(calc(30 / 375 * 100vw) , calc(30 / 375 * 1440px));
  }

  footer .footer_inner{
    width: 90%;
    max-width:600px;
    margin:0 auto;
    z-index: 2;
    padding:148px 0 12px;
  }


  footer .other_contact_link{
    display: block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    position: static;
    margin:24px auto 0;
  }

  footer .contact_link{
    margin:24px auto 0;
    width: 70px;
    height:70px;
  }

  footer .contact_link::after{
    width:25px;
    height:20px;
  }


  footer .company_area{
    position: static;
    margin-top: 52px;
  }

  footer .company_area .button{
    margin: 0 auto;
  }


  footer .company_area .youtube{
    margin: 12px auto 0;
  }


  footer .company_area .title_andex{
    width:72px;
    margin-top: 64px;
  }

  footer .company_area .company_adress{
    font-size: 12px;
    line-height: 1.4;
    color:#fff;
    margin-top: 8px;
  }

  footer .copy{
    margin-top: 6px;
    font-size: 11px;
    position: static;
  }



}/*@media screen and (max-width:820px){*/