@charset "UTF-8";

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
cmn
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
li{list-style:none;}
.floup{transition: .2s ease-out;}
.floup:hover{opacity: 0.75;transform:translateY(-5px);}

.pagetop {
  width: 72px;
  height: 72px;
  position: fixed;
}
.pagetop a {
  display: block;
  width: 72px;
  height: 72px;
  padding-top: 10px;
  background-color: #002E55;
  color: #fff;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  transition: all 300ms 0s ease;
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.25);
}
.pagetop a::before {
  content: '▲';
  display: block;
  margin-bottom: 4px;
  color: #fff;
}
.pagetop a:hover {
  opacity: 0.65;
  transition: all 300ms 0s ease;
}
  @media screen and (max-width: 639px) {
    .pagetop {bottom: 32px;right: 16px;}
  }
  @media screen and (min-width: 640px) {
    .pagetop {bottom: 24px; right: 24px;}
    .pagetop a {font-size: 0.8rem;}
  }


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
top
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
@media screen and (max-width:768px) {
  #top #header{
    display: none;
  }
}

#top .main-visual{
  text-align: center;
  padding-bottom: 2rem;
}
  #top .main-visual img{
    width: 100%;
  }
  @media screen and (min-width:1024px) {
    #top .main-visual{
      padding-bottom: 60px;
    }
    #top .main-visual img{
      width: auto;
      max-width: 100%;
    }
  }

  #top .movie,
  .under .movie{
    width:84%;
    margin:0 auto 3.4rem;
  }
    #top .movie iframe,
    .under .movie iframe{
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
    @media screen and (min-width:820px) {
      #top .movie,
      .under .movie{
        width: 90%;
      }
    }
    @media screen and (min-width:1024px) {
      #top .movie{
        margin-bottom:70px;
        width: 960px;
      }
      .under .movie{
        width: 100%;
      }
    }
  #top .group{
    width:84%;
    margin:0 auto 3.4rem;
  }
    #top .group .lead{
      margin-bottom: 2.3rem;
      text-align: center;
      font-size: 1.35rem;
      font-weight: 600;
      line-height: 1.6;
    }
    #top .group .group-img{
      text-align: center;
      position: relative;
      }
      #top .group .group-img img{
        vertical-align: top;
      }
      #top .group .group-img .pc{
        display: none;
      }
      #top .group .group-img .group-list li{
        width: calc((223.3728/647)*100%);
        aspect-ratio: 1 / 1;
        position: absolute;
      }
      #top .group .group-img .group-list li.premium{
        top: calc((7/708)*100%);
        left: calc((212/647)*100%);
      }
      #top .group .group-img .group-list li.whitening{
        top: calc((124/708)*100%);
        left: calc((8/647)*100%);
      }
      #top .group .group-img .group-list li.perio{
        top: calc((127/708)*100%);
        left: calc((415/647)*100%);
      }
      #top .group .group-img .group-list li.hys{
        top: calc((359/708)*100%);
        left: calc((8/647)*100%);
      }
      #top .group .group-img .group-list li.hys_gel{
        top: calc((476/708)*100%);
        left: calc((212/647)*100%);
      }
      #top .group .group-img .group-list li.clear_gel{
        top: calc((358/708)*100%);
        left: calc((415/647)*100%);
      }
      #top .group .group-img .group-list a{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        /* background: rgba(0,0,0,0.2); */
        text-indent: -9987em;
        -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
      }
      #top .group .group-img .group-list a:hover{
        background: rgba(255, 255, 255, .4);
      }
    @media screen and (min-width:1024px) {
      #top .group .lead br.sp{
        display: none;
      }
      #top .group .group-img .pc{
        display: inline-block;
      }
      #top .group .group-img .group-list{
        width: 794px;
        height: 871px;
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
      }
      #top .group .group-img .group-list li{
        width: calc((274.7606/794)*100%);
        aspect-ratio: 1 / 1;
        position: absolute;
      }
      #top .group .group-img .group-list li.premium{
        top: calc((9/871)*100%);
        left: calc((259/794)*100%);
      }
      #top .group .group-img .group-list li.whitening{
        top: calc((153/871)*100%);
        left: calc((9/794)*100%);
      }
      #top .group .group-img .group-list li.perio{
        top: calc((153/871)*100%);
        left: calc((509/794)*100%);
      }
      #top .group .group-img .group-list li.hys{
        top: calc((442/871)*100%);
        left: calc((9/794)*100%);
      }
      #top .group .group-img .group-list li.hys_gel{
        top: calc((586/871)*100%);
        left: calc((259/794)*100%);
      }
      #top .group .group-img .group-list li.clear_gel{
        top: calc((442/871)*100%);
        left: calc((509/794)*100%);
      }
    }

  #top .products{
    width:84%;
    margin:0 auto 3.4rem;
  }
    #top .products h2{
      margin-bottom: 0.8em;
      font-size: 1.4rem;
      font-weight: 900;
    }
    #top .products .products-list{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
      #top .products .products-list li{
        width: 47%;
        margin-bottom: 1.5rem;
        text-align: center;
      }
    #top .products .products-list.pl01{
      margin-bottom: 3rem;
    }
    @media screen and (min-width:1024px) {
      #top .products{
        display: none;
      }
    }


  #top .list{
    width:84%;
    margin:0 auto 3.4rem;
    }
    #top .list .lead{
      margin-bottom: 1.2rem;
      text-align: center;
      font-size: 1.35rem;
      font-weight: 600;
      line-height: 1.6;
    }
    #top .list h2{
      margin-bottom: 1.6rem;
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      color: #002e55;
    }
      #top .list h2 span{
        display: inline-block;
        padding: .5em 1.5em .5em calc(1.5em + .25em);
        background: #d9d9d9;
        border-radius: 1em;
        letter-spacing: .25em;
      }
    @media screen and (min-width:1024px) {
      #top .list{
        width:100%;
        padding: 0 32px;
        }
    }

  #top .table-list{
    width: 100%;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-collapse: collapse;
    font-size: 90%;
    text-align: left;
    }
    #top .table-list *{
      line-height: 1.6;
    }
    #top .table-list tbody{
      width: 100%;
      display: table;
    }
    #top .table-list tr{
      background: #fff;
      border-bottom: 1px solid #999;
    }
    #top .table-list th,
    #top .table-list td{
      padding: 1rem;
      padding: .75rem;
      border-right: 1px solid #999;
      vertical-align: middle;
      font-size: 0.9rem;
      font-size: 0.75rem;
    }
    #top .table-list th{
      background-color: #666; color:#fff;
    }
    #top .table-list td.pickup{
      font-weight: bold;
    }
    #top .table-list th.white{background: #fff;}
    #top .table-list td.gold{background: #b6a56e;}
    #top .table-list td.darkgray{background: #b1b8bd;}
    #top .table-list td.pink{background: #f0d7de;}
    #top .table-list td.lightblue{background: #c2dfea;}
    #top .table-list td.lightgray{background: #d4d8db;}
    #top .table-list tr.l_blue{background: #ddf1fd;}
    #top .table-list tr.l_purple{background: #e6e1f5;}
    #top .table-list tr.l_pink{background: #ffe9f5;}
    #top .table-list tr.l_green{background: #f3fce3;}

    #top .table-list div.p_name{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    #top .table-list div.p_name div{
      display: flex;
      justify-content: center;
    }
    /* #top .table-list div.p_name div.txt{width: 70%;} */
    #top .table-list div.p_name div.p_photo{width: 25%;}
    #top .table-list .wsn{white-space: nowrap;}

  @media screen and (max-width:1023px) {
    #top .table-list{
      width: 1390px;
      font-size: 1.25rem;
      word-break: break-all;
      word-wrap: break-all;
      }
      #top .table-list .s195{width: 195px!important;}
      #top .table-list .s120{width: 120px!important;}
      #top .table-list .s100{width: 100px!important;}
      #top .table-list .s80{width: 80px!important;}
      .scroll-hint-icon {
        top: calc(22% - 10px) !important;
      }
  }

  #top .btn-section{
    width:84%;
    margin: 0 auto 7.4rem;
    font-size: 1.2rem;
    line-height: 1.6;
    }
    @media screen and (min-width:820px) {
      #top .btn-section{
        width:90%;
        margin: 0 auto 3.4rem;
      }
    }
    @media screen and (min-width:1024px) {
      #top .btn-section{
        width:860px;
        margin: 0 auto 3.4rem;
      }
    }
    #top .btn-section .btn{
      display: flex;
      flex-wrap: wrap;
      padding-top: 3.2rem;
    }
    #top .btn-section .btn a{
      display: block;
      width: 100%;
      padding: .8em 0;
      margin-bottom: 1rem;
      background: #002e55;
      border-radius: .5rem;
      color: #fff;
      text-align: center;
      font-size: 1.6rem;
      line-height: 1.2;
      position: relative;
    }
    #top .btn-section .btn a::after{
      content: "";
      display: block;
      width: 2.0rem;
      height: 2.0rem;
      font-size: 2.0rem;
      background: url(../img/btn_ico_dl.svg) center center no-repeat;
      position: absolute;
      top: calc(50% - .5em);
      right: .5em;
    }
    #top .btn-section .btn a.ext::after{
      background: url(../img/btn_ico_ext.svg) center center no-repeat;
      }
      #top .btn-section .btn a .fss{
        font-size: .9rem;
      }
    @media screen and (min-width:960px) {
      #top .btn-section .btn{
        align-items: stretch;
      }
      #top .btn-section .btn a{
        width: 830px;
        margin: 0 auto;
        font-size: 1.4rem;
      }
    }





