@charset "UTF-8";

/* ---------------------------------------
  COMPANY
-----------------------------------------*/

@media screen and (min-width: 768px) {
	#pagettl {
		background-image: url(../img/company/pagettl_pc.jpg);
	}
}

@media screen and (max-width: 767px) {
	#pagettl {
		background-image: url(../img/company/pagettl_sp.jpg);
	}
}


/* pagelink
--------------------------------*/
#pagelink {
	padding: 100px 0 0;
}

#pagelink .list .btn_s {
	width: 248px;
	margin: 0;
}

#pagelink .list .btn_s a {
	width: 100%;
	min-width: inheritwi padding-bottom: 15px;
}

#pagelink .list .btn_s a .arw {
	top: 40%;
	right: 11px;
	margin-top: 0;
}

#pagelink .list .btn_s a .arw::before {
	width: 2px;
	height: 12px;
	left: 1px;
	top: -17px;
}

#pagelink .list .btn_s a .arw::after {
	right: 2px;
	top: 4px;
	transform: rotate(135deg) scale(0);
	transform-origin: right top;
}

@media screen and (min-width: 768px) {
	#pagelink .list .btn_s a:hover .arw::before {
		transform: translateY(8px);
	}

	#pagelink .list .btn_s a:hover .arw::after {
		transform: rotate(135deg) scale(1);
	}
}

@media screen and (max-width: 767px) {
	#pagelink {
		padding: 15rem 0 0;
	}

	#pagelink .list {
		justify-content: space-between;
	}

	#pagelink .list .btn_s {
		width: 28.8rem;
	}

	#pagelink .list .btn_s:nth-child(n + 3) {
		margin-top: 8rem;
	}

	#pagelink .list .btn_s a {
		width: 100%;
		padding-bottom: 2rem;
	}

	#pagelink .list .btn_s a .arw {
		right: 2rem;
	}

	#pagelink .list .btn_s a .arw::before {
		width: .3rem;
		height: 1.8rem;
		left: .1rem;
		top: -2.6rem;
	}
}

/* common
--------------------------------*/

/*tb*/
#page_company .tb {
	width: 100%;
	border-collapse: collapse;
}

#page_company .tb th,
#page_company .tb td {
	position: relative;
}

#page_company .tb th::before,
#page_company .tb td::before,
#page_company .tb td::after {
	content: "";
	height: 1px;
	position: absolute;
	left: 1.7rem;
	bottom: 0;
}

#page_company .tb th::before {
	width: calc(100% - 3.4rem);
	background-color: #fff;
}

#page_company .tb tr:last-of-type th::before {
	content: none;
}


#page_company .tb td::before,
#page_company .tb td::after {
	width: calc(100% - 1.7rem);
	background-color: #c1c1c1;
}

#page_company .tb tr:first-of-type td::after {
	bottom: auto;
	top: 0;
}

#page_company .tb th {
	width: 133px;
	text-align: center;
	font-weight: 500;
	color: #fff;
	line-height: 1.5;
	letter-spacing: 0.05em;
	background-color: #0066cc;
	padding: 1.55rem .5rem;
}

#page_company .tb td {
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
	padding: 1.55rem 0 1.55rem 2.5rem;
}

@media screen and (max-width: 767px) {
	#page_company .tb {
		width: 100%;
		border-collapse: collapse;
	}

	#page_company .tbcover {
		overflow-x: scroll;
		overflow-y: hidden;
		margin-right: -6rem;
	}

	#page_company .tbcover::-webkit-scrollbar {
		display: none;
	}

	#page_company .tbcover .tb {
		position: relative;
	}

	#page_company .tbcover .tb::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: url(../img/service/detail/iconScroll.png) no-repeat 20.5rem center / 22rem auto;
		transition: all 0.2s ease-out 0.2s;
		animation: scrollAnimation 1s linear infinite;
		z-index: 10;
		pointer-events: none;
	}

	#page_company .tbcover.scrolled .tb::before {
		opacity: 0;
	}

	#page_company .tb th::before,
	#page_company .tb td::before,
	#page_company .tb td::after {
		left: 2.6rem;
	}

	#page_company .tb th::before {
		width: calc(100% - 5.2rem);
	}

	#page_company .tb td::before,
	#page_company .tb td::after {
		width: calc(100% - 2.6rem);
	}

	#page_company .tb th {
		width: 22.2rem;
		padding: 2.65rem .5rem;
	}

	#page_company .tb td {
		padding: 2.35rem 0 2.35rem 3.6rem;
	}
}


