@charset "UTF-8";
/* CSS Document */

/***
* common_pc.css
*/

@media only print, only screen and (min-width: 1000px) {

/* ヘッダー高さの単一定義。SP側の既定値は common_sp.css の :root にある。 */
:root {
  --uaHeaderHeight: 55px;
}

.sp,
.tab,
.tab_sp {
  display: none;
}

.pc,
.pc_tab,
.pcw_pc {
  display: block;
}

.hover {
  opacity: 1;
  transition-duration: 0.75s;
  transition-timing-function: var(--motion-soft);
}

.hover:hover {
  opacity: 0.3;
  transition-duration: 0.75s;
}

.hyphen {
  position: relative;
  top: -0.1vw;
}

a {
  color: #000;
  transition-duration: 0.75s;
  transition-timing-function: var(--motion-soft);
}

a:hover {
  color: #bbb;
  transition-duration: 0.75s;
}

/* Ver8.3：ドロップダウンのラベル/アイテム名はホバー中も減光しない */
#nav .navDropdownList a:hover,
#nav .navDropdownList a:hover .navLabelImg,
#nav .navDropdownList a:hover .navLabelImg h6,
#nav .navDropdownList a:hover .navItemName {
  color: #000;
}

a::after {
  color: #000;
  transition-duration: 0.75s;
  transition-timing-function: var(--motion-soft);
}

a:hover::after {
  color: #000;
  transition-duration: 0.75s;
}

.btn {
  padding: 1px 8px 3px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  border-radius: 3px;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  display: inline-block;
  position: relative;
  transition-duration: 0.75s;
  transition-timing-function: var(--motion-soft);
}

.btn:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
  transition-duration: 0.75s;
}

.btns {
  margin-top: -60px;
  padding-bottom: 20px;
}

.btns li {
  display: inline-block;
}

.jp {
  font-family: dnp-shuei-nmincho-std, serif;
}

.narrow {
  transform: scale(0.6, 1);
  display: inline-block;
  letter-spacing: 0.2em;
}

.parent {
  position: relative;
  top: -0.04em;
}

/***+*******+****
* layout
*/

/***
* header
*/

#header {
  width: 100%;
  overflow: hidden;
}

#headerInner {
  width: 100%;
  height: var(--uaHeaderHeight);
  position: fixed;
  background: transparent;
  z-index: 3333;
}

#headerInner::before {
  content: "";
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff 60%,
    rgba(255, 255, 255, 0.9) 68%,
    rgba(255, 255, 255, 0.62) 78%,
    rgba(255, 255, 255, 0.28) 90%,
    rgba(255, 255, 255, 0) 100%
  );
}

#logo {
  width: 200px;
  margin: 13px 0 0 20px;
}

#nav {
  width: 50%;
  height: auto;
  position: absolute;
  top: 1px;
  left: auto;
  right: 0;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#nav.active {
  top: 1px;
  transform: none;
}

#nav > ul {
  width: calc(100% - 20px);
  padding: 13px 0 15px;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  justify-content: space-between;
}

#nav > ul > li:last-child {
  position: relative;
  z-index: 3333;
}

#nav h3 {
  margin-bottom: 10px;
  font-size: 12px;
}

#navLablIndex a,
#navItemCategories a {
  position: relative;
  padding-right: 14px;
  z-index: 2224;
}

.navDropdown a {
  padding-bottom: 2px;
  padding-right: 0 !important;
  display: block;
}

#navLablIndex > a::after,
#navItemCategories > a::after {
  content: "";
  width: 6px;
  height: 6px;
  background: url("../img/icon_arrow.svg") center no-repeat;
  background-size: 6px;
  position: absolute;
  top: 9px;
  right: 0;
}

#navLablIndex:hover a::after,
#navItemCategories:hover a::after {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

/* ドロップダウンの基準 */
#navLablIndex,
#navItemCategories {
  position: relative;
  white-space: nowrap;
}

#navLablIndex .navDropdown,
#navItemCategories .navDropdown {
  padding-top: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2223;
  display: none;
}

#navLablIndex .navDropdown {
  width: 443px;
}

#navLablIndex .navDropdownList {
  float: left;
  margin-right: 50px;
}

/*
 * Ver8.2：left: 0 を追加。position: fixed なのに left 未指定（auto）だったため、
 * 静的位置＝#footer の内側（padding: 0 20px）が起点になり、
 * オーバーレイ全体が右へ 20px ずれていた。左端 20px が覆われず、
 * LOOKの写真やコンテンツがその幅だけ白くならずに残る。
 */
#closeOverlay {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#closeOverlay.active {
  opacity: 0.9;
  visibility: visible;
  transition-duration: 0.5s;
}

#closeOverlay.is-look-item-closing {
  transition-duration: 0.8s;
}

body.is-look-item-open {
  overflow: hidden;
}

.navLabelImg h6,
.navItemImg h6 {
  margin-top: 6px;
  font-size: 12px;
}

