@charset "UTF-8";

/* ============================================================================
 * machi-create.com 静的ページ用 追加パーツCSS（2026-09-23）
 *
 * 05_adsense-fix.css から、静的HTMLページで使う分だけを抜き出したもの。
 *   .mc-ai-note  AI生成物の注記
 *   .mc-making   制作メモ（STEP 7 用。今は未使用）
 *
 * 著者ボックス(.mc-author)はWordPress側だけなので含めていない。
 *
 * ■ なぜ新規に1本作ったか
 *   静的ページに共通CSSが存在しないため。ページ群ごとにバラバラだった。
 *     ai-music/*.html   -> artist.css のみ
 *     creative/*/       -> ../collections.css + /assets/css/site-network.css
 *     ai-tools/app/*/   -> アプリごとの src/style.css
 *
 * ■ 元のCSSから変えた点：背景を「半透明」から「不透明」にした
 *   元は背景が rgba(...) の半透明で、文字色は明るいページ前提。
 *   暗い配色は @media (prefers-color-scheme: dark) の中にだけ入っていた。
 *   ところが置き先のページは明暗が混在していて、OSの設定とも無関係だった。
 *       ai-music/*.html  -> ヒーローだけ暗く、本文は明るいクリーム色
 *       creative/*/      -> ページ全体が黒に近い暗い配色
 *   半透明のままだと下の色が透けて、どちらかで必ず読めなくなる。
 *   そこで【不透明の薄いベージュ地 + 濃い文字】にして、
 *   明るいページでも暗いページでも同じ見え方になるようにした。
 * ========================================================================== */


/* ============================================================
 * AI生成物の注記
 * ========================================================== */

.mc-ai-note-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px clamp(20px, 5vw, 72px) 0;
}

.mc-ai-note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  padding: .85rem 1.1rem;
  border: 1px solid #e4c489;
  border-radius: 10px;
  background: #fdf4e3;
  font-family: "Noto Sans JP", "Helvetica Neue", system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.75;
  color: #4a3c14;
}

.mc-ai-note__badge {
  flex: 0 0 auto;
  margin-top: .15rem;
  padding: .12rem .5rem;
  border-radius: 5px;
  background: #ffb020;
  color: #2a2000;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
}


/* ============================================================
 * 制作メモ（STEP 7 用・今は使っていない）
 * ========================================================== */

.mc-making {
  max-width: 1180px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  border-left: 3px solid #4a7dff;
  border-radius: 0 12px 12px 0;
  background: #eef3ff;
  font-family: "Noto Sans JP", "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.9;
}

.mc-making h2 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.mc-making__lead {
  margin: 0 0 1.25rem;
  font-size: .9rem;
  color: #5c6779;
}

.mc-making__spec {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: .55rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .92rem;
}

.mc-making__spec dt {
  font-weight: 600;
  color: #4a7dff;
}

.mc-making__spec dd {
  margin: 0;
}

.mc-making__body p {
  margin: 0 0 .9rem;
}

.mc-making__body p:last-child {
  margin-bottom: 0;
}

.mc-making__link {
  margin: 0;
}

.mc-making__link a {
  font-weight: 600;
  text-decoration: none;
  color: #4a7dff;
}

.mc-making__link a:hover {
  text-decoration: underline;
}


/* ============================================================
 * スマホ
 * ========================================================== */

@media (max-width: 560px) {

  .mc-ai-note-wrap {
    padding: 26px 20px 0;
  }

  .mc-ai-note {
    flex-direction: column;
    gap: .5rem;
  }

  .mc-ai-note__badge {
    align-self: flex-start;
  }

  .mc-making {
    padding: 1.15rem;
  }

  .mc-making__spec {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .mc-making__spec dd {
    margin-bottom: .6rem;
  }

}

/* ============================================================
 * ページ最下部の帯（/ai-tools/app/ のアプリページ用）
 *
 * アプリのページは main も footer も無く、h1 も画面上部のロゴの中にある。
 * 本文の途中に入れるとゲームの操作画面を邪魔するので、
 * ページのいちばん下に帯として置く。
 * ========================================================== */

.mc-ai-strip {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px clamp(14px, 4vw, 28px);
  border-top: 1px solid #e4c489;
  background: #fdf4e3;
  color: #4a3c14;
  font-family: "Noto Sans JP", "Helvetica Neue", system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.7;
  text-align: center;
}

.mc-ai-strip .mc-ai-note__badge {
  display: inline-block;
  margin-right: .5rem;
  vertical-align: 1px;
}

/*
 * body が overflow:hidden の全画面型アプリ（jinsei-pon / little-tide）用。
 * 普通に置くと画面外に切られて誰にも見えないので、画面下に貼り付ける。
 * pointer-events:none にしてあるので、帯の上をタップしても
 * その下のゲームの操作がそのまま通る。
 */
.mc-ai-strip--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .96;
}

@media (max-width: 560px) {
  .mc-ai-strip {
    padding: 9px 14px;
    font-size: .72rem;
  }
}