/* 
 * ------- setup ---------------------
 */

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');

/*===========================
top
===========================*/


/*----------------------------
visual-cut
-----------------------------*/

.askew1 {
	/* 背景墨色 */
	background: #292929;
	position: relative;
}

.askew1 .catch {
	left: 58%;
	top:32%;
	line-height: 1.8em;
	position: absolute;
	font-size: 4vw;
	color: #FFF;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
}

@media only screen and (max-width: 768px) {
		.askew1 .catch {
	top:0;
	margin-top:30%;
}
}


.catch .catch-color {
	color: #9e8318;
	font-size:1.4em;
}

.catch .catch-color-org {
	color: #ee781e;
}


.catch .smaller {
	font-size: 0.4em;
	display: inline-block;
	letter-spacing: 0.1em;
}


.askew1 .askew-area {
	width: 75%;
	height: 42vw;
	left: 0;
	top:0;
	position: relative;
	z-index: 0;
}


.askew1 .askew-area .askew-bg1 {
	position: absolute;
	height: 100%;
	width: 25%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #FFF;
	z-index: 2;
	left:-2.6%;
}


.askew1 .askew-area .askew-bg2 {
	position: absolute;
	height: 100%;
	width: 37.5%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #eee;
		left:12.5%;
	z-index: 1;
}

.askew1 .askew-area .askew-bg3 {
	position: absolute;
	height: 100%;
	width: 37.5%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #ccc;
	left:37.5%;
	z-index: 0;
}




.askew1 .askew-area .askew-bg1 .bg {
	  width:150%;
  height:100%;
		background: url(../img/top/skew_bg01.jpg);
	background-position: -7vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}

.askew1 .askew-area .askew-bg2 .bg {
	  width:150%;
  height:100%;
		background: url(../img/top/skew_bg02.jpg);
	background-position: -7vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}

.askew1 .askew-area .askew-bg3 .bg {
	  width:150%;
  height:100%;
		background: url(../img/top/skew_bg03.jpg);
	background-position: -5vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}


/*2分割*/


.askew1 .askew-area2 {
	width: 75%;
	height: 42vw;
	left: 0;
	top:0;
	position: relative;
	z-index: 0;
}


.askew1 .askew-area2 .askew-bg1 {
	position: absolute;
	height: 100%;
	width: 38.75%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #FFF;
	z-index: 2;
	left:-2.5%;
}


.askew1 .askew-area2 .askew-bg2 {
	position: absolute;
	height: 100%;
	width: 50%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #eee;
		left:25%;
	z-index: 1;
}


.askew1 .askew-area2 .askew-bg1 .bg {
	  width:160%;
  height:100%;
		background: url(../img/top/skew_bg01.jpg);
	background-position: -8vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}

.askew1 .askew-area2 .askew-bg2 .bg {
	  width:130%;
  height:100%;
		background: url(../img/top/skew_bg02.jpg);
	background-position: -1vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}



/*画像一枚*/

.askew1 .askew-area3 {
	width: 75%;
	height: 42vw;
	left: 0;
	top:0;
	position: relative;
	z-index: 0;
}


.askew1 .askew-area3 .askew-bg1 {
	position: absolute;
	height: 100%;
	width: 77.5%;
	transform: skewX(-18deg);
		overflow: hidden;
	background: #FFF;
	z-index: 2;
	left:-2.5%;
}




.askew1 .askew-area3 .askew-bg1 .bg {
	  width:130%;
  height:100%;
		background: url(../img/top/skew_bg01.jpg);
	background-position: -5vw 50%;
	transform: skewX(18deg);
	background-size: cover;
}