@charset "UTF-8";
/*!
 * EC-CUBE 4.1 Custom Design Theme - customize.css
 * ================================================
 * 配置先: html/user_data/assets/css/customize.css
 * EC-CUBE 4 が自動的に読み込みます。既存ファイルへの変更不要。
 *
 * Design: 2026 Trends / White Base / Parallax & Scroll Animations
 * 参考: https://kaijp.com/demo/ibn4101demo/
 *
 * 既存の機能・動作・レイアウトに影響を与えず、
 * 視覚面（色・角丸・影・アニメーション等）のみを上書きします。
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens - 2026)
   ========================================================================== */
:root {
  --th-white: #ffffff;
  --th-bg: #ffffff;
  --th-bg-subtle: #fafbfc;
  --th-bg-muted: #f3f4f6;
  --th-text: #1a1a2e;
  --th-text-sub: #6b7280;
  --th-text-muted: #9ca3af;
  --th-accent: #2d3748;
  --th-accent-lt: #4a5568;
  --th-border: #e5e7eb;
  --th-border-lt: #f0f1f3;
  --th-shadow-s: 0 1px 2px rgba(0,0,0,.04);
  --th-shadow-m: 0 4px 16px rgba(0,0,0,.06);
  --th-shadow-l: 0 8px 32px rgba(0,0,0,.08);
  --th-shadow-xl: 0 16px 48px rgba(0,0,0,.10);
  --th-r-s: 6px;
  --th-r-m: 12px;
  --th-r-l: 20px;
  --th-font: "Inter","Noto Sans JP","游ゴシック",YuGothic,"Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Arial,"メイリオ",Meiryo,sans-serif;
  --th-ease: cubic-bezier(.22,1,.36,1);
  --th-dur: .5s;
  --th-dur-f: .3s;
  --th-sec-py: 50px;
}
@media(min-width:768px){
  :root{ --th-sec-py: 100px; }
}

/* ==========================================================================
   Global
   ========================================================================== */
