/* ========================================
  CSS Variables
======================================== */
:root {
  /* Typography */
  --font-family-base: "IBM Plex Sans JP", sans-serif;
  --font-family-en: "Jost", sans-serif;

  --color-white: #fff;
  --color-red: #E70012;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;

  /* Animations */
  --slide-up-duration: 0.55s;
  --slide-up-stagger: 0.05s;
  --slide-up-easing: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --line-grow-duration: 0.6s;
}

/* ========================================
  Reset & Base Styles
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  color: #1C1C1C;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* min-height: 100vh; */
  overflow-x: hidden;
}

li {
  list-style: none;
}

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

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

p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.1em;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  html {
    font-size: 0.651vw;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 2.487vw;
  }

  p {
    font-size: 1.4rem;
  }
}


/* ========================================
  Layout Components
======================================== */

.l-inner {
  flex: 1;
  margin: auto;
  width: 100%;
  max-width: 120rem;
  /* padding: 0 3rem; */
}

@media (max-width: 768px) {
  .l-inner {
    padding: 0 2rem;
  }
}

/* ========================================
  Component - Title
======================================== */

.c-ttl {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.c-ttl__en {
  font-family: "Karantina", sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
}

.c-ttl__ja {
  font-family: var(--font-family-base);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-ttl__en,
.c-ttl__ja {
  position: relative;
  width: fit-content;
  overflow: hidden;
}

.c-ttl__en:not(.c-anim-slide-up)::after,
.c-ttl__ja:not(.c-anim-slide-up)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  transform: translateX(-101%);
}

.is-js .c-ttl__en:not(.c-anim-slide-up, .is-animated),
.is-js .c-ttl__ja:not(.c-anim-slide-up, .is-animated) {
  -webkit-text-fill-color: transparent;
}

.c-ttl__en.is-animated:not(.c-anim-slide-up),
.c-ttl__ja.is-animated:not(.c-anim-slide-up) {
  animation: wipe-text 0.7s both;
}

.c-ttl__en.is-animated:not(.c-anim-slide-up)::after,
.c-ttl__ja.is-animated:not(.c-anim-slide-up)::after {
  animation: wipe-bar 0.7s ease-in-out both;
}

.c-ttl__en + .c-ttl__ja.is-animated,
.c-ttl__en + .c-ttl__ja.is-animated::after {
  animation-delay: 0.2s;
}

.c-ttl__copy {
  font-size: 2.4rem;
  line-height: 1.37;
  letter-spacing: -0.02em;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .c-ttl__en {
    font-size: 2.4rem;
  }

  .c-ttl__ja {
    font-size: 2.5rem;
  }

  .c-ttl__copy {
    font-size: 1.8rem;
  }
}

/* ========================================
  Component - Button
======================================== */

.c-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25rem;
  height: 5rem;
  padding: 0 4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0a0a0a;
  border: 0.1rem solid #1c1c1c;
  border-radius: 10rem;
  background-color: #fff;
  cursor: pointer;
  transition: all var(--transition-base);
}

/* 別ウィンドウアイコン：mask で文字色（currentColor）に追従させる */
.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex-shrink: 0;
}

.c-btn:hover {
  opacity: 0.9;
}

/* カートアイコン */
.c-btn--cart {
  background-color: #0a0a0a;
  color: #fff;
}

