@charset "UTF-8";/* Showcase */@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');p .zkgn {  font-family: 'Zen Kaku Gothic New', sans-serif!important;}.showcase-wrap {	padding: 80px 0;}.showcase-menu {  display: flex;  flex-wrap: wrap;  justify-content: center;  max-width: 800px;  margin: 0 auto 60px;}.showcase-menu li {  position: relative;  width: 25%;  margin: 0 2.5%;  height: 46px;  border-bottom: solid 2px #22304F;}.showcase-menu li:before {	content: "";	position: absolute;	width: 50px;	height: 3px;	background: url("../img/arrow-long.svg") no-repeat right center;	background-size: cover;	top: calc(50% - 2px);	right: 15px;}.showcase-menu li p {	padding: 0 10px;	color: #22304F;	font-size: 14px;	line-height: 46px;	font-weight: 500;	transition: all .5s;	display: inline-block;	position: relative;}.showcase-menu li:hover p, .showcase-menu li.on p {	color: #3A82F3;}.showcase-block {	width: 90%;	margin: 0 auto 50px;	max-width: 900px;	border: 1px solid #A0A0A0;}.showcase-block .image-box {	width: 100%;	background-repeat: no-repeat;	background-position: center center;	background-size: cover;}.showcase-block .text-box {	width: 100%;	display: flex;	flex-wrap: wrap;	position: relative;}.showcase-block .text-box .box01 {	width: 60%;	box-sizing: border-box;	padding: 30px;}.showcase-block .text-box .box02 {	width: 40%;	box-sizing: border-box;	padding: 30px 20px 100px;	position: relative;}.showcase-block .text-box .box01 .p01 {	color: #22304F;	font-size: 18px;}.showcase-block .text-box .box01 .p02 {	color: #3A82F3;	font-size: 14px;}.showcase-block .text-box .box02 .p01 {	padding-left: 15px;	border-left: solid 1px #3A82F3;}.showcase-block .text-box .box02 .btn01 {	right: 30px;	position: absolute;}.case .h1sub {	text-align: center;	color: #3A82F3;	padding: 30px 0;}.showcase-main {	width: 96%;	margin: 0 auto 50px;	border-bottom: 10px solid #3A82F3;}.showcase01 .showcase-logo {	width: 280px;	margin: 0 auto 20px;}.showcase02 .showcase-logo {	width: 420px;	margin: 0 auto 20px;}.case .intro {	text-align: center;	color: #22304F;	font-size: 16px;	font-weight: 500;	margin-bottom: 60px;}/* CMS用追加・変更箇所 ここから*/.case h2 {	margin: 40px 0 80px;	position: relative;	padding-left: 2%;  font-weight: 500;  font-size: 30px;  letter-spacing: 0.08em;  line-height: 35px;  color: #22304f;	display: inline-block;}.case h2:before {	content: "";	position: absolute;	top: -30px;	left: 0;	width: 0;	height: 1px;	background: #3a82f3;	transition: all .8s;	transition-delay: .2s;}.case h2.eon:before {	width: 180px;}.case .block01, .case .block02, .case .block03, .case .block04, .case .block05, .case .block06, .case .block07 {  margin: 80px auto;}.case .movie-box {  width: 80%;  max-width: 650px;  margin: 0 auto;}.case .movie-box .text-box {  margin-top: 30px;}.youtube2 {  position: relative;	width: 650px;	height: 367px;	margin: 0 auto;}.youtube2 iframe {  position: absolute;  top: 0;  right: 0;  width: 100% !important;  height: 100% !important;}.download-btn {  width: 80%;  max-width: 650px;  height: 80px;  background: #4E83EB;  margin: 0 auto;  position: relative;  transition: all .5s;}.download-btn:hover {  background: #6F99EB;}.download-btn p {  text-align: center;  font-size: 16px;  color: #FFF;  line-height: 80px;  position: relative;}.download-btn:after {  content: "";  position: absolute;  width: 32px;  height: 42px;  background: url("../img/download-icon.svg") no-repeat center center;  background-size: contain;  left: calc(50% + 100px);  top: calc(50% - 21px);}.story-center-box img, .chapter-box img {	width: auto;	max-width: 650px; 	position: relative;	transform: translateX(-50%);	left: 50%;}.story-center-box {  width: 80%;  max-width: 650px;  margin: 0 auto;}.story-center-box .text-box {  margin: 30px auto;}.case .story-box {	width: 80%;	max-width: 880px;  margin: 0 auto;	display: flex;	flex-wrap: wrap;	justify-content: space-between;}.case .story-box .text-box {	width: 46%;	box-sizing: border-box;}.case .story-box .text-box p {	padding-bottom: 2em;	font-size: 14px;}.case .story-box .image-box {	width: 46%;	box-sizing: border-box;}.case .story-box.flip .image-box {	order: 1;}.case .story-box.flip .text-box {	order: 2;}.detail-box {	width: 80%;	max-width: 880px;	margin: 0 auto;	background: #F5F7F8;  box-sizing: border-box;	padding: 40px 30px 60px;}.chapter {	width: 80%;	max-width: 880px;	margin: 50px auto;	background: #F5F7F8;  box-sizing: border-box;	padding: 50px 50px 40px;}.chapter ul {  margin-left: 30px;}.chapter ul li a {  color: #4E83EB;  text-decoration: underline;  font-size: 16px;  line-height: 1.6em;}.chapter ul li {  margin-bottom: 10px;  position: relative;}.chapter ul li:before {  content: "";  position: absolute;  width: 12px;  height: 12px;  left: -25px;  top:8px;  background: #25304D;}.case .detail-box h3 {	font-size: 16px;	text-align: center;	position: relative;	padding: 0;	margin: 0 0 10px;	display: inherit;}.case .links-box {	width: 75%;	margin: 0 auto;	display: flex;	flex-wrap: wrap;	justify-content: space-between;}.case .links-box .image-box {	width: 55%;}.case .links-box .text-box {	width: 40%;	position: relative;	z-index: 2;}.case .story-box .text-box p, .case .story-center-box .text-box p {	padding-bottom: 2em;	font-size: 14px;}.case .links-box .text-box .p01 {	color: #22304F;	font-size: 16px;	padding: 40px 0 20px;}.case .links-box .text-box .btn01 {	margin: 0;}.basic .bottom-links03 {	width: 100%;	margin: 200px 0 0;	padding: 0 0 80px;	background: #F5F7F8;}.basic .bottom-links03 ul {	width: 90%;	max-width: 1000px;	margin: 50px auto;	display: flex;	flex-wrap: wrap;	justify-content: center;	position: relative;	top: -50px;}.basic .bottom-links03 ul li {	width: 31.33%;	margin: 0 1%;	position: relative;}.basic .bottom-links03 ul li .btn-img-cover {	width: 100%;	height: 100px;	position: relative;	overflow: hidden;	border-radius: 0;}.basic .bottom-links03 ul li .btn-img-cover .image-box {	transform: scale(1.3);	transition: all .5s;}.basic .bottom-links03 ul li:hover .btn-img-cover .image-box {	transform: scale(1.4);}.case .btn03 {	position: relative;	padding-bottom: 0px;}.case .btn03:before {	content: "";	position: absolute;	width: 50px;	height: 3px;	background: url("../img/arrow-long.svg") no-repeat right center;	background-size: cover;	bottom: 0;	right: 0px;}.case .btn03 .p01 {	font-size: 13px;	letter-spacing: 0;	padding: 10px 0 0;}.case .btn03 .p02 {	color: #3A82F3;	line-height: 1.6em;}/* CMS用追加・変更箇所 ここまで*/@media screen and (max-width: 1023px) {/* Showcase */.showcase-wrap {	padding: 40px 0;}.showcase-menu li {  position: relative;  width: 40%}.showcase-menu li:before {	content: "";	position: absolute;	width: 30px;	height: 3px;	background: url("../img/arrow-long.svg") no-repeat right center;	background-size: cover;	top: calc(50% - 2px);	right: 10px;}.showcase-block {	width: 90%;	margin: 0 auto 50px;	max-width: 900px;	border: 1px solid #A0A0A0;}.showcase-block .image-box {	width: 100%;	height: 130px;	background-repeat: no-repeat;	background-position: center center;	background-size: cover;}.showcase-block .image-box img {  object-fit: cover;  height: 130px;}.showcase-block .text-box {	width: 100%;	display: flex;	flex-wrap: wrap;	position: relative;}.showcase-block .text-box .box01 {	width: 100%;	box-sizing: border-box;	padding: 20px;}.showcase-block .text-box .box02 {	width: 100%;	box-sizing: border-box;	padding: 0 20px 100px;	position: relative;}.showcase-block .text-box .box01 .p01 {	color: #22304F;	font-size: 16px;}.showcase-block .text-box .box01 .p02 {	color: #3A82F3;	font-size: 13px;}.showcase-block .text-box .box02 .p01 {	padding-left: 15px;	border-left: solid 1px #3A82F3;}.showcase-block .text-box .box02 .btn01 {	right: 30px;	position: absolute;}.case .h1sub {	text-align: center;	color: #3A82F3;	padding: 20px 0;}.showcase-main {	width: 90%;	margin: 0 auto 30px;	border-bottom: 5px solid #3A82F3;}.showcase01 .showcase-logo {	width: 160px;	margin: 0 auto 20px;}.showcase02 .showcase-logo {	width: 300px;	margin: 0 auto 20px;}.case .intro {	text-align: center;	color: #22304F;	font-size: 15px;	font-weight: 500;	margin-bottom: 60px;  padding: 0 2vw;}/* CMS用追加・変更箇所 ここから*/.case h2 {	margin: 30px 0 30px;	position: relative;	padding-left: 5%;  font-weight: 500;  font-size: 18px;  letter-spacing: 0.08em;  line-height: 30px;  color: #22304f;	display: inline-block;}.case h2:before {	content: "";	position: absolute;	top: -20px;	left: 0;	width: 0;	height: 1px;	background: #3a82f3;	transition: all .8s;	transition-delay: .2s;}.case h2.eon:before {	width: 180px;}.case .block01, .case .block02, .case .block03, .case .block04, .case .block05, .case .block06, .case .block07 {  margin: 80px auto;}.case .movie-box {  width: 80%;  max-width: 650px;  margin: 0 auto;}.case .movie-box .text-box {  margin-top: 30px;}.case .movie-box .text-box p {	padding-bottom: 2em;	font-size: 14px;}.youtube2 {  position: relative;	width: 90%;	height: 1;	padding: 0 0 50.9%;	margin: 0 auto;}.youtube2 iframe {  position: absolute;  top: 0;  right: 0;  width: 100% !important;  height: 100% !important;}.download-btn {  width: 80%;  max-width: 650px;  height: 80px;  background: #4E83EB;  margin: 0 auto;  position: relative;  transition: all .5s;}.download-btn:hover {  background: #6F99EB;}.download-btn p {  text-align: center;  font-size: 16px;  color: #FFF;  line-height: 80px;  position: relative;}.download-btn:after {  content: "";  position: absolute;  width: 26px;  height: 30px;  background: url("../img/download-icon.svg") no-repeat center center;  background-size: contain;  left: calc(50% + 80px);  top: calc(50% - 15px);}.story-center-box {  width: 80%;  max-width: 650px;  margin: 0 auto;}	.story-center-box > .image-box img {		width: 100%;		height: auto;	}.story-center-box .text-box {  margin: 30px auto;}.story-center-box .text-box p {	padding-bottom: 2em;	font-size: 14px;}.case .story-box {	width: 80%;	max-width: 600px;	margin: 0px auto;	display: flex;	flex-wrap: wrap;	justify-content: space-between;}.case .story-box .text-box {	width: 100%;	box-sizing: border-box;}.case .story-box .text-box p {	padding-bottom: 2em;	font-size: 14px;}.case .story-box .image-box {	width: 100%;	max-width: 400px;	margin: 0 auto;	box-sizing: border-box;}	.case .story-box.flip .image-box {		margin-bottom: 20px;	}.detail-box {	width: 80%;	max-width: 900px;	margin: 0 auto;	background: #F5F7F8;	padding: 30px 30px 50px;}.chapter-box .image-box {  width: 80%;  margin: 0 auto;}.chapter {	width: 80%;	max-width: 880px;	margin: 30px auto;	background: #F5F7F8;  box-sizing: border-box;	padding: 30px 30px 20px;}.chapter ul {  margin-left: 20px;}.chapter ul li a {  color: #4E83EB;  text-decoration: underline;  font-size: 14px;  line-height: 1.6em;}.chapter ul li {  margin-bottom: 10px;  position: relative;}.chapter ul li:before {  content: "";  position: absolute;  width: 10px;  height: 10px;  left: -20px;  top:6px;  background: #25304D;}.case .detail-box h3 {	font-size: 16px;	text-align: center;	position: relative;	padding: 0;	margin: 0 0 10px;	display: inherit;}.case .links-box {	width: 75%;	margin: 0 auto;	display: flex;	flex-wrap: wrap;	justify-content: space-between;}.case .links-box .image-box {	width: 100%;}.case .links-box .text-box {	width: 100%;	position: relative;	z-index: 2;}.case .links-box .text-box .p01 {	color: #22304F;	font-size: 16px;	text-align: center;	padding: 20px 0 20px;}.case .links-box .text-box .btn01 {	margin: 0 auto;}.basic .bottom-links03 {	width: 100%;	margin: 150px 0 0;	padding: 0 0 80px;	background: #F5F7F8;}.basic .bottom-links03 ul {	width: 90%;	max-width: 1000px;	margin: 50px auto 20px;	display: flex;	flex-wrap: wrap;	justify-content: center;	position: relative;	top: -50px;}.basic .bottom-links03 ul li {	width: 280px;	margin: 0 10px 20px;	position: relative;}.basic .bottom-links03 ul li .btn-img-cover {	width: 100%;	height: 80px;	position: relative;	overflow: hidden;	border-radius: 0;}.basic .bottom-links03 ul li .btn-img-cover .image-box {	transform: scale(1.3);	transition: all .5s;}.basic .bottom-links03 ul li:hover .btn-img-cover .image-box {	transform: scale(1.4);}.case .btn03 {	position: relative;	padding-bottom: 0px;}.case .btn03:before {	content: "";	position: absolute;	width: 50px;	height: 3px;	background: url("../img/arrow-long.svg") no-repeat right center;	background-size: cover;	bottom: 0;	right: 0px;}.case .btn03 .p01 {	font-size: 12px;	letter-spacing: 0;	padding: 10px 0 0;}.case .btn03 .p02 {	color: #3A82F3;	line-height: 1.6em;}}@media screen and (max-width: 880px) {.article img {	width: 100%;	max-width: 100%;	position: relative;	transform: translateX(0);	left: auto;  margin: 0 auto;}}.showcase-wrap ul {	width: 90%;	max-width: 1200px;	margin: 0 auto 40px;	position: relative;	display: flex;	flex-wrap: wrap;	justify-content: space-between;}.showcase-wrap ul:last-of-type {	margin-bottom: 100px;}.showcase-wrap .list01 li {	opacity: 1;	position: relative;	transition: all 1s;}.showcase-wrap .list02 li {	opacity: 1;	position: relative;	transition: all 1s;}.showcase-wrap .list03 li {	opacity: 1;	position: relative;	transition: all 1s;}.showcase-wrap .list04 li {	opacity: 1;	position: relative;	transition: all 1s;}.showcase-wrap .list01.eon li,.showcase-wrap .list02.eon li,.showcase-wrap .list03.eon li,.showcase-wrap .list04.eon li{	opacity: 1;	transform: scale(1) translate(0, 0);}.showcase-wrap ul li.logo-komatsu {	width: 160px;	padding: 25px 0 0;}.showcase-wrap ul li.logo-bridgestone {	width: 210px;	padding: 15px 0 0;}.showcase-wrap ul li.logo-groovex {	width: 180px;	padding: 15px 0 0;}.showcase-wrap ul li.logo-jpx {	width: 70px;	padding: 0 0 0;}.showcase-wrap ul li.logo-tokyu {	width: 190px;	padding: 15px 0 0;}.showcase-wrap ul li.logo-staffservice {	width: 280px;	padding: 20px 0 0;}.showcase-wrap ul li.logo-onet {	width: 110px;	padding: 0 0 0;}.showcase-wrap ul li.logo-something {	width: 180px;	padding: 0 0 0;}.showcase-wrap ul li.logo-advantest {	width: 180px;	padding: 25px 0 0;}.showcase-wrap ul li.logo-duplo {	width: 110px;	padding: 10px 0 0;}.showcase-wrap ul li.logo-recruit {	width: 140px;	padding: -10px 0 0;}.showcase-wrap ul li.logo-ana {	width: 120px;	padding: 0px 0 0;}.showcase-wrap ul li.logo-yamato {	width: 150px;	padding: 20px 0 0;}.showcase-wrap ul li.logo-secom {	width: 140px;	padding: 10px 0 0;}.showcase-wrap ul li.logo-honda {	width: 120px;	padding: 0 0 0;}.showcase-wrap ul li.logo-jgc {	width: 200px;	padding: 30px 0 0;}@media screen and (max-width: 1023px) {	.showcase-wrap ul {		width: 90%;		max-width: 1200px;		margin: 0 auto 60px;		position: relative;		display: flex;		flex-wrap: wrap;		justify-content: space-between;	}	.showcase-wrap .list01 li {		opacity: 1;		position: relative;		transition: all 1s;	}	.showcase-wrap .list02 li {		opacity: 1;		position: relative;		transition: all 1s;	}	.showcase-wrap .list03 li {		opacity: 1;		position: relative;		transition: all 1s;	}	.showcase-wrap .list01.eon li,	.showcase-wrap .list02.eon li,	.showcase-wrap .list03.eon li{		opacity: 1;		transform: scale(1) translate(0, 0);	}	.showcase-wrap ul li.logo-komatsu {		width: 90px;		padding: 20px 0 0;	}	.showcase-wrap ul li.logo-bridgestone {		width: 120px;		padding: 12px 0 0;	}	.showcase-wrap ul li.logo-groovex {		width: 120px;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-jpx {		width: 40px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-tokyu {		width: 110px;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-staffservice {		width: 210px;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-onet {		width: 60px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-something {		width: 120px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-advantest {		width: 110px;		padding: 15px 0 0;	}	.showcase-wrap ul li.logo-duplo {		width: 80px;		padding: 5px 0 0;	}	.showcase-wrap ul li.logo-recruit {		width: 100px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-ana {		width: 90px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-yamato {		width: 130px;		padding: 15px 0 0;	}	.showcase-wrap ul li.logo-secom {		width: 110px;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-honda {		width: 100px;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-jgc {		width: 150px;		padding: 20px 0 0;	}}@media screen and (max-width: 500px) {	.showcase-wrap ul {		width: 90%;		max-width: 1200px;		margin: 0 auto 60px;		position: relative;		display: flex;		flex-wrap: wrap;		justify-content: space-between;	}	.showcase-wrap ul {		width: 90%;		max-width: 1200px;		margin: 0 auto 0;		position: relative;		display: flex;		flex-wrap: wrap;		justify-content: space-between;	}	.showcase-wrap .list01 li,	.showcase-wrap .list03 li{		opacity: 1;		position: relative;		transition: all 1s;		text-align: center;		margin-bottom: 20px;	}	.showcase-wrap .list02 li,	.showcase-wrap .list04 li{		opacity: 1;		position: relative;		transition: all 1s;		text-align: center;		margin-bottom: 20px;	}	.showcase-wrap .list01.eon li,	.showcase-wrap .list02.eon li,	.showcase-wrap .list03.eon li,	.showcase-wrap .list04.eon li{		opacity: 1;		transform: scale(1) translate(0, 0);	}	.showcase-wrap ul li.logo-komatsu {		width: 50%;		padding: 16px 0 0;	}	.showcase-wrap ul li.logo-bridgestone {		width: 50%;		padding: 8px 0 0;	}	.showcase-wrap ul li.logo-groovex {		width: 50%;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-jpx {		width: 50%;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-tokyu {		width: 50%;		padding: 5px 0 0;	}	.showcase-wrap ul li.logo-staffservice {		width: 50%;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-onet {		width: 50%;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-advantest {		width: 50%;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-duplo {		width: 50%;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-recruit {		width: 50%;		padding: 0 0 10px;	}	.showcase-wrap ul li.logo-ana {		width: 50%;		padding: 0 0 10px;	}	.showcase-wrap ul li.logo-yamato {		width: 50%;		padding: 10px 0 0;	}	.showcase-wrap ul li.logo-secom {		width: 50%;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-honda {		width: 50%;		padding: 0 0 0;	}	.showcase-wrap ul li.logo-jgc {		width: 50%;		padding: 20px 0 0;	}	.showcase-wrap ul li.logo-something {		width: 50%;	}	.showcase-wrap ul li.logo-komatsu img {		width: 80px;	}	.showcase-wrap ul li.logo-bridgestone img {		width: 110px;	}	.showcase-wrap ul li.logo-groovex img  {		width: 100px;	}	.showcase-wrap ul li.logo-jpx img {		width: 36px;	}	.showcase-wrap ul li.logo-tokyu img {		width: 100px;	}	.showcase-wrap ul li.logo-staffservice img {		width: 160px;	}	.showcase-wrap ul li.logo-onet img {		width: 50px;	}	.showcase-wrap ul li.logo-something img{		width: 100px;	}	.showcase-wrap ul li.logo-advantest img  {		width: 100px;	}	.showcase-wrap ul li.logo-duplo img  {		width: 70px;	}	.showcase-wrap ul li.logo-recruit img  {		width: 100px;	}	.showcase-wrap ul li.logo-ana img  {		width: 80px;	}	.showcase-wrap ul li.logo-yamato img  {		width: 100px;	}	.showcase-wrap ul li.logo-secom img  {		width: 70px;	}	.showcase-wrap ul li.logo-honda img  {		width: 60px;	}	.showcase-wrap ul li.logo-jgc img  {		width: 120px;	}}