@charset "UTF-8";
/* CSS Document */ :root {
	--bg: #F1F1EE;
	--bg-sub: #F8F8F6;
	--text: #212121;
	--sub: #666666;
	--line: #DCDCD7;
	--accent: #CFC8BE;
}
html {
	scroll-behavior: smooth;
}
body {
	max-width: 2000px;
	margin: 0 auto;
	background-color: var(--bg);
	color: var(--text);
	letter-spacing: .1em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-feature-settings: "palt";
	animation: body 1s;
}
@keyframes body {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
main {
	overflow: hidden;
}
.lato {
	font-family: "Lato", sans-serif;
	font-style: normal;
}

.max500 {
		display: none;
	}
@media screen and (max-width: 1200px) {
	.max1200 {
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.max500 {
		display: block;
	}
}


/* ---------------- FV ---------------- */
.FV {
	height: 100vh;
	transition: opacity .5s ease, visibility .5s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	grid-row-gap: min(10vw, 50px);
	position: relative;
	z-index: 1;
}
.FV.is-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	inset: 0;
}
.logo {
	width: 350px;
}
.logo path {
	fill: transparent;
	stroke: #000;
	stroke-width: .3;
}
.FV.is-loaded .logo path {
	animation: svg-anime 3s ease forwards;
	animation-delay: var(--delay);
}
@keyframes svg-anime {
	0% {
		stroke-dasharray: var(--len);
		stroke-dashoffset: var(--len);
	}
	60% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	100% {
		fill: #000;
	}
}
.FV-txt {
	display: grid;
	grid-template-columns: auto 1px auto;
	grid-template-rows: 10px auto auto 10px;
	grid-row-gap: 0;
	grid-column-gap: 40px;
	align-items: center;
}
.FV-txt h1 {
	grid-column: 1 / 2;
	grid-row: 1 / 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: clamp(0.938rem, 0.688rem + 1vw, 1.125rem);
	font-weight: 400;
	line-height: 1.35;
	position: relative;
}

@keyframes line {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.line {
	grid-column: 2 / 3;
	grid-row: 2 / 4;
	background-color: #333;
	width: 1px;
	height: 100%;
	transform-origin: top;
	transform: scaleY(0);
}

.FV.is-loaded .line {
	animation: lineGrow .6s forwards;
	animation-delay: 4.4s;
}

@keyframes lineGrow {
	to {
		transform: scaleY(1);
	}
}
.FV-txt h2 {
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem);
	font-weight: 400;
}
.fv-txt-en {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
.fv-txt-jp {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}
.FV-txt span:not(.line) {
	opacity: 0;
	display: inline-block;
	transform: translateY(10px);
}
.FV.is-loaded .FV-txt span:not(.line) {
	animation: fvTxt .3s forwards;
}
@keyframes fvTxt {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.lang-switch {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 250px;
	width: 100%;
}
.FV-btn {
	display: block;
	width: 40%;
	background-color: transparent;
	padding: 5px 10px;
	border: 1px solid #555;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: var(--text);
	opacity: 0;
	transform: translateY(20px);
	transition: .6s;
}
.FV-btn.is-show {
	opacity: 1;
	transform: translateY(0);
}
#jpBtn:hover, #enBtn:hover {
	background: #555;
	color: #fff;
}
@media screen and (max-width: 500px) {
	.FV {
		padding: 0 5%;
	}
	.logo {
		width: 64%;
	}
	.FV-txt {
		max-width: 348px;
		line-height: 1.5;
		grid-column-gap: 15px;
	}
}
/*-------------------- SCROLL --------------------*/
.scroll {
	position: fixed;
	bottom: 15%;
	left: 5%;
	transform: translateY(10px);
	opacity: 0;
	letter-spacing: .2em;
	font-size: 12px;
	font-family: "Lato", sans-serif;
	font-weight: 300;
}
.scroll.is-show {
	transition: opacity .6s ease;
	opacity: 1;
	z-index: 999;
}
.scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 40px;
	background: #000;
	margin: 10px auto 0;
	animation: scroll 1.5s infinite;
}
@keyframes scroll {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(20px);
		opacity: 0;
	}
}
/*-------------------- section 共通 --------------------*/
section:not(.FV) {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1.5s ease, transform 1.5s ease;
	z-index: 1;
}
section:not(.FV).is-visible {
	transform: translateY(0);
	opacity: 1;
}
.contact {
	height: 0;
}
.jp, .en {
	width: 0;
	height: 0;
	visibility: hidden;
	inset: 0;
}
span.jp, span.en {
	display: none;
}
.jp.is-active, .en.is-active {
	width: auto;
	height: auto;
	visibility: visible;
}
.section.jp.is-active, .section.en.is-active {
	padding: min(15vw, 100px) max(40px, 15vw);
}
.contact.is-visible {
	height: 100%;
	padding: min(15vw, 100px) max(40px, 15vw);
}
span.jp.is-active, span.en.is-active {
	display: inline-block;
}
.section-title-wrap {
	max-width: 240px;
	width: 25%;
}
.section-title {
	padding-bottom: 0.3em;
	font-size: clamp(1.5rem, 1.045rem + 1.45vw, 2.5rem);
	font-family: "Libertinus Serif Display", system-ui;
	font-weight: 400;
	font-style: normal;
	position: relative;
}
.section-title::after {
	content: "";
	display: inline-block;
	width: min(3vw, 30px);
	height: 2px;
	background-color: var(--text);
	position: absolute;
	bottom: 0;
	left: 0;
}
.section-subtitle {
	padding-top: 0.9em;
	font-size: clamp(0.813rem, 0.67rem + 0.45vw, 1.125rem);
	font-weight: 400;
}
.section-desc {
	margin-top: 1.8em;
	line-height: 1.5;
	font-size: clamp(0.875rem, 0.818rem + 0.18vw, 1rem);
}
.section-note {
	display: block;
	font-size: clamp(0.625rem, 0.54rem + 0.27vw, 0.813rem);
}
.list {
	width: 67%;
	display: flex;
	column-gap: 5%;
	position: relative;
}
.list::before, .list::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 90%;
	background-color: var(--text);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.list::before {
	left: 32.5%;
}
.list::after {
	left: 67.5%;
}
.list-item {
	width: calc((100% - 10%) / 3);
	padding: 0 0.5em;
	line-height: 1.6;
}
@media screen and (max-width: 1200px) {
	section:not(.FV) {
		flex-direction: column;
		grid-row-gap: min(7vw, 50px)
	}
	.section.jp.is-active, .section.en.is-active {
		padding: min(12vw, 100px) max(40px, 15vw);
	}
	.contact.is-visible {
		padding: min(12vw, 100px) max(40px, 15vw);
	}
	.section-title-wrap {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}
	.list {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	.section.jp.is-active, .section.en.is-active {
	padding: min(17vw, 100px) max(40px, 10vw);
}
.contact.is-visible {
	height: 100%;
	padding: min(17vw, 100px) max(40px, 10vw);
}
	.list {
		column-gap: 0;
		flex-direction: column;
		grid-row-gap: min(7vw, 30px);
	}
	.list::before, .list::after {
		display: none;
	}
	.list-item {
		width: 100%;
	}
}
/*-------------------- top --------------------*/
.top {
	background-image: url("../img/img_fv.webp");
	background-repeat: no-repeat;
	background-position: 80%;
	background-size: contain;
	background-color: var(--bg);
}
.top-txt {
	margin: min(10vw, 80px) 0 min(6vw, 50px);
}
.top-txt-main {
	margin-bottom: min(3vw, 30px);
	font-family: "Libertinus Serif Display", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(2.25rem, 1.227rem + 3.27vw, 4.5rem);
}
.top-txt-main span {
	display: block;
	line-height: 1;
}
.top-txt-jp {
	font-size: 16px;
	font-weight: 500;
}
.top-txt-name {
	margin-top: min(3vw, 30px);
	font-weight: 400;
}
@media screen and (max-width: 1200px) {
	.top {
		background-position: 100%;
	}
}
@media screen and (max-width: 950px) {
	.top {
		background-position: 170%;
		background-size: auto 100%;
		position: relative;
	}
	.top::after {
		content: "";
		background-image: linear-gradient(90deg, rgba(241, 241, 238, 1)70%, rgba(241, 241, 238, 0)100%);
		width: 50%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
}
@media screen and (max-width: 650px) {
	.section.top.jp.is-active, .section.top.en.is-active {
		padding: min(29vw, 170px) max(40px, 10vw);
		background-position: 100%;
	}
	.top::after {
		width: 63%;
	}
	.top-txt-jp {
	font-weight: 400;
}
}
/*-------------------- what i do --------------------*/
.service {
	background-color: var(--bg-sub);
	counter-reset: number 0;
}
.service-item {
	display: flex;
	align-items: center;
	flex-direction: column;
	grid-row-gap: min(3vw, 20px);
}
.service-item::before {
	counter-increment: number 1;
	content: "0"counter(number);
	font-size: clamp(1.25rem, 1.136rem + 0.36vw, 1.5rem);
	font-family: "Lato", sans-serif;
	line-height: 1.25;
	order: 2;
}
.service-item::after {
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	order: 1;
}
.service-item:first-child::after {
	background-image: url("../img/icon_service1.svg");
	aspect-ratio: 227 / 150;
	width: min(10vw, 80px);
}
.service-item:nth-child(2)::after {
	background-image: url("../img/icon_service2.svg");
	aspect-ratio: 184 / 150;
	width: min(8vw, 64px);
}
.service-item:last-child::after {
	background-image: url("../img/icon_service3.svg");
	aspect-ratio: 150 / 150;
	width: min(7vw, 52px);
}
.service-item h3 {
	font-size: clamp(1rem, 0.886rem + 0.36vw, 1.25rem);
	text-align: center;
	font-weight: 500;
	line-height: 1.25;
	order: 3;
}
.service-item p {
	font-size: clamp(0.875rem, 0.818rem + 0.18vw, 1rem);
	order: 4;
}
/*------------works------------*/
section.works {
	align-items: center;
}
.works-item {
	text-align: center;
}
.works-item-number {
	font-size: clamp(2.25rem, 1.227rem + 3.27vw, 4.5rem);
	font-family: "Libertinus Serif Display", system-ui;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
}
.works-item-span {
	display: block;
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem);
}
.works-item-list-item {
	margin-bottom: min(2vw, 15px);
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem);
}
.works-item-list-item:last-child {
	margin: 0;
}
@media screen and (max-width: 768px) {
	.works-list {
		column-gap: 5%;
		flex-direction: row;
		grid-row-gap: min(4vw, 30px);
	}
	.works-list::before, .works-list::after {
		display: inline-block;
	}
	.works-item {
		padding: 0;
		width: calc((100% - 10%) / 3);
	}
}


