@CHARSET "UTF-8";

/* ===================================================================
フォントの指定
=================================================================== */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* ゴシック体 */
html body {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body {
  color: #30bdff;
  background: #fff;
}

html body #container {
  line-height: 1;
}

html body #container article,
html body #container section,
html body #container footer {
  line-height: 1.5;
}

img {
  display: block;
}

header a,
nav a,
footer a {
  color: #fff;
  text-decoration: none;
}

a:not(.button):hover {
  color: red ! important;
}

/* フォントサイズ設定 */
@media screen and (max-width: 480px) {
  html {
    font-size: 13px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 641px) {
  html {
    font-size: 16px !important;
  }
}

/* ===================================================================
ベース
=================================================================== */
article {
  margin: 1rem auto 0;
}

#container.area_flex {
  min-height: 100vh;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
}

#container .size,
#main .sub_size {
  margin-left: auto;
  margin-right: auto;
}

#main .sub_size {
  max-width: 800px;
}


#container {}


/* header */
header {}

#header_menu {
  margin-top: 1rem;
}

#header_menu>div {
  margin-bottom: 1.5rem;
}

#header_menu>div a {
  text-decoration: none;
  color: #30bdff;
}


/* wrapper */
#container>#wrapper {}

#wrapper>#main.flex-item,
#wrapper>#sidebar.flex-item {
  -webkit-align-self: stretch;
  -moz-align-self: stretch;
  -ms-align-self: stretch;
  align-self: stretch;
}

/* footer */
footer a {
  color: #30bdff;
}

/* copyright */
#bsc-copyright {
  font-size: .7rem;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1 {
  font-size: 1.5rem;
}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5 {
  margin-top: 2rem;
}

h2 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  color: #0749f0;
  font-weight: normal;
}

h2 img {
  width: 60%;
}

#link-banner_area h3 {
  text-align: center;
  font-size: 2rem;
  color: #084d6e;
  margin-bottom: 1.5rem;
}


/* ===================================================================
section
=================================================================== */
#wrapper *+section {
  margin-top: 2rem;
}


/* ===================================================================
テキスト
=================================================================== */
p {}

p+p {
  margin-top: 1.5em;
}

.red {
  color: #f00;
}

.blue {
  color: #008afc;
}

.skyblue {
  color: #30bdff;
}

.pink {
  color: #f25298;
}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index: 2147483647;
  display: none;
  position: fixed;
  bottom: 4.3rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 3rem;
  height: 3rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 3rem;

  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover {
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

/* link-icon */
.link-icon,
.link-icon:before {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
  text-align: left;
}

.bold {
  font-weight: bold;
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.conversion img {
  width: 100%;
}


.zoom:before {
  content: url(./images/icon_zoom.png);
  margin-right: 0.5em;
}

/* ===================================================================
list
=================================================================== */


/* ===================================================================
area
==================================================================== */
/* swiper */
.swiper-wrapper,
.swiper-slide {
  line-height: 0 !important;
}

/* lightbox */
.area_lightbox {
  margin: 1rem auto !important;
  text-align: center;
  /* flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  /* justify-content:均等配置 */
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-flex-pack: justify;
  -moz-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.area_lightbox .lightbox-item {
  line-height: 0;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  text-align: center;
}

.area_lightbox .lightbox-item img {
  display: block;
  width: 99%;
  margin: auto;
}

.area_lightbox .lightbox-item.is-empty {
  height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* .button */
ul.area_button {
  margin: 0 !important;
  text-align: center;
}

ul.area_button>li {
  display: inline-block !important;
}

ul.area_button>li {
  margin: 1rem;
}

.button {
  /* 単体でも一応使える(左寄せになる) */
  margin: 1rem auto;
  padding: .75rem 1rem;
  display: inline-block;
  background: #5978a6;
  text-decoration: none;
  border: 2px solid #5978a6;
  /* 文字と文字の間隔をあける */
  line-height: 1;
  letter-spacing: .2em;
  min-width: 10em;
  color: #fff;
}

.button.back {
  background: #fff;
  color: #000;
}

.button:hover {
  background: #fff;
  color: #5978a6;
  cursor: pointer;
}

.notice {
  margin-bottom: 2rem;
}

.notice h3 {
  text-decoration: none;
  font-size: 1.3rem;
  padding-bottom: 1.5rem;
}

.notice p {
  text-indent: 0;
}

.notice p+p {
  margin-top: .5rem;
}

#link-banner_area:not(.no-bg) {
  border: 1.5px solid #aaa;
  border-radius: 10px;
  padding: 1.5rem 1rem;
}

#link-banner_area div+div {
  margin-top: 1rem;
}

#greeting .partner-salon>img {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

#news p {
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  color: #605e5e;
  font-size: 1.2rem;
}

#beforeafter ul {
  margin-top: .5rem;
}

#beforeafter ul li {
  justify-content: center;
  width: 100%;
}

#merit {
  background-color: #86bfec;
}

#merit h2 {
  color: #fff;
}

#merit ul li {
  margin-bottom: 2rem;
}

#merit p {
  color: #fff;
  font-size: 1.2rem;
}

#flow {
  background-color: #6db2e9;
}

#flow h2 {
  color: #fff;
}

#flow ul li {
  width: 17%;
  margin-bottom: 2rem;
}

#flow h4 {
  margin-top: 0;
  color: #f5ff00;
  font-size: 2.5rem;
}

#flow h4:before {
  content: 'STEP ';
  font-weight: normal;
  font-size: 1.7rem;
}

#flow p {
  color: #fff;
}

#first>p {
  width: 80%;
  font-size: 1.2rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.8rem;
}

