/* ==========================================================================
   common.css：このLPのページの枠組み（750px幅の外枠・KV／本文／フッターの配置・セクション間の余白・ページ背景）
   ※パーツ（見出し・ボタン・カード・ナビなど）の見た目は style.css に書く
   ========================================================================== */

/* コンテンツエリア */
.sec-oneCol {
  max-width: 750px;
  margin: 0 auto;

  @media (max-width: 798px) {
    padding-inline: var(--spacing-md);
  }

  /* KV */
  & .oneCol__kv {
    @media (max-width: 768px) {
      margin-inline: calc(-1 * var(--spacing-md));
    }
  }

  /* リンクナビ */
  & .c-pageNav {
    margin: 0;

    /* KV下のオレンジ背景の上に表示するための上下余白 */
    & .inner {
      padding: var(--spacing-md) 0;

      @media (max-width: 768px) {
        padding: 0; /* SPではメニューが画面外に隠れるため余白なし */
      }
    }
  }

  /* 本文 */
  & main {
    padding-inline: var(--spacing-md);

    @media (max-width: 798px) {
      padding-inline: 0;
    }
  }

  /* KVより下の部分 */
  & .oneCol__body {
    position: relative;
    z-index: 2;
    padding-top: var(--spacing-md); /* 左右の余白（main の padding-inline）とそろえる */
    border-radius: 12px 12px 0 0;
    background: var(--color-bg);

    @media (max-width: 798px) {
      margin-inline: calc(var(--spacing-xs) - var(--spacing-md));
      padding-top: calc(var(--spacing-md) - var(--spacing-xs)); /* SPの左右の余白とそろえる */
      padding-inline: calc(var(--spacing-md) - var(--spacing-xs));
    }
  }

  /* 動画：下の余白をセクション間（.oneCol__section）とそろえる */
  & .c-movie {
    margin-bottom: var(--spacing-xl);
  }

  /* セクション下部の光るボタン（各セクション末尾の「詳しくはこちら」「その他のイベントニュースはこちら」）の上の余白 */
  & .oneCol__section > p:has(> .c-btn--shine) {
    margin-top: 2em;
  }

  /* バナー（画像リンク）：幅いっぱいに表示 */
  & .c-bnr {
    margin-top: 3em;

    & a {
      display: block;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.85;
      }
    }

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* フッター */
  & .c-footer {
    margin-top: var(--spacing-xl);

    @media (max-width: 798px) {
      margin-inline: calc(var(--spacing-xs) - var(--spacing-md));
    }
  }
}

/* 本文セクション */
.oneCol__section {
  margin-bottom: var(--spacing-xl);

  &:last-child {
    margin-bottom: 0;
  }
}

/* SHOP → SALE の間：SALEに見出しがなくボタンが続くため、セクション間の余白を半分に */
#section02 {
  margin-bottom: calc(var(--spacing-xl) / 2);
}

:where(.oneCol__section) p {
  margin: var(--spacing-sm) 0 0;
  color: var(--color-text-sub);
}

/* ページ全体 */
.pg-oneCol {
  background: var(--gradient-kv) top / 100% 750px no-repeat, var(--color-bg-page);

  @media (max-width: 768px) {
    background-size: 100% 100vw;
  }
}