@charset "UTF-8";

/* =============================================================================
 * SNSフィード（Instagram）
 * =============================================================================
 * 対応するPHP: sns-feed.php
 *
 * ■ 設計
 *   見た目の値（列数・間隔・角丸・色・行数）はすべてCSS変数で受け取る。
 *   PHP側は .sns-feed の style 属性に変数を書き込むだけで、クラスを増やさない。
 *   こうしてあるので、管理画面のプレビューは「同じHTMLの変数を書き換える」だけで
 *   実物と一致する。プレビュー専用のCSSは作らないこと。作った瞬間にズレる。
 *
 *   並べ方と画像の形は data属性で切り替える（data-layout / data-ratio）。
 *   要素の出し分けはルートのクラス（no-date / no-caption / no-follow）。
 *
 * ■ 並べ方は3つ
 *   grid   … 格子。列数を指定して並べる
 *   list   … 1列。写真とテキストを横に並べた行を縦に積む。枠の高さで区切れる
 *   slider … 横スクロールの帯。右へ無限に流れる
 *
 * ■ 触るとき
 *   値の既定は PHP の takeuchi_sns_display_defaults()。ここの :root 相当の値は
 *   style属性が来なかったときの保険なので、既定を変えるならPHP側を直す。
 *
 * ■ このテーマでの落とし穴（3つ）
 *   1. rem を使わない
 *      css/style.css が html { font-size: 10px } を敷いている。
 *      rem で書くと意図の 10/16 の大きさになる。文字は px か em で書く。
 *   2. ボタンの入れ物を <p> にしない
 *      css/style.css の
 *        :where(.wp-block-post-content, .article_body) p:not(.c_btn, .c_more) a
 *      が「段落の中のリンク」に下線と赤字を付ける。段落にすると巻き込まれる。
 *      テーマ自身も自前のボタン（p.c_btn / p.c_more）をこの規則から除外している。
 *   3. リンクにマウスを乗せると全体が透ける
 *      css/style.css:181 の
 *        @media (min-width: 768px) { a:hover { opacity: .7 } }
 *      がすべてのリンクに掛かる。カードは <a> の中に写真を持っているので、
 *      写真ごと70%まで透け、白い背景が透けて「白くなる」ように見える。
 *      拡大とキャプションの出方で反応は十分伝わるので、フィードの中では打ち消す。
 *
 *   なお css/style.css は wp_head() の後に直接読まれる（c-head.php）。
 *   同じ詳細度ならテーマが勝つので、競る箇所はクラスを2回書いて上げている
 *   （table-color.css と同じ手当て）。
 * ========================================================================== */

.sns-feed {
  /* style属性が付かなかったときの保険。実際の値はPHPが流し込む。 */
  --sns-cols: 5;
  --sns-cols-col: 2;
  --sns-cols-sp: 2;

  /* 枠が狭いときに使う列数。中身は画面幅で決まる（少し下の @media）。
     こうしておくと @container のほうは「枠が600px以下か」だけを見ればよく、
     置き場所（2カラム）と端末（スマホ）の見分けが1か所に収まる。 */
  --sns-cols-narrow: var(--sns-cols-sp);
  --sns-gap: 12px;
  --sns-radius: 8px;
  --sns-accent: #d0121b;
  --sns-lines: 2;
  --sns-max-h: 420px;
  --sns-thumb: 120px;
  --sns-text: 13px;

  /* Instagramのブランドグラデーション。ボタンの見た目「グラデーション」で使う。 */
  --sns-gradient: linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);

  position: relative;

  /* スマホ向けの切り替えを「画面の幅」ではなく「この枠の幅」で行う。
     記事の本文カラムに差し込む部品なので、画面が広くても枠が狭いことがある。
     こうしておくと、管理画面のプレビューは枠を狭めるだけでスマホの見た目になり、
     プレビュー専用のCSSを持たなくて済む（持つと必ず実物とズレていく）。
     対応していないブラウザ向けの控えは、このファイルの末尾にある。 */
  container-type: inline-size;

  /* 誘導ボタンの置き場所をCSSだけで変えられるように格子で組む。
     ふだんは1列（子はすべて全幅）で、「見出しの横」のときだけ
     2列目を使う。DOMを組み替えないので、管理画面のプレビューが
     その場で追従できる（組み替える作りにすると追従できない）。
     中身の無い行は高さ0になるので、余計な隙間はできない。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;

  /* 記事にそのまま置かれる部品なので、自分で下の余白を持つ。
     ショートコードの出力はブロックの器に入らないため、
     フィードを続けて2つ置くとくっついてしまう。 */
  margin: 0 0 1.8em;
}

.sns-feed__head,
.sns-feed__stage,
.sns-feed__more,
.sns-feed__follow {
  grid-column: 1 / -1;
}

/* 既定（下）：見出し → フィード → もっと読み込む → ボタン */
.sns-feed__head {
  grid-row: 1;
}

.sns-feed__stage {
  grid-row: 2;
}

.sns-feed__more {
  grid-row: 3;
}

/* 枠でスクロールする並べ方（枠内スクロール・縦リスト）では、
   下まで送れば自動で続くのでボタンを出さない。
   .sns-js はJSが動いているときだけ付く。付かない環境では
   このボタンが続きを出す唯一の手段なので、残しておく。 */
.sns-js .sns-feed[data-scroll="1"] .sns-feed__more {
  display: none;
}

.sns-feed__follow {
  grid-row: 4;
}

/* 前：見出しのすぐ下、フィードの上 */
.sns-feed[data-follow-pos="top"] .sns-feed__follow {
  grid-row: 2;
  margin: 0 0 1.2em;
}

.sns-feed[data-follow-pos="top"] .sns-feed__stage {
  grid-row: 3;
}

