```css
/* ==========================================
   Home Page
   Fantasy CMS
========================================== */

/* ==========================================
   ABOUT
========================================== */

#about .container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

}

.about-content{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.about-title{

    color:var(--color-gold);

}

.about-image{

    overflow:hidden;
    border-radius:16px;

}

.about-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.05);

}


/* ==========================================
   GALLERY
========================================== */

.gallery-grid{

    display:grid;

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

    grid-auto-rows:140px;

    gap:20px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    cursor:pointer;

}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item::after{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    transition:.3s;

}

.gallery-item:hover::after{

    opacity:1;

}

/* レイアウト */

.gallery-item:nth-child(1){

    grid-column:span 5;
    grid-row:span 3;

}

.gallery-item:nth-child(2){

    grid-column:span 7;
    grid-row:span 3;

}

.gallery-item:nth-child(3){

    grid-column:span 4;
    grid-row:span 2;

}

.gallery-item:nth-child(4){

    grid-column:span 4;
    grid-row:span 2;

}

.gallery-item:nth-child(5){

    grid-column:span 4;
    grid-row:span 2;

}


/* ==========================================
   SYSTEM
========================================== */

.system-wrapper{

    display:grid;

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

    gap:40px;

}

.system-card{

    background:var(--color-surface);

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:40px;

}

.system-card h3{

    margin-bottom:32px;

    color:var(--color-gold);

    text-align:center;

}

.system-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.system-item:last-child{

    border:none;

}


/* ==========================================
   NEWS
========================================== */

#newsList{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.news-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 32px;

    background:var(--color-surface);

    border-left:3px solid var(--color-gold);

    border-radius:12px;

    transition:.3s;

}

.news-item:hover{

    transform:translateX(8px);

    background:var(--color-surface-2);

}

.news-date{

    color:var(--color-gold);

    min-width:120px;

}

.news-title{

    flex:1;

    padding-left:32px;

}


/* ==========================================
   ACCESS
========================================== */

.access-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.access-box{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.access-box p{

    color:var(--color-text);

}

.access-info{

    display:flex;

    align-items:center;

    gap:14px;

}

.access-info i{

    color:var(--color-gold);

}

#googleMap{

    width:100%;

    height:420px;

    border-radius:16px;

    overflow:hidden;

    background:#222;

}


/* ==========================================
   SNS
========================================== */

.sns-links{

    display:flex;

    gap:20px;

    margin-top:20px;

}

.sns-links a{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.1);

    transition:.3s;

}

.sns-links a:hover{

    background:var(--color-gold);

    color:#111;

}


/* ==========================================
   Animation
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}
```