:root {
  --theme-blue: #0071e3; 
  --theme-light-gray: #f5f5f7; 
  --theme-medium-gray: #86868b; 
  --theme-dark-gray: #1d1d1f; 
}

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

html {
  scroll-behavior: smooth; 
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  line-height: 1.6; 
  margin: 0; 
  padding: 0; 
  background-color: var(--theme-light-gray); 
  color: var(--theme-dark-gray); 
}
h1, h2, h3 {
  font-weight: 600; 
}
.slider-banner[hidden]{display:none!important;}
.slider-banner{ position:relative; left:0; right:auto; margin:0; width:100%; max-width:100%; padding:0; overflow:hidden; }
header.has-slider-banner { padding-top: 0 !important;  padding-left:0 !important; padding-right:0 !important; padding-inline:0 !important; }
header {
  background-color: #fff; 
  color: #1D1D1F; 
  text-align: center; 
  padding: 0.5rem 1rem; 
}
header h1 {
  margin-bottom: 0.25rem; 
}
header p {
  margin-top: 0; 
  margin-bottom: 0; 
  color: var(--theme-medium-gray); 
}
footer {
  background-color: var(--theme-medium-gray); 
  color: var(--theme-dark-gray); 
  text-align: center; 
  padding: 2rem 1rem; 
  font-size: 0.9rem; 
}
.back-to-top-btn.show {
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
}

.anchor-nav {
  position: sticky; 
  top: 0; 
  z-index: 999; 
  background-color: #fff; 
  backdrop-filter: blur(10px); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 0.5rem 1rem; 
}
.anchor-nav ul {
  list-style: none; 
  padding: 0 1rem; 
  margin: 0; 
  display: flex; 
  flex-wrap: nowrap; 
  gap: 15px; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  flex-grow: 1; 
  min-width: 0; 
}
.anchor-nav ul::-webkit-scrollbar {
  display: none; 
}
.anchor-nav a {
  display: inline-block; 
  position: relative; 
  text-decoration: none; 
  background-color: transparent; 
  border: none; 
  color: var(--theme-medium-gray); 
  padding: 8px 5px; 
  font-size: 0.9rem; 
  font-weight: 500; 
  transition: color 0.3s; 
  white-space: nowrap; 
}
.anchor-nav a:hover {
  color: var(--theme-blue); 
}
.anchor-nav a.active {
  color: var(--theme-blue); 
  font-weight: 600; 
}
.anchor-nav a::after {
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 2px; 
  background-color: var(--theme-blue); 
  transform: scaleX(0); 
  transform-origin: center; 
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
}
.anchor-nav a.active::after {
  transform: scaleX(1); 
}
.product-section {
  background-color: #fff; 
  margin-bottom: 1rem; 
  padding: 1rem; 
  border-radius: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}
.product-section h2 {
  margin-top: 0; 
  font-size: 1.2rem; 
  margin-bottom: 0.5rem; 
}
.product-list-container,
.card-list-container {
  overflow-x: auto; 
}
.card-list {
  display: flex; 
  flex-wrap: nowrap; 
  gap: 1rem; 
  padding-bottom: 1rem; 
}

