@charset "UTF-8";

:root {
  --var-width: 50px;
  --var-width2: 20px;
}
/* -----------------------------------------------

keyvisual-blc

--------------------------------------------------*/
#keyvisual-blc {
  position: relative;
height: calc(100vh + 100px);
  overflow: hidden;
}

#keyvisual-blc .bg-slide > div {
  height: 100%;
}

#keyvisual-blc .bg {
  display: block;
  height: 100%;
  background-size: cover;
  padding-bottom: calc(100vh + 100px);
}



/* -----------------------------------------------

news-blc

--------------------------------------------------*/

@media screen and (min-width:1201px) {
  #news-blc .txt-details dl dd .btn a:hover::after {
    right: -5px;
  }
}

#news-blc {
  border-bottom: 2px solid #787878;
  padding: 20px 0;
  box-sizing: border-box;
}

#news-blc .min-comm-blc {
  display: flex;
}

#news-blc .ttl-style-group {
  width: 100%;
  max-width: 80px;
  margin-bottom: 0;
}

#news-blc .txt-details {
  width: calc(100% - 80px);
}

#news-blc .txt-details dl:first-child {
  display: flex;
}

#news-blc .txt-details dl {
  display: none;
  justify-content: space-between;
  padding-left: 25px;
  box-sizing: border-box;
  position: relative;
}

#news-blc .txt-details dl dt {
  max-width: 100px;
  width: 100%;
}

#news-blc .txt-details dl dd {
  width: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
}

#news-blc .txt-details dl * {
  font-weight: bold;
}

#news-blc .ttl-style-group .ttl-heading {
  font-size: 120%;
  line-height: 1;
  display: inline-block;
  font-weight: bold;
}

#news-blc .txt-details dl::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #720000;
  transform: rotate(45deg);
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 9px;
}

#news-blc .txt-details dl dd .btn {
  max-width: 130px;
  width: 100%;
}

#news-blc .txt-details dl dd .btn a {
  text-decoration: none;
  color: #000000;
  display: block;
  position: relative;
}

#news-blc .txt-details dl dd .txt {
  width: calc(100% - 150px);
  display: block;
}

#news-blc .txt-details dl dd .btn a::after {
  content: "";
  background-image: url(../img/common/arrow_img01.png);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
  transition: all ease-in 0.3s;
}

@media screen and (max-width:640px) {
  #news-blc .min-comm-blc {
    flex-wrap: wrap;
  }

  #news-blc .ttl-style-group {
    max-width: 100%;
  }

  #news-blc .txt-details {
    width: 100%;
  }

  #news-blc .txt-details dl {
    padding-left: 10px;
    flex-wrap: wrap;
  }

  #news-blc .txt-details dl dt {
    max-width: 100%;
  }

  #news-blc .txt-details dl dd {
    width: 100%;
  }
}

@media screen and (max-width:480px) {
  #news-blc .txt-details dl dd {
    flex-wrap: wrap;
  }

  #news-blc .txt-details dl dd .txt {
    width: 100%;
  }

  #news-blc .txt-details dl dd .btn {
    margin-top: 10px;
  }

  #news-blc .txt-details dl {
    margin-top: 10px;
  }
}

/* --------------------------------------------------

about-blc

-----------------------------------------------------*/

@media screen and (min-width:1201px) {
  #about-blc .col-2-img-txt .txt-blc .btn-style01:hover::before {
    z-index: -1;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01:hover::after {
    z-index: 1;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01:hover::before {
    left: 70px;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01:hover::after {
    left: calc(40px + 15px) !important;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 a:hover::after {
    right: 75px;
  }
}

#about-blc .col-2-img-txt {
  display: flex;
}

#about-blc .col-2-img-txt .img-blc {
  width: 50%;
  position: relative;
  box-shadow: 0px 0px 3px rgba(99, 99, 104, 0.3);
}

#about-blc .col-2-img-txt .img-blc img {
  width: 100%;
}

#about-blc .col-2-img-txt .txt-blc {
  width: 50%;
  padding: 0 0 0 10%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

