@charset "UTF-8";
/* SCSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-style: normal;
  color: #585858;
  vertical-align: baseline;
  font-weight: normal;
  line-height: 1;
  font-family: "Meiryo", serif; }

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block; }

ul {
  list-style: none; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
  background: transparent; }

.none {
  display: none; }

.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/* 点滅 */
.blinking {
  -webkit-animation: blink 2s ease-in-out infinite alternate;
  -moz-animation: blink 2s ease-in-out infinite alternate;
  animation: blink 2s ease-in-out infinite alternate; }

@-webkit-keyframes blink {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@-moz-keyframes blink {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@keyframes blink {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
.main-clm {
  max-width: 1920px;
  margin: auto; }

#top .left {
  float: left;
  width: 50%;
  text-align: right;
  padding-top: 5vw; }
  #top .left img {
    margin: 2vw; }
#top .right {
  float: right;
  width: 50%;
  text-align: left;
  padding-top: 12vw; }
  #top .right img {
    display: block;
    margin: 2vw; }
  #top .right .buy-btn {
    padding-top: 26px; }

#about {
  background: #FFF9FD;
  text-align: center; }
  #about h1 {
    margin-bottom: 30px; }
    #about h1 img {
      padding-top: 13vw; }
  #about p {
    max-width: 26vw;
    margin: auto;
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.2em; }
    #about p span {
      font-weight: bold; }

#use-image img {
  width: 100%; }

#how {
  text-align: center; }
  #how img {
    padding-top: 18vw;
    max-width: 100%; }

#merit h1 {
  text-align: right;
  padding-top: 3vw;
  padding-right: 2vw; }
#merit .merit-box {
  margin: 5vw auto;
  text-align: center; }
  #merit .merit-box img {
    max-width: 100%; }

#photo01 {
  background: #F4F4FC;
  text-align: center; }
  #photo01 img {
    margin: 6vw auto;
    max-width: 100%; }

#txt01 h2, #doctor h2 {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 17vw;
  margin-bottom: 20px;
  text-align: center; }
#txt01 p, #doctor p {
  max-width: 600px;
  margin: auto;
  line-height: 1.4em; }

#product {
  background: #F9EAF2; }
  #product .product-box {
    text-align: center; }
    #product .product-box .left, #product .product-box .right {
      display: inline-block;
      max-width: 12vw;
      margin: 7vw 2vw; }
      #product .product-box .left img, #product .product-box .right img {
        width: 100%; }
    #product .product-box .center {
      display: inline-block;
      width: 12vw;
      max-width: 310px;
      /*　高さ中心表示　*/
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      /* safari用 */
      transform: translateY(-50%);
      /*　高さ中心表示ここまで　*/ }
      #product .product-box .center p {
        text-align: left;
        margin-bottom: 18px; }
      #product .product-box .center img {
        margin-bottom: 18px;
        max-width: 100%; }

@media only screen and (max-width: 1700px) {
  #merit .merit-box {
    margin: 0px auto; } }
@media only screen and (max-width: 1300px) {
  #top, #about, #use-image, #how, #merit, #doctor, #photo01, #txt01 {
    display: block;
    width: 100%;
    float: none; }

  #top {
    height: 700px !important; }

  #use-image {
    height: auto !important;
    margin-bottom: 5vw; }

  #how {
    height: auto !important; }
    #how img {
      padding-bottom: 18vw; }

  #about {
    height: 500px !important; }
    #about p {
      max-width: 90%; }

  #merit {
    height: auto !important; }
    #merit .merit-box {
      width: 95%;
      margin: 30px auto; }
    #merit h1 {
      padding-top: 0px; }

  #doctor {
    margin: 35vw auto; }

  #photo01 {
    height: auto !important; }

  #txt01 {
    height: auto !important;
    margin: 27vw auto; }
    #txt01 p {
      max-width: 90%;
      margin: auto; }

  #product {
    height: auto !important; }
    #product .product-box .left, #product .product-box .right {
      max-width: 24%; }
    #product .product-box .center {
      width: 30%; } }
@media only screen and (max-width: 700px) {
  .sm {
    display: block; }

  .pc {
    display: none; } }
@media only screen and (min-width: 701px) {
  .sm {
    display: none; }

  .pc {
    display: block; } }
@media only screen and (max-width: 600px) {
  #top {
    height: auto !important; }
    #top .left, #top .right {
      float: none;
      width: 100%;
      text-align: center;
      margin-bottom: 30px; }
      #top .left img, #top .right img {
        margin: auto; }

  #txt01 p {
    text-align: left; } }