/*	cmn-color
------------------------------------ */
/*	transition,hover
------------------------------------ */
/*	media-screen
------------------------------------ */
/*	font
------------------------------------ */
@font-face {
  font-family: "yu-go-r";
  src: url("../fonts/YuGothic-Regular.ttf");
}
@font-face {
  font-family: "yu-go-m";
  src: url("../fonts/YuGothic-Medium.ttf");
}
@font-face {
  font-family: "yu-go-b";
  src: url("../fonts/YuGothic-Bold.ttf");
}
@font-face {
  font-family: "hina";
  src: url("../fonts/HinaMincho-Regular.ttf");
}
/*	layout
------------------------------------ */
/*	cmn-color
------------------------------------ */
/*	transition,hover
------------------------------------ */
/*	media-screen
------------------------------------ */
/*	font
------------------------------------ */
@font-face {
  font-family: "yu-go-r";
  src: url("../fonts/YuGothic-Regular.ttf");
}
@font-face {
  font-family: "yu-go-m";
  src: url("../fonts/YuGothic-Medium.ttf");
}
@font-face {
  font-family: "yu-go-b";
  src: url("../fonts/YuGothic-Bold.ttf");
}
@font-face {
  font-family: "hina";
  src: url("../fonts/HinaMincho-Regular.ttf");
}
/*	layout
------------------------------------ */
/*	font-size  cmn
------------------------------------ */
/************************************************

  SP layout

************************************************/
/* =========================================
  main  SP
========================================= */
/*	cmn parts  SP
------------------------------------ */
.com-inner {
  padding: 50px 15px;
}

.com-md-inner {
  padding: 50px 15px;
}

.no-sb {
  margin: 30px auto 0;
}

.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}

.anchor-mp {
  margin: -75px auto 0;
  padding-top: 75px;
}

.com-txt-box p:nth-of-type(n+2) {
  margin-top: 20px;
}

.com-frame::before {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}

.ruby-rt {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  top: -15px;
  left: 0;
}

.com-tel-note {
  text-align: center;
}

.com-sp-left {
  position: relative;
  left: -15px;
}

/*	top-campaign  SP
------------------------------------ */
#top-campaign .campaign-bg::before {
  height: 50%;
}
#top-campaign .campaign-inner {
  padding: 50px 15px;
}
#top-campaign .campaign-box {
  height: auto;
  padding-top: 28px;
  padding-bottom: 15px;
  background-position: 20% top;
}
#top-campaign .campaign-box-spring {
  background-image: url(../img/top/spring-sp.jpg);
}
#top-campaign .campaign-box-spring::before {
  width: 43px;
  height: 32px;
  right: 4px;
  top: 64px;
}
#top-campaign .campaign-box-summer {
  background-image: url(../img/top/summer-sp.jpg);
  background-position: 35% top;
}
#top-campaign .campaign-box-autumn {
  background-image: url(../img/top/autumn-sp.jpg);
}
#top-campaign .campaign-box-autumn::before {
  width: 40px;
  height: 43px;
  top: 75px;
  right: 12px;
}
#top-campaign .campaign-box-winter {
  background-image: url(../img/top/winter-sp.jpg);
  background-position: 40% top;
}
#top-campaign .campaign-box-winter::before {
  width: 35px;
  height: 39px;
  top: 75px;
  right: 5px;
}
#top-campaign .campaign-head {
  width: 125%;
  margin-left: auto;
  padding: 5px 21% 5px 0;
  font-size: 1.8rem;
  top: 8px;
  line-height: 1.5;
}
#top-campaign .campaign-head-spring {
  background: #ea8db9;
}
#top-campaign .campaign-head-summer {
  background: #4887d4;
}
#top-campaign .campaign-head-autumn {
  background: #e7a83b;
}
#top-campaign .campaign-head-winter {
  background: #97d1e6;
}
#top-campaign .campaign-con {
  max-width: 260px;
  margin-top: 40px;
  margin-left: auto;
  padding-right: 15px;
  position: static;
}
#top-campaign .campaign-con-txt {
  font-size: 1.8rem;
}
#top-campaign .campaign-con-txt-spring {
  text-shadow: 0px 0px 5px #ea8db9, 0px 0px 15px #ea8db9, 0px 0px 15px #ea8db9, 0px 0px 15px #ea8db9, 0px 0px 15px #ea8db9, 0px 0px 15px #ea8db9, 0px 0px 25px #ea8db9;
}
#top-campaign .campaign-con-txt-summer {
  position: relative;
  left: 41px;
}
#top-campaign .campaign-con-txt-winter {
  position: relative;
  left: 42px;
}
#top-campaign .campaign-con-btn {
  margin-top: 13px;
  font-size: 1.4rem;
  background-size: 7px;
}

