/* ===== 全局触控优化 ===== /
* { -webkit-tap-highlight-color: transparent; }

/* ========== Fonts ========== */
@font-face {
  font-family: LINESeedJPStd;
  font-style: normal;
  font-weight: 300;
  src: url("../font/LINESeedJP_Rg.woff2") format("woff2");
}
@font-face {
  font-family: LINESeedJPStd;
  font-style: normal;
  font-weight: 600;
  src: url("../font/LINESeedJP_Bd.woff2") format("woff2");
}
@font-face {
  font-family: iconfont;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../font/iconfont.woff2") format("woff2");
}

/* iconfont base class */
[data-js="home-slider"] .splide__arrow i,
[data-js="home-gr-os-slider"] .splide__arrow i,
.homeServiceCard i:after,
[data-js="home-service-slider"] .splide__arrow i,
[data-icon-after] a i:after,
[data-icon-before] a:before,
.buttonIconAfter a i:after,
.buttonIconBefore a:before {
  font-family: iconfont !important;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon definitions */
[data-icon-after="blank"] a i:after,
.buttonIconAfter[data-icon-after="blank"] a i:after { content: "\f12b"; }
.buttonIconAfter[data-icon-after="blank"] a i::after { font-size: 11px; }
[data-icon-after="arrowRight"] a i:after { content: "\f130"; }
[data-icon-before="area"] a:before { content: "\f10e"; }
[data-icon-before="gps"] a:before { content: "\f10d"; }
[data-icon-after="arrowDirectionRight"] a:after { content: "\f134"; }

/* Button base */
.buttonIconAfter a,
.buttonIconAfter button {
  font-size: 15px;
  font-weight: bold;
  border-radius: 60px;
}
.buttonIconAfter[data-icon-after="blank"] a {
  padding: 11px 19px;
}

/* Icon circle */
.buttonIconAfter a i,
.buttonIconAfter button i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border-radius: 60px;
}

/* reverse-after-icon: gradient button with white icon circle */
[data-hover=reverse-after-icon] {
  position: relative;
  width: fit-content;
}
[data-hover=reverse-after-icon] a i,
[data-hover=reverse-after-icon] button i {
  background: #fff;
}
[data-hover=reverse-after-icon] a i::after,
[data-hover=reverse-after-icon] button i::after {
  color: #46c3e7;
}
[data-hover=reverse-after-icon] a:hover i,
[data-hover=reverse-after-icon] button:hover i {
  color: #46c3e7;
  background: #46c3e7;
}
[data-hover=reverse-after-icon] a:hover i::after,
[data-hover=reverse-after-icon] button:hover i::after {
  color: #fff;
}

/* ========== CSS Variables ========== */
:root {
  --blue: #385eab;
  --lightBlue: #eaeef7;
  --paleBlue: #f5f7fb;
  --yellow: #f9be00;
  --lightGray: #e5e5e5;
  --black: #333;
  --white: #fff;
  --bg: #eff2f5;
  --font-main: 'LINESeedJPStd', 'Hiragino Sans', 'Noto Sans SC', sans-serif;
  --inner-width: 1280px;
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 768px) {
  html { font-size: clamp(12.0117302053px, 1.5640273705vw, 16px); }
}
@media only screen and (min-width: 1024px) {
  html { font-size: clamp(16px, 1vw, 16px); }
}
body {
  font-family: var(--font-main);
  color: #232729;
  line-height: 1.6;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
a { color: #232729; text-decoration: none; word-break: break-word; overflow-wrap: break-word; outline: none; }
img, picture { display: block; width: 100%; height: auto; vertical-align: bottom; object-fit: cover; }
ul, ol { list-style: none; }
button { padding: 0; appearance: none; cursor: pointer; background: transparent; border: none; outline: none; font: inherit; color: inherit; }
input, select, textarea { padding: 0; margin: 0; font-family: inherit; font-size: inherit; color: inherit; appearance: none; background: #fff; border: none; outline: none; }

/* ========== Container ========== */
.container { overflow-x: hidden; outline: none; }
@media only screen and (min-width: 1024px) {
  .container { padding-top: clamp(100px, 7.5vw, 120px); }
  [data-page=index] .container { padding-top: clamp(95px, 7.1875vw, 115px); }
  [data-page=gratte-detail] .container,[data-page=onlyshop-detail] .container { padding-top: min(160px, 8.125vw); }
}

/* ========== Content Width ========== */
.contentInner {
  width: min(calc(100% - 34px), 1280px);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(17px, 17px + (100vw - 320px) * 23 / 448, 40px);
}
@media only screen and (min-width: 1024px) {
  .contentInner { padding-inline: 0; width: min(calc(100% - 80px), 1280px); }
}

/* ========== Section spacing ========== */
.homeFair,
.homeNews,
.homeBanner { margin-top: clamp(51.2px, 16vw, 122.88px); }

/* ========== Header ========== */
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: clamp(90px, 6.875vw, 110px);
  padding-inline: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  transition: transform .3s ease;
  transform: translateY(0);
  background: var(--white);
}
@media (min-width: 1024px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}
@media only screen and (min-width: 1024px) {
  .header { transition: transform .3s, opacity .3s; }
.header.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}
.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.headerLogo {
  width: 100%;
  max-width: clamp(173px, 15vw, 240px);
  margin-left: 50px;
}
.headerLogo a { display: block; }
.headerLogo img { width: 100%; }
.headerContent {
  display: none;
}
@media (min-width: 1024px) {
  .headerContent {
    display: flex;
    align-items: center;
  }
}

/* Header Nav */
.headerMenu ul { display: flex; align-items: center; }
.headerMenu ul li { font-size: clamp(12.8px, 4vw, 30.72px); font-weight: bold; }
.headerMenu ul li a { display: block; }
.headerMenu a:hover { color: var(--blue); }
@media only screen and (min-width: 1024px) {
  .headerMenu ul li { font-size: clamp(12px, .9375vw, 15px); }
  .headerMenu ul li a { padding-block: 10px; padding-inline: clamp(10px, .9765625vw, 15px); }
  .headerLanguageButton:hover { background: #eff2f5; transition: all .4s; }
}

/* Language */
.headerLanguage { position: relative; margin-inline: min(10px, .625vw); }
.headerLanguageButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 60px;
  transition: all .3s;
  cursor: pointer;
}
.headerLanguageButton::before {
  display: inline-block;
  line-height: 1;
  content: "\1F310";
  font-size: 22px;
  filter: grayscale(1);
}
.headerLanguageButton:hover { background-color: #eff2f5; }
.headerLanguageMenu {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 140px;
  padding: 13px;
  pointer-events: none;
  visibility: hidden;
  background: var(--white);
  border: 1px solid #e4e8eb;
  border-radius: 20px;
  opacity: 0;
  transition: all .3s;
  transform: translate(-50%, -10px);
}
.headerLanguageMenu.is-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
.headerLanguageMenu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 7px;
  font-size: 14px;
  font-weight: bold;
}
.headerLanguageMenu a:hover { color: var(--blue); }

/* Online Shop Button */
.headerOnline .buttonIconAfter a,
.menu__menuButton .buttonIconAfter a {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to right, #149bde, #4ec9e7);
  color: var(--white);
  padding: 11px 19px;
  border-radius: 60px;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  transition: opacity .3s;
}
.headerOnline .buttonIconAfter a:hover,
.menu__menuButton .buttonIconAfter a:hover { opacity: 0.85; }

/* ========== Hamburger Trigger ========== */
.trigger { display: none; }
@media only screen and (max-width: 1023px) {
  .trigger {
    display: block;
    position: fixed;
    top: clamp(14px, 1.875vw, 30px);
    right: clamp(8px, 2.13vw, 20px);
    z-index: 1100;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
}
.triggerInner { position: relative; width: 24px; height: 18px; margin: 13px 10px; }
.triggerInner span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--black);
  transition: .3s;
}
.triggerInner span:nth-child(1) { top: 0; }
.triggerInner span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.triggerInner span:nth-child(3) { bottom: 0; }

/* ========== Menu Modal ========== */
.menu { position: relative; display: none; }
@media only screen and (max-width: 1023px) {
  .menu { display: block; }
}
.menu__button { display: none; }
.menu__background {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.menu--active .menu__background {
  pointer-events: auto;
  opacity: .8;
  transition-delay: 0s;
}
.menu__modal {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1060;
  width: min(420px, 85vw);
  height: 100%;
  background: var(--white);
  pointer-events: none;
  touch-action: none;
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(0.9, 1) translate3d(10%, 0, 0);
  transform-origin: right center;
}
.menu--active .menu__modal {
  pointer-events: auto;
  touch-action: auto;
  opacity: 1;
  transition-delay: .1s;
  transform: scale(1, 1) translate3d(0, 0, 0);
}
.menu__scrollBox {
  padding: 100px 32px 40px;
  overflow-y: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  opacity: 1;
}
.menu__menuLists { margin-bottom: 24px; }
.menu__menuItem { border-bottom: 1px solid #e4e8eb; }
.menu__menuItemLink {
  display: inline-block;
  width: 100%;
  min-width: 165px;
  font-size: clamp(17.0666666667px, 5.3333333333vw, 22.9333333333px);
  font-weight: bold;
  padding: 16px 0;
}
.menu__menuButton { margin-bottom: 24px; }
.menu__subMenuList { margin-bottom: 24px; }
.menu__subMenuItem { border-bottom: 1px solid #e4e8eb; }
.menu__subMenuItemLink {
  display: block;
  width: 100%;
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  padding: 12px 0;
  color: #666;
}
.menu__subMenuItemLink:hover { color: var(--blue); }
.menuLanguage { padding-top: 16px; }
.menuLanguageButton {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.menuLanguageMenu { margin-top: 12px; }
.menuLanguageMenu a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #666;
}
.menuLanguageMenu a:hover { color: var(--blue); }

/* ========== Button Top ========== */
.buttonTop {
  position: fixed;
  right: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  bottom: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
  border-radius: 60px;
  opacity: 0;
  transition: opacity .3s, transform .2s;
  transform: translateY(20px);
}
.buttonTop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.buttonTop a {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 60px;
  cursor: pointer;
  font-size: 12px;
  color: var(--blue);
  font-weight: bold;
}

/* ========== Block visibility ========== */
.block_pc { display: none !important; }
.block_sp { display: block !important; }
.inline_sp { display: inline !important; }
@media only screen and (min-width: 768px) {
  .block_pc { display: block !important; }
  .block_sp { display: none !important; }
  .inline_sp { display: none !important; }
}

/* ========== Headline ========== */
.headline { display: flex; flex-flow: column wrap; overflow: hidden; }
.headlineLv1 { display: block; }
[data-headline=home] .headlineLv1 .is-en {
  display: block;
  font-size: clamp(27.3066666667px, 8.5333333333vw, 36.6933333333px);
  font-weight: bold;
  line-height: 2;
  color: var(--blue);
}
@media only screen and (min-width: 768px) {
  [data-headline=home] .headlineLv1 .is-en {
    font-size: clamp(45.0439882698px, 5.8651026393vw, 60px);
    line-height: 1.5;
  }
}
@media only screen and (min-width: 1024px) {
  [data-headline=home] .headlineLv1 .is-en {
    font-size: clamp(64px, 5vw, 80px);
  }
}
[data-headline=home] .headlineLv1 .is-ja {
  display: block;
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  margin-top: 4px;
  color: #666;
}
@media only screen and (min-width: 768px) {
  [data-headline=home] .headlineLv1 .is-ja {
    font-size: clamp(12.0117302053px, 1.5640273705vw, 16px);
  }
}
@media only screen and (min-width: 1024px) {
  [data-headline=home] .headlineLv1 .is-ja {
    font-size: clamp(12.8px, 1vw, 16px);
  }
}
.headlineLv1.inview {
  opacity: 1;
  transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity .3s cubic-bezier(0, 0, 0.58, 1);
  transform: translateY(0);
}
[data-headline=gr-os] .headlineLv1 {
  line-height: 1.6;
  margin-top: clamp(8.533px, 2.667vw, 20.48px);
}
@media (min-width: 768px) {
  [data-headline=gr-os] .headlineLv1 {
    margin-top: clamp(18.768px, 2.444vw, 25px);
  }
}

/* ========== Button Arrow ========== */
.buttonArrow { width: fit-content; }
.buttonArrow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
  transition: color .3s;
  position: relative;
}
.buttonArrow a span {
  position: relative;
  pointer-events: none;
}
.buttonArrow a span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  transition: transform .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.buttonArrow a:hover span::after {
  transform: scale(1, 1);
}
.buttonArrow[data-text-color=white] a { color: var(--white); }
.buttonArrow[data-text-color=black] a { color: var(--black); }
.buttonArrow[data-border-color=black] a span::after { background: var(--black); }
.buttonArrow[data-border-color=white] a span::after { background: var(--white); }
.buttonArrow a i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;
}
.buttonArrow a i::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  content: "";
  background: #46c3e7;
  border-radius: 50%;
  transition: transform .3s;
}
.buttonArrow a i::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: -2px;
  position: relative;
  z-index: 1;
}
.buttonArrow a:hover i::before {
  transition: transform .3s;
  transform: scale(1.2);
}
@media (min-width: 768px) {
  .buttonArrow a i,
  .buttonArrow a i::before { width: 40px; height: 40px; }
}

/* ========== Hero Slider ========== */
.homeHero { position: relative; }
.homeHeroSlider { position: relative; opacity: 0; }
.homeHeroSlider.inview { opacity: 1; transition: opacity .3s; }

/* Slide sizing - matches original responsive breakpoints */
[data-js="home-slider"] .splide__slide { width: clamp(280px, 89.3333vw, 560px); }
@media only screen and (min-width: 768px) {
  [data-js="home-slider"] .splide__slide { width: min(700px, 68.359375vw); }
}
@media only screen and (min-width: 1024px) {
  [data-js="home-slider"] .splide__slide { width: min(880px, 55vw); border-radius: 30px; }
}

/* Picture container with blur background */
[data-js="home-slider"] .splide__slide picture {
  aspect-ratio: 1.416/1;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  [data-js="home-slider"] .splide__slide picture { border-radius: 30px; }
}
[data-js="home-slider"] .splide__slide picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-js="home-slider"] .splide__slide picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img, none);
  background-position: center;
  background-size: cover;
  filter: blur(12px);
  opacity: .1;
  transform: scale(1.15);

}


/* Hover zoom */
.homeHeroSliderLink img { transition: transform .3s; }
@media only screen and (min-width: 1024px) {
  .homeHeroSliderLink:hover img { transform: scale(1.1); }
}

/* Arrows - yellow rounded style */
[data-js="home-slider"] .splide__arrow {
  position: absolute;
  top: 50%;
  display: none;
  width: clamp(50px, 5vw, 80px);
  height: clamp(50px, 5vw, 80px);
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  [data-js="home-slider"] .splide__arrow { display: block; }
}
[data-js="home-slider"] .splide__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #fabf03;
  transition: transform .3s;
}
[data-js="home-slider"] .splide__arrow:hover::after { transform: scale(1.3); }
[data-js="home-slider"] .splide__arrow--prev {
  left: 0;
  border-radius: 0 60px 60px 0;
}
[data-js="home-slider"] .splide__arrow--prev::after { border-radius: 0 60px 60px 0; }
[data-js="home-slider"] .splide__arrow--prev i { font-size: 20px; color: #fff; }
[data-js="home-slider"] .splide__arrow--prev i::before {
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f131";
}
[data-js="home-slider"] .splide__arrow--next {
  right: 0;
  border-radius: 60px 0 0 60px;
}
[data-js="home-slider"] .splide__arrow--next::after { border-radius: 60px 0 0 60px; }
[data-js="home-slider"] .splide__arrow--next i { font-size: 20px; color: #fff; }
[data-js="home-slider"] .splide__arrow--next i::before {
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f130";
}

/* Pagination - below slider as separate row */
[data-js="home-slider"] .splide__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 2;
  margin-top: clamp(20px, 3vw, 40px);
  gap: 0;
}
[data-js="home-slider"] .splide__pagination__page {
  width: 12px;
  height: 12px;
  margin-inline: 10px;
  margin-top: min(30px, 1.875vw);
  background: #eff2f5;
  border-radius: 100%;
  transition: .3s;
  border: none;
  cursor: pointer;
}
[data-js="home-slider"] .splide__pagination__page.is-active { background: var(--blue); }


/* ========== Shop Search ========== */
.homeSearch { margin-top: clamp(5px, 2vw, 21px); }
@media only screen and (min-width: 768px) {
  .homeSearch { margin-top: clamp(45.0439882698px, 5.8651026393vw, 60px); }
}
.homeSearchContent {
  padding: 20px 20px 30px;
  background: var(--blue);
  border-radius: 20px;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .homeSearchContent { padding: 30px 40px 40px; border-radius: 30px; }
}
.homeSearchUpper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.homeSearchTitle {
  font-size: clamp(17.0666666667px, 5.3333333333vw, 22.9333333333px);
  font-weight: bold;
  color: var(--white);
}
@media only screen and (min-width: 768px) {
  .homeSearchTitle { font-size: clamp(24.0234604106px, 3.128054741vw, 32px); }
}
@media only screen and (min-width: 1024px) {
  .homeSearchTitle { font-size: clamp(25.6px, 2vw, 32px); }
}

.homeSearchLower { margin-top: 20px; }
@media only screen and (min-width: 768px) {
  .homeSearchLower { display: flex; align-items: center; justify-content: space-between; }
}
.homeSearchFree {
  position: relative;
  width: 100%;
  height: 50px;
}
@media only screen and (min-width: 768px) {
  .homeSearchFree { height: 60px; }
}
@media only screen and (min-width: 1024px) {
  .homeSearchFree { width: clamp(249.35625px, 24.375vw, 390px); margin-right: clamp(9.590625px, .9375vw, 15px); }
}
.homeSearchInput {
  width: 100%;
  height: 50px;
  padding-right: 60px;
  padding-left: 30px;
  font-size: 14px;
  border: none;
  border-radius: 60px;
  outline: none;
  background: var(--white);
}
@media only screen and (min-width: 768px) {
  .homeSearchInput { height: 60px; font-size: clamp(13.5131964809px, 1.7595307918vw, 18px); }
}
@media only screen and (min-width: 1024px) {
  .homeSearchInput { max-width: 390px; font-size: clamp(12.8px, 1vw, 16px); }
}
.homeSearchSubmit {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border: none;
  border-radius: 60px;
  transform: translateY(-50%);
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .homeSearchSubmit { width: 50px; height: 50px; }
}
.homeSearchSubmit i {
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .homeSearchSubmit i { width: 20px; height: 20px; }
}
.homeSearchSubmit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  content: "";
  background: #fff;
  border-radius: 60px;
  transition: transform .15s;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center left;
}
.homeSearchSubmit:hover::after {
  transition: transform .15s;
  transform: translate(-50%, -50%) scaleX(1);
  transform-origin: center left;
}
.homeSearchSubmit:hover i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' fill='%2346c3e7'/%3E%3C/svg%3E");
}
.homeSearchLowerInner { margin-top: 20px; display: flex; align-items: center; gap: 10px; }
@media only screen and (min-width: 768px) {
  .homeSearchLowerInner { margin-top: 0; gap: 10px; }
}
.homeSearchLowerInner .buttonIconBefore {
  width: 100%;
  height: 50px;
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .homeSearchLowerInner .buttonIconBefore { height: 60px; }
}
@media only screen and (min-width: 1024px) {
  .homeSearchLowerInner .buttonIconBefore {
    width: clamp(246.79875px, 24.125vw, 386px);
    height: 56px;
  }
}
.homeSearchLowerInner .buttonIconBefore a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.homeSearchLowerInner .buttonIconBefore a::before {
  flex-shrink: 0;
}
.homeSearchLowerInner .buttonIconBefore[data-icon-before="gps"] a i {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.homeSearchLowerInner .buttonIconBefore[data-icon-before="gps"] a i svg {
  width: 18px;
  height: 18px;
  fill: var(--white);
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
}
.homeSearchLowerInner .buttonIconBefore[data-icon-before="gps"] a i svg.circle { opacity: 1; }
.homeSearchLowerInner .buttonIconBefore[data-icon-before="gps"] a i svg.pin { opacity: 0; }
.homeSearchLowerInner .buttonIconBefore[data-icon-before="gps"] a:hover i svg { fill: #46c3e7; }
.homeSearchLowerInner .buttonIconBefore[data-icon-before="area"] a::before {
  font-size: 18px;
}
/* Reverse hover buttons — blue gradient default, white slide-in on hover */
[data-hover="reverse"] { position: relative; }
[data-hover="reverse"]::before {
  position: absolute;
  inset: -2px;
  z-index: 0;
  display: block;
  pointer-events: none;
  content: "";
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border-radius: 60px;
}
[data-hover="reverse"] a,
[data-hover="reverse"] button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: clamp(13.6533333333px, 4.2666666667vw, 18.3466666667px);
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border-radius: 60px;
  transition: color .1s;
}
[data-hover="reverse"] a::after,
[data-hover="reverse"] button::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background: #fff;
  border-radius: 60px;
  transition: transform .3s;
  transform: scaleX(0);
  transform-origin: center left;
}
[data-hover="reverse"] a::before,
[data-hover="reverse"] button::before {
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
  transition: color .1s;
}
[data-hover="reverse"] a:hover,
[data-hover="reverse"] button:hover {
  color: #46c3e7;
  transition: color .1s;
}
[data-hover="reverse"] a:hover::before,
[data-hover="reverse"] button:hover::before {
  color: #46c3e7;
  transition: color .1s;
}
[data-hover="reverse"] a:hover::after,
[data-hover="reverse"] button:hover::after {
  transform: scaleX(1);
  transform-origin: center left;
}
@media (min-width: 768px) {
  [data-hover="reverse"] a,
  [data-hover="reverse"] button {
    font-size: clamp(13.5131964809px, 1.7595307918vw, 18px);
  }
  [data-hover="reverse"] a::before,
  [data-hover="reverse"] button::before {
    font-size: 24px;
  }
}
@media (min-width: 1024px) {
  [data-hover="reverse"] a,
  [data-hover="reverse"] button {
    font-size: clamp(12.8px, 1vw, 16px);
  }
}