.c-btn--cart::after {
  width: 1.7rem;
  height: 1.8rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18' fill='none'%3E%3Cpath d='M16.8517 3.57213C16.7926 3.49725 16.7187 3.43702 16.6352 3.3957C16.5518 3.35438 16.4607 3.33297 16.3686 3.33299H3.67348L3.28866 1.09489C3.23595 0.787697 3.0831 0.509839 2.85674 0.309753C2.63038 0.109666 2.34487 4.5124e-05 2.05 0H0.62956C0.46259 0 0.302459 0.0702306 0.184394 0.195242C0.0663284 0.320253 0 0.489805 0 0.666597C0 0.84339 0.0663284 1.01294 0.184394 1.13795C0.302459 1.26296 0.46259 1.33319 0.62956 1.33319H2.04607L4.05751 13.0228C4.11676 13.3695 4.26146 13.6934 4.47696 13.9619C4.17953 14.256 3.96485 14.6317 3.85673 15.0471C3.74861 15.4626 3.75127 15.9016 3.86442 16.3155C3.97757 16.7295 4.19678 17.1022 4.49775 17.3922C4.79872 17.6823 5.16969 17.8785 5.56952 17.959C5.96935 18.0394 6.38242 18.0011 6.76293 17.8482C7.14343 17.6952 7.4765 17.4337 7.7252 17.0926C7.97391 16.7515 8.12852 16.3441 8.17191 15.9156C8.2153 15.4872 8.14576 15.0543 7.97101 14.6651H11.5453C11.4045 14.9773 11.3316 15.319 11.3321 15.665C11.3321 16.1265 11.4613 16.5776 11.7034 16.9612C11.9455 17.3449 12.2897 17.6439 12.6923 17.8205C13.0949 17.9971 13.538 18.0433 13.9654 17.9533C14.3928 17.8633 14.7855 17.6411 15.0936 17.3148C15.4018 16.9885 15.6116 16.5728 15.6967 16.1202C15.7817 15.6676 15.738 15.1985 15.5713 14.7722C15.4045 14.3459 15.1221 13.9815 14.7597 13.7251C14.3974 13.4688 13.9713 13.3319 13.5355 13.3319H5.9155C5.76807 13.3319 5.62531 13.2771 5.51213 13.1771C5.39895 13.077 5.32253 12.9381 5.29617 12.7845L5.04671 11.3322H14.1753C14.6176 11.3321 15.0459 11.1677 15.3854 10.8675C15.725 10.5674 15.9543 10.1506 16.0333 9.68982L16.9902 4.11874C17.0064 4.02245 17.0024 3.92356 16.9785 3.8291C16.9546 3.73463 16.9113 3.6469 16.8517 3.57213ZM6.92516 15.665C6.92516 15.8628 6.86977 16.0561 6.76601 16.2205C6.66224 16.385 6.51476 16.5131 6.3422 16.5888C6.16964 16.6645 5.97977 16.6843 5.79659 16.6457C5.6134 16.6071 5.44514 16.5119 5.31307 16.3721C5.181 16.2322 5.09106 16.0541 5.05462 15.8601C5.01819 15.6661 5.03689 15.4651 5.10836 15.2824C5.17984 15.0997 5.30087 14.9435 5.45617 14.8337C5.61147 14.7238 5.79404 14.6651 5.98082 14.6651C6.23127 14.6651 6.47147 14.7705 6.64857 14.958C6.82566 15.1455 6.92516 15.3998 6.92516 15.665ZM14.4799 15.665C14.4799 15.8628 14.4245 16.0561 14.3207 16.2205C14.217 16.385 14.0695 16.5131 13.8969 16.5888C13.7244 16.6645 13.5345 16.6843 13.3513 16.6457C13.1681 16.6071 12.9999 16.5119 12.8678 16.3721C12.7357 16.2322 12.6458 16.0541 12.6093 15.8601C12.5729 15.6661 12.5916 15.4651 12.6631 15.2824C12.7346 15.0997 12.8556 14.9435 13.0109 14.8337C13.1662 14.7238 13.3488 14.6651 13.5355 14.6651C13.786 14.6651 14.0262 14.7705 14.2033 14.958C14.3804 15.1455 14.4799 15.3998 14.4799 15.665ZM14.7947 9.45152C14.7682 9.60553 14.6915 9.74479 14.5778 9.84489C14.4641 9.94498 14.3208 9.99952 14.173 9.99896H4.81771L3.90248 4.66618H15.6139L14.7947 9.45152Z' fill='%231C1C1C'/%3E%3C/svg%3E");
  mask-size: 1.7rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18' fill='none'%3E%3Cpath d='M16.8517 3.57213C16.7926 3.49725 16.7187 3.43702 16.6352 3.3957C16.5518 3.35438 16.4607 3.33297 16.3686 3.33299H3.67348L3.28866 1.09489C3.23595 0.787697 3.0831 0.509839 2.85674 0.309753C2.63038 0.109666 2.34487 4.5124e-05 2.05 0H0.62956C0.46259 0 0.302459 0.0702306 0.184394 0.195242C0.0663284 0.320253 0 0.489805 0 0.666597C0 0.84339 0.0663284 1.01294 0.184394 1.13795C0.302459 1.26296 0.46259 1.33319 0.62956 1.33319H2.04607L4.05751 13.0228C4.11676 13.3695 4.26146 13.6934 4.47696 13.9619C4.17953 14.256 3.96485 14.6317 3.85673 15.0471C3.74861 15.4626 3.75127 15.9016 3.86442 16.3155C3.97757 16.7295 4.19678 17.1022 4.49775 17.3922C4.79872 17.6823 5.16969 17.8785 5.56952 17.959C5.96935 18.0394 6.38242 18.0011 6.76293 17.8482C7.14343 17.6952 7.4765 17.4337 7.7252 17.0926C7.97391 16.7515 8.12852 16.3441 8.17191 15.9156C8.2153 15.4872 8.14576 15.0543 7.97101 14.6651H11.5453C11.4045 14.9773 11.3316 15.319 11.3321 15.665C11.3321 16.1265 11.4613 16.5776 11.7034 16.9612C11.9455 17.3449 12.2897 17.6439 12.6923 17.8205C13.0949 17.9971 13.538 18.0433 13.9654 17.9533C14.3928 17.8633 14.7855 17.6411 15.0936 17.3148C15.4018 16.9885 15.6116 16.5728 15.6967 16.1202C15.7817 15.6676 15.738 15.1985 15.5713 14.7722C15.4045 14.3459 15.1221 13.9815 14.7597 13.7251C14.3974 13.4688 13.9713 13.3319 13.5355 13.3319H5.9155C5.76807 13.3319 5.62531 13.2771 5.51213 13.1771C5.39895 13.077 5.32253 12.9381 5.29617 12.7845L5.04671 11.3322H14.1753C14.6176 11.3321 15.0459 11.1677 15.3854 10.8675C15.725 10.5674 15.9543 10.1506 16.0333 9.68982L16.9902 4.11874C17.0064 4.02245 17.0024 3.92356 16.9785 3.8291C16.9546 3.73463 16.9113 3.6469 16.8517 3.57213ZM6.92516 15.665C6.92516 15.8628 6.86977 16.0561 6.76601 16.2205C6.66224 16.385 6.51476 16.5131 6.3422 16.5888C6.16964 16.6645 5.97977 16.6843 5.79659 16.6457C5.6134 16.6071 5.44514 16.5119 5.31307 16.3721C5.181 16.2322 5.09106 16.0541 5.05462 15.8601C5.01819 15.6661 5.03689 15.4651 5.10836 15.2824C5.17984 15.0997 5.30087 14.9435 5.45617 14.8337C5.61147 14.7238 5.79404 14.6651 5.98082 14.6651C6.23127 14.6651 6.47147 14.7705 6.64857 14.958C6.82566 15.1455 6.92516 15.3998 6.92516 15.665ZM14.4799 15.665C14.4799 15.8628 14.4245 16.0561 14.3207 16.2205C14.217 16.385 14.0695 16.5131 13.8969 16.5888C13.7244 16.6645 13.5345 16.6843 13.3513 16.6457C13.1681 16.6071 12.9999 16.5119 12.8678 16.3721C12.7357 16.2322 12.6458 16.0541 12.6093 15.8601C12.5729 15.6661 12.5916 15.4651 12.6631 15.2824C12.7346 15.0997 12.8556 14.9435 13.0109 14.8337C13.1662 14.7238 13.3488 14.6651 13.5355 14.6651C13.786 14.6651 14.0262 14.7705 14.2033 14.958C14.3804 15.1455 14.4799 15.3998 14.4799 15.665ZM14.7947 9.45152C14.7682 9.60553 14.6915 9.74479 14.5778 9.84489C14.4641 9.94498 14.3208 9.99952 14.173 9.99896H4.81771L3.90248 4.66618H15.6139L14.7947 9.45152Z' fill='%231C1C1C'/%3E%3C/svg%3E");
  -webkit-mask-size: 1.7rem;
}

