@charset "utf-8";
/* CSS Document */
/* ==========================================================================
    共通
========================================================================== */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  color: #121212;
  font-family: 'Montserrat', sans-serif; 
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
  background-color: #fff;
}
@media (max-width:480px){
body {
overflow: hidden;
}
}

/*768pxより大きい場合、bodyのwidthは小さくても1100pxにする*/
@media (768px < width){
body {
  min-width: 1100px;
}
}


.inner {
  max-width: 1440px;
  margin: auto;
}
a:hover {
  opacity: 0.5;
  -webkit-transition: background-color 0.5s ease-in;
}
a {
  color: #121212;
  text-decoration: none;
}
.none {
  display: none;
}

*, *:before, *:after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.for-sp {
  display: none;
}
@media(max-width:480px){
.pc {
display: none;
}

}
/*========= フォント ===============*/
h2 {
  font-family: 'Montserrat', sans-serif;
}
.heading-lv2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 300;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.4rem;
}

/* heading-lv2の線 */
.head-border {
  position: relative;
  display: inline-block;
  padding-left: 160px;
  /*height: 11%;  staff詳細でずれてたから取った*/
}
.head-border::before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: 0;
}/* /heading-lv2の線 */
    @media (max-width: 480px){
    .head-border {
      padding-left: 80px;
    }
    .head-border::before {
      width: 65px;
    }
    .head-border {
      padding-left: 80px;
    }
    .heading-lv2 {
      font-size: 2em;
    }
    }
.Italic {
  font-style: italic;
}
.uppercase {
  text-transform: uppercase;
}
/* フォント END
====================*/

.br {
  display: inline-block;
}
ul {
  list-style: none;
}
.sp {
display: none;
}

/*=========　固定 Reserve ボタン ===============*/
/*for-pc*/
.btn__reserve-fixed {
  position: fixed;
  display: inline-block;
  padding: 17px 93px;
  background-color: #121212;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
  transform: rotate( 90deg) translateX(-50%);
  top: calc(50% + 273px);
  right: 0;
  margin: 0;
  letter-spacing: 0.16rem;
  z-index: 999;
  transform-origin: top right;
}
  @media (max-width: 768px) {

.sp {
  display:block;
}
.sp_fixed-menu {
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.9;
    z-index: 9999;
    display: flex;
    padding: 0;
    margin: 0 auto;
}
.sp_fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}
.sp_fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.sp_fixed-menu li:first-child{
   background: #797979;
}
.sp_fixed-menu li:last-child{
   background: #121212;
}
.sp_fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}
  }/*　固定 Reserve ボタン END　===============*/


/*========= スクエア ボタン ===============*/
.btn__square {
  display: inline-block;
  padding: 8px 32px;
  border: solid 1px #CECECE;
  font-style: italic;
}
.btn__square--dot {
  position: relative;
  margin-left: 34px;
}
.btn__square--dot::after {
  position: absolute ;
  content: url("../images/dot.svg");
  right: 1.6em;
  margin: auto;
  display: inline-block;
  transition: right 0.5s;
  width: 7px;
}
/* ボタンの波紋 */
.btn__square--dot::before, .btn__square--dot::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border: 2px solid #121212;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
  background-color: #121212;
}
.btn__square--dot::after {
  animation-delay: 1s;
}
/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
  @media (max-width: 768px) {
  }

/* スクエア ボタン END
====================*/

/*========= Staff Reserve ボタン ===============*/
.btn__staff-Reserve {
  display: inline-block;
  font-size: 1.2rem;
  background-color: #121212;
  padding: 4px 20px;
  border-radius: 20rem;
  margin-top: 20px;
  width: 135px;
  font-style: italic;
}
a.btn__staff-Reserve {
  color: #fff;
}
.btn__staff-Reserve a {
  color: #fff;
}

.btn__staff-Reserve--dot {
  position: relative;
  margin-left: 44px;
}
.btn__staff-Reserve--dot::after {
  position: absolute;
  content: url("../images/dot--s.svg");
  right: 1.4em;
  margin: auto;
  display: inline-block;
  transition: right 0.5s;
  width: 2.2px;
}
/* ボタンの波紋 */
.btn__staff-Reserve--dot::before, .btn__staff-Reserve--dot::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border: 2px solid #656565;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
  background-color: #656565;
}
.btn__staff-Reserve--dot ::after {
  animation-delay: 1s;
}
/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* Staff Reserve ボタン END
====================*/


/*========= ページネーション　ボタン ===============*/
nav.navigation.pagenation {
    max-width: 418px;
    width: 100%;
    margin: 50px auto;
}
.nav-links {
    align-items: center;
    display: flex;
    justify-content: center;
}
.page-numbers {
  display: inline-block;
  margin: 10px;
  font-size: 1.8rem;
}

/*=========　読込み時のfade　===============*/
.loading_fadeIn_down {
animation-name: fadeIn_down;
animation-duration: 2.5s;
}
@keyframes loading_fadeIn_down {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/*　読込み時、上から下にフェードイン　*/
.fadeIn_down {
animation-name: fadeIn_down;
animation-duration: 0.5s;
}
@keyframes fadeIn_down {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*　読込み時、下から上にフェードイン　*/
.fadeIn_up {
  font-size: 20px;
  font-weight: bold;
  animation-name: fadeIn_up;
  animation-duration: 1s;
  }
  @keyframes fadeIn_up {
  from {
  opacity: 0;
  transform: translateY(20px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }

  @media (max-width: 768px) {
  .first-view p {
    top: 50%;
    left: 30%;
    width: 47%;
  }
  }
/*　読込み時、右から左にフェードイン　*/
.fadeIn_right {
  animation-name: fadeIn_right;
  animation-duration: 2.5s;
}
  @keyframes fadeIn_right {
  from {
  opacity: 0;
  transform: translateX(100px);
  }
  to {
  opacity: 1;
  transform: translateX(0);
  }
  }
/*　読込み時、左から右にフェードイン　*/
.fadeIn_left {
  animation-name: fadeIn_left;
  transition-duration: 2.5s;
}
  @keyframes fadeIn_left {
  from {
  opacity: 0;
  transform: translateX(-100px);
  }
  to {
  opacity: 1;
  transform: translateX(0);
  }
  }
/*　読込み時、下から上にフェードイン　遅め*/
.fadeIn_up--slow {
  animation-name: fadeIn_up--slow;
  animation-duration: 3s;
}
  @keyframes fadeIn_up--slow {
  from {
  opacity: 0;
  transform: translateY(100px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }/*=========　読込み時のfade　END　*/
  
  
  
/* ==========================================================================
左から順番に　下から上へfadein　（ヘアカタログページ、ヘアコレクションページ）
========================================================================== */
/*　スタート時は要素自体を透過0にするためのopacity:0;を指定する　*/
.delayScroll_item{
	opacity: 0;
}

/*　動かしたい動き（今回は” ふわっ” を採用）*/
.delayScroll_fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}



/* ==========================================================================
    Header
========================================================================== */
.header {
  position: fixed;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  padding: 0 60px 0 50px;
  height: 100px;
  left: 0;
  right: 0;
  top: 0;
  max-width: 1440px;
}
.header_logo-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header_logo {
  display: block;
  width: 180px;
}
.header-gnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header-gnav__list {
  display: flex;
  width: 650px;
}
.header-gnav__list li {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-left: auto;
}


    @media (max-width: 768px) {
    .header {
      padding: 0;
      height: 70px;
    }
    .header-inner {
      padding: 0;
      height: 70px;
    }
    .header_logo {
      margin: 0 0 0 20px;
      width: 180px;
    }
    /*========= ナビゲーション ===============*/
    #g-nav{
      /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
      position:fixed;
      z-index: -1;
      /*opacity: 0;*//*はじめは透過0*/
      display: none;
      /*ナビの位置と形状*/
      top:0;
      width:100%;
      height: 100vh;/*ナビの高さ*/
      background-color: rgba(255,255,255,0.80);
      /*動き*/
      transition: all 0.3s;
      }

    /*アクティブクラスがついたら透過なしにして最前面へ*/
    #g-nav.panelactive{
      opacity: 1;
      z-index:999;
      /*pointer-events: none;*/
      display: block;
      }

    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999; 
      width: 100%;
      height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      }

    /*ナビゲーション*/
    #g-nav ul {
      display: none;
      /*ナビゲーション天地中央揃え*/
      position: absolute;
      z-index:  999;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

    #g-nav.panelactive ul {
      display: block;
    }

    /*リストのレイアウト設定*/
    #g-nav li{
      list-style: none;
      text-align: center; 
    }

    #g-nav li a{
      color: #121212;
      text-decoration: none;
      padding:10px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 2rem;
      /*z-index: 9999;test*/
    }
    /*========= ハンバーガーボタン ===============*/
    .hamburger{
      position: fixed;
      z-index: 9999;
      top: 11px;
      right: 20px;
      cursor: pointer;
      width: 34px;
      height: 34px;
      border: none;
      background: none;
      border-radius: 50%;
      background-color: #121212;
    }

    /*×に変化*/	
    .hamburger span{
      width: 50%;
      display: inline-block;
      transition: all .4s;
      position: absolute;
      left: 9px;
      height: 2px;
      background-color: #fff;
      border-radius: 2px;
    }

    .hamburger span:nth-of-type(1) {
      top: 10px;	
    }

    .hamburger span:nth-of-type(2) {
      top: 16px;
      left: 14px;
    }

    .hamburger span:nth-of-type(3) {
      top: 22px;
    }

    .hamburger.active span:nth-of-type(1) {
      top: 10px;
      left: 9px;
      transform: translateY(6px) rotate(-45deg);
      width: 50%;
    }

    .hamburger.active span:nth-of-type(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-of-type(3){
      top: 22px;
      left: 9px;
      transform: translateY(-6px) rotate(45deg);
      width: 50%;
    }
}
/* Header END
====================*/



