@charset "utf-8";

/* --------------------------------------------------
   header
   -------------------------------------------------- */
.l-header {
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	text-align: center;
	background: white;
}
body.is-loading .l-header {
	transform: translateY(-100%);
}
.l-header.is-anim {
	transition: transform 1s .3s var(--easeOut);
}
.logo {
	padding: 12px;
	line-height: 0;
}
.logo a {
	height: 40px;
	display: inline-block;
	color: var(--c-co);
}
.logo .co {
	width: auto;
	height: 100%;
}
@media screen and (max-width: 480px) {
	.l-header {
		height: 48px;
	}
	.logo {
		padding: 8px;
	}
	.logo a {
		height: 32px;
	}
}

/* --------------------------------------------------
   footer
   -------------------------------------------------- */
.l-footer {
	z-index: 2;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	text-align: right;
}
.copyright {
	display: inline-block;
	padding: 24px 40px;
	color: white;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(34,24,21,.2);
}

/* --------------------------------------------------
   main
   -------------------------------------------------- */
.l-main {
	z-index: 2;
	position: relative;
	overflow: hidden;
	padding-top: 100vh;
	padding-bottom: calc(100vh - 64px);
	font-feature-settings: "palt";
}
section {
	padding: 64px 0 96px;
	background: var(--c-white);
}
.content {
	z-index: 1;
	position: relative;
	margin: 32px auto 0;
	padding: 0 24px;
}
@media screen and (max-width: 480px) {
	.l-main {
		padding-bottom: calc(100vh - 48px);
	}
}

/* --------------------------------------------------
   CONCEPT
   -------------------------------------------------- */
.p-concept {
	position: relative;
	background: none;
}
.p-concept::before,
.p-concept::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96px;
	background: var(--c-white);
}
.p-concept::before {
	top: 0;
	height: calc(64px + 108px + 32px);
}
.p-concept::after {
	bottom: 0;
	height: 96px;
}
.p-concept .content {
	z-index: unset;
	position: relative;
	padding: 64px 24px;
}
.p-concept .message {
	z-index: 1;
	position: relative;
	width: 100%;
	color: white;
	font-size: 18px;
	line-height: 2.4;
	text-align: center;
}
.p-concept .message .co {
	width: auto;
	height: 1em;
	vertical-align: text-bottom;
}
.p-concept .bg {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(18,28,61,.2);
}
.p-concept .bg * {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 480px) {
	.p-concept::before {
		height: calc(64px + 84px + 32px);
	}
	.p-concept .message {
		font-size: calc(18vw / 4.8);
	}
}

/* --------------------------------------------------
   ABOUT
   -------------------------------------------------- */