/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
subpage
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.under #main{
  padding-bottom: 5rem;
}
.under .main-visual{
  width: 100%;
  aspect-ratio: 750 / 570;
  /* background: #D0A1BB; */
  /* background: linear-gradient(90deg,rgba(208, 161, 187, 1) 0%, rgba(231, 208, 221, 1) 100%); */
  text-align: center;
}
  @media screen and (min-width:1024px) {
    .under .main-visual{
      height: 460px;
      aspect-ratio: auto;
      position: relative;
      overflow: hidden;
    }
    .under .main-visual img{
      width: 1366px;
      max-width: 1366px;
      position: absolute;
      left: calc(50% - 683px);
    }
  }

.under .lead{
  margin:3.2rem auto 3.2rem;
  line-height: 1.6;
  font-size: 1.2rem;
  }
  .under .lead p{
    font-size: 1.25rem;
  }
  @media screen and (min-width:1024px) {
    .under .lead{
      margin-bottom:70px;
    }
  }

.under .l-nav{
  width: 960px;
  margin: 3.2rem auto;
  padding-bottom: 0;
}
  .under .l-nav ul{
    display: flex;
    justify-content: center;
  }
    .under .l-nav ul li{
      width: 25%;
      padding: 0 10px;
    }
      .under .l-nav ul li a{
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #000;
        height: 45px;
        color: #000;
        font-size: 20px;
      }
      .under .l-nav ul li a:hover{
        opacity:1 !important;
        background: #000;
        color: #fff;
      }
  @media screen and (max-width:959px) {
    .under .l-nav{
      /* display: none; */
      width: 100%;
      /* padding-bottom: 60px; */
    }
      .under .l-nav ul{
        flex-wrap: wrap;
      }
        .under .l-nav ul li{
          width: auto;
          padding: 2px 2px;
        }
          .under .l-nav ul li a{
            height: auto;
            padding: .6rem .6rem;
            font-size: 1.2rem;
          }
  }

