施術の流れ

カウンセリング

体調チェック後に受けられるコースの確認、その後お支払いをしていただきます。※カウンセリングのお時間はコースの時間に含まれませんのでご安心ください。

カウンセリング

コードを表示

HTML

<div class="menu509">
  <h3 class="menu509_m1">施術の流れ</h3>
  <div class="menu509_c1">
    <div class="menu509_item">
      <div class="menu509_c2">
        <div class="menu509_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu509_c3">
        <h4 class="menu509_m2">カウンセリング</h4>
        <p class="menu509_t1">体調チェック後に受けられるコースの確認、その後お支払いをしていただきます。※カウンセリングのお時間はコースの時間に含まれませんのでご安心ください。
        </p>
      </div>
    </div>
    <div class="menu509_item">
      <div class="menu509_c2">
        <div class="menu509_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu509_c3">
        <h4 class="menu509_m2">カウンセリング</h4>
        <p class="menu509_t1">体調チェック後に受けられるコースの確認、その後お支払いをしていただきます。※カウンセリングのお時間はコースの時間に含まれませんのでご安心ください。
        </p>
      </div>
    </div>
    <div class="menu509_item">
      <div class="menu509_c2">
        <div class="menu509_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu509_c3">
        <h4 class="menu509_m2">カウンセリング</h4>
        <p class="menu509_t1">体調チェック後に受けられるコースの確認、その後お支払いをしていただきます。※カウンセリングのお時間はコースの時間に含まれませんのでご安心ください。
        </p>
      </div>
    </div>
    <div class="menu509_item">
      <div class="menu509_c2">
        <div class="menu509_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu509_c3">
        <h4 class="menu509_m2">カウンセリング</h4>
        <p class="menu509_t1">体調チェック後に受けられるコースの確認、その後お支払いをしていただきます。※カウンセリングのお時間はコースの時間に含まれませんのでご安心ください。
        </p>
      </div>
    </div>
  </div>
</div>

CSS

/*施術の流れ*/
h3.menu509_m1 {
  background-color: #897559;
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 15px;
  margin-bottom: 0;
}

.menu509_c1 {
  background-color: #fff;
  border: solid 1px #ddd;
  border-bottom: none;
  border-top: none;
}

.menu509_item {
  display: flex;
  padding: 2em 3em;
  border-bottom: solid 1px #ddd
}

.menu509_c2 {
  width: 40%;
  box-sizing: border-box;
}

