/* ============================================
   トップページ固有スタイル
   ============================================ */

/* ----------------------------------------------
   ページ全体レイアウト（左カラム固定メニュー＋コンテンツ）
   左カラムは「フッターより前の全コンテンツ」の高さぶん
   position: stickyで追従させるため、.index-layoutが
   その追従範囲（containing block）になる。
   ---------------------------------------------- */
.index-layout {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

.content-column {
  display: flex;
  flex-direction: column;
  min-width: 0; /* flexの子要素が内容ではみ出さないようにする */
}

.hero-quicknav {
  display: none; /* SP（1024px未満）では左カラムを非表示にする。PC表示は1024px以上のメディアクエリで復元 */
  background: var(--color-bg);
  padding: 0;
}

.hero-quicknav-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.hero-quicknav .sidebar-address {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 0;
  padding: 16px;
}

/* ロゴはPC表示の左カラム内でのみ表示（モバイルは既存のトップバーのロゴを使う） */
.quicknav-logo {
  display: none;
}

/* ---------- ヒーロー ---------- */
.hero-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * キャッチコピー・イラストは image/pc-mv.png（PC）・image/sp-mv.png（SP）に
 * 完成データとして焼き込まれているため、CSSでのテキスト重ね表示は行わない
 * （以前.hero-text-overlay/.hero-en/.hero-titleとして実装していたHTML実テキスト
 * 版は、専用デザインのSP画像に差し替えたタイミングで廃止した）。
 */
.hero-visual {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  /*
   * mv.png自体の四隅は透過の角丸でトリミングされているため、
   * 画像の実比率(3480:2838)のままだとその透過部分がそのまま
   * 白い余白として見えてしまう。コンテナの比率を意図的に画像より
   * 横長にし、object-fit:coverで上下をわずかにクロップすることで
   * 透過の角丸部分ごと切り落とし、四隅まで完全に不透明な絵柄で
   * 覆われるようにしている。
   */
  aspect-ratio: 1.32;
  overflow: hidden;
}

.hero-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/*
 * SP（1024px未満）はimage/sp-mv.png自体の縦横比（1170:1850）に
 * コンテナを一致させ、画像をクロップ・余白なしでそのまま表示する
 * （以前使っていた100vh/100svh基準の「画面いっぱいに表示しcoverで
 * クロップする」方式は、画像側の余白拡張が前提だったため、画像を
 * 差し替えるたびに左右が欠ける問題が起きやすかった。画像の実サイズに
 * コンテナ側を合わせることで、差し替え後も常に画像全体がそのまま
 * 表示され、直後の.greetingセクションとの間にも余白は生まれない）。
 * 画像を再度差し替える際は、新しい画像の実ピクセルサイズに
 * 合わせてこの数値も更新すること。
 */
@media (max-width: 1023px) {
  .hero-visual {
    aspect-ratio: 1170 / 1850;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .index-layout {
    flex-direction: row;
    align-items: stretch;
  }
  /*
   * Figma Dev Mode (node-id=547-7578 "Rectangle 300"): 334x982, padding 0, border 0。
   * PC表示では独立ヘッダーを持たず、左カラム自体がロゴ〜住所までを
   * 内包するブロックとしてposition:stickyでtop:0に留まる。
   * height:100vhで画面高さぶん確保することで、背景色(#F6F6F3)が
   * カラム下部まで途切れず続く（コンテンツがheight:autoで画面より
   * 短いと、そこから下は親(.index-layout)の白背景が透けて見えてしまう）。
   * コンテンツがビューポートより高い場合はoverflow-y:autoでスクロール可能。
   * align-self:flex-startにより親(.index-layout)のalign-items:stretchの
   * 影響は受けない。
   */
  .hero-quicknav {
    display: block;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  .content-column {
    flex: 1;
  }

  /*
   * node-id=547-7578: 左カラム内側は上42px/左右18pxの余白。
   * ボタン幅298px = 334(全体) - 18*2 なので、ボタン側は幅指定不要で
   * 親のpaddingに合わせて自然に298pxになる。
   */
  /*
   * カラム最上部〜ロゴ、ロゴ〜最初のボタン、電話ボタン〜住所は36px（変更対象外）。
   * ボタン同士（借りる〜貸す〜売る買う〜民泊〜メール〜電話）は6pxに指定し直したため、
   * gapの一括指定はやめて各要素のmargin-bottomで個別に間隔を作る。
   * ベース（モバイル用）ルールのgap:6pxがそのままだとmarginに上乗せされてしまうため、
   * ここで明示的に打ち消す。
   */
  /*
   * 高さ800〜900px程度のノートPC画面でもスクロールなしに全体（ロゴ〜住所）が
   * 収まるよう、ボタン高さ・ロゴサイズ・各余白をまとめて縮小している
   * （旧: パディング36/32・ロゴ80px・ロゴ下margin36・ボタン110px・
   * 電話→住所margin36 の合計約1002px → 新: 合計約780px台）。
   */
  /* ロゴ〜住所までの全体ブロックをカラムの縦方向中央に配置する。
     要素間の個々の余白（ロゴ〜ボタン16px、ボタン間6px、電話〜住所20pxなど）は
     margin側で維持したまま、ブロック全体の位置だけjustify-content:centerで揃える。 */
  .hero-quicknav-inner {
    height: 100%;
    padding: 0 18px;
    gap: 0;
    justify-content: center;
  }

  .quicknav-logo {
    display: block;
    width: 104px;
    height: 70px;
    margin-bottom: 16px;
    align-self: center;
  }

  .quicknav-logo img {
    width: 104px;
    height: 70px;
    object-fit: cover;
    display: block;
  }

  /* ボタン高さは95px（元110pxから縮小）。幅はflex:noneでも親のpaddingにより298pxのまま
     （widthは未指定=auto、ブロック要素として親の残り幅いっぱいに広がる）。
     ボタン同士の間隔は6pxを維持。電話ボタンだけ住所との間隔を20pxに縮小して確保する。 */
  .hero-quicknav-inner .nav-btn,
  .hero-quicknav-inner .nav-contact-btn {
    flex: none;
    height: 92px;
    margin-bottom: 6px;
  }

  .hero-quicknav-inner .nav-contact-btn--tel {
    margin-bottom: 20px;
  }

  /* 親(.hero-quicknav-inner)側で18pxの左右余白を持たせたので、住所側の余分な内側余白は外す。
     ロゴ・住所のみ中央揃え（カラーボタン・CONTACT FORM・電話ボタンは左寄せのまま） */
  .hero-quicknav .sidebar-address {
    padding: 0;
    text-align: center;
  }

  /* node-id=547-7591: ロゴは左カラム内に内包するため、独立したPCヘッダーは非表示にする */
  .site-header .mobile-topbar {
    display: none;
  }

  /*
   * PCはaspect-ratio:1.32のmv.pngを使うため、SP用（100svh・mv-sp.png）と
   * 画像の縦横比・クロップ量が異なる。テキストが焼き込まれていた元の位置
   * （画像上部、スカイラインより上）に合わせて上寄りに配置する。
   */
  .hero-text-overlay {
    top: 12%;
  }
}

/* ---------- 代表挨拶 ---------- */
/*
 * 動画・オーバーレイ・テキストを同じグリッドセル(1/1)に重ねるスタッキング手法。
 * position:absolute + height:100%は、親(.greeting)の高さがテキスト量で
 * 可変(auto)なため、一部ブラウザで正しく解決されないことがある。
 * grid-areaで重ねる方式は親の高さに関わらず常に全面を覆う。
 */
.greeting {
  display: grid;
  color: var(--color-white);
  text-align: center;
  background: #1c2b33;
  overflow: hidden;
}

.greeting-video {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 0;
}

.greeting::before {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 25, 33, 0.65), rgba(15, 25, 33, 0.8));
}

.greeting-inner {
  grid-area: 1 / 1;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 90px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.greeting-title {
  font-size: clamp(20px, 4vw, 30px);
  line-height: 1.9;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.greeting-text {
  font-size: 15px;
  line-height: 2.2;
  text-align: center;
  /*
   * 見出しと本文の間の余白。以前は.greeting-inner側のflex gap:40pxが
   * 見出し・本文・ボタンの3要素間すべてに効いていたが、SP版300px幅対応で
   * 見出し・本文を.greeting-copyにまとめたことで、その内側の間隔は
   * このgapの対象から外れた。PCは元の40pxを維持し、SPのみ60pxに広げる。
   */
  margin-top: 40px;
}

@media (max-width: 1023px) {
  .greeting-text {
    margin-top: 60px;
  }
}

.greeting-text p + p {
  margin-top: 20px;
}

/* 本文中の改行はPC表示でのみ有効化し、スマホでは自動折り返しに任せる */
.greeting-text br.pc-break {
  display: none;
}

@media (min-width: 1024px) {
  .greeting-text br.pc-break {
    display: inline;
  }
}

/* SP表示のみ、見出し＋本文のテキストブロックの横幅を300pxに固定する（PCは.greeting-innerのmax-width:680pxのまま） */
@media (max-width: 1023px) {
  .greeting-copy {
    max-width: 300px;
    margin: 0 auto;
  }
}

/*
 * SP専用の改行（.pc-breakの逆＝SPでのみdisplay:inlineにする）。
 * 見出し内の「不動産パートナーを目指します。」が300px幅では収まらず
 * 「す。」だけが孤立して折り返される問題の対策に加え、本文4段落の
 * 指定位置改行にも同じ仕組みを使う。PCは常にdisplay:noneのため、
 * 元の（pc-break込みの）改行だけが有効になり、レイアウトは変わらない。
 */
.greeting-copy br.sp-break {
  display: none;
}

@media (max-width: 1023px) {
  .greeting-copy br.sp-break {
    display: inline;
  }
}

.greeting .btn-primary-outline {
  width: 100%;
  max-width: 340px;
  margin-bottom: 100px;
}

/* ---------- お客様の声（コンテンツ幅1178pxで中央寄せ） ---------- */
.reviews-section {
  background: var(--color-white);
  padding: 0;
  overflow: hidden;
}

.reviews-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

.reviews-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.reviews-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  animation: marquee 22s linear infinite;
}

/*
 * 単語ごとに個別のspanにしてflexのgapで間隔を取ることで、
 * 無限スクロール用に複製したブロックの継ぎ目も含めて
 * すべての「REVIEWS」間隔を均一（56px）にしている。
 */
.reviews-marquee-word {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
}

/* レビューカードの表裏フリップ本体は css/common.css の .review-card 定義を参照 */

/*
 * ---------- お客様の声（SP版：カード重ね表示 + フリップ送り） ----------
 * .reviews-grid自体は639px以下で1カラム（common.css）になるため、
 * このタイミングを「複数カードを横に並べる余地がなくなる」境界とみなし、
 * 同じ639pxをスタック表示への切り替え境界に採用している（PC/タブレットの
 * 2・3カラムグリッド表示はこれまで通り変更しない）。
 * 手前のカードの右にほんの少しだけ次・次々カードが覗くよう
 * .reviews-stack-wrapに左右paddingを設け、そのpadding分を
 * translateXの「覗き幅」として使う。はみ出しても.reviews-stack-wrap
 * 自体のoverflow:hiddenと、親.reviews-sectionの既存のoverflow:hiddenの
 * 二重の安全策で横スクロールには発展しない。
 */
.reviews-tap-icon,
.review-stack-arrows {
  display: none;
}

/*
 * 上下の「REVIEWS」マーキーとカードの間の余白（SPのみ）。マーキーの
 * 高さは.reviews-marquee-wordのフォントサイズ・paddingで決まり、
 * 環境によって微妙に変動しうるため、カード側にマージンとして
 * 確実に確保することで、どちらの高さになっても重ならないようにする。
 * PCはマーキーとカードが直接接した状態を意図したデザインのため、
 * 下の@media (min-width: 1024px)で0に打ち消す。
 */
.reviews-stack-outer {
  position: relative;
  margin: 60px 0;
}

@media (min-width: 1024px) {
  .reviews-stack-outer {
    margin: 0;
  }
}

@media (max-width: 639px) {
  .reviews-stack-wrap {
    position: relative;
    padding: 0 26px;
    overflow: hidden;
  }

  #topReviewsGrid.reviews-grid {
    position: relative;
    display: block;
    height: 448px; /* common.cssの.review-card --review-card-height（既定448px）と一致させる */
  }

  #topReviewsGrid .review-card {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    /*
     * 背後のカード（pos 1・2）は右端を基準に縮小させる（transform-origin: right）。
     * 中心基準で縮小すると右端も内側に縮んでしまい、translateXで右にずらしても
     * 縮小分と相殺されて手前のカードの右側からほとんど覗かなくなるため、
     * 右端を固定してtranslateXの量がそのまま「覗き幅」になるようにしている。
     */
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.22, 0.68, 0, 1), opacity 0.35s ease;
  }

  #topReviewsGrid .review-card[data-stack-pos="0"] {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
  }

  #topReviewsGrid .review-card[data-stack-pos="1"] {
    transform: translateX(14px) scale(0.96);
    opacity: 0.75;
    z-index: 2;
    pointer-events: none;
  }

  #topReviewsGrid .review-card[data-stack-pos="2"] {
    transform: translateX(24px) scale(0.92);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
  }

  #topReviewsGrid .review-card[data-stack-pos="hidden"] {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    #topReviewsGrid .review-card {
      transition: none;
    }
  }

  /*
   * タップ誘導アイコン（image/tap-icon.png）：手前のカードの「上」に
   * はっきり見える位置に配置する（画像下端がカード上端にわずかに重なる
   * 程度にとどめ、画像の大部分はカードの外側＝上に出す）。
   * タップを強調するため、軽く上下にバウンドするアニメーションを付ける。
   */
  .reviews-tap-icon {
    display: block;
    position: absolute;
    top: -50px;
    right: 8px;
    width: 56px;
    height: auto;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .reviews-tap-icon.is-visible {
    opacity: 1;
    animation: reviews-tap-icon-bounce 1.1s ease-in-out infinite;
  }

  @keyframes reviews-tap-icon-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reviews-tap-icon.is-visible {
      animation: none;
    }
  }

  .reviews-tap-icon.is-hidden {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* フリップ裏面の「前へ／次へ」ボタン */
  .review-stack-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex: none;
    margin-top: 4px;
  }

  .review-stack-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-black);
    border-radius: 50%;
    background: var(--color-white);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  .review-stack-arrow:active {
    background: var(--color-bg);
  }

  /* カード外枠：線の色を黒にし、角を12pxの丸みにする（border-widthは共通ルールの1pxを維持） */
  #topReviewsGrid .review-card-face {
    border-color: #000000;
    border-radius: 12px;
  }

  /* 表面のプレビュー本文：PC/共通の20pxは周囲の本文（13〜16px程度）に対して大きすぎるため、SPのみ縮小する */
  #topReviewsGrid .review-comment-preview {
    font-size: 14px;
  }

  /*
   * 裏面本文の横幅を300pxに近づける。common.css側の.review-card-backは
   * 左右80pxのpaddingがあり、SPのカード実幅（狭い機種で320px台）では
   * それだけで本文が160〜200px程度まで狭まってしまうため、SPのみ左右
   * paddingを24px（表面.review-card-frontの左右paddingと同じ値）に
   * 縮小し、広い機種ではmax-width:300pxが効いてそこで頭打ちになるようにする。
   */
  #topReviewsGrid .review-card-back {
    padding: 50px 24px;
  }

  #topReviewsGrid .review-comment {
    max-width: 300px;
    margin: 0 auto;
  }
}

