@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
}

#Wrap {
  width: auto;
}

footer {
  position: relative;
  z-index: 2;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .05em;
}

.LP_page {
  background: #fff;
  color: #111;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
  padding-bottom: 12rem;
}

:root {
  --color1: #E8724F;
  --color2: #D14F8C;
  --color3: #6057C6;
}

.LP_page .txt_eng {
  font-family: pragmatica, sans-serif;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.LP_page .sec_inner {
  width: 110rem;
  margin: 0 auto;
}

.LP_page .sclr_act {
  transform: translateY(30px);
  opacity: 0;
  transition: 1s;
}

.LP_page .sclr_act.active {
  transform: translateY(0);
  opacity: 1;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem;
  padding: 7rem 0 8rem;
  background: #F8F8F8;
  overflow: hidden;
}

.mv_wrap {
  width: 40rem;
  opacity: 0;
  transition: opacity .3s;
  height: 45rem;
}

.mv_wrap.active {
  opacity: 1;
  height: auto;
}

.mv_wrap .slick-list {
  overflow: visible;
}

.mv_wrap .mv {
  position: relative;
  border: solid 2px #111;
  box-shadow: 10px 10px 6px rgba(0, 0, 0, .16);
}

.mv_wrap .mv::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 34rem;
  height: 13rem;
  margin-left: -6.8rem;
  content: "";
}

.mv_wrap .mv:nth-of-type(1)::before {
  background: url(../img/txt_101.png) center center / cover no-repeat;
}

.mv_wrap .mv:nth-of-type(2)::before {
  background: url(../img/txt_201.png) center center / cover no-repeat;
}

.mv_wrap .mv:nth-of-type(3)::before {
  background: url(../img/txt_301.png) center center / cover no-repeat;
}

.mv_area .txt_wrap {
  position: relative;
  width: fit-content;
}

.main_ttl {
  margin-bottom: 3.8rem;
  text-align: center;
}

.main_ttl .ttl {
  position: relative;
  font-weight: 600;
  font-size: 5rem;
}

.main_ttl .ttl ::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  margin: -2.5rem -2.2rem 0 0;
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
}

.main_ttl .txt_S {
  position: relative;
  display: block;
  border: solid 2px #111;
  border-radius: 1rem;
  width: fit-content;
  margin: 0 auto 2.8rem;
  padding: 1.3rem 1.2rem;
  background: #fff;
  font-weight: 600;
  font-size: 2rem;
  box-shadow: .3rem .3rem 0 #111;
}

.main_ttl .txt_S::before {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: .6rem;
  margin-top: -.1rem;
  background: #fff;
  content: "";
}

.main_ttl .txt_S::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 0 .2rem .2rem 0;
  width: 2.6rem;
  height: .4rem;
  margin-left: -.5rem;
  background: #111;
  content: "";
  transform-origin: top right;
}

.main_ttl .txt_L {
  font-weight: 600;
  font-size: 8rem;
  letter-spacing: .1em;
}

.main_lead {
  text-align: center;
  font-size: 1.4rem;
  line-height: 2;
}

/*-----------------------------mv*/

/*anchor_link--------------------*/
.anchor_link {
  margin-bottom: 7rem;
  background: #fff;
}

.anchor_link ul {
  display: flex;
  justify-content: center;
  border-top: solid 2px #111;
  border-bottom: solid 2px #111;
}

.anchor_link ul li {
  position: relative;
}

.anchor_link ul li::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2px;
  height: calc(100% - 2rem);
  background: #111;
  content: "";
}

.anchor_link ul li:nth-last-of-type(1):after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2px;
  height: calc(100% - 2rem);
  background: #111;
  content: "";
}

.anchor_link ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: calc(110rem / 3);
  height: 8.2rem;
  padding: 0 2rem;
}

.anchor_link ul li:nth-of-type(1) a {
  color: var(--color1);
}

.anchor_link ul li:nth-of-type(2) a {
  color: var(--color2);
}

.anchor_link ul li:nth-of-type(3) a {
  color: var(--color3);
}

.anchor_link ul li a .txt_eng {
  font-weight: bold;
  font-size: 1.6rem;
}

.anchor_link ul li a .txt_L {
  display: block;
  font-weight: bold;
  font-size: 4rem;
  text-align: center;
}

.anchor_link ul li a .nav_ttl {
  flex: 1;
  margin-top: .5rem;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .1em;
  white-space: nowrap;
}

