@charset "utf-8";


h2.home-section-title{
  font-size: var(--font-size-xxl);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

.home-section-sub-title{
  font-size: var(--font-size-l);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

.home-section-sub-title em{ white-space: nowrap;}

h2.home-section-title .small{
  padding: 0.5rem;
  display: block;
  font-size: var(--font-size-l);
  letter-spacing: inherit;
}
.home-section-sub-title .small{
  padding: 0.5rem;
  display: block;
  font-size: var(--font-size-s);
  line-height: 1.4;
  letter-spacing: inherit;
}

#HOME .link-list li{ margin: 0.3em 0;}

/* ONEWIG */

h2.home-section-title-01{
  margin:0;
  padding:0;
  font-size: var(--font-size-xxl);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}
h2.home-section-title-01 .small{ font-size: var(--font-size-xl);}
h2.home-section-title-01 strong{ margin-right: 1rem; font-size: var(--font-size-xxxl);}
h2.home-section-title-01 .dott{ position: relative; display: inline-block;}

h2.home-section-title-01 .dott::before,
h2.home-section-title-01 .dott::after{
  position: absolute;
  top: -0.4rem;
  margin: 0;
  padding: 0;
  left: calc(0.5em - 0.2rem);
  width: 0.4rem;
  height: 0.4rem;
  display: block;
  border-radius: 1rem;
  background-color: #f63;
  content: "";
}

h2.home-section-title-01 .dott::after{ left: calc(1.5em - 0.2rem);}

h2.home-section-title-02{
  margin: 0;
  padding: 0 0 0.5em;
  font-size: var(--font-size-l);
  line-height: 1.4;
  font-weight: 600;
  text-align: left;

}

h2.home-section-title-02 strong{ display: block; font-size: var(--font-size-xxxl); letter-spacing: 0.1em;}


.home-onewig-inner{
  position: relative;
  margin: 2em auto 0;
  padding: 0.5em 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.home-onewig-inner::before {
  position: absolute;
  bottom: -0.1rem;
  left: 0;
  padding-bottom: calc(8vw + 1rem);
  overflow: hidden;
  content: '';
  border-bottom: 8vw solid #fff;
  border-right: 50vw solid transparent;
}
.home-onewig-inner::after {
  position: absolute;
  bottom: -0.1rem;
  right: 0;
  padding-bottom: calc(8vw + 1rem);
  overflow: hidden;
  content: '';
  border-bottom: 8vw solid #fff;
  border-left: 50vw solid transparent;
}

#TOPONEWIG .title-block{
  margin: -2.5em -1em 0 0;
  width: 94%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#TOPONEWIG .title-image{ width: 40%; max-width: 20rem;}
#TOPONEWIG .center-image{ position: relative; margin-top: -1.5em; margin-bottom: -1em; width: 40%; max-width: 18rem; z-index: 100;}

#TOPONEWIG .info-block{
  margin: 0 auto;
  width: 94%;
  max-width: 58rem;
  border-radius: 1em;
}

#TOPONEWIG .info-block.stop{margin-top: 5rem;}

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

#TOPONEWIG{
 min-height: 100vh;
 padding-bottom: 6rem;
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 justify-content: center;
 align-content: center;
}

.home-onewig-inner{ margin: 1.5em auto 0;}
#TOPONEWIG .info-block.padding-2{ padding: 1em;}
#TOPONEWIG .center-image{ position: relative; margin-top: -1em; margin-bottom: -1em; width: 40%; max-width: 16rem; z-index: 100;}

#TOPONEWIG .button-white.mt-2{ margin-top: 0;}




}/* End max 640 */





/* ABOUT */

#ABOUT{ margin-top: 8em;}

.home-about-mainimage{
  position: relative;
  margin: 0 auto 0;
  padding: 0;
  width: 100%;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  
  background-color: #f1f1f1;
}

