/* =====================================================
   Event Page Ver2
   CSS①-1A
   ページ全体・レイアウト・カード基本
===================================================== */

/* ==========================
   カラーパレット
========================== */

:root{

    --primary:#005BAC;
    --accent:#ff6b81;
    --accent-dark:#ff4d6d;

    --text:#333;
    --subtext:#666;

    --bg:#f7f9fc;
    --white:#fff;

    --border:#e7eaf0;

    --radius:18px;

    --shadow:0 8px 25px rgba(0,0,0,.08);

    --transition:.3s ease;

}


/* ==========================
   共通
========================== */

.event-page *{

    box-sizing:border-box;

}

.event-page{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:60px 20px;

    color:var(--text);

    font-family:
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

}


/* ==========================
   タイトル
========================== */

.event-header{

    text-align:center;

    margin-bottom:60px;

}

.event-header h2{

    font-size:40px;

    line-height:1.4;

    font-weight:700;

    margin-bottom:18px;

}

.event-header .lead{

    font-size:18px;

    color:var(--subtext);

}


/* ==========================
   セクションタイトル
========================== */

.section-title{

    font-size:30px;

    margin-bottom:30px;

    font-weight:700;

}

.category-title{

    font-size:30px;

    margin-bottom:30px;

    border-left:6px solid var(--primary);

    padding-left:15px;

}


/* ==========================
   イチオシエリア
========================== */

.featured-section{

    margin-bottom:90px;

}

.featured-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    align-items:stretch;

}


/* ==========================
   カテゴリ
========================== */

.category-section{

    text-align:center;

    margin:80px 0;

}

.category-section h3{

    font-size:30px;

    margin-bottom:30px;

}


/* ==========================
   カテゴリボタン
========================== */

.category-container{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.category-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    padding:14px 26px;

    border-radius:50px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--text);

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.category-button:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================
   カテゴリブロック
========================== */

.event-category{

    margin-top:100px;

}


/* ==========================
   イベント一覧
========================== */

.event-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

    gap:32px;

}


/* ==========================
   カード共通
========================== */

.event-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


/* hoverはCSS②で実装 */



/* ==========================
   画像
========================== */

.event-image{

    position:relative;

    overflow:hidden;

}

.event-image img{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================
   本文
========================== */

.event-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:24px;

}

.event-content h4{

    font-size:23px;

    line-height:1.5;

    margin-bottom:14px;

}

.summary{

    color:var(--subtext);

    line-height:1.8;

    margin-bottom:22px;

}


/* ==========================
   日時
========================== */

.event-date{

    margin-top:auto;

    font-size:15px;

    color:#444;

    line-height:1.8;

}


/* ==========================
   おすすめラベル
========================== */

.event-card{
    position: relative;
    overflow: visible;   /* ラベルをカード外へ出せるようにする */
}

.recommended-label{

    position:absolute;

    top:-14px;

    left:-2px;

    z-index:30;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:30px;

    padding:0 16px;

    background:linear-gradient(135deg,#ff6b81,#ff4d6d);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.05em;

    border-radius:999px;

    box-shadow:
        0 8px 18px rgba(255,77,109,.28);

    border:2px solid #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

/* Hover時に少しだけ浮かせる */

.event-card:hover .recommended-label{

    transform:translateY(-2px) scale(1.03);

    box-shadow:
        0 12px 24px rgba(255,77,109,.35);

}


/* ==========================
   おすすめカード
========================== */

.event-card.recommended{

    border:2px solid var(--accent);

}



/* ==========================
   レスポンシブ
========================== */

@media(max-width:900px){

.event-card.featured{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.featured-grid{

    grid-template-columns:1fr;

}

.event-header h2{

font-size:30px;

}

.section-title,
.category-title,
.category-section h3{

font-size:24px;

}

.event-grid{

grid-template-columns:1fr;

}

.category-button{

width:100%;

max-width:320px;

}

}
/* =====================================================
   Event Page Ver2
   CSS①-1B
   カードデザイン・タグ・CTA
===================================================== */


/* ==========================
   タグ
========================== */

.event-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.02em;

}


/* 色は後から自由に追加できます */

.tag.online{

    background:#EAF4FF;

    color:#005BAC;

}

.tag.free{

    background:#FFF5E6;

    color:#D97B00;

}

.tag.women{

    background:#FFF0F5;

    color:#D63384;

}

.tag.education{

    background:#EEF8F0;

    color:#2E8B57;

}



/* ==========================
   イベントタイトル
========================== */

.event-content h4{

    font-size:22px;

    font-weight:700;

    line-height:1.45;

    margin-bottom:14px;

    color:#222;

}



/* ==========================
   概要
========================== */

.summary{

    font-size:15px;

    line-height:1.9;

    color:#666;

}



/* ==========================
   日時
========================== */

.event-date{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:24px;

    margin-bottom:24px;

    font-size:15px;

    color:#444;

}



/* ==========================
   CTAボタン
========================== */

.event-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:14px 20px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    font-size:15px;

    text-align:center;

    transition:var(--transition);

}



/* ==========================
   こんな方におすすめ
========================== */

.recommend{

    margin:28px 0;

    padding:20px;

    background:#F8FAFD;

    border-radius:14px;

    border:1px solid #EDF2F7;

}

.recommend h5{

    font-size:16px;

    margin-bottom:16px;

    color:#005BAC;

    font-weight:700;

}

.recommend ul{

    margin:0;

    padding:0;

    list-style:none;

}

.recommend li{

    position:relative;

    padding-left:28px;

    margin-bottom:12px;

    line-height:1.7;

    color:#444;

}

.recommend li:last-child{

    margin-bottom:0;

}

.recommend li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#00A86B;

    font-weight:bold;

}



