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

@media (max-width: 600px) {
	
.invisible-sp {
display: none;
}
	
img {
width:100%;
height:100%;	
}	

	
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
}

	
	
	
.ntg-top {
    text-decoration: none;
    margin: 8px 0;
    color: #333;
    background: url(../images/bg_bt_olgtop.gif) no-repeat left center;
    background-size: 14px 13px;
    padding-left: 17px;
    font-size: 14px;
}
	
	
#dmm_ntgnavi {
    background: url(../images/bg_navimain.gif) center center repeat-x;
    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;
	font-size:3vw;
}

#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:0% auto 10% auto;
width:100%;	
background: url("../images/fv_bg_sp.webp") no-repeat center;
background-size:cover;

}	
	
#fv .fv_capt01{
margin:20% 40% 0% 0%;
width:50%;
}		
	
#fv .fv_logo{
margin:13% 0% 12% 0%;
width:85%;
}	
		
	
	
.btn_erea{
top:10%;
margin:0% auto -5% auto;
padding:0% 0% 0% 0%;
width:95%;
height:auto;
background: url("../images/fv_erea_bg_sp.webp") no-repeat center;
background-size: contain;
position: relative;
z-index:10;
display: block;
}		
		
	
	
.btn_erea .btn_capt01{
top:5%;
margin:0% auto 3% auto;
width:90%;
z-index: 1;
}
		
	
	
/* iPhoneとAndroidでの背景画像 */
.btn_erea.device-iphone,
.btn_erea.device-android {
margin:5% auto 0% auto;
width:95%;
background: url("../images/fv_erea_bg_app_sp.webp") no-repeat center;
background-size: contain;
position: relative;
z-index:10;
display: block;
}

/* ボタンエリアの基本スタイル */
.buttons {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.buttons li {
  display: none; /* 初期状態ではすべて非表示 */
  margin: 10px 0; /* ボタン間の間隔を調整 */
}

.buttons li a {
  display: inline-block;
  text-decoration: none;
}

.buttons li a img {
  max-width: 100%;
  height: auto;
  border: none;
}

/* PCブラウザでスマホサイズ時（3つのボタンを表示） */
@media screen and (max-width: 767px) {
	

	
.btn_erea.device-pc .buttons li {
	margin:0% 0% 0% 0%;
    display: inline-block;
    vertical-align: top;
	
}

.btn_erea.device-pc .buttons li a img {
    width:auto;
    height: auto;	
}
	
.btn_erea.device-pc .buttons li.btn03 {
	margin:2% 25% 0% 25%;
    width:45%;
    height: auto;

}
	
.btn_erea.device-pc .buttons li.btn04 {
	margin:3% 0% 10% 1%;
    width:40%;
    height: auto;

 }
	
.btn_erea.device-pc .buttons li.btn05 {
	margin:3% 0% 10% 2%;
    width:50%;
    height: auto;
}
	
		
	}

	
	
	
/* iPhoneアクセス時（iPhoneボタンのみ表示） */
.btn_erea.device-iphone .buttons .iphone-button {
  display: block;
  margin: 0 auto;
}

.btn_erea.device-iphone .buttons .iphone-button  a img {
   width: auto;
  height: auto;
}

.btn_erea.device-iphone .buttons .btn04 a img {
 margin:0% auto 20% auto;
 width:90%;
}

	
	
	
/* Androidアクセス時（Androidボタン2つを表示） */
.btn_erea.device-android .buttons .android-button {
  display: inline-block;
  margin: 0px;
  
}

.btn_erea.device-android .buttons .android-button li{
  margin:0% 0.5% 0% 0.5%;
  width: auto;
  height: auto;
  display: inline-block;
  
}

/* btn03とbtn05の特定のサイズ調整 */
.btn_erea.device-android .buttons li.btn03 {
 margin:2% 1% 10% 1%;
 width:40%;
 display: inline-block;
}

.btn_erea.device-android .buttons li.btn05  {
 margin:2% 0% 10% 0%;
 width:49%;
 display: inline-block; 
}


	
.data_link_banner {
margin:10% auto 10% auto;
position: relative;
width:90%;
z-index:10;
}

	
	
	
	

/*----事前登録----*/

	
#registration {
margin:-62% auto 15% auto;
padding:18% 0% 0% 0%;
width:100%;
height:auto;			
position:relative;
overflow: visible;
background:url("../images/bg01_sp.webp") no-repeat center;
background-size: cover;
}
	
