@charset "UTF-8";

/* ========================================
CSS Variables
======================================== */
:root {
  --color-main: #222222;
  --color-main-text: #F2DFC0;
  font-size: min(calc(10 / 1920 * 100vw) , calc(10 / 900 * 100vh));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p{
  margin: 0;
  text-box: trim-both cap text;
}

span{
  text-box: trim-both cap text;
}

a{
  color: var(--color-main-text);
  text-decoration: none;
  text-box: trim-both cap text;
}

h1,h2,h3,h4,h5,h6{
  text-box: trim-both cap text;
}

ul,li{
  text-box: trim-both cap text;
}

/* ========================================
Utility
======================================== */
.u-text-underline{
  text-decoration: underline;
}
.u-text-nowrap{
  white-space: nowrap;
}
.u-sp-only{
  display: none;
}

/* ========================================
LP Specific Layout
======================================== */
.p-landing-page {
  overflow: hidden;
  background-color: #111;
  color: #fff;
  font-family: sans-serif;
}

.l-lp-viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.l-lp-main {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #3C2C2C 0%, #190D0F 100%), url(/img/landing_page/lp_2025-ranking_01201020/bg_main.jpg) lightgray 50% / cover no-repeat;
  background-blend-mode: screen, normal;
}

/* ========================================
Header (提供コード流用 + 固定)
======================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(56, 40, 40, 0.00) 0%, #382828 20%);
  z-index: 100;
}

.l-header__inner {
  max-width: 144rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* ロゴのみなので左寄せ */
}

.l-header__logo {
  width: 100%;
  max-width: 12.8rem;

  a{
    padding: 1.2rem 0;
    display: flex;
  }
  img{
    max-width: none;
    width: 100%;
  }
}

/* ========================================
Footer (提供コード流用 + 固定)
======================================== */
.l-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-main);
  z-index: 100;
}

.l-footer__inner {
  max-width: 144rem;
  margin: 0 auto;
  padding: 1.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.l-footer__content {
  display: flex;
  gap: 3.3rem;
}

.l-footer__link-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-footer__link-item+.l-footer__link-item {
  position: relative;
}

.l-footer__link-item+.l-footer__link-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1.6rem;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: #fff;
}

.l-footer__link-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.l-footer__link-text:hover {
  opacity: 0.8;
}

.l-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  position: relative;
}

.l-footer__copyright::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1.6rem;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: #fff;
}


/* ========================================
Component
======================================== */

/* リスト：連番（1. 2. 3. …） counter 使用 */
.c-list--numbered {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  counter-reset: list-num;
  padding-left: 1.8rem;
}
.c-list--numbered li {
  counter-increment: list-num;
  position: relative;
}
.c-list--numbered li::before {
  content: counter(list-num) '. ';
  position: absolute;
  left: -1.8rem;
}

/* リスト：先頭に・ */
.c-list--bullet {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  padding-left: 1.8rem;
}
.c-list--bullet li {
  position: relative;
}
.c-list--bullet li::before {
  content: '・';
  position: absolute;
  left: -1.8rem;
}

.c-cv-btn__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.8rem;
}

.c-cv-btn__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 13.6rem;
  min-height: 5.6rem;
  gap: 0.8rem;
  padding: 2.4rem 4rem;
  overflow: hidden;
  color: #190D0F;
}
.c-cv-btn__item-text {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.c-cv-btn__item-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.c-cv-btn__item--catalog {
  & .c-cv-btn__item-icon {
    background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_cv-btn_catalog.svg);
  }
}
.c-cv-btn__item--primary {
  position: relative;
  border-radius: 4rem;
  border: 0.2rem solid #CEA661;
  background: linear-gradient(95deg, #E3C590 8.94%, #BA8B3C 93.63%);
  box-shadow: 0 0 1.6rem 0 rgba(253, 230, 138, 0.48);
  z-index: 1;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4rem;
    border: 0.2rem solid #AF791D;
    background: #BA8B3C;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  &:hover{
    &::before {
      opacity: 1;
    }
  }
}

.c-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  transform: translateY(100%);
  opacity: 0;
  /* 終盤にかけて変化が強くなるイージング */
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表示中: 中央 */
.c-section.is-active {
  z-index: 1;
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
}

/* 初回ロード時のみすべてのセクションをその場で表示（アニメーションなし） */
.p-landing-page.is-initial-load .c-section {
  transition: none;
}

/* 現在より前のスライド: 画面上側へ退場 */
.c-section.is-before {
  transform: translateY(-100%);
  opacity: 0;
}

/* 現在より後のスライド: 画面下側から登場する初期位置 */
.c-section.is-after {
  transform: translateY(100%);
  opacity: 0;
}

