@charset "utf-8";

:root {
    --article_thumbnail_size_x: 740;/* 横の長さ */
    --article_thumbnail_size_y: 440;/* 縦の長さ */

    --main_color: #E60012;
    --sub_color: #EE87B4;
    --back_color: #FADCE9;
    --role_over_color: #FCEBF3;
    --green_color: #7ac943;
    --orange_color: #f7931e;
    --blue_color: #1846ba;
    --font_base_color: #3a3a3a;

    --sp_mediaQuery: 375px;
    --tb_mediaQuery: 768px;

    /* 基準値：375 */
    --vw_SP4px: 1.06vw;
    --vw_SP8px: 2.13vw;
    --vw_SP12px: 3.2vw;
    --vw_SP14px: 3.7vw;
    --vw_SP16px: 4.26vw;
    --vw_SP18px: 4.8vw;
    --vw_SP24px: 6.4vw;
    --vw_SP32px: 8.5vw;
    --vw_SP40px: 10.6vw;
    --vw_SP48px: 12.8vw;
    --vw_SP56px: 14.9vw;

    /* 基準値：1920 */
    --vw_PC8px: 0.416vw;
    --vw_PC12px: 0.625vw;
    --vw_PC16px: 0.83vw;
    --vw_PC24px: 1.25vw;
    --vw_PC32px: 1.66vw;
    --vw_PC48px: 2.5vw;
    --vw_PC56px: 2.91vw;
    --vw_PC64px: 3.33vw;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@font-face {
    font-family: 'NotoSansJP';
    src: url(../images/font/NotoSansJP-VariableFont_wght.ttf) format("truetype");
    font-display: swap;
}

body {
    font-family: "NotoSansJP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--font_base_color);
}

a {
    color: #3a3a3a;
}

/* =============================== */
/* base */
/* =============================== */
.b__content__link:hover {
    text-decoration: none;
}

/* =============================== */
/* layout */
/* =============================== */
.lp__section {
    background: var(--back_color);
    padding-top: min(var(--vw_SPpx), 48px);
}

.lp__article__wrapper {
    padding: 0px;
    padding-bottom: min(var(--vw_SP48px), 96px);
}

.component__section {
    margin-bottom: min(var(--vw_SP40px), 80px);
    padding-top: min(var(--vw_SP16px), 32px)
}

.aside__wrap {
    display: none;
}

/* =============================== */
/* component */
/* =============================== */
.component__sidePadding {
    padding-left: 24px;
    padding-right: 24px;
}

.component__lead {
    text-align: center;
    font-size: min(var(--vw_SP16px), 28px);
    font-weight: 600;
    line-height: 1.7;
}

.component__sup {
    vertical-align: super;
    font-size: 0.5em;
}

.component__container {
    container-type: inline-size;
}

.component__section__head__group:not(.component__section__head__group--nomargin) {
    margin-bottom: min(var(--vw_SP24px), 48px);
}

.component__section__head {
    margin-bottom: 0;
}

.component__section__head:not(.block__timeline__head--nomargin):has(+.component__lead__group) {
    margin-bottom: min(var(--vw_SP8px), 16px);
}

.component__center {
    position: relative;
}

.component__center__child {
    display: block;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
}

.component__hover__back {
    transition: 0.4s;
}

.component__hover__back:hover {
    cursor: pointer;
    background-color: var(--role_over_color)
}

.component__tab__buttons {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: min(9.37vw, 72px);
}

.component__tab__buttons__item__tabName {
    display: block;
    padding-top: min(var(--vw_SP12px), 24px);
    padding-bottom: min(var(--vw_SP12px), 24px);
    width: min(31.25vw, 240px);
    transition: 0.4s;
}

.component__tab__buttons__item__tabName:hover {
    cursor: pointer;
    filter: brightness(1.1);
}

.component__tab__buttons__item__tabName:not(.is-show) {
    padding-top: min(var(--vw_SP8px), 16px);
    padding-bottom: min(var(--vw_SP8px), 16px);
}

.component__tab__buttons__item__tabName.component__tab__buttons__item__tabName--red {
    background-color: var(--main_color);
}

.component__tab__buttons__item__tabName.component__tab__buttons__item__tabName--blue {
    background-color: var(--blue_color);
}

.component__tab__buttons__item__tabName.component__tab__buttons__item__tabName--orange {
    background-color: var(--orange_color);
}

.component__tab__buttons__item__tabName.component__tab__buttons__item__tabName--green {
    background-color: var(--green_color);
}

.component__tab__buttons__item__tabName__text {
    display: block;
    height: clamp(8px, 3.7vw, 26px);
    margin: 0 auto;
}

.component__tab__buttons__item__tabName:not(.is-show) .component__tab__buttons__item__tabName__text {
    opacity: 0.5;
}

.component__tab__body {
    background: #F6FAF1;
    width: 95%;
    margin-left: auto;
    position: relative;
    padding-right: min(var(--vw_SP12px), 24px);
}

.component__tab__body:before {
    content: "";
    display: block;
    background: url(../images/cosme_item-contents-back.svg);
    height: 100%;
    width: 5%;
    position: absolute;
    top: 0;
    left: -5%;
    border-top: solid 16px #F6FAF1;
    border-bottom: solid 8px #F6FAF1;;
}

.component__tab__contents {
    overflow: hidden;
}

.component__tab__contents__group {
    padding-top: min(var(--vw_SP32px), 56px);

    &:not(.is-show) {
        padding-top: 0;

        .component__tab__contents__item, .component__controller {
            position:absolute;
            top:0;
            left: 0;
            opacity: 0;
            display: none;    
        }
    }
}

.component__tab__contents__group.is-show .component__tab__contents__item {
    display: flex;
    animation: forwards tabAnim 0.4s;
}

@keyframes tabAnim {
    0% {
        display: flex;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.component__controller {
    display: flex;
    align-items: center;
}

.component__controller__btn {
    display: block;
    border: none;
    background: none;
    transition: 0.4s;
    border-radius: min(var(--vw_SP8px), 16px);
    width: min(5.72vw, 44px);/*44px*/
    height: min(var(--vw_SP24px), 48px);

    &:not(:disabled):hover {
        cursor: pointer;
        background-color: var(--back_color);
    }

    &:first-of-type {
        margin-right: min(var(--vw_SP12px), 24px);
    }

    &:disabled {
        opacity: 0.5;
    }
}

.component__controller__btn__svg {
    display: block;
    width: min(2.6vw, 20px);/*10px*/
    height: min(var(--vw_SP14px), 28px);
    margin: 0 auto;
}

.component__tab__contents__item__child {
    padding: min(var(--vw_SP32px), 56px);
    padding-bottom: min(var(--vw_SP16px), 24px);
    min-width: 100%;
}

.component__emButton__group {
    margin-right: auto;
    margin-left: auto;
    padding: max(var(--vw_SP8px), 8px);
    max-width: 538px;
    background-image: url("../images/button_2.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

.component__emButton__group:not(.component__emButton__group--full) {
    width: 80%;
}

.component__emButton__group.component__emButton__group--pink {
    background-image: url("../images/button_1.svg");
}

.component__emButton__group.component__emButton__group--pinkAndRed {
    background-image: url("../images/button_3.svg");
}

.component__emButton__group.component__emButton__group--whiteAndRed {
    background-image: url("../images/button_4.svg");
}

.component__emButton__group.component__emButton__group--full {
    width: 100%;
}

.component__emButton {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: var(--vw_SP8px);
    padding-bottom: var(--vw_SP8px);
    background-color: var(--main_color);
    border: solid 1px #fff;
    line-height: 1;
    opacity: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.component__emButton--commingSoon {
    cursor: default;
}

.component__emButton::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.component__emButton:hover::before {
    animation: kiran 0.8s ease-in;
}

@keyframes kiran {
    0% {
      transform: scale(2) rotate(45deg);
      opacity: 0;
    }
    20% {
      transform: scale(20) rotate(45deg);
      opacity: 0.6;
    }
    40% {
      transform: scale(30) rotate(45deg);
      opacity: 0.4;
    }
    80% {
      transform: scale(45) rotate(45deg);
      opacity: 0.2;
    }
    100% {
      transform: scale(50) rotate(45deg);
      opacity: 0;
    }
}


.component__emButton.component__emButton--pink {
    background-color: var(--sub_color);
}

.component__emButton__svg {
    display: inline-block;
    height: clamp(14px, var(--vw_SP14px), 30px);
}

.component__careBearBanner {
    padding-top: calc((860 / 1300) * 100%);
}

.component__campaignBanner:not(.component__campaignBanner--height440) {
    padding-top: calc((440 / 740) * 100%);
}

.component__campaignBanner--height440 {
    padding-top: calc((440 / 740) * 100%);
}

.component__articleThumbnail {
    padding-top: calc((var(--article_thumbnail_size_y) / var(--article_thumbnail_size_x)) * 100%);
}

.component__comingsoon {
    padding-top: calc((260 / 346) * 100%);
}

.component__rollOver {
    transition: 0.4s;
}

.component__rollOver--pink:hover {
    background-color: var(--role_over_color);
}

.component__mark {
    font-weight: bold;
    color: var(--main_color);
    display: inline-block;
    position: relative;
    line-height: 1;
}

.component__mark::after {
    content: "";
    position: relative;
    bottom: 0.4em;
    display: block;
    height: 0.4em;
    background: #ffe100;
    z-index: 1;
}

.component__mark__group {
    position: relative;
    z-index: 2;
    font-style: normal;
}

.component__mark__group--sizeup {
    font-size: 1.14em;
}

.component__mark__big {
    font-size: 1.3em;
}

.component__mark__small {
    font-size: 0.9em;
    font-weight: normal;
}

.component__shake.component__center__child {
    animation: shakeWithCenterTransform 37s ease-in-out infinite;
}

.component__shrinking.component__center__child {
    animation: shrinkingWithCenterTransform 37s ease-in-out infinite;
}

.component__flip.component__center__child {
    animation: flip 37s ease-in-out infinite;
}

@keyframes shakeWithCenterTransform {
    0%,
    0.38% {transform: translate(calc(-50% + 3px), -50%);}
    0.565% {transform: translate(-50%, -50%);}
    0.847% {transform: translate(calc(-50% + 3px), -50%);}
    1.13% {transform: translate(-50%, -50%);}
    100% {transform: translate(-50%, -50%);}
}

@keyframes shrinkingWithCenterTransform {
    /* 0%, 40%, 60%, 80% {transform: scale(1.0) translate(-50%, -50%);}
    50%, 70% {transform: scale(0.95) translate(-50%, -50%);} */
    0% {
        transform: scale(1.0)translate(-50%,-50%);
      }
      2.162% {
        transform: scale(1.0)translate(-50%,-50%);
      }
      2.703% {
        transform: scale(0.95)translate(-50%,-50%);
      }
      3.243% {
        transform: scale(1.0)translate(-50%,-50%);
      }
      3.784% {
        transform: scale(0.95)translate(-50%,-50%);
      }
      4.324% {
        transform: scale(1.0)translate(-50%,-50%);
      }
      100% {
        transform: scale(1.0)translate(-50%,-50%);
      }
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    4.11% {
    transform: rotateY(360deg);
    }
    100% {
    transform: rotateY(360deg);
    }
}

.component__sectionAnnotation {
    margin-top: min(var(--vw_SP12px), 24px);
    padding-right: min(var(--vw_SP8px), 16px);
    padding-left: 2em;
    text-indent: -1em;
    font-size: min(var(--vw_SP16px), 28px);
}

.component__sectionAnnotation__text {
    font-size: 0.8em;
    font-weight: normal;
    display: inline-block;
}

.component__sectionAnnotation__text--topMargin {
    margin-top: 1em;
}

.component__annotation {
    display: block;
    margin-top: 0.8em;
    font-size: max(10px, 0.7em);
}

.component__nowrap {
    white-space: nowrap;
}

.component__inlineBlock {
    display: inline-block;
}

/*===== scroll hint =====*/
.scroll-hint-icon-wrap {
    z-index: 2;
}

.scroll-hint-icon-wrap.is-active {
    animation: forwards scrollHintIconOpacity 4s;
}

@keyframes scrollHintIconOpacity {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.scroll-hint-icon {
    transform: scale(1.5);
    top: calc(50% - 50px);
    height: 120px;
    background: var(--main_color);
    padding-top: 32px;
}

.scroll-hint-icon::before {
    background-image: url(../images/scroll-hint-icon-hand.svg);
    width: 72px;
    height: 72px;
}

.scroll-hint-icon::after {
    background-image: url(../images/scroll-hint-icon-arrow.svg); 
    width: 64px;
    height: 56px;
    left: calc(50% - 16px);
    top: 20px;
}

.scroll-hint-text {
    display: none;
}

/* =============================== */
/* block */
/* =============================== */
.block__brandNewCosmetics__head {
    padding-top: min(calc((237 / 720) * 100%), 237px);
}

.block__newCosmeItems__head {
    padding-top: min(calc((230 / 720) * 100%), 230px);
}

.block__feature__head {
    padding-top: min(calc((230 / 720) * 100%), 230px);
}

.block__timeline__head {
    padding-top: min(calc((168 / 720) * 100%), 168px);
}

.block__onlineStore__head {
    padding-top: min(calc((230 / 720) * 100%), 230px);
}

.block__campaign__head {
    padding-top: min(calc((175 / 720) * 100%), 175px);
}

.block__campaign__lead {
    padding-right: 0;
    text-align: center;
}

.block__kv__head {
    margin-bottom: 0;
    padding-top: min(calc((768 / 768) * 100%), 768px);
}

.block__kv__lead {
    border: solid var(--main_color) 1px;
    background: url(../images/header-title-back.png) no-repeat, linear-gradient(0deg, rgba(255, 238, 237, 0.5), rgba(248, 174, 211, 0.5) 20%);
    background-size: 100% 100%, cover, cover;
    padding: min(var(--vw_SP24px), 48px);
}

.block__kv__lead__box {
    background-color: var(--back_color);
    background-image:
        url(../images/border-left-top-col.svg),
        url(../images/border-right-bottom-col.svg),
        url(../images/border-right-top-row.svg),
        url(../images/border-left-bottom-row.svg),
        url(../images/border-row-repeat.svg),
        url(../images/border-col-repeat.svg),
        url(../images/border-row-repeat.svg),
        url(../images/border-col-repeat.svg);
    background-size:
    7px 81px,
    6px 79px,
    68px 8px,
    62px 6px,
    4px 8px,
    7px 1px,
    4px 8px,
    6px 1px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y;
    background-position:
    0 -5px,
    100% calc(100% + 10px),
    100% 0,
    0 100%,
    0 0,
    0 0,
    0 calc(100% + 1px),
    100% 100%;
}

.block__kv__lead__group {
    padding: min(var(--vw_SP32px), 64px) min(var(--vw_SP24px), 48px);
    margin-bottom: min(var(--vw_SP24px), 48px);
}

.block__kv__lead__img,
.aside__brandNewCosme__title__img:not(.component__careBearBanner) {
    padding-top: min(calc((300 / 538) * 100%), 300px);
}

.block__kv__lead__text__content {
    font-size: min(var(--vw_SP12px), 24px);
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.block__kv__lead__anchors__item {
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__brandNewCosmetics__banner {
    margin-bottom: min(var(--vw_SP16px), 32px);
    display: block;
}

.block__brandNewCosmetics__button {
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__brandNewCosmetics__btn {
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__newCosmeItems__product {

    .component__controller {
        position: absolute;
        z-index: 2;
        transform: translateY(-50%);
        right: 4%;
    }

    .component__controller__btn {
        width: min(6.66vw, 50px);
        height: min(6.66vw, 50px);
        border: solid 1px var(--main_color);
        border-radius: 0;
    }

    .component__controller__btn__arrow {
        width: min(3vw, 30px);
        height: min(4vw, 30px);
    }
}

.block__newCosmeItems__product__image {
    padding-top: min(calc((385 / 539) * 100%), 385px);
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__newCosmeItems__product__image::before {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -12%;
    left: -8%;
    z-index: 1;
}

.block__newCosmeItems__product__image.block__newCosmeItems__product__image--limited::before {
    width: min(32.9vw, 253px);/*253px*/
    height: min(13.54vw, 104px);/*104px*/
    background-image: url(../images/2x/cosme_item-item-1@2x.png);
}

@keyframes productMarkAnim {
    0% {opacity: 1}
    15% {opacity: 1;}
    30% {opacity: 0;}
    60% {opacity: 0;}
    75% {opacity: 1;}
    100% {opacity: 1;}
}

.block__newCosmeItems__product__image.block__newCosmeItems__product__image--pre::before {
    width: min(29.42vw, 226px);/*226px*/
    height: min(17vw, 131px);/*131px*/
    background-image: url(../images/2x/cosme_item-item-2@2x.png);
}

.block__newCosmeItems__product__image img {
    width: auto;
    max-height: 385px;
}

.block__newCosmeItems__product__information {
    font-size: min(var(--vw_SP16px), 32px);
    margin-bottom: min(var(--vw_SP16px), 32px);
    padding-bottom: min(var(--vw_SP40px), 80px);
}

.block__newCosmeItems__product__information__date {
    border: solid var(--main_color) 1px;
    background: #fff;
    font-weight: bold;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    margin-bottom: min(var(--vw_SP8px), 16px);
}

.block__newCosmeItems__product__information__date__year {
    font-size: 0.9em;
    padding-left: min(var(--vw_SP8px), 16px);
    display: inline-flex;
    align-items: center;
}

.block__newCosmeItems__product__information__date__month {
    padding-right: min(var(--vw_SP8px), 16px);
    font-size: 1.1em;
    display: inline-flex;
    align-items: center;
}

.block__newCosmeItems__product__information__date__saleStart {
    background: var(--main_color);
    color: #fff;
    display: flex;
    align-items: center;
    padding: min(var(--vw_SP8px), 16px);
    text-align: center;
}

.block__newCosmeItems__product__information__title {
    font-weight: bold;
}


.block__newCosmeItems__product__information__text {
    font-size: 0.9em;
}

.block__newCosmeItems__product__information__text.block__newCosmeItems__product__information__text--small {
    font-size: 0.8em;
}

.block__newCosmeItems__product__information__price__group {
    text-align: center;
}

.block__newCosmeItems__product__information__price {
    margin: min(var(--vw_SP8px), 16px) auto 0;
    line-height: 1;
}

.block__newCosmeItems__product__information__price.component__mark {
    color: var(--font_base_color);
}

.block__newCosmeItems__product__information__price.component__mark::after {
    bottom: 0.3em;
}

.block__newCosmeItems__product__checkButton {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.block__newCosmeItems__product__gotoNextArea {
    padding: min(var(--vw_SP12px), 24px) 0 min(18vw, 108px);/*108px*/
}

.block__newCosmeItems__product__gotoNextArea__link {
    text-align: center;
    font-weight: bold;
    font-size: min(var(--vw_SP14px), 28px);
    position: relative;
    display: block;
}

.block__newCosmeItems__product__gotoNextArea__link::after {
    content: "";
    display: block;
    border-right: 4px var(--main_color) solid;
    border-bottom: 4px var(--main_color) solid;
    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    top: calc(1em + 12px);
    left: 50%;
    width: 1em;
    height: 1em;
}

.block__newCosmeItems__product__gotoNextArea__link:hover {
    text-decoration: none;
}

.block__newCosmeItems__allItems__linkButton {
    margin-top: 24px;
    margin-bottom: 48px;
}

.block__feature__article {
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__feature__article__link {
    display: block;
}

.block__feature__doubleItem--full {
    margin-bottom: min(var(--vw_SP16px, 16px))
}

.block__feature__doubleItem {
    opacity: 0.7;
}

.block__feature__doubleItem:not(.block__feature__doubleItem--full) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(var(--vw_SP16px, 16px));
}

.block__feature__doubleItem__comingsoon {
    width: 100%;
    height: 100%;
}

.block__onlineStore__banner {
    display: block;
}

.block__campaign__banner {
    display: block;
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__campaign__doubleItem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    opacity: 0.7;
    margin-bottom: min(var(--vw_SP16px), 32px);
}

.block__campaign__doubleItem__comingsoon {
    width: 100%;
    height: 100%;
}

.block__campaign__banner__link {
    display: block;
}

.block__timeline__calendar {
    border: solid var(--main_color) 1px;
    background: rgba(255,255,255, 0.5);
    overflow-x: hidden;
    position: relative;
}

.block__timeline__calendar__month:not(.calendarSample) {
    padding: min(var(--vw_SP12px), 24px);
}

.block__timeline__calendar__month__head,
.block__timeline__calendar__month__left {
    font-weight: bold;
    color: var(--main_color);
}

.b__content__inner__price {
    font-weight: bold;
}

.block__timeline__calendar__month__head {
    background-color: #fff;
    border: solid var(--main_color) 1px;
    display: flex;
    align-items: center;
    padding: min(var(--vw_SP8px), 16px) min(var(--vw_SP24px), 48px);
    justify-content: space-between;
}

.block__timeline__calendar__month__head
 {
    position: sticky;
    top: 0;
    z-index: 1;
}

.block__timeline__calendar__month__head.calendarSample {
    border-top: none;
}

.block__timeline__calendar__month__head__monthData {
    display: flex;
    align-items: center;
}

.block__timeline__calendar__month__head__monthNumber {
    font-size: min(var(--vw_SP32px), 64px);
    line-height: 1;
    margin-right: min(var(--vw_SP24px), 48px);
    margin-bottom: 0;
}

.block__timeline__calendar__month__head__monthName {
    font-size: min(var(--vw_SP18px), 36px);
    line-height: 1;
    margin-bottom: min(var(--vw_SP4px), 8px);
}

.block__timeline__calendar__month__head__year {
    font-size: min(var(--vw_SP12px), 24px);
    line-height: 1;
}

.b__year__gengou {
    font-weight: normal;
}

.block__timeline__calendar__month__body {
    display: flex;
}

.block__timeline__calendar__month__body:last-of-type {
    border-bottom: none;
}

.block__timeline__calendar__month__left {
    border: solid var(--main_color) 1px;
    border-top: none;
    padding: min(var(--vw_SP24px), 48px) min(var(--vw_SP12px), 24px) 0;
    text-align: center;
    background-color: #fff;
}

.b__left__day {
    margin-bottom: min(var(--vw_SP8px), 16px);
    font-size: min(var(--vw_SP32px), 64px);
    line-height: 1;
}

.b__left__week {
    font-size: min(var(--vw_SP12px), 24px);
    line-height: 1;
}

.block__timeline__calendar__month__right {
    width: 100%;
    border-right: solid var(--main_color) 1px;
}

.block__timeline__calendar__month__right__content {
    border-bottom: dashed var(--main_color) 1px;
    background-color: #fff;
}

.block__timeline__calendar__month__right__content:last-of-type{
    border-bottom: solid var(--main_color) 1px;
}

.b__content__link {
    display: flex;
    align-items: flex-start;
    padding: min(var(--vw_SP12px), 24px);
    padding-bottom: min(var(--vw_SP16px), 32px);
}

.b__content__link:not(.b__content__link--hasButton) {
    padding-right: 0;
}

.b__content__link.b__content__link--hasButton {
    background-color: var(--role_over_color);
}

.b__content__mark {
    font-size: min(var(--vw_SP14px), 28px);
    color: #fff;
    display: inline-block;
    padding: min(var(--vw_SP12px), 12px) min(var(--vw_SP4px), 8px) min(var(--vw_SP8px), 8px);
    width: min(13.8vw, 104px);/*52px*/
    text-align: center;
    font-weight: bold;
}

.b__content__mark:not(.b__content__mark--image) {
    background: var(--green_color);
}

.b__content__mark.b__content__mark--pre:not(.b__content__mark--image) {
    background: var(--orange_color);
}

.b__content__mark.b__content__mark--limited:not(.b__content__mark--image) {
    background: var(--blue_color);
}

.b__content__mark img {
    width: 10.41vw;
    height: 7.94vw;
}

.b__content__inner__title {
    font-weight: bold;
}

.b__content__inner {
    width: 100%;
    padding-left: min(var(--vw_SP12px), 24px);
    font-size: min(var(--vw_SP14px), 28px);
}

.b__content__inner__text {
    margin-bottom: 8px;
    padding-right: 1em;
}

.b__content__inner__text.b__content__inner__text--small {
    font-size: 0.9em;
}

.b__content__inner__price__eyecatch {
    border: solid var(--main_color) 1px;
    padding: 0 min(var(--vw_SP12px), 24px);
    line-height: 1;
    margin-right: 8px;
    font-size: 0.8em;
    color: var(--main_color);
}

.b__content__inner__price__small {
    font-weight: normal;
    font-size: 0.8em;
}

.b__content__inner__button {
    margin-top: min(var(--vw_SP12px), 24px)
}

.b__content__hasPlazaPassMark {
    position: relative;
}

.b__content__hasPlazaPassMark__imgBox {
    position: absolute;
    top: 0;
    right: 0;
    margin: max(-3.2vw, -24px) max(-3.2vw, -24px) 0 0;/*-12px*/
}

.b__content__hasPlazaPassMark__imgBox img {
    display: block;
    width: min(17vw, 130px);
    height: min(17vw, 130px);
}

.b__content__hasPlazaPassMark__text {
    color: var(--main_color);
    font-size: min(var(--vw_SP18px), 36px);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: min(var(--vw_SP8px), 16px);
}

.b__content__hasPlazaPassMark__text__upText {
    display: block;
    padding-left: 1.5em;
}

.b__content__hasPlazaPassMark__text__em {
    font-size: min(var(--vw_SP16px), 32px);
    display: inline-block;
    
}

.b__content__hasPlazaPassMark__text__em::before,
.b__content__hasPlazaPassMark__text__em::after {
    content: "";
    display: inline-block;
    height: 1em;
    width: 1px;
}

.b__content__hasPlazaPassMark__text__em::before {
    border-right:  solid 1px currentColor;
    transform: rotate(-45deg);
    margin-right: min(var(--vw_SP12px), 24px);
}

.b__content__hasPlazaPassMark__text__em::after {
    border-left:  solid 1px currentColor;
    transform: rotate(45deg);
    margin-left: min(var(--vw_SP8px), 16px);
}

.component__notScrollBar {
    height: fit-content;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.component__notScrollBar::-webkit-scrollbar{
    display: none;
}

.component__hoverAnimation {
    transition: 0.4s;
}

.component__hoverAnimation:hover {
    opacity: 0.5;
}

/* swiper */
.block__timeline__calendar__month__slideInnerGroup {
    overflow-y: auto;
    max-height: 74vh;
    height: fit-content;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.block__timeline__calendar__month__slideInnerGroup::-webkit-scrollbar{
    display: none;
}

.block__timeline__calendar__group {
    height: auto;
}

.util__campaign__lead__topMargin {
    margin-top: min(var(--vw_SP24px), 48px);
}
/* =============================== */
/* block レスポンシブ */
/* =============================== */
@media screen and (min-width: 768px) {
    .lp__section__wrapper {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .lp__article__wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 768px;
    }

    .component__emButton__group {
        padding: 12px;
    }

    .component__emButton {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .component__emButton__svg {
        height: 30px;
    }

    .component__section__head__group:not(.component__section__head__group--nomargin) {
        margin-bottom: 48px;
    }

    .component__controller__btn {
        width: 44px;
        height: 48px;
    }

    .component__controller__btn:first-of-type {
        margin-right: 8px;
    }

    .component__controller__btn__svg {
        display: block;
        width: 20px;
        height: 28px;
    }

    .block__kv__head {
        padding-top: 768px;
    }

    .b__content__inner__button__item {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .b__content__inner__button__item__svg {
        height: 24px;
    }

    .block__feature__doubleItem:not(.block__feature__doubleItem--full) {
        gap: 32px;
    }

    .block__feature__doubleItem--full {
        margin-bottom: 32px;
    }
}

@media screen and (min-width: 1024px) {
    /*
        --vw_PC10px: 0.52vw
    */
    .aside__wrap {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1;
        pointer-events:none;
    }

    .lp__section {
        margin-top: -100vh;
    }
    
    .lp__section__wrapper {
        width: 40%;
    }

    .lp__article__wrapper {
        width: 100%;
    }
    
    .block__brandNewCosmetics__button .component__emButton {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .component__emButton__group {
        padding: min(0.625vw, 12px);/*12px*/
    }

    .component__emButton__svg {
        height: min(1.56vw, 30px);/*30px*/
    }

    .component__tab__contents__group {
        padding-top: min(var(--vw_PC56px), 56px);
    
        &:not(.is-show) {
            padding-top: 0;
        }
    }

    .component__tab__buttons__item__tabName {
        width: min(12.5vw, 240px);
    }

    .component__tab__buttons__item__tabName__text {
        height: clamp(8px, 1.35vw, 26px);
    }

    .component__tab__contents__item__child {
        padding-top: min(var(--vw_PC56px), 56px);
    }

    .component__lead {
        font-size: min(1.46vw, 28px);
    }

    .component__sectionAnnotation {
        padding-right: min(var(--vw_PC12px), 12px);
        font-size: min(1.46vw, 28px);
    }

    .aside__itemObjects,
    .aside__brandNewCosme,
    .aside__pcOnlySubMenu {
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
    }

    .aside__brandNewCosme {
        bottom: auto;
        pointer-events: all;
    }

    .aside__itemObjects__box,
    .aside__brandNewCosme__box,
    .aside__pcOnlySubMenu__box {
        width: calc(30% + 1px);/*576px;*/
        max-width: 577px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .aside__itemObjects__box {
        border: 1px var(--main_color) solid;
        border-bottom: none;
    }

    .aside__brandNewCosme__box {
        bottom: auto;
        top: 48px;
    }

    @container asideUp (max-height: 650px) {
        .aside__itemObjects__box {
            display: none;
        }
    }

    .aside__brandNewCosme__group {
        padding-left: min(4.55vw, 87.5px);/*87.5px*/
        padding-right: min(4.55vw, 87.5px);/*87.5px*/
    }

    .aside__brandNewCosme__title__img:first-child {
        margin-bottom: min(var(--vw_PC48px), 48px);
    }

    .aside__brandNewCosme__title__img:nth-child(2) {
        display: block;
    }

    .aside__brandNewCosme__title__img {
        margin-bottom: min(var(--vw_PC32px), 32px);
    }

    .aside__pcOnlySubMenu__box {
        bottom: auto;
        top: 48px;
        left: auto;
        right: 0;
        padding-left: min(2.73vw, 52.5px);/*52.5px*/
        padding-right: min(2.73vw, 52.5px);/*52.5px*/
    }

    .aside__pcOnlySubMenu__group {
        background: url(../images/aside-anchorMenu.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: min(24.47vw, 470px);/*470px;*/
        height: min(34.89vw, 670px);/*670px;*/
    }

    .aside__pcOnlySubMenu__list {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
    }

    .aside__pcOnlySubMenu__list__item {
        margin-bottom: min(var(--vw_PC8px), 8px);
    }

    .aside__pcOnlySubMenu__list__item__link {
        display: block;
        border-bottom: solid var(--main_color) 1px;
        padding-top: min(var(--vw_PC8px), 8px);
        padding-bottom: min(var(--vw_PC8px), 8px);
        text-align: center;
        line-height: 1;
    }

    .aside__pcOnlySubMenu__list__item__link.component__hover__back:hover {
        border-bottom: solid var(--sub_color) 1px;
    }

    .aside__pcOnlySubMenu__List__item__link__svg {
        display: inline-block;
        height: min(1.14vw, 22px);/*22px*/
        transition: 0.4s;
        color: var(--main_color);
    }

    .aside__pcOnlySubMenu__list__item__link.component__hover__back:hover .aside__pcOnlySubMenu__List__item__link__svg {
        color: var(--sub_color);
    }

    .aside__pcOnlySubMenu__list__item__inner {
        margin-top: min(var(--vw_PC16px), 16px);
    }

    .a__link__text {
        padding-top: min(var(--vw_PC8px), 8px);
        padding-bottom: min(var(--vw_PC8px), 8px);
    }

    .a__link__text {
        display: block;
        line-height: 1;
        text-indent: 26%;
    }

    .a__link__text::before {
        content: "";
        display: inline-block;
        border: solid min(var(--vw_PC8px), 8px) transparent;
    }

    .a__link__text.a__link__text--all::before {
        border-left: solid min(var(--vw_PC12px), 12px) var(--main_color);
    }

    .a__link__text.a__link__text--limited::before {
        border-left: solid min(var(--vw_PC12px), 12px) var(--blue_color);
    }

    .a__link__text.a__link__text--pre::before {
        border-left: solid min(var(--vw_PC12px), 12px) var(--orange_color);
    }

    .a__link__text.a__link__text--new::before {
        border-left: solid min(var(--vw_PC12px), 12px) var(--green_color);
    }

    .a__link__svg {
        display: inline-block;
        height: min(1.14vw, 22px);/*22px*/
    }

    .a__link__svg--all {
        color: var(--main_color);
    }

    .a__link__svg--limited {
        color: var(--blue_color);
    }

    .a__link__svg--pre {
        color: var(--orange_color);
    }

    .a__link__svg--new {
        color: var(--green_color);
    }

    .a__link__text.component__hover__back:hover .a__link__svg {
        color: var(--sub_color);
    }
    
    .a__link__text.component__hover__back:hover::before {
        border-left-color: var(--sub_color);
    }

    .aside__itemObjects__box.aside__itemObjects__box--right {
        border-right: 1px var(--main_color) solid;
        border-left: 1px var(--main_color) solid;
        right: 0;
        left: auto;
    }

    .aside__itemObjects__group {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        border-bottom: 1px var(--main_color) solid;
    }

    .aside__itemObjects__item {
        width: min(5.99vw, 115px);
        height: min(5.99vw, 115px);
    }

    .aside__itemObjects__item.aside__itemObjects__item--leftMargin {
        margin-left: min(5.94vw, 114px);
    }

    .aside__itemObjects__item.aside__itemObjects__item--rightMargin {
        margin-right: min(5.94vw, 114px);
    }

    .aside__itemObjects__item.aside__itemObjects__item--doubleMargin {
        margin-right: min(5.88vw, 113px);
        margin-left: min(5.88vw, 113px);
    }

    .aside__itemObjects__item.aside__itemObjects__item--leftBorder {
        border-left: 1px var(--main_color) solid;
    }

    .aside__itemObjects__item.aside__itemObjects__item--rightBorder {
        border-right: 1px var(--main_color) solid;
    }

    .aside__itemObjects__item.aside__itemObjects__item--doubleBorder {
        border-right: 1px var(--main_color) solid;
        border-left: 1px var(--main_color) solid;
    }

    .aside__itemObjects__item__group {
        width: min(4.947vw, 95px);
        height: min(4.947vw, 95px);
    }

    .aside__itemObjects__item__group.component__flip {
        top: 0.5vw;
        left: 0.5vw;
        transform: none;
    }

    .aside__itemObjects__item__group.aside__itemObjects__item__group--anim--2 {
        animation-delay: 7s;
        
        
    }

    .aside__itemObjects__item__group.aside__itemObjects__item__group--anim--3 {
        animation-delay: 14s;
        
    }

    .aside__itemObjects__item__group.aside__itemObjects__item__group--anim--4 {
        animation-delay: 21s;
        
    }

    .aside__itemObjects__item__group.aside__itemObjects__item__group--anim--5 {
        animation-delay: 28s;
        
    }

    .aside__itemObjects__item__svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .block__kv__lead__text__content {
        font-size: min(1.15vw, 25px);
        white-space: nowrap;
    }

    .block__kv__lead__group {
        padding: min(var(--vw_PC64px), 64px) min(2vw, 48px);
        margin-bottom: min(var(--vw_PC48px), 48px);
    }

    .block__kv__head {
        padding-top: min(40vw, 768px);/*768px*/
    }

    .block__newCosmeItems__product__image::before {
        left: -8%;
        transform: scale(1.4);
        transform-origin: top left;
    }

    .block__newCosmeItems__product__image.block__newCosmeItems__product__image--limited::before {
        top: -17%;
        width: min(11.45vw, 220px);/*220px*/
        height: min(4.71vw, 90.4px);/*90.4px*/
    }

    .block__newCosmeItems__product__image.block__newCosmeItems__product__image--pre::before {
        top: -12%;
        width: min(9.375vw, 180px);/*180px*/
        height: min(5.46vw, 104.8);/*104.8px*/
    }

    .block__newCosmeItems__product__information {
        font-size: min(1.66vw, 32px);/*32px*/
        margin-bottom: min(1.66vw, 32px);/*32px*/
    }

    .block__newCosmeItems__product__information__date__year {
        padding-left: min(var(--vw_PC16px), 16px);
    }

    .block__newCosmeItems__product__information__date__month {
        padding-right: min(var(--vw_PC16px), 16px);
    }

    .block__newCosmeItems__product__information__date__saleStart {
        padding: min(var(--vw_PC16px), 16px);
    }

    .block__timeline__calendar__month__head {
        padding: min(var(--vw_PC16px), 16px) min(var(--vw_PC48px), 48px);
    }

    .block__timeline__calendar__month__head__monthNumber {
        font-size: min(var(--vw_PC64px), 64px);
        margin-right: min(var(--vw_PC48px), 48px);
    }

    .block__timeline__calendar__month__head__monthName {
        font-size: min(1.875vw, 36px);/*36px*/
        margin-bottom: min(var(--vw_PC8px), 8px);
    }

    .block__timeline__calendar__month__head__year {
        font-size: min(var(--vw_PC24px), 24px);
    }

    .component__controller__btn {
        width: min(2.29vw, 44px);/*44px*/
        height: min(var(--vw_PC48px), 48px);/*48px*/
    }

    .component__controller__btn:first-of-type {
        margin-right: min(var(--vw_PC8px), 8px);
    }

    .component__controller__btn__svg {
        display: block;
        width: min(1.04vw, 20px);/*20px*/
        height: min(1.46vw, 28px);/*28px*/
    }

    .block__timeline__calendar__month__left {
        padding: min(var(--vw_PC48px), 48px) min(var(--vw_PC24px), 24px) 0;
    }

    .b__left__day {
        margin-bottom: min(var(--vw_PC16px), 16px);
        font-size: min(var(--vw_PC64px), 64px);
    }

    .b__left__week {
        font-size: min(var(--vw_PC24px), 24px);
    }

    .b__content__link {
        padding: min(var(--vw_PC24px), 24px);
        padding-bottom: min(var(--vw_SP16px), 32px);
    }

    .b__content__mark {
        padding: min(var(--vw_PC12px), 12px);
        width: min(5.41vw, 104px);/*104px*/
        margin: min(var(--vw_PC16px), 16px) 0;
        line-height: 1;
    }

    .b__content__mark img {
        height: 3.17vw;
        width: 4.16vw;
    }

    .b__content__inner {
        padding-left: min(var(--vw_PC24px), 24px);
        font-size: min(1.46vw, 28px);/*28px*/
    }

    .b__content__inner__price__eyecatch {
        padding: 0 min(var(--vw_PC24px), 24px);
    }

    .b__content__inner__button {
        margin-top: min(var(--vw_PC24px), 24px)
    }

    .b__content__hasPlazaPassMark__imgBox {
        margin: max(-1.25vw, -24px) max(-1.25vw, -24px) 0 0;/*-24px*/
    }

    .b__content__hasPlazaPassMark__imgBox img {
        width: min(6.77vw, 130px);/*130px*/
        height: min(6.77vw, 130px);/*130px*/
    }

    .b__content__hasPlazaPassMark__text {
        font-size: min(1.875vw, 36px);/*36px*/
        margin-bottom: min(var(--vw_PC16px), 16px);
    }

    .b__content__hasPlazaPassMark__text__em {
        font-size: min(var(--vw_PC32px), 32px);
    }

    .b__content__hasPlazaPassMark__text__em::before {
        margin-right: min(var(--vw_PC24px), 24px);
    }

    .b__content__hasPlazaPassMark__text__em::after {
        margin-left: min(var(--vw_PC16px), 16px);
    }

    .block__newCosmeItems__product {
        .component__controller__btn {
            width: min(2.6vw, 50px);
            height: min(2.6vw, 50px);
        }

        .component__controller__btn__arrow {
            width: min(1.2vw, 30px);
            height: min(1.56vw, 30px);
        }
    }
}

@media screen and (min-width: 1600px) {
    .b__content__mark {
        padding-block: 12px;
    }
}

@media screen and (max-height: 1082px) and (min-aspect-ratio: 847 / 505) {
    .aside__brandNewCosme .component__careBearBanner {
        padding-top: calc((860 / 1300) * 80%);
    }

    .aside__brandNewCosme__title__img:first-child,
    .aside__brandNewCosme__title__img {
        margin-bottom: min(var(--vw_PC16px), 16px);
    }

    .aside__brandNewCosme .aside__brandNewCosme__title__img:not(.component__careBearBanner) {
        padding-top: min(calc((300 / 538) * 80%), 240px);
    }

    .aside__brandNewCosme .aside__brandNewCosme__title__img {
        width: 80%;
        height: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .aside__brandNewCosme .component__emButton__group {
        width: 80%;
    }

    .aside__pcOnlySubMenu__box {
        top: 16px;
    }

    .aside__pcOnlySubMenu__group {
        width: min(24.47vw, 364px);
        height: min(30vw, 477px);
        background-position-x: center;
        margin: 0 auto;
    }

    .aside__pcOnlySubMenu__box {
        padding: 0;
    }

    .aside__pcOnlySubMenu__list__item {
        margin-bottom: min(var(--vw_PC8px), 8px);
    }

    .aside__pcOnlySubMenu__list__item__link {
        padding-top: 0;
    }

    .aside__pcOnlySubMenu__List__item__link__svg,
    .a__link__svg {
        height: min(0.93vw, 18px);
    }
}

@media screen and (max-height: 1082px) and (min-aspect-ratio: 1520 / 773) {
    .aside__brandNewCosme {
        .component__careBearBanner {
            padding-top: calc((860 / 1300) * 60%);
        }

        .component__emButton__svg {
            height: min(1.04vw, 20px);
        }

        .aside__brandNewCosme__title__img:not(.component__careBearBanner) {
            padding-top: min(calc((300 / 538) * 60%), 192px);
        }

        .aside__brandNewCosme__title__img {
            margin-bottom: min(var(--vw_PC8px), 8px);
            width: 60%;
            height: 60%;
            margin-left: auto;
            margin-right: auto;
        }

        .component__emButton__group {
            width: 60%;
        }
    }

    .aside__brandNewCosme__group {
        padding-left: 0;
        padding-right: 7%;
        margin-left: 25%;
    }

    .block__brandNewCosmetics__button {
        .component__emButton {
            padding-block: 8px;
        }
    }

    .aside__pcOnlySubMenu__box {
        top: 12px;
        padding: 0;
    }

    .aside__pcOnlySubMenu__group {
        width: min(15.15vw, 291px);
        height: min(20.7vw, 398px);
        background-position-x: center;
        margin: 0 auto;
        margin-right: 34%;
    }

    .aside__pcOnlySubMenu__list {
        left: 41%;
    }

    .aside__pcOnlySubMenu__list__item {
        margin-bottom: min(0.2vw, 4px);
    }

    .a__link__text {
        padding-top: 0;
    }

    .aside__pcOnlySubMenu__List__item__link__svg, .a__link__svg {
        height: min(0.73vw, 14px);
    }

    .aside__pcOnlySubMenu__list__item__inner {
        margin-top: min(0.20vw, 4px);
    }

    .aside__pcOnlySubMenu__list__item__link,
    .a__link__text {
        padding-bottom: min(0.20vw, 4px);
    }

    .aside__itemObjects {
        .aside__itemObjects__box {
            max-width: 462px;
            width: 24%;
            left: 18%;
            transform: translateX(calc(-50% + 1px));

            &.aside__itemObjects__box--right {
                right: 18%;
                left: auto;
                transform: translateX(calc(50% - 1px));
            }
        }
    }
    
    .aside__itemObjects__item {
        width: min(4.69vw, 90px);
        height: min(4.69vw, 90px);

        &.aside__itemObjects__item--doubleMargin {
            margin-inline: min(4.58vw, 88px);
        }

        &.aside__itemObjects__item--leftMargin {
            margin-left: min(4.64vw, 89px);
        }

        &.aside__itemObjects__item--rightMargin {
            margin-right: min(4.64vw, 89px);
        }
    }

    .aside__itemObjects__item__group {
        width: min(3.65vw, 70px);
        height: min(3.65vw, 70px);
    }

}