イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロ可愛い囲み枠12色│サロン・教室向けstep解説枠コピペでOK!

アメブロで使える可愛い囲み枠で、サロン・お教室をしている女性起業家さん向けに3step解説枠をつくりました。
コピペで簡単にできるので、方法をちょこっと紹介する際にご活用ください。

１２色用意しているので、お気に入りの色が見つかりますように…♡

アメブロ可愛い囲み枠│サロン・教室向けSTEP解説枠

くすみピンク×ゴールド

スキンケアの3ステップ

— DAILY ROUTINE —

STEP01

優しくクレンジング

摩擦を防ぎながら、お肌の汚れを浮かせるように馴染ませてやさしく洗い流します。

STEP02

たっぷり保湿化粧水

ハンドプレスでお肌の奥まで水分を届け、もっちりとしたベースを作ります。

STEP03

美容液・クリームで蓋

潤いを閉じ込めるようにクリームを重ね、なめらかなツヤ肌へ整えます。

COPY CODE

<style type="text/css">
  .kr-step-wrapper-02 {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fdf8f8;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e40;
    box-shadow: 0 4px 16px rgba(184, 123, 135, 0.08);
  }
  .kr-step-header-02 {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step-title-02 {
    font-size: 1.15em;
    font-weight: 700;
    color: #b87b87;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step-sub-02 {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step-container-02 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step-card-02 {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f7ebed;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step-num-02 {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f5e8ea;
    color: #b87b87;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step-num-02 span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step-body-02 {
    flex: 1;
  }
  .kr-step-head-02 {
    font-size: 0.95em;
    font-weight: 700;
    color: #b87b87;
    margin: 0 0 4px 0;
  }
  .kr-step-text-02 {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #574a4c;
  }
</style>

<div class="kr-step-wrapper-02">
  <div class="kr-step-header-02">
    <div class="kr-step-title-02">タイトルが入ります</div>
    <span class="kr-step-sub-02">— SUB TITLE —</span>
  </div>
  <div class="kr-step-container-02">
    <!-- STEP 1 -->
    <div class="kr-step-card-02">
      <div class="kr-step-num-02"><span>STEP</span>01</div>
      <div class="kr-step-body-02">
        <div class="kr-step-head-02">step1のタイトル</div>
        <p class="kr-step-text-02">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step-card-02">
      <div class="kr-step-num-02"><span>STEP</span>02</div>
      <div class="kr-step-body-02">
        <div class="kr-step-head-02">step2のタイトル</div>
        <p class="kr-step-text-02">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step-card-02">
      <div class="kr-step-num-02"><span>STEP</span>03</div>
      <div class="kr-step-body-02">
        <div class="kr-step-head-02">step3のタイトル</div>
        <p class="kr-step-text-02">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ソフトピンク×ゴールド

かんたん3ステップ

— EASY STEPS —

STEP01

アカウント登録

メールアドレスを入力して、数分で簡単に無料登録が完了します。

STEP02

プランの選択

目的に合わせたぴったりなコースをお選びいただけます。

STEP03

ご利用スタート

お申し込み完了後、すぐにご利用を開始いただけます。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-spgold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fff8f9;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e42;
    box-shadow: 0 4px 16px rgba(224, 138, 158, 0.08);
  }
  .kr-step01-header-spgold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-spgold {
    font-size: 1.15em;
    font-weight: 700;
    color: #e08a9e;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-spgold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-spgold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-spgold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #fceef1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-spgold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fde8ed;
    color: #e08a9e;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-spgold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-spgold {
    flex: 1;
  }
  .kr-step01-head-spgold {
    font-size: 0.95em;
    font-weight: 700;
    color: #e08a9e;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-spgold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #5e4c52;
  }
</style>

<div class="kr-step01-wrapper-spgold">
  <div class="kr-step01-header-spgold">
    <div class="kr-step01-title-spgold">タイトルが入ります</div>
    <span class="kr-step01-sub-spgold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-spgold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-spgold">
      <div class="kr-step01-num-spgold"><span>STEP</span>01</div>
      <div class="kr-step01-body-spgold">
        <div class="kr-step01-head-spgold">step1のタイトル</div>
        <p class="kr-step01-text-spgold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-spgold">
      <div class="kr-step01-num-spgold"><span>STEP</span>02</div>
      <div class="kr-step01-body-spgold">
        <div class="kr-step01-head-spgold">step2のタイトル</div>
        <p class="kr-step01-text-spgold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-spgold">
      <div class="kr-step01-num-spgold"><span>STEP</span>03</div>
      <div class="kr-step01-body-spgold">
        <div class="kr-step01-head-spgold">step3のタイトル</div>
        <p class="kr-step01-text-spgold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ブルー×ゴールド