.anchor_link ul li a .nav_ttl .txt_S {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .1em;
}

.anchor_link ul li a .arrow {
  position: relative;
  border-radius: 50%;
  border: solid 1.5px;
  width: 4rem;
  height: 4rem;
  background: #fff;
  transition: backgound-color .3s;
}

.anchor_link ul li:nth-of-type(1) a .arrow {
  border-color: var(--color1);
}

.anchor_link ul li:nth-of-type(2) a .arrow {
  border-color: var(--color2);
}

.anchor_link ul li:nth-of-type(3) a .arrow {
  border-color: var(--color3);
}

.anchor_link ul li:nth-of-type(1) a:hover .arrow {
  background: var(--color1);
}

.anchor_link ul li:nth-of-type(2) a:hover .arrow {
  background: var(--color2);
}

.anchor_link ul li:nth-of-type(3) a:hover .arrow {
  background: var(--color3);
}

.anchor_link ul li a .arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0 0 .8rem .8rem;
  width: 2px;
  height: 1.6rem;
  content: "";
  transition: background-color .3s;
}

.anchor_link ul li a .arrow::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-right: solid 2px;
  border-bottom: solid 2px;
  width: .9rem;
  height: .9rem;
  margin-top: 1.6rem;
  box-sizing: border-box;
  content: "";
  transition: border-color .3s;
}

.anchor_link ul li:nth-of-type(1) a .arrow::before {
  background: var(--color1);
}

.anchor_link ul li:nth-of-type(2) a .arrow::before {
  background: var(--color2);
}

.anchor_link ul li:nth-of-type(3) a .arrow::before {
  background: var(--color3);
}

.anchor_link ul li:nth-of-type(1) a .arrow::after {
  border-color: var(--color1);
}

.anchor_link ul li:nth-of-type(2) a .arrow::after {
  border-color: var(--color2);
}

.anchor_link ul li:nth-of-type(3) a .arrow::after {
  border-color: var(--color3);
}

.anchor_link ul li a:hover .arrow::before {
  background: #fff;
}

.anchor_link ul li a:hover .arrow::after {
  border-color: #fff;
}

/*--------------------anchor_link*/

/*anchor_link (fixed)------------*/
.anchor_link.fixed {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  transform: translateY(100%);
  transition: transform .3s;
}

.anchor_link.fixed.move {
  transform: translateY(0);
}

.anchor_link.fixed ul li::before {
  height: calc(100% - 1.6rem);
}

.anchor_link.fixed ul li:nth-last-of-type(1):after {
  height: calc(100% - 1.6rem);
}

.anchor_link.fixed ul li a {
  gap: 1.2rem;
  width: 25rem;
  height: 6rem;
  padding: 0 1.7rem 0 1rem;
}

.anchor_link.fixed ul li a .txt_eng {
  font-size: 1.1rem;
}

.anchor_link.fixed ul li a .txt_L {
  margin-top: .3rem;
  font-size: 2.5rem;
}

.anchor_link.fixed ul li a .nav_ttl {
  margin-top: 0;
  font-size: 1.5rem;
}

.anchor_link.fixed ul li a .nav_ttl .txt_S {
  margin-top: .5rem;
  font-size: 1.2rem;
}
/*------------anchor_link (fixed)*/

/*each hairType------------------*/
.each_hairType {
  padding: 5rem 0 10rem;
}

.each_hairType .sec_inner {
  display: flex;
  gap: 6rem;
}

.hairType_img_wrap {
  position: sticky;
  top: 11.5rem;
  height: fit-content;
}

.hairType_img {
  position: relative;
  width: 44rem;
  border: solid 2px #111;
  box-shadow: 10px 10px 6px rgba(0, 0, 0, .16);
}

.hairType_img::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

#Case1 .hairType_img::before {
  width: 41.6rem;
  height: 16.2rem;
  margin: 40.5rem 0 0 9.5rem;
  transform: translateZ(0) rotate(-3deg);
  background: url(../img/txt_101.png) center center / cover no-repeat;
}

#Case2 .hairType_img::before {
  width: 42.4rem;
  height: 16.5rem;
  margin: 43rem 0 0 -10rem;
  transform: translateZ(0) rotate(-2deg);
  background: url(../img/txt_201.png) center center / cover no-repeat;
}

