.u-pl1em { padding-left: 1em; } .c-link-blank { position: relative; } .c-link-blank:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%3E%0A%20%20%3Cpath%20id%3D%22download%22%20d%3D%22M5%2C0H9V4H8V1.707L4.353%2C5.353l-.707-.706L7.292%2C1H5ZM0%2C0H3V1H1V8H8V6H9V9H0Z%22%20fill%3D%22%23393c41%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat: no-repeat; background-size: 100% auto; bottom: 5px; content: ""; height: 9px; position: absolute; right: -15px; width: 9px; } @media (max-width:767px) { .l-drawer, .l-header { display: none; } } @media (min-width:768px) { .l-header[data-drawer=factory] li[data-drawer-id=factory]:after, .l-header[data-drawer=about] li[data-drawer-id=about]:after, .l-header[data-drawer=search] li[data-drawer-id=search]:after, .l-header[data-drawer=shop] li[data-drawer-id=shop]:after, .l-header[data-drawer=user] li[data-drawer-id=user]:after, .l-header__menu-item--cart>a:hover:after { background-color: #000010; width: calc(100% - 24px); } .l-header { background: #000010; position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index: 1000; } .l-header__inner { align-items: center; display: flex; font-size: 12px; margin-left: auto; margin-right: auto; max-width: 1340px; padding-left: 20px; padding-right: 20px; position: relative; z-index: 1; } .l-header__logo > a { display: block; height: 22px; width: 112px; color: #fff; } .l-header__nav { display: flex; flex: 1 1 auto; margin-left: 16px; } .l-header__nav-item--tab>a:hover>span:after,.l-header__nav-item--noLink:hover>span:after { background-color: #fff; width: 100%; } .l-header__nav-item>a { color: #fff; display: block; font-weight: 700; padding: 26px 8px; transition: color .6s, background .6s; cursor: pointer; } .l-header__nav-item>a>span,.l-header__nav-item--noLink>span { position: relative; } .l-header__nav-item>a>span:after,.l-header__nav-item--noLink>span:after { bottom: -10px; content: ""; height: 2px; left: 0; position: absolute; transition: width .6s, background-color .6s; width: 0; } .l-header__menu { display: flex; } .l-header__menu-item>a,.l-header__menu-item--noLink { background-position: 50%; background-repeat: no-repeat; background-size: 20px; box-sizing: content-box; color: #fff; display: block; font-weight: 700; height: 20px; min-width: 20px; padding: 25px 7px; position: relative; transition: color .6s, background .6s; cursor: pointer; } .l-header__menu-item>a:after,.l-header__menu-item--noLink:after { bottom: 16px; content: ""; height: 2px; left: 12px; position: absolute; right: 0; transition: width .6s, background-color .6s; width: 0; } .l-header__menu-item--maison-shiro>a>span:after { bottom: 16px; content: ""; height: 2px; left: 12px; position: absolute; right: 0; transition: width .6s, background-color .6s; width: 0; } .l-header__menu-item--maison-shiro>a:hover>span:after { background-color: #fff; width: calc(100% - 24px); } /* .l-header__menu-item--about>a,.l-header__menu-item--about { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2219%22%20viewBox%3D%220%200%2021%2019%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-book-open%22%20data-name%3D%22Icon%20feather-book-open%22%20transform%3D%22translate(-2.5%20-4)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_28%22%20data-name%3D%22%E3%83%91%E3%82%B9%2028%22%20d%3D%22M3%2C4.5H9a4%2C4%2C0%2C0%2C1%2C4%2C4v14a3%2C3%2C0%2C0%2C0-3-3H3Z%22%20transform%3D%22translate(0)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029%22%20d%3D%22M28%2C4.5H22a4%2C4%2C0%2C0%2C0-4%2C4v14a3%2C3%2C0%2C0%2C1%2C3-3h7Z%22%20transform%3D%22translate(-5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); background-position: center left 12px!important; padding-left: 40px!important; }*/ .l-header__menu-item--search>a,.l-header__menu-item--search { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221.207%22%20height%3D%2221.207%22%20viewBox%3D%220%200%2021.207%2021.207%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-search%22%20data-name%3D%22Icon%20feather-search%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_20%22%20data-name%3D%22%E3%83%91%E3%82%B9%2020%22%20d%3D%22M22.254%2C13.377A8.877%2C8.877%2C0%2C1%2C1%2C13.377%2C4.5a8.877%2C8.877%2C0%2C0%2C1%2C8.877%2C8.877Z%22%20transform%3D%22translate(-4.5%20-4.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_21%22%20data-name%3D%22%E3%83%91%E3%82%B9%2021%22%20d%3D%22M29.861%2C29.861l-4.886-4.886%22%20transform%3D%22translate(-9.861%20-9.861)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } .l-header__menu-item--shop>a,.l-header__menu-item--shop { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_5%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%205%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_22%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2022%22%20width%3D%2220%22%20height%3D%224.422%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014%22%20d%3D%22M0%2C200.376H11.471v-7.194h4.637v7.194H20V186.555H0Zm3.529-7.419H6.667v3.6H3.529Z%22%20transform%3D%22translate(0%20-180.376)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } .l-header__menu-item--user>a,.l-header__menu-item--user { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2221.25%22%20viewBox%3D%220%200%2019%2021.25%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-user%22%20data-name%3D%22Icon%20feather-user%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_4%22%20data-name%3D%22%E3%83%91%E3%82%B9%204%22%20d%3D%22M24%2C29.679V27.286A4.65%2C4.65%2C0%2C0%2C0%2C19.5%2C22.5h-9A4.65%2C4.65%2C0%2C0%2C0%2C6%2C27.286v2.393Z%22%20transform%3D%22translate(-6%20-9.429)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_5%22%20data-name%3D%22%E3%83%91%E3%82%B9%205%22%20d%3D%22M21.572%2C9.286A4.786%2C4.786%2C0%2C1%2C1%2C16.786%2C4.5a4.786%2C4.786%2C0%2C0%2C1%2C4.786%2C4.786Z%22%20transform%3D%22translate(-7.786%20-4.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } .l-header__menu-item--cart { position: relative; } .l-header__menu-item--cart>a { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217.2%22%20height%3D%2221%22%20viewBox%3D%220%200%2017.2%2021%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-shopping-bag%22%20data-name%3D%22Icon%20feather-shopping-bag%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_6%22%20data-name%3D%22%E3%83%91%E3%82%B9%206%22%20d%3D%22M4.5%2C6.6V19.2A1.8%2C1.8%2C0%2C0%2C0%2C6.3%2C21H18.9a1.8%2C1.8%2C0%2C0%2C0%2C1.8-1.8V6.6Z%22%20transform%3D%22translate(-4.5%20-1)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_7%22%20data-name%3D%22%E3%83%91%E3%82%B9%207%22%20d%3D%22M4.5%2C9H20.7%22%20transform%3D%22translate(-4.5%20-3.4)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_8%22%20data-name%3D%22%E3%83%91%E3%82%B9%208%22%20d%3D%22M12%2C22.671V18.6a3.6%2C3.6%2C0%2C1%2C1%2C7.2%2C0v4.071%22%20transform%3D%22translate(-7.5%20-15)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); } .l-header__menu-item--cart>a:hover:after { background-color: #fff; } .l-header__badge { align-items: center; background: #fff; border: 1px solid #000010; border-radius: 50%; display: flex; font-size: 10px; height: 18px; justify-content: center; letter-spacing: .5px; pointer-events: none; position: absolute; right: 0; top: 15px; width: 18px; } .l-header[data-drawer=gift]+.l-drawer-mask, .l-header[data-drawer=fragrance]+.l-drawer-mask, .l-header[data-drawer=skincare]+.l-drawer-mask, .l-header[data-drawer=makeup]+.l-drawer-mask, .l-header[data-drawer=home-food]+.l-drawer-mask, .l-header[data-drawer=food]+.l-drawer-mask, .l-header[data-drawer=factory]+.l-drawer-mask, .l-header[data-drawer=about]+.l-drawer-mask, .l-header[data-drawer=search]+.l-drawer-mask, .l-header[data-drawer=shop]+.l-drawer-mask, .l-header[data-drawer=user]+.l-drawer-mask { background: rgba(0, 0, 0, .4); visibility: visible; transition: visibility .1s; transition-delay: .1s; transition-timing-function: ease-in; } .l-header[data-drawer=gift] li[data-drawer-id=gift]>a,.l-header[data-drawer=gift] li[data-drawer-id=gift] { background-color: #eee; color: #000010; } .l-header[data-drawer=gift] li[data-drawer-id=gift]>a>span:after,.l-header[data-drawer=gift] li[data-drawer-id=gift]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=fragrance] li[data-drawer-id=fragrance]>a,.l-header[data-drawer=fragrance] li[data-drawer-id=fragrance] { background-color: #eee; color: #000010; } .l-header[data-drawer=fragrance] li[data-drawer-id=fragrance]>a>span:after,.l-header[data-drawer=fragrance] li[data-drawer-id=fragrance]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=fragrance]~.l-drawer[data-drawer=fragrance] { position: fixed; } .l-header[data-drawer=fragrance]~.l-drawer[data-drawer=fragrance]>* { pointer-events: auto; } .l-header[data-drawer=skincare] li[data-drawer-id=skincare]>a,.l-header[data-drawer=skincare] li[data-drawer-id=skincare] { background-color: #eee; color: #000010; } .l-header[data-drawer=skincare] li[data-drawer-id=skincare]>a>span:after,.l-header[data-drawer=skincare] li[data-drawer-id=skincare]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=skincare]~.l-drawer[data-drawer=skincare] { position: fixed; } .l-header[data-drawer=skincare]~.l-drawer[data-drawer=skincare]>* { pointer-events: auto; } .l-header[data-drawer=makeup] li[data-drawer-id=makeup]>a,.l-header[data-drawer=makeup] li[data-drawer-id=makeup] { background-color: #eee; color: #000010; } .l-header[data-drawer=makeup] li[data-drawer-id=makeup]>a>span:after,.l-header[data-drawer=makeup] li[data-drawer-id=makeup]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=makeup]~.l-drawer[data-drawer=makeup] { position: fixed; } .l-header[data-drawer=makeup]~.l-drawer[data-drawer=makeup]>* { pointer-events: auto; } .l-header[data-drawer=home-food] li[data-drawer-id=home-food]>a,.l-header[data-drawer=home-food] li[data-drawer-id=home-food] { background-color: #eee; color: #000010; } .l-header[data-drawer=home-food] li[data-drawer-id=home-food]>a>span:after,.l-header[data-drawer=home-food] li[data-drawer-id=home-food]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=home-food]~.l-drawer[data-drawer=home-food] { position: fixed; } .l-header[data-drawer=home-food]~.l-drawer[data-drawer=home-food]>* { pointer-events: auto; } .l-header[data-drawer=food] li[data-drawer-id=food]>a,.l-header[data-drawer=food] li[data-drawer-id=food] { background-color: #eee; color: #000010; } .l-header[data-drawer=food] li[data-drawer-id=food]>a>span:after,.l-header[data-drawer=food] li[data-drawer-id=food]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=food]~.l-drawer[data-drawer=food] { position: fixed; } .l-header[data-drawer=food]~.l-drawer[data-drawer=food]>* { pointer-events: auto; } .l-header[data-drawer=about] li[data-drawer-id=about]>a,.l-header[data-drawer=about] li[data-drawer-id=about] { background-color: #eee; /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2219%22%20viewBox%3D%220%200%2021%2019%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-book-open%22%20data-name%3D%22Icon%20feather-book-open%22%20transform%3D%22translate(-2.5%20-4)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_28%22%20data-name%3D%22%E3%83%91%E3%82%B9%2028%22%20d%3D%22M3%2C4.5H9a4%2C4%2C0%2C0%2C1%2C4%2C4v14a3%2C3%2C0%2C0%2C0-3-3H3Z%22%20transform%3D%22translate(0)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029%22%20d%3D%22M28%2C4.5H22a4%2C4%2C0%2C0%2C0-4%2C4v14a3%2C3%2C0%2C0%2C1%2C3-3h7Z%22%20transform%3D%22translate(-5)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");*/ color: #000010; } .l-header[data-drawer=about] li[data-drawer-id=about]>a>span:after,.l-header[data-drawer=about]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=factory] li[data-drawer-id=factory]>a,.l-header[data-drawer=factory] li[data-drawer-id=factory] { background-color: #eee; color: #000010; } .l-header[data-drawer=factory] li[data-drawer-id=factory]>a>span:after,.l-header[data-drawer=factory]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=about]~.l-drawer[data-drawer=about] { position: fixed; } .l-header[data-drawer=about]~.l-drawer[data-drawer=about]>* { pointer-events: auto; } .l-header[data-drawer=search] li[data-drawer-id=search]>a,.l-header[data-drawer=search] li[data-drawer-id=search] { background-color: #eee; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221.207%22%20height%3D%2221.207%22%20viewBox%3D%220%200%2021.207%2021.207%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-search%22%20data-name%3D%22Icon%20feather-search%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_20%22%20data-name%3D%22%E3%83%91%E3%82%B9%2020%22%20d%3D%22M22.254%2C13.377A8.877%2C8.877%2C0%2C1%2C1%2C13.377%2C4.5a8.877%2C8.877%2C0%2C0%2C1%2C8.877%2C8.877Z%22%20transform%3D%22translate(-4.5%20-4.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_21%22%20data-name%3D%22%E3%83%91%E3%82%B9%2021%22%20d%3D%22M29.861%2C29.861l-4.886-4.886%22%20transform%3D%22translate(-9.861%20-9.861)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); color: #000010; } .l-header[data-drawer=search] li[data-drawer-id=search]>a>span:after,.l-header[data-drawer=search] li[data-drawer-id=search]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=search]~.l-drawer[data-drawer=search] { max-height: 800px; } .l-header[data-drawer=search]~.l-drawer[data-drawer=search]>* { pointer-events: auto; } .l-header[data-drawer=shop] li[data-drawer-id=shop]>a,.l-header[data-drawer=shop] li[data-drawer-id=shop] { background-color: #eee; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_5%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%205%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_22%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2022%22%20width%3D%2220%22%20height%3D%224.422%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_14%22%20data-name%3D%22%E3%83%91%E3%82%B9%2014%22%20d%3D%22M0%2C200.376H11.471v-7.194h4.637v7.194H20V186.555H0Zm3.529-7.419H6.667v3.6H3.529Z%22%20transform%3D%22translate(0%20-180.376)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); color: #000010; } .l-header[data-drawer=shop] li[data-drawer-id=shop]>a>span:after,.l-header[data-drawer=shop] li[data-drawer-id=shop]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=shop]~.l-drawer[data-drawer=shop] { max-height: 800px; } .l-header[data-drawer=shop]~.l-drawer[data-drawer=shop]>* { pointer-events: auto; } .l-header[data-drawer=user] li[data-drawer-id=user]>a,.l-header[data-drawer=user] li[data-drawer-id=user] { background-color: #eee; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2221.25%22%20viewBox%3D%220%200%2019%2021.25%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-user%22%20data-name%3D%22Icon%20feather-user%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_4%22%20data-name%3D%22%E3%83%91%E3%82%B9%204%22%20d%3D%22M24%2C29.679V27.286A4.65%2C4.65%2C0%2C0%2C0%2C19.5%2C22.5h-9A4.65%2C4.65%2C0%2C0%2C0%2C6%2C27.286v2.393Z%22%20transform%3D%22translate(-6%20-9.429)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_5%22%20data-name%3D%22%E3%83%91%E3%82%B9%205%22%20d%3D%22M21.572%2C9.286A4.786%2C4.786%2C0%2C1%2C1%2C16.786%2C4.5a4.786%2C4.786%2C0%2C0%2C1%2C4.786%2C4.786Z%22%20transform%3D%22translate(-7.786%20-4.5)%22%20fill%3D%22none%22%20stroke%3D%22%23000010%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"); color: #000010; } .l-header[data-drawer=user] li[data-drawer-id=user]>a>span:after,.l-header[data-drawer=user] li[data-drawer-id=user]>span:after { background-color: #000010; width: 100%; } .l-header[data-drawer=user]~.l-drawer[data-drawer=user] { max-height: 800px; } .l-header[data-drawer=user]~.l-drawer[data-drawer=user]>* { pointer-events: auto; } /*closeBtn*/ .l-drawer__list { position: relative; } .close-btBox { position: absolute; right: 0; top: 0px; } .close-bt{ display: inline-block; padding: 25px 0; cursor: pointer; } .close-bt::before, .close-bt::after { display: block; content: ""; width: 50px; height: 1px; background: #000; } .close-bt::before { transform: rotate(-45deg); } .close-bt::after { transform: rotate(45deg); } .l-drawer-mask { height: 100vh; left: 0; pointer-events: none; top: 0; z-index: 5; visibility: hidden; transition: visibility .1s; transition-delay: .1s; transition-timing-function: ease-in; background: rgba(0, 0, 0, .4); } .l-drawer, .l-drawer-mask { position: fixed; width: 100%; } .l-drawer { visibility: hidden; transition: visibility .1s; transition-delay: .1s; transition-timing-function: ease-in; z-index: 5; /* max-height: 0; */ } .l-header[data-drawer=gift]~.l-drawer[data-drawer=gift], .l-header[data-drawer=fragrance]~.l-drawer[data-drawer=fragrance], .l-header[data-drawer=skincare]~.l-drawer[data-drawer=skincare], .l-header[data-drawer=makeup]~.l-drawer[data-drawer=makeup], .l-header[data-drawer=home-food]~.l-drawer[data-drawer=home-food], .l-header[data-drawer=food]~.l-drawer[data-drawer=food], .l-header[data-drawer=factory]~.l-drawer[data-drawer=factory], .l-header[data-drawer=about]~.l-drawer[data-drawer=about], .l-header[data-drawer=search]~.l-drawer[data-drawer=search], .l-header[data-drawer=shop]~.l-drawer[data-drawer=shop], .l-header[data-drawer=food]~.l-drawer[data-drawer=food], .l-header[data-drawer=user]~.l-drawer[data-drawer=user] { visibility: visible; transition: visibility .1s; transition-delay: .1s; transition-timing-function: ease-in; z-index: 1001; } .l-drawer[data-drawer=gift] { right: 0; } .l-drawer[data-drawer=gift] .l-drawer__inner { margin-left: auto; margin-right: auto; max-width: 1340px; position: relative; } .l-drawer[data-drawer=gift] .l-drawer__content { background: #eee; margin-left: 145px; padding: 20px 20px 30px; width: 170px; overflow: auto; } .l-drawer[data-drawer=gift] .l-drawer__hdg { border-bottom: 1px solid #c1c8d3; font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; } .l-drawer[data-drawer=gift] .l-drawer__item { font-size: 14px; } .l-drawer[data-drawer=gift] .l-drawer__item:not(:first-of-type) { margin-top: 10px; } .l-drawer[data-drawer=gift] .l-drawer__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-drawer[data-drawer=gift] .l-drawer__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .l-drawer[data-drawer=gift] .l-drawer__separate { border-top: 1px solid #c1c8d3; margin-bottom: 15px; margin-top: 15px; } .l-drawer[data-drawer=fragrance] { background: #eee; left: 0; } .l-drawer[data-drawer=fragrance] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=fragrance] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 83%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-drawer__item { width: calc(46.1% - 20px); } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section__item { width: 46.1%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-a .l-section__item:nth-child(1) { width: calc(50% - 16px); } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-a .l-section__item:nth-child(2) { width: 50%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-b .l-section__item:nth-child(1) { width: calc(55% - 16px); } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-b .l-section__item:nth-child(2) { width: 45%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=fragrance] .l-drawer__item { width: 31%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-a { width: 35.4%; } .l-drawer[data-drawer=fragrance] .l-drawer__list--wide .l-section-b { width: 53.1%; } .l-drawer[data-drawer=skincare] { background: #eee; left: 0; } .l-drawer[data-drawer=skincare] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=skincare] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 83%; } .l-drawer[data-drawer=skincare] .l-drawer__list--wide .l-drawer__item { width: calc(50% - 20px); } .l-drawer[data-drawer=skincare] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=skincare] .l-drawer__list--wide .l-section__item { width: calc(50% - 20px); } .l-drawer[data-drawer=skincare] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=skincare] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=skincare] .l-drawer__item { width: 31%; } .l-drawer[data-drawer=skincare] .l-section-a { width: 51% } .l-drawer[data-drawer=skincare] .l-section-b { width: 17% } .l-drawer[data-drawer=skincare] .l-section-b.w-16 { width: 16% } .l-drawer[data-drawer=skincare] .l-section-b.w-18 { width: 18% } .l-drawer[data-drawer=skincare] .l-section-c { width: 32% } .l-drawer[data-drawer=makeup] { background: #eee; left: 0; } .l-drawer[data-drawer=makeup] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=makeup] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 83%; } .l-drawer[data-drawer=makeup] .l-drawer__list--wide .l-drawer__item { width: calc(50% - 20px); } .l-drawer[data-drawer=makeup] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=makeup] .l-drawer__list--wide .l-section__item { width: calc(50% - 20px); } .l-drawer[data-drawer=makeup] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=makeup] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=makeup] .l-drawer__item { /*width: 31%;*/ width: 28.32%; } .l-drawer[data-drawer=home-food] { background: #eee; left: 0; } .l-drawer[data-drawer=home-food] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=home-food] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 83%; } .l-drawer[data-drawer=home-food] .l-drawer__list--wide .l-drawer__item { width: 28.32%; } .l-drawer[data-drawer=home-food] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=home-food] .l-drawer__list--wide .l-section__item { width: 100%; } .l-drawer[data-drawer=home-food] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=home-food] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=home-food] .l-drawer__item { width: 31%; } .l-drawer[data-drawer=food] { background: #eee; left: 0; } .l-drawer[data-drawer=food] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=food] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 83%; } .l-drawer[data-drawer=food] .l-drawer__list--wide .l-drawer__item { width: calc(50% - 20px); } .l-drawer[data-drawer=food] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=food] .l-drawer__list--wide .l-section__item { width: calc(50% - 20px); } .l-drawer[data-drawer=food] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=food] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=food] .l-drawer__item { width: 31%; } .l-drawer[data-drawer=factory] { right: 0; } .l-drawer[data-drawer=factory] .l-drawer__inner { margin-left: auto; margin-right: auto; max-width: 1340px; position: relative; } .l-drawer[data-drawer=factory] .l-drawer__content { background: #eee; margin-left: auto; margin-right: 190px; padding: 20px 20px 30px; width: 250px; overflow: auto; } .l-drawer[data-drawer=factory] .l-drawer__hdg { border-bottom: 1px solid #c1c8d3; font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; } .l-drawer[data-drawer=factory] .l-drawer__item { font-size: 14px; } .l-drawer[data-drawer=factory] .l-drawer__item:not(:first-of-type) { margin-top: 10px; } .l-drawer[data-drawer=factory] .l-drawer__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-drawer[data-drawer=factory] .l-drawer__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .l-drawer[data-drawer=factory] .l-drawer__separate { border-top: 1px solid #c1c8d3; margin-bottom: 15px; margin-top: 15px; } .l-drawer[data-drawer=about] { background: #eee; left: 0; } .l-drawer[data-drawer=about] .l-drawer__inner { align-items: flex-start; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1340px; padding: 30px 20px 60px; } .l-drawer[data-drawer=about] .l-drawer__list { display: flex; flex-wrap: wrap; gap: 40px 3.5%; width: 100%; } .l-drawer[data-drawer=about] .l-drawer__list--wide .l-drawer__item { width: calc(50% - 20px); } .l-drawer[data-drawer=about] .l-drawer__list--wide .l-section__list { flex-direction: row; justify-content: space-between; } .l-drawer[data-drawer=about] .l-drawer__list--wide .l-section__item { width: calc(50% - 20px); } .l-drawer[data-drawer=about] .l-drawer__list--wide .l-section__item:nth-of-type(2) { margin-top: 0; } .l-drawer[data-drawer=about] .l-drawer__list--wide .l-section__item:nth-of-type(3) { margin-top: 25px; min-height: auto; } .l-drawer[data-drawer=about] .l-drawer__item { width: 28.32%; } .l-drawer[data-drawer=search] { right: 0; } .l-drawer[data-drawer=search] .l-drawer__inner { margin-left: auto; margin-right: auto; max-width: 1340px; position: relative; } .l-drawer[data-drawer=search] .l-drawer__content { background: #eee; margin-left: auto; padding: 30px 30px 40px; width: 670px; overflow: auto; } .l-drawer[data-drawer=search] .l-drawer__hdg { border-bottom: 1px solid #c1c8d3; font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; } .l-drawer[data-drawer=search] .l-drawer__item { font-size: 14px; } .l-drawer[data-drawer=search] .l-drawer__item:not(:first-of-type) { margin-top: 10px; } .l-drawer[data-drawer=search] .l-drawer__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-drawer[data-drawer=search] .l-drawer__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .l-drawer[data-drawer=search] .l-drawer__separate { border-top: 1px solid #c1c8d3; margin-bottom: 15px; margin-top: 15px; } .l-drawer[data-drawer=shop] { right: 0; } .l-drawer[data-drawer=shop] .l-drawer__inner { margin-left: auto; margin-right: auto; max-width: 1340px; position: relative; } .l-drawer[data-drawer=shop] .l-drawer__content { background: #eee; margin-left: auto; padding: 20px 20px 30px; width: 160px; overflow: auto; } .l-drawer[data-drawer=shop] .l-drawer__hdg { border-bottom: 1px solid #c1c8d3; font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; } .l-drawer[data-drawer=shop] .l-drawer__item { font-size: 14px; } .l-drawer[data-drawer=shop] .l-drawer__item:not(:first-of-type) { margin-top: 10px; } .l-drawer[data-drawer=shop] .l-drawer__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-drawer[data-drawer=shop] .l-drawer__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .l-drawer[data-drawer=shop] .l-drawer__separate { border-top: 1px solid #c1c8d3; margin-bottom: 15px; margin-top: 15px; } .l-drawer[data-drawer=user] { right: 0; } .l-drawer[data-drawer=user] .l-drawer__inner { margin-left: auto; margin-right: auto; max-width: 1340px; position: relative; } .l-drawer[data-drawer=user] .l-drawer__content { background: #eee; margin-left: auto; padding: 20px 20px 30px; width: 160px; overflow: auto; } .l-drawer[data-drawer=user] .l-drawer__hdg { border-bottom: 1px solid #c1c8d3; font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; } .l-drawer[data-drawer=user] .l-drawer__item { font-size: 14px; } .l-drawer[data-drawer=user] .l-drawer__item:not(:first-of-type) { margin-top: 10px; } .l-drawer[data-drawer=user] .l-drawer__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-drawer[data-drawer=user] .l-drawer__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .l-drawer[data-drawer=user] .l-drawer__separate { border-top: 1px solid #c1c8d3; margin-bottom: 15px; margin-top: 15px; } .l-pickup { background: #fff; line-height: 1.3; width: 14.6%; } .l-pickup__inner { padding: 12%; } .l-pickup__hdg { font-size: 14px; font-weight: 700; margin-bottom: 15px; } .l-pickup__list { display: flex; flex-direction: column; gap: 15px; } .l-pickup__list:not(:first-of-type) { border-top: 1px solid #eee; margin-top: 16px; padding-top: 16px; } .l-pickup__list>li { font-size: 12px; } .l-pickup__list>li>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 2px; } .l-section__hdg { border-bottom: 1px solid #c1c8d3; display: block; font-size: 16px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; position: relative; } .l-section__hdg--link:hover:before { width: 100%; } .l-section__hdg--link:before { background: #393c41; bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; transition: width .6s; width: 0; } .l-segment-inner { padding-bottom: 16px; border-bottom: #dadada 1px solid; margin-bottom: 16px; } /* ZERO COLLECTION用 */ .l-segment-inner--zero { padding-top: 16px; margin-top: 16px; border-top: #dadada 1px solid;; border-bottom: none; } .l-segment-inner--zero .l-segment__hdg { font-weight: 400; } .l-section__hdg--link:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.078%22%20height%3D%2211.737%22%20viewBox%3D%220%200%207.078%2011.737%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_11%22%20data-name%3D%22%E3%83%91%E3%82%B9%2011%22%20d%3D%22M2170.008%2C393.635l6%2C5.5-6%2C5.5%22%20transform%3D%22translate(-2169.67%20-393.266)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat: no-repeat; background-size: 100% auto; content: ""; height: 12px; position: absolute; right: 0; top: 10px; width: 7px; } .l-section__list { align-content: space-between; display: flex; flex-flow: wrap; gap: 25px 0; /* max-height: 450px; */ } .l-section__list--full .l-section__item { width: 100%; } .l-section__list--row { flex-direction: row; justify-content: space-between; } .l-section__list--column-gap-1 { column-gap: 8px; } .l-section__list--column-gap-2 { column-gap: 16px; } .l-section__list--wrap-none { flex-wrap: nowrap; } .l-section__item { width: 47%; } .l-section__item-a { width: 33.33333%; } .l-section__item-b { width: 50%; } .l-segment { font-size: 14px; } .l-segment__hdg { font-weight: 700; margin-bottom: 10px; } .l-segment__list { display: flex; flex-direction: column; gap: 8px; } .l-category__item>a:hover { text-decoration: underline; -webkit-text-decoration-color: #393c41; text-decoration-color: #393c41; text-underline-offset: 4px; } .l-search { position: relative; } .l-search__input[type=text] { background: #fff; border-radius: 4px; font-size: 16px; padding: 10px 50px 10px 14px; width: 100%; } .l-search__submit { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%26%23x30EC%3B%26%23x30A4%3B%26%23x30E4%3B%26%23x30FC%3B_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%2033%2033%22%20width%3D%2233px%22%20height%3D%2233px%22%3E%3Cstyle%3E.st0%2C.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%232f2f2f%7D.st1%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3Ccircle%20class%3D%22st0%22%20cx%3D%2216.5%22%20cy%3D%2216.5%22%20r%3D%2216.5%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M18.2%2018.2c1.7-1.7%201.7-4.4%200-6.1-1.7-1.7-4.4-1.7-6.1%200-1.7%201.7-1.7%204.4%200%206.1%201.8%201.7%204.5%201.7%206.1%200zm1.5.5l3.6%203.6c.3.3.3.7%200%201-.3.3-.7.3-1%200l-3.6-3.6c-2.2%201.7-5.5%201.6-7.5-.5-2.2-2.2-2.2-5.8%200-8.1%202.2-2.2%205.8-2.2%208.1%200%202%202.1%202.2%205.4.4%207.6z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% auto; height: 25px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 25px; } .c-label { background: #79888b; border-radius: 2px; color: #fff; display: block; font-size: 14px; padding: 6px 10px; } .l-drawer-continuation { max-height: 300px; overflow-y: scroll; } .l-drawer-continuation::after { content: ""; width: 100%; height: 50px; background: -webkit-gradient(linear,left bottom,left top,color-stop(15%,#eee),to(hsla(0,0%,100%,0))); background: linear-gradient(0deg,#eee 15%,hsla(0,0%,100%,0)); position: absolute; bottom: 0; left: 0; pointer-events: none; } .l-category__item--sub { font-size: 10px; } .l-category__item > a.limited::after { display: inline-block; margin-left: 8px; padding: 6px 8px; border-radius: 4px; background: #7e8c91; color: #ffffff; content: "限定"; text-align: center; letter-spacing: 0px; font-size: 10px; line-height: 1; } } .l-drawer-gradient { width: 100%; position: absolute; border-style: none; left: 0; bottom: 0; z-index: 2; height: 2rem; background: -webkit-gradient(linear,left bottom,left top,color-stop(15%,#eee),to(hsla(0,0%,100%,0))); background: linear-gradient(0deg,#eee 15%,hsla(0,0%,100%,0)); } .l-drawer-continuation::-webkit-scrollbar, .l-drawer[data-drawer=search] .l-drawer__content::-webkit-scrollbar, .l-drawer[data-drawer=shop] .l-drawer__content::-webkit-scrollbar, .l-drawer[data-drawer=user] .l-drawer__content::-webkit-scrollbar { width: 5px; height: 5px; } .l-drawer-continuation::-webkit-scrollbar-track, .l-drawer[data-drawer=search] .l-drawer__content::-webkit-scrollbar-track, .l-drawer[data-drawer=shop] .l-drawer__content::-webkit-scrollbar-track, .l-drawer[data-drawer=user] .l-drawer__content::-webkit-scrollbar-track { background: #cccccc; } .l-drawer-continuation::-webkit-scrollbar-thumb, .l-drawer[data-drawer=search] .l-drawer__content::-webkit-scrollbar-thumb, .l-drawer[data-drawer=shop] .l-drawer__content::-webkit-scrollbar-thumb, .l-drawer[data-drawer=user] .l-drawer__content::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #79888b; } /*suggest*/ @media (min-width:768px) { #expsuggestsdiv { width: 269px !important; display: block; position: fixed !important; left: 705px; top: 209px; z-index: 1001; } #expsuggestsearchdiv { left: 272px; } div.sug_all .sug_over, div.sug_all .sug_select { background-color: #000021; } div.sug_all .sug_close { position: relative; color: rgb(51, 102, 255); right: 0.4em; text-align: center; } div.sug_all .sug_key { width: calc(100% - 0.8em); position: relative; color: rgb(0, 0, 0); left: 0.4em; text-align: left; white-space: break-spaces; overflow: hidden; padding: 3px 0; line-height: 1.5; } #expsuggestsearchdiv .exp_title_pc { display: block; font-size: 1.2rem; line-height: 1.3em; width: 100px; height: 2.55em; overflow: hidden; text-align: left; } #expsuggestsearchdiv .exp_price_pc { display: inline-block; color: #000021; font-weight: normal; text-decoration: none; font-size: 1.2rem; } #expsuggestsearchdiv .exp_item_pc { display: block; float: left; margin: 16px 0px 0px 10px; } #expsuggestsearchdiv .exp_sub_pc { background-color: #eee; padding: 6px 10px; } #expsuggestsearchdiv .exp_result_pc { padding-bottom: 16px; position: static; background-color: white; border: 1px solid #79888b; width: 338px; color: black; text-align: left; } div.sug_all .sug_item { width: 100%; line-height: 1.8em; border-left: 1px solid #79888b; border-right: 1px solid #79888b; cursor: pointer; } div.sug_all .sug_item:nth-of-type(1) { border-top: 1px solid #79888b; /*background-color: #eee;*/ padding: 3px 0px; } div.sug_all .sug_item:nth-last-of-type(1) { border-bottom: 1px solid #79888b; } div.sug_all .sug_close { position: relative; color: #79888b; right: 0.4em; text-align: center; } .sug_item.sug_select .sug_key { color: #fff; } } @media (max-width:767px) { div.sug_all .sug_group { width: 100%; white-space: nowrap; overflow: auto hidden; padding: 5px 0; } div.sug_all .sug_close { position: absolute; display: inline-block; left: calc(100% - 2em); line-height: 1.8em; font-weight: bold; background-color: #2c2e33; color: rgb(255, 255, 255); border: 1px solid #2c2e33; border-radius: 3px; padding: 5px 0.4em; margin: 0.1em 0.1em 0.4em; } div.sug_all .sug_key { position: relative; display: inline-block; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); border: 1px solid rgb(170, 170, 170); border-radius: 3px; line-height: 1.8em; padding: 5px 0.3em; margin: 0.1em 0.1em 0.4em; } #expsuggestsearchdiv .exp_result_sp { position: static; width: 100%; background-color: rgb(255, 255, 255); white-space: nowrap; overflow: auto; border: 1px solid #79888b; border-radius: 3px; color: black; } #expsuggestsearchdiv .exp_price_sp { display: inline-block; padding: 0px 0.2em; text-align: left; color: rgb(51, 51, 51); font-size: 84%; font-weight: normal; text-decoration: none; height: 1.3em; } div.sug_all .sug_select { background-color: #000021; border: 1px solid #000021; color: rgb(255, 255, 255); } div.sug_all .sug_select::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -0.5em; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0.5em 0.5em 0px; border-color: #000021 transparent transparent; } } .l-category__item > a.limited.limited__sunagawa::after { content: "砂川本店限定"; margin-left: 0; } .l-category__item > a.limited.limited__sunagawa span { margin-right: 8px; } /* ZERO COLLECTION用 */ .limited--zero { display: inline-block; margin-left: 0; color: rgb(255, 255, 255); text-align: center; letter-spacing: 0px; font-size: 10px; font-weight: 400; line-height: 1; padding: 6px 8px; border-radius: 4px; background: rgb(126, 140, 145); } .l-category__item.separator-line { margin-top: 16px; padding-top: 16px; border-top: 1px solid #dadada; } /* 限定テーマ色 アイスミント2023 */ @media (min-width:768px) { .l-header.theme-icemint { background: #1e4e6e; } .l-header.theme-icemint .l-header__badge { border: 1px solid #173a51; } } .g-header-message { overflow: hidden; position: relative; width: 100%; height: 52px; background-color: #f8f8f8; } .g-header-message__item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(120px); opacity: 0; pointer-events: none; } .g-header-message__item.on { transform: translateX(0); opacity: 1; pointer-events: auto; } .g-header-message__item.off { transform: translateX(-30px); opacity: 0; } .g-header-message__item.transition.on { transition: transform 0.5s ease-out 0.2s, opacity 0.5s ease-out 0.2s; } .g-header-message__item.transition.off { transition: transform 0.4s ease-in 0s, opacity 0.4s ease-in 0s; } .g-header-message__item a { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 14px; font-weight: 400; color: #000; text-decoration: none; } @media (max-width:767px) { .g-header-message__item a { padding: 10px 6% 10px 4%; font-size: 1.1rem; text-align: center; } } @media (max-width:1230px) { .l-header__menu-item>a,.l-header__menu-item--noLink { padding: 25px 4px; } } /* 2024.11.28 Header message remove icon */ .remove-header-message { display: block; position: fixed; z-index: 10000; right: 0px; top: 12px; display: inline-block; width: 30px; height: 30px; cursor: pointer; } @media (max-width:767px) { .remove-header-message { position: absolute; } } .remove-header-message::before, .remove-header-message::after { content: ''; position: absolute; top: 50%; left: 50%; width: 45%; height: 1px; background-color: #000; transform-origin: center; } .remove-header-message::before { transform: translate(-50%, -50%) rotate(45deg); } .remove-header-message::after { transform: translate(-50%, -50%) rotate(-45deg); }