@charset "Shift_JIS";

/*
TVAM STORE TOP (SHOP LIST)
CAMPAIGN MODAL
HOME SLIDER / HOME NEWS LIST / HOME MOVIE / HOME TOPICS / HOME SHOP BANNER
ITEM LIST
PAGER
NEWS
ITEM FILTER
BREADCRUMB LIST
ITEM DETAIL
CART
LOGIN
HOW TO (GUIDE)
FAQ
JOIN (inputmail)
MY PAGE
*/


/* TVAM STORE TOP (SHOP LIST) */
#store-top__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px var(--padding-rl-sp) 0;
}

#store-top__list li a {
    background-color: var(--color-lightgrey);
    color: var(--color-prime);
    font-weight: bold;
    height: 100%;
    display: block;
    line-height: 1.6;
    padding: 12px 48px 12px 15px;
    position: relative;
    text-decoration: none;
    width: 100%;
}

#store-top__list li a::after {
    border-top: 2px solid var(--color-grey);
    border-right: 2px solid var(--color-grey);
    content: '';
    display: inline-block;
    height: 9px;
    position: absolute;
    top: 49%;
    right: 20px;
    transform: rotate(45deg) translateY(-50%);
    width: 9px;
}

@media screen and (min-width: 640px) {
    #store-top__list {
        gap: 15px;
        padding-top: 60px;
    }

    #store-top__list li a { padding: 15px 56px 15px 20px; }
    #store-top__list li a::after { right: 24px; }
}

@media screen and (min-width: 1000px) {
    #store-top__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        padding-top: 60px;
    }

    #store-top__list li {
        display: flex;
        align-items: center;
        width: calc((100% - (15px *1)) / 2);
    }

    #store-top__list li a { height: auto; }
}

@media screen and (min-width: 1260px) {
    #store-top__list {
        margin: 0 auto;
        padding: 60px 0 0;
        width: var(--width-pc);
    }

    #store-top__list li { width: calc((100% - (15px *2)) / 3); }
}


/* CAMPAIGN MODAL -------------------- */
#campaign {
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300;
}

#campaign__inside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
    width: 90%;
}

#campaign__close {
    cursor: pointer;
    height: 32px;
    position: relative;
}

#campaign__close::before, #campaign__close::after {
    background-color: var(--color-white);
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    top: 10px;
    right: 0;
    width: 30px;
}

#campaign__close::before { transform: rotate(45deg); }
#campaign__close::after { transform: rotate(-45deg); }
#campaign__detail { background-color: var(--color-white); overflow-y: auto; }
#campaign__text { font-size: 1.4rem; padding: 20px; }

@media screen and (min-width: 640px) {
    #campaign__inside { width: 400px; }
    #campaign__close { height: 50px ;}

    #campaign__close::before,
    #campaign__close::after { top: 16px;  width: 40px; }

    #campaign__text { padding: 30px; }
}


/* HOME SLIDER -------------------- */
#home-slider__img .slick-dots {
    display: flex;
    justify-content: center;
    height: 40px;
}

#home-slider__img .slick-dots li {
    height: 10px;
    margin: 0 5px;
    position: relative;
    width: 10px;
}

#home-slider__img .slick-dots li button {
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    background-color: #ccc;
    border: none;
    border-radius: 50%;
    font-size: 0;
    height: 10px;
    outline: none;
    padding: 0;
    width: 10px;
}
#home-slider__img .slick-dots li.slick-active button {
    background-color: var(--color-prime);
}

#home-slider__img .slick-dots li button::before {
    display: none;
}

@media screen and (min-width: 640px) {
    #home-slider__img .slick-slide {
        margin-right: 10px;
        margin-left: 10px;
    }

    #home-slider__img .slick-dots li { margin: 0 10px; }
}


/* HOME NEWS LIST -------------------- */
.home-news__list {
    border-bottom: var(--border-prime); position: relative;
}

.home-news__list::after {
    border-top: 2px solid var(--color-grey);
    border-right: 2px solid var(--color-grey);
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 50%;
    right: var(--padding-rl-sp);
    transform: rotate(45deg) translateY(-50%);
}

.home-news__list a {
    color: var(--color-prime);
    display: block;
    height: 100%;
    padding: 12px 12.5% 12px var(--padding-rl-sp);
    text-decoration: none;
}

.home-news__list a .home-news__date { color: var(--color-grey); font-size: 1rem; }
.home-news__title { line-height: 1.6; }

@media screen and (min-width: 640px) {
    #home-news { padding-top: 20px; }
    .home-news__list a { padding: 20px 12.5% 20px var(--padding-rl-sp); }
    .home-news__list a .home-news__date { font-size: 1.2rem; }
}

@media screen and (min-width: 1260px) {
    #home-news {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 auto;
        padding-top: 30px;
        width: var(--width-pc);
    }

    .home-news__list {
        border: none;
        width: calc((100% - (20px * 1)) / 2);
    }

    .home-news__list a {
        border: 1px solid #333;
    }

    .home-news__list::after { right: 20px; }
    .home-news__list a { padding: 12px 40px 12px 20px; }
}

/* HOME MOVIE -------------------- */
#home-movie {
    width: 100%;
    aspect-ratio: 16 / 9;
}

#home-movie video { width: 100%; }
#home-movie iframe { height: 100%; width: 100%;}

@media screen and (min-width: 1260px) {
    #home-movie {
        margin: 60px auto 0;
        width: var(--width-pc);
    }
}