#Case3 .hairType_img::before {
  width: 45.9rem;
  height: 17.8rem;
  margin: 40.5rem 0 0 6rem;
  transform: translateZ(0);
  background: url(../img/txt_301.png) center center / cover no-repeat;
}

.hairType_ttl.ef_point,
.ef_point::before {
  /*opacity: 0;*/
  animation: txt_fade 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-image: linear-gradient(-25deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(-25deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  /*transform: translateZ(0);*/
  transition: -webkit-mask-position 2s linear;
  transition: mask-position 2s linear;
  transition: mask-position 2s linear, -webkit-mask-position 2s linear
}

@keyframes txt_fade {
  0% {
    opacity: 0;
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.hairType_ttl.ef_point.active,
.ef_point.active::before {
  -webkit-mask-position: center 0;
  mask-position: center 0
}

.staff_name {
  margin-top: 2rem;
  font-size: 1.2rem;
}

.each_hairType .txt_wrap {
  position: relative;
  flex: 1;
  padding-top: 6rem;
}

.each_hairType .txt_wrap::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 21.8rem;
  height: 53.4rem;
  content: "";
}

#Case1.each_hairType .txt_wrap::before {
  margin: 5.5rem -5.3rem 0 0;
  background: url(../img/img_121.png) center center / cover no-repeat;
}

#Case2.each_hairType .txt_wrap::before {
  margin: 20rem -5.3rem 0 0;
  background: url(../img/img_221.png) center center / cover no-repeat;
}

#Case3.each_hairType .txt_wrap::before {
  margin: 36rem -5.3rem 0 0;
  background: url(../img/img_321.png) center center / cover no-repeat;
}

.hairType_ttl {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

#Case1 .hairType_ttl {
  color: var(--color1);
}

#Case2 .hairType_ttl {
  color: var(--color2);
}

#Case3 .hairType_ttl {
  color: var(--color3);
}

.hairType_ttl .ttl {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 4.6rem;
  white-space: nowrap;
}

.hairType_ttl .txt_S {
  font-weight: 600;
  font-size: 4rem;
}

.hairType_ttl .txt_eng {
  font-weight: bold;
  font-size: 2.5rem;
}

.hairType_ttl .txt_eng .txt_L {
  display: block;
  font-weight: bold;
  font-size: 8rem;
  text-align: center;
}

.each_hairType .txt_wrap .content_wrap {
  display: flex;
  gap: 4rem;
}

#Case1.each_hairType .txt_wrap .content_wrap.qa3_wrap {
  margin-top: 4rem;
}

#Case1.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  align-items: flex-end;
  margin-top: -12.5rem;
}

#Case2.each_hairType .txt_wrap .content_wrap.qa3_wrap {
  align-items: flex-end;
  margin-top: 4rem;
}

#Case2.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  align-items: flex-start;
  margin-top: 4rem;
}

#Case3.each_hairType .txt_wrap .content_wrap.qa4_wrap {
  align-items: center;
  margin-top: 4rem;
}

#Case3.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  align-items: center;
  margin-top: -3rem;
}

#Case1.each_hairType .txt_wrap .content_wrap.qa5_wrap .itm_dtl_wrap,
#Case2.each_hairType .txt_wrap .content_wrap.qa5_wrap .itm_dtl_wrap,
#Case3.each_hairType .txt_wrap .content_wrap.qa5_wrap .itm_dtl_wrap {
  order: 2;
}

.qa_wrap {
  flex: 1;
}

#Case1 .qa_wrap.qa2 {
  width: 45rem;
  margin-top: 4rem;
}

#Case1 .qa_wrap.qa3 {
  margin-top: 6.5rem;
}

#Case1 .qa_wrap.qa4 {
  width: 30rem;
  margin-top: -.5rem;
}

#Case2 .qa_wrap.qa2 {
  width: 45rem;
  margin-top: 4rem;
}

#Case2 .qa_wrap.qa4 {
  margin-top: 4rem;
}

#Case3 .qa_wrap.qa2 {
  width: 45rem;
  margin-top: 4rem;
}

#Case3 .qa_wrap.qa3 {
  width: 45rem;
  margin-top: 4rem;
}

.qa_wrap dt {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.8;
}

.qa_wrap dd {
  font-size: 1.3rem;
  line-height: 2;
}

.itm_dtl_wrap {
  width: 28rem;
}

