イベント詳細ページ – WordPressカスタムHTMLブロック用 –>
<style>
.event-detail {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.event-hero {
width: 100%;
margin-bottom: 40px;
}
.event-hero img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.event-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
color: #333;
padding-left: 15px;
border-left: 5px solid #40b74e;
}
.event-overview {
margin-bottom: 40px;
}
.event-overview h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #40b74e;
color: #333;
}
.event-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.event-table th,
.event-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.event-table th {
background-color: #40b74e;
font-weight: bold;
width: 30%;
color: #fff;
}
.event-table tr:last-child td,
.event-table tr:last-child th {
border-bottom: none;
}
.event-rules {
margin-bottom: 40px;
}
.event-rules h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #40b74e;
color: #333;
}
.event-rules ul {
list-style-type: none;
padding-left: 0;
}
.event-rules li {
padding: 12px 0;
padding-left: 30px;
position: relative;
line-height: 1.8;
}
.event-rules li:before {
content: “●”;
position: absolute;
left: 0;
color: #40b74e;
}
.event-application {
background: linear-gradient(135deg, #f9f9f9 0%, #f0faf1 100%);
padding: 30px;
border-radius: 8px;
text-align: center;
margin-bottom: 40px;
border: 2px solid #40b74e;
}
.event-application h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
}
.event-application p {
margin-bottom: 20px;
line-height: 1.8;
}
.apply-button1 {
display: inline-block;
background-color: #40b74e;
color: #ffffff;
padding: 15px 40px;
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
box-shadow: 0 4px 6px rgba(64, 183, 78, 0.3);
}
.apply-button:hover {
background-color: #359a3d;
box-shadow: 0 6px 8px rgba(64, 183, 78, 0.4);
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.event-title {
font-size: 1.5rem;
}
.event-overview h2,
.event-rules h2,
.event-application h2 {
font-size: 1.3rem;
}
.event-table {
font-size: 0.9rem;
}
.event-table th,
.event-table td {
padding: 10px;
display: block;
width: 100%;
}
.event-table th {
background-color: #40b74e;
border-bottom: none;
padding-bottom: 5px;
color: #fff;
}
.event-table td {
padding-top: 5px;
padding-bottom: 15px;
}
.event-table tr {
display: block;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.event-application {
padding: 20px;
}
.apply-button1 {
display: block;
width: 100%;
padding: 15px 20px;
}
}
</style>
<div class=”event-detail”>
<!– 概要 –>
<div class=”event-overview”>
<h2>開催概要</h2>
<table class=”event-table”>
<tbody>
<tr>
<th>イベント名</th>
<td>ルーキーズ2025</td>
</tr>
<tr>
<th>開催日時</th>
<td>2025年11月21日（金）20:00~</td>
</tr>
<tr>
<th>会場</th>
<td>オンライン</td>
</tr>
<tr>
<th>参加費</th>
<td>無料</td>
</tr>
<tr>
<th>定員</th>
<td>8名（先着順）</td>
</tr>
<tr>
<th>主催</th>
<td>アニマル事務所</td>
</tr>
<tr>
<th>お問い合わせ</th>
<td><a href=”https://lin.ee/su9YKtT”>公式LINEへ</a></td>
</tr>
</tbody>
</table>
</div>
<!– ルール –>
<div class=”event-rules”>
<h2>参加ルール・注意事項</h2>
<ul>
<li>申込時事務所未加入の方</li>
<li>当日のスケジュールが空いてる方</li>
<li>バトルはバラ限定バトル</li>
<li>残り時間1分のみ（バトル機能は全5分あるうち残りの1分を使用）</li>
<li>まとめ投げOK</li>
<li>参加申し込みできたら必ず、オプチャに加入してください</li>
</ul>
</div>