@charset "UTF-8";

/*.floating{
  position: fixed;
  opacity: 0;
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  z-index: 10;
}

.floating.active{
  right: 0;
  opacity: 1;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.floating.active{
  right: 35px;
}
}

.floating a{
  background: #ae9c65;
  border-radius: 15px 0 0 15px;
  color: #fff;
  padding: 20px 10px;
  writing-mode: vertical-lr;
}

.btn-wrap{
    margin-top: 80px;
}

.flex-btn{
  justify-content: center;
}

.flex-btn .re-btn {
    background: #fff;
    border-radius: 50px;
    border: 1px solid #ae9c65;
    max-width: 300px;
    padding: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 19px -6px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 0px 19px -6px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 19px -6px rgba(0,0,0,0.25);
    margin: 0 1%;
}

.flex-btn .re-btn i{
  color: #c5bbcf;
  font-size: 25px;
  font-size: 2.5rem;
}

.flex-btn .re-btn p{
  margin-left: 5px;
  color: #ae9c65;
}

.flex-btn .re-btn img{
  width: 25px;
}*/

/*--------------------------------------------sec-ad-----*/

.ad{
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg.jpg) repeat-y;
  background-position: center center;
  padding: 75px 0 65px;
  margin: 0 auto;
  text-align: center;
  -webkit-animation: slide 100s linear infinite;
  overflow: hidden;
}

@-webkit-keyframes slide {
    from { background-position: center -100%; }
    to { background-position: center 0; }
}

.ad .secInr{
  position: relative;
}

.ad-circle{
  position: absolute;
  left: 20px;
  top: 10px;
  width: 180px;
}

.ad:after{
  content: "";
  position: absolute;
  background: url(../img/line.png) no-repeat;
  height: 510px;
  width: 100%;
  background-position: center;
  background-size: cover;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.ad .secInr{
  position: relative;
  z-index: 1;
}

.ad .head21{
  color: #fff;
  margin-bottom: 10px;
  text-align: center;
}

.ad .head60{
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}

.ad .border-black{
  text-align: center;
  margin-bottom: 40px;
}

.ad .border-black span{
  background: #0f232d;
  color: #fff;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  display: inline-block;
  margin: 0 10px;
  padding: 5px 20px;
}

.ad .btn-wrap{
  margin: 0 auto;
  position: relative;
  width: 90%;
  max-width: 500px;
} 

.ad .btn-wrap a{ 
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  position: relative;
  font-size: 24px;
  font-size: 2.4rem;
  font-family: 'Zen Old Mincho', serif;
  height: 110px;
}

.ad .btn-wrap img {
    width: 65px;
    position: absolute;
    left: -21.5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.ad .btn-wrap a img{
  width: 65px;
  position: absolute;
  left: 82%;
  top: 50%;
  transform: translateY(-50%);
}

/*--------------------------------------------sec-intro-----*/

#sec-intro{
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg.jpg) repeat-y;
  background-position: center center;
  margin: -140px auto 0;
  text-align: center;
  -webkit-animation: slide 100s linear infinite;  
  padding: 0 0 100px;
}

#sec-intro .secInr {
  margin: -140px auto 0;
  display: inline-block;
  position: relative;
  z-index: 2;
}

.flex-intro{
  justify-content: space-between;
  margin-bottom: 70px; 
}

.flex-intro li{
  border-radius: 20px;
  padding: 3% 3% 1%;
  width: 32%;
  background: rgb(237,237,237);
  background: linear-gradient(90deg, rgba(237,237,237,1) 0%, rgba(214,244,246,1) 100%);
  position: relative;
}


.flex-intro li .text18{
  font-weight: 600;
}

.flex-intro li .text32{
  color: #18adb3;
  font-weight: 600;
  margin-bottom: 20px;
}

.flex-intro li img{
  height: 140px;
}