.under .sec84{
  width:84%;
  }
  @media screen and (min-width:820px) {
    .under .sec84{
      width:90%;
    }
  }
  @media screen and (min-width:1024px) {
    .under .sec84{
      width:860px;
    }
  }

  .under .sec{
  margin-left:auto;
  margin-right:auto;
  font-size: 1.2rem;
  line-height: 1.6;
}
  .under .sec img{
    max-width: 100%;
    vertical-align: top;
  }

.under .sec90{
  width:90%;
}
  @media screen and (min-width:1024px) {
    .under .sec90{
      width:860px;
    }
  }

.under .section-bg{
  padding: 3.2rem 0;
}
.under .heading-sq{
  margin-bottom: 2.4rem;
  font-size:1.7rem;
  font-weight:600;
}
.under .heading-sq:before{
  content: "■";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .3em;
  color: #000;
}

.under .h01{
  margin-bottom: .3em;
  font-size:1.8rem;
  font-weight:600;
  color:#002e55;
}
.under .h02{
  margin-bottom: .2em;
  font-size:1.4rem;
  font-weight:600;
  color:#002e55;
}
.under .h03{
  padding-bottom: .6em;
  margin-bottom: .6em;
  border-bottom: 1px solid #595757;
  font-size:1.95rem;
  font-weight:400;
}
  @media screen and (min-width:960px) {
    .under .h03{
      font-size: 26px;
      color: #595757 !important;
    }
  }
.under .h04{
  margin-bottom: .3em;
  font-size:1.75rem;
  font-weight:800;
}
.under .h05{
  display: flex;
  align-items: center;
  width: 100%;
  padding: .4rem;
  margin-bottom: 1em;
  background: #000;
  color: #fff;
}
  .under .h05 .num{
    display: inline-block;
    width: 2rem;
    margin-right: .6rem;
    border-right: 1px solid #fff;
    text-align: center;
  }


.under .ingredient-table{
  margin: 0 auto;
}
  .under .ingredient-table th,
  .under .ingredient-table td{
    padding: .4em;
    border-bottom: 1px solid rgba(35,25,21,0.2);
    text-align: left;
    vertical-align: middle;
    font-size: 0.9375rem;
  }
  .under .ingredient-table th.dot,
  .under .ingredient-table td.dot{
    border-bottom: 1px dotted rgba(35,25,21,0.2);
  }
  .under .ingredient-table th.icon,
  .under .ingredient-table td.icon{
    text-align: center;
    font-size: 0.8125rem;
    }
    .under .ingredient-table th.icon img,
    .under .ingredient-table td.icon img{
      max-width: 70%;
      margin-bottom: .4rem;
    }
  .under .ingredient-table th.nobd,
  .under .ingredient-table td.nobd{
    border-bottom: none !important;
  }
  .under .ingredient-table th{
    font-weight:600;
    white-space: nowrap;
  }
  .under .ingredient-table td{
  }
    /* .under .ingredient-table td.wsn{
      width: 3em;
      text-align: center;
    } */
  .under .ingredient-table ul{
    padding-left: 1.2rem;
  }
    .under .ingredient-table ul li{
      list-style-type: disc;
    }
  @media screen and (min-width:960px) {
    .under .ingredient-table th,
    .under .ingredient-table td{
      padding: 1em 1em;
    }
    .under .ingredient-table td{
    }
      /* .under .ingredient-table td.wsn{
        width: 4em;
      } */
  }

