/*-----------------------------
全ページ共通
-----------------------------*/

html {
font-size: 16px;
}

:root {
--theme-color: #e2007e;
--header-height: 104px;
--content-width: 1360px;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
width: 100%;
letter-spacing: 1px;
font-size: 100%;
font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS P Gothic","ＭＳ Ｐゴシック","Osaka", sans-serif;
}

.site-header {
position: relative;
z-index: 1000;
width: 100%;
background: #fff;
border-bottom: 1px solid #f2f2f2;
}

.site-header__inner {
display: flex;
align-items: center;
justify-content: space-around;
width: min(calc(100% - 48px), var(--content-width));
min-height: var(--header-height);
margin-inline: auto;
}

.site-header__logo {
display: block;
flex: 0 0 auto;
width: 120px;
line-height: 0;
}

.site-header__logo img {
display: block;
width: 100%;
height: auto;
}

.global-nav {
margin-left: 40px;
}

.global-nav__list {
display: flex;
align-items: stretch;
gap: clamp(20px, 2.4vw, 48px);
margin: 0;
padding: 0;
list-style: none;
}

.global-nav__item {
position: relative;
}

.global-nav__link {
position: relative;
display: flex;
align-items: center;
min-height: var(--header-height);
color: #222;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-decoration: none;
transition: color 0.2s ease;
}

.global-nav__link::after {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
height: 3px;
background: var(--theme-color);
content: "";
opacity: 0;
transform: scaleX(0.5);
transition: opacity 0.2s ease, transform 0.2s ease;
}

.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__link[aria-current="page"] {
color: var(--theme-color);
}

.global-nav__link:hover::after,
.global-nav__link:focus-visible::after,
.global-nav__link[aria-current="page"]::after {
opacity: 1;
transform: scaleX(1);
}

.global-nav a:focus-visible,
.menu-button:focus-visible {
outline: 3px solid rgba(226, 0, 126, 0.35);
outline-offset: 4px;
}

.menu-button {
display: none;
}

.sub-nav {
position: absolute;
top: calc(100% - 12px);
left: 50%;
z-index: 10;
width: 280px;
margin: 0;
padding: 8px;
list-style: none;
visibility: hidden;
background: #fff;
border-top: 3px solid var(--theme-color);
border-radius: 0 0 8px 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
opacity: 0;
transform: translate(-50%, 8px);
transition:
visibility 0.2s,
opacity 0.2s ease,
transform 0.2s ease;
}

.global-nav__item:hover > .sub-nav,
.global-nav__item:focus-within > .sub-nav {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}

.sub-nav li + li {
border-top: 1px solid #eee;
}

.sub-nav a {
position: relative;
display: block;
padding: 13px 34px 13px 14px;
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
text-align: left;
text-decoration: none;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}

.sub-nav a::after {
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
border-top: 2px solid var(--theme-color);
border-right: 2px solid var(--theme-color);
content: "";
transform: translateY(-50%) rotate(45deg);
}

.sub-nav a:hover,
.sub-nav a:focus-visible {
color: var(--theme-color);
background: #fff2f8;
}

@media (max-width: 900px) {
:root {
--header-height: 72px;
}

.site-header__inner {
width: calc(100% - 32px);
justify-content: space-between;
}

.site-header__logo {
width: 80px;
margin: 10px 0;
}

.menu-button {
display: grid;
place-content: center;
width: 52px;
height: 52px;
padding: 5px;
color: var(--theme-color);
font: inherit;
background: #fff;
border: 2px solid var(--theme-color);
border-radius: 50%;
cursor: pointer;
}

.menu-button__lines {
display: grid;
gap: 4px;
width: 22px;
margin-inline: auto;
}

.menu-button__lines span {
display: block;
width: 100%;
height: 2px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-button__text {
margin-top: 3px;
font-size: 8px;
font-weight: 700;
line-height: 1;
}

.menu-button[aria-expanded="true"] .menu-button__lines span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-button__lines span:nth-child(2) {
opacity: 0;
}

.menu-button[aria-expanded="true"] .menu-button__lines span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}

.global-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: 0;
margin: 0;
overflow: hidden;
visibility: hidden;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0.3s;
}

