/* stageに関する変数 */
:root {
/*	--stage-width:100vw;*/
	--stage-width:100%;
}

/*--------------*/
/*  top unit    */
/*--------------*/
.top-unit{
	height: 100%;
	background-color: #D480BB;
	text-align: center;
	color: white;

	.title-logo{
		padding: 12px;
		img{
			width: 128px;
		}
	}

	.new-ikimono-box{
		width: 256px;
		height: 256px;
		background-color: white;
		border-radius: 20px;
		margin: 0 auto;
		padding-top: 32px;

		img{
			display: block;
			margin: 0 auto;
			width: 192px;
			height: 192px;
		}
	}

	.top-message{
		font-size: 24px;
		text-align: center;
		padding: 24px;
	}

	.pickup-button{
		font-size: 24px;
		background-color: #E88A36;
		border-radius: 10px;
		padding: 24px;
		text-align: center;
		width: 260px;
		margin: 0 auto;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	}

	.term{
		display: block;
		text-align: center;
		font-size: 12px;
		padding: 24px;
	}

	.login{
		text-align: center;
		font-size: 24px;
		padding: 12px;
	}

	.copy{
		width: 100%;
		position: absolute;
		bottom: 16px;
		text-align: center;
		font-size: 12px;
	}
}

/*--------------*/
/*  ログインモーダル */
/*--------------*/
.login-modal-title{
	img{
		display: block;
		margin: 0 auto;
	}
}
.forget-id-password{
	padding: 4px;
	text-align: center;
}

/*--------------*/
/*  チュートリアル */
/*--------------*/
.tips{
	position: absolute;
	bottom: 100px;
	left: 10%;
	background-color: #D480BB;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	border-radius: 10px;	padding: 24px;
	color: white;
	font-size: 20px;
	width: 80%;

	.close-btn{
		position: absolute;
		top: 4px;
		right: 4px;

		img{
			width: 24px;
			height: 24px;
		}
	}
}


/*--------------*/
/*  main unit    */
/*--------------*/
.main-unit{
	background-color: #FFDADA;
}

/*--------------*/
/*  main ui    */
/*--------------*/
.main-ui-content {
	display:flex;
	flex-direction: column; /* 要素を縦に並べる */
	height: 100%;

	/* 上半分 */
	.main-block-1{
		/*overflow: hidden;*/

		.main-block-content{
			overflow:hidden;
		}
	}

	/* 下半分 */
	.main-block-2{
		flex-grow: 1;/*残りの分の高さとする*/
		overflow-y: hidden;

		.main-block-2-body{
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
		}
	}
}

/*----------------------*/
/* footer menu      */
/*----------------------*/
.footer-menu{
	height: 68px;
	width: 100%;
	background-color: white;
	border-radius: 10px 10px 0 0; /* 左上 右上 右下 左下 の順 */
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	margin-top: -5px;/*上のvisit menu に若干被らせるため*/

	.footer-menu-list{
		display: flex;
		justify-content: space-around;
		padding-top: 4px;
		height: 68px;

		.footer-icon{
			border-radius: 10px;
			text-align: center;
			padding-top:4px;

			img {
				height: 32px;
			}

			.label{
				position: absolute;
				width: 100%;
				bottom: -4px;
				text-align: center;
				font-size: 14px;
			}
		}

		.footer-icon.sub{
			background-color: #F2E03A;
			width: 44px;
			height: 44px;
		}
		.footer-icon.main{
			background-color: #F2E03A;
			width: 70px;
			height: 44px;
		}
		.footer-icon.blank{
			width: 44px;
			height: 44px;
		}
		.footer-icon.inactive{
			background-color: gray;
			pointer-events: none;
		}

		.footer-icon.hello{

			.hello-counter{
				font-size: 12px;
        margin-bottom: -4px;
        margin-top: -4px;
			}
		}
	}
}


/*.main-unit{
	.main-unit-room-profile{
		width: 60vw;
		height: 15vw;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
}*/

/*----------------------*/
/* stage */
/*----------------------*/
.main-components-stage{
  width: var(--stage-width);
  margin: 0 auto;

  img {
  	width: 100%;
  }

  .wall-area{
  	position: absolute;
  	top:0;
  	left: 0;
/*  	background-color: yellow;*/
  	width: 100%;
  	aspect-ratio: 240 / 56; /*幅と高さの比率*/
  }

  .floor-area, .carpet-area{
  	position: absolute;
  	top: calc( 56/156*100%);/* 56 / 100+56  */
  	left: 0;
  	width: 100%;
  	aspect-ratio: 240 / 100; /*幅と高さの比率*/
  }

/*  .carpet-area{
  	background-color: gray;
  }*/

}


/*  しまうボタン  */
.storage-end-btn{
	background-color: #F8C53A;
	width: 150px;
	height: 44px;
	color: white;
	border-radius: 10px;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	position: absolute;
	top: 20px;
	left: calc(50% - 75px);
  text-align: center;
  padding: 10px;
}