.flex-intro li:first-child img{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.intro-ttl{
  color: #fff;
  margin-bottom: 60px;
}

.intro-ttl span{
  padding-bottom: 25px;
  position: relative;
  display: block;
}

.intro-ttl span:after{
  content: "";
  background: url(../img/deco.png) no-repeat;
  background-size: contain;
  background-position: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  height: 15px;
  position: absolute;
}

#sec-intro .white-box{
  background: #fff;
  border-radius: 20px;
  padding: 4% 5%;
}

#sec-intro .white-box .flex-tick{
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto -2.5%;
  width: 90%;
}

#sec-intro .white-box .flex-tick li{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 2%;
  width: 20em;
}

#sec-intro .white-box .flex-tick li img{
  margin-right: 10px;
  width: 25px;
}

#sec-intro .white-box .flex-tick li .text20{
  font-weight: 600;
  text-align: left;
  width: calc(100% - 35px);
}

/*--------------------------------------------sec-solution-----*/

#sec-solution{
  padding: 195px 0 220px;
  position: relative;
}

#sec-solution:after{
  content: "";
  position: absolute;
  background: url(../img/solution_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

#sec-solution .secInr{
  position: relative;
  z-index: 1;
}

.flex-solution{
  justify-content: space-between;
}

.solution-ttl{
  width: 46%;
}

.solution-ttl h3{
  margin-bottom: 60px;
}

.solution-detail{
  margin-top: 125px;
  width: 48%;
}

.solution-detail .text18,
.solution-detail .text20{
  margin-bottom: 40px;
  font-weight: 600;
}

.solution-detail .text18.last{
  margin-bottom: 0;
}
  
.solution-detail .yellow-line{
  background: linear-gradient(transparent 60%,#ffee96 0);
  display: inline;
}

.solution-img{
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 60%;
}








/*--------------------------------------------sec-scheme-----*/

#sec-scheme{
  background: url(../img/grey_bg.jpg)no-repeat;
  padding: 75px 0 100px;
}

.flex-scheme{
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.flex-scheme .scheme-circle{
  width: 20%;
}

.flex-scheme .scheme-detail{
  width: 75%;
}

.flex-scheme .scheme-detail .head36{
  margin-bottom: 35px;
}

.scheme-border{
  align-items: center;
  justify-content: flex-start;
}

.scheme-border .scheme-yellow{
  border: 1px solid #3a3a3a;
}

.scheme-border .scheme-yellow p{
  background: #f8e16c;
  font-size: 27px;
  font-size: 2.7rem;
  font-weight: 600;
  padding: 10px 20px;
  height: 60px;
  display: flex;
  align-items: center;  
}

.scheme-border .scheme-white{
  border: 1px solid #3a3a3a;
  border-left: 0;
}

.scheme-border .scheme-white p{
  background: #fff;
  color: #0f232d;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  padding: 10px 20px;
  height: 60px;
  display: flex;
  align-items: center;
}

.white-box{
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 50px;
  position: relative;
}

.white-box .head30{
  text-align: center;
}

.white-box-illu{
  position: absolute;
  width: 170px;
  right: 3%;
  top: -40px;
}

.flex-model{
  justify-content: center;
}

.model-box{
  padding: 3% 5%;
}

.model-box .model-border{
  text-align: center;
  margin-bottom: 20px;
}

.model-box .text21{
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.model-box .head36{
  color: #18adb3;
  line-height: 1;
  margin-bottom: 30px;
  text-align: center;
}

.model-box img{
  margin-bottom: 30px;
}

.mb01{
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(215,244,246,1) 100%);
  border-radius: 0 0 0 20px;
}

.mb01 .model-border span{
  background: #18adc8; 
  border-radius: 30px;
  color: #fff;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  padding: 5px 10px;
}

.mb02{
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(233,228,236,1) 100%);
  border-radius: 0 0 20px 0;
}

.mb02 .model-border span{
  background: #b185ca;
  border-radius: 30px;
  color: #fff;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  padding: 5px 15px;
}

