@charset "UTF-8";
/*
 * MoneyX2027 一覧ページ用CSS（2026-09-28 新規）
 * 対象: 登壇者一覧（/speakers/・/ja/speakers/）、参画企業一覧（/partners/・/ja/partners/）
 * 読み込みは inc2027/speakers_body.php・partners_body.php の <link>（data2027.php の mxl_css()）。共通の moneyx2027.css には追記しない。
 *
 * - 下層ページ（body.mx-sub）なので、ini.php により旧 style.css → moneyx2027.css → このファイルの順に効く。
 *   旧 style.css は「* { font-size:18px; color:#222; font-weight:400; … }」「a { color:#ff8023; … }」を全要素に当てるため、
 *   一覧の中では :where() で詳細度を 0（a は要素1つ分）に抑えた inherit で打ち消す（後続のクラス指定は必ず勝つ）
 * - 見出し（.mx-head）・ボタン（.mx-btn）・.mx-wrap・色の変数はトップと共通（moneyx2027.css）のものを使う
 * - レイアウトは WebX の一覧（speaker_set / sponsorslogo_sets）に倣い、端数の最終行は中央寄せ
 */

/* ---- 旧 style.css の全要素指定の打ち消し ---- */
:where(.mxl) *{font-size:inherit;color:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;}
:where(.mxl) a{color:inherit;font-weight:inherit;text-decoration:none;}

/* ---- ページの土台 ---- */
/* 旧 style.css では body が白、moneyx2027.css では下層の .body にヘッダーぶんの上余白が付く。
   背景（グレー→白のグラデーションと花模様）をヘッダーの裏まで敷くため、その上余白ぶん上に引き上げ、内側の余白で戻す */
