@charset "utf-8";

@media print, screen and (max-width: 767px) {
  /*ウィンドウ幅が最大767pxまでの場合に適用*/
  .pc_content {
    display: none;
  }
  .sp_content {
    display: block;
  }
  body {
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    font-style: normal;
    background-color: #fff;
    color: #222;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  /*和文明朝フォント＋約半*/
  .mincho_j {
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    transform: scale(0.8, 1);
    font-weight: 200;
    font-style: normal;
    line-height: 2em;
  }
  /*和文ゴシックフォント*/
  .win .gothic_j {
    font-family: YakuHanJP, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  .mac .gothic_j {
    font-family: YakuHanJP, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  .iphone .gothic_j,
  .ipad .gothic_j {
    font-family: YakuHanJP, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  .android .gothic_j {
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  /*欧文フォント*/
  .montserrat {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  .montserrat_light {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 100;
  }
  .montserrat_regular {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 300;
  }
  header {
    position: fixed;
    overflow: hidden;
    padding: 6% 5% 0;
    width: 100%;
    height: 90px;
    z-index: 3;
  }
  header h1#logo {
    display: block;
    float: left;
    width: 90px;
    height: 19px;
    background-image: url(../img/logo.png);
    background-size: cover;
  }
  header.scroll h1#logo {
    display: block;
    float: left;
    width: 90px;
    height: 19px;
    background-image: url(../img/logo_b.png);
    background-size: cover;
  }

  header #manu_cart_sp {
    display: block;
    position: absolute;
    top: 26px;
    right: 90px;
    width: 26px;
    height: 28px;
    background-image: url(../img/cart.svg);
    background-size: cover;
  }
  header.scroll #manu_cart_sp {
    background-image: url(../img/cart_b.svg);
    background-size: cover;
  }
  header.scroll .Toggle span {
    border-bottom: solid 1px #222;
  }
  header.scroll .toggle_txt {
    color: #222;
  }

  /*ハンバーガーメニュー*/
  nav.NavMenu {
    position: fixed; /*表示位置を固定*/
    z-index: 4; /*重ね順を変更*/
    top: 0; /*表示位置を指定*/
    right: 0; /*表示位置を指定*/
    background-color: rgba(255, 255, 255, 0.9);
    color: #fff; /*文字色を黒にする*/
    text-align: center; /*テキストを中央揃え*/
    width: 100%; /*全幅表示*/
    height: 100vh;
    transform: translateX(100%); /*ナビを上に隠す*/
    transition: all 0.6s; /*アニメーションの時間を指定*/
  }
  #side_navi {
    position: relative;
    float: left;
    list-style: none;
    margin: 15% 10% 0;
    width: 80%;
  }
  #side_navi li {
    float: left;
    clear: both;
    text-align: left;
    margin: 0;
  }
  #side_navi li .sub {
    padding-left: 5.333vw;
  }
  #side_navi li a {
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-size: 3.733vw;
    text-decoration: none;
    color: #222;
    line-height: 2.45em;
  }
  nav.NavMenu.active {
    transform: translateY(0%); /*ナビを表示する*/
  }
  #sns_navi {
    position: relative;
    top: 2%;
    float: left;
    width: 80%;
    margin: 0 10%;
    text-align: left;
  }
  #sns_navi .icon_instagram {
    width: 6.667vw;
  }
  #sns_navi .icon_x {
    width: 6.667vw;
    margin-left: 4vw;
  }
  .Toggle {
    display: block;
    position: fixed; /* bodyに対しての絶対位置指定 */
    right: 10px;
    top: 16px;
    width: 56px;
    height: 56px;
    cursor: pointer;
    z-index: 5;
    text-align: center;
  }
  .toggle_txt {
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 10px;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 0.05em;
    color: #fff;
  }
  .Toggle.scroll .toggle_txt {
    color: #222;
  }
  .Toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 1px #fff;
    -webkit-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    transition: 0.35s ease-in-out; /*変化の速度を指定*/
    left: 10px;
  }
  .Toggle.scroll span {
    border-bottom: solid 1px #222;
  }

  .Toggle span:nth-child(1) {
    top: 9px;
  }
  .Toggle span:nth-child(2) {
    top: 18px;
  }
  .Toggle span:nth-child(3) {
    top: 27px;
    width: 16px;
  }
  /* 最初のspanをマイナス45度に */
  .Toggle.active span:nth-child(1) {
    top: 18px;
    left: 12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-color: #000;
  }
  /* 3番目のspanを45度に */
  .Toggle.active span:nth-child(2) {
    top: 18px;
    left: 12px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    border-color: #000;
  }
  /* 3番目透過 */
  .Toggle.active span:nth-child(3) {
    opacity: 0;
    border-color: #0c743f;
  }
  .Toggle.active .toggle_txt {
    color: #222;
  }

  #main_wrapper {
    position: relative;
    background-image: url("../img/mv_sp.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }

  .main_copy_j {
    position: absolute;
    top: 53.6%;
    left: 48%;
    width: 44.533vw;
  }
  #story {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 117.333vw;
    overflow-x: hidden;
  }
  #story_txt3 {
    position: absolute;
    top: 26.667vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
  }
  .beauty {
    width: 100%;
    text-align: center;
  }
  .beauty img {
    width: 49.067vw;
  }
  .batu {
    width: 100%;
    text-align: center;
    padding: 1.2vw 0;
  }
  .batu img {
    width: 7.2vw;
  }
  .technology {
    width: 100%;
    text-align: center;
  }
  .technology img {
    width: 86.4vw;
  }
  .story_txt1 {
    position: absolute;
    top: 65.1vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    text-align: center;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    font-size: 3.733vw;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
  }

  #product_midashi {
    position: absolute;
    top: 26.667vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
  }
  #product_midashi img {
    width: 69.333vw;
  }
  #product01 {
    position: relative;
    background-image: url("../img/proguct01_bg_sp.jpg");
    background-position: center top;
    background-size: 150% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    margin: 0 auto;
    width: 100%;
    height: 464vw;
  }
  .product_box {
    position: absolute;
    top: 51.733vw;
    left: 0;
    right: 0;
    max-width: none;
    width: 100%;
    margin: 0 auto;
  }
  #product_photo01 {
    position: relative;
    top: 0;
    left: 27.467vw;
    width: 48vw;
  }
  .product_spec_box {
    position: absolute;
    right: 0;
    top: 101.333vw;
    width: 100%;
    text-align: center;
  }
  #product_name01_sp {
    width: 61.333vw;
    margin: 0 auto 9.333vw;
  }
  #product_v_name01 {
    position: absolute;
    top: -88vw;
    left: 4.267vw;
    width: 3.733vw;
  }
  .product_spec_txt {
    font-size: 3.733vw;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 2em;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .product_spec_txt span {
    position: relative;
    top: -1.867vw;
    left: -0.267vw;
    font-size: 2.667vw;
  }
  .product_note {
    font-size: 2.667vw;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 2.1em;
    letter-spacing: 0.05em;
    margin: 3.2vw 0 5.9vw;
    color: #888;
  }
  a.product_more_btn {
    display: block;
    margin: 0 auto;
    width: 37.6vw;
    height: 9.6vw;
    line-height: 9.6vw;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background-color: #d4ac74;
    font-size: 3.2vw;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  .product_box2 {
    position: relative;
    top: 258.4vw;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    z-index: 1;
  }
  #product_photo02 {
    position: relative;
    right: 12.8vw;
    float: right;
    width: 69.333vw;
  }
  .product_spec_box2 {
    position: absolute;
    left: 0;
    top: 107vw;
    width: 100%;
    text-align: center;
  }
  #product_name02_sp {
    width: 78.667vw;
    margin-bottom: 9.333vw;
    margin: 0 auto 32px;
  }
  #product_v_name02 {
    position: absolute;
    top: -90.667vw;
    left: 5.333vw;
    width: 4vw;
  }
  .product_spec_txt2 {
    font-size: 14px;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    letter-spacing: 0.05em;
  }
  .product_spec_txt2 span {
    position: relative;
    top: -7px;
    left: -1px;
    font-size: 12px;
  }
  #product02 {
    position: relative;
    background-image: url("../img/product02_bg_sp.jpg");
    background-position: center top;
    background-size: 150% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    margin: 0 auto;
    width: 100%;
    height: 364vw;
  }
  .product_box3 {
    position: relative;
    top: 27vw;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
  }
  #product_photo03 {
    position: relative;
    left: 29.333vw;
    width: 45.333vw;
  }
  .product_spec_box3 {
    position: absolute;
    right: 0;
    top: 96vw;
    width: 100%;
    text-align: center;
  }
  #product_name03_sp {
    width: 57.867vw;
    margin: 0 auto 35px;
  }
  #product_v_name03 {
    position: absolute;
    top: -100.667vw;
    left: 5.333vw;
    width: 4vw;
  }
  .product_spec_txt3 {
    font-size: 3.733vw;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    letter-spacing: 0.05em;
  }
  .product_box4 {
    position: relative;
    top: 113.333vw;
    max-width: 256vw;
    width: 100%;
    margin: 0 auto;
  }
  #product_photo04 {
    position: relative;
    float: right;
    right: 20vw;
    top: -20.8vw;
    width: 60vw;
  }
  .product_spec_box4 {
    position: absolute;
    left: 0;
    top: 66.667vw;
    width: 100%;
    text-align: center;
  }
  #product_name04_sp {
    width: 80vw;
    margin-bottom: 9.333vw;
    margin: 0 auto 35px;
  }
  #product_v_name04 {
    position: absolute;
    top: -65.667vw;
    left: 5.333vw;
    width: 4vw;
  }
  .product_spec_txt4 {
    font-size: 3.733vw;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    letter-spacing: 0.05em;
  }
  .product_spec_txt4 span {
    position: relative;
    top: -1.867vw;
    left: -0.267vw;
    font-size: 3.2vw;
  }
  .product_box5 {
    position: relative;
    top: 165vw;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
  }
  #product_photo05 {
    position: relative;
    left: 29.333vw;
    width: 45.333vw;
  }
  .product_spec_box5 {
    position: absolute;
    right: 0;
    top: 180vw;
    width: 100%;
    text-align: center;
  }
  #product_name05_sp {
    width: 57.867vw;
    margin: 0 auto 35px;
  }
  #product_v_name05 {
    position: absolute;
    top: -70.667vw;
    left: 5.333vw;
    width: 4vw;
  }
  .product_spec_txt5 {
    font-size: 3.733vw;
    font-family: YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    letter-spacing: 0.05em;
  }
  /*フッター*/
  footer {
    position: relative;
    float: left;
    width: 100%;
    height: 205.333vw;
    margin: 0;
    text-align: center;
    padding: 14.933vw 0 0;
    overflow: hidden;
  }
  #footer_left {
    float: left;
    margin-left: 6%;
    text-align: left;
    width: 88%;
  }
  footer .logo {
    float: left;
    width: 24vw;
    margin-bottom: 7.467vw;
  }
  .footer_left_txt01 {
    clear: both;
    text-align: left;
    font-size: 3.2vw;
    width: 100%;
    color: #aaa;
  }
  .footer_left_mail {
    text-align: left;
    width: 100%;
    margin-bottom: 4vw;
    color: #aaa;
  }
  .footer_left_mail a {
    color: #aaa;
    font-size: 5.867vw;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 100;
    text-decoration: none;
  }
  #sns_bottom {
    position: absolute;
    bottom: 10%;
    margin-bottom: 0;
  }
  #sns_bottom .icon_instagram {
    width: 5.333vw;
  }
  #sns_bottom .icon_x {
    width: 5.333vw;
    margin-left: 4vw;
  }
  #copyright {
    position: absolute;
    bottom: 0.7%;
    margin-bottom: 9.333vw;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 100;
    color: #aaa;
    font-size: 2.667vw;
    width: 100%;
    text-align: left;
  }
  .footer_left_txt02 {
    color: #aaa;
    text-align: left;
    width: 100%;
    font-size: 2.667vw;
    font-family: "Montserrat", YakuHanMP, a-otf-ryumin-pr6n, serif;
    font-style: normal;
    font-weight: 100;
    text-decoration: none;
    margin-bottom: 5.333vw;
    white-space: nowrap;
  }
  #footer_navi {
    position: relative;
    top: 0;
    float: left;
    list-style: none;
    margin-right: 0;
  }
  #footer_navi li {
    float: left;
    text-align: left;
    margin-left: 6%;
    width: 100%;
  }
  #footer_navi li .sub {
    padding-left: 4vw;
  }
  #footer_navi li a {
    font-size: 3.2vw;
    text-decoration: none;
    color: #aaa;
    line-height: 2.5em;
  }
  #footer_txt {
    text-align: left;
    color: #fff;
    font-size: 0.76em;
  }
}