/*
 *
 * page-dreamer.scss
 *
 */
:root {
	--z-index-: -1;
}

/* ------------------------------------------------------------
 pg-dreamer
------------------------------------------------------------ */
@media screen and (min-width: 561px) {
	.pg-dreamer {
		margin-bottom: 12.6rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-dreamer {
		margin-bottom: 10rem;
	}
}

/* ------------------------------------------------------------
 pg-dreamer-dream
------------------------------------------------------------ */
.pg-dreamer-dream {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream {
		padding: 30.3rem 0 0;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream {
		padding: 37.2rem 0 0;
	}
}

/* ----------- pg-dreamer-dream__txt ---------- */
.pg-dreamer-dream__txt {
	position: relative;
	z-index: 1;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: calc( 100 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__txt {
		font-size: var(--font-size16);
		--line-height: calc( 38 / 16 );
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__txt {
		font-size: var(--font-size12);
		--line-height: calc( 28.24 / 12 );
	}
}

/* ----------------------------------------
 contents
---------------------------------------- */
/* ---------- pg-dreamer-dream__intro ---------- */
.pg-dreamer-dream__intro {
	display: flex;
	flex-direction: row-reverse;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__intro {
		justify-content: flex-start;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__intro {
		justify-content: center;
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__intro .pg-dreamer-dream__txt {
		margin-top: 5.7rem;
		margin-right: 7.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__intro .pg-dreamer-dream__txt {
		margin-top: 3.5rem;
		margin-right: 4rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__title {
		width: 7.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__title {
		width: 5rem;
	}
}

/* ---------- pg-dreamer-dream__txts ---------- */
.pg-dreamer-dream__txts {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: center;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__txts {
		margin-top: 7.1rem;
		margin-left: 0.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__txts {
		margin-top: 2.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__txts .pg-dreamer-dream__txt:nth-of-type(2) {
		margin-right: 4.6rem;
		margin-left: 2rem;
	}
	.pg-dreamer-dream__txts .pg-dreamer-dream__txt:nth-of-type(3) {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 17.1rem;
		margin-left: 1.4rem;
	}
	body.ua-safari .pg-dreamer-dream__txts .pg-dreamer-dream__txt:nth-of-type(3) {
		height: 18.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__txts .pg-dreamer-dream__txt + .pg-dreamer-dream__txt {
		margin-right: 6.8rem;
	}
}

/* ---------- pg-dreamer-dream__youtube ---------- */
.pg-dreamer-dream__youtube {
	position: relative;
	z-index: 1;
	max-width: 86rem;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__youtube {
		margin-top: 9rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-dreamer-dream__youtube {
		margin-top: 7rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-dreamer-dream__youtube {
		margin-top: 5.2rem;
	}
}

/* ----- pg-dreamer-dream__youtube__figure ----- */
@media screen and (max-width: 560px) {
	.pg-dreamer-dream__youtube__figure {
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: calc( 350 / 375 * 100vw);
	}
}

.pg-dreamer-dream__youtube__figure button {
	display: block;
	position: relative;
	z-index: 0;
	overflow: hidden;
	border-radius: var(--radius-size100-2);
	box-shadow: var(--shadow);
}

.pg-dreamer-dream__youtube__figure button.is-hover:hover .pg-dreamer-dream__youtube__icon i::before {
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
	transform: translate(-50%, -50%) rotate(360deg);
	transition: -webkit-transform var(--transition-hover-slow2);
	transition: transform var(--transition-hover-slow2);
	transition: transform var(--transition-hover-slow2), -webkit-transform var(--transition-hover-slow2);
}

.pg-dreamer-dream__youtube__figure button.is-hover:hover img {
	opacity: .8;
}

.pg-dreamer-dream__youtube__figure img {
	transition: opacity var(--transition-hover-slow);
}

.pg-dreamer-dream__youtube__icon {
	position: absolute;
	top: 53.5%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: var(--color-txt);
}

.pg-dreamer-dream__youtube__icon i {
	position: relative;
	display: block;
	border-radius: 50%;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__youtube__icon i {
		width: 12.2rem;
		height: 12.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-dreamer-dream__youtube__icon i {
		width: 9rem;
		height: 9rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-dreamer-dream__youtube__icon i {
		width: 6.6rem;
		height: 6.6rem;
	}
}

.pg-dreamer-dream__youtube__icon i::before, .pg-dreamer-dream__youtube__icon i::after {
	content: '';
	display: block;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.pg-dreamer-dream__youtube__icon i::before {
	background-image: url("../img/dreamer/dream_youtube_circle.svg");
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
}

.pg-dreamer-dream__youtube__icon i::after {
	background-image: url("../img/dreamer/dream_youtube_play.svg");
	width: calc( ( 30 / 122 ) * 100%);
	height: calc( ( 25 / 122 ) * 100%);
	top: 48%;
	left: calc( ( 65 / 122 ) * 100%);
}

.pg-dreamer-dream__youtube__icon p {
	text-align: center;
	font-family: var(--font-sans-serif);
	padding-top: 0.01px;
	padding-bottom: 0.01px;
	font-weight: 500;
	letter-spacing: calc( 150 / 1000 * 1em);
}

.pg-dreamer-dream__youtube__icon p::before, .pg-dreamer-dream__youtube__icon p::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.pg-dreamer-dream__youtube__icon p::before {
	margin-top: var(--font-en-top);
}

.pg-dreamer-dream__youtube__icon p::after {
	margin-bottom: var(--font-en-bottom);
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__youtube__icon p {
		font-size: var(--font-size12);
		margin-top: 1.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__youtube__icon p {
		font-size: var(--font-size10);
		margin-top: 0.8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-dreamer-dream__youtube__icon p {
		-webkit-transform: scale(0.65);
		transform: scale(0.65);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
	}
}

/* ---------- pg-dreamer-dream__youtube__link ---------- */
.pg-dreamer-dream__youtube__link {
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__youtube__link {
		margin-top: 2.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__youtube__link {
		margin-top: 4.1rem;
	}
}

.pg-dreamer-dream__youtube__link a {
	display: flex;
	align-items: center;
}

.pg-dreamer-dream__youtube__link i {
	margin-right: 0.6rem;
}

.pg-dreamer-dream__youtube__link span {
	display: flex;
	align-items: center;
	font-family: var(--font-sans-serif);
	padding-top: 0.01px;
	padding-bottom: 0.01px;
	font-weight: 500;
	font-size: var(--font-size10);
	letter-spacing: calc( 60 / 1000 * 1em);
}

.pg-dreamer-dream__youtube__link span::before, .pg-dreamer-dream__youtube__link span::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.pg-dreamer-dream__youtube__link span::before {
	margin-top: var(--font-en-top);
}

.pg-dreamer-dream__youtube__link span::after {
	margin-bottom: var(--font-en-bottom);
}

.pg-dreamer-dream__youtube__link span::after {
	content: '';
	display: block;
	background-image: url("../img/common/icon/sns_youtube.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__youtube__link span::after {
		width: 5.2rem;
		height: 2.2rem;
		margin-left: 0.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__youtube__link span::after {
		width: 4.1rem;
		height: 1.7rem;
		margin-left: 0.7rem;
	}
}

/* ---------- pg-dreamer-dream__pagination ---------- */
@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__pagination {
		margin-top: 24.3rem;
		margin-left: 6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__pagination {
		margin-top: 39rem;
		margin-right: auto;
		margin-left: auto;
	}
}

/* ----------------------------------------
 pg-dreamer-dream__illust
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-1 {
		width: 29.6rem;
		top: -0.9rem;
		left: calc( 50% + 19.3rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-1 {
		width: 16.3rem;
		top: 3rem;
		left: calc( 50% - 2.0rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-2 {
		width: 30.8rem;
		top: 20.2rem;
		left: calc( 50% - 18.9rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-2 {
		width: 17.6rem;
		top: 18.7rem;
		left: calc( 50% - 15.4rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-3 {
		width: 27.5rem;
		top: 10.8rem;
		left: calc( 50% - 62.0rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-3 {
		width: 16rem;
		top: 45.5rem;
		left: calc( 50% + 13.0rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-4 {
		width: 28.7rem;
		top: 50.1rem;
		left: calc( 50% - 52.4rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-4 {
		width: 17.8rem;
		margin: 2.2rem auto 0;
	}
	.pg-dreamer-dream__illust-4 img {
		-webkit-transform: translateX(0.7rem);
		transform: translateX(0.7rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-5 {
		width: 34.4rem;
		bottom: 99.1rem;
		left: calc( 50% + 40.0rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-5 {
		width: 21.4rem;
		top: 106.2rem;
		left: calc( 50% - 20.3rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-6 {
		width: 32.4rem;
		bottom: 96.8rem;
		left: calc( 50% - 72.4rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-6 {
		width: 18.5rem;
		top: 107.2rem;
		left: calc( 50% + 4.5rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-7 {
		width: 24.7rem;
		bottom: 29.9rem;
		left: calc( 50% - 59.6rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-7 {
		width: 16rem;
		bottom: 34.2rem;
		left: calc( 50% - 20.7rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-dreamer-dream__illust-8 {
		width: 35.9rem;
		bottom: 18rem;
		left: calc( 50% + 23.6rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-dreamer-dream__illust-8 {
		width: 23rem;
		bottom: 23.2rem;
		left: calc( 50% - 4.0rem);
	}
}