お申し込みの流れ

— FLOW —

STEP01

フォームよりお申し込み

必要事項をご入力の上、送信ボタンを押してください。24時間受付中です。

STEP02

確認メールのご案内

ご入力いただいたアドレス宛に確認メールと今後の詳細をお送りします。

STEP03

サービス利用開始

お手続き完了後、すぐにご希望のサービスをご利用いただけます。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-bluegold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #f7f9fc;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b424e;
    box-shadow: 0 4px 16px rgba(112, 144, 176, 0.08);
  }
  .kr-step01-header-bluegold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-bluegold {
    font-size: 1.15em;
    font-weight: 700;
    color: #5c7c99;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-bluegold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-bluegold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-bluegold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #eef3f8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-bluegold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #eaf0f6;
    color: #5c7c99;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-bluegold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-bluegold {
    flex: 1;
  }
  .kr-step01-head-bluegold {
    font-size: 0.95em;
    font-weight: 700;
    color: #5c7c99;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-bluegold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #4a525d;
  }
</style>

<div class="kr-step01-wrapper-bluegold">
  <div class="kr-step01-header-bluegold">
    <div class="kr-step01-title-bluegold">タイトルが入ります</div>
    <span class="kr-step01-sub-bluegold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-bluegold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-bluegold">
      <div class="kr-step01-num-bluegold"><span>STEP</span>01</div>
      <div class="kr-step01-body-bluegold">
        <div class="kr-step01-head-bluegold">step1のタイトル</div>
        <p class="kr-step01-text-bluegold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-bluegold">
      <div class="kr-step01-num-bluegold"><span>STEP</span>02</div>
      <div class="kr-step01-body-bluegold">
        <div class="kr-step01-head-bluegold">step2のタイトル</div>
        <p class="kr-step01-text-bluegold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-bluegold">
      <div class="kr-step01-num-bluegold"><span>STEP</span>03</div>
      <div class="kr-step01-body-bluegold">
        <div class="kr-step01-head-bluegold">step3のタイトル</div>
        <p class="kr-step01-text-bluegold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

くすみブルー×ゴールド

お申し込みの流れ

— FLOW —

STEP01

フォームよりお申し込み

必要事項をご入力の上、送信ボタンを押してください。24時間受付中です。

STEP02

確認メールのご案内

ご入力いただいたアドレス宛に確認メールと今後の詳細をお送りします。

STEP03

サービス利用開始

お手続き完了後、すぐにご希望のサービスをご利用いただけます。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-dustybluegold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #f4f6f8;
    border: 1px solid #dcd4c5;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384148;
    box-shadow: 0 4px 16px rgba(103, 120, 133, 0.08);
  }
  .kr-step01-header-dustybluegold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-dustybluegold {
    font-size: 1.15em;
    font-weight: 700;
    color: #677885;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-dustybluegold {
    display: block;
    font-size: 0.75em;
    color: #b39359;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-dustybluegold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-dustybluegold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e2e7ec;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-dustybluegold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #e8ecef;
    color: #677885;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #cca96a;
  }
  .kr-step01-num-dustybluegold span {
    font-size: 0.65em;
    color: #b39359;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-dustybluegold {
    flex: 1;
  }
  .kr-step01-head-dustybluegold {
    font-size: 0.95em;
    font-weight: 700;
    color: #677885;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-dustybluegold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #4f5860;
  }
</style>

