*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
	border: 0;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
	display: block;
}

ol,
ul {
	list-style: none;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

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

button {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
}

input,
select,
textarea {
	color: inherit;
	font: inherit;
	vertical-align: top;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

:root {
	--color-text-black: #111111;
	--color-text-white: #FFFFFF;
	--accent-main-green: #70A181;
	--accent-main-lightgreen: #B2D5BE;
	--accent-sub-green: #9CDEB2;
	--accent-sub-lightgreen: #C3EDDF;
	--sub-black: #242424;
	--sub-gray: #838383;
	--sub-lightgray: #CCCCCC;
	--sub-lightgray-2: #ECECEC;
	--background-black: #111111;
	--background-white: #FFFFFF;
	--background-base: #f2f2f2;
	--ff-base: "Noto Sans JP", sans-serif;
	--ff-en: "Poppins", sans-serif;
	--fz-base: 16px;
	--fw-base: 400;
	--fw-md: 500;
	--fw-bold: 700;
}

body {
	background-color: var(--background-black);
	color: var(--color-text-white);
	font-family: var(--ff-base);
	font-size: var(--fz-base);
	font-weight: var(--fw-base);
}

.top-header {
	opacity: 0;
	pointer-events: none; /* 非表示中にクリック不可にする場合 */
	transition: opacity 0.4s ease-in-out; /* フェードイン時間 */
}

.top-header.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.l-header {
	position: fixed;
	width: 100%;
	z-index: 900;
}

.l-header__inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-block: 24px;
	width: 100%;
}

.l-header__logo a svg g .js-color-change {
	transition: stroke 0.5s ease-in-out;
}
.l-header__logo.is-change a svg g .js-color-change {
	stroke: #111;
}
.l-header__logo--icon {
	width: 149px;
	height: 69px;
}

.l-header__content {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: clamp(1.5rem, 1.4071428571rem + 0.380952381vi, 1.75rem);
}

.l-header__contact {
	background-color: var(--background-white);
	color: var(--color-text-black);
	font-family: var(--ff-en);
	font-size: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.06rem, 0.0525714286rem + 0.0304761905vi, 0.08rem);
	line-height: normal;
	padding-block: clamp(0.375rem, 0.3285714286rem + 0.1904761905vi, 0.5rem);
	padding-inline: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	transition: all 0.5s ease-in-out;
}

.l-header__btn {
	height: 32px;
	position: relative;
	width: 32px;
	z-index: 51;
}

.l-header__content.is-checked .l-header__btn--bar:nth-of-type(3) {
	top: 15px;
	transform: translateX(0px);
}

.l-header__content.is-checked .l-header__btn--bar:nth-of-type(5) {
	top: 25px;
	transform: translateX(0px);
}

.l-header__content.is-checked .l-header__btn--bar:nth-of-type(6) {
	top: 25px;
	transform: translateX(0px);
}

.l-header__content.is-checked .l-header__btn--bar {
	background-color: var(--background-black);
}

.l-header__content.is-checked .l-header__contact {
	visibility: hidden;
}

.l-header__btn--bar {
	background: var(--background-white);
	height: 3px;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 1s ease-in-out;
	width: 10px;
}

.l-header__btn--bar:nth-of-type(1) {
	top: 5px;
}

.l-header__btn--bar:nth-of-type(2) {
	right: 0px;
	top: 15px;
}

.l-header__btn--bar:nth-of-type(3) {
	top: 15px;
	transform: translateX(-11px);
}

.l-header__btn--bar:nth-of-type(4) {
	right: 0px;
	top: 25px;
}

.l-header__btn--bar:nth-of-type(5) {
	top: 25px;
	transform: translateX(-11px);
}

.l-header__btn--bar:nth-of-type(6) {
	top: 25px;
	transform: translateX(-22px);
}

.l-header__btn--bar.is-change {
	background: var(--background-black);
	transition: all 0.5s ease-in-out;
}

.l-header__contact.is-change {
	background: var(--background-black);
	color: var(--color-text-white);
	transition: all 0.5s ease-in-out;
}

.l-drawer {
	background-color: transparent;
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease;
	width: clamp(286px, 80vw, 600px);
	z-index: 800;
}

.l-drawer.is-active {
	opacity: 1;
	pointer-events: auto;
}

.l-drawer_bg1,
.l-drawer_bg2,
.l-drawer_bg3 {
	background: var(--background-white);
	height: 34vh;
	position: absolute;
	transform: translateX(100%);
	transition: transform 0.3s linear;
	width: 100%;
	z-index: 0;
}

.l-drawer_bg1.is-checked,
.l-drawer_bg2.is-checked,
.l-drawer_bg3.is-checked {
	animation: slideIn 0.3s ease forwards;
}

.l-drawer_bg1 {
	top: 0;
}

.l-drawer_bg2 {
	top: 33vh;
}

.l-drawer_bg3 {
	top: 66vh;
}

.l-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	margin-inline-start: clamp(2.5rem, 1.1303571429rem + 5.619047619vi, 6.1875rem);
	padding-block-start: clamp(5.21875rem, 4.8357142857rem + 1.5714285714vi, 6.25rem);
}

.l-drawer_bg1,
.l-drawer_bg2,
.l-drawer_bg3 {
	opacity: 0;
	transform: translateX(100%);
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.l-drawer__nav {
	opacity: 0;
	position: relative;
	transition: opacity 0.5s ease;
}

.l-drawer_bg1.is-show {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

.l-drawer_bg2.is-show {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.15s;
}

.l-drawer_bg3.is-show {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0s;
}

.l-drawer__nav.is-show {
	opacity: 1;
	transition-delay: 0.6s;
}

.l-drawer_bg1.is-hide {
	opacity: 0;
	transform: translateX(100%);
	transition-delay: 0.45s;
}

.l-drawer_bg2.is-hide {
	opacity: 0;
	transform: translateX(100%);
	transition-delay: 0.3s;
}

.l-drawer_bg3.is-hide {
	opacity: 0;
	transform: translateX(100%);
	transition-delay: 0.15s;
}

.l-drawer__nav.is-hide {
	opacity: 0;
	transition-delay: 0s;
}

.l-drawer__nav--link {
	color: var(--color-text-black);
	font-family: var(--ff-en);
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	letter-spacing: clamp(0.12rem, 0.1051428571rem + 0.060952381vi, 0.16rem);
	line-height: normal;
	transition: all 0.3s ease-in-out;
}

.l-drawer__nav--btn {
	background-color: var(--background-black);
	border: 1px solid var(--background-black);
	padding-block: clamp(0.625rem, 0.4857142857rem + 0.5714285714vi, 1rem);
	padding-inline: clamp(2.5rem, 2.1285714286rem + 1.5238095238vi, 3.5rem);
	transition: all 0.3s ease-in-out;
	width: clamp(12.8125rem, 11.0946428571rem + 7.0476190476vi, 17.4375rem);
}

.l-drawer__nav--btn a {
	color: var(--color-text-white);
	font-family: var(--ff-en);
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	font-weight: 300;
	letter-spacing: clamp(0.12rem, 0.1051428571rem + 0.060952381vi, 0.16rem);
	line-height: normal;
	transition: all 0.3s ease-in-out;
}

.js-fv {
	height: 100vh;
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: all 0.7s ease-in-out;
	width: 100%;
	z-index: -10;
}

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

.l-footer__inner {
	margin-inline: auto;
	max-width: 1088px;
	padding-block-end: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	padding-block-start: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
	padding-inline: 64px;
}

.l-footer__wrapper {
	text-align: center;
}

.l-footer__main-copy {
	display: inline-block;
	padding-block: 10px;
	padding-inline-end: clamp(0.9375rem, 0.1714285714rem + 3.1428571429vi, 3rem);
	padding-inline-start: clamp(1.75rem, 1.2857142857rem + 1.9047619048vi, 3rem);
	position: relative;
	text-align: center;
}

.l-footer__main-copy--text {
	color: var(--color-text-white);
	font-family: var(--ff-base);
	font-size: clamp(1.25rem, 1.1571428571rem + 0.380952381vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.125rem, 0.1157142857rem + 0.0380952381vi, 0.15rem);
	line-height: 180%;
}

.l-footer__main-copy--text span {
	font-size: clamp(1.5rem, 1.4071428571rem + 0.380952381vi, 1.75rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1407142857rem + 0.0380952381vi, 0.175rem);
	line-height: 180%;
}

.l-footer__nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-block-start: 80px;
}

.l-footer__link {
	color: var(--color-text-white);
	font-family: var(--ff-en);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0937142857rem - 0.0152380952vi, 0.08rem);
	line-height: normal;
}

.l-footer__bottom {
	color: var(--color-text-white);
	font-family: var(--ff-en);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.96px;
	line-height: normal;
	margin-block-start: clamp(6.5rem, 6.3375rem + 0.6666666667vi, 6.9375rem);
	text-align: center;
}

.l-footer__box-right,
.l-footer__box-left {
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.l-footer__box-right::before,
.l-footer__box-right::after,
.l-footer__box-left::before,
.l-footer__box-left::after {
	border: 0.5px solid #ccc;
	content: "";
	position: absolute;
}

.l-footer__box-right::before {
	height: 1px;
	right: 6px;
	top: 0;
	width: 95%;
}

.l-footer__box-right::after {
	height: 70%;
	right: 0;
	top: 6px;
	width: 1px;
}

.l-footer__box-left::before {
	bottom: 0;
	height: 1px;
	left: 6px;
	width: 95%;
}

.l-footer__box-left::after {
	bottom: 6px;
	height: 70%;
	left: 0;
	width: 1px;
}

.f-dot-right,
.f-dot-left {
	animation: footersShadow 4s infinite;
	height: 12px;
	position: absolute;
	width: 12px;
}

.f-dot-right {
	animation-delay: 1.5s;
	right: -6px;
	top: -6px;
}

.f-dot-left {
	bottom: -6px;
	left: -6px;
}

.l-inner {
	margin-inline: auto;
	max-width: 1360px;
	padding-inline: 24px;
}

.c-scroll span {
	color: var(--color-text-white);
	font-family: var(--ff-en);
	font-size: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.06rem, 0.0525714286rem + 0.0304761905vi, 0.08rem);
	line-height: normal;
	writing-mode: vertical-rl;
}

/* スクロールダウンの位置 */

.c-scroll {
	bottom: clamp(7.5rem, 6.7803571429rem + 2.9523809524vi, 9.4375rem);
	position: absolute;
	right: 50%;
	transform: translateX(100%);
	z-index: -5;
}

/* 線のアニメーション部分 */

.c-scroll::before {
	animation: scroll 2s infinite;
	background-color: var(--color-text-white);
	content: "";
	height: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
	left: -7px;
	margin: auto;
	position: absolute;
	width: 1px;
	z-index: 2;
}

/* 線の背景色 */

.c-scroll::after {
	background-color: var(--sub-gray);
	content: "";
	height: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
	left: -7px;
	margin: auto;
	position: absolute;
	top: 0px;
	width: 1px;
}

.c-contact__btn {
	align-items: center;
	border: 1px solid var(--color-text-white);
	display: flex;
	flex-direction: row;
	height: 90px;
	justify-content: space-between;
	max-width: 360px;
	padding-block: 16px;
	padding-inline: 40px;
	transition: all 0.5s ease-in-out;
	width: clamp(21.375rem, 20.9571428571rem + 1.7142857143vi, 22.5rem);
}

.c-contact__btn svg g {
	fill: var(--color-text-white);
}

.c-contact__btn p {
	letter-spacing: 1.6px;
	line-height: 180%;
}

.c-contact__btn p span {
	font-size: clamp(1.25rem, 1.1571428571rem + 0.380952381vi, 1.5rem);
	letter-spacing: 2.4px;
	line-height: 180%;
}

.c-contact__btn:nth-of-type(1) svg {
	height: 34px;
	width: 32px;
}

.c-contact__btn:nth-of-type(2) {
	padding-inline-start: clamp(2.25rem, 2.1571428571rem + 0.380952381vi, 2.5rem);
}

.c-contact__btn:nth-of-type(2) svg {
	height: 40px;
	width: 31px;
}

.c-contact__btn:nth-of-type(3) svg {
	height: 28px;
	width: 36px;
}

.c-section__title {
	display: flex;
	flex-direction: column;
	height: clamp(5.25rem, 4.7857142857rem + 1.9047619048vi, 6.5rem);
	text-align: center;
}

.c-section-under__title {
	display: flex;
	flex-direction: column;
	height: clamp(5.25rem, 4.7857142857rem + 1.9047619048vi, 6.5rem);
	text-align: center;
}

.tit-white {
	color: var(--color-text-white);
}

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

.c-section__title--en {
	font-family: var(--ff-en);
	font-size: clamp(2.25rem, 1.9714285714rem + 1.1428571429vi, 3rem);
	font-weight: 300;
	letter-spacing: clamp(0.18rem, 0.1577142857rem + 0.0914285714vi, 0.24rem);
	line-height: normal;
}

.c-section__title--ja {
	font-size: clamp(0.9375rem, 0.8678571429rem + 0.2857142857vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0867857143rem + 0.0285714286vi, 0.1125rem);
	line-height: 180%;
}

.c-section__title-description {
	font-size: clamp(0.84375rem, 0.7857142857rem + 0.2380952381vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.0875rem, 0.0828571429rem + 0.019047619vi, 0.1rem);
	line-height: 180%;
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
	text-align: center;
}

.c-blog__item {
	align-items: center;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-direction: row;
	gap: 48px;
	justify-content: space-between;
	padding-block-end: 16px;
	transition: all 0.5s ease-in-out;
}