.under .products-detail{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
  .under .products-detail > .img{
    width: 17%;
  }
  .under .products-detail > .txt{
    width: 65%;
  }
    .under .products-detail > .txt h3{
      margin-bottom: .4em;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .under .products-detail > .txt h4{
      margin-bottom: .2em;
      font-size: 1.1rem;
      font-weight: 600;
    }
    .under .products-detail > .txt .tag{
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
      .under .products-detail > .txt .tag li{
        display: inline-block;
        min-width: 6.2em;
        padding: .3em .6em;
        margin-right: .2rem;
        margin-bottom: 2px;
        border: 1px solid #727171;
        line-height: 1;
        font-size: 1.0rem;
        color: #727171;
        text-align: center;
      }
    .under .products-detail > .txt .spec{
    }
      .under .products-detail > .txt .spec.and-img{
        display: flex;
        justify-content: start;
        align-items: flex-end;
      }
        .under .products-detail > .txt .spec.and-img .txt{
          padding-bottom: 1em;
        }
        .under .products-detail > .txt .spec.and-img .img{
          padding-left: 1em;
          max-width: calc(40px + 1em);
        }
  @media screen and (min-width:960px) {
    .under .products-detail{
      width: 90%;
      width: 100%;
      padding-left: 62px;
      padding-left: 32px;
      justify-content: start;
    }
    .under .products-detail > .img{
      width: 111px;
      width: 30%;
      text-align: center;
    }
    .under .products-detail > .txt{
      width: auto;
      width: 70%;
      padding-left: 62px;
    }
      .under .products-detail > .txt h3{
        font-size: 29px;
      }
      .under .products-detail > .txt .tag{
        margin-bottom: 1.5rem;
        .under .products-detail > .txt .tag li{
          margin-right: .6rem;
        }
      }
      .under .products-detail > .txt .spec{
      }
        .under .products-detail > .txt .spec.and-img{
          justify-content: start;
        }
          .under .products-detail > .txt .spec.and-img .img{
            padding-left: 1em;
            max-width: calc(80px + 1em);
          }
  }

.att-pcp{
  padding: 1rem;
  border: 1px solid rgba(35,25,21,0.6);
  font-size: 0.85em;
}
.att-pcp span.bd{
  border: 1px solid rgba(35,25,21,0.6);
  padding: .3rem;
}

.name-block table{
  width: 100%;
  border-top: 1px solid rgba(35,25,21,0.2);
}
  .name-block table th,
  .name-block table td{
    padding: .6rem;
    border-right: 1px solid rgba(35,25,21,0.2);
    border-bottom: 1px solid rgba(35,25,21,0.2);
    vertical-align: middle;
  }
  .name-block table th:last-child,
  .name-block table td:last-child{
    border-right: none;
  }


.under .btn{
  display: flex;
  flex-wrap: wrap;
  padding-top: 3.2rem;
}
  .under .btn a{
    display: block;
    width: 100%;
    padding: .8em 0;
    margin-bottom: 1rem;
    border-radius: .5rem;
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.2;
    position: relative;
  }
  .under .btn a::after{
    content: "";
    display: block;
    width: 2.0rem;
    height: 2.0rem;
    font-size: 2.0rem;
    background: url(../img/btn_ico_dl.svg) center center no-repeat;
    position: absolute;
    top: calc(50% - .5em);
    right: .5em;
  }
  .under .btn a.ext::after{
    background: url(../img/btn_ico_ext.svg) center center no-repeat;
  }
    .under .btn a .fss{
      font-size: .9rem;
    }
  @media screen and (min-width:960px) {
    .under .btn{
      align-items: stretch;
    }
    .under .btn a{
      width: 830px;
      margin: 0 auto;
      font-size: 1.4rem;
    }
  }
  .under .btn a.long-body span{
    display: inline-block;
    transform: scaleX(0.85);
  }
  @media screen and (min-width:960px) {
    .under .btn a.long-body{
      text-align: left;
    }
  }

.under #component{
  padding-top: 3.2rem;
  }
  .under #component .inner{
    width: 100%;
    margin: 0 auto;
    }
    @media screen and (min-width:768px) {
      .under #component .inner{
        width: 700px;
      }
    }
  .component-head{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: .75em;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #002e55;
    }
    .component-head:before{
      content: "";
      display: block;
      margin-right: .5rem;
    }
    .component-head01:before{
      background: url(../img/component_icon01.svg) no-repeat;
      width: 86px;
      aspect-ratio: 86 / 86;
    }
    .component-head02:before{
      background: url(../img/component_icon02.svg) no-repeat;
      width: 86px;
      aspect-ratio: 86 / 91;
    }
    .component-head03:before{
      background: url(../img/component_icon03.svg) no-repeat;
      width: 86px;
      aspect-ratio: 86 / 93;
    }
    .component-head04:before{
      background: url(../img/component_icon04.svg) no-repeat;
      width: 86px;
      aspect-ratio: 86 / 68;
    }
    .component-head05:before{
      background: url(../img/component_icon05.svg) no-repeat;
      width: 86px;
      aspect-ratio: 86 / 84;
    }
  .component-flex{
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .component-flex .label{
    width: calc((120.7168/630)*100%);
  }
  .component-flex .label span{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #b6a56e;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    font-size: 1.5625rem;
    font-weight: 400;
    color: #fff;
  }
  .component-flex .text{
    width: calc((500.9607/630)*100%);
  }
  .component-dl{
    color: #595757;
  }
  .component-dl dt{
    margin-bottom: .2rem;
    }
    .component-dl dt.flex{
      display: flex;
      justify-content: space-between;
    }
  .component-dl dt .box{
    display: block;
    padding: .3rem;
    border: 1.5px solid #595757;
    border-radius: 4px;
    text-align: center;
    font-size: 1.3125rem;
    }
    .component-dl dt.flex .box{
      width: 49%;
    }
  .component-dl dd{
    padding-left: .25rem;
  }
  .component-dl dd p{
    font-size: 1.1875rem;
  }
  .component-dl dd p.note{
    font-size: 0.875rem;
  }

@media screen and (max-width:750px) {
  .component-head{
    font-size: 1.6rem;
    }
    .component-head01:before,
    .component-head02:before,
    .component-head03:before,
    .component-head04:before,
    .component-head05:before{
      width: 51px;
    }
  .component-dl dt .box{
    font-size: 1.2rem;
  }
  .component-dl dd p{
    font-size: 1.15rem;
  }
  .component-dl dd p.note{
    font-size: 1.1rem;
  }
}

.under .moon{
  display: flex;
  justify-content: start;
  align-items: center;
}
.under .moon img{
  width: calc(76.485px * 0.5);
  margin: 1.5rem 1rem 1rem 2rem;
}
.under .moon span{
  display: inline-block;
  font-size: 1.55rem;
  font-weight: 600;
  color: #002e55;
  white-space: nowrap;
}
  @media screen and (min-width:768px) {
    .under .moon img{
      width: calc(76.485px * 1);
      margin: 1.5rem 1rem 1rem 2rem;
    }
    .under .moon span{
      font-size: 1.9375rem;
      line-height: 1.2;
    }
  }

.under .flow{}
.under .flow li{
  position: relative;
  padding-bottom: calc(16px + .5rem);
  margin-bottom: .5rem;
}
.under .flow li:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
}
.under .flow li:after{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  border-top: 16px solid #bbe3f2;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.under .flow li:last-child:after{
  display: none;
}
.under .flow dl{
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 4rem;
  background: #f6f6f6;
}
.under .flow dd{
  font-size: 1.15rem;
  padding-right: 2rem;
}
.under .flow dt{
  width: 60px;
}
.under .flow li:last-child dt img{
  width: 66%;
}
  @media screen and (min-width:768px) {
    .under .flow{
      width: 510px;
      margin: 0 auto;
    }
    .under .flow li{
      padding-bottom: calc(32px + 1rem);
      margin-bottom: 1rem;
    }
    .under .flow li:last-child{
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .under .flow li:after{
      border-style: solid;
      border-right: 70px solid transparent;
      border-left: 70px solid transparent;
      border-top: 32px solid #bbe3f2;
    }
    .under .flow dt{
      width: 100px;
    }
    .under .flow li:last-child dt img{
      width: 70%;
    }
  }



.under #features{
  padding-top: 3.2rem;
}
.under #ingredient{
  padding-top: 3.2rem;
}
.under #spec{
  padding-top: 4.8rem;
}




