/* =========================================================
   Slide-in Portfolio Drawer
   v24: v22 の @media 記述を簡略化
   ========================================================= */

/* ========== ドロワー部分 ========== */
/* 幅を変えたい場合、下記 .sp-content の max-width と
   .sp-close の calc() の値を直接編集してください */

.sp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  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: #ffffff;
  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;
}

.sp-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 0;
}

/* ドロワー内コンテンツの幅
   PC: 80%(左右に少し余白があり、ドロワーらしい見た目)
   スマホ: メディアクエリで 100% に上書き
   ※ Uncode の Layout Width 制限は別途 .limit-width を override して解除 */
.sp-content {
  padding: 72px 0 80px;
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

.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 64px;
    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;
  }
}

/* =========================================================
   Grid Animation Lock
   一度表示されたグリッドは再アニメーションしない
   ========================================================= */
.sp-anim-locked {
  opacity: 1 !important;
  visibility: visible !important;
}

.sp-anim-locked .t-inside,
.sp-anim-locked .tmb-inside,
.sp-anim-locked .t-entry,
.sp-anim-locked .t-entry-visual {
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   Navbar Sticky Fix
   Uncodeが実際にfixedにしている .menu-container を最初から
   fixed にすることでフラッシュを防止
   ========================================================= */
body header#masthead .menu-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* WP管理バー表示時のオフセット(ログイン時のみ) */
body.admin-bar header#masthead .menu-container {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar header#masthead .menu-container {
    top: 46px !important;
  }
}

/* メニュー関連の遷移・アニメーションを全て無効化 */
body .menu-wrapper,
body .menu-wrapper *,
body header#masthead,
body header#masthead *,
body .menu-container,
body .menu-container * {
  transition: none !important;
  animation: none !important;
}

/* 空のトップメニューを非表示 */
body .menu-wrapper .top-menu .row-menu-inner.top-menu-cols-0 {
  display: none !important;
}
body .menu-wrapper .top-menu {
  display: none !important;
}

/* メニュー下のコンテンツがメニューに隠れないようパディング確保 */
body .main-wrapper {
  padding-top: 73px;
}

/* =========================================================
   Grid Mobile Layout
   スマホ(767px以下)では 1列 16:9 に強制
   ========================================================= */
@media (max-width: 767px) {
  .isotope-container.grid-container {
    height: auto !important;
  }

  .isotope-container.grid-container > .tmb {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
  }

  .isotope-container.grid-container > .tmb .t-inside {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
  }

  .isotope-container.grid-container > .tmb .t-entry-visual,
  .isotope-container.grid-container > .tmb .t-entry-visual-tc,
  .isotope-container.grid-container > .tmb .t-entry-visual-cont {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }

  .isotope-container.grid-container > .tmb picture,
  .isotope-container.grid-container > .tmb picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ========================================================= */
/* ドロワー内では Uncode の Layout Width 制限を解除          */
/* .limit-width クラス(Theme Options の Layout Width が適用) */
/* を上書きして、ドロワー枠の内側いっぱいまで広げる         */
/* ========================================================= */
.sp-content .limit-width,
.sp-content .row-parent {
  max-width: 100% !important;
  width: 100% !important;
}

/* ========================================================= */
/* ドロワー内の footer をビューポート全幅に拡張(PC/スマホ両方) */
/* ========================================================= */
.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;
}

/* ========================================================= */
/* スマホ用: 全ての親コンテナから padding/margin を除去      */
/* Uncode の多層コンテナの余白を全て打ち消して viewport 全幅   */
/* ========================================================= */
@media (max-width: 768px) {
  /* 外側のラッパー系 */
  .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;
  }

  /* 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;
  }
}

/* ========================================================= */

#colophon .row-container,
.site-footer .row-container {
  min-height: auto !important;
}