/* message
--------------------------------*/
#sec_message {
	padding: 100px 0 0;
}

#sec_message .secttl {
	margin-bottom: -2.5em;
}

#sec_message .block {
	position: relative;
	padding: 90px 0;
}

#sec_message .block + .block {
	margin-top: 50px;
}

#sec_message .block::before {
	content: "";
	width: calc(50% + 350px);
	height: 100%;
	background-color: #f2f7fc;
	border-radius: 30px 0px 0px 0px;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: .6s ease;
}

#sec_message .block:nth-child(even)::before {
	border-radius: 0px 30px 0px 0px;
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

#sec_message .block.is-show::before {
	transform: translateX(0) !important;
}

#sec_message .block:nth-child(even) .inner {
	flex-direction: row-reverse;
}

#sec_message .block .img {
	width: 279px;
}

#sec_message .block .txtwrap {
	width: 745px;
}

#sec_message .block .txtwrap .ttl {
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.75;
	letter-spacing: 0.15em;
	margin-bottom: 1em;
	margin-top: -10px;
}

#sec_message .block .txtwrap .txt {
	letter-spacing: 0.05em;
	text-align: justify;
}

#sec_message .block .txtwrap .name {
	margin-top: 2em;
}

#sec_message .block .txtwrap .name span {
	font-weight: 500;
	font-size: 2.2rem;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	#sec_message {
		padding: 15rem 0 0;
	}

	#sec_message .secttl {
		margin-bottom: 8rem;
	}

	#sec_message .block {
		padding: 0 0 14rem;
	}

	#sec_message .block + .block {
		margin-top: 15rem;
	}

	#sec_message .block::before {
		width: 100%;
		height: calc(100% - 36.5rem);
		border-radius: 4.5rem 0px 0px 0px;
		top: auto;
		bottom: 0;
	}

	#sec_message .block:nth-child(even)::before {
		border-radius: 0px 4.5rem 0px 0px;
	}

	#sec_message .block:nth-child(even) .inner {
		flex-direction: row-reverse;
	}

	#sec_message .block .img {
		width: 50rem;
		margin: 0 auto;
	}

	#sec_message .block .txtwrap {
		width: 100%;
		margin-top: 8rem;
	}

	#sec_message .block .txtwrap .ttl {
		font-size: 3.6rem;
		letter-spacing: 0.075em;
		margin-top: 0;
	}

	#sec_message .block .txtwrap .name {
		margin-top: 2em;
	}

	#sec_message .block .txtwrap .name span {
		font-size: 3.3rem;
	}

}


/* sec_wrap
--------------------------------*/

#page_company .sec_wrap {
	padding: 100px 0;
}

#page_company .sec_wrap section {
	padding: 100px 0;
}

#page_company .sec_wrap section + section {
	margin-top: 100px;
}

#page_company .sec_wrap section::before {
	content: "";
	width: calc(50% + 550px);
	height: 100%;
	background-color: #fff;
	border-radius: 0px 30px 0px 0px;
	position: absolute;
	left: 0;
	top: 0;
}

#page_company .sec_wrap section .wrap {
	padding-right: 77px;
}

@media screen and (max-width: 767px) {
	#page_company .sec_wrap {
		padding: 15rem 0;
	}

	#page_company .sec_wrap section {
		padding: 9rem 0;
	}

	#page_company .sec_wrap section + section {
		margin-top: 15rem;
	}

	#page_company .sec_wrap section::before {
		width: 100%;
		border-radius: 0px 4.5rem 0px 0px;
	}

	#page_company .sec_wrap section .wrap {
		padding-right: 0;
	}

}


/* profile
--------------------------------*/

@media screen and (max-width: 767px) {
	#sec_profile .tb {
		width: 130rem;
	}
}


/* history
--------------------------------*/
#sec_history .tb {
	width: 592px;
}

#sec_history .imgwrap {
	width: 388px;
}

#sec_history .imgwrap > * + * {
	margin-top: 25px
}

