/* top */
main{ margin:0; padding:0; }
#mv { widht:100vw; margin:0 calc(50% - 50vw); height:calc(1688 / 3000 * 100vw); margin:0; text-align:center; background-image:url(../imgTop/mv.png); background-repeat:no-repeat; background-size: cover;}
#mv .inner { position:relative; width:100vw; height:100%; overflow:hidden; margin:0; }

#mv img:nth-child(1):not(#mv .inner div a img) { 
	position:absolute;
	left: 3%;
	top:7.5%; 
    aspect-ratio: 739 / 1207; /* 元画像の縦横比を維持 */
    width: auto; /* 親要素の幅に合わせる */
    height: 40%; /* 自動で高さを調整 */
    display: block; /* インライン要素の隙間を防ぐ */
 }
/*logo*/
#mv img:nth-child(2) {
	position:absolute;
	right:2%;
	top:6%; 
    
    aspect-ratio: 1000 / 529; /* 元画像の縦横比を維持 */
    width: auto; /* 親要素の幅に合わせる */
    height: 32%; /* 自動で高さを調整 */
    display: block; /* インライン要素の隙間を防ぐ */
 }
#mv .inner div,div.side_menu { /*background:#000;*/ position:absolute; z-index: 1;  padding:/*1em 1em 1em 1.5em !important*/0; 

    right:0%; bottom:2%;


   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 1em;   /* 内側余白 */
   /*box-shadow: 0 0 10px 1px #000, 0 0 10px 1px #000 inset;*/ /*ふわりとした影*/
   border-radius: 30px 0px 0px 30px;
   background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.9), rgba(68, 68, 68, 0.9));

   width: auto;
   max-width: 570px;
   height: 140px;
 }

div.side_menu a { text-decoration:none;display:block; height:100%; width:100%;  }

