:root {
	font-size: 62.5%;

	--white: white;
	--gray: #f7f7f7;
	--black: #000;
    --sky: #00b9ef;
	--sky-light: #1dc0ef;
	--yellow: #fff54c;

    --link: var(--navy);
    --hover: white;

	--main-width: 1200px;/* 100vw = 1600px（デザインのアートボード）で計算 */
    --main-padding-inline: calc( var(--m) * 2 );
	--header-height: min(6.25vw, 100px);
    

    --m: min(0.93vw, 15px);
	--m2: calc(var(--m) * 2);
	--m3: calc(var(--m) * 3);
	--m4: calc(var(--m) * 4);
	--m5: calc(var(--m) * 5);
	--m6: calc(var(--m) * 6);
	--m7: calc(var(--m) * 7);
	--m8: calc(var(--m) * 8);
	--m9: calc(var(--m) * 9);
	--m10: calc(var(--m) * 10);
	--m11: calc(var(--m) * 11);
	--m12: calc(var(--m) * 12);
	--m13: calc(var(--m) * 13);
	--m14: calc(var(--m) * 14);
	--m15: calc(var(--m) * 15);
	--m20: calc(var(--m) * 20);

    --fs18: min(1.12vw, 1.8rem);
    --fs20: min(1.25vw, 2.0rem);
	--fs25: min(1.56vw, 2.5rem);
}
@media screen and (max-width: 767px) {
	:root {
		--main-width: 100%;
		--header-height: min(16vw, 60px);
        /* 100vw = 375pxで計算 */

		--m: 4vw;

		--fs16: min(4.26vw, 1.6rem);
		--fs18: min(4.8vw, 1.8rem);
        --fs20: min(5.33vw, 2.0rem);
		--fs25: min(6.66vw, 2.5rem);
    }
}



/* ============================================ */
/*  Default Setting  */
/* ============================================ */
* {
	box-sizing: border-box;
}
a {
	--visited: var(--link);
    --focus: var(--hover);
    text-decoration: none;
}
a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}
a:link {
	--text-color: var(--link);
    --bg-color: var(--bg);
}
a:visited {
	--text-color: var(--visited);
    --bg-color: var(--bg);
}
:is(a, button) {
	background: var(--bg-color);
	color: var(--text-color);
	text-decoration: none;
}

:where(a, button):not([class]) {}

:where(a, button):focus {
	--bg-color: var(--focus-bg, var(--hover-bg, transparent));
	--text-color: var(--focus, var(--hover));
}

@media (hover: hover) {
	:where(a, button):hover {
		--bg-color: var(--hover-bg, transparent);
		--text-color: var(--hover);
	}
}
:is(h1, h2, h3, h4, h5, h6) {
	font-size: initial;
    font-weight: bold;
	margin-block: 0;
}
p:not(:last-child) {
    margin-bottom: 0;
}
strong {
    color: var(--vermilion);
}
em {
	font-weight: bold;
	font-style: normal;
	background: #ffffcc;
}
ol {
	list-style: decimal;
	margin-left: 1.5rem;
}
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
:target {
	scroll-margin-block: 5ex;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}