/* HOME TOPICS -------------------- */
#home-topics {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 40px;
    padding: 40px 10px;
}

a.home-topics__list {
    color: var(--color-prime);
    display: block;
    font-size: 1.2rem;
    line-height: 1.6;
    text-decoration: none;
    width: calc((100% - (10px * 1)) / 2);
}

.home-topics__list img { padding-bottom: 10px; }

.home-topics__list p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media screen and (min-width: 640px) {
    #home-topics { column-gap: 20px; padding: 40px 20px; }

    a.home-topics__list {
        font-size: 1.4rem;
        width: calc((100% - (20px * 3)) / 4);
    }
}

@media screen and (min-width: 1260px) {
    #home-topics {
        margin: 0 auto;
        padding: 60px 0;
        width: var(--width-pc);
    }
}

/* HOME SHOP BANNER -------------------- */
#home-shopbnr {
    border-bottom: var(--border-prime);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 40px 10px 40px;
}

#home-shopbnr li {
    border: 1px solid #ccc;
    width: calc((100% - (10px * 1)) / 2);
}

#home-shopbnr li img { width: 100%; }

@media screen and (min-width: 640px) {
    #home-shopbnr { gap: 20px; padding: 60px 20px 60px; }
    #home-shopbnr li { width: calc((100% - (20px * 2)) / 3); }
}

@media screen and (min-width: 800px) {
    #home-shopbnr li { width: calc((100% - (20px * 4)) / 5); }
}

@media screen and (min-width: 1260px) {
    #home-shopbnr {
        border-bottom: none;
        margin: 0 auto;
        padding: 60px 0 0;
        width: var(--width-pc);
    }
}


/* ITEM LIST -------------------- */
.item-list__sp-3col,
.item-list__category {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 30px;
    padding: 20px 10px 40px;
}

.item-list__category { padding-top: 30px; }

a.item-list {
    color: var(--color-prime);
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    text-decoration: none;
    width: 100%;
}

.item-list img { padding-bottom: 6px; width: 100%;}
.item-list__sp-3col .item-list { width: calc((100% - (10px * 2)) / 3); }
.item-list__category .item-list { width: calc((100% - (10px * 1)) / 2); }

.item-list__sp-3col .item-list:nth-child(1),
.item-list__sp-3col .item-list:nth-child(2) {
    width: calc((100% - (10px * 1)) / 2);
}

.item-list__senddate {
    color: var(--color-att);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 2px;
}

.item-list__name {
    font-size: 1.2rem;
    flex: 1 0 auto;
    line-height: 1.6;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-list__price {
    font-family: var(--gfont-eng), sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    padding-top: 5px;
}

.item-list__price span { font-size: 1rem; font-weight: normal; }

.item-list__icon {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
}

#detail .item-list__icon {
    justify-content: center;
    padding-top: 16px;
}

.item-list__icon li {
    color: var(--color-white);
    font-weight: bold;
    font-size: 1rem;
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    width: auto;
}

