/*
Theme Name: Lightning Child Sample
Template: lightning
Version: 0.6.1
*/

/* ------------------------------
  カラーバリエーション
------------------------------ */
:root {
  --brand-main:#7A1E1E;   /* ワインレッド */
  --brand-accent:#B0132E; /* 濃い赤 */
  --brand-gold:#C9A227;   /* ゴールド */
  --bg-ivory:#F5F0EA;     /* 背景生成り */
  --text:#1F1F1F;         /* 本文用濃グレー */
}

/* ------------------------------
  基本テキスト・リンク
------------------------------ */
body {
  color: var(--text);
  background: var(--bg-ivory);
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3",
               "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",
               "MS PMincho", serif !important;
}
a { color: var(--brand-main); }
a:hover { color: var(--brand-accent); }
.wp-block-button__link {
  background: var(--brand-main);
  border-radius: 9999px;
}
.wp-block-button__link:hover {
  background: var(--brand-accent);
}
h2 {
  border-left: 6px solid var(--brand-gold);
  padding-left: 12px;
}

/* ------------------------------
  ヘッダー
------------------------------ */
/* 背景（常にワインレッド） */
.site-header,
.site-header .site-header-container,
.site-header.is-fixed,
.site-header.sticky {
  background: var(--brand-main) !important;
  box-shadow: none !important;
}


/* ヘッダーの高さ（細めに調整可能） */
.site-header .site-header-container {
  padding-top: 6px !important;   /* ← 数値で高さを調整（デフォ20px前後） */
  padding-bottom: 6px !important;
  min-height: 48px !important;
}

/* ロゴ画像を常に表示・サイズ固定 */
.site-header-logo,
.site-header .site-header-logo,
.site-header.is-fixed .site-header-logo,
.site-header.sticky .site-header-logo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.site-header-logo img {
  max-height: 48px !important;  /* ← 好みに応じて40〜60px */
  width: auto !important;
  height: auto !important;
}

/* メニュー文字（白固定） */
.site-header .global-nav a,
.site-header .global-nav .menu > li > a,
.site-header .vk-menu-acc li > a,
.site-header .navbar-nav > li > a {
  color: #fff !important;
  font-weight: normal !important;  /* 明朝体なので太字を抑制 */
}
.site-header .global-nav a:hover,
.site-header .global-nav .menu > li > a:hover,
.site-header .vk-menu-acc li > a:hover {
  color: #fff !important;
  opacity: .85;
}

/* サイトタイトル（テキスト版）を白にする場合 */
.site-header .site-branding a,
.site-header .site-branding a:visited {
  color: #fff !important;
}

/* モバイルメニュー（ハンバーガーアイコン） */
.vk-menu-acc-btn,
.vk-menu-toggle-btn {
  color: #fff !important;
  border-color: #fff !important;
}
/* ------------------------------
   モバイル用ヘッダー高さ調整
------------------------------ */
@media (max-width: 767px) {
  .site-header .site-header-container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 48px !important;
  }
  .site-header-logo img {
    max-height: 40px !important; /* モバイルでは少し小さめ */
  }
}
/* クリック時のスクロールを滑らかに */
html { scroll-behavior: smooth; }
/* 固定ヘッダー分だけ停止位置を下げる（80pxは目安。必要に応じて調整） */
#profile, #lesson, #concert {
  scroll-margin-top: 80px;
}

/* =========================================
   Lightning専用 最終版：
   #vk-mobile-nav-menu-btn を上品な丸ボタン + CSS三本線
   ========================================= */
:root{
  --hb-size: 40px;                     /* ボタン直径 */
  --hb-radius: 9999px;                 /* 完全丸 */
  --hb-bg: rgba(255,255,255,.08);      /* ガラス背景 */
  --hb-bg-hover: rgba(255,255,255,.14);
  --hb-bg-open: rgba(255,255,255,.18);
  --hb-border: rgba(255,255,255,.35);  /* 枠線 */
  --hb-bar: 2px;                       /* 線の太さ */
  --hb-color: #fff;                    /* 線色 */
  --hb-color-open: var(--brand-gold, #C9A227); /* 開いた時の色 */
}

/* 本体 */
html body div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right{
  width: var(--hb-size) !important;
  height: var(--hb-size) !important;
  padding: 0 !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-radius) !important;
  background: var(--hb-bg) !important;
  background-image: none !important; /* テーマの画像は使わない */
  backdrop-filter: blur(10px) saturate(140%) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease !important;
}