.global-nav.is-open {
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
visibility: visible;
opacity: 1;
}

.global-nav__list {
display: block;
width: calc(100% - 32px);
margin-inline: auto;
}

.global-nav__item + .global-nav__item {
border-top: 1px solid #eee;
}

.global-nav__link {
min-height: 60px;
padding: 14px 34px 14px 8px;
font-size: 15px;
text-align: left;
}

.global-nav__link::before {
position: absolute;
top: 50%;
right: 8px;
width: 8px;
height: 8px;
border-top: 2px solid var(--theme-color);
border-right: 2px solid var(--theme-color);
content: "";
transform: translateY(-50%) rotate(45deg);
}

.global-nav__link::after {
display: none;
}

.sub-nav {
position: static;
width: 100%;
padding: 0 0 8px 16px;
visibility: visible;
background: #fff7fb;
border-top: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
transform: none;
transition: none;
}

.global-nav__item:hover > .sub-nav,
.global-nav__item:focus-within > .sub-nav {
transform: none;
}

.sub-nav a {
min-height: 48px;
padding: 12px 34px 12px 16px;
font-size: 14px;
}

body.is-menu-open {
overflow: hidden;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}

/* ========================================
トップページ共通
======================================== */

:root {
--color-primary: #e2007e;
--color-primary-dark: #c9006f;
--color-pink-light: #fff3f8;
--color-text: #222;
--color-white: #fff;
--main-content-width: 1120px;
}

img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.section-inner {
width: min(
calc(100% - 48px),
var(--main-content-width)
);
margin-inline: auto;
}

.section-label {
margin: 0 0 14px;
color: var(--color-primary);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.1em;
}

.section-label--center,
.section-title--center {
text-align: center;
}

.section-title {
margin: 0;
color: var(--color-text);
font-size: clamp(28px, 2.5vw, 38px);
line-height: 1.45;
}

/* ========================================
ボタン
======================================== */

.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 58px;
padding: 12px 68px;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
transition:
color 0.2s ease,
background-color 0.2s ease;
}

.button__arrow {
position: absolute;
right: 24px;
font-size: 26px;
line-height: 1;
}

.button--primary {
width: 290px;
color: var(--color-white);
background: var(--color-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
background: var(--color-primary-dark);
}

.button--outline {
color: var(--color-primary);
background: var(--color-white);
border: 2px solid var(--color-primary);
}

.button--outline:hover,
.button--outline:focus-visible {
color: var(--color-white);
background: var(--color-primary);
}

/* ========================================
メインビジュアル
======================================== */

.hero {
overflow: hidden;
background: url(/10-8/images/hero-visual_bk.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.hero__copy {
position: relative;
z-index: 1;
padding-block: 70px;
}

.hero__title {
margin: 0;
color: var(--color-text);
font-size: clamp(48px, 3vw, 63px);
font-weight: 800;
line-height: 1.55;
letter-spacing: 0.01em;
}

.hero__title span {
color: var(--color-primary);
}

.hero__tagline {
display: inline-block;
margin: 26px 0 0;
padding: 12px 28px;
color: var(--color-primary);
font-size: clamp(19px, 2vw, 25px);
font-weight: 700;
background: var(--color-white);
border: 2px solid var(--color-primary);
border-radius: 999px;
}

.hero__visual {
align-self: end;
line-height: 0;
margin-right: 3em;
}

.hero__visual img {
width: 100%;
max-height: 400px;
object-fit: contain;
object-position: right bottom;
}

html,
body {
width: 100%;
overflow-x: clip;
}

.hero__inner {
display: grid;
/* 最小幅410px・500pxを削除 */
grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);
align-items: center;
width: min(100%, 1440px);
min-height: 550px;
margin-inline: auto;
padding-left: max(
48px,
calc((100% - var(--main-content-width)) / 1)
);
}

/* Gridの子要素が内容幅に引っ張られるのを防ぐ */
.hero__copy,
.hero__visual,
.about__body,
.about__visual,
.report-latest__body,
.report-latest__image {
min-width: 0;
}

/* ========================================
「糖をはかる日」について
======================================== */

.about {
padding-block: 90px;
background: var(--color-white);
}

.about__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(50px, 8vw, 110px);
align-items: center;
}

.about__visual {
text-align: center;
}

.about__visual img {
width: min(100%, 500px);
}

.about__text {
margin: 30px 0 34px;
font-size: 17px;
line-height: 2;
}

/* ========================================
協賛
======================================== */

.sponsor {
min-height: 340px;
padding-block: 52px 72px;
background: var(--color-pink-light);
}

.sponsor__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 38px 0 0;
padding: 0;
list-style: none;
}

