body{
    margin:0;

    font-family:sans-serif;

    background:#eaf6ff;

    color:#444;
}

/* ===== ヘッダー ===== */

header{

    background:linear-gradient(
        135deg,
        #cfe8ff 0%,
        #d8f6e5 100%
    );

    padding:20px 20px;

    text-align:center;
}

/* サイトタイトル */

header h1{

    margin:0;

    color:#4a7ea8;

    font-size:58px;

    font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

    font-weight:800;

    letter-spacing:5px;

    text-shadow:
    0 0 12px rgba(255,255,255,0.9);
}

/* URL */

.site-url{

    margin-top:20px;

    font-size:14px;

    color:#5f7f96;

    letter-spacing:1px;
}

/* ===== ナビ ===== */

nav{

    display:flex;

    justify-content:center;

    gap:10px;

    background:white;

    padding:15px;

    flex-wrap:wrap;
}

nav a{

    text-decoration:none;

    color:#4a7ea8;

    background:#eef7ff;

    padding:10px 15px;

    border-radius:10px;

    transition:0.3s;

    box-shadow:
    0 4px 12px rgba(255,255,255,0.8);
}

/* ボタンを押した時 */

nav a:hover{

    opacity:0.8;

    transform:translateY(-2px);
}

/* ===== メイン ===== */

main{

    padding:20px;
}

/* カード */

.menu-card,
.news,
.sns,
.counter,
.gallery{

    background:rgba(255,255,255,0.6);

    padding:14px 16px;

    margin-bottom:14px;

    border-radius:20px;

    box-shadow:
    0 4px 20px rgba(180,210,230,0.15);

    backdrop-filter:blur(6px);
}

/* SNSリンク */

.sns a{

    display:block;

    margin-bottom:10px;

    color:#4a7ea8;
}

/* ギャラリー */

.gallery{

    display:grid;

    gap:20px;
}

/* 画像 */

.card img{

    width:100%;

    border-radius:10px;
}

/* フッター */

footer{

    text-align:center;

    padding:20px;

    color:#777;
}

h2{
    margin-top:0;
    margin-bottom:10px;
}

p{
    margin-top:0;
    line-height:1.7;
}

.counter-text{

    font-size:13px;

    color:#6f7f8c;

    line-height:1.8;

    letter-spacing:1px;
}

/* ここまで今のCSS */


/* =========================
   タブレット対応
========================= */

@media screen and (min-width:768px){

main{

    max-width:720px;

    margin:0 auto;
}

header h1{

    font-size:72px;
}

nav{

    gap:15px;
}

.menu-card,
.news,
.sns,
.counter,
.gallery{

    padding:20px 24px;
}

}


/* =========================
   PC対応
========================= */

@media screen and (min-width:1024px){

main{

    max-width:1000px;

    margin:30px auto;
}

header{

    padding:40px 20px;
}

header h1{

    font-size:90px;

    letter-spacing:8px;
}

.site-url{

    font-size:16px;
}

nav{

    padding:20px;
}

nav a{

    padding:12px 22px;

    font-size:15px;
}

.gallery{

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

.menu-card,
.news,
.sns,
.counter,
.gallery{

    padding:24px 28px;
}

}