@charset "utf-8";

/* G-TEKTの未来
============================ */

.future h2::before {
	content: "FUTURE";
	left: -0.48em !important;
	}
	@media screen and (min-width:1025px) {
	.future h2::before {
		left: -0.4em !important;
	}
}

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

/* visual */
.future .visual {
	width: 100%;
	height: 352px;
	background: url("../future/images/visual.jpg") top right 20% no-repeat;
	background-size: cover;
	position: relative;
	z-index: -1;
}
.future .visual::before {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 87.5%;
	height: 50px;
	background: #fff;
}
.future .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) {
	.future .visual {
		height: 0;
		padding-top: 48%;
		background: url("../future/images/visual.jpg") center center no-repeat;
		background-size: cover;
	}
	.future .visual::before {
		height: 150px;
	}
	.future .visual .copy {
		font-size: 4rem;
		margin-top: 0;
	}
}

/* title */
.future h2 {
	margin-top: -30px;
	z-index: 3;
	}
	@media screen and (min-width:1025px) {
	.future h2 {
		margin-top: -80px;
	}
}

/* member */
.future .member {
	background: url("../future/images/member_bg.jpg") top center no-repeat;
	background-size: 150%;
	padding: 0 0 50px;
}
.future .member dl {
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
}
.future .member dl:nth-of-type(3) {
	margin-bottom: 0;
}
.future .member dl dt {
	margin-bottom: 16px;
	flex-basis: 33%;
}
.future .member dl dd.name {
	font-size: 1.3rem;
	line-height: 1.6;
	flex-basis: 67%;
	padding-left: 5%;
}
.future .member dl dd.name em {
	display: block;
	font-size: 2rem;
	color: #1e7bc0;
}
.future .member dl dd.profile {
	display: block;
	flex-basis: 100%;
	line-height: 1.8;
	font-size: 1.4rem;
	text-align: left;
	}
.future .member dl:nth-of-type(2) dd.name {
	order: -1;
	text-align: right;
	padding-right: 5%;
	}
	@media screen and (min-width:1025px) {
	.future .member {
		padding-bottom: 100px;
	}
	.future .member .wrap {
		max-width: 1200px;
	}
	.future .member dl {
		margin-bottom: 50px;
		display: block;
		overflow: hidden;
		width: 960px;
	}
	.future .member dl dt {
		float: left;
		width: 30%;
		margin-bottom: 0;
	}
	.future .member dl dd.name {
		float: left;
		width: 70%;
		padding-left: 4%;
		font-size: 1.5rem;
		line-height: 1.6;
		text-align: left;
	}
	.future .member dl dd.name em {
		display: inline-block;
		margin-right: 12px;
		font-size: 3rem;
		color: #1e7bc0;
	}
	.future .member dl dd.profile {
		float: right;
		width: 70%;
		margin-top: 12px;
		line-height: 1.8;
		font-size: 1.5rem;
		padding-left: 4%;
	}
	.future .member dl:nth-of-type(2) {
		margin-left: auto;
	}
	.future .member dl:nth-of-type(2) dt {
		float: right;
	}
	.future .member dl:nth-of-type(2) dd {
		padding: 0 4% 0 0;
	}
}
	
/* talkArea */
.talkArea {
	/* background: #333; 動画のかわり*/
	background: transparent;
	text-align: left;
	overflow: hidden;
	padding-bottom: 60px;
	position: relative;
	z-index: 20;
	transform: translate3d(0, 0, 0);
}
.talkArea h3 {
	color:#fff;
	padding: 0;
	font-size: 1.8rem;
	line-height: 1.6;
	margin: 90px 0 50px;
}
.talkArea h3 span {
	display: inline-block;
	padding-right: 85px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
	position: relative;
	margin-bottom: 20px;
}
.talkArea h3 span::before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 70px;
	height: 1px;
	background: #fff;
	}
