@charset "UTF-8";


/* 一部リニューアルだけの処理
----------------------------------------------------------------------------- */
html {
    color: var(--text-color-A);
    font-feature-settings: normal;
    letter-spacing: 0;
}

#Pankuzu {
    display: none;
}

/* 下層コンテンツ
----------------------------------------------------------------------------- */
.about {
    padding-top: 1.6rem;
}


.about-button {
    background: #212121;
    color: #fff;
    display: grid;
    font-family: var(--ff-shu);
    font-size: .16rem;
    height: .75rem;
    margin-inline: auto;
    place-content: center;
    transition: .3s ease-in-out;
    width: 3rem;
}

@media screen and (min-width: 641px) {
    .about-button:hover {
        opacity: .7;
    }
}


.about-catch {
    font-family: var(--ff-shu);
    font-size: .32rem;
    line-height: 185%;
    margin-bottom: .24rem;
    text-align: center;
}

.about-lead {
    font-family: var(--ff-shu);
    font-size: .16rem;
    line-height: 228%;
    margin-bottom: 1rem;
    text-align: center;
}

.about-slider {
    background: url("../img/aboutorder/bg-order.png") repeat-x left bottom / 16rem auto;
    padding-block: .39rem 2rem;
    position: relative;
}

.about-slider::before {
    background: url("../img/aboutorder/order-point.svg") no-repeat left top / 7.29rem auto;
    content: "";
    display: block;
    height: 4.61rem;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 7.29rem;
    z-index: 10;
}

.slick-prev,
.slick-next {
    display: block;
    height: .5rem;
    overflow: hidden;
    position: absolute;
    text-indent: 100%;
    width: .5rem;
    z-index: 10;
}

.slick-prev {
    background: url("../img/aboutorder/btn-prev.png") no-repeat left top / .5rem auto;
}

.slick-next {
    background: url("../img/aboutorder/btn-next.png") no-repeat left top / .5rem auto;
}

.about-slider .slick-prev,
.about-slider .slick-next {
    top: 1.5rem;
}

.about-slider .slick-prev {
    left: 50%;
    margin-left: -4.65rem;
}

.about-slider .slick-next {
    left: 50%;
    margin-left: 4.15rem;
}

.about-slider-slide {
    padding-inline: .3rem;
}

.about-slider-slide img {
    height: auto;
    width: 7.6rem;
}

.about-slider-slide01 {
    width: 8.31rem;
}

.about-slider-bottom {
    align-items: center;
    display: flex;
    gap: .54rem;
    margin: .27rem auto 0;
    width: 7.26rem;
}

.about-slider-bottom-image img {
    height: auto;
    width: 3.9rem;
}

.about-slider-bottom-text {
    font-family: var(--ff-shu);
    font-size: .16rem;
    line-height: 228%;
}

.about-order {
    margin: 0 auto;
    max-width: 16rem;
}

.about-title-en {
    font-family: var(--ff-lexe);
    font-size: .26rem;
    line-height: 100%;
    margin-bottom: .16rem;
    text-align: center;
}

.about-title-ja {
    font-family: var(--ff-shu);
    font-size: .14rem;
    line-height: 100%;
    margin-bottom: 1.2rem;
    text-align: center;
}

.about-order-item {
    align-items: center;
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    padding-left: 1.28rem;
}

.about-order-item:nth-child(2n) {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 1.28rem;
}

.about-order-item-image {
    width: 6.67rem;
}

.about-order-item-image img {
    height: auto;
    width: 100%;
}

.about-order-item-detail {
    width: 4.3rem;
}

.about-order-item-title {
    font-family: var(--ff-shu);
    font-size: .3rem;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: .32rem;
}

.about-order-item-catch {
    font-family: var(--ff-shu);
    font-size: .24rem;
    font-weight: bold;
    line-height: 175%;
    margin-bottom: .16rem;
}

.about-order-item-text {
    font-family: var(--ff-shu);
    font-size: .16rem;
    font-weight: 300;
    line-height: 228%;
}

