@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/* reset css
==============================================================*/
body,
h1, h2, h3, h4, h5, h6,
p, ol, ul, dl, dt, dd, form,
figure {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, YuGothicM, Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

table, td, th, tr, thead, tbody {
  border: none;
}

table th {
  text-align: left;
  font-weight: normal;
}

table {
  border-collapse: collapse;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: #103486;
}

a:hover{
  opacity: 0.5;
  transition : 0.5s;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
}

textarea {
  font-size: 1em;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select {
  font-size: 1em;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
select::-ms-expand {
  display: none;
}

header, footer, section, nav, main,
figure, figcaption, time, small {
  display: block;
}

input[type=submit], input[type=image] {
  border: none;
  padding: 0;
}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password] {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}

button {
  border: none;
  margin: 0;
  cursor: pointer;
  outline: none;
}

input[type=submit], input[type=image], input[type=reset] {
  cursor: pointer;
  font-family: 游ゴシック Medium, YuGothic, YuGothicM, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;
}

address {
  font-style: normal;
}

/*=====================================*/
/*=ページサイズ全体設定=*/
html{
  scroll-behavior: smooth;
  font-size: 16px;
  color: #333;
}
.wrap90{
  width: 90%;
  margin: auto;
}
.wrap80{
  width: 80%;
  margin: auto;
}
/* flex指定 */
.flexbox{
    display: flex;
  flex-wrap:wrap;
}
.flexbox_right{
	justify-content: flex-end;
}
.flexbox_reverse{
	flex-direction: row-reverse;
}
.flexbox_between{
	justify-content: space-between;
}
.flexbox_around{
	justify-content: space-around;
}
.flexbox_aligncenter{
  align-items: center;
}
.flexbox_alignend{
  align-items: flex-end;
}
.flexbox_wrap{
	flex-wrap: wrap;
}
.flexbox_flex1{
  flex: 1;
}
/*=フォント設定=*/
.font_zenMaru{
	font-family: "Zen Maru Gothic";
  letter-spacing: 0.1em;
}
.font_optima{
	font-family: Optima,"Noto Sans JP";
}

.red{
  color: #C60101;
}
.bold{
    font-weight: bold;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.font_12,.small{
  font-size: 0.75rem !important;
}
.font_14{
  font-size: 0.875rem;
}
.font_18{
  font-size: 1.125rem;
}

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

/* ヘッダー */
.wrap_kv{
  background-image: url(./img/img_kv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  height: 75vh;
  position: relative;
}
.wrap_kv::after{
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-image: url(./img/back_kvbottom.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  position: absolute;
  bottom: -2px;
}
.wrap_header{
  height: 25vh;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.logo_kv{
  width: 216px;
  margin-bottom: 20px;
}
.logo_kv img{
  width: 100%;
  height: auto;
}
.logo_kv + p{
  margin-bottom: 20px;
}

.nav_sns{
  gap: 20px 20px;
}
.nav_sns li{
  margin: 0;
  line-height: 1em;
}
.nav_sns a{
  width: 35px;
  height: 35px;
  display: block;
  font-size: 35px;
}

/* トップメッセージ */
.wrap_topMessage,
.wrap_access{
  margin-top: 190px;
  position: relative;
}
.wrap_topMessage::before,
.wrap_access::before{
  content: "";
  width: 0.5px;
  height: 80px;
  display: block;
  background-color: #C9C9C9;
  position: absolute;
  top:-120px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.cont_topimg{
  width: 80%;
  height: 260px;
  background-image: url(./img/img_top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 130px;
}
.cont_topimg::after{
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  border: 1px solid #C9C9C9;
  border-left: none;
  display: block;
  right: -20px;
  bottom: -20px;
  position: absolute;
  z-index:-1;
}
.head_topMess{
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 70px;
  line-height: 1.8em;
}
.cont_topMessage p{
  text-align: center;
  line-height: 2.2em;
}
.cont_topMessage p+p{
  margin-top: 30px;
}



/* 予約案内パーツ */
.wrap_reserv{
  max-width: 1110px;
  margin: 0 auto;
}
.head_reserv{
  background-color: #464444;
  color: #fff;
  text-align: center;
  width: 380px;
  padding: 10px 0;
  margin: 0 auto 30px auto;
  position: relative;
}
.head_reserv:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #464444 transparent transparent transparent;
  border-width: 10px 10px 0 10px;
}
.wrap_reservbox{
  justify-content: space-between;
  gap: 30px 2%;
}
.cont_reservbox{
  width : 32% ;
  background-color: #F5F5F5;
  flex-direction: column;
  justify-content:center;
  padding: 50px 20px;
  box-sizing: border-box;
}
.head_shopname{
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.wrap_topMessage .wrap_reserv{
  margin-top: 90px;
}

/* ホットペッパーバナー */
.link_bnr{
  width: 150px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
.link_bnr img{
  width: 100%;
  height: auto;
}

/* 注意ボタン */
.btn_note a{
  border: 1px solid #FD8A68;
  box-sizing: border-box;
  line-height: 1.5em;
  border-radius: 60px;
  width: 90%;
  padding: 15px 20px;
  display: block;
  margin: 40px auto 0 auto;
  letter-spacing: 0.05em;
  text-align: center;
  color: #772929;
}

/* アクセス */
.wrap_access{
  margin-top: 275px;
}
.head_sec{
  font-size: 70px;
  text-align: center;
  color: #666;
  margin-bottom: 110px;
}
.wrap_shopbox{
  border: 1px solid #C9C9C9;
  box-sizing: border-box;
}
.wrap_shopbox + .wrap_shopbox{
  margin-top: 80px;
}

/* ショップ情報 */
.wrap_shopbox{
  gap: 20px 2%;
}
.img_shop{
  width: 40%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img_shop_01{
  background-image: url(./img/img_shop01.jpg);
}
.img_shop_02{
  background-image: url(./img/img_shop02.jpg);
}
.img_shop_03{
  background-image: url(./img/img_shop03.jpg);
}

.cont_shopbox{
  box-sizing: border-box;
  padding: 50px 30px;
  width: 58%;
}
.cont_shopbox p{
  margin-left: 30px;
  line-height: 1.8em;
}
.wrap_shopbox .head_shopname{
  text-align: left;
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: 1px solid #C9C9C9;
  padding-bottom: 16px;
}

.wrap_guidance{
  background-color: #F5F5F5;
  padding: 14px;
  box-sizing: border-box;
  justify-content:center;
  align-items: center;
  gap: 10px 30px ;
  margin-top: 30px;
}
.wrap_guidance p{
  margin-left: 0;
}
.about_shop{
  padding-left: 30px;
  margin-bottom: 40px;
}
.shop_address,
.shop_tel{
  position: relative;
}
.shop_address::before,
.shop_tel::before{
  font: var(--fa-font-solid);
  position: absolute;
  top: 5px;
  left: -26px;
  /* top: 50%;
  transform: translateY(-50%); */
  color: #666;
}
.shop_address::before{
  content: "\f3c5";
}
.shop_tel::before{
  content: "\f095";
}
.shop_tel{
  margin-top: 10px;
}
.shop_address{
  gap: 10px 10px;
  justify-content:space-between
}
.btn_Gmap a{
  color: #103486;
  font-weight: bold;
  font-size: 0.75rem !important;
  display: block;
  padding: 5px 10px;
  border: 1px solid #7E94C6;
  border-radius: 30px;
}
.shop_parent{
  max-width: 840px;
  margin: 0 auto;
}
.shop_parent .cont_shopbox{
  width: 100%;
  padding: 50px 120px;
}
.wrap_shopbox + .wrap_guidance{
  margin-top: 80px;
  margin-bottom: 260px;
}

/* イメージ写真 */
.image_nail_01,
.image_nail_02,
.image_nail_03{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.image_nail_01::after,
.image_nail_02::after,
.image_nail_03::after{
  content: "";
  height: 100%;
  border: 1px solid #C9C9C9;
  display: block;
  bottom: -20px;
  position: absolute;
  z-index:-1;
}
.image_nail_01::after{
  width: calc(100% + 20px);
  right: -20px;
  border-left: none;
}
.image_nail_02::after,
.image_nail_03::after{
  width: calc(100% + 20px);
  left: -22px;
  border-right: none;
}

.image_nail_01{
  width: 30%;
  height: 575px;
  background-image: url(./img/back_nail_img_01.jpg);

}
.image_nail_02{
  width: 55%;
  height: 335px;
  background-image: url(./img/back_nail_img_02.jpg);
  top: -50px;
}
.image_nail_03{
  width: 40%;
  height: 477px;
  background-image: url(./img/back_nail_img_03.jpg);
  top: -160px;
}
.wrap_imgnail{
  margin-bottom: 85px;
}
.wrap_imgnail .flexbox{
  justify-content:space-between;
}
.wrap_imgnail .flexbox + .flexbox{
  justify-content: flex-end;
}

/* 18歳未満へのご注意 */
.wrap_under18{
  max-width: 1000px;
  margin: 140px auto;
  box-sizing: border-box;
  border: 1px solid #C9C9C9;
  padding: 75px 80px;
}
.heah_under18{
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 45px;
}
p + .heah_under18{
  margin-top: 80px;
}
.wrap_consent{
  margin-top: 60px;
  justify-content: center;
  gap: 20px 20px;
}
.wrap_consent .btn_Gmap a{
  font-size: 1rem !important;
  padding: 5px 26px;
}

/* フッター */
.wrap_footer{
  background-color: #F5F5F5;
  padding-top: 70px;
  padding-bottom: 160px;
  text-align: center;
}
.wrap_footer .logo_kv{
  margin: 0 auto 90px auto;
  position: relative;
}
.wrap_footer .logo_kv::before{
  content: "";
  width: 0.5px;
  height: 40px;
  display: block;
  background-color: #A3A3A3;
  position: absolute;
  bottom: -85px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.wrap_footer .nav_sns{
  justify-content: center;
  margin-bottom: 30px;
}
.copyright{
  margin-top: 70px;
}

.wrap_guidance .nav_sns a,
.wrap_footer .nav_sns a{
  color: #333 !important;
}

/* フェードイン */
.scroll-space {
  box-sizing: border-box;
  padding-top: 300px;
  height: 1600px;
  color: #fff;
  overflow: hidden;
}
.scroll-space .blue {
  background: #77bbcf;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .pink {
  background: #ffb4b4;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .yellow {
  background: #f8913c;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .green {
  background: #26aa5a;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
}
.fadein.fadein-left {
  transform: translate(-30px, 0);
}
.fadein.fadein-right {
  transform: translate(30px, 0);
}
.fadein.fadein-up {
  transform: translate(0, -30px);
}
.fadein.fadein-bottom {
  transform: translate(0, 30px);
}
.fadein.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}


/*=====================================*/
.tab_clear,
.sp_clear{
  display: none;
}

@media (min-width: 1330px){
 /* 画面サイズが1330px以上の場合の設定 */
  .wrap90{
    max-width: 1200px;
  }
}

@media screen and (min-width:310px) and ( max-width:1200px) {
  .wrap_reserv{
    width: 90%;
  }
}

@media screen and (min-width:310px) and ( max-width:1115px) {
  .wrap_under18{
    width: 90%;
  }
}

@media screen and (min-width:310px) and ( max-width:770px) {
  .tab_clear{
    display: block;
  }
	/* タブレットサイズ */
  .wrap_shopbox{
    flex-direction: column;
  }
  .img_shop{
    width: 100%;
    height: 400px;
  }
  .cont_shopbox{
    width: 100%;
  }
  .shop_parent .cont_shopbox {
    width: 100%;
    padding: 50px 30px;
  }
  .wrap_under18 {
    padding: 75px 40px;
  }
  .cont_reservbox {
    width: 48%;
  }

  /* nailイメージ */
  .wrap_imgnail .flexbox:first-child{
    flex-direction:column-reverse;
  }
  .image_nail_01 {
    width: 50%;
    height: 500px;
  }
  .image_nail_02 {
    width: 85%;
    right: -15%;
  }
  .image_nail_03 {
    height: 317px;
    top: -220px;
  }
}

@media screen and (min-width:310px) and ( max-width:666px) {
	/* スマホサイズ */
  .sp_clear{
    display: block;
  }
  .cont_reservbox {
    width: 100%;
  }
  .wrap80 {
    width: 90%;
  }
  .btn_note a{
    width: 100%;
  }
  .image_nail_01 {
    width: 44%;
    height: 360px;
  }
  .image_nail_02 {
    width: 85%;
    right: -15%;
    height: 185px;
  }
  .image_nail_03 {
    height: 217px;
    top: -140px;
  }
  .head_reserv{
    width: 90%;
  }
  .nav_sns {
    gap: 20px 10px;
  }
  .head_topMess {
    font-size: 1.3rem;
  }
  .cont_shopbox {
    padding: 15px 15px;
  }

}