/* ------------------------------------------------------------
Common
---------------------------------------------------------------*/
@layer component {
	.horizontal {
		position: relative;
		z-index: 20;
	}

	.horizontal__track {
		display: flex;
		flex-direction: row-reverse;
		width: max-content;
		position: relative;
		z-index: 20;
	}

	.c-panel {
		position: relative;
		flex: 0 0 100vw;
		width: 100vw;
		max-width: 1920px;
		height: 100vh;
		background-color: var(--c-light);
	}
	.c-panel__inner {
		position: relative;
		width: 100%;
		height: 100%;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.horizontal__track {
			display: block;
			width: 100%;
		}

		.c-panel {
			width: 100%;
			height: auto;
			min-height: 667px;
		}
	}

	.message-block {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-flow: row-reverse;
		gap: clamp(40px, 4.375vw, 63px);
	}
	.message-block__group {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-flow: row-reverse;
		gap: clamp(15px, 1.38vw, 20px);
		font-size: clamp(14px, 1.111vw, 20px);
	}
	.message-block__group.message-block__ttl {
		padding-left: clamp(10px, 1.2vw, 17px);
		position: relative;
		top: clamp(-50px, -5.97vh, -30px);
	}
	.message-block__group.message-block__ttl .message-block__col::before {
		content: "";
		width: 1px;
		height: 50px;
		background: var(--c-text);
		position: absolute;
		bottom: calc(100% + 18px);
	}
	.message-block__heading {
		font-size: clamp(20px, 1.66vw, 40px);
	}
	.message-block__group.mbg-sm {
		gap: clamp(15px, 1.38vw, 20px);
		font-size: clamp(13px, 0.972vw, 16px);
	}
	@media (max-width: 999px), (max-height: 749px) {
		.message-block__group.mbg-sm {
			font-size: 16px;
		}
	}

	.message-block__col {
		margin: 0;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1;
		opacity: 0;
		filter: blur(8px);
		letter-spacing: clamp(2px, 0.4vh, 3.5px);
		transform: translateY(-20px);
		transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
	}
	.message-block__col.no-translate {
		transform: translateY(0px);
	}

	.message-block__col.is-show {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0);
	}

	.message-block__col .char {
		display: inline-block;
		opacity: 0;
		transition: opacity 0.3s ease-out;
	}

	.message-block__col.is-show .char {
		opacity: 1;
	}

	.message-block__col ruby {
		display: inline-block;
		opacity: 0;
		transition: opacity 0.5s ease;
	}

	.message-block__col.is-show ruby {
		opacity: 1;
		transition-delay: var(--ruby-delay, 0s);
	}

	.message-block__brand {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		writing-mode: horizontal-tb;
		text-align: center;
		gap: 0.4em;
	}

	.message-block__brand-en {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1;
		letter-spacing: 0;
		text-align: center;
		gap: 1px;
	}

	.message-block__brand-en > span {
		display: block;
		line-height: 0.95;
	}
	.mbe-lg {
		margin-bottom: 4px;
	}

	.message-block__brand-ja {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1;
	}
	.message-block__col ruby {
		ruby-position: over;
	}

	.message-block__col rt {
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0.3em;
		position: absolute;
		right: -15px;
		top: clamp(10px, 2.569vw, 50px);
	}

	.js-scroll-fade-textrandom i {
		display: inline-block;
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1s ease, filter 0.8s ease-out;
		font-style: normal;
	}

	.message-block__col.is-show .js-scroll-fade-textrandom i {
		opacity: 1;
		filter: blur(0px);
	}
	.message-block__col.mbc-sp {
		display: none;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.message-block {
			flex-flow: column;
			gap: 30px;
		}
		.message-block__group.message-block__ttl {
			padding-left: 0;
			top: auto;
		}
		.message-block__group.message-block__ttl .message-block__col::before {
			width: 50px;
			height: 1px;
			bottom: auto;
			right: calc(100% + 10px);
		}
		.message-block__group {
			justify-content: flex-start;
			align-items: flex-start;
			flex-flow: column;
			gap: 20px;
		}
		.message-block__col {
			writing-mode: initial;
			text-orientation: initial;
			transform: translateY(0);
			transform: translateX(-20px);
			letter-spacing: 0.05em;
		}

		.message-block__col.is-show {
			transform: translateX(0px);
		}
		.message-block__col.mbc-pc {
			display: none;
		}
		.message-block__col.mbc-sp {
			display: block;
		}

		.message-block__brand {
			flex-direction: row;
			justify-content: flex-start;
			writing-mode: initial;
			text-align: left;
			gap: 3px;
		}

		.message-block__brand-en {
			flex-direction: row;
			align-items: baseline;
			text-align: left;
			gap: 2px;
		}

		.message-block__brand-en > span {
			line-height: 1;
		}
		.mbe-lg {
			margin-bottom: 0px;
		}
		.mbe-lg:nth-of-type(4) {
			margin-right: 2px;
		}

		.message-block__brand-ja {
			writing-mode: initial;
			text-orientation: initial;
		}
		.message-block__col rt {
			font-size: 10px;
			position: relative;
			letter-spacing: 0;
			right: auto;
			top: auto;
		}
	}

	.js-fade-ttl {
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, filter 0.6s ease;
	}
	.js-fade-ttl.is-active {
		opacity: 1;
		filter: blur(0px);
	}
}
/* ------------------------------------------------------------
FV
---------------------------------------------------------------*/
@layer page {
	.sec-fv {
		background-image: url("../images/top/bg.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.sec-fv__reveal {
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
		transition: clip-path 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.sec-fv.is-open .sec-fv__reveal {
		clip-path: circle(40.9722vmax at var(--cx, 50%) var(--cy, 50%));
	}

	.sec-fv__ui {
		position: absolute;
		inset: 0;
		z-index: 5;
		pointer-events: none;
	}
	.sec-fv__hit {
		position: absolute;
		left: 50%;
		top: 47%;
		width: clamp(100px, 10.417vw, 150px);
		height: auto;
		aspect-ratio: 1 / 1;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: transparent;
		pointer-events: auto;
	}
	.sec-fv__reveal video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.fv-masked-video {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		mask-image: url("../images/top/fv-txt-mask.svg");
		mask-repeat: no-repeat;
		mask-position: center;
		mask-mode: alpha;
		mask-size: clamp(60px, 4.861vw, 70px);
	}
	.fv-masked-video video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.fv-txt-box {
		position: absolute;
		inset: 0;
		z-index: 50;
		width: clamp(60px, 4.861vw, 70px);
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		gap: 20px;
		pointer-events: none;
		transition: all ease-in-out 0.3s;
		margin-inline: auto;
	}
	.fv-txt-box > img {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.kanji-chi {
		opacity: 0;
		z-index: 10;
	}
	.is-open .kanji-chi {
		opacity: 1;
	}

	.fv-logo {
		width: clamp(120px, 13.68vw, 197px);
		height: auto;
		aspect-ratio: 197 / 100;
		background-image: url("../images/common/logo-primary.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 10;
		position: absolute;
		bottom: 16%;
		margin-inline: auto;
		left: 0;
		right: 0;
	}
	.fv-logo::before {
		content: "";
		width: 100%;
		height: auto;
		aspect-ratio: 197 / 100;
		background-image: url("../images/common/logo-wh.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 10;
		position: absolute;
		transition: all ease-in-out 0.3s 0.3s;
		inset: 0;
		opacity: 0;
	}
	.is-open .fv-logo::before {
		opacity: 1;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-fv {
			height: 100svh;
			max-height: 844px;
			min-height: 667px;
			background-image: url("../images/top/bg-sp.webp");
		}

		.sec-fv.is-open .sec-fv__reveal {
			clip-path: circle(50vmax at var(--cx, 50%) var(--cy, 50%));
		}

		.fv-logo {
			bottom: 5.924%;
		}
	}
}

/* ------------------------------------------------------------
First & Second view
---------------------------------------------------------------*/
@layer page {
	.fsv-wrapper {
		width: 193vw;
		flex: 0 0 193vw;
		align-items: flex-start;
		display: grid;
		grid-template-columns: 93vw 100vw;
		position: relative;
		z-index: 10;
	}
	.sec-fv-1 {
		width: 100vw;
		flex: 0 0 100vw;
		max-width: none;
		z-index: 10;
		display: flex;
		align-items: center;
		position: relative;
		background: transparent;
		order: 1;
	}
	.sec-sv-1 {
		width: 75vw;
		flex: 0 0 93vw;
		max-width: none;
		z-index: 10;
		display: flex;
		align-items: center;
		position: relative;
		background: transparent;
	}
	.fsv-cont {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 10;
	}
	.cont-fv {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		order: 2;
		position: relative;
	}

	.fsv-bg {
		position: absolute;
		inset: 0;
		overflow: hidden;
		z-index: 0;
		pointer-events: none;
	}

	.fsv-bg__layer {
		position: absolute;
		inset: 0;
		opacity: 0;
	}

	.fsv-bg__layer::before {
		content: "";
		position: absolute;
		top: 0;
		left: -6%;
		width: 112%;
		height: 100%;
		background-image: url("../images/top/fsv-bg-pc.webp");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		transform: translate3d(0, 0, 0) scale(1.02);
		will-change: transform, opacity;
	}

	.fsv-bg__layer--1 {
		animation: layerFade1 40s linear infinite;
	}
	.fsv-bg__layer--1::before {
		animation: layerPan1 40s linear infinite;
	}

	.fsv-bg__layer--2 {
		animation: layerFade2 40s linear infinite;
	}
	.fsv-bg__layer--2::before {
		animation: layerPan2 40s linear infinite;
	}

	@keyframes layerFade1 {
		0% {
			opacity: 1;
		}
		45% {
			opacity: 1;
		}
		50% {
			opacity: 0;
		}
		95% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes layerFade2 {
		0% {
			opacity: 0;
		}
		45% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		95% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes layerPan1 {
		0% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
		45% {
			transform: translate3d(-4%, 0, 0) scale(1.02);
		}
		50% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
		100% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
	}

	@keyframes layerPan2 {
		0% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
		45% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
		50% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
		95% {
			transform: translate3d(-4%, 0, 0) scale(1.02);
		}
		100% {
			transform: translate3d(0, 0, 0) scale(1.02);
		}
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-fsv {
			width: 100vw;
			flex: 0 0 100vw;
			height: auto;
		}
		.fsv-bg__layer::before {
			background-image: url("../images/top/fsv-bg-sp.webp");
		}
		.fsv-cont {
			grid-template-columns: minmax(0, 1fr);
		}
		.cont-fv {
			height: 667px;
			max-height: 844px;
			min-height: 667px;
			order: 1;
		}

		.fsv-bg {
			position: fixed;
			inset: unset;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			height: 1000px;
		}
	}

	.cont-sv {
		width: 100%;
		height: 100%;
		order: 1;
		position: relative;
	}
	.sv-ttl {
		position: absolute;
		z-index: 10;
		top: min(145px, 17.32%);
		right: 10.13%;
	}
	.cont-sv .message-block__col {
		color: var(--c-wh);
	}
	.sv-ttl .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}
	.sv-ttl .message-block__col::before,
	.sv-ttl .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-wh);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.sv-ttl .message-block__col {
		padding-inline: 15px;
	}
	.sv-ttl .message-block__col::before {
		top: 0;
	}
	.sv-ttl .message-block__col::after {
		bottom: 0;
	}

	.sv-txts {
		position: absolute;
		z-index: 10;
		top: min(245px, 29.27%);
		right: 22.9%;
	}
	.sv-txts .message-block__heading {
		padding-left: clamp(20px, 1.66vw, 24px);
	}
	.sv-txts .message-block__heading .message-block__col {
		letter-spacing: 0.25em;
	}

	.sv-images {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
	}
	.sv-img-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 0;
		aspect-ratio: 268 / 144;
		height: auto;
	}
	.js-img-blur img {
		mask-image: url("../images/top/img-blur-mask.png");
		mask-repeat: no-repeat;
		mask-size: 100% 460%;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		opacity: 0;
		animation-duration: 3s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-delay: 0.4s;
		animation-fill-mode: both;
	}
	.js-img-blur.is-active img {
		animation-name: maskShow;
		opacity: 1;
	}
	@keyframes maskShow {
		0% {
			mask-position: 0 0;
		}

		to {
			mask-position: 0 100%;
		}
	}

	.sv-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.sv-img-box.sib-1 {
		width: clamp(200px, 18.6vw, 268px);
		top: 2.4%;
		right: 15.5%;
	}
	.sv-img-box.sib-2 {
		width: clamp(200px, 18.6vw, 268px);
		bottom: 8.36%;
		right: 1%;
	}
	.sv-img-box.sib-3 {
		width: clamp(150px, 13.1vw, 189px);
		top: min(111px, 13.26%);
		right: 44.6%;
	}
	.sv-img-box.sib-4 {
		width: clamp(180px, 15.7vw, 226px);
		bottom: 10.75%;
		right: 45.55%;
	}
	.sv-img-box.sib-5 {
		width: clamp(250px, 20.8vw, 292px);
		top: 7.9%;
		left: 2.1%;
	}
	.sv-img-box.sib-6 {
		width: clamp(150px, 13.1vw, 189px);
		left: 9.8%;
		bottom: 27.5%;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.fsv-wrapper {
			width: 100vw;
			flex: 0 0 100vw;
			grid-template-columns: minmax(0, 1fr);
		}
		.sec-fv-1 {
			order: 0;
		}
		.sec-sv-1 {
			width: 100vw;
			flex: 0 0 100vw;
			order: 1;
		}
		.cont-sv {
			height: auto;
			min-height: 844px;
			order: 2;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			padding-inline: 20px;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 100px;
   text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
		}

		.sv-ttl {
			position: relative;
			top: auto;
			right: auto;
		}
		.sv-ttl .message-block__group {
			font-size: clamp(18px, 1.66vw, 40px);
		}
		.sv-ttl .message-block__col {
			padding-inline: 5px;
			padding-block: 7px;
		}

		.sv-txts {
			position: relative;
			top: auto;
			right: auto;
		}
		.sv-txts .message-block__heading {
			padding-left: 0;
		}

		.sv-txts .message-block__group.mbg-sm {
			gap: 0;
		}
		.sv-txts .message-block__heading .message-block__col {
			letter-spacing: 0.1em;
		}
		.sv-txts .message-block__group:not(.message-block__heading) .message-block__col {
			line-height: 2;
		}

		.sv-img-box.sib-1 {
			top: -50px;
			right: auto;
			left: -70px;
		}
		.sv-img-box.sib-2 {
			bottom: auto;
			right: -45px;
			top: 0;
		}
		.sv-img-box.sib-3 {
			top: 55%;
			right: -40px;
		}
		.sv-img-box.sib-4 {
			display: none;
		}
		.sv-img-box.sib-5 {
			top: auto;
			left: -100px;
			bottom: -40px;
		}
		.sv-img-box.sib-6 {
			left: auto;
			bottom: -10px;
			right: -40px;
		}
	}
}
/* ------------------------------------------------------------
Intro
---------------------------------------------------------------*/
@layer page {
	.sec-intro {
		width: 142vw;
		flex: 0 0 142vw;
		background-image: url("../images/top/bg.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		display: flex;
		align-items: center;
		max-width: 2047px;
		padding-left: 60px;
	}

	.img-mask-wrap {
		width: 100%;
		position: absolute;
		top: min(800px, 78.85%);
		right: 0;
		max-width: 1500px;
	}

	.js-clip-reveal {
		width: 100%;
		clip-path: inset(0 0 0 100%);
		transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
		will-change: clip-path;
	}

	.js-clip-reveal.is-active {
		clip-path: inset(0 0 0 0);
	}

	.intro-ttl-sm {
		position: absolute;
		z-index: 20;
		top: min(145px, 17.32%);
		right: 6.3%;
	}

	.intro-ttl-sm .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}

	.intro-ttl-sm .message-block__col::before,
	.intro-ttl-sm .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-text);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.intro-ttl-sm .message-block__col {
		padding-inline: 15px;
	}
	.intro-ttl-sm .message-block__col::before {
		top: 0;
	}
	.intro-ttl-sm .message-block__col::after {
		bottom: 0;
	}

	.intro-ttl {
		position: absolute;
		z-index: 20;
		top: min(145px, 17.32%);
		right: 12.4%;
	}
	.intro-ttl .message-block__col {
		font-size: clamp(40px, 3.75vw, 63px);
		letter-spacing: 0.45em;
	}
 .intro-ttl .message-block__col i:nth-child(3){
  color: #b5a25d;
 }
	.intro-txts {
		position: absolute;
		top: min(245px, 29.27%);
		right: 23.25%;
		z-index: 10;
	}
	.intro-txts .message-block__heading {
		padding-left: clamp(38px, 3.33vw, 48px);
	}
	.intro-txts .message-block__heading .message-block__col {
		letter-spacing: 0.25em;
	}
	.intro-txts .message-block__group:not(.message-block__heading) .message-block__col {
		letter-spacing: 0.1em;
		line-height: 2;
	}

	.intro-circle-img-wrap {
		position: absolute;
		top: 73.6%;
		right: 15.2%;
		margin-inline: auto;
		display: flex;
		flex-flow: row-reverse;
		width: min(872px, 42.6%);
		justify-content: space-between;
		gap: clamp(30px, 3.472vw, 50px);
	}

	.intro-circle-img {
		aspect-ratio: 1 / 1;
		width: clamp(130px, 11.46vw, 165px);
		overflow: hidden;
		position: relative;
		opacity: 0;
		flex-shrink: 0;
		mask-image: url("../images/top/img-blur-mask.png");
		mask-repeat: no-repeat;
		mask-size: 100% 460%;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		opacity: 0;
		animation-duration: 3s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-fill-mode: both;
	}
	.intro-circle-img img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		transition: all 0.6s ease;
	}
	.is-active .intro-circle-img {
		animation-name: maskShow;
		animation-delay: 0.2s;
		opacity: 1;
	}
	.intro-circle-img.--ci-1 {
		bottom: 0;
		animation-delay: 0.4s;
	}
	.intro-circle-img.--ci-2 {
		bottom: 2.389vh;
		animation-delay: 0.6s;
	}
	.intro-circle-img.--ci-3 {
		bottom: 4.779vh;
		animation-delay: 0.8s;
	}
	.intro-circle-img.--ci-4 {
		bottom: 7.168vh;
		animation-delay: 1s;
	}

	.intro-video {
		position: absolute;
		width: clamp(500px, 48.611vw, 700px);
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 9999px;
		overflow: hidden;
		right: 61.89%;
		top: 50%;
		translate: 0 -50%;
		filter: blur(8px);
		opacity: 0;
		transition: opacity 1.2s ease, filter 0.6s ease;
	}
	.js-img-blur.is-active.intro-video {
		opacity: 1;
		filter: blur(0px);
	}

	.intro-video__movie {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		position: relative;
		z-index: 0;
	}

	.intro-video__overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(30, 30, 30, 0.2);
		pointer-events: none;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.intro-video__play {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 20;
		width: clamp(80px, 8.333vw, 120px);
		height: auto;
		aspect-ratio: 1 / 1;
		display: grid;
		place-items: center;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		transition: opacity 0.3s ease;
	}

	.intro-video__play:hover {
		opacity: 0.75;
	}

	.intro-video__play img {
		width: 100%;
		height: 100%;
		display: block;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-intro {
			width: 100vw;
			flex: 0 0 100vw;
			min-height: 844px;
			height: auto;
			padding-left: 0px;
			background-image: url("../images/top/bg-sp.webp");
		}

		.sec-intro .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			padding-inline: 20px;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 100px;
		}

		.intro-ttl {
			position: relative;
			top: auto;
			right: auto;
		}
		.intro-ttl-sm {
			position: relative;
			top: auto;
			right: auto;
		}
		.intro-ttl-sm .message-block__col {
			padding-inline: 5px;
			padding-block: 7px;
		}
		.intro-ttl-sm .message-block__group {
			font-size: clamp(20px, 1.66vw, 40px);
		}

		.intro-txts {
			position: relative;
			top: auto;
			right: auto;
		}
		.intro-txts .message-block__heading {
			padding-left: 0;
		}
		.intro-txts .message-block__group.mbg-sm {
			gap: 0;
		}

		.img-mask-wrap {
			width: 80px;
			height: 80%;
			position: absolute;
			bottom: 0;
			top: 0;
			left: auto;
			right: 4%;
		}

		.js-clip-reveal {
			clip-path: inset(0 0 100% 0);
			transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1);
		}

		.sec-intro .message-block {
			top: 50px;
			right: auto;
			left: 30px;
			margin-inline: 0;
			padding-right: 0;
			padding-left: 0;
		}

		.intro-circle-img-wrap {
			bottom: auto;
			left: auto;
			right: -7%;
			top: 20%;
			margin-inline: 0;
			flex-flow: column;
			width: min(120px, 30.76%);
			justify-content: flex-start;
			align-items: center;
			gap: 45px;
		}
		.intro-circle-img {
			max-width: 120px;
			transform: translateX(0px);
			transform: translateY(-30px);
		}
		.is-active .intro-circle-img {
			transform: translateY(0px);
		}
		.intro-circle-img.--ci-1 {
			right: -10px;
		}
		.intro-circle-img.--ci-2 {
			bottom: 0;
			right: -20px;
		}
		.intro-circle-img.--ci-3 {
			bottom: 0;
		}
		.intro-circle-img.--ci-4 {
			bottom: 0;
			right: 25px;
		}
		.intro-circle-img.--ci-5 {
			bottom: 0;
		}
		.intro-circle-img.--ci-5.is-expand img {
			right: 0;
			top: 100%;
		}
		.img-mask-wrap picture {
			height: 100%;
		}
		.js-clip-reveal {
			height: 100%;
			object-fit: cover;
		}

		.intro-video {
			position: relative;
			width: 100%;
			right: auto;
			top: auto;
			translate: none;
			margin-top: 30px;
		}
	}
}

