﻿/* =========================================
   Richlift footer 最終版
   ・fixed は使わない
   ・ページ最下部に自然に配置
   ・PC/SP 共通で崩れない
   ========================================= */

/* --- 基本リセット（安全） --- */
#w2-richlift-footer-wrap{
  width: 100%;
  position: relative !important;
  box-sizing: border-box;
}
#w2-richlift-footer-wrap *{
  box-sizing: border-box;
}

/* =========================================
   レイアウトの核：footerを最下部に押し下げる
   ========================================= */

html, body{
  height: 100%;
}

/* bodyを縦flex化 */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* メインコンテンツを伸ばす（W2対策で広めに指定） */
#rootTemplate,
main,
.l-container-wrap__body,
.p-page-home,
.p-page-error{
  flex: 1 0 auto;
}

/* フッターは縮まない */
#w2-richlift-footer-wrap{
  flex-shrink: 0;
}

/* =========================================
   PC / SP 表示切り替え
   ========================================= */

/* PCデフォルト */
#w2-richlift-footer-wrap .w2-footer-pc{
  display: block;
}
#w2-richlift-footer-wrap .w2-footer-sp{
  display: none;
}

/* SP */
@media (max-width: 767px){
  #w2-richlift-footer-wrap .w2-footer-pc{
    display: none;
  }
  #w2-richlift-footer-wrap .w2-footer-sp{
    display: block;
  }
}

/* =========================================
   SP：ドロワー用（※固定はしない）
   ========================================= */
@media (max-width: 767px){

  /* ドロワー本体 */
  #w2-richlift-footer-wrap .w2-footer-drawer{
    background: #fff;
    border-top: 1px solid #e6e6e6;
  }

  #w2-richlift-footer-wrap .drawer-section{
    margin: 16px 0;
  }

  #w2-richlift-footer-wrap .drawer-section .section-title{
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    letter-spacing: .08em;
  }

  #w2-richlift-footer-wrap .w2-footer-drawer a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #222;
  }

  #w2-richlift-footer-wrap .drawer-close{
    display: block;
    margin: 16px 0 0;
    padding: 12px;
    text-align: center;
    background: #f3f3f3;
    border-radius: 10px;
    cursor: pointer;
  }
}


/* ==============================
   フッターが上に出るページ対策（orderで最後へ）
   ============================== */

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 見た目の順番を固定（DOMの出力順に左右されない） */
#w2-richlift-header{ order: 0; }
#rootTemplate{ order: 1; flex: 1 0 auto; }
#w2-richlift-footer-wrap{ order: 2; flex-shrink: 0; margin-top: auto; }

/* 念のため：main等があっても伸びられるように */
main{ flex: 1 0 auto; }
