@charset "UTF-8";
/*
* トップページ「Instagram」欄（旧「Facebook」枠）のスタイル
*
* 2026-08-04 作成。
* それまで静止バナー画像（common/images_n/webp/top_facebook.webp）だった枠を、
* WordPress（/news/）の Smash Balloon から取得した実フィードに差し替えたことに伴う調整。
*
* 🔴 読み込み順に注意
* プラグイン本体の sbi-styles.min.css は、フィード断片と一緒に 内で読み込まれる
* （但馬家幸之助様の実装と同じ形）。つまり本ファイル（ で読む）より「後」に来る。
* そのため打ち消したい指定は、プラグイン側より必ず詳細度を高くする必要がある。
* プラグイン側: #sb_instagram #sbi_load .sbi_follow_btn a → (id 2 / class 1)
* 本ファイル : #instagram_list_jp.top-insta #sb_instagram … → (id 2 / class 2) で勝つ
*
* 🔴 フォローボタンの背景色はここで指定しない
* プラグインが と inline で出すため CSS では勝てない。
* 色はフィード(id=1)の設定値 followcolor / followtextcolor 側で #3a3a3a に変更済み
* （/news/ のテーマカラーと同色）。
*
* 🔴 既存の #instagram_list_jp 用CSS とは衝突しない
* gfgs-*.css にある指定はすべて「#instagram_list_jp #instagram_list .instagram-◯◯」で、
* 内側の #instagram_list を要求する。Smash Balloon の出力には存在しないため当たらない。
*/
/* ------------------------------------------------------------------
* 1. 枠
* .item_m（padding:1em・border:1px solid #eee）の中に入る。
* 見出し Instagram
は .item_m h2 の既存指定（下線付き）がそのまま効くので触らない。
* ------------------------------------------------------------------ */
#instagram_list_jp.top-insta {
--ti-accent: #c1272d; /* サイトのアクセント赤（ホバー時のみ） */
}
#instagram_list_jp.top-insta #sb_instagram {
padding: 0 !important; /* プラグインが inline で padding-bottom を持つため */
margin: 0;
width: 100%;
}
/* ------------------------------------------------------------------
* 2. 写真タイル
* 6枚・3列（フィード設定 num=6 / cols=3）。正方形は imageaspectratio=1:1 で確保済み。
* ------------------------------------------------------------------ */
#instagram_list_jp.top-insta #sb_instagram #sbi_images {
padding: 0;
}
#instagram_list_jp.top-insta #sb_instagram .sbi_photo_wrap,
#instagram_list_jp.top-insta #sb_instagram .sbi_photo {
border-radius: 4px; /* 角をわずかに丸め、News & Topics のピル型バッジと調子を合わせる */
overflow: hidden;
}
/* 画像そのもののゆっくりした拡大。
/tripguide/ のカードと同じ作法（transform + transition）で統一する */
#instagram_list_jp.top-insta #sb_instagram .sbi_photo {
transition: transform .5s ease, opacity .3s ease;
}
html.no-touchevents #instagram_list_jp.top-insta #sb_instagram .sbi_photo_wrap:hover .sbi_photo {
transform: scale(1.06);
}
/* プラグイン既定の「ホバーで暗いオーバーレイ＋アイコン」は、
キャプションもいいね数も非表示にしている今回は中身が空になるため出さない */
#instagram_list_jp.top-insta #sb_instagram .sbi_hover_top,
#instagram_list_jp.top-insta #sb_instagram .sbi_hover_bottom {
display: none;
}
/* ------------------------------------------------------------------
* 3. フォローボタン
* 既定は角丸4px・大きめ。News & Topics のカテゴリバッジに合わせてピル型・小さめにする。
* 色（背景・文字）はフィード設定側で指定済み（上記の注意書き参照）。
* ------------------------------------------------------------------ */
#instagram_list_jp.top-insta #sb_instagram #sbi_load {
margin-top: 14px;
padding: 0;
}
#instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a {
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.7em;
border-radius: 999px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1;
transition: opacity .25s ease, transform .25s ease;
/* 🔴 2026-08-26 変更: 文字が読みにくいという指摘を受けた調整。
プラグインが と
インラインで書き出すため、CSS 側から変えるには !important が要る
（フィード設定 followcolor / followtextcolor を変える手もあるが、
そちらは本番フィードの共通設定なので test だけの確認ができない）。
背景をより濃く・文字を白のまま太く大きくしてコントラストを上げている */
background: #262626 !important;
color: #fff !important;
}
/* 🔴 ラベルは 直下のテキストではなく Follow on Instagram で包まれている。
にだけ色を当てても span 側の指定（プラグインCSS）に負けて文字が沈むため、
span・svg にも明示的に白を当てる（2026-08-26） */
#instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a span,
#instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a * {
color: #fff !important;
}
#instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a svg {
width: 16px;
height: 16px;
fill: #fff;
}
html.no-touchevents #instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a:hover {
opacity: .82;
transform: translateY(-1px);
}
/* ------------------------------------------------------------------
* 4. 取得できなかったときの代替バナー
* WordPress 側が落ちている等でフィードが空のとき、枠が潰れないように
* 従来どおりバナー画像を出す（index.php 側で切り替え）。
* ------------------------------------------------------------------ */
#instagram_list_jp.top-insta .top-insta__fallback img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/* ------------------------------------------------------------------
* 5. スマホ
* .item_m は min-width:300px で1列に落ちる。3列のまま少し詰める。
* ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
#instagram_list_jp.top-insta #sb_instagram #sbi_load {
margin-top: 12px;
}
#instagram_list_jp.top-insta #sb_instagram #sbi_load .sbi_follow_btn a {
padding: .65em 1.3em;
font-size: 11px;
}
}
/* ------------------------------------------------------------------
* 6. Instagram と News & Topics の横幅比率（2026-08-25 追加）
*
* 従来は gfgs.css の .item_m（flex: 1 0 0）で 50% : 50% だった。
* Instagram を 30%・News & Topics を 70% にする。
*
* 🔴 gfgs.css は他ページでも読み込むため直接編集しない。
* この2枠を囲む section に付けた .top-2col--news に限定して上書きする。
* 🔴 .item_m は margin:30px 1em 0（左右合計 2em）を持つので calc() で差し引く。
* 引かないと合計が 100% を超えて2枠目が折り返す。
* 🔴 min-width:300px も解除する（1000px 幅のとき 30% = 300px 前後で折り返すため）。
*
* 1000px 未満はレイアウトが窮屈になるので従来どおり（均等 → 縦積み）。
* ------------------------------------------------------------------ */
@media screen and (min-width: 1000px) {
/* サイト全体に box-sizing の統一指定が無いため、この2枠だけ border-box に固定する。
content-box のままだと padding:1em ＋ border:1px が calc() の外側に加算され、
合計が 100% を数px超えて2枠目が折り返す */
.top-2col--news .item-container > .item_m {
box-sizing: border-box;
}
.top-2col--news .item-container > .item_m:nth-of-type(1) {
flex: 0 0 calc(30% - 2em);
max-width: calc(30% - 2em);
min-width: 0;
}
.top-2col--news .item-container > .item_m:nth-of-type(2) {
flex: 0 0 calc(70% - 2em);
max-width: calc(70% - 2em);
min-width: 0;
}
}
/* ------------------------------------------------------------------
* 7. 枠まわりの余白調整（2026-08-26 追加）
*
* 指定値:
* .item_m margin: 30px 1em 0 → 0px 1em 0 （枠上の余白を殺す）
* #topics_box margin: 0 auto → 50px auto 50px（セクション全体で上下に確保する）
*
* 🔴 gfgs.css は英語版トップ（/en/）でも読み込むため直接編集しない。
* 日本語トップの当該セクション（.top-2col--news）に限定して上書きする。
* 🔴 501px 以上に限定する。gfgs.css は max-width:500px で
* .item_m { margin:10px 0.4em } を別途持っており、そちらは変更しない指示のため。
* ------------------------------------------------------------------ */
#topics_box.top-2col--news {
margin: 50px auto 50px;
}
@media screen and (min-width: 501px) {
.top-2col--news .item-container > .item_m {
margin: 0px 1em 0;
}
}