/* ===== 立体ボタン(btn3d.css) 2026-10-23 =====
   ボタン類を立体的にするための追加ファイル。site.css は変更していません。
   元に戻すとき: 各ページの <link rel="stylesheet" href="/assets/btn3d.css?..."> を外すか、
   Netlifyで1つ前のデプロイ(6adabe23)を Publish deploy する。
   色はロゴの3色: 見学予約=青 #015DAE / LINE=緑 #00692A / 電話=オレンジ #F08300 */
:root{
  --d3-res:#015DAE;--d3-res-sh:#003F78;
  --d3-line:#00692A;--d3-line-sh:#004A1D;
  --d3-tel:#F08300;--d3-tel-sh:#C66B00;
  --d3-gloss:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 55%);
  --d3-drop:0 8px 14px -8px rgba(10,40,25,.35);
  --d3-edge:4px;
}

/* ---------- 1. 3色の主ボタン(ヘッダー・最初の画面・本文・フッター・メニュー内) ---------- */
.b-v-b .b-btn{position:relative;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;-webkit-tap-highlight-color:transparent}
.b-v-b .b-btn-main{background-color:var(--d3-res);background-image:var(--d3-gloss);color:#fff;box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh),var(--d3-drop)}
.b-v-b .b-btn-line{background-color:var(--d3-line);background-image:var(--d3-gloss);color:#fff;box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh),var(--d3-drop)}
.b-v-b .b-btn-tel{background-color:var(--d3-tel);background-image:var(--d3-gloss);color:#1E1300;box-shadow:0 var(--d3-edge) 0 var(--d3-tel-sh),var(--d3-drop)}
.b-v-b .b-ft-cta .b-btn-main{box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh),var(--d3-drop)}
.b-v-b .b-ft-cta .b-btn-line{box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh),var(--d3-drop)}
.b-v-b .b-ft-cta .b-btn-tel{box-shadow:0 var(--d3-edge) 0 var(--d3-tel-sh),var(--d3-drop)}
.b-v-b .b-btn-main:hover,.b-v-b .b-ft-cta .b-btn-main:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--d3-res-sh),0 10px 16px -8px rgba(10,40,25,.4)}
.b-v-b .b-btn-line:hover,.b-v-b .b-ft-cta .b-btn-line:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--d3-line-sh),0 10px 16px -8px rgba(10,40,25,.4)}
.b-v-b .b-btn-tel:hover,.b-v-b .b-ft-cta .b-btn-tel:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--d3-tel-sh),0 10px 16px -8px rgba(10,40,25,.4)}
.b-v-b .b-btn-main:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-res-sh)}
.b-v-b .b-btn-line:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-line-sh)}
.b-v-b .b-btn-tel:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-tel-sh)}
/* 白地+青枠のボタン */
.b-v-b .b-btn-outline{background:#fff;color:var(--d3-res);border-color:var(--d3-res);box-shadow:0 var(--d3-edge) 0 var(--d3-res),var(--d3-drop);transition:transform .12s,box-shadow .12s,background .12s}
.b-v-b .b-btn-outline:hover{background:#EEF5FB;color:var(--d3-res);transform:translateY(-1px)}
.b-v-b .b-btn-outline:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-res)}
.b-v-b .b-btn-ghost{box-shadow:0 var(--d3-edge) 0 #C9D6CD,var(--d3-drop)}
.b-v-b .b-btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 #C9D6CD}

/* ヘッダーの電話(パソコン) */
.b-v-b .b-hd-tel{background-color:var(--d3-tel);background-image:var(--d3-gloss);box-shadow:0 var(--d3-edge) 0 var(--d3-tel-sh),var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .b-hd-tel:hover{transform:translateY(-1px)}
.b-v-b .b-hd-tel:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-tel-sh)}

