@charset "utf-8";
/* CSS Document */

/* =====================
  mv
===================== */
.mv {
    background-color: #ffd429;
    position: relative;
    background-image: url(../images/common/bg_logo.png);
    background-position: left 50% top 90%;
    background-repeat: no-repeat;
    background-size: 40%;
    width: 100%;
    height: 800px;
	overflow: hidden;
}
.mv img {
	position: absolute;
	left: 50%;
	bottom: -30%;
	transform: translate(-50%,0);
}
.mv .text {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 38%;
	transform: translate(-50%,50%);
	font-size: 9rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.mv .text span {
	display: block;
	margin-top: 40px;
	font-size: 2.8rem;
}

/* =====================
  box
===================== */
main .img-wrap {
	width: 37%;
	display: inline-block;
	vertical-align: top;
}
main .img-wrap img {
	width: 100%;
}
main .box {
	width: 100%;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	position: relative;
}
main .box.right {
	margin-left: 2%;
}
main .box.left {
	margin-right: 5%;
}
main .box h3 {
	font-size: 3.6rem;
	text-align: left;
	margin-bottom: 40px;
	line-height: 1.4;
}
/*  sec01 */
main .sec01 .box {
	height: 480px;
}
main .sec01 .img-wrap {
	margin-top: 70px;
}
main .box .name {
	font-weight: bold;
	font-size: 2rem;
	position: absolute;
	left: 0;
	bottom: 0;
}
main .box .name span {
	font-size: 1.4rem;
	display: block;
}
/*  sec03  sec04 */
main .sec03,
main .sec04 {
	margin-bottom: 80px;
}
main .sec03 .img-wrap {
	margin-top: 50px;
}
main .sec04 .box {
}


/* =====================
  future sec02
===================== */
main .sec02 {
	margin: -70px 0 140px 0;
    font-family: 'Oswald', sans-serif;
	text-align: center;
    background-color: #ffd429;
	color: #fff;	
	padding: 125px 0 40px 0;
	font-size: 8rem;
	font-weight: bold;
	letter-spacing: 0.8em;
}


/* =====================
  move
===================== */
main .move {
	margin: 90px 0 80px;
}
main .move .container {
	max-width: 800px;
}
main .move h3 {
	font-size: 3.6rem;
	margin-bottom: 40px;
	letter-spacing: 0.1em;
	font-weight: bold;
}
main .move .video-wrap {
    position: relative;
}
main .move video {
	width: 100%;
}
main .move .video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
	bottom: 40px;
    cursor: pointer;
}
main .sp-video-wrap {
    display: none;
}

/* =====================
  sec05
===================== */
main .sec05 h3 {
	font-size: 3.6rem;
	letter-spacing: 0.1em;
	background-image: url(../images/company/future/img_logoicon.png);
	background-repeat: no-repeat;
	background-position: top 0 left 50%;
	padding: 70px 0 40px 0;
	margin-bottom: 40px;
}
main .sec05 .item {
	margin-bottom: 40px;
}
main .sec05 .item:last-child {
	margin-bottom: 0px;
}
main .sec05 .item h4 {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 25px;
}
main .sec05 .item h4 span {
    font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;
	color: #ffd429;
	letter-spacing: 0.1em;
    top: -2px;
    position: relative;
	margin-right: 3px;
}
main .sec05 .item .detail {
	background-color: #eee;
	padding: 50px 40px;
}
main .sec05 .item .detail h5 {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.6;
}
main .sec05 .item .detail .left {
	width: 60%;
    margin-right: 2%;
}
main .sec05 .item .detail .right {
	width: 37%;
}
main .sec05 .item .detail .right img {
	width: 100%;
}




/* ====================================================================================
         SP時
  ==================================================================================== */
@media screen and (max-width: 768px) {
	

/* =====================
  mv
===================== */
	.mv {
		background-size: contain;
		height: 400px;
	}
	.mv img {
		height: 100%;
	}
	.mv .text {
		bottom: 30%;
		font-size: 2.6rem;
	}
	.mv .text span {
		margin-top: 20px;
		font-size: 1.6rem;
	}

/* =====================
  box
===================== */
	main .img-wrap {
		width: 100%;
		margin-bottom: 20px;
	}
	main .box {
		width: 100%;
	}
	main .box.right {
		margin-left: 0%;
	}
	main .box.left {
		margin-right: 0%;
	}
	main .box h3 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
/*  sec01 */
	main .sec01 .box {
		height: auto;
	}
	main .sec01 .img-wrap {
		margin-top: 0px;
	}
	main .box .name {
		font-size: 1.8rem;
		position: static;
		margin-top: 20px;
	}
	main .box .name span {
		font-size: 1.2rem;
	}
/*  sec03  sec04 */
	main .sec03,
	main .sec04 {
		margin-bottom: 40px;
	}
	main .sec03 .img-wrap {
		margin-top: 30px;
	}
	main .sec04 .box {
		margin-top: 20px;
	}


/* =====================
  future sec02
===================== */
	main .sec02 {
		margin: 40px 0 40px 0;
		padding: 40px 0 40px 0;
		font-size: 4rem;
		letter-spacing: 0.4em;
	}

	
/* =====================
  move
===================== */
	main .video-wrap {
		display: none;
	}
/*	
	main .move {
		margin: 40px 0 40px;
	}
	main .move h3 {
		font-size: 2rem;
		margin-bottom: 20px;
	}
*/	
	main .sp-video-wrap {
		display: block;
	}
	main .sp-video-wrap iframe {
		width: 100%;
	}

	
/* =====================
  sec05
===================== */
	main .sec05 h3 {
		font-size: 2rem;
		background-size: contain;
		padding: 40px 0 20px 0;
		margin-bottom: 30px;
		margin-top: 60px;
	}
	main .sec05 .item {
		margin-bottom: 30px;
	}
	main .sec05 .item h4 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
	main .sec05 .item h4 span {
		font-size: 1.2rem;
	}
	main .sec05 .item .detail {
		padding: 30px 20px;
	}
	main .sec05 .item .detail h5 {
		font-size: 1.6rem;
		margin-bottom: 20px;
	}
	main .sec05 .item .detail .left {
		width: 100%;
		margin-right: 0%;
		margin-bottom: 20px;
	}
	main .sec05 .item .detail .right {
		width: 100%;
	}
	
	
}