.item-list__icon_members { background-color: #F18E41; }
.item-list__icon_presale { background-color: #BD96C4; }
.item-list__icon_reserve { background-color: #4694D1; }
.item-list__icon_econly { background-color: #C1C319; }
.item-list__icon_onthesite { background-color: #50bf7c; }


.item-list__icon_new {
    background-color: #F2BE22;
    color: var(--color-white);
    font-family: var(--gfont-eng), sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    padding-left: 5px;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
}

.item-list__icon_new::after {
    border: 10px solid transparent;
    border-left: 10px solid #F2BE22;
    content: '';
    display: block;
    height: 10px;
    position: absolute;
    top: 0;
    left: 40px;
    width: 10px;
}

.item-list__icon_ranking {
    background-color: var(--color-prime);
    color: var(--color-white);
    font-family: var(--gfont-eng), sans-serif;
    font-size: 2rem;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 30px;
}

.item-list__soldout {
    color: var(--color-att);
    font-family: var(--gfont-eng), sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    padding-top: 10px;
}

@media screen and (min-width: 640px) {
    .item-list__sp-3col,
    .item-list__category {
        column-gap: 20px;
        row-gap: 60px;
        padding: 30px 20px 60px;
    }

    .item-list__category { padding-top: 40px; }
    .item-list img { padding-bottom: 10px; }
    .item-list__sp-3col .item-list,
    .item-list__category .item-list { width: calc((100% - (20px * 2)) / 3); }

    .item-list__sp-3col .item-list:nth-child(1),
    .item-list__sp-3col .item-list:nth-child(2) {
        width: calc((100% - (20px * 1)) / 2);
    }

    .item-list__senddate { font-size: 1.2rem; }
    .item-list__name { font-size: 1.4rem; max-height: 46px; }
    .item-list__price { font-size: 1.8rem; }
    .item-list__price span { font-size: 1.2rem; }
    .item-list__icon { gap: 5px; padding-top: 10px; }
    #detail .item-list__icon { justify-content: flex-start; }
    .item-list__icon_new { top: 10px; left: 10px; }
}

@media screen and (min-width: 800px) {
    .item-list__sp-3col .item-list,
    .item-list__category .item-list {
        width: calc((100% - (20px * 4)) / 5);
    }

    .item-list__sp-3col .item-list:nth-child(1),
    .item-list__sp-3col .item-list:nth-child(2) {
        width: calc((100% - (20px * 4)) / 5);
    }
}

@media screen and (min-width: 1260px) {
    .item-list__sp-3col, .item-list__category {
        margin: 0 auto;
        padding: 30px 0 60px;
        width: var(--width-pc);
    }

    .item-list__category { padding-top: 60px; }
}

/* PAGER -------------------- */
.item-count {
    font-size: 1.2rem;
    text-align: center;
    padding: 10px var(--padding-rl-sp) 0;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    font-family: var(--gfont-eng), sans-serif;
    padding-top: 20px;
}

.pager li {
    height: 30px;
    line-height: 30px;
    min-width: 30px;
    position: relative;
    text-align: center;
}

.pager li a, .pager li span {
    color: var(--color-prime);
    display: block;
    height: 30px;
    padding: 0 2px;
    text-decoration: none;
    min-width: 30px;
}

.pager li span { background-color: var(--color-lightgrey); }

.pager li.pager__prev a, .pager li.pager__next a {
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    width: 30px;
}

.pager__prev a::after, .pager__next a::after {
    border-top: 2px solid var(--color-prime);
    border-right: 2px solid var(--color-prime);
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 48%;
}

.pager__prev a::after {
    left: 50%;
    transform: rotate(-135deg) translateX(50%);
}

.pager__next a::after {
    right: 50%;
    transform: rotate(45deg) translateY(-50%);
}

@media screen and (min-width: 640px) {
    .item-count { font-size: 1.4rem; }
    .pager { gap: 10px; padding-top: 40px; }

    .pager li {
        height: 32px;
        line-height: 32px;
        min-width: 32px;
    }

    .pager li a, .pager li span { height: 32px; min-width: 32px; }
    .pager li.pager__prev a, .pager li.pager__next a { width: 32px; }
}


/* NEWS -------------------- */
.news { border-top: var(--border-prime); padding: 40px 0;}
main .news:first-of-type { border-top: none; }

.news__date {
    color: var(--color-grey);
    font-size: 1.2rem;
    padding: 0 var(--padding-rl-sp);
}

.news__title {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    padding: 2px var(--padding-rl-sp) 0;
}

.news__text { padding: 20px var(--padding-rl-sp) 0; }
.news__text ul li { list-style-type: disc; margin-left: 2em; }
.news__text ol li { list-style-type: decimal; margin-left: 1.8em; }

@media screen and (min-width: 640px) {
    .news { padding: 60px 0; }
    .news__date { font-size: 1.4rem; }
    .news__title { font-size: 2.4rem; }
    .news__text { padding: 40px var(--padding-rl-sp) 0; }
}

@media screen and (min-width: 1000px) {
    .news__date, .news__title, .news__text {
        margin: 0 auto;
        padding-right: 0;
        padding-left: 0;
        width: var(--width-pc-s);
    }
}


/* ITEM FILTER -------------------- */
#item-filter {
    font-size: 1.2rem;
    min-height: 60px;
    padding: 30px var(--padding-rl-sp) 0;
    position: relative;
}

#item-filter dt {
    background: url(../img/icon_filter.svg) 10px center no-repeat;
    background-size: 16px auto;
    border: 1px solid var(--color-prime);
    cursor: pointer;
    display: block;
    height: 30px;
    line-height: 28px;
    padding-left: 34px;
    position: absolute;
    right: var(--padding-rl-sp);
    width: 100px;
}

#item-filter dd {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 50px 0 30px;
}

#item-filter dd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#item-filter dd .item-filter__label { font-weight: bold; width: 100%; }

#item-filter dd a {
    background-color: var(--color-lightgrey);
    color: var(--color-prime);
    display: block;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
}

#item-filter dd a.active {
    background-color: var(--color-prime);
    color: var(--color-white);
    font-weight: bold;
}

@media screen and (min-width: 640px) {
    #item-filter { min-height: 90px; padding: 60px var(--padding-rl-sp) 0; }

    #item-filter dd {
        flex-direction: row;
        justify-content: center;
        column-gap: 20px;
        padding: 70px 0 40px;
    }
}

@media screen and (min-width: 960px) {
    #item-filter dd { column-gap: 40px; }

    #item-filter dd .item-filter__label {
        line-height: 30px;
        padding-right: 10px;
        width: auto;
    }
}

@media screen and (min-width: 1260px) {
    #item-filter {
        font-size: 1.4rem;
        margin: 0 auto;
        padding: 60px 0 0;
        width: var(--width-pc);
    }

    #item-filter dt {
        height: 32px;
        line-height: 30px;
        padding-left: 36px;
        right: 0;
        transition: var(--transition);
        width: 120px;
    }

    #item-filter dt:hover { opacity: var(--fade-opacity); }
    #item-filter dd { column-gap: 60px; }
    #item-filter dd ul { gap: 20px; }
    #item-filter dd .item-filter__label { line-height: 32px; padding-right: 0; }
    #item-filter dd a { line-height: 32px; }
}

/* BREADCRUMB LIST -------------------- */
.breadcrumb-list {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    padding: 20px var(--padding-rl-sp);
}

.breadcrumb-list li { padding-right: 30px; position: relative; }

.breadcrumb-list li::after {
    border-top: 1px solid var(--color-prime);
    border-right: 1px solid var(--color-prime);
    content: '';
    display: block;
    height: 5px;
    width: 5px;
    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    top: 50%;
    right: 10px;
}

.breadcrumb-list li:last-child { padding-right: 0; }
.breadcrumb-list li:last-child::after { display: none; }

