/* kv */
#kv {
    margin-bottom: 12rem;
}
@media only screen and (min-width: 900px) {
    #kv {
        margin-bottom: 8rem;
    }
}

/* info */
#info {
    width: 72rem;
    margin: 0 auto 10rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .16);
    padding: 8rem 5.2rem 10rem 7rem;
}
#info .info-ttl {
    font-family: roboto, sans-serif;
    font-size: 3.6rem;
    margin-bottom: 7rem;
}
#info .txt + .txt {
    margin-top: 1rem;
}
#info .arrow-b:after {
    top: 2rem;
    right: 1.8rem;
}
@media only screen and (min-width: 900px) {
    #info {
        width: 150rem;
        padding: 3.5rem 13rem;
        margin: 0 auto 8rem;
    }
    #info article {
        display: grid;
        grid-template-columns: 24.8rem 1fr;
        align-items: center;
        column-gap: 2rem;
    }
    #info .info-ttl {
        font-size: max(1.6rem, 16px);
        margin-bottom: 0;
    }
    #info .info-wrap .inner {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 2rem;
        align-items: center;
    }
    #info .txt + .txt {
        margin-top: 0;
    }
    #info .arrow-b:after {
        top: 50%;
        transform: translateY(-50%);
        right: initial;
        left: calc(100% + max(3rem, 30px));
    }
}

/* bnr */
@media only screen and (max-width: 899px) {
    .bnr-area {
        width: 70rem;
        margin: 0 auto 28rem;
    }
}
@media only screen and (min-width: 900px) {
    .bnr-area {
        width: 80rem;
        min-width: 700px;
        /* display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 4rem; */
        margin: 8rem auto;
    }
}

/* ttl-wrap */
.ttl-wrap .ttl-en {
    font-family: garamond-premier-pro, serif;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: .14em;
    display: block;
    width: max-content;
    position: relative;
}
.ttl-wrap .ttl-en:after {
    content: "";
    background-color: #333333;
    position: absolute;
}
.ttl-wrap .ttl-en.ttl-center {
    border-bottom:  1px solid #333333;
    padding-bottom: .5rem;
    margin: 0 auto 6rem;
}
.ttl-wrap .ttl-txt {
    font-family: "aw-conqueror-didot", serif;
    font-size: 6rem;
    font-weight: 400;
    line-height: 1.4;
}
.ttl-wrap .ttl-txt span {
    font-size: 3.6rem;
    display: block;
}
@media only screen and (min-width: 900px) {
    .ttl-wrap .ttl-en {
        font-size: max(1.8rem, 18px);
    }
    .ttl-wrap .ttl-en.ttl-center {
        margin: 0 auto 4rem;
    }
    .ttl-wrap .ttl-txt {
        font-size: max(6rem, 26px);
    }
    .ttl-wrap .ttl-txt span {
        font-size: max(2.8rem, 28px);
    }
}