.main-player{
	position: absolute;
	width: calc( var(--stage-width) / 960 * 128 );/* stageの横幅が80vwなので */
	aspect-ratio: 1 / 1; /*幅と高さの比率を 1:1 (正方形) に固定*/
	pointer-events: none;

	.player-content {
		/*margin-left: calc( -1*var(--stage-width)/ 960 * 128 / 2 );*//*大きさの半分 左にずらす*/
		/*margin-top: calc( -1*var(--stage-width) / 960 * 128 *0.8 );*//*大きさの80% 上にずらす*/
		margin-left: calc( -1 * 100% / 2 );
		margin-top: calc( -1 * 100% * 0.8 );
		width: 100%;
		height: 100%;
	}

	.ikimono {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background-size: contain;
	}
	.accessory-area{
		width: 100%;
		height: 100%;
		background-size: contain;
		position: absolute;
		top:0;
		left: 0;
	}

	/* みゃ、みゅ、みょ */
	.popup_M {
		position: absolute;
		width: calc(24% * 2);
		height: calc(16% * 2);
		left: 25%;
		top: 25%;
	}

	/* ぎゅ、もっ  */
	.popup_S{
		position: absolute;
		width: calc(16% * 2);
		height: calc(16% * 2);
		left: 25%;
		top: 25%;
	}

	/* すごーい 128x64*/
	.stamp{
		position: absolute;
		width: calc(32% * 2);
		height: calc(16% * 2);
		left: 18%;
		top: 25%;
	}
}

/*------------------*/
/* アクセサリー       */
/*------------------*/
.player-accessory{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	img{
		display: block;
		position: absolute;
		top:0;
		left: 0;
	}

	.img8{
		width:calc( 100% * 8/32);
	}
	.img16{
		width:calc( 100% * 16/32);
	}
	.img32{
		width:calc( 100% * 32/32);
	}
}

.main-door{
	position: absolute;
	width: calc( var(--stage-width) / 960 * 192 );
	aspect-ratio: 192 / 128; /*幅と高さの比率*/

	top: 16.8%;
	left: calc( var(--stage-width) / 960 * 384);/* 480 - 96(ドア半分) = 384  */

	display: flex;
	justify-content: center;

	img {
		/*width: 100%;*/
		width: auto;
		height: 100%;
	}
}

/* たべものあげて出てくるコイン */
.drop-coin{
	position: absolute;
	top: 0;
	left: 0;

	img{
		width: 12px;
		height: 12px;
	}
}

/*---------------------*/
/* fav
/*---------------------*/
.fav-panel{
	background-color: #E0D2EF;
	border-radius: 10px;
	width: 100%;
	padding: 8px;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
}


/*---------------------*/
/* バナー
/*---------------------*/
.main-banner{
	width:100%;
	aspect-ratio: 1280 / 240;
	background-size: cover;
}

/* モバイル状態では非表示 */
.banner-pc{
	display: none;
}

/*---------------------*/
/* プロフィールヘッダー
/*---------------------*/
.profile-header{
	display:flex;
	align-items: center;
	justify-content: space-around;
	padding:10px;
	/*z-index:1;*/

	.sub{
		width: 32px;
		text-align: center;
	}

	.fav-button{
		width: 32px;
		height: 32px;

		img{
			height: 100%;
		}

		.fav-count{
			position: absolute;
			top: -20px;
			left: -50%;
			font-size:12px;
			color: white;
			background-color: #B98DC8;
			border-radius: 10px;
			width: 64px;
			height: 20px;
			padding-top: 2px;
		}
		.fav-count::after{
			content: '';
		  position: absolute;
		  bottom: -8px; /* 吹き出しの下に配置 */
		  left: 50%;
		  transform: translateX(-50%); /* 中央に配置 */
		  border-top: 8px solid #B98DC8; /* 吹き出しの背景色と同じ色 */
		  border-left: 5px solid transparent;
		  border-right: 5px solid transparent;
		}

	}

	.profile-header-name {
		width: 240px;
		background-size: cover;
		background-image: url('/img/decoration_parts/label_bg.png');
		text-align: center;
		padding: 4px;

		img {
			height: 16px;
			position: absolute;
			right: 8px;
			top:4px;
		}

		/*プロフ詳細*/
		.profile-balloon {
			position: absolute; /* 吹き出しの基準点とする */
		  background-color: #FFFACE;
		  color: #704929;
		  padding: 10px;
		  border-radius: 5px;
		  width: 300px;
		  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.4);
		  left: -30px;
		  top:40px;
		  text-align: left;
		}
		.profile-balloon::before {
			content: "";
		  position: absolute;
		  bottom: 100%; /* 吹き出し要素の上端に配置 */
		  right: 40px;
		  margin-left: -10px; /* 三角形の幅の半分のマイナスマージンで中央寄せ */
		  border: 10px solid transparent; /* 透明な枠線 */
		  border-bottom-color: #FFFACE; /* 下側の枠線の色を吹き出しの背景色に */
		}
	}

	img {
		height: 32px;
	}
}

/*---------------------*/
/* 所持金
/*---------------------*/
.money-view {
	display:flex;
	gap:4px;

	.money-view-point{
		display: flex;
		justify-content: space-between;
		padding:2px;
		width: 85px;
		height: 20px;
		border-radius:20px;
		font-size:12px;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);

		img{
			height: 16px;
		}

		.plus-icon{
			position: absolute;
			border-radius: 4px;
			width: 16px;
			height: 16px;
			left: 20px;
			padding: 1px;

			img{
				width: 100%;
				height: 100%;
			}
		}
		.plus-icon.myain{
			background-color: #CEAAED;
		}
		.plus-icon.coin{
			background-color: #E88A36;
		}
	}

	.money-view-point.myain {
		background-color: #E0D2EF;
	}
	.money-view-point.coin {
		background-color: #F2E03A;
	}
}


/*---------------------*/
/* mono design
/*---------------------*/
.design-icon{
	width: 44px;
	height: 44px;
	background-size: cover;
}

.mono-list{
	display: flex;
	gap: 4px;
	flex-direction: row;
	flex-wrap: wrap;
}

.mono-icon{
	width: 44px;
	height: 44px;
	background-size: cover;
	background-color: white;
	border-radius: 10px;
	padding: 4px;
	img {
		width: 100%;
	}
}