#about-blc .col-2-img-txt .txt-blc * {
  display: block;
  width: 100%;
}

#about-blc .col-2-img-txt .txt-blc p {
  display: block;
  font-size: 90%;
}

#about-blc .col-2-img-txt .txt-blc .ttl-style-group {
  margin-bottom: 0;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01 {
  margin-top: 3rem;
  position: relative;
  transition: all ease-in 0.3s;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01 a {
  text-decoration: none;
  text-align: center;
  color: #000000;
  display: inline-block;
  font-size: 150%;
  font-weight: bold;
  padding: 10px 120px;
  box-sizing: border-box;
  position: relative;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01::before {
  content: "";
  border: 1px solid #903636;
  background-color: transparent;
  left: 0;
  top: 0;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01::after {
  background-color: #f3e0e0;
  left: calc(var(--var-width) + 15px) !important;
  top: 0px;
  z-index: -1;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01::before,
#about-blc .col-2-img-txt .txt-blc .btn-style01::after {
  content: "";
  width: 55px;
  height: 55px;
  position: absolute;
  transform: rotate(45deg);
  left: var(--var-width);
  transition: all ease-in 0.3s;
}

#about-blc .col-2-img-txt .txt-blc .btn-style01 a::after {
  content: "";
  background-image: url(../img/common/arrow_img01.png);
  position: absolute;
  right: 80px;
  top: 0;
  bottom: 0;
  width: 35px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
  transition: all ease-in 0.3s;
}

#about-blc .col-2-img-txt .img-blc::before {
  content: "";
  border: 2px solid #dfb8b8;
  position: absolute;
  top: -35px;
  left: -35px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@media screen and (max-width:1366px) {
  #about-blc .col-2-img-txt .txt-blc {
    padding-left: 4vw;
  }
}

@media screen and (max-width:1000px) {
  #about-blc .col-2-img-txt {
    flex-wrap: wrap;
  }

  #about-blc .col-2-img-txt .img-blc {
    width: 100%;
  }

  #about-blc .col-2-img-txt .img-blc::before {
    top: -25px;
    left: -25px;
  }

  #about-blc .col-2-img-txt .txt-blc {
    width: 100%;
    padding-left: 0;
    margin-top: 3rem;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width:640px) {
  #about-blc .col-2-img-txt .img-blc::before {
    top: -15px;
    left: -15px;
  }

  #about-blc .col-2-img-txt .txt-blc {
    margin-top: 2rem;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01::before,
  #about-blc .col-2-img-txt .txt-blc .btn-style01::after {
    width: 35px;
    height: 35px;
    top: 10px;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01::after {
    left: 18vw !important;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01::before {
    left: 15vw !important;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 {
    margin-top: 2rem;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 a {
    padding: 10px 20vw;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 a::after {
    right: 16vw;
  }
}

@media screen and (max-width:480px) {
  #about-blc .col-2-img-txt .txt-blc .btn-style01::before {
    left: 5vw !important;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01::after {
    left: 8vw !important;
  }


  #about-blc .col-2-img-txt .txt-blc .btn-style01 a::after {
    right: 10vw;
  }

  #about-blc .col-2-img-txt .txt-blc .btn-style01 {
    max-width: 340px;
  }

  #about-blc .col-2-img-txt .img-blc::before {
    top: -10px;
    left: -10px;
  }
}

/* --------------------------------------------------

salon-menu-blc

-----------------------------------------------------*/

@media screen and (min-width:1201px) {
  #salon-menu-blc .div-list>ul li:hover::after {
    transform: rotate(90deg);
  }

  #salon-menu-blc .div-list>ul li:hover a::before {
    right: 90px;
    left: auto;
    top: 150px;
  }

  #salon-menu-blc .div-list>ul li:hover a::before,
  #salon-menu-blc .div-list>ul li:hover a:after {
    transform: rotate(90deg);
  }

  #salon-menu-blc .div-list>ul li:hover a::after {
    right: auto;
    left: 90px;
    top: 330px;
  }
}

#salon-menu-blc .div-list>ul {
  display: flex;
  overflow: hidden;
}

