/*
Theme Name:  バイヤー高橋のホームページ
Author:      バイヤー高橋
Description: 現在のホームページを再現するためのカスタムテーマです。
Version:     1.0
*/

/* ===================================
   全体・背景設定
====================================== */
body {
    /* 背景画像を指定します。画像ファイルはテーマフォルダ直下に置いてください */
    background-image: url('images/back_buyer.png');
}


/* ===================================
   2カラムレイアウト
====================================== */
.container {
  max-width: 80%; /* コンテンツ全体の最大幅を画面の80%に制限 */
  margin: 0 auto; /* 左右の余白を自動で均等にして中央揃えにする */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* 左カラム（プロフィール） */
.profile-section {
  width: 100%; /* スマホでの表示（最初は全幅） */
}

/* 右カラム（お知らせなど） */
.content-section {
  width: 100%; /* スマホでの表示（最初は全幅） */
}

/* PCなど画面が広い場合(768px以上)の設定 */
@media (min-width: 768px) {
  .profile-section {
    width: 35%; /* PCでは左カラムを35%の幅に */
  }
  .content-section {
    width: 63%; /* PCでは右カラムを63%の幅に */
  }
}


/* ===================================
   各パーツのスタイル
====================================== */

/* 「直近の情報」セクション */
.upcoming-events {
    font-size: 1.5em;
    color: #333;
    margin-top: 20px;
}
.event-list {
    list-style-type: none;
    padding-left: 0;
}
.event-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
}
.event-date {
    font-weight: bold;
    color: #555;
}

/* すべての画像が親要素からはみ出ないようにする */
img {
  max-width: 100%;
  height: auto;
}

/* 「主催ライブ」などのテーブルの見た目を整える */
.live-events {
    width: 100%;
    border-collapse: collapse;
}
.live-events th, .live-events td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}