/* =========================================================
   Contact Modal Widget (Zoho Forms)
   一体化レイアウト（ヘッダーは絶対配置・iframeは全高100%）
   ・左端タブ：下から5%（5vh）/ 30×170 / 細めフォント
   ・帯は“1セクション”に見える（境界線が出ない）
   ========================================================= */

/* ---- 変数 ------------------------------------------------ */
:root{
  --cmw-tab-bg:#1b2f77;        /* タブ色（濃紺） */
  --cmw-tab-fg:#ffffff;        /* タブ文字色 */
  --cmw-tab-radius:10px;       /* タブ右側の角丸 */

  --cmw-header-bg:#1b2f77;     /* モーダル上部帯の色（濃紺） */
  --cmw-header-h:70px;         /* 帯の見た目の高さ（PC） */

  --cmw-shadow-sm:0 4px 12px rgba(0,0,0,.2);
  --cmw-shadow-lg:0 20px 60px rgba(0,0,0,.35);
  --cmw-z-tab:2147483000;
  --cmw-z-modal:2147483001;

  --cmw-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",
             "Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
}

/* ---- 左端タブ -------------------------------------------- */
.cmw-tab{
  position:fixed; left:0; bottom:5vh;
  width:30px; height:170px; padding:0;

  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--cmw-tab-bg); color:var(--cmw-tab-fg);
  border-radius:0 var(--cmw-tab-radius) var(--cmw-tab-radius) 0;
  box-shadow:var(--cmw-shadow-sm);
  cursor:pointer; user-select:none; z-index:var(--cmw-z-tab);

  /* 縦書き */
  writing-mode:vertical-rl; text-orientation:mixed;

  /* フォント（細め） */
  font-family:var(--cmw-font); font-size:14px; font-weight:300;
  letter-spacing:.06em; line-height:1.05;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.cmw-tab::after{
  content:'›'; position:absolute; writing-mode:horizontal-tb;
  bottom:8px; left:50%; transform:translateX(-50%);
  font-size:16px; line-height:1; opacity:.95; pointer-events:none;
}
.cmw-tab:hover{ transform:translateX(2px); }
.cmw-tab:active{ transform:translateX(0); }
.cmw-tab:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(27,47,119,.35), var(--cmw-shadow-sm);
}
@media print{ .cmw-tab{ display:none !important; } }

/* ---- モーダル土台 ---------------------------------------- */
#cmw-modal{ position:fixed; inset:0; display:none; z-index:var(--cmw-z-modal); }
#cmw-modal.is-open{ display:block; }

#cmw-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.48);
  -webkit-tap-highlight-color:transparent;
}

/* ---- ダイアログ（相対基準：ヘッダーを重ねる） ------------ */
#cmw-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(860px,92vw); height:min(80vh,720px);
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:var(--cmw-shadow-lg);
}

/* ---- 上部帯（絶対配置＝高さを消費しない→境目ゼロ） ------ */
#cmw-header{
  position:absolute; left:0; right:0; top:0; height:var(--cmw-header-h);
  background:var(--cmw-header-bg); color:#fff; border:0; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center; z-index:2;
  /* クリックは背面に通したいので、×だけ有効化する */
  pointer-events:none;
}
/* タイトル：表示（中央） */
#cmw-header h3{
  margin:0; font:600 20px/1.2 var(--cmw-font); color:#fff;
  letter-spacing:.02em;
}

/* 右上の白丸 × ボタン（クリック可） */
#cmw-close{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; border-radius:9999px;
  border:2px solid rgba(255,255,255,.65);
  background:#fff; color:#1b2f77; font-size:22px; line-height:1;
  box-shadow:var(--cmw-shadow-sm); cursor:pointer; z-index:3;

  display:inline-flex; align-items:center; justify-content:center;
  pointer-events:auto;     /* ← これでヘッダー上でもクリック可 */
}
#cmw-close:hover{ filter:brightness(.95); }
#cmw-close:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.45), var(--cmw-shadow-sm);
}

/* ---- フォーム iframe（全高100%・ヘッダーは上から重なる） -- */
#cmw-frame{
  position:absolute; inset:0; border:0; display:block;
  width:100%; height:100%; z-index:1; background:#fff;
}

/* ---- フォールバック（iframe不可時） --------------------- */
#cmw-fallback{
  position:absolute; inset:0; display:none; z-index:1; background:#fff;
  padding:16px; font:400 14px/1.6 var(--cmw-font);
}

/* ---- モーダル中：背景スクロール停止 --------------------- */
body.cmw-open{ overflow:hidden; touch-action:none; }

/* ---- モバイル調整 --------------------------------------- */
@media (max-width:767px){
  .cmw-tab{ bottom:5vh; width:30px; height:170px;
    border-radius:0 var(--cmw-tab-radius) var(--cmw-tab-radius) 0; }
  #cmw-dialog{ width:100vw; height:100vh; border-radius:0; }
  :root{ --cmw-header-h:60px; }       /* SPは帯を少し低く */
  #cmw-close{ top:10px; right:10px; width:40px; height:40px; font-size:20px; }
}

/* ---- 安定化 --------------------------------------------- */
#cmw-modal, #cmw-modal *{ box-sizing:border-box; font-family:var(--cmw-font); }