/* ==================== CSS Variables ==================== */
:root {
  --black: #252525;
  --black-0: #000000;
  --white: #ffffff;
  --pkm-green: #13ae67;
  --yellow: #FABE00;
  --f-pink: #E85298;
  --r-pink: #D7167D;
  --r-pink: #E72C61;
  --gray1: #f7f7f7;
  --gray2: #bcbcbc;
  --gray4: #4f4f4f;
  --red: #ff0000;
  --max-width: 1440px;
  --header-height: clamp(58.5px, 6.09375vw, 87.75px);
  --section-padding-x: 6em;
  --section-padding-y: 6.25em;
  --card-width: calc((100% - (1.875em * 4)) / 5);
  --card-gap: 1.875em;
}


/* ==================== Reset ==================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  color: var(--black);
  min-width: 23.4375em;
  font-size: clamp(12px, 1.25vw, 18px);
  margin-top: var(--header-height);
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
}
header,footer, nav.global-nav{
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
  font-size: clamp(12px, 1.25vw, 18px) !important;
}

body.is-open {
  overflow: hidden;
}

main.top-bg {
  background: var(--gray1);
  color: var(--black);
  min-width: 23.4375em;
  font-size: 1em;
  max-width: none !important;
}

img {
  height: auto;
}

a {
  color: var(--black);
  text-decoration: none;
}

a:hover {
  text-decoration: none !important;
  opacity: 0.75;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

.icon-circle-up:before {
  content: "" !important;
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('../img/new-default/top-back.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

#page-top.fade-in {
  opacity: 0.8 !important;
}

#page-top {
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* クリエ対応 */
  .header02_list li a{
    color: #ffffff !important;
  }
  @media (max-width: 768px) {
  /* 特設サイト */
  #narou_head{
    padding: 0.75em 1rem !important;
    height: auto !important;
  }
}
  

/* .qurie_header{
    font-size: clamp(12px, 1.25vw, 18px);
        margin-top: 1.875em;
  } */
/* .body_in {
  padding-top: 78px !important;
} */

/* @media (max-width: 768px) {
  .body_in {
    padding-top: 2.75em !important;
  }
  .qurie_header{
    font-size: clamp(12px, 1.34vw + 5.7px, 16px);
    margin-top: 3.75em;
  }

  .header__inner{
    font-size: clamp(12px, 1.34vw + 5.7px, 16px);
  }
  .header_wrap figure {
    margin-left: 8px !important;
  }
} */

#Searchbox_Top >input{
  background: none !important;
  width: auto !important;
}


/* ==================== ページネーション設定 ==================== */
/* /contents/Pager.xml */
.npgs ul {
  float: none;
  text-align: left;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  display: flex;
  gap: 0.5em;
  justify-content: center;
}

.npgs ul li.on,
.npgs ul li.off,
.npgs ul li.sep,
.npgs ul li.prev_on,
.npgs ul li.next_on {
  width: 3em;
  height: 3em;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.npgs ul li a {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.npgs ul li.prev_on a,
.npgs ul li.next_on a {
  background: var(--yellow);
}

.npgs ul li.prev_on a .prev_on-arrow,
.npgs ul li.next_on a .next_on-arrow {
  position: relative;
  width: 0.5em;
  height: 100%;
  display: flex;
  justify-content: center;
}

.npgs ul li.prev_on a .prev_on-arrow{
  transform: scaleX(-1);
}

.npgs ul li.prev_on a .prev_on-arrow::before,
.npgs ul li.prev_on a .prev_on-arrow::after,
.npgs ul li.next_on a .next_on-arrow::before,
.npgs ul li.next_on a .next_on-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 8px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 0.5px) 50%;
}

.npgs ul li.prev_on a .prev_on-arrow::before,
.npgs ul li.next_on a .next_on-arrow::before {
  transform: rotate(60deg);
}

.npgs ul li.prev_on a .prev_on-arrow::after,
.npgs ul li.next_on a .next_on-arrow::after {
  transform: rotate(-60deg);
}


/* ==================== Scroll Animation ==================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(1.875em);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ==================== Buttons ==================== */
.btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3.75em;
  gap: 2rem;
}

/* --- btn大 --- */
.top-btn,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.25em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9em;
  line-height: 1;
  min-width: 16em;
  text-align: center;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  background: var(--black);
}

.top-btn span.btn-text,
.btn-nav span.btn-text {
  width: 100%;
  text-align: center;
  color: var(--white) !important;
}

.global-nav span.btn-text,
.site-footer span.btn-text {
  color: var(--black) !important;
}

footer .btn-text {
  font-weight: 600;
}

.btn-arrow {
  position: relative;
  display: inline-block;
  width: 0.1875em;
  height: 0.493em;
}

.btn-arrow::before,
.btn-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 0.3125em;
  height: 0.0625em;
  border-radius: 9999px;
  background-color: var(--white);
  transform-origin: calc(100% - 0.5px) 50%;
}

.global-nav .btn-arrow::before,
.global-nav .btn-arrow::after,
.site-footer .btn-arrow::before,
.site-footer .btn-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 0.3125em;
  height: 0.0625em;
  border-radius: 9999px;
  background-color: var(--black);
  transform-origin: calc(100% - 0.5px) 50%;
}

.btn-arrow::before {
  transform: rotate(60deg);
}

.btn-arrow::after {
  transform: rotate(-60deg);
}

/* --- btn小 --- */
.btn3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.7em 1.125em;
  background: var(--yellow);
  ;
  border-radius: 999px;
  width: 12.3em;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.25s ease;
  line-height: 1;
  font-size: 0.875em;
  transition: opacity 0.4s ease;
}

.btn3:hover {
  opacity: 0.75;
}

/* .btn::before, */
.btn3::before {
  content: '';
  display: block;
  flex-shrink: 0;
  visibility: hidden;
}

/* .btn::after {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
} */

.btn3::after {
  content: '';
  display: block;
  width: 0.4em;
  height: 0.4em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.btn3--black::after,
.btn3--pink::after {
  content: '';
  display: block;
  width: 0.4em;
  height: 0.4em;
  border-right: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.top-btn:hover {
  opacity: 0.8;
  text-decoration: none !important;
}

.btn--gray {
  background: var(--gray1);
  color: var(--black) !important;
}

.btn--green {
  background: var(--pkm-green);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  color: var(--black);
}

.btn--yellow,
.btn3--yellow {
  background: var(--yellow);
  color: var(--black) !important;
  text-align: center;
}

.btn3--black {
  /* background: var(--gray4); */
  background: #3C4190;
}

.btn3--pink {
  background: var(--f-pink);
}

.btn3--black .btn3__btn-text,
.btn3--pink .btn3__btn-text {
  color: var(--white);
}

/* ==================== 他サイト調整用 ==================== */
.site-header,
.site-footer {
  font-size: clamp(12px, 1.25vw, 18px);
}
@media (max-width: 768px) {
  .site-header,
  .site-footer{
    font-size: clamp(12px, 1.34vw + 5.7px, 16px);
  }
}

/* ==================== Header ==================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--black);
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 5em;
  padding: 1.125em var(--section-padding-x);
  justify-content: space-between;
}

.header__logo {
  flex-shrink: 0;
}

.header__logo img {
  width: 9.625em;
  height: 2.5em;
  object-fit: contain;
}

/* --- Search --- */
.header__search {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
  max-width: 22em;
}

.header__search-input {
  flex: 1;
  border: none;
  outline: none;
  padding-left: 1.25em;
  color: var(--black);
  background: transparent;
  height: 2.2em !important;
  line-height: 1.6em;
  font-size: 0.8em;
}

.header__search-input::placeholder {
  color: var(--gray2);
  font-size: 0.9em;
  height: 100%;
}

.header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9375em;
  background: var(--white);
}

.header__search-btn img {
  width: 1em;
  height: 1em;
}

/* --- Icons --- */
.header__icons {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
}

.header__icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125em;
  width: 3em;
  color: var(--white) !important;
  text-decoration: none;
}