<div class="kr-step01-wrapper-dustybluegold">
  <div class="kr-step01-header-dustybluegold">
    <div class="kr-step01-title-dustybluegold">タイトルが入ります</div>
    <span class="kr-step01-sub-dustybluegold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-dustybluegold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-dustybluegold">
      <div class="kr-step01-num-dustybluegold"><span>STEP</span>01</div>
      <div class="kr-step01-body-dustybluegold">
        <div class="kr-step01-head-dustybluegold">step1のタイトル</div>
        <p class="kr-step01-text-dustybluegold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-dustybluegold">
      <div class="kr-step01-num-dustybluegold"><span>STEP</span>02</div>
      <div class="kr-step01-body-dustybluegold">
        <div class="kr-step01-head-dustybluegold">step2のタイトル</div>
        <p class="kr-step01-text-dustybluegold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-dustybluegold">
      <div class="kr-step01-num-dustybluegold"><span>STEP</span>03</div>
      <div class="kr-step01-body-dustybluegold">
        <div class="kr-step01-head-dustybluegold">step3のタイトル</div>
        <p class="kr-step01-text-dustybluegold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ラベンダー×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-lavendergold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fcfaff;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #433d4a;
    box-shadow: 0 4px 16px rgba(150, 131, 179, 0.08);
  }
  .kr-step01-header-lavendergold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-lavendergold {
    font-size: 1.15em;
    font-weight: 700;
    color: #8c78a5;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-lavendergold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-lavendergold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-lavendergold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f3eef8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-lavendergold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f3ecf9;
    color: #8c78a5;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-lavendergold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-lavendergold {
    flex: 1;
  }
  .kr-step01-head-lavendergold {
    font-size: 0.95em;
    font-weight: 700;
    color: #8c78a5;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-lavendergold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #554d5e;
  }
</style>

<div class="kr-step01-wrapper-lavendergold">
  <div class="kr-step01-header-lavendergold">
    <div class="kr-step01-title-lavendergold">タイトルが入ります</div>
    <span class="kr-step01-sub-lavendergold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-lavendergold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-lavendergold">
      <div class="kr-step01-num-lavendergold"><span>STEP</span>01</div>
      <div class="kr-step01-body-lavendergold">
        <div class="kr-step01-head-lavendergold">step1のタイトル</div>
        <p class="kr-step01-text-lavendergold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-lavendergold">
      <div class="kr-step01-num-lavendergold"><span>STEP</span>02</div>
      <div class="kr-step01-body-lavendergold">
        <div class="kr-step01-head-lavendergold">step2のタイトル</div>
        <p class="kr-step01-text-lavendergold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-lavendergold">
      <div class="kr-step01-num-lavendergold"><span>STEP</span>03</div>
      <div class="kr-step01-body-lavendergold">
        <div class="kr-step01-head-lavendergold">step3のタイトル</div>
        <p class="kr-step01-text-lavendergold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

グレージュ×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-greige-gold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #f7f5f2;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a4643;
    box-shadow: 0 4px 16px rgba(120, 110, 100, 0.08);
  }
  .kr-step01-header-greige-gold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-greige-gold {
    font-size: 1.15em;
    font-weight: 700;
    color: #7d7571;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-greige-gold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-greige-gold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-greige-gold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #efebe8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-greige-gold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #eee9e5;
    color: #7d7571;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-greige-gold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-greige-gold {
    flex: 1;
  }
  .kr-step01-head-greige-gold {
    font-size: 0.95em;
    font-weight: 700;
    color: #7d7571;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-greige-gold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #5c5652;
  }
</style>

<div class="kr-step01-wrapper-greige-gold">
  <div class="kr-step01-header-greige-gold">
    <div class="kr-step01-title-greige-gold">タイトルが入ります</div>
    <span class="kr-step01-sub-greige-gold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-greige-gold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-greige-gold">
      <div class="kr-step01-num-greige-gold"><span>STEP</span>01</div>
      <div class="kr-step01-body-greige-gold">
        <div class="kr-step01-head-greige-gold">step1のタイトル</div>
        <p class="kr-step01-text-greige-gold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-greige-gold">
      <div class="kr-step01-num-greige-gold"><span>STEP</span>02</div>
      <div class="kr-step01-body-greige-gold">
        <div class="kr-step01-head-greige-gold">step2のタイトル</div>
        <p class="kr-step01-text-greige-gold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-greige-gold">
      <div class="kr-step01-num-greige-gold"><span>STEP</span>03</div>
      <div class="kr-step01-body-greige-gold">
        <div class="kr-step01-head-greige-gold">step3のタイトル</div>
        <p class="kr-step01-text-greige-gold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ミント×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-mintgold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #f4fbf9;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b4a46;
    box-shadow: 0 4px 16px rgba(118, 171, 159, 0.08);
  }
  .kr-step01-header-mintgold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-mintgold {
    font-size: 1.15em;
    font-weight: 700;
    color: #5c9c8e;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-mintgold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-mintgold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-mintgold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e8f5f1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-mintgold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #e5f4ef;
    color: #5c9c8e;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-mintgold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-mintgold {
    flex: 1;
  }
  .kr-step01-head-mintgold {
    font-size: 0.95em;
    font-weight: 700;
    color: #5c9c8e;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-mintgold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #4c5d58;
  }
