/* =========================================
   GOOD JOB FITNESS あさか
   「私たちが目指していること」ページ専用CSS
   配置想定：/css/brand-page.css
   対象HTML：/about/our-vision.html
========================================= */

:root {
    --brand-orange: #ff9929;
    --brand-orange-dark: #e77f0e;
    --brand-orange-soft: #fff6ec;
    --brand-cream: #fff9f2;
    --brand-white: #ffffff;
    --brand-text: #333333;
    --brand-text-sub: #666666;
    --brand-border: rgba(255, 153, 41, 0.24);
    --brand-shadow-soft: 0 18px 50px rgba(70, 48, 24, 0.10);
    --brand-content: 720px;
    --brand-wide: 1180px;
    --brand-radius: 28px;
    --brand-transition: 0.55s ease;
}

/* ===== ページ全体 ===== */
body.brand-page-body {
    background: var(--brand-white);
    color: var(--brand-text);
}

body.brand-page-body main {
    padding-top: 0 !important;
}

.brand-page,
.brand-page * {
    font-family: "UDモトヤマルベリ", "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}

.brand-page {
    overflow: clip;
}

.brand-page img {
    width: auto;
    height: auto;
    height: 50%;
}

.brand-page strong {
    font-weight: 800;
}

.brand-section,
.brand-hero,
.brand-related-links,
.brand-closing {
    position: relative;
}

.brand-section-inner,
.brand-hero-inner,
.brand-related-links-inner,
.brand-closing-inner {
    width: min(100% - 40px, var(--brand-wide));
    margin-inline: auto;
}

.brand-copy {
    width: min(100%, var(--brand-content));
}

.brand-copy-narrow {
    margin-inline: auto;
}

.brand-section-inner-wide {
    width: min(100% - 40px, 1280px);
}

/* ===== Hero ===== */
.brand-hero {
    padding: clamp(92px, 10vw, 150px) 0 clamp(100px, 12vw, 170px);
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 153, 41, 0.10), transparent 28%),
        linear-gradient(180deg, #fffdf9 0%, #ffffff 72%);
}

.brand-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-page-title {
    margin: 0;
    color: var(--brand-text);
    font-size: clamp(2.35rem, 5.2vw, 4rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: center;
}

.brand-page-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 999px;
    background: var(--brand-orange);
}

.brand-hero-visual {
    width: min(100%, 1040px);
    margin: clamp(54px, 7vw, 92px) auto 0;
}

.brand-hero-visual img {
    display: block;
    object-fit: contain;
}

.brand-intro {
    margin: clamp(64px, 8vw, 104px) auto 0;
}

.brand-intro-title {
    margin: 0 0 34px;
    color: var(--brand-text);
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
}

/* ===== 本文共通 ===== */
.brand-section {
    padding: clamp(108px, 11vw, 160px) 0;
}

.brand-section-header {
    margin-bottom: clamp(44px, 5vw, 68px);
}

.brand-section-header-center {
    text-align: center;
}