@media screen and (min-width: 640px) {
    .breadcrumb-list { font-size: 1.2rem; }
}

@media screen and (min-width: 1260px) {
    .breadcrumb-list {
        padding: 60px 0 40px;
        margin: 0 auto;
        width: var(--width-pc);
    }
}


/* ITEM DETAIL -------------------- */
#detail-wrap { width: 100%; }

@media screen and (min-width: 640px) {
    #detail-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 var(--padding-rl-sp);
    }
}

@media screen and (min-width: 800px) {
    #detail-wrap__l {
        border-bottom: var(--border-prime);
        padding-bottom: 60px;
    }
}

@media screen and (min-width: 1260px) {
    #detail-wrap {
        margin: 0 auto;
        padding: 0;
        width: var(--width-pc);
    }
}

/* ITEM SLIDER */
#detail-slider { padding-bottom: 10px; }
#detail-slider__img { position: relative; }
#detail-slider__img .slick-slide img { width: 100%; }

#detail-slider__img .slick-prev,
#detail-slider__img .slick-next {
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    outline: none;
    background: transparent;
    border: none;
    height: 32%;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    width: 20%;
    z-index: 1;
}

#detail-slider__img .slick-prev { left: 0; }
#detail-slider__img .slick-next { right: 0; }
#detail-slider__img .detail-slider__video video { width: 100%; }
#detail-slider__img .detail-slider__video iframe { height: 100%; width: 100%; aspect-ratio: 16 / 9; }

#detail-slider__img .slick-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 50px;
    padding: 6px var(--padding-rl-sp) 0;
}

#detail-slider__img .slick-dots li {
    height: 10px;
    margin: 0 5px;
    position: relative;
    width: 10px;
}

#detail-slider__img .slick-dots li button {
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    background-color: #ccc;
    border: none;
    border-radius: 50%;
    font-size: 0;
    height: 10px;
    outline: none;
    padding: 0;
    width: 10px;
}
#detail-slider__img .slick-dots li.slick-active button { background-color: var(--color-prime); }
#detail-slider__img .slick-dots li button::before { display: none; }

@media screen and (min-width: 640px) {
    #detail-slider { width: 40%; }
}

@media screen and (min-width: 1260px) {
    #detail-slider { width: 500px; }
    #detail-slider__img .slick-dots { padding: 10px 0 0; }
    #detail-slider__img .slick-dots li { margin: 0 10px; }
}


/* DETAIL */
.detail__senddate, .detail__freetext, .detail__itemname, .detail__price {
    line-height: 1.6;
    padding: 10px var(--padding-rl-sp) 0;
    text-align: center;
}

.detail__senddate { color: var(--color-att); }
.detail__freetext {  color: var(--color-grey); }
.detail__itemname { font-size: 1.6rem; }

.detail__price {
    font-family: var(--gfont-eng), sans-serif;
    font-size: 2rem;
    font-weight: 600;
}

.detail__price span { font-size: 1.2rem; font-weight: normal; }
#detail-cart { margin: 30px 0; width: 100%; }
#detail-cart tr { border-bottom: var(--border-prime); }
#detail-cart th, #detail-cart td { text-align: center; }

#detail-cart th {
    padding: 5px;
    font-size: 1.2rem;
    font-weight: normal;
}

#detail-cart td { padding: 20px 5px; }

.detail-cart__size {
    font-size: 1.4rem;
    font-weight: bold;
    max-width: 60px;
    word-wrap: break-word;
}

.detail-cart__stock { font-size: 1.4rem; }

.detail-cart__count input[type="text"] {
    margin: 0;
    padding: 3px 10px;
    width: 46px;
}

.detail-cart__button { font-size: 1.6rem; }
.detail-cart__button input[type="submit"] {
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    background: url(../img/icon_carbtn.svg) 10px center no-repeat var(--color-prime);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    margin: 0;
    outline: none;
    padding: 0 0 0 34px;
    text-align: left;
    width: 160px;
}

.detail-cart__favorite { min-width: 26px; }

#detail-cart .detail-cart__period {
    color: var(--color-att);
    font-weight: bold;
    padding: 20px var(--padding-rl-sp);
    text-align: left;
}

.detail-att {
    color: var(--color-att);
    font-size: 1.2rem;
    padding: 0 var(--padding-rl-sp);
    text-align: center;
}

@media screen and (min-width: 640px) {
    #detail { width: 55%; }

    .detail__senddate, .detail__freetext, .detail__itemname, .detail__price {
        text-align: left;
        padding: 16px 0 0;
    }

    .detail__senddate { font-size: 1.4rem; padding-top: 0; }
    .detail__itemname { font-size: 2rem; }
    .detail__price { font-size: 2.4rem; }
    .detail__price span { font-size: 1.4rem; }
    .detail-att { padding: 0; text-align: left; }
}

@media screen and (min-width: 1260px) {
    #detail { width: 640px; }
    #detail-cart { margin: 40px 0; }
    #detail-cart th { font-size: 1.4rem; padding: 5px 10px; }
    #detail-cart td { padding: 20px 10px; }
    .detail-cart__size, .detail-cart__stock { font-size: 1.6rem; }
    .detail-cart__size { max-width: 240px; min-width: 80px; }

    .detail-cart__button input[type="submit"] {
        background-position: 24px center;
        padding: 0 0 0 56px;
        width: 200px;
        transition: var(--transition);
    }

    .detail-cart__button input[type="submit"]:hover { opacity: var(--fade-opacity); }
    .detail-cart__favorite { min-width: 40px; }
    .detail-att { font-size: 1.4rem; }
}


