@charset "utf-8";

.xxxxxxxxx {
	/* scroll-margin-top: 0; */

	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}
	@media(hover) {
		& {
			transition: 0.2s;
		}
		&:hover {
			opacity: 0.6;
		}
	}
}

/* component
----------------------------------------------------------------------------- */

.top-btn {
	@media (width <= 767px) {/* SP */
		text-align: center;
		margin-block-start: 6rem;
	}
}
.c-btn-more {
}


/* main
----------------------------------------------------------------------------- */

.l-main__top {
	padding-block-start: var(--header-height-pc);
	background-color: var(--cc-back);
	@media (width <= 767px) {/* SP */
		padding-block-start: var(--header-height-sp);
	}
}

/* mv
----------------------------------------------------------------------------- */
.top-mv {
	background-color: var(--cc-back);
}
.top-mv-content {
	position: relative;
	display: block;
	z-index: 1;
	@media (width > 767px) {/* PC */
		/* height: 82rem; */
	}
}
.top-mv-heading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: grid;
    place-content: center;
	color: #fff;
	z-index: 1;
}
.top-mv-heading-en {
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	letter-spacing: 0.15em;
	@media (width > 767px) {/* PC */
		font-size: 4rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 3.2rem;
		line-height: 1.4;
	}
}
.top-mv-heading-sub {
	position: relative;
	display: inline-block;
	width: fit-content;
    margin-inline: auto;
	padding-inline: 1.5rem 1.1rem;
	z-index: 1;
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	letter-spacing: 0.15em;
	@media (width <= 767px) {/* SP */
		margin-block-start: 2.5rem;
		padding-inline: 1.2rem;
		font-size: 1.1rem;
		line-height: 1.8;
	}
	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin-block: auto;
		width: .4rem;
		height: 1px;
		background-color: #fff;
		z-index: 1;
	}
	&::before {
		left: 0;
	}
	&::after {
		right: 0;
	}
}
.top-mv-heading-ja {
	font-family: var(--ff-shuei);
	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: .9rem;
		font-size: 1.3rem;
		letter-spacing: 0.2em;
		line-height: 2.4;
	}
}

.top-mv-sp {
	width: 100%;
	& img {
		width: 100%;
		aspect-ratio: 375/607;
	}
}
.top-mv-pict {
	width: 100%;
}

/* animation
---------------- */
.top-mv-animation {
	position: relative;
	z-index: 1;
	@media (width > 767px) {/* PC */
		aspect-ratio: 1600/820;
	}
	@media (width <= 767px) {/* SP */
		aspect-ratio: 375/607;
	}
}
.top-mv-animation-item {
	max-width: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform-origin: center;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	& img {
		width: 100%;
		/* height: 100%; */
		@media (width > 767px) {/* PC */
			aspect-ratio: 1544/760;

		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 345/577;

		}
	}
	&:not(._04) {
		opacity: 0;
		@media (width > 767px) {/* PC */
			width: calc(100% - (4.6rem * 2));
			height: calc(100% - (4.6rem * 2));
		}
		@media (width <= 767px) {/* SP */
			width: calc(100% - (2.6rem * 2));
			height: calc(100% - (2.6rem * 2));
		}
	}
}
.top-mv-animation__video {
	width: 100%;
    object-fit: cover;
	@media (width <= 767px) {/* SP */
		height: 100%;
	}
}

