/*
 * ------- 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% 95px;
    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: 2.5vw;
    padding-left: 1.5em;
  }
}

/* カバー左背景色 */

.askew2 .askew-area {
  /* グリーン
background: #2e6532;
*/

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

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

  /* ブラック
background: #292929;
	*/

  /* ブルー */
  background: #204092;
}