/* ==========================================================================
   top.css — トップページスタイル
   ========================================================================== */

/* ===== MAIN WRAPPER ===== */
.main{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1.5rem,5vw,4rem);
  flex:1;
}

/* ===== HERO ===== */
.hero{
  margin:3rem 0;
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  cursor:pointer;
  position:relative;
  transition:border-color .4s,transform .5s var(--ease-out-expo);
  text-decoration:none;
  color:inherit;
  display:block;
}

.hero-thumb{
  width:100%;
  height:clamp(240px,30vw,400px);
  overflow:hidden;
  background:var(--bg-elevated);
  position:relative;
}
.hero-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out-expo);
}
.hero-thumb::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:50%;
  background:linear-gradient(transparent,color-mix(in srgb,var(--bg-card) 80%,transparent));
}

/* Hero placeholder */
.hero-thumb .ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-size:.8rem;
  color:var(--text-tertiary);
  position:relative;
  overflow:hidden;
}
.hero-thumb .ph::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,color-mix(in srgb,var(--accent) 8%,var(--bg-elevated)) 100%);
}
.hero-thumb .ph span{position:relative;z-index:1}

.hero-body{padding:2rem 2.5rem 2.5rem}

.hero-meta{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--font-heading);
  font-size:.8rem;
  color:var(--text-tertiary);
  margin-bottom:1rem;
}

.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.4;
  margin-bottom:1rem;
  color:var(--text-primary);
}

.hero-tags{
  display:flex;gap:.5rem;flex-wrap:wrap;
}

/* ===== SECTION ===== */
.section{margin:4rem 0}

.section-header{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:2rem;
}

.section-title{
  font-family:var(--font-heading);
  font-size:1.1rem;font-weight:700;
  letter-spacing:-0.02em;
  white-space:nowrap;
  color:var(--text-primary);
}

.section-line{
  flex:1;height:1px;
  background:var(--border);
}

/* ===== SWIPER (トップスライダー) ===== */
.topSwiperContainer{
  width:100%;
  max-width: 1200px;
  overflow:hidden;
  margin: 0 auto 3rem;
}

.topSwiper{
  width:100%;
  overflow:hidden;
}

.topSwiper .swiper-slide{
  position:relative;
  overflow:hidden;
}
.topSwiper .swiper-slide a{
  display:block;
    aspect-ratio: 1200/630;
  width:100%;height:100%;
  text-decoration:none;
}
.topSwiper .swiper-slide img{
  aspect-ratio: 1200/630;
    width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out-expo);
}

.topSwiper__titleContainer{
  position:absolute;bottom:0;left:0;right:0;
  padding:3rem 2rem 1.5rem;
  background:linear-gradient(transparent, rgba(0,0,0,.75) 40%, rgba(0,0,0,.85));
}

.topSwiper__title{
  font-family:var(--font-heading);
  font-size:clamp(.9rem,2vw,1.15rem);
  font-weight:700;
  color:#fff;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.topSwiper__pagination{
  text-align:center;
  margin-top:.75rem;
}
.topSwiper__pagination .swiper-pagination-bullet{
  background:var(--text-tertiary);
  opacity:.5;
  transition:all .3s;
}
.topSwiper__pagination .swiper-pagination-bullet-active{
  background:var(--accent);
  opacity:1;
  width:20px;
  border-radius:4px;
}

/* ===== ARTICLE GRID CONTAINER (home category sections) ===== */
.article{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  margin-top:1.5rem;
}

/* ===== CARD GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}

/* ===== ARTICLE CARD ===== */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:all .2s var(--ease-out-expo);
  position:relative;
  text-decoration:none;
  color:inherit;
  display:block;
}

.card-thumb{
  width:100%;
  overflow:hidden;
  background:var(--bg-elevated);
  position:relative;
}
.card-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease-out-expo);
}

/* Card placeholder */
.card-thumb .ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-size:.75rem;
  color:var(--text-tertiary);
  position:relative;
  overflow:hidden;
}
.card-thumb .ph::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,color-mix(in srgb,var(--accent) 6%,var(--bg-elevated)) 100%);
}
.card-thumb .ph span{position:relative;z-index:1}

.card-bookmark{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;
  border-radius:50%;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(8px);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease-spring);
  z-index:2;
}
.card-bookmark svg{width:16px;height:16px;color:var(--text-primary);transition:color .3s}
.card-bookmark.is-bookmarked{background:var(--accent)}
.card-bookmark.is-bookmarked svg{color:#09090B;fill:currentColor}

.card-body{padding:1.25rem 1.5rem 1.5rem}

.card-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;
}

.card-date{
  font-family:var(--font-heading);
  font-size:.75rem;
  color:var(--text-tertiary);
}

.card-stats{display:flex;gap:.75rem}

.card-title{
  font-family:var(--font-heading);
  font-size:1.05rem;font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.5;
  margin-bottom:.75rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--text-primary);
}

.card-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.card-tags .tag{font-size:.7rem;padding:3px 10px}

/* ===== PLACEHOLDER ===== */
.ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-size:.8rem;
  color:var(--text-tertiary);
  position:relative;
  overflow:hidden;
}
.ph::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,color-mix(in srgb,var(--accent) 8%,var(--bg-elevated)) 100%);
}
.ph span{position:relative;z-index:1}

/* ===== HOVER ===== */
@media(hover:hover){
  .hero:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
  }
  .hero:hover .hero-thumb img{transform:scale(1.03)}
  .topSwiper .swiper-slide:hover img{transform:scale(1.04)}
  .card:hover{
    transform:translateY(-4px);
    box-shadow:
      0 20px 60px -15px rgba(0,0,0,.3),
      0 0 40px var(--accent-glow);
      border-color: var(--accent);
  }
  .card:hover .card-thumb img{transform:none}
  .card-bookmark:hover{
    transform:scale(1.15);
    background:var(--accent);
  }
  .card-bookmark:hover svg{color:#09090B}
}

/* ===== RESPONSIVE ===== */
@media(max-width:767px){
  .grid{grid-template-columns:1fr}
  .article{grid-template-columns:1fr}
  .hero-body{padding:1.5rem}
  .section{margin:3rem 0}
}