:root {
        --primary-color: #005bac;
        --accent-color: #d9534f;
        --bg-color: #f8f9fa;
        --text-color: #333333;
        --ad-bg-color: #f8f9fa;
    }
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        color: var(--text-color);
        background-color: var(--bg-color);
        margin: 0;
        padding: 0;
    }

    header {
        background-color: var(--primary-color);
        color: white;
        padding: 25px 15px;
        text-align: center;
    }

    header h1 {
        margin: 0;
        font-size: 1.7rem;
        letter-spacing: 0.5px;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 15px;
    }

    .alert-box {
        background-color: #fff3cd;
        border-left: 5px solid #ffc107;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 6px;
        font-size: 0.95rem;
    }

    /* 曜日フィルター */
    .filter-title {
        font-weight: bold;
        margin-bottom: 12px;
        text-align: center;
        font-size: 1.1rem;
    }
    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 25px;
    }

    .filter-btn {
        background-color: white;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        padding: 10px 16px;
        font-size: 0.95rem;
        font-weight: bold;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-grow: 1;
        max-width: 110px;
        text-align: center;
    }

    .filter-btn.active, .filter-btn:hover {
        background-color: var(--primary-color);
        color: white;
    }

    /* スケジュールカード */
    .card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        margin-bottom: 18px;
        padding: 18px;
        border-left: 6px solid var(--primary-color);
    }

    .card.hidden {
        display: none;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .day-badge {
        background-color: var(--primary-color);
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: bold;
        font-size: 0.9rem;
    }

    .time-text {
        font-size: 1.25rem;
        font-weight: bold;
        color: #222;
    }

    .map-num {
        background-color: #6c757d;
        color: white;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.9rem;
        font-weight: bold;
        margin-right: 8px;
    }

    .place-link {
        display: inline-block;
        font-size: 1.15rem;
        font-weight: bold;
        color: var(--primary-color);
        text-decoration: underline;
        margin: 8px 0;
        cursor: pointer;
    }

    .place-link:hover {
        color: #003d7a;
    }

    .remarks {
        background-color: #f1f3f5;
        padding: 12px;
        border-radius: 6px;
        font-size: 0.95rem;
        margin-top: 10px;
        border: 1px solid #e9ecef;
    }

    .tel-link {
        color: var(--primary-color);
        font-weight: bold;
        text-decoration: none;
        border-bottom: 1px dashed var(--primary-color);
    }

    .important {
        color: var(--accent-color);
        font-weight: bold;
    }

    /* 相談窓口セクション */
    .section-title {
        border-bottom: 3px solid var(--primary-color);
        padding-bottom: 8px;
        margin-top: 45px;
        color: var(--primary-color);
        font-size: 1.4rem;
    }

    .contact-list {
        list-style: none;
        padding: 0;
    }

    .contact-item {
        background: white;
        padding: 18px;
        margin-bottom: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    }

    .contact-name {
        font-weight: bold;
        font-size: 1.15rem;
        margin-bottom: 6px;
        color: #222;
    }

    /* 収益化：広告表示枠（CLS対策でガタつきを徹底排除） */
    .ad-container {
        margin: 25px 0;
        text-align: center;
    }
    .ad-label {
        font-size: 0.75rem;
        color: #888;
        margin-bottom: 6px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .ad-slot-top {
        min-height: 100px; 
        background-color: #eceff1;
        border: 1px solid #cfd8dc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ad-slot-middle {
        min-height: 250px;
        background-color: #eceff1;
        border: 1px solid #cfd8dc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ad-slot-bottom {
        min-height: 280px;
        background-color: #eceff1;
        border: 1px solid #cfd8dc;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer {
        text-align: center;
        padding: 35px 15px;
        margin-top: 50px;
        background-color: #e9ecef;
        font-size: 0.85rem;
        color: #555;
        border-top: 1px solid #dee2e6;
    }

    /* ボタン（カード内に綺麗に配置・レスポンシブ化） */
    .street-btn {
        position: relative;
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 12px 0;
        padding: 12px 16px;
        border-radius: 25px;
        border: 3px solid #8a2be2;
        background: #7a00ff;
        color: white;
        font-size: 0.95rem;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
        overflow: hidden;
        user-select: none;
        box-shadow: 0 0 10px rgba(122, 0, 255, 0.4);
    }

    /* ホバー時：黒→赤＋緑発光＋虹 */
    .street-btn:hover {
        background: #000;
        border-color: #ff0000;
        color: #fff;
        box-shadow:
          0 0 10px #ff0000,
          0 0 20px #ff3333,
          0 0 35px #00ff66,
          0 0 60px #ff0000;
        transform: translateY(-2px);
    }

    /* 虹色アニメーション */
    .street-btn::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50px;
        background: linear-gradient(
          90deg,
          red,
          orange,
          yellow,
          lime,
          cyan,
          blue,
          violet,
          red
        );
        background-size: 400%;
        opacity: 0;
        z-index: -1;
        transition: .3s;
    }

    .street-btn:hover::before {
        opacity: 1;
        animation: rainbow 2s linear infinite;
        filter: blur(8px);
    }

    /* スマホでタップ・クリック時 */
    .street-btn:active {
        background: linear-gradient(
          90deg,
          red,
          orange,
          yellow,
          lime,
          cyan,
          blue,
          violet,
          red
        );
        background-size: 400%;
        animation: rainbow 1.2s linear infinite;
        border-color: white;
        box-shadow:
          0 0 12px white,
          0 0 25px red,
          0 0 40px lime,
          0 0 60px cyan;
        color: #fff;
    }

    @keyframes rainbow {
        0% { background-position: 0%; }
        100% { background-position: 400%; }
    }

    :root{
    --blue:#1769e0;
    --blue2:#0d47a1;
    --bg:#ffffff;
    --text:#172033;
    --muted:#667085;
    --border:#d9dee8;
  }
  *{box-sizing:border-box}
  body{
    margin:0;background:#f5f7fb;color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.7;
  }
  .demo{
    max-width:900px;margin:60px auto;padding:0 20px;
  }
  .card{
    background:#fff;border:1px solid #e7ebf2;border-radius:20px;
    padding:30px;box-shadow:0 12px 35px rgba(20,35,70,.08);
  }
  h1{margin-top:0;line-height:1.3}
  .hint{
    color:var(--muted);background:#f7f9fc;border-radius:12px;
    padding:12px 14px;font-size:14px;
  }
      /* ===== Floating translator button ===== */
  #translatorFab{
    position:fixed;right:24px;bottom:24px;z-index:999999;
    width:64px;height:64px;border:0;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:#fff;cursor:pointer;
    box-shadow:0 12px 30px rgba(23,105,224,.35);
    font-size:28px;
    display:grid;place-items:center;
    animation:floatIn .75s cubic-bezier(.2,.8,.2,1), gentleFloat 2.8s ease-in-out .75s infinite;
    transition:transform .2s ease,box-shadow .2s ease;
  }
  #translatorFab:hover{transform:scale(1.08);box-shadow:0 16px 35px rgba(23,105,224,.45)}
  #translatorFab:active{transform:scale(.96)}
  @keyframes floatIn{
    from{opacity:0;transform:translateY(40px) scale(.55) rotate(-12deg)}
    60%{opacity:1;transform:translateY(-8px) scale(1.08) rotate(3deg)}
    to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
  }
  @keyframes gentleFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
  }

  /* ===== Menu ===== */
  #translatorPanel{
    position:fixed;right:24px;bottom:100px;z-index:1000000;
    width:min(390px,calc(100vw - 30px));
    background:#fff;border:1px solid var(--border);border-radius:18px;
    box-shadow:0 20px 60px rgba(16,24,40,.22);
    padding:16px;
    opacity:0;transform:translateY(18px) scale(.96);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
  }
  #translatorPanel.open{
    opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
  }
  .panelHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .panelHead strong{font-size:16px}
  .closeBtn{
    border:0;background:#f1f3f7;width:32px;height:32px;border-radius:9px;
    cursor:pointer;font-size:18px
  }
  .row{display:grid;grid-template-columns:1fr;gap:9px;margin-top:13px}
  select,button.action{
    width:100%;font-size:15px;border-radius:10px;padding:11px 12px;
  }
  select{border:1px solid var(--border);background:#fff}
  button.action{
    border:0;background:var(--blue);color:#fff;cursor:pointer;
    font-weight:650
  }
  button.action.secondary{background:#eef4ff;color:var(--blue2)}
  button.action:disabled{opacity:.5;cursor:not-allowed}

  #selectionBox{
    margin-top:12px;padding:10px 12px;background:#f8fafc;
    border:1px dashed var(--border);border-radius:10px;font-size:13px;
    max-height:90px;overflow:auto;word-break:break-word;
  }
  #selectedResult{
    margin-top:10px;padding:12px;background:#f5fbff;border-radius:10px;
    min-height:70px;white-space:pre-wrap;word-break:break-word;
    border:1px solid #d9eefc
  }
  .small{font-size:12px;color:var(--muted);margin-top:8px}
  .loader{
    display:inline-block;width:15px;height:15px;border:2px solid #cfe0ff;
    border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;
    vertical-align:-3px;margin-right:6px
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Google Translate UI is hidden; our UI controls it */
  #google_translate_element{
    position:absolute!important;left:-10000px!important;top:-10000px!important;
    width:1px!important;height:1px!important;overflow:hidden!important
  }

  @media(max-width:600px){
    #translatorFab{right:16px;bottom:16px;width:58px;height:58px}
    #translatorPanel{right:12px;bottom:86px}
    .demo{margin-top:30px}
  }

