/* =========================================
   共通レイアウト・背景・ヘッダー・フッター
   ========================================= */

/* ---- カラーバリエーションなどの共通変数 ---- */
:root{
  --bg:#fff;
  --ink:#1d1f24;
  --brand:#0b5aa7;
}

/* ---- ベース設定 ---- */
*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

/* =========================================
   背景（細かい升目＋全体レイアウト）
   ========================================= */
body{
  margin:0;
  font-family:
    "Noto Sans JP",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:var(--ink);

  /* 升目っぽい背景パターン */
  background:
    linear-gradient(to bottom, transparent 24px, #cfe5f2 25px),
    linear-gradient(to right,  transparent 24px, #cfe5f2 25px);
  background-size:25px 25px;
  background-color:#f7fbfd;

  /* フッターを画面下に持っていくためのレイアウト */
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

/* ★ メインコンテンツ領域（ヘッダーとフッターの間）
   body の flex 子要素のうち、ここだけ flex:1 を付けて
   残りの高さを全部受け持たせる */
.page-inner{
  flex:1 0 auto;
  width:100%;
}

/* =========================================
   共通ヘッダー（左上ロゴバー）
   ========================================= */

.site-header{
  padding:0;
}

/* 左上のブランドバー（BBYロゴ部分） */
.brandbar{
  display:inline-flex;
  align-items:center;
  padding:8px 40px;
  background:var(--brand);
  background: linear-gradient(178deg, #0277e9, #054e96);
  border-radius:0 0 16px 16px;
  margin-left:50px;
  box-shadow:0 1px 0 #063e78,
             0 8px 20px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.15);
}

.brandbar img{
  height:55px;
  width:auto;
  display:block;
}

/* =========================================
   共通フッター
   ========================================= */

.site-footer{
  flex-shrink:0;                     /* フッターが押し縮められないように */
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:0px 12px;
  font-size:12px;
  border-top:3px solid #063e78;
}

/* =========================================
   スマホ向け（幅 640px 以下）
   ========================================= */
@media (max-width:640px){

  /* ロゴバーを少しコンパクトに */
  .brandbar{
    margin-left:12px;
    padding:2px 12px;
    border-radius:0 0 12px 12px;
  }

  .brandbar img{
    height:36px;
  }

  /* フッターの文字サイズも少し小さめに */
  .site-footer{
    font-size:11px;
    padding:9px 10px;
  }
}