/* ====================================
	共通スタイル
 ==================================== */

article {

	overflow: hidden;
}


/* ------- sub01 ------- */
#sub01.sub-section {
	padding-bottom: 40rem;
	overflow: hidden;
}

#sub01 .flex-wrap {
	position: relative;
}

#sub01 .flex-item.left .inner-text {
	position: relative;
}

#sub01 .flex-item.left .inner-text .text {
	line-height: 2.6;
}

#sub01 .flex-item.left .inner-text .text.eng {
	font-size: 3rem;
	line-height: 2.2;
}

/* 写真 */
#sub01 .flex-item.right {
	position: relative;
	z-index: 2;
}

#sub01 .flex-item.right::before {
	content: '';
	background: url(images/sub01-1.jpg) no-repeat;
	background-size: 100%;
	width: 50vw;
	height: 64vw;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 750px;
}

#sub01 .photomini {
	position: relative;
	z-index: 2;
	width: 45%;
}

#sub01 .photomini::before {
	content: '';
	background: url(images/sub01-2.jpg) no-repeat;
	background-size: 110%;
	background-position: right;
	width: 490px;
	height: 300px;
	position: absolute;
	top: 0;
	right: -56vw;
}

/* ------- sky ------- */

#sky.sub-section {
	display: flex;
	justify-content: center;
	background-image: url(images/bg-sky.jpg);
	background-size: 100%;
	padding-bottom: 0;
}

#sky.sub-section p {
	text-align: center;
	font-size: 1.8rem;
	line-height: 2.8;
	color: #fff;
}

#sky.sub-section .img {
	margin-top: 2rem;
}

/* ------- sub02 ------- */

#sub02.sub-section {
	overflow: hidden;
}

/* 代表 */
#sub02 #profile {
	padding-bottom: 15rem;
}

#sub02 #profile .text.name {
	font-size: 3rem;
	position: relative;
	display: inline-block;
	margin-bottom: 3rem;
}

#sub02 #profile .text.name span {
	display: block;
	font-size: 2.2rem;
	color: #7C8890;
}

#sub02 #profile .text.name:before {
	content: '';
	position: absolute;
	bottom: -10px;
	display: inline-block;
	width: 20px;
	height: 1px;
	left: 0;
	background-color: #B9B6A9;
}

#sub02 #profile .text.biography {
	font-size: 1.4rem;
	border-bottom: solid 1px #C8E2F0;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}




/* THE HERITAGE TRAINING */
#sub02 #training {
	background-color: #F2F9FC;
	padding: 6rem 4rem;
	font-size: 1.4rem;
	line-height: 2;
	margin-bottom: 15rem;
}

#sub02 #training .ttl-area {
	align-items: center;
	margin-bottom: 3rem;
}

#sub02 #training .ttl-area p.ttl {
	font-size: 2.8rem;
	color: #008EC8;
}

#sub02 #training .ttl-area p.ttl span.subttl {
	display: block;
	font-size: 1.6rem;
	color: #7C8890;
}

#sub02 #training .img {
	width: 10%;
}

#sub02 #training .img img {
	width: 100%;
}

/* 経歴 */
h3.ttl-training {
	font-size: 3.2rem;
	position: relative;
	display: inline-block;
	margin-bottom: 9rem;
	font-weight: 100;
}

h3.ttl-training:before {
	content: '';
	position: absolute;
	bottom: -20px;
	display: inline-block;
	width: 20px;
	height: 1px;
	left: 0;
	background-color: #008EC8;
}

#sub02 #career {
	padding-bottom: 15rem;
}

#sub02 #career .career-sec {
	width: 45%;
	border-bottom: solid 1px #7BB9DA;
	padding-bottom: 3rem;
}

#sub02 #career .career-sec:not(:last-of-type) {
	margin-bottom: 9rem;
}

#sub02 #career .career-sec p.item {
	font-size: 1.8rem;
	color: #008EC8;
}