.p-about .content {
	max-width: 1048px;
}
.member:nth-child(2) {
	margin-top: 64px;
}
@media screen and (min-width: 481px) {
	.member {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.member .photo {
		align-self: flex-start;
		flex-basis: 200px;
	}
	.member .profile {
		flex-basis: calc(100% - 232px);
		margin-left: 32px;
	}
}
@media screen and (min-width: 768px) {
	.member:nth-child(1) {
		max-width: calc(76%);
	}
	.member:nth-child(2) {
		margin-left: 24%;
	}
	.member .photo {
		flex-basis: 240px;
	}
	.member .profile {
		flex-basis: calc(100% - 280px);
		margin-left: 40px;
	}
}
@media screen and (max-width: 480px) {
	.p-about .photo {
		position: relative;
		margin-right: -24px;
		margin-left: -24px;
	}
	.p-about .photo::before,
	.p-about .photo::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.p-about .photo::before {
		background: var(--c-white);
	}
	.p-about .photo::after {
		opacity: .6;
		background: center / cover no-repeat;
	}
	.p-about .spacer {
		z-index: 1;
		position: relative;
		text-align: center;
	}
	.p-about .photo img {
		max-width: 240px;
	}
	.p-about .profile {
		margin-top: 24px;
	}
}

/* :::::: link :::::: */
.p-about .spacer {
	color: white;
	font-size: 10px;
}
.p-about .spacer .bg {
	overflow: hidden;
}
.p-about .spacer .bg,
.p-about .spacer .bg::before,
.p-about .spacer .bg::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.p-about .spacer .bg::before,
.p-about .spacer .bg::after {
	content: "";
}
.p-about .spacer .bg::before { opacity: .4; }
.p-about .spacer .bg::after { opacity: .8; }
.p-about .spacer .c {
	position: absolute;
	left: calc(50% - 25px);
	width: 50px;
	height: 50px;
	fill: currentcolor;
}
.p-about .spacer::after {
	content: attr(href);
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
/* before */
.p-about .spacer:not(.is-hov) .bg::before,
.p-about .spacer:not(.is-hov) .bg::after {
	transform: translateY(-100%);
}
/* after */
.p-about .spacer.is-anim:not(.is-hov) .bg::before,
.p-about .spacer.is-anim:not(.is-hov) .bg::after {
	transform: translateY(100%);
}
/* timing */
.p-about .spacer.is-anim .bg::before,
.p-about .spacer.is-anim .bg::after {
	transition: transform .6s var(--easeOut);
}
.p-about .spacer.is-anim .c {
	transition: opacity .6s, transform .6s var(--easeOut);
}
.p-about .spacer.is-anim::after {
	transition: opacity .6s, transform .6s var(--easeOut);
}
/* enter */
.p-about .spacer.is-anim.is-hov .bg::after { transition-delay: .1s; }
/* leave */
.p-about .spacer.is-anim:not(.is-hov) .bg::before,
.p-about .spacer.is-anim:not(.is-hov) .bg::after { transition-duration: .3s; }
.p-about .spacer.is-anim:not(.is-hov) .bg::before { transition-delay: .06s; }

/* :::::: photo :::::: */
.photo .spacer {
	display: block;
}
.photo img {
	vertical-align: middle;
}
@media screen and (min-width: 481px) {
	.photo .spacer {
		position: relative;
		height: 0;
		padding-bottom: 100%;
	}
	.photo img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}
}
.member.-flat .spacer .bg::before,
.member.-flat .spacer .bg::after { background: #4dbbaa; }
.member.-flat .spacer .c { top: calc(50% - 25px - 10px); }
.member.-flat .spacer::after { top: calc(50% + 10px); }
.member.-lopan .spacer .bg::before,
.member.-lopan .spacer .bg::after { background: #683969; }
.member.-lopan .spacer .c { top: calc(50% - 25px - 13px); }
.member.-lopan .spacer::after { top: calc(50% + 13px); }
.address .spacer .bg::before,
.address .spacer .bg::after { background: #121c3d; }
.address .spacer .c { top: calc(50% - 25px - 14px); }
.address .spacer::after { top: calc(50% + 14px); }
@media screen and (max-width: 480px) {
	.member.-flat .photo::before { background: #4dbbaa; }
	.member.-lopan .photo::before { background: #683969; }
	.address .photo::before { background: #121c3d; }
	.member.-flat .photo::after { background-image: url(../img/sato.jpg); }
	.member.-lopan .photo::after { background-image: url(../img/kimura.jpg); }
	.address .photo::after { background-image: url(../img/co-lab.jpg); }
}
/* before */
.p-about .photo .spacer:not(.is-hov) .c,
.p-about .photo .spacer:not(.is-hov)::after {
	opacity: 0;
	transform: translateY(-8px);
}
/* after */
.p-about .photo .spacer.is-anim:not(.is-hov) .c,
.p-about .photo .spacer.is-anim:not(.is-hov)::after {
	transform: translateY(8px);
}
/* enter */
.p-about .photo .spacer.is-anim.is-hov .c { transition-delay: .1s; }
.p-about .photo .spacer.is-anim.is-hov::after { transition-delay: .2s; }
/* leave */
.p-about .photo .spacer.is-anim:not(.is-hov) .c,
.p-about .photo .spacer.is-anim:not(.is-hov)::after { transition-duration: .3s; }

/* :::::: profile :::::: */
.profile {
	font-size: 14px;
}
.profile .name {
	padding-top: 11px;
	font-size: 24px;
}
.profile .name rt {
	margin-bottom: 8px;
	font-size: 11px;
	text-align: left;
	transform: translateY(-8px);
}
.profile .skill ul {
	display: flex;
	flex-wrap: wrap;
}
.profile .skill li:not(:first-child)::before {
	content: "/";
	margin: .3em;
}
.profile .summary {
	margin-top: 16px;
}
.profile .sns {
	display: flex;
	margin-top: 16px;
	line-height: 1;
}
.profile .sns a {
	display: block;
}
.profile .sns a:not(:first-child) {
	margin-left: 20px;
}
.profile .sns .c {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
.profile .sns .tw { fill: #1da1f2; }
.profile .sns .ig { fill: url(#instaGrad); }
.profile .sns .fb { fill: #1877f2; }
@media screen and (max-width: 374px) {
	.profile {
		font-size: 12px;
	}
}

/* :::::: address :::::: */
.address {
	margin-top: 64px;
}
@media screen and (min-width: 481px) {
	.address .photo {
		position: relative;
		max-width: 200px;
	}
	.address .spacer {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.address .profile {
		padding-left: 232px;
	}
}
@media screen and (min-width: 768px) {
	.address .photo {
		max-width: 240px;
	}
	.address .profile {
		padding-left: 280px;
	}
}

.l-map {
	position: relative;
	height: 280px;
	margin-top: 16px;
}
.l-map .container {
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 1048px) {
	.l-map {
		margin-right: -24px;
		margin-left: -24px;
	}
}
@media screen and (min-width: 1049px) {
	.l-map {
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}
}

/* --------------------------------------------------
   WORKS
   -------------------------------------------------- */
.p-works {
	background: none;
}
.p-works .content {
	margin-top: 16px;
	text-align: center;
}
.p-works .content p {
	position: absolute;
	top: calc(50% - .85em);
	left: 0;
	width: 100%;
}
.p-works .cloud {
	overflow: visible;
	max-width: 100%;
	height: auto;
	fill: var(--c-white);
	/*stroke: var(--c-co);*/
}
.p-works .cloud circle {
	animation: floatCloud 2s linear infinite;
}
.p-works .cloud .c3,
.p-works .cloud .c4,
.p-works .cloud .c5,
.p-works .cloud .c6,
.p-works .cloud .c15 { animation-duration: 4s; }
.p-works .cloud .c1,
.p-works .cloud .c2,
.p-works .cloud .c12,
.p-works .cloud .c16,
.p-works .cloud .c13,
.p-works .cloud .c14 { animation-duration: 6s; }
.p-works .cloud .c4,
.p-works .cloud .c5,
.p-works .cloud .c8,
.p-works .cloud .c9,
.p-works .cloud .c10,
.p-works .cloud .c12 { animation-direction: reverse; }
.p-works .cloud .c12,
.p-works .cloud .c13 {
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
.p-works .cloud .c16 { animation: none; }
.p-works .cloud .c1 { transform-origin: 276px 106px; }
.p-works .cloud .c2 { transform-origin: 719px 127px; }
.p-works .cloud .c3 { transform-origin: 75px 182px; }
.p-works .cloud .c4 { transform-origin: 302px 265px; }
.p-works .cloud .c5 { transform-origin: 498px 104px; }
.p-works .cloud .c6 { transform-origin: 501px 273px; }
.p-works .cloud .c7 { transform-origin: 391px 106px; }
.p-works .cloud .c8 { transform-origin: 608px 100px; }
.p-works .cloud .c9 { transform-origin: 919px 127px; }
.p-works .cloud .c10 { transform-origin: 103px 260px; }
.p-works .cloud .c11 { transform-origin: 932px 212px; }
.p-works .cloud .c12 { transform-origin: 792px 191px; }
.p-works .cloud .c13 { transform-origin: 208px 182px; }
.p-works .cloud .c14 { transform-origin: 657px 253px; }
.p-works .cloud .c15 { transform-origin: 400px 236px; }
.p-works .cloud .c16 { transform-origin: 503px 191px; }
@keyframes floatCloud {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------
   CONTACT
   -------------------------------------------------- */
.p-contact .content {
	max-width: calc(480px + 48px);
	text-align: center;
}
.input {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	max-width: 768px;
	margin: 0 auto;
	text-align: left;
}
.input_item {
	flex-basis: 100%;
}
.input_item:nth-child(n+2) {
	margin-top: 16px;
}
.input_item.half {
	flex-basis: calc(50% - 8px);
}
.input label {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.6;
}
.input .req {
	position: relative;
	top: -.1em;
	margin-left: 1em;
	padding: 4px 8px;
	border-radius: 4px;
	color: #fff;
	font-size: 10px;
	vertical-align: middle;
	background: var(--c-co);
}
.input .note {
	display: block;
	margin-top: 4px;
	color: darkgray;
	font-size: 12px;
	line-height: 1.6;
	text-align: right;
}
@media screen and (max-width: 374px) {
	.input label {
		font-size: 12px;
	}
	.input .note {
		font-size: 10px;
	}
}

/* :::::: form :::::: */
form input[type="text"],
form input[type="email"],
form select,
form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	border: 1px solid gainsboro;
	border-radius: 4px;
	color: var(--c-black);
	line-height: 1.6;
	vertical-align: middle;
	background: #fafafa;
}
form input[type="text"]:disabled,
form input[type="email"]:disabled,
form select:disabled,
form textarea:disabled {
	background: gainsboro;
}
form input[type="text"],
form input[type="email"],
form select {
	height: 64px;
	padding: 0 1em;
}
form textarea {
	padding: 1em;
}
form [data-error] {
	position: relative;
}
form [data-error]::after {
	content: attr(data-error);
	pointer-events: none;
	position: absolute;
	top: calc(32px - .75em);
	right: 1em;
	color: var(--c-co);
	font-size: .8em;
	line-height: 1.6;
}
form [data-error] input,
form [data-error] select,
form [data-error] textarea {
	border-color: var(--c-co);
	background: #e7f2f8;
}
.submit {
	cursor: pointer;
	min-width: 288px;
	margin-top: 48px;
	padding: 1em;
	border-radius: 32px;
	color: #fff;
	background: var(--c-co);
}
.submit:disabled {
	background: gainsboro;
}
@media screen and (max-width: 480px) {
	form input[type="text"],
	form input[type="email"],
	form select {
		height: 48px;
	}
	form [data-error]::after {
		top: calc(24px - .75em);
	}
}
@media screen and (max-width: 374px) {
	.submit {
		width: 100%;
		min-width: 240px;
	}
}

/* :::::: thanks / error :::::: */
.p-contact form {
	position: relative;
}
.p-contact form.is-error {
	cursor: pointer;
}
.p-contact form::after {
	content: "";
	pointer-events: none;
	position: absolute;
	top: -16px;
	right: -16px;
	bottom: -16px;
	left: -16px;
	border-radius: 8px;
	opacity: 0;
	transform-origin: 50% 100%;
	transform: scaleY(0);
	background: rgba(246,245,244,.8);
}
.p-contact form.is-error::after,
.p-contact form.is-sended::after {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}
.p-contact form.is-sended::after {
	background: rgba(134,192,222,.8);
}
.p-contact form.is-anim::after {
	transition: opacity .6s, transform .6s var(--easeInOut);
}
.p-contact form .error,
.p-contact form .thanks {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.p-contact form .thanks {
	color: var(--c-white);
}
.p-contact form .thanks b {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 18px;
}
.p-contact form .error.is-hide {
	opacity: 0;
}
.p-contact form .error.is-anim {
	transition: opacity .6s;
}

/* --------------------------------------------------
   title
   -------------------------------------------------- */
.title {
	display: block;
	z-index: 1;
	position: relative;
	width: 360px;
	max-width: 100%;
	margin: 0 auto;
}
.title .spacer {
	display: block;
	position: relative;
	height: 0;
	padding-bottom: 30%;
}
.title svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	vertical-align: middle;
}
@media screen and (max-width: 480px) {
	.title {
		width: 280px;
	}
}

/* :::::: concept :::::: */
.title_concept path { fill: url(#gra1); }
.title_concept .concept_n { fill: url(#gra2); }
.title_concept .concept_p { fill: url(#gra3); }
.title_concept path { transform-origin: 100% 100%; }
.p-concept .title:not(.in-view) .c {
	opacity: 0;
	transform: scale(.6);
}
.p-concept .title.in-view .c {
	--n: .06;
	transition: opacity .4s, transform .6s;
	transition-timing-function: ease, cubic-bezier(0.075, 0.82, 0.165, 1);
}
.p-concept .title.in-view .concept_c1 { transition-delay: calc(var(--n) * 1s); }
.p-concept .title.in-view .concept_o { transition-delay: calc(var(--n) * 2s); }
.p-concept .title.in-view .concept_n { transition-delay: calc(var(--n) * 3s); }
.p-concept .title.in-view .concept_c2 { transition-delay: calc(var(--n) * 4s); }
.p-concept .title.in-view .concept_e { transition-delay: calc(var(--n) * 5s); }
.p-concept .title.in-view .concept_p { transition-delay: calc(var(--n) * 6s); }
.p-concept .title.in-view .concept_t { transition-delay: calc(var(--n) * 7s); }

/* :::::: about :::::: */
.title_about .white { fill: #fff; }
.title_about .purple,
.title_about .eye { fill: #79519d; }
.title_about .pink { fill: #e95e85; }
.title_about .about_a .pink { transform-origin: 16% 0; }
.title_about .about_t .pink { transform-origin: 0 28%; }
.p-about .title:not(.in-view) .c {
	opacity: 0;
	translateY(80px) scaleY(.3);
}
.p-about .title.in-view .c {
	animation: aboutTitle .6s both;
}
.p-about .title.in-view .about_t {
	animation-name: aboutTitleS;
}
.p-about .title.in-view .about_a { animation-delay: .1s; }
.p-about .title.in-view .about_b { animation-delay: .2s; }
.p-about .title.in-view .about_o { animation-delay: .3s; }
.p-about .title.in-view .about_u { animation-delay: .4s; }
.p-about .title.in-view .about_t { animation-delay: .5s; }

.p-about .title:not(.in-view) .eye,
.p-about .title:not(.in-view) .about_star path,
.p-about .title:not(.in-view) .about_a .pink,
.p-about .title:not(.in-view) .about_t .pink { opacity: 0; }
.p-about .title:not(.in-view) .eye { transform: translate(-2px, 3px); }
.p-about .title:not(.in-view) .about_star path { transform: translate(12px, -12px); }
.p-about .title:not(.in-view) .about_a .pink { transform: scaleX(.3); }
.p-about .title:not(.in-view) .about_t .pink { transform: scaleY(.3); }
.p-about .title.in-view .eye,
.p-about .title.in-view .about_star path {
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-about .title.in-view .about_a .pink,
.p-about .title.in-view .about_t .pink {
	transition: opacity .1s, transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-about .title.in-view .eye { transition-delay: 0s, 1s; }
.p-about .title.in-view .about_star .s1 { transition-delay: .4s; }
.p-about .title.in-view .about_star .s2 { transition-delay: .5s; }
.p-about .title.in-view .about_star .s3 { transition-delay: .6s; }
.p-about .title.in-view .about_star .s4 { transition-delay: .7s; }
.p-about .title.in-view .about_star .s5 { transition-delay: .8s; }
.p-about .title.in-view .about_a .pink { transition-delay: .7s; }
.p-about .title.in-view .about_t .pink { transition-delay: .9s; }
@keyframes aboutTitle {
	0% { transform: translateY(80px) scaleY(.3); opacity: 0; }
	20% { transform: translateY(0) scaleY(1); opacity: 1; }
	40% { transform: translateY(56px) scaleY(.5); }
	60% { transform: translateY(-12px) scaleY(1.1); }
	80% { transform: translateY(8px) scaleY(.94); }
	90% { transform: translateY(-2px) scaleY(1.02); }
	100% { transform: translateY(0) scaleY(1); }
}
@keyframes aboutTitleS {
	0% { transform: translateY(40px) scaleY(.6); opacity: 0; }
	20% { transform: translateY(0) scaleY(1); opacity: 1; }
	40% { transform: translateY(24px) scaleY(.8); }
	60% { transform: translateY(-8px) scaleY(1.1); }
	80% { transform: translateY(4px) scaleY(.94); }
	90% { transform: translateY(-2px) scaleY(1.02); }
	100% { transform: translateY(0) scaleY(1); }
}

/* :::::: works :::::: */
.title_works .red,
.title_works .eye { fill: #e7380d; }
.title_works .blue { fill: #00acbe; }
.title_works .white { fill: #fff; }
.title_works .works_o { clip-path: url(#clip); }
.title_works .works_w .red { transform-origin: 25.5% 50%; }
.title_works .works_r .blue { transform-origin: 48% 72.5%; }
.title_works .works_r .r2 { transform-origin: 52.5% 50%; }
.title_works .works_r .white { transform-origin: 50% 37%; }
.title_works .works_k .k1 { transform-origin: 50% 72.5%; }
.title_works .works_k .k2 { transform-origin: 65.5% 50%; }
.p-works .title:not(.in-view) .c {
	opacity: 0;
}
.p-works .title:not(.in-view) .works_w .w2 { transform: scaleY(.1); }
.p-works .title:not(.in-view) .works_w .w3 { transform: rotateY(-180deg); }
.p-works .title:not(.in-view) .works_o .blue { transform: translateX(-56px); }
.p-works .title:not(.in-view) .works_r .blue { transform: scaleY(.1); }
.p-works .title:not(.in-view) .works_r .r2 { transform: rotateY(-90deg); }
.p-works .title:not(.in-view) .works_r .white { transform: scaleY(0) rotate(10deg); }
.p-works .title:not(.in-view) .works_k .k1 { transform: scaleY(.1); }
.p-works .title:not(.in-view) .works_k .k2 { transform: rotateY(-90deg); }
.p-works .title:not(.in-view) .works_s .red { transform: translate(-12px, 12px); }
.p-works .title:not(.in-view) .works_s .blue { transform: translate(12px, -12px); }
.p-works .title.in-view .c {
	transition: opacity .3s;
}

.p-works .title.in-view .c > *,
.p-works .title.in-view .white {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: inherit;
}
.p-works .title.in-view .works_o .blue { transition-duration: .8s; }
.p-works .title.in-view .works_r .white { transition-duration: .2s; }
.p-works .title.in-view .works_w .w2,
.p-works .title.in-view .works_r .blue,
.p-works .title.in-view .works_k .red,
.p-works .title.in-view .works_s path {
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-works .title.in-view .works_w { transition-delay: .1s; }
.p-works .title.in-view .works_o { transition-delay: .3s; }
.p-works .title.in-view .works_r { transition-delay: .5s; }
.p-works .title.in-view .works_k { transition-delay: .7s; }
.p-works .title.in-view .works_s { transition-delay: .9s; }
.p-works .title.in-view .works_w .w2 { transition-delay: .4s; }
.p-works .title.in-view .works_w .w3 { transition-delay: .2s; }
.p-works .title.in-view .works_r .r2 { transition-delay: .6s; }
.p-works .title.in-view .works_r .white { transition-delay: 1.1s; }
.p-works .title.in-view .works_k .k2 { transition-delay: .8s; }
.p-works .title.in-view .works_s path { transition-delay: 1.1s; }

/* :::::: contact :::::: */
.title_contact path { fill: #42b04b; }
.title_contact .c { transform-origin: 50% 65%; }
.title_contact .contact_line { transform-origin: 6% 0; }
.p-contact .title:not(.in-view) .c {
	opacity: 0;
	transform: scaleY(.1);
}
.p-contact .title:not(.in-view) .contact_line {
	transform: scaleX(.1);
}
.p-contact .title:not(.in-view) .contact_a path {
	opacity: 0;
}
.p-contact .title.in-view .c {
	--n: .096;
	transition: opacity .3s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-contact .title.in-view .contact_a .c {
	transition: opacity .1s;
}
.p-contact .title.in-view .contact_line {
	transition-duration: .3s, .6s;
}
.p-contact .title.in-view .contact_c1 { transition-delay: calc(var(--n) * 1s); }
.p-contact .title.in-view .contact_o { transition-delay: calc(var(--n) * 2s); }
.p-contact .title.in-view .contact_n { transition-delay: calc(var(--n) * 3s); }
.p-contact .title.in-view .contact_t1 { transition-delay: calc(var(--n) * 4s); }
.p-contact .title.in-view .contact_a { transition-delay: calc(var(--n) * 5s); }
.p-contact .title.in-view .contact_c2 { transition-delay: calc(var(--n) * 6s); }
.p-contact .title.in-view .contact_t2 { transition-delay: calc(var(--n) * 7s); }
.p-contact .title.in-view .contact_line { transition-delay: calc(var(--n) * 2s); }
.p-contact .title.in-view .contact_a .a1 { transition-delay: calc(var(--n) * 11s); }
.p-contact .title.in-view .contact_a .a2 { transition-delay: calc(var(--n) * 12s); }
.p-contact .title.in-view .contact_a .a3 { transition-delay: calc(var(--n) * 13s); }

/* --------------------------------------------------
   loading
   -------------------------------------------------- */
body.is-loading {
	position: fixed;
	width: 100%;
	height: 100%;
}
.loading {
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.loading .loader {
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	transition: opacity .6s, transform .6s var(--easeInOut);
}
.loading .loader .svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--c-co);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230;
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1s infinite linear;
}
body:not(.is-loading) .loading {
	pointer-events: none;
}
body:not(.is-loading) .loading .loader {
	opacity: 0;
	transform: scale(.3);
}
@keyframes loader {
	from { stroke-dashoffset: 690; }
	to { stroke-dashoffset: 230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}