h2 {
      font-family: 'Zen Maru Gothic', sans-serif;
    }
    .h2-ai {
      background: #fff;
      padding: .5em 0;
      margin-bottom: 1em;
      border-bottom: 1px solid #ebebeb;
    }
    h1 {
      color: #0c88cc;
      font-weight: bold;
    }
    .form-select, .form-control, .btn-primary {
      margin-top: 1rem;
    }
    .description {
      margin-top: 1rem;
    }
    .description p {
      margin-bottom:0;
      font-size: 13px;
      font-size: 1.3rem;
    }
    .main-layout {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      margin-top: 2rem;
    }
    #wordCount {
      font-size: 11px;
      color: #787878;
    }
    .input-area, .output-area {
      flex: 1;
    }
    .result {
    }
    canvas {
      margin-top: 2rem;
    }
    #correction span {
      font-weight: bold;
    }
    .score-badge {
      display: block;
      padding: 0.4em 0.75em;
      border-radius: 1rem;
      font-weight: bold;
      margin-right: 0.5rem;
      color: white;
      position: relative;
      font-family: 'Zen Maru Gothic', sans-serif;
    }
    .score-badge .score-item{
      position: absolute;
      top:2px;
      right: 0;
      left: 0;
      margin:0 auto;
      font-size: 11px;
    }
    .score-number {
      font-size: 36px;
    }
    .score-overall .score-number {
      font-size: 56px;
    }
    .score-vocabulary { color: #A6D472; }
    .score-grammar { color: #FFD758; }
    .score-content { color: #F99F66; }
    .score-structure { color: #F57A9C; }
    .score-instruction { color: #A77CBF; }
    .score-overall { color: #31B5D1; }
    #questionLoadingPopup {
      display: flex;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 9998;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none; /* アニメーション中クリック防止 */
    }
    #questionLoadingPopup.show {
      opacity: 1;
      pointer-events: all;
    }
    /* Loading Popup */
    #loadingPopup {
      display: flex;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    #loadingPopup.show {
      opacity: 1;
      pointer-events: all;
    }

    .loading-box {
      background-color:rgba(255,255,255,.9);
      padding: 2rem 1.5rem;
      border-radius: 1rem;
      border: 2px solid #ebebeb;
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      width: 280px;
      min-height: 200px; /* 画像＋テキストに合わせて調整 */
      box-sizing: border-box;
      font-family: 'Zen Maru Gothic', sans-serif;
      color: #0c88cc;
    }

    .loading-image {
      width: 200px;
      height: auto;
      max-width: 100%;
      margin-bottom: 1rem;
    }
    @media (max-width: 768px) {
      .main-layout {
        flex-direction: column;
      }
      .input-area, .output-area {
        width: 100%;
      }
      canvas {
        width: 100% !important;
        height: auto !important;
      }
      .loading-box {
        width: 80%;
        font-size: 1.2rem;
      }
    }
    /* iOSのフォーカスズーム防止（スマホのみ） */
    @media (max-width: 768px) {
      input.form-control,
      select.form-select,
      textarea.form-control {
        font-size: 16px !important;  /* ←16px以上ならズームしません */
        line-height: 1.4;            /* 余白も少し広めに */
      }
    }
    
    select.form-select{
      font-size: 16px !important;  /* ←16px以上ならズームしません */
      line-height: 1.4;            /* 余白も少し広めに */
    }
    .input-group .btn {
      padding: 1.5rem .75rem;
      min-width: 0;
    }
    .input-group .btn-primary {
      box-shadow: none;
      font-size: 1.3rem;
      font-size: 13px;
      font-family: 'Zen Maru Gothic', sans-serif;
    }

    #questionDisplay {
      font-family: 'Noto Serif', serif;
    }
    /* 講師カード */
    .instructor-card {
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 14px;
    }
    .instructor-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
    }
    .instructor-thumb {
      width: 100%;
      aspect-ratio: 1 / 1;      /* 正方形トリミング */
      object-fit: cover;
    }
    .instructor-name {
      font-weight: 700;
      margin-top: .5rem;
      margin-bottom: 0;
    }
    .instructor-meta {
      font-size: .9rem;
      color: #6c757d;
    }
    /* タイマー表示（ラベル右の小型カウンタ） */
    .timer-display {
      font-variant-numeric: tabular-nums;
      font-size: 1.4rem;
      line-height: 1;
      padding: .5rem .75rem;
      border-radius: .5rem;
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      min-width: 3.5rem; /* 00:00 幅確保 */
      text-align: center;
    }

    /* モバイル時はボタンをやや押しやすく */
    @media (max-width: 768px) {
      #timerBtn {
        padding: .35rem .6rem;
      }
    }
    .fade-in { animation: fadeIn .18s ease-out; }
    @keyframes fadeIn { from {opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }
    #wordCount { font-variant-numeric: tabular-nums; }
    #wordCountNum { font-variant-numeric: tabular-nums; font-weight: 700; }
    .answer-head {
      background-color: #e9ecef;
      border: 1px solid #ced4da;
      padding: .275rem .95rem;
      border-radius: .25rem .25rem 0 0;
    }
    #answer.form-control {
      margin-top: 0;
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    #basic-addon1,#level {
      font-family: 'Zen Maru Gothic', sans-serif;
    }
    .input-group-text {
      background-color: #dcecfd;
      border: 1px solid #aed4fa;
      color: #0c88cc;
      font-weight: bold;
    }