@charset "UTF-8";
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 80px; }
.event-banner { display: none; }

/* __heading---------------- */
.wrapper .main .__heading .c-h1 { margin-bottom: 1rem; padding: 0 0 0.458rem 0; border-bottom: 1px solid var(--primary-color); font-weight: 400; }

/* __label------------------ */
.wrapper .main .p-product-block ul.__product li.__item a .__status ul li.__label { font-weight: 400; letter-spacing: 0; }

/* __product---------------- */
/* .main.main--product-list section.__list.__list--row ul.__product>li.__item a table tr td.__photo { border: 1px solid var(--border-color); } */
.main.main--product-list section.__list.__list--row ul.__product>li.__item a table tr td.__photo img { max-height: unset; max-width: 9em; }

/* __block--recommend------- */
.body-product-list .wrapper .main.main--product-list section.__block.__block--recommend,
.main.main--product-detail section.__block.__block--recommend { margin-top: 5rem; }

/* product-detail----------- */
.p-product-set table tbody tr td.__price .__body .__total { font-weight: 400; }
.main.main--product-detail section.__information .__primary .__photo .__main,
.main.main--product-detail section.__information .__primary .__photo .__sub ul li { aspect-ratio: 1 / 1; }
.main.main--product-detail section.__information .__primary .__photo .__main img,
.main.main--product-detail section.__information .__primary .__photo .__sub ul .__main img, 
.main.main--product-detail section.__information .__primary .__photo .__sub ul li a img { max-height: unset; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.main--product-detail .__information .__description a::before { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.333em; font-weight: 200; color: var(--text-main); vertical-align: sub; }
/* #filter-container select{ padding: 0 0.9em; height: 2.5em; border: 1px solid var(--primary-color); border-radius: 3px; } */
/* __is-no-image */
.main.main--product-detail section.__information .__primary .__photo .__main.__is-no-image { max-height: unset; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background-color: #f2f2f2; display: flex; align-items: center; justify-content: center;  text-align: center; }

/* news ----------------------- */
.main.main--news-detail section { padding: 0; }
.main.main--news-detail section.__to-list a:before { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.333em; font-weight: 400; color: var(--text-main); margin: 0; padding: 0; vertical-align: bottom; }
.main.main--news-list section:not(.__news) { padding: 0; }
.main.main--news-list section.__news ul li > a span.__title,
.main.main--news-list section.__news ul li { border-bottom: unset; }
/* news title */
.main.main--news-list section.__news ul li > a span.__date, 
.main.main--news-list section.__news ul li > a span.__title, 
.main.main--news-list section.__news ul li > span span.__date, 
.main.main--news-list section.__news ul li > span span.__title { border-bottom: unset; }
.main.main--news-list section.__news ul li .c-news-label { margin-right: 0.5em; }
.main.main--news-list section.__news ul li > a .__title .__subject { font-size: 1em!important; }
.main.main--news-list section.__news ul li > a:hover span.__title { text-decoration: none; }

/* flow --------------------- */
.p-form-flow:before { border-bottom: 2px solid var(--border-color); }
.p-form-flow .__flow .__number { font-family: var(--font-en); }
.p-form-flow .__flow .__text { font-weight: 400; }
.p-form-flow .__flow.__active .__number { background-color: var(--text-main); }
.p-form-flow .__flow.__active .__text { color: var(--text-main); }
.main.main--regist-finish section.__back-home a:before { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.333em; font-weight: 400; color: var(--text-main); padding: 0; vertical-align: bottom; }
.p-form-table tr.__is-required > th:after { background-color: var(--primary-color); }

/* contact ------------*/
.main.main--contact-finish section.__back-home a::before { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.333em; font-weight: 400; color: var(--text-main); padding: 0; vertical-align: bottom; }

/* howto---------------------- */
.main.main--howto .__step .__body ul.__list li.__item .__title { background: var(--bg-light); padding: 0.5em 1em; }

/* shipping------------------- */
.main.main--cart section.__shipping-wrap .__shipping { border-top: none; }

/* sitemap------------------- */
.main.main--sitemap .__wrap .__block h2.__heading { font-size: 1.3em; }
.main.main--sitemap .__wrap .__block .__body ul li a:before { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.333em; font-weight: 300; color: var(--text-main); padding: 0; vertical-align: bottom; }

/* mypage------------------- */
.p-mypage-navi nav.__menu .__body ul li.__is-active a { font-weight: 500; }

/* faq---------------------- */
/* reset */
.main .main--faq .faq--list-a > *:first-child { margin-top: 0; }
.main .main--faq .faq--list-a > *:last-child { margin-bottom: 0; }
.main .main--faq ul { padding: 0; }
.main .main--faq dl dd { margin: 0; }
/* common */
.main .main--faq .__mt-0 { margin-top: 0; }
.main .main--faq .__mb-025 { margin-bottom: 0.25em; }
.main .main--faq .__mb-05 { margin-bottom: 0.5em; }
.main .main--faq .__mb-1 { margin-bottom: 1em; }
.main .main--faq .__mb-2 { margin-bottom: 2em; }
.main .main--faq .faq--list ul.__disc { padding: 0 0 0.25em 1.25em; list-style: disc; text-indent: -0.25em; }
.main .main--faq .faq--list .__square > dt ul.__disc { margin-left: 0.25em; }
.main .main--faq .faq--list ol { padding: 0 0 0.25em 1.25em; /*margin-left: 0.25em;*/ text-indent: -0.25em;}
.main .main--faq .faq--list ol > li + li { padding-top: 0.25em; }
.main .main--faq .faq--list .__kome { padding-left: 0; font-size: 0.9em; }
.main .main--faq .faq--list .__kome li { list-style: none; text-indent: -1em; padding-left: 1em; }
.main .main--faq .faq--list ul.__disc + .__kome li { margin-left: 0.1em; }
.main .main--faq .faq--list .__kome li::before { content: '※'; }
/* faq--nav */
.main .main--faq .faq--nav { margin: clamp(1.5rem, calc(0.667rem + 1.667vw), 2rem) 0 clamp(3rem, calc(1.333rem + 3.333vw), 4rem); }
.main .main--faq .faq--nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 10px; padding: 0 10px; }
.main .main--faq .faq--nav ul li { border-right: 1px solid var(--border-color); line-height: 1; }
.main .main--faq .faq--nav ul li a { display: inline-block; padding-right: 10px;  }

.main .main--faq .faq--list { margin-top: 0; margin-bottom: 4.6em; border-bottom: 1px solid var(--border-color); }
/* faq--title */
.main .main--faq .faq--title { margin-bottom: 0; padding: 0.42em 0.85em; font-size: clamp(1.35rem, calc(0.833rem + 0.792vw), 1.467rem); background: var(--bg-light); }
/* Q */
.main .main--faq .faq--list-q { margin: 0; padding: 1.1em 1.55em 1.1em 2.55rem; text-indent: -2.55rem; font-size: 1.05em; position: relative; cursor: pointer; z-index: 1; }
.main .main--faq .faq--list-q:not(:first-of-type) { border-top: 1px solid var(--border-color); }
.main .main--faq .faq--list-q::before { content: "Q"; display: inline-block; width: 2rem; line-height: 2rem; margin-right: 0.55rem; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 300; font-size: 1.27em; text-align: center; background: #F9E5DE; border-radius: 50px; text-indent: 0; }
.main .main--faq .faq--list-q::after { content: '\e145'; position: absolute; top: 50%; transform: translateY(-50%); right: -5px; left: auto; font-family: 'Material Symbols Outlined'; font-size: 22px; color: var(--primary-color); }
.main .main--faq .faq--list-q.active { padding-bottom: 0.8em; }
.main .main--faq .faq--list-q.active::after { content: '\e15b'; }
/* A */
.main .main--faq .faq--list .faq--list-a { padding: 0.25em 0 1.25em 2.55rem; position: relative; }
.main .main--faq .faq--list .faq--list-a::before { content: "A"; position: absolute; top: 0; left: 0; width: 2rem; line-height: 2rem; margin-right: 0.35em; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 300; font-size: 1.27em; text-align: center; background: var(--bg-light); border-radius: 50px; }
/* __square > dt */
.main .main--faq .faq--list .faq--list-a .__square > dt  { margin-bottom: 0.25em; font-size: 1.06em; font-weight: 400; }
.main .main--faq .faq--list .faq--list-a .__square > dt::before { content: '\eb36'; display: inline-block; margin-right: 3px; vertical-align: -1.5px; font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
.main .main--faq .faq--list .faq--list-a .__square > dt:not(:first-of-type) { margin-top: 1.5em; }
/* __flex-row */
.main .main--faq .faq--list .faq--list-a .__flex-row { display: flex; flex-wrap: wrap; }
.main .main--faq .faq--list .faq--list-a .__flex-row dt { width: 50%; padding: 0.25em 0; border-bottom: 1px solid var(--border-color); }
.main .main--faq .faq--list .faq--list-a .__flex-row dd { width: 50%; padding: 0.25em 0; border-bottom: 1px solid var(--border-color); text-align: right;
 }
/* __step-flow */
.main .main--faq .faq--list .faq--list-a .__step-flow { margin-top: 0.25em; background-color: #f9f9f9; padding: 0.5em 1em; }
.main .main--faq .faq--list .faq--list-a .__step-flow span { display: inline-block; margin: 0 0.5em; font-size: 0.85em; color: #aaa; font-weight: 400;}
/* combination-container */
.main .main--faq .faq--list .faq--list-a .combination-container .__kome { justify-content: flex-end; }
.main .main--faq .faq--list .faq--list-a .__flex-row.cost-highlight .cost-value { font-weight: 400; color: var(--primary-color); }
.main .main--faq .faq--list .faq--list-a .combination-container { display: flex; flex-direction: column; gap: 0.5rem; }
.main .main--faq .faq--list .faq--list-a .comb-item { padding: 0.75rem; background: #f9f9f9; border-left: 4px solid var(--border-color); }
.main .main--faq .faq--list .faq--list-a .comb-plus { text-align: center; line-height: 1; }
/* cycle-list */
.main .main--faq .faq--list .faq-cycle-container > div { margin-bottom: 2em; }
.main .main--faq .faq--list .cycle-list { list-style: none; margin-top: 0.5em; margin-left: 0;  padding: 0; text-indent: 0; counter-reset: step-counter; max-width: 200px; }
.main .main--faq .faq--list .step-item { width: 100%; display: flex; align-items: center; justify-content: center; background: #FDF7F5;  border: 1px solid var(--primary-color); border-radius: 50px; padding: 0.5em 1em; font-weight: 400; color: var(--primary-color); position: relative; }
.main .main--faq .faq--list .step-arrow { position: relative; padding: 1em 0; font-size: 0.85rem; color: #888; font-weight: 400; text-align: center; }
.main .main--faq .faq--list .step-arrow::before { content: ""; position: absolute; top: 0; bottom: 5px; left: 50%; width: 1px; border-left: 2px dotted var(--border-color); transform: translateX(-50%); z-index: -1; }
.main .main--faq .faq--list .step-arrow::after { content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 6px 4px 0 4px; border-color: var(--border-color) transparent transparent transparent; }
.main .main--faq .faq--list .intensive .step-item::before { counter-increment: step-counter; content: counter(step-counter) "回目"; position: absolute; left: 0.5em; font-size: 0.75em; line-height: 2; background: var(--primary-color); color: #fff; padding: 0 0.5em; border-radius: 50px; }
.main .main--faq .faq--list .maintenance .step-item { border-color: var(--border-color);  background: #f9f9f9; color: #666; }
/* comp-table */
.main .main--faq .faq--list .comp-table td { padding: 0.5em 1em; }

@media screen and (max-width: 1023px) {

}

@media screen and (max-width: 959px) and (min-width: 600px) {

}

@media screen and (max-width: 959px) {

    .__block--free .__info--banner { display: none; }
    .main.main--news-list section.__news ul li > a span, 
    .main.main--news-list section.__news ul li > span span { font-size: 1rem; }
    .main.main--news-list section.__news ul li .c-news-label { font-size: 0.8rem; }

}

@media screen and (max-width: 767px) {
  /* comp-table */
  .main .main--faq .faq--list .comp-table, .comp-table thead, .comp-table tbody, .comp-table th, .comp-table td, .comp-table tr { display: block; }
  .main .main--faq .faq--list .comp-table thead { display: none; }
  .main .main--faq .faq--list .comp-table tr { margin-bottom: 1em; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
  .main .main--faq .faq--list .comp-table td { position: relative; border: none; }
  .main .main--faq .faq--list .comp-table td.item-label { background: #FDF7F5; font-weight: 400; font-size: 0.9rem; }
  .main .main--faq .faq--list .comp-table td.is-highlight { border-bottom: 1px solid var(--border-color); }
  .main .main--faq .faq--list .comp-table td.is-highlight::before { content: "MISIRELTO SOFT DERMA"; display: block; font-size: 0.7rem; font-weight: 400; color: var(--primary-color);  }
  .main .main--faq .faq--list .comp-table td:last-child::before { content: "他社製エステダーマペン（例）"; display: block; font-size: 0.7rem; color: #666; }
}

@media screen and (max-width: 599px) {
 .c-table-dl { font-size: 1rem !important; }

 .main .main--faq .faq--nav ul li a { font-size: 0.93em; }
}

@media screen and (min-width: 600px) {
  
}

@media screen and (min-width: 768px) {
  /* .main .main--faq -------------- */
  /* faq--nav */
  .main .main--faq .faq--nav ul { gap: 1.3rem 10px; }
  /* faq--list */
  .main .main--faq .faq--list .step-item { width: auto; min-width: 120px; white-space: nowrap; flex: 0 1 auto; }
  .main .main--faq .faq--list .faq--list-a img { max-width: 500px; }
  /* cycle-list */
  .main .main--faq .faq--list .cycle-list { max-width: none; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 3px; }
  .main .main--faq .faq--list .intensive .step-item { min-width: unset; padding: 0.5em; }
  .main .main--faq .faq--list .intensive .step-item::before { font-size: 10px; position: static; margin-right: 0.5em; }
  .main .main--faq .faq--list .step-arrow {  display: flex; align-items: center; padding: 0 1em 0 0.5em; }
  .main .main--faq .faq--list .step-arrow::before { top: 50%; left: 0; right: 0; bottom: auto; width: 100%; height: 1px;  border-left: none; border-top: 2px dotted var(--border-color); transform: translateY(-50%); }
  .main .main--faq .faq--list .step-arrow::after { top: 50%; bottom: auto; left: auto; right: -2px; transform: translateY(-50%) rotate(-90deg); }
  /* comp-table */
  .main .main--faq .faq--list .comp-table { width: 100%; border-collapse: collapse; }
  .main .main--faq .faq--list .comp-table th, .comp-table td { border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5em 1em; text-align: left; font-size: 0.95rem; }
  .main .main--faq .faq--list .comp-table tr *:last-of-type { border-right: none; }
  .main .main--faq .faq--list .comp-table th { background: #FDF7F5; font-weight: 400; text-align: center; }
  .main .main--faq .faq--list .comp-table th:last-of-type { background: #f9f9f9; color: #666; }
  .main .main--faq .faq--list .comp-table td.item-label { font-weight: 400; width: 20%; }
  .main .main--faq .faq--list .comp-table .is-highlight { width: 40%; background: #fff; }
  .main .main--faq .faq--list .comp-table th.is-highlight { background: #FDF7F5; color: var(--primary-color); }
}
@media (min-width: 960px) {

}
@media (min-width: 1024px) {
  :target { scroll-margin-top: 160px; }
}

@media screen and (min-width: 1280px) { 
  .body-product-list .p-product-block ul.__product li.__item,
  .body-product-detail .p-product-block ul.__product li.__item { width: 20%; }

  
  .main .main--faq .faq--list .intensive .step-item { min-width: 120px; }
  .main .main--faq .faq--list .intensive .step-item::before { margin-right: 1em; margin-left: -2em;  }
  .main .main--faq .faq--list-q { padding-top: 1.59em; padding-bottom: 1.59em; }
  .main .main--faq .faq--list-q.active { padding-bottom: 1em; }
 
}