/* ------------------------------------------------------------
Method
---------------------------------------------------------------*/
@layer page {
	.sec-method {
		width: 111vw;
		flex: 0 0 111vw;
		z-index: 10;
		background-image: url("../images/top/bg-method-pc.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.method-head-area {
		position: absolute;
		z-index: 20;
		top: min(109px, 13%);
		right: 7.69%;
		color: var(--c-wh);
	}
	.method-head-area .message-block {
		flex-flow: column;
		align-items: center;
		gap: clamp(40px, 6.5vh, 55px);
	}
	.method-head-area .message-block__group:not(.message-block__heading) .message-block__col {
		transition-delay: 0.6s;
	}
	.method-head-area .message-block__group {
		gap: 11px;
	}

	.method-circle-area {
		position: absolute;
		z-index: 10;
		right: 23.4%;
		top: 24.73%;
		width: 65.55%;
		height: auto;
		aspect-ratio: 1056 / 508;
	}

	.method-circle-wrapper {
		width: 40.43%;
		height: auto;
		aspect-ratio: 1 / 1;
		top: 3.54%;
		right: 25.94%;
		position: absolute;
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.method-circle-txt {
		position: absolute;
		z-index: 10;
		font-size: clamp(37px, 3.26vw, 58px);
		color: var(--c-wh);
		line-height: calc(69 / 47);
		top: 38.17%;
		left: 0;
		right: 0;
		margin-inline: auto;
		text-align: center;
		width: max-content;
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, filter 0.6s ease;
		transition-delay: 2.2s;
	}
	.method-circle-area.is-active .method-circle-txt {
		opacity: 1;
		filter: blur(0px);
	}
	.method-circle-svg {
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
		transform-origin: center;
		position: relative;
		z-index: 0;
	}

	.method-circle-svg__path {
		transition: stroke-dashoffset 0.6s linear;
	}

	.method-circle-svg.is-show .method-circle-svg__path {
		stroke-dashoffset: 0 !important;
	}

	.method-images {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.method-img-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 0;
		aspect-ratio: 1 / 1;
		width: 21.875%;
		height: auto;
	}
	.method-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		mask-image: url("../images/top/img-blur-mask.png");
		mask-repeat: no-repeat;
		mask-size: 100% 460%;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		opacity: 0;
		animation-duration: 3s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-fill-mode: both;
	}
	.method-circle-area.is-active .method-img {
		animation-name: maskShow;
		opacity: 1;
	}
	.method-img-box.mib-1 {
		top: 0;
		right: 13.37%;
	}
	.method-img-box.mib-1 .method-img {
		animation-delay: 1.2s;
	}
	.method-img-box.mib-2 {
		bottom: 0;
		right: 34.75%;
	}
	.method-img-box.mib-2 .method-img {
		animation-delay: 1.5s;
	}
	.method-img-box.mib-3 {
		top: 0;
		right: 55.3%;
	}
	.method-img-box.mib-3 .method-img {
		animation-delay: 1.8s;
	}

	.method-txts {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		width: 100%;
		height: 100%;
		overflow: hidden;
		color: var(--c-wh);
	}

	.method-txt-box {
		position: absolute;
		z-index: 10;
		border: 1px solid var(--c-wh);
		backdrop-filter: blur(6px);
		padding: clamp(8px, 0.76vw, 11px);
		font-size: clamp(12px, 0.972vw, 16px);
		letter-spacing: 0;
		line-height: calc(26 / 14);
		white-space: nowrap;
		width: max-content;
		opacity: 0;
		filter: blur(8px);
		transform: translateY(-20px);
		transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
		transition-delay: 2.2s;
	}
	.method-circle-area.is-active .method-txt-box {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0);
	}
	.method-txt-box.mtb-1 {
		right: 0;
		top: 41.73%;
	}
	.method-txt-box.mtb-2 {
		left: 16.3%;
		bottom: 7.8%;
	}
	.method-txt-box.mtb-3 {
		left: 0;
		top: 30.1%;
	}

	.method-btns {
		display: none;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-method {
			width: 100vw;
			flex: 0 0 100vw;
		}
		.sec-method .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 100px;
		}
		.method-head-area {
			position: relative;
			top: auto;
			right: auto;
			padding-inline: 20px;
		}
		.method-head-area .message-block {
			gap: 30px;
			align-items: flex-start;
		}
		.method-head-area .message-block__group:not(.message-block__heading) {
			gap: 0;
		}
		.method-head-area .message-block__group:not(.message-block__heading) .message-block__col {
			font-size: 16px;
			line-height: 2;
		}
		.method-circle-area {
			width: 100%;
			position: relative;
			right: auto;
			top: auto;
			aspect-ratio: 390 / 452;
		}
		.method-circle-wrapper {
			width: 89.74%;
			top: 4.42%;
			right: 0;
			left: 0;
			margin-inline: auto;
		}
		.method-circle-txt {
			font-size: clamp(37px, 12.051vw, 47px);
			line-height: 1;
			top: auto;
		}
		.method-images {
			overflow: visible;
		}
		.method-img-box {
			width: 46.2%;
		}
		.method-img-box.mib-1 {
			top: 0%;
			right: -4.9%;
		}
		.method-img-box.mib-2 {
			bottom: auto;
			top: 57.9%;
			right: 0;
			left: 0;
			margin: auto;
		}
		.method-img-box.mib-3 {
			top: 0%;
			right: auto;
			left: -4.9%;
		}
		.method-img-box.mib-1 .method-img {
			animation-delay: 1.9s;
		}
		.method-img-box.mib-2 .method-img {
			animation-delay: 2.2s;
		}
		.method-img-box.mib-3 .method-img {
			animation-delay: 1.6s;
		}

		.method-txt-box {
			backdrop-filter: blur(6px) brightness(0.6);
			font-size: clamp(13px, 0.972vw, 16px);
			transition-delay: 2.6s;
		}
		.method-txts {
			overflow: visible;
			display: none;
		}
		.method-txt-box.mtb-1 {
			right: 10px;
			top: 15%;
		}
		.method-txt-box.mtb-2 {
			left: 0;
			bottom: -90px;
			right: 0;
			margin: auto;
		}
		.method-txt-box.mtb-3 {
			left: 10px;
			top: -3%;
		}

		.method-btns {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 20;
			width: 100%;
			height: 100%;
			overflow: hidden;
			color: var(--c-wh);
			opacity: 0;
			filter: blur(8px);
			transform: translateY(-20px);
			transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
			transition-delay: 2.2s;
		}

		.method-circle-area.is-active .method-btns {
			opacity: 1;
			filter: blur(0px);
			transform: translateY(0);
		}

		.method-btn {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			color: #fff;
			height: 35px;
			width: 80px;
			font-size: 15px;
			cursor: pointer;
			background: var(--c-primary);
			border: 1px solid var(--c-wh);
		}
		.method-btn.mbt-1 {
			right: 7.692%;
			top: 34.29%;
		}
		.method-btn.mbt-2 {
			left: 0;
			top: 92.25%;
			right: 0;
			margin: 0 auto;
		}
		.method-btn.mbt-3 {
			left: 7.692%;
			top: 34.29%;
		}

		.method-btn::after {
			content: "";
			width: 9px;
			height: auto;
			aspect-ratio: 1 / 1;
			flex-shrink: 0;
			background-image: url("../images/common/icon-arrow-right.svg");
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}

/* ------------------------------------------------------------
Business
---------------------------------------------------------------*/
@layer page {
	.sec-business {
		position: relative;
		width: 185vw;
		flex: 0 0 185vw;
		background-image: url("../images/top/bg-business.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		overflow: hidden;
		max-width: 2667px;
	}

	.business-ttl {
		position: absolute;
		z-index: 10;
		top: min(135px, 16.12%);
		right: 6.11%;
	}
	.business-ttl .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}
	.business-ttl .message-block__col::before,
	.business-ttl .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-text);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.business-ttl .message-block__col {
		padding-inline: 15px;
	}
	.business-ttl .message-block__col::before {
		top: 0;
	}
	.business-ttl .message-block__col::after {
		bottom: 0;
	}

	.business-contents-wrapper {
		width: calc(100% - 16.97%);
		position: absolute;
		right: min(283px, 16.97%);
		top: 0;
		bottom: 0;
		height: 78.8%;
		max-height: 850px;
		margin-block: auto;
	}
	.business-contents {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row-reverse;
		align-items: flex-start;
		overflow: hidden;
	}
	.business-contents-item {
		width: 170px;
		height: 100%;
		display: flex;
		flex-flow: column;
		position: relative;
		gap: 30px;
		margin-right: 0px;
		padding-inline: 0px;
		justify-content: space-between;
		border-right: 1px solid var(--c-primary);
		overflow: hidden;
		transition: width 10s ease-out;
	}
	.business-contents-wrapper.is-active .business-contents-item {
		width: 100%;
		margin-right: 20px;
		padding-inline: 20px 0;
	}
	.bc-en-ttl {
		position: absolute;
		right: -13px;
		top: 0;
		width: 16px;
	}

	.bc-head {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 173px;
		align-items: stretch;
		height: 100%;
	}
	.bc-ttl-box-wrapper {
		width: 100%;
		order: 2;
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 25px;
	}
	.bc-ttl-box {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-flow: row-reverse;
		gap: 12px;
	}
	.bc-ttl-box .message-block {
		position: relative;
		width: max-content;
		display: flex;
	}
	.bc-ttl-box .message-block .message-block__col,
	.bc-ttl-box .message-block .message-block__col.is-show {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(-20px);
	}
	.bc-ttl-box.is-active .message-block .message-block__col {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0);
	}
	.bc-ttl-before {
		align-items: flex-start;
	}
	.bc-ttl-after {
		align-items: flex-end;
	}
	.bc-ttl-before .message-block__col {
		transition-delay: 0s;
	}
	.bc-ttl-after .message-block__col {
		transition-delay: 0.4s;
	}
	.bc-ttl-box .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}
	.bc-ttl-main {
		width: max-content;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 25px;
		flex-shrink: 0;
		opacity: 0;
		filter: blur(8px);
		transform: translateY(-20px);
		transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
		transition-delay: 0.2s;
	}
	.bc-ttl-box.is-active .bc-ttl-main {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0px);
	}

	.bc-ttl-icon {
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, transform 0.8s ease, filter 0.8s ease;
		transition-delay: 0.8s;
	}
	.business-contents-wrapper.is-active .bc-ttl-icon {
		opacity: 1;
		filter: blur(0px);
	}
	.bci-1 .bc-ttl-icon {
		aspect-ratio: 91 / 61;
		max-width: 91px;
	}
	.bci-2 .bc-ttl-icon {
		aspect-ratio: 92 / 61;
		max-width: 92px;
	}
	.bci-3 .bc-ttl-icon {
		aspect-ratio: 45 / 76;
		max-width: 45px;
	}
	.bci-4 .bc-ttl-icon {
		aspect-ratio: 1 / 1;
		max-width: 81px;
	}
	.bci-5 .bc-ttl-icon {
		aspect-ratio: 1 / 1;
		max-width: 90px;
	}

	.bc-bottom {
		width: 100%;
		padding-right: 40px;
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, transform 0.8s ease, filter 0.8s ease;
		transition-delay: 0.8s;
	}
	.business-contents-wrapper.is-active .bc-bottom {
		opacity: 1;
		filter: blur(0px);
	}

	.bc-slider {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #fff;
		position: relative;
		pointer-events: none;
		user-select: none;
	}

	.bc-slide-item {
		transition-property: opacity, transform !important;
		pointer-events: none;
	}

	.bc-img {
		width: 100%;
		aspect-ratio: 388 / 206;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.bc-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: 6s 2s linear;
		transform: translateX(2%) scale(1.1);
		pointer-events: none;
		user-select: none;
	}
	.bc-slide-item[class*="-active"] .bc-img img {
		transition-delay: 0s;
		transform: translateX(-2%) scale(1.08);
	}

	.bc-stores {
		width: 100%;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		gap: 15px;
		opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, transform 0.8s ease, filter 0.8s ease;
		transition-delay: 0.8s;
	}
	.business-contents-wrapper.is-active .bc-stores {
		opacity: 1;
		filter: blur(0px);
	}
	.bc-store-item {
		width: 100%;
		display: flex;
		flex-flow: column;
		gap: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid var(--c-wh);
	}
	.bc-store-txt {
		font-size: 12px;
	}
	.bc-store-logo {
		width: 100%;
	}

	.bc-store-visual {
		position: relative;
		width: 100%;
		overflow: hidden;
		display: block;
	}

	.bc-store-visual__item {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
		width: 100%;
		aspect-ratio: 388 / 206;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.bc-store-visual__item.is-active {
		position: relative;
		opacity: 1;
		visibility: visible;
	}

	.bc-store-visual__item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bc-store-item.is-active {
		pointer-events: none;
	}

	.bc-slider {
		display: none;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-business {
			width: 100vw;
			flex: 0 0 100vw;
		}
		.sec-business .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			padding-inline: 20px;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 80px;
		}
		.business-ttl {
			position: relative;
			top: auto;
			right: auto;
		}
		.business-ttl .message-block__col {
			padding-inline: 5px;
			padding-block: 7px;
		}
		.business-ttl .message-block__group {
			font-size: clamp(20px, 1.66vw, 40px);
		}
		.business-contents-wrapper {
			width: 100%;
			position: relative;
			right: auto;
			top: auto;
			bottom: auto;
			height: auto;
			max-height: none;
		}
		.business-contents {
			height: auto;
			flex-flow: column;
			gap: 50px;
		}
		.business-contents-item {
			width: 100%;
			height: 100%;
			border-right: none;
		}
		.bc-en-ttl {
			display: none;
		}
		.business-contents-wrapper.is-active .business-contents-item {
			margin-right: 0px;
			padding-inline: 0px;
		}
		.bc-ttl-box-wrapper,
		.bc-ttl-box {
			width: fit-content;
		}
		.bc-head {
			grid-template-columns: minmax(0, 1fr) 200px;
			gap: 0px;
			align-items: flex-start;
		}
		.bc-ttl-box-wrapper {
			order: 1;
		}
		.bc-ttl-box.is-active .message-block .message-block__col {
			writing-mode: tb;
		}
		.bc-stores {
			order: 2;
		}
		.bc-store-txt {
			font-size: 13px;
		}
		.bc-bottom {
			padding-right: 0;
		}
		.bc-store-visual {
			display: none;
		}

		.bc-slider {
			display: block;
		}
	}
}
/* ------------------------------------------------------------
project
---------------------------------------------------------------*/
@layer page {
	.sec-project {
		position: relative;
		width: 62.5vw;
		flex: 0 0 62.5vw;
		z-index: 10;
		overflow: hidden;
		min-width: 900px;
		background: #36312d;
	}
	.sec-project .c-panel__inner {
		z-index: 10;
	}
	.c-project-head-contents {
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 61.88%;
		overflow: hidden;
	}

	.project-head-area {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		overflow: hidden;
		gap: clamp(30px, 34.722vw, 50px);
		text-align: center;
		order: 1;
		color: var(--c-wh);
	}
	.project-head-area .message-block {
		flex-flow: column;
		align-items: center;
		gap: clamp(40px, 6.5vh, 55px);
	}

	.project-head-area .message-block__heading .message-block__col::before,
	.project-head-area .message-block__heading .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-wh);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.project-head-area .message-block__heading .message-block__col {
		padding-inline: 15px;
	}
	.project-head-area .message-block__heading .message-block__col::before {
		top: 0;
	}
	.project-head-area .message-block__heading .message-block__col::after {
		bottom: 0;
	}

	.project-head-area .message-block__group:not(.message-block__heading) .message-block__col {
		transition-delay: 0.6s;
	}
	.project-head-area .message-block__group.message-block__heading {
		font-size: clamp(20px, 1.66vw, 40px);
	}
	.project-head-area .message-block__group {
		font-size: clamp(13px, 1.111vw, 20px);
		gap: 11px;
	}

	.c-project-marquee {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(20px, 3.472vw, 50px);
		width: 100%;
		height: 100%;
		align-items: flex-start;
		padding-right: clamp(50px, 7.29vw, 105px);
		order: 2;
		overflow: hidden;
	}

	.c-project-marquee__col {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.c-project-marquee__track {
		display: flex;
		flex-direction: column;
		gap: 20px;
		will-change: transform;
	}

	.c-project-marquee__item {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 2 / 3.5;
	}

	.c-project-marquee__item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		user-select: none;
		pointer-events: none;
	}

	.c-project-marquee__col.is-left .c-project-marquee__track {
		animation: projectMarqueeUp var(--marquee-speed, 24s) linear infinite;
	}

	.c-project-marquee__col.is-right .c-project-marquee__track {
		animation: projectMarqueeDown var(--marquee-speed, 24s) linear infinite;
	}

	@keyframes projectMarqueeUp {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(calc(-1 * var(--marquee-distance)));
		}
	}

	@keyframes projectMarqueeDown {
		from {
			transform: translateY(calc(-1 * var(--marquee-distance)));
		}
		to {
			transform: translateY(0);
		}
	}

	@keyframes projectMarqueeLeft {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc(-1 * var(--marquee-distance)));
		}
	}

	@keyframes projectMarqueeRight {
		from {
			transform: translateX(calc(-1 * var(--marquee-distance)));
		}
		to {
			transform: translateX(0);
		}
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-project {
			width: 100vw;
			flex: 0 0 100vw;
			min-width: 0px;
		}
		.sec-project-head {
			height: auto;
			min-height: 0;
		}
		.c-project-head-contents {
			grid-template-columns: minmax(0, 1fr);
			height: auto;
			gap: 80px;
			padding-block: 54px 80px;
		}
		.project-head-area {
			height: auto;
			justify-content: flex-start;
			align-items: flex-start;
			flex-flow: row;
			gap: 15px;
			text-align: left;
			padding-inline: 30px;
			max-width: 500px;
			margin-inline: auto;
		}

		.project-head-area .message-block {
			flex-flow: column;
			align-items: flex-start;
			gap: 20px;
		}

		.project-head-area .message-block__group.message-block__heading .message-block__col {
			padding-inline: 5px;
			padding-block: 7px;
		}
		.project-head-area .message-block__group:not(.message-block__heading) .message-block__col {
			font-size: 16px;
		}

		.c-project-marquee {
			display: block;
			padding-right: 0;
			overflow: hidden;
		}

		.c-project-marquee__col {
			width: 100%;
			height: auto;
			overflow: hidden;
		}

		.c-project-marquee__col + .c-project-marquee__col {
			margin-top: 20px;
		}

		.c-project-marquee__track {
			flex-direction: row;
			width: max-content;
			gap: 10px;
		}

		.c-project-marquee__item {
			width: 120px;
			aspect-ratio: 1 / 1;
		}

		.c-project-marquee__col.is-left .c-project-marquee__track {
			animation-name: projectMarqueeLeft;
		}

		.c-project-marquee__col.is-right .c-project-marquee__track {
			animation-name: projectMarqueeRight;
		}
	}

	/* ------------------------------------------------------------
project acc
---------------------------------------------------------------*/
	.sec-project-acc {
		--rail-w: clamp(160px, 15.76vw, 227px);
		--panel-w: max(1146px, calc(100vw - (var(--rail-w) * 3)));
		--project-w: calc(var(--panel-w) + (var(--rail-w) * 3));
		flex: 0 0 var(--project-w);
		width: var(--project-w);
		max-width: none;
		height: 100vh;
		overflow: hidden;
		z-index: 10;
		background: #36312d;
	}

	.sec-project__list {
		display: flex;
		flex-flow: row-reverse nowrap;
		align-items: stretch;
		width: var(--project-w);
		height: 100%;
		margin-left: auto;
		z-index: 10;
		position: relative;
	}

	.project-unit {
		display: flex;
		flex-flow: row-reverse nowrap;
		align-items: stretch;
		flex: 0 0 auto;
		height: 100%;
	}

	.project-modal .project-unit {
		width: 100%;
		display: grid;
		flex-flow: unset;
		grid-template-columns: minmax(0, 1fr) clamp(160px, 15.76vw, 227px);
	}

	.project-unit__panel {
		flex: 0 0 0;
		width: 0;
		height: 100%;
		overflow: hidden;
		transition: flex-basis 0.6s cubic-bezier(0.65, 0, 0.35, 1), width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.project-modal .project-unit__panel {
		flex: none;
		width: 100%;
		order: 1;
		position: relative;
	}

	.project-unit.is-open .project-unit__panel {
		flex-basis: var(--panel-w);
		width: var(--panel-w);
	}

	.project-unit__panel-inner {
		width: var(--panel-w);
		height: 100%;
		box-sizing: border-box;
	}

	.project-unit__rail {
		flex: 0 0 var(--rail-w);
		width: var(--rail-w);
		height: 100%;
		cursor: pointer;
	}
	.project-unit.is-open .project-unit__rail {
		cursor: default;
	}
	.project-modal .project-unit__rail {
		width: 100%;
		flex: none;
		order: 2;
	}

	.c-project-unit-ttl {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-flow: column;
		justify-content: flex-end;
		overflow: hidden;
		padding-block: 40px;
		padding-inline: 10px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.c-project-unit-ttl::before {
		content: "";
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.39;
		position: absolute;
		z-index: 0;
		inset: 0;
	}

	.pju-1 .c-project-unit-ttl {
		background-image: url("../images/top/bg-project-unit-1.webp");
	}
	.pju-2 .c-project-unit-ttl {
		background-image: url("../images/top/bg-project-unit-2.webp");
	}
	.pju-3 .c-project-unit-ttl {
		background-image: url("../images/top/bg-project-unit-3.webp");
	}

	.c-project-unit-ttl__sub {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		z-index: 10;
		height: auto;
		left: 0;
	}
	.pju-1 .c-project-unit-ttl__sub {
		top: clamp(30px, 4.706vw, 80px);
	}
	.pju-2 .c-project-unit-ttl__sub {
		top: clamp(100px, 9.824vw, 167px);
	}
	.pju-3 .c-project-unit-ttl__sub {
		top: clamp(120px, 11vw, 187px);
	}

	.c-project-unit-ttl__txt {
		text-align: center;
		font-size: clamp(13px, 1.111vw, 20px);
		letter-spacing: clamp(2px, 0.4vh, 3.5px);
		margin: 0;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1;
		color: var(--c-wh);
	}

	.c-project-unit-ttl__icon {
		width: 36px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--c-wh);
		border-radius: 9999px;
		backdrop-filter: blur(6px);
		flex-shrink: 0;
		overflow: hidden;
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.project-unit.is-open .c-project-unit-ttl__icon {
		transform: rotate(180deg);
	}

	.project-modal .c-project-unit-ttl__icon {
		display: none;
	}

	.c-project-unit-ttl__logo-group {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 25px;
		flex-shrink: 0;
	}
	.c-project-unit-ttl__logo {
		position: relative;
		z-index: 10;
		flex-shrink: 0;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	.c-project-contents {
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: clamp(350px, 32vw, 500px) minmax(0, 1fr);
		align-items: flex-start;
		overflow: hidden;
		position: relative;
		gap: clamp(30px, 3.47vw, 66px);
	}

	.c-project-info {
		width: max-content;
		order: 2;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		gap: clamp(30px, 5.97vh, 50px);
		position: absolute;
		z-index: 10;
		color: var(--c-wh);
		top: 29.9%;
		right: 6.98%;
	}
	.c-project-logo {
		position: relative;
		z-index: 20;
	}

	.c-project-info .message-block {
		gap: clamp(30px, 3.05vw, 44px);
		justify-content: flex-end;
	}
	.c-project-info .message-block__group {
		font-size: clamp(12px, 0.972vw, 18px);
		gap: clamp(10px, 0.9vw, 16px);
	}

	.c-project-images {
		width: 100%;
		height: clamp(500px, 69.1vh, 579px);
		order: 1;
		overflow: hidden;
		padding-left: clamp(20px, 5.83vw, 84px);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		display: grid;
		gap: clamp(10px, 1.389vw, 20px);
		position: relative;
		z-index: 0;
		margin-block: auto;
	}
	.img-project {
		width: 100%;
		height: 73.4%;
		overflow: hidden;
		position: relative;
		opacity: 0;
		filter: blur(8px);
		transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
	}
	.img-project img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.img-project.--1 {
		order: 3;
		top: 0;
		transform: translateY(-50px);
		transition-delay: 0.2s;
		align-self: flex-start;
	}
	.img-project.--2 {
		order: 2;
		bottom: 0;
		transform: translateY(50px);
		transition-delay: 0.4s;
		align-self: flex-end;
	}
	.img-project.--3 {
		order: 1;
		top: clamp(30px, 4.78vh, 40px);
		transform: translateY(-50px);
		transition-delay: 0.6s;
		align-self: flex-start;
	}

	.is-active .img-project {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0px);
	}

	@media (min-width: 1000px) and (min-height: 750px) {
		.sec-project-acc {
			--panel-w: 0px;
			--project-w: calc(var(--rail-w) * 3);

			flex: 0 0 var(--project-w);
			width: var(--project-w);
		}

		.sec-project-acc > .sec-project__list > .project-unit > .project-unit__panel {
			flex: 0 0 0;
			width: 0;
			height: 100%;
			overflow: hidden;
			pointer-events: none;
		}

		.sec-project-acc > .sec-project__list > .project-unit.is-open > .project-unit__panel {
			flex-basis: 0;
			width: 0;
		}
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-panel.sec-project-acc {
			width: 100%;
			flex: none;
			height: auto;
			max-width: 100%;
			min-height: 0;
			border-block-end: 1px solid var(--c-text);
		}
		.c-project-unit-ttl {
			justify-content: center;
			gap: 30px;
			padding-inline: 20px;
			min-height: 210px;
		}
		.c-project-unit-ttl__sub {
			position: relative;
			top: auto !important;
			justify-content: flex-start;
			max-width: 500px;
			margin-inline: auto;
		}
		.c-project-unit-ttl__logo-group {
			flex-flow: row;
			align-items: flex-end;
			justify-content: space-between;
			max-width: 500px;
			margin-inline: auto;
		}
		.c-project-unit-ttl__logo {
			justify-content: flex-start;
			margin: 0;
		}
		.project-unit.pju-1 .c-project-unit-ttl__logo {
			width: 50%;
		}
		.project-unit.pju-2 .c-project-unit-ttl__logo {
			width: 70%;
		}
		.project-unit.pju-3 .c-project-unit-ttl__logo {
			width: 70%;
		}

		.sec-project__list {
			display: block;
			width: 100%;
			height: auto;
			margin-left: 0;
		}

		.project-unit {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: auto;
		}

		.project-unit__rail {
			order: 1;
			width: 100%;
			height: auto;
			flex: none;
			writing-mode: horizontal-tb;
			text-orientation: initial;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
		}

		.project-unit__panel {
			order: 2;
			display: block;
			width: 100% !important;
			height: 0;
			flex: none !important;
			overflow: hidden;
			transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
			will-change: height;
		}

		.project-unit__panel-inner {
			width: 100%;
			height: auto;
			padding: 20px;
		}

		.c-project-unit-ttl__txt {
			writing-mode: initial;
			text-orientation: initial;
			line-height: 1.6;
			text-wrap-style: balance;
			text-align: left;
			font-size: 16px;
		}

		.c-project-contents {
			height: auto;
			grid-template-columns: minmax(0, 1fr);
			gap: 50px;
			max-width: 500px;
			margin-inline: auto;
		}

		.c-project-info {
			height: auto;
			order: 2;
			flex-flow: column;
			justify-content: flex-start;
			gap: 30px;
			padding-bottom: 100px;
			padding-right: clamp(20px, 7.18vw, 28px);
			padding-left: 0;
			position: relative;
			top: auto;
			right: auto;
		}
		.c-project-info .message-block {
			width: 100%;
		}
		.c-project-info .message-block__group {
			font-size: 16px;
			gap: 0;
		}
		.c-project-info .message-block__group .message-block__col {
			line-height: 2;
		}
		.c-project-logo {
			width: clamp(250px, 80.76vw, 315px);
			height: auto;
			aspect-ratio: 315 / 63;
		}
		.c-project-images {
			display: none;
		}
	}

	.c-project-slider-area {
		display: none;
	}
	@media (max-width: 999px), (max-height: 749px) {
		.c-project-slider-area {
			display: flex;
			flex-flow: column;
			min-height: 240px;
			aspect-ratio: 390 / 240;
			overflow: hidden;
			position: relative;
			z-index: 0;
		}
		.c-project-slider {
			width: 100%;
		}
		.img-projects-slide {
			width: 100%;
			height: auto;
			aspect-ratio: 390 / 240;
		}
		.img-projects-slide img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.c-project-slider-area .btn-slide {
			width: 11px;
			height: 51px;
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			z-index: 10;
			background-size: contain;
			background-repeat: no-repeat;
			cursor: pointer;
		}

		.c-project-slider-area .btn-slide.is-prev {
			left: 10px;
			background-image: url("../images/top/icon-slide-prev.svg");
		}

		.c-project-slider-area .btn-slide.is-next {
			right: 10px;
			background-image: url("../images/top/icon-slide-next.svg");
		}

		.c-project-unit-ttl__icon {
			transform: rotate(-90deg);
		}
		.project-unit.is-open .c-project-unit-ttl__icon {
			transform: rotate(90deg);
		}
	}
}

/* ------------------------------------------------------------
affiliates
---------------------------------------------------------------*/
@layer page {
	.sec-affiliates {
		width: 95vw;
		flex: 0 0 95vw;
		background-image: url("../images/top/bg-affiliates.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		display: flex;
		align-items: center;
	}

	.affiliates-ttl {
		position: absolute;
		z-index: 20;
		top: min(145px, 17.32%);
		right: 9.03%;
	}

	.affiliates-ttl .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}

	.affiliates-ttl .message-block__col::before,
	.affiliates-ttl .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-text);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.affiliates-ttl .message-block__col {
		padding-block: 15px;
		gap: 1em;
	}
	.affiliates-ttl .message-block__col::before {
		top: 0;
	}
	.affiliates-ttl .message-block__col::after {
		bottom: 0;
	}

	.affiliates-map-area {
		width: 95%;
		height: auto;
		position: relative;
		z-index: 10;
	}
	.affiliates-map {
		width: 100%;
		height: auto;
		aspect-ratio: 1440 / 840;
		position: relative;
		z-index: 0;
	}
	.affiliates-map img {
		width: 100%;
	}

	.locate-group-wrapper {
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		inset: 0;
		pointer-events: none;
	}
	.locate-group {
		width: 100%;
		height: 100%;
		inset: 0;
		pointer-events: none;
	}
	.locate-group__dot {
		width: 18px;
		height: auto;
		aspect-ratio: 1 / 1;
		position: absolute;
		border-radius: 9999px;
		border: 1px solid #fff;
		filter: drop-shadow(0px 3px 6px rgb(0 0 0 / 16%));
		background: var(--c-brown);
	}

	.locate-group__main {
		position: absolute;
		width: max-content;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		z-index: 30;
		pointer-events: all;
		gap: clamp(14px, 0.972vw, 20px);
	}

	.locate-group__ttl {
		font-size: clamp(24px, 2.08vw, 40px);
		color: var(--c-brown);
		letter-spacing: 0.05em;
		line-height: 0.78;
	}

	.locate-group__btns {
		width: 100%;
		display: flex;
		gap: clamp(5px, 0.4167vw, 8px);
		flex-flow: column;
		align-items: flex-start;
		position: relative;
	}
	.locate-group__btn {
		width: max-content;
		background-color: var(--c-wh);
		color: var(--c-brown);
		font-size: clamp(12px, 0.972vw, 18px);
		line-height: 1;
		padding: 3px 5px;
		font-weight: 400;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	.locate-group__btn:hover {
		background-color: var(--c-brown);
		color: var(--c-wh);
	}

	/* Tokyo */
	.lg-tokyo .locate-group__main {
		top: 39.2%;
		left: 66.39%;
	}
	.lg-tokyo .locate-group__dot.--dot-1 {
		top: 39.167%;
		right: 35.625%;
		z-index: 20;
	}
	.lg-tokyo .locate-group__dot.--dot-2 {
		top: 40%;
		right: 35%;
		z-index: 10;
	}
	.lg-tokyo .locate-group__dot.--dot-3 {
		top: 40.6%;
		right: 35.763%;
		z-index: 0;
	}

	/* Miyagi */
	.lg-miyagi .locate-group__main {
		top: 24.64%;
		left: 67.22%;
	}
	.lg-miyagi .locate-group__dot.--dot-1 {
		top: 29.17%;
		right: 33.68%;
		z-index: 0;
	}

	/* Kyoto */
	.lg-kyoto .locate-group__main {
		top: 32.5%;
		right: 40%;
		align-items: flex-end;
	}
	.lg-kyoto .locate-group__dot.--dot-1 {
		top: 40.59%;
		right: 41.52%;
		z-index: 0;
	}

	/* taiwan */
	.lg-taiwan .locate-group__main {
		top: 66.19%;
		left: 38.86%;
	}
	.lg-taiwan .locate-group__dot.--dot-1 {
		top: 71.54%;
		right: 61.9%;
		z-index: 10;
	}
	.lg-taiwan .locate-group__dot.--dot-2 {
		top: 75.83%;
		right: 63.54%;
		z-index: 0;
	}
	.lgb-mare-kaohsiung {
		position: absolute;
		top: 380%;
		left: -90px;
	}
	.lgb-wamare-antenna {
		position: absolute;
		top: 510%;
		left: -90px;
	}

	/* hongkong */
	.lg-hongkong .locate-group__main {
		top: 69%;
		left: 11.25%;
	}
	.lg-hongkong .locate-group__dot.--dot-1 {
		top: 77.3%;
		right: 72.15%;
		z-index: 0;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-affiliates {
			width: 100vw;
			align-items: flex-start;
		}
		.sec-affiliates .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 0 80px;
		}

		.affiliates-ttl {
			top: 60px;
			right: auto;
			left: 20px;
		}
		.affiliates-ttl .message-block__col {
			padding-inline: 15px;
			padding-block: 7px;
		}
		.affiliates-ttl .message-block__group {
			font-size: clamp(20px, 1.66vw, 40px);
		}

		.affiliates-map-area {
			display: flex;
			flex-flow: column;
			align-items: center;
			gap: 20px;
		}
		.affiliates-map {
			aspect-ratio: 390 / 460;
		}
		.affiliates-map img {
			width: 100%;
			object-fit: contain;
		}
		.locate-group-wrapper {
			position: relative;
			height: auto;
			inset: unset;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			gap: 40px;
			padding-inline: 30px;
		}
		.locate-group {
			height: auto;
			inset: unset;
		}
		.locate-group__dot {
			display: none;
		}
		.locate-group__main {
			position: relative;
			top: auto !important;
			bottom: auto !important;
			left: auto !important;
			right: auto !important;
		}
		.lg-kyoto .locate-group__main {
			align-items: flex-start;
		}
		.lgb-mare-kaohsiung,
		.lgb-wamare-antenna {
			position: relative;
			top: auto !important;
			left: auto !important;
		}
		.locate-group__btn {
			font-size: 16px;
		}
	}
}

