/* セクション間の余白調整（Instagramとフッターの間） */
        .layout-instagram {
          margin-bottom: 0 !important;
        }

        .layout-footer {
          margin-top: 0 !important;
        }

        /* スマホ対応：ヒーローセクション */
        @media screen and (max-width: 767px) {

          /* キャンペーンテキストのフォントサイズ調整 */
          .promo-description {
            font-size: 0.9rem !important;
            line-height: 1.6 !important;
          }

          /* スマホ版: 固定フッター削除に伴い、body/htmlの下部余白を削除 */
          body,
          html {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
            height: auto !important;
            min-height: auto !important;
            overflow-x: hidden !important;
          }

          /* コンテンツ全体の余白を削除 */
          #maincontainer,
          #contents,
          .content,
          .styled {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
          }

          /* フッター自体の余白も強制削除 */
          .footer,
          .layout-footer {
            margin-bottom: 0 !important;
            padding-bottom: 15px !important;
          }

          .footer__copyright {
            margin-top: 30px !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
            display: block !important;
          }

          /* スマホ版: ヘッダーのボタン（新規配達・店舗案内）を非表示 */
          .heading-nav__btn {
            display: none !important;
          }

          /* お水の購入方法のアイコンを中央表示 */
          .page-top__contents {
            flex-direction: column !important;
            align-items: center !important;
          }

          .page-top__item {
            width: auto !important;
            text-align: center !important;
          }

          .page-top__item a {
            display: inline-block !important;
            min-width: 200px !important;
          }

          /* 特徴カード - モダンデザイン */
          .features.layout-features {
            background: #fff !important;
            padding: 40px 0 !important;
          }

          .features__title {
            margin-bottom: 25px !important;
          }

          .features__inner.inner {
            padding-left: 12px !important;
            padding-right: 12px !important;
          }

          .features__list {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
            padding: 0 !important;
          }

          .features__item {
            flex: none !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 20px 12px !important;
            border-radius: 16px !important;
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            box-shadow:
              0 4px 15px rgba(29, 32, 136, 0.08),
              0 1px 3px rgba(0, 0, 0, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
            border: 1px solid rgba(29, 32, 136, 0.1) !important;
            position: relative !important;
            overflow: hidden !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
          }

          .features__item::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 3px !important;
            background: linear-gradient(90deg, #1d2088, #4a5dc9, #7b8ee0) !important;
            border-radius: 16px 16px 0 0 !important;
          }

          .features__item:nth-child(1)::before {
            background: linear-gradient(90deg, #1d2088, #3a4cc0) !important;
          }

          .features__item:nth-child(2)::before {
            background: linear-gradient(90deg, #2e7d32, #4caf50) !important;
          }

          .features__item:nth-child(3)::before {
            background: linear-gradient(90deg, #0288d1, #29b6f6) !important;
          }

          .features__item:nth-child(4)::before {
            background: linear-gradient(90deg, #f57c00, #ffb74d) !important;
          }

          .features__icon {
            width: 70px !important;
            height: 70px !important;
            margin: 0 auto 12px !important;
            border-radius: 50% !important;
            overflow: hidden !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.8) !important;
          }

          .features__icon img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
          }

          .features__text {
            font-size: 0.85rem !important;
            line-height: 1.5 !important;
            color: #333 !important;
            text-align: center !important;
            margin: 0 !important;
          }

          .features__number {
            font-size: 1.1rem !important;
            font-weight: 800 !important;
            background: linear-gradient(135deg, #1d2088, #4a5dc9) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
          }

          .features__item:nth-child(2) .features__number {
            background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
          }

          .features__item:nth-child(4) .features__number {
            background: linear-gradient(135deg, #f57c00, #ff9800) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
          }

          /* キャンペーンラベル・ボタン調整 */
          .promo-actions {
            flex-direction: row;
            /* 横並び維持 */
            flex-wrap: nowrap;
            gap: 10px !important;
            justify-content: space-between;
          }

          .promo-label {
            font-size: 0.9rem !important;
            /* ラベル文字サイズ縮小 */
            padding: 6px 10px !important;
            white-space: nowrap;
            flex: 0 0 auto;
            /* 縮まないように */
          }

          .promo-btn {
            font-size: 0.9rem !important;
            /* ボタン文字サイズ縮小 */
            padding: 8px 15px !important;
            /* パディング縮小 */
            width: auto !important;
            flex: 1;
            /* 残りの幅を使う */
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          /* 画像を横幅いっぱいにする調整 */
          .promo-visual {
            width: calc(100% + 40px) !important;
            /* 親のpadding(20px*2)分広げる */
            max-width: none !important;
            margin-left: -20px !important;
            margin-right: -20px !important;
            margin-top: 20px;
          }

          .promo-image-mask {
            clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%) !important;
            /* 斜めカットを復活 */
            border-radius: 0 !important;
            aspect-ratio: 16/9 !important;
            /* スマホで見やすい比率に */
            box-shadow: none !important;
          }

          .mv__slider-thumbs {
            display: none !important;
            /* サムネイルを非表示 */
          }

          .mv__slider-main {
            padding-bottom: 30px !important;
            /* ドット表示用のスペース確保 */
          }

          .mv__slider-main .swiper-pagination {
            display: block !important;
            /* ドット表示 */
            bottom: 5px !important;
            /* パディング領域に配置 */
          }

          .swiper-button-next,
          .swiper-button-prev {
            display: flex !important;
            /* 矢印を表示 */
            width: 30px !important;
            /* スマホ用にサイズ調整 */
            height: 30px !important;
            margin-top: -15px !important;
            /* 中心位置調整 */
          }

          .swiper-button-next::after,
          .swiper-button-prev::after {
            font-size: 20px !important;
            /* 矢印アイコンのサイズ */
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            /* 視認性向上のための影 */
          }
        }

        /* スマホ対応：比較表は非表示（タブUIを使用） */
        @media screen and (max-width: 767px) {
          .comparison__table {
            display: none !important;
          }

          .comparison__apply-btn {
            font-size: 0.85rem !important;
            padding: 10px 15px !important;
            white-space: nowrap;
          }

          /* スマホ版: ページトップボタン非表示 */
          .pagetop2 {
            display: none !important;
          }

        }

/* セクション間の余白調整 */
          .layout-features {
            padding-bottom: 80px !important;
            /* 60px -> 80px もう少し広げる */
            margin-bottom: 0 !important;
          }

          .campaign__inner {
            padding: 0 20px;
            /* 特徴セクションと同じ左右余白を設定 */
          }

          .layout-campaign {
            padding-top: 50px !important;
            /* 元に戻す */
            margin-top: 0 !important;
          }

          .layout-comparison {
            padding-top: 100px !important;
            /* お水の購入方法の上部にスペース追加 */
          }

          .promo-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* ギャップを20pxに設定 */
            width: 100%;
            margin: 0 auto;
            position: relative;
          }

          .promo-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 20px 20px;
            /* パディングを20pxに設定 */
            overflow: hidden;
            /* 背景のはみ出し防止 */
            isolation: isolate;
            /* z-index管理 */
            gap: 2%;
            /* 間隔をさらに詰める (5% -> 2%) */
          }

          /* 偶数番目のテキストを右寄せに */
          .promo-item:nth-child(even) .promo-text-group {
            text-align: right;
          }

          /* 奇数番目（1, 3）のテキストを左寄せに（明示的に指定） */
          .promo-item:nth-child(odd) .promo-text-group {
            text-align: left;
          }

          /* 偶数番目は左右反転（ジグザグレイアウト） */
          .promo-item:nth-child(even) {
            flex-direction: row-reverse;
          }

          .promo-visual {
            width: 52%;
            /* 45% -> 52% に拡大 */
            max-width: 550px;
            /* 400px -> 550px に拡大 */
            position: relative;
          }

          /* --- 背景の英語キーワード --- */
          .promo-bg-text {
            position: absolute;
            top: 50%;
            /* 中央に戻す (80% -> 50%) */
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8rem;
            font-weight: 900;
            color: rgba(74, 93, 153, 0.05);
            /* 極薄い青 */
            white-space: nowrap;
            z-index: -1;
            font-family: Impact, sans-serif;
            pointer-events: none;
            letter-spacing: 0.05em;
          }

          /* --- 水しぶき効果（Blobs） --- */
          .promo-item::before {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(234, 244, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
            border-radius: 50%;
            z-index: -1;
            filter: blur(20px);
          }

          /* アイテムごとの装飾配置 */
          .promo-item:nth-child(1)::before {
            top: -50px;
            left: -50px;
            width: 400px;
            height: 400px;
          }

          /* 2番目の画像（配達）の調整 */
          .promo-item:nth-child(2) .promo-visual {
            width: 52%;
            /* 横幅を少し広げる */
            max-width: 550px;
          }

          .promo-item:nth-child(2) .promo-image-mask {
            aspect-ratio: 4/3;
            /* 画像の比率を少し高くする（16:9 -> 4:3） */
          }

          /* 2番目のテキスト位置を少し上に（PC専用） */
          @media (min-width: 768px) {
            .promo-item:nth-child(2) .promo-text-group {
              transform: translateY(-80px);
            }

            /* 2と3の間の隙間を縮める */
            .promo-item:nth-child(3) {
              margin-top: -40px;
            }

            /* 1と2の間の隙間を広げる */
            .promo-item:nth-child(2) {
              margin-top: 60px;
            }
          }



          /* 1つ目のアイテム（SHOP）だけ背景文字を少し左に */
          .promo-item:nth-child(1) .promo-bg-text {
            left: 47%;
            /* 47% に再設定 */
          }

          /* 2つ目のアイテム（DELIVERY）だけ背景文字を右に */
          .promo-item:nth-child(2) .promo-bg-text {
            left: 63%;
            /* 63% に微調整 */
          }

          /* 3つ目のアイテム（SERVER）だけ背景文字を少し左に */
          .promo-item:nth-child(3) .promo-bg-text {
            left: 42%;
            /* 42% に設定 */
          }

          .promo-item:nth-child(2)::before {
            bottom: -50px;
            right: -50px;
            background: radial-gradient(circle, rgba(255, 230, 230, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
          }

          /* 赤っぽい */
          .promo-item:nth-child(3)::before {
            top: 20%;
            right: 20%;
            width: 500px;
            height: 500px;
          }


          .promo-text-group {
            flex: 1;
            padding: 0 40px;
            position: relative;
          }

          .promo-label {
            display: inline-block;
            color: #4a5d99;
            font-size: 1.1rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            margin-bottom: 5px;
            /* border-bottom removed */
          }

          .promo-label.red {
            color: #e74c3c;
            /* border-color: #e74c3c; removed */
          }

          .promo-title {
            font-size: 2.4rem;
            /* 1リットルなどを少し小さく (3.2rem -> 2.4rem) */
            font-weight: 800;
            color: #0075c2;
            /* 少し濃いめの青（信頼感・視認性UP）に変更 */
            line-height: 1.4;
            margin: 10px 0 20px;
            letter-spacing: -0.02em;
            text-shadow: 2px 2px 0 #fff;

            /* 青い縦線強制削除 */
            border-left: none !important;
            padding-left: 0 !important;
            background: none !important;

            /* 下線追加（ここに戻す） */
            display: inline-block;
            border-bottom: 4px solid #4a5d99;
            /* 濃い青のボーダー */
            padding-bottom: 5px;
          }

          .promo-title::before,
          .promo-title::after {
            content: none !important;
            display: none !important;
          }

          .promo-label {
            border: none !important;
            background: none !important;
            /* 万が一の背景線も削除 */
          }

          .promo-title span {
            color: #e74c3c;
            /* ここだけ赤に戻す（インパクト重視） */
            font-size: 4.6rem;
            /* 30円などをさらに大きく (5.2rem -> 4.6rem) */
            font-family: "Noto Sans JP", sans-serif;
            margin: 0 5px;
            display: inline-block;
            transform: rotate(-2deg);
            /* 少し傾けて動きを出す */
            line-height: 1;
            /* 行間が開かないように詰める */
            letter-spacing: 0.1em;
            /* 文字間を広げる */
          }

          .promo-title small {
            font-size: 1.4rem;
            color: #333;
          }

          .promo-description {
            font-size: 1.3rem;
            color: #1a3452;
            /* 上の青(#0075c2)と調和する濃いネイビーに変更 */
            line-height: 1.8;
            margin-bottom: 25px;
            font-weight: 500;
            /* 少しだけ太く */
          }

          .promo-btn {
            display: inline-flex;
            align-items: center;
            background: #4a5d99;
            color: #fff !important;
            /* 強制的に白にする */
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(74, 93, 153, 0.3);
          }

          .promo-btn:hover {
            background: #39487a;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(74, 93, 153, 0.4);
          }

          .promo-btn::after {
            content: "→";
            margin-left: 10px;
            transition: transform 0.3s;
          }

          .promo-btn:hover::after {
            transform: translateX(5px);
          }

          /* ラベルとボタンを横並びにするコンテナ */
          .promo-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 10px;
          }

          /* 偶数番目は右寄せレイアウトなので並び順も調整 */
          .promo-item:nth-child(even) .promo-actions {
            justify-content: flex-end;
          }

          /* ラベルのスタイル調整（横並び用） */
          .promo-label {
            margin-bottom: 0;
            /* 下マージン削除 */
            font-size: 1.1rem;
            /* 1.0rem -> 1.1rem に少し大きく */
            background: #f0f4ff;
            /* 薄い背景でボタンっぽく */
            padding: 8px 15px;
            border-radius: 4px;
            color: #4a5d99 !important;
            /* 色を統一（赤や他の色が混ざらないように） */
            font-weight: bold;
          }

          .promo-label.red {
            background: #ffeaea;
            color: #4a5d99 !important;
            /* 赤ラベルも文字色は青に統一 */
          }



          /* 画像の装飾（blob shape） */
          .promo-image-mask {
            width: 100%;
            aspect-ratio: 4/3;
            /* 正方形(1) -> 4:3 に変更 */
            border-radius: 0;
            clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
            overflow: hidden;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
            background: #fff;
          }

          /* 偶数番目の画像マスク形状を反転（削除：すべて同じ向きに） */
          /* .promo-item:nth-child(even) .promo-image-mask {
            clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
          } */

          .promo-image-mask img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
          }



          @media (max-width: 767px) {
            .promo-list {
              gap: 40px;
            }

            .promo-item,
            .promo-item:nth-child(even) {
              flex-direction: column-reverse;
              text-align: center;
              padding: 20px 0;
            }

            .promo-bg-text {
              font-size: 4rem;
              opacity: 0.1;
            }

            .promo-text-group {
              padding: 20px 0 0;
            }

            .promo-visual {
              width: 80%;
              max-width: 300px;
            }

            .promo-title {
              font-size: 2.2rem;
              /* スマホも少し大きく */
            }

            .promo-title span {
              font-size: 2.8rem;
            }
          }