#sec_history .imgwrap .col2 .img {
	width: 186px;
}

#sec_history .imgwrap figcaption {
	display: block;
	text-align: left;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 0;
	margin-top: .75em;
}

@media screen and (min-width: 768px) {}

@media screen and (max-width: 767px) {
	#sec_history .tb {
		width: 100rem;
	}

	#sec_history .imgwrap {
		width: 100%;
		margin-top: 9rem;
	}

	#sec_history .imgwrap > * + * {
		margin-top: 4rem;
	}

	#sec_history .imgwrap .col2 .img {
		width: 30.2rem;
	}

	#sec_history .imgwrap figcaption {
		font-size: 2.1rem;
	}
}


/* approach
--------------------------------*/
#sec_approach {
	padding: 0 0 100px;
}

#sec_approach .mv {
	position: relative;
	padding: 100px 0 0;
}

#sec_approach .mv::before {
	content: "";
	width: 100%;
	height: calc(100% - 293px);
	background-color: #f2f7fc;
	position: absolute;
	left: 0;
	top: 0;
}

#sec_approach .mv::after {
	content: "";
	width: 1100px;
	height: 126px;
	background: url(../img/company/approach_mv_bg_pc.png) no-repeat center top / 100% auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 167px;
	margin: 0 auto;
	z-index: -1;
}

#sec_approach .mv .inner {
	width: 1350px;
}

#sec_approach .mv .ttlwrap {
	width: 440px;
	min-height: 253px;
	padding-top: 22px;
	margin: 0 auto;
}

#sec_approach .mv .ttlwrap .secttl {
	margin-bottom: 30px;
	;
}

#sec_approach .mv .ttlwrap .lead {
	text-align: justify;
}

#sec_approach .mv .imgwrap._01 {
	width: 100%;
	position: absolute;
	top: 0;
}

#sec_approach .mv .imgwrap._02 {
	width: 1006px;
	margin: 40px auto 0;
}

#sec_approach .mv .imgwrap .img {
	position: relative;
	width: 381px;
}

#sec_approach .mv .imgwrap .img::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #00a0e9;
	z-index: 1;
}

#sec_approach .mv.is-show .imgwrap .img::before {
	-webkit-animation: passing-img 1s ease .5s 1 normal forwards;
	animation: passing-img 1s ease .5s 1 normal forwards;
}

#sec_approach .mv .imgwrap .img img {
	opacity: 0;
	transition: opacity .3s ease .9s;
}

#sec_approach .mv.is-show .imgwrap .img img {
	opacity: 1;
}

#sec_approach .mv .drop {
	width: 182px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 45px;
	margin: 0 auto;
}

#sec_approach .blockwrap {
	margin-top: 60px;
}

#sec_approach .block .blockttl {
	font-weight: 700;
	font-size: 2.4rem;
	letter-spacing: 0.05em;
	padding-bottom: .25em;
	border-bottom: 4px solid #0066cc;
	margin-bottom: 30px;
}

#sec_approach .block .img.certificate {
	width: 232px;
	margin: 0 auto;
}

#sec_approach .block .imgwrap .img.certificate {
	margin: 0;
}

#sec_approach .block .img figcaption {
	display: block;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 0;
	margin-top: .75em;
	min-height: 3em;
}

#sec_approach .block .tb {
	margin-top: 50px;
}

#sec_approach .block .txtwrap .txt {
	letter-spacing: 0.075em;
	text-align: justify;
}

#sec_approach .block .txtwrap .btn_s {
	margin-top: 30px;
}

/*ios*/
#sec_approach .block.ios {
	width: 728px;
}

#sec_approach .block.ios .tb th {
	width: 175px;
}

/*gok*/
#sec_approach .block.gok {
	width: 279px;
}

#sec_approach .block.gok .tb th {
	width: 110px;
}

#sec_approach .block.gok .txtwrap {
	margin-top: 18px;
}

#sec_approach .block.gok .txtwrap .ttl {
	font-weight: 500;
	font-size: 1.8rem;
	margin-bottom: 5px;
}

#sec_approach .block.gok .txtwrap .img {
	margin: 30px auto 10px;
}

#sec_approach .block.gok .txtwrap .btn_s {
	margin-top: 30px;
}

