@charset "UTF-8";
/**$serif: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;**/
@import url("style.css");
.inner {
  background: url(../img/attribute/main.jpg) no-repeat center center;
  background-size: cover; }

#attribute h2 {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 80px;
  font-size: 40px;
  font-family: "Roboto", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }
  #attribute h2:first-child {
    margin-top: 0; }
#attribute .text {
  font-size: 20px;
  text-align: center; }
#attribute .bg {
  background-color: #f3f3f3;
  padding: 50px;
  margin-top: 40px; }
  #attribute .bg ul li {
    width: 48%;
    max-width: 530px;
    float: left; }
    #attribute .bg ul li img {
      width: 100%; }
    #attribute .bg ul li:nth-child(2n) {
      margin-left: 4%; }
    #attribute .bg ul li:nth-child(3), #attribute .bg ul li:nth-child(4) {
      margin-top: 40px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1200px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #attribute h2 {
    margin-bottom: 15px;
    margin-top: 70px; }
  #attribute .bg {
    padding: 30px; }
    #attribute .bg ul li {
      width: 48.5%;
      max-width: 530px; }
      #attribute .bg ul li:nth-child(2n) {
        margin-left: 3%; }
      #attribute .bg ul li:nth-child(3), #attribute .bg ul li:nth-child(4) {
        margin-top: 30px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 645px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #attribute h2 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 24px; }
  #attribute .text {
    font-size: 16px; }
  #attribute .bg {
    padding: 15px;
    margin-top: 25px; }
    #attribute .bg ul li {
      width: 100%;
      max-width: 530px;
      float: none;
      margin: 10px auto 0; }
      #attribute .bg ul li:first-child {
        margin-top: 0; }
      #attribute .bg ul li:nth-child(2n) {
        margin-left: 0%; }
      #attribute .bg ul li:nth-child(3), #attribute .bg ul li:nth-child(4) {
        margin-top: 10px; } }