.navDropdown .navLabelImg {
  width: 160px;
  position: fixed;
  top: 50px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.navDropdown a:hover .navLabelImg {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.navDropdown .navItemImg {
  width: 160px;
  position: fixed;
  top: 50px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.navDropdown a:hover .navItemImg {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.navHasDropdown .sp {
    display: none;
}

/* Ver6.6：可変幅（18.3% / 14.34%）をやめ、.navLabelImg / .navItemImg と同じ 160px に揃える。 */
#navLablIndex .df {
  width: 160px;
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1111;
}

#navItemCategories .df {
  width: 160px;
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1111;
}

.df .navLabelImg {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.df .navItemImg {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

/*
.df h6 {
  font-size: 12px;
}
*/

.navLabelImg,
.navItemImg {
  margin-top: 10px;
  font-size: 12px;
}

/***
* main
*/

#main {
  margin-bottom: 0;
  padding-top: var(--uaHeaderHeight);
}

section {
  padding: 0 50px 140px;
  position: relative;
}

section:first-child {
  padding: 0 20px 0;
}

#allLook section:first-child {
  padding: 40px 20px 0;
}

#allLook .ttl,
#item .ttl {
  padding-bottom: 130px;
}

#itemCategories {
  padding-bottom: 0;
}

.ttl {
  width: 100%;
  padding: 70px 0 80px;
  font-size: 24px;
  text-align: center;
  position: relative;
  z-index: 111;
}

.ttl::before {
  content: '[';
  padding-right: 0.5em;
  display: inline-block;
  position: relative;
  top: -2px;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.5s var(--motion-luxury), transform 0.8s var(--motion-soft);
}

.ttl::after {
  content: ']';
  padding-left: 0.5em;
  display: inline-block;
  position: relative;
  top: -2px;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.5s var(--motion-luxury), transform 0.8s var(--motion-soft);
}

.ttl.is-ttl-revealed::before {
  opacity: 1;
  transform: translateX(-0.65em);
}

.ttl.is-ttl-revealed::after {
  opacity: 1;
  transform: translateX(0.65em);
}

.aside {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  line-height: 1.45;
  z-index: 111;
}

.aside li {
  display: inline;
  word-break: break-all;
}

.aside li::after {
  display: none;
}

.aside li .asideAnchor {
  position: relative;
}

.aside li a {
  position: relative;
}

.aside li a::after {
  content: " / ";
  padding: 0 5px;
}

.aside li:last-child a::after {
  display: none;
}

#itemThumb .aside li a:hover::after {
  width: 0;
  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.aside li a .asideAnchor::after {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000;
  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.aside li a:hover .asideAnchor::after {
  width: 100%;
  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.article {
  width: 100%;
  float: none;
}

/* labelThumbList */

#labelThumbList {
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
}

#labelThumbList ul {
  width: calc(100% + 2px);
  display: flex;
  flex-wrap: wrap;
}

#labelThumbList li {
  width: calc(100% / 5 - 2px);
  float: left;
  margin: 0 2px 20px 0;
  padding-right: 0;
  position: relative;
}  

.genderTop #womenLabel {
  padding: 0 50px;
}

#womenLabelTtl {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}

#womenLabel .aside {
  width: 100%;
}

.genderTop #labelThumbList ul {
  width: calc(100% + 2px);
}

.genderTop #labelThumbList li {
  width: calc(100% / 4 - 2px);
  margin: 0 2px 20px 0;
  border-bottom: none;
}

.thumbLogo img {
  width: 100%;
  margin: 0 auto;
}

.genderTop .thumbLogo img {
  width: 100%;
}

.thumbImg {
  overflow: hidden;
  margin-right: -1px;
  z-index: 1111;
}

#btnLabels {
  width: 191px;
  float: none;
  position: fixed;
  top: auto;
  right: 15px;
  bottom: 20px;
  z-index: 999;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

#btnLabels.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

#womenLabel .article {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

#womenLabel #labelThumbList,
#womenLabel #labelListWrap {
  position: relative;
  z-index: 0;
}

#btnLabels li {
  display: inline-block;
  vertical-align: top;
}

#btnLabels .btn {
  padding: 2px 8px 5px 30px;
  font-size: 24px;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #000;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

#btnLabels .active .btn {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

#btnLabels #btnGrid .btn::after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url("../img/icon_grid.svg") center / contain no-repeat;
  mask: url("../img/icon_grid.svg") center / contain no-repeat;
}

#btnLabels #btnList .btn::after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url("../img/icon_list.svg") center / contain no-repeat;
  mask: url("../img/icon_list.svg") center / contain no-repeat;
}

#labelThumbList li .thumbImg img {
  transform: scale(1);
  transition-duration: 0.5s;
}

#labelThumbList li:hover .thumbImg img {
  transform: scale(1.1);
  transition-duration: 0.5s;
}

#labelThumbList li .thumbImg {
  padding-top: 125%;
  position: relative;
  overflow: hidden;
}

