@charset "UTF-8";

/* ====================================================
   動画スライド（YouTube / Instagram）
   サムネイル連動 横型 / Slick
==================================================== */

/* ---- 共通 ---- */
.slide-yt,
.slide-ig {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 40px auto;
  padding: 0;
  box-sizing: border-box;
}

.slide-yt *,
.slide-yt *::before,
.slide-yt *::after,
.slide-ig *,
.slide-ig *::before,
.slide-ig *::after {
  box-sizing: border-box;
}

.slide-yt__main,
.slide-ig__main {
  position: relative;
  width: 100%;
  margin: 0 auto 16px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.slide-ig__main {
  background: #fafafa;
}

.slide-yt__main-item,
.slide-ig__main-item {
  width: 100%;
}

/* スライダー初期化前のチラつき防止 */
.slide-yt__main:not(.slick-initialized) .slide-yt__main-item:not(:first-child),
.slide-ig__main:not(.slick-initialized) .slide-ig__main-item:not(:first-child),
.slide-yt__thumb:not(.slick-initialized) .slide-yt__thumb-item:nth-child(n + 6),
.slide-ig__thumb:not(.slick-initialized) .slide-ig__thumb-item:nth-child(n + 6) {
  display: none;
}

/* ---- 埋め込み（YouTube：16:9） ---- */
.slide-yt__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.slide-yt__embed iframe,
.slide-yt__embed video,
.slide-yt__embed object,
.slide-yt__embed embed {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ---- 埋め込み（Instagram：540 × 680） ---- */
.slide-ig__main {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.slide-ig__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 540 / 680;
  overflow: hidden;
  background: #fafafa;
}

.slide-ig__embed .instagram-media,
.slide-ig__embed iframe.instagram-media-rendered {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 540px !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* リール（動画）スライドだけ縦長アスペクトに切替（写真投稿の見た目は維持） */
.slide-ig__main-item.is-reel .slide-ig__embed {
  aspect-ratio: 540 / 960;
}

/* ---- サムネイル（横スクロール） ---- */
.slide-yt__thumb,
.slide-ig__thumb {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.slide-yt__thumb-item,
.slide-ig__thumb-item {
  padding: 0 6px;
  cursor: pointer;
  outline: none;
}

.slide-yt__thumb-inner,
.slide-ig__thumb-inner {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}

.slide-yt__thumb-inner {
  aspect-ratio: 16 / 9;
}

.slide-ig__thumb-inner {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #efefef;
  color: #888;
}

/* Instagram 埋め込みページ（/p/<id>/embed/）を iframe で表示し、
   ヘッダー領域(約60px)以下を非表示にして画像部分だけを切り抜く。
   iframe は IG embed の最小幅 326px で固定描画し、JSで --ig-thumb-scale を設定して
   コンテナサイズに合わせてスケール。 */
.slide-ig__thumb-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 326px;
  height: 600px;
  border: 0;
  pointer-events: none;
  background: #fff;
  transform-origin: top left;
  transform: scale(var(--ig-thumb-scale, 0.3)) translateY(-60px);
}

/* iframe はクリックを受け取らないので、上に透明オーバーレイを置いて
   slick の focusOnSelect が反応するようにする */
.slide-ig__thumb-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

.slide-yt__thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-yt__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.slide-yt__thumb-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
}

.slide-ig__thumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  max-width: 48px;
}

.slide-ig__thumb-icon img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.slide-ig__thumb-num,
.slide-yt__thumb-num {
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
}

.slide-yt__thumb-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  font-size: 20px;
}

/* アクティブ／ホバー */
.slide-yt__thumb-item.slick-current .slide-yt__thumb-inner,
.slide-ig__thumb-item.slick-current .slide-ig__thumb-inner {
  border-color: #c89a3c;
  opacity: 1;
}

.slide-yt__thumb-item:hover .slide-yt__thumb-inner,
.slide-ig__thumb-item:hover .slide-ig__thumb-inner {
  opacity: 1;
}

/* ---- 矢印は使用しないので非表示 ---- */
.slide-yt .slick-arrow,
.slide-ig .slick-arrow {
  display: none !important;
}

/* 1枚のみのとき */
.slide-yt.is-single .slide-yt__main,
.slide-ig.is-single .slide-ig__main {
  margin-bottom: 0;
}

/* ---- レスポンシブ ---- */
@media screen and (max-width: 768px) {

  .slide-yt,
  .slide-ig {
    margin: 24px auto;
  }
}

/* ====================================================
   TOP症例カード：症例タイプ4種の出し分け
==================================================== */

/* youtube埋め込み枠（iframeをコンテナ幅に収める） */
.top-case__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 348 / 196;
  overflow: hidden;
}
.top-case__video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
}

/* 画像（2枚ずつ）：Before×2 / After×2 を 2x2 グリッドで */
.top-case__before-after.--add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* タブラベル長文時の折り返し */
.top-case__tabs-item {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* youtube単体（Before/After なし）：1カラムで全幅 */
.top-case__before-after.--single {
  grid-template-columns: 1fr;
}

@media screen and (max-width: 767px) {
    .page-common-content-template .--cta-button-only.single-features-cta__button-wrap .single-features-cta__button-wrap {
        grid-template-columns: 1fr;
    }

    .page-common-content-template .--cta-button-only.single-features-cta__button-wrap .single-features-cta__button-box {
        width: 100%;
    }
}