/* ==========================================================
   reserve-chara.css
   ----------------------------------------------------------
   ★練習7で新しく作ったファイル★
   右下に出る「エゾカムイくん」予約ボタン専用のCSSです(PC・スマホ共通)。

   練習6ではトップページ(style.css)だけに書いていましたが、
   全ページで同じ見た目にするため、このファイルにまとめました。
   各HTMLの<head>で、ほかのCSSより「最後」に読み込んでいます。
   (最後に読み込むと、同じ指定がある場合こちらが優先されるため、
    ページごとのCSSに書いてある丸いボタン用の大きさ・位置を、
    エゾカムイくん用に上書きできます)

   ★練習7でスマホにも対応★
   最初はPCだけでしたが、スマホでも140pxの大きさで表示するように
   しました。画面の幅ごとの大きさは次の通りです。
     ・スマホ(〜767px)          : 140px / 看板の文字 10.5px
     ・タブレット・狭いPC(768〜1199px): 170px / 看板の文字 12px
     ・PC(1200px〜)             : 220px / 看板の文字 15px

   ・大きさや位置を変えたいときは、このファイルだけ直せば
     全ページに反映されます。
   ・看板の文字は、トップページは script.js、
     それ以外のページは header.js の "reserve-chara-text" です。
   ========================================================== */

/* ==========================================================
   【しくみ】
   ・.reserve-badge(予約ボタンの<a>)の中に、今までの丸いボタンの部品と、
     エゾカムイくんのイラスト(.reserve-badge__chara)の両方が入っている。
   ・丸いボタンの部品(黄色い丸・飾り枠・ご予約の文字)は隠して、
     エゾカムイくんのほうだけを表示する。
   ・「スクロールしたら表示」「メニューを開いたら隠す」などの動きは、
     <a>タグ自体に付いているので、今まで通りそのまま効く。

   【看板の文字の位置】
   イラストの看板は、少し左に傾いている(約15度)。
   そこで文字の箱を、看板の真ん中(左から22%・上から20%)に置き、
   transform: rotate(-15deg) で看板と同じ角度に傾けている。
   %で指定しているので、ボタンの大きさを変えても
   文字は看板からずれない。
   ========================================================== */

/* ---------- まずはスマホ用(基本の指定) ---------- */

/* ボタン全体の大きさと位置(スマホ) */
.reserve-badge {
  width: 140px;
  height: 140px;

  /* 「↑TOP」ボタンのすぐ上に来るように置く */
  right: 10px;
  bottom: 74px;
}

/* 丸いボタンの部品(黄色い丸・飾り枠・ご予約の文字)は隠す */
.reserve-badge__fill,
.reserve-badge__frame,
.reserve-badge__txt {
  display: none;
}

/* エゾカムイくん(イラスト＋看板の文字)を入れる箱 */
.reserve-badge__chara {
  display: block;
  position: relative;   /* 中の文字を、この箱を基準に置くため */
  width: 100%;
  height: 100%;

  /* マウスを乗せたときに、ふわっと動かすための準備 */
  transition: transform 0.3s ease;
}

/* マウスを乗せると、少しだけ大きく＆上に浮く(主にPC用) */
.reserve-badge:hover .reserve-badge__chara {
  transform: translateY(-6px) scale(1.04);
}

/* 丸いボタン用の「半透明になる」ホバーは、イラストでは使わない */
.reserve-badge:hover {
  opacity: 1;
}

/* イラスト本体。影を付けて、ページから少し浮いて見えるようにする
   (drop-shadowは、透明な部分を除いた「形」にそって影が付く) */
.reserve-badge__chara-img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}

/* 看板の上に重ねる文字 */
.reserve-badge__chara-text {
  position: absolute;
  left: 22%;              /* 看板の中心(横) */
  top: 20%;               /* 看板の中心(縦) */
  width: 32%;             /* 看板の内側に収まる幅 */

  /* 自分の大きさの半分だけ左上に戻して「中心」を合わせ、
     看板と同じ角度(-15度)に傾ける */
  transform: translate(-50%, -50%) rotate(-15deg);

  text-align: center;
  color: #2b2620;         /* 黄色ボタンの文字と同じ、濃い焦げ茶色 */
  font-family: "Shippori Mincho", serif;
  font-size: 10.5px;      /* スマホ用の大きさ */
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;    /* 勝手に折り返さない(改行は<br>で決める) */
}

/* ---------- タブレット・少し狭いPC(768〜1199px) ---------- */
/* 本文(ニュースの「›」など)にかぶらないよう、PCよりひと回り小さく */
@media (min-width: 768px) {
  .reserve-badge {
    width: 170px;
    height: 170px;
    right: 24px;
    bottom: 88px;
  }

  .reserve-badge__chara-text {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* ---------- PC(1200px以上) ---------- */
@media (min-width: 1200px) {
  .reserve-badge {
    width: 220px;
    height: 220px;
  }

  .reserve-badge__chara-text {
    font-size: 15px;
  }
}

/* ---------- ハンバーガーメニューを開いているとき ---------- */
/* エゾカムイくんは丸いボタンより大きいので、メニューを開いている間は
   全ページで確実に隠す(トップ・お品書きのページには元から同じ指定が
   あったが、ニュース・記事・よくある質問・店内の案内のページには
   無かったため、ここで全ページ分まとめて指定している)。
   bodyの"nav-open"クラスは、header.js / script.js が付け外ししている。 */
body.nav-open .reserve-badge {
  display: none;
}