.mono-object{
	position: absolute;
	/*top:100px;*/
	/*left:100px;*/
	top: 10%;
	left: 20%;
	z-index:9999;

	width: calc( var(--stage-width) / 960 * 128 );
	/*aspect-ratio: 1 / 1;*/ /*幅と高さの比率を 1:1 (正方形) に固定*/

	img{
		width: 100%;
	}

	.mono-content{
		/*margin-left: calc( -1*var(--stage-width) / 960 * 128 / 2 );*/  /*大きさの半分 左にずらす*/
		/*margin-top: calc( -1*var(--stage-width) / 960 * 128 *0.8 );*/ /*大きさの80% 上にずらす*/
		margin-left: calc( -1 * 100% / 2 );
		margin-top: calc( -1 * 100% * 0.8 );
		width: 100%;
		height: 100%;
		display: flex;
    flex-direction: column;
    align-items: center;
	}

	.mono-controller{
		/*position: absolute;*/
		/*width: 100%;*/
		display: flex;
		gap: 4px;
		justify-content: space-evenly;

		img {
			width: 24px;
		}
	}

	.mono-child{
/*			position: absolute;*/
/*			bottom:0;*/
/*			left:0;*/
			width: 100%;
			/*aspect-ratio: 1 / 1;*/
			pointer-events: none;
			margin-top: calc( -1 * 100% * 0.2 );
			/*background-color: red;*/
	 }

	/*8x8*/
	.size-s{
		width: calc( 100% * 32 / 128 );
		margin: 0 auto;
    /*margin-top: calc(var(--stage-width) / 960 * 96);*//*下にもってくる*/
    padding-top: calc( 100% * 96 / 128);
	}

	/*16x16*/
	.size-m{
		width: calc( 100% * 64 / 128 );
		margin: 0 auto;
    padding-top: calc( 100% * 64 / 128);/*下にもってくる*/
	}
	/*32x32*/
	.size-l{
		width: calc( 100% * 128 / 128 );
		margin: 0 auto;		
	}
}


/*---------------------*/
/* dot-editor-modal               */
/* dot-editor自体は、専用のcssがある */
/*---------------------*/
.dot-editor-modal{
	touch-action: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
	z-index:1;

	.main{
		background-color: white;
		width: 100%;
		max-width: 400px;
		height: 100%;
		margin: 0 auto;
		padding:10px;

		.title {
			text-align: center;
		}


		ul {
			display:flex;
			flex-direction: row;
			gap:8px;
			color:white;
			padding-top:10px;
			
			.close{
				width: 25%;
			}
			.save{
				width: 50%;
			}
			.edit{
				width: 25%;
			}

			button{
				background-color: #F8C53A;
			}
		}
	}	
}

/*---------------------*/
/* mono                */
/*---------------------*/
.mono-modal{
	.dialog-body{
		display: flex;
    flex-direction: column;
    align-items: center;
    gap:4px;
	}
	.mono-modal-img{
		width: 128px;
	}
	.mono-modal-text{
		background-color: #E0D2EF;
		border-radius: 10px;
		padding: 8px;
    width: 100%;
    max-width: 320px;
	}
	.mono-modal-buttons{
		display: flex;
    width: 100%;
    max-width: 320px;
    gap:8px;

		button{
			background-color: #B98DC8;
			color: white;
		}
	}
	.mono-eat-button{
		width: 100%;
    max-width: 320px;
		background-color: gray;
		color: white;
		margin: 0 auto;
	}
	.mono-eat-button.active{
		background-color: #E88A36;
	}

	.mono-wear-button{
		width: 100%;
    max-width: 320px;
		background-color: #B98DC8;
		color: white;
		margin: 0 auto;
	}
}


/* モノ コピー */
.mono-copy-modal{
	.dialog-body{
		display: flex;
    flex-direction: column;
    align-items: center;
    gap:4px;

    .mono-copy-img{
			width: 128px;
		}
	}
}



/* menu-buttons sub-menuとvoice-menuの総括*/
.menu-buttons{
	display: flex;
	justify-content: space-between;
	padding: 4px;
	margin-top: -16px;
	margin-bottom: 8px;
}

/*---------------------*/
/* sub-menu            */
/*---------------------*/
.sub-menu{

	/* ハンバーガーメニュー部分 */
	.sub-menu-trigger{
		background-color: #E88A36;
		border-radius: 10px;
		box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.8);
		width: 60px;
		height: 44px;
		padding: 4px;
		text-align:center;

		img {
			height: 100%;
		}
	}

	.sub-menu-label{
		position: absolute;
		bottom: -4px;
		color: black;
		width: 100%;
		text-align: center;
		pointer-events: none;
	}

	.sub-menu-trigger.active{
		background-color: #673931;
	}

	/*メニューリスト*/
	.sub-menu-list-box{
		position: absolute;
		top: calc( -45 * 4px);
		right:0;
		padding-left:12px;

		ul {
			display: flex;
			gap: 9px;
			height: calc(45 * 4px);
      flex-wrap: wrap;
      align-content: flex-end;
      flex-direction: column;

			li{
				width: 36px;
				height: 36px;
				padding: 2px;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.8);

				img {
					width: 100%;
				}
			}
		}
	}

	/* バッジ */
	.sub-menu-badge.active{
		position: absolute;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: red;
		top:-2px;
		right: -2px;
	}
}

/*---- sub menu  ----*/
.sub-menu-dialog {

 .sub-menu-dialog-list{
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	padding-top: 20px;
 }

 .sub-menu-panel{
 	background-color:#E88A36;
 	border-radius: 10px;
 	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.45);
 	color: white;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 8px;

	img{
		height: 32px;
	}

	/* バッジ */
	.sub-menu-badge.active{
		position: absolute;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: red;
		top:2px;
		left: 2px;
	}

 }

}


