/* Minification failed. Returning unminified contents.
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,18): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(118,25): run-time error CSS1039: Token not allowed after unary operator: '-dot'
(119,24): run-time error CSS1039: Token not allowed after unary operator: '-dot'
(120,27): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(123,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(136,17): run-time error CSS1039: Token not allowed after unary operator: '-dot'
(137,18): run-time error CSS1039: Token not allowed after unary operator: '-dot'
(139,22): run-time error CSS1039: Token not allowed after unary operator: '-dot-color'
(144,26): run-time error CSS1039: Token not allowed after unary operator: '-dot-color'
(152,28): run-time error CSS1039: Token not allowed after unary operator: '-badge-border'
(153,17): run-time error CSS1039: Token not allowed after unary operator: '-badge-text'
(160,29): run-time error CSS1039: Token not allowed after unary operator: '-dot'
(168,17): run-time error CSS1039: Token not allowed after unary operator: '-title'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(186,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(266,15): run-time error CSS1039: Token not allowed after unary operator: '-lock-top'
(308,46): run-time error CSS1039: Token not allowed after unary operator: '-rot'
(312,50): run-time error CSS1039: Token not allowed after unary operator: '-rot'
(652,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(653,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(654,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(656,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(657,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(662,32): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-offset'
(669,34): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-dur'
(669,55): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-ease'
(669,88): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-dur'
(669,109): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-ease'
(673,36): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-delay-top'
(673,64): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-delay-top'
(677,36): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-delay-bottom'
(677,67): run-time error CSS1039: Token not allowed after unary operator: '-talk-anim-delay-bottom'
 */
/*ベースのフォント設定*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
h1, h2, h3, h4, h5, h6 {
    all: unset;
    display: block;
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo', sans-serif !important;
}

p{
    margin-bottom:0px !important;
}

/* Font Awesome の場合 */
.fa, .fas, .far, .fal, .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900; /* アイコン用のウェイトも指定 */
}

/* Material Icons の場合 */
.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
}

/*基本の背景デザイン*/
.new-top-background-section {
    background-color: #EAF8F7;
    background-image: radial-gradient(rgba(122,186,187,.28) 0.8px, transparent 0.9px);
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: 0 0;
}

/*見出しフォント*/
.font-head {
    font-size: 50px;
    font-weight: 900;
    color: #569999;
}

/*見出しの装飾*/
.heading-accent-line {
    height: 4px;
    width: 72px;
    margin-top: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #7ABABB 0 56%, #676767 56% 100%);
}

.font-head-sub {
    line-height:1.8;
    font-size: 19px;
}


/*大きいデバイスのとき*/
@media (min-width: 1600px) {
    .font-head {
        font-size: 60px;
    }

    .font-head-sub {
        font-size: 23px;
    }
}

/*小さいデバイスのとき*/
@media screen and (max-width: 790px) {
    .font-head {
        font-size: 34px;
    }

    .font-head-sub {
        font-size: 17px;
        line-height: 1.6;
    }
}