.about-order-item03 {
    padding-left: 0;
}

.about-order-item03 .about-order-item-image {
    width: 4.54rem;
}

.about-order-item03 .about-order-item-detail {
    width: 8.81rem;
}

.about-order-item-material {
    margin-top: .8rem;
}

.about-order-item-material-title {
    font-size: .22rem;
    line-height: 125%;
    margin-bottom: .24rem;
}

.about-order-item-material-list {
    display: flex;
    justify-content: space-between;
}

.about-order-item-material-list-item {
    width: 2.67rem;
}

.about-order-item-material-list-item-image {
    margin-bottom: .25rem;
}

.about-order-item-material-list-item-image img {
    height: auto;
    width: 100%;
}

.about-order-item-material-list-item .about-order-item-material-title {
    font-family: var(--ff-shu);
}

.about-order-item-material-list-item-text {
    font-size: .15rem;
    line-height: 180%;
}

.about-order-item04 {
    margin-bottom: 1.2rem;
}

.about-reup {
    margin-bottom: 1.6rem;
}

.about-reup-title {
    font-size: .22rem;
    line-height: 125%;
    margin-bottom: .24rem;
    text-align: center;
}

.about-reup-items {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin-bottom: .8rem;
}

.about-reup-item {
    width: 3.96rem;
}

.about-reup-item-image {
    margin-bottom: .24rem;
}

.about-reup-item-image img {
    height: auto;
    width: 100%;
}

.about-reup-item-title {
    font-family: var(--ff-shu);
    font-size: .22rem;
    line-height: 154%;
    margin-bottom: .16rem;
}

.about-reup-item-text {
    font-size: .15rem;
    line-height: 180%;
}

.about-custom {
    margin: 0 auto;
    max-width: 12.15rem;
}

.about-custom-title {
    font-family: var(--ff-shu);
    margin-bottom: .8rem;
    text-align: center;
}

.about-custom-title span {
    border-bottom: 2px solid #000;
    display: inline-block;
    font-size: .24rem;
    line-height: 175%;
    padding-bottom: .08rem;
}

.about-custom-items {
    display: grid;
    gap: .44rem .45rem;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: .8rem;
}

.about-custom-item {
    background: var(--other-color-gray-B);
    padding: .32rem .32rem .4rem;
}

.about-custom-item-title {
    font-size: .16rem;
    line-height: 100%;
    margin-bottom: .24rem;
    text-align: center;
}

.about-custom-item-image {
    margin-bottom: .24rem;
}

.about-custom-item-image img {
    height: auto;
    width: 100%;
}

.about-custom-item-text {
    font-size: .14rem;
    line-height: 157%;
}

.about-custom-item-offer-item {
    font-size: .14rem;
    line-height: 157%;
    margin-left: 1em;
    text-indent: -1em;
}

.about-flow {
    margin: 0 auto 1.2rem;
    padding-top: 1.6rem;
    max-width: 8.31rem;
}

.about-flow .about-title-ja {
    margin-bottom: .32rem;
}

.about-flow-lead {
    font-family: var(--ff-shu);
    font-size: .16rem;
    line-height: 228%;
    margin-bottom: .64rem;
    text-align: center;
}

.about-flow-items {
    margin-bottom: .64rem;
}

.about-flow-item {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    padding: .4rem;
    position: relative;
}

.about-flow-item::after {
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: .14rem .12rem 0 .12rem;
    bottom: -.14rem;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 10;
}

.about-flow-item:nth-child(even) {
    background: var(--other-color-gray-B);
}

.about-flow-item:nth-child(even)::after {
    border-color: var(--other-color-gray-B) transparent transparent transparent;
}

.about-flow-item:last-child .about-flow-item-main {
    width: 100%;
}

.about-flow-item-main {
    width: 4.7rem;
}

.about-flow-item-title {
    font-size: .16rem;
    line-height: 100%;
    margin-bottom: .16rem;
}

.about-flow-item-text {
    font-size: .14rem;
    line-height: 166%;
}


