.container {
  max-width: 1336px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (width <= 1024px) {
  .container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (width <= 768px) {
  .container {
    max-width: 684px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (width <= 690px) {
  .container {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
  }
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media (width <= 690px) {
  html {
    font-size: 41.67%;
  }
}
@media (width <= 768px) {
  html {
    font-size: 55%;
  }
}

body {
  color: #111111;
}

h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3.2rem;
  line-height: 1.36;
}
@media (width <= 690px) {
  h2 {
    font-size: 18px;
  }
}

h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1.36;
}
@media (width <= 690px) {
  h3 {
    font-size: 16px;
  }
}

a:hover {
  opacity: 0.5;
}

.header {
  z-index: 999;
  width: 100vw;
  height: 7.2rem;
}
@media (width <= 1024px) {
  .header {
    position: fixed;
  }
}
.header .container {
  height: 100%;
  display: flex;
  align-items: center;
}
@media (width <= 1024px) {
  .header .container {
    max-width: 900px;
  }
}
@media (width <= 768px) {
  .header .container {
    max-width: 700px;
  }
}
@media (width <= 690px) {
  .header .container {
    max-width: 330px;
  }
}
.header .container .logo_h1 {
  width: 14rem;
  height: auto;
}
.header .container .logo_h1 a {
  display: inline-block;
  width: 100%;
}
.header .container .logo_h1 a .logo_img {
  width: 100%;
  height: auto;
}
.header .container .nav_header {
  display: flex;
  align-items: center;
  width: 100%;
}
@media (width <= 768px) {
  .header .container .nav_header {
    align-items: end;
    flex-direction: column;
  }
}
.header .container .nav_header .nav_list {
  display: flex;
  align-items: center;
}
@media (width <= 768px) {
  .header .container .nav_header .nav_list {
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.header .container .nav_header .nav_list .nav_items a {
  display: block;
  width: 100%;
  height: 100%;
}
.header .container .nav_header .nav_list li {
  margin-left: 3.2rem;
}

.nav_header .reserve_btn {
  display: block;
  width: 88px;
  height: auto;
  padding: 7.5px 14px;
  text-align: center;
  position: relative;
  border: 1px solid #111;
}
.nav_header .reserve_btn span {
  display: block;
}
.nav_header .reserve_btn::after {
  content: "";
  display: none;
}
.nav_header .reserve_btn {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.nav_header .reserve_btn .btn_eg {
  font-size: 1.6rem;
}
.nav_header .reserve_btn .btn_jp {
  font-size: 0.7rem;
}

.burger:hover {
  opacity: 0.5;
}

.burger {
  z-index: 999;
  position: fixed;
  top: 16px;
  right: 52px;
  width: 4rem;
  height: 4rem;
  background: url(../img/burgericon.svg) no-repeat center/contain;
  background-size: 2.4rem;
  cursor: pointer;
  border-radius: 4px;
  background-color: #fff;
}
@media (width <= 1024px) {
  .burger {
    position: static;
    margin-left: auto;
  }
}

.burger.is-active {
  z-index: 10000000;
  width: 4rem;
  height: 4rem;
  background: url(../img/closeicon.svg) no-repeat center/contain;
  background-size: 2.4rem;
  cursor: pointer;
  border-radius: 4px;
  background-color: #fff;
}
@media (width <= 690px) {
  .burger.is-active {
    width: 3.5rem;
    height: 3.5rem;
  }
}

#burger_menu {
  z-index: 9999;
}
@media (width <= 768px) {
  #burger_menu {
    display: none;
  }
  #burger_menu li {
    margin: 0;
  }
}

#burger_menu.is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F6F6F1;
}
#burger_menu.is-active li {
  width: 100%;
  margin-top: 2.4rem;
}
#burger_menu.is-active li a {
  padding: 1.8rem 0 1.6rem 1.6rem;
  text-align: center;
}
#burger_menu.is-active li .reserve_btn {
  border: 0px;
}
#burger_menu.is-active li .reserve_btn .btn_jp {
  display: none;
}

