@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*設定する場合→ font-family:'Noto sans japanese', sans-serif; を追加*/
/*同時に他のWEBフォントを使う場合はhtml側に記載すること*/

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	background: unset;
	border: unset;
}

body {
	font-size: calc((100vw / 42.5) * 1.6);
	background: #FFFFFF;
	font-family: "source-han-sans-japanese", sans-serif;
	color: var(--black);
}

#wrapper {
	min-width: 320px;
	max-width: 768px;
	margin: 0 auto;
}

img {
	vertical-align: bottom;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=submit],
input[type=button] {
	-webkit-appearance: none;
	border: 1px solid #999999;
}

.for-pc {
	display: none !important;
}

.sp-br {
	display: block;
}


:root {
	--black: #363636;
	--gray: #D9D9D9;
	--light-gray: #f5f5f5;
	--light-blue: #F6FBFC;
	--sky-blue: #47B9FF;
	--pink: #FF4766;
	--yellow: #FFAB35;
	--green: #06C755;

	--gradation: linear-gradient(0% #6669E9, 35% #6E86FF, 67% #8679EE, 25% #A576FF, );
}

/* === Block: .flex === */
.flex {
	display: flex;
}

/* === Direction: .flex--row / .flex--column === */
.flex--row {
	flex-direction: row;
}

.flex--row-reverse {
	flex-direction: row-reverse;
}

.flex--column {
	flex-direction: column;
}

.flex--sp-column {
	flex-direction: column;
}

.flex--column-reverse {
	flex-direction: column-reverse;
}

/* === Wrap: .flex--wrap === */
.flex--nowrap {
	flex-wrap: nowrap;
}

.flex--wrap {
	flex-wrap: wrap;
}

.flex--wrap-reverse {
	flex-wrap: wrap-reverse;
}

/* === Justify Content: 水平方向の配置 === */

.flex--justify-end {
	justify-content: flex-end;
}

.flex--justify-center {
	justify-content: center;
}

.flex--justify-between {
	justify-content: space-between;
}

.flex--justify-around {
	justify-content: space-around;
}

.flex--justify-evenly {
	justify-content: space-evenly;
}

/* === Align Items: 垂直方向の配置（単一行）=== */
.flex--align-end {
	align-items: flex-end;
}

.flex--align-center {
	align-items: center;
}

.flex--sp-align-start {
	align-items: flex-start;
}


/* ----------------- */


.svg {
	width: 100%;
	fill: transparent;
	stroke: transparent;
}

.svg svg {
	transition: stop-color .7s linear;
}

.svg--fill-white {
	fill: white;
}

.svg--fill-black {
	fill: var(--black);
}

.svg--fill-yellow {
	fill: var(--yellow);
}

.svg--fill-pink {
	fill: var(--pink);
}

.svg--fill-blue {
	fill: var(--sky-blue);
}

.svg--stroke-white {
	stroke: white;
}

.svg--stroke-black {
	stroke: var(--black);
}

.svg--stroke-yellow {
	stroke: var(--yellow);
}

.svg--stroke-pink {
	stroke: var(--pink);
}

.svg--stroke-blue {
	stroke: var(--sky-blue);
}

.gap--1 {
	gap: .5rem;
}

.section {
	display: flex;
	justify-content: center;
	background: white;
	padding: min(100px, 5vw) 0;
}

.section--light-blue {
	background: var(--light-blue);
}

.st-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.slideUp {
	height: fit-content;
	overflow: hidden;
}

.slideUp .st {
	transform: translateY(100%);
	opacity: 0;
	transition: 1s all ease-in-out;
}

.slideUp .st.is-active {
	opacity: 1;
	transform: translateY(0%);
}

.slideUp .talent-abs {
	transform: translateY(5%);
	opacity: 0;
	transition: .5s all var(--delay) ease-in-out;
}

.slideUp .talent-abs.is-active {
	opacity: 1;
	transform: translateY(0%);
}

.st {
	font-size: 3.5em;
	font-weight: 800;
}

.st--skyblue {
	color: var(--sky-blue);
}

.sst {
	font-size: 2em;
	font-weight: 300;
}

.overview {
	font-size: 1em;
	font-weight: 300;
}

.container {
	background: white;
	border-radius: 1rem;
	position: relative;
	color: var(--black);
}

.container--skyblue {
	background: var(--sky-blue);
	color: white;
}

.container--black {
	background: var(--black);
	color: white;
}

.container--green {
	background: var(--green);
	color: white;
}

.container--line-left {
	border-top: 16px solid var(--black);
}

.container__inner {
	padding: 1rem;
}

.container__ttl {
	font-size: 1.375em;
	font-weight: 700;
}

.container__st {
	font-size: 1.725em;
	font-weight: 600;
}

.container__btn {
	width: 100%;
	font-size: 1.375em;
	cursor: pointer;
	border-radius: 0 0 0 1rem;
	padding: 1rem;
}

.container__btn--black {
	background: var(--black);
	color: white;
}

.container__btn .svg {
	width: 40px;
	height: calc(min(40px, 100vw) * 1/1);
}

.container__ul {}

.container__ul li {
	line-height: 1.7;
	list-style: disc;
	margin-left: 1em;
}

.container__ol {}

.container__ol li {
	line-height: 1.7;
	list-style: auto;
	margin-left: 1em;
}


.badge {
	padding: .25rem .875rem;
	border-radius: .25rem;
}

.badge--gray {
	background: var(--gray);
	color: var(--black);
}

.badge--pink {
	background: var(--pink);
	color: white;
}

.badge--black {
	background: var(--black);
	color: white;
}


.flex__item {}


.text {
	font-size: 1em;
	line-height: 1.7;
}

.text--black {
	color: var(--black);
}

.text--strong {
	font-weight: 600;
}

.text--medium {
	font-size: 1.375em;
}

.text--large {
	font-size: 1.5em;
}

.text--link {
	text-decoration: underline;
}


.point {
	border: 1px solid;
	border-color: currentColor;
	border-radius: .25rem;
	flex: 0 1 100%;
	text-align: center;
	box-shadow: 4px 4px #d8d8d866;
}

.point--yellow {
	color: var(--yellow);
}

.point--blue {
	color: var(--sky-blue);
}

.point--pink {
	color: var(--pink);
}


.point__inner {
	padding: .5rem;
}

.point__ttl {
	font-size: 1.25em;
}

.talent-abs {
	position: absolute;
	right: 2rem;
	top: -4%;
	height: 60vw;
	width: min(300px, 44vw);
	z-index: 99;
}

.talent--itano {
	top: -8%;
	left: 1rem;
}

.talent--okada {}

.talent--hiromi {
	right: 25%;
	width: min(360px, 50vw);
}

.talent__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.figure {}

.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.switch {
	height: 4rem;
	border-radius: 2rem;
	max-width: 900px;
	background: var(--light-gray);
	width: calc(100% - .5rem);
}

.switch__inner {
	height: 100%;
	width: 100%;
	padding: .25rem;
	display: flex;
	gap: .5rem;
	position: relative;
}

.switch__button {
	flex: 0 1 33.3%;
	position: relative;
	cursor: pointer;
}

.slideBtn {
	display: block;
	width: 33.3%;
	border-radius: 999px;
	position: absolute;
	overflow: hidden;
	background: var(--black);
	height: calc(100% - .5rem);
	transition: .3s transform;
	transform: translateX(0);
}


.switch__button.is-active {
	color: white;
	cursor: auto;
	transition: color .3s linear;
}

.is-active {}

.card {
	flex: 0 1 100%;

	background: white;
	color: var(--black);
	border-radius: 0 0 .5rem .5rem;
	padding: 1rem;
}

.card--line-top {
	border-top: 8px solid var(--black);
}

.card__header {
	text-align: center;
	font-size: 1.25rem;
	padding-bottom: .5rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--light-gray);
}