/* ==========================================================================
    Footer
========================================================================== */
.footer {
  background-color: #656565;
  padding: 120px 0 26px 0;
}
.footer_inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}
.footer_logo {
  display: flex;
  bottom: 0;
  align-items: flex-end;
  text-align: left;
}
.footer_logo img {
  width: clamp(100px, -2.553rem + 37.56vw, 366px);
}
.footer_right {
  display: flex;
  text-align: left;
}
.footer_sns {
  margin-top: 60px;
}
.footer_contents {
  margin-right:100px;
}
.footer_copyright {
  display: flex;
  justify-content: flex-end;
  margin-top: 130px;
}
.footer_copyrightA {
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-end;
  margin-right: 44px;
  color: #fff;
  font-weight: bold;
}
.footer_copyrightP {
  margin-right: 52px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
/*----------------*/
.btn__footer-Reserve{
  display: block;
  font-size: 1.6rem;
  padding: 12px 96px;
  border-radius: 20rem;
  margin-top: 20px;
  min-width: 270px;
}
.__BK{
  background-color: #121212;
  color: #fff;
}
.__GR{
  background-color: #DDD8D8;
  color: #121212;
}
.marginTop37 {
  margin-top: 37px;
}
a.btn__shadow {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
a.btn__shadow:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  -webkit-transform: translate(0, 1px);
  transform: translate(0, 1px);
  color: #fff;
  cursor: pointer;
  transition: .3s;
}
/*----------------*/

.footer_h2 {
  font-size: 2.2rem;
  color: #A7A7A7;
  text-transform: uppercase;
}
.footer_list li a {
  font-size: 1.6rem;
  color: #fff;
  text-transform: uppercase;
}
.footer_list li {
  margin-bottom: 6px;
}
.footer_sns-ico {
    margin-top: 24px;
}
.footer_list {
    margin-top: 30px;
}
.footer_sns-ico{
  width: 138px;
}
small {
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
}

    @media (max-width: 768px) {
    .pc {
      display: none;
    }
    .footer {
      padding: 20px;
      padding-bottom: 100px;
    }
    .footer_inner {
      padding: 0;
    }
    .footer_copyright {
      justify-content: flex-start;
      margin-top: 30px;
    }
    .footer_copyrightA {
      margin-right: auto;
    }  
    .footer_copyrightP {
      margin-right: auto;
    }  
    }
/* Footer END
====================*/

/* 共通　END
====================*/


/* ==========================================================================
    トップページFirstView FadeIn (ＴＯＰページ)
========================================================================== */
.first-view{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
}
.first-view p {
	position: fixed;
  top: calc( 45% + 100px);
  left: 47%;
  width: 33%;
	display: none;
	z-index: 9999;
}

.mv_logo {
  position: absolute;
  top: calc( 45% + 100px);
  left: 47%;
  width: 33%;
}
/* トップページFirstView FadeIn END
====================*/



/* ==========================================================================
    トップページMainView (ＴＯＰページ)
========================================================================== */
.mv {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 100px 0 0;
  height: 100vh;;
}
.mv_left{
  display: block;
  position: absolute;
  top: calc(33% + 100px);
  left: 0;
  width: 15%;
}
.mv_center{
  display: block;
  position: absolute;
  top: calc(9% + 100px);
  left: 22%;
  width: 29%;
}
.mv_right {
  display: block;
  position: absolute;
  top: calc(0.2% + 100px);
  right: 0;
  width: 29%;
}
.mv_bottom {
  display: block;
  position: absolute;
  top: calc(60% + 100px);
  right: 15%;
  width: 16%;
}
.main-view {
  padding: 0 0 190px 0;
}



/*========= スクロールダウン ===============*/
.scrolldown{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom: 0;
  /*全体の高さ*/
  height:94px;
}
.scrolldown::before{
  content: "";
  position: absolute;
  top:0;
  width: 3px;
  height: 94px;
  background-color: #DDD8D8;
}
  /* 線の描写 */
  .scrolldown::after{
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/
  width: 3px;
  height: 50px;
  background: #121212;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:47px;
		opacity: 1;
	}
	100%{
		height:0;
		top:94px;
		opacity: 0;
	}
}
  @media (max-width: 480px) {
  .mv {
    padding: 70px 0 0;
    min-height: 810px;
  }
  .mv_left {
    top: 58%;
    left: 7%;
    width: 35%;
  }
  .mv_center {
    top: 20%;
    left: 0;
    width: 69%;
    z-index: 100;
  }
  .mv_right {
    top: 9%;
    right: 0;
    width: 43%;
  }
  .mv_bottom {
    top: 64%;
    right: 3%;
    width: 38%;
  }
  .mv_logo {
    top: 50%;
    left: auto;
    width: 57%;
    z-index: 101;
    right: 3%;
  }
  .main-view {
    padding: 0 0 60px 0;
  }
  }

/* MainView (ＴＯＰページ)　END
====================*/



/* ==========================================================================
   Salon Info (ＴＯＰページ)
========================================================================== */
.top_h2-info {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 300;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.4rem;
  position: relative;
  display: inline-block;
  padding-left: 160px;
}
.top_h2-info::before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: 0;
}
.heading_salon-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 110px 0 70px;
  margin: 0 auto;
  max-width: 1140px;
}
.info-txt-wrap {
  text-align: left;
  width: 84%;
}
.info-date {
  font-size: 1.4rem;
  margin-top: 26px;
}
.info-txt {
  font-size: 1.6rem;
  margin-top: 10px;
  height: 70px;
}
.ttl-border {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 1.4rem;
}
.ttl-border:before {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #A7A7A7;
}
.ttl-border:before {
  margin-right: 1rem;
}

/*--- 画像の拡大 ---*/
.zoomIn img {
  aspect-ratio: 1/0.92;
  object-fit: cover;
}
.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}
/*　画像のマスク　*/
.mask{
  display: block;
  line-height: 0;/*行の高さを0にする*/
  overflow: hidden;/*拡大してはみ出る要素を隠す*/
  width: 100%;
  aspect-ratio: 1/0.92;
}