/*--------------------------------------------sec-service-----*/

#sec-service{
  padding: 110px 0;
  position: relative;
}

#sec-service:after{
  content: "";
  position: absolute;
  background: url(../img/service_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

#sec-service .secInr{
  position: relative;
  z-index: 1;
}

#sec-service .head150{
  color: #f4f4f4;
  margin-bottom: 25px;
  text-align: center;
}

.service-intro{
  margin-bottom: 60px;
}

#sec-service .head30{
  margin-bottom: 30px;
  text-align: center;
}

.border-ocean{
  margin-bottom: 30px;
  text-align: center;
}

.border-ocean span{
  background: #18adb3;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
}

.service-intro .text18{
  font-weight: 600;
  text-align: center;
}

.flex-service{
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 45px;
}

.flex-service li{
  align-self: flex-start;
  background: #fff;
  border-radius: 20px;
  padding: 3%;
  box-shadow: -0px -0px 30px -0px rgba(24,173,179,0.15);
  -webkit-box-shadow: -0px -0px 30px -0px rgba(24,173,179,0.15);
  -moz-box-shadow: -0px -0px 30px -0px rgba(24,173,179,0.15);
  margin-bottom: 2%;
  width: 30%;
}

.flex-service li img{
  display: block;
  margin: 0 auto 10px;
  height: 75px;
  width: 75px;
}

.flex-service li .text27{
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.service-point{
  margin-bottom: 20px;
  text-align: center;
}

.service-point span{
  border: 1px solid #6d767b;
  border-radius: 30px;
  display: inline-block;
  font-size: 12px;
  font-size: 1.2rem;
  padding: 1px 10px;
  margin: 0 5px;
}

.flex-service li:last-child{
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.flex-service li:last-child img{
  height: auto;
  width: 100%;
}

.grey-bg{
  border-radius: 20px;
  background: rgb(240,240,240);
  background: linear-gradient(145deg, rgba(240,240,240,1) 0%, rgba(236,232,239,1) 100%);
  padding: 4% 5%;
}

.flex-grey{
  justify-content: space-between;
  align-items: center;
}

.grey-img{
  width: 35%;
}

.grey-detail{
  width: 60%
}

.grey-detail .head32{
  color: #18adb3;
  margin-bottom: 20px;
}

.grey-point{
  margin-bottom: 20px;
}

.grey-point span{
  border: 1px solid #6d767b;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-right: 10px;
}

/*--------------------------------------------sec-case-----*/

#sec-case{
  background: #f4f4f4;
  padding: 115px 0 90px;
}

.case-intro{
  margin-bottom: 60px;
}

.case-intro .head36{
  margin-bottom: 25px;
  text-align: center;
}

.case-intro .text18{
  font-weight: 600;
  text-align: center;
}

.case-list li{
  margin-bottom: 75px;
}

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

.flex-case{
  justify-content: space-between;
  align-items: center;
}

.case-shop{
  background: #fff;
  width: 46%;
}

.case-img{
  position: relative;
}

.case-img .corner{
  position: absolute;
  left: 0;
  top: 0;
  width: 75px;
}

.case-img .circle{
  position: absolute;
  right: 5%;
  bottom: -25px;
  width: 140px;
}

.case-white{
  padding: 15px 30px 30px;
}

.case-white .salon{
  border-bottom: 1px solid #27b2b8;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 10px 5px;
}

.case-white .salon .text24{
  font-weight: 600;
}

.flex-salon{
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 5px;
}

.flex-s-detail{
  align-items: center;
  justify-content: flex-start;
  width: 50%;
}

.case-detail {
    width: 100%;
}

.salon-item{
  line-height: 1;
  width: 100px;
}

.salon-item span{
  font-size: 15px;
  font-size: 1.5rem;
  background: #fff;
  padding-right: 5px; 
  position: relative;
  z-index: 2;
}


.salon-info{
  width: calc(100% - 100px);
  position: relative;
}

.salon-info span{
  font-size: 15px;
  font-size: 1.5rem;
  background: #fff;
  display: block;
  padding-left: 5px; 
  position: relative;
  z-index: 2;
}


.salon-info:after{
  content: "";
  border-top: 1px dotted #cfcfcf;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 0;
}

.case-detail{
  width: 50%;
}

.case-detail .border-yellow{
  margin-bottom: 30px;
}

.case-detail .border-yellow .text18{
  background: #f8e16c;
  display: inline-block;
  font-weight: 600;
  padding: 0px 15px;
}

#sec-case .flex-profile{
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
}

