@charset "utf-8";

    body {
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans JP', sans-serif;
        color: #131313;
        letter-spacing: .1em;
    }

    /*------------------------
    共通
    ------------------------*/
    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }

    .contain {
        background-size: contain;
    }

    .cover {
        background-size: cover;
    }

    .bg-top-center {
        background-position: top center;
    }

    .no-repeat {
        background-repeat: no-repeat;
    }

    .bg-text {
        font-size: 4rem;
        padding-top: 1.7rem;
        letter-spacing: .1em;
    }

    .flex {
        display: flex;
    }

    .wrap {
        flex-wrap: wrap;
    }

    .reverse {
        flex-direction: row-reverse;
    }

    .row-gap {
        row-gap: 4rem;
    }

    .space-between {
        justify-content: space-between;
        align-items: center;
    }

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

    .w1200 {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .center {
        text-align: center;
    }

    .left {
        text-align: left;
    }

    .bold {
        font-weight: bold;
    }

    .font-m {
        font-size: 1.3rem;
    }

    .brown {
        color: #a4820c;
    }

    /*------------------------
    header
    ------------------------*/
    .header-inner {
        padding: 1rem 0;
    }

    .button-wrapper .button {
        display: block;
        color: #111;
        background-color: #f8e559;
        border-radius: 7px;
        padding: 0.6rem 1.5rem;
        text-decoration: none;
    }

    /*------------------------
    FV
    ------------------------*/
    .mv-inner {
        background-image: url(../images/fv_bg_pc.png);
    }

    .mv-inner .text-container {
        width: 50%;
    }

    .mv-copy {
        font-size: 3.5rem;
        letter-spacing: .1em;
    }

    .mv-copy span {
        display: inline-block;
        background-color: #fff;
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }

    .mv-copy span:last-child {
        margin-bottom: 0;
    }

    .mv-description {
        padding: 2.5rem 1.5rem 0 0.5rem;
        text-align: justify;
        line-height: 2.8rem;
        font-weight: 500;
    }

    /*------------------------
    cta(green)
    ------------------------*/
    .cta-wrapper-green {
        background-color: #2da638;
        padding: 3rem 0;
    }

    .cta-wrapper-green p {
        margin-bottom: 2rem;
    }

    .cta-wrapper-green figure {
        margin-bottom: 1.5rem;
    }

    /*------------------------
    cta(yellow)
    ------------------------*/
    .cta-wrapper-yellow {
        background-color: #f8e559;
    }

    .cta-wrapper-yellow .cta-inner p {
        font-size: 2.5rem;
    }

    .cta-wrapper-yellow .cta-inner p span {
        font-size: 3rem;
        font-weight: bold;
    }


    /*------------------------
    worried
    ------------------------*/
    .worried-inner {
        background-image: url(../images/bg02_01_pc.png);
        background-position: bottom center;
        height: 840px;
        position: relative;
    }

    .worried-inner .worried-box .title {
        display: block;
        background-color: #fff;
        color: #666768;
        padding: 0.3rem 1rem;
        border-radius: 50px;
        width: fit-content;
        margin: 0 auto;
        margin-bottom: 1rem;
        font-size: 2rem;
    }

    .worried-inner .worried-box .sub-title {
        color: #fff;
        font-size: 3rem;
    }

    .worried-box {
        padding-top: 4rem;
    }

    .worried-box figure {
        position: absolute;
        bottom: 0;
    }

    /*------------------------
    leave
    ------------------------*/
    .leave-inner {
        background-image: url(../images/bg02_03_pc.png), url(../images/bg02_04_pc.png);
        background-position: top left, right bottom;
        margin: -280px 0 0 0;
    }

    .leave-box {
        padding-top: 25rem;
    }

    .leave-box .title {
        font-size: 3rem;
        margin-bottom: 1rem;
        font-weight: bold;
    }

    /*チェックリスト*/
    .leave-box ul {
        padding: 0.5em 1em 1em 3em;
        position: relative;
    }

    .leave-inner ul li {
        line-height: 1.6;
        padding: 0.5em 0;
        list-style-type: none !important;
    }

    .leave-inner ul li:before {
        content: url(../images/leave_img04.png);
        position: absolute;
        left: 0.5em;
    }

    /*チェックリストここまで*/


    /*------------------------
    campaign
    ------------------------*/
    .campaign-inner {
        background-image: url(../images/bg03_01_pc.png);
        background-position: bottom center;
    }

    .campaign-inner h2 {
        background-image: url(../images/bg03_02_pc.png);
    }

    .campaign-inner h2 {
        padding: 2rem 0 5rem;
    }

    .campaign-inner h2 img {
        max-width: 60px;
        height: auto;
    }

    .campaign-inner h2 p span {
        font-size: 2.5rem;
        font-weight: normal;
        border-bottom: 1px solid #131313;
        padding-bottom: 0.3rem;
        width: fit-content;
    }

    .campaign-inner .detail {
        padding: 4rem 0 8rem;
    }

    .campaign-inner .detail figure:first-of-type {
        margin-bottom: 3rem;
    }

    .campaign-inner .detail .notes {
        color: #fff;
        font-size: 2.5rem;
        margin-bottom: 0.7rem;
        font-weight: bold;
    }

    /*------------------------
     solution
    ------------------------*/
    .solution-inner {
        background-image: url(../images/bg07_pc_01.png), url(../images/bg07_pc_02.png);
        background-color: #ffffed;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center, bottom, center;
        padding: 20rem 0;
    }

    .solution-inner h2 {
        background-image: url(../images/ttl_solution.png);
    }

    .solution-inner .description {
        font-size: 1.3rem;
    }

    .solution-inner .case-contents {
        margin-top: 5rem;
    }

    .solution-inner .case-contents .column {
        width: 48%;
    }

    .solution-inner .case-contents .column .title {
        font-size: 1.7rem;
        font-weight: bold;
    }

    /*------------------------
     voice
    ------------------------*/
    .voice-inner {
        background-image: url(../images/bg04_pc.png);
        padding: 10rem 0 8rem;
    }

    .voice-inner h2 {
        background-image: url(../images/ttl_voice.png);
    }

    .voice-container {
        margin-top: 5rem;
    }

    .voice-box {
        filter: drop-shadow(-7px 7px 0px #fcec74);
        background-color: #fff;
        margin-bottom: 5rem;
        padding: 2rem 1rem;
    }

    .voice-box:last-child {
        filter: drop-shadow(7px 7px 0px #fcec74);
    }

    .voice-container .voice-box p {
        width: 70%;
        padding: 0 2rem;
        height: fit-content;
    }

    .voice-container .voice-box p span {
        line-height: 3;
    }

    /*------------------------
     promises
    ------------------------*/
    .promises-inner {
        background-image: url(../images/bg05_pc.png);
        padding: 10rem 0 0;
        position: relative;
    }

    .promises-inner h2 {
        background-image: url(../images/ttl_promises.png);
        margin-bottom: 5rem;
    }

    .promises-inner h2 p {
        line-height: 1.3;
    }

    .promises-inner h2 p span {
        font-size: 3.2rem;
    }

    .bg-promise {
        background-color: #f8e559;
        width: 80%;
        border-radius: 0 300px 300px 0;
        padding: 3rem 0 0;
        height: 400px;
    }

    .bg-promise:nth-of-type(2) {
        width: 80%;
        border-radius: 300px 0 0 300px;
        margin-right: 0;
        margin-left: auto;
    }

    .promise-box01 {
        position: absolute;
        top: 21.3%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .promise-box02 {
        position: absolute;
        top: 46.9%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .promise-box03 {
        position: absolute;
        bottom: 7.4%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .bg-promise p {

        margin-bottom: 5rem;
        line-height: 2;
    }

    .bg-promise figure img {
        width: 90%;
    }

    .bg-promise p span {
        font-size: 2.5rem;
        letter-spacing: .2em;
        line-height: 4;
    }

    /*------------------------
    strengths
    ------------------------*/
    .strengths-inner {
        background-image: url(../images/bg08_pc.png);
    }

    .strengths-inner h2 {
        background-image: url(../images/ttl_strengths.png);
        letter-spacing: .05em;
        background-position: bottom 6% center;
        margin-bottom: 3.5rem;
    }

    .strengths-inner h2 p {
        font-size: 4rem;
    }

    .strengths-inner .message {
        line-height: 2.5;
        padding: 0 3rem 5rem 3rem;
    }

    .strengths-inner .message p {
        padding: 0 8rem;
        text-align: justify;
    }

    .strengths-inner .message p span {
        background: linear-gradient(transparent 60%, #f8e559 60%);
    }

    /*------------------------
    form
    ------------------------*/
    .contact-inner {
        background-image: url(../images/bg06_pc.png);
    }

    .contact-inner h2 {
        background-image: url(../images/ttl_form.png);
        background-position: bottom 10% center;
        padding-top: 10rem;
    }

    .form-box {
        width: 100%;
        max-width: 800px;
        margin: 3rem auto 6rem;
    }

    .form-box table {
        width: 100%;
    }

    .contact-inner .form-box tbody th {
        display: inline-block;
    }

    .contact-inner .form-box tbody td {
        display: block;
        width: 100%;
        margin: 0.7rem 0 2rem;
    }

    .contact-inner .form-box .required {
        display: inline;
        background-color: #141414;
        padding: 0.1rem 0.5rem;
        margin-left: 1rem;
        font-weight: bold;
        font-size: 1rem;
        color: #fff;
    }

    .contact-inner .form-box .optional {
        display: inline;
        background-color: #c9c9c9;
        padding: 0.1rem 0.5rem;
        margin-left: 1rem;
        font-weight: bold;
        font-size: 1rem;
        color: #fff;
    }

    input[type=text],
    input[type=tel],
    input[type=email] {
        width: 100%;
        outline: 0;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        -webkit-transition: all .3s;
        transition: all .3s;
        font-size: 1.2rem;
    }

    input[type="text"]:focus,
    input[type=tel]:focus,
    input[type=email]:focus {
        box-shadow: 0 0 7px #f3e285;
        border: 1px solid #f3e285;
    }

    input[type="submit"] {
        margin-top: 2rem;
        padding: 0.8rem 6rem;
        font-size: 1.3rem;
        border-radius: 34px;
        background-color: #f8e559;
        border: none;
        letter-spacing: .2em;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: bold;
    }

    .form-box .submit {
        text-align: center;
        transition: .3s;
    }

    .form-box .submit:hover {
        transition: .5s;
        opacity: .8;
    }

    /*------------------------
    footer
    ------------------------*/

    footer {
        background-color: #d3d3d3;
        text-align: center;
    }

    footer figure {
        padding: 4rem 2rem 1rem;
    }

    footer p {
        padding: 0 0 3rem;
        color: #fff;
    }

    /*スマホ
------------------------------*/

    @media screen and (max-width: 768px) {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        .w1200 {
            width: auto;
            max-width: none;
            margin: 0 auto;
        }

        .w100 {
            width: 100% !important;
        }

        .flex {
            display: block;
        }

        .font-m {
            font-size: 1.2rem;
        }

        .bg-text {
            font-size: 2rem;
            padding-top: 0;
            letter-spacing: .1em;
        }

        /*------------------------
    header
    ------------------------*/
        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.7rem;
        }

        .header-inner figure {
            width: 30%;
        }

        .button-wrapper .button {
            padding: 0.3rem 1rem;
            font-size: 0.8rem;
        }

        /*------------------------
    FV
    ------------------------*/
        .mv-inner {
            background-image: none;
        }

        .mv-inner h1 {
            display: block;
        }

        /*------------------------
    cta(green)
    ------------------------*/
        .cta-wrapper-green {
            padding: 1.5rem 0;
        }

        .cta-wrapper-green p {
            width: 70%;
            margin: 0 auto;
            
        }

        .cta-wrapper-green figure {
            margin-bottom: 0;
            margin: 1rem auto 0;
            width: 80%;
        }

        /*------------------------
    cta(yellow)
    ------------------------*/
        .cta-wrapper-yellow {
            background-color: #f8e559;
            text-align: center;
        }

        .cta-wrapper-yellow .cta-inner p {
            font-size: 1.3rem;
            padding: 1.5rem 1rem 0;
        }

        .cta-wrapper-yellow .cta-inner p span {
            font-size: 1.7rem;
            font-weight: bold;
        }


        /*------------------------
    worried
    ------------------------*/
        .worried-inner {
            height: auto;
            position: relative;

        }

        .worried-inner h2 {
            position: absolute;
            padding: 1.5rem 0.7rem 0.5rem 0.7rem;
        }

        .worried-inner .worried-box .title {
            padding: 0.1rem 0.7rem;
            margin-bottom: 0.2rem;
            font-size: 1rem;
        }

        .worried-inner .worried-box .sub-title {
            font-size: 1.2rem;
        }

        .worried-box {
            padding-top: 0;
        }

        .worried-box figure {
            position: static;
        }

        /*------------------------
    leave
    ------------------------*/
        .leave-inner {
            background-image: url(../images/bg02_02_01sp.png);
            margin: 0;
            background-size: contain;
            background-position: bottom center;
        }

        .leave-box {
            padding: 0;
        }

        .leave-box .title {
            font-size: 1.7rem;
            margin-bottom: 0;
        }

        .leave-box .text-container {
            padding: 0 1rem 3rem;
        }

        .leave-box .text-container figure:first-of-type {
            margin: auto 1rem;
        }

        /*チェックリスト*/
        .leave-box ul {
            padding: 0.5em 0em 1em 2em;
            position: relative;
        }

        .leave-inner ul li {
            line-height: 1.3;
            padding: 0.7em 0;
        }

        .leave-inner ul li:before {
            content: url(../images/leave_img04_sp.png);
            position: absolute;
            left: 0.5em;
        }

        /*チェックリストここまで*/

        /*------------------------
    campaign
    ------------------------*/
        .campaign-inner {
            background-image: none;
            position: relative;
        }

        .campaign-inner h2 {
            background-image: none;
            padding: 0;
            position: absolute;
            top: 2%;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
        }

        .campaign-inner h2 img {
            max-width: auto;
        }

        .campaign-inner h2 p span {
            font-size: 1rem;
            font-weight: normal;
            border-bottom: 1px solid #131313;
            padding-bottom: 0.3rem;
            width: fit-content;
        }

        .campaign-inner .detail {
            padding: 0;
        }

        .campaign-inner .detail figure:first-of-type {
            margin-bottom: 0;
        }

        .campaign-inner .detail .notes {
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 0.2rem;
        }

        .campaign-inner .detail .text {
            position: absolute;
            bottom: 0;
            padding: 0 2rem;
        }

        /*------------------------
     solution
    ------------------------*/
        .solution-inner {
            background-image: url(../images/bg07_sp02.png);
            background-size: contain;
            background-position: bottom center;
            padding: 0 0 3rem;
        }

        .solution-inner h2 {
            background-image: url(../images/ttl_solution.png);
            background-size: contain;
            height: auto;
        }

        .solution-inner .description {
            margin-top: 1rem;
            padding: 0 0.9rem;
            text-align: left;
            text-align: justify;
            font-size: 1.1rem;
        }

        .solution-inner .case-contents {
            margin-top: 3rem;
            padding: 0 0.5rem;
        }

        .solution-inner .case-contents .column {
            width: auto;
            margin-bottom: 3rem;
        }

        .solution-inner .case-contents .column .description {
            padding: 0;
            font-size: 1.1rem
        }

        .solution-inner .case-contents .column:last-of-type {
            margin-bottom: 0;
        }

        .solution-inner .case-contents .column figure:first-of-type {
            width: 40%;
        }

        .solution-inner .case-contents .column .title {
            font-size: 1.2rem;
            font-weight: bold;
        }

        /*------------------------
     voice
    ------------------------*/
        .voice-inner {
            background-image: url(../images/bg04_01_sp.png),url(../images/bg04_02_sp.png);
            padding: 6.7rem 0 1rem;
            background-size: contain,contain;
            background-repeat: no-repeat,repeat;
        }

        .voice-inner h2 {
            background-image: url(../images/ttl_voice.png);
            background-size: contain;
            margin-bottom: 3rem;
        }

        .voice-container {
            text-align: center;
        }

        .voice-box {
            filter: drop-shadow(-4px 4px 0px #fcec74);
            background-color: #fff;
            margin: 2rem 1rem 3rem;
            padding: 2rem 0.5rem;

        }

        .voice-box figure {
            width: 60%;
            margin: 0 auto 1.5rem;

        }

        .voice-box:last-child {
            filter: drop-shadow(4px 4px 0px #fcec74);
        }

        .voice-container .voice-box p {
            width: auto;
            padding: 0 1rem;
            height: fit-content;
            text-align: left;
            text-align: justify;
            font-size: 0.9rem;
        }

        .voice-container .voice-box p span {
            line-height: 1.5;
            font-size: 1.3rem;
            display: block;
        }

        /*------------------------
     promises
    ------------------------*/
        .promises-inner {
            background-image: url(../images/bg05_sp.png);
            background-size: contain;
            background-position: top center;
            padding: 2rem 0 0;
            position: static;
        }

        .promises-inner h2 {
            background-image: url(../images/ttl_promises.png);
            background-size: contain;
            margin-bottom: 2rem;
        }

        .promises-inner h2 p {
            line-height: 1.3;
        }

        .promises-inner h2 p span {
            font-size: 1.2rem;
        }

        .bg-promise {
            background-color: #f8e559;
            width: 90%;
            border-radius: 0 50px 0 0;
            padding: 2rem 0 0 1rem;
            height: auto;
        }

        .bg-promise p {
            padding: 0.5rem 1.5rem 2rem 0;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .bg-promise p span {
            font-size: 1.3rem;
            letter-spacing: .1em;
            line-height: 2;
        }

        .bg-promise:nth-of-type(2) {
            width: 90%;
            border-radius: 50px 0 0 0;
            padding: 2rem 1rem 0 0;
        }

        .bg-promise figure {
            width: 90%;
        }

        .bg-promise figure img {
            width: auto;
        }

        .promise-box01 {
            position: static;
            top: auto;
            left: auto;
            transform: none;
            -webkit-transform: none;
            -ms-transform: none;
            padding: 0;
        }

        .promise-box02 p {
            padding: 0.5rem 0 2rem 1.5rem;
        }

        .promise-box02 figure {
            width: 90%;
            margin-right: 0;
            margin-left: auto;
        }

        .promise-box02 {
            position: static;
            top: auto;
            left: auto;
            transform: none;
            -webkit-transform: none;
            -ms-transform: none;
        }

        .promise-box03 {
            position: static;
            bottom: auto;
            left: auto;
            transform: none;
            -webkit-transform: none;
            -ms-transform: none;
        }

        /*------------------------
    strengths
    ------------------------*/
        .strengths-inner {
            background-image: url(../images/bg08_sp.png);
            background-size: contain;
            background-position: bottom center;
        }

        .strengths-inner h2 {
            background-image: url(../images/ttl_strengths.png);
            letter-spacing: .05em;
            margin-bottom: 0;
            background-size: contain;
            padding: 0 0.5rem;
            width: 85%;
            margin: 0 auto 1.2rem;
        }

        .strengths-inner h2 p {
            font-size: 2rem;
        }

        .strengths-inner .message {
            line-height: 1.7;
            padding: 0;
            padding: 0 1.5rem 3rem;
        }

        .strengths-inner .message p {
            padding: 0;
            text-align: justify;
        }

        .strengths-inner .message p span {
            background: linear-gradient(transparent 60%, #f8e559 60%);
        }

        /*------------------------
    form
    ------------------------*/
        .contact-inner {
            background-image: url(../images/bg06_sp.png);
            background-position: contain;
            background-position: top center;
            padding: 5rem 0 0;
        }

        .contact-inner h2 {
            background-image: url(../images/ttl_form.png);
            background-position: center center;
            background-size: contain;
            padding: 0 0.5rem;
            width: 85%;
            margin: 0 auto 1rem;
            font-size: 1.6rem;
        }

        .contact-inner .description {
            padding: 0 1rem;
            text-align: left;
            text-align: justify;
        }

        .form-box {
            width: auto;
            max-width: none;
            margin: 0;
            padding: 3rem 1rem;
        }

        input[type="submit"] {
            margin-top: 0;
            width: 100%;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: 34px;
        }

        .form-box .submit {
            text-align: center;
            transition: .3s;
        }

        .form-box .submit:hover {
            transition: .5s;
            opacity: .8;
        }

        /*------------------------
    footer
    ------------------------*/
        footer {
            background-color: #d3d3d3;
            padding: 1.5rem 1rem;
        }

        footer figure {
            width: 35%;
            margin: 0 auto;
            margin-bottom: 0.5rem;
            padding: 0;
        }

        footer p {
            font-size: 0.4rem;
            padding: 0;
        }

    }