.header__icon-link img {
  width: 2em;
  height: 2em;
}

.header__icon-link span {
  font-size: 0.5em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.header__divider {
  width: 1px;
  height: 1.875em;
  background: var(--gray4);
}

#serch_area {
  width: 100%;
}

.header__search {
  margin: 0 auto;
}

/* --- Hamburger / Close --- */
.header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  padding: 0.25em;
  /* 最大サイズ(44px+余白)で固定してアニメーション中のレイアウトシフトを防ぐ */
  width: 3.25em;
  height: 1.375em;
  flex-shrink: 0;
  align-items: flex-end;
  overflow: visible;
}

.header__hamburger span {
  display: block;
  height: 0.08em;
  background: var(--yellow);
  border-radius: 9999px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__hamburger span:nth-child(1) {
  width: 2.75em;
}

.header__hamburger span:nth-child(2) {
  width: 1.875em;
}

/* Open state → × */
.site-header.nav-open .header__hamburger span:nth-child(1) {
  width: 2.25em;
  transform: translateY(0.375em) rotate(45deg);
}

.site-header.nav-open .header__hamburger span:nth-child(2) {
  width: 2.25em;
  transform: translateY(-0.375em) rotate(-45deg);
}


/* ==================== 最大画面幅 ==================== */
main {
  max-width: 1920px;
  margin: 0 auto;
}


/* ==================== Footer ==================== */
footer {
  font-size: clamp(12px, 1.25vw, 18px);
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
}

.site-footer {
  background: var(--black);
  padding: 0 !important;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3em var(--section-padding-x) 2.5em;
  display: flex;
  flex-direction: column;
  gap: 1.875em;
  align-items: center;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer__top .btn-wrap {
  margin-top: 0;
}

.footer__logo {
  width: 14%;
}

.footer__logo img {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
}

/*  Footer Nav  */
.footer__nav-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-top: 1px solid var(--gray4);
  border-bottom: 1px solid var(--gray4);
  padding: 2.6em 0;
  justify-content: space-between;
}

.footer-nav {
  padding: 0 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  width: 100%;
}

.footer-nav:nth-of-type(1) {
  padding-left: 0;
}

.footer-nav--border {
  border-left: 1px solid var(--gray4);
  padding: 0;
  padding-left: 2em;
  width: 100%;
}

.footer-nav__title {
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  color: var(--white);
  text-align: left;
  white-space: nowrap;
}

.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding: 0 !important;
}

.footer-nav__list li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0;
}

.footer-nav__list li::before {
  content: '';
  display: block;
  width: 0.375em;
  height: 0.375em;
  border-right: 0.8px solid var(--white);
  border-bottom: 0.8px solid var(--white);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.footer-nav__list a {
  font-size: 0.8em;
  line-height: 1;
  color: var(--white) !important;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer-nav__list a:hover {
  opacity: 0.7;
}

/*  SNS  */
.footer__sns {
  display: flex;
  gap: 1.875em;
  align-items: center;
  justify-content: center;
}

.footer__sns-link {
  display: block;
  width: 1.5em;
  height: 1.5em;
  transition: opacity 0.2s ease;
}

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

.footer__sns-link img {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}

/*  Footer Bottom  */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
  align-items: center;
  padding-bottom: 2.5em;
}

.footer__privacy a,
.footer__copy {
  font-size: 0.8em;
  line-height: 1;
  color: var(--white) !important;
  text-align: center;
}

.footer__privacy {
  margin-bottom: 0.5em;
}

.footer__privacy a {
  transition: opacity 0.2s ease;
}

.footer__privacy a:hover {
  opacity: 0.7;
}

/* ==================== Global Navigation ==================== */
.global-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  z-index: 999999999;
  background: var(--gray1);
  /* border-radius: 0 0 0.75em 0.75em; */
  /* 上→下へ降りるアニメーション: bottom insetを100%→0%へ */
  clip-path: inset(0 0 100% 0 round 0 0 0.75em 0.75em);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: 0 !important;
}

.global-nav.is-open,
.label-nav.is-open {
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
}

.global-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6.25em var(--section-padding-x) 5em;
  display: flex;
  flex-direction: column;
  gap: 4.375em;
  height: 100vh;
}

.global-nav__columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.global-nav__col {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}

.global-nav__col-title {
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1;
  color: var(--black);
  border-left: 0.25em solid var(--yellow);
  padding-left: 1.2em;
  white-space: nowrap;
}

.global-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.global-nav__list li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.global-nav__list li::before {
  content: '';
  display: block;
  width: 0.375em;
  height: 0.375em;
  border-right: 0.8px solid var(--yellow);
  border-bottom: 0.8px solid var(--yellow);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.global-nav__list a {
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  color: var(--black) !important;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.global-nav__list a:hover {
  opacity: 0.6;
}

.global-nav__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.global-nav__sns {
  display: flex;
  gap: 1.875em;
  align-items: center;
}

.global-nav__sns-link {
  display: block;
  width: 1.5em;
  height: 1.5em;
  transition: opacity 0.2s ease;
}

.global-nav__sns-link:hover {
  opacity: 0.7;
}

.global-nav__sns-link img {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}

.global-nav .btn-wrap {
  margin-top: 0;
}

/*  Nav Overlay  */
.nav-overlay {
  position: fixed;
  inset: 0;
  top: var(--header-height);
  z-index: 98;
  background: transparent;
  display: none;
}

.nav-overlay.is-visible {
  display: block;
}

/* ==================== Label Navigation ==================== */
.label-nav{
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  z-index: 999999999;
  background: var(--gray1);
  clip-path: inset(0 0 100% 0 round 0 0 0.75em 0.75em);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: 0 !important;
}
.label-nav_inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6.25em 6em 5em;
  display: flex;
  flex-direction: column;
  gap: 4.375em;
  height: 100vh;
  font-size: clamp(12px, 1.25vw, 18px) !important;
}
.label-nav_wrap{
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 1.5em;
  /* border-left: 0.1em var(--yellow) solid; */
}
.label-nav_wrap .label-nav_content{
  /* width: 25%; */
  /* border-bottom: 0.1em var(--yellow) solid;
  border-right: 0.1em var(--yellow) solid; */
  width: calc((100% - 1.5em * 4) / 5);
  background: white;
  border-radius: 2em;
  box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
  min-width: 153.32px;
}
.label-nav_wrap .label-nav_content:nth-child(-n + 4){
  /* border-top: 0.1em solid var(--yellow); */
}
.label-nav_wrap .label-nav_content a{
  padding: 0.5em 1em 1.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.label-nav_wrap .label-nav_content a figure{
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}
.label-nav_wrap .label-nav_content a:hover figure{
  transform: scale(1.2);
}
.label-nav_wrap .label-nav_content a figure img{
  max-width: 100%;
  width: 100%;
  height: auto;
}
#label-nav-area .label-nav_inner .btn-nav{
  width: 100%;
  max-width: 260px !important;
  min-width: 16em !important;
  margin: 0 auto !important;
}
.label-nav_p{
  font-size: 10px !important;
}

/* ===== Body scroll lock ===== */
body.nav-open {
  overflow: hidden;
}

/* ===== Category Bar ===== */
.category-bar {
  background: var(--yellow);
  width: 100%;
}

.category-bar-nvl {
  /* background: #000; */
  background: #3C4190;
}

.category-bar_nvl {
  /* background: var(--black-0); */
  background: #3C4190;
}

.category-bar_nvf {
  background: var(--f-pink);
}

.category-bar_nvr {
  background: var(--r-pink);
}

.category-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5em;
}