.product-item {
  flex: 0 0 150px; 
  text-align: center; 
}
.product-item img {
  max-width: 100%; 
  height: auto; 
  border-radius: 8px; 
  margin-bottom: 0.5rem; 
  
aspect-ratio: 1 / 1; 
  object-fit: cover; 
}
.product-name {
  font-weight: 500; 
  margin: 0.5rem 0; 
  font-size: 0.9rem; 

  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommendation-card {
  background-color: #fff; 
  border: 1px solid #e8e8ed; 
  border-radius: 12px; 
  padding: 1.5rem; 
  margin-top: 0.5rem; 
  width: 320px; 
  flex-shrink: 0; 
  transition: opacity 0.3s, transform 0.3s, width 0.3s, padding 0.3s, margin 0.3s; 
}
.card-header {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 1rem; 
  gap: 1rem; 
}
.card-header h3 {
  margin: 0; 
  font-size: 1.1rem; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.card-header-button {
  color: var(--theme-blue); 
  background-color: transparent; 
  border: 1px solid var(--theme-blue); 
  padding: 6px 14px; 
  border-radius: 20px; 
  text-decoration: none; 
  font-size: 0.8rem; 
  font-weight: 500; 
  transition: background-color 0.3s, color 0.3s; 
  white-space: nowrap; 
  flex-shrink: 0; 
}
.card-header-button:hover {
  background-color: var(--theme-blue); 
  color: #fff; 
}
.product-grid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1.5rem; 
}
.grid-item {
  text-align: left; 
  transition: opacity 0.3s, transform 0.3s; 
}

.filter-bar {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin-bottom: 1rem; 
}
.category-filter-nav {
  flex-grow: 1; 
  display: flex; 
  gap: 8px; 
  overflow-x: auto; 
  padding-bottom: 5px; 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  scroll-behavior: smooth; 
}
.category-filter-nav::-webkit-scrollbar {
  display: none; 
}
.filter-btn {
  background-color: var(--theme-light-gray); 
  color: var(--theme-dark-gray); 
  border: 1px solid #d2d2d7; 
  border-radius: 980px; 
  padding: 5px 14px; 
  font-size: 0.8rem; 
  font-weight: 500; 
  cursor: pointer; 
  white-space: nowrap; 
  transition: background-color 0.2s, color 0.2s, border-color 0.2s; 
  flex-shrink: 0; 
}
.filter-btn:hover {
  background-color: #e8e8ed; 
}
.filter-btn.active {
  background-color: var(--theme-dark-gray); 
  color: #fff; 
  border-color: var(--theme-dark-gray); 
}
.hidden {
  display: none !important; 
}
.product-item.hidden {
  display: none !important; 
}
.recommendation-card.hidden {
  width: 0; 
  padding: 0; 
  margin: 0; 
  border: none; 
  opacity: 0; 
  overflow: hidden; 
}
.grid-item.hidden {
  opacity: 0; 
  transform: scale(0.9); 
  pointer-events: none; 
}
.grid-item img {
  width: 100%; 
  height: auto; 
  border-radius: 4px; 
  margin-bottom: 0.5rem; 
}
.discount-tag {
  background-color: #CC0C39; 
  color: #fff; 
  padding: 4px 8px; 
  font-size: 0.9rem; 
  font-weight: bold; 
  border-radius: 4px; 
  display: inline-block; 
}

.banner-grid {
  display: grid; 
  gap: 1.5rem; 
  grid-template-columns: repeat(4, 1fr); 
}
.service-banner {
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  position: relative; 
  aspect-ratio: 1 / 1; 
  background-size: cover; 
  background-position: center; 
  border-radius: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  overflow: hidden; 
  text-decoration: none; 
  color: #fff; 
  transition: transform 0.3s ease; 
}

.banner-content {
  position: relative; 
  z-index: 2; 
  padding: 1rem; 
  text-align: left; 
}
.banner-content h3 {
  margin: 0 0 0.25rem 0; 
  font-size: 1.1rem; 
  font-weight: 700; 
  text-shadow: none !important; 
  filter: none !important; 
}
.banner-content p {
  margin: 0; 
  font-size: 0.85rem; 
  font-weight: 400; 
}
.product-section,
#services-section {
  opacity: 1; 
  transform: none; 
}
.js .product-section,
.js #services-section {
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.js .product-section.is-visible,
.js #services-section.is-visible {
  opacity: 1; 
  transform: translateY(0); 
}
.product-item a,
.grid-item a {
  display: block; 
  text-decoration: none; 
  color: inherit; 
  transition: opacity 0.3s; 
  position: relative; 
}
.product-item a:hover,
.grid-item a:hover {
  opacity: 0.8; 
}
.product-list-gapless {
  display: flex; 
  flex-wrap: nowrap; 
  gap: 0; 
}
.product-list-gapless .product-item img {
  border-radius: 0; 
}
.section-header {
  display: flex; 
  justify-content: space-between; 
  align-items: baseline; 
  margin-bottom: 1rem; 
}
.section-header-link {
  text-decoration: none; 
  color: var(--theme-blue); 
  font-weight: 500; 
  font-size: 0.8rem; 
  flex-shrink: 0; 
  padding: 6px 14px; 
  border-radius: 20px; 
  transition: all 0.2s; 
  border: 1px solid var(--theme-blue); 
}
.section-header-link:hover {
  background-color: var(--theme-blue); 
  color: #fff; 
}
.shop-grid-container {
  overflow-x: auto; 
  padding-bottom: 1rem; 
}
.shop-grid {
  display: grid; 
  grid-auto-flow: column; 
  grid-template-rows: repeat(2, auto); 
  gap: 1rem; 
}
.shop-product-item {
  width: 160px; 
}
.shop-product-item a {
  text-decoration: none; 
  color: inherit; 
  display: block; 
  transition: opacity 0.3s; 
}
.shop-product-item a:hover {
  opacity: 0.8; 
}
.shop-product-item img {
  width: 100%; 
  height: auto; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  display: block; 
}
.product-list-container,
.card-list-container,
.shop-grid-container {
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}
.product-list-container::-webkit-scrollbar,
.card-list-container::-webkit-scrollbar,
.shop-grid-container::-webkit-scrollbar {
  display: none; 
}
@media (max-width: 768px) {
    .banner-grid {
  grid-template-columns: repeat(2, 1fr); 
    }
    .banner-content h3 {
  font-size: 1rem; 
    }
    .banner-content p {
  font-size: 0.8rem; 
    }
    .shop-product-item {
  width: 140px; 
    }
    .shop-grid {
  gap: 1rem; 
    }
}
.rank-badge.rank-1 {
  background-color: #D4AF37; 
}
.rank-badge.rank-2 {
  background-color: #C0C0C0; 
}
.rank-badge.rank-3 {
  background-color: #CD7F32; 
}
.scroll-container-wrapper {
  position: relative; 
}
.scroll-button {
  display: none; 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  z-index: 20; 
  width: 45px; 
  height: 100px; 
  background-color: rgba(255, 255, 255, 0.5); 
  backdrop-filter: blur(8px); 
  border: 1px solid rgba(0, 0, 0, 0.08); 
  border-radius: 6px; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  color: var(--theme-dark-gray); 
  cursor: pointer; 
  transition: background-color 0.2s, opacity 0.3s, transform 0.2s; 
  align-items: center; 
  justify-content: center; 
}
.scroll-button:hover {
  background-color: rgba(255, 255, 255, 0.8); 
  transform: translateY(-50%); 
}
.scroll-button.prev {
  left: 0; 
}
.scroll-button.next {
  right: 0; 
}
.scroll-button::after {
  content: ''; 
  display: block; 
  width: 12px; 
  height: 12px; 
  border-top: 3px solid var(--theme-dark-gray); 
  border-right: 3px solid var(--theme-dark-gray); 
}
.scroll-button.next::after {
  transform: translateX(-2px) rotate(45deg); 
}
.scroll-button.prev::after {
  transform: translateX(2px) rotate(-135deg); 
}
.scroll-container-wrapper .scroll-button.hidden {
  opacity: 0; 
  pointer-events: none; 
}
@media (min-width: 769px) {
    .scroll-container-wrapper .scroll-button {
  display: flex; 
    }
}