:is(br, wbr)[sp], .sp {
	display: none;
}
@media screen and (max-width: 767px) {
	:is(br, wbr)[pc], .pc {
		display: none;
	}
	:is(br, wbr)[sp] {
		display: inline;
	}
	.sp {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	img {
		width: 100%;
	}
}

html {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	/*
		scroll-behavior: smooth;
		上記プロパティを設定すると、フォームバリデーション時にsubmitからバリデーションエラー箇所までスクロールが必要な場合エラーメッセージが表示されない
		-> jsでスムーススクロールを実装
	*/
}
html:not(:has(#form.is_show)) {
	scroll-behavior: smooth;
}

body {
	width: 100%;
	min-width: var(--main-min-width, unset);
	height: 100%;
	min-height: 100svh;
	background: white;
	font-family: -apple-system, blinkMacSystemFont, "Helvetica Neue", "Segoe UI",
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: var(--fs18);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.005ic;
	color: black;

	position: relative;
}
@media screen and (max-width: 767px) {
    body {
        font-size: var(--fs16);
    }
}

/*  Common
-------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap-width, var(--main-width));
    padding-inline: var(--main-padding-inline);
    margin-inline: auto;

	position: relative;
    z-index: 0;
}

.container {
	display: flex;
	gap: var(--m);
}
@media screen and (max-width: 767px) {
    .wrap {
        margin-inline: 0;
    }
	.container {
		flex-direction: column;
	}
}


.btn:where(a, button) {
	border-radius: 100px;
	border: 0;
	padding-block: 0.4lh;
	padding-inline: 2.5ic;

	font-size: var(--fs15);
	font-weight: bold;

	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.5ic;

	transition: 0.2s 0s ease;
}
@media (hover: hover) {
	.btn:hover {
		background: var(--hover-bg, var(--sky));
		color: var(--hover, white);
	}
}
.btn:where(a, button) > svg {
	height: 0.75lh;
	fill: currentColor;
}

.nav-contact {
	--bg: var(--navy);
	--link: white;
}

.nav-entry,
[type="submit"] {
	--bg: var(--orange);
	--link: white;
}


table {
    width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	background: #ccc;
}
tr:not(:last-child) {
    border-bottom: 2px solid white;
}
:is(th, td) {
    padding-block: 0.75lh;
    padding-inline: 1.5ic;
	background: var(--white);
}
th {}

@media screen and (max-width: 767px) {
	:is(th, td) {
		padding-inline: 1ic;
	}
	th {
		min-width: 5ic;
		box-sizing: content-box;
	}
}




label {
    width: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}
label:has([type="checkbox"], [type="radio"]) {
    width: auto;
	margin-right: 2rem;
}
input[type="text"], textarea {
    flex-shrink: 1;
	width: 100%;
    padding-inline: var(--m);
	border-radius: 5px;
	outline: 1px solid #ccc;
    background: white;
	font-size: var(--fs20);
    line-height: 2.5;
}
input:is([type="checkbox"], [type="radio"]) {
    flex-shrink: 0;
    appearance: auto;
	accent-color: var(--sky);
	inline-size: min(2vw, 28px);
	block-size: min(2vw, 28px);
	margin-right: 0.5ic;
}
@media screen and (max-width: 767px){
	input:is([type="checkbox"], [type="radio"]){
		inline-size: min(5vw, 50px);
		block-size: min(5vw, 50px);	
	}
}


/*  CTA
-------------------------------------------------------------------- */
.cta {
	width: 100svw;
	padding-block: var(--m2);
	padding-inline: var(--m);
	background: rgba(255,245,76,.9);

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--m2);

	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
}
.cta a {
	display: block;
	width: 360px;

	position: relative;
	z-index: 0;
}
.cta a::after {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 68px;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
@media (hover: hover) {
	.cta a img {
		transition: 0.2s 0s ease-out;
	}
	.cta a:hover img {
		opacity: 0.8;
	}
}
.grecaptcha-badge {
	z-index: 200;
}
:is(section, .wrap):has(.grecaptcha-badge) {
	position: static;
}
@media screen and (max-width: 767px) {
	.cta {
		padding-block: var(--m);
		gap: var(--m);

		transition: 0.3s 0s ease-out;
	}
	.cta a.nav-contact {
		flex: 0 0 33.33vw;
	}
	.cta a.nav-entry {
		flex: 0 0 52.77vw;
	}
	body:has(#form.is_show) .cta {
		opacity: 0;
		pointer-events: none;
		z-index: -1;
	}
	body:not(:has(#form.is_show)) .grecaptcha-badge {
		opacity: 0;
		pointer-events: none;
		z-index: -1;
	}
}


/*  Main
-------------------------------------------------------------------- */
main.content {
	width: 100%;
	overflow-x: clip;
}


/*  Sections
-------------------------------------------------------------------- */
section {
    position: relative;
    z-index: 0;
}
section:first-child {
	margin-top: 0;
}
section h2 {
	margin-inline: auto;
    margin-bottom: calc( var(--m) * 4 );

	position: relative;
	z-index: 0;
}
section h2 img {
    width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    section h2 {
        margin-bottom: calc( var(--m) * 2 );
    }
}


/*  Billboard
-------------------------------------------------------------------- */
.billboard {
	background: var(--sky);
}
.billboard .tagline {}

#thanks .billboard {}

@media screen and (max-width: 767px) {
    .billboard .tagline {
        height: 201.33vw;
    }
	.billboard .tagline img {
		aspect-ratio: 375 / 755;
	}
}



/*  ３つの特徴
-------------------------------------------------------------------- */
#feature {
	padding-bottom: var(--m6);
	background: var(--sky);
}
#feature h2 {
	height: min(24.375vw, 390px);
	margin-bottom: 0;
}
#feature h2 > img {
	width: min(187.5vw, 3000px);
	max-width: unset;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
}
#feature .container {
	justify-content: space-between;
}
#feature .container > img {
	flex: 1 1;
	width: min(30.33vw, 364px);/* .wrap 1200pxでvwを計算 */
}
@media screen and (max-width: 767px) {
	#feature {
		padding-bottom: var(--m2);
	}
	#feature h2 {
		height: auto;
	}
	#feature h2 > img {
		width: 100%;
		aspect-ratio: 375 / 210;
		position: static;
		translate: none;
	}
	#feature .container {
		margin-top: calc( -1 * var(--m2) );
		padding-inline: var(--m5);
	}
	#feature .container > img {
		width: 100%;
		aspect-ratio: 255 / 274;
	}
}

