/* Web Fonts
=============================================================*/

/* Noto Sans JP */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* Open Sans */
/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); */

/* Lora */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&display=swap");

/* サブセット化フォント
=============================================================*/

/*
Copyright (c) 2009 Yoshiki Hayashi
Released under the MIT license
出島明朝 (https://code.google.com/archive/p/dejima-fonts/)
*/ 
@font-face {
  src: url("../fonts/dejima-mincho.eot?") format("eot"),
       url("../fonts/dejima-mincho.woff2") format("woff2"),
       url("../fonts/dejima-mincho.woff") format("woff");
  font-family: "dejima-mincho";
}

/* カスタムプロパティ
=============================================================*/

:root {
  /* 色 */
  --color-fonts: #333333; /* 文字 */
  --color-base: #ffffff; /* ベースカラー */
  --color-main: #207eb0; /* メインカラー */
  --color-sub:transparent; /* サブカラー */
  --color-sub-1: var(--color-sub);
  --color-sub-2: transparent;
  --color-sub-3: transparent;
  --color-sub-4: transparent;
  --color-accent: transparent; /* アクセントカラー */
  --color-border: #cccccc; /* 境界 */

  /* z-index */
  --z-index-container: 0;
  --z-index-header: 100;
  --z-index-overlay: 200;
  --z-index-spmenu: 300;
  --z-index-hamburger: 400;
  
  /* font-family */
  --font-family-notosansjp: "Noto Sans JP", "Helvetica Neue", Arial,
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* --font-family-opensans: "Open Sans", sans-serif; */
  --font-family-lora: "Lora", serif;
  --font-family-dejima: "dejima-mincho", serif;
  --font-family-lora-dejima: "Lora", "dejima-mincho", serif;
}

/* 初期化
=============================================================*/

html {
  scroll-behavior: smooth; /* スムーススクロール */
}

body {
  color: var(--color-fonts);
  font-family: var(--font-family-notosansjp); /* Noto Sans JP */
}

a {
  color: var(--sub-color);
}

a:hover {
  opacity: 1;
}

address {
  font-style: normal;
}

img {
  image-rendering: auto;
}

hr {
  width: 100%;
  height: 0;
  margin: 20px 0;
  border: none;
  border-top: 2px solid var(--color-border);
}

/* Wrapper
=============================================================*/

.container {
  position: relative;
  z-index: var(--z-index-container);
  overflow-x: hidden;
  background-color: var(--color-base);
}

/* Main
=============================================================*/

.main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Header 'header, h'
=============================================================*/

.header {
  width: 100%;
}

.h-logo {
  padding: 40px 0;
  background-color: #fff;
}

.h-logo__inner {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
}

.h-logo img {
  display:inline-block;
  width: 80%;
  max-width: 280px;
  height:auto;
}

@media only screen and (max-width: 767.98px) {
  .h-logo {
    text-align: center;
  }
}

.h-bcg {
  width:100%;
  background-repeat: repeat;
  background-blend-mode: lighten;
  background-image: url(../images/bcg-1.png);
  padding:40px 0;
}

/* グローバルナビ 
=============================================================*/

.g-nav {
  font-size: 28px;
}

.g-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1em;
  list-style: none;
}

.g-nav li {
  width:fit-content;
}

.g-nav a {
  color: inherit;
  text-decoration: none;
  transition: opacity ease 0.2s;
}

.g-nav a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 991.98px) {
  .g-nav ul {
    gap: 0 .5em;
  }
}

@media only screen and (max-width: 767.98px) {
  .g-nav ul {
    flex-direction: column;
    gap: 2em 0;
  }
}

/* Footer 'footer, f'
=============================================================*/

.footer {
  background-color: #1c1c1c;
  color: #999;
}

.footer__inner {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
}

.footer__logo {
  width: 300px;
}

.footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__access {
  padding: 60px 0 20px;
  width: fit-content;
}

.footer__address {
  margin-top: 20px;
  font-style: normal;
  padding-left: 36px;
  letter-spacing: .05em;
}

.footer__address p {
  margin-top:.5em;
}

.footer__address a {
  color: inherit;
  text-decoration: none;
}

.footer__copy {
  padding: 20px 0;
  border-top: 1px solid #999;
  font-size: 14px;
  text-align: center;
}

@media only screen and (max-width: 767.98px) {
  .footer__access {
    text-align: center;
    margin: 0 auto;
  }

  .footer__address {
    padding: 0;
  }
}

.f-nav {
  margin: 20px 0;
}

.f-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 1em;
  list-style: none;
}

.f-nav li {
  white-space: nowrap;
}