.scroll-arrow,
.anchor-scroll-arrow {
  display: none; 
  flex-shrink: 0; 
  width: 36px; 
  height: 36px; 
  background-color: rgba(255, 255, 255, 0.5); 
  backdrop-filter: blur(8px); 
  border: 1px solid rgba(0, 0, 0, 0.05); 
  border-radius: 6px; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
  cursor: pointer; 
  transition: background-color 0.2s, opacity 0.3s; 
  align-items: center; 
  justify-content: center; 
}
.scroll-arrow:hover,
.anchor-scroll-arrow:hover {
  background-color: rgba(255, 255, 255, 0.8); 
}
.scroll-arrow::after,
.anchor-scroll-arrow::after {
  content: ''; 
  display: block; 
  width: 8px; 
  height: 8px; 
  border-top: 2px solid var(--theme-dark-gray); 
  border-right: 2px solid var(--theme-dark-gray); 
}
.scroll-arrow.next::after,
.anchor-scroll-arrow.next::after {
  transform: translateX(-2px) rotate(45deg); 
}
.scroll-arrow.prev::after,
.anchor-scroll-arrow.prev::after {
  transform: translateX(2px) rotate(-135deg); 
}
.scroll-arrow.hidden,
.anchor-scroll-arrow.hidden {
  opacity: 0; 
  pointer-events: none; 
  visibility: hidden; 
}
[id] { scroll-margin-top: var(--anchor-nav-height, 64px); }
.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0; 
}
.anchor-nav a:focus-visible,
.filter-btn:focus-visible,
.scroll-button:focus-visible,
.scroll-arrow:focus-visible,
button:focus-visible {
  outline: 2px solid var(--theme-blue); 
  outline-offset: 2px; 
}
.rank-badge {
  background: #d3d3d3; 
  color: #111; 
  font-weight: 600; 
}
.filter-bar { position: relative; }
.filter-bar::before,
.filter-bar::after {
  content: ""; 
  position: absolute; 
  top: 0; bottom: 0; 
  width: 28px; 
  pointer-events: none; 
  opacity: 0; 
  transition: opacity 0.2s ease; 
}
.filter-bar::before {
  left: 0; 
  background: linear-gradient(90deg, var(--theme-white, #fff), rgba(255,255,255,0)); 
}
.filter-bar::after {
  right: 0; 
  background: linear-gradient(270deg, var(--theme-white, #fff), rgba(255,255,255,0)); 
}
.filter-bar.has-left::before { opacity: 1; }
.filter-bar.has-right::after { opacity: 1; }
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; } 
  .category-filter-nav { scroll-behavior: auto; } 
  .back-to-top-btn { transition: none; } 
  .js .product-section, .js #services-section { transition: none; transform: none !important; } 
}
.slider-banner{ position:relative; left:0; transform:none; width:100%; background: linear-gradient(90deg, #A2AAAD 0%, #E60012 100%); color:#fff; font-size:0.95rem; font-weight:600; text-align:center; padding:0; margin:0; line-height:2; }
.slider-text {
  display: inline-block; 
}
.product-section:first-of-type { margin-top: 2px; }
main { padding-top: 2px !important; }
.slider-track{
  display:flex; 
  will-change:transform; 
  transition:transform 450ms ease; 
}
.slider-slide{
  flex:0 0 100%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  line-height:2; 
  color:#fff; 
  text-decoration:none; 
  font-weight:700; 
  font-size:0.95rem; 
  background:linear-gradient(90deg,#A2AAAD 0%, #E60012 100%); 
}
.slider-slide.slide-theme-1 { background: #003E9B; }
.slider-slide.slide-theme-2 { background: #E60012; }
.slider-slide.slide-theme-3 { background: #A2AAAD; }
.scroll-container-wrapper > .scroll-button {
  width: 45px !important; 
  height: 100px !important; 
  border-radius: 6px !important; 
  background-color: rgba(255,255,255,0.5) !important; 
  backdrop-filter: blur(8px); 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  top: 50%; 
  transform: translateY(-50%); 
}
.scroll-container-wrapper > .scroll-button::after {
  width: 12px !important; 
  height: 12px !important; 
  border-top: 3px solid var(--theme-dark-gray); 
  border-right: 3px solid var(--theme-dark-gray); 
}
.scroll-container-wrapper > .scroll-button.prev::after { transform: translateX(2px) rotate(-135deg); }
.scroll-container-wrapper > .scroll-button.next::after { transform: translateX(-2px) rotate(45deg); }
.scroll-container-wrapper > .scroll-button:hover {
  background-color: rgba(255,255,255,0.8) !important; 
}
.filter-bar .scroll-arrow::after {
  border-top-color: #000 !important; 
  border-right-color: #000 !important; 
}
.scroll-arrow {
  background-color: rgba(255,255,255,0.5) !important; 
  border: 1px solid rgba(0,0,0,0.05) !important; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; 
}
.scroll-arrow:hover { background-color: rgba(255,255,255,0.8) !important; }
.anchor-scroll-arrow {
  background-color: rgba(255,255,255,0.5) !important; 
  border: 1px solid rgba(0,0,0,0.05) !important; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; 
}
.anchor-scroll-arrow:hover { background-color: rgba(255,255,255,0.8) !important; }
.scroll-button::after,
.scroll-arrow::after,
.anchor-scroll-arrow::after {
  border-top-color: #000 !important; 
  border-right-color: #000 !important; 
}
.scroll-button,
.scroll-arrow,
.anchor-scroll-arrow {
  color: #000 !important; 
}
@media (min-width: 769px) {
  .scroll-container-wrapper > .scroll-button { display: flex !important; } 
  .scroll-arrow, .anchor-scroll-arrow { display: flex; } 
}
#iphone-case, #iphone-film { position: relative; }

#iphone-case, #iphone-film, #charger, #mobile-battery, #iphone-cable { position: relative; }

#iphone-case, #iphone-film, #charger, #mobile-battery, #iphone-cable, #audio { position: relative; }

#iphone-case .filter-bar,
#iphone-film .filter-bar,
#charger .filter-bar,
#mobile-battery .filter-bar,
#iphone-cable .filter-bar,
#audio .filter-bar {
  margin-top: 0.75rem; 
}
.section-header-row{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap: .5rem; 
  margin-bottom:.5rem; 
}
.section-header-row > h2{
  margin:0; 
  font-size:1.2rem; 
  line-height:1.2; 
}
.section-header-row > .section-header-link{
  margin-left:auto; 
}
@media (max-width: 480px){
  .section-header-row{ gap:.25rem; } 
  .section-header-row > h2{ font-size:1.05rem; } 
}
.product-section{ position: relative; }
.section-header-row{
  position: relative; 
  padding-right: 9rem; 
  min-height: 2rem; 
}
.section-header-row > .section-header-link{
  position: absolute; 
  top: 0; 
  right: 0; 
  margin-left: 0; 
}
.section-header-row + .filter-bar{ margin-top: .25rem; }
.section-header-row {
  position: relative; 
  padding-right: 6rem; 
  min-height: 2rem; 
}
.section-header-row > .section-header-link {
  position: absolute; 
  top: 0; 
  right: 0; 
  margin-left: 0; 
  border: none !important; 
  background: none !important; 
  padding: 0 !important; 
  border-radius: 0 !important; 
  font-size: 0.85rem; 
  font-weight: 500; 
  color: var(--theme-blue); 
}
.section-header-row > .section-header-link:hover {
  text-decoration: underline; 
  background: none !important; 
  color: var(--theme-blue); 
}
.section-header-row > h2{
  margin: 0; 
}
@media (max-width: 420px){
  .section-header-row{ padding-right: 7.5rem; } 
}
.rank-badge {
  position: absolute; 
  top: 8px; 
  left: 8px; 
  width: 28px; 
  height: 28px; 
  border-radius: 50%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 0.8rem; 
  font-weight: bold; 
  color: #fff; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); 
  z-index: 10; 
}
.rank-badge.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFB700); 
}
.rank-badge.rank-2 {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0); 
}
.rank-badge.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #A0522D); 
}
.rank-badge.rank-4,
.rank-badge.rank-5 {
  background: #666; 
}
.section-header-row{
  display: flex; 
  align-items: flex-start; 
  gap: .5rem; 
  margin-bottom: .5rem; 
  padding-right: 0 !important; 
}
.section-header-row > h2{
  flex: 1 1 auto; 
  min-width: 0; 
  margin: 0; 
  font-size: 1.2rem; 
  line-height: 1.3; 
  max-width: none !important; 
  padding-right: 0 !important; 
  overflow-wrap: anywhere; 
}
.section-header-row > .section-header-link{
  flex: 0 0 auto; 
  margin-left: auto; 
  white-space: nowrap; 
}
#iphone-case > .section-header-link,
#iphone-film > .section-header-link,
#charger > .section-header-link,
#mobile-battery > .section-header-link,
#iphone-cable > .section-header-link,
#audio > .section-header-link{
  position: static !important; 
  top: auto !important; 
  right: auto !important; 
  z-index: auto !important; 
}
#iphone-case h2,
#iphone-film h2,
#charger h2,
#mobile-battery h2,
#iphone-cable h2,
#audio h2{
  padding-right: 0 !important; 
}
@media (max-width: 480px){
  .section-header-row{ gap: .25rem; } 
  .section-header-row > h2{ font-size: 1.05rem; } 
}
.section-header-row > .section-header-link{
  position: static !important; 
  top: auto !important; 
  right: auto !important; 
  z-index: auto !important; 
  display: inline-flex; 
  align-items: center; 
}
.section-header-link{
  border: none !important; 
  background: none !important; 
  padding: 0 !important; 
  border-radius: 0 !important; 
  box-shadow: none !important; 
}
.section-header-link:hover,
.section-header-link:focus{
  text-decoration: underline; 
  background: none !important; 
  box-shadow: none !important; 
}
.card-header-button{
  border: none !important; 
  background: none !important; 
  padding: 0 !important; 
  border-radius: 0 !important; 
  box-shadow: none !important; 
}
.card-header-button:hover,
.card-header-button:focus{
  text-decoration: underline; 
  background: none !important; 
  box-shadow: none !important; 
}
.card-header-button{
  color: var(--theme-blue) !important; 
  border: none !important; 
  background: none !important; 
  padding: 0 !important; 
  border-radius: 0 !important; 
  box-shadow: none !important; 
}
.card-header-button:hover,
.card-header-button:focus{
  text-decoration: underline; 
  background: none !important; 
  box-shadow: none !important; 
  color: var(--theme-blue) !important; 
}
.product-item img,
.grid-item img,
.shop-product-item img {
  border: 1px solid #d2d2d7 !important; 
  border-radius: 8px !important; 
  box-sizing: border-box !important; 
}
.product-item img,
.grid-item img,
.shop-product-item img {
  padding: 4px !important; 
  background-color: #fff !important; 
}
.product-item a,
.grid-item a,
.shop-product-item a {
  display: block; 
  border: 1px solid #d2d2d7 !important; 
  border-radius: 8px !important; 
  padding: 2px !important; 
  background-color: #fff !important; 
  box-sizing: border-box !important; 
}
.product-item a img,
.grid-item a img,
.shop-product-item a img {
  display: block; 
  width: 100%; 
  height: auto; 
  border: none !important; 
  border-radius: 4px !important; 
}
.product-item,
.grid-item,
.shop-product-item {
  margin: 2px !important; 
}
#time-sale .grid-item {
  margin: 1px !important; 
}
#popular-shops .shop-product-item {
  margin: 1px !important; 
}
#popular-shops .shop-product-item {
  margin-left: 1px !important; 
  margin-right: 1px !important; 
  margin-top: 4px !important; 
  margin-bottom: 4px !important; 
}
#popular-shops .shop-grid {
  gap: 2px !important; 
}
#time-sale .product-grid {
  gap: 2px !important; 
}
#apple-genuine .product-grid {
  gap: 2px !important; 
}
#popular-shops .shop-grid {
  gap: 2px !important; 
}
#popular-shops .shop-grid {
  justify-content: start !important; 
  margin-left: 0 !important; 
  margin-right: 0 !important; 
}
#popular-shops .shop-grid-container {
  padding-left: 0 !important; 
  padding-right: 0 !important; 
}
#popular-shops .shop-grid {
  justify-content: start !important; 
  margin-left: 0 !important; 
  margin-right: 0 !important; 
}
#popular-shops .shop-grid-container {
  padding-left: 0 !important; 
  padding-right: 0 !important; 
}

