/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 02 2026 | 10:09:41 */
/* a.btn の「リンク装飾」をまずリセット */
#content p.btn a,
#content p.btn a:hover,
#content li a.btn:hover,
#content p a.btn:focus,
#content li a.btn:focus,
#content p a.btn:active,
#content li a.btn:active {
  text-decoration: none !important;
  text-decoration-style: initial !important;
  text-underline-offset: 0 !important;
  color: var(--j7-white) !important;
}

.btn {
  font-weight: 600 !important;
  display: block;
  width: 100%;
/*   max-width: 420px; */
  margin: 0 auto 1rem !important;
  padding: 0.5rem 0 !important;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: var(--j7-white) !important;
}

/* タブレット・PC用のホバー効果 */
@media (hover: hover) {
  .btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);  /* 影だけ強調 */
  }
}

/* スマホ用のタップ効果 */
@media (hover: none) {
  .btn:active {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
}

/* 各色ボタンの背景色のみ定義 */
.btn-dark { background-color: var(--j7-black); }
.btn-dark:hover, .btn-dark:active { background-color: #2a3f54; }

.btn-green { background-color: var(--j7-green); }
.btn-green:hover, .btn-green:active { background-color: #4fa568; }

.btn-pink-beta { background-color: var(--j7-pink); }
.btn-pink-beta:hover, .btn-pink-beta:active { background-color: #d88aad; }

.btn-orange { background-color: var(--j7-orange); }
.btn-orange:hover, .btn-orange:active { background-color: #e67e22; }

.btn-purple { background-color: var(--j7-purple); }
.btn-purple:hover, .btn-purple:active { background-color: #8e7cc3; }

.btn-yellow { background-color: var(--j7-yellow); }
.btn-yellow:hover, .btn-yellow:active { background-color: #f4c542; }

.btn-blue { background-color: var(--j7-blue); }
.btn-blue:hover, .btn-blue:active { background-color: #5a9fd4; }

.btn-sky { background-color: var(--j7-sky); }
.btn-sky:hover, .btn-blue:active { background-color: #5a9fd4; }


.btn-pink { background-color: var(--j7-pink); }
.btn-pink:hover, .btn-pink:active { background-color: #d88aad; }

.btn-red { background-color: var(--j7-red); }
.btn-red:hover, .btn-red:active { background-color: #e74c3c; }