@charset "UTF-8";
/**** lity ****/
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
.lity-content {
  padding: 4% 3%;
  background-color: #ffffff;
}

.lity-image img {
  max-height: 80vh !important;

  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 769px) {
  .lity-image img {
    height: auto;
  }
}
.lity {
  background-color: rgba(255, 255, 255, 0.7098039216);

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lity-content:after {
  box-shadow: none;

  -webkit-box-shadow: none;
}

[data-lity] {
  cursor: pointer;
}

[data-lity]:hover {
  opacity: 0.5;
  transition: 0.3s;
}

html:has(.lity-opened) {
  overflow: hidden !important;
  background-color: #3b3b3b;

  scrollbar-gutter: stable;
}

/* ///// variable ///////////////////////////////// */
/*!
 * "Corporate-Logo-Rounded-Bold" is lisenced under the SIL Open Font License 1.1
 * by https://logotype.jp/font-corpmaru.html
 */
:root {
  --f-font-base: "Zen Old Mincho", serif;
  /* bg */
  --bg: #8b8b8b;
  --bg-cart: #ffffff00;
  --bg-content: linear-gradient(#f5f3ea, #fdfcf5);
  --bg-news: #ffffff;
  --bg-header-footer--day: #fbfbf8;
  --bg-header-footer--night: #08080a;
  --bg--night: linear-gradient(0deg, #51587e, #141a2c);
  --bg--day: linear-gradient(0deg, #ffffff, #f0ecca);
  --bg--day-02: linear-gradient(0deg, #a8a47d, #58521e);
  /* text */
  --color-01: #878788;
  --color-concept--night: #ffffff;
  --color--night: #4b3756;
  --color--night-var01: #ffffff;
  --color--day: #4e3f3f;
  --color--day-var01: #ffffff;
  /* btn */
  --btn--01: #484548;
  --btn--01-bg: #ffffff;
}

/* --- reset css ------------------------------ */
.t-reset-css img:not(:where(.t-cart img)) {
  width: 100%;
  height: auto;
  max-height: 100%;
  white-space: pre;
}

.t-reset-css a:not(:where(.t-cart a)) {
  position: initial;
  padding: initial;
  text-align: inherit;
}

/* --- default ------------------------------ */
.t-body :where(*:not(.t-cart *)),
.t-default-css :where(*:not(.t-cart *)) {
  box-sizing: border-box;
}

.t-body :where(:is(section, div, hgroup):not(.t-cart *)),
.t-default-css :where(:is(section, div, hgroup):not(.t-cart *)) {
  width: 100%;
  line-height: 1;
}

.t-body :where(:is(p, a, h3, h4, h5, span):not(.t-cart *)),
.t-default-css :where(:is(p, a, h3, h4, h5, span):not(.t-cart *)) {
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.4;
  font-family: var(--f-font-base);
  letter-spacing: 0.06em;
}

.t-body a:where(:not(.t-cart *)),
.t-default-css a:where(:not(.t-cart *)) {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 769px) {
  .t-body a:where(:not(.t-cart *)):hover,
  .t-body button:where(:not(.t-cart *)):hover,
  .t-default-css a:where(:not(.t-cart *)):hover,
  .t-default-css button:where(:not(.t-cart *)):hover {
    opacity: 0.5;
    transition: 0.3s;
  }
}
.t-body a[href=""]:where(:not(.t-cart *)),
.t-default-css a[href=""]:where(:not(.t-cart *)) {
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
}

html:has(.t-global-nav__close-btn.is-open) {
  overflow: hidden !important;
  background-color: #3b3b3b;

  scrollbar-gutter: stable;
}

@media (min-width: 769px) {
  .t-hover-opacity:hover,
  a.t-hover-opacity:hover {
    opacity: 0.5;
    transition: 0.3s;
  }
}
/* --- loading ---------------------- */
html {
  overflow: hidden;
  background-color: #3b3b3b;

  scrollbar-gutter: stable;
}

html:has(#loading-overlay.is-hidden) {
  overflow: auto;
}

#loading-overlay {
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
}

#loading-overlay.is-hidden {
  opacity: 0;
  transition: opacity 0.5s ease-out;

  pointer-events: none;
}

#loading-overlay span::before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

html:has(.js-theme--day) #loading-overlay,
html:has(.js-theme--night) #loading-overlay {
  background-position: center;
  background-size: 25%, 100%;
  background-repeat: no-repeat;
}

@media (max-width: 769px) {
  html:has(.js-theme--day) #loading-overlay,
  html:has(.js-theme--night) #loading-overlay {
    background-position: center;
    background-size: 60%, 100%;
    background-repeat: no-repeat;
  }
}
:where(html:has(.js-theme--day) #loading-overlay) {
  background:
    url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/pic-loading-day.webp),
    var(--bg--day);
}

