b002：SassとBEMを組み合わせる

// ** 外部ファイル読み込み
// * FontAwesome
// @import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

// * WebFont
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese");

// ** 初期設定
// * サイト共通の値を変数で定義

// ブレイクポイント
$breakPoint-pc: 480px;
$breakPoint-sp: 479px;

// 画像格納ディレクトリ
$imgDir: "./img/";

// PC最小表示幅
$inner: 1000px;

// サイトで使用する色
$color-light: #e8e8e8;
$color-dark: #222831;
$color-main: #f05454;
$color-sub: #30475e;

// 基本書体
$font: 'Noto Sans JP',
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
'メイリオ',
Meiryo,
'Yu Gothic',
YuGothic,
sans-serif !default;

// 基本フォントサイズ
$fontSize-pc: 16px;
$fontSize-sp: 5vw;

// 基本行間
$lineHeight: 1.6;

// ** mixin
// * ボタン
// * 複数ブロックで同じスタイルが必要なもの

// ** mixin
// * 文字
// * 複数ブロックで同じスタイルが必要なもの

// ** mixin
// * フォーム
// * 複数ブロックで同じスタイルが必要なもの

// ** mixin
// * ブレイクポイント
@mixin pc {
  @media screen and (min-width: $breakPoint-pc) {
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: $breakPoint-sp) {
    @content;
  }
}

// ** mixin
// * その他
// * 複数ブロックで同じスタイルが必要なもの

// ** Reset CSS
// * modern-css-reset
// * https: //github.com/hankchizljaw/modern-css-reset/blob/master/dist/reset.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

// ** サイト共通設定
// * サイト共通デザインのクラス名は「_（アンダースコア）」始まり

body {
  background-color: $color-light;
  color: $color-dark;
  font-family: $font;
  line-height: $lineHeight;
}

// PC
@include pc {
  body {
    font-size: $fontSize-pc;
    width: 100%;
  }

  ._inner {
    width: $inner;
    margin-left: auto;
    margin-right: auto;
  }

  ._sp {
    display: none;
  }
}

// SP
@include sp {
  body {
    font-size: $fontSize-sp;
    min-width: 320px;
  }

  html,
  body {
    height: 100%;
    min-height: 100%;
  }

  ._pc {
    display: none;
  }
}

// ** 記述の基本ルール例
// * 0.基本的に子孫セレクタを使用しない
// *   ※セレクタのポイント計算を簡略化するため
// * 1.BlockとBlock__elementに対するセレクタは「&」を使わずに記述する
// *   ※セレクタ検索しやすくするため
// * 2.-modifierは「&」を使って記述
// * 3.:hoverなどの擬似クラス「&」を使って記述
// * 4.::beforeや::afterなどの擬似要素も「&」を使って記述
.Block {
  color: $color-dark;
  background-color: $color-light;
}
.Block__element {
  color: $color-dark;
  background-color: $color-light;

  @include pc {
    padding: 10px;
  }
  @include sp {
    padding: 3vw;
  }

  &.-modifier {
    color: $color-dark;
    background-color: $color-main;

    @include pc {
      padding: 10px;
    }
    @include sp {
      padding: 3vw;
    }
  }

  &:hover {
    background-color: $color-sub;
  }
}

// ** ページごとのデザイン
// *