@charset "UTF-8";
/*
 *
 * page-top.scss
 *
 */
:root {
	--z-index-pg-top-visual__video: -1;
	--z-index-pg-top-visual: 0;
	--z-index-pg-top-container: 10;
}

/* ------------------------------------------------------------
 pg-top-visual
------------------------------------------------------------ */
.pg-top-visual {
	position: relative;
	z-index: var(--z-index-pg-top-visual);
	overflow: hidden;
	--base-width-pc: var( --design-width-pc );
	--base-height-pc: 1058;
}

@media screen and (min-width: 769px) {
	.pg-top-visual,
	.pg-top-visual__video {
		height: 100vh;
		min-height: 90rem;
		max-height: 130rem;
	}
}

/* ----------------------------------------
 pg-top-visual__inner
---------------------------------------- */
.pg-top-visual__inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@media screen and (min-width: 769px) {
	.pg-top-visual__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-left: calc( ( 106 / var( --base-width-pc ) ) * 100%);
		padding-bottom: 15.8rem;
	}
}

/* ----------------------------------------
 pg-top-visual__main
---------------------------------------- */
.pg-top-visual__main {
	position: relative;
}

@media screen and (max-width: 768px) and (min-width: 561px) {
	.pg-top-visual__main {
		padding-top: 14rem;
		padding-bottom: 25rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__main {
		padding-top: 9.2rem;
		padding-bottom: 22.2rem;
	}
}

/* ---------- pg-top-visual__logo ---------- */
@media screen and (min-width: 769px) {
	.pg-top-visual__logo {
		position: absolute;
		top: -100px !important;
		right: calc( ( 0 / (var( --base-width-pc ) - 106) ) * 100%);
		text-align: right;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__logo {
		text-align: center;
		margin-bottom: 9rem;
	}
}

.pg-top-visual__logo span {
	display: block;
}

.pg-top-visual__logo svg {
	fill: var(--color-white);
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__logo__en {
		margin-bottom: 2.8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__logo__en {
		margin-bottom: 1.8rem;
	}
}

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

@media screen and (min-width: 1024px) {
	.pg-top-visual__logo__en svg {
		width: 56.5rem;
		height: 5.6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__logo__en svg {
		width: 36.725rem;
		height: 3.64rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__logo__en svg {
		width: 29.3rem;
		height: 2.9rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__logo__ja {
		padding-right: 13.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__logo__ja svg {
		width: 10rem;
		height: 1.8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__logo__ja svg {
		width: 6.5rem;
		height: 1.17rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__logo__ja svg {
		width: 5.6rem;
		height: 1rem;
	}
}

/* ---------- pg-top-visual__catch ---------- */
.pg-top-visual__catch {
	display: flex;
	justify-content: flex-end;
	flex-direction: row-reverse;
	color: var(--color-white);
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__catch {
		margin-left: 0.5rem;
		margin-bottom: 12rem;
	}
}

@media screen and (min-width: 1024px) and (max-height: 970px) {
	.pg-top-visual__catch {
		margin-bottom: 6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 769px) {
	.pg-top-visual__catch {
		margin-bottom: 7rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__catch {
		margin-left: calc( ( 55 / var( --design-width-sp ) ) * 100%);
	}
}

.pg-top-visual__catch span {
	font-weight: 700;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	-webkit-font-feature-settings: 'vpal' 1;
	font-feature-settings: 'vpal' 1;
	letter-spacing: calc( 180 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__catch span {
		font-size: 4.7rem;
		font-size: max( 4.7rem , 38px );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__catch span {
		font-size: 4rem;
		font-size: max( 4rem , 32px );
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__catch span {
		font-size: 3.4rem;
		font-size: max( 3.4rem , 26px );
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-visual__catch span:nth-of-type(2) {
		margin-top: 5.4rem;
		margin-right: 3.8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__catch span:nth-of-type(2) {
		margin-top: 4.6rem;
		margin-right: 3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__catch span:nth-of-type(2) {
		margin-top: 3.9rem;
		margin-right: 2.2rem;
	}
}

/* ---------- pg-top-visual__nav ---------- */
@media screen and (min-width: 769px) {
	.pg-top-visual__nav {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__nav {
		position: absolute;
		top: 25.3rem;
		right: 0;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-visual__nav li {
		width: 4.42rem;
		height: 5.46rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-visual__nav li {
		width: 3.4rem;
		height: 4.2rem;
	}
}

.pg-top-visual__nav li:not(:last-of-type) {
	margin-bottom: 0.2rem;
}

.pg-top-visual__nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 0.3rem 0 0 0.3rem;
	background-color: var(--color-white);
	padding-left: 0.2rem;
}

.pg-top-visual__nav__kabukimono {
	width: 2.1rem;
}

.pg-top-visual__nav__mail {
	width: 1.8rem;
}

/* ---------- pg-top-visual__video ---------- */
.pg-top-visual__video {
	top: 0;
	left: 0;
	z-index: var(--z-index-pg-top-visual__video);
	width: 100%;
}

@media screen and (min-width: 769px) {
	.pg-top-visual__video {
		position: fixed;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__video {
		position: absolute;
		height: 100%;
	}
}

.pg-top-visual__video.is-view::before {
	opacity: 0;
}

.pg-top-visual__video.-youtube::before {
	display: none;
}

.pg-top-visual__video::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background-image: url("../img/top/visual_video_cover.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pg-top-visual__video::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: rgba(var(--color-black0--rgba), 0.1);
	background-image: url("../img/top/visual_video_texture.png");
	background-position: left top;
	background-size: 3px auto;
}

/* ----------------------------------------
 pg-top-visual__about
---------------------------------------- */
.pg-top-visual__about {
	position: relative;
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about {
		background-color: var(--color-orange);
	}
}

.pg-top-visual__about.is-open .pg-top-visual__about__button__illust-1 {
	opacity: 0;
}

.pg-top-visual__about.is-open .pg-top-visual__about__button__illust-2 {
	opacity: 1;
}

/* ----- pg-top-visual__about__button ----- */
@media screen and (min-width: 769px) {
	.pg-top-visual__about__button {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about__button {
		position: absolute;
		width: 5.5rem;
		top: -17rem;
		left: calc( ( (152 + 55 / 2) / var( --design-width-sp ) ) * 100%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about__button p {
		top: -3.3rem;
		right: -3.5rem;
		z-index: -1;
		pointer-events: auto;
	}
}

.pg-top-visual__about__button__illust-1,
.pg-top-visual__about__button__illust-2 {
	transition: var(--transition-toggle);
	transition-property: opacity;
}

.pg-top-visual__about__button__illust-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
}

.pg-top-visual__about__button__illust-2 p > span {
	margin-right: -0.3rem;
}

/* ----- pg-top-visual__about__contents ----- */
.pg-top-visual__about__contents {
	color: var(--color-white);
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about__contents {
		background-color: var(--color-orange);
		text-align: center;
		overflow: visible;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about__contents::before {
		content: '';
		display: block;
		width: 100%;
		height: 12.6rem;
		background-image: url("../img/top/works_triangle-sp-orange.svg");
		background-size: 100% 100%;
		background-position: 50% 0;
		position: absolute;
		left: 0;
		bottom: 100%;
		z-index: 0;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-visual__about__contents p {
		-webkit-transform: translateY(-3.8rem) !important;
		transform: translateY(-3.8rem) !important;
		transition: none !important;
		padding: 0 0 17.7rem;
	}
}

/* ------------------------------------------------------------
 pg-top-container
------------------------------------------------------------ */
.pg-top-container {
	position: relative;
	z-index: var(--z-index-pg-top-container);
	background-color: var(--color-white);
}

/* ------------------------------------------------------------
 pg-top-works

 スライダーは、PCでは左から右、SPでは右から左と方向が変わります。
 slickのターゲットに「dir="rtl"」を付与し、オプションも指定すると左から右にできますが、
 前述の通りSPでは反対になるので、JavaScriptで「dir="rtl"」を削除したり付与したりしています。

 「dir="rtl"」を付与すると子孫要素全て左から右の表示になってしまうので、
 「dir="ltr"」をcardひとつひとつに設定し中身自体は右から左表示にする。
------------------------------------------------------------ */
.pg-top-works {
	position: relative;
}

@media screen and (max-width: 1023px) {
	.pg-top-works::before {
		content: '';
		display: block;
		width: 100%;
		height: 12.6rem;
		background-image: url("../img/top/works_triangle-sp.svg");
		background-size: 100% 100%;
		background-position: 50% 0;
		position: absolute;
		left: 0;
		bottom: 100%;
	}
}

/* ----------------------------------------
 pg-top-works__top
---------------------------------------- */
.pg-top-works__top {
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__top {
		min-width: 62.6rem;
		width: calc( ( 626/var(--design-width-pc) ) * 100%);
		position: absolute;
		right: 0;
		bottom: 100%;
		background-image: url("../img/top/works_triangle-pc.svg");
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__top {
		-webkit-transform: translateY(-40px);
		transform: translateY(-40px);
		margin-bottom: -4rem;
		padding-bottom: 6rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-works__top {
		-webkit-transform: translateY(-85px);
		transform: translateY(-85px);
		margin-bottom: -8.5rem;
		padding-bottom: 3.9rem;
	}
}

.pg-top-works__top__inner {
	max-width: 62.6rem;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__top__inner {
		display: flex;
		align-items: flex-end;
		padding: 0 0 3.2rem 10.2rem;
	}
}

/* ---------- pg-top-works__header ---------- */
.pg-top-works__header__title {
	text-transform: uppercase;
	font-family: var(--font-Cantarell);
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__header__title {
		text-align: right;
		font-size: 2.2rem;
		font-size: max( 2.2rem , 17px );
		--line-height: calc( 29.59 / 22 );
	}
}

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

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-works__header__title {
		font-size: 2rem;
		font-size: max( 2rem , 16px );
	}
}

@media screen and (max-width: 560px) {
	.pg-top-works__header__title {
		font-size: 1.4rem;
		font-size: max( 1.4rem , 12px );
	}
}

/* ---------- pg-top-works__main-slider ---------- */
.pg-top-works__main-slider {
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider {
		padding-top: 5.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider {
		max-width: 37.5rem;
		width: 100%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-works__main-slider {
		padding-top: 2rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-works__main-slider {
		padding-top: 1.2rem;
	}
}

.pg-top-works__main-slider__cell {
	margin: 0 4.5rem;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider__cell {
		width: 35.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider__cell {
		max-width: calc( 37.5rem - 9.0rem);
		width: calc( 100vw - 9.0rem);
	}
}

/* ----- pg-top-works__main-slider__arrow ----- */
.pg-top-works__main-slider__arrow {
	position: absolute;
	z-index: 100;
	padding: 1rem;
	margin: -1rem;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider__arrow {
		top: 43.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider__arrow {
		top: 14.7rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider__arrow.-prev {
		right: 9.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider__arrow.-prev {
		left: 1.1rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider__arrow.-next {
		right: 6.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider__arrow.-next {
		right: 1.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__main-slider__arrow i:nth-of-type(1) {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-works__main-slider__arrow i:nth-of-type(2) {
		display: none;
	}
}

/* ----------------------------------------
 pg-top-works__bottom
---------------------------------------- */
.pg-top-works__bottom {
	width: 100%;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__bottom {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding-bottom: 8.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__bottom {
		padding-bottom: 16rem;
	}
}

/* ---------- pg-top-works__sub-slider ---------- */
.pg-top-works__sub-slider {
	overflow: hidden;
	padding-bottom: 1px;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__sub-slider {
		width: calc( ( 950/var(--design-width-pc) ) * 100%);
		padding-top: 6.8rem;
		padding-right: calc( ( 20/var(--design-width-pc) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__sub-slider {
		padding-top: 0.7rem;
		padding-bottom: 5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-works__sub-slider {
		padding-left: 3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-works__sub-slider {
		padding-left: 1.7rem;
	}
}

/* mainとsubを連動させるため、transformで移動させる */
@media screen and (min-width: 1024px) {
	.pg-top-works__sub-slider__cell {
		width: 28.2rem;
		margin: 0 2.2rem;
		-webkit-transform: translateX(100%) translateX(4.4rem);
		transform: translateX(100%) translateX(4.4rem);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-works__sub-slider__cell {
		width: 23rem;
		margin: 0 1.8rem;
		-webkit-transform: translateX(-100%) translateX(-3.6rem);
		transform: translateX(-100%) translateX(-3.6rem);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-works__sub-slider__cell {
		width: 19.2rem;
		margin: 0 1.4rem;
		-webkit-transform: translateX(-100%) translateX(-2.8rem);
		transform: translateX(-100%) translateX(-2.8rem);
	}
}

/* ---------- pg-top-works__button ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-works__button {
		width: calc( ( 450/var(--design-width-pc) ) * 100%);
		padding-left: calc( ( 140/var(--design-width-pc) ) * 100%);
		margin-bottom: 2.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__button {
		padding-left: 1.1rem;
	}
}

/* ----------------------------------------
 pg-top-works__illust
---------------------------------------- */
.pg-top-works__illust {
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.pg-top-works__illust {
		width: 67.2rem;
		bottom: -24.3rem;
		left: calc( ( (682 + 672 / 2) / var( --design-width-pc ) ) * 100%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__illust {
		width: 33rem;
		bottom: -13.8rem;
		right: -1.2rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-works__illust p {
		top: -3.6rem;
		right: 28.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-works__illust p {
		top: -1.6rem;
		left: 6rem;
	}
}

/* ------------------------------------------------------------
 pg-top-kabukimono
------------------------------------------------------------ */
.pg-top-kabukimono {
	position: relative;
	background-color: var(--color-orange);
}

.pg-top-kabukimono__inner {
	position: relative;
}

@media screen and (min-width: 769px) {
	.pg-top-kabukimono__inner {
		display: flex;
		justify-content: space-between;
		padding: 10rem 0 23.5rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__inner {
		padding: 10rem 0 8.4rem;
	}
}

/* ---------- pg-top-kabukimono__titles ---------- */
@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__titles {
		padding-bottom: 5.4rem;
	}
}

/* ----- pg-top-kabukimono__header ----- */
.pg-top-kabukimono__header {
	color: var(--color-white);
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__header {
		padding-bottom: 5.8rem;
	}
}

.pg-top-kabukimono__header__en {
	text-transform: uppercase;
	font-family: var(--font-Cantarell);
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	--line-height: calc( 31 / 17 );
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__header__en {
		font-size: 2rem;
		font-size: max( 2rem , 14px );
		padding-bottom: 10rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-kabukimono__header__en {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 15px );
		padding-bottom: 8.5rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__header__en {
		margin-left: calc( ( 152 / 305 ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-kabukimono__header__en {
		font-size: 1.7rem;
		font-size: max( 1.7rem , 14px );
		padding-bottom: 7.5rem;
	}
}

.pg-top-kabukimono__header__ja {
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	letter-spacing: calc( 40 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__header__ja {
		font-size: 3.9rem;
		font-size: max( 3.9rem , 28px );
		--line-height: calc( 95 / 39 );
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__header__ja {
		--line-height: calc( 54 / 25 );
		margin-left: calc( ( 9 / 305 ) * 100%);
	}
}

@media screen and (max-width: 1023px) and (min-width: 769px) {
	.pg-top-kabukimono__header__ja {
		font-size: 2.5rem;
		font-size: max( 2.5rem , 18px );
	}
}

@media screen and (max-width: 768px) and (min-width: 561px) {
	.pg-top-kabukimono__header__ja {
		font-size: 3.2rem;
		font-size: max( 3.2rem , 22px );
	}
}

@media screen and (max-width: 560px) {
	.pg-top-kabukimono__header__ja {
		font-size: 2.5rem;
		font-size: max( 2.5rem , 18px );
	}
}

/* ---------- pg-top-kabukimono__contents ---------- */
@media screen and (min-width: 769px) {
	.pg-top-kabukimono__contents {
		width: calc( ( 556 / 1020 ) * 100%);
		padding-top: 20rem;
	}
}

/* ----- pg-top-kabukimono__txt ----- */
.pg-top-kabukimono__txt {
	color: var(--color-white);
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__txt {
		padding-bottom: 8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__txt {
		padding-bottom: 6.4rem;
	}
}

.pg-top-kabukimono__button {
	color: var(--color-white);
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__button {
		margin-bottom: 5.5rem;
	}
}

/* ---------- pg-top-kabukimono__illust ---------- */
/* ----- pg-top-kabukimono__illust-1 ----- */
.pg-top-kabukimono__illust-1 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
	.pg-top-kabukimono__illust-1 {
		top: 35.5rem;
		left: calc( ( (360 + 99 / 2) / 1020 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-1 {
		width: 9.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-1 {
		width: 6.5rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__illust-1 {
		top: 29.7rem;
		left: calc( ( (18 + 65 / 2) / 305 ) * 100%);
	}
}

/* ----- pg-top-kabukimono__illust-2 ----- */
.pg-top-kabukimono__illust-2 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
	.pg-top-kabukimono__illust-2 {
		top: 51.7rem;
		left: calc( ( (531 + 233 / 2) / 1020 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-2 {
		width: 23.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-2 {
		width: 12.1rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__illust-2 {
		top: 54.5rem;
		left: calc( ( (177 + 121 / 2) / 305 ) * 100%);
	}
}

/* ----- pg-top-kabukimono__illust-3 ----- */
.pg-top-kabukimono__illust-3 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
	.pg-top-kabukimono__illust-3 {
		top: 34.1rem;
		left: calc( ( (734 + 288 / 2) / 1020 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-3 {
		width: 28.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-3 {
		width: 18.9rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__illust-3 {
		position: relative;
		margin-left: calc( ( (34 + 189 / 2) / 305 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-3 p {
		top: 0.2rem;
		right: -9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-3 p {
		top: 0.4rem;
		right: -5.8rem;
	}
}

/* ----- pg-top-kabukimono__illust-4 ----- */
.pg-top-kabukimono__illust-4 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
	.pg-top-kabukimono__illust-4 {
		bottom: 29rem;
		left: calc( ( (-29 + 299 / 2) / 1020 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-4 {
		width: 29.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-4 {
		width: 19.6rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-kabukimono__illust-4 {
		margin-left: calc( ( (27 + 196 / 2) / 305 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-kabukimono__illust-4 p {
		top: 20.9rem;
		right: -10.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-kabukimono__illust-4 p {
		top: 13.7rem;
		right: -6.7rem;
	}
}

/* ------------------------------------------------------------
 pg-top-kabukimono
------------------------------------------------------------ */
.pg-top-honmono {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono {
		padding: 22rem 0 16rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-honmono {
		padding: 18rem 0 15rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-honmono {
		padding: 14rem 0 14.2rem;
	}
}

/* ---------- pg-top-honmono__flex ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-honmono__flex {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-honmono__flex {
		margin-bottom: 0rem;
	}
}

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

/* ----- pg-top-honmono__header ----- */
.pg-top-honmono__header {
	color: var(--color-white);
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono__header {
		width: calc( ( 396 / 1020 ) * 100%);
		display: flex;
		justify-content: flex-end;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-honmono__header {
		margin-bottom: 6.6rem;
	}
}

/* ----- pg-top-honmono__contents ----- */
.pg-top-honmono__contents {
	color: var(--color-white);
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono__contents {
		width: calc( ( 465 / 1020 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono__contents__txt {
		padding-bottom: 6.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-honmono__contents__txt {
		padding-bottom: 5.8rem;
	}
}

/* ---------- pg-top-honmono__logo ---------- */
.pg-top-honmono__logo {
	fill: var(--color-white);
	text-align: center;
}

.pg-top-honmono__logo__symbol {
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono__logo__symbol {
		width: 9.8rem;
		margin-bottom: 3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-honmono__logo__symbol {
		width: 6.2rem;
		margin-bottom: 1.9rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-honmono__logo__en svg {
		width: 20.7rem;
		height: 2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-honmono__logo__en svg {
		width: 13rem;
		height: 1.3rem;
	}
}

/* ------------------------------------------------------------
 pg-top-tsuwamono
------------------------------------------------------------ */
.pg-top-tsuwamono {
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.pg-top-tsuwamono {
		padding: 22.4rem 0 23rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-tsuwamono {
		padding: 18rem 0 19rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-tsuwamono {
		padding: 13.7rem 0 16rem;
	}
}

.pg-top-tsuwamono__inner {
	position: relative;
}
.sdgs-color1 {background-color: #f15569}
.sdgs-color2 {background-color: #d9b740}
.sdgs-color3 {background-color: #5cb472}
.sdgs-color4 {background-color: #df5e71}
.sdgs-color5 {background-color: #ec7866}
.sdgs-color6 {background-color: #57c5e6}
.sdgs-color7 {background-color: #f5d05d}
.sdgs-color8 {background-color: #bb4e6c}
.sdgs-color9 {background-color: #f09854}
.sdgs-color10 {background-color: #e75ea8}
.sdgs-color11 {background-color: #f2ba55}
.sdgs-color12 {background-color: #e2b148}
.sdgs-color13 {background-color: #80a679}
.sdgs-color14 {background-color: #4a9ccd}
.sdgs-color15 {background-color: #63c46f}
.sdgs-color16 {background-color: #3a77a7}
.sdgs-color17 {background-color: #345c8c}
.sdgs-color18 {background-color: #8e74b5}

/* ---------- pg-top-tsuwamono__header ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-tsuwamono__body {
		width: calc( ( 386 / 1160 ) * 100%);
	}
}

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

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

/* ----- pg-top-tsuwamono__illust ----- */
.pg-top-tsuwamono__illust {
	--base-width-pc: 771;
	--base-height-pc: 610;
	--base-width-sp: 406;
	--base-height-sp: 321;
}

@media screen and (min-width: 1024px) {
	.pg-top-tsuwamono__illust {
		position: absolute;
		width: 60%;
		top: calc( ( (-62 + var( --base-height-pc ) / 2) / 504 ) * 100%);
		left: calc( ( 452 / 1160 ) * 100%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

@media screen and (min-width: 1281px) {
	.pg-top-tsuwamono__illust {
		width: calc( ( var( --base-width-pc ) / 1160 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-tsuwamono__illust {
		position: relative;
		margin-bottom: 6.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-tsuwamono__illust {
		max-width: 56.84rem;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-tsuwamono__illust {
		width: calc( 406 / var(--design-width-sp) * 100vw);
		left: 51%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.pg-top-tsuwamono__illust__kyusyu {
	width: calc( ( 298 / var( --base-width-pc ) ) * 100%);
	top: calc( ( 131 / var( --base-height-pc ) ) * 100%);
	left: calc( ( 235 / var( --base-width-pc ) ) * 100%);
	z-index: -1;
}

@media screen and (min-width: 1024px) {
	.pg-top-tsuwamono__illust__logo {
		width: calc( ( 375 / var( --base-width-pc ) ) * 100%);
		top: calc( ( 275 / var( --base-height-pc ) ) * 100%);
		left: calc( ( 190 / var( --base-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-tsuwamono__illust__logo {
		width: calc( ( 198 / var( --base-width-sp ) ) * 100%);
		top: calc( ( 145 / var( --base-height-sp ) ) * 100%);
		left: calc( ( 101 / var( --base-width-sp ) ) * 100%);
	}
}

/* ----- pg-top-tsuwamono__txt ----- */
@media screen and (min-width: 1024px) {
	.pg-top-tsuwamono__txt {
		margin-bottom: 3.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-tsuwamono__txt {
		margin-bottom: 5.3rem;
	}
}

/* ------------------------------------------------------------
 pg-top-bakamono
------------------------------------------------------------ */
.pg-top-bakamono {
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono {
		padding: 17.7rem 0 18rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-bakamono {
		padding: 16rem 0 21rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono {
		padding: 14.4rem 0 22.7rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__flex {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
	}
}

/* ---------- pg-top-bakamono__intro ---------- */
.pg-top-bakamono__intro {
	display: flex;
	flex-direction: row-reverse;
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__intro {
		margin-right: calc( ( 4 / 1194 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-bakamono__intro {
		justify-content: center;
		padding-right: 1.2rem;
		margin-bottom: 6rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__header {
		margin-left: 5.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-bakamono__header {
		margin-left: 4rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__header {
		margin-left: 3rem;
	}
}

.pg-top-bakamono__intro__txt {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__intro__txt {
		height: 54.4rem;
		height: auto;
		max-height: 54.4rem;
		margin-top: 0.5rem;
	}
	body.ua-ie .pg-top-bakamono__intro__txt {
		min-width: 16.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-bakamono__intro__txt {
		height: 41.8rem;
	}
}

/* ---------- pg-top-bakamono__contents ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-bakamono__contents {
		flex: 1;
		margin-right: calc( ( 0 / 1194 ) * 100%);
	}
}

/* ----- pg-top-bakamono__contents__intro ----- */
@media screen and (min-width: 561px) {
	.pg-top-bakamono__contents__intro {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 4.8rem;
	}
}

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

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-bakamono__contents__intro {
		max-width: 60rem;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
}

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

@media screen and (min-width: 561px) {
	.pg-top-bakamono__contents__logo {
		width: calc( ( 300 / 791 ) * 100%);
		margin-right: calc( ( 0 / 791 ) * 100%);
		padding-bottom: 0.8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__contents__logo {
		max-width: 34.2rem;
		width: 100%;
		margin: 0 auto 1.7rem;
	}
}

@media screen and (min-width: 561px) {
	.pg-top-bakamono__contents__logo picture {
		margin-top: calc( ( -22 / 333 ) * 100%);
		margin-bottom: calc( ( -13 / 333 ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__contents__logo picture {
		margin-top: calc( ( -17 / 342 ) * 100%);
		margin-bottom: calc( ( -4 / 342 ) * 100%);
	}
}

.pg-top-bakamono__contents__specialty {
	position: relative;
}

@media screen and (min-width: 561px) {
	.pg-top-bakamono__contents__specialty {
		width: calc( ( 309 / 791 ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__contents__specialty {
		width: 30.6rem;
		margin: 0 auto;
		padding-right: 8.6rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__contents__specialty picture {
		padding-right: calc( ( 85 / 305 ) * 100%);
	}
}

@media screen and (min-width: 561px) {
	.pg-top-bakamono__contents__specialty p {
		top: -13.6rem;
		left: calc( ( (108 + 98 / 2) / 309 ) * 100%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__contents__specialty p {
		top: -2.5rem;
		right: -1.1rem;
	}
}

/* ----- pg-top-bakamono__contents__list ----- */
@media screen and (min-width: 1024px) {
	.pg-top-bakamono__contents__list {
		margin-bottom: 7rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-bakamono__contents__list {
		margin-bottom: 5rem;
	}
}

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

/* ----- pg-top-bakamono__card ----- */
.pg-top-bakamono__card a {
	position: relative;
	display: block;
}

.pg-top-bakamono__card__new {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__card__new {
		width: 3.2rem;
		top: -1.2rem;
		left: -0.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-bakamono__card__new {
		width: 2rem;
		top: -0.8rem;
		left: -0.5rem;
	}
}

.pg-top-bakamono__card__figure {
	position: relative;
	z-index: 0;
}

.pg-top-bakamono__card__figure::after {
	content: '';
	display: block;
	padding-top: calc( ( 300 / 300 ) * 100%);
}

.pg-top-bakamono__card__time {
	font-family: var(--font-Cantarell);
	font-weight: 700;
	font-size: 1rem;
}

@media screen and (min-width: 561px) {
	.pg-top-bakamono__card__time {
		padding: 0.6rem 0.5rem 0;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-bakamono__card__time {
		padding-top: 0.5rem;
	}
}

/* ---------- pg-top-bakamono__illust ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-bakamono__illust {
		width: 22.1rem;
		bottom: -11.9rem;
		right: calc( ( 137 / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-bakamono__illust {
		width: 14.8rem;
		bottom: -5.7rem;
		left: calc( ( (123 + 148 / 2) / var( --design-width-sp ) ) * 100%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-bakamono__illust p {
		top: -7rem;
		left: -0.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-bakamono__illust p {
		top: -2.3rem;
		left: -2.1rem;
	}
}

/* ------------------------------------------------------------
 pg-top-wakamono
------------------------------------------------------------ */
.pg-top-wakamono {
	position: relative;
	background-color: var(--color-gray3);
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono {
		padding: 18.3rem 0 27.3rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono {
		padding: 16rem 0 20rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono {
		padding: 14.2rem 0 15.7rem;
	}
}

/* ----------------------------------------
 pg-top-wakamono__inner
---------------------------------------- */
.pg-top-wakamono__inner {
	position: relative;
}

/* ---------- pg-top-wakamono__body ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-wakamono__body {
		width: calc( ( 432 / 980 ) * 100%);
	}
}

/* ----- pg-top-wakamono__header ----- */
@media screen and (min-width: 1024px) {
	.pg-top-wakamono__header {
		margin-bottom: 6.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__header {
		margin-bottom: 7rem;
	}
}

/* ----- pg-top-wakamono__illust ----- */
@media screen and (min-width: 1024px) {
	.pg-top-wakamono__illust {
		position: absolute;
		width: calc( ( 368 / 980 ) * 100%);
		top: calc( ( (51 + 412 / 2) / 518 ) * 100%);
		left: calc( ( 585 / 980 ) * 100%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		padding-top: 1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__illust {
		margin-bottom: 6.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__illust__logo {
		width: calc( ( 338 / 368 ) * 100%);
		margin: 0 -0.4rem 11.6rem auto;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__illust__logo {
		width: 29.1rem;
		margin: 0 auto 6.0rem;
		-webkit-transform: translateX(0.5rem);
		transform: translateX(0.5rem);
	}
}

.pg-top-wakamono__illust__whitebase {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__illust__whitebase {
		width: calc( ( 354 / 368 ) * 100%);
		margin-left: 0.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__illust__whitebase {
		margin: 0 auto;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono__illust__whitebase {
		max-width: 32.48rem;
		-webkit-transform: translateX(-1rem);
		transform: translateX(-1rem);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__illust__whitebase {
		width: 23.2rem;
		-webkit-transform: translateX(-1rem);
		transform: translateX(-1rem);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__illust__whitebase p:nth-of-type(1) {
		top: -1.8rem;
		left: -7.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__illust__whitebase p:nth-of-type(1) {
		top: -1.2rem;
		left: -4.9rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__illust__whitebase p:nth-of-type(2) {
		top: 7.1rem;
		right: -11.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__illust__whitebase p:nth-of-type(2) {
		top: 4.6rem;
		right: -7.4rem;
	}
}

/* ----- pg-top-wakamono__txt ----- */
@media screen and (min-width: 1024px) {
	.pg-top-wakamono__txt {
		padding-bottom: 5.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__txt {
		padding-bottom: 4.3rem;
	}
}

/* ----------------------------------------
 pg-top-wakamono__list
---------------------------------------- */
.pg-top-wakamono__list {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__list {
		margin-top: -20rem;
		margin-bottom: 15rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono__list {
		margin-top: -20rem;
		margin-bottom: 15rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__list {
		margin-top: -20rem;
		margin-bottom: 15rem;
	}
}

.pg-top-wakamono__list__bg {
	height: 100%;
	background-color: var(--color-white);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.pg-top-wakamono__list__inner {
	position: relative;
	z-index: 1;
	max-width: 107.2rem;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__list__inner {
		padding: 8.2rem 0 10.8rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono__list__inner {
		padding: 7rem 0 8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__list__inner {
		padding: 5.3rem 0 6.3rem;
	}
}

/* ---------- pg-top-wakamono__list__title ---------- */
.pg-top-wakamono__list__title {
	text-align: center;
	font-weight: 700;
	font-size: 1.7rem;
	font-size: max( 1.7rem , 15px );
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__list__title {
		letter-spacing: calc( 180 / 1000 * 1em);
		margin-bottom: 2.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__list__title {
		letter-spacing: calc( 60 / 1000 * 1em);
		margin-bottom: 2rem;
	}
}

/* ---------- pg-top-wakamono__cards ---------- */
.pg-top-wakamono__cards {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__cards {
		padding: 0 5.3rem;
	}
}

.pg-top-wakamono__cards .slick-slider {
	position: static;
}

.pg-top-wakamono__cards .slick-list {
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__cards .slick-list {
		padding-top: 0.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__cards .slick-list {
		padding-top: 0.7rem !important;
	}
}

@media screen and (min-width: 561px) {
	.pg-top-wakamono__card {
		margin: 0 1.3rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono__card {
		width: 24rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__card {
		width: 20rem;
		margin: 0 1.1rem;
	}
}

.pg-top-wakamono__cards__arrow {
	width: 2.4rem;
	height: 3.9rem;
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__cards__arrow {
		top: 18rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__cards__arrow {
		display: none !important;
	}
}

.pg-top-wakamono__cards__arrow.-prev {
	left: 0;
}

.pg-top-wakamono__cards__arrow.-next {
	right: 0;
}

/* ---------- pg-top-wakamono__card ---------- */
.pg-top-wakamono__card a {
	display: block;
	position: relative;
}

.pg-top-wakamono__card__new {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.pg-top-wakamono__card__new {
		width: 3.2rem;
		top: -0.9rem;
		left: -1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__card__new {
		width: 2rem;
		top: -0.7rem;
		left: -0.4rem;
	}
}

.pg-top-wakamono__card__figure {
	position: relative;
	z-index: 0;
}

@media screen and (min-width: 561px) {
	.pg-top-wakamono__card__figure {
		margin-bottom: 1.6rem;
	}
}

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

.pg-top-wakamono__card__figure::after {
	content: '';
	display: block;
	padding-top: calc( ( 200 / 154 ) * 100%);
}

.pg-top-wakamono__card__title {
	text-align: center;
	font-family: var(--font-Cantarell_Noto-Sans);
	font-weight: 700;
}

@media screen and (min-width: 561px) {
	.pg-top-wakamono__card__title {
		font-size: 1.4rem;
		font-size: max( 1.4rem , 12px );
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__card__title {
		font-size: 1.3rem;
		font-size: max( 1.3rem , 11px );
	}
}

/* ---------- pg-top-wakamono__list__symbol ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-wakamono__list__symbol {
		max-width: 102.8rem;
		width: calc( ( 1028 / 1072 ) * 100%);
		bottom: -9.8rem;
		left: -14.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-wakamono__list__symbol {
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-wakamono__list__symbol {
		bottom: -3.51rem;
		width: 31.46rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-wakamono__list__symbol {
		bottom: -2.7rem;
		width: 24.2rem;
	}
}

.pg-top-wakamono__list__symbol img {
	width: 100%;
}

/* ------------------------------------------------------------
 pg-top-yomimono
------------------------------------------------------------ */
.pg-top-yomimono {
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono {
		margin-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono {
		padding-top: 3rem;
		padding-bottom: 0rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono {
		padding-top: 3rem;
		padding-bottom: 0rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__inner {
		position: relative;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__flex {
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__flex {
		padding-top: 0.1px;
	}
}

/* ---------- pg-top-yomimono__header ---------- */
.pg-top-yomimono__header {
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__header {
		position: relative;
		width: calc( ( 0 / 1270 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__header {
		position: absolute;
		top: -1rem;
		left: 0;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__header {
		width: calc( 33.33333% - 2.5rem);
	}
	body.ua-ie .pg-top-yomimono__header,
	body.ua-edge .pg-top-yomimono__header {
		width: calc( ( 33.33333% - 2.5rem ) - 0.1px);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__header {
		width: calc( 50% - 1.7rem);
	}
	body.ua-ie .pg-top-yomimono__header,
	body.ua-edge .pg-top-yomimono__header {
		width: calc( ( 50% - 1.7rem ) - 0.1px);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__header::after {
		content: '';
		display: block;
		width: 100vw;
		height: 100%;
		background-color: var(--color-white);
		position: absolute;
		top: 0;
		right: 0rem;
		z-index: -1;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__header__illust {
		width: 24rem;
		top: 30.8rem;
		left: 0.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__header__illust {
		width: 13.5rem;
		bottom: -16.8rem;
		left: calc( ( (3 + 135 / 2) / 159 ) * 100%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__header__illust {
		left: calc( ( (10 + 135 / 2) / 159 ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__header__illust {
		left: calc( ( (3 + 135 / 2) / 159 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__header__illust p {
		top: -9rem;
		right: -9.4rem;
		padding-left: 0.4rem;
		padding-bottom: 0.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__header__illust p {
		top: -6.3rem;
		right: -5.6rem;
	}
}

/* ---------- pg-top-yomimono__list ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list {
		width: calc( ( 1250 / 1270 ) * 100%);
		padding-top: 5.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__list {
		display: flex;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list {
		margin-top: -6.5rem;
		margin-left: -2.5rem;
		margin-bottom: 7rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list {
		margin-top: -5.2rem;
		margin-left: -1.7rem;
		margin-bottom: 5.7rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list::before {
		width: calc( 33.33333% - 2.5rem);
		margin-top: 6.5rem;
		margin-left: 2.5rem;
	}
	body.ua-ie .pg-top-yomimono__list::before,
	body.ua-edge .pg-top-yomimono__list::before {
		width: calc( ( 33.33333% - 2.5rem ) - 0.1px);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list::before {
		width: calc( 50% - 1.7rem);
		margin-top: 5.2rem;
		margin-left: 1.7rem;
	}
	body.ua-ie .pg-top-yomimono__list::before,
	body.ua-edge .pg-top-yomimono__list::before {
		width: calc( ( 50% - 1.7rem ) - 0.1px);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list__cell {
		width: 27.5rem;
		margin-right: 3.9rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list__cell {
		width: calc( 33.33333% - 2.5rem);
		margin-top: 6.5rem;
		margin-left: 2.5rem;
	}
	body.ua-ie .pg-top-yomimono__list__cell,
	body.ua-edge .pg-top-yomimono__list__cell {
		width: calc( ( 33.33333% - 2.5rem ) - 0.1px);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list__cell {
		width: calc( 50% - 1.7rem);
		margin-top: 5.2rem;
		margin-left: 1.7rem;
	}
	body.ua-ie .pg-top-yomimono__list__cell,
	body.ua-edge .pg-top-yomimono__list__cell {
		width: calc( ( 50% - 1.7rem ) - 0.1px);
	}
}

/* ----- pg-top-yomimono__list__arrow ----- */
.pg-top-yomimono__list__arrow {
	position: absolute;
	top: 42rem;
	right: 3.9rem;
	z-index: 10;
}

.pg-top-yomimono__list__arrow-bg {
	position: absolute;
	top: 23.8rem;
	right: 0;
	background-image: url("../img/top/yomimono_gradation.png");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .9;
	z-index: 1;
	mix-blend-mode: color-burn;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list__arrow-bg {
		width: 18.4rem;
		height: 39.7rem;
	}
}

/* ---------- pg-top-yomimono__list2 ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list2 {
		width: calc( ( 1250 / 1270 ) * 100%);
		padding-top: 5.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-yomimono__list2 {
		display: flex;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list2 {
		margin-top: -6.5rem;
		margin-left: -2.5rem;
		margin-bottom: 7rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list2 {
		margin-top: -5.2rem;
		margin-left: -1.7rem;
		margin-bottom: 5.7rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list2::before {
		width: calc( 33.33333% - 2.5rem);
		margin-top: 6.5rem;
		margin-left: 2.5rem;
	}
	body.ua-ie .pg-top-yomimono__list2::before,
	body.ua-edge .pg-top-yomimono__list2::before {
		width: calc( ( 33.33333% - 2.5rem ) - 0.1px);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list2::before {
		width: calc( 50% - 1.7rem);
		margin-top: 5.2rem;
		margin-left: 1.7rem;
	}
	body.ua-ie .pg-top-yomimono__list2::before,
	body.ua-edge .pg-top-yomimono__list2::before {
		width: calc( ( 50% - 1.7rem ) - 0.1px);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list2__cell {
		width: 27.5rem;
		margin-right: 3.9rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-yomimono__list2__cell {
		width: calc( 33.33333% - 2.5rem);
		margin-top: 6.5rem;
		margin-left: 2.5rem;
	}
	body.ua-ie .pg-top-yomimono__list2__cell,
	body.ua-edge .pg-top-yomimono__list2__cell {
		width: calc( ( 33.33333% - 2.5rem ) - 0.1px);
	}
}

@media screen and (max-width: 560px) {
	.pg-top-yomimono__list2__cell {
		width: calc( 50% - 1.7rem);
		margin-top: 5.2rem;
		margin-left: 1.7rem;
	}
	body.ua-ie .pg-top-yomimono__list2__cell,
	body.ua-edge .pg-top-yomimono__list2__cell {
		width: calc( ( 50% - 1.7rem ) - 0.1px);
	}
}

/* ----- pg-top-yomimono__list2__arrow ----- */
.pg-top-yomimono__list2__arrow {
	position: absolute;
	top: 42rem;
	right: 3.9rem;
	z-index: 10;
}

.pg-top-yomimono__list2__arrow-bg {
	position: absolute;
	top: 23.8rem;
	right: 0;
	background-image: url("../img/top/yomimono_gradation.png");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .9;
	z-index: 1;
	mix-blend-mode: color-burn;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__list2__arrow-bg {
		width: 18.4rem;
		height: 39.7rem;
	}
}


/* ---------- pg-top-yomimono__button ---------- */
.pg-top-yomimono__button {
	width: 100%;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__button {
		position: absolute;
		top: 0.2rem;
		left: 0;
		z-index: 10;
	}
}

.pg-top-yomimono__button__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-yomimono__button__inner {
		text-align: right;
	}
}

/* ---------- 追加2021.12.28　マウスオーバー ---------- */
.sample3 .caption {
	font-size:200%;
	color:#fff;
	position: absolute;
    bottom: 20px;
	padding-left:0px;
	padding-right:10px;
	line-height:20px;
}
@media screen and (max-width: 1023px) {
.sample3 .caption {
		display: none;
	}
}
.sample3 .mask {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:rgba(0,0,0,0.8);
	-webkit-transition:all 0.6s ease;
	transition:all 0.6s ease;
}
.sample3:hover .mask {
	opacity:1;	/* マスクを表示する */
	padding-left:20px;	/* 右にずらす */
}

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* ------------------------------------------------------------
 pg-top-award
------------------------------------------------------------ */
.pg-top-award {
	background-color: var(--color-beige);
}

@media screen and (min-width: 769px) {
	.pg-top-award__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-award__inner {
		padding: 7.9rem 0 0;
	}
}

/* ---------- pg-top-award__contents ---------- */
@media screen and (min-width: 769px) {
	.pg-top-award__contents {
		width: calc( ( 520 / 1130 ) * 100%);
		padding-bottom: 4.2rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-award__contents {
		text-align: center;
		margin-bottom: 6rem;
	}
}

.pg-top-award__contents__icon {
	background-image: url("../img/common/icon/award.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 561px) {
	.pg-top-award__contents__icon {
		width: 3.2rem;
		height: 2.2rem;
		margin-bottom: 3rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-award__contents__icon {
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-award__contents__icon {
		width: 2.2rem;
		height: 1.5rem;
		margin-bottom: 2.4rem;
	}
}

.pg-top-award__contents__title {
	font-family: var(--font-Manrope_Noto-Sans);
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	--line-height: calc( 30 / 18 );
	letter-spacing: calc( 20 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-award__contents__title {
		font-size: 2.3rem;
		font-size: max( 2.3rem , 18px );
		padding-bottom: 2.4rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-award__contents__title {
		font-size: 2rem;
		font-size: max( 2rem , 16px );
		padding-bottom: 2.3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-award__contents__title {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 14px );
		padding-bottom: 2.2rem;
	}
}

.pg-top-award__contents__title__en {
	display: inline-block;
	letter-spacing: calc( 40 / 1000 * 1em);
	-webkit-transform: translateY(0.03846em);
	transform: translateY(0.03846em);
	margin: 0 calc( 2 / 26 * 1em) 0 calc( 4 / 26 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-award__contents__title__en {
		font-size: 2.6rem;
		font-size: max( 2.6rem , 20px );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-award__contents__title__en {
		font-size: 2.2rem;
		font-size: max( 2.2rem , 16px );
	}
}

@media screen and (max-width: 560px) {
	.pg-top-award__contents__title__en {
		font-size: 1.9rem;
		font-size: max( 1.9rem , 15px );
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-award__contents__title__en.-type2 {
		margin-left: 0;
	}
}

.pg-top-award__contents__en {
	font-family: var(--font-Cantarell);
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.pg-top-award__contents__en {
		font-size: 1.4rem;
		font-size: max( 1.4rem , 12px );
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-award__contents__en {
		font-size: 1rem;
	}
}

/* ---------- pg-top-award__image ---------- */
.pg-top-award__image {
	position: relative;
}

@media screen and (min-width: 769px) {
	.pg-top-award__image {
		width: calc( ( 445 / 1130 ) * 100%);
		height: 72rem;
		margin-right: calc( ( 22 / 1130 ) * 100%);
	}
}

@media screen and (max-width: 768px) {
	.pg-top-award__image {
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px) and (min-width: 561px) {
	.pg-top-award__image {
		width: 40rem;
		height: 60rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-award__image {
		width: 25.3rem;
		height: 43rem;
	}
}

.pg-top-award__image__en {
	position: absolute;
	top: 50%;
	text-align: center;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: var(--color-dark-gray8);
	font-family: var(--font-Cantarell);
	font-size: 1rem;
	line-height: calc( 15 / 8 * 1em);
	letter-spacing: calc( 40 / 1000 * 1em);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	margin-left: calc( -3 / 10 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-award__image__en {
		left: -5.1rem;
		-webkit-transform: translateY(-50%) scale(0.8);
		transform: translateY(-50%) scale(0.8);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-award__image__en {
		left: -3.5rem;
		-webkit-transform: translateY(-50%) scale(0.5);
		transform: translateY(-50%) scale(0.5);
	}
}

.pg-top-award__image__figure {
	width: 100%;
	overflow: scroll;
	overflow: visible;
}

@media screen and (min-width: 769px) {
	.pg-top-award__image__figure {
		height: calc( 100% + 3.3rem);
		margin-top: -3.3rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-top-award__image__figure {
		height: 100%;
	}
}

.pg-top-award__image__figure img {
	border-radius: 0.5rem;
}

/* ------------------------------------------------------------
 pg-top-zootr
------------------------------------------------------------ */
.pg-top-zootr {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr {
		padding-bottom: 11.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr {
		padding-bottom: 10.2rem;
	}
}

.pg-top-zootr__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__inner::before {
		content: '';
		display: block;
		width: 20rem;
		height: 100%;
		background-image: url("../img/top/zootr_border-pc.svg");
		background-size: 100% 101%;
		background-position: center;
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__flex {
		display: flex;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__flex > div {
		width: 50%;
	}
}

/* ----------------------------------------
 pg-top-zootr__about
---------------------------------------- */
.pg-top-zootr__about {
	background-color: var(--color-black2);
	color: var(--color-tan);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__about {
		padding: 27rem calc( ( 160 / var( --design-width-pc ) ) * 100%) 28rem calc( ( 154 / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__about::after {
		content: '';
		display: block;
		width: 100%;
		height: 5.3rem;
		background-image: url("../img/top/zootr_border-sp.svg");
		background-size: 100% 101%;
		background-position: center;
		-webkit-transform: translate3d(0, 0, 0) rotate(0.0001deg);
		transform: translate3d(0, 0, 0) rotate(0.0001deg);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		margin-bottom: -1px;
	}
}

.pg-top-zootr__about__inner {
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__about__inner {
		max-width: 38.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__about__inner {
		padding: 19.2rem var(--side-width-xxxlarge-percent) 7.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__about__inner {
		max-width: 50rem;
		padding-right: 0;
		padding-left: 0;
	}
}

/* ---------- pg-top-zootr__about__header ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-zootr__about__header {
		margin-bottom: 6.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__about__header {
		margin-bottom: 5rem;
	}
}

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

.pg-top-zootr__about__header__logo {
	text-align: center;
}

@media screen and (min-width: 561px) {
	.pg-top-zootr__about__header__logo {
		margin-bottom: 2rem;
	}
}

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

@media screen and (min-width: 1024px) {
	.pg-top-zootr__about__header__logo svg {
		width: 16.2rem;
		height: 5.6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__about__header__logo svg {
		width: 14.58rem;
		height: 5.04rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-zootr__about__header__logo svg {
		width: 11.6rem;
		height: 4rem;
	}
}

.pg-top-zootr__about__header__logo path {
	fill: var(--color-tan);
}

.pg-top-zootr__about__header__en {
	text-align: center;
	font-family: var(--font-Cantarell);
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__about__header__en {
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__about__header__en {
		font-size: 1rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-zootr__about__header__en {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
	}
}

/* ---------- pg-top-zootr__about__txt ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-zootr__about__txt {
		padding-bottom: 6.8rem;
	}
}

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

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

/* ----------------------------------------
 pg-top-zootr__blog
---------------------------------------- */
.pg-top-zootr__blog {
	background-color: var(--color-tan);
	color: var(--color-black2);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog {
		padding: 26rem calc( ( 150 / var( --design-width-pc ) ) * 100%) 24rem calc( ( 154 / var( --design-width-pc ) ) * 100%);
	}
}

.pg-top-zootr__blog__inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog__inner {
		max-width: 39.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__blog__inner {
		padding: 9.4rem var(--side-width-xxxlarge-percent) 22.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__blog__inner {
		max-width: 50rem;
		padding-right: 0;
		padding-left: 0;
	}
}

.pg-top-zootr__blog__time {
	font-family: var(--font-Cantarell);
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog__time {
		font-size: 2.2rem;
		font-size: max( 2.2rem , 18px );
		padding-bottom: 2.6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__blog__time {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 14px );
		padding-bottom: 2.2rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-zootr__blog__time {
		font-size: 1.4rem;
		font-size: max( 1.4rem , 12px );
		padding-bottom: 1.8rem;
	}
}

.pg-top-zootr__blog__title {
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
}

@media screen and (min-width: 561px) {
	.pg-top-zootr__blog__title {
		--line-height: calc( 38 / 22 );
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog__title {
		font-size: 2.2rem;
		font-size: max( 2.2rem , 16px );
		padding-bottom: 3.3rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__blog__title {
		font-size: 2rem;
		font-size: max( 2rem , 16px );
		padding-bottom: 3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-zootr__blog__title {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 14px );
		--line-height: calc( 32 / 18 );
		padding-bottom: 2.6rem;
	}
}

.pg-top-zootr__blog__figure {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog__figure {
		margin-bottom: 2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-top-zootr__blog__figure {
		margin-bottom: 1.6rem;
	}
}

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

.pg-top-zootr__blog__figure::after {
	content: '';
	display: block;
	padding-top: calc( ( 260 / 395 ) * 100%);
}

.pg-top-zootr__blog__en {
	text-align: center;
	font-family: var(--font-Cantarell);
	font-weight: 700;
	letter-spacing: calc( 20 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__blog__en {
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__blog__en {
		font-size: 1rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-top-zootr__blog__en {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
	}
}

/* ----------------------------------------
 pg-top-zootr__illust
---------------------------------------- */
/* ---------- pg-top-zootr__illust-1 ---------- */
.pg-top-zootr__illust-1 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-1 {
		width: 8.6rem;
		top: 19.7rem;
		left: 50.94%;
	}
}

@media screen and (min-width: 2048px) {
	.pg-top-zootr__illust-1 {
		left: 50.6%;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-1 {
		width: 5.8rem;
		top: 10.5rem;
		left: calc( ( (208 + 58 / 2) / var( --design-width-sp ) ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-1 img {
		-webkit-transform: rotate(-76.917deg);
		transform: rotate(-76.917deg);
		-webkit-transform-origin: 27% 50%;
		transform-origin: 27% 50%;
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-1 p {
		top: -21.1rem;
		left: -20.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-1 p {
		top: -12.5rem;
		left: -9.5rem;
	}
}

/* ---------- pg-top-zootr__illust-2 ---------- */
@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-2 {
		width: 10.8rem;
		top: -12.6rem;
		right: 2.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-2 {
		width: 7rem;
		top: 1rem;
		left: calc( ( (233 + 70 / 2) / var( --design-width-sp ) ) * 100%);
		-webkit-transform: translateX(-50%) !important;
		transform: translateX(-50%) !important;
		opacity: !important;
	}
}

/* ---------- pg-top-zootr__illust-3 ---------- */
.pg-top-zootr__illust-3 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-3 {
		width: 9.4rem;
		bottom: -3.1rem;
		left: calc( ( (703 + 94 / 2) / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-3 {
		width: 6.2rem;
		bottom: -3.2rem;
		left: calc( ( (210 + 62 / 2) / var( --design-width-sp ) ) * 100%);
	}
}

/* ---------- pg-top-zootr__illust-4 ---------- */
.pg-top-zootr__illust-4 {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-4 {
		width: 9.7rem;
		bottom: -3.2rem;
		left: calc( ( (578 + 97 / 2) / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-4 {
		width: 6.4rem;
		bottom: -3.3rem;
		left: calc( ( (128 + 64 / 2) / var( --design-width-sp ) ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-top-zootr__illust-4 p {
		top: -9.7rem;
		left: -7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-top-zootr__illust-4 p {
		top: -6.4rem;
		left: -4.6rem;
	}
}