/* ======================================

  SOCIAL SECTION

====================================== */

.social-section{
max-width:1200px;
margin:0 auto;
padding:50px 20px;
}


.social-section h2{
font-size:34px;
font-weight:700;
letter-spacing:2px;
margin-bottom:30px;
text-align:center;
}

/* ======================================

 Instagram Feed Premium

====================================== */

#instagram-feed{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
    margin-bottom:80px;
}


/* カード */
.insta-card{
    display:block;
    position:relative;
    text-decoration:none;
    color:#222;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:
    0 8px 25px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04);
    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* 上部アクセント */
.insta-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        #ff6a00,
        #ff0000
    );
    z-index:5;
}

/* ホバー */
.insta-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 20px 40px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.08);
}

/* 画像エリア */
.image-wrap{
    position:relative;
    overflow:hidden;
}

/* Instagramラベル */
.image-wrap::before{
    content:"Instagram";
    position:absolute;
    top:12px;
    left:12px;
    z-index:10;
    padding:5px 12px;
    border-radius:30px;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    backdrop-filter:blur(5px);
}

/* 横長画像 */
.insta-card img{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.insta-card:hover img{
    transform:scale(1.08);
}

/* キャプション */
.caption{
    padding:10px;
    font-size:1.1em;
    line-height:1.4;
    color:#333;
    min-height:90px;
    font-weight:500;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* 動画アイコン */
.video-icon,
.carousel-icon{
    position:absolute;
    top:12px;
    right:12px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(0,0,0,.75);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    z-index:10;
    backdrop-filter:blur(4px);
}


/* ======================================

 Tablet

====================================== */

@media screen and (max-width:768px){
#instagram-feed{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.caption{
    font-size:13px;
    padding:16px;
}
}

/* ======================================

 Smartphone

====================================== */

@media screen and (max-width:480px){
#instagram-feed{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:50px;
}

/* スマホは3件のみ表示 */
#instagram-feed .insta-card:nth-child(n+4){
    display:none;
}

.insta-card{
    border-radius:15px;
}

.caption{
    padding:15px;
    font-size:13px;
    min-height:auto;
}
.video-icon,
.carousel-icon{
    width:36px;
    height:36px;
    font-size:14px;
}
}


@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');


/* =========================
 Facebook LED NEWS
========================= */

.fb-news-wrap{
display:flex;
width:100%;
height:50px;
overflow:hidden;
background:#050505;
border:2px solid #700;

font-family:'DotGothic16', monospace;
}
.fb-title{
width:220px;
flex-shrink:0;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(#222 1px, transparent 1px);
background-size:6px 6px;
color:#ff2b2b;
font-size:1.4em;
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000;
}
.fb-marquee{
flex:1;
overflow:hidden;
display:flex;
align-items:center;
background:
radial-gradient(#190000 1px, transparent 1px);
background-size:6px 6px;
}
.fb-track{
display:flex;
white-space:nowrap;
animation:ledScroll 110s linear infinite;
}
.fb-marquee:hover .fb-track{
animation-play-state:paused;
}
.fb-news-item{
display:inline-flex;
align-items:center;
text-decoration:none;
color:#ffe154;
font-size:1.4em;
padding-right:140px;
text-shadow:
0 0 5px #ff0000,
0 0 12px #ff0000,
0 0 25px #ff0000;
}
.fb-news-item::after{
content:"|";
margin-left:70px;
opacity:.5;
}
@keyframes ledBlink{
0%,100%{
opacity:1;
}
50%{
opacity:.85;
}
}
.fb-news-item{
animation:ledBlink 4s ease-in-out infinite;
}
@keyframes ledScroll{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}

/* ==========================
 タブレット
========================== */
@media screen and (max-width:768px){
.fb-news-wrap{
height:55px;
}
.fb-title{
width:150px;
font-size:18px;
}
.fb-news-item{
font-size:20px;
padding-right:90px;
}
.fb-news-item::after{
margin-left:40px;
}
}
/* ==========================
 スマホ
========================== */

@media screen and (max-width:480px){
.fb-news-wrap{
height:42px;
border-width:1px;
}
.fb-title{
width:90px;
font-size:1.2em;
letter-spacing:1px;
}
.fb-marquee{
padding-left:10px;
}
.fb-news-item{
font-size:1.3em;
padding-right:50px;
}
.fb-news-item::after{
margin-left:20px;
}
.fb-track{
animation:ledScroll 100s linear infinite;
}

}