.flex-profile .text16 .text18{
  display: block;
  font-weight: 600;
  line-height: 1;
}

.flex-profile .head40{
  color: #18adb3;
  margin-left: 5%;
  margin-top: -15px;
  line-height: 1;
  font-weight: 700;
}

.data-box{
  border-radius: 20px;
  padding: 60px 40px 30px;
  background: rgb(237,237,237);
  background: linear-gradient(145deg, rgba(237,237,237,1) 0%, rgba(214,244,246,1) 100%);
  overflow: hidden;
  position: relative;
}

.data-ttl{
  color: rgba(255,255,255,0.65);
  font-size: 80px;
  font-size: 8rem;
  font-family: 'Crimson Text', serif;
  text-align: center;
  line-height: 1;
  margin-top: -20px;
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  top: 0;
}

.flex-profile-s{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.flex-profile-s .text16 .text18{
  font-weight: 600;
}

.flex-profile-s .text27{
  color: #18adb3;
}

.flex-data{
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-data li{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  width: 50%;
}

.flex-data li .border{
  border: 1px solid #6d767b;
  border-radius: 30px;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 0px 10px;
  width: 100px;
  margin-right: 10px;
  text-align: center;
}

.data-line{
  border-top: 1px solid #6d767b;
  margin: 15px 0;
}


/*--------------------------------------------sec-message-----*/

#sec-message{
  padding: 110px 0 100px;
}

#sec-message .secInr{
  position: relative;
}

#sec-message .head150{
  color: #f4f4f4;
  text-align: right;
}

.flex-message{
  border-bottom: 1px solid #dadada;
  margin-bottom: 40px;
  padding-bottom: 40px;
  justify-content: space-between;
}

.message-ttl{
  margin-top: -80px;
  width: 46%;
}

.message-ttl .message-text{
  margin-bottom: 80px;
}

.message-ttl .message-text img{
  width: 80%;
}


.message-detail{
  width: 50%;
}

.message-detail .text18{
  margin-bottom: 40px;
}

.message-detail .text18.last{
  margin-bottom: 0;
}

.messsage-name{
  font-family: 'Zen Old Mincho', serif;
  margin-top: 50px;
  text-align: right;
}

#sec-message .flex-profile{
  align-items: flex-start;
  border-bottom: 1px dotted #cfcfcf;
  margin-bottom: 40px;
  padding-bottom: 40px;
}

.profile-ttl{
  width: 25%;
}

.profile-ttl{
  color: #18adb3;
}

.profile-detail{
  width: 75%;
}

.flex-p-detail{
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-p-detail .pd-left{
  width: 40%;
}

.flex-p-detail .pd-right{
  width: 60%;
}

.flex-pd-item{
  justify-content: flex-start;
}

.flex-pd-item .p-ttl{
  width: 100px;
}

.flex-pd-item .text16{
  width: calc(100% - 100px);
}

.profile-detail table{
  width: 100%;
}

.profile-detail table th{
  vertical-align: top;
  font-weight: normal;
  width: 17%;
}

.profile-detail table td{
  vertical-align: top;
  width: 83%;
}

/*--------------------------------------------sec-qa-----*/

#sec-qa{
    background: url(../img/grey_bg.jpg) no-repeat;
    background-size: cover;
    padding: 95px 0 100px;
}

#sec-qa .head36{
  margin-bottom: 60px;
  text-align: center;
}

