@charset "UTF-8";
/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */
/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc);
  /*	If you need support for IE7 and lower make
  	sure the boxsizing.htc file is linked properly.
  	More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
  .container {
    max-width: 1160px;
    margin: 0 auto;
    position:relative;
  }

  .container-small {
    max-width: 540px;
    margin: 0 auto;
    position:relative;
  }
  .container-middle_s {
    max-width: 680px;
    margin: 0 auto;
    position:relative;
  }
  .container-middle {
    max-width: 780px;
    margin: 0 auto;
    position:relative;
  }
  .container-middle880 {
    max-width: 880px;
    margin: 0 auto;
    position:relative;
  }
  .container-middle900 {
    max-width: 900px;
    margin: 0 auto;
    position:relative;
  }
  .container-1100 {
    max-width: 1100px;
    margin: 0 auto;
    position:relative;
  }
  .container-middle02 {
    max-width: 1000px;
    margin: 0 auto;
    position:relative;
  }
  .container-large {
    max-width: 1300px;
    margin: 0 auto;
    position:relative;
  }
  .container-xlarge {
    max-width: 1500px;
    margin: 0 auto;
    position:relative;
  }
  .container-fluid {
    margin: 0 auto;
    padding: 0 3%;
    position:relative;
  }
/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after, .main_container,
.row:after,
.col:after,
.clr:after,
.group:after {
  content: "";
  display: table;
  clear: both;
}

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row {
  padding-bottom: 0em;
}

/* DEFAULT COLUMN STYLES */
.col {
  display: block;
  float: left;
  width: 100%;
}

@media (min-width: 768px) {
  .gutters .col {
    margin-left: 2%;
  }

  .gutters .col:first-child {
    margin-left: 0;
  }
}
@media (min-width: 769px) {
.sp_only {
  display: none;
}
}
/*	COLUMN WIDTH ON DISPLAYS +768px
	You might need to play with media queries here to suite your design. */
/******************************************************************************************
  PC用のデザインに適用
*******************************************************************************************/
@media (min-width: 768px) {
  .span_1 {
    width: 8.33333333333%;
  }

  .span_2 {
    width: 16.6666666667%;
  }

  .span_3 {
    width: 25%;
  }

  .span_4 {
    width: 33.3333333333%;
  }

  .span_5 {
    width: 41.6666666667%;
  }

  .span_6 {
    width: 50%;
  }

  .span_7 {
    width: 58.3333333333%;
  }

  .span_8 {
    width: 66.6666666667%;
  }

  .span_9 {
    width: 75%;
  }

  .span_10 {
    width: 83.3333333333%;
  }

  .span_11 {
    width: 91.6666666667%;
  }

  .span_12 {
    width: 100%;
  }
  .gutters .span_1 {
    width: 6.5%;
  }
  .gutters .span_2 {
    width: 15.0%;
  }
  .gutters .span_3 {
    width: 23.5%;
  }
  .gutters .span_4 {
    width: 32.0%;
  }
  .gutters .span_5 {
    width: 40.5%;
  }
  .gutters .span_6 {
    width: 49.0%;
  }
  .gutters .span_7 {
    width: 57.5%;
  }
  .gutters .span_8 {
    width: 66.0%;
  }
  .gutters .span_9 {
    width: 74.5%;
  }
  .gutters .span_10 {
    width: 83.0%;
  }
  .gutters .span_11 {
    width: 91.5%;
  }
  .gutters .span_12 {
    width: 100%;
  }

  .social-icon li i:before {
    padding: 0;
    line-height: 40px;
  }

  .social-icon li a:hover i {
    background: #e1daba;
  }
}