@charset "UTF-8";

.head_area-line{
	background-image: url("../img/wood.webp");
	background-repeat: no-repeat;
	background-position:center top;
	background-size: cover;
	padding: 5px 0;
}

.head_img{
	margin: auto;
	text-align: center;
	padding: 15px 20px 0;
	max-width:500px;
}
.head_img span{
	display: block;
	padding-top: 3px;
	font-size: 28px;
	letter-spacing: 0.2em;
}

.head_img span.head_text{
	padding-top:0;
	font-size:5px;
	opacity:0;
}

main{
	background-image: url("../img/personality_bk.webp");
	background-size: 70px;
}

.article_area{
	background-image: url("../img/introduction.webp");
	background-repeat: repeat-y;
	background-size: 100%;
	max-width: 1000px;
	margin:5px auto 0;
	border-radius:30px;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));

}
.article_wrap{
	position: relative;
	background-image: url("../img/imdex_bk2.webp");
	background-size: 100%;
	border-radius:30px;
}

article{
	padding:50px 30px;
	max-width: 750px;
	margin: auto;
}

article *{
	color:rgba(18,15,30,1);
}

.article_title{
	border-left:solid 10px rgba(18,15,30,1);
	border-bottom:solid 2px rgba(18,15,30,1);
	padding:5px 0 5px 14px;
	margin-bottom: 15px;
}

.article_time{
	display: flex;
	flex-wrap: wrap;
}

.article_title time{
	font-size: 20px;
	letter-spacing: 0.05em;
	font-weight:600;
}

.article_title a{
	display:block;
	margin: auto 0 auto 10px;
	padding:0 10px;
	border:solid 1px rgba(18,15,30,1);
	font-size: 14px;
	line-height: 1.25em;
	font-weight:600;
	border-radius:20px;
}
.article_title h2{
	line-height: 1.25em;
	font-size: 28px;
	font-weight:600;
}


.article_text{
	margin:auto;
	max-width:650px;
}

.article_text h3{
	font-size: 110%;
	font-weight:600;
	font-family: sans-serif;
	padding:10px 0 20px;
}

.article_text p{
	font-family: sans-serif;
	padding-bottom: 20px;
}

.article_text p.writer{
	text-align:right;
	margin-top:-5px;
	padding-bottom:5px;
	font-size:90%;
	font-weight:600;
}

.article_text ul{
	padding-left:25px;
	padding-bottom: 20px;
	font-family: sans-serif;
}
.article_text ul li{
	list-style:circle;
}
.article_text p a{
	text-decoration: underline;
}
.article_text p span.head-line{
	display: block;
	font-weight:600;
	padding-bottom: 3px;
}
.article_text p span.theme-song{
	display: inline-block;
	text-align: center;
	width:30px;
	background-color: rgba(18,15,30,1);
	color:#fff;
	margin:0 5px 2px 0;
}

.article_text p.lines{
	display: flex;
	flex-wrap: wrap;
}
.article_text p.lines span{
	display: inline-block;
}
.article_text p.lines span:nth-child(1){
	width:95px;
	font-size: 90%;
	letter-spacing: -0.05em;
}
.article_text p.lines span:nth-child(2){
	width:calc(100% - 95px);
}


.article_text p.question{
	display: flex;
	flex-wrap: wrap;
}
.article_text p.question span{
	display: inline-block;
}
.article_text p.question span:nth-child(1){
	width:35px;
	font-size:140%;
	letter-spacing: -0.05em;
}
.article_text p.question span:nth-child(2){
	width:calc(100% - 35px);
	margin:auto 0;
}


.text_area-line{
	padding-bottom: 10px;
	border-top: solid 2px rgba(18,15,30,1);
}

.article_img{
	margin:0 auto 20px;
}

.article_img.w_80{
	max-width:500px;
}

.article_img.double{
	display: flex;
	flex-wrap: wrap;
}
.article_img.double img{
	width:50%;
}

article .return{
	margin-bottom: 10px;
}
article .return a{
	font-family: sans-serif;
	padding:4px 7px;
	font-size: 14px;
    color: #fff;
    background-color: #171a2d;
}


article .nx_pv{
	display: flex;
	flex-wrap: wrap;
	margin:0 auto 10px;
	max-width: 300px;
	justify-content: space-between;
}
article .nx_pv a{
	font-family: sans-serif;
	padding:0 7px;
	font-size: 14px;
    color: #fff;
    background-color: #171a2d;
}
article .nx_pv a.gray{
	pointer-events: none;
	color: #DAD2C3;
    background-color: rgba(0,0,0,.3);
}


blockquote{
	font-family: sans-serif;
	font-size:85%;
	margin: auto;
	padding:20px;
	background-color:rgba(255,255,255,.6);
	margin-bottom: 20px;
}



.article_text .profile_box{
	display:flex;
	flex-wrap:wrap;
	gap:0 15px;
	padding:10px 0;
}

.profile_name{
	display:flex;
	flex-wrap:wrap;
	padding-bottom:6px;
}
.profile_name div:nth-child(n + 2){
	width:38px;
	display:flex;
	flex-wrap:wrap;
}

.profile_name div a{
	margin: auto;
	padding: 0 5px;
}

.profile_img{
	width:20%;
}

.profile_text{
	width:calc(80% - 15px);
}

.article_text .profile_box h3{
	font-size:135%;
	line-height:1.2em;
	padding: 0;
}
.article_text .profile_box p{
	padding:0;
}

.profile_box p.h3_sub{
	font-size:80%;
}

.profile_text_main p{
	font-size:90%;
}

.profile_text_list{
	width:100%;
	font-size:90%;
	padding:10px 0 0;
}
.profile_box h4{
	font-family: sans-serif;
	font-size:110%;
	font-weight:600;
	padding: 0;
}




@media screen and (min-width:768px) {
		
}



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

.article_index_box{
	padding: 40px 20px;	
}

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


@media screen and (max-width:1000px) {
	
}

@media screen and (max-width:767px) {
	.article_img.double{display: block;}
	.article_img.double img{width:100%;}
}

@media screen and (max-width:520px) {
	
	.article_area{
		border-radius: 0;
	}
	.article_wrap{
		border-radius: 0;
	}
	article{
		padding: 40px 25px 35px;
	}

	.article_title time{
		display: block;
		width:100%;
	}
	.article_title a{
		margin:0 0 5px;
	}
	
	.article_title h2{
		font-size: 24px;
		line-height: 1.1em;
	}
	
	
	.article_index_box{
		padding: 20px 20px 0;
	}
	
	.article_text p.lines span:nth-child(1){
		width:100%;
		font-size:100%;
		font-weight:600;
		padding-left: 7px;
		border-left:5px #111 solid;
	}
	.article_text p.lines span:nth-child(2) {
		width:100%;
		padding-left:15px;
	}
	
	article .return.bottom{
		text-align:center;
	}
	article .return.bottom a{
		font-size:12.5px;
	}
	
	
	.profile_img{
		margin: auto;
		width:100%;
		max-width:200px;
		line-height:0;
	}

	.profile_text{
		margin: auto;
		width:100%;
	}
	
	.profile_name{
		padding-top:5px;
		justify-content: center;
	}


	
}