.sns-feed[data-follow-pos="top"] .sns-feed__more {
  grid-row: 4;
}

/* 見出しの横：同じ行の右側。左に見出しが並ぶので、
   ボタンだけが浮いて見えることがない。記事側の見出しは要らなくなる。 */
.sns-feed[data-follow-pos="head"] .sns-feed__head {
  grid-column: 1;
}

.sns-feed[data-follow-pos="head"] .sns-feed__follow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 0 .9em;
  padding-left: 1em;
  text-align: right;
}

/* 行の中に収める。16em の下限のままだと見出しを押しのけてしまう。 */
.sns-feed[data-follow-pos="head"].sns-feed .sns-feed__follow a {
  min-width: 0;
}

.sns-feed__stage {
  position: relative;
}

.sns-feed__track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sns-feed__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sns-feed__link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.sns-feed__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--sns-radius);
  background: #f2f2f2;
}

.sns-feed__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.sns-feed__link:hover .sns-feed__media img,
.sns-feed__link:focus .sns-feed__media img {
  transform: scale(1.04);
}

.sns-feed.no-zoom .sns-feed__media img {
  transition: none;
}

.sns-feed.no-zoom .sns-feed__link:hover .sns-feed__media img,
.sns-feed.no-zoom .sns-feed__link:focus .sns-feed__media img {
  transform: none;
}

/* 影。写真だけでなくカード全体に落とす。 */
.sns-feed.has-shadow .sns-feed__media {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}

/* -----------------------------------------------------------------------------
 * 見出しとアカウント名
 * -------------------------------------------------------------------------- */

.sns-feed__head {
  display: flex;
  align-items: baseline;
  gap: .7em;
  margin: 0 0 .9em;
}

.sns-feed__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.sns-feed__user {
  color: #767676;
  font-size: 13px;
}

.sns-feed.no-title .sns-feed__title,
.sns-feed.no-username .sns-feed__user {
  display: none;
}

/* 両方消えたら行ごと消す。空の行のぶんだけ余白が残るのを防ぐ。 */
.sns-feed.no-title.no-username .sns-feed__head {
  display: none;
}

/* -----------------------------------------------------------------------------
 * 種別マーク（動画・複数枚）
 * -------------------------------------------------------------------------- *
 * 写真1枚では動画かどうか分からないので、右上に小さく重ねる。
 * 画像を足さずCSSだけで描いている（動画＝三角、複数枚＝重なった四角）。
 * -------------------------------------------------------------------------- */

.sns-feed__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .45);
  pointer-events: none;
}

.sns-feed__badge::before {
  content: "";
  position: absolute;
}

/* 動画＝再生の三角 */
.sns-feed__badge--video::before {
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  transform: translate(-50%, -50%);
}

/* 複数枚＝重なった四角 */
.sns-feed__badge--album::before {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 1px;
  box-shadow: 3px 3px 0 -1.5px rgba(0, 0, 0, .45), 4px 4px 0 0 #fff;
}

.sns-feed.no-badge .sns-feed__badge {
  display: none;
}

/* -----------------------------------------------------------------------------
 * 画像の形
 * -------------------------------------------------------------------------- */

.sns-feed[data-ratio="1-1"] .sns-feed__media {
  aspect-ratio: 1 / 1;
}

.sns-feed[data-ratio="4-5"] .sns-feed__media {
  aspect-ratio: 4 / 5;
}

.sns-feed[data-ratio="original"] .sns-feed__media {
  aspect-ratio: auto;
}

.sns-feed[data-ratio="original"] .sns-feed__media img {
  height: auto;
}

/* -----------------------------------------------------------------------------
 * 並べ方：グリッド
 * -------------------------------------------------------------------------- */

.sns-feed[data-layout="grid"] .sns-feed__track {
  display: grid;
  grid-template-columns: repeat(var(--sns-cols), minmax(0, 1fr));
  gap: var(--sns-gap);
}

/* -----------------------------------------------------------------------------
 * 並べ方：縦リスト
 * -------------------------------------------------------------------------- *
 * 1行＝「写真＋テキスト」を横に並べたもの。それを縦に積む。
 * 写真を全幅にすると1件で画面が埋まってしまうので、幅を決めて左に置く。
 *
 * 枠の高さ（--sns-max-h）を指定すると、その高さで区切って中だけスクロールする。
 * 記事の途中に差し込む用途では、これが無いと縦にいくらでも伸びてしまう。
 * -------------------------------------------------------------------------- */

.sns-feed[data-layout="list"] .sns-feed__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sns-gap);
}

.sns-feed[data-layout="list"] .sns-feed__link {
  display: grid;
  grid-template-columns: var(--sns-thumb) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sns-feed[data-layout="list"] .sns-feed__meta {
  margin-top: 0;
}

/* 本文もボタンも出さないなら、テキスト側は空になる。写真だけを全幅で積む。 */
.sns-feed[data-layout="list"].no-date.no-caption .sns-feed__link {
  grid-template-columns: minmax(0, 1fr);
}

/* 高さで区切って中をスクロールさせる */
.sns-feed[data-layout="list"][data-scroll="1"] .sns-feed__stage {
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: calc(var(--sns-radius) + 6px);
}

.sns-feed[data-layout="list"][data-scroll="1"] .sns-feed__viewport {
  max-height: var(--sns-max-h);
  overflow-y: auto;
  /* 中を読み切ったあと、勢いでページごと動くのを止める */
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
}

.sns-feed[data-layout="list"][data-scroll="1"] .sns-feed__viewport::-webkit-scrollbar {
  width: 6px;
}

.sns-feed[data-layout="list"][data-scroll="1"] .sns-feed__viewport::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #c9c9c9;
}

