@charset "UTF-8";

/* ------------------------------------------------------
  会員情報：NAVY会員向けお知らせエリア
------------------------------------------------------ */
.shiro-crm__stage__news.navyrank-message {
    max-width: 1000px;
    margin: 36px auto 0;
    padding: 40px 40px;
    background-color: #fff;
    color: #00002b;
    text-align: center;
    font-size: 16px;
}
@media screen and (max-width: 767px) {
    .shiro-crm__stage__news.navyrank-message {
        padding: 20px 20px;
        margin-left: -6px;
        margin-right: -6px;
    }
}
.shiro-crm__stage__next__header {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #00002b;
}
.shiro-crm__stage__next__title_text {
    font-size: 24px;
    text-align: center;
}
.navyrank-message .shiro-crm__stage__news__main {
    margin-bottom: 28px;
}
.shiro-crm__stage__news__free {
    margin-bottom: 28px;
}
.shiro-crm__stage__news__free__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shiro-crm__stage__news__reward {
    background: #00002b;
    color: #fff;
    padding: 16px 20px;
    border-radius: 4px;
    box-shadow: 5px 7px 10px rgb(0 0 0 / 55%);
    position: relative;
    min-height: 80px;
}
.shiro-crm__stage__news__reward__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shiro-crm__stage__news__reward::before {
    content: "";
    width: 30px;
    position: absolute;
    top: 11px;
    height: 0px;
    border-bottom: 2px #fff dotted;
    left: -3px;
    transform: rotate(-45deg);
    display: block;
}

/* ------------------------------------------------------
  ナビゲーション
------------------------------------------------------ */
.item-holder.member-item-holder.member-item-small .item {
    width: calc(100% / 7);
    padding: 15px 10px;
}

.nav-mypage-list--top .nav-maypage .nav a {
    padding: 10px 40px;
}

.member_point_record .nav-mypage-list--top .nav-maypage .nav.nav-point a {
    color: #c0c1c2;
    cursor: default;
    pointer-events: none;
}

.member_point_record .nav-mypage-list--bottom .member-item-holder .nav-point a {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .item-holder.member-item-holder.member-item-small .item {
        width: 100%;
        padding: 7.5px 7.5px;
    }

    .nav-mypage-list--top .nav-maypage .nav a {
        padding: 10px 7px;
    }
}

.nav-storecredit {
    text-align: center;
    margin-bottom: 32px;
    padding: 0 20px;
}

.nav-storecredit-textGroup {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    padding: 0 4px 4px;
    position: relative;
    left: 8px;
}

.nav-storecredit-textGroup::before {
    width: 16px;
    height: 100%;
    background: url(../images/icon/arrow_right_black.svg) no-repeat center right -15px;
    background-size: 40px auto;
    position: absolute;
    display: block;
    top: 50%;
    right: -16px;
    transform: translate(0, -50%);
    content: "";
}

.nav-storecredit-textGroup:hover::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #b6b6b6;
    bottom: 0;
    left: 0;
}

.nav-storecredit-title {
    font-size: 14px;
    font-weight: bold;
}

.nav-storecredit-text {
    font-size: 32px;
}

@media screen and (max-width: 767px) {
    .nav-storecredit-title {
        font-size: 10px;
    }
    .nav-storecredit-text {
        font-size: 24px;
    }
    .nav-storecredit {
        margin-bottom: 0;
    }
    .nav-storecredit-textGroup {
        margin-bottom: 0;
        margin-right: 14px;
        left: 7px;
    }
    .nav-storecredit-textGroup::before {
        width: 12px;
        background: url(../images/icon/arrow_right_black.svg) no-repeat center right -10px;
        background-size: 32px auto;
        right: -12px;
    }
    .nav-storecredit + .nav-maypage {
        margin: 20px auto 40px;
    }
}