/*---------------------*/
/* menu ikimono       */
/*---------------------*/
.menu-ikimono {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 10px;

	.main-icon{
	
		img{
			height: 32px;
			transition: transform 0.3s ease-in-out; 
		}
	}

	.main-icon.active{
		img{
			transform: rotate(180deg);
		}
	}

	.volume-icon{
		
		img{
			height: 32px;
		}
	}

	.menu-ikimono-stamp{

		img{
			height: 32px;
		}
	}
}


/*---------------------*/
/* voice */
/*---------------------*/
.voice-menu{
		display:flex;
		gap:8px;

		li {
			width: 64px;
			height: 44px;
			background-color: #F2E03A;
			border-radius:10px;
			padding:8px;
			box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.45);
			text-align: center;

			img{
				height: 100%;
			}
		}

		li:hover {
			background-color: #fff;
			box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.8);
		}
}

/*---------------------*/
/* center menu  */
/*---------------------*/
.center-menu {
	display:flex;
	align-items: center;
	justify-content: space-evenly;
	background-color: #704929;

	.hello-button{

	}
}


/*---------------------*/
/* stamp-log-dialog   */
/*---------------------*/
.stamp-log-dialog{

	.bottom-up-dialog-footer{
		height: 54px;/*なぜか heightがきかない..*/
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stamp-button{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background-color: #F2E03A;
		width: 110px;
		height: 40px;
		border-radius: 20px;
		padding: 5px;
		font-size:24px;

		img{
			height: 100%;
		}
	}
}

/*---- log board ----*/
.log-board{
	background-color: #FFFACE;
	height: 100%;
	overflow-y: scroll;

	/*ログ一覧*/
	.log-board-logs{
		display: flex;
    flex-direction: column;
    gap: 10px;
	}

	/*ログ1つ1つ*/
	.log-board-log{
		display:flex;
		justify-content: center;
		align-items: flex-end;
		margin-top:8px;
		gap:10px;

		.log-board-avatar{
			width: 64px;
			height: 64px;

			.ikimono-view{
				width: 100%;
				height: 100%;
			}
		}

		.log-board-content{

			.log-board-balloon{
				border-radius:15px;
				background-color:#EEEB43;
				padding: 8px;
				text-align: center;
				width: 210px;

				.log-board-main-content{
					display: flex;
					align-items: center;

					.log-message{
						text-align: left;
					}
				}

				img{
					height: 32px;
				}
			}

			.log-board-balloon::before{
				content: '';
			  position: absolute;
			  left: -15px; /* 吹き出しの左に配置 */
			  bottom: 5px;
			  border-width: 10px;
			  border-style: solid;
				border-color: transparent #EEEB43 transparent transparent; /* 上、右、下、左 */
			}

			.log-board-name{
				font-size: 12px;
			}
		}
	}

	.log-board-date{
		font-size: 10px;
		width: 40px;
	}
}

/*---------------------*/
/* stamp modal  */
/*---------------------*/
.stamp-modal{
	position: absolute;
	width: 345px;
	left: calc( 50% - 345px/2 );
	bottom : 60px;
	background-color: #F2E03A;
	border-radius:10px;
	padding:8px;
	box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.4);

	.stamp-modal-header{
		display:flex;
		justify-content: space-between;
		align-items: center;

		img {
			height: 32px;
		}
	}

	.stamp-modal-list{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-around;
		max-height: 300px;
    overflow-y: scroll;
	}
}

/*  一回なしにしとく。2025.7.20  */
.___stamp-modal::after{
	content: '';
  position: absolute;
  bottom: -20px; /* 吹き出しの下に配置 */
  left: 50%;
  transform: translateX(-50%); /* 中央に配置 */
  border-top: 20px solid #F2E03A; /* 吹き出しの背景色と同じ色 */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.___stamp-modal::before { /* 影となる三角形 */
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 18px 0 18px;
  border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent; /* 影の色（少し濃いめに） */
  bottom: -22px; /* 少しずらして影のように見せる */
  left: 50%;
  transform: translateX(-50%); /* 中央に配置 */
  z-index: -1; /* 本体より後ろに配置 */
}


/* -------------------------------- */
/* タイムライン */
/* -------------------------------- */
.time-line-log-dialog{

	.iconTab{
		height: 54px;
	}
}

/* -------------------------------- */
/* うりものやログ */
/* -------------------------------- */
.visit-menu{
	flex-grow: 1;/*残りの分の高さとする*/
	overflow-y: scroll;

	display: flex;
	flex-direction: column;
	padding-top: 4px;
}

.visit-menu-header{
	display: flex;
	justify-content: space-between;
	align-items: center;

	.visit-tab-menu{
		display: flex;

		li {
			width: 64px;
			border-radius: 10px 10px 0 0;
			background-color: gray;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 2px;
			padding: 2px;
			font-size: 12px;
		}

		li.active{
			background-color: #E0D2EF;
		}

		img {
			width: 24px;
			height: 24px;
		}
	}
}

.visit-menu-body{
	flex-grow: 1;
	background-color: #E0D2EF;
}

/* メニューがさわれないように隠す */
.visit-menu-hide-cover{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}



/* 一回無効化 */
.___visit-menu{
	display:flex;
	flex-direction: column; /* 要素を縦に並べる */
	height: calc( 100% - 64px);/*centerメニュー分マイナス*/
	overflow-y: hidden;

	/* 切り替えタブ */
	.visit-menu-tab{
		display: flex;
		height: 35px;

		li {
			background-color: gray;
			display: flex;
			font-size: 16px;
			width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;

			img{
				height: 16px;
			}
		}

		.visit-menu-tab-urimono.active{
			background-color: #FFCBCB;
		}

		.visit-menu-tab-log.active{
			background-color: #FFFACE;
		}

	}

	/* 売りモノやログ */
	.visit-menu-board{
		flex-grow: 1;/*残りの分の高さとする*/
		height: calc(100% - 35px);/*タブの高さ引いた分*/
		overflow-y: hidden;

		
		
	}	
}