</style>

<div class="kr-step01-wrapper-mintgold">
  <div class="kr-step01-header-mintgold">
    <div class="kr-step01-title-mintgold">タイトルが入ります</div>
    <span class="kr-step01-sub-mintgold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-mintgold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-mintgold">
      <div class="kr-step01-num-mintgold"><span>STEP</span>01</div>
      <div class="kr-step01-body-mintgold">
        <div class="kr-step01-head-mintgold">step1のタイトル</div>
        <p class="kr-step01-text-mintgold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-mintgold">
      <div class="kr-step01-num-mintgold"><span>STEP</span>02</div>
      <div class="kr-step01-body-mintgold">
        <div class="kr-step01-head-mintgold">step2のタイトル</div>
        <p class="kr-step01-text-mintgold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-mintgold">
      <div class="kr-step01-num-mintgold"><span>STEP</span>03</div>
      <div class="kr-step01-body-mintgold">
        <div class="kr-step01-head-mintgold">step3のタイトル</div>
        <p class="kr-step01-text-mintgold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ブラウン×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-browngold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fdfbf7;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3f35;
    box-shadow: 0 4px 16px rgba(133, 103, 76, 0.08);
  }
  .kr-step01-header-browngold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-browngold {
    font-size: 1.15em;
    font-weight: 700;
    color: #85674c;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-browngold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-browngold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-browngold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f5ede6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-browngold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f7f0e9;
    color: #85674c;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-browngold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-browngold {
    flex: 1;
  }
  .kr-step01-head-browngold {
    font-size: 0.95em;
    font-weight: 700;
    color: #85674c;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-browngold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #5c4e43;
  }
</style>

<div class="kr-step01-wrapper-browngold">
  <div class="kr-step01-header-browngold">
    <div class="kr-step01-title-browngold">タイトルが入ります</div>
    <span class="kr-step01-sub-browngold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-browngold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-browngold">
      <div class="kr-step01-num-browngold"><span>STEP</span>01</div>
      <div class="kr-step01-body-browngold">
        <div class="kr-step01-head-browngold">step1のタイトル</div>
        <p class="kr-step01-text-browngold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-browngold">
      <div class="kr-step01-num-browngold"><span>STEP</span>02</div>
      <div class="kr-step01-body-browngold">
        <div class="kr-step01-head-browngold">step2のタイトル</div>
        <p class="kr-step01-text-browngold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-browngold">
      <div class="kr-step01-num-browngold"><span>STEP</span>03</div>
      <div class="kr-step01-body-browngold">
        <div class="kr-step01-head-browngold">step3のタイトル</div>
        <p class="kr-step01-text-browngold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

アプリコット×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-apricotgold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fdfbf7;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4c3f3a;
    box-shadow: 0 4px 16px rgba(224, 140, 106, 0.08);
  }
  .kr-step01-header-apricotgold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-apricotgold {
    font-size: 1.15em;
    font-weight: 700;
    color: #e08c6a;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-apricotgold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-apricotgold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-apricotgold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #faede6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-apricotgold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fceee8;
    color: #e08c6a;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-apricotgold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-apricotgold {
    flex: 1;
  }
  .kr-step01-head-apricotgold {
    font-size: 0.95em;
    font-weight: 700;
    color: #e08c6a;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-apricotgold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #5e4e47;
  }
</style>

<div class="kr-step01-wrapper-apricotgold">
  <div class="kr-step01-header-apricotgold">
    <div class="kr-step01-title-apricotgold">タイトルが入ります</div>
    <span class="kr-step01-sub-apricotgold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-apricotgold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-apricotgold">
      <div class="kr-step01-num-apricotgold"><span>STEP</span>01</div>
      <div class="kr-step01-body-apricotgold">
        <div class="kr-step01-head-apricotgold">step1のタイトル</div>
        <p class="kr-step01-text-apricotgold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-apricotgold">
      <div class="kr-step01-num-apricotgold"><span>STEP</span>02</div>
      <div class="kr-step01-body-apricotgold">
        <div class="kr-step01-head-apricotgold">step2のタイトル</div>
        <p class="kr-step01-text-apricotgold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-apricotgold">
      <div class="kr-step01-num-apricotgold"><span>STEP</span>03</div>
      <div class="kr-step01-body-apricotgold">
        <div class="kr-step01-head-apricotgold">step3のタイトル</div>
        <p class="kr-step01-text-apricotgold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ネイビー×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-navygold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #f5f7fa;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #2b3340;
    box-shadow: 0 4px 16px rgba(27, 42, 74, 0.08);
  }
  .kr-step01-header-navygold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-navygold {
    font-size: 1.15em;
    font-weight: 700;
    color: #1b2a4a;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-navygold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-navygold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-navygold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e4e9f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-navygold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #eaf0f8;
    color: #1b2a4a;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-navygold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-navygold {
    flex: 1;
  }
  .kr-step01-head-navygold {
    font-size: 0.95em;
    font-weight: 700;
    color: #1b2a4a;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-navygold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #404b5c;
  }