.f-nav a {
  color: inherit;
  text-decoration: none;
  transition: opacity ease 0.2s;
  letter-spacing: .1em;
  padding-left: .1em;
  font-weight: 500;
}

.f-nav a:hover {
  opacity: 0.8;
}




/*=============================================================

コンテンツ

=============================================================*/

/* メインビジュアル、アイキャッチ
=============================================================*/

.mainvisual {
  position: relative;
  width: 86%;
  max-width: 1280px;
  margin: 0 auto;
}

.mainvisual__inner {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  background-color: #fff;
}

.mainvisual__logo-vertical {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2.5%;
  translate: 100% -50%;
}

.mainvisual__logo-vertical img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 991.98px) {
  .mainvisual {
    width: 92%;
  }

  .mainvisual__logo-vertical {
    display:none;
  }
}

.mainvisual__btn-mapview {
  z-index: 2;
  position: absolute;
  top: 100%;
  left: 100%;
  width: 140px;
  min-width: 100px;
  translate: -60% -60%;
  border-radius: 50%;
  background-color: #fff;
}

.mainvisual__btn-mapview a {
  transition: opacity ease 0.2s;
}

.mainvisual__btn-mapview a:hover {
  opacity: 0.9;
}

.mainvisual__btn-mapview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  background-color: #333;
}

@media only screen and (max-width: 991.98px) {
  .mainvisual__btn-mapview {
    width: 15%;
    translate: -80% -80%;
  }
}

@media only screen and (max-width: 767.98px) {
  .mainvisual__btn-mapview {
    min-width: 80px;
    translate: -90% -40%;
  }
  .mainvisual__snsicons img {
    width: 32px;
  }
}

.swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background: #fff;
  font-size: 18px;
  text-align: center;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root {
  --swiper-theme-color: #f8d400;
}


/* 項 'sect, section'
=============================================================*/

.sect {
  width: 100%;
  margin: 80px 0 0;
}

/* sect-menu */
.sect-menu {
  width: 92%;
  max-width: 960px;
  margin: 80px auto 0;
}

.sect-menu__header {
  margin-bottom: 40px;
}

.sect-menu__footer {
  margin-top: 40px;
}

.sect-menu__item-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 80px 60px;
}

.sect-menu__item {
  width: 100%;
}

.sect-menu__item--left {
  flex: 2;
  width: initial;
}

.sect-menu__item--right {
  flex: 1;
  width: initial;
}

.sect-menu__item--half {
  flex: 1;
  flex-basis: calc(50% - 30px);
  width: initial;
}

.sect-menu hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #ccc;
}

@media only screen and (max-width: 767.98px) {
  .sect-menu__item-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

/* 見出し 'heading'
=============================================================*/

.heading {
  font-weight: 500;
  font-family: var(--font-family-lora-dejima);
  letter-spacing: 0.05em;
  font-size: 24px;
}

/* 見出し2行 */
.heading-two-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  font-size: 24px;
  font-family: var(--font-family-lora-dejima);
}

.heading-two-line--cource {
  margin-top:1em;
  font-size:20px;
}

.heading-two-line__l1 {
  font-size: 1em;
  line-height: 1em;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  white-space: nowrap;
}

.heading-two-line__l1--emsp { /* 1emの文字間隔 */
  letter-spacing: 1em;
  text-indent: 1em;
}

.heading-two-line__l2 {
  margin-top: 1.5em;
  font-weight: 500;
  font-size: 0.5em;
  line-height: 1em;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  white-space: nowrap;
}

@media only screen and (max-width: 767.98px) {
  .heading-two-line--cource {
    font-size:14px;
  }
}

/* テーブルの見出し */
.heading-tbl {
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 18px;
}

/* ボタン 'btn, button'
=============================================================*/



/* クーポン */
.btn-coupon {
  margin:60px auto 0;
  text-align:center;
  display: block;
  width:fit-content;
  text-decoration: none;
  text-align:center;
  border:1px solid #c3b287;
  background-color: #f9f7f4;
  color: #595048;
  padding:.5em;
  letter-spacing: 0.05em;
  text-indent:0.3em;
  font-size:20px;
  font-weight: 400;
  transition: all ease .2s;
  font-family: var(--font-family-lora-dejima);
}
.btn-coupon:hover {
  opacity: .8;
}

/* リスト 'li, list'
=============================================================*/

/* 施術の流れ */
.li-flow {
  font-feature-settings: "palt";
  display: flex;
  z-index: 10;
  margin-top: 20px;
  gap: 1em 0;
  font-size: 12px;
  line-height: 1em;
  list-style: none;
}