/* premium.html
----- ----- ----- ----- ----- ----- ----- ----- */
#premium .l-nav ul li a{
  border: 1px solid #b6a56e;
  color: #b6a56e;
}
#premium .l-nav ul li a:hover{
  background: #b6a56e;
  color: #fff;
}
#premium .btn a{
  background: #b6a56e;
  }
  @media screen and (min-width:960px) {
    #premium .btn a{
      width: 49%;
    }
  }
#premium .heading-sq:before{color: #b6a56e;}
#premium .section-bg{background: #F6F2EA;}
#premium .h03{color:#b6a56e;}
#premium .caseList li:before{color: #b6a56e;}
#premium .h04{color:#b6a56e;}
#premium .cl{color:#b6a56e;}
#premium .pagetop a{background-color: #b6a56e;}
#premium .cases li::after{color: #b6a56e;}
#premium .ingredient-table th,
#premium .ingredient-table td{border-bottom: 1px solid #D3CEC9;}
#premium .ingredient-table th.dot,
#premium .ingredient-table td.dot{border-bottom: 1px dotted #D3CEC9;}



/* whitening.html
----- ----- ----- ----- ----- ----- ----- ----- */
#whitening .l-nav ul li a{
  border: 1px solid #b1b8bd;
  color: #b1b8bd;
}
#whitening .l-nav ul li a:hover{
  background: #b1b8bd;
  color: #fff;
}
#whitening .btn a{
  background: #b1b8bd;
  }
  @media screen and (min-width:960px) {
    #whitening .btn a{
      width: 49%;
    }
  }
