/* 共通Header/Footer、色、書体、本型カードは既存SUBのstyle.cssを参照。 */
.top-hero { position:relative; display:flex; align-items:center; min-height:390px; margin-top:28px; overflow:hidden; border-radius:var(--radius); background:linear-gradient(115deg,#f4edda 0%,#e8f1ea 55%,#d5e9ed 100%); box-shadow:var(--shadow); }
.top-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.top-hero-copy { position:relative; margin:40px; padding:24px 28px; color:#243e35; background:rgba(250,248,242,.92); border-radius:8px; }
.top-hero h1 { margin:0 0 16px; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:.05em; line-height:1.4; }
.top-hero-copy p { margin:0; font-size:clamp(.88rem,1.5vw,1.12rem); letter-spacing:.06em; }
.top-catalog { padding-block:54px 24px; }
.top-recommendations { padding-block:28px 8px; }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:24px; }
.catalog-card { min-width:0; overflow:hidden; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); text-decoration:none; transition:transform .18s ease; }
.catalog-card:hover { transform:translateY(-2px); }
.catalog-card > img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; }
.catalog-card-copy { padding:20px 22px; }
.catalog-card h3 { margin:0; font-size:1.4rem; }
.catalog-card p { margin:8px 0 16px; font-size:.8rem; color:var(--muted); }
.catalog-card span { font-size:.78rem; color:var(--accent); }
.book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,175px),1fr)); gap:22px; }
.book-meta h3 { margin:2px 0 0; font-size:1.05rem; line-height:1.35; letter-spacing:.03em; }
.top-ad { min-height:100px; margin-block:30px 36px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:560px) {
 .top-hero { min-height:280px; margin-top:18px; }
 .top-hero-copy { margin:18px; padding:20px; }
 .top-catalog { padding-top:36px; }
 .catalog-grid { gap:16px; }
 .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } a { transition:none!important; } }

/* Four theme cards on desktop; preserve existing tablet and mobile layout. */
@media(min-width:1100px) { .top-catalog .catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ARE-IINA TOP HERO FIX 20260921 START */

.top-hero {
  position: relative !important;
  overflow: hidden !important;
}

.top-hero > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/*
 HEROの上下いっぱいを使う白帯。
 左側を白く保ち、右へ行くほど透明化。
*/
.top-hero-copy {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  box-sizing: border-box !important;

  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;

  padding:
    clamp(28px, 5vw, 72px)
    clamp(28px, 6vw, 96px) !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.96) 26%,
      rgba(255,255,255,0.88) 42%,
      rgba(255,255,255,0.64) 58%,
      rgba(255,255,255,0.34) 71%,
      rgba(255,255,255,0.10) 84%,
      rgba(255,255,255,0.00) 96%
    ) !important;
}

.top-hero-copy h1 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  white-space: nowrap !important;
}

.top-hero-copy p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  line-height: 1.7 !important;
}

.top-zukan-count {
  margin: 6px auto !important;
  padding: 0 12px !important;

  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;

  text-align: center !important;
  white-space: nowrap !important;
  opacity: 0.58 !important;
}

/* iPhone 14 Pro = 393 CSS px */
@media (max-width: 640px) {

  .top-hero-copy {
    padding: 22px 18px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.95) 38%,
        rgba(255,255,255,0.82) 58%,
        rgba(255,255,255,0.52) 74%,
        rgba(255,255,255,0.20) 88%,
        rgba(255,255,255,0.00) 100%
      ) !important;
  }

  .top-hero-copy h1 {
    white-space: nowrap !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.055em !important;
    max-width: none !important;
  }

  .top-hero-copy p {
    max-width: 88% !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .top-zukan-count {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* ARE-IINA TOP HERO FIX 20260921 END */