/* about */
#about {
    display: grid;
    margin: 26rem 0 16rem;
}
#about .img-wrap {
    position: relative;
}
#about .img-wrap .en-txt {
    font-family: austin-pen, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    position: absolute;
    bottom: 4rem;
    left: 2rem;
    width: 47%;
    text-align: right;
}
#about .ttl-en {
    margin-bottom: 6rem;
}
#about .ttl-en:after {
    width: 14rem;
    height: 1px;
    left: calc(100% + 2.8rem);
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width: 899px) {
    #about .img-wrap {
        order: 1;
        width: 73rem;
        margin: 0 0 8rem;
    }
    #about .ttl-wrap {
        order: 2;
        width: 72rem;
        margin: 0 auto 8rem;
    }
    #about .txt-wrap {
        order: 3;
        width: 70rem;
        margin: 0 auto;
    }
    #about .txt-wrap .arrow-btn {
        margin: 8rem auto 0;
    }
}
@media only screen and (min-width: 900px) {
    #about {
        width: 182rem;
        margin-bottom: 28.4rem;
        grid-template-columns: 98.1rem 16.7rem 1fr;
        row-gap: 13rem;
    }
    #about .img-wrap {
        grid-area: 1 / span 2;
    }
    #about .img-wrap .en-txt {
        font-size: max(1.2rem, 12px);
        bottom: 0;
        right: initial;
        left: calc(100% + 11rem);
        width: 45rem;
        text-align: left;
    }
    #about .ttl-wrap {
        grid-area: 1 / 3;
        padding-left: 11rem;
        margin-top: 10rem;
    }
    #about .ttl-en {
        margin-bottom: 4rem;
    }
    #about .ttl-en:after {
        width: max(12rem, 120px);
        height: 1px;
        left: calc(100% + max(1.7rem, 17px));
        transform: none;
        top: 65%;
    }
    #about .ttl-wrap .ttl-txt {
        font-size: max(6rem, 26px);
    }
    #about .txt-wrap {
        grid-area: 2 / 1;
        padding: 0 16.9rem 0 36rem;
    }
    #about .img.pc-only {
        grid-area: 2 / span 3;
    }
    #about .txt-wrap .arrow-btn {
        margin: 6rem 0 0 0;
    }
}

/* shop */
#shop .ttl-en {
    margin: 0 0 6rem auto;
}
#shop .ttl-en:after {
    width: 14rem;
    height: 1px;
    right: calc(100% + 2.8rem);
    top: 70%;
}
@media only screen and (max-width: 899px) {
    #shop {
        display: flex;
        flex-direction: column;
        margin-bottom: 20rem;
    }
    #shop picture.img {
        display: block;
        order: 1;
        width: 73rem;
        margin: 0 0 7rem auto;
    }
    #shop .ttl-wrap {
        order: 2;
        width: 72rem;
        margin: 0 auto 8rem;
        text-align: right;
    }
    #shop > .txt-wrap {
        order: 3;
        width: 70rem;
        margin: 0 auto;
    }
    #shop > .txt-wrap .arrow-btn {
        margin: 8rem auto 0;
    }
    #shop .shop-slider {
        order: 4;
        margin: 14rem 0 0;
        /* padding-bottom: 19rem; */
        position: relative;
    }
}
@media only screen and (min-width: 900px) {
    #shop {
        width: 175rem;
        margin: 0 0 20rem auto;
        display: grid;
        grid-template-columns: 32.8% 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 6%;
        row-gap: max(6rem, 60px);
    }
    #shop picture.img {
        grid-area: 1 / span 2;
    }
    #shop .ttl-wrap {
        grid-area: 2 / 1;
        display: grid;
        place-content: flex-start;
        margin-left: 15%;
    }
    #shop .ttl-en {
        margin: 0 0 4rem 0;
    }
    #shop .ttl-en:after {
        width: max(12rem, 120px);
        right: initial;
        left: calc(100% + max(1.7rem, 17px));
        top: 65%;
    }
    #shop > .txt-wrap {
        grid-area: 2 / 2;
        margin: 11% 0 7rem;
    }
    #shop > .txt-wrap .txt {
        width: 75rem;
    }
    #shop > .txt-wrap .arrow-btn {
        margin: max(5rem, 50px) 0 0;
    }
    #shop .shop-slider {
        grid-area: 3 / span 2;
        padding-left: 12%;
        margin-bottom: 0;
        display: flex;
    }
}
#shop .shop-slider:after {
    content: "";
    width: 100%;
    height: calc(100% - 10rem);
    background-color: #F2F2F2;
    position: absolute;
    top: 10rem;
    left: 0;
    z-index: -1;
}
#shop .shop-slider .slide {
    opacity: 0;
    transition: .4s;
    margin: 0 3rem 12rem 3rem;
}
#shop .shop-slider.slick-initialized .slide {
    opacity: 1;
}
#shop .shop-slider .slick-dots {
    width: 60rem;
    left: 50%;
    bottom: 17rem;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
