@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.global-contents__inner  > nav.c-breadcrumb { display: none}
.only_sp { display: none !important}
#visual { margin: 0 auto 150px}
#visual .title {  background: url(../images/bg_pc.jpg) no-repeat; background-size: cover; padding: 110px 0}
#visual h1 { font-size: 18px; margin: 0 auto; text-align: center}
#visual p { font-size: 16px; margin: 0 auto; text-align: center}


#container { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; letter-spacing: 0.05em; line-height: 2.0em; margin: 0 auto}
#container a { color: #111; display: block; text-decoration: none; }
#container a.rollover, #container a.rollover img { transition: opacity 0.5s; backface-visibility: hidden}
#container a.rollover:hover, #container a.rollover img:hover { opacity: 0.75}
#container img { display: block}

/*#container h2 { font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 600; line-height: 1; margin: 0 auto 5px; text-align: center}
#container h3 { font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 600; line-height: 1; margin: 0 auto 15px; text-align: left}*/
/*#container h3 span { color: #898989; font-size: 30px}*/


#container p.sub_photo { margin: 0 auto 120px}
#container p.copy { font-size: 14px; margin: 0 auto 60px; text-align: center; }
#container p.text { font-size: 13px; line-height: 1.8em; margin: 0 auto 80px; text-align: center}
#container p.btn { margin: 0 auto; text-align: center}
#container p.btn a { background: #efefef; border-radius: 15px; color: #111; display: inline-block; font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1; margin: 0 auto 80px; padding: 7px 30px; position: relative; white-space: nowrap}
#container p.btn a:after {
  background: #111;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  right: 10%;
}
#container p.btn a:hover:after { transition: 0.3s; transform: translateX(3px)}



/* SAM'U GALACTO PORE SEBUM CARE CREAM  */
#container section#cream { margin: 0 auto 100px}
#container section#cream h3 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2em; margin: 0 auto 10px; padding-top: 15px}
#container section#cream h3 small { display: inline-block; font-size: 16px; font-weight: 400; margin-top: 10px}
#container section#cream h4 { font-size: 20px; font-weight: 600; line-height: 1.2em; margin: 0 auto 10px}
#container section#cream ul { display: block; margin: 0 auto}
#container section#cream ul li { list-style: none; margin: 0 auto; text-align: left; width: 500px}
#container section#cream ul li:last-child { padding: 0 20px}
#container section#cream ul li p { font-size: 14px; margin: 0 auto 20px}
#container section#cream ul li p.type { font-family: "Montserrat", sans-serif; font-size: 15px; line-height: 1.0em; margin: 15px auto 30px}
#container section#cream ul p.btn a { background: #efefef; border-radius: 15px; color: #111; display: inline-block; font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 1; padding: 5px 30px; position: relative}
#container section#cream ul p.btn a:after {
  background: #111;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10%;
}


/* FEATURE */
#container section#feature { margin: 0 auto 180px; padding: 0 40px; box-sizing: border-box}
#container section#feature h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 auto 60px; padding: 0 0 10px}
#container section#feature p { font-size: 18px; margin:  0 auto 50px; text-align: center}
#container section#feature ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto}
#container section#feature ul li { list-style: none; margin: 0; text-align: left; width: 46.0%}
#container section#feature ul li:last-child { width: 50.0%}
#container section#feature ul li p { font-size: 17px; line-height: 1.9em; text-align: left; margin: 0 auto 25px}
#container section#feature ul li p span { display: inline-block; text-indent: -1.8em; padding-left: 1.8em}


/* INGREDIENTS  */
#container section#ingre { background: #dcf5f9; padding: 40px 40px 50px; box-sizing: border-box; margin: 0 auto 90px}
#container section#ingre h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 auto 40px; padding: 0 0 10px}
#container section#ingre h4 { font-size: 20px; font-weight: 600; line-height: 1.2em; margin: 0 auto 10px}
#container section#ingre ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 50px; width: 93.0%}
#container section#ingre ul li { list-style: none; margin: 0; text-align: left; width: 16.5%}
#container section#ingre ul li:last-child { padding-top: 15px; width: 76.0%}
#container section#ingre ul li p { font-size: 15px; line-height: 1.6em; text-align: left; margin: 0 auto 20px}


/* TEXTURE */
#container section#textute { margin: 0 auto 80px; padding: 0 40px; box-sizing: border-box}
#container section#textute h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 auto 60px; padding: 0 0 10px}
#container section#textute p { font-size: 18px; margin:  0 auto 50px; text-align: center}
#container section#textute ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto}
#container section#textute ul li { list-style: none; margin: 0; text-align: left; width: 46.0%}
#container section#textute ul li:last-child { width: 50.0%}
#container section#textute ul li p { font-size: 17px; text-align: left; margin: 0 auto 25px}
#container section#textute ul li p b { display: inline-block; font-size: 20px; padding-bottom: 10px}


/* HOW TO USE  */
#container section#howto { padding: 60px 40px 0; box-sizing: border-box; margin: 0 auto 40px}
#container section#howto h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 auto 30px; padding: 0 0 10px}
#container section#howto p { font-size: 17px; text-align: left; margin: 0 auto 25px}