.product-item a,
.grid-item a,
.shop-product-item a {
  border: 1px solid #e0e0e0 !important; 
}
#apple-genuine .grid-item {
  margin: 0 !important; 
}
#apple-genuine .product-grid {
  gap: 2px !important; 
}
#apple-genuine .grid-item {
  margin: 1px !important; 
}
#apple-genuine .product-grid {
  gap: 2px !important; 
}
#apple-genuine .grid-item {
  margin: 2px !important; 
}
#apple-genuine .product-grid {
  gap: 4px !important; 
}
#softbank-selection .grid-item,
#outlet .grid-item,
#new-items .grid-item,
#popular-items .grid-item,
#ranking .grid-item {
  margin: 2px !important; 
}
#softbank-selection .product-grid,
#outlet .product-grid,
#new-items .product-grid,
#popular-items .product-grid,
#ranking .product-grid {
  gap: 4px !important; 
}
.product-item a,
.grid-item a,
.shop-product-item a {
  display: block; 
  border: 1px solid #d2d2d7 !important; 
  border-radius: 8px !important; 
  padding: 4px !important; 
  background-color: #fff !important; 
  box-sizing: border-box !important; 
}
.product-item a img,
.grid-item a img,
.shop-product-item a img {
  display: block; 
  width: 100%; 
  height: auto; 
  border: none !important; 
  padding: 0 !important; 
  border-radius: 4px !important; 
}
.product-item,
.grid-item,
.shop-product-item {
  margin: 2px !important; 
}
#time-sale .grid-item,
#apple-genuine .grid-item,
#popular-shops .shop-product-item {
  margin: 2px !important; 
}
#time-sale .product-grid,
#apple-genuine .product-grid,
#popular-shops .shop-grid {
  gap: 4px !important; 
}

