@charset "UTF-8";
/* ================================
   1) ベース設定 / リセット軽量
================================ */
@font-face {
    font-family: 'Noto Sans JP';
    src: url('./fonts/NotoSansJP-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('./fonts/NotoSansJP-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* color tokens */
    --color-base: #FFFFFF;
    --color-bg-sub: #F7FAFC; /* 薄い段落背景 */
    --color-primary: #2FA8CC; /* アクア */
    --color-secondary: #F28C6A; /* コーラル */
    --color-text: #1A1A1A; /* 見出し */
    --color-body: #374151; /* 本文 */
    --color-muted: #6B7280; /* 補助 */
    --color-border: #E5E7EB;
}

* {
    box-sizing: border-box;
}

html {
    font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "YuGothic", sans-serif;
    font-size: 20px;
    scroll-behavior: smooth;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.en {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 3rem;
}

body {
    margin: 0;
    container-type: inline-size;
    background-color: var(--color-base);
    color: var(--color-body);
    line-height: 1.8;
    letter-spacing: 0.03em;
}

img {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    text-decoration: none;
    opacity: 0.8;
}

li {
    list-style: none;
}

h2 {
    margin-bottom: 32px;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 8px var(--color-base);
    line-height: 1.2;
}

h3 {
    margin-bottom: 32px;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 8px var(--color-base);
    line-height: 1.2;
}

h4 {
    margin-bottom: 32px;
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: 1px solid var(--color-primary);
    line-height: 1.2;
}

/* ユーティリティ */
.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb120 {
    margin-bottom: 120px;
}

.fs07 {
    font-size: 0.7rem;
}

.fs2 {
    font-size: 2rem
}

.fs3 {
    font-size: 3rem
}

.fs4 {
    font-size: 4rem
}

.center {
    text-align: center;
}

section {
    margin: 0 auto;
    padding: 120px 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 強調用 span */
.emphasis {
    padding: 0 .1em; /* 行の端で途切れないように少し余白 */
    background: linear-gradient(
            to bottom,
            transparent 32%,
            rgba(255, 235, 59, 0.35) 100%
    );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* Safari対応 */
    font-weight: 700;
}

/* 警告用 span */
.caveat {
    padding: 0 .1em; /* 行の端で途切れないように少し余白 */
    background: linear-gradient(
            to bottom,
            transparent 32%,
            rgba(255, 59, 59, 0.35) 100%
    );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* Safari対応 */
    font-weight: 700;
}

.strong {
    color: #222; /* 通常より濃いめに */
    font-weight: 700;
    font-size: 110%;
    letter-spacing: 0.02em; /* 読みやすさを微調整 */
}

.highlight-white {
    position: relative;
    font-weight: bold;
    text-shadow: 1px 1px 0 #f3f3f3,
    -1px 1px 0 #F3F3F3FF,
    1px -1px 0 #F3F3F3FF,
    -1px -1px 0 #F3F3F3FF,
    0 1px 0 #F3F3F3FF,
    1px 0 0 #F3F3F3FF,
    -1px 0 0 #F3F3F3FF,
    0 -1px 0 #F3F3F3FF;
    line-height: 1.8;
    z-index: 0;
}

.highlight-white > span {
    position: relative;
    display: inline; /* 行ごとに幅をもたせる */
    width: 100%;
    padding: 0 .15em; /* 文字端のにじみが切れないよう少しだけ余白 */
    z-index: 0;
}

.highlight-white > span::after {
    content: "";
    position: absolute;
    left: -.2em; /* 行端の切れ目が見えないよう左右に少しはみ出す */
    right: -.2em;
    bottom: 0; /* 下に寄せる（字のはらいに被りにくい位置） */
    height: 80%; /* ← 下半分くらいを覆う */
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .85) 100%
    );
    filter: blur(16px); /* きっちり線ではなく“ふわっ”と */
    border-radius: .35em; /* 行の角をわずかに丸める */
    pointer-events: none;
    z-index: -1; /* 文字の下に回す（上の isolation で安定） */
}

.line {
    position: relative;
}

.line::before {
    content: "";
    position: absolute;
    top: -36px;
    right: -44px;
    width: 64px;
    height: 64px;
    background: url(img/3line.webp) no-repeat top center / contain;
    transform: rotate(340deg);
}

.btn {
    display: inline-block;
    padding: 2.4vw 3.2vw;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-base);
    font-size: clamp(20px, 2.4vw, 40px);
}

