/* =========================================================
   ファイル名 : evoqe-site.css
   バージョン : 1.5.2
   役割       : サイト全体(全ページ)の見た目の調整
   読み込み   : uncode-child/functions.php の evoqe_enqueue_assets()
   ※ ここに書かれた内容は公開中の全ページに効きます
   ========================================================= */

/* =========================================================
   1. メニューの固定(スクロールしても動かない・フラッシュしない)
   空のトップバーも非表示
   ========================================================= */
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;
}

/* =========================================================
   2. Works グリッド: 一度表示したら再アニメーションしない
   (evoqe-site.js とセットで動作)
   ========================================================= */
.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;
}

/* =========================================================
   3. Works グリッド: スマホ(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;
  }
}

/* =========================================================
   4. フッター帯の高さを狭くする
   ========================================================= */
/* フッター要素そのもの */
body #colophon,
body .site-footer {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 帯の厚さ: 下の padding の値で調整(現在 上下8px) */
html body #colophon .row-container,
html body .site-footer .row-container {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 帯の内側の要素は余白ゼロ */
html body #colophon .row,
html body #colophon .row-parent,
html body #colophon .row-inner,
html body #colophon .wpb_row,
html body #colophon .wpb_column,
html body #colophon .uncol,
html body #colophon .uncoltable,
html body #colophon .uncell,
html body #colophon .uncont,
html body #colophon .site-info,
html body .site-footer .row,
html body .site-footer .row-parent,
html body .site-footer .row-inner,
html body .site-footer .wpb_row,
html body .site-footer .wpb_column,
html body .site-footer .uncol,
html body .site-footer .uncoltable,
html body .site-footer .uncell,
html body .site-footer .uncont,
html body .site-footer .site-info {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body #colophon .site-info,
html body .site-footer .site-info {
  line-height: 1.5 !important;
}

/* =========================================================
   5. スマホ(768px以下)の見出しサイズ
   h1=80 / h2=60 / h3=40 / h4=20 / h5=15 / h6=10
   メニューのロゴは対象外
   ========================================================= */
@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;
  }
}

/* =========================================================
   6. スマホ(768px以下)の段落サイズ p=10px
   ========================================================= */
@media (max-width: 768px) {
  p {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   7. ダーク / ライトモード(evoqe-site.js の 3 とセット)
   html に evoqe-dark / evoqe-light クラスが付くと切り替わる
   クラスが無い場合(JS が動かない時)は元のデザインのまま
   ※ Row で明示的にパレット色を選んだ場所は両モードともその色を維持
   ========================================================= */

/* [ダーク] */
/* ※ body・メニュー土台・ドロワーの色は「9. Safari の画面下の帯対策」で指定 */
html.evoqe-dark article.page-body.style-light-bg {
  background-color: #0f0f0f !important;
}

html.evoqe-dark .style-light :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.tmb *) {
  color: #f0f0f0 !important;
}

html.evoqe-dark .style-light :is(p, li, blockquote):not(.tmb *) {
  color: #c8c8c8 !important;
}

html.evoqe-dark #masthead .menu-container a,
html.evoqe-dark #masthead .text-logo {
  color: #f0f0f0 !important;
}

/* 今いる場所(選択中)とマウスを乗せた項目は半透明(ライト時の Uncode と同じ見せ方) */
html.evoqe-dark #masthead .menu-container li.active > a,
html.evoqe-dark #masthead .menu-container li.current-menu-item > a,
html.evoqe-dark #masthead .menu-smart > li > a:hover {
  color: rgba(240, 240, 240, 0.5) !important;
}

html.evoqe-dark #masthead .lines,
html.evoqe-dark #masthead .lines::before,
html.evoqe-dark #masthead .lines::after {
  background-color: #f0f0f0 !important;
}

html.evoqe-dark .sp-close,
html.evoqe-dark .sp-error a {
  color: #f0f0f0 !important;
}

html.evoqe-dark .sp-loading,
html.evoqe-dark .sp-error {
  color: #aaaaaa !important;
}

/* [スマホのメニュー(三本線で開いた時の画面)]
   Uncode はスマホ時にメニューの土台(.main-menu-container)と一覧(.menu-smart)を
   白で塗るため、両方を上書き */
@media (max-width: 959px) {
  html.evoqe-dark #masthead .main-menu-container,
  html.evoqe-dark #masthead .menu-smart,
  html.evoqe-dark #masthead .menu-sidebar-inner {
    background-color: #0f0f0f !important;
  }
  html.evoqe-light #masthead .main-menu-container,
  html.evoqe-light #masthead .menu-smart,
  html.evoqe-light #masthead .menu-sidebar-inner {
    background-color: #f5f5f0 !important;
  }
}

