@charset "UTF-8";
/* CSS Document */



body {
    padding: 170px 0 0;
}
section.heading {
    width: 1200px;
    margin: auto;
    padding-bottom: 50px;
}
section.heading h2 {
    display: inline-block;
    font-size: 30px;
    padding: 10px 15px;
    line-height: 1;
    vertical-align: middle;
    background:#4343c8;
    color:#fff;
    margin-right:20px;
    border-radius: 30px;
}
section.heading h1 {
    display: inline-block;
    font-size: 48px;
    line-height: 150%;
    font-weight: bold;
    vertical-align: middle;
    border-left:solid 2px #4343c8;
    padding-left:30px;
}
section.section-casestudy {
    background:#c0c0c0 url('../images/lp/01_bg.jpg');
    background-size: cover;
    padding:40px;
}

section.section-casestudy ul {
    width:1380px;
    margin:0 auto;
    text-align: center;
}
section.section-casestudy ul li{
    width:314px;
    min-height:444px;
    display:inline-block;
    background: #fff;
    padding:20px 20px 40px;
    vertical-align: top;
    margin:5px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
}
section.section-casestudy ul li.blank{
    opacity: 0;
    height:1px!important;
    min-height:0;
    margin:0 5px;
    padding:0;
}
section.section-casestudy ul li .logo{
    padding:30px 0;
    min-height:140px;
}
section.section-casestudy ul li .logo img{
    max-width:240px;
    max-height:75px;
}
section.section-casestudy ul li .capture{
    background:url('../images/lp/01_ipad.png') center no-repeat;
    width:266px;
    height:192px;
    display: block;
    margin:0 auto;
    text-align: center;
}
section.section-casestudy ul li .capture span{
    display:inline-block;
    height:174px;
    width:228px;
    overflow: hidden;
    margin-top:10px;
}
section.section-casestudy ul li .capture span img{
    width:100%;
}

section.section-casestudy ul li .description{
    margin-top:20px;
    font-size:14px;
    text-align: left;
}



section.lp h2:before{
    content:'';
    display:inline-block;
    background: #4343c8;
    width:3px;
    height:50px;
    vertical-align: middle;
    margin-right:20px;
}
section h2{
    line-height: 1.6;
    padding:0;
}

.lp h2 {
    line-height: 1.5;
    padding:0;
    margin-bottom:40px;
}
section.lp .wrapper {
    width: 1200px;
    margin: auto;
    font-size:16px;
    line-height: 1.6;
    padding:50px 50px;
}
section.lp.bg-blue .wrapper {
    background:#eaf9ff;
}
section.lp.bg-purple .wrapper {
    background:#f4f4ff;
}
section.lp.bg-green .wrapper {
    background:#f3fde9;
}
section.lp.bg-yellow .wrapper {
    background:#fffbe6;
}
section.lp.bg-gray .wrapper {
    background:#f0f0f4;
}
section.lp.bg-white .wrapper {
    background:#fff;
    border:solid 1px #f0f0f0;
}
section.lp.bg-white + div + section.lp.bg-white .wrapper {
    border-top:none;
}
.bg_lime {
    background: #e4ff67;
    display: initial;
    margin-bottom:5px;

}

.center {
    text-align: center;
}
.include01 {
    padding:80px 30px;
}
.lp-body {

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:20px;
}
.lp-body div:first-child{
    /*padding-right:20px;*/
}
.lp-body h3 {
    font-weight: bold;
    margin-bottom:15px;
}
section.include02 {
    padding:60px;
}
.lp-contactbtn {
    padding:30px 60px;
    font-size:26px;
    font-weight: bold;
    display: block;
    width: fit-content;
    margin:60px auto;
    background-color: #65a427;
    color:#fff;
    border-radius: 5px;
    transition: all 0.2s;
}
.lp-contactbtn:hover {
    text-decoration: none;
    opacity: 0.7;
}

section.section-casestudy,
section.include01,
section.include02,
section.lp,
section#contact {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s, transform 0.5s;
}
section.show {
    opacity: 1!important;
    transform: translateY(0)!important;
}