.cv .btn {
    position: relative;
    overflow: hidden;
    animation: shakeLoop 4s infinite;
}

.cv .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shineLoop 4s infinite;
}

@keyframes shineLoop {
    0%, 93% {
        left: -75%;
    }
    94% {
        left: 50%;
    }
    95%, 99% {
        left: 100%;
    }
    100% {
        left: 125%;
    }
}

@keyframes shakeLoop {
    0%, 94%, 100% {
        transform: translateX(0);
    }
    95% {
        transform: translateX(-3px);
    }
    97% {
        transform: translateX(3px);
    }
    99% {
        transform: translateX(-3px);
    }
}

.cv .cv-note {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    padding: 14px 20px;
    background: #fff8e1;
    border: 2px solid #d9b100;
    border-radius: 8px;
    color: #8b6b00;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 吹き出しの三角部分（上向き） */
.cv .cv-note::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #fff8e1 transparent;
}

/* 枠線を自然に接続するための外側ライン */
.cv .cv-note::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 12px 12px 12px;
    border-style: solid;
    border-color: transparent transparent #d9b100 transparent;
}

.bounce {
    animation: bounce 1.6s ease-in-out infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(2px);
    }
    55% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 18px;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    h2 {
        font-size: 2rem;
        text-align: left;
    }

    h3 {
        font-size: 1.8rem;
    }

    .fs2 {
        font-size: 1.6rem;
    }

    .container {
        padding: 0;
    }

    .btn {
        width: 100%;
        font-size: 5vw;
    }

    .cv .cv-note {
        text-align: left;
    }
}

/* スクロール誘導UI */
/* ===== Scroll Indicator (Water Drop) ===== */
:root {
    --ci-size: 3vw;
    --ci-gap: 8px;
    --ci-bottom: 4px;
    --ci-speed: 1.8s;
    --ci-ease: cubic-bezier(.25, .8, .25, 1);
}

.scroll-indicator {
    --ci-fg: #0a2540;
    --ci-fg-soft: color-mix(in oklab, var(--ci-fg) 35%, transparent);
    position: absolute;
    left: 2%;
    bottom: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: var(--ci-gap);
    z-index: 20;
    text-decoration: none;
    pointer-events: auto; /* ← クリック可 */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .6s ease, transform .2s ease;
}

.scroll-indicator .ci__icon {
    width: var(--ci-size);
    height: calc(var(--ci-size) * 1.15);
    display: grid;
    place-items: center;
}

.scroll-indicator .ci__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.scroll-indicator .ci__text {
    font-size: 0.8vw;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ci-fg);
    opacity: .85;
}

.scroll-indicator .ci__track {
    stroke: var(--ci-fg-soft);
    stroke-width: 2;
    stroke-linecap: round;
}

.scroll-indicator .ci__drop {
    fill: var(--ci-fg);
    animation: ci-drop var(--ci-speed) var(--ci-ease) infinite;
    transform-origin: 18px 8px;
}

.scroll-indicator .ci__ripple {
    fill: none;
    stroke: var(--ci-fg);
    stroke-width: 2;
    opacity: 0;
    transform-origin: 18px 44px;
    animation: ci-ripple var(--ci-speed) var(--ci-ease) infinite;
}

.scroll-indicator.ci--light {
    --ci-fg: #fff;
    --ci-fg-soft: color-mix(in oklab, var(--ci-fg) 35%, transparent);
}

.scroll-indicator.ci--dark {
    --ci-fg: #0a2540;
    --ci-fg-soft: color-mix(in oklab, var(--ci-fg) 35%, transparent);
}

@keyframes ci-drop {
    0% {
        transform: translateY(-6px) scale(1);
        opacity: 0;
    }
    10% {
        opacity: .95;
    }
    50% {
        transform: translateY(24px) scale(1.02);
        opacity: 1;
    }
    80% {
        transform: translateY(30px) scale(.98);
        opacity: .8;
    }
    100% {
        transform: translateY(36px) scale(.9);
        opacity: 0;
    }
}

@keyframes ci-ripple {
    0%, 40% {
        opacity: 0;
        transform: scale(.6);
    }
    55% {
        opacity: .35;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-indicator .ci__drop,
    .scroll-indicator .ci__ripple {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    :root {
        --ci-size: 10vw;
    }

    .scroll-indicator .ci__text {
        font-size: 3vw;
    }

    #hero .scroll-indicator {
        left: 50%;
        transform: translateX(-50%);
        bottom: var(--ci-bottom);
    }
}


/* =====================
 共感 empathy
 ===================== */
#empathy {
    padding: 0;
    transition: background-color 0.6s ease;
}