/*
 * ---------- SNS ----------
 * 下側paddingは0にしている。FOLLOW US!セクション下端〜CONTACT FORM
 * ボタン上端の余白は、この下にある.cta-sectionのpadding-topのみで
 * 作る（元は120px/240pxだったが、CONTACT FORM〜フッター間の余白
 * （旧90px）と入れ替えたため、そちらの値は.cta-sectionのpadding-bottom
 * 側に移した）。
 */
.sns-section {
  padding: 120px 20px 0;
  background: var(--color-bg);
  /*
   * 以前はここに保険的なoverflow-x:hiddenを追加していたが、CSS仕様上
   * overflow-xを visible 以外にすると overflow-y は（明示的に visible と
   * 書いても）強制的に auto に変換されてしまい、.sns-heading-icon
   * （見出しの上下にはみ出すサイズの指差しアイコン、position:absoluteで
   * 意図的に見出し外側に配置）の上下が見切れる不具合を引き起こしていた。
   * 横方向のはみ出し対策は.sns-heading-icon自身のサイズ・余白を画面幅に
   * 応じてclampする形で既に対応済み（実測で320〜1512px全幅において
   * 横スクロールが発生しないことを確認済み）で、そちらが本質的な対策のため、
   * ここでの追加のoverflow-x:hiddenは行わない。html要素側の
   * overflow-x:hidden（サイト全体の既存の安全策）は引き続き有効。
   */
}