#shop .shop-slider .slick-dots li {
    width: 100%;
    height: 1px;
    margin: 0;
}
#shop .shop-slider .slick-dots li button {
    background: #BFBFBF;
    width: 100%;
    height: 1px;
    padding: 0;
}
#shop .shop-slider .slick-dots li.slick-active button {
    background: #333;
}
#shop .shop-slider .slick-dots li button:before {
    content: none;
}
#shop .shop-wrap {
    display: grid;
}
#shop .shop-wrap .img {
    order: 1;
    margin-bottom: 6rem;
}
#shop .shop-wrap .shop-ttl {
    order: 2;
    margin-bottom: 6rem;
}
#shop .shop-wrap .shop-ttl .ttl-jp {
    font-size: 3.6rem;
    font-family: shippori-mincho, sans-serif;
    margin-bottom: 1.6rem;
}
#shop .shop-wrap .shop-ttl .ttl-en {
    font-size: 2.2rem;
    font-family: roboto, sans-serif;
    color: #B3B3B3;
    letter-spacing: .12em;
}
#shop .shop-wrap .txt-wrap {
    order: 3;
    margin-bottom: 5rem;
}
#shop .shop-wrap .txt-wrap .txt + .txt {
    margin-top: .5rem;
}
#shop .shop-wrap .arrow-b {
    order: 4;
    width: 18.6rem;
    margin-left: auto;
    font-size: 2.8rem;
    font-family: roboto, sans-serif;
}
#shop .shop-wrap .arrow-b:after {
    right: 0;
    bottom: .8rem;
}
@media only screen and (min-width: 900px) {
    #shop .shop-slider .slide {
        /* margin: 0 3.5rem 28rem 3.5rem; */
        margin: 0 3.5rem 14rem 3.5rem;
    }
    #shop .shop-slider .slick-dots {
        width: max(60rem, 600px);
        left: calc(12% + 3.5rem);
        transform: none;
        bottom: 15rem;
    }
    #shop .shop-wrap .img {
        margin-bottom: 5rem;
    }
    #shop .shop-wrap .shop-ttl,
    #shop .shop-wrap .txt-wrap {
        margin-bottom: 3rem;
    }
    #shop .shop-wrap .shop-ttl .ttl-jp {
        font-size: max(2.2rem, 22px);
    }
    #shop .shop-wrap .shop-ttl .ttl-en {
        font-size: max(1.1rem, 11px);
    }
    #shop .shop-wrap .arrow-b {
        font-size: max(1.4rem, 14px);
        width: max(9.3rem, 93px);
    }
    #shop .shop-wrap .arrow-b:after {
        bottom: max(.6rem, 6px);
    }
}

/* present */
#present {
    display: grid;
    margin-bottom: 20rem;
}
#present .ttl-en {
    margin-bottom: 2rem;
}
#present .ttl-en:after {
    width: 14rem;
    height: 1px;
    left: calc(100% + 2.8rem);
    top: 70%;
}
@media only screen and (max-width: 899px) {
    #present .img01 {
        order: 1;
        display: block;
        margin-bottom: 12rem;
    }
    #present .ttl-wrap {
        order: 2;
        width: 72rem;
        margin: 0 auto 8rem;
    }
    #present .txt-wrap {
        order: 3;
        width: 70rem;
        margin: 0 auto;
    }
    #present .arrow-btn {
        margin: 8rem 0 0 0;
    }
}
@media only screen and (min-width: 900px) {
    #present {
        margin-bottom: 18rem;
        grid-template-columns: 51.7rem 71rem 1fr;
        grid-template-rows: auto 1fr;
        row-gap: 9rem;
        position: relative;
    }
    #present .img02 {
        grid-area: 1 / 1 / 3 / 1;
        margin-right: 15.7rem;
    }
    #present .ttl-wrap {
        grid-area: 1 / 2 / 1 / 2;
        margin-top: 3rem;
    }
    #present .ttl-en:after {
        width: max(12rem, 120px);
        left: calc(100% + max(1.7rem, 17px));
        top: 65%;
    }
    #present .txt-wrap {
        grid-area: 2 / 2;
    }
    #present .img01 {
        grid-area: 1 / 3 / 3 / 3;
    }
    #present .arrow-btn {
        margin: 9rem 0 0 0;
    }
}

