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

.about{
	background: #fff;
	padding: 180px 0 300px 0;
}

.about h2{
	margin-bottom: 30px;
}

.about_txt{
	text-align: justify;
	width: 580px;
	float: left;
	margin-right: 120px;
}

.about img{
	display: block;
	width: 580px;
	float: left;
}

.like{
	padding: 180px 0;
}

.like_txt_right{
	width: 580px;
	float: left;
}

.like_txt_left{
	width: 580px;
	float: left;
}

.like_right img{
	float: right;
}

.like_left img{
	float: left;
	margin-right: 60px;
}

.museums img{
	width: 380px;
	margin-right: 100px;
}

.museums p{
	width: 580px;
}

.about li{
	padding-top: 120px;
	border-bottom: solid 1px #222;
	text-align: justify;
}

.kabuki img{
	width: 280px;
	margin-right: 190px;
}

.date{
	font-weight: 400;
	font-size: 24px;
	margin-bottom: 30px;
}

.dot{
	display: block;
	position: relative;
	background-color: #222;
	border-radius: 50%;
}

.dot::after{
	position: absolute;
	content: "";
	top: 10px;
	left: 0;
	height: 1px;
	z-index: -1;
	background-color: #222;
}

.biography{
	position: relative;
	width: 100%;
}

.biography_list{
	position: absolute;
	display: flex;
	gap: 150px;
}

.biography_item{
	position: relative;
	z-index: 1;
}

.like_right{
	padding-bottom: 100px;
}

.like_left{
	padding-bottom: 120px;
}

.like_right:first-child{
	padding-top: 50px;
}

.like_right:last-child{
	border-bottom: none;
}

/*--------------------------------*/


@media (min-width: 768px) {
		
    .biography_item {
        width: 300px;
    }
	
	.biography{
		height: 300px;
	}
	
	.side-scroll{
		max-width: 1280px;
		height: 300px;
		margin: 0 auto;
	}
	
	.dot{
		width: 20px;
		height: 20px;
		margin-bottom: 20px;
	}
	
	.dot::after{
		width: 450px;
	}
}


/*--------------------------------*/


@media only screen and (max-width:767px){
	
	.about{
		padding:  60px 0 60px 0;
	}
	
	.about li{
		padding-top: 40px;
	}
	
	.biography_list{
		position: static;
		display: block;
		padding: 0 40px;
	}
			
	.side-scroll{
		width: 100%;
		height: auto;
		margin-top: 50px;
	}	
	
	.biography_item{
		display: block;
	}
	
	.dot{
		display: none;
	}
	
	.date{
		margin-bottom: 15px;
	}
	
	/*
	.dot{
		width: 20px;
		height: 20px;
		margin-bottom: 20px;
	}
	
	.dot::after{
		width: 450px;
	}
	
	.about_txt{
		width: 100%;
		float: none;
		margin-right: 0;
	}
	*/
	
	.about_txt{
		width: 100%;
		margin-bottom: 40px;
		float: none;
	}
	
	.about img{
		display: block;
		width: 100%;
		float: none;
	}

	.like_txt_right{
		width: 100%;
		float: none;
	}

	.like_txt_left{
		width: 100%;
		float: none;
	}

	.like_right img{
		width: 80%;
		float: none;
		margin: 0 auto;
	}

	.like_left img{
		width: 80%;
		float: none;
		margin: 0 auto;
	}

	.museums img{
		width: 80%;
		margin: 0 auto;
	}

	.museums p{
		width: 100%;
	}

	.kabuki img{
		width: 60%;
		margin: 0 auto;
	}

	.like_right{
		padding-bottom: 70px;
	}

	.like_left{
		padding-bottom: 70px;
	}
	
	p{
		line-height: 30px;
	}

}