.home-about-logo{
  margin: 0;
  padding: 0 5% 0;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-about-logo img{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 32.3rem;
  max-height: 12rem;
}

.home-about-image{
  margin: 0;
  padding: 0 0;
  width: 50%;
}
.home-about-image img{ margin: 0; display: block; width: 100%; height: 18rem; object-fit: cover;}


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

#ABOUT{ margin-top: 1em;}

.home-about-mainimage{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 14rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.home-about-logo{
  padding: 0 1rem 0;
  width: 50%;
}

.home-about-image{ width: 50%;}
.home-about-image img{ margin: 0; display: block; height: 14rem; object-fit: cover;}


}/* End max 640 */


/* colabo */

.colabo-block{
  position: relative;
  margin: auto;
  padding: 0;
  width: 94%;
  max-width: 100rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.colabo-block-child{
  position: relative;
  margin: 0;
  width: calc(50% - 1em);
  border-radius: 1em;
}

.colabo-block-child.charity{ background-color: #e6f8ff;}
.colabo-block-child.social{ background-color: #f4eaff;}

.colabo-block-child.charity h3 { color: #00aeef;}
.colabo-block-child.social h3,
.colabo-block-child.social a{ color: #a64dff;}

.colabo-block-child.charity h3 span,
.colabo-block-child.social h3 span{ color: #333;}

.colabo-block-child.social a.arrow-m::before{ border-color: #a64dff;}

.colabo-block-child.social .swiper-button-prev::after,
.colabo-block-child.social .swiper-button-next::after { border-color: #a64dff;}
.colabo-block-child.social .swiper-pagination-bullet{ background-color: #a64dff;}

.swiper-slide img{ width: 100%; max-width: 100%;}



.colabo-block-child .top-colabo-slider{
  position: relative;
  margin: 0 auto;  
  width: 100%;
  max-width: 43rem;
}

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

.colabo-block{
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 100rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}

.colabo-block-child.charity{
  position: relative;
  width: 90%;
  z-index: 100;
}

.colabo-block-child.social{
  position: relative;
  margin-top: -1.5em;
  padding-top: 2em;
  width: 90%;
  z-index: 1;
}

.colabo-block-child.charity::before{
  position: absolute;
  top: 0;
  left: -20%;
  margin: 0;
  width: 50%;
  height: 100%;
  background-color: #e6f8ff;
  content: "";
  z-index: -1;
}

.colabo-block-child.social::before{
  position: absolute;
  top: 0;
  right: -20%;
  margin: 0;
  width: 50%;
  height: 100%;
  background-color: #f4eaff;
  content: "";
  z-index: -1;
}


}/* End max 640 */


/* HOME ISSUE */

.home-issue-title{
  position: relative;
  margin: 0 0 3em;
  padding: 0;
  width: 100%;
  height: 22rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.home-issue-title .home-section-title{
  position: absolute;
  margin: 0;
  padding: 0.5em 1.5em;
  background: rgba(255,255,255,0.8);
  z-index: 100;
}

.home-issue-mainimage{
  position: relative;
  margin: 0 auto 0;
  padding: 0;
  width: 100%;
  height: 22rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background-color: #fdfdfd;
}

.home-issue-image{
  margin: 0;
  padding: 0 0;
  width: 80%;
  max-width: 60rem;
}
.home-issue-image img{ margin: 0; display: block; width: 100%; height: 22rem; object-fit: cover; object-position: center left;}


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

.home-issue-title{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.home-issue-title .home-section-title{
  position: relative;
  margin: 0;
  padding: 1em 0 0.5em;
  background: none;
  order: 2;
}

.home-issue-mainimage{ width: 100%; height: 14rem;}
.home-issue-image img{ height: 14rem; object-fit: cover;}

}/* End max 640 */



/* HOME SALON */

#TOPSALON{
  position: relative;
  overflow: hidden;
  border-top: 0.5rem solid #00bd78;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(252,251,224, 0.6) 1em, rgba(252,251,224, 0.6) 2em );
}

#TOPSALON:before{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%); 
  content: "";
  z-index: 1;
}

#TOPSALON .home-salon-title-block{
  position: relative;
  margin: 2em auto 0;
  width: 94%;
  max-width: 100rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 10;
}

#TOPSALON .home-salon-title{
  position: relative;
  margin: 0;
  width: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#TOPSALON .home-salon-image{
  position: relative;
  margin: 0;
  width: calc(42% - 1.5em);
  display: block;
}

#TOPSALON .section-inner{
  position: relative;
  z-index: 10;
}


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

#TOPSALON .home-salon-title-block{
  margin: 2em auto 0;
  justify-content: center;
}

#TOPSALON .home-salon-title{ width: 100%;}
#TOPSALON .home-salon-image{ margin-top: 1em; width: 100%; max-width: 60rem;}

}/* End max 640 */




/* HOME-HAIR */

#TOPHAIR{ position: relative;}

#TOPHAIR .hair-inner{ position: relative; margin-top: 5em; padding-top: 2.5em; padding-bottom: 8vw;}

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

#TOPHAIR{
 min-height: 100vh;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-content: center;
}

#TOPHAIR .hair-inner{ margin-top: -2em; padding: 2.5em 0;}

}/* End max 640 */

#TOPHAIR h2.home-section-title-01{
  margin: 0 0 0.7em -2.2em;
  width: 94%;
  transform: rotate( 6deg );
  line-height: 1.3;
}

