/* カスタマイズ用CSS1 */
body {
    font-family: Noto Sans JP, sans-serif;
}

.aspect-\[1280\/661\] {
    aspect-ratio: 1280/661 !important
}

.top-2-5 {
    top: .625rem !important
}
.bottom-\[20px\] {
    bottom: 20px !important
}
.bottom-\[75px\] {
    bottom: 75px !important
}
.p-\[10px\] {
    padding: 10px !important
}

/* TOP改修 */
.-left-2 {
    left: -.5rem !important
}
.-left-12 {
    left: -3rem !important
}
.-left-\[10px\] {
    left: -10px !important
}
.-right-12 {
    right: -3rem !important
}
.-top-\[15px\] {
    top: -15px !important
}
.left-\[5\%\] {
    left: 5% !important
}
.top-\[calc\(100\%-1px\)\] {
    top: calc(100% + 1px) !important
}
.ml-\[15\%\] {
    margin-left: 15% !important
}
.h-\[38px\] {
    height: 38px !important
}
.w-\[21px\] {
    width: 21px !important
}
.w-\[23px\] {
    width: 23px !important
}
.w-\[40px\] {
    width: 40px !important
}
.w-\[84\%\] {
    width: 84% !important
}

.w-\[80\%\] {
    width: 80% !important
}

.max-w-\[84\%\] {
    max-width: 84% !important
}
.max-w-\[920px\] {
    max-width: 920px !important
}
.max-w-\[1130px\] {
    max-width: 1130px !important
}
.rounded-2xl {
    border-radius: 6px !important
}
.rounded-3xl {
    border-radius: 8px !important
}
.border-l {
    border-left-width: 1px !important
}
.border-\[\#e2e2e2\] {
    --tw-border-opacity: 1 !important;
    border-color: rgb(226 226 226/var(--tw-border-opacity)) !important
}
.bg-\[\#fdf6e3\] {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(253 246 227/var(--tw-bg-opacity)) !important
}
.mb-\[8px\] {
    margin-bottom: 8px !important
}
.mb-\[50px\] {
    margin-bottom: 50px !important
}
.py-\[12px\] {
    padding-top: 12px !important;
    padding-bottom: 12px !important
}
.pb-\[160px\] {
    padding-bottom: 160px !important
}
.pl-8 {
    padding-left: 2rem !important
}
.pr-\[5\%\] {
    padding-right: 5% !important
}