.list-faq__item {
    border-radius: 10px;
    margin-bottom: 35px;
    background: #ffffff;
}

.list-faq__ttl {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.8rem;
    padding: 25px 60px 23px 33px;
    cursor: pointer;
}

.list-faq__ttl span {
    width: 31px;
    color: #18adb3;
    font-weight: 300;
    font-size: 30px;
    font-size: 3rem;
    margin-top: -4px;
}

.list-faq__ttl label {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    width: calc(100% - 60px);
    margin-left: 10px;
}

.list-faq__ttl:after {
    content: "";
    position: absolute;
    background: url(../img/icon-plus.png) center no-repeat;
    background-size: contain;
    width: 45px;
    height: 45px;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
}

.list-faq__ttl.on:after {
    background: url(../img/icon-minus.png) center no-repeat;
    background-size: contain;
}

.list-faq__wrap {
    display: none;
    border-top: 1px solid #eeeef0;
    padding: 40px 70px 40px 40px;
}

.list-faq__txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 2;
}

.list-faq__txt label {
    width: 100%;
}

@media only screen and (max-width: 1340px) {

.ad-circle {
  top: -10px;
}

.ad .head21 {
  margin-bottom: 20px;
}

.ad .head60 {
  font-size: 5rem;
}

.ad .border-black span {
  font-size: 1.7rem;
}

.ad .btn-wrap {
  max-width: 410px;
}

.ad .btn-wrap a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  position: relative;
  font-family: 'Zen Old Mincho', serif;
  height: 95px;
}

.ad .btn-wrap a .head24{
  font-size: 2rem;
}

.ad .btn-wrap img {
  width: 50px;
  left: -12.5px;
}

.flex-intro li .text32 {
  font-size: 2.6rem;
}

.intro-ttl span{
  font-size: 2.6rem;
}

#sec-intro .white-box .flex-tick li .text20 {
  font-size: 1.6rem;
}

.solution-ttl h3 {
  margin-bottom: 40px;
}

.scheme-ttl .head48 {
  font-size: 3.8rem;
}

.flex-scheme .scheme-detail .head36 {
  margin-bottom: 20px;
  font-size: 3rem;
}

#sec-scheme .white-box {
  padding: 35px;
}

.white-box-illu {
  width: 140px;
}

.model-box .head36 {
  font-size: 3rem;
}

.model-box .head36 .head30 {
  font-size: 2.4rem;
}

#sec-service .head150 {
  margin-bottom: 5px;
}

.flex-service li .text27 {
  font-size: 2.2rem;
}

.grey-detail .head32 {
  margin-bottom: 5px;
}

.grey-point {
  margin-bottom: 10px;
}

.case-detail .border-yellow {
  margin-bottom: 20px;
}

#sec-message .flex-profile {
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.data-ttl {
  font-size: 6.5rem;
}

.salon .text18 {
  font-size: 1.6rem;
}

.salon .text18 .text24{
  font-size: 2rem;
}

.salon-item {
    width: 80px;
}

.salon-item span,
.salon-info span{
  font-size: 13px;
  font-size: 1.3rem;
}

.message-ttl .message-text {
    margin-bottom: 50px;
}
}

@media only screen and (max-width: 1220px) {

.ad .head21 {
    margin-bottom: 10px;
}

.ad .head60 {
    font-size: 4rem;
}

.solution-ttl .head36 {
    font-size: 3rem;
}

.solution-detail {
    margin-top: 95px;
}

.solution-detail .text18 {
    font-size: 1.6rem;
}

.solution-detail .yellow-line {
    font-size: 1.8rem;
}

.scheme-border .scheme-yellow p {
    font-size: 2.2rem;
    padding: 10px 20px;
    height: 45px;
}

.scheme-border .scheme-white p {
    font-size: 1.8rem;
    padding: 10px 20px;
    height: 45px;
}

.flex-data li .border {
    font-size: 1.3rem;
    padding: 0px 10px;
    width: 90px;
}

.flex-data li .text16 {
    font-size: 1.4rem;
}

#sec-service .head30 {
    margin-bottom: 15px;
}

