/*
 *
 * page-about.scss
 *
 *
 */
/* ------------------------------------------------------------
 pg-about
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about {
		padding-bottom: 12rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about {
		padding-bottom: 10rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about {
		padding-bottom: 8rem;
	}
}

/* ------------------------------------------------------------
 pg-about-intro
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-intro {
		margin-top: 14rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro {
		margin-top: 9rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro {
		margin-top: 6rem;
	}
}

.pg-about-intro__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__inner {
		padding-top: 10.5rem;
	}
}

/* ---------- pg-about-intro__contents ---------- */
.pg-about-intro__contents {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__contents {
		width: calc( ( 1160 / 3000 ) * 100%);
		margin-left: calc( ( 240 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__contents {
		width: var(--contents-pct);
		margin: 4.6rem auto 0;
	}
}

.pg-about-intro__contents__title {
	font-family: var(--font-mincho);
	letter-spacing: calc( 200 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__contents__title {
		font-size: var(--font-size32);
		--line-height: calc( 150 / 64 );
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__contents__title {
		--line-height: calc( 100 / 48 );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__contents__title {
		font-size: var(--font-size28);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__contents__title {
		font-size: var(--font-size24);
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__contents__txt {
		margin-top: 9.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__contents__txt {
		margin-top: 4.2rem;
	}
}

/* ---------- pg-about-intro__line ---------- */
.pg-about-intro__line {
	width: 0;
	margin: 0 auto;
	border-right: var(--line3);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__line {
		height: 6rem;
		margin-top: 12.4rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__line {
		height: 5rem;
		margin-top: 8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__line {
		height: 4rem;
		margin-top: 4rem;
	}
}

/* ---------- pg-about-intro__catch ---------- */
.pg-about-intro__catch {
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__catch {
		margin-top: 13.8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__catch {
		margin-top: 9rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__catch {
		margin-top: 5rem;
	}
}

.pg-about-intro__catch span {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-variant-east-asian: normal;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
	font-family: var(--font-mincho);
	letter-spacing: calc( 150 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__catch span {
		font-size: var(--font-size36);
		--line-height: calc( 160 / 72 );
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__catch span {
		--line-height: calc( 120 / 50 );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__catch span {
		font-size: var(--font-size30);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__catch span {
		font-size: var(--font-size25);
	}
}

/* ---------- pg-about-intro__logo ---------- */
.pg-about-intro__logo {
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__logo {
		width: 18.2rem;
		margin-top: 4rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__logo {
		width: 15rem;
		margin-top: 3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__logo {
		width: 12rem;
		margin-top: 2rem;
	}
}

/* ---------- pg-about-intro__figures-1 ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-intro__figures-1 {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-1 {
		width: calc( ( 1780 / 3000 ) * 100%);
		height: 50rem;
		position: absolute;
		top: 0;
		right: 0;
	}
}

@media screen and (max-width: 1500px) {
	.pg-about-intro__figure-1 {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-1 {
		width: calc( 100% - var( --contents-outside-pct ));
		max-height: 50rem;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-1::after {
		padding-top: calc( ( 400 / 710 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-2 {
		width: calc( ( 960 / 3000 ) * 100%);
		position: absolute;
		top: 38rem;
		right: calc( ( 120 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-2 {
		max-width: 40.5rem;
		width: calc( ( 540 / 750 ) * 100%);
		margin-top: -4rem;
		margin-left: auto;
		margin-right: var(--contents-outside-pct);
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-2::after {
		padding-top: calc( ( 720 / 960 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-2::after {
		padding-top: calc( ( 360 / 540 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-3 {
		width: calc( ( 750 / 3000 ) * 100%);
		position: absolute;
		bottom: 23.5rem;
		left: calc( ( 120 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-3 {
		margin-left: var(--contents-outside-pct);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__figure-3 {
		width: 30rem;
		margin-top: -16rem;
		margin-left: calc( 50vw - 32.0rem);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__figure-3 {
		width: calc( ( 480 / 750 ) * 100%);
		margin-top: -12rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-3::after {
		padding-top: calc( ( 560 / 750 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__figure-3::after {
		padding-top: calc( ( 320 / 480 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__figure-4 {
		width: calc( ( 450 / 3000 ) * 100%);
		position: absolute;
		bottom: 9.5rem;
		right: calc( ( 400 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__figure-4 {
		width: 20rem;
		margin-top: 8rem;
		margin-left: calc( 50vw + 8.0rem);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__figure-4 {
		width: calc( ( 267 / 750 ) * 100%);
		margin: 4.5rem 0 0 auto;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* ------------------------------------------------------------
 pg-about-movie
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-movie {
		margin-top: 12.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-movie {
		margin-top: 9rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-movie {
		margin-top: 7.5rem;
	}
}

/* ------------------------------------------------------------
 pg-about-outline
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-outline {
		margin-top: 10rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-outline {
		margin-top: 8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-outline {
		margin-top: 6rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-outline__header {
		margin-top: 2.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-outline__header {
		text-align: center;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-outline__table {
		margin-top: 3.5rem;
	}
}

/* ----------------------------------------
 pg-about-outline___map
---------------------------------------- */
.pg-about-outline___map {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-about-outline___map {
		height: 52rem;
		margin-top: 8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-outline___map {
		height: 40rem;
		margin-top: 6rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-outline___map {
		height: 20rem;
		margin-top: 4.4rem;
	}
}