#empathy .container {
    display: flex; /* コンテンツ中央寄せのため */
    flex-direction: column; /* コンテンツ中央寄せのため */
    align-items: center; /* コンテンツ中央寄せのため */
    width: 100%;
    max-width: 100%;
    margin: 0 auto 80px;
}

#empathy h2 {
    width: 100%;
    font-size: 2.8vw;
}

#empathy.bg-white {
    background-color: #fff;
}

#empathy .scene {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    padding: 120px 0;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}

#empathy .scene[data-scene="3"],
#empathy .scene[data-scene="4"] {
    position: relative;
}

/* 初期は非表示（画像・テキスト） */
#empathy .scene[data-scene="3"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

#empathy .scene[data-scene="4"] {
    width: 100%;
}

.scene.show {
    opacity: 1;
    transform: translateY(0);
}

#empathy .imaging h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#empathy .foods p {
    position: absolute;
    top: 16%;
    left: 4%;
    font-size: 1.6vw;
    font-weight: 700;
}

#empathy .foods p span.emphasis {
    font-size: 2.4vw;
}

#empathy .foods .fit img {
    width: 100vw;
    object-fit: cover; /* coverでトリミング */
    object-position: bottom center; /* 下中央を基準に切り取り */
}

#empathy .induction {
    padding: 0 16px;
    text-align: center;
}

#empathy .induction p {
    font-size: 1.6rem;
}

#empathy .induction img {
    width: auto;
    max-width: 100%;
    animation: arrow-bounce 1.6s ease-in-out infinite alternate;
}

@keyframes arrow-bounce {
    0% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(10px);
    }
    55% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    #empathy h2 {
        font-size: 4.8vw;
    }

    #empathy .scene[data-scene="1"] .fit img,
    #empathy .scene[data-scene="2"] .fit img {
        object-position: top center;
    }

    #empathy .foods p {
        font-size: 4vw;
    }

    #empathy .scene[data-scene="3"] {
        height: 630px;
    }

    #empathy .foods .fit img {
        height: 100dvh; /* 必要に応じて固定高さ */
    }

    #empathy .foods p .text {
        display: inline-block;
        margin-bottom: 24px;
        line-height: 1.2;
    }

    #empathy .foods p span.emphasis {
        font-size: 5.6vw;
    }
}


/* =====================
 ベネフィット
 ===================== */
#benefit {
    position: relative;
    margin-top: 80px;
    padding-top: 12vw;
    background: url("img/benefit_bg.webp") no-repeat top center / contain;
}

#benefit .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.reverse {
    flex-direction: row-reverse;
}

#benefit .wrap > * {
    width: 50%;
    flex: 1;
}

/* カード全体 */
.taste-card {
    align-items: center;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0fafd 0%, #ffffff 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.taste-card img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* テキスト */
.taste-card p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5em;
    color: #333;
}

/* 箇条書き */
.point-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.point-list li {
    position: relative;
    font-size: 1rem;
    padding: 16px 16px 16px 64px;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 165, 200, 0.15);
    line-height: 1.6;
}

.point-list li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path fill='%2300A5C8' d='M12 2c3.5 4.6 6.5 7.8 6.5 11.1A6.5 6.5 0 1 1 5.5 13C5.5 9.8 8.5 6.6 12 2z'/>\
      <path d='M8 12.5l2.2 2.2 5-5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>") no-repeat center/100% 100%;
}

@media (max-width: 768px) {
    #benefit .wrap {
        flex-direction: column;
    }

    #benefit .wrap > * {
        width: 100%;
    }

    .taste-card {
        padding: 16px;
    }

    .point-list li {
        padding: 16px 16px 16px 48px;
    }

    .point-list li::before {
        left: 8px;
    }
}


/* =====================
 濾材
 ===================== */
#filter {
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    url(img/okinawa.webp) no-repeat top center / cover;
}

#filter p {
    font-size: 1.05rem;
}

#filter .highlight-white {
    position: relative;
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.3);
}

#filter .highlight-white::after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 32px 80px 0 80px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3) transparent transparent transparent;
}

#filter .wrap {
    padding: 64px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.8);
}