.border-ocean span {
    font-size: 2rem;
}

.service-point {
    margin-bottom: 15px;
}

.service-point span {
    margin: 0 2.5px;
}

.case-img .circle {
    width: 100px;
}

.case-white {
    padding: 1% 5% 5%;
}

.case-intro .head36 {
    margin-bottom: 15px;
    font-size: 3rem;
}

.case-intro {
    margin-bottom: 40px;
}

.flex-case {
    align-items: flex-start;
}

.data-box {
    padding: 40px 5% 30px;
}

.flex-pd-item {
    justify-content: flex-start;
    font-size: 1.6rem;
}

.profile-detail {
    font-size: 1.6rem;
}

.list-faq__ttl {
    font-size: 1.8rem;
    padding: 15px 60px 15px 25px;
}

.list-faq__wrap {
    padding: 25px;
}

.list-faq__ttl:after{
  height: 40px;
  width: 40px;
}

.list-faq__ttl label {
    font-size: 1.5rem;
}

.list-faq__txt label {
    font-size: 1.4rem;
}

}

@media only screen and (max-width: 1080px) {
.ad-circle {
    top: -60px;
    width: 150px;
    left: 0;
}
}

@media only screen and (max-width: 1000px) {
#sec-intro .white-box {
    padding: 4% 0%;
}
}

@media only screen and (max-width: 900px) {

.scheme-ttl .head27 {
    font-size: 2.3rem;
}

.scheme-ttl .head48 {
    font-size: 3.2rem;
}

.flex-scheme .scheme-detail .head36 {
    font-size: 2.4rem;
}

.scheme-border .scheme-yellow p {
    font-size: 1.8rem;
    padding: 5px 15px;
    height: 40px;
}

.scheme-border .scheme-white p {
    font-size: 1.6rem;
    padding: 5px 15px;
    height: 40px;
}

.flex-scheme {
    display: block;
}

.flex-scheme .scheme-circle {
    width: 100%;
}

.flex-scheme .scheme-circle {
    width: 100%;
    margin-bottom: 25px;
}

}

@media only screen and (max-width: 768px) {

#sec-intro .secInr {
    margin: -60px auto 0;
}

#sec-intro {
    margin: 160px auto 0;
}

.flex-intro {
    flex-wrap: wrap;
}

.flex-intro li {
    margin-bottom: 25px;
    padding: 3% 7% 3%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-intro li .text-wrap{
  text-align: left;
    width: 60%;
}

.flex-intro li:first-child img {
    position: inherit;
    left: 0;
    transform: inherit;
}

.flex-intro li img{
  width: 36%;
}

.flex-intro li .text32 {
    margin-bottom: 0;
}

.flex-intro {
    margin-bottom: 20px;
}

#sec-intro .white-box .flex-tick li {
    width: 100%;
}

#sec-solution{
  overflow: hidden;
}

#sec-solution:after {
    height: 300px;
}

#sec-solution {
    padding: 95px 0 360px;
}

.flex-solution {
    display: block;
}

.solution-ttl {
    width: 100%;
}

.solution-ttl h3 {
    margin-bottom: 20px;
    width: 70%;
}

.solution-detail {
    margin-top: 45px;
    width: 100%;
}

.solution-img {
    bottom: -50px;
    left: 10%;
    width: 80%;
}

.flex-scheme  .scheme-detail {
    width: 100%;
}

.flex-scheme  .scheme-ttl{
  text-align: center;
}

.white-box-illu {
    width: 90px;
}

.mb01 .model-border span,
.mb02 .model-border span {
    font-size: 1.6rem;
}

.model-box .model-border {
    margin-bottom: 10px;
}

