@charset "UTF-8";

/* #header */
#header {
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	border-bottom:none;
}

/* .navToggle */
.navToggle {
	background-position:left center;
}
.navToggle.active {
	background-position:left bottom;
}

/* .hero */
.hero {
	position: relative;
	height: 97.86667vw;
	background: url(../images/top/video.jpg) no-repeat center bottom;
	background-size: cover;
}
.hero__content {
	height: auto !important;
	background: url(../images/top/mainimg_sp.jpg) no-repeat center bottom;
	background-size: cover;
	position: relative;
	padding: 45% 0 44%;
}
.hero__copy {
	width: 69.334%;
	margin: 0 auto;
}

/* .topArea */
.topArea {
	overflow:hidden;
	padding-bottom:4.1em;
}
.topArea .photos {
	font-size:0;
	text-align:center;
	margin:0 -0.9%;
}
.topArea .photos li {
	width:20%;
	display:inline-block;
	box-sizing:border-box;
	padding:0 0.9%;
}
.topArea .txt01 {
	letter-spacing:0.07em;
}

/* .featuresArea */
.featuresArea {
	background:url(../images/top/bg_features.jpg) no-repeat center center;
	background-size:cover;
	color:#fff;
	overflow:hidden;
	padding-bottom:6em;
}
.featuresArea .ttl01 {
	letter-spacing:0.07em;
	text-align:center;
	font-weight:normal;
	line-height:1.3;
	padding:2.1em 0 1.9em;
}

/* .featuresList */
.featuresList {
	width:102.5%;
	display:table;
	margin:0 -1.25%;
	padding-bottom:3.5em;
}
.featuresList li {
	width:33.33%;
	display:table-cell;
	vertical-align:top;
	text-align:center;
}
.featuresList li div {
	width:93%;
	margin:0 auto;
	border-right:#fff 1px solid;
	border-bottom:#fff 1px solid;
	font-weight:bold;
	display:table;
}
.featuresList li div p {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	height:9.7em;
	padding:0.8em 1.5%;
	box-sizing:border-box;
}

/* .technologyArea */
.technologyArea {
	background:#ebebeb;
	overflow:hidden;
	padding-bottom:5.4em;
}
.technologyArea .ttl01 {
	letter-spacing:0.07em;
	text-align:center;
	font-weight:normal;
	line-height:1.3;
	padding:1.6em 0 1.1em;
	color:#101638;
}
.technologyArea .copy {
	text-align: center;
	padding: 2em 0;
}
.technologyArea .btn a {
	width: 19.6%;
	display: block;
	color: #000;
	background: #fff;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
	border-radius: 5em;
	padding: 1px 5px 0;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 1.6;
	border:#000000 1px solid;
	text-decoration:none;
}
.pc { display: block !important; }
.sp { display: none !important; }

/* .technologyList */
.technologyList {
	margin:0 -1.5%;
}
.technologyList li {
	width:16.667%;
	display:inline-block;
	vertical-align:top;
	padding:0 1.5%;
	box-sizing:border-box;
}
.technologyList li .img {
	width:55%;
	margin:0 auto;
}
.technologyList li .tit {
	text-align:center;
	color:#0f1537;
	padding:1em 0 0;
}
.technologyList li div {
	padding-bottom:1.1em;
}
.technologyList li div ul {
	padding: 10px 0 0 1em;
}
.technologyList li div ul li {
	display: list-item;
	list-style: outside disc;
	width: 100%;
	padding: 0;
	line-height: 1.2;
	margin-bottom: 7px;
	font-size: 14px;
}

/* .pointArea */
.pointArea {
	background:url(../images/top/bg_point.jpg) no-repeat center center;
	background-size:cover;
	color:#fff;
	padding-bottom:3.5em;
}
.pointArea .ttl01 {
	letter-spacing:0.07em;
	text-align:center;
	font-weight:normal;
	padding:1.15em 0 0.1em;
}
.pointArea .txt {
	text-align:center;
	line-height:1.8;
	height:auto!important;
	height:15em;
	min-height:15em;
	padding-bottom:12.5em;
}

/* .originalArea */
.originalArea {
	padding:4.7em 0 6.5em;
}
.originalArea .cont {
	width:37%;
	float:right;
}
.originalArea .cont .txt {
	line-height:1.9;
	padding-bottom:2.3em;
}
.originalArea .cont .moreBtn a {
	width:53%;
}
.originalArea .cont .ttl01 {
	font-weight:normal;
	padding:0.5em 0;
	line-height:1.3;
}