/*--- スライダー ---*/
.visible {
overflow:visible;
    height: 490px;
}
.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
/* .slider .slick-slide {
    margin:0 10px;
}
/*スライダー表示位置*/
.slider_position {
  position: relative;
}
.slider_box {
  position: absolute;
  width: 84%;
  right: 0;
} */
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev {
    position: absolute;/*絶対配置にする*/
    bottom: -25%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 51px;
    width: 51px;
    background-image: url("../images/arrow_prev.svg");
    background-repeat: no-repeat;
}
.slick-next {
    position: absolute;/*絶対配置にする*/
    bottom: -25%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 51px;
    width: 51px;
    background-image: url("../images/arrow_next.svg");
    background-repeat: no-repeat;
}
/* 
.slick-prev {
    right: 30%;
}

.slick-next {
    right: 14%;
} */
/*---/ スライダー END---*/
@media (max-width: 768px) {
.top_h2-info {
    letter-spacing: 0.2rem;
}
.top_h2-info::before {
    width: 80px;
    left: 50px;
}
}
@media (max-width: 480px) {
.top_h2-info {
top: 0;
left: 50px ;
letter-spacing: 0.1rem;
padding-left: 0;
}

h2.top_h2-info span {
text-transform: uppercase;
font-style: italic;
font-weight: 300;
}
.top_h2-info::before {
content: "";
position: absolute;
top: 1.25rem;
display: inline-block;
width: 30px;
height: 1px;
background-color: #121212;
left: -31px;
z-index: 4;
}
.heading_salon-info{
max-width: 425px;
}
.mask {
display: block;
line-height: 0;
overflow: hidden;
width: 100%;
aspect-ratio: 1/0.92;
}
.info-txt-wrap {
text-align: left;
width: 100%;
}

.slick-prev {/*戻る矢印の位置と形状*/
  right: 100px;
}

.slick-next {/*次へ矢印の位置と形状*/
  right: 20px;
}

.slider_container {
height: 300px;
}
.heading_salon-info {
padding: 55px 0 35px;
display: flex;
}


.slider_box {
position: absolute;
width: 100%;
right: 0;
}
.btn__square {
display: inline-block;
padding: 8px 20px;
border: solid 1px #CECECE;
}
.info-date {
    font-size: 1.2rem;
    margin-top: 0.8rem;
}
}

/* Salon Info (ＴＯＰページ)　END
====================*/

/* ==========================================================================
   Hair-Collection (ＴＯＰページ)
========================================================================== */
h2.top_h2-colle {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 4.5rem;
  text-align: left;
  z-index: 4;
  position: absolute;
  top: 97px;
  left: 43%;
  letter-spacing: 0.4rem;
}
h2.top_h2-colle span {
  text-transform: uppercase;
  font-style: italic;
}
.top_h2-colle::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  display: inline-block;
  width: 100px;
  height: 1px;
  background-color: #121212;
  left: -117px;
  z-index: 4;
}
.hair-collection {
  padding-top: 160px;
}
.hair-collection_container {
  position: relative;
  width: 100%;
  height: 773px;
  top: 160px;
}
.hair-colle_image--01 {
  position: absolute;
  left: 0;
  width: 36%;
  top: 0;
  z-index: -2;
}

.hair-colle_image--02 {
  position: absolute;
  width: 18%;
  top: 31%;
  left: 45%;
}
.hair-colle_image--03 {
  position: absolute;
  width: 18%;
  top: 17%;
  left: 69.4%;
}
.hair-colle_bg {
  background-color: rgb(217 217 217 / 50%);
  width: 69%;
  height: 46.6%;
  position: absolute;
  left: 31%;
  top: 53.4%;
  z-index: -1;
}
.btn__hair-colle {
  position: absolute;
  right: 6%;
  bottom: 4%;
  bottom: 10%;
  z-index: 6;
}


    @media (max-width: 768px){
    .hair-collection {
      padding-top: 0;
    }
    .hair-collection_container {
      height: 443px;
    }
    h2.top_h2-colle {
      top: 50px;
      letter-spacing: 0.25rem;
    }
    }
        @media (max-width: 480px) {
        h2.top_h2-colle {
          line-height: 1.2em;
          z-index: 4;
          top: 82px;
          left: 40%;
          letter-spacing: 0.1rem;
        }
        h2.top_h2-colle span {
          text-transform: uppercase;
          font-style: italic;
        }
        .top_h2-colle::before {
          content: "";
          position: absolute;
          top: 2.25rem;
          display: inline-block;
          width: 40px;
          height: 1px;
          background-color: #121212;
          left: -45px;
          z-index: 4;
        }
        .hair-collection {
          padding-top: 0;
          position: relative;
        }
        .hair-collection_container {
          position: relative;
          width: 100%;
          height: 623px;
        }
        .hair-colle_image--01 {
          position: absolute;
          left: 0;
          width: 62.4%;
          top: 0;
          z-index: 1;
        }
        .hair-colle_image--02 {
          position: absolute;
          width: 38.9%;
          top: 374px;
          left: 18px;
          z-index: 3;
        }
        .hair-colle_image--03 {
          position: absolute;
          width: 42.7%;
          top: 253px;
          right: 0;
          z-index: 3;
        }
        .hair-colle_bg {
          width: 81.6%;
          height: 35.2%;
          left: 18.4%;
          top: 64.8%;
        }
        .btn__hair-colle {
          position: absolute;
          right: 6%;
          bottom: 4%;
          z-index: 6;
        }
        }
/* Hair-Collection (ＴＯＰページ)　END
====================*/

/* ==========================================================================
   Staff (ＴＯＰページ)
========================================================================== */
.staff {
  padding: 220px 0 0 0;

}
.staff_bg-ttl-wrap {
  text-align: left;
  margin: 160px auto 0 7%;
}
.staff_h-wrap {
  margin-top: 30px;
  z-index: 999;
}
.staff_container {
  position: relative;
  right: 0;
}
.staff_bg {
  display:block;
  position: absolute;
  z-index: -1;
}
.staff_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10% 4%;
  width: 53%;
  margin-left: 40%;
  position: relative;
  top: -120px;
}
.staff_pic {
  font-size: 1.2rem;
  margin-top: 0;
}
.staff_name {
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 4px;
}
.staff_txt {
  text-align-last: left;
}
.staff_img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1/0.96;
}
p.staff_name.Montserrat-up {
  text-align: left;
}
.top_staff-h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-style: italic;
  text-transform: uppercase;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.4rem;
  padding: 0 0 55px 160px;
}
.top_staff-h2::before{
  content: "";
  position: absolute;
  top: 18%;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: 0;
}
.staff_bg img{
  display: block;
  width: 93%;
  margin-left: 7%;
}
    @media (max-width: 768px){
    .staff {
      padding: 180px 0 0 0;
    }
    .top_staff-h2 {
      letter-spacing: 0.2rem;
      padding: 0 0 55px 100px;
    }
    .top_staff-h2::before {
      width: 80px;
    }
    .staff_name {
      height: 50px;
    }
    .staff_list{
      top: -10px;
    }
    .staff_card{
      min-width: 135px;
    }
    }

        @media (max-width: 480px) {
        .staff {
          padding:100px 4% 0 4%;
          margin-top: 70px;
        }
        .staff_list {
          flex-direction: row;
          overflow-x: auto;
          display: flex;
          padding: 0 0 20px;
          width: 100%;
          margin: 0 auto;
          top: 0;
          grid-gap: 0 4%;
        }
        .staff_card{
          width: 50%;
          height: auto;
          scroll-snap-align: start;
          min-width: 140px
        }
        .staff_card img {
          width: 100%;
          aspect-ratio: 0.98/1;
        }
        .staff_bg-ttl-wrap {
          margin: 80px 0 0;
        }
        .staff_name {
          font-size: 1.6rem;
          text-transform: uppercase;
        }
        .top_staff-h2 {
          display: inline-block;
          padding-left: 83px;
          padding: 0 0 30px 80px;
        }
        .top_staff-h2::before {
          content: "";
          position: absolute;
          top: 25%;
          display: inline-block;
          width: 40px;
          height: 1px;
          background-color: #121212;
          left: 32px;
        }
        .staff_bg img {
          display: block;
          width: 100%;
          margin: 30px auto;
          aspect-ratio: 1/0.627;
        }
        }