h3{
    font-size:25px;
    line-height:1.5;
    font-weight:bold;
}
h4{
    font-size:14px;
    font-weight:bold;
}
h5{
    font-size:13px;
    font-weight:bold;
}
h6{
    font-size:12px;
    font-weight:bold;
}
.w-max100{
    max-width:100%;
    margin:0 auto;    
}

.lp-leadbox{
    background: #bccdd8;
    display: inline-block;
    padding: 3vw;
    width: 100%;
    max-width: 1000px;
    font-size:20px;
    font-weight: bold;
    line-height: 2.4;
    text-align: left;
    background-image: url(../images/lp/txt_advantage.png) ;
    background-repeat: no-repeat;
}
.lp-leadboxtitle{
    text-align: center;
    color:#1e2ca4;
    font-size:26px; 
    margin-bottom:1em;
}
@media screen and (max-width:640px) {
    .lp-leadboxtitle{
        font-size:17px;
        margin-top:1em;
    }
    .lp-leadbox{
        font-size:14px;
        line-height: 2;
    }
    body {
        padding: 80px 0 0;
    }
    header {
        background: rgba(247,247,247,0.94);
    }

    section {
        overflow-x: hidden;
    }
     section .wrapper {
        width: auto;
        margin: auto;
        overflow: hidden;
	    padding:10px;
    }

	section.heading {
		width:auto;
        margin-left:4vw;
        padding-bottom:20px;
	}
    section.heading h2 {
        display: inline-block;
        height: auto;
        line-height:normal;
        font-size: 16px;
        padding: 6px 15px;
        margin-right: 0;
        vertical-align: middle;
        background:#4343c8;
        color:#fff;

    }
    section.heading h1 {
        display: inline-block;
        font-size: 20px;
        line-height: 150%;
        font-weight: bold;
        vertical-align: middle;
        margin: 3vw 2vw 2vw 0;
        padding-left:15px;
        text-align: left;
    }
    section.section-casestudy ul li .logo {
        min-height:auto;
        padding:15px 0;

    }
    section.section-casestudy ul li .logo img{
        max-width:100%;
        max-height:44px;
    }
    section.section-casestudy {
        padding:10px;
    }
    section.section-casestudy ul {
        width:100%;
    }
    section.section-casestudy ul li{
        width:calc(50% - 8px);
        min-width:auto;
        min-height:auto;
        margin:0 2px 10px;
        padding:8px 8px 20px;
    }
    section.section-casestudy ul li:last-child{
        float:left;
    }

    section.section-casestudy ul li .capture{
        width:100%;
        height:auto;
        background-size:contain;
        background-position: top;
    }
    section.section-casestudy ul li .capture span{
        padding:5px;
        margin-top:0;
        width:100%;
        height:auto;
        aspect-ratio: 16 / 11;
        position:relative;
    }
    section.section-casestudy ul li .capture span::before{
        content:"";
        display: block;
        padding-top: 66%;
    }
    section.section-casestudy ul li .capture img{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        max-width:100%;
        width:100%;
        padding: 5%;
    }
    section.section-casestudy ul li .description{
        margin:15px 0 10px;
        font-size:12px;
        line-height: 1.5;
    }
    .include01,
    section.include02{
        padding:30px 0;
    }
    section.lp .wrapper{
        width:100%;
        padding:30px 15px;
    }
    .lp-body {
        display:block;
        font-size:14px;
    }
    .lp-body .image{
        margin:15px;
        text-align: center;
    }
    .lp-body .image img{
        max-width: 100%;
    }
    section.lp h2:before {
        display:none;
    }
    section.lp h2 {
        border-bottom:solid 2px #4343c8;
        padding-bottom:10px;
    }
    .lp-contactbtn {
        font-size:18px;
        padding:15px 30px;
        width:100%;
        text-align: center;
    }
    section.section-casestudy,
    section.include01,
    section.include02,
    section.lp,
    section#contact {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s, transform 0.5s;
    }
    h3{
        font-size:16px;
    }

}/*640*/




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

}