body {
	font-weight: 350; }
	@media only screen and (min-width: 1201px) {
		body {
			overflow-x: hidden; } }
	@media only screen and (max-width: 750px) {
		body {
			overflow: hidden; } }
	body .josefin {
		font-weight: bold; }

.loading {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	z-index: 101; }
	.loading .spinner {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%); }
		.loading .spinner .double-bounce1, .loading .spinner .double-bounce2 {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #009FFF;
			opacity: 0.6;
			position: absolute;
			top: 0;
			left: 0;
			-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
			animation: sk-bounce 2.0s infinite ease-in-out; }
		.loading .spinner .double-bounce2 {
			-webkit-animation-delay: -1.0s;
			animation-delay: -1.0s; }

@-webkit-keyframes sk-bounce {
	0%, 100% {
		-webkit-transform: scale(0); }
	50% {
		-webkit-transform: scale(1); } }

@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0);
		-webkit-transform: scale(0); }
	50% {
		transform: scale(1);
		-webkit-transform: scale(1); } }

#recruit-header {
	width: 100%;
	height: 86px;
	position: fixed;
	z-index: 100;
	top: 27px; }
	@media only screen and (max-width: 750px) {
		#recruit-header {
			width: 100%;
			top: 0px;
			height: 70px;
			transition: background-color .4s; } }
	@media only screen and (max-width: 750px) {
		#recruit-header .tpl-inner-wrap {
			width: 92%;
			margin-left: auto;
			margin-right: auto; } }
	#recruit-header .logo {
		margin-left: 40px; }
		@media only screen and (max-width: 750px) {
			#recruit-header .logo {
				margin-left: 0; } }
		#recruit-header .logo .logo-img {
			background: url(../img/logo_white.png) left top no-repeat;
			background-size: 210px 37px; }
			@media only screen and (max-width: 750px) {
				#recruit-header .logo .logo-img {
					background-size: 160px 28px; } }
	#recruit-header .menu {
		margin-right: 34px; }
		@media only screen and (max-width: 750px) {
			#recruit-header .menu {
				margin-right: 0; } }
		#recruit-header .menu a {
			transition: all .4s; }
			#recruit-header .menu a:hover {
				opacity: 0.5; }
	#recruit-header.scroll {
		top: 0; }
		@media only screen and (min-width: 751px) {
			#recruit-header.scroll {
				transition: top .6s, background-color .4s .4s; } }
	@media only screen and (min-width: 751px) {
		#recruit-header:not(.scroll) {
			transition: background-color .4s, top .6s .3s; } }

#recruit-hero {
	width: 100%;
	height: 100vh;
	min-width: 1200px;
	position: fixed;
	z-index: 0; }
	@media only screen and (max-width: 750px) {
		#recruit-hero {
			min-width: 0; } }
	#recruit-hero .hero-slide {
		width: 100%;
		height: 100vh;
		background-position: center center !important;
		background-size: cover; }
		@media only screen and (max-width: 750px) {
			#recruit-hero .hero-slide {
				background-position: center center;
				min-width: 0; } }

