@charset "UTF-8";

/* --------------------------------------------------------------------------
    preflist
-------------------------------------------------------------------------
- */

@media all and (min-width: 760px),
print {
    .preflist__container {
        background: var(--cream-color);
        mix-blend-mode: multiply;
        margin: calc(40 / 1440 * 100vw) auto;
        padding: calc(26 / 1440 * 100vw) calc(24 / 1440 * 100vw);
        width: calc(600 / 1440 * 100vw);
    }
    .preflist__area {
        margin-bottom: calc(20 / 1440 * 100vw);
    }
    .preflist__check {
        display: none;
    }
    .preflist__label {
        cursor: default;
        display: block;
        padding: calc(3 / 1440 * 100vw) calc(10 / 1440 * 100vw);
        width: 100%;
        border-bottom: 1px solid var(--secondary-color-500);
    }
    .preflist__label:last-child  {
        border-bottom: none;
    }
    .preflist__desc {
        display: flex;
        padding: calc(3 / 1440 * 100vw) calc(10 / 1440 * 100vw);
    }
    .preflist__pref {
        margin-right: 0.5em;
    }
    .preflist__pref:not(:last-child)::after {
        content: "|";
        margin-left: 0.5em;
    }
}

@media all and (max-width: 759px) {
    .preflist__container {
        background: var(--cream-color);
        mix-blend-mode: multiply;
        margin: calc(40 / 375 * 100vw) auto 0;
        padding: calc(26 / 375 * 100vw) calc(16 / 375 * 100vw) calc(8 / 375 * 100vw);
    }
    .preflist__area {
        padding-bottom: calc(20 / 375 * 100vw);
    }
    .preflist__area:first-child {
        padding-top: calc(20 / 375 * 100vw);
    }
    .preflist__check {
        display: none;
    }
    .preflist__label {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .preflist__label::after {
        --svg-path: url(../images/common/ico_arrow_03.svg);
        --svg-color: var(--black-color);
        content: "";
        width: calc(15 / 375 * 100vw);
        height: calc(9 / 375 * 100vw);
        -webkit-mask: var(--svg-path);
        mask: var(--svg-path);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: var(--svg-color);
        position: relative;
        right: calc(3 / 375 * 100vw);
        top: calc(12 / 375 * 100vw);
        transition:0.8s;
    }
    .preflist__check:checked + .preflist__label::after {
        transform: rotate(180deg);
        transition: 0.8s;
    }

    .preflist__desc {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        line-height: 1.6;
    }
    .preflist__check:checked + .preflist__label ~ .preflist__desc {
        max-height: 100vh;
        opacity: 1;
    }
    .preflist__desc,
    .preflist__check:checked + .preflist__label ~ .preflist__desc {
        transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
    }
    .preflist__pref {
        border-top: 1px solid var(--secondary-color-400);
    }
    .preflist__pref:first-child {
        margin-top: calc(5 / 375 * 100vw);
    }
    .preflist__pref a {
        display: block;
    }
}

/* --------------------------------------------------------------------------
    shoplist
-------------------------------------------------------------------------
- */

@media all and (min-width: 760px),
print {
    .shoplist__area {
        background: var(--cream-color);
        mix-blend-mode: multiply;
        margin-bottom: calc(40 / 1440 * 100vw);
        padding: calc(26 / 1440 * 100vw) calc(24 / 1440 * 100vw);
        position: relative;
    }
    .shoplist__area::before,
    .shoplist__area::after {
        display: flex;
        position: absolute;
        align-items: end;
        width: calc(32 / 1440 * 100vw);
        height: calc(46 / 1440 * 100vw);
        top: calc(10 / 1440 * 100vw);
        font-size: calc(10 / 1440 * 100vw);
    }
    .shoplist__area::before {
        content: "飲める";
        right: calc(66 / 1440 * 100vw);
        background: url(../images/experience/coffee-mug.png);
        background-size: contain;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
    }
    .shoplist__area:last-child .preflist__label {
        border-bottom: none;
    }
    .shoplist__area::after {
        content: "買える";
        right: calc(24 / 1440 * 100vw);
        background: url(../images/experience/shopping-bag.png);
        background-size: contain;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
    }
    .shoplist__pref {
        display: flex;
        padding: calc(3 / 1440 * 100vw) calc(10 / 1440 * 100vw);
        padding-right: 0;
        border-top: 2px solid var(--secondary-color-500);
    }
    .shoplist__pref:last-child {
        border-bottom: 2px solid var(--secondary-color-500);
    }
    .shoplist__pref__head {
        flex: 0 0 auto;
        padding-top: calc(10 / 1440 * 100vw);
        width: calc(90 / 1440 * 100vw);
        line-height: 1.8;
    }
    .shoplist__desc {
        flex: 1;
    }
    .shoplist__list {
        display: flex;
        gap: 2em;
        padding-top: calc(10 / 1440 * 100vw);
        padding-bottom: calc(10 / 1440 * 100vw);
        border-bottom: 1px solid var(--secondary-color-500);
    }
    .shoplist__list:last-child {
        border: none;
    }
    .shoplist__list .list-icon {
        display: flex;
        min-width: 4em;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
    .shoplist__list [class^="icon-"] {
        width: 1.75em;
        height: 2em;
    }
    .shoplist__list [class^="icon-"].hidden {
        visibility: hidden;
        display: none;
    }
    .shoplist__list .sns-list-icon {
        display: flex;
        justify-content: flex-start;
        gap: 1em;
        padding-top: calc(10 / 1440 * 100vw);
    }
    .shoplist__list .sns-list-icon [class^="icon-"] {
        width: 1.5em;
        height: 2em;
    }
    .shoplist__list .sns-list-icon [class^="icon-"].hidden {
        display: none;
    }
    .shoplist__list__head {
        display: flex;
        justify-content: space-between;
        gap: 1em;
        flex: 0 0 auto;
        width: calc(450 / 1440 * 100vw);
    }
    .shoplist__list__name {
        line-height: 1.8;
        font-weight: 700;
    }
    .shoplist__list__name span {
        display: block;
        font-size: calc(12 / 1440 * 100vw);
        font-weight: 400;
        display: none;
    }
    .shoplist__list__body {
        width: 100%;
        line-height: 1.8;
    }
}

@media all and (max-width: 759px) {
    .shoplist__area {
        background: var(--cream-color);
        mix-blend-mode: multiply;
        margin-bottom: calc(30 / 375 * 100vw);
        padding: calc(26 / 375 * 100vw) calc(16 / 375 * 100vw);
        position: relative;
    }
    .shoplist__area::before,
    .shoplist__area::after {
        display: flex;
        position: absolute;
        align-items: end;
        width: calc(24 / 375 * 100vw);
        height: calc(36 / 375 * 100vw);
        top: calc(16 / 375 * 100vw);
        font-size: calc(8 / 375 * 100vw);
    }
    .shoplist__area::before {
        content: "飲める";
        right: calc(74 / 375 * 100vw);
        background: url(../images/experience/coffee-mug.png);
        background-size: contain;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
    }
    .shoplist__area::after {
        content: "買える";
        right: calc(42 / 375 * 100vw);
        background: url(../images/experience/shopping-bag.png);
        background-size: contain;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
    }
    .shoplist__pref {
        border-top: 3px solid var(--secondary-color-500);
    }
    .shoplist__pref:last-child {
        border-bottom: 3px solid var(--secondary-color-500);
    }
    .shoplist__pref__head {
        padding-top: calc(10 / 375 * 100vw);
        padding-bottom: calc(10 / 375 * 100vw);
        border-bottom: 1px solid var(--secondary-color-500);
        position: relative;
    }
    .shoplist__desc {
        flex: 1;
    }
    .shoplist__list {
        display: flex;
        flex-direction: column;
        padding-top: calc(10 / 375 * 100vw);
        padding-bottom: calc(10 / 375 * 100vw);
        border-bottom: 1px solid var(--secondary-color-500);
        position: relative;
    }
    .shoplist__list:last-child {
        border: none;
    }
    .shoplist__list .list-icon {
        display: flex;
        justify-content: flex-end;
        gap: 0.5em;
    }
    .shoplist__list [class^="icon-"] {
        width: 1.75em;
        height: 2em;
    }
    .shoplist__list [class^="icon-"].hidden {
        display: none;
    }
    .shoplist__list .list-icon.sns-list-icon {
        gap: 0.75em;
        justify-content: flex-start;
        margin-top: calc(10 / 375 * 100vw);
    }
    .shoplist__list .list-icon.sns-list-icon [class^="icon-"] {
        width: 1.5em;
    }
    .shoplist__list__head {
        display: flex;
        flex-direction: column;
    }
    .shoplist__list__name {
        display: flex;
        flex-direction: column-reverse;
        line-height: 1.8;
        font-weight: 700;
    }
    .shoplist__list__name span {
        display: block;
        font-size: calc(12 / 375 * 100vw);
        font-weight: 400;
        display: none;
    }
    .shoplist__list__name + .list-icon {
        align-items: flex-end;
        position: absolute;
        right: 0;
        bottom: calc(10 / 375 * 100vw);
    }
    .shoplist__list__body {
        line-height: 1.8;
        margin-top: calc(16 / 375 * 100vw);
    }
}