@charset "UTF-8";

/* 共通部分 */
html {
    font-size: 62.5%;
}


body {
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    color: #534741;
    line-height: 2.4;
    letter-spacing: 3px;
    top:0;
    background-color: #fcfcfc;
    max-width: 100vw;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

li {
    list-style: none;
}

img {
    vertical-align: bottom;
    max-width: 100%;
}


header {
    font-family: 'Poppins', sans-serif;
    position: sticky;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    background-color: rgba(239, 239, 239, 0.7);
    z-index: 9999;
    top:0;
    height: 12vh;
}

.wrapper {
  width: 1170px;
  max-width: 100%;
  top:0;
}


/* セクションごとにふわっと表示 */
.effect-fade {
  opacity : 0;
  transform : translate(0, 45px);
  transition : all 300ms;
}
  
  .effect-fade.effect-scroll {
  opacity : 1;
  transform : translate(0, 0);
}


/* ボタンデザイン */

a.btn-gradient {
  font-size: 2rem;
  color: #fff;
  border-radius: 100vh;
  background-image: -webkit-linear-gradient(110deg, #e9defa 0%, #fbfcdb 100%);
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 1% 3%;
}

a.btn-gradient span {
  color:#667c94;
}

a.btn-gradient:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

footer {
  margin-top: 20%;
}


/* トップへ戻るボタン */
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 15px;
  bottom: 25px;
  height: 80px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  transform: rotate(90deg);
  font-size: 80%;
  line-height: 1.5rem;
  color: #534741;
  padding: 0 0 0 35px;
  border-top: solid 1px;
  z-index: 2;
}

#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}



/* グローバルナビゲーション */
.gnav-list {
    display: flex;
    justify-content: center;
    margin: 5% auto;
}

.gnav-item {
    margin-right: 5%;
    color:#2073CD;
}

.gnav-item:last-child {
    color: #fcfcfc;
    border: 1px solid #2073CD;
    background-color: #2073CD;
}

.gnav-item:hover {
    background-color: #000;
    border: 1px solid #000;
    color: #fcfcfc;
}

.gnav-item:last-child:hover {
    color:#2073CD;
    border: 1px solid rgba(32, 115, 205, 0.7);
    background-color: rgba(239, 239, 239, 0.7);
}

.gnav-item a {
    margin: 30px 10px;
}

.sp-nav {
  display: none;
}



/* メインビジュアル */
.main-big-bg {
  background-image: url(../image/main-big-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 90vw;
  position: relative;
  margin-top: 5%;
  transform: rotate(180deg);
}


/* スライダー全体 */
.slider{
  position: absolute;
  bottom: 0;
  right: 0;
  top: 12%;
  overflow: hidden;
  background-color: #2073CD;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  width: 80%;
  height: 90vh;
}

/* スライダー画像 */
.slider .main-visual-img{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/*
  ①スライド画像
  表示する画像を定義
*/
.slider .main-visual-img:nth-of-type(1){
  /* animation-delay: 0s; */
  background-image: url(../image/main-visual-1.jpg);
}
.slider .main-visual-img:nth-of-type(2){
  animation-delay: 5s;
  background-image: url(../image/main-visual-2.jpg);
}
.slider .main-visual-img:nth-of-type(3){
  animation-delay: 10s;
  background-image: url(../image/main-visual-3.jpg);
}

/*
  ②アニメーション設定
  animation-durationのみ変更
*/
.slider .main-visual-img{
  animation-name: anime;
  animation-iteration-count: infinite;
  animation-duration: 15s;  /* ①で設定したanimation-delayを合計を挿入 */
}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* メインビジュアルロゴ */
.main-salon-logo {
  z-index: 2;
  position: absolute;
  top:40%;
  left: 5%;
  line-height: 1.5;
  color: #fcfcfc;
  text-shadow:
    0 2px 0 #333,
    0 3px 0 #333,
    0 4px 5px #333;
}

.cut-logo {
  width: 35%;
  height: auto;
  filter: drop-shadow(5px 5px 5px rgba(208, 199, 97, 0.6));
}

h1 {
  font-size: 5em;
  font-family: 'Poppins', sans-serif;
  text-shadow:
1px -1px 0px rgb(50, 50, 50),
2px -2px 0px rgb(50, 50, 50),
3px -3px 0px rgb(50, 50, 50),
4px -4px 0px rgb(50, 50, 50),
5px -5px 0px rgb(50, 50, 50);
}

.main-sub-title {
  font-size: 2.1875em;
  font-family: 'Shippori Mincho', serif;
}

/* 猫の足跡 */
.steps-top,
.steps-bottom {
  width: 200px;/*1フレーム分の横幅*/
  height: 200px;/*1フレーム分の縦幅*/
  background: url("../image/cat-steps.png") no-repeat;/*背景画像の読み込み*/
  animation: stepsline 3s steps(5) infinite;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数+1の値を入れる（例：4コマ+1コマ=5コマ）
    infinite→無限ループ*/
}

.steps-top {
  transform: rotate(100deg);
  margin-left: 70%;
}

.steps-bottom {
  transform: rotate(45deg);
  margin-left: 5%;
  margin-top: 5%;
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -500px 0;/*1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数から1コマ分足した横幅（今回は1フレーム100pxで制作しているので全体の400px+100px=500px⇒-500px）を指定。*/
  }
}


/*========= スクロールダウンのためのCSS ===============*/
/*=== 丸が動いてスクロールを促す ====*/
/*スクロールダウン全体の場所*/
.scrolldown2{
/*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:-350px;
left:50%;
z-index: 2;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
    position: absolute;
    left:10px;
    bottom:10px;
  /*テキストの形状*/
    color: #545353;
    font-size: 2rem;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
/*縦書き設定*/
    -ms-writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
      content: "";
/*描画位置*/
      position: absolute;
      bottom:0;
      left:-5px;
/*丸の形状*/
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#545353;
/*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
      circlemove 1.6s ease-in-out infinite,
      cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
    @keyframes circlemove{
        0%{bottom:130px;}
      100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
    @keyframes cirlemovehide{
        0%{opacity:0}
      50%{opacity:1;}
      80%{opacity:0.9;}
    100%{opacity:0;}
}

/* 線の描写 */
    .scrolldown2:after{
      content:"";
/*描画位置*/
    position: absolute;
    bottom:0;
    left:0;
/*線の形状*/
    width:1px;
    height: 150px;
    background:#545353;
}



/* メインコンテンツここから */
/* 共通部分ー各項目のコンテナ */
.container{
  position: relative;
  z-index:1;
  margin: 300px auto;
  margin-bottom: 50%;
}

.min-wrapper {
  padding: 0 10%;
}

h2 {
  font-size: 3.75em;
  margin-bottom: 10%;
}

.section-title,
.section-title-center,
.section-title-center-2 {
  font-family: 'Poppins', sans-serif;
}

.section-title-center,
.section-title-center-2 {
  text-align: center;
}

.section-title-center-2 {
  margin-top: 30%;
}

.content-title {
  font-size: 2.0625em; /* 33px */
  margin-bottom: 5%;
  font-family: 'Shippori Mincho', serif;
}

.content-txt {
  font-size: 1.25em; /* 20px */
}


/* メッセージ */
.message-bg {
  background-image: url(../image/Watercolor01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  padding: 300px 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.message-title {
  font-size: 2.0625em; /* 33px */
  font-family: 'Shippori Mincho', serif;
  margin-bottom: 5%;
}

.message-txt {
  font-size: 1.25em; /* 20px */
  margin: 5% 0;
}


/* コンセプト */
.concept-img-area {
  position: relative;
  margin: 90% auto;
}

.concept-message {
  margin-left: 5%;
}

.concept-img-1 {
  width: 45%;
  height: auto;
  position: absolute;
  top:5%;
  left: 55%;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.concept-img-2 {
  width: 33%;
  height: auto;
  position: absolute;
  bottom:-57%;
  right: 5%;
  z-index: 2;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.concept-img-3 {
  width:  60%;
  height: auto;
  position: absolute;
  top: -60%;
  left: 35%;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.concept-bg {
  background-color: #EDE7DF;
  position: absolute;
  width: 70%;
  height: 68%;
  top: 52%;
  left: 0;
}

.concept-txt {
  max-width:  95%;
  width: 53%;
  padding-top: 2%;
  position: relative;
}



/* スタッフ */
.staff-bg {
  background-color: #DCE8F0;
  position: absolute;
  width: 80%;
  height: 85%;
  top: 20%;
  right: 0;
}

.staff-message {
  position: relative;
  margin-left: 5%;
  display: flex;
}

.staff-img {
  margin-top: 10%;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.profile-box {
  margin: 10% auto;
}

h3 {
  font-size: 2.8125em;
  font-family: 'Shippori Mincho', serif;
}

.staff-profile {
  width: 85%;
  margin-top: 5%;
}

.staff-comment {
  margin-top: 5%;
  text-align: justify;
}

.staff-greeting {
  margin-left: 5%;
}

.staff-txt {
  width: 80%;
}

.staff-box {
  margin: 5% auto;
}

.member-area {
  margin: 30% 0;
}

.member-title {
  font-size: 2.0625em; /* 33px */
  text-align: center;
  font-family: 'Shippori Mincho', serif;
}

.member-flexbox {
  margin: 15%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.member-box {
  width:32%;
  margin-bottom: 7%;
}

.member-img {
  width: 80%;
  height: auto;
  margin-bottom: 10%;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
  border: 1px solid #B43636;
}

.square {
  width: 18%;
  height: 15%;
  position: absolute;
  z-index: 1;
  border: 1px solid #B43636;
  transform: rotate(8deg);
  border-radius: 5px;
  padding: 5px;
}

.member-box h3 {
  font-size: 1.5625em; /* 25px */
}

.member-box h4 {
  font-size: 0.8125em; /* 13px */
}

.member-comment {
  width: 80%;
}

.member-slider {
  display: none !important;
}

.cat-profile {
  display: flex;
}

.cat-stamp {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  margin-left: 15px;
}






/* ポイント */
.point-box-r,
.point-box-l {
  display: flex;
  position: relative;
  height: auto;
}

.point-box-l {
  flex-direction: row-reverse;
}

.point-bg-r,
.point-bg-l {
  background: #EBE6DE;
  width: 50%;
  height: auto;
  z-index: 2;
}

.point {
  margin: 7%;
}

.point-title {
  font-size: 1.375em; /* 22px */
  margin-bottom: 4%;
  font-family: 'Shippori Mincho', serif;
}

.point-img-r,
.point-img-l {
  width: 50%;
  height: auto;
  object-fit: cover;
}


.point-number-r,
.point-number-l {
  font-size: 9.375em; /*150px */
  position: absolute;
  z-index: 3;
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-style: italic;
  color: #2073CD;
  opacity: 32%;
}

.point-number-r {
  top: -14%;
  left: 3%;
}

.point-number-l {
  bottom: 35%;
  right: 3%;
}



/* メニュー */
.menu-wrapper {
  margin: 0 10%;
}

.menu-box {
  margin-bottom: 5%;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

.menu-label {
  background-color: #2073CD;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-category {
  color:#fcfcfc;
  font-size: 1.25em; /* 20px */
}

.menu-category-e {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  font-size: 2.0625em; /* 33px */
  color:#fcfcfc;
}

.menu-caution {
  margin:20px 20px;
  font-size: 0.8125em; /* 13px */
}

.menu-list {
  display: flex;
  justify-content: space-between;
  vertical-align: top;
  font-size: 1.25em; /* 20px */
  margin: 2% 20px 0px;
}

.menu-box .menu-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.menu-box .menu-list::after {
  content: "";
  display: block;
  position: absolute;
  top: 60%;
  z-index: -1;
  width: 100%;
  border-bottom: dotted 2px #93CEC5;
}

.menu-box .menu-list .menu-name,
.menu-box .menu-list .menu-price {
  display: inline-block;
  background-color: #fff;
}

.menu-box .menu-list .menu-name {
  padding-right: 10px;
}

.menu-box .menu-list .menu-price {
  padding-left: 10px;
}

.menu-price {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  justify-content: flex-end;
  margin-top: 2%;
}

.menu-name {
  margin-top: 2%;
}

.menu-comment {
  font-size: 0.8125em; /* 13px */
  margin-left: 20px;
  margin-top: 5px;
}

.yukari-1 {
  position: absolute;
  top:-8%;
  left:0%;
  width: 40%;
  height: auto;
}

.yukari-2 {
  position: absolute;
  width: 40%;
  height: auto;
  bottom:-8%;
  right: 0%;
}

.yukari-3 {
  position: absolute;
  width: 35%;
  height: auto;
  bottom:43%;
  right: 0%;
}

.tax {
  font-size:1.25em; /* 20px */;
  margin-bottom: 10%;
  text-align: center;
  display: flex;
	justify-content: center;
	align-items: center;
}

.tax::before,
.tax::after {
	content: '';
	width: 70px;
	height: 1px;
	background-color: #2073CD;
}

.tax::before {
	margin-right: 20px;
}
.tax::after {
	margin-left: 20px;
}

.menu-contact {
  color:#2073CD;
}

.menu-contact:hover {
  border-bottom: 1px solid #2073CD;
}

.flame-box {
  position: relative;
}

.flame-box img {
  position: relative;
  right: 9%;
  width: 70%;
}

.flame-txt {
  position: absolute;
  top: 40%;
  left: 0;
}


/* ヘアースタイル */
.hair-style-bg {
  background: #EBE6DE;
  width: 100%;
  height: auto;
  padding-top: 10%;
}

.hair-style-flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.hair-style-slider {
  display: none !important;
}

.hair-style-box {
  width: 40%;
  margin-bottom: 15%;
}

.hair-img {
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.hair-name {
  color: #2073CD;
  padding: 3% 0;
}


/* アクセス */
.salon-name {
  font-family: 'Poppins', sans-serif;
}

.access-table {
  text-align: left;
  width: 100%;
}

.access-img {
  width: 55%;
  height: 50%;
  box-shadow: 0px 0px 15px -12px #777777;
  border-radius: 5px;
}

.access-flexbox {
  display: flex;
  justify-content: space-between;
  vertical-align: top;
  margin-bottom: 10%;
}

.car-stamp {
  width: 35%;
}

.traffic {
  font-size: 1.25em; /* 20px */
  font-weight: bold;
}

.under-line {
  border-bottom: solid 2px #2073CD;
  padding-bottom: 2px;
}


/* コンタクト */
.contact-bg {
  background-image: url(../image/Watercolor01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  padding: 200px 0;
  width: 100%;
  height: auto;
  text-align: center;
  border-radius: 0 20% 0 0;
}

.button-txt {
  font-size: 1.75em; /* 28px */
}

.contact-txt {
  font-size: 1.25em; /* 20px */
  margin-top: 10%;
}



/* ラップトップ */
@media screen and (max-width: 1400px) {
.square {
  height: 12%;
}

/* メニュー */
.menu-category {
  font-size: 18px;
}

.menu-category-e {
  font-size: 18px;
}

.flame-box img {
  position: relative;
  right: 14%;
  width: 100%;
}
}


/* タブレット */
@media screen and (max-width: 1024px) {
    body {
        font-size: 16px;
    }

    /* メインビジュアルロゴ */
    .main-salon-logo {
        z-index: 2;
        top:55%;
        left: 4%;
        line-height: 1.3;
    }

    /* スライダー全体 */
    .slider{
        top: 12%;
        height: auto;
    }

    /* コンセプト */
    .concept-bg {
      width: 70%;
      height: 75%;
      top:45%;
    }

    .concept-img-1 {
      top:-28%;
      left: 15%;
      z-index: 2;
      width: 38%;
      height: auto;
    }

    .concept-img-2 {
      top:-28%;
    }

    .concept-img-3 {
      z-index: 2;
      top:-70%;
      left: 20%;
    }


    /* スタッフ */
    .staff-bg {
      height: 90%;
      top: 13%;
      right: 0;
    }

    .square {
      height: 10%;
    }

    .yukari-3 {
      bottom:45%;
    }


    /* ポイント */
    .point-box-l,
    .point-box-r {
      display: flex;
      flex-direction: column-reverse;
    }

    .point-bg-r,
    .point-bg-l {
      width: 100%;
      height: auto;
    }

    .point-img-r,
    .point-img-l {
      width: 100%;
    }

    .point-number-r {
      top: 55%;
      left: 5%;
    }
    
    .point-number-l {
      bottom: 8%;
      right: 5%;
    }

    /* メニュー */
    .yukari-1 {
      position: absolute;
      top:-5%;
      left:0%;
      width: 40%;
      height: auto;
    }

    .menu-category {
      font-size: 18px;
    }
    
    .menu-category-e {
      font-size: 18px;
    }

    /* アクセス */
    .car-stamp {
      position: absolute;
      bottom:15%;
      right: 5%;
    }

}


/* タブレット スマホ */
@media screen and (max-width: 820px) {
  /* メニュー */
  .yukari-1 {
    top: -3%;
  }
  .yukari-2 {
    bottom:-3%;
  }

  .menu-category {
    font-size: 15px;
  }
  
  .menu-category-e {
    font-size: 15px;
  }

}


/* タブレット スマホ */
@media screen and (max-width: 768px) {
    header {
      height: 10vh;
    }

    body {
      font-size: 90%;
      line-height: 2.2;
    }

    .wrapper {
      height: auto;
    }

    a.btn-gradient {
      font-size: 16px;
      padding: 3% 5%;
    }

    .main-big-bg {
      width: 100vw;
    }

    .slider {
      top:10%;
    }

    .main-salon-logo {
      top:75%;
      left: 5%;
      line-height: 1.3;
    }

    .cut-logo {
      transform: scale(2.2);
      margin-left: 25%;
      margin-bottom: 3%;
    }

    h3 {
      font-size: 30px;
    }

    h4 {
      font-size: 13px;
    }

    .steps-top {
      margin-top: 5%;
      margin-left: 72%;
      width: 100px;
      height: 100px;
      position: absolute;
      z-index: 2;
    }

    .steps-bottom {
      width: 100px;
      height: 100px;
      position: absolute;
      z-index: 2;
    }

    .scrolldown2{
      bottom:-250px;
      left:50%;
      z-index: 2;
      }

    
    /* メインコンテンツここから */
    /* 共通部分ー各項目のコンテナ */
    .container{
      margin:0px auto 200px;
      margin-bottom: 70%;
    }

    /* メッセージ */
    .message-bg {
      padding: 160px 0;
    }

    .message-title {
      font-size: 20px;
      line-height: 38px;
    }

    .message-txt {
      width: 85%;
      margin: 10% auto;
      font-size: 15px;
    }

    .message-txt br {
      display: none;
    }


    /* コンセプト */
    .concept-bg {
      width: 100%;
      height:30%;
      top: -60%;
      left: 5%;
      z-index: 1;
    }

    .concept-img-area {
      margin-top: 150%;
      width: 90%;
    }

    .concept-img-1 {
      top:-40%;
      left: 15%;
      z-index: 2;
      width: 38%;
      height: auto;
    }

    .concept-img-2 {
      top:-40%;
    }

    .concept-img-3 {
      z-index: 2;
      top:-90%;
      left: 25%;
    }

    .content-title {
      font-size: 20px;
      line-height: 38px;
    }

    .concept-txt{
      width: 100vw;
      font-size: 15px;
      text-align: justify;
    }


    /* スタッフ */
    .staff-bg {
      width: 90%;
      height: 50%;
      top: 10%;
      left: 0;
    }

    .staff {
      line-height: 1.9;
    }

    .staff-message {
      flex-direction: column;
    }

    .staff-img {
      width: 95%;
      height: auto;
    }

    .staff-box {
      margin: 25% auto;
    }

    .profile-box {
      margin-left: 5%;
    }

    .staff-profile {
      width: 80%;
    }

    .staff-profile li {
      font-size: 13px;
    }

    .staff-box  {
      margin-top: 25%;
      margin-bottom: 10%;
    }

    .staff-txt {
      width: 90%;
      font-size: 15px;
      text-align: justify;
    }

    .staff-comment {
      margin-top: 15%;
      font-size: 15px;
    }
    
    .member-area {
      margin: 40% 0;
    }

    .member-comment {
      width: 60vw;
      margin: 20px 0;
      place-items: center;
      font-size: 15px;
    }
    
    .member-flexbox {
      display: none;
    }
    
    .member-title {
      margin-bottom: 15%;
      font-size: 20px;
      line-height: 38px;
    }
    
    .cat-stamp {
      position: absolute;
      right: -31%;
      top:40%;
      transform: scale(0.2,0.2);
    }
    
    .cat-profile {
      vertical-align: top;
    }

    .member-img {
      margin:5% 0%;
    }

    .square {
      display: none;
    }

    .sp-member-box {
      margin-top: 20%;
    }

    
    /*==================================================
スライダーのためのcss
===================================*/
.member-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:20px auto;
  display: inherit !important;
}

.member-slider img {
  width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}

.member-slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.member-slider .slick-slide.slick-center {
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 21%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:3px;/*ドットボタンのサイズ*/
  height:3px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:rgb(236, 235, 235);/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}
/*==================================================
 スタッフメンバースライダーここまで ↑
===================================*/


/* ポイント */
.point-flexbox {
  margin-top: 10%;
  height: auto;
}

.point-box-l {
  flex-direction: column-reverse;
}

.point-bg-r,
.point-bg-l {
  padding: 9%;
  width: 100%;
  position:unset;
  text-align: justify;
}

.point-img-r,
.point-img-l {
  width: 100%;
  height: auto;
  position: unset;
}

.point-number-r {
  top:30%;
  left: 5%;
}

.point-number-l {
  top:30%;
  right: 5%;
}

.point-title {
  font-size: 20px;
  line-height: 32px;
}

.point {
  margin: 3%;
}

.point-txt {
  font-size: 15px;
}



/* メニュー */
.menu-wrapper {
  display: unset;
}

.menu-label {
  padding: 2px 15px;
}

.menu-comment {
  font-size: 13px;
  margin-left: 20px;
}

.menu-category {
  font-size: 10px;
}

.menu-category-e {
  font-size: 14px;
}

.menu-name,
.menu-price {
  font-size: 11px;
}

.menu-name {
  font-weight: bold;
}

.menu-comment {
  font-size: 10px;
  margin-left: 20px;
}

.yukari-1 {
  top:-3%;
  left:-4%;
}

.yukari-2 {
  bottom:-3%;
}

.menu-box {
  margin-bottom: 10%;
  letter-spacing: 0.05em;
}



/* ヘアースタイル */
.hair-img {
  width: 300px;
  height: auto;
  margin-bottom: 10%;
  align-items: center;
}

.sp-hair-box {
  margin: 0 auto 5%;
  text-align: left;
  width: 300px;
}

.hair-style-flexbox {
  display: none!important;
}

.hair-style-bg {
  padding-bottom: 10%;
}

.sp-hair-box p {
  font-size: 15px;
}


    /*==================================================
スライダーのためのcss
===================================*/
.hair-style-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:20px auto;
  display: inherit !important;
}

.hair-style-slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.hair-style-slider .slick-slide.slick-center {
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}
/*==================================================
ヘアスタイルスライダーここまで↑
===================================*/



/* アクセス */
.access-flexbox {
  flex-direction: column-reverse;
  margin-bottom: 30%;
  font-size: 15px;
}

.access-img {
  width: 100%;
  margin-bottom: 5%;
}

.car-stamp {
  position: absolute;
  bottom:9%;
  right: 5%;
}


/* コンタクト */
.contact-bg {
  padding: 100px 0;
}


/* スマホ版ナビゲーション */
/* ハンバーガーメニュー */
    /*　ハンバーガーボタン　*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 12px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #2073CD;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }

  .hamburger span:nth-child(1) {
    top: 10px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay     : 0.6s;
    transition-delay        : 0.6s;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    -o-transform     : rotate(45deg);
    transform        : rotate(45deg);
  }
  .hamburger.active span:nth-child(2){
    width: 0px;
    background-color:#fcfcfc;
  }
  .hamburger.active span:nth-child(1),
  .hamburger.active span:nth-child(3){
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
    background-color:#fcfcfc;
  }
  .hamburger.active span:nth-child(1){
    -webkit-transform: translateY(4px);
    -ms-transform    : translateY(4px);
    -o-transform     : translateY(4px);
    transform        : translateY(4px);
    background-color: #fcfcfc;
  }
  
  .hamburger.active span:nth-child(3){
    -webkit-transform: translateY(-16px) rotate(90deg);
    -ms-transform: translateY(-16px) rotate(90deg);
    -o-transform : translateY(-16px) rotate(90deg);
    transform    : translateY(-16px) rotate(90deg);
    background-color: #fcfcfc;
  }
  
  
  nav.sp-nav {
    position: fixed;
    z-index : 2;
    top  : 0;
    right : 0;
    color: #fcfcfc;
    background: rgb(54, 121, 209);
    text-align: center;
    transform: translateX(100%);
    transition: all .9s;
    width: 100%;
    height: 100%;
    padding-bottom: 20%;
  }
  
  nav.sp-nav ul {
    background: rgb(54, 121, 209);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
  nav.sp-nav ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #fff;
  }

  nav.sp-nav ul li:hover{
    background :#ddd;
  }
  
  nav.sp-nav ul li a {
    display: block;
    color: #fcfcfc;
    padding: 15px 0;
    text-decoration :none;
    font-size: 16px;
  }
  
  /* このクラスを、jQueryで付与・削除する */
  nav.sp-nav.active {
    transform: translateX(0%);
  }
 
/* PCナビゲーションを表示しない */
    .pc-nav {
        display: none;
}

.sp-logo-bg {
    background: #000;
    height: 120px;
    width: 120px;
    margin: 10%;

}

.cut-logo {
    margin-top: 20px;
    width: 70px;
    height: auto;
}

.sp-salon-name {
    font-size: 12px;
}

.sp-nav {
  display: initial;
}

}




/* スマホ  iPhone Android */
@media screen and (max-width: 640px) {
  /* メインビジュアル */
  .main-big-bg {
    height: 60vh;
    width: 100vw;
  }

  /* メインビジュアルロゴ */
  .main-salon-logo {
    top:46%;
    z-index: 3;
  }

  .steps-top {
    margin-left: 60%;
  }

  /* スライダー全体 */
  .slider {
    top:10vh;
    height: 50vh;
    width: 100%;
    z-index: 1;
  }

  .cut-logo {
    transform: scale(2,2);
    padding-bottom: 3%;
    margin-left: 28%;
  }

  .sp-cut-logo {
    width: 90%;
    height: auto;
    margin-top: 10%;
  }

  .scrolldown2{
    bottom:10%;
  }

  .scrolldown2:before {
    left:-3px;
    width: 7px;
    height: 7px;
  }

  .scrolldown2:after {
    width:1px;
    height: 80px;
  }

  /*下からの距離が変化して丸の全体が上から下に動く*/
  @keyframes circlemove{
    0%{bottom:70px;}
  100%{bottom:-2px;}
  }

  .scrolldown2 span {
    font-size: 1rem;
  }


  /* コンセプト */
  .concept-bg {
    width: 95%;
    height: 25%;
    top:-35%;
    left:10%;
  }

  .concept-img-1 {
    top:-24%;
  }

  .concept-img-2 {
    top:-24%;
  }

  .concept-img-3 {
    top:-58%;
  }


  /* スタッフ */
  .square {
    display: none;
  }

  .cat-stamp {
    top:40%;
    right: -35%;
  }

  .staff-bg {
    height: 40%;
  }


  /* ポイント */
  .point-number-r,
  .point-number-l {
    top:50%;
  }

  /* メニュー */
  .yukari-3 {
    bottom: 46%;
  }

  .menu-caution {
    font-weight: bolder;
    font-size: 10px;
  }

  .menu-comment {
    font-size: 10px;
    margin-left: 20px;
    font-weight: bolder;
  }

  .tax::before,
  .tax::after {
	  content: '';
	  width: 55px;
	  height: 1px;
	  background-color: #2073CD;
  }

  .tax::before {
	  margin-right: 10px;
  }
  .tax::after {
	  margin-left: 10px;
  }

  /* アクセス */
  .car-stamp {
    top:70%;
  }
}


/* スマホ */
@media screen and (max-width: 500px) {
  /* メインビジュアル */
  .main-big-bg {
    height: 55vh;
    width: 100vw;
  }

  /* スライダー全体 */
    .slider {
      top:10vh;
      height: 43vh;
      width: 100%;
      z-index: 1;
    }

    .main-salon-logo {
      top:40%;
    }

    .cut-logo {
      margin-left: 25%;
    }

    .scrolldown2{
      bottom:18%;
    }

  /* コンセプト */
  .concept-img-3 {
      top:-48%;
  }

  /* スタッフ */
  .cat-stamp {
    top:33%;
  }

  .staff-bg {
    height: 35%;
  }

  /* ポイント */
  .point-number-l,
  .point-number-r {
    top:35%;
  }

  /* アクセス */
  .car-stamp {
    top:62%;
  }
}


/* スマホ */
@media screen and (max-width: 430px) {
  /* メインビジュアル */
  .main-big-bg {
    height: 51vh;
    width: 100vw;
  }

  /* スライダー全体 */
  .slider {
    top:10vh;
    height: 38vh;
    width: 100%;
    z-index: 1;
  }

  .main-salon-logo {
    top:35%;
  }

  .scrolldown2{
    bottom:22%;
  }

  /* スタッフ */
  .staff-bg {
    height: 30%;
    top:13%;
  }

  /* メニュー */
  .flame-box img {
    position: relative;
    right: 10%;
    width: 100%;
  }

  .flame-txt {
    position: absolute;
    top: 31%;
    left: 0;
    padding: 5px 0;
  }
}

/* スマホ */
@media screen and (max-width: 390px) {
  /* メニュー */
  .yukari-3 {
    bottom:47%;
  }

  .flame-box img {
    right: 9%;
  }

  .flame-txt {
    letter-spacing: normal;
  }
}


/* スマホ */
@media screen and (max-width: 375px) {

  /* メインビジュアル */
      .main-big-bg {
        height: 48vh;
        width: 100vw;
      }

  /* スライダー全体 */
      .slider {
        top:10vh;
        height: 37vh;
        width: 100%;
        z-index: 1;
  }   

  /* メインビジュアルロゴ */
      .main-salon-logo {
        top:32%;
        left: 5%;
        line-height: 1.3;
      }

      .cut-logo {
        transform: scale(1.5);
        margin-left: 27%;
      }
  
      .main-sub-title {
        font-size: 2em;
      }

      nav.sp-nav ul li a {
        padding: 10px 0;
      }

      .scrolldown2{
        bottom:25%;
      }

      .steps-top {
        margin-top: 5%;
        margin-left: 62%;
      }


  /* メッセージ */
  .message-title {
    font-size: 18px;
    margin-bottom: 5%;
  }

  .message-txt  {
    width: 85%;
    margin: 10% auto;
    font-size: 13px;
  }

  .message-txt br {
    display: none;
  }


  /* コンセプト */
  .concept-bg {
    width: 95%;
    height: 20%;
    top:-25%;
    left:10%;
  }

  .concept-img-1 {
    top:-20%;
    left: 15%;
    z-index: 2;
  }

  .concept-img-2 {
    top:-20%;
  }

  .concept-img-3 {
    z-index: 2;
    top:-40%;
    left: 25%;
  }

  .content-title {
    font-size: 18px;
  }

  .concept-txt {
    font-size: 13px;
  }

  
  /* スタッフ */
  .staff-bg {
    height: 38%;
    top: 7%;
    right: 0;
  }

  .member-title {
    font-size: 18px;
  }

  .staff-profile ul li{
    font-size: 11px;
  }

  .staff-comment {
    font-size: 13px;
  }

  .staff-txt {
    font-size: 13px;
  }

  .sp-member-box h3 {
    font-size: 20px;
  }

  .sp-member-box h4 {
    font-size: 11px;
  }

  .cat-stamp {
    position: absolute;
    right: -30%;
    top:30%;
    transform: scale(0.2,0.2);
  }

  
  /* ポイント */
  .point-number-r,
  .point-number-l {
    top:35%;
  }

  .point-title {
    font-size: 18px;
  }

  .point-txt {
    font-size: 13px;
  }
  
  
  /* メニュー */
.menu-label {
  margin: 5px;
  font-size: 0.75em; /*12px*/
  padding: 2px 10px;
}

.yukari-1 {
  top:-3%;
  left:-4%;
}

.yukari-2 {
  bottom:-3%;
}

.yukari-3 {
  bottom: 47%;
}

.menu-category-e {
  font-size: 13px;
}

.menu-category {
  font-size: 8px;
}

.menu-list {
  font-size: 13px;
}


/* ヘアースタイル */
.sp-hair-box {
  max-width: 90%;
}

.hair-name {
  font-size: 20px;
}

.sp-hair-box p {
  font-size: 13px;
}


/* アクセス */
.car-stamp {
  position: absolute;
  bottom:23%;
  right: 5%;
}

.access-flexbox {
  font-size: 13px;
}

/* コンタクト */
a.btn-gradient {
  font-size: 13px;
  padding: 3% 5%;
}


}

/* スマホ */
@media screen and (max-width: 320px) {

  /* メインビジュアル */
      .main-big-bg {
        height: 45vh;
        width: 100vw;
      }

  /* スライダー全体 */
      .slider {
        top:10vh;
        height: 33vh;
        width: 100%;
        z-index: 1;
  }   

  /* メインビジュアルロゴ */
      .main-salon-logo {
        top:30%;
        left: 5%;
        line-height: 1.3;
      }

      .cut-logo {
        transform: scale(1.5);
        margin-left: 27%;
      }
  
      .main-sub-title {
        font-size: 1.8em;
      }

      .scrolldown2{
        bottom:30%;
      }

      /* コンセプト */
      .concept-bg {
        height: 15%;
        top:-33%;
      }

      .concept-img-1 {
        top:-24%;
      }
    
      .concept-img-2 {
        top:-24%;
      }
    
      .concept-img-3 {
        top:-43%;
      }

      /* スタッフ */
      .staff-bg {
        height: 33%;
      }

      .cat-stamp {
        top:25%;
      }

      /* メニュー */
      .flame-txt {
        letter-spacing: normal;
        line-height: 1.3;
      }

}