.category-bar__logo {
  height: 1em;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-bar_nvf .category-bar__logo {
  height: 1.3em;
}

.category-bar__logo img {
  width: auto;
  height: 100%;
}

.category-bar__release {
  display: flex;
  align-items: center;
  color: var(--black);
  line-height: 1;
  gap: 1em;
}

.category-bar__release-jp-nvl,
.category-bar__release-num-nvl {
  color: var(--white);
}

.category-bar_nvl .category-bar__release a span,
.category-bar_nvf .category-bar__release a span,
.category-bar_nvr .category-bar__release a span {
  color: var(--white);
}

.category-bar__release a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--black);
}

.all-link {
  position: relative;
  display: inline-block;
  width: 3.5px;
  height: 9.7px;
}

.all-link::before,
.all-link::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 6px;
  height: 1px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0.5px) 50%;
}

.category-bar_nvl .all-link::before,
.category-bar_nvl .all-link::after,
.category-bar_nvf .all-link::before,
.category-bar_nvf .all-link::after,
.category-bar_nvr .all-link::before,
.category-bar_nvr .all-link::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 6px;
  height: 1px;
  border-radius: 9999px;
  background-color: var(--white);
  transform-origin: calc(100% - 0.5px) 50%;
}

.all-link::before {
  transform: rotate(60deg);
}

.all-link::after {
  transform: rotate(-60deg);
}

/* ガルド帯設定 */
#grd_head a{
  color: #ffffff !important;
}

/* ==================== TOPページ ==================== */
/* --- Slider Section --- */
.slider {
  overflow: hidden;
  width: 100%;
  padding-top: 0.5em;
}

.slider .swiper {
  width: 100%;
}
.slider__track {
  display: flex;
  align-items: center;
  padding: 1.5em 0;
}

.slider__slide {
  flex-shrink: 0;
  width: 40vw;
  max-width: 723px;
}

@media (max-width: 768px) {
  .slider__slide {
    width: 100vw;
    max-width: none;
  }
}

.slider__img-dummy {
  width: 100%;
  aspect-ratio: 723 / 422;
  border-radius: 0.25em;
  overflow: hidden;
  box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
  background: none !important;
}

.slider__img-dummy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.2em;
}

.slider__controls {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-padding-x) 1.5em;
  height: 4.5em;
}

.slider__indicators {
  display: flex;
  gap: 1.5em;
  align-items: center;
}

.slider__nav {
  display: flex;
  align-items: center;
  gap: 1.875em;
}

.slider .swiper-button-prev,
.slider .swiper-button-next {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0 !important;
  transform: none !important;
  width: 9.7px !important;
  height: 15.3px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  cursor: pointer;
  display: inline-block !important;
}

/* .slider .swiper-button-prev::after,
.slider .swiper-button-next::after {
    display: none !important;
    content: "" !important;
} */
.slider__prev::before,
.slider__prev::after,
.slider__next::before,
.slider__next::after {
  content: "" !important;
  position: absolute !important;
  top: calc(50% - 0.75px) !important;
  left: 0 !important;
  width: 12px !important;
  height: 1.5px !important;
  border-radius: 9999px !important;
  background-color: var(--yellow) !important;
  transform-origin: calc(100% - 0.75px) 50% !important;
}

.slider__prev::before,
.slider__next::before {
  transform: rotate(60deg) !important;
}

.slider__prev::after,
.slider__next::after {
  transform: rotate(-60deg) !important;
}

.slider .slider__prev {
  transform: rotate(180deg) !important;
}

/* 表示枚数以下の場合、ボタン非表示 */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.slider__counter {
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: 0.24em;
  color: var(--black);
  width: 2em;
  text-align: center;
}

.slider .swiper-pagination {
  position: relative;
  bottom: auto;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5em;
  width: auto;
  list-style: none;
}

.slider .swiper-pagination-bullet {
  width: 2.5em;
  height: 0.25em;
  border-radius: 9999px;
  background: var(--gray2);
  border: none;
  padding: 0;
  transition: background 0.3s ease;
  margin: 0 !important;
  opacity: 1;
  cursor: pointer;
}

.slider .swiper-pagination-bullet-active {
  background: var(--yellow);
  transform: none;
}

.slider .swiper-horizontal>.swiper-pagination-bullets,
.slider .swiper-pagination-bullets.swiper-pagination-horizontal,
.slider .swiper-pagination-custom,
.slider .swiper-pagination-fraction {
  bottom: 0 !important;
}

/* 
.slider {
    background: var(--gray1);
    overflow: hidden;
    width: 100%;
    padding-top: 1.5em;
}
.slider__track-wrap {
    overflow: hidden;
    width: 100%;
}

.slider__track {
    display: flex;
    gap: 1.5em;
    align-items: center;
    padding: 1.5em 0;
}

.slider__slide {
    flex-shrink: 0;
    width: 45.1875em;
}

.slider__img-dummy {
    width: 45.1875em;
    height: 26.375em;
    border-radius: 0.25em;
    overflow: hidden;
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
}

.slider__img-dummy img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__controls {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5em var(--section-padding-x);
    height: 4.5em;
}

.slider__indicators {
    display: flex;
    gap: 1.5em;
    align-items: center;
}

.slider__dot {
    width: 2.5em;
    height: 0.25em;
    border-radius: 9999px;
    background: var(--gray2);
    transition: background 0.3s ease;
}

.slider__dot.active {
    background: var(--yellow);
}

.slider__nav {
    display: flex;
    align-items: center;
    gap: 1.875em;
}

.slider__nav .splide__arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    background: transparent;
    border: none;
    opacity: 1;
    padding: 0;
    width: 0.5em;
    height: 1.425em;
}

.slider__nav .splide__arrow::before,
.slider__nav .splide__arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 0.875em;
    height: 0.125em;
    border-radius: 9999px;
    background-color: var(--yellow);
    transform-origin: calc(100% - 1px) 50%;
}

.slider__nav .splide__arrow::before {
    transform: rotate(60deg);
}

.slider__nav .splide__arrow::after {
    transform: rotate(-60deg);
}

.slider__nav .splide__arrow--prev {
    transform: rotate(180deg);
}

.slider__nav .splide__arrow--next {
    transform: none;
}

.slider__nav .splide__arrow svg {
    display: none;
}

.slider__counter {
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.24em;
    color: var(--black);
    width: 2em;
}

.splide.slider .splide__track {
    overflow: visible;
}

.splide.slider .splide__list {
    display: flex;
    gap: 0
}

.splide.slider .splide__pagination {
    position: relative;
    bottom: auto;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5em;
    width: auto;
    list-style: none;
}

.splide.slider .splide__pagination li {
    list-style-type: none;
    line-height: 1;
    display: flex;
}

.splide.slider .splide__pagination__page {
    width: 2.5em;
    height: 0.25em;
    border-radius: 9999px;
    background: var(--gray2);
    border: none;
    padding: 0;
    transition: background 0.3s ease;
    margin: 0;
    opacity: 1;
}

.splide.slider .splide__pagination__page.is-active {
    background: var(--yellow);
    transform: none;
}
.splide__arrows{
    display: contents;
} */

