@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;
}


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;
}


#fv{
  margin: 0px auto 0px auto;
  width: auto;
  max-width: 1920px;
  height:836px;
  background: url("../images/fv_bg.webp") no-repeat center top;
  position: relative;
  overflow-x: hidden;
}




#fv .fv_logo{
margin:200px 0px 0px -590px;
position: absolute;
}

#fv .fv_capt01{
margin:30px 0px 0px 400px;
position: absolute;
}


	
.btn_erea{
margin:-120px auto 0px auto;
width:1104px;
height:364px;
background: url("../images/fv_erea_bg.webp") no-repeat center;
position:relative;
overflow: visible;
}

.btn_erea .btn_capt01{
top:-15px;
margin:0px 0px 0px 80px;
position: relative;

}

.btn_erea .games_btn_erea li{
margin:0px 14px 0px 14px;
}
	
.btn_erea .games_btn_erea li.btn01{
margin:20px 0px 0px 170px;
width:243px;
height:100px;
text-align: left;
float: left;

}	
	
.btn_erea .games_btn_erea li.btn01 .title_policy a{
text-decoration:underline;
}
	
	
.btn_erea .games_btn_erea li.btn01 .ntg-rule-comname{
font-size:12px;
color: #FFFFFF;		
}

	
.btn_erea .games_btn_erea li.btn01 label{
font-size:12px;
color: #FFFFFF;		
}
	
.btn_erea .games_btn_erea li.btn01 .ntg-rule-comname{
font-size:12px;
color: #FFFFFF;		
}
	
	
.btn_erea .games_btn_erea li.btn02{
margin:15px 0px 0px 20px;
width:237px;
height:100px;
text-align: left;
float: left;
}	
		
	
.btn_erea .games_btn_erea li.btn02 label{
font-size:12px;
color: #FFFFFF;		
}
	
	
.btn_erea .games_btn_erea li.btn03{
margin:25px 0px 0px 40px;
width:207px;
height:100px;
text-align: left;
float: left;
}		
	
	
.btn_erea .games_btn_erea li.btn04{
margin:0px 2px 0px 441px;
width:203px;
height:76px;
text-align: left;
float: left;
}

.btn_erea .games_btn_erea li.btn05{
margin:0px 0px 0px 25px;
width:250px;
height:75px;
text-align: left;
float: left;
}
	
	
.btn_erea .dl_capt{
margin:-23px 0px 0px 475px;
position: absolute;
animation: float 3s ease-in-out infinite;
}
	
	
	
/* ========================= [ player追加実装 ] ========================= */

  .popupButton_player {
            background: none;
            border: none;
            cursor: pointer;
            margin: 10px;
        }

        .popup_player {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1100;
        }

        .popup-content_player {
            position: relative;
            background-color: white;
            border-radius: 8px;
            width: 80%;
            height: 80%;
            max-width: 600px;
            max-height: 400px;
        }

        .close-button_player {
            position: absolute;
            top: -1px;
            right: 6px;
            font-size: 24px;
            cursor: pointer;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
	
	
	
	
.data_link_banner {
margin:70px auto 50px auto;
		
}
	
	
.data_link_banner a:hover{
 filter: brightness(1.2);		
}
	
	
	
	
#registration {
margin:50px auto 0px auto;
width:100%;
height:auto;			
position:relative;
overflow: visible;
overflow-x: hidden;
overflow-y: hidden;
}
	
	
#registration .campaign_box{
margin:0px 0px 0px -40px;
height:2720px;
background: url("../images/campaign_bg.webp") no-repeat center;	
position: relative;
z-index:10;
}
	
#registration .campaign_box .capt01{
margin:50px 0px 0px 40px;
}
	
#registration .campaign_box .capt02{
margin:40px 0px 0px 40px;
}
	
	
#registration .campaign_box .campaign_erea{
margin:0px auto 0px auto;
width:1070px;
}
	
	
#registration .campaign_box .campaign01{
margin:0px 0px 0px 75px;
width:970px;
height:auto;
}
	
	
#registration .campaign_box .campaign01 li{
margin:30px 8px 0px 8px;
display:inline-block;
}	
	
