picture img{
    width: 100% ;
    height: 100% ;
}

.modal-nenpyo{
    display: none;
  
    width: 100%;
    height: calc(100vh - 60px);
    margin: 0 auto;
    overflow-y: scroll;
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
}

.mb-middle-light{
    margin-bottom: 30px;
}

.font-1-4{
    font-size: 9px;
}

.modal-nenpyo::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}

[class*="imgModal"][class*="__contents"] img {
    height: auto;
    max-height: 225vh;
    overflow-y: scroll;
}

.button-wrapper {
    display: flex;
    justify-content: space-between ;
    width: 620px;
    margin: 0 auto; 
}

.button-wrapper .wrapper-fun-link{
    width: 300px ;
}
.l-Container_2 .button-underline {
    border-bottom: 1px solid #190505;
    width: 620px;
    margin: 0 auto -10px ; 
    line-height: 28px;
    font-size: 14px;
}

.p-store--hero-gaim{
    position: relative;
    z-index: 2;
    margin-bottom: -3px ;
}

.p-store--hero-gaim-2{
    position: relative;
    z-index: 2;
    margin-bottom: -3px ;
    box-shadow: 0px 10px 20px #00000033;
}

.p-Thumbnail__text h4{
    font-family: "-apple-system","BlinkMacSystemFont","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;

}

.white-box{
    margin-top: 48px ;
    margin-bottom: 23px ; 
}

.box-title{
    background-color: #fff;
    padding: 10px ;
}

.red-box{
    background-color: #F5E9D6;
    text-align: center;
    padding: 20px ;
    line-height: 30px ;
    font-weight: bold ;
    font-size: 20px ;
    color: #190505;
}


.l-Main__outer-01{
    background: url("/gaimu2020/images/fes_main-bg_pc-min.jpg");
    padding-top: 70px ;
    background-repeat: repeat;
    background-size: auto 30% ;
    background-size: contain;
}

.brown{
    color: #9B6648;
}
.dark-green{
    color: #509F6A ;
}


.l-Container_3  .gaimu-content-wrapper .wrapper-figure-col3 .white-box2 {
    background-color: rgba(255, 255, 255, .6);
    padding: 20px ;
    width: 470px ;
    max-width: 100%;
}


.title-center{
    font-size: 30px ;
    line-height: 40px ;
    font-weight: bold;
    text-align: center;
    color: #fff;
}


.l-Container_2{
    width: 960px ;
    max-width: 100%;
    margin: 0 auto ;
    padding-bottom: 100px ;
}

.l-Container_2 .mb-middle a{
    display: block ;
}

.l-Container_2 .mb-middle-light a{
    display: block ;
}



.l-Container_3{
    width: 960px ;
    max-width: 100%;
    margin: 0 auto ;
}

.l-Container_3 .wrapper-figure-col3 {
    position: relative;
}


.l-Container_3 .wrapper-figure-col3 div{
    width: 150px ;
}


.l-Container_3 .wrapper-figure-col3 figure span{
    position: absolute;
    bottom: 35px;
    left: 0;
    
}



.figure-02 img{
    
    max-width: 100%;

}


.youtube{
    width: 740px ;
    margin: 0 auto;
    max-width: 100%;
}

.youtube-4{
    width: 740px ;
    max-width: 100%;
    margin: 0 auto;
    max-width: 100%;
}

.youtube-4 iframe{
    width: 100%;
    height: 403px;
}


.l-Container_2 .banner-wrapper,
.l-Container_3 .banner-wrapper
{
    position:relative;
    width:100%;
    height:0;
    padding-top:56.25%;
    margin: 24px auto 40px ;
}

.l-Container_2 .banner-wrapper iframe,
.l-Container_3 .banner-wrapper iframe
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.height-banner{
    height: 200px ;
    width: 960px ;
    max-width: 100%;
    margin-top: -10px;
    margin-bottom: -20px ;
    display: block;
}



.white-box-wrapper{
    margin: 40px auto  28px ;
    width: 740px ;
    max-width: 100% ;
}

.white-box-wrapper .box-title{
 color: #EB6000;
 font-weight: bold;
 font-size: 30px ;
 text-align: center;
}

.white-box-wrapper .box-title p{
    text-align: center;
    line-height: 30px ;
    font-size: 20px ;
}


