@charset 'utf-8';
.center{
    text-align: center;
}
.scroll-hint-text{
    font-family: sans-serif;
    line-height: 1.5;
    margin-top: 8px !important;
}
.scroll-hint-icon{
    padding-top: 26px !important;
}
.scroll-hint-icon:after{
    top: 12px !important;
}
/* pagetop */
#pagetop{
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 10;
}
#pagetop a{
    display: block;
    width: 56px;
    line-height: 54px;
    padding-bottom: 2px;
    background: linear-gradient(225deg,rgba(75, 178, 167, 1) 0%, rgba(104, 181, 211, 1) 100%);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.3);
    transition: 0.3s;
}
#pagetop a:hover{
    transform: translateY(-10px);
}
@media screen and (max-width: 736px) {
    #pagetop{
        bottom: 20px;
        right: 12px;
    }
}
/* menuBtn */
.menuBtn{
    height: 60px;
    width: 60px;
    position: fixed;
    top: 0;
    right: 0;
    transition: 0.2s;
    z-index: 999;
    background: linear-gradient(225deg,rgba(75, 178, 167, 1) 0%, rgba(104, 181, 211, 1) 100%);
    box-shadow: -2px 2px 16px -6px rgba(0,0,0,0.3);
}
.menuBtn:hover{
    cursor: pointer;
    letter-spacing: 0.08em;
}
.menuBtn__bar{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 11px;
    margin-bottom: 6px;
}
.menuBtn__bar span{
    width: 24px;
    height: 3px;
    background: #fff;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -12px;
    transition: 0.2s;
}
.menuBtn__bar span:nth-of-type(1){
    top: 0;
}
.menuBtn__bar span:nth-of-type(2){
    bottom: 0;
}
.menuBtn.active .menuBtn__bar span:nth-of-type(1){
    top: 50%;
    transform: rotate(25deg) translateY(-50%);
}
.menuBtn.active .menuBtn__bar span:nth-of-type(2){
    bottom: 50%;
    transform: rotate(-25deg) translateY(50%);
}
/* menu */
.menu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: linear-gradient(225deg,rgba(75, 178, 167, 0.95) 0%, rgba(104, 181, 211, 0.95) 100%);
}
.menu .flexbox{
    display: flex;
}
.menu__listWrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.menu__list{
    flex-wrap: wrap;
    margin-bottom: 64px;
}
.menu__listItem{
    width: 50%;
    box-sizing: border-box;
    position: relative;
}
.menu__listItem a{
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
    font-size: 20px;
    display: block;
    text-align: center;
    position: relative;
    transition: 0.3s;
    font-weight: 500;
}
.menu__listItem a:hover{
    letter-spacing: 0.08em;
}
.menu__listItem:nth-of-type(1):after,
.menu__listItem:nth-of-type(2):after,
.menu__listItem:before{
    content: "";
    width: calc(100% - 16px);
    height: 1px;
    background: #fff;
    position: absolute;
    left: 8px;
}
.menu__listItem:nth-of-type(1):after,
.menu__listItem:nth-of-type(2):after{
    top: 0;
}
.menu__listItem:before{
    bottom: 0;
}
.menu__listItem:nth-of-type(2n) a:after,
.menu__listItem a:before{
    content: "";
    width: 1px;
    height: calc(100% - 16px);
    background: #fff;
    position: absolute;
    bottom: 8px;
}
.menu__listItem:nth-of-type(2n) a:after{
    right: 0;
}
.menu__listItem a:before{
    left: 0;
}
.menu__bannerListItem:not(:last-of-type){
    margin-right: 40px;
}
@media screen and (max-width: 736px) {
    .menu__listWrapper{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .menu__list,
    .menu__bannerList{
        width: 100%;
    }
    .menu__list{
        margin-bottom: 40px;
    }
    .menu__listItem a{
        font-size: 13px;
        padding: 10px 0;
    }
    .menu__listItem:nth-of-type(1):after,
    .menu__listItem:nth-of-type(2):after,
    .menu__listItem:before{
        width: calc(100% - 8px);
        left: 4px;
    }
    .menu__listItem:nth-of-type(2n) a:after,
    .menu__listItem a:before{
        height: calc(100% - 8px);
        bottom: 4px;
    }
    .menu__bannerListItem:nth-of-type(1){
        order: 3;
    }
    .menu__bannerList{
        flex-wrap: wrap;
        justify-content: center;
        margin-left: -4px;
        width: calc(100% + 8px);
    }
    .menu__bannerList img{
        width: 100%;
        height: auto;
    }
    .menu__bannerListItem{
        width: 50%;
        margin: 0 0 8px !important;
        padding: 0 4px;
        box-sizing: border-box;

    }
}

@media screen and (min-width: 737px) {
    .sp{
        display: none;
    }
    .w1240{
        width: 1240px;
        margin: 0 auto;
    }
    .w1100{
        width: 1100px;
        margin: 0 auto;
    }
    .w1000{
        width: 1000px;
        margin: 0 auto;
    }
    .flexbox{
        display: flex;
        justify-content: center;
        align-items: self-start;
    }
    a img{
        transition: 0.3s;
    }
    a:hover img{
        opacity: 0.8;
    }

    /* =========================
    #fv
    ============================ */
	#fv{
        position: relative;
        background: #F4F2EF;
    }
	#fv #main{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
	#fv #main img{
        width: 100%;
        height: auto;
        max-width: 100%;
    }
	#fv #main img:not(#fv_main){
        position: absolute;
        top: 0;
        left: 0;
    }
	#fv h1{
        position: absolute;
        top: 32px;
        left: 32px;
        z-index: 1;
    }

    /* =========================
    #lead
    ============================ */
    #lead{
        background: url(../img/lead_bg.jpg) no-repeat bottom center;
        background-size: cover;
        padding: 104px 0 116px;
        color: #fff;
    }
    .lead__title{
        font-size: 42px;
        font-weight: 500;
        line-height: 1.5;
        padding-bottom: 9px;
        margin-bottom: 49px;
    }
    .lead__title span{
        padding-bottom: 6px;
        position: relative;
    }
    .lead__title span:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
    }
    .lead__sub{
        font-size: 28px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 20px;
    }
    .lead__desc{
        font-weight: 600;
    }

    /* =========================
    .dept
    ============================ */
    .dept__overview{
        position: relative;
        padding: 82px 0 100px;
    }
    .dept__overview:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 520px;
    }
    #kankyo .dept__overview:before{
        background: url(../img/dept_kankyo__bg1.jpg) no-repeat top center;
        background-size: cover;
    }
    #seikatsu .dept__overview:before{
        background: url(../img/dept_seikatsu__bg1.jpg) no-repeat top center;
        background-size: cover;
    }
    .dept__leadImg{
        width: 620px;
        text-align: right;
        position: relative;
        margin-bottom: 40px;
    }
    .dept__leadImg img{
        position: relative;
        top: -82px;
        left: 90px;
        z-index: -1;
    }
    .dept__leadImg:before{
        content: "";
        position: absolute;
        top: 0;
        left: -283px;
        width: 883px;
        height: 100%;
    }
    #kankyo .dept__leadImg:before{
        background: url(../img/dept_kankyo__main1.png) no-repeat center;
        background-size: contain;
    }
    #seikatsu .dept__leadImg:before{
        background: url(../img/dept_seikatsu__main1.png) no-repeat center;
        background-size: contain;
    }
    .dept__leadText{
        width: 518px;
        padding-top: 85px;
    }
    .dept__leadTitle{
        margin-bottom: 64px;
    }
    #kankyo .dept__leadTitle{
        color: #3AAFBF;
    }
    #seikatsu .dept__leadTitle{
        color: #51AFE3;
    }
    .dept__leadTitle h3{
        font-size: 26px;
        font-weight: 500;
        line-height: 1.5;
    }
    .dept__leadTitle h2{
        font-size: 62px;
        font-weight: 500;
        line-height: 1.5;
        margin-top: -8px;
    }
    .dept__leadTitle p{
        font-size: 18px;
        margin-top: 4px;
        line-height: 1.5;
    }
    .dept__leadSub{
        font-size: 28px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 13px;
    }
    .dept__ideal{
        padding: 48px 64px;
        background: #FDFFDD;
        font-size: 18px;
        position: relative;
    }
    #kankyo .dept__ideal{
        margin-bottom: 40px;
    }
    #seikatsu .dept__ideal{
        margin-bottom: 45px;
    }
    .dept__idealTitle{
        font-size: 28px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 10px;
    }
    #kankyo .dept__idealTitle{
        color: #3AAFBF;
    }
    #seikatsu .dept__idealTitle{
        color: #51AFE3;
    }
    * + .dept__idealTitle{
        margin-top: 40px;
    }
    .dept__idealList li{
        margin-bottom: 9px;
        padding-left: 24px;
        position: relative;
    }
    #kankyo .dept__idealList li:before{
        background: #3AAFBF;
    }
    #seikatsu .dept__idealList li:before{
        background: #51AFE3;
    }
    .dept__idealList li:before{
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        height: 13px;
        width: 18px;
        background: #222;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: rotate(90deg);
    }
    .dept__idealList li:last-of-type{
        margin-bottom: 0;
    }
    .dept__idealDesc{
        width: 658px;
    }
    .dept__idealImg{
        position: absolute;
        right: 20px;
    }
    #kankyo .dept__idealImg{
        bottom: -295px;
    }
    #seikatsu .dept__idealImg{
        bottom: -275px;
    }
    .dept__other{
        justify-content: space-between;
    }
    .dept__otherBox{
        width: 662px;
    }
    .dept__otherDesc + *{
        margin-top: 10px;
    }
    .dept__otherDesc--small{
        font-size: 14px;
    }
    #kankyo .dept__other + .dept__other{
        margin-top: 48px;
    }
    #seikatsu .dept__other + .dept__other{
        margin-top: 53px;
    }
    .dept__otherBox-small{
        width: 498px;
    }
    .dept__otherBox-small .dept__otherDesc--small {
        margin-top: 32px;
        line-height: 180%;
    }
    .dept__otherBox  .dept__otherDesc--small {
        margin-top: 10px;
        line-height: 180%;
    }
    .dept__otherTitle{
        font-size: 28px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 16px;
    }
    #kankyo .dept__otherTitle{
        color: #3AAFBF;
    }
    #seikatsu .dept__otherTitle{
        color: #51AFE3;
    }
    .dept__otherTitle span{
        padding-bottom: 10px;
        position: relative;
        display: block;
    }
    .dept__otherTitle span:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
    }
    #kankyo .dept__otherTitle span:before{
        background: #3AAFBF;
    }
    #seikatsu .dept__otherTitle span:before{
        background: #51AFE3;
    }
    .dept__otherList{
        font-size: 18px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #kankyo .dept__otherList li span{
        color: #3AAFBF;
    }
    #seikatsu .dept__otherList li span{
        color: #51AFE3;
    }
    .dept__otherImg{
        margin-top: 20px;
    }
    .dept__keyword{
        padding: 80px 0 100px;
    }
    #kankyo .dept__keyword{
        background: url(../img/dept_kankyo__bg2.jpg)no-repeat center #5BC0C5;
        background-size: cover;
    }
    #seikatsu .dept__keyword{
        background: url(../img/dept_seikatsu__bg2.jpg)no-repeat center #79C4FB;
        background-size: cover;
    }
    .dept__keywordTitle{
        font-size: 54px;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 40px;
        color: #fff;
    }
    .dept__keywordTitle span{
        font-size: 38px;
    }
    .dept__keywordSub{
        margin-bottom: 20px;
    }
    .dept__keywordSub span {
        display: inline-block;
        position: relative;
        width: 467px;
        font-size: 21px;
        font-weight: 700;
        line-height: 51px;
        color: #fff;
    }
    #kankyo .dept__keywordSub span{
        background: #387D7F;
    }
    #seikatsu .dept__keywordSub span{
        background: #4578A0;
    }
    .dept__keywordSub span:before,
    .dept__keywordSub span:after {
        position: absolute;
        top: 0;
        content: "";
        width: 17px;
        height: 51px;
        z-index: 1;
    }
    .dept__keywordSub span:before{
        left: -17px;
    }
    .dept__keywordSub span:after{
        right: -17px;
        transform: rotate(180deg);
    }
    #kankyo .dept__keywordSub span:before,
    #kankyo .dept__keywordSub span:after{
        background: url(../img/dept_keywordSub__kankyo.svg)no-repeat center;
        background-size: contain;
    }
    #seikatsu .dept__keywordSub span:before,
    #seikatsu .dept__keywordSub span:after{
        background: url(../img/dept_keywordSub__seikatsu.svg)no-repeat center;
        background-size: contain;
    }
    .dept__keywordList{
        margin-bottom: 50px;
    }
    .dept__keywordList li{
        font-size: 20px;
        font-weight: 700;
        line-height: 49px;
        padding: 0 20px;
        background: #FFF9C7;
        border-radius: 50px;
        white-space: nowrap;
        font-feature-settings: "halt";
    }
    .dept__keywordList li:not(:last-of-type){
        margin-right: 12px;
    }
    #kankyo .dept__keywordList li{
        color: #387D7F;
    }
    #seikatsu .dept__keywordList li{
        color: #4578A0;
    }
    .dept__topic{
        align-items: unset;
    }
    #kankyo .dept__topic{
        width: 1138px;
        margin: auto;
    }
    #seikatsu .dept__topic{
        width: 1262px;
        margin: auto;
    }
    .dept__topicBox{
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px rgba(6,50,45,0.25);
        background: #fff;
    }
    #kankyo .dept__topicBox{
        width: calc((100% - 64px) / 2);
        margin-right: 64px;
    }
    #seikatsu .dept__topicBox{
        width: calc((100% - 100px) / 3);
        margin-right: 50px;
    }
    .dept__topicBox:last-of-type{
        margin-right: 0 !important;
    }
    .dept__topicImg{
        border-radius: 20px 20px 0 0;
        overflow: hidden;
    }
    .dept__topicImg img{
        width: 100%;
        height: auto;
    }
    .dept__topicTextBox{
        padding: 20px 24px 32px;
    }
    .dept__topicTitlBox{
        margin-bottom: 16px;
    }
    .dept__topicTitle{
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5;
    }
    .dept__topicIcon{
        display: block;
        line-height: 14px;
        margin: 4px 0;
    }
    .dept__topicDesc{
        line-height: 26px;
    }

    /* =========================
    #info
    ============================ */
    #info{
        padding: 100px 0;
    }
    .info__box:not(:last-of-type){
        margin-bottom: 32px;
    }
    .info__box .flexbox{
        justify-content: space-between;
    }
    .info__boxTitle{
        font-size: 19px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 16px;
        padding-left: 22px;
        position: relative;
    }
    .info__boxTitle:before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 14px;
        height: 14px;
        background: #B01E31;
        transform: translateY(-50%);
    }
    .info__boxText{
        font-size: 18px;
    }
    .info__boxText--small{
        font-size: 13px;
        line-height: 1.5;
    }
    .flexbox + .info__boxText--small{
        margin-top: 12px;
    }
    .text-indent{
        text-indent: -1em;
        padding-left: 1em;
    }
    .info__map {
        position: relative;
        width: 1100px;
        height: 500px;
        overflow: hidden;
    }
    .info__map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .info__map + .info__access{
        margin-top: 40px;
    }
    .info__accessBox:not(:last-of-type){
        margin-bottom: 20px;
    }
    .access{
        justify-content: space-between;
        align-items: unset;
    }
    .access__title{
        width: 208px;
        position: relative;
    }
    .access__title span{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        font-weight: 500;
        white-space: nowrap;
    }
    #tenjin .access__title{
        background: #E7F2D2;
    }
    #hakata .access__title{
        background: #D9DFF3;
    }
    #kitakyushu .access__title{
        background: #EAE1F0;
    }
    .transportation{
        width: 860px;
    }
    .transportation__box{
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #757575;
        align-items: center;
    }
    .transportation__box:last-of-type{
        border-bottom: none;
        margin-bottom: 0;
    }
    .transportation__name{
        width: 172px;
        box-sizing: border-box;
        padding-left: 28px;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
    }
    .transportation__text{
        width: 688px;
        line-height: 26px;
    }
    .transportation__text span{
        font-size: 13px;
    }

    /* =========================
    #faq
    ============================ */
    #faq{
        padding: 80px 0 100px;
        background: #F4F2EF;
    }
    .faq__title{
        font-size: 42px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .faq__box{
        padding: 20px 0;
        border-bottom: 1px solid #969696;
    }
    .faq__q{
        font-size: 18px;
        line-height: 37px;
        padding-left: 47px;
        padding-right: 48px;
        background: url(../img/faq_q.svg) no-repeat left top;
        background-size: 37px;
        position: relative;
        cursor: pointer;
        transition: 0.3s;
    }
    .faq__q:before{
        content: "";
        width: 48px;
        height: 48px;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -24px;
        background: url(../img/faq_arrow.svg) no-repeat center;
        background-size: contain;
        transition: 0.3s;
    }
    .faq__q.active:before{
        transform: rotate(180deg);
    }
    /* Qにマウスオーバーしたとき */
    .faq__q:hover{
        opacity: 0.8;
    }
    .faq__q:hover::before{
        margin-top: -20px;
    }
    .faq__q.active:hover::before{
        margin-top: -28px;
    }
    .faq__a{
        display: none;
        line-height: 27px;
        margin-top: 20px;
        padding-left: 47px;
        background: url(../img/faq_a.svg) no-repeat left top;
        background-size: 37px;
    }

    /* =========================
    footer
    ============================ */
    footer{
        padding: 62px 0 92px;
    }
    .footer__link li{
        margin: 0 20px;
    }
    .footer__copy{
        display: block;
        font-size: 11px;
        letter-spacing: 0.01em;
        margin-top: 40px;
    }
}

