@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap");

/* ==============================
   Design tokens
============================== */
:root {
    /* Fonts */
    --font-base: "Noto Sans JP", sans-serif;
    --font-rounded: "Zen Maru Gothic", "Noto Sans JP", sans-serif;

    /* Colors */
    --color-green: #0b5d3b;
    --color-green-dark: #06442d;
    --color-green-bright: #29923d;
    --color-green-light: #dff2df;
    --color-yellow: #f5c400;
    --color-yellow-light: #fff3aa;
    --color-cream: #fffaf0;
    --color-ivory: #fffdf7;
    --color-mint: #eaf7df;
    --color-pink: #ffe8ec;
    --color-sky: #eaf6ff;
    --color-text: #173126;
    --color-text-sub: #596b62;
    --color-white: #ffffff;
    --color-black: #171717;

    /* Layout */
    --site-width: 1600px;
    --side-space: clamp(48px, 7.5vw, 120px);
    --section-space: clamp(96px, 8.75vw, 140px);
    --header-height: 88px;

    /* UI */
    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-pill: 999px;
    --shadow-soft: 0 12px 36px rgb(6 68 45 / 12%);
    --shadow-float: 0 18px 50px rgb(6 68 45 / 18%);
    --transition: 0.3s ease;

    /* Layer */
    --z-header: 100;
    --z-menu: 200;
    --z-modal: 300;
}

/* ==============================
   Base
============================== */
html {
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    overflow-x: clip;
    color: var(--color-text);
    background: var(--color-ivory);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.04em;
}

main {
    overflow: clip;
}

section[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

::selection {
    color: var(--color-green-dark);
    background: var(--color-yellow-light);
}

/* ==============================
   Typography
============================== */
.font-rounded {
    font-family: var(--font-rounded);
}

.section-heading {
    position: relative;
    z-index: 1;
    text-align: center;
}

.section-heading__en {
    display: block;
    margin-bottom: 12px;
    color: var(--color-green-bright);
    font-family: var(--font-rounded);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-heading__title {
    color: var(--color-green-dark);
    font-family: var(--font-rounded);
    font-size: clamp(36px, 3.4vw, 56px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

.text-accent {
    color: var(--color-green-bright);
    font-weight: 700;
}

/* ==============================
   Layout
============================== */
.inner {
    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;
    padding-inline: var(--side-space);
}

.section {
    position: relative;
    padding-block: var(--section-space);
}

.section--cream {
    background: var(--color-cream);
}

.section--green {
    color: var(--color-white);
    background: var(--color-green-dark);
}

.section--green .section-heading__en {
    color: var(--color-yellow);
}

.section--green .section-heading__title {
    color: var(--color-white);
}

/* ==============================
   Common button
============================== */
.button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid var(--color-green);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: var(--color-green);
    box-shadow: var(--shadow-soft);
    font-family: var(--font-rounded);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.button--light {
    color: var(--color-green-dark);
    background: var(--color-white);
}

@media (any-hover: hover) {
    .button:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-float);
    }
}

/* ==============================
   Decoration / animation
============================== */
.is-floating {
    animation: leaf-float 5s ease-in-out infinite;
}

.is-sparkling {
    animation: sparkle 2.2s ease-in-out infinite;
}

.is-swaying {
    transform-origin: 50% 100%;
    animation: sprout-sway 3s ease-in-out infinite;
}

@keyframes leaf-float {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }

    50% {
        transform: translate3d(0, -14px, 0) rotate(5deg);
    }
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.08) rotate(8deg);
    }
}