/* item */
#item {
    display: grid;
    margin-bottom: 20rem;
}
@media only screen and (max-width: 899px) {
    #item .item-img {
        order: 1;
        height: 30rem;
        background: url(../img/top/item-slide_sp.webp) repeat-x top center;
        background-size: auto 100%;
        animation: slideBackground 140s linear infinite;
        margin-bottom: 9.8rem;
    }
    @keyframes slideBackground {
        from {
            background-position: 0 top;
        }

        to {
            background-position: 726.1vw top;
        }
    }
    #item .ttl-wrap {
        order: 2;
        width: 70rem;
        margin: 0 0 2rem auto;
        position: relative;
    }
    #item .ttl-en {
        writing-mode: vertical-rl;
        position: absolute;
        top: 1.1rem;
    }
    #item .ttl-en:after {
        width: 1px;
        height: 14rem;
        top: calc(100% + 2.2rem);
        left: 1rem;
    }
    #item .ttl-txt {
        margin-left: 10rem;
    }
    #item .img {
        order: 3;
        width: 68.6rem;
        margin: 0 auto 4rem;
    }
    #item .txt-wrap {
        order: 4;
        width: 70rem;
        margin: 0 auto;
    }
    #item .link-wrap {
        order: 5;
        margin: 10rem auto 0;
        display: grid;
        row-gap: 4rem;
    }
}
@media only screen and (min-width: 900px) {
    #item {
        margin-bottom: 29rem;
        grid-template-columns: 91.2rem 1fr;
        grid-template-rows: 54rem minmax(100px, auto) minmax(100px, auto) auto;
        column-gap: 12rem;
    }
    #item .item-img {
        grid-area: 1 / 1 / 3 / 3;
        height: 54rem;
        background: url(../img/top/item-slide.webp) top center / cover repeat-x;
        animation: slideBackground 70s linear infinite;
    }
    @keyframes slideBackground {
        from {
            background-position: 0 top;
        }
        to {
            background-position: 258.59vw top;
            /* 4965px / 1920px * 100 = 258.59vw */
        }
    }
    #item .img {
        grid-area: 2 / 1 / 4;
        width: 73.8rem;
        margin: -4rem 0 0 auto;
        z-index: 2;
    }
    #item .ttl-wrap {
        grid-area: 2 / 2;
        margin: 15rem 0 6rem;
    }
    #item .ttl-en {
        margin-bottom: 3rem;
    }
    #item .ttl-en:after {
        width: max(12rem, 120px);
        height: 1px;
        left: calc(100% + max(1.7rem, 17px));
        top: 65%;
    }
    #item .txt {
        grid-area: 3 / 2;
        width: 68rem;
    }
    #item .link-wrap {
        grid-area: 4 / 1 / 4 / 3;
        display: flex;
        justify-content: center;
        column-gap: 3.5rem;
        margin: 10rem 10rem 0;
    }
}

/* brand */
#brand {
    width: 72rem;
    margin: 0 auto 26rem;
    padding: 14rem 6rem 16rem;
    background-color: #F2F2F2;
}
#brand .ttl-wrap {
    text-align: center;
    margin-bottom: 8rem;
}
#brand .brand-list {
    display: grid;
    row-gap: 7rem;
    margin: 10rem 0 8rem;
}
#brand .brand-list img {
    margin-bottom: 4rem;
}
#brand .name {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 1rem;
}
#brand .item .txt {
    font-size: 2.4rem;
}
@media only screen and (min-width: 900px) {
    #brand {
        width: 180rem;
        padding: 19rem 0rem 18rem;
        margin: 0 auto 24.8rem;
    }
    #brand .ttl-wrap {
        margin-bottom: 6rem;
    }
    #brand .ttl-wrap + .txt {
        text-align: center;
    }
    #brand .brand-list {
        width: 134rem;
        margin: 9rem auto 8rem;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 10rem;
        row-gap: 7rem;
    }
    #brand .brand-list img {
        margin-bottom: 2rem;
    }
    #brand .name {
        font-size: max(1.4rem,14px);
    }
    #brand .item .txt {
        font-size: max(1.2rem,11px);
    }
    #brand .arrow-btn {
        margin: auto;
    }
}

