@charset "utf-8";

html,
body {
	height: 100%;
}
.pc {
	display:block;
}
.sp {
	display:none;
}

.center {
	text-align: center;
	padding: 0 20px;
}

section h1 img {
	width: 245px;
	height: auto;
}
section h1::after {
    display:none;
}

.idea {
	margin: 80px auto 0;
	max-width: 1500px;
	position: relative;
}
.idea .idea_img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: url('../img/creation/img_main.jpg') center center no-repeat;
	background-size: 100% auto;
}
.idea .inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:0 20px;
}
.idea h2,
.planning h2 {
	font-size:8.5rem;
	line-height:1.1;
}
.idea h2 {
	padding-top: 12vw;
}
.idea p {
	padding-bottom: 16.87vw;
}

#creation > div {
	position: relative;
}
#creation > div > img {
	position: absolute;
	z-index: -1;
}
#creation > div h3 {
	font-size: 2.4rem;
	line-height: 1.8;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
	/* margin-top: 0; */
}
#creation > div p {
	font-size: 1.6rem;
	line-height: 1.8;
	position: relative;
	z-index: 2;
}

.idea h2 {
	margin-bottom:40px;
}
.idea p {
	text-align: center;
}

.planning {
	margin:10vw auto 0;
}
.planning .plan_img {
	position: absolute;
	width: 54.66%;
	max-width: 820px;
	padding: 74.146% 0 0;
	top: 12.5%;
	right: 8.866%;
	z-index: 0;
}
.planning .plan_img .img_left {
	width: 61%;
	max-width: 500px;
	height: auto;
	position: absolute;
	top: 0;
	right: 39%;
	z-index: 2;
}
.planning .plan_img .img_right {
	width: 44%;
	max-width: 360px;
	height: auto;
	position: absolute;
	top: 17.5%;
	right: 0;
	z-index: 1;
}
.planning .plan_img .img_left img,
.planning .plan_img .img_right img {
	vertical-align: top;
}
.slide_left .animate_cover,
.slide_left_multi .animate_cover {
	width: 101%;
	height: 101%;
}
.planning h2 {
	padding-left:24.733%;
	margin-bottom:70px;
}
.planning h2 span {
	font-size: 6.0rem;
}
.planning h3 {
	padding-left: 7.33%;
}
.planning p {
	max-width: calc(700px + 7.33%);
	width: 100%;
	max-height: 526px;
	padding: 0 20px 22vw 7.33%;
}

.design > div {
	position: absolute;
	width: 58%;
	max-width: 870px;
	top: 0.5%;
}
.design img {
	width:100%;
	max-width:870px;
	height:auto;
	top:0.5%;
	left:0;
}
.design h3 {
	padding-left: 60.8%;
}
.design p {
	max-width: calc(700px + 60.8%);
	width: 100%;
	max-height: 436px;
	padding: 0 20px 18.24vw 60.8%;
}

.new > div {
	position:absolute;
	width:34.133%;
	max-width:512px;
	top:0;
	left:50%;
	z-index: 1;
}
.new img {
	width:100%;
	max-width:512px;
	height:auto;
	top:0;
	left:50%;
}
.new h2 {
	max-width: 1240px;
	width: 100%;
	font-size: 6rem;
	padding: 2.1vw 20px 4.6vw;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 3;
}
.new h3 {
	padding-left: 17.8%;
}
.new p {
	max-width: calc(700px + 17.8%);
	width: 100%;
	max-height:546px;
	padding: 0 20px 22.83vw 17.8%;
}

.culture > div {
	position: absolute;
	width: 55.6%;
	max-width: 834px;
	top: 0;
	right: 0;
}
.culture img {
	width: 100%;
	max-width: 834px;
	height: auto;
	top: 0;
	right: 0;
}
.culture h2 {
	max-width: calc(900px + 7.4%);
	width: 100%;
	font-size: 6rem;
	padding: 4.6vw 20px 1vw 7.4%;
}
.culture h3 {
	max-width: calc(700px + 7.4%);
	width: 100%;
	padding-left: 7.4%;
}
.culture p {
	max-width: calc(700px + 7.4%);
	width: 100%;
	max-height: 407px;
	padding: 0 20px 12.55vw 7.4%;
}