#tpl-contents {
	position: relative; }
	#tpl-contents #hero-contents .title-wrap {
		min-width: 1200px;
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
		height: 100vh;
		position: relative; }
		@media only screen and (max-width: 750px) {
			#tpl-contents #hero-contents .title-wrap {
				width: 100%;
				min-width: 320px;
				max-width: 100%; } }
		#tpl-contents #hero-contents .title-wrap .scroll {
			font-size: 12px;
			font-size: 1.2rem;
			color: #fff;
			letter-spacing: 0.1em;
			/* flex */
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			transform: rotate(90deg);
			position: fixed;
			bottom: 70px;
			right: -24px;
			z-index: 0;
			transition: opacity .2s; }
			@media only screen and (min-width: 1601px) {
				#tpl-contents #hero-contents .title-wrap .scroll {
					right: calc(((100vw - 1600px) / 2) - 33px); } }
			@media only screen and (max-width: 750px) {
				#tpl-contents #hero-contents .title-wrap .scroll {
					display: none; } }
			#tpl-contents #hero-contents .title-wrap .scroll::after {
				content: "";
				display: inline-block;
				height: 1px;
				width: 80px;
				background-color: #fff;
				margin-top: -4px;
				margin-left: 20px; }
			#tpl-contents #hero-contents .title-wrap .scroll.hide {
				opacity: 0; }
		#tpl-contents #hero-contents .title-wrap .inner {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			text-align: center; }
			@media only screen and (max-width: 750px) {
				#tpl-contents #hero-contents .title-wrap .inner {
					width: 78.67%; } }
			@media only screen and (max-width: 750px) {
				#tpl-contents #hero-contents .title-wrap .inner h1 img {
					width: 100%; } }
			#tpl-contents #hero-contents .title-wrap .inner .play {
				margin-top: 70px;
				width: 277px;
				height: 47px;
				margin-left: auto;
				margin-right: auto; }
				@media only screen and (max-width: 750px) {
					#tpl-contents #hero-contents .title-wrap .inner .play {
						width: 66.44%;
						margin-left: auto;
						margin-right: auto;
						margin-top: 50px;
						position: absolute;
						left: 50%;
						-webkit-transform: translateX(-50%);
						-ms-transform: translateX(-50%);
						transform: translateX(-50%); }
						#tpl-contents #hero-contents .title-wrap .inner .play img {
							width: 100%; } }
				#tpl-contents #hero-contents .title-wrap .inner .play a {
					display: block;
					width: 277px;
					height: 47px;
					background: url(../img/btn_play.png) left top no-repeat;
					background-size: 277px auto;
					transition: all .4s; }
					@media only screen and (max-width: 750px) {
						#tpl-contents #hero-contents .title-wrap .inner .play a {
							width: 100%;
							height: 100%;
							background-size: 100% auto; } }
					@media only screen and (min-width: 751px) {
						#tpl-contents #hero-contents .title-wrap .inner .play a:hover {
							background: url(../img/btn_play_on.png) left top no-repeat; } }
	#tpl-contents #hero-contents .slogan {
		margin-bottom: 70px;
		position: relative; }
		#tpl-contents #hero-contents .slogan .inner {
			width: 1200px;
			height: 814px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			position: relative; }
			@media only screen and (max-width: 750px) {
				#tpl-contents #hero-contents .slogan .inner {
					width: 100%;
					min-width: 320px;
					height: 0;
					padding-bottom: 145%; } }
			#tpl-contents #hero-contents .slogan .inner .txt-slogan {
				width: 646px;
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%); }
				@media only screen and (max-width: 750px) {
					#tpl-contents #hero-contents .slogan .inner .txt-slogan {
						width: 88%;
						margin-left: auto;
						margin-right: auto; } }
				#tpl-contents #hero-contents .slogan .inner .txt-slogan img {
					width: 100%;
					height: auto;
					backface-visibility: hidden;
					-webkit-backface-visibility: hidden; }
				#tpl-contents #hero-contents .slogan .inner .txt-slogan .lead {
					width: 646px;
					opacity: 1;
					transition: all .2s .6s;
					transform: translate(0px, 0px); }
					@media only screen and (max-width: 750px) {
						#tpl-contents #hero-contents .slogan .inner .txt-slogan .lead {
							width: 100%; } }
					#tpl-contents #hero-contents .slogan .inner .txt-slogan .lead.set {
						transform: translate(-40px, 10px);
						opacity: 0; }
				#tpl-contents #hero-contents .slogan .inner .txt-slogan h2 {
					text-align: right;
					transition: all .2s .8s;
					transform: translate(0px, 0px); }
					#tpl-contents #hero-contents .slogan .inner .txt-slogan h2 img {
						width: 303px; }
						@media only screen and (max-width: 750px) {
							#tpl-contents #hero-contents .slogan .inner .txt-slogan h2 img {
								width: 62.17%; } }
					#tpl-contents #hero-contents .slogan .inner .txt-slogan h2.set {
						transform: translate(-40px, 10px);
						opacity: 0; }
			#tpl-contents #hero-contents .slogan .inner .paint01 {
				position: absolute;
				top: 70px;
				right: 60px;
				opacity: 0;
				transform: scale(0.8, 0.8);
				transition: opacity .2s;
				transition: transform .2s; }
				#tpl-contents #hero-contents .slogan .inner .paint01.ani-start {
					opacity: 1;
					transform: scale(1, 1); }
				@media only screen and (max-width: 750px) {
					#tpl-contents #hero-contents .slogan .inner .paint01 {
						width: 140%;
						right: -30%;
						top: 30px; }
						#tpl-contents #hero-contents .slogan .inner .paint01 img {
							width: 100%;
							height: auto; } }
			#tpl-contents #hero-contents .slogan .inner #svg-animation {
				width: 757px;
				position: absolute;
				left: 70px;
				top: 0px; }
				@media only screen and (max-width: 750px) {
					#tpl-contents #hero-contents .slogan .inner #svg-animation {
						width: 140%;
						left: -30%; } }
				#tpl-contents #hero-contents .slogan .inner #svg-animation.ani-start {
					opacity: 1; }
				#tpl-contents #hero-contents .slogan .inner #svg-animation .st0 {
					fill: none;
					stroke: #FFFFFF;
					stroke-width: 180;
					stroke-linecap: round;
					stroke-linejoin: round;
					stroke-miterlimit: 10; }