.model-box .text21 {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.model-box .head36 {
    font-size: 2.4rem;
    margin-bottom: 20px;
}

.head36 .head30 {
    font-size: 1.8rem;
}

#sec-service:after {
    height: 300px;
}

#sec-service {
    padding: 70px 0 55px;
}

.border-ocean span {
    font-size: 1.6rem;
}

.service-intro {
    margin-bottom: 38px;
}

.flex-service li {
    margin-bottom: 3%;
    width: 48%;
}

.ad {
    overflow: visible;
}

.ad-circle {
    top: -120px;
}

.ad:after {
    background-position: left bottom;
}

.ad .head60 {
    font-size: 3rem;
}

.ad .border-black span {
    font-size: 1.4rem;
}

.ad .btn-wrap a {
    height: 75px;
}

.ad .btn-wrap {
    max-width: 350px;
}

.ad .btn-wrap a img {
    width: 50px;
}

.flex-case {
    display: block;
}

.case-list li {
    margin-bottom: 40px;
}

.case-shop {
    width: 100%;
    margin-bottom: 30px;
}

.case-detail {
    width: 100%;
}

#sec-message {
    padding: 90px 0 70px;
}

.flex-message {
    margin-bottom: 40px;
    padding-bottom: 40px;
    display: block;
}

.message-ttl {
    width: 100%;
}

.message-detail {
    width: 100%;
    margin-top: 25px;
}

.profile-detail{
  width: 100%;
}

.profile-ttl {
    width: 100%;
    margin-bottom: 10px;
}

#sec-message .flex-profile {
    margin-bottom: 20px;
    display: block;
    padding-bottom: 20px;
}

.flex-p-detail{
  width: 100%;
}

.flex-p-detail .pd-left,
.flex-p-detail .pd-right {
    width: 100%;
}

.flex-pd-item .p-ttl {
    width: 20%;
    font-size: 1.4rem;
}

.flex-pd-item .text16 {
    width: 80%;
}

.profile-detail table th {
    font-size: 1.4rem;
    width: 20%;
}

.profile-detail table td {
    width: 80%;
    font-size: 1.4rem;
}

#sec-qa .head36 {
    margin-bottom: 40px;
}
}

@media only screen and (max-width: 480px) {

.ad{
    padding: 55px 0 65px;
}

.ad:after {
    background-position: bottom left;
    height: 300px;
    background-size: cover;
    top: auto;
    transform: inherit;
    left: 0;
    bottom: 0;
}

.ad .head21 {
    text-align: left;
}

.ad .head60 {
    font-size: 3.4rem;
    text-align: left;
}

.ad-circle {
    top: -10px;
    right: 0%;
    left: auto;
    width: 120px;
}

.ad .border-black {
    display: flex;
}

.ad .border-black span {
    font-size: 1.4rem;
    width: 49%;
    margin: 0 1%;
}

.ad .btn-wrap a .head24 {
    font-size: 1.8rem;
}

#sec-intro {
    margin: 50px auto 0;
    padding-bottom: 70px;
}

#sec-intro .secInr {
    margin: -20px auto 0;
}

.flex-intro li:first-child img {
    width: 70px;
    margin: 0 auto;
}

.flex-intro li .text18 {
    font-size: 1.4rem;
}

.flex-intro li .text32 {
    font-size: 2.2rem;
}

.intro-ttl span {
    font-size: 2rem;
}

.intro-ttl {
    margin-bottom: 15px;
}

#sec-intro .white-box .flex-tick li img {
    margin-right: 10px;
    width: 20px;
}

#sec-intro .white-box .flex-tick li .text20 {
    font-size: 1.4rem;
}

.grey-point span {
    padding: 0px 15px;
    display: inline-block;
    margin-bottom: 6px;
}

#sec-solution {
    padding: 95px 0 210px;
}

.solution-img {
    left: 0;
    width: 100%;
}

#sec-solution:after {
    height: 200px;
    background-position: top right;
}

.solution-ttl .head36 {
    font-size: 2.1rem;
}

