@charset "utf-8";

/* ============================================================
   index.css  ―  トップページ専用スタイル
   色・角丸・影は common.css の変数を使用（未定義時はフォールバック値）
   ============================================================ */

/* ---------- ボタン共通 ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 28px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible{
    outline: 3px solid var(--color-accent, #C9A86A);
    outline-offset: 3px;
}
.btn:hover{
    transform: translateY(-2px);
}
.btn-primary{
    background: var(--color-primary, #0A3D62);
    border-color: var(--color-primary, #0A3D62);
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 61, 98, .25);
}
.btn-primary:hover{
    background: var(--color-accent, #C9A86A);
    border-color: var(--color-accent, #C9A86A);
    color: #fff;
    box-shadow: 0 10px 24px rgba(10, 61, 98, .3);
}
.btn-outline{
    background: #fff;
    border-color: var(--color-primary, #0A3D62);
    color: var(--color-primary, #0A3D62);
}
.btn-outline:hover{
    background: var(--color-primary, #0A3D62);
    color: #fff;
}
.btn-ghost{
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}
.btn-ghost:hover{
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}

/* ---------- ヒーロー ---------- */
.main-visual{
    min-height: 560px;
    padding: 100px 16px 70px;
    background-image:
        linear-gradient(rgba(6, 28, 48, .58), rgba(6, 28, 48, .58)),
        url("img/main.webp");
    background-size: cover;
    background-position: center;
    color: ivory;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow{
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--color-accent, #C9A86A);
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0;
    animation: heroFadeUp .6s ease forwards;
    animation-delay: .1s;
}
.hero-positive.top-title{
    font-size: clamp(26px, 4.2vw, 42px);
    line-height: 1.55;
    letter-spacing: .04em;
    font-weight: 700;
    color: ivory;
    margin: 0 0 22px;
    opacity: 0;
    animation: heroFadeUp .9s ease forwards;
    animation-delay: .3s;
}
.hero-negatives{
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
.hero-neg{
    margin: 0;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.7;
    color: ivory;
    opacity: 0;
    animation: heroFadeUp .8s ease forwards;
}
.hero-neg:nth-child(1){ animation-delay: .7s; }
.hero-neg:nth-child(2){ animation-delay: .9s; }
.hero-neg:nth-child(3){ animation-delay: 1.1s; }

.hero-cta{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    animation: heroFadeUp .8s ease forwards;
    animation-delay: 1.3s;
}
/* 暗い背景上では主CTAをゴールドにして視認性を確保 */
.main-visual .btn-primary{
    background: var(--color-accent, #C9A86A);
    border-color: var(--color-accent, #C9A86A);
    color: var(--color-primary, #0A3D62);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.main-visual .btn-primary:hover{
    background: #fff;
    border-color: #fff;
    color: var(--color-primary, #0A3D62);
}
.contact-subtext{
    margin-top: 14px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    letter-spacing: .5px;
    animation: heroFadeUp .8s ease forwards;
    animation-delay: 1.5s;
}

/* ---------- メイン領域 ---------- */
.main{
    padding: 0;
    color: var(--color-text-light, #555);
    text-align: center;
}

/* ---------- 会社紹介 + 事業の流れ ---------- */
.services{
    padding: 80px 0 90px;
    background: #fff;
    text-align: center;
}
.service-copy{
    display: block;
    margin: 0 0 28px;
    padding: 0 16px;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.6;
    color: var(--color-primary, #0A3D62);
}
.service-description{
    max-width: 760px;
    margin: 0 auto 64px;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1.95;
    color: var(--color-text-light, #555);
}
.biz-block{
    max-width: 980px;
    margin: 0 auto;
    padding: 44px 40px;
    background: var(--color-accent-tint, #F7F1E4);
    border-radius: var(--radius-card, 14px);
    text-align: left;
}
.biz-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.biz-head h3{
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary, #0A3D62);
}
.card-icon{
    font-size: 24px;
    color: var(--color-primary, #0A3D62);
}
.biz-lead{
    margin: 0 0 30px;
    line-height: 1.8;
    color: var(--color-text-light, #555);
}
.flow{
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.flow-step{
    position: relative;
    padding: 28px 22px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card, 0 4px 16px rgba(0, 0, 0, .08));
}
.flow-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--color-accent, #C9A86A);
    color: #fff;
    font-weight: 700;
}
.flow-step h4{
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--color-primary, #0A3D62);
}
.flow-step p{
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-light, #555);
}
.biz-action{
    margin: 0;
    text-align: center;
}

/* ---------- AI推定ツール ---------- */
.tools{
    padding: 80px 0 90px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.section-title{
    margin: 0 0 14px;
    padding: 0 16px;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.5;
    color: var(--color-primary, #0A3D62);
}
.section-lead{
    max-width: 640px;
    margin: 0 auto 44px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-text-light, #555);
}
.tool-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}
.tool-card{
    display: flex;
    flex-direction: column;
    padding: 36px 32px 30px;
    background: #fff;
    border-radius: var(--radius-card, 14px);
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, .08));
    text-align: left;
    transition: box-shadow .25s ease, transform .25s ease;
}
.tool-card:hover{
    box-shadow: var(--shadow-card-hover, 0 10px 30px rgba(0, 0, 0, .14));
    transform: translateY(-4px);
}
.tool-card-header{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.tool-card-header h3{
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary, #0A3D62);
}
.tool-card > p{
    margin: 0 0 24px;
    line-height: 1.75;
    color: var(--color-text-light, #555);
}
.tool-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}
.tool-note{
    margin: 14px 0 0 !important;
    font-size: 13px;
    line-height: 1.6;
    color: #888 !important;
}

/* ---------- 固定CTA（スマホのみ） ---------- */
.sticky-cta{
    display: none;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px){
    .main-visual{
        min-height: 520px;
        padding: 90px 16px 56px;
    }
    .hero-cta{
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    .hero-cta .btn{
        width: 100%;
    }
    .services,
    .tools{
        padding: 56px 0 64px;
    }
    .service-description{
        margin-bottom: 44px;
        font-size: 16px;
    }
    .biz-block{
        margin: 0 16px;
        padding: 28px 20px;
    }
    .flow{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .tool-grid{
        grid-template-columns: 1fr;
    }
    .tool-card{
        padding: 28px 22px 24px;
    }

    .sticky-cta{
        display: flex;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        transform: translateY(110%);
        transition: transform .3s ease;
    }
    .sticky-cta.is-visible{
        transform: translateY(0);
    }
    .sticky-cta .btn{
        flex: 1;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 14px;
    }
    body.mobile-menu-open .sticky-cta{
        display: none;
    }
    body{
        padding-bottom: 70px;
    }
}

/* ---------- 動きを減らす設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce){
    .hero-eyebrow,
    .hero-positive.top-title,
    .hero-neg,
    .hero-cta,
    .contact-subtext{
        animation: none;
        opacity: 1;
    }
    .btn,
    .tool-card,
    .sticky-cta{
        transition: none;
    }
}