/* ITEM DETAIL TEXT */
#detail-text { padding: 40px 0 40px; }

.tab-label {
    background: var(--color-lightgrey);
    border-top: 1px solid var(--color-prime);
    border-bottom: 1px solid var(--color-prime);
    color: var(--color-prime);
    cursor: pointer;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    height: 48px;
    line-height: 48px;
    margin-bottom: -1px;
    position: relative;
    text-align: center;
}

.tab-label:before {
    border-right: 2px solid var(--color-prime);
    border-bottom: 2px solid var(--color-prime);
    content: '';
    display: block;
    height: 8px;
    position: absolute;
    top: 49%;
    right: 20px;
    transition: var(--transition);
    transform: rotate(45deg) translateX(-50%);
    width: 8px;
}
.tab-switch:checked+.tab-label:before {
    transform: rotate(-135deg) translateX(50%);
}

.tab-content {
    font-size: 1.4rem;
    height: 0;
    padding: 0 var(--padding-rl-sp);
    overflow: hidden;
    opacity: 0;
}

.tab-content ul li { list-style-type: disc; margin-left: 2em; }
.tab-content ol li { list-style-type: decimal; margin-left: 1.8em; }

.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    overflow: auto;
    padding: 20px var(--padding-rl-sp);
    opacity: 1;
    transition: var(--transition);
}

.tab-switch { display: none; }
.detail-text__sizelink { font-size: 1.6rem; padding-top: 30px; }

@media screen and (min-width: 640px) {
    #detail-text { padding: 30px 0 0; }

    .tab-wrap {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        padding: 0 0 20px;
    }

    .tab-label {
        background: transparent;
        border: none;
        color: var(--color-prime);
        font-weight: bold;
        flex: 1;
        order: -1;
        position: relative;
        text-align: center;
        transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
        user-select: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .tab-label:before { display: none; }

    .tab-label::after {
        background: var(--color-prime);
        bottom: 0;
        content: '';
        display: block;
        height: 2px;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: translateX(100%);
        transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
        width: 100%;
        z-index: 1;
    }

    .tab-switch:checked ~ .tab-label::after {
        transform: translateX(-100%);
    }

    .tab-switch:checked + .tab-label::after {
        opacity: 1;
        transform: translateX(0);
    }

    .tab-content {
        height: 0;
        opacity: 0;
        padding: 0;
        transition: opacity .2s 80ms;
        width: 100%;
    }

    .tab-switch:checked + .tab-label + .tab-content {
        border-top: var(--border-prime);
        height: auto;
        opacity: 1;
        order: 1;
        padding: 30px 0 0;
        transform: translateX(0);
    }

    .tab-wrap::after {
        content: '';
        order: -1;
        width: 100%;
    }
}

@media screen and (min-width: 800px) {
    .tab-label { flex: 1; width: auto; }
}

@media screen and (min-width: 1260px) {
    .tab-label { flex: none; width: 140px; }
    .tab-label:hover { opacity: var(--fade-opacity); }
}


/* CART -------------------- */
#cart-table {
    font-size: 1.2rem;
    margin: 60px auto 10px;
    width: var(--width-pc-s);
}

#cart-table tr {
    border-bottom: var(--border-prime);
    position: relative;
}

#cart-table th { padding: 6px 10px; text-align: center; }

#cart-table td {
    line-height: 1.6;
    padding: 12px 10px;
    text-align: center;
}

.cart-table__spth { display: none; }
.cart-table__img { width: 70px; }
.cart-table__code { word-wrap: break-word; }
.cart-table__name { font-size: 1.4rem; font-weight: bold; }

.cart-table__count select {
    font-size: 1.4rem;
    margin: 0;
    padding: 3px 26px 3px 10px;
}

.cart-table__price { min-width: 80px; }

.cart-table__delete { min-width: 46px; }
.cart-table__delete a {color: var(--color-grey); }

#cart-table tfoot th, #cart-table tfoot td {
    font-size: 1.4rem;
    padding: 16px 20px;
    text-align: right;
}

#cart-table .cart-table__pricelabel,
#cart-table .cart-table__totalprice {
    text-align: right;
}

#cart-table .cart-table__pricelabel { font-size: 1.4rem; }
#cart-table .cart-table__totalprice { font-size: 1.6rem; font-weight: bold; }


.cart-table__btmtext {
    font-size: 1.2rem;
    margin: 0 auto;
    text-align: right;
    width: var(--width-pc-s);
}

@media screen and (max-width: 1001px) {
    #cart-table { width: 100%; }

    .cart-table__btmtext {
        padding: 0 var(--padding-rl-sp);
        width: 100%;
    }
}