#registration .campaign_box .campaign01 .item04{
margin:-10px 0px 0px 0px;
}		
	
#registration .campaign_box .capt03{
margin:50px 0px 0px 0px;
}	
	
#registration .campaign_box .capt04{
margin:35px 0px 0px 40px;
}	
	

#registration .campaign_box .campaign02{
margin:0px 0px 0px 75px;
width:970px;
height:auto;
}
	
	
#registration .campaign_box .campaign02 .tx{
margin:10px 0px 0px 0px;
color: #2C2C2C;
font-size:15px;
}	
	
	
#registration .campaign_box .campaign02 .capt04{
margin:30px 8px 5px 8px;
}	
	
	
	
#registration .campaign_box .campaign02 li{
margin:20px 8px 0px 8px;
display:inline-block;
}	
		
#registration .campaign_box .campaign02 .pt04{
margin:20px 8px 0px 8px;
display:inline-block;
}	

#registration .campaign_box .campaign02 .pt05{
margin:20px 8px 0px 8px;
display:inline-block;
}	
	
#registration .campaign_box .campaign02 .pt06{
margin:30px 8px 0px 8px;
display:inline-block;
}	
	
#registration .campaign_box .campaign02 .pt07{
margin:30px 8px 0px 8px;
display:inline-block;
}		
	
#registration .campaign_box .campaign02 .pt08{
margin:30px 8px 0px 8px;
display:inline-block;
}	
	
#registration .campaign_box .campaign02 .pt09{
margin:30px 8px 0px 8px;
display:inline-block;
}	


		
#registration .campaign_box .campaign02 .pt10{
margin:30px 0px 0px 150px;
display:inline-block;
}	

	
	
	
#registration .campaign_box .campaign02 .item04{
margin:4px 0px 0px 0px;
}		
	
	
#registration .campaign_box .campaign03{
margin:30px 0px 0px 75px;
width:970px;
height:auto;
}
	
#registration .campaign_box .capt05{
margin:10px 0px 0px 0px;		
}
	
	
#registration .campaign_box .capt06{
margin:25px 0px 0px 0px;		
}

	
	
#registration .ch04{
margin:-30px 0px 0px 900px;
position:relative;
overflow: visible;
overflow-x: hidden;
display: block;
}		
	
	
	
	
	
#registration .campaign_atention{
margin:-175px auto 0px auto; 
position: relative;
z-index:11;
}


.atention_popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
	z-index:1000;
	overflow: hidden;
}

#popupBox {
	margin:0px auto 0px auto;
    padding: 20px;
	width: 1154px;
	height: 682px;
    position: relative;
    background: url("../images/campaign_atenion_bg.webp") no-repeat center;
	
}
	

#popupBox .tx_box{
margin:120px 0px 0px 120px;
text-align: left;		
}
		
		
#popupBox .tx01{
margin:0px 0px 20px 0px;
font-size:20px;
font-weight: bold;
color:#0062ae;
}	
	

#popupBox .tx02 li{
margin:8px 0px 0px 0px;
font-size:15px;
letter-spacing:1px;
word-break: break-all;
white-space: nowrap;
text-indent: -10px;
}
	
	
	
	
	
#closeButton2 {
	margin:0px auto 0px auto;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}
	
	
	
	
	
	
	
	
	
	
	
	
#registration .bg_chara{
margin:0 auto 0 auto;
overflow-x: hidden;
z-index:9;
}			
	
#registration .bg_chara .ch01{
top:100px;
right:60%;
position: absolute;
overflow: visible;
overflow-x: hidden;
display: block;
}	
	
	
#registration .bg_chara .ch02{
top:100px;
left:62%;
position: absolute;
overflow: visible;
overflow-x: hidden;
display: block;
}	
	
#registration .bg_chara .ch03{
top:1000px;
right:50%;
position: absolute;
overflow: visible;
overflow-x: hidden;
display: block;
}		
	
	
	
