@charset "utf-8";

@scope (.main_wrapper) {

	html,
	body,
	div,
	span,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	abbr,
	address,
	cite,
	code,
	del,
	dfn,
	img,
	ins,
	kbd,
	q,
	samp,
	strong,
	sub,
	sup,
	var,
	b,
	i,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	dialog,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		vertical-align: baseline;
		background: transparent;
		font-family: "Noto Sans JP", "Futura PT", sans-serif;
		font-weight: 400;
		line-height: 1.5;
		-ms-word-wrap: break-word;
		word-wrap: break-word;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}


article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

br {
	line-height: 0;
}

ul li {
	list-style: none;
}

a {
	display: inline-block;
	text-decoration: none;
	word-break: break-word;
}

a:hover {
	opacity: 0.5;
}

input,
select,
textarea,
button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}

input,
select {
	vertical-align: middle;
}

button {
	cursor: pointer;
}

img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.only_pc,
.only_tb {
	display: none;
}

.only_sp {
	display: block;
}

.flex {
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

#background-section {
	transition: background-image 1s ease-in-out;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.morning {
	background-image: url('../../assets26ss/images/img_morning.jpg');
}

/*11:00 AM to 4:59 PM */
.day {
	background-image: url('../../assets26ss/images/img_morning.jpg');
}

/*5:00 PM to 7:59 PM */
.evening {
	background-image: url('../../assets26ss/images/img_evening.png');
}

/*8:00 PM to 4:59 AM*/
.night {
	background-image: url('../../assets26ss/images/img_night.jpg');
}

.center_col {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	isolation: isolate;
}

.right-column-images {
	height: 100%;
	position: relative;
}

.img_right {
	bottom: 0;
	width: 100%;
	height: 100%;
	left: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
	visibility: hidden;
}

.img_right.is-active {
	opacity: 1;
	visibility: visible;
}

.mv_wrap img {
	vertical-align: middle;
}

.category_gp {
	width: 83%;
	margin: 0 auto;
	justify-content: center;
}

.category_wrap_left {
	width: 26.563vw;
	margin: 0 auto;
}

.category_wrap {
	width: 100%;
	bottom: 5%;
	margin: 0 auto;
}

.category_wrap {
	padding-top: 1.823vw;
}

.catg_list {
	width: 45%;
	min-width: 9.635vw;
	margin-right: 7.563vw;
	margin-bottom: 9.042vw;
	text-align: center;
}

.js-scrollable {
	position: relative;
}

.catg_list:nth-child(even) {
	margin-right: 0;
}

.ttl_catg {
	color: #FFF;
	font-family: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
	font-size: 1.198vw;
	font-weight: 400;
	margin-bottom: 0.521vw;
}

.catg_list h3 {
	font-family: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
	color: #FFF;
	font-size: 4vw;
	font-weight: 700;
}

.catg_img {
	margin-bottom: 2vw;
}

.catg_list p {
	color: #FFF;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.729vw;
	font-weight: 500;
	margin: 0.417vw 0 0.26vw;
}

.video_wrap {
	width: 100%;
	background: url(/products/mikihouse/assets26ss/images/ajax-loader.gif) no-repeat center center;
}

.video_wrap video {
	display: block;
	width: 100%;
}

.ttl_catag {
	width: 90.76vw;
	margin: 0 auto 1.563vw;
}

.txt_catag {
	font-size: 4.042vw;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
	margin-bottom: 8.823vw;
}

.txt_mod01 {
	font-size: 3.625vw;
	color: #DB372D;
	text-align: center;
	margin-bottom: 0.26vw;
	font-family: "century-old-style-std", serif;
	font-weight: 400;
}

.ttl_mod_h3 {
	font-size: 7.5vw;
	color: #DB372D;
	text-align: center;
	margin-bottom: 4.563vw;
	font-family: "century-old-style-std", serif;
	font-weight: 400;
}

.pixelseries_wrap .txt_mod01,
.pixelseries_wrap .ttl_mod_h3 {
	color: #00B9C2;
}

.classic_wrap .txt_mod01,
.classic_wrap .ttl_mod_h3 {
	color: #78534A;
}

.logo_wrap .txt_mod01,
.logo_wrap .ttl_mod_h3 {
	color: #EF7611;
}

.mikihouse_seri_wrap .txt_mod01,
.mikihouse_seri_wrap .ttl_mod_h3 {
	color: #82A5C2;
}

.Silhouette .txt_mod01,
.Silhouette .ttl_mod_h3 {
	color: #D9A46C;
}

/* ----------------------- */
.sec_mod_volume {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
}

section {
	overflow: hidden;
}

.sec_mod_volume .vol_mod_grid {
	position: relative;
	z-index: 2;
	align-items: center;
}

.sec_package_box {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	padding-top: 4vw;
}

.sec_package_box .panel {
	width: 32vw !important;
	position: relative;
}

.slick-slide {
	position: relative;
}

.sec_package_box .panel .color_volume_box img {
	width: 100%;
	object-fit: cover;
}

.link_packg {
	width: 100%;
	display: inline-block;
}

#panel01.panel .color_volume_detail {
	opacity: 0;
}

