@charset "UTF-8";

.low-disp{
    display: none;
}
header .headerWrap .pc-menu ul li a{
    color:#fff;
}
main {
    width: 100%;
    position: relative;
    background: #ACCBDC;
    background: linear-gradient(90deg, rgba(172, 203, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 0 0 7rem;
}

main video {
    width: 100%;
    position: relative;
    z-index: 0;
}

main .textArea {
    background: #ACCBDC;
    background: linear-gradient(90deg, rgba(172, 203, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
    min-height: 450px;
    margin: -12rem 0 0;
    padding: 0 0;
    position: relative;
    z-index: 1;
}

main .textArea dl {
    line-height: 2.5em;
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 9rem 0 0;
}

main .textArea dl dt {
    font-family: "typos", sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.2em;
    margin: 0 0 1rem auto;
    width: fit-content;
}

main .textArea dl dd {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4em;
    text-align: right;
    margin: 0 0 0 auto;
    width: fit-content;
}

.content h2 {
    font-family: "baskerville", serif;
    font-size: 7.5em;
    line-height: 1em;
    margin: 0 0 6rem;
}

#about {
    margin: -20rem 0 0;
    z-index: 1;
}

#topics {
    margin: -10rem 0 0;
    z-index: 1;
}

#about figure {
    background: url(/images/top/img01.png);
    background-size: 170%;
    background-repeat: no-repeat;
    background-position: bottom 0rem left -4rem;
    clip-path: polygon(25% 0%, 100% 8%, 100% 100%, 25% 92%);
    width: 25%;
    min-height: 420px;
    position: absolute;
    top: 7rem;
    right: 13rem;
}

#about .aboutWrap,
#topics .topicsWrap {
    background: #ACCBDC;
    clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
    display: flex;
    align-items: center;
    min-height: 920px;
}

#about .aboutWrap {
    background: url(/images/bg_content.png), linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(172, 203, 220, 1) 100%);
    background-size: cover;
}

#topics .topicsWrap {
    background: url(/images/bg_content.png), linear-gradient(90deg, rgba(172, 203, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background-size: cover;
}

#about .aboutWrap:before,
#topics .topicsWrap:before {
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 60%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 280px;
}

#about .aboutWrap:before {
    background: url(/images/bg_about.png);
    background-size: 60%;
    background-position: bottom right;
}

#topics .topicsWrap:before {
    background: url(/images/bg_topics.png);
    background-size: cover;
    background-position: top -3rem right 12rem;
}

#about .aboutWrap .contentWrap,
#topics .topicsWrap .contentWrap {
    line-height: 2.5em;
    max-width: 1200px;
    width: 95%;
    padding: 0;
    position: relative;
}

#about .aboutWrap .contentWrap {
    margin: -5rem auto 0;
}

#topics .topicsWrap .contentWrap {
    margin: -2rem auto 0;
}

#about .aboutWrap .contentWrap h2,
#topics .topicsWrap .contentWrap h2 {
    color: #fff;
}

#topics .topicsWrap .contentWrap h2 {
    font-size: 6.2rem;
}

#about .aboutWrap .contentWrap p {
    font-family: "Noto Sans JP", sans-serif;
    width: 54%;
}

#topics .topicsWrap {
    margin: 0 0 4rem;
    min-height: 980px;
}

#topics .topicsInner {
    margin: 0 0 4rem;
}

#topics ul {
    border-bottom: 1px solid #333;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 1rem;
}

#topics ul li.newsList_date {
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
    text-align: center;
    width: 10%;
    padding: 10px;
    transition: all ease 0.5s;
}

#topics ul li.newsList_text {
    width: 80%;
    padding: 0 20px;
    flex-grow: 1;
}
#topics ul:has(li>p>a):hover li.newsList_date {
    background: rgba(51, 51, 51, 0.6);
    color: #fff;
}
#topics ul li.newsList_text p.title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#topics ul li.newsList_text p.title span.newMark{
    background: #720606;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 0 5px;
}
#topics ul li.newsList_text a {
    display: block;
    width: 100%;
    position: relative;
}
#topics ul li.newsList_text p.title:has(span.newMark) a{
    width: calc(100% - 50px);
}
#topics ul li.newsList_text a:after {
    content: "";
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotate(45deg) translate(0, -50%);
    transition: all ease 0.5s;
}

#topics ul:hover li.newsList_text a:after {
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    right: -5px;
}

