@charset "UTF-8";
/* ===========================================
 * 変数
 * ======================================== */
:root {
	--font-family-main: "Noto Sans JP", sans-serif;
	--color-object-main: #f1e8dc;
	--color-object-morning: #f29600;
	--color-object-afternooon: #84c1ea;
	--color-object-evening: #ef9098;
	--color-object-bedroom: #8d80bb;
	--color-text-black: #231815;
	--color-text-white: #ffffff;
	--scale: min(calc(1200px / 750), calc(100vw / 750));
}

/* ===========================================
 * RESET
 * ======================================== */
#fiber_heat {
	width: min(100%, 1200px);
	margin-inline: auto;
	background-color: var(--color-object-main);
	overflow: hidden;
}
#fiber_heat figure {
	margin: 0;
}
#fiber_heat ul,
#fiber_heat ol {
	list-style: none;
}
#fiber_heat img {
	width: 100%;
	margin-inline: auto;
}
/* #fiber_heat button {
	padding: 0;
	margin: 0;
	font-size: 0;
	border: none;
	background: transparent;
	display: flex;
} */

/* ===========================================
 * SP・PC
 * ======================================== */
.sp {
	display: none!important;
}
.pc {
	display: inline-block!important;
}
@media screen and (max-width: 767px) {
	.sp {
		display: block!important;
	}
	.pc {
		display: none!important;
	}
}

/* ===========================================
 * OTHER
 * ======================================== */
.active {
	display: block;
}
.inactive {
	pointer-events: none;
}

/* ===========================================
 * TOP
 * ======================================== */
.top__wrap {
	padding-block: 13px;
	margin-inline: auto;
	background-color: #ffffff;
}
.top__inner {
	margin-inline: auto;
	padding-inline: 13px;
}
.top__kv {
	width: fit-content;
	margin-inline: auto;
	display: block;
}
@media screen and (max-width: 767px) {
	.top__inner {
		margin-inline: auto;
		padding-inline: 13px;
	}
	.top__kv {
		border-radius: calc(24 * var(--scale));
		overflow: hidden;
	}
}

/* ===========================================
 * INTRO
 * ======================================== */
.intro__wrap {
	padding-block: calc(50 * var(--scale)) calc(135 * var(--scale));
	background: center 40px / 100% auto no-repeat url(../img/asset_bg.png);
}
.intro__inner {
	margin-inline: auto;
	width: calc(100% - calc(80 * 2 * var(--scale)));
}
.intro__text {
	margin-bottom: calc(100 * var(--scale));
	display: block;
}
.intro__navi__head {
	width: calc(154 * var(--scale));
	margin-inline: auto;
	margin-bottom: calc(77 * var(--scale));
}
.intro__navi__list__container {
	display: grid;
	gap: calc(35 * var(--scale));
}
.intro__navi__list {
	display: block;
	&:nth-child(odd) {
		margin-right: calc(40 * var(--scale));
	}
	&:nth-child(even) {
		margin-left: calc(40 * var(--scale));
	}
}

/* ===========================================
 * SCENE
 * ======================================== */