#sub02 #career .career-sec p.year {
	font-size: 2.8rem;
	color: #7C8890;
	margin-bottom: 1rem;
}

/* 海外でのトレーニングと学び */
#sub02 #timeline dl {
	margin-bottom: 8rem;
}

#sub02 #timeline dt {
	width: 4em;
	padding-top: 0.4em;
	position: relative;
	font-family: garamond-premier-pro, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 4rem;
	color: #7C8890;
	line-height: 0;
}

#sub02 #timeline dl dt::after {
	content: '●';
	position: absolute;
	right: -0.5em;
	top: 0.63em;
	font-size: 2.2rem;
	color: #008EC8;
}

#sub02 #timeline dd {
	width: calc(100% - 10em);
	padding: 0 0 5em 5em;
	border-left: 1px solid #7BB9DA;
}
/* #sub02 #timeline dd:last-of-type {
	padding-bottom: 2em;
	} */
/* ------- フォトギャラリー ------- */

/* 右から左へ */
@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.gallery-list.left {
	animation: infinity-scroll-left 100s infinite linear 0.5s both;
}

/* 左から右へ */
@keyframes infinity-scroll-right {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0%);
	}
}

.gallery-list.right {
	animation: infinity-scroll-right 100s infinite linear 0.5s both;
}

.gallery-wrap {
	display: flex;
	overflow: hidden;
}

.gallery-list {
	display: flex;
	list-style: none;
}

.gallery-list .item {
	width: calc(100vw / 4);
	width: calc(100vw / 4);
	height: auto;
	margin-left: 1px;
}

.gallery-list .item>img {
	width: 100%;
}

/* ------- sub03 ------- */

#sub03 .recomend:not(:last-of-type) {
	margin-bottom: 10rem;
}

#sub03 .recomend .img .photo {
	margin-bottom: 2rem;
}

#sub03 .recomend .img p.name {
	font-size: 2.6rem;
}

#sub03 .recomend .img p.title {
	font-size: 1.2rem;
	width: 90%;
}

#sub03 .recomend .text {
	background-color: #F2F9FC;
}

#sub03 .recomend .text p:not(:last-of-type),
#sub03 ul.dot {
	margin-bottom: 3rem;
}

#sub03 ul.dot {
	/* リスト（・） */
	padding-left: 2em;
}

#sub03 ul.dot li {
	text-indent: -1.8em;
}

#sub03 ul.dot li:BEFORE {
	content: '●';
	margin-right: 0.6em;
}

/* ====================================
	768px以上専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) {
	#mainVisual .main-img {
		background-image: url(images/mv-about.jpg);
	}

	/* ------- sub01 ------- */

	#sub01 .flex-item.left {
		position: relative;
		padding-top: 8rem;
		width: 53%;
		margin-top: 10rem;
		z-index: 1;
	}

	#sub01 .flex-item.left::before {
		content: '';
		display: block;
		background-color: #F2F9FC;
		width: 100vw;
		height: 122rem;
		position: absolute;
		top: 0;
		right: -10vw;
	}

	#sub01 .flex-item.right {
		width: 42%;
	}



	/* ------- sub02 ------- */

	/* 代表 */
	#sub02 #profile .btn-arrow-right {
		margin-top: 4rem;
		margin-left: 0;
	}

	#sub02 #profile .flex-item.img {
		position: relative;
		z-index: 2;
	}

	#sub02 #profile .flex-item.img::before {
		content: '';
		background: url(images/sub02.jpg) no-repeat;
		background-size: 100%;
		width: 50vw;
		height: 48rem;
		position: absolute;
		top: 0;
		left: 0;
		max-width: 750px;
	}

	/* ------- sub03 ------- */

	#sub03 .recomend {
		position: relative;
	}

	#sub03 .recomend .img {
		width: 33%;
		position: absolute;
		top: 7rem;
		left: 0;
		z-index: 2;
	}

	#sub03 .recomend .text {
		width: 70%;
		margin-left: 30%;
		padding: 12rem;
		line-height: 2;
	}

	#sub03 .recomend.tano .text {
		padding-bottom: 20rem;
	}

}