#sec-scheme {
    padding: 55px 0 55px;
}

.scheme-ttl .head27 {
    font-size: 1.7rem;
    letter-spacing: -0.05em;
}

.scheme-ttl .head48 {
    font-size: 2.6rem;
}

.flex-scheme .scheme-detail .head36 {
    font-size: 2.1rem;
}

.scheme-border .scheme-yellow p,
.scheme-border .scheme-white p {
    height: 70px;
}

#sec-scheme .white-box {
    padding: 25px 5%;
}

.white-box .head30 {
    line-height: 1.4;
    text-align: left;
    font-size: 2rem;
}

.white-box-illu {
    width: 80px;
    top: 16%;
}

.flex-model {
    display: block;
}

.mb01 {
    border-radius: 0;
}

.mb02 {
    border-radius: 0 0 20px 20px;
}

.model-box {
    padding: 8% 5%;
}

.model-box img {
    margin-bottom: 10px;
}

#sec-service:after {
    height: 200px;
    background-position: left top;
}

#sec-service .head30 {
    font-size: 2rem;
    line-height: 1.4;
}

.service-intro .text18 {
    text-align: left;
}

.flex-service li {
    margin-bottom: 3%;
    width: 100%;
    padding: 8% 4%;
}

.flex-service li:last-child img {
    margin-top: 30px;
}

.grey-bg {
    padding: 8% 5%;
}

.flex-grey {
    display: block;
}

.grey-img {
    width: 100%;
    margin-bottom: 10px;
}

.grey-detail {
    width: 100%;
}

#sec-case {
    padding: 55px 0;
}

.case-intro .head36 {
    margin-bottom: 5px;
    font-size: 2.6rem;
}

.case-intro {
    margin-bottom: 30px;
}

.flex-s-detail {
    width: 100%;
}

.salon-info:after {
    left: -30%;
    width: 40%;
}

.flex-profile {
    display: flex;
    align-items: center;
}

.flex-profile .text16{
  width: 30%;
}

.flex-profile .head40{
  margin-left: 0;
  text-align: right;
  width: 70%;
}

.flex-profile .flex-pd-item .text16 {
    width: 80%;
}

.data-ttl {
    font-size: 4.5rem;
    margin-top: -8px;
    margin-bottom: 5px;
}

.flex-profile-s {
    display: block;
    margin-bottom: 15px;
    text-align: center;
}

.case-list .flex-data li {
    margin-bottom: 10px;
    width: 100%;
}

.case-list li {
    margin-bottom: 45px;
}

#sec-message {
    padding: 65px 0 45px;
}

#sec-message .secInr{
    position: relative;
}

#sec-message .head150 {
    color: #f4f4f4;
    text-align: right;
    position: absolute;
    right: 0;
    top: -75px;
}

.message-ttl {
    margin-top: 0;
}

.message-ttl .message-text {
    margin-bottom: 20px;
}

.messsage-name {
    margin-top: 20px;
}

#sec-message .flex-profile {
    display: block;
}

.flex-pd-item .p-ttl,
.profile-detail table th {
    width: 25%;
}

#sec-qa {
    padding: 65px 0 50px;
}

#sec-qa .head36 {
    margin-bottom: 30px;
}

.list-faq__item {
    margin-bottom: 15px;
}

/*.floating{
  bottom: -56px;
  top: auto;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.floating a{
  border-radius: 0;
  writing-mode: horizontal-tb;
  text-align: center;
  width: 100%;
  display: block;
}

.floating.active{
  bottom: 0;
}*/

}

@media screen and (min-width: 1500px) {
  #sec-solution {
    position: relative;
    overflow: hidden;
  }
  #sec-solution .secInr {
    position: relative;
    z-index: 2;
  }
  .solution-img {
    bottom: -6vw;
    z-index: 1;
  }
}

@media screen and (min-width: 2000px) {
  .solution-img {
    bottom: -11vw;
  }
}