/* Staff (ＴＯＰページ)　END
====================*/

/* ==========================================================================
   Instagram (ＴＯＰページ)
========================================================================== */
.instagram {
  margin: 120px 8% 55px;
  max-width: 1440px;
}
.instagram_h-wrap {
  display: grid;
  max-width: 1014px;
  justify-content: flex-end;
  margin: 20px auto;
  padding: 0 7%;
}
.instagram_h-wrap p {
  margin-top: 32px;
}
.instagram_phot {
  margin-top: 28px;
  display: block;
  text-align: right;
  width: 73%;
} 
.top_h2-insta {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-style: italic;
  font-weight: 400;
  z-index: 4;
  top: 0;
  text-transform: uppercase;
}
.top_h2-insta::before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 100px;
  height: 1px;
  background-color: #121212;
  left: -117px;
  z-index: 4;
}
.instagram_phot {
  max-width: 740px;
  margin: 0 auto 0 5.8%;
}
a.instagram_sns-ico {
  width: 36%;
  margin: 20px 0 0 auto;
}

    @media (max-width: 768px){
    h2.top_h2-insta {
      letter-spacing: 0.2rem;
    }
    .top_h2-insta::before {
      width: 80px;
      left: -100px;
    }
    }

        @media (max-width: 480px) {
        .instagram {
          margin: 100px 0 55px;
        }
        .instagram_phot {
          width: 100%;
          aspect-ratio: 1/1;
          margin: 0 auto;
          padding: 27px 4% 50px 0;
        }
        a.instagram_sns-ico {
          width: 30%;
          margin: auto 0 auto auto;
        }
        h2.top_h2-insta {
          margin-left: 10%;
          letter-spacing: 0.1rem;
        }
        h2.top_h2-insta::before {
          top: 50%;
          width: 30px;
          height: 1px;
          left: -30px;
        }
        .instagram_h-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 20px 0 0 auto;
        }
        }

/* Instagram (ＴＯＰページ)　END
====================*/


　
/* ==========================================================================
   下層ページ　hair collection
========================================================================== */
.u_hair-colle {
  padding: 196px 0 0 0;
}
.u_hair-colle_wrap {
  position: relative;
  height: 100vh;
}
.u_hair-colle_pv-img {
  position: absolute;
  width: 27%;
  top: 21.8%;
  left: 17.4%;
}
h2.u_hair-colle_h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 4.5rem;
  text-align: left;
  z-index: 4;
  position: absolute;
  top: 47.4%;
  left: 50.8%;
  letter-spacing: 0.4rem;
  margin-right: 5.2%;
}
h2.u_hair-colle_h2 span {
  text-transform: uppercase;
  font-style: italic;
}
.u_hair-colle_h2::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: -147px;
  z-index: 4;
}
.u_hair-colle_pv-bg {
  content: "";
  width: 100%;
  height: 39.2%;
  background-color: #F5F5F5;
  position: absolute;
  z-index: -1;
  bottom: 0;
}
.u_colle_23 {
  text-align: right;
  display: block;
}
.u_hair-colle_bg {
  background-color: #F5F5F5;
  padding: 200px 50px 50px;
}
.u_hair-colle_container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  justify-content: flex-start;
  top: 0;
  left: 37%;
  gap: 4%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 3.5%;
}
.u_hair-colle_img img{
  width: 302px;
  aspect-ratio: 0.65/1;
}
.u_hair-colle-btn {
  width: 100%;
  padding: 200px;
  background-color: #f5f5f5;
  margin: 0 auto;
}
    @media (max-width: 768px) {
    h2.u_hair-colle_h2 {
      line-height: 1em;
      top: 34.4%;
      left: 41.8%;
      letter-spacing: 0.2rem;
      margin-right: 5.2%;
    }
    .u_hair-colle_h2::before {
      top: 0.5em;
      width: 65px;
      left: -75px;
    }
    .u_hair-colle_pv-bg {
      height: 50%;
    }
    .u_hair-colle_pv-img {
      position: absolute;
      width: 39%;
      top: 16.8%;
      left: 8.4%;
    }
    .u_hair-colle_bg {
      background-color: #F5F5F5;
    }
    .u_hair-colle-btn {
      padding: 100px;
    }
    .br {
      display: inline-block;
    }
    }
        @media (max-width: 480px){
        .u_hair-colle_pv-img {
          width: 65%;
          top: 18.8%;
          left: 0;
        }
        .u_hair-colle_h2 {
          line-height: 1em;
          top: 45.4%;
          left: 42.8%;
          letter-spacing: 0.2rem;
          width: 166px;
        }
        .u_hair-colle_pv-bg {
          height: 40%;
        }
        .u_hair-colle_container {
          grid-template-columns: repeat(2,1fr);
          gap: 2% 4%;
        }
        .u_hair-colle-btn {
          padding: 100px 20px;
        }
        .u_hair-colle_bg {
          padding: 50px 20px 100px;
        }
        .u_hair-colle_h2::before {
          top: 0.5em;
          width: 30px;
          left: -36px;
        }
        }
/* 下層ページ　hair collection   END
====================*/





/* ==========================================================================
   下層ページ　hair catalog 
========================================================================== */
.u_hair-catalog_pv-container {
    position: relative;
    height: 500px;
    margin: 80px 0 75px 0;
}
.u_hair-catalog_h2 {
  position: absolute;
  top: 50%;
  left: 10%;
}

/* 見出し二段仕様 */
.u_hair-catalog_h2::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  display: inline-block;
  width: 134px;
  height: 1px;
  background-color: #121212;
  left: 12px;
  z-index: 4;
}
.u_hair-catalog_h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 400;
  line-height: 6rem;
  text-align: left;
  z-index: 4;
  position: absolute;
  top: 52%;
  left: 58%;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
}/* /見出し二段仕様 END */

.u_hair-catalog_pv--left {
  width: 66%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 23%;
  aspect-ratio: 1/0.43;
}
/*grid*/
.u_hair-catalog-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 30px;
  max-width: 1140px;
  padding: 50px 5% 20px;
}
.u_hair-catalog-wrap li{
  width: 30%;
  margin-bottom: 5%;
}
.u_hair-catalog-wrap li:not(:nth-of-type(3n)){
  margin-right:5%;
}
.u_hair-catalog-mask {
  display: block;
  line-height: 0;
  overflow: hidden;
  width: 100%;
}
.u_hair-catalog-mask img {
  aspect-ratio: 1/1.55;
  object-fit: cover;
}

.u_hair-catalog-p-wrap {
  text-align: right;
  width: 100%;
}
.u_hair-catalog-txt {
  font-size: 1.2rem;
  margin-top: 1.2rem;
}
.u_hair-catalog-name {
  font-size: 1.4rem;
  margin-top: 0;
  font-weight: 600;
  letter-spacing: 0.08rem;
}


    @media (max-width: 768px){
      .u_hair-catalog_pv-container {
        height: 200px;
      }
    .u_hair-catalog-wrap {
      
    }
    .u_hair-catalog-wrap li{
      width: 48%;
    }
    .u_hair-catalog-wrap li:not(:nth-of-type(3n)){
      margin-right:0;
    }
    .u_hair-catalog-wrap li:nth-of-type(odd){
      margin-right:4%;
    }
    .u_hair-catalog_h2 {
      line-height: 5rem;
      top: 50%;
      left: 45%;
      letter-spacing: 0.2rem;
    }
    .u_hair-catalog_h2::before {
      content: "";
      position: absolute;
      top: 2.25rem;
      display: inline-block;
      width: 72px;
      height: 1px;
      background-color: #121212;
      left: 80px;
      z-index: 4;
    }
    .u_hair-catalog_pv--left {
      width: 70%;
      object-fit: cover;
      position: absolute;
      left: 0;
      top: 23%;
      aspect-ratio: 1/0.43;
    }
    .u_hair-catalog-wrap {
      padding: 50px 5% 0;
    }
    .u_hair-colle_bg {
      background-color: #F5F5F5;
      padding: 100px 50px 50px;
    }
    }
     @media (max-width: 480px){
      .u_hair-catalog_pv-container {
        height: 120px;
      }
     .u_hair-catalog_h2{
       line-height: 2.4rem;
       top: 50%;
       left: 32%;
       letter-spacing: 0.2rem;
     }
    .u_hair-catalog_h2::before {
      top: 25%;
      left: 0px;
     }
     }
    