@media screen and (max-width: 680px) {
	.works-list {
		column-gap: 0;
		flex-direction: column;
		grid-row-gap: 0;
	}
	
	.works-list::before, .works-list::after {
		display: none;
	}
	
	.works-item {
		width: min(60vw, 235px);
		border-bottom: 1px solid var(--text);
		padding: min(4vw, 30px) 0;
		margin: 0 auto;
	}
	.works-item:last-child {
		border: none;
	}
}

/*------------asked------------*/
.asked {
	background-color: var(--bg-sub);
	counter-reset: number 0;
}
.asked-list {
	width: 67%;
}
.asked-item {
	border-bottom: 1px solid var(--text);
	padding: min(3vw, 20px) 0;
}
.asked-q {
	display: grid;
	grid-template-columns: 10% auto 10%;
	list-style: none;
}
.asked-q::-webkit-details-marker {
	display: none;
}
.asked-q::before {
	counter-increment: number 1;
	content: "0"counter(number);
	font-size: clamp(1.25rem, 1.136rem + 0.36vw, 1.5rem);
	font-family: "Lato", sans-serif;
}
.asked-item.js-open .asked-q {
	margin-bottom: min(2vw, 10px);
}
.asked-q {
	font-size: clamp(0.875rem, 0.542rem + 1.33vw, 1.125rem);
	font-weight: 500;
}
.open {
	position: relative;
}
.open::before, .open::after {
	content: "";
	display: inline-block;
	background-color: var(--text);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.open::before {
	width: 15px;
	height: 1px;
}
.open::after {
	width: 1px;
	height: 15px;
	transition: .5s all;
}
.asked-item.js-open .open::after {
	transform: translateY(-50%) rotate(90deg);
}
.asked-answer {
	height: 0;
	opacity: 0;
	transition: 1s ease;
	padding: 0 10%;
}
.asked-item.js-open .asked-answer {
	height: auto;
	opacity: 1;
}
.asked-answer {
	font-size: clamp(0.875rem, 0.818rem + 0.18vw, 1rem);
	overflow: hidden;
}
@media screen and (max-width: 1200px) {
	.asked-list {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	.asked-q {
	font-weight: 400;
}
}
/*------------important------------*/
.important-list::before, .important-list::after {
	height: 70%;
}
.important-item {
	display: grid;
	grid-template-rows: min(7vw, 70px) clamp(1rem, 0.886rem + 0.36vw, 1.25rem) auto;
	align-items: center;
	grid-row-gap: min(3vw, 20px);
	place-items: center;
}
.important-item::before {
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	width: min(9vw, 70px);
}
.important-item:first-child::before {
	background-image: url("../img/icon_important1.svg");
	aspect-ratio: 32 / 23;
}
.important-item:nth-child(2)::before {
	background-image: url("../img/icon_important2.svg");
	aspect-ratio: 28 / 23;
}
.important-item:last-child::before {
	background-image: url("../img/icon_important3.svg");
	aspect-ratio: 32 / 37;
}
.important-item h3 {
	font-size: clamp(1rem, 0.886rem + 0.36vw, 1.25rem);
	font-weight: 500;
}
.important-item p {
	align-self: flex-start;
	font-size: clamp(0.875rem, 0.818rem + 0.18vw, 1rem);
}
/*------------behind------------*/
.behind {
	background-color: var(--bg-sub);
	background-image: url("../img/img_who.webp");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right;
	justify-content: flex-start !important;
	column-gap: 12%;
	position: relative;
	z-index: 1;
}
.behind::after {
	content: "";
	background-image: linear-gradient(90deg, rgba(248, 248, 246, 1)70%, rgba(248, 248, 246, 0)100%);
	width: 40%;
	height: 100%;
	position: absolute;
	left: 30%;
	top: 0;
	z-index: -1;
}
.behind-wrap {
	width: 37%;
}
.behind-desc {
	margin-top: min(4vw, 30px);
	line-height: 1.6;
	font-size: clamp(0.875rem, 0.818rem + 0.18vw, 1rem);
}
@media screen and (max-width: 1200px) {
	.behind {
		column-gap: 0;
	}
	.behind::after {
		width: 70%;
		left: 0;
	}
	.behind-wrap {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}
	.behind-desc {
		max-width: 500px;
		width: 60%;
		text-align: justify;
	}
}

@media screen and (max-width: 650px) {
	.behind::after {
	background-image: linear-gradient(90deg, rgba(248, 248, 246, 1)40%, rgba(248, 248, 246, 0)100%);
	width: 100%;
}
	.behind-desc {
		width: 70%;
	}
}

@media screen and (max-width: 500px) {
	.behind::after {
	background-image: linear-gradient(90deg, rgba(248, 248, 246, .95)40%, rgba(248, 248, 246, .6)100%);
	width: 100%;
}
	.behind-desc {
		width: 100%;
	}
}

/*------------contact------------*/
.contact-form {
	width: 67%;
}
.contact-form-item + .contact-form-item {
	margin-top: 32px;
}
.checkbox-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: min(4vw, 30px);
	align-items: center;
}
.contact-form label, .contact-form-label {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem);
	font-weight: 700;
}
.contact-form input, .contact-form textarea {
	width: 100%;
	padding: 16px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem)
}
.contact-form textarea {
	resize: vertical;
}
.required {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: var(--text);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.contact-form .checkbox-item .checkbox {
	width: auto;
	margin-top: 12px;
	font-weight: 400;
	cursor: pointer;
}
.checkbox input {
	width: auto;
}
.contact-form-button {
	display: block;
	width: 100%;
	margin-top: 2em;
	padding: 0.75em 1em;
	border: none;
	border-radius: 999px;
	background: var(--text);
	color: #fff;
	font-size: clamp(0.875rem, 0.708rem + 0.67vw, 1rem);
	font-weight: 700;
	cursor: pointer;
	transition: opacity .3s;
}
.contact-form-button:hover {
	opacity: .7;
}
@media screen and (max-width: 1200px) {
	.contact-form {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 500px) {
	.contact-form .checkbox-item .checkbox {
	margin-top: 0;
}
}
/*-------floating------------*/
.floating-btn {
	position: fixed;
	bottom: 5%;
	right: 3%;
	opacity: 0;
	transform: translateY(10px);
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(10vw, 60px);
	height: min(10vw, 60px);
	padding: 2px 2px 0 0;
	margin: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .5);
	border: 1px solid #565656;
	z-index: 999;
}
.floating-btn.is-show {
	transition: opacity .6s ease;
	opacity: 1;
}
.floating-btn span {
	display: block;
	width: 60%;
	background-image: url("../img/icon-mail.svg");
	background-repeat: no-repeat;
	opacity: .8;
	aspect-ratio: 1 / 1;
}


/*-----------thanks------------------*/
.thanks{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:80px 20px;
	text-align:center;
}

.thanks-inner{
	max-width:600px;
	width:100%;
}

.thanks-title{
	font-size:clamp(3rem,6vw,6rem);
	font-weight:300;
	line-height:1;
	margin-bottom:24px;
}

.thanks-subtitle{
	font-size:1.6rem;
	margin-bottom:40px;
}

.thanks-text{
	line-height:2;
	margin-bottom:48px;
}

.thanks-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:56px;
	color: #fff;
	background-color: #000;
	text-decoration:none;
	transition:.3s;
}

.thanks-btn:hover{
	background:#444;
	color:#fff;
}