.itm_img {
  position: relative;
}

.itm_img.ef_point::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 30.4rem;
  height: 8.2rem;
  content: "";
}

#Case1 .qa5_wrap .itm_img::before {
  margin: -6rem 0 0 7.5rem;
  background: url(../img/txt_102.png) center center / cover no-repeat;  
}

#Case2 .qa3_wrap .itm_img::before {
  margin: -1rem 0 0 14.6rem;
  background: url(../img/txt_202.png) center center / cover no-repeat;  
}

#Case3 .qa4_wrap .itm_img::before {
  margin: -2rem 0 0 15.7rem;
  background: url(../img/txt_302.png) center center / cover no-repeat;  
}

.itm_img a {
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 4rem;
}

.itm_img a::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  opacity: .7;
  content: "";
  animation: dots-anime 2s ease-in-out infinite;
}

@keyframes dots-anime {
  0%{
    transform: translate(-50%, -50%) scale(0%);
    opacity: .7;
  }

  80% {
    opacity: .7;
  }

  100% {
    transform: translate(-50%, -50%) scale(100%);
    opacity: 0;
  }
}

#Case1 .qa3_wrap .itm_img a:nth-of-type(1) {
  margin: 13.5rem 0 0 7rem;
}

#Case1 .qa3_wrap .itm_img a:nth-of-type(2) {
  margin: 14rem 0 0 16.5rem;
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: 5rem 0 0 13.5rem;
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: 22.5rem 0 0 10rem;
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(3) {
  margin: 18rem 0 0 17rem;
}

#Case2 .qa3_wrap .itm_img a:nth-of-type(1) {
  margin: 17rem 0 0 11rem;
}

#Case2 .qa3_wrap .itm_img a:nth-of-type(2) {
  margin: 17rem 0 0 15.5rem;
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: 8.5rem 0 0 8rem;
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: 20rem 0 0 13rem;
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(3) {
  margin: 21rem 0 0 20rem;
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(1) {
  margin: 18rem 0 0 9rem;
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(2) {
  margin: 18rem 0 0 13.5rem;
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(3) {
  margin: 18rem 0 0 20rem;
}

#Case3 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: 7rem 0 0 9rem;
}

#Case3 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: 19.5rem 0 0 15rem;
}

.itm_list {
  margin-top: 1.5rem;
}

.itm_list > li a {
  font-size: 1.1rem;
  line-height: 1.636;
}

.itm_list > li a:hover {
  text-decoration: underline;
}

#Case1 .itm_list > li a {
  color: var(--color1);
}

#Case2 .itm_list > li a {
  color: var(--color2);
}

#Case3 .itm_list > li a {
  color: var(--color3);
}

.itm_list > li:nth-of-type(n+2) {
  margin-top: .5rem;
}

.itm_list > li a .txt_B {
  font-weight: 600;
}

.btn_sec-sumup {
  width: fit-content;
  margin: 7.5rem auto 0;
}

.btn_sec-sumup a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #111;
  width: 48rem;
  height: 7rem;
  background: #111;
  font-weight: 600;
  font-size: 1.6rem;
  color: #fff;
  transition: backgound-color .3s, color .3s;
}

.btn_sec-sumup a:hover {
  background: #fff;
  color: #111;
}

.btn_sec-sumup a::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 3.3rem;
  box-sizing: border-box;
  content: "";
  transition: border-color .3s;
}

.btn_sec-sumup a:hover::before {
  border-color: #111;
}

/*------------------each hairType*/

.btn_page-sumup {
  width: fit-content;
  margin: 5rem auto 0;
}

.btn_page-sumup a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #111;
  width: 60rem;
  height: 8rem;
  background: #fff;
  font-weight: 600;
  font-size: 1.9rem;
  transition: backgound-color .3s, color .3s;
}


.btn_page-sumup a:hover {
  background: #111;
  color: #fff;
}

.btn_page-sumup a::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  border-top: solid 2px #111;
  border-right: solid 2px #111;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 3.3rem;
  box-sizing: border-box;
  content: "";
  transition: border-color .3s;
}

.btn_page-sumup a:hover::before {
  border-color: #fff;
}



/*Smart phone---------------------------------------------*/
@media screen and  (max-width:768px) {
/*all----------------------------*/
.LP_page .only_pc {
  display: none;
}

.share-txt {
  margin: 0 !important;
  padding-bottom: calc(20 * (100vw / 390));
}

#share {
  transition: transform .3s;
}

