PageSourceSearch

https://yoitoki.jp/renai/genz-colorful-love.html

html yoitoki.jp collected 2026-10-04 20:02:11 UTC 33,043 bytes, 802 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="icon" href="https://yoitoki.jp/logo/48.ico" sizes="any" />
7  <link rel="shortcut icon" href="https://yoitoki.jp/logo/48.ico" />
8
9  <!-- SEO: Update per article -->
10  <title>髪色が変わっても、好きな気持ちは変わらない。Z世代の恋 | Yoitoki</title>
11    <link rel="alternate" hreflang="ja" href="https://yoitoki.jp/renai/genz-colorful-love.html">
12    <link rel="alternate" hreflang="x-default" href="https://yoitoki.jp/renai/genz-colorful-love.html">
13  <meta name="description" content="量産型のアプリが合わなかったZ世代の二人が、自分らしくいられるヨイトキで出会いました。ブロンドの髪色も好きなものへの情熱も隠さず表現できるのは、見た目ではなく中身を見てくれる相手だから。東京都で交際中の実話です。">
14  <meta name="keywords" content="恋愛ストーリー, マッチングアプリ, 恋愛ストーリー, ヨイトキ">
15  <link rel="canonical" href="https://yoitoki.jp/renai/genz-colorful-love.html">
16
17  <!-- OG Tags -->
18  <meta property="og:type" content="article">
19  <meta property="og:title" content="髪色が変わっても、好きな気持ちは変わらない。Z世代の恋 | Yoitoki">
20  <meta property="og:description" content="量産型のアプリが合わなかったZ世代の二人が、自分らしくいられるヨイトキで出会いました。ブロンドの髪色も好きなものへの情熱も隠さず表現できるのは、見た目ではなく中身を見てくれる相手だから。東京都で交際中の実話です。">
21  <meta property="og:url" content="https://yoitoki.jp/renai/genz-colorful-love.html">
22  <meta property="og:image" content="https://image.yoitoki.jp/fe-static/story/genz-colorful-love-open.jpg">
23  <meta property="og:site_name" content="Yoitoki">
24  <meta property="og:locale" content="ja_JP">
25
26  <!-- Twitter Card -->
27  <meta name="twitter:card" content="summary_large_image">
28  <meta name="twitter:title" content="髪色が変わっても、好きな気持ちは変わらない。Z世代の恋 | Yoitoki">
29  <meta name="twitter:description" content="量産型のアプリが合わなかったZ世代の二人が、自分らしくいられるヨイトキで出会いました。ブロンドの髪色も好きなものへの情熱も隠さず表現できるのは、見た目ではなく中身を見てくれる相手だから。東京都で交際中の実話です。">
30  <meta name="twitter:image" content="https://image.yoitoki.jp/fe-static/story/genz-colorful-love-open.jpg">
31
32  <!-- JSON-LD Structured Data -->
33  
33<script type="application/ld+json">
34  {
35    "@context": "https://schema.org",
36    "@type": "Article",
37    "headline": "髪色が変わっても、好きな気持ちは変わらない。Z世代の私たちらしい恋のカタチ",
38    "description": "量産型のアプリが合わなかったZ世代の二人が、自分らしくいられるヨイトキで出会いました。ブロンドの髪色も好きなものへの情熱も隠さず表現できるのは、見た目ではなく中身を見てくれる相手だから。東京都で交際中の実話です。",
39    "image": "https://image.yoitoki.jp/fe-static/story/genz-colorful-love-open.jpg",
40    "url": "https://yoitoki.jp/renai/genz-colorful-love.html",
41    "datePublished": "2026-05-25",
42    "dateModified": "2026-05-25",
43    "publisher": {
44      "@type": "Organization",
45      "name": "OLA PARTY JAPAN CO., LTD.",
46      "url": "https://yoitoki.jp"
47    },
48    "mainEntityOfPage": {
49      "@type": "WebPage",
50      "@id": "https://yoitoki.jp/renai/genz-colorful-love.html"
51    }
52  }
53  </script>
53
54
55  <!-- Fonts -->
56  <link rel="preconnect" href="https://fonts.googleapis.com">
57  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
58  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap" rel="stylesheet">
59
60  <style>
61    /* ==========================================================================
62       Yoitoki STORIES — CSS CUSTOM PROPERTIES
63       ========================================================================== */
64    :root {
65      --yt-primary: hsl(358, 80%, 58%);
66      --yt-primary-hover: hsl(358, 80%, 48%);
67      --yt-primary-light: hsl(358, 80%, 96%);
68      --yt-female: #D94F4F;
69      --yt-female-bg: #FFF0EE;
70      --yt-male: #4A6FA5;
71      --yt-male-bg: #EEF2F8;
72      --yt-text-primary: #222;
73      --yt-text-secondary: #555;
74      --yt-text-tertiary: #888;
75      --yt-text-light: #aaa;
76      --yt-bg-white: #fff;
77      --yt-bg-warm: #FAF8F5;
78      --yt-bg-card: #F8F7F4;
79      --yt-border: #eee;
80      --yt-content-max: 1080px;
81      --yt-article-max: 720px;
82      --yt-content-padding: 40px;
83      --yt-section-gap: 60px;
84      --yt-radius-sm: 6px;
85      --yt-radius-md: 10px;
86      --yt-radius-lg: 14px;
87      --yt-font: system-ui, 'Noto Sans JP', sans-serif;
88    }
89
90    /* ==========================================================================
91       RESET & BASE
92       ========================================================================== */
93    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
94
95    body {
96      font-family: var(--yt-font);
97      color: var(--yt-text-primary);
98      background: var(--yt-bg-white);
99      -webkit-font-smoothing: antialiased;
100      -moz-osx-font-smoothing: grayscale;
101      line-height: 1.6;
102    }
103
104    a { text-decoration: none; color: inherit; }
105    img { display: block; max-width: 100%; }
106
107    /* ==========================================================================
108       ARTICLE HERO — Banner Image + Title + Demographics
109       ========================================================================== */
110    .article-hero {
111      max-width: var(--yt-article-max);
112      margin: 0 auto;
113      padding: 32px var(--yt-content-padding) 0;
114    }
115
116    .article-hero__image {
117      width: 100%;
118      aspect-ratio: 16 / 9;
119      border-radius: var(--yt-radius-lg);
120      overflow: hidden;
121      position: relative;
122      background: var(--yt-bg-card);
123    }
124
125    .article-hero__image img {
126      width: 100%;
127      height: 100%;
128      object-fit: cover;
129    }
130
131    /* Placeholder for hero image */
132    .article-hero__image-placeholder {
133      width: 100%;
134      height: 100%;
135      background: linear-gradient(135deg, #E0D6CC 0%, #C8B8A4 50%, #A89880 100%);
136      display: flex;
137      align-items: center;
138      justify-content: center;
139      flex-direction: column;
140      gap: 10px;
141      color: #B8A898;
142      font-size: 13px;
143    }
144
145    .article-hero__image-placeholder img {
146      width: 100%;
147      height: 100%;
148      object-fit: cover;
149    }
150
151    /* Demographics overlay on image */
152    .article-hero__demographics-overlay {
153      position: absolute;
154      bottom: 14px;
155      left: 16px;
156      background: rgba(0, 0, 0, 0.55);
157      color: #fff;
158      padding: 5px 14px;
159      border-radius: 4px;
160      font-size: 13px;
161      font-weight: 500;
162      backdrop-filter: blur(4px);
163      -webkit-backdrop-filter: blur(4px);
164    }
165
166    .article-hero__title {
167      margin-top: 28px;
168      font-size: 26px;
169      font-weight: 900;
170      line-height: 1.5;
171      color: var(--yt-text-primary);
172      letter-spacing: 0.01em;
173    }
174
175    .article-hero__demographics {
176      margin-top: 10px;
177      font-size: 14px;
178      color: var(--yt-text-tertiary);
179      font-weight: 400;
180      padding-bottom: 36px;
181    }
182
183    /* ==========================================================================
184       COUPLE PROFILE CARDS
185       ========================================================================== */
186    .article-content {
187      max-width: var(--yt-article-max);
188      margin: 0 auto;
189      padding: 0 var(--yt-content-padding);
190    }
191
192    .profile-cards {
193      display: flex;
194      gap: 0;
195      margin-bottom: 48px;
196      background: linear-gradient(135deg, #FFF8F5 0%, #FFF2EE 100%);
197      border-radius: var(--yt-radius-lg);
198      overflow: hidden;
199    }
200
201    .profile-card {
202      flex: 1;
203      padding: 28px 24px;
204    }
205
206    .profile-cards__divider {
207      width: 1px;
208      background: #F0D8D2;
209      margin: 20px 0;
210      flex-shrink: 0;
211    }
212
213    .profile-card__header {
214      display: flex;
215      align-items: center;
216      gap: 12px;
217      margin-bottom: 20px;
218    }
219
220    .profile-card__avatar {
221      width: 52px;
222      height: 52px;
223      border-radius: 50%;
224      display: flex;
225      align-items: center;
226      justify-content: center;
227      flex-shrink: 0;
228    }
229
230    .profile-card__avatar--female { background: #E0E0E0; }
231    .profile-card__avatar--male { background: #E0E0E0; }
232
233    .profile-card__avatar svg {
234      width: 28px;
235      height: 28px;
236    }
237
238    .profile-card__name {
239      font-size: 20px;
240      font-weight: 700;
241    }
242
243    .profile-card__name--female { color: var(--yt-female); }
244    .profile-card__name--male { color: var(--yt-male); }
245
246    .profile-card__name-suffix {
247      font-size: 14px;
248      font-weight: 400;
249      color: inherit;
250      margin-left: 4px;
251    }
252
253    .profile-card__details {
254      display: flex;
255      flex-direction: column;
256      gap: 2px;
257    }
258
259    .profile-card__detail {
260      font-size: 15px;
261      line-height: 2;
262      color: var(--yt-text-primary);
263    }
264
265    .profile-card__detail-label {
266      font-weight: 700;
267    }
268
269    /* ==========================================================================
270       Q&A SECTIONS
271       ========================================================================== */
272    .qa-section {
273      margin-bottom: 44px;
274    }
275
276    .qa-section__question {
277      font-size: 20px;
278      font-weight: 700;
279      color: var(--yt-text-primary);
280      margin-bottom: 20px;
281      line-height: 1.6;
282    }
283
284    .qa-section__question::before {
285      content: 'Q. ';
286    }
287
288    .qa-section__answer {
289      margin-bottom: 20px;
290    }
291
292    .qa-section__answer-name {
293      font-size: 15px;
294      font-weight: 700;
295      margin-bottom: 4px;
296    }
297
298    .qa-section__answer-name--female { color: var(--yt-female); }
299    .qa-section__answer-name--male { color: var(--yt-male); }
300
301    .qa-section__answer-text {
302      font-size: 15px;
303      line-height: 1.9;
304      color: var(--yt-text-secondary);
305    }
306
307    /* ==========================================================================
308       CLOSING IMAGE
309       ========================================================================== */
310    .article-closing-image {
311      width: 70%;
312      margin: 48px auto;
313      border-radius: var(--yt-radius-lg);
314      overflow: hidden;
315    }
316
317    .article-closing-image img {
318      width: 100%;
319      height: auto;
320      display: block;
321    }
322
323    .article-closing-image__placeholder {
324      width: 100%;
325      min-height: 200px;
326      background: linear-gradient(135deg, #D4C8B8 0%, #B8A898 60%, #A09080 100%);
327      display: flex;
328      align-items: center;
329      justify-content: center;
330      flex-direction: column;
331      gap: 8px;
332      color: #B8A898;
333      font-size: 12px;
334    }
335
336    .article-closing-image__placeholder img {
337      width: 100%;
338      height: 100%;
339      object-fit: cover;
340    }
341
342    /* ==========================================================================
343       EDITORIAL CLOSING
344       ========================================================================== */
345    .editorial-closing {
346      background: linear-gradient(135deg, #FFF8F5 0%, #FFF2EE 100%);
347      border-radius: var(--yt-radius-lg);
348      padding: 32px;
349      margin: 40px 0 var(--yt-section-gap);
350    }
351
352    .editorial-closing__text {
353      font-size: 15px;
354      line-height: 1.9;
355      color: var(--yt-text-secondary);
356      margin-bottom: 16px;
357    }
358
359    .editorial-closing__signature {
360      text-align: right;
361      font-size: 14px;
362      font-weight: 700;
363      color: var(--yt-text-primary);
364    }
365
366    /* ==========================================================================
367       RELATED STORIES
368       ========================================================================== */
369    .related-stories {
370      max-width: var(--yt-content-max);
371      margin: 0 auto;
372      padding: 0 var(--yt-content-padding) var(--yt-section-gap);
373      border-top: 1px solid var(--yt-border);
374    }
375
376    .related-stories__title {
377      font-size: 22px;
378      font-weight: 900;
379      color: var(--yt-text-primary);
380      padding-top: 48px;
381      margin-bottom: 32px;
382    }
383
384    .related-stories__grid {
385      display: grid;
386      grid-template-columns: repeat(3, 1fr);
387      gap: 28px 24px;
388    }
389
390    /* Reuse .story-card styles from landing page */
391    .related-card {
392      display: block;
393      transition: transform 0.2s ease, box-shadow 0.2s ease;
394      border-radius: var(--yt-radius-md);
395    }
396
397    .related-card:hover {
398      transform: translateY(-3px);
399      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
400    }
401
402    .related-card__image {
403      width: 100%;
404      aspect-ratio: 4 / 3;
405      border-radius: var(--yt-radius-md);
406      overflow: hidden;
407      background: var(--yt-bg-card);
408    }
409
410    .related-card__image-placeholder {
411      width: 100%;
412      height: 100%;
413      background: linear-gradient(135deg, #E8DDD2 0%, #D4C4B0 100%);
414      display: flex;
415      align-items: center;
416      justify-content: center;
417      flex-direction: column;
418      gap: 6px;
419      color: #B8A898;
420      font-size: 11px;
421    }
422
423    .related-card__image-placeholder img {
424      width: 100%;
425      height: 100%;
426      object-fit: cover;
427    }
428
429    .related-card__body {
430      padding: 12px 2px;
431    }
432
433    .related-card__title {
434      font-size: 14px;
435      font-weight: 700;
436      line-height: 1.6;
437      color: var(--yt-text-primary);
438      margin-bottom: 4px;
439      display: -webkit-box;
440      -webkit-line-clamp: 3;
441      -webkit-box-orient: vertical;
442      overflow: hidden;
443    }
444
445    .related-card__tag {
446      font-size: 12px;
447      color: var(--yt-text-tertiary);
448    }
449
450    /* ==========================================================================
451       RESPONSIVE
452       ========================================================================== */
453    @media (max-width: 768px) {
454      :root {
455        --yt-content-padding: 20px;
456        --yt-section-gap: 40px;
457      }
458
459      .article-hero {
460        padding-top: 20px;
461      }
462
463      .article-hero__title {
464        font-size: 21px;
465        margin-top: 20px;
466      }
467
468      .article-hero__demographics {
469        padding-bottom: 24px;
470      }
471
472      /* Profile cards: always side-by-side, even on mobile (per PRD) */
473      .profile-cards {
474        gap: 10px;
475        margin-bottom: 36px;
476      }
477
478      .profile-card {
479        padding: 16px;
480      }
481
482      .profile-card__avatar {
483        width: 40px;
484        height: 40px;
485      }
486
487      .profile-card__avatar svg {
488        width: 22px;
489        height: 22px;
490      }
491
492      .profile-card__name {
493        font-size: 17px;
494      }
495
496      .profile-card__detail {
497        font-size: 13px;
498      }
499
500      .qa-section__question {
501        font-size: 18px;
502      }
503
504      .qa-section__answer-text {
505        font-size: 14px;
506      }
507
508      .article-closing-image {
509        width: 90%;
510      }
511
512      /* Related stories: 2 columns × 3 rows on mobile */
513      .related-stories__grid {
514        grid-template-columns: repeat(2, 1fr);
515        gap: 20px 14px;
516      }
517
518      .related-stories__title {
519        font-size: 19px;
520        padding-top: 36px;
521        margin-bottom: 24px;
522      }
523    }
524  </style>
525</head>
526<body>
527
528  <!--
529    ============================================================================
530    Yoitoki SUCCESS STORIES — ARTICLE PAGE TEMPLATE
531    ============================================================================
532    Engineer notes:
533    - This template renders the content area ONLY (no header/footer).
534    - Embed within the existing Yoitoki site layout.
535    - Replace all [PLACEHOLDER] markers with actual content from the Dify workflow.
536    - The 7 Q&A questions are the standard set but may vary per story.
537    - Female profile card is ALWAYS on the LEFT, male on the RIGHT.
538    - Profile cards MUST remain side-by-side even on mobile (not stacked).
539    - Related stories grid: 3×2 on desktop, 2×3 on mobile.
540    ============================================================================
541  -->
542
543  <!-- ============================== ARTICLE HERO ============================== -->
544  <article>
545    <div class="article-hero">
546      <div class="article-hero__image">
547        <!-- Replace placeholder with: <img src="..." alt="..." loading="eager"> -->
548        <div class="article-hero__image-placeholder" role="img" aria-label="記事ヒーロー画像">
549          <img src="https://image.yoitoki.jp/fe-static/story/genz-colorful-love-open.jpg" alt="髪色が変わっても、好きな気持ちは変わらない。Z世代の私たちらしい恋のカタチ">
550        </div>
551        <span class="article-hero__demographics-overlay">20代男性・20代女性 東京都・交際</span>
552      </div>
553
554      <h1 class="article-hero__title">髪色が変わっても、好きな気持ちは変わらない。Z世代の私たちらしい恋のカタチ</h1>
555      <p class="article-hero__demographics">20代男性・20代女性 東京都・交際</p>
556    </div>
557
558    <!-- ============================== ARTICLE CONTENT ============================== -->
559    <div class="article-content">
560
561      <!-- ===== COUPLE PROFILE CARDS (single card, divider between) ===== -->
562      <div class="profile-cards">
563        <!-- Female — LEFT -->
564        <div class="profile-card">
565          <div class="profile-card__header">
566            <div class="profile-card__avatar profile-card__avatar--female">
567              <img src="https://image.yoitoki.jp/fe-static/story/female_icon.png" alt="ヒカリさん(女性)のアイコン">
568            </div>
569            <div class="profile-card__name profile-card__name--female">
570              ヒカリ<span class="profile-card__name-suffix">さん</span>
571            </div>
572          </div>
573          <div class="profile-card__details">
574            <div class="profile-card__detail"><span class="profile-card__detail-label">年齢:</span>20代</div>
575            <div class="profile-card__detail"><span class="profile-card__detail-label">出身:</span>東京都</div>
576            <div class="profile-card__detail"><span class="profile-card__detail-label">趣味:</span>SNS、カフェ巡り</div>
577          </div>
578        </div>
579
580        <div class="profile-cards__divider"></div>
581
582        <!-- Male — RIGHT -->
583        <div class="profile-card">
584          <div class="profile-card__header">
585            <div class="profile-card__avatar profile-card__avatar--male">
586              <img src="https://image.yoitoki.jp/fe-static/story/male_icon.png" alt="ルイさん(男性)のアイコン">
587            </div>
588            <div class="profile-card__name profile-card__name--male">
589              ルイ<span class="profile-card__name-suffix">さん</span>
590            </div>
591          </div>
592          <div class="profile-card__details">
593            <div class="profile-card__detail"><span class="profile-card__detail-label">年齢:</span>20代</div>
594            <div class="profile-card__detail"><span class="profile-card__detail-label">出身:</span>東京都</div>
595            <div class="profile-card__detail"><span class="profile-card__detail-label">趣味:</span>ストリートファッション、音楽</div>
596          </div>
597        </div>
598      </div>
599
600      <!-- ===== Q&A SECTION 1 ===== -->
601      <div class="qa-section">
602        <h2 class="qa-section__question">ヨイトキを始めたきっかけは?</h2>
603        <div class="qa-section__answer">
604          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
605          <p class="qa-section__answer-text">インスタでヨイトキの広告を見て、「これ、なんか私に合いそう」って直感的に思いました。他のアプリは量産型っぽくて合わなかったけど、ヨイトキは自分らしくいられそうな雰囲気がありました。</p>
606        </div>
607        <div class="qa-section__answer">
608          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
609          <p class="qa-section__answer-text">友達がヨイトキで素敵な人と出会ったのを見て、ちょっと羨ましくなったのがきっかけです。見た目で判断されずに中身を見てもらえるアプリだと聞いて、それなら自分にも合うかもと思いました。</p>
610        </div>
611      </div>
612
613      <!-- ===== Q&A SECTION 2 ===== -->
614      <div class="qa-section">
615        <h2 class="qa-section__question">お相手の第一印象は?</h2>
616        <div class="qa-section__answer">
617          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
618          <p class="qa-section__answer-text">プロフィールの写真がすごくおしゃれで、髪色もブロンドで目を引きました。でも一番惹かれたのã
618¯ã€å¥½ããªã‚‚のへの情熱が伝わってくる自己紹介文でした。</p>
619        </div>
620        <div class="qa-section__answer">
621          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
622          <p class="qa-section__answer-text">ヒカリさんのプロフィール写真、髪がブロンドでめちゃくちゃ可愛かった。でもそれだけじゃなくて、カフェの感想を丁寧に書いてるところに「この人、ちゃんとしてるな」と思いました。</p>
623        </div>
624      </div>
625
626      <!-- ===== Q&A SECTION 3 ===== -->
627      <div class="qa-section">
628        <h2 class="qa-section__question">会いたいと思ったきっかけは?</h2>
629        <div class="qa-section__answer">
630          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
631          <p class="qa-section__answer-text">お互いの推しの話で盛り上がって、「今度一緒にポップアップ行かない?」って自然な流れになりました。趣味が近いと誘いやすいのがいいですよね。</p>
632        </div>
633        <div class="qa-section__answer">
634          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
635          <p class="qa-section__answer-text">メッセージのテンポがすごく合って、「この人とは直接会っても絶対楽しい」と確信しました。髪色の話で盛り上がったのも面白かったです。</p>
636        </div>
637      </div>
638
639      <!-- ===== Q&A SECTION 4 ===== -->
640      <div class="qa-section">
641        <h2 class="qa-section__question">実際に会ったときの印象は?</h2>
642        <div class="qa-section__answer">
643          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
644          <p class="qa-section__answer-text">原宿で待ち合わせたんですけど、写真よりもさらにおしゃれで驚きました。でも話してみるとすごく気さくで、見た目とのギャップにキュンとしました。</p>
645        </div>
646        <div class="qa-section__answer">
647          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
648          <p class="qa-section__answer-text">待ち合わせ場所にいたヒカリさん、オーラがすごかった。でも話すとめちゃくちゃ自然体で、「あ、この人と一緒にいたい」ってすぐ思いました。</p>
649        </div>
650      </div>
651
652      <!-- ===== Q&A SECTION 5 ===== -->
653      <div class="qa-section">
654        <h2 class="qa-section__question">付き合おうと思った決め手は?</h2>
655        <div class="qa-section__answer">
656          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
657          <p class="qa-section__answer-text">私が髪色を変えたとき、「どの色のヒカリも好きだよ」って言ってくれたんです。見た目じゃなくて、ちゃんと中身を見てくれている安心感が決め手でした。</p>
658        </div>
659        <div class="qa-section__answer">
660          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
661          <p class="qa-section__answer-text">僕がファッションのことで落ち込んでいたとき、「ルイくんのスタイルが好き」って真っ直ぐ言ってくれたこと。自分を認めてくれる存在がこんなに心強いとは思わなかったです。</p>
662        </div>
663      </div>
664
665      <!-- ===== Q&A SECTION 6 ===== -->
666      <div class="qa-section">
667        <h2 class="qa-section__question">思い出に残っているデートは?</h2>
668        <div class="qa-section__answer">
669          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
670          <p class="qa-section__answer-text">下北沢の古着屋を一日中回ったデートです。お互いに似合う服を選び合って、試着室の前で笑い転げた時間が最高でした。</p>
671        </div>
672        <div class="qa-section__answer">
673          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
674          <p class="qa-section__answer-text">二人で初めてマッチングした日のカフェに戻ったデートです。あの日と同じ席に座って、「あの頃はまさかこうなるとは」って笑い合ったã
674®ãŒå¿˜ã‚Œã‚‰ã‚Œã¾ã›ã‚“。</p>
675        </div>
676      </div>
677
678      <!-- ===== Q&A SECTION 7 ===== -->
679      <div class="qa-section">
680        <h2 class="qa-section__question">ヨイトキを使ってよかったと思うことは?</h2>
681        <div class="qa-section__answer">
682          <p class="qa-section__answer-name qa-section__answer-name--female">ヒカリ</p>
683          <p class="qa-section__answer-text">自分らしさを大切にしながら出会えるところが良かったです。無理に自分を変えなくても、ありのままの私を好きになってくれる人に出会えました。</p>
684        </div>
685        <div class="qa-section__answer">
686          <p class="qa-section__answer-name qa-section__answer-name--male">ルイ</p>
687          <p class="qa-section__answer-text">見た目だけじゃなく、価値観や趣味でつながれるのがヨイトキの良さだと思います。ヒカリと出会えて、毎日がカラフルになりました。</p>
688        </div>
689      </div>
690
691      <!-- ===== CLOSING IMAGE ===== -->
692      <div class="article-closing-image">
693        <!-- Replace with: <img src="..." alt="..." loading="lazy"> -->
694        <div class="article-closing-image__placeholder" role="img" aria-label="クロージング画像">
695          <img src="https://image.yoitoki.jp/fe-static/story/genz-colorful-love-close.jpg" alt="髪色が変わっても、好きな気持ちは変わらない。Z世代の私たちらしい恋のカタチ:エピソードの一枚">
696        </div>
697      </div>
698
699      <!-- ===== EDITORIAL CLOSING ===== -->
700      <div class="editorial-closing">
701        <p class="editorial-closing__text">自分らしさを大切にするZ世代のヒカリさんとルイさん。髪色のように変化を楽しみながらも、お互いへの想いは変わらない——そんな新しい恋のカタチが素敵です。これからもお二人らしく、カラフルな日々を歩んでください。</p>
702        <p class="editorial-closing__signature">Yoitoki チーム一同</p>
703      </div>
704
705    </div>
706  </article>
707
708  <!-- ============================== RELATED STORIES ============================== -->
709  <section class="related-stories" aria-label="関連ストーリー">
710    <h2 class="related-stories__title">こんなストーリーも読まれています</h2>
711    <div class="related-stories__grid">
712
713      <!-- Related Card 1 -->
714      <a href="shared-love-of-cycling.html" class="related-card">
715        <div class="related-card__image">
716          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
717            <img src="https://image.yoitoki.jp/fe-static/story/shared-love-of-cycling-open.jpg" alt="週末の自転車が関係を縮めてくれました。趣味が同じだと、こんなに自然に恋が始まるんですね">
718          </div>
719        </div>
720        <div class="related-card__body">
721          <h3 class="related-card__title">週末の自転車が関係を縮めてくれました。趣味が同じだと、こんなに自然に恋が始まるんですね</h3>
722          <p class="related-card__tag">20代男性・20代女性 東京都・交際</p>
723        </div>
724      </a>
725
726      <!-- Related Card 2 -->
727      <a href="gaming-connection.html" class="related-card">
728        <div class="related-card__image">
729          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
730            <img src="https://image.yoitoki.jp/fe-static/story/gaming-connection-open.jpg" alt="ゲームの世界で出会って、リアルの恋に発展しました">
731          </div>
732        </div>
733        <div class="related-card__body">
734          <h3 class="related-card__title">ゲームの世界で出会って、リアルの恋に発展しました</h3>
735          <p class="related-card__tag">20代男性・20代女性 千葉県・交際</p>
736        </div>
737      </a>
738
739      <!-- Related Card 3 -->
740      <a href="melody-of-love.html" class="related-card">
741        <div class="related-card__image">
742          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
743            <img src="https://image.yoitoki.jp/fe-static/story/melody-of-love-open.jpg" alt="同じ音楽で鳥
743肌が立つ人に初めて出会いました">
744          </div>
745        </div>
746        <div class="related-card__body">
747          <h3 class="related-card__title">同じ音楽で鳥肌が立つ人に初めて出会いました</h3>
748          <p class="related-card__tag">20代男性・20代女性 千葉県・交際</p>
749        </div>
750      </a>
751
752      <!-- Related Card 4 -->
753      <a href="traveling-hearts.html" class="related-card">
754        <div class="related-card__image">
755          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
756            <img src="https://image.yoitoki.jp/fe-static/story/traveling-hearts-open.jpg" alt="一緒に旅すると、その人のすべてがわかる気がします">
757          </div>
758        </div>
759        <div class="related-card__body">
760          <h3 class="related-card__title">一緒に旅すると、その人のすべてがわかる気がします</h3>
761          <p class="related-card__tag">30代男性・20代女性 京都府・交際</p>
762        </div>
763      </a>
764
765      <!-- Related Card 5 -->
766      <a href="cafe-first-impression.html" class="related-card">
767        <div class="related-card__image">
768          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
769            <img src="https://image.yoitoki.jp/fe-static/story/cafe-first-impression-open.jpg" alt="気づいたらカフェで5時間話していました">
770          </div>
771        </div>
772        <div class="related-card__body">
773          <h3 class="related-card__title">気づいたらカフェで5時間話していました</h3>
774          <p class="related-card__tag">20代男性・20代女性 福岡県・結婚</p>
775        </div>
776      </a>
777
778      <!-- Related Card 6 -->
779      <a href="introvert-meets-extrovert.html" class="related-card">
780        <div class="related-card__image">
781          <div class="related-card__image-placeholder" role="img" aria-label="関連記事サムネイル">
782            <img src="https://image.yoitoki.jp/fe-static/story/introvert-meets-extrovert-open.jpg" alt="正反対の性格なのに、一緒にいると不思議と落ち着くんです">
783          </div>
784        </div>
785        <div class="related-card__body">
786          <h3 class="related-card__title">正反対の性格なのに、一緒にいると不思議と落ち着くんです</h3>
787          <p class="related-card__tag">20代男性・20代女性 福岡県・交際</p>
788        </div>
789      </a>
790
791    </div>
792  </section>
793
794  <!-- ============================== END CONTENT ============================== -->
795  <!--
796    Engineer: Insert standard Yoitoki footer + CTA section below this point.
797    See PRD Section 7, Item 7: "Standard Yoitoki Footer + CTA"
798  -->
799
800<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"c86321c091c4472e85930705dd973a98","spa":2}' crossorigin="anonymous"></script>
800
801</body>
802</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.