@charset "UTF-8";
/* css Document */
/* タブレット用設定 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (max-width: 800px) {
  
  .pc_hidden {display: block;}
  .sp_hidden {display: none;}
  
  .annotation {
    font-size: 1em;
    text-align: left;
  }
  
  html {font-size: min(3.75vw, 30px);}
  .menu-btn {right: 20px;}
  
  /* ↓ top ↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  
  #top .container {
    position: relative;
    display: block;
  }

  #top .left {
    width: 100%;
    height: auto;
  }
  
  #top img {
    width: 100%;
    margin-top: 0;
}
  
  #top .left #title {
    width: 75%;
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
  }
  
  #top .right {
    width: 100%;
    height: auto;
    margin-left: 0;
  }
  
  #st11 {
    margin-top: 0;
  }
  
  #st12 {
    font-size: 0.9em;
    line-height: 2em;
    letter-spacing: 0.12em;
  }
  
  #st13 {
    font-size: 1em;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    vertical-align : super;
    margin-top: 2em;
    margin-bottom: 1em;
  }

  #list_top {
    width: 75%;
  }

  #list_top p {
    font-size: 1em;
    line-height: 2em;
    letter-spacing: 0.1em;
  }

  #list_top div {
    padding: 0.9em 0;
  }

  #list_top li {
    font-size: 0.8em;
    line-height: 2.2em;
    letter-spacing: 0.14em;
  }

  #top .annotation {
    font-size: 0.6em;
    margin-left: 13%;
  }
  
  /* ↓ rhythm ↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

  #pms_rhythm {display: block;}
  
  #st21 {
    font-size: 1.35em;
    line-height: 1em;
    letter-spacing: 0.1em;
    margin-top: 0;
  }

  #box21 {width: 100%;}
  
  #img_box22 {
    margin: 0 auto;
  }
  
  #box22 {
    font-size: 0.8em;
    line-height: 2em;
    letter-spacing: 0.1em;
  }
  
  #img_box23 {
    width: 78.5%;
    height: auto;
    margin: 0 auto;
  }
  
  #pms_rhythm .annotation{
    font-size: 0.6em;
    margin: 1.5em 1em 7em;
  }

  
  /* ↓ shigeki ↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  
  #pms_sigeki .container {
    width: 78.5%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  
  #pms_sigeki .container .right {
    width: 100%;
    height: auto;
    margin-top: 2em;
    margin-bottom: 3em;
  }
  
  #pms_sigeki .container .left {
    width: 100%;
  }
  
  #pms_sigeki .container .annotation {
    width: 100%;
    font-size: 0.6em;
    text-align: right;
    margin: 2em 0 5em;
  }
  
  #st31 {
    font-size: 1.35em;
    line-height: 1em;
    letter-spacing: 0.1em;
    margin-top: 0;
    text-align: center;
  }
  
  #box32 {
    width: 90.8%;
    height: auto;
    margin: 2em auto;
    font-size: 0.8em;
    line-height: 2em;
    letter-spacing: 0.1em;
  }
  
  #st34 {
    width: 61%;
    height: auto;
    font-size: 0.8em;
    line-height: 1em;
    letter-spacing: 0.13rem;
    color: #655D5B;
    padding: 0.5em 0 0.5em;
  }
  
  .st35 {
    font-size: 0.7em;
    letter-spacing : 0.1em;
  }
  
  .st36 {
    font-size: 1em;
    letter-spacing : 0.1em;
  }
  
  .bf_orange {
    padding: 1em 0;
    box-sizing: border-box;
    margin: 0.5em 0;
  }
  
  
  /* ↓ skincare line ↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  
  #pms_skincare_line {
    background-image: url("../images/bg-flower_sp.jpg");
  }
  
  #pms_skincare_line #flame_radius {
    width: 78.5%;
    height: auto;
  }
  
  #bg-gradation {
    width: 65%;
    height: auto;
    padding: 0.5em 0 0;
  }
  
  #st41 {
    font-size: 0.55em;
    line-height: 1em;
    letter-spacing: 0.1em;
  }
  
  #st42 {
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0.15em;
  }
  
  .img_feature {
    width: 3em;
    height: 3em;
    margin-right: 0.5em;
  }
  
  .st43 {
    font-size: 0.8em;
    line-height: 1.7em;
    letter-spacing: 0.2em;
    text-align: left;
    margin-top: 0;
    align-self: center;
  }
  
  .st44 {
    font-size: 0.7em;
    line-height: 1.8em;
    vertical-align : super;
    margin: 1.7em 0;
  }
  
  .feature_container .box {width: 45%;}
  
  #ceramide {margin: 1.5em 0;}
  
  .extract {
    font-size: 0.8em;
    line-height: 1.3em;
  }
  
  .component {
    font-size: 0.65em;
    line-height: 1.3em;
  }
  
  #moji_extract_cactus {
    white-space: normal;
  }
  
  #box41 {
    width: 70%;
    height: auto;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  #box41 .box {
    width: 45%;
    margin: 0 auto 1em;
  }
  
  .bg-c_green {
    width: 5.5em;
    height: 5.5em;
  }

  .bg-c_green p {
    font-size: 0.75em;
    line-height: 1.2em;
    letter-spacing: 0.12em;
    padding-top: 35%;
  }
  
  #pms_skincare_line .annotation {
    font-size: 0.6em;
    line-height: 1.4em;
    text-align: left;
    margin: 1em;
  }
  
/* ↓ LINE UP ↓ --------------------------------------------------- */ 

  #section-skincare_line h2 {margin: 1em 0;}
  
  #st51 {
    font-size: 0.7em;
    line-height: 1.2em;
    letter-spacing : 0.11em;
  }

  #st52 {
    font-size: 1.6em;
    line-height: 1.1em;
    letter-spacing: 0.15em;
  }
  
  #box51 {
    width: 74%;
    height: auto;
    margin: 0 auto;
  }
  
  #box51 .box {
    width: 100%;
    margin-bottom: 3em;
  }
  
  #box51 dt {
    font-size: 1em;
    letter-spacing: 0.1em;
    padding-bottom: 0.5em;
  }
  
  #box51 dd {
    font-size: 0.75em;
    line-height: 1.8em;
    letter-spacing: 0.15em;
    text-align: justify;
    text-align-last: left;
  }
  
  #box51 dd p {
    margin: 0.5em 0 0;
    text-align-last: center;
    letter-spacing: 0.065rem;
}
  
  #section-skincare_line .annotation {
    font-size: 0.8em;
  }
  
  /* ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ */
  
  #box52 {
    margin-top: 0;
  }

  #box52 .box {
    margin-bottom: 2rem;
  }
  
  .texture {
    width: 100%;
    height: auto;
  }
  
  .b_radius {
    border-radius: 50%;
    width: 5em;
    height: 5em;
  }
  
  .st3 {
    font-size: 1.3em;
    line-height: 1em;
    letter-spacing: -0.06em;
  }
  
  .st4 {
    font-size: 0.5em;
    line-height: 1em;
    letter-spacing: 0.1em;
  }
  
  .texture_box {
    ont-size: 0.78em;
    line-height: 1.8em;
    letter-spacing: 0.1em;
  }
  
  /* how to use -------------------------------------------------- */
  
  #how_to_use {
    margin-bottom: 15rem;
  }
  
  #how_to_use h2 {margin: 3em 0 1em;}
  
  #st61 {
    font-size: 1.3em;
    line-height: 1.1em;
    letter-spacing: 0.1em;
  }
  
   .how_to_use_box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  
  .dropdown {
    width: 100%;
    hright: auto;
    font-size: 1.25em;
    line-height: 1em;
    letter-spacing: 0.1em;
  }
  
  .dropLabel {
    padding: 0.6em 0;
}
  
  .box2_left {
    width: 37.5%;
    padding: 1rem 0;
  }
  
  .box2_left img {
    width: 66.7%;
    height: auto;
    margin: 0 auto;
  }

  .box2_right {
    width: 62.5%;
    padding: 1rem 0;
    text-align: left;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  }
  
  .howto_st1 {
    font-size: 0.8em;
    letter-spacing: 0.05em;
    line-height: 1.5em;
  }

  .howto_st2 {
    font-size: 0.7em;
    line-height: 1.5em;
    letter-spacing: 0.1em;
  }

  .howto_st3 {
    font-size: 0.65em;
    line-height: 1.3em;
    letter-spacing: 0.1em;
  }
  
  #return {right: 20px;}
  
}