#service {
    margin: -5rem auto;
    padding: 0 0 80px;
    z-index: 0;
}
#service:not(h2){
    font-family: "Noto Sans JP", sans-serif;
}
#service h2 {
    color: #accbdc;
    width: fit-content;
    margin: 0 13rem 0 auto;
}
#service .serviceBox01 {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
#service .serviceBox01 figure.serviceBox_image01{
    width: 36vw;
    max-width: 640px;
    height: 0;
    position: absolute;
    top: -12%;
    left: 17%;
    z-index: 1;
}
#service .serviceBox01 b{
    display: block;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    position: relative;
    width: fit-content;
}
#service .serviceBox01 .serviceBox_top b{
    top: 110px;
    left: -60px;
}
#service .serviceBox01 .serviceBox_bottom b{
    top: -81px;
    left: 100px;
}
#service .serviceBox01 b:after{
    content: "";
    background: #060672;
    width: 55px;
    height: 55px;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: -7%;
    z-index: -1;
}
#service .serviceBox01 .serviceBox_top{
    width: 54%;
    margin: 5% 0 0 auto;
    padding: 0 0 15%
}
#service .serviceBox01 .serviceBox_bottom{
    width: 45%;
    margin: 0 0 0 auto;
    position: relative;
}
#service .serviceBox h3{
    color: #060672;
    font-size: clamp(2.125rem, 1.54rem + 1.22vw, 3rem);/*34-48px 769-1920px*/
    line-height: 1.4em;
    margin: -7% 0 5%;
    padding: 0 0 2% 4%;
    position: relative;
}
#service .serviceBox .serviceBox_bottom h3{
    margin: 0 0 0;
    padding: 0 0 2% 8%;
}
#service .serviceBox p{
    font-size: 18px;
    line-height: 2.1em;
    padding: 0 0 0 20%;
    position: relative;
}
#service .serviceBox02 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#service .serviceBox02 figure{
    margin: -0.8% 0 0 5.1%;
    max-width: 60%;
}

/*==========
animation
==========*/
#service .serviceBox01 .serviceBox_top b:before{
    content: "";
    background: #060672;
    width: 1px;
    height: 0;
    position: absolute;
    top:0;
    left: 24px;
    animation: none;
}
#service .serviceBox01 .serviceBox_top h3:before{
    content: "";
    background: #060672;
    width: 0;
    height: 1px;
    position: absolute;
    bottom:0;
    left: 0;
    animation: none;
}
#service .serviceBox01 .serviceBox_top p:before{
    content: "";
    background: #060672;
    width: 0;
    height: 1px;
    transform: rotate(45deg);
    transform-origin: top left;
    position: absolute;
    top:-10px;
    left: -40px;
    animation: none;
}
#service .serviceBox01 .serviceBox_bottom:before{
    content: "";
    background: #060672;
    width: 1px;
    height: 0;
    transform: rotate(225deg);
    transform-origin: bottom;
    position: absolute;
    bottom: 465px;
    left: 123px;
    animation: none;
}

#service .serviceBox01.animate-top .serviceBox_top b:before {
    animation: nobi01 5.0s ease-in forwards;
}
#service .serviceBox01.animate-top .serviceBox_top h3:before {
    animation: nobi02 5.0s ease-in forwards;
}
#service .serviceBox01.animate-top .serviceBox_top p:before {
    animation: nobi03 5.0s ease-in forwards;
}

#service .serviceBox01.animate-bottom .serviceBox_bottom:before {
    animation: nobi04 5.0s ease-in forwards;
}

@keyframes nobi01{
    0%{
        height: 0;
        top:0;
    }
    100%{
        height: 320px;
        top:-320px;
    }
}
@keyframes nobi02{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
@keyframes nobi03{
    0%{
        width: 0;
    }
    100%{
        width: 51%;
    }
}
@keyframes nobi04{
    0%{
        height: 0;
    }
    100%{
        height: 170%;
    }
}
@media screen and (max-width:1400px) {
#service .serviceBox02 figure {
    max-width: 52%;
}
}
@media screen and (max-width:1200px) {
/* #service .serviceBox h3{
    font-size: 43px;
} */
#service .serviceBox01 .serviceBox_bottom:before{
    bottom: 441px;
    left: 123px;
}
@keyframes nobi04{
    0%{
        height: 0;
    }
    100%{
        height: 164%;
    }
}
}
@media screen and (max-width:1300px) {
#service .serviceBox01 .serviceBox_top{
    width: 62%;
}
#service .serviceBox01 figure.serviceBox_image01{
    width: 45vw;
    top: -5%;
    left: -7%;
}
#service .serviceBox01 .serviceBox_bottom{
    width: 58.5%;
}
#service .serviceBox02{
    margin: 2% 0 0;
}
}

@media screen and (max-width:1200px) {
#service .serviceBox01 .serviceBox_top{
    width: 64%;
}
#service .serviceBox01 figure.serviceBox_image01{
    width: 45vw;
    top: -5%;
    left: -7%;
}
#service .serviceBox01 .serviceBox_bottom{
    width: 60.5%;
}
}

