@charset "utf-8";


.top-h2-en {
    margin: 0px;
    padding: 100px 0px 0px 0px;
}


/*==================================================
スライダーのためのcss
===================================*/
#mainview {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    position: relative;
    top : 0px; 
    left: 0px;
    z-index:-1;
}

.section01-background {
    position: relative;
    z-index: -1;
    overflow: hidden;
    padding: 0px 0px 50px 0px;
    background-color: var(--basecolor);
  }

.section01-background::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(5deg);
    z-index: -1;
    width:100%;
    height:100%;
    background:var(--maincolor);
}

.section01-space01 {
    height: 60px;
}

.section01-contents {
    margin: 0px 0px 0px 0px;
    width: 100%;
    display: flex;
}

.section01-contents01 {
    width: 50%;
    padding: 50px 20px 0px 50px;
}

.section01-contents02 {
    width: 50%;
}

#section01 img {
    width: 100%;
    height: auto;
}

.section01-contents01-p01 {
    font-size: var(--fontsize26);
}

.section01-contents01-p02 {
    font-size: var(--fontsize26);
    text-align: right;
}

.section01-contents01-img {
    display: -webkit-flex;
    display: flex;
}

.section01-contents01-imgdiv01 {
    margin: 0px;
    width: 38%;    
    height: auto;
}

.section01-contents01-imgdiv02 {
    margin: 100px 0px 0px -40px;
    width: 38%;
    height: auto;
}

.section01-contents01-imgdiv03 {
    margin: 200px 0px 0px -40px;
    width: 38%;
    height: auto;
}

.section01-contents02-p01 {
    margin: 100px 0px 0px 0px;
    font-size: var(--fontsize40);
}

.section01-contents02-p02 {
    margin: 0px 0px 30px 0px;
    font-size: var(--fontsize40);
}

.section01-contents02-p03 {
    margin: 0px 0px 150px 0px;
    font-size: var(--fontsize18);
}


#section02 a {
    width: 33%;
    aspect-ratio: 3 / 2;
    background-color: var(--maincolor);
    display: inline-block;
    position: relative;
}

#section02 img {
    width: 100%;
    height: 100%;
    display: block;
}

.section02-background {
    background-color: var(--whitecolor);
}

.section02-contents{
    display: flex;
    justify-content: space-between;
    padding: 100px;
}

.section02-services-title {
    width: 100%;
    text-align: center;
    position: absolute;
    color: var(--whitecolor);
    font-size: var(--fontsize26);
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.section02-services-readmore {
    position: absolute;
    color: var(--whitecolor);
    font-size: var(--fontsize16);
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

.section03-background {
    background: linear-gradient(
        to right, 
        var(--basecolor) 0%,
        var(--whitecolor) 50%,
        var(--basecolor) 100%
    );
}

.section03-contents{
    padding: 100px;
}

#section03 img {
    width: 35%;
    padding: 0px 10px 0px 10px;
}

.section03-contents01 {
    width: 100%;
    display: flex;
}

.section03-contents02 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.section03-contents01-div01 {
    width: 50%;
}

.section03-contents01-p01 {
    width: 100%;
    font-size: var(--fontsize40);
    padding: 40px 0px 0px 0px;
}

.section03-contents01-p02 {
    width: 100%;
    font-size: var(--fontsize18);
}


.section03-contents-readmore {
    padding: 20px;
    text-align: right;
}

.section03-contents01-divLine {
    width: 100%;
    height: 10px;
    background-color: var(--maincolor);
    margin: 10px 0px;
}

#section04 a {
    width: 49%;
    aspect-ratio: 3 / 2;
    background-color: var(--maincolor);
    display: inline-block;
    position: relative;
}

#section04 img {
    width: 100%;
    height: 100%;
    display: block;
    
}

.section04-background {
    background-color: var(--whitecolor);
}

.section04-contents{
    display: flex;
    justify-content: space-between;
    padding: 100px;
}

.section04-services-title {
    width: 100%;
    position: absolute;
    color: var(--whitecolor);
    font-size: var(--fontsize30);
    top : 10px;
    left : 10px;
    z-index: 2;
}