#filter .wrap > div {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.circle-img {
    max-width: 320px; /* サイズはお好みで */
    max-height: 320px; /* 正方形にするのがポイント */
    object-fit: cover; /* はみ出さずにトリミング */
    border-radius: 50%; /* 丸くする */
    border: 4px solid #ccc; /* フレーム線（任意） */
}

/* “清潔感のあるカード”な箇条書き */
.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px; /* 行間の気持ち良さ */
}

.feature-list li {
    position: relative;
    padding: 16px 16px 16px 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    line-height: 1.7;
    backdrop-filter: blur(4px); /* ほんのりガラス感（対応ブラウザ） */
}

/* 水滴チェックのアイコン（外部画像なし・SVG直書き） */
.feature-list li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path fill='%2300A5C8' d='M12 2c3.5 4.6 6.5 7.8 6.5 11.1A6.5 6.5 0 1 1 5.5 13C5.5 9.8 8.5 6.6 12 2z'/>\
      <path d='M8 12.5l2.2 2.2 5-5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>") no-repeat center/100% 100%;
    border-radius: 50%; /* タップ領域を丸く */
}

/* 除去対象物質 */
#lab-results {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
}

#lab-results h2 .sub {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.6rem;
}

#lab-results .summary {
    display: flex;
    gap: 32px;
}

/* ピル状サマリー */
.pill-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pill-list li {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.7rem;
}

.pill-list li.first {
    background: var(--color-secondary);
}

.pill {
    flex: 2;
    display: inline-block;
    padding: 8px 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge {
    padding: 8px 16px;
    border-radius: .6rem;
    font-size: 0.6rem;
    border: 1px solid transparent;
    vertical-align: middle;
}

.badge.ok {
    color: #067;
    background: #e6fff7;
    border-color: #bdece0;
}

/* 詳細カード */
.pill-list li {
    justify-content: flex-start;
}

.commentary .pill {
    flex: 0 0 190px;
}


@media (max-width: 768px) {
    #filter .wrap {
        padding: 64px 16px;
    }

    #filter .wrap > div {
        flex-wrap: wrap;
    }

    #lab-results {
        padding: 24px;
    }

    #lab-results .summary {
        flex-direction: column;
    }

    .commentary .pill {
        flex: 0 0 88px;
    }
}


/* =====================
 野菜洗浄
 ===================== */
#cleaning {
    background: linear-gradient(
            180deg,
            #f5f9ff 0%,
            #f5f9ff 55%,
            #eef7f3 100%   /* ごく薄いミントグリーン #EEF7F3 */
    );
}

#cleaning .intro,
#cleaning .graph {
    display: flex;
    align-content: flex-start;
    gap: 32px;
}

#cleaning .intro img,
#cleaning .graph img {
    max-width: 400px;
    max-height: 400px;
}

#cleaning .intro img {
    border-radius: 50%;
}

@media (max-width: 768px) {
    #cleaning .intro,
    #cleaning .graph {
        flex-wrap: wrap;
    }

    #cleaning .graph {
        flex-direction: column-reverse;
    }
}

/* =====================
 商品詳細
 ===================== */
#product {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url(img/water-purifier_overray.webp) no-repeat top center / contain fixed;
}

#product h3 {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #ccc;
}

#product .wrap {
    display: flex;
    gap: 40px;
}

#product .wrap img {
    max-width: 320px;
    border-radius: 32px;
    background-color: rgba(255, 255, 255, 0.8);
}

#product ul.usage {
    display: flex;
    justify-content: center;
    gap: 16px;
}

#product ul.usage li {
    flex: 1;
}

#product .iconlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#product .iconlist li {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .4rem 0;
}

#product .iconlist--google li::before {
    content: 'task_alt'; /* ← 'water_drop' に変えると水滴アイコンに */
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primary);
    display: inline-block;
    transform: translateY(.1rem); /* ベースライン合わせ微調整 */
}

/* “水滴”にしたい場合（クラスで切り替え） */
#product .iconlist--water li::before {
    content: 'water_drop';
}

/* “チェック丸”にしたい場合 */
#product .iconlist--check li::before {
    content: 'check_circle';
}

#product .usage img {
    border: 4px solid var(--color-primary);
    border-radius: 100%;
}

@media (max-width: 768px) {
    #product {
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url(img/water-purifier.webp) no-repeat top center / contain fixed;;
    }

    #product .wrap {
        flex-wrap: wrap;
        justify-content: center;
    }


    #product ul.usage {
        flex-direction: column;
        gap: 40px;
    }
}