/* animation A 重ねる*/
:root {
	--mv-animationA: 0.3s;

	/* アニメーション状態管理変数 */
	--opacity-hidden: 0;
	--opacity-visible: 1;
	--scale-initial: 1.02;
	--scale-final: 1;
	--rotation-01: 0.8deg;
	--rotation-02: -0.94deg;
	--rotation-03: -0.34deg;
	--rotation-aligned: 0deg;

	/* Clip-path 変数 */
	--clip-path-video: inset(4.6rem 4.6rem 4.6rem 4.6rem);
	--clip-path-video-sp: inset(2.6rem 2.6rem 2.6rem 2.6rem);
	--clip-path-video-min: inset(4.0rem 4.0rem 4.0rem 4.0rem);
	--clip-path-video-min-sp: inset(2.2rem 2.2rem 2.2rem 2.2rem);
	--clip-path-expanded: inset(0 0 0 0);
}
@keyframes mvAnimation-A-01 {
	0% {
		opacity: var(--opacity-hidden);
		transform: rotate(var(--rotation-01)) scale(var(--scale-initial));
	}
	100% {
		opacity: var(--opacity-visible);
		transform: rotate(var(--rotation-01)) scale(var(--scale-final));
	}
}
@keyframes mvAnimation-A-02 {
	0% {
		opacity: var(--opacity-hidden);
		transform: rotate(var(--rotation-02)) scale(var(--scale-initial));
	}
	100% {
		opacity: var(--opacity-visible);
		transform: rotate(var(--rotation-02)) scale(var(--scale-final));
	}
}
@keyframes mvAnimation-A-03 {
	0% {
		opacity: var(--opacity-hidden);
		transform: rotate(var(--rotation-03)) scale(var(--scale-initial));
	}
	100% {
		opacity: var(--opacity-visible);
		transform: rotate(var(--rotation-03)) scale(var(--scale-final));
	}
}
@media (width > 767px) {/* PC */
	@keyframes mvAnimation-A-04 {
		0% {
			opacity: var(--opacity-hidden);
		}
		100% {
			opacity: var(--opacity-visible);
		}
	}
}
@media (width <= 767px) {/* SP */
	@keyframes mvAnimation-A-04 {
		0% {
			opacity: var(--opacity-hidden);
		}
		100% {
			opacity: var(--opacity-visible);
		}
	}
}
.top-mv-animation-item._01 {
	z-index: 1;
	transform: rotate(0.8deg);
}
.is-visible-01 {
	animation: mvAnimation-A-01 var(--mv-animationA) ease-out forwards;
}

.top-mv-animation-item._02 {
	z-index: 2;
	transform: rotate(-0.94deg);
}
.is-visible-02 {
	animation: mvAnimation-A-02 var(--mv-animationA) 0.5s ease-out forwards;
}

.top-mv-animation-item._03 {
	z-index: 3;
	transform: rotate(-0.34deg);
}
.is-visible-03 {
	animation: mvAnimation-A-03 var(--mv-animationA) 0.5s ease-out forwards;
}

