/* ==========================================================
   style.css  —  星狛つらら Official
   カラーパレット
     背景:       #0B1120
     文字:       #F1F5F9
     薄い文字:   #94A3B8
     アクセント: #38BDF8（水色）
     カード背景: #111827
     ボーダー:   #1E3A5F
   ========================================================== */


/* ===== リセット・全体 ===== */
* {
  /* padding・borderをwidthに含めて計算するプロパティ */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #F1F5F9;
  background-color: #0B1120;
  /* 横スクロールを無効にするプロパティ */
  overflow-x: hidden;
}


/* ===== ヘッダー ===== */
header {
  position: fixed;   /* 上部に固定するプロパティ */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;      /* 最前面に表示するプロパティ */
  /* 背景色の変化をなめらかにするプロパティ */
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s;
  background-color: transparent;
  border-bottom: 1px solid transparent;
}

/* JSがスクロール50px超で付与するクラス：フロストガラス効果 */
header.scrolled {
  background-color: rgba(11, 17, 32, 0.85);
  /* 背景をぼかすガラス効果のプロパティ */
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(30, 58, 95, 0.3);
  /* ヘッダーに影を付けるプロパティ */
  box-shadow: 0 4px 24px rgba(56, 189, 248, 0.05);
}

/* Flexboxでロゴと右ナビを横並びにする */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
}

/* ヘッダーのロゴ画像 */
.header-logo {
  height: 44px;
  width: auto;   /* 幅を自動計算するプロパティ */
  display: block;
}

/* ナビ全体（リンク＋区切り＋SNS＋区切り＋トグルを横並び） */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ナビゲーションリンクのリスト */
.nav-list {
  display: flex;
  list-style: none;
  gap: 0;
}

/* ナビリンクのスタイル */
.nav-list li a {
  color: rgba(241, 245, 249, 0.7);
  font-size: 0.875rem;
  font-weight: 500;                /* 文字の太さを指定するプロパティ */
  text-decoration: none;           /* リンクの下線を消すプロパティ */
  padding: 8px 16px;
  border-radius: 8px;              /* 角を丸くするプロパティ */
  display: block;
  transition: color 0.2s, background-color 0.2s; /* ホバー時の色変化をなめらかにするプロパティ */
}

.nav-list li a:hover {
  color: #38BDF8;                        /* 水色 */
  background-color: rgba(56,189,248,0.05); /* ごく薄い水色の背景 */
}

/* JSが付与する現在地クラス */
.nav-list li a.active {
  color: #38BDF8;
}

/* ナビと各パーツを区切る縦線 */
.nav-sep {
  width: 1px;
  height: 20px;
  background-color: rgba(30, 58, 95, 0.4); /* 薄い色の縦線 */
  margin: 0 8px;
}

/* SNSアイコンのリスト */
.header-sns {
  display: flex;
  list-style: none;
  gap: 0;
}

/* SNSアイコン共通スタイル */
.sns-icon {
  color: #38BDF8;
  text-decoration: none;           /* リンクの下線を消すプロパティ */
  padding: 8px;
  border-radius: 8px;              /* 角を丸くするプロパティ */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s; /* ホバー時の変化をなめらかにするプロパティ */
}

.sns-icon:hover {
  background-color: rgba(56, 189, 248, 0.1); /* ホバー時に薄い水色の背景 */
}

