@charset "utf-8";
/*
Theme Name: ニジナビ
Author: yuta.s
Author URI: https://addone-works.com
Description:ニジナビのテーマ
version: 1.0.0
*/

/*common
-----------------------------------------------------------------------------------------*/

/*header
-----------------------------------------------------------------------------------------*/
.header_top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.header_top_inner {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 110px;
}

.header_brand {
    display: flex;
    align-items: center;
    gap: 28px;
    text-decoration: none;
}

.header_logo {
    display: block;
    width: 105px;
    height: auto;
}

.header_job {
    margin: 0 0 6px;
    line-height: 1.5;
}

.header_name {
    margin: 0;
    line-height: 1.5;
}

.button_contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 999px;
    transition:
        background-color .25s,
        transform .25s;
}

.button_contact:hover {
    background-color: rgb(13, 86, 111);
    transform: translateY(-2px);
}

.button_contact_icon {
    width: 18px;
    height: 18px;
    display: block;
}

.header_contact {
    min-width: 180px;
    min-height: 54px;
    padding: 10px 24px;
}

.header_contact_icon {
    width: 18px;
    height: 18px;
}

.header_fv {
    padding-top: 110px;
    /*"header_topの高さ*/
}

.header_fv_inner {
    width: 92%;
    margin: 0 auto;
    height: 720px;
    border-radius: 0 0 25px 25px;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .75) 28%,
            rgba(255, 255, 255, .15) 55%,
            rgba(255, 255, 255, 0) 75%),
        url("./images/nijinavi_pc2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.header_fv_text {
    width: 42%;
    padding-left: 80px;
}

.header_copy {
    margin-bottom: 35px;
    font-size: 320%;
    line-height: 1.45;
}

.header_lead {
    margin-bottom: 45px;
    font-size: 150%;
    line-height: 2;
}

/*footer
-----------------------------------------------------------------------------------------*/
.footer {
    padding-top: 40px;
}

.footer_logo {
    display: block;
    width: 190px;
    height: auto;
    margin: 0 auto;
}

.footer_name {
    margin-top: 5px;
    font-size: 16px;
    line-height: 1.7;
}

.footer_information {
    display: grid;
    gap: 24px;
    max-width: 760px;
    margin: 45px auto 0;
    padding: 38px 60px;
    border-top: 1px solid rgb(207, 214, 218);
    border-bottom: 1px solid rgb(207, 214, 218);
}

.footer_information_item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.footer_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer_address {
    margin: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.9;
    letter-spacing: 0.05em;
}

.footer_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: inherit;
    font-size: 15px;
    line-height: 1.8;
    text-decoration: none;
    transition:
        color 0.25s,
        opacity 0.25s;
}

.footer_link:hover,
.footer_nav a:hover {
    color: rgb(13, 86, 111);
    opacity: 0.75;
}

.footer_external_icon {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin: 36px 0;
}

.footer_nav a {
    color: inherit;
    line-height: 1.8;
    text-decoration: none;
    transition:
        color 0.25s,
        opacity 0.25s;
}

.footer_nav_separator {
    color: rgb(150, 160, 165);
}

.footer_copy {
    padding: 10px 0;
}

.footer_sp_only {
    display: none;
}

.footer_logo_link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.footer_logo_note{
    font-size: 13px;
    letter-spacing: .08em;
    transition: opacity .25s;
}

.footer_logo_link:hover .footer_logo_note {
    opacity: .6;
}

/* Turnstile
----------------------------------------------------------------------------------------- */
.previous_button_flex .cf7-cf-turnstile {
    padding-top: 20px;
}

/* 人も企業も、アニメーション
----------------------------------------------------------------------------------------- */
.header_lead {
    position: relative;
    display: inline-block;
}

.header_lead span {
    position: relative;
    display: block;
    width: fit-content;
    z-index: 1;
}

/* 文字の後ろを通過する虹色の帯 */
.header_lead span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10%;
    z-index: -1;

    width: 100%;
    height: 55%;

    border-radius: 3px;

    background: linear-gradient(
        90deg,
        rgb(245, 198, 208) 0%,
        rgb(247, 223, 170) 25%,
        rgb(191, 225, 200) 50%,
        rgb(188, 215, 238) 75%,
        rgb(213, 200, 232) 100%
    );

    transform: scaleX(0);
    transform-origin: left;

    animation: rainbowSweep 1.2s
        cubic-bezier(.77, 0, .18, 1) forwards;
}

/* 2行目は少し遅れて */
.header_lead span:nth-child(2)::before {
    animation-delay: .2s;
}


/* ==============================
   最後に残る細い虹ライン
   ============================== */

.header_lead::after {
    content: "";
    display: block;

    width: 0;
    height: 2px;
    margin-top: 8px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        rgb(243, 166, 184),
        rgb(246, 207, 114),
        rgb(143, 207, 168),
        rgb(142, 189, 230),
        rgb(181, 164, 220)
    );

    animation: rainbowLine 1s 1.25s
        cubic-bezier(.22, 1, .36, 1) forwards;
}


/* ==============================
   Animation
   ============================== */

/*
   0〜45%   左から虹色が伸びる
   45〜55%  一瞬全面を覆う
   55〜100% 左側から消えて右へ抜ける
*/
@keyframes rainbowSweep {

    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    45% {
        transform: scaleX(1);
        transform-origin: left;
    }

    55% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}


/* 下の虹ライン */
@keyframes rainbowLine {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* スマホ
----------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .header_top_inner {
        width: 92%;
        min-height: 72px;
    }

    .header_brand {
        gap: 10px;
        min-width: 0;
    }

    .header_logo {
        width: 62px;
        flex-shrink: 0;
    }

    .header_brand_text {
        min-width: 0;
    }

    .header_job {
        margin-bottom: 2px;
        font-size: 10px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .header_name {
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .header_contact {
        min-width: auto;
        min-height: 40px;
        padding: 8px 10px;
        gap: 6px;
        flex-shrink: 0;
    }

    .header_contact_icon {
        width: 11px;
        height: 11px;
    }

    .header_fv {
        padding-top: 60px;
    }

    .header_fv_inner {
        position: relative;
        width: 94%;
        height: min(650px, calc(100svh - 72px));
        min-height: 540px;
        border-radius: 0 0 18px 18px;
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, .96) 0%,
                rgba(255, 255, 255, .84) 36%,
                rgba(255, 255, 255, .18) 66%,
                rgba(255, 255, 255, 0) 100%),
            url("./images/nijinavi_sp2.webp");
        background-size: cover;
        background-position: center;
        align-items: flex-start;
    }

    .header_fv_text {
        width: 100%;
        padding: 130px 24px 0;
        box-sizing: border-box;
        text-align: left;
    }

    .header_copy {
        margin-bottom: 22px;
        font-size: clamp(27px, 8vw, 38px);
        line-height: 1.45;
    }

    .header_lead {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.9;
    }

    .footer_logo {
        width: 150px;
    }

    .footer_name {
        font-size: 14px;
    }

    .footer_information {
        gap: 22px;
        margin-top: 35px;
        padding: 30px 5px;
    }

    .footer_information_item {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
        gap: 13px;
    }

    .footer_icon svg {
        width: 21px;
        height: 21px;
    }

    .footer_address,
    .footer_link {
        font-size: 13px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    .footer_nav {
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }

    .footer_nav_separator {
        display: none;
    }

    .footer_sp_only {
        display: block;
    }
}