@charset "utf-8";

/* Growth 1/4/7
============================ */

.growth h2::before {
	content: "GROWTH";
	}
	@media screen and (min-width:1025px) {
	.growth h2::before {
		left: -0.45em !important;
	}
}

.second #contentsArea.growth {
	padding-top: 0;
}

/* visual */
.growth .visual {
	width: 100%;
	height: 352px;
	background: url("../growth/images/visual.jpg") top right 20% no-repeat;
	background-size: cover;
	position: relative;
	z-index: -1;
}
.growth .visual::before {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 87.5%;
	height: 50px;
	background: #fff;
}
.growth .visual .copy {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 2rem;
	margin-top: 2.8rem;
	}
	@media screen and (min-width:1025px) {
	.growth .visual {
		height: 0;
		padding-top: 48%;
		background: url("../growth/images/visual.jpg") center center no-repeat;
		background-size: cover;
	}
	.growth .visual::before {
		height: 150px;
	}
	.growth .visual .copy {
		font-size: 4rem;
		margin-top: 0;
	}
}

/* title */
.growth h2 {
	margin-top: -30px;
}
.growth .wrap2 h3 {
	text-align: center;
	font-size: 2rem;
	line-height: 1.6;
	padding: 0;
}
.growth .wrap2 h3::before {
	display: none;
	}
	@media screen and (min-width:1025px) {
	.growth h2 {
		margin-top: -80px;
	}
	.growth .wrap2 h3 {
		font-size: 3.2rem;
		line-height: 1.6;
	}
}

/* member */
.growth .member {
	width: 80%;
	margin: 0 auto;
	padding-bottom:50px;
}
.growth .member dl {
	text-align: center;
	position: relative;
	margin-bottom: 40px;
}
.growth .member dl:nth-of-type(3) {
	margin-bottom: 0;
}
.growth .member dl dt {
	position: relative;
}
.growth .member dl dt span {
	position: absolute;
	display: block;
	content: "";
	top: 16px;
	right: -15px;
	width: 90px;
	height: 34px;
	line-height: 32px;
	color: #fff;
	background: #1e7bc0;
	padding-right: 10px;
	font-size: 1.3rem;
}
.growth .member dl dt span::before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right: 12px solid #fff;
}
.growth .member dl dt img {
	width: 55%;
}
.growth .member dl .name {
	font-size: 1.2rem;
	line-height: 1.6;
}
.growth .member dl .name em {
	display: block;
	margin-top: 8px;
	font-size: 2rem;
	color: #1e7bc0;
}
.growth .member dl .profile {
	margin-top: 12px;
	font-size: 1.3rem;
	text-align: left;
	}
	@media screen and (min-width:1025px) {
	.growth h2 + h3:first-of-type {
		margin-bottom: 0;
	}
	.growth .member {
		width: 1200px;
		margin: 0 auto;
		padding-bottom:100px;
		display: flex;
		justify-content: space-between;
	}
	.growth .member dl {
		flex-basis: 28%;
		text-align: center;
		position: relative;
		margin-bottom: 0;
	}
	.growth .member dl::before {
		display: block;
		content: "";
		position: absolute;
		top: 45px;
		right: -175px;
		width: 240px;
		height: 74px;
		background: url("../growth/images/line.png") top left no-repeat;
		z-index: -1;
	}
	.growth .member dl:nth-of-type(3)::before {
		display: none;
	}
	.growth .member dl:nth-of-type(1) {
		margin-top: 120px;
	}
	.growth .member dl:nth-of-type(2) {
		margin-top: 60px;
	}
	.growth .member dl dt {
		position: relative;
	}
	.growth .member dl dt span {
		position: absolute;
		display: block;
		content: "";
		top: 30px;
		right: -12px;
		width: 120px;
		height: 40px;
		line-height: 38px;
		color: #fff;
		background: #1e7bc0;
		padding-right: 10px;
		font-size: 1.6rem;
	}
	.growth .member dl dt span::before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: -1px;
		margin: auto 0;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-right: 12px solid #fff;
	}
	.growth .member dl dt img {
		width: 225px;
	}
	.growth .member dl .name {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.growth .member dl .name em {
		display: block;
		margin-top: 8px;
		font-size: 3.2rem;
		color: #1e7bc0;
	}
	.growth .member dl .profile {
		margin-top: 16px;
		font-size: 1.5rem;
		text-align: left;
		line-height: 1.9;
	}
}

