@layer page {
	/* method */
	.method-modal {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: block;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 0.35s;
	}

	.method-modal.is-open {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.method-modal__bg {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.method-modal.is-open .method-modal__bg {
		opacity: 1;
	}

	.method-modal__dialog {
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 100%;
		min-height: 100%;
		padding: 20px;
		box-sizing: border-box;
	}

	.method-modal__content {
		width: 100%;
		max-width: 330px;
		color: var(--c-wh);
		display: flex;
		flex-flow: column;
		align-items: center;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.35s ease, transform 0.35s ease;
	}
	.method-modal.is-open .method-modal__content {
		opacity: 1;
		transform: translateY(0);
	}

	.method-modal__title {
		width: 100%;
		font-size: 30px;
		font-weight: 400;
		line-height: calc(30 / 19.5);
		letter-spacing: 0;
		margin-bottom: 20px;
	}

	.method-modal__text {
		width: 100%;
		font-size: 18px;
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0em;
		white-space: pre-line;
		margin-bottom: 40px;
	}

	.method-modal__close {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		color: var(--c-wh);
		height: 35px;
		width: 80px;
		font-size: 15px;
		cursor: pointer;
		border: 1px solid var(--c-wh);
	}

	body.is-method-modal-open {
		overflow: hidden;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.method-modal {
			display: block;
			visibility: hidden;
		}

		.method-modal.is-open {
			visibility: visible;
		}
	}

	/* project */
	@media (min-width: 1000px) and (min-height: 750px) {
		.project-modal {
			width: 100%;
			position: fixed;
			inset: 0;
			z-index: 99999;
			display: none;
			padding: 30px;
		}

		.project-modal.is-open {
			display: block;
		}

		.project-modal__overlay {
			width: 100%;
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(12px);
		}

		.project-modal__frame {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: #1a1713;
			max-width: 1440px;
			margin-inline: auto;
		}

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

		.controll-btns-wrapper {
			width: 100%;
			display: grid;
			grid-template-columns: minmax(0, 1fr) clamp(160px, 15.76vw, 227px);
			position: absolute;
			inset: 0;
		}

		.controll-btns {
			width: 100%;
			position: relative;
		}

		.project-modal__close {
			position: absolute;
			top: 50px;
			right: 50px;
			z-index: 20;
			width: 36px;
			height: 36px;
			border: 1px solid rgba(255, 255, 255, 0.7);
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.12);
			cursor: pointer;
		}

		.project-modal__close span {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 18px;
			height: 1px;
			background: var(--c-wh);
		}

		.project-modal__close span:nth-child(1) {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.project-modal__close span:nth-child(2) {
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		.project-modal-slider,
		.project-modal-slider .swiper-wrapper,
		.project-modal-slider .swiper-slide {
			height: 100%;
		}

		.project-modal-slide {
			overflow: hidden;
		}

		.project-modal-slide__inner {
			width: 100%;
			height: 100%;
		}

		.project-modal-slider__arrow {
			position: absolute;
			bottom: 50px;
			z-index: 20;
			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);
			background: rgba(255, 255, 255, 0.12);
			cursor: pointer;
		}

		.project-modal-slider__arrow.is-prev {
			left: 50px;
		}

		.project-modal-slider__arrow.is-next {
			right: 50px;
		}
		.project-modal-slider__arrow.is-next img {
			rotate: 180deg;
		}

		.project-modal-slider__arrow.is-hidden {
			display: none;
		}

		body.is-project-modal-open {
			overflow: hidden;
		}

		.js-project-delay {
			opacity: 0;
		}

		.js-project-delay.is-delay-active {
			opacity: 1;
		}

		.project-modal-slide.is-slide-active .js-fade-ttl {
			opacity: 1;
			filter: blur(0px);
		}

		.project-modal-slide.is-slide-active .img-project {
			opacity: 1;
			filter: blur(0px);
			transform: translateY(0px);
		}
		.project-modal-slide.is-slide-active .message-block__col {
			opacity: 1;
			filter: blur(0px);
			transform: translateY(0);
		}
	}
	@media (max-width: 999px), (max-height: 749px) {
		.project-modal {
			display: none;
		}
	}

	/* affiliates */
	.affiliates-modal {
		position: fixed;
		inset: 0;
		z-index: 99999;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease, visibility 0.35s ease;
	}

	.affiliates-modal.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.affiliates-modal__overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.28);
	}

	.affiliates-modal__dialog {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: max-content;
		max-width: 1180px;
		max-height: calc(100vh - 160px);
		overflow: auto;
		background: var(--c-wh);
		padding-block: 45px;
		padding-inline: 43px 38px;
		box-sizing: border-box;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
		border-radius: clamp(5px, 0.35vw, 10px);
	}

	.affiliates-modal__close {
		position: absolute;
		top: 12px;
		left: 12px;
		width: 22px;
		height: 22px;
		background-image: url("../images/top/icon-close.svg");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
	}

	.affiliates-modal__inner {
		display: grid;
		grid-template-columns: clamp(530px, 42.8vw, 620px) minmax(0, 1fr);
		gap: 30px;
		align-items: flex-start;
		overflow: hidden;
	}

	.affiliates-modal__img-wrap {
		display: grid;
		grid-template-columns: clamp(350px, 27.7vw, 400px) clamp(180px, 14vw, 220px);
		gap: 15px;
		align-items: flex-start;
		overflow: hidden;
	}

	.affiliates-modal__map {
		display: flex;
		justify-content: center;
		align-items: center;
		aspect-ratio: 400 / 268;
		max-height: 268px;
		border-radius: clamp(5px, 0.35vw, 10px);
	}
	.affiliates-modal__map iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
		background: var(--c-light);
	}

	.affiliates-modal__image {
		background: var(--c-light);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		aspect-ratio: 58 / 77;
		max-height: 268px;
		border-radius: clamp(5px, 0.35vw, 10px);
	}

	.affiliates-modal__image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.affiliates-modal__image.is-loaded img {
		opacity: 1;
	}

	.affiliates-modal__image.is-noimage {
		background: var(--c-light);
	}

	.affiliates-modal__content {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 18px;
		min-height: 268px;
	}

	.affiliates-modal__site {
		flex: 0 0 auto;
	}

	.affiliates-modal__site a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		background: var(--c-brown);
		color: var(--c-wh);
		text-decoration: none;
		padding: 14px 8px;
		min-height: 150px;
		font-size: clamp(13px, 0.9vw, 17px);
		line-height: 1.5;
		letter-spacing: 0.08em;
		border-radius: 4px;
		transition: opacity 0.25s ease;
	}

	.affiliates-modal__site a:hover {
		opacity: 0.85;
	}

	.affiliates-modal__text {
		width: 100%;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1.4;
		font-size: clamp(13px, 0.9vw, 17px);
		display: flex;
		flex-flow: column;
		gap: 20px;
	}

	.affiliates-modal__title {
		margin: 0;
		font-size: clamp(11px, 0.9vw, 17px);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.08em;
		text-orientation: upright;
	}

	.affiliates-modal__info {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.affiliates-modal__row {
		margin: 0;
		display: flex;
		flex-direction: row;
		gap: 6px;
	}

	.affiliates-modal__row dt,
	.affiliates-modal__row dd {
		margin: 0;
	}

	.affiliates-modal__row dt {
		font-weight: 500;
	}

	.affiliates-modal__row dd {
		line-height: 2;
		text-orientation: upright;
	}

	.affiliates-modal__row a {
		color: inherit;
		text-decoration: underline;
		word-break: break-all;
	}

	.banchi {
		writing-mode: vertical-rl;
		text-orientation: upright;
		display: inline-flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin-bottom: 4px;
		margin-top: 2px;
	}
	.banchi > i {
		font-style: normal;
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}
	.banchi > i:not(:last-of-type)::after {
		content: "";
		display: block;
		position: relative;
		width: 1px;
		height: 4px;
		left: 1px;
		background: var(--c-text);
	}
	.banchi.--wh > i:not(:last-of-type)::after {
		background: var(--c-wh);
	}

	body.is-modal-open {
		overflow: hidden;
	}

	.affiliates-modal__map[style*="display: none"] {
		display: none !important;
	}

	.affiliates-modal__map[style*="display: none"] + .affiliates-modal__content {
		grid-column: auto;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.affiliates-modal__close {
			right: 12px;
			left: auto;
		}
		.affiliates-modal__dialog {
			width: 90%;
			max-width: 500px;
			padding-block: 50px 30px;
			padding-inline: 30px;
		}
		.affiliates-modal__inner {
			width: 100%;
			grid-template-columns: minmax(0, 1fr);
			gap: 10px;
		}
		.affiliates-modal__content {
			width: 100%;
			flex-direction: column-reverse;
			min-height: 0;
			order: 0;
		}
		.affiliates-modal__site a {
			width: auto;
			writing-mode: initial;
			text-orientation: initial;
			padding: 8px 14px;
			min-height: 0;
		}
		.affiliates-modal__img-wrap {
			width: 100%;
			grid-template-columns: minmax(0, 1fr);
			order: 1;
		}
		.affiliates-modal__text {
			writing-mode: initial;
			text-orientation: initial;
		}
		.affiliates-modal__row dd .banchi {
			writing-mode: initial;
			text-orientation: initial;
			display: inline-flex;
			text-align: left;
			justify-content: flex-start;
			margin-bottom: 0;
			margin-top: 0;
		}
		.affiliates-modal__row dd .banchi > i:not(:last-of-type)::after {
			height: 1px;
			width: 5px;
			left: 0px;
			top: 1px;
		}
		.affiliates-modal__title {
			font-size: 14px;
		}
		.affiliates-modal__image {
			max-height: none;
			order: 0;
		}
		.affiliates-modal__map {
			order: 1;
		}
	}

	/* contact */
	.contact-modal {
		position: fixed;
		inset: 0;
		z-index: 99999;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 0.35s;
	}

	.contact-modal.is-open {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.contact-modal__bg {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.contact-modal.is-open .contact-modal__bg {
		opacity: 1;
	}

	.contact-modal__dialog {
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 100%;
		min-height: 100%;
		padding: 30px;
		box-sizing: border-box;
	}

	.contact-modal__content {
		position: relative;
		width: min(100%, 650px);
		max-height: calc(100dvh - 60px);
		overflow-y: auto;
		background: #1a1713;
		color: var(--c-wh);
		padding-block: clamp(20px, 3.472vw, 50px);
		padding-inline: clamp(20px, 3.472vw, 50px);
		box-sizing: border-box;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.35s ease, transform 0.35s ease;
		scrollbar-width: thin;
		scrollbar-color: var(--c-wh) transparent;
	}
 
 .contact-modal__content #jsContactStep2 .contact-modal__input,
 .contact-modal__content #jsContactStep2 .contact-modal__textarea{
  border: none;
 }
 
 .contact-modal__content #jsContactStep2 .contact-modal__textarea{
  height: fit-content;
 }

	.contact-modal.is-open .contact-modal__content {
		opacity: 1;
		transform: translateY(0);
	}

	.contact-modal__close {
		position: absolute;
		top: clamp(15px, 2.083vw, 30px);
		right: clamp(15px, 2.083vw, 30px);
		width: 36px;
		height: 36px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		cursor: pointer;
	}

	.contact-modal__close span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 1px;
		background: var(--c-wh);
		transform-origin: center;
	}

	.contact-modal__close span:nth-child(1) {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.contact-modal__close span:nth-child(2) {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.contact-modal__title {
		font-size: clamp(16px, 1.389vw, 20px);
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.08em;
		text-align: center;
		margin-bottom: clamp(16px, 1.389vw, 20px);
	}

	.contact-modal__lead {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: 0;
		text-align: center;
		margin-bottom: clamp(16px, 1.389vw, 20px);
	}

	.contact-modal__form {
		width: min(100%, 450px);
		margin-inline: auto;
	}

	.contact-modal__row {
		display: grid;
		grid-template-columns: 150px minmax(0, 1fr);
		column-gap: 20px;
		align-items: center;
		margin-bottom: 10px;
	}

	.contact-modal__row--textarea {
		align-items: start;
	}

	.contact-modal__label {
		font-size: 15px;
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: 0;
		text-align: right;
	}
	.contact-modal__label small {
		font-size: 15px;
		color: var(--c-primary);
	}

	.contact-modal__input,
	.contact-modal__textarea {
		width: 100%;
		border: 1px solid var(--c-wh);
		background: transparent;
		color: var(--c-wh);
		font-size: 16px;
		line-height: 1.6;
		padding: 7px 10px;
		box-sizing: border-box;
		outline: none;
	}
 
 .contact-modal__field-error{
  display: block;
  width: 100%;
  grid-column: 2;
  color: var(--c-primary);
  font-size: 0.85em;
  margin-top: 4px;
 }

	.contact-modal__input {
		height: 35px;
	}

	.contact-modal__textarea {
		height: 105px;
		resize: vertical;
	}

	.contact-modal__input::placeholder,
	.contact-modal__textarea::placeholder {
		color: rgba(255, 255, 255, 0.5);
	}

	.contact-modal__input:focus,
	.contact-modal__textarea:focus {
		border-color: var(--c-wh);
	}

	.contact-modal__privacy {
		width: 100%;
	}
	.contact-modal__privacy-wrapper {
		width: 100%;
		overflow-y: scroll;
		height: 100px;
  border: solid 1px;
  border-color: var(--c-wh);
  padding: 10px;
	}
	.contact-modal__privacy-title {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.8;
		letter-spacing: 0.06em;
		margin-bottom: 26px;
	}

	.contact-modal__privacy-text {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.9;
		letter-spacing: 0.05em;
		margin-bottom: 14px;
	}

	.contact-modal__agree {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		line-height: 1.6;
		letter-spacing: 0.04em;
		margin-top: 12px;
	}
	.contact-modal__agree small {
		font-size: 15px;
		color: var(--c-primary);
	}

	.contact-modal__agree input {
		appearance: none;
		width: 20px;
		height: 20px;
		border: 1px solid var(--c-wh);
		background: transparent;
		cursor: pointer;
		position: relative;
		flex: 0 0 auto;
	}
 
 .contact-modal__agree span a{
  text-decoration: underline;
 }

	.contact-modal__agree input:checked::after {
		content: "";
		position: absolute;
		left: 5px;
		top: 1px;
		width: 7px;
		height: 13px;
		border-right: 2px solid var(--c-wh);
		border-bottom: 2px solid var(--c-wh);
		transform: rotate(45deg);
	}
 
 .contact-modal__agree + .contact-modal__field-error{
  text-align: center;
 }

	.contact-modal__submit-wrap {
		display: flex;
		justify-content: center;
		margin-top: 28px;
	}
 
 #jsContactStep2 .contact-modal__submit-wrap{
  gap: 28px;
 }

 .contact-modal__back,
	.contact-modal__submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 120px;
		height: 35px;
		border: 1px solid var(--c-wh);
		background: transparent;
		color: var(--c-wh);
		font-size: 15px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0;
		cursor: pointer;
		transition: background 0.25s ease, color 0.25s ease;
	}
 
 .contact-modal__back{
  background: rgba(255, 255, 255, 0.12);
 }

 .contact-modal__back:hover,
	.contact-modal__submit:hover {
		background: var(--c-primary);
	}

	html.is-contact-modal-open,
	body.is-contact-modal-open {
		overflow: hidden;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.contact-modal__content {
			width: min(450px, 100%);
		}

		.contact-modal__lead {
			text-align: left;
		}

		.contact-modal__form {
			width: 100%;
		}

		.contact-modal__row {
			display: block;
			margin-bottom: 16px;
		}

		.contact-modal__label {
			display: block;
			text-align: left;
			font-size: 15px;
			margin-bottom: 6px;
		}

		.contact-modal__agree {
			align-items: flex-start;
			justify-content: flex-start;
			font-size: 14px;
		}

  .contact-modal__back,
		.contact-modal__submit {
			width: 130px;
			height: 40px;
		}
	}
}