@media (max-width:767px) {
    .sp-icon {
        position: absolute;
        right: 8%;
    }
    .sp-nav::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 20px;
        background-color: #BABABA;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .sp-search {
        position: fixed;
        width: 100%;
        background-color: #333;
        bottom: 0;
        z-index: 30;
    }
    .sp-s-category li:first-of-type a {
        border-top: none !important
    }
    .sp-s-category:last-child {
        border-bottom: none !important
    }
    .sp-l-category:last-of-type { border-bottom: none !important; }
    .sp-l-category + .sp-m-category,
    .sp-l-category + .no-s-category { border-top: none !important; }
    .sp-m-category,
    .no-s-category,
    .sp-s-category a,
    .sp-link a {
        position: relative;
        padding-right: 30px !important;
    }
    .sp-m-category:before {
        position: absolute;
        content: "";
        width: 12px;
        height: 1px;
        background: #333;
        top: 50%;
        right: 25px;
        transform: rotate(90deg);
        transition: all .3s ease-in-out;
    }
    .sp-m-category:after {
        position: absolute;
        content: "";
        width: 12px;
        height: 1px;
        background: #333;
        top: 50%;
        right: 25px;
        transition: all .3s ease-in-out;
    }
    .sp-m-category.open:before { transform: rotate(180deg); }
    .sp-m-category.open:after { opacity: 0; }
    .sp-s-category { display: none; }
    .no-s-category::after,
    .sp-s-category a::after,
    .sp-link a::after {
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        top: 50%;
        right: 32px;
        transform: rotate(45deg) translateY(-50%);
    }
    #menu-sp {
        display: block !important;
        top: 64px;
        left: -100%;
        z-index: 200;
        transition: all .3s ease-in-out;
    }
    #menu-sp.is-active {
        left: 0;
    }
    .overlay {
        position: fixed;
        background-color: rgb(0, 0, 0, 0.5);
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        visibility: hidden;
        transition: all 0.6s;
        cursor: pointer;
        opacity: 0;
        z-index: 100;
    }
    .overlay.is-active {
        opacity: 0.8;
        visibility: visible;
    }
    .slick-product .slick-list {
        padding: 0 20% 0 3% !important;
    }
}
.slick-product .slick-track:not(:has(\.slick-cloned)) {
    margin-left: 0;
}
@media (min-width:768px) {
    body {
        min-width: 1280px;
    }
    .rounded-2xl {
        border-radius: 6px !important
    }
    .rounded-3xl {
        border-radius: 8px !important
    }
    .md\flex-nowrap {
        flex-wrap: nowrap !important
    }
    .md\:left-2 {
        left: .5rem !important
    }
    .md\:-left-\[15px\] {
        left: -15px !important
    }
    .md\:right-2 {
        right: .5rem !important
    }
    .md\:-right-\[17px\] {
        right: -17px !important
    }
    .md\:bottom-\[20px\] {
        bottom: 20px !important
    }
    .md\:h-5 {
        height: 1.25rem !important
    }
    .md\:h-\[38px\] {
        height: 38px !important
    }
    .md\:max-h-\[138px\] {
        max-height: 138px !important
    }
    .md\:max-h-\[661px\] {
        max-height: 661px !important
    }
    .md\:w-\[180px\] {
        width: 180px !important
    }
    .md\:w-\[22\%\] {
        width: 22% !important
    }
    .md\:w-\[286px\] {
        width: 286px !important
    }
    .md\:w-\[47\%\] {
        width: 47% !important
    }
    .md\:w-5 {
        width: 1.25rem !important
    }
    .md\:max-w-\[200px\] {
        max-width: 200px !important
    }
    .md\:max-w-\[207px\] {
        max-width: 207px !important
    }
    .md\:max-w-\[48\%\] {
        max-width: 48% !important
    }
    .md\:max-w-\[60\%\] {
        max-width: 60% !important
    }
    .md\:max-w-\[840px\] {
        max-width: 840px !important
    }
    .md\:max-w-\[1280px\] {
        max-width: 1280px !important
    }
    .md\:flex-\[3\] {
        flex: 3 !important
    }
    .md\:gap-\[4\%\] {
        gap: 4% !important
    }
    .md\:mt-\[50px\] {
        margin-top: 50px !important
    }
    .md\:mt-\[100px\] {
        margin-top: 100px !important
    }
    .md\:mb-0 {
        margin-bottom: 0 !important
    }
    .md\:mb-\[80px\] {
        margin-bottom: 80px !important
    }
    .md\:p-\[10px\] {
        padding: 10px !important
    }
    .md\:pt-\[50px\] {
        padding-top: 50px !important
    }

    /* メガメニュー用 */
    #category-list {
        background: url(/html/user_data/assets/img/top/bg.svg) right 13px no-repeat;
        margin-left: 135px;
    }
/*    #category-list::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 40px;
        background-color: #BABABA;
        right: 50%;
        top: 50%;
        transform: translate(313px, -50%);
    }*/
    #category-list li:last-child { margin-right: 1px; }
    #category-list li a.js-megaMenu,
    #category-list li a.no-megaMenu {
        position: relative;
        width: 155px;
        height: 69px;
        padding: 22px 0;
    }
    #category-list li a.js-megaMenu:hover,
    #category-list li a.no-megaMenu:hover { background-color: #F8F8F8; }
    #category-list li a.js-megaMenu::before,
    #category-list li a.no-megaMenu::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 40px;
        background-color: #BABABA;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    #category-list li a.js-megaMenu.is-active::after,
    #category-list li a.no-megaMenu.is-active::after {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 4px;
        background-color: #333;
        left: 0;
        bottom: 0;
    }
    #category-list li a.js-megaMenu span,
    #category-list li a.no-megaMenu span { margin-left: 10px; }
 