#labelThumbList li .thumbImg img,
#labelThumbList li .thumbImg picture {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#labelThumbList li .thumbImg::after {
  display: none !important;
}

/* itemCategoryList */

#itemCategoryList {
  width: 100%;
}

#itemCategoryList ul {
  width: calc(100% + 1px);
  display: flex;
  flex-wrap: wrap;
}

#itemCategoryList li {
  width: calc(100% / 5 - 1px);
  float: left;
  margin: 0 1px 1px 0;
  text-align: center;
  position: relative;
}

#itemCategoryList a:hover h6 {
  color: #000;
}

#itemCategoryList li a {
  padding: 0;
  display: block;
  position: relative;
}

#itemCategoryList li a .itemThumbTxt {
  width: 100%;
  position: absolute;
  bottom: 20px;
}

.itemThumbImg {
  overflow: hidden;
}

#itemCategoryList li .itemThumbImg img {
  transform: scale(1);
  transition-duration: 0.5s;
}

#itemCategoryList li:hover .itemThumbImg img {
  transform: scale(1.15);
  transition-duration: 0.5s;
}

.itemCategoryThumbTtl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 40px;
  font-size: 28px;
  text-align: center;
  white-space: nowrap;
}

.itemThumbImg {
  margin-bottom: 0;
}

.itemThumbTxt {
  padding-bottom: 0;
}

.itemThumbTxt h5 {
  font-size: 16px;
}

/***
* gender top
*/

#genderTtl {
  padding: 250px 0 180px;
  text-align: center;
  white-space: nowrap;
}

#genderTtl h3 {
  margin: 0 10px 0 0;
  display: inline-block;
  white-space: nowrap;
  font-size: 36px;
  line-height: 1;
}

#genderTtlBtns {
  display: inline-block;
  position: relative;
  top: -3px;
}

#genderTtlBtns ul {
  margin: 0;
  padding: 0;
}

#genderTtlBtns li {
  display: inline-block;
  font-size: 26px;
}

#genderTtl .article {
  font-size: 7.17vw;
  text-align: right;
  margin-top: 36px;
  z-index: 2223;
}

#mainTtl {
  position: relative;
}

.ttlBar {
  position: relative;
  top: -10px;
  transform: scaleX(1.2);
  transform-origin: left center;
  display: inline-block;
}

#mainTtl a {
  position: relative;
  display: inline-block;
  transform: translateZ(0);
}

#mainTtl p {
  font-size: 16px;
}

.genderTop section:nth-child(2) .ttl{
  padding: 70px 0 40px;
}

/***
* label top
*/

/*
 * Ver7.0：ヘッダー高の2倍を引いた高さ（上流の calc(100vh - 55px - 55px) 相当）。
 * 55px は --uaHeaderHeight（common_pc.css の :root）から取るので、
 * ヘッダー高を変えてもここを直す必要はない。
 *
 * Ver8.2：dvh → svh（common_sp.css 側と同じ理由）。デスクトップでは svh も dvh も
 * 同値だが、この幅にはアドレスバーを持つ iPad 横向きも入るため svh に揃える。
 * 2行並べの書き方は SP と同じ（common_sp.css の #nav 参照）。非対応環境は上の vh に落ちる。
 */
#labelTopIntro {
  width: 100%;
  height: calc(100vh - var(--uaHeaderHeight) * 2);
  height: calc(100svh - var(--uaHeaderHeight) * 2);
}

#btnlabelImg{
  width: 100%;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

#labelTopLogo {
  --labelTopLogoScale: 1;
  width: 60vw;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-bottom: 80px;
}

#labelTopLogo img {
  transform: scale(var(--labelTopLogoScale));
  transform-origin: center center;
  will-change: transform;
}

/*
 * Ver7.0：レーベル名の打ち文字は恒久的に非表示。
 * ロゴ画像（#labelTopLogo）だけでレーベルを見せる方針のため、
 * margin / font-size は将来の参考として残してある。
 * css/label_top.css 側の #labelTopName 関連（ストリップ演出・イントロの保険・白背景レイヤー）と
 * js/label_top.js の startLabelTopNameReveal は、display:none で不発になるだけなので
 * 表示を戻したくなった時のためにそのまま残している。
 */
#labelTopName {
  margin: 36px 0 200px;
  font-size: 4.39vw;
  text-align: center;
  display: none;
}

/* 必要最小限（高さズレ・白フラ防止に有効）*/
.fadeRolloverWrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.fadeRolloverWrap img {
  display: block;
}
.fadeRolloverOver {
  position: absolute;
  inset: 0;
  opacity: 0;
}

#labelTopLookInner {
  position: relative;
}

#labelTopLookTtl {
  margin-bottom: 80px;
  font-size: 32px;
  text-align: center;
}

#itemCategoriesList {
  margin: -20px 0 40px;
  text-align: center;
  position: relative;
  z-index: 111;
}

#itemCategoriesList li {
  display: inline-block;
}