/* ====================================
	767px以下専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	#mainVisual .main-img {
		background-image: url(images/mv-about_sp.jpg);
	}

	/* ------- sub01 ------- */

	#sub01.sub-section {
		padding-bottom: 60vw;
	}

	#sub01 .flex-container {
		position: relative;
		top: -8rem;
	}

	#sub01 .flex-item.left .sp-wrap {
		width: 100%;
		padding-top: 6rem;
		padding-bottom: 60vw;
	}

	#sub01 .flex-item.left .inner-text .text {
		font-size: 1.2rem;
		line-height: 2;
	}

	#sub01 .flex-item.left .inner-text .text.eng {
		font-size: 2.4rem;
		line-height: 1.8;
		margin-top: 1em;
	}

	/* 写真 */
	#sub01 .flex-item.right {
		padding-bottom: 32vw;
	}

	#sub01 .flex-item.right::before {
		background-size: 80%;
		width: 102vw;
		height: 104vw;
		top: -50vw;
		left: 13vw;
	}

	#sub01 .photomini::before {
		width: 50vw;
		height: 31vw;
		top: 12vw;
		right: 0;
	}

	/* ------- sky ------- */

	#sky.sub-section {
		height: 170vw;
		/* background-image: url(images/bg-sky_sp.jpg); */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 20vw;
		margin-bottom: 10rem;
	}

	#sky.sub-section p {
		font-size: 1.4rem;
	}

	/* ------- sub02 ------- */

	/* 代表 */
	#sub02 #profile {
		padding-bottom: 5rem;
	}

	#sub02 #profile .flex-item.text {
		order: 2;
	}

	#sub02 #profile .text.name {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	#sub02 #profile .text.name span {
		font-size: 1.4rem;
	}

	#sub02 #profile .text.biography {
		font-size: 1.2rem;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	#sub02 #profile .btn-arrow-right {
		margin-top: 2rem;
	}

	#sub02 #profile .flex-item.img {
		order: 1;
		width: 100%;
		height: 63vw;
		background: url(images/sub02.jpg) no-repeat;
		background-size: 100%;
		margin-bottom: 4vw;
	}

	/* THE HERITAGE TRAINING */
	#sub02 #training {
		padding: 4rem 2rem;
		font-size: 1.2rem;
		margin-bottom: 10rem;
	}

	#sub02 #training .ttl-area {
		margin-bottom: 1.5rem;
		text-align: center;
		justify-content: center;
	}

	#sub02 #training .ttl-area p.ttl {
		order: 2;
		font-size: 2rem;
	}


	#sub02 #training .ttl-area p.ttl span.subttl {
		font-size: 1.2rem;
		text-align: left;
	}

	#sub02 #training .ttl-area p.ttl span.title {
		text-align: left;
		display: block;
	}


	#sub02 #training .img {
		order: 1;
		width: 100%;
	}

	#sub02 #training .img img {
		width: 20%;
		margin-bottom: 1rem;
	}

	/* 経歴 */
	h3.ttl-training {
		font-size: 2.2rem;
		margin-bottom: 6rem;
	}

	#sub02 #career {
		padding-bottom: 8rem;
	}

	#sub02 #career .career-sec {
		width: 100%;
		padding-bottom: 1.5rem;
	}

	#sub02 #career .career-sec:not(:last-of-type) {
		margin-bottom: 5rem;
	}

	#sub02 #career .career-sec p.item {
		font-size: 1.4rem;
	}

	#sub02 #career .career-sec p.year {
		font-size: 2.4rem;
		margin-bottom: 1rem;
	}

	/* 海外でのトレーニングと学び */
	#sub02 #timeline dl {
		margin-bottom: 4rem;
	}

	#sub02 #timeline dt {
		width: 3em;
		padding-top: 0.4em;
		position: relative;
		font-size: 2.2rem;
	}

	#sub02 #timeline dl dt::after {
		right: -0.5em;
		top: 0.55em;
		font-size: 1.6rem;
	}

	#sub02 #timeline dd {
		width: calc(100% - 7em);
		padding: 0 0 4em 2em;
		font-size: 1rem;
	}

	/* ------- sub03 ------- */

	#sub03 .recomend:not(:last-of-type) {
		margin-bottom: 6rem;
	}

	#sub03 .recomend .img {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#sub03 .recomend .img .photo {
		width: 30%;
	}

	#sub03 .recomend .img .name-area {
		width: 66%;
	}

	#sub03 .recomend .img p.name {
		font-size: 2rem;
		line-height: 1;
		margin-bottom: 1rem;
	}

	#sub03 .recomend .text {
		padding: 2rem;
	}

	#sub03 dl.dot {
		/* リスト（・） */
		padding-left: 0.5em;
	}

	#sub03 dl.dot dt {
		text-indent: -1em;
	}

	.gallery-list .item {
		width: calc(100vw / 3);
	}

}

