@charset "UTF-8";



/* profile */
#profile {
	padding:72px 0 48px;
	background:url("../images/article_bg_sp.png") center top / auto 48px no-repeat;
}


@media screen and (min-width:1024px) {
	#profile {
		padding:120px 48px 80px;
		background:url("../images/article_bg_pc.png") center top / auto 80px no-repeat;
	}
}



/* inner */
#profile .inner {padding:0 16px;}


@media screen and (min-width:1024px) {
	#profile .inner {padding:0;}
}



/* mugiwara_line */
.mugiwara_line {margin-bottom:24px;}

.mugiwara_line p br {display:none;}

.mugiwara_line p:nth-of-type(2) {
	margin-top:24px;
	background:#00B900;
}

.mugiwara_line p:nth-of-type(2) a {
	height:48px;
	color:#FFF;
	text-align:center;
	line-height:48px;
}

.mugiwara_line p:nth-of-type(2) a span {
	padding-left:28px;
	font-weight:500;
	display:inline-block;
	background:url("../images/line.svg") left center / 20px 20px no-repeat;
}


@media screen and (min-width:1024px) {
	.mugiwara_line {margin-bottom:48px;}

	.mugiwara_line p br {display:block;}

	.mugiwara_line p:nth-of-type(1) {text-align:center;}
}



/* rank */
.rank {
	width:72%;
	margin:0 auto;
}

.rank img:nth-of-type(2) {display:none;}


@media screen and (min-width:1024px) {
	.rank {width:100%;}

	.rank img:nth-of-type(1) {display:none;}
	.rank img:nth-of-type(2) {display:block;}
}



/* profile */
.profile {margin-top:8px;}


@media screen and (min-width:1024px) {
	.profile {
		margin-top:16px;
		display:flex;
	}
}



/* image */
.image {
	width:72%;
	margin:0 auto;
}

.thum_image {
	margin-top:8px;
	display:flex;
}

.thum_image li {
	width:33.3%;
	cursor:pointer;
}

.thum_image li:last-of-type {margin-right:0;}


@media screen and (min-width:1024px) {
	.image {
		width:490px;
		display:flex;
	}

	.large_image {width:365px;}

	.thum_image {
		width:117px;
		margin:0 0 0 8px;
		display:block;
	}

	.thum_image li {
		width:100%;
		height:163px;
		margin-top:8px;
		overflow:hidden;
	}

	.thum_image li:nth-of-type(1) {margin-top:0;}

	.thum_image li img {
		width:auto;
		height:100%;
	}
}



/* detail */
.detail {
	margin-top:24px;
	padding:24px 16px;
	background:#FFF;
}

.detail p {
	margin-top:8px;
	padding-top:16px;
	border-top:1px solid #C4BDB9;
}

.detail p span,
.name span {display:block;}

.detail p span:nth-of-type(1),
.name span:nth-of-type(1) {font-weight:500;}

.name span:nth-of-type(2) {font-size:134%;}

.twitter span:nth-of-type(2) {
	margin-top:4px;
	font-weight:400;
	border-radius:4px;
	background:#1DA1F2;
}

.twitter span:nth-of-type(2) a {
	height:48px;
	color:#FFF;
	text-align:center;
	line-height:48px;
}

.twitter span:nth-of-type(2) a span {
	padding-left:28px;
	display:inline-block;
	background:url("../images/twitter.svg") left center / 20px 20px no-repeat;
}

.iromachi span:nth-of-type(2) {
	margin-top:4px;
	font-weight:400;
	border-radius:4px;
	background:#9E0691;
}

.iromachi span:nth-of-type(2) a {
	height:48px;
	color:#FFF;
	text-align:center;
	line-height:48px;
}

.profile_movie_pc {display:none;}

.profile_movie_sp video,
.profile_movie_pc video {width:100%;}


@media screen and (min-width:1024px) {
	.detail {
		width:366px;
		margin:0 0 0 48px;
		padding:0;
		background:transparent;
	}

	.detail p {padding-top:24px;}

	.detail p span:nth-of-type(1),
	.name span:nth-of-type(1) {margin-bottom:4px;}

	.name span:nth-of-type(2) {font-size:129%;}

	.twitter span:nth-of-type(2) {
		margin-top:8px;
		border-radius:8px;
	}

	.iromachi span:nth-of-type(2) {
		margin-top:8px;
		border-radius:8px;
	}

	.profile_movie_pc {
		width:490px;
		margin-top:24px;
		display:block;
	}

	.profile_movie_sp {display:none;}
}



/* schedule */
.schedule {
	margin-top:48px;
	padding:0 16px;
}

.schedule ul li {display:flex;}

.schedule ul li p {
	width:50%;
	height:48px;
	text-align:center;
	line-height:48px;
}

.schedule ul li p:nth-of-type(1) {color:#FFF;}
.schedule ul li:nth-of-type(odd) p:nth-of-type(1) {background:#69806D;}
.schedule ul li:nth-of-type(even) p:nth-of-type(1) {background:#77907B;}

.schedule ul li:nth-of-type(odd) p:nth-of-type(2) {background:#DFDFDF;}
.schedule ul li:nth-of-type(even) p:nth-of-type(2) {background:#ECECEC;}


@media screen and (min-width:1024px) {
	.schedule {
		margin-top:80px;
		padding:0;
	}

	.schedule ul {display:flex;}

	.schedule ul li {
		font-size:93%;
		display:block;
		flex:1;
	}

	.schedule ul li p {width:100%;}
}