/* -----------------------------------------------------------------------------
 * 並べ方：枠内スクロール
 * -------------------------------------------------------------------------- *
 * 格子に並べたまま、高さを決めて中だけを動かす。記事の途中に差し込んでも
 * 縦に伸びないので、帯として置きやすい。
 *
 * 下まで見ると「もっと読み込む」が自動で発火する（JS側）。押すボタンも
 * 残してあるので、JSが動かない環境でも続きを出せる。
 * -------------------------------------------------------------------------- */

.sns-feed[data-layout="panel"] .sns-feed__track {
  display: grid;
  grid-template-columns: repeat(var(--sns-cols), minmax(0, 1fr));
  gap: var(--sns-gap);
}

.sns-feed[data-layout="panel"][data-scroll="1"] .sns-feed__viewport {
  max-height: var(--sns-max-h);
  padding-right: 4px;
  overflow-y: auto;
  /* 中を読み切ったあと、勢いでページごと動くのを止める */
  overscroll-behavior: contain;
}

.sns-feed[data-layout="panel"][data-scroll="1"] .sns-feed__viewport::-webkit-scrollbar {
  width: 6px;
}

.sns-feed[data-layout="panel"][data-scroll="1"] .sns-feed__viewport::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #c9c9c9;
}

/* まだ下に続きがあることが分かるよう、下端をうっすら暈す。
   読み切ったら JS が is-scrolled-end を付けて消す。 */
.sns-feed[data-layout="panel"][data-scroll="1"] .sns-feed__stage::after,
.sns-feed[data-layout="list"][data-scroll="1"] .sns-feed__stage::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  opacity: 1;
  transition: opacity .2s;
  pointer-events: none;
}

.sns-feed.is-scrolled-end[data-scroll="1"] .sns-feed__stage::after {
  opacity: 0;
}

/* -----------------------------------------------------------------------------
 * 並べ方：横スライド
 * -------------------------------------------------------------------------- *
 * 実体は横スクロールできる帯。スクロールバーは隠し、送りボタンとホイールで動かす。
 * 幅を calc の割り算で出すため端数が出る。1px の欠けが目立つので、
 * 左右に2pxずつ逃がして、その分ネガティブマージンで戻している。
 * -------------------------------------------------------------------------- */

.sns-feed[data-layout="slider"] .sns-feed__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 2px;
  margin: 0 -2px;
}

.sns-feed[data-layout="slider"] .sns-feed__viewport::-webkit-scrollbar {
  display: none;
}

.sns-feed[data-layout="slider"] .sns-feed__track {
  display: flex;
  gap: var(--sns-gap);
}

.sns-feed[data-layout="slider"] .sns-feed__item {
  flex: 0 0 calc((100% - (var(--sns-cols) - 1) * var(--sns-gap)) / var(--sns-cols));
  scroll-snap-align: start;
}

/* 送りボタン。stage を基準にしているので、日付やボタンの有無で位置がずれない。 */
.sns-feed__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: background-color .2s;
}

.sns-feed__nav:hover {
  background: #f6f6f6;
}

.sns-feed__nav--prev {
  left: -12px;
}

.sns-feed__nav--next {
  right: -12px;
}

.sns-feed__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.sns-feed__nav--next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

.sns-feed__nav--prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

/* -----------------------------------------------------------------------------
 * 日付・本文
 * -------------------------------------------------------------------------- */

.sns-feed__meta {
  display: block;
  margin-top: .6em;
  font-size: var(--sns-text);
  line-height: 1.6;
}

.sns-feed__date {
  display: block;
  color: #767676;
  font-size: .85em;
}

/* 日付は3通りぶんHTMLに入っている。選ばれたものだけ出す。
   こうしておくと、書式を変えたときプレビューがその場で追従する。 */
.sns-feed__date span {
  display: none;
}

.sns-feed[data-df="dot"] .sns-feed__date span[data-df="dot"],
.sns-feed[data-df="jp"] .sns-feed__date span[data-df="jp"],
.sns-feed[data-df="slash"] .sns-feed__date span[data-df="slash"] {
  display: inline;
}

.sns-feed__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sns-lines);
  line-clamp: var(--sns-lines);
  overflow: hidden;
}

.sns-feed.no-date .sns-feed__date {
  display: none;
}

.sns-feed.no-caption .sns-feed__text {
  display: none;
}

/* 両方消したら余白ごと消す。空の行が残ると高さが揃わない。 */
.sns-feed.no-date.no-caption .sns-feed__meta {
  display: none;
}

/* -----------------------------------------------------------------------------
 * 本文の見せ方（below / overlay / hover）
 * -------------------------------------------------------------------------- *
 * below   … 既定。写真の下に置く（上の指定そのまま）
 * overlay … 写真の下側に重ねる。文章のぶんだけ縦に伸びないのが利点
 * hover   … マウスを乗せたときだけ写真の上に出す。一覧がすっきりする
 *
 * 縦リストは写真と文章が横に並ぶ形なので、重ねる意味がない。
 * :not([data-layout="list"]) で外している。
 *
 * hover は指で触る端末では出番がない（ホバーが無い）。
 * その場合は overlay と同じ挙動にして、文章が読めない状態を避ける。
 * -------------------------------------------------------------------------- */

.sns-feed[data-caption="overlay"]:not([data-layout="list"]) .sns-feed__meta,
.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  padding: 30px 12px 12px;
  border-radius: 0 0 var(--sns-radius) var(--sns-radius);
  color: #fff;
  /* 写真の明るさに関係なく読めるよう、下から黒を敷く */
  background: linear-gradient(to top,
      rgba(0, 0, 0, .8) 0%,
      rgba(0, 0, 0, .45) 55%,
      rgba(0, 0, 0, 0) 100%);
}

.sns-feed[data-caption="overlay"]:not([data-layout="list"]) .sns-feed__date,
.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__date {
  color: rgba(255, 255, 255, .85);
}