.figure-01{
    width: 520px ;
    max-width: 100%;
    margin: -34px 0 0 0  ;
}

.figure-01 span{
    color: #454444 ;
    font-size: 16px ;
    line-height: 24px;
}

.announce{
    background: url("/gaimu2020/images/news_bg.jpg");
    padding: 70px 0 ;
    margin-top: -3px;
}

.bg-01{
    background: url("/gaimu2020/images/news_bg.jpg");
    margin: 0;
    padding: 40px  0 ;
}


.l-Container_2 figure img{
    width: 960px ;
    max-width: 100%;
}

.l-Container_2 p{
    color: #190505;
    text-align: center;
    font-size: 16px ;
    font-weight: 700;
}

.imgModal--0__contents img{
    width: auto;
}


.desc-wrapper{
    margin: 30px auto ;
}
.mb-middle{
    margin-bottom: 45px ;
}

.desc-wrapper p{
    line-height: 28px ;
    color: #190505;
}

.cast-style p{
    line-height: 28px ;
    font-size: 14px ;
    text-align: left;
}

.white-box-2{
    background-color: rgba(255, 255, 255, .6);
    padding: 20px ;
    width: 470px ;
    max-width: 100%;
}




.News{
    width: 100%;;
}

.News .News__InnerBlock{
    justify-content: flex-start!important;
}

.News .News__InnerBlock article:nth-child(3n-1),
.News .News__InnerBlock article:nth-child(3n){
    margin-left: 7px;
}

.wrapper-fun-link{
  display: inline-block;
    margin: 30px 0;
    width: 100% ;
}



.wrapper-fun-link .fun-link{
    color:#EB6000 ;
    padding: 21px 54px 21px 24px ;
    background-color: #FFFFFF;
    padding: 21px ;
    text-align: center;
    box-shadow: 0 5px #EB6000 ;
    width: 390px ;
    max-width: 100%;
    height: 58px ;
    margin: 0 auto ;
    display: block;
    font-weight: bold ;
    position: relative;
}

.wrapper-fun-link .fun-link-02{
    color: #FFFFFF ;
    padding: 21px 54px 21px 24px ;
    background-color: #EB6000  ;
    padding: 21px ;
    text-align: center;
    box-shadow: 0 5px #001634 ;
    width: 390px ;
    max-width: 100%;
    height: 58px ;
    margin: 0 auto ;
    display: block;
    font-weight: bold ;
    position: relative;
}

.wrapper-fun-link .fun-link .right-arrow{
    width: 20px ;
    height: 12px ;
    position: absolute;
    top: 38%;
    right: 15px ;
}

.wrapper-fun-link .fun-link-02 .right-arrow{
    width: 20px ;
    height: 12px ;
    position: absolute;
    top: 38%;
    right: 15px ;
}

.button-wrapper .wrapper-fun-link .fun-link{
    color:#EB6000 ;
    padding: 21px 54px 21px 24px ;
    background-color: #FFFFFF;
    padding: 21px ;
    text-align: left;
    box-shadow: 0 5px #EB6000 ;
    width: 390px ;
    max-width: 100%;
    height: 58px ;
    margin: 0 auto ;
    display: block;
    font-weight: bold ;
    position: relative;
    font-size: 16px;
}



.wrapper-figure-col2 .fun-link{
    color:#EB6000 ;
    padding: 21px 54px 21px 24px ;
    background-color: #FFFFFF;
    padding: 21px ;
    text-align: center;
    box-shadow: 0 5px #EB6000 ;
    width: 390px ;
    max-width: 100%;
    height: 58px ;
    margin: 0 auto ;
    display: block;
    font-weight: bold;
    position: relative;
}



.fun-link-description{
    font-size: 16px;
    font-weight: bold ;
    line-height: 28px ;
    margin-top: 30px  ;
    margin-bottom: 30px  ;
    color: #190505;
}


.wrapper-figure-col2{
    display: flex;
    margin-top: 30px ;
    margin-bottom: 30px ;
}

.wrapper-figure-col3{
    display: flex;
    justify-content: space-between;
    margin-top: 30px ;
}

.mt-0{
    margin-top: 0 ;
}

