/* 　　 BirderShop Fujinoアニメーション 　　 */
     #anime_top {
      animation: animation_top 4s;     /* ----scale_moveは任意に付けたアニメーションの名前と時間。----*/
      animation-timing-function: liner;
      position:absolute;
      font-size:3vw;
      top:2vw;
      left:6vw;
      z-index: 100;
  }
  
  @keyframes animation_top {
  0% {
      font-size:2vw;
      margin-top:0;
      }
  80% {
      font-size:7vw;
      margin-top:22%;
      opacity:1;
      padding:10px 0px 10px 15px;
      }
  100% {
      font-size:7vw;
      margin-top:22%;
      opacity:0;
      padding:10px 15px 10px 15px;
      }
  }
 
 #anime_top p {
     font-family:"MV Boli","Segoe Print",sans-serif;
     font-style:italic;
     color:#ffffff;
     margin:0;
     padding:0;
 }

/* ------   オープニング　アニメーション  ----- */

.browser_max {
  position: relative;
  width: 100vw;
  height:100vh;
  overflow:hidden;
    z-index: 80;
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 


/* ------   ボックス　アニメーション  ----- */
  /* --- 枠に表示するために㋐と㋑すべて必要 ---*/
.aspect_box {
  position: relative;  /* --- ㋐ ---*/
  overflow: hidden;  /* --- ㋐ ---*/
  width: 100%;
  border: 10px solid silver;
  box-shadow: 5px 5px 5px #111;
  margin-left : auto ; margin-right : auto ;
}

.aspect_box:before {
  content:"";
  display: block;
  padding-top: 66%; /* 高さを幅の60%に固定 */
}

.aspect_in {
    position: absolute;  /* --- ㋑ ---*/
    top: 0;  /* --- ㋑ ---*/
    left: 0;  /* --- ㋑ ---*/
    bottom: 0;  /* --- ㋑ ---*/
    right: 0;  /* --- ㋑ ---*/
    background-color:gray;
}

.aspect_in img {
  margin-top: 0px;
}

  /* --- imgに下記指定でもほぼ使えるが、個別画像にポジション設定できないのでボックスで囲む方が良い ---*/
.xwrapper img {
    position: absolute;  /* --- ㋑ ---*/
    top: 0;  /* --- ㋑ ---*/
    left: 0;  /* --- ㋑ ---*/
    bottom: 0;  /* --- ㋑ ---*/
    right: 0;  /* --- ㋑ ---*/
    background-color:gray;
}


/* ------   オープニング　一枚スクロール  ----- */
.anime_open_scroll {
    transform-origin: -100% -100%;
    animation: animation_scroll 10s;     /* ----任意に付けたアニメーションの名前と時間。----*/
    animation-timing-function: liner;
    z-index: 100;
    width: 100%; 
    height:auto;
    display:block;
    position:absolute;
    opacity :0;
}

/*-------
@keyframes animation_scroll {
  0% { transform:translate3d(0, 0%, 0); opacity :0; } 
  10% { transform:translate3d(0, 0%, 0); opacity :1; } 
  90% { transform:translate3d(0%, calc(-150vw + 100vh), 0);opacity :1;} 
  100% { transform:translate3d(0%, calc(-150vw + 100vh), 0);opacity :0;} 
}
------*/

/* ------   オープニング　拡大  ----- */

.anime_open_zoom {
    animation: animation_zoom 10s;     /* ----scale_moveは任意に付けたアニメーションの名前と時間。----*/
    animation-timing-function: liner;
    z-index: 100;
    height:auto;
    opacity :0;
}


/*-------
@keyframes animation_zoom {
  0% { transform:translate3d(0, 0, 0);transform:scale(1, 1);opacity :0; } 
  20% { transform:translate3d(0, 0, 0);transform:scale(1, 1);opacity :1; } 
  70% { transform:translate3d(0, 0, 0);transform:scale(4, 4);opacity :1;} 
  95% { transform:translate3d(0, 0, 0);transform:scale(4, 4);opacity :1;} 
  100% { transform:translate3d(0, 0, 0);transform:scale(4, 4);opacity :0;} 
}
------*/


/* ------   オープニング　拡大任意スクロール  ----- */


.anime_open_scrozoom {
    animation: animation_scrozoom 12s;     /* ----scale_moveは任意に付けたアニメーションの名前と時間。----*/
    animation-timing-function: ease-out;
    z-index: 100;
    height:auto;
    opacity :0;
}


/*-------
@keyframes animation_scrozoom {
  0% { transform:translate3d(0, 0, 0) scale(1, 1);opacity :0; } 
  5% { transform:translate3d(0, 0, 0) scale(1, 1);opacity :1; } 
  20% { transform:translate3d(0, 0, 0) scale(1, 1);opacity :1; } 
  30% { transform:translate3d(20vw, 60vw, 0) scale(4, 4);opacity :1;} 
  40% { transform:translate3d(20vw, 60vw, 0) scale(4, 4);opacity :1;} 
  80% { transform:translate3d(-50vw, -70vw, 0) scale(4, 4);opacity :1;} 
  97% { transform:translate3d(-50vw, -70vw, 0) scale(4, 4);opacity :1;} 
  100% { transform:translate3d(-60vw, -70vw, 0) scale(4, 4);opacity :0;} 
}
------*/


.wrapper {
    display:none;
    z-index: 50;
}

/* ------   ここまで　オープニング　アニメーション  ----- */




/* ------   縦横維持ボックス  ----- */
.aspect_keep {
    position: relative;
    border:10px solid #c0c0c0;
    width: 100%;
    box-sizing:border-box;
    overflow: hidden;
}
.aspect_keep:before {
    content:"";
    display: block;
    padding-top: 66%; /* 高さを幅の**%に固定 */
}