/* 右側ナビゲーション */
.c-side-nav {
  position: fixed;
  right: 8rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.c-side-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-side-nav__btn {
  background: transparent;
  border: 1px solid #F2DFC0;
  width: 3.2rem;
  height: 4.8rem;
  border-radius: 4rem;
  cursor: pointer;
  transition: opacity 0.8s ease, visibility 0.8s ease, background-color 0.3s, background-image 0.3s;
}

.c-side-nav__btn.icon_slide_arrow {
  background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_slide_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.2rem 2rem;
}

.c-side-nav__btn--down.icon_slide_arrow {
  transform: rotate(180deg);
}

.c-side-nav__btn:hover {
  background-color: #F2DFC0;
}

.c-side-nav__btn:hover.icon_slide_arrow {
  background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_slide_arrow__active.svg);
}

.c-side-nav__dots {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

.c-side-nav__dot {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-side-nav__dot::before {
  content: '';
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid #F2DFC0;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s;
}

.c-side-nav__dot.is-active::before {
  background-color: #F2DFC0;
}

/* ========================================
Project (Main Contents)
======================================== */
.p-grid__inner,
.p-detail__inner {
  width: 100%;
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}
.p-hero {
  position: relative;
}
.p-hero__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  max-width: 144rem;
  gap: 6.4rem;
}

.p-hero__year {
  font-size: 6.4rem;
  background: linear-gradient(180deg, #D3A466 0%, rgba(211, 164, 102, 0.70) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 24px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 48px rgba(25, 13, 15, 0.25));
  text-align: center;
  font-weight: normal;
}

.p-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12.6rem;
  font-size: 6.4rem;
  line-height: 1.2;
  gap: 4rem;
  position: relative;
  font-weight: normal;
  min-height: 21rem;

  &::before, &::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8.8rem;
    height: 21rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &::before {
    left: 0;
    background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_title_left.svg);
  }

  &::after {
    right: 0;
    background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_title_right.svg);
  }
}