.mt-10{
    margin-top: 10px ;
    margin-bottom: 0 ;
}

.wrapper-figure-col3 .figure-02 { 
    width: 330px ;
    
    margin: 0 auto -3px;
}
.l-Container_3 .wrapper-figure-col3 .nenpyou{
    width:351px ;
    height: 187px ;
    max-width: 100%;
    border-bottom: 3px solid #000;
    overflow: hidden;
}

.wrapper-figure-col3 .figure-02 img { 
    box-shadow: 0px 0px 20px #00000033;
}

.mt-middle{
    margin-top: 40px;
}

.wrap{
    flex-wrap: wrap;
    justify-content: flex-start;
}

.wrap div{
    margin-right: 10px ;
    margin-bottom: 10px ;
}

.col-1-mt{
    margin-top: 30px ;
}

.wrapper-figure-col2 .ml-middle{
    margin-left: 50px ;
}

.wrapper-figure-col2 .mr-middle{
    margin-right: 50px ;
}

.wrapper-figure-col2:nth-child(2n){
    flex-direction: row-reverse;
}

.wrapper-figure-col2 div{
    width: 400px ;
    max-width: 100%;
}

/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.gaim-title{
    width: 960px ;
    max-width: 100%;
    margin: 0 auto 25px;
}

.gaim-title  .title-img-wrapper{
    width: 960px ;
    max-width: 100%;
    margin: 0 ;
}

.l-Main__outer-01-inner figure{
    width: 960px ;
    max-width: 100%;
}

.announce-title{
    margin: 0 auto 24px ;
    width: 960px ;
    max-width: 100%;
}

.wrapper-figure-col2 .fun-link img{
    width: 21px ;
    height: 12px ;
    position: absolute;
    
    top: 40% ;
    right: 20px ;
}



/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
    display: flex;
}

.card-title-wrapper{
    width: 50% ;
    padding: 5px 10px ;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.announce .card-figure {
    margin: 0;
    padding: 0;
    width: 50%;
    display: block;
   overflow: hidden ;
}

.card-figure img{
    
}

.banner-section{
    background: url("/gaimu2020/images/_banner_bg.gif");
    padding-top: 30px ;
    padding-bottom: 30px ;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
   font-weight: bold;
    font-size: 11px;
    margin-bottom: 10px ;
}

.published{
    color: #EB6000;
}
/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin-bottom: 5px ;
    
    color: #818181;
}

.only-sp{
 display: none;
}
.only-pc{
    display:  block;
}

.title-number{
    text-align: center;
    color: #EB6000;
    font-weight: bold ;
}
.m-middle{
    margin-bottom: 30px ;
    margin-top: 30px;
    line-height: 28px ;
}



.l-Container_3 .story-desc{
    margin : 20px auto ;
}

.gaimu-content-wrapper{
    margin-top: 30px ;
    margin-bottom: 60px ;
}

.l-Container_3 .story-desc p{
    font-size: 14px;
    line-height: 28px ;
    text-align: center;
    font-weight: bold;
}

.bg-white{
    z-index: 0;
    position: relative;
    padding-top: 100px ;
    padding-bottom: 80px ;
}
.bg-white:after{
    position: absolute;
    content: "";
    top: 0;
    left :0 ;
    z-index: -1;
    background: url("../images/spin-off_bg_pc-min.jpg");
    
    background-repeat: no-repeat; 
    background-size: cover;
    
    width:100%;
    height: 100%;
}



.mt-none{
    margin-top: 0 ;
}

.bg-dark-blue{
    background-color: #001634;
    width: 100%;
    height: auto ;
    padding: 80px 0  100px ;
}

.card-list-wrapper{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 10px auto;
    padding: 0;
    width: 96%;
    border: 1px solid rgba(0, 41, 97, .4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(96% / 2); /* 96%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(96% / 3); /* 96%幅を3で割るという指定 */
}
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}
.banner-section .card-list-wrapper .card-list .card-link .card-figure{
    margin: 0 ;
}

.banner-section .card-list-wrapper .card-list .card-link .card-figure img{
        width: 100%;
}

.wrapper-figure-col2 .col-1 img{
    width: 400px ;
    max-width: 100%;
    height: 260px ;
    display: block;
}

