レスポンシブに関するガイドライン

ブレイクポイント

基本的に下記を採用し、可能な限り増やさないようにしてください。
環境上難しい場合でも、1つまでの追加に納めるようにしてください。

1920px / 1280px / 1024px / 768px / 640px / 425px

SCSSの mixin は下記を参照

$breakpoints: (
	'xl': 'screen and (max-width: 1440px)',
	'lg': 'screen and (max-width: 1024px)',
	'md': 'screen and (max-width: 768px)',
	'sm': 'screen and (max-width: 640px)',
	'xs': 'screen and (max-width: 425px)',
) !default;


@mixin mq($bp) {
	@media #{map-get($breakpoints, $bp)} {
		@content;
	}
}

はみ出し防止

基本的に max-width を各コンポーネントの wrapper に付与してください。