@charset "utf-8";
/* ==========================================================================
   ヨドラム工業 — COMPONENTS
   ボタン / リンク / 矢印
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON
   Main CTA … 黄色地 × ネイビー文字。Hover でネイビー地 × 白文字。
   角丸はほぼ Square。Pill 型は使わない。
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg:       var(--c-yellow);
  --btn-fg:       var(--c-navy);
  --btn-hover-bg: var(--c-navy);
  --btn-hover-fg: var(--c-white);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  min-height: 56px;                 /* 十分なヒットエリア */
  padding: 1em 2.1em;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: var(--fw-bold);
  font-size: .95rem;
  letter-spacing: .08em;
  line-height: 1.4;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-slow) var(--ease-out);
}

/* 背景はスケールで塗り替える（Drop Shadow は使わない） */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-slow) var(--ease-mask);
}
.btn:hover,
.btn:focus-visible { color: var(--btn-hover-fg); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); transform-origin: top; }

/* 枠線タイプ */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  --btn-hover-bg: var(--c-yellow);
  --btn-hover-fg: var(--c-navy);
  box-shadow: inset 0 0 0 var(--bd-w) var(--bd-navy);
}

/* 小さめ */
.btn--sm {
  min-height: var(--cta-h);
  padding: .8em 1.5em;
  font-size: .86rem;
  gap: .9em;
}

/* --------------------------------------------------------------------------
   ARROW — hover で右へ抜け、左から入る
   -------------------------------------------------------------------------- */
.arrow {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
  overflow: hidden;
  flex: none;
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-slow) var(--ease-out);
}
.arrow::before { transform: translateY(-50%); }
.arrow::after  { transform: translate(-140%, -50%); }

.arrow > span {
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--t-slow) var(--ease-out);
}

/* 親のホバーで矢印が数px動く */
.btn:hover .arrow::before,
.btn:focus-visible .arrow::before,
a:hover > .arrow::before,
a:focus-visible > .arrow::before { transform: translate(140%, -50%); }

.btn:hover .arrow::after,
.btn:focus-visible .arrow::after,
a:hover > .arrow::after,
a:focus-visible > .arrow::after { transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   TEXT LINK
   -------------------------------------------------------------------------- */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .4em 0;
  font-size: .86rem;
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--bd-accent);
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-slow) var(--ease-out);
}
.tlink:hover::after,
.tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }