@charset "UTF-8";

/* design_developmentContent
--------------------------------------------------------------------*/
#design_developmentContent {
	margin: 100px auto;
	max-width:66vw;
}
#design_developmentContent h3 {
	margin-bottom: 50px;
	font-size: 180%;
	font-weight: bold;
	text-align:center;
}
#design_developmentContent h3:before{
	margin-right: 10px;
	content: url(../img/arrow_h3.png);
}


#design_developmentContent .btn {
	margin: 0 auto 50px;
	width: 300px;
	height: 70px;
	text-align: center;
}
#design_developmentContent .btn a {
	display: block;
	background: #004097;
	border-radius: 7px;
	line-height: 70px;
	font-size: 150%;
	font-weight: bold;
	color: #fff;
}
#design_developmentContent .btn a:before {
	margin-right: 5px;
	content: url(../img/arrow_w.png);
}
#design_developmentContent .btn a:hover {
	opacity: 0.8;
	text-decoration: none;
}
#design_developmentImage .cover_scroll_txt {
  position:absolute;
  font-size: 18px;
  color: #ffffff;
  bottom: 27%;
  margin-left: -64px;
  font-weight:600;
  left:50%;
  text-align:center;
  padding:3px;
  width: 120px;
  height: 23px;
  background-color:rgba(201,188,156,0.8);
  border-radius: 0.2em;
  z-index:3;
}
#design_developmentImage .cover_scroll_txt_01 {
  position:absolute;
  font-size: 15px;
  color: #ffffff;
  bottom: 24%;
  margin-left: -115px;
  font-weight:600;
  left:50%;
  text-align:center;
  z-index:2;
}
#design_developmentImage .cover-scroll-icon{
  position: absolute;
  width: 53px;
  height: 53px;
  left: 50%;
  bottom: 18%;
  margin-left: -31px;
  text-align: center;
  animation: animeicon 1.5s ease -2s infinite none;
  -webkit-animation: animeicon 1.5s ease -2s infinite none;
}
@keyframes animeicon {
	0% {transform: translateY(0px); opacity: 1;}
	20%{transform: translateY(5px); opacity: 1;}
	30% {transform: translateY(0px); opacity: 1;}
	40%{transform: translateY(5px); opacity: 1;}
	50%{transform: translateY(0px); opacity: 1;}
	80%{transform: translateY(15px); opacity: 1;}
	100% {transform: translateY(0px); opacity: 1;}
}
@-webkit-keyframes animeicon {
	0% {transform: translateY(0px); opacity: 1;}
	20%{transform: translateY(5px); opacity: 1;}
	30% {transform: translateY(0px); opacity: 1;}
	40%{transform: translateY(5px); opacity: 1;}
	50%{transform: translateY(0px); opacity: 1;}
	80%{transform: translateY(15px); opacity: 1;}
	100% {transform: translateY(0px); opacity: 1;}
}
@media(max-width:768px){
	#design_developmentContent {max-width:94%;}
	#design_developmentContent h3,
	#design_developmentImage .cover-scroll-icon,
	{
		margin-left:auto;
		margin-right:auto;
		width:94%;
	}
}

/* design_development image
--------------------------------------------------------------------*/
#design_developmentImage{
    background-size: cover;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: url(../design_development/img/top_image.jpg) center center no-repeat;
}

/* design_development arrow
--------------------------------------------------------------------*/
#design_developmentImage .arrow01 {
	left: 0;
	right: 0;
	top:22%;
	position:absolute;
	text-align: center;
	animation: spin 3s ease -2s infinite forwards;
	-webkit-animation: spin 3s ease -2s infinite forwards;
	z-index:0;
}
@keyframes spin {
  0% {transform: rotateZ(360deg);}
  50% {transform: rotateZ(180deg);}
  100% {transform: rotateZ(0deg);}
}
@-webkit-keyframes spin {
  0% {transform: rotateZ(360deg);}
  50% {transform: rotateZ(180deg);}
  100% {transform: rotateZ(0deg);}
}

@media(max-width:768px){
	#design_developmentImage {
		height: 38vh;
		background: url(../design_development/img/top_image_sp.jpg) center no-repeat;
	}
	#design_developmentImage .arrow01 {
		animation: none;
		top: -7vh;
		width: 450px;
		display:none;
	}
}



/* design_development
--------------------------------------------------------------------*/
/* Bluebox */
#bluebox{
	background-image:url(../design_development/img/design_development_backgroud01.jpg);
	background-repeat:repeat-y;
	background-size:50%;
	display:inline-block;
	padding:10px;
	margin-bottom:70px;
}

#bluebox img{
	float:right;
	width:60%;
	margin-top:2%;
}
#bluebox p{
	float:left;
	color:#fff;
	width:35%;
	margin:10px 20px;
}
@media(max-width:1819px){
	#bluebox img{margin-top:15%;}
}
@media(max-width:768px){
	#bluebox{background-size:100%;}
	#bluebox img,
	#bluebox p{
		float:none;
		width:100%;
	}
	#bluebox img{margin:0;}
	#bluebox p{
		margin:0 0 10px;
	}
}