.home-hair-bg{
  position: relative;
  margin: auto;
  padding: 0 0;
  width: 100%;
  display: block;
}

.home-hair-bg::after{
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  padding: 0 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: skewY(-6deg);
  background-color: #f0753c;
  content: "";
  z-index: -20;
}

.home-hair-bg::before{
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  padding: 0 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: skewY(6deg);
  background-color: #ff982f;
  content: "";
  z-index: 10;
}

@media screen and (min-width: 1280px) {

.home-hair-bg::after{
 background: rgb(255,255,255);
background: linear-gradient(100deg, rgba(255,255,255,1) 8%, rgba(240,117,60,1) 20%, rgba(240,117,60,1) 50%, rgba(240,117,60,1) 80%, rgba(255,255,255,1) 92%); 
}

.home-hair-bg::before{
 background: rgb(255,255,255);
background: linear-gradient(100deg, rgba(255,255,255,1) 8%, rgba(255,152,47,1) 20%, rgba(255,152,47,1) 50%, rgba(255,152,47,1) 80%, rgba(255,255,255,1) 92%); 
}

}/* End min 1280 */


.home-hair-inner {
  position: relative;
  margin: auto;
  width: 94%;
  max-width: 58rem;
  z-index: 20;
}

.hair-title-image{
  position: absolute;
  top: 0;
  left: calc(50% + 3rem);
  margin: auto;
  width: 42%;
  max-width: 18rem;
  display: block;
  z-index: 1;
}

.button.hair-button a{
  background-color: #fff;
  color: #333;
}

.button.hair-button a::before{
  border-top: 0.3rem solid #ff6a38;
  border-right: 0.3rem solid #ff6a38;
}

#TOPHAIR .home-section-sub-title{
  position: relative;
  margin: 0 auto 1em;
  padding: 0.5em 0;
  width: 16em;
  text-align: center;
  z-index: 10;
}

#TOPHAIR .home-section-sub-title::before,
#TOPHAIR .home-section-sub-title::after{
  position: absolute;
  left: 0.5em;
  bottom: 0.5rem;
  margin: auto;
  display: block;
  width: 0.2rem;
  height: 75%;
  background-color: #fff;
  transform: rotate(-30deg);
  content: "";
  z-index: 10;
}
#TOPHAIR .home-section-sub-title::after{
  right: 0.5em;
  left: inherit;
  transform: rotate(30deg);
}

.home-hair-inner .home-hair-faq{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 14rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.home-hair-inner .home-hair-faq ul{
  position: relative;
  margin: 0 0 0 16rem;
  padding: 0 0 1em;
  width: calc(100% - 16rem);
  z-index: 10;

}

.home-hair-inner .home-hair-faq-image{
  position: absolute;
  left: 0;
  bottom: 1.2rem;
  margin: 0;
  width: 18rem;
  display: block;
  transform: rotate(6deg);
  z-index: 1;
}

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

.home-hair-inner .home-hair-faq{
  min-height: 11rem;
  justify-content: flex-end;
}

.home-hair-inner .home-hair-faq ul{
  margin: 0;
  width: 72%;
}

.home-hair-inner .home-hair-faq-image{
  position: absolute;
  left: -1em;
  bottom: 1.8vw;
  width: 45%;
  max-width: 16rem;
  z-index: 1;
}

}/* End max 580 */



.hair-inner .button-search {
  width:100%;
  margin: 3em auto 0 auto;
}