/*フォントカラー*/
.color-emphasis {
    color: #569999;
    font-weight: 900;
    background: linear-gradient(transparent 60%, #FFF2A8 80%);
}

.color-emphasis-nomarker {
    color: #569999;
    font-weight: 900;
}

/* ===== AnimaPick Timeline (standalone) ===== */
.ap-timeline {
    /* theme */
    --dot: 16px;
    --gap: 2rem;
    --line: #CBEDEA;
    --dot-color: #0C5555;
    --badge-bg: #EAF8F7;
    --badge-border: #CBEDEA;
    --badge-text: #0C5555;
    --title: #569999;
    --text: #31545a;
    max-width: 72rem;
}

.ap-tl-item {
    position: relative;
    margin: var(--gap) 0;
}

    .ap-tl-item:not(:last-of-type)::after {
        content: "";
        position: absolute;
        left: calc(var(--dot) * .5);
        top: calc(var(--dot) * .5);
        bottom: calc(var(--gap) * -1.8);
        transform: translateX(-1px);
        width: 2px;
        background: var(--line);
        border-radius: 1px;
        opacity: .95;
        z-index: 0;
    }

.ap-tl-head {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.ap-tl-dot {
    width: var(--dot);
    height: var(--dot);
    border-radius: 9999px;
    background: var(--dot-color);
    z-index: 1; 
}

    .ap-tl-dot.is-active {
        background: var(--dot-color);
    }

.ap-tl-badge {
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--badge-border);
    color: var(--badge-text);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}

.ap-tl-body {
    padding-left: calc(var(--dot) + 1rem);
    margin-top: .5rem;
}

.ap-tl-title {
    margin: 0 0 .25rem 0;
    line-height: 1.55;
    font-weight: 800;
    color: var(--title);
}

.ap-tl-text {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

.ap-note {
    color: #6c8a8e;
    margin-top: .25rem;
}


/* mobile */
@media (max-width: 960px) {
    .ap-timeline {
        --dot: 14px;
        --gap: 1.25rem;
    }
}

/*支援先の保護活動者を表示するエリア*/
.partner-track {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    will-change: transform;
}

.track-area {
    width: 120px;
    text-align: center;
}

.track-area {
    width: 120px;
    text-align: center;
}

.track-area-image {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 6px;
    border: 2px solid rgba(122,208,208,0.35);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.track-area-text {
    font-size: 12.5px;
    line-height: 1.3;
    color: #555;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*＝＝＝＝＝＝＝＝＝*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*バナー広告のイメージ図*/
.ad-sample {
    bottom: 11.2%;
    right: 3.8%;
    width: 63.3%
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*共通ロード画面*/
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#fff 0%, #EAF8F7 100%);
    transition: opacity .4s ease;
}

    #loading-overlay.is-hide {
        opacity: 0;
        pointer-events: none;
    }

.scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    top: var(--lock-top, 0);
}

.overlay-c .bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.overlay-c .paw {
    position: absolute;
    color: #7AD0D0;
    opacity: .12;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.05));
}

.overlay-c .p1 {
    font-size: 120px;
    right: 12%;
    top: 12%;
    animation: float 4.2s ease-in-out infinite;
    transform: rotate(12deg);
}

.overlay-c .p2 {
    font-size: 160px;
    left: 10%;
    bottom: 14%;
    animation: float 5s ease-in-out infinite .3s;
    transform: rotate(-8deg);
}

.overlay-c .p3 {
    font-size: 90px;
    right: 24%;
    bottom: 22%;
    animation: float 4.6s ease-in-out infinite .6s;
    transform: rotate(6deg);
}

@keyframes float {
    0%,100% {
        transform: translateY(0) rotate(var(--rot,0deg));
    }

    50% {
        transform: translateY(-10px) rotate(var(--rot,0deg));
    }
}

.overlay-c .center {
    text-align: center;
    padding: 0 24px;
}