#itemCategoriesList .btn {
  font-size: 16px;
}

#itemCategoriesList li.active .btn {
  color: #fff;
  background: #000;
}

/* 該当商品が0件のカテゴリー。js/common.js の markEmptyItemFilters() が .is-empty を付ける。
   非表示にせず薄く残し、pointer-events でクリックとホバーを止める。 */
#itemCategoriesList li.is-empty .btn {
  opacity: 0.3;
  pointer-events: none;
}

/* itemTuhmb */

#itemThumbList {
  width: 100%;
  overflow: hidden;
  margin-bottom: -30px;
}

#itemThumbList ul {
  width: calc(100% + 1px);
}

#itemThumbList li {
  width: calc(100% / 4 - 1px);
  float: left;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 1px 40px 0;
  position: relative;
}

.itemThumbListImg {
  overflow: hidden;
  margin-bottom: 16px;
}

.itemThumbListTxt {
  padding: 0 10px;
}

.itemThumbListBtn {
  padding: 0 10px;
}

.itemThumbListLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itemThumbListPrice {
  margin-bottom: 16px;
}

.itemThumbListBtn .btn {
  width: calc(50% - 2px);
  float: left;
  font-size: 12px;
  padding: 6px 0 8px;
  border-radius: 0;
}

.itemThumbListBtn .itemThumbListBtnBuy a {
  margin-left: -1px;
}

#itemImgThumb .slick-slide {
  margin-right: 0;
}

#btnAllItem {
  margin: 50px 0 60px;
  text-align: center;
}

#btnAllItem .btn {
  width: 550px;
  font-size: 32px;
  padding: 34px 0 40px;
  transition:
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#btnAllItem .btn:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

#btnAllItem .btn::after {
  content: none;
}

#btnAllItem .btnArrow {
  width: 22px;
  height: 11px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#btnAllItem .btnArrow::before,
#btnAllItem .btnArrow::after {
  content: '';
  width: 22px;
  height: 11px;
  background-image: none;
  position: absolute;
  inset: 0;
  -webkit-mask: url("../img/icon_arrow2.svg") center / 22px auto no-repeat;
  mask: url("../img/icon_arrow2.svg") center / 22px auto no-repeat;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#btnAllItem .btnArrow::before {
  background-color: #000;
  opacity: 1;
}

#btnAllItem .btnArrow::after {
  background-color: #fff;
  opacity: 0;
}

#btnAllItem .btn:hover .btnArrow {
  transform: translate(10px, -50%);
}

#btnAllItem .btn:hover .btnArrow::before {
  opacity: 0;
}

#btnAllItem .btn:hover .btnArrow::after {
  opacity: 1;
}

/***
* item Detail
*/

#detail #main {
  padding-top: 0;
}

#itemWrap {
  margin: 0 auto 140px;
}

#itemImg {
  margin: 0 auto;
}

#itemImgMain {
  width: 50%;
  float: right;
  margin-bottom: 0;
}

#itemImgMain li {
  margin-bottom: 10px;
}

#itemImgMain li:last-child {
  margin-bottom: 0;
}

#itemCreditWrap {
  width: 50%;
  float: left;
}

#itemCredit {
  width: 355px;
  margin: 0 auto;
}

#itemCreditInner {
  position: sticky;
  top: var(--item-credit-inner-sticky-top, 0px);
  z-index: 10;
  height: var(--item-credit-inner-flow-height, auto);
  background: #fff;
  transition: top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

#itemCreditInnerMain h4 {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.22;
}

#itemCreditItemName {
  margin: 6px 0 10px;
  font-size: 21px;
  display: block;
}

.detailPrice {
  font-size: 15px;
}

#itemCredit dl {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.77;
}

.itemCreditInnerSubTtl,
.itemCreDescriptionTtl {
  font-size: 12px;
}

.itemCreDescriptionTtl {
  margin-bottom: 10px;
}

.itemCreDescriptionTxt {
  font-size: 12px;
  line-height: 2;
}

#itemCreditInner > .itemCreDescription {
  margin: 30px 0 0;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#itemCreditInner.is-description-faded > .itemCreDescription {
  opacity: 0;
  pointer-events: none;
}

#itemCredit > .itemCreDescriptionStickyTrigger {
  height: 1px;
  margin-top: var(--item-credit-description-offset, 100px);
  margin-bottom: -1px;
  pointer-events: none;
}

#itemCredit > .itemCreDescriptionTxt {
  position: sticky;
  top: var(--item-credit-description-text-top, 0px);
  z-index: 11;
  background: #fff;
  transition: top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
  margin-bottom: 0;
}

#btnBuy .btn {
  width: 100%;
  padding: 6px 0 10px;
  font-size: 15px;
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

#itemCreditInnerMain p {
  margin-bottom: 20px;
  font-size: 14px;
  text-align: left;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

#itemImgThumb {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 26px;
  overflow: hidden;
  position: relative;
}