.hair-inner .button-search h4 {
  font-size: var(--font-size-l);
  font-weight: bold;
  color:#f0753c;
  text-align: center;
  margin: 0 0 2rem;
}

.hair-inner .button-search a { background-color: #ff982f;}


.salon-search-dl{
  width: 90%;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 0 2em;
  position: relative;
  z-index: 10;
}

.salon-search-dl h3{
  margin: 0.5em 0 0.5em;
  position: relative;
  color: #00bd78;
  text-align: center;
  letter-spacing: 0.1em;
}

.salon-search-dl h4{
  margin: 0.5em 0;
  position: relative;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.salon-search-dl-inner{
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;  
  border-radius: 1em;
  border: solid 0.1rem #00bd78;
  background-color: #fff;
  box-shadow: 0.5rem 0.5rem #00bd78;
}

.salon-search-dl-inner::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0.1rem;
  height: calc(100% - 2em);
  margin: auto;
  display: block;
  border-left: dotted 0.5rem #ccc;
  content: "";
  opacity: 0.5;
}

.salon-search-dl-inner dd{
  width: 50%;
  margin: 0;
  padding: 1.5em;
  display: block;
  text-align: center;
}

.salon-search-dl .button.size-l{width:100%;}
.salon-search-dl-inner .txt-color-nomal{ color: #00bd78;}


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

.salon-search-dl-inner{
  flex-direction: column;
  align-items: center;
  justify-content: center;  
}

.salon-search-dl-inner .aspect-3-1{ max-width: 32rem;}

.salon-search-dl-inner::before{ display: none;}

.salon-search-dl-inner dd{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 1.5em;
  display: block;
  text-align: center;
}

.salon-search-dl-inner dd:nth-child(1)::before{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 2em);
  height: 0.1rem;
  margin: auto;
  display: block;
  border-top: dotted 0.5rem #ccc;
  content: "";
  opacity: 0.5;
}

} /* max 680 */


.salon-search-link{
  width: 90%;
  max-width:86rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  background-color: #fffff3;
  border: 0.1rem solid #00bd78;
}

@media screen and (min-width: 952px) {
  .salon-search-link{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 6.5rem repeat(1, 0.8fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
}

@media screen and (max-width: 951px) {
  .salon-search-link{
    max-width:42rem;
  }
}

.salon-search-link h3{
  font-size: var(--font-size-l);
  font-weight: bold;
  text-align: center;
  margin: 0 0 2rem;
}

.salon-search-link-dt {
  font-size: var(--font-size-xl);
  font-weight: bold;
  text-align: center;
  color: #00bd78;
  padding: 0.5em 0.5em 0;
}

@media screen and (min-width: 952px) {
  .salon-search-link-dt {
    grid-area: 1 / 1 / 2 / 3;
  }
}

@media screen and (max-width: 951px) {
  .salon-search-link-dt {
    padding: 0.5em;
  }
}

.salon-search-link-dd {
  border-top: 0.1rem solid #00bd78;
  padding: 0em;
}

@media screen and (min-width: 952px) {
  .salon-search-link-dd.left {
    grid-area: 2 / 1 / 4 / 2;
    padding: 3rem 3rem 6.8rem;
    border-right: 0.1rem dotted #00bd78;
  }
  .salon-search-link-dd.right {
    grid-area: 2 / 2 / 3 / 3;
    padding: 3rem 3rem 0.5rem;
  }
  .salon-search-link-dd.center {
    grid-area: 3 / 2 / 4 / 3;
  }
}

@media screen and (max-width: 951px) {
  .salon-search-link-dd.left {
    padding: 2rem;
  }
  .salon-search-link-dd.right {
    padding: 2rem 2rem 1rem 2rem ;
  }
  .salon-search-link-dd.center {
    padding: 0 0 2rem 0;
  }
}

.salon-search-link .button.size-l{
  width:100%;
  margin:3.5rem auto 0;
}

.salon-search-link .button.size-l a{
  background-color:#00bd78;
}

.salon-search-link-dd.center {
  font-size: var(--font-size-l);
  text-align: center;
  border-top:none;
}

.salon-search-link-dd.center strong {
  padding: 0 0.2em;
  color:#00bd78;
}

@media screen and (max-width: 951px) {
  .salon-search-link .button.size-l {margin: 0 auto ;}
}