@charset "UTF-8";

/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #111;
  font-family: "Times New Roman", Times, serif;
}

a {
  color: inherit;
  text-decoration: none;
}

a:link,
a:visited,
a:active {
  color: rgba(var(--color-foreground), 0.75) !important;
  font-weight: normal !important;
}


/* =========================================================
   BORDER / STORE BUTTON
========================================================= */

.border {
  text-align: center;
  margin: 60px 0;
}

.store-btn {
  display: inline-block;

  padding: 14px 60px;

  border: 1px solid #000;

  color: #000;
  text-decoration: none;

  font-size: 11px;
  letter-spacing: 0.25em;

  transition: 0.3s ease;
}

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


/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: absolute;
  bottom: 0;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: sticky;
  top: 0;

  min-height: 110vh;
  padding-bottom: 10vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 90%;
  height: auto;

  display: block;
  margin: 0 auto;
}


/* =========================================================
   CONTENT
========================================================= */

.content {
  position: relative;
  z-index: 2;

  margin-top: -10vh;

  background: #fff;

  padding: 4vw 12vw;
}

.content-inner {
  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   SINGLE IMAGE
========================================================= */

.look-single {
  margin-bottom: 10vw;
}

.look-single img {
  width: 100%;

  display: block;

  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* =========================================================
   2 COLUMN GRID
========================================================= */

.look-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-bottom: 10vw;
}

.look-grid img {
  width: 80%;

  display: block;

  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.look-grid > :nth-child(odd) img {
  margin-left: auto;
  margin-right: 0;
}

.look-grid > :nth-child(even) img {
  margin-left: 0;
  margin-right: auto;
}


/* =========================================================
   CREDIT
========================================================= */

.credit {
  margin-top: 16px;

  display: flex;
  justify-content: flex-end;
}

.credit h2 {
  font-size: 18px;
  font-weight: 400;

  letter-spacing: 0.15em;

  margin-bottom: 10px;
}

.credit p {
  font-size: 9px;

  line-height: 1.9;

  text-align: right;

  letter-spacing: 0.1em;
}


/* =========================================================
   TEXT BLOCK
========================================================= */

.text-block {
  max-width: 700px;

  margin: 0 auto 10vw;
}

.text-block h2 {
  font-size: 24px;
  font-weight: 400;

  letter-spacing: 0.15em;

  margin-bottom: 25px;
}

.text-block p {
  font-size: 14px;

  line-height: 2.4;

  letter-spacing: 0.08em;
}


/* =========================================================
   LOOK LARGE
========================================================= */

.look-large {
  width: min(30vw, 550px);

  margin: 8vw auto 0;
}

.look-large img {
  width: 100%;

  display: block;
}

.look-large .credit {
  margin-top: 16px;
  margin-bottom: -16px;

  text-align: right;
}


/* =========================================================
   SPACER
========================================================= */

.space {
  height: 10vw;
}


/* =========================================================
   INTRO
========================================================= */

.intro {
  position: relative;

  z-index: 10;

  background: #fff;
}

.intro-banner {
  position: relative;

  width: 100%;
  height: 90vw;

  aspect-ratio: 16 / 9;

  overflow: hidden;
}


/* =========================================================
   FADE GRID
========================================================= */

.fade-grid {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  opacity: 0;

  transition: opacity 1s ease;
}

.fade-grid.active {
  opacity: 1;

  z-index: 2;
}

.fade-grid img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.intro-text {
  max-width: 700px;

  margin: 0 auto;

  padding: 80px 30px 60px;

  text-align: left;
}

.intro-text h1 {
  font-size: 28px;
  font-weight: 400;

  letter-spacing: 0.2em;

  margin-bottom: 40px;
}

.intro-text p {
  font-size: 13px;

  line-height: 1.5;

  letter-spacing: 0.08em;
}

.sub-title {
  font-size: 10px;

  letter-spacing: 0.3em;

  margin-bottom: 15px;

  text-transform: uppercase;
}


/* =========================================================
   STAFF CREDIT
========================================================= */

.staff-credit {
  text-align: center;

  margin: 100px 0 50px;
}

.staff-credit p {
  font-size: 10px;

  line-height: 2.2;

  letter-spacing: 0.15em;

  font-weight: 400;
}

.staff-instagram {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 5px;

  color: #000;

  text-decoration: none;

  font-size: 10px;

  letter-spacing: 0.12em;

  transition: opacity 0.3s ease;
}

.instagram-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 12px;
  height: 12px;

  border: 1px solid #000;

  border-radius: 3px;

  font-size: 8px;
  line-height: 1;
}

.staff-instagram:hover {
  opacity: 0.5;
}


/* =========================================================
   FADE IMAGE
========================================================= */

.fade-image {
  position: relative;
}

.fade-image img {
  position: absolute;

  inset: 0;

  object-fit: cover;

  opacity: 0;

  transition: opacity 1.5s ease;
}

.fade-image img.active {
  opacity: 1;
}


/* =========================================================
   LOOK SECTION
========================================================= */

.look-section {
  position: relative;

  padding: 150px 0;
}

.look-section::after {
  content: "";

  position: absolute;

  bottom: -120px;
  left: 0;

  width: 100%;
  height: 120px;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
}


/* =========================================================
   SMALL CENTER
========================================================= */

.small-center {
  display: block;

  width: 60%;

  margin: 0 auto;
}


/* =========================================================
   SLIDE TEXT
========================================================= */

.slide-text {
  position: absolute;

  inset: 0;

  z-index: 10;

  color: #fff;
}


/* =========================================================
   NUMBER
========================================================= */

.number {
  display: inline-block;

  font-size: 30px;
  font-weight: 700;

  margin-right: 8px;

  transform: rotate(-90deg);
}

.vertical-number {
  writing-mode: vertical-rl;

  text-orientation: upright;
}


/* =========================================================
   SPLIT LAYOUT
========================================================= */

.split-layout {
  display: flex;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}


/* =========================================================
   SPLIT LEFT
========================================================= */

.split-left {
  position: relative;

  width: 50%;
  height: 100%;

  overflow: hidden;
}

.fade-images {
  position: relative;

  width: 100%;
  height: 100%;
}

.fade-images img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  animation: fadeImage 6s infinite;
}