/* 各SNSごとのホバーカラー */
.sns-twitter:hover  { color: #ffffff; }
.sns-youtube:hover  { color: #EF4444; } /* 赤 */
.sns-twitch:hover   { color: #A855F7; } /* 紫 */
.sns-instagram:hover{ color: #EC4899; } /* ピンク */

/* テーマトグルボタン */
.theme-btn {
  color: #94A3B8;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;    /* 角を丸くするプロパティ */
  cursor: pointer;       /* カーソルを指の形にするプロパティ */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s; /* ホバー時の変化をなめらかにするプロパティ */
}

.theme-btn:hover {
  color: #F1F5F9;
  background-color: rgba(30, 58, 95, 0.4);
}


/* ===== ヒーローセクション ===== */
.hero {
  height: 100vh;
  position: relative;  /* 子要素の絶対配置の基準にするプロパティ */
  overflow: hidden;    /* はみ出した要素を隠すプロパティ */
  background-color: #0B1120;
}

/* 背景グラデーションオーバーレイ */
.hero-bg-overlay {
  position: absolute;
  inset: 0;           /* 全面に広げるプロパティ */
  /* 上下と左右2方向のグラデーションを重ねる */
  background:
    linear-gradient(to bottom, rgba(11,17,32,0.5) 0%, rgba(11,17,32,0.2) 50%, #0B1120 100%),
    linear-gradient(to right, rgba(11,17,32,0.9) 0%, transparent 50%, rgba(11,17,32,0.6) 100%);
  z-index: 1;          /* 重なり順を指定するプロパティ */
}

/* キャラクター後ろの青い光 */
.hero-glow {
  position: absolute;
  top: 50%;
  right: 25%;
  /* 中心点を要素の中央に合わせるプロパティ */
  transform: translate(50%, -50%);
  width: 800px;
  height: 800px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 50%;  /* 丸にするプロパティ */
  filter: blur(120px); /* ぼかすプロパティ */
  z-index: 0;
}

/* キャラクター画像レイヤー（絶対配置・右下揃え） */
.hero-chara-wrap {
  position: absolute;
  top: 76px;   /* ヘッダーの高さ分下げてヘッダーと被らないようにするプロパティ */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* コンテナ上端からはみ出た部分をクリップするプロパティ */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 2;
}

/* キャラクター画像本体 */
.hero-chara {
  max-width: 480px;    /* 最大幅を指定するプロパティ */
  width: 100%;
  height: auto;
  object-fit: contain; /* 縦横比を保って枠内に収めるプロパティ */
  margin-right: 80px;
  /* 画像下端をフェードアウトさせるプロパティ */
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* テキストコンテンツレイヤー（絶対配置・縦中央） */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 3;
  /* このdiv自体のクリックを無効にして子要素のリンクだけ有効にするプロパティ */
  pointer-events: none;
}

/* テキストのコンテナ */
.hero-text {
  pointer-events: auto; /* クリックを有効に戻すプロパティ */
  max-width: 1024px;    /* 最大幅を指定するプロパティ */
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ヒーローのロゴ画像 */
.hero-logo {
  height: 176px;
  width: 540px;
  object-fit: contain;    /* 縦横比を保って枠内に収めるプロパティ */
  object-position: left;  /* 画像を左寄せにするプロパティ */
}

/* 説明文とSNSを横並びにするラッパー */
.hero-bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 24px;
}

/* ヒーローの説明文 */
.hero-desc {
  font-size: 0.95rem;
  color: rgba(241, 245, 249, 0.7);
  line-height: 1.85;   /* 行間を指定するプロパティ */
  max-width: 28rem;    /* テキスト幅の最大値を指定するプロパティ */
  margin: 0;
}

/* 「現在の活動 ▶ ○○」の行 */
.hero-typing-row {
  font-size: 0.82rem;
  color: #4a6080;
  margin: 6px 0 0 0;
}

/* タイピングアニメーションで書き換わるテキスト */
#typing-text {
  color: #38BDF8; /* 水色 */
}

/* カーソルを点滅させるアニメーション */
.cursor {
  color: #38BDF8;
  /* アニメーションを指定するプロパティ */
  animation: blink 0.8s step-end infinite;
  margin-left: 1px;
}

/* アニメーションの動きを定義する */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ヒーロー内のSNSリンクリスト */
.hero-sns {
  display: flex;
  list-style: none;
  gap: 4px;
  align-self: flex-end; /* 下端に揃えるプロパティ */
}

/* スクロールインジケーター（SCROLL ↓） */
.scroll-hint {
  position: absolute; /* ヒーロー下端の中央に配置するプロパティ */
  bottom: 24px;
  left: 50%;
  /* 左に自分の幅の半分ずらして中央揃えにするプロパティ */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none; /* リンクの下線を消すプロパティ */
}

.scroll-text {
  font-size: 0.65rem;
  color: #38BDF8;
  letter-spacing: 0.2em; /* 文字間隔を広げるプロパティ */
}

.scroll-arrow {
  color: #38BDF8;
  font-size: 1rem;
  /* 上下に動くアニメーションを適用するプロパティ */
  animation: bounce 1.5s ease-in-out infinite;
}

/* ↓を上下に動かすアニメーションの定義 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}


/* ===== セクション共通スタイル ===== */
main section {
  max-width: 1024px;  /* 最大幅を指定するプロパティ */
  margin: 0 auto;
  padding: 100px 40px 60px 40px;
  /* アンカーリンクで飛んだときにfixedヘッダーに隠れないようにするプロパティ */
  scroll-margin-top: 76px;
}

/* セクションのスモールラベル（ABOUT, PROFILE など） */
.section-label {
  font-size: 0.75rem;
  color: #38BDF8;
  letter-spacing: 0.2em;  /* 文字間隔を広げるプロパティ */
  margin-bottom: 12px;
}

/* セクションの見出し */
h2 {
  font-size: 2.2rem;
  color: #F1F5F9;
  font-weight: bold;  /* 文字の太さを指定するプロパティ */
  margin-bottom: 16px;
}

/* 見出し下の青いアクセントライン */
.section-line {
  width: 60px;
  height: 3px;
  /* 左から右へのグラデーション背景 */
  background: linear-gradient(to right, #38BDF8, #7dd3fc);
  border-radius: 2px; /* 角を丸くする */
  margin-bottom: 48px;
}

/* スクロールフェードインの初期状態 */
/* JSがIntersectionObserverで監視し、画面内に入ったら visible クラスを付ける */
.fade-in {
  opacity: 0;                  /* 透明度を指定するプロパティ（0=透明） */
  transform: translateY(32px); /* 下にずらした位置から始めるプロパティ */
  transition: opacity 0.7s ease, transform 0.7s ease; /* 変化をなめらかにするプロパティ */
}

/* JSが付与するクラス：画面内に入ったときのスタイル */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 段落テキスト */
p {
  line-height: 1.85; /* 行間を指定するプロパティ */
  color: #94A3B8;
}


/* ===== About セクション ===== */
.about-section {
  position: relative;
  overflow: hidden;    /* はみ出した要素を隠すプロパティ */
  padding-top: 128px !important;
  padding-bottom: 0 !important; /* 画像を下端まで見せるため下余白をなくす */
}

/* 右上の薄い水色グロー（::before は要素の前に追加できる疑似要素） */
.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  background: rgba(56, 189, 248, 0.05);
  border-radius: 50%;     /* 丸にするプロパティ */
  filter: blur(100px);    /* ぼかすプロパティ */
  pointer-events: none;   /* マウス操作を透過させるプロパティ */
}

/* CSS Gridで左2fr（画像）+ 右3fr（テキスト）のレイアウト */
.about-container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: flex-end;
}

/* 左：画像ラッパー */
.about-img-wrap {
  position: relative;
  overflow: hidden;   /* ホバーズーム時に画像がはみ出さないようにするプロパティ */
  border-radius: 16px; /* 角を丸くするプロパティ */
  border: 1px solid rgba(30, 58, 95, 0.3);
}

/* ホバー時のグロー（::before 疑似要素で装飾） */
.about-img-wrap::before {
  content: '';          /* 疑似要素に必要なプロパティ */
  position: absolute;
  inset: -16px;         /* 要素より外側に広げるプロパティ */
  background: linear-gradient(to bottom right, rgba(56,189,248,0.2), rgba(125,211,252,0.1));
  border-radius: 16px;  /* 角を丸くするプロパティ */
  filter: blur(24px);   /* ぼかすプロパティ */
  opacity: 0;           /* 最初は透明にするプロパティ */
  transition: opacity 0.5s; /* 変化をなめらかにするプロパティ */
  z-index: 0;
}

.about-img-wrap:hover::before {
  opacity: 1;
}

/* 左：キャラクター画像本体 */
.about-img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.7s ease; /* ホバーズームをなめらかにするプロパティ */
  object-fit: cover;               /* 枠内に収めてはみ出した部分をトリミングするプロパティ */
  object-position: top;            /* トリミングの基準を上端にするプロパティ */
}

.about-img-wrap:hover .about-img {
  transform: scale(1.05);
}

/* 画像下部のグラデーションオーバーレイ：下20%だけ薄くフェード */
.portrait-overlay {
  position: absolute;
  inset: 0;
  /* 下端の20%だけ溶け込ませる */
  background: linear-gradient(to top, rgba(11,17,32,0.5) 0%, transparent 25%);
  border-radius: 16px;
  z-index: 2;
  pointer-events: none;
}

/* 右：テキストコンテンツ */
.about-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 右：大きな見出し */
.about-h2 {
  font-size: 3rem;
  font-weight: bold;    /* 文字の太さを指定するプロパティ */
  color: #F1F5F9;
  line-height: 1.2;    /* 行間を指定するプロパティ */
  margin: 0;
}

/* 右：説明文 */
.about-desc {
  font-size: 1.05rem;
  color: rgba(241, 245, 249, 0.8);
  line-height: 1.85;
  margin: 0;
}

/* 「もっと見る →」リンク */
.more-link {
  color: #38BDF8;
  text-decoration: none;  /* リンクの下線を消すプロパティ */
  font-size: 0.95rem;
  font-weight: 500;       /* 文字の太さを指定するプロパティ */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s; /* ホバー時の色変化をなめらかにするプロパティ */
}

.more-link:hover {
  color: #7dd3fc;
}


/* ===== Profile セクション ===== */
/* Flexboxでスライドショー（左）とテーブル（右）を横並びにする */
.profile-container {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* スライドショーのコンテナ */
.slideshow {
  position: relative;
  width: 100%;
  /* 幅と高さの比率を3:4に固定するプロパティ */
  aspect-ratio: 3 / 4;
  border-radius: 20px;  /* 角を丸くするプロパティ */
  overflow: hidden;     /* 画像が枠からはみ出さないようにするプロパティ */
  border: 1px solid rgba(30, 58, 95, 0.3);
  background-color: rgba(17, 24, 39, 0.2);
}

/* スライドの画像（コンテナいっぱいに広げる） */
.slideshow img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縦横比を保って枠内に収めるプロパティ */
  display: block;
}

/* スライド切り替えボタン */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 縦中央揃えにするプロパティ */
  background-color: rgba(11, 17, 32, 0.6);
  /* 背景をぼかすプロパティ */
  backdrop-filter: blur(4px);
  color: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(30, 58, 95, 0.4);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  z-index: 10;
}

#prev-btn { left: 12px; }
#next-btn { right: 12px; }

.slide-btn:hover {
  background-color: #1E3A5F;
}

/* プロフィールテーブル */
.profile-table {
  width: 100%;
  /* セル間の隙間をなくすプロパティ */
  border-collapse: collapse;
}

/* テーブルの各行 */
.profile-table tr {
  border-bottom: 1px solid #1E3A5F;
}

/* 見出しセル（左の項目名） */
.profile-table th {
  color: #94A3B8;
  font-size: 0.85rem;
  font-weight: normal;
  text-align: left;
  padding: 18px 16px;
  width: 100px;
  /* 項目名が改行しないようにするプロパティ */
  white-space: nowrap;
}

/* データセル（値） */
.profile-table td {
  color: #F1F5F9;    /* 明るい白 */
  font-size: 1.1rem;
  font-weight: bold;
  padding: 18px 12px;
  text-align: left;
}

/* 英語表記セル（右端） */
.profile-table td.en {
  color: #4a6080;    /* より薄い文字色 */
  font-size: 0.8rem;
  font-weight: normal;
  text-align: right; /* 右揃え */
}


/* ===== Activities セクション ===== */
/* 最近力を入れている活動のランキングリスト */
.activity-ranking {
  padding-left: 20px;  /* 番号分のインデント */
  margin-bottom: 32px;
  line-height: 2;      /* 行間を指定するプロパティ */
  color: #94A3B8;
}

/* CSS Gridで2列のカードレイアウトを作る */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* カード共通スタイル */
.card {
  border-radius: 16px;          /* 角を丸くするプロパティ */
  border: 1px solid rgba(30, 58, 95, 0.5);
  padding: 32px;
  transition: transform 0.25s, border-color 0.25s; /* ホバー時の変化をなめらかにするプロパティ */
}

.card:hover {
  transform: translateY(-4px); /* 4px浮かせるプロパティ */
  border-color: #38BDF8;
}

/* 各カードのグラデーション背景色 */
.card-blue {
  background: linear-gradient(to bottom right, rgba(59,130,246,0.2), rgba(6,182,212,0.08)), #111827;
}

.card-purple {
  background: linear-gradient(to bottom right, rgba(168,85,247,0.2), rgba(236,72,153,0.08)), #111827;
}

.card-green {
  background: linear-gradient(to bottom right, rgba(34,197,94,0.2), rgba(16,185,129,0.08)), #111827;
}

.card-orange {
  background: linear-gradient(to bottom right, rgba(249,115,22,0.2), rgba(245,158,11,0.08)), #111827;
}

/* カードのアイコン（絵文字） */
.card-icon {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

/* カードのタイトル */
h3 {
  font-size: 1.15rem;
  color: #F1F5F9;
  font-weight: bold;
  margin-bottom: 12px;
}

/* カードの説明文 */
.card p {
  font-size: 0.9rem;
  color: #94A3B8;
  line-height: 1.75;
}


/* ===== Links セクション ===== */
/* リンクボタンを横並びに配置する */
.link-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;  /* 幅が足りなければ折り返すプロパティ */
  gap: 14px;
}

/* リンクボタンのスタイル */
.link-list li a {
  color: #94A3B8;
  text-decoration: none;     /* リンクの下線を消すプロパティ */
  font-size: 0.9rem;
  border: 1px solid #1E3A5F;
  border-radius: 8px;        /* 角を丸くするプロパティ */
  padding: 12px 28px;
  display: block;
  background-color: #111827;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* ホバー時の変化をなめらかにするプロパティ */
}

.link-list li a:hover {
  background-color: #1E3A5F;
  color: #ffffff;
  border-color: #38BDF8;
}


/* ===== Connect セクション ===== */
.connect-section {
  position: relative; /* 子要素の絶対配置の基準にするプロパティ */
  text-align: center;
}

/* 上部の中央グロー */
.connect-glow {
  position: absolute;
  top: 0;
  left: 50%;
  /* 左右中央に配置するプロパティ */
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: rgba(56, 189, 248, 0.05);
  border-radius: 50%;    /* 丸にするプロパティ */
  filter: blur(120px);   /* ぼかすプロパティ */
  pointer-events: none;  /* マウス操作を透過させるプロパティ */
}

/* セクションヘッダー（中央揃え） */
.connect-header {
  margin-bottom: 64px;
}

/* 大きな見出し */
.connect-h2 {
  font-size: 3rem;
  font-weight: bold; /* 文字の太さを指定するプロパティ */
  color: #F1F5F9;
  margin: 0 0 16px 0;
}

/* SNSカードグリッド */
.sns-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* SNSカード共通スタイル */
.sns-card {
  position: relative;              /* 外部リンクアイコンを右上に配置するための基準 */
  border-radius: 16px;             /* 角を丸くするプロパティ */
  border: 1px solid rgba(30, 58, 95, 0.3);
  padding: 24px;
  text-decoration: none;           /* リンクの下線を消すプロパティ */
  text-align: left;
  display: block;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; /* ホバー時の変化をなめらかにするプロパティ */
  backdrop-filter: blur(4px);      /* 背景をほんのりぼかすプロパティ */
}

.sns-card:hover {
  transform: translateY(-4px);              /* 4px浮かせるプロパティ */
  box-shadow: 0 8px 30px rgba(0,0,0,0.3); /* カードに影を付けるプロパティ */
}

/* 各SNSカードの色 */
.sns-card-x {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0.05)), #111827;
}
.sns-card-x:hover { border-color: rgba(255,255,255,0.5); }
.sns-card-x .brand-icon, .sns-card-x .sns-card-name { color: #F1F5F9; }

.sns-card-instagram {
  background: linear-gradient(to bottom right, rgba(236,72,153,0.2), rgba(249,115,22,0.1)), #111827;
}
.sns-card-instagram:hover { border-color: rgba(236,72,153,0.5); }
.sns-card-instagram .brand-icon, .sns-card-instagram .sns-card-name { color: #f472b6; }

.sns-card-youtube {
  background: linear-gradient(to bottom right, rgba(239,68,68,0.2), rgba(220,38,38,0.1)), #111827;
}
.sns-card-youtube:hover { border-color: rgba(239,68,68,0.5); }
.sns-card-youtube .brand-icon, .sns-card-youtube .sns-card-name { color: #f87171; }

.sns-card-github {
  background: linear-gradient(to bottom right, rgba(148,163,184,0.15), rgba(100,116,139,0.08)), #111827;
}
.sns-card-github:hover { border-color: rgba(148,163,184,0.5); }
.sns-card-github .brand-icon, .sns-card-github .sns-card-name { color: #94A3B8; }

.sns-card-discord {
  background: linear-gradient(to bottom right, rgba(99,102,241,0.2), rgba(79,70,229,0.1)), #111827;
}
.sns-card-discord:hover { border-color: rgba(129,140,248,0.5); }
.sns-card-discord .brand-icon, .sns-card-discord .sns-card-name { color: #818cf8; }

/* ブランドアイコン（SNSカード内） */
.brand-icon {
  display: block;
  margin-bottom: 16px;
}

/* 外部リンクアイコン（右上に絶対配置） */
.external-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  color: rgba(241, 245, 249, 0.3);
  transition: color 0.2s;
}

.sns-card:hover .external-icon {
  color: rgba(241, 245, 249, 0.6);
}

/* SNSカードのサービス名 */
.sns-card-name {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 4px 0;
}

/* SNSカードの説明文 */
.sns-card-desc {
  font-size: 0.85rem;
  color: rgba(241, 245, 249, 0.6);
  margin: 0;
  line-height: 1.5;
}

/* 「他のSNSも見る」ボタンのラッパー */
.connect-btn-wrap {
  margin-bottom: 64px;
}

/* 「他のSNSも見る」ボタン */
.connect-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38BDF8;
  text-decoration: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.connect-more-btn:hover {
  background-color: rgba(56, 189, 248, 0.1);
}

/* お問い合わせCTAエリア */
.contact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* CTA上部の説明テキスト */
.contact-cta-text {
  color: rgba(241, 245, 249, 0.7);
  font-size: 1rem;
  margin: 0;
}

/* 「お問い合わせ」ボタン */
.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background-color: #38BDF8;          /* 水色の背景 */
  color: #0B1120;                      /* 濃い文字色 */
  text-decoration: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.contact-cta-btn:hover {
  background-color: rgba(56, 189, 248, 0.9);
  /* ホバー時に水色の光を追加するプロパティ */
  box-shadow: 0 8px 30px rgba(56, 189, 248, 0.3);
}

/* ===== フッター ===== */
footer {
  text-align: center;
  font-size: 0.8rem;
  color: #4a6080;
  padding: 32px;
  border-top: 1px solid #1E3A5F;
  margin-top: 40px;
}

footer p {
  color: #4a6080;
}