@media screen and (max-width:1000px) {
#service h2{
    margin: 0 8rem 0 auto;
}
/* #service .serviceBox h3{
    font-size: 34px;
} */
#service .serviceBox01 .serviceBox_top{
    width: 70%;
}
#service .serviceBox01 figure.serviceBox_image01{
    width: 45vw;
    top: -5%;
    left: -7%;
}
#service .serviceBox01 .serviceBox_top h3:before{
    bottom: -18px;
}
#service .serviceBox01 .serviceBox_top p:before{
    top: 29px;
    left: -40px;
}
#service .serviceBox01 .serviceBox_bottom{
    width: 67%;
    margin: 4.5% 0 0 auto;
}
#service .serviceBox01 .serviceBox_bottom p{
    padding: 0 0 0 8%;
}
#service .serviceBox01 .serviceBox_bottom:before{
    bottom: 371px;
    left: 91px;
}
@keyframes nobi04{
    0%{
        height: 0;
    }
    100%{
        height: 145%;
    }
}
}
@media screen and (min-width:801px) and (max-width:1000px) {
#service .serviceBox01 .serviceBox_top{
    padding: 0 0 12%;
}
@keyframes nobi03{
    0%{
        width: 0;
    }
    100%{
        width: 44%;
    }
}
}
@media screen and (max-width:768px) {
#service .serviceBox01 .serviceBox_bottom:after{
    content: "";
    background: #060672;
    width: 0;
    height: 1px;
    transform-origin: top left;
    position: absolute;
    top: -23px;
    left: 32%;
    animation: none;
}
#service .serviceBox01.animate-top .serviceBox_bottom:after {
    animation: nobi05 5.0s ease-in forwards;
}
@keyframes nobi05{
    0%{
        width: 0;
    }
    100%{
        width: 68%;
    }
}
}

/*==========
result
==========*/
#result {
    background: #ACCBDC;
    background: linear-gradient(0deg, rgba(172, 203, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 0 0 5rem;
}

#result h2 {
    color: #fff;
    margin: 3rem 0 3rem;
}

#result .swiper {
    font-family: "Noto Sans JP", sans-serif;
    max-width: 1300px;
    margin: 0 auto 4rem;
}

#result .swiper li figure {
    margin: 0 auto 0.5rem;
}

#result .swiper li figure img {
    display: block;
    height: 100%;
    object-fit: contain;
}

#result .swiper li dl dt {
    padding: 0.5rem 0;
    position: relative;
}

#result .swiper li dl dt:after {
    content: "";
    background: #333;
    width: 80%;
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

#information {
    background: #ACCBDC;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(172, 203, 220, 1) 100%);
    padding: 0 0 5rem;
}

#information .informationWrap {
    text-align: center;
    margin: 0 auto;
    padding: 7rem 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

#information .informationWrap .item {
    background: #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-5%, -5%);
    transform-origin: center;
    z-index: -1;
}

#information .informationWrap h2 {
    color: #060672;
    font-size: 6.2rem;
    margin: 0 0 2rem;
}

#information .informationWrap h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 1.4rem;
    margin: 0 auto 4rem;
    width: 87%;
}

#information .informationWrap figure {
    max-width: 270px;
    margin: 0 auto 2rem;
}