.filter-btn {
  padding: 5px 8px !important; 
}
.product-item,
.grid-item,
.shop-product-item {
  margin: 4px !important; 
}
#iphone-case .product-item,
#time-sale .grid-item,
#popular-shops .shop-product-item,
#apple-genuine .grid-item {
  margin: 4px !important; 
}
#time-sale .product-grid,
#popular-shops .shop-grid,
#apple-genuine .product-grid {
  gap: 4px !important; 
}
#popular-shops .shop-product-item {
  margin: 2px !important; 
}
#popular-shops .shop-grid {
  gap: 2px !important; 
}
#popular-shops .shop-grid-container {
  padding-left: 8px !important; 
  padding-right: 8px !important; 
}
#popular-shops {
  margin-top: 1rem; 
  margin-bottom: 1rem; 
}
#popular-shops .shop-grid {
  gap: 8px 2px !important; 
}
#popular-shops .shop-grid {
  gap: 8px 8px !important; 
}
#iphone-case .product-list-gapless { gap: 0 !important; }
#iphone-case .product-list-container { padding-inline: 0 !important; }
.anchor-nav a:link,
.anchor-nav a:visited,
.anchor-nav a:hover,
.anchor-nav a:active,
.anchor-nav a:focus {
  color: #000; 
}
.back-to-top-btn {
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 1000; 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s; 
  transform: translateY(20px); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #0071e3 !important; 
  border: none !important; 
  color: #fff !important; 
}
.back-to-top-btn::before {
  content: ''; 
  border: solid #fff !important; 
  border-width: 0 2px 2px 0 !important; 
  display: inline-block; 
  padding: 4px; 
  transform: rotate(-135deg) translate(-1px, -1px); 
}
.back-to-top-btn.show {
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
}
.back-to-top-btn:hover {
  background-color: #005bb5; 
  transform: translateY(-2px); 
}
.sb-footer {
  background: #f5f5f7; 
  color: #333; 
  margin-top: 48px; 
  border-top: 1px solid #e6e6e6; 
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; 
}
.sb-footer-inner {
  max-width: 1120px; 
  margin: 0 auto; 
  padding: 32px 16px 40px; 
}
.sb-footer-social {
  display: grid; 
  gap: 16px; 
  align-items: center; 
  grid-template-columns: 1fr; 
}
.sb-social-list {
  display: flex; 
  gap: 16px; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  flex-wrap: wrap; 
}
.sb-social {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 44px; 
  height: 44px; 
  border-radius: 12px; 
  font-weight: 700; 
  text-decoration: none; 
  background: #fff; 
  border: 1px solid #e5e5e5; 
  box-shadow: 0 1px 0 rgba(0,0,0,.04); 
}
.sb-social span { font-size: 14px; line-height: 1; }
.sb-social:hover { transform: translateY(-1px); }
.sb-line { background: #06c755; color: #fff; border-color: transparent; }
.sb-x { background: #000; color: #fff; border-color: transparent; }
.sb-instagram { background: radial-gradient(120% 120% at 0% 100%, #feda75 0%, #d62976 40%, #962fbf 70%, #4f5bd5 100%); color: #fff; border-color: transparent; }
.sb-youtube { background: #fff; color: #e62117; border-color: #e62117; }
.sb-breadcrumb {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  flex-wrap: wrap; 
  font-size: 14px; 
}
.sb-breadcrumb-link {
  color: #555; 
  text-decoration: none; 
}
.sb-breadcrumb-link:hover { text-decoration: underline; }
.sb-breadcrumb-sep { color: #9aa0a6; }
.sb-divider {
  border: none; 
  border-top: 1px solid #e6e6e6; 
  margin: 24px 0; 
}
.sb-brand-row {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-bottom: 16px; 
}
.sb-logo {
  display: inline-flex; 
  align-items: center; 
  gap: 12px; 
  color: #2b2b2b; 
  font-size: 28px; 
  font-weight: 600; 
  letter-spacing: .5px; 
}
.sb-logo-bars {
  display: inline-flex; 
  gap: 6px; 
}
.sb-bar {
  display: inline-block; 
  width: 28px; 
  height: 12px; 
  background: #c7c7c7; 
  border-radius: 2px; 
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); 
}
.sb-footer-links {
  display: flex; 
  justify-content: center; 
  gap: 8px; 
  flex-wrap: wrap; 
  font-size: 14px; 
  margin: 0 0 8px; 
}
.sb-footer-links a {
  color: #333; 
  text-decoration: none; 
}
.sb-footer-links a:hover { text-decoration: underline; }
.sb-link-sep { color: #b7b7b7; }
.sb-license, .sb-copyright {
  text-align: center; 
  color: #6b7280; 
  font-size: 12px; 
  margin: 6px 0; 
}
@media (min-width: 720px) {
  .sb-footer-social {
  grid-template-columns: auto 1fr; 
  }
  .sb-breadcrumb { justify-content: flex-end; }
}
.sbcs-footer-logo img {
  display: block; 
  max-width: 180px; 
  height: auto; 
  margin: 0 auto 8px; 
}

.product-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;    
  object-fit: cover;
  background-color: #f5f5f7; 
}

#slider-banner .slider-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

a:focus-visible,
button:focus-visible,
.scroll-button:focus-visible,
.anchor-scroll-arrow:focus-visible {
  outline: 3px solid var(--theme-blue, #007aff);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.hidden { display: none !important; }

            
            #member-services .banner-grid {
                  display: grid;
                  grid-template-columns: repeat(2, 1fr);
                  gap: 12px;
            }

            #member-services .banner-link {
                  display: block;
                  border-radius: 12px;
                  overflow: hidden;
                  border: 1px solid rgba(0, 0, 0, 0.08);
                  background: #fff;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            }

            #member-services .banner-link img {
                  display: block;
                  width: 100%;
                  height: auto;
                  aspect-ratio: 1 / 1;
                  object-fit: cover;
            }

            @media (min-width: 768px) {
                  #member-services .banner-grid {
                        grid-template-columns: repeat(4, 1fr);
                        gap: 16px;
                  }
            }

            
            #recommendations .scroll-container-wrapper {
                  position: relative;
            }

            #recommendations .product-list-gapless {
                  display: grid;
                  grid-template-rows: repeat(2, auto);
                  grid-auto-flow: column;
                  grid-auto-columns: 150px;

            }

            #recommendations .product-item {
                  width: 150px;
            }

            @media (min-width: 768px) {
                  #recommendations .product-list-gapless {
                        grid-auto-columns: 180px;
                  }

                  #recommendations .product-item {
                        width: 180px;
                  }
            }

            @media (min-width: 768px) {}

            @media (min-width: 768px) {
                  #recommendations .product-list-gapless {}
            }

            
            #recommendations .product-item {
                  margin: 0 !important;
            }

            
            #recommendations .product-list-gapless {
                  gap: 8px 8px !important;
            }

            @media (min-width: 768px) {
                  #recommendations .product-list-gapless {
                        gap: 12px 12px !important;
                  }
            }

                  .product-section,
                  #services-section {
                        opacity: 1 !important;
                        transform: none !important
                  }