/* ==========================
   おすすめカード質感
========================== */

.event-card.recommended{

    background:#fff;

    border:2px solid var(--accent);

}

.event-card.recommended .recommended-label{

    letter-spacing:.04em;

}



/* ==========================
   Featured画像
========================== */

.event-card.featured .event-image{

    min-height:380px;

}



/* ==========================
   CTAエリア
========================== */

.event-content{

    display:flex;

    flex-direction:column;

}

.event-button{

    margin-top:auto;

}



/* ==========================
   画像比率固定
========================== */

.event-image{

    aspect-ratio:350 / 171;

}

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* ==========================
   カード内余白
========================== */

.event-content{

    padding:26px;

}



/* ==========================
   Featured余白
========================== */

.event-card.featured .event-content{

    padding:42px;

}



/* ==========================
   リンク色対策
========================== */

.event-card:link,
.event-card:visited{

    color:inherit;

}



/* ==========================
   スマホ
========================== */

@media(max-width:768px){

.event-card.featured .event-content{

padding:28px;

}

.event-card.featured h4{

font-size:24px;

}

.recommend{

padding:18px;

}

}
/* =====================================================
   Event Page Ver2
   CSS②
   Hover・Overlay・Animation
===================================================== */


/* ===========================================
   カードホバー
=========================================== */

.event-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.event-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.16);

}


/* ===========================================
   画像ズーム
=========================================== */

.event-image img{

    transition:transform .6s ease;

}

.event-card:hover .event-image img{

    transform:scale(1.08);

}


/* ===========================================
   Overlay
=========================================== */

.event-overlay{

    position:absolute;

    inset:0;

    background:rgba(16,22,34,.82);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:10;

}


.event-card:hover .event-overlay{

    opacity:1;

    visibility:visible;

}


/* ===========================================
   Overlay本文
=========================================== */

.overlay-inner{

    text-align:center;

    color:#fff;

}


.overlay-inner h4{

    font-size:22px;

    line-height:1.5;

    margin-bottom:18px;

    color:#fff;

}


.overlay-inner p{

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;

    opacity:.95;

}


/* ===========================================
   Overlayボタン
=========================================== */

.overlay-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:12px 28px;

    border-radius:999px;

    background:#fff;

    color:#005BAC;

    font-weight:700;

    transition:.25s;

}


.overlay-button:hover{

    background:#005BAC;

    color:#fff;

}


/* ===========================================
   CTA
=========================================== */

.event-button{

    transition:
        background .25s ease,
        transform .25s ease;

}


.event-card:hover .event-button{

    background:#00448a;

}


.event-button:hover{

    transform:translateY(-2px);

}


/* ===========================================
   タグ
=========================================== */

.tag{

    transition:.25s;

}

.event-card:hover .tag{

    transform:translateY(-2px);

}


/* ===========================================
   おすすめカード
=========================================== */

.event-card.recommended{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.event-card.recommended:hover{

    border-color:#ff4f75;

    box-shadow:
        0 20px 50px rgba(255,95,125,.28);

}


/* ===========================================
   おすすめラベル
=========================================== */

.recommended-label{

    transition:.3s;

}

.event-card:hover .recommended-label{

    transform:scale(1.06);

}


/* ===========================================
   Featured
=========================================== */

.event-card.featured{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.event-card.featured:hover{

    transform:translateY(-10px);

}


/* ===========================================
   Category Button
=========================================== */

.category-button{

    transition:
        background .25s,
        color .25s,
        transform .25s;

}

.category-button:hover{

    transform:translateY(-3px);

}


/* ===========================================
   スクロールアニメーション用
=========================================== */

.event-card{

    animation:fadeUp .55s ease;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ===========================================
   Focus
=========================================== */

.event-card:focus-visible{

    outline:3px solid #005BAC;

    outline-offset:4px;

}


/* ===========================================
   スマホ
=========================================== */

@media(max-width:768px){

.event-overlay{

padding:18px;

}

.overlay-inner h4{

font-size:19px;

}

.overlay-inner p{

font-size:14px;

}

}