/* .originalList */
.originalList {
	width:61%;
	float:left;
	font-size:0;
}
.originalList li {
	width:33.33%;
	display:inline-block;
	padding:1.1% 2.6% 1.1% 0;
	box-sizing:border-box;
}

/* .recruitArea */
.recruitArea {
	background:#a4d363;
	padding:5.3em 0 5.7em;
}
.recruitArea .cont {
	width:43.5%;
	float:left;
}
.recruitArea .cont .ttl01 {
	font-weight:normal;
	padding:0.7em 0 0.8em;
}
.recruitArea .cont .txt {
	line-height:1.9;
	padding-bottom:5.5em;
}
.recruitArea .photo01 {
	width:54%;
	float:right;
}

/* .infoArea */
.infoArea {
	background:#ebebeb;
	padding:3.8em 0;
}
.infoArea .img {
	width:40.3%;
	float:left;
	padding:4em 0;
}
.infoArea .img li {
	width:53.1%;
}
.infoArea .img li:last-child {
	width:45.4%;
}
.infoArea .infoSet {
	width:50.5%;
	float:right;
}
.infoArea .infoSet .ttl01 {
	font-weight:normal;
	text-align:center;
	letter-spacing:0.1em;
}
.infoArea .infoSet .ttl01 span {
	display:inline-block;
	background:url(../common/images/ico_info.png) no-repeat left center;
	background-size:14% auto;
	padding:0 10%;
}
.infoArea .infoList {
	padding:1.5em 0 2em;
}
.infoArea .infoList li {
	overflow:hidden;
	line-height:1.8;
}
.infoArea .infoList li .dates {
	width:16.8%;
	float:left;
	display:block;
	letter-spacing:-0.05em;
}
.infoArea .infoList li p {
	width:83.2%;
	float:right;
}
.infoArea .infoList li p a {
	color:#000;
}
.infoArea .infoSet .btn a {
	width:47.5%;
	margin:0 auto;
	text-align:center;
	display:block;
	color:#fff;
	background:#000;
	text-decoration:none;
	padding:0.6em 0 0.4em;
}

@media print, screen and (min-width:751px){
/* #header */
#header {
	background:rgba(0,0,0,0.50);
}
.logo {
	width:24%;
	padding:2.4% 0 3%;
}
	
/* .hero */
.hero {
	overflow: hidden;
	height: auto;
}
.hero .video {
	position: relative;
	width: auto;
	height: 0;
	padding-top: 56.25%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.hero iframe {
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: scale(1.25);
}
.hero__content, .hero__photo {
	display: none;
}
.hero__copy {
	width: 303px;
	height: 350px;
	margin: 190px auto 70px;
}
.toggle_mute {
	display: block;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	cursor: pointer;
	width: 60px;
	height: 26px;
	background: url(../images/top/toggle-mute.svg) no-repeat center bottom;
	background-size: cover;
}
.toggle_mute.mute {
	background-position: center top;
}

/* .gnav */
.gnav {
	width:76%;
	padding-top: 0;
}
.gnav ul li {
	padding:0;
}
.gnav ul li a {
	color:#fff;
	padding:4px 7px;
	margin-bottom:0;
}
.gnav ul li a.on,
.gnav ul li a:hover {
	border-bottom:#fff 1px solid;
	background:none;
}
.gnav ul li:last-child a {
	padding-right:0;
}

/* .topArea */
.topArea .txt01 {
	line-height:2.2;
	text-align:center;
	padding:3em 0 2em;
}

/* .technologyList */
.technologyList {
	font-size:0;
}
.technologyList li .btn a:hover {
	opacity:0.8;
}

/* .infoArea */
.infoArea .infoSet .btn a:hover {
	opacity:0.6;
}
}

@media print, screen and (min-width:751px) and (max-width:1024px){
.gnav ul li a {
	padding-left:4px;
	padding-right:4px;
}
.toggle_mute {
	right: 10px;
}
.technologyList li div ul li {
	font-size:1.4vw;
}
}

@media only screen and (max-width:750px){
/* #header */
.logo {
	width:52.66%;
	padding:1.8em 0 1.8em 2.5em;
}

/* .fixNav */
#header.fixNav {
	background:rgba(0,0,0,0.50);
}
	
/* #contents */
#contents {
	padding-top: 0 !important;
}