#share.move {
  transform: translateY(calc(-40 * (100vw / 390)));
}

/*----------------------------all*/
.LP_page {
  padding-bottom: calc(60 * (100vw / 390));
  overflow: hidden;
}

.LP_page .sec_inner {
  width: auto;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  position: relative;
  display: block;
  padding: calc(40 * (100vw / 390)) 0;
}

.mv_wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(290 * (100vw / 390));
  margin-top: calc(202 * (100vw / 390));
  opacity: 0;
  transition: opacity .3s;
  height: calc(326 * (100vw / 390));
}

.mv_wrap .mv::before {
  top: auto;
  bottom: 0;
}

.mv_wrap .mv:nth-of-type(1)::before {
  width: calc(251 * (100vw / 390));
  height: calc(97 * (100vw / 390));
  margin: 0 0 calc(28 * (100vw / 390)) calc(100 * (100vw / 390));
}

.mv_wrap .mv:nth-of-type(2)::before {
  width: calc(257 * (100vw / 390));
  height: calc(100 * (100vw / 390));
  margin: 0 0 calc(40 * (100vw / 390)) calc(113 * (100vw / 390));
}

.mv_wrap .mv:nth-of-type(3)::before {
  width: calc(252 * (100vw / 390));
  height: calc(98 * (100vw / 390));
  margin: 0 0 calc(25 * (100vw / 390)) calc(97 * (100vw / 390));
}

.mv_area .txt_wrap {
  width: auto;
}

.main_ttl {
  margin-bottom: calc(392 * (100vw / 390));
}

.main_ttl .ttl {
  font-size: calc(45 * (100vw / 390));
}

.main_ttl .ttl ::before {
  width: calc(35 * (100vw / 390));
  height: calc(35 * (100vw / 390));
  margin: calc(-20 * (100vw / 390)) calc(-13 * (100vw / 390)) 0 0;
}

.main_ttl .txt_S {
  border-radius: calc(10 * (100vw / 390));
  margin: 0 auto calc(25 * (100vw / 390));
  padding: calc(13 * (100vw / 390)) calc(8 * (100vw / 390));
  font-size: calc(16 * (100vw / 390));
  box-shadow: calc(3 * (100vw / 390)) calc(3 * (100vw / 390)) 0 #111;
}

.main_ttl .txt_S::before {
  width: calc(16 * (100vw / 390));
  height: calc(7 * (100vw / 390));
  margin-top: calc(-1 * (100vw / 390));
}

.main_ttl .txt_S::after {
  border-radius: 0 calc(2 * (100vw / 390)) calc(2 * (100vw / 390)) 0;
  width: calc(26 * (100vw / 390));
  height: calc(4 * (100vw / 390));
  margin-left: calc(-4 * (100vw / 390));
}

.main_ttl .txt_L {
  margin-right: calc(4 * (100vw / 390));
  font-size: calc(60 * (100vw / 390));
}

.main_lead {
  font-size: calc(13 * (100vw / 390));
  line-height: 2.15384;
}

/*-----------------------------mv*/

/*anchor_link--------------------*/
.anchor_link {
  margin-bottom: 0;
}

.anchor_link.usual ul {
  display: block;
  border-top: none;
  border-bottom: none;
}

.anchor_link.usual ul li {
  border-top: solid 2px #111;
}

.anchor_link.usual ul li:nth-last-of-type(1) {
  border-bottom: solid 2px #111;
}

.anchor_link.usual ul li::before {
  display: none;
}

.anchor_link ul li:nth-last-of-type(1):after {
  display: none;
}

.anchor_link ul li a {
  gap: calc(10 * (100vw / 390));
  width: 100%;
  height: calc(67 * (100vw / 390));
  padding: 0 calc(20 * (100vw / 390));
}

.anchor_link ul li a .txt_eng {
  font-size: calc(11 * (100vw / 390));
}

.anchor_link ul li a .txt_L {
  font-size: calc(30 * (100vw / 390));
}

.anchor_link ul li a .nav_ttl {
  margin-top: calc(3 * (100vw / 390));
  font-size: calc(16 * (100vw / 390));
}

.anchor_link ul li a .nav_ttl .txt_S {
  display: inline;
  margin-top: 0;
  font-size: calc(13 * (100vw / 390));
}

