@charset "UTF-8";
html {
    font-family: 'noto-sans,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif';
    /* color: #303030; */
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
    scroll-behavior: smooth;
}
body {
    font-family: 'noto-sans,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif';
}
body::-webkit-scrollbar {position: absolute;width: 10px;background-color: #f5f5f5;}
body::-webkit-scrollbar-thumb {border-radius: 16px; -webkit-box-shadow: inset 0px 0px 0px 0px rgb(0 0 0 / 25%);background-color: #696969;border: 1px solid #696969;}
body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 8px rgb(0 0 0 / 30%);background-color: #ffffff82;}

.logo-chat-evo {
    padding-left: 10px;
}
.message-status span:last-of-type {
    color: #e14948;
    display: none;
}
.logo-chat-evo img{
    width: 60%;
}
#banner-chat-evo{
    display: flex;
    background-image: url('/img/chat-evo/Background_Contact_13.webp');
    background-repeat: round;
    padding: 20px;
}
#banner-chat-evo .container {
    padding-top: 100px;
    padding-bottom: 100px;
}
.banner-content {
    color: #ffff;
}
.banner-content  h2 {
    font-weight: 700;
}
.banner-content  p{

}
.banner-content ul {
    list-style: none;
    padding: 0px;
    display: inline-flex;
}
.banner-content  li{
    background: #ecb700;
    margin-right: 10px;
    padding: 5px 10px;
    color: black;
}
.banner-image {

}
.banner-image img{
    width: 100%;
}

#banner-2-chat-evo{
    padding: 40px 0px;
    background: #ebebeb;
}
.flex-reverse {
    flex-direction: row-reverse;
}
#banner-2-chat-evo img ,#chat-evo-development-case img{
    width: 100%;
}
#chat-evo-feature h2, #chat-evo-successfull-case h2, #chat-evo-development-case h2 , #chat-evo-development-cost h2{

    font-size: 48px;
    font-weight: 700;
    color: #00B0F0;
}
#chat-evo-feature .container>p , #chat-evo-successfull-case .container>p , #chat-evo-development-case .container>p, #chat-evo-development-cost .container>p {
    font-size: 24px;
    font-weight: 600;
    color: #2F5597;
}
.feature-content {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}
.feature-content .cont-li{
    display: flex;
    flex-direction: column;
    width: calc((100%/3) - 30px);
    margin: 15px;
    background-color: #2F5597;
    color: #ffff;
    padding: 20px;
    border-radius: 15px;
}
.successfull-case{
    display: flex;
    margin: 0px -15px;
}
.successfull-case .case-content{
    display: flex;
    flex-direction: column;
    width: calc((100%/4) - 10px);
    margin: 10px;
    background: rebeccapurple;
    border-radius: 15px;
}
.successfull-case .case-content h3 {
    text-align: center;
}

.feature-content>div img , #chat-evo-successfull-case>div img{
    width: 40%;
}
.feature-content>div h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0px;
}
.case-header{
    background: #ffff;
    border-radius: 15px 15px 0px 0px;
    padding: 10px 0px;
}
.successfull-case .case-content:nth-child(1), .successfull-case .case-content:nth-child(3) {
    background-color: #2F5597;
    color: #2F5597;
}
.successfull-case .case-content:nth-child(1) .case-header, .successfull-case .case-content:nth-child(3) .case-header {
    border: solid 1px #2F5597;
}

.successfull-case .case-content:nth-child(2), .successfull-case .case-content:nth-child(4) {
    background-color: #00B0F0;
    color: #00B0F0;
}
.successfull-case .case-content:nth-child(2) .case-header, .successfull-case .case-content:nth-child(4) .case-header {
    border: solid 1px #00B0F0;
}
.case-content>p {
    color: #ffff;
    padding: 10px 15px;
    margin: 0px;
}
.dev-content p {
    font-size: 20px;
    font-weight: bold;
}
.dev-content ul{
    padding-left: 20px;
}
.dev-content li{
    margin-bottom: 5px;
}
.development-case {
    display: flex;
}

