/* フッター要素のレスポンシブ位置調整用CSS */
/* モバイル版とデスクトップ版で独立した位置設定が可能 */

/* =====================================
   scroll-top-button .line-buttonの設定
   ===================================== */
/* モバイル版（789px以下） */
@media (max-width: 789px) {
  body section.scroll-top-button .line-button {
    width: 100%;
    display: flex;
    justify-content: center;
    vertical-align: top;
    text-align: center;
    margin: -37px 0 24px; /* モバイル版のマージン */
    position: relative;
    top: 200px; /* モバイル版のtop位置 */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  body section.scroll-top-button .line-button::-webkit-scrollbar {
    display: none;
  }
  
  body section.scroll-top-button .line-button .btn {
    width: 342px;
    min-width: 342px;
    max-width: 342px;
    height: 56px;
    font-size: 20px;
    letter-spacing: 1.4px;
    flex-shrink: 0;
  }
}

/* デスクトップ版（790px以上） */
@media (min-width: 790px) {
  body section.scroll-top-button .line-button {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 128px 0 -81px; /* デスクトップ版のマージン */
    position: relative;
    top: 100px; /* デスクトップ版のtop位置を調整 */
    justify-content: center;
    overflow-x: visible;
  }
  
  body section.scroll-top-button .line-button .btn {
    width: 376px;
    min-width: 280px;
    height: 56px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    letter-spacing: 1.6px;
  }
}

/* =====================================
   footer要素のmargin-top設定
   ===================================== */
/* モバイル版（789px以下） */
@media (max-width: 789px) {
  body footer {
    margin-top: 158px; /* モバイル版のmargin-top */
  }
}

/* デスクトップ版（790px以上） */
@media (min-width: 790px) {
  body footer {
    margin-top: 180px; /* デスクトップ版のmargin-top */
  }
}

/* =====================================
   モバイル版（789px以下）の設定
   ===================================== */
@media (max-width: 789px) {
  /* ご相談はの文字位置 */
  .footer-before p {
    position: relative;
    text-align: center;
    font-size: 28px;
    line-height: 37px;
    font-weight: bold;
    margin-bottom: 49px;
    top: -95px; /* モバイル版の上下位置 */
    left: 50%; /* 中央基準点に配置 */
    transform: translateX(-50%); /* 自身の幅の50%左に移動して真の中央に */
    width: 100%; /* 幅を100%に設定 */
    padding: 0 15px; /* 左右にパディングを追加 */
    box-sizing: border-box; /* パディングを幅に含める */
  }
  
  /* 疑似要素を非表示 */
  .footer-before p::before,
  .footer-before p::after {
    display: none;
  }
  
  /* モバイル版ボトル画像の位置 */
  .bottle-mobile {
    display: block;
    margin-top: 47px; /* モバイル版のボトル画像上部マージン */
    margin-bottom: 20px; /* モバイル版のボトル画像下部マージン */
    position: relative;
    top: 0; /* モバイル版のボトル画像上下位置調整 */
  }
  
  /* モバイル版TOPボタンの位置 */
  .footer-before .top-button {
    bottom: 70px; /* モバイル版のTOPボタン下からの位置 */
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
  }
  
  /* モバイル版LINEボタンの位置調整 */
  .footer-before a img.Sponly {
    margin-top: 0; /* モバイル版のLINEボタン上部マージン */
    margin-bottom: 0; /* モバイル版のLINEボタン下部マージン */
  }
  
  /* モバイル版フッター全体の位置と設定 */
  .footer-before {
    position: absolute;
    top: 150px; /* モバイル版のフッターセクション全体の上部位置 */ 
    right: 0; /* モバイル版の右位置を0に固定 */
    width: 152%; /* モバイル版の幅を100%に固定 */
    max-width: 138%; /* 最大幅も100%に設定 */
    z-index: 2;
    padding: 0; /* パディングをリセット */
    margin: 0; /* マージンをリセット */
    box-sizing: border-box; /* ボックスサイジングを設定 */
  }
}

/* =====================================
   デスクトップ版（790px以上）の設定
   ===================================== */
@media (min-width: 790px) {
  /* ご相談はの文字位置（デスクトップ版） */
  .footer-wrapper .footer-before p {
    position: relative;
    text-align: center;
    font-size: 44px; /* デスクトップ版のフォントサイズ */
    line-height: 1.2;
    font-weight: bold;
    top: 0; /* デスクトップ版の上下位置 */
    left: 0; /* デスクトップ版の左右位置 */
    margin-bottom: 30px;
    z-index: 10; /* 文字をボトル画像より前面に配置 */
  }
  
  /* デスクトップ版でも疑似要素を非表示 */
  .footer-before p::before,
  .footer-before p::after {
    display: none;
  }
  
  /* デスクトップ版ボトル画像（左）の位置 */
  .footer-before .bottle-left {
    left: -90px; /* 画面左端から少し切れる位置 */
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40vw; /* ビューポート幅の40%に設定 */
    max-width: 600px; /* 最大幅を600pxに制限 */
    min-width: 300px; /* 最小幅を300pxに設定 */
    height: auto;
    z-index: 1;
  }
  
  /* デスクトップ版ボトル画像（右）の位置 */
  .footer-before .bottle-right {
    right: -90px; /* 画面右端から少し切れる位置 */
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40vw; /* ビューポート幅の40%に設定 */
    max-width: 600px; /* 最大幅を600pxに制限 */
    min-width: 300px; /* 最小幅を300pxに設定 */
    height: auto;
    z-index: 1;
  }
  
  /* ボトル画像のimgタグに対するスタイル */
  .footer-before .bottle-left img,
  .footer-before .bottle-right img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* デスクトップ版TOPボタンの位置 */
  .footer-before .top-button {
    bottom: 70px; /* デスクトップ版のTOPボタン下からの位置 */
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
  }
  
  /* デスクトップ版LINEボタンの位置調整 */
  .footer-before a {
    position: relative;
    display: block;
    margin-top: 102px; /* テキストから102px下に配置 */
  }
  
  .footer-before a img.Pconly {
    display: block;
    margin: 0 auto; /* 中央配置 */
    margin-bottom: 40px; /* 下部マージン維持 */
  }
  
  /* デスクトップ版フッター全体の位置と設定 */
  .footer-before {
    position: absolute;
    top: 90px; /* デスクトップ版のフッターセクション全体の上部位置 */
    left: 0; /* 画面全幅に対応 */
    right: 0; /* 画面全幅に対応 */
    width: 100%; /* 画面全幅 */
    z-index: 2;
  }
  
}

/* =====================================
   タブレット（790px〜1024px）の調整
   ===================================== */
@media (min-width: 790px) and (max-width: 1024px) {
  .footer-before .bottle-left,
  .footer-before .bottle-right {
    width: 35vw; /* タブレットでは35% */
    max-width: 350px;
    min-width: 250px;
  }
  
  .footer-before .bottle-left {
    left: -30px; /* 少し内側に */
  }
  
  .footer-before .bottle-right {
    right: -30px; /* 少し内側に */
  }
  
  /* テキストサイズも調整 */
  .footer-wrapper .footer-before p {
    font-size: 36px;
    padding: 0 280px; /* ボトルと重ならないようにパディング */
  }
}

/* =====================================
   小型デスクトップ（1025px〜1440px）の調整
   ===================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
  .footer-before .bottle-left,
  .footer-before .bottle-right {
    width: 38vw; /* 小型デスクトップでは38% */
    max-width: 450px;
    min-width: 300px;
  }
  
  .footer-before .bottle-left {
    left: -40px;
  }
  
  .footer-before .bottle-right {
    right: -40px;
  }
  
  /* テキストのパディング調整 */
  .footer-wrapper .footer-before p {
    padding: 0 350px; /* ボトルと重ならないように */
  }
}

