*,
*::before,
*::after {
    box-sizing: border-box;
}

/* パソコン用 */
@media screen and (min-width: 1280px) {
    /* 画面サイズが1280px以上に適用 */
}

/* タブレット用 */
@media only screen and (min-width: 641px) and (max-width: 1279px) {
    /* 画面サイズが641px以上、1279px以下に適用 */
}

/* スマートフォン用 */
@media screen and (max-width: 640px) {
    /* 画面サイズが640px以下に適用 */
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    margin-bottom: 100px;
    color: black;
    font-family: 'Yu Gothic', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    background-color: rgba(238, 248, 255, 1);
}



/*----work----*/

h2 {
    text-align: center;
    padding-top: 100px;
    color: #61808e;
}



h3 {
    text-align: center;
    font-weight: 50px;
}

.work-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
    list-style: none;
}

.work-a{
    color: inherit;
    text-decoration: none;
}

.work-img{
    width: 300px;
    height: auto;
}

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    box-shadow: 0 5px 5px rgba(0,0,0,.1);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 10px rgba(0,0,0,.2);
}

.c-btn {
background: #61808e;
border: 2px solid #61808e;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
margin: auto;
}

.c-btn:hover {
background: #fff;
color: #61808e;
}

.more-a{
    color: inherit;
    text-decoration: none;
}