html-pages/gw_trip_2026.html at main · haoge124/html-pages · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GW 四国・紀伊半島周遊プラン 2026</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
      background: #f5f0eb;
      color: #333;
      line-height: 1.7;
    }
    header {
      background: linear-gradient(135deg, #1a6b4a, #2d9e6b);
      color: white;
      padding: 48px 24px;
      text-align: center;
    }
    header h1 { font-size: 2rem; margin-bottom: 8px; }
    header p { font-size: 1rem; opacity: 0.85; }
    .badges {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .badge {
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 0.85rem;
    }
    .container { max-width: 900px; margin: 0 auto; padding: 32px 16px; }
    .day-card {
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      margin-bottom: 28px;
      overflow: hidden;
    }
    .day-header {
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .day-num {
      background: #1a6b4a;
      color: white;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .day-title h2 { font-size: 1.15rem; color: #1a6b4a; }
    .day-title p { font-size: 0.85rem; color: #888; margin-top: 2px; }
    .day-body { padding: 0 24px 20px; }
    .schedule-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
      margin-bottom: 16px;
    }
    .schedule-table th {
      background: #f0f7f4;
      padding: 8px 12px;
      text-align: left;
      color: #1a6b4a;
      font-weight: 600;
      border-bottom: 2px solid #d0e8dc;
    }
    .schedule-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #f0f0f0;
      vertical-align: top;
    }
    .schedule-table tr:last-child td { border-bottom: none; }
    .tag {
      display: inline-block;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 0.75rem;
      font-weight: bold;
      margin-right: 4px;
      white-space: nowrap;
    }
    .tag-gourmet { background: #fde2e2; color: #b02a2a; }
    .tag-view { background: #d4edda; color: #155724; }
    .tag-move { background: #d1ecf1; color: #0c5460; }
    .tag-culture { background: #e2d9f3; color: #4a2c8a; }
    .tag-nature { background: #d4f1d4; color: #1a5c1a; }
    .hotel-box {
      background: #f8f4ff;
      border-left: 4px solid #6f42c1;
      border-radius: 0 8px 8px 0;
      padding: 12px 16px;
      margin-top: 12px;
      font-size: 0.9rem;
    }
    .hotel-box strong { color: #6f42c1; }
    .tip-box {
      background: #fff8e1;
      border-left: 4px solid #f0ad4e;
      border-radius: 0 8px 8px 0;
      padding: 12px 16px;
      margin-top: 12px;
      font-size: 0.88rem;
      color: #555;
    }
    .tip-box strong { color: #d68910; }
    .summary-card {
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      padding: 24px;
      margin-bottom: 28px;
    }
    .summary-card h2 { color: #1a6b4a; margin-bottom: 16px; font-size: 1.1rem; }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
    }
    .summary-item {
      text-align: center;
      padding: 16px;
      background: #f0f7f4;
      border-radius: 10px;
    }
    .summary-item .icon { font-size: 2rem; margin-bottom: 6px; }
    .summary-item .label { font-size: 0.8rem; color: #888; }
    .summary-item .value { font-size: 1rem; font-weight: bold; color: #1a6b4a; }
    .map-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #4285F4;
      color: white;
      padding: 7px 16px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: bold;
      margin-bottom: 14px;
    }
    footer {
      text-align: center;
      padding: 32px;
      color: #aaa;
      font-size: 0.85rem;
    }
  </style>
</head>
<body>

<header>
  <h1>🏝️ GW 四国・紀伊半島周遊プラン 2026</h1>
  <p>2026年4月29日（水）〜 5月5日（火）　7日間 一人旅</p>
  <div class="badges">
    <span class="badge">🌊 渦潮・秘境</span>
    <span class="badge">🍜 ご当地グルメ</span>
    <span class="badge">🌅 絶景スポット</span>
    <span class="badge">🚗 ドライブ旅</span>
    <span class="badge">🐼 アドベンチャーワールド</span>
  </div>
</header>

<div class="container">

  <!-- サマリー -->
  <div class="summary-card">
    <h2>📊 旅のサマリー</h2>
    <div class="summary-grid">
      <div class="summary-item">
        <div class="icon">📅</div>
        <div class="label">期間</div>
        <div class="value">7日間</div>
      </div>
      <div class="summary-item">
        <div class="icon">🏨</div>
        <div class="label">宿泊数</div>
        <div class="value">6泊</div>
      </div>
      <div class="summary-item">
        <div class="icon">🗾</div>
        <div class="label">エリア</div>
        <div class="value">四国・紀伊半島</div>
      </div>
      <div class="summary-item">
        <div class="icon">🍽️</div>
        <div class="label">グルメ</div>
        <div class="value">阿波・土佐・伊予</div>
      </div>
      <div class="summary-item">
        <div class="icon">🌄</div>
        <div class="label">絶景</div>
        <div class="value">渦潮・秘境・夕日</div>
      </div>
      <div class="summary-item">
        <div class="icon">🚗</div>
        <div class="label">総走行距離</div>
        <div class="value">約2,000km</div>
      </div>
    </div>
  </div>

  <!-- 1日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">1</div>
      <div class="day-title">
        <h2>東京 → 徳島（渦潮と阿波おどり）</h2>
        <p>4月29日（水）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/東京駅/渦の道,鳴門市/道の駅くるくるなると/阿波おどり会館,徳島市" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>早朝</td>
          <td>東京出発 → 明石海峡大橋・淡路島経由で徳島へ</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
        <tr>
          <td>午後</td>
          <td><strong>渦の道</strong>　大鳴門橋の遊歩道から迫力の渦潮を真下に観察</td>
          <td><span class="tag tag-view">絶景</span></td>
        </tr>
        <tr>
          <td>夕方</td>
          <td><strong>道の駅くるくるなると</strong>　お土産・地元グルメを楽しむ</td>
          <td><span class="tag tag-gourmet">グルメ</span></td>
        </tr>
        <tr>
          <td>夜</td>
          <td><strong>阿波おどり会館</strong>　夜の公演で阿波おどり体験・観覧</td>
          <td><span class="tag tag-culture">文化</span></td>
        </tr>
      </table>
      <div class="hotel-box">
        🏨 <strong>ホテルサンルート徳島</strong>（徳島市元町1-5-1）<br>
        徳島駅前、最上階に天然温泉大浴場完備。阿波おどり会館から徒歩圏内。
      </div>
    </div>
  </div>

  <!-- 2日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">2</div>
      <div class="day-title">
        <h2>徳島 → 高知（大歩危・かずら橋・高知城）</h2>
        <p>4月30日（木）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/ホテルサンルート徳島/大歩危峡観光遊覧船/祖谷のかずら橋/高知城/ドーミーイン高知" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>午前</td>
          <td><strong>大歩危峡観光遊覧船</strong>　吉野川の峡谷を船上から楽しむ絶景クルーズ（雨天でも運航、むしろ人少なめで快適）</td>
          <td><span class="tag tag-view">絶景</span><span class="tag tag-nature">自然</span></td>
        </tr>
        <tr>
          <td>午前〜昼</td>
          <td><strong>祖谷のかずら橋</strong>　山深い秘境に架かるスリル満点の吊り橋</td>
          <td><span class="tag tag-view">絶景</span></td>
        </tr>
        <tr>
          <td>午後</td>
          <td>高知市内へ移動 → チェックイン後に市内散策</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
        <tr>
          <td>午後〜夕方</td>
          <td><strong>高知城</strong>　現存天守12城のひとつ。山内一豊ゆかりの名城。チェックイン後に立ち寄り</td>
          <td><span class="tag tag-culture">文化</span></td>
        </tr>
      </table>
      <div class="hotel-box">
        🏨 <strong>ドーミーイン高知</strong>（高知市帯屋町1-9-12）<br>
        サウナ・大浴場完備。夜鳴きそばサービスあり。高知中心部に位置。
      </div>
    </div>
  </div>

  <!-- 3日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">3</div>
      <div class="day-title">
        <h2>高知（桂浜・水族館・のいち動物公園）→ 松山</h2>
        <p>5月1日（金）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/ドーミーイン高知/桂浜/桂浜水族館/高知県立のいち動物公園/ドーミーイン松山" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>午前</td>
          <td><strong>桂浜</strong>　太平洋を望む名勝。坂本龍馬像と記念撮影</td>
          <td><span class="tag tag-view">絶景</span></td>
        </tr>
        <tr>
          <td>午前〜昼</td>
          <td><strong>桂浜水族館</strong>　ユニークな展示が人気のアットホームな水族館</td>
          <td><span class="tag tag-nature">自然</span></td>
        </tr>
        <tr>
          <td>昼〜午後</td>
          <td><strong>高知県立のいち動物公園</strong>　自然の地形を活かした開放感あふれる動物園。カピバラや珍しい動物が人気</td>
          <td><span class="tag tag-nature">自然</span></td>
        </tr>
        <tr>
          <td>夕方〜</td>
          <td>高知市内から松山へ移動（約2時間）</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
      </table>
      <div class="tip-box">
        🍽️ <strong>高知グルメ：かつおのたたき</strong>　ひろめ市場やお店で新鮮なカツオの藁焼きたたきを堪能。高知ならではの豪快な一品。
      </div>
      <div class="hotel-box">
        🏨 <strong>ドーミーイン松山</strong>（松山市大街道2-6-5）<br>
        大浴場・サウナ完備。大街道エリアに位置し観光に便利。
      </div>
    </div>
  </div>

  <!-- 4日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">4</div>
      <div class="day-title">
        <h2>松山（道後温泉・松山城・下灘駅）</h2>
        <p>5月2日（土）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/ドーミーイン松山/道後温泉本館/松山城/下灘駅,愛媛/喜助の宿松山駅前店" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>午前</td>
          <td><strong>道後温泉本館</strong>　日本最古の温泉。国の重要文化財で入浴体験</td>
          <td><span class="tag tag-culture">文化</span></td>
        </tr>
        <tr>
          <td>昼〜午後</td>
          <td><strong>松山城</strong>　現存天守12城のひとつ。市内を一望できる山城</td>
          <td><span class="tag tag-culture">文化</span></td>
        </tr>
        <tr>
          <td>夕方</td>
          <td><strong>下灘駅</strong>　「日本一海に近い駅」。海と空と線路が重なる夕日の絶景スポット</td>
          <td><span class="tag tag-view">絶景</span></td>
        </tr>
      </table>
      <div class="tip-box">
        🍽️ <strong>松山グルメ：松山鯛めし</strong>　鯛の刺身を特製タレと生卵でいただく宇和島スタイル。大街道エリアに名店多数。
      </div>
      <div class="hotel-box">
        🏨 <strong>喜助の宿 松山駅前店</strong>（松山市宮田町9-41）<br>
        カプセルホテル形式。松山駅前で翌朝の移動に便利。
      </div>
    </div>
  </div>

  <!-- 5日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">5</div>
      <div class="day-title">
        <h2>亀老山 → 金刀比羅宮 → 栗林公園（高松）</h2>
        <p>5月3日（日）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/喜助の宿松山駅前店/亀老山展望公園/金刀比羅宮/栗林公園/ビジネスホテルプリンス高松" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>午前</td>
          <td><strong>亀老山展望公園</strong>　来島海峡大橋と瀬戸内海を一望できる絶景展望台</td>
          <td><span class="tag tag-view">絶景</span></td>
        </tr>
        <tr>
          <td>昼〜午後</td>
          <td><strong>金刀比羅宮</strong>　785段の石段を登りきった先に広がる讃岐平野の絶景</td>
          <td><span class="tag tag-culture">文化</span><span class="tag tag-view">絶景</span></td>
        </tr>
        <tr>
          <td>夕方</td>
          <td><strong>栗林公園</strong>　特別名勝に指定された江戸時代の大名庭園。ミシュラン3つ星</td>
          <td><span class="tag tag-culture">文化</span><span class="tag tag-nature">自然</span></td>
        </tr>
      </table>
      <div class="tip-box">
        🍜 <strong>うどん県・香川</strong>　移動の合間に讃岐うどんを1〜2軒はしご。本場の太めもちもち麺はぜひ体験を。
      </div>
      <div class="hotel-box">
        🏨 <strong>ビジネスホテル プリンス</strong>（香川県高松市木太町2505-2）<br>
        翌日の和歌山移動に備えた拠点。
      </div>
    </div>
  </div>

  <!-- 6日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">6</div>
      <div class="day-title">
        <h2>高松 → アドベンチャーワールド（白浜）→ 和歌山</h2>
        <p>5月4日（月）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/ビジネスホテルプリンス高松/アドベンチャーワールド,白浜/ドーミーインPREMIUM和歌山" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>早朝</td>
          <td>高松出発 → 明石海峡大橋・阪和道経由で白浜へ（約3時間）</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
        <tr>
          <td>午前〜夕方</td>
          <td><strong>アドベンチャーワールド</strong>　パンダの聖地。7頭ものジャイアントパンダが暮らす世界屈指の動物園</td>
          <td><span class="tag tag-nature">自然</span></td>
        </tr>
        <tr>
          <td>夕方〜夜</td>
          <td>白浜から和歌山市へ移動（約1時間）</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
      </table>
      <div class="tip-box">
        🐼 <strong>アドベンチャーワールドのポイント</strong>　開園直後がパンダ観察のベストタイム。混雑を避けて早めに入園を。サファリや海洋ショーも見どころ。
      </div>
      <div class="hotel-box">
        🏨 <strong>ドーミーインPREMIUM和歌山</strong>（和歌山市美園町3-36）<br>
        大浴場・サウナ完備。翌朝の東京への帰路に便利な立地。
      </div>
    </div>
  </div>

  <!-- 7日目 -->
  <div class="day-card">
    <div class="day-header">
      <div class="day-num">7</div>
      <div class="day-title">
        <h2>和歌山 → 東京（帰宅）</h2>
        <p>5月5日（火）</p>
      </div>
    </div>
    <div class="day-body">
      <a href="https://www.google.com/maps/dir/ドーミーインPREMIUM和歌山/東京駅" target="_blank" class="map-btn">🗺️ Google マップで開く</a>
      <table class="schedule-table">
        <tr><th>時間</th><th>内容</th><th>タグ</th></tr>
        <tr>
          <td>早朝（7時前）</td>
          <td>和歌山出発 → 阪和道・新名神・東名経由で東京へ（約6時間）</td>
          <td><span class="tag tag-move">移動</span></td>
        </tr>
        <tr>
          <td>午後</td>
          <td>東京着、帰宅 🏠</td>
          <td></td>
        </tr>
      </table>
      <div class="tip-box">
        ⚠️ <strong>GW最終日の渋滞対策</strong>　5/5は東名・名神が激混み。朝7時前に出発すれば渋滞ピーク前に静岡〜名古屋を通過できる。到着目安は午後1〜2時頃。
      </div>
    </div>
  </div>

  <!-- ホテルまとめ -->
  <div class="summary-card">
    <h2>🏨 宿泊ホテル一覧</h2>
    <table class="schedule-table">
      <tr>
        <th>日</th><th>日付</th><th>ホテル</th><th>住所</th>
      </tr>
      <tr>
        <td>1日目</td>
        <td>4/29（水）</td>
        <td>ホテルサンルート徳島</td>
        <td>徳島市元町1-5-1</td>
      </tr>
      <tr>
        <td>2日目</td>
        <td>4/30（木）</td>
        <td>ドーミーイン高知</td>
        <td>高知市帯屋町1-9-12</td>
      </tr>
      <tr>
        <td>3日目</td>
        <td>5/1（金）</td>
        <td>ドーミーイン松山</td>
        <td>松山市大街道2-6-5</td>
      </tr>
      <tr>
        <td>4日目</td>
        <td>5/2（土）</td>
        <td>喜助の宿 松山駅前店</td>
        <td>松山市宮田町9-41</td>
      </tr>
      <tr>
        <td>5日目</td>
        <td>5/3（日）</td>
        <td>ビジネスホテル プリンス</td>
        <td>香川県高松市木太町2505-2</td>
      </tr>
      <tr>
        <td>6日目</td>
        <td>5/4（月）</td>
        <td>ドーミーインPREMIUM和歌山</td>
        <td>和歌山市美園町3-36</td>
      </tr>
    </table>
  </div>

</div>

<footer>
  GW 四国・紀伊半島周遊プラン 2026　— 7日間 一人旅
</footer>

</body>
</html>