/*=================================
全項目の大枠。
===============
====================================================*/

.item {
	position:fixed;
	top:0;
	/*left:0;*/
	right:0;
	bottom:0;
	background-color:#ffffff;
	/*background-color:#fffffffa;*/
	border-left:1px solid #e0e0e0;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:0 0 70px;
	display:none;
	width:360px;
	z-index:8;
}


/*=================================
項目の内容。
===============
====================================================*/

.item-title {
	font-size:19px;
	/* color:#fafafa; */
	/* width:300px; */
	height:55px;
	line-height:55px;
	border-bottom:1px solid #ddd;
	margin:0 0 20px 0;
	/* font-weight:bold; */
	text-align:center;
	position:relative;
	cursor:pointer;
}
.item-title::before {
	content:"";
	position:absolute;
	left:0;
	bottom:-1px;
	border-bottom:1px solid #568f7a;
	width:50%;
}

.item-box {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	color:#222;
	margin:0 auto;
	/* background:#f4f4f4; */
}
.item-box-large {
	width:100%;
	margin:0 10px;
}
.item-box-small{
	margin:0 0 40px 0;
}

.item-box ul {
	/* width:300px; */
	padding:0;
	margin:0;
}
.item-box li {
	border-bottom:1px dashed #bbb;
	height:52px;
	line-height:52px;
	list-style:none;
	padding:0 0 0 42px;
	margin:0;
	font-size:13px;
	background-image:url(https://pc.gachidigi.com/image/list.png);
	background-repeat:no-repeat;
	background-size:14px;
	background-position-y:18px;
	background-position-x:10px;
}
.item-box li:hover{
	background-color:#f9f9f9;
}
.item-box li a {
	color:#3f3f3f;
	display:block;
}

.item-banner {
	/* width:300px; */
	/*height:150px;*/
	background-color:#46aa78;
	border-radius:5px;
	margin:35px 0 25px;
}
.item-banner img{
	width:100%;
	height:auto;
	border-radius:5px;
}


/*=================================
調整用項目枠。
===============
====================================================*/

.item-box-for-adjustment-one,.item-box-for-adjustment-two{
	width:300px;
	height:10px;
	display:none;
}

/*=================================
項目枠の削除装置。
===============
====================================================*/

/*=================================
項目枠の削除装置。
===============*/


/* 画面右上の削除ボタン */
.item-close-button-upper-right{
	width:38px;
	height:36px;
	line-height:50px;
	border-radius:5px;
	cursor:pointer;
	text-align:center;
	position:fixed;
	top:30px;
	right:35px;
	display:none;
	z-index:10;
}

.item-close-button-upper-right-batsu{
	position:relative;
	width:38px;
	height:38px;
	cursor:pointer;
	margin:0;
}

.item-close-button-upper-right-batsu::before,.item-close-button-upper-right-batsu::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:2px;
	height:18px;
	background-color:#302f2d;
}

.item-close-button-upper-right-batsu::before{
	animation-name:item-close-button-upper-right1;
	-webkit-animation-duration:0.3s;
	animation-duration: 0.3s;
	/*アニメーション終了時点で停止*/
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.item-close-button-upper-right-batsu::after{
	animation-name:item-close-button-upper-right2;
	-webkit-animation-duration:0.3s;
	animation-duration:0.3s;
	/*アニメーション終了時点で停止*/
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}


@keyframes item-close-button-upper-right1 {
	0% {
		transform:translate(-50%,-50%) rotate(90deg);
		opacity:0;
	}
	50%{
		opacity:1;
		transform:translate(-50%,-40%) rotate(90deg);
	}
	100% {
		transform:translate(-50%,-35%) rotate(50deg);
		opacity:1;
	}
}
@keyframes item-close-button-upper-right2 {
	0% {
		transform:translate(-50%,-50%) rotate(-90deg);
		opacity:0;
	}
	50%{
		opacity:1;
		transform:translate(-50%,-40%) rotate(-90deg);
	}
	100% {
		transform:translate(-50%,-35%) rotate(-50deg);
		opacity:1;
	}
}