.anchor_link ul li a .arrow {
  width: calc(36 * (100vw / 390));
  height: calc(36 * (100vw / 390));
}

.anchor_link ul li a .arrow::before {
  border-radius: 0 0 calc(4 * (100vw / 390)) calc(4 * (100vw / 390));
  height: calc(12 * (100vw / 390));
}

.anchor_link ul li a .arrow::after {
  width: calc(8 * (100vw / 390));
  height: calc(8 * (100vw / 390));
  margin-top: calc(15 * (100vw / 390));
}
/*--------------------anchor_link*/

/*anchor_link (fixed)------------*/
.anchor_link.fixed {
  width: auto;
}

.anchor_link.fixed ul {
  justify-content: flex-start;
  width: 100vw;
  overflow-x: scroll;
}

.anchor_link.fixed ul li::before {
  height: calc(40 * (100vw / 390));
}

.anchor_link ul li:nth-of-type(1):before {
  display: none;
}

.anchor_link.fixed ul li a {
  gap: calc(8 * (100vw / 390));
  width: auto;
  height: calc(60 * (100vw / 390));
  padding: 0 calc(10 * (100vw / 390)) 0 calc(8 * (100vw / 390));
  white-space: nowrap;
}

.anchor_link.fixed ul li a .txt_eng {
  font-size: calc(10 * (100vw / 390));
}

.anchor_link.fixed ul li a .txt_L {
  margin-top: calc(2 * (100vw / 390));
  font-size: calc(20 * (100vw / 390));
}

.anchor_link.fixed ul li a .nav_ttl {
  font-size: calc(12 * (100vw / 390));
}

.anchor_link.fixed ul li a .nav_ttl .txt_S {
  display: block;
  margin-top: calc(2 * (100vw / 390));
  font-size: calc(11 * (100vw / 390));
}
/*------------anchor_link (fixed)*/

/*each hairType------------------*/
.each_hairType {
  padding: calc(70 * (100vw / 390)) 0 calc(10 * (100vw / 390));
}

.each_hairType .sec_inner {
  position: relative;
  display: block;
}

.hairType_img_wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(310 * (100vw / 390));
  margin-top: calc(75 * (100vw / 390));
}

.hairType_img {
  width: auto;
}

#Case1 .hairType_img::before {
  width: calc(289 * (100vw / 390));
  height: calc(113 * (100vw / 390));
  margin: calc(285 * (100vw / 390)) 0 0 calc(70 * (100vw / 390));
}

#Case2 .hairType_img::before {
  width: calc(282 * (100vw / 390));
  height: calc(110 * (100vw / 390));
  margin: calc(292 * (100vw / 390)) 0 0 calc(-44 * (100vw / 390));
}

#Case3 .hairType_img::before {
  width: calc(329 * (100vw / 390));
  height: calc(128 * (100vw / 390));
  margin: calc(275 * (100vw / 390)) 0 0 calc(40 * (100vw / 390));
}

.staff_name {
  margin-top: calc(22 * (100vw / 390));
  font-size: calc(11 * (100vw / 390));
  text-align: center;
}

.each_hairType .txt_wrap {
  padding-top: 0;
}

#Case1.each_hairType .txt_wrap::before {
  width: calc(168 * (100vw / 390));
  height: calc(413 * (100vw / 390));
  margin: calc(770 * (100vw / 390)) calc(-20 * (100vw / 390)) 0 0;
}

#Case2.each_hairType .txt_wrap::before {
  width: calc(164 * (100vw / 390));
  height: calc(403 * (100vw / 390));
  margin: calc(800 * (100vw / 390)) calc(10 * (100vw / 390)) 0 0;
}

#Case3.each_hairType .txt_wrap::before {
  width: calc(162 * (100vw / 390));
  height: calc(396 * (100vw / 390));
  margin: calc(670 * (100vw / 390)) 0 0 0;
}

.hairType_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * (100vw / 390));
  margin-bottom: calc(510 * (100vw / 390));
}

.hairType_ttl .ttl {
  gap: calc(5 * (100vw / 390));
  margin-top: calc(8 * (100vw / 390));
  font-size: calc(28 * (100vw / 390));
}

.hairType_ttl .txt_S {
  font-size: calc(24 * (100vw / 390));
}

.hairType_ttl .txt_eng {
  font-size: calc(14 * (100vw / 390));
}