/**
 * doorから出かける先
 */
.visit-modal {
	.fav-list {
		display: flex;
		gap:8px;
		flex-direction: column;
	}
}

/* -------------------------------- */
/* commodity */
/* -------------------------------- */
.commodity-board{
	background-color: #E0D2EF;
	height: 100%;
	overflow-y:scroll;
	padding: 8px;

	.list {
		display:flex;
		gap:12px 5px;
		flex-direction: row;
    flex-wrap: wrap;

		.commodity-panel{
			background-color:white;
			border-radius:10px;
			box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
			width:64px;
			height:64px;

			.show-add, .show-blank{
				padding:8px;
				height:100%;

				img {
					width: 100%;
				}
			}

			.show-detail, .show-sale, .show-soldout, .show-sales{
				padding:2px;
				height:100%;
				display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

				img {
					width: 80%;
				}

				.point {
					width: 100%;
					position: absolute;
					bottom: -8px;

					.point-value{
						font-size: 12px;
					}
				}
			}

			.sold-out-label{
				position: absolute;
				bottom:35px;
				left : 10%;
				width: 80%;
				background-color: red;
				color: white;
				padding: 2px;
				transform: rotate(-10deg);
				font-size: 12px;
			}

			.show-sales{

				.point{
					background-color: #E27285;
					color: white;
				}
			}
			.sales-label{
				position: absolute;
				top  : 10px;
				left : 20%;
				width: 60%;
				background-color: #F8C53A;
				color: black;
				padding: 2px;
				text-align: center;
				font-size: 12px;
				border-radius: 20px;
			}

			.type-icon {
				position: absolute;
				top: 2px;
				left: 2px;
				width: 24px;
				height: 24px;
			}

			.player-icon {
				position: absolute;
				top: 2px;
				right: 2px;
				width: 24px;
				height: 24px;
			}

		}/* commodity-panel */

		
	}

}


/* 商品詳細 */
.commodity-modal{

	.dialog-body{
		display: flex;
    flex-direction: column;
    align-items: center;
    gap:4px;


    .commodity-modal-sub-header {
			display:flex;
			background-color:#F2E03A;
			border-radius:20px;
			justify-content: space-between;
			align-items: center;
			max-width: 320px;
			padding:4px;

			.icon{
				img{
					width: 24px;
				}
			}
			.name{

			}
		}

    .commodity-modal-img{
    	width: 128px;
    }

    .commodity-modal-text{
    	background-color: #E0D2EF;
			border-radius: 10px;
			padding: 8px;
	    width: 100%;
	    max-width: 320px;
    }
	}
}

/* 商品更新 */
.commodity-update-modal{
	.commodity-update-modal-img{
		display: block;
		width: 128px;
		margin: 0 auto;
	}
}


/*---------------------*/
/* 商品棚の追加         */
/*---------------------*/
.add-com-shelf-panel{
	background-color:#CDCDCD;
	border: dotted 2px gray;
	border-radius:10px;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	width:64px;
	height:64px;

	.show-add-com-shelf{
		padding:2px;
		height:100%;
		display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

		img {
			width: 80%;
		}

		.point {
			width: 100%;
			position: absolute;
			bottom: -8px;

			.point-value{
				font-size: 12px;
			}
		}
	}
}

/* 購入確認  */
.commodity-add-shelf-modal{
	.content-box{
		display: flex;
		flex-direction: column;
    align-items: center;
    gap:8px;
	}
}


/*---------------------*/
/* ikimono - slide        */
/*---------------------*/
.ikimono-slide{

	.avatar-box{
		width: 128px;
		height: 128px;
		margin: 0 auto;
	}

	.ikimono-slide-list{
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
}

.ikimono-view{
	width: 128px;
	height: 128px;

	img{
		width: 100%;
	}
}

.ikimono-icon{
	width: 44px;
	height: 44px;
	background-size: cover;
	background-color: white;
	border-radius: 10px;
	padding: 4px;
	img {
		width: 100%;
	}
}

/*---------------------*/
/* search - slide      */
/*---------------------*/
.search-slide{

	/* オーバーライド */
	.slide-menu-body{
		padding-left: 4px;
		padding-right: 4px;
	}

	.search-count{
		padding: 4px;
	}

	.search-icon{
		position: absolute;
		top: 6px;
		right: 6px;
		background-image: url('../img/dotIcons/icon_search.png');
		width: 32px;
		height: 32px;
		background-size: cover;
	}

	.search-list{
		display: flex;
		flex-direction: column;
		gap:8px;
	}
}

/*---------------------*/
/* アクセサリー装備       */
/*---------------------*/
.accessory-equip-modal{
	.edit-area{
		width: 320px;
		height: 320px;
		margin: 0 auto;
		overflow: hidden;

		.ikimono{
			width: 100%;
		}

		.newAccessoryBox{
			position: absolute;
			left: 0;
			top: 0;
			text-align:center;

			.accessory-controller {
				img{
					width: 44px;
					height: 44px;
				}
			}
		}

		/*.accessory{
			position: absolute;
			left: 0;
			top: 0;
		}*/
	}
}

/*---------------------*/
/* mono - slide        */
/*---------------------*/
.mono-menu{

	.iconTab-on{
		background-color: #D480BB;
	}
	.iconTab-off{
		background-color: #E0D2EF;
	}
}
.mono-menu-content{
	padding: 4px;

	.add-btn{
		background-color: #D480BB;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
		border-radius: 10px;
		color: white;
		padding: 12px;
		width: 100%;
		text-align: center;
		margin-top: 24px;
	}
}
.mono-slide-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 4px;
	padding-bottom: 4px;

	.mono-name-count{
		display: flex;
		gap: 8px;
	}

	.point{
		.material-plus-icon{
			border-radius: 4px;
			width: 16px;
			padding: 1px;
			background-color: #E88A36;
			img{
				width: 14px;
			}
		}
	}
}
.mono-slide-footer-content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:8px;
	padding: 0px 8px 20px 8px;

	button {
		background-color: #B98DC8;
		color: white;

		img {
			height: 24px;
		}
	}
}