#salon-menu-blc .div-list>ul li {
  width: calc(100% / 4);
  height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: all ease-in 0.3s;
  overflow: hidden;
}

#salon-menu-blc .div-list>ul li::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#salon-menu-blc .div-list>ul li a {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-decoration: none;
  color: #ffffff;
  font-size: 150%;
  opacity: 1;
}

#about-blc .col-2-img-txt .txt-blc .ttl-style-group {
  margin-bottom: 0;
}

#salon-menu-blc .div-list>ul li::after {
  content: "";
  width: 230px;
  height: 230px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #ffffff;
  z-index: 1;
  margin: auto;
  transform: rotate(45deg);
  transition: all ease-in 0.3s;
}

#salon-menu-blc .div-list>ul li a::before,
#salon-menu-blc .div-list>ul li a:after {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  border: 1px solid #fff;
  margin: auto;
  transform: rotate(45deg);
  transition: all ease-in 0.3s;
}

#salon-menu-blc .div-list>ul li a::before {
  top: 100px;
}

#salon-menu-blc .div-list>ul li a::after {
  bottom: 100px;
}

#salon-menu-blc .div-list>ul li a span {
  display: inline-block;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: relative;
}

#salon-menu-blc .div-list>ul li a span::after {
  content: "";
  background-image: url(../img/common/arrow_img02.png);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 57px;
  height: 11px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
}

@media screen and (max-width:1366px) {
  #salon-menu-blc .div-list>ul li::after {
    width: 15vw;
    height: 15vw;
  }

  #salon-menu-blc .div-list>ul li a::before,
  #salon-menu-blc .div-list>ul li a:after {
    width: 5vw;
    height: 5vw;
  }

  #salon-menu-blc .div-list>ul li a::after {
    bottom: 9vw;
  }

  #salon-menu-blc .div-list>ul li a::before {
    top: 9vw;
  }

  #salon-menu-blc .div-list>ul li a {
    font-size: 120%;
  }

  #salon-menu-blc .div-list>ul li {
    height: 44vw;
  }
}

@media screen and (max-width:1000px) {

  #salon-menu-blc .div-list>ul {
    flex-wrap: wrap;
  }

  #salon-menu-blc .div-list>ul li {
    width: calc(100% / 2);
    height: 62vw;
  }

  #salon-menu-blc .div-list>ul li::after {
    width: 25vw;
    height: 25vw;
  }

  #salon-menu-blc .div-list>ul li a::before,
  #salon-menu-blc .div-list>ul li a:after {
    width: 7vw;
    height: 7vw;
  }
}

@media screen and (max-width:480px) {
  #salon-menu-blc .div-list>ul li::after {
    width: 30vw;
    height: 30vw;
  }

  #salon-menu-blc .div-list>ul li {
    height: 70vw;
  }

  #salon-menu-blc .div-list>ul li a::before,
  #salon-menu-blc .div-list>ul li a:after {
    width: 9vw;
    height: 9vw;
  }

  #salon-menu-blc .div-list>ul li a {
    font-size: 100%;
  }

  #salon-menu-blc .div-list>ul li a span::after {
    width: 37px;
  }
}

/* --------------------------------------------------

salon-list-blc

-----------------------------------------------------*/

@media screen and (min-width:1201px) {
  #salon-list-blc .d-flex .div-list ul li .btn-blc:hover {
    background-color: #720000;
    color: #fff;
  }

  #salon-list-blc .d-flex .div-list ul li .btn-blc:hover>span::after {
    background-image: url(../img/common/arrow_img01-hover.png);
    right: -5px;
  }
}

#salon-list-blc .d-flex {
  display: flex;
}

#salon-list-blc .d-flex .ttl-style-group {
  max-width: 400px;
  width: 100%;
  margin-bottom: 0;
}

#salon-list-blc .d-flex .div-list {
  width: calc(100% - 400px);
  padding-left: 70px;
  box-sizing: border-box;
}

#salon-list-blc .d-flex .div-list ul {
  display: flex;
  flex-wrap: wrap;
}

