PageSourceSearch

https://melab365.vercel.app/index.html

html melab365.vercel.app collected 2026-10-03 07:17:59 UTC 34,201 bytes, 292 lines download raw bytes

1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5<meta charset="utf-8"/>
6<meta content="width=device-width,initial-scale=1" name="viewport"/>
7<meta content="index,follow,max-image-preview:large" name="robots"/>
8<meta content="中高生が、こころ・体・生活・デジタルに関する公的な情報を確かめ、自分で考え、方法や相談先を探せる保健情報サイトです。先生・保護者・医療者向けのSupportersページも用意しています。" name="description"/>
9<title>キミのミライ・ラボ|自分を大切にする保健室</title>
10<link href="https://melab365.vercel.app/" rel="canonical"/>
11<meta content="キミのミライ・ラボ|自分を大切にする保健室" property="og:title"/>
12<meta content="中高生が、こころ・体・生活・デジタルに関する公的な情報を確かめ、自分で考え、方法や相談先を探せる保健情報サイトです。" property="og:description"/>
13<meta content="https://melab365.vercel.app/" property="og:url"/>
14<meta content="website" property="og:type"/>
15<meta content="キミのミライ・ラボ" property="og:site_name"/>
16<meta content="ja_JP" property="og:locale"/>
17<meta content="summary" name="twitter:card"/>
18<script type="application/ld+json">
19{
20  "@context": "https://schema.org",
21  "@graph": [
22    {
23      "@type": "WebSite",
24      "@id": "https://melab365.vercel.app/#website",
25      "url": "https://melab365.vercel.app/",
26      "name": "キミのミライ・ラボ",
27      "alternateName": ["MeLab365", "ミライラボ"],
28      "inLanguage": "ja"
29    },
30    {
31      "@type": "Organization",
32      "@id": "https://melab365.vercel.app/#organization",
33      "name": "MeLab365",
34      "url": "https://melab365.vercel.app/",
35      "sameAs": [
36        "https://www.instagram.com/melab.365/",
37        "https://www.tiktok.com/@melab365",
38        "https://www.threads.com/@melab.365"
39      ]
40    }
41  ]
42}
43</script>
43
44<style>
45    :root{--ink:#344843;--deep:#285c55;--mint:#95dec9;--mint-light:#e9f8f3;--peach:#ffdaca;--coral:#f47f62;--cream:#fff9f1;--white:#fff;--line:#dbe9e4;--shadow:0 18px 48px rgba(51,91,83,.12)}
46    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.8}a{color:inherit}.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 max(22px,6vw);background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;color:var(--deep);font-size:17px;font-weight:900;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--mint-light);font-size:22px}.brand em{color:#4eb69e;font-style:normal}.nav{display:flex;gap:22px}.nav a{color:#5a6e69;font-size:12px;font-weight:800;text-decoration:none}.hero{position:relative;overflow:hidden;min-height:760px;background:linear-gradient(135deg,#9de2cf 0%,#c7f0e4 53%,#ffe1d2 53%,#fff1e7 100%)}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.35)}.hero:before{width:420px;height:420px;left:-180px;top:-180px}.hero:after{width:360px;height:360px;right:-120px;bottom:-180px}.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:60px;width:min(1180px,calc(100% - 44px));min-height:688px;margin:auto;padding:62px 0}.eyebrow{color:var(--deep);font-size:11px;font-weight:900;letter-spacing:.18em}.hero h1{margin:18px 0 20px;color:#374b46;font-size:clamp(42px,5.2vw,72px);line-height:1.2;letter-spacing:-.04em}.hero h1 span{display:block}.hero-copy>p{max-width:620px;margin:0;color:#435b55;font-size:16px;font-weight:650;line-height:2}.cta{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:15px 24px;border-radius:99px;background:var(--coral);color:#fff;font-size:14px;font-weight:900;text-decoration:none;box-shadow:0 12px 26px rgba(194,91,66,.25);transition:.2s}.cta:hover{transform:translateY(-2px)}.hero-image{position:relative;align-self:center;display:flex;justify-content:center}.hero-image img{display:block;width:auto;max-width:100%;height:auto;max-height:720px;object-fit:contain;border-radius:42px;box-shadow:var(--shadow)}.hero-badge{position:absolute;left:-30px;bottom:34px;max-width:230px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);font-size:11px;font-weight:800}.section{width:min(1120px,calc(100% - 40px));margin:auto;padding:100px 0}.section-head{max-width:760px;margin-bottom:42px}.section h2{margin:10px 0 18px;color:var(--deep);font-size:clamp(30px,4vw,48px);line-height:1.35;letter-spacing:-.03em}.section-head p{color:#647772}.message{background:#fff}.message-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:center}.message-note{padding:32px;border-radius:30px;background:var(--mint-light);box-shadow:0 8px 30px rgba(51,91,83,.07)}.message-note strong{display:block;color:var(--deep);font-size:22px}.message-note p{margin-bottom:0;color:#62746f}.themes{background:#f7fbf9}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card{display:flex;flex-direction:column;min-height:350px;padding:32px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 10px 32px rgba(51,91,83,.07);text-decoration:none;transition:.22s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card:nth-child(2){background:#fff8f0}.card:nth-child(3){background:#f1f8ff}.card:nth-child(4){background:#fff3f5}.icon{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:var(--mint-light);font-size:29px}.card small{margin-top:22px;color:var(--coral);font-weight:900;letter-spacing:.12em}.card h3{margin:8px 0;color:var(--deep);font-size:25px;line-height:1.4}.card b{color:#536a64;font-size:14px}.card p{color:#6b7a76;font-size:13px}.card-button{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);color:var(--deep);font-size:13px;font-weight:900}.sos{background:linear-gradient(145deg,#fff,#fff1f3)}.sos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sos-card{padding:23px;border:1px solid #f0dfe2;border-radius:20px;background:#fff}.sos-card h3{margin:6px 0;color:var(--deep);font-size:17px}.sos-card p{color:#6b7774;font-size:12px}.sos-card a{color:#bf5364;font-size:12px;font-weight:900}.footer{padding:60px 22px;background:var(--deep);color:#fff;text-align:center}.footer strong{display:block;font-size:clamp(24px,4vw,38px)}.footer p{margin:8px 0 0;color:#cde4de}.footer .social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}.footer .social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 17px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:.2s}.footer .social-links a:hover,.footer .social-links a:focus-visible{background:#fff;color:var(--deep);transform:translateY(-2px)}.footer .creator{margin:24px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;line-height:1.8}.footer .creator b{color:#fff}.mobile-menu{display:none;border:0;background:none;font-size:24px}
47    .card.is-disabled{cursor:default;opacity:.82}.card.is-disabled:hover{transform:none;box-shadow:0 10px 32px rgba(51,91,83,.07)}.editing{display:inline-block;padding:6px 12px;border-radius:99px;background:#dfe8f2;color:#536b82;font-size:11px;font-style:normal;font-weight:900}.card.game-card{background:#f0f3ff}.card.game-card .card-button{background:#586aa0}.card.game-card:hover .card-button{background:#46578c}
48    .card-button{justify-content:center!important;gap:10px;margin-top:auto!important;padding:14px 18px!important;border:0!important;border-radius:999px;background:var(--deep);color:#fff!important;box-shadow:0 9px 20px rgba(40,92,85,.18);font-size:13px!important;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s}.card-button i{font-style:normal;font-size:16px;transition:transform .2s}.card:hover .card-button{transform:translateY(-2px);background:#34776e;box-shadow:0 12px 24px rgba(40,92,85,.24)}.card:hover .card-button i{transform:translateX(4px)}.card:nth-child(2) .card-button{background:#d96f54}.card:nth-child(2):hover .card-button{background:#c95e45}.card:nth-child(3) .card-button{background:#4e7c86}.card:nth-child(3):hover .card-button{background:#3d6872}.card:nth-child(4){background:#f5f3ff}.card:nth-child(4) .card-button{background:#66759b}.card:nth-child(4):hover .card-button{background:#536282}.card:nth-child(5){background:#eff9fb}.card:nth-child(5) .card-button{background:#3f7d85}.card:nth-child(5):hover .card-button{background:#326a72}.card:nth-child(6){background:#fff8e9}.card:nth-child(6) .card-button{background:#9a7042}.card:nth-child(6):hover .card-button{background:#805a31}.card:nth-child(7){background:#fff2ef}.card:nth-child(7) .card-button{background:#b65d60}
48.card:nth-child(7):hover .card-button{background:#9d4d51}.card:nth-child(8){grid-column:1/-1;min-height:280px;background:#fff3f5}.card:nth-child(8) .card-button{background:#bb6070}.card:nth-child(8):hover .card-button{background:#a94f60}
49    /* Top page layout 2026-08 */
50    .hero{min-height:650px}.hero-inner{min-height:578px}.hero-image img{max-height:590px}.section{padding:82px 0}.message-grid{grid-template-columns:.9fr 1.1fr}.theme-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 34px}.theme-guide a{display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--deep);font-size:13px;font-weight:900;text-decoration:none}.theme-guide span{font-size:25px}.theme-guide small{display:block;color:#71827e;font-size:10px;font-weight:700}.card-grid{grid-template-columns:repeat(3,1fr);gap:18px}.card{min-height:335px;padding:27px}.card h3{font-size:22px}.card p{margin-bottom:18px}.card:nth-child(8){grid-column:auto;min-height:335px;background:#fff3f5}.card:nth-child(9){background:#eef1fb}.card:nth-child(9) .card-button{background:#626b9d}.card:nth-child(9):hover .card-button{background:#50598a}.card:nth-child(12){background:#eef8f5}.card:nth-child(12) .card-button{background:#34776e}.card:nth-child(12):hover .card-button{background:#285f58}.card.sos-entry{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;column-gap:22px;align-items:center;min-height:0;padding:28px 32px;background:linear-gradient(135deg,#fff,#fff0f2)}.card.sos-entry .icon{grid-row:1/4}.card.sos-entry small{margin-top:0}.card.sos-entry h3{margin:2px 0}.card.sos-entry b,.card.sos-entry p{grid-column:2}.card.sos-entry p{margin:0}.card.sos-entry .card-button{grid-column:3;grid-row:1/4;min-width:210px}.themes .section-head{margin-bottom:25px}
51    @media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,1fr)}.card.sos-entry{grid-column:1/-1}}
52    @media(max-width:820px){.nav{display:none}.mobile-menu{display:block}.hero{min-height:0}.hero-inner{grid-template-columns:1fr;padding:54px 0 0}.hero-copy{text-align:center}.hero-copy>p{font-size:14px}.hero-image{width:min(520px,100%);margin:auto}.hero-badge{left:12px;bottom:18px}.message-grid,.sos-grid{grid-template-columns:1fr}.section{padding:68px 0}.card{min-height:310px}.hero h1{font-size:clamp(38px,10vw,56px)}.theme-guide{grid-template-columns:1fr}.card.sos-entry{display:flex;min-height:300px;padding:27px}.card.sos-entry .card-button{min-width:0;width:100%}}
53    @media(max-width:620px){.card-grid{grid-template-columns:1fr}.card.sos-entry{grid-column:auto}.hero-badge{position:static;margin:12px auto 22px}.theme-guide a{padding:13px 15px}}
54  
55.supporters-entry{padding:34px 22px 70px;background:#f7faf8}
56.supporters-entry-inner{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 34px;border:1px solid #dce8e1;border-radius:26px;background:#fff}
57.supporters-entry-copy{max-width:720px}
58.supporters-entry h2{margin:6px 0 10px;font-size:clamp(24px,3vw,34px);color:#25322d}
59.supporters-entry p{margin:0;color:#66756e;line-height:1.8}
60.supporters-entry-button{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;background:#2f6f59;color:#fff!important;font-weight:800;text-decoration:none}
61@media(max-width:760px){.supporters-entry{padding:24px 16px 52px}.supporters-entry-inner{display:block;padding:25px 22px}.supporters-entry-button{margin-top:20px}.nav a[href="supporters/"]{display:none}}
62
63/* cropped theme icon artwork */
64.themes .card .icon{
65  width:104px;height:104px;flex:0 0 104px;
66  padding:0;background:transparent!important;border-radius:50%;
67  overflow:hidden;
68}
69.themes .card .icon img{
70  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
71}
72@media(max-width:620px){
73  .themes .card .icon{width:92px;height:92px;flex-basis:92px}
74}
75
76/* Three clearly separated entrances */
77.theme-category{scroll-margin-top:90px;margin-top:30px;padding:30px;border:1px solid var(--category-line);border-radius:34px;background:var(--category-bg)}
78.theme-category+.theme-category{margin-top:32px}
79.category-head{display:flex;align-items:center;gap:18px;margin-bottom:24px}
80.category-head>span{display:grid;place-items:center;flex:0 0 64px;width:64px;
80height:64px;border-radius:21px;background:#fff;font-size:31px;box-shadow:0 8px 24px rgba(51,91,83,.08)}
81.category-head small{display:block;color:var(--category-color);font-size:11px;font-weight:900;letter-spacing:.14em}
82.category-head h3{margin:1px 0 2px;color:var(--deep);font-size:clamp(25px,3vw,34px);line-height:1.35}
83.category-head p{margin:0;color:#60736e;font-size:13px}
84.theme-category .card-grid{grid-template-columns:repeat(3,1fr)}
85.theme-category .card{background:rgba(255,255,255,.92)!important;border-color:var(--category-line)}
86.theme-category .card small{color:var(--category-color)}
87.theme-category .card-button{background:var(--category-color)!important}
88.theme-category--protect{--category-bg:#fff3ed;--category-line:#f4d3c7;--category-color:#bd624d}
89.theme-category--mind{--category-bg:#f1f3ff;--category-line:#d9def2;--category-color:#626b9d}
90.theme-category--life{--category-bg:#edf8f3;--category-line:#cde5da;--category-color:#34776e}
91.category-sos{margin-top:32px}.category-sos .sos-entry{width:100%}
92@media(max-width:1000px){.theme-category .card-grid{grid-template-columns:repeat(2,1fr)}}
93@media(max-width:620px){.theme-category{padding:20px 16px;border-radius:25px}.category-head{align-items:flex-start}.category-head>span{flex-basis:52px;width:52px;height:52px;border-radius:17px;font-size:25px}.theme-category .card-grid{grid-template-columns:1fr}}
94
95
96.category-school-checkup{margin-top:22px}
97.card.school-checkup-entry{
98  width:100%;
99  display:grid;
100  grid-template-columns:auto 1fr auto;
101  grid-template-rows:auto auto auto;
102  column-gap:22px;
103  align-items:center;
104  min-height:0;
105  padding:28px 32px;
106  background:linear-gradient(135deg,#fff,#edf8f3);
107}
108.card.school-checkup-entry .icon{grid-row:1/4}
109.card.school-checkup-entry small{margin-top:0;color:#34776e}
110.card.school-checkup-entry h3{margin:2px 0}
111.card.school-checkup-entry b,.card.school-checkup-entry p{grid-column:2}
112.card.school-checkup-entry p{margin:0}
113.card.school-checkup-entry .card-button{
114  grid-column:3;grid-row:1/4;min-width:210px;background:#34776e!important
115}
116@media(max-width:820px){
117  .card.school-checkup-entry{display:flex;min-height:300px;padding:27px}
118  .card.school-checkup-entry .card-button{min-width:0;width:100%}
119}
120
121/* Simplified SOS links */
122.sos-emergency{
123  margin-top:22px;
124  padding:20px 22px;
125  border:1px solid #f0dfe2;
126  border-radius:20px;
127  background:#fff8f8;
128}
129.sos-emergency h3{margin:0 0 8px;color:var(--deep);font-size:17px}
130.sos-emergency p{margin:6px 0;color:#5f706c;font-size:13px;line-height:1.8}
131.sos-emergency strong{color:#b54d5e;font-size:15px}
132
133</style>
134<link href="shared/guidance.css?v=20260806-1" rel="stylesheet"/>
135
136<style>
137/* 2026-08 mobile hero badge adjustment */
138@media (max-width: 620px){
139  .hero-image{
140    display:flex;
141    flex-direction:column;
142    align-items:stretch;
143    width:100%;
144  }
145  .hero-image img{
146    width:100%;
147    max-width:100%;
148  }
149  .hero-badge{
150    position:static;
151    left:auto;
152    right:auto;
153    bottom:auto;
154    width:100%;
155    max-width:none;
156    margin:14px 0 0;
157    padding:14px 16px;
158    text-align:center;
159    line-height:1.7;
160    font-size:12px;
161    writing-mode:horizontal-tb;
162    transform:none;
163  }
164}
165</style>
166
167
168<style>
169/* 2026-08 SOS 2x2 layout */
170.sos-grid{
171  grid-template-columns:repeat(2,minmax(0,1fr));
172}
173@media(max-width:820px){
174  .sos-grid{
175    grid-template-columns:1fr;
176  }
177}
178</style>
179
180  
180<script src="shared/auto-hide-header.js?v=20260822-1" defer></script>
180
181</head>
182<body>
183<header class="top"><a class="brand" href="index.html"><span class="brand-mark">🌱</span><span>キミの<em>ミライ・ラボ</em></span></a><nav aria-label="メインメニュー" class="nav"><a href="#about">このサイトについて</a><a href="#themes">テーマをえらぶ</a><a href="#sos">相談できる場所</a><a href="supporters/">Supporters</a><a href="contact.html">お問い合わせ</a></nav><button aria-label="テーマへ移動" class="mobile-menu" onclick="location.href='#themes'" type="button">☰</button></header>
184<main>
185<section class="hero">
186<div class="hero-inner">
187<div class="hero-copy"><span class="eyebrow">自分を大切にする保健室</span><h1><span>「自分のココロとカラダ」を</span>大切にしよう。</h1><p>ここは、こころ、SNS、睡眠、歯と口、HPVワクチン、薬やお酒・タバコのことを知り、立ち止まって考えるための保健室。公的な情報を確かめながら、自分に合いそうな方法や、必要なときの相談先を探せます。</p><a class="cta" href="#themes">▼ 気になるテーマをえらぶ</a></div>
188<div class="hero-image"><img alt="スマートフォンを見ながら健康について学ぶ中高生3人のイラスト" src="assets/hero-students.png"/><div class="hero-badge">知ることは、怖がることではなく、<br/>自分で選べるようになること。</div></div>
189</div>
190</section>
191<section class="section message" id="about"><div class="message-grid"><div class="section-head"><span class="eyebrow">WHY IT MATTERS</span><h2>なぜ今、「自分のココロとカラダ」が大切なの?</h2></div><div class="message-note"><strong>知ることは、立ち止まって考える手がかりになります。</strong><p>SNSや学校、人間関係……中高生の毎日には、たくさんの情報やストレスがあります。「なんとなく流されてしまう」「これって本当かな?」と感じたとき、公的な情報をもとに確かめ、比べてみることができます。すぐに答えを決めず、自分ならどう考えるかを探してみてください。</p></div></div></section>
192<section class="themes" id="themes"><div class="section"><div class="section-head"><span class="eyebrow">CHOOSE A DOOR</span><h2>今の自分に近い入口から。</h2><p>順番に学ぶ必要はありません。3つの分類から、知りたいこと、気になること、今困っていることを探せます。</p></div><nav aria-label="テーマの分類" class="theme-guide"><a href="#protect"><span>🛡️</span><b>自分を守る<small>HPV・薬物・性と健康・スポーツ・救急</small></b></a><a href="#mind"><span>💛</span><b>こころと情報<small>気持ち・SNS・生活の工夫・AI</small></b></a><a href="#life"><span>🌿</span><b>体と生活<small>スマホ・ゲーム・口・献血・朝・睡眠・排泄</small></b></a></nav>
193<section aria-labelledby="protectTitle" class="theme-category theme-category--protect" id="protect"><header class="category-head"><span>🛡️</span><div><small>PROTECT YOURSELF</small><h3 id="protectTitle">自分を守る</h3><p>病気の予防、性と健康、薬、スポーツや救急について知り、行動を考えるためのテーマです。</p></div></header><div class="card-grid">
194<a class="card" href="hpv/index.html"><span class="icon"><img alt="" src="assets/theme-icons/hpv.webp"/></span><small>01 HPVワクチン</small><h3>HPVワクチンってどんなもの?</h3><b>将来の自分のカラダを守るための、大切な選択。</b><p>子宮頸がんなどの病気を防ぐHPVワクチンについて、仕組み、副反応、受けるときの流れを親子でわかりやすく学びます。</p><span class="card-button">HPVワクチンのページへ <i>➔</i></span></a>
195<a class="card" href="mamoru/dist/index.html"><span class="icon"><img alt="" src="assets/theme-icons/mamoru.webp"/></span><small>02 薬物乱用防止</small><h3>薬物乱用・タバコ・お酒のホントの話</h3><b>「1回だけなら……」を、情報と場面から考える。</b><p>市販薬を含む薬物乱用、タバコやアルコールの影響を、物語と選択を通して考えます。断る、離れる、話を変える、相談するなど、その場で選べる行動も確認できます。</p><span class="card-button">薬物・タバコ・お酒のページへ <i>➔</i></span></a>
196<a class="card" href="srhr/index.html"><span class="icon"><img alt="" src="assets/theme-icons/srhr.webp"/></span><small>03 SRHR・セルフスタディ</small><h3>
196自分と相手を大切にする</h3><b>自分の体も、心も、未来も。自分で考えて選ぶ。</b><p>思春期の体や心、人との関係、性と健康、将来について、中高生の日常の場面から考える30の学習コンテンツです。</p><span class="card-button">SRHRのページへ <i>➔</i></span></a>
197<a class="card" href="antidoping/index.html"><span class="icon"><img alt="" src="assets/theme-icons/antidoping.webp"/></span><small>12 スポーツと薬・サプリ</small><h3>大会前、この薬飲んで大丈夫?</h3><b>薬を怖がらない。使う前に、確認する。</b><p>かぜ薬、治療中の薬、サプリメント。スポーツをする人が迷いやすい場面から、アンチ・ドーピングの基本を学びます。</p><span class="card-button">スポーツと薬・サプリのページへ <i>➔</i></span></a>
198<a class="card" href="emergency/index.html"><span class="icon"><img alt="" src="assets/theme-icons/emergency.svg"/></span><small>13 救急・応急手当</small><h3>命をつなぐ、救急のこと</h3><b>
198気づく。呼ぶ。できることをする。</b><p>誰かが倒れたときの助けの求め方、119番のかけ方、救急車を待つ間にできることを練習画面から学びます。</p><span class="card-button">救急について学ぶ <i>➔</i></span></a>
199</div></section>
200<section aria-labelledby="mindTitle" class="theme-category theme-category--mind" id="mind"><header class="category-head"><span>💛</span><div><small>MIND &amp; INFORMATION</small><h3 id="mindTitle">こころと情報</h3><p>気持ちに気づき、SNS・情報とつきあいながら、自分に合う生活の工夫を探すためのテーマです。</p></div></header><div class="card-grid">
201<a class="card" href="kokoro/index.html"><span class="icon"><img alt="" src="assets/theme-icons/kokoro.webp"/></span><small>04 こころを知る</small><h3>今の気持ちは、どんな色?</h3><b>自分の気持ちに気付くことも、自分を大切にすること。</b><p>感情、学校生活、SNS、人との関わり、セルフケア、助けの求め方を、30の日常場面から一緒に考えます。</p><span class="card-button">こころを知るページへ <i>➔</i></span></a>
202<a class="card" href="digital/index.html"><span class="icon"><img alt="" src="assets/theme-icons/digital.webp"/></span><small>05 インターネット・SNS</small><h3>情報と上手につきあう</h3><b>立ち止まり、確かめ、自分で選ぶデジタルリテラシー。</b><p>SNS、健康情報、ネットトラブル、生成AIについて、日常の場面から安全な使い方と情報の見極め方を学びます。</p><span class="card-button">インターネット・SNSのページへ <i>➔</i></span></a>
203
204<a class="card" href="ideas_for_life/index.html">
205<span class="icon"><img alt="" src="assets/theme-icons/life-ideas.png"/></span>
206<small>06 生活の工夫</small>
207<h3>自分に合う工夫を探してみよう</h3>
208<b>「もっとがんばる」以外にも、やりやすくする方法があります。</b>
209<p>集中しにくい、忘れやすい、予定変更が苦手、音や光が気になるなど、毎日の「ちょっとやりにくい」から、自分に合う工夫を探します。</p>
210<span class="card-button">生活の工夫を見る <i>➔</i></span>
211</a></div></section>
212<section aria-labelledby="lifeTitle" class="theme-category theme-category--life" id="life"><header class="category-head"><span>🌿</span><div><small>BODY &amp; DAILY LIFE</small><h3 id="lifeTitle">体と生活</h3><p>スマホ・ゲーム、食事、睡眠、口、血液、排泄など、毎日の生活と体のつながりを知るテーマです。</p></div></header><div class="card-grid"><a class="card game-card" href="screen-time/index.html"><span class="icon"><img alt="" src="assets/theme-icons/screen-time.webp"/></span><small>07 スマホ・ゲーム</small><h3>スマホ・ゲームと上手につきあう</h3><b>楽しいからこそ、自分で選ぶ力を育てよう。</b><p>使いすぎ、通知、睡眠、オンラインゲームなど、日常の場面から生活とのつながりと自分に合う工夫を考えます。</p><span class="card-button">スマホ・ゲームのページへ <i>➔</i></span></a>
213<a class="card" href="oral/index.html"><span class="icon"><img alt="" src="assets/theme-icons/tooth.webp"/></span><small>08 歯と口の健康</small><h3>生きるを支える歯と口</h3><b>食べる、話す、笑う。口は毎日の健康の入口。</b><p>むし歯予防だけでなく、唾液、歯ぐき、スポーツ、歯並び、コミュニケーションまで、口が支える生活を学びます。</p><span class="card-button">歯と口のページへ <i>➔</i></span></a>
214<a class="card" href="blood/index.html"><span class="icon"><img alt="" src="assets/theme-icons/blood.webp"/></span><small>09 献血・セルフスタディ</small><h3>だれかの命を支える 献血の話</h3><b>正しく知って、自分で考えて選ぶ。</b><p>献血の仕組み、血液の使われ方、安全のための基準、当日の流れや不安について、公的情報を確かめながら学びます。</p><span class="card-button">献血のページへ <i>➔</i></span></a>
215<a class="card" href="breakfast/index.html"><span class="icon"><img alt="" src="assets/theme-icons/breakfast.webp"/></span><small>10 朝の生活</small><h3>朝の自分を整えよう</h3><b>朝ごはんも、睡眠も、水分も、全部つながっている。</b><p>食べた・食べなかっただけで判断せず、今の朝を知り、自分にできそうな小さな工夫を探します。</p><span class="card-button">朝の生活のページへ <i>➔</i></span></a>
216<a class="card" href="sleep/index.html"><span class="icon"><img alt="" src="assets/theme-icons/sleep.webp"/></span><small>11 睡眠・生活リズム</small><h3>眠い。起きられない。眠れない。</h3><b>睡眠の悩みは、「夜更かししたから」だけではありません。</b><p>困りごとから原因を探し、自分の生活を振り返りながら、できそうな工夫や相談の目安を考えます。</p><span class="card-button">睡眠のページへ <i>➔</i></span></a>
217<a class="card" href="toilet/index.html"><span class="icon"><img alt="" src="assets/theme-icons/toilet.webp"/></span><small>12 排泄と体のサイン</small><h3>トイレは、体からのメッセージ。</h3><b>「いつもと違う」に気づくことから。</b><p>
217便や尿を通して体のサインに気づき、自分でできることや、必要なときの相談方法を考えます。</p><span class="card-button">体からのメッセージを見る <i>➔</i></span></a>
218</div></section>
219
220<div class="category-school-checkup">
221  <a class="card school-checkup-entry" href="school_checkup/student.html">
222    <span class="icon"><img alt="" src="assets/theme-icons/school-checkup.png"/></span>
223    <small>13 学校健診</small>
224    <h3>学校健診って、何をみているの?</h3>
225    <b>身長・体重、視力、聴力、歯・口、尿検査などを、気になったところから。</b>
226    <p>毎年受けている学校健診について、「この検査は何を調べている?」「結果のお知らせはどういう意味?」を、生徒向けにわかりやすく確認できます。</p>
227    <span class="card-button">学校健診のページへ <i>➔</i></span>
228  </a>
229</div>
230
231<div class="category-sos"><a class="card sos-entry" href="#sos"><span class="icon"><img alt="" src="assets/theme-icons/sos.webp"/></span><small>14 困ったときのSOS</small><h3>困ったとき、相談できる場所</h3><b>話してみたいときに使える、公的な相談窓口があります。</b><p>電話やSNSなど、自分に合う方法から探せます。うまく説明できなくても大丈夫でã
231™ã€‚</p><span class="card-button">相談窓口を見る <i>➔</i></span></a></div>
232</div></section>
233<section aria-label="困っていることから探す" data-concern-finder=""></section>
234<section class="sos" id="sos"><div class="section">
235<div class="section-head">
236  <span class="eyebrow">TALK &amp; CONNECT</span>
237  <h2>話してみたいとき、相談できる場所があります。</h2>
238  <p>うまく説明できなくても大丈夫です。電話やSNSなど、話しやすい方法から探せます。</p>
239</div>
240<div class="sos-grid">
241  <article class="sos-card">
242    <span>🌿</span>
243    <h3>こころや気持ちのことを相談したい</h3>
244    <p>つらい気持ちやこころの悩みについて、電話やSNSなどから相談先を探せます。</p>
245    <a href="https://www.mhlw.go.jp/mamorouyokokoro/" rel="noopener noreferrer" target="_blank">厚生労働省「まもろうよ こころ」 ↗</a>
246  </article>
247  <article class="sos-card">
248    <span>🏫</span>
249    <h3>学校や友だちのことなどで困っている</h3>
250    <p>いじめや友人関係、学校生活など、子どものSOSについて相談できる窓口を確認できます。</p>
251    <a href="https://www.mext.go.jp/a_menu/shotou/seitoshidou/06112210.htm" rel="noopener noreferrer" target="_blank">文部科学省「子供のSOSの相談窓口」 ↗</a>
252  </article>
253  <article class="sos-card">
254    <span>🧭</span>
255    <h3>どこに相談したらいいか分からない</h3>
256    <p>いじめ、性被害、家族のこと、こころ、SNS、発達など、困りごとに合う相談先を探せます。</p>
257    <a href="https://www.kodomo.cfa.go.jp/soudan/" rel="noopener noreferrer" target="_blank">こども家庭庁「相談窓口を探す」 ↗</a>
258  </article>
259
260  <article class="sos-card">
261    <span>🧩</span>
262    <h3>自分に合う相談先を探したい</h3>
263    <p>いくつかの質問に答えながら、今の困りごとに合った相談窓口を探せます。</p>
264    <a href="https://www.npa.go.jp/bureau/safetylife/syonen/annai/" rel="noopener noreferrer" target="_blank">警察庁「ぴったり相談窓口」 ↗</a>
265  </article>
266</div>
267<div class="sos-emergency" role="note" aria-label="緊急時の連絡先">
268  <h3>今すぐ助けが必要なとき</h3>
269  <p>事件や事故などで、今すぐ警察に来てほしいときは <strong>110番(警察)</strong> へ。</p>
270  <p>大きなけが、意識がない、呼吸がおかしいなど、救急車が必要なときは <strong>119番(救急)</strong> へ。</p>
271</div>
272</div></section>
273
274<section aria-labelledby="supporters-title" class="supporters-entry">
275<div class="supporters-entry-inner">
276<div class="supporters-entry-copy">
277<span class="eyebrow">FOR SUPPORTERS</span>
278<h2 id="supporters-title">子どもたちを支えるみなさまへ</h2>
279<p>先生・保護者・医療・保健関係者のみなさまへ。学校・家庭・医療・地域での活用方法、子どもへの伝え方、指導者向けQ&amp;Aや公的資料をまとめています。</p>
280</div>
281<a class="supporters-entry-button" href="supporters/">Supportersを見る <span aria-hidden="true">→</span></a>
282</div>
283</section>
284</main>
285<footer class="footer"><strong>知る。考える。自分に合う入口から。</strong><p>キミのミライ・ラボ | 自分を大切にする保健室</p><nav class="social-links" aria-label="MeLab365のSNS"><a href="https://www.instagram.com/melab.365/" target="_blank" rel="noopener noreferrer" aria-label="MeLab365のInstagramを開く">Instagram ↗</a><a href="https://www.tiktok.com/@melab365" target="_blank" rel="noopener noreferrer" aria-label="MeLab365のTikTokを開く">TikTok ↗</a><a href="https://www.threads.com/@melab.365" target="_blank" rel="noopener noreferrer" aria-label="MeLab365のThreadsを開く">Threads ↗</a></nav><p class="creator"><b>© 2026 MeLab365</b><br>保険薬局に勤める薬剤師が運営しています</p><p><a href="contact.html" style="color:#fff;font-weight:800">サイト・教材へのお問い合わせ</a></p></footer>
286<script src="data/site-links.js?v=20260806-1"></script>
vendor: 1 bytes, line 286
286
287<script src="data/concerns.js?v=20260806-1"></script>
vendor: 1 bytes, line 287
287
288<script src="data/consultation-steps.js?v=20260806-1"></script>
vendor: 1 bytes, line 288
288
289<script src="shared/concern-finder.js?v=20260806-1"></script>
vendor: 1 bytes, line 289
289
290<script src="shared/consultation-steps.js?v=20260806-1"></script>
290
291</body>
292</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.