.c-link {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  letter-spacing: 0.12em;
  transition: opacity var(--transition-base);
}

.c-link:hover {
  opacity: 0.7;
}

.c-link p {
  font-size: 1.6rem;
  font-weight: 700;
}

.c-link p[data-text] {
  position: relative;
  -webkit-text-fill-color: transparent;
}

.c-link p[data-text]::before,
.c-link p[data-text]::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  -webkit-text-fill-color: currentColor;
  transition: opacity 0.3s, transform 0.3s;
}

.c-link p[data-text]::after {
  opacity: 0;
  transform: translateY(0.55em);
}

.c-link .c-arrow {
  overflow: hidden;
}

@keyframes link-arrow-swap {
  50% {
    opacity: 0;
    transform: translate(60%, -60%);
  }
  50.1% {
    opacity: 0;
    transform: translate(-60%, 60%);
  }
}

@media (hover: hover) {
  a:not([target="_blank"]):hover .c-link p::before,
  a.c-link:not([target="_blank"]):hover p::before {
    opacity: 0;
    transform: translateY(-0.33em);
  }

  a:not([target="_blank"]):hover .c-link p::after,
  a.c-link:not([target="_blank"]):hover p::after {
    opacity: 1;
    transform: translateY(0);
  }

  a:not([target="_blank"]):hover .c-link .c-arrow::after,
  a.c-link:not([target="_blank"]):hover .c-arrow::after {
    animation: link-arrow-swap 0.5s;
  }
}

