@charset "utf-8";

:root{
	--c_primary: #0D5A9C;
	--c_border: #E9E9E9;
}
hr{
	border: none;
	border-bottom: 1px solid var(--c_border);
}
#main{
	overflow: visible;
}
#contents{
	font-weight: 500;
}
nav.breadcrumb{
	padding: 0;
	margin-bottom: 2em;
}
@media screen and (min-width: 771px) {
	.anchor {
		margin-top: -140px;
		padding-top: 140px;
	}
}
@media screen and (max-width: 520px){
	#main{
		font-size: clamp(1.2rem, 3.7vw, 1.6rem) !important;
	}
	footer{
		margin-top: 0;
	}
}

/**********************************************************************/
/*　ヒーロー
/**********************************************************************/

section.hero{
	background-color: #F8F8F8;
	border-bottom: 0;
	padding: 4em 0;
}
section.hero .inner{
	max-width: 1360px;
	margin: auto;
}
@media screen and (max-width: 520px){
	section.hero{
		padding: 2em 4vw 3em 4vw;
	}
}

/**********************************************************************/
/* ボディ
/**********************************************************************/

.bodying{
	padding: 3em 0;
}
.bodying .article{
	display: flex;
	gap: 2em;
}
.bodying .article section.details{
	flex-grow: 1;
	max-width: 800px;
}
.bodying .article nav.scroll{
	flex-grow: 1;
	text-align: right;
	white-space: nowrap;
}
@media screen and (max-width: 520px){
	.bodying{
		padding: 3em 4vw;
	}
}

/**********************************************************************/
/* 人物情報
/**********************************************************************/

section.hero .info{
	gap: 3em;
}
section.hero .info .personality{
	flex: 1;
}
@media screen and (max-width: 520px){
	section.hero .info{
		flex-direction: column-reverse;
	}
}

/*--------------------------------------------------------------------*/
/*name*/

section.hero .info .name{
	font-weight: 700;
	margin-bottom: 1.5em;
}
section.hero .info .name .ja{
	font-size: 4rem;
	color: var(--c_primary);
}
@media screen and (max-width: 520px){
	section.hero .info .name .ja{
		font-size: 6.5vw;
	}
}

/*--------------------------------------------------------------------*/
/* who */

section.hero .info .who{
	line-height: 1.5;
}
section.hero .info .who .category{
	padding: .15em 0;
	padding-left: 1.65em;
	background-image: url("../img/member/icon_user.svg");
	background-repeat: no-repeat;
	background-position: left top .4em;
	background-size: 1.25em auto;
}
section.hero .info .who .language{
	padding: .15em 0;
	padding-left: 1.65em;
	background-image: url("../img/member/icon_language.svg");
	background-repeat: no-repeat;
	background-position: left top .4em;
	background-size: 1.25em auto;
}

/*--------------------------------------------------------------------*/
/*sns*/

section.hero .info .media{
	gap: .25em;
}
section.hero .info .media a{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background-color: var(--c_primary);
}
section.hero .info hr{
	margin: 1.5em 0;
}

/*--------------------------------------------------------------------*/
/*image*/

section.hero .portrait{
	min-width: 830px;
	height: 590px;
	background-color: #FAFAFA;
}
@media screen and (max-width: 520px){
	section.hero .portrait{
		min-width: 0;
		max-width: 100%;
		height: auto;
	}
	section.hero .portrait img{
		height: auto;
	}
}

/**********************************************************************/
/* 各種情報
/**********************************************************************/

section.details{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 4.5em;
}
.member_block.block{

}
.member_block.block .index{
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.5;
	padding-bottom: .25em;
	border-bottom: 1px solid var(--c_border);
	margin-bottom: .25em;
}
.member_block.block .index .label{
	padding-left: 1.5em;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.28em auto;
}
@media screen and (max-width: 520px){
	section.details{
		gap: 2.75em;
	}
	.member_block.block .index{
		font-size: 5vw;
	}
}

/*--------------------------------------------------------------------*/
/*content*/

.member_block.block .content{
	padding: .75em 0;
}

/*--------------------------------------------------------------------*/
/*styling*/