#panel01.panel.active .color_volume_detail {
	animation: fadeInLeftPanel 0.4s ease-out forwards;
	animation-delay: 0.2s;
}

#panel02.panel .color_volume_detail {
	opacity: 0;
}

#panel02.panel.active .color_volume_detail {
	animation: fadeInLeftPanel 0.4s ease-out forwards;
	animation-delay: 0.2s;
}

#panel03.panel .color_volume_detail {
	opacity: 0;
}

#panel03.panel.active .color_volume_detail {
	animation: fadeInLeftPanel 0.4s ease-out forwards;
	animation-delay: 0.2s;
}

.vol_grid_rgt {
	width: 100%;
}

.vol_grid_rgt .mod_p_box {
	width: 100%;
}

.mod_p_box img {
	vertical-align: middle;
}

.special {
	position: relative;
	overflow: hidden;
	height: 100vw;
}

.special img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.special img.show {
	opacity: 1;
}

.popup-content {
	position: relative;
	backdrop-filter: blur(0.417vw);
	-webkit-backdrop-filter: blur(0.417vw);
	background-color: rgba(255, 255, 255, 0.5);
	padding: 1.563vw 1.042vw;
	box-shadow: 0 0.521vw 1.302vw rgba(0, 0, 0, 0.1);
	width: 75vw;
	height: 96%;
	left: -5vw;
}

.popup-close {
	position: absolute;
	top: 0.5vw;
	right: 0.625vw;
	width: 6vw;
	cursor: pointer;
	z-index: 20;
}

.popup-overlay {
	position: fixed;
	top: 0vw;
	width: 89vw;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	background-size: cover;
	background-position: center;
	justify-content: center;
	align-items: center;
	padding: 1.042vw;
}

.shop-link {
	display: block;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgb(229 231 235);
	border-radius: 6.604vw;
	padding: 1vw 2vw;
	text-align: center;
	font-size: 3.3vw;
	font-weight: 500;
	color: #000000;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	margin: 0 0 1vw 0 !important;
}