@media (min-width: 769px){
  .scroll-container-wrapper > .scroll-button { display: none !important; }
  .scroll-container-wrapper > .scroll-button:not(.hidden) { display: flex !important; }
  .scroll-arrow, .anchor-scroll-arrow { display: none !important; }
  .scroll-arrow:not(.hidden), .anchor-scroll-arrow:not(.hidden) { display: flex !important; }
}

.scroll-button.hidden, .scroll-arrow.hidden, .anchor-scroll-arrow.hidden { pointer-events: none !important; }

@media (min-width: 1024px){
  
  header, .anchor-nav, main, footer{
    max-width: 1320px;              
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  header, .anchor-nav, main{
    padding-left: 16px;              
    padding-right: 16px;
  }
}

@media (min-width: 1024px){
  header, footer{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

@media (min-width: 1024px){
  .anchor-nav{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

@media (min-width: 1024px){
  .anchor-nav{
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: auto !important;
    box-sizing: border-box;
  }
}

.anchor-nav a { color: var(--theme-blue) !important; }

@media (min-width: 1024px){
  .anchor-nav{
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;   
    padding-right: 0 !important;  
    width: auto !important;
    box-sizing: border-box;
  }
}

.anchor-nav ul {
  padding: 0; 
}

#services-section .banner-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#services-section .banner-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#services-section .banner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
  #services-section .banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .anchor-nav{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

@media (min-width: 1024px){
  .anchor-nav ul{
    max-width: 1320px !important;   
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 16px !important;   
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}

header {
  background-color: #F5F5F7 !important;
}

:root {
  --section-gap: 1rem; 
}

.product-section:first-of-type {
  margin-top: var(--section-gap) !important;
}

main {
  padding-top: 0 !important;
}

header > p {
  color: #6E6E73 !important;
}

.product-item {
  overflow: hidden;                 
  border-radius: 12px;
}

.product-item a {
  display: block;
  padding: 0 !important;
}

.product-item img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;             
  border-radius: 0 !important;      
  object-fit: cover !important;     
  aspect-ratio: 1 / 1;              
}

.product-list-gapless .product-item,
.product-list .product-item {
  padding: 0 !important;
}

.product-item img {
  padding: 0 !important;
  background: transparent !important;
}

.product-item a {
  border: 0 !important;
  background: transparent !important;
}

.product-item {
  border: 1px solid #d2d2d7 !important;   
  background: #fff;                        
  box-sizing: border-box;                  
  border-radius: 12px;                     
  overflow: hidden;                        
}

.product-item a {
  border: 0 !important;
  background: transparent !important;
}

#site-intro .site-intro-card{
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 20px;
  line-height: 1.9;
  color: #6E6E73;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
#site-intro h2{
  color: #1d1d1f;
  margin-bottom: 10px;
  text-align: left;
}
#site-intro .links{
  margin-top: 8px;
}
#site-intro .links a{
  text-decoration: none;
  color: #0b6cff;
  margin-right: 24px;
}
#site-intro .links a:hover{
  text-decoration: underline;
}
#site-intro .links .sep{
  color: #c7c7cc;
  margin: 0 8px;
}