.c-blog__article {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-blog__article--head {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.c-blog__article--date {
	color: var(--sub-gray);
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.12px;
	line-height: normal;
	width: 85px;
}

.c-blog__article--category {
	border: 0.5px solid var(--background-black);
	color: var(--sub-black);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.4px;
	line-height: 180%;
	text-align: center;
	width: 101px;
}

.c-blog__article--bottom {
	color: var(--color-text-black);
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	transition: all 0.3s ease-in-out;
}

.c-blog_icon {
	flex-shrink: 0;
	opacity: 0.6;
	transition: all 0.3s ease-in-out;
}

.c-btn {
	display: block;
	font-family: var(--ff-en);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 1.92px;
	line-height: normal;
	margin-inline: auto;
	max-width: 340px;
	padding-block: 16px;
	text-align: center;
}

.btn-white {
	background: var(--background-white);
	border: 1px solid var(--background-black);
	color: var(--color-text-black);
	transition: all 0.5s ease-in-out;
}

.btn-black {
	border: 1px solid var(--background-white);
	color: var(--color-text-white);
	transition: all 0.5s ease-in-out;
}

.c-topWorks-item {
	background: var(--background-black);
	height: 362px;
	position: relative;
	width: 363px;
}

.c-topWorks-item__marginTop {
	margin-block-start: 137px;
}

.c-topWorks-item__marginTop2 {
	margin-block-start: 121px;
}

.c-topWorks-item__img {
	border: 1px solid var(--background-black);
	height: 100%;
	position: relative;
	transition: all 0.3s ease-in-out;
	width: 100%;
}

.c-topWorks-item__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.c-topWorks-item__texts {
	background: var(--background-black);
	bottom: 0;
	display: inline-block;
	left: 0;
	padding-block: 23px;
	padding-inline-end: 48px;
	padding-inline-start: 24px;
	position: absolute;
	transition: all 0.3s ease-in-out;
}

.c-topWorks-item__texts--right {
	left: auto;
	right: 0;
}

.c-topWorks-item__texts--title {
	font-size: 24px;
	line-height: normal;
}

.c-topWorks-item__bottom {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-block-start: 16px;
}

.c-topWorks-item__bottom--type,
.c-topWorks-item__bottom--genre {
	font-weight: 300;
	line-height: normal;
}

.c-topWorks-item__bottom--type {
	position: relative;
}

.c-topWorks-item__bottom--type::after {
	background: var(--background-white);
	bottom: 2px;
	content: "";
	height: 16px;
	position: absolute;
	right: -8px;
	width: 0.5px;
}

.c-topWorks-item__marginTop2,
.c-topWorks-item__first {
	position: relative;
}

.c-topWorks-item__marginTop2::before,
.c-topWorks-item__marginTop2::after,
.c-topWorks-item__first::before,
.c-topWorks-item__first::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.c-topWorks-item__marginTop2::before {
	background-image: url(../img/topWorks-bg-mahjong.webp);
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	height: 105px;
	left: -121px;
	width: 105px;
}

.c-topWorks-item__marginTop2::after {
	background-image: url(../img/topWorks-bg-line.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	bottom: -12px;
	height: 6px;
	left: 0px;
	width: 363px;
}

.c-topWorks-item__first::before {
	background-image: url(../img/topWorks-bg-archi.webp);
	background-repeat: no-repeat;
	background-size: contain;
	height: 121px;
	right: -258px;
	top: 0;
	width: 242px;
}

.c-topWorks-item__first::after {
	background-image: url(../img/topWorks-bg-line.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 6px;
	left: 0px;
	top: -12px;
	width: 363px;
}

.p-topWorks__contents--sp .c-topWorks-item {
	position: relative;
	z-index: 1;
}

.c-topWorks-item__bg1,
.c-topWorks-item__bg2,
.c-topWorks-item__bg3,
.c-topWorks-item__bg4,
.c-topWorks-item__bg5 {
	position: relative;
	width: 100%;
}

.c-topWorks-item__bg1 {
	max-width: 400px;
}

.c-topWorks-item__bg2 {
	max-width: 550px;
}

.c-topWorks-item__bg3 {
	max-width: 450px;
}

.c-topWorks-item__bg4 {
	max-width: 650px;
}

.c-topWorks-item__bg5 {
	max-width: 450px;
}

.c-topWorks-item__bg1::before,
.c-topWorks-item__bg1::after,
.c-topWorks-item__bg2::before,
.c-topWorks-item__bg2::after,
.c-topWorks-item__bg3::before,
.c-topWorks-item__bg3::after,
.c-topWorks-item__bg4::before,
.c-topWorks-item__bg4::after,
.c-topWorks-item__bg5::after {
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	position: absolute;
	z-index: 0;
}

.c-topWorks-item__bg1::before {
	color: #CCC;
	content: "reading";
	font-family: var(--ff-en);
	font-weight: 300;
	left: 0;
	letter-spacing: 3.2px;
	line-height: normal;
	top: -24px;
}

.c-topWorks-item__bg1::after {
	background-image: url(../img/sp/topWorks-bg-1.webp);
	height: 175px;
	right: -24px;
	top: -45px;
	width: 259px;
}

.c-topWorks-item__bg2::before {
	background-image: url(../img/sp/topWorks-bg-2-left.webp);
	height: 322px;
	left: -12px;
	top: -54px;
	width: 160px;
}

.c-topWorks-item__bg2::after {
	background-image: url(../img/sp/topWorks-bg-2-right.webp);
	height: 94px;
	right: -27px;
	top: -4px;
	width: 176px;
}

.c-topWorks-item__bg3::before {
	background-image: url(../img/sp/topWorks-bg-3-left.webp);
	height: 88px;
	left: 18px;
	top: -4px;
	width: 76px;
}

.c-topWorks-item__bg3::after {
	background-image: url(../img/sp/topWorks-bg-3-right.webp);
	height: 203px;
	right: -16px;
	top: -126px;
	width: 203px;
}

.c-topWorks-item__bg4::before {
	background-image: url(../img/sp/topWorks-bg-4-left.webp);
	height: 420px;
	left: -25px;
	top: -379px;
	width: 39px;
}

.c-topWorks-item__bg4::after {
	background-image: url(../img/sp/topWorks-bg-4-right.webp);
	height: 180px;
	right: -29px;
	top: -52px;
	width: 390px;
}

.c-topWorks-item__bg5::after {
	background-image: url(../img/sp/topWorks-bg-5-right.webp);
	height: 148px;
	right: -29px;
	top: -48px;
	width: 200px;
}

.c-topWorks-item__bg {
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.28px;
	line-height: normal;
	position: absolute;
	right: 6px;
	top: 50%;
	z-index: 0;
}

.c-topWorks-item__bg-left {
	left: 6px;
}

.c-pagetop {
	block-size: 48px;
	inline-size: 48px;
	inset-block-end: 100px;
	inset-inline-end: 64px;
	opacity: 0;
	position: fixed;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	visibility: hidden;
	z-index: 2;
}

.c-pagetop-btn {
	position: absolute;
	transition: all 0.4s ease-in-out;
}

.c-pagetop-text {
	bottom: -29px;
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 300;
	left: 50%;
	letter-spacing: 1.12px;
	line-height: normal;
	mix-blend-mode: difference;
	position: absolute;
	transform: translateX(-50%);
}

.c-pagetop.show {
	opacity: 1;
	visibility: visible;
}

.c-pagetop img,
.c-pagetop-text {
	transition: all 0.5s ease-in-out;
}

.c-pagetop.is-change img {
	filter: invert(1);
}

.c-pagetop.is-change .c-pagetop-text {
	color: var(--color-text-black);
}

.c-breadcrumb {
	background: var(--sub-lightgray-2);
	border-top: 1px solid var(--sub-gray);
}

.c-breadcrumb__list {
	align-items: center;
	color: var(--color-text-black);
	display: flex;
	flex-direction: row;
	gap: clamp(0.5rem, 0.3142857143rem + 0.7619047619vi, 1rem);
	margin-inline: auto;
	max-width: 1314px;
	padding-block: 16px;
	padding-inline: 32px;
	position: relative;
}
.c-breadcrumb__list::before {
	background: url(../img/breadcrumb-icon.png) no-repeat center center / contain;
	position: absolute;
	content: "";
	width: 15px;
	height: 10px;
	left: 12px;
}

.c-breadcrumb__list span {
	color: var(--PF-black, #111);
	font-family: Poppins;
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 1.28px;
}

.c-breadcrumb__list--icon {
	color: var(--PF-black, #111);
	font-family: Poppins;
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 1.28px;
}


.c-breadcrumb__item {
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.07rem, 0.0662857143rem + 0.0152380952vi, 0.08rem);
	line-height: normal;
}

.c-breadcrumb__item span {
	font-weight: 300;
}

.c-animation__card {
	display: flex;
	flex-direction: column;
	max-width: 396px;
	width: 100%;
}

.c-animation__card--video {
	aspect-ratio: 9/5;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.c-animation__card--video video {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	display: block;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
}

.c-animation__card--text {
	background: var(--sub-lightgray-2);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 8px;
	padding-block-end: 32px;
	padding-block-start: 18px;
	padding-inline: clamp(0.875rem, 0.6428571429rem + 0.9523809524vi, 1.5rem);
}

.c-animation__card--text p {
	color: var(--color-text-black);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 2.4px;
	line-height: normal;
}

.c-animation__card--soft {
	display: flex;
	flex-direction: row;
}

.c-animation__card--soft p {
	color: var(--color-text-black);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: 0px;
	line-height: normal;
}

.c-animation__card--soft p:not(:last-child)::after {
	color: var(--color-text-black);
	content: "|";
	margin-inline: clamp(0.375rem, 0.3285714286rem + 0.1904761905vi, 0.5rem);
}

.c-animation__contents {
	background: var(--sub-lightgray-2);
	color: var(--color-text-black);
	display: none;
	padding-inline: 14px;
}
/* .c-animation__card.js-open .c-animation__contents {
  display: block;
} */

.c-animation__item p {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 180%;
	padding-block-end: 24px;
	padding-block-start: 8px;
}

.c-animation__item--title {
	display: inline-block;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 180%;
	padding-inline: 59px;
	position: relative;
}

.c-animation__item--title::before {
	background: var(--background-black);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 43px;
}

.c-animation__item--title::after {
	background: var(--background-black);
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	width: 43px;
}

.c-animation__card--btn {
	background: var(--sub-lightgray-2);
	border-top: 0.5px solid var(--color-text-black);
	color: var(--color-text-black);
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.28px;
	line-height: normal;
	padding-block: 8px;
	position: relative;
	text-align: center;
	transition: all 0.5s ease-in-out;
	width: 100%;
}

.c-animation__card--btn::before {
	background-image: url(../img/Animation-arrow.webp);
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 16px;
	left: 59%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.5s ease-in-out;
	width: 16px;
}

.c-animation__card.js-open .c-animation__card--btn {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.c-animation__card.js-open .c-animation__card--btn::before {
	filter: brightness(0) saturate(100%) invert(88%) sepia(18%) saturate(293%) hue-rotate(88deg) brightness(91%) contrast(90%);
	transform: translate(-50%, -50%) rotate(-180deg);
	transform-origin: center;
}

.c-animation__card--btn--none::before {
	display: none;
}

.c-animation__card.js-open .c-animation__modal {
	display: block;
}

.c-animation--modal__inner {
	margin-inline: auto;
	max-width: 1440px;
	padding-block-end: 120px;
	padding-block-start: 64px;
	padding-inline: clamp(1.5rem, -3.5142857143rem + 20.5714285714vi, 15rem);
	position: relative;
}

.c-animation__modal--top--close {
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	position: absolute;
	right: 3.5%;
	top: 2.5%;
}

.c-animation__modal::-webkit-scrollbar {
	display: none;
}

.c-animation--modal__top {
	align-items: end;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-block-end: 24px;
}

.c-animation--modal__top--left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-animation--modal__top--title {
	font-size: 32px;
	font-weight: 300;
	letter-spacing: 3.2px;
	line-height: normal;
}

.c-animation--modal__top--skills {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.c-animation--modal__top--skills p {
	font-weight: 400;
	letter-spacing: 1.6px;
	line-height: 180%;
}

.c-animation--modal__top--skill {
	display: flex;
	flex-direction: row;
}

.c-animation--modal__top--skill p {
	font-weight: 300;
	letter-spacing: 0;
	line-height: normal;
}

.c-animation--modal__top--skill p:not(:last-child)::after {
	color: var(--background-white);
	content: "|";
	margin-inline: clamp(0.375rem, 0.3285714286rem + 0.1904761905vi, 0.5rem);
}

.c-animation--modal__inner .c-animation--modal__item:nth-of-type(3) {
	margin-block-start: 32px;
}

.c-animation--modal__item .c-animation__item p {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 180%;
	padding-block-end: 24px;
	padding-block-start: 8px;
}

.c-animation--modal__item .c-animation__item--title {
	display: inline-block;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 1.8px;
	line-height: 180%;
	padding-inline: 59px;
	position: relative;
}

.c-animation--modal__item .c-animation__item--title::before {
	background: var(--background-white);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 43px;
}

.c-animation--modal__item .c-animation__item--title::after {
	background: var(--background-white);
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	width: 43px;
}

.loading {
	padding-block-start: 10%;
	position: absolute;
	text-align: center;
	transition: background-color 1.2s ease;
	width: 100%;
	z-index: 1000;
}

.loading-bg {
	background: var(--background-black);
	height: 100%;
	left: 0;
	opacity: 1;
	position: fixed;
	top: 0;
	transition: opacity 1s ease;
	width: 100%;
	z-index: 999;
}

.loading-bg.bg-transparent {
	opacity: 0;
	pointer-events: none;
}

.p-loading-text {
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	padding-block-end: 32px;
	transition: opacity 0.5s ease;
}

.p-loading-percent,
.p-loading-main-copy {
	font-size: clamp(2.25rem, 1.8321428571rem + 1.7142857143vi, 3.375rem);
	font-weight: 300;
	letter-spacing: clamp(0.225rem, 0.1832142857rem + 0.1714285714vi, 0.3375rem);
	line-height: 180%;
}

.fz-60 {
	font-size: clamp(2.5rem, 2.0357142857rem + 1.9047619048vi, 3.75rem);
	font-weight: 300;
	letter-spacing: clamp(0.25rem, 0.2035714286rem + 0.1904761905vi, 0.375rem);
	line-height: 180%;
}

.p-loading-bar {
	background-color: var(--sub-gray);
	border-radius: 1px;
	height: 1px;
	margin: 24px auto 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.5s ease;
	width: 260px;
}

.p-loading-bar.is-visible {
	opacity: 1;
}

.p-loading-bar__progress {
	background-color: var(--background-white);
	height: 100%;
	transition: width 0.1s linear;
	width: 0%;
}

.p-loading-coding {
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	opacity: 0;
	padding-block-end: 32px;
	transition: opacity 0.6s ease;
}

.p-loading-main-copy-en {
	color: var(--sub-lightgray);
	display: inline-block;
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.7821428571rem + 0.380952381vi, 1.125rem);
	font-weight: 275;
	letter-spacing: clamp(0.07rem, 0.0625714286rem + 0.0304761905vi, 0.09rem);
	line-height: normal;
	margin-block-start: 10px;
	opacity: 0;
	position: relative;
	transition: opacity 0.6s ease;
}

.p-loading-main-copy-en::before {
	background: var(--background-black);
	border-radius: 20%;
	content: "";
	filter: blur(3px);
	height: 100%;
	opacity: 0.7;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.p-loading-spans {
	display: inline-block;
	position: relative;
}

.p-loading-spans::before {
	background: var(--background-black);
	content: "";
	filter: blur(10px);
	height: 100%;
	opacity: 0.7;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.is-hidden {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.is-visible {
	opacity: 1;
	transition: opacity 0.5s ease;
}

.p-loading-mark {
	display: inline-block;
	font-weight: 300;
	max-width: 45px;
}

.p-fv {
	overflow: hidden;
	padding-block-end: clamp(3.5rem, 2.0142857143rem + 6.0952380952vi, 7.5rem);
	padding-block-start: clamp(5.21875rem, 4.8357142857rem + 1.5714285714vi, 6.25rem);
}

.p-fv-main {
	position: relative;
	z-index: -1;
}

.p-fv-bg {
	height: clamp(37.5rem, 32.8571428571rem + 19.0476190476vi, 50rem);
	position: relative;
	width: 100%;
}

.p-fv-bg__text {
	color: var(--color-text-whiteF);
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	left: 50%;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	position: absolute;
	top: 156px;
	transform: translateX(-50%);
}

.p-fv-bg__text--ja {
	background: var(--background-black);
	color: var(--color-text-whiteF);
	display: inline-block;
	font-size: clamp(2.25rem, 1.8321428571rem + 1.7142857143vi, 3.375rem);
	font-weight: 300;
	left: 53%;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	position: absolute;
	text-align: center;
	top: 224px;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
}

.p-fv-bg__text--ja span {
	font-size: clamp(2.5rem, 2.0357142857rem + 1.9047619048vi, 3.75rem);
	font-weight: 300;
	letter-spacing: clamp(0.25rem, 0.2035714286rem + 0.1904761905vi, 0.375rem);
}

.p-fv-bg__text--en {
	background: var(--background-black);
	color: var(--Works-gray, #CCC);
	display: inline-block;
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.7821428571rem + 0.380952381vi, 1.125rem);
	font-weight: 275;
	left: 50%;
	letter-spacing: clamp(0.07rem, 0.0625714286rem + 0.0304761905vi, 0.09rem);
	line-height: normal;
	position: absolute;
	top: 340px;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
}

.p-fv-bg-box {
	position: absolute;
}

.p-fv-bg-box1 {
	border: 0.5px solid #70A181;
	height: 318px;
	position: absolute;
	width: 318px; /* アニメーションの経路：内側の中央線をぐるっと1周 */
	--path: path("M 1 1 H 317 V 317 H 1 Z");
	left: -48px; /* 位置設定 */
	top: -164px;
}

.p-fv-bg-box2 {
	border: 0.5px solid #909090;
	height: 393px;
	width: 393px; /* アニメーションの経路：内側の中央線をぐるっと1周 */
	--path: path("M 1 1 H 392 V 392 H 1 Z");
	left: 64px; /* 位置設定 */
	top: 82px;
}

.p-fv-bg-box3 {
	border: 0.5px solid #70A181;
	height: 221px;
	width: 221px; /* アニメーションの経路：内側の中央線をぐるっと1周 */
	--path: path("M 1 1 H 220 V 220 H 1 Z");
	right: 174px; /* 位置設定 */
	top: 290px;
}

.p-fv-bg-box4 {
	border: 0.5px solid #909090;
	height: 354px;
	width: 354px; /* アニメーションの経路：内側の中央線をぐるっと1周 */
	--path: path("M 1 1 H 353 V 353 H 1 Z");
	right: -34px; /* 位置設定 */
	top: 434px;
}

.p-fv-bg-box5 {
	border: 0.5px solid #70A181;
	height: 80px;
	width: 80px; /* アニメーションの経路：内側の中央線をぐるっと1周 */
	--path: path("M 1 1 H 79 V 79 H 1 Z");
	right: 371px; /* 位置設定 */
	top: -62px;
}

.dot {
	animation: moveBox 4s linear infinite;
	height: clamp(0.5625rem, 0.4928571429rem + 0.2857142857vi, 0.75rem);
	left: 0;
	offset-anchor: center;
	offset-path: var(--path);
	offset-rotate: auto;
	opacity: 0.9;
	position: absolute;
	top: 0;
	width: clamp(0.5625rem, 0.4928571429rem + 0.2857142857vi, 0.75rem);
}

.dot2 {
	animation-delay: 2s; /* 180度ずらす（4s周期の半分） */
}

.dot-delay1 {
	animation: moveBoxReverse 5s linear infinite;
}

.dot-delay1-2 {
	animation-delay: 2.5s; /* 180度ずらす（4s周期の半分） */
}

.dot-green {
	background: #70A181;
	box-shadow: 0px 0px 15px 2px #b2d5be;
}

.dot-gray {
	background: #949494;
	box-shadow: 0px 0px 15px 2px #F0F0F0;
}

.p-fv-bg-gradient {
	animation: bg-gradient-dynamic 15s ease-in-out infinite;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	opacity: 0.7;
	position: absolute;
	z-index: -5;
}

.p-fv-bg-gradient1 {
	animation: bg-gradient-dynamic 25s ease-in-out infinite;
	background-image: linear-gradient(42deg, #111 15%, #161E19 45%, #3E644B 90%);
	background-size: 300% 300%;
	height: clamp(8.5rem, 3.9732142857rem + 18.5714285714vi, 20.6875rem);
	left: -118px;
	top: 369px;
	width: clamp(8.5rem, 1.3267857143rem + 29.4285714286vi, 27.8125rem);
}

.p-fv-bg-gradient2 {
	background-image: linear-gradient(289deg, #575757 33%, #111 110%);
	height: clamp(3rem, 0.7946428571rem + 9.0476190476vi, 8.9375rem);
	left: 418px;
	top: -22px;
	width: clamp(3rem, 0.7946428571rem + 9.0476190476vi, 8.9375rem);
}

.p-fv-bg-gradient3 {
	background-image: linear-gradient(99deg, #575757 50%, #111 120%);
	height: clamp(1.75rem, 0.5428571429rem + 4.9523809524vi, 5rem);
	right: clamp(12.5625rem, 8.1517857143rem + 18.0952380952vi, 24.4375rem);
	top: -45px;
	width: clamp(1.75rem, 0.5428571429rem + 4.9523809524vi, 5rem);
}

.p-fv-bg-gradient4 {
	background-image: linear-gradient(33deg, #575757 38%, #111 95%);
	height: clamp(5rem, 2.8178571429rem + 8.9523809524vi, 10.875rem);
	right: 21px;
	top: 88px;
	width: clamp(5rem, 2.8178571429rem + 8.9523809524vi, 10.875rem);
}

.p-topMessage-top__inner {
	align-items: end;
	display: flex;
	flex-direction: row;
	gap: 88px;
	justify-content: center;
	margin-inline: auto;
	max-width: 1008px;
	padding-block-end: clamp(7.5rem, 5.6428571429rem + 7.619047619vi, 12.5rem);
	padding-inline: 24px;
	position: relative;
}

.p-topMessage-top-main {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 57.9166666667%;
	width: clamp(21.375rem, 16.4071428571rem + 20.380952381vi, 34.75rem);
}

.p-topMessage-top-sub {
	width: 33.125%;
}

.p-topMessage-top-main__text {
	color: var(--color-text-white);
	font-size: clamp(1.5rem, 1.1285714286rem + 1.5238095238vi, 2.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.125rem, 0.1246518106rem + 0.139275766vi, 0.25rem);
	line-height: 180%;
}

.p-topMessage-top-main__text:nth-of-type(2) {
	margin-block-start: 28px;
	text-align: right;
}

.p-topMessage-top-sub p {
	color: var(--color-text-white);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 1.8px;
	line-height: 180%;
}

/* --- 背景アニメーション --- */

.p-topMessage-top-main {
	position: relative;
}

.p-topMessage-top-main::before,
.p-topMessage-top-main::after {
	animation: opacity 4s ease-in-out infinite;
	background: linear-gradient(to right, transparent, var(--accent-main-green), transparent);
	content: "";
	filter: blur(0.2px);
	height: 2px;
	left: 20%;
	position: absolute;
	top: 50%;
	width: clamp(13rem, 10.1214285714rem + 11.8095238095vi, 20.75rem);
}

.p-topMessage-top-main::before {
	rotate: 45deg;
}

.p-topMessage-top-main::after {
	animation-delay: 2s;
	rotate: -45deg;
}

.p-topMessage-bottom__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-inline: auto;
	max-width: 1296px;
	padding-block-end: clamp(5.625rem, 4.9285714286rem + 2.8571428571vi, 7.5rem);
	padding-inline: 24px;
}

.p-topMessage-bottom__btn {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: clamp(1rem, 0.2571428571rem + 3.0476190476vi, 3rem);
	justify-content: center;
}

.p-topMessage-bottom__btn button {
	background: transparent;
	border: 1px solid var(--color-text-white);
	color: var(--color-text-white);
	cursor: pointer;
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.1rem, 0.0953571429rem + 0.019047619vi, 0.1125rem);
	line-height: 180%;
	padding-block: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	text-align: center;
	transition: all 0.4s ease-in-out;
	width: clamp(10.1875rem, 8.8875rem + 5.3333333333vi, 13.6875rem);
}

.p-topMessage-bottom__btn button.is-active {
	background: var(--background-white);
	color: var(--color-text-black);
}

.p-topMessage-bottom__contents {
	align-items: center;
	display: flex;
	height: auto;
	justify-content: space-between;
}

.p-topMessage-bottom__deco {
	position: relative;
}

.p-topMessage-bottom__deco {
	display: flex;
	flex-direction: column;
	gap: clamp(0.125rem, 0.0785714286rem + 0.1904761905vi, 0.25rem);
}

.p-topMessage-bottom__circle {
	background: transparent;
	border: 1px solid var(--sub-gray);
	border-radius: 50%;
	height: clamp(1.75rem, 1.6571428571rem + 0.380952381vi, 2rem);
	left: 50%;
	position: absolute;
	top: -36px;
	transform: translateX(-50%);
	transition: left 1s ease-out;
	width: clamp(1.75rem, 1.6571428571rem + 0.380952381vi, 2rem);
}

.p-topMessage-bottom__grid {
	display: grid;
	gap: clamp(0.125rem, 0.0785714286rem + 0.1904761905vi, 0.25rem);
	grid-template-columns: repeat(11, 1fr);
}

.p-topMessage-bottom__grid div {
	border-radius: 2px;
	height: clamp(1.8125rem, 1.65rem + 0.6666666667vi, 2.25rem);
	width: clamp(1.8125rem, 1.65rem + 0.6666666667vi, 2.25rem);
}

.p-topMessage-bottom__grid .group-1 {
	background-color: var(--accent-sub-green);
	transition: all 0.5s ease-out;
}

.p-topMessage-bottom__grid .group-2 {
	background-color: var(--accent-main-green);
	transition: all 0.5s ease-out;
}

.p-topMessage-bottom__grid .group-3 {
	background-color: var(--accent-sub-lightgreen);
	transition: all 0.5s ease-out;
}

.p-topMessage-bottom__texts {
	max-width: 744px;
	padding-inline-start: 24px;
}

.p-topMessage-bottom__block {
	padding-block-end: 40px;
}

.p-topMessage-bottom__block:last-of-type {
	padding-block-end: 0px;
}

.p-topMessage-bottom__block h2 {
	border-bottom: 0.7px solid var(--background-white);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.1125rem, 0.0985714286rem + 0.0571428571vi, 0.15rem);
	line-height: normal;
	padding-block-end: clamp(0.25rem, 0.1571428571rem + 0.380952381vi, 0.5rem);
}

.p-topMessage-bottom__block p {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 180%;
	padding-block-start: 16px;
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__deco .p-topMessage-bottom__circle {
	background: var(--accent-main-green);
	border: none;
	box-shadow: 0 0 25px 5px var(--accent-main-lightgreen);
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__deco .p-topMessage-bottom__grid div {
	border: 1px solid var(--sub-gray);
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__deco .p-topMessage-bottom__grid .group-1 {
	background-color: transparent;
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__deco .p-topMessage-bottom__grid .group-2 {
	background-color: transparent;
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__deco .p-topMessage-bottom__grid .group-3 {
	background-color: transparent;
}

.p-topMessage-bottom__block {
	transition: opacity 0.4s ease;
}

.p-topService__inner {
	margin-inline: auto;
	max-width: 1296px;
	padding-block-end: clamp(7.5rem, 6.5946428571rem + 3.7142857143vi, 9.9375rem);
	padding-block-start: clamp(5.625rem, 4.9285714286rem + 2.8571428571vi, 7.5rem);
	padding-inline: 24px;
}

.p-topService__top {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 40px 24px;
	justify-content: center;
	padding-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-topService__item {
	width: 400px;
}

.p-topService__item--move,
.p-topService__item--move2,
.p-topService__item--move3 {
	background: var(--sub-black);
	height: 240px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.p-topService__item--move-slide {
	height: 72px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 1s ease-in-out;
	width: 343px;
}

.p-topService__item--move-slide img {
	height: 68px;
	width: 345px;
}

.p-topService__item--move-slide.active {
	opacity: 1;
	z-index: 1;
}

.p-topService__item--move .p-topService__item--move-slide:nth-of-type(1)::before {
	background: url(../img/topService-1-1-2.webp);
	background-position-y: -4px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	height: 72px;
	position: absolute;
	width: 343px;
}

.p-topService__item--move .p-topService__item--move-slide:nth-of-type(4) img {
	-o-object-fit: contain;
	object-fit: contain;
}

.p-topService__item--move .p-topService__item--move-slide:nth-of-type(2) img {
	filter: brightness(0) saturate(100%) invert(73%) sepia(68%) saturate(1%) hue-rotate(335deg) brightness(99%) contrast(91%);
}

.p-topService__item--move-slide2 {
	height: 196px;
	left: 50%;
	position: absolute;
	top: 55%;
	transform: translate(-50%, -50%);
	transition: opacity 1s ease-in-out;
	width: 131px;
	-o-object-fit: contain;
	object-fit: contain;
}

.bottom {
	top: 52%;
}

.big {
	height: 219px;
	top: 51%;
	width: 158px;
}

.p-topService__item--move-slide3 {
	animation: fadeLoop 12s infinite ease-in-out;
	left: 0;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 1s ease;
}

.p-topService__item--move-slide3 img {
	height: 210px;
	width: 210px;
}

.p-topService__item--move-slide3:nth-child(1) {
	animation-delay: 0s;
}

.p-topService__item--move-slide3:nth-child(2) {
	animation-delay: 2.5s;
}

.p-topService__item--move-slide3:nth-child(3) {
	animation-delay: 5s;
}

.p-topService__item--move-slide3:nth-child(4) {
	animation-delay: 7.5s;
}

.p-topService__item--move-slide3:nth-child(5) {
	animation-delay: 10s;
}

.p-topService__item--move-slide3.first::before {
	animation: moveIcon 1s ease;
	animation-delay: 0.2s;
	animation-duration: 12s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: moveIconGroup;
	background-image: url(../img/topService-3-1-1.webp);
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: "";
	height: 90px;
	opacity: 0;
	position: absolute;
	right: -45px;
	transform: translate(0, 0);
	width: 90px;
}

.p-topService__item--text {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.3142857143rem + 0.7619047619vi, 1rem);
	margin-block-start: clamp(0.5rem, 0.3142857143rem + 0.7619047619vi, 1rem);
}

.p-topService__item--text p:nth-of-type(1) {
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.1125rem, 0.0985714286rem + 0.0571428571vi, 0.15rem);
	line-height: normal;
	text-align: center;
}

.p-topService__item--text p:nth-of-type(2) {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-topService__bottom {
	display: flex;
	flex-direction: column;
	margin-block-start: 80px;
}

.p-topService__bottom--tit {
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	padding-inline-start: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	position: relative;
}

.p-topService__bottom--tit p:nth-of-type(2) {
	font-weight: 300;
}

.p-topService__bottom--tit--dot {
	animation: footersShadow 4s infinite;
	animation-delay: 1.5s;
	height: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
}

.p-topService__bottom--skills {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 32px 36px;
	justify-content: center;
	margin-block-start: clamp(2.5rem, 2.1285714286rem + 1.5238095238vi, 3.5rem);
}

.p-topService__bottom--skill {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: clamp(6.125rem, 4.2678571429rem + 7.619047619vi, 11.125rem);
}

.p-topService__bottom--skill p {
	font-size: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	font-weight: 300;
	line-height: normal;
	text-align: center;
}

.p-topService__bottom--skill-img {
	align-items: center;
	display: flex;
	height: clamp(6.125rem, 4.2678571429rem + 7.619047619vi, 11.125rem);
	justify-content: center;
	overflow: visible;
	position: relative;
	width: clamp(6.125rem, 4.2678571429rem + 7.619047619vi, 11.125rem);
}

.p-topService__bottom--skill-img::before {
	background: radial-gradient(circle, #ffefc1 0%, #f7f9e3 40%, transparent 70%);
	border-radius: 50%;
	content: "";
	filter: blur(25px);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: all 0.3s ease-in-out;
	will-change: filter;
	z-index: -1;
}

.p-topService__bottom--skill-img.is-glow::before {
	opacity: 1;
}

.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(1) .p-topService__bottom--skill-img img,
.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(2) .p-topService__bottom--skill-img img {
	height: clamp(3.125rem, 1.9642857143rem + 4.7619047619vi, 6.25rem);
	width: clamp(2.8125rem, 1.7678571429rem + 4.2857142857vi, 5.625rem);
}

.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(3) .p-topService__bottom--skill-img img {
	height: clamp(3.125rem, 2.0223214286rem + 4.5238095238vi, 6.09375rem);
	width: clamp(3.125rem, 2.0223214286rem + 4.5238095238vi, 6.09375rem);
}

.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(4) .p-topService__bottom--skill-img img,
.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(5) .p-topService__bottom--skill-img img,
.p-topService__bottom--skills .p-topService__bottom--skill:nth-of-type(6) .p-topService__bottom--skill-img img {
	height: clamp(3.3125rem, 2.2214285714rem + 4.4761904762vi, 6.25rem);
	width: clamp(3.3125rem, 2.2214285714rem + 4.4761904762vi, 6.25rem);
}

.p-topService__bottom--etc {
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.7357142857rem + 0.5714285714vi, 1.25rem);
	font-weight: 300;
	letter-spacing: clamp(0.07rem, 0.0588571429rem + 0.0457142857vi, 0.1rem);
	line-height: normal;
	margin-block-start: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	text-align: right;
}

.p-topWorks {
	background: var(--background-white);
}

.p-topWorks__inner {
	margin-inline: auto;
	max-width: 1008px;
	padding-block: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
}

.p-topWorks__contents {
	padding-block-end: 120px;
	padding-block-start: 64px;
}

.p-topWorks__contents--sp {
	align-items: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-block-end: 136px;
	padding-block-start: 62px;
	padding-inline: 24px;
	position: relative;
}

.p-topWorks__contents--sp .c-topWorks-item {
	margin-block-start: 88px;
}

.p-topWorks__contents--sp .c-topWorks-item:nth-of-type(1) {
	margin-block-start: 0px;
}

.p-topWorks__top,
.p-topWorks__bot {
	display: flex;
	flex-direction: row;
	gap: 16px;
	justify-content: center;
}

.p-topWorks__mid {
	display: flex;
	flex-direction: row;
	gap: 16px;
	justify-content: center;
	margin-block-start: -123px;
}

.p-topWorks__mid--img-left {
	margin-block-start: 138px;
}

.p-topWorks__mid--img-right {
	margin-block-start: 138px;
}

.p-topWorks__bot {
	margin-block-start: -105px;
}

.p-topWorks__mid--img-center {
	height: 259px;
	width: 352px;
}

.p-topAnimation__inner {
	margin-inline: auto;
	max-width: 1296px;
	padding-block-end: clamp(9rem, 7.7rem + 5.3333333333vi, 12.5rem);
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
	position: relative;
}

.p-topAnimation__contents {
	display: flex;
	flex-direction: column;
	gap: clamp(6.5rem, 6.1285714286rem + 1.5238095238vi, 7.5rem);
	padding-block-end: clamp(6.5rem, 5.7571428571rem + 3.0476190476vi, 8.5rem);
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
}

.p-topAnimation__item {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

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

.p-topAnimation__img {
	flex-shrink: 1;
	height: auto;
	max-width: 617px;
	min-width: 350px;
	text-align: center;
	width: auto;
}

.p-topAnimation__texts {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 587px;
}

.p-topAnimation__texts-left {
	padding-inline-start: 20px;
}

.p-topAnimation__texts-right {
	padding-inline-end: 20px;
}

.p-topAnimation__title {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.3142857143rem + 0.7619047619vi, 1rem);
}

.p-topAnimation__title p {
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1314285714rem + 0.0761904762vi, 0.2rem);
	line-height: normal;
	position: relative;
}

.p-topAnimation__title p + p::before {
	background-color: var(--background-white);
	content: "";
	height: 85%;
	left: -12px;
	position: absolute;
	top: 50%;
	transform: translateY(-45%);
	width: 1px;
}

.p-topAnimation__title--tool {
	display: flex;
	flex-direction: row;
	gap: 24px;
	position: relative;
}

.p-topAnimation__title--tool p {
	font-size: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	font-weight: 300;
	letter-spacing: normal;
	line-height: normal;
}

.p-topAnimation__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-topAnimation__text--aim,
.p-topAnimation__text--play {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.5928571429rem - 0.380952381vi, 0.25rem);
}

.p-topAnimation__text--aim p:nth-of-type(1),
.p-topAnimation__text--play p:nth-of-type(1) {
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.1rem, 0.0953571429rem + 0.019047619vi, 0.1125rem);
	line-height: 180%;
	position: relative;
	text-align: center;
	width: clamp(18.25rem, 17.8553571429rem + 1.619047619vi, 19.3125rem);
}

.p-topAnimation__text--aim p:nth-of-type(1)::before,
.p-topAnimation__text--aim p:nth-of-type(1)::after,
.p-topAnimation__text--play p:nth-of-type(1)::before,
.p-topAnimation__text--play p:nth-of-type(1)::after {
	background: var(--background-white);
	content: "";
	height: 1px;
	position: absolute;
	top: 54%;
	transform: translateY(-50%);
	width: clamp(2.6875rem, 2.7571428571rem - 0.2857142857vi, 2.5rem);
}

.p-topAnimation__text--aim p:nth-of-type(1)::before,
.p-topAnimation__text--play p:nth-of-type(1)::before {
	left: 0;
}

.p-topAnimation__text--aim p:nth-of-type(1)::after,
.p-topAnimation__text--play p:nth-of-type(1)::after {
	right: 0;
}

.p-topAnimation__text--play p:nth-of-type(1) {
	width: 170px;
}

.p-topAnimation__text--aim p:nth-of-type(2),
.p-topAnimation__text--play p:nth-of-type(2) {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-topAnimation__texts--btn {
	align-items: center;
	border: 1px solid var(--background-white);
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-inline-start: auto;
	padding: 10px 30px;
	transition: all 0.4s ease-in-out;
	width: 170px;
}

.p-topAnimation__texts--btn p {
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.28px;
	line-height: normal;
}

.p-topAnimation__inner::before {
	animation: spreadCircle 15s ease-out infinite;
	background: radial-gradient(circle, var(--accent-main-green) 0%, var(--background-black) 70%);
	border-radius: 50%;
	content: "";
	filter: blur(20px);
	height: 500px;
	left: 5%;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 500px;
	z-index: -2;
}

.p-topAnimation__item:nth-of-type(2),
.p-topAnimation__item:nth-of-type(3) {
	position: relative;
}

.p-topAnimation__item:nth-of-type(2)::before,
.p-topAnimation__item:nth-of-type(3)::before {
	animation: spreadCircle 15s ease-out infinite;
	background: radial-gradient(circle, var(--accent-main-green) 0%, var(--background-black) 70%);
	border-radius: 50%;
	content: "";
	filter: blur(20px);
	height: 500px;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 500px;
	z-index: -2;
}

.p-topAnimation__item:nth-of-type(2)::before {
	height: 450px;
	right: -25%;
	top: 15%;
	width: 450px;
}

.p-topAnimation__item:nth-of-type(3)::before {
	left: 15%;
	top: 35%;
}

.p-topSwiper-swiper {
	height: 145px;
	overflow-x: hidden;
}

.p-topSwiper-swiper-wrapper {
	display: flex;
}

.p-topSwiper-swiper .swiper-wrapper {
	transition-timing-function: linear;
}

.p-topSwiper-swiper-slide {
	height: 145px;
	width: 80px;
}

.p-topSwiper-swiper-slide img {
	display: block;
	height: 100%;
	width: 100%;
}

.p-topAbout__inner {
	padding-block-end: clamp(2.5rem, -0.2857142857rem + 11.4285714286vi, 10rem);
	padding-block-start: clamp(9rem, 7.7rem + 5.3333333333vi, 12.5rem);
}

.p-topAbout__container {
	display: flex;
	flex-direction: column;
}

.p-topAbout__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-inline: auto;
	max-width: 1296px;
	padding-inline: 24px;
	width: 100%;
}

.p-topAbout__content:nth-of-type(1) {
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-topAbout__content:nth-of-type(2) {
	margin-block-start: 80px;
}

.p-topAbout__title {
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	padding-inline-start: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	position: relative;
}

.p-topAbout__title p:nth-of-type(2) {
	font-weight: 300;
}

.p-topAbout__title--dot {
	animation: footersShadow 4s infinite;
	animation-delay: 1.5s;
	height: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
}

.p-topAbout__top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.p-topAbout__top--img {
	flex-shrink: 1;
	height: auto;
	min-width: 350px;
	text-align: center;
	width: auto;
}

.p-topAbout__top--texts {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 756px;
	padding-inline-start: 20px;
}

.p-topAbout__top--introduce {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: clamp(2rem, 1.6285714286rem + 1.5238095238vi, 3rem);
}

.p-topAbout__top--name {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.p-topAbout__top--name p:nth-of-type(1) {
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1314285714rem + 0.0761904762vi, 0.2rem);
	line-height: normal;
}

.p-topAbout__top--name p:nth-of-type(2) {
	color: #ccc;
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 275;
	letter-spacing: clamp(0.07rem, 0.0662857143rem + 0.0152380952vi, 0.08rem);
	line-height: normal;
}

.p-topAbout__top--text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-topAbout__top--text p {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-topAbout__top--time {
	display: flex;
	flex-direction: column;
}

.p-topAbout__top--time-up {
	display: inline-block;
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.1rem, 0.0953571429rem + 0.019047619vi, 0.1125rem);
	line-height: 180%;
	position: relative;
	text-align: center;
	width: 170px;
}

.p-topAbout__top--time-up::before,
.p-topAbout__top--time-up::after {
	background-color: var(--background-white);
	content: "";
	height: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}

.p-topAbout__top--time-up::before {
	left: 0;
}

.p-topAbout__top--time-up::after {
	right: 0;
}

.p-topAbout__top--time-mid {
	display: flex;
	flex-direction: row;
	gap: clamp(1.5rem, 1.1285714286rem + 1.5238095238vi, 2.5rem);
}

.p-topAbout__top--time-mid p {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-topAbout__top--time-down {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.4px;
	line-height: 180%;
}

.p-topAbout__slides {
	margin-block-start: 24px;
}

.topAbout-swiper {
	padding-block-start: 30px;
}

.topAbout-swiper-slide {
	height: 527px;
	width: 448px;
}

.topAbout-swiper-slide__item {
	height: 527px;
	width: 448px;
}

.topAbout-swiper-slide__item img {
	filter: grayscale(100%);
	transition: all 1s ease-in-out;
}

.swiper-slide-active img {
	filter: grayscale(0%);
}

.js-topSlideImage {
	height: auto;
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 1s ease;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.js-topSlideImage.is-active {
	opacity: 1;
	z-index: 1;
}

.topAbout-swiper-info {
	background: var(--background-black);
	height: 557px;
	left: 50%;
	padding-block-start: 70px;
	padding-inline-start: 48px;
	position: absolute;
	top: 0;
	transform: translateX(3%);
	width: 460px;
	z-index: 1;
}

.topAbout-swiper-info::before,
.topAbout-swiper-info::after {
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	position: absolute;
}

.topAbout-swiper-info::before {
	background-image: var(--before-bg-icon);
	height: var(--before-height, 10px);
	right: var(--before-right, 1px);
	top: var(--before-top, 28px);
	transform: rotate(var(--before-rotate, 0deg));
	width: var(--before-width, 190px);
}

.topAbout-swiper-info::after {
	background-image: var(--after-bg-icon);
	height: var(--after-height, 10px);
	right: var(--after-right, -62px);
	top: var(--after-top, 91px);
	transform: rotate(var(--after-rotate, -90deg));
	width: var(--after-width, 190px);
}

.topAbout-swiper-info__contents {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.topAbout-swiper-info__num {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	gap: clamp(0.25rem, 0.1571428571rem + 0.380952381vi, 0.5rem);
}

.topAbout-swiper-info__num-bold {
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.7357142857rem + 0.5714285714vi, 1.25rem);
	font-weight: 300;
	letter-spacing: clamp(0.07rem, 0.0588571429rem + 0.0457142857vi, 0.1rem);
	line-height: normal;
}

.topAbout-swiper-info__num--icon {
	color: #CCC;
	font-family: var(--ff-en);
	font-size: clamp(0.6875rem, 0.6178571429rem + 0.2857142857vi, 0.875rem);
	font-weight: 275;
	letter-spacing: clamp(0.055rem, 0.0494285714rem + 0.0228571429vi, 0.07rem);
	line-height: normal;
}

.topAbout-swiper-info__num-light {
	color: #CCC;
	font-family: var(--ff-en);
	font-size: clamp(0.75rem, 0.7035714286rem + 0.1904761905vi, 0.875rem);
	font-weight: 275;
	letter-spacing: clamp(0.06rem, 0.0562857143rem + 0.0152380952vi, 0.07rem);
	line-height: normal;
}

.topAbout-swiper-info__title {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.topAbout-swiper-info__title--ja {
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1314285714rem + 0.0761904762vi, 0.2rem);
	line-height: normal;
}

.topAbout-swiper-info__title--en {
	color: #CCC;
	font-family: var(--ff-en);
	font-size: clamp(0.75rem, 0.6571428571rem + 0.380952381vi, 1rem);
	font-weight: 275;
	letter-spacing: clamp(0.06rem, 0.0525714286rem + 0.0304761905vi, 0.08rem);
	line-height: normal;
}

.topAbout-swiper-info__text {
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.0875rem, 0.0828571429rem + 0.019047619vi, 0.1rem);
	line-height: 180%;
	max-width: 352px;
}

.topAbout-swiper-info__nav {
	align-items: center;
	bottom: 63px;
	display: flex;
	justify-content: flex-end;
	max-width: 352px;
	position: absolute;
	width: 100%;
}

.topAbout-swiper-info__nav--btn {
	display: flex;
	flex-direction: row;
	gap: 24px;
	margin-inline-start: 56px;
}

.topAbout-swiper-info__nav--btn-sp {
	display: none;
}

.topAbout-swiper-scrollbar {
	background: var(--sub-gray);
	height: 1px !important;
	position: static !important;
	width: 200px !important;
}

.topAbout-swiper-scrollbar .swiper-scrollbar-drag {
	background-color: var(--background-white);
}

.topAbout-swiper-info__nav--btn-prev,
.topAbout-swiper-info__nav--btn-next {
	border: 1px solid var(--background-white);
	height: 32px;
	width: 32px;
}

.topAbout-swiper-info__nav--btn-prev img,
.topAbout-swiper-info__nav--btn-next img {
	margin-block-end: 5px;
}

.p-topBlog {
	background-color: var(--background-white);
	background-image: url(../img/topBlog-bg.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.p-topBlog__inner {
	margin-inline: auto;
	max-width: 1008px;
	padding-block: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
}

/* .p-topBlog__contents {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block-end: 120px;
	padding-block-start: 64px;
} */
.p-topBlog__contents--dummy {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block-start: 64px;
	padding-inline-start: 78px;
}
@media screen and (max-width: 767px) {
	.p-topBlog__contents--dummy {
		padding-inline-start: 57px;
	}
}

.p-topBlog__btn {
	text-align: center;
}

.p-topContact__inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-inline: auto;
	max-width: 1008px;
	padding-block: 120px;
	padding-inline: 24px;
}

.p-topContact__texts {
	display: flex;
	flex-direction: column;
	gap: 64px;
	max-width: 476px;
	padding-inline-end: 10px;
	position: relative;
}

.p-topContact__texts:before {
	animation: bgBlur 4s infinite;
	background: linear-gradient(to right, transparent, var(--accent-main-green), transparent);
	content: "";
	filter: blur(2px);
	height: 4px;
	left: -20%;
	opacity: 0.7;
	position: absolute;
	rotate: -10deg;
	top: 45%;
	width: clamp(23.125rem, 18.9464285714rem + 17.1428571429vi, 34.375rem);
}

.p-topContact-title {
	display: flex;
	flex-direction: column;
	-moz-text-align-last: left;
	font-weight: 400;
	height: clamp(7.9375rem, 7.7053571429rem + 0.9523809524vi, 8.5625rem);
	text-align-last: left;
}

.p-topContact-title--en {
	font-family: var(--ff-en);
	font-size: clamp(4rem, 3.8142857143rem + 0.7619047619vi, 4.5rem);
	letter-spacing: clamp(0.32rem, 0.3051428571rem + 0.060952381vi, 0.36rem);
	line-height: normal;
}

.p-topContact-title--ja {
	font-size: 24px;
	letter-spacing: 2.4px;
	line-height: normal;
}

.p-topContact-content {
	font-size: clamp(0.9375rem, 0.8678571429rem + 0.2857142857vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0867857143rem + 0.0285714286vi, 0.1125rem);
	line-height: 180%;
}

.p-topContact__btns {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: clamp(2rem, 1.8142857143rem + 0.7619047619vi, 2.5rem);
	margin-block-start: 11px;
}

.p-works {
	background: var(--background-white);
}

.p-works__inner {
	margin-inline: auto;
	max-width: 1008px;
	padding-block-end: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
}

.p-works__categories {
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-works__categories--list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px clamp(1.375rem, 1.1892857143rem + 0.7619047619vi, 1.875rem);
	justify-content: center;
}

.p-works__categories--item {
	border: 1px solid var(--color-text-black);
	color: var(--color-text-black);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.0875rem, 0.0828571429rem + 0.019047619vi, 0.1rem);
	line-height: 180%;
	padding-block: 8px;
	text-align: center;
	transition: all 0.3s ease-in-out;
	width: clamp(10rem, 9.8142857143rem + 0.7619047619vi, 10.5rem);
}

.p-works__categories--item.is-active {
	background: var(--background-black);
	color: var(--color-text-white);
}

.p-works__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 80px 86px;
	margin-block-start: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
}

.p-works__list--item {
	height: 437px;
	width: 437px;
}

.p-works-details {
	background: var(--background-white);
}

.p-works-details-fv {
	position: relative;
}

.p-works-details-fv__bg {
	display: block;
	max-height: 800px;
	position: relative;
}

.p-works-details-fv__bg img {
	-o-object-fit: cover;
	filter: blur(2px);
	height: 100%;
	max-height: 800px;
	object-fit: cover;
	width: 100%;
}

.p-works-details-fv__bg::before {
	background: url("../img/works-details-bg-blur.webp") center/cover no-repeat;
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.p-works-details-fv__bg::after {
	background-image: url(../img/works-details-right-bg.webp);
	background-position: 170%;
	background-repeat: no-repeat;
	background-size: 85% 100%;
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.p-works-details-fv__inner {
	align-items: center;
	bottom: 50%;
	display: flex;
	height: 100%;
	justify-content: flex-end;
	left: 50%;
	max-width: 1440px;
	position: absolute;
	transform: translate(-50%, 50%);
	width: 100%;
	z-index: 2;
}

.p-works-details-fv__left {
	left: 5%;
	position: relative;
	top: 5%;
	width: 29.375%;
}

.p-works-details-fv__right {
	width: 70.4861111111%;
}

.p-works-details-fv__right img {
	max-height: 800px;
	-o-object-fit: contain;
	object-fit: contain;
}

.p-works-details-fv__title {
	font-size: clamp(2rem, 1.4428571429rem + 2.2857142857vi, 3.5rem);
	font-weight: 400;
	letter-spacing: clamp(0.16rem, 0.1154285714rem + 0.1828571429vi, 0.28rem);
	line-height: normal;
}

.p-works-details-fv__site-kind {
	font-size: clamp(1rem, 0.6285714286rem + 1.5238095238vi, 2rem);
	font-weight: 400;
	letter-spacing: clamp(0.08rem, 0.0502857143rem + 0.1219047619vi, 0.16rem);
	line-height: normal;
	margin-block-start: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
}

.p-works-details-fv__tool {
	display: flex;
	flex-direction: row;
	font-size: clamp(0.875rem, 0.7821428571rem + 0.380952381vi, 1.125rem);
	font-weight: 400;
	letter-spacing: clamp(0.07rem, 0.0625714286rem + 0.0304761905vi, 0.09rem);
	line-height: normal;
	margin-block-start: clamp(1.5rem, 0.9428571429rem + 2.2857142857vi, 3rem);
}

.p-works-details-fv__tool p:nth-of-type(1)::after {
	content: "|";
	padding-inline: clamp(0.5rem, 0.3142857143rem + 0.7619047619vi, 1rem);
}

.p-works-details-fv__btn {
	align-items: center;
	background: var(--sub-black);
	border: 1px solid var(--background-white);
	display: inline-flex;
	flex-direction: row;
	font-family: var(--ff-en);
	font-size: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	font-weight: 300;
	gap: 8px;
	letter-spacing: clamp(0.08rem, 0.0651428571rem + 0.060952381vi, 0.12rem);
	line-height: normal;
	margin-block-start: clamp(2.5rem, 1.9428571429rem + 2.2857142857vi, 4rem);
	padding-block: clamp(0.625rem, 0.4857142857rem + 0.5714285714vi, 1rem);
	padding-inline-end: clamp(2rem, 0.9785714286rem + 4.1904761905vi, 4.75rem);
	padding-inline-start: clamp(2rem, 0.9785714286rem + 4.1904761905vi, 4.75rem);
	transition: all 0.4s ease-in-out;
}

.p-works-details-contents__inner {
	margin-inline: auto;
	max-width: 1008px;
	padding-block-end: 120px;
	padding-block-start: clamp(4rem, 2.7rem + 5.3333333333vi, 7.5rem);
	padding-inline: 24px;
}

.p-works-details__headline {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-inline: auto;
	max-width: 1296px;
	width: 100%;
}

.p-works-details__title {
	font-family: var(--ff-en);
	font-size: clamp(1.125rem, 0.9857142857rem + 0.5714285714vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.09rem, 0.0788571429rem + 0.0457142857vi, 0.12rem);
	line-height: normal;
	padding-inline-start: clamp(1rem, 0.8142857143rem + 0.7619047619vi, 1.5rem);
	position: relative;
}

.p-works-details__title p:nth-of-type(2) {
	color: var(--color-text-black);
	font-weight: 300;
}

.p-works-details__title p:nth-of-type(2) span {
	font-weight: 300;
}

.p-works-details__title--dot {
	animation: footersShadow 4s infinite;
	animation-delay: 1.5s;
	height: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(0.5rem, 0.4071428571rem + 0.380952381vi, 0.75rem);
}

.p-works-details__details--items {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-block-start: 24px;
}

.p-works-details__items--date,
.p-works-details__items--range,
.p-works-details__items--info {
	width: 29.1666666667%;
}

.p-works-details__items--date p,
.p-works-details__items--range p,
.p-works-details__items--info p {
	color: var(--color-text-black);
	font-weight: 300;
}

.p-works-details__items--date p:nth-of-type(1),
.p-works-details__items--range p:nth-of-type(1),
.p-works-details__items--info p:nth-of-type(1) {
	border-bottom: 0.5px solid var(--sub-gray);
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	letter-spacing: clamp(0.1rem, 0.0953571429rem + 0.019047619vi, 0.1125rem);
	line-height: 180%;
	position: relative;
}

.p-works-details__items--date p:nth-of-type(1)::after,
.p-works-details__items--range p:nth-of-type(1)::after,
.p-works-details__items--info p:nth-of-type(1)::after {
	background: var(--background-white);
	border: 0.5px solid var(--sub-gray);
	bottom: 0;
	content: "";
	height: 12px;
	position: absolute;
	right: 0;
	transform: translateY(6.3px) rotate(45deg);
	width: 12px;
}

.p-works-details__items--date p:nth-of-type(2),
.p-works-details__items--range p:nth-of-type(2),
.p-works-details__items--info p:nth-of-type(2) {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	margin-block-start: 16px;
}

.p-works-details__points {
	margin-block-start: clamp(2.5rem, 2.3142857143rem + 0.7619047619vi, 3rem);
	width: 100%;
}

.p-works-details__points p {
	color: var(--color-text-black);
	font-weight: 300;
}

.p-works-details__points p:nth-of-type(1) {
	border-bottom: 0.5px solid var(--sub-gray);
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	letter-spacing: clamp(0.1rem, 0.0953571429rem + 0.019047619vi, 0.1125rem);
	line-height: 180%;
	position: relative;
}

.p-works-details__points p:nth-of-type(1)::after {
	background: var(--background-white);
	border: 0.5px solid var(--sub-gray);
	bottom: 0;
	content: "";
	height: 12px;
	position: absolute;
	right: 0;
	transform: translateY(6.3px) rotate(45deg);
	width: 12px;
}

.p-works-details__points p:nth-of-type(2) {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	margin-block-start: 16px;
}

.p-works-details-contents--featured {
	margin-block-start: 80px;
}

.p-works-details-contents--featured__contents {
	display: flex;
	flex-direction: row;
	margin-block-start: 24px;
}

.p-works-details-contents--featured__card {
	width: 30.8333333333%;
}

.p-works-details-contents--featured__card p {
	color: var(--color-text-black);
}

.p-works-details-contents--featured__card--title {
	border-bottom: 0.5px solid var(--sub-gray);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 1.8px;
	line-height: 180%;
	margin-block-start: 5px;
	position: relative;
}

.p-works-details-contents--featured__card--title::after {
	background: var(--background-white);
	border: 0.5px solid var(--sub-gray);
	bottom: 0;
	content: "";
	height: 12px;
	position: absolute;
	right: 0;
	transform: translateY(6.3px) rotate(45deg);
	width: 12px;
}

.p-works-details-contents--featured__card--ttext {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 180%;
	margin-block-start: 16px;
}

.p-works-details-contents--voice {
	margin-block-start: 80px;
}

.p-works-details-contents--voice__item {
	margin-block-start: 24px;
}

.p-works-details-contents--voice__item + .p-works-details-contents--voice__item {
	margin-block-start: 56px;
}

.p-works-details-contents--voice__item--top {
	align-items: flex-end;
	border-bottom: 0.5px solid var(--sub-gray);
	display: flex;
	flex-direction: row;
	padding-block-end: 8px;
	position: relative;
}

.p-works-details-contents--voice__item--top::after {
	background: var(--background-white);
	border: 0.5px solid var(--sub-gray);
	bottom: 0;
	content: "";
	height: 12px;
	position: absolute;
	right: 0;
	transform: translateY(6.3px) rotate(45deg);
	width: 12px;
}

.p-works-details-contents--voice__item--name {
	color: var(--color-text-black);
	font-size: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1314285714rem + 0.0761904762vi, 0.2rem);
	line-height: normal;
}

.p-works-details-contents--voice__item--job {
	color: var(--sub-gray);
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.07rem, 0.0662857143rem + 0.0152380952vi, 0.08rem);
	line-height: normal;
	margin-inline-start: clamp(0.5rem, 0.3607142857rem + 0.5714285714vi, 0.875rem);
}

.p-works-details-contents--voice__item--sns {
	margin-inline-start: clamp(2rem, 1.2571428571rem + 3.0476190476vi, 4rem);
}

.p-works-details-contents--voice__item--sns a + a {
	margin-inline-start: 24px;
}

.p-works-details-contents--voice__item--bottom {
	color: var(--color-text-black);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 180%;
	margin-block-start: 16px;
}

.p-works-details-others {
	background-image: url(../img/works-details-next-bg.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.p-works-details-others__inner {
	padding-block-end: 60px;
	padding-block-start: 48px;
}

.p-works-details-others__items {
	display: flex;
	flex-direction: row;
	gap: 3.7037037037%;
	margin-block-start: 48px;
	margin-inline: auto;
	max-width: 1296px;
	padding-inline: 24px;
}

.p-works-details-others__link {
	border: 1px solid var(--background-black);
	width: 32%;
}

.p-works-details-others__items--swiper {
	height: 262px;
	margin-block-start: 48px;
}

.p-works-details-others__items--wrapper {
	transition-timing-function: ease-in-out;
}

.p-works-details-others__items--slide {
	height: 262px;
	width: 262px;
}

.p-works-details-others__swiper--link {
	border: 1px solid var(--background-black);
	display: block;
}

.p-works-details-others__items--swiper--btns {
	display: flex;
	justify-content: space-between;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	z-index: 2;
}

.p-works-details__btn {
	padding-block-end: 160px;
	padding-block-start: 80px;
}

.p-animation {
	background: var(--background-white);
}

.p-animation__inner {
	margin-inline: auto;
	max-width: 1296px;
	padding-block-end: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
}

.p-animation__category--describe-1,
.p-animation__category--describe-2 {
	color: var(--color-text-black);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 1.6px;
	line-height: 180%;
	text-align: center;
}

.p-animation__category--describe-1 {
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-animation__category--describe-2 span {
	font-weight: 500;
}

.p-animation__categories {
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-animation__categories--list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px clamp(1.375rem, 1.1892857143rem + 0.7619047619vi, 1.875rem);
	justify-content: center;
}

.p-animation__categories--item {
	border: 1px solid var(--color-text-black);
	color: var(--color-text-black);
	font-size: clamp(0.875rem, 0.8285714286rem + 0.1904761905vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.0875rem, 0.0828571429rem + 0.019047619vi, 0.1rem);
	line-height: 180%;
	padding-block: 8px;
	text-align: center;
	transition: all 0.3s ease-in-out;
	width: clamp(10rem, 9.8142857143rem + 0.7619047619vi, 10.5rem);
}

.p-animation__categories--item.is-active {
	background: var(--background-black);
	color: var(--color-text-white);
}

.p-animation__lists {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 80px 30px;
	margin-block-start: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
}

.p-animation__lists--center {
	flex-direction: column;
	gap: 40px;
	justify-content: center;
	margin-inline: auto;
	max-width: 396px;
}

.p-animation__btn {
	margin-block-start: 80px;
}

.p-animation__btn-mp {
	padding-inline: 72px;
}

.p-animation--lists__btn {
	display: none;
	margin-block-start: 64px;
}

.p-animation--lists__btn .c-btn {
	width: 100%;
}

.p-contact {
	background: var(--background-white);
}

.p-contact__inner {
	margin-inline: auto;
	max-width: 1008px;
	padding-block-end: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
}

.p-contact__description {
	color: var(--color-text-black);
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
	text-align: center;
}

.p-contact__form {
	color: var(--color-text-black);
	margin-block-start: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
	text-align: center;
}

.p-contact__field + .p-contact__field {
	margin-block-start: 40px;
}
.p-contact__field-40 {
	margin-block-start: 40px;
}

.p-contact__field {
	text-align: left;
}

.p-contact__label {
	font-size: clamp(1rem, 0.9535714286rem + 0.1904761905vi, 1.125rem);
	font-weight: 400;
	letter-spacing: 1.8px;
	line-height: 180%;
}

.p-contact__tag {
	color: #A6030D;
	font-family: var(--ff-en);
	font-size: clamp(0.875rem, 0.7357142857rem + 0.5714285714vi, 1.25rem);
	font-weight: 300;
	letter-spacing: clamp(0.07rem, 0.0588571429rem + 0.0457142857vi, 0.1rem);
	line-height: normal;
	margin-inline-start: 4px;
}

.p-contact__item {
	margin-block-start: 8px;
}

.p-contact__input {
	border: 1px solid var(--background-black);
	font-weight: 300;
	padding: 16px;
	width: 100%;
}

.p-contact__input.invalid {
	border: 1px solid #A6030D;
}

.p-contact__error-message {
	color: #A6030D;
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
	margin-block-start: 8px;
}

.p-contact__input:hover,
.p-contact__input:focus,
.p-contact__privacy-checkbox-input:hover,
.p-contact__privacy-checkbox-input:focus {
	border: 1px solid var(--accent-main-green);
	outline: none;
}

.p-contact__checkboxes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-contact__checkbox-text {
	color: var(--background-black);
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	line-height: normal;
}

.p-contact__checkbox-input {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-contact__checkbox-input .wpcf7-list-item {
	margin: 0;
}

.p-contact__checkbox-input .wpcf7-list-item label input {
	border: 1px solid var(--color-text-black);
  height: 20px;
  position: relative;
  width: 20px;
}
.p-contact__checkbox-input .wpcf7-list-item label input:checked:before {
	background: url(../img/contact-icon.webp) no-repeat center center / contain;
	content: "";
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

.p-contact__checkbox-input .wpcf7-list-item .wpcf7-list-item-label {
	color: var(--background-black);
	font-size: clamp(.9375rem, .9142857143rem + .0952380952vi, 1rem);
	font-weight: 300;
	line-height: normal;
}
.wpcf7-not-valid-tip {
	display: none;
}

.p-contact__checkbox-input + span,
.p-contact__checkbox-input + * {
	color: var(--background-black);
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	line-height: normal;
}

.p-contact__checkbox input[type=checkbox] {
	border: 1px solid var(--color-text-black);
	height: 20px;
	position: relative;
	width: 20px;
}

.p-contact__checkbox input[type=checkbox]:checked:before {
	background: url(../img/contact-icon.webp) no-repeat center center/contain;
	content: "";
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

.p-contact__checkbox input[type=checkbox].invalid {
	border: 1px solid #A6030D;
}

.p-contact__privacy-checkbox-input.invalid .p-contact__privacy-checkbox-text::before {
	outline-color: #A6030D;
}

.p-contact-textarea {
	height: clamp(15rem, 14.3035714286rem + 2.8571428571vi, 16.875rem);
	resize: vertical;
}

.p-contact__privacy {
	margin-block-start: 64px;
	transform: translateX(20px);
}

.p-contact__link {
	color: var(--accent-main-green);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: 10%;
	text-underline-position: from-font;
}

.p-contact__privacy-checkbox-input {
	block-size: 1px;
	inline-size: 1px;
	position: absolute;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
}

.p-contact__privacy-checkbox-input:checked + .p-contact__privacy-checkbox-text::after {
	opacity: 1;
}

.p-contact__privacy-checkbox-text {
	font-size: 16px;
	position: relative;
}

.p-contact-privacy-checkbox {
  text-align: center;
}
.wpcf7-list-item-label {
  position: relative;
}
.p-contact-privacy-checkbox input[type=checkbox] {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0; 
}
.p-contact-privacy-checkbox .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 52%;
  left: -40px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid #000;
  background: #FFF;
  cursor: pointer;
  transition: all 0.3s;
}
.p-contact-privacy-checkbox .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 52%;
  left: -36px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: transparent url(../img/contact-icon.webp) no-repeat center center / contain;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 0; 
}
.p-contact-privacy-checkbox input[type=checkbox]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}




.wpcf7-spinner {
	display: none;
}


.p-contact__error-message--left {
	transform: translateX(-20px);
}

.p-contact__button {
	margin-block-start: 24px;
}

.p-contact-btn {
	background: var(--background-white);
	border: 1px solid var(--background-black);
	color: var(--color-text-black);
	font-size: clamp(1.25rem, 1.1571428571rem + 0.380952381vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.125rem, 0.1157142857rem + 0.0380952381vi, 0.15rem);
	line-height: normal;
	padding: 16px 88px;
	transition: all 0.4s ease-in-out;
}

.p-contact-btn:disabled {
	border: 1px solid var(--sub-gray);
	color: var(--sub-gray);
}

.p-contact-thanks {
	animation: contact-thanksBg 1s ease-in-out forwards;
	animation-delay: 4s;
	background: var(--background-black);
}

.p-contact-thanks__inner {
	padding-block-end: clamp(19.5rem, 19.2910714286rem + 0.8571428571vi, 20.0625rem);
	padding-block-start: clamp(11.6875rem, 10.0160714286rem + 6.8571428571vi, 16.1875rem);
	position: relative;
	text-align: center;
}

.p-contact-thanks__top {
	height: clamp(7.1875rem, 4.5178571429rem + 10.9523809524vi, 14.375rem);
	position: relative;
	z-index: 0;
}

.p-contact-thanks__title--en {
	animation: contact-thanksFont 1s ease-in-out forwards;
	animation-delay: 4s;
	color: var(--color-text-white);
	font-family: var(--ff-en);
	font-size: clamp(3rem, 1.8857142857rem + 4.5714285714vi, 6rem);
	font-weight: 400;
	letter-spacing: clamp(0.24rem, 0.1508571429rem + 0.3657142857vi, 0.48rem);
	line-height: normal;
}

.p-contact-thanks__title--ja {
	animation: contact-thanksFont 1s ease-in-out forwards;
	animation-delay: 4s;
	color: var(--color-text-white);
	font-size: clamp(1rem, 0.6285714286rem + 1.5238095238vi, 2rem);
	font-weight: 400;
	letter-spacing: clamp(0.1rem, 0.0628571429rem + 0.1523809524vi, 0.2rem);
	line-height: normal;
}

.p-contact-thanks__bottom {
	animation: thanks-opacity 1s ease-in-out forwards;
	animation-delay: 3s;
	margin-inline: auto;
	max-width: 1008px;
	opacity: 0;
	padding-inline: 24px;
}

.p-contact-thanks__bottom p:nth-of-type(1) {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	margin-block-start: clamp(3rem, 2.2571428571rem + 3.0476190476vi, 5rem);
}

.p-contact-thanks__bottom p:nth-of-type(2) {
	font-size: clamp(0.75rem, 0.7035714286rem + 0.1904761905vi, 0.875rem);
	font-weight: 300;
	letter-spacing: clamp(0.075rem, 0.0703571429rem + 0.019047619vi, 0.0875rem);
	line-height: 180%;
	margin-block-start: 24px;
}

.p-contact-thanks-bg__bar {
	height: 255px;
	left: 50%;
	margin-inline: auto;
	position: absolute;
	top: 15%;
	transform: translateX(-30%);
	width: 351px;
}

.p-contact-thanks-bg__bar--left,
.p-contact-thanks-bg__bar--right {
	animation-fill-mode: forwards;
	background: linear-gradient(to right, var(--accent-main-green) 0%, var(--accent-main-green) 99%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	content: "";
	height: 1px;
	position: absolute;
}

.p-contact-thanks-bg__bar--left {
	animation: barGrow 0.5s ease-in forwards;
	bottom: 0;
	transform: translateY(-106px) rotate(45deg);
	transform-origin: left;
	width: 150px;
}

.p-contact-thanks-bg__bar--right {
	animation: barGrow 0.5s ease-in-out 0.5s forwards;
	right: 0;
	top: 0;
	transform: translateX(9px) rotate(-45deg);
	transform-origin: right;
	width: 360px;
}

.p-contact-thanks__btn {
	animation: contact-thanksOp 1s ease-in-out forwards;
	animation-delay: 4.8s;
	background: var(--background-white);
	border: 1px solid var(--background-black);
	color: var(--color-text-black);
	display: inline-block;
	font-size: clamp(1.25rem, 1.1571428571rem + 0.380952381vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.125rem, 0.1157142857rem + 0.0380952381vi, 0.15rem);
	line-height: normal;
	margin-block-start: clamp(4rem, 3.6285714286rem + 1.5238095238vi, 5rem);
	opacity: 0;
	padding-block: 16px;
	padding-inline: 70px;
	text-align: center;
	transition: all 0.3s ease-in-out;
}

.p-contact-thanks__btn:hover {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.p-privacy {
	background: var(--background-white);
}

.p-privacy__inner {
	margin-inline: auto;
	max-width: 1000px;
	padding-block-end: 160px;
	padding-block-start: clamp(7.5rem, 6.5714285714rem + 3.8095238095vi, 10rem);
	padding-inline: 24px;
}

.p-section__title {
	color: var(--color-text-black);
	font-size: clamp(1.5rem, 1.1285714286rem + 1.5238095238vi, 2.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.15rem, 0.1128571429rem + 0.1523809524vi, 0.25rem);
	line-height: normal;
	text-align: center;
}

.p-privacy__texts {
	color: #000;
	margin-block-start: clamp(3rem, 2.6285714286rem + 1.5238095238vi, 4rem);
}

.p-privacy__texts--top p {
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-privacy__texts--middle {
	margin-block-start: 48px;
}

.p-privacy__texts--text + .p-privacy__texts--text {
	margin-block-start: 24px;
}

.p-privacy__texts--text p:nth-of-type(1),
.p-privacy__texts--text p:nth-of-type(2) {
	color: #000;
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-style: normal;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-privacy__texts--text p:nth-of-type(1) {
	font-weight: 400;
}

.p-privacy__texts--text p:nth-of-type(2) {
	font-weight: 300;
}

.p-privacy__texts--text ol li {
	color: #000;
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-style: normal;
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
	padding-inline-start: 14px;
	position: relative;
}

.p-privacy__texts--text ol li:before {
	content: "・";
	font-size: 12px;
	font-weight: 300;
	left: 0;
	position: absolute;
}

.p-privacy__texts--bottom {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 48px;
}

.p-privacy__texts--bottom p:nth-of-type(1),
.p-privacy__texts--bottom p:nth-of-type(2) {
	color: #000;
	font-size: clamp(0.9375rem, 0.9142857143rem + 0.0952380952vi, 1rem);
	font-style: normal;
	letter-spacing: clamp(0.09375rem, 0.0914285714rem + 0.0095238095vi, 0.1rem);
	line-height: 180%;
}

.p-privacy__texts--bottom p:nth-of-type(1) {
	font-weight: 400;
}

.p-privacy__texts--bottom p:nth-of-type(2) {
	font-weight: 300;
}

.p-privacy__btn {
	margin-block-start: clamp(5rem, 4.0714285714rem + 3.8095238095vi, 7.5rem);
	text-align: center;
}

.p-privacy__btn a {
	background: var(--background-white);
	border: 1px solid var(--color-text-black);
	color: var(--color-text-black);
	display: inline-block;
	font-size: clamp(1.25rem, 1.1571428571rem + 0.380952381vi, 1.5rem);
	font-weight: 300;
	letter-spacing: clamp(0.125rem, 0.1157142857rem + 0.0380952381vi, 0.15rem);
	line-height: normal;
	padding-block: 8px;
	padding-inline: 48px;
	transition: all 0.4s ease-in-out;
}

.p-404__inner {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	gap: 5.4310344828%;
	justify-content: center;
	margin-inline: auto;
	max-width: 1193px;
	padding-block-end: clamp(4.9375rem, 4.125rem + 3.3333333333vi, 7.125rem);
	padding-block-start: clamp(6.25rem, 5.1357142857rem + 4.5714285714vi, 9.25rem);
	padding-inline: 24px;
}

.p-404__img img {
	height: 100%;
	width: 100%;
}

.p-404__contents {
	flex-shrink: 0;
	margin-block-end: 5%;
}

.p-404__text p {
	font-size: clamp(0.9375rem, 0.8678571429rem + 0.2857142857vi, 1.125rem);
	font-weight: 300;
	letter-spacing: clamp(0.09375rem, 0.0867857143rem + 0.0285714286vi, 0.1125rem);
	line-height: 180%;
}

.p-404__text p:nth-of-type(2) {
	margin-block-start: clamp(1.5rem, 1.3142857143rem + 0.7619047619vi, 2rem);
}

.p-404__btn {
	background: var(--background-black);
	border: 1px solid var(--background-white);
	display: block;
	font-family: var(--ff-en);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 1.92px;
	line-height: normal;
	margin-block-start: 32px;
	max-width: 268px;
	padding-block: 16px;
	text-align: center;
	transition: all 0.4s ease-in-out;
}

html.is-fixed,
body.is-fixed {
	overflow-y: hidden;
	width: 100%;
}

@media (min-width: 450px) and (max-width: 767px) {

.u-hidden-mid {
	display: none;
}

}

@media screen and (min-width: 768px) {

.l-drawer__nav--link:hover {
	color: var(--accent-main-green);
	opacity: 0.8;
}

.l-drawer__nav--btn:hover {
	background-color: var(--background-white);
	border-color: var(--accent-main-green);
}

.l-drawer__nav--btn:hover a {
	color: var(--accent-main-green);
	opacity: 0.8;
}

.l-footer__link {
	transition: all 0.4s ease-in-out;
}

.l-footer__link:hover {
	color: var(--accent-main-lightgreen);
	opacity: 0.8;
}

.c-contact__btn {
	transition: all 0.5s ease-in-out;
}

.c-contact__btn:hover {
	background: var(--background-white);
	color: var(--accent-main-green);
	opacity: 0.8;
}

.c-contact__btn:hover svg g {
	fill: var(--accent-main-green);
}

.c-contact__btn svg g {
	transition: all 0.5s ease-in-out;
}

.c-blog__item:hover .c-blog__article--bottom {
	color: var(--accent-main-green);
}

.c-blog__item:hover .c-blog_icon {
	background: rgba(112, 161, 129, 0.45);
}

.c-btn {
	max-width: 257px;
}

.btn-white:hover {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.btn-black:hover {
	background: var(--background-white);
	color: var(--accent-main-green);
}

.c-pagetop:hover .c-pagetop-btn {
	background: rgba(112, 161, 129, 0.3);
}

.c-animation__card--btn:hover {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.c-animation__card--btn:hover::before {
	filter: brightness(0) saturate(100%) invert(88%) sepia(18%) saturate(293%) hue-rotate(88deg) brightness(91%) contrast(90%);
}

.c-animation__modal {
	background: var(--background-black);
	display: none;
	height: 100vh;
	inset: 0;
	overflow-y: auto;
	position: fixed;
	width: 100%;
	z-index: 2000;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no_scroll {
	overflow: hidden;
}

.p-topMessage-bottom__btn button:not(.is-active):hover {
	background: rgba(112, 161, 129, 0.3);
}

.p-topAnimation__texts--btn:hover {
	background: rgba(112, 161, 129, 0.3);
}

.p-topAbout__top--introduce a {
	transition: all 0.4s ease-in-out;
}

.p-topAbout__top--introduce a:hover {
	opacity: 0.4;
}

.topAbout-swiper-info__nav--btn-prev,
.topAbout-swiper-info__nav--btn-next {
	transition: all 0.3s ease-in-out;
}

.topAbout-swiper-info__nav--btn-prev:hover,
.topAbout-swiper-info__nav--btn-next:hover {
	opacity: 0.4;
}

.p-works__categories--list {
	justify-content: center;
}

.p-works__categories--list .p-works__categories--item:not(.is-active):hover {
	background: rgba(112, 161, 129, 0.35);
}

.p-works-details-fv__btn:hover {
	background: rgba(178, 213, 190, 0.4);
}

.p-works-details-contents--featured__contents {
	gap: 3.75%;
}

.p-works-details-others__link img {
	transition: opacity 0.3s ease-in-out;
}

.p-works-details-others__link img:hover {
	opacity: 0.7;
}

.p-works-details-others__items--sp {
	display: none;
}

.p-animation__categories--list {
	justify-content: center;
}

.p-animation__categories--list .p-animation__categories--item:not(.is-active):hover {
	background: rgba(112, 161, 129, 0.35);
}

.p-contact-btn:hover {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.p-contact-btn:disabled:hover {
	background: var(--background-white);
	border: 1px solid var(--sub-gray);
	color: var(--sub-gray);
}

.p-privacy__btn:hover a {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.p-404__btn:hover {
	background: rgba(178, 213, 190, 0.4);
}

.u-hidden-pc {
	display: none;
}

}

@media (min-width: 768px) and (max-width: 1023px) {

.u-hidden-tab {
	display: none;
}

}

@media screen and (min-width: 860px) {

.p-loading-turn {
	display: none;
}

}

@media screen and (max-width: 870px) and (min-width: 768px) {

.c-animation__card {
	max-width: 500px;
}

.c-animation--modal__inner {
	padding-inline: 80px;
}

.p-animation__lists {
	margin-inline: auto;
	max-width: 500px;
}

}

@media screen and (max-width: 900px) and (min-width: 768px) {

.c-animation__modal--top--close {
	right: 1.5%;
	top: 1.5%;
}

}

@media screen and (min-width: 1025px) {

.c-topWorks-item:hover .c-topWorks-item__img,
.c-topWorks-item:hover .c-topWorks-item__texts {
	transform: translateX(-109px);
}

.c-topWorks-item-right:hover .c-topWorks-item__img,
.c-topWorks-item-right:hover .c-topWorks-item__texts {
	transform: translateX(109px);
}

.p-topMessage-bottom__contents {
	padding-block: 10px;
	height: 495px;
}

.p-topWorks__contents--sp {
	display: none;
}

.p-works__list:hover .c-topWorks-item__img,
.p-works__list:hover .c-topWorks-item__texts {
	transform: none;
}

.p-contact-thanks__bottom-hidden {
	display: none;
}

}

@media screen and (max-width: 1295px) and (min-width: 871px) {

.p-animation__lists {
	margin-inline: auto;
	max-width: 822px;
}

}

@media screen and (min-width: 1440px) {

.p-works__list .c-topWorks-item:nth-of-type(even):hover .c-topWorks-item__img,
.p-works__list .c-topWorks-item:nth-of-type(even):hover .c-topWorks-item__texts {
	transform: translateX(109px);
}

.p-works__list .c-topWorks-item:nth-of-type(odd):hover .c-topWorks-item__img,
.p-works__list .c-topWorks-item:nth-of-type(odd):hover .c-topWorks-item__texts {
	transform: translateX(-109px);
}

}

@media screen and (max-width: 1024px) {

.c-topWorks-item {
	box-shadow: 4px 16px 32px 0px rgba(0, 0, 0, 0.35);
	height: 341px;
	width: 342px;
}

.c-pagetop {
	inset-block-end: 40px;
	inset-inline-end: 24px;
}

.p-fv-bg-box2 {
	height: 267px;
	width: 267px;
	--path: path("M 1 1 H 266 V 266 H 1 Z");
	left: 34px;
	top: 114px;
}

.p-fv-bg-box3 {
	right: 49px;
	top: 261px;
}

.p-fv-bg-box4 {
	height: 250px;
	width: 250px;
	--path: path("M 1 1 H 249 V 249 H 1 Z");
	right: -50px;
	top: 330px;
}

.p-topMessage-top__inner {
	gap: 13px;
}

.p-topMessage-top-sub {
	width: 42%;
}

.p-topMessage-bottom__contents {
	flex-direction: column;
	gap: 40px;
	height: auto;
}

.p-topMessage-bottom__texts {
	padding-inline-start: 0px;
}

.p-topWorks__contents {
	display: none;
}

.p-topAbout__top {
	flex-direction: column;
	gap: 32px;
}

.p-topAbout__top--texts {
	max-width: 1024px;
	padding-inline-start: 0px;
}

.p-topAbout__top--time-up {
	width: 187px;
}

.p-topAbout__top--time-up::before,
.p-topAbout__top--time-up::after {
	width: 43px;
}

.topAbout-swiper-slide {
	height: 462px;
	width: 393px !important;
}

.topAbout-swiper-slide__item {
	height: 462px;
	width: 393px;
}

.topAbout-swiper-slide__item img {
	height: 462px;
	width: 393px;
}

.js-topSlideImage {
	display: block;
	height: 462px;
	max-width: 100%;
	width: 393px;
}

.topAbout-swiper-info {
	height: 310px;
	max-width: 450px;
	padding-block-start: 32px;
	padding-inline: 25px;
	position: relative;
	transform: translateX(-50%);
	width: auto;
}

.topAbout-swiper-info__nav {
	bottom: 140px;
}

.topAbout-swiper-info__nav--btn {
	display: none;
}

.topAbout-swiper-info__nav--btn-sp {
	display: flex;
	flex-direction: row;
	gap: 409px;
	justify-content: center;
	position: relative;
	top: -231px;
	z-index: 1;
}

.topAbout-swiper-scrollbar {
	width: 48px !important;
}

.p-works__list {
	gap: 88px;
	margin-inline: auto;
	max-width: 772px;
}

.p-works__list--item {
	height: 342px;
	width: 342px;
}

}

@media screen and (max-width: 834px) {

.p-works__list {
	justify-content: center;
}

}

@media screen and (max-width: 767px) {

.l-header__logo--icon {
	width: 100px;
	height: 44px;
}

.l-footer__nav {
	display: grid;
	gap: 32px 57px;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	justify-content: center;
}

.l-footer__link {
	width: 90px;
}

.l-footer__box-right::before {
	width: 90%;
}

.l-footer__box-left::before {
	width: 90%;
}

.c-contact__btn {
	height: 70px;
}

.c-contact__btn:nth-of-type(1) svg {
	height: 25px;
	width: 24px;
}

.c-contact__btn:nth-of-type(2) svg {
	height: 33px;
	width: 32px;
}

.c-contact__btn:nth-of-type(3) svg {
	height: 21px;
	width: 27px;
}

.c-contact__btn.is-clicked {
	background: var(--background-white);
	color: var(--accent-main-green);
	opacity: 0.8;
}

.c-contact__btn.is-clicked svg g {
	fill: var(--accent-main-green);
}

.c-blog__item.is-clicked .c-blog__article--bottom {
	color: var(--accent-main-green);
}

.c-blog__item.is-clicked .c-blog_icon {
	background: rgba(112, 161, 129, 0.45);
}

.btn-white.is-clicked {
	background: var(--background-black);
	color: var(--accent-main-lightgreen);
}

.btn-black.is-clicked {
	background: var(--background-white);
	color: var(--accent-main-green);
}

.c-animation__card--btn::before {
	left: 61%;
}

.c-breadcrumb__list span {
	font-size: 14px;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 1.12px;
}

.p-loading-mark {
	letter-spacing: 0px;
	max-width: 15px;
}

.p-fv-bg__text {
	top: 70px;
}

.p-fv-bg__text--ja {
	top: 126px;
}

.p-fv-bg__text--en {
	top: 300px;
}

.p-fv-bg-box1 {
	height: 100px;
	width: 100px;
	--path: path("M 1 1 H 99 V 99 H 1 Z");
	left: -11px;
	top: 44px;
}

.p-fv-bg-box2 {
	height: 119px;
	width: 119px;
	--path: path("M 1 1 H 118 V 118 H 1 Z");
	left: 24px;
	top: 137px;
}

.p-fv-bg-box3 {
	height: 96px;
	width: 96px;
	--path: path("M 1 1 H 95 V 95 H 1 Z");
	right: 44px;
	top: 376px;
}

.p-fv-bg-box4 {
	height: 131px;
	width: 131px;
	--path: path("M 1 1 H 130 V 130 H 1 Z");
	right: -27px;
	top: 294px;
}

.p-fv-bg-box5 {
	height: 28px;
	width: 28px;
	--path: path("M 1 1 H 27 V 27 H 1 Z");
	right: 195px;
	top: -58px;
}

.dot-green {
	box-shadow: 0px 0px 10px 2px #b2d5be;
}

.dot-gray {
	box-shadow: 0px 0px 10px 2px #F0F0F0;
}

.p-fv-bg-gradient1 {
	bottom: 51px;
	left: -7px;
	top: auto;
}

.p-fv-bg-gradient2 {
	left: 73px;
	top: 11px;
}

.p-fv-bg-gradient3 {
	top: -51px;
}

.p-fv-bg-gradient4 {
	right: 8px;
	top: 15px;
}

.p-topMessage-top__inner {
	align-items: center;
	flex-direction: column;
	gap: 0;
}

.p-topMessage-top-sub {
	margin-block-start: 95px;
	margin-inline: auto;
	max-width: 317px;
	width: 100%;
}

.p-topMessage-bottom__circle {
	top: -30px;
}

.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-1,
.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-2,
.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-3 {
	animation: TopOpacity 9s ease-in-out infinite;
	opacity: 0.2;
}

.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-1 {
	animation-delay: 0s;
}

.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-2 {
	animation-delay: 3s;
}

.p-topMessage-bottom__contents:not(.is-active) .p-topMessage-bottom__grid .group-3 {
	animation-delay: 6s;
}

.p-topMessage-bottom__contents.is-active .p-topMessage-bottom__circle {
	animation: TopCircleMove 4s ease-in-out infinite alternate;
}

.p-topService__top {
	align-items: start;
}

.p-topService__item {
	width: 342px;
}

.p-topService__item--move-slide {
	height: 46px;
	width: 256px;
}

.p-topService__item--move-slide img {
	height: 45px;
	width: 256px;
}

.p-topService__item--move .p-topService__item--move-slide:nth-of-type(1)::before {
	background-position-y: 1px;
	height: 46px;
	width: 256px;
}

.p-topService__item--move-slide3 {
	height: 210px;
	width: 210px;
}

.p-topService__item--move-slide3.first::before {
	animation-name: moveIconGroupSP;
}

.p-topService__bottom {
	margin-block-start: 64px;
	margin-inline: auto;
	max-width: 580px;
}

.p-topService__bottom--skills {
	gap: 32px 24px;
}

.p-topService__bottom--skill-img::before {
	filter: blur(20px);
}

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

.p-topAnimation__img {
	min-width: 342px;
}

.p-topAnimation__texts {
	margin-block-start: 32px;
}

.p-topAnimation__texts-left {
	padding-inline-start: 0px;
}

.p-topAnimation__texts-right {
	padding-inline-end: 0px;
}

.p-topAnimation__title p + p::before {
	left: -6px;
}

.p-topAnimation__title--tool {
	gap: 12px;
}

.p-topAnimation__item:nth-of-type(2)::before {
	height: 250px;
	right: -5%;
	top: 0;
	transform: translate(0%, -50%);
	width: 250px;
}

.p-topAnimation__item:nth-of-type(3)::before {
	top: 0;
}

.p-topSwiper-swiper {
	height: 73px;
}

.p-topSwiper-swiper-slide {
	height: 73px;
	width: 43px;
}

.p-topAbout__top--img {
	min-width: auto;
}

.topAbout-swiper-slide {
	height: 308px;
	width: 262px !important;
}

.topAbout-swiper-slide__item {
	height: 308px;
	width: 262px;
}

.topAbout-swiper-slide__item img {
	height: 308px;
	width: 262px;
}

.js-topSlideImage {
	display: block;
	height: 308px;
	max-width: 100%;
	width: 262px;
}

.topAbout-swiper-info__contents {
	gap: 4px;
}

.topAbout-swiper-info__title {
	margin-block-end: 28px;
}

.topAbout-swiper-info__nav {
	bottom: 0px;
	top: -18%;
}

.topAbout-swiper-info__nav--btn-sp {
	gap: 278px;
	top: -160px;
}

.p-topBlog {
	background-image: url(../img/sp/topBlog-bg-sp.webp);
}

.p-topContact__inner {
	flex-direction: column;
	gap: 64px;
	max-width: 390px;
}

.p-topContact__texts {
	padding-inline-end: 0px;
}

.p-topContact__texts:before {
	left: -7%;
	rotate: -8deg;
	top: 43%;
}

.p-works-details-fv__bg {
	height: 700px;
}

.p-works-details-fv__bg::after {
	background-image: url(../img/sp/works-details-right-bg.webp);
	background-position: 10%;
	background-repeat: no-repeat;
	background-size: 125% 120%;
	opacity: 0.5;
}

.p-works-details-fv__inner {
	flex-direction: column-reverse;
	justify-content: center;
}

.p-works-details-fv__left {
	left: -4%;
	max-width: 300px;
	top: -5%;
	width: 100%;
}

.p-works-details-fv__right {
	background-image: none;
}

.p-works-details-fv__site-kind {
	margin-block-start: 16px;
}

.p-works-details-fv__tool {
	margin-block-start: 24px;
}

.p-works-details-fv__btn {
	margin-block-start: 40px;
}

.p-works-details__details--items {
	flex-direction: column;
	gap: 40px;
}

.p-works-details__items--date,
.p-works-details__items--range,
.p-works-details__items--info {
	width: 100%;
}

.p-works-details-contents--featured__contents {
	flex-direction: column;
	gap: 64px;
}

.p-works-details-contents--featured__card {
	width: 100%;
}

.p-works-details-others {
	background-image: url(../img/sp/works-details-next-bg-sp.webp);
}

.p-works-details-others__items--pc {
	display: none;
}

.p-contact__label {
	letter-spacing: 0px;
}

.p-contact__button {
	margin-block-start: 24px;
}

.p-contact-btn {
	padding: 16px 118px;
}

.p-contact-thanks-bg__bar {
	height: 142px;
	top: 12%;
	width: 201px;
}

.p-contact-thanks-bg__bar--left {
	transform: translateY(-53px) rotate(45deg);
	width: 75px;
}

.p-contact-thanks-bg__bar--right {
	transform: translateX(-7px) rotate(-45deg);
	width: 200px;
}

.p-404__inner {
	align-items: flex-start;
	flex-direction: column;
	gap: 16px;
}

.p-404__img {
	width: 100%;
}

.p-404__contents {
	margin-block-end: 0;
	margin-inline-start: 9%;
	width: auto;
}

.u-hidden-sp {
	display: none;
}

}

@media (max-width: 600px) {

.p-works-details-fv__left {
	left: -5%;
	top: -4%;
}

.p-works-details-fv__right {
	width: 90%;
}

}

@media screen and (max-width: 579px) {

.p-works__categories--list {
	justify-content: space-between;
	margin-inline: auto;
	max-width: 348px;
}

.p-animation__categories--list {
	justify-content: space-between;
	margin-inline: auto;
	max-width: 348px;
}

}

@media (max-width: 500px) {

.p-works-details-fv__right {
	width: 100%;
}

}

@media screen and (max-width: 500px) {

.p-404__inner {
	align-items: center;
}

.p-404__contents {
	margin-inline-start: 0;
}

.p-404__btn {
	max-width: none;
	width: 100%;
}

}

@media (max-width: 450px) {

.p-works-details-fv__bg {
	height: 650px;
}

.p-works-details-fv__left {
	left: 0%;
	top: 0;
}

}

@media screen and (max-width: 390px) {

.c-contact__btn {
	margin-inline: auto;
	width: 327px;
}

.p-topContact-title--en {
	font-size: 60px;
}

}

@media screen and (max-width: 389px) {

.p-topService__bottom--skills {
	gap: 32px 64px;
}

.p-works__categories--item {
	width: 152px;
}

.p-works__list--item {
	height: 324px;
	width: 324px;
}

.p-animation__categories--item {
	width: 152px;
}

.p-privacy__btn a {
	padding-inline: 41px;
}

}

@keyframes slideIn {

from {
	transform: translateX(100%);
}

to {
	transform: translateX(0);
}

}

@keyframes footersShadow {

0% {
	opacity: 0.5;
}

50% {
	opacity: 0.9;
}

100% {
	opacity: 0.5;
}

}

@keyframes scroll {

0% {
	transform: scale(1, 0);
	transform-origin: 0 0;
}

50% {
	transform: scale(1, 1);
	transform-origin: 0 0;
}

51% {
	transform: scale(1, 1);
	transform-origin: 0 100%;
}

100% {
	transform: scale(1, 0);
	transform-origin: 0 100%;
}

}

@keyframes moveBox {

0% {
	offset-distance: 0%;
}

100% {
	offset-distance: 100%;
}

}

@keyframes moveBoxReverse {

0% {
	offset-distance: 100%;
}

100% {
	offset-distance: 0%;
}

}

@keyframes bg-gradient-dynamic {

0% {
	background-position: 0% 50%;
}

20% {
	background-position: 60% 40%;
}

40% {
	background-position: 30% 70%;
}

60% {
	background-position: 80% 30%;
}

80% {
	background-position: 20% 60%;
}

100% {
	background-position: 0% 50%;
}

}

@keyframes opacity {

0% {
	opacity: 0.3;
}

50% {
	opacity: 0.8;
}

100% {
	opacity: 0.3;
}

}

@keyframes TopOpacity {

0% {
	opacity: 0.2;
}

30% {
	opacity: 1;
}

60% {
	opacity: 0.2;
}

100% {
	opacity: 0.2;
}

}

@keyframes TopCircleMove {

0% {
	transform: translateX(-147px);
}

100% {
	transform: translateX(125px);
}

}

@keyframes fadeLoop {

0% {
	opacity: 0;
}

8% {
	opacity: 1;
}

28% {
	opacity: 1;
}

36% {
	opacity: 0;
}

100% {
	opacity: 0;
}

}

@keyframes moveIconGroup {

0% {
	opacity: 1;
	transform: translate(0, 0);
}

4% {
	opacity: 1;
}

8% {
	opacity: 1;
	transform: translate(-100px, -90px);
}

28% {
	opacity: 1;
	transform: translate(-100px, -90px);
}

36% {
	opacity: 0;
}

100% {
	opacity: 0;
}

}

@keyframes moveIconGroupSP {

0% {
	opacity: 1;
	transform: translate(0, 0);
}

4% {
	opacity: 1;
}

8% {
	opacity: 1;
	transform: translate(-105px, -90px);
}

28% {
	opacity: 1;
	transform: translate(-105px, -90px);
}

36% {
	opacity: 0;
}

100% {
	opacity: 0;
}

}

@keyframes spreadCircle {

0% {
	opacity: 0.1;
}

50% {
	opacity: 0.3;
}

100% {
	opacity: 0.1;
}

}

@keyframes bgBlur {

0% {
	filter: blur(2px);
}

50% {
	filter: blur(0.5px);
}

100% {
	filter: blur(2px);
}

}

@keyframes contact-thanksBg {

to {
	background: var(--background-white);
	color: var(--color-text-black);
}

}

@keyframes contact-thanksFont {

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

}

@keyframes thanks-opacity {

to {
	opacity: 1;
}

}

@keyframes barGrow {

0% {
	background-size: 0% 100%;
}

100% {
	background-size: 100% 100%;
}

}

@keyframes contact-thanksOp {

to {
	opacity: 1;
}

}