.hairType_ttl .txt_eng .txt_L {
  font-size: calc(40 * (100vw / 390));
}

.each_hairType .txt_wrap .content_wrap {
  display: block;
}

#Case1.each_hairType .txt_wrap .content_wrap.qa3_wrap {
  margin-top: calc(40 * (100vw / 390));
}

#Case1.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  margin-top: calc(40 * (100vw / 390));
}

#Case2.each_hairType .txt_wrap .content_wrap.qa3_wrap {
  margin-top: calc(40 * (100vw / 390));
}

#Case2.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  margin-top: calc(40 * (100vw / 390));
}

#Case3.each_hairType .txt_wrap .content_wrap.qa4_wrap {
  margin-top: calc(40 * (100vw / 390));
}

#Case3.each_hairType .txt_wrap .content_wrap.qa5_wrap {
  position: relative;
  margin-top: 0;
  padding-top: calc(160 * (100vw / 390));
}

.each_hairType .qa_wrap {
  margin-top: calc(40 * (100vw / 390));
  padding: 0 calc(25 * (100vw / 390));
}

#Case1 .qa_wrap.qa2 {
  width: auto;
  margin-top: calc(40 * (100vw / 390));
}

#Case1 .qa_wrap.qa2 dd {
  width: calc(240 * (100vw / 390));
}

#Case1 .qa_wrap.qa3 {
  margin-top: calc(40 * (100vw / 390));
}

#Case1 .qa_wrap.qa4 {
  width: auto;
  margin-top: calc(40 * (100vw / 390));
}

#Case2 .qa_wrap.qa2 {
  width: auto;
  margin-top: calc(40 * (100vw / 390));
}

#Case2 .qa_wrap.qa2 dd {
  width: calc(240 * (100vw / 390));
}

#Case2 .qa_wrap.qa4 {
  margin-top: calc(40 * (100vw / 390));
}

#Case3 .qa_wrap.qa2 {
  width: auto;
  margin-top: calc(40 * (100vw / 390));
}

#Case3 .qa_wrap.qa2 dd {
  width: calc(240 * (100vw / 390));
}

#Case3 .qa_wrap.qa3 {
  width: auto;
  margin-top: calc(40 * (100vw / 390));
}

.qa_wrap dt {
  margin-bottom: calc(10 * (100vw / 390));
  font-size: calc(14 * (100vw / 390));
  line-height: 1.714;
}

.qa_wrap dd {
  font-size: calc(13 * (100vw / 390));
}

.qa_wrap dd .for_space {
  display: block;
  float: right;
  width: 1px;
}

.qa_wrap dd .for_block {
  display: block;
  float: right;
  clear: both;
}

#Case2 .qa_wrap.qa2 dd .for_space {
  height: calc(75 * (100vw / 390));
}

#Case2 .qa_wrap.qa2 dd .for_block {
  width: calc(25 * (100vw / 390));
  height: calc(256 * (100vw / 390));
}

#Case3 .qa_wrap.qa1 dd .for_space {
  height: calc(58 * (100vw / 390));
}

#Case3 .qa_wrap.qa1 dd .for_block {
  width: calc(114 * (100vw / 390));
  height: calc(100 * (100vw / 390));
}

#Case3 .qa_wrap.qa4 dd .for_space {
  height: calc(130 * (100vw / 390));
}

#Case3 .qa_wrap.qa4 dd .for_block {
  width: calc(180 * (100vw / 390));
  height: calc(100 * (100vw / 390));
}

.itm_dtl_wrap {
  display: flex;
  align-items: flex-end;
  gap: calc(15 * (100vw / 390));
  width: auto;
}

.qa5_wrap .itm_dtl_wrap {
  gap: 0;
}

#Case3 .qa5_wrap .itm_dtl_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: calc(-72 * (100vw / 390));
}

.itm_img {
  width: calc(195 * (100vw / 390));
}

.itm_img.ef_point::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 30.4rem;
  height: 8.2rem;
  content: "";
}

.qa5_wrap .itm_img {
  order: 2;
}

#Case1 .qa5_wrap .itm_img::before {
  width: calc(217 * (100vw / 390));
  height: calc(58 * (100vw / 390));
  margin: calc(1 * (100vw / 390)) 0 0 calc(-198 * (100vw / 390));
  transform: rotate(-15deg);
}

