/*
Theme Name: ISSUE Child - Password Badge
Template: issue_tcd106
Version: 1.0.0
Description: パスワード保護ページ・投稿のアイキャッチ画像上に「限定公開（PWが必要）」ラベルを表示する子テーマです。
Author: OpenAI
Text Domain: issue-child-password-badge
*/

/* パスワード保護ラベルの重なり用 */
#main_content .image_wrap,
#main_content .image,
#single_post_header .image,
#archive_blog_list .image_wrap,
#front_page_contents .image_wrap,
#content_builder .image_wrap,
#blog_list .image_wrap,
.post_list .image_wrap,
.cb_blog_list .image_wrap,
.cb_interview_list .image_wrap,
.cb_news_list .image_wrap,
#related_post .image_wrap,
#archive_list .image_wrap,
.pager_post_item .image_wrap,
#category_post_list .image_wrap,
#interview_header .main_image {
  position: relative;
}

.tfk-password-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  max-width: calc(100% - 48px);
  border-radius: 9999px;
  background: #ef3b2d;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.tfk-password-badge__icon {
  font-size: 18px;
  line-height: 1;
}

.tfk-password-badge__text {
  display: inline-block;
}

#single_post_header .tfk-password-badge {
  left: 30px;
  bottom: 30px;
}


#interview_header .tfk-password-badge {
  left: 30px;
  bottom: 30px;
}

@media screen and (max-width: 767px) {
  .tfk-password-badge {
    left: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 10px 16px;
    max-width: calc(100% - 24px);
    font-size: 13px;
  }

  .tfk-password-badge__icon {
    font-size: 15px;
  }

  #single_post_header .tfk-password-badge {
    left: 12px;
    bottom: 12px;
  }

  #interview_header .tfk-password-badge {
    left: 12px;
    bottom: 12px;
  }
}


/* =========================================================
   SP版トップページの横崩れ対策（フロントのホームのみ）
   ※ 管理画面へ影響しないよう、body.home 配下のみに限定
   ========================================================= */
@media screen and (max-width: 767px) {
  body.home {
    overflow-x: hidden;
  }

  body.home img,
  body.home video,
  body.home iframe,
  body.home picture {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  body.home #container,
  body.home #main_content,
  body.home #front_page_contents,
  body.home #content_builder,
  body.home #content_builder > section,
  body.home #content_builder > div,
  body.home #main_content .content,
  body.home #main_content .inner,
  body.home #main_content .post_content,
  body.home #main_content .index_content,
  body.home #main_content .design_content,
  body.home .cb_banner,
  body.home .cb_staff_list,
  body.home .cb_interview_list,
  body.home .cb_blog_list,
  body.home .cb_news_list,
  body.home .cb_free_space,
  body.home .cb_white_bg,
  body.home .scroll_content,
  body.home .carousel_wrap,
  body.home .swiper,
  body.home .swiper-wrapper,
  body.home .swiper-slide,
  body.home section,
  body.home article {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.home .cb_banner .content,
  body.home .cb_free_space .post_content,
  body.home .cb_staff_carousel,
  body.home .cb_interview_carousel,
  body.home .cb_blog_carousel,
  body.home .cb_news_list .news_list,
  body.home .related_interview_carousel_wrap,
  body.home #archive_interview .interview_list {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-left: 16px;
    margin-right: 16px;
    box-sizing: border-box;
  }

  body.home #content_builder .blog_list,
  body.home #content_builder .news_list,
  body.home #content_builder .staff_list_type1,
  body.home #content_builder .staff_list_type2,
  body.home .cb_interview_list .interview_list,
  body.home .post_list,
  body.home .interview_list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.home #content_builder .blog_list .item,
  body.home #content_builder .news_list .item,
  body.home #content_builder .staff_list_type1 .item,
  body.home #content_builder .staff_list_type2 .item,
  body.home .cb_interview_list .interview_list .item,
  body.home .cb_news_list .blog_list .item,
  body.home .post_list a,
  body.home .interview_list a,
  body.home .swiper-slide a {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.home .cb_free_space .post_content * {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.home .cb_free_space .post_content table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  body.home .tfk-password-badge {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
  }

  body.home .tfk-password-badge__text {
    white-space: normal;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* =========================================================
   トップページ Interview カルーセルの矢印を常時表示
   ========================================================= */
body.home .cb_interview_list .swiper-nav-button {
  opacity: 1;
  visibility: visible;
}

body.home .cb_interview_list .cb_interview_carousel:hover .swiper-nav-button {
  opacity: 1;
}

/* クリックしやすさを少し上げる */
body.home .cb_interview_list .swiper-button-prev,
body.home .cb_interview_list .swiper-button-next {
  z-index: 30;
}

/* SPではテーマ標準で矢印が非表示のため、今回だけ再表示 */
@media screen and (max-width: 1160px) {
  body.home .cb_interview_carousel .swiper-button-prev,
  body.home .cb_interview_carousel .swiper-button-next {
    display: flex;
  }
}

/* SPでは見切れにくいよう少し内側へ */
@media screen and (max-width: 800px) {
  body.home .cb_interview_carousel .swiper-button-prev {
    left: -10px;
  }

  body.home .cb_interview_carousel .swiper-button-next {
    right: -10px;
  }
}

/* =========================================================
   v8: トップページ Interview カルーセルの矢印を強制的に常時表示
   ※ 親テーマ responsive.css の display:none を !important で上書き
   ========================================================= */
body.home #content_builder .cb_interview_list .swiper-nav-button,
body.home #content_builder .cb_interview_list .cb_interview_carousel_button_prev,
body.home #content_builder .cb_interview_list .cb_interview_carousel_button_next,
body.home #content_builder .cb_interview_list .swiper-button-prev,
body.home #content_builder .cb_interview_list .swiper-button-next {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 50 !important;
}

@media screen and (max-width: 1160px) {
  body.home #content_builder .cb_interview_list .cb_interview_carousel .cb_interview_carousel_button_prev,
  body.home #content_builder .cb_interview_list .cb_interview_carousel .cb_interview_carousel_button_next,
  body.home #content_builder .cb_interview_list .cb_interview_carousel .swiper-button-prev,
  body.home #content_builder .cb_interview_list .cb_interview_carousel .swiper-button-next {
    display: block !important;
  }
}

@media screen and (max-width: 800px) {
  body.home #content_builder .cb_interview_list .cb_interview_carousel .swiper-button-prev {
    left: 6px !important;
    right: auto !important;
  }

  body.home #content_builder .cb_interview_list .cb_interview_carousel .swiper-button-next {
    right: 6px !important;
    left: auto !important;
  }
}