#itemImgThumb .thumSlider {
  transition: transform 0.3s ease;
}

#itemImgThumb::after {
  content: "";
  width: 60px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#itemImgThumb.is-thumb-end::after {
  opacity: 0;
}

#itemImgThumb ul {
  white-space: nowrap;
}

#itemImgThumb li {
  width: 42px;
  display: inline-block;
  margin: 0 2px 2px 0;
  font-size: 0;
  opacity: 0.3;
  transition-duration: 0.5s;
  vertical-align: top;
}

#itemImgThumb li.active {
  opacity: 1;
}

#itemImgThumb li:hover {
  opacity: 1;
}

#itemImgThumb li a {
  cursor: pointer;
}

#itemImgThumb a {
  overflow: hidden;
  display: block;
}

#itemImgThumb li img {
  transform: scale(1);
  transition-duration: 0.5s;
}

#itemImgThumb li:hover img {
  transform: scale(1.1);
  transition-duration: 0.5s;
}

#itemImgThumb li:last-child {
  margin-bottom: 0;
}

/* modal */

#modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;
  background: #fff;
  display: none;
}

#modal ul {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3334;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#modal ul::-webkit-scrollbar {
  display: none;
}

#btnModalClose {
  width: 24px;
  position: fixed;
  top: 22px;
  right: 34px;
  z-index: 8888;
}

#modalImg li {
  margin-bottom: 4px;
}

#modalImg li:last-child {
  margin-bottom: 0;
}

/***
* all looks
*/

#lookbooksThumbList {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

#lookbooksThumbList ul {
  width: calc(100% + 90px);
}

#lookbooksThumbList li {
  width: calc(100% / 3);
  float: left;
  margin: 0 0 40px 0;
  padding: 0 0 15px;
  position: relative;
  border: none;
}

#lookbooksThumbList li::after {
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 30px;
  left: 0;
}

.lookbooksThumbImg {
  width: calc(100% - 90px);
}

.lookbooksThumbImg {
  overflow: hidden;
}

#lookbooksThumbList li .lookbooksThumbImg img {
  transform: scale(1);
  transition-duration: 0.5s;
}

#lookbooksThumbList li:hover .lookbooksThumbImg img {
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.lookbooksThumbTxt {
  width: calc(100% - 90px);
  margin-bottom: 15px;
  padding-bottom: 20px;
}

.lookbooksThumbLogo {
  width: calc(100% - 90px);
}

.lookbooksThumbTxt h4 {
  float: left;
  font-size: 17px;
}

.lookbooksThumbTxt h5 {
  float: right;
  font-size: 12px;
  margin-top: 2px;
}

/***
* footer
*/

#footer {
  padding: 0 20px;
}

#footerInner {
  padding-top: 140px;
  position: relative;
}

#genderList {
  width: calc(100% - 60px);
  margin: 0 auto 26px;
  padding: 0;
  overflow: hidden;
}

#genderList ul {
  width: calc(100% + 1px);
}

#genderList li {
  width: calc(50% - 1px);
  float: left;
  margin-bottom: 0;
  margin-right: 1px;
  padding: 0 0;
  z-index: 1;
  border-radius: 0;
  position: relative;
}

.women #genderList li:first-child .genderListTtl::before,
.men #genderList li:last-child .genderListTtl::before {
  content: "[";
  padding-right: 20px;
  position: relative;
  top: -2px;
}

.women #genderList li:first-child .genderListTtl::after,
.men #genderList li:last-child .genderListTtl::after {
  content: "]";
  padding-left: 20px;
  position: relative;
  top: -2px;
}

.genderListImg {
  overflow: hidden;
}

#genderList li:last-child {
  margin-right: 0;
}

#genderList li:last-child a::after {
  display: none;
}

#genderList li::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  z-index: 3333;
  transform: scale(1);
  filter: blur(0);
  transition-duration: 0.5s;
  pointer-events: none;
}

#genderList img {
  transform: scale(1);
  transition-duration: 0.5s;
}

#genderList a:hover img {
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/* 画像ホバーは、急なズームではなく余韻を残すゆるやかな寄りに統一する。 */
#labelThumbList li .thumbImg img,
#itemCategoryList li .itemThumbImg img,
#itemImgThumb li img,
#lookbooksThumbList li .lookbooksThumbImg img,
#genderList img {
  transition: transform 1.1s var(--motion-soft);
}

#labelThumbList li:hover .thumbImg img,
#itemImgThumb li:hover img,
#lookbooksThumbList li:hover .lookbooksThumbImg img,
#genderList a:hover img {
  transform: scale(1.06);
}

#itemCategoryList li:hover .itemThumbImg img {
  transform: scale(1.08);
}

#genderList li p {
  margin-top: 10px;
  font-size: 13px;
}

#genderList a:hover {
  color: #000;
}

.genderListTtl {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 0;
  color: #fff;
  font-size: 36px;
  z-index: 5555;
}