.mxl{
	position:relative;
	margin-top:calc(-1 * (var(--mx-header-h) + 16px));
	background:linear-gradient(var(--mx-bg) 0, var(--mx-bg) 420px, #fff 100%);
	color:var(--mx-text);font-family:var(--mx-ja);font-size:15px;line-height:1.8;
	-webkit-font-smoothing:antialiased;
}
.mxl::before{
	content:"";position:absolute;z-index:0;pointer-events:none;
	top:-40px;right:-330px;width:1100px;height:1100px;
	background:url(/assets2027/back.webp) center/contain no-repeat;opacity:.55;
}
.mxl-main{display:block;}
.mxl-sec{position:relative;z-index:1;padding:calc(var(--mx-header-h) + 16px + 76px) 0 110px;}
.mxl-head{margin-bottom:52px;}
.mxl-back{margin-top:64px;}

/* ================= 登壇者一覧 ================= */
/* 1行の数は --cols（PC 5 → 4 → 3 → SP 2）。幅は flex の gap を差し引いて等分し、最終行の端数は中央に寄せる（WebX と同じ） */
.mxl-spk-grid{--cols:5;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:32px var(--gap);margin:0;padding:0;list-style:none;}
.mxl-spk{
	flex:0 0 auto;width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	display:flex;flex-direction:column;
	background:#fff;border-radius:10px;overflow:hidden;
	box-shadow:0 4px 16px rgba(0,0,0,.07);
}
.mxl-spk__photo{position:relative;aspect-ratio:4/5;background:#e9e7e7;overflow:hidden;}
.mxl-spk__photo > img{display:block;width:100%;height:100%;object-fit:cover;}
.mxl-spk__noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--mx-pink-bg),var(--mx-pink-l));}
/* 会社ロゴは写真の下端に白帯で重ねる（WebX の speaker_set_logo と同じ置き方） */
.mxl-spk__logo{
	position:absolute;left:0;right:0;bottom:0;height:34px;padding:5px 16%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.9);
}
.mxl-spk__logo img{display:block;width:100%;height:100%;object-fit:contain;}
.mxl-spk__body{flex:1 1 auto;padding:12px 12px 16px;text-align:center;border-top:3px solid var(--mx-pink);}
.mxl-spk__name{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.04em;}
.en .mxl-spk__name{font-family:var(--mx-en);letter-spacing:.01em;}
.mxl-spk__corp{margin-top:6px;font-size:12px;font-weight:700;line-height:1.45;color:var(--mx-pink-d);}
.mxl-spk__title{
	margin-top:3px;font-size:11.5px;line-height:1.5;color:#555;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ================= 参画企業一覧 ================= */
.mxl-tier{margin-top:60px;}
.mxl-tier:first-of-type{margin-top:0;}
/* 区分見出し: WebX の sponsorslogo_h と同じく中央寄せの英字＋下に短い線。頭にトップと同じ三角（try.png） */
.mxl-tier__h{
	position:relative;margin:0 0 30px;padding-bottom:12px;text-align:center;
	font-family:var(--mx-en);font-size:20px;font-weight:700;line-height:1.3;letter-spacing:.14em;color:var(--mx-text);
}
.mxl-tier__h::before{
	content:"";display:inline-block;width:9px;height:17px;margin-right:12px;vertical-align:-1px;
	background:url(/assets2027/try.png) center/contain no-repeat;
}
.mxl-tier__h::after{content:"";position:absolute;left:50%;bottom:0;width:64px;height:2px;margin-left:-32px;background:var(--mx-pink);}
/* ロゴ: 1行の数は区分ごとに --cols（PC）/ --cols-sp（SP）を partners_body.php から渡す。枠は WebX と同じ 16:9 */
.mxl-logos{--gap:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin:0;padding:0;list-style:none;}
.mxl-logo{flex:0 0 auto;width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));aspect-ratio:16/9;}
.mxl-logo > a,.mxl-logo__box{
	display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:9% 12%;
	background:#fff;border:1px solid #efdde7;border-radius:8px;
	transition:border-color .2s,box-shadow .2s,transform .2s;
}
.mxl-logo > a:hover{border-color:var(--mx-pink);box-shadow:0 6px 18px rgba(192,87,154,.16);transform:translateY(-2px);opacity:1;}
.mxl-logo img{display:block;width:100%;height:100%;object-fit:contain;}
.mxl-logo__name{font-size:14px;font-weight:700;line-height:1.3;text-align:center;color:#666;}
.mxl-tier--title .mxl-logo__name{font-size:18px;}

/* ================= タブレット ================= */
@media (max-width:1080px){
	.mxl-spk-grid{--cols:4;--gap:20px;}
}
@media (max-width:860px){
	.mxl-spk-grid{--cols:3;}
}

/* ================= スマホ ================= */
@media (max-width:767px){
	.mxl{font-size:14px;}
	.mxl::before{top:0;right:-300px;width:620px;height:620px;}
	.mxl-sec{padding:calc(var(--mx-header-h) + 16px + 44px) 0 80px;}
	.mxl-head{margin-bottom:34px;}
	.mxl-back{margin-top:44px;}

	.mxl-spk-grid{--cols:2;--gap:12px;row-gap:18px;}
	.mxl-spk{border-radius:8px;}
	.mxl-spk__logo{height:28px;padding:4px 12%;}
	.mxl-spk__body{padding:10px 8px 12px;}
	.mxl-spk__name{font-size:14px;}
	.mxl-spk__corp{font-size:11.5px;}
	.mxl-spk__title{font-size:11px;}

	.mxl-tier{margin-top:44px;}
	.mxl-tier__h{font-size:16px;margin-bottom:20px;padding-bottom:10px;}
	.mxl-logos{--gap:10px;}
	.mxl-logo{width:calc((100% - (var(--cols-sp) - 1) * var(--gap)) / var(--cols-sp));}
	.mxl-logo > a,.mxl-logo__box{padding:8% 10%;border-radius:6px;}
	.mxl-logo__name{font-size:12px;}
	.mxl-tier--title .mxl-logo__name{font-size:14px;}
}