@charset "UTF-8";
.cloud01 {
	position: absolute;
	left: 40px;
	top: -40px;
	z-index: 0;
}
.cloud02 {
	position: absolute;
	right: 80px;
	top: 50px;
	z-index: 0;
}
.sec-feature { padding: 180px 0 180px; }
.sec-feature.has-bg { background-color: #fff;}
.sec-feature .w970 {
    margin: 0 auto;
    max-width: 970px;
}
@media screen and (max-width: 767px){
    .sec-feature { padding: 80px 0;}
}

.sec-feature .intro {
    text-align: center;
}
.sec-feature .intro h2 {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.sec-feature .intro p {
    margin-top: 45px;
    line-height: 2;
    letter-spacing: 0.1em;
}
.sec-feature .intro strong {
    font-size: 150%;
    font-weight: bold;
}
@media screen and (max-width: 767px){
    .sec-feature .intro h2 { font-size: 2rem; letter-spacing: 0.05em;}
    .sec-feature .intro p { letter-spacing: 0.05em; margin-top: 25px;}
}

.sec-feature .feature-block + .feature-block { margin-top: 200px; }
@media screen and (max-width: 767px){
    .sec-feature .feature-block + .feature-block { margin-top: 100px; }
}

.sec-feature .block-ttl {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 45px;
}
.sec-feature .block-ttl .img { width: 150px;}
.sec-feature .block-ttl .line {
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    width: calc(100% - 180px);
}
.sec-feature .block-ttl .gif { width: 70px; position: relative; top: 8px;}
.sec-feature .block-ttl .num { font-weight: bold; margin-left: 1em;}
.sec-feature .block-ttl .num small { display: block; font-size: 1.3rem; line-height: 1.5; text-align: center;}
.sec-feature .block-ttl .num span { color: #00a9c8; display: block; font-size: 5rem; line-height: 1; text-align: center;}
.sec-feature .block-ttl .ttl { font-size: 1.6rem; font-weight: bold;}
.sec-feature .block-ttl .ttl span { font-size: 175%;}
.sec-feature .block-ttl .ttl sup { position: relative; top: -0.5em;}

@media screen and (max-width: 767px){
    .sec-feature .block-ttl {
        flex-direction: column;
        justify-content: center;
        margin-bottom: 30px;
        padding-left: 90px;
        position: relative;
    }
    .sec-feature .block-ttl .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 80px;
    }
    .sec-feature .block-ttl .line {
        flex-wrap: wrap;
        width: 100%;
    }
    .sec-feature .block-ttl .num { margin-left: 0;}
    .sec-feature .block-ttl .num span { font-size: 3rem;}
    .sec-feature .block-ttl .ttl { font-size: 1.0rem; }
    .sec-feature .block-ttl .gif { left: 0; top: -5px; width: 50px;}
}

.sec-feature .block-body .txt { font-size: 1.4rem;}
.sec-feature .block-body .txt-item { font-size: 1.2rem;}

@media screen and (max-width: 767px){
    .sec-feature .block-body .txt { font-size: 1.25rem;}
}

.sec-feature .list-item-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sec-feature .list-item-2 .item {
    margin-top: 80px;
    width: 45%;
}
.sec-feature .list-item-2 .item:nth-child(1) { border: 1px solid #a7a7a7;}
.sec-feature .list-item-2 .item:nth-child(2) { border: 1px solid #00a9c8;}
.sec-feature .list-item-2 .item .ttl-copy {
    background-color: #e6e6e6;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 18px;
    text-align: center;
}
.sec-feature .list-item-2 .item .ttl-svg {
    background-color: #00a9c8;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 11px;
    text-align: center;
}
.sec-feature .list-item-2 .item .box { padding: 30px; }
.sec-feature .list-item-2 .item .box { padding: 60px 30px 30px; }
.sec-feature .list-item-2 .item .box .gif {
    position: absolute;
    left: 0;
    right: 0;
    top: -37px;
    margin: 0 auto;
}
.sec-feature .list-item-2 .item .draw { margin-top: 30px; }

@media screen and (max-width: 767px){
    .sec-feature .list-item-2 { display: block;}
    .sec-feature .list-item-2 .item { margin-top: 40px; width: calc(100% - 0px);}
    .sec-feature .list-item-2 .item .ttl-copy { min-height: 50px; padding: 11px;}
    .sec-feature .list-item-2 .item .ttl-svg { min-height: 50px;}
    .sec-feature .list-item-2 .item .box { padding: 45px 15px 15px;}
}

.sec-feature .list-item-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
}
.sec-feature .list-item-3 .item { width: calc((72% / 2) - 50px); }
.sec-feature .list-item-3 .item:nth-child(1) { width: 28%; }

@media screen and (max-width: 767px){
    .sec-feature .list-item-3 { gap: 30px;}
    .sec-feature .list-item-3 .item { width: calc(50% - 15px); }
    .sec-feature .list-item-3 .item:nth-child(1) { width: 100%; }
}


.sec-feature .list-item-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 36px;
}
.sec-feature .list-item-4 .item { width: calc((72% / 3) - 36px); }
.sec-feature .list-item-4 .item:nth-child(1) { width: 28%; }

@media screen and (max-width: 767px){
    .sec-feature .list-item-4 { gap: 30px;}
    .sec-feature .list-item-4 .item { width: calc(50% - 15px)!important;}
}
