/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital@1&family=Zen+Kaku+Gothic+Antique:wght@500;700;900&display=swap");
/*!
Theme Name: joie_2026
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theorient-kobe-2026
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

theorient-kobe-2026 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ====================================================
  Foundation
==================================================== */
/***
  Base CSS:
  The new CSS reset - version 1.8.4 (last updated 14.2.2023)
  GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

a,
button {
  cursor: pointer;
}

ol,
ul,
menu {
  list-style: none;
}

video {
  -webkit-filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
          filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none;
}

video:focus-visible {
  outline: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

img,
picture,
svg,
video,
iframe {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

iframe {
  border: none;
}

table {
  border-collapse: collapse;
}

input,
textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

:where(pre) {
  all: revert;
}

::-webkit-input-placeholder {
  color: unset;
}

::-moz-placeholder {
  color: unset;
}

:-ms-input-placeholder {
  color: unset;
}

::-ms-input-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

::marker {
  content: initial;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
}

/* #Typography
----------------------------------------------------------------- */
body,
html {
  color: #645C59;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 0.7320644217vw;
}
@media screen and (min-width: 1366px) {
  body,
  html {
    font-size: 10px;
  }
}
@media screen and (max-width: 900px ) {
  body,
  html {
    font-size: 2.4875621891vw;
  }
}

b,
strong,
.bold {
  font-weight: 700;
}