/* order */
#order {
    display: grid;
    margin-bottom: 20rem;
}
#order .ttl-en {
    margin-bottom: 6rem;
}
#order .ttl-en:after {
    width: 14rem;
    height: 1px;
    left: calc(100% + 2.8rem);
    top: 70%;
}
@media only screen and (max-width: 899px) {
    #order .img01 {
        order: 1;
        display: block;
    }
    #order .ttl-wrap {
        order: 2;
        width: 56rem;
        margin: 0 auto 7rem;
    }
    #order .txt-wrap {
        order: 3;
        width: 70rem;
        margin: 0 auto;
    }
    #order .arrow-btn {
        margin: 10rem auto 0;
    }
}
@media only screen and (min-width: 900px) {
    #order {
        grid-template-columns: 111.1rem 12.7rem 68.2rem;
        grid-template-rows: repeat(4, minmax(100px, auto));
        margin-bottom: 23rem;
    }
    #order .img01 {
        grid-area: 1 / 1 / 3 / 2;
        margin-right: 15rem;
    }
    #order .ttl-wrap {
        grid-area: 1 / 2 / 2 / 4;
        margin-top: 9.8rem;
    }
    #order .ttl-en {
        margin-bottom: 9rem;
    }
    #order .ttl-en:after {
        width: max(12rem, 120px);
        left: calc(100% + max(1.7rem, 17px));
        top: 65%;
    }
    #order .txt-wrap {
        grid-area: 3 / 1 / 5 / 3;
        margin: 9rem 9rem 0 23rem;
    }
    #order .img02 {
        grid-area: 1 / 3 / 4 / 4;
        margin-top: 11.2rem;
    }
    #order .arrow-btn {
        margin: max(5rem, 50px) 0 0;
    }
}

/* leather */
#leather {
    display: grid;
    margin-bottom: 17rem;
}
#leather .ttl-en:after {
    width: 14rem;
    height: 1px;
    right: calc(100% + 2.8rem);
    top: 70%;
}
#leather .leather-list .img {
    display: block;
    margin-bottom: 3rem;
}
#leather .leather-list .name {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 2rem;
}
@media only screen and (max-width: 899px) {
    #leather .ttl-wrap {
        order: 1;
        width: 70rem;
        margin: 0 auto 7rem;
    }
    #leather .ttl-en {
        margin: 0 0 6rem auto;
    }
    #leather > .img {
        order: 2;
        width: 73rem;
        margin: 0 0 4rem auto;
    }
    #leather .txt-wrap {
        order: 3;
        width: 70rem;
        margin: 0 auto;
    }
    #leather .arrow-btn {
        margin: 8rem auto 0;
    }
    #leather .leather-list {
        order: 4;
        width: 69rem;
        margin: 14rem auto 0;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 3rem;
        row-gap: 6rem;
    }
}
@media only screen and (min-width: 900px) {
    #leather {
        grid-template-columns: 63rem 1fr;
        grid-template-rows: repeat(3, minmax(100px, auto));
        margin-bottom: 20rem;
    }
    #leather .ttl-wrap {
        grid-area: 1 / 1 / 2 / 3;
        margin: 0 20rem 7rem 20rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    #leather .ttl-wrap .ttl-en {
        order: 2;
    }
    #leather .ttl-en:after {
        width: max(12rem, 120px);
        right: calc(100% + max(1.7rem, 17px));
        top: 65%;
    }
    #leather .txt-wrap {
        grid-area: 2 / 1 / 3 / 2;
        margin: 0 7rem 0 20rem;
    }
    #leather .arrow-btn {
        margin: max(6rem, 60px) 0 0;
    }
    #leather > .img {
        grid-area: 2 / 2 / 3 / 3;
    }
    #leather .leather-list {
        grid-area: 3 / 1 / 4 / 3;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: 2.7rem;
        row-gap: 6rem;
        width: 120rem;
        margin: 12rem auto 0;
    }
    #leather .leather-list .img {
        margin-bottom: 2rem;
    }
    #leather .leather-list .name {
        font-size: max(1.4rem, 14px);
        margin-bottom: 1rem;
    }
}