/* 下層ページ　hair catalog  END
====================*/





/* ==========================================================================
   下層ページ　blog
========================================================================== */
.blog_pv-container {
  position: relative;
  height: 448px;
  padding: 100px 0 0;
  margin: 0 0 75px;
}
.blog_heading {
  position: absolute;
  top: 50%;
  left: 10%;
}
.blog_pv--left {
  max-width: 14%;
  max-height: 44%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 100px;
}
.blog_pv--right {
  width: 70%;
  height: 59%;
  object-fit: cover;
  position: absolute;
  right: 0;
  bottom: 0;
}
.blog_container {
  display: flex;
  max-width: 970px;
  margin: 0 auto;
  padding: 75px 6% 0;
  justify-content: space-between;
  align-items: center;
}
.blog_img {
  width: 32%;
  aspect-ratio: 1/0.67;
}
.blog_img img {
  width: 100%;
  object-fit: cover;
}
.blog_txt-box {
  text-align: left;
  margin-left: 40px;
  width: 66%;
  padding: 10px 0;
}
.blog_date {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.blog_ttl {
  font-size: 2.6rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.blog_border { 
  border: solid 1px #A7A7A7;
  margin: 10px 0 20px;
}
.blog_txt {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
}
    @media (max-width:768px){
    img.blog_pv--left {
      top: 136px;
    }
    }
        @media(max-width:480px){
        .blog_pv--left {
          top: 130px;
          max-width: 19%;
        }
        .blog_pv--right {
          top: 168px;
          height: 27%;
          width: 64%;
        }
        .blog_heading {
          top: 41%;
          font-size: 2em;
        }
        .blog_container {
          display: block;
          width: 100%;
        }
        .blog_img {
          width: 100%;
        }
        .blog_txt-box {
          width: 100%;
          margin: 0 auto;
        }   
        }
/* 下層ページ　blog  END
====================*/



/* ==========================================================================
   下層ページ　 blog詳細
========================================================================== */
.d_blog-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 6.2% 0 4.4%;
  height: 97vh;
  place-content: center;
  display: grid;
}
.d_blog-wrap {
  display: flex;
  margin-top: 22%;
  margin-bottom: 14.4%;
}
.d_blog-img {
  width: 31.9%;
}
.d_blog-img img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 0.79/1;
}
.d_blog-box {
  text-align: left;
  margin: 0 2.2% 14px 8.9%;
  width: 57.5%;
}
.d_blog-ttl {
  font-size: 2.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 38px;
}
.d_blog-date-wrap {
  display: flex;
  font-size: 1.2rem;
  align-items: center;
  line-height: 1.2rem;
}
p.d_blog_date {
  border-right: 1px solid #A7A7A7;
  padding: 0 22px 0 0;
}
p.d_blog-name {
  padding: 0 0 0 22px;
  text-transform: uppercase;
}
.d_blog-border {
  border: solid 1px #A7A7A7;
  margin: 5% 0 5.3%;
}
.d_blog-txt {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.d_blog-txt p {
  margin-bottom: 4.2%;
}
.d_blog_btn {
  margin: 0 auto 200px;
}

@media (max-width: 768px){
.d_blog_btn {
margin: 0 auto 100px;
}
.d_blog-container {
padding: 0 5%;
}
.d_blog-img {
width: 38%;
}
.d_blog-box {
margin: 0 0 14px auto;
}
}

@media (max-width: 480px){
.d_blog-box {
margin: 20px auto;
width: 100%;
}
.d_blog-container {
padding: 0 6%;
height: auto;
}
.d_blog-wrap {
display: block;
}
.d_blog-img {
width: 100%;
}
.d_blog-box {
margin: 0 auto;
width: 100%;
}
}

/* 下層ページ　 blog詳細 END
====================*/


/* ==========================================================================
   下層ページ　 product
========================================================================== */
.u_product_pv-container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1140px;
  padding: 0 0 0 10%;
  height: 100vh;
  margin: 0 auto;
  place-content: center;
}
.u_product_pv--left {
  margin-top: 100px;
  place-content: center;
  display: grid;
  width: 28%;
  object-fit: cover;
  aspect-ratio: 0.66/1;
  position: absolute;
  left: 13.3%;
}
.u_product_h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 400;
  line-height: 0.8em;
  position: absolute;
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  left: 53%;
  place-content: center;
  display: grid;
  margin-top: 100px;
}
.u_product_head-border::before {
  content: "";
  position: absolute;
  top: 25%;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: -164px;
}
.u_product_sub-ttl {
  font-size: 1.4rem;
  letter-spacing: 0;
  display: flex;
  justify-content: end;
  font-weight: 300;
  text-transform: uppercase;
  font-style: italic;
}
.u_product_intro {
  font-size: 1.4rem;
  line-height: 3.1rem;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 1440px;
  padding: 0 0 120px;
  margin: 120px auto 0;
}
.u_product_bg {
  background-color: #F5F5F5;
}
.u_product_img {
  width: 100%;
  aspect-ratio: 0.58/1;
}
.u_product_img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.u_product_inner {
  padding: 140px 3%;
  max-width: 770px;
  margin: 0 auto;
}
.u_product_item-wrap {
  text-align: right;
  max-width: 520px;
  top: 44%;
  right: 0;
}
h3.u_product_item {
  font-size: 3rem;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 3px;
  font-weight: 400;
}
hr.u_product_item-line {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #121212;
  margin: 16px 0 12px -30px;
  padding: 0;
}
.u_product_price {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.2rem;
  font-weight: 400;
  color: #7C7C7C;
}
.u_product_txt-wrap {
  width: 100%;
}
.u_product_grid {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-auto-rows: minmax(100px, auto);
  align-items: end;
}
.u_product_grid {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-auto-rows: minmax(100px, auto);
  align-items: end;
}

.u_product_txt {
  margin: 42px auto 30px 10%;
  text-align: left;
  display: flex;
  justify-content: flex-end;
}
.u_product_txt p {
  font-size: 1.4rem;
  line-height: 2.1;
}

    @media(max-width:768px){
    img.u_product_pv--left.fadeIn_up {
      width: 36%;
    }
    .u_product_head-border {
      font-size: 2em;
      letter-spacing: 0.1rem;
      text-align: left;
      position: absolute;
    }
    .u_product_head-border::before {
      content: "";
      position: absolute;
      top: 25%;
      display: inline-block;
      width: 48px;
      height: 1px;
      background-color: #121212;
      left: -51px;
    }
    .u_product_sub-ttl {
      font-size: 1.2rem;
    }
    .u_product_item {
      font-size: 2rem;
    }
    .u_product_price {
      font-size: 1.4rem;
    }
    .u_product_inner {
      padding: 17.5% 5%;
    }
    .u_product_grid {
      grid-template-columns: 30% 60%;
    }
    h3.u_product_item {
      font-size: 2.4rem;
      justify-content: end;
      display: grid;
    }
    }
        @media(max-width:480px){
        .u_product_pv-container {
          padding: 0;
        }
        .u_product_pv--left {
          left: 9%;
          top: 12%;
        }
        .u_product_h2 {
          left: 50%;
        } 
        p.u_product_intro {
          padding: 0 6% 120px;
        }   
        .u_product_img {
          width: 70%;
          margin: 0;
          aspect-ratio: inherit;
        }   
        .u_product_img img {
          width: 70%;
          object-fit: cover;
          aspect-ratio: 0.58/1;
        }    
        .u_product_item-wrap {
          margin: 20px auto 0;
        } 
        hr.u_product_item-line {
        margin: 16px 0 12px 0;
          }
        .u_product_txt {
          margin: 20px auto 30px 20%;
        } 
        .u_product_grid {
          display: block;
        }  
        .u_product_inner {
          padding: 27.5% 5% 10%;
        }    
        }
