@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* .new-label {
    color: red;
    font-weight: bold;
    margin-right: 5px;
} */



.new-mark {
    display: inline-block;
    padding: 3px 8px;
    background-color: #f39c12; /* 背景色をオレンジ系に */
    color: #fff; /* 文字色を白に */
    font-size: 12px; /* 文字サイズ */
    font-weight: bold;
    border-radius: 5px; /* 角を少し丸める */
    border: 1px solid #e67e22; /* 外枠を細く付ける */
    margin-right: 10px; /* ラベルとタイトルの間のスペース */
}

.my-form-swiper {
  max-width: 640px; // 横幅を適度に制限
  margin: 0 auto;
  background: #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  .swiper-wrapper {
    padding: 2rem 1.5rem;
  }

  /* .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    p {
      margin: 0;
      font-size: 1rem;
      line-height: 1.6;

      label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.3rem;
      }

      input,
      textarea,
      select {
        width: 100%;
        padding: 0.7rem 0.9rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;

        &:focus {
          border-color: #0073e6;
          box-shadow: 0 0 0 2px rgba(0,115,230,0.15);
          outline: none;
        }
      }

      textarea {
        min-height: 120px;
        resize: vertical;
      }
    }

    // ボタン
    button,
    input[type="submit"] {
      align-self: flex-end;
      padding: 0.7rem 1.5rem;
      border: none;
      border-radius: 6px;
      background: #0073e6;
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background: #005bb5;
      }
    }

    // 「戻る」ボタンを左寄せにする
    .prev-step {
      align-self: flex-start;
      background: #ccc;
      color: #333;

      &:hover {
        background: #aaa;
      }
    }
  } */

  // ページネーション
  .swiper-pagination {
    margin-top: 1rem;
    text-align: center;

    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #ccc;
      opacity: 1;
      margin: 0 6px !important;
      border-radius: 50%;
      transition: background 0.3s;

      &-active {
        background: #0073e6;
      }
    }
  }
}
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  font-family: sans-serif;

  .step-label {
    font-weight: 700;
    font-size: 1.2rem;
    margin-right: 1rem;
  }

  ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1.1rem;
      color: #000;
      transition: background 0.3s, color 0.3s;

      &.active {
        background: #003d91; // 濃い青
        color: #fff;
      }
    }
  }
}