/**
 * Button Component Styles with CSS Nesting
 * 共通のボタンスタイル - headerとfooterで使用されているボタンをコンポーネント化
 */

/* ========================================
   Base Button Styles
   ======================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  border-radius: 50vh;
  border-radius: var(--radius-full);
  color: #fff;
  color: var(--color-white);
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 14px;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  gap: 0.5rem;
  gap: var(--spacing-2);
  line-height: 125%;
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.btn__content {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--spacing-2);
}

/* ========================================
   Primary Button (塗りつぶしボタン)
   headerのログインボタンスタイル
   ======================================== */

.btn--primary {
  min-width: 144px;
  height: var(--size-40);
  padding: 0 var(--spacing-4);
  background: var(--color-primary);
  color: var(--color-white);
}

@media (max-width: 960px) {
  .btn--primary {
    min-width: auto;
    height: 36px;
    font-size: 13px;
  }
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--primary:active {
  opacity: 0.8;
}

/* ========================================
   Outline Button (枠線ボタン)
   footerのお問い合わせボタンスタイル
   ======================================== */

.btn--outline {
  min-width: 200px;
  height: 2.875rem;
  height: var(--size-46);
  padding: 0 1.5rem;
  padding: 0 var(--spacing-6);
  border: 2px solid #f28500;
  border: 2px solid var(--color-secondary);
  background: #fff;
  background: var(--color-white);
  color: #f28500;
  color: var(--color-secondary);
}

@media (max-width: 374.98px) {
  .btn--outline {
    min-width: 100% !important;
    min-height: fit-content !important;
    padding: 0.25rem 2.5rem !important;
    padding: var(--spacing-1) var(--spacing-10) !important;
  }
}

.btn--outline:hover {
  border-color: #e35300;
  border-color: var(--color-secondary-hover);
  background: #fffbd2;
  background: var(--color-cream);
  color: #e35300;
  color: var(--color-secondary-hover);
  transition: all 0.2s ease;
}

.btn--outline:hover .btn__icon {
  color: #e35300;
  color: var(--color-secondary-hover);
  transition: color 0.2s ease;
}

/* ========================================
   Text Button (テキストボタン)
   枠線なし、テキストのみ
   ======================================== */

.btn--text {
  height: 2.875rem;
  height: var(--size-46);
  padding: 0 1rem;
  padding: 0 var(--spacing-4);
  border: none;
  background: transparent;
  color: #f28500;
  color: var(--color-secondary);
}

.btn--text .btn__icon {
  position: static;
  flex-shrink: 0;
}

.btn--text:hover {
  color: #e35300;
  color: var(--color-secondary-hover);
}

.btn--text:hover .btn__icon {
  color: #e35300;
  color: var(--color-secondary-hover);
}

/* ========================================
   Button Icon
   ======================================== */

.btn__icon {
  position: absolute;
  right: 0.75rem;
  right: var(--spacing-3);
  width: 1rem;
  width: var(--size-16);
  height: 1rem;
  height: var(--size-16);
  flex-shrink: 0;
  transition: filter 150ms ease-in-out;
  transition: filter var(--transition-fast);
}