.top-mv-animation-item._04 {
	max-width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 4;
	opacity: 0;
	will-change: clip-path, opacity;
	.top-mv-animation-video {
		position: relative;
		z-index: 1;
		max-width: 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	@media (width > 767px) {/* PC */
		-webkit-clip-path: var(--clip-path-video);
		clip-path: var(--clip-path-video);
	}
	@media (width <= 767px) {/* SP */
		-webkit-clip-path: var(--clip-path-video-sp);
		clip-path: var(--clip-path-video-sp);
	}
}
.is-visible-04 {
	animation: mvAnimation-A-04 var(--mv-animationA) 0.5s ease-out forwards;
}

/* animation B 整頓 */
@keyframes mvAnimation-B-01 {
	0% {
		opacity: var(--opacity-visible);
		transform: var(--transform-01-initial);
	}
	30% {
		opacity: var(--opacity-visible);
		transform: var(--transform-01-initial);
	}
	98% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned);
	}
	100% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned) scale(0.95);
	}
}
@keyframes mvAnimation-B-02 {
	0% {
		opacity: var(--opacity-visible);
		transform: var(--transform-02-initial);
	}
	30% {
		opacity: var(--opacity-visible);
		transform: var(--transform-02-initial);
	}
	98% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned);
	}
	100% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned) scale(0.95);
	}
}
@keyframes mvAnimation-B-03 {
	0% {
		opacity: var(--opacity-visible);
		transform: var(--transform-03-initial);
	}
	30% {
		opacity: var(--opacity-visible);
		transform: var(--transform-03-initial);
	}
	98% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned);
	}
	100% {
		opacity: var(--opacity-visible);
		transform: var(--transform-aligned) scale(0.95);
	}
}
@media (width > 767px) {/* PC */
	@keyframes mvAnimation-B-04 {
		0% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video);
		}
		98% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video);
		}
		100% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video-min);
		}
	}
}
@media (width <= 767px) {/* SP */
	@keyframes mvAnimation-B-04 {
		0% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video-sp);
		}
		98% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video-sp);
		}
		100% {
			opacity: var(--opacity-visible);
			clip-path: var(--clip-path-video-min-sp);
		}
	}
}
/* 01〜04に付与 */
:root {
	--duration-B: 0.7s;
	--delay-B: 0.2s;

	/* Phase B アニメーション状態変数 */
	--transform-01-initial: rotate(var(--rotation-01)) scale(var(--scale-final));
	--transform-02-initial: rotate(var(--rotation-02)) scale(var(--scale-final));
	--transform-03-initial: rotate(var(--rotation-03)) scale(var(--scale-final));
	--transform-aligned: rotate(var(--rotation-aligned)) scale(var(--scale-final));
}
.is-aligned-01 {
	animation: mvAnimation-B-01 var(--duration-B) ease-in-out forwards;
}
.is-aligned-02 {
	animation: mvAnimation-B-02 var(--duration-B) ease-in-out forwards;
}
.is-aligned-03 {
	animation: mvAnimation-B-03 var(--duration-B) ease-in-out forwards;
}
.is-aligned-04 {
	animation: mvAnimation-B-04 var(--duration-B) ease-in-out forwards;
}
/* animation C 拡大*/
@media (width > 767px) {/* PC */
	@keyframes mvAnimation-C {
		0% {
			-webkit-clip-path: var(--clip-path-video-min);
			clip-path: var(--clip-path-video-min);
			opacity: var(--opacity-visible);
		}
		5% {
			-webkit-clip-path: var(--clip-path-video-min);
			clip-path: var(--clip-path-video-min);
			opacity: var(--opacity-visible);
		}
		100% {
			-webkit-clip-path: var(--clip-path-expanded);
			clip-path: var(--clip-path-expanded);
			opacity: var(--opacity-visible);
		}
	}
}
@media (width <= 767px) {/* SP */
	@keyframes mvAnimation-C {
		0% {
			-webkit-clip-path: var(--clip-path-video-sp);
			clip-path: var(--clip-path-video-sp);
			opacity: var(--opacity-visible);
		}
		5% {
			-webkit-clip-path: var(--clip-path-video-min-sp);
			clip-path: var(--clip-path-video-min-sp);
			opacity: var(--opacity-visible);
		}
		100% {
			-webkit-clip-path: var(--clip-path-expanded);
			clip-path: var(--clip-path-expanded);
			opacity: var(--opacity-visible);
		}
	}
}
/* #top-mv-animation-item04に付与 */
.is-spread {
	animation: mvAnimation-C var(--mv-animationA) ease-in-out forwards;
}

/* animation 第4 再生と表示*/
.top-mv-heading {
	opacity: 0;
	z-index: 10;
	transition: opacity 0.3s ease-out;
	&.is-visible {
		opacity: 1;
	}
}