/* talkArea */
.talkArea {
	text-align: left;
	overflow: hidden;
}
.talkArea h3 {
	margin: -50px 0 0;
	background: #fff;
	padding: 24px;
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.6;
}
.talkArea h3::before {
	display: none;
}
.talkArea h3 span {
	color: #1e7bc0;
	font-size: 1.9rem;
	font-weight: 600;
}
.talkArea h3 em {
	background: #1e7bc0;
	color: #fff;
	display: inline-block;
	padding: 0 12px;
	font-size: 1.8rem;
	font-weight: 500;
	height: 34px;
	line-height: 31px;
	margin-left: 6px;
}
.talkArea dl {
	display: flex;
	align-items: flex-start;
	margin: 0 0 20px;
	break-inside: avoid-column;
}
.talkArea dl:last-of-type {
	margin-bottom: 0;
}
.talkArea dt {
	font-size: 1rem;
	padding-top: 65px;
	text-align: center;
	flex-basis: 70px;
	margin-right: 18px;
	line-height: 1.1;
}
.talkArea dt.my {
	background: url("../growth/images/thumb_my.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 63px auto;
}
.talkArea dt.aw {
	background: url("../growth/images/thumb_aw.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 63px auto;
}
.talkArea dt.st {
	background: url("../growth/images/thumb_st.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 63px auto;
}
.talkArea dd {
	background: #fff9e7;
	border-radius: 8px;
	padding: 16px 20px;
	position: relative;
	flex-basis: calc(100% - 70px);
	line-height: 1.8;
}
.talkArea dd::before {
	display: block;
	content: "";
	position: absolute;
	top: 26px;
	left: -24px;
	margin: 0;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-right: 16px solid #fff9e7;
}
.talk01,
.talk02,
.talk03 {
	background: #fff;
	margin: 240px 0 0;
	padding-bottom: 50px;
}
.talk03 {
	padding-bottom: 0;
	}
	@media screen and (min-width:1025px) {
	.talkArea {
		text-align: left;
		overflow: hidden;
	}
	.talkArea h3 {
		margin: -95px 0 0;
		background: #fff;
		padding: 70px 120px;
		display: inline-block;
		font-size: 3.5rem;
		line-height: 1.6;
	}
	.talkArea h3::before {
		display: none;
	}
	.talkArea h3 span {
		color: #1e7bc0;
		font-size: 4.2rem;
		font-weight: 600;
	}
	.talkArea h3 em {
		background: #1e7bc0;
		color: #fff;
		display: inline-block;
		padding: 0 24px;
		font-size: 4rem;
		font-weight: 500;
		height: 60px;
		line-height: 56px;
		margin-left: 10px;
	}
	.talkArea dl {
		display: flex;
		align-items: flex-start;
		margin: 0 0 20px;
		break-inside: avoid-column;
	}
	.talkArea dt {
		font-size: 1.2rem;
		padding-top: 65px;
		text-align: center;
		flex-basis: 70px;
		margin-right: 30px;
		line-height: 1.1;
	}
	.talkArea dt.my {
		background: url("../growth/images/thumb_my.png") top center no-repeat;
		-webkit-background-size: ;
		background-size: 63px auto;
	}
	.talkArea dt.aw {
		background: url("../growth/images/thumb_aw.png") top center no-repeat;
		-webkit-background-size: ;
		background-size: 63px auto;
	}
	.talkArea dt.st {
		background: url("../growth/images/thumb_st.png") top center no-repeat;
		-webkit-background-size: ;
		background-size: 63px auto;
	}
	.talkArea dd {
		background: #fff9e7;
		border-radius: 8px;
		padding: 22px 36px;
		position: relative;
		flex-basis: calc(100% - 100px);
		line-height: 1.8;
	}
	.talkArea dd::before {
		display: block;
		content: "";
		position: absolute;
		top: 26px;
		left: -24px;
		margin: 0;
		width: 0;
		height: 0;
		border: 9px solid transparent;
		border-right: 16px solid #fff9e7;
	}
	.talk01,
	.talk02,
	.talk03 {
		background: #fff;
		margin: 460px 0 0;
		padding-bottom: 120px;
	}
	.talk03 {
		padding-bottom: 2px;
	}
}

/* talk01 */
.talk01 .pic {
	margin: 20px auto;
	width: 90%;
}
.talk01 .pic p:nth-of-type(1) {
	width: 65%;
	margin-right: auto;
}
.talk01 .pic p:nth-of-type(2) {
	width: 85%;
	margin-left: auto;
	margin-top: 20px;
	}
	@media screen and (min-width:1025px) {
	.talk01 .wrap {
		width: 60%;
		min-width: 920px;
	}
	.talk01 .pic {
		display: flex;
		justify-content: space-between;
		width: 75%;
		margin: 60px auto;
	}
	.talk01 .pic p:nth-of-type(1) {
		flex-basis: 41%;
	}
	.talk01 .pic p:nth-of-type(2) {
		flex-basis: 53%;
		margin-top: 180px;
	}
}

/* talk02 */
.talk02 .pic {
	width: 90%;
	margin: 20px auto;
	}
	@media screen and (min-width:1025px) {
	.talk02 .wrap {
		max-width: 1200px;
		width: 90%;
		column-count: 2;
		column-gap: 100px;
	}
	.talk02 .pic {
		width: 53%;
		margin: 60px auto;
	}
}

/* talk03 */
.talk03 .picL {
	width: 84%;
	display: flex;
	flex-direction: column;
	margin: 20px auto 0;
}
.talk03 .picL .box {
	flex-basis: 100%;
	margin-top: 20px;
}
.talk03 .picL p {
	flex-basis: 100%;
	padding-left: 10%;
}
.talk03 .picR {
	width: 84%;
	display: flex;
	flex-direction: column;
	margin: 20px auto 0;
}
.talk03 .picR .box {
	flex-basis: 100%;
	order: 2;
	margin-top: 20px;
}
.talk03 .picR p {
	flex-basis: 100%;
	padding: 0 20% 0 5%;
	order: 1;
	}
	@media screen and (min-width:1025px) {
	.talk03 .wrap {
		width: 60%;
		min-width: 920px;
	}
	.talk03 .picL {
		width: 87.5%;
		display: flex;
		flex-direction: row;
		margin: 60px auto 60px 0;
	}
	.talk03 .picL .box {
		flex-basis: 43%;
		margin-top: 20px;
	}
	.talk03 .picL p {
		flex-basis: 57%;
		padding: 0 5%;
	}
	.talk03 .picR {
		width: 87.5%;
		display: flex;
		flex-direction: row;
		margin: 60px 0 60px auto;
	}
	.talk03 .picR .box {
		flex-basis: 53%;
		order: 1;
		margin-top: 20px;
	}
	.talk03 .picR p {
		flex-basis: 47%;
		order: 2;
		padding: 0 5%;
	}
}

/* 動画背景
------------------------------------------------- */
video#bgvid {
	display: block;
	position: fixed;
	right: 0;
	top: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
}
#videoCover {
	position: fixed;
	content: "";
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(14, 50, 76, 0.8);
	z-index: -10;
}
.second #contentsArea {
	background:none;
}

/* おすすめコンテンツ調整
------------------------------------------------- */
.recommendWrap {
	position:relative;
	top:0;
	background:#fff;
	z-index: 1;
}
.recommendArea {
	margin-top: 0;
	padding-top: 60px;
	}
	.recommendArea::before,
	.recommendArea::after {
			top: 170px;
	}
	@media screen and (min-width:1025px) {
	.recommendArea {
		padding-top: 100px;
	}
	.recommendArea::before,
	.recommendArea::after {
			top: 360px;
	}
}

/* for appear
============================ */
.growth .member,
.growth h3,
.growth .talkArea .talk01,
.growth .talkArea .talk02,
.growth .talkArea .talk03,
.growth .talkArea .wrap,
.growth .talkArea .pic,
.growth .talkArea .picL,
.growth .talkArea .picR {
	opacity: 0;
	position: relative;
	top: 50px;
}