@charset "UTF-8";
section {
  padding: 80px 0 100px 0;
}
h1 {
  font-size: 60px;
  margin-left: 5%;
  margin-bottom: 50px;
  transform: rotate(-7deg);
}
.flex {
  display: flex;
  justify-content: space-between;
}
.sp{
  display: block;
}
.pc {
  display: none;
}
nav {
  position: fixed;
  right: 0; top: auto; bottom: 0;
  width: 100%; height: 50px;
  font-weight: bold;
  background-color: rgba(128, 201, 196, 1);
}
nav ul{
  width: 100%; height: 50px;
  top: 0; right: 0;
  margin: 0 auto;
}
nav ul li {
  width: 100%;
  margin: 0;
}
nav ul a {
  display: block;
  width: 100%; height: 50px;
  line-height: 50px;
  margin-right: 0;
  margin: 0 auto;
  border-right: 1px dotted #532C23;
}
.
/* top
====================================================================== */
#top {
  padding: 30px 0 0px 0;
}
.top-logo {
  width: 45%;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 0px;
  margin-top: 47%;
}
.top-square {
  width: 90%;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 0px;
  margin-top: -35%;
  transform: rotate(90deg);
}
.top-oil {
  margin-top: 0px;
  bottom: 0;
}
/* concept
====================================================================== */
#concept p {
  width: 80%;
  margin: 0 auto;
}
/* campaign
====================================================================== */
#campaign ul{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
#campaign ul li {
  width: 100%;
  margin-top: 20px;
}
#campaign ul li img {
  width: 100%;
}
#campaign ul li p {
  line-height: 40px;
  text-align: center;
}
.cam-list {
  margin: 30px auto;
}
.line-button {
  display: block;
  width: 90%;
  margin: 0 auto;
}
/* menu
====================================================================== */
.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: 0px auto;
}
/* therapists
====================================================================== */
#therapists .flex {
  width: 90%;
  margin: 30px auto 100px auto;
}
#therapists .flex img {
  width: 130px; height: auto;
}
#therapists .comment {
  margin-top: 30px;
}
#therapists .flex p {
  width: 200px;
  margin: 10px auto;
}
/* access
====================================================================== */
#access .flex {
  display: block;
  width: 90%;
}
#access h2 {
  font-size: 1rem;
  text-align: left;
  margin-bottom: 0px;
}
#access img {
  width: 350px;
  margin-top: 40px;
}
.shop-info {
  white-space: nowrap;
  width: 40%;
}
.shop-info .flex {
  margin: 0;
}
.shop-info p {
  margin-bottom: 15px;
  text-align: left;
}
/* insta
====================================================================== */
.instagram-media {
  margin: 0 auto;
  width: 326px;
}
/* footer
====================================================================== */
footer .flex {
  width: 90%;
  margin: 0 auto;
  padding: 70px 0;
  flex-wrap: wrap;
}
footer img {
  display: block;
  width: 150px;
  margin-bottom: 30px;
}
footer a {
  display: block;
  width: 100%; height: 60px;
  margin: 10px auto;
  line-height: 60px;
  font-size: 1rem;
}