/* .hero */
.hero {
	background: none;
	height: auto;
}
.hero .video, .hero .video-background {
	display: none;
}
.toggle-mute {
	display: none;
}

/* .topArea */
.topArea {
	padding-bottom:2.5em;
}
.topArea .txt01 {
	line-height:1.7;
	padding:2em 0;
}
.topArea .photos {
	margin:0 -1.4%;
}
.topArea .photos li {
	width:33.33%;
	padding:0 1.4% 3.5%;
}

/* .featuresArea */
.featuresArea {
	background:url(../images/top/bg_features_sp.jpg) no-repeat center center;
	background-size:cover;
	padding-bottom:3.8em;
}
.featuresArea .ttl01 {
	font-size:7.5vw;
	padding:1.3em 0 1.1em;
	line-height:1.4;
}

/* .featuresList */
.featuresList {
	padding-bottom:4em;
}
.featuresList li div p {
	height:7.5em;
	padding:0.8em 6%;
	line-height:1.3;
}

/* .technologyArea */
.technologyArea {
	background:#f4f4f4;
	padding-bottom:0;
}
.technologyArea .ttl01 {
	font-size:7.5vw;
	padding:1em 0 1.3em;
	line-height:1.4;
}
.technologyArea .copy {
	text-align: left;
}
.technologyArea .btn a {
	width: 69% !important;
	font-size: 4.5vw;
	padding: 0.4em 0;
	margin-bottom: 4em;
}
.pc { display: none !important; }
.sp { display: block !important; }

/* .technologyList */
.technologyList {
	margin:0 auto;
}
.technologyList li {
	width:69%;
	margin:0 auto;
	display:block;
	padding:0 0 4em;
}
.technologyList li:last-child {
	padding-bottom: 0;
}
.technologyList li .img {
	width:30%;
}
.technologyList li div {
	line-height:1.6;
	padding-bottom:1.5em;
}
.technologyList li .tit {
	font-size:5.8vw;
	font-weight:bold;
	padding:0.25em 0;
}
.technologyList li div ul {
	height: auto !important;
}
.technologyList li div ul li {
	font-size:4vw;
}

/* .pointArea */
.pointArea {
	background:url(../images/top/bg_point_sp.jpg) no-repeat center center;
	background-size:cover;
	padding:0 0 3.5em;
}
.pointArea .ttl01 {
	font-size:7.5vw;
	padding:1em 0 0.3em;
	line-height:1.4;
}
.pointArea .txt {
	padding-bottom:1.3em;
}

/* .originalArea */
.originalArea {
	padding:2.2em 0 3.2em;
}
.originalArea .cont {
	width:100%;
	float:none;
}
.originalArea .cont .ttl01 {
	font-size:7.5vw;
	padding:0.8em 0 0.3em;
	line-height:1.3;
}
.originalArea .cont .txt {
	text-align:left;
	line-height:1.7;
	padding-bottom:1.8em;
}

/* .originalList */
.originalList {
	width:auto;
	float:none;
	margin:0 -1.4%;
}
.originalList li {
	padding:1.2% 1.4%;
}

/* .recruitArea */
.recruitArea {
	padding:0 0 3.6em;
}
.recruitArea .cont {
	width:100%;
	float:none;
	color:#fff;
	padding-bottom:1.5em;
}
.recruitArea .cont .ttl01 {
	font-size:7.5vw;
	padding:0.8em 0 0.2em;
	line-height:1.4;
}
.recruitArea .cont .txt {
	text-align:left;
	line-height:2;
	padding-bottom:2.4em;
}
.recruitArea .photo01 {
	width:100%;
	float:none;
}

/* .infoArea */
.infoArea {
	background:#f1f1f1;
	padding:2em 0 3em;
}
.infoArea .img {
	width:100%;
	float:none;
	padding:0.6em 0 1.7em;
}
.infoArea .infoSet {
	width:100%;
	float:none;
}
.infoArea .infoSet .ttl01 {
	font-size:5.3vw;
}
.infoArea .infoSet .ttl01 span {
	padding:0 9%;
}
.infoArea .infoList {
	padding:1em 0 3.5em;
}
.infoArea .infoList li {
	line-height:1.75;
}
.infoArea .infoList li .dates {
	width:23%;
}
.infoArea .infoList li p {
	width:77%;
}
.infoArea .infoSet .btn a {
	width:69%;
	padding:0.85em 0;
}
}