/*
Theme Name: Mr.MIND - SUPER CONCORDE
Theme URI:
Author: venus
Author URI:
Description: SUPER CONCORDE「Mr.MIND（ミスターマインド）」プロモーションLP用テーマ。X誘導型の1カラムLP。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mr-mind
*/

/* =========================================================
 *  Mr.MIND × SUPER CONCORDE  LP
 *
 *  方式: 通常フロー（縦積み）。大理石 bg.jpg を縦リピート背景にし、
 *        各要素を中央寄せ（width% + margin）で配置。
 *   - ヒーローのポスターは height:auto（＝高さ可変）。枠が実高さに追従
 *   - 余白は % 指定（コンテンツ幅基準）→ PC/SP で比率維持
 *   - PC / SP 同一レイアウト（比例縮小のみ）
 *  各要素の width% はカンプ実測（canvas 3125 基準）。
 * ========================================================= */

:root {
  --page-max: 1000px;       /* PC表示の最大幅 */
  --bg-dark: #14151a;       /* 余白の地色（大理石暗部に合わせる） */
  /* ゴールド枠パレット（メタリック） */
  --g-hi:   #fff6cf;        /* ハイライト */
  --g-lite: #f4dd8c;
  --g-mid:  #d2a23f;
  --g-deep: #8a6116;        /* 影 */
  --g-dark: #5e3f0e;        /* 最暗・締め */
}

* { box-sizing: border-box; }
html { font-size: 62.5%; }
body {
  margin: 0; padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  background: var(--bg-dark);
  -webkit-text-size-adjust: 100%;
}
img { display: block; width: 100%; height: auto; vertical-align: bottom; border: 0; }
a  { color: inherit; text-decoration: none; transition: opacity .2s ease; }
@media (min-width: 769px) { a:hover { opacity: .85; } }

/* ---------------------------------------------------------
 *  ページ枠：大理石を縦リピートで敷き、要素はフロー配置
 * ------------------------------------------------------- */
.lp {
  max-width: var(--page-max);
  margin: 0 auto;
  /* 大理石テクスチャ（縦タイル）。高さ可変でも途切れない */
  background: var(--bg-dark) url(assets/img/bg.jpg) top center / 100% auto repeat-y;
  padding-bottom: 6%;
}

/* ① ヘッダー（Mr.MIND ／ SUPER CONCORDE） -------------------- */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: center;   /* 中央寄せでロゴ同士を近づける */
  gap: 3%;                    /* ロゴ間の間隔（小さくするほど近づく） */
  padding: 2.6% 3% 1.4%;
}
.lp-header__logo  { width: 34%; margin: 0; }   /* Mr.MIND */
.lp-header__brand {
  width: 50%; margin: 0;
  transform: translateY(-15%);   /* 右ロゴを少し上へ（マイナスを大きくするほど上） */
}   /* SUPER CONCORDE */

/* ② ヒーロー：メタリックゴールド額縁 ＋ ポスター（高さ可変） ----- */
.hero {
  width: 69.66%;
  margin: 1.5% auto 9%;           /* 下=ヒーロー下の余白（大きくするほど広がる） */
  padding: 0.85%;                 /* 枠の太さ（コンテンツ幅基準%で追従） */
  border-radius: 4px;
  /* 額縁本体＝斜めメタリックゴールドのグラデーション */
  background:
    linear-gradient(135deg,
      var(--g-hi)   0%,
      var(--g-lite) 13%,
      var(--g-mid)  29%,
      var(--g-deep) 46%,
      var(--g-lite) 60%,
      var(--g-hi)   71%,
      var(--g-mid)  85%,
      var(--g-dark) 100%);
  /* 立体感：外側ドロップ＋上下ベベル */
  box-shadow:
    0 2px 12px rgba(0,0,0,.6),                  /* 浮き上がり */
    0 0 0 1px rgba(255,243,200,.45),            /* 外周ハイライト */
    inset 1.5px 1.5px 0 rgba(255,255,255,.55),  /* 左上ベベル光 */
    inset -1.5px -1.5px 0 rgba(94,63,14,.9);    /* 右下ベベル影 */
}
.hero__media {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);   /* 額縁と写真の境に締め色 */
}
.hero__poster { width: 100%; height: auto; display: block; }  /* ← 高さ可変 */
.hero a { display: block; }
/* ポスター未設定時のみ、推奨比率の空枠を表示 */
.hero__media--empty { aspect-ratio: 2177 / 3538; }
.hero__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,.4);
  font-size: 1.6rem; letter-spacing: .08em; text-align: center; line-height: 1.8;
}

/* ③ 見出し ------------------------------------------------- */
.lead { text-align: center; }
.lead__more  { width: 65.86%; margin: 4% auto 0; }  /* もっと詳しい情報はこちら */
.lead__catch { width: 72.67%; margin: 6% auto 0; }  /* ここでしか得られない…満載!!（上=moreとの間隔） */

/* ④ 特長 01〜03（1枚バナー） -------------------------------- */
.features { width: 75.90%; margin: 5% auto 0; }

/* ⑤ CTA（マスコット＋Xボタン／バナー全体がXへのリンク） -------- */
.cta { display: block; width: 75.90%; margin: 5% auto 0; }

/* ---------------------------------------------------------
 *  SP：レイアウトはPCと同一（%基準のため自動で縮小）
 * ------------------------------------------------------- */
@media (max-width: 768px) {
  .lp { max-width: 100%; }
  .hero__placeholder { font-size: 1.15rem; }
}