@charset "UTF-8";
/* CSS Document */

/* ========================= [ base ] */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0 auto;
padding: 0;
overflow-x: hidden;
overflow: visible;
}

ul,
ol,
dl {
list-style: none;
}

img {
vertical-align:top;
}

body {
text-align: center;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
-webkit-text-size-adjust:100%;
overflow-x: hidden;
}


a,a:hover,a:visited{
    color: inherit;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

@media screen and (max-width:768px){
    a:hover {
        opacity: 1.0;
    }
}


button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

*,
::before,
::after {
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
box-sizing: inherit;
}

::before,
::after {
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
vertical-align: inherit;
}

* {
padding: 0; /* Reset `padding` and `margin` of all elements */
margin: 0;
}


@media (min-width: 600px) {



.invisible-pc {
display: none;
}



#dmm_ntgnavi {
    background: url(../images/bg_navimain.gif) center center repeat-x #FFFFFF;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-size: 12px;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
    display: flex;
    justify-content: space-between;
}

#dmm_ntgnavi ul {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: flex;
    width: 50%;
}

#dmm_ntgnavi ul li {
    margin: 0 6px 0 0;
    line-height: 15px;
}

#dmm_ntgnavi .navi_left li > a {
    display: block;
    padding: 0 3px 0 8px;
    text-decoration: none;
    border: 1px solid #eee;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a:hover {
    background: #eee;
    border: 1px solid #666;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a span {
    display: block;
    padding: 9px 10px 7px 28px;
    color: #333;
    font-weight: bold;
}

#dmm_ntgnavi .navi_left li.dmm_top img {
    margin: 8px 5px 8px 0
}

#dmm_ntgnavi .navi_left li.ntg_top {
    margin-left: 10px;
}

#dmm_ntgnavi .navi_left li.ntg_top span {
    background: url(../images/bg_bt_olgtop.gif) 0 center no-repeat;
}

#dmm_ntgnavi .navi_right {
    justify-content: flex-end;
    font-size: 10px;
}

#dmm_ntgnavi .navi_right li {
    margin: 0 10px 0 0;
    padding: 8px 5px;
}

#dmm_ntgnavi .arrow {
    padding-left: 14px;
    background: url(../images/arrow_common.gif) no-repeat left center;
}

#dmm_ntgnavi .tx-point {
    font-size: 16px;
    font-weight: bold;
    color: #ff4b4b !important;
}

#dmm_ntgnavi p {
    margin: 0;
    line-height: 2.6em;
}

#dmm_ntgnavi .clear {
    clear: both;
}



/*bgvideo*/
.bg_media {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-2;
    text-align: center;
    background-size: cover;
    object-fit: cover;
    overflow: hidden;
    opacity:0.5;
    background: #FFFFFF;
    }
        
    
    
    .bg_media video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        -o-object-fit: cover;
        object-fit: cover;
        opacity:0.8;
        background: #FFFFFF;
    }



header {
    margin: 0 auto 0 auto;
    padding-bottom: 9px;
    position: fixed;
    top: 0px;
    height: auto;
    width: 100%;
    background: url("../images/images_bishojyo10ren_pc/navi-btn_bg.webp") no-repeat center;
    background-size: cover;
    color: #fff;
    text-align: center;
    z-index: 100;
    display: block;
    transition: .3s;
    transform: translateY(-100%); /* ヘッダーを初めは隠す */
}

header.slideDown {
    transform: translateY(0); /* スライドダウンエフェクト */
    transition: 0.5s; /* トランジションの時間を指定 */
}
    
#header_box {
    margin:0px auto 0px auto;
    max-width:1325px;
    width: 100%;
    overflow: hidden;
}
    
nav ul {
    margin:0px auto 0px auto;
    justify-content: center;
    display: flex;
}
    
nav li{
    width: 14%;
    margin:5px 0px 0px 5px;
    color:#FFFFFF;
    display:inline-block;
}	

nav li img {
    width: 100%;
}

            
@keyframes slideIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}	


#fv {
    background: url(../images/images_bishojyo10ren_pc/coming-soon_bg.webp) no-repeat center;
    background-size: cover;
    margin: 0 auto 0 auto;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; /* ファーストビューのz-indexを低く設定 */
	overflow:hidden;
    }

#fv .title {
    background: url(../images/images_bishojyo10ren_pc/coming-soon_image01.webp)  no-repeat center;
    background-size: 1500px 881px;
    margin: -55px auto 0px auto;
    height: 800px;
    position: relative;
    z-index: 1; /* ファーストビューのz-indexを低く設定 */
	
}

#fv .title .capt01 {
    position: relative;
    margin: 0px auto 0px auto;
    top: 480px;
    opacity: 0;
    animation: fadeIn 3s forwards;
}    

