/* =========================================================
   KYO. — SNSページ（ヒーロー / ACCOUNT 公式SNSアカウント）
   数値は見本 pc/5.png（幅1366）の実測値に合わせている
   ========================================================= */

/* ---- サブページ共通ヒーロー（本体は base.css。ここは当ページ用の調整のみ） ---- */
/* 相関計算で 63%（キッチンの島が中央に来る位置） */
.subhero--sns .subhero__bg img { object-position: center 63%; }
/* 見本の膜は薄い（実測 α≒0.08）。白文字が沈まない範囲で見本に寄せる */
.subhero--sns .subhero__bg::after { background: linear-gradient(rgba(38,35,30,0.12), rgba(38,35,30,0.22)); }
.subhero--sns .subhero__sub { margin-top: 40px; }

/* =========================================================
   ACCOUNT（公式SNSアカウント）
   ========================================================= */
.account {
  position: relative;
  overflow: hidden;               /* 線画をセクションで切る */
  background: var(--c-white);
  padding: 62px 0 156px;
}
/* 背景の線画イラスト（見本では上下がセクションで切れている） */
.account__art {
  position: absolute; top: -31px; left: 50%; transform: translateX(-50%);
  width: 1094px; max-width: none; opacity: 0.15;
  pointer-events: none; user-select: none;
}
.account__inner { position: relative; z-index: 1; }
.account__label { display: flex; justify-content: center; margin-bottom: 48px; }
.account .sec-label { background: var(--c-white); }

/* ---- SNSカード ---- */
.sns-cards {
  display: grid;
  grid-template-columns: repeat(2, 345px);
  gap: 90px;
  justify-content: center;
}
.sns-card {
  /* 枠のグラデーションは padding-box / border-box の2枚重ねで作る */
  border: 10px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--c-white), var(--c-white)) padding-box,
    var(--card-edge) border-box;
  padding: 16px 0 28px;
  text-align: center;
}
.sns-card--ig { --card-edge: linear-gradient(90deg, #fc575a, #8e52fc); }
.sns-card--x  { --card-edge: linear-gradient(90deg, #000000, #737373); }

.sns-card__icon { display: block; margin-inline: auto; height: 76px; width: auto; }
/* Xのロゴだけ少し小さい（見本準拠）。上下に3pxずつ足して見出し位置を揃える */
.sns-card__icon--x { height: 70px; margin-block: 3px; }

.sns-card__title { margin-top: 7px; font-size: 23px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; }
.sns-card__text  { margin-top: 2px;  font-size: 17px; letter-spacing: 0.02em; line-height: 1.4; }

.sns-card__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 194px; height: 37px; margin-top: 25px;
  border-radius: 999px;
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.sns-card__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sns-card__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.sns-card--ig .sns-card__btn {
  background: linear-gradient(90deg, #ffe124 0%, #f8831c 22%, #ea001b 51%, #d80469 71%, #bc0bdc 100%);
}
.sns-card--x .sns-card__btn { background: #000; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .account { padding: 44px 0 72px; }
  .account__label { margin-bottom: 32px; }
  .account__art { width: 900px; top: -20px; }
  .sns-cards { grid-template-columns: min(345px, 100%); gap: 28px; }
}

@media (max-width: 700px) {
  /* 縦長画面だと写真が丸ごと収まってしまうので、PC版と同じ寄りに合わせる */
  .subhero--sns .subhero__bg img { width: 165%; max-width: none; margin-left: -32.5%; }
  .subhero--sns .subhero__sub { margin-top: 22px; }
  .account__art { width: 700px; }
}