:where(html:has(.js-theme--night) #loading-overlay) {
  background:
    url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/pic-loading-night.webp),
    var(--bg--night);
}

#is-body {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

#is-body.is-loaded {
  opacity: 1;
}

html:has(.t-artist-detail-wrapper.is-modal) {
  overflow: hidden !important;
}

/* ==================================================
layout
================================================== */
.t-body {
  position: relative;
  z-index: 1;
  width: 100%;
  background-size: 10%, 100%;
  background-attachment: fixed;

  padding-block-start: clamp(10px, 1.3vw, 20px);
}

.t-main-with {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.t-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;

  padding-block-end: clamp(50px, 6.5vw, 100px);
}

@media (max-width: 1301px) {
  .t-main {
    max-width: 95%;
  }
}
/* --- section ---------------------- */
.t-section-wrapper {
  padding: clamp(4px, 0.5vw, 10px);
  border-radius: 5px;
  background: var(--bg-content);
}

.t-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 0;

  gap: clamp(34px, 4.4vw, 60px);
}

.t-section-border {
  position: relative;
  z-index: 0;
  border: solid 1px #ddd5ca;

  padding-inline: clamp(0px, 0vw, 40px);
  padding-block-start: clamp(34px, 4.4vw, 48px);
  padding-block-end: clamp(44px, 5.7vw, 68px);
}

.t-section-border::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-image-slice: 286 334 286 331;
  border-image-width: clamp(150px, 19.5vw, 340px);
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  content: "";
}

.t-section-border--small {
  padding-block: clamp(16px, 4.4vw, 28px);
}

/* --- content ---------------------- */
.t-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 350px;
}

@media (min-width: 769px) {
  .t-content-wrapper {
    max-width: 1120px;
  }
}
.t-content-wrapper-width {
  max-width: 350px;
}

@media (min-width: 769px) {
  .t-content-wrapper-width {
    max-width: 1120px;
  }
}
.t-content {
  padding-inline: 1rem;
}

@media (min-width: 769px) {
  .t-content {
    padding-inline: 2rem;
  }
}
.t-content--middle {
  padding-block: 1.25rem;
}

@media (min-width: 769px) {
  .t-content--middle {
    padding-block: 4rem;
  }
}
.t-content--large {
  padding-block: 1.88rem;
}

@media (min-width: 769px) {
  .t-content--large {
    padding-block: 4.5rem;
  }
}
/* ==================================================
共通パーツ
================================================== */
/* --- flex ---------------------- */
.t-flex-column {
  display: flex;
  flex-direction: column;
}

.t-flex-column-sp-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .t-flex-column-sp-row {
    display: flex;
    flex-direction: column;
  }
}
.t-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.t-flex-row-sp-column {
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .t-flex-row-sp-column {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.t-flex-align-items-center {
  align-items: center;
}

.t-flex-no-wrap {
  flex-wrap: nowrap;
}

/* align */
.t-flex-center {
  justify-content: center;
  align-items: center;
}

.t-flex-center-justify {
  justify-content: center;
}

.t-flex-center-align {
  align-items: center;
}

/* gap */
.t-flex-gap-10 {
  gap: clamp(10px, 1.3vw, 10px);
}

.t-flex-gap-20 {
  gap: clamp(16px, 2.1vw, 20px);
}

.t-flex-gap-38 {
  gap: clamp(24px, 3.1vw, 38px);
}

.t-flex-gap-100 {
  gap: clamp(50px, 6.5vw, 100px);
}

/* --- text ---------------------- */
/* color */
.t-color-01 {
  color: var(--color-01);
  font-weight: inherit;
}

/* align */
.t-align-center {
  text-align: center;
}

/* weight */
.t-weight-700 {
  font-weight: 700;
}

.t-weight-900 {
  font-weight: 900;
}

/* line-height */
.t-line-height-1 {
  line-height: 1;
}

.t-line-height-2 {
  line-height: 1.5;
}

/* letter-spacing */
.t-letter-spacing-0 {
  letter-spacing: 0;
}

/* shadow */
.t-text-shadow {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7294117647));
}

/* size */
.t-text-size-12 {
  font-size: clamp(12px, 1.6vw, 12px);
}

.t-text-size-14-12 {
  font-size: clamp(12px, 1.6vw, 14px);
}

.t-text-size-14-14 {
  font-size: clamp(14px, 1.8vw, 14px);
}

.t-text-size-18-14 {
  font-size: clamp(14px, 1.8vw, 18px);
}

.t-text-size-20 {
  font-size: clamp(14px, 1.8vw, 20px);
}

.t-text-size-20-16 {
  font-size: clamp(16px, 2.1vw, 20px);
}

.t-text-size-24-20 {
  font-size: clamp(20px, 2.6vw, 24px);
}

.t-text-size-28 {
  font-size: clamp(20px, 2.6vw, 28px);
}

