@charset "utf-8";
/*===========================
common
===========================*/
:root {
    font-size: calc(100vw/375);
}

/* pc */
@media screen and (min-width: 769px) {
    :root {
    font-size: calc(100vw/1440);
}

    .spBr {
        display: none;
    }
}

body {
    font-family: 
        "Noto Sans JP",
        Arial,
        sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #000;
    background-color: #fff;
}

img{
    max-width: 100%;
    height: auto;
}

.btn {
    display: flex;
    align-items: center;
    border-radius: 82rem;
    background: linear-gradient(90deg, rgba(78, 176, 255, 0.95) 0%, rgba(116, 238, 149, 0.95) 100%);
    box-shadow: 0px 1rem 1rem 0px rgba(0, 0, 0, 0.25);
    transition: 0.4s;
    position: relative;
    color: #FFF;
    text-shadow: 0px 1rem 1rem rgba(0, 0, 0, 0.25);
    font-weight: 700;
    line-height: 1.2;
    /* width: --px; */
    /* height: --px; */
    /* padding-left: --px; */
    /* font-size: --rem; */
    /* letter-spacing: --px; */
}

.btn:hover {
    opacity: 0.7;
}

.section {
    padding-bottom: 50rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(25, 211, 202, 0.08) 100%);
    overflow: hidden;
}

.section__topicBlock {
    position: relative;
    width: 100%;
    height: 100rem;
    padding: 33rem 7.2% 37rem 7.2% ;
}
@media screen and (min-width: 769px) {
    .section__topicBlock {
        height: 192rem;
        padding: 66rem 98rem;
    }
}

.section__topicBlock--rightSide {
    display: flex;
    justify-content: flex-end;
}

.section__topic {
    color: #437FFF;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 20rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.6rem;
}
@media screen and (min-width: 769px) {
    .section__topic {
        font-size: 40rem;
        letter-spacing: 1.2rem;
    }
}

.section__topic::after {
    display: block;
    content: '';
    width: 40rem;
    height: 1rem;
    background: linear-gradient(90deg, #19D3CA, #2A83FF);
    margin-top: 6rem;
}
@media screen and (min-width: 769px) {
    .section__topic::after {
        width: 80rem;
        height: 2rem;
        margin-top: 17rem;
    }
}

.section__topicEn {
    font-family: "Afacad", sans-serif;
    font-size: 96rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.88rem;
    background-image: linear-gradient(90deg, rgba(78, 176, 255, 0.20) 0%, rgba(119, 255, 155, 0.20) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
}
@media screen and (min-width: 769px) {
    .section__topicEn {
        font-size: 256rem;
        letter-spacing: 7.68rem;
    }
}

.section__topicEn--rightSide {
    bottom: 0;
    right: -5rem;
    z-index: -1;
}
@media screen and (min-width: 769px) {
    .section__topicEn--rightSide {
        bottom: -40rem;
        right: -15rem;
    }
}

.section__topicEn--leftSide {
    bottom: 0;
    left: -5rem;
    z-index: -1;
}
@media screen and (min-width: 769px) {
    .section__topicEn--leftSide {
        bottom: -40rem;
        left: -15rem;
    }
}

/*===========================
fadeIn
===========================*/

.fadeIn {
    transform: translate(0,50rem);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0,0);
    opacity: 1;
}

/* ーーーーーー　ヘッダー ーーーーーー*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 375rem;
    z-index: 10;
}
@media screen and (min-width: 769px) {
    .header {
        width: 1440rem;
    }
}

.header__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16.5rem 5.3% 16.5rem 8%;
    background: rgba(127, 127, 127, 0.05);
    height: 50rem;
    backdrop-filter: blur(5px);
}
@media screen and (min-width: 769px) {
    .header__box {
        width: 1440rem;
        padding: 40rem 100rem 30rem 100rem ;
        height: 95rem;
        backdrop-filter: blur(30px);
    }
}

.header__logo {
    width: 60rem;
    height: 30rem;
}
@media screen and (min-width: 769px) {
    .header__logo {
        width: 120rem;
        height: 60rem;
        margin-bottom: 15rem;
    }
}

.header__nav {
    display: none;
}
@media screen and (min-width: 769px) {
    .header__nav {
        display: block;
    }
}

.nav__list--header {
    display: flex;
    gap: 35rem;
}

.nav__item--header {
    font-size: 18rem;
    line-height: 1.2;
} 

.header__btn {
    width: 23rem;
    height: 17rem;
}
@media screen and (min-width: 769px) {
    .header__btn {
        display: none;
    }
}

/* ーーーーーー　ハンバーガーメニュー ーーーーーー*/

.nav {
    width: 375rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
    overflow: auto;
}
@media screen and (min-width: 769px) {
    .nav {
        display: none;
    }
}

.nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16.5rem 5.3% 16.5rem 35rem;
    /* background: rgba(243, 242, 242, 0.95); */
    background: #f1eeee;
    height: 50rem;
}

