@charset "UTF-8";

/* ==========================================================================
   Settings
   ========================================================================== */
:root {
  --design-width: 375;
  --content-max-width: 548px;

  /*
    デザイン(375px)上の 1px。.lp 内では .lp の幅、.lp の外（ヘッダー等）ではビューポート幅に比例して拡縮し、
    どちらも --content-max-width で頭打ちになる。
    使い方：calc(20 * var(--dp))
  */
  --dp: calc(min(100cqi, var(--content-max-width)) / var(--design-width));

  --header-height: calc(64 * var(--dp));

  --color-white: #ffffff;
  --color-orange: #FBA841;
  --color-footer-bg: #edf2f8;
  --color-page-bg: #3ab5ff;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 68px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-page-bg);
}

h1,
h2 {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.lp-side {
  display: none;
}

@media (min-width: 1024px) {
  .lp-layout {
    display: grid;
    grid-template-columns: 1fr var(--content-max-width) 1fr;
  }

  .lp-side {
    display: block;
    min-width: 0;
  }

  /* 背景をビューポートに追従させるため、カラム全体ではなく sticky な内側要素に敷く */
  .lp-side__inner {
    position: sticky;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    padding-bottom: 40px;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .lp-side--left .lp-side__inner {
    background-image: url("../images/side/side-left-bg.png");
  }

  .lp-side--right .lp-side__inner {
    background-image: url("../images/side/side-right-bg.png");
  }

  .lp-side__deco {
    width: 100%;
  }

  .lp-side__main {
    width: min(100% - 18px, 375px);
    margin-top: 98px;
  }

  .lp-side--right .lp-side__main {
    width: min(100% - 30px, 350px);
    position: relative;
    margin-top: calc(-1 * 28px);
  }

  .lp {
    grid-column: 2;
    z-index: 1;
    filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.25));
  }
}

.lp {
  container-type: inline-size;
  width: 100%;
  max-width: var(--content-max-width);
  position: relative;
  isolation: isolate;
  margin-inline: auto;
  background-color: var(--color-white);
}

/*
  KV背景：SPデザインのヘッダー(64px)の裏から .lp-events の上部まで続く。
  PCでヘッダーの高さが変わっても KV との位置関係を保つため、--header-height ではなく 64 で固定する。
  kv-bg.png が --color-orange になる位置（画像上端から568px）以降は --color-orange で塗る。
  （--dp は .lp の子孫でのみ有効なため疑似要素で敷く）
*/
.lp::before {
  content: "";
  position: absolute;
  inset: calc(-64 * var(--dp)) 0 0;
  z-index: -1;
  background:
    linear-gradient(var(--color-orange), var(--color-orange))
      left calc(568 * var(--dp)) / 100% 100% no-repeat,
    url("../images/kv/kv-bg.png") center top / 100% auto no-repeat;
}

.lp-kv__main img,
.lp-events__item img,
.lp-present__heading img,
.lp-present__item img {
  width: 100%;
}

/* ==========================================================================
   Header / KV
   ========================================================================== */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding-inline: calc(16 * var(--dp));
  border-bottom: calc(1 * var(--dp)) solid #e1e4e8;
  background-color: var(--color-white);
  box-shadow: 0 calc(2 * var(--dp)) calc(8 * var(--dp)) rgba(0, 0, 0, 0.15);
}

.lp-header__logo {
  width: calc(142 * var(--dp));
}

@media (min-width: 1024px) {
  .lp-header {
    padding-left: 40px;
  }

  .lp-header__logo {
    width: 204px;
  }
}

/* ==========================================================================
   Events
   ========================================================================== */
.lp-events {
  --fade-length: calc(86 * var(--dp));

  padding:
    calc(24 * var(--dp))
    calc(18 * var(--dp))
    calc(64 * var(--dp))
    calc(19 * var(--dp));
  background:
    linear-gradient(0deg, var(--color-white) 0%, var(--color-orange) 100%)
      left bottom / 100% var(--fade-length) no-repeat;
}

.lp-events__item + .lp-events__item {
  margin-top: calc(30 * var(--dp));
}

/* ==========================================================================
   Present
   ========================================================================== */
.lp-present {
  padding-top: calc(21 * var(--dp));
  padding-bottom: calc(50 * var(--dp));
  background-color: var(--color-white);
}

.lp-present__heading {
  padding-inline: calc(12 * var(--dp));
}

.lp-present__item {
  margin-top: calc(12 * var(--dp));
  padding-inline: calc(19 * var(--dp));
}

.lp-present__item + .lp-present__item {
  margin-top: calc(30 * var(--dp));
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(40 * var(--dp))
    0;
  background-color: var(--color-footer-bg);
}

.lp-footer__logo {
  width: calc(194 * var(--dp));
}

.lp-footer__info {
  display: block;
  width: calc(168 * var(--dp));
  margin-top: calc(19 * var(--dp));
}

.lp-footer__info img {
  width: 100%;
}