.talkArea h3::before {
	display: none;
}
.talkArea h3 strong {
	display: block;
}
.talkArea .bg {
	background: rgba(255,255,255,0.85);
	width: 92%;
	padding: 30px 6% 10px;
	overflow: hidden;
	position: relative;
}
.talkArea .future02 .bg {
	margin-left: auto;
	}
	@media screen and (min-width:1025px) {
	.talkArea {
		padding-bottom: 160px;
	}
	.talkArea h3 {
		color:#fff;
		padding: 0;
		font-size: 3.5rem;
		line-height: 1.6;
		margin: 120px 0 90px;
	}
	.talkArea h3 span {
		display: inline-block;
		padding-right: 95px;
		font-family: 'Poppins', sans-serif;
		font-weight: 500;
		font-size: 1.8rem;
		position: relative;
		margin-bottom: 40px;
	}
	.talkArea h3 span::before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto 0;
		width: 85px;
		height: 1px;
		background: #fff;
		}
	.talkArea h3::before {
		display: none;
	}
	.talkArea h3 strong {
		display: block;
	}
	.talkArea .bg {
		background: rgba(255,255,255,0.85);
		width: 87.5%;
		padding: 90px 8.5% 70px 14%;
		overflow: hidden;
	}
	.talkArea .future02 .bg {
		margin-left: auto;
		padding: 90px 14% 90px 8.5%;
	}
}