@media all and (min-width: 769px) and (max-width: 1200px) {
    .content h2{
        font-size: 8.5em;
    }
    #about figure{
        right: 6rem;
    }
    #service .serviceBox01 {
        margin: 0rem auto 0;
    }
    #service .serviceBox02 {
        padding: 0 1rem;
        margin: 5% 0 0;
    }
    #service .serviceBox02 .link {
        width: 35%;
        margin: 6rem auto 0;
    }

    #service .serviceBox02 .link a {
        width: 100%;
    }
    #topics ul li.newsList_date{
        font-size: 0.9em;
        width: 15%;
    }
}
@media all and (min-width: 769px) and (max-width: 900px) {
    .content h2 {
        font-size: 6.0em;
        margin: 0 0 3rem;
    }
    #about figure {
        right: 3rem;
    }
    #service .serviceBox02 .imageArea figure {
        width: 20vw;
        height: 20vw;
        margin: 0 2.5rem;
    }
}
@media all and (max-width:768px) {
    main {
        height:80vh;
        padding:0;
    }
    main video{
        height:100%;
        object-fit:cover;
    }
    main .textArea{
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
        min-height: 520px;
        margin: -9rem 0 0;
    }
    main .textArea dl{
        padding: 5rem 0 0;
    }
    main .textArea dl dt{
        font-size:2.0rem;
        text-align: right;
    }
    main .textArea dl dd{
        font-size: 1.0em;
        line-height: 1.4em;
        width: 85%;
    }
    .content h2{
        font-size: 3.6em;
        margin: 0 0 2rem;
    }
    #about{
        margin:6rem auto 0;
    }
    #about figure{
        width: 40%;
        min-height: 240px;
        position: absolute;
        top: 4rem;
        right: 1rem;
    }
    #about .aboutWrap, #topics .topicsWrap{
        clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
        min-height: 820px;
    }
    #about .aboutWrap .contentWrap, #topics .topicsWrap .contentWrap{
        line-height: 2em;
    }
    #about .aboutWrap .contentWrap p{
        width: 92%;
        margin: 0 auto;
    }
    #about .aboutWrap:before, #topics .topicsWrap:before{
        clip-path: polygon(0 0%, 0% 100%, 100% 100%, 100% 20%);
        min-height:180px;
    }
    #about .aboutWrap:before{
        background-size: cover;
    }
    #service{
        margin:0 0;
    }
    #service h2{
        margin: 0 8rem 0 auto;
        font-size: 5.4em;
    }
    #service .serviceBox h3{
        font-size: 27px;
    }
    #service .serviceBox01 h3{
        margin: 5% 0 5%;
        padding: 0 0 5% 4%;
    }
    #service .serviceBox01{
        /* height: 1160px; */
        margin: 0rem auto 0;
    }
    #service .serviceBox01 figure.serviceBox_image01{
        width: 50vw;
        top: 4%;
        left: -12%;
    }
    #service .serviceBox01 .serviceBox_top b{
        top: 160px;
    }
    #service .serviceBox01 .serviceBox_top p br{
        display: none;
    }
    #service .serviceBox01 .serviceBox_top p{
        padding: 10% 5% 0 10%;
    }
    #service .serviceBox01 .serviceBox_top p:before{
        transform: rotate(90deg);
        top: 30px;
        left: -35px;
    }
    #service .serviceBox01 .serviceBox_bottom{
        width: 80%;
    }
    #service .serviceBox01 .serviceBox_bottom:before{
        bottom: 299px;
        left: 118px;
    }
    #service .serviceBox01 .serviceBox_bottom b{
        top: -50px;
        left: unset;
        margin: 0 auto 0 23%;
    }
    #service .serviceBox01 .serviceBox_bottom h3{
        margin: 0 0 0;
        padding: 0 15% 7%;
    }
    #service .serviceBox01 .serviceBox_bottom p{
        padding: 0 5% 0 0;
    }
    #service .serviceBox01 .serviceBox_top h3 br,
    #service .serviceBox01 .serviceBox_bottom h3 br,
    #service .serviceBox01 .serviceBox_bottom p br{
        display: none;
    }
    #service .serviceBox02{
        width: 92%;
        margin: 5% auto 10%;
    }
    #service .serviceBox02 figure{
        max-width: unset;
        width: 100%;
    }
    #service .serviceBox02 .link{
        padding: 0;
        width: 80%;
        position: absolute;
        bottom: 3rem;
        right: 3rem;
    }
    #service .serviceBox02 .link a{
        width:100%;
    }
    #result{
        padding: 3rem 0 0;
    }
    #result .swiper{
        width:90%;
    }
    #information .informationWrap h2{
        font-size: 3.6rem;
    }
    #information .informationWrap figure {
        max-width: 240px;
    }
    #topics .topicsWrap .contentWrap{
        margin: -5rem auto 0;
    }
    #topics ul li.newsList_date{
        width: 25%;
    }
    #topics ul{
        align-items:end;
        font-size: 0.8em;
    }
    #topics ul li.newsList_text{
        width: 75%;
    }
    #topics .topicsWrap .contentWrap h2{
        font-size: 3.6rem;
    }
    #topics .topicsWrap:before{
        background-size: 160%;
        background-position: top 0rem left -6rem;
        background-repeat: no-repeat;
        min-height: 240px;
    }
    #topics ul li.newsList_text a{
        padding: 0 1rem 0.5rem 0;
        line-height: 1.4em;
    }
}
@media all and (min-width:440px) and (max-width:768px) {
    #about .aboutWrap .contentWrap h2 br{
        display: none;
    }
}
@media all and (max-width:570px) {
    #service .serviceBox01 .serviceBox_bottom{
        width: 100%;
        margin: 15% 0 0 auto;
    }
    #service .serviceBox01 .serviceBox_bottom p{
        padding: 0 5%;
    }
    #service .serviceBox01 .serviceBox_bottom h3{
        padding: 0 15% 7% 23%;
    }
}
@media all and (max-width:540px) {
    #service h2{
        margin: 0 3rem 0 auto;
    }
    #service .serviceBox01 .serviceBox_top{
        padding: 0 0 5%;   
    }
    #service .serviceBox01 figure.serviceBox_image01{

        left: -19%;
    }
}
@media all and (max-width:480px) {
    #service .serviceBox01 .serviceBox_top{
        padding: 0 0 0;   
    }
}