/* 既存の「疑似要素を消す」指定を上書きしてアイコンを描く */
html body #vk-mobile-nav-menu-btn::before,
html body #vk-mobile-nav-menu-btn::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 56% !important;
  height: var(--hb-bar) !important;
  border-radius: 999px !important;
  background: var(--hb-color) !important;
  transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease, background-color .2s ease !important;
}

/* 三本線：中央線 + 上下は box-shadow で描写 */
html body #vk-mobile-nav-menu-btn::before{
  box-shadow:
    0 calc(-8px) 0 0 var(--hb-color),
    0 calc( 8px) 0 0 var(--hb-color) !important;
}

/* 交差用のもう1本（初期は非表示） */
html body #vk-mobile-nav-menu-btn::after{
  opacity: 0 !important;
}

/* ホバー */
html body div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right:hover{
  transform: translateY(-1px);
  background: var(--hb-bg-hover) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* ====== 開いた状態（×に変形） ====== */
html.vk-mobile-nav-active  #vk-mobile-nav-menu-btn,
body.vk-mobile-nav-active  #vk-mobile-nav-menu-btn,
#vk-mobile-nav.is-active ~ #vk-mobile-nav-menu-btn{
  background: var(--hb-bg-open) !important;
  border-color: color-mix(in oklab, var(--hb-border), var(--hb-color-open) 35%) !important;
}
/* 中央線を45度回転、上下の影を消す → 1本目の斜線に */
html.vk-mobile-nav-active  #vk-mobile-nav-menu-btn::before,
body.vk-mobile-nav-active  #vk-mobile-nav-menu-btn::before,
#vk-mobile-nav.is-active ~ #vk-mobile-nav-menu-btn::before{
  box-shadow: none !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: var(--hb-color-open) !important;
}
/* もう1本を表示して-45度に → ×完成 */
html.vk-mobile-nav-active  #vk-mobile-nav-menu-btn::after,
body.vk-mobile-nav-active  #vk-mobile-nav-menu-btn::after,
#vk-mobile-nav.is-active ~ #vk-mobile-nav-menu-btn::after{
  opacity: 1 !important;
  transform: translateX(-50%) rotate(-45deg) !important;
  background: var(--hb-color-open) !important;
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  #vk-mobile-nav-menu-btn,
  #vk-mobile-nav-menu-btn::before,
  #vk-mobile-nav-menu-btn::after{ transition: none !important; }
}
/* ===== パッチ：#vk-mobile-nav-menu-btn が menu-open の時だけ上書き ===== */
html body #vk-mobile-nav-menu-btn.menu-open{
  /* テーマが付ける × 背景画像を無効化して、ガラス背景のまま */
  background-image: none !important;
  background-color: var(--hb-bg-open) !important;
  border-color: color-mix(in oklab, var(--hb-border), var(--hb-color-open) 35%) !important;
}

/* 三本線 → 斜線1本目（45deg） */
html body #vk-mobile-nav-menu-btn.menu-open::before{
  box-shadow: none !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: var(--hb-color-open) !important;
}

/* 斜線2本目を表示（-45deg） */
html body #vk-mobile-nav-menu-btn.menu-open::after{
  opacity: 1 !important;
  transform: translateX(-50%) rotate(-45deg) !important;
  background: var(--hb-color-open) !important;
}
/* === 最終補正：ハンバーガーはモバイルだけ表示 === */