.nav_header li {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

.header {
  background-color: #ffffff;
}

.header .logo_h1:hover,
.header .nav_items_link:hover {
  opacity: 0.5;
}

.fv {
  width: 100%;
  height: 75rem;
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  animation: image-switch-animation 20s infinite;
}

.src1 {
  background: url(../img/hairdresser&customer.jpg) no-repeat center/cover;
}

.src2 {
  background: url(../img/hairsalon.jpg) no-repeat center/cover;
}
@media (width <= 690px) {
  .src2 {
    background-position: 70%;
  }
}

.src3 {
  background: url(../img/hairsalonkobayas.jpg) no-repeat center/cover;
}
@media (width <= 690px) {
  .src3 {
    background-position: 5%;
  }
}

.src4 {
  background: url(../img/haircolor.jpg) no-repeat center/cover;
}

@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.image:nth-of-type(1) {
  animation-delay: 0s;
}

.image:nth-of-type(2) {
  animation-delay: 5s;
}

.image:nth-of-type(3) {
  animation-delay: 10s;
}

.image:nth-of-type(4) {
  animation-delay: 15s;
}

.concept {
  margin-top: 4.8rem;
  padding-bottom: 22rem;
}
@media (width <= 690px) {
  .concept {
    margin-top: 24px;
  }
}
.concept .container {
  position: relative;
  max-width: 1152px;
}
@media (width <= 1024px) {
  .concept .container {
    max-width: 800px;
  }
}
@media (width <= 690px) {
  .concept .container {
    max-width: 331px;
  }
}
.concept .container .imgflex {
  display: flex;
}
.concept .container .imgflex .img1text {
  margin-top: 6.9rem;
  margin-left: 4.6rem;
  width: 34.9rem;
}
@media (width <= 1024px) {
  .concept .container .imgflex .img1text {
    margin-top: 24px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img1text {
    margin-top: 15px;
    margin-left: 18px;
    width: 130px;
  }
}
.concept .container .imgflex .img1text .concepttext1 {
  margin-top: 5.4rem;
}
@media (width <= 1024px) {
  .concept .container .imgflex .img1text .concepttext1 {
    margin-top: 24px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img1text .concepttext1 {
    margin-top: 18px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img1text .pc_br {
    display: none;
  }
}
.concept .container .imgflex .img2text {
  margin-top: 9.2rem;
  margin-right: 1.8rem;
  margin-left: 6.6rem;
  width: 39.9rem;
}
@media (width <= 1024px) {
  .concept .container .imgflex .img2text {
    width: 300px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img2text {
    margin-top: 32px;
    margin-right: 24px;
    margin-left: 0;
    width: 111px;
  }
}
.concept .container .imgflex .img2 {
  position: absolute;
  top: 23.4rem;
  left: 48.3rem;
}
@media (width <= 1024px) {
  .concept .container .imgflex .img2 {
    top: 168px;
    left: 400px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img2 {
    top: 160px;
    left: 150px;
  }
}
.concept .container .imgflex .img3text {
  margin-top: 6.9rem;
  margin-left: 20.9rem;
  width: 48rem;
  display: inline-block;
}
@media (width <= 768px) {
  .concept .container .imgflex .img3text {
    width: 240px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img3text {
    margin-top: 16px;
    margin-left: 28px;
  }
}
.concept .container .imgflex .img3 {
  margin-top: 10.4rem;
  margin-left: 16.3rem;
  position: relative;
}
@media (width <= 1024px) {
  .concept .container .imgflex .img3 {
    margin-top: 72px;
    margin-left: 66px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img3 {
    margin-top: 46px;
    margin-left: 0;
  }
}
.concept .container .imgflex .img4 {
  position: absolute;
  top: 17.1rem;
  left: 41.3rem;
}
@media (width <= 768px) {
  .concept .container .imgflex .img4 {
    top: 200px;
    left: 300px;
  }
}
@media (width <= 690px) {
  .concept .container .imgflex .img4 {
    top: 160px;
    left: 151px;
  }
}

@media (width <= 1024px) {
  .img1 img {
    width: 366px;
    height: 224px;
  }
}
@media (width <= 690px) {
  .img1 img {
    width: 183px;
    height: 112px;
  }
}

@media (width <= 1024px) {
  .img2 img {
    width: 288px;
    height: 180px;
  }
}
@media (width <= 690px) {
  .img2 img {
    width: 172px;
    height: 108px;
  }
}

@media (width <= 1024px) {
  .img3_image {
    width: 222px;
    height: 320px;
  }
}
@media (width <= 690px) {
  .img3_image {
    width: 111px;
    height: 180px;
  }
}

@media (width <= 1024px) {
  .img4 {
    width: 320px;
    height: 268px;
  }
}
@media (width <= 690px) {
  .img4 {
    width: 180px;
    height: 134px;
  }
}

.imgflexml {
  margin-left: 6.6rem;
}
@media (width <= 690px) {
  .imgflexml {
    margin: 0 auto;
  }
}

p {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.44;
}
@media (width <= 690px) {
  p {
    font-size: 14px;
    line-height: 1.2;
  }
}

.instagram {
  background-color: #F6F6F1;
  margin-top: 18rem;
  padding: 28.4rem 0 10.4rem;
}
@media (width <= 690px) {
  .instagram {
    margin-top: 50px;
    padding: 108px 0 54px;
  }
}
.instagram .container {
  position: relative;
}
.instagram .container .shopimg {
  position: absolute;
  top: -46.4rem;
  left: 50%;
  translate: -50%;
}
@media (width <= 1024px) {
  .instagram .container .shopimg {
    top: -380px;
  }
}
@media (width <= 690px) {
  .instagram .container .shopimg {
    top: -158px;
  }
}
@media (width <= 1024px) {
  .instagram .container .shopimg img {
    width: 662px;
    height: 208px;
  }
}
@media (width <= 690px) {
  .instagram .container .shopimg img {
    width: 331px;
    height: 104px;
  }
}

.instagram_container {
  max-width: 1009px;
  width: 100%;
  margin: 0 auto;
}
@media (width <= 1024px) {
  .instagram_container {
    max-width: 800px;
  }
}
.instagram_container .instagram_flex_boxes {
  margin-top: 4.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 5.4rem;
}
@media (width <= 1024px) {
  .instagram_container .instagram_flex_boxes {
    justify-content: center;
  }
}
@media (width <= 690px) {
  .instagram_container .instagram_flex_boxes {
    gap: 24px;
  }
}

.view_more_btn {
  display: block;
  margin-top: 4rem;
  margin-left: auto;
  width: 18rem;
  padding: 1rem 0;
  text-align: center;
  background-color: #B8DAE6;
  position: relative;
}
@media (width <= 690px) {
  .view_more_btn {
    margin-top: 24px;
  }
}

.view_more_btn::after {
  content: "";
  display: inline-block;
  background: url(../img/right_arrow.svg) no-repeat center/cover;
  width: 0.5em;
  height: 0.5em;
  position: absolute;
  top: 50%;
  margin-top: -0.25em;
  margin-left: 18px;
}

.view_more_btn {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
}

.news {
  padding: 7.2rem 0;
  background-color: #F6F6F1;
}
@media (width <= 690px) {
  .news {
    padding: 0 0 54px;
  }
}
.news .container {
  max-width: 1072px;
}
@media (width <= 1024px) {
  .news .container {
    max-width: 900px;
  }
}
@media (width <= 768px) {
  .news .container {
    max-width: 720px;
  }
}
@media (width <= 690px) {
  .news .container {
    max-width: 300px;
  }
}
.news .container .news_flex_boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  border: 3.2rem solid #B8DAE6;
  background-color: #ffffff;
}
@media (width <= 690px) {
  .news .container .news_flex_boxes {
    display: block;
    padding: 16px 22px 32px;
    border: 16px solid #B8DAE6;
  }
}
.news .container .news_flex_boxes h2 {
  margin-right: 10.4rem;
}
@media (width <= 768px) {
  .news .container .news_flex_boxes h2 {
    margin-right: 54px;
  }
}
@media (width <= 690px) {
  .news .container .news_flex_boxes h2 {
    margin-right: 0;
    margin-bottom: 2px;
    text-align: center;
  }
}

.news_link {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #565656;
  padding: 1rem 2.4rem;
  margin-top: 1.8rem;
}
@media (width <= 690px) {
  .news_link {
    padding: 16px;
    margin-top: 0;
  }
}
.news_link .news_list_text {
  margin-left: 2.4rem;
}

.news_link.mt0 {
  margin-top: 0;
}

.news_list_items {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
}
@media (width <= 690px) {
  .news_list_items {
    font-size: 14px;
  }
}

.menu {
  background: url(../img/marblebg.png) no-repeat center/cover;
  padding: 10.4rem 34rem;
}
@media (width <= 1024px) {
  .menu {
    padding: 72px 104px;
  }
}
@media (width <= 690px) {
  .menu {
    padding: 54px 37.5px;
  }
}
.menu .menu_boxes {
  margin-top: 5.4rem;
}
@media (width <= 690px) {
  .menu .menu_boxes {
    margin-top: 32px;
  }
}
.menu .menu_boxes .menu_flex_boxes {
  display: flex;
  margin-top: 5.4rem;
}
@media (width <= 690px) {
  .menu .menu_boxes .menu_flex_boxes {
    display: block;
    margin-top: 32px;
  }
}
.menu .menu_boxes .menu_flex_boxes h3 {
  width: 24rem;
  border-top: 3px solid #565656;
  margin-right: 5.4rem;
  padding: 1rem 2.4rem;
}
.menu .menu_boxes .menu_flex_boxes .menu_list_boxes {
  width: 46.3rem;
  display: flex;
  justify-content: space-between;
}
@media (width <= 690px) {
  .menu .menu_boxes .menu_flex_boxes .menu_list_boxes {
    width: 300px;
    padding-top: 18px;
    padding-left: 24px;
  }
}
.menu .menu_boxes .menu_flex_boxes .menu_list_boxes p {
  margin-bottom: 2.4rem;
}
.menu .menu_boxes .menu_flex_boxes .menu_list_boxes .menu_list_price {
  text-align: right;
}

.menu_attention {
  margin-top: 0;
  text-align: right;
}

.menu .view_more_btn {
  margin-top: 3.2rem;
}

.menu_list_items p {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
}
@media (width <= 690px) {
  .menu_list_items p {
    font-size: 16px;
  }
}

.menu_attention {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
}

.reserve {
  padding: 10.4rem 19.9rem 10.4rem 28rem;
}
@media (width <= 1024px) {
  .reserve {
    padding: 82px 104px 82px;
  }
}
@media (width <= 768px) {
  .reserve {
    padding: 82px 104px 82px;
  }
}
@media (width <= 690px) {
  .reserve {
    padding: 54px 37.5px;
  }
}
.reserve h2 {
  text-align: center;
}
.reserve .reserve_flexboxes {
  display: flex;
  gap: 18rem;
  margin-top: 6.4rem;
}
@media (width <= 1024px) {
  .reserve .reserve_flexboxes {
    flex-direction: column-reverse;
    gap: 80px;
    margin-top: 42px;
  }
}
@media (width <= 690px) {
  .reserve .reserve_flexboxes {
    gap: 32px;
    margin-top: 32px;
  }
}
.reserve .reserve_flexboxes .reserve_time {
  width: 28rem;
}
.reserve .reserve_flexboxes .reserve_time .open_time,
.reserve .reserve_flexboxes .reserve_time .close_time {
  width: 28rem;
  margin-bottom: 3.2rem;
}
.reserve .reserve_flexboxes .reserve_time .open_time .time_flex,
.reserve .reserve_flexboxes .reserve_time .close_time .time_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.4rem;
}
.reserve .reserve_flexboxes .reserve_time .close_time p {
  margin-top: 2.4rem;
}

@media (width <= 1024px) {
  .calender_container {
    margin: 0 auto;
  }
}
.calender_container .calender_title {
  text-align: center;
}
.calender_container .calender_title span {
  margin-top: 2.4rem;
}
.calender_container iframe {
  margin-top: 1.6rem;
}
@media (width <= 1024px) {
  .calender_container iframe {
    width: 800px;
    height: 420px;
  }
}
@media (width <= 768px) {
  .calender_container iframe {
    width: 560px;
    height: 280px;
  }
}
@media (width <= 690px) {
  .calender_container iframe {
    width: 300px;
    height: 180px;
  }
}

.reserve_btn {
  display: block;
  margin: 0 auto;
  width: 24rem;
  padding: 1.15rem 0;
  text-align: center;
  position: relative;
  border: 1px solid #111;
}
.reserve_btn span {
  display: block;
}

.reserve_btn::after {
  content: "";
  display: inline-block;
  background: url(../img/right_arrow.svg) no-repeat center/cover;
  width: 0.8em;
  height: 0.8em;
  position: absolute;
  top: 50%;
  margin-top: -0.4em;
  margin-left: 45.5px;
}

.reserve p,
.reserve time {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
}
@media (width <= 690px) {
  .reserve p,
  .reserve time {
    font-size: 16px;
  }
}

.reserve_btn {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.reserve_btn .btn_eg {
  font-size: 1.8rem;
}
@media (width <= 690px) {
  .reserve_btn .btn_eg {
    font-size: 16px;
  }
}
.reserve_btn .btn_jp {
  font-size: 0.8rem;
}
@media (width <= 690px) {
  .reserve_btn .btn_jp {
    font-size: 11px;
  }
}

.access {
  padding: 10.4rem 18rem 9.6rem;
}
@media (width <= 1024px) {
  .access {
    padding: 82px 104px 82px;
  }
}
@media (width <= 768px) {
  .access {
    padding: 82px 104px 82px;
  }
}
@media (width <= 690px) {
  .access {
    padding: 54px 37.5px;
  }
}
.access h2 {
  text-align: left;
}
.access .access_flex_boxes {
  margin-top: 4.6rem;
  display: flex;
  gap: 14.4rem;
}
@media (width <= 1024px) {
  .access .access_flex_boxes {
    flex-direction: column-reverse;
    gap: 80px;
    margin-top: 42px;
  }
}
@media (width <= 690px) {
  .access .access_flex_boxes {
    gap: 32px;
    margin-top: 32px;
  }
}
.access .access_flex_boxes .access_info p {
  margin-top: 2.4rem;
}
@media (width <= 768px) {
  .access .access_flex_boxes .access_info p {
    margin-top: 8px;
  }
}
@media (width <= 768px) {
  .access .access_flex_boxes .access_info .text_postnumber {
    margin-top: 18px;
  }
}
@media (width <= 1024px) {
  .access .access_flex_boxes iframe {
    width: 800px;
    height: 420px;
  }
}
@media (width <= 768px) {
  .access .access_flex_boxes iframe {
    width: 560px;
    height: 280px;
  }
}
@media (width <= 690px) {
  .access .access_flex_boxes iframe {
    width: 300px;
    height: 180px;
  }
}

.access h3,
.access p {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
}
@media (width <= 690px) {
  .access h3,
  .access p {
    font-size: 16px;
  }
}

.footer {
  width: 100%;
  padding: 6.4rem 14.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.3764705882);
}
@media (width <= 690px) {
  .footer {
    padding: 54px 0 42px;
  }
}
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (width <= 768px) {
  .footer .container {
    flex-direction: column;
    gap: 24px;
  }
}
.footer .container .footer_icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer .container .footer_icon .instagram_icon_link {
  margin-left: 6.2rem;
}
.footer .container .footer_icon .facebook_icon_link {
  margin-left: 1.6rem;
}
.footer .container .logo_h1 {
  width: 14rem;
  height: auto;
}
@media (width <= 690px) {
  .footer .container .logo_h1 {
    width: 122px;
  }
}
.footer .container .logo_h1 a {
  display: inline-block;
  width: 100%;
}
.footer .container .logo_h1 a .logo_img {
  width: 100%;
  height: auto;
}
.footer .container .footer_nav_andcopy {
  text-align: right;
}
.footer .container .footer_nav_andcopy small {
  display: block;
  margin-top: 1.8rem;
}
.footer .container .footer_nav_andcopy .nav_footer {
  display: flex;
  align-items: center;
  width: 100%;
}
@media (width <= 768px) {
  .footer .container .footer_nav_andcopy .nav_footer {
    align-items: end;
    flex-direction: column;
  }
}
.footer .container .footer_nav_andcopy .nav_footer .nav_list {
  display: flex;
}
.footer .container .footer_nav_andcopy .nav_footer .nav_list .nav_items a {
  display: block;
  width: 100%;
  height: 100%;
}
.footer .container .footer_nav_andcopy .nav_footer .nav_list li {
  margin-left: 3.2rem;
}

.nav_footer li {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
}
@media (width <= 768px) {
  .nav_footer li {
    font-size: 12px;
  }
}

.footer {
  color: rgba(0, 0, 0, 0.3764705882);
}/*# sourceMappingURL=style.css.map */