/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.0.0
*/


/* ーーーーーーー埋め込みマップーーーーーーーー */

/* ping 2025-10-06 ... */



.map-embed{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    isolation: isolate;     /* ← これで独立したスタックを作る */
    z-index: 0;             /* 念のための初期化 */
  }
  .map-embed iframe{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
  }
  
  /* 念のための保険 */
  .wp-block-column iframe { max-width: 100%; }


  /* ーーーーーーーーヘッダー分の余白ーーーーーーーーーーー*/


  /* デフォルトのヘッダー高（PC想定） */
:root { --header-h: 100px; }

/* アンカー(#price, #reserve, #access など)に余白を足す */
:target { scroll-margin-top: var(--header-h); }

/* 管理バーが出ている時（ログイン中）は更に足す */
.admin-bar :target { scroll-margin-top: calc(var(--header-h) + 32px); }

/* モバイルでヘッダーが低いなら上書き */
@media (max-width: 782px){
  :root { --header-h: 100px; }     /* 実寸に合わせて調整 */
  .admin-bar :target { scroll-margin-top: calc(var(--header-h) + 46px); }
}

/* 会社概要テーブル */
.company-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background: #fff;
    border: 1px solid #87B3BB;
  }
  
  /* 項目セル */
  .company-table th{
    width: 30%;
    background: #E7F2F5;
    color: #234B54;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #87B3BB;
    vertical-align: middle;
    white-space: nowrap; /* 改行させたくない場合 */
  }
  
  /* 内容セル */
  .company-table td{
    /* color: #333; */
    text-align: left;         /* ← 左寄せに変更 */
    padding: 12px 16px;       /* 行間にゆとり */
    border: 1px solid #87B3BB;
    vertical-align: middle;
    word-break: break-word;
  }
  
  /* 行ごとに交互色（オプション） */
  .company-table tr:nth-child(even) td {
    background: #fafcfd;
  }
  
  /* スマホ用調整 */
  @media (max-width: 600px){
    .company-table{ font-size: 15px; }
    .company-table th, .company-table td{ padding: 10px 12px; }
  }
  



  
/* キラッと光る演出 */
.wp-block-image.dm-banner {
    position: relative; /* 擬似要素を重ねるため */
   
    overflow: hidden;
  }
  
  .wp-block-image.dm-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.6) 45%,
      transparent 60%
    );
    transform: translateX(-120%);
    animation: dm-shine 5s linear infinite;
    pointer-events: none;
  }
  
  /* アニメーション定義（右上→左下にスッと光が走る） */
  @keyframes dm-shine {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(140%); }
    100% { transform: translateX(140%); }
  }
  
  /* 動きを苦手なユーザー配慮 */
  @media (prefers-reduced-motion: reduce) {
    .wp-block-image.dm-banner::after {
      animation: none;
    }
  }
  
  

  /* ーーーーー料金表ーーーーーーー */


  /* 基本 */
