/* =====================================================
   SWIT / COMMON CSS
===================================================== */


/* =====================================================
   DESIGN TOKENS
===================================================== */

:root {
  /* Brand */
  --site-primary: #2563EB;
  --site-primary-dark: #1D4ED8;
  --site-primary-light: #EFF6FF;

  /* Text */
  --site-heading: #111827;
  --site-body: #374151;
  --site-muted: #6B7280;

  /* UI */
  --site-border: #E5E7EB;
  --site-surface: #F7F8FA;
  --site-white: #FFFFFF;
  --site-dark: #111827;

  /* Radius */
  --site-radius-sm: 8px;
  --site-radius: 12px;

  /* Spacing */
  --site-section-space: 120px;
  --site-section-space-tablet: 88px;
  --site-section-space-mobile: 72px;
}


/* =====================================================
   COMMON CONTAINER
===================================================== */

.site-container {
  width: 100%;

  max-width: calc(
    var(--container_size, 1200px)
    + (var(--swl-pad_container, 20px) * 2)
  );

  margin-right: auto !important;
  margin-left: auto !important;

  padding-right: var(--swl-pad_container, 20px);
  padding-left: var(--swl-pad_container, 20px);

  box-sizing: border-box;
}


/*
 * GutenbergのGroupブロックが生成する
 * inner-container側の幅制限を解除する。
 */
.site-container
> .wp-block-group__inner-container {
  width: 100%;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   COMMON SECTION
===================================================== */

.site-section {
  padding-top: var(--site-section-space);
  padding-bottom: var(--site-section-space);
}


.site-section--surface {
  background-color: var(--site-surface);
}


.site-section--dark {
  background-color: var(--site-dark);
  color: var(--site-white);
}


/* =====================================================
   COMMON LABEL
===================================================== */

.site-label {
  margin-top: 0 !important;
  margin-bottom: 16px !important;

  padding: 0 !important;

  color: var(--site-muted);

  font-size: 12px;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: .14em;

  text-transform: uppercase;
}


/* =====================================================
   COMMON TEXT
===================================================== */

.site-text {
  margin-top: 0;

  color: var(--site-body);

  font-size: 16px;
  line-height: 1.9;
}


/* =====================================================
   COMMON LEAD
===================================================== */

.site-lead {
  margin-top: 0;

  color: var(--site-body);

  font-size: 17px;
  line-height: 1.9;
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.site-button--primary {
  text-align: left !important;
}


.site-button--primary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding-right: 28px;
  padding-left: 28px;

  border: 0;
  border-radius: var(--site-radius-sm);

  background-color: var(--site-primary);
  color: var(--site-white) !important;

  font-weight: 600;
  line-height: 1;

  text-decoration: none;

  transition:
    background-color .2s ease,
    transform .2s ease;
}


.site-button--primary a:hover {
  background-color: var(--site-primary-dark);

  transform: translateY(-1px);
}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.site-button--secondary {
  text-align: left !important;
}


.site-button--secondary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding-right: 28px;
  padding-left: 28px;

  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);

  background-color: transparent;
  color: var(--site-heading) !important;

  font-weight: 600;
  line-height: 1;

  text-decoration: none;

  transition:
    border-color .2s ease,
    background-color .2s ease;
}


.site-button--secondary a:hover {
  border-color: var(--site-heading);

  background-color: var(--site-white);
}


/* =====================================================
   COMMON CARD
===================================================== */

.site-card {
  height: 100%;

  padding: 36px;

  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);

  background-color: var(--site-white);

  box-sizing: border-box;
}


/*
 * site-cardをGroupブロックへ付与した場合の
 * inner-container側の幅制限を解除する。
 */
.site-card
> .wp-block-group__inner-container {
  width: 100%;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   COMMON LINK
===================================================== */

.site-link {
  color: var(--site-heading);

  font-weight: 600;

  text-decoration: none;

  transition: color .2s ease;
}


.site-link:hover {
  color: var(--site-primary);
}


/* =====================================================
   COMMON IMAGE
===================================================== */

.site-image {
  overflow: hidden;

  border-radius: var(--site-radius);
}


.site-image img {
  display: block;

  width: 100%;
  height: auto;
}


/* =====================================================
   RESPONSIVE / <= 959px
===================================================== */

@media (max-width: 959px) {

  .site-section {
    padding-top: var(--site-section-space-tablet);
    padding-bottom: var(--site-section-space-tablet);
  }


  .site-lead {
    font-size: 16px;
  }

}


/* =====================================================
   RESPONSIVE / <= 767px
===================================================== */

@media (max-width: 767px) {

  .site-section {
    padding-top: var(--site-section-space-mobile);
    padding-bottom: var(--site-section-space-mobile);
  }


  .site-text,
  .site-lead {
    font-size: 16px;
    line-height: 1.9;
  }


  .site-card {
    padding: 28px 24px;
  }


  .site-button--primary a,
  .site-button--secondary a {
    min-height: 50px;

    padding-right: 24px;
    padding-left: 24px;
  }

}