/* ---------- 2. スマホ下の固定ボタン ---------- */
@media (max-width:1020px){
  .b-v-b .b-fixbar{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
  .b-v-b .b-fixbar a{background-image:var(--d3-gloss);transition:transform .1s,box-shadow .1s}
  .b-v-b .b-fixbar .b-fb-res{box-shadow:0 3px 0 var(--d3-res-sh)}
  .b-v-b .b-fixbar .b-fb-line{box-shadow:0 3px 0 var(--d3-line-sh)}
  .b-v-b .b-fixbar .b-fb-tel{box-shadow:0 3px 0 var(--d3-tel-sh)}
  .b-v-b .b-fixbar a:active{transform:translateY(3px);box-shadow:none}
}

/* ---------- 3. トップ「目的から探す」4タイル ---------- */
.b-v-b .b-route a{background:#fff;border:2px solid #E3EAE5;border-top-width:5px;border-radius:14px;box-shadow:0 5px 0 #D3DDD6,var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .b-route.b-c1 a{border-color:#CFE3D6;border-top-color:var(--green)}
.b-v-b .b-route.b-c2 a{border-color:#F6DDC2;border-top-color:var(--orange)}
.b-v-b .b-route.b-c3 a{border-color:#CADBEC;border-top-color:var(--blue)}
.b-v-b .b-route.b-c4 a{border-color:#D8EACB;border-top-color:var(--leaf)}
.b-v-b .b-route.b-c1 a{box-shadow:0 5px 0 #A9CDB6,var(--d3-drop)}
.b-v-b .b-route.b-c2 a{box-shadow:0 5px 0 #EFC18F,var(--d3-drop)}
.b-v-b .b-route.b-c3 a{box-shadow:0 5px 0 #9DBDDC,var(--d3-drop)}
.b-v-b .b-route.b-c4 a{box-shadow:0 5px 0 #B5D79F,var(--d3-drop)}
.b-v-b .b-route a:hover{transform:translateY(-2px)}
.b-v-b .b-route a:active{transform:translateY(4px);box-shadow:0 1px 0 #C9D6CD}
.b-v-b .b-route svg{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}

/* ---------- 4. 拠点カード・支援プログラムカード・その他のカード ---------- */
.b-v-b .b-place-link{border:2px solid #CADBEC;border-top:5px solid var(--d3-res);border-radius:14px;box-shadow:0 5px 0 #9DBDDC,var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .b-place-link:hover{transform:translateY(-2px);box-shadow:0 7px 0 #9DBDDC,0 14px 22px -12px rgba(10,40,25,.4)}
.b-v-b .b-place-link:active{transform:translateY(4px);box-shadow:0 1px 0 #9DBDDC}
.b-v-b .b-prog a{background:#fff;border:2px solid #E3EAE5;border-top-width:5px;border-radius:14px;box-shadow:0 5px 0 #D3DDD6,var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .b-prog-kotoba a{border-color:#CADBEC;border-top-color:var(--blue);box-shadow:0 5px 0 #9DBDDC,var(--d3-drop)}
.b-v-b .b-prog-undo a{border-color:#F6DDC2;border-top-color:var(--orange);box-shadow:0 5px 0 #EFC18F,var(--d3-drop)}
.b-v-b .b-prog-gakushu a{border-color:#D8EACB;border-top-color:var(--leaf);box-shadow:0 5px 0 #B5D79F,var(--d3-drop)}
.b-v-b .b-prog-seikatsu a{border-color:#CFE3D6;border-top-color:var(--green);box-shadow:0 5px 0 #A9CDB6,var(--d3-drop)}
.b-v-b .b-prog a:hover{transform:translateY(-2px)}
.b-v-b .b-prog a:active{transform:translateY(4px);box-shadow:0 1px 0 #C9D6CD}
.b-v-b .b-others a,.b-v-b .b-sns-card{border:2px solid #E3EAE5;box-shadow:0 4px 0 #D3DDD6,var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .b-others a:hover,.b-v-b .b-sns-card:hover{transform:translateY(-2px)}
.b-v-b .b-others a:active,.b-v-b .b-sns-card:active{transform:translateY(3px);box-shadow:0 1px 0 #D3DDD6}

/* ---------- 5. 小さいボタン(チップ・送信・スライダー操作・メニュー) ---------- */
.b-v-b .b-chip{border:2px solid #CADBEC;box-shadow:0 3px 0 #9DBDDC;transition:transform .1s,box-shadow .1s,color .1s}
.b-v-b .b-chip:hover{border-color:var(--d3-res);color:var(--d3-res)}
.b-v-b .b-chip:active{transform:translateY(3px);box-shadow:none}
.b-v-b .g-btn{background-color:var(--d3-res);background-image:var(--d3-gloss);box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh),var(--d3-drop);transition:transform .12s,box-shadow .12s}
.b-v-b .g-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d3-res-sh)}
.b-v-b .b-sl-btn,.b-v-b .b-sl-pause{border:2px solid #E3EAE5;box-shadow:0 3px 0 #C9D6CD;transition:transform .1s,box-shadow .1s}
.b-v-b .b-sl-btn:active,.b-v-b .b-sl-pause:active{transform:translateY(3px);box-shadow:none}
.b-v-b .b-gnav-btn{transition:background .12s,box-shadow .12s,transform .1s}
.b-v-b .b-gnav-btn:hover,.b-v-b .b-gnav-btn[aria-expanded="true"]{box-shadow:0 3px 0 #C9D6CD;background:var(--tint)}
.b-v-b .b-gnav-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #C9D6CD}
.b-v-b .b-menu-btn{background:#fff;border:2px solid #E3EAE5;box-shadow:0 3px 0 #C9D6CD;height:52px;transition:transform .1s,box-shadow .1s}
.b-v-b .b-menu-btn:active{transform:translateY(3px);box-shadow:none}
.b-v-b .b-drawer-close{box-shadow:0 3px 0 #C9D6CD;transition:transform .1s,box-shadow .1s}
.b-v-b .b-drawer-close:active{transform:translateY(3px);box-shadow:none}

/* ---------- 6. 本文の中のボタン(古いページ・支援プログラムページ) ---------- */
#main a:is(.btn,.gk-btn,.gk-link-btn,.hub-btn,.gr-btn,.svc-btn,.tk-btn,.gx-main),
#main .gx-cta a,
#main a[style*="display:inline-block"][style*="background"]{
  box-shadow:0 var(--d3-edge) 0 rgba(0,0,0,.22),var(--d3-drop)!important;
  background-image:var(--d3-gloss)!important;
  transition:transform .12s,box-shadow .12s!important;
  border-radius:999px!important;
}
#main#main a[href="/reserve/"].svc-btn-main,#main#main a.gk-btn-main,#main#main a.hub-btn.primary,#main#main a[href="/reserve/"][class*="btn"],
#main a[style*="background:#015DAE"]{box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh),var(--d3-drop)!important}
#main#main a.tk-btn.line,#main#main a.gk-btn-line,#main#main a.hub-btn.line,#main#main a.btn.btn-line,#main#main a[href*="lin.ee"][class*="btn"],
#main a[style*="background:#00692A"]{box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh),var(--d3-drop)!important}
#main a[style*="background:#F08300"]{box-shadow:0 var(--d3-edge) 0 var(--d3-tel-sh),var(--d3-drop)!important}
#main a[style*="background:#ffffff"]{box-shadow:0 var(--d3-edge) 0 #0F5E2A,var(--d3-drop)!important}
#main a:is(.btn,.gk-btn,.gk-link-btn,.hub-btn,.gr-btn,.svc-btn,.tk-btn,.gx-main):hover,
#main .gx-cta a:hover,
#main a[style*="display:inline-block"][style*="background"]:hover{transform:translateY(-1px);opacity:1!important}
#main a:is(.btn,.gk-btn,.gk-link-btn,.hub-btn,.gr-btn,.svc-btn,.tk-btn,.gx-main):active,
#main .gx-cta a:active,
#main a[style*="display:inline-block"][style*="background"]:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)!important}

/* 相談ボックス(consult-box)のボタン */
body .gcb a.gcb-btn{background-image:var(--d3-gloss)!important;transition:transform .12s,box-shadow .12s!important}
body .gcb a.gcb-rsv{box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh),var(--d3-drop)!important}
body .gcb a.gcb-line{box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh),var(--d3-drop)!important}
body .gcb a.gcb-lp{background-image:none!important;box-shadow:0 var(--d3-edge) 0 var(--d3-res),var(--d3-drop)!important}
body .gcb a.gcb-btn:hover{opacity:1!important;transform:translateY(-1px)}
body .gcb a.gcb-btn:active{transform:translateY(3px)}

/* ---------- 7. ご案内BOT(新HPで開いたときだけ。右下の「ご質問・ご相談」ボタンは元のまま 2026-10-23) ---------- */
html body #gb-go{background-color:var(--d3-line);box-shadow:0 3px 0 var(--d3-line-sh);transition:transform .1s,box-shadow .1s}
html body #gb-go:active{transform:translateY(3px);box-shadow:none}
html body #gb-panel .gb-opt{border-color:var(--d3-line);color:var(--d3-line);box-shadow:0 3px 0 #A9CDB6;transition:transform .1s,box-shadow .1s;margin-bottom:3px}
html body #gb-panel .gb-opt:active{transform:translateY(3px);box-shadow:none}
html body #gb-panel .gb-btn{background-image:var(--d3-gloss);transition:transform .1s,box-shadow .1s;margin-bottom:4px}
html body #gb-panel .gb-visit{background-color:var(--d3-res);color:#fff!important;box-shadow:0 var(--d3-edge) 0 var(--d3-res-sh)}
html body #gb-panel .gb-line{background-color:var(--d3-line);color:#fff!important;box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh)}
html body #gb-panel .gb-tel{background-color:var(--d3-tel);color:#1E1300!important;border-color:var(--d3-tel);box-shadow:0 var(--d3-edge) 0 var(--d3-tel-sh)}
html body #gb-panel .gb-online,html body #gb-panel .gb-job{background-color:var(--d3-line);box-shadow:0 var(--d3-edge) 0 var(--d3-line-sh)}
html body #gb-panel .gb-btn:active{transform:translateY(3px);box-shadow:none}
html body #gb-panel .gb-link{box-shadow:0 3px 0 #B5D79F}
html body #gb-head{background:var(--d3-line)}
html body #gb-head small{color:#fff;opacity:1}

/* ---------- 動きを減らす設定の端末では、押し込みの動きをなくす ---------- */
@media (prefers-reduced-motion:reduce){
  .b-v-b *,html body #gb-panel *{transition:none!important}
  .b-v-b a:hover,.b-v-b a:active,.b-v-b button:hover,.b-v-b button:active{transform:none!important}
}