@media screen and (max-width: 641px) {
    #cart-table {
        border-top: var(--border-prime);
        margin-top: 20px;
    }

    #cart-table thead { display: none; }

    #cart-table tr {
        display: block;
        padding: 20px 0 10px;
    }

    #cart-table td {
        display: block;
        padding-left: 80px;
        text-align: left;
        width: 100%;
    }

    #cart-table tbody tr td,
    #cart-table tfoot tr td {
        padding: 0 10px 10px 85px;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
    }

    #cart-table tbody tr td span:last-child,
    #cart-table tfoot tr td span:last-child {
        flex: 1;
    }

    .cart-table__spth {
        color: var(--color-grey);
        font-weight: normal;
        display: block;
        width: 80px;
    }

    #cart-table .cart-table__img {
        padding: 20px 0 0 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 70px;
        z-index: 1;
    }

    .cart-table__name { font-size: 1.2rem; }
    #cart-table tfoot tr { border: none; padding: 0; }
    #cart-table tfoot tr:first-child { padding-top: 20px; }
    #cart-table tfoot tr:last-child { border-bottom: var(--border-prime); padding-bottom: 10px; }
    #cart-table tfoot .cart-table__pricelabel { display: none; }
    #cart-table tfoot tr td { font-size: 1.2rem ;}
    #cart-table tfoot tr td.cart-table__totalprice { text-align: left; }
    #cart-table tfoot tr td.cart-table__totalprice .cart-table__spth { padding-top: 4px; }

    #cart-table tfoot .cart-table__spth {
        color: var(--color-prime);
        font-size: 1.2rem;
        font-weight: normal;
        text-align: left;
    }

    #cart-table tfoot .cart-table__spth.total { font-weight: bold; }

    .cart-table__btmtext { font-size: 1rem; }
}

/* LOGIN -------------------- */
#login-wrap { width: 100%; }
.login__inside { padding: 0 var(--padding-rl-sp); }

.login__formlabel {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    padding-top: 10px;
}

@media screen and (min-width: 640px) {
    #login-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 40px;
        padding: 0 var(--padding-rl-sp);
    }

    .login { width: calc((100% - (40px * 1)) / 2); }
    .login__inside { padding: 0; }
}

@media screen and (min-width: 1000px) {
    #login-wrap { column-gap: 80px; }
    #login-wrap h3 { width: 100%; }
    .login { width: calc((100% - (80px * 1)) / 2); }
}

@media screen and (min-width: 1280px) {
    #login-wrap {
        margin: 0 auto;
        padding: 0;
        width: var(--width-pc);
    }

    .login__formlabel { font-size: 1.8rem; padding-top: 20px; }
}


/* HOW TO (GUIDE) -------------------- */
.howto-navi {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-top: 40px;
}

.howto-navi li {
    background-color: var(--color-lightgrey);
    display: flex;
    align-items: center;
    position: relative;
    width: calc((100% - (2px * 1)) / 2);
}

.howto-navi li a {
    color: var(--color-prime);
    display: block;
    line-height: 1.6;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    width: 100%;
}

.howto-navi li a::before {
    border-top: 2px solid var(--color-grey);
    border-right: 2px solid var(--color-grey);
    content: '';
    display: inline-block;
    height: 7px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: rotate(45deg) translateY(-50%);
    width: 7px;
}

@media screen and (min-width: 1000px) {
    .howto-navi {
        justify-content: center;
        gap: 20px;
        margin: 0 auto;
        padding: 60px 0 0;
        width: var(--width-pc-s);
    }

    .howto-navi li { width: auto; }

    .howto-navi li a {
        height: 40px;
        line-height: 40px;
        padding: 0 36px 0 15px;
    }

    .howto-navi li a::before { right: 18px; }
}

/* STEP */
.howto-step.padding_top { padding-top: 40px; }

.howto-step dt {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.7;
    margin: 24px 0 10px;
    padding-left: 34px;
    position: relative;
}

.howto-step dt span {
    background-color: var(--color-prime);
    border-radius: 50%;
    color: var(--color-white);
    display: inline-block;
    font-family: var(--gfont-eng), sans-serif;
    font-size: 1.4rem;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 24px;
}

@media screen and (min-width: 640px) {
    .howto-step.padding_top { padding-top: 60px; }

    .howto-step dt {
        font-size: 1.8rem;
        margin: 40px 0 16px;
        padding-left: 42px;
    }

    .howto-step dt span {
        font-size: 1.6rem;
        height: 30px;
        line-height: 30px;
        width: 30px;
    }
}

/* HOW TO MAYPAGE */
.howto-mypage__table {
    line-height: 1.6;
    margin: 20px 0;
    width: 100%;
}

.howto-mypage__table tr { border-bottom: var(--border-prime); }

.howto-mypage__table thead th {
    font-size: 1.2rem;
    padding: 6px 10px;
    text-align: center;
}

.howto-mypage__table tbody th,
.howto-mypage__table tbody td { padding: 10px; }
.howto-mypage__table tbody th { font-weight: bold; width: 40%; }

@media screen and (min-width: 640px) {
    .howto-mypage__table { margin: 30px 0; }

    .howto-mypage__table tbody th,
    .howto-mypage__table tbody td { padding: 20px; }
}

/* SIZE GUIDE */
.sizeguide__img { padding: 20px 0;}

.sizeguide__text dt {
    border-top: var(--border-prime);
    font-weight: bold;
    padding: 10px var(--padding-rl-sp) 4px;
}

.sizeguide__text dd { padding: 0 var(--padding-rl-sp) 10px; }

@media screen and (min-width: 640px) {
    .sizeguide__img { display: flex; padding: 60px 0; }
    .sizeguide__img img { width: 50%; }
    .sizeguide__text dt { font-size: 1.8rem; padding: 16px var(--padding-rl-sp) 6px; }
    .sizeguide__text dd { padding: 0 var(--padding-rl-sp) 16px; }
}