/*----movie----*/
.video-container {
margin:100px auto 0px auto;
position: relative;
width: 100%;
height:730px;
 overflow-x: hidden;
}

	
.video-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:2;
background:rgba(28, 55, 76, 0.7);
pointer-events: none; 
}	

.video-container .capt01{
margin:60px auto 0 auto;
position:relative;
z-index:100;
}	
	
 .background-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.play-button {
margin:0 auto 0 auto;
cursor: pointer;
width: 294px;
height: 294px;
z-index:100;
}

.circle {
margin:0px auto 0px auto;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.outer-circle {
margin:100px auto 0px auto;
animation-name: rotate-outer;
width: 294px;
height: 294px;
position: relative;
z-index:100;
}

.inner-circle {
margin:-275px auto 0 auto;
animation-name: rotate-inner;
width:255px;
height:255px;
position: relative;
z-index:100;
}

.play-icon {
margin:-240px auto 0 auto;
width:95px;
height:auto;
left:20px;
position: relative;
z-index:100;
}

@keyframes rotate-outer {
from {
      transform: rotate(0deg);
      }
      to {
       transform: rotate(360deg);
        }
    }

@keyframes rotate-inner {
from {
       transform: rotate(0deg);
      }
      to {
            transform: rotate(-360deg);
      }
    }

	
	
	
	
.popup-video {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-wrapper {
  position: relative; /* ここに `position` を追加 */
  width: 80%;
  max-width: 1280px; /* 追加: 内容物の最大幅を設定 */
  margin: auto; /* 追加: 中央揃え */
}

.popup-video video {
  width: 100%;
  height: auto;
}

.close-button {
  position: absolute;
  top: -40px; /* 変更: ボタンのサイズに合わせて変更する */
  right: -40px; /* 変更: ボタンがはみ出す場合はこの値を適切に調整する */
  background: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
	
	
	
	
/*----character----*/
	
	
#characther {
overflow-x: hidden;
}

	
	
#characther .capt01{
margin:100px auto 0px auto;		
}


#characther .container {
	margin:50px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#characther .box {
    position: relative;
    width: 1100px;
    height: 583px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#characther .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
	opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
	
	
#characther .background-image.hidden {
    opacity: 0;
}	
	
	

#characther .audio-buttons {
	margin:464px 0px 0px -500px; 
    position: absolute;
}

#characther .audio-btn {
    padding: 0px;
    border: none;
    cursor: pointer;
}

	
	
#characther .voice_capt	{
top:18px;
left:320px;
width:170px;
height:62px;
position:absolute;
display: flex;
animation: float 3s ease-in-out infinite;
}

	

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-10px); /* 上に移動 */
    }
}
	
	
	
	
#characther .arrows {
    font-size: 2em;
	width:1200px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

#characther .left-arrow {
	margin:0px 1200px 0px 0px;
    position: absolute;
}

#characther .right-arrow {
	margin:0px -1200px 0px 0px;
    position: absolute;
}

#characther .thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#characther .thumbnail {
    width: 166px;
    height: 112px;
    object-fit: cover;
    margin: 0 10px;
    cursor: pointer;
}
	
#characther .thumbnail.active {
    filter: brightness(1.4);
}



/*----monster----*/

#monster {
overflow-x: hidden;
}
	
	
#monster .capt01{
margin:100px auto 0px auto;

}


#monster .container {
	margin:50px auto 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#monster .box {
    position: relative;
    width: 1100px;
    height: 483px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#monster .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
	opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
	
#monster .background-image.hidden {
    opacity: 0;
}	


#monster .arrows {
    font-size: 2em;
	width:1200px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

#monster .left-arrow {
	margin:0px 1200px 0px 0px;
    position: absolute;
}

#monster .right-arrow {
	margin:0px -1200px 0px 0px;
    position: absolute;
}

#monster .thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#monster .thumbnail {
    width: 166px;
    height: 112px;
    object-fit: cover;
    margin: 0 10px;
    cursor: pointer;
}
	