/* news */
#news {
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .16);
    padding: 15rem 5.2rem;
    margin: 0 auto 20rem;
}
#news .news-ttl-wrap .ttl-en {
    font-size: 5rem;
    font-weight: 500;
    font-family: roboto, sans-serif;
    letter-spacing: .14em;
}
#news .news-ttl-wrap .ttl-txt {
    font-family: shippori-mincho, sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.5;
}
#news .news-list .news-item:not(:last-child) {
    border-bottom: 1px solid #918E85;
}
#news .news-list .news-meta {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 5.2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}
#news .news-list .news-cat {
    background-color: #333333;
    color: #fff;
    font-size: 2.4rem;
    line-height: 4rem;
    padding: 0 3.4rem;
}
#news .arrow-b {
    display: block;
    width: 18.6rem;
    margin-left: auto;
    font-size: 2.8rem;
    font-family: roboto, sans-serif;
}
#news .arrow-b:after {
    right: 0;
    bottom: .8rem;
}
@media only screen and (max-width: 899px) {
    #news .news-ttl-wrap {
        display: grid;
        align-items: center;
        row-gap: 2rem;
        margin-bottom: 4rem;
    }
    #news .news-list {
        margin-bottom: 6rem;
    }
    #news .news-list .news-item {
        display: block;
        padding: 8rem 0;
    }
}
@media only screen and (min-width: 900px) {
    #news {
        padding: 11.4rem 36rem 10rem;
        margin: 0 auto 16.5rem;
        display: grid;
        grid-template-columns: 1fr 88rem;
        grid-template-rows: 1fr auto;
        row-gap: 5rem;
    }
    #news .news-ttl-wrap {
        grid-area: 1 / 1;
    }
    #news .news-ttl-wrap .ttl-en {
        font-size: max(3rem, 30px);
    }
    #news .news-ttl-wrap .ttl-txt {
        font-size: max(1.2rem, 12px);
    }
    #news .news-list {
        grid-area: 1 / 2 / 3 / 3;
    }
    #news .news-list .news-item:not(:last-child) {
        padding-bottom: max(4.5rem, 45px);
        margin-bottom: max(4.5rem, 45px);
    }
    #news .news-list .news-meta {
        column-gap: max(2.6rem, 26px);
        margin-bottom: max(1rem, 10px);
    }
    #news .news-list .news-cat {
        font-size: max(1.2rem, 12px);
        line-height: max(2rem, 20px);
        padding: 0 max(1.7rem, 17px);
    }
    #news .news-list .txt {
        letter-spacing: 0;
    }
    #news .arrow-b {
        grid-area: 2 / 1 / 3 / 2;
        margin-left: 0;
        font-size: max(1.4rem, 14px);
        width: max(9.3rem, 93px);
    }
}