.menu509_c3 {
  width: 60%;
  box-sizing: border-box;
  padding-left: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu509_g1 img {
  vertical-align: bottom;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
}

h4.menu509_m2 {
  color: #634f32;
}

p.menu509_t1 {
  margin-bottom: 0;
  font-size: 14px;
}

@media screen and (max-width: 1151px) {
  h3.menu509_m1 {
    font-size: 18px;
  }

  h4.menu509_m2 {
    font-size: 16px;
  }

  p.menu509_t1 {
    font-size: 12px;
  }
}

@media (max-width: 950px) {
  p.menu509_t1 {
    font-size: 10px;
  }
}

@media (max-width: 850px) {
  p.menu509_t1 {
    line-height: 1.5;
  }
}

@media screen and (max-width: 750px) {
  h3.menu509_m1 {
    padding: 12px;
    font-size: 16px;
  }

  .menu509_item {
    flex-direction: column;
    padding: 3em 2em 2em 2em;
  }

  .menu509_c2 {
    width: auto;
  }

  .menu509_c3 {
    width: auto;
    padding-left: 0;
  }

  h4.menu509_m2 {
    font-size: 14px;
    padding: 1em 0 0 0.3em;
  }

  p.menu509_t1 {
    font-size: 12px;
    line-height: 2.5;
  }
}

料金表1

ボディ

キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ

コードを表示

HTML

<h3 class="menu500_m1">ボディ</h3>
  <div class="menu500_c1">
    <div class="menu500_c2">
      <div class="menu500_g1">
        <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_46752118_M.jpg" />
      </div>
      <div class="menu500_g1">
        <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_67881824_M.jpg" />
      </div>
    </div>
    <ul class="menu500ul">
      <li class="menu500li_item">
        <h4 class="menu500_m2">キャビテーション 60分<span class="menu500_s1">19,800円</span></h4>
        <p class="menu500_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </li>
      <li class="menu500li_item">
        <h4 class="menu500_m2">キャビテーション 60分<span class="menu500_s1">19,800円</span></h4>
        <p class="menu500_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </li>
      <li class="menu500li_item">
        <h4 class="menu500_m2">キャビテーション 60分<span class="menu500_s1">19,800円</span></h4>
        <p class="menu500_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </li>
      <li class="menu500li_item">
        <h4 class="menu500_m2">キャビテーション 60分<span class="menu500_s1">19,800円</span></h4>
        <p class="menu500_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </li>
      <li class="menu500li_item">
        <h4 class="menu500_m2">キャビテーション 60分<span class="menu500_s1">19,800円</span></h4>
        <p class="menu500_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </li>
    </ul>
  </div>

CSS

/*料金表1*/
h3.menu500_m1 {
  background-color: #897559;
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 15px;
  margin-bottom: 0;
}

.menu500_c1 {
  background: #fff;
  border: solid 1px #ddd;
  border-bottom: none;
  border-top: none;
}

.menu500_c2 {
  display: flex;
}

.menu500_g1 {
  width: 50%;
}

.menu500_g1 img {
  vertical-align: bottom;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

ul.menu500ul {
  margin: 0;
  list-style: none;
}

.menu500li_item {
  padding: 20px 40px;
  border-bottom: solid 1px #ddd
}

h4.menu500_m2 {
  margin-bottom: 0;
  color: #bc4a4a;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}

span.menu500_s1 {
  padding-left: 1em;
  margin-left: auto;
}

p.menu500_t1 {
  margin-bottom: 0;
}

@media screen and (max-width: 1151px) {
  h3.menu500_m1 {
    font-size: 18px;
  }

  h4.menu500_m2 {
    font-size: 16px;
  }
}

@media screen and (max-width: 750px) {
  h3.menu500_m1 {
    padding: 12px;
    font-size: 16px;
  }

  .menu500_c2 {
    flex-direction: column;
  }

  .menu500_g1 {
    width: auto;
  }

  .menu500li_item {
    padding: 20px;
  }

  h4.menu500_m2 {
    font-size: 14px;
    padding-top: 10px;
  }

  p.menu500_t1 {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .menu500_g1:last-of-type {
    display: none;
  }
}

料金表2

ボディ

キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ
キャビテーション 60分19,800円

施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ

コードを表示

HTML

<div class="menu502">
  <h3 class="menu502_m1">ボディ</h3>
  <ul class="menu502ul">
    <li class="menu502li_item">
      <div class="menu502_c1">
        <div class="menu502_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu502_c2">
        <h4 class="menu502_m2">キャビテーション 60分<span class="menu502_s1">19,800円</span></h4>
        <p class="menu502_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </div>
    </li>
    <li class="menu502li_item">
      <div class="menu502_c1">
        <div class="menu502_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu502_c2">
        <h4 class="menu502_m2">キャビテーション 60分<span class="menu502_s1">19,800円</span></h4>
        <p class="menu502_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </div>
    </li>
    <li class="menu502li_item">
      <div class="menu502_c1">
        <div class="menu502_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu502_c2">
        <h4 class="menu502_m2">キャビテーション 60分<span class="menu502_s1">19,800円</span></h4>
        <p class="menu502_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </div>
    </li>
    <li class="menu502li_item">
      <div class="menu502_c1">
        <div class="menu502_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu502_c2">
        <h4 class="menu502_m2">キャビテーション 60分<span class="menu502_s1">19,800円</span></h4>
        <p class="menu502_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </div>
    </li>
    <li class="menu502li_item">
      <div class="menu502_c1">
        <div class="menu502_g1">
          <img src="https://demo1.ace214.com/wp-content/uploads/2022/05/pixta_76565840_M.jpg" />
        </div>
      </div>
      <div class="menu502_c2">
        <h4 class="menu502_m2">キャビテーション 60分<span class="menu502_s1">19,800円</span></h4>
        <p class="menu502_t1">施術の流れ☆キャビフル・気になる部位１～２カ所→ハンドで揉みほぐし→リンパドレナージュ</p>
      </div>
    </li>
  </ul>
</div>

CSS

/*料金表2*/
h3.menu502_m1 {
  background-color: #897559;
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 15px;
  margin-bottom: 0;
}

ul.menu502ul {
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: solid 1px #ddd;
  border-bottom: none;
  border-top: none;
}


.menu502li_item {
  display: flex;
  padding: 2em 3em;
  border-bottom: solid 1px #ddd
}

.menu502_c1 {
  width: 40%;
  box-sizing: border-box;
}

.menu502_c2 {
  width: 60%;
  box-sizing: border-box;
  padding-left: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu502_g1 img {
  vertical-align: bottom;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
}

h4.menu502_m2 {
  margin-bottom: 0;
  color: #bc4a4a;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}

span.menu502_s1 {
  padding-left: 1em;
  margin-left: auto;
}

p.menu502_t1 {
  margin-bottom: 0;
}

@media screen and (max-width: 1151px) {
  h3.menu502_m1 {
    font-size: 18px;
  }

  h4.menu502_m2 {
    font-size: 16px;
  }
}

@media (max-width: 1151px) {
  p.menu502_t1 {
    font-size: 12px;
  }
}

@media (max-width: 850px) {
  p.menu502_t1 {
    line-height: 2;
  }
}

@media screen and (max-width: 750px) {
  h3.menu502_m1 {
    padding: 12px;
    font-size: 16px;
  }

  .menu502li_item {
    flex-direction: column;
    padding: 3em 2em 2em 2em;
  }

  .menu502_c1 {
    width: auto;
  }

  .menu502_c2 {
    width: auto;
    padding-left: 0;
  }

  h4.menu502_m2 {
    font-size: 14px;
    padding-top: 1em;
  }

  p.menu502_t1 {
    line-height: 2.5;
  }
}

テンプレート | 株式会社Ace

流れ・料金表

施術の流れ

施術の流れ

カウンセリング

カウンセリング

カウンセリング

カウンセリング

HTML

CSS

料金表1

ボディ

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

HTML

CSS

料金表2

ボディ

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

キャビテーション 60分19,800円

HTML

CSS