#monster .thumbnail.active {
    filter: brightness(1.4);
}


/*----screenshot----*/

#screenshot{
overflow-x: hidden;		
}
	
#screenshot .capt01{
margin:100px auto 0px auto;		
}


#screenshot .container {
	margin:20px 0px 50px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#screenshot .box {
    position: relative;
    width: 1050px;
    height: 816px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#screenshot .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
	opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

	
#screenshot .background-image.hidden {
    opacity: 0;
}	
	
	
#screenshot .arrows {
    font-size: 2em;
	width:1200px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

#screenshot .left-arrow {
	margin:0px 1200px 0px 0px;
    position: absolute;
}

#screenshot .right-arrow {
	margin:0px -1200px 0px 0px;
    position: absolute;
}

#screenshot .thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#screenshot .thumbnail {
    width: 9px;
    height: 9px;
    object-fit: cover;
    margin: 0 10px;
    cursor: pointer;
}
	
#screenshot .thumbnail.active {
    filter: brightness(2.0);
}


	
/*----Story----*/	
	
#story{
margin:0px auto 0px auto;	
}	
	
#story .capt01{
margin:100px auto 0px auto;	
}	
	
#story .capt02{
margin:80px auto 0px auto;	
}	
	
	
	
.back_btn{
margin: 100px auto 0px auto;		
}
	
	
	
/*----foot_btn----*/	

#foot_btn_erea {
margin:150px auto 0px auto;
background:url("../images/bg05.webp") no-repeat center;
background-size: cover;
}

		
#foot_btn_erea .capt01{
margin:100px auto 60px auto;
}
	
	
#foot_btn_erea .btn_erea02{
margin:0px auto 0px auto;
width:1104px;
height:260px;
position:relative;
overflow: visible;
}

#foot_btn_erea .btn_erea02 .btn_capt01{
top:0px;
margin:0px 0px 15px 0px;
position: relative;

}

#foot_btn_erea .btn_erea02 .games_btn_erea li{
margin:10px 14px 0px 14px;
}
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn01{
margin:0px 0px 0px 180px;
width:243px;
height:100px;
text-align: left;
float: left;

}	
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn01 .title_policy a{
text-decoration:underline;
}
	
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn01 .ntg-rule-comname{
font-size:12px;
color: #FFFFFF;		
}

	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn01 label{
font-size:12px;
color: #FFFFFF;		
}
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn01 .ntg-rule-comname{
font-size:12px;
color: #FFFFFF;		
}
	
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn02{
margin:-4px 0px 0px 20px;
width:237px;
height:100px;
text-align: left;
float: left;
}	
		
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn02 label{
font-size:12px;
color: #FFFFFF;		
}
	
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn03{
margin:6px 0px 0px 45px;
width:207px;
height:100px;
text-align: left;
float: left;
}		
	
	
#foot_btn_erea .btn_erea02 .games_btn_erea li.btn04{
margin:20px 0px 0px 454px;
width:203px;
height:76px;
text-align: left;
float: left;
}

#foot_btn_erea .btn_erea02 .games_btn_erea li.btn05{
margin:20px 0px 0px 25px;
width:250px;
height:75px;
text-align: left;
float: left;
}

#foot_btn_erea .btn_erea02 .dl_capt{
margin:-40px 0px 0px 485px;
position: absolute;
animation: float 3s ease-in-out infinite;
}

	
	
	
	
	
/*----foot_btn----*/		
	
#foot_erea {
margin:0px auto 0px auto;
width:100%;
height:500px;
background: rgba(255, 255, 255, 0.5);

}	
	
#foot_erea .box_erea{
margin:0px auto 50px auto;
width:1100px;
height:auto;

}
		
	
#foot_erea .box_erea .box_left{
margin:0px auto 0px auto;
width:550px;
height:500px;
float:left;
text-align: left;
color:#1b1b1b;
letter-spacing:1px;
font-size:16px;
line-height:30px;
}	
	
	
#foot_erea .box_erea .box_left .logo{
margin:45px 0px 0px 20px;	
}	
	
