/* =========================================================
   Axis Base
   key: axis-base-frame
   name: Axis基本CSS｜スマホUIフレーム
   group: Base
   type:
   layer:
   value:
   selector:
   ========================================================= */

/* =========================================================
   Axis Variables（ここだけ触ればOK）
   ========================================================= */

:root {
  --axis-screen-width: 560px;
  --axis-side-width: 220px;
  --axis-gap: 32px;

  --axis-page-padding-pc: 48px;
  --axis-page-padding-sp: 0px;

  --axis-radius: 32px;
  --axis-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   Axis Canvas
   ========================================================= */

.l-axis {
  min-height: 100vh;
  padding: var(--axis-page-padding-pc) 24px;
}

/* =========================================================
   Axis Layout
   ========================================================= */

.l-axis__inner {
  width: min(
    100%,
    calc(
      var(--axis-side-width) * 2 +
      var(--axis-screen-width) +
      var(--axis-gap) * 2
    )
  );
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    var(--axis-side-width)
    minmax(0, var(--axis-screen-width))
    var(--axis-side-width);
  gap: var(--axis-gap);
  align-items: start;
}

/* =========================================================
   Axis Side
   ========================================================= */

.l-axis__side {
  position: sticky;
  top: calc(var(--wp-adminbar-h) + 48px);
  min-width: 0;
}

/* =========================================================
   Axis Main
   ========================================================= */

.l-axis__main {
  min-width: 0;
  width: 100%;
  max-width: var(--axis-screen-width);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--axis-radius);
  box-shadow: var(--axis-shadow);
}

/* =========================================================
   SP
   ========================================================= */

@media (max-width: 767px) {
  .l-axis {
    padding: var(--axis-page-padding-sp);
  }

  .l-axis__inner {
    display: block;
    width: 100%;
  }

  .l-axis__side {
    display: none;
  }

  .l-axis__main {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}