/* =========================================
   Layout
   ページ構造・配置
========================================= */

/* 背景レイヤー */
.bg {
    position: fixed;
    inset: -3%;
    background:
        url('https://cf461569.cloudfree.jp/assets/img/back_img.png')
        center / cover no-repeat;
    z-index: -1;

    animation: bgFloat 3s ease-out forwards;
}

@keyframes bgFloat {

    0% {
        transform: scale(1) rotate(0deg);
    }

    30% {
        transform: scale(1.03) rotate(0.8deg);
    }

    65% {
        transform: scale(1.03) rotate(-0.5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
}

/* コンテンツ幅 */
.container {
    width: min(96%, 1600px);
    margin: auto;
}

/* ガラス風パネル */
.panel {
    background: var(--panel);
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 18px;
    box-shadow: 4px 4px 8px 1px #113f5cd1;
}

/* Grid共通 */
.grid {
    padding-top:20px;
    display: grid;
    gap: 1rem;
}

/* 3カラム */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 2カラム */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 1カラム */
.grid-1 {
    grid-template-columns: 1fr;
}

/* フッター */
.footer {
    text-align: center;
    padding: 2rem;
}

/* モバイル対応 */
@media (max-width: 768px) {

    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

}