@charset "UTF-8";

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

-body {
/*  margin: 0;
  padding: 0;
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, Osaka, verdana;
  -webkit-text-size-adjust: 100%;*/
}

body {
  -background: url(http://griddle.it/1020-12-10) repeat-y center top;
}


/* 作品集部分 */

div.box {
/*ボックスの幅と余白の調整(線 1px x2 を引く)*/
  padding: 8px;
  height: auto;

  font-size: 0.7rem;
  line-height: 0.9rem;
  border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;

  -height: 400px;
}


/* layout
-------------------------.*/
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

/* row col
-------------------------.*/
.row {
  width: auto;
}

.col {
/*ボックスの幅と余白の調整(線 1px x2 を引く)*/
  padding-right: 5px;
  padding-left: 5px;

  border-collapse: collapse;
  border-spacing: 0;
  display:box;
  margin-bottom: 1.2rem;
}

.col div.data {
  /*文字数の量により枠の高さが可変*/
  height: 100%;
  -height: 400px;

  /*表示ページのjavaScriptにより　div.worksTextBox> p　の文字数をmax　６０文字に固定*/

  /*デザイン*/
  font-size: 0.7rem;
  background: white;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 1.2rem;
  border: 2px solid #555;
  text-align: center;
}

.col div.data img {
  margin-bottom: 1.2rem;
}

.pc{
  display: none;
}
.sp{
  display: block;
}

@media screen and (min-width: 480px) {
/* 480px or more */
.container {
  width: 100%;
}


/* columns
-------------------------.*/
.row .one,
.row .two,
.row .three {
  width: 16.66%;
}

/*.row .three,
.row .four {
  width: 33.33%;
}
*/

.row .four,
.row .five,
.row .six {
  width: 50%;
}

.row .seven,
.row .eight {
  width: 66.66%;
}

.row .nine,
.row .ten {
  width: 83.33%;
}

.row .eleven,
.row .twelve {
  width: 100%;
}

.col {
  float: left;
}

.col {
/*ボックスの幅と余白の調整(線 1px x2 を引く) **/

  padding-right: 5px;
  padding-left: 5px;

  border-collapse: collapse;
  border-spacing: 0;
  display:box;
}

.col div.data {
  background: white;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 1rem;
  border: 2px solid #555;
  text-align: center;
  font-size: 0.7rem;
}


.col div.data {
  /*文字数の量により枠の高さが可変*/
  -height: 100%;
  height: 400px;

  /*表示ページのjavaScriptにより　div.worksTextBox> p　の文字数をmax　６０文字に固定*/
}



.row .two-lower {
  width: 100%;
}
.row .three-lower {
  width: 100%;
}
.row .nine-lower {
  width: 100%;
  height: auto;
}
.row .ten-lower {
  width: 100%;
  height: auto;
}


}

@media screen and (min-width: 768px) {
/* 768px or more */

div.box{
  height: 3rem;
}

.container{
  width: 95%;
}

.row {
/*ボックスの幅と余白の調整*/
  margin-right: -5px;
  margin-left: -5px;
}
.col {
  float: left;
}

.col {
/*ボックスの幅と余白の調整(線 1px x2 を引く) **/

  padding-right: 5px;
  padding-left: 5px;

  border-collapse: collapse;
  border-spacing: 0;
  display:box;
}

.col div.data {
  background: white;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 1rem;
  border: 2px solid #555;
  text-align: center;
  font-size: 0.7rem;
}


.col div.data {
  /*文字数の量により枠の高さが可変*/

  height: 450px;
}

.pc{
  display: block;
}
.sp{
  display: none;
}


/* columns
-------------------------.*/
.row .one {
  width: 8.33%;
}
.row .two {
  width: 16.66%;
}
.row .three {
  width: 25%;
}
.row .four {
  width: 33.33%;
}
.row .five {
  width: 41.66%;
}
.row .six {
  width: 50%;
}
.row .seven {
  width: 58.33%;
}
.row .eight {
  width: 66.66%;
}
.row .nine {
  width: 75%;
}
.row .ten {
  width: 83.33%;
}
.row .eleven {
  width: 91.66%;
}
.row .twelve {
  width: 100%;
}



.row .two-lower {
  width: 16.66%;
  height: 100%;
}
.row .three-lower {
  width: 25%;
  height: 100%;
}
.row .nine-lower {
  width: 75%;
  height: 100%;
  background: url('../images/line-tate.gif')repeat-y left top;
}
.row .ten-lower {
  width: 83.33%;
  height: 100%;
  background: url('../images/line-tate.gif')repeat-y left top;
  padding: none;
  margin: none;
}

/* clearfix
-------------------------.*/
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;  
}
/*for IE6,7*/
.clearfix {
  *zoom:1;
}

}

@media screen and (min-width: 1020px) {
/* 1000px or more */
.container{
  width: 1020px;
}

}