/* スマホでは240pxだと余白が過大なため120pxに抑える。768px以上（.sns-panelsが2カラムになる幅）で240pxに戻す */
@media (min-width: 768px) {
  .sns-section {
    padding: 240px 20px 0;
  }
}

.sns-heading-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
  /* overflow-x:hiddenを付けていた時期があったが、.sns-sectionと同じ理由
     （overflow-y が強制的にautoになり.sns-heading-iconの上下が見切れる）で
     廃止した。詳細は.sns-sectionのコメントを参照。 */
}

.sns-heading {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-lulo);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.15em;
}

/*
 * 見出し横のアイコン（元のFOLLOW USモックアップ画像から復元）。
 * 位置決め（.sns-heading-icon-pos）と、常時再生する左右の揺れアニメーション
 * （.sns-heading-icon本体）を別要素に分離している。CSSアニメーションで
 * transformを使うと、その瞬間のtransform値がキーフレームの値に丸ごと
 * 置き換わるため、位置決め用のtranslate（PCはtranslateY(-50%)、SPは
 * translateX(-50%)）と同じtransformプロパティに揺れ用のrotateを
 * 混在させると、位置がアニメーションのたびにリセットされてガタつく。
 * ラッパー側でtranslateによる位置決めのみを行い、画像側はrotateの
 * 揺れアニメーションのみを担当することで、両者が干渉しないようにしている。
 *
 * PC：.sns-heading（見出しテキスト自身）を基準にleft:100%で配置するため、
 * 画面幅が変わってテキスト幅が変化しても文字と重ならない。タイトルと
 * 同じ高さ（縦中央）に揃え、タイトルから120px離す。120pxは画面幅が
 * 狭いと収まらないため、clampで画面幅に応じて縮める。
 */
