:root {
    --bg: #FFF9E6;        /* 全体の背景：淡いクリーム */
    --accent: #b26000;    /* 強調色（茶） */
    --light: #FFF5CC;     /* 選択中や強調用：少し濃い黄色 */
    --text-main: #222;    /* メインテキスト */
    --text-sub: #555;     /* サブテキスト */
    
    /* 重要/完了系ボタン */
    --pri-bg:         #fff9f9;
    --pri-bg-hover:   #FFD666;
    --pri-border:     #D9B24D;
    --pri-text:       #1f1f1f;

    /* サブ/通常ボタン */
    --sec-bg:         #F4F4F4;
    --sec-bg-hover:   #EAEAEA;
    --sec-border:     #D7D7D7;
    --sec-text:       #2a2a2a;
    
    /* システム設定ボタン */
    --sys-bg:         #EAEAEA;
    --sys-bg-hover:   #EAEAEA;
    --sys-border:     #D7D7D7;
    --sys-text:       #2a2a2a;
    

    --slider-fill: #b26000;   /* 進んだ部分 */
    --slider-remaining: #d3c3b5; /* 残り部分（薄い色） */
    --slider-thumb: #8f7c65;  /* つまみ */
    
    --primary-color: #b26000;    /* スライダー進んだ部分と同じ色 */
    --primary-light: #d3c3b5;    /* スライダー残り部分と同じ薄色 */
    --thumb-color: #8f7c65;      /* スライダーつまみと同じ色 */
    
    --check-color: #b26000;   /* チェックON時 */
       --check-light: #d3c3b5;   /* チェックOFF時 */
  }
#ad-wide{
width:98%;
}
#msg{
text-align: left;
}
#btn_howtouse{
color: white;
    background-color: saddlebrown;
    font-size: small;
    position: absolute;
    right: 1em;
    padding: 5px;
    top: 0;
}
.img_manual{
width: 200px;
    vertical-align: top;
    padding: 3px;
    margin: 5px;
    box-shadow: 1px 2px 5px gray;
}

.link-kiyaku{
margin-left:1em;
text-decoration: none;
}
    
  .ad-frame {/*
      background-color: #f0f0f0;
      border: 2px dashed #aaa;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #333;
      z-index: 1000;
*/
    }

    /* 横長画面：左端に縦長広告（例：120×300） */
    @media (orientation: landscape) {
      .ad-frame {
        display: inline-block;
        position:relative ;
        margin-right: 10px;
        min-width: 120px;
        min-height: 300px; /* 例として、300pxの縦長広告 */
        max-width: 30%;
        vertical-align: top;
      }
    }

    /* 縦長画面：上部中央に横長広告（例：300×50） */
    @media (orientation: portrait) {
      .ad-frame {
        position: relative;
        display: flex;
        top: 0;
        min-width: 300px;
        min-height: 50px; /* スマホバナー最小サイズ */
        max-width: 100%;
        border-radius: 0;
      }
    }


    
    /**チェックボックス**/
    .custom-checkbox input {
       display: none; /* デフォルトのチェックボックスは非表示 */
     }

     .custom-checkbox span {
       display: inline-block;
       width: 20px;
       height: 20px;
       border-radius: 4px;
       background-color: var(--check-light); /* 未チェック時 */
       border: 2px solid var(--check-color);
       vertical-align: middle;
       transition: background-color 0.2s;
     }
     .custom-checkbox input:checked + span {
       background-color: var(--check-color); /* チェックON時 */
     }
    /**チェックボックスここまで**/
    
    /**  スライダー　*/
    /* 共通設定 */
    input[type="range"] {
      -webkit-appearance: none;
      width: 300px;
      height: 6px;
      border-radius: 5px;
      background: transparent; /* 各ブラウザ用のtrackで指定する */
      outline: none;
    }

    /* Chrome / Safari / Edge(新) */
    input[type="range"]::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 5px;
      background: linear-gradient(
        to right,
        var(--slider-fill) 0%,
        var(--slider-fill) var(--value, 50%),
        var(--slider-remaining) var(--value, 50%),
        var(--slider-remaining) 100%
      );
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--slider-thumb);
      cursor: pointer;
      margin-top: -6px;
    }

    /* Firefox */
    input[type="range"]::-moz-range-track {
      height: 6px;
      border-radius: 5px;
      background: var(--slider-remaining);
    }
    input[type="range"]::-moz-range-progress {
      height: 6px;
      border-radius: 5px;
      background: var(--slider-fill);
    }
    input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--slider-thumb);
      cursor: pointer;
    }

    /* IE / Edge(旧) */
    input[type="range"]::-ms-track {
      height: 6px;
      border-radius: 5px;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    input[type="range"]::-ms-fill-lower {
      background: var(--slider-fill);
      border-radius: 5px;
    }
    input[type="range"]::-ms-fill-upper {
      background: var(--slider-remaining);
      border-radius: 5px;
    }
    input[type="range"]::-ms-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--slider-thumb);
      cursor: pointer;
    }


    
    
    /**  スライダーここまで　**/
    
    

  body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto,
      'Hiragino Kaku Gothic ProN', Meiryo, 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--text-main);
    margin: 0;
    padding: 18px;
    text-align: center;
  }

  h3 {
    margin: 6px 0 12px;
    color: var(--accent);
  }
