@charset "UTF-8";
/* ==========================================================================
   HOGUGU — 「※」タップ領域 ＆ フッター注釈  追加スタイル
   今回追加した分のみです。style.css は変更していません。
   style.css より後に読み込んでください。
   下線は画像側に引いてあるため、本CSSは透明なタップ領域を作るだけです。
   ========================================================================== */

/* --- 1. 画像コンテナ（タップ領域の位置の基準） ---------------------------- */
/* コンテナは「実際に描画されている画像」と同じ大きさである必要があります。 */
.logo-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* ★ .mv-banner-container に display を指定しないこと。
     .pc / .sp の出し分け（テーマ側の .sp{display:none}）を打ち消し、
     PC版とSP版の両方が表示されてしまいます。div既定の block のままで可。 */
.mv-banner-container {
  position: relative;
  width: 100%;
}

/* SPヘッダーバナー：テーマの object-fit: contain によるレターボックスで
   左右余白が画面幅により変わるため、コンテナを縦横比で確保して吸収します。
   見た目は contain と同じです。 */
.banner-container {
  position: relative;
  display: block;
  width: min(100%, calc(72px * 762.58742 / 147.11147));
  aspect-ratio: 762.58742 / 147.11147;
  margin-inline: auto;
}

/* 画像下の余白（inline要素のベースライン）をなくし、枠を画像に密着させます。 */
.logo-container > a,
.banner-container > img,
.mv-banner-container > img {
  display: block;
}

.mv-banner-container > img {
  width: 100%;
  height: auto;
}

.banner-container > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 2. 「※」透明タップ領域 ---------------------------------------------- */
.asterisk-link {
  position: absolute;
  z-index: 999;
  outline: none;
  /* 完全な transparent だと一部端末でタップを拾わないため不透明度1%で塗布 */
  background: rgba(255, 255, 255, 0.01);
  -webkit-tap-highlight-color: transparent;
}

/* タップ判定だけを最低 24×24px に広げる透明レイヤー（見た目は変わりません） */
.asterisk-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  min-width: 100%;
  min-height: 100%;
}

/* --- 3. 配置（各画像内の「※」の実測値） ---------------------------------- */
.asterisk-link--logo {
  left: 97.54%;
  top: 36.91%;
  width: 4.84%;
  height: 14.72%;
  transform: translate(-50%, -50%);
}

.asterisk-link--hd-banner {
  left: 81.96%;
  top: 41.83%;
  width: 1.72%;
  height: 8.93%;
  transform: translate(-50%, -50%);
}

.asterisk-link--mv-pc {
  left: 77.75%;
  top: 49.12%;
  width: 0.95%;
  height: 2.72%;
  transform: translate(-50%, -50%);
}

/* 文字としての「※」用（画像ではない場合）。レイアウトを動かさずに
   タップ範囲だけを広げます。色・下線は周囲のテキストのままです。 */
.asterisk-link--inline {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  background: none;
  padding: 8px 6px;
  margin: -8px -6px;
}

.asterisk-link--inline::before {
  content: none;
}

.asterisk-link--inline .under_line {
  text-decoration: underline 1px currentColor;
}

/* --- 4. フッター注釈ブロック（ジャンプ先） -------------------------------- */
#footer-notation {
  scroll-margin-top: 140px;   /* JS の HEADER_OFFSET と揃えること */
  width: fit-content;
  margin: 25px auto 20px;
  padding: 0 20px;
  text-align: left;
  font-size: 11px;
  line-height: 1.8;
  color: #777777;
}