/* マーチャントクラブのブランド帯（全ページ共通）
   note.sugabiz.com と同じ構成だが、色はこのツールのヘッダーと同じ紺にして
   ページの上下で色が揃うようにしている。

   index.html は静的配信でPHPを通らないため、CSSはこの外部ファイルに置き、
   PHPのページ(login/report/privacy)からも同じものを読む。
   ここを1本にしておかないと、片方だけ直して見た目がズレる。 */

.mc-footer{ background:#1f2a44; color:#fff; padding:34px 22px 30px; text-align:center;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif; }
.mc-foot-inner{ max-width:680px; margin:0 auto; }
/* ロゴは白抜き版を透過のまま置く。白い角丸の板に載せると、紺の帯の中で
   そこだけ切り抜いたように浮いて見える。英字ロゴに合わせて字間を広めに取る。 */
.mc-foot-brand{ display:inline-flex; align-items:center; gap:11px;
  font-size:16px; font-weight:600; letter-spacing:.16em; color:#fff; }
.mc-foot-logo{ width:30px; height:30px; object-fit:contain; }
.mc-foot-desc{ font-size:12px; color:rgba(255,255,255,.72); margin:11px auto 18px; line-height:1.75; }

/* 会員の笑顔を流す帯（帯いっぱいの全幅・正方形）。

   写真そのものは mc-band（https://sugabiz.com/mc-band/）から loader が入れる。
   ここには枚数も画像も持たない。持つと、写真を差し替えるたびに6サイトを直すことになる。

   【なぜ .mc-foot-inner の外に置くか】
   全幅にするのに width:100vw を使うと、縦スクロールバーのある環境で 100vw が
   バーの幅を含むため、横スクロールバーが出る。よくある不具合。
   680px の枠の外に出し、帯の左右padding(22px)を負のmarginで打ち消すだけにすれば
   ビューポート単位を一切使わずに端まで届く。

   【gap を使わないこと】
   translateX(-50%) で「トラックの半分」ぶん動かしてループする。
   gap を使うとトラック幅が 2N・w + (2N-1)・g となり、その半分は
   1ユニットの送り幅 N・(w+g) より gap の半分だけ短い。1周ごとに数px飛ぶ。
   最後のタイルにも margin-right を付けて幅を揃える。

   【繰り返し回数と速度は loader が決める】
   枚数が変わると必要な繰り返し回数も変わるため、ここで固定しない。
   loader がタイルの実寸を測り、偶数回を保ったまま画面幅を超えるまで並べ、
   秒速30pxになるよう duration を設定する。 */
/* 既定は隠す。mc-band の loader が写真を入れたときだけ mcb-on が付いて出る。
   こうしないと、写真が未登録のときや配信元に届かないときに、
   空の帯が余白だけ残って「壊れている」ように見える。 */
.mc-photos{ display:none; position:relative; overflow:hidden; margin:0 -22px 18px; }
.mc-photos.mcb-on{ display:block; }
.mc-photos::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #1f2a44 0%, rgba(31,42,68,0) 10%,
                                    rgba(31,42,68,0) 90%, #1f2a44 100%); }
.mc-photo-track{ display:flex; width:max-content; will-change:transform;
  animation:mcPhotoStrip 168s linear infinite; }   /* 秒数は loader が上書きする */
.mc-photo-track img{ flex:0 0 auto; width:112px; height:112px; margin-right:10px;
  object-fit:cover; border-radius:9px; background:rgba(255,255,255,.06); display:block; }

@keyframes mcPhotoStrip{ to{ transform:translateX(-50%) } }

/* ホバーで止める。(hover:hover) で囲わないと、タッチ端末で指が触れただけで
   止まってしまい「固まった」ように見える */
@media (hover:hover){
  .mc-photos:hover .mc-photo-track{ animation-play-state:paused }
}
@media (max-width:760px){
  .mc-photo-track img{ width:96px; height:96px; margin-right:8px; border-radius:8px }
}
@media (prefers-reduced-motion:reduce){
  .mc-photo-track{ animation:none }
}
.mc-foot-link{ display:inline-block; color:#fff; font-size:13px; font-weight:500; text-decoration:none;
  border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:9px 22px;
  transition:background .15s, border-color .15s; }
.mc-foot-link:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.7); }
.mc-foot-copy{ font-size:10.5px; color:rgba(255,255,255,.45); margin-top:18px; }
.mc-foot-copy a{ color:rgba(255,255,255,.6); text-decoration:underline; }
.mc-foot-copy a:hover{ color:#fff; }

/* メルマガ登録。
   ここは登録してもらうための枠なので、詰めない。幅と余白を広めに取り、
   入力欄も指で押しやすい大きさにしている。 */
.mc-news{ margin:28px auto 0; padding:26px 30px 24px; max-width:600px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px; }
.mc-news h3{ margin:0 0 9px; font-size:15px; font-weight:600; letter-spacing:.04em; color:#fff; }
.mc-news p{ margin:0 0 18px; font-size:12.5px; line-height:1.95; color:rgba(255,255,255,.78); }
.mc-news form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mc-news input[type=email]{ flex:1; min-width:200px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.95); border-radius:10px; padding:13px 15px; font:inherit; font-size:15px; color:#2b2b2b; }
.mc-news input[type=email]:focus{ outline:none; border-color:#e8782e; }
.mc-news button{ background:#e8782e; color:#fff; border:none; border-radius:9px;
  padding:13px 26px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; }
.mc-news button:hover{ background:#cf6315; }
.mc-news .mc-news-note{ margin:14px 0 0; font-size:11px; line-height:1.7; color:rgba(255,255,255,.55); }
.mc-news .mc-news-note a{ color:rgba(255,255,255,.75); }
@media(max-width:520px){ .mc-news form{ flex-direction:column } .mc-news button{ width:100% } }