/* 虹色カウントダウン文字 */
.rainbow-text{
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff8800,
    #ffee00,
    #00cc44,
    #0099ff,
    #6633ff,
    #ff0099
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowMove 2s linear infinite;
  font-weight: bold;
}

@keyframes rainbowMove{
  0%{background-position:0% center;}
  100%{background-position:300% center;}
}

/* ===== 音声合成オプション ===== */
.speech-option{
  display:none;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:9px 11px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid var(--border);
  font-size:13px;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}

.speech-option.show{
  display:flex;
}

.speech-option input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--blue);
}

/* ===== 翻訳文字の自然な出現 ===== */
.char-fade{
  display:inline-block;
  opacity:0;
  transform:translateY(7px);
  filter:blur(2px);
  animation:charAppear .22s cubic-bezier(.2,.8,.2,1) forwards;
  white-space:pre-wrap;
}

@keyframes charAppear{
  0%{
    opacity:0;
    transform:translateY(7px);
    filter:blur(2px);
  }
  60%{
    opacity:.75;
    transform:translateY(1px);
    filter:blur(.5px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

#selectedResult{
  position:relative;
  padding:12px 12px 46px 12px;
  background:#f5fbff;
  border-radius:10px;
  min-height:70px;
  white-space:pre-wrap;
  word-break:break-word;
  border:1px solid #d9eefc;
}

/* 翻訳結果フィールドの右下 */
.speech-option{
  position:absolute;
  right:10px;
  bottom:8px;

  display:none;
  align-items:center;
  gap:6px;

  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.speech-option.show{
  display:flex;
}

.speech-option input{
  width:16px;
  height:16px;
  margin:0;
  cursor:pointer;
  accent-color:var(--blue);
}
/* ================================
   手話アニメーション
================================ */

.sign-option{
  display:none;
  margin-top:8px;
  font-size:12px;
}

.sign-option.show{
  display:block;
}

.sign-option label{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}

.sign-option input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--blue);
}


/* 手話アニメーション表示領域 */

#signVideoBox{
  display:none;

  margin-top:12px;

  width:100%;
  height:300px;

  border-radius:12px;
  overflow:hidden;

  background:#f1f5f9;
  border:1px solid #d9eefc;

  position:relative;
}

#signVideoBox.show{
  display:block;
}

#signAvatar{
  width:100%;
  height:100%;

  border:0;

  display:block;
}

#signLoading{
  position:absolute;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;

  color:var(--muted);

  background:#f8fafc;
  
  z-index:2;
}