/* ==========================================================================
   NOZOKURU - Front Page Styles
   TOPページ専用スタイル
   ========================================================================== */

/* --- SWELL Parent Theme Overrides (Front Page) --- */
.home .l-content,
.home .l-mainContent,
.home .l-mainContent__inner,
.home .l-mainContent__body,
.home .post_content,
.home .l-article,
.home .l-content__main,
.home article {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.home .l-content,
.home .l-mainContent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- Base --- */
.home .p-hero,
.home .p-section,
.home .p-cta {
  font-family: 'Noto Sans JP', 'DM Sans', sans-serif;
  color: var(--nz-text);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.home .p-hero a,
.home .p-section a,
.home .p-cta a {
  color: inherit;
  text-decoration: none;
}

/* --- Hero --- */
.p-hero {
  padding: 80px 0 60px;
  margin-top: 0;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
              url('../img/fv.jpg') center / cover no-repeat;
}

.p-hero__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.p-hero__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.p-hero__text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.p-hero__cta,
.p-hero__cta:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nz-accent);
  color: white !important;
  padding: 14px 36px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--nz-transition);
}

.p-hero__cta:hover,
.p-hero__cta:visited {
  background: var(--nz-accent-dark);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--nz-shadow-hover);
}

/* --- Section Header --- */
.p-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--nz-dark);
}

.p-section-header--mt {
  margin-top: 48px;
}

.p-section-header__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--nz-accent);
  text-transform: uppercase;
}

.p-section-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--nz-dark);
}

/* --- Top Layout (Main + Sidebar) --- */
.p-top-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.p-top-layout__main {
  min-width: 0;
}

.p-top-layout__sidebar {
  position: sticky;
  top: calc(var(--nz-header-height) + 20px);
}

/* --- Pickup 2col --- */
.p-pickup-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.p-pickup-2col .c-card__image {
  aspect-ratio: 16 / 9;
}

.p-pickup-2col .c-card__placeholder {
  font-size: 14px;
}

/* --- Grid 3 Cards --- */
.p-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-grid-3 .c-card--sm .c-card__image {
  aspect-ratio: 16 / 9;
}

.p-grid-3 .c-card--sm .c-card__body {
  padding: 12px 14px 16px;
}

.p-grid-3 .c-card--sm .c-card__title {
  font-size: 14px;
  -webkit-line-clamp: 2;
}

.p-grid-3 .c-card--sm .c-card__meta {
  font-size: 12px;
}

.p-grid-3 .c-card--sm .c-card__placeholder {
  font-size: 11px;
}

/* --- More Link --- */
.p-more-link {
  text-align: center;
  margin: 16px 0;
}

.p-more-link a,
.p-more-link a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nz-accent) !important;
  text-decoration: none;
  transition: all var(--nz-transition);
}

.p-more-link a:hover {
  gap: 10px;
}

/* --- Ranking --- */
.p-ranking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.p-ranking__main {
  position: relative;
}

.p-ranking__main .c-card__image {
  aspect-ratio: 16 / 9;
}

.p-ranking__main .c-card__placeholder {
  font-size: 14px;
}

.p-ranking__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nz-accent);
  color: white;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.p-ranking__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-ranking__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--nz-border-light);
  transition: background var(--nz-transition);
  text-decoration: none;
  color: inherit;
}

.p-ranking__item:first-child {
  padding-top: 0;
}

.p-ranking__item:last-child {
  border-bottom: none;
}

.p-ranking__item:hover {
  opacity: 0.7;
}

.p-ranking__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--nz-bg-tertiary);
  color: var(--nz-text-secondary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-ranking__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--nz-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--nz-bg-secondary);
}

.p-ranking__thumb img,
.p-ranking__thumb .c-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 9px;
}

.p-ranking__info {
  flex: 1;
  min-width: 0;
}

.p-ranking__info h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nz-dark);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-ranking__info p {
  font-size: 12px;
  color: var(--nz-text-tertiary);
  margin: 0;
}

.p-ranking__dot {
  margin: 0 4px;
}

/* --- Sidebar --- */
.p-sidebar__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--nz-dark);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.p-sidebar__label-sub {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--nz-text-tertiary);
}

.p-sidebar__label--mt {
  margin-top: 28px;
}

.p-sidebar-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-sidebar-card {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nz-border-light);
  transition: opacity var(--nz-transition);
  text-decoration: none;
  color: inherit;
}

.p-sidebar-card:first-child {
  padding-top: 0;
}

.p-sidebar-card:last-child {
  border-bottom: none;
}

.p-sidebar-card:hover {
  opacity: 0.7;
}

.p-sidebar-card__thumb {
  width: 90px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--nz-bg-secondary);
}

.p-sidebar-card__thumb img,
.p-sidebar-card__thumb .c-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 9px;
}

.p-sidebar-card__info {
  flex: 1;
  min-width: 0;
}

.p-sidebar-card__info h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nz-dark);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-sidebar-card__info p {
  font-size: 11px;
  color: var(--nz-text-tertiary);
  margin: 0;
}

/* --- Sidebar Banner --- */
.p-sidebar-banner {
  margin-top: 24px;
  border-radius: var(--nz-radius);
  background: var(--nz-accent);
  overflow: hidden;
}

.p-sidebar-banner__inner {
  padding: 28px 24px;
  text-align: center;
  color: white;
}

.p-sidebar-banner__lead {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 8px;
  opacity: 0.8;
}

.p-sidebar-banner__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}

.p-sidebar-banner__sub {
  font-size: 12px;
  margin: 0 0 16px;
  opacity: 0.8;
}

.p-sidebar-banner__btn,
.p-sidebar-banner__btn:visited {
  display: inline-block;
  background: white;
  color: var(--nz-accent) !important;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--nz-transition);
}

.p-sidebar-banner__btn:hover {
  color: var(--nz-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Sidebar Tags --- */
.p-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p-sidebar-tags__item {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--nz-border);
  color: var(--nz-text-secondary);
  cursor: pointer;
  transition: all var(--nz-transition);
  background: var(--nz-bg);
  text-decoration: none;
}

.p-sidebar-tags__item:hover {
  border-color: var(--nz-accent);
  color: var(--nz-accent);
}

/* --- About Section --- */
.p-about__text {
  font-size: 15px;
  color: var(--nz-text-secondary);
  max-width: 640px;
  margin-bottom: 24px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .p-hero {
    padding: 48px 0 40px;
  }

  .p-hero__title {
    font-size: 26px;
  }

  .p-top-layout {
    grid-template-columns: 1fr;
  }

  .p-top-layout__sidebar {
    position: static;
  }

  .p-pickup-2col {
    grid-template-columns: 1fr;
  }

  .p-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-ranking {
    grid-template-columns: 1fr;
  }

  .p-ranking__thumb {
    width: 56px;
    height: 56px;
  }
}