@charset "UTF-8";

/* ============================================================
   lp-salon-multi（複数店舗・2店舗以上向け）スタイル
   ・reset.css → share-re.css の後に読み込む
   ・ベースカラー：blue #5186EC ／ CTAのみ share-re の green を使用
   ・lp-salon-single と同じ設計思想で統一
   ============================================================ */
img{
  width: 100%;
  height: auto;
}
.lp-salon-multi {
  color: #111;

  /* -- 共通セクション見出し -- */
  .head {
    margin-bottom: 32px;
    text-align: center;

    h2 {
      font-size: 30px;
      font-weight: 900;
      line-height: 1.4;
      color: #111;
    }

    .lead {
      margin-top: 14px;
      font-size: 16px;
      line-height: 1.7;
      color: #333;
    }

      @media screen and (max-width: 768px) {
        margin-bottom: 28px;

        h2 {
          font-size: 26px;
        }
        .lead {
          font-size: 16px;
        }
      }
    }
  }

  /* -- 無料相談（アウトライン）ボタン：CTAは green のまま -- */
  .cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    height: 80px;
    padding: 16px 32px;

    background-color: #fff;
    border: 2px solid #35AE92;
    border-radius: 43px;

    font-size: 20px;
    font-weight: 700;
    color: #2b8f79;
    text-decoration: none;

    transition: all 0.2s ease;

    .material-symbols-rounded {
      font-size: 22px;
      padding-top: 2px;
    }

    &:hover { background-color: #ebf7f4; }

    @media screen and (max-width: 768px) {
      width: 100%;
      height: 72px;
      font-size: 18px;
    }
  }

  /* ============================================================
     FV（ファーストビュー）
     ============================================================ */
  .fv {
    .box {
      display: flex;
      align-items: center;
      gap: 48px;
    }
    .text { flex: 1; }
    .kicker {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      margin-bottom: 8px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #29486d;
      img{
        width: 64px;
        height: auto;
      }
    }
    .lead-line {
      margin-bottom: 14px;
      font-size: 17px;
      font-weight: 700;
      color: #5186EC;
    }

    h1.catch {
      font-size: 42px;
      font-weight: 900;
      line-height: 1.35;
      color: #111;

      .marker {
        padding: 0 0.04em;
        background: linear-gradient(transparent 80%, #f6d019 62%);
      }
    }

    .lead {
      margin-top: 24px;
      max-width: 34em;

      font-size: 17px;
      line-height: 1.8;
      color: #333;
    }

    .image {
      width: 480px;
      flex-shrink: 0;
      img{
      border-radius: 8px;
      }
    }

    @media screen and (max-width: 980px) {
      .box { gap: 32px; }
      h1.catch { font-size: 36px; }
      .image { width: 42%; }
    }

    @media screen and (max-width: 768px) {

      .box { display: block; }
      h1.catch { font-size: 32px; }
      .lead { font-size: 16px; }
      .image {
        width: 100%;
        margin-top: 28px;
      }
      .kicker {
        img{
          width: 48px;
        }
      }
    }
  }

  /* ============================================================
     FV下CTA
     ============================================================ */

    .cta-btn-wrap{
      width: 540px;
      text-align: center;
    }
    .cta-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 32px;
    }
    .cta-btn.size-m {
      flex-direction: column;
      width: 432px;
    }
      .cta-outline {
        height: 56px;
        font-size: 18px;
      }
    @media screen and (max-width: 768px) {
    .cta-btn-wrap{
      width: 100%;
    }
      .cta-area {
        display: block;
        .cta-btn-wrap { margin-bottom: 12px; }
      }
      .cta-btn.size-m { width: 100%; }
    }

  /* ============================================================
     お悩み
     ============================================================ */
  .trouble {
    margin-top: 32px;
    padding: 48px 0;
    background-color: #f3f3f3;
    h2{
      color: #6b5744;
    }
    .trouble-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      .box {
        width: calc((100% - 40px) / 3);
        padding: 26px 24px;

        background-color: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 16px;

        .box-head {
          display: flex;
          align-items: center;
          gap: 10px;
          .material-symbols-rounded {
            font-size: 30px;
            color: #6b5744;
          }
          h3 {
            font-size: 16px;
            font-weight: 700;
            color: #6b5744;
          }
        }
        p {
          margin-top: 12px;
          font-size: 14.5px;
          line-height: 1.8;
          color: #333;
        }
      }
    }

    @media screen and (max-width: 980px) {
      .trouble-list .box { width: calc((100% - 20px) / 2); }
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;

      .trouble-list {
        gap: 12px;

        .box {
          width: 100%;
            .box-head {
              h3 {
                font-size: 20px;
              }
            }
        }
      }
    }
  }

  /* ============================================================
     解決（BeautyMeritなら、多店舗運営がこう変わります。）
     ・テキスト＝左 ／ 画像＝右（交互にしない）
     ============================================================ */
  .solution {
    padding: 48px 0;

    .head { 
      margin-bottom: 16px;
    }
    .merit {
      display: flex;
      align-items: center;
      gap: 48px;
      margin-top: 32px;

      .text { flex: 1; }

      .no {
        display: inline-block;
        margin-bottom: 6px;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
        color: #697f99;
      }

      .tag {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: #515151;
      }

      h3 {
        margin-bottom: 12px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.4;
        color: #29486d;
      }

      p {
        font-size: 16px;
        line-height: 1.8;
        color: #333;
      }

      .image { width: 48%; }
    }

    .merit + .merit {
      margin-top: 32px;
      padding-top: 32px;
      border-top: 1px solid #e7e7e7;
    }

    @media screen and (max-width: 980px) {
      padding: 64px 0;
      .merit { gap: 32px; }
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;

      .merit {
        display: block;

        h3 { font-size: 20px; }

        .image {
          width: 100%;
          margin-top: 20px;
        }
      }

      .merit + .merit {
        margin-top: 40px;
        padding-top: 40px;
      }
    }
  }

  /* ============================================================
     多店舗ならではの機能
     ============================================================ */
  .features {
    padding: 48px 0;
    background-color: #eaedf0;
    h2{
      color: #29486d;
    }

    .feature-list {
      display: flex;
      align-items: stretch;
      gap: 20px;

      .box {
        flex: 1;
        padding: 32px 28px;

        background-color: #fff;
        border: 1px solid #d3e1fa;
        border-radius: 20px;

        .material-symbols-rounded {
          font-size: 44px;
          color: #29486d;
        }

        h3 {
          margin: 14px 0 10px;
          font-size: 19px;
          font-weight: 700;
          color: #29486d;
        }

        p {
          font-size: 14.5px;
          line-height: 1.7;
          color: #333;
        }
      }
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;

      .feature-list { flex-direction: column; }
    }
  }

  /* ============================================================
     Before / After
     ============================================================ */
  .compare {
    padding: 48px 0;
    .head{
      h2{
        color: #111;
      }
    }

    .table-wrap { overflow-x: auto; }


    table {
      width: 100%;
      min-width: 520px;

      background-color: #fff;
      border: 1px solid #e7e7e7;
      border-radius: 16px;
      overflow: hidden;

      th, td {
        padding: 16px 20px;
        border-bottom: 1px solid #e7e7e7;
        font-size: 15.5px;
        text-align: left;
      }

      thead th {
        background-color: #eef3fd;
        font-weight: 700;
      }
      thead th:nth-child(2) {
        color: #6b5744;
      }
      thead th:nth-child(3)  {
        color: #5186EC;
      }

      td:first-child {
        width: 26%;
        font-weight: 700;
        white-space: nowrap;
      }
      td:nth-child(2) {
        color: #111;
      }
      td:last-child {
        font-weight: 700;
        color: #5186EC;
        display: flex;
        align-items: center;
        justify-content: flex-start;

      }

      td:last-child span{
        color: #fa9831;
        font-size: 32px;
      }
      tr:last-child td { border-bottom: 0; }
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;
    }
  }

  /* ============================================================
     導入・移行
     ============================================================ */
  .migrate {
    padding: 56px 0;
    background-color: #f3f2f9;

    .mig-card {
      max-width: 820px;
      margin: 0 auto;
      padding: 32px;
      background-color: #fff;
      border: 1px solid #c1bce2;
      border-radius: 24px;
      text-align: center;
      .material-symbols-rounded {
        display: inline-block;
        margin-bottom: 16px;
        font-size: 48px;
        color: #5186EC;
      }
      h2 {
        margin-bottom: 16px;
        font-size: 26px;
        font-weight: 900;
        color: #111;
      }
      p {
        max-width: 30em;
        margin: 0 auto 12px;
        font-size: 16px;
        line-height: 1.8;
        color: #333;
      }
      .cta-btn-wrap a.cta-btn{
        filter:none;
        background: #FFF;
        border: 1px solid #847ac6;
        color: #847ac6;
        height: 64px;
        font-size: 20px;
        }
      a.cta-btn.size-m > span{
          font-size: 24px;
      }
    }

    @media screen and (max-width: 768px) {
      padding: 32px 0;
      .mig-card {
        padding: 32px 24px;

        h2 { font-size: 21px; }
        p { font-size: 15px; }

        .cta-btn-wrap a.cta-btn{
            font-size: 20px;
        }
      }
    }
  }
    

  /* ============================================================
     サポート体制
     ============================================================ */
  .support {
    padding: 54px 0;

    .sup-list {
      display: flex;
      align-items: stretch;
      gap: 20px;

      .box {
        flex: 1;
        padding: 28px 26px;

        background-color: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 18px;

        .material-symbols-rounded {
          font-size: 36px;
          color: #5186EC;
        }

        h3 {
          margin: 12px 0 8px;
          font-size: 17px;
          font-weight: 700;
          color: #5186EC;
        }

        p {
          font-size: 14.5px;
          line-height: 1.7;
          color: #333;
        }
      }
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;

      .sup-list { flex-direction: column; }
    }
  }

  /* ============================================================
     最後のCTA（資料請求誘導）
     ============================================================ */
  .cta-wrapper {
    padding: 48px 0;
    background-color: #f5fbfa;
    text-align: center;

    .lead { margin-top: 12px; }

    .cta-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .attention {
      margin-top: 18px;
      font-size: 13px;
      color: #5e7691;
    }

    @media screen and (max-width: 768px) {
      padding: 48px 0;

      .cta-area { display: block; }
      .cta-area .cta-btn-wrap { margin-bottom: 12px; }
    }
  }