#genderList li:first-child {
  float: left;
  margin-bottom: 0;
}

#genderList li:last-child {
  float: left;
}

#genderList li:last-child .spBdT {
  display: block;
}

#btnBackToTop {
  padding-bottom: 223px;
  font-size: 21px;
  text-align: center;
  display: block;
}

#btnBackToTop a {
  position: relative;
}

#footerLogo {
  width: 190px;
  margin: 140px auto 100px;
}

#footerNav {
  padding: 5px 0 17px;
  line-height: 1.4;
  text-align: left;
}

#footerNav .pc {
  display: inline-block;
}

#footerNav li {
  margin-right: 20px;
  font-size: 12px;
  display: inline-block;
}

#footerNav li:last-child {
  margin-right: 0;
}

#footerNavSub h6 {
  font-size: 11px;
  position: absolute;
  bottom: 24px;
}

#footerNavPageTop {
  font-size: 14px;
  margin-bottom: 90px;
  text-align: center;
}

#footerCopy {
  font-size: 11px;
  left: auto;
  transform: translateX(0);
  right: 0;
}

/***
* 2026 Spring & Summer
*/

/* label Top */

#list #main {
  padding: var(--uaHeaderHeight) 0 0 0;
}

#list #mainTtl {
  width: 1000px;
  position: fixed;
  top: 50%;
  left: 50%;
  padding-bottom: 90px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#labelImg {
  margin-bottom: 140px;
}

#labelImgTtl {
  width: 100%;
  height: var(--labelImgTtlHeight, 0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 450ms;
  position: sticky;
  top: var(--labelImgTtlTop, 100vh);
}

#labelImgTtl.isReady.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}

#labelImgTtlInner {
  font-family: "NeueHaasUnicaPro", Helvetica, Arial, "sans-serif";
  font-size: 3.66vw;
  position: relative;
  top: calc(var(--labelImgTtlHeight, 0px) / 2);
  padding-bottom: 0;
  transform: translateY(0);
  text-align: center;
}

/*
 * Ver8.0：noitem 詳細で #labelImg を position:fixed にしたため、
 * リード文以降は白背景を敷いて画像の上に重ねる。
 * margin だとマージン相殺で背景が途切れるので padding に変更した。
 * .noItem 用の個別指定は look.css（#look .noItem #labelLead）へ集約したので削除。
 */
#labelLead {
  padding: 140px 0;
  font-size: 18px;
  line-height: 2.4;
  text-align: center !important;
  background: #fff;
}

#labelLead ul {
  margin-top: 10px;
}

#labelLead li {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

#labelLead li:last-child {
  margin-right: 0;
}

#labelLead br.sp {
  display: block;
}

#labelLead h3 {
  margin-bottom: 20px;
}

#labelLead .btn {
  width: 106px;
  padding: 1px 6px 3px;
  font-size: 21px;
}

#labelTopLook .ttl {
  position: relative;
  margin-bottom: 16px;
  background: none;
}

#labelTopLookInner #btnLook {
  width: 480px;
  margin: 0 auto 80px;
  padding: 10px 15px 12px;
  background: #fff;
  border: 1px solid #000;
  z-index: 1111;
  position: relative;
}

#labelTopLookInner:hover #btnLook {
  color: #fff;
  background: #000;
}

/* #btnLook（Lookbook の View More）の矢印は不要との指示で削除（2026-08-18）。 */

#btnLook p {
  width: 100%;
  padding-top: 13px;
  text-align: left;
  font-size: 17px;
  transition-duration: 0 !important;
}

#btnLook h4 {
  text-align: center;
  font-size: 17px;
}

#btnLook #btnViewMore {
  position: relative;
  font-size: 16px;
}

#btnLook #btnViewMore::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  transition-duration: 0.5s;
}

#btnLook:hover #btnViewMore::after {
  background: #ccc;
  transition-duration: 0.5s;
}

.itemSort {
  width: calc(68.08% + 15px);
  float: right;
  margin: 4px 0 50px;
  font-size: 26.4px;
  line-height: 1.39;
  position: relative;
  z-index: 2223;
}

.itemSort ul {
  width: 100%;
  margin-left: 0;
}

.itemSort li {
  display: inline-block;
}

.itemSort li::after {
  content: " / ";
}

.itemSort li:last-child::after {
  display: none;
}

.itemSort li.active a {
  color: #bbb;
}

.slick-dots li {
  width: 12px !important;
  height: 25px !important;
  color: #999 !important;
  padding-bottom: 6px !important;
}

.slick-dots li button {
  width: 10px !important;
  height: 25px !important;
  color: #999 !important;
  font-size: 14px !important;
  border-bottom: 1px solid #fff;
  transition-duration: 0.5s;
}

.slick-dots li.slick-active button {
  color: #000 !important;
}

.slick-dots li::after {
  content: "/";
  width: 50px;
  text-align: center;
  position: absolute;
  top: 4px;
  right: -30px;
}