.t-text-size-38 {
  font-size: clamp(28px, 3.6vw, 38px);
}

/* --- btn ---------------------- */
a.t-btn-01,
button.t-btn-01 {
  display: flex;
  align-items: center;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border: solid 1px;
  border-radius: 5px;
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 16px);
  line-height: 1;
  font-family: var(--f-font-base);

  padding-block: clamp(14px, 1.8vw, 20px);
  padding-inline-start: clamp(16px, 2.1vw, 22px);
  padding-inline-end: clamp(34px, 4.4vw, 48px);
  filter: drop-shadow(0px 4px 2px rgba(195, 185, 188, 0.3137254902));
  gap: 1.5rem;
}

a.t-btn-01::after,
button.t-btn-01::after {
  clip-path: path(
    "M7.31,12.21l-1.41-1.41,3.69-3.69H0v-2h9.59l-3.69-3.69,1.41-1.41,5.4,5.4.67.71-.67.71-5.4,5.4Z"
  );
  position: absolute;
  top: 50%;
  right: 1.13rem;
  transform: translate(0, -50%);
  width: 0.81rem;
  background-color: var(--btn--01);
  content: "";

  aspect-ratio: 13/12;
}

a.t-btn--width-100,
button.t-btn--width-100,
span.t-btn--width-100 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (max-width: 769px) {
  a.t-btn--width-100-sp,
  button.t-btn--width-100-sp span.t-btn--width-100-sp {
    justify-content: center;
    width: 100%;
  }
}
a.t-btn-01--a,
button.t-btn-01--a {
  background-color: var(--btn--01-bg);
  color: var(--btn--01);
}

a.t-btn-01--text-small {
  font-size: clamp(12px, 1.6vw, 16px);
}

.t-message__item a.t-btn-01--a {
  letter-spacing: 0;

  padding-inline-end: clamp(32px, 4.4vw, 48px);
}

a.t-btn-02,
button.t-btn-02 {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 14px);
  line-height: 1;
  font-family: var(--f-font-base);

  padding-block: 1rem;
  gap: 1.25rem;
  padding-inline-start: 5rem;
  padding-inline-end: 6.25rem;
  filter: drop-shadow(0px 4px 2px rgba(195, 185, 188, 0.3137254902));
}

@media (min-width: 769px) {
  a.t-btn-02,
  button.t-btn-02 {
    padding-inline-start: 10rem;
    padding-inline-end: 10rem;
  }
}
a.t-btn-02::after,
button.t-btn-02::after {
  clip-path: path(
    "M7.31,12.21l-1.41-1.41,3.69-3.69H0v-2h9.59l-3.69-3.69,1.41-1.41,5.4,5.4.67.71-.67.71-5.4,5.4Z"
  );
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translate(0, -50%);
  width: 0.81rem;
  content: "";

  aspect-ratio: 13/12;
}

a.t-btn-02--a,
button.t-btn-02--a {
  border: solid 1px;
  background-color: var(--btn--01-bg);
  color: var(--btn--01);
}

a.t-btn-02--a::after,
button.t-btn-02--a::after {
  background-color: var(--btn--01);
}

a.t-btn-03,
button.t-btn-33 {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 14px);
  line-height: 1;
  font-family: var(--f-font-base);
  text-align: center;

  padding-block: 0.63rem;
  gap: 1.25rem;
  padding-inline: 1.25rem;
  filter: drop-shadow(0px 4px 2px rgba(195, 185, 188, 0.3137254902));
}

a.t-btn-03--a,
button.t-btn-03--a {
  border: solid 1px;
  background-color: var(--btn--01-bg);
  color: var(--btn--01);
}

/* --- head ---------------------- */
.t-head-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;

  gap: clamp(14px, 1.8vw, 20px);
}

.t-head {
  font-weight: 800;
  line-height: 1;
  font-family: var(--f-font-base);
  text-align: center;
}

/* --- coming-soon  ---------------------- */
.t-coming-soon {
  display: inline-block;
  display: flex;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;

  pointer-events: none;
}

.t-coming-soon > a,
.t-coming-soon > * {
  filter: brightness(0.5);
}

.t-coming-soon::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 1rem;
  content: "coming soon";
}

/* --- end ---------------------- */
.t-end {
  display: inline-block;
  display: flex;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;

  pointer-events: none;
}

.t-end::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0;
  content: "終了いたしました";
}

.t-end a {
  filter: brightness(0.5);
}

/* .t-end::before {
 display:flex;
 justify-content:center;
 align-items:center;
 position:absolute;
 top:50%;
 left:50%;
 z-index:1;
 transform:translate(-50%, -50%);
 width:100%;
 height:100%;
 border-radius:8px;
 background-color:#00000091;
 content:"";

 filter:blur(2px);
} */
/* @media (max-width: 769px) {
 .t-end::before {
  top:46%;
  left:50%;
  width:105%;
  height:101%;
 }
} */