/*	top-news  SP
------------------------------------ */
#top-news .news-inner {
  flex-direction: column;
  align-items: center;
}
#top-news .news-box {
  display: flex;
  width: 100%;
  height: 70px;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
}
#top-news .news-btn {
  margin: 0 0 0 auto;
}
#top-news .news-head {
  font-size: 2.6rem;
}
#top-news .news-post {
  margin: 20px auto 0;
}

/*	top-greeting  SP
------------------------------------ */
#top-greeting .greeting-img {
  position: relative;
  left: -15px;
}
#top-greeting .greeting-con {
  margin: 15px auto 0;
  padding: 8px 0 0 20px;
  background-size: 60px;
}
#top-greeting .greeting-head {
  font-size: 2.2rem;
}
#top-greeting .greeting-txt {
  margin-top: 20px;
}
#top-greeting .greeting-box {
  margin-top: 30px;
  padding: 20px 15px;
}
#top-greeting .greeting-box-head-logo {
  width: 156px;
  margin-right: 15px;
}

/*	top-guide  SP
------------------------------------ */
#top-guide .guide-box {
  background-size: 40px, 40px, 40px, 40px, cover;
  background-position: 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) calc(100% - 10px), 10px calc(100% - 10px), center;
}
#top-guide .guide-head {
  font-size: 3rem;
}
#top-guide .guide-ttl {
  font-size: 1.8rem;
}
#top-guide .guide-ttl::before, #top-guide .guide-ttl::after {
  width: 12px;
}
#top-guide .guide-ttl::before {
  margin-right: 13px;
}
#top-guide .guide-ttl::after {
  margin-left: 13px;
}
#top-guide .guide-txt {
  margin-top: 20px;
  padding: 9px;
}
#top-guide .guide-list {
  margin-top: 0;
  flex-direction: column;
  align-items: center;
}
#top-guide .guide-list-item {
  width: 200px;
  height: 157px;
  margin: 30px auto 0;
  padding-top: 70px;
  background-size: 53px;
  background-position: 45% 20px;
  font-size: 1.9rem;
}
#top-guide .guide-list-item-sm {
  padding-top: 60px;
  font-size: 1.7rem;
}
#top-guide .guide-btn {
  max-width: 250px;
  margin-top: 40px;
}

/*	com-bnr  SP
------------------------------------ */
.com-bnr .bnr-list {
  width: 100%;
  padding: 50px 15px;
  flex-direction: column;
  align-items: center;
}
.com-bnr .bnr-list-item:nth-of-type(n+2) {
  margin: 30px auto 0;
}
.com-bnr .bnr-list-link {
  padding-top: 50%;
}
.com-bnr .bnr-list-ttl {
  font-size: clamp(16px, 6.5vw, 60px);
}

.sub .com-bnr .bnr-list-ttl {
  font-size: clamp(20px, 1.9vw, 36px);
}

/*	com-u24  SP
------------------------------------ */
.com-u24 .u-box {
  height: auto;
  padding: 0 0 30px;
  background-color: #fff;
  text-align: center;
}
.com-u24 .u-box-img {
  position: static;
}
.com-u24 .u-head {
  padding: 30px 15px 0;
  font-size: 2.2rem;
}
.com-u24 .u-head-border {
  font-size: 3.6rem;
}
.com-u24 .u-txt {
  margin-top: 15px;
}

