@charset "utf-8";

main {
  width: min(1500px , 90%);
  margin: 260px auto 0px;
}

.pagetitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pagetitle h1 {
  font-size: 28px;
  border-bottom: 2px solid #000;
  width: fit-content;
  line-height: 1;
  letter-spacing: 0;
}

.pagetitle span {
  font-size: 14px;
  font-family: inter;
  letter-spacing: 0.2;
  line-height: 1;
}

.hiroshima {
  width: 100%;
  margin: 150px auto 0;
}

.yanai {
  width: 100%;
  margin:220px auto 220px;
}

.mobilehiroshima,
.mobileyanai {
  display: none;
}

.title,
.map-info {
  width: 80%;
  display: flex;
  margin: 50px auto 0px;
  justify-content: center;
  position: relative;
  align-items: center;
  padding:  0 50px;
}


.logo img {
  width: 200px;
}

.ellipse1{
  width: 46px;
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: -1;
}
.ellipse2{
  width: 60px;
  position: absolute;
  top: 200px;
  right: 25px;
  z-index: -1;  
}
.ellipse3{
  width: 90px;
  position: absolute;
  top: 220px;
  right: 50px;
  z-index: -1;
}

.logo {
  margin: 0 auto;
  width: min(300px , 50%);
}

.salon {
  width: 515px;
}

.backlogo1 {
  position: absolute;
  top: 280px;
  left: -30px;
  z-index: -1;
}
.backlogo2 {
  position: absolute;
  top: 280px;
  right: 200px;
  z-index: -1;
}
.accessinfo {
  width: 50%;
  font-size: 15px;
  line-height: 1 ;
  letter-spacing: normal;
padding: 20px 0 0 20px;
}

.back3 {
  width: min(800px , 90%);
  height: min(600px , 110%);
  background-color: #E9E4DE;
  position: absolute;
  top:-10px;
  right: 30px;
  z-index: -10;
}

.back4 {
  width: min(800px , 90%);
  height: min(600px , 110%);
  background-color: #E9E4DE;
  position: absolute;
  top:-12px;
  left: 50px;
  z-index: -10;
}

address {
  margin: 10px auto 10px;
  font-size: 18px;
  line-height: 1.4;
}

.accessinfo span {
  font-size: 12px;
  font-family: sans-serif;
}

.yanai .title,
.yanai .map-info {
  flex-direction: row-reverse;
}

.hiroshima .iframe {
  width: min(500px , 40%);
  height: 340px;
  box-shadow: #aaa 2px 2px 7px;
}
.yanai .iframe {
  width: min(500px , 40%);
  height: 340px;
  box-shadow: #aaa -2px 2px 7px;
}

iframe {
  width: 100%;
  height: 100%;
}

.access-lead {
  display: block;
  margin: 26px 20px 0 45px;
  letter-spacing: 0.11;
  font-size: 15px;
  line-height: 1.3 ;
  letter-spacing: 0.1;
}

.hiroshima-info {
  font-size: 16px;
  line-height: 1.5;
}

.backlogo1,
.backlogo2 {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}

.hiroshima-info .line-height {
  font-size: 15px;
font-family: inherit;
letter-spacing: 0.1;
}

.ellipse1,
.ellipse2,
.ellipse3 {
    animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

.ellipse2 {
  transition-delay: 0.8s;
}

@keyframes floating-x {
    0% {
        transform: translateX(-5%);
    }

    100% {
        transform: translateX(5%);
    }
}

@keyframes floating-y {
    0% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(10%);
    }
}

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

main {
  width: 100%;
  margin-top: 200px;
}

.pagetitle h1{
  font-size: 22px;
}



.title,
.map-info {
  flex-direction: column;
  width: 100%;
  margin: 20px auto 20px;
  justify-content: space-between;
  position: relative;
  align-items: center;
  padding: 0;
}

.mobilehiroshima,
.mobileyanai {
  display: block;
  width: 100%;
}

.logo img {
  width: 200px;
}

.ellipse1,
.ellipse2,
.ellipse3{
  display: none;
}

.hiroshima {
  margin-top: 100px;
}

.hiroshima .square,
.yanai .square {
  display: none;
}

.logo {
  margin: 0 auto 0;
}

.salon {display: none;
}

.backlogo1,
.backlogo2,
.back3,
.back4 {
 display: none;
}
.accessinfo {
  background-color: #E9E4DE;
  width: 100%;
  font-size: 15px;
  line-height: 1.5 ;
  letter-spacing: normal;
padding: 40px 0;
margin-bottom: 30px;
}

address {
  margin: 10px auto 10px;
  font-size: 17px;
  line-height: 1.4;
}

.accessinfo span {
  font-size: 12px;
  font-family: sans-serif;
}

.yanai .title,
.yanai .map-info {
  flex-direction: column;
}

.yanai .salon {
  display: none;
}

.hiroshima .iframe,
.yanai .iframe {
  width: 100%;
  height: 300px;
  box-shadow: none;
}

iframe {
  width: 100%;
  height: 100%;
}

.access-lead {
  display: block;
  margin: 26px 20px 0 45px;
  letter-spacing: 0.11;
  font-size: 15px;
  line-height: 1.3 ;
  letter-spacing: 0.1;
}

.hiroshima-info {
  font-size: 16px;
  line-height: 1.5;
}

.hiroshima-info .line-height {
  font-size: 15px;
font-family: inherit;
letter-spacing: 0.1;
}
}