#Case2 .qa3_wrap .itm_img::before {
  width: calc(212 * (100vw / 390));
  height: calc(56 * (100vw / 390));
  margin: calc(55 * (100vw / 390)) 0 0 calc(148 * (100vw / 390));
}

#Case3 .qa4_wrap .itm_img::before {
  width: calc(217 * (100vw / 390));
  height: calc(59 * (100vw / 390));
  margin: calc(2 * (100vw / 390)) 0 0 calc(165 * (100vw / 390));
}

.itm_img a {
  width: calc(40 * (100vw / 390));
  height: calc(40 * (100vw / 390));
}

.itm_img a::before {
  width: calc(10 * (100vw / 390));
  height: calc(10 * (100vw / 390));
}

#Case1 .qa3_wrap .itm_img a:nth-of-type(1) {
  margin: calc(95 * (100vw / 390)) 0 0 calc(45 * (100vw / 390));
}

#Case1 .qa3_wrap .itm_img a:nth-of-type(2) {
  margin: calc(100 * (100vw / 390)) 0 0 calc(110 * (100vw / 390));
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: calc(30 * (100vw / 390)) 0 0 calc(85 * (100vw / 390));
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: calc(155 * (100vw / 390)) 0 0 calc(60 * (100vw / 390));
}

#Case1 .qa5_wrap .itm_img a:nth-of-type(3) {
  margin: calc(120 * (100vw / 390)) 0 0 calc(115 * (100vw / 390));
}

#Case2 .qa3_wrap .itm_img a:nth-of-type(1) {
  margin: calc(110 * (100vw / 390)) 0 0 calc(70 * (100vw / 390));
}

#Case2 .qa3_wrap .itm_img a:nth-of-type(2) {
  margin: calc(110 * (100vw / 390)) 0 0 calc(105 * (100vw / 390));
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: calc(55 * (100vw / 390)) 0 0 calc(50 * (100vw / 390));
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: calc(135 * (100vw / 390)) 0 0 calc(85 * (100vw / 390));
}

#Case2 .qa5_wrap .itm_img a:nth-of-type(3) {
  margin: calc(140 * (100vw / 390)) 0 0 calc(135 * (100vw / 390));
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(1) {
  margin: calc(120 * (100vw / 390)) 0 0 calc(60 * (100vw / 390));
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(2) {
  margin: calc(120 * (100vw / 390)) 0 0 calc(90 * (100vw / 390));
}

#Case3 .qa4_wrap .itm_img a:nth-of-type(3) {
  margin: calc(120 * (100vw / 390)) 0 0 calc(135 * (100vw / 390));
}

#Case3 .qa5_wrap .itm_img a:nth-of-type(1) {
  margin: calc(40 * (100vw / 390)) 0 0 calc(60 * (100vw / 390));
}

#Case3 .qa5_wrap .itm_img a:nth-of-type(2) {
  margin: calc(125 * (100vw / 390)) 0 0 calc(105 * (100vw / 390));
}

.itm_list {
  flex: 1;
}

.qa5_wrap .itm_list {
  padding-left: calc(25 * (100vw / 390));
}

.itm_list > li a {
  font-size: calc(11 * (100vw / 390));
  line-height: 1.5454;
}

.itm_list > li:nth-of-type(n+2) {
  margin-top: calc(8 * (100vw / 390));
}

.btn_sec-sumup {
  margin: calc(32 * (100vw / 390)) auto 0;
}

.btn_sec-sumup a {
  width: calc(340 * (100vw / 390));
  height: calc(60 * (100vw / 390));
  font-size: calc(14 * (100vw / 390));
}

.btn_sec-sumup a::before {
  width: calc(11 * (100vw / 390));
  height: calc(11 * (100vw / 390));
  margin-right: calc(23 * (100vw / 390));
}

/*------------------each hairType*/

.btn_page-sumup {
  margin: calc(30 * (100vw / 390)) auto 0;
}

.btn_page-sumup a {
  width: calc(340 * (100vw / 390));
  height: calc(70 * (100vw / 390));
  font-size: calc(16 * (100vw / 390));
}

.btn_page-sumup a::before {
  width: calc(11 * (100vw / 390));
  height: calc(11 * (100vw / 390));
  margin-right: calc(20 * (100vw / 390));
}

}

/*---------------------------------------------Smart phone*/

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none;
  }
}
/*------------------------------------------------------PC*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/