/* =====================================================
   09_ui.css
   共通UIコンポーネント
   - キーブレード型「TOPへ戻る」ボタン (.khblog-totop)
   - ハンバーガーメニュー (.khblog-hamb / .khblog-menu)
   - 前ページへ戻るボタン (.khblog-backbtn)
===================================================== */
   /* =========================================================
         キーブレード型「TOPへ戻る」ボタン (.khblog-totop)
         ========================================================= */
   
   /* Cocoon の標準「ページトップへ戻る」を非表示 (置き換え) */
   .go-to-top {
     display: none !important;
   }
   
   .khblog-totop {
     position: fixed;
     right: 24px;
     bottom: 24px;
     width: 56px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(212, 175, 55, 0.45);
     border-radius: 50%;
     background: radial-gradient(
         circle at 35% 30%,
         rgba(212, 175, 55, 0.18),
         transparent 60%
       ),
       linear-gradient(135deg, #0c1a3a, #1b2a4e);
     color: #f7d774;
     box-shadow: 0 8px 18px rgba(7, 17, 42, 0.35),
       0 0 18px rgba(212, 175, 55, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
     cursor: pointer;
     z-index: 9999;
     opacity: 0;
     transform: translateY(20px) scale(0.85);
     pointer-events: none;
     transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 1.6, 0.5, 1),
       box-shadow 0.2s ease, border-color 0.2s ease;
     -webkit-tap-highlight-color: transparent;
     padding: 0;
   }
   
   .khblog-totop.is-visible {
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: auto;
   }
   
   .khblog-totop:hover {
     border-color: #e8c252;
     box-shadow: 0 12px 22px rgba(7, 17, 42, 0.45),
       0 0 28px rgba(212, 175, 55, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   }
   
   .khblog-totop:focus-visible {
     outline: 2px solid #f7d774;
     outline-offset: 3px;
   }
   
   .khblog-totop svg {
     width: 30px;
     height: 30px;
     display: block;
     transform-origin: 50% 50%;
     transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
     filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
   }
   
   /* クリック時：時計回り 360° */
   .khblog-totop.is-spin svg {
     transform: rotate(360deg);
   }
   
   /* スマホ：小さく＆余白も狭く */
   @media (max-width: 600px) {
     .khblog-totop {
       right: 16px;
       bottom: 16px;
       width: 50px;
       height: 50px;
     }
     .khblog-totop svg {
       width: 26px;
       height: 26px;
     }
   }
   
   /* prefers-reduced-motion: 動きを抑制 */
   @media (prefers-reduced-motion: reduce) {
     .khblog-totop {
       transform: none !important;
       transition: opacity 0.25s ease;
     }
     .khblog-totop svg {
       transition: none;
     }
     .khblog-totop.is-spin svg {
       transform: none;
     }
   }

   /* =========================================================
         ハンバーガーメニュー (.khblog-hamb / .khblog-menu)
         ヘッダー sticky + フロストガラスオーバーレイ
         ========================================================= */
   
   /* (0) Cocoonデフォルトの モバイルメニュー・ハンバーガーは無効化
         (ヘッダーは sticky にしない。スクロールで普通に消える) */
   .menu-button,
   .menu-mobile-icon-image,
   .navi-menu-button,
   #navi-menu-content {
     display: none !important;
   }
   
   /* (1) ハンバーガーボタン (スクロール後にヘッダーより下に浮く)
         初期は非表示、scrollY > SHOW_AT で .is-visible 付与 → fade in */
   .khblog-hamb {
     position: fixed;
     top: 14px;
     right: 18px;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: 1px solid rgba(212, 175, 55, 0.4);
     border-radius: 50%;
     background: radial-gradient(
         circle at 35% 30%,
         rgba(212, 175, 55, 0.18),
         transparent 60%
       ),
       linear-gradient(135deg, rgba(12, 26, 58, 0.85), rgba(27, 42, 78, 0.85));
     color: #f7d774;
     cursor: pointer;
     z-index: 9999;
     box-shadow: 0 6px 16px rgba(7, 17, 42, 0.4), 0 0 14px rgba(212, 175, 55, 0.2),
       inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     opacity: 0;
     transform: translateY(-12px) scale(0.85);
     pointer-events: none;
     transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 1.6, 0.5, 1),
       box-shadow 0.25s ease, border-color 0.25s ease;
     -webkit-tap-highlight-color: transparent;
   }
   .khblog-hamb.is-visible {
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: auto;
   }
   .khblog-hamb:hover {
     border-color: #e8c252;
     box-shadow: 0 8px 22px rgba(7, 17, 42, 0.5), 0 0 24px rgba(212, 175, 55, 0.45),
       inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   }
   .khblog-hamb:focus-visible {
     outline: 2px solid #f7d774;
     outline-offset: 3px;
   }
   
   /* (2) アイコン: 3本線 (.khblog-hamb-icon) と キーブレード2本クロス (.khblog-hamb-cross) を重ねて切替 */
   
   /* 通常: 3本線 */
   .khblog-hamb-icon {
     position: relative;
     width: 22px;
     height: 16px;
     transition: opacity 0.25s ease;
   }
   .khblog-hamb-icon span {
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
     border-radius: 2px;
     background: currentColor;
     transition: opacity 0.2s ease, transform 0.25s ease;
   }
   .khblog-hamb-icon span:nth-child(1) {
     top: 0;
   }
   .khblog-hamb-icon span:nth-child(2) {
     top: 7px;
   }
   .khblog-hamb-icon span:nth-child(3) {
     top: 14px;
   }
   
   /* 展開時: 3本線を消す */
   .khblog-hamb.is-open .khblog-hamb-icon {
     opacity: 0;
     transform: scale(0.6);
   }
   
   /* キーブレード2本クロス (35_のTOPへ戻ると同じSVGを2つ重ねて×字) */
   .khblog-hamb-cross {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease 0.05s;
   }
   .khblog-hamb-cross .khblog-hamb-kb {
     position: absolute;
     width: 28px;
     height: 28px;
     display: block;
     color: #f7d774;
     filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
     transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   /* 通常時: 両方とも回転0 (重なって見えないが opacity 0 なので非表示) */
   .khblog-hamb-cross .khblog-hamb-kb--a,
   .khblog-hamb-cross .khblog-hamb-kb--b {
     transform: rotate(0deg);
   }
   
   /* 展開時: 本番で動いた角度に合わせて 269deg / -355deg
         (実機で柄と刃の向きが揃って ×字 になる組み合わせ) */
   .khblog-hamb.is-open .khblog-hamb-cross {
     opacity: 1;
   }
   .khblog-hamb.is-open .khblog-hamb-cross .khblog-hamb-kb--a {
     transform: rotate(269deg);
   }
   .khblog-hamb.is-open .khblog-hamb-cross .khblog-hamb-kb--b {
     transform: rotate(-355deg);
   }
   
   /* 展開時はボタン自体も金色グローを少し強める (回転はさせない、×がきれいに見えるように) */
   .khblog-hamb.is-open {
     border-color: #e8c252;
     box-shadow: 0 8px 22px rgba(7, 17, 42, 0.55),
       0 0 28px rgba(212, 175, 55, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
   
   /* (3) オーバーレイメニュー */
   .khblog-menu {
     position: fixed;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 28px;
     padding: 80px 24px 40px;
     background: radial-gradient(
         ellipse at 50% 0%,
         rgba(212, 175, 55, 0.1),
         transparent 60%
       ),
       rgba(7, 17, 42, 0.55);
     -webkit-backdrop-filter: blur(14px) saturate(140%);
     backdrop-filter: blur(14px) saturate(140%);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
     z-index: 9000;
   }
   .khblog-menu.is-open {
     opacity: 1;
     pointer-events: auto;
   }
   
   /* (3.5) フロストガラスが効かないブラウザのフォールバック */
   @supports not (backdrop-filter: blur(1px)) {
     .khblog-menu {
       background: rgba(7, 17, 42, 0.88);
     }
   }
   
   /* (4) ナビゲーション */
   .khblog-menu-nav {
     width: 100%;
     max-width: 360px;
   }
   .khblog-menu-nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   .khblog-menu-nav li {
     text-align: center;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity 0.35s ease, transform 0.4s ease;
   }
   .khblog-menu.is-open .khblog-menu-nav li {
     opacity: 1;
     transform: translateY(0);
   }
   .khblog-menu.is-open .khblog-menu-nav li:nth-child(1) {
     transition-delay: 0.08s;
   }
   .khblog-menu.is-open .khblog-menu-nav li:nth-child(2) {
     transition-delay: 0.14s;
   }
   .khblog-menu.is-open .khblog-menu-nav li:nth-child(3) {
     transition-delay: 0.2s;
   }
   .khblog-menu.is-open .khblog-menu-nav li:nth-child(4) {
     transition-delay: 0.26s;
   }
   .khblog-menu.is-open .khblog-menu-nav li:nth-child(5) {
     transition-delay: 0.32s;
   }
   
   /* 実績記録リンク（ハンバーガーメニュー内） */
   .khblog-menu-nav-ach {
     font-size: 17px !important;
     letter-spacing: 0.12em !important;
   }
   .khblog-menu-ach-icon {
     display: inline-block;
     margin-right: 0.25em;
     font-size: 0.85em;
     vertical-align: middle;
     color: #f7d774;
     text-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
   }
   
   .khblog-menu-nav a {
     display: inline-block;
     position: relative;
     padding: 14px 28px;
     color: #fdf6dc !important;
     font-size: 20px;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-decoration: none !important;
     transition: color 0.2s ease, text-shadow 0.2s ease;
   }
   .khblog-menu-nav a:hover,
   .khblog-menu-nav a:focus-visible {
     color: #ffe8a0 !important;
     text-shadow: 0 0 16px rgba(212, 175, 55, 0.55);
   }
   .khblog-menu-nav a::after {
     content: "";
     position: absolute;
     left: 20%;
     right: 20%;
     bottom: 6px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #d4af37, transparent);
     opacity: 0;
     transform: scaleX(0.4);
     transition: opacity 0.25s ease, transform 0.3s ease;
   }
   .khblog-menu-nav a:hover::after,
   .khblog-menu-nav a:focus-visible::after {
     opacity: 1;
     transform: scaleX(1);
   }
   
   /* (5) メニュー内 検索フォーム (KH風 + 虫眼鏡→王冠) */
   .khblog-menu-search {
     position: relative;
     display: flex;
     align-items: stretch;
     width: 100%;
     max-width: 360px;
     margin: 0 auto;
     background: linear-gradient(180deg, #0c1a3a, #1b2a4e);
     border: 1px solid rgba(212, 175, 55, 0.45);
     border-radius: 999px;
     overflow: hidden;
     box-shadow: 0 6px 16px rgba(7, 17, 42, 0.3),
       inset 0 0 14px rgba(212, 175, 55, 0.08);
     opacity: 0;
     transform: translateY(8px);
     transition: opacity 0.35s ease, transform 0.4s ease, border-color 0.25s ease,
       box-shadow 0.25s ease;
   }
   .khblog-menu.is-open .khblog-menu-search {
     opacity: 1;
     transform: translateY(0);
     transition-delay: 0.34s;
   }
   .khblog-menu-search:focus-within {
     border-color: #e8c252;
     box-shadow: 0 6px 18px rgba(7, 17, 42, 0.4), 0 0 22px rgba(212, 175, 55, 0.4),
       inset 0 0 14px rgba(212, 175, 55, 0.12);
   }
   .khblog-menu-search input[type="search"],
   .khblog-menu-search input[type="text"],
   .khblog-menu-search .search-field {
     flex: 1 1 auto;
     min-width: 0;
     padding: 12px 16px;
     background: transparent !important;
     border: none !important;
     outline: none !important;
     color: #fdf6dc !important;
     font-size: 14px;
     letter-spacing: 0.03em;
     box-shadow: none !important;
   }
   .khblog-menu-search input::placeholder {
     color: rgba(253, 246, 220, 0.55);
   }
   
   /* 送信ボタン (input/button 両対応で透明化) */
   .khblog-menu-search button[type="submit"],
   .khblog-menu-search input[type="submit"],
   .khblog-menu-search .search-submit {
     position: relative;
     z-index: 2;
     flex: 0 0 auto;
     width: 50px;
     min-height: 38px;
     padding: 0;
     border: none !important;
     background: transparent !important;
     color: transparent !important;
     font-size: 0 !important;
     line-height: 0 !important;
     text-indent: -9999px;
     cursor: pointer;
     -webkit-appearance: none;
     appearance: none;
   }
   .khblog-menu-search button[type="submit"] i,
   .khblog-menu-search .search-submit i,
   .khblog-menu-search .search-submit svg {
     display: none !important;
   }
   
   /* 虫眼鏡 (::before) と 王冠 (::after) をフォームに重ねて表示 */
   .khblog-menu-search::before,
   .khblog-menu-search::after {
     content: "";
     position: absolute;
     right: 16px;
     top: 50%;
     width: 20px;
     height: 20px;
     background-color: #f7d774;
     -webkit-mask: no-repeat center / contain;
     mask: no-repeat center / contain;
     filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.45));
     transition: opacity 0.3s ease, transform 0.3s ease;
     pointer-events: none;
     z-index: 1;
   }
   .khblog-menu-search::before {
     transform: translateY(-50%) scale(1);
     -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTAuNScgY3k9JzEwLjUnIHI9JzYuNScvPjxsaW5lIHgxPScxNS41JyB5MT0nMTUuNScgeDI9JzIwLjUnIHkyPScyMC41Jy8+PC9zdmc+");
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTAuNScgY3k9JzEwLjUnIHI9JzYuNScvPjxsaW5lIHgxPScxNS41JyB5MT0nMTUuNScgeDI9JzIwLjUnIHkyPScyMC41Jy8+PC9zdmc+");
     opacity: 1;
   }
   .khblog-menu-search::after {
     width: 22px;
     height: 22px; /* ハート viewBox 32x32 の正方形に合わせる */
     right: 16px;
     transform: translateY(calc(-50% + 2px)) scale(0.85);
     -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+PHBhdGggZD0nTTE2IDI5IEM1IDIyIDEgMTMgNiA3IEM5IDQgMTQgNSAxNiAxMCBDMTggNSAyMyA0IDI2IDcgQzMxIDEzIDI3IDIyIDE2IDI5IFonIGZpbGw9J25vbmUnIHN0cm9rZT0nYmxhY2snIHN0cm9rZS13aWR0aD0nMycgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+");
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+PHBhdGggZD0nTTE2IDI5IEM1IDIyIDEgMTMgNiA3IEM5IDQgMTQgNSAxNiAxMCBDMTggNSAyMyA0IDI2IDcgQzMxIDEzIDI3IDIyIDE2IDI5IFonIGZpbGw9J25vbmUnIHN0cm9rZT0nYmxhY2snIHN0cm9rZS13aWR0aD0nMycgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+");
     opacity: 0;
   }
   .khblog-menu-search:hover::before,
   .khblog-menu-search:focus-within::before {
     opacity: 0;
     transform: translateY(-50%) scale(0.85);
   }
   .khblog-menu-search:hover::after,
   .khblog-menu-search:focus-within::after {
     opacity: 1;
     transform: translateY(-50%) scale(1);
   }
   
   /* (6) スクロールロック用 (JSで body に khblog-menu-open を付ける) */
   body.khblog-menu-open {
     overflow: hidden;
   }
   
   /* (7) prefers-reduced-motion 配慮 */
   @media (prefers-reduced-motion: reduce) {
     .khblog-hamb,
     .khblog-hamb-icon span,
     .khblog-hamb-icon span::before,
     .khblog-hamb-icon span::after,
     .khblog-menu,
     .khblog-menu-nav li,
     .khblog-menu-search,
     .khblog-menu-search::before,
     .khblog-menu-search::after {
       transition: opacity 0.2s ease !important;
       transform: none !important;
     }
   }

   /* ============================
    *  52_ 前の画面に戻る キーブレードボタン
    * ============================ */
   .khblog-backbtn{
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 9px 20px 9px 14px;
     background: linear-gradient(180deg, #0c1838 0%, #142455 100%);
     border: 1px solid rgba(255, 209, 102, 0.55);
     border-radius: 999px;
     color: #ffd166;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .06em;
     font-family: inherit;
     cursor: pointer;
     position: relative;
     z-index: 1;
     box-shadow:
       0 0 0 1px rgba(255, 209, 102, 0.18) inset,
       0 6px 16px rgba(0, 0, 0, 0.28);
     transition:
       transform .2s ease,
       box-shadow .25s ease,
       background .2s ease,
       opacity .4s ease;
     will-change: transform, opacity;
   }
   /* タイトル上：右寄せ・少し小さめのマージン */
   .khblog-backbtn--top{
     display: inline-flex;
     margin: 6px 0 10px;
   }
   /* タイトル下：左寄せ・上下スペース広め */
   .khblog-backbtn--bottom{
     display: inline-flex;
     margin: 16px 0 18px;
   }
   .khblog-backbtn:hover{
     transform: translateX(-4px);
     background: linear-gradient(180deg, #142455 0%, #1a2d6a 100%);
     box-shadow:
       0 0 0 1px rgba(255, 209, 102, 0.45) inset,
       0 0 18px rgba(255, 209, 102, 0.28),
       0 8px 22px rgba(0, 0, 0, 0.32);
   }
   .khblog-backbtn:active{
     transform: translateX(-2px);
   }
   .khblog-backbtn:focus-visible{
     outline: 2px solid #ffd166;
     outline-offset: 3px;
   }
   /* キーブレードSVG（35_と同じデザインを横向きに回転） */
   .khblog-backbtn-kb{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     filter: drop-shadow(0 1px 2px rgba(232, 194, 82, 0.45));
   }
   .khblog-backbtn-kb svg{
     width: 100%;
     height: 100%;
     /* 35_ は左下→右上の対角線デザイン
        -135deg 回転で「刃が左を指す」横向きキーブレードに */
     transform: rotate(-135deg);
   }
   .khblog-backbtn-text{
     white-space: nowrap;
     font-size: 14px;
   }
   /* ホバー時、キーブレードがほんの少し左へスライド（押す予感） */
   .khblog-backbtn:hover .khblog-backbtn-kb{
     transform: translateX(-3px) rotate(0deg);
     transition: transform .2s ease;
   }
   .khblog-backbtn:hover .khblog-backbtn-kb svg{
     transform: rotate(-140deg);
     transition: transform .2s ease;
   }
   /* クリック後：左へ飛んでいきながら回転・フェード */
   .khblog-backbtn.is-leaving{
     transform: translateX(-150vw) rotate(-14deg);
     opacity: 0;
     transition:
       transform .5s cubic-bezier(0.5, -0.15, 0.7, 0.4),
       opacity   .5s ease-in;
     pointer-events: none;
   }
   /* スマホ調整 */
   @media (max-width: 600px){
     .khblog-backbtn{
       font-size: 12px;
       padding: 8px 16px 8px 10px;
       gap: 8px;
     }
     .khblog-backbtn-text{ font-size: 13px; }
     .khblog-backbtn-kb{
       width: 34px;
       height: 34px;
     }
   }
   /* prefers-reduced-motion 対応 */
   @media (prefers-reduced-motion: reduce){
     .khblog-backbtn{ transition: none; }
     .khblog-backbtn:hover{ transform: none; }
     .khblog-backbtn:hover .khblog-backbtn-kb,
     .khblog-backbtn:hover .khblog-backbtn-kb svg{
       transform: none;
       transition: none;
     }
     .khblog-backbtn-kb svg{
       /* 回転だけは保持（横向き表示） */
       transform: rotate(-135deg);
     }
     .khblog-backbtn.is-leaving{
       transform: none;
       opacity: 0;
       transition: opacity .2s linear;
     }
   }