/* クラファンに切り替え  */
div.side_menu.jyunbi    { opacity:0.9; height:auto; border-radius: 15px 0px 0px 15px; padding:0; background:#fff; border-left:solid 1px #ccc; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; padding:1em 0em 1em 1em; }
div.side_menu.jyunbi:hover { opacity:0.6; cursor:pointer; }
div.side_menu.jyunbi h5 { padding:0; }
div.side_menu.jyunbi a  { color:#333;text-decoration:none; display:block; height:100%; width:100%; padding:1em; background:#fff; }
div.side_menu.jyunbi a:hover { opacity:1; }

div.side_menu.jyunbi.stripe {
  background-image: repeating-linear-gradient(315deg, #50cfaf, #50cfaf 5px, #ffffff 5px, #ffffff 20px, #ff9b2f 20px, #ff9b2f 25px, #ffffff 25px, #ffffff 40px, #ffdb53 40px, #ffdb53 45px, #ffffff 45px, #ffffff 60px, #4cb5f5 60px, #4cb5f5 65px, #ffffff 65px, #ffffff 80px);
}

/* クラファンに切り替え END */

#mv .inner div h5,div.side_menu h5 { font-size: 1.5em; color:#fff; margin:0; padding:0 0 .5em 0; /*border-bottom:solid 1px #fff; text-shadow: 0 0 8px #000; */ /*box-shadow: 0px 10px 10px -5px rgba(0,105,213,0.2);*/}
#mv .inner div a,div.side_menu a { display:block; }
#mv .inner div a img,div.side_menu a img { /*aspect-ratio: 332 / 100;*/ height:60px; width:auto; filter: brightness(0) invert(1);}



div.side_menu{
    display: /*none*/block;
    position: fixed;
    bottom: 5%;
    right: 0;
    text-align: center;
    margin: 0 0 2em 0;
}



/* 下から上に移動しながらフェードイン */
/*.top-fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}*/
/* 上から下に移動しながらフェードイン */
.top-fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* 右から左に移動しながらフェードイン */
.top-fadeInLeft {
    opacity: 0;
    transform: translateX(-100px);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* 左から右に移動しながらフェードイン 
.top-fadeInRight {
    opacity: 0;
    transform: translateX(100px);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}*/


/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}




/* カミングスーン＝＝＝＝＝＝＝＝＝ */

.comming_soon{ padding:.5em 0; font-size:4.5em; font-weight:700; text-align:center; color:#234473; }


/* Movie＝＝＝＝＝＝＝＝＝ */
#movie         { position:relative;}
#movie:before  { width:733px; height:692px; content:""; background-image:url("../../img/bg_heart.png"); background-size: cover; background-position: center; animation: fadeIn 3s forwards; display:block; top:-8em; right:1em; position:absolute; z-index:-1; }
.youtube_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
}
.youtube_wrap iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    /*max-width: 600px;*/
}


/* イラストレーター紹介＝＝＝＝＝＝＝＝＝ */
#character-design { background:#edfcff; }

.illustrator { display:flex; justify-content:space-around; }
.illustrator div    { width:50%; align-content:center;}
.illustrator div h4 { font-size:1.5em; border:none; text-align:left; margin-top:0; }


/* クラウドファンディングのお知らせ＝＝＝＝＝＝＝＝＝ */
#crowdfunding     { background-image:url("../../img/bg_01.png"); background-repeat: repeat-x; background-position:bottom;}
#crowdfunding h2  { border-bottom:double 3px #003366; padding-bottom:.5em; }
#crowdfunding img { width:100%; height:auto; }


/* X＝＝＝＝＝＝＝＝＝ */
#x_timeline       { background:#edfcff; }
.twitter-timeline { margin-top:1.5em !important; margin-left:auto; margin-right:auto; justify-content:center; align-items: center; display: flex; }





    .swiper {
      width: 100vw;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      margin-bottom: 4em;
      height: auto;
      max-height: 300px;
      padding: 50px;
      transform-style: preserve-3d;

    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      display: flex;
      /*width: 300px;
      height: 300px;*/
      height: auto;
      width: 20%;
      max-height: 300px;
      /*aspect-ratio: 4 / 3;*/ /* 元画像の縦横比を維持 */
      overflow: hidden;

      aspect-ratio: 16 / 9;

    }
    .swiper-slide a:after{ content:url("../../imgTop/mov-icon.png"); z-index:10; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .swiper-slide a:hover:after{ opacity:0.6; } 

    .swiper-slide img {
      display: block;
      width: 100%;
      height: /*100%*/auto;
      object-fit: cover;
      /*aspect-ratio: 4 / 3;*/ /* 元画像の縦横比を維持 */
    }

.modaal-close { background:#003366 !important; }
.modaal-close:after, .modaal-close:before { background:#fff !important; }
.swiper-button-next,.swiper-button-prev{ color:#003366 !important;}



/*----------------
	レスポンシブ
----------------*/
@media (max-width: 768px){
#mv .inner div { max-width:35%; width: auto; padding:.5em !important; bottom:0; margin:0; border-radius:10px 0 0 0; height:auto; }
#mv .inner div h5    { font-size: calc(100vw / 50); margin-bottom: .5em; border:none; white-space: nowrap; padding:0; }
#mv .inner div a img { aspect-ratio: 332 / 100; width:80%; height: auto; }
#mv img:nth-child(1):not(#mv .inner div a img) { height:60%; }

/* Movie＝＝＝＝＝＝＝＝＝ */
#movie:before{ width:400px; height:378px; top:-4em;}
.youtube_wrap {margin-bottom: 2em;}

/* カミングスーン＝＝＝＝＝＝＝＝＝ */
.comming_soon{ padding:1.5em 0 0 0; font-size:1.5em; }

/* イラストレーター紹介＝＝＝＝＝＝＝＝＝ */
.illustrator     { flex-direction:column; justify-content:center; }
.illustrator div h4 { font-size:1.125em; text-align:center; margin-top:1em; }
.illustrator img { width:50%; height:auto; margin:0 auto; }
.illustrator div { width:100%; }


div.side_menu {
    display: /*none*/block;
    position: fixed;
    width: 100%;
    bottom: 0;
    height: auto;
    border-radius: 0;
    margin: 0;
    max-width: unset;
    padding: 1em !important;
}

div.side_menu.jyunbi{ height:auto; border-radius: 0px; border-left:none; border-bottom:none; }
div.side_menu.jyunbi a  { padding:1em; }
div.side_menu.jyunbi h5 {font-size: 1em;}


div.side_menu h5 { font-size:1em; }


.swiper { max-height:300px; height:auto; }
.swiper-slide { width: auto; max-height:300px; display:flex; align-content:center;}
.swiper-button-next,.swiper-button-prev{display:block !important;}

.modaal-inner-wrapper { padding:0 !important; }
.modaal-video-wrap    { margin:auto 2em !important; }



}