/* =========================================
   components.css — ボタン・共通部品
   ページ固有レイアウトはここに書かない
========================================= */

/* =========================================
   グラデーション（全ページ共通）
========================================= */
.grad_green  { background: linear-gradient(45deg, var(--es-green-light) 0%, var(--es-green) 100%); color: #fff; }
.grad_pink   { background: linear-gradient(45deg, var(--es-pink-light)  0%, var(--es-pink)  100%); color: #fff; }
.grad_orange { background: linear-gradient(45deg, #f15a24 0%, var(--es-orange) 100%); color: #fff; }
.grad_blue   { background: linear-gradient(135deg, rgba(41,171,226,1) 0%, rgba(0,91,151,1) 100%); color: #fff; }
.grad_gray   { background: #888; color: #fff; }

/* =========================================
   セクションタイトル（旧 .sec_title → .es-sec-title）
   ※ .sec_title も併記して互換性を保つ
========================================= */
.es-sec-title,
.sec_title {
    font-size: 2.2rem;
    font-family: var(--es-font-title);
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 0.1em;
}
.es-sec-title span,
.sec_title span {
    display: block;
    font-family: var(--es-font-en);
    font-size: 1.1rem;
    color: var(--es-green);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

/* =========================================
   ボタン
========================================= */
.btn_standard {
    display: inline-block;
    padding: 15px 60px;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.btn_standard:hover {
    opacity: 0.9;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.btn_small {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
}

.btn_huge {
    display: inline-block;
    padding: 25px 60px;
    border-radius: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0, 145, 58, 0.2);
    transition: 0.3s;
}
.btn_huge:hover { transform: scale(1.05); }

.btn_sub {
    display: inline-block;
    padding: 15px 45px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: 0.3s;
}
.btn_sub:hover { opacity: 0.9; transform: scale(1.02); }

.view_all_btn { text-align: center; margin-top: 50px; }

/* =========================================
   会員登録モーダル（全ページ footer 直前）
========================================= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close:hover { color: #333; }

.modal-title {
    font-family: var(--es-font-title);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

.modal-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    transition: opacity 0.2s, transform 0.2s;
}
.modal-btn:hover { opacity: 0.9; transform: scale(1.02); }
.modal-btn--mail { background: #555; }

.modal-illust {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f6fdf8;
    border-radius: 12px;
    padding: 16px;
}
.modal-illust-img { width: 70px; height: auto; flex-shrink: 0; }
.modal-balloon {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.7;
}

/* =========================================
   イベントステータスバッジ
========================================= */
.status_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}
.status_badge.open { background: var(--es-pink); }

/* =========================================
   カテゴリバッジ共通（イベント・サポーター・ニュース）
========================================= */
.event_cat,
.supporter_cat,
.news_cat_badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    align-self: flex-start;
}

/* イベントカテゴリー色 */
.cat_party   { background: var(--es-pink); }
.cat_seminar { background: var(--es-green); }
.cat_hobby   { background: var(--es-orange); }

/* サポーターカテゴリー色 */
.cat_beauty  { background: #e91e8c; }
.cat_fashion { background: #9c27b0; }
.cat_manner  { background: #3f51b5; }
.cat_food    { background: var(--es-orange); }
/* .cat_hobby は上と共有 */
.cat_fortune { background: #673ab7; }
.cat_lesson  { background: var(--es-green); }
.cat_other   { background: #607d8b; }

/* ニュースカテゴリー色 */
.cat_info   { background: var(--es-blue); }
.cat_report { background: var(--es-pink); }

/* =========================================
   カード共通（.es-card__* — FLOCSS命名）
   旧 .card_title / .card_body / .card_img も互換で残す
========================================= */
.es-card__img,
.card_img {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.es-card__img img,
.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.es-card__body,
.card_body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.es-card__title,
.card_title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
    color: var(--es-text);
}

/* =========================================
   ナビリスト（旧 .list → .es-nav__list）
========================================= */
.es-nav__list {
    display: flex;
    gap: 25px;
    list-style: none;
}

/* =========================================
   セクション装飾イラスト
========================================= */
.sec_illust {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.93;
}

/* =========================================
   お問い合わせCTA 共通テキスト
========================================= */
.contact_text { font-size: 1.1rem; margin-bottom: 40px; position: relative; z-index: 2; }
.contact_note { margin-top: 20px; font-size: 0.9rem; color: #666; position: relative; z-index: 2; }
.contact_btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}
.contact_or { font-size: 0.9rem; color: #888; font-weight: 700; }