#registration .campaign_box{
margin:20% 0% 5% -0.5%;
width:100%;
height:100%;
background: url("../images/campaign_bg_sp.webp") no-repeat center;
background-size:contain;
}	
		
#registration .campaign_box .capt01{
margin:40% 0% 0% 4%;
width:75%;
}	
	
	
#registration .campaign_box .capt02{
margin:2% 0% 3% 3%;
width:80%;
}
	
	
#registration .campaign_erea {
margin:0% 0% 0% 0%;
}
	
#registration .campaign_erea .campaign01 {
	margin:0% 0% 0% 1%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#registration .campaign_erea .campaign01 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#registration .campaign_erea .campaign01 li {
    list-style: none;
    margin:3% 2% 0% 1.2%;
}

/* 1番目と2番目の画像を横並びに */
#registration .campaign_erea .campaign01 li:nth-child(1),
#registration .campaign_erea .campaign01 li:nth-child(2) {
    width: 39%;
    max-width: 300px;
    height: auto;
}

/* 3番目の画像を中央に */
#registration .campaign_erea .campaign01 li:nth-child(3) {
	margin:3% 0% 0% 10%;
    width: 39%;
    max-width: 300px;
    height: auto;
    text-align: center;
}

/* 4番目と5番目の画像をフルサイズで配置 */
#registration .campaign_erea .campaign01 li:nth-child(7),
#registration .campaign_erea .campaign01 li:nth-child(8),
#registration .campaign_erea .campaign01 li:nth-child(9)	{
    width: 83%;
    max-width: 455px;
    height: auto;
    text-align: center;
}

/* 画像サイズの調整 */
#registration .campaign_erea .campaign01 li img {
    width: 100%;
    height: auto;
}


#registration .campaign_box .capt03{
margin:7% 0% 0% 0%;
width:85%;
}	
	
	
#registration .campaign_box .capt04{
margin:6% 0% 0% 0%;
width:85%;
}
	

#registration .campaign_erea .campaign02 {
	margin:0% 0% 0% 1%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

	
#registration .campaign_box .campaign02 .tx{
margin:3% 0% 0% 0%;
color: #2C2C2C;
font-size:2.2vw;
}	
		
	
	
	
#registration .campaign_erea .campaign02 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#registration .campaign_erea .campaign02 li {
    list-style: none;
    margin:3% 2% 0% 2.2%;
}

/* 1番目と2番目の画像を横並びに */
#registration .campaign_erea .campaign02 li:nth-child(1),
#registration .campaign_erea .campaign02 li:nth-child(2) {
    width: 40%;
    max-width: 300px;
    height: auto;
}

/* 3番目の画像を中央に */
#registration .campaign_erea .campaign02 li:nth-child(3) {
	margin:3% 0% 0% 26%;
    width: 40%;
    max-width: 300px;
    height: auto;
    text-align: center;
}

/* 4番目と5番目の画像をフルサイズで配置 */
#registration .campaign_erea .campaign02 li:nth-child(11),
#registration .campaign_erea .campaign02 li:nth-child(12),
#registration .campaign_erea .campaign02 li:nth-child(13),
#registration .campaign_erea .campaign02 li:nth-child(14),
#registration .campaign_erea .campaign02 li:nth-child(15),
#registration .campaign_erea .campaign02 li:nth-child(16),
#registration .campaign_erea .campaign02 li:nth-child(17)	
{
    width:80%;
    max-width: 455px;
    height: auto;
    text-align: center;
}

/* 画像サイズの調整 */
#registration .campaign_erea .campaign02 li img {
    width: 100%;
    height: auto;
}
	
	
	