/*internship*/
#sec_approach .block.internship {
	margin-top: 90px;
}

#sec_approach .block.internship .txtwrap {
	width: 502px;
}

#sec_approach .block.internship .txtwrap .txt + .btn_s {
	margin-top: 50px;
}

#sec_approach .block.internship .imgwrap {
	width: 550px;
}

#sec_approach .block.internship .imgwrap .img {
	width: 266px;
}

#sec_approach .block.internship .imgwrap .img:nth-child(n + 3) {
	margin-top: 18px;
}

@media screen and (max-width: 767px) {
	#sec_approach {
		padding: 15rem 0;
	}

	#sec_approach .mv {
		padding: 0 0 33rem;
	}

	#sec_approach .mv::before {
		height: calc(100% - 27rem);
	}

	#sec_approach .mv::after {
		width: 100%;
		height: 10.1rem;
		background: url(../img/company/approach_mv_bg_sp.png) no-repeat center top / 100% auto;
		bottom: 17rem;
	}

	#sec_approach .mv .inner {
		width: 100%;
	}

	#sec_approach .mv .ttlwrap {
		width: 100%;
		min-height: inherit;
		padding: 8rem 6rem;
	}

	#sec_approach .mv .ttlwrap .secttl {
		margin-bottom: 5rem;
	}

	#sec_approach .mv .imgwrap {
		display: flex;
	}

	#sec_approach .mv .imgwrap._01 {
		position: static;
	}

	#sec_approach .mv .imgwrap._02 {
		width: 100%;
		margin: 0;
	}

	#sec_approach .mv .imgwrap .img {
		width: 50%;
	}

	#sec_approach .mv .drop {
		width: 27rem;
		bottom: -33rem;
	}

	#sec_approach .blockwrap {
		margin-top: 6rem;
	}

	#sec_approach .block .blockttl {
		font-size: 3.6rem;
		border-bottom: .6rem solid #0066cc;
		margin-bottom: 5rem;
	}

	#sec_approach .block .img.certificate {
		width: 35rem;
	}

	#sec_approach .block .imgwrap .img.certificate {
		margin: 0 auto;
	}

	#sec_approach .block .img.certificate + .img.certificate {
		margin-top: 6rem;
	}

	#sec_approach .block .img figcaption {
		font-size: 2.1rem;
	}

	#sec_approach .block .tb {
		margin-top: 9rem;
	}

	#sec_approach .block .txtwrap .btn_s {
		margin-top: 4rem;
	}

	/*ios*/
	#sec_approach .block.ios {
		width: 100%;
	}

	#sec_approach .block.ios .tb {
		width: 110rem;
	}

	#sec_approach .block.ios .tb th {
		width: 26rem;
	}

	/*gok*/
	#sec_approach .block.gok {
		width: 100%;
		margin-top: 13rem;
	}

	#sec_approach .block.gok .tb th {
		width: 16.5rem;
	}

	#sec_approach .block.gok .txtwrap {
		margin-top: 7rem;
	}

	#sec_approach .block.gok .txtwrap .ttl {
		font-size: 2.7rem;
		margin-bottom: .25em;
	}

	#sec_approach .block.gok .txtwrap .img {
		margin: 9rem auto 2.5rem;
	}

	#sec_approach .block.gok .txtwrap .btn_s {
		margin-top: 5rem;
	}

	/*internship*/
	#sec_approach .block.internship {
		margin-top: 13rem;
	}

	#sec_approach .block.internship .txtwrap {
		width: 100%;
	}

	#sec_approach .block.internship .txtwrap .txt + .btn_s {
		margin-top: 8rem;
	}

	#sec_approach .block.internship .imgwrap {
		width: 100%;
		margin-top: 9rem;
	}

	#sec_approach .block.internship .imgwrap .img {
		width: 30.5rem;
	}

	#sec_approach .block.internship .imgwrap .img:nth-child(n + 3) {
		margin-top: 2rem;
	}
}

@keyframes passing-img {
	0% {
		left: 0;
		width: 0;
	}

	50% {
		left: 0;
		width: calc(100% + 1px);
	}

	51% {
		left: 0;
		width: calc(100% + 1px);
	}

	100% {
		left: 100%;
		width: 0;
	}
}