/*    .js-megaMenu.is-active + .dropdown-menu {*/
    .dropdown-menu.is-active {
      opacity: 1;
      visibility: visible;
    }
    .dropdown-menu {
        width: 100%;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s, visibility 0.3s;
        transition: opacity 0.3s, visibility 0.3s;
    }
    #category-list .dropdown-menu .md\:w-\[22\%\] {
        margin-bottom: 60px;
    }
    .bg_line { position: relative; }
    .bg_line::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: #BABABA;
        top: 0;
        left: -20px;
    }
    .btn_close {
        position: absolute;
        top: 15px;
        right: 18px;
        cursor: pointer;
    }
}

/* おすすめカテゴリー */
.list_category { gap: 6.6666vw 5.48%; }
.list_category li {
    width: 20.89%;
    line-height: 1.2;
}
@media (min-width:768px) {
    .list_category { gap: 30px 40px; }
    .list_category li { width: 120px; }
}

/* 特集ページ */
.box_present {
    background-color: #FFFCE6;
    border-radius: 20px;
}
.box_present_inner { padding: 6.6666vw 4vw; }
.box_present_inner .ttl_present {
    font-size: 2.9333vw;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: center;
}
.box_present_inner .ttl_present span {
    display: block;
    font-size: 5.6vw;
    line-height: 1.2;
}
.box_present_inner .txt_lead {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.box_present_inner .img_present {
    position: relative;
    width: 56vw;
    margin: 0 auto 20px;
}
.box_present_inner .img_present .icon {
    position: absolute;
    width: 12vw;
    top: -1.8666vw;
    left: -1.8666vw;
}
.box_present_inner .notes { font-size: 2.9333vw; }
@media (min-width:768px) {
    .box_present { margin: 0 15%; }
    .box_present_inner { padding: 2rem 8%; }
    .box_present_inner .ttl_present {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .box_present_inner .ttl_present span { font-size: 28px; }
    .box_present_inner .txt_lead {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .box_present_inner .img_present {
        width: 336px;
        margin: 0 auto 20px;
    }
    .box_present_inner .img_present .icon {
        width: 62px;
        top: -14px;
        left: -14px;
    }
    .box_present_inner .notes { font-size: 11px; }
}
@media (max-width:767px) {
    .list_select li:nth-child(n+3) {
        display: none;
    }
}

/* 期間限定CP */
.bg_ttl_present {
    background: url(/html/user_data/item/limited_time/bg_present.png) center center no-repeat;
    background-size: 110px 110px;
    padding: 26px 0 20px;
}
.btn_square { width: 80%; }
.btn_square a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 13.3333vw;
    line-height: 13vw;
    border: 1px solid #333;
    padding: 0 6.4vw;
    text-align: center;
}
.btn_square a::before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 2vw;
    height: 2vw;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: translateY(-40%) rotate(45deg);
    top: 50%;
    right: 4vw;
}
@media (min-width:768px) {
    .btn_square { width: 275px; }
    .btn_square a {
        height: 50px;
        line-height: 46px;
        padding: 0 36px 0 18px;
    }
    .btn_square a::before {
        width: 8px;
        height: 8px;
        right: 20px;
    }
}

/* 新生活応援CP */
.fixed_tab {
    position: sticky;
    top: 50px;
    left: 0;
}
.tab-area {
    width: 111%;
    background-color: #fff;
    margin: 5.3333vw 0 8vw -5.5%;
    padding: 2.9333vw 0;
    z-index: 99;
}
.tab-area ul {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
.tab-area ul li {
    position: relative;
    font-size: 3.7333vw;
    font-weight: bold;
    margin: 0 5.3333vw;
}
.tab-area ul li:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #333;
    top: 0;
    right: -5.3333vw;
}
.tab-area ul li span {
    padding: 1.0666vw 2.6666vw;
    transition: 0.3s;
    cursor: pointer;
}
.tab-area ul li span:hover,
.tab-area ul li.active span { background-color: #fee44d; }

.panel {
    display: none;
    width: 100%;
}
.panel.active {
    display: block;
    animation: panel-show .9s ease-in-out forwards;
}
.panel .st_recommend {
    display: flex;
    align-items: center;
    gap: 0 4vw;
}
.panel .st_recommend span {
    font-weight: bold;
    line-height: 12vw;
    background-color: #fee44d;
    padding: 0 2.6666vw;
}
@media (min-width:768px) {
    .fixed_tab { top: 69px; }
    .tab-area {
        width: 100%;
        margin: 40px auto;
        padding: 15px 0;
    }
    .tab-area ul { max-width: 960px; }
    .tab-area ul li {
        font-size: 14px;
        margin: 0 45px;
    }
    .tab-area ul li:not(:last-child)::after { right: -45px; }
    .tab-area ul li span { padding: 5px 15px; }

    .panel .st_recommend { gap: 0 15px; }
    .panel .st_recommend span {
        line-height: 46px;
        padding: 0 10px;
    }
}
@media (max-width:767px) {
    .sp-mv {
        width: 111% !important;
        margin-left: -5.5% !important;
    }

    .campaign-news {
        max-width:60%;
    }
}

/* パネル切り替えのアニメーション */
@keyframes panel-show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* キャンペーン文言を表示・非表示 */
#shopping-form .ec-orderDelivery__shipping .campaign-news { display: none; }
#shopping-form .ec-orderDelivery__shipping[data-saletype="100"] .campaign-news,
#shopping-form .ec-orderDelivery__shipping[data-saletype="101"] .campaign-news,
#shopping-form .ec-orderDelivery__shipping[data-saletype="102"] .campaign-news { 
    display: block;
}

/* クーポンバナー非表示 
.bnr-coupon { display: none !important; }*/

/* SALE - 酒類 */
.product-tag-wrap #tag-4, .product-tag-wrap #tag-82 {
    background: #a6011a;
    color: white;
}