#fv .title .button-image {
    position: absolute;
    bottom: 20px; /* 親要素の下から20pxの位置に配置 */
    left: 20px;   /* 親要素の左から20pxの位置に配置 */
    width: 248px; /* ボタンの幅 */
    height: 156px; /* 比率を保持しつつ高さを自動調整 */
    opacity: 0; /* 初期状態で非表示 */
    animation: fadeIn 3s forwards, floatUpDown 4s ease-in-out infinite alternate;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px); /* 上下に20px動く */
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    50%{ opacity: 0; }
    100% { opacity: 1; }
}


#campaign {
    margin: 0 auto 0 auto;
    width: 100%;
    height: auto;
}

#campaign .title {
    width: 100%;
    height: 170px;
    background: url(../images/images_bishojyo10ren_pc/campaign_bg.webp) no-repeat center;
    background-size: cover;
}

#campaign .title .capt01 {
    margin: 15px auto 0px auto ;
}

#campaign .detail {
    width: 100%;
    height: 1340px;
    background: url(../images/images_bishojyo10ren_pc/campaign_bgframe2.webp) no-repeat center;
    margin: 20px auto 20px auto;
    position: relative;
    z-index: 2; /* キャンペーンの詳細部分を前面に */
}

#campaign .detail .capt01 {
    margin: 42px auto 0px auto;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
}

#campaign .detail .capt02 {
    margin: 70px auto 0px auto;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
}

#campaign .coupon-box {
    width: 850px;
    display: flex;
    flex-wrap: wrap; /* 複数行に表示 */
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* 各クーポン画像間のスペース */
    margin: 40px auto;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
}

#campaign .coupon-box p {
    width: 45%; /* 各クーポン画像の幅を設定 */
    margin: 0; /* 不要なマージンをリセット */
}


#campaign .detail .capt05 {
    margin: 5px auto 5px auto;
    position: relative;
    z-index: 3;
}

#campaign .detail .capt06 {
    margin: 40px auto 0px auto;
    position: relative;
    z-index: 3;
}



#incentive {
    background: url(../images/images_bishojyo10ren_pc/gameplay_bg.webp) no-repeat center;
    background-size: cover;
    margin: 0px auto 0px auto;
    width: 100%;
    height: 870px;
}

#incentive .title .capt01{
    margin: 25px auto 0px auto ;
}

#incentive .detail {
    background: url(../images/images_bishojyo10ren_pc/gameplay_bgframe.webp) no-repeat center;
    margin: 0px auto 0px auto;
    width: 100%;
    height: auto;
}

#incentive .detail .info {
    position: relative;
    width: 1000px;
    height: 800PX;
    top: 120px;
    margin: -100px auto 20px auto;
}

#incentive .detail .info .info-left {
    width: 474px;
    height: auto;
    float: left;
    margin-left: 20PX;
}

#incentive .detail .info .info-right {
    width: 474px;
    height: auto;
    float: left;
    margin-left: 10PX;
}


#incentive .detail .btn-group .btn-row {
    margin: 15px -5px 0px -5px; 
}

#incentive .detail .info-left .btn01 {
    margin-right: 10px;
}

#incentive .detail .info-left .btn02 {
    margin-left: 10px;
}

#incentive .detail .info-right .btn01 {
    margin-right: 10px;
}

#incentive .detail .info-right .btn02 {
    margin-left: 10px;
}

#incentive .detail .info-right .btn03 {
    margin-right: 11px;
    margin-top: -2px;
}

#incentive .detail .info-right .btn04 {
    margin-left: 12px;
}




#introduction {
    background: url(../images/images_bishojyo10ren_pc/event_bgframe.webp) no-repeat center;
    background-size: cover;
    margin: 45px auto 0px auto;
    width: 100%;
    height: 673px;
}

#introduction .detail .capt01 {
    margin: 154px auto 0px auto ;
}


#schedule {
    margin: -111px auto 40px auto; 
}

#schedule .title {
    margin: 10px auto 20px auto;
}

#schedule .detail {
    margin: 10px auto 10px auto;
}


#collaboration {
    
}

#collaboration .title {
    margin: 55px auto 28px auto;
}

#collaboration .detail {
    background: url(../images/images_bishojyo10ren_pc/collaboration-title_bg.webp) no-repeat center;
    width: 100%;
    height: 1349px;
    margin: 10px auto 0px auto;
}

#collaboration .detail .detail-inner {
    width: 100%;
    height: 1349px;
    top: 200px;
}

#collaboration .detail .detail-inner .column-box {
    width: 1000px;
    display: flex;
    justify-content: center;
    margin: 10px auto 10px auto;
}

#collaboration .detail .detail-inner .column-box li:first-child {
    margin-top: 140px;
}

#collaboration .detail .detail-inner .column-box li {
    display: inline-block;
    margin: 5px auto 5px auto;
    margin-right: 3px;
    margin-left: 4px;
}


#pack {
    background: url(../images/images_bishojyo10ren_pc/pack_bg.webp) no-repeat center;
    background-size: cover;
    margin: 20px auto 0px auto;
    width: 100%;
    height: 1250px;
}

#pack .title {
    margin: 50px auto 10px auto ;
}

#pack .title .capt01 {
    margin: 40px auto 0px auto ;
}


