/* =========================================================================
   ENISHI — HOBBY page (hobby.html)
   ========================================================================= */

/* small icon sizes used on this page */
.icon-14{ width:14px; height:14px; }
.icon-15{ width:15px; height:15px; }

/* =======================================================================
   1. HERO
   ======================================================================= */
.hero-section{ padding-block:88px 80px; }
.hero-grid{
  display:flex; flex-direction:row; align-items:center; gap:64px;
}
.hero-text{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:28px; align-items:flex-start;
}
.hero-title-wrap{ display:flex; flex-direction:column; gap:8px; }
.hero-title-en{
  font-family:var(--font-en); font-weight:700; font-size:76px;
  letter-spacing:-1px; line-height:1; color:var(--ink);
}
.hero-title-jp{
  font-family:var(--font-heading); font-weight:700; font-size:24px;
  color:var(--navy); line-height:1.3;
}
.hero-lead{ font-size:16px; line-height:1.8; }
.hero-cta{ padding:16px 30px; gap:10px; font-size:16px; color:#fff; }

.hero-image{
  flex:0 0 600px; width:600px; height:560px;
  border-radius:var(--radius); overflow:hidden;
}
.hero-image img{ width:100%; height:100%; object-fit:cover; }

/* =======================================================================
   2. GENRES
   ======================================================================= */
.genres-section{ padding-block:80px; }
.genres-inner{ display:flex; flex-direction:column; gap:44px; }
.genres-head{ display:flex; flex-direction:column; gap:12px; }
.genres-eyebrow{
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:2px; color:var(--accent);
}
.genres-title{ font-size:36px; }
.genres-desc{ max-width:680px; font-size:15px; line-height:1.7; }

.genre-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.genre-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:24px;
}
.genre-card__top{
  display:flex; align-items:center; justify-content:space-between;
}
.genre-num{ font-family:var(--font-en); font-weight:700; font-size:30px; color:var(--accent); }
.genre-icon{ width:40px; height:40px; border-radius:999px; }
.genre-card__text{ display:flex; flex-direction:column; gap:4px; }
.genre-en{ font-family:var(--font-en); font-weight:700; font-size:20px; color:var(--ink); }
.genre-en--jp{ font-family:var(--font-heading); font-size:19px; }
.genre-jp{ font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--muted); }

/* =======================================================================
   3. SHIPPING
   ======================================================================= */
.shipping-section{ padding-block:72px 80px; }
.shipping-grid{
  display:flex; flex-direction:row; align-items:center; gap:56px;
}
.ship-text{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.ship-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.1); color:#fff;
  font-family:var(--font-en); font-weight:600; font-size:12px; letter-spacing:1px;
}
.ship-badge i,.ship-badge svg{ color:var(--accent); }
.ship-title{ font-family:var(--font-heading); font-weight:700; font-size:34px; line-height:1.3; color:#fff; }
.ship-desc{ font-size:16px; line-height:1.85; color:#D7DEE4; }

.ship-features{ flex:0 0 380px; width:380px; display:flex; flex-direction:column; gap:14px; }
.ship-feature{
  background:rgba(255,255,255,.08); border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:row; align-items:center; gap:14px;
}
.ship-feature__icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:999px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.ship-feature__text{ display:flex; flex-direction:column; gap:2px; }
.ship-feature__title{ font-weight:700; font-size:15px; color:#fff; }
.ship-feature__desc{ font-size:12px; color:#AEB9C2; }

/* =======================================================================
   4. FAQ
   ======================================================================= */
.faq-section{ padding-block:88px 80px; }
.faq-inner{ display:flex; flex-direction:column; gap:44px; }
.faq-head{ display:flex; flex-direction:column; gap:14px; }
.faq-title{ font-size:36px; }
.faq-desc{ max-width:720px; font-size:15px; line-height:1.7; }

.acc-list{ display:flex; flex-direction:column; gap:14px; }
.acc-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 28px; display:flex; flex-direction:column; gap:14px;
}
.acc-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer;
}
.acc-q-text{ font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--ink); }
.acc-plus{
  flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.acc-a{
  display:none;
  font-family:var(--font-body); font-size:14px; color:var(--muted); line-height:1.85;
}
.acc-item.is-open .acc-a{ display:block; }
.acc-item.is-open .acc-plus{ transform:rotate(45deg); }

/* =======================================================================
   5. CTA
   ======================================================================= */
.cta-section{ padding-block:64px; }
.cta-grid{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:32px;
}
.cta-text{ display:flex; flex-direction:column; gap:10px; }
.cta-heading{ font-family:var(--font-heading); font-weight:700; font-size:30px; line-height:1.3; color:var(--ink); }
.cta-sub{ font-size:15px; line-height:1.7; color:var(--muted); }
.cta-button{ padding:18px 34px; gap:10px; font-size:17px; color:#fff; flex:0 0 auto; }

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width:980px){
  .hero-grid{ flex-direction:column; align-items:stretch; gap:40px; }
  .hero-image{ flex:none; width:100%; height:auto; aspect-ratio:600 / 560; }
  .hero-title-en{ font-size:clamp(48px, 9vw, 76px); }
}
@media (min-width:981px){
  .hero-title-en{ font-size:clamp(52px, 5.3vw, 76px); }
}

@media (max-width:860px){
  .genre-grid{ grid-template-columns:repeat(2, 1fr); }
  .shipping-grid{ flex-direction:column; align-items:stretch; gap:36px; }
  .ship-features{ flex:none; width:100%; }
  .cta-grid{ flex-direction:column; align-items:flex-start; gap:24px; }
  .genres-title,.faq-title{ font-size:30px; }
}
@media (max-width:560px){
  .genre-grid{ grid-template-columns:1fr; }
  .hero-title-en{ font-size:clamp(40px, 13vw, 60px); }
}