@charset "utf-8";
/* background wrap */
.background-wrap {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(var(--size-smaller));
    -webkit-backdrop-filter: blur(var(--size-smaller));
    background-color: var(--color-black-opacity);
    z-index: 10;
}
/* header wrap */
.header-wrap {
    display: fixed;
    flex-flow: column;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    padding-top: var(--size-medium);
    width: 100%;
    background-color: var(--color-white);
    transition: all 0.2s ease;
}
.header-wrap.scroll {
    top: calc(-0.95 * var(--size-calc));
}
.header-wrap.fixed {
    z-index: 20;
}
.header-wrap .logo {
    height: calc(1.2 * var(--size-medium));
}
.header-wrap .logo img {
    width: auto;
    height: 100%;
}
.header-wrap .link {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.header-wrap .link .icon {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: calc(1.1 * var(--size-large));
    height: calc(1.1 * var(--size-large));
    border-radius: 50%;
    background-color: var(--color-background);
}
.header-wrap .link .icon img {
    width: 44%;
    height: auto;
}
.header-wrap .link .text {
    margin-top: var(--size-tiny);
    font-size: var(--font-smaller);
}
.header-wrap .background-box {
    position: fixed;
    top: calc(-1 * var(--size-biggest));
    left: 0px;
    width: 100%;
    height: var(--size-biggest);
    font-size: 0px;
    background-color: var(--color-white);
    z-index: 21;
}
.header-wrap.fixed .background-box {
    top: 0px;
    transition: all 0.2s ease;
}
.header-wrap .search-box {
    position: absolute;
    top: calc(1.1 * var(--size-medium));
    left: 50%;
    width: calc(5 * var(--size-calc));
    transform: translateX(-50%);
}
.header-wrap.fixed .search-box {
    position: fixed;
    z-index: 22;
}
.header-wrap .search-box input {
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
    padding: 0px var(--size-larger) 0px var(--size-medium);
    width: 100%;
    height: var(--size-largest);
    line-height: 1;
    font-family: var(--font-bold);
    font-size: var(--font-big);
    border-radius: var(--size-largest);
    border: var(--border-blue-strong);
    background-color: var(--color-white);
}
.header-wrap .search-box input:focus {
    outline: none;
}
.header-wrap .search-box input::placeholder,
.header-wrap .search-box input::-webkit-placeholder {
    color: var(--color-light-gray);
}
.header-wrap .search-box .search-button {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: var(--size-smallest);
    width: calc(1.1 * var(--size-large));
    height: calc(1.1 * var(--size-large));
    border-radius: 50%;
    background-color: var(--color-blue);
    transform: translateY(-50%);
}
.header-wrap .search-box .search-button img {
    width: 50%;
    height: auto;
}
/* menu wrap */
.menu-wrap {
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: fixed;
    top: calc(0.95 * var(--size-calc));
    left: 0px;
    width: 100%;
    height: var(--size-calc);
    background-color: var(--color-white);
    transition: all 0.2s ease;
}
.menu-wrap.scroll {
    top: 0px;
    height: calc(1.5 * var(--size-largest));
}
.menu-wrap .all-menu {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.menu-wrap .all-menu .icon {
    height: var(--font-largest);
}
.menu-wrap .all-menu .icon img {
    width: auto;
    height: 100%;
}
.menu-wrap .all-menu .text {
    margin-left: var(--size-smallest);
    font-family: var(--font-bold);
    font-size: var(--font-largest);
}
.menu-wrap .menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-bold);
    font-size: var(--font-largest);
    transform: translate(-50%, -50%);
}
.menu-wrap .menu > li {
    margin-left: var(--size-largest);
}
.menu-wrap .menu > li:first-child {
    margin-left: 0px;
}
/* footer wrap */
.footer-wrap {
    margin-top: var(--size-calc);
}
.footer-wrap .footer-container {
    position: relative;
    padding: var(--size-larger) 0px var(--size-largest);
    border-top: var(--border-default);
}
.footer-wrap .link {
    position: absolute;
    top: var(--size-larger);
    right: 0px;
    font-family: var(--font-bold);
}
.footer-wrap .copyright {
    font-size: var(--font-small);
}
.footer-wrap .company {
    margin-top: var(--size-small);
    font-family: var(--font-bolder);
}
.footer-wrap .info {
    margin-top: var(--size-tiny);
    line-height: var(--line-default);
    font-size: var(--font-small);
    color: var(--color-deep-gray);
}
/* main wrap */
.main-wrap {
    padding-top: var(--size-biggest);
}
/* main banner */
.main-banner {
    display: flex;
    flex-flow: row nowrap;
}
.main-banner .box-grid {
    display: grid;
    grid-template-columns: var(--size-huge) 1fr 1fr;
    grid-template-rows: repeat(3, var(--size-bigger));
    gap: var(--size-medium);
    flex-grow: 1;
}
.main-banner .box-grid > li:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.main-banner .box-grid a {
    display: flex;
    flex-flow: column;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--size-tiny);
    background-color: var(--color-background);
    overflow: hidden;
}
.main-banner .box-grid a.light-blue {
    background-color: var(--color-light-blue);
}
.main-banner .box-grid .link {
    justify-content: center;
    align-items: center;
}
.main-banner .box-grid .link .icon {
    margin-top: calc(-1 * var(--size-medium));
}
.main-banner .box-grid .link .icon.beauty {
    height: calc(2 * var(--size-large));
}
.main-banner .box-grid .link .icon.pressure {
    height: calc(1.8 * var(--size-large));
}
.main-banner .box-grid .link .icon.hospital {
    height: calc(1.7 * var(--size-large));
}
.main-banner .box-grid .link .icon.sale {
    height: calc(1.6 * var(--size-large));
}
.main-banner .box-grid .link .icon img {
    width: auto;
    height: 100%;
}
.main-banner .box-grid .link .text {
    position: absolute;
    bottom: var(--size-medium);
    left: 0px;
    width: 100%;
    font-family: var(--font-bolder);
    font-size: var(--font-largest);
    text-align: center;
}
.main-banner .box-grid .link-wide {
    padding: var(--size-medium);
}
.main-banner .box-grid .link-wide .title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-family: var(--font-bold);
}
.main-banner .box-grid .link-wide .title img {
    margin-right: var(--size-tiny);
    width: auto;
    height: var(--font-medium);
}
.main-banner .box-grid .link-wide .desc {
    position: absolute;
    bottom: var(--size-medium);
    left: var(--size-medium);
    font-family: var(--font-bolder);
    font-size: var(--font-largest);
}
.main-banner .box-grid .link-wide .icon {
    position: absolute;
    top: calc(1.3 * var(--size-small));
    right: var(--size-medium);
    height: var(--size-medium);
}
.main-banner .box-grid .link-wide .icon img {
    width: auto;
    height: 100%;
}
.main-banner .order-list {
    flex-shrink: 0;
    position: relative;
    margin-left: var(--size-medium);
    padding: var(--size-medium);
    width: calc(4 * (var(--size-calc)));
    border-radius: var(--size-tiny);
    border: var(--border-default);
    background-color: var(--color-white);
}
.main-banner .order-list .button.blue {
    position: absolute;
    bottom: var(--size-medium);
    left: var(--size-medium);
    width: calc(100% - 2 * var(--size-medium));
}
.main-banner .last-order {
    display: flex;
    flex-flow: row nowrap;
}
.main-banner .last-order .image {
    flex-shrink: 0;
    margin-right: var(--size-smallest);
    width: var(--size-largest);
    height: var(--size-largest);
    border-radius: var(--size-tiny);
    background-color: var(--color-light-gray);
}
.main-banner .last-order .top,
.main-banner .last-order .bottom {
    display: flex;
    flex-flow: row nowrap;
}
.main-banner .last-order .name {
    flex-grow: 1;
    font-size: var(--font-small);
    word-break: keep-all;
}
.main-banner .last-order .cart {
    flex-shrink: 0;
    align-self: baseline;
    margin-left: var(--size-smallest);
    font-family: var(--font-bold);
    color: var(--color-black);
    background-color: var(--color-background);
}
.main-banner .last-order .bottom {
    justify-content: space-between;
    margin-top: var(--size-tiny);
}
.main-banner .last-order .quantity {
    font-size: var(--font-small);
    color: var(--color-deep-gray);
}
.main-banner .last-order .amount {
    font-family: var(--font-bolder);
}
/* main link */
.main-link {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-larger) 0px;
    text-align: center;
}
.main-link .arrow {
    height: var(--size-medium);
}
.main-link .arrow img {
    width: auto;
    height: 100%;
}
.main-link .circle-link .image {
    width: calc(2 * var(--size-large));
    height: calc(2 * var(--size-large));
    border-radius: 50%;
    background-color: var(--color-background);
}
.main-link .circle-link .text {
    margin-top: var(--size-smallest);
    font-family: var(--font-bold);
}
/* product list */
.product-list .image {
    width: 100%;
    height: calc(2 * var(--size-calc));
    border-radius: var(--size-tiny);
    border: var(--border-default);
}
.product-list .name {
    margin-top: var(--size-smaller);
    font-family: var(--font-bold);
    font-size: var(--font-large);
}
.product-list .sale {
    margin-top: var(--size-smaller);
    line-height: 1;
    font-size: var(--font-small);
    text-decoration: line-through;
    color: var(--color-gray);
}
.product-list .price {
    display: flex;
    flex-flow: row nowrap;
    margin-top: var(--size-tiny);
}
.product-list .percent,
.product-list .amount {
    font-family: var(--font-heavy);
    font-size: var(--font-largest);
}
.product-list .percent {
    margin-right: var(--size-tiny);
    color: var(--color-blue);
}
/* link banner */
.link-banner {
    padding: calc(1.5 * var(--size-largest)) 0px;
}
.link-banner .banner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
.link-banner .banner .image {
    width: 100%;
    height: var(--size-big);
    border-radius: var(--size-tiny);
    background-color: var(--color-background);
}
.link-banner .text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-bold);
    font-size: var(--font-largest);
    transform: translate(-50%, -50%);
}
/* cart wrap */
.cart-wrap {
    position: fixed;
    top: 0px;
    right: calc(-2.4 * var(--size-calc));
    padding: 4vh var(--size-medium);
    width: calc(2.4 * var(--size-calc));
    height: 100%;
    background-color: var(--color-background);
    transition: all 0.3s ease;
    z-index: 20;
}
.cart-wrap.expand {
    width: 60%;
}
.cart-wrap .cart-container {
    position: relative;
    width: 100%;
}
.cart-wrap .title-zone {
    margin-bottom: var(--size-smaller);
}
.cart-wrap .expand-button {
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: fixed;
    top: 50%;
    right: 0px;
    padding-left: var(--size-smallest);
    width: var(--size-large);
    height: var(--size-large);
    font-size: var(--font-bigger);
    border-top-left-radius: var(--size-large);
    border-bottom-left-radius: var(--size-large);
    background-color: var(--color-background);
    transition: all 0.3s ease;
}
.cart-wrap.expand .expand-button {
    right: calc(60% - (2.4 * var(--size-calc)));
}
.cart-wrap .buttons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: var(--size-smallest);
}
.cart-wrap.expand .buttons {
    justify-content: flex-end;
    margin-top: var(--size-small);
}
.cart-wrap .button-full {
    display: flex;
}
.cart-wrap .button-inline {
    display: none;
}
.cart-wrap.expand .button-full {
    display: none;
}
.cart-wrap.expand .button-inline {
    display: flex;
}
.cart-item-list {
    padding: var(--size-small) 0px;
    border-top: var(--border-black);
    border-bottom: var(--border-black);
}
.cart-item-list .list-zone > li {
    margin-top: var(--size-smaller);
    padding-top: var(--size-smaller);
    border-top: var(--border-default);
}
.cart-item-list .list-zone > li:first-child {
    margin-top: 0px;
    padding-top: 0px;
    border-top: 0px;
}
.cart-item-list.expand .list-zone > li,
.cart-item-list.expand .list-zone > li:first-child {
    margin-top: calc(var(--size-smaller));
    padding-top: 0px;
    border-top: 0px;
}
.cart-item-total {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--size-smaller);
}
.cart-item-total.expand {
    justify-content: flex-end;
}
.cart-item-total .total-count {
    line-height: 1;
    font-size: var(--font-smaller);
}
.cart-item-total.expand .total-count {
    margin-right: var(--size-small);
}
.cart-item-total .total-amount {
    font-family: var(--font-heavy);
    font-size: var(--font-larger);
}
.cart-item {
    display: flex;
    flex-flow: row nowrap;
}
.cart-item .image {
    display: none;
    flex-shrink: 0;
    margin-right: var(--size-smallest);
    width: var(--size-largest);
    height: var(--size-largest);
    border-radius: var(--size-tiny);
    background-color: var(--color-gray);
}
.cart-item.expand .image {
    display: block;
}
.cart-item .top,
.cart-item .bottom {
    display: flex;
    flex-flow: row nowrap;
}
.cart-item.expand .top {
    margin-top: calc(2 * var(--size-micro));
}
.cart-item .name {
    flex-grow: 1;
    font-size: var(--font-small);
    word-break: keep-all;
}
.cart-item .delete {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: baseline;
    margin-left: var(--size-smallest);
    width: var(--size-small);
    height: var(--size-small);
    font-size: var(--font-smaller);
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-gray);
}
.cart-item .bottom {
    justify-content: space-between;
    margin-top: var(--size-tiny);
}
.cart-item .input-box {
    align-self: center;
}
.cart-item .input-box input {
    padding: var(--size-tiny) var(--size-smallest) var(--size-tiny);
    max-width: var(--size-calc);
    line-height: 1;
    font-size: var(--font-smaller);
    border-radius: calc(2 * var(--size-micro));
}
.cart-item .amount {
    align-self: center;
    font-family: var(--font-bolder);
}