/* --- Section Common --- */
.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75em;
}

.section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

/* --- Section Title Block --- */
.section-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  align-items: flex-start;
}

.section-title-block-max {
  width: 100%;
}

.section-title-block__sub {
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: 100%;
}

.section-subtitle__line {
  flex: 1;
  height: 0.125em;
  background: var(--yellow);
  border-radius: 9999px;
}

.section-subtitle {
  font-weight: 500;
  font-size: 1.25em;
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
}

.section-title {
  font-weight: 700;
  font-size: 4em;
  line-height: 1;
  color: var(--black);
  letter-spacing: -0.02em;
  /* text-transform: uppercase; */
}

/* --- White-right rounded sections --- */
.section--white-right {
  background: var(--white);
  border-radius: 0 6.25em 6.25em 0;
}

.section--white-left {
  background: var(--white);
  border-radius: 6.25em 0 0 6.25em;
}

/* --- NEWS Section --- */
.section-news__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5em var(--section-padding-y) var(--section-padding-x);
  display: flex;
  gap: 6.25em;
  align-items: flex-start;
}

.section-news__title-wrap {
  flex-shrink: 0;
}

.section-news__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/*  News Item  */
.news-item {
  display: flex;
  align-items: center;
  gap: 1.5em;
  width: 100%;
  padding: 1.25em 0.75em 1.25em 1.25em;
  border-bottom: 1px solid var(--gray2);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.news-item--last {
  border-bottom: none;
}

.news-item:hover {
  text-decoration: none;
  background-color: var(--sidebar-gray);
}

.news-item__inner {
  flex: 1;
  display: flex;
  gap: 1.5em;
  align-items: center;
  font-size: 1em;
  color: var(--black);
}

.news-item__date {
  font-size: 1em;
  line-height: 1.6;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-item__text {
  flex: 1;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.6;
}

.news-item__arrow {
  position: relative;
  display: inline-block;
  width: 0.343em;
  height: 1.03em;
}

.news-item__arrow::before,
.news-item__arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 0.635em;
  height: 0.0625em;
  border-radius: 9999px;
  background-color: var(--gray2);
  transform-origin: calc(100% - 0.5px) 50%;
}

.news-item__arrow::before {
  transform: rotate(60deg);
}

.news-item__arrow::after {
  transform: rotate(-60deg);
}

/* --- Category Tabs --- */
.category-tabs {
  display: flex;
  align-items: center;
  padding-bottom: 0.625em;
  align-items: end;
}

.category-tab {
  min-width: 6.5em;
  padding: 0 1.25em 1em;
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  color: var(--gray2);
  border-bottom: 2.5px solid var(--yellow);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.category-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* --- Goods Grid --- */
.goods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);
  width: 100%;
}

.tab-panel{
  width: 100%;
}

/*  Goods Card  */
.goods-card {
  width: var(--card-width);
  flex-shrink: 0;
}

.goods-card a {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  text-decoration: none;
  color: var(--black);
}

.goods-card.is-hidden {
  display: none;
}

.goods-card__img {
  position: relative;
  aspect-ratio: 800 / 1128;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
}

.goods-card__img figure {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

.goods-card__img figure .all__badge--red {
  position: absolute;
  top: 0;
  left: 0;
}

.goods-card__img img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  object-fit: contain;
  justify-content: center;
}

.goods-card a:hover .goods-card__img img {
  transform: scale(1.03);
}

.goods-card__new-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--red);
  color: var(--white);
  font-weight: 500;
  font-size: 0.625em;
  line-height: 1;
  padding: 0.25em 0.375em;
  z-index: 1;
}

.goods-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

/* タグカラー */
.goods-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.5em;
  background: var(--gray4);
  color: var(--white);
  font-weight: 500;
  font-size: 0.625em;
  line-height: 1;
  border-radius: 0.125em;
  align-self: flex-start;
}

.bnk__badge {
  background: var(--yellow);
}

.nvl__badge {
  /* background: var(--black); */
  background: #3C4190;
}

.nvf__badge {
  background: var(--f-pink);
}

.ceb__badge {
  background: #834A00;
}

.cgb__badge {
  background: #009FE8;
}

.cqb__badge {
  background: #81CEC6;
}

.liq__badge {
  background: #E72C61;
}

.lpb__badge {
  background: #EE86AE;
}

.lst__badge {
  background: #315DBB;
}

.nvr__badge {
  background: var(--r-pink);
}

.cd__badge {
  background: #4E008A;
}

.br__badge {
  background: #0040CA;
}

.pkm__badge {
  background: #13AE67;
}

.all__badge--red {
  background: #FF0000;
}

.all__badge--red-rnone {
  border-radius: 0 !important;
}

.goods-card__title {
  font-size: 0.875em;
  line-height: 1.6;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-card a.card-is-disabled,
.goods-card a.card-is-disabled img {
  pointer-events: none !important;
  cursor: default !important;
}

/*  Pokemon card (no category badge)  */
.goods-card__img--pokemon {
  background: var(--white);
}

.goods-card--pokemon .goods-card__info {
  gap: 0.375em;
}

/*  Game  */
/* .section-game {
    background: var(--gray1);
} */
.section-game .btn-wrap {
  margin-top: 0;
}

/* --- Anime Section --- */
.section-anime {
  background: var(--gray1);
}

.section-anime .btn-wrap {
  margin-top: 0;
}

.anime-grid {
  display: flex;
  gap: var(--card-gap);
  width: 100%;
  flex-wrap: wrap;
}

.anime-card {
  width: var(--card-width);
  flex-shrink: 0;
}

.anime-card div.anime-card_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.875em;
  text-decoration: none;
  color: var(--black);
}

.anime-card__img {
  aspect-ratio: 198 / 279;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
  margin-bottom: 0.75em;
}

.anime-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anime-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  align-items: center;
}

.anime-card__title {
  font-size: 0.875em;
  line-height: 1.6;
  text-align: left;
  color: var(--black);
  width: 100%;
}

.anime-card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875em 1em 0.875em 1em;
  background: var(--white);
  border-radius: 0.125em;
  width: 100%;
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  color: var(--black);
  text-align: center;
  transition: background 0.2s ease;
  transition: transform 0.4s ease;
}

