@charset "utf-8";

/*============================================================
    フッター（WordPress テーマ satorujapan と共通デザイン）
    - 本番サイト /css/footerNav.css を移植
    - #gFooter のラップ余白は本番 common.css より移植
============================================================*/

#gFooter {
    padding: 0 20px 50px;
    position: relative;
    overflow: hidden;
}

.footer {
    margin: 0 auto;
    width: 840px;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .footer {
        width: 100%;
    }
}

.footerMenu {
    padding: 0 0 0 112px;
    display: flex;
    box-sizing: border-box;
    column-gap: 70px;
}

@media screen and (max-width: 767px) {
    .footerMenu {
        padding: 0 0 0 68px;
        flex-direction: column;
    }
}

.footerMenu__wrapper {
    display: flex;
    column-gap: 70px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .footerMenu__wrapper {
        padding: 0 0 38px 0;
        column-gap: 32px;
    }
}

.footerMenu__wrapper--noHeading {
    padding: 70.5px 0 0 0;
}

@media screen and (max-width: 767px) {
    .footerMenu__wrapper--noHeading {
        padding: 28px 0;
    }
}

.footerMenu__wrapper--noHeading .footerMenu__item {
    width: 100%;
}

.footerMenu__title {
    top: 5px;
    left: -78px;
    transform-origin: top left;
    position: absolute;
}

@media screen and (max-width: 767px) {
    .footerMenu__title {
        left: -77px;
    }
}

.footerMenu__item {
    width: 144px;
}

@media screen and (max-width: 767px) {
    .footerMenu__item {
        width: 125px;
        flex-grow: 1;
        max-width: 50%;
    }
}

.footerMenu__heading {
    margin: 0 0 34px 0;
    padding: 0 0 13px 0;
    border-bottom: 1px solid #808080;
    font-size: 15px;
    font-weight: 600;
    color: #808080;
    display: block;
}

@media screen and (max-width: 767px) {
    .footerMenu__heading {
        margin: 0 0 23px 0;
        max-width: 125px;
    }
}

.footerMenu__list {
    display: flex;
    flex-direction: column;
    row-gap: 27px;
}

@media screen and (max-width: 767px) {
    .footerMenu__list {
        row-gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .footerMenu__list--last {
        row-gap: 10px;
    }
}

.footerMenu__list__text {
    font-size: 12px;
}

@media screen and (max-width: 767px) {
    .footerMenu__list__text {
        font-size: 11px;
    }
}

.footerMenu__list__text--english {
    font-size: 17px;
}

@media screen and (max-width: 767px) {
    .footerMenu__list__text--english {
        font-size: 15px;
    }
}

.footerMenu__list__link {
    display: inline-block;
    white-space: nowrap;
}

.footerMenu__list__link--text {
    font-size: 15px;
}

@media screen and (max-width: 767px) {
    .footerMenu__list__link--text {
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {
    .footerMenu__list__link--withIcon {
        position: relative;
    }
}

@media screen and (max-width: 767px) {
    .footerMenu__list__icon {
        top: 0;
        right: -10px;
        width: 26px;
        height: 22px;
        position: absolute;
    }
}

@media screen and (max-width: 767px) {
    .footerMenu__list__icon--plus {
        top: 50%;
        transform: translateY(-50%);
        right: -15px;
        width: 8px;
        height: 8px;
    }
}

@media screen and (max-width: 767px) {
    .footerMenu__bottom {
        padding: 0 0 0 68px;
        display: flex;
        flex-direction: column-reverse;
    }
}

.footerMenu__button {
    margin: 65px 0 0 0;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .footerMenu__button {
        margin: 0;
        padding: 19px 0 105px 0;
    }
}

.footerMenu__button__sns {
    display: flex;
    column-gap: 20px;
}

.footerMenu__button__icon {
    height: 40px;
    transition: all 0.3s;
}

.footerMenu__button__icon:hover {
    margin: -5px 0 5px
}

.footerMenu__button__pageTop {
    padding: 15px 0 0 0;
    display: flex;
    align-items: center;
    column-gap: 11px;
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {
    .footerMenu__button__pageTop {
        position: absolute;
        right: 24px;
        bottom: 33px;
        column-gap: 4px;
        font-size: 11px;
    }
}

.footerMenu__pageTop__icon {
    width: 13px;
    height: 8px;
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {
    .footerMenu__pageTop__icon {
        width: 9px;
        height: 6px;
    }
}

.footerMenu__button__pageTop:hover .footerMenu__pageTop__icon {
    margin: -5px 0 5px
}

.footerMenu__divider {
    margin: 17px 0;
    width: 100%;
    height: 1px;
    background-color: #808080;
}

@media screen and (max-width: 767px) {
    .footerMenu__divider {
        margin: 0;
    }
}

.footerMenu__navi {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .footerMenu__navi {
        padding: 30px 0;
    }
}

.footerMenu__navi__list {
    display: flex;
    column-gap: 20px;
}

@media screen and (max-width: 767px) {
    .footerMenu__navi__list {
      width: 270px;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px 23px;
    }
}

a.footerMenu__navi__link {
    font-size: 12px;
    color: #808080;
}

@media screen and (max-width: 767px) {
    a.footerMenu__navi__link {
        font-size: 11px;
    }
}

.footerMenu__navi__copyright {
    font-size: 11px;
    color: #808080;
}

@media screen and (max-width: 767px) {
    .footerMenu__navi__copyright {
        position: absolute;
        bottom: 33px;
        left: 23px;
    }
}

.footerMenu__textLink {
    position: relative;
}

.footerMenu__textLink:before {
    background-color: #000;
    bottom: -1px;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: right center 0;
    -webkit-transform-origin: right center 0;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    width: 100%;
}

.footerMenu__textLink:hover:before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform-origin: left center 0;
    -webkit-transform-origin: left center 0;
}

.footerMenu__opacity:hover {
    opacity: 0.6;
    transition: opacity 0.4s ease-in-out;
}

/* フッター内 SP/PC 出し分け（本番 common.css の .sp / .pc 相当をフッターにスコープ） */
#gFooter .sp {
    display: none;
}

#gFooter .pc {
    display: block;
}

@media screen and (max-width: 767px) {
    #gFooter .sp {
        display: block;
    }

    #gFooter .pc {
        display: none;
    }
}