.fade-images img:first-child {
  animation-delay: 0s;
}

.fade-images img:nth-child(2) {
  animation-delay: 3s;
}

@keyframes fadeImage {

  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}


/* =========================================================
   SPLIT RIGHT
========================================================= */

.split-right {
  position: relative;

  width: 50%;
  height: 100%;

  background: #fff;
}


/* =========================================================
   VERTICAL TITLE
========================================================= */

.vertical-title {
  position: absolute;

  top: 45%;
  left: 10%;

  transform: translateY(-50%);

  writing-mode: horizontal-tb;

  text-orientation: mixed;

  height: auto;

  margin: 0;
  padding: 0;

  font-family: "Noto Serif JP", serif;

  font-size: 14px;
  font-weight: 400;

  line-height: 2;

  letter-spacing: 0.12em;
}

.title {
  font-size: 18px;
}

.catch {
  font-size: 15px;
}

.text {
  font-size: 11px;

  line-height: 2;
}


/* =========================================================
   RIGHT TOP
========================================================= */

.right-top {
  position: absolute;

  top: 10px;
  right: 30px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: "Times New Roman", Times, serif;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.1em;
}

.right-top img {
  width: 50px;
  height: 150px;

  object-fit: contain;
}


/* =========================================================
   RIGHT BOTTOM
========================================================= */

.right-bottom {
  position: absolute;

  right: 25px;
  bottom: 25px;

  display: flex;

  align-items: flex-end;

  gap: 18px;

  color: #fff;

  font-family: "Times New Roman", Times, serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.14em;
}


/* =========================================================
   GRAPHIC ARROW
========================================================= */

.graphic-arrow {
  position: relative;

  width: 45px;
  height: 55px;
}

.graphic-arrow::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 1px;
  height: 55px;

  background: #fff;
}

.graphic-arrow::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 45px;
  height: 1px;

  background: #fff;
}


/* =========================================================
   FIXED TEXT
========================================================= */

.fixed-text {
  position: fixed;
  font-size: 12px;
  top: 0;
  left: 0;

  width: 100%;
  height: 45px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 0 15px;

  background: #fff;
  color: #053924 !important;

  z-index: 9999;
}