.anime-card__btn:hover {
  text-decoration: none !important;
  transform: scale(1.05);
}

.anime-card__btn::before {
  content: '';
  display: block;
  width: 0.3125em;
  height: 0.5em;
  flex-shrink: 0;
  visibility: hidden;
}

.anime-card a:hover .anime-card__btn {
  background: var(--gray1);
}

.anime-card__btn .btn-arrow::before,
.anime-card__btn .btn-arrow::after {
  background-color: var(--yellow);
}

/* --- Banner Section --- */
.banner-wrap {
  background: var(--gray1);
}

.banner-wrap__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.75em var(--section-padding-x);
  display: flex;
  gap: 1.5em;
  align-items: center;
  justify-content: center;
}

.banner {
  display: block;
  width: 19.9375em;
  height: 7.5em;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.banner:hover {
  opacity: 0.85;
}

.banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* ==================== 商品詳細ページ ==================== */
/* サイドバー用グレー（Figma: #e9e9e9） */
:root {
  --sidebar-gray: #e9e9e9;
}

.body_in {
  padding-top: 0;
}

/* --- Site Bar --- */
.site-bar {
  background: var(--yellow);
  width: 100%;
}

.site-bar__title {
  font-weight: 900;
  font-size: 1.25em;
  color: var(--white);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.site-bar_nvl {
  background: var(--black-0);
}

.site-bar_nvf {
  background: var(--f-pink);
}

.site-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75em var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-bar__label {
  font-weight: 700;
  font-size: 1em;
  color: var(--black);
  line-height: 1;
}

.site-bar__link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  font-size: 1em;
  color: var(--black);
  line-height: 1;
  transition: opacity 0.2s ease;
}

.site-bar__link:hover {
  opacity: 0.65;
}

/* CSS矢印（>） */
.site-bar__arrow {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.125em solid var(--black);
  border-bottom: 0.125em solid var(--black);
  transform: rotate(-45deg);
  flex-shrink: 0;
}


/* --- Breadcrumb --- */
.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.75em var(--section-padding-x);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  font-size: 0.8em;
  font-weight: 400;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.375em;
}

a.breadcrumb__link {
  color: var(--black);
  white-space: nowrap;
  transition: opacity 0.2s ease;
  line-height: 1 !important;
}

a.breadcrumb__link:hover {
  opacity: 0.7;
}

.breadcrumb__separator {
  display: block;
  width: 0.25em;
  height: 0.75em;
  flex-shrink: 0;
}

.breadcrumb__current {
  color: var(--black);
  white-space: wrap;
  line-height: 1;
}

.breadcrumb .all-link::before,
.breadcrumb .all-link::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 6px;
  height: 1px;
  border-radius: 9999px;
  background-color: var(--black) !important;
  transform-origin: calc(100% - 0.5px) 50%;
}

/* .breadcrumb .all-link_return::before,
.breadcrumb .all-link_return::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5px);
    right: 0;
    width: 6px;
    height: 1px;
    border-radius: 9999px;
    background-color: var(--gray2) !important;
    transform-origin: calc(100% - 0.5px) 50%;
} */

/* .breadcrumb a.breadcrumb__link_return{
    color: var(--gray2) !important;
} */

/* TOPはMontserratフォント */
.breadcrumb__item:first-child .breadcrumb__link {}

.breadcrumb__item--current {
  color: var(--black);
  white-space: normal;
}


.breadcrumb__link {
  color: var(--gray2);
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: var(--black);
}

/* セパレーター（ › ） */
.breadcrumb__sep {
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  border-right: 0.1em solid var(--gray2);
  border-bottom: 0.1em solid var(--gray2);
  transform: rotate(-45deg);
  flex-shrink: 0;
}


/* --- Product Main Layout --- */
.product-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding-x) 12.5em;
  display: flex;
  gap: 4.625em;
  /* Figma: 74px */
  align-items: flex-start;
  background: var(--white);
}

.product-main_list {
  flex-direction: column;
  padding: 0 var(--section-padding-x) 3.75em;
}

/* メインコンテンツ（左） */
.product-contents {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6.25em;
  /* セクション間: 100px */
}

/* サイドバー（右・スクロール追従） */
.product-sidebar {
  width: 21.5em;
  /* Figma: 344px */
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 1.5em);
  align-self: flex-start;
}

.search_title {
  font-size: 1.625em;
  font-weight: bold;
  line-height: 1;
}


.product-main .swiper-wrapper {
  display: flex !important;
  transition-timing-function: linear !important;
}

.product-main .swiper-slide {
  flex-shrink: 0 !important;
}

.product-main .swiper-slide {
  width: calc((100% - (1.875em * 3)) / 4) !important;
  margin-right: 1.875em !important;
}

.product-main .swiper-slide:last-child {
  margin-right: 0 !important;
}

.product-main .goods-same-author .swiper-button-next,
.product-main .goods-same-author  .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
  background-color: rgba(247, 247, 247, 0.9);
  height: 5rem !important;
  padding: 0 1rem !;
  width: 5rem !important;
  color: #FABE00 !important;
  margin: 0 !important;
  border-radius: 999px;
}
.product-main .goods-same-author .swiper-button-next{
  right: -3.5%;
}
.product-main .goods-same-author  .swiper-button-prev{
  left: -3.5%;
}

.product-main .swiper-button-next:after,
.product-main .swiper-button-prev:after {
  font-size: 2.5rem;
}

.product-main .swiper-button-next {
  right: 0;
}

.product-main .swiper-button-prev {
  left: 0;
}


/* ガルド設定 */
.goods-same-author_grd{
  max-width: 90%;
  margin: 0 auto;
  margin-top: 2em;
}
.goods-same-author_grd .swiper-button-next,
.goods-same-author_grd .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
  background-color: rgba(247, 247, 247, 0.9);
  height: 5rem !important;
  padding: 0 1rem !;
  width: 5rem !important;
  color: #009fe8 !important;
  margin: 0 !important;
  border-radius: 999px;
}

.goods-same-author_grd .swiper-button-next:after,
.goods-same-author_grd .swiper-button-prev:after {
  font-size: 2.5rem;
}

.goods-same-author_grd .swiper-button-next {
  right: -3.5%;
}

.goods-same-author_grd .swiper-button-prev {
  left: -3.5%;
}


/* --- Goods Page Title（共通セクション見出し） --- */
.goods-page-title {
  width: 100%;
  background: var(--gray1);
  /* border-left: 0.25em solid var(--gray1); */
  border-left: 0.25em solid var(--gray1);
  padding: 0.75em 0 0.75em 1.25em;
  font-weight: 500;
  font-size: 1.125em;
  color: var(--black);
  line-height: 1;
}

.goods-page-title_bnk {
  border-left: 0.25em solid var(--yellow);
}

.goods-page-title_nvl {
  /* border-left: 0.25em solid var(--black); */
  border-left: 0.25em solid #3C4190;
}

.goods-page-title_nvf {
  border-left: 0.25em solid var(--f-pink);
}

.goods-page-title_nvr {
  border-left: 0.25em solid var(--r-pink);
}

.goods-page-title_cgb{
  border-left: 0.25em solid #009FE8;
  background: #000000;
  color: #ffffff;
}