@keyframes sprout-sway {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* ==============================
   Utilities
============================== */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sp-only {
    display: none;
}

/* ==============================
   Responsive
============================== */
@media (max-width: 767px) {
    :root {
        --side-space: 20px;
        --section-space: 80px;
        --header-height: 64px;
    }

    body {
        font-size: 15px;
        line-height: 1.85;
    }

    .section-heading__en {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .section-heading__title {
        font-size: clamp(32px, 10.25vw, 40px);
    }

    .button {
        width: 100%;
        min-height: 52px;
        padding-inline: 20px;
    }

    .pc-only {
        display: none !important;
    }

    .sp-only {
        display: block;
    }
}

/* ==============================
   PC Header
============================== */
.site-header {
    position: fixed;
    z-index: var(--z-header);
    top: 20px;
    left: 0;
    width: 100%;
    padding-inline: 20px;
}

.site-header__inner {
    display: grid;
    width: 100%;
    max-width: 1560px;
    min-height: var(--header-height);
    grid-template-columns: minmax(230px, 1fr) auto auto;
    align-items: center;
    gap: clamp(22px, 2.5vw, 44px);
    margin-inline: auto;
    padding: 8px 16px 8px 22px;
    border: 1px solid rgb(11 93 59 / 20%);
    border-radius: var(--radius-pill);
    background: rgb(255 253 247 / 94%);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ロゴ
------------------------------ */
.site-header__logo {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    transition: opacity var(--transition);
}

.site-header__logo-image {
    width: 58px;
    height: 70px;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-header__logo-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.site-header__logo-name {
    color: var(--color-green-dark);
    font-family: var(--font-rounded);
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.site-header__logo-sub {
    margin-top: 4px;
    color: var(--color-green);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ナビゲーション
------------------------------ */
.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
}

.site-header__nav-link {
    position: relative;
    display: grid;
    min-height: 48px;
    place-items: center;
    padding-block: 4px;
    color: var(--color-green-dark);
    font-family: var(--font-rounded);
    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition:
        color var(--transition),
        transform var(--transition);
}

/* ナビ下の芽 */
.site-header__nav-sprout {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 18px;
    height: 13px;
    opacity: 0;
    transform: translate(-50%, -3px) scale(0.7);
    transform-origin: 50% 100%;
    transition:
        opacity var(--transition),
        transform var(--transition);
}

.site-header__nav-sprout::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 11px;
    border-radius: var(--radius-pill);
    background: var(--color-green-bright);
    content: "";
    transform: translateX(-50%);
}

.site-header__nav-sprout::after {
    position: absolute;
    top: 1px;
    left: 50%;
    width: 14px;
    height: 8px;
    border-radius: 80% 20% 80% 20%;
    background: var(--color-green-bright);
    clip-path: polygon(50% 50%,
            0 0,
            6% 72%,
            50% 100%,
            94% 72%,
            100% 0);
    content: "";
    transform: translateX(-50%);
}

.site-header__nav-link.is-current,
.site-header__nav-link:hover {
    color: var(--color-green-bright);
    transform: translateY(-1px);
}

.site-header__nav-link.is-current .site-header__nav-sprout,
.site-header__nav-link:hover .site-header__nav-sprout {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* 公式サイトボタン
------------------------------ */
.site-header__cta-wrap {
    position: relative;
}

/* ボタン右上のキラキラ */
.site-header__cta-wrap::after {
    position: absolute;
    top: -7px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: var(--color-yellow);
    clip-path: polygon(50% 0,
            61% 39%,
            100% 50%,
            61% 61%,
            50% 100%,
            39% 61%,
            0 50%,
            39% 39%);
    content: "";
    animation: sparkle 2.2s ease-in-out infinite;
}

.site-header__cta {
    display: inline-flex;
    min-width: 224px;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border: 2px solid var(--color-green);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: var(--color-green);
    box-shadow: 0 8px 20px rgb(6 68 45 / 20%);
    font-family: var(--font-rounded);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* ホバー
------------------------------ */
@media (any-hover: hover) {
    .site-header__logo:hover {
        opacity: 0.82;
    }

    .site-header__cta:hover {
        background: var(--color-green-bright);
        box-shadow: 0 12px 26px rgb(6 68 45 / 28%);
        transform: translateY(-2px);
    }
}

/* 画面幅が少し狭いPC
------------------------------ */
@media (max-width: 1240px) {
    .site-header__inner {
        grid-template-columns: minmax(190px, 1fr) auto auto;
        gap: 18px;
    }

    .site-header__logo-image {
        width: 50px;
        height: 64px;
    }

    .site-header__logo-name {
        font-size: 23px;
    }

    .site-header__logo-sub {
        display: none;
    }

    .site-header__nav-list {
        gap: 16px;
    }

    .site-header__nav-link {
        font-size: 12px;
    }

    .site-header__cta {
        min-width: 190px;
        padding-inline: 18px;
        font-size: 12px;
    }
}

/* SPヘッダー実装までPCヘッダーを非表示
------------------------------ */
@media (max-width: 767px) {
    .site-header {
        display: none;
    }
}

/* ==============================
   Hero / First View
============================== */
.hero {
    position: relative;
    min-height: clamp(760px, 100svh, 960px);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-sky);
}

/* キャンパス背景
------------------------------ */
.hero__background {
    position: absolute;
    z-index: 0;
    inset: 0;
}

.hero__background::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgb(234 246 255 / 18%) 0%,
            rgb(255 255 255 / 4%) 48%,
            rgb(255 255 255 / 0%) 100%),
        linear-gradient(180deg,
            rgb(255 255 255 / 6%) 65%,
            rgb(6 68 45 / 10%) 100%);
    content: "";
}

.hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* FV全体のレイアウト
------------------------------ */
.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: clamp(760px, 100svh, 960px);
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: center;
    padding-top: calc(var(--header-height) + 90px);
    padding-bottom: 70px;
}

/* 左側コピー
------------------------------ */
.hero__content {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    padding: 86px 52px;
    text-align: center;
    isolation: isolate;
}

/* コピー背後の白い丸 */
.hero__content::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: clamp(540px, 43vw, 680px);
    aspect-ratio: 1.08 / 1;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
    background: rgb(255 253 247 / 90%);
    box-shadow: 0 24px 70px rgb(6 68 45 / 14%);
    content: "";
    transform: translate(-50%, -50%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.hero__eyebrow {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    border-radius: var(--radius-pill);
    color: var(--color-white);
    background: var(--color-green);
    font-family: var(--font-rounded);
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.hero__title {
    margin-top: 18px;
    color: var(--color-green-dark);
    font-family: var(--font-rounded);
    font-size: clamp(60px, 5vw, 80px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.hero__title-name {
    display: block;
    white-space: nowrap;
}

.hero__lead {
    margin-top: 22px;
    color: var(--color-text);
    font-family: var(--font-rounded);
    font-size: clamp(20px, 1.65vw, 27px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.04em;
}

.hero__lead strong {
    color: var(--color-green-bright);
    font-size: 1.18em;
    font-weight: 900;
    background:
        linear-gradient(transparent 68%,
            var(--color-yellow-light) 68%);
}

/* 右側トウザえもん
------------------------------ */
.hero__visual {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    align-self: end;
    justify-content: center;
}

.hero__character {
    display: block;
    width: min(42vw, 640px);
    max-height: calc(100svh - 130px);
    margin-bottom: -18px;
    object-fit: contain;
    filter: drop-shadow(0 24px 25px rgb(6 68 45 / 20%));
    transform-origin: 50% 100%;
    animation: hero-character-float 4.5s ease-in-out infinite;
}

/* 吹き出し */
.hero__speech {
    position: absolute;
    z-index: 3;
    top: 24%;
    left: -1%;
    min-width: 240px;
    padding: 18px 28px;
    border: 3px solid var(--color-green);
    border-radius: 50px;
    color: var(--color-green-dark);
    background: var(--color-white);
    box-shadow: 0 12px 30px rgb(6 68 45 / 16%);
    font-family: var(--font-rounded);
    font-size: clamp(17px, 1.4vw, 22px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    transform: rotate(-4deg);
}

.hero__speech::after {
    position: absolute;
    right: 34px;
    bottom: -18px;
    width: 25px;
    height: 22px;
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 0, 80% 100%);
    content: "";
    transform: rotate(-5deg);
}

.hero__speech span,
.hero__speech strong {
    display: block;
}

.hero__speech strong {
    color: var(--color-green-bright);
    font-size: 1.25em;
    font-weight: 900;
}

/* 装飾
------------------------------ */
.hero__decorations {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__leaf,
.hero__leaves,
.hero__sparkle {
    position: absolute;
    display: block;
}

.hero__leaf--01 {
    top: 20%;
    left: 45%;
    width: clamp(54px, 4.8vw, 78px);
    animation-delay: -1.2s;
}

.hero__leaf--02 {
    right: 4%;
    bottom: 17%;
    width: clamp(48px, 4.3vw, 68px);
    animation-delay: -2.5s;
}

.hero__leaves--01 {
    top: 14%;
    right: -30px;
    width: clamp(130px, 12vw, 190px);
    opacity: 0.8;
}

.hero__sparkle--01 {
    top: 20%;
    right: 34%;
    width: clamp(26px, 2.4vw, 40px);
}

.hero__sparkle--02 {
    right: 8%;
    bottom: 34%;
    width: clamp(20px, 1.8vw, 30px);
    animation-delay: -1.1s;
}

/* スクロール案内
------------------------------ */
.hero__scroll {
    position: absolute;
    z-index: 4;
    bottom: 18px;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    color: var(--color-green-dark);
    transform: translateX(-50%);
}

.hero__scroll-text {
    font-family: var(--font-rounded);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
}

.hero__scroll-line {
    position: relative;
    display: block;
    width: 2px;
    height: 42px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgb(6 68 45 / 22%);
}

.hero__scroll-line::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-green);
    content: "";
    transform: scaleY(0);
    transform-origin: 50% 0;
    animation: hero-scroll-line 2s ease-in-out infinite;
}

/* FVアニメーション
------------------------------ */
@keyframes hero-character-float {

    0%,
    100% {
        transform: translateY(0) rotate(-0.5deg);
    }

    50% {
        transform: translateY(-10px) rotate(0.5deg);
    }
}

@keyframes hero-scroll-line {
    0% {
        transform: scaleY(0);
        transform-origin: 50% 0;
    }

    45% {
        transform: scaleY(1);
        transform-origin: 50% 0;
    }

    55% {
        transform: scaleY(1);
        transform-origin: 50% 100%;
    }

    100% {
        transform: scaleY(0);
        transform-origin: 50% 100%;
    }
}

/* 少し狭いPC
------------------------------ */
@media (max-width: 1240px) {
    .hero__inner {
        grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    }

    .hero__content {
        padding-inline: 34px;
    }

    .hero__content::before {
        width: 540px;
    }

    .hero__title {
        font-size: 60px;
    }

    .hero__lead {
        font-size: 20px;
    }

    .hero__character {
        width: min(43vw, 520px);
    }

    .hero__speech {
        top: 27%;
        left: -6%;
        min-width: 200px;
        padding: 15px 22px;
        font-size: 16px;
    }

    .hero__leaf--01 {
        left: 47%;
    }
}

/* ==============================
   FV Fine Adjustment
============================== */

/* ① 背景を下寄せして地面を見せる */
.hero__background-image {
    object-position: center bottom;
}

/* ② 白丸を小さく・薄くする */
.hero__content {
    padding: 68px 34px;
}

.hero__content::before {
    width: clamp(500px, 38vw, 610px);
    aspect-ratio: 1.08 / 1;
    border-color: rgb(255 255 255 / 60%);
    background: rgb(255 253 247 / 74%);
    box-shadow: 0 18px 50px rgb(6 68 45 / 10%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ③ タイトルに白い縁を追加 */
.hero__title-name {
    paint-order: stroke fill;
    -webkit-text-stroke: 7px rgb(255 255 255 / 95%);
    text-shadow: 0 5px 12px rgb(6 68 45 / 10%);
}

/* ④ 白丸の周囲に葉っぱを散らす */
.hero__leaf--01 {
    top: 20%;
    left: 15%;
    width: clamp(48px, 4vw, 65px);
}

.hero__leaf--02 {
    top: 18%;
    right: auto;
    bottom: auto;
    left: 38%;
    width: clamp(42px, 3.6vw, 58px);
    animation-delay: -2.5s;
}

.hero__leaves--02 {
    top: auto;
    right: auto;
    bottom: 10%;
    left: 20%;
    width: 16%;
    z-index: 5;
    filter: drop-shadow(0 6px 8px rgb(6 68 45 / 10%));
    animation-delay: -3.2s;
}

/* ⑤ 吹き出しを顔から離して左下へ */
.hero__speech {
    top: 9%;
    left: -16%;
    transform: rotate(-4deg);
}

/* 少し狭いPCでの調整 */
@media (max-width: 1240px) {
    .hero__content::before {
        width: 500px;
    }

    .hero__title-name {
        -webkit-text-stroke-width: 6px;
    }

}

/* ==============================
   SP Header / Menu
============================== */
.sp-header,
.sp-menu {
    display: none;
}

@media (max-width: 767px) {

    /* ページ全体
  ------------------------------ */
    body.is-menu-open {
        overflow: hidden;
    }

    /* SPヘッダー
  ------------------------------ */
    .sp-header {
        position: fixed;
        z-index: calc(var(--z-menu) + 1);
        top: 10px;
        right: 10px;
        left: 10px;
        display: block;
    }

    .sp-header__inner {
        display: flex;
        width: 100%;
        min-height: 68px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 7px 6px 12px;
        border: 1px solid rgb(11 93 59 / 18%);
        border-radius: var(--radius-pill);
        background: rgb(255 253 247 / 96%);
        box-shadow: 0 10px 30px rgb(6 68 45 / 16%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* SPロゴ
  ------------------------------ */
    .sp-header__logo {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 5px;
    }

    .sp-header__logo-image {
        width: 42px;
        height: 52px;
        flex: 0 0 auto;
        object-fit: contain;
    }

    .sp-header__logo-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .sp-header__logo-name {
        color: var(--color-green-dark);
        font-family: var(--font-rounded);
        font-size: clamp(18px, 5.6vw, 22px);
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .sp-header__logo-sub {
        margin-top: 3px;
        color: var(--color-green);
        font-size: 5px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* ハンバーガーボタン
  ------------------------------ */
    .sp-header__menu-button {
        position: relative;
        display: grid;
        width: 54px;
        height: 54px;
        flex: 0 0 auto;
        place-items: center;
        border: 0;
        border-radius: 50%;
        color: var(--color-white);
        background: var(--color-green);
        box-shadow: 0 7px 16px rgb(6 68 45 / 22%);
        cursor: pointer;
        transition:
            background-color var(--transition),
            box-shadow var(--transition),
            transform var(--transition);
    }

    .sp-header__menu-button:active {
        transform: scale(0.94);
    }

    .sp-header__menu-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 29px;
    }

    /* ボタン上部の芽 */
    .sp-header__menu-sprout {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 9px;
        border-radius: var(--radius-pill);
        background: var(--color-white);
        transform: translateX(-50%);
        transition:
            opacity var(--transition),
            transform var(--transition);
    }

    .sp-header__menu-sprout::before,
    .sp-header__menu-sprout::after {
        position: absolute;
        top: 0;
        width: 9px;
        height: 5px;
        background: var(--color-white);
        content: "";
    }

    .sp-header__menu-sprout::before {
        right: 0;
        border-radius: 90% 10% 90% 10%;
        transform: translateX(-1px) rotate(18deg);
        transform-origin: right bottom;
    }

    .sp-header__menu-sprout::after {
        left: 0;
        border-radius: 10% 90% 10% 90%;
        transform: translateX(1px) rotate(-18deg);
        transform-origin: left bottom;
    }

    /* ハンバーガーの3本線 */
    .sp-header__menu-line {
        position: absolute;
        left: 50%;
        display: block;
        width: 24px;
        height: 2px;
        border-radius: var(--radius-pill);
        background: var(--color-white);
        transform: translateX(-50%);
        transition:
            top var(--transition),
            opacity var(--transition),
            transform var(--transition);
    }

    .sp-header__menu-line--01 {
        top: 13px;
    }

    .sp-header__menu-line--02 {
        top: 20px;
    }

    .sp-header__menu-line--03 {
        top: 27px;
    }

    /* 開いたときの×印 */
    .sp-header__menu-button.is-open {
        background: var(--color-green-dark);
        box-shadow: 0 9px 20px rgb(6 68 45 / 28%);
    }

    .sp-header__menu-button.is-open .sp-header__menu-sprout {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px) scale(0.7);
    }

    .sp-header__menu-button.is-open .sp-header__menu-line--01 {
        top: 19px;
        transform: translateX(-50%) rotate(45deg);
    }

    .sp-header__menu-button.is-open .sp-header__menu-line--02 {
        opacity: 0;
    }

    .sp-header__menu-button.is-open .sp-header__menu-line--03 {
        top: 19px;
        transform: translateX(-50%) rotate(-45deg);
    }

    /* 全画面メニュー
  ------------------------------ */
    .sp-menu {
        position: fixed;
        z-index: var(--z-menu);
        inset: 0;
        display: block;
        overflow-y: auto;
        padding: 92px 14px 20px;
        background:
            radial-gradient(circle at 15% 10%,
                rgb(255 255 255 / 55%),
                transparent 34%),
            linear-gradient(145deg,
                #fff9bf 0%,
                #fff2a2 55%,
                #fff7c6 100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px);
        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            transform 0.35s ease;
    }

    .sp-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .sp-menu__inner {
        width: 100%;
        max-width: 390px;
        margin-inline: auto;
    }

    .sp-menu__list {
        overflow: hidden;
        border: 1px solid rgb(11 93 59 / 15%);
        border-radius: 24px;
        background: rgb(255 250 196 / 76%);
        box-shadow: 0 14px 35px rgb(101 91 14 / 12%);
    }

    .sp-menu__item {
        opacity: 0;
        transform: translateY(12px);
        transition:
            opacity 0.35s ease,
            transform 0.35s ease;
    }

    .sp-menu__item:not(:last-child) {
        border-bottom: 1px solid rgb(11 93 59 / 14%);
    }

    .sp-menu.is-open .sp-menu__item {
        opacity: 1;
        transform: translateY(0);
    }

    .sp-menu.is-open .sp-menu__item:nth-child(1) {
        transition-delay: 0.05s;
    }

    .sp-menu.is-open .sp-menu__item:nth-child(2) {
        transition-delay: 0.1s;
    }

    .sp-menu.is-open .sp-menu__item:nth-child(3) {
        transition-delay: 0.15s;
    }

    .sp-menu.is-open .sp-menu__item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .sp-menu.is-open .sp-menu__item:nth-child(5) {
        transition-delay: 0.25s;
    }

    .sp-menu__link {
        display: grid;
        min-height: 82px;
        grid-template-columns: 68px minmax(0, 1fr) 26px;
        align-items: center;
        gap: 8px;
        padding: 5px 16px 5px 9px;
        color: var(--color-green-dark);
        transition:
            background-color var(--transition),
            transform var(--transition);
    }

    .sp-menu__link:active {
        background: rgb(255 255 255 / 40%);
        transform: scale(0.98);
    }

    .sp-menu__character {
        display: grid;
        width: 68px;
        height: 68px;
        place-items: center;
    }

    .sp-menu__character img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .sp-menu__item:first-child .sp-menu__character img {
        width: 58px;
        height: 58px;
    }

    .sp-menu__label {
        font-family: var(--font-rounded);
        font-size: clamp(17px, 4.9vw, 20px);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.03em;
    }

    .sp-menu__leaf {
        width: 22px;
        height: 18px;
        object-fit: contain;
        transform: rotate(-10deg);
    }

    /* 公式サイトボタン */
    .sp-menu__cta {
        display: flex;
        width: 100%;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 16px;
        padding: 12px 18px;
        border: 2px solid var(--color-green);
        border-radius: var(--radius-pill);
        color: var(--color-white);
        background: var(--color-green);
        box-shadow: 0 9px 20px rgb(6 68 45 / 20%);
        font-family: var(--font-rounded);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        opacity: 0;
        transform: translateY(12px);
        transition:
            opacity 0.35s ease 0.3s,
            background-color var(--transition),
            transform 0.35s ease 0.3s;
    }

    .sp-menu.is-open .sp-menu__cta {
        opacity: 1;
        transform: translateY(0);
    }

    /* ==============================
     SP Hero / First View
  ============================== */
    .hero {
        min-height: max(760px, 100svh);
    }

    .hero__background-image {
        object-position: 52% bottom;
    }

    .hero__background::after {
        background:
            linear-gradient(180deg,
                rgb(255 255 255 / 5%) 0%,
                rgb(255 255 255 / 12%) 58%,
                rgb(6 68 45 / 8%) 100%);
    }

    .hero__inner {
        display: flex;
        min-height: max(760px, 100svh);
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 112px;
        padding-bottom: 38px;
    }

    /* テキスト */
    .hero__content {
        width: 100%;
        max-width: 360px;
        padding: 48px 12px 42px;
    }

    .hero__content::before {
        width: min(88vw, 350px);
        aspect-ratio: 1.08 / 1;
        background: rgb(255 253 247 / 78%);
        box-shadow: 0 16px 40px rgb(6 68 45 / 11%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .hero__eyebrow {
        min-height: 28px;
        padding: 5px 13px;
        font-size: 11px;
        letter-spacing: 0.05em;
    }

    .hero__title {
        margin-top: 13px;
        font-size: clamp(42px, 12vw, 48px);
        line-height: 1.2;
    }

    .hero__title-name {
        -webkit-text-stroke-width: 4px;
    }

    .hero__lead {
        margin-top: 14px;
        font-size: clamp(15px, 4.2vw, 17px);
        line-height: 1.65;
    }

    /* トウザえもん */
    .hero__visual {
        width: 100%;
        align-self: center;
        margin-top: 54px;
    }

    .hero__character {
        width: min(82vw, 340px);
        max-height: none;
        margin: 0 auto -8px;
    }

    /* SP吹き出し */
    .hero__speech {
        top: -48px;
        left: 1%;
        min-width: 158px;
        padding: 11px 16px;
        border-width: 2px;
        border-radius: 34px;
        font-size: 14px;
    }

    .hero__speech::after {
        right: 28px;
        bottom: -14px;
        width: 20px;
        height: 17px;
    }

    /* SP装飾 */
    .hero__leaf--01 {
        top: 14%;
        left: 3%;
        width: 42px;
    }

    .hero__leaf--02 {
        top: 34%;
        right: 5%;
        bottom: auto;
        left: auto;
        width: 36px;
    }

    .hero__leaves--01 {
        top: 11%;
        right: -38px;
        width: 110px;
        opacity: 0.72;
    }

    .hero__leaves--02 {
        bottom: 1%;
        left: -22px;
        width: 46%;
    }

    .hero__sparkle--01 {
        top: 48%;
        right: 8%;
        width: 24px;
    }

    .hero__sparkle--02 {
        right: auto;
        bottom: 30%;
        left: 6%;
        width: 20px;
    }

    /* スクロール */
    .hero__scroll {
        bottom: 8px;
    }

    .hero__scroll-line {
        height: 30px;
    }

    .sp-menu {
        z-index: 10000 !important;
    }

    .sp-header {
        z-index: 10001 !important;
        pointer-events: auto;
        isolation: isolate;
    }

    .sp-header__inner,
    .sp-header__menu-button {
        pointer-events: auto;
    }
}

.fv-credit {
    margin: 18px 0 0;
    color: rgba(0, 76, 55, 0.68);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

@media (max-width: 767px) {
    .fv-credit {
        margin-top: 12px;
        font-size: 9px;
    }
}

/* ==================================================
   ABOUT / PROFILE
================================================== */

.about {
    --about-green: #00583f;
    --about-green-light: #25933f;
    --about-yellow: #fff17a;
    --about-orange: #f5a900;
    --about-cream: #fffaf0;
    --about-border: #8ebc68;

    position: relative;
    z-index: 1;
    padding: 150px 0 160px;
    overflow: hidden;
    scroll-margin-top: 130px;
    background:
        radial-gradient(circle at 90% 14%,
            rgba(255, 222, 92, 0.2) 0%,
            rgba(255, 222, 92, 0) 28%),
        radial-gradient(circle at 8% 70%,
            rgba(115, 190, 88, 0.12) 0%,
            rgba(115, 190, 88, 0) 25%),
        linear-gradient(180deg,
            #fffdf6 0%,
            #fff8e7 100%);
}

/* FVとの境目 */
.about::before {
    position: absolute;
    top: -42px;
    left: -5%;
    width: 110%;
    height: 84px;
    background-color: #fffdf6;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    content: "";
}

.about__inner {
    position: relative;
    z-index: 2;
}

/* ==================================================
   見出し
================================================== */

.about__heading {
    position: relative;
    z-index: 4;
    width: fit-content;
}

.about__heading-en {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--about-green);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.about__heading-en::before,
.about__heading-en::after {
    display: block;
    color: var(--about-orange);
    font-size: 18px;
    line-height: 1;
    content: "✦";
}

.about__heading-en::after {
    font-size: 11px;
}

.about__title {
    position: relative;
    margin: 0;
    padding-bottom: 14px;
    color: var(--about-green);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(46px, 4.2vw, 68px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.05em;
}

.about__title span {
    margin-right: 0.08em;
}

.about__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 92%;
    height: 6px;
    background-color: var(--about-orange);
    border-radius: 999px;
    transform: rotate(-1deg);
    content: "";
}

/* ==================================================
   自己紹介
================================================== */

.about__introduction {
    position: relative;
    z-index: 4;
    width: min(100%, 440px);
    margin-top: 30px;
    color: #173f32;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.03em;
}

.about__introduction p {
    margin: 0;
}

.about__introduction p+p {
    margin-top: 14px;
}

.about__introduction strong {
    position: relative;
    display: inline;
    z-index: 1;
    color: var(--about-green-light);
    font-size: 1.08em;
    font-weight: 900;
}

.about__introduction strong::after {
    position: absolute;
    z-index: -1;
    right: -4px;
    bottom: 1px;
    left: -4px;
    height: 8px;
    background-color: var(--about-yellow);
    content: "";
}

/* ==================================================
   プロフィール全体
================================================== */

.about__profile-board {
    display: grid;
    grid-template-columns:
        minmax(220px, 270px) minmax(600px, 1fr) minmax(220px, 270px);
    align-items: start;
    gap: 28px;
    margin-top: -150px;
}

/* ==================================================
   中央キャラクター
================================================== */

.about__profile {
    position: relative;
    min-width: 0;
    min-height: 740px;
}

.about__profile-label {
    position: absolute;
    z-index: 4;
    top: 22px;
    left: 50%;
    margin: 0;
    padding: 7px 24px;
    color: #ffffff;
    background-color: var(--about-green);
    border-radius: 999px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    transform: translateX(-50%);
}

.about__character {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    width: min(100%, 560px);
    transform: translateX(-50%);
}

.about__character::before {
    position: absolute;
    z-index: -1;
    bottom: 2%;
    left: 50%;
    width: 72%;
    height: 10%;
    background-color: rgba(0, 79, 55, 0.12);
    border-radius: 50%;
    filter: blur(12px);
    transform: translateX(-50%);
    content: "";
}

.about__character-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ==================================================
   プロフィール情報
================================================== */

.about__facts {
    margin: 0;
}

.about__fact {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 220px;
    margin: 0;
    padding: 8px 12px;
    color: var(--about-green);
    background-color: rgba(255, 253, 246, 0.9);
    border-radius: 12px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    box-shadow: 0 5px 16px rgba(0, 70, 48, 0.06);
}

.about__fact dt {
    flex-shrink: 0;
    margin: 0;
    font-weight: 900;
}

.about__fact dt::after {
    content: "：";
}

.about__fact dd {
    margin: 0;
}

.about__fact small {
    font-size: 10px;
    line-height: 1.5;
}

/* キャラクターへ伸びる線 */

.about__fact::before {
    position: absolute;
    top: 50%;
    width: 54px;
    height: 2px;
    background-color: var(--about-green);
    content: "";
}

.about__fact::after {
    position: absolute;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background-color: var(--about-green);
    border-radius: 50%;
    content: "";
}

/* 左側のプロフィール */

.about__fact--sprout::before,
.about__fact--dream::before {
    right: -54px;
}

.about__fact--sprout::after,
.about__fact--dream::after {
    right: -58px;
}

/* 右側のプロフィール */

.about__fact--height::before,
.about__fact--weight::before,
.about__fact--gender::before,
.about__fact--birthday::before,
.about__fact--age::before {
    left: -54px;
}

.about__fact--height::after,
.about__fact--weight::after,
.about__fact--gender::after,
.about__fact--birthday::after,
.about__fact--age::after {
    left: -58px;
}

/* 各項目の配置 */

.about__fact--sprout {
    top: 105px;
    left: 0;
}

.about__fact--height {
    top: 110px;
    right: 5px;
}

.about__fact--weight {
    top: 205px;
    right: -10px;
}

.about__fact--gender {
    top: 310px;
    right: -8px;
}

.about__fact--birthday {
    top: 395px;
    right: -4px;
}

.about__fact--age {
    right: 20px;
    bottom: 100px;
}

.about__fact--dream {
    bottom: 36px;
    left: -4px;
    translate: clamp(-72px, calc(14vw - 266px), 0px) 0;
}

/* 左側の画像2枚を包む要素 */
@media (min-width: 768px) and (max-width: 1700px) {
    .about__scenes--left {
        scale: 0.92;
        transform-origin: left center;
    }
}

@media (min-width: 768px) and (max-width: 1450px) {
    .about__scenes--left {
        scale: 0.85;
    }
}

/* ==================================================
   周囲のシーン画像
================================================== */

.about__scenes {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 54px;
}

.about__scenes--left {
    padding-top: 285px;
}

.about__scenes--right {
    padding-top: 72px;
}

.about__scene {
    width: 100%;
    margin: 0;
}

.about__scene-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #ffffff;
    border: 5px solid #ffffff;
    outline: 1px solid rgba(91, 153, 68, 0.55);
    box-shadow:
        0 14px 30px rgba(0, 75, 51, 0.12),
        0 4px 10px rgba(0, 75, 51, 0.07);
}

.about__scene--sns .about__scene-image-wrap {
    border-radius: 58px 40px 65px 44px;
}

.about__scene--sports .about__scene-image-wrap {
    border-radius: 42px 68px 46px 62px;
}

.about__scene--daijuji .about__scene-image-wrap {
    border-radius: 66px 40px 54px 46px;
}

.about__scene--festival .about__scene-image-wrap {
    border-radius: 44px 64px 42px 68px;
}

.about__scene-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

@media (hover: hover) {
    .about__scene:hover .about__scene-image {
        filter: saturate(1.05);
        transform: scale(1.04);
    }
}

.about__scene-caption {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 94%;
    margin: -18px auto 0;
    padding: 8px 18px;
    color: var(--about-green);
    background-color: #fffef8;
    border: 2px solid var(--about-border);
    border-radius: 999px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0, 75, 51, 0.08);
}

.about__scene-caption span {
    display: inline-block;
    margin-right: 5px;
    color: #518d38;
    font-size: 12px;
}

.about__scene-caption--wide {
    border-radius: 20px;
}

.about__scene-caption--wide span {
    display: block;
    margin: 0 0 2px;
}

/* ==================================================
   装飾
================================================== */

.about__decorations {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.about__leaf,
.about__leaves,
.about__sparkle {
    position: absolute;
    display: block;
    height: auto;
}

.about__leaf--01 {
    top: 10%;
    right: 5%;
    width: 72px;
    transform: rotate(18deg);
}

.about__leaf--02 {
    top: 48%;
    left: 3%;
    width: 58px;
    transform: rotate(-24deg);
}

.about__leaves--01 {
    top: 20%;
    right: -28px;
    width: 150px;
    opacity: 0.75;
}

.about__leaves--02 {
    bottom: 8%;
    left: -35px;
    width: 165px;
    opacity: 0.7;
    transform: rotate(15deg);
}

.about__sparkle--01 {
    top: 7%;
    left: 8%;
    width: 30px;
}

.about__sparkle--02 {
    right: 7%;
    bottom: 15%;
    width: 22px;
    animation-delay: 0.8s;
}

/* ==================================================
   タブレット
================================================== */

@media screen and (max-width: 1100px) {
    .about {
        padding: 120px 0 130px;
    }

    .about__profile-board {
        display: flex;
        flex-direction: column;
        gap: 54px;
        margin-top: 55px;
    }

    .about__profile {
        order: 1;
        width: 100%;
        min-height: auto;
    }

    .about__profile-label {
        position: relative;
        top: auto;
        left: auto;
        width: fit-content;
        margin: 0 auto 28px;
        transform: none;
    }

    .about__character {
        position: relative;
        bottom: auto;
        left: auto;
        width: min(100%, 480px);
        margin: 0 auto;
        transform: none;
    }

    .about__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 30px;
    }

    .about__fact {
        position: relative;
        inset: auto;
        max-width: none;
        min-height: 74px;
        padding: 14px 16px;
        background-color: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(111, 166, 77, 0.35);
        box-shadow: none;
    }

    .about__fact::before,
    .about__fact::after {
        display: none;
    }

    .about__fact--sprout,
    .about__fact--weight,
    .about__fact--birthday,
    .about__fact--dream {
        grid-column: 1 / -1;
    }

    .about__scenes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 28px;
        width: 100%;
        padding-top: 0;
    }

    .about__scenes--left {
        order: 2;
    }

    .about__scenes--right {
        order: 3;
    }

    .about__scene {
        max-width: 420px;
        margin-inline: auto;
    }
}

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

@media screen and (max-width: 767px) {
    .about {
        padding: 90px 0 105px;
        scroll-margin-top: 85px;
    }

    .about::before {
        top: -24px;
        height: 50px;
    }

    .about__heading-en {
        gap: 6px;
        margin-bottom: 6px;
        font-size: 12px;
    }

    .about__heading-en::before {
        font-size: 14px;
    }

    .about__heading-en::after {
        font-size: 8px;
    }

    .about__title {
        padding-bottom: 10px;
        font-size: clamp(36px, 11vw, 46px);
        line-height: 1.25;
    }

    .about__title::after {
        height: 4px;
    }

    .about__introduction {
        width: 100%;
        margin-top: 24px;
        font-size: 16px;
        line-height: 1.9;
    }

    .about__introduction p+p {
        margin-top: 10px;
    }

    .about__profile-board {
        gap: 44px;
        margin-top: 45px;
    }

    .about__profile-label {
        margin-bottom: 16px;
        padding: 6px 20px;
        font-size: 12px;
    }

    .about__character {
        width: min(100%, 330px);
    }

    .about__facts {
        grid-auto-flow: dense;
        gap: 10px;
        margin-top: 22px;
    }

    .about__fact {
        min-height: 66px;
        padding: 11px 12px;
        font-size: 13px;
        line-height: 1.55;
    }

    .about__fact small {
        font-size: 9px;
    }

    .about__scenes {
        gap: 32px 14px;
    }

    .about__scene-image-wrap {
        border-width: 4px;
    }

    .about__scene-caption {
        margin-top: -14px;
        padding: 7px 12px;
        font-size: 12px;
    }

    .about__scene-caption span {
        font-size: 10px;
    }

    .about__scene-caption--wide {
        max-width: 100%;
        font-size: 11px;
    }

    .about__leaf--01 {
        top: 5%;
        right: -10px;
        width: 50px;
    }

    .about__leaf--02 {
        top: 42%;
        left: -16px;
        width: 42px;
    }

    .about__leaves--01 {
        top: 25%;
        right: -45px;
        width: 110px;
    }

    .about__leaves--02 {
        bottom: 5%;
        left: -55px;
        width: 120px;
    }

    .about__sparkle--01 {
        top: 3%;
        left: 4%;
        width: 20px;
    }

    .about__sparkle--02 {
        right: 4%;
        bottom: 12%;
        width: 17px;
    }
}

/* 390px前後ではシーン画像を1列表示 */

@media screen and (max-width: 480px) {
    .about__scenes {
        grid-template-columns: 1fr;
        width: min(100%, 350px);
        margin-inline: auto;
    }

    .about__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about__fact--sprout,
    .about__fact--weight,
    .about__fact--birthday,
    .about__fact--dream {
        grid-column: 1 / -1;
    }
}

/* 動きを減らす設定 */

@media (prefers-reduced-motion: reduce) {
    .about__scene-image {
        transition: none;
    }

    .about__scene:hover .about__scene-image {
        transform: none;
    }
}

/* ==================================================
   ABOUTプロフィール配置 修正版
   ※ style.cssの一番最後に追加
================================================== */

/* -----------------------------------------------
   右上の基本情報
----------------------------------------------- */

.about__basic-data {
    position: absolute;
    z-index: 6;
    top: 72px;
    right: 0;
    width: 220px;
    margin: 0;
    color: var(--about-green);
    font-family: "Zen Maru Gothic", sans-serif;
}

.about__basic-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: baseline;
    gap: 6px;
    padding: 8px 2px 7px;
    border-bottom: 2px solid var(--about-orange);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.about__basic-row+.about__basic-row {
    margin-top: 4px;
}

.about__basic-row dt,
.about__basic-row dd {
    margin: 0;
}

.about__basic-row dt {
    white-space: nowrap;
}

.about__basic-row dt::after {
    content: "：";
}

.about__basic-row small {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    line-height: 1.45;
}

/* -----------------------------------------------
   線つきプロフィール共通
----------------------------------------------- */

.about__fact {
    --line-length: 54px;

    min-height: 0;
    padding: 5px 7px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 線 */

.about__fact::before {
    display: block;
    width: var(--line-length);
}

/* 線の先端の丸 */

.about__fact::after {
    display: block;
}

/* 左側からキャラクターへ伸びる線 */

.about__fact--sprout::before,
.about__fact--dream::before {
    right: calc(0px - var(--line-length));
    left: auto;
}

.about__fact--sprout::after,
.about__fact--dream::after {
    right: calc(-4px - var(--line-length));
    left: auto;
}

/* 右側からキャラクターへ伸びる線 */

.about__fact--height::before,
.about__fact--weight::before {
    right: auto;
    left: calc(0px - var(--line-length));
}

.about__fact--height::after,
.about__fact--weight::after {
    right: auto;
    left: calc(-4px - var(--line-length));
}

/* -----------------------------------------------
   PCでの配置
----------------------------------------------- */

.about__fact--sprout {
    --line-length: 82px;

    top: 118px;
    right: auto;
    bottom: auto;
    left: 0;
    translate: clamp(-72px, calc(15vw - 266px), 0px) 0;
}

.about__fact--height {
    --line-length: 88px;

    top: 245px;
    right: 202px;
    bottom: auto;
    left: auto;
}

.about__fact--weight {
    --line-length: 82px;

    top: 340px;
    right: -8px;
    bottom: auto;
    left: auto;
}

.about__fact--dream {
    --line-length: 70px;

    top: auto;
    right: auto;
    bottom: 34px;
    left: -4px;
}

/* ==================================================
   タブレット
================================================== */

@media screen and (max-width: 1100px) {
    /*
     * 以前のカード型プロフィールを解除し、
     * タブレットでも線つき配置に戻す
    */

    .about__profile {
        position: relative;
        order: 1;
        width: min(100%, 680px);
        min-height: 650px;
        margin-inline: auto;
    }

    .about__profile-label {
        position: absolute;
        z-index: 7;
        top: 0;
        left: 50%;
        width: fit-content;
        margin: 0;
        transform: translateX(-50%);
    }

    .about__basic-data {
        top: 58px;
        right: 0;
        width: 205px;
    }

    .about__basic-row {
        grid-template-columns: 60px 1fr;
        font-size: 13px;
    }

    .about__character {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: min(100%, 440px);
        margin: 0;
        transform: translateX(-50%);
    }

    .about__facts {
        display: block;
        margin: 0;
    }

    .about__fact {
        position: absolute;
        display: flex;
        max-width: 190px;
        min-height: 0;
        padding: 4px 6px;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    .about__fact::before,
    .about__fact::after {
        display: block;
    }

    .about__fact--sprout {
        --line-length: 78px;

        top: 195px;
        right: auto;
        bottom: auto;
        left: 0;
    }

    .about__fact--height {
        --line-length: 78px;

        top: 275px;
        right: 0;
        bottom: auto;
        left: auto;
    }

    .about__fact--weight {
        --line-length: 70px;

        top: 365px;
        right: 0;
        bottom: auto;
        left: auto;
    }

    .about__fact--dream {
        --line-length: 65px;

        top: auto;
        right: auto;
        bottom: 35px;
        left: 0;
    }
}

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

@media screen and (max-width: 767px) {
    /*
     * SPもカード型にせず、
     * ヤクルトマンのように中央キャラの周囲へ配置
    */

    .about__profile-board {
        margin-top: 42px;
    }

    .about__profile {
        width: 100%;
        min-height: 535px;
    }

    .about__profile-label {
        top: 0;
        padding: 5px 18px;
        font-size: 11px;
    }

    .about__basic-data {
        top: 48px;
        right: 0;
        width: 158px;
    }

    .about__basic-row {
        grid-template-columns: 45px 1fr;
        gap: 3px;
        padding: 5px 1px;
        border-bottom-width: 2px;
        font-size: 10px;
        line-height: 1.4;
    }

    .about__basic-row+.about__basic-row {
        margin-top: 2px;
    }

    .about__basic-row small {
        font-size: 7px;
    }

    .about__character {
        top: 175px;
        bottom: auto;
        width: min(100%, 270px);
    }

    .about__fact {
        font-size: 10px;
        line-height: 1.45;
    }

    .about__fact dt {
        white-space: nowrap;
    }

    .about__fact--sprout {
        --line-length: 40px;

        top: 145px;
        right: auto;
        bottom: auto;
        left: 0;
        max-width: 130px;
    }

    .about__fact--height {
        --line-length: 44px;

        top: 245px;
        right: 0;
        bottom: auto;
        left: auto;
        max-width: 84px;
    }

    .about__fact--weight {
        --line-length: 46px;

        top: 320px;
        right: -13px;
        bottom: auto;
        left: auto;
        max-width: 136px;
    }

    .about__fact--dream {
        --line-length: 42px;

        top: 431px;
        right: auto;
        bottom: auto;
        left: 0;
        max-width: 142px;
    }

    /*
     * プロフィール後のシーン画像
     */

    .about__scenes--left,
    .about__scenes--right {
        padding-top: 0;
    }
}

/* ==================================================
   390px前後
================================================== */

@media screen and (max-width: 480px) {
    .about__profile {
        min-height: 520px;
    }

    .about__character {
        top: 175px;
        width: 255px;
    }

    .about__fact--sprout {
        --line-length: 20px;

        max-width: 122px;
    }

    .about__fact--height {
        --line-length: 57px;
    }

    .about__fact--weight {
        --line-length: 50px;

        max-width: 127px;
    }

    .about__fact--dream {
        --line-length: 36px;

        max-width: 132px;
    }
}

/* ==================================================
   SP：「夢」から伸びる線を折れ線に変更
================================================== */

@media screen and (max-width: 767px) {
    .about__fact--dream {
        --dream-line-width: 58px;
        --dream-line-height: 38px;
    }

    /*
     * 文章の右側から横へ進み、
     * 右端で上方向へ折れる
    */

    .about__fact--dream::before {
        position: absolute;
        top: auto;
        right: calc(0px - var(--dream-line-width));
        bottom: 44%;
        left: auto;
        display: block;
        width: var(--dream-line-width);
        height: var(--dream-line-height);
        background-color: transparent;
        border-right: 2px solid var(--about-green);
        border-bottom: 2px solid var(--about-green);
        box-sizing: border-box;
        content: "";
    }

    /*
     * 折れ線の先端にある丸
    */

    .about__fact--dream::after {
        position: absolute;
        top: auto;
        right: calc(-4px - var(--dream-line-width));
        bottom: calc(44% + var(--dream-line-height) - 4px);
        left: auto;
        display: block;
        width: 8px;
        height: 8px;
        background-color: var(--about-green);
        border-radius: 50%;
        content: "";
    }
}

/* 390px前後では少し短くする */

@media screen and (max-width: 480px) {
    .about__fact--dream {
        --dream-line-width: 52px;
        --dream-line-height: 34px;
    }
}

/* ABOUT：タブレット・SPの左文字切れ対策 */
@media screen and (max-width: 1100px) {

    .about__fact--sprout,
    .about__fact--dream {
        left: 12px !important;
        translate: none !important;
    }
}

/* ==================================================
   ABOUT：説明位置と接続先の変更
   CSSの一番最後に追加
================================================== */

/* -----------------------------------------------
   左側から伸びる線：頭の芽・体重
----------------------------------------------- */

.about__fact--sprout::before,
.about__fact--weight::before {
    top: 50%;
    right: calc(0px - var(--line-length));
    bottom: auto;
    left: auto;
    width: var(--line-length);
    height: 2px;
    border: 0;
    background-color: var(--about-green);
}

.about__fact--sprout::after,
.about__fact--weight::after {
    top: calc(50% - 4px);
    right: calc(-4px - var(--line-length));
    bottom: auto;
    left: auto;
}

/* -----------------------------------------------
   右側から伸びる線：身長・夢
----------------------------------------------- */

.about__fact--height::before,
.about__fact--dream::before {
    top: 50%;
    right: auto;
    bottom: auto;
    left: calc(0px - var(--line-length));
    width: var(--line-length);
    height: 2px;
    border: 0;
    background-color: var(--about-green);
}

.about__fact--height::after,
.about__fact--dream::after {
    top: calc(50% - 4px);
    right: auto;
    bottom: auto;
    left: calc(-4px - var(--line-length));
}

/* -----------------------------------------------
   PC
----------------------------------------------- */

/* 左から、芽の中央へ */

.about__fact--sprout {
    --line-length: 140px;

    top: 225px;
    right: auto;
    bottom: auto;
    left: -79px;
}

/* 右から、芽のてっぺんへ */

.about__fact--height {
    --line-length: 130px;

    top: 118px;
    right: 252px;
    bottom: auto;
    left: auto;
}

/* 左から、お腹へ */

.about__fact--weight {
    --line-length: 70px;

    top: 465px;
    right: auto;
    bottom: auto;
    left: -30px;
}

/* 右から、小判へ */

.about__fact--dream {
    --line-length: 115px;

    top: auto;
    right: -8px;
    bottom: 82px;
    left: auto;
    translate: none !important;
}

/* -----------------------------------------------
   Tablet
----------------------------------------------- */

@media screen and (max-width: 1100px) {
    .about__fact--sprout {
        --line-length: 130px;

        top: 250px;
        right: auto;
        bottom: auto;
        left: -26px !important;
    }

    .about__fact--height {
        --line-length: 250px;

        top: 205px;
        right: 212px;
        bottom: auto;
        left: auto;
    }

    .about__fact--weight {
        --line-length: 100px;

        top: 465px;
        right: auto;
        bottom: auto;
        left: -35px;
    }

    .about__fact--dream {
        --line-length: 140px;

        top: auto;
        right: 0;
        bottom: 75px;
        left: auto !important;
        translate: none !important;
    }
}

/* -----------------------------------------------
   SP
----------------------------------------------- */

@media screen and (max-width: 767px) {
    /* 左から、芽の中央へ */

    .about__fact--sprout {
        --line-length: 52px;

        top: 195px;
        right: auto;
        bottom: auto;
        left: -19px !important;
        max-width: 130px;
    }

    /* 右から、芽のてっぺんへ */

    .about__fact--height {
        --line-length: 100px;

        top: 165px;
        right: 30px;
        bottom: auto;
        left: auto;
        max-width: 84px;
    }

    /* 左から、お腹へ */

    .about__fact--weight {
        --line-length: 35px;

        top: 335px;
        right: auto;
        bottom: auto;
        left: -14px;
        max-width: 127px;
    }

    /* 右から、小判へ */

    .about__fact--dream {
        --line-length: 45px;

        top: 385px;
        right: -14px;
        bottom: auto;
        left: auto !important;
        max-width: 142px;
        translate: none !important;
    }
}

/* -----------------------------------------------
   390px前後
----------------------------------------------- */

@media screen and (max-width: 480px) {
    .about__fact--sprout {
        --line-length: 26px;
    }

    .about__fact--height {
        --line-length: 76px;
    }

    .about__fact--weight {
        --line-length: 18px;
    }

    .about__fact--dream {
        --line-length: 25px;
        max-width: 132px;
    }
}

/* ==================================================
   ABOUT：線の位置・長さ 最終微調整
================================================== */

/* PC */

@media screen and (min-width: 1101px) {
    /* 芽の中央へ */

    .about__fact--sprout {
        --line-length: 96px;

        top: 203px;
    }

    /* 芽のてっぺんへ */

    .about__fact--height {
        --line-length: 64px;

        top: 137px;
    }

    /* お腹の左側へ */

    .about__fact--weight {
        --line-length: 44px;

        top: 591px;
    }

    /* 小判の右側へ */

    .about__fact--dream {
        --line-length: 135px;

        bottom: 82px;
    }
}

/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1100px) {
    .about__fact--sprout {
        --line-length: 130px;

        top: 250px;
    }

    .about__fact--height {
        --line-length: 85px;

        top: 179px;
    }

    .about__fact--weight {
        --line-length: 60px;

        top: 495px;
    }

    .about__fact--dream {
        --line-length: 123px;

        top: auto;
        bottom: 41px;
    }
}

/* SP */

@media screen and (max-width: 767px) {
    /* 左の文章から芽の中央まで */

    .about__fact--sprout {
        --line-length: 22px;

        top: 195px;
    }

    /* 右の文章から芽のてっぺんまで */

    .about__fact--height {
        --line-length: 99px;

        top: 171px;
    }

    /* 左の文章からお腹まで */

    .about__fact--weight {
        --line-length: 20px;

        top: 376px;
    }

    /* 右の文章から小判まで */

    .about__fact--dream {
        --line-length: 38px;

        top: 385px;
        bottom: auto;
    }
}

/* ========================================
   SECRET
   トウザえもんのひみつ
======================================== */
.secret {
    --secret-green: #00452f;
    --secret-green-dark: #002f1d;
    --secret-green-light: #0b6b4b;
    --secret-cream: #fff6d9;
    --secret-yellow: #ffb400;
    --secret-line: rgba(255, 246, 217, 0.3);

    position: relative;
    z-index: 1;
    overflow: hidden;
    scroll-margin-top: 120px;
    padding: clamp(100px, 8vw, 150px) 0 120px;
    color: var(--secret-cream);
    background-color: var(--secret-green-dark);
    background-image: url("../images/secret-bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.secret::before,
.secret__lineart {
    display: none;
}

.secret__inner {
    position: relative;
    z-index: 2;
}

/* 見出し
---------------------------------------- */
.secret__header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin-right: auto;
    margin-bottom: clamp(45px, 5vw, 75px);
    margin-left: auto;
    text-align: center;
}

.secret__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--secret-cream);
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.secret__eyebrow span {
    color: var(--secret-yellow);
}

.secret__title {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    color: var(--secret-cream);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(42px, 5.2vw, 78px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.secret__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 78%;
    height: 7px;
    border-radius: 999px;
    background-color: var(--secret-yellow);
    content: "";
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.secret__lead {
    margin-top: 28px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.secret__lead strong {
    position: relative;
    display: inline-block;
    color: var(--secret-yellow);
    font-size: 1.2em;
    font-weight: 900;
}

.secret__lead strong::after {
    position: absolute;
    right: 0;
    bottom: 0.08em;
    left: 0;
    z-index: -1;
    height: 0.22em;
    border-radius: 999px;
    background-color: rgba(255, 180, 0, 0.25);
    content: "";
}

/* コンテンツ全体
---------------------------------------- */
.secret__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-areas:
        "emotion"
        "origin"
        "steps";
    grid-template-columns: minmax(0, 1fr);
    gap: 45px;
    align-items: center;
}

/* 名前の由来
---------------------------------------- */
.secret__origin {
    grid-area: origin;
    width: min(100%, 700px);
    margin-inline: auto;
}

.secret__formula {
    display: grid;
    grid-template-areas:
        "university plus emotion equal tozaemon";
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 35px 24px 28px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    color: var(--secret-green);
    background-color: rgba(255, 250, 232, 0.97);
    box-shadow:
        0 18px 45px rgba(0, 25, 17, 0.3),
        inset 0 0 30px rgba(255, 180, 0, 0.07);
}

.secret__formula-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.secret__formula-item--university {
    grid-area: university;
}

.secret__formula-item--emotion {
    grid-area: emotion;
}

.secret__formula-item--tozaemon {
    grid-area: tozaemon;
}

.secret__formula>.secret__formula-symbol:nth-child(2) {
    grid-area: plus;
}

.secret__formula>.secret__formula-symbol:nth-child(4) {
    grid-area: equal;
}

.secret__formula-logo {
    width: min(100%, 115px);
    height: 100px;
    object-fit: contain;
}

.secret__formula-label,
.secret__formula-word,
.secret__formula-name {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 800;
    white-space: nowrap;
}

.secret__formula-label {
    margin-top: 10px;
    font-size: 14px;
}

.secret__formula-word {
    margin-bottom: 12px;
    font-size: clamp(17px, 1.4vw, 22px);
    letter-spacing: 0.08em;
}

.secret__formula-heart {
    width: 82px;
    aspect-ratio: 1;
    object-fit: contain;
    animation: secret-heart 2.4s ease-in-out infinite;
}

.secret__formula-name {
    margin-bottom: 5px;
    font-size: clamp(15px, 1.3vw, 20px);
}

.secret__formula-character {
    width: 115px;
    height: 135px;
    object-fit: contain;
    object-position: center bottom;
}

.secret__formula-symbol {
    color: var(--secret-green);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(30px, 2.8vw, 46px);
    font-weight: 900;
    line-height: 1;
}

/* 5つの気持ち
---------------------------------------- */
.secret__emotion {
    grid-area: emotion;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.secret__emotion-image {
    display: block;
    width: min(100%, 620px);
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 18, 12, 0.3));
    animation: secret-float 5s ease-in-out infinite;
}

/* 芽が育つ3ステップ
---------------------------------------- */
.secret__steps {
    grid-area: steps;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 12px;
    border: 1px solid var(--secret-line);
    border-radius: 20px;
    background-color: rgba(0, 35, 24, 0.38);
    box-shadow: 0 16px 35px rgba(0, 25, 17, 0.22);
    list-style: none;
}

.secret__step {
    position: relative;
    min-width: 0;
    padding: 12px 15px 15px;
}

.secret__step:not(:last-child) {
    border-right: 1px dashed rgba(255, 246, 217, 0.26);
}

.secret__step:not(:last-child)::after {
    position: absolute;
    top: 58%;
    right: -16px;
    z-index: 3;
    width: 30px;
    height: 30px;
    background-color: var(--secret-yellow);
    clip-path: polygon(0 12%,
            66% 12%,
            66% 0,
            100% 50%,
            66% 100%,
            66% 88%,
            0 88%);
    content: "";
    transform: translateY(-50%);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18));
}

.secret__step-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-bottom: 10px;
}

.secret__step-number {
    display: grid;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid var(--secret-yellow);
    border-radius: 50%;
    color: var(--secret-yellow);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 900;
}

.secret__step-title {
    color: var(--secret-cream);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(13px, 0.9vw, 16px);
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.secret__step-visual {
    overflow: hidden;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.04);
}

.secret__step-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

/* ラストメッセージ
---------------------------------------- */
.secret__message {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 780px;
    margin: 65px 0 0 auto;
    padding-left: 35px;
    color: var(--secret-cream);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(22px, 2vw, 36px);
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

/* .secret__message::before {
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background-color: var(--secret-yellow);
    content: "";
} */

.secret__message strong {
    position: relative;
    display: inline-block;
    color: var(--secret-yellow);
    font-size: 1.15em;
    font-weight: 900;
}

.secret__message strong::after {
    position: absolute;
    right: -8px;
    bottom: -5px;
    left: -8px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--secret-yellow);
    content: "";
    transform: rotate(-2deg);
}

/* 装飾
---------------------------------------- */
.secret__decorations {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.secret__leaf,
.secret__sparkle {
    position: absolute;
    display: block;
    height: auto;
}

.secret__sparkle {
    animation: secret-sparkle 2.5s ease-in-out infinite;
}

.secret__sparkle--02 {
    animation-delay: -0.8s;
}

.secret__sparkle--03 {
    animation-delay: -1.5s;
}

.secret .sp-only {
    display: none;
}

/* ホバー
---------------------------------------- */
@media (hover: hover) {
    .secret__step:hover .secret__step-image {
        transform: translateY(-5px) scale(1.03);
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
    }
}

/* 768px以上：改行の安定化
---------------------------------------- */
@media screen and (min-width: 768px) {
    .secret__step-heading {
        gap: 6px;
    }

    .secret__step-title {
        font-size: clamp(12px, 0.95vw, 15px);
        letter-spacing: 0;
        white-space: nowrap;
        word-break: keep-all;
    }

    .secret__message {
        width: auto;
        max-width: none;
        font-size: clamp(22px, 2.2vw, 34px);
        white-space: nowrap;
        word-break: keep-all;
        text-align: right;
    }
}

/* PC
---------------------------------------- */
@media screen and (min-width: 1101px) {
    .secret {
        padding-top: 110px;
        padding-bottom: 85px;
    }

    .secret__inner {
        display: grid;
        grid-template-areas:
            "header emotion"
            "origin steps"
            "message message";
        grid-template-columns:
            minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
        column-gap: 50px;
        row-gap: 30px;
    }

    .secret__content {
        display: contents;
    }

    .secret__header {
        grid-area: header;
        align-self: center;
        max-width: none;
        margin: 0;
        text-align: left;
    }

    .secret__eyebrow {
        justify-content: flex-start;
    }

    .secret__title {
        font-size: clamp(50px, 3.7vw, 62px);
        white-space: nowrap;
    }

    .secret__lead {
        margin-top: 22px;
        font-size: clamp(21px, 1.55vw, 26px);
        line-height: 1.65;
    }

    .secret__emotion {
        grid-area: emotion;
        align-self: center;
    }

    .secret__emotion-image {
        width: min(100%, 500px);
    }

    .secret__origin {
        grid-area: origin;
        align-self: start;
        width: 100%;
        margin-inline: 0;
    }

    .secret__formula {
        gap: 10px;
        padding: 24px 20px 20px;
        border-radius: 20px;
    }

    .secret__formula-logo {
        width: 95px;
        height: 78px;
    }

    .secret__formula-heart {
        width: 66px;
    }

    .secret__formula-character {
        width: 95px;
        height: 105px;
    }

    .secret__formula-label {
        margin-top: 6px;
        font-size: 12px;
    }

    .secret__formula-word {
        margin-bottom: 8px;
        font-size: 17px;
    }

    .secret__formula-name {
        font-size: 15px;
    }

    .secret__formula-symbol {
        font-size: 34px;
    }

    .secret__steps {
        grid-area: steps;
        align-self: start;
        width: 100%;
        margin: 0;
    }

    .secret__step {
        padding: 10px 12px 12px;
    }

    .secret__step-heading {
        min-height: 42px;
        margin-bottom: 6px;
    }

    .secret__step-visual {
        border-radius: 12px;
    }

    .secret__message {
        grid-area: message;
        justify-self: end;
        width: max-content;
        max-width: 100%;
        margin: 22px 0 0;
        text-align: right;
    }
}

/* PCの中間幅
---------------------------------------- */
@media screen and (min-width: 1101px) and (max-width: 1350px) {
    .secret__inner {
        column-gap: 30px;
    }

    .secret__steps {
        padding: 8px;
    }

    .secret__step {
        padding-right: 8px;
        padding-left: 8px;
    }

    .secret__step-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .secret__step-title {
        font-size: 12px;
    }
}

/* タブレット
---------------------------------------- */
@media screen and (max-width: 1100px) {
    .secret__emotion-image {
        width: min(100%, 620px);
    }

    .secret__message {
        margin-right: auto;
        text-align: center;
    }
}

/* SP
---------------------------------------- */
@media screen and (max-width: 767px) {
    .secret {
        scroll-margin-top: 80px;
        padding: 78px 0 95px;
        background: var(--secret-green-dark);
    }

    .secret__header {
        margin-bottom: 38px;
    }

    .secret__eyebrow {
        gap: 7px;
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .secret__title {
        padding-bottom: 11px;
        font-size: clamp(32px, 8vw, 44px);
        line-height: 1.35;
    }

    .secret__title::after {
        left: 10%;
        width: 80%;
        height: 5px;
    }

    .secret__lead {
        margin-top: 22px;
        font-size: 18px;
        line-height: 1.8;
    }

    .secret__content {
        gap: 38px;
    }

    .secret__emotion-image {
        width: min(100%, 460px);
    }

    /* SP 名前の由来 */
    .secret__formula {
        grid-template-areas:
            "university plus emotion"
            "arrow arrow arrow"
            "tozaemon tozaemon tozaemon";
        grid-template-columns: 1fr auto 1fr;
        gap: 10px 8px;
        width: 100%;
        max-width: 355px;
        margin-inline: auto;
        padding: 24px 18px 20px;
        border-radius: 20px;
    }

    .secret__formula-item--tozaemon {
        margin-top: -2px;
    }

    .secret__formula>.secret__formula-symbol:nth-child(2) {
        align-self: center;
        font-size: 28px;
    }

    .secret__formula>.secret__formula-symbol:nth-child(4) {
        grid-area: arrow;
        justify-self: center;
        width: 30px;
        height: 36px;
        margin: 0;
        font-size: 0;
        background-color: var(--secret-green);
        clip-path: polygon(41% 0,
                59% 0,
                59% 57%,
                100% 57%,
                50% 100%,
                0 57%,
                41% 57%);
    }

    .secret__formula-logo {
        width: 82px;
        height: 72px;
    }

    .secret__formula-label {
        margin-top: 6px;
        font-size: 10px;
    }

    .secret__formula-word {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .secret__formula-heart {
        width: 62px;
    }

    .secret__formula-name {
        margin-bottom: 3px;
        font-size: 15px;
    }

    .secret__formula-character {
        width: 104px;
        height: 112px;
    }

    /* SP 3ステップ */
    .secret__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        width: 100%;
        padding: 10px 16px;
        border-radius: 20px;
    }

    .secret__step {
        padding: 22px 8px 35px;
    }

    .secret__step:not(:last-child) {
        border-right: 0;
        border-bottom: 1px dashed rgba(255, 246, 217, 0.3);
    }

    .secret__step:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -17px;
        width: 30px;
        height: 30px;
        transform: translateX(50%) rotate(90deg);
    }

    .secret__step-heading {
        min-height: auto;
        margin-bottom: 8px;
    }

    .secret__step-number {
        width: 28px;
        height: 28px;
    }

    .secret__step-title {
        font-size: 16px;
        white-space: normal;
        word-break: normal;
    }

    .secret__step-visual {
        width: min(100%, 300px);
        margin-inline: auto;
    }

    .secret__message {
        width: fit-content;
        max-width: 100%;
        margin: 52px auto 0;
        padding-left: 0;
        font-size: 22px;
        white-space: normal;
        word-break: normal;
        text-align: center;
    }

    .secret__message::before {
        display: none;
    }

    .secret__message strong {
        margin-top: 2px;
    }

    /* SP装飾 */
    .secret__decorations {
        display: block;
    }

    .secret__leaf {
        opacity: 0.35;
    }

    .secret__leaf--01 {
        top: 7%;
        left: 31px;
        width: 66px;
    }

    .secret__leaf--02 {
        top: 31%;
        left: -8px;
        width: 40px;
        transform: rotate(-22deg);
    }

    .secret__leaf--03 {
        top: 58%;
        right: -6px;
        width: 38px;
        transform: rotate(18deg);
    }

    .secret__leaf--04 {
        bottom: 8%;
        left: 4%;
        width: 43px;
        transform: rotate(-12deg);
    }

    .secret__sparkle--01 {
        top: 18%;
        left: 5%;
        width: 22px;
    }

    .secret__sparkle--02 {
        top: 47%;
        right: 5%;
        width: 20px;
    }

    .secret__sparkle--03 {
        right: 8%;
        bottom: 11%;
        width: 23px;
    }

    .secret .sp-only {
        display: inline;
    }
}

/* アニメーション
---------------------------------------- */
@keyframes secret-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes secret-heart {

    0%,
    100% {
        transform: scale(1);
    }

    45%,
    55% {
        transform: scale(1.08);
    }
}

@keyframes secret-sparkle {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.75) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.1) rotate(12deg);
    }
}

/* 動きを抑える設定
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .secret__emotion-image,
    .secret__formula-heart,
    .secret__sparkle {
        animation: none;
    }

    .secret__step-image {
        transition: none;
    }
}

/* ========================================
   BIRTH STORY
   トウザえもん誕生のヒストリー
======================================== */
.birth-story {
    --story-green: #00452f;
    --story-cream: #fff5d8;
    --story-yellow: #f5a900;

    position: relative;
    z-index: 1;
    overflow: hidden;
    scroll-margin-top: 120px;
    background-color: var(--story-cream);
}

.birth-story__inner {
    position: relative;
}

.birth-story__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1672 / 941;
}

.birth-story__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * SP・タブレット版を作るまでは
 * HTMLテキストを非表示にして画像のみ表示
 */
.birth-story__overlay {
    display: none;
}

/* ========================================
   PC
======================================== */
@media screen and (min-width: 1101px) {
    .birth-story__overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        pointer-events: none;
    }

    /* セクション見出し
    ---------------------------------------- */
    .birth-story__header {
        position: absolute;
        top: 2.2%;
        left: 2.8%;
        width: 66%;
        color: var(--story-green);
    }

    .birth-story__eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 7px;
        color: var(--story-green);
        font-family: "Noto Sans JP", sans-serif;
        font-size: clamp(12px, 0.95vw, 16px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.09em;
    }

    .birth-story__eyebrow span:first-child {
        color: var(--story-yellow);
    }

    .birth-story__eyebrow span:last-child {
        color: #8b9f43;
        letter-spacing: 0.03em;
    }

    .birth-story__title {
        position: relative;
        display: inline-block;
        padding-bottom: 12px;
        color: var(--story-green);
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: clamp(38px, 3.7vw, 64px);
        font-weight: 900;
        line-height: 1.22;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }

    .birth-story__title::after {
        position: absolute;
        right: 3%;
        bottom: 0;
        left: 0;
        height: 5px;
        border-radius: 999px;
        background:
            linear-gradient(90deg,
                var(--story-yellow) 0%,
                var(--story-yellow) 42%,
                #82983e 100%);
        content: "";
        transform: rotate(-0.7deg);
        transform-origin: left center;
    }

    .birth-story__lead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 13px;
        color: var(--story-green);
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: clamp(15px, 1.25vw, 21px);
        font-weight: 800;
        line-height: 1.6;
        letter-spacing: 0.03em;
    }

    .birth-story__lead span {
        color: var(--story-yellow);
        font-size: 0.8em;
    }

    /* シーン共通
    ---------------------------------------- */
    .birth-story__scenes {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .birth-story__scene {
        position: absolute;
        color: var(--story-cream);
        font-family: "Zen Maru Gothic", sans-serif;
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.75),
            0 1px 2px rgba(0, 0, 0, 0.85);
    }

    .birth-story__scene-index {
        margin-bottom: 5px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: clamp(9px, 0.72vw, 12px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.09em;
    }

    .birth-story__scene-index span {
        display: inline;
        margin-left: 2px;
        color: rgba(255, 245, 216, 0.75);
    }

    .birth-story__scene-title {
        margin-bottom: 8px;
        font-size: clamp(15px, 1.18vw, 20px);
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: 0.015em;
    }

    .birth-story__scene-title span {
        display: block;
    }

    .birth-story__scene-text {
        font-family: "Noto Sans JP", sans-serif;
        font-size: clamp(9px, 0.7vw, 12px);
        font-weight: 600;
        line-height: 1.75;
        letter-spacing: 0.02em;
    }

    /* SCENE 01 */
    .birth-story__scene--01 {
        top: 25.4%;
        left: 8.3%;
        width: 17%;
    }

    /* SCENE 02 */
    .birth-story__scene--02 {
        top: 25.2%;
        left: 33.5%;
        width: 19%;
    }

    /* SCENE 03 */
    .birth-story__scene--03 {
        top: 21.5%;
        left: 54.7%;
        width: 18.5%;
    }

    /* SCENE 04 */
    .birth-story__scene--04 {
        top: 16.2%;
        left: 79.1%;
        width: 20%;
        color: var(--story-green);
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9),
            0 2px 8px rgba(255, 255, 255, 0.65);
    }

    .birth-story__scene--04 .birth-story__scene-index {
        color: var(--story-green);
    }

    .birth-story__scene--04 .birth-story__scene-index span {
        color: rgba(0, 69, 47, 0.65);
    }

    /* ラストメッセージ
    ---------------------------------------- */
    .birth-story__closing {
        position: absolute;
        right: 4.5%;
        bottom: 5.5%;
        color: var(--story-green);
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: clamp(30px, 2.8vw, 48px);
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .birth-story__closing strong {
        font-size: 1.12em;
        font-weight: 900;
    }

    .birth-story__closing::after {
        position: absolute;
        right: -5px;
        bottom: -10px;
        left: -5px;
        height: 5px;
        border-radius: 999px;
        background-color: var(--story-yellow);
        content: "";
        transform: rotate(-2deg);
        transform-origin: left center;
    }
}

/* ========================================
   PCの中間幅
   検証ツールを開いたときなど
======================================== */
@media screen and (min-width: 1101px) and (max-width: 1350px) {
    .birth-story__title {
        font-size: clamp(37px, 3.7vw, 50px);
    }

    .birth-story__lead {
        margin-top: 10px;
        font-size: 16px;
    }

    .birth-story__scene-index {
        font-size: 9px;
    }

    .birth-story__scene-title {
        margin-bottom: 5px;
        font-size: 15px;
    }

    .birth-story__scene-text {
        font-size: 9px;
        line-height: 1.65;
    }

    .birth-story__closing {
        font-size: clamp(30px, 2.8vw, 38px);
    }
}

@media screen and (min-width: 1101px) {
    .birth-story__inner.inner {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    .birth-story__visual {
        width: 100%;
    }
}

@media screen and (min-width: 1101px) {
    .birth-story {
        padding:
            clamp(45px, 3.5vw, 70px) 0 clamp(65px, 5vw, 95px);
    }
}

.birth-story {
    background-color: #f4deb1;
}

/* ========================================
   Birth story / SP
======================================== */

.birth-story__mobile {
    display: none;
}

@media screen and (max-width: 1100px) {
    .birth-story {
        padding: 72px 0 80px;
        overflow: hidden;
        background-color: #f4e2b9;
        background-image: none;
    }

    .birth-story__inner {
        width: 100%;
        max-width: none;
        padding-inline: 20px;
    }

    /* PCカンプを非表示 */
    .birth-story__visual {
        display: none;
    }

    .birth-story__mobile {
        --story-green: #00452f;
        --story-gold: #f5a800;

        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        max-width: 390px;
        margin-inline: auto;
        color: var(--story-green);
    }

    /* 見出し */
    .birth-story__mobile-header {
        margin-bottom: 44px;
        text-align: center;
    }

    .birth-story__mobile-eyebrow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
    }

    .birth-story__mobile-eyebrow span {
        color: var(--story-gold);
    }

    .birth-story__mobile-title {
        position: relative;
        width: fit-content;
        margin-inline: auto;
        padding-bottom: 12px;
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: clamp(34px, 10vw, 42px);
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 0.02em;
    }

    .birth-story__mobile-title::after {
        position: absolute;
        right: 4%;
        bottom: 0;
        width: 92%;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg,
                var(--story-gold) 0%,
                var(--story-gold) 72%,
                #7a963e 100%);
        content: "";
        transform: rotate(-1.5deg);
    }

    .birth-story__mobile-lead {
        margin-top: 20px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.9;
    }

    /* ストーリー一覧 */
    .birth-story__mobile-list {
        display: grid;
        gap: 68px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .birth-story__mobile-scene {
        position: relative;
    }

    /* シーン間をつなぐ光 */
    .birth-story__mobile-scene:not(:last-child)::after {
        position: absolute;
        bottom: -52px;
        left: 50%;
        width: 2px;
        height: 34px;
        background: linear-gradient(to bottom,
                var(--story-gold),
                #89a73d);
        box-shadow: 0 0 9px rgba(245, 168, 0, 0.65);
        content: "";
        transform: translateX(-50%);
    }

    .birth-story__mobile-scene:not(:last-child)::before {
        position: absolute;
        bottom: -53px;
        left: 50%;
        z-index: 1;
        width: 9px;
        height: 9px;
        border-right: 2px solid #78953b;
        border-bottom: 2px solid #78953b;
        content: "";
        transform: translateX(-50%) rotate(45deg);
    }

    /* 各シーン */
    .birth-story__mobile-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 13px;
    }

    .birth-story__mobile-number {
        display: flex;
        flex: 0 0 auto;
        align-items: baseline;
        gap: 4px;
        color: var(--story-gold);
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .birth-story__mobile-number span {
        color: var(--story-green);
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .birth-story__mobile-scene-title {
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: 21px;
        font-weight: 800;
        line-height: 1.45;
    }

    .birth-story__mobile-figure {
        position: relative;
        overflow: hidden;
        margin: 0;
        border-radius: 26px;
        background-color: #fff;
        box-shadow:
            0 16px 34px rgba(45, 46, 21, 0.16),
            0 3px 8px rgba(45, 46, 21, 0.08);
    }

    .birth-story__mobile-figure::after {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 255, 255, 0.68);
        border-radius: inherit;
        pointer-events: none;
        content: "";
    }

    .birth-story__mobile-image {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .birth-story__mobile-text {
        margin-top: 16px;
        padding-inline: 4px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.95;
    }

    /* ラスト */
    .birth-story__mobile-closing {
        position: relative;
        width: fit-content;
        margin: 58px auto 0;
        padding: 0 4px 8px;
        font-family: "Zen Maru Gothic", sans-serif;
        font-size: 29px;
        font-weight: 900;
        line-height: 1.4;
        text-align: center;
    }

    .birth-story__mobile-closing::after {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 76%;
        height: 5px;
        border-radius: 999px;
        background-color: var(--story-gold);
        content: "";
        transform: rotate(-2deg);
    }
}

/* ========================================
   MISSION
======================================== */

.mission {
    position: relative;
    width: 100%;
    padding: clamp(80px, 6vw, 120px) clamp(24px, 4vw, 80px) clamp(72px, 6vw, 120px);
    overflow: hidden;
    color: #004c38;
    background-color: #f8f6df;
    background-image: url("../images/mission-bg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: "Zen Maru Gothic", sans-serif;
    scroll-margin-top: 120px;
}

.mission__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin-inline: auto;
}

/* セクション見出し */

.mission__header {
    width: min(100%, 1100px);
    margin-inline: auto;
    text-align: center;
}

.mission__eyebrow {
    font-size: clamp(0.75rem, 0.9vw, 1.05rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
}

.mission__title {
    position: relative;
    display: inline-block;
    margin-top: 0.25em;
    font-size: clamp(2rem, 3.15vw, 3.8rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

.mission__title::after {
    position: absolute;
    right: 0;
    bottom: -0.08em;
    left: 0;
    height: 0.09em;
    border-radius: 999px;
    background: linear-gradient(90deg,
            #f5a300 0%,
            #f5a300 58%,
            #82a944 100%);
    content: "";
    transform: rotate(-0.5deg);
}

.mission__lead {
    margin-top: 1.1em;
    font-size: clamp(0.75rem, 1.05vw, 1.25rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

/* カード一覧 */

.mission__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 40px);
    margin: clamp(48px, 4.5vw, 80px) 0 0;
    padding: 0;
    list-style: none;
}

/* カード */

.mission__card {
    --mission-color: #f5a300;
    --character-width: 76%;
    --character-bottom: -2%;
    --photo-position: center;
    --arch-height: clamp(130px, 12vw, 220px);
    --card-background: #fffaf0;

    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 3px solid var(--mission-color);
    border-radius: 50% 50% 0 0 / var(--arch-height) var(--arch-height) 0 0;
    background-color: var(--card-background);
    box-shadow: 0 12px 28px rgba(0, 76, 56, 0.08);
}

/* カードごとの設定 */

.mission__card--01 {
    --mission-color: #f5a300;
    --character-width: 78%;
    --photo-position: center;
}

.mission__card--02 {
    --mission-color: #4b91d8;
    --character-width: 82%;
    --photo-position: center;
}

.mission__card--03 {
    --mission-color: #138d42;
    --character-width: 66%;
    --photo-position: center;
}

/* 写真＋トウザえもん */

.mission__visual {
    position: relative;
    flex-shrink: 0;
    height: clamp(270px, 27vw, 440px);
    overflow: hidden;
    background-color: #e8eadf;
}

.mission__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--photo-position);
}

.mission__character {
    position: absolute;
    bottom: var(--character-bottom);
    left: 50%;
    z-index: 1;
    display: block;
    width: var(--character-width);
    max-width: none;
    height: auto;
    transform: translateX(-50%);
}

/* カード下部 */

.mission__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(24px, 2vw, 34px) clamp(20px, 2vw, 34px) clamp(30px, 2.5vw, 42px);
    background-color: var(--card-background);
}

/* 写真と本文の境目をゆるい曲線にする */

.mission__body::before {
    position: absolute;
    top: -24px;
    left: -4%;
    width: 108%;
    height: 44px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background-color: var(--card-background);
    content: "";
}

.mission__body>* {
    position: relative;
    z-index: 1;
}

/* アイコン＋MISSION番号 */

.mission__meta {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    padding-bottom: clamp(14px, 1.2vw, 20px);
    border-bottom: 3px dotted var(--mission-color);
    text-align: left;
}

.mission__icon {
    display: block;
    flex-shrink: 0;
    width: clamp(58px, 4.8vw, 76px);
    height: clamp(58px, 4.8vw, 76px);
    padding: clamp(10px, 0.9vw, 14px);
    border-radius: 50%;
    background-color: var(--mission-color);
    box-sizing: border-box;
    object-fit: contain;
}

.mission__number {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    color: var(--mission-color);
    line-height: 1;
}

.mission__number span {
    font-size: clamp(0.55rem, 0.62vw, 0.75rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mission__number strong {
    margin-top: 0.12em;
    font-size: clamp(1.4rem, 1.65vw, 2rem);
    font-weight: 900;
}

/* カード見出し */

.mission__card-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1em;
    margin-top: clamp(18px, 1.7vw, 28px);
    padding-bottom: clamp(12px, 1vw, 16px);
    font-size: clamp(0.9rem, 1.25vw, 1.5rem);
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
    letter-spacing: 0.03em;
}

.mission__card-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 50%;
    background-color: #f5a300;
    content: "";
    transform: rotate(-0.7deg);
}

/* カード説明 */

.mission__card-text {
    margin-top: clamp(14px, 1.2vw, 20px);
    font-size: clamp(0.68rem, 0.9vw, 0.98rem);
    font-weight: 600;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ラストメッセージ */

.mission__closing {
    width: 100%;
    margin-top: clamp(50px, 5vw, 84px);
    font-size: clamp(1.2rem, 1.75vw, 2.1rem);
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.06em;
}

/* ========================================
   MISSION：Tablet / SP
======================================== */

@media screen and (max-width: 1024px) {
    .mission {
        padding: clamp(72px, 10vw, 100px) 20px 80px;
        background-color: #f7f7e8;
        background-image: none;
    }

    .mission__inner {
        width: 100%;
        max-width: 560px;
    }

    .mission__eyebrow {
        font-size: 0.75rem;
    }

    .mission__title {
        max-width: 500px;
        margin-top: 0.4em;
        font-size: clamp(1.6rem, 7.5vw, 2.6rem);
        line-height: 1.35;
    }

    .mission__lead {
        margin-top: 1.5em;
        font-size: clamp(0.85rem, 3.2vw, 1rem);
        line-height: 1.8;
    }

    /* カード一覧 */

    .mission__list {
        grid-template-columns: 1fr;
        gap: clamp(40px, 9vw, 64px);
        margin-top: clamp(42px, 9vw, 64px);
    }

    .mission__card {
        --arch-height: clamp(150px, 32vw, 220px);

        width: 100%;
        max-width: 540px;
        margin-inline: auto;
    }

    .mission__visual {
        height: clamp(310px, 72vw, 420px);
    }

    .mission__card--01 {
        --character-width: 80%;
    }

    .mission__card--02 {
        --character-width: 84%;
    }

    .mission__card--03 {
        --character-width: 68%;
    }

    .mission__body {
        padding: 26px clamp(22px, 6vw, 36px) clamp(32px, 8vw, 44px);
    }

    .mission__icon {
        width: clamp(56px, 14vw, 72px);
    }

    .mission__number span {
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    }

    .mission__number strong {
        font-size: clamp(1.5rem, 5vw, 1.9rem);
    }

    .mission__card-title {
        min-height: auto;
        margin-top: clamp(20px, 5vw, 28px);
        font-size: clamp(1rem, 4vw, 1.35rem);
    }

    .mission__card-text {
        font-size: clamp(0.72rem, 3vw, 0.95rem);
    }

    .mission__closing {
        margin-top: clamp(48px, 11vw, 72px);
        font-size: clamp(1.25rem, 5vw, 1.8rem);
        line-height: 1.7;
    }
}

@media screen and (max-width: 480px) {
    .mission {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mission__card {
        --arch-height: clamp(120px, 40vw, 180px);
    }

    .mission__visual {
        height: clamp(270px, 82vw, 350px);
    }

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

    .mission__card-text br {
        display: none;
    }
}

/* ========================================
   GOODS
======================================== */

.goods {
    position: relative;
    width: 100%;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
    color: #004c38;
    background-color: #fff6c9;
    background-image: url("../images/tozaemon-lp-goods-bg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font-family: "Zen Maru Gothic", sans-serif;
    scroll-margin-top: 120px;
}

.goods__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 見出し */

.goods__header {
    position: absolute;
    top: 6%;
    left: 50%;
    z-index: 2;
    width: 38%;
    text-align: center;
    transform: translateX(-50%);
}

.goods__eyebrow {
    font-size: clamp(0.7rem, 0.85vw, 1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
}

.goods__title {
    position: relative;
    display: inline-block;
    margin-top: 0.35em;
    font-size: clamp(1.8rem, 2.8vw, 3.35rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

.goods__title::after {
    position: absolute;
    right: 4%;
    bottom: -0.12em;
    left: 4%;
    height: 0.09em;
    border-radius: 999px;
    background: linear-gradient(90deg,
            #f5a300 0%,
            #f5a300 55%,
            #82a944 100%);
    content: "";
    transform: rotate(-0.5deg);
}

.goods__lead {
    margin-top: 1.4em;
    font-size: clamp(0.7rem, 0.95vw, 1.15rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* 中央のトウザえもん */

.goods__character {
    position: absolute;
    top: 39%;
    bottom: auto;
    left: 50%;
    z-index: 3;
    display: block;
    width: 12.5%;
    height: auto;
    transform: translateX(-50%);
}

/* 締めメッセージ */

.goods__message {
    position: absolute;
    top: 66%;
    left: 50%;
    bottom: auto;
    z-index: 2;
    width: 27%;
    padding: 0.8em 1em;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.9rem, 1.45vw, 1.75rem);
    font-weight: 900;
    line-height: 1.55;
    text-align: center;
    letter-spacing: 0.05em;
    transform: translateX(-50%);
}

/* ========================================
   LINEスタンプCTA：PC
======================================== */

/*
 * PCでは背景を切り抜いた画像は非表示。
 * CTAだけスマホ画像の下へ絶対配置する。
 */

.goods__sp-visuals {
    display: block;
}

.goods__sp-line-group {
    display: block;
}

.goods__sp-visual {
    display: none;
}

.goods__stamp-cta {
    position: absolute;
    bottom: 2.8%;
    left: 20.5%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    width: clamp(250px, 22vw, 360px);
    padding: clamp(10px, 0.9vw, 14px);
    border: 2px solid #06c755;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(0, 76, 56, 0.12);
    box-sizing: border-box;
    color: #004c38;
    transform: translateX(-50%);
}

/* スキャンできない仮QR */

.goods__stamp-qr {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: clamp(58px, 5vw, 76px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 5px solid #fff;
    outline: 1px solid rgba(0, 76, 56, 0.2);
    background-image: repeating-conic-gradient(#004c38 0 25%,
            #fff 0 50%);
    background-position: center;
    background-size: 10px 10px;
    box-shadow: 0 2px 6px rgba(0, 76, 56, 0.1);
    box-sizing: border-box;
}

/* 仮QRだと分かるよう中央を白くする */

.goods__stamp-qr::before {
    display: grid;
    place-items: center;
    width: 30px;
    aspect-ratio: 1;
    background-color: #fff;
    color: #004c38;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    content: "QR";
}

.goods__stamp-copy {
    margin: 0;
    font-weight: 800;
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0.03em;
}

.goods__stamp-copy span,
.goods__stamp-copy strong {
    display: block;
}

.goods__stamp-copy span {
    font-size: clamp(0.7rem, 0.8vw, 0.9rem);
}

.goods__stamp-copy strong {
    color: #06b94e;
    font-size: clamp(0.9rem, 1.1vw, 1.25rem);
    font-weight: 900;
    white-space: nowrap;
}

/* ========================================
   GOODS：Tablet / SP
======================================== */

@media screen and (max-width: 1024px) {
    .goods {
        aspect-ratio: auto;
        padding: clamp(72px, 10vw, 100px) 20px 72px;
        background-image: none;
    }

    .goods__inner {
        height: auto;
        max-width: 620px;
        margin-inline: auto;
    }

    .goods__header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
    }

    .goods__eyebrow {
        font-size: 0.75rem;
    }

    .goods__title {
        margin-top: 0.45em;
        font-size: clamp(1.9rem, 7.5vw, 2.8rem);
    }

    .goods__lead {
        margin-top: 1.5em;
        font-size: clamp(0.85rem, 3.2vw, 1rem);
    }

    /* PC背景の左右を切り抜いて縦並び */

    .goods__sp-visuals {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: min(100%, 560px);
        margin: 40px auto 0;
    }

    .goods__sp-line-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .goods__sp-visual {
        display: block;
        width: 100%;
        aspect-ratio: 0.72;
        overflow: hidden;
        border-radius: 32px;
        background-image: url("../images/tozaemon-lp-goods-bg.webp");
        background-repeat: no-repeat;
        background-size: 270% auto;
    }

    .goods__sp-visual--line {
        background-position: left center;
    }

    .goods__sp-visual--item {
        background-position: right center;
    }

    /* SPはQRを消してボタン風にする */

    .goods__stamp-cta {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        justify-content: center;
        width: min(100%, 420px);
        margin: 0 auto;
        padding: 14px 22px;
        border-color: #06c755;
        border-radius: 999px;
        background-color: #06c755;
        box-shadow: 0 7px 18px rgba(6, 199, 85, 0.22);
        color: #fff;
        transform: none;
    }

    .goods__stamp-qr {
        display: none;
    }

    .goods__stamp-copy {
        text-align: center;
    }

    .goods__stamp-copy span {
        font-size: clamp(0.75rem, 3vw, 0.9rem);
    }

    .goods__stamp-copy strong {
        color: #fff;
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

}

@media screen and (min-width: 1025px) {
    .goods__character {
        top: 36%;
        width: 15%;
        filter: drop-shadow(0 10px 12px rgba(0, 76, 56, 0.12));
        transform-origin: center;
        animation: goods-float 4s ease-in-out infinite;
        will-change: transform;
    }

    .goods__message {
        top: 68%;
    }
}

@keyframes goods-float {

    0%,
    100% {
        transform:
            translateX(-50%) translateY(0) rotate(-1deg);
    }

    50% {
        transform:
            translateX(-50%) translateY(-12px) rotate(1deg);
    }
}

/* 動きを減らす設定の端末では停止 */
@media (prefers-reduced-motion: reduce) {
    .goods__character {
        animation: none;
    }
}

/* GOODS：SPのトウザえもん・セリフ重なり修正 */
@media screen and (max-width: 1024px) {
    .goods .goods__character {
        position: static !important;
        display: block;
        width: min(46vw, 220px);
        margin: 44px auto 0;
        transform: none !important;
        animation: none;
    }

    .goods .goods__message {
        position: static !important;
        width: fit-content;
        max-width: calc(100% - 24px);
        margin: 24px auto 0;
        transform: none !important;
    }
}

/* ========================================
   LAST MESSAGE
======================================== */

.last-message {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background-color: #064936;
    font-family: "Zen Maru Gothic", sans-serif;
}

/* 背景画像 */

.last-message__visual {
    display: block;
    width: 100%;
}

.last-message__image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.last-message__image--pc {
    display: block;
    aspect-ratio: 1680 / 689;
}

.last-message__image--sp {
    display: none;
}

@media screen and (max-width: 1024px) {
    .last-message__image--pc {
        display: none;
    }

    .last-message__image--sp {
        display: block;
        aspect-ratio: 4 / 5;
    }
}

/* テキスト配置用レイヤー */

.last-message__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* PC：左上 */

.last-message__header {
    position: absolute;
    top: 9%;
    left: 6.5%;
    width: 46%;
    text-align: left;
}

.last-message__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8em;
    width: fit-content;
    color: #d9ed86;
    font-size: clamp(0.7rem, 0.9vw, 1.05rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

/* 英字の左右に点線 */

.last-message__eyebrow::before,
.last-message__eyebrow::after {
    width: 2.5em;
    border-top: 2px dotted currentcolor;
    content: "";
}

.last-message__title {
    margin-top: 0.7em;
    font-size: clamp(2rem, 3.2vw, 3.8rem);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.035em;
    white-space: nowrap;
    text-shadow:
        0 3px 8px rgba(0, 32, 24, 0.3),
        0 0 2px rgba(0, 32, 24, 0.4);
}

/* ========================================
   LAST MESSAGE：Tablet / SP
======================================== */

@media screen and (max-width: 1024px) {
    .last-message__visual img {
        aspect-ratio: 4 / 5;
    }

    .last-message__header {
        top: 7%;
        left: 50%;
        width: 96%;
        text-align: center;
        transform: translateX(-50%);
    }

    .last-message__eyebrow {
        justify-content: center;
        margin-inline: auto;
        font-size: clamp(0.65rem, 2.5vw, 0.9rem);
    }

    .last-message__eyebrow::before,
    .last-message__eyebrow::after {
        width: clamp(1.5em, 6vw, 3em);
    }

    .last-message__title {
        margin-top: 2.1em;
        font-size: clamp(1.45rem, 6.2vw, 2.4rem);
        line-height: 1.55;
        white-space: nowrap;
    }
}

/* ========================================
   FOOTER SHARE
======================================== */

.footer-share {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(24px, 2.5vw, 44px);
    color: #064c38;
    font-family: "Zen Maru Gothic", sans-serif;
}

/* 「トウザえもんをシェア！」 */

.footer-share__title {
    position: relative;
    flex-shrink: 0;
    padding-left: 1.4em;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 左側のキラキラ */

.footer-share__title::before {
    position: absolute;
    top: 50%;
    left: 0;
    color: #92b83e;
    font-size: 1.25em;
    content: "✦";
    transform: translateY(-50%);
}

/* タイトル下の点線 */

.footer-share__title::after {
    position: absolute;
    right: 0;
    bottom: -0.5em;
    left: 0.8em;
    border-top: 3px dotted #92b83e;
    content: "";
}

/* SNSボタンエリア */

.footer-share__links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 28px);
    padding-left: clamp(24px, 2.5vw, 40px);
    border-left: 3px dotted #92b83e;
}

/* 各SNSボタン */

.footer-share__link {
    display: grid;
    flex-shrink: 0;
    width: clamp(52px, 4.5vw, 72px);
    aspect-ratio: 1;
    border-radius: 50%;
    place-items: center;
    transition:
        filter 0.25s ease,
        transform 0.25s ease;
}

.footer-share__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ホバー */

.footer-share__link:hover {
    filter: drop-shadow(0 7px 8px rgba(0, 76, 56, 0.18));
    transform: translateY(-5px) scale(1.05);
}

.footer-share__link:focus-visible {
    outline: 3px solid #f4b93f;
    outline-offset: 5px;
}

/* ========================================
   FOOTER SHARE：SP
======================================== */

@media screen and (max-width: 767px) {
    .footer-share {
        flex-direction: column;
        justify-content: center;
        gap: 22px;
        text-align: center;
    }

    .footer-share__title {
        font-size: 1.05rem;
    }

    .footer-share__links {
        justify-content: center;
        gap: 22px;
        padding-top: 20px;
        padding-left: 0;
        border-top: 3px dotted #92b83e;
        border-left: 0;
    }

    .footer-share__link {
        width: 58px;
    }

    /* PC用のタイトル下線は非表示 */
    .footer-share__title::after {
        display: none;
    }

    /* アイコン上の点線だけ残す */
    .footer-share__links {
        width: fit-content;
        padding-top: 18px;
        border-top: 3px dotted #92b83e;
    }
}

/* ========================================
   FOOTER ACTIONS
======================================== */

.footer-actions {
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
}

/* ページトップボタン */

.footer-page-top {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    color: #064c38;
    font-family: "Zen Maru Gothic", sans-serif;
    text-decoration: none;
}

.footer-page-top__image {
    display: block;
    width: clamp(90px, 9vw, 140px);
    height: auto;
    transition: transform 0.3s ease;
}

.footer-page-top__text {
    position: relative;
    padding: 0.7em 2.5em 0.7em 1.4em;
    border: 2px solid #29923d;
    border-radius: 999px;
    background-color: #fffef2;
    font-size: clamp(0.8rem, 1vw, 1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 右向きの小さな矢印 */

.footer-page-top__text::after {
    position: absolute;
    top: 50%;
    right: 1.1em;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid currentcolor;
    border-right: 2px solid currentcolor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

/* ホバー */

.footer-page-top:hover .footer-page-top__image {
    transform: translateY(-8px);
}

.footer-page-top:hover .footer-page-top__text {
    color: #fff;
    background-color: #29923d;
}

.footer-page-top:focus-visible {
    border-radius: 999px;
    outline: 3px solid #f4b93f;
    outline-offset: 5px;
}

/* スムーズスクロール */

html {
    scroll-behavior: smooth;
}

/* ========================================
   FOOTER ACTIONS：SP
======================================== */

@media screen and (max-width: 767px) {
    .footer-actions {
        flex-direction: column;
        gap: 40px;
    }

    .footer-page-top {
        gap: 6px;
    }

    .footer-page-top__image {
        width: 105px;
    }

    .footer-page-top__text {
        font-size: 0.8rem;
    }
}

/* Xロゴだけ、画像内の透明余白ぶん拡大 */

.js-share-x img {
    transform: scale(1.65);
}

/* Facebookはそのまま */

.js-share-facebook img {
    transform: scale(1);
}

/* ========================================
   SITE FOOTER
======================================== */

.site-footer {
    padding: clamp(28px, 3.5vw, 48px) 20px;
    border-top: 1px solid rgba(0, 76, 56, 0.12);
    background-color: #fffef4;
}

.site-footer__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: min(100%, 1280px);
    margin-inline: auto;
}

.site-footer__logo {
    display: block;
    width: clamp(260px, 28vw, 430px);
    height: auto;
}

.site-footer__copyright {
    color: #315e50;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(0.65rem, 0.75vw, 0.8rem);
    line-height: 1.5;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ========================================
   SITE FOOTER：SP
======================================== */

@media screen and (max-width: 767px) {
    .site-footer {
        padding: 32px 20px 26px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        text-align: center;
    }

    .site-footer__logo {
        width: min(86vw, 340px);
    }

    .site-footer__copyright {
        font-size: 0.65rem;
        white-space: normal;
    }
}

/* 身長：キャラ画像内の芽の位置を基準に配置 */
.about__height-guide {
    --height-line-length: 40px;

    position: absolute;
    z-index: 5;
    top: 2.22%;
    left: 36.33%;

    width: max-content;
    margin: 0;
    padding: 0 0 0 calc(var(--height-line-length) + 8px);

    color: var(--about-green, #005941);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;

    transform: translateY(-50%);
}

/* 点から右へ伸びる横線 */
.about__height-guide::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--height-line-length);
    height: 2px;
    background-color: currentColor;
    transform: translateY(-50%);
}

/* 芽のてっぺんに置く点 */
.about__height-guide::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
}

/* SP：線の長さと文字サイズだけ調整 */
@media screen and (max-width: 767px) {
    .about__height-guide {
        --height-line-length: 32px;
        font-size: 10px;
    }

    .about__height-guide::after {
        width: 6px;
        height: 6px;
    }
}

/* === ABOUT：画像に固定する3本の説明線 START === */

.about__image-pin {
    --pin-dot: 8px;
    --pin-gap: 8px;

    position: absolute;
    z-index: 4;
    top: var(--pin-y);
    left: var(--pin-x);
    width: 0;
    height: 0;

    color: var(--about-green, #005941);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.6;
}

/* 点を始点にする横線。初期設定は左向き */
.about__image-pin::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    width: var(--pin-line);
    height: 2px;
    background-color: currentColor;
}

/* 画像内の座標に固定する点 */
.about__image-pin::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pin-dot);
    height: var(--pin-dot);
    border-radius: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
}

/* 線の外側に説明文を配置 */
.about__image-pin-label {
    position: absolute;
    top: 0;
    right: calc(var(--pin-line) + var(--pin-gap));
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px;
    width: var(--pin-copy);
    margin: 0;
    padding: 0;
    text-align: left;
    transform: translateY(-50%);
}

.about__image-pin-label dt,
.about__image-pin-label dd {
    margin: 0;
}

.about__image-pin-label dt {
    font-weight: 900;
    white-space: nowrap;
}

.about__image-pin-label dt::after {
    content: "：";
}

.about__image-pin-label dd {
    overflow-wrap: anywhere;
}

/* 芽の左側 */
.about__image-pin--sprout {
    --pin-x: 28%;
    --pin-y: 16%;
    --pin-line: 60px;
    --pin-copy: 180px;
}

/* 白いお腹 */
.about__image-pin--weight {
    --pin-x: 34%;
    --pin-y: 80%;
    --pin-line: 85px;
    --pin-copy: 180px;
}

/* 黄色い小判 */
.about__image-pin--dream {
    --pin-x: 60%;
    --pin-y: 80%;
    --pin-line: 70px;
    --pin-copy: 185px;
}

/* 夢だけ右向き */
.about__image-pin--dream::before {
    right: auto;
    left: 0;
}

.about__image-pin--dream .about__image-pin-label {
    right: auto;
    left: calc(var(--pin-line) + var(--pin-gap));
}

/* タブレット：線と文字の大きさを調整 */
@media screen and (max-width: 1100px) {
    .about__image-pin {
        --pin-line: 50px;
        --pin-copy: 160px;
        font-size: 13px;
    }
}

/* SP：点の座標は共通。線と説明文の幅だけ変える */
@media screen and (max-width: 767px) {
    .about__image-pin {
        --pin-dot: 6px;
        --pin-gap: 6px;
        --pin-line: 18px;
        font-size: 10px;
    }

    .about__image-pin-label {
        gap: 3px;
    }

    .about__image-pin--sprout {
        --pin-copy: clamp(76px, calc(50vw - 98px), 116px);
    }

    .about__image-pin--weight {
        --pin-line: 28px;
        --pin-copy: clamp(76px, calc(50vw - 80px), 120px);
    }

    .about__image-pin--dream {
        --pin-copy: clamp(96px, calc(50vw - 57px), 128px);
    }
}

/* === ABOUT：画像に固定する3本の説明線 END === */

/* スタンプ・グッズ：セクションとメニューリンクを一時非表示 */
.goods,
a[href="#goods"] {
    display: none;
}