/* #base
----------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: left;
}

svg {
  width: 100%;
  height: auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

a {
  display: block;
  text-decoration: none;
}
a[href*="tel:"] {
  display: inline-block;
}

ul li {
  list-style: none;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

/* ====================================================
  Layout
==================================================== */
.l-wrapper {
  overflow-x: hidden;
}
.l-wrapper img,
.l-wrapper picture {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ====================================================
  Component
==================================================== */
/* ====================================================
  Javascript
==================================================== */
.js-scrollAnimation--fadeIn {
  opacity: 0;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.js-scrollAnimation--fadeIn.is-active {
  opacity: 1;
}
.js-scrollAnimation--fadeInUp {
  opacity: 0;
  -webkit-transform: translateY(4rem);
          transform: translateY(4rem);
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}
.js-scrollAnimation--fadeInUp.is-active {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}
.js-scrollAnimation--maskOutX {
  clip-path: inset(0 100% 0 0);
  -webkit-transition-duration: 0.6666666667s;
          transition-duration: 0.6666666667s;
  -webkit-transition-property: clip-path;
  transition-property: clip-path;
}
.js-scrollAnimation--maskOutX.is-active {
  clip-path: inset(0);
}
.js-scrollAnimation--zoomImage {
  opacity: 0;
  overflow: hidden;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.js-scrollAnimation--zoomImage img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition-duration: 1.3333333333s;
          transition-duration: 1.3333333333s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.js-scrollAnimation--zoomImage.is-active {
  opacity: 1;
}
.js-scrollAnimation--zoomImage.is-active img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ====================================================
  Project
==================================================== */
.p-mv {
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 900px ) {
  .p-mv {
    height: calc(100vh - 6.3rem);
    height: calc(100svh - 6.3rem);
  }
}
.p-mv__inner {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 900px ) {
  .p-mv__inner {
    position: absolute;
    inset: 0;
  }
}
.p-mv__image {
  width: 100%;
}
@media screen and (max-width: 900px ) {
  .p-mv__image {
    width: 100%;
    height: 100%;
  }
}
.p-mv__image picture,
.p-mv__image img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 900px ) {
  .p-mv__image picture,
  .p-mv__image img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.p-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #D0CBC3;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.35s cubic-bezier(0.08, 0.82, 0.17, 1), -webkit-box-shadow 0.3s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.35s cubic-bezier(0.08, 0.82, 0.17, 1), -webkit-box-shadow 0.3s ease;
  transition: transform 0.35s cubic-bezier(0.08, 0.82, 0.17, 1), box-shadow 0.3s ease, background-color 0.3s ease;
  transition: transform 0.35s cubic-bezier(0.08, 0.82, 0.17, 1), box-shadow 0.3s ease, background-color 0.3s ease, -webkit-transform 0.35s cubic-bezier(0.08, 0.82, 0.17, 1), -webkit-box-shadow 0.3s ease;
  will-change: transform;
}
.p-header.is-scrolled {
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.p-header.is-hide {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.p-header.is-menu-open {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.p-header__inner {
  width: 95%;
  height: 7.5rem;
  margin-inline: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 7.4rem 6.3rem 1fr 6.3rem 16.9rem;
  grid-template-columns: 7.4rem 1fr 16.9rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6.3rem;
}
@media screen and (max-width: 900px ) {
  .p-header__inner {
    width: 100%;
    height: 6.3rem;
    padding-left: 2rem;
    -ms-grid-columns: 2rem 0 1fr 0 6.3rem;
    grid-template-columns: 2rem 1fr 6.3rem;
    gap: 0;
    position: relative;
    z-index: 10;
  }
}
.p-header__logo {
  width: 7.4rem;
}
@media screen and (max-width: 900px ) {
  .p-header__logo {
    width: 6.5rem;
    margin-inline: auto;
  }
}
@media screen and (min-width: 901px ) {
  .p-header__insSp {
    display: none;
  }
}
@media screen and (max-width: 900px ) {
  .p-header__insSp {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #587061;
  }
}
.p-header__insSpIcon {
  display: block;
  width: 3.3rem;
  height: 3.3rem;
}
@media screen and (min-width: 901px ) {
  .p-header__menuButton {
    display: none;
  }
}
@media screen and (max-width: 900px ) {
  .p-header__menuButton {
    width: 2rem;
    height: 1.6rem;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    cursor: pointer;
    z-index: 12;
  }
}
.p-header__menuLine {
  display: block;
}
@media screen and (max-width: 900px ) {
  .p-header__menuLine {
    width: 100%;
    height: 0.2rem;
    background-color: #645C59;
    -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transition: transform 0.25s ease, opacity 0.25s ease, -webkit-transform 0.25s ease;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}
.p-header__nav {
  margin-left: auto;
}
@media screen and (max-width: 900px ) {
  .p-header__nav {
    position: fixed;
    top: 5.8rem;
    left: 0;
    width: 100%;
    height: calc(100dvh - 6.3rem);
    padding: 3.2rem 2rem;
    background-color: #D0CBC3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 11;
  }
}
.p-header__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 5.9rem;
}
@media screen and (max-width: 900px ) {
  .p-header__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 2.4rem;
  }
}
.p-header__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.2;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.p-header__link:hover {
  opacity: 0.7;
}
@media screen and (max-width: 900px ) {
  .p-header__link {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.p-header__linkEn {
  font-family: "Barlow", sans-serif;
  font-size: 1.6rem;
  line-height: 0.8;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.p-header__linkJa {
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 500;
}
.p-header__follow {
  height: 4.5rem;
  background: #587061;
  color: #ffffff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.7rem;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.p-header__follow span {
  font-family: "Barlow", sans-serif;
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.p-header__follow:hover {
  opacity: 0.8;
}
@media screen and (max-width: 900px ) {
  .p-header__follow {
    display: none;
  }
}
.p-header__followIcon {
  width: 3.3rem;
  height: 3rem;
}
@media screen and (max-width: 900px ) {
  .p-header.is-menu-open .p-header__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .p-header.is-menu-open .p-header__menuLine:nth-child(1) {
    -webkit-transform: translateY(0.4rem) rotate(45deg);
            transform: translateY(0.4rem) rotate(45deg);
  }
  .p-header.is-menu-open .p-header__menuLine:nth-child(2) {
    opacity: 0;
  }
  .p-header.is-menu-open .p-header__menuLine:nth-child(3) {
    -webkit-transform: translateY(-1.1rem) rotate(-45deg);
            transform: translateY(-1.1rem) rotate(-45deg);
  }
}

#page.site {
  padding-top: 7.5rem;
}
@media screen and (max-width: 900px ) {
  #page.site {
    padding-top: 6.3rem;
  }
}

.p-point {
  padding-top: 11.2rem;
  padding-bottom: 15.7rem;
  position: relative;
}
@media screen and (max-width: 900px ) {
  .p-point {
    padding-top: 5.7rem;
    padding-bottom: 7rem;
  }
}
.p-point::before {
  content: "";
  top: 0;
  position: absolute;
  background-image: url(./assets/images/common/point_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.p-point__heading {
  width: 59.6rem;
  margin-inline: auto;
}
@media screen and (max-width: 900px ) {
  .p-point__heading {
    width: 35.3rem;
  }
}
.p-point__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 4.8rem;
  gap: 3.4rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 122.2rem;
  margin-inline: auto;
}
@media screen and (max-width: 900px ) {
  .p-point__inner {
    width: 37rem;
    gap: 0.9rem;
  }
}
.p-point__item {
  width: 100%;
  background-color: #F7F4F0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 61.2rem 61rem;
  grid-template-columns: 61.2rem 61rem;
}
@media screen and (max-width: 900px ) {
  .p-point__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem;
    padding-top: 2.3rem;
  }
}
@media screen and (max-width: 900px ) {
  .p-point__item--02 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.p-point__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-inline: auto;
  gap: 2rem;
  width: 52rem;
}
@media screen and (max-width: 900px ) {
  .p-point__content {
    width: 33rem;
  }
}
.p-point__content h3 {
  width: 8.7rem;
}
.p-point__content h4 {
  color: #645C59;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 900px ) {
  .p-point__content h4 {
    font-size: 2rem;
  }
}
.p-point__content p {
  color: #645C59;
  font-size: 2rem;
  line-height: 1.9;
  font-weight: 700;
}
@media screen and (max-width: 900px ) {
  .p-point__content p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 900px ) {
  .p-point__image {
    margin-top: 3rem;
  }
}

.p-product {
  background-color: #F7F4F0;
  padding-top: 12.7rem;
  padding-bottom: 15.6rem;
}
@media screen and (max-width: 900px ) {
  .p-product {
    padding-top: 8.2rem;
    padding-bottom: 8rem;
  }
}
.p-product__heading {
  width: 33.4rem;
  margin-inline: auto;
}
@media screen and (max-width: 900px ) {
  .p-product__heading {
    width: 18rem;
  }
}
.p-product__category {
  position: relative;
}
.p-product__category::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-image: url(./assets/images/common/product_category_line.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 133rem;
  height: 2px;
}
@media screen and (max-width: 900px ) {
  .p-product__category::before {
    background-image: url(./assets/images/common/product_category_line_sp.svg);
    width: 100%;
  }
}
.p-product__category::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #F7F4F0;
  width: 24.7rem;
  height: 7.4rem;
}
@media screen and (max-width: 900px ) {
  .p-product__category::after {
    width: 13.5rem;
    height: 4.1rem;
  }
}
.p-product__category img {
  width: 6.4rem;
}
@media screen and (max-width: 900px ) {
  .p-product__category img {
    width: 3.1rem;
  }
}
.p-product__category p {
  color: #645C59;
  font-size: 2.6rem;
  line-height: 150%;
  font-weight: 700;
}
@media screen and (max-width: 900px ) {
  .p-product__category p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 900px ) {
  .p-product__category {
    margin-top: 0;
  }
}
.p-product__categoryInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.3rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 900px ) {
  .p-product__categoryInner {
    gap: 0.5rem;
  }
}
.p-product__innerWrapper {
  margin-top: 4.2rem;
}
@media screen and (max-width: 900px ) {
  .p-product__innerWrapper {
    margin-top: 4rem;
  }
}
.p-product__inner {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  margin-inline: auto;
}
@media screen and (max-width: 900px ) {
  .p-product__inner {
    margin-inline: auto;
  }
}
.p-product__inner:not(:first-of-type) {
  margin-top: 12.5rem;
}
@media screen and (max-width: 900px ) {
  .p-product__inner:not(:first-of-type) {
    margin-top: 6.5rem;
  }
}
.p-product__inner:nth-of-type(even) .p-product__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7rem;
}
@media screen and (max-width: 900px ) {
  .p-product__inner:nth-of-type(even) .p-product__slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.8rem;
  }
}
.p-product__inner:nth-of-type(even) .p-product__media::before {
  top: 7rem;
  right: -8.6rem !important;
  left: auto;
}
@media screen and (max-width: 900px ) {
  .p-product__inner:nth-of-type(even) .p-product__media::before {
    top: 3.4rem;
    right: -2.9rem !important;
    left: auto;
  }
}
.p-product .p-product__splide {
  position: relative;
}
.p-product .p-product__splide .splide__track {
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.p-product .p-product__splide .splide__list {
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}
.p-product .p-product__splide .splide__slide {
  height: auto !important;
}
.p-product .p-product__splide .splide__pagination {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  padding: 0;
}
@media screen and (max-width: 900px ) {
  .p-product .p-product__splide .splide__pagination {
    gap: 1rem;
    margin-top: 2rem;
  }
}
.p-product .p-product__splide .splide__pagination li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 0;
}
.p-product .p-product__splide .splide__pagination .splide__pagination__page {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #645C59;
  opacity: 0.25;
  cursor: pointer;
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
}
@media screen and (max-width: 900px ) {
  .p-product .p-product__splide .splide__pagination .splide__pagination__page {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.p-product .p-product__splide .splide__pagination .splide__pagination__page.is-active {
  opacity: 1;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
@media screen and (max-width: 900px ) {
  .p-product__list {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
}
.p-product__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin-top: 6.5rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 900px ) {
  .p-product__slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.8rem;
    margin-top: 3.3rem;
    padding-bottom: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-product__imageWrap {
  position: relative;
}
.p-product__image {
  aspect-ratio: 520/520;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 900px ) {
  .p-product__image {
    width: 34.5rem;
  }
}
.p-product__imageWrap .p-product__image {
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}
.p-product__imageWrap .p-product__image:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.p-product__imageWrap .p-product__image.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
.p-product__image img {
  width: 100%;
  height: auto;
  display: block;
}
.p-product__media {
  width: 52rem;
  position: relative;
}
.p-product__media::before {
  content: "";
  position: absolute;
  top: 10rem;
  left: -8.6rem;
  width: 55.8rem;
  height: 49.2rem;
  background-image: url(./assets/images/common/product_bg_01.jpg);
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 900px ) {
  .p-product__media::before {
    width: 33.6rem;
    height: 29.8rem;
    top: 7rem;
    left: -2.9rem;
  }
}
@media screen and (max-width: 900px ) {
  .p-product__media {
    width: 34.5rem;
  }
}
.p-product__body {
  width: 58rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media screen and (max-width: 900px ) {
  .p-product__body {
    gap: 1.2rem;
    width: 35.8rem;
    margin-inline: auto;
  }
}
.p-product__headline {
  font-size: 3rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 900px ) {
  .p-product__headline {
    font-size: 2.2rem;
  }
}
.p-product__name .en {
  font-size: 2.8rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 900px ) {
  .p-product__name .en {
    font-size: 2rem;
  }
}
.p-product__name .jp {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #645C59;
}
@media screen and (max-width: 900px ) {
  .p-product__name .jp {
    font-size: 1.2rem;
  }
}
.p-product__colors {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 2em 1fr;
  grid-template-columns: auto 1fr;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
  row-gap: 0.4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-product__colors-label {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
@media screen and (max-width: 900px ) {
  .p-product__colors-label {
    font-size: 1.5rem;
  }
}
.p-product__colors-value {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  margin-top: 0.8rem;
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (max-width: 900px ) {
  .p-product__colors-value {
    font-size: 1.5rem;
    margin-top: 0.2rem;
  }
}
.p-product__period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #645C59;
}
@media screen and (max-width: 900px ) {
  .p-product__period {
    font-size: 1.4rem;
  }
}
.p-product__swatches {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
}
@media screen and (max-width: 900px ) {
  .p-product__swatches {
    gap: 1.2rem;
  }
}
.p-product__colors > .p-product__swatches {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
}
.p-product__swatchBtn {
  display: block;
  padding: 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: -webkit-transform 0.25s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: transform 0.25s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: transform 0.25s cubic-bezier(0.08, 0.82, 0.17, 1), -webkit-transform 0.25s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.p-product__swatchBtn:hover:not(.is-active) {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}
.p-product__swatchBtn.is-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #645C59;
          box-shadow: 0 0 0 2px #fff, 0 0 0 4px #645C59;
}
.p-product__swatchBtn.is-active .p-product__swatch::after {
  opacity: 1;
}
.p-product__swatch {
  position: relative;
  display: inline-block;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background-color: var(--swatch, #ccc);
  overflow: hidden;
  -webkit-transition: -webkit-box-shadow 0.25s ease;
  transition: -webkit-box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
}
@media screen and (max-width: 900px ) {
  .p-product__swatch {
    width: 2.3rem;
    height: 2.3rem;
  }
}
.p-product__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./assets/images/common/swatch_check.svg) center/70% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.p-product__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.p-product__tags sup {
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 700;
}
.p-product__tag {
  font-weight: 700;
  font-size: 1.8rem;
  color: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 3rem;
  padding: 0.5rem 1.5rem;
  line-height: 1.2;
}
@media screen and (max-width: 900px ) {
  .p-product__tag {
    font-size: 1.4rem;
  }
}
.p-product__cta {
  width: 25.4rem;
  height: 6.3rem;
  margin-top: 2rem;
  background-color: #587061;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
@media screen and (max-width: 900px ) {
  .p-product__cta {
    width: 21rem;
    height: 5.1rem;
    margin-top: 1.6rem;
  }
}
.p-product__cta[hidden] {
  display: none !important;
}
.p-product__cta:hover {
  opacity: 0.7;
}
.p-product__cta-text {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (max-width: 900px ) {
  .p-product__cta-text {
    font-size: 1.8rem;
  }
}
.p-product__comments {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #645C59;
}
@media screen and (max-width: 900px ) {
  .p-product__comments {
    font-size: 1.2rem;
  }
}
.p-product__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.p-product__arrow {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
@media screen and (max-width: 900px ) {
  .p-product__arrow {
    width: 4.5rem;
    height: 3rem;
    top: 20rem;
    border-radius: 3.2rem;
    -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
  }
}
.p-product__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}
.p-product__arrow--prev {
  left: 1.2rem;
}
.p-product__arrow--next {
  right: 1.2rem;
}
.p-product__arrow[aria-disabled=true] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.p-shopslides {
  padding-bottom: 1.4rem;
  background: #ffffff;
}
.p-shopslides__inner {
  margin-inline: auto;
}
.p-shopslides__splide {
  position: relative;
  overflow: hidden;
}
.p-shopslides__track {
  overflow: hidden;
}
.p-shopslides__slide {
  aspect-ratio: 1/1;
  opacity: 0.9;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-shopslides__slide.is-active {
  opacity: 1;
}
.p-shopslides__slide img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-footer {
  background: #645C59;
  color: #ffffff;
  padding: 4rem 0 3.2rem;
}
@media screen and (max-width: 900px ) {
  .p-footer {
    padding: 5rem 0 2.3rem;
  }
}
.p-footer__inner {
  width: 90%;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (max-width: 900px ) {
  .p-footer__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.2rem;
  }
}
.p-footer__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media screen and (max-width: 900px ) {
  .p-footer__left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3.4rem;
  }
}
.p-footer__logo {
  width: 12.1rem;
}
@media screen and (max-width: 900px ) {
  .p-footer__logo {
    width: 9.7rem;
  }
}
.p-footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}
@media screen and (max-width: 900px ) {
  .p-footer__social {
    gap: 2rem;
  }
}
.p-footer__socialLink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.7rem;
  color: #ffffff;
  font-size: 1rem;
  opacity: 0.9;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
@media screen and (max-width: 900px ) {
  .p-footer__socialLink {
    gap: 1rem;
  }
}
.p-footer__socialLink img {
  width: 3.3rem;
  display: block;
}
.p-footer__socialLink span {
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 500;
}
.p-footer__socialLink:hover {
  opacity: 1;
}
.p-footer__divider {
  width: 1px;
  height: 2.6rem;
  background: #ffffff;
}
.p-footer__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 4.7rem;
}
@media screen and (max-width: 900px ) {
  .p-footer__right {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.6rem;
  }
}
.p-footer__navList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5rem;
}
.p-footer__navList a {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
@media screen and (max-width: 900px ) {
  .p-footer__navList a {
    font-size: 1.5rem;
  }
}
.p-footer__navList a:hover {
  opacity: 0.7;
}
.p-footer__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.8rem;
}
@media screen and (max-width: 900px ) {
  .p-footer__meta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.6rem;
  }
}
.p-footer__privacy, .p-footer__copy {
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 500;
}

.p-last {
  background: #D0CBC3;
  color: #645C59;
  padding: 9.8rem 0 12.7rem;
  text-align: center;
}
@media screen and (max-width: 900px ) {
  .p-last {
    padding: 5.3rem 0 8.4rem;
  }
}
.p-last__inner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-last__title {
  width: 19rem;
}
@media screen and (max-width: 900px ) {
  .p-last__title {
    width: 10rem;
  }
}
.p-last__text {
  margin-top: 4.2rem;
  font-size: 1.6rem;
  line-height: 1.9;
}
@media screen and (max-width: 900px ) {
  .p-last__text {
    font-size: 1.4rem;
    text-align: center;
  }
}
.p-last__cta {
  margin-top: 4.2rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  width: 31.4rem;
  height: 7.4rem;
  background: #587061;
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
@media screen and (max-width: 900px ) {
  .p-last__cta {
    margin-top: 3rem;
  }
}
.p-last__cta:hover {
  opacity: 0.88;
}
.p-last__ctaButton {
  font-size: 1.6rem;
  line-height: 1.9;
}
.p-last__ctaIcon {
  width: 3.7rem;
}

.p-error {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 900px ) {
  .p-error {
    width: 90%;
    margin-inline: auto;
  }
}
.p-error__heading {
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 900px ) {
  .p-error__heading {
    font-size: 2.6rem;
  }
}
.p-error__content {
  margin-top: 4rem;
}
@media screen and (max-width: 900px ) {
  .p-error__content {
    margin-top: 2.2rem;
  }
}
.p-error__text {
  font-size: 2rem;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
}
@media screen and (max-width: 900px ) {
  .p-error__text {
    font-size: 1.5rem;
    line-height: 1.6;
  }
}
.p-error__btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 6rem;
  display: inline-block;
  padding: 1rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #587061;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 900px ) {
  .p-error__btn {
    font-size: 1.4rem;
    padding: 0.7rem 1.4rem;
  }
}
@media screen and (max-width: 900px ) {
  .p-error {
    height: auto;
    min-height: 100vh;
    padding: 3.5rem 0 4.5rem;
  }
}

/* ====================================================
  Utility
==================================================== */
.u-hover {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.u-hover:hover {
  opacity: 0.7;
}

/* #pcsp
----------------------------------------------------------------- */
@media screen and (min-width: 901px) {
  .u-pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 900px) {
  .u-spNone {
    display: none !important;
  }
}