:root{
	--color-primary: #ffad94;
	--color-primary-light: #ffd8cc;
	--color-button: #cc3000;
	--color-title: #403c4e;
	--color-link: #4d1200;
	--color-link-hover: #801e00;
	--max-width: 1032px;
	--image-radius: 0.35rem;
	--size-h2: 2.5em;
	--size-h3: 2em;
	--size-h4: 1.12em;
	--size-body: 1rem;
	--sp-padding: 1rem;
}
@media(width > 1032px){
	:root{
		--sp-padding: 0;
	}
}
@media(width > 768px){
	:root{
		--size-body: 1.125rem;
	}
}
*,*::after,*::before{
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--size-body);
}
.noto-sans-jp-basic {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.merriweather-engnum {
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}
img{
	display: block;
	max-width: 100%;
	vertical-align: middle;
}
a{
	color: var(--color-link);
}
a:hover{
	color: var(--color-link-hover);
}
.max-width{
	max-width: var(--max-width);
	margin-inline: auto;
}
.sp-padding{
	padding-inline: var(--sp-padding);
}
.body-header{
	position: relative;
}
.header-wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 0.5rem;
}
.header-logo{
	width: min(35%, 160px);
}
.contant-buttons{
	display: flex;
	gap: 0.5rem;
}
.btn_request{
	padding: 0.75rem 1rem;
	line-height: 1;
	background: var(--color-button);
	color: hsl(0deg 0% 100%);
	border: 1px solid var(--color-button);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0.375rem;
	display: inline-block;
}
.btn_request:hover{
	background: hsl(0deg 0% 100%);
}
.closing-txt{
	display: grid;
	gap: 1.5rem;
}
.request-icon-links{
	--size-h3: var(--size-h4);
	display: flex;
	gap: 1rem 2rem;
	justify-content: space-around;
	flex-wrap: wrap;
}
.request-icon-links > div{
	text-align: center;
}
.request-icon-links a{
	text-decoration: none;
}
.request-icon-links img{
	width: 100px;
	margin-inline: auto;
}
footer{
	padding: 2em;
}
footer img{
	width: 125px;
}