/*  求人ボード
-------------------------------------------------------------------- */
#board {
    padding-bottom: var(--m8);
    background: var(--sky) url('imgs/tone-white.webp') repeat-x;
	background-size: auto min(12.5vw, 200px);
	background-position: center bottom;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
#board h2 {
	width: min(55.87vw, 894px);
	box-sizing: content-box;
	padding-inline: var(--m2);

	position: relative;
	 z-index: 0;
}
#board h2::before,
#board h2::after {
	display: block;

	position: absolute;
	top: 50%;
	left: 50%;
}
#board h2::before {
	width: 100%;
	height: 100%;
	background: var(--sky);

	translate: -50% -50%;
	z-index: -1;
}
#board h2::after {
	width: 100svw;
	height: min(1vw, 16px);
	background: url('imgs/arrow-line.webp') repeat-x;
	background-size: auto 100%;

	translate: -50% 0;
	z-index: -2;
}
#board li {
	height: 100%;
}
@media screen and (max-width: 767px) {
	#board {
		padding-bottom: var(--m4);
		background-size: auto 30vw;
	}
	#board h2 {
		width: 100%;
		padding-inline: 0;
	}
	#board h2::before,
	#board h2::after {
		display: none;
	}
	#board h2 > img {
		aspect-ratio: 375 / 170;
	}
}

/*  初心者に強い理由
-------------------------------------------------------------------- */
#reason {
	padding-top: var(--m12);
}
#reason .symbol {
	width: min(8vw, 128px);
	position: absolute;
	top: var(--m11);
	left: 50%;
	translate: min(23.75vw, 380px) 0;
}
#reason h2 {
	width: min(40.37vw, 646px);
}
#reason .container {
	flex-direction: column;
	align-items: center;
}
#reason .container > img {
	width: 100%;
}
@media screen and (max-width: 767px) {
	#reason {
		padding-top: var(--m4);
	}
	#reason .symbol {
		width: 18vw;
		top: 0;
		left: auto;
		right: var(--m);
		translate: none;
	}
	#reason h2 {
		width: 100%;
	}
	#reason h2 > img {
		aspect-ratio: 375 / 85;
	}
	#reason .wrap {
		padding-inline: 0;
	}
	#reason .container {
		gap: 0;
	}
}