@media (max-width: 768px) {
  .c-btn {
    padding: 0 3rem 0 2rem;
    font-size: 1.4rem;
  }

  .c-btn::after {
    right: 1.4rem;
  }

  .c-btn--cart::after {
    width: 1.5rem;
    height: 1.6rem;
    mask-size: 1.5rem;
    -webkit-mask-size: 1.5rem;
  }

  .c-link p {
    font-size: 1.4rem;
  }
}

/* ========================================
  Component - Arrow
======================================== */

.c-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background-color: #1c1c1c;
}

.c-arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M7 14.5264L13.4383 8.08803' stroke='%23000' stroke-miterlimit='10'/%3E%3Cpath d='M7.98877 7.84668L13.6801 7.84668L13.6801 13.538' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M7 14.5264L13.4383 8.08803' stroke='%23000' stroke-miterlimit='10'/%3E%3Cpath d='M7.98877 7.84668L13.6801 7.84668L13.6801 13.538' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.c-arrow--white {
  background-color: #fff;
}

.c-arrow--white::after {
  background-color: #1c1c1c;
}

/* 別ウィンドウアイコン（外部リンク用） */
.c-arrow--external::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  mask-size: 1rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 1rem;
}

/* ========================================
  Component - Label
======================================== */

.c-label {
  display: inline-flex;
  align-items: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: .8;
  color: var(--color-white);
  background-color: var(--color-red);
  padding: 1.2rem 1rem 1rem;
  /* clip-path: polygon(0.7rem 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%);
  -webkit-clip-path: polygon(0.7rem 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%); */
  transform: skewX(-10deg);
}

.c-label .c-label--sub {
  font-size: 1.6rem;
}

.c-label--black {
  background-color: #1C1C1C;
}

.c-label--white {
  background-color: #fff;
  color: #1C1C1C;
}

@media (max-width: 768px) {
  .c-label {
    font-size: 1.8rem;
    padding: .9rem 1rem .6rem;
  }

  .c-label .c-label--sub {
    font-size: 1.2rem;
  }
}

/* ========================================
  Component - Tag（黒の角丸タグ）
======================================== */
.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 1.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  background-color: #1C1C1C;
  border-radius: 1rem;
}

