.header-area{
    position:relative;
    width:100%;
    height:500px;
}

.header-bg{
    overflow: hidden;
    position:absolute;
    width:100%;
    background: linear-gradient(to bottom right, #4cc5f8, #84f5de);
    padding:360px 0;
    top:-80px;
    bottom:0;
    left:0;
    right:0;
    clip-path: polygon(0 0, 100% 150px, 100% 100%, 0 calc(100% - 150px));
}

.header-bg::before{
    animation: img-wrap-1 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
    content:'';
    position:absolute;
    background-color: #eefcff;
    inset: 0;
    pointer-events: none;
    z-index:0;
}

@keyframes img-wrap-1 {
    100% {
      transform: translateX(100%);
    }
  }

.header-area .image-area{
    overflow: hidden;
    position:absolute;
    width:100%;
    padding:360px 0;
    background-image: url(../../img/webp/1.webp);
    clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);
    top:-80px;
    bottom:0;
    left:0;
    right:0;
    background-size: cover;
    background-position:0 20%;
    z-index:1;
}

.header-area .image-area::before{
    animation: img-wrap-2 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    content:'';
    position:absolute;
    background-color: #eefcff;
    inset: 0;
    pointer-events: none;
    z-index:1;
}

@keyframes img-wrap-2 {
    100% {
      transform: translateX(-100%);
    }
  }

.title-area{
    color:#fff;
    position:absolute;
    top:200px;
    z-index:2;
    padding-left:10vw;
    animation-name: fadein;
    animation-duration: 2s;
}

@keyframes fadein{
    0%{
    opacity: 0;
    }
    50%{
    opacity: 0;
    }
    100%{
    opacity: 1;
    }
}

.title-area h1{
    font-size:60px;
}

.title-area p{
    font-size:20px;
    line-height:1.8;
}

.contents{
    max-width: 1000px;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:100px;
    position:relative;
    top:80px;
}

.subtitle-area{
    text-align: center;
}

h2{
    font-size:36px;
}

.flex{
    display:flex;
    justify-content: space-evenly;
    align-items:stretch;
    width:100%;
    margin:32px 0;
}

.flex h3{
    font-size: 26px;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #0291e2;/*左線*/
}

.flex .text-area{
width:40%;
}

.flex .image-area{
    width:60%;
}

.flex .button-area{
    display: flex;
    align-items: center;
    color:#333;
    transition: 0.3s;
}

.flex .button-area:hover{
    color:#0291e2;
}

.flex .button-area img{
    padding-right:16px;
    width:18%;
    transition: 0.3s;
}

.flex .button-area:hover img{
    opacity: 0.9;
    transform: scale(1.1);
}
.flex:nth-child(2n+1){
    flex-direction: row-reverse;
}

.card-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 10px;
}

.card-area .card-item{
    display: flex;
    background-color: #fff;
    box-shadow: 10px 10px 20px rgba(0,0,0,.2);
    width: calc(50% - 20px);
    height:240px;
    transition: all 0.3s;
}

.card-area .card-item:hover{
    transform:translate(3px,3px);
}

.card-area .card-item:hover .image-area img,
.card-area .card-item:hover .image-area img{
    transform: scale(1.1);
}

.card-area .card-item .image-area{
    width:100%;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

.card-area .card-item .text-area{
    width:100%;
    padding-right:0.5rem;
    position:relative;
}

.card-area .card-item .text-area ul li{
    font-size:16px;
}

.card-area .card-item .text-area .button-area{
    text-align: right;
    position:absolute;
    bottom:5px;
    right:10px;
}

.card-area .card-item .text-area .button-area img,
.card-area .card-item .text-area .button-area img{
    width:40px;
}

.card-area .card-item .image-area img,
.card-area .card-item .image-area img{
    vertical-align:top;
    height:100%;
    object-fit: cover;
    transition: all 0.3s;
}

.card-area .card-item h3{
    font-size: 26px;
    padding-left:1rem;
    margin-bottom:0;
    margin-top:1rem;
}

.card-area .card-item h3 .jp{
    display: block;
    font-size:13px;
}

.contact{
    background-image:url('../../img/webp/footer-bg.webp');
    position:relative;
    top:80px;
    padding:100px 0;
    overflow: hidden;
}

.contact .triangle{
    position:absolute;
    top:-1px;
    width: 0;
    height: 0;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    border-top: 100px solid #eefcff;
}

.contact-inner{
    max-width:1000px;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    top:30px;
}

.contact .flex{
    margin:0;
}

.contact h2{
    font-size:42px;
    color:#fff;
    text-align: center;
    margin-bottom:16px;
}

.contact-content{
    color:#fff;
    font-weight:bold;
    font-size:24px;
    width:50%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact p{
    margin:0 0 32px 0;
}

.contact a:hover{
    background-color:orange;
}

.contact-button{
    display: inline-block;
    border:solid 1px #fff;
    color:#fff;
    padding:10px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left:0.5rem;
    font-size:18px;
    letter-spacing:0.2;
    transition:0.2s;
    box-shadow:5px 5px 20px rgba(0,0,0,.2);
}