.p-hero__title-text {
  background: linear-gradient(92deg, #D3A466 26.59%, #E3C590 50%, #F4E7BB 59.36%, #E3C590 68.73%, #D3A466 82.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 24px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 48px rgba(25, 13, 15, 0.25));
  font-weight: 700;
  text-align: center;
}
.p-hero__title-text--sp{
  display: none;
  background: linear-gradient(92deg, #D3A466 26.59%, #E3C590 50%, #F4E7BB 59.36%, #E3C590 68.73%, #D3A466 82.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 24px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 48px rgba(25, 13, 15, 0.25));
  font-weight: 700;
  text-align: center;
}

.p-hero__desc {
  font-size: 2.4rem;
  color: var(--color-main-text);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.48px;
}

/* ヒーロー時のみ表示：スクロール案内（棒状・上→下に色変化） */
.p-hero__scroll-hint {
  position: absolute;
  bottom: 5.15rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3rem;
  height: 8rem;
  background: linear-gradient(to bottom, #F2DFC0 0%, #F2DFC0 100%), rgba(242, 223, 192, 0.50);
  background-size: 100% 0%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  animation: p-hero-scroll-hint 1.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes p-hero-scroll-hint {
  /* --- 前半：上を基準に、下へ伸びる --- */
  0% {
    background-size: 100% 0%, 100% 100%;
    background-position: top, center;
  }
  50% {
    background-size: 100% 100%, 100% 100%;
    background-position: top, center;
  }

  /* --- 切り替え：見た目を変えずに基準点を下に変更 --- */
  50.01% {
    background-position: bottom, center;
  }

  /* --- 後半：下を基準に、下へ縮む --- */
  100% {
    background-size: 100% 0%, 100% 100%;
    background-position: bottom, center;
  }
}

/* Grid Section */
.p-grid__title {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 4rem;
  filter: drop-shadow(0 0 8px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 24px rgba(25, 13, 15, 0.50)) drop-shadow(0 0 48px rgba(25, 13, 15, 0.25));
  background: linear-gradient(92deg, #D3A466 26.59%, #E3C590 50%, #F4E7BB 59.36%, #E3C590 68.73%, #D3A466 82.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-grid__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  gap: 2.4rem;
}

.p-grid__item {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: 2.4rem 1.6rem 4.4rem 1.6rem;
  border-radius: 0.8rem;
  box-shadow: 0 0 3.2rem 0 #3C2C2C;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  height: 28.1rem;
  background: radial-gradient(30.39% 47.32% at 50% 50%, #3C2C2C 0%, #190D0F 100%), #190D0F;
  transition: all 0.2s ease-out;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    background: #3C2C2C;
    transition: opacity 0.2s ease-out;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.6rem;
    height: 1.2rem;
    background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_anchor.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.2s ease-out;
  }

  &:hover{

    &::before {
      opacity: 1;
    }

    &::after {
      transform: translateY(0.4rem) translateX(-50%);
    }

    .p-grid__item-image{
      img{
        transform: rotate(-2deg);
      }
      &::before {
        transform: rotate(5deg);
      }
    }
  }
}
.p-grid__item-rank{
  position: absolute;
  top: 0;
  left: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 5rem;
  font-size: 1.8rem;
  color: #190D0F;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(180deg, #CEB6A2 0%, #BBA486 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 53.7% 80%, 46.3% 80%, 0 100%);
  padding: 0 0 1rem;
}
.p-grid__item-rank--1{
  background: linear-gradient(180deg, #E3C590 0%, #BA8B3C 100%);
}
.p-grid__item-rank--2{
  background: linear-gradient(180deg, #D9D9E6 0%, #828A94 100%);
}
.p-grid__item-rank--3{
  background: linear-gradient(180deg, #F7B27F 0%, #DB7B49 100%);
}

.p-grid__item-image{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: 12.4rem;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index:1;
  img{
    transition: transform 0.2s ease-out;
    transform: rotate(0);
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(2deg);
    background: #B5BEC3;
    box-shadow: 0.487rem 0.487rem 1.948rem 0 rgba(26, 38, 49, 0.25);
    z-index: -1;
    transition: transform 0.2s ease-out;
  }
}
.p-grid__item-image--horizontal{
  width: 16.1rem;
  height: auto;
  aspect-ratio: 334 / 244;
  &::before{
    width: 16.1rem;
    height: auto;
    aspect-ratio: 334 / 244;
  }
}
.p-grid__item-title{
  text-align: center;
  color: #F2DFC0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.12;
}

/* Detail Section */
.p-detail__layout {
  display: flex;
  align-items: center;
  gap: 5.6rem;
}
.p-detail__title{
  font-size: 4rem;
  color: #F2DFC0;
}
.p-detail__image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  img{
    width: 60rem;
    height: 53rem;
    flex-shrink: 0;
    aspect-ratio: 60/53;
    object-fit: cover;
    object-position: center;
  }
}

.p-detail__image--midium{
  max-width: 38rem;
  img{
    width: 38rem;
    height: 29.6rem;
    aspect-ratio: 38/29.6;
  }
}

.p-detail__text {
  flex: 1;
}

.p-detail__rank-wrap{
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-bottom: 3.2rem;
}

.p-detail__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9a063;
  font-weight: 700;
  width: fit-content;
  position: relative;
  text-box: trim-both cap text;
  line-height: 1;
  flex-basis: 6rem;
  flex-shrink: 0;
  img{
    width: 11rem;
    height: 6.4rem;
    aspect-ratio: 11/6.4;
    object-fit: contain;
    object-position: center;
  }
}
.p-detail__heading {
  font-size: 4rem;
  margin-bottom: 3.2rem;
  line-height: 1.2;
  color: #F2DFC0;
  letter-spacing: -1px;
}

.p-detail__desc {
  font-size: 1.8rem;
  color: #F2DFC0;
  margin-bottom: 4rem;

  > * + * {
    margin-top: 1rem;
  }
}

/* 複数コンテンツ縦並びスライド（4&5, 6&7, 8&9&10） */
.p-detail--stack {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
}

.p-detail--stack .p-detail__inner {
  padding-top: 7.15rem;
  padding-bottom: 5.15rem;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-detail__stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
}

.p-detail__block {
  width: 100%;
  position: relative;
}

.p-detail__block + .p-detail__block {
  &::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 115rem;
    height: 0.2rem;
    background: linear-gradient(270deg, rgba(227, 197, 144, 0.00) 0%, #E3C590 50%, rgba(227, 197, 144, 0.00) 100%);
  }
}

/* p-detail__block--small 基準: 画像・ランク・ボタンをスモールサイズに */
.p-detail__block--small .p-detail__title{
  font-size: 2.4rem;
}
.p-detail__block--small .p-detail__rank-wrap{
  gap: 1.6rem;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1.6rem;
}
.p-detail__block--small .p-detail__desc{
  margin-bottom: 1.6rem;
}
.p-detail__block--small .p-detail__image img {
  width: 33rem;
  height: 18.7rem;
  aspect-ratio: 33/18.7;
}
.p-detail__block--small .p-detail__image--midium img {
  width: auto;
  height: auto;
  aspect-ratio: 38/29.6;
}
.p-detail__block--small .p-detail__rank img {
  width: 6rem;
  height: 2.8rem;
  aspect-ratio: 6/2.8;
}
.p-detail__block--small .c-cv-btn__item {
  min-height: 4.8rem;
  padding: 1.6rem 3.2rem;
}
.p-detail__block--small .c-cv-btn__item .c-cv-btn__item-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.p-detail__block--small .c-cv-btn__item .c-cv-btn__item-text {
  font-size: 1.8rem;
}

.p-detail--stack .p-detail__layout {
  margin: 0;
}

/* 縦並びスライド内の各ブロック：画像＋テキストの横並びを維持 */
.p-detail--stack .p-detail__block .p-detail__layout {
  display: flex;
  align-items: center;
  gap: 8rem;
}

/* 言語別の指定 */
html[lang="zh"] {
  .p-hero__year{
    text-box: none;
  }
  .p-hero__title-text{
    text-box: none;
  }
  .p-hero__title-text--sp{
    text-box: none;
  }
  .p-grid__title{
    text-box: none;
  }
}

html[lang="th"] {
  .p-hero__year{
    text-box: none;
  }
  .p-hero__title-text{
    text-box: none;
  }
  .p-hero__title-text--sp{
    text-box: none;
  }
  .p-grid__title{
    text-box: none;
  }
}
html[lang="ko"] {
  .p-hero__year{
    text-box: none;
  }
  .p-hero__title-text{
    text-box: none;
  }
  .p-hero__title-text--sp{
    text-box: none;
  }
  .p-grid__title{
    text-box: none;
  }
}
/* 「ページトップへ」ボタン：landscape / PC では非表示（portrait のみスタイル） */
.p-lp-back-to-top {
  display: none;
}

/* ========================================
SP: orientation portrait（縦向き＝通常スクロール・1カラム）
※ landscape はフルスクリーンスライド（PC）のまま
======================================== */
@media (orientation: portrait) {
  /* スクロール位置は scroll-margin / scrollIntoView で制御。html を smooth にすると
     scrollIntoView({ behavior: 'auto' }) もスムーズになり初回 # 付き読込でズレやすい */
  html {
    scroll-behavior: auto;
  }

  :root {
    font-size: calc(10 / 375 * 100vw);
  }

  .p-landing-page {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
    background: linear-gradient(180deg, #3C2C2C 0%, #190D0F 100%) top center/ cover no-repeat, url(/img/landing_page/lp_2025-ranking_01201020/bg_main_sp.jpg) top center / contain no-repeat;
    background-blend-mode: screen, normal;
  }

  .l-lp-viewport {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .l-lp-main {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 3.2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    background: none;
  }

  .l-header{
    position: static;
  }
  .l-header__inner{
    padding: 1.2rem;
    justify-content: center;
  }
  .l-header__logo{
    max-width: none;
    img {
      max-height: 1.9rem;
    }
  }
  .l-footer{
    position: static;
  }

  /* スライド用の絶対配置・100vh相当を無効化 */
  .c-section {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: auto;
    transition: none;
    align-items: stretch;
    justify-content: flex-start;
  }

  .c-section.is-before,
  .c-section.is-after {
    transform: none !important;
    opacity: 1 !important;
  }

  .c-side-nav {
    display: none;
  }

  .p-hero {
    min-height: 0;
    padding: 1.6rem 0 8.8rem;
  }
  .p-hero__inner{
    gap: 2.4rem;
  }

  .p-hero__scroll-hint {
    bottom: 1.6rem;
    height: 4rem;
    width: 0.1rem;
  }

  .p-hero__title {
    padding: 0 2rem;
    min-height: 0;
    font-size: clamp(2.8rem, 8vw, 4.8rem);

    &::before,
    &::after {
      display: none;
    }
  }
  .p-hero__year{
    display: none;
  }
  .p-hero__title-text{
    display: none;
  }
  .p-hero__title-text--sp{
    display: block;
  }

  .p-hero__desc {
    font-size: 1.8rem;
    padding: 0 1.6rem;
  }

  .p-grid__title {
    font-size: 2.4rem;
    margin-bottom: 1.6rem;
  }

  .p-grid__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
  }

  .p-grid__item {
    display: flex;
    grid-row: auto;
    grid-template-rows: none;
    height: auto;
    min-height: 8rem;
    width: 100%;
    padding: 0.8rem 3.2rem 0.8rem 4rem;
    gap: 0.9rem;

    &::after{
      right: 1.2rem;
      left: auto;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 0.8rem;
    }

    &:hover{
      &::before{
        opacity: 0;
      }
      &::after {
        transform: translateY(-50%);
      }
      & .p-grid__item-image{
        img{
          transform: rotate(0);
        }
      }
    }
  }

  .p-grid__item-image {
    width: 4.9rem;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    flex-shrink: 0;

    &::before {
      display: none;
    }

    img {
      width: 100%;
      height: auto;
      max-height: 100%;
      object-fit: contain;
    }
  }

  .p-grid__item-image--horizontal{
    width: 5.6rem;
    height: 4rem;
    aspect-ratio: 7/5;
  }
  .p-grid__item-rank{
    clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%, 0% 50%);
    width: 3rem;
    height: 2.4rem;
    font-size: 1.4rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 0.6rem 0 0;
  }
  .p-grid__item-title{
    text-align: left;
    flex-grow: 1;
  }
  .p-detail__inner{
    padding: 1.6rem 0;
  }
  .p-grid__inner {
    padding: 0;
  }

  /* アンカー位置は必要なら .p-detail / .p-detail__block に scroll-margin-top を指定 */
  .p-detail__block {
    padding: 1.6rem 0;
  }

  /* rank を最上段に：flex + display:contents + order（HTML 変更なし／視覚順のみ変更） */
  .p-detail__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .p-detail__layout .p-detail__text {
    display: contents;
  }

  .p-detail__layout .p-detail__rank-wrap {
    display: contents;
  }

  .p-detail__layout .p-detail__rank {
    order: 0;
    align-self: center;
    flex-basis: auto;
  }

  .p-detail__layout .p-detail__image {
    order: 1;
  }

  .p-detail__layout .p-detail__title {
    order: 2;
  }

  .p-detail__layout .p-detail__desc {
    order: 3;
  }

  .p-detail__layout .c-cv-btn__wrap {
    order: 4;
  }
  .p-detail__rank{
    img{
      width: 5.5rem;
      height: 3.2rem;
      aspect-ratio: 55/32;
    }
  }
  .p-detail__image{
    width: 25rem;
    height: auto;
    margin: 0 auto 1.6rem;
  }
  .p-detail__title {
    font-size: 2rem;
    margin-bottom: 2.4rem;
    text-align: center;
  }
  .p-detail__desc{
    font-size: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .p-detail__image img {
    width: auto;
    height: auto;
    aspect-ratio: 69 / 61;
  }

  .p-detail__block--small .p-detail__title {
    font-size: 1.8rem;
  }

  .p-detail__block--small .p-detail__image img,
  .p-detail__block--small .p-detail__image--midium img {
    width: auto;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 50 / 39;
  }

  .p-detail--stack {
    overflow-y: visible;
    align-items: stretch;
    justify-content: flex-start;
  }

  .p-detail--stack .p-detail__inner {
    padding: 1.6rem 0;
    min-height: 0;
    align-items: stretch;
  }

  .p-detail__stack {
    gap: 3.2rem;
  }

  .p-detail--stack .p-detail__block .p-detail__layout {
    gap: 0;
  }

  .p-detail__block + .p-detail__block::before {
    display: none;
  }

  .c-cv-btn__item {
    min-width: 0;
    max-width: 100%;
    padding: 1.6rem 3.2rem;
    margin-inline: auto;
  }

  .c-cv-btn__item-text {
    font-size: 1.6rem;
  }

  .c-cv-btn__item-icon{
    width: 2.0rem;
    height: 2.0rem;
  }

  /* 旧 max-width:768px 相当（フッター）を portrait へ集約 */
  .l-footer__content {
    flex-direction: column;
    gap: 0.8rem;
  }

  .l-footer__copyright {
    text-align: center;
  }

  .l-footer__copyright::before {
    display: none;
  }

  .u-sp-only {
    display: block;
  }

  /* 戻るボタン・# 遷移先のアンカーオフセット */
  #section-grid {
    scroll-margin-top: 2rem;
  }

  /* ページトップへ（#section-grid 下辺がスクロール域上端より上に抜けたら .is-visible でフェード）※ビューポート固定のため fixed */
  .p-lp-back-to-top {
    display: flex;
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 200;
    box-sizing: border-box;
    width: 4.8rem;
    height: 4.8rem;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 4rem;
    border: 1px solid var(--text, #F2DFC0);
    background-color: rgba(60, 44, 42, 0.2);
    background-image: url(/img/landing_page/lp_2025-ranking_01201020/icon_back-to-top.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem 2rem;
    -webkit-backdrop-filter: blur(0.4rem);
    backdrop-filter: blur(0.4rem);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .p-lp-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .p-lp-back-to-top:focus-visible {
    outline: 2px solid #F2DFC0;
    outline-offset: 2px;
  }
}