@charset "utf-8";
/* CSS Document */
#scene a{
	text-decoration: none;
}
#scene a{ 
	color: #5a5237;
}
#scene a:visited{ 
	color: #5a5237;
}
#scene a:active{
	color: #5a5237;
}
.ttl{
	text-align: center;
	font-size: 18px;
	margin-bottom: 50px;
}
#scene{
	max-width: 840px;
	margin: auto;
}
#scene1,
#scene2{
	display: flex;
	margin: auto;
}
#scene1{
	justify-content: space-between;
}
#scene2{
	width: 68%;
	margin-top: 30px; 
	justify-content: space-around;
}
#scene .scene{
	position: relative;
}
#scene1 .scene{
	width:32%;
	height: 131px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene2 .scene{
	width:47%;
	height: 131px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene .scene .link{
	display: block;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#scene .scene-l{
	width: 64%;
	height: 134px;
	align: left;
}
#scene .scene-l p{
	margin: 0;
}
#scene .scene-r{
	width: 36%;
	height: 134px;
	align: right;
	background-image:url("https://kisste.itembox.design/item/scene-arrow.png");
	background-repeat: no-repeat;
	background-position: top 62px right 8%;
}
#scene .eng,
#scene .eng2{
	color: #a29561;
	font-size: 0.85rem;
	padding-left: 5%;
}
#scene .eng{
	margin-top: 50px;
}
#scene .eng2{
	margin-top: 42px;
}
#scene .jp{
	color:#5a5237;
	margin-top: 10px;
	padding-left: 5%;
	
}
 .background{
	max-width: 880px;
	margin: auto;
	padding: 50px 0;
	background-image:  url("https://kisste.itembox.design/item/background.png");
}


@media screen and (min-width: 320px) and (max-width: 767px) {
#scene{
	width: 90%;
	margin: auto;
}
#scene1,
#scene2{
	display: block;
	margin: 0 auto;
}
#scene1,
#scene2{
	width:100%;
}
#scene2{
	margin-top: 0px;
}
#scene .scene{
	width:100%;
	height: 136px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
	margin-bottom: 30px;
}
#scene .scene a{
	display: block;	
}
#scene .scene .link{
	display: block;
}
#scene .scene-l{
	width: 64%;
	align: left;
}
#scene .scene-r{
	width: 36%;
	align: right;
	background-image:url("https://kisste.itembox.design/item/scene-arrow.png");
	background-repeat: no-repeat;
	background-position: top 62px right 8%;
}
#scene .eng,
#scene .eng2{
	color: #a29561;
	font-size: 1.2em;
	padding-left: 5%;
}
#scene .eng{
	margin-top: 47px;
}
#scene .eng2{
	margin-top: 40px;	
}
#scene .jp{
	color:#5a5237;
	margin-top: 10px;
	font-size: 1.5rem;
	padding-left: 5%;
	
}
}

@media screen and (min-width: 768px) and (max-width: 1023px){
#scene{
	width: 95%;
	margin: auto;
}
#scene .scene img{
	width: auto;
	height: auto;
	}
#scene1 .scene{
	width:32%;
	height: 85px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene2 .scene{
	width:48%;
	height: 87px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene .eng,
#scene .eng2{
	color: #a29561;
	font-size: 0.7rem;
	padding-left: 5%;
}
#scene .eng{
	margin-top: 32px;
}
#scene .eng2{
	margin-top: 27px;
}
#scene .jp{
	color:#5a5237;
	font-size: 0.8rem;
	margin-top: 10px;
	padding-left: 7%;
}
#scene .scene-r{
	width: 36%;
	align: right;
	background-image:url("https://kisste.itembox.design/item/scene-arrow2.png");
	background-position: top 45px right 8%;
}
}

@media screen and (min-width: 1024px) and (max-width: 1031px){
   #scene1 .scene{
	width:32%;
	height: 120px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene2 .scene{
	width:47%;
	height: 120px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene .scene-l{
	width: 64%;
	height: 120px;
	align: left;
}
#scene .scene-r{
	width: 36%;
	height: 120px;
	align: right;
	background-image:url("https://kisste.itembox.design/item/scene-arrow.png");
	background-repeat: no-repeat;
	background-position: top 62px right 8%;
}
}

@media screen and (min-width: 1110px) and (max-width: 1367px){
   #scene1 .scene{
	width:32%;
	height: 130px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene2 .scene{
	width:47%;
	height: 130px;
	display: flex;
	border: solid #a29561 1px;
	background-color: #fff;
}
#scene .scene-l{
	width: 64%;
	height: 130px;
	align: left;
}
#scene .scene-r{
	width: 36%;
	height: 130px;
	align: right;
	background-image:url("https://kisste.itembox.design/item/scene-arrow.png");
	background-repeat: no-repeat;
	background-position: top 62px right 8%;
}
}