/* --- goods_explanation --- */
.goods-explanation {
  display: flex;
  flex-direction: column;
  gap: 3.75em;
  align-items: center;
}

.goods-explanation__cover {
  max-width: 26.625em;
  width: 100%;
  box-shadow: 0 0 0.625em 0 rgba(0, 0, 0, 0.1);
}

.goods-explanation__cover img {
  width: 100%;
  height: auto;
}

.goods-explanation__body {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  width: 100%;
}

.goods-explanation__title {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.5;
  color: var(--black);
}

.goods-explanation__author {
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5;
  color: var(--black);
}

.goods-explanation__desc {
  font-weight: 400;
  font-size: 1em;
  line-height: 1.8;
  color: var(--black);
}

/* .goods-explanation__desc h3 {
  font-size: 1.5em;
  font-weight: 500;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--gray2);
  margin: 0.5em 0 -0.5em;
} */

.goods-explanation__desc h3 {
  font-size: 1.5em;
  font-weight: 500;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--gray2);
  margin: 2em 0 0.5em;
}

.goods-explanation__catchcopy {
  color: var(--yellow);
  font-size: 1.2em;
  font-weight: 600;
}

.product-main tbody {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.product-main .product_data tr {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.product-main .product_data tr td:nth-of-type(1) {
  font-weight: 600;
  font-size: 2.4rem;
  margin: 0 0 1.4rem;
  padding: 1rem 0.5rem;
  border-top: 1px solid var(--gray2);
  border-bottom: 1px solid var(--gray2);
}

.product-main .copyright {
  width: 100%;
  font-size: 0.7em;
  text-align: left;
}

.goods-explanation__btns {
  display: flex;
  gap: 1.25em;
  width: 100%;
}

.goods-explanation__btns>li {
  flex: 1;
  display: flex;
}

.goods-explanation__btn {
  width: 100%;
  max-width: 20em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--black);
  color: var(--white);
  padding: 1.2em 1em 1.2em 1.4em;
  border-radius: 0.125em;
  font-weight: 500;
  font-size: 0.875em;
  letter-spacing: 0.0375em;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.goods-explanation__btn:hover {
  opacity: 0.75;
}

.goods-explanation__text {
    width: 100%;
    text-align: center;
    color: var(--white);
    font-weight: 500;
    display: block;
    display: flex;
    justify-content: center;
}

.goods-explanation__btn-arrow {
  position: relative;
  display: inline-block;
  width: 3.5px;
  height: 9.7px;
}

.goods-explanation__btn-arrow::before,
.goods-explanation__btn-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 6px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 0.5px) 50%;
}

.goods-explanation__btn-arrow::before {
  transform: rotate(60deg);
}

.goods-explanation__btn-arrow::after {
  transform: rotate(-60deg);
}


/* --- goods_gallery --- */
.goods-gallery {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  align-items: flex-start;
}

.goods-gallery__img {
  height: 100%;
  margin: 0 auto;
}

.goods-gallery__img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* --- goods_series & goods_same-author --- */
.goods-series,
.goods-same-author {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  align-items: flex-start;
  /* overflow: hidden; */
}
.goods-same-author .swiper{
  width: 100%;
}
.goods-series .swiper-btn_wrap,
.goods-same-author .swiper-btn_wrap{
  position: relative;
      width: 100%;
}

.goods-same-author .product-card {
  width: calc((100% - (1.875em * 3)) / 4) !important;
  margin-right: 1.875em !important;
  
}


/* --- Product Cards Grid --- */
#all_list {
  width: 100%;
}
#all_list .product-cards {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.875em;
  width: 100%;
}

.product-card {
  width: calc((100% - (1.875em * 4)) / 5);
}

.product-card a {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.product-card a:hover {
  text-decoration: none;
}

.product-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 1128;
  box-shadow: 0 0 0.625em 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.product-card__img figure {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100% !important;
  margin: 0 auto;
}

.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__new-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--red);
  color: var(--white);
  font-weight: 500;
  font-size: 0.625em;
  line-height: 1;
  padding: 0.25em 0.375em;
}

.product-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.product-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.5em;
  background: var(--yellow);
  color: var(--white);
  font-weight: 500;
  font-size: 0.625em;
  border-radius: 0.125em;
  line-height: 1;
  align-self: flex-start;
}

.product-card__title {
  font-size: 0.875em;
  line-height: 1.6;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --- Sidebar ===== */
.sidebar-buy {
  border-radius: 0.25em;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sidebar-gray);
}

/* タブヘッダー */
.sidebar-buy__header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  background: var(--sidebar-gray);
  padding: 1em 2.125em 0.875em;
  font-weight: 700;
  font-size: 1em;
  color: var(--black);
  line-height: 1;
}

/* 本文エリア */
.sidebar-buy__body {
  background: var(--white);
  border: 1px solid var(--sidebar-gray);
  border-top: none;
  padding: 1.8em;
  display: flex;
  flex-direction: column;
  gap: 1.625em;
  /* Figma: 26px */
  border-radius: 0 0 0.25em 0.25em;
}

/* 書籍タイトル */
.sidebar-buy__title {
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--black);
}

/* 書誌情報リスト */
.sidebar-buy__specs {
  display: flex;
  flex-direction: column;
  gap: 0.875em;
  /* Figma: 14px */
}

.sidebar-buy__spec-row {
  display: flex;
  align-items: center;
  gap: 0.625em;
  /* Figma: 10px */
}

.sidebar-buy__spec-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 5.25em;
  /* 52px: label text 36px + padding 8px*2 */
  padding: 0.5em 3em;
  background: var(--sidebar-gray);
  border-radius: 0.0625em;
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
  width: 4em;
}

/* 発売日ラベルはNoto Sans JP */
.sidebar-buy__spec-value {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
}

/* 取り扱いショップ */
.sidebar-buy__shops {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.sidebar-buy__shops-title {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black);
  line-height: 1;
}