@media(width < 521px){
	.header-nav{
		display: none;
		padding: 1rem;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		background: hsl(0deg 0% 100%);
		z-index: 1;
	}
	.header-active{
		display: block;
	}
	.header-nav-links{
		display: grid;
		text-align: center;
	}
	.menubutton{
		background: 0;
		appearance: none;
		border: 0;
		font-size: 1.25em;
		color: inherit;
	}
	.menubutton:has(+ .header-active) i::before{
		content: "\f00d";
	}
}
@media(width > 520px){
	.header-nav{
		display: block;
	}
	.menubutton{
		display: none;
	}
}
.content-header{
	padding: 3em 0 0;
}
.content-header-color{
	background: var(--color-primary);
}
.fv-wrapper{
	display: flex;
	gap: 2rem 1rem;
	align-items: center;
	flex-wrap: wrap;
}
.fv-wrapper h1{
	color: var(--color-title);
}
.fv-texts{
	display: grid;
	gap: 1.5rem;
}
.fv-texts span{
	display: inline-block;
}
.fv-image{
	max-height: 270px;
	width: 100%;
	overflow: hidden;
}
.fv-image img{
	width: 100%;
	aspect-ratio: 430 / 390;
	object-fit: cover;
	object-position: 50% 35%;
}
@media(width > 710px){
	.content-header{
		padding: 1rem 0;
	}
	.fv-texts{
		flex: 1 0 5rem;
	}
	.fv-image{
		max-height: 390px;
		width: min(100vw, 430px);
		overflow: hidden;
		border-radius: var(--image-radius);
	}
}
.main-section{
	--_section-padding: 5rem;
	padding-block: var(--_section-padding);
}
@media(width < 745px){
	.main-section:has(.full-img-bottom){
		--_section-padding: 3rem 0;
		--image-radius: 0;
	}
	.main-section:has(.full-img-top){
		--_section-padding: 0 3rem;
		--image-radius: 0;
	}
}
.main-section :is(h2,h3){
	margin-bottom: var(--_title-margin, 0.75em);
	color: var(--color-title);
}
.main-section h2{
	--_title-margin: var(--_title-margin-h2, 0.75em);
	font-size: var(--size-h2);
}
.main-section h3{
	--_title-margin: var(--_title-margin-h3, 0.75em);
	font-size: var(--size-h3);
}
.img-radius{
	border-radius: var(--image-radius);
	overflow: hidden;
}
.flex-content{
	--_content-gap: 1rem;
	margin-top: 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.flex-content > div{
	flex: 1 0 min(16rem, 100%);
	display: grid;
	gap: var(--_content-gap);
}
.img-text{
	--_title-margin-h3: 0;
	--size-h3: 1.2em;
	align-self: start;
}
.icon-titles{
	--_content-gap: 1.5rem;
	--_column-template: 2.5rem 1fr;
	--_column-span: 2 / -1;
	--_column-before-display: flex;
	--_icon-family: "Merriweather", serif;
	--_icon-weight: 600;
	display: grid;
	gap: 1.5rem;
}
.icon-titles-inrow{
	--_column-template: 1fr;
	--_column-span: 1 / -1;
	--_column-before-display: none;
}
.icon-fa{
	--_icon-family: "Font Awesome 6 Free";
	--_icon-weight: 900;
}
.icon-titles > div{
	display: grid;
	grid-template-columns: var(--_column-template);
	gap: 1rem;
}
.icon-titles > div::before{
	content: attr(data-content);
	display: var(--_column-before-display);
	justify-content: center;
	align-items: center;
	font-weight: var(--_icon-weight);
	font-size: 1.5rem;
	font-family: var(--_icon-family);
	width: 100%;
	aspect-ratio: 1;
	background: var(--color-primary-light);
	border-radius: var(--image-radius);
	border: 1px solid var(--color-primary);
	z-index: 5;
}
.icon-titles :is(p, .title){
	grid-column: var(--_column-span);
}
.icon-titles .title{
	font-size: 1.17em;
	font-weight: 700;
	align-self: center;
	line-height: 1;
}
.icon-titles h3.title{
	margin-bottom: 0;
}
.icon-titles-svg{
	width: 45px;
	aspect-ratio: 1;
	color: #4d1200;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.icon-titles-svg svg{
	width: 100%;
	max-height: 100%;
}
.flow-line,
.icon-titles-flow .title{
	position: relative;
	isolation: isolate;
}
.icon-titles-flow .title::before{
	content: "";
	background: var(--color-primary);
	height: 2px;
	width: 2.5rem;
	right: calc(100% + 0.25rem);
	top: calc(50% - 1px);
	position: absolute;
	z-index: -1;
}
.flow-line::before{
	content: "";
	background: var(--color-primary);
	width: 2px;
	height: calc(100% + 2.5rem);
	position: absolute;
	z-index: -1;
	right: calc(50% - 1px);
	top: -1rem;
}
.bg-title-wrapper{
	background: var(--color-primary);
	padding-block: 5rem;
	margin-block: 5rem;
}
.todo-wrapper{
	display: grid;
	gap: 3.5rem;
}
.todo-wrapper h4{
	font-size: 1.12em;
}
.todo-user{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	text-align: center;
}
@media(width > 660px){
	.todo-user{
		grid-template-columns: repeat(3, 1fr);
	}
}
.todo-user ul{
	text-align: left;
	margin-top: 1rem;
}
.todo-user span{
	display: inline-block;
}
.todo-user h4{
	margin-block: 1rem;
}
.todo-img{
	max-width: 230px;
	margin-inline: auto;
}
.todo-admin{
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	align-items: start;
}
.todo-admin > div{
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 3em 1fr;
}
.todo-admin :is(h4,p){
	grid-column: 2 / -1;
}
.todo-admin h4{
	align-self: center;
}
.todo-icon{
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.todo-icon svg{
	width: 100%;
	max-height: 3em;
	color: var(--color-button);
}
.txt-leftline{
	font-weight: 700;
	padding-left: 1em;
	padding-block: 1rem;
	border-left: 4px solid var(--color-primary-light);
	display: grid;
	gap: 1rem;
}
.main-section-bgimg{
	background: var(--_bgimg-url);
	position: relative;
	isolation: isolate;
	background-size: cover;
}
.main-section-bgimg::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--_bgimg-maskcolor);
	z-index: -1;
}
.main-section-reward{
	--color-title: hsl(0deg 0% 100%);
	--_bgimg-url: url('../images/top/bg_reward.webp') center;
	--_bgimg-maskcolor: hsl(0deg 0% 0% / 0.75);
	color: hsl(0deg 0% 100%);
}
.main-section-qa{
	--_bgimg-url: url(../images/top/bg_qa.webp) center;
	--_bgimg-maskcolor: hsl(0deg 0% 100% / 0.75);
}
.main-section-interview{
	--_bgimg-url: url(../images/operation/bg_interview.webp) center;
	--_bgimg-maskcolor: hsl(0deg 0% 100% / 0.75);
}
.bgcolor-primary{
	background: var(--color-primary);
}
.reward-content{
	--size-h3: var(--size-h4);
	display: grid;
	gap: 1.5rem;
	margin-bottom: 1.5em;
}
@media(width > 480px){
	.reward-content{
		grid-template-columns: repeat(3, 1fr);
	}
}
.reward-content > div{
	text-align: center;
}
.reward-content .lrg{
	font-size: 2em;
	font-weight: 700;
}
.reason-wrapper{
	display: grid;
	gap: 2em;
}
.reason-img{
	height: 14em;
}
.reason-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}
.reason-text{
	display: grid;
	gap: 1.5rem;
}
@media(width > 745px){
	.reason-text{
		padding-block: 1.5em;
	}
	.reason-wrapper{
		display: flex;
	}
	.reason-img{
		flex: 0 0 min(435px, 50%);
		height: auto;
	}
	.reason-img img{
		height: 100%;
		object-fit: cover;
		object-position: 65% 50%;
	}
}
.qa-content{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
	gap: 1em;
}
.qa-content > div{
	--size-h3: var(--size-h4);
	padding: 1em;
	border-radius: 0.5em;
	border: 1px solid var(--color-primary);
	background: var(--color-primary-light);
}
.contract-flow{
	--size-h3: 1.2em;
	--_title-margin-h3: 0;
	display: grid;
	gap: 1.5rem;
	align-items: start;
	margin-top: 2rem;
}
@media(width > 665px){
	.contract-flow{
		grid-template-columns: repeat(3, 1fr);
	}
}
.contract-flow > div{
	display: grid;
	gap: 0.75rem;
}
.svg-icon{
	width: 3em;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-button);
}
.svg-icon svg{
	max-height: 100%;
}
.main-section-start{
	--size-h2: var(--size-h3);
}
.arrow-flow{
	--size-h3: 1.2em;
	--_title-margin-h3: 0;
	--_content-gap: 2.5rem;
	align-items: start;
	padding-block: 1rem;
}
.arrow-flow > div{
	display: grid;
	gap: 1rem;
	grid-template-columns: 5em 1fr;
	grid-template-rows: auto 1fr;
}
.arrow-flow :is(h3,p){
	grid-column: 2 / -1;
}
.arrow-flow h3{
	grid-row: 1 / 2;
}
.arrow-flow p{
	grid-row: 2 / -1;
}
.arrow-flow .arrow{
	grid-row: 1 / -1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	isolation: isolate;
	font-size: 1.5em;
	font-family: "Merriweather", serif;
}
.arrow svg{
	overflow: visible;
	position: absolute;
	inset: -1rem 0;
	fill: var(--color-primary-light);
	stroke: var(--color-primary);
	z-index: -1;
	width: 100%;
	height: 100%;
}
.add-animate{
	opacity: 0;
}
.start-animate{
	-webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-7-2 10:19:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(300px);
            transform: translateY(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(300px);
            transform: translateY(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