#registration .campaign_box .capt05{
margin:6% 0% 0% 0%;
width:80%;
}
	
	
#registration .campaign_box .capt06{
margin:4% 0% 70% 0%;
width:80%;
position: relative;
z-index:8;
}
	
#registration .campaign_atention{
top:5%;
margin:-75% 0% 0% 0%;
width:80%;
position: relative;
z-index:10;
}	
	
	
	
	
/* 共通スタイル */
.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;
}

#popupBox {
	width:98%;
    background:url("../images/campaign_atenion_bg_sp.webp") no-repeat center;
	background-size:cover;
    position: relative;
}

#closeButton2 {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

	
/* SP版のスタイル */
#popupBox {
    max-height: 80%;
    overflow-y: scroll;
}

#popupBox::-webkit-scrollbar {
    width: 8px;
}

#popupBox::-webkit-scrollbar-thumb {
    background: #0062ae;
    border-radius: 4px;
}
	
	
#popupBox .tx_box{
margin:10% auto 20% auto;
width:95%;
}	
	

#popupBox .tx_box .tx01 {
    margin:8% 0% 5% 0%;
    font-size: 3vw;
    font-weight: bold;
    color: #0062ae;
	word-break: break-all;
}

#popupBox .tx_box .tx02 li {
    margin:0% 0% 0% 8%; 
	width:90%;
	text-align: left;
    font-size: 2.5vw;
    letter-spacing: 1px;
    word-break: break-all;
	text-indent: -10px;
}	
	
	
	
	
	

		
	
	
#registration .ch04{
margin:-76% 0% 0% -5%;
left:85%;
width:18%;
height: auto;
display: block;
position:absolute;
}			
	
#registration .bg_chara .ch01{
margin:-105% 0% 0% -47%;
width:100%;
height: auto;
display: block;
position:absolute;
z-index:6;
-webkit-mask-image: linear-gradient(to left, transparent 25%, black 40%);
mask-image: linear-gradient(to left, transparent 25%, black 40%);
}	
	

	
			
	
/*----movie----*/	
	
	
.video-container {
margin:0% auto 0% auto;
position: relative;
width: 100%;
flex-direction: column;
height:auto;
overflow: hidden;
z-index:11;
}

	
.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:10% auto 0% auto;
width:60%;
position:relative;
z-index:10;
}	
	
	
.background-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.play-button {
cursor: pointer;       
}

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

.outer-circle {
margin:15% 0% 0% 0%;
width:55%;
animation-name: rotate-outer;
position:relative;
z-index:10;
}

.inner-circle {
margin:-51.5% 0% 0% 21%;
width:48%;
animation-name: rotate-inner;
position:relative;
z-index:10;
}

.play-icon {
margin:-42% 0% 42% 0%;
left:-32%;
width:20%;
position:relative;
z-index:10;
}

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

.video-wrapper {
position: relative;
width: 100%;
height: auto;
}

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

.close-button {
position: absolute;
top: -10px;
right: 10px;
background: transparent;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
}
	
	
	
	
/*----character----*/	
	
	
#characther .capt01{
margin:15% auto 0% auto;
width:80%;
}
	
#characther .container {
margin:10% auto 10% auto;
flex-direction: column;
align-items: center;
}

#characther .box {
 width: 95%;
 height: auto;
 opacity: 1;
 transition: opacity 0.5s ease-in-out;
	
 }

#characther .background-image {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
	
	
#characther .background-image.hidden {
    opacity: 0;
}
	
	
	
#characther .audio-buttons {
margin:-18% 0% 0% -14%;
position:relative;
bottom: 0px;
left: 0px;
gap: 0px;
}

#characther .audio-btn {
margin:0% auto 0% auto;
border: none;
cursor: pointer;
width:9%;
}
	

#characther .voice_capt	{
top:20%;
left:71%;
width:26%;
height: auto;
position:absolute;
display: flex;
animation: float 3s ease-in-out infinite;
}
	
	
@keyframes float {
    0%, 100% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-5px); /* 上に移動 */
    }
}	
	
	
	


#characther .thumbnails {
flex-wrap: wrap;
justify-content: center;
}