.fixed-title,
.fixed-catch {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

.fixed-catch {
  position: relative;

  padding-left: 15px;
}

.fixed-catch::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 1px;
  height: 14px;

  background: #000;

  transform: translateY(-50%);
}


/* =========================================================
   FIXED LABEL
========================================================= */

/*
  ここが今回の重要部分。

  fixed-label自体のサイズを固定。
  中の.labelも同じサイズに固定。

  文章量が増減しても
  親のサイズは変わらない。
*/

.fixed-label {
  position: fixed;
  right: 20px;
  width: 420px;
  height: 160px;
  z-index: 9999;
  opacity: 1;
  transform: translateY(-50%);
  box-sizing: border-box;
  text-align: left;
}


.fixed-label {
  transform: none;
}

.fixed-label .label {
  top: 0;
}



/* =========================================================
   LEFT LABEL
========================================================= */



.left-label .label {
  width: 100%;
  height: 100%;

  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.15em;

  text-align: left;
  white-space: normal;
}


/* =========================================================
   LABEL
========================================================= */

.label {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  color: #000;

  opacity: 0;

  transition: opacity 0.8s ease;

  font-family: inherit;

  font-size: 11px;

  line-height: 1.8;

  letter-spacing: 0.15em;

  white-space: normal;

  text-align: left;

  transform: none;

  overflow: visible;
}

.label.active {
  opacity: 1;
}


/* =========================================================
   LEFT LABEL TEXT
========================================================= */



.left-label .label .text-line {
  color: #000;

  transition: color 0.25s ease;
}

.left-label .label .text-line.on-image {
  color: #fff;
}


/* =========================================================
   RIGHT LABEL
========================================================= */

.fixed-label:not(.left-label) {

  transform: none;
  text-align: right;
}

.label {
  text-align: right;
}


/* =========================================================
   PRODUCT CHECK
========================================================= */

.label .product-check {
  opacity: 1 !important;

  visibility: visible !important;

  transition: none !important;

  animation: none !important;
}

.label.active .product-check {
  display: inline-block !important;

  opacity: 1 !important;

  visibility: visible !important;

  margin-top: 14px !important;

  padding: 8px 24px !important;

  border: 1px solid #000 !important;

  background: #fff !important;

  color: #000 !important;

  text-decoration: none !important;

  font-family: inherit !important;

  font-size: 9px !important;

  line-height: 1 !important;

  letter-spacing: 0.25em !important;

  white-space: nowrap !important;
}

.label.active .product-check:hover {
  background: #000 !important;

  color: #fff !important;
}

.product-check:hover {
  background: #000;

  color: #fff;
}


/* =========================================================
   FIXED SVG
========================================================= */

.fixed-svg {
  position: fixed;

  top: 30px;
  right: 40px;

  z-index: 9999;
}

.fixed-svg img {
  display: block;

  width: 50px;
  height: 150px;

  object-fit: contain;
}


/* =========================================================
   INTRO ACTIVE
========================================================= */

