@charset "UTF-8";

/* ==========================================================================
   1. レイアウト構成（Sections）
   ========================================================================== */

/* --- ベース設定（全画面共通） --- */
.single-section {
  padding-bottom: 8vw;
}

.single-section .x-sec {
  width: 100%;
}

.post-read {
  margin-top: 30px;
}

/* x-sec / overlay-link 共通 */
.x-sec {
  position: relative;
}

.x-sec__overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Twitterウィジェット（iframe）よりも前面に出す */
  cursor: pointer;
}

/* --- PC用レイアウト（1100px以上） --- */
@media (min-width: 1100px) {
  .single-section {
    padding: 0 100px 70px;
    display: flex;
    width: 1270px;
  }
  .single-section .x-text {
    line-height: 1.8 !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .single-section .twitter-follow-button {
    scale: 0.8 !important;
  }

  .single-section__left {
    width: 830px;
    padding-right: 30px;
  }

  /* 追従させるのは親のラップ要素のみにする */
  .single-section__right-wrap {
    width: 200px;
    /* position: -webkit-sticky;
    position: sticky;
    top: 120px;  */
    height: fit-content;
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .single-section__right-wrap.is-ready {
    opacity: 1;
  }

  /* 子要素からは sticky や不要な align-self を削除 */
  .single-section__right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .x-sec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pager {
    margin-top: 60px;
  }

  .contents-wrap {
    overflow: visible;
  }
}

/* ==========================================================================
   2. バナー共通設定（Banners）
   ========================================================================== */

/* --- ベース設定（全画面共通） --- */
.main-contents .bnr,
.single-bnr {
  margin-top: 50px;
}

.main-contents .bnr {
  display: flex;
  justify-content: center;
}

.category-section .bnr {
  margin-bottom: 30px;
}

.main-contents .bnr a,
.single-bnr a,
.vertical-bnr a {
  display: block;
}

.main-contents .bnr a {
  width: 100%;
}

.main-contents .bnr img,
.single-bnr img,
.vertical-bnr img {
  width: 100%;
}

/* --- モバイル用調整（1099px以下） --- */
@media (max-width: 1099px) {
  .bnr,
  .single-bnr {
    margin-right: -4vw;
    margin-left: -4vw;
  }
  .single-bnr {
    margin-bottom: 40px;
  }

  .vertical-bnr.--sp {
    margin: 30px 10px;
  }
}

/* --- PC用調整（1100px以上） --- */
@media (min-width: 1100px) {
  .main-contents .bnr a {
    width: 760px;
  }
}

/* ==========================================================================
   3. ユーティリティ（Display Control / Others）
   ========================================================================== */

/* --- アクセシビリティ --- */
/* スクリーンリーダー等に向けたアクセシビリティ対応（画面上からは隠す） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- 表示出し分け・モバイル用（1099px以下） --- */
@media (max-width: 1099px) {
  .pc-only {
    display: none !important;
  }
}

/* --- 表示出し分け・PC用（1100px以上） --- */
@media (min-width: 1100px) {
  .sp-only {
    display: none !important;
  }
}