@charset "UTF-8";
/* Scss Document
*****************************************************************/
/* mixin
*********************************************************************/
/* media query */
/* Spa
*****************************************************************/
.slick-dots {
  bottom: 20px; }

.slick-dots li button:before {
  color: #ededed; }

.slick-dotted.slick-slider {
  margin-bottom: 0px; }

.area_visual .item {
  width: 100%;
  height: 55vh;
  min-height: 50px;
  overflow: hidden; }
.area_visual .block_ttl .mark h1 {
  color: #000;
  letter-spacing: 0.5em;
  padding: 6px 0 0;
  text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 6px #FFF, 0 0 6px #FFF; }
@media all and (max-width: 769px) {
  .area_visual .item {
    height: 40vh;
    min-height: 200px; } }

.area_copy {
  padding: 0 10px; }

.block_copy {
  max-width: 1200px;
  margin: 0 auto;
  margin: 0 auto;
  position: relative; }
  .block_copy .box_txt {
    box-sizing: border-box;
    padding: 0 0 0 320px; }
  .block_copy .spa_spec {
    position: absolute;
    width: 340px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #FFF;
    color: #000;
    top: -60px;
    left: 0px;
    text-align: center; }
    .block_copy .spa_spec h2 {
      font-size: 1.8rem;
      line-height: 1.2em; }
    .block_copy .spa_spec dl {
      padding: 8px 0 0;
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      font-size: 1.5rem;
      line-height: 1.6em; }
      .block_copy .spa_spec dl dt {
        width: 18%; }
      .block_copy .spa_spec dl dd {
        width: 82%; }
  @media all and (max-width: 769px) {
    .block_copy .box_txt {
      padding: 0 0 0 0px; }
    .block_copy .spa_spec {
      position: relative;
      top: auto;
      width: 100%;
      margin-top: 20px; } }

.block_public {
  position: relative; }
  .block_public .slider img {
    width: 100%;
    height: auto; }
  .block_public .label_moon {
    position: absolute;
    left: 17%;
    bottom: -90px; }
  .block_public .label_forest {
    position: absolute;
    right: 17%;
    top: -90px; }
  @media all and (max-width: 769px) {
    .block_public .label_moon {
      left: 20px;
      bottom: -60px; }
      .block_public .label_moon img {
        width: 90px;
        height: auto; }
    .block_public .label_forest {
      right: 20px;
      top: -60px; }
      .block_public .label_forest img {
        width: 90px;
        height: auto; } }

.forest {
  margin: 140px 0 0; }
  @media all and (max-width: 769px) {
    .forest {
      margin: 80px 0 0; } }

.block_shampoo {
  padding: 0 10px; }

.shampoo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0 0;
  position: relative; }
  .shampoo .box_img {
    line-height: 0em; }
    .shampoo .box_img img {
      width: 100%;
      height: auto; }
  @media all and (max-width: 769px) {
    .shampoo {
      padding: 30px 0 0; } }

.caption {
  position: absolute;
  bottom: 10px;
  left: 10px; }

.block_faci {
  padding: 80px 0 0; }
  .block_faci ul {
    display: flex;
    flex-wrap: wrap; }
    .block_faci ul li {
      width: 33.3333%;
      position: relative; }
      .block_faci ul li .box_img {
        line-height: 0em; }
        .block_faci ul li .box_img img {
          width: 100%;
          height: auto; }
  @media all and (max-width: 769px) {
    .block_faci {
      padding: 10px 0 0; } }
  @media all and (max-width: 480px) {
    .block_faci {
      padding: 0 10px; }
      .block_faci ul {
        padding: 5px 0; }
        .block_faci ul li {
          width: 100%;
          padding: 5px 0; } }

.area_private {
  padding: 140px 10px 80px;
  border-bottom: 1px dotted #FFFFFF; }
  @media all and (max-width: 769px) {
    .area_private {
      padding: 40px 0 40px; } }

.block_private {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; }
  .block_private .box_img {
    line-height: 0em; }
    .block_private .box_img img {
      width: 100%;
      height: auto; }
  .block_private .label_private {
    position: absolute;
    top: -90px;
    left: 20px; }
  @media all and (max-width: 769px) {
    .block_private .label_private {
      top: -40px;
      left: 10px; }
      .block_private .label_private img {
        width: 90px;
        height: auto; } }

.area_about {
  padding: 80px 10px 120px; }
  @media all and (max-width: 769px) {
    .area_about {
      padding: 40px 10px 50px; } }

.block_about {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; }
  .block_about .side_img {
    width: 36%; }
    .block_about .side_img img {
      width: 100%;
      height: auto; }
  .block_about .side_text {
    width: 64%;
    box-sizing: border-box;
    padding: 0 0 0 30px; }
    .block_about .side_text h3 {
      font-size: 1.7rem;
      line-height: 1.3em;
      text-indent: -0.5em;
      padding: 0 0 5px; }
    .block_about .side_text p {
      font-size: 1.4rem;
      line-height: 1.6em; }
    .block_about .side_text ul {
      padding: 10px 0 20px; }
      .block_about .side_text ul li {
        font-size: 1.4rem;
        line-height: 1.6em;
        padding: 0 0 0 1em;
        text-indent: -1em; }
        .block_about .side_text ul li::before {
          content: "※"; }
  @media all and (max-width: 480px) {
    .block_about .side_img {
      width: 100%; }
    .block_about .side_text {
      width: 100%;
      padding: 10px 0 0 0px; }
      .block_about .side_text h3 {
        padding: 0 0 5px; } }