@import "fonts.css";
@import "common.css";



/* HOME */
.main_visual{
  width: 100%;
}

.banner{
  z-index: 1;
  position: absolute;
  width: 23%;
  margin-top: 30%;
  margin-left: 70%;
}

.special_info{
  position: relative;
  width: 100%;
  padding-top: 30vw;
  background-color: #ffcd00;
}

@media screen and (min-width:480px) {
  .special_info{
    padding-top: 20vw;
  }
}

.special_comment{
  position: absolute;
  width: 100%;
  top: 15%;
  text-align: center;
}

.special_comment a{
  font-family: "Yu Mincho", "YuMincho";
  font-weight: bold;
  font-size: 3.5vw;
  text-decoration: underline;
}

@media screen and (min-width:480px) {
  .special_comment a{
    font-size: 3vw;
  }
}

.special_mention{
  width: 100%;
}

.news_topic_title{
  position: absolute;
  width: 21%;
  top: 4%;
  left: 0;
  right: 0;
  margin: auto;
}

.news_text{
  position: absolute;
  width: 80%;
  top: 13%;
  left: 0;
  right: 0;
  margin: auto;
}

@media screen and (min-width:480px) {
  .news_text{
    width: 52%;
    top: 14%;
  }
}

.special_comment{
  position: absolute;
  width: 100%;
  top: 36%;
  text-align: center;
}

@media screen and (min-width:480px) {
  .special_comment{
    top: 32%;
  }
}

.special_comment a{
  font-family: "Yu Mincho", "YuMincho";
  font-weight: bold;
  text-decoration: underline;
  font-size: 3.5vw;
  color: black;
  padding-bottom: 1.5vw;
}

@media screen and (min-width:480px) {
  .special_comment a{
    font-size: 2.5vw;
    line-height: 4vw;
  }
}

.special_comment a:hover{
  color: #00ffb8;
}

/* スケッチ */
.sketch11{
  position: absolute;
  width: 8%;
  top: 7%;
  left: 15%;
}

.sketch12{
  position: absolute;
  width: 14%;
  top: 5%;
  right: 12%;
}