<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="680" viewBox="0 0 1200 680" role="img" aria-labelledby="title desc">
  <title id="title">大学生の授業・バイトと資格勉強を両立する24時間スケジュール習慣化図解</title>
  <desc id="desc">大学生の一般的な1日（授業・移動・バイト・自由時間・睡眠）のタイムラインの中に、1限後の空きコマ15分・バイト前の10分・就寝前の10分という3つのスキマ時間を勉強タイムとしてドッキングさせる図解</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f4fbff"/>
      <stop offset="0.5" stop-color="#fbfdf5"/>
      <stop offset="1" stop-color="#fff7fb"/>
    </linearGradient>
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#667085" flood-opacity="0.14"/>
    </filter>
    <style>
      .title{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:28px;font-weight:800;fill:#1f2937}
      .sub{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:14.5px;font-weight:600;fill:#64748b}
      .callname{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:12.5px;font-weight:800;fill:#166534}
      .callbody{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:10.5px;font-weight:600;fill:#15803d}
      .segname{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:11px;font-weight:700;fill:#334155}
      .hourtick{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:10.5px;font-weight:600;fill:#94a3b8}
      .legend{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:11.5px;font-weight:600;fill:#475569}
      .banner{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:15px;font-weight:700;fill:#166534}
      .bannersmall{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:12px;font-weight:600;fill:#475569}
    </style>
  </defs>

  <rect width="1200" height="680" rx="40" fill="url(#bg)"/>
  <circle cx="100" cy="80" r="58" fill="#dbeafe" opacity="0.5"/>
  <circle cx="1100" cy="100" r="70" fill="#dcfce7" opacity="0.5"/>
  <circle cx="1090" cy="620" r="80" fill="#fce7f3" opacity="0.45"/>
  <circle cx="110" cy="610" r="64" fill="#fef3c7" opacity="0.5"/>

  <text x="600" y="48" text-anchor="middle" class="title">大学生の24時間・スキマ時間ドッキングマップ</text>
  <text x="600" y="76" text-anchor="middle" class="sub">「まとめて3時間」より「毎日15分×3回」が最強——生活リズムに勉強を差し込むだけ</text>

  <!-- Callout 1: 空きコマ -->
  <line x1="238" y1="120" x2="238" y2="220" stroke="#22c55e" stroke-width="3" stroke-dasharray="4,3"/>
  <g filter="url(#softShadow)">
    <rect x="128" y="94" width="220" height="66" rx="14" fill="#f0fdf4" stroke="#86efac" stroke-width="2.5"/>
    <text x="238" y="116" text-anchor="middle" class="callname">① 1限後の空きコマ・15分</text>
    <text x="238" y="134" text-anchor="middle" class="callbody">教室に座ったまま単語帳や一問一答</text>
    <text x="238" y="150" text-anchor="middle" class="callbody">を開くだけ。移動する前が狙い目</text>
  </g>

  <!-- Callout 2: バイト前 -->
  <line x1="517" y1="120" x2="517" y2="220" stroke="#22c55e" stroke-width="3" stroke-dasharray="4,3"/>
  <g filter="url(#softShadow)">
    <rect x="407" y="94" width="220" height="66" rx="14" fill="#f0fdf4" stroke="#86efac" stroke-width="2.5"/>
    <text x="517" y="116" text-anchor="middle" class="callname">② バイト前のマックで10分</text>
    <text x="517" y="134" text-anchor="middle" class="callbody">シフトに入る前の待ち時間に</text>
    <text x="517" y="150" text-anchor="middle" class="callbody">スマホで講義動画を1本だけ見る</text>
  </g>

  <!-- Callout 3: 就寝前 -->
  <line x1="777" y1="120" x2="777" y2="220" stroke="#22c55e" stroke-width="3" stroke-dasharray="4,3"/>
  <g filter="url(#softShadow)">
    <rect x="667" y="94" width="220" height="66" rx="14" fill="#f0fdf4" stroke="#86efac" stroke-width="2.5"/>
    <text x="777" y="116" text-anchor="middle" class="callname">③ 帰宅後・就寝前の10分</text>
    <text x="777" y="134" text-anchor="middle" class="callbody">今日やった分だけ復習して寝る。</text>
    <text x="777" y="150" text-anchor="middle" class="callbody">「ゼロの日」を作らないための保険</text>
  </g>

  <!-- Timeline bar -->
  <g filter="url(#softShadow)">
    <rect x="80" y="220" width="1040" height="60" rx="10" fill="#ffffff" stroke="#e2e8f0" stroke-width="2"/>
  </g>
  <!-- segments -->
  <rect x="80" y="220" width="43" height="60" fill="#E2E8F0"/>
  <rect x="123" y="220" width="44" height="60" fill="#DBEAFE"/>
  <rect x="167" y="220" width="65" height="60" fill="#93C5FD"/>
  <rect x="232" y="220" width="11" height="60" fill="#22C55E"/>
  <rect x="243" y="220" width="64" height="60" fill="#93C5FD"/>
  <rect x="307" y="220" width="33" height="60" fill="#FDE68A"/>
  <rect x="340" y="220" width="65" height="60" fill="#93C5FD"/>
  <rect x="405" y="220" width="65" height="60" fill="#E2E8F0"/>
  <rect x="470" y="220" width="43" height="60" fill="#DDD6FE"/>
  <rect x="513" y="220" width="8" height="60" fill="#22C55E"/>
  <rect x="521" y="220" width="209" height="60" fill="#FDBA74"/>
  <rect x="730" y="220" width="43" height="60" fill="#DDD6FE"/>
  <rect x="773" y="220" width="8" height="60" fill="#22C55E"/>
  <rect x="781" y="220" width="339" height="60" fill="#CBD5E1"/>
  <rect x="80" y="220" width="1040" height="60" rx="10" fill="none" stroke="#e2e8f0" stroke-width="2"/>

  <!-- hour ticks -->
  <text x="80" y="300" text-anchor="middle" class="hourtick">7時</text>
  <text x="340" y="300" text-anchor="middle" class="hourtick">13時</text>
  <text x="600" y="300" text-anchor="middle" class="hourtick">19時</text>
  <text x="860" y="300" text-anchor="middle" class="hourtick">翌1時</text>
  <text x="1120" y="300" text-anchor="middle" class="hourtick">翌7時</text>

  <!-- segment labels below where space allows -->
  <text x="145" y="335" text-anchor="middle" class="segname">起床</text>
  <text x="199" y="335" text-anchor="middle" class="segname">通学</text>
  <text x="275" y="335" text-anchor="middle" class="segname">2限</text>
  <text x="323" y="335" text-anchor="middle" class="segname">昼休み</text>
  <text x="437" y="335" text-anchor="middle" class="segname">空きコマ</text>
  <text x="491" y="335" text-anchor="middle" class="segname">移動</text>
  <text x="625" y="335" text-anchor="middle" class="segname">バイト</text>
  <text x="950" y="335" text-anchor="middle" class="segname">睡眠</text>

  <!-- Legend -->
  <g transform="translate(80,368)">
    <rect x="0" y="0" width="14" height="14" rx="3" fill="#93C5FD"/><text x="20" y="12" class="legend">授業</text>
    <rect x="90" y="0" width="14" height="14" rx="3" fill="#FDBA74"/><text x="110" y="12" class="legend">バイト</text>
    <rect x="200" y="0" width="14" height="14" rx="3" fill="#DDD6FE"/><text x="220" y="12" class="legend">移動</text>
    <rect x="300" y="0" width="14" height="14" rx="3" fill="#CBD5E1"/><text x="320" y="12" class="legend">睡眠・自由</text>
    <rect x="440" y="0" width="14" height="14" rx="3" fill="#22C55E"/><text x="460" y="12" class="legend">スキマ時間ドッキング（勉強）</text>
  </g>

  <!-- Bottom takeaway banner -->
  <g filter="url(#softShadow)">
    <rect x="80" y="410" width="1040" height="150" rx="24" fill="#f0fdf4" stroke="#86efac" stroke-width="3"/>
    <text x="600" y="448" text-anchor="middle" class="banner">「土日にまとめて3時間」の計画は100%崩壊する</text>
    <text x="600" y="478" text-anchor="middle" class="bannersmall">15分×3回でも1日45分。1週間続ければ約5時間——まとめ勉強の予定倒れより確実に積み上がる</text>
    <text x="600" y="504" text-anchor="middle" class="bannersmall">「今日勉強する日」ではなく「1限後・バイト前・寝る前」という生活の“すきま”に固定でドッキングさせる</text>
    <text x="600" y="530" text-anchor="middle" class="bannersmall">場所と時間を先に決めておけば、意志の力に頼らず自動的に体が動くようになる</text>
  </g>
</svg>