/* マウスで出す：置き方は overlay とまったく同じで、出るきっかけだけが違う。
   写真全体を覆わないのは、写真を隠さずに文章を読ませたいから
   （覆うと、写真を見せるための一覧なのに写真が見えなくなる）。
   帯の高さは中身（日付＋本文）で決まる。 */
.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__meta {
  opacity: 0;
  transition: opacity .25s ease;
}

.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__link:hover .sns-feed__meta,
.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__link:focus .sns-feed__meta,
.sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__link:focus-visible .sns-feed__meta {
  opacity: 1;
}

/* 指で触る端末はホバーが無いので、常に出す（重ねると同じ扱い）。 */
@media (hover: none) {

  .sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__meta {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sns-feed[data-caption="hover"] .sns-feed__meta {
    transition: none;
  }
}

.sns-feed.no-follow .sns-feed__follow {
  display: none;
}

/* -----------------------------------------------------------------------------
 * テーマの規則を打ち消す
 * -------------------------------------------------------------------------- *
 * css/style.css:181 が @media (min-width:768px) で
 *   a:hover, input[type="image"]:hover { opacity: .7 }
 * を全リンクに掛けている。カードは <a> の中に写真を持つので、乗せると
 * 写真ごと70%まで透けて白く抜ける（実機だけで起きる。管理画面は
 * style.css を読まないため、プレビューでは気づけない）。
 *
 * 順番では勝てない（style.css は wp_head の後に読まれる）ので、
 * クラスを2回書いて詳細度で上げる。
 * -------------------------------------------------------------------------- */

.sns-feed.sns-feed a:hover,
.sns-feed.sns-feed a:focus,
.sns-feed.sns-feed a:active {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
 * 写真の代わりのマーク
 * -------------------------------------------------------------------------- *
 * 写真が無く、既定の画像も決めていないとき。文字だけのカードにすると
 * 並びが崩れるので、そのSNSの丸いマークで場所を埋める。
 * -------------------------------------------------------------------------- */

.sns-feed__media.is-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f3;
}

.sns-feed__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34%;
  max-width: 84px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.sns-feed__mark svg {
  width: 52%;
  height: 52%;
  fill: #8c8f94;
}

/* SNSの色を薄く効かせる。地の色は変えず、マークだけ。 */
.sns-feed--ig .sns-feed__mark svg {
  fill: #c13584;
}

.sns-feed--x .sns-feed__mark svg {
  fill: #14171a;
}

/* 縦リストは写真の枠が小さいので、丸も詰める。 */
.sns-feed[data-layout="list"] .sns-feed__mark {
  width: 58%;
}

/* -----------------------------------------------------------------------------
 * 写真の無い投稿
 * -------------------------------------------------------------------------- *
 * Xは文字だけの投稿が普通にある。写真必須にすると「取得したのに出ない投稿」が
 * 生まれるので、写真が無い項目は is-text を付けてカードとして成立させる。
 * -------------------------------------------------------------------------- */

.sns-feed__item.is-text .sns-feed__link {
  height: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: var(--sns-radius);
  background: #fff;
  box-sizing: border-box;
}

.sns-feed__item.is-text .sns-feed__meta {
  margin-top: 0;
}

/* 縦リストは「写真＋文章」の2列だが、写真が無い項目は1列にする。 */
.sns-feed[data-layout="list"] .sns-feed__item.is-text .sns-feed__link {
  grid-template-columns: minmax(0, 1fr);
}

/* 「重ねる」「マウスで出す」は写真があってこその見せ方。
   写真の無い項目では、重ねずに普通に置く。 */
.sns-feed[data-caption="overlay"] .sns-feed__item.is-text .sns-feed__meta,
.sns-feed[data-caption="hover"] .sns-feed__item.is-text .sns-feed__meta {
  position: static;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  opacity: 1;
}

.sns-feed[data-caption="overlay"] .sns-feed__item.is-text .sns-feed__date,
.sns-feed[data-caption="hover"] .sns-feed__item.is-text .sns-feed__date {
  color: #767676;
}

/* 影は写真に落としているので、写真の無いカードには枠に落とす。 */
.sns-feed.has-shadow .sns-feed__item.is-text .sns-feed__link {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}

/* -----------------------------------------------------------------------------
 * もっと読み込む
 * -------------------------------------------------------------------------- *
 * 中身は最初からHTMLに書き出してあり、押すと隠していたぶんが出る。
 * サーバーへ問い合わせに行かないので、待ち時間も失敗もない。
 * -------------------------------------------------------------------------- */

.sns-feed__more {
  margin: 1.2em 0 0;
  text-align: center;
}

.sns-feed__more-btn {
  padding: .7em 2em;
  border: 1px solid #d5d5d5;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.sns-feed__more-btn:hover,
.sns-feed__more-btn:focus {
  border-color: #bbb;
  background: #f6f6f6;
}

/* -----------------------------------------------------------------------------
 * ボタン
 * -------------------------------------------------------------------------- */

.sns-feed__follow {
  margin: 1.4em 0 0;
  text-align: center;
}

.sns-feed[data-follow-align="left"] .sns-feed__follow {
  text-align: left;
}

.sns-feed[data-follow-align="right"] .sns-feed__follow {
  text-align: right;
}

/* クラスを2回書いて詳細度を上げている（理由はファイル冒頭のコメント）。
   入れ物を div にしたので下線の規則は当たらないが、
   テーマ側に別の規則が増えたときの備えとして残しておく。 */
.sns-feed.sns-feed .sns-feed__follow a {
  display: inline-block;
  min-width: 16em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s, color .2s, filter .2s;
}

.sns-feed.sns-feed .sns-feed__more-btn {
  text-decoration: none;
}

/* 大きさ */
.sns-feed[data-btn-size="s"] .sns-feed__follow a {
  padding: .65em 1.6em;
  font-size: 13px;
}

.sns-feed[data-btn-size="m"] .sns-feed__follow a {
  padding: .9em 2em;
  font-size: 15px;
}

.sns-feed[data-btn-size="l"] .sns-feed__follow a {
  padding: 1.15em 2.6em;
  font-size: 17px;
}

/* 見た目：Instagramのグラデーションで塗る */
.sns-feed[data-btn="gradient"] .sns-feed__follow a {
  background: var(--sns-gradient);
  color: #fff;
}

.sns-feed[data-btn="gradient"] .sns-feed__follow a:hover,
.sns-feed[data-btn="gradient"] .sns-feed__follow a:focus {
  /* グラデーションは色を差し替えにくいので、明るさで反応させる。 */
  filter: brightness(1.08);
}

/* 見た目：指定色で塗る */
.sns-feed[data-btn="fill"] .sns-feed__follow a {
  background: var(--sns-accent);
  color: #fff;
}

.sns-feed[data-btn="fill"] .sns-feed__follow a:hover,
.sns-feed[data-btn="fill"] .sns-feed__follow a:focus {
  filter: brightness(1.12);
}

/* 見た目：枠線だけ（押すと塗る） */
.sns-feed[data-btn="outline"] .sns-feed__follow a {
  border-color: var(--sns-accent);
  background: #fff;
  color: var(--sns-accent);
}

.sns-feed[data-btn="outline"] .sns-feed__follow a:hover,
.sns-feed[data-btn="outline"] .sns-feed__follow a:focus {
  background: var(--sns-accent);
  color: #fff;
}

/* -----------------------------------------------------------------------------
 * 「枠が狭い」の中身を分ける
 * -------------------------------------------------------------------------- *
 * 枠が600px以下になる場面は2つある。
 *   ・PCで左右に並べたとき（枠524px、画面は広いまま）
 *   ・スマホ（枠390px、画面も狭い）
 * 枠の幅だけでは見分けられないので、画面の幅を併せて見る。
 * 768px はテーマが2カラムを縦に積み直す境目（css/style.css の max-width:767px）。
 * スマホでは2カラムがそもそも無くなるので、取り違えようがない。
 * -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {

  .sns-feed {
    --sns-cols-narrow: var(--sns-cols-col);
  }
}

/* 管理画面のプレビューだけは、枠を狭めても画面は広いまま。
   どのつもりで見ているかはPHPが data-force で書いてくる。
   属性が付くぶん詳細度が高いので、上の @media より強い。 */
.sns-feed[data-force="pc"] {
  --sns-cols-narrow: var(--sns-cols);
}

.sns-feed[data-force="col"] {
  --sns-cols-narrow: var(--sns-cols-col);
}

.sns-feed[data-force="sp"] {
  --sns-cols-narrow: var(--sns-cols-sp);
}


/* -----------------------------------------------------------------------------
 * 狭いとき（2カラム・スマホ）
 * -------------------------------------------------------------------------- *
 * 基準は画面の幅ではなく、この部品が置かれた枠の幅。
 * 列数だけは上の --sns-cols-narrow を通して画面幅も見ている。
 * -------------------------------------------------------------------------- */

@container (max-width: 600px) {

  .sns-feed[data-layout="grid"] .sns-feed__track,
  .sns-feed[data-layout="panel"] .sns-feed__track {
    grid-template-columns: repeat(var(--sns-cols-narrow), minmax(0, 1fr));
  }

  .sns-feed[data-layout="slider"] .sns-feed__item {
    flex-basis: calc((100% - (var(--sns-cols-narrow) - 1) * var(--sns-gap)) / var(--sns-cols-narrow));
  }

  /* 枠の端にボタンが被るので、指でのスワイプに任せる。 */
  .sns-feed__nav {
    display: none;
  }

  /* 「見出しの横」は横幅が要る。狭い枠では段を分ける。 */
  .sns-feed[data-follow-pos="head"] .sns-feed__head {
    grid-column: 1 / -1;
  }

  .sns-feed[data-follow-pos="head"] .sns-feed__follow {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 1em;
    padding-left: 0;
    text-align: left;
  }

  /* 縦リストは写真を詰める。指定値そのままだと文章の幅が残らない。 */
  .sns-feed[data-layout="list"] .sns-feed__link {
    grid-template-columns: min(var(--sns-thumb), 32%) minmax(0, 1fr);
    gap: 10px;
  }

  .sns-feed__follow a {
    display: block;
    min-width: 0;
  }
}

/* 動きを減らす設定にしている人には動かさない。 */
@media (prefers-reduced-motion: reduce) {

  .sns-feed__media img,
  .sns-feed__follow a {
    transition: none;
  }

  .sns-feed[data-layout="slider"] .sns-feed__viewport {
    scroll-behavior: auto;
  }
}

/* -----------------------------------------------------------------------------
 * コンテナクエリに対応していないブラウザ向けの控え
 * -------------------------------------------------------------------------- *
 * 上の @container が効かないと、スマホでもPCの列数のまま表示されてしまう。
 * 中身は上と同じで、基準が「画面の幅」に変わるだけ。
 * 対応ブラウザが行き渡ったら、このブロックごと消してよい。
 * -------------------------------------------------------------------------- */

@supports not (container-type: inline-size) {

  @media (max-width: 767px) {

    /* ここは画面767px以下なので --sns-cols-narrow の中身はスマホの列数。
       呼び方だけ上と揃えてある。 */
    .sns-feed[data-layout="grid"] .sns-feed__track {
      grid-template-columns: repeat(var(--sns-cols-narrow), minmax(0, 1fr));
    }

    .sns-feed[data-layout="slider"] .sns-feed__item {
      flex-basis: calc((100% - (var(--sns-cols-narrow) - 1) * var(--sns-gap)) / var(--sns-cols-narrow));
    }

    .sns-feed__nav {
      display: none;
    }

    .sns-feed[data-layout="list"] .sns-feed__link {
      grid-template-columns: min(var(--sns-thumb), 34vw) minmax(0, 1fr);
      gap: 10px;
    }

    .sns-feed__follow a {
      display: block;
      min-width: 0;
    }
  }
}

/* =============================================================================
 * 管理画面（SNS連携 > 表示）のエディタ枠
 * =============================================================================
 * フロントには出ないクラス。ただし同じ1枚で読ませている。
 * プレビューを実物と一致させるため、フィード本体のCSSを2枚に分けない。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 上段：SNSの切り替え
 * -------------------------------------------------------------------------- *
 * 画面の一番上に置く一番大きい選択。まず「どちらの話か」を決める場所なので、
 * WordPressの標準タブより大きく、押す場所だと分かる形にしている。
 * -------------------------------------------------------------------------- */

.takeuchi-sns-switch {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}

.takeuchi-sns-switch__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
  color: #2c3338;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}

.takeuchi-sns-switch__item:hover {
  border-color: #8c8f94;
  background: #f6f7f7;
  color: #2c3338;
}

.takeuchi-sns-switch__item.is-current {
  border-color: #2271b1;
  background: #2271b1;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.takeuchi-sns-switch__item .dashicons {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

/* 「未接続」などの補足。小さく添える。 */
.takeuchi-sns-switch__item em {
  color: #8c8f94;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.takeuchi-sns-switch__item.is-current em {
  color: rgba(255, 255, 255, .8);
}

/* やることのタブ。WP標準の nav-tab を少し大きくしている。
   上段のSNS切り替えとぶつからないよう、色は標準のままにする。 */
/* タブそのものに余白は付けない。WPの
     .wrap h2.nav-tab-wrapper { margin: 0 }
   がクラス2＋要素1（0,2,1）で、こちらの二重クラス（0,2,0）では負ける。
   代わりに中身（.takeuchi-sns-panel）を下げている。 */

/* タブの仕切り線と中身のあいだ。
   設定側のアコーディオンと、プレビュー側の「PC / スマホ」の
   どちらもこの器に入っているので、まとめて下がる。 */
.takeuchi-sns-panel {
  margin-top: 22px;
}

.takeuchi-sns-tabs .nav-tab {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
}

/* 貯めてある投稿の一覧。件数が多いので枠で区切ってスクロールさせる。 */
.takeuchi-sns-cached {
  max-width: 900px;
  max-height: 420px;
  margin: 10px 0;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  overflow-y: auto;
}

.takeuchi-sns-cached__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f1;
  cursor: pointer;
}

.takeuchi-sns-cached__row:last-child {
  border-bottom: 0;
}

.takeuchi-sns-cached__row:hover {
  background: #f6f7f7;
}

.takeuchi-sns-cached__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  object-fit: cover;
  background: #f0f0f1;
}

.takeuchi-sns-cached__thumb.is-empty {
  display: block;
  box-shadow: inset 0 0 0 1px #dcdcde;
}

.takeuchi-sns-cached__body {
  flex: 1 1 auto;
  min-width: 0;
}

.takeuchi-sns-cached__date {
  display: block;
  color: #646970;
  font-size: 12px;
}

.takeuchi-sns-cached__text {
  display: block;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.takeuchi-sns-cached__link {
  flex: 0 0 auto;
  font-size: 12px;
}

/* 写真が無いときに充てる画像の選択欄。 */
.takeuchi-sns-fb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.takeuchi-sns-fb__img {
  width: 56px;
  height: 56px;
  border: 1px solid #dcdcde;
  border-radius: 3px;
  object-fit: cover;
}

.takeuchi-sns-fb__none {
  color: #646970;
  font-size: 13px;
}

/* 記事に貼るショートコード。 */
.takeuchi-sns-sc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}

.takeuchi-sns-sc #takeuchi-sns-sc-box {
  flex: 1 1 380px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #f6f7f7;
  font-size: 13px;
}