#characther .thumbnail {
width: 25%;
height: auto;
margin: 5px;
}
	
.thumbnail.active {
    filter: brightness(0.5);
}	
	

#characther .left-arrow, .right-arrow {
font-size: 1.5em;
position:absolute;
z-index:10;
}

#characther .left-arrow {
margin:50% 0% 0% 0%;
width:8%;
}

#characther .right-arrow {
margin:-68% 0% 0% 0%;
right:0%;
width:8%;
}	
	
	
#characther .thumbnail.active {
  filter: brightness(1.4);
}	


	
	
	
/*----monster ----*/	
	
	
#monster .capt01{
margin:15% auto 0% auto;
width:60%;
}
	
#monster .container {
margin:10% auto 5% auto;
flex-direction: column;
align-items: center;
}

#monster .box {
 width: 95%;
 height: auto;
 opacity: 1;
 transition: opacity 0.5s ease-in-out;
 }

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

#monster .thumbnails {
flex-wrap: wrap;
justify-content: center;
}

#monster .thumbnail {
width: 25%;
height: auto;
margin: 5px;
}
	
.thumbnail.active {
    filter: brightness(0.5);
}	
	

#monster .left-arrow, .right-arrow {
font-size: 1.5em;
position:absolute;
z-index:10;
}

#monster .left-arrow {
margin:45% 0% 0% 0%;
width:8%;
}

#monster .right-arrow {
margin:-57% 0% 0% 0%;
right:0%;
width:8%;
}	
	
#monster .thumbnail.active {
    filter: brightness(1.4);
}	
	
	
/*----screenshot ----*/	
	
	
#screenshot .capt01{
margin:20% auto 0% auto;
width:70%;
}
	
#screenshot .container {
margin:8% auto 5% auto;
flex-direction: column;
align-items: center;
}

#screenshot .box {
 width: 95%;
 height: auto;
 opacity: 1;
 transition: opacity 0.5s ease-in-out;
 }

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

#screenshot .background-image.hidden {
opacity: 0;
}
	

#screenshot .thumbnails {
flex-wrap: wrap;
justify-content: center;
}

#screenshot .thumbnail {
width: 2%;
height: auto;
margin: 5px;
}
	
.thumbnail.active {
    filter: brightness(0.5);
}	
	

#screenshot .left-arrow, .right-arrow {
font-size: 1.5em;
position:absolute;
z-index:10;
}

#screenshot .left-arrow {
margin:60% 0% 0% 0%;
width:8%;
}

#screenshot .right-arrow {
margin:-91.5% 0% 0% 0%;
right:0%;
width:8%;
}	
	
#screenshot .thumbnail.active {
    filter: brightness(2.0);
}	
	
/*----Story----*/	
	
#story{
margin:0% auto 0% auto;	
}	
	
#story .capt01{
margin:15% auto 0% auto;
width:60%;
}	
	
	
#story .capt02{
margin:8% auto 0% auto;	
width:80%;
}	
		
	
	
	
	
.back_btn{
margin: 10% auto 0% auto;
width:80%;
}
		
	
	
	
/*----foot_btn----*/	

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

		
#foot_btn_erea .capt01{
margin:15% auto 0% auto;
width:90%;
}
		

#foot_btn_erea .capt01{
margin:15% auto 0% auto;
width:90%;
}
	
#foot_btn_erea .btn_erea02 {
margin:0% 0% 0% 0%;
height:40vw;
}	
	
		
/* 初期設定 */
#foot_btn_erea .btn_erea02 ul {
	margin:0% 0% 0% 0%;
    list-style: none;
    padding: 0;
    text-align: center;
}

#foot_btn_erea .btn_erea02 ul li {
    display: none; /* JavaScriptで制御するため最初は非表示 */
    margin: 5px;
	
}

/* PCブラウザスマホサイズ用 */
#foot_btn_erea .btn_erea02.device-pc .btn03 {
	margin:8% 0% 0% 30%;
    display: block;
    width: 45%;
	height: auto;
	float: left;
}
	