/*  利用者の声
-------------------------------------------------------------------- */
#voices {
	padding-bottom: var(--m10);
	background: var(--sky);
}
#voices h2 {
	height: min(35.99vw, 575.86px);
	margin-bottom: 0;
}
#voices h2::before,
#voices h2::after {
	display: block;

	position: absolute;
	left: 0;
}
#voices h2::before {
	width: 200%;
	height: min(12.5vw, 200px);
	background: url('imgs/tone-sky.webp') repeat-x;
	background-size: auto 100%;
	background-position: 0 30px;

	opacity: 0.07;

	bottom: 0;
	z-index: -1;

	transform-origin: left bottom;
	rotate: -19.8deg;
}
#voices h2::after {
	width: 100%;
	height: 100%;
	background: var(--white);
	clip-path: polygon(0 0, 100% 0, 0 100%);

	top: 0;
	z-index: -2;
}
#voices .container {
	margin-top: calc( -1 * var(--m6) );
	justify-content: space-between;
	align-items: flex-start;
}
#voices .container > img {
	width: min(45vw, 540px);/* .wrap 1200pxでvwを計算 */
}
@media screen and (max-width: 767px) {
	#voices {
		margin-top: var(--m6);
		padding-bottom: var(--m2);
	}
	#voices h2 {
		height: auto;
		margin-bottom: -27vw;
	}
	#voices h2::after {
		height: 35.99vw;
	}
	#voices h2::before {
		background-size: auto 30vw;
		background-position: 0 0;
	}
	#voices h2 > img {
		translate: 0 -27vw;
	}
	#voices .wrap {
		padding-inline: 0;
	}
	#voices .container {
		margin-top: 0;
	}
	#voices .container > img {
		width: 100%;
	}
}



/*  ご利用の流れ
-------------------------------------------------------------------- */
#startup {
    padding-block: var(--m10);
	background: var(--sky-light);
	text-align: center;
}
#startup .wrap {
    padding: calc( var(--m) * 8 );
    background: white;
}
#startup h2 {
	width: min(32.06vw, 513px);
}
#startup h2 + p{
	margin-bottom: var(--m2);
}
#startup .container {
    --gap: calc( var(--m) * 4 );
    gap: var(--gap);
}
#startup .block {
    flex: 1 1 25%;
    position: relative;
    z-index: 0;
}
#startup .block:not(:last-child)::after {
    display: block;
    width: min(1.68vw, 21px);
    height: min(1.92vw, 24px);
    background: var(--sky);
    clip-path: polygon(0 0, 100% 50%, 0 100%);

    position: absolute;
    top: 50%;
    right: calc( -1 * var(--gap) / 2 );
    translate: 50% -50%;
}
@media screen and (max-width: 767px) {
	#startup {
		padding-top: calc( var(--m) * 2 );
	}
	#startup .wrap {
		width: auto;
		padding: var(--m4) var(--m) 0;
		margin-inline: var(--m2);
	}
	#startup h2 {
		width: 100%;
	}
	#startup h2 + p {
		margin-bottom: var(--m2);
		font-size: var(--fs16);
	}
	#startup .label {
		width: 50%;
	}
	#startup .container{
		display: block;
		padding: 0 var(--m4);
	}
	#startup .block{
		padding-bottom: 3rem;
	}
	#startup .block:last-child{
		padding-bottom: 0;
	}
	#startup .block:not(:last-child)::after {
        top: 91%;
        right: 50%;
        translate: 50% 0;
        clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
		width: 7vw;
		height: 5vw;
    }
}





