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

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

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




.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;
}


/*----------------------------
万能型A
-----------------------------*/


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

#mainimage.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;
}

/*3分割*/


.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 .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;
}



@media screen and (max-width: 768px) {

#mainimage.askew1 {
    background-attachment: scroll;
    background-position: center 112px;
    background-size: 106%;
    min-width: 640px;
    height:auto;
}

	.askew1 .catch {
	top:0!important;
	margin-top:30%;
}



}


@media screen and (max-width: 600px) {

#mainimage.askew1 {
        background-attachment: scroll;
    background-position: center 87px;
    background-size: 106%;
    min-width: 320px;
}
}
	


/*----------------------------
万能型B
-----------------------------*/


/* カバー右画像 */

#mainimage.askew2 {
	background: url(../img/top/mainimage2.jpg) 40vw center;
	background-size: 65%;
}

/* キャッチ */
.askew2 .askew-area .catch p {
	font-size: 2.2vw;
	line-height: 1.4em;
	color: #FFF;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
}


@media screen and (max-width: 768px) {
#mainimage.askew2 {
    background-attachment: scroll;
    background-position: 100% 100%;
    margin-top: 112px;
    min-width: 640px;
}
}

@media screen and (max-width: 600px) {

	#mainimage.askew2 {
    background-attachment: scroll;
    min-height: 135px;
    background-position: 100% 100%;
    margin-top: 90px;
    min-width: 320px;
    background-size: 68%;
}

.askew2 .askew-area .catch p { /* 調整必要 */
	font-size: 3vw;
	padding-left:1em;
}

}




/* カバー左背景色 */

.askew2 .askew-area {

/* グリーン 
background: #2e6532;
*/

/* グレー
background: #394141;
*/

/* ピンク  */
background: #de86a0;


/* ブラック 
background: #292929;
	*/
	
/* ブルー 
background: #204092;
*/
}