/* 帯の上下パディングで高さを制御(値を変えると帯の厚さが変わる) */
#colophon .row-parent,
.site-footer .row-parent {
  min-height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#colophon .uncell,
.site-footer .uncell {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Copyright テキスト自体の line-height を締める(任意) */
#colophon .site-info,
.site-footer .site-info {
  line-height: 1.5 !important;
}


/* ========================================================= */

/* footer 全体をリセット */
body #colophon,
body .site-footer,
body footer.site-footer,
body footer[role="contentinfo"] {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* row-container のリセット */
body #colophon .row-container,
body .site-footer .row-container,
body footer.site-footer .row-container {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* row 本体のリセット */
body #colophon .row,
body #colophon .row-parent,
body .site-footer .row,
body .site-footer .row-parent,
body footer.site-footer .row,
body footer.site-footer .row-parent {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* row-inner のリセット (Uncode の内部要素) */
body #colophon .row-inner,
body .site-footer .row-inner,
body footer.site-footer .row-inner {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* wpb_row, wpb_column のリセット */
body #colophon .wpb_row,
body #colophon .wpb_column,
body .site-footer .wpb_row,
body .site-footer .wpb_column {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* uncell (Uncode 特有のセル) のリセット */
body #colophon .uncell,
body #colophon .uncol,
body #colophon .uncoltable,
body #colophon .uncont,
body .site-footer .uncell,
body .site-footer .uncol,
body .site-footer .uncoltable,
body .site-footer .uncont {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* site-info テキスト(Copyright) */
body #colophon .site-info,
body .site-footer .site-info {
  line-height: 1.5 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================================= */
/* フッター帯の高さを強制的に狭くする (超強力版)             */
/* html body + ID + 全クラスの組み合わせで最大特異性を確保   */
/* Uncode の内部 CSS を確実に上書き                          */
/* ========================================================= */

/* footer 全体 + row-container の高さプロパティを全てリセット */
html body footer#colophon,
html body footer#colophon.site-footer,
html body footer.site-footer,
html body footer[role="contentinfo"],
html body #colophon .row-container,
html body #colophon.site-footer .row-container,
html body #colophon.site-footer .row-container.style-dark-bg,
html body #colophon.site-footer .row-container.footer-center,
html body #colophon.site-footer .row-container.footer-last,
html body #colophon.site-footer .row-container.style-dark-bg.footer-center.footer-last,
html body .site-footer .row-container,
html body .site-footer .row-container.footer-last {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* row-container の上下パディングだけで帯の高さを決める */
html body #colophon.site-footer .row-container,
html body #colophon.site-footer .row-container.footer-last,
html body .site-footer .row-container.footer-last {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* row とその子孫は全て高さ 0 リセット + パディング 0 */
html body #colophon.site-footer .row,
html body #colophon.site-footer .row.row-parent,
html body #colophon.site-footer .row-parent,
html body .site-footer .row,
html body .site-footer .row-parent {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* site-info (Copyright テキスト自体) */
html body #colophon.site-footer .site-info,
html body #colophon.site-footer .site-info.uncell,
html body #colophon.site-footer .uncell,
html body #colophon.site-footer .uncell.pos-middle,
html body .site-footer .site-info,
html body .site-footer .site-info.uncell {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

/* Uncode の内部ラッパー(万一存在した場合) */
html body #colophon .uncol,
html body #colophon .uncoltable,
html body #colophon .uncont,
html body .site-footer .uncol,
html body .site-footer .uncoltable,
html body .site-footer .uncont {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ========================================================= */
/* スマホ用フォントサイズ(768px 以下)                       */
/* Uncode が自動でスケール縮小してしまうのを打ち消し、        */
/* 独自のサイズで指定                                        */
/* ただしメニューロゴ(.text-logo, .main-logo, .logo-skinnable)*/
/* は対象外にして、Uncode の Logo Height 設定が効くようにする */
/* ========================================================= */
@media (max-width: 768px) {
  h1:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h1:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 80px !important;
    line-height: 1.1 !important;
  }

  h2:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h2:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 60px !important;
    line-height: 1.15 !important;
  }

  h3:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h3:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }

  h4:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h4:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  h5:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h5:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  h6:not(.text-logo):not(.main-logo):not(.logo-skinnable),
  .h6:not(.text-logo):not(.main-logo):not(.logo-skinnable) {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
}

/* ========================================================= */
/* ドロワー内 Work 投稿の Header 余白を除去                  */
/* #page-header の周りの余白を全て潰してタイトルを詰める     */
/* ========================================================= */
.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;
}

/* ========================================================= */
/* スマホ用の段落(<p>)フォントサイズ                        */
/* Uncode の Default Font Size の自動縮小を独自の値で上書き   */
/* ========================================================= */
@media (max-width: 768px) {
  p {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }
}