.scene__wrap {
	margin-bottom: calc(110 * var(--scale));
	position: relative;
}
.scene__top {
	display: block;
}
#bedroom .scene__top {
	padding-bottom: calc(55 * var(--scale));
	background: linear-gradient(to bottom, transparent 50%, var(--color-object-bedroom) 50%);
}
/* movie */
/* ======================================= */
.scene__movie {
	margin-top: -1px;
	padding-block: calc(70 * var(--scale)) calc(50 * var(--scale));
}
#morning .scene__movie {
	background-color: var(--color-object-morning);
}
#afternoon .scene__movie {
	background-color: var(--color-object-afternooon);
}
#evening .scene__movie {
	background-color: var(--color-object-evening);
}
#bedroom .scene__movie {
	background-color: var(--color-object-bedroom);
}
.scene__movie__title {
	width: calc(154 * var(--scale));
	margin-inline: auto;
	margin-bottom: calc(27 * var(--scale));
	display: block;
}
.scene__youtube__container {
	width: calc(560 * var(--scale));
	margin-inline: auto;
	border-radius: calc(10 * var(--scale));
	overflow: hidden;
}
.scene__youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block!important;
}
/* products */
/* ======================================= */
.scene__products {
	padding-block: calc(60 * var(--scale)) calc(70 * var(--scale));
}
#morning .scene__products  {
	background-color: color-mix(in srgb, var(--color-object-morning) 70%, transparent);
}
#afternoon .scene__products  {
	background-color: color-mix(in srgb, var(--color-object-afternooon) 70%, transparent);
}
#evening .scene__products  {
	background-color: color-mix(in srgb, var(--color-object-evening) 70%, transparent);
}
#bedroom .scene__products  {
	background-color: color-mix(in srgb, var(--color-object-bedroom) 70%, transparent);
}
.scene__products__group {
	margin-bottom: calc(90 * var(--scale));
	&:last-of-type {
		margin-bottom: calc(60 * var(--scale));
	}
}
.scene__products__title {
	width: fit-content;
	margin-left: auto;
	margin-bottom: calc(55 * var(--scale));
	display: grid;
	grid-template-columns: 5fr 16fr;
}
.scene__products__title__icon {
	width: calc(150 * var(--scale));
	aspect-ratio: 1 / 1;
	display: block;
}
.scene__products__title__text {
	width: calc(480 * var(--scale));
	display: block;
}
.scene__products__comment {
	display: block;
}
.scene__products__item__container {
	width: calc(680 * var(--scale));
	margin-inline: auto;
	margin-bottom: calc(90 * var(--scale));
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(70 * var(--scale));
}
.scene__products__item {
	list-style: none;
	display: block;
}
.scene__products__item__img {
	border-radius: 9999px;
	overflow: hidden;
}
.scene__products__item__inner {
	margin-top: calc(25 * var(--scale));
}
.scene__products__item__sex {
	width: fit-content;
	padding: 0.3em 0.7em;
	margin-inline: auto;
	margin-bottom: 0.5em;
	border-radius: 3px;
	font: 500 calc(18 * var(--scale)) / 1.0 var(--font-family-main);
	color: var(--color-text-white);
	border: 1px solid #ffffff;
	display: block;
	&[data-type="women"] {
		background-color: #ec6b67;
	}
	&[data-type="men"] {
		background-color: #6b9cc2;
	}
	&[data-type="boy"] {
		background-color: #b3c666;
	}
	&[data-type="girl"] {
		background-color: #f19ec2;
	}
	&[data-type="kids"] {
		background-color: #fbb03b;
	}
	&[data-type="interior"] {
		background-color: #c7b299;
	}
}
.scene__products__item__name {
	text-align: center;
	font: 500 calc(26 * var(--scale)) / 1.3 var(--font-family-main);
	color: var(--color-text-black);
	display: block;
}
.scene__products__item__price {
	text-align: center;
	font: 500 calc(26 * var(--scale)) / 1.3 var(--font-family-main);
	color: var(--color-text-black);
	display: block;
	> span {
		font-size: 80%;
		color: var(--color-text-black);
		display: block;
	}
}
.scene__products__item__size {
	width: fit-content;
	margin: 0.5em auto;
	padding-inline: 0.7em;
	font: 500 calc(18 * var(--scale)) / calc(22 * var(--scale)) var(--font-family-main);
	color: var(--color-text-black);
	background-color: #ffffff;
	display: block;
}
.scene__products__item__number {
	width: fit-content;
	margin: 0.25em auto;
	padding-inline: 0.7em;
	font: 500 calc(18 * var(--scale)) / 1.0 var(--font-family-main);
	color: var(--color-text-black);
	display: block;
}

/* ===========================================
 * PROFILE
 * ======================================== */