/*  Form
-------------------------------------------------------------------- */
#form {
	background: white;
}
#form::before {
	display: block;
	width: 100%;
	height: min(12.5vw, 200px);
	background: url('imgs/tone-sky.webp') repeat-x;
	background-size: auto 100%;

	opacity: 0.07;
	rotate: 180deg;

	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#form h2 {
	width: min(27.49vw, 440px);
	translate: 0 calc( -1 * var(--m3) );
	margin-bottom: 0;
}
#form .wrap{
	padding-inline: 0;
	padding-bottom: var(--m8);
}
#form form {
	background: var(--gray);
}
#form .block {
	border-bottom: 2px solid white;
}
#form .block p {
	padding-inline: var(--m);
	font-size: var(--fs20);
	font-weight: bold;
}
#form .block:has([required]) p::after {
	display: inline;
	content: "\FE61";
	color: red;
	font-weight: normal;
} 
#form .input {
	display: flex;
	flex-wrap: wrap;

}
#form label input[type="text"] {
	flex-grow: 1;
	flex-shrink: 1;
	width: 50%;
}
#form [type="submit"] {
	margin-top: calc(var(--m) * 5);
	margin-inline: auto;
	padding-block: 1ic;
	font-size: var(--fs20);
	background-color: var(--sky);
	color: var(--white);
}
#form [type="submit"]:hover {
    background: var(--yellow);
	color: var(--black);
}

@media screen and (min-width: 768px) {
	#form {
		--wrap-width: 1150px;
		--headline-height: min(3.92vw, 55px);
	}
	#form form {
		padding: calc(var(--m) * 3) calc(var(--m) * 2);
	}
	#form .block {
		padding-block: calc(var(--m) * 3);
		display: flex;
	}
	#form .block p {
		flex-shrink: 0;
		width: min(27.14vw, 380px);
	}
	#form .input {
		flex-grow: 1;
		align-items: center;
		gap: var(--m);
	}
}
@media screen and (max-width: 767px) {
	#form h2 {
		width: 70vw;
		padding-inline: var(--m);
	}
	#form  form {
		padding-bottom: var(--m4);
	}
	#form .wrap {
		padding: 0;
	}
	#form .block {
		padding-block: calc(var(--m) * 2);
	}
	#form .block p {
		padding-inline: calc(var(--m) * 2);
		font-size: var(--fs18);
	}
	#form .input {
		padding-top: var(--m);
		padding-inline: calc(var(--m) * 2);
		flex-direction: column;
		row-gap: calc(var(--m) * 1.5);
	}
	#form .input:has([type="checkbox"], [type="radio"]) {
		padding-top: calc(var(--m) * 2);
	}
	#form [type="submit"] {
		margin-top: calc(var(--m) * 2);
		margin-inline: auto;
		padding-block: 1ic;
		font-size: var(--fs18);
	}
}


/*  Thanks
-------------------------------------------------------------------- */
#thanks .wrap{
	padding: var(--m4) 0;
	text-align: center;
}
#thanks h1 {
	font-size: var(--fs25);
}
#thanks p {
	padding-bottom: var(--m);
}
@media screen and (max-width: 767px){
	#thanks .wrap {
		padding: var(--main-padding-inline);
	}
	#thanks p{
		text-align: left;
		padding-bottom: 2rem;
	}
}

/*  Footer
-------------------------------------------------------------------- */
.footer {
    height: 270px;
    background: var(--yellow);

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--black);
    font-size: var(--fs15);
    font-weight: 400;
}

@media screen and (max-width: 767px) {
	.footer {
		height: 32vw;
	}
}


/*  モーダル
-------------------------------------------------------------------- */
.modal {
	width: 100svw;
	height: 100svh;
	background: rgba(0,0,0,.8);

	display: flex;
	justify-content: center;
	align-items: center;

	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;

	opacity: 0;
	pointer-events: none;

	transition: 0.3s 0s ease;
}
.modal.is_active {
	z-index: 1000;
	opacity: 1;
	pointer-events: auto;
}
.modal .block {
	width: 50%;
	background: white;
}
.modal .title {
	text-align: center;
	margin-bottom: var(--m);
}
.modal button.close {
	margin-top: var(--m);
	padding-block: var(--m);
	padding-inline: calc( var(--m) * 2 );
	background: var(--navy);
	margin-inline: auto;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--m);

	color: white;
}

.modal button.close::before {
	display: block;
	content: "✕";
}

@media (hover: hover) {
	.modal button.close {
		transition: 0.2s 0s ease;
	}
	.modal button.close:hover {
		background: black;
	}
}

@media screen and (max-width: 767px) {
	.modal .block {
		width: calc( 100% - var(--m) * 2 );
	}
}