.blog-hero{

height:500px;

background-image:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac");

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

justify-content:center;

margin-top:140px;

}

.blog-hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.35);

}

.blog-hero-overlay{

position:relative;

z-index:2;

text-align:center;

color:white;

}

.blog-hero-overlay h1{

font-size:64px;

margin:0 0 15px;

font-weight:700;

}

.blog-hero-overlay p{

font-size:20px;

margin:0;

}

@media(max-width:768px){

.blog-hero{

height:280px;

}

.blog-hero-overlay h1{

font-size:38px;

}

.blog-hero-overlay p{

font-size:16px;

}

}


.blog-hero-overlay h1{

    text-shadow:0 3px 15px rgba(0,0,0,.5);

}

.blog-hero-overlay p{

    text-shadow:0 2px 10px rgba(0,0,0,.5);

}
.blog-hero-overlay,
.blog-hero-overlay h1,
.blog-hero-overlay p{

    color:#fff !important;

}

.blog-hero-overlay h1{

    text-shadow:0 3px 15px rgba(0,0,0,.8) !important;

}

.blog-hero-overlay p{

    text-shadow:0 2px 10px rgba(0,0,0,.8) !important;

}

.blog-hero h1{

    color:white !important;

    font-size:64px;

    text-shadow:0 3px 15px rgba(0,0,0,.8);

}

.blog-hero p{

    color:white !important;

    font-size:20px;

    text-shadow:0 2px 10px rgba(0,0,0,.8);

}

/* =========================
   ピックアップ
========================= */

.blog-pickup{

    padding:80px 20px;

    background:#fff;

}

.blog-section-title{

    font-size:36px;

    font-weight:700;

    margin-bottom:40px;

    text-align:center;

    position:relative;

}

.blog-section-title::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:#1e88e5;

    margin:15px auto 0;

    border-radius:999px;

}

.pickup-card{

    display:flex;

    align-items:stretch;

    max-width:1200px;

    margin:auto;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    text-decoration:none;

    color:#333;

    transition:.3s;

}

.pickup-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.pickup-image{

    width:55%;

}

.pickup-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.pickup-content{

    width:45%;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}
.pickup-category{
    display:inline-flex;
    align-self:flex-start;
    background:#1e88e5;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:15px;
}



.pickup-date{
    color:#888;
    margin-bottom:20px;
}

.pickup-content h3{
    font-size:36px;
    line-height:1.4;
    margin-bottom:20px;
    word-break:break-word;
}

.pickup-content p{
    line-height:1.8;
}

/* =========================
   新着記事
========================= */

.blog-new{

    padding:80px 20px;

    background:#f8f8f8;

}

.blog-card-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.blog-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    text-decoration:none;

    color:#333;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.blog-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.blog-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.blog-card-content{

    padding:25px;

}

.blog-tag{

    display:inline-block;

    background:#1e88e5;/*デフォルト*/

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    margin-bottom:12px;

}
/*カテゴリー別*/
.blog-tag.event{
background:#2196f3;
}

.blog-tag.info{
background:#4caf50;
}

.blog-tag.report{
background:#ff9800;
}

.blog-date{

    color:#888;

    font-size:14px;

    margin-bottom:15px;

}

.blog-card-content h3{

    font-size:26px;

    line-height:1.5;

    margin-bottom:15px;

}

.blog-card-content p{

    line-height:1.8;

    color:#555;

}

/*新着記事*/
.blog-more{

    text-align:center;

    margin-top:40px;

}

.blog-more-btn{

    display:inline-block;

    padding:14px 32px;

    border:2px solid #1e88e5;

    border-radius:999px;

    color:#1e88e5;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.blog-more-btn:hover{

    background:#1e88e5;

    color:#fff;

    transform:translateY(-3px);

}

/* =========================
   ブログ検索
========================= */

.blog-search{

    padding:80px 20px;

    background:#fff;

}

.blog-search-form{

    max-width:700px;

    margin:40px auto 0;

    display:flex;

    gap:15px;

}

.blog-search-form input{

    flex:1;

    height:56px;

    border:2px solid #ddd;

    border-radius:999px;

    padding:0 25px;

    font-size:16px;

}

.blog-search-form input:focus{

    outline:none;

    border-color:#1e88e5;

}

.blog-search-form button{

    height:56px;

    padding:0 30px;

    border:none;

    border-radius:999px;

    background:#1e88e5;

    color:#fff;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.blog-search-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}