.navHeaderBtn {
    width: 16rem;
    height: 17rem;
}

.nav__box {
    display: flex;
    height: 350rem;
    justify-content: space-between;
    padding: 30rem 5.3% 30rem 8%;
    background: rgba(243, 242, 242, 0.90);
}

.nav__item {
    margin-top: 25rem;
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.2;
}

.nav__item::after {
    display: block;
    content: '';
    width: 40rem;
    height: 1rem;
    background: linear-gradient(90deg, #19D3CA, #2A83FF);
    margin-top: 10rem;
}

.nav__item:first-of-type {
    margin-top: 0;
}

.nav__btn {
    display: flex;
    align-items: flex-end;
}

.btn--spnav {
    display: flex;
    padding-left: 23rem;
    align-items: center;
    width: 180rem;
    height: 48rem;
    border-radius: 82rem;
    background: linear-gradient(90deg, rgba(78, 176, 255, 0.95) 0%, rgba(116, 238, 149, 0.95) 100%);
    box-shadow: 0px 1rem 1rem 0px rgba(0, 0, 0, 0.25);
    transition: 0.4s;
    position: relative;
    color: #FFF;
    font-size: 12rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.6rem;
}

.btnBlock {
    display: flex;
}

.btnBlock .text {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 12rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.6rem;
}

.btn--spnav::after {
    display: block;
    content: '';
    width: 7.5rem;
    height: 7.5rem;
    background-image: url(../images/btn_spnav_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-48%);
    right: 13rem;
    filter: drop-shadow(0px 1rem 1rem rgba(0, 0, 0, 0.25));
}

.nav.active {
    transform: translateX(0);
}

/* ーーーーーー　メインビジュアル ーーーーーー*/

.article__header {
    width: 100%;
    height: 400rem;
}
@media screen and (min-width: 769px){
    .article__header {
        height: 700rem;
    }
}

.mainvisual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
    background-image: url(../images/main_image_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width: 769px) {
    .mainvisual {
        background-image: url(../images/main_image_pc.jpg);
    }
}

.mainCopy {
    margin-top: 63rem;
    margin-right: 1.33%;
}
@media screen and (min-width: 769px) {
    .mainCopy {
        margin-top: 147rem;
        margin-right: 33rem;
    }
}

.mainCopy__txt {
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.54rem;
}
@media screen and (min-width: 769px) {
    .mainCopy__txt {
        font-size: 50rem;
        letter-spacing: 1.5rem;
    }
}

.mainCopy__txt--under {
    margin-top: 10rem;
}
@media screen and (min-width: 769px) {
    .mainCopy__txt--under {
        margin-top: 30rem;
    }
}

.btn--Mv {
    width: 150rem;
    height: 40rem;
    padding-left: 19rem;
    font-size: 10rem;
    letter-spacing: 0.5rem;
    margin-top: 23rem;
    margin-right: 3.7%;
}
@media screen and (min-width: 769px) {
    .btn--Mv {
        width: 428rem;
        height: 114rem;
        padding-left: 56rem;
        font-size: 28rem;
        letter-spacing: 1.4rem;
        margin-top: 106rem;
        margin-right: 40rem;
    }
}

.btn--Mv::after {
    display: block;
    content: '';
    width: 6rem;
    height: 6rem;
    background-image: url(../images/btn_spnav_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-48%);
    right: 11rem;
    filter: drop-shadow(0px 1rem 1rem rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 769px) {
    .btn--Mv::after {
        width: 18rem;
        height: 18rem;
        right: 35rem;
    }
}

.mainvisual .title {
    color: #FFF;
    text-shadow: 0px 10rem 20rem rgba(0, 0, 0, 0.25);
    font-family: "Hiragino Sans";
    font-size: 20rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.6rem;
    margin-top: 169rem;
    margin-right: 5.3%;
}
@media screen and (min-width: 769px) {
    .mainvisual .title {
        font-size: 54rem;
        letter-spacing: 1.62rem;
        margin-top: 60rem;
        margin-right: 40rem;
    }
}


/* ーーーーーー　プロジェクトについて（about） ーーーーーー*/

.mainTopics {
    position: relative;
}
@media screen and (min-width: 769px) {
    .mainTopics {
        padding: 100rem 0 100rem 120rem;
    }
}

.mainTopics::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: block;
    content: '';
    width: 200rem;
    height: 200rem;
    border-radius: 50%;
    background-color: rgba(173, 255, 248, 0.50);
    filter: blur(50rem);
}
@media screen and (min-width: 769px) {
    .mainTopics::before {
        width: 525rem;
        height: 525rem;
        top: 76rem;
        left: 157rem;
        background-color: rgba(173, 255, 248, 0.30);
    }
}

.mainTopics::after {
    position: absolute;
    top: 243rem;
    left: 66rem;
    z-index: -1;
    display: block;
    content: '';
    width: 130rem;
    height: 130rem;
    border-radius: 50%;
    background-color: rgba(173, 255, 248, 0.50);
    filter: blur(50rem);
}
@media screen and (min-width: 769px) {
    .mainTopics::after {
        width: 335rem;
        height: 335rem;
        bottom: 0;
        left: 980rem;
        background-color: rgba(173, 255, 248, 0.30);
    }
}

.mainTopics__bg {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    margin-top: 35rem;
    margin-left: 6.6%;
}
@media screen and (min-width: 769px) {
    .mainTopics__bg {
        gap: 40rem;
        margin-top: 0;
        margin-left: 0;
    }
}

.mainTopics__txt {
    font-size: 14rem;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .mainTopics__txt {
        font-size: 20rem;
        line-height: 1.2;
    }
}

.mainTopics__link {
    display: flex;
    color: #19D3CA;
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.56rem;
    margin-top: 20rem;
    transition: 0.5s;
}
@media screen and (min-width: 769px) {
    .mainTopics__link {
        font-size: 20rem;
        letter-spacing: 0.8rem;
        margin-left: 350rem;
    }
}

.mainTopics__link::after {
    display: block;
    content: '';
    width: 56rem;
    height: 56rem;
    background-image: url(../images/btn_about.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -16rem;
    margin-top: -15rem;
    transition: 0.5s;
}
@media screen and (min-width: 769px) {
    .mainTopics__link::after {
        width: 80rem;
        height: 80rem;
        margin-left: -23rem;
        margin-top: -21rem;
    }
}

.mainTopics__link:hover {
    color: #4EB0FF;
}

.mainTopics__link:hover::after {
    transform: scale(1.5);
}

.mainTopics__grdTxt {
    font-size: 24rem;
    font-weight: 700;
    line-height: 1.8;
    background: linear-gradient(90deg, #19D3CA 0%, #2A83FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 769px) {
    .mainTopics__grdTxt {
        font-size: 48rem;
        line-height: 1.2;
        margin-right: 25rem;
    }
}

@media screen and (min-width: 769px) {
    .mainTopics__Bold {
        display: flex;
        align-items: flex-end;
    }
}

.mainTopics__boldTxtBox {
    margin-left: -10rem;
}
@media screen and (min-width: 769px) {
    .mainTopics__boldTxtBox {
        margin-left: -20rem;
    }
}

.mainTopics__boldTxt {
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .mainTopics__boldTxt {
        font-size: 32rem;
        line-height: 1.2;
    }
}

.mainTopics__boldTxtS {
    font-size: 16rem;
    font-weight: 700;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .mainTopics__boldTxtS {
        font-size: 24rem;
        line-height: 1.2;
    }
}

.mainTopics__medTxt {
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .mainTopics__medTxt {
        font-size: 24rem;
        line-height: 1.2;
        letter-spacing: 0.72rem;
        margin-bottom: 10rem;
    }
}

.mainTopics__about {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    margin-top: 20rem;
    margin-left: 6.6%;
}
@media screen and (min-width: 769px) {
    .mainTopics__about {
        gap: 50rem;
        margin-top: 80rem;
        margin-left: 530rem;
    }
}


/* ーーーーーー　取り組み内容（service） ーーーーーー*/

.section--service {
    padding-bottom: 0;
    background: linear-gradient(180deg, rgba(25, 211, 202, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
}

/* 取り組み内容　気象防災教育と啓発 */

.service__item--education {
    position: relative;
    margin-top: 15rem;
    display: flex;
    flex-direction: column;
    gap: 35rem;
    width: 375rem;
    height: 450rem;
    background-image: url(../images/service_education.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
@media screen and (min-width: 769px) {
    .service__item--education {
        margin-top: 50rem;
        gap: 0;
        width: 100%;
        height: 1000rem;
        background-image: url(../images/service_education_PC.png);
        clip-path: polygon(0 0, 100% 0, 100% 82.4%, 0 100%);
    }
}

.service__item--education::after {
    display: block;
    content: '01';
    position: absolute;
    bottom: 48rem;
    right: 8rem;
    z-index: -1;
    color: rgba(255, 255, 255, 0.30);
    font-family: "Frank Ruhl Libre", serif;
    font-size: 150rem;
    font-weight: 400;
    line-height: 1;
}
@media screen and (min-width: 769px) {
    .service__item--education::after {
        bottom: 150rem;
        right: 34rem;
        font-size: 400rem;
    }
}

.service__topic {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 39rem;
    margin-left: 30rem;
    width: 205rem;
    height: 44rem;
    background: rgba(255, 255, 255, 0.20);
    color: #FFF;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 20rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.6rem;
}
@media screen and (min-width: 769px) {
    .service__topic {
        margin-top: 113rem;
        margin-left: 532rem;
        width: 484rem;
        height: 88rem;
        font-size: 48rem;
        letter-spacing: 1.44rem;
    }
}

.service__intro {
    margin-left: 18rem;
    color: #FFF;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 14rem;
    font-weight: 500;
    line-height: 2;
    transform: skewX(-5deg);
}
@media screen and (min-width: 769px) {
    .service__intro {
        margin-top: 60rem;
        margin-left: 552rem;
        font-size: 32rem;
    }
}

.service__content {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    margin-left: 51rem;
}
@media screen and (min-width: 769px) {
    .service__content {
        gap: 17rem;
        margin-top: 80rem;
        margin-left: 552rem;
    }
}

.service__txtBlock {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 769px) {
    .service__txtBlock {
        flex-direction: row;
    }
}

.service__txt {
    position: relative;
    color: #FFF;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 14rem;
    font-weight: 400;
    line-height: 2;
}
@media screen and (min-width: 769px) {
    .service__txt {
        font-size: 32rem;
    }
}

.service__txt::after {
    display: block;
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 13rem;
    height: 13rem;
    background-image: url(../images/service_checkmark.svg);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -21rem;
}
@media screen and (min-width: 769px) {
    .service__txt::after {
        width: 35rem;
        height: 34rem;
        left: -55rem;
    }
}

.service__txt--under {
    margin-left: -8rem;
}
@media screen and (min-width: 769px) {
    .service__txt--under {
        margin-left: 0;
    }
}

.service__txt--under::after {
    content: none;
}

.service__copy {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.2rem;
    transform: skewY(-7deg);
}
@media screen and (min-width: 769px) {
    .service__copy {
        font-size: 80rem;
        letter-spacing: 4rem;
        transform: skewY(-7.5deg);
    }
}

.service__copy--small {
    font-size: 18rem;
    letter-spacing: 0.9rem;
}
@media screen and (min-width: 769px) {
    .service__copy--small {
        font-size: 64rem;
        letter-spacing: 3.2rem;
    }
}

.service__copy::after {
    position: absolute;
    z-index: -1;
    top: 75%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 277rem;
    height: 8.2rem;
    background: linear-gradient(90deg, rgba(78, 176, 255, 0.80) 0%, rgba(119, 255, 155, 0.80) 100%);
}
@media screen and (min-width: 769px) {
    .service__copy::after {
        width: 933rem;
        height: 28rem;
    }
}


/* 取り組み内容　発電フィットネスバイク */

.service__item--bike {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30rem;
    width: 375rem;
    height: 530rem;
    background-image: url(../images/service_bike.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(0 8.5%, 100% 0, 100% 100%, 0 100%);
}
@media screen and (min-width: 769px) {
    .service__item--bike {
        gap: 0;
        width: 100%;
        height: 1000rem;
        background-image: url(../images/service_bike_PC.png);
        clip-path: polygon(0 17.6%, 100% 0, 100% 100%, 0 100%);
    }
}

.service__item--bike::after {
    display: block;
    content: '02';
    position: absolute;
    bottom: 95rem;
    left: -10rem;
    z-index: -1;
    color: rgba(255, 255, 255, 0.30);
    font-family: "Frank Ruhl Libre";
    font-size: 150rem;
    font-weight: 400;
    line-height: 1;
}
@media screen and (min-width: 769px) {
    .service__item--bike::after {
        font-size: 400rem;
        bottom: 140rem;
        left: -25rem;
    }
}

.service__topic--bike {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 55rem;
    margin-left: 75rem;
    padding: 10rem 0 10rem 10rem;
    gap: 15rem;
    width: 277rem;
    height: 83rem;
}
@media screen and (min-width: 769px) {
    .service__topic--bike {
        margin-top: 259rem;
        margin-left: 113rem;
        padding: 15rem 0 15rem 20rem;
        width: 648rem;
        height: 161rem;
    }
}

.service__topic--bike .topicName {
    display: flex;
    align-items: center;
    gap: 8rem;
}
@media screen and (min-width: 769px) {
    .service__topic--bike .topicName {
        gap: 15rem;
    }
}

.topicArrow {
    transform: translateY(2rem);
    width: 22.5rem;
    height: 13rem;
}
@media screen and (min-width: 769px) {
    .topicArrow {
        transform: translateY(3rem);
        width: 52rem;
        height: 30rem;
    }
}

.service__intro--bike {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    margin-left: 85rem;
}
@media screen and (min-width: 769px) {
    .service__intro--bike {
        margin-left: 113rem;
    }
}

.service__intro--bike .introTxt {
    margin-left: 46rem;
}
@media screen and (min-width: 769px)  {
    .service__intro--bike .introTxt {
        margin-left: 0;
    }
}

.service__content--bike {
    margin-left: 112rem;
}
@media screen and (min-width: 769px) {
    .service__content--bike {
        margin-left: 113rem;
    }
}

.service__content--bike .service__txt--under {
    margin-left: 0;
}

.service__insert {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem 0 25rem;
    font-size: 15rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.75rem;
}
@media screen and (min-width: 769px) {
    .service__insert {
        font-size: 48rem;
        letter-spacing: 2.4rem;
        padding: 77rem 0 85rem 0;
    }
}

.service__insert::after {
    position: absolute;
    display: block;
    content: '';
    top: 42rem;
    left: 50%;
    transform: translateX(-50%);
    width: 330rem;
    height: 2rem;
    background-image: url(../images/service_insert_line_sp.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .service__insert::after {
        width: 1054rem;
        height: 5rem;
        top: 143rem;
    }
}


/* 取り組み内容　気象予報士の災害派遣 */

.service__item--haken {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 35rem;
    width: 375rem;
    height: 400rem;
    background-image: url(../images/service_haken.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .service__item--haken {
        gap: 0;
        width: 100%;
        height: 800rem;
        background-image: url(../images/service_haken_PC.png);
    }
}

.service__topic--haken {
    width: 226rem;
    height: 44rem;
}
@media screen and (min-width: 769px) {
    .service__topic--haken {
        width: 533rem;
        height: 88rem;
        margin-top: 96rem;
        margin-left: 588rem;
    }
}

.service__intro--haken {
    margin-left: 40rem;
}
@media screen and (min-width: 769px) {
    .service__intro--haken {
        margin-left: 608rem;
    }

    .service__content--haken {
        margin-left: 608rem;
    }
}

.service__item--haken::after {
    display: block;
    content: '03';
    position: absolute;
    bottom: 15rem;
    right: -5rem;
    color: rgba(255, 255, 255, 0.20);
    font-family: "Frank Ruhl Libre";
    font-size: 150rem;
    font-weight: 400;
    line-height: 1;
}
@media screen and (min-width: 769px) {
    .service__item--haken::after {
        font-size: 400rem;
        bottom: 0;
        right: 0;
    }
}


/* ーーーーーー　導入メリット（merit） ーーーーーー*/

.merit__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30rem;
    margin-top: 45rem;
}
@media screen and (min-width: 769px) {
    .merit__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        margin-top: 0;
        padding: 50rem 0 100rem;
    }
}

.merit__item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 340rem;
    background: #FFF;
    box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 769px) {
    .merit__item {
        box-shadow: 10px 10px 5px 0px #D9D9D9;
    }

    .merit__item--company {
        width: 1223rem;
    }

    .merit__item--localGmt {
        width: 490rem;
        margin-top: 75rem;
    }

    .merit__item--general {
        width: 679rem;
        margin-top: 75rem;
        margin-left: 54rem;
    }
}

.merit__topic {
    position: relative;
    height: 80rem;
    font-size: 18rem;
    font-weight: 600;
    line-height: 1.5;
    background: rgba(25, 211, 202, 0.10);
}
@media screen and (min-width: 769px) {
    .merit__topic {
        height: 120rem;
        font-size: 24rem;
    }
}

.merit__topic--company {
    padding: 27rem 208rem 26rem 60rem;
}
@media screen and (min-width: 769px) {
    .merit__topic--company {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 140rem;
        font-size: 28rem;
    }
}

.merit__topic::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    height: 20rem;
    clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
    background-color: #437FFF;
}
@media screen and (min-width: 769px) {
    .merit__topic::after {
        width: 35rem;
        height: 35rem;
    }
}

.merit__content {
    display: flex;
    flex-direction: column;
    padding: 30rem 0 30rem 52rem;
    gap: 20rem;
}
@media screen and (min-width: 769px) {
    .merit__content {
        padding: 50rem 0 50rem 102rem;
        gap: 15rem;
    }
}

.merit__txt {
    position: relative;
    font-size: 14rem;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .merit__txt {
        font-size: 18rem;
        letter-spacing: 0.54rem;
    }
    .merit__txt--company {
        font-size: 20rem;
        letter-spacing: 0.6rem;
    }

}

.merit__txt--above::after {
    display: block;
    content: '●';
    position: absolute;
    top: 0;
    left: -22rem;
    color: #19D3CA;
    font-size: 14rem;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .merit__txt--above::after {
        font-size: 18rem;
        left: -38rem;
    }

    .merit__content--company .merit__txt--above::after {
        font-size: 20rem;
        left: -40rem;
    }
}

.merit__txt--under {
    display: block;
}
@media screen and (min-width: 769px) {
    .merit__txt--under {
        display: inline;
    }
}

.merit__txt--underAnother {
    margin-left: -10rem;
}
@media screen and (min-width: 769px) {
    .merit__txt--underAnother {
        margin-left: 0;
    }
}

.merit__item--company::after {
    display: block;
    content: '';
    position: absolute;
    top: -1rem;
    left: 179.5rem;
    width: 118.7rem;
    height: 135rem;
    background-image: url(../images/merit_company.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .merit__item--company::after {
        top: 85rem;
        left: 839rem;
        width: 269rem;
        height: 306rem;
    }
}


.merit__item--localGmt::after {
    display: block;
    content: '';
    position: absolute;
    top: -3rem;
    left: 153rem;
    width: 171.7rem;
    height: 100rem;
    background-image: url(../images/merit_localGmt.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .merit__item--localGmt::after{
        top: -4rem;
        left: 235rem;
        width: 232rem;
        height: 135rem;
    }
}

.merit__topic--localGmt {
    padding: 27rem 200rem 26rem 50rem;
}
@media screen and (min-width: 769px) {
    .merit__topic--localGmt {
        padding: 42rem 0 42rem 90rem;
    }
}

.merit__item--general::after {
    display: block;
    content: '';
    position: absolute;
    top: -5rem;
    left: 187rem;
    width: 138.7rem;
    height: 110rem;
    background-image: url(../images/merit_general.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .merit__item--general::after {
        left: 445rem;
        width: 214rem;
        height: 170rem;
    }
}

.merit__topic--general {
    padding: 27rem 174rem 26rem 40rem;
}
@media screen and (min-width: 769px) {
    .merit__topic--general {
        padding: 42rem 0 42rem 180rem;
    }
}

.merit__content--general .merit__txt--underAnother {
    margin-left: -8rem;
}


/* ーーーーーー　導入事例・実績（case） ーーーーーー*/

.section--case {
    padding-bottom: 0;
    background: linear-gradient(180deg, rgba(25, 211, 202, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.case {
    padding: 30rem 15rem;
    background-image: url(../images/case_backImage.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .case {
        padding: 80rem 108rem;
        background-image: url(../images/case_backImage_PC.png);
        margin-top: 50rem;
    }
}

.case__box {
    position: relative;
    width: 345rem;
    height: 316rem;
    padding: 20rem 15rem 0 15rem;
    background: rgba(255, 255, 255, 0.90);
}
@media screen and (min-width: 769px) {
    .case__box {
        width: 1224rem;
        height: 364rem;
        padding: 50rem 50rem 0 50rem;
    }
}

.case__list {
    display: flex;
    flex-direction: column;
    gap: 35rem;
}
@media screen and (min-width: 769px) {
    .case__list {
        gap: 45rem;
    }
}

.case__content {
    position: relative;
    display: flex;
}

.case__content::after {
    display: block;
    content: '';
    position: absolute;
    top: 62rem;
    left: 0;
    width: 320rem;
    height: 1rem;
    opacity: 0.5;
    background: #437FFF;
}
@media screen and (min-width: 769px) {
    .case__content::after {
        top: 58rem;
        width: 1125rem;
    }
}

.case__block {
    margin-left: 8rem;
}
@media screen and (min-width: 769px) {
    .case__block {
        display: flex;
        align-items: center;
        gap: 20rem;
        margin-left: 20rem;
    }
}

.case__checkMark {
    width: 18rem;
    height: 21.5rem;
}
@media screen and (min-width: 769px) {
    .case__checkMark {
        width: 30rem;
        height: 43.2rem;
    }
}

.case__tag {
    display: inline-block;
    padding: 0 10rem;
    margin-bottom: 5rem;
    font-size: 12rem;
    line-height: 1.8;
    background: rgba(191, 242, 240, 0.30);
}
@media screen and (min-width: 769px) {
    .case__tag {
        margin-bottom: 0;
        font-size: 20rem;
    }
}

.case__txt {
    font-size: 14rem;
    line-height: 1.8
}
@media screen and (min-width: 769px) {
    .case__txt {
        font-size: 24rem;
        letter-spacing: 0.72rem;
    }
}

.case__btn {
    transition: 0.4s;
    position: absolute;
    top: 270rem;
    left: 245rem;
}
@media screen and (min-width: 769px) {
    .case__btn {
        top: 300rem;
        left: 1019rem;
    }
}

.case__btn:hover {
    opacity: 0.5;
}

.case__button {
    width: 90rem;
    height: 30rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .case__button {
        width: 156rem;
        height: 52rem;
    }
}


/* ーーーーーー　よくあるご質問（FAQ） ーーーーーー*/

.section--FAQ {
    background: linear-gradient(180deg, rgba(25, 211, 202, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
}
@media screen and (min-width: 769px) {
    .section--FAQ {
        padding-top: 100rem;
        padding-bottom: 150rem;
    }
}

.FAQ__list {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    align-items: center;
    margin-top: 15rem;
}
@media screen and (min-width: 769px) {
    .FAQ__list {
        gap: 40rem;
        margin-top: 50rem;
    }
}

.FAQ__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 23rem;
    padding: 20rem 0 20rem 20rem;
    width: 345rem;
    background: #FFF;
    box-shadow: 5px 5px 0 0 rgba(25, 211, 202, 0.15);
}
@media screen and (min-width: 769px) {
    .FAQ__content {
        gap: 38rem;
        padding: 50rem 0 50rem 50rem;
        width: 1224rem;
        height: 214rem;
        box-shadow: 10rem 10rem 0 0 rgba(25, 211, 202, 0.15);
    }
}

.FAQ__Q {
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.2;
}
@media screen and (min-width: 769px) {
    .FAQ__Q {
        font-size: 32rem;
    }
}

.FAQ__Q .mainTxt {
    position: relative;
}

.FAQ__Q .mainTxt::after {
    display: block;
    content: '';
    position: absolute;
    top: 20rem;
    left: 1rem;
    width: 100%;
    height: 2rem;
    background-image: url(../images/FAQ_line.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .FAQ__Q .mainTxt::after {
        top: 46rem;
        height: 5rem;
        background-image: url(../images/FAQ_line_PC.svg);
    }
}

.FAQ__Q .blueTxt {
    color: #437FFF;
}

.FAQ__A {
    display: flex;
    align-items: baseline;
    gap: 8rem;
}
@media screen and (min-width: 769px) {
    .FAQ__A {
        gap: 20rem;
    }
}

.FAQ_arrow {
    width: 20rem;
}
@media screen and (min-width: 769px) {
    .FAQ_arrow {
        width: 43rem;
    }
}

.FAQ__Atxt {
    font-size: 14rem;
    line-height: 1.8;
}
@media screen and (min-width: 769px) {
    .FAQ__Atxt {
        font-size: 32rem;
        line-height: 1.2;
    }
}

.FAQ__Atxt .underTxt {
    margin-left: -10rem;
}


/* ーーーーーー　お問合わせ（contact） ーーーーーー*/

.section--contact {
    padding-bottom: 0;
}

.section--contact .section__topicBlock {
    height: 115rem;
    padding: 33rem 7.2% 52rem 7.2% ;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(25, 211, 202, 0.08) 100%);
}
@media screen and (min-width: 769px) {
    .section--contact .section__topicBlock {
        height: 242rem;
        padding: 66rem 95rem 115rem 66rem;
    }
}

.section--contact .section__topicEn {
    bottom: 15rem;
}
@media screen and (min-width: 769px) {
    .section--contact .section__topicEn {
        bottom: 10rem;
    }

    .contact {
        display: flex;
    }
}

.contact__block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26rem 12rem;
    background-image: url(../images/contact_backImage.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 769px) {
    .contact__block {
        width: 830rem;
        height: 424rem;
        padding: 0;
        clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
        background-image: url(../images/contact_backImage_PC.png);
    }
}

.contact__item {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    padding: 20rem 15rem;
    background: rgba(255, 255, 255, 0.80);
}
@media screen and (min-width: 769px) {
    .contact__item {
        width: 666rem;
        gap: 30rem;
        padding: 35rem;
    }
}

.contact__topic {
    font-size: 16rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.48rem;
}
@media screen and (min-width: 769px) {
    .contact__topic {
        font-size: 24rem;
        letter-spacing: 0.72rem;
    }
}

.contact__topic::after {
    display: block;
    content: '';
    margin-top: 10rem;
    width: 100%;
    height: 2rem;
    background: #19D3CA;
}
@media screen and (min-width: 769px) {
    .contact__topic::after {
        margin-top: 15rem;
    }
}

.contact__list {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}
@media screen and (min-width: 769px) {
    .contact__list {
        gap: 30rem;
    }
}

.contact__content {
    font-size: 13rem;
    line-height: 1.2;
}
@media screen and (min-width: 769px) {
    .contact__content {
        font-size: 18rem;
        letter-spacing: 0.54rem;
    }
}

.contact__shapes {
    position: relative;
    background: linear-gradient(182deg, #4EB0FF 1.88%, #E6F4FF 98.13%);
}
@media screen and (min-width: 769px) {
    .contact__shapes {
        background: none;
        display: flex;
        /* width: 95rem; */
    }
}

.contact__shapes .block {
    margin-top: 4rem;
    width: 100%;
    height: 12rem;
}
@media screen and (min-width: 769px) {
    .contact__shapes .block {
        margin-top: 0;
        width: 70rem;
        height: 424rem;
        clip-path: polygon(71.4% 0, 100% 0, 28.6% 100%, 0 100%);
        background: linear-gradient(0deg, #4EB0FF 0.05%, #CAE7FF 99.96%);
        margin-left: -45rem;
    }

    .block--lightColor {
        margin-left: -45rem;
    }
}

.contact__shapes::after {
    display: block;
    content: '';
    position: absolute;
    top: 12rem;
    left: 0;
    width: 100%;
    height: 4rem;
    background: #fff
}
@media screen and (min-width: 769px) {
    .contact__shapes::after {
        display: none;
    }
}

.contact__CTA {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rem 0 50rem 0;
}
@media screen and (min-width: 769px) {
    .contact__CTA {
        margin-top: 155rem;
        margin-left: 55rem;
        padding: 0;
    }
}

.btn--spContact {
    width: 250rem;
    height: 67rem;
    padding-left: 35rem;
    font-size: 16rem;
    letter-spacing: 0.8rem;
}
@media screen and (min-width: 769px) {
    .btn--spContact {
        width: 428rem;
        height: 114rem;
        padding-left: 56rem;
        font-size: 28rem;
        letter-spacing: 1.4rem;
    }
}

.btn--spContact::after {
    display: block;
    content: '';
    width: 10.5rem;
    height: 10.5rem;
    background-image: url(../images/btn_spnav_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-48%);
    right: 25rem;
    filter: drop-shadow(0px 1rem 1rem rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 769px) {
    .btn--spContact::after {
        width: 18rem;
        height: 18rem;
        right: 35rem;
    }
}

.contact__CTA .txt {
    margin-top: 20rem;
    font-size: 12rem;
    line-height: 1.2;
}
@media screen and (min-width: 769px) {
    .contact__CTA .txt {
        margin-top: 32rem;
        font-size: 14rem;
    }
}


/* ーーーーーー　フッター ーーーーーー*/

.footer {
    position: relative;
    padding: 20rem 25rem 30rem 30rem;
    background: linear-gradient(90deg, rgba(25, 211, 202, 0.50) 0%, rgba(78, 176, 255, 0.50) 100%);
}
@media screen and (min-width: 769px) {
    .footer {
        padding: 0;
        height: 220rem;
    }
}

.footer__group {
    display: flex;
    justify-content: space-between;
}
@media screen and (min-width: 769px) {
    .footer__group {
        padding: 0 100rem;
    }
}

.footer_blockL {
    display: flex;
    flex-direction: column;
    gap: 25rem;
}
@media screen and (min-width: 769px) {
    .footer_blockL {
        gap: 37rem;
        margin-top: 27.8rem;
    }
}

.footer__logo {
    width: 60rem;
    height: 30rem;
}
@media screen and (min-width: 769px) {
    .footer__logo {
        width: 100rem;
        height: 50rem;
    }
}

.footer__policy {
    display: flex;
    flex-direction: column;
    gap: 10rem;
}
@media screen and (min-width: 769px) {
    .footer__policy {
        gap: 20rem;
    }

    .footer__policy--sp {
        display: none;
    }
}

.footer__operation {
    display: flex;
    flex-direction: column;
    gap: 10rem;
}
@media screen and (min-width: 769px) {
    .footer__operation {
        gap: 20rem;
    }
}

.footer_blockR {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 79rem;
    padding-top: 8rem;
}
@media screen and (min-width: 769px) {
    .footer_blockR {
        gap: 51.5rem;
        padding-top: 0;
        margin-top: 40rem;
    }
}


/* pc表示 */
.footer__nav {
    display: none;
}
@media screen and (min-width: 769px) {
    .footer__nav {
        display: block;
    }
}

.footer__policy--pc {
    display: none;
}
@media screen and (min-width: 769px) {
    .footer__policy--pc {
        display: flex;
    }

    .footer__blockPc {
        display: flex;
        gap: 594rem;
    }
}
/* pc表示 */


.sns {
    display: flex;
    gap: 15rem;
}
@media screen and (min-width: 769px) {
    .sns {
        gap: 30rem;
    }
}

.sns__item {
    width: 20rem;
    height: 20rem;
}
@media screen and (min-width: 769px) {
    .sns__item {
        width: 30rem;
        height: 30rem;
    }
}

.footer__topBtn {
    width: 25rem;
    height: 32rem;
    background-size: cover;
}
@media screen and (min-width: 769px) {
    .footer__topBtn {
        display: none;
    }
}

.footer__txt {
    font-size: 8rem;
    line-height: 1.2;
}
@media screen and (min-width: 769px) {
    .footer__txt {
        font-size: 12rem;
        letter-spacing: 0.36rem;
    }
}

.copy {
    display: inline;
    position: absolute;
    bottom: 12rem;
    right: 25rem;
}
@media screen and (min-width: 769px) {
    .copy {
        bottom: 30rem;
        right: 100rem;
    }
}

.copy small {
    font-size: 6rem;
    line-height: 1;
}
@media screen and (min-width: 769px) {
    .copy small {
        font-size: 10rem;
    }
}