.brand-section-title {
    margin: 0;
    color: var(--brand-text);
    font-size: clamp(2.15rem, 4.2vw, 3.45rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.brand-section-title-left {
    text-align: center;
}

.brand-section-lead {
    margin: 22px 0 0;
    color: #4d4d4d;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.8;
}

.brand-prose {
    color: var(--brand-text);
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    line-height: 2;
}

.brand-prose p {
    margin: 0 0 1.35em;
}

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

.brand-quote {
    color: var(--brand-orange);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.8;
}

.brand-quote-center {
    text-align: center;
}

.brand-scenes {
    margin: clamp(34px, 5vw, 54px) 0;
    padding-left: 24px;
    border-left: 3px solid var(--brand-orange);
}

.brand-scenes p {
    margin-bottom: 0.65em;
}

.brand-closing-copy {
    margin-top: clamp(46px, 6vw, 72px) !important;
    color: var(--brand-text);
    font-size: clamp(1.12rem, 1.8vw, 1.42rem);
    font-weight: 600;
    line-height: 1.95;
}

.brand-closing-copy strong {
    color: var(--brand-orange);
}

.brand-closing-copy-center {
    text-align: center;
}

.brand-emphasis {
    margin-block: clamp(44px, 6vw, 68px) !important;
    color: var(--brand-text);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.8;
}

.brand-key-message {
    margin: clamp(52px, 7vw, 82px) auto !important;
    color: var(--brand-text);
    font-size: clamp(1.35rem, 2.35vw, 1.95rem);
    font-weight: 700;
    line-height: 1.9;
    text-align: center;
}

.brand-key-message-quiet {
    font-weight: 600;
}

/* ===== 2カラム ===== */
.brand-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(54px, 7vw, 96px);
    align-items: center;
}

.brand-split-text-first .brand-copy {
    order: 1;
}

.brand-split-text-first .brand-photo {
    order: 2;
}

.brand-photo {
    overflow: hidden;
    border-radius: var(--brand-radius);
    background: #f5eee6;
    box-shadow: var(--brand-shadow-soft);
}

.brand-photo img {
    display: block;
    /* aspect-ratio: 4 / 5; */
    object-fit: cover;
}

.brand-photo-feature {
    width: min(100%, 1160px);
    margin: 0 auto clamp(70px, 8vw, 110px);
}

.brand-photo-feature img {
    aspect-ratio: 16 / 8.8;
}

/* ===== 来てよかった ===== */
.brand-origin {
    background: var(--brand-white);
}

.brand-origin .brand-quote {
    margin: clamp(46px, 6vw, 70px) 0 !important;
    font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}

.brand-origin .brand-scenes {
    margin-block: clamp(42px, 6vw, 64px);
}

/* ===== 安心できる場所 ===== */
.brand-philosophy {
    background: var(--brand-cream);
}

.brand-inner-voice {
    margin: clamp(38px, 5vw, 56px) 0;
    padding: 28px 0 28px 28px;
    border-left: 3px solid rgba(255, 153, 41, 0.55);
}

.brand-inner-voice p {
    margin-bottom: 0.7em;
}

.brand-inner-voice-accent {
    border-left-color: var(--brand-orange);
}

/* ===== 地域・暮らし ===== */
.brand-community {
    background: var(--brand-white);
}

/* ===== その先を支える ===== */
.brand-bridge {
    background: var(--brand-orange-soft);
}

/* ===== ここなら大丈夫 ===== */
.brand-relationship {
    background: var(--brand-white);
}

.brand-relationship .brand-copy {
    margin-inline: auto;
}

/* ===== 私たちの約束 ===== */
.brand-promise {
    background: var(--brand-cream);
}

.brand-copy-promise {
    width: min(100% - 40px, 800px);
    margin-inline: auto;
}

.brand-promise-list {
    display: grid;
    gap: 34px;
    margin-top: 58px;
}

.brand-promise-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 18px;
    align-items: start;
}

.brand-promise-dot {
    width: 11px;
    height: 11px;
    margin-top: 0.7em;
    border-radius: 50%;
    background: var(--brand-orange);
}

.brand-promise-item p {
    margin: 0;
    color: var(--brand-text);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.95;
}

.brand-promise-highlight {
    margin: clamp(64px, 8vw, 96px) 0;
    text-align: center;
}

.brand-promise-highlight p:last-child {
    margin-top: 14px;
    color: var(--brand-text);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.9;
}

.brand-promise-harton {
    display: block;
    width: clamp(90px, 10vw, 130px);
    margin: 58px auto 0;
}

/* ===== 関連導線 ===== */
.brand-related-links {
    padding: 88px 0 96px;
    background: var(--brand-white);
}

.brand-related-links-inner {
    text-align: center;
}

.brand-related-label {
    margin: 0 0 28px;
    color: var(--brand-text);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
}

.brand-related-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.brand-related-buttons .btn {
    min-width: 210px;
    border-color: var(--brand-orange);
    color: var(--brand-orange);
    background: #fff;
    box-shadow: none;
}

.brand-related-buttons .btn:hover,
.brand-related-buttons .btn:focus-visible {
    color: #fff;
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}

/* ===== 最終セクション ===== */
.brand-closing {
    padding: clamp(118px, 12vw, 180px) 0 clamp(126px, 13vw, 190px);
    color: #fff;
    background: var(--brand-orange-soft);
}

.brand-closing-inner {
    width: min(100% - 40px, 760px);
    text-align: center;
}