/* =====================
 ご利用いただいた方の声
 ===================== */
#voice {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url(img/voice_bg.webp) repeat top center / contain;
}

#voice .voice__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#voice .voice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 48%;
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: repeating-linear-gradient(
            to bottom,
            #fffdf7, /* ベース色 */ #fffdf7 28px,
            #e8ecef 29px, /* 横罫線 */ #fffdf7 30px
    );
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

#voice .voice-card::before,
#voice .voice-card::after {
    content: "";
    position: absolute;
    width: 70px; /* テープの幅 */
    height: 22px; /* テープの高さ */
    background: repeating-linear-gradient(
            45deg,
            #f8f5d7,
            #f8f5d7 6px,
            #f0ecca 6px,
            #f0ecca 12px
    ); /* マスキングテープ風のストライプ */
    opacity: 0.9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: rotate(-4deg);
    z-index: 2;
}

/* 左上 */
#voice .voice-card::before {
    top: -12px;
    left: 16px;
    transform: rotate(-6deg);
    border-radius: 2px;
}

/* 右下 */
#voice .voice-card::after {
    bottom: -12px;
    right: 16px;
    transform: rotate(6deg);
}

#voice h3 {
    font-size: 1.5rem;
    line-height: 1.5;
}

#voice .voice-card__text {
    flex-grow: 1;
    margin-bottom: 16px;
}

#voice .voice-card img {
    height: 360px;
    object-fit: contain;
    border: 8px solid var(--color-secondary);
    border-radius: 16px;
    background: #fff;
}

#voice .voice__list {
    width: 64%;
}

#voice .voice-item {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

#voice .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

#voice .icon svg {
    color: #ff6b6b; /* 好きな色に */
}

#voice .voice__summary_containar {
    display: flex;
    justify-content: center;
}

#voice .voice__summary_wrap {
    width: 64%;
}

@media (max-width: 767px) {
    #voice .voice__summary_wrap,
    #voice .voice-card {
        width: 100%;
    }

    .voice__summary {
        text-align: left;
    }

    #voice .voice-item {
        text-align: left;
    }
}


/* =====================
 他社比較
 ===================== */
#comparison .table-wrap {
    position: relative;
    overflow-x: auto; /* SP横スクロール */
    -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
    border: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    background: #fff;
}

#comparison .comparison-table {
    width: 100%;
    min-width: 768px;
    border-collapse: collapse;
    border-spacing: 0;
}

/* 見出し行 */
#comparison .comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 0 8px 24px;
    background-color: var(--color-bg-sub);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

/* セル */
#comparison .comparison-table th[scope="row"],
#comparison .comparison-table td {
    padding: 16px;
    vertical-align: top;
    border-top: 1px solid var(--color-border);
}

/* 行頭（種類） */
#comparison .comparison-table th[scope="row"] {
    position: relative;
    white-space: nowrap;
    font-weight: 700;
    padding-left: 24px;
}

/* 本製品行の薄アクア帯ハイライト（左帯＋淡い背景） */
#comparison .comparison-table tbody tr.is-recommended {
    background-image: linear-gradient(90deg, rgba(47, 168, 204, .22) 0 8px, rgba(47, 168, 204, .06) 8px 100%);
}

/* セル内のリスト整形 */
#comparison .comparison-table td ul {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.8rem;
}

#comparison .comparison-table td ul li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 24px;
    line-height: 1.2;
}

#comparison .comparison-table td ul li::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(img/check-gray.png) no-repeat center/100% 100%;;
}

#comparison .comparison-table .is-recommended td ul li::before {
    background: url(img/check-blue.png) no-repeat center/100% 100%;;
}

#comparison .comparison-table small {
    color: var(--color-muted);
}

#comparison .reason {
    display: flex;
    gap: 16px;
}

#comparison .reason li {
    position: relative;
    flex: 1;
    align-items: center;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background-color: #fff;
}

#comparison .reason li img.icon {
    max-width: 64px;
}

#comparison .reason li img.no {
    position: absolute;
    top: -40px;
    left: -8px;
    max-width: 104px;
}

#comparison .scroll-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 16px;
    color: #fff;
    font-size: 2.5rem;
    animation: pulse 2s infinite; /* アニメーションの適用 */
}

#comparison .scroll-arrow span {
    font-size: 0.8rem;
}

#comparison .sp {
    display: none;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 768px) {
    #comparison .reason {
        flex-direction: column;
        gap: 56px;

    }

    .comparison__summary {
        text-align: left;
    }

    #comparison .sp {
        display: flex;
    }
}