#engineer {
	background-color: #fff; }
	#engineer .inner-line {
		padding: 200px 0; }
		@media only screen and (max-width: 750px) {
			#engineer .inner-line {
				padding: 100px 0; } }
	#engineer .contents-inner {
		position: relative;
		width: 100%;
		height: 100%; }
	#engineer .coating01 {
		top: 50px;
		right: -50px; }
		@media only screen and (max-width: 750px) {
			#engineer .coating01 {
				z-index: -1;
				width: 60%;
				top: 30%; }
				#engineer .coating01 img {
					width: 100%;
					height: auto; } }
	#engineer .ph {
		width: 66.67%;
		height: 400px;
		position: relative; }
		@media only screen and (max-width: 750px) {
			#engineer .ph {
				width: 54%;
				height: 350px;
				margin-left: -4%; } }
		#engineer .ph::before {
			content: "";
			width: 0;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #009FFF;
			transition: width .6s; }
		#engineer .ph.ani-start::before {
			width: 100%; }
		#engineer .ph.ani-start.ani-end {
			background: url(../img/ph_engblog.jpg) center center no-repeat;
			background-size: cover; }
			#engineer .ph.ani-start.ani-end::before {
				left: auto;
				right: 0;
				width: 0; }
	#engineer .text {
		position: absolute;
		right: 0;
		top: 80px;
		width: 36.67%; }
		@media only screen and (max-width: 750px) {
			#engineer .text {
				width: 50%; } }
		#engineer .text .title-wrap {
			padding-left: 120px;
			margin-bottom: 50px; }
			@media only screen and (max-width: 750px) {
				#engineer .text .title-wrap {
					padding-left: 30px; }
					#engineer .text .title-wrap h2 img {
						width: 105px; } }
		#engineer .text .title {
			font-size: 16px;
			font-size: 1.6rem;
			color: #646464;
			margin-top: 20px; }
			@media only screen and (max-width: 750px) {
				#engineer .text .title {
					font-size: 14px;
					font-size: 1.4rem;
					margin-top: 15px; } }
		#engineer .text .more {
			width: 100%;
			height: 70px; }
			@media only screen and (max-width: 750px) {
				#engineer .text .more {
					height: 45px;
					margin-left: -25%;
					width: 125%; } }
			#engineer .text .more a {
				/* flex */
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 70px;
				background-color: #009FFF;
				color: #fff;
				font-size: 15px;
				font-size: 1.5rem;
				font-weight: 400;
				letter-spacing: 0.1em;
				text-decoration: none;
				position: relative;
				border: 1px solid #009FFF; }
				@media only screen and (max-width: 750px) {
					#engineer .text .more a {
						height: 45px;
						font-size: 12px;
						font-size: 1.2rem;
						font-weight: 400; } }
				@media only screen and (min-width: 751px) {
					#engineer .text .more a:before {
						transition: width .4s;
						content: "";
						width: 0;
						height: 100%;
						background-color: #fff;
						position: absolute;
						top: 0;
						left: 0; } }
				#engineer .text .more a span {
					position: relative;
					transition: all .4s; }
					#engineer .text .more a span::before {
						content: "";
						display: inline-block;
						width: 40px;
						height: 1px;
						background-color: #fff;
						vertical-align: middle;
						margin-top: -6px;
						margin-right: 20px;
						transition: all .4s; }
						@media only screen and (max-width: 750px) {
							#engineer .text .more a span::before {
								width: 30px;
								margin-right: 15px; } }
				@media only screen and (min-width: 751px) {
					#engineer .text .more a:hover {
						border: 1px solid #009FFF; }
						#engineer .text .more a:hover:before {
							width: 100%; }
						#engineer .text .more a:hover span {
							color: #009FFF; }
							#engineer .text .more a:hover span::before {
								background-color: #009FFF; } }