/* =====================================
   中型デスクトップ（1441px〜1920px）の調整
   ===================================== */
@media (min-width: 1441px) and (max-width: 1920px) {
  .footer-before .bottle-left,
  .footer-before .bottle-right {
    width: 35vw; /* 中型デスクトップでは35% */
    max-width: 595px;
    min-width: 586px;
  }
  
  /* テキストのパディング調整 */
  .footer-wrapper .footer-before p {
    padding: 0 400px; /* ボトルと重ならないように */
  }
}

/* =====================================
   大型デスクトップ（1921px以上）の調整
   ===================================== */
@media (min-width: 1921px) {
  .footer-before .bottle-left,
  .footer-before .bottle-right {
    width: 30vw; /* 大型画面では30% */
    max-width: 600px;
    min-width: 450px;
  }
  
  /* テキストのパディング調整 */
  .footer-wrapper .footer-before p {
    padding: 0 450px; /* ボトルと重ならないように */
  }
}

/* =====================================
   位置調整のヒント
   ===================================== */
/* 
使用方法：
1. モバイル版（789px以下）のセクション内の値を変更してモバイル表示を調整
2. デスクトップ版（790px以上）のセクション内の値を変更してPC表示を調整
3. 各要素は独立して調整可能：
   - top/bottom: 上下の位置
   - left/right: 左右の位置
   - margin-top/margin-bottom: 要素の上下の余白
   - font-size: 文字サイズ
   - width: 幅の設定

footer要素のmargin-top調整：
- モバイル版: 8-12行目で調整
  - margin-top: 100px を変更してモバイル版の上部余白を調整
  
- デスクトップ版: 15-19行目で調整
  - margin-top: 180px を変更してデスクトップ版の上部余白を調整

.footer-before全体の位置調整：
- モバイル版: モバイル版セクション内で調整
  - top: 150px を変更して上下位置を調整
  - width: 152% でモバイル幅を設定
  
- デスクトップ版: デスクトップ版セクション内で調整
  - top: 90px を変更して上下位置を調整
  - width: 100% でデスクトップ幅を設定

注意：bodyをセレクタに追加することで、CSSの詳細度を上げて優先度を高くしています
例: body footer { margin-top: 100px; }
*/