.sidebar-buy__shop-list {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.sidebar-buy__shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 280 / 52;
  background: var(--sidebar-gray);
  border-radius: 0.125em;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.sidebar-buy__shop-btn:hover {
  opacity: 0.75;
}

/* PC版の各ストアロゴサイズ調整 */
.sidebar-buy__shop-list .store-o img {
  max-width: 47%;
  max-height: 55%;
  object-fit: contain;
}

.sidebar-buy__shop-list .store-a img {
  max-width: 47%;
  max-height: 50%;
  object-fit: contain;
}

.sidebar-buy__shop-list .store-s img {
  max-width: 62%;
  max-height: 65%;
  object-fit: contain;
}

.sidebar-buy__shop-list .store-r img {
  max-width: 39%;
  max-height: 39%;
  object-fit: contain;
}

.sidebar-buy__shop-list .store-y img {
  max-width: 54%;
  max-height: 45%;
  object-fit: contain;
}

.npgs {
  width: 100%;
}


/* --- SP対応 (768px以下) --- */
@media (max-width: 768px) {
  .pc {
    display: none;
  }

  .site-bar__inner {
    padding: 0.625em 2em;
  }

  .breadcrumb__inner {
    padding: 1.5em 2em;
  }

  .breadcrumb__item {
    font-size: 0.875em;
  }

  .breadcrumb__item--current {
    white-space: normal;
  }

  .product-main {
    flex-direction: column;
    padding: 0 2em 5em;
    gap: 2.5em;
  }

  .product-contents {
    gap: 3.75em;
    width: 100%;
  }

  .product-sidebar {
    width: 100%;
    position: static;
  }

  .product-main .swiper-slide {
    /* (100% - 2回分の余白) ÷ 3枚 */
    width: calc((100% - (1em * 2)) / 3) !important;
    margin-right: 1em !important;
  }

  .goods-explanation {
    gap: 2em;
  }

  .goods-explanation__title {
    font-size: 1.25em;
  }

  .goods-explanation__btns {
    gap: 0.75em;
    flex-wrap: wrap;
  }

  .goods-explanation__btn {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  #all_list .product-cards {
    gap: 1em;
  }
  .product-cards .product-card,
  .goods-same-author .product-card {
    width: calc((100% - 1em * 2) / 3);
    margin-right: 1em !important;
  }
}



/* ===== Wide Screen (1281px+) ===== */
@media (min-width: 1281px) {
  .header__inner {
    max-width: var(--max-width);
  }
}

/* ===== SPサイズまでの調整 (768px以下) ===== */
@media (max-width: 940px) {
  .header__inner {
    gap: 4%;
  }

  .header__search {
    width: 86%;
    max-width: 18em;
  }

  .global-nav__col-title {
    font-size: 1.2em;
    padding-left: 0.6em;
  }

  .global-nav__list a {
    font-size: 0.8em;
  }

  .section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4em;
  }

  .category-tabs {
    width: 100%;
  }

  .footer-nav--border {
    padding-left: 1.5em;
  }

  .footer-nav:nth-of-type(1) {
    padding: 0;
  }

  .category-tab {
    white-space: nowrap;
    flex: 1 1 auto;
  }

  .footer-nav {
    width: 26%;
  }

  .footer-nav__title {
    font-size: 0.85em;
  }

  .footer-nav__list a {
    font-size: 0.65em;
  }
}