/* ------------------------------------------------------------
company
---------------------------------------------------------------*/
@layer page {
	.sec-company {
		width: 100vw;
		/*		flex: 0 0 85vw;*/
		flex: 0 0 clamp(900px, 85vw, 1000px);
		background-image: url("../images/top/bg-company.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		display: flex;
		align-items: center;
	}

	.company-ttl {
		position: absolute;
		z-index: 20;
		top: min(145px, 17.32%);
		right: 9.03%;
	}

	.company-ttl .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}

	.company-ttl .message-block__col::before,
	.company-ttl .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-wh);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.company-ttl .message-block__col {
		padding-inline: 15px;
		color: var(--c-wh);
	}
	.company-ttl .message-block__col::before {
		top: 0;
	}
	.company-ttl .message-block__col::after {
		bottom: 0;
	}

	.c-company-cont {
		width: 100%;
		height: 100%;
		color: var(--c-wh);
		padding-right: 15%;
	}

	.c-company__group-wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row-reverse;
		justify-content: flex-start;
		align-items: center;
		gap: clamp(30px, 3.819vw, 70px);
		padding-left: clamp(80pxpx, 10.417vw, 150px);
	}

	.c-company__group .message-block__group {
		gap: clamp(20px, 2.778vw, 70px);
	}
	.c-ci-group {
		display: grid;
		align-items: flex-start;
		gap: 30px;
		grid-template-rows: 140px minmax(0, 1fr);
		font-size: clamp(12px, 1.042vw, 15px);
	}
	.c-ci-group .origin img {
		width: 68px;
		height: 418px;
	}
	.c-ci-group__txt {
		line-height: 1.4;
		letter-spacing: 0.08em;
		text-orientation: upright;
	}

	.c-ci-group__txts {
		display: flex;
		flex-flow: row-reverse;
		gap: clamp(10px, 0.833vw, 12px);
		align-items: flex-start;
	}
	.c-ci-group__txt .banchi > i:not(:last-of-type)::after {
		height: 10px;
		left: 0px;
	}

	.c-ci-group__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		background: var(--c-primary);
		color: var(--c-wh);
		text-decoration: none;
		padding: 14px 8px;
		min-height: 150px;
		font-size: clamp(13px, 1.111vw, 15px);
		line-height: 1.5;
		letter-spacing: 0.08em;
		transition: opacity 0.25s ease;
	}

	.c-company-circle {
		width: clamp(200px, 20.833vw, 300px);
		flex-shrink: 0;
		height: auto;
		aspect-ratio: 308 / 628;
		display: flex;
		flex-flow: column;
		align-items: center;
		overflow: hidden;
		position: relative;
		top: -64px;
	}

	.c-company-circle > * {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(-20px);
		transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
	}
	.c-company-circle.is-active > * {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0);
	}

	.c-company-circle__img {
		width: 75.97%;
		height: auto;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		flex-shrink: 0;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.c-company-circle__img.cci-1 {
		top: 0;
		transition-delay: 0s;
	}
	.c-company-circle__img.cci-2 {
		top: 26.75%;
		transition-delay: 0.2s;
	}
	.c-company-circle__img.cci-3 {
		top: 52.55%;
		transition-delay: 0.4s;
	}

	.icon-company-arrow {
		width: 40px;
		position: absolute;
		bottom: 8.32%;
		left: 0;
		right: 0;
		margin-inline: auto;
		height: auto;
		aspect-ratio: 2 / 1;
		transition-delay: 0.6s;
	}
	.icon-company-arrow img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.img-company-circle--bar {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-inline: auto;
		height: auto;
		aspect-ratio: 308 / 45;
		transition-delay: 0.8s;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.sec-company .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 50px;
			padding-inline: 20px;
		}
		.c-company-cont {
			padding-right: 0;
		}

		.c-company__group-wrapper {
			flex-flow: column;
			align-items: flex-start;
			padding-left: 0;
		}
		.c-company__group .message-block__group {
			gap: 30px;
		}

		.company-ttl {
			position: relative;
			top: auto;
			right: auto;
		}
		.company-ttl .message-block__col {
			padding-inline: 15px;
			padding-block: 7px;
		}
		.company-ttl .message-block__group {
			font-size: clamp(20px, 1.66vw, 40px);
		}

		.c-ci-group {
			gap: 15px;
			grid-template-rows: minmax(0, 1fr);
			font-size: 16px;
			width: 100%;
			align-items: center;
		}
		.c-ci-group__txts {
			flex-flow: column;
			gap: 3px;
		}

		.c-ci-group__txt {
			text-orientation: initial;
		}
		.c-ci-group__txt .banchi {
			writing-mode: initial;
			text-orientation: initial;
			display: inline-flex;
			text-align: left;
			justify-content: flex-start;
			margin-bottom: 0;
			margin-top: 0;
		}
		.c-ci-group__txt .banchi > i:not(:last-of-type)::after {
			height: 1px;
			width: 5px;
			left: 0px;
			top: 1px;
		}

		.c-ci-group__link {
			writing-mode: initial;
			text-orientation: initial;
			flex-flow: row-reverse;
			gap: 10px;
			padding: 8px 14px;
			min-height: 0;
			margin-block: 10px;
		}

		.c-ci-group .origin img {
			margin-inline: auto;
			margin-block: 40px;
		}
		.c-company-circle {
			width: 100%;
			top: auto;
		}
	}
}

