/* ============================================================
   footer.css
   ------------------------------------------------------------
   このファイルは、複数のページ(menu.html・faq.html・news.html など)で
   共通して使う「本格的なフッター」のスタイルをまとめたファイルです。

   もともと index.html だけが持っていたフッター(お店の情報・地図・SNS)を
   他のページにも同じ形で表示できるように、style.css の中から
   フッター関連の部分だけを取り出して、このファイルに移しました。

   ★ 背景動画について ★
   ページ全体ではなく、「フッターの中だけ」に動画を敷いています。
   footer要素の中の一番奥(背面)に<video>タグを1つ置き、
   position:absoluteでフッターいっぱいに広げることで、
   フッターの背景として動画が流れて見えるようにしています。
   (ページ全体に動画を固定表示する仕組みではないので、
   このCSSを使うページのbody側で特別な準備は不要です)
   ============================================================ */


/* ==============================
   フッター全体
   ============================== */
footer {
  position: relative;    /* 中の動画・幕・コンテンツを重ねて配置するための基準にする */
  overflow: hidden;        /* 動画がフッターの外にはみ出さないようにする */

  background-color: #2b2620;   /* 動画が読み込まれる前や、読み込みに失敗したときの下地の色(濃い茶色) */
  color: #f6f1e7;                 /* 文字色は白系(クリーム色)にする */
  padding: 80px 20px;              /* 上下・左右の余白 */

  /* ------------------------------------------------------------
     画面の幅いっぱいに広げるためのテクニック
     ------------------------------------------------------------
     detail.htmlのように、bodyタグ自体に
     「最大幅◯◯px + 中央寄せ(margin: 0 auto)」の指定があるページでは、
     何も指定しないと、フッターもその幅に合わせて縮んでしまい、
     左右に余白ができてしまいます。

     そこで、以下の3行を使って、
     「一度画面の横幅いっぱい(100vw)に広げてから、
       左右にずらして中央に戻す」ということをしています。
     これにより、親要素(body)の幅に関係なく、
     フッターだけが画面の端から端まで広がるようになります。

     ※100vwは「スクロールバーの分の幅」まで含めて計算されることがあり、
       そのままだと横スクロールバーが出る原因になります。
       そのため、このテクニックを使うページでは、必ず
       html・body両方に overflow-x: hidden を付けて、
       はみ出した分が見えない(スクロールもできない)ようにしています。
       (この指定は、各ページの共通CSSファイル側に入っています)
     ------------------------------------------------------------ */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* フッターの背景として流れる動画 */
/* position:absoluteで、フッターの中いっぱいに敷き詰める(フッターの外には出ない) */
.footer-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;   /* フッターの形に合わせて、隙間なく敷き詰める(はみ出た部分は切れる) */
  z-index: 0;             /* フッターの中では一番奥(後ろ)に表示する */
}

/* 動画の上に薄く黒を重ねて、文字を読みやすくする「幕」 */
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;                  /* 動画より手前、文字より奥に表示する */
  pointer-events: none;   /* この幕がリンクのクリックなどを邪魔しないようにする */
}

/* フッターの中身(お店情報・地図・著作権)を、動画と「幕」より手前に表示する */
.footer-inner,
.footer-copyright {
  position: relative;
  z-index: 2;
}

/* 左側(お店情報)と右側(地図)を入れる箱 */
/* スマホでは、まず縦並びにしておく */
.footer-inner {
  display: flex;
  flex-direction: column;   /* 縦に並べる(お店情報が上、地図が下) */
  gap: 30px;                  /* 上下のすき間 */
}


/* ==============================
   お店のロゴ(フッター内)
   ヘッダーのロゴ(.logo)と同じ考え方で、
   「アイコン画像」と「文字2行」を横並びにしています
   ============================== */
.footer-logo {
  display: flex;         /* アイコンと文字を横に並べる */
  align-items: center;    /* 縦の位置を真ん中に揃える */
  gap: 10px;                /* アイコンと文字のすき間 */
  margin: 0 0 14px 0;
}

/* フッターのロゴアイコン画像の大きさ(高さを基準に、横幅は自動調整) */
.footer-logo-icon {
  height: 40px;
  width: auto;
  flex-shrink: 0;   /* 画像がつぶれて縮まないようにする */
}

/* ロゴ文字2行(小さい文字+大きい文字)をまとめる箱 */
.footer-logo-text {
  display: flex;
  flex-direction: column;
}

/* ロゴの上の行(小さい文字):「北海道しゃぶしゃぶ」 */
.footer-logo-sub {
  font-size: 13px;
  margin: 0;
  white-space: nowrap;   /* 折り返さないようにする */
}

/* ロゴの下の行(大きい・太字):「エゾカムイ」 */
/* 注意:「Shippori Mincho」というフォントを使うので、
   このフッターを置くページ側で、あらかじめこのフォントを
   Googleフォントから読み込んでおく必要があります。 */
.footer-logo-main {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  font-weight: bold;
  margin: 2px 0 0 0;
  white-space: nowrap;
}


/* ==============================
   住所・営業時間・ナビゲーション
   ============================== */

/* 「住所・電話・営業時間」と「ナビゲーション」をまとめる箱。
   スマホでは縦並び(今まで通り)。PCでは下の@mediaで横並びに切り替える。 */