/* [iPhone の Safari で画面下に白い帯が出る対策]
   iOS 26 の Safari は、画面端に固定された要素の背景色でツールバー周りを塗る。
   Uncode の「ボディの枠線」(幅0で未使用、白色、画面の上下左右に固定)が
   その対象になり白い帯に見えるため、枠線を使っていない時(data-border="0")は非表示 */
.body-borders[data-border="0"] {
  display: none !important;
}

/* ※ html の背景色・メニュー開閉時の対策は「9. Safari の画面下の帯対策」に移動 */

/* [ライト(真っ白を避けてオフホワイト)] */
/* ※ body・メニュー土台・ドロワーの色は「9. Safari の画面下の帯対策」で指定 */
html.evoqe-light article.page-body.style-light-bg {
  background-color: #f5f5f0 !important;
}

html.evoqe-light .style-light :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.tmb *) {
  color: #111111 !important;
}

html.evoqe-light .style-light :is(p, li, blockquote):not(.tmb *) {
  color: #333333 !important;
}

/* [切替ボタン(☾ / 太陽)]
   円とアイコンは evoqe-site.js が SVG で同じ中心に描画
   ボタンの大きさは width / height で調整
   現在 20px = 左のロゴ「EVOQE Inc.」の文字サイズ(20px)と同じ高さ (v1.2.4) */
.theme-toggle-btn {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

.theme-toggle-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-toggle-btn:hover {
  opacity: 0.6;
}

.theme-toggle-btn:focus {
  outline: none;
}

html.evoqe-dark .theme-toggle-btn {
  color: #f0f0f0;
}

html.evoqe-light .theme-toggle-btn {
  color: #111111;
}

/* PC: メニュー項目の右端に表示 */
.theme-toggle-item {
  display: inline-flex !important;
  align-items: center;
  vertical-align: top; /* 文字の無いボタンが他のメニュー項目を押し下げないように */
  margin-left: 12px;
}

/* スマホ(Uncode のモバイルメニュー幅): ハンバーガーの左隣に表示 */
.theme-toggle-mobile {
  display: none !important;
}

@media (max-width: 959px) {
  .theme-toggle-item {
    display: none !important;
  }
  .theme-toggle-mobile {
    display: inline-flex !important;
    margin-right: 14px;
  }
}

/* =========================================================
   8. スマホのメニュー(三本線で開いた時)(evoqe-site.js の 4 とセット)
   ========================================================= */
@media (max-width: 959px) {
  /* 三本線が右にあるので、メニュー項目も右揃え
     (項目の右端 = 三本線の右端。どちらも右から 36px) */
  #masthead .menu-smart > li {
    text-align: right !important;
  }

  /* メニューを開いている間、ページ部分をタップ可能な場所として扱わせる
     iPhone の Safari はリンク以外の場所をタップしてもクリックを
     通知しないことがあるため、cursor: pointer を付けて確実に通知させる
     (タップでメニューを閉じる処理は evoqe-site.js の 4) */
  body.open-overlay-menu .main-wrapper {
    cursor: pointer;
  }
}

/* =========================================================
   9. iPhone の Safari で画面下に帯(余白)が出ないようにする
   ---------------------------------------------------------
   【仕組み】iOS 26 の Safari(WebKit)は、画面の下端近くの点にある要素から
   親要素をたどり、画面サイズ程度の固定要素(position: fixed / sticky)が
   見つかると、その要素の背景色(無い場合は画面の色を読み取った色)で
   画面下のツールバー部分を塗りつぶす。これが「下の帯」の正体。
   ただし visibility: hidden の固定要素、画面より大きく(縦が 1.05 倍超)
   はみ出す固定要素は対象外になる。
   (WebKit のソース LocalFrameView::fixedContainerEdges で確認)
   【対策】
     (1) html ...... ページ全体の色はここで塗る
     (2) body ...... 背景色なし
                     (ドロワー表示中の html の高さは evoqe-drawer.css 参照)
     (3) メニューの土台(.menu-container)... 色は ::before で塗る
     (4) スマホのメニュー ... 開いている時は項目一覧の高さまで、
                              閉じている時は高さ 0(上からスライドで開閉)
                              (Uncode が画面の伸縮時に画面いっぱいの高さを
                               書き込み、閉じているのに画面下まで届くことがあるため)
     (5) ドロワー(.sp-panel)と暗幕(.sp-backdrop)
         ... 本体を visibility: hidden にして対象外にし、
             中身と色(::before)だけ表示(evoqe-drawer.css)
   ========================================================= */

