@charset "utf-8";
/* --------------------------------------------

index

---------------------------------------------- */ 
body {
	/*background: #000;*/
}

.topMainVisual {
	overflow: hidden;
	position: relative;
	/*height: 439px;*/
	height: 70vh;
}
.topMainVisualGray {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: url("../img/index/mainVisualGray.png");
}

.topMainVisual img {
}

.topMainVisual video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:960px){
.topMainVisual {
	position: absolute;
	height: 50vh;
}
.topMainVisual img {
	width: 140%;
	margin-left: -20%;
}
}
@media screen and (max-width:599px){
.topMainVisual img {
	width: 160%;
	margin-left: -40%;
}
}




#main {
	margin: 0 auto;
}

.top-postGrid {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 5em auto ;
	padding: 2em 0;
}
@media screen and (max-width:960px){
.top-postGrid {
	margin: 50vh auto 5em ;
}
}
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.5fr 1fr 1fr 3fr;
  grid-template-rows: 180px 100px 80px 120px auto;
}
.item {
  background: #ddd;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #ccc;
}
.box-big1 {
  grid-column: 1;
  grid-row: 1 / 4;
  background: #fc2;
  border-color: #fa0;
}
.box-big2 {
  grid-column: 3 / 5;
  background: #0bd;
  border-color: #09c;
}
.box-big3 {
  grid-column: 2 / 4;
  grid-row: 3 / 5;
  background: #c6c;
  border-color: #a4a;
}
.box-big4 {
  grid-column: 1 / 5;
  background: #0ba;
  border-color: #098;
}

/* Responsive */
@media (max-width: 600px){
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .box-big1,
  .box-big2,
  .box-big3,
  .box-big4 {
    grid-column: 1;
    grid-row: auto;
  }
}