/*---------------------*/
/* interior - slide     */
/*---------------------*/
.interior-menu {
	.iconTab-on{
		background-color: #D480BB;
	}
	.iconTab-off{
		background-color: #E0D2EF;
	}
}
.interior-slide-list-header {
	/*display: flex;
	align-items: center;
	justify-content: space-between;*/
	text-align: right;
}
.interior-icon{
	width: 44px;
	height: 44px;
	/*background-size: cover;*/
	overflow: hidden;
	display: flex;
	justify-content: center;

	img{
		height: 100%;
	}
}

/*インテリア詳細*/
.interior-modal{
	
	.interior-modal-content{
		overflow: hidden;
		text-align: center;
		display: flex;
    justify-content: center;

		img{
			height: 128px;
			width: auto;
		}
	}
}

/*インテリア売却*/
.interior-sale-modal{

	.interior-sale-modal-content{
		overflow: hidden;
		text-align: center;

		img{
			height: 128px;
			width: auto;
		}
	}

	.interior-sale-modal-points{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding-top: 8px;
	}

	.point{
		background-color: lightsteelblue;
	}
}

/*---------------------*/
/* gacha - slide       */
/*---------------------*/
.gacha-slide{
	.slide-menu-body{
		padding-top: 10px;
	}

	.gacha-message{
		text-align: center;
		background-color: #E0D2EF;
		border-radius: 10px;
		padding: 12px;
		width: 280px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;

		.gacha-message-main{

		}

		.gacha-message-icon{
			img{
				width: 24px;
				height: 24px;
			}
		}
	}
}

.gacha-slide-banner-normal{
	width: 256px;
	height: 320px;
	margin: 0 auto;

	img{
		width: 100%;
		height: 100%;
	}
}
.gacha-slide-banner-event{
	width: 256px;
	height: 320px;
	margin: 0 auto;

	img{
		width: 100%;
		height: 100%;
	}

}
.gacha-slide-button-block{
	display:flex;
	gap: 10px;
  justify-content: center;

  button{
  	height: auto;
  	margin: 0;
  	line-height: 1;
  }

	.gacha-point{
		padding: 8px;
	}

	.gacha-button{
		border-radius:10px;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
		padding:8px;

		.gacha-button-count{
			display:flex;
			justify-content: center;

			img {
				height: 16px;
			}

			span{
				font-size: 12px;
			}
		}
		.gacha-button-label{
			color: white;
			font-size: 26px;
			text-align: center;
		}

		.gacha-button-bonus{
			display: flex;
			gap: 8px;
			flex-direction: row;
      justify-content: center;
      font-size: 12px;
      color: white;
      padding-top: 6px;

			img {
				height: 16px;
			}
		}

	}
}

/* ガチャ確認モーダル */
.gacha-confirm-modal {
	.gacha-banner{
		margin: 0 auto;
		width: 140px;
		height: 165px;

		img{
			width: 100%;
		}
	}

	.gacha-cost{
		width: 150px;
		margin: 0 auto;
		display: flex;
		gap: 8px;
		flex-direction: column;

		.point{
			width: 100%;
			box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
		}
	}

	.gacha-message{
		text-align: center;
		padding: 10px;
		font-size: 24px;
	}
}

/* ガチャ結果モーダル */
.gacha-result-modal{

	.effect-box{
		width: 256px;
		height: 256px;
		margin: 0 auto;

		img{
			width: 100%;
		}
	}

	.result-box{
		display: flex;
		gap: 4px;
		flex-wrap: wrap;
		width: 100%;
	}

	/* オマケ */
	.bonus-box{
		padding-top: 8px;

		.bonus-content{
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #E0D2EF;
	    border-radius: 10px;
	    padding: 8px;

			.gacha-bonus{
				display: flex;
				gap:8px;

				.gacha-bonus-icon{
					height: 24px;

					img{
						height: 100%;
					}
				}
			}
		}
	}

}

/* ガチャ結果パネル */
.gacha-result-panel{
	display: flex;
	gap: 4px;
	align-items: center;
	width: calc(50% - 2px);
	padding: 4px;
	border-radius: 10px;

	.icon{
		overflow: hidden;
		width: 44px;
		height: 44px;
		display: flex;
		justify-content: center;

		img{
			height: 100%;
		}
	}


	.name{
		font-size: 16px;
	}
}

.gacha-result-panel.UC{
	background-color: mediumaquamarine;
}
.gacha-result-panel.R{
	background-color: coral;
}
.gacha-result-panel.SR{
	/*background-color: lightgray;*/
	background:linear-gradient(45deg, lightgray 0%, white 60%, lightgray 100%);
}
.gacha-result-panel.UR{
	/*background-color: goldenrod;*/
	background:linear-gradient(45deg, goldenrod 0%, white 60%, goldenrod 100%);
}


/* ガチャ排出確率 */
.gacha-list-modal{
	.gacha-data-list{
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}	
}

