/* =========================================================
   ファイル名 : evoqe-drawer.css
   バージョン : 1.4.0
   役割       : Works のドロワー(スライドインパネル)専用の見た目
   読み込み   : uncode-child/functions.php の evoqe_enqueue_assets()
   ※ ここに書かれた内容はドロワー内(.sp-panel / .sp-content)にのみ効きます
   ========================================================= */

/* =========================================================
   1. ドロワー本体・閉じるボタン
   PC: 幅80% / 閉じるボタンは枠のすぐ外
   スマホ(768px以下): 幅100% / 閉じるボタンは右端16px
   ========================================================= */
.sp-backdrop {
  position: fixed;
  inset: 0;
  background: transparent; /* 色は ::before(Safari の画面下の帯対策) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 2800ms cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 99998;
}

.sp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: transparent; /* 色は ::before(Safari の画面下の帯対策) */
  transform: translate3d(101%, 0, 0);
  transition: transform 3600ms cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 99999;
  overflow: hidden;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
  visibility: hidden;
}
.sp-panel.sp-prepared {
  visibility: visible;
}

/* [iPhone の Safari で画面下に帯が出ない対策] (v1.2.0 で方式を変更)
   Safari(WebKit)は画面の下端近くの点にある要素から親をたどり、
   画面サイズ程度の固定要素(position: fixed)が見つかると、その色で
   画面下のツールバー部分を塗りつぶす(背景色が無ければ画面の色を読み取って塗る)。
   ただし visibility: hidden の固定要素は対象外にする仕組みがあるため、
   ドロワー本体・暗幕は visibility: hidden にし、中身と色(::before)だけを表示する。
   見た目と操作は今までと同じ。
   ドロワーのダーク / ライトの色は evoqe-site.css の 9 で上書き */
.sp-panel.sp-prepared,
.sp-backdrop {
  visibility: hidden;
}
.sp-panel.sp-prepared > *,
.sp-panel.sp-prepared::before,
.sp-backdrop::before {
  visibility: visible;
}
.sp-backdrop::before,
.sp-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.sp-backdrop::before {
  background-color: rgba(20, 20, 20, 0.45);
}
.sp-panel::before {
  background-color: #ffffff;
  z-index: -1;
  pointer-events: none;
}

/* [ドロワーを開くと画面下に余白(帯)が出る対策] (v1.4.0)
   原因: ドロワー表示中は背景のページ(body)を position: fixed で固定している。
   すると文書全体の高さが画面の高さだけになり、iOS 26 の Safari は
   「文書が画面下のツールバー部分まで届いていない」と判断して、
   固定表示の要素(ドロワー)をツールバーの上端で切り落とす
   (WebKit の LocalFrameView::insetClipLayerRect の計算で確認)。
   切り落とされた部分にページの背景色が見え、これが「下の余白」だった。
   対策: ドロワー表示中は html を画面より高くして、文書がツールバー部分まで
   届いている状態にする(スクロールは overflow: hidden と body 固定で止めたまま) */
html.sp-locked {
  min-height: 150vh !important;
}

/* iOS 26 の Safari は固定表示のドロワーを画面下のツールバーの上端で切り、
   ツールバー部分には html の背景色を表示する(ここが「下の余白」に見えていた)。
   ドロワーを一番下(フッターの黒帯)までスクロールした時だけ html を黒にして、
   黒帯が画面の一番下まで続いて見えるようにする。
   (sp-at-bottom は evoqe-drawer.js が付け外しする) */
html.sp-locked.sp-at-bottom {
  background-color: #000000 !important;
}

.sp-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 0;
  /* 端で引っぱった時(跳ね返り)に見える部分の色
     上側 = 背景色 / 下側 = フッターと同じ黒(画面の下に白が見えないように)
     ※ 普段は .sp-content がこの上を覆っているので見えない
     ※ ダーク / ライトの色は evoqe-site.css の 9 で上書き */
  background-color: #000000;
  background-image: linear-gradient(to bottom, #ffffff 0, #ffffff 50%, #000000 50%, #000000 100%);
}

/* ドロワー内コンテンツの幅
   PC: 80%(左右に少し余白があり、ドロワーらしい見た目)
   スマホ: メディアクエリで 100% に上書き
   ※ Uncode の Layout Width 制限は別途 .limit-width を override して解除 */
.sp-content {
  /* 下の余白は 0(画面の一番下を黒帯=フッターで終える)
     PC の左右の余白(各10%)は padding で取る(背景色を画面幅いっぱいに塗るため) */
  padding: 72px 10% 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  background-color: #ffffff;
}

.sp-content .main-container,
.sp-content .row-container,
.sp-content .row-parent,
.sp-content .row-inner,
.sp-content .uncode-wrapper,
.sp-content .vc_row,
.sp-content .wpb_row,
.sp-content article,
.sp-content .single-image,
.sp-content figure,
.sp-content .wp-block-image {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.sp-content img {
  max-width: 100%;
  height: auto;
}

/* ========== 閉じるボタン ========== */
/* PC(ドロワー幅80%): ドロワー枠のすぐ外(右余白10%内) 
   スマホ: メディアクエリで画面右端 16px の固定位置に上書き */
.sp-close-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 9999;
  pointer-events: none;
}