/* =====================
 あとで読む
 ===================== */
.save {
    margin: 56px 0;
    padding: 0 16px;
}

.save-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 16px;
    background: #f5fbff;             /* うっすら水色で「水」感 */
    border-radius: 16px;
    border: 1px solid #dceaf5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.save-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.save-text {
    line-height: 1.7;
}

.save-text .emphasis {
    font-size: 1.5rem;
}

/* ボタンエリア */
.save-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.save-btn {
    display: block;
    text-align: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

/* LINEボタン（メイン） */
.save-btn--line {
    background-color: #06c755;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.save-btn--line:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) inset;
}

/* メールボタン（サブ） */
.save-btn--mail {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cfd8e3;
}

/* ブックマーク */
.save-bookmark {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* キー表現を少しチップっぽく */
.save-bookmark .kbd {
    display: inline-block;
    padding: 1px 4px;
    margin: 0 1px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    font-size: 11px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f9f9f9;
}

/* 注意書き */
.save-note {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #777777;
}

/* PCではボタンを横並びに */
@media (min-width: 768px) {
    .save-card {
        padding: 24px 36px 24px;
    }

    .save-actions {
        flex-direction: row;
        justify-content: center;
        gap: 32px;
    }

    .save-btn {
        display: block;
        text-align: center;
        padding: 16px 32px;
        border-radius: 999px;
    }

    .save-btn {
        width: auto;
        min-width: 220px;
    }
}


/* =====================
 価格説明
 ===================== */
#price {
    background: linear-gradient(180deg, #e9faff 0%, #f0faff 100%);
}

#price .wrap {
    display: flex;
    align-items: center;
    gap: 40px;
}

#price .pet,
#price .server {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 40px;
}

#price .pet img,
#price .server img {
    display: inline;
    width: auto;
}

#price .exp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}

#price .exp img {
    max-width: 360px;
}

#price .ban-icon {
    position: relative;
    display: inline-block;
    width: 360px; /* お好みで調整 */
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    border: 16px solid var(--color-secondary);
}

#price .ban-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 斜線 */
#price .ban-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 16px;
    background: var(--color-secondary);
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
}

#price .pill {
    position: relative;
    display: block;
    padding: 16px 40px;
    border-radius: 16px;
    background: #2FA8CC;
    color: #fff;
    text-align: center;
    font-weight: 700;
}

#price .pill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px; /* 三角を下に出す */
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px; /* 上が尖った三角形 */
    border-style: solid;
    border-color: #2FA8CC transparent transparent transparent;
}

#price .figure {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
}

#price .figure p {
    flex: 1;
    display: inline-block;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background-color: #fff;
}

/*ペットボトルと比べると*/
#price .pricecard li {
    max-width: 680px;
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

#price .first {
    position: relative;
    background-color: #fff;
}

#price .second {
    background-color: #fff;
}

#price .first::before {
    content: "";
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 64px 200px 0 200px;
    border-style: solid;
    border-color: #2FA8CC transparent transparent transparent;
    z-index: 1;
}

#price .first::after {
    content: "コラーナなら";
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    z-index: 2;
}

/*安心容量*/
#price .faucet > * {
    flex: 1;
    width: 50%;
}

#price .usage-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

#price .usage-cards .card {
    flex: 1 1 calc(50% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: #f9fbfc;
    border: 1px solid #e1ebef;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    padding: 16px;
}

#price .card__icon {
    font-size: 48px;
    color: #2FA8CC;
    margin-bottom: 8px;
}

#price .card__text {
    margin: 0;
    font-weight: 600;
    color: #2b5965;
    font-size: 1.5rem;
}

#price .card__text .tea {
    font-size: 1.8rem;
    font-weight: 700;
}

/*まとめ*/
#price .summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 24px 0 80px;
}

#price .summary-cards .card {
    flex: 1 1 calc(33.333% - 20px);
    background: #f9fbfc;
    border: 1px solid #e1ebef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    padding: 24px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#price .card__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2b5965;
    line-height: 2;
}

#price .card__text strong {
    color: #2FA8CC;
    font-size: 1.5rem;
}

#price .first::before {
    bottom: -56px;
    border-width: 64px 160px 0 160px;
}

#price .faucet > * {
    width: 100%;
}

@media (max-width: 768px) {
    #price .wrap {
        flex-wrap: wrap;
    }

    #price .summary-cards {
        flex-direction: column;
    }
}