/* TIPS  */
#container section#tips { width: calc(100% - 80px); background: url(../images/ph04.png) no-repeat 740px 120px #dcf5f9; background-size: 260px 410px; padding: 60px 40px 40px; box-sizing: border-box; margin: 0 auto 90px}
#container section#tips h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 0 50px; padding: 0 0 10px; text-align: left; width: 65%}
#container section#tips h4 { font-size: 20px; font-weight: 600; line-height: 1.2em; margin: 0 auto 10px}
#container section#tips p { font-size: 17px; text-align: left; margin: 0 auto 40px}
#container section#tips p b { display: inline-block; font-size: 20px; padding-bottom: 10px}



/* SKIN CARE STEP  */
#container section#special { padding: 0 40px; box-sizing: border-box; margin: 0 auto}
#container section#special h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.2em; margin: 0 auto 50px; padding: 0 0 10px; width: 94.0%}
#container section#special h4 { color: #46b2f3; font-size: 18px; font-weight: 600; height: 70px; line-height: 1.2em; margin: 0 auto 20px; text-align: center}
#container section#special p.photo { padding-bottom: 20px}
#container section#special p.step { color: #7d7d7d; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.0em; margin: 0 auto 10px; text-align: center}
#container section#special p.step.blue { color: #1aa7c2}
#container section#special p.name { font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.4em; margin: 0 auto 10px; min-height: 60px; text-align: center; white-space: nowrap}
#container section#special ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 94.0%}
#container section#special ul li { position: relative; width: 24.3333%; margin: 0 3%; padding: 10px 45px; box-sizing: border-box}
#container section#special ul li:after {
  position: absolute;
  top: 130px;
  right: -75px;
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  background-image: url('../images/arrow.png');
  background-position: center;
  background-size: contain;
}
#container section#special ul li:first-child:after {
  position: absolute;
  top: 130px;
  right: -75px;
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  background-image: url('../images/star.png');
  background-position: center;
  background-size: contain;
}
#container section#special ul li:nth-child(3):after, #container section#special ul li:nth-child(6):after {
  content: none;
}