/* ガチャ詳細モーダル */
.gacha-detail-modal{

	.gacha-detail-modal-content{
		overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	}

	.gacha-detail-modal-content.interior{
		img{
			height: 128px;
			width: auto;
		}
	}

	.gacha-detail-modal-content.material{
		img{
			height: 64px;
			width: auto;
		}
	}
}


/*-----------------------------------*/
/* setting slide  */
/*-----------------------------------*/
.setting-slide{

	.slide-menu-body{
		padding: 8px;
	}

	.current-version{
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 12px;
	}
}

/*-----------------------------------*/
/* fav-slide  */
/*-----------------------------------*/
.fav-slide{

	.fav-list{
		display: flex;
		flex-direction: column;
		gap:8px;
	}
}
.fav-user-panel{

	.header{
		display: flex;
		align-items: center;

		.ikimono-box{
			width: 32px;
			height: 32px;

			.ikimono-view{
				width: 100%;
				height: 100%;
			}
		}
	}
}


/*---------------------*/
/* spshop - slide       */
/*---------------------*/
.sp-shop-slide{

	.sp-shop-slide-content{
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 4px;
	}

	.point{
		background-color: lightsteelblue;
	}

	.sp-shop-slide-view-area{
		display: flex;
    flex-wrap: wrap;
	}
}

.sp-shop-icon{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 64px;
	height: 64px;
	padding: 2px;

	.icon{
		display: flex;
		justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;

    img{
    	height: 100%;
    }
	}

	.point{
		width: 100%;
	}

}

/* SP SHOP modal  */
.sp-shop-modal{

	.sp-shop-modal-content{
		overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	}	

	.sp-shop-modal-content.interior{
		img{
			height: 128px;
			width: auto;
		}
	}
}


/*-----------------------------------*/
/* notice-slide */
/*-----------------------------------*/
.notice-slide{

	.notice-slide-list{
		display: flex;
		gap: 10px;
		flex-direction: column;
		padding: 4px;
	}

	.notice-panel{
		background-color: #E0D2EF;
		border-radius: 10px;
		padding: 8px;
		font-size: 16px;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
		overflow: hidden;

		img{
			max-height: 100px;
			display: block;
      margin: 0 auto;
      padding-top: 8px;
      padding-bottom: 8px;
		}

		.notice-panel-start{
			text-align: right;
			font-size: 10px;
		}
	}

	.notice-panel:hover{
		background-color: #FFDADA;
		cursor: pointer;
	}
}

/*-----------------------------------*/
/* present-slide */
/*-----------------------------------*/
.present-slide{
	.present-slide-content{
		padding: 8px;

		.present-panel{
			border: solid 1px;
			border-radius: 10px;
			padding: 8px;
			width: 100%;
			background-color: #FFDADA;
			display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;

			.present-panel-icon{
				height: 32px;
				width: 32px;

				img{
					height: 100%;
					width: 100%;
				}
			}

			.present-panel-body{
				flex-grow: 1;
			}

			.date{
				font-size: 12px;
				text-align: right;
			}
		}

		.present-panel.nonactive{
			background-color: gray;
		}
	}
}
.present-modal{

	.present-modal-content{
		display: flex;
		flex-direction: column;
    align-items: center;

		.present-modal-img{
			width: 44px;
			height: 44px;
		}

		.description{
			width: 100%;
		}
	}
}


/*-----------------------------------*/
/* player detail  */
/*-----------------------------------*/
.player-detail-modal {

	.ikimono-box{
		.ikimono-view{
			margin: 0 auto;
		}
	}
	.name {
		text-align: center;
	}
}


/*-----------------------------------*/
/* Need Point  汎用化してもいいかも  */
/*-----------------------------------*/
.need-point {
	background-color: #F2E03A;
	border-radius: 20px;
	padding: 4px;
	display:flex;
	align-items: center;
	justify-content: space-between;
	width:130px;
	margin: 0 auto;

	.need{
		color: red;
	}

	img {
		height: 24px;
	}
}

/*-----------------------------------*/
/* Point Slider 汎用化してもいいかも  */
/*-----------------------------------*/
.point-slider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding:10px;
	font-size:16px;

	.min,.max{
		width: 32px;
		height: 32px;
		border-radius: 50%;
		text-align: center;
		padding: 4px;
		background-color:#59CF93;
	}

	.min{
		margin-right:-4px;
	}
	.max{
		margin-left:-4px;
	}

	.bar{
		width:200px;
		height: 10px;
		background-color: #59CF93;
		z-index:1;
	}
	.draggable {
		width:15px;
		height: 20px;
		background-color: #42A459;
		margin-top:-5px;

		.current-point{
			position: absolute;
			top:-16px;
			width: 15px;
			text-align: center;
			font-size: 12px;
		}
	}
}



/*-----------------------------------*/
/* アカウントの削除  */
/*-----------------------------------*/
.account-remove-modal{
	font-family:sans-serif ;

	h2{
		text-align: center;
	}

	li{
		text-align: center;
		color: red;
	}
}

/*------------------------*/
/* purchase               */
/*------------------------*/
.purchase-modal{
	.paypay-icon{
		display: flex;
		flex-direction: column;
		align-items: center;

		img{
			height: 32px;
		}
	}
}

.purchase-items{
	display: flex;
	gap: 8px;
	flex-direction: column;
}
.purchase-panel{
	background-color:#CEAAED ;
	border-radius: 10px;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
	display: flex;
	padding: 8px;
	align-items: center;
	font-size: 16px;

	.icon {
		padding-right: 8px;
		img{
			width: 32px;
		}
	}

	.title{
		flex-grow: 1;
	}

	.price{

	}
}