/* (1) ページ全体の色 */
html.evoqe-dark {
  background-color: #0f0f0f !important;
}
html.evoqe-light {
  background-color: #f5f5f0 !important;
}

/* (2) body は透明(下の html の色がそのまま見える) */
html.evoqe-dark body,
html.evoqe-light body,
html.evoqe-dark body.style-color-lxmt-bg,
html.evoqe-light body.style-color-lxmt-bg {
  background-color: transparent !important;
}

/* (3) メニューの土台: 本体は透明、色は ::before で塗る */
html.evoqe-dark #masthead .menu-container,
html.evoqe-light #masthead .menu-container {
  background-color: transparent !important;
}
html.evoqe-dark #masthead .menu-container::before,
html.evoqe-light #masthead .menu-container::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  pointer-events: none;
}
html.evoqe-dark #masthead .menu-container::before {
  background-color: #0f0f0f;
}
html.evoqe-light #masthead .menu-container::before {
  background-color: #f5f5f0;
}

/* (4) スマホのメニューの高さとスライドの動き (v1.4.0)
   Uncode は開く時に画面いっぱい(例: 779px)まで高さを伸ばすため、
   画面下まで届かないよう、高さは「項目一覧の高さ」(--evoqe-menu-h)までにする。
   --evoqe-menu-h は evoqe-site.js の 4 が開く直前に測って設定。
   開く / 閉じるは Uncode と同じ 0.6 秒・easeInOutCirc で上からスライド。
   開いている状態 = Uncode が付ける open-items があり、close が無い時 */
@media (max-width: 959px) {
  body #masthead .menu-container .main-menu-container {
    height: 0 !important;
    transition: height 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
  }
  body #masthead .menu-container .main-menu-container.open-items:not(.close) {
    height: var(--evoqe-menu-h, auto) !important;
  }
}

/* (5) ドロワーの色(本体の透明化と ::before は evoqe-drawer.css) */
html.evoqe-dark .sp-panel::before {
  background-color: #0f0f0f !important;
}
html.evoqe-light .sp-panel::before {
  background-color: #f5f5f0 !important;
}
/* ドロワーの中身の背景と、端で引っぱった時に見える部分(上=背景色 / 下=黒) */
html.evoqe-dark .sp-content {
  background-color: #0f0f0f !important;
}
html.evoqe-light .sp-content {
  background-color: #f5f5f0 !important;
}
html.evoqe-dark .sp-scroll {
  background-image: linear-gradient(to bottom, #0f0f0f 0, #0f0f0f 50%, #000000 50%, #000000 100%) !important;
}
html.evoqe-light .sp-scroll {
  background-image: linear-gradient(to bottom, #f5f5f0 0, #f5f5f0 50%, #000000 50%, #000000 100%) !important;
}

/* =========================================================
   10. フッター(コピーライトの黒帯)はテーマに関係なく固定
   黒帯 + 白文字のデザインを、ダーク / ライトのどちらでも維持する
   (7 の本文色の指定がフッターの文字にも効いて、ライト時に黒文字に
    なっていたため、フッター内の文字は元の白をそのまま使う)
   ========================================================= */
html.evoqe-dark #colophon :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
html.evoqe-light #colophon :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: inherit !important;
}

/* =========================================================
   11. 「上に戻る」矢印(Uncode の Scroll up ボタン)のデザイン
   Theme Options > Footer > Additional > Scroll up / Scroll up style で
   表示の有無と形(Default / Circle)は選べるが、大きさ・色・矢印の形の指定は無く、
   Uncode のライトスキンのボタン色(#303133)の四角が自動で付く。
   → 背景と枠を消し、矢印を細い線の「︿」(SVG)に差し替え、色はダーク / ライトに合わせる
   大きさは font-size(現在 38px)で変更。矢印はその 1em、タップ範囲は 2em 四方
   ========================================================= */
.footer-scroll-top i.fa-stack {
  font-size: 38px !important;
  width: 2em !important;
  height: 2em !important;
  line-height: 2em !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Font Awesome の「∧」を消して、細い線の「︿」を同じ場所に描く */
.footer-scroll-top i.fa-stack::before {
  content: "" !important;
  display: block;
  width: 1em;
  height: 1em;
  margin: 0.5em auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16 L12 8 L20 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16 L12 8 L20 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.evoqe-light .footer-scroll-top i.fa-stack {
  color: #111111 !important;
}
html.evoqe-dark .footer-scroll-top i.fa-stack {
  color: #f0f0f0 !important;
}