.takeuchi-sns-sc-done {
  color: #00713c;
  font-size: 13px;
  font-weight: 600;
}

/* 未保存の目印。触るまでは出さない。 */
.takeuchi-sns-save {
  margin: 24px 0 0;
  padding: 12px 14px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
}

.takeuchi-sns-save__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 下段は意味合いが違うので、線で区切って弱く見せる。 */
.takeuchi-sns-save__row.is-sub {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f1;
}

/* 「保存」と「変更を破棄」は同じ形・同じ幅にして、対の操作だと分かるようにする。 */
.takeuchi-sns-save .button {
  min-width: 8em;
  justify-content: center;
  text-align: center;
}

/* 未保存の知らせ。箱で囲うと3つ目の「ボタンのようなもの」に見えるので、
   点と文字だけにして、ボタンとは役割が違うことを形で示す。 */
.takeuchi-sns-dirty {
  display: none;
  align-items: center;
  gap: .5em;
  color: #8a6116;
  font-size: 13px;
  font-weight: 600;
}

.takeuchi-sns-dirty::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dba617;
}

/* 変えるまでは出さない。押す機会が無いボタンを置かない。
   セレクタを長くしているのは、WPの
     .wp-core-ui .button { display: inline-block }
   がクラス2つ（0,2,0）で、1つ書きでは負けて出っぱなしになるため。 */
