body {
   background-color: #fbfbfb;
   font-family: 'Noto Sans JP', sans-serif;
   color: #333;
   line-height: 1.6;
 }

 .my-main-container {
   max-width: 1280px;
   margin: 0 auto;
   background-color: #ffffff;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
   min-height: 100vh;
 }

 .my-header {
   background-color: rgba(255, 255, 255, 0.98);
   border-bottom: 1px solid #eaeaea;
   padding: 15px 0;
   position: sticky;
   top: 0;
   z-index: 1000;
 }

 .my-header-title {
   font-size: 1.2rem;
   font-weight: bold;
   margin: 0;
   color: #222;
 }

 .my-section-margin {
   padding: 30px 0;
   border-bottom: 1px solid #f0f0f0;
 }

 .my-section-margin:last-child {
   border-bottom: none;
 }

 .my-section-title {
   font-size: 1.8rem;
   font-weight: bold;
   margin-bottom: 30px;
   text-align: center;
   color: #212529;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .my-sub-heading {
   font-size: 1.2rem;
   font-weight: bold;
   color: #212529;
   margin-top: 30px;
   margin-bottom: 15px;
   border-left: 4px solid #212529;
   padding-left: 10px;
 }

 /* リンク用共通ボタンデザイン */
 .my-btn-base {
   display: inline-block;
   text-decoration: none;
   text-align: center;
   transition: all 0.3s ease;
   font-weight: bold;
 }

 /* =========================================================
           シンプル 
 ========================================================= */
 .my-hero-modern {
   background-color: #f8f9fa;
   padding: 30px 20px;
   border-left: 6px solid #212529;
   border-radius: 4px;
 }

 .my-card-modern {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
   border-radius: 4px;
   height: 100%;
   transition: box-shadow 0.3s ease;
 }

 .my-card-modern:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .my-btn-modern {
   background-color: #212529;
   color: #ffffff;
   border-radius: 4px;
   padding: 15px 40px;
   border: 1px solid #212529;
   font-size: 1.1rem;
 }

 .my-btn-modern:hover {
   background-color: #ffffff;
   color: #212529;
 }

 /* 画像スタイル */
 .my-main-image {
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 4px;
 }

 /* テーブルスタイル */
 .my-table-modern {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 20px;
 }

 .my-table-modern th,
 .my-table-modern td {
   border: 1px solid #dee2e6;
   padding: 12px 15px;
   vertical-align: middle;
 }

 .my-table-modern th {
   background-color: #f8f9fa;
   color: #212529;
   font-weight: bold;
   width: 25%;
 }

 /* リスト・テキストスタイル */
 .my-list-custom {
   list-style-type: none;
   padding-left: 0;
 }

 .my-list-custom li {
   margin-bottom: 10px;
   padding-left: 1.5em;
   text-indent: -1.5em;
 }

 .my-list-custom li::before {
   content: "◆";
   color: #212529;
   margin-right: 0.5em;
 }

 .my-text-small {
   font-size: 0.85rem;
   color: #6c757d;
 }

 /* フッターリンク */
 .my-footer-links {
   background-color: #212529;
   padding: 20px 0;
   text-align: center;
 }

 .my-footer-links a {
   color: #ffffff;
   text-decoration: none;
   margin: 0 10px;
   font-size: 0.9rem;
   display: inline-block;
 }

 .my-footer-links a:hover {
   text-decoration: underline;
 }

 /* 行程表スタイル */
 .my-itinerary-day {
   font-weight: bold;
   background-color: #f8f9fa;
   padding: 8px 15px;
   border-left: 3px solid #212529;
   margin-top: 15px;
 }

 /* =========================================================
           カルーセルインジケーターカスタム
========================================================= */
 .my-carousel-custom {
   margin-bottom: 3rem !important;
 }

 .my-carousel-custom .carousel-indicators {
   bottom: -2.5rem;
 }

 .my-carousel-custom .carousel-indicators [data-bs-target] {
   background-color: #adb5bd;
   /* 非アクティブ時の色 */
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   margin: 0 5px;
 }

 .my-carousel-custom .carousel-indicators .active {
   background-color: #212529;
   /* アクティブ時の色 */
 }

 /* =========================================================
           モバイルカスタム
========================================================= */
 @media (max-width: 768px) {

   .my-hero-modern {
     border-left: 0px;
     border-bottom: 6px solid #212529;
     padding: 10px 0px;
   }

   .my-header-title {
     padding-bottom: 10px;
   }

   .my-section-margin{
    padding:5px 0;
   }

 }