/* =====================
 コンバージョン
 ===================== */
.cv p {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .cv p {
        font-size: 6.4vw;
    }
}

/* =====================
 特典
 ===================== */
#present-section {
    background: #fffaf3; /* 柔らかい生成色 */
    border-top: 2px solid #f0e0b2;
    border-bottom: 2px solid #f0e0b2;
    padding: 80px 20px;
}

#present-section .strong {
    font-size: 130%;
}

.present__inner {
    max-width: 820px;
    margin: 0 auto;
    color: #333;
    line-height: 1.8;
}

.present__title {
    color: #795e00;
    font-weight: 700;
    text-align: center;
}

.present__subtitle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 24px;
    color: #b08000;
    font-size: 1.4rem;
    font-weight: 600;
}

.present__subtitle img {
    width: 24px;
    object-fit: contain;
}

.present__card {
    padding: 16px;
    border: 3px solid #b08000;
    border-radius: 16px;
    background-color: #fff;
}

.present__points {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.present__points li {
    flex: 1;
    margin-bottom: 6px;
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
}

.present__text h4,
.present__limited h4,
.present__closing h4 {
    color: #795e00;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.present__limited .emphasis {
    background: linear-gradient(
            to bottom,
            transparent 32%,
            rgba(255, 59, 59, 0.35) 100%
    );
}

/* ボタン全体のスタイル */
#present-section .btn {
    position: relative;
    display: inline-block;
    padding: 20px 60px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #d3a31f;
    border-radius: 10px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

#present-section .btn:hover {
    transform: scale(1.03);
}

/* ボタンのキラッ演出 */
#present-section .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 4s ease-in-out infinite;
    z-index: 2;
    border-radius: 10px;
}

/* キラッと光るアニメーション */
@keyframes shine {
    0% {
        left: -75%;
    }
    8% {
        left: 125%;
    }
    100% {
        left: 125%;
    }
}

.present__notes {
    margin-top: 40px;
    font-size: 0.9rem;
    color: #555;
    list-style: none;
    padding: 0;
}

@media (max-width: 768px) {
    .present__points {
        flex-direction: column;
        align-items: center;
    }

    .present__title {
        text-align: left;
    }

    .present__subtitle {
        align-items: center;
    }
}


/* =====================
 返金保証
 ===================== */
#refund {
    background-image: url("img/refund_bg.webp");
    background-size: contain;
}

/* 共通：カードレイアウト */
#refund .refund-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 32px 28px 36px;
    margin-bottom: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* カード①：保証の要点 */
#refund .refund-card--main {
    position: relative;
}

#refund .refund-card--main .unused {
    max-width: 540px;
    padding: 24px;
    border-radius: 16px;
    background: rgba(47, 168, 204, 0.05);
    font-size: 0.8rem;
}

#refund .conditions {
    position: relative;
    display: inline-block;
    padding: 16px 32px 4px;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    background: #fff;
}

#refund .conditions::before {
    content: "";
    position: absolute;
    top: -24px;
    right: -56px;
    width: 100px;
    height: 100px;
    background: url(img/badge.webp) no-repeat top center / cover;
    transform: rotate(12deg);
}

#refund .conditions li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 24px;
    line-height: 1.2;
}

#refund .conditions li::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 16px;
    height: 16px;
    background: url(img/check-blue.png) no-repeat center/100% 100%;
}

#refund .thought li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 24px;
    padding-bottom: 4px;
    line-height: 1.2;
}

#refund .thought li::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(img/heart.webp) no-repeat center/100% 100%;
    animation: bounce 1.6s ease-in-out infinite alternate;
}

/* カード②の最後のメッセージ */
#refund .refund-message {
    text-align: center;
    font-weight: 600;
    color: #3b4760;
}

/* カード③：サポートカード */
#refund .refund-card--support {
    background: none;
    box-shadow: none;
}

/* 「買ったら終わり〜」見出しを少し目立たせる */
#refund .refund-card--support h3 {
    text-align: center;
}

/* サポート文の最後を少しハイライト */
#refund .support-message {
    display: inline-block;
    padding: 24px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-weight: 600;
}

@media (max-width: 768px) {
    #refund p {
        text-align: left;
    }

    #refund .conditions {
        padding: 32px 56px 32px 16px;
    }

    #refund .conditions::before {
        top: -24px;
        right: -20px;
        transform: rotate(0deg);
    }

    #refund .refund-card--support h3,
    #refund .refund-message,
    #refund .support-message {
        text-align: left;
    }
}