#room {
	background-color: #E1F4FF; }
	#room .tpl-inner-wrap {
		background: url(../img/img_room_coating.png) center 140px no-repeat;
		background-size: 100%; }
		@media only screen and (max-width: 750px) {
			#room .tpl-inner-wrap {
				background: url(../img/img_room_coating_sp.png) center 140px no-repeat;
				background-size: 100% auto; } }
	@media only screen and (max-width: 750px) {
		#room .inner-line {
			padding: 70px 0 30px; } }
	#room .contents-inner {
		position: relative;
		color: #646464;
		height: 0px;
		padding-bottom: 123%;
		min-height: 1370px;
		max-height: 1600px;
		box-sizing: border-box; }
		@media only screen and (max-width: 750px) {
			#room .contents-inner {
				height: auto;
				min-height: auto;
				max-height: 100%;
				padding-bottom: 0; } }
	#room .title-wrap {
		position: absolute;
		top: 110px;
		left: 78px; }
		@media only screen and (max-width: 750px) {
			#room .title-wrap {
				position: static;
				margin-left: 5.22%; } }
		#room .title-wrap h2 {
			margin-bottom: 20px; }
			@media only screen and (max-width: 750px) {
				#room .title-wrap h2 {
					width: 73.34%; }
					#room .title-wrap h2 img {
						width: 100%;
						height: auto; } }
		#room .title-wrap p {
			line-height: 28px;
			font-size: 15px;
			font-size: 1.5rem; }
			@media only screen and (max-width: 750px) {
				#room .title-wrap p {
					font-size: 14px;
					font-size: 1.4rem;
					line-height: 1.5;
					margin-bottom: 45px; } }
	#room .card-wrap {
		width: 50%;
		height: 0;
		position: absolute; }
		@media only screen and (max-width: 750px) {
			#room .card-wrap {
				position: static;
				width: 100%;
				height: auto; } }
		#room .card-wrap .ph {
			overflow: hidden;
			height: 0;
			position: absolute; }
			@media only screen and (max-width: 750px) {
				#room .card-wrap .ph {
					position: relative; } }
			#room .card-wrap .ph::before {
				content: "";
				width: 0;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #009FFF;
				transition: width .6s; }
			#room .card-wrap .ph.ani-start::before {
				width: 100%; }
			#room .card-wrap .ph.ani-start.ani-end::before {
				left: auto;
				right: 0;
				width: 0; }
		#room .card-wrap .card {
			display: block;
			background-color: #fff;
			width: 70%;
			padding-bottom: 25%;
			position: absolute;
			box-shadow: 14px 14px 30px 0px rgba(0, 0, 0, 0.15);
			/* flex */
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 40px 30px;
			text-decoration: none;
			color: #646464; }
			@media only screen and (max-width: 750px) {
				#room .card-wrap .card {
					display: inline-flex;
					position: relative;
					padding: 20px;
					width: auto; } }
			@media only screen and (min-width: 751px) {
				#room .card-wrap .card:before {
					transition: width .4s;
					content: "";
					width: 0;
					height: 100%;
					background-color: #009FFF;
					position: absolute;
					top: 0;
					left: 0; } }
			#room .card-wrap .card dl {
				letter-spacing: 0.08em;
				position: relative;
				transition: all .4s; }
				@media only screen and (max-width: 750px) {
					#room .card-wrap .card dl {
						white-space: normal; } }
				#room .card-wrap .card dl dt {
					font-size: 20px;
					font-size: 2rem;
					margin-bottom: 15px;
					font-weight: 400; }
					@media only screen and (max-width: 750px) {
						#room .card-wrap .card dl dt {
							font-size: 14px;
							font-size: 1.4rem; } }
				#room .card-wrap .card dl dd {
					font-size: 15px;
					font-size: 1.5rem; }
					@media only screen and (max-width: 750px) {
						#room .card-wrap .card dl dd {
							font-size: 12px;
							font-size: 1.2rem; } }
			#room .card-wrap .card .more {
				display: inline-block;
				font-size: 14px;
				font-size: 1.4rem;
				position: absolute;
				bottom: 45px;
				right: -85px;
				color: #009FFF;
				letter-spacing: 0.12em;
				font-weight: 400; }
				@media only screen and (max-width: 750px) {
					#room .card-wrap .card .more {
						font-size: 12px;
						font-size: 1.2rem;
						right: -66px;
						bottom: 20px; } }
				#room .card-wrap .card .more::before {
					content: "";
					display: inline-block;
					width: 40px;
					height: 1px;
					background-color: #009FFF;
					vertical-align: middle;
					margin-top: -3px;
					margin-right: 14px;
					transition: background .4s; }
					@media only screen and (max-width: 750px) {
						#room .card-wrap .card .more::before {
							width: 25px;
							margin-right: 10px; } }
			@media only screen and (min-width: 751px) {
				#room .card-wrap .card:hover:before {
					width: 100%; }
				#room .card-wrap .card:hover dl {
					color: #fff; }
				#room .card-wrap .card:hover .more::before {
					background: linear-gradient(90deg, #fff 0%, #fff 50%, #009FFF 50%, #009FFF 100%); } }
	#room .room1 {
		top: -4.5%;
		right: 0;
		padding-bottom: 26.67%; }
		@media only screen and (max-width: 750px) {
			#room .room1 {
				top: auto;
				right: auto;
				padding-bottom: 0;
				margin-bottom: 30px; } }
		#room .room1 .ph {
			width: 80%;
			padding-top: 53.33%;
			right: 0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box; }
			@media only screen and (max-width: 750px) {
				#room .room1 .ph {
					width: 83.48%;
					float: right;
					padding-top: 55.65%; } }
			#room .room1 .ph.ani-start.ani-end {
				background: url(../img/ph_room01.jpg) center center no-repeat;
				background-size: 100% auto; }
		#room .room1 .card {
			top: 84.38%;
			left: 0; }
			@media only screen and (max-width: 750px) {
				#room .room1 .card {
					width: 73.04%;
					top: -30px;
					left: auto; } }
	#room .room2 {
		top: 26%;
		left: 0;
		padding-bottom: 32.5%; }
		@media only screen and (max-width: 750px) {
			#room .room2 {
				top: auto;
				left: auto;
				padding-bottom: 0;
				margin-bottom: 35px; } }
		#room .room2 .ph {
			width: 65%;
			padding-bottom: 65%;
			left: 0; }
			@media only screen and (max-width: 750px) {
				#room .room2 .ph {
					width: 67.68%;
					padding-bottom: 69.42%;
					left: auto;
					margin-left: 21.74%; } }
			#room .room2 .ph.ani-start.ani-end {
				background: url(../img/ph_room02.jpg) center center no-repeat;
				background-size: 100% auto; }
		#room .room2 .card {
			top: 85%;
			left: 10.83%; }
			@media only screen and (max-width: 750px) {
				#room .room2 .card {
					top: -40px;
					left: auto;
					width: 73.04%;
					margin-left: 7%; } }
	#room .room3 {
		top: 29%;
		right: 0;
		padding-bottom: 19.17%; }
		@media only screen and (max-width: 750px) {
			#room .room3 {
				top: auto;
				right: auto;
				padding-bottom: 0;
				margin-bottom: 30px; } }
		#room .room3 .ph {
			width: 100%;
			padding-bottom: 38.33%;
			left: 0; }
			@media only screen and (max-width: 750px) {
				#room .room3 .ph {
					padding-bottom: 43.48%;
					left: auto; } }
			#room .room3 .ph.ani-start.ani-end {
				background: url(../img/ph_room03.jpg) center center no-repeat;
				background-size: 100% auto; }
		#room .room3 .card {
			top: 85%;
			left: 14.67%; }
			@media only screen and (max-width: 750px) {
				#room .room3 .card {
					width: 73.04%;
					top: -30px;
					left: auto; } }
	#room .room4 {
		top: 66%;
		left: 0;
		padding-bottom: 26.67%; }
		@media only screen and (max-width: 750px) {
			#room .room4 {
				top: auto;
				left: auto;
				padding-bottom: 0;
				margin-bottom: 30px; } }
		#room .room4 .ph {
			width: 80%;
			padding-bottom: 53.33%;
			left: 20%; }
			@media only screen and (max-width: 750px) {
				#room .room4 .ph {
					left: auto;
					width: 83.48%;
					padding-bottom: 55.65%;
					float: right; } }
			#room .room4 .ph.ani-start.ani-end {
				background: url(../img/ph_room04.jpg) center center no-repeat;
				background-size: 100% auto; }
		#room .room4 .card {
			top: 85%;
			left: 0; }
			@media only screen and (max-width: 750px) {
				#room .room4 .card {
					top: -30px;
					left: auto;
					width: 73.04%;
					margin-left: 9.86%; } }
	#room .room5 {
		top: 58%;
		right: 0;
		padding-bottom: 33.33%; }
		@media only screen and (max-width: 750px) {
			#room .room5 {
				top: auto;
				right: auto;
				padding-bottom: 0; } }
		#room .room5 .ph {
			width: 65%;
			padding-bottom: 66.67%;
			right: 0; }
			@media only screen and (max-width: 750px) {
				#room .room5 .ph {
					right: auto;
					width: 67.68%;
					padding-bottom: 69.42%;
					margin-left: 21.45%; } }
			#room .room5 .ph.ani-start.ani-end {
				background: url(../img/ph_room05.jpg) center center no-repeat;
				background-size: 100% auto; }
		#room .room5 .card {
			top: 85%;
			left: 10%; }
			@media only screen and (max-width: 750px) {
				#room .room5 .card {
					top: -40px;
					left: auto;
					width: 73.04%; } }