body.intro-active .fixed-svg,
body.intro-active .fixed-label {
  display: none;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.fixed-menu {
  position: fixed;

  left: 35px;
  bottom: 30px;

  z-index: 10000;

  display: flex;

  align-items: center;

  gap: 9px;

  cursor: pointer;
}

.menu-line {
  position: relative;

  display: block;

  width: 28px;
  height: 28px;

  border: 1px solid #000;

  border-radius: 50%;

  transition: background 0.35s ease;
}

.menu-line::before,
.menu-line::after {
  content: "";

  position: absolute;

  left: 7px;

  width: 12px;
  height: 1px;

  background: #000;

  transition: transform 0.35s ease;
}

.menu-line::before {
  top: 10px;
}

.menu-line::after {
  top: 15px;
}

.menu-text {
  font-family: Arial, Helvetica, sans-serif;

  font-size: 9px;

  letter-spacing: 0.25em;

  color: #000;
}


/* =========================================================
   SERIES MENU
========================================================= */

.series-menu {
  position: fixed;

  inset: 0;

  z-index: 20000;

  background: #fff;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.series-menu.active {
  opacity: 1;

  visibility: visible;
}

.series-menu-inner {
  width: 80%;
  max-width: 1100px;

  margin: 0 auto;

  padding-top: 12vh;
}

.series-label {
  margin: 0 0 70px;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  letter-spacing: 0.3em;
}


/* =========================================================
   SERIES ITEM
========================================================= */

.series-item {
  display: flex;

  align-items: baseline;

  width: 100%;

  padding: 22px 0;

  border-bottom: 1px solid #ddd;

  color: #000;

  text-decoration: none;

  transition: padding-left 0.35s ease;
}

.series-number {
  width: 60px;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 9px;
  color: #000;
letter-spacing: 0.15em;
}

.series-title {
  font-family: "Times New Roman", serif;

  font-size: clamp(24px, 3.5vw, 52px);

  line-height: 1;
  color: #000;  
letter-spacing: 0.02em;
}

.series-item:hover {
  padding-left: 20px;
}


/* =========================================================
   SERIES CLOSE
========================================================= */

.series-close {
  position: absolute;

  top: 30px;
  right: 40px;

  padding: 0;

  border: 0;

  background: none;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 9px;

  letter-spacing: 0.25em;
  color: #000;
cursor: pointer;
}

.series-close::before {
  content: "×";

  margin-right: 8px;

  font-size: 15px;

  vertical-align: -1px;
}


/* =========================================================
   DIV LOGO
========================================================= */

.divlogo {
  height: auto;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  /* =======================================================
     CONTENT
  ======================================================= */

  .content {
    padding: 8vw 5vw;

    margin-top: -5vh;
  }


  /* =======================================================
     INTRO
  ======================================================= */

  .intro {
    position: relative !important;

    width: 100% !important;

    height: 100svh !important;
    min-height: 100svh !important;

    overflow: hidden !important;
  }

  .split-layout {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100svh !important;

    overflow: hidden !important;
  }


  /* =======================================================
     SP BACKGROUND
  ======================================================= */

  .split-left {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    overflow: hidden !important;
  }

  .fade-images {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
  }

  .fade-images img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
  }


  /* =======================================================
     SP RIGHT
  ======================================================= */

  .split-right {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: transparent !important;

    z-index: 2 !important;
  }


  /* =======================================================
     SP TITLE
  ======================================================= */

  .vertical-title {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 88% !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    writing-mode: horizontal-tb !important;

    text-orientation: mixed !important;

    text-align: center !important;

    font-family: "Noto Serif JP", serif !important;

    font-size: 11px !important;

    line-height: 2 !important;

    letter-spacing: 0.08em !important;

    color: #fff !important;
  }

  .vertical-title .title {
    display: inline-block !important;

    font-size: 25px !important;

    line-height: 1.2 !important;

    letter-spacing: 0.08em !important;
  }

  .vertical-title .catch {
    display: inline-block !important;

    margin-top: 8px !important;

    font-size: 11px !important;

    line-height: 1.5 !important;

    letter-spacing: 0.12em !important;
  }

  .vertical-title .text {
    display: block !important;

    margin-top: 20px !important;

    font-size: 9px !important;

    line-height: 2 !important;

    letter-spacing: 0.06em !important;
  }


  /* =======================================================
     SP RIGHT TOP
     
     HTMLが <picture> の場合でもOK
  ======================================================= */

  .right-top {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    width: auto !important;

    z-index: 3 !important;
  }

  .right-top img {
    width: 35px !important;

    height: auto !important;

    object-fit: contain !important;
  }


  /* =======================================================
     SP RIGHT BOTTOM
  ======================================================= */

  .right-bottom {
    position: absolute !important;

    right: 18px !important;
    bottom: 20px !important;

    display: flex !important;

    align-items: flex-end !important;

    gap: 10px !important;

    z-index: 3 !important;

    font-size: 8px !important;

    letter-spacing: 0.15em !important;
  }

  .graphic-arrow {
    width: 30px !important;
    height: 40px !important;
  }

  .graphic-arrow::before {
    height: 40px !important;
  }

  .graphic-arrow::after {
    width: 30px !important;
  }


  /* =======================================================
     SP INTRO BANNER
  ======================================================= */

  .intro-banner {
    height: 70vw;
  }

  .fade-grid {
    gap: 5px;
  }


  /* =======================================================
     SP INTRO TEXT
  ======================================================= */

  .intro-text {
    max-width: 100%;

    padding: 50px 25px 70px;
  }

  .intro-text h1 {
    font-size: 22px;

    margin-bottom: 25px;
  }

  .sub-title {
    font-size: 9px;

    letter-spacing: 0.2em;
  }

  .intro-text p {
    font-size: 11px;

    line-height: 2.2;
  }


  /* =======================================================
     SP LOOK GRID
  ======================================================= */

  .look-grid {
    gap: 15px;

    margin-bottom: 15vw;
  }

  .look-grid img {
    aspect-ratio: auto;

    height: auto;
  }


  /* =======================================================
     SP LOOK LARGE
  ======================================================= */

  .look-large {
    width: 70vw;

    margin: 15vw auto 0;
  }


  /* =======================================================
     SP CREDIT
  ======================================================= */

  .credit {
    margin-top: 10px;
  }

  .credit p {
    font-size: 8px;

    line-height: 1.8;

    letter-spacing: 0.08em;
  }


  /* =======================================================
     SP STAFF
  ======================================================= */

  .staff-credit {
    margin: 80px 0 40px;
  }

  .staff-credit p {
    font-size: 9px;

    line-height: 2;
  }


  /* =======================================================
     SP STORE BUTTON
  ======================================================= */

  .store-btn {
    width: 100%;

    max-width: 280px;

    padding: 14px 20px;

    font-size: 10px;
  }


  /* =======================================================
     SP TEXT BLOCK
  ======================================================= */

  .text-block {
    margin-bottom: 15vw;
  }

  .text-block h2 {
    font-size: 18px;

    margin-bottom: 15px;
  }

  .text-block p {
    font-size: 12px;

    line-height: 2.2;
  }


  /* =======================================================
     SP LOGO
  ======================================================= */

  .divlogo {
    width: 250px;

    height: auto;

    margin-bottom: 15px;
  }


  /* =======================================================
     SP FIXED LABEL
  ======================================================= */

.left-label {
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  width: calc(100vw - 40px);
  height: 140px;
}
	
	

  .left-label .label {
    width: 100%;
    height: 100%;

    font-size: 9px;

    line-height: 1.8;
  }


  .fixed-label:not(.left-label) .label {
    width: 100%;
    height: 100%;

    font-size: 9px !important;

    line-height: 1.8;
  }


  /* =======================================================
     SP FIXED TEXT
  ======================================================= */

  .fixed-text {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 45px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 0 15px;

    background: #fff;
    color: #000;

    z-index: 9999;
  }

  .fixed-title,
  .fixed-catch {
    display: block;

    margin: 0;
    padding: 0;

    line-height: 1;
  }

  .fixed-catch {
    position: relative;

    padding-left: 15px;
  }

  .fixed-catch::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 1px;
    height: 14px;

    background: #000;

    transform: translateY(-50%);
  }


  /* =======================================================
     SP MENU
  ======================================================= */

  .fixed-menu {
    left: 20px;
    bottom: 20px;
  }

}

.fixed-label.left-label .label-text {
  display: inline-block;
  max-width: 350px;
}


.fixed-label:not(.left-label) {
  top: auto !important;
  bottom: 20px !important;
  transform: none !important;
}

.fixed-label:not(.left-label) .label {
  top: auto !important;
  bottom: 20px !important;
  height: auto !important;
}


@media screen and (max-width: 767px) {
  .fixed-svg {
    display: none !important;
  }
}



.small-center {
  border: 2px solid #000;
}


.left-label {
  left: 50%;　!important;
  top: 50%;
  right: auto;
  width: 300px; /* 420px → 300px */
  height: 160px;

  text-align: left;
}



.left-label .label {
  display: flex !important;
  align-items: flex-start !important;
}

.left-label .label-text {
  display: block !important;
  width: 100%;
}


.left-label {
  height: 160px !important;
}

.left-label .label {
  height: 160px !important;
}


.fixed-check {
  position: fixed;
  right: 25px;
  bottom: 10px;
  z-index: 10001;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 90px;
  height: 26px;

  border: 1px solid #000;
  color: #000 !important;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-decoration: none;
}

.fixed-check:hover {
  background: #000;
  color: #fff !important;
}