/* =====================
 無料診断
 ===================== */
#diagnosis {
    background-color: #e7f7ff;      /* やさしい水色背景 */
}

.diagnosis-inner {
    max-width: 720px;
    margin: 0 auto;
}

.diagnosis-badge {
    display: flex;
    justify-content: center;
    padding: 4px 24px;
    background-color: #00a0c6;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.diagnosis-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    color: #145b7f;
}

.diagnosis-lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.diagnosis-steps {
    list-style: none;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.diagnosis-steps li {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 8px;
    color: #333;
}

.diagnosis-step-label {
    display: inline-block;
    min-width: 70px;
    padding: 2px 8px;
    margin-right: 6px;
    border-radius: 9999px;
    background-color: #fff;
    color: #00a0c6;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid #c8e7f5;
}

.diagnosis-button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 9999px;
    background-color: #ff7a3c;  /* 既存CTAに合わせてオレンジ想定 */
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}

.diagnosis-button:hover,
.diagnosis-button:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    opacity: 0.96;
}

.diagnosis-note {
    font-size: 0.8rem;
    color: #666;
}


/* =====================
 よくある質問
 ===================== */
#faq {
    padding: 60px 20px;
    background: #f9fafa;
}

#faq h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
}

#faq .qa-item {
    background: #fff;
    border: 1px solid #e0e7ea;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#faq .qa-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

#faq .q-label {
    color: #2FA8CC;
    font-weight: bold;
    margin-right: 8px;
}

#faq .a-label {
    color: #555;
    font-weight: bold;
    margin-right: 4px;
}

#faq .qa-item p {
    line-height: 1.6;
}

#faq .faq-more {
    line-height: 1.2;
}

#faq .faq-more summary {
    margin-top: 24px;
    padding: 32px;
    border: 1px solid var(--color-secondary);
    border-radius: 8px;
    background: #fff;
    color: var(--color-secondary);
    font-weight: bold;
    cursor: pointer;
    font-size: 1.5rem;
}

#faq .faq-more summary::after {
    content: "touch_app"; /* アイコン名 */
    font-family: "Material Symbols Outlined";
    font-size: 1.5rem;
    color: var(--color-secondary);
}

#faq .faq-more[open] summary {
    margin-bottom: 12px;
}

#faq .faq-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#faq .faq-more li {
    padding: 32px;
    background: #fff;
    border: 1px solid #e0e7ea;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#faq .ng_ex {
    display: flex;
    gap: 32px;
    align-items: center;
}

#faq .ng_ex img {
    max-width: 80px;
}

#faq .inst_sample {
    display: flex;
    flex-direction: column;
}

#faq .inst_sample .wrap {
    position: relative;
    display: inline-block; /* 画像サイズに合わせる */
}

#faq .inst_sample .wrap img {
    width: auto;
    max-width: min(100%, 768px); /* ウィンドウ幅と768pxの小さい方 */
    height: auto;
    border-radius: 16px;
}

#faq .inst_sample .wrap .en {
    font-size: 1.4rem;
}

#faq .inst_sample .wrap .inst_label {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    #faq .inst_sample .wrap img {
        width: 100%;
    }

    #faq .qa-item {
        padding: 24px;
    }
}


/* =====================
 追伸
 ===================== */
#ps {
    padding: 60px 20px;
    background: repeating-linear-gradient(
            to bottom,
            #fffdf7, /* ベース色 */ #fffdf7 28px,
            #e8ecef 29px, /* 横罫線 */ #fffdf7 30px
    );
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    position: relative;
}

/* 左の縦ライン（便箋感を強調） */
#ps::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px; /* 行頭からの距離 */
    width: 2px;
    background: rgba(255, 0, 0, 0.2); /* 赤系の薄い縦線 */
}

@media (max-width: 768px) {
    #ps::before {
        content: none;
    }
}


/* =====================
 フッター
 ===================== */
footer {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 40px 0;
}

footer a:not(:first-child) {
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}

/* トップへ戻るボタン */
#page_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    padding: 0;
    background-color: var(--color-secondary);
    opacity: 0.6;
    border-radius: 50%;
    z-index: 10;
}

#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Material Icons';
    content: "arrow_upward";
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-size: 32px;
}

@media (max-width: 768px) {
    #page_top {
        bottom: 10px;
        transition: bottom 0.3s ease;
    }
}