#whitening .heading-sq:before{color: #b1b8bd;}
#whitening .section-bg{background: #F4F5F6;}
#whitening .h03{color:#b1b8bd;}
#whitening .caseList li:before{color: #b1b8bd;}
#whitening .h04{color:#b1b8bd;}
#whitening .cl{color:#b1b8bd;}
#whitening .pagetop a{background-color: #b1b8bd;}
#whitening .cases li::after{color: #b1b8bd;}
#whitening .ingredient-table th,
#whitening .ingredient-table td{border-bottom: 1px solid #E4E5E5;}
#whitening .ingredient-table th.dot,
#whitening .ingredient-table td.dot{border-bottom: 1px dotted #E4E5E5;}
#whitening #component .component-flex .label span{background: #b1b8bd;}

#whitening #component .component-flex.bottom-image{align-items: end;}
#whitening #component .component-flex.bottom-image .label figure img{
  margin-bottom: .5rem;
}
#whitening #component .component-flex.bottom-image .label figcaption{
  text-align: center;
  font-size: 0.625rem;
}
#whitening #component .w50p{
  width: 50%;
  margin: 1rem auto 0;
  text-align: left;
  font-size: 0.875rem;
}
#whitening .btn a.long-body span{
  transform: scaleX(0.75);
  white-space: nowrap;
  position: absolute;
  left: -25px;
}
@media screen and (max-width:750px) {
  #whitening #component .component-flex.bottom-image .label figcaption{
    font-size: 1.0rem;
  }
  #whitening #component .w50p{
    width: 84%;
    font-size: 1.1rem;
  }
  #whitening .btn a.long-body span{
    transform: scaleX(0.75);
    position: static;
    left: auto;
  }
}

/* perio.html
----- ----- ----- ----- ----- ----- ----- ----- */
#perio .l-nav ul li a{
  border: 1px solid #dfa2af;
  color: #dfa2af;
}
#perio .l-nav ul li a:hover{
  background: #dfa2af;
  color: #fff;
}
#perio .btn a{
  background: #dfa2af;
  }
  @media screen and (min-width:960px) {
    #perio .btn a{
      width: 49%;
    }
  }
#perio .heading-sq:before{color: #dfa2af;}
#perio .section-bg{background: #FCF2F4;}
#perio .h03{color:#dfa2af;}
#perio .caseList li:before{color: #dfa2af;}
#perio .h04{color:#dfa2af;}
#perio .cl{color:#dfa2af;}
#perio .pagetop a{background-color: #dfa2af;}
#perio .cases li::after{color: #dfa2af;}
#perio .ingredient-table th,
#perio .ingredient-table td{border-bottom: 1px solid #EBE2E3;}
#perio .ingredient-table th.dot,
#perio .ingredient-table td.dot{border-bottom: 1px dotted #EBE2E3;}
#perio #component .component-flex .label span{background: #dfa2af;}

#perio #features{
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  }
  #perio #features .inner{
    width: 100%;
    margin: 0 auto;
    }
    @media screen and (min-width:768px) {
      #perio #features .inner{
        width: 700px;
      }
    }

#perio #features .section{}
#perio #features .section h3{
  margin-bottom: 1.2em;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #002e55;
}
#perio #features .section .in-box{
  padding: 5% 0;
  background: #f6f6f6;
}
#perio #features .section .in-box h4{
  padding: 0 5%;
  margin-bottom: .75em;
  color: #595757;
  font-size: 1.1rem;
  font-weight: 600;
  }
  #perio #features .section .in-box h4:before{
    content: "■";
    display: inline;
    margin-right: .2em;
  }
#perio #features .section .in-box .cullum01{
  padding-left: 5%;
  padding-right: 5%;
}
#perio #features .section .in-box .flex{
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  background: url(../img/perio_features_bg.svg) center calc(50% - (35.1801px * -0.25)) no-repeat;
  background-size: calc(43.6562px * 0.5) calc(35.1801px * 0.5);
}
#perio #features .section .in-box .cullum02{
  width: calc(50% - (43.6562px * 0.35));
}
#perio #features .section .in-box .result{
  padding: 0 5%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #74747a;
}
#perio #features .section .in-box .under-arrow{
  position: relative;
  padding-bottom: calc(13px + 1.5rem);
  margin-bottom: 1.5rem;
}
#perio #features .section .in-box .under-arrow:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 28px solid transparent;
  border-left: 28px solid transparent;
  border-top: 13px solid #dfa2af;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

#perio #features .evaluation-list{}
#perio #features .evaluation-list dt{
  margin-bottom: .25rem;
}
#perio #features .evaluation-list dt:before{
  content: "[ "; display: inline;
}
#perio #features .evaluation-list dt:after{
  content: " ]"; display: inline;
}
#perio #features .evaluation-list dd{
  margin-bottom: 1rem;
}
#perio #features .evaluation-list dd:last-child{
  margin-bottom: 0;
}

  @media screen and (min-width:768px) {
    #perio #features .section .in-box{
      background: #f6f6f6;
    }
    #perio #features .section .in-box h4{
      padding: 0 105px;
    }
    #perio #features .section .in-box .cullum01{
      padding-left: 105px;
      padding-right: 105px;
    }
    #perio #features .section .in-box .flex{
      padding: 0 105px;
    }
    #perio #features .section .in-box .result{
      padding: 0 32px;
    }
  }