/*	com-contact  SP
------------------------------------ */
.com-contact {
  padding-bottom: 50px;
}
.com-contact-img {
  width: 80%;
  position: relative;
  top: auto;
  left: -15px;
}
.com-contact-box {
  width: 90%;
  margin: -15px auto 0;
  padding: 30px 15px 60px;
  background-size: 100px, cover;
  background-position: 101% 101%, center;
}
.com-contact-head {
  font-size: 2rem;
}
.com-contact-head-lg {
  font-size: 2.7rem;
}
.com-contact-btn {
  margin-top: 30px;
}

/*	top-sns  SP
------------------------------------ */
#top-sns .sns-head {
  padding: 42px 0 24px;
  background-size: 234px;
  font-size: 2.5rem;
}
#top-sns .sns-txt {
  margin-top: 20px;
}
#top-sns .sns-btn {
  margin-top: 25px;
}

/* =========================================

  sub layout  SP

========================================= */
/*	guide  SP
------------------------------------ */
#guide .about-con {
  margin: 15px auto 0;
  padding: 29px 0 30px 24px;
  background-size: 67px;
}
#guide .about-con::before {
  height: 86.4%;
}
#guide .about .com-txt-box {
  margin-top: 20px;
}
#guide .salon-list {
  margin-top: 15px;
  flex-direction: column;
  align-items: center;
}
#guide .salon-list-item:nth-of-type(n+2) {
  margin: 15px auto 0;
}
#guide .feature-txt {
  margin-top: 15px;
}
#guide .feature-box {
  margin-top: 20px;
  padding: 30px 15px;
  border-width: 1px;
  flex-direction: column-reverse;
  align-items: center;
}
#guide .feature-box-con {
  max-width: 100%;
  margin: 15px auto 0;
}
#guide .feature-box-head {
  padding: 0 5px 8px;
  font-size: 2.3rem;
}
#guide .feature-box-txt {
  margin-top: 15px;
}
#guide .add {
  margin-top: 50px;
}
#guide .add-list {
  margin-top: 10px;
  flex-direction: column;
  align-items: center;
}
#guide .add-list-item {
  max-width: 100%;
}
#guide .add-list-item:nth-of-type(n+2) {
  margin: auto;
}
#guide .add-list-head {
  padding-top: 136px;
  font-size: 2rem;
  background-size: auto, 270px;
}
#guide .add-list-head03 {
  padding-top: 123px;
  background-position: center 70px, center;
  background-size: 38px, 270px;
  font-size: 2rem;
}
#guide .add-list-txt {
  max-width: 100%;
  margin-top: -10px;
}
#guide .flow-txt {
  margin-top: 15px;
}
#guide .flow-list {
  margin-top: 20px;
}
#guide .flow-list-item {
  padding: 20px 15px;
  flex-direction: column-reverse;
  align-items: center;
}
#guide .flow-list-item:nth-of-type(n+2) {
  margin-top: 25px;
}
#guide .flow-list-con {
  margin: 10px auto 0;
}
#guide .flow-list-txt {
  margin-top: 10px;
}
#guide .flow-list-btn {
  margin-top: 20px;
}