body {
  font-family: var(--th-font) !important;
  color: var(--th-text) !important;
  background: var(--th-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media(prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
::selection{ background:var(--th-accent);color:var(--th-white); }
a{ transition:color var(--th-dur-f) var(--th-ease),opacity var(--th-dur-f) var(--th-ease); }

/* ==========================================================================
   Scroll Animation Classes (applied by customize.js)
   ========================================================================== */
.th-anim{
  opacity:0; transform:translateY(36px);
  transition:opacity .8s var(--th-ease),transform .8s var(--th-ease);
  will-change:opacity,transform;
}
.th-anim.th-in{ opacity:1; transform:translateY(0); }

.th-anim-l{
  opacity:0; transform:translateX(-48px);
  transition:opacity .8s var(--th-ease),transform .8s var(--th-ease);
  will-change:opacity,transform;
}
.th-anim-l.th-in{ opacity:1; transform:translateX(0); }

.th-anim-r{
  opacity:0; transform:translateX(48px);
  transition:opacity .8s var(--th-ease),transform .8s var(--th-ease);
  will-change:opacity,transform;
}
.th-anim-r.th-in{ opacity:1; transform:translateX(0); }

.th-anim-s{
  opacity:0; transform:scale(.92);
  transition:opacity .8s var(--th-ease),transform .8s var(--th-ease);
  will-change:opacity,transform;
}
.th-anim-s.th-in{ opacity:1; transform:scale(1); }

.th-anim-f{
  opacity:0;
  transition:opacity 1s var(--th-ease);
  will-change:opacity;
}
.th-anim-f.th-in{ opacity:1; }

/* Stagger delays */
.th-d1{transition-delay:.05s}
.th-d2{transition-delay:.10s}
.th-d3{transition-delay:.15s}
.th-d4{transition-delay:.20s}
.th-d5{transition-delay:.25s}
.th-d6{transition-delay:.30s}
.th-d7{transition-delay:.35s}
.th-d8{transition-delay:.40s}

@media(prefers-reduced-motion:reduce){
  .th-anim,.th-anim-l,.th-anim-r,.th-anim-s,.th-anim-f{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.ec-layoutRole{ background:var(--th-bg); }
.ec-layoutRole__contentTop{ padding:0!important; }

/* ==========================================================================
   Header - Sticky Glass Effect (参考サイト同様)
   ========================================================================== */
.ec-layoutRole__header{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--th-border-lt);
  transition:box-shadow var(--th-dur-f) var(--th-ease);
}
.ec-layoutRole__header.is-scrolled{
  box-shadow:var(--th-shadow-m);
}
.ec-headerRole{
  padding-top:12px; padding-bottom:12px; max-width:1200px;
}
.ec-headerNaviRole{
  max-width:1200px; padding-bottom:0;
}
@media(min-width:768px){
  .ec-headerNaviRole{ padding-bottom:20px; }
}
.ec-headerTitle__title a{
  color:var(--th-text)!important; font-weight:700!important; letter-spacing:.04em;
}
.ec-headerNav__itemIcon{
  color:var(--th-text)!important;
  transition:color var(--th-dur-f) var(--th-ease);
}
.ec-headerNav__itemIcon:hover{ color:var(--th-accent-lt)!important; }
.ec-headerNav__itemLink{
  color:var(--th-text)!important; font-size:13px; letter-spacing:.02em;
}

/* Category navigation */
.ec-categoryNaviRole{ max-width:1200px; }
.ec-itemNav__nav li a{
  font-size:14px; font-weight:600; color:var(--th-text)!important;
  letter-spacing:.03em; padding:14px 16px;
  border-bottom-color:var(--th-border-lt); background:var(--th-white);
  transition:background var(--th-dur-f) var(--th-ease),color var(--th-dur-f) var(--th-ease);
}
.ec-itemNav__nav>li:hover>a{
  background:var(--th-bg-subtle)!important; color:var(--th-accent)!important;
}
.ec-itemNav__nav li ul li a{
  font-size:13px; font-weight:500;
  color:var(--th-white)!important; background:var(--th-accent)!important;
  border-bottom-color:rgba(255,255,255,.08);
}
.ec-itemNav__nav>li:hover li:hover>a{ background:var(--th-accent-lt)!important; }
.ec-itemNav__nav li ul li ul li a{ background:#718096!important; }
.ec-itemNav__nav li:hover ul li ul li a:hover{ background:var(--th-accent-lt)!important; }

/* SP Drawer */
.ec-headerNavSP{
  background:var(--th-white); color:var(--th-text);
  box-shadow:var(--th-shadow-m); border-radius:50%;
  width:44px; height:44px; top:6px; left:12px; z-index:10000;
}
.ec-drawerRole{ background:var(--th-accent); width:280px; }
.ec-drawerRoleClose{
  background:var(--th-white); box-shadow:var(--th-shadow-m);
  left:290px; top:12px;
}

/* ==========================================================================
   Slider / Hero (参考サイト同様の全幅表示)
   ========================================================================== */
.ec-sliderRole{ margin-bottom:0; padding:0; max-width:100%; }
.ec-sliderItemRole{ margin-bottom:0; padding:0; max-width:100%; }

/* ==========================================================================
   Section Headings
   ========================================================================== */
.ec-secHeading{ margin-bottom:20px; }
.ec-secHeading__en{
  font-family:var(--th-font); font-size:13px; font-weight:700;
  letter-spacing:.25em; text-transform:uppercase; color:var(--th-text);
}
.ec-secHeading__line{ background:var(--th-border); margin:0 16px; }
.ec-secHeading__ja{ font-size:11px; color:var(--th-text-sub); letter-spacing:.2em; }

.ec-secHeading--tandem{ margin-bottom:24px; }
.ec-secHeading--tandem .ec-secHeading__en{
  font-size:13px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--th-text);
}
.ec-secHeading--tandem .ec-secHeading__line{
  width:32px; height:1px; background:var(--th-accent); margin:16px auto;
}
.ec-secHeading--tandem .ec-secHeading__ja{
  font-size:11px; color:var(--th-text-sub); letter-spacing:.2em; margin-bottom:40px;
}

/* ==========================================================================
   Eyecatch (参考サイト同様のアニメーション付き交互レイアウト)
   ========================================================================== */
.ec-eyecatchRole{
  margin-bottom:0; padding:50px 24px;
  max-width:1200px; margin-left:auto; margin-right:auto;
  align-items:center; gap:40px;
}
@media(min-width:768px){
  .ec-eyecatchRole{ padding:100px 40px; gap:60px; }
}
.ec-eyecatchRole__image{
  margin-bottom:0; overflow:hidden; border-radius:var(--th-r-m);
}
.ec-eyecatchRole__image img{
  transition:transform .6s var(--th-ease);
}
.ec-eyecatchRole:hover .ec-eyecatchRole__image img{
  transform:scale(1.03);
}
.ec-eyecatchRole__intro{ color:var(--th-text); }
.ec-eyecatchRole__introEnTitle{
  font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--th-text-muted); margin-bottom:.6em;
}
@media(min-width:768px){
  .ec-eyecatchRole__introEnTitle{ margin-top:0; }
}
.ec-eyecatchRole__introTitle{
  font-size:22px; font-weight:700; line-height:1.5;
  color:var(--th-text); letter-spacing:.04em;
}
@media(min-width:768px){
  .ec-eyecatchRole__introTitle{ font-size:28px; }
}
.ec-eyecatchRole__introDescriptiron,
.ec-eyecatchRole__introDescription{
  font-size:15px; line-height:2; color:var(--th-text-sub);
}

/* ==========================================================================
   Topics
   ========================================================================== */
.ec-topicRole{
  background:var(--th-bg-subtle); padding:var(--th-sec-py) 0;
}
.ec-topicRole__listItem{
  overflow:hidden; border-radius:var(--th-r-m);
  background:var(--th-white); box-shadow:var(--th-shadow-s);
  transition:box-shadow var(--th-dur-f) var(--th-ease),transform var(--th-dur-f) var(--th-ease);
}
.ec-topicRole__listItem:hover{
  box-shadow:var(--th-shadow-m); transform:translateY(-4px);
}
.ec-topicRole__listItem img{
  transition:transform .6s var(--th-ease);
}
.ec-topicRole__listItem:hover img{ transform:scale(1.05); }
.ec-topicRole__listItemTitle{
  padding:12px 16px 16px; font-size:14px; font-weight:600; color:var(--th-text);
}

/* ==========================================================================
   New Items (参考サイト同様の商品カードスタイル)
   ========================================================================== */
.ec-newItemRole{
  padding:var(--th-sec-py) 0; background:var(--th-bg);
}
.ec-newItemRole__listItem{
  transition:transform var(--th-dur-f) var(--th-ease);
}
.ec-newItemRole__listItem:hover{ transform:translateY(-4px); }
.ec-newItemRole__listItem a{ color:var(--th-text)!important; text-decoration:none; }
.ec-newItemRole__listItem img{
  border-radius:var(--th-r-m); overflow:hidden;
  transition:transform .6s var(--th-ease),box-shadow .6s var(--th-ease);
  box-shadow:var(--th-shadow-s);
}
.ec-newItemRole__listItem:hover img{
  box-shadow:var(--th-shadow-m); transform:scale(1.03);
}
.ec-newItemRole__listItemTitle{
  font-size:14px; font-weight:600; color:var(--th-text); line-height:1.6;
}
.ec-newItemRole__listItemPrice{
  font-size:13px; color:var(--th-text-sub); font-weight:500;
}

/* ==========================================================================
   Category (参考サイト同様のカード型)
   ========================================================================== */
.ec-categoryRole{
  background:var(--th-bg-subtle); padding:var(--th-sec-py) 0;
}
.ec-categoryRole__listItem{
  overflow:hidden; border-radius:var(--th-r-m);
  background:var(--th-white); box-shadow:var(--th-shadow-s);
  transition:box-shadow var(--th-dur-f) var(--th-ease),transform var(--th-dur-f) var(--th-ease);
}
.ec-categoryRole__listItem:hover{
  box-shadow:var(--th-shadow-m); transform:translateY(-4px);
}
.ec-categoryRole__listItem img{ transition:transform .6s var(--th-ease); }
.ec-categoryRole__listItem:hover img{ transform:scale(1.05); }

/* ==========================================================================
   News (参考サイト同様のアコーディオン型)
   ========================================================================== */
.ec-newsRole{ padding:var(--th-sec-py) 0 0; }
.ec-newsRole__news{ border-radius:var(--th-r-m); }
@media(min-width:768px){
  .ec-newsRole__news{
    border:1px solid var(--th-border); padding:24px 32px; background:var(--th-bg);
  }
}
.ec-newsRole__newsItem:not(:last-of-type){
  border-bottom:1px solid var(--th-border-lt);
}
.ec-newsRole__newsDate{
  color:var(--th-text-muted); font-size:12px; font-weight:500; letter-spacing:.04em;
}
.ec-newsRole__newsTitle{
  font-size:14px; font-weight:600; color:var(--th-text-sub)!important; line-height:1.7;
}
.ec-newsRole__newsCloseBtn{
  background:var(--th-accent); width:24px; height:24px; line-height:24px; font-size:12px;
  transition:background var(--th-dur-f) var(--th-ease);
}
.ec-newsRole__newsCloseBtn:hover{ background:var(--th-accent-lt); }
.ec-newsRole__newsDescription{
  font-size:14px; line-height:1.8; color:var(--th-text-sub);
}
.ec-newsRole__newsDescription a{
  color:var(--th-accent)!important; text-decoration:underline; text-underline-offset:3px;
}

/* ==========================================================================
   Buttons (参考サイト同様のピル型ボタン)
   ========================================================================== */
.ec-inlineBtn--top,
.ec-blockBtn--top{
  background:var(--th-white)!important; color:var(--th-text)!important;
  border:1px solid var(--th-accent)!important; border-radius:999px!important;
  font-size:13px!important; font-weight:600!important; letter-spacing:.08em;
  transition:all var(--th-dur-f) var(--th-ease)!important;
  position:relative; overflow:hidden;
}
.ec-inlineBtn--top:hover,
.ec-blockBtn--top:hover{
  background:var(--th-accent)!important; color:var(--th-white)!important;
  box-shadow:var(--th-shadow-m); transform:translateY(-1px);
}
.ec-blockBtn--top{
  height:52px!important; line-height:50px!important; border-radius:999px!important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ec-footerRole{
  background:var(--th-text)!important; border-top:none; margin-top:0;
}
@media(min-width:768px){
  .ec-footerRole{ padding-top:60px; margin-top:0; }
}
.ec-footerNavi__link a{
  font-size:13px; letter-spacing:.04em; opacity:.8;
  transition:opacity var(--th-dur-f) var(--th-ease);
}
.ec-footerNavi__link a:hover{ opacity:1; }
.ec-footerTitle{ padding:40px 0 50px; }
@media(min-width:768px){
  .ec-footerTitle{ padding:50px 0 60px; }
}
.ec-footerTitle__logo a{ font-size:20px; letter-spacing:.06em; }
@media(min-width:768px){
  .ec-footerTitle__logo a{ font-size:22px; }
}
.ec-footerTitle__copyright{ font-size:11px; opacity:.6; }

/* ==========================================================================
   Parallax Containers (参考サイト同様のパララックス)
   ========================================================================== */
.th-plx-wrap{
  position:relative; overflow:hidden;
}
.th-plx-img{
  transition:transform .1s linear;
  will-change:transform;
}

/* ==========================================================================
   Search Box
   ========================================================================== */
.ec-headerSearch__category .ec-select.ec-select_search{
  background:var(--th-accent);
}
@media(min-width:768px){
  .ec-headerSearch__category .ec-select.ec-select_search{
    border-top-left-radius:999px; border-bottom-left-radius:999px;
    border-top-right-radius:0; border-bottom-right-radius:0;
  }
}
.ec-headerSearch__keyword{
  border-color:var(--th-border); background-color:var(--th-bg-subtle);
}
@media(min-width:768px){
  .ec-headerSearch__keyword{
    border-top-right-radius:999px; border-bottom-right-radius:999px;
    border-top-left-radius:0; border-bottom-left-radius:0;
  }
}

/* ==========================================================================
   Product Detail
   ========================================================================== */
.ec-productRole__img{ border-radius:var(--th-r-m); overflow:hidden; }
.ec-productRole__title .ec-headingTitle{
  font-weight:700; letter-spacing:.02em;
}
.ec-productRole__price{ font-weight:700; color:var(--th-text); }

/* ==========================================================================
   Product List / Shelf
   ========================================================================== */
.ec-shelfRole .ec-shelfGrid__item img{
  border-radius:var(--th-r-m);
  transition:transform .5s var(--th-ease),box-shadow .5s var(--th-ease);
}
.ec-shelfRole .ec-shelfGrid__item:hover img{
  transform:scale(1.03); box-shadow:var(--th-shadow-m);
}
.ec-shelfRole .ec-shelfGrid__item-image{
  overflow:hidden; border-radius:var(--th-r-m);
}

/* ==========================================================================
   Cart / Modal
   ========================================================================== */
.ec-cartNavi{ border-radius:var(--th-r-s); }
.ec-cartNaviIsset,
.ec-cartNaviNull{ border-radius:var(--th-r-m); box-shadow:var(--th-shadow-l); }
.ec-modal-overlay{
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.ec-modal-wrap{
  border-radius:var(--th-r-l); box-shadow:var(--th-shadow-xl);
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="number"],input[type="search"],
select,textarea{
  border-radius:var(--th-r-s)!important; border-color:var(--th-border)!important;
  transition:border-color var(--th-dur-f) var(--th-ease),box-shadow var(--th-dur-f) var(--th-ease);
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
input[type="tel"]:focus,input[type="number"]:focus,input[type="search"]:focus,
select:focus,textarea:focus{
  border-color:var(--th-accent)!important;
  box-shadow:0 0 0 3px rgba(45,55,72,.1)!important; outline:none;
}

/* ==========================================================================
   Login / Mypage
   ========================================================================== */
.ec-login{
  border-radius:var(--th-r-m); box-shadow:var(--th-shadow-m); background:var(--th-white);
}

/* ==========================================================================
   Page Top Button
   ========================================================================== */
.ec-blockTopBtn{
  border-radius:50%!important; width:48px!important; height:48px!important;
  display:flex!important; align-items:center; justify-content:center;
  background:var(--th-white)!important; color:var(--th-text)!important;
  border:1px solid var(--th-border)!important; box-shadow:var(--th-shadow-m)!important;
  transition:all var(--th-dur-f) var(--th-ease)!important;
}
.ec-blockTopBtn:hover{
  box-shadow:var(--th-shadow-l)!important; transform:translateY(-2px);
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
.bg-load-overlay{
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* ==========================================================================
   Slick Slider dots/arrows
   ========================================================================== */
.slick-dots li button:before{ color:var(--th-accent)!important; }
.slick-dots li.slick-active button:before{ color:var(--th-text)!important; }
.slick-prev:before,.slick-next:before{ color:var(--th-accent)!important; }

/* ==========================================================================
   Pager
   ========================================================================== */
.ec-pager .ec-pager__item a{ border-radius:var(--th-r-s); }
.ec-pager .ec-pager__item--active{ background:var(--th-accent); border-radius:var(--th-r-s); }

/* ==========================================================================
   Custom Scrollbar (Webkit)
   ========================================================================== */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--th-bg-subtle); }
::-webkit-scrollbar-thumb{ background:var(--th-border); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--th-text-muted); }

/* ==========================================================================
   Image Containers - overflow clip
   ========================================================================== */
.ec-topicRole__listItem,
.ec-categoryRole__listItem,
.ec-newItemRole__listItem{ overflow:hidden; }
.ec-topicRole__listItem>a,
.ec-categoryRole__listItem>a{ display:block; overflow:hidden; }

/* ==========================================================================
   Recommend Products Block (plugin互換)
   ========================================================================== */
.ec-recommendRole .ec-recommendRole__listItem img{
  border-radius:var(--th-r-m);
  transition:transform .5s var(--th-ease);
}
.ec-recommendRole .ec-recommendRole__listItem:hover img{
  transform:scale(1.03);
}

@media screen and (max-width: 767px) {
    .ec-headerNaviRole__left a {
        display: none !important;
    }
}