#contents-menu {
	background-color: #fff;
	background: url(../img/img_menu_coating.png) center 75px no-repeat #fff;
	background-size: 100% auto; }
	@media only screen and (max-width: 750px) {
		#contents-menu {
			background: url(../img/img_menu_coating_sp.png) center -200px no-repeat #fff;
			background-size: 100% auto; } }
	#contents-menu .inner-line {
		padding: 140px 0 60px; }
		@media only screen and (max-width: 750px) {
			#contents-menu .inner-line {
				padding-bottom: 100px 0 30px; } }
	#contents-menu .contents-list {
		/* flex */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch; }
		@media only screen and (max-width: 750px) {
			#contents-menu .contents-list {
				flex-direction: column;
				flex-wrap: wrap;
				position: relative;
				z-index: 1; } }
		#contents-menu .contents-list li {
			width: 50%; }
			@media only screen and (max-width: 750px) {
				#contents-menu .contents-list li {
					width: 100%; }
					#contents-menu .contents-list li:last-child {
						margin-top: 65px; } }
			#contents-menu .contents-list li .ph {
				width: 100%;
				height: 0;
				padding-bottom: 91.67%;
				position: relative; }
				@media only screen and (max-width: 750px) {
					#contents-menu .contents-list li .ph {
						padding-bottom: 79.71%; } }
				#contents-menu .contents-list li .ph::before {
					content: "";
					width: 0;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: #009FFF;
					transition: width .6s; }
				#contents-menu .contents-list li .ph.ani-start::before {
					width: 100%; }
				#contents-menu .contents-list li .ph.ani-start.ani-end::before {
					left: auto;
					right: 0;
					width: 0; }
			#contents-menu .contents-list li.env .ph.ani-start.ani-end {
				background: url(../img/ph_menu01.jpg) center center no-repeat;
				background-size: cover; }
			#contents-menu .contents-list li.bp .ph.ani-start.ani-end {
				background: url(../img/ph_menu02.jpg) center center no-repeat;
				background-size: cover; }
            #contents-menu .contents-list li.tsuika .ph.ani-start.ani-end {
				background: url(../img/ph_menu03.jpg) center center no-repeat;
				background-size: cover; }
			#contents-menu .contents-list li dl {
				width: 73.33%;
				margin-left: auto;
				margin-right: auto;
				background-color: #fff;
				padding: 50px;
				position: relative;
				margin-top: -80px;
				color: #646464; }
				@media only screen and (max-width: 750px) {
					#contents-menu .contents-list li dl {
						width: 82.61%;
						padding: 35px 20px 0px 20px; } }
				#contents-menu .contents-list li dl dt {
					text-align: center; }
					#contents-menu .contents-list li dl dt span {
						display: block;
						text-align: center;
						font-size: 16px;
						font-size: 1.6rem;
						letter-spacing: 0.04em;
						margin-top: 5px; }
						@media only screen and (max-width: 750px) {
							#contents-menu .contents-list li dl dt span {
								font-size: 14px;
								font-size: 1.4rem;
								margin-top: 10px; } }
				#contents-menu .contents-list li dl dd {
					font-size: 15px;
					font-size: 1.5rem;
					text-align: center;
					margin-top: 30px;
					letter-spacing: 0.06em; }
					@media only screen and (max-width: 750px) {
						#contents-menu .contents-list li dl dd {
							margin-top: 20px;
							font-size: 12px;
							font-size: 1.2rem; } }
					#contents-menu .contents-list li dl dd.btn-more {
						width: 63.64%;
						height: 70px;
						margin-left: auto;
						margin-right: auto; }
						@media only screen and (max-width: 750px) {
							#contents-menu .contents-list li dl dd.btn-more {
								width: 63.16%;
								height: 45px; } }
						#contents-menu .contents-list li dl dd.btn-more a {
							/* flex */
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 70px;
							background-color: #009FFF;
							color: #fff;
							font-size: 15px;
							font-size: 1.5rem;
							letter-spacing: 0.1em;
							text-decoration: none;
							font-weight: 400;
							position: relative;
							border: 1px solid #009FFF; }
							@media only screen and (max-width: 750px) {
								#contents-menu .contents-list li dl dd.btn-more a {
									height: 45px;
									font-size: 13px;
									font-size: 1.3rem; } }
							@media only screen and (min-width: 751px) {
								#contents-menu .contents-list li dl dd.btn-more a:before {
									transition: width .4s;
									content: "";
									width: 0;
									height: 100%;
									background-color: #fff;
									position: absolute;
									top: 0;
									left: 0; } }
							#contents-menu .contents-list li dl dd.btn-more a span {
								position: relative;
								transition: all .4s; }
								#contents-menu .contents-list li dl dd.btn-more a span::before {
									content: "";
									display: inline-block;
									width: 40px;
									height: 1px;
									background-color: #fff;
									vertical-align: middle;
									margin-top: -3px;
									margin-right: 20px;
									transition: all .4s; }
									@media only screen and (max-width: 750px) {
										#contents-menu .contents-list li dl dd.btn-more a span::before {
											width: 30px;
											margin-top: -4px;
											margin-right: 18px; } }
							@media only screen and (min-width: 751px) {
								#contents-menu .contents-list li dl dd.btn-more a:hover {
									border: 1px solid #009FFF; }
									#contents-menu .contents-list li dl dd.btn-more a:hover:before {
										width: 100%; }
									#contents-menu .contents-list li dl dd.btn-more a:hover span {
										color: #009FFF; }
										#contents-menu .contents-list li dl dd.btn-more a:hover span::before {
											background-color: #009FFF; } }
			@media only screen and (max-width: 750px) {
				#contents-menu .contents-list li.env dt img {
					width: 77.17%; } }
			@media only screen and (max-width: 750px) {
				#contents-menu .contents-list li.bp dt img {
					width: 81.13%; } }

