/* ==============================
   Button Vars (fallbacks)
============================== */
:root{
  --btn-radius: .75rem;
  --btn-offset: .3rem;
  --c-ink: #1A474C;
  --c-accent: #EC6C00;
  --c-service: #338998;
}

/* ==============================
   Buttons (base)
============================== */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8rem 1.25rem;
  letter-spacing: .06em;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  transition: color .3s ease, background-color .3s ease, transform .05s ease;
  will-change: transform;
}

.btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--c-ink) 35%, transparent);
  outline-offset: 2px;
}

.btn:active{
  transform: translateY(1px);
}

/* ==============================
   Hero button group (layout only)
============================== */
.hero-buttons{
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;          /* 狭い幅で折り返し */
  row-gap: 1rem;            /* モバイルの縦詰まり対策 */
}

/* ==============================
   Emphasized button (.btn-highlight)
============================== */
.btn-highlight{
  z-index: 0;
  font-weight: 500;
}

.btn-highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-ink);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.btn-highlight::after{
  content: "";
  position: absolute;
  top: var(--btn-offset);
  left: var(--btn-offset);
  width: 100%;
  height: 100%;
	background-color: #FBDEC5;
  z-index: -1;
  border-radius: inherit;
  transition: top .3s ease, left .3s ease;
}

.btn-highlight:hover::after{
  top: 0;
  left: 0;
}

/* ==============================
   Service-tone button (.btn--service)
============================== */
.btn--service{
  color: var(--c-service);
  font-weight: 500;
  border: none;
  box-shadow: none;
  background: transparent;
  transition: background-color .3s ease, color .3s ease;
}

.btn--service:hover{
  background-color: var(--c-service);
  color: #fff;
}

.btn.service-btn{ /* 旧クラス互換 */
  color: var(--c-service);
  font-weight: 500;
  border: none;
  box-shadow: none;
  background: transparent;
  transition: background-color .3s ease, color .3s ease;
}
.btn.service-btn:hover{
  background-color: var(--c-service);
  color: #fff;
}

/* ==============================
   Motion preference
============================== */
@media (prefers-reduced-motion: reduce){
  .btn,
  .btn::after,
  .btn-highlight::after{
    transition: none !important;
  }
}

a.btn.btn--service {
  border-radius: 0;
}

.sticky-note {
  border-left: 10px solid var(--c-service);
  margin-top: var(--sp-8);
  background-color: var(--c-surface);
  box-shadow: 0 4px 6px rgba(0,0,0,.15);
  transition: box-shadow .3s ease, background-color .3s ease;
}


/* ==============================================
   Related Links（サービスページ内の関連記事ボックス）
   用途：共通部品としてサービス各ページで再利用
   依存：.related-links.mt-4 コンテナ配下に
         h4.service-subheading と .related-links-body
================================================ */

/* ブロック外側のマージン（.mt-4相当も内包） */
.related-links.mt-4 {
  margin: 3rem 0;
}

/* ボックス見出し */
h4.service-subheading {
  background-color: #338998;
  color: #fff;
  padding: .4rem 1rem;
  width: fit-content;
  margin-bottom: 0;
  border: 1px solid #338998;
}

/* 本文ボックス */
.related-links-body {
  background-color: #fff;
  padding: 1rem 1.2rem .6rem 1.2rem;
  border: 1px solid #338998;
}

/* 各リンク（段落内） */
.related-links-body a {
  text-decoration: none;
  color: #338998;
  font-weight: 500;
}

/* 各行の余白（段落） */
.related-links-body p {
  margin-bottom: .4rem;
}

/* ホバー時の下線風ハイライト */
.related-links-body a:hover {
  background-color: transparent;
  box-shadow: inset 0 -0.6em 0 #EC6C0040; /* EC6C00 の 25% 透過 */
  font-weight: 500;
  color: #1A474C;
}