/* common */

.pc-mode {
  display: none;
}

.sp-mode {
  max-width: 850px;
  margin: 0 auto;
}

body {
  text-align: center;
}

img {
  vertical-align: middle;
}

.fit img {
  width: 100vw;
}

.gap img {
  width: 90vw;
}

a:hover {
  opacity: .7;
}

a {
  text-decoration: none;
  color: #000;
}

ul {
  list-style: none;
}


.bg_wt img {
  border: #fff 3px solid;
}

/* section */

#onayami {
  background: #272727;
}

.ba {
  margin: 16px 0px 16px 0px;
}

#onayami p:last-child {
  padding-bottom: 40px;
}

.rank-top {
  padding: 32px 0px 32px 0px;
}

.onayami-text {
  color: #fff;
  font-weight: bold;
}

.onayami-text.big {
  font-size: 20px;
}

.rank {
  margin-bottom: 24px;
}

.stuff {
  color: #fff;
  padding-bottom: 40px;
  padding-top: 28px;
}

.kozue {
  margin: 24px 0px 0px 0px;
}

.kozue img {
  width: 50vw;
}

.desc {
  text-align: left;
  text-align:justify;
  line-height: 2;
  width: 80vw;
  margin: 24px auto 0 auto;
}

#salon {
  color: #fff;
  padding-bottom: 24px;
  padding-top: 16px;
}

span.bold {
  font-weight: bold;
}

span.bold-border {
  font-weight: bold;
  border-bottom: #fff 2px solid;
}

.background {
  background:#B0988C;
}

.selection {
  background: #272727;
  padding: 32px 0px 40px 0px;
}

.gold {
  margin: 40px 0px 40px 0px;
}

.bold {
  font-weight: bold;
}

.flow-wrapper {
  padding: 24px 0px 24px 0px;
}

.desc.step {
  margin-top: 8px;
}

.flow.top {
  margin: 24px 0px 0px 0px;
}

.flow {
  margin: 64px 0px 0px 0px;
}

.small {
  font-size: 14px;
}

.gap.eye {
  margin: 24px 0px 56px 0px;
}

.price {
  background: #272727;
  color: #fff;
  padding: 32px 0px 40px 0px;
}

#q-a {
  padding: 32px 0px 32px 0px;
}

.q-a {
  margin-top: 56px;
}

.q-a-icon img {
  width: 50px;
  display: block;
  text-align: left;
  margin-left: 40px;
}

.q-a-desc {
  text-align: left;
  text-align:justify;
  line-height: 2;
  margin: 0px 40px 0px 40px;
}

.q-a-desc.q {
  margin-bottom: 16px;
}

.access-wrapper {
  background: #272727;
  color: #fff;
  padding: 32px 0px 40px 0px;
}

.desc.access {
  text-align: center;
  margin-bottom: 32px;
}

iframe {
  width: 95vw;
  height: 300px;
}

.fit.f {
  margin-top: 40px;
}

.sns {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.sns img {
  width: 60px;
  margin: 32px 0px 32px 0px;
}

.line {
  margin: 0px 32px 0px 32px;
}

.downy {
  margin-top: 64px;
}

.downy img {
  width: 100px;
  text-align: center;
}

#reserve {
  position: fixed;
  bottom: 0;
  opacity: 0;
  transition: opacity .3s;
}

#reserve.scrolled {
  opacity: 1;
}

footer {
  background: silver;
  padding: 24px;
  margin-top: 40px;
  margin-bottom: 100px;
}


/* pc-mode */

.pc-downy-icon {
  height: 100px;
  margin-left: 40px;
}

.pc-sns-icon {
  width: 60px;
}

.pc-header,
.pc-sns-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pc-header {
  border-bottom: #ededed 2px solid;
}

.pc-sns-btn {
  margin-right: 40px;
}

.pc-sns-icon {
  margin-left: 16px;
}

.pc-nav {
  width: 100%;
  margin: 0 auto;
}

.pc-nav ul {
  display: flex;
  justify-content: center;
}

.pc-nav li {
  margin: 16px 24px 16px 24px ;
}

.pc-top img {
  width: 100vw;
}

.pc-reserve img {
  width: 800px;
  text-align: center;
}

.pc-reserve.top {
  margin: 40px 0px 40px 0px;
}

.pc-rank-top img {
  width: 70vw;
}

.pc-rank-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
}

.pc-rank img {
  width: 480px;
}

.pc-three-gold img {
  width: 1000px;
  margin: 0 auto;
}

.pc-title img {
  width: 600px;
}

.black {
  background: #272727;
  color: #fff;
  padding-top: 24px;
  padding-bottom: 24px;
}

.pc-hukidashi {
  margin-top: 80px;
}

.pc-hukidashi img {
  width: 800px;
}

.pc-graph-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
}

.pc-graph img {
  width: 480px;
}

.pc-graph03 img {
  width: 500px;
  margin-top: 80px;
}

.pc-ba-wrapper {
  display: flex;
  width: 1000px;
  margin: 80px auto 80px auto;
  justify-content:space-around;
  align-items: center;
}

.pc-ba img {
  width: 350px;
}

.pc-ba02 img {
  width: 600px;
}

.pc-reserve.ba {
  padding: 0px 0px 40px 0px;
}

.brown {
  background: #b0988c;
  padding-bottom: 40px;
}

.pc-kozue-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding-bottom: 40px;
}

.pc-kozue-wrapper .desc {
  width: 500px;
}

.pc-kozue {
  margin-left: 50px;
}

.pc-kozue img {
  width: 300px;
}

.pc-salon-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.pc-salon-wrapper .desc {
  width: 480px;
  margin: 0;
}

.pc-salon img {
  width: 480px;
}

.pc-downyga-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.pc-downyga img {
  width: 480px;
}

.pc-flow-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
}

.pc-flow-wrapper .desc {
  width: 480px;
  margin: 0;
}

.pc-flow-pic img {
  width: 480px;
}

.pc-price .desc {
  width: 500px;
  text-align: center;
  margin-bottom: 32px;
}

.pc-price-eye img {
  width: 600px;
  margin-bottom: 40px;
}

.pc-access-wrapper {
  display: flex;
  width: 1000px;
  margin: 40px auto 40px auto;
  justify-content: space-between;
  align-items: center;
}

.pc-access-wrapper .desc {
  width: 480px;
  text-align: center;
  margin: 0;
}

.pc-access-wrapper iframe {
  width: 480px;
  margin-bottom: 40px;
}

.pc-reserve.footer {
  margin: 120px 0px 120px 0px;
}



@media (min-width: 850px) {
  
  .sp-mode {
    display: none;
  }

  .pc-mode {
    display: block;
  }

  .ba {
    margin: 0;
  }

  .q-a {
    width: 1000px;
    margin: 0 auto 56px auto;
  }

  footer {
    margin-bottom: 0;
  }

}