#salon-list-blc .d-flex .div-list ul li {
  width: calc((100% - 2rem) / 2);
  margin-right: 2rem;
  margin-top: 4rem;
}

#salon-list-blc .d-flex .div-list ul li:nth-child(-n+2) {
  margin-top: 0;
}

#salon-list-blc .d-flex .div-list ul li:nth-child(2n+2) {
  margin-right: 0;
}

#salon-list-blc .d-flex .div-list ul li figure>figcaption {
  padding: 10px 0;
  box-sizing: border-box;
  font-size: 120%;
  font-weight: bold;
}

#salon-list-blc .d-flex .div-list ul li .txt {
  position: relative;
  padding: 0 80px 0 40px;
  box-sizing: border-box;
}

#salon-list-blc .d-flex .div-list ul li .txt::after {
  content: "";
  background-image: url(../img/common/map-icon01.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: calc(var(--var-width2) + 10px);
  top: 7px;
  width: 15px;
  height: 23px;
}

#salon-list-blc .d-flex .div-list ul li .txt::before {
  content: "";
  width: 35px;
  height: 35px;
  position: absolute;
  right: var(--var-width2);
  top: 0;
  background-color: #f7eded;
  transform: rotate(45deg);
}

#salon-list-blc .d-flex .div-list ul li .txt .map-link{
  position: absolute;
  right: var(--var-width2);
  top: 0;
  width: 35px; height: 35px;
  transform: rotate(45deg);
  display: block;
  z-index: 3;           /* 装飾の上に被せる */
  background: transparent;
  /* 見えないけどクリックできる。キーボードフォーカス可 */
}
#salon-list-blc .d-flex .div-list ul li .txt .map-link:hover{
  background-color: #9b83835c;
}

#salon-list-blc .d-flex .div-list ul li .btn-blc {
  display: block;
  max-width: 200px;
  width: 100%;
  margin: 1rem auto auto;
  text-align: center;
  background-color: #f7eded;
  text-decoration: none;
  padding: 10px 10px;
  box-sizing: border-box;
  color: #000000;
  opacity: 1;
}

#salon-list-blc .d-flex .div-list ul li .btn-blc>span {
  padding-right: 40px;
  box-sizing: border-box;
  position: relative;
}

#salon-list-blc .d-flex .div-list ul li .btn-blc>span::after {
  content: "";
  background-image: url(../img/common/arrow_img01.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all ease-in 0.3s;
}

@media screen and (max-width: 1200px) {
  #salon-list-blc .d-flex .ttl-style-group {
    max-width: 30vw;
  }

  #salon-list-blc .d-flex .div-list {
    width: calc(100% - 30vw);
    padding-left: 3vw;
  }

  #salon-list-blc .d-flex .div-list ul li .txt {
    padding-left: 2vw;
  }

}

@media screen and (max-width:1000px) {


  #salon-list-blc .d-flex .div-list ul li .txt {
    padding-left: 2vw;
  }

  #salon-list-blc .d-flex {
    flex-wrap: wrap;
  }

  #salon-list-blc .d-flex .ttl-style-group {
    max-width: 100%;
  }

  #salon-list-blc .d-flex .div-list {
    width: 100%;
    padding-left: 0;
  }
}

@media screen and (max-width:480px) {
  #salon-list-blc .d-flex .div-list ul li .txt {
    padding-right: 50px;
    padding-left: 0;
  }

  #salon-list-blc .d-flex .div-list ul li .txt::before {
    right: 0;
  }

#salon-list-blc .d-flex .div-list ul li .txt .map-link {
    position: absolute;
    right: 0;
}

  #salon-list-blc .d-flex .div-list ul li .txt::after {
    right: 10px;
  }

  #salon-list-blc .d-flex .div-list ul li {
    margin-top: 2rem;
    width: 100%;
    margin-right: 0;
    margin-top: 2rem !important;
  }

  #salon-list-blc .d-flex .div-list ul li:first-child {
    margin-top: 0 !important;
  }
}


#salon-menu-blc .ttl-style-group .txt-desc{
  text-align: center;
}