/*@font-face {
  font-family: "NotoSansJP_Bold";
  src: url("../fonts/NotoSansJP_Bold.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP_Regular";
  src: url("../fonts/NotoSansJP_Regular.otf");
  font-weight: normal;
  font-style: normal;
}*/
body {
  background: url("../images/bg_coming_soon.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  padding: 0;
  margin: 0;
  position: relative;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
}
.container {
  width: 1170px;
  margin: auto;
  max-width: 100%;
}
.container .col_left {
  width: 60%;
  float: left;
  padding-top: 100px;
}
.container .col_left p {  
  color: #4f4f50;
  margin: 0;
}
.container .col_left .logo {
    width: 240px;
    margin-bottom: 20px;
    display: inline-block;
    vertical-align: top;
}
a,
.container .col_left h2 {  
  color: #00adee;
}
.container .col_right {
  width: 40%;
  float: right;
}
.container .col_right .image_maintaice img {
  position: absolute;
  right: 10%;
}

.container .col_right .image_maintaice {
  width: 170%;
  position: relative;
  padding-top: 27%;
}

.contents-error .errorcode h2 {
  font-size: 160px;
  margin: 0 0 20px;
}

@media (max-width: 1199px) {
    .container .col_left {
        width: 100%;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    .container .col_right {
        width: 100% !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 414px) {
  body {
    background: url("../images/bg_coming_soon_sp.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left 0px bottom -260px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background: url("../images/bg_coming_soon_sp.svg");
    background-repeat: no-repeat;
    background-size: 1100px;
    background-position: left 0px bottom -740px;
  }
}
@media only screen and (width: 1024px) {
  body {
    background-size: 1500px;
    background-position: left 0px bottom -1065px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1680px) {
  .container .col_right .image_maintaice {
    width: 140%;
    padding-top: 23%;
  }
}
@media only screen and (min-width: 1360px) and (max-width: 1366px) {
  .container .col_right .image_maintaice {
    width: 115%;
    padding-top: 15%;
  }
}
@media only screen and (width: 1768px) {
  .container .col_right .image_maintaice {
    width: 145%;
  }
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
  .container .col_right .image_maintaice {
    width: auto !important;
    padding-top: 5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .container .col_right .image_maintaice {
    width: auto !important;
    padding-top: 0 !important;
  }
}

@media only screen and (min-width: 1360px) and (max-width: 1366px) {
  .container .col_right .image_maintaice img {
    right: 15%;
  }
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
  .container .col_right .image_maintaice img {
    position: relative;
    width: 100%;
    padding-top: 63px;
    padding-bottom: 20px;
    right: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .container .col_right .image_maintaice img {
    position: absolute;
    right: 17%;
    width: 62%;
    top: 258px;
  }
}
@media only screen and (width: 1024px) {
  .container .col_right .image_maintaice img {
    top: 377px;
    width: 65%;
  }
}