/* 
 * common.css
 * コンポーネント以外で使用する共通スタイル
 */
body,
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic Pro', Meiryo;
  background-color: #876cbb;
}

:root {
  --design-width-base: 375;
  --layout-max-width: 500;
  /* デザイン上の1pxをvwに変換するための係数 */
  --px-to-vw-ratio: calc(100 / var(--design-width-base));
  /* 基準から最大までの拡大倍率 */
  --upscale-rate: calc(var(--layout-max-width) / var(--design-width-base));
  --main-color: #634396;
}

/* 
 * PC表示時の最大幅制限（SPデザインベース）
 */
@media (min-width: 501px) {
  .page {
    max-width: 500px;
    margin: 0 auto;
  }

  body::before,
  body::after {
    content: '';
    position: fixed;
    top: 0;
    width: calc((100vw - 500px) / 2);
    height: 100dvh;
    background: url('../../common/img/pc-side-bg-left.webp') center top / cover no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  body::before {
    left: 0;
  }

  body::after {
    right: 0;
    background-image: url('../../common/img/pc-side-bg-right.webp');
  }
}

/* 
 * ヘッダー共通スタイル
 */
.header {
  background-color: #fff;
  padding: 1rem 0;
  max-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header img {
  width: clamp(156px, 40vw, 200px);
  max-width: 100%;
  height: auto;
  display: block;
}

/* 
 * ユーティリティクラス
 */
.is-hidden {
  display: none !important;
}