*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Yu Gothic,Meiryo,sans-serif;
    color:#333;

    background:linear-gradient(
        180deg,
        #f8fdff 0%,
        #eef7fb 35%,
        #e8f4f9 100%
    );
}

.logo{

    background:#ffffff;

    padding:0px;

    border-radius:4px;

    margin:0px;

}

.container{

max-width:1200px;
margin:auto;

}

.hero img{

width:100%;
display:block;

}

.cards{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

margin:40px 20px;

}

.card{

background:#fff;

border-radius:12px;

overflow:hidden;

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

}

.card img{

    width:100%;
    max-height:360px;

    object-fit:contain;

    display:block;

    background:#fff;

    padding:10px;

}

.card-body{

padding:20px;

}

.card h2{

margin-bottom:15px;

color:#00713d;

}

.card ul{

padding-left:20px;

line-height:2;

}

.card-gallery{
    display:flex;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
}

.card-gallery img{
    flex:1;
    min-width:140px;
    border-radius:8px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.card-image-only{
    padding:0;
    overflow:hidden;
    border-radius:16px;   /* .cardと同じ値 */
    background:#fff;      /* 必要なら */
    box-shadow:0 4px 12px rgba(0,0,0,.08); /* .cardと同じ影 */
}

.office-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:20px;

}

.office-card{

    transition:.2s;

}

.office-card:hover{

    transform:translateY(-4px);

}

.office-card h3{

    color:#00713d;

    margin-bottom:15px;

    font-size:22px;

}

.office-card p{

    margin:8px 0;

    line-height:1.8;

}

.office-card i{

    color:#0097c8;

    width:20px;

}


.news{

margin:40px 20px;

padding:25px;

background:#fff;

border-radius:12px;

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

}

.news h2{

margin-bottom:20px;

color:#00713d;

}

.news img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto 25px;
    border-radius:12px;
}

.news ul{

list-style:none;

padding:0;

}

.news li{

padding:12px 0;

border-bottom:1px solid #ddd;

}

.news li:last-child{

border:none;

}

.news a{

text-decoration:none;

color:#333;

}

.news .new a{

color:#d40000;

font-weight:bold;

}

.recruit-table{
    width:100%;
    border-collapse:collapse;
}

.recruit-table td{
    border:1px solid #ccc;
    padding:8px;
}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.news{

margin:20px 10px;

}

}


/* PC */

.header{
    display:none;
}

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:220px;
    height:100vh;

    background:#f8f8f8;

    padding-top:20px;

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

    overflow-y: auto;

}

.sidebar a{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:#333;

    padding:20px;

    font-size:22px;

}

.sidebar a:hover{

    background:#e6f4fa;

}

main{

    margin-left:260px;
    padding:30px;

}

.hero{

    width:100%;

    display:block;

}

.contact-container{

    max-width:800px;

    margin:60px auto;

    padding:40px;

    background:#ffffff;

    border-radius:12px;

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

}

.contact-container h1{

    color:#008bb8;

    margin-bottom:20px;

}

.lead{

    margin-bottom:35px;

    line-height:1.8;

}

label{

    display:block;

    margin-top:20px;

    font-weight:bold;

}

label span{

    color:red;

}

input,
textarea{

    width:100%;

    padding:12px;

    margin-top:8px;

    border:1px solid #cfd8dc;

    border-radius:6px;

    font-size:16px;

}

textarea{

    resize:vertical;

}

button{

    margin-top:30px;

    width:100%;

    padding:15px;

    border:none;

    background:#0097c8;

    color:#fff;

    font-size:18px;

    border-radius:6px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#007da6;

}

/* スマホ */

@media (max-width:768px){

.header{

    display:flex;

    align-items:center;

    background:#0097c8;

    color:#fff;

    padding:8px 12px;

}

.header h1{

    font-size:18px;

}

.menu-btn{

    width:auto;
    margin:0;
    padding:8px;

    background:none;
    border:none;

    color:#fff;

    font-size:26px;

    cursor:pointer;

}

.sidebar{

    transform:translateX(-100%);

    transition:.3s;

    z-index:1000;

}

.sidebar.show{

    transform:translateX(0);

}

main{

    margin-left:0;
    padding:15px;

}

.hero{

    width:100%;

}

.contact-container{

    margin:20px;

    padding:25px;

}

button{

    font-size:16px;

}




}