.sp-close {
  position: absolute;
  top: 24px;
  right: calc(10% - 58px);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
  color: #111;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto !important;
  z-index: 9999;
}
.sp-close:hover {
  opacity: 0.55;
}
.sp-close:active {
  transform: scale(0.92);
}

.sp-loading,
.sp-error {
  padding: 120px 24px;
  text-align: center;
  color: #666;
  font-size: 14px;
  line-height: 1.7;
}
.sp-error a {
  color: #111;
  text-decoration: underline;
}

html.sp-locked,
body.sp-locked {
  overflow: hidden !important;
}

/* ========== モバイル用(768px以下) ========== */
/* スマホでは幅制限を解除して viewport 全幅に。
   動画・画像・YouTube 等は本体ページと同じく画面いっぱいに広がる。
   閉じるボタンは viewport 基準の固定位置(right: 16px)なので独立して配置。 */
@media (max-width: 768px) {
  .sp-content {
    padding: 60px 0 0;
    max-width: 100%;
  }
  .sp-close {
    top: 16px;
    width: 42px;
    height: 42px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-panel,
  .sp-backdrop {
    transition-duration: 200ms;
  }
}

/* =========================================================
   2. ドロワー内で Uncode の Layout Width 制限を解除
   ========================================================= */
.sp-content .limit-width,
.sp-content .row-parent {
  max-width: 100% !important;
  width: 100% !important;
}

/* ドロワー内の footer をビューポート全幅に拡張(PC/スマホ両方) */
/* 内容が短い時もフッター(黒帯)を画面の一番下に置く */
.sp-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.sp-content > .main-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sp-content > .main-container > #colophon {
  margin-top: auto !important; /* evoqe-site.css の 4 の margin: 0 より優先 */
}

.sp-content #colophon,
.sp-content .site-footer,
.sp-content footer[role="contentinfo"] {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* footer 内部の row-container/row も全幅を維持 */
.sp-content #colophon .row-container,
.sp-content #colophon .row,
.sp-content #colophon .row-parent,
.sp-content .site-footer .row-container,
.sp-content .site-footer .row,
.sp-content .site-footer .row-parent {
  max-width: 100% !important;
  width: 100% !important;
}

/* Uncode 中間コンテナの余白を除去(PC/スマホ両方) main-container / page-wrapper 等の default padding を打消し */
.sp-content > .main-container,
.sp-content .page-wrapper,
.sp-content .sections-container,
.sp-content .post-wrapper,
.sp-content .post-body,
.sp-content .post-content,
.sp-content .main-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   3. スマホ時、ドロワー内のコンテンツを画面いっぱいに
   (Row / Column / Uncode内部コンテナ / 動画の余白を除去)
   ========================================================= */
@media (max-width: 768px) {
  /* Row 系(WPBakery + Uncode) */
  .sp-content .row-container,
  .sp-content .row,
  .sp-content .row-parent,
  .sp-content .row-inner,
  .sp-content .wpb_row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Column 系(WPBakery のカラム) */
  .sp-content .wpb_column,
  .sp-content [class*="col-lg-"],
  .sp-content [class*="col-md-"],
  .sp-content [class*="col-sm-"],
  .sp-content [class*="col-xs-"],
  .sp-content .single-internal-gutter,
  .sp-content .single-external-gutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Uncode 独自の内部コンテナ(uncol/uncell/uncont 系) */
  .sp-content .uncol,
  .sp-content .uncoltable,
  .sp-content .uncell,
  .sp-content .uncont {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* メディア表示ラッパー(動画・画像) */
  .sp-content .single-wrapper,
  .sp-content .uncode-single-media,
  .sp-content .fluid-object,
  .sp-content .youtube-video,
  .sp-content .tmb,
  .sp-content .t-inside,
  .sp-content .t-entry-visual,
  .sp-content .t-entry-visual-tc,
  .sp-content .uncode-single-media-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* iframe(YouTube 埋め込み)を確実に全幅に */
  .sp-content iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   4. ドロワー内タイトル(Work のヘッダー)の余白を除去
   タイトル下の余白は margin-bottom の値で調整
   ========================================================= */
.sp-content #page-header,
.sp-content .header-basic,
.sp-content .header-wrapper,
.sp-content .header-main-container,
.sp-content .header-content,
.sp-content .header-content-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* タイトル自体の default margin も除去 */
.sp-content .header-title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   5. スマホ(768px以下)ではドロワー内タイトルを小さく
   サイズを変える場合は font-size の値を編集(現在 24px)
   ※ サイト全体のスマホ見出しサイズ(h3=40px)より優先させるため ID を含めて指定
   ========================================================= */
@media (max-width: 768px) {
  .sp-content #page-header .header-title,
  .sp-content #page-header .header-title span {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }
}