.section04-services-readmore {
    position: absolute;
    color: var(--whitecolor);
    font-size: var(--fontsize18);
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

.section05-background {
    background-color: var(--basecolor);
}

.section05-contents{
    padding: 0px 100px 100px 100px;
    margin: -80px 0px 0px 0px;
}

.section05-contents-div{
    background-color: var(--whitecolor);
    width: 100%;
    
}

.section05-contents-list{
    height: 400px;
    padding: 170px 5% 0px 5%;
}

.section05-contents-list-div {
    border-bottom: solid 2px var(--maincolor);
    padding: 25px 0px 0px 0px;
    width: 100%;
}

.section05-contents-list-link {
    display: flex;
    width: 100%;
}

.section05-contents-list-span-date {
    font-size: var(--fontsize26);
    text-align: center;
    width: 25%;
}

.section05-contents-list-span-title {
    font-size: var(--fontsize26);
    width: 75%
}

.section05-contents-readmore {
    padding: 30px;
    text-align: right;    
}


.button-readmore {
    width: 250px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: var(--whitecolor);
    background-color: var(--maincolor);
    display: inline-block;
    font-size: var(--fontsize20);    
}


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

    #mainview {
        height: 92vh;
    }

    .section01-contents {
        margin: 0px;
        width: 100%;
        padding: 10px;
        display: block;
        box-sizing: border-box;
    }

    .section01-contents01 {
        padding: 0px;
        width: 100%;
    }
    
    .section01-contents02 {
        width: 100%;
    }

    .section01-contents01-p01 {
        display: none;
    }

    .section01-contents01-p02 {
        display: none;
    }

    .section01-contents01-img {
        display: flex;
        justify-content: space-between;
    }
    
    .section01-contents01-imgdiv01 {
        margin: 0px;
        width: 33%;
    }
    
    .section01-contents01-imgdiv02 {
        margin: 0px;
        width: 33%;
    }
    
    .section01-contents01-imgdiv03 {
        margin: 0px;
        width: 33%;
    }
    
    .section01-contents02-p01 {
        margin: 30px 0px 0px 0px;
        font-size: var(--fontsize20);
    }
    
    .section01-contents02-p02 {
        margin: 0px 0px 10px 0px;
        font-size: var(--fontsize20);
    }

    .section01-contents02-p03 {
        margin: 0px 0px 50px 0px;
        font-size: var(--fontsize12);
    }

    #section02 a {
        width: 100%;
        aspect-ratio: 2 / 1;
        margin: 5px 0px;
    }
    
    .section02-contents {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 30px 10px 100px 10px;        
    }

    .section02-services-title {
        font-size: var(--fontsize18);
    }

    .section02-services-readmore {
        font-size: var(--fontsize12);
    }

    .section03-contents {
        padding: 30px 10px 100px 10px;        
    }

    #section03 img {
        width: 100%;
        padding: 20px 0px 0px 0px ;
    }

    .section03-contents01 {
        width: 100%;
        flex-flow: column;
    }
    
    .section03-contents02 {
        width: 100%;
        flex-flow: column;
        justify-content: flex-start;
    }

    .section03-contents01-div01 {
        width: 100%;
        order: 1;
    }
    
    .section03-contents01-p01 {
        font-size: var(--fontsize20);
        padding: 0px;
    }

    .section03-contents01-p02 {
        font-size: var(--fontsize12);
    }

    .section03-contents01-divLine {
        margin: 0px;
        height: 5px;
    }
    
    .section03-contents-readmore {
        padding: 10px;
        text-align: right;
    }
    
    .section04-contents {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 30px 10px 100px 10px;        
    }

    #section04 a {
        width: 100%;
        margin: 5px 0px;
    }
    .section04-services-title {
        font-size: var(--fontsize18);
    }

    .section04-services-readmore {
        font-size: var(--fontsize12);
    }

    .section05-contents{
        padding: 0px 10px 100px 10px;
        margin: -50px 0px 0px 0px;
    }

    .section05-contents-div{
        padding: 30px 0px 0px 0px;
    }
    
    .section05-contents-list{
        padding: 50px 7% 0px 7%;
        height: 300px;
    }

    .section05-contents-list-div {
        padding: 25px 0px 0px 0px;
    }
    
    .section05-contents-list-span-date {
        width: 30%;
        font-size: var(--fontsize14);
    }
    
    .section05-contents-list-span-title {
        width: 70%;
        font-size: var(--fontsize14);
    }
    
    .section05-contents-readmore {
        padding: 15px;
    }
    
    .button-readmore {
        width: 120px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        font-size: var(--fontsize12);
    }

}