/* キャンペーン*/
.product-tag-wrap #tag-86,
.product-tag-wrap #tag-87,
.product-tag-wrap #tag-88,
.product-tag-wrap #tag-90,
.product-tag-wrap #tag-91,
.product-tag-wrap #tag-92,
.product-tag-wrap #tag-93,
.product-tag-wrap #tag-94,
.product-tag-wrap #tag-95,
.product-tag-wrap #tag-96,
.product-tag-wrap #tag-97,
.product-tag-wrap #tag-98,
.product-tag-wrap #tag-99,
.product-tag-wrap #tag-100,
.product-tag-wrap #tag-101,
.product-tag-wrap #tag-102,
.product-tag-wrap #tag-103,
.product-tag-wrap #tag-104,
.product-tag-wrap #tag-105,
.product-tag-wrap #tag-106 {
    color: white;
    background: #a6011a;
}

/* 非表示にしたい */
.product-tag-wrap #tag-28,
.product-tag-wrap #tag-36,
.product-tag-wrap #tag-37,
.product-tag-wrap #tag-40 {
    display: none;
}



.youtube-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* 最大幅を800pxに */
    aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
    margin: auto; /* 中央寄せ */
}
.youtube-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes blink {
  0%   { background-color: rgba(255,255,255,0.5); opacity: 1; }
  25%  { background-color: rgba(128,128,128,0.8); opacity: 1; }
  50%  { background-color: rgba(255,255,255,0.0); opacity: 0; }
  75%  { background-color: rgba(255,255,255,0.5); opacity: 1; }
  100% { background-color: rgba(128,128,128,0.8); opacity: 1; }
}

#scrollBtn {
    position: relative;
    overflow: hidden;
}

#scrollBtn svg {
  position: relative;
  z-index: 2;
}

#scrollBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: blink 3s ease-in-out 1 forwards;
    pointer-events: none;
}

#menu-sp.is-active a.sp-m-category {
  padding-left: 4% !important;
}