/* ------------------------------------------------------------
Will
---------------------------------------------------------------*/
@layer page {
	.sec-will {
		width: 1897px;
		flex: 0 0 1897px;
		max-width: 1897px;
		background-image: url("../images/top/bg-affiliates.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		display: flex;
		align-items: center;
	}

	.will-ttl {
		position: absolute;
		z-index: 20;
		top: min(120px, 14.28%);
		right: 7.9%;
	}

	.will-ttl .message-block__group {
		font-size: clamp(20px, 1.66vw, 40px);
	}

	.will-ttl .message-block__col::before,
	.will-ttl .message-block__col::after {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--c-text);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
	.will-ttl .message-block__col {
		padding-block: 15px;
		gap: 4px;
	}
	.will-ttl .message-block__col::before {
		top: 0;
	}
	.will-ttl .message-block__col::after {
		bottom: 0;
	}

	.will-txts {
		position: absolute;
		z-index: 10;
		top: min(170px, 20.23%);
		right: 13.17%;
		display: flex;
		flex-flow: row-reverse;
		gap: 80px;
		align-items: flex-start;
	}
	.will-txts > .message-block {
		gap: 50px;
	}

	.will-txts .message-block__brand.mbb-gap-0 {
		gap: 0;
	}

	.will-txts .message-block__col strong {
		font-size: clamp(16px, 1.25vw, 18px);
	}

	.will-bottom-cont {
		width: max-content;
		display: flex;
		flex-flow: row-reverse;
		gap: 50px;
		align-items: flex-start;
	}
	.ceo-box {
		width: clamp(200px, 20.833vw, 300px);
		display: flex;
		flex-flow: column;
		gap: 20px;
		align-items: flex-end;
	}
	.will-img-mare {
		width: 258px;
		height: auto;
		aspect-ratio: 258 / 404;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
	}
	.will-img-mare img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		animation-delay: 0.1s;
	}
	.ceo__img {
		width: 100%;
		height: auto;
		aspect-ratio: 300 / 240;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
	}
	.ceo__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.ceo-box > .message-block__group {
		align-items: flex-end;
		font-size: 16px;
	}
	.ceo-box > .message-block__group .message-block__col {
		transition-delay: 1s;
	}
	.ceo-box > .message-block__group > .message-block__col:last-of-type {
		font-size: 20px;
	}
	@media (max-width: 999px), (max-height: 749px) {
		.sec-will {
			align-items: flex-start;
			width: 100vw;
			flex: 0 0 100vw;
		}
		.sec-will .c-panel__inner {
			max-height: none;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			justify-content: center;
			gap: 60px;
			max-width: 500px;
			margin-inline: auto;
			padding-block: 80px;
			padding-inline: 20px;
		}

		.will-ttl {
			position: relative;
			top: auto;
			right: auto;
		}
		.will-ttl .message-block__col {
			padding-inline: 15px;
			padding-block: 7px;
		}
		.will-ttl .message-block__group {
			font-size: clamp(20px, 1.66vw, 40px);
		}
		.will-txts {
			position: relative;
			top: auto;
			right: auto;
			flex-flow: column;
			gap: 50px;
		}
		.will-txts > .message-block {
			width: 100%;
			gap: 30px;
		}
		.will-txts .message-block__group {
			width: 100%;
			gap: 0px;
			font-size: 16px;
		}
		.will-txts .message-block__col {
			line-height: 2;
		}
		.will-img-mare {
			width: min(335px, 100%);
			margin-inline: auto;
		}

		.will-bottom-cont {
			width: 100%;
			flex-flow: column;
			align-items: center;
			gap: 30px;
		}
		.ceo-box {
			width: min(335px, 100%);
		}
	}
}