.about-flow-item-link {
    flex-shrink: 0;
    text-align: right;
}

.about-link {
    background: url("../img/aboutorder/icon-arrow.svg") no-repeat right center / .1rem auto;
    border-bottom: 1px solid #000;
    display: inline-block;
    font-size: .14rem;
    line-height: 100%;
    padding: .1rem .3rem .1rem 0;
}

.about-flow-simulator {
    border: 1px solid #C7C7C7;
    display: flex;
    gap: .64rem;
    padding: .4rem;
}

.about-flow-simulator-image {
    flex-shrink: 0;
    width: 3.5rem;
}

.about-flow-simulator-image img {
    height: auto;
    width: 100%;
}

.about-flow-simulator-detail {
    width: 3.12rem;
}

.about-flow-simulator-title {
    margin-bottom: .32rem;
}

.about-flow-simulator-title span {
    border-bottom: .02rem solid #000;
    display: inline-block;
    font-family: var(--ff-shu);
    font-size: .24rem;
    line-height: 175%;
    padding-bottom: .08rem;
}

.about-flow-simulator-text {
    font-size: .14rem;
    line-height: 166%;
    margin-bottom: .22rem;
}

.about-maintenance {
    background: rgba(242, 239, 235, .8);
    margin-bottom: 1rem;
    padding-block: .79rem .64rem;
}

.about-maintenance-inner {
    align-items: center;
    display: flex;
    margin-inline: auto;
    max-width: 12.16rem;
    gap: .64rem;
}

.about-maintenance-image {
    flex-shrink: 0;
    width: 5.6rem;
}

.about-maintenance-image img {
    height: auto;
    width: 100%;
}

.about-maintenance-detail {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 5.92rem;
}

.about-maintenance-lead {
    font-size: .17rem;
    font-weight: bold;
    line-height: 175%;
    margin-bottom: .24rem;
    text-align: center;
}

.about-maintenance-title {
    color: #fff;
    font-family: var(--ff-lexe);
    font-size: .28rem;
    font-weight: normal;
    line-height: 100%;
    margin-bottom: .24rem;
    text-align: center;
}

.about-maintenance-text {
    font-size: .15rem;
    line-height: 200%;
    margin-bottom: .4rem;
    text-align: center;
}

.about-links {
    display: flex;
    margin: 0 auto 1rem;
    max-width: 12.48rem;
}

.about-links-item {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 3.67rem;
    justify-content: center;
    padding-inline: .8rem;
    width: 6.24rem;
}

.about-links-item:first-child {
    border-right: 1px solid #C7C7C7;
}

.about-links-item-title {
    font-size: .17rem;
    line-height: 175%;
    margin-bottom: .32rem;
    text-align: center;
}

.about-links-item-text {
    font-size: .15rem;
    line-height: 200%;
    margin-bottom: .4rem;
}