.footer-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 住所の中の「秋水ビル 3階」の前にある改行(sp-only-break)。
   PCでは横幅に余裕があるので、ここでは改行しない(非表示にする)。
   スマホ用のスタイルは、下の @media (max-width: 767px) の中で表示に切り替えている。 */
.sp-only-break {
  display: none;
}

/* 住所・営業時間の文字 */
.footer-info p {
  font-size: 16px;
  margin: 0 0 8px 0;
}

/* 電話番号のリンク部分(タップ・クリックで発信できる) */
#footer-tel a {
  color: inherit;              /* まわりの文字と同じ色にする(リンクの初期値である青色にしない) */
  text-decoration: underline;  /* リンクだと分かるよう、下線だけは残しておく */
}

#footer-tel a:hover {
  color: #C5A059;   /* マウスを乗せたときだけ、サイトのテーマカラー(金色系)に変える */
}

/* ★追加★
   PC(画面幅768px以上)では、電話番号を「押せないただの文字」にする。
   スマホでは電話番号をタップしてそのまま発信できると便利だが、
   PCでは電話をかける操作自体ができないため、リンクにする意味が薄く、
   むしろ「クリックできそうに見えるのに何も起きない」のは不親切。
   そこで、PCのときだけ見た目・動きの両方を「ただの文字(pタグ)」と
   同じにしている。 */
@media (min-width: 768px) {
  #footer-tel a {
    color: inherit;              /* リンクらしい色を消す */
    text-decoration: none;       /* 下線も消す */
    cursor: default;             /* マウスカーソルも「指マーク」ではなく通常の矢印にする */
    pointer-events: none;        /* クリックしても電話アプリが起動しないようにする */
  }

  #footer-tel a:hover {
    color: inherit;   /* PCではマウスを乗せても色を変えない(リンクではないため) */
  }
}

/* フッター内のナビゲーション */
.footer-nav {
  margin-top: 16px;
}

/* リンクの一覧を縦並びにする(1行に1つずつ表示) */
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  color: #f6f1e7;
  text-decoration: none;
  font-size: 16px;
}

/* リンクにカーソルを乗せたらゴールド色にする */
.footer-nav a:hover {
  color: #C5A059;
}


/* ==============================
   SNSアイコン(フッター用)
   ============================== */

/* アイコンを入れている箱を、横並びにする */
.sns-icons {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

/* アイコン1つ1つの配置 */
.sns-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* アイコンにマウスを乗せたときに、少し薄くする */
.sns-icon:hover {
  opacity: 0.6;
}

/* SNSアイコンの画像(LINE・Instagram・TikTok・Facebook)のサイズ調整。
   元の画像は黒色のアイコンだが、フッターの背景が濃い色なので、
   filterを使って白色に変換して見やすくしている。 */
.sns-icon-image {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

/* フッターのSNSアイコンの位置(左寄せ+上に少しすき間をあける) */
.footer-sns-icons {
  justify-content: flex-start;
  margin-top: 20px;
}


/* ==============================
   Googleマップ
   ============================== */

/* Googleマップを入れる箱 */
.map-box {
  position: relative;  /* 上に重ねるリンク(map-link-overlay)を置くために必要 */
  width: 100%;
  height: 250px;         /* 地図の高さ */
}

/* 地図の上に重ねる、透明なリンク */
/* これがあることで、地図のどこを押してもGoogleマップに飛べるようになる */
.map-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ==============================
   著作権表記
   ============================== */
.footer-copyright {
  text-align: center;
  font-size: 13px;
  color: #cfc3ac;
  margin: 40px 0 0 0;
}


/* ==============================
   画面の幅で見た目を切り替える(レスポンシブデザイン)
   ============================== */

/* 画面の幅が768px以上のとき(パソコンなど広い画面)だけ、
   この { } の中のCSSが使われる */
@media (min-width: 768px) {

  /* フッターを横並びにする(左に文字、右に地図) */
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* 左側の情報の幅を決める(広がりすぎないように) */
  .footer-info {
    width: 45%;
  }

  /* 「住所・電話・営業時間」ブロックと「ナビゲーション」を、
     PCのときだけ横並びにする(スマホでは縦並びのまま) */
  .footer-details {
    flex-direction: row;
    gap: 48px;
  }

  /* 横並びにしたとき、ナビゲーションの上の余白(margin-top)は不要なので消す */
  .footer-details .footer-nav {
    margin-top: 0;
  }

  /* 右側の地図の幅を決める */
  .map-box {
    width: 45%;
    height: 280px;
  }

  /* ※以前はここに「著作権表記の下の余白を広げる」指定
     (.footer-copyright { margin-bottom: 110px; }) がありましたが、
     TOPページ(index.html)には無い余分な余白だったため削除しました。
     これにより、TOP以外のページ(detail.htmlなど)でも
     TOPページと同じ余白の付き方になります。 */

}

/* 画面の幅が767px以下のとき(スマホなど狭い画面)だけ、
   この { } の中のCSSが使われる */
@media (max-width: 767px) {

  /* 住所の「秋水ビル 3階」の前の改行を、スマホのときだけ表示する */
  .sp-only-break {
    display: inline;
  }

}