/* 会話 */
.talkArea dl {
	display: flex;
	align-items: flex-start;
	margin: 0 0 20px;
	position: relative;
	z-index: 5;
}
.talkArea dt {
	font-size: 1.1rem;
	padding-top: 48px;
	text-align: right;
	flex-basis: 52px;
	margin-right: 30px;
	line-height: 1.1;
}
.talkArea dt.rm {
	background: url("../future/images/thumb_rm.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 52px auto;
}
.talkArea dt.st {
	background: url("../future/images/thumb_st.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 52px auto;
}
.talkArea dt.rs {
	background: url("../future/images/thumb_rs.png") top center no-repeat;
	-webkit-background-size: ;
	background-size: 52px auto;
}
.talkArea dd {
	padding: 0;
	position: relative;
	flex-basis: calc(100% - 82px);
}
.talkArea dd p {
	line-height: 1.8;
	margin-bottom: 0.5em;
	break-inside: avoid-column;
}

/* 写真L＋テキスト */
.talkArea .bg .picL {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 3;
}
.talkArea .bg .picL .pic {
	flex-basis: 100%;
	margin: 0 5% 30px;
}
.talkArea .bg .picL .box {
	flex-basis: 100%;
	order: -1;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .picL {
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 3;
	}
	.talkArea .bg .picL .pic {
		flex-basis: 43%;
		margin: 0 0 40px;
	}
	.talkArea .bg .picL .box {
		flex-basis: 57%;
		padding-left: 9%;
		order: 1;
	}
}

/* テキスト1カラム */
.talkArea .bg .column_1 {
	position: relative;
	z-index: 3;
}
.talkArea .future03 .bg .column_1 {
	margin: 0;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .column_1 {
		width: 90%;
		margin-left: auto;
		position: relative;
		z-index: 3;
	}
	.talkArea .future03 .bg .column_1 {
		margin: 0;
	}
}

/* 写真2枚目 */
.talkArea .bg .pic02 {
	width: 100%;
	margin-bottom: 30px;
	position: relative;
	z-index: 5;
	text-align: center;
}
.talkArea .bg .pic02 img {
	width: 90%;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .pic02 {
		width: 70%;
		margin: 40px 10% 40px auto;
		position: relative;
		z-index: 5;
	}
	.talkArea .bg .pic02 img {
		width: 100%;
	}
}

/* テキスト2カラム */
.talkArea .bg .column_2 {
	width: 100%;
}
	@media screen and (min-width:1025px) {
	.talkArea .bg .column_2 {
		width: 100%;
		column-count: 2;
		column-gap: 30px;
	}
	.talkArea .bg .pic03 + .column_2 {
		padding-top: 20px;
	}
}

/* 写真3枚目 */
.talkArea .bg .pic03 {
	width: 100%;
	position: relative;
	z-index: 5;
	margin-bottom: 30px;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .pic03 {
		width: 100%;
		position: relative;
		z-index: 5;
		margin: 40px 0;
	}
}

/* 写真R＋テキスト */
.talkArea .bg .picR {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 5;
}
.talkArea .bg .picR .pic {
	flex-basis: 100%;
	margin: 0 5% 30px;
	text-align: center;
}
.talkArea .bg .picR .box {
	flex-basis: 100%;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .picR {
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 5;
	}
	.talkArea .bg .picR .pic {
		flex-basis: 43%;
		margin: 0 0 40px;
	}
	.talkArea .bg .picR .box {
		flex-basis: 57%;
		padding-right: 9%;
		order: -1;
	}
}

/* 写真5枚目 */
.talkArea .bg .pic05 {
	width: 100%;
	margin: 30px auto 0;
	position: relative;
	z-index: 5;
	}
	@media screen and (min-width:1025px) {
	.talkArea .bg .pic05 {
		width: 100%;
		margin: 40px 0 0;
		position: relative;
		z-index: 5;
	}
}

/* 注意書き */
.attenR {
	margin: 1em 0 30px;
	}
	@media screen and (min-width:1025px) {
	.attenR {
		margin: 1.5em 0 0;
	}
}

/* 写真の背景装飾 */
.future01 .bg::before,
.future01 .bg::after,
.future02 .bg::before,
.future03 .bg::before,
.future03 .bg::after {
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.future01 .bg::before {
	top: 28%;
	left: 0;
	background: url("../future/images/bg_pic01.png") left top no-repeat;
	background-size: 200% auto;
}
.future01 .bg::after {
	bottom: 15%;
	right: 0;
	background: url("../future/images/bg_pic02.png") right bottom no-repeat;
	background-size: 200% auto;
}
.future02 .bg::before {
	top: 36%;
	left: 0;
	background: url("../future/images/bg_pic03.png") left top no-repeat;
	background-size: 120% auto;
}
.future03 .bg::before {
	top: 29%;
	right: 0;
	background: url("../future/images/bg_pic04.png") right top no-repeat;
	background-size: 200% auto;
}
.future03 .bg::after {
	bottom: -2%;
	left: 0;
	background: url("../future/images/bg_pic05.png") left bottom no-repeat;
	background-size: 180% auto;
	}
	@media screen and (min-width:1025px) {
	.future01 .bg::before {
		top: 0;
		left: 0;
		background: url("../future/images/bg_pic01.png") left top no-repeat;
		background-size: 100% auto;
	}
	.future01 .bg::after {
		bottom: 12%;
		right: 0;
		background: url("../future/images/bg_pic02.png") right bottom no-repeat;
		background-size: 100% auto;
	}
	.future02 .bg::before {
		top: 30%;
		left: 0;
		background: url("../future/images/bg_pic03.png") left top no-repeat;
		background-size: 100% auto;
	}
	.future03 .bg::before {
		top: 20%;
		right: 0;
		background: url("../future/images/bg_pic04.png") right top no-repeat;
		background-size: 100% auto;
	}
	.future03 .bg::after {
		bottom: -10%;
		left: 0;
		background: url("../future/images/bg_pic05.png") left bottom no-repeat;
		background-size: 100% auto;
	}
}

/* 動画背景
------------------------------------------------- */
.future .bgW {
	z-index:1;
}
#contentsArea {
	position: relative;
	overflow: hidden;
}

#videoCover {
	position: fixed;
	content: "";
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(14, 50, 76, 0.8);
	z-index: 1;
}
video#bgvid {
		display: block;
		position: fixed;
		right: 0;
		top: 0;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -100;
}

/* おすすめコンテンツ調整
------------------------------------------------- */
.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: 160px;
	}
	.recommendArea::before, .recommendArea::after {
		top: 360px;
	}
}


/* for appear
============================ */
.future h3,
.future .member,
.future .talkArea .bg {
	opacity: 0;
	position: relative;
	top: 50px;
}