@charset "UTF-8";
/* CSS Document */
.main-img {
  width: 100vw;
  height: 50vh;
  object-fit: cover;
}
/*==========================================
product description
===========================================*/
.description h1 {
  margin-bottom: 2em;
}
.description h1 span {
  margin-left: 1em;
  font-size: 70%;
  color: #777;
}
.description > div:not(:last-of-type) {
  margin-bottom: 100px;
}
.description .colmn-3, .description .colmn-2 {
  display: flex;
  flex-flow: row wrap;
}
.description .colmn-2 > li {
  width: 50%;
  padding: 0 1em;
  margin-bottom: 3em;
}
.description div ul li > img {
  margin-bottom: 5px;
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.description div ul li >img[src*="../img/products/04/"],
.description div ul li >img[src*="../img/products/05/"],
.description div ul li >img[src*="../img/products/06/"],
.description div ul li >img[src*="../img/products/08/"],
.description div ul li >img[src*="../img/products/f-"]{
  height: auto;
}
.description .inline-block {
  margin-top: 0.5em;
}
.description .inline-block li {
  display: inline-block;
  margin-right: 2em;
}
.description .inline-block li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.5em;
  background-color: #aaa;
}
.description div.colmn-2 {
  display: flex;
  flex-flow: row;
  align-items: center;
  font-size: 14px;
}

.description div.colmn-2 img {
  width: 40%;
}
.description .colmn-3 li {
  width: calc(100%/3 - 1em);
}
.description .colmn-3 li:not(:last-of-type) {
  margin-right: 1em;
}
.description dd p + ul {
  margin-bottom: 2em;
}
.description .colmn-4 {
  display: flex;
  flex-flow: row wrap;
}
.description .colmn-4 li {
  width: calc(100%/4 - 24px);
  margin: 10px;
  font-size: 14px;
  padding: 0 1em;
}
.description .colmn-4 li:not(:last-of-type) {
  margin-right: 1em;
}
.description .colmn-4 li::after {
  content: "";
  width: 5px;
  height: 10px;
  background-image: url(../img/icon/arrow.png);
}
/*oil*/
.oil {
  margin: 1em 0;
}
.description .oil p {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.oil img{
  width: 100%;
}
/*cleansing*/
.p-type {
  display: flex;
  flex-flow: row;
  margin: 1em 0;
}
.description .p-type li {
  border: var(--border);
  border-radius: 100px;
  margin: 5px 5px 0 0;
  padding: 1px 8px;
  font-size: 90%;
  text-align: center;
}
/*==========================================
select
===========================================*/
.select h1 {
  margin-bottom: 0.5em;
}
.select h2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.type {
  display: inline-block;
  right: 0;
  background-color: var(--black);
  color: var(--white);
  padding: 2px 1em;
  border-radius: 100px;
  font-size: 88%;
}

.select > ul {
  margin: 1em 0 3em 0;
  display: flex;
  flex-flow: row wrap;
}
.select > ul > li {
  width: calc(100%/2 - 10px);
  border: var(--border);
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 1em 1em 0.5em 1em;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
}
.select >.colmn-2>li{
  width: calc(50% - 10px);

}
.select > .colmn-3 li{
  width: calc(100%/3 - 15px);
}
.select .cleansing > li{
  width: calc(100%/3 - 10px);
}
.select > ul > li:not(:nth-of-type(4n)), .select .cleansing > li:not(:nth-of-type(3n)) {
  margin-right: 10px;
}
.select .colmn-3>li{
  margin: 5px!important;
}
.select > ul > li::before {
  position: absolute;
  bottom: 23px;
  right: 18px;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #aaa;
  border-right: 2px solid #aaa;
  transform: rotate(45deg);
}
.select li p {
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0;
}
.select li ul {
  font-size: 70%;
}
.select li .select-p {
  display: block;
  text-align: center;
  color: #555;
  word-wrap: break-word;
  border-top: var(--border);
  padding-top: 1em;
  margin-top: 1.5em;
}
li h3 {
  line-height: 1.5;
}
li p br {
  display: none;
}
.select li img{
  max-width: 200px;
  width: 100%;
  display: block;
  margin: 0 auto !important;
}
.select ul .repeat {
  width: 100%;
  margin: 10px 0 !important;
}
.select ul .repeat a {
  text-align: center;
  margin-bottom: 5px
}
.select .repeat::before {
  bottom: 20px;
}

/*==========*/
.contact{
border-top: var(--border);
padding-top: 100px;
margin-top: 100px;
}
/*==========================================
SP
===========================================*/
@media screen and (max-width: 768px) {
  .main-img {
    height: 100vw;
  }
  h1 {
    text-align: left;
    margin-bottom: 1em;
  }
  /*description============================*/
  .description .colmn-2, .description .colmn-3 ,.description div.colmn-2{
    flex-flow: column;
  }
  .description .colmn-2 > li, .description .colmn-3 > li {
    width: 100%;
    margin-bottom: 3em;
  }
  
  .description .colmn-3 li:not(:last-of-type) {
    margin-right: 0;
  }
  .description .colmn-3 li img {
    width: 40%;
    min-width: 150px;
    margin: 0 1em 0 0;
    float: left;
  }
  .description div.colmn-2 img {
    height: 100%;
    object-fit: cover;
  }
  h4 + p {
    font-size: 14px;
  }
  .description .colmn-4 li{
    width: 100%;
  }
  .description .colmn-4 li img{
    width: 40%;
  }
  .description div.colmn-2 >img{
    width: 100%;
  }
  /*select=================================*/
  .select > ul > li{
    width: 100%;
    margin: 5px 0 !important;
  }
  .select > .colmn-3 > li{
    margin: 5px 0;
    width: calc(50% - 10px);
  }
  .select > .colmn-2 > li{
    width: 100%;
  }
  .select > ul > li:nth-of-type(2n-1) {
    margin-right: 10px;
  }
  .select > ul > li:nth-of-type(2n) {
    margin: 5px 0;
  }
  .select .colmn-3 li img{
    width: 100%;
  }
  li p br {
    display: inline;
  }
  /*cleansing=====*/
  .p-type {
    margin: 1em 0;
    flex-flow: wrap;
/*    flex-flow: column;*/
  }
  /*aroma=====*/
  .select .fragrance > li, .select .cleansing > li {
    width: 100%;
    margin: 5px 0 !important;
  }
  .fragrance a {
    text-align: left;
  }
  .select .colmn-2 > li img, .select .cleansing > li img {
    width: 40%;
    min-width: 150px;
    margin: 0 1em 1em 0;
  }
  .colmn-2 > li > a > div, .cleansing > li > a > div {
    display: flex;
    align-items: center;
  }
  .colmn-2 > li > a > div *, .cleansing > li > a > div * {
    text-align: left;
  }
  .colmn-2 ul,.cleansing ul {
    margin-bottom: 1.5em;
  }
  /*btn=================================*/
  .select + a {
    margin: 0 2em;
  }
}