/* ===========================
   Components
   =========================== */

/* ボタン */
.btn {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-weight: 700;
  transition: 0.3s;
}

.btn:hover {
  opacity: 0.85;
}

/* 見出し */
.heading-1 {
  font-size: var(--font-xxl);
  font-weight: 700;
  margin-bottom: var(--space-block);
}

.heading-2 {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-block);
}

.heading-3 {
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: var(--space-text);
}

/* テキスト */
.text-lg {
  font-size: var(--font-lg);
  color: var(--color-text-main);
  margin-bottom: var(--space-text);
}

.text-md {
  font-size: var(--font-md);
  color: var(--color-text-main);
  margin-bottom: var(--space-text);
}

.text-sm {
  font-size: var(--font-sm);
  color: var(--color-text-main);
  margin-bottom: var(--space-text);
}

/* ===========================
   Page Top Button
   =========================== */
.pageTop {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 1000;
}

/* 表示状態 */
.pageTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ホバー */
.pageTop:hover {
  background: var(--color-accent-dark);
}

/* ===========================
   SP固定フッターバー
   =========================== */
.floating-contact {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 9999;
}

/* ボタン共通 */
/* FCアイテム全体 */
.fc-item {
  flex: 1;
  display: flex;
  flex-direction: column; /* ← 上段と下段に分ける */
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: #fff;
}

/* 上段：アイコン＋ラベルを横並び */
.fc-top {
  display: flex;
  align-items: center;
  gap: 6px; /* アイコンと文字の間隔 */
}

/* メール（左） */
.fc-mail {
  background: var(--color-text-main);
}

/* 電話（右） */
.fc-tel {
  background: var(--color-accent);
}

/* アイコン（mask-imageで描画） */
.fc-icon {
  width: 22px;
  height: 22px;
  background-color: #fff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* メールアイコン（封筒） */
.fc-icon-mail {
  mask-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\ <path fill='white' d='M2 4h20v16H2V4zm10 7L4 6v12h16V6l-8 5z'/>\ </svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\ <path fill='white' d='M2 4h20v16H2V4zm10 7L4 6v12h16V6l-8 5z'/>\ </svg>");
}

/* 電話アイコン（受話器） */
.fc-icon-tel {
  mask-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\ <path fill='white' d='M6.6 10.8c1.2 2.4 3.2 4.4 5.6 5.6l1.9-1.9c.3-.3.8-.4 1.2-.3 1 .3 2 .5 3 .5.7 0 1.2.5 1.2 1.2v3c0 .7-.5 1.2-1.2 1.2C9.7 20.1 3.9 14.3 3.9 7.2c0-.7.5-1.2 1.2-1.2h3c.7 0 1.2.5 1.2 1.2 0 1 .2 2 .5 3 .1.4 0 .9-.3 1.2l-1.9 1.9z'/>\ </svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\ <path fill='white' d='M6.6 10.8c1.2 2.4 3.2 4.4 5.6 5.6l1.9-1.9c.3-.3.8-.4 1.2-.3 1 .3 2 .5 3 .5.7 0 1.2.5 1.2 1.2v3c0 .7-.5 1.2-1.2 1.2C9.7 20.1 3.9 14.3 3.9 7.2c0-.7.5-1.2 1.2-1.2h3c.7 0 1.2.5 1.2 1.2 0 1 .2 2 .5 3 .1.4 0 .9-.3 1.2l-1.9 1.9z'/>\ </svg>");
}

/* テキスト部分 */
.fc-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* ラベル（メール / 電話） */
.fc-label {
  font-size: 15px;
  font-weight: 700;
}

/* コメント（下段） */
.fc-note {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 2px;
}