/* faq */
#faq {
    width: 70rem;
    margin: 0 auto 22rem;
}
#faq .ttl-wrap {
    text-align: center;
    margin-bottom: 6rem;
}
#faq .ttl-wrap .ttl-txt {
    margin-bottom: 3rem;
}
#faq > .txt {
    margin-bottom: 9rem;
}
#faq .faq-wrap {
    border: 1px solid #333333;
}
#faq .faq-item {
    padding: 8rem 5rem;
}
#faq .faq-item:not(:last-child) {
    border-bottom: 1px solid #D6D6D6;
}
#faq .faq-ttl {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.75;
    padding: 0 0 4rem 6rem;
    position: relative;
}
#faq .faq-ttl:before {
    content: "Q";
    font-family: bigmoore, serif;
    font-size: 4rem;
    position: absolute;
    top: 1.5rem;
    left: 0;
    line-height: 5.2rem;
    color: #B3B3B3;
}
#faq .arrow-btn {
    margin: 10rem auto 0;
}
@media only screen and (max-width: 900px) {
    #faq .ttl-wrap .txt {
        text-align: left;
    }
}
@media only screen and (min-width: 900px) {
    #faq {
        width: 100%;
        margin: 0 auto 20rem;
    }
    #faq .ttl-wrap {
        margin-bottom: 6rem;
    }
    #faq .ttl-wrap + .txt {
        text-align: center;
        margin: 0 10rem 9rem;
    }
    #faq .faq-wrap {
        width: 120rem;
        min-width: 800px;
        margin: 0 auto;
    }
    #faq .faq-item {
        padding: 6rem 15rem 8rem 13rem;
    }
    #faq .faq-ttl {
        font-size: max(1.8rem,18px);
        padding: 1rem 0 max(4rem, 40px) max(5.9rem, 59px);
    }
    #faq .faq-ttl:before {
        font-size: max(3.5rem, 35px);
        top: max(.5rem, 5px);
    }
    #faq .faq-item dd {
        padding-left: max(1.5rem, 15px);
    }
    #faq .arrow-btn {
        margin: max(6rem, 60px) auto 0;
    }
}

/* btm-slide */
#btm-slide {
    height: 20rem;
    background: url(../img/top/btm-slide_sp.webp) repeat-x top center;
    background-size: auto 100%;
    animation: slideBackground 140s linear infinite;
}
@media only screen and (min-width: 900px) {
    #btm-slide {
        height: 36rem;
        background: url(../img/top/btm-slide.webp) top center / cover repeat-x ;
        animation: slideBackground 70s linear infinite;
        margin-bottom: 6rem;
    }
}

/* pagenav */
#top-nav {
    display: grid;
    width: 64rem;
    margin: 0 auto 12.8rem;
}
#top-nav .item {
    display: block;
    padding: 10rem 0 0;
}
#top-nav .item .ttl {
    font-size: 2.4rem;
    font-weight: 600;
    font-family: shippori-mincho, sans-serif;
    letter-spacing: .2em;
    text-align: center;
    margin-bottom: 8rem;
}
#top-nav .item .ttl:before {
    content: attr(data-ttl);
    display: block;
    font-size: 5rem;
    font-weight: 500;
    font-family: roboto, sans-serif;
    margin-bottom: 1.5rem;
}
#top-nav .item .txt {
    margin-bottom: 6rem;
}
#top-nav .item .arrow-btn {
    width: 64rem;
}
@media only screen and (max-width: 899px) {
    #top-nav .item:not(:last-child) {
        padding-bottom: 10rem;
        border-bottom: 1px solid #D6D6D6;
    }
}
@media only screen and (min-width: 900px) {
    #top-nav {
        width: 100%;
        margin: 0 auto 10rem;
        grid-template-columns: repeat(3,1fr);
    }
    #top-nav .item {
        padding: 3.4rem 13rem 4rem;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
    #top-nav .item:not(:last-child) {
        border-right: 1px solid #D6D6D6;
    }
    #top-nav .item .ttl {
        font-size: max(1.2rem, 12px);
        margin-bottom: max(6rem, 60px);
    }
    #top-nav .item .ttl:before {
        font-size: max(2.8rem, 28px);
        margin-bottom: max(1rem, 10px);
    }
    #top-nav .item .txt {
        margin-bottom: max(4rem, 40px);
    }
    #top-nav .item .arrow-btn {
        width: 100%;
        max-width: 38rem;
    }
}