@charset "utf-8";

#proposal {
    .wrap {
        padding-bottom:0;
    }
    .wrap2 {
        background:url(../img/sales/bg01.jpg) no-repeat center center/cover;
        position:relative;
        padding:90px 0 60px;
        &::before {
            content:'';
            display:block;
            width:100%;
            height:100%;
            position:absolute;
            z-index:0;
            top:0;
            left:0;
            background:url(../img/sales/bg.svg) no-repeat right bottom/contain;
        }
        .contents {
            position:relative;
            z-index:1;
            h3 {
                font-size:4rem;
                line-height:1.5;
                color:#FFFFFF;
                text-align:center;
                text-shadow:2px 2px 4px rgba(0,0,0,.5);
                margin-top:2em;
                margin-bottom:1em;
                span {
                    font-size:1.33em;
                }
            }
            .contents_inner {
                padding:50px 10%;
                margin:0 auto;
                background-color:rgba(0,0,0,.5);
                p {
                    font-size:2.0rem;
                    line-height:1.6;
                    color:#FFFFFF;
                    font-weight:600;
                    &:not(:last-child) {
                        margin-bottom:1em;
                    }
                }
            }
        }
    }
}

#needs {
    .wrap {
        padding-top:90px;
        .contents {
            & > p {
                margin-bottom:3em;
            }
            ul {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                grid-column-gap:5%;
                li {
                    &:nth-child(even) {
                        img {
                            order:2;
                        }
                    }
                    a {
                        display:grid;
                        justify-items:center;
                        grid-row-gap:15px;
                        h3 {
                            font-size:3.0rem;
                        }
                        p {
                            font-size:1.8rem;
                            font-weight:600;
                            line-height:1.5;
                            text-align:center;
                        }
                    }
                }
            }
        }
    }
}

