@charset "UTF-8";
body {
  width:100%;
  height:100vh;
  background-color:#fff;
  position:fixed;
}
#bg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
}
#bg > img {
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.pc-wrapper {
  width:calc(80% - 480px);
  height:100%;
  position:fixed;
  top:0;left:0;
  z-index:1;
}
.pc-logo {
  width:80px;
  height:auto;
  position:fixed;
  top:20px;
  left:5%;
}
.pc-main {
  width:22.5%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:auto;
  position:fixed;
  top:50%;left:15%;
  transform:translate(0,-50%);
  z-index:1;
}
.pc-main-imgWrapper {
  width:100%;
  margin:0 auto 20px auto;
  outline:10px #fff solid;
  outline-offset:0;
  border-radius:50vh 50vh 0 0;
  position:relative;
}
.pc-main-imgWrapper::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:128%;
}
.pc-main-img {
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  clip-path:inset(0 0 round 50vh 50vh 0 0);
  background:#eee;
}
.pc-main-title {
  width:98%;
  height:auto;
  margin:0 auto;
  display:flex;
  align-items:center;
}
.pc-main-title > a {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:70px;
  margin-right:10px;
}
.pc-main-title > a > span {
  font-size:1rem;
  font-weight:bold;
}
.pc-main-title > img {
  width:calc(100% - 80px);
}
.pc-bg-text {
  width:auto;
  height:100%;
  position:absolute;
  top:0;
  right:calc(480px + 12.5%);
}
.pc-bg-text > img {
  width:auto;
  height:100%;
}
/*------------------------------------
 main
------------------------------------*/
#heading {
  width:100%;
  height:auto;
  background:#1a1a1a;
}
#heading > h1 {
  width:90%;
  max-width:480px;
  margin:0 auto;
  font-size:1rem;
  font-weight:normal;
  text-align:right;
  color:#fff;
}
#container {
  width:100%;
  height:100vh;
  position:absolute;
  top:0;left:0;
  overflow-y:scroll;
  z-index:1;
}
#wrapper {
  width:100%;
  max-width:480px;
  height:auto;
  position:absolute;
  top:0;
  right:10%;
  background:#fff;
  z-index:2;
}
#pc-sidebar {
  width:60px;
  height:auto;
  position:sticky;
  top:10%;
  left:100%;
  z-index:2;
}
#pc-sidebar > ul {
  width:100%;
  height:auto;
  list-style:none;
}
/*------------------------------------
 #main-img
------------------------------------*/
#main-img {
  width:100%;
  height:auto;
  position:relative;
}
.main-img {
  width:100%;
  height:auto;
}
.main-img-logo {
  width:80px;
  height:auto;
  position:absolute;
  top:5%;right:5%;
}
/*------------------------------------
 #campaign
------------------------------------*/
#campaign,#campaign2,#campaign3 {
  width:100%;
  height:auto;
  position:relative;
}
.campaign-title {
  width:100%;
  padding:30px 0;
  background:linear-gradient(45deg,#5D584E,#C2B7A3,#7A7164);
}
.campaign-title > h2 {
  width:80%;
  margin:0 auto;
}
.campaign {
  width:100%;
  margin:0 auto;
}
.campaign-coupon {
  width:95%;
  height:auto;
  margin:0 auto;
}
.campaign-coupon-img {
  width:100%;
  height:auto;
  margin:0 auto;
  position:relative;
  display:flex;
  flex-direction: column;
  align-items:center;
  background:#fff;
  /*----
  box-shadow: rgba(57, 82, 65, 0.1) 0.3rem 0.3rem 1.5rem;
  margin-top:14px;
  ---*/
}
.campaign-coupon-img::after {
  display:block;
  content:'';
  width:90%;
  height:1px;
  background:#1E1913;
}
.line-contact {
  width:90%;
  height:auto;
  padding:30px 0 50px;
  margin:0 auto;
}
.line-contact-title {
  width:90%;
  margin:0 auto 30px auto;
}
.line-contact-link {
  width:100%;
  height:auto;
}
.line-contact-link > a {
  display:block;
  width:100%;height:auto;
}
.shine-anima {
  position:relative;
  overflow: hidden;
}
.shine-anima::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  opacity: .7;
  animation: light 3s ease-in-out infinite;
}
@keyframes light {
  0% {
    transform:scale(0) rotate(45deg);
    opacity:0;
  }
  80% {
    transform:scale(0) rotate(45deg);
    opacity:.5;
  }
  81% {
    transform:scale(4) rotate(45deg);
    opacity:.8;
  }
  100% {
    transform:scale(50) rotate(45deg);
    opacity:0;
  }
}
/*------------------------------------
 #about
------------------------------------*/
#about {
  width:100%;
  height:auto;
  background:url('../img/lp/about-bg.png');
  background-size:cover;
  background-position:left top;
  position:relative;
  padding-bottom:30px;
}
.about-img {
  width:100%;
  height:auto;
  position:relative;
}
.about-img::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:80%;
}
.about-img > img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;left:0;
}
.about {
  width:90%;
  margin:0 auto;
  padding:50px 0;
}
.about-title {
  width:90%;
  height:auto;
  margin:0 auto 20px auto;
}
.about-menu {
  width:100%;
  height:auto;
}
/*------------------------------------
 #point
------------------------------------*/
#point {
  width:100%;
  height:auto;
  position:relative;
  margin-top:-40px;
}
.point-img {
  width:100%;
  height:auto;
  margin-bottom:14px;
}
.point {
  width:90%;
  height:auto;
  margin:0 auto;
}
.point-text {
  width:95%;
  margin:0 auto 30px auto;
}
.case {
  width:100%;
  height:auto;
}
/*------------------------------------
 #feature
------------------------------------*/
#feature {
  width:100%;
  height:auto;
  position:relative;
  padding-bottom:50px;
  background:#F3F1EF;
}
.feature-logo {
  width:30%;
  height:auto;
  opacity:.1;
  position:absolute;
  top:35px;left:2.5%;
}
.feature {
  width:90%;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.feature-title {
  width:90%;
  margin:0 auto 30px auto;
  position:relative;
}
.feature > ul {
  width:100%;
  height:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  list-style:none;
}
.feature > ul > li {
  width:49%;
  height:auto;
  position:relative;
}
.feature-icon {
  width:35%;
  height:auto;
  position:absolute;
  bottom:20px;left:50%;
  transform:translate(-50%,0);
}
.feature > ul > li:nth-of-type(n+3) {
  margin-top:14px;
}
/*------------------------------------
 #esthe
------------------------------------*/
#esthe {
  width:100%;
  height:auto;
  position:relative;
  background:#fff;
  padding-bottom:20px;
}
.esthe-img {
  width:100%;
  height:auto;
  position:relative;
}
.esthe-img::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.esthe-img > img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;left:0;
}
.esthe-main {
  width:100%;
  height:auto;
}
.esthe {
  width:90%;
  margin:0 auto;
  padding:50px 0;
}
.esthe-link {
  width:100%;
  margin:0 auto;
  position:relative;
}
.esthe-link::after {
  display:block;
  content:'';
  width:100%;
  height:calc(100% - 47px);
  position:absolute;
  top:47px;
  left:0;
  background: #f8f8f8;
}
.esthe-link-title {
  width:90%;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.esthe-link-banner {
  width:90%;
  height:auto;
  margin:0 auto;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  box-shadow: rgba(57, 82, 65, 0.1) 0.3rem 0.3rem 1.5rem;
}
.esthe-link-banner:nth-of-type(n+2) {
  margin-top:14px;
}
.esthe-parts {
  width:100%;height:auto;
  padding-top:10px;
  position:relative;
  z-index:1;
}
.esthe-line-contact {
  width:100%;
  background:#fff;
  position:relative;
  z-index:1;
}
.esthe-link .line-contact {
  width:90%;
  margin:0 auto;
}
/*------------------------------------
 #gym
------------------------------------*/
#gym {
  width:100%;
  height:auto;
  position:relative;
}
.gym-img {
  width:100%;
  height:auto;
  position:relative;
}
.gym-img::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.gym-img > img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;left:0;
}
.gym-main {
  width:100%;
  height:auto;
}
.gym-link {
  width:100%;
  margin:-47px auto 0 auto;
}
.gym-link-title {
  width:90%;
  margin:0 auto;
}
.gym-link-banner {
  width:100%;
  height:auto;
}
.gym-link .line-contact {
  width:90%;
  margin:0 auto;
}
/*------------------------------------
 #stone
------------------------------------*/
#stone {
  width:100%;
  height:auto;
  position:relative;
}
.stone-img {
  width:100%;
  height:auto;
  position:relative;
}
.stone-price {
  width:100%;
  height:auto;
  position:relative;
}
.stone-title {
  position:absolute;
  top:-37px;
  left:5%;
  width:90%;
  height:auto;
}
.stone-price-main {
  width:100%;
  height:auto;
}
/*------------------------------------
 #other
------------------------------------*/
#other {
  width:100%;
  height:auto;
  position:relative;
}
.other > img {
  width:100%;
  height:auto;
}
/*------------------------------------
 #review
------------------------------------*/
#review {
  width:100%;
  height:auto;
  position:relative;
  background:url('../img/lp/about-bg.png');
  background-size:cover;
  background-position:left top;
  padding:50px 0;
}
.review {
  width:90%;
  height:auto;
  margin:0 auto;
}
.review-title {
  width:35%;
  height:auto;
  margin:0 auto 20px auto;
}
.review-lead {
  width:100%;
  margin-bottom:20px;
}
.review-cols {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.review-category {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:30px 20px;
  border-radius:10px;
  box-sizing:border-box;
  background:#fff;
  box-shadow: rgba(228,233,235, 0.5) 0px 5px 15px 0px;
  position:relative;
}
.review-tab {
  width:12.5%;
  position:absolute;
  top:0;right:5%;
}
.review-category:nth-of-type(n+2) {
  margin-top:20px;
}
.review-name {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #eee;
}
.review-img {
  width:80px;
  margin-right:14px;
}
.review-img > img {
  border-radius:50vh;
  background:#C2B7A3;
}
.review-inner {
  width:auto;
  height:auto;
  display:inline-flex;
  flex-direction:column;
}
.review-personal {
  width:auto;
  height:auto;
  font-size:1.2rem;
  font-weight:bold;
}
.review-star {
  display:inline-flex;
  font-size:1.1rem;
  margin-bottom:10px;
}
.review-star > span {
  margin:0 3px;
  color:#fff;
  padding:0 5px;
  border-radius:2px;
}
.review-gym {
  background:#8FBCBC;
}
.review-esthe {
  background:#BC8F8F;
}
.review-stone {
  background:#BBBC8F;
}
.review-text {
  width:100%;
  font-size:1.3rem;
}
/*------------------------------------
 #faq
------------------------------------*/
#faq {
  width:100%;
  height:auto;
  position:relative;
  padding:50px 0;
}
.faq {
  width:90%;
  height:auto;
  margin:0 auto;
}
.faq-title {
  width:35%;
  height:auto;
  margin:0 auto 30px auto;
}
.faq-category {
  width:100%;height:auto;
  margin-bottom:10px;
  box-shadow: rgba(228,233,235, 0.5) 0px 5px 15px 0px;
  font-size:1.5rem;
}
.faq-category-title {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  cursor:pointer;
  background:#fff;
  box-sizing:border-box;
  position:relative;
}
.faq-category-title::after {
	content:"\2b";
  font-family:"Font Awesome 6 Free";
	font-weight:900;
  margin-left:auto;
  display:flex;
  align-items:center;
  padding:20px 10px;
  box-sizing:border-box;
  background: linear-gradient(45deg, #5D584E,#C2B7A3,#7A7164);
  color:#fff;
}
.faq-category-title.active::after {
	content: "\f068";
  font-family: "Font Awesome 6 Free";
	font-weight: 900;
  margin-left:auto;
  display:flex;align-items:center;
  padding:20px 10px;
  box-sizing:border-box;
  background: linear-gradient(45deg, #5D584E,#C2B7A3,#7A7164);
  color:#fff;
}
.faq-titleText {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  padding:0 10px;
  box-sizing:border-box;
  position:relative;
  text-align:left;
  font-weight:bold;
  font-size:1.6rem;
  line-height:1.6;
}
.faq-titleText img {
  display:block;
  width:30px;
  height:auto;
  margin-right:10px;
}
.faq-inner {
  display:none;
  width:100%;height:auto;
  padding:14px;
  box-sizing:border-box;
}
.faq-answer {
  width:100%;height:auto;
  display:flex;align-items:center;
  border-bottom:1px solid #ccc;
  padding-bottom:10px;
  margin-bottom:10px;
  font-size:1.6rem;
  line-height:1.6;
  font-weight:bold;
}
.faq-answer img {
  display:block;width:30px;height:auto;
  margin-right:10px;
}
.faq-innerText > img {
  margin-top:14px;
}
/*------------------------------------
 #access
------------------------------------*/
#access {
  width:100%;
  height:auto;
  position:relative;
}
.access-img {
  width:100%;
  height:auto;
  position:relative;
  margin-bottom:30px;
}
.access-img::before {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:75%;
}
.access-img::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  background:rgba(0,0,0,.3);
  z-index:1;
}
.swiper1,.swiper2 {
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  margin:0!important;
}
.swiper-slide,.swiper-slide-active {
  position:relative;
}
.slide-img {
  width:100%;height:100%;
  position:relative;
}
.swiper1 .swiper-slide picture,
.swiper1 .swiper-slide picture > img,
.swiper2 .swiper-slide img {
  width:100%;
  height:100%!important;
  object-fit:cover;
  object-position:center center;
}
.access-img > h2 {
  width:45%;
  height:auto;
  position:absolute;
  left:0;
  top:50%;
  transform:translate(0,-50%);
  z-index:2;
}
.access {
  width:90%;
  height:auto;
  margin:0 auto;
}
.access-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.access-logo > img {
  width:70px;
  margin-right:10px;
}
.access-name {
  line-height:1.6;
}
.access-name > p:nth-of-type(2) {
  font-size:1.2rem;
}
.access-name-main {
  font-size:2.4rem;
  font-weight:bold;
}
.access > dl {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:30px;
  border:1px solid #eee;
}
.access > dl > dt {
  width:80px;
  height:auto;
  background:#EDEAE4;
  padding:8px;
  box-sizing:border-box;
}
.access > dl > dt:not(:first-child) {
  border-top:1px solid #fff;
}
.access > dl > dd {
  width:calc(100% - 80px);
  padding:8px;
  box-sizing:border-box;
  background:#fff;
}
.access > dl > dd:not(:first-child) {
  border-top:1px solid #eee;
}
.access-pay > span{
  background:rgba(0,0,0,.2);
  padding:0 10px;
  margin-right:5px;
}
.access-hp {
  width:80%;height:auto;
  margin:0 auto 50px auto;
}
.access-hp > a {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:60px;
  background: linear-gradient(45deg, #5D584E, #C2B7A3, #7A7164);
  color:#fff;
  border-radius:6px;
}
.access-hp > a > img {
  width:14px;
  margin-left:14px;
}
#map {
  width:100%;
  height:auto;
  position:relative;
}
#map::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:100%;
}
#map iframe {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  filter: grayscale(1);
}
@media screen and (max-width:1280px) {
  .pc-main {
    left:7.5%;
  }
}
@media screen and (max-width:1024px) {
  .pc-main {
    display:none;
  }
  #wrapper {
    right:initial;
    left:50%;
    transform:translate(-50%,0);
  }
  .pc-bg-text {
    right:initial;
    left:calc(50% - 300px);
    transform:translate(-50%,0);
  }
}
@media screen and (max-width:896px) {
  .pc-logo {
    display:none;
  }
}
@media screen and (max-width:786px) {
  .pc-bg-text {
    display:none;
  }
}
@media screen and (max-width:600px) {
  body {
    height:auto;
    position:relative;
    background:none;
  }
  .pc-style {
    display:none;
  }
  #container {
    width:100%;
    height:auto;
    position:relative;
    left:initial;top:initial;
    overflow-y:initial;
  }
  #wrapper {
    width:100%;
    max-width:initial;
    height:auto;
    position:relative;
    right:initial;top:initial;left:initial;
    transform:initial;
  }
}
@media screen and (max-width:480px) {
  .feature-icon {
    width:35%;
    height:auto;
    position:absolute;
    bottom:14px;left:50%;
    transform:translate(-50%,0);
  }
  .review-tab {
    width:12.5%;
  }
  .review-category {
    width:100%;
    padding:30px 20px 20px 20px;
  }
  .review-category:nth-of-type(n+2) {
    margin-top:20px;
  }
  .review-name {
    padding-left:5%;
    box-sizing:border-box;
  }
  .review-img {
    width:70px;
  }

}