/* 下層ページ　 product END
====================*/



/* ==========================================================================
   下層ページ　recruit
========================================================================== */
.heading_recruit {
  max-width: 1140px;
  margin: 0 auto;
  padding: 210px 0 170px;
  font-family: 'Noto Sans JP', sans-serif;
}
.recruit_inner {
  max-width: 1140px;
  margin: auto;
}

/*　表　*/
.recruit_h3{
  text-align: center;
  font-size: 1.688em;
  margin: 0 auto 100px;
  letter-spacing: 0.16rem;
}
.recruit_container{
  background-color: #F5F5F5;
  padding: 159px 0;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
}
.recruit_dl-container {
  padding: 0 3%;
  max-width: 58.3%;
  margin: 0 auto;
}
.recruit_dl-container dl {
  display: flex;
}
dt.recruit_ttl {
  width: 40%;
  text-align: left;
  border-bottom: solid 1px #A7A7A7;
  padding: 20px 27px;
}
dd.recruit_txt {
  width: 60%;
  text-align: left;
  border-bottom: solid 1px #A7A7A7;
  padding: 20px 20px 20px 0;
}
br.mb-2 {
  display: block;
  content: "";
  margin-bottom: 2rem;
}
/*　/.表　*/

.recruit_appri {
  text-align: left;
}
.recruit_cap {
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: right;
  margin-top: 20px;
  letter-spacing: 0.2px;
  font-style: initial;
}
.recruit_tel {
  font-size: 2.9rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
}
.recruit_address {
  font-size: 1.2rem;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 20px;
  margin-left: 1rem;
}
.recruit_bg-bottom {
  width: 100%;
  height: 100px;
  background-color: #F5F5F5;
}
.recruit_add-container {
  max-width: 1440px;
  margin: 0 auto;
}
.recruit_add_wrap {
  display: flex;
  padding: 80px 0 7%;
  justify-content: center;
  position: relative;
}
.recruit_add_wrap::before {
  content: "";
  position: absolute;
  flex-grow: 1;
  width: 1px;
  background-color: #A7A7A7;
  height: 44%;
  display: block;
  margin: 0 7%;
}
.recruit_appri-box {
  margin-right: 109px;
  width: 35%;
}
.recruit_appri {
  text-align: left;
  font-size: 2.8em;/*45px*/
  font-style: italic;
  letter-spacing: 0.2rem;
}

.recruit_cap {
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: right;
  margin-top: 20px;
  letter-spacing: 0.2px;
  font-style: initial;
}
.recruit_add-box {
  margin-left: 82px;
  margin-top: 22px;
  width: 24%;
}
.recruit_tel {
  font-size: 1.8em;/*29px*/
  font-weight: 600;
  letter-spacing: 0.3rem;
}
.recruit_address p {
  font-size: 1.2rem;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}
    @media (max-width: 768px){
    .heading_recruit {
      padding: 130px 0 110px;
    }
    .recruit_container {
      padding: 100px 0;
    }
    .recruit_h3 {
      margin: 0 auto 60px;
    }
    .recruit_dl-container {
      padding: 0 3%;
      max-width: 90%;
    }
    dt.recruit_ttl {
      width: 35%;
    }
    dd.recruit_txt {
      width: 65%;
    }
    .recruit_appri-box {
      margin-right: 0;
    }
    .recruit_appri {
      font-size: 2.4em;
    }
    .recruit_add-box {
      margin-left: 0;
    }
    .recruit_tel {
      font-size: 1.5em;
      text-align: left;
    }
    .recruit_add_wrap::before {
      margin: 0 3%;
    }
    .recruit_add_wrap {
      padding: 2%;
      justify-content: space-evenly;
    }
    .recruit_appri-box {
      margin-right: 0;
      width: 45%;
    }
    .recruit_add-box {
      margin-left: 0;
      margin-top: 0;
      width: 45%;
    }
    .recruit_address {
      margin-top: 10px;
      margin-left: 0;
    }
    .recruit_add_wrap {
      padding: 6% 2%;
    }
    }
        @media (max-width: 480px) {
        .recruit_appri-box {
          margin-right: 0;
          width: 100%;
        }
        .recruit_add_wrap::before {
          content: "";
          position: absolute;
          flex-grow: 1;
          width: 1px;
          background-color: #A7A7A7;
          height: 74%;
          display: block;
        }
        .recruit_add_wrap {
          display: block;
          padding: 10%;
          justify-content: center;
          position: relative;
        }
        dt.recruit_ttl {
          font-size: 1.4rem;
          width: 30%;
          padding: 20px;
        }
        dd.recruit_txt {
          width: 70%;
          padding: 20px 20px 20px 0;
        }
        h3.recruit_h3 {
          font-size: 2rem;
        }
        .recruit_dl-container {
          max-width: 94%;
          font-size: 1.4rem;
        }
        .recruit_appri {
          font-size: 3.6rem;
}
        .recruit_add-box {
          margin: 60px auto 0;
          width: 100%;
        }
        .recruit_add_wrap::before {
          content: "";
          position: absolute;
          background-color: #A7A7A7;
          height: 20%;
          display: block;
          margin: auto;
          left: 50%;
          top: 38%;
          width: 1px;
        }
        .recruit_appri-box {
          width: 100%;
          padding-bottom: 41px;
        }
        .recruit_add-box {
          width: 100%;
          padding-top: 40px;
        }
        .recruit_add {
          display: grid;
          text-align: left;
          margin-left: 37px;
        }
        .recruit_cap {
        text-align: left;
}
        .recruit_add-box {
          padding-top: 40px;
        }
        .recruit_add {
          display: grid;
          text-align: left;
          margin-left: 37px;
        }
        .recruit_add-box {
          padding-top: 16px;
        }
        .recruit_add {
          display: grid;
          text-align: left;
          margin-left: 0;
        }
        .recruit_address {
          display: grid;
        }
        }
/* 下層ページ　recruit END
====================*/



/* ==========================================================================
 下層ページ　information
========================================================================== */
/* タブリスト【現在地】左から右に下線が伸びる　*/
.u_info_navList-item{
	position: relative;
}
.u_info_navList-item.current ,
.u_info_navList-item :hover{
	color: #121212;
}
.u_info_navList-item ::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background:#121212;
  transition: all .5s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: left top;/*左上基点*/
}
/*現在地とhoverの設定*/
.u_info_navList-item.current ::after,
.u_info_navList-item :hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}
/*---/ タブリスト【現在地】左から右に下線が伸びる　END---*/


/*　並び替えボタンのCSS　*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:100px 20px;
}
.sort-btn li {
  list-style: none;
  cursor: pointer;
  padding: 4px;
  margin: 0 10px;
  font-size: 1.4rem;
  color: #A7A7A7;
}
.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}/*/　並び替えボタンのCSS　END*/

.u_info-wrap {
  display: grid;
  grid-template-columns: repeat( 3 ,1fr);
  grid-gap: 8% 6%;
  margin: 0 auto;
  max-width: 1140px;
  padding: calc(14% - 70px) 5% 225px;
}
.u_info-mask {
  display: block;
  line-height: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/0.92;
}
.u_info-txt-wrap {
  text-align: left;
  width: 100%;
}
.u_info-date {
  font-size: 1.4rem;
  margin-top: 26px;
}
.u_info-txt {
  font-size: 1.6rem;
  margin-top: 10px;
  height: 70px;
  
}
.u_info-ttl-border {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 1.4rem;
}
.u_info-ttl-border:before {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #A7A7A7;
}
.u_info-ttl-border:before {
  margin-right: 1rem;
}
.u_info_h2posi {
  margin-top: 18%;
}
    @media (max-width: 768px) {
    .u_info_h2posi {
    margin: 12% 0 6%;
}
    .heading_salon-info {
      padding: 55px 0 35px;
    }
    .u_info-wrap {
      grid-template-columns: repeat( 2 ,1fr);
      grid-gap: 4%;
      padding: calc(14% - 70px) 5% 300px;
    }
    .u_info-date {
      font-size: 1.2rem;
      margin-top: 13px;
    }
    .u_info-txt {
      font-size: 1.4rem;
      margin-top: 5px;
      height: 70px;
    }
    .u_info-ttl-border {
      display: flex;
      align-items: center;
      margin-top: 10px;
      font-size: 1.2rem;
    }
    }