@media screen and (max-width:767px) {
  .only_pc { display: none !important}
  .only_sp { display: block !important}

  #visual { margin: 0 auto 13.5%}
  #visual .title { background: url(../images/bg_pc.jpg) no-repeat; background-size: cover; padding: 8% 6.6%}
  #visual ul li { width: 100%; min-height: 500px; position: relative}
  #visual h1 { font-size: 14px; line-height: 1.8em; margin: 0 auto; text-align: left}
  #visual p.logo { position: absolute; top: 8.6%; left: calc(54.4% / 2); z-index: 1; margin: 0 auto; text-align: center; width: 45.6%}
  #visual p.logo img { width: 100%; height: auto}
  #visual p.name { position: absolute; top: 21.8%; left: 0; z-index: 1; color: #fff; font-family: "Montserrat", sans-serif; font-size: 3.3vw; font-weight: 600; line-height: 1.2em; margin: 0 auto; text-align: center; width: 100%}
  #visual p.text { position: absolute; top: 25.4%; left: 0; z-index: 1; color: #fff; font-size: 3vw; margin: 0; text-align: center; width: 100%}
  #visual p.pic { position: absolute; top: 0; left: 0; z-index: 0}
  #visual p.pic img { width: 100%; height: auto}

  /* SAM'U GALACTO PORE SEBUM CARE CREAM  */
  #container section#cream { margin: 0 auto 60px}
  #container section#cream h3 { font-size: 15px; margin: 0 auto 10px; padding-top: 0}
  #container section#cream h4 { font-size: 15px; margin: 0 auto 10px; text-align: left}
  #container section#cream ul { display: block; margin: 0 auto; padding: 0 35px; box-sizing: border-box}
  #container section#cream ul li { list-style: none; margin: 0 auto; text-align: left; width: 100.0%}
  #container section#cream ul li:last-child { width: 100.0%}
  #container section#cream ul li p { font-size: 14px; text-align: left; margin: 0 auto 20px}
  #container section#cream ul li p.new { background: #ebf5e5; display: inline-block; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.0em; margin-bottom: 10px; padding: 6px 18px}
  #container section#cream p.text { font-size: 12px; margin: 0 auto 30px}
  #container section#cream ul p.btn { margin: 0 auto; text-align: center}
  #container section#cream ul p.btn a { background: #efefef; border-radius: 15px; color: #111; display: inline-block; font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0; line-height: 1; margin: 0 auto 50px; padding: 5px 30px; position: relative}
  #container section#cream ul p.btn a:after {
    background: #111;
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10%;
  }

  /* FEATURE */
  #container section#feature { margin: 0 auto 80px; padding: 0}
  #container section#feature h3 { display: none; font-size: 18px; margin: 0 auto 40px; padding: 0 0 10px}
  #container section#feature ul { display: block; margin: 0 auto 20px; width: 100.0%}
  #container section#feature ul li { list-style: none; margin: 0; text-align: left; width: 100.0%}
  #container section#feature ul li:last-child { margin: 0 auto; padding-top: 5%; width: 86.5%}
  #container section#feature ul li p { font-size: 13px; line-height: 1.9em; text-align: left; margin: 0 auto 25px}
  #container section#feature ul li p span { display: inline-block; text-indent: -1.8em; padding-left: 1.8em}


  /* INGREDIENTS  */
  #container section#ingre { padding: 40px 35px 10px; margin: 0 auto 60px}
  #container section#ingre h3 { font-size: 18px; margin: 0 auto 40px; padding: 0 0 10px}
  #container section#ingre h4 { font-size: 15px; margin: 0 auto 10px}
  #container section#ingre ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 20px; width: 93.0%}
  #container section#ingre ul li { list-style: none; margin: 0; text-align: left; width: 28.5%}
  #container section#ingre ul li:last-child { padding-top: 0; width: 64.0%}
  #container section#ingre ul li p { font-size: 12px; line-height: 1.6em; text-align: left; margin: 0 auto 20px}
  #container section#ingre p.text01 { font-size: 13px; line-height: 1.6em; text-align: left; margin: 15px auto 25px}
  #container section#ingre p.text02 { font-size: 12px; line-height: 1.6em; text-align: left; margin: 0 auto 50px}
  #container section#ingre .column { background: url(../images/bg02_sp.jpg) no-repeat; background-size: cover; padding: 30px; text-align: left; box-sizing: border-box; width: 100%}
  #container section#ingre .column h4 { font-size: 14px}
  #container section#ingre p { font-size: 13px; line-height: 1.6em}


  /* TEXTURE */
  #container section#textute { margin: 0 auto 80px; padding: 0 35px; box-sizing: border-box}
  #container section#textute h3 { font-size: 18px; margin-bottom: 40px}
  #container section#textute p { font-size: 14px; margin:  0 auto 30px; text-align: left}
  #container section#textute ul { display: block; margin: 0 auto}
  #container section#textute ul li { list-style: none; margin: 0 auto 10px; text-align: left; width: 100.0%}
  #container section#textute ul li:last-child { margin-bottom: 0; padding-top: 4%; width: 100.0%}
  #container section#textute ul li p { font-size: 13px; text-align: left; margin: 0 auto 25px}
  #container section#textute ul li p b { display: inline-block; font-size: 15px; padding-bottom: 0}


  /* HOW TO USE  */
  #container section#howto { padding: 0 35px; box-sizing: border-box; margin: 0 auto 35px}
  #container section#howto h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.2em; margin: 0 auto 30px; padding: 0 0 10px}
  #container section#howto p { font-size: 13px; text-align: left; margin: 0 auto 25px}


  /* TIPS  */
  #container section#tips { width: 100%; background: url(../images/ph04.png) no-repeat 80% 20% #dcf5f9; background-size: 104px 164px; padding: 40px 35px 20px; box-sizing: border-box; margin: 0 auto 70px}
  #container section#tips h3 { border-bottom: 1px solid #111; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.2em; margin: 0 0 50.4%; padding: 0 0 10px; text-align: left; width: 100%}
  #container section#tips h4 { font-size: 20px; font-weight: 600; line-height: 1.2em; margin: 0 auto 10px}
  #container section#tips p { font-size: 13px; text-align: left; margin: 0 auto 30px}
  #container section#tips p b { font-size: 16px; padding-bottom: 10px}



  /* SKIN CARE STEP  */
  #container section#special p.btn a { font-size: 10px; letter-spacing: 0; line-height: 1; margin: 0 auto 30px; padding: 7px 18px}
  #container section#special { padding: 10px 20px 0; box-sizing: border-box}
  #container section#special h3 { font-size: 18px; line-height: 1.2em; margin: 0 auto 20px; width: 94.0%}
  #container section#special h4 { font-size: 16px; height: auto; line-height: 1.0em; margin: 0 auto 20px; text-align: center}
  #container section#special p.photo { margin: 0 auto; padding-bottom: 20px; width: 68.5%}
  #container section#special p.step { font-size: 10px; line-height: 1.0em; margin: 0 auto 5px; text-align: center}
  #container section#special p.name { font-size: 10px; letter-spacing: 0; line-height: 1.4em; margin: 0 auto 10px; min-height: auto; text-align: center; white-space: initial}
  #container section#special ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 94.0%}
  #container section#special ul li { position: relative; width: 28.3333%; margin: 0 3% 0 2%; padding: 0; box-sizing: border-box}
  #container section#special ul li:after {
    position: absolute;
    top: 40px;
    right: -18px;
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url('../images/arrow.png');
    background-position: center;
    background-size: contain;
  }
  #container section#special ul li:first-child:after {
    position: absolute;
    top: 40px;
    right: -25px;
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url('../images/star.png');
    background-position: center;
    background-size: contain;
  }
  #container section#special ul li:nth-child(3):after, #container section#special ul li:nth-child(6):after {
    content: "";
  }
  #container section#special p.btn a:after {
  top: 10px;
  right: 9%;
}

}