/* --- scroll ---------------------- */
.js-no-scroll-pc-content {
  scroll-behavior: smooth;
}

/* --- fade-in ---------------------- */
.js-fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0px);
}

/* --- to-top ---------------------- */
.js-scroll-to-top {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s ease;

  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.123));
}

.js-scroll-to-top::after {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-image: url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/icon-arrow-top.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.js-scroll-to-top.is-hidden {
  opacity: 0;

  pointer-events: none;
}

/* ==================================================
header/footer
================================================== */
/* --- header ---------------------- */
#header {
  display: contents;
}

.t-header {
  position: sticky;
  top: 0;
  z-index: 100;

  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.0823529412));
}

[id^="n-"]:target {
  scroll-margin: 55px;
}

@media (min-width: 769px) {
  [id^="n-"]:target {
    scroll-margin: 80px;
  }
}
.t-global-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
  height: clamp(50px, 5.2vw, 70px);

  padding-inline: clamp(12px, 2.6vw, 40px);
  gap: clamp(14px, 2.6vw, 38px);
}

a.t-global-nav__logo {
  display: flex;
  align-items: center;
  width: clamp(70px, 13vw, 200px);
}

.t-global-nav__list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  z-index: 0;
  margin-left: auto;

  gap: clamp(38px, 4.9vw, 38px);
}

@media (max-width: 769px) {
  .t-global-nav__list {
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    transition: translate 0.5s ease;

    padding-block-start: 10rem;
    translate: 0 -100%;
  }
  .t-global-nav__list.is-open {
    translate: 0 0;
  }
  html:has(#g-header) .t-global-nav__list {
    top: var(--header-height);
  }
  .t-global-nav__list::before {
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";

    mask-image: linear-gradient(to bottom black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
}
@media (max-width: 768px) {
  .t-global-nav__item {
    display: flex;
    justify-content: center;
  }
  .t-global-nav__item a {
    font-size: 1.25rem;
  }
}
.t-global-nav__shopping-btn-wrapper {
  display: flex;
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;

  gap: 0.38rem;
}

@media (max-width: 769px) {
  .t-global-nav__shopping-btn-wrapper {
    margin-left: auto;
  }
}
a.t-global-nav__shopping-btn {
  font-size: clamp(12px, 1.6vw, 16px);

  padding-block: clamp(10px, 1.8vw, 14px);
  padding-inline-start: clamp(10px, 2.1vw, 16px);
  padding-inline-end: clamp(16px, 2.1vw, 40px);
}

a.t-global-nav__shopping-btn::after {
  right: 0.63rem;
}

@media (max-width: 769px) {
  a.t-global-nav__shopping-btn::after {
    clip-path: path(
      "M3.8,5.9l-.7-.7,1.8-1.6H.1v-1h4.7l-1.8-1.6.7-.7,2.7,2.5.4.4-.4.4-2.7,2.5Z"
    );
    right: 0.38rem;
    width: 0.38rem;

    aspect-ratio: 6/5;
  }
}
/* ハンバーガーメニュー */
.t-global-nav__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;

  gap: 6px;
}

@media (max-width: 769px) {
  .t-global-nav__hamburger {
    display: flex;
  }
}
.t-global-nav__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  transition: 0.3s;
}

.t-global-nav__hamburger.is-active .t-global-nav__hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.t-global-nav__hamburger.is-active .t-global-nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

.t-global-nav__hamburger.is-active .t-global-nav__hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.t-global-nav__hamburger-text {
  margin-top: 2px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
}

.t-global-nav__close-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
}

html:has(#g-header) .t-global-nav__close-btn {
  top: -16px;
}

@media (max-width: 769px) {
  .t-global-nav__close-btn.is-open {
    display: block;
  }
}
.t-global-nav__close-btn::before,
.t-global-nav__close-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  content: "";
  transition: 0.3s;

  transform-origin: center;
}

.t-global-nav__close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.t-global-nav__close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.t-nav-overlay-wrapper,
#nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
}

.t-nav-overlay-wrapper:has(#t-nav-overlay.is-open) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateY(0);
  width: 100vw;
  height: 100vh;
  transition: 0.5s;

  pointer-events: none;
}

#t-nav-overlay.is-open {
  display: block;
  z-index: 1;
  width: 100vw;
  height: 25vh;
  background: linear-gradient(to top, #ffffff 0%, transparent 100%);

  pointer-events: auto;
}

/* --- footer ---------------------- */
.t-footer img {
  width: 100%;
  height: auto;
  max-height: 100%;
  white-space: pre;
}

.t-footer-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-block: 2.5rem;
  gap: clamp(10px, 1.3vw, 50px);
}