.overlay-c .logo {
    width: min(56vw, 260px);
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.overlay-c .note {
    color: #247a7a;
    font-weight: 700;
    letter-spacing: .08em;
}

@media (prefers-reduced-motion: reduce) {
    .overlay-c .paw {
        animation: none;
    }
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*オリジナルモーダル*/
.custom-modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
    overscroll-behavior: contain;
}

.custom-modal-main {
    background: #fff;
    border-radius: 18px;
    width: 60%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    position: relative;
    min-height: 200px;
    max-height: 90vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .custom-modal-main {
        width: 92%;
    }
}

.custom-modal-page {
    display: none;
    font-size: 17px;
    color: #0C5555;
}

    .custom-modal-page.active {
        display: block;
    }

.custom-modal-footer {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-modal-btn {
    padding: 8px 24px;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    background: #7AD0D0;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}

    .custom-modal-btn:disabled {
        background: #ccc;
        color: #fff;
        cursor: not-allowed;
    }

body.noscroll {
    overflow: hidden;
    height: 100vh;
}

.talk-modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0,0,0,0.48);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

.talk-content-stretch-outer {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    pointer-events: none;
}

    .talk-content-stretch-outer.is-center {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

.talk-content-stretch {
    width: 50vw;
    margin: 0 auto;
    pointer-events: auto;
}

.talk-content-stretch-outer.is-center .talk-content-stretch {
    max-height: calc(100vh - 8vh);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.talk-set {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    width: 100%;
    min-width: 0;
    overflow:hidden;
}

    .talk-set.left {
        align-items: flex-start;
        padding-left: 15px;
        padding-right: 15px;
    }

    .talk-set.right {
        align-items: flex-end;
        padding-left: 15px;
        padding-right: 15px;
    }

.talk-bubble {
    background: #fff;
    border-radius: 2vw;
    min-width: 14vw;
    max-width: 80vw;
    color: #1B2321;
    box-shadow: 0 4px 14px rgba(0,0,0,0.13);
    margin-bottom: 0.7vh;
    position: relative;
    word-break: break-word;
    z-index: 2;
    text-align: left;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

    .talk-bubble:after {
        content: "";
        position: absolute;
        bottom: -1.8vw;
        border: 1.2vw solid transparent;
        z-index: 1;
    }

.talk-set.left .talk-bubble:after {
    left: 3vw;
    border-top: 1.5vw solid #fff;
    border-right: 1.5vw solid transparent;
}

.talk-set.right .talk-bubble:after {
    right: 3vw;
    border-top: 1.5vw solid #fff;
    border-left: 1.5vw solid transparent;
}

.talk-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    pointer-events: auto;
    max-width: 22vw;
}

    .talk-char img {
        width: 140px;
        height: auto;
        filter: drop-shadow(0 5px 11px rgba(0,0,0,0.11));
        margin-bottom: 2px;
    }

.talk-char-name {
    color: #ffffff;
    padding: 2px 2vw;
    font-weight: 500;
    margin-top: 2px;
    overflow-x: auto;
    text-align: center;
}

.talk-gap {
    min-height: 15px;
}

.talk-hit {
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 10000; 
    pointer-events: auto;
    touch-action: pan-y;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.talk-hit-left {
    left: 0;
    width: 8vw;
    background-color: rgba(255, 255, 255, 0.03);
}

.talk-hit-right {
    right: 0;
    width: 8vw;
    background-color: rgba(255, 255, 255, 0.03);
}

.talk-hit:active {
    background: rgba(0,0,0,0.07);
}

.talk-hit.disabled {
    pointer-events: none;
    background: transparent;
}

.talk-hit-left::after,
.talk-hit-right::after {
    content: "";
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.60); /* 丸の土台 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px; /* アイコンの大きさ */
}

/* 左の“<”をSVGに置換 */
.talk-hit-left[data-icon="left"]::after {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ffffff' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/>\
</svg>");
}

/* 右の“>”をSVGに置換 */
.talk-hit-right[data-icon="right"]::after {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ffffff' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/>\
</svg>");
}

/* 最終ページの“✔” */
.talk-hit-right[data-icon="check"]::after {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%237fff00' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/>\
</svg>");
}

/* 無効時は非表示（必要なら） */
.talk-hit.disabled::after {
    display: none;
}

@media (max-width: 768px) {
    .talk-hit-left,
    .talk-hit-right {
        width: clamp(56px, 18vw, 240px);
    }

    .talk-content-stretch {
        width: 80vw;
    }

    .talk-bubble:after {
        bottom: -2.3vw;
    }

    .talk-set.left .talk-bubble:after {
        left: 6vw;
    }

    .talk-set.right .talk-bubble:after {
        right: 7vw;
    }

    .talk-char img {
        width: 125px;
    }
}

:root {
    /* ふわっと感の調整（遅め） */
    --talk-anim-dur: 680ms;
    --talk-anim-ease: cubic-bezier(.21,.61,.35,1);
    --talk-anim-offset: 14px;
    /* 上下のディレイ（任意で調整可） */
    --talk-anim-delay-top: 170ms;
    --talk-anim-delay-bottom: 750ms;
}

.talk-bubble.talk-anim {
    opacity: 0;
    transform: translateY(var(--talk-anim-offset));
    will-change: opacity, transform;
}

    .talk-bubble.talk-anim.in {
        opacity: 1;
        transform: none;
        transition: opacity var(--talk-anim-dur) var(--talk-anim-ease), transform var(--talk-anim-dur) var(--talk-anim-ease);
    }

        .talk-bubble.talk-anim.in[data-pos="top"] {
            transition-delay: var(--talk-anim-delay-top), var(--talk-anim-delay-top);
        }

        .talk-bubble.talk-anim.in[data-pos="bottom"] {
            transition-delay: var(--talk-anim-delay-bottom), var(--talk-anim-delay-bottom);
        }

@media (prefers-reduced-motion: reduce) {
    .talk-bubble.talk-anim,
    .talk-bubble.talk-anim.in {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}