/* ------------------------------------------------------
  注文履歴
------------------------------------------------------ */
.order-history {
    position: relative;
}
.order-history .canceled {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.order-history-titleCanceled {
    margin-bottom: 15px;
    width: 100%;
}
.order-history-titleCanceled span {
    border: 1px solid #2c2e33;
    padding: 3px 10px;
    font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
    .order-history-titleCanceled span {
        font-size: 1.6rem;
    }
}


.order-history-titleBlock {
    margin: 60px 0 40px;
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.order-egift-title {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .order-history-titleBlock:has(+ .order-egift-title > div) {
        margin-bottom: 10px;
    }
    .order-egift-title {
        padding-bottom: 20px;
        font-weight: bold;
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .order-history-titleBlock {
        flex-direction: column;
        background-color: #EEE;
        font-size: 1.6rem;
        text-align: center;
        padding: 16px 15px;
        margin: 0;
    }
    .order-egift-title {
       background-color: #EEE;
       padding-bottom: 20px;
    }
}
.order-history-title {
    font-weight: bold;
    font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
    .order-history-title {
        font-size: 1.6rem;
        font-weight: 500;
    }
}
@media screen and (max-width: 767px) {
    .order-history-titleHeader {
        margin-bottom: 10px;
    }
}
.order-history-titleBody {
    position: relative;
    padding-left: 16px;
    margin-left: 10px;
}
.order-history-titleBody:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    width: 6px;
    height: 1px;
    background: #333;
}
@media screen and (max-width: 767px) {
    .order-history-titleBody {
        padding-left: 0;
        margin-left: 0;
    }
    .order-history-titleBody:after {
        content: none;
    }
}
.order-history-titleNumber {
    position: relative;
    font-size: 1.8rem;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .order-history-titleNumber {
        font-size: 1.4rem;
        font-weight: 500;
    }
}

:root {
    --line-height: 1.5;

    --color-gray: #7e8c91;
    --color-lightGray: #c0c1c2;
    --color-white: #ffffff;
}

.order-statusIcon {
    display: inline-block;
    margin-bottom: 12px;
    border-radius: 5px;
    text-align: center;
    letter-spacing: 0;
    line-height: var(--line-height);
}

.order-statusIcon::before, .order-statusIcon::after {
    width: 0;
    height: 0;
    content: "";
}

.order-statusIcon::before {
    margin-top: calc((1 - var(--line-height)) * 0.5em);
}

.order-statusIcon::after {
    margin-bottom: calc((1 - var(--line-height)) * 0.5em);
}

.order-statusIcon--small {
    padding: 10px;
    font-size: 1.2rem;
}

.order-statusIcon--large {
    padding: 12px;
    font-size: 1.4rem;
}

.order-statusIcon--gray {
    background: var(--color-gray);
    color: var(--color-white);
}

.order-statusIcon--lightGray {
    background: var(--color-lightGray);
    color: var(--color-white);
}
.js-return-button.js-none {
    display: none !important;
}
.js-order-date {
    display: none;
}
.empty-block.is-hide {
    display: none;
}
.member_review .review-list.is-hide {
    display: none;
}
.review-wrapper.is-hide {
    display: none;
}
.shiro-crm__status.primary .shiro-crm__status__detail.pcOnly {
    border-bottom: 1px solid #e5e5e5;
}

.shiro-crm__status.primary .shiro-crm__status__detail__stage,
.shiro-crm__status.primary .shiro-crm__status__detail__member {
    padding-top: 28px;
    padding-bottom: 28px;
}

.shiro-crm__status.primary .shiro-crm__pc_barcode.pcOnly {
    margin-top: -60px;
}

.shiro-crm__status.primary .shiro-crm__stage__next__title {
    margin-top: 0 !important;
}

.shiro-crm__status.primary .shiro-crm__stage__next__title {
    font-weight: 500;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
}

.shiro-crm__status.primary .shiro-crm__stage__news:not(.none-message) {
    padding-top: 22px !important;
}

.shiro-crm__status.primary .shiro-crm__stage__next__title__bold {
    font-size: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
    .shiro-crm__status.primary .shiro-crm__barcode {
        margin-bottom: 28px;
    }
    .shiro-crm__status.primary .shiro-crm__stage__next__title {
        line-height: 2;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        margin-right: -6px !important;
        margin-left: -6px !important;
    }
    .shiro-crm__status.primary .shiro-crm__stage__next__title__bold {
        font-size: 18px;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
    }
    .shiro-crm__status.primary .shiro-crm__stage__news__list__outer {
        padding: 0;
    }
}

/* 新規クラス */
.shiro-crm__stage__label {
    font-size: 14px;
    padding: 3px 19px;
    background: #bbbbbb;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.shiro-crm__stage__label.inline {
    margin: 0 8px;
}
.shiro-crm__stage__news__list__outer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 80px;
}
.shiro-crm__stage__news__list {
    text-align: left;
}
.shiro-crm__stage__news__list > li {
    padding-left: 14px;
    position: relative;
    margin-bottom: 16px;
}
.shiro-crm__stage__news__list > li:last-child {
    margin-bottom: 0;
}
.shiro-crm__stage__news__list > li::before {
    display: block;
    content: "";
    top: 10px;
    left: 0;
    height: 4px;
    width: 4px;
    position: absolute;
    background: #333;
    border-radius: 2px;
}
.shiro-crm__stage__news__list > li a {
    padding-right: 14px;
    position: relative;
    display: inline-block;
}
.shiro-crm__stage__news__list > li a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translate(0, -50%) rotate(-45deg);
    display: block;
    position: absolute;
    top: 52%;
    right: 2px;
}
.shiro-crm__stage__news__list > li a:hover,
.shiro-crm__stage__news__list > li a:focus {
    text-decoration: underline;
}
.shiro-crm__stage__next-card__outer {
    margin-right: auto;
    margin-left: auto;
    margin-top: 90px;
}
.shiro-crm__stage__next-card__outer .shiro-crm__stage__next-card {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}
.shiro-crm__stage__next-card__header {
    background: #cfced1;
    text-align: center;
    padding: 10px 24px;
}
.shiro-crm__stage__next-card__header__title {
    font-size: 22px;
    font-weight: 500;
    color: #000;
}
.shiro-crm__stage__next-card__body {
    padding: 40px 40px;
}
.shiro-crm__stage__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 96px;
}
.shiro-crm__stage__grid__column {
    width: calc(100% / 3);
    margin-right: 12px;
}
.shiro-crm__stage__grid__column:last-child {
    margin-right: 0;
}
.shiro-crm__stage__media-reword {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shiro-crm__stage__media-reword__image {
    text-align: center;
    min-height: 90px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 32px;
}
.shiro-crm__stage__media-reword__image svg {
    max-width: 100%;
    width: 170px;
}
.shiro-crm__stage__media-reword__body {
    text-align: center;
}
.shiro-crm__stage__media-reword__subtext {
    display: block;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.12em;
}
.shiro-crm__stage__media-reword__text {
    display: block;
    font-size: 22px;
    font-weight: bold;
}
/* リワードショーケース */
.reword-showcase__header {
    display: flex;
    justify-content: center;
    margin-bottom: 38px;
}
.reword-showcase__title__group {
    position: relative;
    padding-left: 109px;
    display: flex;
    align-items: center;
    min-height: 62px;
}
.reword-showcase__title {
    font-size: 18px;
    letter-spacing: 0.01em;
    position: relative;
}
.reword-showcase__title__image {
    position: absolute;
    left: 12px;
    bottom: -11px;
}
.reword-showcase__title__image svg {
    width: 82px;
}
.reword-showcase__slider__item {
    border: #cdcdcd 2px solid;
    margin-right: 0;
    border-radius: 4px;
}
.reword-showcase__slider .reword-showcase__slider__item {
    max-width: 144px;
}
.reword-showcase__slider.is-items-overflow .reword-showcase__slider__item {
    max-width: 140px;
    height: 100%;
}
.reword-showcase__slider__item__image {
    max-width: 100%;
}
.reword-showcase__slider__item__image img {
    max-width: 100%;
}
.reword-showcase__slider__item__body {
    padding: 15px 13px;
}
.reword-showcase__slider__item__body *:last-child {
    margin-bottom: 0;
}
.reword-showcase__slider__item__title {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.reword-showcase__slider__item__desc {
    font-size: 12px;
}
.reword-showcase__slider__item__desc__list > li {
    font-size: 12px;
    margin-bottom: 0;
    line-height: 1.4;
    padding-left: 12px;
    position: relative;
}
.reword-showcase__slider__item__desc__list > li::before {
    content: "";
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    top: 7px;
    left: 0;
    background: #333;
}
.reword-showcase__slider__item__desc__text {
    font-size: 12px;
}
.reword-showcase__slider__button-prev.swiper-button-prev,
.reword-showcase__slider__button-next.swiper-button-next {
    height: 100px;
    background-size: 55px;
    margin-top: -50px;
}
.reword-showcase__slider__button-next.swiper-button-next {
    right: 9px;
    width: 20px;
}
.reword-showcase__slider__button-prev.swiper-button-prev {
    left: 9px;
    width: 20px;
}
.shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__track {
    width: 120px;
}
.shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__gift {
    width: 84px;
}
.shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__reserve {
    width: 52px;
}
.shiro-crm__stage__news.none-message {
    padding: 54px 48px 68px;
    background: #ccc;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.shiro-crm__stage__message {
    font-size: 26px;
    letter-spacing: 0.125em;
    margin-bottom: 34px;
}
.shiro-crm__link {
    padding: 8px 20px;
    border: #333 1px solid;
    font-size: 25px;
    background: #fff;
    letter-spacing: 0.1em;
    display: inline-block;
    min-width: 290px;
}
.shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword {
    background: #000;
}
.shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--gold {
    background: #e5b76f;
}
.shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword .shiro-crm__stage__next-card__header__title {
    color: #fff;
}
.shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword .shiro-crm__stage__next-card__header__title {
    font-size: 22px;
    letter-spacing: 0.25em;
}
.shiro-crm__stage__next-card .reward_item__item__note {
    text-align: left;
}
.reword-showcase__slider__item .reward_item__item__note {
    font-size: 12px;
}
.shiro-crm__stage__next-card__outer + .shiro-crm__stage__next-card__outer {
    margin-top: 60px;
}
.reword-showcase__slider .splide__arrow--prev {
    background: none;
    left: -35px;
}
.reword-showcase__slider .splide__arrow--next {
    background: none;
    right: -35px;
}
.reword-showcase__slider.is-visible .reword-showcase__slider__list > li {
    margin-right: 15px;
}
.reword-showcase__slider.is-visible .reword-showcase__slider__list > li:last-child {
    margin-right: 0;
}
@media screen and (max-width: 767px) {
    .shiro-crm__status.primary .shiro-crm__stage {
        padding: 0 0 80px;
    }
    .shiro-crm__stage__next-card__outer {
        margin-top: 0
    }
    .shiro-crm__status.primary .shiro-crm__status__content {
        padding-bottom: 0;
    }
    .swiper-slide {
        width: 132px !important;
    }
    .reword-showcase__slider__outer {
        margin-right: 0;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .reword-showcase__slider__item__body {
        padding: 8px 12px;
    }
    .reword-showcase__slider__item__title {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .reword-showcase__slider__button-prev.swiper-button-prev,
    .reword-showcase__slider__button-next.swiper-button-next {
        display: none;
    }
    .reword-showcase__slider__item__desc__list > li {
        padding-left: 8px;
        font-size: 12px;
    }
    .reword-showcase__slider__item__desc__list > li::before {
        width: 3px;
        height: 3px;
        border-radius: 1.5px;
        top: 7px;
    }
    .shiro-crm__stage__next-card__body {
        padding: 32px 20px 70px;
    }
    .shiro-crm__stage__next-card__header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 24px;
    }
    .shiro-crm__stage__next-card__header__title {
        font-size: 18px;
        line-height: 1.5;
    }
    .shiro-crm__stage__grid {
        flex-direction: column;
    }
    .shiro-crm__stage__media-reword {
        flex-direction: row;
        margin-left: -8px;
    }
    .shiro-crm__stage__grid__column {
        width: 100%;
        margin-right: 0;
        margin-bottom: 60px;
        display: flex;
        justify-content: flex-start;
    }
    .shiro-crm__stage__grid__outer {
        display: flex;
        justify-content: center;
    }
    .shiro-crm__stage__grid__column:last-child {
        margin-bottom: 0;
    }
    .shiro-crm__stage__media-reword__image svg {
        width: 110px;
    }
    .shiro-crm__stage__media-reword__image {
        width: 128px;
        min-height: auto;
        margin-bottom: 0;
    }
    .shiro-crm__stage__media-reword__body {
        text-align: left;
        flex: 1;
    }
    .shiro-crm__stage__media-reword__subtext {
        font-size: 14px;
    }
    .shiro-crm__stage__media-reword__text {
        font-size: 20px;
    }
    .reword-showcase__title {
        font-size: 16px;
        line-height: 1.25;
    }
    .shiro-crm__stage__news__list {
        font-size: 14px;
    }
    .shiro-crm__stage__news__list > li {
        padding-left: 8px;
        margin-bottom: 13px;
    }
    .shiro-crm__stage__news__list > li::before {
        width: 3px;
        height: 3px;
        border-radius: 1.5px;
    }
    .reword-showcase__title__image {
        position: absolute;
        left: 20px;
        bottom: -6px;
    }
    .reword-showcase__title__image svg {
        width: 72px;
    }
    .reword-showcase__header {
        margin-bottom: 28px;
    }
    .reword-showcase__slider .reword-showcase__slider__item {
        max-width: 132px;
    }
    .reword-showcase__slider.is-items-overflow .reword-showcase__slider__item {
        max-width: 134px;
    }
    .shiro-crm__stage__news.goldrank-message {
        margin-right: -6px !important;
        margin-left: -6px !important;
    }
    .reword-showcase .reword-showcase__slider {
        visibility: visible;
    }
    .reword-showcase .reword-showcase__slider .reword-showcase__slider__list {
        display: flex;
    }
    .reword-showcase .reword-showcase__slider .reword-showcase__slider__list > li {
        margin-right: 12px;
    }
    .reword-showcase .reword-showcase__slider .reword-showcase__slider__list > li:last-child {
        margin-right: 0;
    }
    .reword-showcase__slider .splide__track {
        overflow: auto;
    }
    .shiro-crm__stage__grid {
        margin-bottom: 80px;
        margin-top: 36px;
    }
    .shiro-crm__stage__icon--track {
        width: 96px;
    }
    .shiro-crm__stage__media-reword__image {
        align-items: center;
        justify-content: center;
    }
    .shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__track {
        width: 94px;
    }
    .shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__gift {
        width: 72px;
    }
    .shiro-crm__stage__media-reword__image .shiro-crm__stage__media-reword__image__reserve {
        width: 45px;
    }
    .shiro-crm__stage__news.none-message {
        max-width: 320px;
        padding: 34px 22px 18px;
        text-align: center;
    }
    .shiro-crm__stage__message {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
    }
    .shiro-crm__link {
        min-width: 200px;
        font-size: 15px;
        letter-spacing: 0.2em;
    }
    .shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword {
        background: #000;
        min-height: auto;
    }
    .shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword .shiro-crm__stage__next-card__header__title {
        color: #fff;
    }
    .shiro-crm__stage__next-card__header.shiro-crm__stage__next-card__header--reword .shiro-crm__stage__next-card__header__title {
        font-size: 18px;
        letter-spacing: 0.15em;
        font-weight: 500;
    }
    .reword-showcase__title__group {
        min-height: 58px;
        padding-left: 96px;
    }
    .reword-showcase__slider__item__desc__text {
        font-size: 12px;
    }
    .shiro-crm__stage__next-card__outer + .shiro-crm__stage__next-card__outer {
        margin-top: 0;
    }
    .shiro-crm__stage__next-card .reward_item__item__note {
        font-size: 12px;
    }
    .shiro-crm__stage__next-card .reward_item__item__note {
        font-weight: normal;
    }
}
.shiro-crm__norank.primary .shiro-crm__norank__desc {
    max-width: 1000px;
    margin-top: 0;
    background: #fff;
    transform: translateY(-60px);
    padding: 40px 100px;
    border-top: 1px solid #e5e5e5;
    font-size: 18px;
}
.shiro-crm__norank.primary .shiro-crm__norank__link {
    max-width: 1000px;
    transform: translateY(-60px);
    background: #fff;
    padding: 0 100px;
    margin-top: 0;
    padding-bottom: 40px;
}
.shiro-crm__norank.primary .shiro-crm__pc_barcode.pcOnly {
    transform: translateY(-60px);
    max-width: 1000px;
    background-color: #fff;
    padding: 48px !important;
    margin: 0 auto;
    border-top: 1px solid #e5e5e5;
}
.shiro-crm__status.norank.primary {
    padding-top: 0;
    transform: translateY(-70px);
}
@media screen and (max-width: 767px) {
    .shiro-crm__status.norank.primary {
        border-top: 1px solid #e5e5e5;
    }
}
.shiro-crm__status.norank.primary .shiro-crm__status__welcome {
    border: none;
    border-radius: 0;
    max-width: 1000px;
    text-align: center;
}
.shiro-crm__status.norank.primary .shiro-crm__status__welcome__title {
    font-size: 24px;
    letter-spacing: 0.125em;
    margin-bottom: 34px;
    text-align: center;
}
.shiro-crm__status.norank.primary .c-shiro-crm__linkbtn {
    padding: 8px 20px;
    border: #333 1px solid;
    background: #fff;
    letter-spacing: 0.1em;
    min-width: 290px;
    text-align: center;
}
.shiro-crm__status.norank.primary .c-shiro-crm__linkbtn > span {
    font-size: 22px;
}
.shiro-crm__status.norank.primary .shiro-crm__status__welcome > .c-shiro-crm__linkbtn {
    margin-top: 0;
}
.shiro-crm__status.norank + .shiro-crm__stage {
    transform: translateY(-40px);
    padding-top: 40px;
    padding-bottom: 40px;
    background: #FAFAFA;
}
.shiro-crm__status.norank + .shiro-crm__stage .shiro-crm__stage__next-card__outer:first-child {
    margin-top: 0;
}

.shiro-crm__status.shiro-crm__status--reword.norank.primary {
    transform: none;
    padding-top: 60px;
    padding-bottom: 80px;
    background: #FAFAFA;
    border-top: none;
}
@media screen and (max-width: 767px) {
    .shiro-crm__status.norank.primary .shiro-crm__status__welcome__title {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
    }
    .shiro-crm__status.norank.primary .c-shiro-crm__linkbtn {
        min-width: 200px;
        font-size: 15px;
        letter-spacing: 0.2em;
        width: auto;
        max-width: 200px;
    }
    .shiro-crm__status.norank.primary .c-shiro-crm__linkbtn > span {
        font-size: 16px;
    }
    .shiro-crm__status.norank.primary .shiro-crm__status__welcome {
        max-width: 340px;
    }
    .shiro-crm__status.norank.primary {
        padding-bottom: 40px;
    }
    .shiro-crm__status.norank + .shiro-crm__stage {
        padding-top: 0;
    }
    .shiro-crm__status.norank.primary {
        transform: none;
    }
    .shiro-crm__status.norank + .shiro-crm__stage {
        transform: none;
    }
}
.reword-showcase__slider.is-visible {
    visibility: visible;
}
.reword-showcase__slider.is-visible .reword-showcase__slider__list {
    justify-content: center;
}
.reword-showcase__slider.is-visible .reword-showcase__slider__list .reword-showcase__slider__item {
    height: 100%;
}
.reword-showcase__notice {
    margin-top: 20px;
    text-align: left;
    display: flex;
    justify-content: center;
}
.reword-showcase__notice__text {
    font-size: 12px;
    margin-bottom: 8px;
}
.shiro-crm__stage__next-card__body.shiro-crm__stage__next-card__body--notice {
    padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .reword-showcase.is-visible .reword-showcase__slider .reword-showcase__slider__list {
        display: block;
    }
    .reword-showcase__notice__text {
        font-size: 12px;
    }
    .shiro-crm__status.shiro-crm__status--reword.norank.primary {
        display: none;
    }
    .shiro-crm__norank.primary .shiro-crm__norank__desc {
        margin-top: 30px;
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
        font-size: 14px;
        letter-spacing: .02em;
        line-height: 1.7;
        padding: 0;
        transform: none;
        border-top: none;
    }
    .shiro-crm__norank.primary .shiro-crm__norank__link {
        transform: none;
        margin-top: 20px;
        padding-bottom: 20px;
        padding-left: 0;
        padding-top: 0;
        background: transparent;
    }
    .reword-showcase .reword-showcase__slider.is-visible .reword-showcase__slider__list {
        justify-content: unset;
    }
    .shiro-crm__stage__next-card__body.shiro-crm__stage__next-card__body--notice {
        padding-bottom: 20px;
    }
    .shiro-crm__status.primary .shiro-crm__stage__next__title {
        font-size: 15px !important;
    }
    .shiro-crm__stage__label {
        font-size: 14px;
    }
    .shiro-crm__status.primary .shiro-crm__rewards {
        padding-bottom: 20px;
    }
}
.reword-showcase__notice__text:last-child {
    margin-bottom: 0;
}

.shiro-crm__status.primary .shiro-crm__pc_barcode {
    max-width: 1000px;
    background-color: #fff;
    padding: 48px !important;
    margin: 0 auto;
    border-bottom: 1px solid #e5e5e5;
}
.shiro-crm__status.primary .shiro-crm__stage__next__title {
    margin-top: 0 !important;
    line-height: 2;
}
.shiro-crm__stage__label.shiro-crm__stage__label--gold {
    background: #e5b76f;
}
.shiro-crm__status.primary [rank_id="140"] + .shiro-crm__pc_barcode.pcOnly {
    margin-top: 0;
    background: transparent;
    padding: 0 !important;
    border-bottom: none;
    margin: auto;
    max-width: none;
}
.shiro-crm__status.primary [rank_id="140"] .shiro-crm__stage__news:not(.none-message) {
    padding-top: 40px !important;
}
.shiro-crm__status.primary .shiro-crm__current.spOnly {
    margin-bottom: 22px;
}

.shiro-crm__norank.primary .shiro-crm__norank__link > a {
    font-size: 18px;
}

@media screen and (max-width: 767px) {
    .shiro-crm__norank.primary .shiro-crm__norank__link > a {
        font-size: 14px;
    }
}

.shiro-crm__status.primary .shiro-crm__rewards__txt {
    max-width: 720px;
}

.shiro-crm__status.primary .smp_message_area {
    width: auto;
    display: flex;
    justify-content: center;
}

.shiro-crm__status.primary .shiro-crm__status__content > [rank_id="140"] .shiro-crm__stage__next__title {
    margin-top: 36px !important;
}

@media screen and (max-width: 767px) {
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__content.shiro-crm__status__content--mypage {
        padding-top: 0;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__header.silver,
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__header.gold,
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__header.navy {
        display: none;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__content.shiro-crm__status__content--mypage > [rank_id="140"]:first-child,
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__content.shiro-crm__status__content--mypage > [rank_id="130"]:first-child,
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__content.shiro-crm__status__content--mypage > [rank_id="120"]:first-child {
        display: none;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__status__header.white,
    .APP_OPERATION_RANK + .l-content .shiro-crm__barcode.spOnly,
    .APP_OPERATION_RANK + .l-content .shiro-crm__current.spOnly {
        display: none;
    }
    .APP_OPERATION_NORANK + .l-content .shiro-crm__status__header.white,
    .APP_OPERATION_NORANK + .l-content .shiro-crm__status__content.shiro-crm__status__content--mypage,
    .APP_OPERATION_NORANK + .l-content .shiro-crm__status__welcome {
        display: none;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__stage__news.navyrank-message {
        margin-top: 0;
        margin: 0 -6px;
    }
    .APP_OPERATION_NORANK + .l-content .shiro-crm__status.norank.primary {
        padding-bottom: 0;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__stage__news.navyrank-message:first-child {
        margin: 0 -6px;
        border-top: 1px solid #e5e5e5;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__status.primary .shiro-crm__stage__next__title,
    .APP_OPERATION_NORANK + .l-content .shiro-crm__status.primary .shiro-crm__stage__next__title {
        border-top: 0;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__header,
    .APP_OPERATION_NORANK + .l-content .shiro-crm__header {
        border-bottom: 1px solid #e5e5e5;
    }
    .APP_OPERATION_RANK + .l-content .shiro-crm__status.primary .shiro-crm__status__content > [rank_id="140"] .shiro-crm__stage__next__title {
        margin-top: 36px !important;
    }
}
.shiro-crm__norank__stage {
    border-top: 1px solid #e5e5e5;
    max-width: 1000px;
    margin: 0 auto 0;
    transform: translateY(-60px);
    padding: 42px 20px;
    background-color: #FFFFFF;
    color: #00002b;
    text-align: center;
    font-size: 18px;
}
@media screen and (max-width: 767px) {
    .shiro-crm__norank__stage {
        margin-top: 30px;
        transform: none;
        font-size: 15px;
        line-height: 2;
        padding-bottom: 0;
        max-width: 300px;
        margin: 30px auto 0;
        max-width: 300px;
        padding: 30px 0 30px;
        border-bottom: 1px solid #e5e5e5;
    }
}
.shiro-crm__stage__label.shiro-crm__stage__label--white {
    background: #f3f4f4;
}

/* ------------------------------------------------------
  LINEアカウント連携
------------------------------------------------------ */
.section-line {
    background-color: #ffffff;
    margin-bottom: 40px;
}

.line-area {
    background-color: #FFF;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    margin: auto;
}

.line_area_left {
    display: flex;
}

.line_area_right {
    display: flex;
    align-items: center;
}

.text-line1 {
    font-size: 16px;
    margin: auto;
    margin-left: 16px;
}

.text-line2 {
    font-size: 16px;
    margin: auto;
    margin-right: 16px;
}

.text-line3 {
    font-size: 16px;
    color: #79888B;
    margin: auto;
    margin-right: 16px;
}


.line-icon {
    width: 40px;
    height: 40px;
    margin: auto;
}

.section-line .linkage {
    background-color: #2c2e33;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    padding: 14px 30px;
}

.section-line .linkage:hover {
    opacity: 0.75;
    color: #ffffff;
}

.section-line .unlock {
    background-color: #fff;
    border: solid 1px #2c2e33;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
    padding: 14px 30px;
}

.section-line .unlock:hover {
    opacity: 0.75;
}

.line-caution {
    margin: 0 auto;
    max-width: 600px;
    padding-bottom: 20px;
    color: #963e56;
}


@media screen and (max-width: 767px) {
    .text-line1 {
        font-size: 14px;
        margin-left: 8px;
    }

    .text-line2 {
        font-size: 14px;
        margin-right: 20px;
    }

    .text-line3 {
        font-size: 14px;
        margin-right: 12px;
    }

    .section-line .linkage {
        padding: 14px 14px;
    }

    .section-line .unlock {
        padding: 14px 14px;
    }

    .section-line .container2 {
        width: 100%;
        background-color: #eeeeee;
        padding: 20px 0;
    }

    .section-line .section-line {
        margin-bottom: 0px;
    }

    .section-line .line-area {
        padding: 20px 15px;
        max-width: unset;
    }
    .line-caution {
        padding: 0 20px 20px;
        background-color: #fff;
    }
}

.member-navy-tokuten {
    margin: 36px auto 0;
    padding: 0 40px;
    max-width: 1000px;
    color: #00002b;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
}
@media screen and (max-width: 767px) {
    .member-navy-tokuten {
        padding: 0px 20px;
        text-align: left;
    }
}

.member-navy-tokuten p a {
    text-decoration: underline;
}

.member-navy-tokuten-agree {
    padding: 40px 0;
}

.member-navy-tokuten-selected {
    text-align: center;
}
.member-navy-tokuten-selected-contents {
    display: inline-flex;
    position: relative;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: 5px 7px 10px rgb(0 0 0 / 55%);
    padding: 16px 20px;
    color: #fff;
    background: #00002b;
}
.member-navy-tokuten-selected-contents::before {
    content: "";
    display: block;
    position: absolute;
    top: 11px;
    left: -3px;
    border-bottom: 2px #fff dotted;
    width: 30px;
    height: 0px;
    transform: rotate(-45deg);
}

.member-navy-tokuten-not-hassou {
    padding: 40px 0;
}

.member-navy-tokuten-not-hassou-btn {
    margin: 0 auto;
    padding: 30px 0;
    width: 346px;
}
@media screen and (max-width: 767px) {
    .member-navy-tokuten-not-hassou-btn {
        width: 100%;
    }
}
.member-navy-tokuten-hassou {
    padding: 40px 0;
}
.member-navy-tokuten-not-questionnaire {
    display: none;
}
.member-navy-tokuten-not-questionnaire-btn {
    padding: 30px 0;
}
.member-navy-tokuten-not-questionnaire-btn a {
    position: relative;
    background: #00002b;
    color: #fff;
    padding: 16px 20px;
    border-radius: 4px;
    min-height: 80px;
}
@media screen and (max-width: 767px) {
    .member-navy-tokuten-not-questionnaire-btn a {
        display: block;
        padding: 16px 4px;
        width: 100%;
        min-height: auto;
        text-align: center;
    }
}
.member-navy-tokuten-questionnaire {
    display: none;
}


/*
NAVY enquete
*/
#mypage-navy-questionna {
    margin: 0 auto;
}
#mypage-navy-questionna .wire {
    margin: 8px auto;
    padding: 8px 0;
}

#mypage-navy-questionna .msg01 {
    margin: 8px auto;
    padding: 8px 0;
    text-align: center;
}
#mypage-navy-questionna .msg02 {
    margin: 8px auto;
    padding: 16px 0;

}

#mypage-navy-questionna .caution01 {
    margin: 0 0 16px;
    padding: 0 0 16px;
    font-size: 1.2rem;
    border-bottom: solid 1px #ddd;
}

#mypage-navy-questionna .answer-btn {
    position: relative;
    text-align: center;
}

#mypage-navy-questionna .answer-btn a {
    background: #00002b;
    color: #fff;
    padding: 16px 20px;
    border-radius: 4px;
    /* min-height: 80px; */
    display: inline-block;
    height: auto;
    margin: 0 0 8px;
}


/* ------------------------------------------------------
    header画像削除
------------------------------------------------------ */
.shiro-crm__pc__header {
    background: none;
    padding-top: 120px;
    background-color: #E4D9C7;
}