</style>

<div class="kr-step01-wrapper-navygold">
  <div class="kr-step01-header-navygold">
    <div class="kr-step01-title-navygold">タイトルが入ります</div>
    <span class="kr-step01-sub-navygold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-navygold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-navygold">
      <div class="kr-step01-num-navygold"><span>STEP</span>01</div>
      <div class="kr-step01-body-navygold">
        <div class="kr-step01-head-navygold">step1のタイトル</div>
        <p class="kr-step01-text-navygold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-navygold">
      <div class="kr-step01-num-navygold"><span>STEP</span>02</div>
      <div class="kr-step01-body-navygold">
        <div class="kr-step01-head-navygold">step2のタイトル</div>
        <p class="kr-step01-text-navygold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-navygold">
      <div class="kr-step01-num-navygold"><span>STEP</span>03</div>
      <div class="kr-step01-body-navygold">
        <div class="kr-step01-head-navygold">step3のタイトル</div>
        <p class="kr-step01-text-navygold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

テラコッタ×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-terracottagold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fdfaf8;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3c36;
    box-shadow: 0 4px 16px rgba(190, 98, 64, 0.08);
  }
  .kr-step01-header-terracottagold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-terracottagold {
    font-size: 1.15em;
    font-weight: 700;
    color: #be6240;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-terracottagold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-terracottagold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-terracottagold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f8ebe4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-terracottagold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f9ede7;
    color: #be6240;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-terracottagold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-terracottagold {
    flex: 1;
  }
  .kr-step01-head-terracottagold {
    font-size: 0.95em;
    font-weight: 700;
    color: #be6240;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-terracottagold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #5c4a43;
  }
</style>

<div class="kr-step01-wrapper-terracottagold">
  <div class="kr-step01-header-terracottagold">
    <div class="kr-step01-title-terracottagold">タイトルが入ります</div>
    <span class="kr-step01-sub-terracottagold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-terracottagold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-terracottagold">
      <div class="kr-step01-num-terracottagold"><span>STEP</span>01</div>
      <div class="kr-step01-body-terracottagold">
        <div class="kr-step01-head-terracottagold">step1のタイトル</div>
        <p class="kr-step01-text-terracottagold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-terracottagold">
      <div class="kr-step01-num-terracottagold"><span>STEP</span>02</div>
      <div class="kr-step01-body-terracottagold">
        <div class="kr-step01-head-terracottagold">step2のタイトル</div>
        <p class="kr-step01-text-terracottagold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-terracottagold">
      <div class="kr-step01-num-terracottagold"><span>STEP</span>03</div>
      <div class="kr-step01-body-terracottagold">
        <div class="kr-step01-head-terracottagold">step3のタイトル</div>
        <p class="kr-step01-text-terracottagold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

ボルドー×ゴールド

ご利用の流れ

— HOW TO USE —

STEP01

会員登録手続き

必要情報をご入力いただき、数分でスムーズにアカウントを作成していただけます。

STEP02

メニューのご選択

お好みのプランやお手入れメニューを一覧から自由にお選びいただけます。

STEP03

サービスのご体験

ご予約内容にそって、上質なひとときとサービスをお楽しみください。

COPY CODE

