/*
===
1.1 Basic
===

### Basic Style

#### Yu Gothic & Yu Mincho

Windows OSとMac OSの`font-weight`の統一しています。

```scss
@font-face {
  font-family: 'Yu Gothic';
  src: local('Yu Gothic Medium');
  font-weight: 400;
}

@font-face {
  font-family: 'Yu Gothic';
  src: local('Yu Gothic Bold');
  font-weight: bold;
}

@font-face {
  font-family: 'Yu Mincho';
  src: local('Yu Mincho Medium');
  font-weight: 400;
}

@font-face {
  font-family: 'Yu Mincho';
  src: local('Yu Mincho Bold');
  font-weight: bold;
}
```

#### Box Sizing

```scss
*,
*:before,
*:after {
  box-sizing: border-box;
}
```

#### Image

```scss
img {
  max-width: 100%;
}
```

#### Main

Internet Explorer 11 に対応するために指定しています。

```scss
main {
  display: block;
}
```

#### Table

```scss
table {
  border-collapse: collapse;
}
```

#### Form

プレイスホルダーのスタイルを固定し、親要素の`line-height`を継承しています。
またグリッドシステムを利用して詳細な横幅調整を行うことを前提として、ラジオボタンやチェックボックス、ボタン以外を`display: block`、`width: 100%`に設定しています。

```scss
button,
input,
optgroup,
select,
textarea {
  line-height: inherit;
}

input:not([type=file]):not([type=submit]):not([type=image]):not([type=reset]):not([type=button]):not([type=radio]):not([type=checkbox]),
optgroup,
select,
textarea {
  display: block;
  width: 100%;
}

input:not([type=file]):not([type=submit]):not([type=image]):not([type=reset]):not([type=button]):not([type=radio]):not([type=checkbox]),
textarea {
  &::placeholder-shown {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }

  &::-webkit-input-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }

  &::-moz-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
    opacity: 1;
  }

  &::-ms-input-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }
}

textarea {
  resize: vertical;
}
```

*/

@font-face {
  font-family: 'Yu Gothic';
  src: local('Yu Gothic Medium');
  font-weight: 400;
}

@font-face {
  font-family: 'Yu Gothic';
  src: local('Yu Gothic Bold');
  font-weight: bold;
}

@font-face {
  font-family: 'Yu Mincho';
  src: local('Yu Mincho Medium');
  font-weight: 400;
}

@font-face {
  font-family: 'Yu Mincho';
  src: local('Yu Mincho Bold');
  font-weight: bold;
}

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

img {
  max-width: 100%;
}

main {
  display: block;
}

table {
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  line-height: inherit;
}

input:not([type=file]):not([type=submit]):not([type=image]):not([type=reset]):not([type=button]):not([type=radio]):not([type=checkbox]),
optgroup,
select,
textarea {
  display: block;
  width: 100%;
}

input:not([type=file]):not([type=submit]):not([type=image]):not([type=reset]):not([type=button]):not([type=radio]):not([type=checkbox]),
textarea {
  &::placeholder-shown {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }

  &::-webkit-input-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }

  &::-moz-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
    opacity: 1;
  }

  &::-ms-input-placeholder {
    font-family: inherit;
    line-height: inherit;
    color: #ccc;
  }
}

textarea {
  resize: vertical;
}