@media screen and (max-width: 736px) {
    .pc{
        display: none;
    }

    /* =========================
    #fv
    ============================ */
	#fv{
        position: relative;
        background: #F4F2EF;
    }
    h1 {
        position: absolute;
        top: 16px;
        left: 10px;
        width: 154px;
        height: 34px;
        z-index: 1;
    }
    h1 img {
        width: 100%;
    }

    /* =========================
    #lead
    ============================ */
    #lead{
        background: url(../img/lead_bg.jpg) no-repeat bottom center;
        background-size: cover;
        padding: 64px 20px 80px;
        color: #fff;
    }
    .lead__title{
        font-size: 27px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 32px;
    }
    .lead__title span{
        padding-bottom: 6px;
        position: relative;
    }
    .lead__title span:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
    }
    .lead__sub{
        font-size: 20px;
        font-weight: 500;
        line-height: 36px;
        margin-bottom: 24px;
    }
    .lead__desc{
        font-size: 14px;
        font-weight: 500;
        line-height: 2;
    }
    .lead__desc span{
        white-space: nowrap;
        line-height: 1;
    }

    /* =========================
    .dept
    ============================ */
    .dept__overview{
        position: relative;
        padding: 48px 20px 120px;
        overflow: hidden;
    }
    .dept__overview:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        /*height: 520px;*/
        height: 220px;
    }
    #kankyo .dept__overview:before{
        background: url(../img/dept_kankyo__bg1.jpg) no-repeat top center;
        background-size: cover;
    }
    #seikatsu .dept__overview:before{
        background: url(../img/dept_seikatsu__bg1.jpg) no-repeat top center;
        background-size: cover;
    }
    .dept__lead{
        display: flex;
        flex-wrap: wrap;
    }
    .dept__leadImg{
        order: 2;
        text-align: right;
        position: relative;
        margin-bottom: 40px;
    }
    .dept__leadImg img{
        width: 100%;
        height: auto;
        position: relative;
        top: -108px;
        right: -20%;
        z-index: -1;
    }
    .dept__leadImg:before{
        content: "";
        position: absolute;
        top: 0;
        left: -20%;
        width: 100%;
        height: 100%;
    }
    #kankyo .dept__leadImg:before{
        background: url(../img/dept_kankyo__main1.png) no-repeat center;
        background-size: contain;
    }
    #seikatsu .dept__leadImg:before{
        background: url(../img/dept_seikatsu__main1.png) no-repeat center;
        background-size: contain;
    }
    .dept__leadText{
        order: 1;
        width: 100%;
        margin-bottom: 32px;
    }
    .dept__leadTitle{
        margin-bottom: 20px;
    }
    #kankyo .dept__leadTitle{
        color: #3AAFBF;
    }
    #seikatsu .dept__leadTitle{
        color: #51AFE3;
    }
    .dept__leadTitle h3{
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
    }
    .dept__leadTitle h2{
        font-size: 36px;
        font-weight: 500;
        line-height: 1.5;
    }
    .dept__leadTitle p{
        font-size: 14px;
        line-height: 1.8;
    }
    .dept__leadSub{
        font-size: 22px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 13px;
    }
    .dept__leadDesc{
        line-height: 1.8;
    }
    .dept__keywordSub{
        margin-bottom: 20px;
    }
    .dept__keywordSub span {
        display: inline-block;
        position: relative;
        width: calc(100% - 74px);
        font-size: 21px;
        font-weight: 700;
        line-height: 51px;
        color: #fff;
    }
    #kankyo .dept__keywordSub span{
        background: #387D7F;
    }
    #seikatsu .dept__keywordSub span{
        background: #4578A0;
    }
    .dept__keywordSub span:before,
    .dept__keywordSub span:after {
        position: absolute;
        top: 0;
        content: "";
        width: 17px;
        height: 51px;
        z-index: 1;
    }
    .dept__keywordSub span:before{
        left: -16px;
    }
    .dept__keywordSub span:after{
        right: -16px;
        transform: rotate(180deg);
    }
    #kankyo .dept__keywordSub span:before,
    #kankyo .dept__keywordSub span:after{
        background: url(../img/dept_keywordSub__kankyo.svg)no-repeat center;
        background-size: contain;
    }
    #seikatsu .dept__keywordSub span:before,
    #seikatsu .dept__keywordSub span:after{
        background: url(../img/dept_keywordSub__seikatsu.svg)no-repeat center;
        background-size: contain;
    }
    .dept__topicImg img{
        width: 100%;
        height: auto;
    }

    .dept__ideal {
        padding: 24px 32px;
        background: #FDFFDD;
        font-size: 18px;
        position: relative;
        margin-bottom: 40px;
    }
    #kankyo .dept__idealTitle {
        color: #3AAFBF;
    }
    .dept__idealTitle {
        font-size: 22px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 10px;
    }
    .dept__idealList li {
        margin-bottom: 9px;
        padding-left: 24px;
        position: relative;
        font-size: 16px;
        line-height: 180%;
    }
    #kankyo .dept__idealList li:before {
        background: #3AAFBF;
    }
    .dept__idealList li:before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        height: 13px;
        width: 18px;
        background: #222;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: rotate(90deg);
    }
    .dept__idealList {
        margin-bottom: 32px;
    }
    .dept__idealDesc {
        font-size: 16px;
    }
    .dept__idealImg {
        margin-top: 20px;
    }
    .dept__idealImg img {
        width: 100%;
        height: auto;
    }
    #kankyo .dept__otherTitle {
        color: #3AAFBF;
    }
    .dept__otherTitle {
        font-size: 22px;
        font-weight: 500;
        line-height: 42px;
        margin-bottom: 16px;
    }
    .dept__otherTitle span{
        padding-bottom: 10px;
        position: relative;
        display: block;
    }
    .dept__otherTitle span:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
    }
    #kankyo .dept__otherTitle span:before{
        background: #3AAFBF;
    }
    #seikatsu .dept__otherTitle span:before{
        background: #51AFE3;
    }
    .dept__other {
        margin-bottom: 40px;
    }
    .dept__otherDesc + *{
        margin-top: 10px;
    }
    .dept__otherDesc--small{
        font-size: 14px;
        line-height: 1.6;
    }
    .dept__otherImg {
        margin-top: 20px;
    }
    .dept__otherImg img {
        width: 100%;
        height: auto;
    }
    #kankyo .dept__otherList {
        margin-bottom: 10px;
    }
    #seikatsu .dept__otherList {
        margin-bottom: 10px;
    }
    #kankyo .dept__otherList li span {
        color: #3AAFBF;
    }
    .dept__otherBox {
        margin-bottom: 40px;
    }
    #kankyo .dept__keyword {
        background: url(../img/dept_kankyo__bg2.jpg) no-repeat center #5BC0C5;
        background-size: cover;
    }
    .dept__keyword {
        padding: 40px 0;
    }
    .dept__keywordTitle {
        font-size: 36px;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 20px;
        color: #fff;
    }
    .dept__keywordTitle span {
        font-size: 26px;
    }
    .dept__keywordList li {
        font-size: 20px;
        font-weight: 700;
        line-height: 49px;
        padding: 0 20px;
        background: #FFF9C7;
        border-radius: 50px;
        white-space: nowrap;
        font-feature-settings: "halt";
    }
    .dept__keywordList li:not(:last-of-type){
        margin-right: 12px;
    }
    #kankyo .dept__keywordList li {
        color: #387D7F;
        display: inline-block;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .dept__keywordList {
        margin-bottom: 32px;
    }
    #kankyo .dept__topicBox {
        width: 90%;
        margin: 0 auto;
    }
    .dept__topicImg {
        border-radius: 20px 20px 0 0;
        overflow: hidden;
    }
    .dept__topicTextBox {
        padding: 20px 24px 32px;
        margin-bottom: 32px;
    }
    .dept__topicBox {
        width: 90%;
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px rgba(6, 50, 45, 0.25);
        background: #fff;
        margin-right: 64px;
    }
    .dept__topicTitlBox {
        margin-bottom: 16px;
    }
    .dept__topicDesc {
        line-height: 26px;
    }
    .dept__topicTitle {
        font-size: 21px;
        font-weight: 500;
        line-height: 1.5;
    }
    .dept__topicIcon {
        display: block;
        line-height: 14px;
        margin: 4px 0;
    }
    #seikatsu .dept__idealTitle {
        color: #51AFE3;
        font-size: 22px;
    }
    #seikatsu .dept__idealList li:before {
        background: #51AFE3;
    }
    .dept__idealList li:before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        height: 13px;
        width: 18px;
        background: #222;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: rotate(90deg);
    }
    #seikatsu .dept__otherTitle {
        color: #51AFE3;
    }
    #seikatsu .dept__otherList li span {
        color: #51AFE3;
    }
    #seikatsu .dept__keyword {
        background: url(../img/dept_seikatsu__bg2.jpg) no-repeat center #79C4FB;
        background-size: cover;
    }
    #seikatsu .dept__keywordList li {
        color: #4578A0;
        display: inline-block;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .dept__topicBox {
        margin: 0 auto;
    }


    /* =========================
    #info
    ============================ */
    #info{
        padding: 48px 20px 64px;
    }
    .info__box:not(:last-of-type),
    .info__innerBox:not(:last-of-type){
        margin-bottom: 32px;
    }
    .info__boxTitle{
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 16px;
        padding-left: 22px;
        position: relative;
    }
    .info__boxTitle:before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 14px;
        height: 14px;
        background: #B01E31;
        transform: translateY(-50%);
    }
    .info__img img{
        max-width: 100%;
        height: auto;
    }
    .info__img--large{
        width: 100%;
        height: auto;
        max-width: 100%;
        overflow-y: hidden;
    }
    .info__img--large img{
        /*height: calc(313 / 430 * 100vw);
        width: auto;*/
        width: 100%;
    }
    .info__boxText{
        line-height: 1.8;
    }
    .info__boxText--small{
        font-size: 13px;
        line-height: 1.5;
        display: block;
        margin-top: 12px;
    }
    .text-indent{
        text-indent: -1em;
        padding-left: 1em;
    }
    .info__map {
        position: relative;
        aspect-ratio: 1/1;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .info__map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .info__map + .info__access{
        margin-top: 40px;
    }
    .info__accessBox:not(:last-of-type){
        margin-bottom: 20px;
    }
    .access__title{
        position: relative;
        font-size: 18px;
        font-weight: 500;
        padding: 4px 12px;
        margin-bottom: 16px;
    }
    #tenjin .access__title{
        background: #E7F2D2;
    }
    #hakata .access__title{
        background: #D9DFF3;
    }
    #kitakyushu .access__title{
        background: #EAE1F0;
    }
    .transportation{
    }
    .transportation__box{
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #757575;
        align-items: center;
    }
    .transportation__box:last-of-type{
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .transportation__name{
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
        margin-bottom: 12px;
    }
    .transportation__text{
        font-size: 14px;
        line-height: 1.8;
    }
    .transportation__text span{
        font-size: 13px;
    }

    /* =========================
    #faq
    ============================ */
    #faq{
        padding: 48px 20px 64px;
        background: #F4F2EF;
    }
    .faq__title{
        font-size: 28px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .faq__box{
        padding: 16px 0;
        border-bottom: 1px solid #969696;
    }
    .faq__q{
        padding: 4px 0;
        line-height: 1.5;
        padding-left: 40px;
        padding-right: 40px;
        background: url(../img/faq_q.svg) no-repeat left top;
        background-size: 32px;
        position: relative;
    }
    .faq__q:before{
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -20px;
        background: url(../img/faq_arrow.svg) no-repeat center;
        background-size: contain;
        transition: 0.3s;
    }
    .faq__q.active:before{
        transform: rotate(180deg);
    }
    .faq__a{
        font-size: 14px;
        display: none;
        line-height: 27px;
        margin-top: 12px;
        padding-left: 40px;
        background: url(../img/faq_a.svg) no-repeat left top;
        background-size: 32px;
    }
}
    /* =========================
    footer
    ============================ */
    footer{
        padding: 48px 20px;
    }
    .footer__link li:not(:last-of-type){
        margin-bottom: 4px;
    }
    .footer__copy{
        display: block;
        font-size: 10px;
        margin-top: 40px;
        line-height: 1.5;
    }

@media screen and (max-width: 736px) {
    .footer__link li:not(:last-of-type) {
        margin-bottom: 16px;
    }
}



/* ローディングの背景部分のCSS */
.loader{
  background:#1bb;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10;
}
 
/* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */
.loader-animation,
.loader-animation:before,
.loader-animation:after {
  background:#ffffff;
  -webkit-animation:load1 1s infinite ease-in-out;
  animation:load1 1s infinite ease-in-out;
  width:1em;
  height:4em;
}
.loader-animation {
  height:10px;
  left:50%;
  margin:-5px 0 0 -5px;
  position:absolute;
  top:50%;
  width:10px;
  color:#ffffff;
  text-indent:-9999em;
  font-size:10px;
  -webkit-transform:translateZ(0);
  -ms-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-animation-delay:-0.16s;
  animation-delay:-0.16s;
}
.loader-animation:before,
.loader-animation:after {
  position:absolute;
  top:0;
  content:'';
}
.loader-animation:before {
  left:-1.5em;
  -webkit-animation-delay:-0.32s;
  animation-delay:-0.32s;
}
.loader-animation:after {
  left:1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }
  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}


/* 20250611追記 */
span.example {
    font-size: 0.8em;
    vertical-align: super;
    color: #222222!important;
}