@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans+JP:wght@400;500&display=swap');
:root	{
	--color-black: #121315;
	--color-white: #fff;
	--color-prm: #1F716A;
	--color-grey: #BBBBBB;
	--font-jp: "IBM Plex Sans JP", sans-serif;
	--font-entt: "neue-haas-unica", sans-serif;
	--font-enmo: "IBM Plex Mono", monospace;
}

/* ------------ FONT
.ibm-plex-mono-regular {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}
.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-jp-medium {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}

------------- */

@media (max-width: 1000px) {
 .result_suggest_title .result_suggest_list { margin: 0 -1.5rem!important; }
}
.search_feature.active, 
.search_styling.active, 
.result_suggest	{ background-color: #fff; position: relative; z-index: 2; }
search_box	{ z-index: 3; }
.header_caution { height: 48px; }
#site_body	{ overflow: visible; }
#contents { width: 100%!important; max-width: 100%!important; padding: 0; margin: 0; }
#pisss { width: 100%!important; max-width: 100%!important; }
#pi { width: 100%!important; max-width: 100%!important; margin: 0; background-color: transparent!important; padding: 0; }
#pi > img { display: none!important; }
@media (min-width: 768px)	{
	.result_suggest_title .result_suggest_list { margin: 0 -1.5rem 0; }
}
.section_main, 
.seach_sort_wrapper,
.search_contents,
.bread	{ background-color: #fff; }
.seach_sort_wrapper,
.search_contents,
.bread,
.store_footer	{ position: relative; z-index: 2; }
.result_suggest	{ margin: 0; }
.pi_description	{ padding: 0!important; background-color: #fff; }
.pi_lgzformat	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0; margin: 0; color: var(--color-black); font-family: var(--font-jp); letter-spacing:0; position: relative; container-type: inline-size; }
.pi_lgzformat div	{ letter-spacing:0; }
.pi_lgzformat *	{ letter-spacing:0; font-weight: 400; font-style: normal; font-size:14px; line-height:1.75; font-feature-settings: normal!important; -webkit-text-size-adjust:100%; -webkit-font-smoothing: antialiased; }
.pi_lgzformat .en	{ font-family: var(--font-entxt); font-weight: 400; font-style: normal; }
.pi_lgzformat img, 
.pi_lgzformat picture	{ width: 100%; height: auto; vertical-align: bottom; line-height: 1;  }
.pi_lgzformat ul:before,
.pi_lgzformat ol:before,
.pi_lgzformat dl:before, 
.pi_lgzformat ul:after, 
.pi_lgzformat ol:after, 
.pi_lgzformat dl:after	{ display: none!important; }
.pi_lgzformat img	{ width: 100%; vertical-align: bottom; line-height: 0; }
.pi_lgzformat .small {font-size:80%;}
.pi_lgzformat .center-text	{ text-align: center; }
.pi_lgzformat_inner	{ width: 100%; container-type: inline-size; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.contanc	{ width: 100%; height: 0px; transform: translateY(-200px); }

/* ------------ ANIMATION ------------- */
.scrollIn	{ opacity: 0; transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
.scrollIn.active	{ opacity: 1; -webkit-transition-delay: .3s; transition-delay: .3s; }

/* ------------ MAIN AREA ------------- */
.main_wrapper { display: grid; width: 100%; box-sizing: border-box; position: relative; }
.main_wrapper > strong	{ position: absolute; top: 4.266cqw; right: 2.266cqw; width: 13.7333cqw; display: flex; z-index: 2; }
.main_panel { width: 100%; height: 100%; overflow: hidden; position: relative; }
.main_panel::after	{ content:""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; width: 100%; height: 100%; z-index: 5; transition: transform .6s cubic-bezier(.76, 0, .24, 1); }
.autoStart .main_panel::after	{ transform: translateX(100%); -webkit-transition-delay: .3s; transition-delay: .3s; }

.panelA { grid-area: area1; }
.panelB { grid-area: area2; }
.panelC { grid-area: area3; }
.panelC > h1	{ position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: 37.4cqw; line-height: 1; display: flex; z-index: 2; }
@media (max-width: 767.9px)	{ 
	.panelC > h1	{ top: 46%; width: 93cqw; }
}
.panelD { grid-area: area4; }
@media (max-width: 767px) {
	.main_wrapper { aspect-ratio: 375 / 617; gap: 1.333cqw; }
	.main_wrapper {
		grid-template-columns: 74.13% 1fr;
		grid-template-rows: 21.23% 1fr 19.4%; 
		grid-template-areas:
		"area1 area2"
		"area3 area3"
		"area4 area4";
	}
}
@media (min-width: 768px) {
	.main_wrapper { aspect-ratio: 25 / 12; gap: .6cqw; }
	.main_wrapper {
		grid-template-columns: 24.25% 1fr 24.35%;
		grid-template-rows: 33% 1fr;
		grid-template-areas:
		"area2 area3 area4"
		"area1 area3 area4";
	}
	.main_wrapper > strong	{ top: 1.6cqw; right: 1.6cqw; width: 6.666cqw; }
}
.hero-slider-wrapper	{ pointer-events: none; }
.hero-slider-wrapper, 
.top-hero-swiper, 
.top-hero-swiper .swiper-wrapper, 
.top-hero-swiper .swiper-slide	{ width: 100%; height: 100%; inset: 0; }


/* ---------- SWIPER LAYOUT ---------- */
.top-hero-swiper .swiper-slide span	{ display: inline-block; overflow: hidden; inset: 0; }
.top-hero-swiper .swiper-slide span.top-hero-image	{ display: inline-block; transition: clip-path .6s cubic-bezier(.76, 0, .24, 1); line-height: 1; padding: 0; margin: 0; }
.top-hero-swiper .swiper-slide.swiper-slide-next span.top-hero-image	{ clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); line-height: 1; padding: 0; margin: 0; }
.top-hero-swiper .swiper-slide.swiper-slide-active span.top-hero-image	{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); line-height: 1; padding: 0; margin: 0; }

/* ---------- SWIPER SCALE ---------- */
.top-hero-swiper .swiper-slide img,
.top-hero-swiper .swiper-slide picture	{ display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
.top-hero-swiper .swiper-slide.swiper-slide-next img,
.top-hero-swiper .swiper-slide.swiper-slide-next picture	{ transform: scale(1); transition: none; width: 100%; height: 100%; object-fit: cover; }
.top-hero-swiper .swiper-slide.swiper-slide-active img,
.top-hero-swiper .swiper-slide.swiper-slide-active picture	{ transform: scale(1.06); transition: transform 6s cubic-bezier(0.28,0.01,0.36,1); }

/* ---------- SWIPER MASK SLIDE ---------- */
.top-hero-swiper .swiper-slide span.top-hero-image span	{ inset: 0; transform: translateX(0); transition: none; }
.top-hero-swiper .swiper-slide.swiper-slide-next span.top-hero-image span	{ transform: translateX(-50%); }
.top-hero-swiper .swiper-slide.swiper-slide-active span.top-hero-image span	{ transform: translateX(0); transition: transform .6s cubic-bezier(.76, 0, .24, 1); }
.top-hero-swiper .swiper-slide img	{ backface-visibility: hidden; transform-origin: center; }
.top-hero-swiper:not(.is-ready)
.swiper-slide-active img,
.top-hero-swiper:not(.is-ready)
.swiper-slide-active picture	{ transform: scale(1); transition: none; }

/* ------------ INTRODUCTION ------------- */
.introduction_wrapper	{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9.1cqw 0 0; }
.introduction_wrapper > strong	{ font-size: 24px; font-family: var(--font-entt); font-weight: 400; line-height: 1; margin: 0; }
.introduction_wrapper > h3	{ width: 65cqw; display: flex; line-height: 1; margin: 0 0 1.6cqw; }
.introduction_wrapper > h4	{ font-size: 32px; font-family: var(--font-jp); font-weight: 500; line-height: 1; margin: 0 0 1.6cqw; }
.introduction_wrapper > p	{ font-size: 17px; font-family: var(--font-jp); font-weight: 400; line-height: 2; text-align: center; }
@media (min-width: 768px)	{ 
	.introduction_wrapper > p br.sp	{ display: none; }
}
@media (max-width: 767.9px)	{ 
	.introduction_wrapper	{ padding: 16cqw 0 0; }
	.introduction_wrapper > strong	{ font-size: 4.2666cqw; margin: 0 0 2cqw; }
	.introduction_wrapper > h3	{ width: 90cqw; margin: 0 0 6cqw; }
	.introduction_wrapper > h4	{ width: 89.6cqw; font-size: 8.5333cqw; text-align: left; margin: 0 0 6.4cqw; }
	.introduction_wrapper > p	{ width: 89.6cqw; font-size: 4.5333cqw; text-align: left; }
}

.top-hero-swiper .swiper-slide img,
.top-hero-swiper .swiper-slide picture,
.top-hero-swiper .swiper-slide span {
  display: block !important;
  vertical-align: bottom;
}

.main_panel {
  display: flex;
}

.hero-slider-wrapper {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ------------ MID ROLL ------------- */
.midroll_wrapper	{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13.5cqw 0 6cqw; position: relative; margin: 0 0 12.8cqw; }
.midroll_img	{ width: 82.4cqw; display: flex; }
.midroll_wrapper > h4	{ width: 51.5cqw; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; display: flex; }
@media (max-width: 767.9px)	{ 
	.midroll_wrapper	{ padding: 34cqw 0 11cqw; margin: 0 0 18cqw; }
	.midroll_img	{ width: 100cqw; }
	.midroll_wrapper > h4	{ width: 90cqw; }
}

/* ------------ ITEM AREA ------------- */
.item_wrapper	{ width: 100%; display: flex; }
.item_txt	{ width: 35.25cqw; }
.item_txt > h5	{ font-family: var(--font-entt); font-size: 28px; font-weight: 400; line-height: 1.4; margin: 0 0 8px; }
.item_txt > ul	{ display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px; list-style-type: none; margin: 0 0 20px; }
.item_txt > ul > li	{ font-family: var(--font-enmo); font-size: 12px; font-weight: 400; line-height: 1.4; }
.item_txt > h6	{ font-family: var(--font-jp); font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0 0 8px; }
.item_txt > p	{ font-family: var(--font-jp); font-size: 16px; font-weight: 400; line-height: 1.7; margin: 0 0 8px; }
.products__size	{ width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 0 0; gap: 10px 12px; }
.products__size > ul	{ list-style-type: none; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.products__size > ul > li	{ font-family: var(--font-enmo); font-size: 12px; font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; }
.products__size > ul > li > span	{ border: 1px solid var(--color-grey); border-radius: 20px; padding: 0 8px; font-family: var(--font-entt); font-size: 12px; font-weight: 400; line-height: 1.6; text-align: center; }
.products__size > b	{ font-family: var(--font-enmo); font-size: 12px; font-weight: 400; line-height: 1.4; }
.item_img	{ width: 40cqw; height: 100%; aspect-ratio: 1200 / 1127; display: flex; position: relative; }
.imglayer	{ position: absolute; top: 0; left: 0; width: 100%; display: flex; transition: opacity .1s ease; }
.imglayer.layer03	{ z-index: 3; }
.imglayer.layer02	{ z-index: 2; }
.imglayer.layer01	{ z-index: 1; }
.active .imglayer.layer03	{ opacity: 0; -webkit-transition-delay: 1s; transition-delay: 1s; }
.active .imglayer.layer02	{ opacity: 0; -webkit-transition-delay: 1.5s; transition-delay: 1.5s;}
@media (min-width: 768px)	{ 
	.item_wrapper	{ align-items: flex-start; justify-content: space-between; padding: 0 8.8cqw; margin: 0 0 6cqw; }
	.item_img	{ order: 2; }
	.item_txt	{ order: 1; }
}

@media (max-width: 960px)	{ 
	.products__size	{ flex-wrap: wrap; }
	.products__size > b	{ width: 100%; text-align: left; }
}

@media (max-width: 767.9px)	{ 
	.item_wrapper	{ flex-direction: column; align-items: center; padding: 0; }
	.item_img	{ width: 100%; margin: 0 0 24px; }
	.item_txt	{ width: 90%; margin: 0 0 38px; }
	.item_txt > h5	{ margin: 0 0 5px; }
	.item_txt > ul	{ margin: 0 0 12px; }
	.item_txt > h6	{ margin: 0 0 6px; }
	.item_txt > p	{ margin: 0 0 2px; }
}

/* ------------ BUY BUTTON ------------- */
.products__btn	{ display: flex; flex-direction: column; gap: 16px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 36px; }
.products__btn .btn-square__link	{ justify-content: space-between; min-width: 106px; }
.products__btn .btn-square__link.soon	{ min-width: 140px; }
.btn-square	{ display: inline-block; width: fit-content; }
.btn-square__icon	{ position: relative; width: 24px; height: 24px; padding: 2px 0; margin-left: 24px; overflow: hidden; background-color: #FFFFFF; border-radius: 2px; transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.soon .btn-square__icon	{ display: none; }
.btn-square__icon-inner	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.btn-square__icon-inner i	{ position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px; color: #121315; }
.btn-square__icon-inner i:nth-of-type(2).icon__arrow_right	{ -webkit-transform: translateX(-100%); transform: translateX(-100%); }
.btn-square__link	{ display: flex; align-items: center; padding: 2px 4px; background-color: var(--color-prm); border-radius: 4px; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.btn-square__link:not(:has(.btn-square__pic)) { padding: 4px 4px 4px 12px; }
.btn-square__link.soon	{ height: 36px; padding: 4px; pointer-events: none; background-color: var(--color-grey); justify-content: center; }
.btn-square__link .btn-square__text	{ color: #fff; font-family: var(--font-entt); font-size: 16px; }
.arrow-icon	{ width: 16px; height: 16px; color: var(--color-black); }
.arrow-icon.hover	{ color: var(--color-prm); }
@media(hover: hover)and (pointer: fine) {
	.btn-square__link:hover,
	.btn-square__link:focus	{ background-color: var(--color-black); }
	.btn-square__link:hover .btn-square__pic,
	.btn-square__link:focus .btn-square__pic	{ -webkit-filter: grayscale(1); filter: grayscale(1); }
	.btn-square__link:hover .btn-square__text,
	.btn-square__link:focus .btn-square__text	{ color: #fff; }
	.btn-square__link:hover .btn-square__icon,
	.btn-square__link:focus .btn-square__icon	{ color: #fff; }
	.btn-square__link:hover .btn-square__icon-inner:has(.icon__arrow_down),
	.btn-square__link:focus .btn-square__icon-inner:has(.icon__arrow_down)	{ -webkit-transform: translateY(100%); transform: translateY(100%); }
	.btn-square__link:hover .btn-square__icon-inner:has(.icon__arrow_right),
	.btn-square__link:focus .btn-square__icon-inner:has(.icon__arrow_right)	{ -webkit-transform: translateX(100%); transform: translateX(100%); }
	.btn-square__link:hover .btn-square__icon-inner i,
	.btn-square__link:focus .btn-square__icon-inner i { color: #fff; }
}

/* ------------ SCROLL AREA ------------- */
.scroll_wrapper	{ width: 100%; margin: 0 0 14cqw; }
.scroll_wrapper .splide__slide	{ margin: 0 -1px;  }
.scroll_wrapper .splide__slide > p	{ height: 22.25cqw; width: auto; display: flex; align-items: flex-start; cursor: grab; }
.scroll_wrapper .splide__slide > p img	{ height: 100%; width: auto; object-fit: contain; }
.scroll_wrapper .splide__slide > span	{ display: block; width: 100%; font-family: var(--font-enmo); font-size: 10px; font-weight: 400; line-height: 1.8; text-align: left; padding: 10px 0 0; }
@media (min-width: 960px)	{ 
	.scroll_wrapper .splide__slide > span br.sp	{ display: none; }
}
@media (max-width: 767.9px)	{ 
	.scroll_wrapper	{ width: 100%; margin: 0 0 126px; }
	.scroll_wrapper .splide__slide > p	{ height: 46cqw; }
	.scroll_wrapper .splide__slide > span	{ line-height: 1.6; padding: 6px 0 0; }
}

/* ------------ VIEW ALL ITEMS ------------- */
.bottomallitem	{ width: 100%; display: flex; align-items: center; justify-content: center; margin-top: -3cqw; padding: 0 0 8cqw; }
.bottomallitem > a	{ width: 65cqw; display: flex; aspect-ratio: 679 / 453; position: relative; }
.bottomallitem > a span	{ opacity: 1; transition: opacity .1s ease; }
@media (min-width: 768px)	{ 
	.bottomallitem > a span	{ width: 100%; position: absolute; top: 0; left: 0; opacity: 1; transition: opacity .1s ease; }
	.bottomallitem > a span.hover	{ opacity: 0; }
	.bottomallitem > a:hover span.hover	{ opacity: 1; }
}
@media (max-width: 767.9px)	{ 
	.bottomallitem	{ margin-top: -8cqw; padding: 0 0 20cqw; }
	.bottomallitem > a	{ width: 90cqw; aspect-ratio: 679 / 457; }
	.bottomallitem > a span.hover	{ display: none; }
}

/* ------------ BLOCK ------------- */
@media (min-width: 768px)	{ .pconly { display: block; } }
@media (max-width: 767.9px)	{ .sponly { display: block; } }
@media (min-width: 768px)	{ .sponly { display: none!important; } }
@media (max-width: 767.9px)	{ .pconly { display: none!important; } }

.no-transition * {
  transition: none !important; -webkit-transition-delay: 0; transition-delay: 0;
}