.development-case .dev-content:nth-child(1) {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.development-case .dev-content {
    width: calc((100%/2) - 20px);
    margin: 20px;
}
.br-color-dev{
    border: solid 1px #FFD57E;
    padding: 20px 10px;
    background: #FFD57E;
    box-shadow: 4px 4px 10px 2px #bdbcbc;
    border-radius: 15px;
    margin-bottom: 15px;
}
#banner-chat-evo-3 {

}
.banner-2-content{
    background-image: url('/img/chat-evo/Background_Contact_15.webp');
    background-repeat: round;
    padding: 50px 0px;
}
.banner-2-content h2{
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    color: #ffff;
    margin-bottom: 40px;
}
.banner-2-content>div>p{
    text-align: center;
    padding-top: 20px;
    font-weight: 600;
    color: #ffff;
}
.banner-2-content ul  {
    list-style: none;
    display: flex;
    padding: 0px

}
.banner-2-content li {
    width: calc(100%/5);
    padding: 10px;
    color: #ffff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, -10000% 0%);
    background-image: linear-gradient(#3e52dd, #a7c3db);
}
.banner-2-content li p{
   font-size: 16px;
    width: 50%;
    margin: 0px 0px 5px 0px;
    text-align: start;
}
.banner-2-content li img{
    width: 50%;

}
.cost{
    display: flex;
    justify-content: center;
}
.cost-content {
    background-image: url(/img/chat-evo/Background_14.webp);
    padding: 20px 30px;
    color: #ffff;
    background-repeat: round;
}
.cost-content h3{
    text-align: center;
    margin-bottom: 15px;
}
.cost-content p:nth-child(2) {
    text-align: center;
    font-size: 12px;
}
.cost-content p:nth-child(3) {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}
.cost-content p:nth-child(3) span {
    text-decoration: line-through;
}
.cost-content p:nth-child(4) {
    text-align: center;
    font-weight: 700;
}
.cost-content ul{
    padding: 10px;
 }
 #chat-evo-contact {
    background-image: url(/img/chat-evo/Background_Contact_15.webp);
    color: #ffff;
    padding: 50px 0px;
    background-repeat: round;
 }
 #chat-evo-contact h2 {
    font-size: 48px;
    font-weight: 800;
 }
.form-contact {
    display: flex;
    justify-content: center;
}
.form-contact .content {
    width: 50%;
}
#chat-evo-development-cost, #chat-evo-development-case, #chat-evo-successfull-case, #chat-evo-feature {
padding: 25px 0px;
}
.dev-content li::marker {
    color: #001dff;
    font-size: 25px;
}
.banner-2-chat-content {
    display: flex;
}
.banner-2-chat-content .banner-2-chat-img{
    width: calc((100%/3) - 100px);
    margin: 0px 100px;
}

/* resposive */
@media only screen and (max-width: 576.5px) {
    #chat-evo-feature h2, #chat-evo-successfull-case h2, #chat-evo-development-case h2, #chat-evo-development-cost h2, .banner-2-content h2 {
        font-size: 30px;
    }
    #chat-evo-feature .container>p, #chat-evo-successfull-case .container>p, #chat-evo-development-case .container>p, #chat-evo-development-cost .container>p{
        font-size: 18px;
    }
    #banner-chat-evo {
        padding: 20px 0px;
    }
    #banner-chat-evo>img{
        width: 25% !important;
        margin-left: 20px;
    }
    #banner-chat-evo .container {
        padding: 120px 0px 40px 0px;
    }
    .feature-content .cont-li{
        width: 100%;
        margin: 0px 0px 15px 0px;
    }
    .feature-content {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
    }
    .successfull-case, .development-case {
        display: block;
        margin: 0px;
        margin-top: 30px;
    }
    .dev-content p {
        margin-bottom: 5px;
    }
    .dev-content {
        width: 100% !important;
        margin: 0px !important;
    }
    .banner-2-content ul {
        /* display: block; */
    }
    .banner-2-content ul li{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .banner-2-content li{
        padding: 5px;
    }
    .banner-2-content li p {
        font-size: 6px;
        width: 50%;
        margin: 0px 0px 5px 0px;
        text-align: start;
    }
    .banner-2-content ul li div {
        display: flex;
        justify-content: start;
    }
    .banner-2-content ul li div img {
        width: 30%;
    }
    .form-contact .content {
        width: 100%;
    }
    .banner-2-chat-content{
        display: flex;
    }
    .banner-2-chat-content .banner-2-chat-img {
        width: calc((100%/3) - 10px);
        margin: 0px 5px;
    }
    .cost {
        display: block;
    }
    .banner-content ul {
        display: block;
    }
    .banner-content ul li {
        width: fit-content;
        margin-bottom: 10px;
        float: left;
    }
    .successfull-case {
        display: flex;
    }
    .successfull-case .case-content h3 {
        font-size: 10px;
        margin: 4px;
    }
     #chat-evo-successfull-case>div img {
        width: 32%;
    }
    .case-content>p {
        padding: 10px 5px;
        font-size: 7px;
    }
    .successfull-case .case-content {
        width: 100%;
        margin: 0px 5px 7px 5px;
    }
    .message-status span:last-of-type {
        color: #e14948;
        font-size: 12px;
        display: none;
    }
}