@media (min-width: 769px) {
  .t-footer-list {
    flex-direction: row;
  }
}
a.t-footer-list__sns {
  display: flex;
  align-items: center;
  border: solid 1px #ffffff;
  border-radius: 50px;
  background-color: #000000;
  color: #ffffff;
  font-family: var(--f-font-base);

  padding-block: 0.7rem;
  padding-inline-start: 1rem;
  padding-inline-end: 2rem;
  gap: 1rem;
}

.t-footer-list__sns-pic {
  width: 1.5rem;
}

.t-footer-uribou-top {
  width: 15.63rem;
}

/* ==================================================
テーマ別スタイル
================================================== */
.js-theme {
  opacity: 0;
}

html:has(.js-theme--day) {
  background: var(--bg--day);
}

html:has(.js-theme--night) {
  background: var(--bg--night);
}

:where(.js-theme--day *) {
  color: var(--color--day);
  transition: color 0.3s;
}

:where(.js-theme--night *) {
  color: var(--color--night);
  transition: color 0.3s;
}

.js-theme--night .t-head--var01 * {
  color: var(--color--night-var01);
}

/* --- theme-change-btn ---------------------- */
#js-theme-change-btn {
  width: 300px;

  filter: drop-shadow(0px 4px 2px rgba(44, 29, 51, 0.5490196078));
}

#js-theme-change-btn img {
  width: 300px;
  height: 80px;
  cursor: pointer;
}

#js-theme-change-btn img:hover {
  opacity: 0.5;
  transition: 0.3s;
}

/* --- header footer ---------------------- */
html:has(.js-theme--day) .t-global-nav,
html:has(.js-theme--day) .t-footer {
  background-color: var(--bg-header-footer--day);
}

html:has(.js-theme--day) .t-global-nav__item,
html:has(.js-theme--day) .t-footer p {
  color: var(--color--day);
}

html:has(.js-theme--night) .t-global-nav,
html:has(.js-theme--night) .t-footer {
  background-color: var(--bg-header-footer--night);
}

html:has(.js-theme--night) .t-global-nav__item,
html:has(.js-theme--night) .t-footer p {
  color: var(--color--night-var01);
}

@media (max-width: 769px) {
  html:has(.js-theme--day) .t-global-nav__list::before {
    background: var(--bg--day);
  }
  html:has(.js-theme--night) .t-global-nav__list::before {
    background: var(--bg--night);
  }
  html:has(.js-theme--day) .t-global-nav__hamburger-text {
    color: var(--color--day);
  }
  html:has(.js-theme--night) .t-global-nav__hamburger-text {
    color: var(--color--night-var01);
  }
  html:has(.js-theme--day) .t-global-nav__hamburger-line,
  html:has(.js-theme--day) .t-global-nav__close-btn::before,
  html:has(.js-theme--day) .t-global-nav__close-btn::after {
    background-color: var(--color--day);
  }
  html:has(.js-theme--night) .t-global-nav__hamburger-line,
  html:has(.js-theme--night) .t-global-nav__close-btn::before,
  html:has(.js-theme--night) .t-global-nav__close-btn::after {
    background-color: var(--color--night-var01);
  }
}
/* --- body ---------------------- */
body {
  transition: opacity 1.5s;
}

.t-body::before,
.t-body::after {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  transition: opacity 0.5s;

  pointer-events: none;
}

.t-body::before {
  background:
    url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/day/bg.webp),
    linear-gradient(90deg, #fafaf8 0%, #e3dfc5 10%, #e3dfc5 90%, #fafaf8 100%);
}

.t-body::after {
  background:
    url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/night/bg.webp),
    linear-gradient(90deg, #494658 0%, #333146 10%, #333146 90%, #494658 100%);
}

.js-theme--day .t-body::before,
.js-theme--night .t-body::after {
  opacity: 1;
}

/* --- section ---------------------- */
.js-theme--day .t-section-border::before {
  border-image-source: url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/day/decoration-section.webp);
}

.js-theme--night .t-section-border::before {
  border-image-source: url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/night/decoration-section.webp);
}

/* --- concept ---------------------- */
.js-theme--day .t-concept-wrapper {
  background-image: url("https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/day/concept-sp.webp");
}

@media (min-width: 769px) {
  .js-theme--day .t-concept-wrapper {
    background-image: url("https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/day/concept-pc.webp");
  }
}
.js-theme--night .t-concept-wrapper {
  background-image: url("https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/night/concept-sp.webp");
}

@media (min-width: 769px) {
  .js-theme--night .t-concept-wrapper {
    background-image: url("https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/night/concept-pc.webp");
  }
}
/* --- artist ---------------------- */
.js-theme--day .t-artist-list-btn a,
.js-theme--day .t-artist-list-item__name {
  color: var(--color--day-var01);
}

.js-theme--night .t-artist-list-btn a,
.js-theme--night .t-artist-list-item__name {
  color: var(--color--night-var01);
}