/* intro
----------------------------------------------------------------------------- */
.top-intro {
	border-top: 1px solid var(--cc-line-A);
}
.top-intro-heading-text {
	text-align: center;
	text-transform: uppercase;
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	letter-spacing: 0.15em;
	color: var(--cc-pinkgold);
	border-bottom: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		padding-block: 5rem;
		font-size: 3rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 5.5rem;
		font-size: 1.6rem;
	}
}
.top-intro-content {
	@media (width > 767px) {/* PC */
		width: 100%;
		max-width: 140rem;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 26.4rem auto;
		column-gap: 4rem;
		padding-block: 16rem 23.2rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 10rem 9rem;
	}
}
.top-intro-pict01 {
	width: 100%;
	@media (width > 767px) {/* PC */
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	@media (width <= 767px) {/* SP */
		padding-inline: .8rem;
	}
	& img {
		width: 100%;
		@media (width > 767px) {/* PC */
			aspect-ratio: 680/900;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 355/420;
		}
	}
}
.top-intro-catch {
	@media (width <= 767px) {/* SP */
		margin-block-start: 5rem;
		padding-inline: 3rem;
	}
	&.top-intro-catch-01 {
		@media (width > 767px) {/* PC */
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			display: flex;
            flex-direction: column;
            justify-content: center;
			padding-inline-start: 9.1vw;
		}
	}
}
.top-intro-pict02 {
	width: 100%;
	@media (width > 767px) {/* PC */
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 6rem;
		padding-inline: .8rem;
	}
	& img {
		width: 100%;
		@media (width > 767px) {/* PC */
			aspect-ratio: 680/900;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 355/420;
		}
	}
}
.top-intro-text {
	@media (width > 767px) {/* PC */
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        padding-inline-start: 6.25vw;
        top: 7.7rem;
	}
}
.top-intro-desc {
	@media (width > 767px) {/* PC */
		margin-block-start: 3.8rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 1rem;
		padding-inline: 3rem;
	}
}

/* message
----------------------------------------------------------------------------- */
.top-message {
	text-align: center;
	border-top: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		padding-block: 12rem 16rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 10rem 9rem;
		padding-inline: 3rem;
	}
}
.top-message-content {
	@media (width > 767px) {/* PC */
		margin-block-start: 12rem;
		display: flex;
		justify-content: center;
		> * {
			width: 50%;
		}
	}
}
.top-message-pict01 {
	transition-duration: 0.4s;
	@media (width > 767px) {/* PC */
		width: 54rem;
		margin-inline-start: auto;
		padding-inline-end: 6rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 6rem;
		width: 28rem;
	}
	& img {
		@media (width > 767px) {/* PC */
			aspect-ratio: 540/360;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 280/180;
		}
	}
}
.top-message-pict02 {
	transition-duration: 0.4s;
	@media (width > 767px) {/* PC */
		width: 30rem;
		margin-block-start: -2rem;
		margin-inline-start: auto;
	}
	@media (width <= 767px) {/* SP */
		width: 15rem;
		margin-inline-start: auto;
        margin-block-start: -2rem;
	}
	& img {
		width: 100%;
		@media (width > 767px) {/* PC */
			aspect-ratio: 300/200;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 150/100;
		}
	}
}
.top-message-text.top-message-text-wrap {
	@media (width > 767px) {/* PC */
		text-align: left;
		padding-inline-start: 13.8rem;
	}
}
.top-message-text {
	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
		text-align: left;
		margin-block-start: 4rem;
	}
}
.top-message-desc {
	@media (width > 767px) {/* PC */
		margin-block-start: 2.2rem;
		&:nth-of-type(1) {
			margin-block-start: 3.7rem;
		}
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 2rem;
		&:nth-of-type(1) {
			margin-block-start: 2.1rem;
		}
	}
	/* 装飾 */
	.not-sr-only {
		position: relative;
		display: inline-block;
		z-index: 1;
		&::before {
			content: "ー";
			display: inline-block;
			z-index: 1;
		}
	}
}
.top-message-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 8.4rem;
	}
}


