<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

/***PC画像が左******************************************************************************************************/
@media screen and (min-width: 1001px) {
	.grid-wrap1 {
		display: grid;
		display: -ms-grid; /*vendor prefixes*/

		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);

		-ms-grid-columns: (1fr)[2];
		-ms-grid-rows: (1fr)[3];

		/*grid-gap: 10px;*/
	}


	.grid-wrap1 &gt; *:nth-child(1) {
		grid-row: 1;
		grid-column: 1;
		grid-row-end: 4;

		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-row-span: 4;
	}

	.grid-wrap1 &gt; *:nth-child(2) {
		grid-row: 1;
		grid-column: 2;
		-ms-grid-row: 1;
		-ms-grid-column: 2;
	}

	.grid-wrap1 &gt; *:nth-child(3) {
		grid-row: 2;
		grid-column: 2;
		-ms-grid-row: 2;
		-ms-grid-column: 2;
	}

	.grid-wrap1 &gt; *:nth-child(4) {
		grid-row: 3;
		grid-column: 2;
		-ms-grid-row: 3;
		-ms-grid-column: 2;
	}

}
.item {/*padding: 40px; font-size: 1.5em; border: 1px solid black;*/}/*テスト見栄え*/


/***SP画像が左******************************************************************************************************/
@media screen and (max-width: 1000px) {
	.grid-wrap1 {
		display: grid;display: -ms-grid; /*vendor prefixes*/
		grid-template-columns: 100%;
		-ms-grid-columns: 100%;/*vendor prefixes*/
		grid-gap: 10px;
	}

/*.a {grid-row-end: 2;}
.b{grid-row-end: 1;}
*/
	.grid-wrap1 &gt; *:nth-child(1) {
		grid-row: 2;
		grid-column: 1;

		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}

	.grid-wrap1 &gt; *:nth-child(2) {
		grid-row: 1;
		grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	.grid-wrap1 &gt; *:nth-child(3) {
		grid-row: 3;
		grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}

	.grid-wrap1 &gt; *:nth-child(4) {
		grid-row: 4;
		grid-column: 1;
		-ms-grid-row: 4;
		-ms-grid-column: 1;
	}
}






/**PC画像が右******************************************************************************************************/

@media screen and (min-width: 1001px) {
	.grid-wrap2 {
		display: grid;
		display: -ms-grid; /*vendor prefixes*/

		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);

		-ms-grid-columns: (1fr)[2];
		-ms-grid-rows: (1fr)[3];

		/*grid-gap: 10px;*/
	}


	.grid-wrap2 &gt; *:nth-child(1) {
		grid-row: 1;
		grid-column: 1;
		

		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(2) {
		grid-row: 2;
		grid-column: 1;

		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(3) {
		grid-row: 3;
		grid-column: 1;

		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(4) {
		grid-row: 1;
		grid-column: 2;
		grid-row-end: 4;

		-ms-grid-row: 1;
		-ms-grid-column: 2;
		-ms-grid-row-span: 4;

	}

}

/*.grid-wrap2&gt;.item {border: 1px solid black;}*/
/*テスト見栄え確認用*/

/***SP画像が右******************************************************************************************************/
@media screen and (max-width: 1000px) {
	.grid-wrap2 {
		display: grid;display: -ms-grid; /*vendor prefixes*/
		grid-template-columns: 100%;
		-ms-grid-columns: 100%;/*vendor prefixes*/
		grid-gap: 10px;
	}

/*.a {grid-row-end: 2;}
.b{grid-row-end: 1;}
*/
	.grid-wrap2 &gt; *:nth-child(1) {
		grid-row: 1;
		grid-column: 1;

		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(2) {
		grid-row: 3;
		grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(3) {
		grid-row: 4;
		grid-column: 1;
		-ms-grid-row: 4;
		-ms-grid-column: 1;
	}

	.grid-wrap2 &gt; *:nth-child(4) {
		grid-row: 2;
		grid-column: 1;
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}






}



















































/************************************

ul {
  display:-webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

li {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 -1px -1px 0;
  border: 1px solid #000;
  background-color: #ccc;

  &amp;:nth-child(5) {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
    background-color: yellow;
  }
  
  &amp;:nth-child(10) {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
    background-color: red;
  }

}*/













</pre></body></html>