@charset "UTF-8";

/* ==========================================================================
   sozokutaisaku-new 用 ヘッダー/フッター最小CSS
   - scss/module/_header.scss より .header__* をコンパイル抽出
   - lp/sozokutaisaku/dist ～ style-responsive.css で定義されていた .l-footer / .ft_* / ft_logo 系を移植
   - header/footer の HTML で使われている Tailwind 相当のユーティリティを最小限同梱
   ========================================================================== */

/* ---------- 汎用・リセット（header/footer 内で使う最小限） ---------- */
body { margin: 0; background: #fff; color: #333; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
a { color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }
hr { border: 0; border-top: 1px solid #ddd; margin: 0; }

/* ---------- Tailwind v2 相当：header/footer で使われているユーティリティのみ ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.text-center { text-align: center; }
.leading-normal { line-height: 1.5; }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }
.text-xs { font-size: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.pb-12 { padding-bottom: 3rem; }

/* ---------- PC / SP 表示切り替え（768px ブレイクポイント） ---------- */
.--sp { display: flex; }
.--pc { display: none; }
@media screen and (min-width: 768px) {
    .--sp { display: none; }
    .--pc { display: flex; }
}

/* ==========================================================================
   Header
   ========================================================================== */
header#header {
    position: relative;
    top: 0;
    background-color: #fff;
}
header#header * { box-sizing: border-box; }
header#header a { text-decoration: none !important; }

.header__inr {
    width: 100vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 2.4vw 3.7333333333vw;
    gap: 2.6666666667vw;
}
.header__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4vw;
    margin: 2.4vw 0;
}
.header__logoImg { order: 1; text-align: center; }
.header__logoImg > img {
    width: 18.9333333333vw;
    height: 5.0666666667vw;
    margin-left: 1.3333333333vw;
}
.header__logoCatchphrase {
    order: 2;
    color: #F08D18;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    top: 2px;
}
.header__cta { margin: 0 0 0 auto; }
.header__cta > a { display: flex; align-items: center; }
.header__ctaBadge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}
.header__ctaTel {
    color: #16a34a;
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.2;
}
.header__ctaTel small {
    display: block;
    color: #232b39;
    text-align: center;
    font-weight: 400;
}
header#header .header__result { display: none; height: 100%; }
.header__result > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.6666666667vw;
}
.header__result > ul > li {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #61482d;
    font-size: 2.9333333333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}
.header__result > ul > li::before,
.header__result > ul > li::after {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 4.8vw;
    height: 10.6666666667vw;
    aspect-ratio: 6/13;
}
.header__result > ul > li::before {
    background-image: url(/wp-content/themes/i-sozoku/images/result_deco_l.svg);
}
.header__result > ul > li::after {
    background-image: url(/wp-content/themes/i-sozoku/images/result_deco_r.svg);
}
.header__result > ul > li strong {
    font-size: 3.2vw;
    margin-top: 2px;
    display: block;
}
.header__result > ul > li span {
    font-size: 5.8666666667vw;
    background: linear-gradient(45deg, #a4710b 0%, #c4a00e 45%, #e5c759 70%, #c8a414 85%, #976808 95% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header__result > ul > li:first-of-type strong {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #344B95;
    color: #fff;
    font-size: 2.9333333333vw;
    font-weight: 600;
    line-height: 1;
    margin: 0 auto;
    padding: 2px;
}
.header__result > ul > li:first-of-type span {
    display: block;
    font-size: 6.9333333333vw;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    position: relative;
    text-align: center;
    margin-top: 2px;
}
.header__result > ul > li:first-of-type span::after {
    content: "※";
    display: block;
    font-size: 2.1333333333vw;
    font-weight: 600;
    line-height: 1.2;
    position: absolute;
    top: 0.5333333333vw;
    right: 0;
    color: #61482d;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: initial;
}

@media screen and (min-width: 768px) {
    .header__inr {
        padding: clamp(1px, 1.0909090909vw, 12px) clamp(1px, 9.0909090909vw, 100px);
        width: clamp(1px, 100vw, 1512px);
        gap: 0;
    }
    .header__logo {
        width: auto;
        flex-direction: column;
        gap: clamp(1px, 0.8181818182vw, 9px);
        margin: clamp(1px, 0.8181818182vw, 9px) 0;
    }
    .header__logoCatchphrase {
        order: 1;
        font-size: clamp(1px, 1.0909090909vw, 12px);
    }
    .header__logoImg { order: 2; }
    .header__logoImg > img {
        width: clamp(1px, 14.5454545455vw, 160px);
        height: clamp(1px, 4.0909090909vw, 45px);
        margin-left: 0;
    }
    .header__cta > a {
        flex-direction: row;
        gap: clamp(1px, 0.9090909091vw, 10px);
    }
    .header__ctaBadge {
        width: clamp(1px, 5.8181818182vw, 64px);
        height: clamp(1px, 5.8181818182vw, 64px);
        font-size: clamp(1px, 1.8181818182vw, 20px);
    }
    .header__ctaTel { font-size: clamp(1px, 3.6363636364vw, 40px); }
    .header__ctaTel small { font-size: clamp(1px, 1.4545454545vw, 16px); }
    .header__result {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(1px, 1.8181818182vw, 20px);
    }
    .header__result > ul {
        flex-flow: row;
        gap: clamp(1px, 0.9090909091vw, 10px);
        margin-left: clamp(1px, 1.8181818182vw, 20px);
    }
    .header__result > ul > li {
        max-width: clamp(1px, 19.0909090909vw, 210px);
        font-size: clamp(1px, 0.9090909091vw, 10px);
    }
    .header__result > ul > li::before,
    .header__result > ul > li::after {
        width: clamp(1px, 2.7272727273vw, 30px);
        height: clamp(1px, 6vw, 66px);
        aspect-ratio: 17/37;
    }
    .header__result > ul > li strong {
        font-size: clamp(1px, 1.2727272727vw, 14px);
        letter-spacing: .06em;
    }
    .header__result > ul > li span {
        font-size: clamp(1px, 2.5454545455vw, 28px);
    }
    .header__result > ul > li:first-of-type { max-width: clamp(1px, 19.0909090909vw, 210px); }
    .header__result > ul > li:first-of-type strong {
        padding: 2px 1px;
        font-size: clamp(1px, 1vw, 11px);
    }
    .header__result > ul > li:first-of-type span {
        line-height: 1.2;
        font-size: clamp(1px, 3.2727272727vw, 36px);
        margin-right: 0;
    }
    .header__result > ul > li:first-of-type span::after {
        top: clamp(1px, 0.4545454545vw, 5px);
        right: clamp(-10px, -0.9090909091vw, -1px);
        font-size: clamp(1px, 1vw, 11px);
    }
}

/* ==========================================================================
   Footer (.l-footer)
   ========================================================================== */
.l-footer {
    background: #f6f5f1;
    color: #333;
    margin-top: 40px;
    padding: 24px 16px 0;
}
.l-footer .footer-inner { max-width: 960px; margin: 0 auto; }
.l-footer .wrapper { max-width: 960px; margin: 0 auto; padding: 0 8px; }
.l-footer .ft_logo_txt { font-size: 14px; }
.l-footer .ft_logo_ks { width: 144px; height: auto; }
.l-footer .ft_logo { max-width: 120px; height: auto; }
.l-footer .ft_txt { font-size: 13px; color: #555; }
.l-footer hr { margin: 16px auto; max-width: 960px; border-top: 1px solid #ddd; }
.l-footer address { font-style: normal; color: #888; }