@charset "UTF-8";

/*-------- MERCART 上書き CSS -----------*/
.block-goods-class1 {
    display: none!important;
}

.block-cart--goods-point-info{
    display: none!important;
}

.block-order-estimate--goods-point{
    display: none!important;
}

.block-order-estimate--promotion-novelty-helper{
    display: none!important;
}

.block-order-estimate--discount-period{
    display: none!important;
}

/*********************************/
/* ----ML-共通CSS (Utility) ---- */
/*********************************/

:root {
  /* スペース */
  --ml-space-xs: 5px;
  --ml-space-sm: 10px;
  --ml-space-md: 15px;
  --ml-space-lg: 20px;
  --ml-space-xl: 25px;

  /* line-height */
  --ml-lh-tight: 1.4;   /* 見出し・短文 */
  --ml-lh-base:  1.6;   /* 通常テキスト */
  --ml-lh-loose: 1.8;   /* 説明文・長文 */

  /* font-weight */
  --ml-fw-regular: 400; /* フォント */
  --ml-fw-medium: 500;
  --ml-fw-semibold: 600;
  --ml-fw-bold: 700;

  /* font-size */
  --ml-fs-xs: 12px;
  --ml-fs-sm: 14px;
  --ml-fs-md: 16px; /* 基準 spでも見やすい*/
  --ml-fs-lg: 18px;
  --ml-fs-xl: 20px;
  --ml-fs-2xl: 24px;
  --ml-fs-3xl: 28px;
}

/*********************************/
/* ----       margin        ---- */
/*********************************/

/* margin-bottom */
.ml-mb-xs {
    margin-bottom:var(--ml-space-xs);
}

.ml-mb-sm {
    margin-bottom:var(--ml-space-sm);
}

.ml-mb-md {
    margin-bottom:var(--ml-space-md);
}

.ml-mb-lg {
    margin-bottom:var(--ml-space-lg);
}

.ml-mb-xl {
    margin-bottom:var(--ml-space-xl);
}

.ml-mb-2xl {
    margin-bottom: calc(var(--ml-space-xl) * 2);
}

/* margin-top */
.ml-mt-xs {
    margin-top:var(--ml-space-xs);
}

.ml-mt-sm {
    margin-top:var(--ml-space-sm);
}

.ml-mt-md {
    margin-top:var(--ml-space-md);
}

.ml-mt-lg {
    margin-top:var(--ml-space-lg);
}

.ml-mt-xl {
    margin-top:var(--ml-space-xl);
}

.ml-mt-2xl {
    margin-top: calc(var(--ml-space-xl) * 2);
}

/*********************************/
/* ----     font-weight     ---- */
/*********************************/
.ml-fw--bold {
    font-weight: var(--ml-fw-bold);
}

/*********************************/
/* ----     font-size     ---- */
/*********************************/
.ml-text--xs {
  font-size: var(--ml-fs-xs);
}

.ml-text--sm {
  font-size: var(--ml-fs-sm);
}

.ml-text--md {
  font-size: var(--ml-fs-md);
}

.ml-text--lg {
  font-size: var(--ml-fs-lg);
}

.ml-text--xl {
  font-size: var(--ml-fs-xl);
}

.ml-text--2xl {
  font-size: var(--ml-fs-2xl);
}

.ml-text--3xl {
  font-size: var(--ml-fs-3xl);
}


/*********************************/
/* ----       list        ---- */
/*********************************/
.ml-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

/* リストのgap */
.ml-list--xs{
    gap: var(--ml-space-xs);
}

.ml-list--sm{
    gap: var(--ml-space-sm);
}

.ml-list--md{
    gap: var(--ml-space-md);
}

.ml-list--lg{
    gap: var(--ml-space-lg);
}

.ml-list--xl{
    gap: var(--ml-space-xl);
}

/* リストのスタイル(黒丸、数字など） */
ul.ml-list-disc {
    padding-left: 1em;
}

ul.ml-list-disc li {
    list-style-type: disc;
}

/* line-height */
.ml-text--loose {
  line-height: var(--ml-lh-loose);
}

/* 説明型リスト(コロン区切り) */
dl.ml-colon {
    padding: 0 var(--ml-space-sm);
}

dl.ml-colon dt {
    float: left;
}

dl.ml-colon dt:after {
    content: "：";
}

/* カッコつき数字の順序型リスト(1)(2)(3) */
ol.ml-ol-pnum {
    /*カッコつきの数字 Parenthesized numbers:*/
    counter-reset: my-counter;
}

ol.ml-ol-pnum li {
    counter-increment: my-counter;
    position: relative;
    padding-left: 3em;
}

ol.ml-ol-pnum li:before {
    position: absolute;
    left: 0;
    content: "（" counter(my-counter) "）";
}