/* 下層ページ　information  END
====================*/



/* ==========================================================================
   下層ページ　menu
========================================================================== */
.d_heading_menu {
  max-width: 1140px;
  margin: 0 auto;
  padding: 210px 0 170px;
}
.menu_container {
  max-width: 1140px;
  padding: 0 10% 255px;
  margin: 0 auto;
}
table {
  width: 90%;
  margin: 0 auto 75px;
}
td.menu {
  text-align: left; 
  font-size: 3rem;
  font-style: italic;
  font-weight: 700;
  padding: 16px 28px 12px 16px;
  border-bottom: solid 1px #A7A7A7;
  position: relative;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}
td.menu::after {
  position: absolute;
  content: "";
  display: block;
  border-bottom: solid 1px #121212;
  bottom: 0;
  width: 25%;
  left: 0;
}
span.menu_cap {
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  color: #7C7C7C;
  text-transform: uppercase;
  margin-left: 16px;
  letter-spacing: 0.16rem;
}
td.menu_ttl {
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  color: #7C7C7C;
  font-size: 1.4rem;
  padding: 16px 28px 0 28px;

}
td.menu_price {
  text-align: right;
  font-size: 1.4rem;
  color: #7C7C7C;
}
td.__A7A7A7 {
  color: #A7A7A7;
  padding-top: 2px;
}
    @media (max-width: 768px){
    .menu_container {
      padding: 10% 10% 20%;
    }
    td.menu {
      font-size: 2.2rem;
    }
    .d_heading_menu {
      padding: 200px 0 100px;
    }
}
@media(max-width: 480px){
td.menu {
padding: 16px 0;
}
span.aline-R {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}
}

/* 下層ページ　menu  END
====================*/



/* ==========================================================================
   下層ページ　total beauty
========================================================================== */
.total-beauty_pv-container {
  max-width: 1440px;
  height: 81.7vh;
  position: relative;
}
.total-beauty_pv {
  width: 61%;
  left: 0;
  display: block;
  position: absolute;
  top: 23.6%;
}
.total-beauty_pv img {
  width: 100%;
  aspcto-ratio:1/0.494;
  object-fit: cover;
}
.total-beauty_h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 400;
  line-height: 6.4rem;
  text-align: left;
  z-index: 4;
  position: absolute;
  top: 49%;
  left: 59.2%;
  letter-spacing: 0.4rem;
}
.total-beauty_h2::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  display: inline-block;
  width: 129px;
  height: 1px;
  background-color: #121212;
  left: 0;
  z-index: 4;
}
.total-beauty_p {
  text-align: left;
  line-height: 3rem;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  width: 50%;
}
.total-beauty_wrap {
  display: flex;
  justify-content: space-between;
  margin: 163px auto 130px;
  max-width: 1060px;
}
.total-beauty_floor {
  width: 40%;
}
.total-beauty_floor img{
  width: 100%;
  object-fit: cover;
}
.total-beauty_p p:first-child {
  margin-bottom: 48px;
}
.total-beauty_btn {
  display: flex;
  justify-content: space-around;
  max-width: 1060px;
  margin: 0 auto 200px;
}
.total-beauty_btn:hover {
  opacity: 0.5s;
}
    @media (max-width: 768px){
    .total-beauty_pv {
      width: 58%;
      left: 0;
      top: 23.6%;
    }
    .total-beauty_h2 {
      line-height: 1.5em;
      z-index: 4;
      top: 42%;
      left: 46%;
    }
    .total-beauty_wrap {
      width: 90%;
      align-items: flex-start; 
    }
    .total-beauty_floor {
      width: 40%;
    }
    .total-beauty_p {
      line-height: 2.8rem;
      width: 55%;
    }
    .total-beauty_p p:first-child {
      margin-bottom: 30px;
    }
    ul.total-beauty_btn {
      width: 90%;
    }
    .total-beauty_btn li {
      width: 30%;
    }
    }

        @media (max-width: 480px){
        .total-beauty_pv {
          width: 70%;
          left: 0;
          top: 23.6%;
        }
        .total-beauty_h2 {
          line-height: 1.6em;
          top: 37%;
          left: 35%;
          letter-spacing: 0.4rem;
        }

        .total-beauty_h2::before {
          top: 2.25rem;
          left: -20px;
          width: 80px;
        }
        .total-beauty_pv {
          width: 50%;
          left: 0;
          top: 23.6%;
          height: 30%;
          object-fit: cover;
        }
        .total-beauty_wrap {
          display: block;
          margin: 0 auto 80px;
        }
        .total-beauty_p {
          width: 100%;
          margin-bottom: 40px;
        }
        .total-beauty_floor {
          width: 100%;
        }

        ul.total-beauty_btn {
          display: block;
          margin: 0 auto 100px;
          width: 80%;
        }
        .total-beauty_btn li {
          width: 80%;
          margin: 0 auto 40px;
        }
        }

/* 下層ページ　total beauty  END
====================*/