/* ========================================
  Component - Support Banner（サポートコンテンツのバナー3点）
  ※ 背景色・上下余白は使う側（p-）で指定
======================================== */

.c-support-banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

.c-support-banner__item {
  display: block;
}

a.c-support-banner__item {
  transition: opacity var(--transition-base);
}

a.c-support-banner__item:hover {
  opacity: 0.8;
}

.c-support-banner__item--main {
  grid-column: 1 / -1;
}

.c-support-banner__item--app {
  position: relative;
}

/* アプリバナー：ストアボタン（位置・サイズはバナー画像に対する%指定） */
.c-support-banner__store {
  position: absolute;
  top: 65%;
  height: 24%;
  transition: opacity var(--transition-base);
}

.c-support-banner__store img {
  height: 100%;
  object-fit: contain;
}

.c-support-banner__store:hover {
  opacity: 0.7;
}

.c-support-banner__store--apple {
  left: 8.6%;
  width: 34.5%;
}

.c-support-banner__store--google {
  left: 48.3%;
  width: 43.1%;
}

@media (max-width: 768px) {
  .c-support-banner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ========================================
  Component - Magazine（マガジン最新記事リスト）
======================================== */

.c-magazine {
  padding: 16rem 0;
}

.c-magazine__inner {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

.c-magazine__lead {
  margin-top: 1.8rem;
  font-size: 1.8rem;
  line-height: 2.2;
}

.c-magazine__link {
  gap: 2rem;
  margin-top: 4rem;
  letter-spacing: 0;
}

.c-magazine__list {
  flex-shrink: 0;
  width: 64rem;
  border-top: 1px solid #E0E0E0;
}

.c-magazine__item {
  border-bottom: 1px solid #E0E0E0;
}

.c-magazine__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 5rem 0;
}

.c-magazine__body {
  flex: 1;
  min-width: 0;
}

/* c-labelを小サイズ・斜体で使用 */
.c-magazine__label {
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.7rem 1.4rem 0.6rem;
  white-space: nowrap;
}

.c-magazine__excerpt {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 2;
}

.c-magazine__thumb {
  flex-shrink: 0;
  width: 22.8rem;
  border-radius: 1rem;
  overflow: hidden;
}

.c-magazine__thumb img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.c-magazine__card:hover .c-magazine__thumb img {
  transform: scale(1.05);
}

.c-magazine__link,
.c-magazine__card {
  transition: opacity var(--transition-base);
}

.c-magazine__link:hover,
.c-magazine__card:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .c-magazine {
    padding: 8rem 0 10rem;
  }

  .c-magazine__inner {
    flex-direction: column;
    gap: 6rem;
  }

  .c-magazine__lead {
    margin-top: 2.4rem;
    font-size: 1.3rem;
    line-height: 2.15;
  }

  .c-magazine__link {
    justify-content: space-between;
    margin-top: 3rem;
  }

  .c-magazine__list {
    width: 100%;
  }

  .c-magazine__card {
    gap: 3rem;
    padding: 3rem 0;
  }

  .c-magazine__label {
    font-size: 0.9rem;
    letter-spacing: 0;
    padding: 0.6rem .6rem 0.4rem;
  }

  .c-magazine__excerpt {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.75;
    letter-spacing: 0;
  }

  .c-magazine__thumb {
    width: 15rem;
  }
}

/* ========================================
  Component - Shop Popover（購入先ポップアップ）
======================================== */

.c-shop-popover {
  position-anchor: auto;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
  margin: 0;
  padding: 0.6rem 0 0;
  overflow: visible;
  border: none;
  background: none;
}

.c-shop-popover::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1rem;
  margin: 0 auto;
  background-color: rgba(28, 28, 28, 0.85);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.c-shop-popover__body {
  position: relative;
  width: 30rem;
  margin-left: calc(50% - 15rem);
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  background-color: rgba(28, 28, 28, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.c-shop-popover__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 3.8rem;
  height: 3.8rem;
  border: none;
  border-radius: 50%;
  background-color: #1C1C1C;
  cursor: pointer;
}


.c-shop-popover__close::before,
.c-shop-popover__close::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 50%;
  width: 2rem;
  height: 0.22rem;
  border-radius: 0.5rem;
  background-color: #fff;
}