#pack .detail {
    background: url(../images/images_bishojyo10ren_pc/pack_bgframe.webp) no-repeat center;
    background-size: cover;
    margin: -50px auto 0px auto;
    width: 100%;
    height: 1100px;
    
}

#pack .detail .detail-inner {
    position: relative;
    display: flex;
    width: 900px;
    height: auto;
    top: 160px;
    margin: 50px auto 50px auto;
}


#pack .detail .detail-left {
    width: 100%;
    height: auto;
    margin-right: 7px;
}

#pack .detail .detail-right {
    width: 100%;
    height: auto;
    margin-left: 7px;
}

#pack .detail .detail-left img,#pack .detail .detail-right img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto;
    margin-bottom: 20px; /* 画像間のスペースを調整 */
}



#pv{
    margin:0px auto 0px auto;
    width:100%;
    height:auto;
    }	
        
        
#pv .capt01{
    margin:80px auto 0px auto;
    
    }	
        
        
#pv .pic01{
    margin:50px auto 0px auto;
    }		
        
        
#pv .pic01:hover{
    filter: brightness(120%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;	
    }	
        
        
    
#pv #overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1100;
    overflow: visible;
    }
    
#pv #video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    overflow: visible;
    }
    
#pv #popup-video {
    width: 900px; 
    }
    
#pv #close-button {
    position: fixed;
    top: -20px; 
    right: -10px;
    cursor: pointer;
    z-index: 1200;
    }
        
    
    /*storyエリア*/		
        
        
#story{
    margin:0px auto 0px auto;
    width:100%;
    height:auto;
    }
        
#story .capt01{
    margin:100px auto 0px auto;
    }	
    
#story .box{
    margin:50px auto 0px auto;
    width:953px;
    height: 406px;
    background:url("../images/images_bishojyo10ren_pc/story_bgframe.webp") no-repeat center;
    }
        
#story .capt02{
    margin:33px auto 0px auto;
    }		
        
        
        
#illustration{
    margin:0px auto 0px auto;
    width:100%;
    height:auto;
    }
        
#illustration .capt01{
    margin:100px auto 0px auto;
    }		

#illustration .box9{
    margin:50px auto 0px auto;
    width:953px;
    height:766px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image04.webp") no-repeat center;
    }
                
                
#illustration .box10{
    margin:50px auto 0px auto;
    width:953px;
    height:775px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image07.webp") no-repeat center;
    }

#illustration .box5{
    margin:50px auto 0px auto;
    width:953px;
    height:771px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image06.webp") no-repeat center;
    }
            
            
#illustration .box6{
    margin:50px auto 0px auto;
    width:953px;
    height:1069px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image11.webp") no-repeat center;
    }	
            
            
#illustration .box7{
    margin:50px auto 0px auto;
    width:953px;
    height:775px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image02.webp") no-repeat center;
    }
            
            
#illustration .box8{
    margin:50px auto 0px auto;
    width:953px;
    height:949px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image10.webp") no-repeat center;
    }
    
        
#illustration .box1{
    margin:50px auto 0px auto;
    width:953px;
    height:1165px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image05.webp") no-repeat center;
    }
        
        
#illustration .box2{
    margin:50px auto 0px auto;
    width:953px;
    height:770px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image09.webp") no-repeat center;
    }	
        
        
#illustration .box3{
    margin:50px auto 0px auto;
    width:953px;
    height:1058px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image03.webp") no-repeat center;
    }
        
        
#illustration .box4{
    margin:50px auto 0px auto;
    width:953px;
    height:771px;
    background: url("../images/images_bishojyo10ren_pc/ illustration_image08.webp") no-repeat center;
    }	
            
        
        
    /*otherエリア*/	
        
        
#other{
    margin:0px auto 0px auto;
    width:100%;
    height:auto;
    }
        
#other .capt01{
    margin:100px auto 0px auto;
    }		
        
#other .capt02{
    margin:50px auto 0px auto;
    }		
        
        
    /*game_copyエリア*/	
        
.game_copy{
    margin:50px auto 50px auto;
    }	



    #page_btn {
        position: fixed;
        right: 50px;
        bottom: 0;
        z-index: 100;
    }
        
        
    #page_btn:hover{
    filter: brightness(120%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;	
    }





.common-footer .copy{
    position: relative;
    top:40px;
    color:#757575;
    font-size:14px;
    z-index: 2;
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 背景をコンテンツの背面に配置 */
    pointer-events: none; /* 背景に対するクリックを無効にする */
    display: none; /* 初期状態で非表示 */
  }

  .background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


	
	
	}

#dmm_ntgnavi {
    position: relative;
    z-index: 99;
}
#fv {
    position: relative;
    z-index: 1;
    }
footer{
    position: relative;
    z-index: 99;
    background: #fff;
    height: 100px;
    }

    
@media screen and (max-width:768px){
.common-footer{
    flex-direction:column;
    text-align:center;
}
.common-footer p{
    margin-top:20px;
    font-size:10px;
}
    }