.brand-closing-title {
    margin: 0;
    color: var(--brand-text);
    font-size: clamp(2.35rem, 5vw, 3.65rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

.brand-closing-prose {
    margin-top: clamp(46px, 6vw, 74px);
    color: var(--brand-text);
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    font-weight: 500;
    line-height: 2;
}

.brand-closing-prose p {
    margin: 0 0 1.7em;
}

.brand-closing-prose p:last-child {
    margin-bottom: 0;
}

.brand-closing-harton {
    display: block;
    width: clamp(112px, 13vw, 176px);
    margin: clamp(56px, 7vw, 82px) auto 0;
}

.brand-closing-final {
    margin: 38px 0 0;
    color: var(--brand-text);
    font-size: clamp(1.1rem, 1.75vw, 1.45rem);
    font-weight: 700;
    line-height: 1.8;
}

/* ===== フェードイン用 ===== */
.brand-page .brand-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--brand-transition),
        transform var(--brand-transition);
}

.brand-page .brand-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== アクセシビリティ ===== */
.brand-page a:focus-visible,
.brand-page button:focus-visible {
    outline: 3px solid #1f1f1f;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    .brand-page *,
    .brand-page *::before,
    .brand-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .brand-page .brand-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ===== タブレット ===== */
@media (max-width: 960px) {
    .brand-split {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .brand-split .brand-copy,
    .brand-split .brand-photo,
    .brand-split-text-first .brand-copy,
    .brand-split-text-first .brand-photo {
        order: initial;
        width: 100%;
    }

    .brand-photo img {
        aspect-ratio: 16 / 10;
    }

    .brand-section-title-left {
        text-align: center;
    }

    .brand-section-header:not(.brand-section-header-center) {
        text-align: center;
    }
}

/* ===== スマートフォン ===== */
@media (max-width: 768px) {

    .brand-section-inner,
    .brand-hero-inner,
    .brand-related-links-inner,
    .brand-closing-inner,
    .brand-copy-promise {
        width: min(100% - 40px, var(--brand-wide));
    }

    .brand-hero {
        padding-top: 72px;
        padding-bottom: 96px;
    }

    .brand-hero-visual {
        margin-top: 48px;
    }

    .brand-intro {
        margin-top: 58px;
    }

    .brand-intro-title {
        margin-bottom: 28px;
        text-align: left;
    }

    .brand-section {
        padding-block: 94px;
    }

    /* .brand-section-title,
    .brand-section-title-left {
        text-align: left;
    } */

    .brand-section-header-center .brand-section-title,
    .brand-section-header-center .brand-section-lead {
        text-align: center;
    }

    .brand-section-title br {
        display: none;
    }

    .brand-prose {
        line-height: 1.95;
    }

    .brand-prose br {
        display: none;
    }

    .brand-quote br,
    .brand-key-message br,
    .brand-closing-copy br,
    .brand-section-lead br,
    .brand-closing-prose br,
    .brand-closing-final br {
        display: initial;
    }

    .brand-scenes {
        padding-left: 18px;
    }

    .brand-inner-voice {
        padding-left: 20px;
    }

    .brand-photo,
    .brand-photo-feature {
        border-radius: 22px;
    }

    .brand-photo-feature {
        margin-bottom: 64px;
    }

    .brand-photo-feature img,
    .brand-photo img {
        aspect-ratio: 4 / 3;
    }

    .brand-promise-list {
        gap: 28px;
        margin-top: 48px;
    }

    .brand-related-links {
        padding: 72px 0 84px;
    }

    .brand-related-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .brand-related-buttons .btn {
        width: 100%;
        min-height: 50px;
    }

    .brand-closing {
        padding-top: 108px;
        padding-bottom: 124px;
    }
}

@media (max-width: 480px) {

    .brand-section-inner,
    .brand-hero-inner,
    .brand-related-links-inner,
    .brand-closing-inner,
    .brand-copy-promise {
        width: min(100% - 32px, var(--brand-wide));
    }

    .brand-page-title {
        letter-spacing: 0.02em;
    }

    .brand-page-title::after {
        margin-top: 22px;
    }

    .brand-section-header {
        margin-bottom: 38px;
    }

    .brand-promise-item {
        grid-template-columns: 12px 1fr;
        gap: 14px;
    }

    .brand-promise-dot {
        width: 9px;
        height: 9px;
    }
}