.icon-wrapper{
    margin: 0 auto ;
    
    position: relative;
}

.icon-wrapper img{
   position: absolute;
    width: 96px ;
    height: 82px ;
    top: -120px ;
    
    left: 47%;
}

.green figure{
    /* background-color: #333; */
    height: auto;
    width: 100%;
    margin: 0 ;
    
}

.green{
    background: url("/gaimu2020/images/helheim_bg_pc.png");
    background-size: cover;
    height: 100px ;
    box-shadow:0px 2px 30px 10px rgb(0 0 0 / 75%) inset;

}


.ori_video{
    width:100%;
    
}
.ori_float_l{
    float:left;
}
@media screen and (max-width:640px){
    .ori_video{
        width:100%;
        padding-bottom:56.25%;
        height:0px;
        position:relative;
    }
    .ori_video iframe{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .ori_float_l{
        float:none;
    }
}




@media screen and (max-width: 768px) {
    .fv{
        background: url("/gaimu2020/images/main_img-sp.png");
        background-size: cover;
        background-position: 30% 0;
    }

    .figure-01{
        width: 100% ;
        height: 105px ;
        margin-top: 5px ;
    }

    .figure-01 img{
        width: 250px ;
        display: block;
        margin-right: auto;
    }

    .bg-dark-blue{
        padding: 50px 20px  ;
    }

    .desc-wrapper{
        margin: -20px auto ;
    }

    .cast-style{
        margin-bottom: 10px ;
    }

    .l-Container_3 .story-desc{
        margin: 15px auto ;
    }

    .bg-white{
        padding-top: 50px ;
        padding-bottom: 50px ;
    }

    .bg-white-inner  .wrapper-figure-col3{
        display: block;
    }

    .bg-01 .l-Container_3 .wrapper-figure-col3{
        display: block;
    }
    .bg-01{
        
        padding: 40px 20px ;
    }

    .gaimu-content-wrapper{
        margin-top: 20px ;
        margin-bottom: 40px ;
        padding-left: 20px ;
        padding-right: 20px ;
    }


    .l-Container_3 .wrapper-figure-col3 div{
        width: 48%;
    }

    .announce{
        padding: 40px 0 35px ;
        
    }
    .announce-inner{
        padding-left: 20px;
        padding-right: 20px ;
    }

    .l-Container_2  p{
        font-size: 14px ;
        line-height: 24px ;
        padding-bottom: 0;
    }

    .l-Container_2{
        
        padding-bottom: 50px ;
    }

    .l-Container_2 {
    padding-bottom: 30px ;
    }

    .l-Container_2 p{
  
    font-size: 13px;
    }

    .l-Main__outer-01{
        padding-top: 40px ;
    }
    .l-Main__outer-01 figure {
        /* margin: 0 auto ;
        width: 960px ;
        max-width: 100%; */
        display: block;
    }
    .l-Main__outer-01-inner{
        padding-left: 20px;
        padding-right: 20px;
    }

    .banner-section{
        padding: 20px ;
    }

    .wrapper-figure-col2 .mr-middle{
        margin: 0 ;
        text-align: center;
    }

    .wrapper-figure-col2 .ml-middle{
        margin: 0 ;
        text-align: center;
    }

    .gaim-title{
        margin-bottom: -10px ;
    }
   

    .white-box{
        margin-top: 20px ;
        margin-bottom: 20px ;
    }

    .white-box-wrapper{
        margin-top: 20px ;
        margin-bottom: 20px ;
    }

    .wrapper-fun-link{
        margin: 20px 0 ;
    }
    .wrapper-fun-link .fun-link{
        text-align: center;
        padding: 17px 25px ;
        line-height: 21px ;
        height: auto;
    }

    .announce-title{
        margin-bottom: 20px ;
    }

    .wrapper-figure-col2{
        display: block;
        margin-bottom: 40px ;
    }

    .wrapper-figure-col2 .col-1 img{
        height: auto;
    }
    .fun-link-description{
        margin-top: 20px ;
        margin-bottom: 20px ;
        font-size: 14px;
        line-height: 24px ;
    }

    .height-banner{
        margin-bottom: -10px  ;
        margin-top: 20px ;
        
    }

    .m-middle{
        margin-bottom: 30px ;
        margin-top: 30px;
    }

    .green{
        height: 60px ;
        box-shadow: 0px 0px 10px 6px rgb(0 0 0 / 55%) inset ;
    }

    .p-store--hero-gaim{
        margin-top: 50px ;
       
    }

    .l-Main__outer-01{
        background: url("/gaimu2020/images/fes_main-bg_sp-min.jpg");
        background-size: contain;
    }

    .red-box{
        font-size: 16px ;
    }

    .white-box-wrapper .box-title{
        font-size: 22px;
       }

    .only-sp{
        display: block;
    }
    .only-pc{
        display:  none;
    }

    .p-store--hero-gaim-2{
        margin-top: 55px ;
    }

    .card-list-wrapper .card-link{
        margin: 0 ;
    }

    .card-list-wrapper .card-link .card-figure{
        width: 100%;
    }

    .card-list-wrapper  .card-list{
        width: 100%;
        margin: 10px 0 ;
    }

    .mt-none{
        margin-top: -15px  ;
    }

    .title-center{
        font-size: 20px ;
        line-height: 25px;
    }

    .l-Container_3 .wrapper-figure-col3 {
        position: static;
    }

    .l-Container_3 .wrapper-figure-col3 figure span{
        position: static;
        margin: 20px 0 ;
        display: block;
        font-size: 14px;
        line-height: 21px ;
    }

    .wrapper-figure-col3 .figure-02{
        width: 94%;
        margin: 90px auto 0; 
    }

    .icon-wrapper img{
        top: -70px ;
        left: 43%;
        width: 70px ;
        height:60px 
    }

    .l-Container_2 .banner-wrapper, .l-Container_3 .banner-wrapper{
        margin: 24px auto 10px ;
    }

    .wrap div:nth-of-type(2n){
        margin-right: 0 ;
    }

    .cast-style p{
        line-height: 24px ;
    }

    .l-Container_3 .story-desc p{
        line-height: 24px ;
    }

    .News .News__InnerBlock{
        justify-content: center!important;
    }

    .News .News__InnerBlock article:nth-child(3n-1),
    .News .News__InnerBlock article:nth-child(3n){
        margin-left: 0;
    }

    .mb-middle{
        margin-bottom: 20px;
        margin-top: 20px;
        
  
    }
    .mb-middle-light{
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .bg-white:after{
        background: url("../images/spin-off_bg_sp-min.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .l-Container_3 .wrapper-figure-col3 .nenpyou{
        position: relative;
        height: 252px ;
    }

    .modal-nenpyo{
        display: none;
        overflow-y: scroll;
        width: 60%;
        height: calc(90vh - 180px);
        margin: 0 auto;
    }
    
    .modal-nenpyo img {
        height: auto !important;
        max-height: 225vh !important;
    }

    .l-Container_3 .wrapper-figure-col3 .nenpyou{
        width: 100%;
    }

    [class*="imgModal"][class*="__contents"] {
        max-width: 100%;
        width: 100%;
        pointer-events: none;
    }

    [class*="imgModal"][class*="__contents"] >* {
        pointer-events: all;
    }

    [class*="imgModal--0"][class*="__contents"]::after {
        top: -10px;
        right: 45px !important;
        transform: translateY(-100%);
    }

    .l-Container_2 .button-underline {
        border-bottom: 1px solid #190505;
        width: 620px;
        max-width: 100%;
        margin-top: 40px ;
        margin-bottom: 10px ;
        text-align: center;
        line-height: 28px;
        font-size: 14px;
        padding-bottom: 0 ;
    }

    .button-wrapper{
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .button-wrapper .wrapper-fun-link {
        width: 100%;
        margin: 10px auto ;
    }

    .button-wrapper .wrapper-fun-link .fun-link{
        color:#EB6000 ;
        padding: 21px 54px 21px 24px ;
        background-color: #FFFFFF;
        padding: 21px ;
        text-align: center;
        box-shadow: 0 5px #EB6000 ;
        width: 390px ;
        max-width: 100%;
        height: 58px ;
        margin: 0 auto ;
        display: block;
        font-weight: bold ;
        position: relative;
        font-size: 16px;
    }

    .sp-margin-adjust{
        margin-bottom: 20px;
        margin-top: -10px;
    }
    

 
}