<style type="text/css">
  .kr-step01-wrapper-bordeauxgold {
    max-width: 580px;
    margin: 30px auto;
    padding: 30px 24px;
    background-color: #fcf8f8;
    border: 1px solid #ebdcd0;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423538;
    box-shadow: 0 4px 16px rgba(112, 38, 52, 0.08);
  }
  .kr-step01-header-bordeauxgold {
    text-align: center;
    margin-bottom: 24px;
  }
  .kr-step01-title-bordeauxgold {
    font-size: 1.15em;
    font-weight: 700;
    color: #702634;
    margin: 0;
    letter-spacing: 0.05em;
  }
  .kr-step01-sub-bordeauxgold {
    display: block;
    font-size: 0.75em;
    color: #c5a059;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 600;
  }
  .kr-step01-container-bordeauxgold {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .kr-step01-card-bordeauxgold {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f7ecee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }
  .kr-step01-num-bordeauxgold {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f8eaed;
    color: #702634;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
    border: 1px solid #e2c0a0;
  }
  .kr-step01-num-bordeauxgold span {
    font-size: 0.65em;
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .kr-step01-body-bordeauxgold {
    flex: 1;
  }
  .kr-step01-head-bordeauxgold {
    font-size: 0.95em;
    font-weight: 700;
    color: #702634;
    margin: 0 0 4px 0;
  }
  .kr-step01-text-bordeauxgold {
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
    color: #574549;
  }
</style>

<div class="kr-step01-wrapper-bordeauxgold">
  <div class="kr-step01-header-bordeauxgold">
    <div class="kr-step01-title-bordeauxgold">タイトルが入ります</div>
    <span class="kr-step01-sub-bordeauxgold">— SUB TITLE —</span>
  </div>
  <div class="kr-step01-container-bordeauxgold">
    <!-- STEP 1 -->
    <div class="kr-step01-card-bordeauxgold">
      <div class="kr-step01-num-bordeauxgold"><span>STEP</span>01</div>
      <div class="kr-step01-body-bordeauxgold">
        <div class="kr-step01-head-bordeauxgold">step1のタイトル</div>
        <p class="kr-step01-text-bordeauxgold">step1の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 2 -->
    <div class="kr-step01-card-bordeauxgold">
      <div class="kr-step01-num-bordeauxgold"><span>STEP</span>02</div>
      <div class="kr-step01-body-bordeauxgold">
        <div class="kr-step01-head-bordeauxgold">step2のタイトル</div>
        <p class="kr-step01-text-bordeauxgold">step2の内容を入力します</p>
      </div>
    </div>
    <!-- STEP 3 -->
    <div class="kr-step01-card-bordeauxgold">
      <div class="kr-step01-num-bordeauxgold"><span>STEP</span>03</div>
      <div class="kr-step01-body-bordeauxgold">
        <div class="kr-step01-head-bordeauxgold">step3のタイトル</div>
        <p class="kr-step01-text-bordeauxgold">step3の内容を入力します</p>
      </div>
    </div>
  </div>
</div>

使い方の３ステップ

STEP 01

使いたい素材のコード（英語の枠内）をすべてコピーします。

STEP 02

アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。

STEP 03

「通常表示」に戻し、枠内の文字を書き換えたら完成です♡

アメブロ囲み枠ご使用時のお願い

ブログやホームページにコピペして使っていただいてOKです
商用利用可能です
無断転載・再配布は禁止です

デザインの著作権は捨てていません
（LINE公式などで自作と偽り配布することは禁止です）

ご使用時の報告は不要です

まとめ ✦

アメブロで使える可愛い囲み枠で、サロン・お教室向け3STEP解説枠をつくってみました♡
お気に入りの色は見つかりましたか…？

これからもルルプチはアメブロやホームページを彩る情報を発信していきます。
気になった方はまた覗きに来てくださいね。

今回、ご紹介したような囲み枠は１つでも雰囲気が変わりますが…ホームページがあると１つの媒体を持つことになりもっともっと世界観を表現できるようになります。
ルルプチは女性起業家さんの商品・サービスをまるで体験するような世界観づくりが得意です。

気になった方は女性向けホームページ制作をご覧ください ⇣
（画像タップで移動します♡）

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロ可愛い囲み枠12色│サロン・教室向けstep解説枠 コピペでOK!

アメブロ可愛い囲み枠│サロン・教室向けSTEP解説枠

くすみピンク×ゴールド

ソフトピンク×ゴールド

ブルー×ゴールド

くすみブルー×ゴールド

ラベンダー×ゴールド

グレージュ×ゴールド

ミント×ゴールド

ブラウン×ゴールド

アプリコット×ゴールド

ネイビー×ゴールド

テラコッタ×ゴールド

ボルドー×ゴールド

使い方の３ステップ

アメブロ囲み枠ご使用時のお願い

まとめ ✦

CATEGORY

アメブロ可愛い囲み枠12色│サロン・教室向けstep解説枠コピペでOK!