/* 今では入れない事が多い。htmlでmetaタグでcharset指定するため */
/* @charset "utf-8"; */

/* 優先順位を明確にするためにレイヤーを使用する */
@layer reset, base, components, utilities;

@layer reset {
  /* よくあるリセット例 - ブラウザのデフォルトスタイルをリセットする */
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    padding: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }
  p,
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  ul,
  ol {
    list-style: none;
  }
  img {
    display: block;
  }
}

@layer base {
  :root {
    /* カラーパレット */
    --color-white: #ffffff;
    --color-black: #000000;
    /** カラーパレットのその他の設定例
		--color-primary: #007bff;
		--color-secondary: #6c757d;
		--color-success: #28a745;
		--color-danger: #dc3545;
		--color-warning: #ffc107;
		--color-info: #17a2b8;
		--color-light: #f8f9fa;
		--color-dark: #343a40;
	*/

    /* フォントサイズ */
    --font-size-xs: calc(var(--font-size-base) * 0.75); /* 12px */
    /* --font-size-sm: calc(var(--font-size-base) * 0.875); */ /* 14px */
    --font-size-base: 1rem; /* 16px */
    /*--font-size-lg: calc(var(--font-size-base) * 1.125); /* 18px */
    /*--font-size-xl: calc(var(--font-size-base) * 1.25); /* 20px */
    /*--font-size-2xl: calc(var(--font-size-base) * 1.5); /* 24px */
    /*--font-size-3xl: calc(var(--font-size-base) * 1.875); /* 30px */
    --font-size-4xl: calc(var(--font-size-base) * 2.25); /* 36px */
    --font-size-5xl: calc(var(--font-size-base) * 3); /* 48px */

    /* フォントファミリー */
    --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    --font-family-title: "Goldman", cursive;
  }

  body {
    font-family: var(--font-family-base);
    color: var(--color-white);
    background-color: var(--color-black);
    min-height: 100svh;
  }
}

@layer components {
  .wrapper {
    width: 100vw;
    height: 100svh;
    min-height: 667px;
    position: relative;
    overflow: hidden;
  }
  .header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
  }
  .header__logo {
    max-width: 235px;
    width: 100%;
    @media (min-width: 768px) {
      max-width: 333px;
    }
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .main {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .movie_blk {
    position: absolute;
    inset: 0;
    z-index: 0;
    .movie_blk__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .maincopy {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    padding: 1rem;
  }
  .maincopy__title {
    text-align: center;
    font-family: var(--font-family-title);
    font-size: var(--font-size-4xl);
    text-wrap: balance;
  }
  .footer {
    position: absolute;
    inset: auto 0 0;
    padding: 1rem;
    z-index: 1;
    text-align: center;
    .footer__copyright {
      font-size: var(--font-size-xs);
    }
  }

  /* タブレット以上 */
  @media (min-width: 768px) {
    .maincopy__title {
      font-size: var(--font-size-5xl);
    }
  }
  /* デスクトップ以上 */
  @media (min-width: 1280px) {
  }
}

@layer utilities {
  /* ユーティリティ追加の例*/
  .w-screen {
    width: 100vw;
  }
  .h-screen {
    height: 100vh;
  }
  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }
}