.js-theme--day .t-artist-list-btn a,
.js-theme--day .t-artist-list-item {
  background: var(--bg--day-02);
}

.js-theme--night .t-artist-list-btn a,
.js-theme--night .t-artist-list-item {
  background: var(--bg--night);
}

@media (max-width: 769px) {
  .js-theme--day .t-artist-detail-wrapper {
    background: var(--bg--day);
  }
  .js-theme--night .t-artist-detail-wrapper {
    background: var(--bg--night);
  }
}
.js-theme--day .t-artist-detail__close-btn,
.js-theme--day .t-artist-detail-wrapper.is-modal .t-artist-detail__name,
.js-theme--day .t-artist-detail-wrapper.is-modal .t-artist-detail__category {
  color: var(--color--day);
}

.js-theme--night .t-artist-detail__close-btn,
.js-theme--night .t-artist-detail-wrapper.is-modal .t-artist-detail__name,
.js-theme--night .t-artist-detail-wrapper.is-modal .t-artist-detail__category {
  color: var(--color--night-var01);
}

/* ==================================================
個別要素-top
================================================== */
/* --- mv ---------------------- */
#js-theme-mv-pc,
#js-theme-mv-sp {
  opacity: 0;
}

#js-theme-mv-pc.is-active,
#js-theme-mv-sp.is-active {
  opacity: 1;
  transition: opacity 0.8s ease;
  transition-delay: 0.2s;
}

/* --- news ---------------------- */
.t-news-wrapper {
  width: 90%;
  background-color: var(--bg-news);

  gap: clamp(4px, 3.1vw, 38px);
  padding-block: clamp(14px, 1.8vw, 24px);
  padding-inline: clamp(30px, 3.9vw, 70px);
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

@media (min-width: 769px) {
  .t-news-wrapper {
    width: -moz-fit-content;
    width: fit-content;

    padding-block: clamp(12px, 1.6vw, 12px);
  }
}
.t-news-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 3rem;
  padding-right: 10px;
  overflow-y: auto;
}

@media (min-width: 769px) {
  .t-news-content-wrapper {
    height: 4rem;
  }
}
.t-news-content-wrapper li:not(:last-child) {
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: dashed 1px #e6dfdf;
}

.t-news-text {
  max-width: clamp(10px, 47vw, 400px);
  overflow: hidden;
  white-space: nowrap;

  text-overflow: ellipsis;
}

.t-news-content-wrapper::-webkit-scrollbar {
  width: 0.2rem;
}

.t-news-content-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.t-news-content-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #888888;
}

.t-news-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* --- concept ---------------------- */
.t-concept-wrapper {
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  padding-block: clamp(100px, 15.6vw, 120px);
  gap: clamp(28px, 3.6vw, 28px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

.t-concept-wrapper * {
  color: var(--color-concept--night);
}

@media (min-width: 769px) {
  .t-concept-wrapper {
    padding-block: clamp(60px, 7.8vw, 60px);
  }
  .t-concept-wrapper * {
    line-height: 1.6;
  }
}
.t-concept-lead-wrapper {
  display: flex;
  flex-direction: column;

  gap: 0.5rem;
}

.t-concept-lead {
  line-height: 1.4;
}

/* --- art-book ---------------------- */
.t-art-book-wrapper {
  gap: clamp(38px, 4.9vw, 38px);
}

@media (min-width: 769px) {
  .t-art-book-wrapper {
    gap: clamp(38px, 4.9vw, 38px);
  }
}
.t-art-book-item {
  display: grid;
  justify-content: center;
  width: 100%;

  justify-items: center;
  grid-template: "pic text" ". ." 2rem "btn btn"/1fr 1fr;
}

@media (min-width: 769px) {
  .t-art-book-item {
    width: calc(25% - 28.5px);

    grid-template: "pic" 17.5rem "." 1rem "text" "." 2rem "btn";
  }
}
@media (max-width: 769px) {
  .t-art-book-item:not(:last-child) {
    position: relative;
    padding-bottom: 2.4rem;
  }
  /* .t-art-book-item:not(:last-child)::after {
  position:absolute;
  bottom:0;
  width:100%;
  height:.4rem;
  margin-top:2rem;
  background-image:url(https://melonbooks.akamaized.net/special/b/0/uribou/underwears9/images/line-dot.svg);
  background-position:center;
  background-repeat:no-repeat;
  content:"";
 } */
}
.t-art-book-item__price::before {
  margin-right: 0.1em;
  font-size: 0.7em;
  content: "各";
}

.t-art-book-item__pic {
  width: clamp(140px, 18.2vw, 230px);

  grid-area: pic;
}

.t-art-book-item__text {
  display: flex;
  flex-direction: column;
  align-items: center;

  grid-area: text;
  gap: 1.5rem;
}

.t-art-book-item__text-head-price {
  display: flex;
  flex-direction: column;

  gap: 0.5rem;
}

.t-art-book-item__text-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-art-book-item__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;

  gap: 0.5rem;
  grid-area: btn;
}

.t-art-book-normal-slider iframe {
  max-width: 140px;
}

@media (min-width: 769px) {
  .t-art-book-normal-slider iframe {
    max-width: 240px;
  }
}
/* --- goods ---------------------- */
.t-goods-list-wrapper {
  width: 100%;

  row-gap: clamp(28px, 3.6vw, 68px);
  -moz-column-gap: clamp(39px, 5.1vw, 78px);
  column-gap: clamp(39px, 5.1vw, 78px);
}

.t-goods-list-item {
  width: 39.5%;

  gap: clamp(12px, 1.6vw, 12px);
}

@media (min-width: 769px) {
  .t-goods-list-item {
    width: 16.7%;
  }
}
.t-goods-list-item__name {
  text-align: center;
}

.t-goods-slider iframe {
  width: 100%;
}

/* ==================================================
artist-list
================================================== */
.t-artist {
  display: flex;

  gap: 4.25rem;
}

/* artist-list-category-btn */
.t-artist-list-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: clamp(10px, 1.3vw, 10px);
}

