@charset "Shift_JIS";

/* 文字のフチ*/
.textshadow {
  color: #000;
  text-shadow: 1px 1px 0 #fff,
               -1px 1px 0 #fff,
               1px -1px 0 #fff,
               -1px -1px 0 #fff;
}


/* ■未使用■サイドの背景色・幅・マージン*/
#side {
float: left;
background: #fff;
text-align: right;
width:320px;
}


/* アイテム(item)の背景色・余白・角の丸み・外枠の色*/
.item {
  background: note;
  padding: 5px;
  border-radius: 0px;
  border: 0px solid #note;
}

/* アイテム(twitter)の背景色・余白・角の丸み・外枠の色*/
.twitter {
  background: note;
  padding: 5px;
  border-radius: 0px;
  border: 0px solid #note;
}

/* カット(cut)の背景色・余白・角の丸み・外枠の色*/
.cut {
  background: note;
  padding: 0px;
  border-radius: 0px;
  border: 0px solid #note;
}


/* トップ(top)の背景色・余白・角の丸み・外枠の色*/
.top {
  background: note;
  padding: 5px;
  width: 100%;
}

/* メインをグリッド化・IE用の記述*/
.mein {
  display: grid;
  grid-gap: 0px;
}

/* 横と縦のグリッドを指定*/
.mein {
  grid-template-columns: 320px 320px 320px 320px;
  grid-template-rows: none;
}


/* ブチ抜きの指定。IDと横ラインgrid-columnと縦ラインを指定*/
.サンプル {
  grid-column: auto;
  grid-row: 1 / span 3;
}

.サンプル1 {
  grid-column: auto;
  grid-row: 4 / 6;
}

.サンプル2 {
  grid-column: 1 / 3;
  width: 96%;
  height: 240px;
  object-fit: cover;
}

/* 幅1300以下では3カラム可*/
@media (max-width: 1300px){
  .mein {
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: auto;
  }
}

/* 幅960以下では2カラム可*/
@media (max-width: 960px){
  .mein {
  grid-template-columns: 300px 300px ;
    grid-template-rows: auto;
  }
}


/* 幅600以下では1カラム可・幅100パーセント・twitterを非表示*/
@media (max-width: 600px){
  .mein {
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
  }
.twitter {
  display:none;
}
}