.slick-dots li:last-child::after {
  display: none;
}

.bdR {
  width: 1px;
  height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000;
  display: block;
  z-index: 1111;
  transition-duration: 0.5s;
}

#labelTopLook a:hover {
  color: #000;
}

#btnLook {
  transition-duration: 0.5s;
}

#btnLook:hover {
  color: #bbb;
  transition-duration: 0.5s;
}

#noItemLabelTxt {
  width: 100%;
  height: calc(100vh - 100px);
}

#noItemLabelTxtInner {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#noItemLabelTxt #labelImgTtl {
  position: relative;
}

#noItemLabelTxt #labelImgTtlInner {
  position: relative;
  top: auto;
}

#itemCredit #itemImgThumb {
  display: block;
}

#itemImgThumbBg {
  display: none;
}

.ttlWrap {
  position: relative;
}

.filterWrap {
  width: 100%;
  position: absolute;
  top: 118px;
  left: 0;
  padding: 10px 0 20px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.71;
  z-index: 3333;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#womenLabel .filterWrap {
  top: 104px;
}

.filterWrap.active {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#filterWrapInner {
  position: relative;

}

.filterWrap a {
  color: #bbb;
}

.filterWrap a:hover {
  color: #000;
}

.filterWrap li {
  display: inline-block;
}

.filterWrap li.active a {
  color: #000;
}

/* add */

section:first-child {
  padding: 0 50px 40px;
}

section#labelTop:first-child {
  padding: 0 0 0;
}

/*
.noItem section#labelTop:first-child {
  padding: 0 0 40px;
}
*/

/* Ver7.0：アイテム無しレイアウトはヘッダー分だけを引く（上流の calc(100vh - 55px) 相当）。 */
.noItem #labelTopIntro{
  /* Ver7.1: 上流が 100vh - 55px - 55px（ヘッダー高2つ分）に変更。テーマは変数で持つ。 */
  height: calc(100vh - var(--uaHeaderHeight) * 2);
  height: calc(100dvh - var(--uaHeaderHeight) * 2);
}

#nav li:last-child {
  color: #bbb;
}

.navWomen,
.navMen {
  color: #bbb;
}

.navWomen:hover,
.navMen:hover {
  color: #000;
}

.women .navWomen,
.men .navMen {
  color: #000;
}

.itemThumbTxt {
  color: #000;
}

#subGenderTtl {
  border-top: 1px solid #000;
}

#subGenderTtl {
  padding: 80px 0 0;
  font-size: 28px;
  line-height: 1.17;
  text-align: center;
  color: #bbb;
  border-top: 1px solid #000;
  position: relative;
  z-index: 2223;
}

#subGenderTtl strong {
  color: #000;
}

.btnFilter {
  position: absolute;
  bottom: 20px;
  right: 0;
  font-size: 16px;
  z-index: 3333;
  transition-duration: 0.5s;
}

.btnFilter:hover,
.btnFilter:hover a {
  color: #bbb;
}

.btnFilter::before {
  content: "( ";
}

.btnFilter::after {
  content: " )";
}

.btnFilter a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #000;
}

.jsFilterBtn {
  cursor: pointer;
}

.jsFilterBtn .filterIcon {
  position: relative;
  width: 14px;
  height: 10px;
  display: block;
  margin-top: 3px;
}

.jsFilterBtn .line,
.jsFilterBtn .dot {
  position: absolute;
  transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.jsFilterBtn .line {
  left: 0;
  width: 14px;
  height: 1px;
  background: #000;
  transform-origin: center center;
  transition-duration: 0.5s;
}

.btnFilter:hover .jsFilterBtn .line {
  background: #bbb;
  transition-duration: 0.5s;
}

.jsFilterBtn .line1 {
  top: 0;
}

.jsFilterBtn .line2 {
  top: 5px;
}

.jsFilterBtn .line3 {
  top: 10px;
}

.jsFilterBtn .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  transition-duration: 0.5s;
}

.btnFilter:hover .jsFilterBtn .dot {
  background: #bbb;
  transition-duration: 0.5s;
}

.jsFilterBtn .dot1 {
  top: -1.5px;
  left: 2px;
}

.jsFilterBtn .dot2 {
  top: 3.5px;
  left: 8px;
}

.jsFilterBtn .dot3 {
  top: 8.5px;
  left: 2px;
}

.btnFilter.isClose .jsFilterBtn .line1 {
  top: 5px;
  transform: rotate(45deg);
}

.btnFilter.isClose .jsFilterBtn .line2 {
  opacity: 0;
}

.btnFilter.isClose .jsFilterBtn .line3 {
  top: 5px;
  transform: rotate(-45deg);
}

.btnFilter.isClose .jsFilterBtn .dot {
  opacity: 0;
  transform: scale(0);
}

.filterWrap {
  display: none;
}

.filterWrap.active {
  display: block;
}

#itemThumb .filterWrapInner li::after {
  content: '/';
  padding: 0 10px 0 12px;
  color: #bbb;
}

