資料関連 / スライドの型
趣旨・結論(key-message)
趣旨・結論。核メッセージのカード+箇条書き
元ファイルslides/layouts/key-message.html
プレビュー
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>型:趣旨・結論(key-message)</title>
<link rel="stylesheet" href="../../foundations/tokens.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<style>body{margin:0;background:var(--rock-200);}</style>
</head>
<body>
<section style="position:relative;width:var(--slide-w);height:var(--slide-h);box-sizing:border-box;padding:var(--pad-top) var(--pad-x) var(--pad-bottom);background:var(--rock-50);display:flex;flex-direction:column;font-family:var(--font-sans);color:var(--rock-800);">
<h2 style="margin:0;font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--rock-900);">〇〇</h2>
<div style="margin-top:var(--space-2xl);background:var(--idea-50);border:var(--border) solid var(--idea-300);border-radius:var(--radius-card);padding:var(--space-3xl);font-size:var(--fs-key);font-weight:var(--fw-bold);line-height:var(--lh-body);color:var(--idea-900);">核となる1文</div>
<div style="margin-top:var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-m);font-size:var(--fs-body);line-height:var(--lh-body);">
<div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
<div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
<div style="display:flex;gap:var(--space-s);"><span style="color:var(--idea-800);font-weight:var(--fw-bold);">・</span><span>〇〇</span></div>
</div>
<div style="position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:var(--footer-bottom);display:flex;justify-content:space-between;font-size:var(--fs-footer);color:var(--rock-500);"><span>株式会社ATOYOLO</span><span>〇</span></div>
</section>
</body>
</html>