.sns-heading-icon-pos {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: clamp(24px, 18vw, 120px);
  width: clamp(40px, 8vw, 84px);
  transform: translateY(-50%);
  pointer-events: none;
}

.sns-heading-icon {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: bottom center;
  animation: sns-heading-icon-sway 1.5s ease-in-out infinite;
}

@keyframes sns-heading-icon-sway {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sns-heading-icon {
    animation: none;
    transform: rotate(6deg);
  }
}

/*
 * SPでは見出しの真上に中央寄せで配置する（PCの「見出し右」から変更）。
 * left:100%を基準にした右配置は、見出しテキスト自体がラッパー幅の大半を
 * 占めるSPでは間隔を空ける余地がなく、画面幅に応じた複雑な縮小調整が
 * 必要だった。中央上部配置なら見出し自身の中央を基準にするだけで済み、
 * アイコン自身の幅が画面幅を超えない限り横方向にはみ出す心配もない
 * （既存のアイコン画像サイズなら320px幅でも十分収まる）。
 */
@media (max-width: 767px) {
  .sns-heading-icon-pos {
    left: 50%;
    top: auto;
    bottom: 100%;
    margin: 0 0 8px;
    width: 52px;
    transform: translateX(-50%);
  }
}

.sns-panels {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .sns-panels {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * VIEW MOREボタン（.sns-viewmore）にホバーすると、それが属する
 * .sns-panel全体の配色が反転する（:has()でボタンのホバーをカードに伝播）。
 * ライト⇔ダーク切り替えは0.3s easeでフェードする。
 */
.sns-panel {
  background: var(--color-white);
  border: 1.5px solid var(--color-black);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sns-panel:has(.sns-viewmore:hover) {
  background: #3D4044;
  border-color: #3D4044;
}

.sns-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  transition: border-color 0.3s ease;
}

.sns-panel:has(.sns-viewmore:hover) .sns-panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.sns-panel-icon {
  width: 30px;
  height: 30px;
  flex: none;
}

/* TikTokアイコンは黒地バッジのため、カードが反転したら白地バッジに反転させて視認性を保つ */
.sns-panel--tiktok .sns-panel-icon {
  transition: filter 0.3s ease;
}

.sns-panel--tiktok:has(.sns-viewmore:hover) .sns-panel-icon {
  filter: invert(1);
}

.sns-panel-title {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

.sns-panel:has(.sns-viewmore:hover) .sns-panel-title {
  color: var(--color-white);
}

.sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

/* SNS投稿カード：静止画サムネイル＋（登録があれば）ホバー時プレビュー用の動画を重ねる */
.sns-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.sns-grid--tiktok .sns-post {
  aspect-ratio: 9 / 16;
}

.sns-post-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sns-post-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.sns-post.is-previewing .sns-post-video {
  opacity: 1;
}

.sns-post-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sns-post.is-previewing .sns-post-play {
  opacity: 0;
}

/*
 * 「私たちについて」ボタン（.btn-primary-outline）と同じ構造・サイズ感
 * （角丸枠線＋右端に矢印を収めた正方形ボックスをabsolute配置）を踏襲。
 * 通常時（カード＝白背景）は黒ベース（黒背景＋白文字、矢印ボックスは
 * 反対色の白背景＋黒矢印）で表示し、カードがホバーで黒背景に反転したら
 * ボタンも反対色（白背景＋黒文字、矢印ボックスは黒背景＋白矢印）に
 * 切り替える。常にカード背景とボタンがコントラストを保つ「テレコ」仕様。
 */
.sns-viewmore {
  width: 100%;
  margin-top: auto;
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sns-viewmore:hover {
  opacity: 1;
}

.sns-viewmore .btn-arrow {
  background: var(--color-white);
  transition: background-color 0.3s ease;
  position: absolute;
  top: 50%;
  right: calc(12px - 1px);
  transform: translateY(-50%);
}

.sns-viewmore .btn-arrow img {
  /* caret-right.svgは既定で黒描画のため、白背景の矢印ボックス上ではそのまま黒で表示 */
  filter: none;
  transition: filter 0.3s ease;
}

/* カードがホバーされ黒背景に反転したら、ボタンも反対色（白ベース）に切り替える */
.sns-panel:has(.sns-viewmore:hover) .sns-viewmore {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.sns-panel:has(.sns-viewmore:hover) .sns-viewmore .btn-arrow {
  background: var(--color-black);
}

.sns-panel:has(.sns-viewmore:hover) .sns-viewmore .btn-arrow img {
  filter: invert(1) brightness(2);
}