#foot_btn_erea .btn_erea02.device-pc .btn04 {
	margin:5% 0% 0% 5%;
    display: inline-block;
    width: 40%;
	height: auto;
	float: left;
}
	

#foot_btn_erea .btn_erea02.device-pc .btn05 {
	margin:5% 0% 0% 5%;
    display: inline-block;
    width: 48%;
	height: auto;
	float: left;
}
	

/* iPhone用 */
#foot_btn_erea .btn_erea02.device-iphone .btn04 {
    margin:15% auto 0% auto;
	display: block;
    width: 70%;
	height: auto;
}

/* Android用 */

	
#foot_btn_erea .btn_erea02.device-android .btn03 {
    margin:15% 1% 0% 1%;
	display: inline-block;
    width: 40%;
	height: auto;
}
	
	
#foot_btn_erea .btn_erea02.device-android .btn05 {
    margin:15% 1% 0% 1%;
	display: inline-block;
    width: 48%;
	height: auto;
}

	
	
	
	
	
	
	
	
	
	
	
/*----foot_erea----*/	
#foot_erea {
margin:0% auto 0% auto;
background: rgba(255, 255, 255, 0.5);
}	
	

#foot_erea .box_erea{
margin:15% auto 0% auto;
padding:0% 0% 5% 0%;
}
	
#foot_erea .box_erea .logo{
margin:5% 0% 8% 8%;
width:80%;
}	
	
#foot_erea .box_left{
margin:0% 0% 0% 5%;
font-size:3.5vw;
text-align: left;
letter-spacing:1px;
line-height:7vw;
word-break: break-all;
}

	
#foot_erea .box_rigth{
margin:5% 0% 0% 5%;
text-align: left;	
letter-spacing:1px;
line-height:6vw;
word-break: break-all;
}
	
	
#foot_erea .box_rigth li{
margin:3% 0% 0% 0%;
font-size:2.7vw;
text-align: left;	
line-height:6vw;
word-break: break-all;
}
	
.hanging-indent {
  padding-left: 1em;
  text-indent: -1em;
}	
	
	
footer {
margin:8% auto 0% auto;
padding:0% 0% 10% 0%;
color:#ffffff;
}	
	
footer li{
margin:0% 0% 2.5% 0%;
font-size:2.3vw;	
word-break: break-all;
display: inline-block;
}	
	
	
footer p{
margin:0% 0% 5% 0%;
font-size:2.5vw;	
word-break: break-all;
}		
	
	
footer small{
margin:0% 0% 0% 0%;
font-size:3vw;	
word-break: break-all;
}		


	
	
	
	
.floating-button {
    position: fixed;
    top: 50%;
    right: -50px; /* 初期位置は画面外 */
    transform: translateY(-50%);
    transition: right 0.5s ease-in-out;
	z-index:11;
}	
	
	
.floating-button {
 top: 10%; /* スマホ版ではボタンの位置を少し下に調整 */
 right:-50px; /* 初期位置は画面外 */
}

.floating-button img {
 width:42px;
 height: auto;
}

	
#page_btn {
	width:35%;
    position: fixed;
    right: 5px;
    bottom: 0;
    z-index: 100;
}	
	
	

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

.bgm-popup-content {
display: flex;
gap: 20px;
}

.bgm_popup_box{
width:90%;
height: auto;
background:url("../images/sound_box_bg_sp.webp") no-repeat center;
background-size: contain;
}	
	
.bgm_popup_box p{
margin:10% 10% 2% 10%;

font-size:3vw;
letter-spacing:1px;
}	
	
	
	
.sound-button {
position: fixed;
top: 23%;
width:45px;
height:auto;
right:-50px; /* 初期位置を画面外に設定 */
cursor: pointer;
z-index: 98;
transition: right 0.5s ease-in-out; /* アニメーションの追加 */
}

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

	
.bgm_popup_box img{
margin:5% auto 0% auto;
width:70%;
height:auto;
}	

	
.bgm_popup_box .btn02{
margin:5% 0% 13% 0%;		
}
	
	

	
	
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	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: 30px;
    height: 30px;
    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);
    }	
	
	
	
	
	
	
	
		}