.cont6 {
	width: 100%;
	height: 210px;
	max-width: 900px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 110px 0 0;
	position: relative;
}
.cont6 a {
	display: inline-block;
	padding: 0 0 0 18px;
	position: relative;
}
.cont6 a::before {
	content:"";
	width: 11px;
	height: 11px;
	margin: auto 0;
    border-left: #000 1px solid;
    border-bottom: #000 1px solid;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top:0;
    bottom:0;
    left:0;
}
.cont6 img {
	width: 247px;
	height: auto;
	margin: 0 auto;
	position: absolute;
	top:0;
	left:0;
	right:0;
	z-index: 11;
}
.footerLink {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 84px;
}
.footerLink li {
	width: 25%;
	float: left;
	position:relative;
}
.footerLink li a {
	display: block;
}
.footerLink li img {
	width: 100%;
	height: auto;
}


@media screen and (max-width: 1000px) {
	.idea .inner {
		background:rgba(255,255,255,0.5);
	}
}

@media screen and (max-width: 940px) {
	.cont6 {
		margin: 0 auto;
		padding: 110px 20px 0;
	}
}
@media screen and (max-width: 768px) {
	.planning {
		margin-top:120px;
	}
	.idea h2,
	.planning h2 {
		font-size:6.0rem;
		padding-left: 20px;
		margin-bottom: 50px;
	}
	.planning h2 span {
		font-size:4.2rem;
	}
	.new h2,
	.culture h2 {
		font-size: 4.2rem;
		text-align: left;
	}

	.planning .plan_img {
		position: relative !important;
		width: 100%;
		left: 0;
		top: 0;
	}

	.planning h3 {
		padding-left: 20px;
	}
	.planning p {
		padding-left: 20px;
		padding-bottom: 80px;
	}

	.design > div {
		position: relative !important;
		width: 90%;
	}
	.design h3 {
		padding-left: 20px;
		margin-top: 20px;
	}
	.design p {
		padding-left:20px;
		padding-bottom: 100px;
	}

	.new > div {
		width:40%;
		right:0;
		left:auto;
	}
	.new h2 {
		padding-left: 20px;
		padding-top: 0;
		line-height: 1;
		padding-bottom: 40px;
	}
	.new h3 {
		padding-left: 20px;
		/* margin-top: 20px; */
	}
	.new p {
		padding-left: 20px;
		padding-bottom: 120px;
	}

	.culture > div {
		position:relative !important;
		width:100%;
		right:0;
		left:auto;
	}
	.culture h2 {
		padding-left:20px;
		padding-top: 40px;
		line-height: 1;
		padding-bottom: 40px;
	}
	.culture h3 {
		padding-left:20px;
		/* margin-top: 20px; */
	}
	.culture p {
		padding-left:20px;
		padding-bottom: 120px;
	}
}
@media screen and (max-width: 640px) {
	.pc {
		display:none;
	}
	.sp {
		display:block;
	}
	.idea {
		margin:80px auto 0;
	}
	.idea .idea_img {
		background: url('../img/creation/img_main_sp.jpg') center center no-repeat;
		background-size: auto 100%;
	}
	.idea .inner {
	    background: rgba(255,255,255,0);
	}
	.idea h2 {
	    padding-top: 42.5vw;
	}
	.idea p {
	    padding-bottom: 48.4vw;
	}
	.cont6 {
		margin: 80px auto 0;
		padding: 0 20px;
	}
	.cont6 img {
	    width: 200px;
	    top: 40px;
	}
	.footerLink li {
	    width: 50%;
	}
}
@media screen and (max-width: 550px) {
	.cont6 {
		margin: 40px auto 0;
		padding: 0 20px;
	}
	#creation > div h3 {
		padding-right:20px;
	}
	#creation > div p {
		padding-right:20px;
		font-size: 1.4rem;
	}
	#creation > div p br {
		display:none;
	}
	.idea h2,
	.planning h2 {
		font-size: 3.2rem;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.idea h2 {
		margin-top: 0;
	}
	.planning {
		margin-top: 60px;
	}
	.planning h2 span {
		font-size: 2.6rem;
	}
	.new h2,
	.culture h2 {
		font-size: 2.4rem;
	}
	#creation > div h3 {
		font-size: 1.8rem;
		margin-bottom: 40px;
		padding-left: 20px;
	}
	.idea {
		/* padding:0; */
	}
	.idea p {
		text-align:left;
		padding-right: 0 !important;
	}
	.idea p br {
		display:none;
	}
	.idea h2 {
		padding-left:0;
	}
	.design p {
		padding-bottom:80px;
	}
	.new > div {
		position:relative !important;
		width:100%;
	}
	.new h2 {
		margin-top:40px;
	}
	.new p {
		padding-bottom:80px;
	}
	.culture p {
		padding-bottom: 40px;
	}
}
@media screen and (max-width: 348px) {
	.idea {
		background-size: 100% auto;
	}
}