.takeuchi-sns-editor .takeuchi-sns-save .takeuchi-sns-discard {
  display: none;
}

.takeuchi-sns-editor.is-dirty .takeuchi-sns-dirty,
.takeuchi-sns-editor.is-dirty .takeuchi-sns-save .takeuchi-sns-discard {
  display: inline-flex;
}

.takeuchi-sns-save .takeuchi-sns-reset {
  min-width: 0;
  padding: 0;
  color: #b32d2e;
  font-size: 13px;
}

.takeuchi-sns-save .takeuchi-sns-reset:hover,
.takeuchi-sns-save .takeuchi-sns-reset:focus {
  color: #8a2424;
}



/* -----------------------------------------------------------------------------
 * 設定の節（アコーディオン）
 * -------------------------------------------------------------------------- *
 * 見出しは 16px の太字で、行全体が押せる。小さくすると「畳まれている」ことに
 * 気づけず、設定が無いと思われる（タブを小さな文字リンクにして実際に起きた）。
 * 右側に「いまの値」を出しておくので、開かずに現状が読める。
 * -------------------------------------------------------------------------- */

.takeuchi-sns-acc {
  margin: 0 0 10px;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  background: #fff;
}

.takeuchi-sns-acc[open] {
  border-color: #2271b1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.takeuchi-sns-acc__head {
  display: flex;
  align-items: baseline;
  gap: .9em;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

/* 標準の三角を消して、自前の印を出す。 */
.takeuchi-sns-acc__head::-webkit-details-marker {
  display: none;
}

.takeuchi-sns-acc__head::marker {
  content: '';
}

.takeuchi-sns-acc__head::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 2px 0 0;
  border-right: 2px solid #50575e;
  border-bottom: 2px solid #50575e;
  transform: rotate(-45deg) translateY(-2px);
  transition: transform .15s ease;
}