.over_one_content {
	width: 70vw;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.shop-link:hover {
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0.208vw 0.521vw rgba(0, 0, 0, 0.05);
}

.group-title {
	font-size: 3.5vw;
	font-weight: 500;
	margin-bottom: 1vw;
	color: #000000;
	user-select: none;
}

.ml-2 {
	width: 3.5vw;
	height: 3.5vw;
	background: url(../../assets26ss/images/icon_link.png) no-repeat center;
	background-size: cover;
	display: inline-block;
	position: relative;
	top: 0.8vw;
	right: -1.26vw;
}

.one_over {
	margin-bottom: 3vw;
}

.only_sp .pan_wrap {
	margin-bottom: 2vw;
}

.only_sp .arrow_icon,
.link_pan {
	font-size: 3vw;
	color: #000000;
	margin-left: 1vw;
	margin-right: 1vw;
}

.sec_package_box .panel {
	width: 85vw !important;
	padding: 0vw 3.042vw 0vw;
}

.js-scrollable {
	position: relative;
}

.c_swipeHint.js_swipeHint {
	width: 27vw !important;
	height: 19vw !important;
	top: 50%;
	left: 25%;
	background: #000000b3;
	-webkit-border-radius: 1vw;
	border-radius: 1vw;
	transform: translate(50%, -50%);
}

.c_swipeHint {
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: var(--transition-default);
	pointer-events: none;

	&.hide_swipeHint {
		opacity: 0 !important;
		visibility: hidden;
	}
}

.c_swipeHint_img {
	width: 50%;
	margin: 0 auto;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.c_swipeHint_img img {
	width: 80%;
	animation: scroll-hint-appear 1.2s linear;
	animation-iteration-count: 5;
}

/* NEW ANIMATION KEYFRAMES */
@keyframes scroll-hint-appear {
	0% {
		transform: translateX(40px);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	50%,
	100% {
		transform: translateX(-40px);
		opacity: 0;
	}
}

#goTopBtn {
	width: 30vw;
	height: 30vw;
	display: none;
	position: fixed;
	bottom: 13vw;
	right: -4vw;
	z-index: 99;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	font-size: 18px;
}

:target,
.pucchi_wrap[pucchi],
.pixelseries_wrap[pixelseries],
.green[green],
.classic_wrap[classic],
.logo_wrap[logo],
.mikihouse_seri_wrap[seri],
.Silhouette[Silhouette] {
	scroll-margin-top: 300px;
}

/* For links WITHOUT valid href - NO border and NO pointer events */
.over_one_content a:not(.button):not([href]),
.over_one_content a:not(.button)[href=""],
.over_one_content a:not(.button)[href="#"],
.over_one_content a:not(.button)[href*="javascript:"] {
	border-bottom: none !important;
	pointer-events: none !important;
	cursor: default;
}

.bg-white {
	background-color: #ffffff;
}

#section1,
.pucchi_wrap {
	background: linear-gradient(to bottom, #FFE3F4, #EDFBFC);
}

#section1 .vol_mod_grid {
	background: linear-gradient(to bottom, #FFE3F4, #f9e7f2);
}

#section2,
.green {
	background: linear-gradient(to bottom, #57D3A1, #EDFBFC);
}

#section2 .vol_mod_grid {
	background: linear-gradient(to bottom, #57D3A1, #95dfc1);
}

.bg-green,
.pixelseries_wrap {
	background: linear-gradient(to bottom, #EDFBFC, #99E9ED);
}

#section3 .vol_mod_grid {
	background: linear-gradient(to bottom, #cefcff, #EDFBFC);
}

#section4,
.classic_wrap,
#section4 .vol_mod_grid,
.bg-orange {
	background: #FDF2DF;
}

#section5,
.logo_wrap,
#section5 .vol_mod_grid,
.stick_three {
	background: #ffffff;
}

#section6,
.mikihouse_seri_wrap,
#section6 .vol_mod_grid,
.stick_four {
	background: #F2E6D6;
}

#section7,
.Silhouette,
.z-onethr .vol_mod_grid,
.z-onefour {
	background: #F7F7F7;
}

.pucchi_wrap,
.pixelseries_wrap,
.classic_wrap,
.mikihouse_seri_wrap,
.Silhouette,
.logo_wrap {
	padding-top: 4.5vw;
}

.vol_grid_rgt {
	padding: 1.5em 0 5vw;
}

.js-scrollable {
	padding-bottom: 3vw;
}

.stick {
	position: relative;
}

.pixelseries_wrap {
	position: relative;
}

.z-onefive,
.page-width {
	z-index: 70;
	position: relative;
	background-color: #ffffff;
}

.image-bottom img {
	height: 100%;
	object-fit: cover;
}

.top_wrap {
	position: relative;
}

.txt_wrap {
	position: absolute;
	bottom: 31.2vw;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.txt_wrap .ttl_mod_h3 {
	color: #ffffff;
	font-size: 8.533vw;
}

.txt_wrap .ttl_top {
	width: 48.533vw;
	margin: 0 auto;
}

.sidebar_language {
	display: flex;
	gap: 30px;
	background: #f9f8c3;
	justify-content: center;
	padding: 1em 0;
}

.sidebar_language_link {
	display: flex;
	align-items: center;
	gap: 5px;
}

.sidebar_language_link_text {
	font-family: "Century Gothic", "Montserrat", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.sidebar_language_icon {
	font-size: 12px;
	font-weight: 400;
}


@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v290/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material_symbols_outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

.stickey {
	position: sticky;
	top: 60px;
}

@media only screen and (min-width:768px) {

	.only_pc,
	.only_tb {
		display: block;
	}

	.only_sp {
		display: none;
	}

	.three_col_layout {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.left_col {
		width: 30%;
		width: 31.25vw;
		height: 100vh;
		background: url(../../assets26ss/images/img_siderbar_left.jpg) no-repeat center;
		background-size: cover;
		position: fixed;
		padding: 1.563vw;
		padding-top: 120px;
		padding-bottom: 50px;
		z-index: 5;
		left: 0;
		top: 0;
	}

	.sidebar_inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	.left_col.active .pan_wrap {
		opacity: 0;
		visibility: hidden;
	}

	.right_col {
		width: 30%;
		width: 31.25vw;
		height: 100vh;
		position: fixed;
		right: 0;
		z-index: 99;
	}

	.center_col {
		width: 60%;
		width: 37vw;
        margin-top: 104px;
	}

	.ttl_catag {
		width: 12.76vw;
	}

	.txt_catag {
		font-size: 1.042vw;
		margin-bottom: 1.823vw;
	}

	.center_col .catg_list {
		width: 45%;
		min-width: 8.635vw;
	}

	.category_gp {
		width: 20.833vw;
		justify-content: center;
	}

	.category_wrap_left .catg_list {
		width: 7.813vw;
		min-width: auto;
		margin-bottom: 0.521vw;
	}

	.category_wrap_left .catg_list .catg_img {
		margin-bottom: 0.3vw;
	}

	.category_wrap_left .catg_list h3 {
		color: #0D1C2E;
	}

	.catg_list {
		width: 8.635vw;
		margin-right: 1.563vw;
		margin-bottom: 1.042vw;
	}

	.category_wrap_left .catg_list:last-child {
		margin-bottom: 0;
	}

	.catg_list p {
		font-size: 0.729vw;
		margin: 0.417vw 0 0.26vw;
	}

	.catg_list h3 {
		font-size: 0.833vw;
	}

	.category_wrap {
		width: 26.563vw;
	}

	.pucchi_wrap,
	.pixelseries_wrap,
	.classic_wrap,
	.mikihouse_seri_wrap,
	.Silhouette,
	.logo_wrap {
		padding-top: 1.5vw;
	}

	#section2 .vol_grid_rgt {
		margin: 1vw auto 0vw;
	}

	#section1 .vol_grid_rgt {
		width: 90%;
		margin: 0 auto 0vw;
	}

	.ttl_mod_h3 {
		font-size: 2vw;
		margin-bottom: 1.5vw;
	}

	.txt_mod01 {
		font-size: 0.825vw;
		margin-bottom: -0.5vw;
	}

	.sec_package_box {
		padding-top: 0;
	}

	.sec_package_box .panel {
		width: 29vw !important;
		padding: 1.042vw 1.042vw 1.042vw;
	}

	.slick-list.draggable {
		padding: 0 !important;
	}

	.shop-link {
		border-radius: 2.604vw;
		padding: 0.45vw 1vw;
		font-size: 0.9vw;
		margin: 0 0 0.5vw 0 !important;
	}

	.popup-close {
		top: 0.1vw;
		right: 0.1vw;
		width: 2.5vw;
		z-index: 20;
	}

	.ml-2 {
		width: 1.2vw;
		height: 1.2vw;
		top: 0.208vw;
		right: -0.26vw;
	}

	.group-title {
		font-size: 1vw;
		margin-bottom: 0.5vw;
		display: inline-block;
	}

	.one_over {
		margin-bottom: 0.5vw;
	}

	.arrow_icon,
	.link_pan {
		font-weight: 500;
		margin-left: 0.156vw;
		margin-right: 0.156vw;
		color: #FFF;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 1.2rem;
		font-style: normal;
		letter-spacing: 0.04em;
		line-height: 1.58333;
		opacity: 0.8;
	}

	.slick-slide {
		position: relative;
	}

	.c_swipeHint.js_swipeHint {
		width: 10vw !important;
		height: 7vw !important;
		top: 50%;
		left: 26%;
		-webkit-border-radius: .5vw;
		border-radius: .5vw;
	}

	.c_swipeHint {
		position: absolute;
		z-index: 2;
		opacity: 0;
		transition: var(--transition-default);
		pointer-events: none;
	}

	.c_swipeHint.hide_swipeHint {
		opacity: 0 !important;
		visibility: hidden;
	}

	.c_swipeHint_img img {
		width: 50%;
	}

	.popup-content {
		position: relative;
		backdrop-filter: blur(0.417vw);
		-webkit-backdrop-filter: blur(0.417vw);
		background-color: rgba(255, 255, 255, 0.5);
		padding: 1.563vw 1.042vw;
		box-shadow: 0 0.521vw 1.302vw rgba(0, 0, 0, 0.1);
		width: 27vw;
		height: 96%;
		left: 0;
	}

	.popup-overlay {
		width: 27vw;
	}

	.over_one_content {
		width: 23vw;
	}

	#goTopBtn {
		width: 10vw;
		height: 10vw;
		bottom: 1vw;
		right: 30vw;
	}

	.special {
		position: relative;
		overflow: hidden;
		height: 25vw;
	}

	#section1,
	#section2,
	#section3,
	#section4,
	#section5,
	#section6,
	#section7 {
		padding-top: 1vw;
	}

	.vol_grid_rgt {
		padding: 1em 0 0vw;
	}

	#section1,
	.pucchi_wrap {
		background: linear-gradient(to bottom, #FFE3F4, #EDFBFC);
	}

	.sec01 .vol_mod_grid {
		background: linear-gradient(to bottom, #FFE3F4, #FFE3F4);
	}

	#section2,
	.green {
		background: linear-gradient(to bottom, #57D3A1, #EDFBFC);
	}

	.sec02 .vol_mod_grid {
		background: linear-gradient(to bottom, #57D3A1, #57D3A1);
	}

	#section3,
	.pixelseries_wrap,
	.stick_two {
		background: linear-gradient(to bottom, #EDFBFC, #99E9ED);
	}

	.sec03 .vol_mod_grid {
		background: linear-gradient(to bottom, #cefcff, #EDFBFC);
	}

	.green {
		padding-top: 0vw;
	}

	.js-scrollable {
		padding-bottom: 0vw;
	}

	.catg_img {
		margin-bottom: 0.5vw;
	}

	.catg_img img {
		display: block;
	}

	.txt_wrap {
		bottom: 11.7vw;
	}

	.txt_wrap .ttl_mod_h3 {
		font-size: 3.2vw;
	}

	.txt_wrap .ttl_top {
		width: 18.2vw;
	}

	.stickey {
		position: sticky;
		top: 104px;
	}

}

/* Parallel CSS */
html,
body {
	scroll-behavior: auto !important;
}

.pin-spacer {
	width: 100% !important;
}

.parallax-wrap {
	position: relative;
	overflow: hidden;
}

.footer__links-login {
    text-align: center;
    padding: 30px 0;
}

.footer__links-login svg {
    display: inline-block;
}