/* clothing wd
----------------------------------------------------------------------------- */
.top-wd {
	/* border-top: 1px solid var(--cc-line-A); */
	position: relative;
	display: block;
	z-index: 1;
	/* -js_underline用 */
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: var(--cc-line-A);
		top: 0;
		left: 0;
		transform: scale(0);
		transform-origin: top left;
		transition: transform 0.6s ease-out;
		transition-delay: 0.3s;
		z-index: 1;
	}
	@media (width > 767px) {/* PC */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-inline: auto;
		width: 100%;
		.top-wd-content {
			min-width: calc(100% - 56.25%);
		}
		.top-wd-pict01 {
			width: 56.25%;
		}
	}
	@media (width <= 767px) {/* SP */
		padding-block: 1rem 10rem;
	}
}
.top-wd-content {
	@media (width > 767px) {/* PC */
	}
}
.top-wd-heading {
	@media (width <= 767px) {/* SP */
		margin-block-start: 6rem;
		padding-inline: 2.4rem;
	}
}
.top-wd-catch {
	@media (width > 767px) {/* PC */
		margin-block-start: 8.8rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 4.8rem;
	}
}
.top-wd-desc {
	@media (width > 767px) {/* PC */
		margin-block-start: 1.7rem;
	}
	@media (width <= 767px) {/* SP */
		display: block;
		margin-block-start: 1.1rem;
	}
}
.top-wd-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 9.2rem;
	}
}
.top-wd-pict01 {
	@media (width <= 767px) {/* SP */
		padding-inline: .8rem;
		width: 100%;
	}
	& img {
		@media (width > 767px) {/* PC */
			aspect-ratio: 1/1;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 355/365;
		}
	}
}
/* clothing kimono
----------------------------------------------------------------------------- */
.top-kimono {
	/* border-top: 1px solid var(--cc-line-A); */
	position: relative;
	display: block;
	z-index: 1;
	/* -js_underline用 */
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: var(--cc-line-A);
		top: 0;
		left: 0;
		transform: scale(0);
		transform-origin: top left;
		transition: transform 0.6s ease-out;
		transition-delay: 0.3s;
		z-index: 1;
	}
	@media (width > 767px) {/* PC */
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		justify-content: center;
		text-align: center;
		margin-inline: auto;
		width: 100%;
		.top-kimono-content {
			min-width: calc(100% - 56.25%);
		}
		.top-kimono-pict01 {
			width: 56.25%;
		}
	}
	@media (width <= 767px) {/* SP */
		padding-block: 1rem 10rem;
	}
}
.top-kimono-content {
	@media (width > 767px) {/* PC */
	}
}
.top-kimono-heading {
	@media (width <= 767px) {/* SP */
		margin-block-start: 6rem;
		padding-inline: 7.5rem;
		span {
			letter-spacing: .3em;
		}
	}
}
.top-kimono-catch {
	@media (width > 767px) {/* PC */
		margin-block-start: 8.8rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 4.8rem;
	}
}
.top-kimono-desc {
	@media (width > 767px) {/* PC */
		margin-block-start: 1.7rem;
	}
	@media (width <= 767px) {/* SP */
		display: block;
		margin-block-start: 1.1rem;
	}
}
.top-kimono-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 9.2rem;
	}
}
.top-kimono-pict__01 {
	@media (width <= 767px) {/* SP */
		padding-inline: .8rem;
		width: 100%;
	}
	& img {
		@media (width > 767px) {/* PC */
			aspect-ratio: 1/1;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 355/365;
		}
	}
}