.sponsor__list li {
display: grid;
place-items: center;
min-height: 100px;
padding: 18px;
background: var(--color-white);
border-radius: 6px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.sponsor__list img {
max-width: 100%;
max-height: 64px;
object-fit: contain;
}

.sponsor .mbox_wh {
background: #fff;
padding: 24px;
margin: 2em auto;
border-radius: 8px;
text-align: center;
}

.sponsor .mbox_wh h3 {
color: var(--color-primary);
margin-bottom: 0.5em;
}

/* ========================================
活動報告
======================================== */

.report {
padding-block: 70px 82px;
background: var(--color-white);
}

.report-latest {
position: relative;
display: grid;
grid-template-columns: 44% 1fr;
gap: 36px;
align-items: center;
margin-top: 38px;
padding: 24px 70px 24px 24px;
color: var(--color-text);
text-decoration: none;
background: var(--color-white);
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
}

.report-latest:hover,
.report-latest:focus-visible {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
transform: translateY(-2px);
}

.report-latest__image {
overflow: hidden;
border-radius: 8px;
}

.report-latest__image img {
width: 100%;
aspect-ratio: 16 / 8;
object-fit: cover;
}

.report-latest__year {
margin: 0 0 10px;
color: var(--color-primary);
font-size: 22px;
font-weight: 800;
}

.report-latest__title {
margin: 0;
font-size: 30px;
line-height: 1.4;
}

.report-latest__text {
margin: 18px 0 0;
font-size: 15px;
line-height: 1.8;
}

.report-latest__arrow {
position: absolute;
right: 24px;
bottom: 22px;
color: var(--color-primary);
font-size: 28px;
}

/* 過去の記事 */

.report-years {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 24px 0 0;
padding: 0;
list-style: none;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.report-years li + li {
border-left: 1px solid #ddd;
}

.report-years a {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
min-height: 68px;
padding: 12px 24px;
color: var(--color-primary);
font-size: 21px;
font-weight: 800;
text-decoration: none;
transition:
color 0.2s ease,
background-color 0.2s ease;
}

.report-years a:hover,
.report-years a:focus-visible {
color: var(--color-white);
background: var(--color-primary);
}

.report__button {
width: min(100%, 420px);
margin: 30px auto 0;
}

/* ========================================
フッター
======================================== */

.site-footer {
padding: 48px 0 24px;
color: var(--color-white);
background: var(--color-primary);
}

.site-footer__inner {
display: grid;
grid-template-columns: 190px 1fr;
column-gap: 42px;
width: min(
calc(100% - 48px),
var(--main-content-width)
);
margin-inline: auto;
}

.site-footer__logo img {
width: 100%;
margin: auto;
}

.site-footer__tagline {
margin: 0;
padding-bottom: 16px;
font-size: 20px;
font-weight: 700;
line-height: 1.6;
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.site-footer__about {
padding-top: 14px;
}

.site-footer__about h2 {
margin: 0 0 8px;
font-size: 17px;
}

.site-footer__about p {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.75;
}

.site-footer a {
color: inherit;
}

.site-footer__organizers {
grid-column: 1 / -1;
margin: 28px 0 0;
padding-top: 22px;
font-size: 14px;
line-height: 1.8;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.site-footer__copyright {
grid-column: 1 / -1;
margin: 14px 0 0;
text-align: center;
}

.site-footer__copyright a {
text-decoration: none;
}

/* ========================================
スマートフォン
======================================== */

@media (max-width: 900px) {
.section-inner {
width: calc(100% - 40px);
}

.section-label {
font-size: 12px;
}

.section-title {
font-size: 25px;
}

/* メインビジュアル */

.hero__inner {
display: block;
min-height: 0;
padding: 42px 0 0;
}

.hero__copy {
width: calc(100% - 40px);
margin-inline: auto;
padding: 0;
}

.hero__title {
font-size: clamp(34px, 9vw, 49px);
line-height: 1.55;
}

.hero__tagline {
margin-top: 18px;
padding: 9px 18px;
font-size: 16px;
}

.hero__visual {
margin-top: -20px;
text-align: right;
}

.hero__visual img {
width: min(92%, 620px);
max-height: none;
}

/* 「糖をはかる日」について */

.about {
padding-block: 44px;
}

.about__inner {
display: block;
}

.about__visual img {
width: min(88%, 460px);
}

.about__body {
margin-top: 28px;
}

.about__text {
margin: 22px 0 26px;
font-size: 15px;
line-height: 1.9;
}

.about__text br {
display: none;
}

.button--primary {
width: 100%;
}

/* 協賛 */

.sponsor {
min-height: 0;
padding-block: 38px 48px;
}

.sponsor__list {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 26px;
}

.sponsor__list li {
min-height: 88px;
padding: 14px;
}

/* 活動報告 */

.report {
padding-block: 46px 52px;
}

.report-latest {
display: block;
margin-top: 28px;
padding: 14px 14px 54px;
}

.report-latest__image img {
aspect-ratio: 16 / 8;
}

.report-latest__body {
padding: 18px 8px 0;
}

.report-latest__year {
font-size: 18px;
}

.report-latest__title {
font-size: 23px;
}

.report-latest__text {
margin-top: 12px;
font-size: 14px;
}

.report-years {
display: block;
margin-top: 14px;
border: 0;
box-shadow: none;
}

.report-years li {
border: 1px solid #e5e5e5;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.report-years li + li {
margin-top: 10px;
border-left: 1px solid #e5e5e5;
}

.report-years a {
justify-content: space-between;
min-height: 54px;
padding: 10px 18px;
font-size: 18px;
}

.report__button {
margin-top: 24px;
}

/* フッター */

.site-footer {
padding: 36px 0 22px;
}

.site-footer__inner {
display: block;
width: calc(100% - 40px);
}

.site-footer__logo {
width: 130px;
}

.site-footer__body {
margin-top: 22px;
}

.site-footer__tagline {
font-size: 19px;
}

.site-footer__about {
padding-top: 22px;
}

.site-footer__about h2 {
font-size: 18px;
}

.site-footer__about p {
font-size: 13px;
line-height: 1.85;
}

.site-footer__organizers {
margin-top: 24px;
font-size: 13px;
}
}

@media (max-width: 480px) {
.hero__visual {
margin-top: -5px;
margin-right: 0;
}

.button {
padding-inline: 48px;
}

.site-footer__tagline {
font-size: 17px;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}

/* ========================================
パンくず
======================================== */

nav.breadcrumb {
max-width: 1230px;
width: auto;
margin: 1em auto;
}

nav.breadcrumb ul {
display: flex;
flex-wrap: wrap;
font-size: 80%;
padding: 0;
margin: 1em;
}

nav.breadcrumb ul li {
list-style: none;
margin: 0 5px;
}

nav.breadcrumb ul li:not(:last-child):after {
content: "＞";
margin-left: 0.5em;
margin-right: 0.5em;
}

nav.breadcrumb ul li a {
text-decoration: none;
}

@media (max-width: 768px) {
nav.breadcrumb {
display: none;
}
}

/* ========================================
中ページ
======================================== */

.main-contents .one-column {
width: min(calc(100% - 48px), var(--main-content-width));
margin: 2em auto 5em auto;
}

.main-contents .one-column h1.post_maintitle {
display: flex;
align-items: center;
font-size: 170%;
border-bottom: 3px solid var(--color-primary);
padding: 0.5em 0;
margin-bottom: 1em;
}

.main-contents .one-column h1.post_maintitle span {
margin-left: 1em;
}

.main-contents .one-column h2 {
font-size: 150%;
border-left: 7px solid var(--color-primary);
margin: 1em auto;
padding: 12px 18px;
background: #fff3f8;
line-height: 1.5;
}

.main-contents .one-column h3 {
margin: 1em auto;
color: var(--color-primary);
}

.main-contents .one-column p {
margin-bottom: 1em;
line-height: 1.7;
}

.main-contents .one-column .button a {
width: max-content;
color: var(--color-white);
background: var(--color-primary);
text-align: center;
padding: 1em 2em;
border-radius: 50px;
text-decoration: none;
border: 2px solid;
transition: 0.2s ease;
}

.main-contents .one-column .button a:hover {
background: #fff;
color: #e2007e;
}

.main-contents .one-column p img {
display: block;
margin: 1em auto;
}

.main-contents .one-column ul.reference {
margin: 1em;
}

.main-contents .one-column ul.reference li {
list-style: disc;
margin-bottom: 0.5em;
}

.main-contents .one-column .notes {
font-size: 95%;
}

.main-contents .one-column p.textR {
text-align: right;
}

.main-contents .one-column figure {
margin: 1em auto;
text-align: center;
background: #f5f5f5;
padding: 1em;
width: max-content;
}

.main-contents .one-column figure img {
display: block;
margin: 5px auto;
border: 1px solid #e3e3e3;
}

.main-contents .one-column figcaption {
font-weight: bold;
}

.main-contents .one-column .figure.clearfix {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.main-contents .one-column figure.figure.floatR img {
max-width: 200px;
width: auto;
}

.main-contents .one-column ul.member {
margin: 1em auto;
}

.main-contents .one-column ul.member li {
border-bottom: 1px dotted;
padding: 10px 5px;
}

/* ========================================
クイズ
======================================== */

.one-column {
max-width: 900px;
margin: 0 auto;
}

.post_maintitle {
margin-bottom: 20px;
}

.lead {
margin-bottom: 40px;
line-height: 1.8;
}

/* クイズ1問分 */
.box {
margin-bottom: 20px;
border: 1px solid #ddd;
background: #fff;
overflow: hidden;
cursor: pointer;
}

.box.odd {
background: #fafafa;
}

/* 問題文 */
.question {
padding: 20px 25px;
font-size: 20px;
font-weight: bold;
text-align: center;
}

/* ○×を横並び */
.flex {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0 20px 20px;
}

/* ○ × 共通 */
.circle,
.cross,
.triangle {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
color: #ffffff;
font-size: 50px;
font-weight: bold;
border-radius: 50%;
}

/* ○ */
.circle {
background: #de97af;
}

/* × */
.cross {
background: #4d75c9;
}

/* △ */
.triangle {
background: #1cbeb9;
}

/* ========================================
アコーディオン
======================================== */

.description {
max-height: 0;
padding: 0 30px;
overflow: hidden;
opacity: 0;
transition:
max-height 0.5s ease,
opacity 0.3s ease,
padding 0.5s ease;
}

/* 開いた状態 */
.box.is-open .description {
max-height: 1500px;
padding: 25px 30px 30px;
opacity: 1;
}

/* 正解 */
.answer {
margin-bottom: 20px;
font-size: 22px;
font-weight: bold;
text-align: center;
}

.answer span {
font-size: 32px;
}

/* 解説文 */
.description p {
margin: 0 0 1em;
line-height: 1.8;
}

.description p:last-child {
margin-bottom: 0;
}

/* ========================================
スマホ
======================================== */

@media screen and (max-width: 767px) {

.question {
padding: 18px 15px;
font-size: 17px;
}

.flex {
gap: 15px;
padding: 0 15px 18px;
}

.circle,
.cross,
.triangle {
width: 75px;
height: 75px;
font-size: 38px;
}

.description {
padding-left: 20px;
padding-right: 20px;
}

.box.is-open .description {
padding: 20px;
}

.answer {
font-size: 19px;
}

.answer span {
font-size: 28px;
}

}


/* ========================================
低血糖ページ
======================================== */

.hypoglycemia-page {
max-width: 900px;
margin: 0 auto;
color: #333;
font-size: 16px;
line-height: 1.8;
}

.hypoglycemia-page *,
.hypoglycemia-page *::before,
.hypoglycemia-page *::after {
box-sizing: border-box;
}

.hypoglycemia-page p {
margin: 0 0 1.5em;
}

.hypoglycemia-page a {
color: #2763b5;
text-decoration: underline;
text-underline-offset: 3px;
}

.hypoglycemia-page a:hover {
text-decoration: none;
}


/* ========================================
セクション
======================================== */

.hypo-section {
margin-bottom: 60px;
}

.hypo-intro {
padding: 25px 30px;
background: #fafafa;
border-radius: 8px;
}

.hypo-intro p:last-child {
margin-bottom: 0;
}

.section-note {
margin-top: -15px;
color: #666;
font-size: 14px;
}


/* ========================================
症状
======================================== */

.symptom-list {
display: grid;
gap: 20px;
}

.symptom-card {
padding: 25px 30px;
border: 2px solid #68b7d9;
border-radius: 10px;
background: #f5fbfe;
}

.symptom-card--warning {
border-color: #eba75b;
background: #fff9ef;
}

.symptom-card--danger {
border-color: #dc6e78;
background: #fff4f5;
}

.symptom-card__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 15px;
margin-bottom: 18px;
}

.symptom-card__level {
font-size: 21px;
font-weight: 700;
}

.symptom-card__type {
color: #666;
font-size: 14px;
}


/* ========================================
チェックリスト
======================================== */

.check-list {
display: flex;
flex-wrap: wrap;
gap: 10px 30px;
margin: 0;
padding: 0;
list-style: none;
}

.check-list li {
position: relative;
padding-left: 26px;
font-weight: 500;
}

.check-list li::before {
content: "";
position: absolute;
top: 14px;
left: 0;
width: 14px;
height: 14px;
border: 2px solid #888;
background: #fff;
transform: translateY(-50%);
}


/* ========================================
注意書き
======================================== */

.notes {
position: relative;
margin-top: 20px;
padding: 18px 20px 18px 48px;
background: #f7f7f7;
border-radius: 6px;
color: #555;
font-size: 14px;
line-height: 1.7;
}

.notes::before {
content: "!";
position: absolute;
top: 18px;
left: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #777;
color: #fff;
font-weight: bold;
}


/* ========================================
低血糖になりやすい要因
======================================== */

.factor-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.factor-card {
padding: 22px 24px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}

.factor-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 12px;
}

.factor-card__head h3 {
position: relative;
margin: 0;
padding-left: 25px;
font-size: 17px;
line-height: 1.6;
}

.factor-card__head h3::before {
content: "";
position: absolute;
top: 0.5em;
left: 0;
width: 14px;
height: 14px;
border: 2px solid #e2007e;
}

.factor-card__head > a {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 4px;
background: #f5f5f5;
font-size: 13px;
}

.factor-card ul {
margin: 0;
padding-left: 1.4em;
}

.factor-card li {
margin-bottom: 4px;
}

.link-list {
list-style: none;
padding-left: 0 !important;
}

.link-list li {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 7px 0;
border-bottom: 1px dotted #ccc;
}

.link-list li:last-child {
border-bottom: 0;
}

.link-list a {
flex-shrink: 0;
}


/* ========================================
気づきにくい人
======================================== */

.attention-box {
padding: 25px 30px;
border: 2px solid #e0a43b;
border-radius: 8px;
background: #fffaf0;
}

.attention-box .check-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ========================================
正しく備えましょう
======================================== */

.prepare-list {
display: grid;
gap: 15px;
}

.prepare-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px 25px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}

.prepare-item__number {
display: flex;
flex: 0 0 48px;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #e2007e;
color: #fff;
font-size: 22px;
font-weight: bold;
}

.prepare-item__body {
flex: 1;
}

.prepare-item__body h3 {
margin: 0 0 6px;
color: #333;
font-size: 19px;
}

.prepare-item__body p {
margin: 0;
}


/* ========================================
アクションプラン
======================================== */

.action-plan {
margin: 70px 0 60px;
padding: 35px 40px;
border-radius: 12px;
background: #e9f7ff;
}

.action-plan__catch {
margin-bottom: 5px !important;
color: #2357a5;
font-size: 17px;
font-weight: bold;
}

.action-plan__catch span {
font-size: 14px;
}

.action-plan__title {
margin: 0 0 25px;
color: #365fc7;
font-size: 30px;
line-height: 1.4;
}

.action-plan__supervision {
margin-top: 25px;
font-weight: bold;
}


/* 資料画像 */

.action-plan__sheets {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
max-width: 650px;
margin: 30px auto;
}

.sheet-card img {
display: block;
width: 100%;
height: auto;
margin-bottom: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sheet-card p {
margin: 0;
font-size: 13px;
line-height: 1.7;
}

.sheet-card strong {
color: #2357a5;
}


/* PDFボタン */

.action-plan__button {
margin-top: 30px;
text-align: center;
}

.action-plan__button a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 300px;
padding: 14px 30px;
border-radius: 50px;
background: #365fc7;
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}

.action-plan__button a::after {
content: "→";
margin-left: 12px;
}

.action-plan__button a:hover {
opacity: 0.8;
transform: translateY(-2px);
}


/* ========================================
バナー
======================================== */

.learning-banner {
margin: 50px 0;
text-align: center;
}

.learning-banner img {
max-width: 100%;
height: auto;
}


/* ========================================
スマートフォン
======================================== */

@media screen and (max-width: 767px) {

.hypoglycemia-page {
font-size: 15px;
}

.hypo-section {
margin-bottom: 45px;
}

.hypo-section > h2 {
margin-bottom: 20px;
padding: 10px 14px;
font-size: 21px;
}

.hypo-intro {
padding: 20px;
}


/* 症状 */

.symptom-card {
padding: 20px;
}

.symptom-card__head {
display: block;
}

.symptom-card__level {
display: block;
margin-bottom: 4px;
font-size: 18px;
}

.check-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 15px;
}


/* 要因 */

.factor-list {
grid-template-columns: 1fr;
}

.factor-card {
padding: 18px 20px;
}

.factor-card__head {
gap: 10px;
}

.factor-card__head h3 {
font-size: 16px;
}


/* 注意 */

.attention-box {
padding: 20px;
}

.attention-box .check-list {
grid-template-columns: 1fr;
}


/* 備え */

.prepare-item {
gap: 15px;
padding: 18px;
}

.prepare-item__number {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 18px;
}

.prepare-item__body h3 {
font-size: 17px;
}


/* アクションプラン */

.action-plan {
margin: 50px 0 40px;
padding: 25px 20px;
}

.action-plan__title {
font-size: 24px;
}

.action-plan__sheets {
grid-template-columns: 1fr;
gap: 25px;
max-width: 320px;
}

.action-plan__button a {
width: 100%;
min-width: 0;
}
}

/* ========================================
活動報告ページ
======================================== */

ul.report-years.activity-list {
display: block;
border: none;
box-shadow: none;
}

ul.report-years.activity-list li {
margin-top: 10px;
border: 1px solid #e5e5e5;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}