@media screen and (min-width: 1000px) {
    .sizeguide__text {
        display: flex;
        flex-wrap: wrap;
        column-gap: 60px;
        row-gap: 40px;
        margin: 0 auto;
        width: var(--width-pc-s);
    }

    .sizeguide__text dl { width: calc((100% - (60px * 1)) / 2); }
    .sizeguide__text dt { border-top: none; padding: 0 0 6px; }
    .sizeguide__text dd { padding: 0; }
}


/* FAQ -------------------- */
.faq { margin-top: 40px; width: 100%; }

.faq > dt {
    background-color: var(--color-lightgrey);
    border-top: 1px solid var(--color-prime);
    border-bottom: 1px solid var(--color-prime);
    cursor: pointer;
    line-height: 1.6;
    margin-top: -1px;
    padding: 12px 10% 12px var(--padding-rl-sp);
    position: relative;
}

.faq > dt.accordion-active { font-weight: bold; }

.faq > dt::before {
    border-right: 2px solid var(--color-grey);
    border-bottom: 2px solid var(--color-grey);
    content: '';
    height: 9px;
    position: absolute;
    top: 50%;
    right: var(--padding-rl-sp);
    transform: rotate(45deg) translateY(-70%);
    transition: var(--transition);
    width: 9px;
}

.faq > dt.accordion-active::before { transform: rotate(-135deg) translateY(50%); }
.faq > dd { padding: 20px var(--padding-rl-sp) 30px; }

@media screen and (min-width: 1000px) {
    .faq {
        margin: 60px auto 0;
        width: var(--width-pc-s);
    }

    .faq > dt {
        border: 1px solid var(--color-prime);
        padding: 12px 50px 12px 20px;
    }

    .faq > dt::before { right: 24px; }
    .faq > dd { padding: 24px 0 40px; }
}

@media screen and (min-width: 1260px) {
    .faq > dt:hover { opacity: var(--fade-opacity); }
}


/* JOIN (inputmail) -------------------- */
h4.h4_kiyaku { font-size: 1.8rem; text-align: center; }

#join-kiyaku {
    border: 1px solid var(--color-prime);
    height: 360px;
    margin: 0 auto;
    overflow-y: scroll;
    padding: 20px 15px;
    scroll-behavior: smooth;
    width: 90%;
}

@media screen and (min-width: 640px) {
    h4.h4_kiyaku { font-size: 2.2rem; }
    #join-kiyaku { padding: 30px; }
}

@media screen and (min-width: 1000px) {
    #join-kiyaku { width: var(--width-pc-s); }
}


/* MY PAGE -------------------- */
.mypage-navi {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-top: 40px;
}

.mypage-navi li {
    background-color: var(--color-lightgrey);
    display: flex;
    align-items: center;
    position: relative;
    width: calc((100% - (2px * 1)) / 2);
}

.mypage-navi li a {
    color: var(--color-prime);
    display: block;
    line-height: 1.6;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    width: 100%;
}

.mypage-navi li a::before {
    border-top: 2px solid var(--color-grey);
    border-right: 2px solid var(--color-grey);
    content: '';
    display: inline-block;
    height: 7px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: rotate(45deg) translateY(-50%);
    width: 7px;
}

@media screen and (min-width: 640px) {
    .mypage-navi li a { padding: 8px 36px 8px 15px; }
}

@media screen and (min-width: 1000px) {
    .mypage-navi {
        gap: 10px;
        margin: 0 auto;
        padding: 60px 0 0;
        width: var(--width-pc-s);
    }

    .mypage-navi li { width: calc((100% - (10px * 1)) / 2); }

    .mypage-navi li a {
        height: 40px;
        line-height: 40px;
        padding: 0 36px 0 15px;
    }

    .mypage-navi li a::before { right: 18px; }
}

/* MY PAGE RIREKI */
#rireki-table {
    font-size: 1.6rem;
    margin: 40px auto 0;
    width: var(--width-pc-s);
}

#rireki-table.rireki-table__detail { font-size: 1.4rem; }

#rireki-table tr {
    border-bottom: var(--border-prime);
    position: relative;
}

#rireki-table thead th {
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 6px 10px;
    text-align: center;
}

#rireki-table td {
    line-height: 1.6;
    padding: 20px 10px;
    text-align: center;
}

.rireki-table__no a { font-weight: bold; }
.rireki-table__spth { display: none; }
.rireki-table__name { font-weight: bold; }
.rireki-table__price { min-width: 80px; }

#rireki-table tfoot th { font-size: 1.4; }

#rireki-table tfoot th,
#rireki-table tfoot td { text-align: right; }

#rireki-table .rireki-table__totalprice { font-size: 1.6rem; font-weight: bold; }

@media screen and (max-width: 1001px) {
    #rireki-table { font-size: 1.4rem; width: 100%; }
    #rireki-table.rireki-table__detail { font-size: 1.2rem; }
}