/* yellowbox */
#yellowbox{
	background-image:url(../design_development/img/design_development_backgroud02.png);
	background-repeat:repeat-y;
	background-size:50%;
	background-position:right;
	display:inline-block;
	padding:10px;
	margin-bottom:70px;
}
#yellowbox img{
	float:left;
	width:60%;
	margin-top:2%;
}
#yellowbox p{
	float:right;
	width:35%;
	margin:10px 20px;
}
@media(max-width:1819px){
	#yellowbox img{margin-top:12%;}
}
@media(max-width:768px){
	#yellowbox{background-size:100%;}
	#yellowbox img,
	#yellowbox p{
		float:none;
		width:100%;
	}
	#yellowbox img{margin:0;}
	#yellowbox p{
		margin:0 0 10px;
	}
}

/* glaybox */
#glaybox{
	background:#ddd;
	padding:50px 30px;
	margin:0 0 50px;
	overflow: hidden;
	}

#glaybox .start,
#glaybox .kakunin{
	position:relative;
	height:auto;
}
#glaybox .start p{
	width:30%;
	float:left;
	display:inline-block;
}
#glaybox .start .image{
	float:left;
	margin-left:10px;
	width:36%;
	display:inline-block;
}
#glaybox .start .imgCad,
#glaybox .start .img3d{
	width:46%;
	border: 4px solid #6061A7;
}
#glaybox .start .imgCad{float:left;}
#glaybox .start .img3d{float:right;}
#glaybox .start .note{
	float:right;
	position:relative;
	width:30%;
	display:block;
}
#glaybox .noteMark{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:15%;
}
#glaybox .start .text{
	background:#fff;
	width:84%;
	border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	padding:15px;
	top:30px;
	left:30px;
	position:absolute;
	z-index:1;
}
#glaybox .flowImage .flow{
	width:100%;
	margin:70px 0;
	position:relative;
}
#glaybox .flowSp{display:none;}
#glaybox .kakunin .note{
	float:left;
	position:relative;
	width:30%;
}
#glaybox .kakunin .text{
	background:#fff;
	width:90%;
	border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	padding:15px;
	top:30px;
	left:30px;
	position:absolute;
	z-index:1;
}
#glaybox .kakunin .image{
	float:right;
	width:65%;
	display:inline-block;
	position:relative;
}
#glaybox .kakunin .ex01,
#glaybox .kakunin .ex02{
	border: 4px solid #6061A7;
}
#glaybox .kakunin .ex01{float:left; width:55%;}
#glaybox .kakunin .ex02{float:right; width:37%;}
@media(max-width:1819px){
	#glaybox .start .text,
	#glaybox .kakunin .text{
		top:15px;
		left:15px;
	}
}
@media(max-width:1700px){
	#glaybox .start .text,
	#glaybox .kakunin .text{
		top:20px;
		left:20px;
	}
}
@media(max-width:768px){
	#glaybox{
		padding:20px;
	}
	#glaybox .start p,
	#glaybox .start .image,
	#glaybox .start .note,
	#glaybox .kakunin .image,
	#glaybox .kakunin .note{
		float:none;
		width:100%;
		margin:0;
	}
	#glaybox .start p,
	#glaybox .start .image{margin-bottom:20px;}
	#glaybox .flow{display:none;}
	#glaybox .flowSp{
		display:block;
		width:100%;
		margin:0;
	}
	#glaybox .start .note,
	#glaybox .kakunin .note{
		top:-10px;
		left:-10px;
	}
	#glaybox .start .text,
	#glaybox .kakunin .text{
		top:15px;
		left:15px;
		padding:25px 15px 15px;
	}
	#glaybox .flowImage{margin-bottom:50px;}
	#glaybox .kakunin .image:before,
	#glaybox .flowImage:before {
		content: "";
		display: block;
		padding-top: 70%;
	}
}

/* whitebox */
#whitebox{
	overflow:hidden;
}
#whitebox .parts{
	float:left;
	width:30%;
	position:relative;
	display:inline-block;
}
#whitebox .parts .partsList{
	position:relative;
	margin-bottom:40px;
}
#whitebox p{
	position:relative;
	margin:0 20px;
	}
#whitebox .parts p.note{
	position:absolute;
	top:0;
	left:0;
	margin:0;
	z-index:2;
	display:inline-block;
	width:auto;
	padding:0 10px;
	float:left;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	background-color:#f6b242;
	border:solid 3px #fff;
	border-radius:50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
	box-shadow:0px 0px 0px 1px #ccc;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #whitebox .parts p.note{
	  padding-top:5px;
	  font-size:22px;
  }
}
#whitebox ul{
	position:relative;
	z-index:1;
	top:20px;
	left:20px;
	list-style: none;
	background:#FFF;
	border:solid 1px #ccc;
	border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	box-shadow:2px 5px 5px 1px #ccc;
	padding:30px 30px 10px;
	width:71%;
	}
#whitebox ul li{
	text-indent:-1em;
	}
#whitebox ul li:before{
	content:"●";
	color:#f30;
}
#whitebox .imgCar{
	float:right;
	width:65%;
}
@media(max-width:1819px){
	#whitebox p{
		margin-right:-20px;
	}
}
@media(max-width:768px){
	#whitebox .parts{
		float:none;
		width:100%;
	}
	#whitebox .parts p{
		margin-left:0;
		width:100%;
	}
	#whitebox .imgCar{
		margin-top:30px;
		float:none;
		width:100%;
	}
}