/* ==========================================================================
   下層ページ　contact
========================================================================== */
.u_contact_pv-wrap {
  display: flex;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 3%;
}
.u_contact_pv {
  width: 50%;
}
.u_contact_pv img {
  width: 100%;
  object-fit: cover;
}
.u_contact_map-wrap {
  display: flex;
  padding: 6.6%;
  margin: 0 auto;
}
.u_contact_card-wrap {
  width: 50%;
  margin: 0 auto;
  display: grid;
  place-content: center;
}
.u_contact_map-wrap {
  display: flex;
  margin: 166px auto 200px;
  padding: 0;
  justify-content: end;
}
.u_contact_add {
  text-align: left;
}
.u_contact_map {
  width: 57.2%;
}
.u_contact_map img {
  width: 100%;
  object-fit: cover;
}
.u_contact_add {
  text-align: left;
  border-top: solid 1px;
  padding: 30px;
  line-height: 3.2rem;
}
.u_contact_add p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
}
.u_contact_h3 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-transform: capitalize;
  line-height: 2.81em;
  margin: 21.3% auto 10.6% -60%;
}
.u_contact_img img {
  width: 100%;
  object-fit: cover;
}
.u_contact_card dl {
  text-align: left;
  text-transform: uppercase;
  margin-top: 60px;
}
.u_contact_card {
  max-width: 75%;
  margin: 0 auto;
}
dl.u_contact_dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 3rem;
}
.u_contact_dl dl ,.u_contact_dl dt {
  width: 27%;
}
.u_contact_dl dl,  .u_contact_dl dd {
  width: 73%;
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.u_contact_add-wrap {
  width: 32.4%;
}
.u_heading_contact {
  max-width: 1140px;
  margin: 0 auto;
  padding: 210px 0 170px;
  font-family: 'Noto Sans JP', sans-serif;
}
    @media (max-width: 768px){
    .u_contact_pv-wrap {
      width: 96%;
    }
    .u_contact_map-wrap {
      margin: 83px auto 100px;
    }
    .u_contact_card {
      max-width: 80%;
    }
    .u_contact_img {
      width: 90%;
    }
    .u_contact_dl dt {
      width: 20%;
    }
    .u_contact_h3 {
      line-height: 2em;
      margin: 0 0 0 -40px;
    }
    .u_contact_add {
      padding: 8px;
      line-height: 3.2rem;
    }
    .u_contact_add p {
      font-size: 1.4rem;
    }
    }
        @media (max-width: 480px){
        .u_heading_contact {
          padding: 105px 0 85px;
        }
        .u_contact_pv-wrap {
          display: block;
        }
        .u_contact_pv {
          width: 100%;
        }
        .u_contact_card-wrap {
          width: 100%;
          margin: 0 auto;
          display: grid;
          place-content: center;
        }
        .u_contact_card {
          max-width: 90%;
        }
        .u_contact_img {
          width: 60%;
        }
        .u_contact_card dl {
          margin-top: 20px;
        }
        .u_contact_map-wrap {
          display: block;
        }
        .u_contact_add-wrap {
          width: 100%;
        }
        .u_contact_map {
          width: 100%;
        }
        .u_contact_add {
          border-top: none;
          position: relative;
          display: grid;
          place-content: end;
        }
        .u_contact_add::after {
          position: absolute;
          content: "";
          background-color: #A7A7A7;
          width: 80%;
          height: 1px;
          top: 6px;
          right: 0;
        }
          .u_contact_h3 {
          margin: 0 0 0 -70px;
        }

        }
/* 下層ページ　contact  END
====================*/



/* ==========================================================================
   下層ページ　privacy-policy
========================================================================== */
.u_privacy-poricy-inner {
    max-width: 764px;
    margin: 0 auto 80px;
}
.heading_privacy-policy {
    max-width: 1140px;
    margin: 0 auto;
    padding: 210px 0 170px;
    font-family: 'Noto Sans JP', sans-serif;
}
.u_privacy-poricy-inner p {
    text-align: left;
    margin: 0 auto 40px;
}
    @media (max-width: 768px){
    .u_privacy-poricy-inner {
      padding: 6%;
      margin: 0 auto;
    }
    .heading_privacy-policy {
      max-width: 1140px;
      margin: 0 auto;
      padding: 23% 0 10%;
      font-family: 'Noto Sans JP', sans-serif;
    }
    }
        @media (max-width: 480px){
        .heading_privacy-policy {
          padding: 130px 0 90px;
        }
        span.br {
          text-align: left;
          display: block;
        }

        .heading_privacy-policy h2{
          font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
          line-height: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
          position: relative;
        }
        .heading_privacy-policy h2::before {
          content: "";
          position: absolute;
          top: 25%;
          display: inline-block;
          width: 25%;
          height: 1px;
          background-color: #121212;
          left: 2%
        }
        .u_privacy-poricy-inner p {
          text-align: left;
          margin: 0 auto 40px;
          line-height: 3.2rem;
        }

        }
/* 下層ページ　privacy-policy  END
====================*/




/* ==========================================================================
   下層ページ　staff詳細
========================================================================== */
.d_heading_staff {
  width: 100%;
  max-width: 1140px;
  padding: 18% 4% 9%;
  display: flex;
  margin: 0 auto;
  align-items: center;
}
.d_staff-container {
  display: flex;
  justify-content: space-around;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  padding: 0 8% 160px;
}
.d_staff-h2 {
  font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
  font-weight: 300;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.4rem;
  position: relative;
  display: inline-block;
  padding-left: 16%;
}
.d_staff-h2::before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40%;
  height: 1px;
  background-color: #121212;
  left: 0;
}
.d_staff-img {
  aspect-ratio: 1 / 0.65;
  width: 36%;
}
.d_staff-img img {
  width: 100%;
  object-fit: cover;
}
.d_staff-wrap {
  width: 40%;
  display: grid;
  place-content: center;
}
.d_staff-txt-wrap {
  width: 40%;
  text-align: left;
}
.d_staff-nav-links {
  display: flex;
  justify-content: end;
}
nav.d_staff-nav {
  display: flex;
  justify-content: flex-end;
}
.d_staff_name {
  font-size: clamp(2.4rem, 2.189rem + 0.9vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.4rem;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.d_staff_pic {
  font-size: 2rem;
  margin-bottom: 10px;
}
.d_staff_btn {
  padding: 0 0 200px;
}
    @media (max-width: 480px) {
    .d_staff-img {
      width: 100%;
    }
    .d_staff-container {
      display: block;
      padding: 0 4% 100px;
    }
    .d_staff_btn {
      padding: 0 0 100px;
    }
    .d_staff-wrap {
      width: 100%;
      display: block;
    }
    .d_staff-h2::before{
      width: 31%;
    }
   }

/* 下層ページ　staff詳細  END
====================*/



/* ==========================================================================
   下層ページ　information詳細
========================================================================== */
.d_info-container {
  max-width: 1140px;
  margin: 0 auto;
}
.d_info-wrap {
  width: 100%;
  margin: 19% auto 14.4%;
}
.d_info-img {
  width: 100%;
  padding: 0 5.86%;
  max-width: 970px;
  margin: 0 auto;
}
.d_info-img img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 0.273;
}
.d_info-box {
  text-align: center;
  margin: 0 auto;
}
.d_info-ttl {
  font-size: 3rem;
  font-weight: 600;
  margin: 7.8% auto 3.6%;
  letter-spacing: 0.23rem;
}
.d_info-date-wrap {
  display: flex;
  font-size: 1.2rem;
  align-items: center;
  line-height: 1.2rem;
  justify-content: center;
}
hr.d_info-border {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 6.6% auto;
  padding: 0;
  width: 59%;
}
p.d_info_date {
  border-right: 1px solid #A7A7A7;
  padding: 0 22px 0 0;
}
p.d_info-name {
  padding: 0 0 0 22px;
  text-transform: uppercase;
}
.d_info-txt {
  font-size: 1.2rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  line-height: 2.8rem;
  width: 59%;
  margin: 0 auto;
  padding: 0 3.3%;
}
.d_info-txt p {
  margin-bottom: 4.2%;
}
.d_info_btn {
  margin: 0 auto 200px;
}
    @media(max-width:786px){
    .d_info-ttl {
      font-size: 2rem;
    }
    .d_info-txt{
      width: 82%;
    }
    .d_info_btn {
      margin: 0 auto 100px;
    }
    }
/* 下層ページ　information詳細  END
====================*/



/* ==========================================================================
   下層ページ　hair catalog詳細
========================================================================== */
.d_HairCatalog-container {
  display: flex;
  justify-content: space-around;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  padding: 200px 8% 160px;
}
.d_HairCatalog-img {
  aspect-ratio: 1 / 0.65;
  width: 36%;
}
.d_HairCatalog-img img {
  width: 100%;
  object-fit: cover;
}
.d_HairCatalog-wrap {
  width: 40%;
  display: grid;
  place-content: center;
}
.d_HairCatalog-txt-wrap {
  width: 40%;
  text-align: left;
}
.d_HairCatalog-nav-links {
  display: flex;
  justify-content: end;
}
nav.d_HairCatalog-nav {
  display: flex;
  justify-content: flex-end;
}
.d_HairCatalog_name {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.d_HairCatalog_pic {
  font-size: 2rem;
  margin-bottom: 10px;
}
.d_HairCatalog_btn {
  padding: 0 0 200px;
}
     @media (max-width: 768px){
     .d_HairCatalog_btn {
        padding: 0 0 100px;
    }
    }
         @media (max-width: 480px){
         .d_HairCatalog-container {
            display: block;
            padding: 100px 8% 80px;
        }
        .d_HairCatalog-img {
            width: 100%;
        }
        .d_HairCatalog-wrap {
            width: 100%;
        }
        .d_HairCatalog-txt-wrap {
            width: 100%;
        }
        }
/* 下層ページ　hair catalog詳細 END
====================*/


/* ==========================================================================
   ページネーションの上下余白
========================================================================== */
.padding80 {
  padding: 450px 0 ;
}
.padding150 {
  padding: 150px;
}

    @media (max-width: 768px){
      .padding150 {
    padding: 0;
    }

    }

.interior{
  padding: 80px 30px;
}

.interior-wrap{
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.interior-title{
  width: 430px;
  margin: 0 15% 40px auto;
}

.slider-main{
  margin-bottom: 20px;
}

.slider-thum img{
  display: block;
  padding: 0 10px;
}

@media (max-width: 768px){
  .slider-thum img{
    padding: 0 5px;
  }
}

.page-numbers.is-active{
  position: relative;
}

.page-numbers.is-active::after{
  content:'';
  background-color: #333;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}