/* ------------------------------------------------------------
footer
---------------------------------------------------------------*/
@layer page {
	.sec-footer {
		width: 100vw;
		flex: 0 0 100vw;
		background-image: url("../images/top/bg-footer.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
		display: flex;
		align-items: center;
	}

	.c-footer-cont {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		position: relative;
	}
	.c-footer-logo {
		position: absolute;
		top: min(325px, 38.69%);
		width: 150px;
		height: auto;
		aspect-ratio: 150 / 105;
	}
	.c-footer-links {
		width: min(900px, 100%);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		position: absolute;
		top: min(496px, 59.25%);
		gap: 60px 30px;
	}
	.c-footer-link {
		flex-shrink: 0;
		padding-right: 30px;
		position: relative;
	}
	.c-footer-link::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		height: 100%;
		background: radial-gradient(circle, #fff 1px, transparent 1px) repeat-y;
		background-size: 1px 8px;
	}
	.c-footer-link:nth-of-type(4)::after,
	.c-footer-link:last-of-type::after {
		content: none;
	}
	.c-footer-links > a {
		position: relative;
		display: block;
		padding-right: 30px;
	}
	.c-footer-links > a:after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		height: 100%;
		background: radial-gradient(circle, #fff 1px, transparent 1px) repeat-y center / 1px 8px;
	}
	.c-footer-links > a:last-child::after {
		content: none;
	}
	.c-footer-links > a:hover {
		opacity: 0.7;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-footer-cont {
			padding-block: 100px;
			padding-inline: 20px;
			max-width: 500px;
			margin-inline: auto;
		}
		.c-footer-logo {
			position: relative;
			top: auto;
			width: clamp(130px, 11.6666vw, 300px);
			margin-bottom: 60px;
		}
		.c-footer-origin {
			position: relative;
			top: auto;
			width: 300px;
			height: 53px;
			margin-bottom: 100px;
		}
		.c-footer-links {
			justify-content: flex-start;
			flex-wrap: unset;
			position: relative;
			top: auto;
			gap: 50px;
			flex-flow: column;
			align-items: center;
		}
		.c-footer-link {
			padding-right: 0px;
		}
		.c-footer-links > a {
			padding-right: 0;
		}
		.c-footer-links > a::after {
			content: none;
		}
		.c-footer-link::after {
			content: none;
		}
	}
}