.price-table { margin-block: 1.25rem 2rem; }
.price-table table { width: 100%; border-collapse: collapse; table-layout: fixed; background:#fff; }
.price-table caption { caption-side: top; text-align: left; font-weight: 700; margin-bottom: .5rem; font-size: medium;}
.price-table th, .price-table td { border: 1px solid #ddd; padding: .6rem .8rem; vertical-align: middle; }
.price-table thead th { background:#f7f7f8; }
.price-table td.is-price, .price-table th.is-price { text-align: right; font-variant-numeric: tabular-nums; }
.price-table tbody tr:nth-child(even){ background:#fafafa; }
.price-note { margin-top: .5rem; font-size: .8em; }

.price-table th {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 600;   /* 少し太字 */
    font-size: 0.9em;   /* 少し小さめに */
  }
  

/* スマホ時の料金表調整 */
@media (max-width: 680px) {
    .price-table table {
      font-size: 0.8em;   /* 全体の文字を少し小さく */
      table-layout: fixed; /* 幅を固定配分 */
    }
  
    .price-table th,
    .price-table td {
      padding: .4rem .5rem; /* 余白を詰めてコンパクトに */
      word-break: break-word; /* 犬種名が長くても改行 */
    }
  
    /* 列幅の調整 */
    .price-table th:first-child,
    .price-table td:first-child {
      width: 50%;   /* 犬種列を広めに */
    }
    .price-table th:nth-child(2),
    .price-table td:nth-child(2),
    .price-table th:nth-child(3),
    .price-table td:nth-child(3) {
      width: 25%;   /* 価格列は狭く */
      text-align: right; /* 数字を右寄せ */
    }

   
      
  }
  

/* ーーーーボタンのフォント調整ーーーーー */

  .wp-block-button__link {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  }
  


  /* ＝＝＝＝タイトルを入力してCSSで非表示にする（おすすめ）＝＝＝ */

  .wp-block-post-title {
    display: none;
  }

  /* ナビゲーションのInstagramアイコン */
.nav-instagram a {
    display: inline-block;
    width: 50px;   /* お好みで */
    height: 50px;
    background: url('https://otaru-dogsalon-rusk.com/test/wp-content/uploads/2025/09/icons8-インスタグラム-48-1.png') no-repeat center;
    background-size: contain;
    text-indent: -9999px; /* テキストは隠す */
    overflow: hidden;
  }



  
/*------------ デスクトップ用のヘッダー高さ調整 ---------------*/


@media (min-width: 1025px) {
    header.custom-header {
      min-height: 100px !important; /* ← 高さを直接指定 */
      
    }
  
    /* 内側のグループ（余計な余白を削る） */
    header.custom-header .wp-block-group {
      margin: 0 !important;
      padding: 0 !important;
    }
  }

   /* ロゴ画像を小さく */
   header.custom-header img.custom-logo {
    padding: 10px;
  }
  
/* ---------------------------------------------------------- */



/* ====== モバイル（～1024px）でヘッダーを少しスリムに ====== */



@media (max-width: 1024px) {
    /* ヘッダー上下の余白 */
    /* header.custom-header {
      
      min-height: auto !important;
    } */
  
    /* ロゴを少し小さく（どちらか片方でOK） */
    header.custom-header .wp-block-site-logo img,
    header.custom-header img.custom-logo {
      max-height: 80px;   
      height: auto;
      width: auto;
      padding: 0px;
    }
  
   
    /* header.custom-header .wp-block-navigation__responsive-container-open svg {
      width: 36px;
      height: 36px;
      padding-right: 8px;
    } */
  
    /* ヘッダー直後の余白（block-gap）を消して帯を出さない */
    .wp-site-blocks > header.custom-header + * {
      margin-top: 0 !important;
    }
  }


  /* ====== タブレット（768px〜1024px）用のヘッダー調整 ====== */


@media (min-width: 300px) and (max-width: 1024px) {
    /* header.custom-header {
        min-height: 80px !important; 
        
      } */
    
      /* 内側のグループ（余計な余白を削る） */
      header.custom-header .wp-block-group {
        margin: 0 !important;
        padding: 0 !important;
      }
    }
  
     /* ロゴ画像を小さく */
     header.custom-header img.custom-logo {
      padding: 10px;
      padding-left: 14px;
  }
  
/* =========================
   〜1024px：ハンバーガー
   1025px〜：PCは横並び
   ========================= */

/* 〜1279px：ハンバーガー表示（WPのオーバーレイに任せる） */
@media (max-width: 1024px){
    /* ハンバーガーを出す（右寄せしたい場合は margin-left:auto） */
    .custom-header .wp-block-navigation__responsive-container-open{
      display: inline-flex !important;
      margin-left: auto;
      margin-right: 5px;
    }
  
    /* ▼未オープン時だけ中身(UL)を隠す ─ 開いたら表示される */
    .custom-header .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__container{ display: none !important; }
  
    /* 保険：is-menu-open時は表示（WPが同じ要素をオーバーレイに移動するため） */
    .custom-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{ display: block !important; }
  
    /* 旧コードの「常時 display:none」は使わない */
  }
  
  /* 1280px〜：PCは横並びで常時表示、ハンバーガーは隠す */
  @media (min-width: 1025px){
    /* ハンバーガー非表示 */
    .custom-header .wp-block-navigation__responsive-container-open,
    .custom-header .wp-block-navigation__responsive-container-open[style]{
      display: none !important;
    }
  
    /* オーバーレイ容器を通常フロー化（=ヘッダー内でそのまま表示） */
    .custom-header .wp-block-navigation__responsive-container[hidden]{
      display: block !important;
    }
    /* .custom-header .wp-block-navigation__responsive-container{
      display: block !important;
      position: static !important;
      inset: auto !important;
      background: transparent !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
    } */
  
    /* 内側ラッパは溶かす → 中身だけ流す */
    .custom-header .wp-block-navigation__responsive-container-content{
      display: contents !important;
    }
  
    /* 実際のメニュー(UL)を横並び */
    .custom-header .wp-block-navigation__container{
      display: flex !important;
      flex-direction: row !important;
      align-items: center;
      gap: var(--wp--style--block-gap, 1.5rem);
    }
  
    /* PCでは閉じるボタン不要 */
    .custom-header .wp-block-navigation__responsive-container-close{
      display: none !important;
    }
  }
  @media (min-width: 1025px){
    /* ハンバーガーを消す */
    /* .custom-header .wp-block-navigation__responsive-container-open,
    .custom-header .wp-block-navigation__responsive-container-open[style]{
      display: none !important;
    } */
  
    /* オーバーレイの器を通常フロー化 */
    /* .custom-header .wp-block-navigation__responsive-container[hidden]{
      display: block !important;
    }
    .custom-header .wp-block-navigation__responsive-container{
      display: block !important;
      position: static !important;
      inset: auto !important;
      background: transparent !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
    } */
  
    /* 内側ラッパを溶かして中身を直で流す */
    /* .custom-header .wp-block-navigation__responsive-container-content{
      display: contents !important;
    } */
  
    /* ★ここ重要：PC時は UL を必ず表示に戻す */
    /* .custom-header .wp-block-navigation__container{
      display: flex !important;
      flex-direction: row !important;
      align-items: center;
      gap: var(--wp--style--block-gap, 1.5rem);
    } */
  
    /* PCでは閉じるボタンは不要 */
    /* .custom-header .wp-block-navigation__responsive-container-close{
      display: none !important;
    } */
  }



  /* -----------スライダー-------------- */
 
  
  /* スマホ（〜599px）のときは高さを 400px に */
@media (max-width: 599px) {
    .n2-ss-slider {
      height: 480px !important;
    }
  }
  
  /* タブレット（600px〜1024px）は 600px に */
  @media (min-width: 600px) and (max-width: 2000px) {
    .n2-ss-slider {
      height: 560px !important;
    }
  }
  
  
  /* デフォルトではスペーサー非表示 */
.spacer-desktop {
    display: none;
  }
  
  /* PCサイズ(例: 1025px以上)でだけ表示 */
  @media (min-width: 1025px) {
    .spacer-desktop {
      display: block;
      height: 80px; /* 必要に応じて調整 */
    }
  }
  

/* ヘッダーの見た目を整えるためロゴとタイトルの隙間調整 */
  .wp-container-core-group-is-layout-7a92790e{
    gap: 2px;
  }







/* =========================
  Navigation – clean final (mobile ≤1024px)
  右上寄せカード + ×をハンバーガー位置に
========================= */

/* ベース：下線を消し、背景画像は壊さない */
/* header.custom-header .wp-block-navigation .wp-block-navigation-item__content{
    min-height:44px; display:flex; align-items:center;
    background-color:transparent !important;
    border:0; box-shadow:none;
    text-decoration:none !important;
    text-underline-offset:initial !important;
    text-decoration-thickness:initial !important;
  } */
  /* header.custom-header .wp-block-navigation .wp-block-navigation-item__content:hover,
  header.custom-header .wp-block-navigation .wp-block-navigation-item__content:focus,
  header.custom-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
  header.custom-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
    text-decoration:none !important; outline:none !important; box-shadow:none !important;
    background-color:transparent !important;
  } */
  /* ハンバーガー/クローズボタンの枠・背景を消す */
  header.custom-header .wp-block-navigation__responsive-container-open,
  header.custom-header .wp-block-navigation__responsive-container-close{
    background-color:transparent !important; border:0 !important;
    box-shadow:none !important; outline:none !important; appearance:none;
  }
  
  /* ── 調整用変数（必要ならここだけ変えればOK） ── */
  :root{
    /* --header-h: 100px;                 */
    --nav-right-gap: 0px;           
    /* --nav-card-top-margin: 0px;           */
  
    /* --nav-card-w: min(80vw, 200px);   */
    --nav-card-bg: #7b9cacda;
    --nav-card-fg: #fff;              /* 文字色 */
    --nav-card-r: 18px;               /* 角丸 */
    --nav-card-pad: 18px 20px;        /* 内側余白 */
    --nav-card-shadow: 0 14px 36px rgba(0,0,0,.18);
  
    /* --nav-close-size: 24px;            */
    /* --nav-tap: 44px;                   */
  
    /* 管理バー（ログイン時）のオフセット対策：未ログイン時は 0px のまま */
    /* --header-offset: 0px; */
  }

  /* body.admin-bar{ --header-offset: 32px; }      */

 /* モバイル 管理バー */

  /* @media (max-width:782px){
    body.admin-bar{ --header-offset: 46px; }   
  } */
  
  /* ── Mobile/Tablet（～1024px） ── */
  @media (max-width:1024px){
  
    /* オーバーレイ（背景ぼかし） */
    header.custom-header .wp-block-navigation__responsive-container.is-menu-open{
      background: rgba(0,0,0,.28) !important;
      backdrop-filter: saturate(110%) blur(3px);
      -webkit-backdrop-filter: saturate(110%) blur(3px);
    }
  
    /* カードの“器”をヘッダー右上に固定（ハンバーガー付近） */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-content,
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{
      position: fixed !important;
      top:  calc(var(--header-offset) + var(--header-h) + var(--nav-card-top-gap)) !important;
      right: calc(var(--nav-right-gap) + env(safe-area-inset-right)) !important;
      left: auto !important; bottom: auto !important;
      /* transform: none !important;                 */
      width: var(--nav-card-w) !important;
      margin: 0 !important; z-index: 100002 !important;
  
      /* フェードイン（transformに触れない） */
      /* opacity: 0; animation: navCardFade .18s ease-out .02s forwards;
     */
      
    }
  
    /* カードの見た目（UL） */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
      width:100% !important; margin:0 !important;
      background: var(--nav-card-bg) !important; color: var(--nav-card-fg) !important;
      border-radius: var(--nav-card-r) !important; padding: var(--nav-card-pad) !important;
      box-shadow: var(--nav-card-shadow) !important; gap:.25rem !important;
      backdrop-filter: saturate(110%) blur(6px);
      -webkit-backdrop-filter: saturate(110%) blur(6px);
    }
  
    /* 各行 */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item{
      margin:0 !important; border-bottom:1px solid rgba(255,255,255,.24);
    }
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:last-child{ border-bottom:0; }
   */


    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content{
      padding:.6rem 0 !important; min-height:44px; line-height:1.32;
      font-size: clamp(17px, 4.6vw, 19px);
      background-color:transparent !important; box-shadow:none !important; outline:none !important;
    }
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible{
      outline:2px solid currentColor; outline-offset:2px;
    } */
  
    /* 背景画像アイコン行（例：Instagram）は区切り無し */
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.nav-icon{ border-bottom:0; }
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.nav-icon > .wp-block-navigation-item__content::after{
      content:none !important;
    } */
  
    /* ×ボタンを“ハンバーガー位置”に */
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-close{
      position: fixed !important; */
      /* ヘッダー縦中央（管理バー分も考慮） */
      /* top: calc(
        var(--header-offset) + (var(--header-h) - var(--nav-close-size)) / 2
      ) !important;
      right: calc(var(--nav-right-gap) + env(safe-area-inset-right)) !important;
  
      width: var(--nav-tap) !important; height: var(--nav-tap) !important;
      display:flex !important; align-items:center !important; justify-content:center !important;
      background:transparent !important; border:0 !important; box-shadow:none !important;
      z-index:100003 !important;
    } */
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-close svg{
      width: var(--nav-close-size) !important; height: var(--nav-close-size) !important;
    } */
  }
  
  /* フェード */
  /* @keyframes navCardFade { to { opacity: 1; } } */


  /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

  
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */





  /* ── 位置合わせ用の変数（必要ならここだけ触る） ── */
:root{
    /* --header-h: 100px;                                 */
    --nav-card-w: min(80vw, 200px);                     
    /* --nav-card-top-gap: -40px;                            */
    /* --nav-close-size: 24px;                            */
    /* --nav-tap: 44px;                                    */
    /* テーマの“右パディング”をそのまま利用（= ハンバーガーの基準） */
    /* --header-side-pad: var(--wp--style--root--padding-right, 0px); */
  
    /* ほんの少しの微調整ノブ（横/縦）。合っていれば 0 のままでOK */
    /* --nav-right-extra: +30px;   
    --nav-top-nudge: +30px;      */
  }
  
  @media (max-width:1024px){
    /* カード本体（右上固定。中央寄せは無効化） */
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-content{
      position: fixed !important;
      top:   calc(var(--header-h) + var(--nav-card-top-gap)) !important;
      right: calc(var(--header-side-pad) + var(--nav-right-extra) + env(safe-area-inset-right)) !important;
      left:auto !important; bottom:auto !important; transform:none !important;
      width: var(--nav-card-w) !important;
      margin:0 !important; z-index:100002 !important;
      opacity:0; animation: navCardFade .18s ease-out .02s forwards;
    } */
  
    /* ✕ボタンを“ハンバーガーと同じ位置”に */
    /* header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-close{
      position: fixed !important;
      top:   calc( (var(--header-h) - var(--nav-close-size))/2 + var(--nav-top-nudge) ) !important;
      right: calc(var(--header-side-pad) + var(--nav-right-extra) + env(safe-area-inset-right)) !important;
  
      width: var(--nav-tap) !important; height: var(--nav-tap) !important;
      display:flex !important; align-items:center !important; justify-content:center !important;
      background:transparent !important; border:0 !important; box-shadow:none !important;
      z-index:100003 !important;
    }
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-container-close svg{
      width: var(--nav-close-size) !important; height: var(--nav-close-size) !important;
    } */
  }
  
/* === Mobile (≤1024px) の位置ズレ修正パッチ === */
@media (max-width:1024px){
    :root{
      /* --header-h: 100px;               */
      /* --nav-tap: 44px; */
      --icon-size: 36px;            
      --nav-close-size: 36px;       
      --header-side-pad: 20px;       
      --glyph-offset: 0px;          
    }
  
    /* ハンバーガー（開くボタン）を正規化：SVGの padding を消してズレの元を断つ */
    /* header.custom-header .wp-block-navigation__responsive-container-open{
      padding: 0 !important;
      width: var(--nav-tap) !important;
      height: var(--nav-tap) !important;
      margin-left: auto;
      display: inline-flex !important;
      align-items: center; justify-content: center;
    } */
    header.custom-header .wp-block-navigation__responsive-container-open svg{
      width: var(--icon-size) !important;
      height: var(--icon-size) !important;
      padding: 0 !important;           /* ← ここが “8pxズレ” の原因でした */
      display: block;
    }
  
    /* ✕ボタン：ハンバーガーと同じ位置・同じサイズで固定 */
    header.custom-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close{
     /* position: fixed !important;  */
      /* inset: auto !important;          */
      /* top: calc( (var(--header-h) - var(--nav-close-size)) / 2 ) !important; */
      /* right: calc(var(--header-side-pad) + var(--glyph-offset) + env(safe-area-inset-right)) !important; */
      /* left: auto !important; bottom: auto !important; */
      /* transform: none !important; */
      /* width: var(--nav-tap) !important; */
      /* height: var(--nav-tap) !important; */
      /* display: flex !important; align-items: center !important; justify-content: center !important; */
      /* background: transparent !important; border: 0 !important; box-shadow: none !important; */
      z-index: 100003 !important;
      /* outline: 2px solid hotpink !important;  ← デバッグ用。合ったら消してOK */
    }
    header.custom-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg{
      width: var(--nav-close-size) !important;
      height: var(--nav-close-size) !important;
    }
  }
  



  /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ===== Mobile ≤1024px：×をハンバーガーと同位置・同サイズに ===== */
:root{
    --header-h: 100px;            /* 全画面でヘッダー高を固定 */
    --header-side-pad: 0px;      /* ヘッダー右の内側余白（ハンバーガーと合わせる） */
    --nav-tap: 44px;              /* タップ領域 */
    --nav-close-size: 36px;       /* ×アイコン実寸 */
       
  }
  
  @media (max-width:1024px){
    /* ハンバーガー/× のアイコン実寸を揃える（SVGの余白ゼロ） */
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg{
      width: var(--nav-close-size) !important;
      height: var(--nav-close-size) !important;
      padding: 0 !important;
      display: block;
    }
  
    /* ×ボタン本体（グローバルに指定：header スコープ不要） */
    .wp-block-navigation__responsive-container-close{
      position: fixed !important;
      top:   calc((var(--header-h) - var(--nav-close-size))/2) !important;
      right: calc(var(--header-side-pad) + env(safe-area-inset-right)) !important;
      left: auto !important; bottom: auto !important; transform: none !important;
  
      width: var(--nav-tap) !important;
      height: var(--nav-tap) !important;
      padding: 0 !important; margin: 0 !important;
      background: transparent !important; border: 0 !important; box-shadow: none !important;
      z-index: 100003 !important;
    }
  }
  





  /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ===== 600px〜1024px：ハンバーガー（開くボタン）だけ縦位置を中央に固定 ===== */
@media (min-width:600px) and (max-width:1024px){
    /* ヘッダーを基準座標に */
    header.custom-header{ position: relative !important; }
  
    /* 開くボタンだけを絶対配置でセンタリング */
    header.custom-header .wp-block-navigation__responsive-container-open{
      position: absolute !important;
      top: 50% !important;                      /* ヘッダーの縦中央 */
      transform: translateY(-50%) !important;   /* ちょうど中央に補正 */
     
      /* 見た目/ヒット領域を正規化（任意） */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px !important;
      height: 44px !important;
      line-height: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
    }
  
    /* アイコン実寸（必要なら調整） */
    header.custom-header .wp-block-navigation__responsive-container-open svg{
      width: 36px !important;
      height: 36px !important;
      display: block !important;
    }

    /* 右端のオフセットを1か所で管理 */
:root { --icon-edge: 5px; }

@media (min-width:600px) and (max-width:1024px){
  /* ハンバーガー（開くボタン） */
  header.custom-header .wp-block-navigation__responsive-container-open{
    right: calc(var(--icon-edge) + env(safe-area-inset-right)) !important;
    padding-right: 0 !important; /* 内側の余白はゼロにしておく */
  }
  }
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* PCのメニュー間隔とタップ余白（必要なら数値だけ変えてOK） */
:root{
    --nav-gap-desktop: clamp(1.2rem, 2.2vw, 2.8rem); /* 項目間のすき間 */
    --nav-pad-desktop: clamp(6px, .6vw, 10px);       /* リンク左右の余白 */
  }
  
  @media (min-width:1025px){
    /* UL（メニュー本体）の間隔を広げる */
    header.custom-header .wp-block-navigation__container{
      display: flex !important;
      flex-wrap: nowrap;                     /* 折り返し防止（任意） */
      gap: var(--nav-gap-desktop) !important;/* ← ここが“項目間” */
    }
  
    /* 各リンクのクリック余白も少し足す（任意） */
    header.custom-header .wp-block-navigation .wp-block-navigation-item__content{
      padding-inline: var(--nav-pad-desktop) !important;
      min-height: 44px;                      /* アクセシビリティ確保 */
      align-items: center;
    }
  
    /* まれに個別 margin が邪魔するテーマ用の保険（任意） */
    header.custom-header .wp-block-navigation .wp-block-navigation-item{
      margin: 0 !important;
    }
  }

  

  /* ===== PC（≥1025px）：ナビ間隔＆縦位置を統一 ===== */
@media (min-width:1025px){

    /* 好みで調整するノブ */
    :root{
      --nav-gap-desktop: clamp(16px, 2vw, 40px);    /* 項目どうしの隙間 */
      --nav-pad-desktop: clamp(6px, .9vw, 12px);    /* 各リンクの左右パディング */
    }
  
    /* UL：横並びの隙間 */
    header.custom-header .wp-block-navigation__container{
      gap: var(--nav-gap-desktop) !important;
      align-items: center !important;
    }
  
    /* A：縦中央＆左右パディング、行間リセット */
    header.custom-header .wp-block-navigation .wp-block-navigation-item__content{
      display: inline-flex !important;
      align-items: center !important;
      padding-inline: var(--nav-pad-desktop) !important;  /* ← ここがポイント */
      padding-block: 10px !important;                     /* 触りたい人は調整可 */
      min-height: 44px;
      line-height: 1 !important;
      margin: 0 !important;
    }
  
    /* ラベル側の行高ブレを抑える（“店舗情報”だけ下がる対策） */
    header.custom-header .wp-block-navigation .wp-block-navigation-item__label{
      line-height: 1 !important;
      display: inline-block !important;
      margin: 0 !important;
    }
  
    /* li にパディングが付いていた場合の保険 */
    header.custom-header .wp-block-navigation .wp-block-navigation-item{
      padding: 0 !important;
    }
  }

  
  /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 
/* ==== Mobile ナビ（～1024px）：行とボーダーの間隔を統一 ==== */
@media (max-width:1024px){

    /* カード本体：行間ギャップをゼロにして、外側だけ余白 */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
      gap: 0 !important;                      /* ← これが最重要（UL の隙間を消す） */
      padding-top: 16px  !important;          /* カード外枠の余白だけここで確保 */
    }
  
    /* 各行：padding を li に集約し、ボーダーは li に引く */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item{
      margin: 0 !important;
      padding: 16px 0 !important;             /* ← 文字とボーダーの上下間隔 */
      border-bottom: 1px solid rgba(255,255,255,.28) !important;
    }
    /* 最後の行はボーダー無し */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:last-child{
      border-bottom: 0 !important;
    }
  
    /* a 要素（_content）の余白は 0。高さは li の padding で決める */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content{
      padding: 0 !important;
      min-height: 0 !important;
      line-height: 1.32 !important;           /* ラベルの行高だけ軽くキープ */
      display: flex; align-items: center;
    }
  
    /* 画像アイコン行（Instagramなど）は区切り線を消す＆少し上に余白 */
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.nav-instagram,
    header.custom-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.nav-icon{
      border: 0 !important;
      padding-top: 16px !important;
      padding-bottom: 8px !important;
    }
  }
  



  /* ===== ナビのリンク：全サイズ共通で“下線なし” & 押下中に色変更 ===== */

/* 好みの色をここで調整（通常色/ホバー/押下） */
:root{
    --nav-link-color: inherit;   /* ふだんの色（今の色を踏襲） */
    --nav-link-hover:  #c0e9fd;  /* マウスホバー時（任意） */
    --nav-link-active: #66e8ff;  /* クリック/タップ中の色 */
  }
  
  header.custom-header .wp-block-navigation a,
  header.custom-header .wp-block-navigation .wp-block-navigation-item__content{
    text-decoration: none !important;             /* 下線を消す */
    text-underline-offset: initial !important;
    text-decoration-thickness: initial !important;
    box-shadow: none !important;                  /* WPのフォーカス影を無効 */
    background-color: transparent !important; /* 画像は残して背景色だけ透明に */
    color: var(--nav-link-color) !important;      /* 通常色 */
    transition: color .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;     /* iOSの青ハイライト消し */
  }
  
  /* ホバー/フォーカス/現在ページでも下線は出さない */
  header.custom-header .wp-block-navigation a:hover,
  header.custom-header .wp-block-navigation a:focus,
  header.custom-header .wp-block-navigation a:focus-visible,
  header.custom-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
    text-decoration: none !important;
    box-shadow: none !important;
  }
  
  /* クリック/タップ中だけ色を変える（“押した瞬間”のフィードバック） */
  header.custom-header .wp-block-navigation a:active,
  header.custom-header .wp-block-navigation .wp-block-navigation-item__content:active{
    color: var(--nav-link-active) !important;
  }
  
  /* マウス環境だけホバー色を効かせたい場合（任意） */
  @media (hover:hover){
    header.custom-header .wp-block-navigation a:hover{
      color: var(--nav-link-hover) !important;
    }
  }








/* 親：グループに .dm-copy-grid を付与 */
.dm-copy-grid{
    /* display: grid; */
    grid-template-columns: repeat(2, minmax(0,1fr));  /* PC/タブレット：2列 */
    gap: 16px;                                        /* ← 余白は gap に一本化 */
    align-items: start;
  }
  
  /* スマホは縦並び */
  @media (max-width: 767px){
    .dm-copy-grid{
      grid-template-columns: 1fr;
    }
  }
  
  /* カード */
  .dm-copy-card{
    display: flow-root;         /* ← 新しいBFCを作って重なり/浮動化の干渉を遮断 */
    border: 2px solid #87b3bb;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin: 0;                  /* ← margin-blockを削除（gapに任せる） */
    box-sizing: border-box;     /* 念のため */
    contain: layout paint;      /* レイアウト/ペイント境界を作り描画のはみ出しを防止 */
  }
  
  .dm-copy-card__head{
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  
  .dm-copy-card__title{
    font-size: clamp(16px, 2.2vw, 20px);
    margin: 0;
    padding-left: 10px;
  }
  
  /* ボタン */
  .dm-copy-btn{
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    background: #87b3bb;
    color: #fff;
    transition: transform .04s ease, opacity .2s ease;
  }
  .dm-copy-btn:active{ transform: scale(.98); }
  .dm-copy-btn.is-copied{ background: #5aa06a; }
  
  @media (max-width: 767px){
    .dm-copy-btn{ width: 100%; }
  }
  
  /* テキストエリア */
  .dm-copy-text{
    box-sizing: border-box;     /* ← 高さ/幅計算のズレ防止 */
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: #fafafa;
    resize: vertical;
    max-height: 200px;          /* PC/タブレットはスクロール */
    overflow: auto;
    line-height: 1.6;
    color: #4b4b4b;
  }
  
  @media (max-width: 767px){
    .dm-copy-text{
      max-height: none;         /* スマホは全文表示で読みやすく */
    }
  }
  
  /* 補足テキスト */
  .dm-copy-note{
    font-size: 12px;
    color: #666;
    margin: 8px 0 0;
  }
  .dm-copy-feedback{
    font-size: 12px;
    color: #2e7d32;
    min-height: 1em;
    margin-top: 6px;
  }
  
  /* スマホ微調整 */
  @media (max-width: 767px){
    .dm-copy-card{ padding: 14px; }
    .dm-copy-card__title{ font-size: 16px; }
  }
  .dm-copy-btn{
    display: inline-block;
    min-width: 130px;   /* 通常時：小さすぎ防止 */
    max-width: 230px;   /* 通常時：大きすぎ防止 */
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    appearance: none;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    background: #87b3bb;
    color: #fff;
    transition: transform .04s ease, opacity .2s ease;
  }
  
  .dm-copy-btn:active{ transform: scale(.98); }
  .dm-copy-btn.is-copied{ background: #5aa06a; }
  
  /* 縦並び（スマホサイズ）のときだけボタン幅を固定 */
  @media (max-width: 767px){
    .dm-copy-btn{
      width: 130px;     /* ← 好きな幅に固定（例：180px） */
      min-width: unset; /* 最小幅指定をリセット */
      max-width: unset; /* 最大幅指定をリセット */
    }
  }
    
  /* 横並び時だけカードの高さをそろえる */
@media (min-width: 768px){
    .dm-copy-grid{
      align-items: stretch;       /* 各セルの高さを揃える */
    }
    .dm-copy-grid > .dm-copy-card{
      height: 100%;               /* 行の高さにフィット */
      display: flex;              /* 中身を上下で整えるために縦Flexに */
      flex-direction: column;
      box-sizing: border-box;
    }
  
    /* 中身の配置バランス（任意）：本文エリアを伸縮させる */
    .dm-copy-card__head{ margin-bottom: 8px; }
    .dm-copy-text{
      flex: 1 1 auto;             /* テキストエリアが余白を受け持つ */
      min-height: 140px;          /* 低すぎ防止。必要なら調整 */
      max-height: 280px;          /* 高すぎ防止。必要なら調整 */
      overflow: auto;
    }
  
    /* フッターテキストは下寄せ（任意） */
    .dm-copy-note{ margin-top: 8px; }
    .dm-copy-feedback{ margin-top: 6px; }
  }
  


  /* =============足跡演出＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 予約セクション（最外ラッパーに has-paw-trail が付いている前提） */
.has-paw-trail{
    /* position: relative; */
    isolation: isolate;   /* セクション内で独立した重なり順を作る */
    overflow: clip;       /* はみ出し防止（古い環境は overflow:hidden でもOK） */
    z-index: 0;           /* 基準は0でOK */
  }
  
  /* 足跡レイヤー：セクション内で “最背面の子” にする */
  .has-paw-trail > .paw-trail{
    position: absolute !important;
    inset: 0;
    pointer-events: none;
           /* ← 背景側（子の中で最も低く） */
    opacity: .22;         /* 背景らしく少し薄め（お好みで） */
  }
  
  /* セクション内の通常コンテンツは常に足跡より上 */
  .has-paw-trail > *:not(.paw-trail){
    position: relative;
    z-index: 1;           /* ← コンテンツを前面へ固定 */
  }
  
  /* 1歩分（“足跡1個だけ”のSVGを指定している想定） */
  .paw{
    position:absolute;
    left:var(--x); top:var(--y);
    width: 60px;                 /* 大きさ（お好みで） */
    aspect-ratio:1;
    background:url(https://otaru-dogsalon-rusk.com/test/wp-content/uploads/2025/09/paw-1.svg) center/contain no-repeat;
    opacity:0;
    transform: translateY(8px) rotate(var(--r));
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
    animation: pawIn .6s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(var(--i) * .22s);
  }
  
  /* ふわっと一歩ずつ */
  @keyframes pawIn{
    from{ opacity:0; transform: translateY(8px) scale(.96) rotate(var(--r)); }
    to  { opacity:.95; transform: translateY(0)  scale(1)   rotate(var(--r)); }
  }
  
  /* モバイルで邪魔ならオフ */
  @media (max-width: 768px){
    .has-paw-trail > .paw-trail{ display:none; }
  }
  
  /*  reveal fade delay-2 */

  .has-paw-trail > .paw-trail{
    /* position: absolute !important; */
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .3;   /* ← ここを 0.1〜0.3 に調整。小さいほど透ける */
  }
  

  /* まずは出現アニメを一時停止（見えるまでは止めておく） */
.paw{ animation-play-state: paused; }

/* reveal が有効化したら（.in や .is-in が付いたら）再生 */
.paw-trail.in .paw,
.paw-trail.is-in .paw,
.reveal.in .paw,
.reveal.is-in .paw{
  animation-play-state: running;
}

/* 透け具合を全体で軽く（お好み） */
.has-paw-trail > .paw-trail{ opacity:.15; }   /* 0.1〜0.3で調整 */


/* 画像ブロック自体（figure）を常に中央へ */
figure.dm-banner{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    float: none !important;              /* alignleft/rightの影響を無効化 */
    max-width: 100%;
  }
  
  /* 中の img をブロック化して中央寄せを強制 */
  figure.dm-banner img{
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto;
    max-width: min(92vw, 680px);         /* お好みで調整。幅上限 */
  }
  
  /* 親がFlex/グリッドで左寄せにしていても崩れないように保険 */
  :is(.is-layout-flex, .is-layout-grid) > figure.dm-banner{
    justify-self: center;
    align-self: center;
  }
  
  /* “幅広/全幅”やalignクラスの影響を打ち消し（保険） */
  figure.dm-banner.alignleft,
  figure.dm-banner.alignright{
    float: none !important;
  }
  



  /* カード内のフォーム要素を必ず内側に収める */
.dm-copy-card .dm-field,
.dm-wiz .dm-field{
  display:block;
  width:100%;
  min-width:0;           /* flex/grid 内でのはみ出し防止 */
}

.dm-copy-card .dm-field textarea,
.dm-copy-card .dm-field input,
.dm-wiz .dm-field textarea,
.dm-wiz .dm-field input{
  display:block;         /* UA の inline-block を上書き */
  width:100%;
  max-width:100%;
  box-sizing:border-box; /* padding/border 分も含めて 100% に */
  margin:0;
  padding:10px;
  border:1px solid var(--dm-border, #c9dadd);
  border-radius:12px;
  background:var(--dm-soft, #f7fbfc);
  font-size:14px;
  line-height:1.6;
  resize:vertical;
  color: #666;
}

/* 念のため：カード側でコンテンツを収める */
.dm-copy-card,
.dm-wiz{
  position:relative;
  overflow:clip;         /* 古いSafariなら overflow:hidden; にしてOK */
}



 /* ご予約ブロックの基準サイズを 0.9rem に */
section#dm-wiz,
.dm-wiz{
  font-size: 0.9rem;     /* ← 検証で良かった値 */
  line-height: 1.8;
}

/* タイトルは少しだけ大きめを維持（お好みで調整） */
#dm-wiz .dm-title{ font-size: 1.2rem; }

/* 入力UI・ボタンも「相対値」で連動させる（以前の16pxを上書き） */
/* #dm-wiz :is(textarea, input, select){ font-size: 1em !important; } */
#dm-wiz :is(button, .dm-btn){ font-size: 1em !important; }

/* 注釈の文字は気持ち小さめに */
#dm-wiz .dm-note, 
#dm-wiz small{ font-size: 0.9em; }

/* 念のため：枠内ではみ出し防止＆計算を安定 */
#dm-wiz *{ box-sizing: border-box; }

#dm-wiz .dm-title {
    margin: 0 0 18px;}


    /* ご予約ブロック内のプレースホルダー（例文）の色を薄めに */
#dm-wiz :is(input, textarea)::placeholder{
    color: rgba(102, 102, 102, 0.45); /* #666 を45%の濃さに */
    opacity: 1;                       /* Safari対策：指定色をそのまま使う */
  }
  
  /* 旧ブラウザ向け（必要なら） */
  #dm-wiz :is(input, textarea):-ms-input-placeholder{ color: rgba(102,102,102,.45); }
  #dm-wiz :is(input, textarea)::-ms-input-placeholder{ color: rgba(102,102,102,.45); }
  


  /* ご予約内容のタイトルにだけ背景をつける */
#dm-wiz .dm-title {
    background: var(--dm-accent);   /* 枠と同じ色 */
    color: #fff;                    /* 白文字で読みやすく */
    padding: 10px 12px;              /* 内側の余白 */
    border-radius: 12px 12px 0 0;   /* 上だけ丸みを残す */
    margin: -16px -16px 18px;       /* 親のpaddingを打ち消して横いっぱいに */
    font-size: 1.1rem;
    text-align: center;
  }
  
 #dm-wiz  .dm-label-preview {
    font-size: 1rem;
    font-weight: 200}








/* 予約セクションの土台 */
.tel-reserve{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

/* 枠（カード）— この中にリンク＋注意書き */
.tel-card{
  max-width: 720px;               /* 好みで調整 */
  margin-inline: auto;            /* 盒ごと中央 */
  padding:12px 16px;
  border:2px solid #7b9cac;
  border-radius:14px;
  background:rgba(123,156,172,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* 電話リンクの行（枠はtel-cardが持つのでここは枠なし） */
.tel-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  line-height:1.2;
  min-height:52px;
  padding:4px 0;
  margin-inline:auto;             /* 行を中央に */
  text-decoration:none;
  color:#7b9cac;
  border:none;                    /* 以前の枠指定を打ち消し */
  background:transparent;
  transition:transform .06s;
}
.tel-link:hover{ text-decoration:underline; }
.tel-link:focus-visible{ outline:2px solid #7b9cac; outline-offset:2px; }
.tel-link:active{ transform:translateY(1px); }

/* アイコン＆番号（サイズは現状のまま） */
.tel-ic{ width:30px; height:30px; object-fit:contain; }
.tel-num{
  font-size:clamp(30px, 3.4vw, 34px);
  letter-spacing:.03em;
  color:#7b9cac;
}

/* 注意書き：枠の中で左寄せのまま（中央にしたければ text-align:center; に変更） */
.tel-note{
  font-size:clamp(13px, 1.6vw, 14px);
  color:#666;
  margin:6px 0 0;                 /* 上に少し間隔 */
  text-align:left;
}