@media (min-width:1024px){
  #site-intro{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

#site-intro.product-section{
  background-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

#site-intro .site-intro-card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

#site-intro h2{
  margin-bottom: 4px !important;
}
#site-intro .site-intro-card{
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}
#site-intro .site-intro-card > p:first-of-type{
  margin-top: 0 !important;
}

@media (max-width: 480px){
  #site-intro{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #site-intro h2{
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }
  #site-intro .site-intro-card{
    line-height: 1.8 !important;
    padding-top: 6px !important;
  }
  #site-intro .site-intro-card > p{
    color: #6E6E73 !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    margin-bottom: 10px !important;
    line-break: strict;
    text-justify: none;
  }
  #site-intro .site-intro-card > p.links{
    font-size: clamp(14px, 3.8vw, 15px) !important;
    line-height: 1.6 !important;
    margin-top: 6px !important;
  }
}

#site-intro .links a{
  margin-right: 10px !important; 
}
#site-intro .links .sep{
  margin: 0 6px 0 4px !important; 
}

@media (max-width: 480px){
  #site-intro .links a{
    margin-right: 6px !important;
  }
  #site-intro .links .sep{
    margin: 0 4px 0 2px !important;
  }
}

#site-intro .links a{
  margin-right: 0 !important; 
}
#site-intro .links .sep{
  margin: 0 6px !important;   
}

@media (max-width: 480px){
  #site-intro .links .sep{
    margin: 0 4px !important;
  }
}

#services-section .banner-grid{
  gap: 0.75rem !important; 
}
@media (max-width: 768px){
  #services-section .banner-grid{
    gap: 0.5rem !important;
  }
}

@media (min-width: 769px){
  .scroll-container-wrapper > .scroll-button { display: none !important; }
  .scroll-container-wrapper > .scroll-button:not(.hidden) { display: flex !important; }
  .scroll-arrow, .anchor-scroll-arrow { display: none !important; }
  .scroll-arrow:not(.hidden), .anchor-scroll-arrow:not(.hidden) { display: flex !important; }
}
.scroll-button.hidden, .scroll-arrow.hidden, .anchor-scroll-arrow.hidden { pointer-events: none !important; }

.product-item a { padding: 0 !important; }
.product-item img {
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1;
}

main { padding-top: 0 !important; }

#slider-banner[data-static="true"] .static-banner { position: relative; }
#slider-banner[data-static="true"] .slider-slide { display:block; }
#slider-banner[data-static="true"] .slide-image { width:100%; aspect-ratio:16/9; object-fit:cover; }

.anchor-nav ul { gap: 8px !important; }        
.anchor-nav a  { padding: 6px 2px !important; }

@media (max-width: 480px){
  .anchor-nav ul { gap: 6px !important; }      
  .anchor-nav a  { padding: 6px 2px !important; }
}

#slider-banner .slide-image { aspect-ratio: 3 / 2 !important; }
#slider-banner[data-static="true"] .slide-image { aspect-ratio: 3 / 2 !important; }

#slider-banner .slide-image { aspect-ratio: 4 / 3 !important; }
#slider-banner[data-static="true"] .slide-image { aspect-ratio: 4 / 3 !important; }