/* ===== SP (768px以下) ===== */
@media (max-width: 768px) {
  :root {
    --section-padding-x: 1.25em;
    --section-padding-y: 3.75em;
    --card-width: calc(50% - 0.625em);
  }

  body {
    font-size: clamp(12px, 1.34vw + 5.7px, 16px);
  }
  
  header,footer, nav.global-nav{
    font-size: clamp(12px, 1.34vw + 5.7px, 16px) !important;
  }

  body {
    /* margin-top: 3.75em; */
    margin-top:  clamp(45px, 3.8vw + 29.47px, 59.96px);
  }

  .pc {
    display: none;
  }

  .icon-circle-up:before {
    content: "";
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    background-image: url(../img/new-default/top-back.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Header */
  .header__inner {
    padding: 0.75em 1.2em;
    height: 3.75em;
  }

  .header__logo img {
    width: 6.25em;
    height: auto;
  }

  .header__icons a {
    display: none;
  }

  .header__icon-link span {
    display: none;
  }

  .header__icon-link img {
    width: 1.5em;
    height: 1.5em;
  }

  .header__divider {
    display: none;
  }

  .splide__list {
    gap: 1em !important;
  }

  .breadcrumb {
    padding: 2em;
  }

  .breadcrumb__list {
    padding: 0 !important;
  }

  .breadcrumb__current {
    line-height: 1.6;
  }

  .global-nav__sns {
    gap: 1.4em;
  }

  .all-link {
    width: 4px;
    height: 4px;
  }

  .breadcrumb .all-link::before,
  .breadcrumb .all-link::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.3px);
    right: 0;
    width: 4px;
    height: 0.6px;
    border-radius: 9999px;
    background-color: var(--black);
    transform-origin: calc(100% - 0.3px) 50%;
  }

  .label-nav_inner{
    font-size: clamp(12px, 1.34vw + 5.7px, 16px) !important;
  }


  /* スライダー */
  .slider {
    padding-top: 0;
  }

  .slider__slide {
    width: calc(100vw - 40px) !important;
  }

  .slider__img-dummy {
    width: 100%;
    height: auto;
    aspect-ratio: 723 / 422;
  }

  .slider__track {
    padding-top: 0;
  }

  .slider .swiper-horizontal>.swiper-pagination-bullets,
  .slider .swiper-pagination-bullets.swiper-pagination-horizontal,
  .slider .swiper-pagination-custom,
  .slider .swiper-pagination-fraction {
    bottom: 0 !important;
  }

  .section__inner {
    padding: var(--section-padding-y) 2em;
  }

  /* Category Bar */
  .category-bar__inner {
    padding: 0.5em var(--section-padding-x);
    min-height: 2.5em;
    height: 5.5vw;
  }

  .category-bar__logo,
  .site-bar__title {
    height: 0.9em;
  }

  /* ラストカード非表示 */
  .top-bg .section-books .goods-grid article:nth-of-type(4),
  .top-bg .section-books .goods-grid article:nth-of-type(5),
  .top-bg .section-anime .goods-grid article:nth-of-type(4),
  .top-bg .section-anime .goods-grid article:nth-of-type(5),
  .top-bg .section-pokemon .goods-grid article:nth-of-type(4),
  .top-bg .section-pokemon .goods-grid article:nth-of-type(5),
  .top-bg .section-game .goods-grid article:nth-of-type(4),
  .top-bg .section-game .goods-grid article:nth-of-type(5) {
    display: none;
  }

  .category-bar__release-jp {
    font-size: 0.875em;
  }

  .category-bar__release-num {
    font-size: 1.5em;
  }

  /* Category Banner */
  .cat-banner {
    padding: 3.75em var(--section-padding-x);
  }

  .cat-banner__novels-main {
    font-size: 1em;
  }


  .slider__slide {
    width: 100% !important;
    /* 1枚で画面いっぱいに広げる */
  }

  /* BNK Site Link */
  .bnk-site-link__card {
    padding: 2em 1.5em;
    gap: 1.5em;
  }

  .bnk-site-link__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }

  .bnk-site-link__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25em;
  }

  /* BNK Next Month Goods */
  .bnk-next-goods__card {
    padding: 2em 1.5em;
    gap: 1.5em;
  }

  .bnk-next-goods__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }

  .bnk-next-goods__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em;
  }

  .bnk-next-goods__badges {
    width: auto;
  }

  /* BNK This Month Goods */
  .bnk-goods__card {
    padding: 2em 1.5em;
    gap: 1.5em;
  }

  .bnk-goods__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }

  /* BNK News */
  .bnk-news__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
    padding: 2em 1.5em;
  }

  .bnk-news__head {
    flex: none;
    width: 100%;
    gap: 1.5em;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .bnk-news__title-block {
    flex: 1;
    min-width: 0;
  }

  .bnk-news__title {
    font-size: 1.375em;
  }

  .bnk-news__btn {
    flex: 0 0 auto;
    width: auto;
  }

  .bnk-news__text {
    white-space: normal;
  }

  /* BR Wrap */
  .br-wrap__inner {
    flex-direction: column;
    gap: 1em;
  }

  /* BNK Page Navigation */
  .bnk-page-nav {
    padding: 1em var(--section-padding-x);
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bnk-page-nav__list {
    flex-shrink: 0;
  }

  .bnk-page-nav__item {
    min-width: auto;
    padding: 0.875em 1em;
    font-size: 0.875em;
  }


  /* Slider */
  .splide__list {
    gap: 0 !important;
  }

  .slider__slide {
    width: 100vw !important;
  }

  .slider__img-dummy {
    width: 100%;
    height: auto;
    aspect-ratio: 723 / 422;
    border-radius: 0;
  }

  .slider__track-wrap {
    overflow: hidden !important;
  }

  .slider .swiper-button-prev,
  .slider .swiper-button-next {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    transform: none !important;
    width: 2.5px !important;
    height: 13.1px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    cursor: pointer;
    display: inline-block !important;
  }

  .slider__prev::before,
  .slider__prev::after,
  .slider__next::before,
  .slider__next::after {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 0.5px) !important;
    left: 0 !important;
    width: 8px !important;
    height: 1px !important;
    border-radius: 9999px !important;
    background-color: var(--yellow) !important;
    transform-origin: calc(100% - 0.5px) 50% !important;
  }

  .slider .slider__prev {
    transform: rotate(180deg) !important;
  }

  /* NEWS */
  .section-news__inner {
    flex-direction: column;
    gap: 1.875em;
    padding: 2.5em 2em 3.75em;
  }

  /* Section */
  .section__inner {
    gap: 2.5em;
  }

  .section-title {
    font-size: 2.5em;
  }

  /* Category tabs */
  .category-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
  }

  .category-tab {
    min-width: auto;
    font-size: 0.9em;
    padding: 0 0.75em 0.75em;
    white-space: nowrap;
    line-height: 1.4;
    height: 3.625em;
  }

  /* Goods grid */
  .goods-grid {
    gap: 1.25em;
  }

  .goods-card {
    width: calc((100% - 1.25em * 2) / 3);
  }

  /* Anime grid */
  .anime-grid {
    flex-wrap: wrap;
    gap: 1.25em;
  }

  .anime-card {
    width: calc((100% - 1.25em * 2) / 3);
  }

  /* White right rounded */
  .section--white-right {
    border-radius: 0 2.5em 2.5em 0;
  }

  .section--white-left {
    background: var(--white);
    border-radius: 2.5em 0 0 2.5em;
  }

  /* Banner */
  .banner-wrap__inner {
    padding: 2.5em 2em;
    gap: 1em;
  }

  .banner {
    height: auto;
    aspect-ratio: 319 / 120;
    width: calc(50% - (1em / 2));
  }

  /* Footer */
  .footer__inner {
    padding: 3em 2em 2.5em;
  }

  .footer__logo {
    width: 36%;
    max-width: 12em;
  }

  .footer__top {
    gap: 1.25em;
  }

  .footer__nav-wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    min-width: 327px;
  }

  .footer-nav {
    width: 46%;
    padding: 0 !important;
  }

  .footer-nav:nth-of-type(1),
  .footer-nav:nth-of-type(3) {
    padding-left: 1em !important;
  }

  .footer-nav:nth-of-type(2),
  .footer-nav:nth-of-type(4) {
    padding-right: 1em !important;
  }

  .footer-nav:nth-of-type(5) {
    width: 100%;
    padding-right: 1em !important;
    padding-left: 1em !important;
    padding-top: 2em !important;
    border-top: 0.5px solid var(--gray4);
    margin-top: 2em;
  }

  .footer-nav__title {
    font-size: 1.15em;
  }

  .footer-nav__list a {
    line-height: 1.2;
    font-size: 1em;
  }

  .footer-nav:nth-of-type(3),
  .footer-nav:nth-of-type(4) {
    margin-top: 3em;
  }

  .footer-nav--border {
    border: none;
  }

  .footer__privacy a {
    font-size: 1em;
  }

  .footer__copy {
    font-size: 0.8em;
  }

  .top-btn
  .btn-nav {
    min-width: 14em;
  }

  .site-footer .top-btn {
    min-width: 15em;
  }

  /* Global nav SP */
  .global-nav {
    top: 3.75em;
    max-height: calc(100vh - 3.75em);
    height: 100dvh;
  }

  .nav-overlay {
    top: 3.75em;
  }

  .global-nav__inner {
    padding: 8.5vw 2em 0;
    gap: 2.5em;
    width: 85%;
    min-width: 375px;
  }

  .global-nav__columns {
    flex-wrap: wrap;
    gap: 2em;
    width: 95%;
    margin: 0 auto;
  }

  .global-nav__col {
    width: 45%;
  }

  .global-nav__footer {
    align-items: center;
    gap: 1.875em;
  }

  .global-nav__footer .top-btn {
    min-width: 14.5em;
  }

  /* goods-store */
  .sidebar-buy__shop-btn {
    aspect-ratio: 330 / 52;
  }

  .sidebar-buy__shop-list .sidebar-buy__shop-btn img {
    width: 100%;
    max-height: none !important;
    object-fit: contain;
  }

  .sidebar-buy__shop-list .store-o img {
    max-width: 38%;
  }

  .sidebar-buy__shop-list .store-a img {
    max-width: 26%;
  }

  .sidebar-buy__shop-list .store-s img {
    max-width: 52%;
  }

  .sidebar-buy__shop-list .store-r img {
    max-width: 36%;
  }

  .sidebar-buy__shop-list .store-y img {
    max-width: 34%;
  }

  .goods-explanation__cover {
    max-width: 28.8em;
  }

  .goods-gallery__img {
    height: 19.1em;
  }

  .goods-same-author .product-card {
    width: calc((100% - (1em * 2)) / 3) !important;
  }

  .product-main .product_data tr td:nth-of-type(1) {
    font-size: 1.6rem;
  }
  .product-main .goods-same-author .swiper-button-next,
  .goods-same-author_grd .swiper-button-next{
  right: -4.5%;
}
.product-main .goods-same-author  .swiper-button-prev,
.goods-same-author_grd .swiper-button-prev{
  left: -4.5%;
}
.product-main .goods-same-author .swiper-button-next,
.product-main .goods-same-author  .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
  background-color: rgba(247, 247, 247, 0.9);
  height: 3.5rem !important;
  padding: 0 1rem !;
  width: 3.5rem !important;
  color: #FABE00 !important;
  margin: 0 !important;
  border-radius: 999px;
}
.goods-same-author_grd .swiper-button-next,
.goods-same-author_grd .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
  background-color: rgba(247, 247, 247, 0.9);
  height: 3.5rem !important;
  padding: 0 1rem !;
  width: 3.5rem !important;
  color: #009FE8 !important;
  margin: 0 !important;
  border-radius: 999px;
}
.product-main .swiper-button-next:after, .product-main .swiper-button-prev:after,
.goods-same-author_grd .swiper-button-next:after, .goods-same-author_grd .swiper-button-prev:after{
  font-size: 2rem;
}
.goods-explanation__btns{
  justify-content: center;
}
.goods-explanation__btns>li{
  width: calc((100% - 0.75em) / 2);
  flex: none;
  max-width: 226px;
}
}
@media (max-width: 500px) {
  .btn-wrap{
    gap: 1rem;
  }
  .tab-panel .btn-wrap .btn{
    min-width: 14.8em;
  }
}