.member_block.block .content.tags{
	display: flex;
	flex-wrap: wrap;
	gap: .75em 1em;
}
.member_block.block .content .tape{
	display: inline-block;
	background-color: #F2F2F2;
	border-radius: .25em;
	padding: 0 1em;
}
.member_block.block .content .item{
	padding-left: 1.75em;
	border-left: 1px solid var(--c_primary);
}
.member_block.block .content .item{
	margin-top: .75em;
}
.member_block.block .content .item + .item{
	margin-top: 1.5em;
}
.member_block.block .content .item .date{
	color: var(--c_primary);
	line-height: 1;
	margin-bottom: .25em;
}
.member_block.block .content .item .text{
	line-height: 1.5;
}
.member_block.block .content .item .annotation{
	font-size: 75%;
}
.member_block.block .content .imagebox{
	display: flex;
	align-items: flex-start;
	margin-top: .75em;
	gap: 1.25em;
}
.member_block.block .content .imagebox .thumbnail{
	width: 90px;
	height: 120px;
}
.member_block.block .content .imagebox .thumbnail img{
	background-color: #F5F5F5;
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.member_block.block .content .imagebox .item{
	margin-top: 0;
}
@media screen and (max-width: 520px){
	.member_block.block .content .item{
		padding-left: 1em;
	}
	.member_block.block .content.tags{
		gap: .4em .5em;
	}
	.member_block.block .content .tape{
		padding: 0 .75em;
		font-size: 86%;
	}
	.member_block.block .content .imagebox{
		gap: .75em;
	}
	.member_block.block .content .imagebox .thumbnail{
		width: 54px;
		min-width: 54px;
		height: 72px;
	}
}

/*--------------------------------------------------------------------*/
/*medal*/

.member_block.block .gridbox{
	display: flex;
	flex-wrap: wrap;
	padding-top: 1em;
}
.member_block.block .gridbox.medal{
	gap: 1em 16px;
}
.member_block.block .gridbox.medal .item{
	width: 100px;
	height: 100px;
}
.member_block.block .gridbox.medal .item img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media screen and (max-width: 520px){
	.member_block.block .gridbox.medal{
		gap: .5em 1em;
	}
	.member_block.block .gridbox.medal .item{
		width: 60px;
		height: 60px;
	}
}
/**********************************************************************/
/*　見出しアイコン
/**********************************************************************/

.member_block.block.practice .index .label{
	background-image: url("../img/member/icon_calc.svg");
}
.member_block.block.education .index .label{
	background-image: url("../img/member/icon_graduate.svg");
}
.member_block.block.history .index .label{
	background-image: url("../img/member/icon_bag.svg");
}
.member_block.block.results .index .label{
	background-image: url("../img/member/icon_medal.svg");
}
.member_block.block.awards .index .label{
	background-image: url("../img/member/icon_trophy.svg");
}
.member_block.block.activity .index .label{
	background-image: url("../img/member/icon_paper.svg");
}
.member_block.block.publications .index .label{
	background-image: url("../img/member/icon_pen.svg");
}
.member_block.block.seminar .index .label{
	background-image: url("../img/member/icon_mic.svg");
}
.member_block.block.interview .index .label{
	background-image: url("../img/member/icon_speak.svg");
}

/**********************************************************************/
/* スクロールナビ
/**********************************************************************/

nav.scroll ul{
	position: sticky;
	top: 0;
}
nav.scroll ul li.current a{
	color: var(--c_primary);
	padding-left: 1em;
	background-image: url("../img/member/icon_arrow_blue.svg");
	background-repeat: no-repeat;
	background-position: left top .8em;
	background-size: .4em auto;
}
@media screen and (max-width: 520px){
	nav.scroll{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		z-index: 10;
		background-color: var(--c_primary);
		color: #fff;
		padding: .5em 1em;
	}
	nav.scroll ul{
		position: static;
		display: flex;
		flex-wrap: nowrap;
		gap: .75em;
	}
	nav.scroll ul li.current a{
		color: #90b5d5;
		padding-left: 0;
		background: none;
	}

	/*--------------------------------------------------------------------*/
	/*hack*/
	._before, ._after{
		position: static;
	}
	footer{
		position: static;
	}
}

/**********************************************************************/
/* 戻るボタン
/**********************************************************************/

.pageback{
	padding: 2em 0;
	margin-top: 5em;
}
.pageback a{
	background-color: #E9E9E9;
	padding: .15em 1em;
	display: inline-block;
}
@media screen and (max-width: 520px){
	.pageback{
		margin-top: 2em;
	}
}