.title{
    color: var(--accent);
}

  #output {
    font-size: 1.25rem;
    border: 2px solid var(--accent);
    padding: 10px;
    margin: 8px auto;
    background: #fff;
    border-radius: 8px;
    min-height: 48px;
    width: 90%;
    max-width: 900px;
    white-space: pre-wrap;
  }

  #completeDisplay {
    margin-top: 12px;
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
  }

  #choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
  }

  .choice {
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e6dcae;
    font-size: 1.05rem;
    user-select: none;
    color: var(--text-main);
  }

  .choice.highlight {
    background: var(--light);
    border-color: #e0c971;
    box-shadow: 0 6px 18px rgba(224, 201, 113, 0.3);
    transform: translateY(-3px);
  }

  #selectHint {
    margin-top: 8px;
    color: var(--text-sub);
    font-size: 0.95rem;
  }

  footer {
    margin-top: 18px;
    color: var(--text-sub);
    font-size: 0.9rem;
  }

  @media (max-width:600px) {
    .choice {
      min-width: 88px;
      padding: 10px;
      font-size: 0.95rem;
    }
  }

  #enter-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--accent);
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    z-index: 9999;
  }

  #enter-button:hover {
    background-color: orange;
  }

  /* 定型文編集モーダル */
  #templateEditor {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 16px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 6px 20px rgba(44, 111, 173, 0.3);
    z-index: 1000;
  }

  #templateEditor h2 {
    color: var(--accent);
    margin-top: 0;
  }

  #templateInput {
    width: 100%;
    font-size: 1rem;
    padding: 8px;
    box-sizing: border-box;
    resize: none;
  }

  #templateEditor button {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
  }

  #addTemplateBtn {
    background: var(--accent);
    color: #fff;
  }

  #closeEditorBtn {
    background: #ccc;
  }

  #templateList {
    margin-top: 12px;
    max-height: 150px;
    overflow-y: auto;
    padding-left: 20px;
    color: var(--text-main);
  }

  #templateList li {
    margin-bottom: 6px;
    cursor: pointer;
  }

  #templateList button {
    margin-left: 12px;
    background: #d9534f;
    color: white;
    padding: 2px 6px;
    font-size: 0.9rem;
  }

  #openEditorBtn {
    margin-top: 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
  }

  /* 走査間隔設定 */
  #intervalContainer {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--text-sub);
  }

  #intervalRange {
    vertical-align: middle;
    margin: 0 8px;
  }

  #lateContainer {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--text-sub);
  }

  #lateRange {
    vertical-align: middle;
    margin: 0 8px;
  }

  #point-in-Top,
  #point-in-Btm {
    position: absolute;
    color: red;
    animation: blink 0.5s infinite alternate;
    z-index: 9999;
    display: none;
    font-size: xx-large;
  }

  @keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0.2; }
  }

  #recalbBtn {
    background-color: var(--accent);
    color: white;
    margin: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
  }
    
    .btn-primary {
        background: var(--pri-bg);
        border-color: var(--pri-border);
        color: var(--pri-text);
        }
    .btn-secondary {
        background: var(--sec-bg);
        border-color: var(--sec-border);
        color: var(--sec-text);
        }
    .btn-system {
            background: var(--sys-bg);
            border-color: var(--sys-border);
            color: var(--sys-text);
　　　}


    .contentsRight{
    display: inline-block;
    text-align: left;
    }

    .areaCheckbox{
      height: 2em;
    }

    .h100px{
       display:block;
       height:100px;
     }
    .contentsCenter{
    padding: 10px;
    margin-top: 10px;
    background-color: papayawhip;

    }
    .display-none{
        display:none;
    }



  /* モーダルの背景 */
  .modal-bg {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    text-align: left;
  }

  /* モーダル本体 */
  .modal-content {
    background: #fff;
    margin: 50px auto;
    padding: 20px;
    max-width:90%;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 80%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  .modal-content h1, .modal-content h2, .modal-content h3 {
    color: brown;
  }
  .modal-content ul, .modal-content ol {
    padding-left: 10px;
  }
  .note {
    background: #f0f0f0;
    padding: 8px;
    border-left: 4px solid brown;
    margin: 10px 0;
  }

  /* 閉じるボタン */
  .close-btn {
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: darkslateblue;
    border-radius: 3px;
    padding: 3px 7px;
  }