.purchase-item-detail{

	.price{
		background-color: #F2E03A;
		width: 100px;
		text-align: center;
		border-radius: 10px;
		padding: 4px;
		margin: 0 auto;
	}
}



/*---------------------*/
/* movie youtube      */
/*---------------------*/
.movie {
	position: absolute;
	top  : -100px;
	left : 0;
	width: 100%;

	.movie-box{
		background-color: black;
		padding: 10px;
		width: 80%;
		margin: 0 auto;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);

		.movie-content{
			width: 100%;
			aspect-ratio: 16 / 9;
		}
	}

	.movie-close{
		padding: 4px;
		padding-top: 20px;
		width: 32px;
		height: 64px;
		position: absolute;
		top: 0;
		left: -32px;
    background-color: black;

    img{
    	width: 100%;
    }
	}

	.movie-setting{
		padding: 4px;
		padding-top: 20px;
		width: 32px;
		height: 64px;
		position: absolute;
		top: 64px;
		left: -32px;
    background-color: black;

    img{
    	width: 100%;
    }
	}
}

/*------------------------*/
/* 流れるお知らせ */
/*------------------------*/
.flow-notice {
	height: 44px;
	width: 100%;
	padding-top: 12px;

	.marquee-container {
	  width: 100%; /* 親要素の幅を決定 */
	  overflow: hidden; /* テキストが親要素からはみ出したら隠す */
	  white-space: nowrap; /* テキストが折り返されないようにする */
	  box-sizing: border-box;
	}

	.marquee-text {
	  display: inline-block; /* インラインブロックにしてアニメーションを適用可能にする */
	  /*これをやると部屋移動時safari(PC)でレイアウトくずれるが、これがないと希望した動作ができない。flownoticeを丸ごと貼り直すことで対応した*/
	  padding-left: 100%;
	  animation: marquee 15s linear infinite; /* アニメーションの適用 */
	  /* duration: アニメーションの長さ（秒）、linear: 等速、infinite: 無限ループ */
	}	
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


/*------------------------*/
/* モト ショップ   */
/*------------------------*/
.moto-shop-modal{

	.moto-list{
		display: flex;
		flex-wrap: wrap;
	}
}
.moto-shop-panel{
	width: 33%;
	height: 100px;
	padding: 4px;

	.box{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
    align-items: center;

		img{
			width: 32px;
			height: 32px;
		}

		.point{
			width: 100%;
		}
	}
}

.moto-buy-modal{

	.content-box{
		display: flex;
		flex-direction: column;
    align-items: center;
	}
}


/*------------------------*/
/* ミャインからコインへの変換   */
/*------------------------*/
.convert-coin-modal{

	.convert-coin-modal-message{
		text-align: center;
	}

	.need-point{
		background-color: #E0D2EF;
	}
}

.convert-panel{
	display: flex;
	font-size: 24px;
	color: red;
	width: 250px;
  margin: 0 auto;
  padding-top: 44px;
  padding-bottom: 44px;
  justify-content: space-between;

	img{
		width: 24px;
		height: 24px;
	}
}

/*------------------------*/
/*  refund-modal */
/*------------------------*/
.refund-modal{

	img{
		height: 32px;
	}
}

/*------------------------*/
/* ちょっとしたもの   */
/*------------------------*/
.common-check-icon{
	width: 24px;
	position: absolute;
	top: -8px;
	right: -8px;
	border-radius:50%;
	border:solid 1px white;
	background-color: #F8C53A;

	img{
		width: 100%;
	}
}

/* タップすると入力に移動するようなやつ */
.common-input-view{
	background-color: #E0D2EF;
	border-radius: 10px;
	width: 100%;
	padding: 8px;
	white-space: pre-wrap;/*改行有効*/
}
.common-input-view::after{
	content:'';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url('../img/icons/ui/pen.png');
	background-size: contain; /* アイコンが要素内に収まるように調整 */
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 8px;
  bottom: 8px;
}

/* でかい box ボタン  */
.common-big-box-btn {
	background-color: white;
	border-radius: 10px;
	width: 44px;
	height: 44px;
	padding: 7px;

	img{
		width: 30px;
		height: 30px;
	}
}

.common-barrier{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
}

/*  メニューパネル  */
.common-menu-list{
	display: flex;
	flex-direction: column; /* 要素を縦に並べる */
	gap: 6px;

	.common-menu-panel{
	 	background-color:#E88A36;
	 	border-radius: 10px;
	 	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.45);
	 	color: white;
		display: flex;
		gap: 6px;
		align-items: center;
		padding: 8px;

		img{
			height: 32px;
		}
	}
}

/* 24pxのアイコン */
.common-icon-24{
	width: 24px;
	height: 24px;
}


/*-----------------------------------*/
/* レスポンシブ対応   768px以上を対象    */
/*-----------------------------------*/
@media screen and (min-width: 768px) {

	.main-ui-content {
		display:flex;
		flex-direction: row-reverse;
		/*height: calc(100% - 240/1280*100vw );*/

		/* center-menuまで */
		.main-block-1{
			height: 100%;
			padding: 12px;

			/* しまうボタン */
			.storage-end-btn{
				top: auto;
				bottom: 20px;
				position: relative;
			}
		}

		/* 売りモノやログ */
		.main-block-2{
			height: 100%;
			min-width: 440px;
			max-width: 440px;
			padding: 12px;

			.main-block-2-body{
				background-color: white;
				border-radius: 10px;
				padding: 8px;
				box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
			}
		}

		/* バナー PC を表示 */
		.banner-pc{
			display: block;
		}
		/* バナー mobile を非表示 */
		.banner-mobile{
			display: none;
		}

		/* みゃ、みゅー、みょっ */
		.menu-ikimono {
			position: relative;
			margin-top: -44px;
	}

}