.profile__wrap {
	padding-block: calc(165 * var(--scale)) calc(70 * var(--scale));
}
.profile__inner {
	width: calc(100% - (20 * 2 * var(--scale)));
	margin-inline: auto;
}
.profile__head {
	width: calc(196 * var(--scale));
	margin-inline: auto;
	margin-bottom: calc(45 * var(--scale));
}
.profile__img {
	margin-bottom: calc(80 * var(--scale))!important;
	border-radius: calc(12 * var(--scale));
	overflow: hidden;
}
.profile__person___container {
	margin-bottom: calc(90 * var(--scale));
	display: grid;
	gap: calc(95 * var(--scale));
}
.profile__person {
	display: grid;
	grid-template-columns: 300fr 380fr;
	gap: calc(30 * var(--scale));
}
.profile__person__name {
	font: 700 calc(31 * var(--scale)) / 1.0 var(--font-family-main);
	letter-spacing: 0.05em;
	color: #534741;
}
.profile__person__spec {
	margin-block: 1em;
	font: 400 calc(18 * var(--scale)) / 1.0 var(--font-family-main);
	color: #534741;
}
.profile__person__text {
	font: 400 calc(18 * var(--scale)) / 1.6 var(--font-family-main);
	color: #534741;
}
.profile__making {
	margin-bottom: calc(80 * var(--scale));
}
.profile__making__head {
	width: calc(192 * var(--scale));
	margin-inline: auto;
	margin-bottom: calc(30 * var(--scale));
	display: block;
}
.profile__btn__container {
	display: grid;
	gap: calc(20 * var(--scale));
}
.profile__btn {
	border-radius: 9999px;
	overflow: hidden;
	display: block;
}

/* ===========================================
 * JS
 * ======================================== */

/* slide */
/* ======================================= */
/* .scene__slide__container {
	padding-bottom: min(calc(40 / 750 * 100vw ), calc(40px * 1200 / 750));
}
.scene__slide__container:last-child {
	padding-bottom: 0;
}
.slide__img {
	width: min(calc(328 / 750 * 100vw ), calc(328px * 1200 / 750));
	margin-bottom: min(calc(20 / 750 * 100vw), calc(20px * 1200 / 750));
	display: block;
}
.slide__text {
	margin-inline: auto;
	margin-top: 0.8em;
	text-align: center;
	font: 500  min(calc(26 / 750 * 100vw ), calc(26px * 1200 / 750)) / 1.25 var(--font-main);
	color: #231815!important;
	opacity: 0;
	transition: 0.3s ease;
}
.slide__text > span {
	margin-top: 0.4em;
	color: #231815!important;
	display: block;
}
.is-active > .slide__text {
	opacity: 1;
} */
/* arrows */
/* ======================================= */
/* .your-class-arrow {} */
/* .your-class-arrow {} */
/* .your-class-prev {
	width: min(calc(25 / 750 * 100vw ), calc(25px * 1200 / 750));
	height: min(calc(28 / 750 * 100vw ), calc(28px * 1200 / 750));
	background-color: transparent;
	top: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	left: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	opacity: 1;
}
.your-class-next {
	width: min(calc(25 / 750 * 100vw ), calc(25px * 1200 / 750));
	height: min(calc(28 / 750 * 100vw ), calc(28px * 1200 / 750));
	background-color: transparent;
	top: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	right: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	opacity: 1;
} */

.splide .scene__products__item__inner {
	opacity: 0;
	transition: 0.3s ease;
}
.splide  .is-active > .scene__products__item__inner {
	opacity: 1;
}
.afternoon__slider--listB,
.afternoon__slider--listC,
.evening__slider--listA,
.bedroom__slider--listA,
.bedroom__slider--listB {
	margin-bottom: calc(90 * var(--scale));
}

.your-class-prev {
	width: calc(40 * var(--scale));
	aspect-ratio: 1 / 1;
	background-color: transparent;
	top: calc(200 * var(--scale));
	left: calc(160 * var(--scale));
	opacity: 1;
}
.your-class-next {
	width: calc(40 * var(--scale));
	aspect-ratio: 1 / 1;
	background-color: transparent;
	top: calc(200 * var(--scale));
	right: calc(160 * var(--scale));
	opacity: 1;
}