/* ========== Only Shop & Gratte ========== */
.homeOnlyshop, .homeGratte { position: relative; }
.homeOnlyshop { margin-top: clamp(51.2px, 16vw, 122.88px); }
.homeGratte { margin-top: clamp(51.2px, 16vw, 122.88px); }
@media only screen and (min-width: 768px) {
  .homeOnlyshop { margin-top: clamp(75.073313783px, 9.7751710655vw, 100px); }
  .homeGratte { margin-top: clamp(75.073313783px, 9.7751710655vw, 100px); }
}
.homeOnlyshopBackground {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #eff2f5;
  opacity: 0;
  transform: translate(20%, 120px);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 200px 0 0 200px;
}

@media only screen and (min-width: 768px) {
  .homeOnlyshopBackground {
    left: 60px;
  }
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopBackground {
    left: 60px;
    border-radius: 500px 0 0 500px;
  }
}
.homeOnlyshopBackground.inview {
  opacity: 1;
  transform: translateX(0);
}

.homeGratteBackground {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #eff2f5;
  opacity: 0;
  transform: translate(-20%, 120px);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 0 200px 200px 0;
}
@media only screen and (min-width: 768px) {
  .homeGratteBackground {
    right: 60px;
    left: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .homeGratteBackground {
    right: 60px;
    left: 0;
    border-radius: 0 500px 500px 0;
  }
}
.homeGratteBackground.inview {
  opacity: 1;
  transform: translateX(0);
}
.homeOnlyshopInner, .homeGratteInner {
  padding-top: clamp(42.6666666667px, 13.3333333333vw, 102.4px);
  padding-bottom: clamp(51.2px, 16vw, 122.88px);
}
@media only screen and (min-width: 768px) {
  .homeOnlyshopInner, .homeGratteInner {
    padding-top: clamp(48.0469208211px, 6.2561094819vw, 64px);
    padding-bottom: clamp(48.0469208211px, 6.2561094819vw, 64px);
  }
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopInner, .homeGratteInner {
    padding-top: clamp(63.9375px, 6.25vw, 100px);
    padding-bottom: clamp(63.9375px, 6.25vw, 100px);
  }
}
.homeOnlyshopInner .slider, .homeGratteInner .slider {
  opacity: 0;
  transform: translateY(40px);
  transition: transform .8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s;
}
.homeOnlyshopInner .slider.inview, .homeGratteInner .slider.inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.homeOnlyshopUpper, .homeGratteUpper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(25.6px, 8vw, 61.44px);
}
@media only screen and (min-width: 768px) {
  .homeOnlyshopUpper, .homeGratteUpper {
    margin-bottom: clamp(28.5278592375px, 3.7145650049vw, 38px);
  }
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopUpper, .homeGratteUpper {
    margin-bottom: clamp(38.3625px, 3.75vw, 60px);
  }
}
.homeOnlyshopUpper .headline, .homeGratteUpper .headline { text-align: left; padding-left: clamp(30px, 6.25vw, 100px); }
.homeGratteUpper .buttonArrow { margin-right: clamp(10px, 3vw, 50px); }
.homeOnlyshopUpper .headlineLv1 .is-ja::before,
.homeGratteUpper .headlineLv1 .is-ja::before,
.homeNewsUpper .headlineLv1 .is-ja::before,
.homeService .headlineLv1 .is-ja::before,
.specialArchiveHero .headlineLv1 .is-ja::before,
.companyArchiveHero .headlineLv1 .is-ja::before,
.recruitHero .headlineLv1 .is-ja::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  content: "";
  background: #fabf03;
}
@media only screen and (min-width: 768px) {
  .homeOnlyshopUpper .headlineLv1 .is-ja::before,
  .homeGratteUpper .headlineLv1 .is-ja::before,
  .homeNewsUpper .headlineLv1 .is-ja::before,
  .homeService .headlineLv1 .is-ja::before,
  .specialArchiveHero .headlineLv1 .is-ja::before,
  .companyArchiveHero .headlineLv1 .is-ja::before,
  .recruitHero .headlineLv1 .is-ja::before {
    width: 15px;
    height: 14px;
    margin-right: 10px;
  }
}

.homeOnlyshopCard, .homeGratteCard {
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .3s;
}
.homeOnlyshopLink:hover .homeOnlyshopCard,
.homeGratteLink:hover .homeGratteCard {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.homeOnlyshopImage, .homeGratteImage {
  overflow: hidden;
  position: relative;
  background: var(--white);
}
.homeOnlyshopImage picture, .homeGratteImage picture {
  aspect-ratio: 1.416/1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.homeOnlyshopImage picture::before, .homeGratteImage picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  background-position: center;
  background-size: cover;
  filter: blur(12px);
  opacity: .1;
  transform: scale(1.15);

}
.homeOnlyshopImage picture::after, .homeGratteImage picture::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.3) 60%, transparent 100%);
  animation: shimmer 2s infinite;
  z-index: 0;
}

.homeOnlyshopImage img, .homeGratteImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .4s ease, transform .3s;
}
.homeOnlyshopImage img.loaded, .homeGratteImage img.loaded {
  opacity: 1;
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopLink:hover .homeOnlyshopImage img,
  .homeGratteLink:hover .homeGratteImage img { transform: scale(1.1); }
  .homeOnlyshopLink:hover .homeOnlyshopTitle span,
  .homeGratteLink:hover .homeGratteTitle span {
    background-size: 100% 1px;
  }
}
.homeOnlyshopInfo, .homeGratteInfo { background: transparent; }
.homeOnlyshopTitle, .homeGratteTitle {
  margin-top: clamp(8.5333333333px, 2.6666666667vw, 20.48px);
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .homeOnlyshopTitle, .homeGratteTitle {
    margin-top: clamp(15.0146627566px, 1.9550342131vw, 20px);
    font-size: clamp(15.0146627566px, 1.9550342131vw, 20px);
  }
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopTitle, .homeGratteTitle { font-size: clamp(16px, 1.25vw, 20px); }
}
.homeOnlyshopTitle span, .homeGratteTitle span { font-weight: bold; }
@media only screen and (min-width: 1024px) {
  .homeOnlyshopTitle span, .homeGratteTitle span {
    padding-bottom: 0;
    margin-top: 10px;
    line-height: 1.6;
    text-decoration: none;
    background-image: linear-gradient(90deg, #232729, #232729);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size .3s;
  }
}
.homeOnlyshopDate, .homeGratteDate {
  margin-top: 10px;
  font-size: clamp(8.5333333333px, 2.6666666667vw, 11.4666666667px);
  color: #999;
}
@media only screen and (min-width: 768px) {
  .homeOnlyshopDate, .homeGratteDate {
    font-size: clamp(9.008797654px, 1.1730205279vw, 12px);
  }
}
@media only screen and (min-width: 1024px) {
  .homeOnlyshopDate, .homeGratteDate { font-size: clamp(12px, .75vw, 12px); }
}


/* Slider common */
.slider { overflow: hidden; }
.splide__track { position: relative; z-index: 0; overflow: hidden; }
.splide__list { display: flex; }
.splide__slide { flex-shrink: 0; }

/* ===== home-gr-os-slider bottom bar ===== */
.splide[data-js=home-gr-os-slider] .splide__slide { margin-right: 40px; }
.splide[data-js=home-gr-os-slider] .splide__bottom {
  display: flex;
  align-items: center;
  margin-top: min(60px, 3.75vw);
  padding-inline: calc((100vw - 1280px) / 2 + 40px);
}
@media only screen and (max-width: 1319px) {
  .splide[data-js=home-gr-os-slider] .splide__bottom {
    padding-inline: 40px;
  }
}

/* OnlyShop 右移 40px */
.homeOnlyshop .splide[data-js=home-gr-os-slider] .splide__bottom {
  transform: translateX(40px);
}
/* Gratte 左移 60px */
.homeGratte .splide[data-js=home-gr-os-slider] .splide__bottom {
  transform: translateX(-60px);
}

.splide[data-js=home-gr-os-slider] .splide__progress-container {
  flex: 1;
}
.splide[data-js=home-gr-os-slider] .splide__progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: #e4e8eb;
}
.splide[data-js=home-gr-os-slider] .splide__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--total-slides, 10));
  height: 100%;
  background: #232729;
  transition: left .3s ease;
}

/* ===== home-gr-os-slider (OnlyShop / Gratte) arrows ===== */
[data-js="home-gr-os-slider"] .splide__arrows {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: static;
}
[data-js="home-gr-os-slider"] .splide__arrow {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72px, 4.5vw);
  height: min(72px, 4.5vw);
  border: none;
  border-radius: 72px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