#openings {
	background: url(../img/bg_openings.jpg) center center no-repeat;
	background-size: cover;
	padding: 110px 0;
	position: relative; }
	@media only screen and (max-width: 750px) {
		#openings {
			padding: 80px 0; } }
	#openings h2 {
		text-align: center; }
		@media only screen and (max-width: 750px) {
			#openings h2 {
				width: 70.67%;
				margin-left: auto;
				margin-right: auto; }
				#openings h2 img {
					width: 100%;
					height: auto; } }
		#openings h2 span {
			display: block;
			color: #fff;
			font-size: 16px;
			font-size: 1.6rem;
			margin-top: 10px;
			letter-spacing: 0.08em; }
			@media only screen and (max-width: 750px) {
				#openings h2 span {
					font-size: 15px;
					font-size: 1.5rem; } }
	#openings h3 {
		color: #fff;
		font-size: 20px;
		font-size: 2rem;
		text-align: center;
		margin-top: 50px; }
		@media only screen and (max-width: 750px) {
			#openings h3 {
				font-size: 17px;
				font-size: 1.7rem;
				line-height: 1.7;
				margin-top: 40px; } }
	#openings .lead {
		font-size: 15px;
		font-size: 1.5rem;
		color: #fff;
		margin-top: 45px;
		text-align: center;
		line-height: 30px; }
		@media only screen and (max-width: 750px) {
			#openings .lead {
				font-size: 12px;
				font-size: 1.2rem;
				line-height: 1.7; } }
	#openings .list {
		/* flex */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 60px; }
		@media only screen and (max-width: 750px) {
			#openings .list {
				width: 92%;
				margin-left: auto;
				margin-right: auto;
				flex-direction: column; } }
		#openings .list li {
			width: 50%;
			position: relative;
			transition: all .4s; }
			@media only screen and (max-width: 750px) {
				#openings .list li {
					width: 100%;
					background-color: #fff;
					border-bottom: 1px solid #e1e1e1; } }
			#openings .list li a:not(.blog) {
				/* flex */
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: #fff;
				height: 85px;
				font-size: 18px;
				font-size: 1.8rem;
				color: #646464;
				padding-left: 30px;
				text-decoration: none;
				border-bottom: 1px solid #e1e1e1;
				transition: all .4s; }
				@media only screen and (max-width: 750px) {
					#openings .list li a:not(.blog) {
						font-size: 14px;
						font-size: 1.4rem;
						height: auto;
						padding: 20px;
						border-bottom: none; } }
				#openings .list li a:not(.blog) span::before {
					content: "";
					display: inline-block;
					width: 30px;
					height: 1px;
					background-color: #009FFF;
					vertical-align: middle;
					margin-top: -3px;
					margin-right: 20px; }
					@media only screen and (max-width: 750px) {
						#openings .list li a:not(.blog) span::before {
							width: 20px;
							margin-right: 15px; } }
				@media only screen and (min-width: 751px) {
					#openings .list li a:not(.blog):hover {
						background-color: #009FFF;
						border-bottom: 1px solid #009FFF;
						color: #fff; }
						#openings .list li a:not(.blog):hover span::before {
							background-color: #fff; } }
			#openings .list li:nth-child(odd) a:not(.blog) {
				border-right: 1px solid #e1e1e1; }
				@media only screen and (max-width: 750px) {
					#openings .list li:nth-child(odd) a:not(.blog) {
						border-right: none; } }
				@media only screen and (min-width: 751px) {
					#openings .list li:nth-child(odd) a:not(.blog):hover {
						border-right: 1px solid #009FFF; } }
			#openings .list li a.blog {
				position: absolute;
				top: 50%;
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);
				display: inline-block;
				padding: 10px 30px;
				text-align: center;
				right: 20px;
				font-size: 15px;
				font-size: 1.5rem;
				color: #646464;
				background-color: #fdecdb;
				text-decoration: none;
				transition: all .4s; }
				@media only screen and (max-width: 750px) {
					#openings .list li a.blog {
						font-size: 12px;
						font-size: 1.2rem;
						position: relative;
						transform: none;
						top: auto;
						right: auto;
						margin-left: 18.84%;
						width: calc(100% - 18.84% - 20px);
						text-align: left;
						padding: 15px 20px 15px 40px;
						margin-bottom: 20px; } }
				#openings .list li a.blog::before {
					content: "";
					width: 20px;
					height: 1px;
					background-color: #009FFF;
					position: absolute;
					top: 50%;
					-webkit-transform: translateY(-50%);
					-ms-transform: translateY(-50%);
					transform: translateY(-50%);
					left: -10px; }
				@media only screen and (min-width: 751px) {
					#openings .list li a.blog:hover {
						background-color: #009FFF;
						color: #fff; }
						#openings .list li a.blog:hover::before {
							background: linear-gradient(90deg, #009FFF 0%, #009FFF 50%, #fff 50%, #fff 100%); } }