.type {
    .wrap {
        position:relative;
        overflow:clip;
        padding-bottom:60px;
        &::before {
            content:'';
            display:block;
            width:200vw;
            height:50%;
            position:absolute;
            right:calc(50% - 300px);
            top:40px;
            background-color:#000000;
            z-index:-1;
        }
        .contents {
            .titbox {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                align-items:end;
                margin-bottom:30px;
                h2 {
                    font-size:8.0rem;
                    line-height:1;
                    color: #FFFFFF;
                    -webkit-text-stroke-width: 2px;
                    -webkit-text-stroke-color: #000000;
                    text-stroke-width: 2px;
                    text-stroke-color:#000000;
                    margin-bottom:0;
                    display:block;
                    padding-bottom:.33em;
                    font-weight:800;
                    font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
                    &::before {
                        content:none;
                    }
                }
                p {
                    font-size:3.0rem;
                    color:#FFFFFF;
                    line-height:1.5;
                }
            }
            .contents_inner {
                background-color:#f5f5f5;
                box-shadow:0 3px 6px rgba(0,0,0,.15);
                display:grid;
                grid-template-columns:repeat(2,1fr);
                .detail {
                    padding:50px;
                    h3 {
                        font-size:3.0rem;
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                    p {
                        font-size:1.8rem;
                        line-height:1.8;
                        font-weight:600;
                    }
                    ul {
                        font-size:1.8rem;
                        li {
                            line-height:1.8;
                            font-weight:600;
                        }
                    }
                }
                .img {
                    height:100%;
                    img {
                        width:100%;
                        height:100%;
                        object-fit:cover;
                    }
                }
            }
        }
    }
    &#type_a {
        .wrap {
            &::before {
                background: #335693;
                background: linear-gradient(0deg,#335693 0%, #88a9db 100%);
            }
            .contents {
                .titbox {
                    h2 {
                        -webkit-text-stroke-color: #88a9db;
                        text-stroke-color:#88a9db;
                        order:1;
                    }
                }
                .contents_inner {
                    .detail {
                        h3 {
                            color:#527bba;
                        }
                    }
                }
            }
        }
    }
    &#type_b {
        .wrap {
            &::before {
                right:auto;
                left:calc(50% - 600px);
                background: #b68b08;
                background: linear-gradient(0deg,#b68b08 0%, #f9d35a 100%);
            }
            .contents {
                .titbox {
                    h2 {
                        -webkit-text-stroke-color: #f9d35a;
                        text-stroke-color:#f9d35a;
                    }
                }
                .contents_inner {
                    .detail {
                        order:1;
                        h3 {
                            color:#eab339;
                        }
                    }
                }
            }
        }
    }
    &#type_c {
        .wrap {
            &::before {
                background: #4f7832;
                background: linear-gradient(0deg,#4f7832 0%, #a2ca8c 100%);
            }
            .contents {
                .titbox {
                    h2 {
                        -webkit-text-stroke-color: #a2ca8c;
                        text-stroke-color:#a2ca8c;
                        order:1;
                    }
                }
                .contents_inner {
                    .detail {
                        h3 {
                            color:#4f7832;
                        }
                    }
                }
            }
        }
    }
    &#type_d {
        .wrap {
            padding-bottom:90px;
            &::before {
                right:auto;
                left:calc(50% - 600px);
                background: #b75715;
                background: linear-gradient(0deg,#b75715 0%, #f0ab7b 100%);
            }
            .contents {
                .titbox {
                    h2 {
                        -webkit-text-stroke-color: #f0ab7b;
                        text-stroke-color:#f0ab7b;
                    }
                }
                .contents_inner {
                    .detail {
                        order:1;
                        h3 {
                            color:#ef8740;
                        }
                    }
                }
            }
        }
    }
    &.type_en {
        .wrap {
            .contents {
                .titbox {
                    p {
                        line-height:1;
                        font-size:2.5rem;
                    }
                }
            }
        }
    }
}

#flow {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-row-gap:50px;
                li {
                    box-shadow:0 3px 6px rgba(0,0,0,.15);
                    position:relative;
                    display:grid;
                    grid-template-columns:auto 1fr 25%;
                    align-items:center;
                    &:not(:last-child) {
                        &::after {
                            content:'';
                            display:block;
                            width:60px;
                            height:20px;
                            background-color:#cc0000;
                            clip-path:polygon(0 0,100% 0,50% 100%);
                            position:absolute;
                            left:calc(50% - 30px);
                            bottom:-35px;
                        }
                    }
                    h3 {
                        font-size:10rem;
                        padding:0 .5em;
                        line-height:1;
                        color:var(--color_main);
                        display:grid;
                        text-align:center;
                        span {
                            font-size:1.8rem;
                        }
                    }
                    .detail {
                        padding:50px 30px 50px 0;
                        h4 {
                            font-size:2.4rem;
                            margin-bottom:.5em;
                        }
                    }
                }
            }
        }
    }
}

@media (hover:hover) {

}

@media screen and (max-width:1500px){

    #proposal {
        .wrap2 {
            background:url(../img/sales/bg01.jpg) no-repeat center top 50%/auto 130%;
        }
    }
    
}

@media screen and (max-width:1024px){ 
    
    #proposal {
        .wrap2 {
            .contents {
                position:relative;
                z-index:1;
                h3 {
                    font-size:3rem;
                }
                .contents_inner {
                    p {
                        font-size:1.8rem;
                    }
                }
            }
        }
    }
    
    #needs {
        .wrap {
            .contents {
                ul {
                    grid-column-gap:2%;
                    li {
                        a {
                            p {
                                font-size:min(1.8vw,1.8rem);
                            }
                        }
                    }
                }
            }
        }
    }
    
    .type {
        .wrap {
            .contents {
                .titbox {
                    p {
                        font-size:2.4rem;
                    }
                }
                .contents_inner {
                    .detail {
                        padding:30px;
                        h3 {
                            font-size:2.4rem;
                        }
                        p {
                            font-size:1.6rem;
                        }
                        ul {
                            font-size:1.6rem;
                        }
                    }
                }
            }
        }
        &.type_en {
            .wrap {
                .contents {
                    .titbox {
                        p {
                            font-size:2.2rem;
                        }
                    }
                }
            }
        }
    }
    
    #flow {
        .wrap {
            .contents {
                .contents_inner {
                    li {
                        h3 {
                            font-size:8rem;
                        }
                    }
                }
            }
        }
    }
  
}

