@charset "utf-8";
/* FLAの日々の学びと活動（Facebook / Instagram）
   vnext.css のトークンに合わせる。新規クラスのみ。既存クラスの上書きはしない。 */

.fla-social{padding:clamp(34px,5vw,52px) 0;background:#fff;border-bottom:1px solid var(--line);color:var(--ink);scroll-margin-top:100px}
.fla-social-kicker{font:700 12px/1.5 var(--sans);letter-spacing:.16em;color:var(--red);margin:0 0 8px}
.fla-social h2{font-size:clamp(23px,3vw,34px);margin:0 0 12px}
.fla-social-lead{font-size:15px;line-height:1.9;color:var(--ink);max-width:58ch;margin:0 0 28px}

/* 2枚のカード。FacebookとInstagramの役割が並んで分かるようにする。 */
.fla-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.fla-social-card{--accent:var(--navy);
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px}
.fla-social-card[data-net="ig"]{--accent:var(--red)}
.fla-social-card::before{content:"";display:block;height:4px;border-radius:999px;background:var(--accent);margin:0 0 14px}
.fla-social-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.fla-social-head b{font:700 17px/1.4 var(--sans);letter-spacing:.01em}
.fla-social-handle{font-size:13px;color:var(--muted);text-decoration:none;word-break:break-all}
.fla-social-handle:hover{color:var(--red);text-decoration:underline}
.fla-social-role{font-size:14px;line-height:1.85;color:var(--ink);margin:0 0 14px}
.fla-social-mode{display:block;font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:5px}

/* 埋め込み枠。iframeの中身は親CSSで直せないため、外側の寸法だけを正しく与える。 */
.fla-social-embed{min-width:0;width:100%;max-width:500px;margin:0 auto;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f5f5}
.fla-social-embed iframe{display:block;border:0;max-width:100%}
/* Facebook: ヘッダー130px＋タイムライン460px＝590px（small_header=false／hide_cover=trueで重なりが出ない） */
.fla-social-embed-fb iframe{height:590px;margin:0 auto}
/* Instagram: 公式埋め込みの実測寸法（メディア枠=幅の75.3%、ヘッダー54px＋フッター154px）。
   padding-top の％は「包含ブロックの幅」基準。iframeと同じ幅の内側の箱で計算させるため
   .fla-social-ig-ratio を1枚はさむ。これでJSなしでも高さが幅に追従する。 */
.fla-social-ig-ratio{position:relative;padding-top:calc(75.3% + 212px)}
.fla-social-ig-ratio iframe{position:absolute;inset:0;width:100%;height:100%}

.fla-social-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;margin-top:16px;padding:10px 18px;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;line-height:1.6}
.fla-social-button:hover{opacity:.9}
.fla-social-note{font-size:12.5px;line-height:1.8;color:var(--muted);margin:22px 0 0;max-width:62ch}

/* 言語別の投稿は「一覧」ではなく入口として並べる（フィードとの重複表示を避ける） */
.fla-social-langs{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.fla-social-langs h3{font-size:14px;margin:0 0 12px}
.fla-social-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.fla-social-chips a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;
  text-decoration:none;color:var(--ink);font-size:14px;line-height:1.5}
.fla-social-chips a:hover{border-color:var(--red);color:var(--red)}
.fla-social-chips time{font-size:11.5px;color:var(--muted)}

.fla-social a:focus-visible{outline:3px solid var(--red);outline-offset:3px}

@media(max-width:860px){
  .fla-social-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .fla-social-card{padding:16px}
}
/* スマホでは埋め込みをカード幅いっぱいにする。
   Facebookのページ名（福井ランゲージアカデミー）は表示に315px必要で、
   カード内側に余白を残すと末尾が「…」で省略されてしまうため。 */
@media(max-width:560px){
  .fla-social-card{padding:14px 0 16px}
  .fla-social-card::before,
  .fla-social-head,
  .fla-social-role,
  .fla-social-button{margin-inline:14px}
  .fla-social-embed{max-width:none;border-radius:0;border-left-width:0;border-right-width:0}
}

/* Recruitment actions are readable before loading third-party feeds. */
.fla-social-next{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;margin:20px 0}
.fla-social-next-title{font-weight:750;color:var(--navy);margin:0 0 12px}
.fla-social-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px}
.fla-social-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid var(--navy);border-radius:10px;text-decoration:none;font-weight:700;font-size:14px;color:var(--navy);background:#fff;overflow-wrap:anywhere}
.fla-social-actions .fla-social-consult{background:var(--red);border-color:var(--red);color:#fff}
.fla-social-actions a:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.fla-social .fla-social-langs{margin:20px 0 26px;padding-top:16px}
.fla-social-chips a[aria-current="true"]{border:2px solid var(--navy);background:var(--paper);font-weight:800}
@media(max-width:560px){.fla-social-next{padding:16px}.fla-social-actions{display:grid;grid-template-columns:minmax(0,1fr)}.fla-social-actions a{justify-content:flex-start}.fla-social-head{flex-wrap:wrap}}