@charset "UTF-8";
/* 固定バナーのコンテナ */
.body-home .event-banner { display: block; width: 40vw; position: fixed; right: 5px; bottom: 5px; z-index: 10; max-width: 245px; padding: 5px; background: var(--white); border: 1px solid var(--bg-light); }
/* 閉じるボタン */
.body-home .event-banner-close { position: absolute; top: -10px; left: -10px; width: 2rem; height: 2rem; background-color: var(--text-main); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 1; }
.body-home .event-banner-close:hover { background-color: var(--text-main); }
.body-home .event-banner-close .material-symbols-outlined { font-size: 20px; font-variation-settings: 'OPSZ' 20, 'wght' 400, 'FILL' 0, 'GRAD' 0; }

/* __slide-------------------------------- */
.wrapper .__inner .__content-home-top .__slide { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin-bottom: 2.5rem; }
.wrapper .__inner .__content-home-top .slick-initialized .slick-slide { margin: 0 2.5px; }
.wrapper .__inner .__content-home-top .__slide .slick-slide img { width: 100%; }
/* dots ------*/
.wrapper .__inner .__content-home-top .slick-dots li { margin: 0 2px; }
.wrapper .__inner .__content-home-top .slick-dots li button:before { font-size: 12px; opacity: 1; color: var(--border-color); }
.wrapper .__inner .__content-home-top .slick-dots li.slick-active button:before { opacity: 1; color: var(--primary-color); }
/* slide-button */
.wrapper .__inner .__content-home-top .slick-prev,
.wrapper .__inner .__content-home-top .slick-next { width: clamp(1.875rem, calc(1rem + 1.667vw), 2.333rem); height: clamp(1.875rem, calc(1rem + 1.667vw), 2.333rem); background-color: var(--text-main); z-index: 1; border-radius: 50px; } 
.wrapper .__inner .__content-home-top .slick-prev { left: 0.5rem; }
.wrapper .__inner .__content-home-top .slick-next { right: 0.5rem; }
.wrapper .__inner .__content-home-top .slick-prev:before,
.wrapper .__inner .__content-home-top .slick-next:before { font-size: clamp(1.875rem, calc(1rem + 1.667vw), 2.333rem); opacity: 1; font-family: 'Material Symbols Outlined'; font-weight: 300; }
.wrapper .__inner .__content-home-top .slick-prev:before { content: '\e5cb'; margin-left: -1px; }
.wrapper .__inner .__content-home-top .slick-next:before { content: '\e5cc'; padding-left: 1px; }