#menu .menu_txt {
  color: #605e5e;
  margin: 2rem 0 2rem 2rem;
}

#gel>p {
  text-align: center;
  font-size: 2rem;
  color: #5483cf;
}

#gel>div.img {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 1.7rem;
}

#gel>div.img img {
  width: 30%;
  height: auto;
  margin: 0 auto;
}

#gel div.price>p.price {
  text-align: center;
  font-size: 1.7rem;
  padding-top: 1rem;
  color: #000000;
  text-decoration: underline #f5a66d;
}

#gel div.price p.black {
  text-align: center;
  font-size: 1.7rem;
  color: #000000;
}

#gel>p>span.orange {
  text-align: center;
  font-size: 1.8rem;
  color: #f5a66d;
}

#plan>div {
  margin-top: 2rem;
}

#faq dl {
  margin: 1.5rem auto;
  padding: 2rem .2rem;
}

#faq dl dd+dt {
  margin-top: 2rem;
}

#faq dl dt {
  color: #207ea9;
}

#faq dl.area_faq>* {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.2rem;
}

#faq dl.area_faq a {
  text-decoration: none;
}

#faq dl.area_faq>*:before {
  position: absolute;
  left: 0;
}

#faq dl.area_faq>dt:before {
  content: 'Q';
}

#faq dl.area_faq>dd:before {
  content: 'A';
}

#gallery ul li {
  width: 19%;
  margin: .5rem 0;
}

#photo ul {
  width: 95%;
  margin-top: .8rem;
  margin-right: auto;
  margin-left: auto;
}

#photo ul li {
  width: 50%;
}

#sns>div {
  margin-top: 2rem;
}

#map ul.store-add {
  margin-left: 1.5rem;
}

#map .parking {
  margin-top: 2rem;
}

#map .parking img {
  width: 80%;
}

#ozone {
  text-align: center;
}

#ozone ul li .ozone-img {
  width: 65%;
  margin-right: auto;
  margin-left: auto;
}

#app {
  margin-top: 4.5rem;
  margin-bottom: 3rem;
  background-color: #c6e7f9;
  padding: 1rem 0 !important;
  border: 3px dotted #fff;
  box-shadow: 0 0 0 10px #c6e7f9;
}

#app ul li>div>div+div {
  margin-top: .8rem;
}

#app ul li.app_sp img {
  padding: 0;
  margin-right: 2rem;
}

#app ul li.app_banner {
  position: relative;
}

#app ul li.app_banner img {
  padding: 1rem;
  margin-bottom: 10rem;
}

#app ul li.app_banner .qr {
  padding-top: 1rem;
  width: 100%;
  position: absolute;
  top: 50px;
  bottom: 50px;
}


/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px) {
  footer {
    margin-bottom: 17%;
  }

  #header_menu>ul {
    display: inline;
  }

  #header_menu>ul li {
    width: 100%;
    text-align: center;
    margin-top: .7rem;
  }

  #header_menu>ul li img {
    margin: 0 auto;
  }

  #header_menu>ul li.sp-none {
    display: none;
  }

  #news p {
    width: 100%;
    text-align: center;
  }

  #flow ul li {
    width: 45%;
  }

  #flow ul li p {
    font-size: 1.2rem;
  }

  #first>p {
    width: 100%;
  }

  #menu .menu-disp img {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
  }

  #menu .menu_txt {
    font-size: 1.2rem;
  }

  #gel>p {
    text-align: center;
    font-size: 1.8rem;
    color: #5483cf;
  }

  #gel>div.img {
    margin: 0 auto;
    text-align: center;
  }

  #gel>div.img img {
    display: none;
  }

  #gel div.price {
    margin: 0 auto;
    text-align: center;
  }

  #gel div.price>p.price {
    text-align: center;
    font-size: 1.5rem;
    color: #000000;
    text-decoration: underline #f5a66d;
  }

  #gel div.price p.black {
    text-align: center;
    font-size: 1.5rem;
    color: #000000;
  }


  #gallery ul li {
    width: 48%;
  }

  #app ul li {
    width: 50%;
  }

  #app ul li img {
    width: 85%;
    margin: .2rem auto;
  }

  #app ul li.app_sp img {
    margin-right: 0;
    padding: 1rem;
  }

  #app ul li.app_banner {
    margin-bottom: 1rem;
  }

  #map .map-disp {
    display: inline;
  }

  #map .map-disp>div+div {
    margin-top: 1.5rem;
  }

  #map .map-disp img {
    margin-right: auto;
    margin-left: auto;
  }

  #map ul.store-add {
    margin-left: 0;
    text-align: center;
  }

  #map .parking img {
    width: 100%;
  }

  #ozone ul li .ozone-img {
    display: none;
  }

  #link-banner_area h3 {
    font-size: 1.5rem;
  }
}

/* タブレット1 */
@media screen and (min-width: 641px) {

  .conversion,
  #ozone>.ozone-img {
    display: none !important;
  }

  #app ul li>div+div {
    margin-top: 1rem;
  }
}


@media screen and (min-width: 641px) and (max-width: 801px) {
  #flow ul li {
    width: 30%;
  }
}


/* タブレット2以下 */
@media screen and (max-width: 800px) {
  #menu .menu-disp {
    display: inline;
  }

  #merit ul li {
    width: 33%;
  }

}


/* タブレット2以上 */
@media screen and (min-width: 801px) {}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px) {}

/* ipad以下 */
@media screen and (max-width: 1024px) {
  .size {
    padding-left: .8rem;
    padding-right: .8rem;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 1025px) {
  .size {
    width: 900px;
  }

  #bsc-copyright {
    margin: .25rem .25rem 0;
  }
}