:root { color-scheme: light; }
    * { box-sizing: border-box; }
    body { 
      margin: 0; 
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
      background: linear-gradient(135deg, #e9f1e6 0%, #d4e8d1 50%, #c8e0c5 100%);
      color:#222; 
      position: relative;
      overflow-x: hidden;
      min-height: 100vh;
    }
    
    /* 動く雲のアニメーション */
    .clouds {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50px;
      opacity: 0.5;
    }
    .cloud:before,
    .cloud:after {
      content: '';
      position: absolute;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50px;
    }
    .cloud1 {
      width: 100px;
      height: 40px;
      top: 20%;
      animation: cloudMove 30s infinite linear;
    }
    .cloud1:before {
      width: 50px;
      height: 50px;
      top: -25px;
      left: 10px;
    }
    .cloud1:after {
      width: 60px;
      height: 60px;
      top: -35px;
      right: 10px;
    }
    .cloud2 {
      width: 120px;
      height: 50px;
      top: 50%;
      animation: cloudMove 40s infinite linear;
      animation-delay: -10s;
    }
    .cloud2:before {
      width: 60px;
      height: 60px;
      top: -30px;
      left: 15px;
    }
    .cloud2:after {
      width: 70px;
      height: 70px;
      top: -40px;
      right: 15px;
    }
    .cloud3 {
      width: 80px;
      height: 35px;
      top: 75%;
      animation: cloudMove 35s infinite linear;
      animation-delay: -20s;
    }
    .cloud3:before {
      width: 40px;
      height: 40px;
      top: -20px;
      left: 8px;
    }
    .cloud3:after {
      width: 50px;
      height: 50px;
      top: -25px;
      right: 8px;
    }
    @keyframes cloudMove {
      0% { transform: translateX(-150px); }
      100% { transform: translateX(calc(100vw + 150px)); }
    }
    
    /* 動く電車のアニメーション */
    .train-track {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background: linear-gradient(to bottom, #8b7355 0%, #6b5d47 50%, #4a3e2e 100%);
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }
    .train-track::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 4px;
      background: repeating-linear-gradient(
        to right,
        #ddd 0px,
        #ddd 20px,
        #333 20px,
        #333 40px
      );
      transform: translateY(-50%);
    }
    .train {
      position: absolute;
      bottom: 20px;
      width: 120px;
      height: 50px;
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
      border-radius: 8px 8px 0 0;
      animation: trainMove 15s infinite linear;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .train::before {
      content: '🚃';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
    .train::after {
      content: '';
      position: absolute;
      top: -10px;
      left: 20px;
      width: 20px;
      height: 20px;
      background: #ffd700;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    }
    .train2 {
      background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
      animation: trainMove 18s infinite linear;
      animation-delay: -5s;
    }
    .train3 {
      background: linear-gradient(135deg, #ffe66d 0%, #ffd93d 100%);
      animation: trainMove 20s infinite linear;
      animation-delay: -10s;
    }
    @keyframes trainMove {
      0% { transform: translateX(-150px); }
      100% { transform: translateX(calc(100vw + 150px)); }
    }
    
    .wrap { 
      max-width: 960px; 
      margin: 24px auto 80px; 
      padding: 16px; 
      position: relative;
      z-index: 10;
    }
    .title { 
      text-align: center; 
      font-weight: 700; 
      letter-spacing: .1em; 
      color:#b39b5e; 
      font-size: 32px; 
      margin-bottom: 16px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
      position: relative;
    }
    .title::before {
      content: '🚅';
      display: inline-block;
      margin-right: 10px;
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .panel { 
      border: 1px solid #d6d9c8; 
      background: linear-gradient(135deg, #f6f3e5 0%, #fff9e6 100%);
      border-radius: 10px; 
      padding: 20px; 
      box-shadow: 0 4px 12px rgba(0,0,0,.1);
      position: relative;
      overflow: hidden;
    }
    .panel::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: rotate 20s infinite linear;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .row { 
      display: grid; 
      grid-template-columns: 140px 1fr auto; 
      gap: 16px; 
      align-items: center; 
      margin: 14px 0;
      position: relative;
      z-index: 1;
    }
    .label { 
      background: linear-gradient(135deg, #efe3b2 0%, #f5e8c4 100%);
      color:#333; 
      border-radius: 6px; 
      padding: 10px 12px; 
      text-align: center; 
      font-weight: 700;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
      cursor: pointer;
    }
    .focus-link { text-decoration: underline; cursor: pointer; font-weight: 700; }
    .focus-link:hover { color: #8b0000; }
    .label:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .input, .select { 
      background:#ffffff; 
      border: 2px solid #bfc7b3; 
      border-radius: 8px; 
      padding: 12px 14px; 
      width: 100%; 
      font-size: 16px;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
    }
    .input:focus, .select:focus {
      outline: none;
      border-color: #6ea0d6;
      box-shadow: 0 0 0 3px rgba(110, 160, 214, 0.2);
      transform: translateY(-2px);
    }
    .input::placeholder { color: rgba(0,0,0,.45); }
    .input:hover {
      border-color: #a8d5ba;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn { 
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      gap:.5em; 
      padding: 10px 16px; 
      border-radius: 8px; 
      border: 1px solid #bfc7b3; 
      background:#eef3ea; 
      color:#333; 
      cursor:pointer; 
      font-weight:600;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    .btn:hover::before {
      width: 300px;
      height: 300px;
    }
    .btn:hover { 
      background:#e2eadf; 
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .btn-primary { 
      background: linear-gradient(135deg, #6ea0d6 0%, #5a8cc2 100%);
      border-color:#5a8cc2; 
      color:#fff;
      box-shadow: 0 4px 8px rgba(110, 160, 214, 0.3);
    }
    .btn-primary:hover { 
      background: linear-gradient(135deg, #5f96cf 0%, #4a7ba8 100%);
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(110, 160, 214, 0.4);
    }

    .muted { color:#5d6a60; font-size: 13px; }
    .muted-label { font-weight:700; margin-right:6px; color:#5d6a60; }

    .date-time { 
      display: grid; 
      grid-template-columns: 140px 1fr; 
      gap:16px; 
      align-items: start; 
      margin: 18px 0;
      position: relative;
      z-index: 1;
    }
    .time-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .time-select { display:flex; align-items:center; gap:8px; }
    .select { padding: 10px 12px; }

    .optional { border:2px dashed #c4d0c1; border-radius: 8px; padding: 14px; margin-top: 8px; }

    .reset-form-row { align-items: flex-start; }
    #reset-search-form { font-size: 14px; }

    .actions { margin-top: 28px; display:flex; justify-content:center; }
    .search { 
      width: 60%; 
      font-size: 18px; 
      padding: 14px; 
      background: linear-gradient(135deg, #ffffff 0%, #f0f8f4 100%);
      border: 2px solid #a8d5ba; 
      color: #4f705d;
      position: relative;
    }
    .search::after {
      content: '🔍';
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      animation: searchPulse 2s infinite;
    }
    @keyframes searchPulse {
      0%, 100% { transform: translateY(-50%) scale(1); }
      50% { transform: translateY(-50%) scale(1.2); }
    }
    .search:hover { 
      background: linear-gradient(135deg, #f0f8f4 0%, #e0f0e8 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(168, 213, 186, 0.3);
    }

    .error-message {
      animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .input.error,
    .select.error {
      border-color: #f33 !important;
      background-color: #fff5f5 !important;
      animation: shake 0.3s;
    }
    .input.error:hover,
    .select.error:hover {
      border-color: #f33 !important;
      background-color: #fff5f5 !important;
    }
    .input.error:focus,
    .select.error:focus {
      border-color: #f33 !important;
      background-color: #fff5f5 !important;
      box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.2) !important;
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

    /* 上に戻るボタン */
    .scroll-to-top {
      position: fixed;
      bottom: 24px;
      right: 24px;
      padding: 12px 16px;
      background: linear-gradient(135deg, #6ea0d6 0%, #5a8cc2 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(110, 160, 214, 0.4);
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
    }
    .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
    }
    .scroll-to-top:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(110, 160, 214, 0.5);
    }

    @media (max-width: 640px) {
      .row { grid-template-columns: 110px 1fr; }
      .row > .btn-add { grid-column: 2 / 3; }
      .date-time { grid-template-columns: 110px 1fr; }
      .search { width: 100%; }
      .scroll-to-top { bottom: 16px; right: 16px; padding: 10px 14px; font-size: 13px; }
    }