@charset "UTF-8";
/* ==========================================================================
   ¥Today - ベース（リセット / タイポ / 器 / 共通パーツ）
   モバイルファースト。1024px以上でPC版に切り替わる。
   ========================================================================== */

/* ---- リセット ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 追従ヘッダーぶんアンカー位置をずらす */
  scroll-padding-top: 80px;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* hidden 属性は常に非表示にする。
   author側で display を指定すると UA の display:none が負けるため。 */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ---- 器 ------------------------------------------------------------------ */
.l-container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section {
  padding-block: var(--section-py);
}

.l-section--subtle { background: var(--color-surface-subtle); }
.l-section--tint   { background: var(--color-surface-tint); }
.l-section--grad   { background: var(--gradient-section); }

/* ---- 見出し -------------------------------------------------------------- */
.c-label-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-label-en);
  line-height: var(--lh-label-en);
  letter-spacing: var(--ls-label-en);
  color: var(--color-brand-blue);
}

.c-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
}

.c-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
}

.c-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  color: var(--color-brand-navy-dark);
}

/* 太字のリード（「ファクタリングとは」の説明など）。行間もFigmaは150% */
.c-lead--bold { font-weight: 700; line-height: 1.5; }

/* 見出し・本文の中で色を変える強調。Figmaでは1文の中で色が切り替わる */
.c-accent { color: var(--color-brand-blue); }
.c-accent--yellow { color: var(--color-brand-yellow); }

.c-note {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.c-note--muted { color: var(--color-text-muted); }

.c-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* セクション見出しのまとまり */
.c-sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-40);
}

/* ---- ボタン -------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figmaは左右非対称（左40 / 右32）。矢印ぶん右を詰めている */
  gap: var(--space-20);
  min-height: 58px;
  padding: 0 var(--space-32) 0 var(--space-40);
  border: 2px solid var(--color-surface-base);
  border-radius: var(--radius-full);
  background: var(--gradient-cta-green);
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Figmaのホバーは「白地 ＋ 緑グラデの枠線 ＋ 緑の文字」。
   グラデーションの枠線は、背景を2枚重ねて padding-box / border-box で
   塗り分ける方法で作る（border-image は角丸に追従しないため）。 */
.c-btn:hover {
  border-color: transparent;
  background-image:
    linear-gradient(var(--color-surface-base), var(--color-surface-base)),
    var(--gradient-cta-green);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-button-hover);
  color: var(--color-accent-green);
}

/* 矢印もSVGなので、マスクにして文字色に追従させる */
/*
.c-btn__arrow {
  background: currentColor;
  -webkit-mask-image: url("../img/icon-chevron.svg");
  mask-image: url("../img/icon-chevron.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
*/
.c-btn__arrow {
  flex: none;
  width: 16px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' fill='none'%3E%3Cpath d='M3.9 1.1L9.36 6.56L3.9 12.02' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.c-btn:hover .c-btn__arrow {
  flex: none;
  width: 16px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' fill='none'%3E%3Cpath d='M3.9 1.1L9.36 6.56L3.9 12.02' stroke='%2327A85D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

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

.c-btn[aria-disabled="true"],
.c-btn:disabled {
  background: var(--color-border-strong);
  box-shadow: none;
  cursor: not-allowed;
}

.c-btn--block {
  display: flex;
  width: 100%;
}

.c-btn--sm {
  min-height: 40px;
  padding-inline: var(--space-16);
  gap: var(--space-12);
  font-size: 13px;
}

.c-btn__arrow {
  flex: none;
  width: 16px;
  height: 17px;
}

@media (min-width: 1024px) {
  .c-btn {
    min-height: 76px;
    font-size: 19px;
  }
  .c-btn--sm {
    min-height: 44px;
    font-size: 15px;
    padding: 0 var(--space-22) 0 var(--space-32);
  }
}

/* ---- スライダーの操作部（Why / Standard で共用） -------------------------- */
.c-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
}

.c-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-blue);
  transition: opacity var(--dur) var(--ease);
}

.c-slider__nav:hover { opacity: 0.85; }
.c-slider__nav img { width: 13px; }
.c-slider__nav--prev img { transform: scaleX(-1); }

.c-slider__dots {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.c-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
  transition: background var(--dur) var(--ease);
}

.c-slider__dot.is-active { background: var(--color-brand-blue); }

@media (min-width: 1024px) {
  .c-slider__controls { display: none; }
}

/* ---- カード -------------------------------------------------------------- */
.c-card {
  background: var(--color-surface-base);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
}

/* ---- 補助 ---------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PC/SPの出し分け。Figmaで構造が異なる箇所だけに使う */
.u-pc-only { display: none; }
.u-sp-only { display: revert; }

@media (min-width: 1024px) {
  .u-pc-only { display: revert; }
  .u-sp-only { display: none; }
}