/* clothing items
----------------------------------------------------------------------------- */
.top-clothing {
	@media (width > 767px) {/* PC */
		display: flex;
		> * {
			width: calc(100% / 3);
		}
	}
}
.top-clothing-item {
	position: relative;
	display: block;
	border-top: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		/* border-right: 1px solid var(--cc-line-A); */
		padding-block-end: 10rem;
		&:last-of-type {
			border-right: none;
		}
		/* -js_underline用 */
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			transform: scale(0);
			transform-origin: top;
			width: 1px;
			height: 100%;
			background-color: var(--cc-line-A);
			transition: transform 1.2s ease-out;
			transition-delay: 1s;
		}
		&:nth-of-type(2)::before {
			transition-delay: 1.4s;
		}
	}
	@media (width <= 767px) {/* SP */
		display: flex;
		&:last-of-type {
			border-bottom: 1px solid var(--cc-line-A);
		}
		&::before {
			transition-duration: .5s;
		}
		> * {
			width: 50%;
		}
	}
}
.top-clothing-heading {
	@media (width > 767px) {/* PC */
		margin-block-start: 2rem;
	}
}
.top-clothing-pict01 {
	@media (width > 767px) {/* PC */
		padding: 4rem;
	}
	@media (width <= 767px) {/* SP */
		padding: 1rem;
	}
	& img {
		@media (width <= 767px) {/* SP */
			aspect-ratio: 168/290;
		}
	}
}
.top-clothing-content {
	@media (width <= 767px) {/* SP */
		padding: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
@media (width <= 767px) {/* SP */
	._color {
		.top-clothing-heading {
			max-width: 9rem;
		}
	}
}
.top-clothing-desc {
	@media (width > 767px) {/* PC */
		margin-block-start: 3.9rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 3rem;
	}
}
.top-clothing {
	.c-btn-tertiary {
		@media (width <= 767px) {/* SP */
			margin-block-start: 2.8rem;
		}
	}
}
.top-clothing-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 6.3rem;
	}
}
/* info
----------------------------------------------------------------------------- */
.top-news {
	text-align: center;
	border-top: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		padding-block: 16rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 10rem 9rem;
	}
}
.top-news-heading {
	@media (width > 767px) {/* PC */
		padding-inline: 8.5rem;
	}
}
.top-news-slide {
	text-align: left;
	@media (width > 767px) {/* PC */
		margin-block-start: 10rem;
		/* margin-inline-start: 14.8rem; */
		margin-inline-start: 9.6vw;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 3.8rem;
		padding-inline-start: 3rem;
		padding-block: 0 4.5rem;
	}
}
.top-news-item {
	@media (width > 767px) {/* PC */
		padding-block-start: 2.5rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block-start: 2rem;
	}
}
.top-news-item {
	&.top-news-item-new {
		position: relative;
		display: block;
		z-index: 1;
		&::before {
			content: 'NEW';
			position: absolute;
			display: grid;
			place-content: center;
			font-family: var(--ff-loniki);
			font-weight: var(--text-fw-en);
			line-height: 1;
			letter-spacing: 0.15em;
			border-radius: 50%;
			background-color: #fff;
			color: var(--cc-pinkgold);
			border: 1px solid var(--cc-pinkgold);
			z-index: 1;
			@media (width > 767px) {/* PC */
				top: 0;
				left: 2rem;
				width: 5rem;
				height: 5rem;
				font-size: 1.2rem;
			}
			@media (width <= 767px) {/* SP */
				top: 0;
				left: 1rem;
				width: 4rem;
				height: 4rem;
				font-size: 0.8rem;
			}
		}
	}
}
.top-news-pict01 {
	@media (width <= 767px) {/* SP */
		width: 100%;
	}
	& img {
		width: 100%;
		@media (width > 767px) {/* PC */
			aspect-ratio: 400/240;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 300/180;

		}
	}
}
.top-news-cat {
	display: flex;
	justify-content: space-between;
	@media (width > 767px) {/* PC */
		margin-block-start: 2.2rem;
		height: 4.9rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 2rem;
		height: 4.2rem;
	}
}
.top-news-cat-text {
	text-transform: uppercase;
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: 1;
	letter-spacing: .2em;
	color: var(--cc-pinkgold);
	@media (width > 767px) {/* PC */
		font-size: 2.4rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 2rem;
	}
}
.top-news-cat-tag {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	margin-inline: auto 0;
	@media (width > 767px) {/* PC */
		width: 63%;
		gap: 1px;
	}
	@media (width <= 767px) {/* SP */
		width: 18.6rem;
		gap: .2rem;
	}
	> * {
		text-align: center;
		background-color: var(--cc-tag-A);
		border-radius: .2rem;
		@media (width > 767px) {/* PC */
			width: calc((100% - 1px) / 2);
      padding-block: .2rem;
      padding-inline: .3rem;
      font-size: .58em;
      height: 2.4rem;
		}
		@media (width <= 767px) {/* SP */
			width: calc((100% - .2rem) / 2);
			padding-block: .2rem;
			padding-inline: .2rem;
			font-size: 0.8rem;
			height: 2rem;
		}
	}
}
.top-news-text {
	@media (width > 767px) {/* PC */
		margin-block-start: 1.5rem;
		padding-block-start: 2.1rem;
		border-top: 1px solid var(--cc-pinkgold);
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 1.4rem;
	}
}
.top-news-title {
	line-height: 1.8;
	@media (width > 767px) {/* PC */
		font-size: 1.8rem;
		min-height: calc((1.8rem * 1.8) * 2);
	}
	@media (width <= 767px) {/* SP */
		font-size: 1.5rem;
		min-height: calc((1.5rem * 1.8) * 2);
	}
}
.top-news-desc {
	line-height: 2;
	@media (width > 767px) {/* PC */
		margin-block-start: 1.1rem;
		font-size: 1.2rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 0.7rem;
		font-size: 1.1rem;
	}
}
/* slideの設定 */
.top-news-slide {
	.splide__track {
		@media (width > 767px) {/* PC */
			padding-inline-start: 13rem;
			&::before {
				content: '';
				position: absolute;
				display: block;
				left: 0;
				top: 0;
				width: 13rem;
				height: 100%;
				background-color: var(--cc-back);
				z-index: 1;
			}
		}
	}
	.splide__slide {
	}
	.splide__arrows {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		z-index: 2;
		@media (width > 767px) {/* PC */
			flex-direction: column;
			left: 0;
			bottom: 0.7rem;
		}
		@media (width <= 767px) {/* SP */
			left: 1.7rem;
			bottom: -1.7rem;
			gap: 3rem;
		}
	}
	.splide__arrow {
		display: grid;
		place-content: center;
		@media (width <= 767px) {/* SP */

		}
		@media (hover) {
			& {
				transition: opacity 0.3s ease-out;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
	.splide__arrow--next {
		@media (width > 767px) {/* PC */
			position: relative;
			left: 0.7rem;
		}
	}
	.splide__arrow--prev {
		transform: scale(-1, 1);
		@media (width > 767px) {/* PC */
			position: relative;
			right: 0.7rem;
		}
	}
	svg {
		fill: var(--cc-line-A);
		@media (width > 767px) {/* PC */
			width: 2.4rem;
			height: 4rem;
		}
		@media (width <= 767px) {/* SP */
			width: 2.5rem;
		}
	}
	.splide__pagination {
		position: absolute;
		justify-content: flex-start;
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
		background-color: var(--cc-line-B);
		@media (width > 767px) {/* PC */
			transform: rotate(90deg);
            transform-origin: left top;
			top: 2.5rem;
			left: 1.2rem;
			width: 36rem;
			height: 2px;
		}
		@media (width <= 767px) {/* SP */
			bottom: 0;
			right: 0;
			width: 70vw;
		}
		li {
			display: flex;
            align-items: center;
			/* width: calc(100% / 8.8); */
			width: 100%;
			@media (width > 767px) {/* PC */
			}
			@media (width <= 767px) {/* SP */
			}
		}
		button {
			transition: background-color .3s;
			width: 100%;
			height: 2px;
			@media (width > 767px) {/* PC */
			}
			@media (width <= 767px) {/* SP */
			}
			&.is-active  {
				background-color: var(--cc-pinkgold);
			}
		}
	}
	&:not(.is-overflow) .splide__pagination {
		display: block;
	}
}
.top-news-nopost {
	text-align: center;
	@media (width > 767px) {/* PC */
		margin-block-start: 10rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 3.8rem;
	}
}
/* Salon
----------------------------------------------------------------------------- */
.top-salon {
	text-align: center;
	border-top: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-inline: auto;
		> * {
			width: 50%;
		}
		&::before {
			position: absolute;
			content: "";
			width: 1px;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			margin-inline: auto;
			background-color: var(--cc-line-A);
			z-index: 1;
		}
	}
	@media (width <= 767px) {/* SP */
		padding-block: 10rem 9rem;
	}
}
.top-salon-content {
	text-align: left;
	@media (width > 767px) {/* PC */
		width: 34rem;
		margin-inline: auto;
	}
	@media (width <= 767px) {/* SP */
		text-align: center;
		padding-inline: 3rem;
	}
}
.top-salon-heading {
	@media (width > 767px) {/* PC */
		padding-inline: 10.6rem;
	}
}
.top-salon-info {
	@media (width > 767px) {/* PC */
		margin-block-start: 8rem;
	}
	@media (width <= 767px) {/* SP */
		text-align: left;
		margin-block-start: 5.4rem;
	}
}

.top-salon-tel {
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	color: var(--cc-pinkgold);
	letter-spacing: 0.15em;
	line-height: 1;

	@media (width > 767px) {/* PC */
		padding-block: 1rem;
		font-size: 3rem;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 1.8rem;
		font-size: 2.4rem;
	}
	& a {
		display: block;
	}
}

.top-salon-address {
	line-height: 2;

	@media (width > 767px) {/* PC */
		font-size: 1.4rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 1rem;

		p:last-child {
			font-size: 1.2rem;
		}
	}
}

.top-salon-hours {
	line-height: 2;

	@media (width > 767px) {/* PC */
		font-size: 1.4rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 1.2rem;
	}
}
.top-salon-hours-text {
	&:nth-of-type(2) {
		@media (width > 767px) {/* PC */
			margin-left: 7.1rem;
		}
		@media (width <= 767px) {/* SP */
			margin-left: 6rem;
		}
	}
}

.top-salon-note {
	line-height: 2;
	margin-block-start: 0.8rem;

	@media (width <= 767px) {/* SP */
		margin-block-start: 1.8rem;
		font-size: 1rem;
	}
}

.top-salon-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 7.4rem;
		text-align: center;
	}
}
.top-salon-pict {
	@media (width > 767px) {/* PC */
		padding: 4rem;
	}
	@media (width <= 767px) {/* SP */
		padding-inline: 3rem;
		margin-block-start: 8rem;
	}
}
.top-salon-pict__01 {
	& img {
		@media (width > 767px) {/* PC */
			aspect-ratio: 720/420;
			width: 100%;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 315/180;
			width: 100%;
		}
	}
}
.top-salon-map {
	@media (width > 767px) {/* PC */
		margin-block-start: 4rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 1rem;
	}
	iframe {
		width: 100%;
		@media (width > 767px) {/* PC */
			aspect-ratio: 720/420;
		}
		@media (width <= 767px) {/* SP */
			aspect-ratio: 315/180;
		}
	}
}
/* instagram
----------------------------------------------------------------------------- */
.top-instagram {
	text-align: center;
	border-top: 1px solid var(--cc-line-A);
	@media (width > 767px) {/* PC */
		padding-block: 16rem;
		text-align: center;
	}
	@media (width <= 767px) {/* SP */
		padding-block: 10rem 9rem;
	}
}
.top-instagram-content {
	overflow: hidden;
	@media (width > 767px) {/* PC */
		margin-block-start: 8rem;
	}
	@media (width <= 767px) {/* SP */
		margin-block-start: 6rem;
	}
}
/* .top-instagram-loop { */
#top-instagram-loop {
	display: flex;
	overflow: hidden;
	width: 100%;
	/* instagram feed 内側のコンテナ */
	.sbi[data-feedid] #sbi_images {
		padding: 0;
		width: 100%;
		display: flex;
		flex-shrink: 0;
		@media (width > 767px) {/* PC */
			gap: 2rem!important;
		}
		@media (width <= 767px) {/* SP */
			gap: 1rem!important;
		}
	}
	/* .top-instagram-item { */
	#sb_instagram #sbi_images .sbi_item {
		aspect-ratio: 9/16;
		@media (width > 767px) {/* PC */
			width: 21.6rem;
		}
		@media (width <= 767px) {/* SP */
			width: 19.8rem;
		}
		& img {
			width: 100%;
			aspect-ratio: 9/16;
			height: auto;
		}
	}
	#sb_instagram #sbi_images .sbi_item a {
		display: block;
		width: 100%;
		@media (hover) {
			& {
				transition: opacity 0.3s ease-out;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
}

.top-instagram-btn {
	@media (width > 767px) {/* PC */
		margin-block-start: 8rem;
	}
	.c-btn-more {
		&::before {
			content: "";
			position: absolute;
			display: block;
			top: 0;
            bottom: 0;
            margin-block: auto;
			background-image: url('/assets/img/icon-instagram-pg.svg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			@media (width > 767px) {/* PC */
				left: 2.6rem;
				width: 1.6rem;
				height: 1.6rem;
			}
			@media (width <= 767px) {/* SP */
				left: 2rem;
				width: 1.2rem;
				height: 1.2rem;
			}
		}
	}
}