@charset "UTF-8";
/*
 *
 * page-home.scss
 *
 */
:root {
	--z-index-pg-home-visual: -1;
}

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

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

/* ------------------------------------------------------------
 pg-home-visual
------------------------------------------------------------ */
.pg-home-visual {
	position: relative;
	border: solid var(--space-border) var(--color-bg);
	border-bottom: none;
	color: var(--color-txt-white);
}

@media screen and (min-width: 1024px) {
	.pg-home-visual {
		min-height: 76.8rem;
		height: calc( 100vh - var( --space-border ));
	}
	body.is-load .pg-home-visual {
		height: calc( var( --vh ) * 100 - var( --space-border ));
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-visual {
		height: calc( 100vh - var( --space-border ) - 12.0rem);
	}
	body.is-load .pg-home-visual {
		height: calc( var( --vh ) * 100 - var( --space-border ) - 12.0rem);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-visual {
		min-height: 76.8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-visual {
		min-height: 42rem;
	}
}

.pg-home-visual .c-bg {
	opacity: 0;
	transition: var(--transition-tobari);
}

.pg-home-visual.is-shown .c-bg {
	opacity: 1;
}

/* ---------- pg-home-visual__catch ---------- */
.pg-home-visual__catch {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.pg-home-visual__catch {
		width: 52rem;
		right: 10rem;
		bottom: 20%;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-visual__catch {
		right: calc( ( 63 / 730 ) * 100%);
		bottom: 17.6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-visual__catch {
		width: 40rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-visual__catch {
		width: 25rem;
	}
}

/* ---------- pg-home-visual__so ---------- */
.pg-home-visual__so {
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.pg-home-visual__so {
		bottom: 6.3rem;
		left: 7.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-visual__so {
		left: 1.5rem;
		bottom: 2rem;
	}
}

/* ---------- pg-home-visual__nav ---------- */
.pg-home-visual__nav {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.pg-home-visual__nav {
		width: 28rem;
		height: calc( 100% - 6.0rem);
		margin: 3.0rem 0;
		border-right: var(--line-white);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-visual__nav {
		display: none;
	}
}

.pg-home-visual__nav ul {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.pg-home-visual__nav a {
	display: block;
	font-size: var(--font-size15);
	padding: 2.2rem 0 2.2rem 6rem;
	letter-spacing: calc( 0 / 1000 * 1em);
}

.pg-home-visual__nav a.is-hover:hover {
	background-color: rgba(var(--color-white--rgb), 0.075);
}

/* ---------- pg-home-visual__bg ---------- */
.pg-home-visual__bg {
	background-color: var(--color-black0);
}

.pg-home-visual__bg > div {
	opacity: .8;
}

/* ---------- pg-home-visual__frame ---------- */
/* 白淵の下線を表示・非表示切り替え用のdiv */
.pg-home-visual__frame {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50vh;
	border-bottom-left-radius: calc( var( --radius ) * 2);
	border-bottom-right-radius: calc( var( --radius ) * 2);
	border-left: solid var(--space-border) var(--color-bg);
	border-right: solid var(--space-border) var(--color-bg);
	border-bottom: solid var(--space-border) var(--color-bg);
	z-index: 1000;
	pointer-events: none;
	transition: opacity var(--transition-sticky);
}

@media screen and (min-width: 1024px) and (max-height: 778px) {
	.pg-home-visual__frame {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-visual__frame {
		display: none;
	}
}

.pg-home-visual__frame::before {
	content: '';
	display: block;
	width: 100%;
	height: 0;
	border-top: solid var(--space-border) var(--color-bg);
	position: absolute;
	top: 100%;
	left: 0;
}

.pg-home-visual__frame.is-hidden {
	opacity: 0;
}

/* ------------------------------------------------------------
 pg-home-so
------------------------------------------------------------ */
.pg-home-so {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

@media screen and (min-width: 1024px) {
	.pg-home-so {
		background-image: url("../img/home/oc_bg-pc.svg");
		background-position: 50% calc( 100% - 8.5rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so {
		background-image: url("../img/home/oc_bg-sp.svg");
		background-position: 50% calc( 100% - 49.8rem);
	}
}

.pg-home-so img {
	width: 100%;
}

.pg-home-so__inner {
	position: relative;
	padding-top: 0.1px;
	padding-bottom: 0.1px;
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-so__inner {
		max-width: 60rem;
	}
}

/* ---------- pg-home-so__txt ---------- */
.pg-home-so__txt {
	position: absolute;
	z-index: 10;
	margin-left: auto;
	-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);
	font-size: var(--font-size15);
	--line-height: calc( 80 / 30 );
	letter-spacing: calc( 150 / 1000 * 1em);
	white-space: nowrap;
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-so__txt {
		font-size: var(--font-size18);
	}
}

.pg-home-so__txt.-unique-1 {
	top: 0;
}

@media screen and (min-width: 1024px) {
	.pg-home-so__txt.-unique-1 {
		right: 0;
		margin-top: calc( ( 845 / 3000 ) * 100%);
		margin-right: calc( ( 426 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__txt.-unique-1 {
		margin-top: calc( ( 316 / 750 ) * 100%);
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.pg-home-so__txt.-unique-2 {
	top: 0;
	left: 0;
}

@media screen and (min-width: 1024px) {
	.pg-home-so__txt.-unique-2 {
		margin-top: calc( ( 2122 / 3000 ) * 100%);
		margin-left: calc( ( 560 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__txt.-unique-2 {
		margin-top: calc( ( 1465 / 750 ) * 100%);
		margin-left: calc( ( 140 / 750 ) * 100%);
	}
}

.pg-home-so__txt.-unique-3 {
	top: 0;
	right: 0;
}

@media screen and (min-width: 1024px) {
	.pg-home-so__txt.-unique-3 {
		margin-top: calc( ( 2874 / 3000 ) * 100%);
		margin-right: calc( ( 458 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__txt.-unique-3 {
		margin-top: calc( ( 2150 / 750 ) * 100%);
		margin-right: calc( ( 112 / 750 ) * 100%);
	}
}

/* ---------- pg-home-so__oclock ---------- */
.pg-home-so__oclock {
	position: absolute;
	z-index: 10;
	margin-left: auto;
}

@media screen and (max-width: 1023px) {
	.pg-home-so__oclock {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.pg-home-so__oclock.-unique-1 {
		max-width: 15rem;
		width: calc( ( 300 / 3000 ) * 100%);
		top: 0;
		left: 0;
		margin-top: calc( ( 382 / 3000 ) * 100%);
		margin-left: calc( ( 624 / 3000 ) * 100%);
	}
}

@media screen and (min-width: 1024px) {
	.pg-home-so__oclock.-unique-2 {
		max-width: 14rem;
		width: calc( ( 280 / 3000 ) * 100%);
		top: 0;
		right: 0;
		margin-top: calc( ( 2380 / 3000 ) * 100%);
		margin-right: calc( ( 574 / 3000 ) * 100%);
	}
}

/* ---------- pg-home-so__figure ---------- */
/* ----- pg-home-so__figure-1 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-1 {
		width: calc( ( 660 / 3000 ) * 100%);
		margin-top: calc( ( -280 / 3000 ) * 100%);
		margin-left: calc( ( 840 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-1 {
		width: calc( ( 308 / 750 ) * 100%);
		margin-top: calc( ( -50 / 750 ) * 100%);
		margin-left: calc( ( 72 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-2 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-2 {
		width: calc( ( 780 / 3000 ) * 100%);
		margin-top: calc( ( -320 / 3000 ) * 100%);
		margin-left: calc( ( 1800 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-2 {
		width: calc( ( 362 / 750 ) * 100%);
		margin-top: calc( ( -66 / 750 ) * 100%);
		margin-left: calc( ( 577 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-3 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-3 {
		width: calc( ( 580 / 3000 ) * 100%);
		margin-top: calc( ( -160 / 3000 ) * 100%);
		margin-left: calc( ( -270 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-3 {
		width: calc( ( 390 / 750 ) * 100%);
		margin-top: calc( ( 104 / 750 ) * 100%);
		margin-left: calc( ( -280 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-4 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-4 {
		width: calc( ( 1380 / 3000 ) * 100%);
		margin-top: calc( ( -470 / 3000 ) * 100%);
		margin-left: calc( ( 560 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-4 {
		width: calc( ( 640 / 750 ) * 100%);
		margin-top: calc( ( 180 / 750 ) * 100%);
		margin-left: calc( ( -98 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-5 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-5 {
		width: calc( ( 660 / 3000 ) * 100%);
		margin-top: calc( ( -80 / 3000 ) * 100%);
		margin-left: calc( ( 100 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-5 {
		width: calc( ( 306 / 750 ) * 100%);
		margin-top: calc( ( -70 / 750 ) * 100%);
		margin-left: calc( ( 400 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-6 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-6 {
		width: calc( ( 840 / 3000 ) * 100%);
		margin-top: calc( ( -280 / 3000 ) * 100%);
		margin-left: auto;
		margin-right: calc( ( -40 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-6 {
		width: calc( ( 270 / 750 ) * 100%);
		margin-top: calc( ( 156 / 750 ) * 100%);
		margin-left: calc( ( 494 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-7 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-7 {
		width: calc( ( 720 / 3000 ) * 100%);
		margin-top: calc( ( -400 / 3000 ) * 100%);
		margin-left: calc( ( 1080 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-7 {
		position: relative;
		z-index: 10;
		width: calc( ( 186 / 750 ) * 100%);
		margin-top: calc( ( 118 / 750 ) * 100%);
		margin-left: calc( ( -47 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-8 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-8 {
		width: calc( ( 400 / 3000 ) * 100%);
		margin-top: calc( ( -280 / 3000 ) * 100%);
		margin-left: calc( ( 1640 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-8 {
		width: calc( ( 336 / 750 ) * 100%);
		margin-top: calc( ( -52 / 750 ) * 100%);
		margin-left: calc( ( 20 / 750 ) * 100%);
	}
}

/* ----- pg-home-so__figure-9 ----- */
@media screen and (min-width: 1024px) {
	.pg-home-so__figure-9 {
		width: calc( ( 840 / 3000 ) * 100%);
		margin-top: calc( ( -40 / 3000 ) * 100%);
		margin-left: calc( ( 60 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__figure-9 {
		width: calc( ( 390 / 750 ) * 100%);
		margin-top: calc( ( 155 / 750 ) * 100%);
		margin-left: calc( ( 412 / 750 ) * 100%);
	}
}

/* ---------- pg-home-so__catch ---------- */
.pg-home-so__catch {
	text-align: center;
	font-family: var(--font-mincho);
	font-size: var(--font-size18);
	letter-spacing: calc( 300 / 1000 * 1em);
	padding-left: 0.8rem;
}

@media screen and (min-width: 1024px) {
	.pg-home-so__catch {
		--line-height: calc( 100 / 36 );
		margin-top: calc( ( -278 / 3000 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__catch {
		--line-height: calc( 80 / 36 );
		margin-top: 7.2rem;
	}
}

/* ---------- pg-home-so__title ---------- */
.pg-home-so__title {
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-home-so__title {
		width: 28rem;
		margin-top: 7.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__title {
		width: 19rem;
		margin-top: 5rem;
	}
}

/* ---------- pg-home-so__button ---------- */
@media screen and (min-width: 1024px) {
	.pg-home-so__button {
		margin-top: 8.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-so__button {
		margin-top: 5.7rem;
	}
}

/* ------------------------------------------------------------
 pg-home-lineup
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-home-lineup {
		margin-top: 13rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-lineup {
		margin-top: 10rem;
	}
}

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

@media screen and (min-width: 1024px) {
	.pg-home-lineup .p-section-base__contents {
		padding-top: 12rem;
		padding-bottom: 10.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-lineup .p-section-base__contents {
		padding-top: 6.2rem;
		padding-bottom: 7rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-home-lineup .p-section-base__txt {
		margin-top: 6.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-lineup .p-section-base__txt {
		padding-right: calc( ( 40 / 670 ) * 100%);
		padding-left: calc( ( 40 / 670 ) * 100%);
		margin-top: 4rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-home-lineup .p-section-base__button {
		margin-top: 7.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-lineup .p-section-base__button {
		margin-top: 5.4rem;
	}
}

.pg-home-lineup__inner {
	border-top: var(--line);
}

@media screen and (min-width: 1024px) {
	.pg-home-lineup__inner {
		padding-top: 8.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-lineup__inner {
		padding-top: 6.6rem;
	}
}

/* ---------- pg-home-lineup__sections ---------- */
@media screen and (min-width: 1024px) {
	.pg-home-lineup__sections {
		margin-top: 4.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-lineup__sections {
		margin-top: 5rem;
	}
}

.pg-home-lineup__logo {
	width: var(--logo-width4);
	margin: 0 auto;
}

.pg-home-lineup__catch {
	text-align: center;
	font-family: var(--font-mincho);
	letter-spacing: calc( 130 / 1000 * 1em);
}

@media screen and (min-width: 561px) {
	.pg-home-lineup__catch {
		font-size: var(--font-size20);
		--line-height: calc( 80 / 40 );
		padding-left: 0.4rem;
	}
}

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

@media screen and (max-width: 1023px) {
	.pg-home-lineup__catch {
		margin-top: 3.4rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-lineup__catch {
		font-size: var(--font-size16);
		--line-height: calc( 60 / 32 );
	}
}

/* ------------------------------------------------------------
 pg-home-blog
------------------------------------------------------------ */
@media screen and (min-width: 561px) {
	.pg-home-blog {
		margin-top: 8.3rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-blog {
		margin-top: 6.6rem;
	}
}

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

@media screen and (max-width: 1023px) {
	.pg-home-blog__list {
		margin-top: 5rem;
	}
}

/* ------------------------------------------------------------
 pg-home-product
------------------------------------------------------------ */
@media screen and (min-width: 561px) {
	.pg-home-product {
		margin-top: 8rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-product {
		margin-top: 5.8rem;
	}
}

.pg-home-product a {
	display: flex;
	align-items: center;
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-home-product a {
		height: 44rem;
		padding-bottom: 1rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-home-product a {
		height: 38rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-home-product a {
		height: 32rem;
		padding-top: 1.4rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-home-product .c-button {
		margin-top: 8.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-product .c-button {
		margin-top: 5.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-product picture {
		-webkit-transform: translate3d(0, 0, 0) !important;
		transform: translate3d(0, 0, 0) !important;
		height: 100%;
	}
}

.pg-home-product__contents {
	position: relative;
	z-index: 10;
}

/* ------------------------------------------------------------
 pg-home-other
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-home-other {
		margin-top: 8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-home-other {
		margin-top: 6rem;
	}
}

/* ---------- pg-home-other__cell ---------- */
.pg-home-other__cell figure {
	max-height: 50rem;
}

.pg-home-other__title {
	margin-top: 2.2rem;
}