@charset "UTF-8";
html {
  font-family: kozuka-gothic-pr6n, sans-serif;
  color: #532C23;
  line-height: 1.8rem;
}
.sp {
  display: none;
}
section {
  padding: 30px 0 100px 0;
}
h1 {
  font-family: professor, sans-serif;
  font-size: 89px;
  margin-left: 5%;
  margin-bottom: 140px;
  transform: rotate(-7deg);
}
.flex {
  display: flex;
  justify-content: space-between;
}
nav {
  position: fixed;
  right: 0; top: 0px;
  width: 100%; height: 85px;
  font-weight: bold;
  z-index: 1000;
  background-color: rgba(128, 201, 196, 0.3);
}
nav ul{
  display: flex;
  justify-content: space-between;
  width: 80%; height: 55px;
  position: relative;
  top: 15px; right: 0;
  margin: 0 auto;
}
nav ul a {
  display: block;
  width: 160px; height: 55px;
  text-align: center;
  line-height: 55px;
  margin-right: 30px;
}
.reserve-nav{
  position:relative;
  transition:800ms ease all;
}
.reserve-nav:hover{
  background:#fff;
  color:#1AAB8A;
}
.reserve-nav:before,.reserve-nav:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
.reserve-nav:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.reserve-nav:hover:before,.reserve-nav:hover:after{
  width:100%;
  transition:800ms ease all;
}
.reserve-nav {
  background-color: #532C23;
  color: #80c9c4;
}
/* top
====================================================================== */
#top {
  background-color: #80c9c4;
  padding: 30px 0 0px 0;
}
.top-logo {
  width: 40%;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 300px;
}
.top-square {
  width: 67%;
  display: block;
  margin: 0 auto;
  position: relative;
  top: -100px;
}
.top-oil {
  display: block;
  width: 100%;
  position: relative;
  margin-top: -350px;
  bottom: 0;
}

/* concept
====================================================================== */
#concept p {
  width: 80%;
  margin: 0 auto;
}
/* campaign
====================================================================== */
#campaign {
  background-color: #80c9c4;
}
#campaign ul{
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
}
#campaign ul li {
  width: 30%;
}
#campaign ul li img {
  width: 100%;
}
#campaign ul li p {
  line-height: 50px;
}
.cam-list {
  display: block;
  width: 200px; height: 55px;
  background-color: #532C23;
  color: #80c9c4;
  margin: 50px auto;
  line-height: 55px;
  text-align: center;
}
.cam-list{
  position:relative;
  transition:800ms ease all;
}
.cam-list:hover{
  background:#fff;
  color:#1AAB8A;
}
.cam-list:before,.cam-list:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
.cam-list:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.cam-list:hover:before,.cam-list:hover:after{
  width:100%;
  transition:800ms ease all;
}
.line-button {
  display: block;
  width: 50%;
  margin: 0 auto;
}
/* menu
====================================================================== */
.menu-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;

}
.menu-flex div {
  width: 350px;
  margin: 40px auto;
}
.menu-flex .flex {
  display: flex;
  justify-content: space-between;
  width: 250px;
  margin: 20px auto;
}
.menu-flex .flex img {
  width: 100px; height: 100px;
  object-fit: contain;
}
.menu-flex .flex p {
  height: 70px;
  margin: 15px 0;
  line-height: 1.5rem;
  text-align: right;
}
.caution {
  width: 80%;
  margin: 50px auto;
}
/* therapists
====================================================================== */
#therapists {
  background-color: #80c9c4;
}
#therapists .flex {
  width: 800px;
  margin: 10px auto 100px auto;
}
#therapists .flex img {
  height:  440px;
}
#therapists .comment {
  margin-top: 50px;
}
#therapists .flex p {
  width: 360px;
  margin: 50px auto;
}
/* access
====================================================================== */
#access .flex {
  width: 80%;
  margin:  0 auto;
}
#access h2 {
  font-size: 1rem;
  text-align: left;
  margin-bottom: 15px;
}
#access img {
  display: block;
  width: 500px;
  margin-top: -20px;
}
.shop-info {
  white-space: nowrap;
  width: 40%;
}
.shop-info .flex {
  margin: 0;
}
.shop-info p {
  margin-bottom: 15px;
  text-align: right;
}
.map p {
  margin-top: 20px;
  width: 9rem;
  border-bottom: 1px solid #532C23;
}
/* insta
====================================================================== */
#insta {
  background-color: #80c9c4;
}
.instagram-media {
  display: block;
  margin: 0 auto;
  width: 540px;
}
/* footer
====================================================================== */
footer {
  background-color: #80c9c4;
}
footer .flex {
  width: 90%;
  margin: 0 auto;
  padding: 70px 0;
}
footer img {
  display: block;
  width: 270px;
}
footer a {
  display: block;
  width: 300px; height: 85px;
  background-color: #532C23;
  color: #80c9c4;
  margin: 0px auto;
  line-height: 85px;
  text-align: center;
  font-size: 1.2rem;
}
footer a{
  position:relative;
  transition:800ms ease all;
}
footer a:hover{
  background:#fff;
  color:#1AAB8A;
}
footer a:before,footer a:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
footer a:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
footer a:hover:before,footer a:hover:after{
  width:100%;
  transition:800ms ease all;
}