/* 基本レイアウト */
html, body {
margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  /* 丸みを意識したフォント構成 */
  font-family: "Helvetica Rounded", "Yu Gothic Rounded", "Hiragino Sans Round", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  -moz-osx-font-smoothing: grayscale;
}

.site-container {
  display: flex;
  max-width: 1200px; /* 全体の横幅 */
  margin: 0 auto;
  gap: 20px;         /* 左右の隙間を狭くして密度を上げる */
  padding: 20px;
}

.main-area {
  flex: 3;           /* 3分割してメインに割り当て */
  min-width: 0; /* これが重要です：Flexbox内で横幅の制限を無視させない */
}


/*コピー制御*/
body {
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  pointer-events: none;
}