@media screen and (max-width:768px){
    
    #proposal {
        .wrap2 {
            padding:30px 0;
            background:url(../img/sales/bg01.jpg) no-repeat left calc(50% + 100px) top 100%/auto 110%;
            .contents {
                h3 {
                    font-size:3rem;
                    margin-bottom:1em;
                }
                .contents_inner {
                    padding:20px;
                    p {
                        font-size:1.5rem;
                    }
                }
            }
        }
    }
    
    #needs {
        .wrap {
            padding-top:60px;
            .contents {
                ul {
                    display:grid;
                    grid-template-columns:1fr;
                    grid-row-gap:10px;
                    max-width:400px;
                    margin:0 auto;
                    li {
                        &:nth-child(even) {
                            img {
                                order:unset;
                            }
                        }
                        a {
                            display:grid;
                            grid-template-columns:25% 1fr;
                            grid-gap:10px 5%;
                            justify-items:start;
                            align-items:center;
                            align-content:center;
                            h3 {
                                font-size:2.4rem;
                                text-align:left;
                                align-self:end;
                            }
                            p {
                                font-size:1.4rem;
                                text-align:left;
                                align-self:start;
                                br {
                                    display:none;
                                }
                            }
                            img {
                                grid-area:1/1/3/2;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .type {
        .wrap {
            padding-bottom:50px;
            &::before {
                right:0;
                top:25px;
                height:80%;
            }
            .contents {
                .titbox {
                    grid-template-columns:1fr;
                    margin-bottom:20px;
                    h2 {
                        font-size:5.0rem;
                    }
                    p {
                        font-size:2.0rem;
                    }
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    .detail {
                        padding:20px;
                        h3 {
                            font-size:2.0rem;
                            margin-bottom:.5em;
                        }
                        p {
                            font-size:1.4rem;
                        }
                        ul {
                            font-size:1.4rem;
                        }
                    }
                    .img {
                        height:100%;
                        img {
                            width:100%;
                            height:100%;
                            object-fit:cover;
                        }
                    }
                }
            }
        }
        &#type_a {
            .wrap {
                .contents {
                    .titbox {
                        h2 {
                            order:unset;
                        }
                    }
                }
            }
        }
        &#type_b {
            .wrap {
                &::before {
                    left:0;
                }
                .contents {
                    .contents_inner {
                        .detail {
                            order:unset;
                        }
                    }
                }
            }
        }
        &#type_c {
            .wrap {
                .contents {
                    .titbox {
                        h2 {
                            order:unset;
                        }
                    }
                }
            }
        }
        &#type_d {
            .wrap {
                &::before {
                    left:0;
                }
                .contents {
                    .contents_inner {
                        .detail {
                            order:unset;
                        }
                    }
                }
            }
        }
        &.type_en {
            .wrap {
                .contents {
                    .titbox {
                        p {
                            font-size:1.8rem;
                        }
                    }
                }
            }
        }
    }
    
    #flow {
        .wrap {
            .contents {
                .contents_inner {
                    li {
                        grid-template-columns:1fr auto;
                        h3 {
                            font-size:6rem;
                            justify-self:start;
                            span {
                                font-size:1.6rem;
                            }
                        }
                        .img {
                            img {
                                max-width:150px;
                            }
                        }
                        .detail {
                            grid-area:2/1/3/3;
                            padding:20px;
                            h4 {
                                font-size:1.8rem;
                            }
                        }
                    }
                }
            }
        }
    }
    
}