/*********************************/
/* ----      インデント      ---- */
/*********************************/

/* インライン要素用のインデント (spanなど）*/
.ml-inline-indent {
    display: inline-block;
    text-indent: -1.0em;
    padding-left: 1.0em;
}

/* ブロックレベル要素用のインデント(pなど) */
.ml-text-right {
    text-align: right;
}


/*********************************/
/* ----       その他        ---- */
/*********************************/

/* 下線 */
.ml-text-underline{
    text-decoration: underline;
}

/* 上付き文字 */
.ml-caution {
    font-size: 0.6em;
    vertical-align: super;
    margin-left: -0.2em;
    margin-right: 0.4em;
}

.ml-text-center{
    text-align: center;
}

/* 黒丸リスト */
/*
ul.ml-ul-disc {
    padding-left: 1em;
}

ul.ml-ul-disc li {
    list-style-type: disc;
    margin-bottom: 5px;
}

.ul.ml-ul-disc li:last-child {
    margin-bottom: 0px;
}
*/

/* 黒丸リスト */
/*
.ml-indent {
    text-indent: -1.0em;
    margin-left: 1.0em;
}
*/
/* ==========================================================
 only device
========================================================== */
.only-pc {
  display: block !important;
}
@media all and (max-width: 767px) {
  .only-pc {
    display: none !important;
  }
}

.only-sp {
  display: none !important;
}
@media all and (max-width: 767px) {
  .only-sp {
    display: block !important;
  }
} 

/* ========================================================================================================*/

/*********************************/
/* ----- page幅・breadcrumb ---- */
/*********************************/
main {
  max-width: 1296px;
  margin: 0 auto;
}

.top-wrapper{
  max-width: 1316px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb_list {
    font-size: 12px;
    margin: 30px 0;
} 

.breadcrumb_list a {
  display: inline-block;
  padding-right: 10px;
}  

.breadcrumb_list a:hover {
  text-decoration: underline;
}

/*********************************/
    /* -----sub,sup ---- */
/*********************************/
sub, sup {
  top: -.5em;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.sub-txt {
  font-size: 12px !important;
  line-height: 2 !important;
}

/*********************************/
    /* -----text/font ---- */
/*********************************/
.txt-justify {
  text-align: justify;
}

.txt-center {
    text-align: center;
}

/*----------- color-selector ------------*/

.color-box {
    display: block;
    max-width: 130px;
    height: 110px;
    margin: 18px;
    float: left;
}

.color-box .color-image {
    padding-top: 5px;
}


.color-box .color-name {
    font-size: 10px;
    text-align: center;
}

.checked {
    border: 1px solid #000;
}

.next:hover {
    opacity: 0.5;
}
.next:active {
    border: 1px solid #000;
}

  
/*-------- mybiome-ss 使用方法 how-to --------*/
.l-use-list-wrapper {
    max-width: 100%;
}

.l-use-list {
    display: flex;
    align-items: flex-start;
}

.l-use-list dt {
    font-size: 40px;
    margin-right: 10px;
}
@media screen and (max-width: 768px) {
    .l-use-list dt {
        font-size: 20px;
    }
}

.l-use-list dd {
    font-size: 16px;
    line-height: 2.78;
    padding-top: 1em;
}
@media screen and (max-width: 768px) {
    .l-use-list dd {
        font-size: 14px;
        padding-top: 0;
    }
}

.how-to{
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: solid 2px #739ada;
  border-radius: 12px;
  max-width: 1865px;
  padding: 25px 0px 25px 35px;
  margin: 30px auto;
}
@media screen and (max-width: 768px) {
 .how-to {
  display: block;
  padding: 25px;
  }
}
.how-to_ss{
  width: 66%;
}
@media screen and (max-width: 768px) {
 .how-to_ss{
  width: 100%;
  }
}
.how-to_title{
  font-size: 18px;
  color: #739ada;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}
@media screen and (max-width: 768px) {
 .how-to_title{
  width: 100%;
  text-align: center;
  font-size: 16px;
  }
}
.how-to_text{
  font-size: 16px;
  letter-spacing: -0.5px;
}
@media screen and (max-width: 768px) {
 .how-to_text{
  width: 100%;
  font-size: 13px;
  }
}
.how-to_img{
   width: 34%;
  margin: -22px 0px;
}
@media screen and (max-width: 768px) {
 .how-to_img{
  width: 100%;
  margin: auto;
  }
}

/* 送料無料アイコン */
.ml-delivery-free-icon{
    color: #fff;
    background: #ababab;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 7px;
}

.ml-sup {
  vertical-align: super; /*テキストを上付きに*/
  font-size: 0.8em;
}

.ml-sup-txt{
  font-size: 0.9em;
}