/*
Theme Name: SNSフィードテーマ
Theme URI: https://goocom.co.jp
Author: GOOCOM co.,ltd.
Author URI: https://goocom.co.jp
Description: 画像・動画を縦型のSNS風フィードで表示するスマホ用軽量テーマです。LINE VOOM終了に伴う代替コンテンツ置き場として、ワードプレスで管理画面から画像・動画を投稿できます。ロゴとアクセントカラーだけ差し替えれば、自社専用として運用可能です。さらなる専用カスタマイズや設定の相談など、バグの報告は株式会社グーコムまで。
Version: 1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sns-feed
*/

/* ===========================================================
   Design tokens — 差し替え箇所はテーマカスタマイザーからも変更可
   =========================================================== */
:root{
  --snsfeed-accent: #2b6ef2;
  --snsfeed-bg: #ffffff;
  --snsfeed-surface: #f7f7f8;
  --snsfeed-text: #16171a;
  --snsfeed-text-dim: #63656c;
  --snsfeed-line: #e6e6e8;
  --snsfeed-radius: 14px;
  --snsfeed-max: 1180px;
}

/* ===========================================================
   Reset / base
   =========================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--snsfeed-bg);
  color:var(--snsfeed-text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.85;
  font-size:15px;
}
a{ color:inherit; text-decoration:none; }
img, video{ max-width:100%; display:block; }
h1, h2, h3, p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }

.snsfeed-container{ max-width:var(--snsfeed-max); margin:0 auto; padding:0 16px; }
@media (min-width:640px){
  .snsfeed-container{ padding:0 24px; }
}
.snsfeed-container--narrow{ max-width:560px; }

/* ===========================================================
   Header
   =========================================================== */
.snsfeed-header{
  border-bottom:1px solid var(--snsfeed-line);
  padding:12px 0;
  position:sticky; top:0; z-index:10;
  background:var(--snsfeed-bg);
  transition:height .25s ease, padding .25s ease;
}
/* ロゴは常に中央に配置。ナビがある場合は右側に添える形とし、左右どちらの
   幅にも影響されず中央が保たれるよう3カラムのグリッドを使う（投稿の閲覧の
   邪魔にならないよう、ヘッダー自体の高さはできるだけ低く抑える） */
.snsfeed-header-inner{
  /* minmax(0,1fr) ではなく単純な 1fr にすると、右側(ナビ)の内容量によって
     左右の列幅が揃わず、ロゴが真ん中からずれてしまうため、両側の列を
     強制的に同じ幅にするために minmax(0,1fr) を使う */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:10px;
}
.snsfeed-logo{ grid-column:2; justify-self:center; display:flex; align-items:center; }
.snsfeed-nav{ grid-column:3; justify-self:end; }
/* PC用ロゴ・スマホ用ロゴのどちらも、縦横比を保ったまま高さだけをヘッダーに収める。
   PCではロゴがある程度しっかり見える高さにしている */