.t-artist-list-btn {
  width: calc(20% - 9.6px);
}

@media (min-width: 769px) {
  .t-artist-list-btn {
    width: calc(10% - 10.8px);
  }
}
.t-artist-list-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  border-radius: 5px;
}

/* list */
.t-artist-list-wrapper {
  max-height: 500px;
  overflow-y: scroll;
}

@media (min-width: 769px) {
  .t-artist-list-wrapper {
    max-height: 500px;
    padding-right: 1rem;
  }
}
.t-artist-list-wrapper::-webkit-scrollbar {
  width: 8px;
}

.t-artist-list-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.t-artist-list-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #7c7c7c;
}

.t-artist-list-wrapper::-webkit-scrollbar-thumb:hover {
  background: #7c7c7c;
}

.t-artist-list__head {
  border: solid 1px;
  border-radius: 5px;
  text-align: center;

  padding-block: clamp(10px, 1.3vw, 12px);
}

.t-artist-list-item-wrapper {
  display: flex;
  flex-wrap: wrap;

  gap: clamp(10px, 1.3vw, 12px);
}

.t-artist-list-item {
  display: flex;
  align-items: center;
  width: calc(50% - 6px);
  padding: 0.2rem;
  border-radius: 5px;
  cursor: pointer;
}

@media (min-width: 769px) {
  .t-artist-list-item {
    width: calc(33.3333333333% - 8px);
  }
}
.t-artist-list-item__pic {
  width: clamp(45px, 5.9vw, 50px);
  border-radius: 5px;
}

.t-artist-list-item__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 900;
  letter-spacing: 0;

  gap: 0.1rem;
  padding-inline: clamp(6px, 0.8vw, 16px);
}

.t-artist-list-item__name::after {
  font-size: 0.6em;
  line-height: 1;
  content: "先生";
}

/* detail */
.t-artist-detail-wrapper {
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 769px) {
  .t-artist-detail-wrapper {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .t-artist-detail-wrapper.is-visible {
    opacity: 1;
  }
}
.t-artist-detail__pic {
  width: clamp(330px, 43vw, 400px);
}

.t-artist-detail__category {
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--f-font-base);
}

.t-artist-detail__name {
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 900;
  font-family: var(--f-font-base);
}

.t-artist-detail__name::after {
  font-size: 0.6em;
  content: "先生";
}

.t-artist-detail__sns {
  display: flex;
  justify-content: center;

  gap: 0.5rem;
}

.t-artist-detail__sns-item {
  width: 2.5rem;
}

a.t-artist-detail__shopping-btn {
  line-height: 1.4;
  text-align: center;
}

/* detail sp */
@media (max-width: 768px) {
  .t-artist-detail-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transform: translateY(-100%);
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    transition: 1s;

    padding-inline: 1.5rem;
  }
  .t-artist-detail-wrapper img {
    width: 100%;
    height: auto;
    max-height: 100%;
    white-space: pre;
  }
  .t-artist-detail-wrapper.is-modal {
    opacity: 1;
    transform: translateY(0);
  }
}
#t-artist-detail-pc,
#t-artist-detail-sp {
  display: contents;
}

.t-artist-detail__close-btn {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10000;
  border: none;
  background: none;
  font-size: 32px;
  cursor: pointer;
}

@media (min-width: 769px) {
  .t-artist-detail__close-btn {
    display: none;
  }
}
html:has(.t-artist-detail-wrapper.is-modal) .t-modal-overlay-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateY(0);
  width: 100vw;
  height: 100vh;
  transition: 0.5s;

  pointer-events: none;
}