#foot_erea .box_erea .box_left .spec{
margin:40px 0px 0px 140px;	
}
	
#foot_erea .box_erea .box_left li{
margin:10px 0px 0px 0px;		
}
	
.hanging-indent {
  padding-left: 1em;
  text-indent: -1em;
}

	
		

#foot_erea .box_erea .box_rigth{
margin:0px auto 0px auto;
width:550px;
height:500px;
float:left;
text-align: left;
letter-spacing:1px;
font-size:15px;
}	
	
#foot_erea .box_erea .box_rigth .tx1{
margin:45px 0px 15px 18px;	
}
	
#foot_erea .box_erea .box_rigth .spec{
margin:0px 0px 0px 20px;	
}
	
#foot_erea .box_erea .box_rigth li{
margin:15px 0px 0px 0px;		
}
		
	
	
	
	
footer{
margin:25px auto 0px auto;
padding:0px 0px 20px 0px;
clear: both;
color: #ffffff;
}	
	
footer li{
margin:0px auto 20px auto;
display: inline-block;
}
	
	
footer p{
margin:0px auto 20px auto;
font-size:13px;
color: #ffffff;
}			
	
	
	
footer .copy{
margin:40px auto 0px auto;
}	
	
 /* 背景 */	
	
#background-container {
	margin:0 auto 0 auto;
    position: relative;
    height:auto; /* 背景画像が切り替わるように長いページを作成 */
	 z-index:-1;
}
	
	
	
#background-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1));
  pointer-events: none; /* マスクによる影響を無視 */
  z-index:1;
}	

	
	
	
.floating-button {
    position: fixed;
    top: 15%;
    right: 0px; /* 初期位置は画面外 */
    transform: translateY(-50%);
    transition: right 0.5s ease-in-out;
	z-index:11;
}

.floating-button img {
    width: 65px;
    height: 160px;
}
	

	
#page_btn {
    position: fixed;
    right: 20px;
    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;	
}	
	

#page_btn02 {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 100;
}
	
	
#page_btn02: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;	
}	
	
	
	
	
.bgm-popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
 top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
}

.bgm-popup-content {
display: flex;
gap: 20px;
}
	
.bgm_popup_box{
margin:0px auto 0px auto;
width:680px;
height:300px;
background:url("../images/sound_box_bg.webp") no-repeat center;
}
	
	
	
.bgm_popup_box p{
margin:65px auto 40px auto;
font-size:18px;
letter-spacing:1px;
}
	
	
.bgm_popup_box img{
margin:0px 20px 0px 20px;
}	
	
	


.sound-button {
position: fixed;
top:28%;
right:0px; /* 初期位置を画面外に設定 */
cursor: pointer;
z-index: 999;
transition: right 0.5s ease-in-out; /* アニメーションの追加 */
}

.sound-button.visible {
right:0px; /* 表示位置 */
}
	
	

.bg-image {
	margin:0 auto 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
	background-size: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	z-index:-1;
	
}
	
	
.bg-image::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, 0) 87%, rgba(255, 255, 255, 1));
  pointer-events: none; /* マスクによる影響を無視 */
  z-index:1;
}	
	


.bg-image.active {
    opacity: 1;
    transform: scale(1);
}

.bg-image.fade-out {
    opacity: 0;
    transform: scale(1.1); 
}

#wing {
    position: fixed; /* 固定表示に変更 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* 羽が他の要素に影響しないようにする */
}

.feather {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s;
    animation: fall linear infinite, sway ease-in-out infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh) translateX(calc(-50px + 100vw)); /* 最大サイズに調整 */
    }
}

@keyframes sway {
    0%, 100% {
        transform:  rotate(10deg);
    }
    50% {
        transform:  rotate(-10deg); /* X軸の揺れ幅を調整 */
    }	
	
	
	
	
	
	
	
	
	
	


	}