/*	teen  SP
------------------------------------ */
.com-about .greeting-bg::before {
  width: 100%;
  height: 88%;
  top: auto;
  left: 0;
  bottom: -15px;
}
.com-about .greeting-con {
  margin: 15px auto 0;
  padding-top: 24px;
  background-size: 78px;
  background-position: 169px top;
}
.com-about .greeting-head {
  font-size: 2.7rem;
}
.com-about .greeting .com-txt-box {
  margin-top: 20px;
}
.com-about .problem-inner {
  padding-bottom: 150px;
}
.com-about .problem-box {
  background-size: 40px, 40px, 40px, 40px, 200px, cover;
  background-position: 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) calc(100% - 10px), 10px calc(100% - 10px), center calc(100% + 10px), center;
}
.com-about .problem-head {
  font-size: 2.5rem;
}
.com-about .problem-list {
  margin-top: 25px;
}
.com-about .problem-list-item {
  width: 100%;
  padding: 10px 10px 10px 30px;
  background-size: 31px;
  background-position: -4px 17px;
}
.com-about .problem-list-item:nth-of-type(n+2) {
  margin: 20px auto 0;
}
.com-about .solution-box {
  padding: 35px 15px 30px;
}
.com-about .solution-head {
  padding-bottom: 10px;
  font-size: 2.4rem;
  line-height: 1.6;
}
.com-about .solution-flex {
  margin-top: 20px;
  flex-direction: column-reverse;
  align-items: center;
}
.com-about .solution-img {
  margin: auto;
}
.com-about .solution .com-txt-box {
  margin: 15px auto 0;
}
.com-about .service-inner {
  padding: 0 15px 50px;
}
.com-about .service-list {
  margin-top: 20px;
}
.com-about .service-list-item {
  padding: 0;
}
.com-about .service-list-item01 {
  background: none;
}
.com-about .service-list-box {
  margin: auto;
  padding: 15px 15px 20px;
  background: #f9edf3;
}
.com-about .service-list-box::before {
  content: none;
}
.com-about .service-list-head {
  font-size: 2.3rem;
}
.com-about .service-list-txt {
  margin-top: 5px;
}
.com-about .rank-head {
  padding-top: 7px;
  background-size: 73px;
}
.com-about .rank-list {
  margin-top: 20px;
}
.com-about .rank-list-item {
  padding: 20px 15px 80px;
}
.com-about .rank-list-head {
  padding: 0 10px 10px;
  font-size: 2.3rem;
}
.com-about .rank-list-head-num {
  display: block;
  margin: 0 0 5px;
  font-size: 1.8rem;
}
.com-about .rank-list-txt {
  margin-top: 20px;
  padding: 0;
}
.com-about .rank-list-ico {
  width: 50px;
  left: 7px;
}
.com-about .feature-txt {
  margin-top: 15px;
}
.com-about .feature-list {
  margin-top: 30px;
}
.com-about .feature-list-item {
  padding: 25px 15px;
  flex-direction: column-reverse !important;
  align-items: center;
}
.com-about .feature-list-con {
  margin-top: 0;
}
.com-about .feature-list-txt-box {
  margin-top: 15px;
}
.com-about .note-head {
  font-size: 2.4rem;
  line-height: 1.5;
}
.com-about .note-btn {
  display: flex;
  justify-content: center;
  line-height: 1.3;
  align-items: center;
}
.com-about .check-head {
  font-size: 2.3rem;
}
.com-about .check-txt {
  margin-top: 20px;
}
.com-about .check-box {
  margin-top: 30px;
  padding: 20px 15px;
}
.com-about .check dl {
  padding: 0 5px;
}

/*	twenties  SP
------------------------------------ */
#twenties .rank-head {
  font-size: 6vw;
}

/*	thirties  SP
------------------------------------ */
#thirties .rank-head {
  font-size: 6vw;
}

/*	menu  SP
------------------------------------ */
#menu .menu-list {
  margin-top: 30px;
}
#menu .menu-list-box {
  padding: 20px 15px;
}
#menu .menu-list-box-flex {
  margin-top: 15px;
  flex-direction: column;
  align-items: center;
}
#menu .menu-list-box-r {
  max-width: 100%;
  margin: 10px auto 0;
}
#menu .menu-list-box-txt {
  margin-top: 18px;
}

/*	information  SP
------------------------------------ */
#information .salon-list {
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
}
#information .salon-list-item:nth-of-type(n+2) {
  margin: 20px auto 0;
}
#information .salon-map {
  margin-top: 30px;
}
#information .salon-map-head {
  font-size: 2.5rem;
}
#information .com-contact {
  padding-top: 50px;
}
#information .com-contact::before {
  height: 105%;
}

/*	news  SP
------------------------------------ */
#news .detail .com-head01 {
  font-size: 2.5rem;
}/*# sourceMappingURL=style_sp.css.map */