html:has(.t-artist-detail-wrapper.is-modal) #t-modal-overlay {
  display: block;
  z-index: 1;
  width: 100vw;
  height: 25vh;
  background: linear-gradient(to top, #ffffff 0%, transparent 100%);

  pointer-events: auto;
}

/* ==================================================
goods art-book
================================================== */
.t-goods-detail {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 2.5px 2.5px 0 0;
  background-repeat: repeat;

  padding-inline: 1rem;
  padding-block: 1rem;
  gap: 1rem;
}

@media (min-width: 769px) {
  .t-goods-detail {
    flex-direction: row;

    gap: 3rem;
    padding-inline: 2rem;
  }
}
.t-goods-detail::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(326deg, #a77754, #d1a975, #a77754);
  content: "";
}

.t-goods-page-content .t-goods-detail {
  justify-content: flex-end;

  padding-block-start: 15rem;
}

@media (min-width: 769px) {
  .t-goods-page-content .t-goods-detail {
    justify-content: flex-start;

    padding-inline-start: 5rem;
    padding-block: 3rem;
  }
}
.t-goods-page-content .t-goods-detail::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #d5b48a 58%, #ffe7c7 78%, #d5b48a 97%);
  content: "";
}

@media (min-width: 769px) {
  .t-goods-page-content .t-goods-detail::before {
    background: linear-gradient(304deg, #d5b48a 58%, #ffe7c7 78%, #d5b48a 97%);
  }
}
.t-goods-detail__bg {
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, transparent 1%, black 30%);
  mask-image: linear-gradient(to top, transparent 1%, black 30%);
}

@media (min-width: 769px) {
  .t-goods-detail__bg {
    top: 50%;
    right: 0;
    left: unset;
    transform: translateY(-50%);

    -webkit-mask-image: linear-gradient(to right, transparent 1%, black 30%);
    mask-image: linear-gradient(to right, transparent 1%, black 30%);
  }
}
.t-goods-page-content .t-goods-detail__bg {
  opacity: 1;

  -webkit-mask-image: linear-gradient(to top, transparent 1%, black 17%);
  mask-image: linear-gradient(to top, transparent 1%, black 17%);
  filter: none;
}

@media (min-width: 769px) {
  .t-goods-page-content .t-goods-detail__bg {
    top: 0;
    right: 0;
    left: unset;
    transform: none;
    width: 60%;

    -webkit-mask-image: linear-gradient(to right, transparent 1%, black 20%);
    mask-image: linear-gradient(to right, transparent 1%, black 20%);
  }
}
.t-goods-content .t-section-wrapper {
  border-radius: 0 0 5px 5px;
}

.t-goods-detail__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  width: 100%;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8784313725);

  gap: 2rem;
  padding-inline: 1rem;
  padding-block: 1rem;
}

@media (min-width: 769px) {
  .t-goods-detail__text {
    width: 45%;

    padding-inline: 3rem;
  }
}
.t-goods-detail__pic {
  width: clamp(300px, 44.3vw, 450px);
}

.t-goods-detail__pic--slider {
  width: -moz-fit-content;
  width: fit-content;
}

.t-goods-detail__pic--slider .dot {
  background: #ffffff;
}

.t-goods-detail__border-01 {
  width: 100%;
  border-radius: 2px;
  background-color: #e9e3da;
  text-align: center;

  padding-inline: 0.5rem;
  padding-block: 0.5rem;
}

.t-goods-detail__border-01 span {
  text-box-trim: trim-both;
}

.t-goods-detail__border-02 {
  width: 100%;
  text-align: center;

  padding-inline: 0.5rem;
  padding-block: 0.5rem;
  border-block: solid 1px;
}

.t-art-book-shop-page-slider iframe {
  max-width: 240px;
}

@media (min-width: 769px) {
  .t-art-book-shop-page-slider iframe {
    max-width: 440px;
  }
}
/* ==================================================
message
================================================== */
.t-message {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  -moz-column-gap: clamp(20px, 2.6vw, 60px);
  column-gap: clamp(20px, 2.6vw, 60px);
  row-gap: clamp(38px, 4.9vw, 118px);
}

.t-message__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}

.t-message__item__pic {
  width: clamp(150px, 19.5vw, 300px);
}

.t-message__item__name {
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 900;
  font-family: var(--f-font-base);
}

.t-message__item__name::after {
  font-size: 0.6em;
  content: "先生";
}

.t-message__item {
  position: relative;
}

.t-new-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 10;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  background-color: #d75353;
  color: white;
  font-weight: bold;
  font-size: 10px;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ///// responsive ///////////////////////////////// */
.sp {
  display: none;
}

.pc {
  display: block;
}

.br_pc {
  display: block;
}

@media (max-width: 769px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .br {
    display: block;
  }
  .br_pc {
    display: none;
  }
}