.snsfeed-logo img{ max-height:42px; width:auto; height:auto; display:block; transition:max-height .25s ease; }
.snsfeed-logo-text{ font-weight:700; font-size:14px; letter-spacing:.02em; }
.snsfeed-nav-list{ display:flex; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
.snsfeed-nav-list a{ font-size:12.5px; color:var(--snsfeed-text-dim); transition:color .2s; }
.snsfeed-nav-list a:hover{ color:var(--snsfeed-accent); }

/* スマホ用ヘッダー画像（カスタマイザーで設定した場合のみ表示。PC用ロゴとは
   別画像を指定できる。@media (max-width:600px) 側でPC用と出し分ける） */
.snsfeed-logo-sp{ display:none; }

/* ===========================================================
   Page shell
   =========================================================== */
.snsfeed-page{ padding:40px 0 90px; }
.snsfeed-page-title{ font-size:22px; font-weight:700; margin-bottom:22px; }
.snsfeed-page-intro{ color:var(--snsfeed-text-dim); margin-bottom:32px; max-width:680px; }
.snsfeed-page-content{ color:var(--snsfeed-text-dim); max-width:680px; }
/* 投稿詳細ページの「戻る」ボタン。Instagramのように、画面の左上に
   丸いボタンで常に固定表示する（スクロールしても位置が変わらないので迷わない） */
.snsfeed-back-button{
  position:fixed; top:12px; left:12px; z-index:50;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s;
}
.snsfeed-back-button:hover{ background:rgba(0,0,0,.65); }
.snsfeed-back-button svg{ width:18px; height:18px; display:block; }

/* ===========================================================
   すべて／動画タブ
   =========================================================== */
.snsfeed-tabs{
  display:flex; gap:6px; margin:0 auto 18px; max-width:var(--snsfeed-max);
  border-bottom:1px solid var(--snsfeed-line);
}
.snsfeed-tab{
  padding:10px 18px; font-size:13.5px; font-weight:700; color:var(--snsfeed-text-dim);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.snsfeed-tab:hover{ color:var(--snsfeed-text); }
.snsfeed-tab.is-active{ color:var(--snsfeed-accent); border-bottom-color:var(--snsfeed-accent); }

/* ===========================================================
   Feed list / items
   =========================================================== */
.snsfeed-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:var(--snsfeed-max); margin:0 auto;
}
/* タブレット・PCでは横幅に合わせて複数カラムに並べる */
@media (min-width:700px){
  .snsfeed-list{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (min-width:1000px){
  .snsfeed-list{ grid-template-columns:repeat(3, 1fr); gap:18px; }
}
.snsfeed-item{
  border:1px solid var(--snsfeed-line);
  border-radius:var(--snsfeed-radius);
  overflow:hidden;
  background:var(--snsfeed-surface);
  display:flex; flex-direction:column;
  position:relative;
}
/* ===========================================================
   メディアグリッド（投稿1件に含まれる画像・動画をすべて表示する）
   件数（1〜4枚 / 5〜10枚）に応じてレイアウトが変わる。
   =========================================================== */
.snsfeed-media-grid{ width:100%; background:#000; position:relative; display:grid; gap:2px; }
.snsfeed-media-cell{ position:relative; background:#000; overflow:hidden; cursor:pointer; }
.snsfeed-media-cell img,
.snsfeed-media-cell video{ width:100%; height:100%; display:block; object-fit:cover; }

/* 1枚：正方形1枚 */
.snsfeed-media-grid--n1{ grid-template-columns:1fr; }
.snsfeed-media-grid--n1 .snsfeed-media-cell{ aspect-ratio:1/1; }

/* 2枚：横並びで2枚 */
.snsfeed-media-grid--n2{ grid-template-columns:1fr 1fr; }
.snsfeed-media-grid--n2 .snsfeed-media-cell{ aspect-ratio:1/1; }

/* 3枚：上に1枚（横いっぱい）・下に2枚 */
.snsfeed-media-grid--n3{ grid-template-columns:1fr 1fr; }
.snsfeed-media-grid--n3 .snsfeed-media-cell:nth-child(1){ grid-column:1/3; aspect-ratio:16/11; }
.snsfeed-media-grid--n3 .snsfeed-media-cell:nth-child(2),
.snsfeed-media-grid--n3 .snsfeed-media-cell:nth-child(3){ aspect-ratio:1/1; }

/* 4枚：上に1枚（横いっぱい）・下に3枚 */
.snsfeed-media-grid--n4{ grid-template-columns:1fr 1fr 1fr; }
.snsfeed-media-grid--n4 .snsfeed-media-cell:nth-child(1){ grid-column:1/4; aspect-ratio:16/11; }
.snsfeed-media-grid--n4 .snsfeed-media-cell:not(:nth-child(1)){ aspect-ratio:1/1; }

/* 5〜10枚：上に1枚（横いっぱい）・下は横スクロールで残り全部 */
.snsfeed-media-grid--n5plus{ display:flex; flex-direction:column; }
.snsfeed-media-grid--n5plus > .snsfeed-media-cell{ width:100%; aspect-ratio:1/1; }
.snsfeed-media-strip{
  display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.snsfeed-media-strip .snsfeed-media-cell{ flex:0 0 32%; aspect-ratio:1/1; scroll-snap-align:start; }

/* 動画・埋め込みのプレビューには小さな再生アイコンを重ねる */
.snsfeed-media-playicon{
  position:absolute; inset:0; margin:auto; width:34px; height:34px;
  border-radius:50%; background:rgba(0,0,0,.5); pointer-events:none;
}
.snsfeed-media-playicon::after{
  content:''; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
  border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff;
}
.snsfeed-media-embed-preview{ position:relative; width:100%; height:100%; overflow:hidden; background:#111; }
.snsfeed-media-embed-preview iframe{
  position:absolute; top:50%; left:50%; width:180%; height:180%;
  transform:translate(-50%,-50%); pointer-events:none; border:0;
}

/* HOMEページの投稿サムネイル1枚（正方形・タップで詳細ページへ） */
.snsfeed-media-thumb-link{ display:block; aspect-ratio:1/1; overflow:hidden; background:#000; position:relative; }
.snsfeed-media-thumb-link .snsfeed-media-cell{ width:100%; height:100%; cursor:default; }

/* 「動画」タブのサムネイル：見た目はsnsfeed-media-thumb-linkと同じ正方形だが、
   リンクではなくタップでビューアを開くボタン相当なので、中のセルは
   cursor:pointerのままにしておく（上のcursor:defaultを引き継がない）。 */
.snsfeed-video-thumb{ display:block; aspect-ratio:1/1; overflow:hidden; background:#000; position:relative; }
.snsfeed-video-thumb .snsfeed-media-cell{ width:100%; height:100%; }

/* ===========================================================
   ピン留めメニュー（フィード上部の小さなショートカット一覧）
   =========================================================== */
.snsfeed-pinned-menu{
  display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:2px 2px 18px; margin:0 auto 6px; max-width:var(--snsfeed-max);
  scrollbar-width:thin;
}
.snsfeed-pinned-menu__item{
  flex:none; width:60px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}
.snsfeed-pinned-menu__thumb{
  width:52px; height:52px; border-radius:50%; overflow:hidden;
  border:2px solid var(--snsfeed-accent);
  display:flex; align-items:center; justify-content:center;
  background:var(--snsfeed-surface);
}
.snsfeed-pinned-menu__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.snsfeed-pinned-menu__thumb-fallback{ font-size:18px; }
.snsfeed-pinned-menu__label{
  font-size:10.5px; color:var(--snsfeed-text-dim); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.snsfeed-pinned-menu__item:hover .snsfeed-pinned-menu__label{ color:var(--snsfeed-accent); }

.snsfeed-title{ font-size:15px; font-weight:700; margin:10px 14px 0; line-height:1.5; }
.snsfeed-caption{
  padding:6px 14px 2px; color:var(--snsfeed-text);
  font-size:13.5px; line-height:1.7;
}
.snsfeed-caption p{ margin:0 0 6px; }
.snsfeed-caption p:last-child{ margin-bottom:0; }
.snsfeed-more{
  display:inline-block; margin:2px 0 0; font-size:12.5px; color:var(--snsfeed-accent); cursor:pointer;
}
.snsfeed-more:hover{ text-decoration:underline; }
.snsfeed-caption-full{ white-space:pre-wrap; }
.snsfeed-caption-full[hidden]{ display:none; }

.snsfeed-social-actions{ display:flex; align-items:center; gap:16px; margin:8px 14px 0; }
.snsfeed-item--single .snsfeed-social-actions{ margin:12px 18px 0; }

.snsfeed-like-btn, .snsfeed-share-btn{
  display:inline-flex; align-items:center; gap:5px; padding:4px 2px;
  background:none; border:0; cursor:pointer; color:var(--snsfeed-text-dim); font-size:12.5px;
  font-family:inherit;
}
.snsfeed-like-icon, .snsfeed-share-icon{ width:18px; height:18px; transition:transform .15s ease; }
.snsfeed-like-btn.is-liked{ color:#e0245e; }
.snsfeed-like-btn.is-liked .snsfeed-like-icon{ fill:#e0245e; stroke:#e0245e; transform:scale(1.08); }
.snsfeed-like-btn:disabled{ cursor:default; }
.snsfeed-share-btn:active .snsfeed-share-icon{ transform:scale(.88); }

.snsfeed-share-feedback{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:rgba(20,20,22,.9); color:#fff; font-size:12.5px; padding:8px 16px; border-radius:20px;
  pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:1200;
}
.snsfeed-share-feedback.is-visible{ opacity:1; }

.snsfeed-item-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 14px 12px; margin-top:auto;
}
.snsfeed-date{ font-size:11.5px; color:var(--snsfeed-text-dim); }
.snsfeed-permalink-link{ font-size:11.5px; color:var(--snsfeed-text-dim); white-space:nowrap; }
.snsfeed-permalink-link:hover{ color:var(--snsfeed-accent); text-decoration:underline; }

.snsfeed-item--single .snsfeed-title{ font-size:20px; margin:16px 18px 0; }
.snsfeed-item--single .snsfeed-caption{ padding:10px 18px 4px; font-size:14.5px; white-space:pre-wrap; }
.snsfeed-item--single .snsfeed-date{ display:block; padding:2px 18px 16px; font-size:12px; }

/* ===========================================================
   Pagination
   =========================================================== */
.snsfeed-pagination{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top:44px; flex-wrap:wrap;
}
.snsfeed-pagination .page-numbers{
  padding:8px 14px; border:1px solid var(--snsfeed-line); border-radius:8px;
  font-size:13.5px; color:var(--snsfeed-text-dim);
}
.snsfeed-pagination a.page-numbers:hover{ border-color:var(--snsfeed-accent); color:var(--snsfeed-accent); }
.snsfeed-pagination .current{
  background:var(--snsfeed-accent); color:#fff; border-color:var(--snsfeed-accent);
}

.snsfeed-empty{ text-align:center; color:var(--snsfeed-text-dim); padding:70px 0; }

/* ===========================================================
   Footer
   =========================================================== */
.snsfeed-footer{
  border-top:1px solid var(--snsfeed-line);
  padding:26px 0; text-align:center;
  color:var(--snsfeed-text-dim); font-size:12.5px;
}

/* ===========================================================
   ビューア（画像・動画タップで開く、画面いっぱいの表示）
   Instagramのように、開いた直後は画像・動画が大きく表示され、下の方に
   キャプションの冒頭が少しだけ見えている（テキストがあることがわかる）。
   下にスクロール（スワイプ）するとキャプションのパネルがせり上がってきて
   全文が読める。パネルは半透明なので、下の画像は透けて見え続ける。
   =========================================================== */
.snsfeed-postmodal{ position:fixed; inset:0; z-index:1000; background:#000; }
.snsfeed-postmodal[hidden]{ display:none; }

.snsfeed-postmodal-close{
  position:fixed; top:12px; right:12px; z-index:20;
  width:36px; height:36px; border-radius:50%; border:0;
  background:rgba(0,0,0,.5); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.snsfeed-postmodal-scroll{ height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.snsfeed-postmodal-media-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden; background:#000;
}
.snsfeed-postmodal-dim{
  position:absolute; inset:0; background:#000; opacity:0; z-index:5;
  pointer-events:none; transition:opacity .05s linear;
}
.snsfeed-postmodal-carousel{
  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.snsfeed-postmodal-slide{
  flex:0 0 100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center; height:100%;
}
.snsfeed-postmodal-slide img,
.snsfeed-postmodal-slide video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.snsfeed-postmodal-embed-wrap{ position:relative; width:100%; padding-top:56.25%; }
.snsfeed-postmodal-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.snsfeed-postmodal-counter{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:10;
  color:#fff; font-size:12.5px; background:rgba(0,0,0,.5); padding:4px 12px; border-radius:20px;
}

/* キャプションパネル：背景が半透明のグラデーション（下の画像・動画が透けて見える）。
   高さをJSがスクロール量に応じて増減させ、少しずつせり上がるように見せる。
   初期状態（高さが低い状態）でも冒頭のテキストが見えるようにしてある。 */
.snsfeed-postmodal-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  overflow:hidden;
  background:linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,0) 100%);
  color:#fff;
  padding:14px 20px 30px;
}
.snsfeed-postmodal-caption-handle{
  width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.55);
  margin:0 auto 10px;
}
.snsfeed-postmodal-caption h2{ font-size:15px; font-weight:700; margin-bottom:6px; }
.snsfeed-postmodal-caption-body{ font-size:14px; line-height:1.8; white-space:pre-wrap; }
.snsfeed-postmodal-caption-date{ display:block; margin-top:14px; font-size:11.5px; color:rgba(255,255,255,.7); }

/* ドラッグ／スクロールでキャプションを開くための「のりしろ」（見た目には出ない） */
.snsfeed-postmodal-spacer{ height:70vh; }

body.snsfeed-modal-open{ overflow:hidden; }

/* ===========================================================
   HOMEページ（Instagramのプロフィール画面のような構成）
   =========================================================== */
.snsfeed-home-cover{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.snsfeed-home-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.snsfeed-home-profile{ text-align:center; padding:8px 0 20px; }
.snsfeed-home-name{ font-size:19px; font-weight:700; margin-bottom:4px; }
.snsfeed-home-tagline{ color:var(--snsfeed-text-dim); font-size:13.5px; max-width:420px; margin:0 auto 4px; }

/* 公式サイトなどのリンク。3つまでなので、入るところまでは横並びにする */
.snsfeed-home-links{
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
  gap:8px; margin-top:12px;
}
.snsfeed-home-link{
  display:inline-block; padding:6px 14px; border-radius:16px; border:1px solid var(--snsfeed-line);
  font-size:12.5px; font-weight:700; color:var(--snsfeed-accent); white-space:nowrap;
}
.snsfeed-home-link:hover{ border-color:var(--snsfeed-accent); }

.snsfeed-home-sns{ display:flex; justify-content:center; gap:14px; margin-top:16px; }
.snsfeed-home-sns-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--snsfeed-line);
  display:flex; align-items:center; justify-content:center; color:var(--snsfeed-text);
}
.snsfeed-home-sns-icon:hover{ border-color:var(--snsfeed-accent); color:var(--snsfeed-accent); }
.snsfeed-home-sns-icon svg{ width:18px; height:18px; }

.snsfeed-home-grid,
.snsfeed-video-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; margin-top:8px;
}
.snsfeed-video-grid{ max-width:var(--snsfeed-max); margin-left:auto; margin-right:auto; }
@media (min-width:700px){
  .snsfeed-video-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (min-width:1000px){
  .snsfeed-video-grid{ grid-template-columns:repeat(5, 1fr); }
}

.snsfeed-home-more{ text-align:center; margin:26px 0 10px; }
.snsfeed-btn{
  display:inline-block; padding:11px 30px; border-radius:24px; background:var(--snsfeed-accent);
  color:#fff; font-size:13.5px; font-weight:700;
}
.snsfeed-btn:hover{ opacity:.9; }

/* ===========================================================
   Mobile
   =========================================================== */
@media (max-width:600px){
  .snsfeed-item{ border-radius:8px; }
  .snsfeed-page{ padding:28px 0 70px; }

  /* スマホでは、ページ最上部にいる間はロゴがしっかり見える高さで表示し、
     少しスクロールしたら（投稿を見る邪魔にならないよう）小さく縮める。
     縮んだ状態でも以前の高さ(1cm)の1.5倍を保つ。
     1cm/0.6cm等はCSSの絶対単位で、端末解像度に関わらずブラウザ側で
     概ね実寸相当に変換される。JS(assets/js/main.js)がスクロール量に応じて
     .snsfeed-header--compact クラスを付け外しする。 */
  .snsfeed-header{
    height:2cm;
    padding:0;
    display:flex;
    align-items:center;
  }
  .snsfeed-header-inner{ height:100%; }
  .snsfeed-logo img{ max-height:1.4cm; }
  .snsfeed-logo-text{ font-size:16px; }
  .snsfeed-nav-list{ gap:10px; }
  .snsfeed-nav-list a{ font-size:11px; }

  .snsfeed-header.snsfeed-header--compact{ height:1.5cm; }
  .snsfeed-header.snsfeed-header--compact .snsfeed-logo img{ max-height:1cm; }
  .snsfeed-header.snsfeed-header--compact .snsfeed-logo-text{ font-size:12px; }

  /* スマホ用ヘッダー画像が設定されている場合のみ、PC用ロゴの代わりに
     そちらを表示する（未設定の場合はPC用ロゴがそのまま縮小表示される） */
  .snsfeed-logo.has-mobile-logo .snsfeed-logo-pc{ display:none; }
  .snsfeed-logo.has-mobile-logo .snsfeed-logo-sp{ display:flex; align-items:center; }
}