.takeuchi-sns-acc[open] > .takeuchi-sns-acc__head::before {
  transform: rotate(45deg) translateY(-2px);
}

.takeuchi-sns-acc__title {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: #1d2327;
  line-height: 1.4;
}

/* いまの値。見出しより弱く、でも読める大きさで。 */
.takeuchi-sns-acc__now {
  flex: 1 1 auto;
  font-size: 13px;
  color: #646970;
  line-height: 1.5;
}

.takeuchi-sns-acc__body {
  padding: 0 18px 14px;
  border-top: 1px solid #f0f0f1;
}

.takeuchi-sns-acc__body .form-table {
  margin-top: 0;
}

.takeuchi-sns-acc__body .takeuchi-sns-layouts {
  margin-top: 16px;
}

/* 設定項目のグループ見出し。項目が多いので、ここで区切って探しやすくする。 */
.takeuchi-sns-group {
  margin: 22px 0 0;
  padding: 0 0 6px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 13px;
  font-weight: 700;
  color: #50575e;
  letter-spacing: .04em;
}

.takeuchi-sns-editor__cols {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.takeuchi-sns-editor__side {
  /* 項目名の幅（11em）は別に決まっているので、ここは入力欄と
     注記のための幅。余りはプレビュー側へ回す（grow を100対1にしている）。 */
  flex: 1 1 540px;
  max-width: 620px;
}

.takeuchi-sns-editor__side .form-table th {
  width: 11em;
  padding: 14px 16px 14px 0;
  line-height: 1.4;
}

.takeuchi-sns-editor__side .form-table td {
  padding: 14px 10px;
  line-height: 1.6;
}

/* 数値のあとに続く「列」「px」などの単位。入力欄から少し離す。 */
.takeuchi-sns-editor__side .form-table td .description {
  display: inline;
  margin-left: .2em;
}

/* 以前は中身の 1080px をそのまま置いていたので、横に並べるのに
   1760px（600 + 32 + 1128）必要だった。普通のPCでは足りず下へ回っていた。
   いまは幅が足りなければ全体を縮めて出すので、この幅だけ置ければ横に並ぶ。
   540 + 32 + 540 ＝ 1112px から横並びになる。管理メニューを畳めば
   1280pxの画面でも横に並ぶ。
   grow を 100 にしてあるのは、空きをほぼ全部プレビューへ回すため
   （設定側はこれ以上広げても読みやすくならない）。 */
.takeuchi-sns-editor__preview {
  flex: 100 1 540px;
  min-width: 0;
  /* 横に並んでいるときは、設定を触っても目に入る位置に留める。 */
  position: sticky;
  top: 46px;
}

/* -----------------------------------------------------------------------------
 * 並べ方をアイコンで選ぶ
 * -------------------------------------------------------------------------- *
 * 中身はラジオボタン。丸を消してカード全体を押せるようにしている。
 * 選択中はキーボード操作でも分かるよう、枠と背景の両方を変える。
 * -------------------------------------------------------------------------- */

/* 並べ方の数ぶんの列を作り、必ず1行に収める。
   幅を固定していたころは、余白と枠のぶんで入り切らず折り返していた
   （box-sizing が content-box なので 116px の指定でも実寸136px）。
   列数は PHP が --sns-pick で渡すので、並べ方が増えても直さなくていい。 */
.takeuchi-sns-layouts {
  display: grid;
  grid-template-columns: repeat(var(--sns-pick, 4), minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

/* 管理画面が細くなる幅では、2列に落として文字を潰さない。 */
@media screen and (max-width: 782px) {

  .takeuchi-sns-layouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.takeuchi-sns-layouts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 16px 6px 12px;
  border: 2px solid #dcdcde;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}

.takeuchi-sns-layouts__item:hover {
  border-color: #8c8f94;
  background: #f6f7f7;
}

/* ラジオ本体は隠すが、キーボードで辿れるようにしておく（画面外へ出さない）。 */
.takeuchi-sns-layouts__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.takeuchi-sns-layouts__item:has(input:checked) {
  border-color: #2271b1;
  background: #f0f6fc;
}

.takeuchi-sns-layouts__item:has(input:focus-visible) {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/* :has() が無いブラウザ向け。JSがこのクラスを付ける。 */
.takeuchi-sns-layouts__item.is-checked {
  border-color: #2271b1;
  background: #f0f6fc;
}

.takeuchi-sns-layouts__icon {
  display: block;
  color: #50575e;
}

.takeuchi-sns-layouts__item:has(input:checked) .takeuchi-sns-layouts__icon,
.takeuchi-sns-layouts__item.is-checked .takeuchi-sns-layouts__icon {
  color: #2271b1;
}

.takeuchi-sns-layouts__icon svg {
  display: block;
  fill: currentColor;
}

.takeuchi-sns-layouts__label {
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
}

.takeuchi-sns-layouts__desc {
  font-size: 11px;
  color: #8c8f94;
}

/* -----------------------------------------------------------------------------
 * プレビュー
 * -------------------------------------------------------------------------- */

.takeuchi-sns-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 上は「PC / スマホ」のボタンが仕切り線に触らないための余白。
     設定側のアコーディオンと高さを揃えている。 */
  margin: 2px 0 8px;
  flex-wrap: wrap;
}

.takeuchi-sns-preview__bar h2 {
  margin: 0;
}

.takeuchi-sns-devices {
  display: inline-flex;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  overflow: hidden;
}

/* 中身はリンク。JSに頼らずURLで切り替えるので、押せば必ず反応する。 */
.takeuchi-sns-devices__btn span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: .7;
}

.takeuchi-sns-devices__btn {
  display: block;
  margin: 0;
  padding: 5px 16px;
  border: 0;
  background: #fff;
  color: #50575e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  text-decoration: none;
  cursor: pointer;
}

.takeuchi-sns-devices__btn:hover {
  background: #f6f7f7;
  color: #1d2327;
}

.takeuchi-sns-devices__btn + .takeuchi-sns-devices__btn {
  border-left: 1px solid #dcdcde;
}

.takeuchi-sns-devices__btn.is-current,
.takeuchi-sns-devices__btn.is-current:hover {
  background: #2271b1;
  color: #fff;
}

.takeuchi-sns-preview {
  padding: 24px;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  background: #fff;
  /* 中身が本文幅より広くならないので、はみ出すのは画面が狭いときだけ。 */
  overflow-x: auto;
}

/* 記事の中で実際に起きる幅にする。値は PHP が --sns-pw で渡す
   （PC 1080 / PC2カラム 524 / スマホ 390）。
   max-width は付けない。width を縮めるとコンテナクエリが効いて、
   記事とは違う並びのものを見て判断してしまう。
   幅が足りないときは、下の transform で見た目だけを縮める。 */
.takeuchi-sns-preview__inner {
  width: var(--sns-pw, 1080px);
  /* 枠のほうが広いときは真ん中に置く。記事では中央にあるので、
     左に寄っていると位置の感覚がずれる。 */
  margin: 0 auto;
  /* 縮めるときは左上を軸にする。ぴったりの倍率で縮めるので、
     結果として枠いっぱいに収まる（＝中央のまま）。 */
  transform-origin: 0 0;
}

/* 縮めたぶん、下に空きができる。JSが実際の高さを入れて詰める。
   is-fit はJSが付ける。付いていなければ実寸のまま出る。 */
.takeuchi-sns-preview.is-fit .takeuchi-sns-preview__fit {
  overflow: hidden;
}

/* 何割で出しているか。実寸のときは中身が空なので、:empty で消える。 */
.takeuchi-sns-preview__tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.takeuchi-sns-zoom {
  padding: 2px 8px;
  border-radius: 10px;
  background: #f0f0f1;
  color: #646970;
  font-size: 11px;
  cursor: help;
}

.takeuchi-sns-zoom:empty {
  display: none;
}

/* 2カラムは片方の列ぶんの幅。プレビューは片方のSNSしか出さないので、
   列の幅だけを再現する。切れ目が分かるよう内側に細い線を置く
   （外側に置くと、縮めたときに枠に食われて消える）。 */
.takeuchi-sns-preview[data-device="col"] .takeuchi-sns-preview__inner {
  box-shadow: inset 0 0 0 1px #e8e8e8;
}

/* -----------------------------------------------------------------------------
 * プレビューの「スマホ」を、指で触ったときの挙動に合わせる
 * -------------------------------------------------------------------------- *
 * 枠を狭めるだけでは、マウスを乗せたときの動き（本文が出る・写真が拡大）が
 * そのまま残る。実機のスマホには hover が無いので、そこだけ食い違う。
 * @media (hover: none) と同じ扱いを、この枠の中にも与える。
 *
 * カーソルも丸にして、いま見ているのが「指で触る画面」だと分かるようにする。
 * -------------------------------------------------------------------------- */

.takeuchi-sns-preview[data-device="sp"] .sns-feed[data-caption="hover"]:not([data-layout="list"]) .sns-feed__meta {
  opacity: 1;
}

.takeuchi-sns-preview[data-device="sp"] .sns-feed .sns-feed__link:hover .sns-feed__media img,
.takeuchi-sns-preview[data-device="sp"] .sns-feed .sns-feed__link:focus .sns-feed__media img {
  transform: none;
}

/* 指先のあたりを表す丸。24pxの円を中心（12,12）で当てる。 */
.takeuchi-sns-preview[data-device="sp"],
.takeuchi-sns-preview[data-device="sp"] a,
.takeuchi-sns-preview[data-device="sp"] button {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="10" fill="rgba(0,0,0,.25)" stroke="rgba(0,0,0,.5)" stroke-width="1.5"/></svg>') 12 12, pointer;
}

/* スマホ表示。枠を狭めるだけ。中のCSSはコンテナクエリなので、
   これだけで実物と同じ切り替わり方をする。幅は --sns-pw（390px）。 */
.takeuchi-sns-preview[data-device="sp"] .takeuchi-sns-preview__inner {
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}