@media screen and (max-width: 641px) {
    #rireki-table {
        border-top: var(--border-prime);
        margin: 20px 0 0;
    }

    #rireki-table thead { display: none; }

    #rireki-table tr { display: block; padding: 20px 0 10px; }

    #rireki-table td {
        display: block;
        text-align: left;
        width: 100%;
    }

    #rireki-table tbody tr td,
    #rireki-table tfoot tr td {
        padding: 0 10px 10px 20px;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
    }

    #rireki-table tbody tr td span:last-child,
    #rireki-table tfoot tr td span:last-child {
        flex: 1;
    }

    .rireki-table__spth {
        color: var(--color-grey);
        font-weight: normal;
        display: block;
        width: 120px;
    }

    #rireki-table tfoot tr { border: none; padding: 0; }
    #rireki-table tfoot tr:first-child { padding-top: 20px; }
    #rireki-table tfoot tr:last-child { border-bottom: var(--border-prime); padding-bottom: 10px; }
    #rireki-table tfoot td {  text-align: left; }
    #rireki-table tfoot .rireki-table__pricelabel { display: none; }

    #rireki-table tfoot .rireki-table__spth {
        color: var(--color-prime);
        font-size: 1.2rem;
        font-weight: normal;
        text-align: left;
    }

    #rireki-table tfoot .rireki-table__spth.total { font-weight: bold; padding-top: 4px; }
}

/* MY PAGE FC & FAVORITE */
.form-table.mypage_fc td, .form-table.mypage_favorite td {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px var(--padding-rl-sp) 30px;
}

.form-table.mypage_favorite td { justify-content: center; }

.form-table.mypage_fc td a.btn {
    margin: 0;
    width: calc((100% - (20px * 1)) / 2);
    min-width: auto;
}

.form-table.mypage_favorite td a.btn { margin: 0; }

.onthesite tr.disabled { color: #aaa; }
.onthesite tr input[type=radio],
.onthesite tr label { cursor: pointer; }
.onthesite tr.disabled label { cursor: text; }

@media screen and (min-width: 640px) {
    .onthesite tr th {
        width: 140px;
        text-align: right;
    }
}

.onthesite tr.disabled th {
    text-align: center;
}

.onthesite tr.disabled span.notyetopen {
    color: #1200e6;
}
.onthesite tr.disabled span.disabled,
.onthesite tr.disabled span.soldout {
    color: #e60012;
}

.mypage-fc__list li { border-bottom: 1px solid var(--color-prime); }
.mypage-fc__list li:first-child { border-top: 1px solid var(--color-prime); }

.mypage-fc__list li a {
    background-color: var(--color-lightgrey);
    color: var(--color-prime);
    display: block;
    padding: 8px 10% 8px var(--padding-rl-sp);
    position: relative;
    text-decoration: none;
    width: 100%;
}

.mypage-fc__list li a::before {
    border-top: 2px solid var(--color-grey);
    border-right: 2px solid var(--color-grey);
    content: '';
    display: inline-block;
    height: 9px;
    position: absolute;
    top: 50%;
    right: var(--padding-rl-sp);
    transform: rotate(45deg) translateY(-50%);
    width: 9px;
    z-index: 1;
}

@media screen and (min-width: 640px) {
    .form-table.mypage_fc td, .form-table.mypage_favorite td {
        padding: 30px var(--padding-rl-sp) 40px;
    }

    .form-table.mypage_fc td a.btn { width: 165px; }
}

@media screen and (min-width: 800px) {
    .form-table.mypage_fc td, .form-table.mypage_favorite td {
        justify-content: left;
        padding: 20px 30px;
    }

    .form-table.mypage_favorite td { justify-content: left; }
    .mypage-fc__list { margin: 0 auto; width: var(--width-pc-s);
    }

    .mypage-fc__list li {
        border-right: 1px solid var(--color-prime);
        border-left: 1px solid var(--color-prime);
    }

    .mypage-fc__list li a { padding: 9px 50px 9px 20px; }
    .mypage-fc__list li a::before { right: 24px; }
}

/* HIKIKAE Flow ========================= */
.hikikae-flow-wrap { padding-top: 40px; }

.hikikae-flow { padding-bottom: 20px; }

.hikikae-flow-in {
	border-width: 2px;
	border-style: solid;
}

.hikikae-flow-ttl {
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 6px 10px;
	position: relative;
}

.hikikae-flow-ttl:after {
	border-right: 3px #fff solid;
	border-bottom: 3px #fff solid;
	content: '';
	display: block;
	height: 18px;
	position: absolute;
	right: 15px;
	top: 20%;
	transform:rotate(45deg);
	width: 18px;
}

.hikikae-flow-ttl span {
	display: inline-block;
	font-size: 1.2rem;
	padding-right: 8px;
	vertical-align: middle;
}

.hikikae-flow-txt {
	color:#000000;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 10px;
//	background-color:#E4EEF6;
	background-color:#ffffff;
}

.hikikae-flow-subtxt {
	color: #000000;
	font-size: 1.2rem;
	padding-top: 10px;
}

.hikikae-flow-in.step1 { border-color: #000000; }
.step1 .hikikae-flow-ttl { background-color: #000000; }

.hikikae-flow-in.step2 { border-color: #000000; }
.step2 .hikikae-flow-ttl { background-color: #000000; }

.hikikae-flow-in.step3 { border-color: #000000; }
.step3 .hikikae-flow-ttl { background-color: #000000; }


@media screen and (min-width: 768px) {
	.hikikae-flow-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.hikikae-flow-in { 
//min-height: 200px;
height: 340px;

//	background-color:#E4EEF6;
	background-color:#FFFFFF;
 }

	
	.hikikae-flow {
		width: 32%;
	}
	
	.hikikae-flow-ttl:after {
		margin-top: -9px;
		top: 50%;
		transform:rotate(-45deg);
	}
}

@media screen and (min-width: 1100px) {
	.hikikae-flow-in { min-height: 170px; }
}