/* ====================================
	420px以上767px以下専用スタイル
===================================== */
@media only screen and (min-width: 420px) and (max-width: 767px) {

	/* ------- sky ------- */

	#sky.sub-section {
		height: 75rem;
		padding-top: 12vw;
	}

	#sky.sub-section p {
		font-size: 1.6rem;
	}


}

/* ====================================
	768px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

	.flex-container.half>.flex-item {
		width: 48%;
	}

	/* ------- sky ------- */

	#sky.sub-section {
		height: 75rem;
		/* background-image: url(images/bg-sky_sp.jpg); */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 8vw;
		margin-bottom: 10rem;
	}

	/* ------- sub01 ------- */
	#sub01.sub-section {
		padding-bottom: 40rem;
	}

	#sub01 .flex-item.left {
		padding-top: 4rem;
		margin-top: 5rem;
	}

	#sub01 .flex-item.left::before {
		height: 150rem;
		right: -10vw;
	}

	#sub01 .photomini::before {
		width: 31vw;
		height: 20vw;
		top: -50vw;
		right: -56vw;
	}

	/* ------- sub03 ------- */

	#sub03 .recomend .text {
		width: 70%;
		padding: 8rem;
	}

}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {
	/* ------- sky ------- */

	#sky.sub-section {
		width: 100%;
		height: 700px;
		margin-bottom: 20rem;
		padding-bottom: 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: relative;
		align-items: center;
	}

	/* ------- sub01 ------- */

	#sub01 .photomini::before {
		width: 31vw;
		height: 20vw;
		top: -23vw;
		right: -56vw;
	}

	/* ------- sub03 ------- */

	#sub03 .recomend .text {
		width: 70%;
		padding: 8rem;
	}


}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {
	/* ------- sky ------- */

	#sky.sub-section {
		width: 100%;
		height: 700px;
		margin-bottom: 20rem;
		padding-bottom: 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: relative;
		align-items: center;
	}

	/* ------- sub02 ------- */

	/* 代表 */
	#sub02 #profile .flex-item.text {
		margin-top: 5rem;
	}

	#sub02 #profile .flex-item.img {
		margin-top: 5rem;
	}

}

/* ====================================
	1700px以上専用スタイル
===================================== */
@media screen and (min-width: 1700px) {

	/* ------- sub01 ------- */

	#sub01 .photomini::before {
		top: -5vw;
		right: -49vw;
	}

}

/* ====================================
	IE
===================================== */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

	/* ------- sub02 ------- */

	/* 海外でのトレーニングと学び */
	#sub02 #timeline dd {
		width: calc(100% - 10.1em);
		padding: 0 0 5em 5em;
	}

	/* ------- フォトギャラリー ------- */

	.gallery-area {
		display: -ms-grid;
		overflow: hidden;
	}

	.gallery-area .gallery-wrap.mt2em {
		display: none;
	}

}