.c-shop-popover__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-shop-popover__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.c-shop-popover__close span {
  position: absolute;
  top: 2.4rem;
  left: 0;
  width: 100%;
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  transform: skewX(-10deg);
}

.c-shop-popover__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.c-shop-popover__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  border-radius: 10rem;
  background-color: #fff;
  transition: opacity var(--transition-base);
}

.c-shop-popover__btn img {
  width: 8.8rem;
}

.c-shop-popover__btn--wide img {
  width: 19.8rem;
}

.c-shop-popover__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 3rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  transition: opacity var(--transition-base);
}

.c-shop-popover__btn:hover,
.c-shop-popover__link:hover {
  opacity: 0.7;
}

/* 別ウィンドウアイコン（target="_blank" のリンクに自動で付く） */
.c-shop-popover [target="_blank"]::after {
  content: "";
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8 8.4V1.2H3.6V8.4H10.8ZM12 8.4C12 8.71826 11.8736 9.02349 11.6485 9.24853C11.4235 9.47357 11.1183 9.6 10.8 9.6H3.6C3.28174 9.6 2.97652 9.47357 2.75147 9.24853C2.52643 9.02349 2.4 8.71826 2.4 8.4V1.2C2.4 0.534 2.934 0 3.6 0H10.8C11.1183 0 11.4235 0.126428 11.6485 0.351472C11.8736 0.576515 12 0.88174 12 1.2V8.4ZM8.4 10.8V12H1.2C0.88174 12 0.576515 11.8736 0.351472 11.6485C0.126428 11.4235 0 11.1183 0 10.8V3H1.2V10.8H8.4Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.c-shop-popover__btn[target="_blank"]::after {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  color: #1C1C1C;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .c-shop-popover {
    inset: 0;
    width: fit-content;
    margin: auto;
    padding: 0;
  }

  .c-shop-popover::before {
    display: none;
  }

  .c-shop-popover__body {
    margin-left: 0;
  }

  .c-shop-popover::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }

  html:has(.c-shop-popover:popover-open) {
    overflow: hidden;
  }
}

@supports not (position-anchor: auto) {
  .c-shop-popover {
    inset: 0;
    width: fit-content;
    margin: auto;
    padding: 0;
  }

  .c-shop-popover::before {
    display: none;
  }

  .c-shop-popover__body {
    margin-left: 0;
  }

  .c-shop-popover::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }
}

/* ========================================
  Utility Classes
======================================== */

/* ========== Display ========== */

/* .u-hidden {
  display: none !important;
} */

.u-sp-only {
  display: none;
}

.u-pc-only {
  display: inline-block;
}

@media (max-width: 768px) {
  .u-sp-only {
    display: inline-block;
  }

  .u-pc-only {
    display: none !important;
  }
}

/* ========== Margin ========== */

/* Margin Top */
.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }
.u-mt-4 { margin-top: 4rem; }
.u-mt-5 { margin-top: 5rem; }
.u-mt-6 { margin-top: 6rem; }
.u-mt-auto { margin-top: auto; }

/* Margin Bottom */
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-2 { margin-bottom: 2rem; }
.u-mb-3 { margin-bottom: 3rem; }
.u-mb-4 { margin-bottom: 4rem; }
.u-mb-5 { margin-bottom: 5rem; }
.u-mb-6 { margin-bottom: 6rem; }

.u-mb-xs { margin-bottom: 2rem; }
.u-mb-sm { margin-bottom: 3rem; }
.u-mb-md { margin-bottom: 4rem; }
.u-mb-lg { margin-bottom: 5rem; }
.u-mb-xl { margin-bottom: 6rem; }
.u-mb-2xl { margin-bottom: 7rem; }