#itemThumb .filterWrapInner li:last-child::after {
  display: none;
}

#womenLabel .filterWrapInner ul {
  float: left;
  margin-right: 4.39vw;
}

#womenLabel .filterWrapInner ul:last-child {
  margin-right: 0;
}

#womenLabel .filterWrapInner li {
  display: block;
}

#subItemAnchor,
#subGenderAnchor {
  padding-top: 0;
}

#labelImgTtlInner h2 {
  margin-bottom: 30px;
}

#labelImgTtlLink {
  font-family: "clarendon-urw", Helvetica, Arial, "sans-serif";
  font-weight: 500;
  font-size: 16px;
  position: relative;
  z-index: 1111;
}

#listTop {
  width: 100%;
  position: relative;
}

#itemDetail {
  margin-top: var(--uaHeaderHeight);
}

/******************* 26AW ********************/

.num {
  font-size: 1.1em;
  letter-spacing: -0.02em;
}

.lookImg {
  position: relative;
}

#lookList .lookImageFrame {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

#lookList .lookImageFrame picture {
  display: block;
}

.btnViewMore {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 5px 8px;
  background: #fff;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(115%);
  transition:
    opacity 0.3s ease 0.65s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

.btnViewMoreLabel {
  display: inline-block;
}

.btnViewMore::after {
  content: "+";
  padding-left: 4px;
  display: inline-block;
}

#lookList > ul > li.is-btn-visible .btnViewMore {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

#lookList > ul > li .animate-elm.show .btnViewMore {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* lookItem */

.btnItemClose {
  width: 50%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 20px;
  z-index: 1111;
  padding: 20px 0 20px 35px;
  display: block;
  background: url("../img/icon_close.svg") left no-repeat;
  background-size: 20px auto;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--motion-soft), visibility 0s linear 0.45s;
}

.lookItem.is-show .btnItemClose {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s var(--motion-soft) 0.18s, visibility 0s linear 0.18s;
}

.lookItem.is-hide .btnItemClose {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--motion-soft), visibility 0s linear 0.35s;
}

.lookItem {
  width: 50%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding: 60px 20px 0;
  background: #fff;
  z-index: 4444;
  overflow-y: scroll;
  text-align: left;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(-100% - 40px), 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.8s var(--motion-soft), visibility 0s linear 0.8s; }

#lookList .lookItem li {
  text-align: left;
}

.lookItem.is-show {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s; }

.lookItem.is-closing {
  visibility: visible;
  pointer-events: none;
  transform: translate3d(calc(-100% - 40px), 0, 0);
  transition: transform 0.8s var(--motion-soft); }

.lookItem.is-hide {
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(-100% - 40px), 0, 0);
  transition: none; }

.lookItem.is-force-hide {
  transition: none; }

.lookItem::-webkit-scrollbar {
  display: none;
}

.lookItemList ul {
  width: calc(100% + 1px);
}

.lookItemList li {
  width: calc(100% / 3 - 1px);
  float: left;
  margin: 0 1px 10px 0;
}

#look .sectionItemImg span {
  font-size: 10px;
}

#look .thumbBtn {
  font-size: 10px;
}

#look .itemThumbListTxt {
  padding: 10px;
  font-size: 12px;
}

#look .thumbBtn {
  bottom: 15px;
  margin-right: -1px;
  padding: 6px 0;
  border: 1px solid #ccc;
}

#look .thumbBtn:hover {
  border: 1px solid #000;
}

#labelListWrap {
  width: 100%;
  padding-top: 50px;
  display: none;
}

#labelListWrap h5 {
  float: left;
}

#labelListWrap li {
  padding: 10px 0;
  border-top: 1px solid #ccc;
}

#labelListWrap li:last-child {
  border-bottom: 1px solid #ccc;
}

.labelListName {
  margin-bottom: 0;
  font-size: 20px;
  width: 30%;
}

#labelListWrap h5.labelListImage {
  width: 30%;
  float: left;
}

.labelListImage img {
  width: 5.85vw;
  margin-top: 0;
  display: inline-block;
}

.labelListLooks {
  width: 20%;
  font-size: 14px;
  margin-bottom: 0;
}

.labelListItems {
  width: 20%;
  font-size: 14px;
}

#labelListWrap .labelListLooks a,
#labelListWrap .labelListItems a {
  position: relative;
  display: inline-block;
  color: #000;
  transition: color 0.3s var(--motion-luxury);
}

#labelListWrap .labelListLooks a::after,
#labelListWrap .labelListItems a::after {
  content: "( View More  → )";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s var(--motion-luxury);
}

#labelListWrap .labelListLooks:hover a,
#labelListWrap .labelListItems:hover a {
  color: transparent;
}

#labelListWrap .labelListLooks:hover a::after,
#labelListWrap .labelListItems:hover a::after {
  opacity: 1;
}

}

@media only print, only screen and (min-width: 1800px) {

}