.card__body {}

.icon-box {
	padding: .5rem;
	border-radius: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-box--black {
	background: var(--black);
}

.form-group {
	flex: 1 1 calc(50% - .5rem);
}

.form-label {
	padding: .25rem 0;
}

.form-input {
	width: 100%;
	height: 3rem;
	padding: .125rem;
	border-color: var(--light-gray);
	border-radius: .2rem;
	font-size: 1.125rem;
}

.form-textarea {
	width: 100%;
	border-color: var(--light-gray);
	border-radius: .2rem;
	padding: .125rem;
	font-size: 1.125rem;
}

.google-map {
	width: 100%;
	height: calc(100vw * 9/16);
	border: none;
	margin: unset;
	border-radius: 1rem 0 0 0;
}

/* ------------------------------------ */

.simple-table {
	width: 100%;
	font-size: 1.125rem;
	border-collapse: separate;
	border-spacing: 0 .5rem;
}

.simple-table tbody {}

.simple-table tr {}

.simple-table th {
	display: block;
	padding: .5rem;
	text-align: center;
	line-height: 1.7;
	background: var(--black);
	border-radius: .5rem 0 0 0;
}

.simple-table td {
	padding: .5rem;
	display: block;
	line-height: 1.7;
	background: white;
	color: var(--black);
	border-radius: 0 0 .5rem 0;
}

/* ------------------------------------ */
/* 
.hl_pr-0 {
	padding-right: 0;
} */


/*ローディング画面
----------------------------------------------------------------------------------------------------*/
.loading {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9999;
	height: 0px;

	background: var(--sky-blue);
	transition: .5s opacity, .7s height, 0s visibility .7s;
}

.loading.is-active {
	visibility: visible;
	opacity: 1;
	height: 100%;
}

.loading__inner {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.loading svg {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
	animation: 5s swiming infinite;
}

@keyframes swiming {
	0% {
		transform: rotate(12deg);
	}

	50% {
		transform: rotate(-12deg);
	}

	100% {
		transform: rotate(12deg);
	}
}



/*メインコンテンツ
----------------------------------------------------------------------------------------------------*/
#main {}

.content {
	width: 95%;
	max-width: 1600px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sidebar {}

.nav__inner {}

.nav__item {
	width: 90%;
}

.nav__item svg {
	transition: all .3s linear;
}

.nav__item--logo,
.nav__item--contact {
	display: none;
}

.nav__item--logo svg,
.logo-img {
	display: none;
	height: 34px;
	width: 100%;
	object-fit: contain;
}

.nav__item--menu {
	position: fixed;
	background: var(--black);
	width: 60px;
	height: 60px;
	right: 1rem;
	top: 1rem;
	z-index: 999;
	border-radius: 999px;
}

.nav__item--menu svg {
	height: 40px;
	width: 100%;
	object-fit: contain;
	transform: rotateY(180deg);
}

.nav__item--contact svg {
	display: none;
	height: 60px;
	width: 100%;
	object-fit: contain;
}

.nav__item--logo:hover svg {
	fill: var(--sky-blue);
}

.nav__item--menu:hover svg,
.nav__item--menu.is-active svg,
.nav__item--contact:hover svg,
.nav__item--contact:hover .nav__text {
	stroke: var(--sky-blue);
	color: var(--sky-blue);
}

.nav__text {
	color: white;
	font-weight: 800;
	text-align: center;
	transition: all .3s linear;
}

.sidebar__menu {
	visibility: hidden;
	position: fixed;
	top: 45%;
	right: 0;
	transform: translateX(50%) translateY(-50%);
	height: 2rem;
	width: 2rem;
	border-radius: 4rem;
	overflow: hidden;
	background: var(--black);
	color: var(--black);
	transition: .2s color, .4s height .2s, .4s width .2s, .2s right .6s, .4s border-radius .8s, .2s visibility .6s;
	z-index: 999;
}

.sidebar__menu.is-active {
	visibility: visible;
	right: 50%;
	padding: 1rem;
	height: 50vh;
	width: 200px;
	color: white;
	border-radius: 1rem;
	overflow: hidden;
	transition: .4s right, .4s height .4s, .4s width .4s, .4s color .8s;
}

.sidebar__menu-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.sidebar__menu-inner a {
	font-size: 1.125em;
	font-weight: 600;
}



.main {
	flex: 0 0 100%;
}

.hero {
	background: url('./../img/bg/bg_sea.png') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	max-height: calc(100vw * 3/2);
	overflow: hidden;

	position: relative;
}

.hero__inner {
	height: 100%;
}

.hero__logo {
	position: absolute;
	left: 1rem;
	top: 1rem;
	display: block;
	width: min(320px, 56vw);
}

.hero__logo svg {
	height: 10vw;
	width: 100%;
}

.hero__acceljapan {
	height: 60px;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
}

.scroll {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
}

.scroll-wrapper {
	display: flex;
	width: 360vw;
	height: 100vw;
	justify-content: space-between;
	animation: loop 25s linear infinite;
	will-change: transform;
}

.scroll-item {
	/* flex: 0 1 50%;
	display: flex;
	justify-content: center; */
}

.scroll__talent {
	height: 100vw;
	width: 100%;
	object-fit: contain;
}

@keyframes loop {
	from {
		transform: translate3d(0, 0, 0);
		;
	}

	to {
		transform: translate3d(-360vw, 0, 0);
		;
		;
	}
}

/* ============================== */

.news {}

.concept {}

.concept .flex__item {
	flex: 1 1 50%;
}

.concept .container {
	padding-top: 50vw;
	margin-top: 10vw;
}

.service {}

.service .flex__item:first-child {
	flex: 1 1 70%;
}

.service .flex__item:last-child {
	flex: 1 1 30%;
}

.service .badge {
	width: 100%;
	text-align: center;
}

.company {}

.company__item {
	display: none;
	transition: opacity .3s;
}

.company__item.is-active {
	display: block;
}

.recruit {}

.recruit .flex__item {
	flex: 0 1 50%;
}

.recruit .container:last-child .flex__item {
	flex: 1 1 50%;
}

.recruit .container:last-child .flex__item:nth-child(2) {
	flex: 1 1 30%;
}

.recruit .container--pt {
	padding-top: 50vw;
	margin-top: 10vw;
}

.recruit .svg {
	height: calc(min(60px, 100vw) * 1/1);
}

.contact {}

.contact .svg {
	width: 60px;
	height: calc(min(60px, 100vw) * 1/1);
}

.access .flex__item {
	flex: 0 1 30%;
}


/*フッター
----------------------------------------------------------------------------------------------------*/

.footer {
	background: var(--black);
	color: white;
}

.footer__inner {
	padding: 2rem 1rem 6rem;
}

.footer .flex__item {
	flex: 0 1 40%;
}

.footer__logo .svg {
	height: 11vw;
	width: min(320px, 60vw);
}

.sns__item .svg {
	width: 40px;
	height: 40px;
	margin-bottom: 2rem;
}

.footer__nav {
	flex: 0 1 33.3%;
	margin-bottom: 2rem;
}

.footer__nav dt {
	font-size: 1.25em;
	font-weight: 600;
	margin-bottom: 1rem;
}

.footer__nav dd {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer__nav a {}


.fix-btn {
	position: fixed;
	right: 0;
	bottom: 1rem;
	padding: .5rem 1rem;
	border-radius: .5rem 0 0 .5rem;
	z-index: 999;
}

.fix-btn--skyblue {
	background: var(--sky-blue);
	color: white;
}

.fix-btn .svg {
	width: 40px;
	height: calc(min(40px, 100vw) * 1/1);
}