#perio .btn a.long-body span{
  transform: scaleX(0.9);
  white-space: nowrap;
  position: absolute;
  left: 14px;
}
@media screen and (max-width:750px) {
  #perio .btn a.long-body span{
    transform: scaleX(0.95);
    position: static;
    left: auto;
  }
}



/* hys.html & hys_gel.html
----- ----- ----- ----- ----- ----- ----- ----- */
#hys .l-nav ul li a{
  border: 1px solid #7dbfdf;
  color: #7dbfdf;
}
#hys .l-nav ul li a:hover{
  background: #7dbfdf;
  color: #fff;
}
#hys .btn a{
  background: #7dbfdf;
  }
  @media screen and (min-width:960px) {
    #hys .btn a{
      width: 49%;
    }
  }
#hys .heading-sq:before{color: #7dbfdf;}
#hys .section-bg{background: #EBF6FB;}
#hys .h03{color:#7dbfdf;}
#hys .caseList li:before{color: #7dbfdf;}
#hys .h04{color:#7dbfdf;}
#hys .cl{color:#7dbfdf;}
#hys .pagetop a{background-color: #7dbfdf;}
#hys .cases li::after{color: #7dbfdf;}
#hys .ingredient-table th,
#hys .ingredient-table td{border-bottom: 1px solid #B6B3B3;}
#hys .ingredient-table th.dot,
#hys .ingredient-table td.dot{border-bottom: 1px dotted #B6B3B3;}
#hys #component .component-flex .label span{background: #7dbfdf;}

#hys #use{
  padding-top: 3.2rem;
  }
  #hys #use .inner{
    width: 100%;
    margin: 0 auto;
    }
    @media screen and (min-width:768px) {
      #hys #use .inner{
        width: 700px;
      }
    }
#hys #use .head-care{
  padding-left: 1em;
  position: relative;
  margin-bottom: .5rem;
}
#hys #use .head-care:before{
  content: "";
  display: block;
  width: 38px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#hys #use .head-care span{
  display: block;
  padding: .25rem 0 .25rem 4rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
#hys #use .head-day-care:before{
  border: 3.5px solid #ff960f;
  background: #fff url(../img/hys_use_head-day-care.svg) center center no-repeat;
  background-size: 32px 32px;
}
#hys #use .head-care span{
  background: #ffd567;
  border-bottom: 4px solid #ff960f;
}
#hys #use .head-special-care:before{
  border: 3.5px solid #435793;
  background: #fff url(../img/hys_use_head-special-care.svg) center center no-repeat;
  background-size: 31px 31px;
}
#hys #use .head-special-care span{
  background: #7dbfdf;
  border-bottom: 4px solid #435793;
}
#hys #use .sub-title{
  padding-left: 5rem;
}
#hys #use .hys-btn{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc((478 / 630) * 100%);
  padding: .75rem 1rem;
  margin: 1rem auto 0 auto;
  background: #BBE3F2;
  border-radius: 8px;
}
#hys #use .hys-btn.nonbtn{
  margin-bottom: 1rem;
  background: none;
  border: 3px solid #b1b8bd;
}
#hys #use .hys-btn:before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 9px solid #727171;
  border-right: 0;
}
#hys #use .hys-btn.nonbtn:before{
  display: none;
}
#hys #use .hys-btn span{
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 600;
  color: #727171;
  white-space: nowrap;
}
#hys #use .hys-btn img{
  width: auto;
  max-height: 40px;
}
  @media screen and (min-width:768px) {
    #hys #use .head-care:before{
      width: 76px;
    }
    #hys #use .head-care span{
      padding: .5rem 0 .5rem 5rem;
      font-size: 1.5rem;
    }
    #hys #use .head-day-care:before{
      border: 7px solid #ff960f;
      background-size: 64px 64px;
    }
    #hys #use .head-care span{
      border-bottom: 8px solid #ff960f;
    }
    #hys #use .head-special-care:before{
      border: 7px solid #435793;
      background-size: 62px 62px;
    }
    #hys #use .head-special-care span{
      border-bottom: 8px solid #435793;
    }
    #hys #use .sub-title{
      padding-left: 5.5rem;
    }
    #hys #use .flex{
      display: flex;
      justify-content: space-between;
      margin-top: 1.5rem;
    }
    #hys #use .hys-btn{
      display: flex;
      width: 44%;
      padding: .75rem 1rem;
      margin: 0 0 0 0;
      transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s;
    }
    #hys #use .hys-btn:hover{
      opacity: 0.75;
    }
    #hys #use .hys-btn.nonbtn:hover{
      opacity: 1;
    }
    #hys #use .hys-btn:before{
      border-style: solid;
      border-top: 21px solid transparent;
      border-bottom: 21px solid transparent;
      border-left: 18px solid #727171;
    }
    #hys #use .hys-btn span{
      text-align: center;
      font-size: 1.25rem;
    }
    #hys #use .hys-btn img{
      /* max-width: 56px; */
      width: auto;
      max-height: 78px;
    }
  }

  @media screen and (max-width:767px) {
    #hys #use .component-flex{
      justify-content: center;
    }
    #hys #use .component-flex .label.spnone{
      display: none;
    }
  }

