<!-- モダンでレスポンシブなタブ専用スタイル -->
<style>


        body {
          font-family: 'Noto Sans JP', sans-serif;
          background-color: #fff;
          margin: 0;
          padding: 0;

        }

        .pl-container {
          max-width: 1600px;
          margin: 0 auto;
          padding: 2rem 2rem;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .pl-title {
          font-size: 3.25rem;
          text-align: center;
          color: #1f2937;
          font-family: serif;
          margin-bottom: 6rem;

          padding-bottom: 1.5rem;
          width: 100%;
        }

        .pl-title-gradient {
          background: linear-gradient(to right, #556b2f, #6b8e23);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;

        }

        .pl-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 3rem;
          width: 100%;
          justify-content: center;
          margin: 0 auto;
        }

        .pl-card {
          background: #fff;
          border: 1px solid #d9e2c6;
          border-radius: 2.5rem;
          box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
          padding: 3rem;
          transition: box-shadow 0.3s ease-in-out;
          width: 480px;
          min-height: 720px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 0 auto;
          position: relative;
        }

        .pl-underline {
          width: 60%;
          height: 3px;
          margin-bottom: 6rem;
          background-color: #6b8e23;
          margin: 1rem auto;
          border-radius: 1.5px;
        }

        .pl-features li:first-child {
          margin-top: 2rem; /* ←お好みで調整 */
        }

        .pl-features li:last-child {
          border-bottom: none;
          margin-bottom: 1.8rem; /* ←価格との間に余白。お好みで */
        }


        .pl-card:hover {
          box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .pl-header h3 {
          font-size: 1.75rem;
          font-family: serif;
          font-weight: bold;
          color: #1f2937;
          margin-bottom: 0.5rem;
          text-align: center;
        }

        .pl-header p {
          font-size: 1rem;
          color: #6b7280;
          text-align: center;
        }

        .pl-features {
          list-style: none;
          padding: 0;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }

        .pl-features li {
          display: flex;
          align-items: center;

          gap: 0.75rem;
          font-size: 1.4rem;
          color: #374151;
          line-height: 1.6;
          border-bottom: 1px solid #e5e7eb;
          padding-bottom: 0.6rem;
          margin-bottom: 0.6rem;
        }


        .pl-icon-check::before{
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1rem;
        line-height: 1.8rem;
        text-align: center;
        border-radius: 50%;
        color: #fff;

        font-weight: bold;
        font-family: 'Noto Sans JP', sans-serif;
      }


      .pl-icon-x::before {
        content: "×";
        font-family: 'Arial Black', 'Noto Sans JP', sans-serif;
        font-weight: 900;
        font-size: 1rem;
        background-color: #9ca3af;
        color: #fff;
        border-radius: 50%;
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        line-height: 1.8rem;
        text-align: center;

        transform: translateX(-0.08rem); /* ★補正値：-0.05〜-0.1rem */
      }

      .pl-icon-check::before {
        content: "✓";  /* ✅ バランスの良いチェック記号 */

        background-color: #4b6f44;
      }

      .pl-icon-x::before {
        content: "×";  /* ✅ バランスの良いバツ記号 */
        background-color: #9ca3af;
      }



        .pl-note {
          font-size: 0.75rem;
          color: #9ca3af;
        }

        .pl-price {
          font-size: 3rem;
          font-weight: 900;
          color: #556b2f;
          margin-top: 1.5rem;
          text-align: center;
        }

        .pl-tax {
          font-size: 1rem;
          color: #6b7280;
          font-weight: 500;
        }

        .pl-button {
          width: 100%;
          background: linear-gradient(to right, #556b2f, #6b8e23);
          color: #fff;
          padding: 1rem 0;
          border: none;
          border-radius: 0.75rem;
          font-size: 1rem;
          font-weight: 600;
          transition: filter 0.3s ease-in-out;
          cursor: pointer;
        }

        .pl-button:hover {
          filter: brightness(1.05);
        }

        .pl-notes {
          margin-top: 2rem;
          text-align: left;
          font-size: 0.75rem;
          color: #6b7280;
          line-height: 2.1;
        }



                /* スマホサイズ（最大767px）では1列、タブレット（768px〜1023px）では2列に */
                @media screen and (max-width: 767px) {
                  .pl-grid {
                    grid-template-columns: 1fr;
                    padding: 0 1rem;
                  }

                  .pl-card {
                    width: 90vw; /* 画面幅の90%を使用 */
                    max-width: 600px;
                    margin: 0 auto;
                    padding: 2rem 1.5rem;
                    border-radius: 1.5rem;
                    min-height: auto;
                  }

                  .pl-header h3 {
                    font-size: 1.3rem;
                    text-align: center;
                    white-space: nowrap; /* 改行防止 */
                  }

                  .pl-header p {
                    font-size: 0.9rem;
                    text-align: center;
                  }

                  .pl-features li {
                    font-size: 1rem;
                    white-space: nowrap; /* 改行を防止 */
                  }

                  .pl-price {
                    font-size: 2rem;
                    text-align: center;
                    margin-bottom:18px;
                  }

                  .pl-button {
                    font-size: 1rem;
                    padding: 0.9rem;
                    width: 100%;
                  }

                  .pl-note {
                    font-size: 0.65rem;
                  }

                  .pl-icon-check::before,
                  .pl-icon-x::before {
                    width: 1.5rem;
                    height: 1.5rem;
                    font-size: 0.85rem;
                    line-height: 1.5rem;
                  }

                  .pl-title {
                    font-size: 1.8rem;
                    margin-bottom: 3rem;
                    padding-bottom: 1rem;
                    white-space: nowrap; /* 改行を防止 */
                  }

                  .pl-title-gradient {
                    font-size: 1.8rem;
                    white-space: nowrap;
                  }
                }


.tab-container {
  width: 100%;
  border-bottom: 1px solid #ccc;
  text-align: center;
  margin: 0 auto;
margin-bottom: 40px; /* 好きな値に調整 */
  /* 他のスタイルは既存のまま */
}

/* PC版 (769px以上) で幅を半分にする */
@media (min-width: 769px) {
  .tab-container {
    width: 50%;
  }
}

/* タブ一覧 (ul) */
.tabs {
  display: inline-flex;      /* 親要素に対して中央寄せ (inline-flex + text-align: center) */
  gap: 40px;                 /* タブ同士の隙間 */
  margin: 0;
  padding: 0;
  list-style: none;          /* liのマーカー除去 */
}

/* タブ1つ1つ (li) */
.tab-item {
  position: relative;        /* 下線をabsoluteで配置する場合に必要 */
  padding: 12px 0;          /* タブの上下余白 */
  cursor: pointer;           /* ホバー時にポインタに */
  color: #666;
  transition: color 0.3s ease;
}

/* ホバー時 */
.tab-item:hover {
  color: #333;
}

/* アクティブタブ (選択中) */
.tab-item.active {
  color: #333;              /* 選択時は文字を濃いめに */
  font-weight: 600;
  border-bottom: 3px solid #D94C3A; /* 赤い下線 (お好みで調整) */
}

/* すべてのパネルは非表示 */
.flow-tabs__panel {
  display: none !important;
}
/* アクティブなパネルだけ表示 */
.flow-tabs__panel.active {
  display: block !important;
}

/* 見出しのスタイル */
.pricing-header {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 1000;
  color: #2c3e50;
  text-align: center;
  margin: 1rem 0;
  letter-spacing: 1px;
}

/* リスト項目のスタイル（背景なしで目立たせる） */
.pricing-features-item {
  font-family: 'Lora', serif;
  font-size: 2.2rem;
  font-weight: 1000;
  color: #2c3e50;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative; /* 疑似要素の基準点 */
  display: inline-block;
  padding-bottom: 0px; /* 文字とマーカーの位置調整 */
}

/* マーカーの正しい配置 */
.pricing-features-item::after {
  content: '';
  position: absolute;
  left: 20px;
  bottom: 20px; /* マーカーが適切な位置に配置されるように */
  width: 120%;
  height: 10px;
  background: rgba(255, 223, 0, 0.6);
  z-index: -1;
  border-radius: 3px;
  transform: translateY(50%); /* これでより正確に中央に配置 */
}

.pricing-features-item::before {
  content: '';
  position: absolute;
  /* 中央寄せ */
  left: 70%;
}

/* 税込テキストの色は価格と同じに、フォントサイズだけ小さくする */
.tax-info {
  color: #2c3e50;
  font-size: 1.2rem; /* 価格より小さめに設定 */
  margin-left: 0.3rem;
}


.discount-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.5rem;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #e74c3c; /* 赤色に変更 */
  vertical-align: middle;
}


/* 割引後の価格を強調（赤・大きめ） */
.new-price {
color: #e74c3c;
font-size: 2rem;
font-weight: bold;
position: relative;    /* マーカー用の基準点 */
display: inline-block; /* 幅をテキストに合わせる */
line-height: 1.2;      /* マーカーの見え方調整用 */
}

.new-price::before {
content: "";
position: absolute;
bottom: 0.15em;                 /* テキスト下部に合わせて微調整 */
left: -5px;                     /* 左右のはみ出し量を微調整 */
right: -5px;
height: 0.3em;                  /* マーカーの太さ */
background: rgba(255, 223, 0, 0.6); /* 黄色っぽいマーカー色 */
z-index: -1;                    /* テキストの背面に配置 */
border-radius: 3px;             /* マーカーの角丸 */
}



.old-price {
position: relative;       /* 擬似要素の基準点 */
display: inline-block;    /* 幅の確保 */
margin-top: 1rem;         /* 必要に応じて余白調整 */
}

.old-price::before {
content: "";
position: absolute;
top: -8px;                /* テキストより少し上に配置 */
left: 0;
width: 100%;
height: 2px;              /* 線の太さ */
background-color: #000;    /* 線の色 */
}


/* タブの初期スタイル */
.line-tabs {
display: flex;
list-style: none;
margin: 2rem auto 1rem; /* お好みで調整 */
padding: 0;
justify-content: center; /* 中央寄せ */
position: relative;
border-bottom: 1px solid #ccc; /* 下線 */
}

/* タブボタン */
.line-tabs li {
position: relative;
padding: 0.75rem 1.5rem;
cursor: pointer;
color: #666;
font-weight: 600;
transition: color 0.3s ease;
}

/* ホバー時に少し強調 */
.line-tabs li:hover {
color: #333;
}

/* アクティブ状態 */
.line-tabs li.active {
color: #000;
}

/* アクティブなタブに下線を付ける(アニメーション) */
.line-tabs li.active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px; /* タブの下線と合わせる */
width: 100%;
height: 2px;  /* 下線の太さ */
background-color: #e74c3c; /* 下線の色 */
transition: width 0.3s ease;
}

/* タブコンテンツ */
.tab-content {
display: none; /* 初期非表示 */
margin-top: 1.5rem; /* コンテンツ上の余白 */
}

/* アクティブコンテンツを表示 */
.tab-content.active {
display: block;
}


/* スマホ用スタイル */
@media screen and (max-width: 767px) {
  /* 全体のパディングやレイアウト調整 */
  .price_container {
    padding: 1rem;
  }

  /* 見出しのフォントサイズを縮小 */
  .pricing-header {
    font-size: 1.4rem;
    margin: 0.5rem 0;
  }

  /* 価格部分のフォントサイズも縮小 */
  .pricing-features-item {
    font-size: 1.5rem;
  }

  /* 税込テキストの色は価格と同じに、フォントサイズだけ小さくする */
  .tax-info {
    color: #2c3e50;
    font-size: 1.2rem; /* 価格より小さめに設定 */
    margin-left: 0.3rem;
  }

  /* 画像サイズなどもスマホ向けに調整 */
  .pricing-img {
    width: 80%;
    display: block;
    margin: 0 auto;
  }

  /* 各プランの余白調整 */
  .pricing-plan {
    margin-bottom: 2rem;
  }

  .pricing-features-item::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 10px; /* マーカーが適切な位置に配置されるように */
    width: 160%;
    height: 10px;
    background: rgba(255, 223, 0, 0.6);
    z-index: -1;
    border-radius: 3px;
    transform: translateY(50%); /* これでより正確に中央に配置 */
  }

  .pricing-features-item::before {
    content: '';
    position: absolute;
    /* 中央寄せ */
    left: 80%;
  }

  .line-tabs {
    font-size: 0.7rem;     /* 文字を少し小さめに */
    flex-wrap: nowrap;     /* 改行させない */
    overflow-x: auto;      /* 横スクロール許可 */
    white-space: nowrap;   /* 改行しない */
  }
  .line-tabs li {
    flex: 0 0 auto;        /* 要素幅を自動にし、折り返さない */
    /* 余白が大きい場合は調整 */
    padding: 0.5rem 1rem;
  }

}




        /* 会社紹介 */

        .company-intro-section {
          position: relative;
          width: 100%;
          height: 1000px; /* 高さは好きに調整可能 */
          overflow: hidden;

        }

        .company-intro-wrapper {
          position: relative;
          width: 100%;
          height: 100%;
            background: #eeeeee;
        }

        .company-intro-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(128, 128, 128, 0.5); /* グレー半透明 */
          z-index: 1;
        }



        .company-intro-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
          width: 90%;
          max-width: 1200px;
          z-index: 2;
          color: #fff;
          font-family: 'Shippori Mincho B1', serif;
          font-size: 20px;
          font-weight: 500;
          line-height: 1.8;
        }
        .company-intro-text {
          flex: 1;
          padding-right: 50px;
        }
        .company-intro-map {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .company-intro-map img {
          max-width: 70%;
          height: auto;
          margin-top: 250px;
        }
        .map-button {
          display: inline-block;
          margin-top: 30px;
          padding: 10px 20px;
          border: 1px solid #fff;
          color: #fff;
          font-size: 22px;
          border-radius: 4px;
          text-decoration: none;
          transition: background 0.3s ease;
        }
        .map-button:hover {
          background: rgba(255,255,255,0.2);
        }

        .footer-title-wrapper {
          text-align: center; /* 親要素で中央揃えにする */
          margin-bottom: 2.5rem;
          margin-top:80px;
        }

        .footer-section-title {
          color: white;
          font-size: 2.4rem;
          font-weight: bold;
          display: inline-block; /* ::afterを中央に揃えるため */
          position: relative;
        }

        .footer-section-title::after {
          content: '';
          display: block;
          width: 60px;
          height: 3px;
          background-color: white;
          margin: 0.6rem auto 0;
          border-radius: 2px;
        }











        @media screen and (max-width: 767px) {
          .company-intro-section {
            height: 800px;
          }

          .company-intro-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 800px;
          }

          .company-intro-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: left;
            font-size: 0.85rem; /* 文字を小さく */
          }

          .company-intro-text {
            order: 1;
            padding: 0;
            width: 100%;
          }

          .company-intro-map {
            order: 2;
            margin-top: 20px;
          }

          .company-intro-map img.simple-map {
            max-width: 60%;
            height: auto;
            display: block;
            margin: 0 auto;
          }

          .footer-title-wrapper {
            margin-top: 30px;
            margin-bottom: 1rem;
            text-align: left;

          }
          .footer-section-title {
            color: white;
            font-size: 1rem;
            text-align: left;
            display: inline-block; /* ::afterを中央に揃えるため */
            position: relative;
          }

          .footer-section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 1px;
            background-color: white;
            margin: 0.6rem auto 0;
            border-radius: 2px;
          }
          .map-button {
            display: inline-block;
            margin-top: 20px;
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
          }
          .access-title {
            order: 3;
          }
        }

        .company-intro-text { order: 1; width: 100%; }
        .company-intro-map { order: 2; width: 100%; }
        .company-intro-access { order: 3; width: 100%; }

</style>
