/* ベース設定 */
body {
    background-color: #111111; /* 枠の外側の背景色（より暗く） */
    color: #ffffff;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    margin: 0;
    padding: 4px 4px; /* 上下に余白を作って枠を浮き上がらせる */
    text-align: center;
}

.container {
    max-width: 900px;         /* 枠の最大幅 */
    margin: 0 auto;           /* 中央寄せ */
    background-color: #222222; /* 枠の内側の背景色（少し明るく） */
    border: 1px solid #1a98c7; /* 【重要】枠線の色。SSのような青みがかった暗色 */
    padding: 12px 12px;       /* 枠の内側の余白 */
    box-sizing: border-box;    /* パディングを幅に含める */
}

/* --- ヘッダー画像の調整 --- */
.main-header {
    margin-bottom: 50px;
}
.main-header img {
    width: 100%;
    height: auto;
    display: block;
    
}

/* 文字リンク（下線なし・マウスオーバーで白く光る） */
a {
    text-decoration: none;
    color: #bbbbbb; 
    transition: all 0.3s ease;
}
a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.section-title { margin-top: 50px; }
.section-title a { font-size: 26px; font-weight: 700; }

.book-links { list-style: none; padding: 0; margin: 30px 0; }
.book-links li { margin: 20px 0; }
.book-links a { font-size: 20px; }

/* Font Awesome アイコン */
a.blank::after {
    font-family: "Font Awesome 5 Free";
    content: "\f360";
    margin: 0 4px;
    font-weight: 600;
    font-size: 1.1em;
    display: inline-block;
}

/* SNSロゴ画像リンクの設定 */
.sns-links {
    margin: 30px 0; /* 上下の余白を少し調整 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* ロゴ同士の隙間を少し詰める */
}

.sns-logo {
    width: 70px; /* 200pxから約1/3の70pxに変更 */
    height: auto;
    filter: brightness(0.8);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.sns-logo-link:hover .sns-logo {
    filter: brightness(1.2);
    transform: scale(1.05); /* 小さいので少しだけ動きを強調 */
}


/* --- グリッド --- */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 60px 20px; }
.hover-item, .hover-footer-item { position: relative; display: inline-block; }
.hover-item img, .hover-footer-item img { display: block; width: 100%; height: auto; transition: opacity 0.4s; }
.img-on { position: absolute; top: 0; left: 0; opacity: 0; }
.hover-item:hover .img-on, .hover-footer-item:hover .img-on { opacity: 1; }
.hover-item img { border-radius: 12px; }

/* --- YouTubeレスポンシブ設定 --- */
.video-section {
    margin: 50px 20px;
    display: flex;
    justify-content: center;
}
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 825px; /* iframeの幅に合わせる */
    padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #444;
}

/* フッター画像 */
.footer-image-links { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 60px; }
.copyright { margin-top: 40px; font-size: 16px; color: #777777; line-height: 1.8; }

/* スマホ用設定 */
@media (max-width: 600px) {
    body {
        padding: 2px; /* スマホでは外側の余白を狭く */
    }
    .container {
        padding: 2px 2px; /* スマホでは内側の余白を狭く */
    }
    .grid-container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .sns-logo { width: 60px; }
}