#hys .btn a.long-body span{
  transform: scaleX(0.9);
  white-space: nowrap;
  position: absolute;
  left: 14px;
}
  @media screen and (max-width:750px) {
    #hys .btn a.long-body span{
      transform: scaleX(0.95);
      position: static;
      left: auto;
    }
  }



/* clear_gel.html
----- ----- ----- ----- ----- ----- ----- ----- */
#clear_gel .l-nav ul li a{
  border: 1px solid #b1b8bd;
  color: #b1b8bd;
}
#clear_gel .l-nav ul li a:hover{
  background: #b1b8bd;
  color: #fff;
}
#clear_gel .btn a{
  background: #b1b8bd;
  }
  @media screen and (min-width:960px) {
    #clear_gel .btn a{
      width: 49%;
    }
  }
#clear_gel .heading-sq:before{color: #b1b8bd;}
#clear_gel .section-bg{background: #F4F5F6;}
#clear_gel .h03{color:#b1b8bd;}
#clear_gel .caseList li:before{color: #b1b8bd;}
#clear_gel .h04{color:#b1b8bd;}
#clear_gel .cl{color:#b1b8bd;}
#clear_gel .pagetop a{background-color: #b1b8bd;}
#clear_gel .cases li::after{color: #b1b8bd;}
#clear_gel .ingredient-table th,
#clear_gel .ingredient-table td{border-bottom: 1px solid #A8A3A1;}
#clear_gel .ingredient-table th.dot,
#clear_gel .ingredient-table td.dot{border-bottom: 1px dotted #A8A3A1;}

#clear_gel .w520{
  width: 100%;
  margin-bottom: 3.4rem;
}
@media screen and (min-width:768px) {
  #clear_gel .w520{
    width: 520px;
    margin: 0 auto 3.4rem;
  }
}

#clear_gel .component-flex{
  display: block;
}
#clear_gel .component-flex .text{
  width: 100%;
}
#clear_gel .component-head{
  display: block;
  margin-bottom: 3rem;
  font-size: 1.75rem;
  }
  #clear_gel .component-head:before{
    content: "●";
    display: inline;
  }
#clear_gel .tips{}
#clear_gel .tips dl{
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  /* padding: 1rem .75rem; */
  /* background: #f2f2f2; */
}
#clear_gel .tips dt{
  width: 40%;
  margin-bottom: .5rem; /**/
}
#clear_gel .tips dd{
  /* width: 58%; */
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: #002e55;
  text-align: center; /**/
}
#clear_gel .flavor{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
#clear_gel .flavor li{
  text-align: center;
}
#clear_gel .flavor .apple{
  width: 100%;
  color: #c8d627;
  margin-bottom: 1rem;
}
#clear_gel .flavor .orange{
  width: 50%;
  color: #eec600;
}
#clear_gel .flavor .peach{
  width: 50%;
  color: #e0a8c7;
}
#clear_gel .flavor li img{
  width: 110px;
  aspect-ratio: 1 / 1;
}
#clear_gel .flavor li figcaption{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
}
#clear_gel .flavor li figcaption:before{
  content: "";
  display: inline-block;
  height: 1.6em;
  margin-right: .4rem;
}
#clear_gel .flavor .apple figcaption:before{
  background: url(../img/icon_apple-mint.svg) no-repeat;
  aspect-ratio: 38.72 / 41.44;
}
#clear_gel .flavor .orange figcaption:before{
  background: url(../img/icon_orange-mint.svg) no-repeat;
  aspect-ratio: 39.88 / 40.78;
}
#clear_gel .flavor .peach figcaption:before{
  background: url(../img/icon_peach.svg) no-repeat;
  aspect-ratio: 31.82 / 42.1;
}
@media screen and (min-width:768px) {
  #clear_gel .flavor li{
    padding: 1rem;
  }
  #clear_gel .flavor .apple{
    width: 33%;
    margin-bottom: 0;
  }
  #clear_gel .flavor .orange{
    width: 33%;
  }
  #clear_gel .flavor .peach{
    width: 33%;
  }
  #clear_gel .flavor li img{
    margin-bottom: 1rem;
  }
  #clear_gel .flavor li figcaption{
    font-size: .9rem;
  }
}
#clear_gel .moon img{
  margin: 1.5rem 1rem 1rem 1rem;
}
#clear_gel .flow{
  margin-bottom: 2rem;
}
#clear_gel .kids{
  margin-bottom: .75rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  color: #002e55;
}
#clear_gel .kids img{
  height: 26px;
}

#clear_gel .products-detail.detail2-bdtop{
  padding-top: 1rem;
  border-top: 1px solid #b8bcc3;
}

@media screen and (min-width:768px) {
  #clear_gel .kids{
    text-align: left;
  }
  #clear_gel .kids img{
    height: 52px;
  }
  #clear_gel .products-detail.detail2-bdtop{
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #b8bcc3;
  }
}