@charset "UTF-8";

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  font: inherit;
  word-wrap: break-word;
  border: 0;
  vertical-align: baseline;
  outline: none;
}

body {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 3.5vw;
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
  -webkit-text-size-adjust: 100%;
  font-style: normal;
  line-height: 1.8;
  position: relative;
}

_:-ms-lang(x)::-ms-backdrop,
body {
  font-family: "メイリオ", Meiryo, sans-serif;
}

article,
aside,
canvas,
details,
figcaption,
figure,
header,
footer,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

blockquote,
q {
  quotes: none;
}

strong,
b {
  font-weight: bold;
}

ul,
ol,
li {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

img,
video,
object {
  height: auto;
  border: none;
  display: block;
  max-width: 100%;
  height: auto;
}

ins {
  background: none;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

hr {
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
}

*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

a {
  color: #000;
  text-decoration: none;
  display: block;
  -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

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

body.top-page {
  padding-top: 100vh;
}

main {
  position: relative;
  z-index: 2;
}

.main {
  padding-top: 15vw;
}

.pc {
  display: none;
}

.sp {
  display: block;
}

@font-face {
  font-family: 'Staatliches';
  src: url("../fonts/Staatliches-Regular.ttf");
}

/* button
----------------------------------------------- */

/* midashi
----------------------------------------------- */
.midashi01 {
  width: 43.5%;
  margin: 0 auto;
  padding: 0.2% 0;
  text-align: center;
  font-size: 4.5vw;
  font-family: 'Staatliches';
  letter-spacing: 0.1em;
  border: 2px solid #393a3c;
  color: #3e3e3e;
  position: relative;
  background: #fff;
}

.midashi01:before {
  content: "";
  width: 1px;
  height: 72%;
  position: absolute;
  left: 1vw;
  top: 1vw;
  background: #898989;
}

.midashi01:after {
  content: "";
  width: 1px;
  height: 72%;
  position: absolute;
  right: 1vw;
  top: 1vw;
  background: #898989;
}

.midashi02 {
  position: relative;
  display: block;
  padding: 0 10%;
  font-size: 8vw;
  text-align: center;
  line-height: 85%;
  font-family: 'Staatliches';
  letter-spacing: 3px;
  color: #2fb6e8;
  margin-bottom: 3%;
}

.midashi02:before,
.midashi02:after {
  content: '';
  position: absolute;
  top: 20%;
  display: inline-block;
  width: 20%;
  height: 1px;
  background-color: #a89981;
}

.midashi02:before {
  left: 0;
}

.midashi02:after {
  right: 0;
}

.midashi02 span {
  display: block;
  font-size: 3vw;
  letter-spacing: 0;
  color: #000;
  font-weight: bold;
}

.midashi03 {
  font-weight: bold;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 6%;
}

.midashi03 .jp {
  font-size: 6.2vw;
}

.midashi03 .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #85b7c9;
}

.midashi03:before,
.midashi03:after {
  content: '';
  height: 1px;
  background: #818181;
  display: block;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.midashi03:before {
  margin-right: 4vw;
}

.midashi03:after {
  margin-left: 4vw;
}

.midashi04 {
  text-align: center;
  position: relative;
  margin-bottom: 10%;
}

.midashi04 b {
  display: block;
  font-family: 'Staatliches';
  font-weight: normal;
  font-size: 10vw;
  line-height: 1;
  color: #02a9e8
}

.midashi04:before {
  content: "";
  width: 25%;
  height: 2px;
  position: absolute;
  background: #00a8e7;
  bottom: -24%;
  left: 38%;
}


/* header
----------------------------------------------- */
.header {
  position: fixed;
  width: 100%;
  z-index: 10;
  background: #fff;
}

.header-top {
  width: 46%;
  margin: 0 auto;
  padding: 3% 0;
}

.header-logo {
  padding: 0;
}

.header-item-links {
  display: none;
}

.header-navi {
  display: none;
}

/* navi
----------------------------------------------- */
.foot-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
}

.footer-items {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.footer-items li {
  width: 20vw;
}

.navi-button {
  height: 14.8vw;
  background: #2b2b2b;
  z-index: 10;
  position: relative;
  line-height: 1.8;
}

.navi-button .line {
  width: 8vw;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  -moz-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

.navi-button .line-top {
  top: 9px;
}

.navi-button .line-middle {
  top: 17px;
}

.navi-button .line-bottom {
  top: 25px;
}

.navi-button .line-text {
  position: absolute;
  top: 7.3vw;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-family: 'Staatliches';
  letter-spacing: 0.05em;
}

.navi {
  width: 100%;
  height: 100%;
  background: #503630;
  z-index: 9;
  position: fixed;
  top: 100%;
  left: 0;
}

.navi-inner {
  width: 100%;
  height: 100%;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.navi-inner::-webkit-scrollbar {
  display: none;
}

.navi-scroll {
  width: 100%;
  padding: 1px 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.navi-scroll::-webkit-scrollbar {
  display: none;
}

.navi-logo {
  width: 35%;
  margin: 0 auto 3%;
  padding: 3% 0;
}

.navi-logo img {
  width: 100%;
}

.navi-category {
  width: 90vw;
  margin: 0 auto 10vw;
}

.navi-category {
  width: 80vw;
  margin: 0 auto 10vw;
}

.navi-items {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.navi-items.w100 {
  width: 100%;
  padding-top: 6%
}

.navi-items.w100 li {
  width: 100%
}

.navi-item {
  width: 48%;
  margin-top: -1px;
  font-size: 3.95vw;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  font-weight: bold;
}

.navi-item ul {
  padding-bottom: 2vw;
}

.navi-item li {
  padding-left: 5vw;
  margin-bottom: 3vw;
  font-size: 3.42vw;
  line-height: 1.4;
  position: relative;
}

.navi-item li:before {
  content: '';
  width: 3vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 2.5vw;
  left: 0;
}

.navi-item li a {
  color: rgb(255 255 255 / 79%);
}

.navi-items:last-child .navi-item {
  border-top: none;
}

.navi-item-text {
  padding: 4vw 0 4vw;
  color: #fff;
  position: relative;
  font-size: 3.4vw;
  letter-spacing: -1px;
}

.navi-item-text .arrow {
  position: absolute;
  top: 50%;
  right: 1vw;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.navi-tel {
  width: 85vw;
  height: 16vw;
  margin: 0 auto 8vw;
  font-family: bicyclette;
  font-weight: 400;
  background: #fff;
  -moz-border-radius: 10vw;
  -webkit-border-radius: 10vw;
  border-radius: 10vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.navi-tel .title {
  padding: 1vw 2.5vw 0.9vw;
  margin-right: 4vw;
  color: #fff;
  font-size: 3.68vw;
  background: #1e2c4f;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.navi-tel .number {
  padding-top: 0.5vw;
  font-size: 5.92vw;
}

.navi-opentime {
  margin-bottom: 12vw;
  color: #fff;
  font-size: 3.68vw;
  text-align: center;
  line-height: 1.4;
}

.navi-social-items {
  margin-bottom: 23vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.navi-social-items li {
  margin: 0 4vw;
}

.navi-social-items a {
  color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}

.navi-social-items .icon {
  margin-right: 3vw;
  font-size: 4vw;
}

.navi-social-items .text {
  font-size: 4.47vw;
  font-family: bicyclette;
  font-weight: 700;
}

.navi-open {
  width: 100%;
  height: 100%;
  position: fixed;
}

.navi-open .navi-button {}

.navi-open .navi-button .line {
  background: #fff;
}

.navi-open .navi-button .line-top {
  top: 18px;
  -moz-transform: translate(-50%) rotate(45deg);
  -ms-transform: translate(-50%) rotate(45deg);
  -webkit-transform: translate(-50%) rotate(45deg);
  transform: translate(-50%) rotate(45deg);
}

.navi-open .navi-button .line-middle {
  opacity: 0;
}

.navi-open .navi-button .line-bottom {
  top: 18px;
  -moz-transform: translate(-50%) rotate(-45deg);
  -ms-transform: translate(-50%) rotate(-45deg);
  -webkit-transform: translate(-50%) rotate(-45deg);
  transform: translate(-50%) rotate(-45deg);
}

.navi-open .navi {
  -moz-animation-name: navi-open;
  -webkit-animation-name: navi-open;
  animation-name: navi-open;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navi-open .navi-inner {
  visibility: visible;
  -moz-animation-name: navi-inner-open;
  -webkit-animation-name: navi-inner-open;
  animation-name: navi-inner-open;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -moz-animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navi-close .navi {
  -moz-animation-name: navi-close;
  -webkit-animation-name: navi-close;
  animation-name: navi-close;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.navi-close .navi-inner {
  visibility: hidden;
  -moz-animation-name: navi-inner-close;
  -webkit-animation-name: navi-inner-close;
  animation-name: navi-inner-close;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@-moz-keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@-moz-keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-webkit-keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-moz-keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@-moz-keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

@-webkit-keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

@keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

/* right-btn
----------------------------------------------- */
.right-btn {
  position: fixed;
  right: 0;
  top: 48%;
  /* transform: translate(0, -68%); */
  z-index: 15;
  background: #302aa7;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border-radius: 8px 0 0 8px;
}

.right-btn a {
  padding: 20px 0 0 0;
  margin: 12px 2px;
  color: #fff !important;
  font-weight: bold;
  position: relative;
}

.right-btn img {
  position: absolute;
  width: 55%;
  top: -2px;
  right: 18%;
}

#sincloBox {
  z-index: 15 !important;
}

#sincloBox div#sincloBannerBox div#sincloBanner.sincloBanner {
  /* transform: translateY(18%)!important; */
  top: 34% !important;
}

#sincloBox div#sincloBannerBox #sincloBanner .sincloBannerText {
  margin: 12px 2px !important;
  font-weight: bold !important;
}

#sincloBox div#sincloBannerBox div#sincloBanner.sincloBanner .bannertext {
  font-size: 3vw !important;
}


/* bread
----------------------------------------------- */
.breadcrumb {
  position: absolute;
  background: #503630;
  overflow: hidden;
  margin-bottom: 7.5%;
  top: 350px;
  width: 100%;
}

.breadcrumb-items {
  width: 900px;
  max-width: 100%;
  padding: 0 4%;
  margin: 0 auto;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
}

.breadcrumb-items li {
  font-size: 3.16vw;
  position: relative;
  padding: 0.5% 0;
  color: #fff !important;
}

.breadcrumb-items li:after {
  content: "";
  width: 6vw;
  height: 8vw;
  position: absolute;
  transform: rotate(45deg) translate(-50%, -50%) skew(10deg, 10deg);
  top: 78%;
  right: 2.5vw;
  border-right: 1px solid #cae0e9;
  border-top: 1px solid #cae0e9;
}

.breadcrumb-items li:last-child:after {
  display: none;
}

.breadcrumb-items a {
  display: inline-block;
  color: #fff !important;
}

.breadcrumb-items a:hover {
  opacity: 1;
}

.breadcrumb-items li.breadcrumb-home {
  padding: 0.5% 7vw 0.5% 4vw;
  margin-right: 20px !important;
  background: url(../images/icon-home.png) no-repeat center left;
  background-size: 3.5vw;
  flex: 0 0 auto;
}

.breadcrumb-items li.parent {
  margin-right: 20px !important;
  padding: 9px 27px 5px 0;
  flex: 0 0 auto;
}

.breadcrumb-items li.current {
  padding: 9px 27px 5px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
}

@media screen and (max-width:768px) {
  .breadcrumb {
    top: 42vw;
  }

  .breadcrumb li.breadcrumb-home {
    padding: 0.5% 7vw 0.5% 4vw;
  }

  .breadcrumb li.parent,
  .breadcrumb li.current {
    padding: 0.5% 7vw 0.5% 0;
  }

  .breadcrumb li a {
    display: flex;
    align-items: center;
    line-height: 1 !important;
    height: 100%;
  }
}

/* footer
----------------------------------------------- */
.footer {
  padding: 19% 0 14.6vw;
  border-top: 1px solid #7d8a92;
  position: relative;
}

body:not(.home) .footer {
  margin-top: 50px;
}

.footer-logo {
  width: 60%;
  margin: 0 auto;
}

.footer-navi {
  margin: 10% auto 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-top: 1px solid #e4e4e4;
}

.footer-navi li {
  width: 50%;
  border-bottom: 1px solid #e4e4e4;
}

.footer-navi li:nth-child(1),
.footer-navi li:nth-child(3) {
  border-right: 1px solid #e4e4e4;
}

.footer-navi a {
  font-size: 3.5vw;
  font-weight: bold;
  color: #5a5a5a;
  background: url(../images/footer-navi.png) no-repeat right 4vw center;
  background-size: 4vw;
  padding: 3.3vw;
}

.footer-navi li:last-child {
  width: 100%;
  border-bottom: none;
}

.footer-btm {
  background: #fae9ed;
}

.footer-midashi {
  font-size: 4.2vw;
  font-weight: bold;
  text-align: center;
}

.group-links {
  padding: 4.4% 0 0;
}

.group-link-in {
  width: 93%;
  margin: 3% auto 4vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

.group-link-in li {
  width: 22%;
}

.copyright {
  text-align: center;
  border-top: 1px solid #7d8a92;
  font-size: 2.9vw;
  font-weight: bold;
  letter-spacing: 0.09em;
  padding: 2% 0;
}

.pagetop {
  width: 14vw;
  z-index: 8;
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translate(-50%);
}

.common_page_header {
  margin-top: 0;
}

/* hero
----------------------------------------------- */
.hero {
  padding: 0;
}

.hero-add {
  background: #c3b8b6;
}

.hero-midashi {
  text-align: center;
  padding: 1% 0 6%;
  color: #10b4f6;
}

.hero-midashi .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 12vw;
  letter-spacing: 0.1em;
}

.hero-midashi .jp {
  display: block;
  font-size: 3.4vw;
  font-weight: bold;
  margin-top: -6vw;
  letter-spacing: 0.1em;
  color: #000;
}

/* top
----------------------------------------------- */
.top-inform {
  padding: 0;
}

.top-inform p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - 3em);
}

.top-inform-in {
  padding: 0;
}

.top-inform-in.label-yerrow {
  background: #ccc0b2;
}

.top-inform-in.label-blue {
  background: #feffdd;
}

.top-inform-in a {
  margin: 0 auto;
  font-size: 3vw;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 1.7% 4%;
  color: #707070;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

.top-inform-in.label-yerrow .arrow:before {
  color: #48413b;
  font-size: 120%;
}

.top-inform-in.label-blue .arrow:before {
  color: #bfc346;
  font-size: 120%;
}

.top-policy {
  padding: 7.3% 0 21%;
  background: url("../images/top-policy-bg.jpg") repeat-x center top;
  background-size: 100%;
  overflow: hidden;
}

.top-policy .bx-viewport {
  overflow: visible !important;
}

.top-policy-txt {
  text-align: center;
  font-size: 4.7vw;
  font-weight: bold;
  color: #444a4a;
  margin: 2% 0 0.5%;
}

.top-policy-in {
  margin: 5% auto 3%;
}

.top-policy-img {
  width: 55%;
  margin: 0 auto;
}

.top-policy-in-txt {
  width: 88%;
  margin: 1.2% auto 0;
  text-align: justify;
  font-size: 3.2vw;
  font-weight: bold;
  line-height: 2.1;
}

.top-policy-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff !important;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-price {
  margin-top: -10.5%;
  padding: 14% 0 13%;
  background: url(../images/top-price-bg.png) no-repeat center top;
  background-size: cover;
}

.top-price-txt {
  text-align: center;
  font-size: 4.1vw;
  font-weight: bold;
  color: #fff;
  margin: 6% 0 3%;
}

.top-price-img {
  width: 75%;
  margin: 0 auto;
}

.top-price-txt02 {
  text-align: justify;
  width: 90%;
  margin: 5% auto 7.3%;
  font-size: 3.1vw;
  font-weight: bold;
  line-height: 2.2;
  color: #fff;
}

.top-price-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #503630 !important;
  padding: 2% 0;
  background: url(../images/links-arrow02.png) no-repeat right 20px center #fff;
  border-radius: 50px;
}

.top-reason {
  padding: 10.3% 0 10%;
  text-align: center;
  background: url("../images/top-reason-bg.jpg") repeat-x center top;
  background-size: 100%;
}

.top-reason-ttl {
  font-weight: bold;
  position: relative;
}

.top-reason-ttl .jp {
  font-size: 5.4vw;
  position: relative;
}

.top-reason-ttl .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #85b7c9;
}

.top-reason-ttl .jp:before {
  content: "";
  width: 16%;
  height: 1px;
  background: #818181;
  position: absolute;
  left: -11vw;
  top: 3vw;
}

.top-reason-ttl .jp:after {
  content: "";
  width: 16%;
  height: 1px;
  background: #818181;
  position: absolute;
  right: -11vw;
  top: 3vw;
}

.top-reason-midashi {
  display: inline-block;
  font-size: 4.6vw;
  font-weight: bold;
  margin-top: 3.3%;
  background: url(../images/top-reason-midashi-l.png) no-repeat left center, url(../images/top-reason-midashi-r.png) no-repeat right center;
  background-size: 3vw;
  padding: 0 5vw;
}

.top-reason-in {
  width: 94%;
  margin: 0 auto 2%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start;
}

.top-reason-in li {
  margin: 0.5% 0;
}

.top-reason-txt {
  font-size: 3.2vw;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 2.1;
  width: 94%;
  margin: 0 auto 4%;
  text-align: justify;
}

.top-reason-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff !important;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-effect {
  padding: 11% 0;
  background: #c3b8b6;
}

.top-effect-txt {
  text-align: center;
  font-size: 4.1vw;
  font-weight: bold;
  color: #444a4a;
  margin: 3% 0 2%;
}

.top-effect-label {
  width: 85%;
  margin: 0 auto;
}

.top-effect-midashi {
  text-align: center;
  max-width: 84%;
  margin: 3% auto 5%;
}

.top-effect-midashi p {
  display: inline-block;
  font-size: 4.3vw;
  font-weight: bold;
  padding: 0 1%;
  line-height: 1.4;
  margin-bottom: 1%;
  color: #feffa5;
  background: #503630;
}

.top-effect-img {
  margin: 0 auto;
}

.top-effect-txt02 {
  width: 94%;
  text-align: justify;
  font-size: 3.3vw;
  font-weight: bold;
  margin: 4.5% auto 5%;
  line-height: 2.1;
}

.top-effect-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-first {
  margin: -1% 0 -3%;
  padding: 12% 0;
  background: url(../images/top-first-bg.png) repeat-x center top;
  background-size: contain;
}

.top-first-ttl {
  width: 60%;
  margin: 0 auto;
}

.top-first-in {
  width: 92%;
  margin: 9% auto 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}

.top-first-in li {
  width: 48%;
  margin: 0 1% 3% 1%;
}

/* second
----------------------------------------------- */
.second-content {
  min-height: 50vh;
  width: 92%;
  margin: 0 auto;
}

.second-content-none {
  width: 100%;
}

.second-inner {
  margin: 0 auto;
}

.second-content .inner {
  width: 92%;
  margin: 0 auto;
}

.second-content .blue {
  color: #007ece;
}

/* price
----------------------------------------------- */
.price {
  font-weight: bold;
}

.price .intro {
  border: 1px solid #ccc;
  position: relative;
  margin-bottom: 18%;
  z-index: 3;
}

.price .intro:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/price/intro-bg.jpg);
  position: absolute;
  z-index: -1;
  left: 2%;
  top: 2%;
}

.price .intro .inside {
  background: #fff;
}

.price .intro img {
  object-fit: cover;
  height: 150px;
  width: 100%;
}

.price .intro .textbox {
  padding: 6%;
  background: #fff;
}

.price .intro .ttl {
  font-size: 4vw;
  line-height: 1;
  margin-bottom: 3%;
}

.price .intro small {
  font-family: 'Staatliches';
  font-weight: 500;
  color: #2aa3d0;
  letter-spacing: 4px;
  font-size: 80%;
  display: block;
  margin-top: 5px;
}

.price .intro .txt {
  font-size: 90%;
}

.price .intro .txt b {
  background: linear-gradient(transparent 10%, #fdff91 10%);
}

.price .points {
  background: #00aae9;
  padding: 10% 0;
  position: relative;
}

.price .points:before {
  content: "";
  height: 40px;
  width: 2px;
  background: #02a9e8;
  position: absolute;
  top: -40px;
  right: 50%;
}

.price .points:after {
  content: "";
  width: 15px;
  height: 15px;
  background: #02a9e8;
  position: absolute;
  top: -50px;
  left: 47.8%;
  border-radius: 50%;
}

.price .points .plan .title {
  margin: 0 auto 3%;
  text-align: center;
  color: #fff;
  font-size: 6vw;
  width: 95%;
}

.price .points .plan .title span {
  padding: 3% 5%;
  letter-spacing: 5px;
  font-size: 140%;
}

.price .points .plan .title i {
  display: block;
  font-size: 5vw;
  background: #feff65;
  color: #02a9e8;
  border-radius: 40px;
  padding: 2%;
}

.price .points .plan li {
  background: #fff;
  margin-bottom: 4%;
  padding: 5%;
  border-radius: 16px;
}

.price .points .plan img {
  display: inline-block;
  width: 25%;
  vertical-align: middle;
}

.price .points .plan .textbox {
  display: inline-block;
  width: 70%;
  padding-left: 5%;
  vertical-align: middle;
}

.price .points .plan p {
  font-size: 4.5vw;
  color: #00aae9;
  line-height: 1.4;
  margin-bottom: 3%;
}

.price .points .plan p:nth-child(2),
.price .points .plan p:last-child {
  margin-bottom: 0;
}

.price .points .plan b {
  font-size: 140%;
  display: inline-block;
  color: #007ece;
  background: linear-gradient(transparent 60%, #ff6 60%);
  margin-bottom: 5%;
}

.price .points .plan .tit:last-child b {
  margin-bottom: 0;
}

.price .points .plan .memo-txt {
  color: #fff;
  font-size: 90%;
  text-align: center;
  margin-bottom: 5% !important;
}

.price .points .plan li span {
  color: #007ece;
  line-height: 1.3;
}

.price .points .plan li .write {
  display: block;
  font-size: 110%;
}

.price .points .plan li .strong {
  font-size: 140%;
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.price .points .plan .memo {
  font-size: 2.8vw;
  color: #000
}

.price .points .plan a {
  background: #fff04c;
  text-align: center;
  margin: 0 0 3% 0;
  display: block;
  position: relative;
}

.price .points .plan a:before {
  content: "\f105";
  font-family: 'icon';
  position: absolute;
  right: 5%;
}

.price .points .plan .sub {
  color: #ffed2e;
  text-align: center;
  font-size: 5vw;
  margin-bottom: 3%;
}

.price .points .plan .txt {
  color: #fff;
  font-size: 3vw;
  line-height: 1.8;
}

.price .card-box img.pc {
  display: none;
}

.price .card-box img.sp {
  display: block;
  width: 100%;
  margin-top: 6%;
}

.price .pre {
  margin-bottom: 8%;
}

.price .pre .p-title {
  text-align: center;
  font-size: 6vw;
  line-height: 1;
}

.price .pre .p-title span {
  background: #02a9e8;
  color: #fff;
  padding: 3% 10%;
  display: inline-block;
  border-radius: 60px;
}

.price .pre img.bui {
  margin: 0 auto;
}

.price .pre .set {
  box-shadow: 0px 2px 10px 1px rgb(185 185 185 / 36%);
  border-radius: 30px;
  margin-bottom: 8%;
}

.price .pre .wrap {
  padding: 10% 6%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.price .pre .wrap:before {
  content: "";
  height: 8px;
  width: 100%;
  background: #00aae9;
  position: absolute;
  left: 0;
  top: 0;
}

.price .pre .title {
  text-align: center;
  font-size: 7.5vw;
  margin-bottom: 5%;
}

.price .pre .title span {
  display: inline-block;
  position: relative;
}

.price .pre .title span:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #ddf6ff;
  position: absolute;
  z-index: -1;
  top: 6px;
  left: -14px;
  border-radius: 50%;
}

.price .pre .name {
  color: #0078a5;
  font-size: 4vw;
  line-height: 1.5;
  margin-bottom: 2%;
  position: relative;
}

.price .pre .name i {
  display: inline-block;
  width: 12%;
}

.price .pre .name i:before {
  content: "";
  background: url(../images/price/icon.png) no-repeat;
  background-size: contain;
  width: 10%;
  height: 100%;
  position: absolute;
  top: -3px;
}

.price .pre .kakaku {
  font-family: 'Staatliches';
  font-weight: 500;
  font-size: 9vw;
  line-height: 1;
}

.price .pre .wrap>.memo {
  text-align: center;
  margin-bottom: 6%;
}

.price .pre .kakaku b {
  background: #00aae9;
  color: #fff;
  font-size: 3.4vw;
  padding: 2% 3%;
  position: relative;
  top: -8px;
  margin-right: 2%;
  width: 48%;
  display: inline-block;
  text-align: center;
}

.price .pre .gold b {
  background: #dab44f;
}

.price .pre .silver b {
  background: #a8a8a8;
}

.price .pre .kakaku.nom b {
  top: 0;
  background: #c2e1ec;
  color: #000;
}

.price .pre .kakaku small {
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  font-size: 3vw;
}

.price .pre .kakaku.nom {
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  font-size: 4vw;
  margin: 0 0 10px 0;
}

.price .pre .memo {
  font-size: 80%;
  line-height: 1.5;
}

.price .pre li {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5%;
  margin-bottom: 5%;
}

.price .pre li:nth-last-child(1) {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.price .merit {
  border: 2px solid #4dc3ef;
  padding: 0 0 5%;
  margin-bottom: 8%;
}

.price .merit .ttl {
  background: #4dc3ef;
  color: #fff;
  font-size: 4.5vw;
  padding: 3%;
  line-height: 1.2;
  margin-bottom: 5%;
  text-align: center;
}

.price .merit p {
  padding: 0 5% 0 9%;
  text-indent: -4%;
}

.price .merit p span {
  background: linear-gradient(transparent 10%, #fdff91 10%);
}


/*add
----------------------------------------------- */
.add-cam {
  background: #feffe7;
  border-top: 3px solid #fbffcb;
  border-bottom: 3px solid #fbffcb;
  padding: 10% 0 5% 0;
}

.add-cam .inner {
  width: 92%;
  margin: 0 auto;
}

/* flow
----------------------------------------------- */
.flow {
  font-weight: bold;
  padding-top: 10%;
}

.flow .intro {
  border: 2px solid #00aae9;
  padding: 17% 6% 6% 6%;
  position: relative;
  margin-bottom: 10%;
}

.flow .att {
  font-size: 6vw;
  text-align: center;
  line-height: 1.2;
  color: #00aae9;
  display: inline-block;
  position: absolute;
  top: -8vw;
  left: 10%;
  background: #fff;
  padding: 3%;
  border: 2px solid #00aae9;
  width: 80%;
}

.flow .intro p {
  margin-bottom: 4%;
}

.flow .wrap {
  background: #e3f6fe;
  padding: 8% 0;
}

.flow .wrap li {
  margin-bottom: 10%;
  padding-bottom: 8%;
  border-bottom: 1px solid #ccc;
}

.flow .wrap li:nth-last-child(1) {
  margin-bottom: 0;
  border-bottom: 0;
}

.flow .wrap img {
  margin-bottom: 5%;
}

.flow .wrap .icon {
  font-size: 4vw;
  padding: 0.5em 0 0.5em 1em;
  color: #2b2b2b;
  background: #fcfeff;
  border-left: solid 4px #4bceff;
  margin-bottom: 6%;
}

.flow .wrap .icon b {
  font-family: 'Staatliches';
  font-weight: 500;
  display: inline-block;
  position: relative;
}

.flow .wrap .icon b:after {
  content: "|";
  margin: 0 10px;
  font-size: 3.3vw;
  color: #939393;
  vertical-align: middle;
  font-family: auto;
}

.flow .wrap a {
  background: #e54775;
  color: #fff;
  padding: 3% 0;
  text-align: center;
  font-size: 5vw;
  line-height: 1.4;
  margin-top: 3%;
  position: relative;
}

.flow .wrap a:before {
  content: "\f105";
  font-family: 'icon';
  position: absolute;
  right: 5%;
  top: 28%;
}

.flow .wrap a small {
  font-family: 'Staatliches';
  font-weight: 500;
  display: block;
  font-size: 70%;
  letter-spacing: 3px;
}

.flow .voice_item {
  margin-bottom: 5%;
}

.flow .wrap .voice-link {
  width: 92%;
  margin: 0 auto 10%;
  background: #3a3a3a;
  color: #fff;
}

.flow .voice_item .name {
  line-height: 1.5;
  padding: 2% 0 2% 15%;
}

.flow .voice_item .name:before {
  top: 27%;
}


/* qa
----------------------------------------------- */
.faq_list {
  margin: 0 auto 20%;
}

.faq_list li {
  margin: 0 auto 20px;
}

.faq_q {
  padding: 3% 12% 3% 13%;
  color: #fff;
  background: #22aee7;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  line-height: 1.4;
}

.faq_q span {
  width: 35px;
  height: 35px;
  font-size: 6vw;
  text-align: center;
  display: block;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 2%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1.6;
  font-family: 'Staatliches';
  font-weight: 400;
}

.faq_q:before,
.faq_q:after {
  content: '';
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}

.faq_q:before {
  width: 20px;
  height: 2px;
  top: 50%;
  right: 16px;
}

.faq_q:after {
  width: 2px;
  height: 20px;
  top: 50%;
  right: 25px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-top: -12px;
  transform: translate(0, 3px);
}

.faq_q.open:after {
  -moz-transform: rotate(90deg) translate(3px, 0);
  -ms-transform: rotate(90deg) translate(3px, 0);
  -webkit-transform: rotate(90deg) translate(3px, 0);
  transform: rotate(90deg) translate(3px, 0);
}

.faq_a {
  display: none;
  padding: 4%;
  font-size: 88%;
  color: #1b2c52;
  font-weight: bold;
  background: #f3fcff;
  text-align: justify;
}

.faq-item .adjust {
  text-indent: -1em;
  padding-left: 1em;
}

.faq-item .faq_a a {
  display: inline-block;
  color: #24ade7;
}

/* voice
----------------------------------------------- */
.voice_item {
  margin-bottom: 18%;
}

.voice_item {
  font-weight: bold;
}

.voice_item li {
  background: #fff;
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  padding: 6%;
  margin-bottom: 8%;
  border-radius: 5%;
  position: relative;
}

.voice_item li:before {
  content: "customer’s voice";
  font-family: 'Staatliches';
  color: #f3fbff;
  font-weight: normal;
  position: absolute;
  right: 2%;
  bottom: 0%;
  font-size: 12vw;
  line-height: 1;
}

.voice_item .name {
  background: #00aae9;
  padding: 1% 0 1% 15%;
  color: #fff;
  font-size: 4vw;
  margin-bottom: 3%;
  position: relative;
}

.voice_item .name:before {
  content: "";
  width: 10%;
  height: 100%;
  top: 14%;
  left: 2%;
  position: absolute;
  background: url(../images/voice/icon.png) no-repeat;
  background-size: contain;
}

.voice_item .txt {
  font-size: 90%;
  position: relative;
  margin-bottom: 3%;
}

.voice_item .com {
  color: #02a9e8;
  line-height: 1.2;
  margin: 5% 0 1% 0;
  padding-left: 31px;
  position: relative;
}

.voice_item .com:before {
  content: "Q";
  width: 25px;
  height: 25px;
  font-family: 'Staatliches';
  background: #02a9e8;
  position: absolute;
  left: 0;
  text-align: center;
  padding: 5px 0 0 0;
  border-radius: 50%;
  color: #fff;
}

.voice_item li:nth-last-child(1) {
  margin-bottom: 0;
}

.voice_item li img {
  width: 70%;
  margin: 0 auto 5%;
}


/* salon
----------------------------------------------- */
.salon {
  font-weight: bold;
}

.salon .second-inner>ul {
  margin-bottom: 10%;
}

.salon .second-inner>ul:last-child {
  margin-bottom: 0;
}

.salon .second-inner>ul li {
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  padding: 6%;
  border-radius: 20px;
  margin-bottom: 8%;
}

.salon .map {
  margin-bottom: 4%;
}

.salon .map iframe {
  width: 100%;
  height: 30vh;
}

.salon .tit {
  position: relative;
  font-size: 5.5vw;
  padding-left: 10px;
  line-height: 1.2;
  margin-bottom: 3%;
}

.salon .tit span {
  display: block;
  font-size: 60%;
}

.salon .tit:before {
  content: "";
  width: 25px;
  height: 25px;
  background: #fffaae;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.salon .tel {
  font-family: Staatliches;
  color: #00aae9;
  font-weight: normal;
  font-size: 8vw;
  line-height: 1;
  letter-spacing: 2px;
  position: relative;
  margin-bottom: 2%;
}

.salon .tel:before {
  content: "\f095";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  font-size: 90%
}

.salon .sub {
  background: #00aae9;
  color: #fff;
  text-align: center;
  border-radius: 30px;
  margin-bottom: 3%;
}

.salon .insta {
  border: 2px solid #ccc;
  text-align: center;
  font-family: Staatliches;
  font-weight: normal;
  font-size: 4.5vw;
  letter-spacing: 3px;
  padding: 2% 0;
  position: relative;
  margin-bottom: 5%;
}

.salon .insta:after {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
}

.salon .insta span {
  display: inline-block;
  position: relative;
}

.salon .insta span:before {
  content: "\e903";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  color: #02a9e8;
}

.salon table {
  width: 100%;
  border: 1px solid #ccc;
  line-height: 1.2;
}

.salon tr {
  border-bottom: 1px solid #ccc;
}

.salon th,
.salon td {
  vertical-align: middle;
  padding: 3%;
}

.salon th {
  background: #ebebeb;
  width: 30%;
  text-align: center;
}

.salon td {
  font-size: 90%;
}

.salon .context {
  background: #e3f6fe;
  padding: 6%;
  margin-bottom: 10%;
  border-radius: 14px;
}

.salon .context dl {
  margin: 0 auto 8%;
}

.salon .context dl:last-child {
  margin: 0 auto;
}

.salon .context dt {
  font-size: 4vw;
  padding-bottom: 3%;
  margin-bottom: 3%;
  ;
  border-bottom: 1px solid #2b2b2b;
  color: #2b2b2b;
}

.salon .context ul {
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.salon .context li {
  width: 48%;
  padding: 2% 0;
  line-height: 1.0;
  font-size: 4vw;
}

.salon .context li a {
  position: relative;
  color: #fff;
  font-size: 3.5vw;
  background: #00aae9;
  border-radius: 20px;
  padding: 8%;
}

.salon .context li a:after {
  content: "\f105";
  font-family: icon;
  margin: 0 10px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 32%;
}

.salon .context li a.cyatan {
  line-height: 1.2;
  padding: 4% 8%;
}

.salon .context li span {
  font-size: 80%;
  display: block;
}

.salon .midashi01 {
  margin-bottom: 4%;
  font-size: 4vw;
}


/* machine
----------------------------------------------- */
.machine {
  font-weight: bold;
}

.machine .subhero {
  background: url(../images/machine/hero-wrap.jpg)top center no-repeat;
  height: 35vh;
  background-size: cover;
  position: relative;
  margin-bottom: 8%;
}

.machine .subhero p {
  font-family: Staatliches;
  position: absolute;
  font-size: 25vw;
  font-weight: normal;
  left: 8%;
  bottom: -8%;
  letter-spacing: 1.2vw;
  line-height: 1;
  color: #fff;
}

.machine .title {
  text-align: center;
  font-size: 3.5vw;
  width: 80%;
  margin: 0 auto 10%;
}

.machine .point {
  background: #e3f6fe;
  padding: 10% 0;
  margin-bottom: 12%;
}

.machine-nice-ttl {
  font-weight: bold;
  text-align: center;
  margin-bottom: 3%;
}

.machine-nice-ttl .jp {
  font-size: 5vw;
  position: relative;
  color: #00aae9;
}

.machine-nice-ttl .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #503630;
}

.machine-nice-ttl .jp:before {
  content: "";
  width: 10%;
  height: 1px;
  background: #00aae9;
  position: absolute;
  left: -15%;
  top: 2.5vw;
}

.machine-nice-ttl .jp:after {
  content: "";
  width: 10%;
  height: 1px;
  background: #00aae9;
  position: absolute;
  right: -15%;
  top: 2.5vw;
}

.machine .point li {
  margin-bottom: 10%;
}

.machine .point li .textbox {
  position: relative;
  background: #fff;
  padding-bottom: 6%;
}

.machine .point li span {
  position: absolute;
  font-family: Staatliches;
  top: -11vw;
  font-size: 15vw;
  font-weight: normal;
  line-height: 1;
  color: #4dc3ef;
}

.machine .point li .tit {
  background: #4dc3ef;
  color: #fff;
  font-size: 5vw;
  padding: 5% 5%;
  line-height: 1.2;
  margin-bottom: 5%;
}

.machine .point li .txt {
  padding: 0 5%;
  margin-bottom: 5%;
  font-size: 90%;
}

.machine .point li .sub {
  background: -webkit-repeating-linear-gradient(-45deg, #FF8A96, #FF8A96 4px, #FF7786 3px, #FF7786 8px);
  background: repeating-linear-gradient(-45deg, #FF8A96, #FF8A96 4px, #FF7786 3px, #FF7786 8px);
  font-size: 4.5vw;
  line-height: 1.2;
  padding: 3% 0;
  border-radius: 60px;
  text-align: center;
  color: #FFF;
  width: 90%;
  margin: 0 auto;
}

.machine .point .arrow {
  margin: -2% auto 2%;
  width: 20%;
}

.machine .movie {
  width: 90%;
  margin: 0 auto 5%;
}

.machine .babox {
  background: #32c8ff;
  padding: 8%;
  border-radius: 20px;
  margin-bottom: 10%;
}

.machine .babox .title {
  font-family: Staatliches;
  font-weight: normal;
  color: #fff;
  font-size: 8vw;
  letter-spacing: 3px;
  line-height: 1.2;
  margin-bottom: 5%;
}

.machine .babox .title b {
  display: block;
  font-size: 3.4vw;
}

.machine .babox li {
  margin-bottom: 0
}

.machine .babox img {
  margin-bottom: 4%;
}

.machine .babox a {
  background: #ffffff;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  border: 1px solid;
}

.machine .babox a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
}


/* privacy
----------------------------------------------- */
.privacy_in {
  width: 90%;
  margin: auto;
}

.privacy {
  width: 100%;
  margin: 10% auto;
  margin-top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.privacy_in p {
  font-size: 3.5vw;
  line-height: 1.6;
  margin-bottom: 3%;
}

.privacy_in span {
  display: inline-block;
  margin-bottom: 3%;
  font-size: 4vw;
  color: #10b4f6;
  font-weight: bold;
}


/* service
----------------------------------------------- */
.service {
  font-weight: bold;
}

.service-intro.inner {
  margin-bottom: 16%;
}

.service-intro .textbox {
  margin-bottom: 10%;
}

.service-intro .textbox .text {
  width: 92%;
  margin: 0 auto;
}

.service-intro .textbox p {
  margin-bottom: 1em;
}

.service-intro .textbox img {
  width: 92%;
  margin: 0 auto;
}

.service-intro .textbox .arrow {
  margin: 0 auto 4%;
  width: 14%;
}

.white-rounded-box {
  box-shadow: 0px 2px 10px 1px rgb(185 185 185 / 36%);
  border-radius: 30px;
  margin-bottom: 8%;
  padding: 10% 6%;
}

.white-rounded-box .title {
  text-align: center;
  font-size: 6vw;
  margin-bottom: 6%;
}

.white-rounded-box .title span {
  display: inline-block;
  position: relative;
}

.white-rounded-box .title span:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #ddf6ff;
  position: absolute;
  z-index: -1;
  top: 0;
  left: -14px;
  border-radius: 50%;
}

.white-rounded-box .text p {
  margin: 6% auto;
  text-align: justify;
  text-justify: inter-ideograph;
}

.white-rounded-box .text p:last-child {
  margin-bottom: 0;
}

.serice-process {
  background-color: #00aae9;
  padding: 14% 0 16%;
}

.serice-process .title {
  text-align: center;
  font-size: 7vw;
  color: #fff;
  margin-bottom: 6%;
}

.serice-process .title:before {
  content: "";
  background: url("../images/service/process-ttl.png") no-repeat top center / 100%;
  width: 50vw;
  height: 6vw;
  display: block;
  margin: 0 auto;
}

.process-list {}

.process-list li {
  box-shadow: 0px 2px 10px 1px rgba(0, 134, 184, 1);
  background: #fff;
  margin-bottom: 14%;
  padding: 6%;
  border-radius: 16px;
  position: relative;
}

.process-list li img {
  display: inline-block;
  width: 40%;
}

.process-list li p {
  display: inline-block;
  width: 55%;
  margin: 4% 0 0 2%;
  vertical-align: top;
  text-align: justify;
  text-justify: inter-ideograph;
}

.process-list li:after {
  content: "";
  width: 8vw;
  height: 6vw;
  background: url("../images/arrow-btm.png") no-repeat top center / 100%;
  display: block;
  position: absolute;
  bottom: -22%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.process-list li.last {
  margin-bottom: 0;
}

.process-list li.last:after {
  content: "";
  display: none;
}

.process-list .deco-img {
  position: absolute;
  bottom: -14%;
  left: -7%;
  width: 50%;
}

.service-effect.inner {
  margin: 16% auto;
}

.service-effect-title {
  text-align: center;
  font-size: 6vw;
  color: #444a4a;
  margin: 2% 0 6%;
}

.step-list {
  width: 90vw;
  padding: 0 6% 0 15%;
  margin: auto;
  position: relative;
}

.step-list:before {
  content: '';
  width: 3vw;
  height: calc(100% - 2vw);
  background: rgb(244, 240, 233);
  background: #e3f6fe;
  background: -moz-linear-gradient(top, #e3f6fe 0%, #00aae9 100%);
  background: -webkit-linear-gradient(top, #e3f6fe 0%, #00aae9 100%);
  background: linear-gradient(to bottom, #e3f6fe 0%, #00aae9 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.step-list li {
  margin-bottom: 10vw;
  position: relative;
}

.step-list img {
  width: 100%;
  margin-bottom: 4vw;
}

.step-text {
  position: relative;
}

.step-text .fukidashi {
  position: absolute;
  top: 82%;
  right: -5%;
  width: 64%;
}

.step-text p {
  color: #5f5f5f;
  text-align: justify;
  text-justify: inter-ideograph;
}

.step-list .batch {
  color: #90daf6;
  font-size: 7vw;
  font-family: 'Staatliches';
  letter-spacing: 0.1em;
  position: relative;
  display: block;
}

.step-list .batch:before {
  content: '';
  width: 5vw;
  height: 5vw;
  background: #fff;
  border: 1px solid #90daf6;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: calc(-14% + -5vw);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.step-list .batch:after {
  content: '';
  width: 12%;
  height: 1px;
  background: #90daf6;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: -16%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.step-title {
  margin-bottom: 3vw;
  color: #5f5f5f;
  border-bottom: 1px dashed;
  font-size: 5vw;
  line-height: 1.4;
  padding-bottom: 0.4em;
}

.point-imglist {
  text-align: center;
}

.point-imglist img {
  margin: 0 4% 4% 0;
  width: 46%;
  display: inline-block;
}

.point-imglist img:nth-child(even) {
  margin-right: 0;
}

.point-imglist img:last-child {
  margin-bottom: 0;
}

.comic-area {
  width: 92%;
  margin: 0 auto 14%;
}


/* policy
----------------------------------------------- */
.policy {
  font-weight: bold;
  margin-bottom: 20%;
}

.policy .intro {
  background: url("../images/policy/bg.jpg") center top;
  background-size: 270%;
  margin: -7.5% 0 12% 0;
  padding: 10% 0 0 0;
}

.policy .intro .inner {
  position: relative;
}

.policy .intro .inner:before {
  content: "";
  width: 53%;
  height: 25%;
  position: absolute;
  background: url("../images/policy/deco.png") no-repeat;
  background-size: contain;
  top: 35%;
  left: -2%;
  z-index: 2;
}

.policy .intro img {
  margin-bottom: 5%;
  width: 90%;
  margin: 0 auto;
}

.policy .intro .textbox {
  background: #fff;
  padding: 8%;
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  position: relative;
  top: -30px;
  border-radius: 20px;
}

.policy .intro .textbox img {
  margin-bottom: 5%;
}

.policy .intro .tit {
  color: #00aae9;
  font-size: 5vw;
  line-height: 1.4;
  margin-bottom: 3%;
}

.policy .title {
  font-size: 5vw;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 12%;
}

.policy li .title {
  color: #1382eb;
  font-size: 6vw;
  line-height: 1.2;
  border-top: 2px solid #39b7d6;
  border-bottom: 2px solid #39b7d6;
  background: #fff;
  padding: 5% 0 6%;
  margin-bottom: 8%;
}

.policy li .title span {
  background: linear-gradient(transparent 60%, #fffa7c 60%);
  display: inline-block;
  line-height: 1.5;
}

.policy li .title b {
  display: block;
  font-size: 60%;
  width: 37%;
  margin: 0 auto 1%;
  background: #02a9e8;
  color: #fff;
  padding: 2% 0;
  line-height: 1.2;
  border-radius: 20px;
}

.policy li .title small {
  font-size: 70%;
}

.policy li {
  background: #dcf6ff;
  padding: 8%;
  margin-bottom: 12%;
  position: relative;
}

.policy li.part:before {
  content: "";
  width: 26%;
  height: 95px;
  background: url("../images/policy/point-icon02.png") no-repeat;
  position: absolute;
  background-size: contain;
  left: -3%;
  top: -20px;
}

.policy li:nth-child(2):before {
  content: none;
}

.policy li img {
  margin-bottom: 5%;
}

.policy li .tit {
  background: #02a9e8;
  color: #fff;
  font-size: 4.5vw;
  line-height: 1.2;
  text-align: center;
  padding: 4%;
  border-radius: 40px;
  margin-bottom: 5%
}

.policy li .txt {
  margin-bottom: 5%;
}

.policy li .txt:nth-last-child(1) {
  margin-bottom: 0;
}

.policy li .memo {
  font-size: 85%;
  font-weight: normal;
  line-height: 1.5;
}

.policy li .sub {
  text-align: center;
  background: #fff;
  margin-bottom: 8px;
}

.policy li a {
  background: #fff723;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  line-height: 1.2;
}

.policy li a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 28%;
}

/* law
----------------------------------------------- */
.law {
  margin-bottom: 20%;
}

.law th {
  display: block;
  width: 100%;
  padding: 2% 4%;
  text-align: justify;
  background: #00aae9;
  color: #fff;
  font-weight: bold;
  font-size: 3.6vw;
}

.law td {
  display: block;
  width: 100%;
  padding: 4%;
  text-align: justify;
  border: 1px solid #ccc;
  font-size: 3.6vw;
}

.law td a {
  font-family: 'Staatliches';
  font-size: 8vw;
  color: #00a9e7;
  line-height: 1.2;
  display: inline-block;
  letter-spacing: 2px;
}

.law td a::before {
  content: "\f095";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  font-size: 90%;
}

/* recruit
----------------------------------------------- */
.recruit {
  overflow: hidden;
  font-weight: bold;
  margin-top: -7.5%;
  background: #fff;
  margin-bottom: 10%
}

.recruit .intro {
  position: relative;
  margin-bottom: 18%;
}

.recruit .intro:before {
  content: "";
  width: 90%;
  height: 92vw;
  position: absolute;
  background: url("../images/recruit/rec-bg.png") no-repeat;
  background-size: cover;
  right: 0;
  top: -5%;
  z-index: 0;
}

.recruit .intro:after {
  content: "";
  width: 36%;
  height: 40vw;
  position: absolute;
  background: url("../images/recruit/deco.png") no-repeat;
  background-size: contain;
  right: 0;
  bottom: -10%;
  z-index: 0;
}

.recruit .intro .textbox {
  padding-top: 74%;
}

.recruit .intro .tit {
  font-size: 12vw;
  letter-spacing: 2px;
  mix-blend-mode: difference;
  color: #d9d9d9;
  margin-bottom: 5%;
  line-height: 1;
}

.recruit .intro p {
  width: 90%;
  padding-left: 5%;
  font-size: 90%;
  line-height: 2.5;
  position: relative;
  z-index: 1;
}

.recruit .training .tit {
  font-size: 18vw;
  font-family: 'Staatliches';
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1;
  position: relative;
  margin-bottom: 8%;
}

.recruit .training .tit:before {
  content: "";
  width: 64%;
  height: 3px;
  position: absolute;
  background: #000;
  top: -24px;
}

.recruit .training small {
  font-size: 3.8vw;
  display: block;
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  line-height: 1.5;
}

.recruit .training .textbox {
  background: #fff;
  position: relative;
  top: -70px;
  padding: 8% 8% 0 8%;
  width: 90%;
}

.recruit .points {
  margin-bottom: 20%;
}

.recruit .points .scrool {
  background: url("../images/recruit/bg.jpg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 32vw;
  margin-bottom: 5%;
}

.recruit .points ul {
  width: 90%;
  margin: 0 auto;
}

.recruit .points li {
  border: 2px solid #00aae9;
  padding: 5%;
  margin-bottom: 4%;
}

.recruit .points .tit {
  text-align: center;
  font-size: 150%;
  margin-bottom: 5%;
  color: #269bd3;
}

.recruit .message {
  margin-bottom: 10%;
}

.recruit .message .tit {
  font-size: 6vw;
  text-align: center;
  margin-bottom: 6%;
  line-height: 1.6;
  position: relative;
}

.recruit .message .tit:before {
  content: "";
  width: 1px;
  height: 30px;
  position: absolute;
  background: #000;
  right: 50%;
  top: -45px;
}

.recruit .message .bx-wrapper {
  margin-bottom: 8%;
}

.recruit .message p {
  width: 90%;
  margin: 0 auto 5%;
}

.recruit .message a {
  background: #3029a6;
  width: 90%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding: 3% 0;
  font-size: 4vw;
  letter-spacing: 2px;
  border-radius: 10px;
  position: relative;
}

.recruit .message a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 40%
}

.recruit .message a small {
  font-family: 'Staatliches';
  display: block;
  font-weight: normal;
  color: #8e88e1
}

/* reserve
----------------------------------------------- */
.contact-text {
  font-size: 3.4vw;
  margin-bottom: 3%;
}

.contact-text span {
  font-weight: bold;
}

.contact-text a {
  display: inline-block;
  color: #85b7c9;
  font-weight: bold;
  border-bottom: 1px solid;
}

.contact-text .dr-bnr {
  background: #fffd47;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  line-height: 1.2;
  color: #000;
  border: none;
  width: 80%;
  margin: 0 auto;
  display: block;
  margin-top: 3%;
}

.contact-text .dr-bnr:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 28%;
}

.thanks-text {
  font-size: 3.4vw;
  text-align: center;
}

.thanks-text span {
  display: block;
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 3%;
}

.form {
  margin: 7.5% 0;
}

/* 追加 */
.common_page_header {
  background: #c3b8b6;
}

@media screen and (max-width:768px) {
  .common_page_header {
    height: 27vw;
  }
}@charset "UTF-8";

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  font: inherit;
  word-wrap: break-word;
  border: 0;
  vertical-align: baseline;
  outline: none;
}

body {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 3.5vw;
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
  -webkit-text-size-adjust: 100%;
  font-style: normal;
  line-height: 1.8;
  position: relative;
}

_:-ms-lang(x)::-ms-backdrop,
body {
  font-family: "メイリオ", Meiryo, sans-serif;
}

article,
aside,
canvas,
details,
figcaption,
figure,
header,
footer,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

blockquote,
q {
  quotes: none;
}

strong,
b {
  font-weight: bold;
}

ul,
ol,
li {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

img,
video,
object {
  height: auto;
  border: none;
  display: block;
  max-width: 100%;
  height: auto;
}

ins {
  background: none;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

hr {
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
}

*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

a {
  color: #000;
  text-decoration: none;
  display: block;
  -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

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

body.top-page {
  padding-top: 100vh;
}

main {
  position: relative;
  z-index: 2;
  background-color: #eae0d4;
}

.main {
  padding-top: 15vw;
}

.pc {
  display: none;
}

.sp {
  display: block;
}

@font-face {
  font-family: 'Staatliches';
  src: url("../fonts/Staatliches-Regular.ttf");
}

/* button
----------------------------------------------- */

/* midashi
----------------------------------------------- */
.midashi01 {
  width: 43.5%;
  margin: 0 auto;
  padding: 0.2% 0;
  text-align: center;
  font-size: 4.5vw;
  font-family: 'Staatliches';
  letter-spacing: 0.1em;
  border: 2px solid #393a3c;
  color: #3e3e3e;
  position: relative;
  background: #fff;
}

.midashi01:before {
  content: "";
  width: 1px;
  height: 72%;
  position: absolute;
  left: 1vw;
  top: 1vw;
  background: #898989;
}

.midashi01:after {
  content: "";
  width: 1px;
  height: 72%;
  position: absolute;
  right: 1vw;
  top: 1vw;
  background: #898989;
}

.midashi02 {
  position: relative;
  display: block;
  padding: 0 10%;
  font-size: 8vw;
  text-align: center;
  line-height: 85%;
  font-family: 'Staatliches';
  letter-spacing: 3px;
  color: #2fb6e8;
  margin-bottom: 3%;
}

.midashi02:before,
.midashi02:after {
  content: '';
  position: absolute;
  top: 20%;
  display: inline-block;
  width: 20%;
  height: 1px;
  background-color: #a89981;
}

.midashi02:before {
  left: 0;
}

.midashi02:after {
  right: 0;
}

.midashi02 span {
  display: block;
  font-size: 3vw;
  letter-spacing: 0;
  color: #000;
  font-weight: bold;
}

.midashi03 {
  font-weight: bold;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 6%;
}

.midashi03 .jp {
  font-size: 6.2vw;
}

.midashi03 .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #85b7c9;
}

.midashi03:before,
.midashi03:after {
  content: '';
  height: 1px;
  background: #818181;
  display: block;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.midashi03:before {
  margin-right: 4vw;
}

.midashi03:after {
  margin-left: 4vw;
}

.midashi04 {
  text-align: center;
  position: relative;
  margin-bottom: 10%;
}

.midashi04 b {
  display: block;
  font-family: 'Staatliches';
  font-weight: normal;
  font-size: 10vw;
  line-height: 1;
  color: #02a9e8
}

.midashi04:before {
  content: "";
  width: 25%;
  height: 2px;
  position: absolute;
  background: #00a8e7;
  bottom: -24%;
  left: 38%;
}


/* header
----------------------------------------------- */
.header {
  position: fixed;
  width: 100%;
  z-index: 10;
  background: #eae0d4;
  top: 0;
}
#main_contents{
	background: #eae0d4;
}
#main_contents_wrap {
   overflow:hidden;
}
.header-top {
  width: 46%;
  margin: 0 auto;
  padding: 3% 0;
}

.header-logo {
  padding: 0;
}

.header-item-links {
  display: none;
}

.header-navi {
  display: none;
}

/* navi
----------------------------------------------- */
.foot-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
}

.footer-items {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.footer-items li {
  width: 20%;
}

.navi-button {
  height: 14.8vw;
  background: #2b2b2b;
  z-index: 10;
  position: relative;
  line-height: 1.8;
}

.navi-button .line {
  width: 8vw;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  -moz-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -o-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  -webkit-transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
  transition: all 0.25s cubic-bezier(0.05, 0.05, 0.31, 0.97);
}

.navi-button .line-top {
  top: 9px;
}

.navi-button .line-middle {
  top: 17px;
}

.navi-button .line-bottom {
  top: 25px;
}

.navi-button .line-text {
  position: absolute;
  top: 7.3vw;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-family: 'Staatliches';
  letter-spacing: 0.05em;
}

.navi {
  width: 100%;
  height: 100%;
  background: #503630;
  z-index: 9;
  position: fixed;
  top: 100%;
  left: 0;
}

.navi-inner {
  width: 100%;
  height: 100%;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.navi-inner::-webkit-scrollbar {
  display: none;
}

.navi-scroll {
  width: 100%;
  padding: 1px 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.navi-scroll::-webkit-scrollbar {
  display: none;
}

.navi-logo {
  width: 35%;
  margin: 0 auto 3%;
  padding: 3% 0;
}

.navi-logo img {
  width: 100%;
}

.navi-category {
  width: 90vw;
  margin: 0 auto 10vw;
}

.navi-category {
  width: 80vw;
  margin: 0 auto 10vw;
}

.navi-items {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.navi-items.w100 {
  width: 100%;
  padding-top: 6%
}

.navi-items.w100 li {
  width: 100%
}

.navi-item {
  width: 48%;
  margin-top: -1px;
  font-size: 3.95vw;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  font-weight: bold;
}

.navi-item ul {
  padding-bottom: 2vw;
}

.navi-item li {
  padding-left: 5vw;
  margin-bottom: 3vw;
  font-size: 3.42vw;
  line-height: 1.4;
  position: relative;
}

.navi-item li:before {
  content: '';
  width: 3vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 2.5vw;
  left: 0;
}

.navi-item li a {
  color: rgb(255 255 255 / 79%);
}

.navi-items:last-child .navi-item {
  border-top: none;
}

.navi-item-text {
  padding: 4vw 0 4vw;
  color: #fff;
  position: relative;
  font-size: 3.4vw;
  letter-spacing: -1px;
}

.navi-item-text .arrow {
  position: absolute;
  top: 50%;
  right: 1vw;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.navi-tel {
  width: 85vw;
  height: 16vw;
  margin: 0 auto 8vw;
  font-family: bicyclette;
  font-weight: 400;
  background: #fff;
  -moz-border-radius: 10vw;
  -webkit-border-radius: 10vw;
  border-radius: 10vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.navi-tel .title {
  padding: 1vw 2.5vw 0.9vw;
  margin-right: 4vw;
  color: #fff;
  font-size: 3.68vw;
  background: #1e2c4f;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.navi-tel .number {
  padding-top: 0.5vw;
  font-size: 5.92vw;
}

.navi-opentime {
  margin-bottom: 12vw;
  color: #fff;
  font-size: 3.68vw;
  text-align: center;
  line-height: 1.4;
}

.navi-social-items {
  margin-bottom: 23vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.navi-social-items li {
  margin: 0 4vw;
}

.navi-social-items a {
  color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}

.navi-social-items .icon {
  margin-right: 3vw;
  font-size: 4vw;
}

.navi-social-items .text {
  font-size: 4.47vw;
  font-family: bicyclette;
  font-weight: 700;
}

.navi-open {
  width: 100%;
  height: 100%;
  position: fixed;
}

.navi-open .navi-button {}

.navi-open .navi-button .line {
  background: #fff;
}

.navi-open .navi-button .line-top {
  top: 18px;
  -moz-transform: translate(-50%) rotate(45deg);
  -ms-transform: translate(-50%) rotate(45deg);
  -webkit-transform: translate(-50%) rotate(45deg);
  transform: translate(-50%) rotate(45deg);
}

.navi-open .navi-button .line-middle {
  opacity: 0;
}

.navi-open .navi-button .line-bottom {
  top: 18px;
  -moz-transform: translate(-50%) rotate(-45deg);
  -ms-transform: translate(-50%) rotate(-45deg);
  -webkit-transform: translate(-50%) rotate(-45deg);
  transform: translate(-50%) rotate(-45deg);
}

.navi-open .navi {
  -moz-animation-name: navi-open;
  -webkit-animation-name: navi-open;
  animation-name: navi-open;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navi-open .navi-inner {
  visibility: visible;
  -moz-animation-name: navi-inner-open;
  -webkit-animation-name: navi-inner-open;
  animation-name: navi-inner-open;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -moz-animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navi-close .navi {
  -moz-animation-name: navi-close;
  -webkit-animation-name: navi-close;
  animation-name: navi-close;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.navi-close .navi-inner {
  visibility: hidden;
  -moz-animation-name: navi-inner-close;
  -webkit-animation-name: navi-inner-close;
  animation-name: navi-inner-close;
  -moz-animation-duration: 0.35s;
  -webkit-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@-moz-keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@keyframes navi-open {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

@-moz-keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-webkit-keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@keyframes navi-close {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-moz-keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@keyframes navi-inner-open {
  0% {
    top: 30px;
  }

  100% {
    top: 0;
  }
}

@-moz-keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

@-webkit-keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

@keyframes navi-inner-close {
  0% {
    top: 0;
  }

  100% {
    top: 30px;
  }
}

/* right-btn
----------------------------------------------- */
.right-btn {
  position: fixed;
  right: 0;
  top: 48%;
  /* transform: translate(0, -68%); */
  z-index: 15;
  background: #302aa7;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border-radius: 8px 0 0 8px;
}

.right-btn a {
  padding: 20px 0 0 0;
  margin: 12px 2px;
  color: #fff !important;
  font-weight: bold;
  position: relative;
}

.right-btn img {
  position: absolute;
  width: 55%;
  top: -2px;
  right: 18%;
}

#sincloBox {
  z-index: 15 !important;
}

#sincloBox div#sincloBannerBox div#sincloBanner.sincloBanner {
  /* transform: translateY(18%)!important; */
  top: 34% !important;
}

#sincloBox div#sincloBannerBox #sincloBanner .sincloBannerText {
  margin: 12px 2px !important;
  font-weight: bold !important;
}

#sincloBox div#sincloBannerBox div#sincloBanner.sincloBanner .bannertext {
  font-size: 3vw !important;
}


/* bread
----------------------------------------------- */
.breadcrumb {
  position: absolute;
  background: #503630;
  overflow: hidden;
  margin-bottom: 7.5%;
  top: 350px;
  width: 100%;
}

.breadcrumb-items {
  width: 900px;
  max-width: 100%;
  padding: 0 4%;
  margin: 0 auto;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
}

.breadcrumb-items li {
  font-size: 3.16vw;
  position: relative;
  padding: 0.5% 0;
  color: #fff !important;
}

.breadcrumb-items li:after {
  content: "";
  width: 6vw;
  height: 8vw;
  position: absolute;
  transform: rotate(45deg) translate(-50%, -50%) skew(10deg, 10deg);
  top: 78%;
  right: 2.5vw;
  border-right: 1px solid #cae0e9;
  border-top: 1px solid #cae0e9;
}

.breadcrumb-items li:last-child:after {
  display: none;
}

.breadcrumb-items a {
  display: inline-block;
  color: #fff !important;
}

.breadcrumb-items a:hover {
  opacity: 1;
}

.breadcrumb-items li.breadcrumb-home {
  padding: 0.5% 7vw 0.5% 4vw;
  margin-right: 20px !important;
  background: url(../images/icon-home.png) no-repeat center left;
  background-size: 3.5vw;
  flex: 0 0 auto;
}

.breadcrumb-items li.parent {
  margin-right: 20px !important;
  padding: 9px 27px 5px 0;
  flex: 0 0 auto;
}

.breadcrumb-items li.current {
  padding: 9px 27px 5px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
}

@media screen and (max-width:768px) {
  .breadcrumb {
    top: 42vw;
  }

  .breadcrumb li.breadcrumb-home {
    padding: 0.5% 7vw 0.5% 4vw;
  }

  .breadcrumb li.parent,
  .breadcrumb li.current {
    padding: 0.5% 7vw 0.5% 0;
  }

  .breadcrumb li a {
    display: flex;
    align-items: center;
    line-height: 1 !important;
    height: 100%;
  }
}

/* footer
----------------------------------------------- */
.footer {
  padding: 19% 0 14.6vw;
  border-top: 1px solid #7d8a92;
  position: relative;
}

body:not(.home) .footer {
  margin-top: 50px;
}

.footer-logo {
  width: 60%;
  margin: 0 auto;
}

.footer-navi {
  margin: 10% auto 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-top: 1px solid #e4e4e4;
}

.footer-navi li {
  width: 50%;
  border-bottom: 1px solid #e4e4e4;
}

.footer-navi li:nth-child(1),
.footer-navi li:nth-child(3) {
  border-right: 1px solid #e4e4e4;
}

.footer-navi a {
  font-size: 3.5vw;
  font-weight: bold;
  color: #5a5a5a;
  background: url(../images/footer-navi.png) no-repeat right 4vw center;
  background-size: 4vw;
  padding: 3.3vw;
}

.footer-navi li:last-child {
  width: 100%;
  border-bottom: none;
}

.footer-btm {
  background: #fae9ed;
}

.footer-midashi {
  font-size: 4.2vw;
  font-weight: bold;
  text-align: center;
}

.group-links {
  padding: 4.4% 0 0;
}

.group-link-in {
  width: 93%;
  margin: 3% auto 4vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

.group-link-in li {
  width: 22%;
}

.copyright {
  text-align: center;
  border-top: 1px solid #7d8a92;
  font-size: 2.9vw;
  font-weight: bold;
  letter-spacing: 0.09em;
  padding: 2% 0;
}

.pagetop {
  width: 14vw;
  z-index: 8;
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translate(-50%);
}

.common_page_header {
  margin-top: 0;
}

/* hero
----------------------------------------------- */
.hero {
  padding: 0;
}

.hero-add {
  background: #c3b8b6;
}

.hero-midashi {
  text-align: center;
  padding: 1% 0 6%;
  color: #10b4f6;
}

.hero-midashi .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 12vw;
  letter-spacing: 0.1em;
}

.hero-midashi .jp {
  display: block;
  font-size: 3.4vw;
  font-weight: bold;
  margin-top: -6vw;
  letter-spacing: 0.1em;
  color: #000;
}

/* top
----------------------------------------------- */
.top-inform {
  padding: 0;
}

.top-inform p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - 3em);
}

.top-inform-in {
  padding: 0;
}

.top-inform-in.label-yerrow {
  background: #ccc0b2;
}

.top-inform-in.label-blue {
  background: #feffdd;
}

.top-inform-in a {
  margin: 0 auto;
  font-size: 3vw;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 1.7% 4%;
  color: #707070;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

.top-inform-in.label-yerrow .arrow:before {
  color: #48413b;
  font-size: 120%;
}

.top-inform-in.label-blue .arrow:before {
  color: #bfc346;
  font-size: 120%;
}

.top-policy {
  padding: 7.3% 0 21%;
  background: url("../images/top-policy-bg.jpg") repeat-x center top;
  background-size: 100%;
  overflow: hidden;
}

.top-policy .bx-viewport {
  overflow: visible !important;
}

.top-policy-txt {
  text-align: center;
  font-size: 4.7vw;
  font-weight: bold;
  color: #444a4a;
  margin: 2% 0 0.5%;
}

.top-policy-in {
  margin: 5% auto 3%;
}

.top-policy-img {
  width: 55%;
  margin: 0 auto;
}

.top-policy-in-txt {
  width: 88%;
  margin: 1.2% auto 0;
  text-align: justify;
  font-size: 3.2vw;
  font-weight: bold;
  line-height: 2.1;
}

.top-policy-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff !important;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-price {
  margin-top: -10.5%;
  padding: 14% 0 13%;
  background: url(../images/top-price-bg.png) no-repeat center top;
  background-size: cover;
}

.top-price-txt {
  text-align: center;
  font-size: 4.1vw;
  font-weight: bold;
  color: #fff;
  margin: 6% 0 3%;
}

.top-price-img {
  width: 75%;
  margin: 0 auto;
}

.top-price-txt02 {
  text-align: justify;
  width: 90%;
  margin: 5% auto 7.3%;
  font-size: 3.1vw;
  font-weight: bold;
  line-height: 2.2;
  color: #fff;
}

.top-price-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #503630 !important;
  padding: 2% 0;
  background: url(../images/links-arrow02.png) no-repeat right 20px center #fff;
  border-radius: 50px;
}

.top-reason {
  padding: 10.3% 0 10%;
  text-align: center;
  background: url("../images/top-reason-bg.jpg") repeat-x center top;
  background-size: 100%;
}

.top-reason-ttl {
  font-weight: bold;
  position: relative;
}

.top-reason-ttl .jp {
  font-size: 5.4vw;
  position: relative;
}

.top-reason-ttl .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #85b7c9;
}

.top-reason-ttl .jp:before {
  content: "";
  width: 16%;
  height: 1px;
  background: #818181;
  position: absolute;
  left: -11vw;
  top: 3vw;
}

.top-reason-ttl .jp:after {
  content: "";
  width: 16%;
  height: 1px;
  background: #818181;
  position: absolute;
  right: -11vw;
  top: 3vw;
}

.top-reason-midashi {
  display: inline-block;
  font-size: 4.6vw;
  font-weight: bold;
  margin-top: 3.3%;
  background: url(../images/top-reason-midashi-l.png) no-repeat left center, url(../images/top-reason-midashi-r.png) no-repeat right center;
  background-size: 3vw;
  padding: 0 5vw;
}

.top-reason-in {
  width: 94%;
  margin: 0 auto 2%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start;
}

.top-reason-in li {
  margin: 0.5% 0;
}

.top-reason-txt {
  font-size: 3.2vw;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 2.1;
  width: 94%;
  margin: 0 auto 4%;
  text-align: justify;
}

.top-reason-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff !important;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-effect {
  padding: 11% 0;
  background: #c3b8b6;
}

.top-effect-txt {
  text-align: center;
  font-size: 4.1vw;
  font-weight: bold;
  color: #444a4a;
  margin: 3% 0 2%;
}

.top-effect-label {
  width: 85%;
  margin: 0 auto;
}

.top-effect-midashi {
  text-align: center;
  max-width: 84%;
  margin: 3% auto 5%;
}

.top-effect-midashi p {
  display: inline-block;
  font-size: 4.3vw;
  font-weight: bold;
  padding: 0 1%;
  line-height: 1.4;
  margin-bottom: 1%;
  color: #feffa5;
  background: #503630;
}

.top-effect-img {
  margin: 0 auto;
}

.top-effect-txt02 {
  width: 94%;
  text-align: justify;
  font-size: 3.3vw;
  font-weight: bold;
  margin: 4.5% auto 5%;
  line-height: 2.1;
}

.top-effect-link {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
  color: #fff;
  padding: 2% 0;
  background: url(../images/links-arrow01.png) no-repeat right 20px center #503630;
  border-radius: 50px;
}

.top-first {
  margin: -1% 0 -3%;
  padding: 12% 0;
  background: url(../images/top-first-bg.png) repeat-x center top;
  background-size: contain;
}

.top-first-ttl {
  width: 60%;
  margin: 0 auto;
}

.top-first-in {
  width: 92%;
  margin: 9% auto 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}

.top-first-in li {
  width: 48%;
  margin: 0 1% 3% 1%;
}

/* second
----------------------------------------------- */
.second-content {
  min-height: 50vh;
  width: 92%;
  margin: 0 auto;
}

.second-content-none {
  width: 100%;
}

.second-inner {
  margin: 0 auto;
}

.second-content .inner {
  width: 92%;
  margin: 0 auto;
}

.second-content .blue {
  color: #007ece;
}

/* price
----------------------------------------------- */
.price {
  font-weight: bold;
}

.price .intro {
  border: 1px solid #ccc;
  position: relative;
  margin-bottom: 18%;
  z-index: 3;
}

.price .intro:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/price/intro-bg.jpg);
  position: absolute;
  z-index: -1;
  left: 2%;
  top: 2%;
}

.price .intro .inside {
  background: #fff;
}

.price .intro img {
  object-fit: cover;
  height: 150px;
  width: 100%;
}

.price .intro .textbox {
  padding: 6%;
  background: #fff;
}

.price .intro .ttl {
  font-size: 4vw;
  line-height: 1;
  margin-bottom: 3%;
}

.price .intro small {
  font-family: 'Staatliches';
  font-weight: 500;
  color: #2aa3d0;
  letter-spacing: 4px;
  font-size: 80%;
  display: block;
  margin-top: 5px;
}

.price .intro .txt {
  font-size: 90%;
}

.price .intro .txt b {
  background: linear-gradient(transparent 10%, #fdff91 10%);
}

.price .points {
  background: #00aae9;
  padding: 10% 0;
  position: relative;
}

.price .points:before {
  content: "";
  height: 40px;
  width: 2px;
  background: #02a9e8;
  position: absolute;
  top: -40px;
  right: 50%;
}

.price .points:after {
  content: "";
  width: 15px;
  height: 15px;
  background: #02a9e8;
  position: absolute;
  top: -50px;
  left: 47.8%;
  border-radius: 50%;
}

.price .points .plan .title {
  margin: 0 auto 3%;
  text-align: center;
  color: #fff;
  font-size: 6vw;
  width: 95%;
}

.price .points .plan .title span {
  padding: 3% 5%;
  letter-spacing: 5px;
  font-size: 140%;
}

.price .points .plan .title i {
  display: block;
  font-size: 5vw;
  background: #feff65;
  color: #02a9e8;
  border-radius: 40px;
  padding: 2%;
}

.price .points .plan li {
  background: #fff;
  margin-bottom: 4%;
  padding: 5%;
  border-radius: 16px;
}

.price .points .plan img {
  display: inline-block;
  width: 25%;
  vertical-align: middle;
}

.price .points .plan .textbox {
  display: inline-block;
  width: 70%;
  padding-left: 5%;
  vertical-align: middle;
}

.price .points .plan p {
  font-size: 4.5vw;
  color: #00aae9;
  line-height: 1.4;
  margin-bottom: 3%;
}

.price .points .plan p:nth-child(2),
.price .points .plan p:last-child {
  margin-bottom: 0;
}

.price .points .plan b {
  font-size: 140%;
  display: inline-block;
  color: #007ece;
  background: linear-gradient(transparent 60%, #ff6 60%);
  margin-bottom: 5%;
}

.price .points .plan .tit:last-child b {
  margin-bottom: 0;
}

.price .points .plan .memo-txt {
  color: #fff;
  font-size: 90%;
  text-align: center;
  margin-bottom: 5% !important;
}

.price .points .plan li span {
  color: #007ece;
  line-height: 1.3;
}

.price .points .plan li .write {
  display: block;
  font-size: 110%;
}

.price .points .plan li .strong {
  font-size: 140%;
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.price .points .plan .memo {
  font-size: 2.8vw;
  color: #000
}

.price .points .plan a {
  background: #fff04c;
  text-align: center;
  margin: 0 0 3% 0;
  display: block;
  position: relative;
}

.price .points .plan a:before {
  content: "\f105";
  font-family: 'icon';
  position: absolute;
  right: 5%;
}

.price .points .plan .sub {
  color: #ffed2e;
  text-align: center;
  font-size: 5vw;
  margin-bottom: 3%;
}

.price .points .plan .txt {
  color: #fff;
  font-size: 3vw;
  line-height: 1.8;
}

.price .card-box img.pc {
  display: none;
}

.price .card-box img.sp {
  display: block;
  width: 100%;
  margin-top: 6%;
}

.price .pre {
  margin-bottom: 8%;
}

.price .pre .p-title {
  text-align: center;
  font-size: 6vw;
  line-height: 1;
}

.price .pre .p-title span {
  background: #02a9e8;
  color: #fff;
  padding: 3% 10%;
  display: inline-block;
  border-radius: 60px;
}

.price .pre img.bui {
  margin: 0 auto;
}

.price .pre .set {
  box-shadow: 0px 2px 10px 1px rgb(185 185 185 / 36%);
  border-radius: 30px;
  margin-bottom: 8%;
}

.price .pre .wrap {
  padding: 10% 6%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.price .pre .wrap:before {
  content: "";
  height: 8px;
  width: 100%;
  background: #00aae9;
  position: absolute;
  left: 0;
  top: 0;
}

.price .pre .title {
  text-align: center;
  font-size: 7.5vw;
  margin-bottom: 5%;
}

.price .pre .title span {
  display: inline-block;
  position: relative;
}

.price .pre .title span:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #ddf6ff;
  position: absolute;
  z-index: -1;
  top: 6px;
  left: -14px;
  border-radius: 50%;
}

.price .pre .name {
  color: #0078a5;
  font-size: 4vw;
  line-height: 1.5;
  margin-bottom: 2%;
  position: relative;
}

.price .pre .name i {
  display: inline-block;
  width: 12%;
}

.price .pre .name i:before {
  content: "";
  background: url(../images/price/icon.png) no-repeat;
  background-size: contain;
  width: 10%;
  height: 100%;
  position: absolute;
  top: -3px;
}

.price .pre .kakaku {
  font-family: 'Staatliches';
  font-weight: 500;
  font-size: 9vw;
  line-height: 1;
}

.price .pre .wrap>.memo {
  text-align: center;
  margin-bottom: 6%;
}

.price .pre .kakaku b {
  background: #00aae9;
  color: #fff;
  font-size: 3.4vw;
  padding: 2% 3%;
  position: relative;
  top: -8px;
  margin-right: 2%;
  width: 48%;
  display: inline-block;
  text-align: center;
}

.price .pre .gold b {
  background: #dab44f;
}

.price .pre .silver b {
  background: #a8a8a8;
}

.price .pre .kakaku.nom b {
  top: 0;
  background: #c2e1ec;
  color: #000;
}

.price .pre .kakaku small {
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  font-size: 3vw;
}

.price .pre .kakaku.nom {
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  font-size: 4vw;
  margin: 0 0 10px 0;
}

.price .pre .memo {
  font-size: 80%;
  line-height: 1.5;
}

.price .pre li {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5%;
  margin-bottom: 5%;
}

.price .pre li:nth-last-child(1) {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.price .merit {
  border: 2px solid #4dc3ef;
  padding: 0 0 5%;
  margin-bottom: 8%;
}

.price .merit .ttl {
  background: #4dc3ef;
  color: #fff;
  font-size: 4.5vw;
  padding: 3%;
  line-height: 1.2;
  margin-bottom: 5%;
  text-align: center;
}

.price .merit p {
  padding: 0 5% 0 9%;
  text-indent: -4%;
}

.price .merit p span {
  background: linear-gradient(transparent 10%, #fdff91 10%);
}


/*add
----------------------------------------------- */
.add-cam {
  background: #feffe7;
  border-top: 3px solid #fbffcb;
  border-bottom: 3px solid #fbffcb;
  padding: 10% 0 5% 0;
}

.add-cam .inner {
  width: 92%;
  margin: 0 auto;
}

/* flow
----------------------------------------------- */
.flow {
  font-weight: bold;
  padding-top: 10%;
}

.flow .intro {
  border: 2px solid #00aae9;
  padding: 17% 6% 6% 6%;
  position: relative;
  margin-bottom: 10%;
}

.flow .att {
  font-size: 6vw;
  text-align: center;
  line-height: 1.2;
  color: #00aae9;
  display: inline-block;
  position: absolute;
  top: -8vw;
  left: 10%;
  background: #fff;
  padding: 3%;
  border: 2px solid #00aae9;
  width: 80%;
}

.flow .intro p {
  margin-bottom: 4%;
}

.flow .wrap {
  background: #e3f6fe;
  padding: 8% 0;
}

.flow .wrap li {
  margin-bottom: 10%;
  padding-bottom: 8%;
  border-bottom: 1px solid #ccc;
}

.flow .wrap li:nth-last-child(1) {
  margin-bottom: 0;
  border-bottom: 0;
}

.flow .wrap img {
  margin-bottom: 5%;
}

.flow .wrap .icon {
  font-size: 4vw;
  padding: 0.5em 0 0.5em 1em;
  color: #2b2b2b;
  background: #fcfeff;
  border-left: solid 4px #4bceff;
  margin-bottom: 6%;
}

.flow .wrap .icon b {
  font-family: 'Staatliches';
  font-weight: 500;
  display: inline-block;
  position: relative;
}

.flow .wrap .icon b:after {
  content: "|";
  margin: 0 10px;
  font-size: 3.3vw;
  color: #939393;
  vertical-align: middle;
  font-family: auto;
}

.flow .wrap a {
  background: #e54775;
  color: #fff;
  padding: 3% 0;
  text-align: center;
  font-size: 5vw;
  line-height: 1.4;
  margin-top: 3%;
  position: relative;
}

.flow .wrap a:before {
  content: "\f105";
  font-family: 'icon';
  position: absolute;
  right: 5%;
  top: 28%;
}

.flow .wrap a small {
  font-family: 'Staatliches';
  font-weight: 500;
  display: block;
  font-size: 70%;
  letter-spacing: 3px;
}

.flow .voice_item {
  margin-bottom: 5%;
}

.flow .wrap .voice-link {
  width: 92%;
  margin: 0 auto 10%;
  background: #3a3a3a;
  color: #fff;
}

.flow .voice_item .name {
  line-height: 1.5;
  padding: 2% 0 2% 15%;
}

.flow .voice_item .name:before {
  top: 27%;
}


/* qa
----------------------------------------------- */
.faq_list {
  margin: 0 auto 20%;
}

.faq_list li {
  margin: 0 auto 20px;
}

.faq_q {
  padding: 3% 12% 3% 13%;
  color: #fff;
  background: #22aee7;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  line-height: 1.4;
}

.faq_q span {
  width: 35px;
  height: 35px;
  font-size: 6vw;
  text-align: center;
  display: block;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 2%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1.6;
  font-family: 'Staatliches';
  font-weight: 400;
}

.faq_q:before,
.faq_q:after {
  content: '';
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}

.faq_q:before {
  width: 20px;
  height: 2px;
  top: 50%;
  right: 16px;
}

.faq_q:after {
  width: 2px;
  height: 20px;
  top: 50%;
  right: 25px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-top: -12px;
  transform: translate(0, 3px);
}

.faq_q.open:after {
  -moz-transform: rotate(90deg) translate(3px, 0);
  -ms-transform: rotate(90deg) translate(3px, 0);
  -webkit-transform: rotate(90deg) translate(3px, 0);
  transform: rotate(90deg) translate(3px, 0);
}

.faq_a {
  display: none;
  padding: 4%;
  font-size: 88%;
  color: #1b2c52;
  font-weight: bold;
  background: #f3fcff;
  text-align: justify;
}

.faq-item .adjust {
  text-indent: -1em;
  padding-left: 1em;
}

.faq-item .faq_a a {
  display: inline-block;
  color: #24ade7;
}

/* voice
----------------------------------------------- */
.voice_item {
  margin-bottom: 18%;
}

.voice_item {
  font-weight: bold;
}

.voice_item li {
  background: #fff;
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  padding: 6%;
  margin-bottom: 8%;
  border-radius: 5%;
  position: relative;
}

.voice_item li:before {
  content: "customer’s voice";
  font-family: 'Staatliches';
  color: #f3fbff;
  font-weight: normal;
  position: absolute;
  right: 2%;
  bottom: 0%;
  font-size: 12vw;
  line-height: 1;
}

.voice_item .name {
  background: #00aae9;
  padding: 1% 0 1% 15%;
  color: #fff;
  font-size: 4vw;
  margin-bottom: 3%;
  position: relative;
}

.voice_item .name:before {
  content: "";
  width: 10%;
  height: 100%;
  top: 14%;
  left: 2%;
  position: absolute;
  background: url(../images/voice/icon.png) no-repeat;
  background-size: contain;
}

.voice_item .txt {
  font-size: 90%;
  position: relative;
  margin-bottom: 3%;
}

.voice_item .com {
  color: #02a9e8;
  line-height: 1.2;
  margin: 5% 0 1% 0;
  padding-left: 31px;
  position: relative;
}

.voice_item .com:before {
  content: "Q";
  width: 25px;
  height: 25px;
  font-family: 'Staatliches';
  background: #02a9e8;
  position: absolute;
  left: 0;
  text-align: center;
  padding: 5px 0 0 0;
  border-radius: 50%;
  color: #fff;
}

.voice_item li:nth-last-child(1) {
  margin-bottom: 0;
}

.voice_item li img {
  width: 70%;
  margin: 0 auto 5%;
}


/* salon
----------------------------------------------- */
.salon {
  font-weight: bold;
}

.salon .second-inner>ul {
  margin-bottom: 10%;
}

.salon .second-inner>ul:last-child {
  margin-bottom: 0;
}

.salon .second-inner>ul li {
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  padding: 6%;
  border-radius: 20px;
  margin-bottom: 8%;
}

.salon .map {
  margin-bottom: 4%;
}

.salon .map iframe {
  width: 100%;
  height: 30vh;
}

.salon .tit {
  position: relative;
  font-size: 5.5vw;
  padding-left: 10px;
  line-height: 1.2;
  margin-bottom: 3%;
}

.salon .tit span {
  display: block;
  font-size: 60%;
}

.salon .tit:before {
  content: "";
  width: 25px;
  height: 25px;
  background: #fffaae;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.salon .tel {
  font-family: Staatliches;
  color: #00aae9;
  font-weight: normal;
  font-size: 8vw;
  line-height: 1;
  letter-spacing: 2px;
  position: relative;
  margin-bottom: 2%;
}

.salon .tel:before {
  content: "\f095";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  font-size: 90%
}

.salon .sub {
  background: #00aae9;
  color: #fff;
  text-align: center;
  border-radius: 30px;
  margin-bottom: 3%;
}

.salon .insta {
  border: 2px solid #ccc;
  text-align: center;
  font-family: Staatliches;
  font-weight: normal;
  font-size: 4.5vw;
  letter-spacing: 3px;
  padding: 2% 0;
  position: relative;
  margin-bottom: 5%;
}

.salon .insta:after {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
}

.salon .insta span {
  display: inline-block;
  position: relative;
}

.salon .insta span:before {
  content: "\e903";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  color: #02a9e8;
}

.salon table {
  width: 100%;
  border: 1px solid #ccc;
  line-height: 1.2;
}

.salon tr {
  border-bottom: 1px solid #ccc;
}

.salon th,
.salon td {
  vertical-align: middle;
  padding: 3%;
}

.salon th {
  background: #ebebeb;
  width: 30%;
  text-align: center;
}

.salon td {
  font-size: 90%;
}

.salon .context {
  background: #e3f6fe;
  padding: 6%;
  margin-bottom: 10%;
  border-radius: 14px;
}

.salon .context dl {
  margin: 0 auto 8%;
}

.salon .context dl:last-child {
  margin: 0 auto;
}

.salon .context dt {
  font-size: 4vw;
  padding-bottom: 3%;
  margin-bottom: 3%;
  ;
  border-bottom: 1px solid #2b2b2b;
  color: #2b2b2b;
}

.salon .context ul {
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.salon .context li {
  width: 48%;
  padding: 2% 0;
  line-height: 1.0;
  font-size: 4vw;
}

.salon .context li a {
  position: relative;
  color: #fff;
  font-size: 3.5vw;
  background: #00aae9;
  border-radius: 20px;
  padding: 8%;
}

.salon .context li a:after {
  content: "\f105";
  font-family: icon;
  margin: 0 10px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 32%;
}

.salon .context li a.cyatan {
  line-height: 1.2;
  padding: 4% 8%;
}

.salon .context li span {
  font-size: 80%;
  display: block;
}

.salon .midashi01 {
  margin-bottom: 4%;
  font-size: 4vw;
}


/* machine
----------------------------------------------- */
.machine {
  font-weight: bold;
}

.machine .subhero {
  background: url(../images/machine/hero-wrap.jpg)top center no-repeat;
  height: 35vh;
  background-size: cover;
  position: relative;
  margin-bottom: 8%;
}

.machine .subhero p {
  font-family: Staatliches;
  position: absolute;
  font-size: 25vw;
  font-weight: normal;
  left: 8%;
  bottom: -8%;
  letter-spacing: 1.2vw;
  line-height: 1;
  color: #fff;
}

.machine .title {
  text-align: center;
  font-size: 3.5vw;
  width: 80%;
  margin: 0 auto 10%;
}

.machine .point {
  background: #e3f6fe;
  padding: 10% 0;
  margin-bottom: 12%;
}

.machine-nice-ttl {
  font-weight: bold;
  text-align: center;
  margin-bottom: 3%;
}

.machine-nice-ttl .jp {
  font-size: 5vw;
  position: relative;
  color: #00aae9;
}

.machine-nice-ttl .en {
  display: block;
  font-family: 'Staatliches';
  font-size: 3.6vw;
  margin-top: -2%;
  letter-spacing: 0.24em;
  color: #503630;
}

.machine-nice-ttl .jp:before {
  content: "";
  width: 10%;
  height: 1px;
  background: #00aae9;
  position: absolute;
  left: -15%;
  top: 2.5vw;
}

.machine-nice-ttl .jp:after {
  content: "";
  width: 10%;
  height: 1px;
  background: #00aae9;
  position: absolute;
  right: -15%;
  top: 2.5vw;
}

.machine .point li {
  margin-bottom: 10%;
}

.machine .point li .textbox {
  position: relative;
  background: #fff;
  padding-bottom: 6%;
}

.machine .point li span {
  position: absolute;
  font-family: Staatliches;
  top: -11vw;
  font-size: 15vw;
  font-weight: normal;
  line-height: 1;
  color: #4dc3ef;
}

.machine .point li .tit {
  background: #4dc3ef;
  color: #fff;
  font-size: 5vw;
  padding: 5% 5%;
  line-height: 1.2;
  margin-bottom: 5%;
}

.machine .point li .txt {
  padding: 0 5%;
  margin-bottom: 5%;
  font-size: 90%;
}

.machine .point li .sub {
  background: -webkit-repeating-linear-gradient(-45deg, #FF8A96, #FF8A96 4px, #FF7786 3px, #FF7786 8px);
  background: repeating-linear-gradient(-45deg, #FF8A96, #FF8A96 4px, #FF7786 3px, #FF7786 8px);
  font-size: 4.5vw;
  line-height: 1.2;
  padding: 3% 0;
  border-radius: 60px;
  text-align: center;
  color: #FFF;
  width: 90%;
  margin: 0 auto;
}

.machine .point .arrow {
  margin: -2% auto 2%;
  width: 20%;
}

.machine .movie {
  width: 90%;
  margin: 0 auto 5%;
}

.machine .babox {
  background: #32c8ff;
  padding: 8%;
  border-radius: 20px;
  margin-bottom: 10%;
}

.machine .babox .title {
  font-family: Staatliches;
  font-weight: normal;
  color: #fff;
  font-size: 8vw;
  letter-spacing: 3px;
  line-height: 1.2;
  margin-bottom: 5%;
}

.machine .babox .title b {
  display: block;
  font-size: 3.4vw;
}

.machine .babox li {
  margin-bottom: 0
}

.machine .babox img {
  margin-bottom: 4%;
}

.machine .babox a {
  background: #ffffff;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  border: 1px solid;
}

.machine .babox a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
}


/* privacy
----------------------------------------------- */
.privacy_in {
  width: 90%;
  margin: auto;
}

.privacy {
  width: 100%;
  margin: 10% auto;
  margin-top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.privacy_in p {
  font-size: 3.5vw;
  line-height: 1.6;
  margin-bottom: 3%;
}

.privacy_in span {
  display: inline-block;
  margin-bottom: 3%;
  font-size: 4vw;
  color: #10b4f6;
  font-weight: bold;
}


/* service
----------------------------------------------- */
.service {
  font-weight: bold;
}

.service-intro.inner {
  margin-bottom: 16%;
}

.service-intro .textbox {
  margin-bottom: 10%;
}

.service-intro .textbox .text {
  width: 92%;
  margin: 0 auto;
}

.service-intro .textbox p {
  margin-bottom: 1em;
}

.service-intro .textbox img {
  width: 92%;
  margin: 0 auto;
}

.service-intro .textbox .arrow {
  margin: 0 auto 4%;
  width: 14%;
}

.white-rounded-box {
  box-shadow: 0px 2px 10px 1px rgb(185 185 185 / 36%);
  border-radius: 30px;
  margin-bottom: 8%;
  padding: 10% 6%;
}

.white-rounded-box .title {
  text-align: center;
  font-size: 6vw;
  margin-bottom: 6%;
}

.white-rounded-box .title span {
  display: inline-block;
  position: relative;
}

.white-rounded-box .title span:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #ddf6ff;
  position: absolute;
  z-index: -1;
  top: 0;
  left: -14px;
  border-radius: 50%;
}

.white-rounded-box .text p {
  margin: 6% auto;
  text-align: justify;
  text-justify: inter-ideograph;
}

.white-rounded-box .text p:last-child {
  margin-bottom: 0;
}

.serice-process {
  background-color: #00aae9;
  padding: 14% 0 16%;
}

.serice-process .title {
  text-align: center;
  font-size: 7vw;
  color: #fff;
  margin-bottom: 6%;
}

.serice-process .title:before {
  content: "";
  background: url("../images/service/process-ttl.png") no-repeat top center / 100%;
  width: 50vw;
  height: 6vw;
  display: block;
  margin: 0 auto;
}

.process-list {}

.process-list li {
  box-shadow: 0px 2px 10px 1px rgba(0, 134, 184, 1);
  background: #fff;
  margin-bottom: 14%;
  padding: 6%;
  border-radius: 16px;
  position: relative;
}

.process-list li img {
  display: inline-block;
  width: 40%;
}

.process-list li p {
  display: inline-block;
  width: 55%;
  margin: 4% 0 0 2%;
  vertical-align: top;
  text-align: justify;
  text-justify: inter-ideograph;
}

.process-list li:after {
  content: "";
  width: 8vw;
  height: 6vw;
  background: url("../images/arrow-btm.png") no-repeat top center / 100%;
  display: block;
  position: absolute;
  bottom: -22%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.process-list li.last {
  margin-bottom: 0;
}

.process-list li.last:after {
  content: "";
  display: none;
}

.process-list .deco-img {
  position: absolute;
  bottom: -14%;
  left: -7%;
  width: 50%;
}

.service-effect.inner {
  margin: 16% auto;
}

.service-effect-title {
  text-align: center;
  font-size: 6vw;
  color: #444a4a;
  margin: 2% 0 6%;
}

.step-list {
  width: 90vw;
  padding: 0 6% 0 15%;
  margin: auto;
  position: relative;
}

.step-list:before {
  content: '';
  width: 3vw;
  height: calc(100% - 2vw);
  background: rgb(244, 240, 233);
  background: #e3f6fe;
  background: -moz-linear-gradient(top, #e3f6fe 0%, #00aae9 100%);
  background: -webkit-linear-gradient(top, #e3f6fe 0%, #00aae9 100%);
  background: linear-gradient(to bottom, #e3f6fe 0%, #00aae9 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.step-list li {
  margin-bottom: 10vw;
  position: relative;
}

.step-list img {
  width: 100%;
  margin-bottom: 4vw;
}

.step-text {
  position: relative;
}

.step-text .fukidashi {
  position: absolute;
  top: 82%;
  right: -5%;
  width: 64%;
}

.step-text p {
  color: #5f5f5f;
  text-align: justify;
  text-justify: inter-ideograph;
}

.step-list .batch {
  color: #90daf6;
  font-size: 7vw;
  font-family: 'Staatliches';
  letter-spacing: 0.1em;
  position: relative;
  display: block;
}

.step-list .batch:before {
  content: '';
  width: 5vw;
  height: 5vw;
  background: #fff;
  border: 1px solid #90daf6;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: calc(-14% + -5vw);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.step-list .batch:after {
  content: '';
  width: 12%;
  height: 1px;
  background: #90daf6;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: -16%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.step-title {
  margin-bottom: 3vw;
  color: #5f5f5f;
  border-bottom: 1px dashed;
  font-size: 5vw;
  line-height: 1.4;
  padding-bottom: 0.4em;
}

.point-imglist {
  text-align: center;
}

.point-imglist img {
  margin: 0 4% 4% 0;
  width: 46%;
  display: inline-block;
}

.point-imglist img:nth-child(even) {
  margin-right: 0;
}

.point-imglist img:last-child {
  margin-bottom: 0;
}

.comic-area {
  width: 92%;
  margin: 0 auto 14%;
}


/* policy
----------------------------------------------- */
.policy {
  font-weight: bold;
  margin-bottom: 20%;
}

.policy .intro {
  background: url("../images/policy/bg.jpg") center top;
  background-size: 270%;
  margin: -7.5% 0 12% 0;
  padding: 10% 0 0 0;
}

.policy .intro .inner {
  position: relative;
}

.policy .intro .inner:before {
  content: "";
  width: 53%;
  height: 25%;
  position: absolute;
  background: url("../images/policy/deco.png") no-repeat;
  background-size: contain;
  top: 35%;
  left: -2%;
  z-index: 2;
}

.policy .intro img {
  margin-bottom: 5%;
  width: 90%;
  margin: 0 auto;
}

.policy .intro .textbox {
  background: #fff;
  padding: 8%;
  box-shadow: 5px 2px 12px 5px rgb(185 185 185 / 36%);
  position: relative;
  top: -30px;
  border-radius: 20px;
}

.policy .intro .textbox img {
  margin-bottom: 5%;
}

.policy .intro .tit {
  color: #00aae9;
  font-size: 5vw;
  line-height: 1.4;
  margin-bottom: 3%;
}

.policy .title {
  font-size: 5vw;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 12%;
}

.policy li .title {
  color: #1382eb;
  font-size: 6vw;
  line-height: 1.2;
  border-top: 2px solid #39b7d6;
  border-bottom: 2px solid #39b7d6;
  background: #fff;
  padding: 5% 0 6%;
  margin-bottom: 8%;
}

.policy li .title span {
  background: linear-gradient(transparent 60%, #fffa7c 60%);
  display: inline-block;
  line-height: 1.5;
}

.policy li .title b {
  display: block;
  font-size: 60%;
  width: 37%;
  margin: 0 auto 1%;
  background: #02a9e8;
  color: #fff;
  padding: 2% 0;
  line-height: 1.2;
  border-radius: 20px;
}

.policy li .title small {
  font-size: 70%;
}

.policy li {
  background: #dcf6ff;
  padding: 8%;
  margin-bottom: 12%;
  position: relative;
}

.policy li.part:before {
  content: "";
  width: 26%;
  height: 95px;
  background: url("../images/policy/point-icon02.png") no-repeat;
  position: absolute;
  background-size: contain;
  left: -3%;
  top: -20px;
}

.policy li:nth-child(2):before {
  content: none;
}

.policy li img {
  margin-bottom: 5%;
}

.policy li .tit {
  background: #02a9e8;
  color: #fff;
  font-size: 4.5vw;
  line-height: 1.2;
  text-align: center;
  padding: 4%;
  border-radius: 40px;
  margin-bottom: 5%
}

.policy li .txt {
  margin-bottom: 5%;
}

.policy li .txt:nth-last-child(1) {
  margin-bottom: 0;
}

.policy li .memo {
  font-size: 85%;
  font-weight: normal;
  line-height: 1.5;
}

.policy li .sub {
  text-align: center;
  background: #fff;
  margin-bottom: 8px;
}

.policy li a {
  background: #fff723;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  line-height: 1.2;
}

.policy li a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 28%;
}

/* law
----------------------------------------------- */
.law {
  margin-bottom: 20%;
}

.law th {
  display: block;
  width: 100%;
  padding: 2% 4%;
  text-align: justify;
  background: #00aae9;
  color: #fff;
  font-weight: bold;
  font-size: 3.6vw;
}

.law td {
  display: block;
  width: 100%;
  padding: 4%;
  text-align: justify;
  border: 1px solid #ccc;
  font-size: 3.6vw;
}

.law td a {
  font-family: 'Staatliches';
  font-size: 8vw;
  color: #00a9e7;
  line-height: 1.2;
  display: inline-block;
  letter-spacing: 2px;
}

.law td a::before {
  content: "\f095";
  margin: 0 1vw 0 0;
  font-family: icon;
  display: inline-block;
  font-size: 90%;
}

/* recruit
----------------------------------------------- */
.recruit {
  overflow: hidden;
  font-weight: bold;
  margin-top: -7.5%;
  background: #fff;
  margin-bottom: 10%
}

.recruit .intro {
  position: relative;
  margin-bottom: 18%;
}

.recruit .intro:before {
  content: "";
  width: 90%;
  height: 92vw;
  position: absolute;
  background: url("../images/recruit/rec-bg.png") no-repeat;
  background-size: cover;
  right: 0;
  top: -5%;
  z-index: 0;
}

.recruit .intro:after {
  content: "";
  width: 36%;
  height: 40vw;
  position: absolute;
  background: url("../images/recruit/deco.png") no-repeat;
  background-size: contain;
  right: 0;
  bottom: -10%;
  z-index: 0;
}

.recruit .intro .textbox {
  padding-top: 74%;
}

.recruit .intro .tit {
  font-size: 12vw;
  letter-spacing: 2px;
  mix-blend-mode: difference;
  color: #d9d9d9;
  margin-bottom: 5%;
  line-height: 1;
}

.recruit .intro p {
  width: 90%;
  padding-left: 5%;
  font-size: 90%;
  line-height: 2.5;
  position: relative;
  z-index: 1;
}

.recruit .training .tit {
  font-size: 18vw;
  font-family: 'Staatliches';
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1;
  position: relative;
  margin-bottom: 8%;
}

.recruit .training .tit:before {
  content: "";
  width: 64%;
  height: 3px;
  position: absolute;
  background: #000;
  top: -24px;
}

.recruit .training small {
  font-size: 3.8vw;
  display: block;
  font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
  line-height: 1.5;
}

.recruit .training .textbox {
  background: #fff;
  position: relative;
  top: -70px;
  padding: 8% 8% 0 8%;
  width: 90%;
}

.recruit .points {
  margin-bottom: 20%;
}

.recruit .points .scrool {
  background: url("../images/recruit/bg.jpg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 32vw;
  margin-bottom: 5%;
}

.recruit .points ul {
  width: 90%;
  margin: 0 auto;
}

.recruit .points li {
  border: 2px solid #00aae9;
  padding: 5%;
  margin-bottom: 4%;
}

.recruit .points .tit {
  text-align: center;
  font-size: 150%;
  margin-bottom: 5%;
  color: #269bd3;
}

.recruit .message {
  margin-bottom: 10%;
}

.recruit .message .tit {
  font-size: 6vw;
  text-align: center;
  margin-bottom: 6%;
  line-height: 1.6;
  position: relative;
}

.recruit .message .tit:before {
  content: "";
  width: 1px;
  height: 30px;
  position: absolute;
  background: #000;
  right: 50%;
  top: -45px;
}

.recruit .message .bx-wrapper {
  margin-bottom: 8%;
}

.recruit .message p {
  width: 90%;
  margin: 0 auto 5%;
}

.recruit .message a {
  background: #3029a6;
  width: 90%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding: 3% 0;
  font-size: 4vw;
  letter-spacing: 2px;
  border-radius: 10px;
  position: relative;
}

.recruit .message a:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 40%
}

.recruit .message a small {
  font-family: 'Staatliches';
  display: block;
  font-weight: normal;
  color: #8e88e1
}

/* reserve
----------------------------------------------- */
.contact-text {
  font-size: 3.4vw;
  margin-bottom: 3%;
}

.contact-text span {
  font-weight: bold;
}

.contact-text a {
  display: inline-block;
  color: #85b7c9;
  font-weight: bold;
  border-bottom: 1px solid;
}

.contact-text .dr-bnr {
  background: #fffd47;
  text-align: center;
  font-size: 4vw;
  padding: 3%;
  position: relative;
  line-height: 1.2;
  color: #000;
  border: none;
  width: 80%;
  margin: 0 auto;
  display: block;
  margin-top: 3%;
}

.contact-text .dr-bnr:before {
  content: "\f105";
  font-family: icon;
  position: absolute;
  right: 5%;
  top: 28%;
}

.thanks-text {
  font-size: 3.4vw;
  text-align: center;
}

.thanks-text span {
  display: block;
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 3%;
}

.form {
  margin: 7.5% 0;
}

/* 追加 */
.common_page_header {
  background: #c3b8b6;
}

@media screen and (max-width:768px) {
  .common_page_header {
    height: 27vw;
  }
}

/* ヘッダー右上の画像挿入 */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* FV画像の調整 */
@media screen and (min-width: 736px) {
  .hero-top-items li {
   
  }
    .hero-top-items li img{
      width:100%;
   
  }
}

.navi-item-text {
display: flex;
align-items: center;
justify-content: space-between;
}