@media (max-width: 768px) {
  .u-mb-xs { margin-bottom: 1rem; }
  .u-mb-sm { margin-bottom: 2rem; }
  .u-mb-md { margin-bottom: 3rem; }
  .u-mb-lg { margin-bottom: 4rem; }
  .u-mb-xl { margin-bottom: 5rem; }
  .u-mb-2xl { margin-bottom: 6rem; }
}

/* ========== Text ========== */

.u-txt-en {
  font-family: var(--font-family-en);
}

.u-txt--md {
  font-weight: 500;
}

.u-txt--bold {
  font-weight: 700;
}

.u-txt--italic {
  font-style: italic;
}

.u-txt--center {
  text-align: center;
}

.u-txt--pc-center {
  text-align: center;
}

.u-txt--right {
  text-align: right;
}

/* 斜体風の見た目（Figmaのfont-styleはnormalのため、transformで統一）。inline要素には効かないのでinline-blockにする */
.u-skew {
  display: inline-block;
  transform: skewX(-10deg);
  transform-origin: left bottom;
}

.u-txt--underline {
  text-decoration: underline;
}

.u-txt--black {
  color: #0a0a0a;
}

@media (max-width: 768px) {
  .u-txt--pc-center {
    text-align: left;
  }
}

/* ========== Position ========== */

.u-relative {
  position: relative;
}

/* ========== Flex ========== */

.u-flex {
  display: flex;
}

.u-flex--column {
  flex-direction: column;
}

.u-flex--align-start {
  align-items: flex-start;
}

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

.u-flex-item {
  flex: 1;
}

.u-gap-1 {
  gap: 1rem;
}

.u-gap-2 {
  gap: 2rem;
}

.u-gap-3 {
  gap: 3rem;
}

.u-gap-4 {
  gap: 4rem;
}

.u-gap-lg {
  gap: 7rem;
}

@media (max-width: 768px) {
  .u-flex {
    flex-direction: column;
  }

  .u-gap-lg {
    gap: 4rem;
  }
}



/* ========================================
  Animation Classes
======================================== */
@keyframes wipe-bar {
  0% {
    transform: translateX(-101%);
  }
  45%,
  55% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}

@keyframes wipe-show {
  0%,
  49.9% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

@keyframes wipe-text {
  0%,
  49.9% {
    -webkit-text-fill-color: transparent;
  }
  50%,
  100% {
    -webkit-text-fill-color: currentColor;
  }
}

.c-anim-img-wrap {
  overflow: hidden;
}

@keyframes img-zoom-in {
  from {
    opacity: 0;
    transform: scale(1.08);
    clip-path: inset(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0);
  }
}

.is-js .c-anim-img {
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

.c-anim-img.is-animated {
  animation: img-zoom-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes mv-img-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.is-js .c-anim-fade-in {
  opacity: 0;
}

.c-anim-fade-in.is-animated {
  animation: fade-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.is-js .c-anim-slide-left {
  opacity: 0;
  transform: translateX(-2rem);
}

.c-anim-slide-left.is-animated {
  animation: slide-in-left .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-grow {
  to {
    transform: scaleX(1);
  }
}

.c-anim-slide-up {
  clip-path: inset(0 0 -0.2em);
}

.is-js .c-anim-slide-up:not(.is-setup) {
  opacity: 0;
}

.c-anim-slide-up__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-anim-slide-up__char {
  display: inline-block;
}

.is-js .c-anim-slide-up__char {
  opacity: 0;
  transform: translateY(42%);
}

.c-anim-slide-up.is-animated .c-anim-slide-up__char {
  animation: slide-up var(--slide-up-duration) var(--slide-up-easing) calc(var(--i) * var(--slide-up-stagger)) forwards;
}

/* ========================================
  Page Transition（サイト内のページ移動。動きは common.js）
======================================== */
.l-transition-layer {
  --op: 0;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.l-transition-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #202220;
  opacity: calc(var(--op) * 0.5);
}

.l-transition-page {
  position: absolute;
  left: 0;
  width: 100%;
}

.is-transitioning #swup {
  background-color: var(--color-white);
}

.is-transitioning #swup *,
.is-transitioning #swup *::before,
.is-transitioning #swup *::after {
  animation-play-state: paused;
}