@media screen and (max-width:640px) {
    .about {
        padding-top: .8rem;
    }


    .about-button {
        font-size: .14rem;
        height: .5rem;
        width: 2.18rem;
    }

    .about-catch {
        font-size: .24rem;
        padding-inline: .32rem;
        text-align: left;
    }

    .about-lead {
        font-size: .14rem;
        line-height: 200%;
        margin-bottom: .64rem;
        padding-inline: .32rem;
        text-align: left;
    }

    .about-lead br {
        display: none;
    }

    .about-slider {
        background: url("../img/aboutorder/bg-order_sp.png") repeat-x left bottom / 3.75rem auto;
        padding-block: .41rem 1.2rem;
        position: relative;
    }

    .about-slider::before {
        background: url("../img/aboutorder/order-point_sp.svg") no-repeat left top / 2.82rem 2.06rem;
        height: 2.06rem;
        left: .52rem;
        transform: translate(0);
        width: 2.82rem;
    }

    .slick-prev,
    .slick-next {
        display: block;
        height: .3rem;
        overflow: hidden;
        position: absolute;
        text-indent: 100%;
        width: .3rem;
        z-index: 100;
    }

    .slick-prev {
        background: url("../img/aboutorder/btn-prev.png") no-repeat left top / .3rem auto;
    }

    .slick-next {
        background: url("../img/aboutorder/btn-next.png") no-repeat left top / .3rem auto;
    }

    .about-slider .slick-prev,
    .about-slider .slick-next {
        top: .41rem;
    }

    .about-slider .slick-prev {
        left: .22rem;
        margin-left: 0;
    }

    .about-slider .slick-next {
        left: auto;
        right: .22rem;
        margin-left: 0;
    }

    .about-slider-slide {
        padding-inline: .1rem;
    }

    .about-slider-slide img {
        height: auto;
        width: 2.7rem;
    }

    .about-slider-bottom {
        display: block;
        margin: .27rem auto 0;
        width: 100%;
    }

    .about-slider-bottom-image {
        margin-bottom: .24rem;
        text-align: center;
    }

    .about-slider-bottom-image img {
        height: auto;
        width: 2.24rem;
    }

    .about-slider-bottom-text {
        font-size: .14rem;
        line-height: 200%;
        text-align: center;
    }

    .about-order {
        padding-inline: .16rem;
    }

    .about-title-en {
        font-size: .24rem;
    }

    .about-title-ja {
        font-size: .12rem;
        margin-bottom: .4rem;
    }

    .about-order-item {
        display: block;
        margin-bottom: .64rem;
        padding-left: 0;
    }

    .about-order-item:nth-child(2n) {
        padding-right: 0;
    }

    .about-order-item-image {
        margin-bottom: .32rem;
        width: 100%;
    }

    .about-order-item-detail {
        box-sizing: border-box;
        padding-inline: .16rem;
        width: 100%;
    }

    .about-order-item-title {
        font-size: .24rem;
        line-height: 100%;
    }

    .about-order-item-catch {
        font-size: .16rem;
    }

    .about-order-item-text {
        font-size: .14rem;
        line-height: 200%;
    }

    .about-order-item03 .about-order-item-image {
        width: 100%;
    }

    .about-order-item03 .about-order-item-detail {
        width: auto;
    }

    .about-order-item-material {
        margin-left: -.16rem;
        margin-right: -.32rem;
        margin-top: .5rem;
    }

    .about-order-item-material-title {
        font-size: .16rem;
        line-height: 175%;
        margin-bottom: .1rem;
    }

    .about-order-item-material-list {
        display: block;
    }

    .about-order-item-material-list-item {
        padding-right: .16rem;
        width: 3.11rem;
    }

    .about-order-item-material-list-item-image {
        margin-bottom: .24rem;
    }

    .about-order-item-material-list-item .about-order-item-material-title {
        margin-bottom: .16rem;
    }

    .about-order-item-material-list-item-text {
        font-size: .14rem;
        line-height: 157%;
    }

    .about-order-item-material .slick-prev {
        display: none !important;
    }

    .about-order-item-material .slick-next {
        background-size: cover;
        height: .5rem;
        margin: 0;
        right: .16rem;
        width: .5rem;
        top: .65rem;
    }

    .about-order-item04 {
        margin-bottom: .56rem;
    }

    .about-reup {
        margin-bottom: .8rem;
        padding-left: .16rem;
    }

    .about-reup-title {
        font-size: .16rem;
        line-height: 100%;
        margin-bottom: .16rem;
        text-align: left;
    }

    .about-reup-items {
        display: block;
        margin-bottom: .4rem;
    }

    .about-reup-items .slick-prev {
        display: none !important;
    }

    .about-reup-items .slick-next {
        background-size: cover;
        height: .5rem;
        margin: 0;
        right: .16rem;
        top: .65rem;
        width: .5rem;
    }

    .about-reup-item {
        padding-right: .16rem;
        width: 3.11rem;
    }

    .about-reup-item-image {
        margin-bottom: .24rem;
    }

    .about-reup-item-image img {
        height: auto;
        width: 100%;
    }

    .about-reup-item-title {
        font-size: .16rem;
        line-height: 175%;
    }

    .about-reup-item-text {
        font-size: .14rem;
        line-height: 157%;
    }

    .about-custom {
        margin: 0 auto;
        padding-inline: .16rem;
    }

    .about-custom-title {
        margin-bottom: .4rem;
    }

    .about-custom-title span {
        font-size: .16rem;
    }

    .about-custom-items {
        display: block;
        margin-bottom: .4rem;
    }

    .about-custom-item {
        padding: 0;
    }

    .about-custom-item:not(:last-child) {
        margin-bottom: .24rem;
    }

    .about-custom-item-title {
        margin-bottom: 0;
        padding: .24rem .16rem;
        position: relative;
        text-align: left;
    }

    .about-custom-item-title::before,
    .about-custom-item-title::after {
        background: #000;
        content: "";
        position: absolute;
        top: 50%;
        width: 100%;
    }

    .about-custom-item-title::before {
        height: .02rem;
        margin-top: -.01rem;
        right: .24rem;
        width: .12rem;
    }

    .about-custom-item-title::after {
        height: .12rem;
        margin-top: -.06rem;
        right: .29rem;
        transition: .3s ease-in-out;
        width: .02rem;
    }

    .about-custom-item-title.active::after {
        transform: rotate(90deg);
    }

    .about-custom-item-block {
        display: none;
        padding: 0 .16rem .24rem;
    }

    .about-custom-item-image {
        margin-bottom: .24rem;
    }

    .about-custom-item-image img {
        height: auto;
        width: 100%;
    }

    .about-flow {
        margin: 0 auto .64rem;
        padding-top: 1.2rem;
    }

    .about-flow .about-title-ja {
        margin-bottom: .4rem;
    }

    .about-flow-lead {
        font-size: .14rem;
        line-height: 200%;
        margin-bottom: .4rem;
    }

    .about-flow-items {
        margin-bottom: .14rem;
    }

    .about-flow-item {
        display: block;
        padding: .4rem .32rem;
    }

    .about-flow-item-main {
        width: 100%;
    }

    .about-flow-item-text {
        font-size: .12rem;
        margin-bottom: .14rem;
    }


    .about-flow-item-link {
        text-align: left;
    }

    .about-flow-simulator {
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        padding: .4rem .28rem;
        width: calc(100% - .64rem);
    }

    .about-flow-simulator-image {
        margin-bottom: .24rem;
        width: 100%;
    }

    .about-flow-simulator-detail {
        width: 100%;
    }

    .about-flow-simulator-title {
        text-align: center;
    }

    .about-flow-simulator-title span {
        font-size: .16rem;
    }

    .about-flow-simulator-text {
        font-size: .12rem;
        margin-bottom: .32rem;
    }

    .about-flow-simulator-link {
        text-align: center;
    }

    .about-maintenance {
        margin-bottom: 0;
        padding: 0;
    }

    .about-maintenance-inner {
        display: block;
    }

    .about-maintenance-image {
        width: 100%;
    }

    .about-maintenance-detail {
        box-sizing: border-box;
        display: block;
        padding: .64rem .32rem;
        width: 100%;
    }

    .about-maintenance-lead {
        font-size: .16rem;
        margin-bottom: .16rem;
    }

    .about-maintenance-title {
        margin-bottom: .32rem;
    }

    .about-maintenance-text {
        font-size: .14rem;
        line-height: 200%;
        text-align: left;
    }

    .about-maintenance-text br {
        display: none;
    }

    .about-links {
        display: block;
        margin-bottom: 0;
        max-width: 12.48rem;
    }

    .about-links-item {
        background: var(--other-color-gray-B);
        display: block;
        height: auto;
        padding: .55rem .32rem .6rem;
        width: 100%;
    }

    .about-links-item:first-child {
        border-right: 1px solid #C7C7C7;
    }

    .about-links-item-title {
        font-size: .16rem;
    }

    .about-links-item-text {
        font-size: .14rem;
    }
}