:root { --slider-banner-height: clamp(44px, 4.5vw, 64px); } 

.slider-banner .slider-slide {
  min-height: var(--slider-banner-height) !important;
  line-height: 1.4 !important;            
  padding-block: 6px !important;          
}
@media (max-width: 480px){
  :root { --slider-banner-height: 48px; } 
}

:root { --slider-banner-height: clamp(32px, 3vw, 44px); }

.slider-banner .slider-slide {
  min-height: var(--slider-banner-height) !important;
  line-height: 1.2 !important;      
  padding-block: 4px !important;     
}

@media (max-width: 480px){
  :root { --slider-banner-height: 40px; }      
}

:root { --slider-banner-height: clamp(28px, 2.6vw, 40px); }

.slider-banner .slider-slide {
  min-height: var(--slider-banner-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  padding-block: 2px !important;
}

.slider-banner .slider-slide > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 480px){
  :root { --slider-banner-height: 36px; } 
}

.section-header-link::after {
  content: "" !important;
  width: 1.5em !important;
  height: 1.5em !important;
  flex: 0 0 auto !important;
  
  background-color: currentColor !important;
  
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>") center/ contain no-repeat !important;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>") center/ contain no-repeat !important;
  
  transform: translateY(1px);
}

.section-header-link:hover::after,
.section-header-link:focus-visible::after {
  transform: translate(1px, 1px);
}

.product-item { border: none; background: transparent; box-shadow: none; }
.product-item a { display: block; text-decoration: none; color: inherit; }
.product-item .thumb-frame { display: block; border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; }
.product-item .thumb-frame img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.product-item .product-name { display: block; margin-top: 8px; text-align: center; }

.product-item,
.product-list-gapless .product-item,
.product-list .product-item {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.product-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-item .thumb-frame {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.product-item .thumb-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-item .product-name {
  display: block;
  margin-top: 8px;
  text-align: left;          
  padding-left: 2px;         
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.product-item a { padding: 0; }

.product-item .product-name {
  font-size: 0.9rem;   
  line-height: 1.2;
}

.series-section .section-header-row h2 {
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.series-list { display: flex; gap: 16px; padding: 4px 0 8px; }
.series-card {
  position: relative; display: block; text-decoration: none;
  color: #111;
  background: #fff;
  border: none; border-radius: 24px;
  overflow: hidden;
  width: min(400px, 86vw); min-width: min(400px, 86vw);
  aspect-ratio: 4 / 5; padding: 20px;
  box-shadow: none;
}
.series-card__text { position: relative; z-index: 2; max-width: 75%; }
.series-card .eyebrow { font-size: .85rem; opacity: .6; margin: 0 0 6px; color:#111; }
.series-card .title { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.2; margin: 0 0 6px; font-weight: 800; color:#111; }
.series-card .desc { font-size: .95rem; opacity: .9; color:#111; }
.series-card__img { position: absolute; right: 8px; bottom: 0; height: 78%; width: auto; object-fit: contain; pointer-events: none; }
@media (min-width: 1024px) { .series-card { width: 380px; min-width: 380px; } }

#latest-series.product-section { background: transparent; box-shadow: none; border:0; border-radius:0; padding:0; }
#latest-series .scroll-container-wrapper, #latest-series .card-list-container, #latest-series .card-list { background: var(--theme-light-gray, #F5F5F7); }

.series-card__text span{
  font-size: 1.125rem;   
  line-height: 1.35;
}
@media (min-width: 768px){
  .series-card__text span{ font-size: 1.25rem; } 
}
@media (min-width: 1024px){
  .series-card__text span{ font-size: 1.375rem; } 
}

.series-card__text span{ font-weight: 700; }

.product-section{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.product-section > .section-body{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1rem;
}

.product-section > .section-header-row{
  margin: 0 0 .75rem;
  padding: 0 .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.product-section > .section-header-row > h2{
  margin: 0;
}
.product-section > .section-header-row > .section-header-link{
  position: static !important;
  margin-left: auto;
  white-space: nowrap;
}

#latest-series.product-section{ padding: 0 !important; background: transparent !important; box-shadow:none !important; }

:root{
  --lp-title-size: clamp(24px, 2.2vw, 22px);
  --lp-title-weight: 700;
}

.product-section > .section-header-row > h2,
.series-card__text span{
  font-size: var(--lp-title-size);
  font-weight: var(--lp-title-weight);
  line-height: 1.2;
}

#latest-series .series-card__text { max-width: 90%; }        
#latest-series .series-card__img  { right: -16px; height: 88%; } 

@media (min-width:1024px){
  
  #latest-series .series-card__text { max-width: 94%; }
  #latest-series .series-card__img  { right: -24px; height: 90%; }
}

.series-card{
  aspect-ratio: auto;             
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.series-card__text{
  position: static;               
  z-index: auto;
  max-width: 100%;
  margin: 0;                      
}

.series-card__text span{
  display: block;
}

.series-card__img{
  position: static !important;    
  inset: auto !important;         
  transform: none !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 auto;
  pointer-events: none;           
}

#latest-series .series-card__img{
  width: 100% !important;
  height: auto !important;
}


/* === PC 4-cols for latest series === */
/* Hotfix: PC(>=1024px)で #latest-series のカードを4枚/画面に */
@media (min-width: 1024px){
  /* gapを変数化して計算に使う（既定は16px） */
  #latest-series .series-list{ --gap: 16px; gap: var(--gap); }

  /* 4枚= (100% - 3*gap) / 4。横スクロールUIの子要素幅をこれに固定 */
  #latest-series .series-card{
    width: auto;
    min-width: unset;
    flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
  }
}