/* 1) モバイル判定クラスがある場合（Lightning）：必ず表示 */
html body.device-mobile div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right{
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 2) ブレークポイントで保険（992px未満＝表示） */
@media (max-width: 991.98px){
  html body div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right{
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* 3) PC幅（992px以上）では非表示（menu-open状態も含む） */
@media (min-width: 992px){
  html body div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right,
  html body div#vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.position-right.menu-open{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* 余白と背景（全幅の水彩は活かす） */
.hero{
  position: relative;
  text-align: center;
  padding: 100px 20px 80px;
  background: linear-gradient(135deg,#f8eaea,#ffffff);
}

/* 中央ボックスの“白背景・影”が付いていた場合に無効化（ブロックのデフォルト装飾を消す） */
.hero .hero-content{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 980px; /* タイトル行の横幅 */
}

/* 写真を少し大きく・角丸＆やわらかい影 */
.hero .hero-photo{
  display: block;
  max-width: 1000px;     /* ←存在感を出す（小さくしたければ 600 に） */
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

/* タイトル：上品なゴールドの下線でアクセント */
.hero .hero-title{
  margin: 24px 0 8px;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--brand-main,#7A1E1E);
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-gold,#C9A227);
}

/* サブタイトルは少し淡く */
.hero .hero-sub{
  margin-top: 6px;
  font-size: 1.1rem;
  color: #666;
  font-style: italic;
}

/* Lightningなどで main の上に余白が入るテーマ対策（ヘッダー直下の隙間なし） */
.site-content{ margin-top:0 !important; padding-top:0 !important; }

/* もしブロック側で「グループ」「カバー」などに背景が付いてしまう場合の保険 */
.hero .wp-block-group{ background: transparent !important; box-shadow:none !important; border:none !important; }

/* モバイル最適化 */
@media (max-width: 767px){
  .hero{ padding: 64px 16px 56px; }
  .hero .hero-photo{ max-width: 92vw; border-radius: 12px; }
  .hero .hero-title{ font-size: 1.8rem; }
  .hero .hero-sub{ font-size: 1rem; }
}
/* ヒーロー内の余計な背景・影を消す */
.hero,
.hero .hero-content,
.hero .wp-block-group,
.hero .wp-block-cover,
.hero .wp-block-columns,
.hero .wp-block-column {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
/* カスタムHTML内のヒーローを常に中央寄せ＆はみ出し防止 */
.wp-block-html .hero,
.wp-block-custom-html .hero, /* どちらのクラスでも効くように */
.hero {
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 0 16px;            /* 端がくっつかない最低限の余白 */
  max-width: 980px;           /* 好みで調整可 */
  text-align: center;         /* 子要素の初期配置を中央に */
  overflow-x: hidden;
}

/* 画像は強制的に中央・ブロック化・幅に追従 */
.hero .hero-photo,
.hero img {
  display: block !important;
  float: none !important;
  max-width: min(94vw, 900px); /* 画面に収めつつ少し大きめに */
  width: 100%;
  height: auto;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px;
}

/* ヒーロー内の“白い箱/影/枠”が残る場合の保険 */
.hero .wp-block-group,
.hero .wp-block-cover,
.hero .wp-block-columns,
.hero .wp-block-column {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* モバイルの余白・サイズ最適化 */
@media (max-width: 767px){
  .hero { padding: 56px 16px 48px; }
}
/* スムーズスクロール */
html { scroll-behavior: smooth; }

/* ヒーロー内のリンク見た目 */
.hero-links {
  margin-top: 10px;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: #555;
}
.hero-links a {
  text-decoration: none;
  color: #7A1E1E;             /* ブランド色 */
}
.hero-links a:hover { opacity: .8; }
.hero-links .sep { color: #C9A227; margin: 0 .4em; }

/* 固定ヘッダーで見出しが隠れないようにオフセット */
#profile, #lesson, #concert, #contact {
  scroll-margin-top: 96px;    /* ← ヘッダーの高さに合わせて調整（80〜120px目安） */
}

/* モバイルはヘッダーが少し高い想定なら上げる */
@media (max-width: 767px){
  #profile, #lesson, #concert, #contact { scroll-margin-top: 120px; }
  .hero-links { font-size: 1rem; }
}
/* PROFILEセクションの上余白を広げる */
.profile-section {
  margin-top: 80px !important;  /* 数値は好みで 80〜120px くらい */
}
/* ▼ アコーディオン（<details>）＝箱の中は完全に白、見出しも白に統一 ▼ */
.area{
  background:#fff;                 /* ← 箱全体を白 */
  border:1.5px solid var(--accent);
  border-radius:16px;
  padding:0;                       /* 中身の余白は .area-content 側で */
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  margin-bottom:16px;
  overflow:hidden;                 /* 角丸キープ */
}

/* 見出し行（summary） */
.area summary{
  list-style:none; cursor:pointer; user-select:none; outline:none;
  background:#fff;                 /* ← 見出し行も白 */
}
.area summary::-webkit-details-marker{ display:none; }

.area-summary{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  font-size:18px; letter-spacing:.04em; font-weight:700; color:var(--ink);
}
.area-summary .hint{
  margin-left:auto;                /* ← 右端寄せ（ズレ防止） */
  font-weight:600; font-size:13px; opacity:.7;
}

/* 右端の矢印（常に右端に揃う） */
.area summary::after{
  content:"";
  width:10px; height:10px;
  margin-left:10px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
  transition:transform .25s ease;
}
.area[open] summary::after{ transform:rotate(45deg); }

/* 中身：真っ白＋ふわっと開閉アニメーション */
.area-content{
  background:#fff;                 /* ← 中身も白を明示 */
  padding:0 16px 16px;             /* 上は後述のボーダーで区切るため 0 に */
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .5s ease, opacity .4s ease;
  border-top:1px solid rgba(0,0,0,.06); /* 見出しと中身の区切り線 */
}
.area[open] .area-content{
  max-height:2000px;               /* 中身より十分大きく */
  opacity:1;
}

/* 既存の日付/リストはそのまま利用 */
/* アニメ用の共通設定（高さをJSで動かす） */
.area-content{
  overflow: hidden;
  will-change: height, opacity;
}

/* 開閉ヘッダーの行は白のまま＆右端アローは現状のままでOK */
/* 矢印のクリックを確実に通す（最前面＆イベント許可） */
.lb-main{ position:relative; }            /* 念のため明示 */
.lb-nav{
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  display:flex; justify-content:space-between;
  z-index:3;             /* ← 画像より前面へ */
  pointer-events:auto;   /* ← クリックを許可 */
}
.lb-btn{ pointer-events:auto; z-index:4; }/* 念のため前面化 */
/* コピーライト非表示（共通） */
.site-footer-copyright,
.site-footer-powered { display: none !important; }

/* === 上へ戻る：中央ぴったり＆大きめ矢印に修正 === */
#page_top.page_top_btn{
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: rgba(245,240,234,.96) !important; /* 生成り */
  border: 2px solid #C9A227 !important;        /* ゴールド */
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  display: block !important;
  text-decoration: none !important;
  z-index: 9999;
  /* 文字を確実に消す（高さのズレ防止） */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}

/* テーマ既存の疑似要素を無効化（これが小さい矢印の正体） */
#page_top.page_top_btn::before{
  content: none !important;
}

/* 新しい矢印だけをど真ん中に配置（サイズUP） */
#page_top.page_top_btn::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 26px !important;     /* ← 大きさここで調整 */
  height: 26px !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 14 12 8 18 14'/></svg>") !important;
}

/* ホバー：金地に白矢印 */
#page_top.page_top_btn:hover{
  background: #C9A227 !important;
  box-shadow: 0 10px 26px rgba(201,162,39,.28);
}
#page_top.page_top_btn:hover::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 14 12 8 18 14'/></svg>") !important;
}
:root{
  --brand-gold:#C9A227;
  --ink:#1F1F1F;
}

.contact-section{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px 80px;
}

.contact-title{
  font-family: "游明朝","Yu Mincho","ヒラギノ明朝 ProN W3",serif;
  color: var(--brand-gold);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 24px;
}

.wpcf7 form p,
.wpcf7 form label{ color: var(--ink); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  box-sizing: border-box;
}

.wpcf7 textarea{ min-height: 160px; }

.wpcf7-acceptance{
  display:block;
  margin: 12px 0 20px;
  font-size: 14px;
}

.wpcf7 input[type="submit"]{
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--brand-gold);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform .08s ease;
  letter-spacing: .06em;
}
.wpcf7 input[type="submit"]:active{ transform: translateY(1px); }
/* CONTACT 見出しの装飾を調整（縦線オフ＆サイズUP） */
.contact-title{
  font-family: "游明朝","Yu Mincho","ヒラギノ明朝 ProN W3",serif;
  color: var(--brand-gold, #C9A227);
  /* PROFILE / CONCERT と同じくらいのサイズ感 */
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 16px;
  padding-left: 0 !important;       /* 縦線用の余白を無効化 */
  border-left: none !important;      /* 左ボーダーを消す */
  position: relative;
}
/* テーマの擬似要素で縦線を出している場合の保険 */
.contact-title::before,
.contact-title:before{
  display: none !important;
  content: none !important;
}

/* 注釈（小さめ＆薄め） */
.contact-note{
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  text-align: center;
}

/* ついでにフォームの余白を少し整える（任意） */
.contact-section{ max-width: 900px; margin: 0 auto; padding: 40px 16px 80px; }
.wpcf7 form p, .wpcf7 form label{ color: var(--text, #1F1F1F); }

/* 全ページで背景画像を画面いっぱいに表示 */
body {
  background: url('https://niinaokuyama.com/wp-content/uploads/2025/08/名称未設定のデザイン-2.png') no-repeat center center fixed;
  background-size: cover;   /* 縦横比を保ったまま画面いっぱい */
  min-height: 100vh;        /* 常に画面全体をカバー */
  margin: 0;
  padding: 0;
}
/* 画像：ぼかし → クリア（ゆっくり、はみ出しなし） */
img[data-aos="blur-in"]{
  opacity: 0;
  filter: blur(14px);
  transition:
    opacity 1800ms ease-out,
    filter 2000ms ease-out;
  will-change: opacity, filter;
}
img[data-aos="blur-in"].aos-animate{
  opacity: 1;
  filter: blur(0);
}
/* ====== ホームだけ余白を完全ゼロに（Lightning想定） ====== */
html, body {
  margin: 0;            /* 念のため初期余白を消す */
  padding: 0;
}

/* コンテナ系の左右パディングをホームだけで無効化 */
body.home .container,
body.home .vk_container,
body.home .vk_outer-container,
body.home .l-main,
body.home #main,
body.home .siteContent,
body.home .entry-body,
body.home .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;   /* 背景の段差/色差も防ぐ */
  box-shadow: none !important;          /* 内側の影で縁が白っぽく見えるのを防止 */
}

/* 万一、横に1pxでもはみ出した要素があってもスクロールバーを出さない */
html, body { overflow-x: hidden; }

/* 背景テクスチャの継ぎ目・ライン防止（repeat/fixedが原因になりがち） */
body {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;        /* fixedだと端に線が出ることがある */
}

/* ヒーロー等、セクション内部のはみ出しをカット（画像のぼかしでも安全） */
.hero, .hero-content { overflow: hidden; }

/* （参考）画像の“ぼかし→くっきり”はそのまま */
img[data-aos="blur-in"]{
  opacity: 0;
  filter: blur(14px);
  transition: opacity 1800ms ease-out, filter 2000ms ease-out;
  will-change: opacity, filter;
}
img[data-aos="blur-in"].aos-animate{ opacity:1; filter:blur(0); }
/* ここを差し替え */
.sns-item{
  width: 200px;
  height: 200px;
  border: 3px solid var(--accent);
  border-radius: 32px;
  /* ▼背景は background-color に統一 */
  background-color: rgba(201,162,39,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  /* ▼ transition は色・影・移動だけ（opacity/filterはAOSに任せる） */
  transition:
    background-color .30s ease,
    color .30s ease,
    box-shadow .30s ease,
    transform .30s ease;
}
/* ▼ ここから3か所を <style> 内で差し替え ▼ */

/* 枠：色・影・移動だけを滑らかに。背景は background-color に統一 */
.sns-item{
  width: 200px;
  height: 200px;
  border: 3px solid var(--accent);
  border-radius: 32px;
  background-color: rgba(201,162,39,0.06);  /* ← 統一！ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  transition:
    background-color .30s ease,
    color .30s ease,
    box-shadow .30s ease,
    transform .30s ease;
}
.sns-item:hover{
  background-color: var(--accent);        /* ← 統一！ */
  color: #fff;
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* アイコンは currentColor を使ってるので color のみトランジション */
.sns-ico{
  width: 90px;
  height: 90px;
  margin-bottom: 14px;
  display: block;
  color: var(--accent);
  transition: color .30s ease;
}
.sns-item:hover .sns-ico{ color:#fff; }

/* ラベルも色を滑らかに（任意） */
.sns-label{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: color .30s ease;
}
/* ▲ ここまで差し替え ▲ */