@charset "UTF-8";

body {
    margin: 0;
	font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

.hero {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto;
    grid-gap: 0;
    justify-content: center;

  }

.box1 {
    position: relative;
    background-image: url(image/hoshizora.png);
    background-position: bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.box2 {
    position: relative;
    background-color: #0c043a;
}

.jump {
    font-size: 20px;
    position: absolute;
    bottom: 5%;
    right: 5%;
    color:#b33535;
    width:100%;
    text-align: right;
}

.title-box {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 50;
    width: 100%;
    font-size: 50px;
    font-family: GSanSerif-B;
    text-align:center;
    color: #fff;
}

.manten {
    position: absolute;
    bottom: 3%;
    right: 3%;
    background-color: rgba(255,255,255,0.4);
    padding: 0 20px;
}

.manten p {
    color: #1b0b3f;
    font-size: 16px;
}

@media screen and (max-width: 980px) {
  .hero {
    display: grid;
    grid-template-columns: 50% 50%;
  }
}