@charset "UTF-8";

/* site-main */
@media all {
	.bg-webp {
		position: relative;
	}
	.main-header {
		position: relative;
		overflow: hidden;
	}
	.main-header>img {
		position: absolute;
		top: 0;
	}
	.main-header-ttl {
		position: absolute;
		display: block;
	}
	.right-ttl .main-header>img {border-radius: 0 140rem 140rem 0;}
	.left-ttl .main-header>img {border-radius: 140rem 0 0 140rem;}

	.main-header-ttl {
		writing-mode: vertical-rl;
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
		color: var(--main-color);
	}
	.main-header-ttl::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: calc(50% + .5em);
		display: block;
		width: var(--max1px);
		height: 100%;
		transform: scaleY(0);
		transform-origin: center top;
		background-color: var(--light-blue);
		transition: transform 1s ease-out 1.5s;
	}
	.main-header-ttl.animated::before {transform: scaleY(1);}
	.main-header-ttl.elemFadeIn {transition-delay: 1s;}
	.main-header-ttl.elemFadeIn::before {transition-delay: 2.25s;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.site-main {
			padding-top: 110rem;
		}
		.bg-webp {
			margin-top: -110rem;
			padding-top: 110rem;
			background: center / contain url(../img/common/bg-sp.webp);
		}

		.main-header {height: 180rem;}
		.main-header>img {
			max-width: none;
			width: auto;
			height: 100%;
		}
		.right-ttl .main-header>img {right: 100rem;}
		.left-ttl .main-header>img {left: 100rem;}

		.main-header-ttl {
			bottom: 0;
			height: 150rem;
			font-size: 22rem;
		}
		.main-header-ttl::before {left: calc(50% + 8rem);}
		.main-header-ttl::after {font-size: 13rem;}
		.right-ttl .main-header-ttl {right: 20rem;}
		.left-ttl .main-header-ttl {left: 20rem;}

		.right-ttl .deco-c-1 {
			right: -120rem;
			top: -10rem;
		}
		.left-ttl .deco-c-1 {
			left: -120rem;
			top: -10rem;
			transform: scale(-1, 1);
		}

		.main-header + .main-section {margin-top: 80rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.site-main {
			padding-top: 160rem;
			background-size: max(1600px, 100%) auto;
			font-weight: 500;
			line-height: 2;
		}
		.bg-webp {
			margin-top: -160rem;
			padding-top: 160rem;
			background: center url(../img/common/bg.webp);
		}

		.main-header {
			height: 280rem;
		}
		.main-header>img {
			max-width: none;
			width: 1200rem;
		}
		.right-ttl .main-header>img {
			right: max(calc(50% - 400rem), 240rem);
		}
		.left-ttl .main-header>img {
			left: max(calc(50% - 400rem), 240rem);
		}

		.main-header-ttl {
			bottom: 0;
			height: 210rem;
			font-size: 28rem;
		}
		.main-header-ttl::after {
			font-size: 15rem;
		}
		.right-ttl .main-header-ttl {
			right: max(calc(50% - 490rem), 150rem);
		}
		.left-ttl .main-header-ttl {
			left: max(calc(50% - 515rem), 125rem);
		}

		.right-ttl .deco-c-1 {
			right: max(calc(50% - 790rem), -150rem);
			top: 131rem;
			transform: scale(1, -1);
		}
		.left-ttl .deco-c-1 {
			left: max(calc(50% - 805rem), -165rem);
			top: 131rem;
			transform: scale(-1, -1);
		}

		/* tab */
		@media screen and (max-width: 1024px) {
			.site-main {padding-top: 94rem;}
			.right-ttl .deco-c-1 {
				top: 151rem;
				right: -90rem;
			}
			.left-ttl .deco-c-1 {
				left: -90rem;
				top: 151rem;
			}
		}
	}
}


/* main-section */
@media all {
	.main-section-ttl {
		position: relative;
		display: inline-block;
	}
	.main-section-ttl small {
		font-weight: normal;
		color: var(--gray);
	}
	.main-section-ttl small::before {
		content: '/';
		display: inline-block;
		margin: 0 .5em 0 .75em;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-section {padding: 0 30rem;}
		.main-section-ttl {font-size: 22rem;}
		.main-section-ttl small {font-size: 13rem;}
		.section-content {
			margin-top: 25rem;
			letter-spacing: -.05em;
		}
		.bg-webp + .main-section {margin-top: 60rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-section-ttl {font-size: 24rem;}
		.main-section-ttl small {font-size: 15rem;}
	}
}




/* template-section */
@media all {
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}