/* __block--search --------------------------- */
.__block--search .__body { display: flex; justify-content: space-between; padding: 0 0 0 1em; box-shadow: none;border: 1px solid var(--border-color); background-color: var(--white); border-radius: 50px; overflow: hidden; }
.c-form label:active { box-shadow: none; }
.__block--search .c-form input[type="text"] { width: 100%; padding: 0; box-shadow: none; border: none; line-height: 40px; letter-spacing: 0.05em; font-size: 1rem; background-color: #fff; }
.__block--search .c-form .c-button { padding: 0 0.5em; background: var(--primary-color); line-height: 1; border-radius: 0; }
.__block--search .material-symbols-outlined { color: var(--white); font-family: var(--font-icon); }
input:-internal-autofill-selected { background-color: #fff; }

/* section.__block-------------------------- */
.body-home .main.main--home section.__block { margin-bottom: clamp(3.9rem, calc(-0.467rem + 9.5vw), 7.133rem); }

/* __top--category-list-------------------- */
.__top--category-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.__top--category-list .__top--category-item { container-type: inline-size; }
.__top--category-list .__top--category-item a { display: grid; grid-template-rows: 67cqw auto; align-items: baseline; text-align: center; line-height: 1.125; aspect-ratio: 1; background-color: var(--bg-light); font-feature-settings: 'palt'; font-size: 10.5cqw; border-radius: 150px; letter-spacing: 0; }
.__top--category-list .__top--category-item a img { margin: auto auto 6cqw; }
.__top--category-list .__top--category-item.__top--category-campaign a img { max-width: 34.7cqw; }
.__top--category-list .__top--category-item.__top--category-reserve a img { max-width: 24.7cqw; }
.__top--category-list .__top--category-item.__top--category-beginner a img { max-width: 22.7cqw; }
.__top--category-list .__top--category-item.__top--category-skincare a img { max-width: 34.1cqw; }
.__top--category-list .__top--category-item.__top--category-bodycare a img { max-width: 17.5cqw; }
.__top--category-list .__top--category-item.__top--category-femcare a img { max-width: 14.9cqw; }
.__top--category-list .__top--category-item.__top--category-supplement a img { max-width: 39.3cqw; }
.__top--category-list .__top--category-item.__top--category-morryspro a img { max-width: 66.4cqw; }
.__top--category-list .__top--category-item.__top--category-materials a img { max-width: 41.9cqw; }
.__top--category-list .__top--category-item.__top--category-medical a img { max-width: 37.7cqw; }
.__top--category-list .__top--category-item.__top--category-sample a img { max-width: 55.8cqw; }
.__top--category-list .__top--category-item.__top--category-date a img { max-width: 48.7cqw; }

/* __top--brand-list----------------- */
.__top--brand .__top--brand-list { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-sm); margin-bottom: 9px; }
.__top--brand .__top--brand-list .__top--brand-item a { display: block; border:1px solid var(--border-color); }

/* __top--banner-item-------------------- */
.__top--banner .__top--banner-item { container-type: inline-size; }
.__top--banner .__top--banner-item a { font-size: 5cqw; display: grid; grid-template-columns: 18.9cqw auto 9.45cqw; align-items: center; line-height: 17cqw; }
.__top--banner .__top--banner-item a::after { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.55em; line-height: 1; font-weight: 200; }

/* __top--banner */
.__top--banner { display: grid; gap: clamp(0.39rem, calc(-0.667rem + 2.5vw), 1.333rem); }
.__top--banner .__top--banner-item a::before { display: inline-block; content: ''; width: 12.5cqw; height: 12.5cqw; margin: auto; }
/* catalog */
.__top--banner .__top--banner-item.__top--banner-catalog a { background-color: #F9E5DE; }
.__top--banner .__top--banner-item.__top--banner-catalog a::before { background: url(../img/common/icon-catalog.png) no-repeat center/ contain; }
/* seminar */
.__top--banner .__top--banner-item.__top--banner-seminar a { background-color: #F9EFDE; }
.__top--banner .__top--banner-item.__top--banner-seminar a::before { background: url(../img/common/icon-seminar.png) no-repeat center/ contain; }

/* recommends--------------------------- */
.p-product-block.p-product-block--compact ul.__product li.__item { padding-top: 0; }
.__block--pro-recommend .p-product-block ul.__product li.__item,
.__block--pro-ranking .p-product-block ul.__product li.__item { padding-left: 0; padding-right: 10px; }

/* __rank------------------------------- */
.__block--pro-ranking .top-h { margin-bottom: clamp(0.39rem, calc(0.067rem + 0.667vw), 0.6rem); }
.p-product-block ul.__product li.__item a .__rank span.__icon:before { font-size: 0; }
.p-product-block ul.__product li.__item a .__rank.__rank--1 span.__icon::before,
.p-product-block ul.__product li.__item a .__rank.__rank--2 span.__icon::before,
.p-product-block ul.__product li.__item a .__rank.__rank--3 span.__icon::before { content: ''; width: 1.7rem; height: 1.23rem; }
.p-product-block ul.__product li.__item a .__rank.__rank--1  span.__icon::before { background: url(../img/common/icon-rank-1.svg) no-repeat center bottom/contain; }
.p-product-block ul.__product li.__item a .__rank.__rank--2  span.__icon::before { background: url(../img/common/icon-rank-2.svg) no-repeat center bottom/contain; }
.p-product-block ul.__product li.__item a .__rank.__rank--3  span.__icon::before { background: url(../img/common/icon-rank-3.svg) no-repeat center bottom/contain; }
.__block--pro-ranking .p-product-block ul.__product li.__item a .__rank span.__icon span.__num { color: var(--text-main); font-family: "EB Garamond", serif; position: static; font-size: 1.62rem; font-weight: 400; }
.__block--pro-ranking .p-product-block ul.__product li.__item a .__rank span.__icon span.__num::before { content: 'No.'; display: inline-block; font-size: 1rem; font-weight: 600; }

/* __news------------------------------- */
.main.main--home section.__block.__block--news { padding: clamp(1.92rem, calc(1.333rem + 0.833vw), 2rem) clamp(1.92rem, calc(0.667rem + 2.5vw), 2.667rem); background-color: var(--bg-light); }
.main.main--home section.__block.__block--news .__body ul li { display: block; }
.main.main--home section.__block.__block--news .__body ul li:not(:last-of-type) { border-bottom: 1px solid var(--border-color); }
.main.main--home section.__block.__block--news .__body ul li .__label { font-size: 0.85rem; }
.main.main--home section.__block.__block--news .__body ul li > a { padding-right: 1.93rem; position: relative; display: block; }
.main.main--home section.__block.__block--news .__body ul li > a::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: '\e5cc'; font-family: var(--font-icon); font-size: 1.7rem; line-height: 1; font-weight: 200; }
.main.main--home section.__block.__block--news .__body ul li > a span, .main.main--home section.__block.__block--news .__body ul li > span span { font-size: 1rem; border: none; }

@media screen and (max-width: 959px) and (min-width: 600px) {
    .body-home .__info--banner { grid-template-columns: repeat(2,1fr); width: 94%; max-width: 860px; margin: auto; gap: clamp(0.39rem, calc(-0.667rem + 2.5vw), 1.333rem); }
    .__info--banner .__info--banner-item a { grid-template-columns: 28.55cqw auto 12.6cqw; }
    .__info--banner .__info--banner-item a::before { height: 10.9cqw; }
}

@media screen and (max-width: 959px) {
    .wrapper .__inner .__content-home-top { margin-bottom: 2.3rem; }
    .body-home .__top--banner { margin: 0 auto 1.55rem; }
    .body-home .__block--free .__info--banner { display: grid; }
}

@media screen and (max-width: 599px) {
    .__top--category-list .__top--category-item.__top--category-supplement a,
    .__top--category-list .__top--category-item.__top--category-morryspro a,
    .__top--category-list .__top--category-item.__top--category-materials a,
    .__top--category-list .__top--category-item.__top--category-medical a,
    .__top--category-list .__top--category-item.__top--category-sample a,
    .__top--category-list .__top--category-item.__top--category-date a { grid-template-rows: 62cqw auto; font-size: 9.5cqw; }

    .main.main--home section.__block.__block--news .top-h { margin-bottom: 5px; }
    .main.main--home section.__block.__block--news .__body ul li { padding: 1.15em 0; }
}

@media screen and (min-width: 600px) {
    /* __top--category-list------------ */
    .__top--category-list { grid-template-columns: repeat(4, 1fr);  }
    .__top--category-list .__top--category-item a { grid-template-rows: 64cqw auto; font-size: 1rem; }
    .__top--category-list .__top--category-item.__top--category-morryspro a img { margin-bottom: 8cqw; }

    /* __top--brand-list--------------- */
    .__top--brand .__top--brand-list { grid-template-columns: repeat(3, 1fr); }

    /* __top--banner ------------------*/
    .body-home .__top--banner { grid-template-columns: repeat(2,1fr); width: 94%; max-width: 860px; }
    .__top--banner .__top--banner-item a { grid-template-columns: 28.55cqw auto 12.6cqw; line-height: 26.2cqw; font-size: 5.25cqw; }
    .__top--banner .__top--banner-item a::before { width: 19cqw; height: 19cqw; }

    /* recommend,ranking-------------- */
    .__block--pro-recommend .p-product-block ul.__product, 
    .__block--pro-ranking .p-product-block ul.__product { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
    .__block--pro-recommend .p-product-block ul.__product li.__item, 
    .__block--pro-ranking .p-product-block ul.__product li.__item { width: 100%; padding: 0; }

    /* news--------------------------- */
    .main.main--home section.__block.__block--news { display: grid; grid-template-columns: 12.166cqw auto; }
    .main.main--home section.__block.__block--news .__body ul li > a span.__date, .main.main--home section.__block.__block--news .__body ul li > a span.__title, .main.main--home section.__block.__block--news .__body ul li > span span.__date, .main.main--home section.__block.__block--news .__body ul li > span span.__title { padding-top: 1rem; padding-bottom: 1rem; border:none; }
    
}
@media screen and (min-width: 768px) {
    .wrapper .__inner .__content-home-top .slick-prev { left: 8.5vw; }
    .wrapper .__inner .__content-home-top .slick-next { right: 8.5vw; }
    .__block--search .c-form input[type="text"] { line-height: 50px; }
}
@media (min-width: 960px) {
    .wrapper .__inner .__content-home-top { margin-bottom: 1.84em; }
    .body-home .__top--banner { margin: auto; }
    .main.main--home section.__block.__block--news { margin-bottom: 0; }
    
}
@media (min-width: 1024px) {
    .wrapper .__inner .__content-home-top .slick-prev { left: 16.5vw; }
    .wrapper .__inner .__content-home-top .slick-next { right: 16.5vw; }
    
}
@media screen and (min-width: 1280px) {
    .wrapper .__inner .__content-home-top .__slide { margin-bottom: 3.5rem; }
    .wrapper .__inner .__content-home-top .slick-prev { left: 25vw; }
    .wrapper .__inner .__content-home-top .slick-next { right: 25vw; }
    .wrapper .__inner .__content-home-top .slick-dots { bottom: -37px; }

    .__block--search .__body { max-width: 1214px; margin: 0 auto; }

    .__top--category-list { grid-template-columns: repeat(5, 1fr); }

}