[data-js="home-gr-os-slider"] .splide__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #fabf03;
  border-radius: 72px;
  transition: transform .3s;
}
[data-js="home-gr-os-slider"] .splide__arrow:hover::after { transform: scale(1.3); }
[data-js="home-gr-os-slider"] .splide__arrow--prev { margin-left: 40px; }
[data-js="home-gr-os-slider"] .splide__arrow--prev i { font-size: 20px; color: #fff; position: relative; z-index: 1; }
[data-js="home-gr-os-slider"] .splide__arrow--prev i::before {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f131";
}
[data-js="home-gr-os-slider"] .splide__arrow--next { margin-left: 20px; }
[data-js="home-gr-os-slider"] .splide__arrow--next i { font-size: 20px; color: #fff; position: relative; z-index: 1; }
[data-js="home-gr-os-slider"] .splide__arrow--next i::before {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f130";
}

/* Slide widths - let Splide perPage handle it for full-width */
[data-js="home-gr-os-slider"] .splide__slide { width: clamp(260px, 80vw, 400px); }
@media only screen and (min-width: 768px) {
  [data-js="home-gr-os-slider"] .splide__slide { width: auto; }
}

/* ===== home-service-slider arrows ===== */
[data-js="home-service-slider"] .splide__arrows { display: flex; gap: 12px; }
[data-js="home-service-slider"] .splide__arrow {
  width: 44px;
  height: 44px;
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}
[data-js="home-service-slider"] .splide__arrow:hover { background: var(--black); }
[data-js="home-service-slider"] .splide__arrow:hover i { border-color: var(--white); }
[data-js="home-service-slider"] .splide__arrow i {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transition: .3s;
}
[data-js="home-service-slider"] .splide__arrow--prev i { transform: rotate(-135deg); margin-right: -2px; }
[data-js="home-service-slider"] .splide__arrow--next i { transform: rotate(45deg); margin-left: -2px; }

/* ===== Generic splide ===== */
.splide__track { position: relative; z-index: 0; overflow: hidden; }
.splide__list { display: flex; }
.splide__slide { flex-shrink: 0; }

/* ========== Fair / Event ========== */
.homeFairInner { }
.homeFairButtons {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.homeFairButton {
  flex: 1;
  height: clamp(100px, 26.6666666667vw, 200px);
  background: var(--bg);
  border-radius: 20px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .homeFairButton {
    width: min(625px, 48.828125%);
    height: 200px;
    border-radius: 30px;
  }
}

.homeFairButton a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  padding-left: clamp(21.3333333333px, 6.6666666667vw, 51.2px);
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .homeFairButton a {
    padding: clamp(22.5219941349px, 2.9325513196vw, 30px);
    padding-left: clamp(30.0293255132px, 3.9100684262vw, 40px);
  }
}
.homeFairButton a::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
  background: #fff;
  opacity: .3;
  transition: transform .4s;
  transform: translateX(-100%);
}
.homeFairButton a:hover::before {
  transform: translateX(0);
}
.homeFairIcon {
  position: relative;
  z-index: 1;
  width: clamp(68.2666666667px, 21.3333333333vw, 91.7333333333px);
  margin-right: 5px;
}
.homeFairTextbox { position: relative; z-index: 1; }
.homeFairTextbox .is-en {
  display: block;
  font-size: clamp(22px, 7vw, 32px);
  font-weight: bold;
  color: var(--blue);
}
.homeFairTextbox .is-ja {
  display: block;
  font-size: clamp(13px, 4vw, 18px);
  color: #666;
  margin-top: 2px;
}
.homeFairButton i {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  transform: rotate(45deg);
  margin-left: auto;
  position: relative;
  z-index: 1;
}

/* ========== News ========== */
.homeNewsUpper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.homeNews .newsSummaryLists {
  margin-top: clamp(5px, 2vw, 21px);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s, transform .6s;
}
.homeNews .newsSummaryLists.inview {
  opacity: 1;
  transform: translateY(0);
}
.newsSummaryLists[data-border-color=gray] { border-top: 2px solid #eff2f5; }
.newsSummaryList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
}
@media only screen and (min-width: 768px) {
  .newsSummaryList { flex-wrap: nowrap; padding-block: clamp(22.5219941349px, 2.9325513196vw, 30px); padding-right: 15px; }
}
.newsSummaryLists[data-border-color=gray] .newsSummaryList { border-bottom: 1px solid #eff2f5; }
.newsSummaryListLink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  .newsSummaryListLink::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #232729;
    transition: transform .3s;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .newsSummaryListLink:hover::after { transform: scaleX(1); }
  .newsSummaryListLink:hover ~ .newsSummaryListDate { transition: transform .3s; transform: translateX(15px); }
  .newsSummaryListLink:hover ~ .newsSummaryListCategory { transition: transform .3s; transform: translateX(15px); }
  .newsSummaryListLink:hover ~ .newsSummaryListTitle { transition: transform .3s; transform: translateX(15px); }
}
.newsSummaryListDate {
  margin-right: clamp(8.5333333333px, 2.6666666667vw, 20.48px);
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  letter-spacing: .03em;
  color: #666;
  pointer-events: none;
  transition: transform .3s;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .newsSummaryListDate { margin-right: clamp(18.7683284457px, 2.4437927664vw, 25px); font-size: clamp(10.5102639296px, 1.3685239492vw, 14px); }
}
@media only screen and (min-width: 1024px) {
  .newsSummaryListDate { font-size: clamp(14px, .875vw, 14px); }
}
.newsSummaryListCategory { position: relative; z-index: 3; flex-shrink: 0; pointer-events: none; transition: transform .3s; }
.newsSummaryListCategory a {
  position: relative;
  z-index: 4;
  display: block;
  padding: 3px 18px;
  font-size: clamp(8.5333333333px, 2.6666666667vw, 11.4666666667px);
  font-weight: bold;
  background: #eff2f5;
  color: #232729;
  pointer-events: all;
  border: 2px solid rgba(0,0,0,0);
  border-radius: 60px;
  transition: .3s;
}
@media only screen and (min-width: 768px) {
  .newsSummaryListCategory a { margin-right: min(30px, 1.875vw); font-size: clamp(9.008797654px, 1.1730205279vw, 12px); }
}
@media only screen and (min-width: 1024px) {
  .newsSummaryListCategory a { font-size: clamp(12px, .75vw, 12px); }
  .newsSummaryListCategory a:hover { border: 2px solid; transition: .3s; }
}
.newsSummaryListTitle {
  pointer-events: none;
  transition: transform .3s;
  font-size: 15px;
  font-weight: 500;
  flex: 1;
  min-width: 200px;
}

@media only screen and (min-width: 768px) {
  .newsSummaryListTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ========== Banner Mix ========== */
.homeBanner {
  margin-top: clamp(51.2px, 16vw, 122.88px);
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .homeBanner { margin-top: clamp(120.1173020528px, 15.6402737048vw, 160px); }
}
.homeBannerInner {
  position: relative;
  padding-block: clamp(51.2px, 16vw, 122.88px);
}
@media only screen and (min-width: 768px) {
  .homeBannerInner { padding-block: clamp(90.0879765396px, 11.7302052786vw, 120px); }
}
.homeBannerInner.inview .homeBannerBackground {
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(0);
}
.homeBannerBackground {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #eff2f5;
  transform: translateY(50%);
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
.homeBannerContent {
  width: clamp(285.8666666667px, 89.3333333333vw, 686.08px);
  max-width: 1280px;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .homeBannerContent { width: clamp(668.1524926686px, 86.9990224829vw, 1391.9843597263px); }
}
.bannerMixLists {
  display: grid;
  grid-template-columns: 33% 16% 33% 16%;
  gap: 3.0304943494% .6666666667%;
}

.bannerMixLists li {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.bannerMixLists li:nth-child(1) { grid-row: 1 / span 2; grid-column: 1 / span 1; }
.bannerMixLists li:nth-child(2) { grid-row: 1 / span 1; grid-column: 2 / span 1; }
.bannerMixLists li:nth-child(3) { grid-row: 2 / span 1; grid-column: 2 / span 1; }
.bannerMixLists li:nth-child(4) { grid-row: 1 / span 2; grid-column: 3 / span 1; }
.bannerMixLists li:nth-child(5) { grid-row: 1 / span 1; grid-column: 4 / span 1; }
.bannerMixLists li:nth-child(6) { grid-row: 2 / span 1; grid-column: 4 / span 1; }

.bannerMixLists li picture {
  aspect-ratio: 4/3;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.bannerMixLists li picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bannerMixLists li picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: .1;
  transform: scale(1.15) translateZ(0);
}

.bannerMixLink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  .bannerMixLink:hover ~ .bannerMixImage { transition: transform .3s; transform: scale(1.1); }
  .bannerMixImage { transition: transform .3s; }
}

/* ========== Service ========== */
.homeService {
  position: relative;
  z-index: 2;
  padding-top: min(200px, 28.2666666667vw);
  padding-bottom: clamp(68.2666666667px, 21.3333333333vw, 163.84px);
  background: #eff2f5;
}
@media only screen and (min-width: 768px) {
  .homeService { padding-top: min(400px, 14.6875vw); padding-bottom: clamp(120.1173020528px, 15.6402737048vw, 160px); }
}
.homeService.inview .homeServiceBackground {
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate(-50%, 0);
}
.homeService.inview .homeServiceLoopText {
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(0);
}
.homeServiceInner { position: relative; }
.homeServiceBackground {
  position: absolute;
  top: max(-200px, -28.2666666667vw);
  left: 50%;
  z-index: -1;
  width: max(1200px, 195.4375vw);
  height: max(110px, calc(126.6875vw - 790px));
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border-radius: 50%;
  transform: translate(-50%, 25vw);
}
@media only screen and (min-width: 768px) {
  .homeServiceBackground { top: max(-400px, -14.6875vw); width: max(900px, 195.4375vw); height: max(0px, calc(126.6875vw - 790px)); }
}
.homeServiceLoopText {
  position: absolute;
  top: max(-75px, -20vw);
  display: flex;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  transform: translateY(25vw);
}
@media only screen and (min-width: 768px) {
  .homeServiceLoopText { top: max(-115px, -7.1875vw); }
}
.homeServiceLoopText__item {
  position: relative;
  z-index: -1;
  flex-shrink: 0;
  padding-right: clamp(25.6px, 8vw, 61.44px);
  font-size: clamp(51.2px, 16vw, 68.8px);
  font-weight: bold;
  color: #385eaa;
  white-space: nowrap;
  opacity: .15;
}
@media only screen and (min-width: 768px) {
  .homeServiceLoopText__item { padding-right: clamp(45.0439882698px, 5.8651026393vw, 60px); font-size: clamp(75.073313783px, 9.7751710655vw, 100px); }
}
@media only screen and (min-width: 1024px) {
  .homeServiceLoopText__item { font-size: clamp(100px, 7.8125vw, 125px); }
}
.homeServiceLoopText .js-loop-item {
}

.homeService .headlineLv1 .is-en { color: #fff; }
.homeService .headlineLv1 .is-ja { color: #fff; }

.homeServiceScroller {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(40px, 6.4vw, 80px);
  padding-left: 0;
  overflow: hidden;
}
.homeServiceScrollerInner {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0;
}
.homeServiceScrollerInner .homeServiceCard {
  margin-right: 20px;
}
.homeServiceScroller .js-loop-item {
}

.homeServiceCard {
  flex: 0 0 260px;
  width: 260px;
  background: #fff;
  border-radius: 30px;
}
@media only screen and (min-width: 768px) {
  .homeServiceCard { flex: 0 0 400px; width: 400px; }
}
.homeServiceCardLink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding-inline: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
  border-radius: 30px;
}
@media only screen and (min-width: 768px) {
  .homeServiceCardLink { padding-top: 20px; padding-bottom: 30px; }
}
@media only screen and (min-width: 1024px) {
  .homeServiceCardLink:hover i::before { transition: transform .3s; transform: scale(1.3); }
}
.homeServiceCardImage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 100px;
  margin: 0 auto 10px;
}
@media only screen and (min-width: 768px) {
  .homeServiceCardImage { width: 240px; height: 180px; margin: 0 auto 15px; }
}
.homeServiceCardImage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.homeServiceCardTitle {
  font-size: clamp(13.6533333333px, 4.2666666667vw, 18.3466666667px);
  font-weight: bold;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .homeServiceCardTitle { font-size: clamp(15.0146627566px, 1.9550342131vw, 20px); }
}
@media only screen and (min-width: 1024px) {
  .homeServiceCardTitle { font-size: clamp(16px, 1.25vw, 20px); }
}
.homeServiceCardText {
  padding-bottom: 35px;
  margin-top: 20px;
  font-size: 14px;
  color: #8f8f8f;
}
@media only screen and (min-width: 768px) {
  .homeServiceCardText { padding-bottom: 40px; }
}
.homeServiceCard i {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
@media only screen and (min-width: 768px) {
  .homeServiceCard i { right: 30px; bottom: 30px; width: 40px; height: 40px; }
}
.homeServiceCard i:after {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f12b";
}
.homeServiceCard i::after {
  position: absolute;
  font-size: clamp(7.68px, 2.4vw, 10.32px);
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .homeServiceCard i::after { font-size: clamp(8.2580645161px, 1.0752688172vw, 11px); }
}
@media only screen and (min-width: 1024px) {
  .homeServiceCard i::after { font-size: clamp(11px, .6875vw, 11px); }
}
.homeServiceCard i::before {
  display: block;
  width: 30px;
  height: 30px;
  content: "";
  background: #46c3e7;
  border-radius: 50%;
  transition: transform .3s;
}
@media only screen and (min-width: 768px) {
  .homeServiceCard i::before { width: 40px; height: 40px; }
}

/* ========== Loop text keyframe ========== */
@keyframes MoveLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========== SNS ========== */
.homeSns {
  position: relative;
  z-index: 3;
}
.homeSnsInner {
  padding-top: clamp(51.2px, 16vw, 122.88px);
  background: var(--white);
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
@media only screen and (min-width: 768px) {
  .homeSnsInner { padding-top: clamp(90.0879765396px, 11.7302052786vw, 120px); }
}
.homeSnsTitle {
  font-size: clamp(20.48px, 6.4vw, 27.52px);
  font-weight: bold;
  color: var(--blue);
}
@media only screen and (min-width: 768px) {
  .homeSnsTitle { font-size: clamp(37.5366568915px, 4.8875855327vw, 50px); }
}
@media only screen and (min-width: 1024px) {
  .homeSnsTitle { font-size: clamp(40px, 3.125vw, 50px); }
}
.homeSnsContent { margin-top: clamp(25.6px, 8vw, 61.44px); }
@media only screen and (min-width: 768px) {
  .homeSnsContent { margin-top: clamp(30.0293255132px, 3.9100684262vw, 40px); }
}
.homeSnsLinks { width: 100%; }
@media only screen and (min-width: 768px) {
  .homeSnsLinks { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
.homeSnsLink {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: clamp(8.5333333333px, 2.6666666667vw, 20.48px);
  border: 2px solid #e4e8eb;
  border-radius: 30px;
}
@media only screen and (min-width: 768px) {
  .homeSnsLink {
    width: min(625px, 48.828125%);
    margin-top: clamp(15.0146627566px, 1.9550342131vw, 20px);
  }
}
.homeSnsLink:first-of-type { margin-top: 0; }
@media only screen and (min-width: 768px) {
  .homeSnsLink:nth-of-type(-n+2) { margin-top: 0; }
}
/* multi-item (X, LINE) */
.homeSnsLink[data-sns=x],
.homeSnsLink[data-sns=line] {
  height: 122px;
  padding-right: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  padding-left: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
}
@media only screen and (min-width: 768px) {
  .homeSnsLink[data-sns=x],
  .homeSnsLink[data-sns=line] {
    padding-right: clamp(15.0146627566px, 1.9550342131vw, 31.2805474096px);
    padding-left: clamp(15.0146627566px, 1.9550342131vw, 31.2805474096px);
  }
}
/* single-item (insta, threads, tiktok, bluesky, weibo) */
.homeSnsLink[data-sns=insta],
.homeSnsLink[data-sns=tiktok],
.homeSnsLink[data-sns=threads],
.homeSnsLink[data-sns=bluesky],
.homeSnsLink[data-sns=weibo] { height: 90px; }
.homeSnsLink[data-sns=insta] > a,
.homeSnsLink[data-sns=tiktok] > a,
.homeSnsLink[data-sns=threads] > a,
.homeSnsLink[data-sns=bluesky] > a,
.homeSnsLink[data-sns=weibo] > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  padding-left: clamp(17.0666666667px, 5.3333333333vw, 40.96px);
  border-radius: 30px;
}
@media only screen and (min-width: 768px) {
  .homeSnsLink[data-sns=insta] > a,
  .homeSnsLink[data-sns=tiktok] > a,
  .homeSnsLink[data-sns=threads] > a,
  .homeSnsLink[data-sns=bluesky] > a,
  .homeSnsLink[data-sns=weibo] > a {
    padding-right: clamp(15.0146627566px, 1.9550342131vw, 31.2805474096px);
    padding-left: clamp(15.0146627566px, 1.9550342131vw, 31.2805474096px);
  }
}
/* multi-item link styles */
.homeSnsLink[data-sns=x] .homeSnsLinkLists li a,
.homeSnsLink[data-sns=line] .homeSnsLinkLists li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 8px;
}
.homeSnsLinkIcon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: clamp(12.8px, 4vw, 30.72px);
}
@media only screen and (min-width: 768px) {
  .homeSnsLinkIcon { margin-right: clamp(30.0293255132px, 3.9100684262vw, 40px); }
}
.homeSnsLinkIcon img { height: 100%; object-fit: contain; }
[data-sns=x] .homeSnsLinkIcon i { display: inline-block; }
[data-sns=x] .homeSnsLinkIcon i::before {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\1D54F";
  font-size: 42px;
  font-weight: bold;
}
.homeSnsLinkLists { width: 100%; }
.homeSnsLinkLists li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* text colors per SNS */
[data-sns=x] .homeSnsLinkLists li span,
[data-sns=tiktok] .homeSnsLinkLists li span,
[data-sns=threads] .homeSnsLinkLists li span { color: #232729; }
[data-sns=line] .homeSnsLinkLists li span { color: #00b900; }
[data-sns=insta] .homeSnsLinkLists li span { color: #bb309e; }
[data-sns=weibo] .homeSnsLinkLists li span { color: #e41e1c; }
[data-sns=bluesky] .homeSnsLinkLists li span { color: #1185fe; }
.homeSnsLinkLists li span {
  position: relative;
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .homeSnsLinkLists li span { font-size: clamp(13.5131964809px, 1.7595307918vw, 18px); }
}
@media only screen and (min-width: 1024px) {
  .homeSnsLinkLists li span { font-size: clamp(18px, 1.125vw, 18px); }
}
/* hover underline */
.homeSnsLinkLists li span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  transition: transform .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
[data-sns=x] .homeSnsLinkLists li span::after,
[data-sns=tiktok] .homeSnsLinkLists li span::after,
[data-sns=threads] .homeSnsLinkLists li span::after { background: #232729; }
[data-sns=line] .homeSnsLinkLists li span::after { background: #00b900; }
[data-sns=insta] .homeSnsLinkLists li span::after { background: #bb309e; }
[data-sns=weibo] .homeSnsLinkLists li span::after { background: #e41e1c; }
[data-sns=bluesky] .homeSnsLinkLists li span::after { background: #1185fe; }
/* arrow inside circle */
.homeSnsLinkLists li i {
  position: relative;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.homeSnsLinkLists li i::before {
  display: block;
  width: 24px;
  height: 24px;
  content: "";
  border-radius: 50%;
  transition: transform .3s;
}
[data-sns=x] .homeSnsLinkLists li i::before,
[data-sns=tiktok] .homeSnsLinkLists li i::before,
[data-sns=threads] .homeSnsLinkLists li i::before { background: #232729; }
[data-sns=line] .homeSnsLinkLists li i::before { background: #00b900; }
[data-sns=insta] .homeSnsLinkLists li i::before { background: #bb309e; }
[data-sns=weibo] .homeSnsLinkLists li i::before { background: #e41e1c; }
[data-sns=bluesky] .homeSnsLinkLists li i::before { background: #1185fe; }
.homeSnsLinkLists li i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* li separators */
[data-sns=x] .homeSnsLinkLists li + li,
[data-sns=tiktok] .homeSnsLinkLists li + li,
[data-sns=threads] .homeSnsLinkLists li + li { border-top: 1px dotted #232729; }
[data-sns=line] .homeSnsLinkLists li + li { border-top: 1px dotted #00b900; }
[data-sns=insta] .homeSnsLinkLists li + li { border-top: 1px dotted #bb309e; }
[data-sns=weibo] .homeSnsLinkLists li + li { border-top: 1px dotted #e41e1c; }
[data-sns=bluesky] .homeSnsLinkLists li + li { border-top: 1px dotted #1185fe; }
/* hover effects (desktop) */
@media only screen and (min-width: 1024px) {
  .homeSnsLink[data-sns=insta] > a:hover span::after,
  .homeSnsLink[data-sns=tiktok] > a:hover span::after,
  .homeSnsLink[data-sns=threads] > a:hover span::after,
  .homeSnsLink[data-sns=bluesky] > a:hover span::after,
  .homeSnsLink[data-sns=weibo] > a:hover span::after { transform: scale(1, 1); }
  .homeSnsLink[data-sns=x] .homeSnsLinkLists li a:hover span::after,
  .homeSnsLink[data-sns=line] .homeSnsLinkLists li a:hover span::after { transform: scale(1, 1); }
  .homeSnsLink[data-sns=insta] > a:hover i::before,
  .homeSnsLink[data-sns=tiktok] > a:hover i::before,
  .homeSnsLink[data-sns=threads] > a:hover i::before,
  .homeSnsLink[data-sns=bluesky] > a:hover i::before,
  .homeSnsLink[data-sns=weibo] > a:hover i::before { transform: scale(1.3); }
  .homeSnsLink[data-sns=x] .homeSnsLinkLists li a:hover i::before,
  .homeSnsLink[data-sns=line] .homeSnsLinkLists li a:hover i::before { transform: scale(1.3); }
}
/* bottom text */
.homeSnsText {
  margin-top: clamp(12.8px, 4vw, 30.72px);
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
}
@media only screen and (min-width: 768px) {
  .homeSnsText {
    margin-top: clamp(15.0146627566px, 1.9550342131vw, 20px);
    font-size: clamp(12.0117302053px, 1.5640273705vw, 16px);
  }
}
@media only screen and (min-width: 1024px) {
  .homeSnsText { font-size: clamp(16px, 1vw, 16px); }
}
.homeSnsText a { color: #385eaa; text-decoration: underline; }
@media only screen and (min-width: 1024px) {
  .homeSnsText a:hover { color: #46c3e7; text-decoration: none; }
}

/* ========== Area Modal ========== */
.areaModal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}
.areaModal.is-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.areaModal__background {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .8);
}
.areaModal__content--wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: min(800px, 90vw);
  height: 100%;
  background: var(--white);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.is-active .areaModal__content--wrapper {
  transform: translateX(0);
}
.areaModal__closeButton {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
}
.areaModal__closeButton::before,
.areaModal__closeButton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--black);
}
.areaModal__closeButton::before { transform: translate(-50%, -50%) rotate(45deg); }
.areaModal__closeButton::after { transform: translate(-50%, -50%) rotate(-45deg); }
.areaModal__content {
  height: 100%;
  overflow-y: auto;
  padding: 60px 40px 40px;
}

/* Area Search */
.areaSearchUpper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.areaSearchTitle {
  font-size: clamp(17.0666666667px, 5.3333333333vw, 22.9333333333px);
  font-weight: bold;
}
.areaSearchSwitch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 141px;
  padding: 3px;
  color: #fff;
  background: #232729;
  border-radius: 60px;
  overflow: hidden;
}
.tab-switch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 60px;
  cursor: pointer;
}
.tab-switch.active,
.areaSearchSwitch .tab-switch.active {
  color: #232729;
}
.areaSearchSwitch::before {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 0;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  content: "";
  background: #fff;
  border-radius: 60px;
  transition: transform .3s ease;
  transform: translateX(0);
}
.areaSearchSwitch[data-active="world"]::before { transform: translateX(100%); }

/* Area Search PC */
.areaSearchInner--pc { display: none; }
@media only screen and (min-width: 768px) {
  .areaSearchInner--pc { display: block; }
}
.switch-japan, .switch-world, .switch-china { display: none; }
.switch-japan.active, .switch-world.active, .switch-china.active { display: block !important; }
.areaSearchJapan--pc, .areaSearchWorld--pc { position: relative; }
.areaSearchJapan_image img, .areaSearchWorld_image img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.areaSearchJapan_block {
  position: absolute;
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e4e8eb;
  border-radius: 12px;
  padding: 12px;
  min-width: 120px;
}
.areaSearchJapan_block[data-area="japan-hokkaido_tohoku"] { top: 5%; left: 40%; }
.areaSearchJapan_block[data-area="japan-kanto"] { top: 25%; left: 35%; }
.areaSearchJapan_block[data-area="japan-chubu"] { top: 30%; left: 22%; }
.areaSearchJapan_block[data-area="japan-kansai"] { top: 35%; left: 18%; }
.areaSearchJapan_block[data-area="japan-chugoku_shikoku"] { top: 48%; left: 5%; }
.areaSearchJapan_block[data-area="japan-kyusyu_okinawa"] { top: 65%; left: 3%; }
.areaSearchChina--pc { padding: 20px 0; }
.areaSearchChina_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; }
.areaSearchChina_block { }
.areaSearchChina_block--title { font-size: 14px; font-weight: bold; color: var(--blue); margin-bottom: 4px; }
.areaSearchChina_block ul { list-style: none; padding: 0; margin: 0; }
.areaSearchChina_block ul li { margin-top: 2px; }
.areaSearchChina_block ul li a { font-size: 13px; color: #232729; text-decoration: none; }
.areaSearchChina_block ul li a:hover { color: var(--blue); }

.areaSearchChina--sp { padding: 16px 0; }
.areaSearchChina_title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; font-size: 14px; font-weight: bold;
  border-bottom: 1px solid #e4e8eb; cursor: pointer;
}
.areaSearchChina_title i {
  display: inline-block; width: 10px; height: 10px;
  border-right: 2px solid #232729; border-bottom: 2px solid #232729;
  transform: rotate(45deg); transition: transform .3s;
}
.areaSearchChina_title.is-open i { transform: rotate(-45deg); }
.areaSearchChina_lists { display: none; flex-wrap: wrap; gap: 8px; padding: 8px 0; list-style: none; }
.areaSearchChina_lists.is-open { display: flex; }
.areaSearchChina_lists li a {
  display: flex; align-items: center; font-size: 13px; color: #232729;
  padding: 4px 8px; border: 1px solid #e4e8eb; border-radius: 4px;
  text-decoration: none;
}
.areaSearchChina_lists li a i { display: none; }
.block--title {
  font-size: 13px;
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 6px;
}
.block--link { margin-top: 2px; }
.block--link a {
  font-size: 12px;
  color: #232729;
  transition: color .2s;
}
.block--link a:hover { color: var(--blue); }

.areaSearchWorld_block {
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e4e8eb;
  border-radius: 12px;
  padding: 12px;
  min-width: 120px;
}

/* Area Search SP */
.areaSearchInner--sp { display: block; }
@media only screen and (min-width: 768px) {
  .areaSearchInner--sp { display: none; }
}
.areaSearchJapan_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #e4e8eb;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.areaSearchJapan_title i {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(135deg);
  transition: .3s;
}
.areaSearchJapan_title.is-open i { transform: rotate(-45deg); }
.areaSearchJapan_lists {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 0;
}
.areaSearchJapan_lists.is-open { display: flex; }
.areaSearchJapan_lists li a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 4px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.areaSearchJapan_lists li a i {
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(45deg);
}
.areaSearchWorld_title {
  border-bottom: 1px solid #e4e8eb;
}
.areaSearchWorld_title a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 15px;
}
.areaSearchWorld_title a i {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(45deg);
}

/* ========== Footer ========== */
.footer { position: relative; z-index: 5; background: #eff2f5; }
.footerInner {
  padding-block: clamp(30px, 8vw, 60px);
  background: var(--white);
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
.footerContent { width: 100%; }
.footerMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(30px, 5vw, 50px);
}
.footerMenuLogo { width: clamp(205px, 64vw, 492px); flex-shrink: 0; }
.footerMenuLogo a { display: block; }
.footerMenuLogo img { width: 100%; height: auto; }
.footerMenuLinks ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(16px, 3vw, 32px); }
.footerMenuLinks ul li a {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: bold;
  color: #232729;
}
.footerMenuLinks ul li a:hover { color: var(--blue); }

@media only screen and (min-width: 768px) {
  .footerMenuLogo { width: min(300px, 18.75vw); margin-top: 13px; }
}
.footerLower { margin-top: clamp(30px, 8vw, 60px); }
@media only screen and (min-width: 768px) {
  .footerLower { display: flex; align-items: flex-end; justify-content: space-between; margin-top: clamp(30px, 4vw, 50px); }
}
.footerLowerLists { display: flex; flex-wrap: wrap; }

@media only screen and (min-width: 768px) {
  .footerLowerLists { width: min(550px, 43.75vw); margin-top: 10px; margin-bottom: -5px; }
}
.footerLowerLists li a {
  display: block;
  padding-block: clamp(5.9733333333px, 1.8666666667vw, 14.336px);
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  color: #999;
  transition: color .2s;
}
@media only screen and (min-width: 768px) {
  .footerLowerLists li a { padding-block: 5px; margin-right: clamp(22.5219941349px, 2.9325513196vw, 30px); font-size: clamp(10.5102639296px, 1.3685239492vw, 14px); }
}
@media only screen and (min-width: 1024px) {
  .footerLowerLists li a span { position: relative; }
  .footerLowerLists li a span::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; content: ""; background: #232729; transition: transform .3s; transform: scaleX(0); transform-origin: left center; }
  .footerLowerLists li a:hover span::after { transform: scaleX(1); }
}
.footerLowerLists a:hover { color: var(--blue); }

.footerLowerRight {
  text-align: right;
}
.footerOnline {
  margin-top: -40px;
  margin-bottom: 40px;
}
.footerOnline .buttonIconAfter a {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to right, #149bde, #4ec9e7);
  color: var(--white);
  padding: 11px 19px;
  border-radius: 60px;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  transition: opacity .3s;
}
.footerOnline .buttonIconAfter a:hover { opacity: 0.85; }

.footerLanguage { position: relative; width: 100%; }

@media only screen and (min-width: 768px) {
  .footerLanguage { width: fit-content; margin: 0 0 0 auto; }
}
.footerLanguageButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 63px;
  padding-block: 10px;
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  font-weight: normal;
  cursor: pointer;
  color: #999;
  transition: all .3s;
}
.footerLanguageButton::before {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\1F310";
  margin-right: 5px;
  font-size: 20px;
  filter: grayscale(1);
  opacity: 0.55;
}
.footerLanguageButton:hover::before { opacity: 0.8; }
@media only screen and (min-width: 768px) {
  .footerLanguageButton { width: 115px; height: 44px; font-size: 12px; border-radius: 60px; }
}
@media only screen and (min-width: 1024px) {
  .footerLanguageButton:hover { background: #eff2f5; transition: all .4s; }
}
.is-show .footerLanguageButton { background: #eff2f5; }
.footerLanguageMenu {
  position: absolute;
  bottom: 74px;
  left: 50%;
  width: 120px;
  padding: 10px;
  background: var(--white);
  border: 1px solid #e4e8eb;
  border-radius: 16px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
  transform: translate(-50%, 10px);
  z-index: 6;
}
@media only screen and (min-width: 768px) {
  .footerLanguageMenu { bottom: 54px; }
}
.is-show .footerLanguageMenu {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
.footerLanguageMenu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 7px;
  font-size: 12px;
  font-weight: normal;
  color: #666;
}
@media only screen and (min-width: 1024px) {
  .footerLanguageMenu ul li a span { position: relative; }
  .footerLanguageMenu ul li a span::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; content: ""; background: #232729; transition: transform .3s; transform: scaleX(0); transform-origin: left center; }
  .footerLanguageMenu ul li a:hover span::after { transform: scaleX(1); }
}
.footerLanguageMenu { z-index: 6; }
.footerLowerCopyright {
  margin-top: 16px;
  font-size: 10px;
  color: #999;
}

@media only screen and (min-width: 768px) {
  .footerLowerCopyright { font-size: 12px; }
}

/* ========== Footer Banner ========== */
.footerBanner { position: relative; z-index: 4; padding-top: clamp(36px, 6vw, 52px); }
.footerBannerInner {
  padding-block: clamp(36px, 6vw, 52px);
  padding-inline: clamp(10px, 2vw, 30px);
  background: #eff2f5;
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
.footerBannerInner .contentInner {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.bannerSmallLists { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.bannerSmallLists li {
  position: relative;
  top: 0; left: 0;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.bannerSmallLink {
  position: absolute;
  top: 0; left: 0; z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
.bannerSmallImage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  transition: transform .3s;
}
.bannerSmallImage img { width: 100%; height: 100%; object-fit: contain; }
.bannerSmallImage::before {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .bannerSmallLink:hover ~ .bannerSmallImage { transform: scale(1.05); }
}

/* ========== Header responsive ========== */
@media only screen and (max-width: 1023px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .headerMenu,
  .headerLanguage,
  .headerOnline { display: none; }
}

/* ========== Responsive ========== */


/* ========================================
   内页通用样式
   ======================================== */

/* 面包屑 */
.pageBreadcrumb { padding-top: clamp(100px, 10.4167vw, 160px); }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #888; }
.breadcrumb a { color: #232729; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #888; }
.breadcrumb a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #aaa; border-right: 1px solid #aaa; transform: rotate(45deg); margin-left: 8px; }

/* 页面标题 */
.pageHeader { padding: 30px 0 40px; }
.pageHeader .headlineLv1 { font-size: clamp(28px, 2.5vw, 40px); }
.pageHeader .is-en { display: block; font-size: clamp(14px, 1vw, 16px); color: #00a0e9; font-weight: 600; letter-spacing: .08em; margin-bottom: 4px; }
.pageHeader .is-ja { display: block; font-size: clamp(24px, 2.2vw, 36px); font-weight: 700; color: #232729; }

/* 区域标题 */
.pageSectionTitle { font-size: clamp(20px, 1.5vw, 26px); font-weight: 700; color: #232729; margin-bottom: 30px; padding-bottom: 12px; border-bottom: 2px solid #eff2f5; }

/* ========================================
   店铺页 - Hero 区域
   ======================================== */
.shopTopHero { background: #fff; }
.shopTopHero .headlineLv1 { margin-top: clamp(5px, 2vw, 20px); }
.shopTopHero .headlineLv1 .is-en { display: block; font-size: clamp(34px, 10.67vw, 46px); font-weight: bold; }
.shopTopHero .headlineLv1 .is-ja { display: flex; align-items: center; font-size: clamp(12px, 3.73vw, 16px); }
.shopTopHero .headlineLv1 .is-ja::before { display: inline-block; width: 12px; height: 12px; margin-right: 8px; content: ""; background: #fabf03; }

/* ========================================
   店铺页 - 搜索区域
   ======================================== */
.shopTopSearch { position: relative; z-index: 2; margin-top: clamp(15px, 4vw, 30px); background: #fff; }
.shopTopSearchInner { padding-top: clamp(25px, 8vw, 60px); background: #eff2f5; border-top-left-radius: clamp(50px, 6.25vw, 100px); border-top-right-radius: clamp(50px, 6.25vw, 100px); }
.shopTopSearchUpper { display: flex; justify-content: space-between; margin-bottom: clamp(13px, 4vw, 31px); flex-wrap: wrap; }
.shopTopSearchTitle { font-size: clamp(14px, 4.27vw, 18px); font-weight: bold; }
.shopTopSearchKeyword, .shopTopSearchGps { padding: clamp(17px, 5.33vw, 41px); background: #fff; border-radius: 20px; }
.shopTopSearchKeyword { width: 100%; margin-bottom: clamp(13px, 4vw, 31px); }
.shopTopSearchKeywordInner { position: relative; width: 100%; height: 50px; margin-top: clamp(9px, 2.67vw, 20px); }
.shopTopSearchInput { width: 100%; height: 100%; padding-right: 60px; padding-left: 30px; border: 1px solid #e4e8eb; border-radius: 60px; font-size: 14px; }
.shopTopSearchSubmit { position: absolute; top: 50%; right: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(to right, #149bde, #4ec9e7); border-radius: 60px; transform: translateY(-50%); }
.shopTopSearchSubmit i { position: relative; display: block; width: 16px; height: 16px; }
.shopTopSearchSubmit i::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; }
.shopTopSearchSubmit i::after { content: ""; position: absolute; top: 13px; left: 13px; width: 5px; height: 2px; background: #fff; transform: rotate(45deg); }
.shopTopSearchSubmit::after { position: absolute; top: 50%; left: 50%; z-index: -1; width: calc(100% - 4px); height: calc(100% - 4px); content: ""; background: #fff; border-radius: 60px; transition: transform .15s; transform: translate(-50%, -50%) scaleX(0); transform-origin: center left; }
.shopTopSearchSubmit:hover i::before, .shopTopSearchSubmit:hover i::after { border-color: #46c3e7; background: #46c3e7; }
.shopTopSearchSubmit:hover::after { transition: transform .15s; transform: translate(-50%, -50%) scaleX(1); }
.shopTopSearchGps { width: 100%; }
.shopTopSearchGps .buttonIconBefore { height: 50px; margin-top: clamp(9px, 2.67vw, 20px); border-radius: 60px; }
.shopTopSearchGps .buttonIconBefore a { display: flex; align-items: center; padding: 0 30px; background: linear-gradient(to right, #149bde, #4ec9e7); color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; border-radius: 60px; height: 100%; }
.shopTopSearchGps .buttonIconBefore a i { position: relative; display: inline-block; width: 24px; height: 24px; margin-right: 10px; }
.shopTopSearchGps .buttonIconBefore a i svg { display: inline-block; width: 100%; height: 100%; fill: #fff; }
.shopTopSearchGps .buttonIconBefore a i svg.circle { position: absolute; top: 0; left: 0; }
.shopTopSearchGps .buttonIconBefore a:hover i svg { fill: #46c3e7; }

/* 区域搜索 - 通用 */
.areaSearch { position: relative; padding: clamp(17px, 5.33vw, 41px); background: #fff; border-radius: 20px; }
.areaSearchUpper { display: flex; align-items: center; justify-content: space-between; }
.areaSearchTitle { font-size: clamp(14px, 4.27vw, 18px); font-weight: bold; }
.areaSearchInner--pc { display: none; }
.areaSearchInner--sp { display: block; }
/* block title and links */
.areaSearchInner--pc .block--title { font-weight: bold; font-size: clamp(14px, 1.76vw, 18px); }
.areaSearchInner--pc .block--link a { display: flex; align-items: center; justify-content: center; width: clamp(65px, 5.125vw, 82px); height: clamp(28px, 2.375vw, 38px); font-size: clamp(12px, .875vw, 14px); font-weight: bold; color: #232729; text-decoration: none; background: #fff; border: 2px solid #e4e8eb; border-radius: 60px; transition: border-color .3s; }
.areaSearchInner--pc .block--link a:hover { border: 2px solid #232729; }
.areaSearchInner--pc .block--link.is-hidden { visibility: hidden; }
.areaSearchChina_block.is-empty,
.areaSearchWorld_block.is-empty { visibility: hidden; }
.areaSearchChina--pc, .areaSearchWorld--pc { display: none; }
.areaSearchChina--pc.active, .areaSearchWorld--pc.active { display: block; }

/* 中国地图区域 */
.areaSearchChina--pc.active { display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }
.areaSearchChina_top { display: flex; align-items: flex-start; justify-content: center; position: relative; flex: 1; width: 100%; }
.areaSearchChina_mapWrap { position: relative; flex-shrink: 0; }
.areaSearchChina_image { height: fit-content; margin-top: 40px; }
.areaSearchChina_image img { width: 100%; height: auto; display: block; }

/* 中国地图区域块 - 左右两侧绝对定位 */
.areaSearchChina_blocks { position: absolute; top: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 40px; overflow-y: auto; max-height: 100%; width: 240px; }
.areaSearchChina_blocks--left { left: 0; }
.areaSearchChina_blocks--right { right: 0; }
/* 侧边区块链接排两排 */
.areaSearchChina_blocks .areaSearchChina_block ul { display: flex; flex-wrap: wrap; gap: 5px; }
.areaSearchChina_blocks .areaSearchChina_block ul li { margin: 0; }

/* 地图上的区域块 */
.areaSearchChina_mapWrap .areaSearchChina_block { position: absolute; }
[data-area="china-dongbei"] { top: 0; left: 50%; transform: translateX(-50%); text-align: center; }
[data-area="china-dongbei"] ul { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
[data-area="china-dongbei"] ul li { margin: 0; }
/* 世界地图区域 - PC */
.areaSearchWorld--pc { position: relative; }
.areaSearchWorld--pc.active { display: flex; align-items: center; justify-content: center; height: 100%; }
.areaSearchWorld--pc .block--link a { width: clamp(86px, 6.25vw, 100px); }
.areaSearchWorld_image { height: fit-content; width: 90%; max-width: 500px; margin: 0 auto; }
.areaSearchWorld_image img { width: 100%; display: block; }
.areaSearchWorld_block { position: absolute; width: 200px; }
.areaSearchWorld_block ul { display: flex; flex-wrap: wrap; margin-top: 5px; }
.areaSearchWorld_block ul li { margin-top: 5px; margin-right: 5px; }
[data-area="world-asia"] { top: 35%; right: 2%; }
[data-area="world-north-america"] { top: 35%; left: 2%; }

/* 手机端区域搜索 */
.areaSearchChina_title { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; font-size: 14px; font-weight: bold; border-bottom: 1px solid #eff2f5; }
.areaSearchChina_title:first-of-type { margin-top: 15px; border-top: 1px solid #eff2f5; }
.areaSearchChina_title i::after { content: "▼"; display: inline-block; font-size: 10px; transition: transform .3s; }
.areaSearchChina_title.selected i::after { transform: rotate(-135deg); }
.areaSearchChina_lists { position: relative; height: 0; overflow: hidden; border-bottom: 1px solid #eff2f5; }
.areaSearchChina_lists li:last-of-type { margin-bottom: 15px; }
.areaSearchChina_lists a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; font-size: 14px; color: #232729; text-decoration: none; }
.areaSearchWorld_title { position: relative; font-size: 14px; font-weight: bold; border-bottom: 1px solid #eff2f5; }
.areaSearchWorld_title:first-of-type { margin-top: 15px; }
.areaSearchWorld_title a { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; color: #232729; text-decoration: none; }

/* ========================================
   店铺页 - Banner
   ======================================== */
.shopTopBanner { padding-top: clamp(34px, 10.67vw, 82px); background: #eff2f5; }

/* ========================================
   店铺页 - 线下店铺
   ======================================== */
.shopTopRelated { position: relative; z-index: 3; padding-top: clamp(51px, 16vw, 123px); background: #eff2f5; }
.shopTopRelatedInner { background: #fff; border-top-left-radius: clamp(50px, 6.25vw, 100px); border-top-right-radius: clamp(50px, 6.25vw, 100px); }
.shopTopRelatedContent { padding-top: clamp(51px, 16vw, 123px); padding-bottom: clamp(51px, 16vw, 123px); }
.shopTopRelatedContent .headlineLv2 { margin-bottom: clamp(17px, 5.33vw, 41px); }
.shopTopRelatedContent .headlineLv2 span { font-size: clamp(17px, 5.33vw, 23px); font-weight: bold; }
.shopCards { margin-top: clamp(17px, 5.33vw, 41px); }
.shopCard { position: relative; padding: 20px 20px 10px; margin-top: 10px; background: #eff2f5; border-radius: clamp(20px, 1.875vw, 30px); }
.shopCard:first-of-type { margin-top: 0; }
.shopCardLink { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.shopCardLink:hover ~ .shopCardButtons .shopCardButton-detail a { color: #46c3e7; transition: color .1s; }
.shopCardLink:hover ~ .shopCardButtons .shopCardButton-detail a::after { transform: scaleX(1); transform-origin: center left; }
.shopCardLeft { pointer-events: none; }
.shopCardTitle { width: 100%; font-size: clamp(15px, 4.8vw, 21px); font-weight: bold; pointer-events: none; }
.shopCardInfo { margin-top: 15px; pointer-events: none; }
.shopCardText { display: inline-block; font-size: clamp(10px, 3.2vw, 14px); pointer-events: none; }
.shopCardText[data-shop-info="tel"] { margin-top: 3px; margin-right: 24px; }
.shopCardText[data-shop-info="hours"] { margin-top: 3px; }
.shopCardCategory { display: flex; flex-wrap: wrap; margin-top: 5px; pointer-events: none; }
.shopCardCategory li { width: fit-content; padding: 5px 10px; margin-top: 5px; margin-right: 5px; font-size: clamp(9px, 2.67vw, 11px); font-weight: bold; pointer-events: none; background: #fff; border-radius: 60px; white-space: nowrap; }
.shopCardButtons { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; margin-top: 30px; pointer-events: none; }
.shopCardButtons::before { position: absolute; top: -10px; left: 5.33vw; display: block; width: 89.33vw; height: 1px; margin-inline: calc(50% - 50vw); content: ""; background: #fff; }
.shopCardButtonsUpper { position: relative; z-index: 1; display: flex; pointer-events: none; }
.shopCardButton { position: relative; z-index: 2; display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 42px; font-size: 15px; font-weight: bold; background: #fff; border-radius: 60px; }
.shopCardButton a { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: all; color: #232729; text-decoration: none; border-radius: 60px; }
.shopCardButton[data-button="sns"] { width: 42px; margin-right: 10px; border: 2px solid #e4e8eb; transition: .3s; }
.shopCardButton[data-button="sns"]:hover { border: 2px solid #232729; }
.shopCardButton[data-button="sns"] i { display: block; width: 20px; height: 20px; }
.shopCardButton[data-button="sns"] i svg { width: 100%; height: 100%; }
.shopCardButton[data-button="map"] { flex-grow: 1; width: 91px; margin-right: 10px; border: 2px solid #e4e8eb; transition: .3s; }
.shopCardButton[data-button="map"]:hover { border: 2px solid #232729; }
.shopCardButton[data-button="map"] a { font-size: 13px; }
.shopCardButton-detail { position: relative; width: 142px; height: 42px; pointer-events: none; }
.shopCardButton-detail::before { position: absolute; inset: -2px; z-index: 0; display: block; pointer-events: none; content: ""; background: linear-gradient(to right, #149bde, #4ec9e7); border-radius: 60px; }
.shopCardButton-detail a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; font-size: clamp(14px, 4.27vw, 18px); font-weight: bold; color: #fff; pointer-events: none; background: linear-gradient(to right, #149bde, #4ec9e7); transition: color .1s; }
.shopCardButton-detail a::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; background: #fff; border-radius: 60px; transition: transform .3s; transform: scaleX(0); transform-origin: center left; }
.shopCardButton-detail a span { font-size: 15px; pointer-events: none; }

/* Tablet 768px+ overrides */
@media only screen and (min-width: 768px) {
  .shopTopHero .headlineLv1 .is-en { font-size: clamp(45px, 5.87vw, 60px); }
  .shopTopHero .headlineLv1 .is-ja { font-size: clamp(14px, 1.76vw, 18px); }
  .shopTopHero .headlineLv1 .is-ja::before { width: 15px; height: 14px; margin-right: 10px; }

  .shopTopSearch { margin-top: clamp(22px, 3vw, 30px); }
  .shopTopSearchInner { padding-top: clamp(37px, 5vw, 50px); }
  .shopTopSearchUpper { margin-bottom: clamp(23px, 2.93vw, 30px); flex-wrap: nowrap; }
  .shopTopSearchTitle { font-size: clamp(17px, 2.15vw, 22px); }
  .shopTopSearchKeyword, .shopTopSearchGps { padding: clamp(30px, 3.91vw, 40px); border-radius: 30px; }
  .shopTopSearchKeyword { width: 48.828125%; margin-bottom: 0; }
  .shopTopSearchKeywordInner { height: 60px; margin-top: clamp(15px, 1.96vw, 20px); }
  .shopTopSearchSubmit { width: 50px; height: 50px; }
  .shopTopSearchSubmit i { width: 20px; height: 20px; }
  .shopTopSearchGps { width: 48.828125%; margin-top: 0; }
  .shopTopSearchGps .buttonIconBefore { height: 60px; margin-top: clamp(15px, 1.96vw, 20px); }

  .areaSearch { height: 578px; padding: clamp(19px, 2.44vw, 39px); border-radius: 30px; }
  .areaSearchTitle { font-size: clamp(17px, 2.15vw, 22px); }
  .areaSearchInner--pc { display: block; position: relative; height: 100%; }
  .areaSearchInner--sp { display: none; }
  .areaSearchChina_image { width: 400px; margin-top: 60px; }
	.areaSearchChina_blocks { width: 220px; }
    .areaSearchWorld_image { width: 550px; max-width: none; }
  .areaSearchWorld_block { width: 240px; }
  [data-area="world-asia"] { top: 40%; right: -30px; }
  [data-area="world-north-america"] { top: 35%; left: -30px; }

  .shopTopBanner { padding-top: clamp(60px, 7.82vw, 80px); }
  .shopTopRelated { padding-top: clamp(75px, 9.78vw, 100px); }
  .shopTopRelatedContent { padding-top: clamp(75px, 9.78vw, 100px); padding-bottom: clamp(75px, 9.78vw, 100px); }
  .shopTopRelatedContent .headlineLv2 span { font-size: clamp(21px, 2.74vw, 28px); }
  .shopCards { margin-top: clamp(23px, 2.93vw, 30px); }
  .shopCard { padding: 40px; display: flex; justify-content: space-between; }
  .shopCardLeft { display: flex; }
  .shopCardTitle { width: min(298px, 18.625vw); margin-right: min(40px, 2.5vw); font-size: clamp(17px, 2.15vw, 22px); }
  .shopCardInfo { width: min(525px, 34.375vw); margin-top: 0; }
  .shopCardText { font-size: clamp(11px, 1.37vw, 14px); }
  .shopCardText[data-shop-info="tel"] { margin-top: 6px; }
  .shopCardText[data-shop-info="hours"] { margin-top: 6px; }
  .shopCardCategory { margin-top: 15px; }
  .shopCardCategory li { font-size: clamp(9px, 1.17vw, 12px); }
  .shopCardButtons { display: block; flex-shrink: 0; width: 150px; margin-top: 0; }
  .shopCardButtons::before { display: none; }
  .shopCardButtonsUpper { width: 100%; max-width: 153px; }
  .shopCardButton[data-button="map"] { width: 98px; margin-right: 0; }
  .shopCardButton-detail { width: calc(100% - 4px); height: 38px; margin-top: 22px; margin-left: 4px; }

}

/* Desktop 1024px+ overrides */
@media only screen and (min-width: 1024px) {
  .shopTopHero .headlineLv1 span { font-size: clamp(35px, 2.75vw, 44px); }
  .shopTopHero .headlineLv1 .is-en { font-size: clamp(64px, 5vw, 80px); }
  .shopTopHero .headlineLv1 .is-ja { font-size: clamp(14px, 1.125vw, 18px); }

  .shopTopSearchTitle { font-size: clamp(18px, 1.375vw, 22px); }
  .shopTopSearchKeyword, .shopTopSearchGps { padding: clamp(30px, 3.91vw, 40px); }

  .areaSearch { padding-block: 30px; padding-inline: clamp(25px, 3.23vw, 40px); height: clamp(578px, 40.75vw, 652px); }
  .areaSearchChina_image { width: min(560px, 38vw); margin-top: min(30px, 2vw); }
	.areaSearchChina_blocks { width: 280px; }
  .areaSearchWorld_image { width: min(700px, 50vw); max-width: none; }
  .areaSearchWorld_block { width: 280px; }
  [data-area="world-asia"] { top: 32%; right: 0; }
  [data-area="world-north-america"] { top: 28%; left: 0; }
  .areaSearchSwitch { width: 190px; }
  .areaSearchSwitch .tab-switch { font-size: 14px; }
  .areaSearchInner--pc .block--title { font-size: clamp(14px, 1.76vw, 18px); }
  .areaSearchInner--pc .block--link a { width: clamp(65px, 5.125vw, 82px); height: clamp(28px, 2.375vw, 38px); font-size: clamp(12px, .875vw, 14px); }
  .areaSearchTitle { font-size: clamp(18px, 1.375vw, 22px); }

  .shopTopRelatedContent .headlineLv2 span { font-size: clamp(26px, 2vw, 32px); }
  .shopCardTitle { font-size: clamp(18px, 1.375vw, 22px); }
  .shopCardText { font-size: clamp(14px, .875vw, 14px); }
  .shopCardCategory li { font-size: clamp(12px, .75vw, 12px); }

}

/* ========================================
   筛选栏
   ======================================== */
.pageFilter { padding: 0 0 30px; }
.pageFilterBar { display: flex; flex-direction: column; gap: 20px; }
.pageFilterGroup { display: flex; align-items: flex-start; gap: 16px; }
.pageFilterLabel { font-size: 13px; font-weight: 700; color: #888; min-width: 70px; padding-top: 8px; }
.pageFilterTags { display: flex; flex-wrap: wrap; gap: 8px; }
.pageFilterTag { display: inline-block; padding: 8px 18px; font-size: 13px; color: #555; background: #f5f6f8; border-radius: 20px; text-decoration: none; transition: .3s; }
.pageFilterTag.active, .pageFilterTag:hover { background: #00a0e9; color: #fff; }
.pageFilterSearch { display: flex; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 400px; width: 100%; }
.pageFilterInput { flex: 1; border: none; padding: 10px 16px; font-size: 14px; outline: none; }
.pageFilterSubmit { width: 40px; height: 40px; border: none; background: #00a0e9; cursor: pointer; position: relative; }
.pageFilterSubmit i::after { content: ''; display: block; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; position: absolute; top: 11px; left: 11px; }
.pageFilterSubmit i::before { content: ''; display: block; width: 6px; height: 2px; background: #fff; position: absolute; top: 27px; left: 22px; transform: rotate(45deg); }
.pageFilterDate { display: flex; align-items: center; gap: 10px; }
.pageFilterDateInput { padding: 8px 14px; font-size: 14px; border: 1px solid #ddd; border-radius: 8px; outline: none; }
.pageFilterDateSep { color: #888; }

/* ========================================
   介绍区域 (Only Shop / Gratte)
   ======================================== */
.pageIntro { padding: 0 0 50px; }
.pageIntroContent { display: flex; align-items: center; gap: 40px; background: linear-gradient(135deg, #e8f4fd, #fdf2f8); border-radius: 20px; padding: clamp(30px, 4vw, 60px); }
.pageIntroTitle { font-size: clamp(24px, 2.5vw, 40px); font-weight: 900; color: #00a0e9; line-height: 1.2; text-transform: uppercase; flex-shrink: 0; }
.pageIntroText { flex: 1; }
.pageIntroText p { font-size: clamp(14px, 1vw, 16px); color: #555; line-height: 1.8; margin-bottom: 8px; }
.pageIntroImage { flex-shrink: 0; width: clamp(150px, 15vw, 240px); }
.pageIntroImage img { width: 100%; }

/* ========================================
   专题特辑 — Special Archive
   ======================================== */
.specialArchiveHero { padding: clamp(5px, 2vw, 20px) 0 clamp(20px, 3vw, 40px); }
.specialArchiveHero .headline { margin-bottom: 0; }
.specialArchiveHero .headlineLv1 .is-en {
  display: block;
  font-size: clamp(34px, 10.67vw, 46px);
  font-weight: bold;
}
.specialArchiveHero .headlineLv1 .is-ja {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 3.73vw, 16px);
  color: #232729;
}
@media (min-width: 768px) {
  .specialArchiveHero .headlineLv1 .is-en {
    font-size: clamp(45px, 5.87vw, 60px);
  }
  .specialArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(12px, 1.56vw, 16px);
  }
}
@media (min-width: 1024px) {
  .specialArchiveHero .headlineLv1 .is-en {
    font-size: clamp(64px, 5vw, 80px);
  }
  .specialArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(13px, 1vw, 16px);
  }
}

.specialArchiveHeroText {
  margin-top: clamp(8px, 2vw, 25px);
}
.specialArchiveHeroText p {
  font-size: clamp(12px, 3.73vw, 14px);
  line-height: 1.8;
}
@media (min-width: 768px) {
  .specialArchiveHeroText {
    margin-top: clamp(8px, 1vw, 15px);
  }
}

.specialArchiveContent {
  margin-top: clamp(0px, 1.5vw, 10px);
}
@media (min-width: 768px) {
  .specialArchiveContent {
    margin-top: clamp(5px, 1vw, 10px);
  }
}

.specialArchiveItems {
  display: flex;
  flex-wrap: wrap;
}
.specialArchiveItem {
  width: 47.76%;
  margin-top: clamp(17px, 5.33vw, 41px);
  margin-right: 4.48%;
}
.specialArchiveItem:nth-of-type(even) { margin-right: 0; }
.specialArchiveItem:nth-of-type(1),
.specialArchiveItem:nth-of-type(2) { margin-top: 0; }

.specialArchiveItemLink {
  display: block;
  text-decoration: none;
  color: inherit;
}

.specialArchiveItemImage {
  overflow: hidden;
  border-radius: 12px;
}
.specialArchiveItemImage .specialArchiveItemPic {
  aspect-ratio: 1.416/1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0f0f0;
}
.specialArchiveItemImage .specialArchiveItemPic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s;
}
.specialArchiveItemImage .specialArchiveItemPic::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: .1;
  transform: scale(1.15) translateZ(0);
}
.specialArchiveItemImage .specialArchiveItemPic::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.3) 60%, transparent 100%);
  animation: shimmer 2s infinite;
  z-index: 0;
}
.specialArchiveItemLink:hover .specialArchiveItemImage img {
  transform: scale(1.1);
}

.specialArchiveItemText {
  margin-top: 15px;
  font-size: clamp(12px, 3.73vw, 16px);
  font-weight: bold;
}
.specialArchiveItemText span {
  position: relative;
}
.specialArchiveItemText span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s;
}
.specialArchiveItemLink:hover .specialArchiveItemText span::after {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .specialArchiveItem {
    width: min(400px, 31.25%);
    margin-top: clamp(30px, 3.91vw, 40px);
    margin-right: min(40px, 3.125%);
  }
  .specialArchiveItem:nth-of-type(even) { margin-right: min(40px, 3.125%); }
  .specialArchiveItem:nth-of-type(3n) { margin-right: 0; }
  .specialArchiveItem:nth-of-type(1),
  .specialArchiveItem:nth-of-type(2),
  .specialArchiveItem:nth-of-type(3) { margin-top: 0; }
  .specialArchiveItemImage .specialArchiveItemPic::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  .specialArchiveItemText {
    font-size: clamp(15px, 1.96vw, 20px);
  }
}

@media (min-width: 1024px) {
  .specialArchiveItemText {
    font-size: clamp(16px, 1.25vw, 20px);
  }
}

/* ========================================
   新闻列表
   ======================================== */
.pageNewsList { padding: 0 0 60px; }

/* ========================================
   企业信息 — 原站 companyArchive 结构
   ======================================== */

/* Hero */
.companyArchiveHero .headlineLv1 { margin-top: clamp(5px, 2vw, 20px); }
.companyArchiveHero .is-en {
  display: block;
  font-size: clamp(34.13px, 10.667vw, 45.87px);
  font-weight: 600;
  color: #232729;
  letter-spacing: .02em;
}
.companyArchiveHero .is-ja {
  display: block;
  font-size: clamp(11.95px, 3.733vw, 16.05px);
  font-weight: 400;
  color: #232729;
}

/* 公司简介 Section — 原站: 外层白底, 内层灰底 */
.companyArchiveInfo { background: #fff; }
.companyArchiveInfoInner {
  padding-block: clamp(51.2px, 16vw, 122.88px);
  background: #eff2f5;
  border-top-left-radius: clamp(25.6px, 8vw, 61.44px);
  border-top-right-radius: clamp(25.6px, 8vw, 61.44px);
}

/* Section Title — 原站无下划线 */
.headlineLv2 { margin-bottom: clamp(25px, 3vw, 40px); }
.headlineLv2 span {
  font-size: clamp(17.07px, 5.33vw, 22.93px);
  font-weight: 700;
  color: #232729;
}

/* Info Table (dl grid) */
.companyArchiveInfoTable {
  border-top: 2px solid #232729;
  padding-top: clamp(30px, 4vw, 50px);
}
.companyArchiveInfoTable dl {
  display: flex;
  border-bottom: 1px solid #fff;
  margin: 0;
}
.companyArchiveInfoTable dt {
  width: clamp(100px, 14vw, 200px);
  padding: clamp(12px, 1.5vw, 20px);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  color: #555;
  background: #eff2f5;
  flex-shrink: 0;
}
.companyArchiveInfoTable dd {
  flex: 1;
  padding: clamp(12px, 1.5vw, 20px);
  font-size: clamp(13px, 1.1vw, 15px);
  color: #232729;
  line-height: 1.8;
}
.companyArchiveInfoTable dd a { color: #385eaa; text-decoration: none; }
.companyArchiveInfoTable dd a:hover { text-decoration: underline; }

/* Link Cards — 原站: 白底卡片 + 蓝色圆形 iconfont 箭头 */
.companyArchiveInfoLinks {
  display: grid;
  gap: clamp(8.53px, 2.667vw, 20.48px);
  margin-top: clamp(51.2px, 16vw, 122.88px);
}
.companyArchiveInfoLink a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: clamp(17.07px, 5.333vw, 40.96px);
  background: #fff;
  border: 2px solid #e4e8eb;
  border-radius: 20px;
  text-decoration: none;
}
.companyArchiveInfoWrap { flex: 1; }
.companyArchiveInfoLinkTitle {
  font-size: clamp(15.36px, 4.8vw, 20.64px);
  font-weight: bold;
  color: #232729;
}
.companyArchiveInfoLinkText {
  margin-top: 5px;
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  color: #888;
  line-height: 1.6;
}
.companyArchiveInfoLink a i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 15px;
}
.companyArchiveInfoLink a i::before {
  font-family: iconfont !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  position: absolute;
  z-index: 1;
  display: inline-block;
  font-size: 9px;
  color: #fff;
  content: "\f130";
  vertical-align: middle;
}
.companyArchiveInfoLink a i::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  content: "";
  background: #46c3e7;
  border-radius: 50%;
  transition: transform .3s;
}
/* Tablet+ */
@media (min-width: 768px) {
  .companyArchiveInfoLinks {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(15.01px, 1.955vw, 31.28px);
    justify-content: space-between;
    margin-top: clamp(75.07px, 9.775vw, 100px);
  }
  .companyArchiveInfoLink { width: 100%; height: 100%; }
  .companyArchiveInfoLink a {
    padding: clamp(30.03px, 3.91vw, 40px);
    border-radius: 30px;
  }
  .companyArchiveInfoLink a i { width: 40px; height: 40px; }
  .companyArchiveInfoLink a i::before { font-size: 12px; }
  .companyArchiveInfoLink a i::after { width: 40px; height: 40px; }
  .companyArchiveInfoLinkTitle { font-size: clamp(16.52px, 2.151vw, 22px); }
  .companyArchiveInfoLinkText { font-size: clamp(10.51px, 1.369vw, 14px); }
}
/* Desktop */
@media (min-width: 1024px) {
  .companyArchiveInfoLink a:hover i::after { transition: transform .3s; transform: scale(1.3); }
  .companyArchiveInfoLinkTitle { font-size: clamp(17.6px, 1.375vw, 22px); }
  .companyArchiveInfoLinkText { font-size: clamp(14px, .875vw, 14px); }
}

/* 集团公司 Section — 原站: 外层灰底, 内层白底 */
.companyArchiveGroup { background: #eff2f5; }
.companyArchiveGroupInner {
  padding-top: clamp(51.2px, 16vw, 122.88px);
  padding-bottom: clamp(25px, 3vw, 40px);
  background: #fff;
  border-top-left-radius: clamp(25.6px, 8vw, 61.44px);
  border-top-right-radius: clamp(25.6px, 8vw, 61.44px);
}
.companyArchiveGroupItems {
  display: flex;
  flex-wrap: wrap;
}
.companyArchiveGroupItem {
  width: 47.76%;
  margin-right: 4.48%;
  margin-top: clamp(16px, 2vw, 24px);
}
.companyArchiveGroupItem:nth-of-type(even) { margin-right: 0; }
.companyArchiveGroupItem a { display: block; text-decoration: none; }
.companyArchiveGroupItemImage { overflow: hidden; border-radius: 12px; }
.companyArchiveGroupItemPic {
  aspect-ratio: 16/9;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid #e4e8eb;
  border-radius: 20px;
}
.companyArchiveGroupItemPic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s;
}
.companyArchiveGroupItemPic::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: .1;
  transform: scale(1.15) translateZ(0);
}
.companyArchiveGroupItem a:hover .companyArchiveGroupItemPic img { transform: scale(1.1); }
.companyArchiveGroupItemName {
  margin-top: clamp(10px, 1.5vw, 16px);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  color: #232729;
  text-align: center;
  line-height: 1.4;
}

/* Tablet */
@media (min-width: 768px) {
  .companyArchiveHero .is-en { font-size: clamp(45px, 5.87vw, 60px); }
  .companyArchiveHero .is-ja { font-size: clamp(12px, 1.56vw, 16px); }

  .companyArchiveGroupItem { width: 31.25%; margin-right: 3.125%; }
  .companyArchiveGroupItem:nth-of-type(even) { margin-right: 3.125%; }
  .companyArchiveGroupItem:nth-of-type(3n) { margin-right: 0; }

  .companyArchiveInfoTable dl { display: flex; }
}

/* Desktop — 原站: 4列 */
@media (min-width: 1024px) {
  .companyArchiveHero .is-en { font-size: clamp(64px, 5vw, 80px); }
  .companyArchiveHero .is-ja { font-size: clamp(12px, 1.56vw, 16px); }

  .companyArchiveGroupItem { width: 22.585%; margin-right: 3.22%; }
  .companyArchiveGroupItem:nth-of-type(3n) { margin-right: 3.22%; }
  .companyArchiveGroupItem:nth-of-type(4n) { margin-right: 0; }

  .companyArchiveInfoTable dt { width: clamp(160px, 18vw, 250px); }
}

/* ========================================
   招聘信息
   ======================================== */
.recruitHero .headlineLv1 { margin-top: clamp(5px, 2vw, 20px); }
.recruitHero .is-en {
  display: block;
  font-size: clamp(34.13px, 10.667vw, 45.87px);
  font-weight: 600;
  color: #232729;
  letter-spacing: .02em;
}
.recruitHero .is-ja {
  display: block;
  font-size: clamp(11.95px, 3.733vw, 16.05px);
  font-weight: 400;
  color: #232729;
}

.recruitContent { background: #fff; padding-bottom: clamp(30px, 4vw, 60px); }
.recruitBottom { background: #eff2f5; }
.recruitBottomInner {
  padding-top: clamp(40px, 6vw, 80px);
  background: #fff;
  border-top-left-radius: clamp(25.6px, 8vw, 61.44px);
  border-top-right-radius: clamp(25.6px, 8vw, 61.44px);
}
.recruitContentInner {
  padding-block: clamp(51.2px, 16vw, 122.88px);
  background: #eff2f5;
  border-top-left-radius: clamp(25.6px, 8vw, 61.44px);
  border-top-right-radius: clamp(25.6px, 8vw, 61.44px);
}

/* Section headings */
.recruitSection + .recruitSection { margin-top: clamp(40px, 6vw, 80px); }
.recruitSectionTitle {
  margin-bottom: clamp(20px, 3vw, 36px);
  font-size: clamp(17.07px, 5.33vw, 22.93px);
  font-weight: 700;
  color: #232729;
}

/* Job card grid */
.recruitJobs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8.53px, 2.667vw, 16px);
}
.recruitJobCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 3vw, 24px);
  background: #fff;
  border: 2px solid #e4e8eb;
  border-radius: 12px;
  text-decoration: none;
  transition: background .3s;
}
.recruitJobCard:hover { background: #f9fafb; }
.recruitJobCardInner { flex: 1; }
.recruitJobCardCompany {
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: bold;
  color: #232729;
}
.recruitJobCardPosition {
  margin-top: 4px;
  font-size: clamp(11px, .9vw, 13px);
  color: #888;
}
.recruitJobCard i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 12px;
}
.recruitJobCard i::before {
  font-family: iconfont !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  position: absolute;
  z-index: 1;
  font-size: 8px;
  color: #fff;
  content: "\f130";
}
.recruitJobCard i::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 26px;
  height: 26px;
  content: "";
  background: #46c3e7;
  border-radius: 50%;
  transition: transform .3s;
}

/* Section more link */
.recruitSectionMore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 36px);
  padding: clamp(12px, 2vw, 18px);
  font-size: clamp(12px, 1vw, 14px);
  color: #385eaa;
  text-decoration: none;
  border: 1px solid #e4e8eb;
  border-radius: 60px;
}
.recruitSectionMore i {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}
.recruitSectionMore i::before {
  font-family: iconfont !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size: 10px;
  color: #385eaa;
  content: "\f130";
}

@media (min-width: 768px) {
  .recruitHero .is-en { font-size: clamp(45px, 5.87vw, 60px); }
  .recruitHero .is-ja { font-size: clamp(12px, 1.56vw, 16px); }
  .recruitJobs { grid-template-columns: repeat(2, 1fr); }
  .recruitJobCard { border-radius: 16px; padding: clamp(16px, 2vw, 28px); }
  .recruitJobCard i, .recruitJobCard i::after { width: 30px; height: 30px; }
  .recruitJobCard i::before { font-size: 9px; }
}

@media (min-width: 1024px) {
  .recruitHero .is-en { font-size: clamp(64px, 5vw, 80px); }
  .recruitJobs { grid-template-columns: repeat(3, 1fr); }
  .recruitJobCard:hover i::after { transform: scale(1.3); }
}

/* ========================================
   分页
   ======================================== */
.pagePagination { padding: 40px 0 20px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pagination a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 14px; color: #555; background: #f5f6f8; border-radius: 50%; text-decoration: none; transition: .3s; }
.pagination a.active, .pagination a:hover { background: #00a0e9; color: #fff; }
.paginationPrev::after, .paginationNext::after { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; }
.paginationPrev::after { border-left: 2px solid currentColor; transform: rotate(-45deg); margin-left: 2px; }
.paginationNext::after { border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: 2px; }

/* 空状态 */
.pageEmpty { text-align: center; padding: 60px 20px; font-size: 14px; color: #aaa; }

/* ========================================
   响应式 - 平板
   ======================================== */
@media (max-width: 1023px) {
  .pageCardGrid { grid-template-columns: repeat(2, 1fr); }
  .pageCardGrid--special { grid-template-columns: repeat(3, 1fr); }
  .pageCompanyGrid { grid-template-columns: repeat(3, 1fr); }
  .pageIntroContent { flex-direction: column; text-align: center; }
  .pageIntroTitle { text-align: center; }
  .pageIntroImage { width: 180px; }
  .pageCompanyLabel { width: 120px; }
  .shopTopSearchUpper { flex-direction: column; }
  .areaSearchChina--pc .areaSearchChina_block { position: static; margin-bottom: 12px; border-radius: 10px; border: 1px solid #e4e8eb; }
  .areaSearchChina--pc .areaSearchChina_image { display: none; }
  .areaSearchChina--pc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .areaSearchChina--pc.active { display: grid; }
  .areaSearchChina_top { display: contents; }
  .shopCard { flex-wrap: wrap; }
  .shopCardButtons { width: 100%; justify-content: flex-end; }
}

/* ========================================
   响应式 - 手机
   ======================================== */


/* ========================================
   单篇文章页
   ======================================== */
.pageSingle { padding: 30px 0 60px; }
.pageSingleHeader { margin-bottom: 30px; }
.pageSingleMeta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pageSingleDate { font-size: 14px; color: #aaa; }
.pageSingleCategory { font-size: 12px; color: #00a0e9; border: 1px solid #00a0e9; padding: 4px 12px; border-radius: 20px; text-decoration: none; }
.pageSingleCategory:hover { background: #00a0e9; color: #fff; }
.pageSingleTitle { font-size: clamp(22px, 2vw, 32px); font-weight: 700; color: #232729; line-height: 1.4; }
.pageSingleArea { font-size: 13px; color: #00a0e9; margin-bottom: 20px; padding: 8px 16px; background: #e8f4fd; border-radius: 8px; display: inline-block; }
.pageSingleInfo { background: #f9fafb; border-radius: 12px; padding: 20px; margin-bottom: 30px; }
.pageSingleInfoRow { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid #eff2f5; font-size: 14px; color: #555; }
.pageSingleInfoRow:last-child { border-bottom: none; }
.pageSingleInfoLabel { font-weight: 700; color: #232729; min-width: 80px; }
.pageSinglePeriod { font-size: 14px; color: #00a0e9; margin-bottom: 30px; padding: 12px 20px; background: #e8f4fd; border-radius: 8px; display: inline-block; }
.pageSingleImage { width: 100%; max-height: 500px; overflow: hidden; border-radius: 12px; margin-bottom: 30px; }
.pageSingleImage img { width: 100%; height: auto; object-fit: cover; }
.pageSingleContent { font-size: 15px; color: #555; line-height: 2; }
.pageSingleContent p { margin-bottom: 16px; }
.pageSingleContent img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.pageSingleBack { padding: 40px 0 20px; border-top: 1px solid #eff2f5; margin-top: 40px; }

/* ========================================
   通知归档页 — 对标准站 news 页结构
   ======================================== */

/* Hero — 对标准站: 大英文 + 小中文带黄点 */
.newsDetailHero {
  padding: clamp(100px, 7.5vw, 120px) 0 clamp(16px, 3vw, 24px);
}
@media only screen and (min-width: 768px) {
  .newsDetailHero .headlineLv1 .is-en { font-size: clamp(45px, 5.87vw, 60px); }
  .newsDetailHero .headlineLv1 .is-ja { font-size: clamp(14px, 1.76vw, 18px); }
}
@media only screen and (min-width: 1024px) {
  .newsDetailHero .headlineLv1 .is-en { font-size: clamp(64px, 5vw, 80px); }
  .newsDetailHero .headlineLv1 .is-ja { font-size: clamp(14px, 1.125vw, 18px); }
}
.newsDetailHero .headline { margin-bottom: 0; }
.newsDetailHero .headlineLv1 .is-en {
  display: block;
  font-size: clamp(34px, 10.67vw, 46px);
  font-weight: bold;
}
.newsDetailHero .headlineLv1 .is-ja {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 3.73vw, 16px);
  color: #232729;
}
.newsDetailHero .headlineLv1 .is-ja::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  content: "";
  background: #fabf03;
}

.newsArchiveHero {
  padding: clamp(100px, 7.5vw, 120px) 0 clamp(16px, 3vw, 24px);
}
.newsArchiveHero .headline { margin-bottom: 0; }
.newsArchiveHero .headlineLv1 .is-en {
  display: block;
  font-size: clamp(34px, 10.67vw, 46px);
  font-weight: bold;
}
.newsArchiveHero .headlineLv1 .is-ja {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 3.73vw, 16px);
  color: #232729;
}
.newsArchiveHero .headlineLv1 .is-ja::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  content: "";
  background: #fabf03;
}

/* 面包屑 (bcs) — 对标准站 */
.bcs { height: 22px; }
.bcsLinks {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.bcsLink {
  position: relative;
  top: 0;
  left: 0;
  display: inline;
  font-size: 12px;
}
.bcsLink.current { pointer-events: none; }
.bcsLink.current::after { display: none; }
.bcsLink + .bcsLink { margin-left: 20px; }
.bcsLink::after {
  position: absolute;
  top: 50%;
  right: -5px;
  display: inline-block;
  width: 10px;
  height: 1px;
  content: "";
  background: #999;
  transform: translateX(100%);
}
.bcsLink a {
  display: inline-block;
  padding-block: 5px;
  color: #999;
  text-decoration: none;
  transition: color .1s;
}
.bcsLink a:hover { color: #232729; }
@media (min-width: 768px) {
  .bcs {
    position: relative;
    z-index: 1;
    order: 2;
    width: clamp(450px, 58.65vw, 938px);
    height: 32px;
    margin-top: -35px;
    margin-left: auto;
  }
  .bcsLinks { text-align: right; }
  .bcsLink a { padding-block: 10px; }
  [data-page=gratte-detail] .bcs,[data-page=onlyshop-detail] .bcs{order:0;margin-top:0}
}
@media (min-width: 1024px) {
  .bcsLink a span { position: relative; }
  .bcsLink a span::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #232729;
    transition: transform .3s;
    transform: scaleX(0);
    transform-origin: right;
  }
  .bcsLink a:hover span::after { transform: scaleX(1); }
}
@media (min-width: 768px) {
  .newsArchiveHero .headlineLv1 .is-en {
    font-size: clamp(45px, 5.87vw, 60px);
  }
  .newsArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(14px, 1.76vw, 18px);
  }
  .newsArchiveHero .headlineLv1 .is-ja::before {
    width: 15px;
    height: 14px;
    margin-right: 10px;
  }
}
@media (min-width: 1024px) {
  .newsArchiveHero .headlineLv1 .is-en {
    font-size: clamp(64px, 5vw, 80px);
  }
  .newsArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(14px, 1.125vw, 18px);
  }
}

/* ========================================
   通知归档页 — 像素级对标准站 news 页
   ======================================== */

/* --- 筛选表单 --- */
.newsSearch {
  padding: 20px;
  background: #eff2f5;
  border-radius: 20px;
}
.newsSearchUpper { margin-bottom: 0; }
.newsSearchContent { display: flex; align-items: center; }
.newsSearchContent + .newsSearchContent { margin-top: 10px; }
.newsSearchTitle {
  flex-shrink: 0;
  min-width: 66px;
  margin-right: 10px;
  font-size: clamp(12px, 3.73vw, 16px);
  font-weight: bold;
  color: #232729;
}
.newsSearchPulldown { width: 100%; }
.newsSearchPulldownInner { position: relative; width: 100%; }
.newsSearchPulldownInner::before {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 2;
  font-size: 15px;
  pointer-events: none;
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: translateY(-70%) rotate(45deg);
}
.newsSearch input,
.newsSearch select {
  width: 100%;
  height: 40px;
  padding-inline: 20px;
  font-size: 14px;
  color: #232729;
  background: #fff;
  border: none;
  border-radius: 60px;
  outline: none;
  appearance: none;
}
.newsSearchSubmit {
  width: 100%;
  height: 50px;
  margin: 20px auto 0;
}
.newsSearchSubmit button {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #232729;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: background .3s;
}
.newsSearchSubmit button:hover { background: #00a0e9; }

/* --- newsArchiveContent --- */
.newsArchiveContent {
  margin-top: clamp(5px, 2vw, 21px);
}

/* --- 卡片列表 --- */
.newsLists {
  margin-top: clamp(5px, 2vw, 21px);
}
.newsList {
  position: relative;
  padding-block: clamp(26px, 8vw, 61px);
  border-bottom: 1px solid #eff2f5;
}
.newsListLink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.newsListImage {
  flex-shrink: 0;
  pointer-events: none;
  transition: transform .3s;
}
.newsListImage picture {
  aspect-ratio: 4/3;
  pointer-events: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.newsListImage picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.newsListImageDummy {
  aspect-ratio: 4/3;
  background: #e8ebef;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsListInfo {
  position: relative;
  z-index: 1;
  margin-top: clamp(17px, 5.33vw, 41px);
  pointer-events: none;
  transition: transform .3s;
}
.newsListInfoUpper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.newsListInfoDate {
  margin-right: clamp(9px, 2.67vw, 20px);
  font-size: clamp(10px, 3.2vw, 14px);
  color: #aaa;
  letter-spacing: .03em;
  pointer-events: none;
  white-space: nowrap;
}
.newsListInfoCategory {
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.newsListInfoCategory a {
  position: relative;
  z-index: 4;
  display: block;
  padding: 3px 18px;
  font-size: clamp(9px, 2.67vw, 11px);
  font-weight: bold;
  pointer-events: all;
  color: #232729;
  background: #e4e8eb;
  border: 2px solid transparent;
  border-radius: 60px;
  text-decoration: none;
  transition: border-color .3s;
}
.newsListInfoLower {
  margin-top: min(30px, 1.875vw);
  pointer-events: none;
}
.newsListInfoTitle {
  margin-top: max(10px, 2.67vw);
  font-size: clamp(12px, 3.73vw, 16px);
  font-weight: bold;
  color: #232729;
  pointer-events: none;
}
.newsListInfoText {
  display: none;
  pointer-events: none;
}

/* 店铺标签 */
.newsListInfo .shopTags {
  padding-top: clamp(9px, 2.67vw, 20px);
  list-style: none;
  margin: 0;
}
.shopTags {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.shopTags li { list-style: none; }
.shopTags li a {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  color: #555;
  background: #f0f2f5;
  border-radius: 4px;
  text-decoration: none;
  pointer-events: all;
  transition: background .2s;
}
.shopTags li a:hover { background: #e4e8eb; }

/* --- 空状态 --- */
.newsListEmpty { text-align: center; padding: 80px 0; font-size: 15px; color: #aaa; }

/* --- 分页 --- */
.paging { padding: clamp(40px, 5vw, 80px) 0; }
.paging_wrap { display: flex; align-items: center; justify-content: center; }
.paging_arrow a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #e4e8eb;
  border-radius: 60px;
  transition: border-color .3s;
}
.paging_arrow a:hover { border-color: #232729; }
.paging_arrow[data-dir=next] a { margin-left: .4375vw; }
.paging_arrow[data-dir=prev] a { margin-right: .4375vw; }
.paging_arrow a::before {
  font-size: 12px;
  color: #555;
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  content: '';
}
.paging_arrow[data-dir=prev] a::before { transform: rotate(135deg); }
.paging_arrow[data-dir=next] a::before { transform: rotate(-45deg); }
.paging_numbers { display: flex; align-items: center; gap: 4px; }
.paging_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  border-radius: 60px;
  transition: background .3s, color .3s;
}
.paging_num:hover { background: #f0f2f5; }
.paging_num.is-current { background: #232729; color: #fff; }

/* wp-pagenavi 分页（原站 animate 风格：数字默认无框，悬停出灰圈，当前页黑底白字） */
.paging .wp-pagenavi{display:flex;align-items:center;justify-content:center}
.paging .page{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;margin-inline:.3125vw;font-size:clamp(10.24px,3.2vw,13.76px);font-weight:700;border:2px solid transparent;border-radius:60px;text-decoration:none;color:#555;transition:border-color .3s}
.paging .page:hover{border:2px solid #e4e8eb}
.paging .current{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;font-weight:700;color:#fff;background:#232729;border-radius:60px;text-decoration:none}
.paging .extend{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;color:#bbb;font-size:14px}

/* ========================================
   通知页 — Tablet (768px+)
   ======================================== */
@media (min-width: 768px) {
  /* 筛选 */
  .newsSearch { padding: 30px; border-radius: 30px; }
  .newsSearchUpper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .newsSearchContent { width: 32%; margin-right: min(10px, .625vw); }
  .newsSearchContent + .newsSearchContent { margin-top: 0; }
  .newsSearchContent:last-of-type { margin-right: 0; }
  .newsSearchTitle {
    min-width: auto;
    font-size: clamp(12px, 1.56vw, 16px);
  }
  .newsSearch input,
  .newsSearch select { height: 50px; }
  .newsSearchSubmit { max-width: 300px; margin: 30px auto 0; }

  /* Hero */
  .newsArchiveHero .headlineLv1 .is-en {
    font-size: clamp(45px, 5.87vw, 60px);
  }
  .newsArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(14px, 1.76vw, 18px);
  }
  .newsArchiveHero .headlineLv1 .is-ja::before {
    width: 15px;
    height: 14px;
    margin-right: 10px;
  }

  /* 内容 */
  .newsArchiveContent {
    margin-top: clamp(10px, 2vw, 20px);
  }

  /* 卡片 */
  .newsLists {
    margin-top: clamp(10px, 2vw, 20px);
  }
  .newsList {
    display: flex;
    padding-block: clamp(30px, 3.91vw, 40px);
    padding-right: 15px;
  }
  .newsListImage {
    max-width: 240px;
    margin-right: min(40px, 2.5vw);
  }
  .newsListInfo { margin-top: 0; }
  .newsListInfoDate {
    margin-right: clamp(19px, 2.44vw, 25px);
    font-size: clamp(11px, 1.37vw, 14px);
  }
  .newsListInfoCategory a {
    font-size: clamp(9px, 1.17vw, 12px);
  }
  .newsListInfoLower {
    margin-top: min(30px, 1.875vw);
  }
  .newsListInfoTitle {
    margin-top: 0;
    font-size: clamp(14px, 1.76vw, 18px);
  }
  .newsListInfoText {
    display: -webkit-box;
    margin-top: min(20px, 1.25vw);
    overflow: hidden;
    font-size: 14px;
    color: #888;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .newsListInfo .shopTags {
    padding-top: clamp(15px, 1.96vw, 20px);
  }

  /* 面包屑 */
  .bcs {
    position: relative;
    z-index: 1;
    order: 2;
    width: 100%;
    height: 32px;
    margin-top: -3px;
  }
  .bcsLinks { text-align: right; }
  .bcsLink a { padding-block: 10px; }
}

/* ========================================
   通知页 — Desktop (1024px+)
   ======================================== */
@media (min-width: 1024px) {
  .newsSearch { padding: 30px 47px; }

  /* Hero */
  .newsArchiveHero .headlineLv1 .is-en {
    font-size: clamp(64px, 5vw, 80px);
  }
  .newsArchiveHero .headlineLv1 .is-ja {
    font-size: clamp(14px, 1.125vw, 18px);
  }

  /* 卡片 hover */
  .newsListLink::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #232729;
    transition: transform .3s;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .newsListLink:hover::after { transform: scaleX(1); }
  .newsListLink:hover ~ .newsListImage {
    transition: all .3s;
    transform: translateX(15px);
  }
  .newsListLink:hover ~ .newsListInfo {
    transition: all .3s;
    transform: translateX(15px);
  }

  .newsListInfoDate { font-size: clamp(14px, .875vw, 14px); }
  .newsListInfoCategory a { font-size: clamp(12px, .75vw, 12px); }
  .newsListInfoCategory a:hover { border-color: #232729; }
  .newsListInfoTitle { font-size: clamp(14px, 1.125vw, 18px); }

  /* 面包屑 hover */
  .bcsLink a span { position: relative; }
  .bcsLink a span::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #232729;
    transition: transform .3s;
    transform: scaleX(0);
    transform-origin: right;
  }
  .bcsLink a:hover span::after { transform: scaleX(1); }
}

/* ========================================
   通知页 — Mobile (< 768px)
   ======================================== */


/* ========================================
   主题商店 / Gratte — Hero
   ======================================== */
.gr-osArchiveHero {
  padding: 0;
}
.gr-osArchiveHero .headlineLv1 .is-en {
  display: block;
  font-size: clamp(34px, 10.67vw, 46px);
  font-weight: bold;
}
.gr-osArchiveHero .headlineLv1 .is-ja {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 3.73vw, 16px);
  color: #232729;
}
.gr-osArchiveHero .headlineLv1 .is-ja::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  content: "";
  background: #fabf03;
}

/* ========================================
   主题商店 — 顶部轮播
   ======================================== */
.onlyshopTopSlider {
  padding-block: clamp(34px, 10.67vw, 82px);
  margin-top: clamp(5px, 2vw, 21px);
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border-radius: 50px;
  opacity: 0;
  transition: transform .5s, opacity .5s;
  transform: translate(30px, 30px);
}
.onlyshopTopSlider.inview {
  opacity: 1;
  transform: translate(0, 0);
}
.onlyshopTopSlider .slider {
  max-width: 100%;
  overflow: hidden;
}

/* Slide 宽度 — 匹配原站 perPage=3 focus center */
.splide[data-js="gr-os-slider"] .splide__slide {
  display: flex;
  width: max(335px, 89.3333vw);
}
@media (min-width: 768px) {
  .splide[data-js="gr-os-slider"] .splide__slide {
    width: min(600px, 53.7109375vw);
  }
}
@media (min-width: 1024px) {
  .splide[data-js="gr-os-slider"] .splide__slide {
    width: min(600px, 37.5vw);
  }
}

/* 图片区域 */
.splide[data-js="gr-os-slider"] .splide__slide picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1.416/1;
}
.splide[data-js="gr-os-slider"] .splide__slide picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 背景模糊效果 */
.splide[data-js="gr-os-slider"] .splide__slide picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: .1;
  transform: scale(1.15) translateZ(0);
}


.onlyshopTopSliderLink {
  display: block;
  width: 100%;
}
.onlyshopTopSliderLink picture,
.onlyshopTopSliderLink img {
  display: block;
  width: 100%;
}

/* Track */
.splide[data-js="gr-os-slider"] .splide__track {
  position: relative;
}

/* 箭头 — 黄色半圆 */
.splide[data-js="gr-os-slider"] .splide__arrows {
  display: block;
}
.splide[data-js="gr-os-slider"] .splide__arrow {
  position: absolute;
  top: 50%;
  display: none;
  width: min(80px, 5vw);
  height: min(80px, 5vw);
  background: #fabf03;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .splide[data-js="gr-os-slider"] .splide__arrow {
    display: block;
  }
}
.splide[data-js="gr-os-slider"] .splide__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #fabf03;
  transition: transform .3s;
}
@media (min-width: 1024px) {
  .splide[data-js="gr-os-slider"] .splide__arrow:hover::after {
    transform: scale(1.3);
  }
}
.splide[data-js="gr-os-slider"] .splide__arrow--prev {
  left: 0;
  border-radius: 0 60px 60px 0;
}
.splide[data-js="gr-os-slider"] .splide__arrow--prev::after {
  border-radius: 0 60px 60px 0;
}
.splide[data-js="gr-os-slider"] .splide__arrow--next {
  right: 0;
  border-radius: 60px 0 0 60px;
}
.splide[data-js="gr-os-slider"] .splide__arrow--next::after {
  border-radius: 60px 0 0 60px;
}
.splide[data-js="gr-os-slider"] .splide__arrow i {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #fff;
}

/* 分页圆点 */
.splide[data-js="gr-os-slider"] .splide__pagination {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0;
  padding: 0;
  list-style: none;
}
.splide[data-js="gr-os-slider"] .splide__pagination__page {
  width: 10px;
  height: 10px;
  margin-inline: 8px;
  margin-top: max(20px, 5.3333vw);
  border: none;
  border-radius: 100%;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
@media (min-width: 768px) {
  .splide[data-js="gr-os-slider"] .splide__pagination__page {
    width: 12px;
    height: 12px;
    margin-inline: 10px;
    margin-top: min(30px, 1.875vw);
  }
}
.splide[data-js="gr-os-slider"] .splide__pagination__page.is-active {
  background: #385eab;
}
.onlyshopTopSlider .splide__pagination__page.is-active {
  background: #232729;
}

/* 分页圆点落到蓝色胶囊体上 — 取消 absolute 让分页自然排在图片下方 */
.onlyshopTopSlider .splide__pagination,
.gratteTopSlider .splide__pagination {
  position: static;
}

/* ========================================
   主题商店 — Intro 介绍区
   ======================================== */
.onlyshopTopIntro {
  background: #eff2f5;
  padding-top: calc(13.125vw + 105px);
  margin-top: -105px;
}
.onlyshopTopIntroInner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-bottom: clamp(200px, 20vw, 400px);
}
.onlyshopTopIntroBgtext {
  position: absolute;
  top: -65px;
  left: -70px;
  font-size: clamp(63px, 8.21vw, 84px);
  font-weight: bold;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
  opacity: 0;
  transform: translateY(40px);
}
.onlyshopTopIntroBgtext.inview {
  opacity: 1;
  transition: transform .5s, opacity .5s;
  transform: translateY(0);
}
.onlyshopTopIntroInfo {
  position: relative;
  z-index: 1;
  flex: 1;
  opacity: 0;
  transform: translateY(40px);
}
.onlyshopTopIntroInfo.inview {
  opacity: 1;
  transition: transform .5s, opacity .5s;
  transition-delay: .2s;
  transform: translateY(0);
}
.onlyshopTopIntroTitle {
  font-size: clamp(26px, 3.32vw, 34px);
  font-weight: bold;
}
.onlyshopTopIntroText {
  margin-top: clamp(30px, 3.91vw, 40px);
}
.onlyshopTopIntroText p {
  font-size: clamp(12px, 1.56vw, 16px);
  color: #555;
  line-height: 2;
}
.onlyshopTopIntroImage {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  max-width: 490px;
  width: clamp(239px, 74.67vw, 490px);
  margin-top: -105px;
  opacity: 0;
  transform: scale(1.2);
}
.onlyshopTopIntroImage.inview {
  opacity: 1;
  transition: transform .6s, opacity .5s;
  transform: scale(1);
}
.onlyshopTopIntroImage img {
  width: 100%;
  display: block;
}

/* ========================================
   主题商店 — 内容区背景
   ======================================== */
.gr-osArchiveContent {
  position: relative;
  z-index: 3;
  background: #fff;
}
.gr-osArchiveHero + .gr-osArchiveContent {
  margin-top: clamp(5px, 2vw, 21px);
}
.gr-osArchiveContentBackground {
  position: absolute;
  top: max(-200px, -13.3333333333vw);
  left: 50%;
  z-index: -1;
  width: 195.4375vw;
  height: 126.6875vw;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, 100px);
  transition: opacity .8s, transform .8s;
}
.gr-osArchiveContentBackground.inview {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media only screen and (min-width: 768px) {
  .gr-osArchiveContentBackground {
    top: max(-400px, -10.625vw);
  }
}
.gr-osArchiveContent .contentInner {
  position: relative;
  z-index: 1;
}
.gr-osArchiveContent .headlineLv2 {
  padding-right: 170px;
}
.gr-osArchiveContent .headlineLv2 span {
  font-size: clamp(17px, 5.33vw, 23px);
  font-weight: bold;
}

.gr-osHeader {
  background: #e8ecf0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: clamp(17px, 5.33vw, 41px);
}
.gr-osHeader .headlineLv2 {
  padding-right: 0;
}

.headlineLv2 + .gr-osSearch {
  margin-top: clamp(17px, 5.33vw, 41px);
}

/* ========================================
   主题商店 — 搜索表单
   ======================================== */
.gr-osSearch {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.gr-osSearchUpper {
  display: flex;
  align-items: center;
  gap: 16px;
}
.gr-osSearchUpperInner {
  display: flex;
  align-items: center;
  flex: 1;
  background: #fff;
  border-radius: 60px;
  padding: 6px 6px 6px 24px;
}
.gr-osSearchTitle {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  margin-right: 12px;
}
.gr-osSearchFreeBox {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}
.gr-osSearchFreeInput {
  width: 100%;
  height: 40px;
  padding-right: 40px;
  border: none;
  font-size: 14px;
  outline: none;
  background: transparent;
}
.gr-osSearchFreeSubmit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.gr-osSearchFreeSubmit i {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
}
.gr-osSearchFreeSubmit i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border: 2px solid #888;
  border-radius: 50%;
}
.gr-osSearchFreeSubmit i::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 5px;
  height: 2px;
  background: #888;
  transform: rotate(45deg);
}
.gr-osSearchTrigger {
  flex-shrink: 0;
}
.gr-osSearchTrigger > div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #fff;
  border: 2px solid #e4e8eb;
  border-radius: 60px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .3s;
}
.gr-osSearchTrigger > div:hover { border-color: #232729; }
.gr-osSearchTrigger i {
  display: block;
  width: 12px;
  height: 12px;
  position: relative;
}
.gr-osSearchTrigger i::before,
.gr-osSearchTrigger i::after {
  content: "";
  position: absolute;
  background: #232729;
}
.gr-osSearchTrigger i::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}
.gr-osSearchTrigger i::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}
.gr-osSearchTrigger.is-open i::after { display: none; }

.gr-osSearchLower {
  display: none;
  margin-top: 20px;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
}
.gr-osSearchLower.is-open { display: block; }
.gr-osSearchDetail {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.gr-osSearchContent {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gr-osSearchPeriod {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gr-osSearchPeriodInner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gr-osSearchPeriodContent {
  position: relative;
}
.gr-osSearchPeriodInput {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e4e8eb;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  width: 150px;
}
.gr-osSearchPeriodTilde {
  color: #888;
  font-size: 14px;
}
.gr-osSearchPulldown {
  position: relative;
}
.gr-osSearchPulldownInner {
  position: relative;
}
.gr-osSearchPulldown_select {
  height: 40px;
  padding: 0 40px 0 20px;
  border: 1px solid #e4e8eb;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  appearance: none;
  background: #fff;
  cursor: pointer;
  min-width: 160px;
}
.gr-osSearchPulldownInner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.gr-osSearchLowerInner {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.gr-osSearchSubmit {
  margin-top: 20px;
  text-align: center;
}
.gr-osSearchSubmit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 50px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: opacity .3s;
}
.gr-osSearchSubmit button:hover { opacity: .85; }

/* ========================================
   主题商店 — 卡片网格
   ======================================== */
.gr-osCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 20px;
}
.gr-osCard {
  position: relative;
}
.gr-osCardLink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.gr-osCardImage {
  width: 100%;
  overflow: hidden;
  background: #f0f2f5;
}
.gr-osCardImage picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1.416/1;
}
.gr-osCardImage picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s;
}
.gr-osCardImage picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: .1;
  transform: scale(1.15) translateZ(0);
}
.gr-osCardImage picture::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.3) 60%, transparent 100%);
  animation: shimmer 2s infinite;
  z-index: 0;
}

.gr-osCardInfo {
  position: relative;
}
.gr-osCardDate {
  margin-top: 15px;
  font-size: 12px;
}
.gr-osCardTitle {
  margin-top: 10px;
  font-size: clamp(13.6533333333px, 4.2666666667vw, 18.3466666667px);
}
.gr-osCardTitle span {
  font-weight: bold;
}
.gr-osCardStore {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
}
.gr-osCardStoreCategory {
  position: relative;
  z-index: 3;
  margin-right: 6px;
  font-size: clamp(8.5333333333px, 2.6666666667vw, 11.4666666667px);
}
.gr-osCardStoreCategory a {
  z-index: 4;
  display: inline-block;
  padding: 3px 12px;
  font-weight: bold;
  border: 2px solid #e4e8eb;
  border-radius: 60px;
  transition: .3s;
}
.gr-osCardStoreCategory a:hover {
  border-color: #232729;
}
.gr-osCardStoreOther {
  font-size: 12px;
}
.gr-osCardPeriod {
  margin-top: 12px;
  font-size: 12px;
}
.gr-osCardsEmpty {
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
  color: #aaa;
}

/* 卡片状态标签 */
[data-status]::after {
  position: absolute;
  top: clamp(213px, 66.67vw, 512px);
  right: 0;
  z-index: 1;
  padding: 3px 8px;
  font-size: clamp(8.5px, 2.67vw, 11.5px);
  font-weight: bold;
  content: attr(data-status-text);
  border-radius: 60px 60px 60px 0;
}
[data-status=ongoing]::after {
  top: -15px;
  right: -10px;
  font-size: 14px;
  color: #232729;
  background: #fabf03;
}
[data-status=upcoming]::after {
  color: #232729;
  background: #eff2f5;
}
[data-status=completed]::after {
  color: #fff;
  background: #232729;
}

@media (min-width: 768px) and (max-width: 1023px) {
  [data-status=upcoming]::after { top: 20.53vw; font-size: clamp(9px, 1.17vw, 12px); }
  [data-status=completed]::after { top: 20.53vw; font-size: clamp(9px, 1.17vw, 12px); }
}
@media (min-width: 1024px) {
  [data-status=upcoming]::after { top: clamp(189px, 18.44vw, 295px); font-size: clamp(12px, .75vw, 12px); }
  [data-status=completed]::after { top: clamp(189px, 18.44vw, 295px); font-size: clamp(12px, .75vw, 12px); }
}

/* NEW 标记 */
[data-is-new] .gr-osCardDate::after {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #e62222;
  content: "NEW";
}

/* ========================================
   主题商店 — 官方X按钮
   ======================================== */
.onlyshopTopTimeline {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  margin-top: clamp(51.2px, 16vw, 122.88px);
}

/* ========================================
   主题商店 — Tablet (768px+)
   ======================================== */
@media (min-width: 768px) {
  .onlyshopTopSlider {
    padding-block: clamp(45px, 5.87vw, 60px);
    margin-top: clamp(41.29px, 5.38vw, 55px);
    border-radius: 100px;
  }
  .onlyshopTopSlider .splide__slide { width: auto; }
  .onlyshopTopIntroInner { gap: 50px; }
  .onlyshopTopTimeline { margin-top: clamp(90.09px, 11.73vw, 120px); }
  .gr-osCards { grid-template-columns: repeat(3, 1fr); }
  .gr-osCardTitle { font-size: clamp(15.0146627566px, 1.9550342131vw, 20px); }
  .gr-osCardStoreCategory { font-size: clamp(9.008797654px, 1.1730205279vw, 12px); }
  .gr-osArchiveHero + .gr-osArchiveContent { margin-top: clamp(10px, 2vw, 20px); }
  .gr-osArchiveContent .headlineLv2 span { font-size: clamp(21px, 2.74vw, 28px); }
  .headlineLv2 + .gr-osSearch { margin-top: clamp(23px, 2.93vw, 30px); }
}

/* ========================================
   主题商店 — Desktop (1024px+)
   ======================================== */
@media (min-width: 1024px) {
  .gr-osArchiveHero .headlineLv1 .is-en { font-size: clamp(64px, 5vw, 80px); }
  .gr-osCards { gap: 40px 30px; }
  .gr-osCard:hover { transform: translateY(-4px); }
  .gr-osCardTitle { font-size: clamp(16px, 1.25vw, 20px); }
  .gr-osCardTitle span {
    padding-bottom: 0;
    margin-top: 10px;
    line-height: 1.6;
    text-decoration: none;
    background-image: linear-gradient(90deg, #232729, #232729);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size .3s;
  }
  .gr-osCardStoreCategory { font-size: clamp(12px, .75vw, 12px); }
  .gr-osCardLink:hover + .gr-osCardImage img {
    transition: transform .3s;
    transform: scale(1.1);
  }
  .gr-osCardLink:hover ~ .gr-osCardInfo .gr-osCardTitle span {
    background-size: 100% 1px;
  }
  .gr-osArchiveContent .headlineLv2 span { font-size: clamp(26px, 2vw, 32px); }
}

/* ========================================
   主题商店 — Mobile (< 768px)
   ======================================== */


/* ========================================
   Gratte 页面
   ======================================== */

/* Gratte Hero Slider */
.gratteTopHero { position: relative; }
.gratteTopSlider {
  padding-block: clamp(34px, 10.67vw, 82px);
  margin-top: clamp(5px, 2vw, 21px);
  background: linear-gradient(to right, #149bde, #4ec9e7);
  border-radius: 50px;
  opacity: 0;
  transition: transform .5s, opacity .5s;
  transform: translate(30px, 30px);
}
.gratteTopSlider.inview {
  opacity: 1;
  transform: translate(0, 0);
}
.gratteTopSliderLink { display: block; }
.gratteTopSliderLink img { transition: transform .3s; }

@media (min-width: 768px) {
  .gratteTopSlider {
    padding-block: clamp(45px, 5.87vw, 60px);
    margin-top: 0;
    border-radius: 100px;
  }
}

@media (min-width: 1024px) {
  .gratteTopSliderLink:hover img {
    transform: scale(1.1);
  }
}

/* Gratte Intro */
.gratteTopIntro {
  background: #eff2f5;
  padding-top: calc(32vw + 105px);
  margin-top: -105px;
}
.gratteTopIntroInner { position: relative; }
.gratteTopIntroBgtext {
  position: absolute;
  top: -85px;
  left: -10px;
  font-size: clamp(41px, 12.8vw, 55px);
  font-weight: bold;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
  opacity: 0;
  transform: translateY(40px);
}
.gratteTopIntroBgtext.inview {
  opacity: 1;
  transition: transform .5s, opacity .5s;
  transform: translateY(0);
}
.gratteTopIntroInfo {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(40px);
}
.gratteTopIntroInfo.inview {
  opacity: 1;
  transition: transform .5s, opacity .5s;
  transition-delay: .2s;
  transform: translateY(0);
}
.gratteTopIntroTitle {
  font-size: clamp(20px, 6.4vw, 28px);
  font-weight: bold;
}
.gratteTopIntroText {
  margin-top: clamp(15px, 4.53vw, 35px);
}
.gratteTopIntroText p {
  font-size: clamp(12px, 3.73vw, 16px);
  line-height: 2;
}
.gratteTopIntroNote {
  margin-top: clamp(20px, 6.4vw, 49px);
}
.gratteTopIntroNote li {
  display: flex;
}
.gratteTopIntroNote li::before {
  margin-right: 3px;
  font-size: clamp(10px, 3.2vw, 14px);
  line-height: 2;
  content: "※";
}
.gratteTopIntroNote li p {
  font-size: clamp(10px, 3.2vw, 14px);
  line-height: 2;
}
.gratteTopIntroImage {
  width: clamp(239px, 74.67vw, 573px);
  opacity: 0;
  transform: scale(1.2);
}
.gratteTopIntroImage.inview {
  opacity: 1;
  transition: transform .6s, opacity .5s;
  transform: scale(1);
}

@media (min-width: 768px) {
  .gratteTopIntro { padding-top: calc(13.125vw + 105px); }
  .gratteTopIntroInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .gratteTopIntroBgtext {
    top: -65px;
    left: -70px;
    font-size: clamp(63px, 8.21vw, 84px);
  }
  .gratteTopIntroInfo {
    min-width: 425px;
    max-width: 670px;
    margin-right: 30px;
  }
  .gratteTopIntroTitle {
    font-size: clamp(26px, 3.32vw, 34px);
  }
  .gratteTopIntroText {
    margin-top: clamp(30px, 3.91vw, 40px);
  }
  .gratteTopIntroText p {
    font-size: clamp(12px, 1.56vw, 16px);
  }
  .gratteTopIntroNote {
    margin-top: clamp(25px, 3.23vw, 33px);
  }
  .gratteTopIntroNote li::before {
    font-size: clamp(11px, 1.37vw, 14px);
  }
  .gratteTopIntroNote li p {
    font-size: clamp(11px, 1.37vw, 14px);
  }
  .gratteTopIntroImage {
    max-width: 490px;
    margin-top: -105px;
  }
}

@media (min-width: 1024px) {
  .gratteTopIntroBgtext { font-size: clamp(67px, 5.25vw, 84px); }
  .gratteTopIntroTitle { font-size: clamp(28px, 2.75vw, 44px); }
  .gratteTopIntroText p { font-size: clamp(13px, 1vw, 16px); }
  .gratteTopIntroNote li::before { font-size: clamp(11px, .875vw, 14px); }
  .gratteTopIntroNote li p { font-size: clamp(11px, .875vw, 14px); }
}



@media (min-width: 768px) and (max-width: 1160px) {
  .gratteTopIntroBgtext { top: -80px; left: -30px; }
}

/* Gratte Store Hours */
.gratteTopHours {
  padding-top: clamp(51px, 16vw, 123px);
  background: #eff2f5;
}
.gratteTopHoursInner {
  padding-top: clamp(51px, 16vw, 123px);
  background: #fff;
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
.gratteTopHoursLists { margin-top: 40px; }
.gratteTopHoursList {
  position: relative;
  width: 100%;
  padding-block: clamp(17px, 5.33vw, 41px);
  padding-right: 80px;
  border-bottom: 1px solid #eff2f5;
}
.gratteTopHoursList:nth-of-type(1),
.gratteTopHoursList:nth-of-type(2) {
  border-top: 1px solid #eff2f5;
}
.gratteTopHoursListIcon {
  position: absolute;
  top: 50%;
  right: 20px;
  display: none;
  width: 40px;
  height: auto;
  transform: translateY(-50%);
}
.gratteTopHoursList[data-takeout] .gratteTopHoursListIcon {
  display: block;
}
.gratteTopHoursListTitle {
  font-size: clamp(12px, 3.73vw, 16px);
  font-weight: bold;
}
.gratteTopHoursListText {
  margin-top: 10px;
  font-size: clamp(10px, 3.2vw, 14px);
}
.gratteTopHoursNote {
  padding-block: clamp(13px, 4vw, 31px);
  padding-inline: clamp(17px, 5.33vw, 41px);
  margin-top: clamp(5px, 2vw, 21px);
  border: 2px solid #e4e8eb;
  border-radius: 20px;
}
.gratteTopHoursNote p {
  font-size: clamp(12px, 3.73vw, 16px);
}
.gratteTopHoursNote p + p {
  margin-top: clamp(21px, 6.67vw, 51px);
}

@media (min-width: 768px) {
  .gratteTopHours { padding-top: clamp(83px, 10.75vw, 110px); }
  .gratteTopHoursInner { padding-top: clamp(83px, 10.75vw, 110px); }
  .gratteTopHoursLists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .gratteTopHoursList {
    width: min(600px, 37.5vw);
    padding-block: clamp(23px, 2.93vw, 30px);
  }
  .gratteTopHoursListIcon { width: 48px; }
  .gratteTopHoursListTitle { font-size: clamp(12px, 1.56vw, 16px); }
  .gratteTopHoursListText { font-size: clamp(11px, 1.37vw, 14px); }
  .gratteTopHoursNote {
    padding-block: clamp(26px, 3.42vw, 35px);
    padding-inline: clamp(26px, 3.42vw, 35px);
    margin-top: clamp(10px, 2vw, 20px);
    border-radius: 30px;
  }
  .gratteTopHoursNote p { font-size: clamp(12px, 1.56vw, 16px); }
  .gratteTopHoursNote p + p { margin-top: clamp(23px, 2.93vw, 30px); }
}

@media (min-width: 1024px) {
  .gratteTopHoursListTitle { font-size: clamp(16px, 1vw, 16px); }
  .gratteTopHoursNote p { font-size: clamp(16px, 1vw, 16px); }
  .gratteTopHoursNote p + p { margin-top: clamp(30px, 1vw, 30px); }
  .gratteTopHoursListText { font-size: clamp(14px, .875vw, 14px); }
  .gratteTopHoursNote p { font-size: clamp(16px, 1vw, 16px); }
}

/* Gratte News */
.gratteTopNews {
  margin-top: clamp(51px, 16vw, 123px);
}
.gratteTopNewsInner {
  padding-block: clamp(51px, 16vw, 123px);
  background: #eff2f5;
  border-top-left-radius: clamp(50px, 6.25vw, 100px);
  border-top-right-radius: clamp(50px, 6.25vw, 100px);
}
.gratteTopNewsContent {
  position: relative;
  padding-bottom: min(400px, 10.625vw);
}

@media (min-width: 768px) {
  .gratteTopNews { margin-top: clamp(75px, 9.78vw, 100px); }
  .gratteTopNewsInner { padding-block: clamp(75px, 9.78vw, 100px); }
  .gratteTopNewsContent > .buttonArrow {
    position: absolute;
    top: 15px;
    right: 0;
  }
}



/* Gratte Timeline */
.gratteTopTimeline {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  margin-top: clamp(51px, 16vw, 123px);
}

@media (min-width: 768px) {
  .gratteTopTimeline { margin-top: clamp(90px, 11.73vw, 120px); }
}

/* ========== Gratte Detail Buttons ========== */
.gratteDetailButton { width: 100%; }
.gratteDetailButton a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 50px;
  padding: 8px 30px;
  font-size: clamp(11.9466666667px, 3.7333333333vw, 16.0533333333px);
  font-weight: bold;
  line-height: 1.2;
  color: var(--theme-color, #fff);
  background: var(--theme-background, #385eaa);
  border-radius: 10px;
}
.gratteDetailButton a span {
  position: relative;
  pointer-events: none;
}
.gratteDetailButton a span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--theme-color, #fff);
  transition: transform .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.gratteDetailButton a i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 15px;
  pointer-events: none;
}
.gratteDetailButton a i::after {
  font-family: iconfont !important;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f11f";
  z-index: 1;
  font-size: 8px;
  color: var(--theme-background, #385eaa);
}
.gratteDetailButton a i::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background: var(--theme-color, #fff);
  border-radius: 50%;
  transition: transform .3s;
}
.gratteDetailButton a:hover span::after { transform: scale(1, 1); }
.gratteDetailButton a:hover i::before {
  transition: transform .3s;
  transform: scale(1.2);
}

@media (min-width: 768px) {
  .gratteDetailButton a {
    min-height: 60px;
    font-size: clamp(13.5131964809px, 1.7595307918vw, 18px);
  }
  .gratteDetailButton a i { width: 24px; height: 24px; }
  .gratteDetailButton a i::after { font-size: 10px; }
  .gratteDetailButton a i::before { width: 24px; height: 24px; }
}

@media (min-width: 1024px) {
  .gratteDetailButton a {
    font-size: clamp(14.4px, 1.125vw, 18px);
  }
}

/* ========== Only Shop / Gratte Detail ========== */

/* --- Hero --- */
.onlyshopDetailHero { margin-top: clamp(5px, 2vw, 21px); }
.onlyshopDetailHeroDate {
  margin-top: clamp(8.533px, 2.667vw, 20.48px);
  font-size: clamp(10.24px, 3.2vw, 13.76px);
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailHeroDate {
    margin-top: clamp(15.015px, 1.955vw, 20px);
    font-size: clamp(10.51px, 1.369vw, 14px);
  }
}
@media only screen and (min-width: 1024px) {
  .onlyshopDetailHeroDate { font-size: clamp(14px, 0.875vw, 14px); }
}

/* --- Hero Image --- */
.onlyshopDetailHeroImage {
  margin-top: clamp(17.067px, 5.333vw, 40.96px);
  opacity: 0;
  transform: scale(1.1);
}
@media only screen and (min-width: 1024px) {
  .onlyshopDetailHeroImage {
    margin-top: clamp(45.044px, 5.865vw, 60px);
  }
}
.onlyshopDetailHeroImage picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.onlyshopDetailHeroImage picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 1024px) {
  .onlyshopDetailHeroImage picture img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }
}
.onlyshopDetailHeroImage picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  background-position: center;
  background-size: cover;
  filter: blur(12px);
  opacity: 0.1;
  transform: scale(1.15) translateZ(0);
}

.onlyshopDetailHeroWrap {
  display: flex;
  align-items: center;
  margin-top: clamp(17.067px, 5.333vw, 40.96px);
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailHeroWrap {
    margin-top: clamp(22.522px, 2.933vw, 30px);
  }
}
.onlyshopDetailHeroImage.inview {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s;
}

/* --- Hero End Badge --- */
.onlyshopDetailHeroEnd {
  display: none;
  height: fit-content;
  padding-block: clamp(0.853px, 0.267vw, 2.048px);
  padding-inline: clamp(7.68px, 2.4vw, 18.432px);
  margin-left: clamp(10.24px, 3.2vw, 24.576px);
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  font-weight: bold;
  color: #e62222;
  border: 2px solid #e62222;
  border-radius: 5px;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailHeroEnd {
    padding-block: clamp(3.754px, 0.489vw, 5px);
    padding-inline: clamp(11.261px, 1.466vw, 15px);
    margin-left: clamp(15.015px, 1.955vw, 20px);
    font-size: clamp(12.012px, 1.564vw, 16px);
    border-radius: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .onlyshopDetailHeroEnd {
    display: block;
    font-size: clamp(16px, 1vw, 16px);
  }
}

/* --- Period --- */
.onlyshopDetailPeriod { margin-top: clamp(12.8px, 4vw, 30.72px); }
.onlyshopDetailPeriodLabel {
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  font-weight: bold;
  color: var(--blue);
}
.onlyshopDetailPeriodValue {
  margin-top: 4px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
}

/* --- Buttons --- */
.onlyshopDetailButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: clamp(5px, 2vw, 21px);
  margin-bottom: clamp(51.2px, 16vw, 122.88px);
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailButtons {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 1.563vw, 30px);
    margin-top: clamp(45.044px, 5.865vw, 60px);
    margin-bottom: clamp(90.088px, 11.73vw, 120px);
  }
}
.onlyshopDetailButton a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 8px 30px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
  line-height: 1.2;
  color: var(--theme-color, #fff);
  background: var(--theme-background, var(--blue));
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailButton a { min-height: 60px; font-size: clamp(13.513px, 1.76vw, 18px); }
}
@media only screen and (min-width: 1024px) {
  .onlyshopDetailButton a { font-size: clamp(14.4px, 1.125vw, 18px); }
}
.onlyshopDetailButton a span { position: relative; pointer-events: none; word-break: break-all; }
.onlyshopDetailButton a span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--theme-color, #fff);
  transition: transform 0.3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.onlyshopDetailButton a:hover span::after { transform: scale(1, 1); }
.onlyshopDetailButton a i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 15px;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailButton a i { width: 24px; height: 24px; }
}
.onlyshopDetailButton a i::after {
  font-family: iconfont !important;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  content: "\f11f";
  z-index: 1;
  font-size: 8px;
  color: var(--theme-background, var(--blue));
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailButton a i::after { font-size: 10px; }
}
.onlyshopDetailButton a i::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background: var(--theme-color, #fff);
  border-radius: 50%;
  transition: transform 0.3s;
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailButton a i::before { width: 24px; height: 24px; }
}
.onlyshopDetailButton a:hover i::before { transform: scale(1.2); }

/* --- Modules (Content) --- */
.modules[data-type="onlyshop"] :nth-last-child(1 of .module),
.modules[data-type="gratte"] :nth-last-child(1 of .module) {
  margin-bottom: clamp(68.267px, 21.333vw, 163.84px);
}
@media only screen and (min-width: 768px) {
  .modules[data-type="onlyshop"] :nth-last-child(1 of .module),
  .modules[data-type="gratte"] :nth-last-child(1 of .module) {
    margin-bottom: clamp(120.117px, 15.64vw, 160px);
  }
}

/* --- gr-os Module Title (h2) --- */
.gr-osModuleTitle[data-name=headlineLv2] {
  position: relative;
  padding-bottom: 15px;
  margin-top: clamp(51.2px, 16vw, 122.88px);
  font-size: clamp(17.067px, 5.333vw, 22.933px);
  font-weight: bold;
  border-bottom: 2px solid #eff2f5;
}
.gr-osModuleTitle[data-name=headlineLv2]::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  width: min(300px, 26.667vw);
  height: 2px;
  content: "";
  background: #46c3e7;
}
@media only screen and (min-width: 768px) {
  .gr-osModuleTitle[data-name=headlineLv2] {
    margin-top: clamp(60.059px, 7.82vw, 80px);
    font-size: clamp(24.023px, 3.128vw, 32px);
  }
  .gr-osModuleTitle[data-name=headlineLv2]::after {
    width: clamp(225.22px, 29.326vw, 300px);
  }
}
@media only screen and (min-width: 1024px) {
  .gr-osModuleTitle[data-name=headlineLv2] {
    font-size: clamp(25.6px, 2vw, 32px);
  }
}
.gr-osModuleTitle[data-name=headlineLv3],
.module[data-name=headlineLv3] {
  margin-top: clamp(34.133px, 10.667vw, 81.92px);
  font-size: clamp(15.36px, 4.8vw, 20.64px);
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .gr-osModuleTitle[data-name=headlineLv3],
  .module[data-name=headlineLv3] {
    margin-top: clamp(45.044px, 5.865vw, 60px);
    font-size: clamp(16.516px, 2.151vw, 22px);
  }
}
@media only screen and (min-width: 1024px) {
  .module[data-name=headlineLv3] {
    font-size: clamp(17.6px, 1.375vw, 22px);
  }
}

/* --- gr-os Module Body --- */
.gr-osModuleBody[data-name=wysiwygBG],
.gr-osModuleBody[data-name=linkBnr],
.gr-osModuleBody[data-name=keyValues] { width: 100%; }
.gr-osModuleBody, .gr-osModuleTitle[data-name=headlineLv3] {
  width: 100%;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .gr-osModuleBody[data-name=keyValues],
  .gr-osModuleBody, .gr-osModuleTitle[data-name=headlineLv3] {
    width: min(900px, 70.313%);
    margin: 0 0 0 auto;
  }
}
.gr-osModuleBody + .gr-osModuleBody { margin-top: clamp(17.067px, 5.333vw, 40.96px); }
@media only screen and (min-width: 768px) {
  .gr-osModuleBody + .gr-osModuleBody { margin-top: clamp(22.522px, 2.933vw, 30px); }
}
.gr-osModuleBody + .gr-osModuleTitle[data-name=headlineLv3] { margin-top: clamp(34.133px, 10.667vw, 81.92px); }
@media only screen and (min-width: 768px) {
  .gr-osModuleBody + .gr-osModuleTitle[data-name=headlineLv3] { margin-top: clamp(45.044px, 5.865vw, 60px); }
}
.gr-osModuleBody + .gr-osModuleTitle { margin-top: clamp(51.2px, 16vw, 122.88px); }
@media only screen and (min-width: 768px) {
  .gr-osModuleBody + .gr-osModuleTitle { margin-top: clamp(90.088px, 11.73vw, 120px); }
}

/* --- keyValue (dl/dt/dd) --- */
.keyValue { display: flex; flex-wrap: wrap; }
.keyValue + .keyValue { margin-top: clamp(12.8px, 4vw, 30.72px); }
.keyValue dt {
  width: 100%;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
  line-height: 2;
}
.keyValue dd {
  width: 100%;
  margin-top: 10px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
}
@media only screen and (min-width: 768px) {
  .keyValue + .keyValue { margin-top: min(8px, 0.556vw); }
  .keyValue dt { width: 12.5%; font-size: clamp(12.012px, 1.564vw, 16px); }
  .keyValue dd { width: 87.5%; margin-top: 0; font-size: clamp(12.012px, 1.564vw, 16px); }
}
@media only screen and (min-width: 1024px) {
  .keyValue dt { width: 13.75%; font-size: clamp(14px, 1.111vw, 16px); }
  .keyValue dd { width: 86.25%; font-size: clamp(14px, 1.111vw, 16px); }
}

/* --- wysiwyg content --- */
.wysiwyg, .gr-osModuleBody[data-name=wysiwyg] p, .gr-osModuleBody[data-name=wysiwygBG] p {
  line-height: 2;
  word-break: break-word;
  overflow-wrap: break-word;
}
.wysiwyg a, .gr-osModuleBody[data-name=wysiwyg] a, .gr-osModuleBody[data-name=wysiwygBG] a {
  color: var(--blue);
  text-decoration: underline;
}
.wysiwyg img, .gr-osModuleBody[data-name=wysiwyg] img, .gr-osModuleBody[data-name=wysiwygBG] img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-block: clamp(8.533px, 2.667vw, 20.48px);
}

/* --- Share Buttons --- */
.buttonSns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.buttonSnsShare {
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
  color: var(--black, #333);
  margin-right: 4px;
}
.buttonSnsX,
.buttonSnsFacebook {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: opacity 0.3s;
}
.buttonSnsX { background: #000; }
.buttonSnsFacebook { background: #1877f2; }
.buttonSnsX:hover,
.buttonSnsFacebook:hover { opacity: 0.8; }
.buttonSnsX i,
.buttonSnsFacebook i {
  font-family: iconfont;
  font-style: normal;
  color: #fff;
  font-size: 18px;
}
.buttonSnsX i::before { content: "\f13d"; }
.buttonSnsFacebook i::before { content: "\f12c"; }

/* --- Bottom (Share + Back) --- */
.onlyshopDetailBottomContent {
  display: block;
  padding-top: clamp(17.067px, 5.333vw, 40.96px);
  border-top: 1px solid #eff2f5;
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailBottomContent {
    display: flex;
    justify-content: space-between;
    padding-top: clamp(22.522px, 2.933vw, 30px);
  }
}
.onlyshopDetailBottom .buttonArrow {
  padding-top: clamp(68.267px, 21.333vw, 163.84px);
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailBottom .buttonArrow {
    padding-top: clamp(90.088px, 11.73vw, 120px);
  }
}

/* --- Related Items --- */
.onlyshopDetailRelated { margin-top: clamp(68.267px, 21.333vw, 163.84px); }
@media only screen and (min-width: 768px) {
  .onlyshopDetailRelated { margin-top: clamp(120.117px, 15.64vw, 160px); }
}
.onlyshopDetailRelatedCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(17.067px, 5.333vw, 40.96px);
  margin-top: clamp(5px, 2vw, 21px);
}
@media only screen and (min-width: 768px) {
  .onlyshopDetailRelatedCards {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(22.522px, 2.933vw, 30px);
    margin-top: clamp(45.044px, 5.865vw, 60px);
  }
}
.onlyshopDetailRelatedCard { display: block; }
.onlyshopDetailRelatedCardImage {
  aspect-ratio: 1.416 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #eff2f5;
}
.onlyshopDetailRelatedCardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.onlyshopDetailRelatedCard:hover .onlyshopDetailRelatedCardImage img { transform: scale(1.1); }
.onlyshopDetailRelatedCardDate {
  margin-top: clamp(8.533px, 2.667vw, 20.48px);
  font-size: clamp(10.24px, 3.2vw, 13.76px);
}
.onlyshopDetailRelatedCardTitle {
  margin-top: 4px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
}
.onlyshopDetailRelatedCardPeriod {
  margin-top: 4px;
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  color: var(--text-light, #888);
}

/* ========== Gratte Detail (shares same structure, add overrides) ========== */
.gratteDetailHero { margin-top: clamp(5px, 2vw, 21px); }
.gratteDetailHeroDate {
  margin-top: clamp(8.533px, 2.667vw, 20.48px);
  font-size: clamp(10.24px, 3.2vw, 13.76px);
}
@media only screen and (min-width: 768px) {
  .gratteDetailHeroDate {
    margin-top: clamp(15.015px, 1.955vw, 20px);
    font-size: clamp(10.51px, 1.369vw, 14px);
  }
}
@media only screen and (min-width: 1024px) {
  .gratteDetailHeroDate { font-size: clamp(14px, 0.875vw, 14px); }
}

.gratteDetailHeroImage {
  margin-top: clamp(17.067px, 5.333vw, 40.96px);
  opacity: 0;
  transform: scale(1.1);
}
@media only screen and (min-width: 1024px) {
  .gratteDetailHeroImage {
    margin-top: clamp(45.044px, 5.865vw, 60px);
  }
}
.gratteDetailHeroImage picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.gratteDetailHeroImage picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 1024px) {
  .gratteDetailHeroImage picture img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }
}
.gratteDetailHeroImage picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  background-position: center;
  background-size: cover;
  filter: blur(12px);
  opacity: 0.1;
  transform: scale(1.15) translateZ(0);
}

.gratteDetailHeroImage.inview {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s;
}

.gratteDetailButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: clamp(5px, 2vw, 21px);
  margin-bottom: clamp(51.2px, 16vw, 122.88px);
}
@media only screen and (min-width: 768px) {
  .gratteDetailButtons {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 1.563vw, 30px);
    margin-top: clamp(45.044px, 5.865vw, 60px);
    margin-bottom: clamp(90.088px, 11.73vw, 120px);
  }
}
.gratteDetailButton a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 8px 30px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
  line-height: 1.2;
  color: var(--theme-color, #fff);
  background: var(--theme-background, var(--blue));
  border-radius: 10px;
}
.gratteDetailButton a span { position: relative; pointer-events: none; word-break: break-all; }
.gratteDetailButton a span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--theme-color, #fff);
  transition: transform 0.3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.gratteDetailButton a:hover span::after { transform: scale(1, 1); }
.gratteDetailButton a i {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 15px;
  pointer-events: none;
}
.gratteDetailButton a i::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background: var(--theme-color, #fff);
  border-radius: 50%;
  transition: transform 0.3s;
}
.gratteDetailButton a:hover i::before { transform: scale(1.2); }
.gratteDetailBottomContent {
  display: block;
  padding-top: clamp(17.067px, 5.333vw, 40.96px);
  border-top: 1px solid #eff2f5;
}
@media only screen and (min-width: 768px) {
  .gratteDetailBottomContent {
    display: flex;
    justify-content: space-between;
    padding-top: clamp(22.522px, 2.933vw, 30px);
  }
}
.gratteDetailBottom .buttonArrow {
  padding-top: clamp(68.267px, 21.333vw, 163.84px);
}
@media only screen and (min-width: 768px) {
  .gratteDetailBottom .buttonArrow {
    padding-top: clamp(90.088px, 11.73vw, 120px);
  }
}
.gratteDetailRelated { margin-top: clamp(68.267px, 21.333vw, 163.84px); }
@media only screen and (min-width: 768px) {
  .gratteDetailRelated { margin-top: clamp(120.117px, 15.64vw, 160px); }
}

/* ========== Module Content Styles ========== */

/* --- wysiwygBG: colored background blocks --- */
.module[data-name=wysiwygBG] {
  width: 100%;
  padding: clamp(25.6px, 8vw, 61.44px) clamp(17.067px, 5.333vw, 40.96px);
  margin-top: clamp(5px, 2vw, 21px);
  background: var(--theme-background, #34322f);
  color: var(--theme-color, #fff);
  border-radius: 10px;
}
.module[data-name=wysiwygBG] p { line-height: 2; }
.module[data-name=wysiwygBG] a { color: inherit; text-decoration: underline; }

/* --- wysiwyg: plain text --- */
.module[data-name=wysiwyg] {
  line-height: 2;
  word-break: break-word;
}
.module[data-name=wysiwyg] a { color: var(--blue); text-decoration: underline; }
.module[data-name=wysiwyg] a:hover { color: #46c3e7; text-decoration: none; }
.module[data-name=wysiwyg] img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-block: clamp(8.533px, 2.667vw, 20.48px);
}
.module[data-name=wysiwyg] * + h2 {
  margin-top: clamp(34.133px, 10.667vw, 81.92px);
}
@media only screen and (min-width: 768px) {
  .module[data-name=wysiwyg] * + h2 {
    margin-top: clamp(45.044px, 5.865vw, 60px);
  }
}

/* --- images: gallery --- */
.module[data-name=images] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: clamp(17.067px, 5.333vw, 40.96px);
}
.module[data-name=images] picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
  width: 100%;
}
.module[data-name=images] picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* --- images gallery with figure (product-style) --- */
.module[data-name=images] figure {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 47.761%;
  min-width: 47.761%;
  margin: 0;
  margin-right: 4.478%;
  margin-bottom: clamp(17.067px, 5.333vw, 40.96px);
}
.module[data-name=images] figure:nth-of-type(even),
.module[data-name=images] figure:last-of-type { margin-right: 0; }
.module[data-name=images] figure:nth-of-type(n + 3) {
  max-width: 47.604%;
  margin-top: min(45px, 4.688%);
}
.module[data-name=images] figcaption {
  margin-top: clamp(4.267px, 1.333vw, 10.24px);
  font-size: clamp(11.947px, 3.733vw, 16.053px);
}

/* --- attentions: caution/notes --- */
.module[data-name=attentions] {
  margin-top: clamp(5px, 2vw, 21px);
  padding: clamp(17.067px, 5.333vw, 40.96px);
  background: #f5f7fb;
  border-radius: 10px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
}
.module[data-name=attentions] p {
  line-height: 2;
  word-break: break-word;
}
.module[data-name=attentions] > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.module[data-name=attentions] > ul li {
  margin-left: 1.5em;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  line-height: 2;
  text-indent: -1.5em;
  list-style: none;
}
.module[data-name=attentions] > ul li::before {
  margin-right: 0.5em;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  content: "※";
}

/* ========== gr-os images: flex grid within module ========== */
.modules > .gr-osModuleBody[data-name=images] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.modules > .gr-osModuleBody[data-name=images] a {
  flex: 1;
  width: 47.761%;
  min-width: 47.761%;
  margin-right: 4.478%;
  margin-bottom: clamp(17.067px, 5.333vw, 40.96px);
  text-decoration: none;
}
.modules > .gr-osModuleBody[data-name=images] a:last-of-type { margin-right: 0; }
.modules > .gr-osModuleBody[data-name=images] picture {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.modules > .gr-osModuleBody[data-name=images] picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media only screen and (min-width: 768px) {
  .modules > .gr-osModuleBody[data-name=images] a {
    width: 31.111%;
    min-width: 31.111%;
    margin-right: 3.333%;
    margin-bottom: clamp(30.029px, 3.91vw, 40px);
  }
  .modules > .gr-osModuleBody[data-name=images] a:nth-of-type(3n) { margin-right: 0; }
  .modules > .gr-osModuleBody[data-name=images] a:nth-of-type(n + 4) {
    min-width: 31.111%;
    max-width: 31.111%;
  }
}

/* ========== gr-os product: right-aligned inline-block ========== */
.modules[data-type=onlyshop] { text-align: right; }
.modules[data-type=onlyshop] > .module[data-name=headlineLv2],
.modules[data-type=onlyshop] > .module[data-name=wysiwyg],
.modules[data-type=onlyshop] > .module[data-name=keyValues],
.modules[data-type=onlyshop] > .module[data-name=attentions] { text-align: left; }
.modules > .module[data-name=product] {
  display: inline-block;
  width: 340px;
  vertical-align: top;
  text-align: left;
  min-height: 560px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.modules > .module[data-name=product] .productImage { position: relative; }
.modules > .module[data-name=product] .productImage picture {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
}
.modules > .module[data-name=product] .productImage picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.modules > .module[data-name=product] .productImage picture::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--blur-img);
  filter: blur(12px);
  background-position: center;
  background-size: cover;
  opacity: 0.1;
  transform: scale(1.15) translateZ(0);
}
.modules > .module[data-name=product] .productInfo {
  display: flex;
  flex-direction: column;
}
.modules > .module[data-name=product] .productInfoName {
  margin-top: 10px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
}
.modules > .module[data-name=product] .productInfoPrice {
  margin-top: 5px;
  font-size: clamp(11.947px, 3.733vw, 16.053px);
  font-weight: bold;
}
.productCartBtn {
  margin-top: 10px !important;
}
.modules > .module[data-name=product] .productInfoSubName {
  margin-top: 5px;
  font-size: clamp(10.24px, 3.2vw, 13.76px);
  line-height: 1.6;
}


/* ========== Product Cart Button ========== */
.productCartBtn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  font-size: clamp(11.947px, 3.733vw, 14px);
  font-weight: bold;
  color: #fff;
  background: #e94560;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.productCartBtn:hover { background: #d6344a; }
.productCartBtn:active { transform: scale(0.98); }
.productCartBtn.in-cart {
  background: #999;
  pointer-events: none;
}

/* ===== 手机端全局优化补丁 ===== */

will-change: filter;