.li-flow__item {
  z-index: auto;
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.4em;
  background-color: #c4b4a6;
  white-space: nowrap;
}

.li-flow__item::after {
  display: block;
  z-index: 20;
  position: absolute;
  top: 0;
  left: 100%;
  border: none;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 0.7em solid #c4b4a6;
  content: "";
}

.li-flow__item:nth-child(even) {
  background-color: #dacfc5;
}

.li-flow__item:nth-child(even)::after {
  border-left: 0.86em solid #dacfc5;
}

.li-flow__item:first-child {
  padding-left: 1em;
}

.li-flow__item:last-child {
  padding-right: 1em;
}

.li-flow__item:last-child::after {
  display: none;
}

@media only screen and (max-width: 767.98px) {
  .li-flow {
    padding-bottom: 0.5em;
    overflow-x: scroll;
    font-size: 10px;
  }
}

/* タグ一覧 */
.li-tag {
  font-feature-settings: "palt";
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;
  font-size: 14px;
  line-height: 1em;
  list-style: none;
}

.li-tag__item {
  padding: 0.25em 0.5em;
  border: 1px solid #796a56;
  background-color: #fff;
  color: #796a56;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.li-tag__item--highlight {
  background-color: #796a56;
  color: #fff;
}

@media only screen and (max-width: 767.98px) {
  .li-tag {
    font-size: 12px;
  }
}

/* テーブル 'table, tbl'
=============================================================*/

/* 料金表  */
.tbl-fee {
  width: 100%;
  margin: 20px 0 0;
  border: none;
  border-collapse: collapse; 
  font-size: 16px;
  table-layout: fixed;
}
.tbl-fee th, .tbl-fee td {
  width: 33.33%;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}
.tbl-fee th {
  background-color: #f6f4f1;
  font-weight: 500;
}

@media only screen and (max-width: 767.98px) {
  .tbl-fee {
    font-size: 14px;
  }
}

/* メニュー表 */
.tbl-menu {
  width: 100%;
  max-width: 600px;
  margin: 40px 0 0;
  border: none;
  border-collapse: collapse;
  font-size: 16px;
}

.tbl-menu th, .tbl-menu td {
  padding: 0.75em 1em;
  border: none;
  border-top: 1px solid #c8bb9b;
  border-bottom: 1px solid #c8bb9b;
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  text-align: left;
  vertical-align: top;
}

.tbl-menu th {
  width: 8em;
  font-weight: 500;
}

.tbl-menu td {
  padding-left: 0;
}

@media only screen and (max-width: 767.98px) {
  .tbl-menu {
    font-size: 14px;
  }
}

/* 図表 'figure'
=============================================================*/

.fig-menu {
  width: 100%;
  max-width: 320px;
}
.fig-menu img {
  display: block;
  width: 100%;
  height: auto;
}

/* その他ブロック 
=============================================================*/

/* google maps */
.gmaps {
  width: 100%;
  height: 640px;
  max-height: 640px;
  position: relative;

}

.gmaps iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}

@media only screen and (max-width: 991.98px) {
  .gmaps{
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* 段落 Wrapper */
.paragraph {
  font-size: 16px;
  line-height: 1.8em;
  letter-spacing: .05em;
  text-align: justify;
}

.paragraph--center {
  text-align: center;
}

.paragraph p:not(:first-of-type) {
   margin: 20px 0 0;
}

@media only screen and (max-width: 767.98px) {
  .paragraph {
    font-size: 14px;
  }
}




/* index.html
=============================================================*/

/* コース */
.cource {
  width: 86%;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #fff;
}

.li-cource {
  display: flex;
  margin: 0 auto;
  padding: 3%;
  gap:3%;
  background-color: #fff;
  list-style: none;
}

.li-cource__item {
  flex: 1;
}

@media only screen and (max-width: 991.98px) {
  .cource {
    width:92%;
  }
}

.card-cource {
  width: 100%;
}

.card-cource a {
  color: inherit;
  text-decoration: none;
}

.card-cource__img-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.card-cource__img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 予約 */
.reserve {
  width: 100%;
  padding: 80px 0;
  color: #999;
  background-repeat: repeat;
  background-blend-mode: lighten;
  background-image: url(../images/bcg-2.png);
}

.btn-reserve {
  width: 50%;
  max-width: 300px;
  margin: auto;
}

.btn-reserve a {
  transition: opacity ease 0.2s;
}

.btn-reserve a:hover {
  opacity: 0.8;
}

.btn-reserve img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 767.98px) {
  .btn-reserve {
    max-width: 200px;
  }
}