@charset "UTF-8";

#hero .bg img {
  width: 100%;
}

#hero .hero_sub {display: flex;}
#hero .hero_sub li{flex-direction: row; justify-content: space-between;
  width : -webkit-calc((100% - 20px) / 3) ;
  width : calc((100% - 20px) / 3) ;
  margin: 10px 10px 0 0;
}
#hero .hero_sub li:last-child{
  margin: 10px 0 0 0;}


#titleArea {
  padding: 110px 20px 60px;
}

#lead {
  padding: 0 20px 130px;
  line-height: 3.0;
  font-size: 2.1rem;
}

#plan .flex .doc,
#scene .flex .doc {
  margin-top: 20px;
}
#plan .flex .doc h3,
#scene .flex .doc h3 {
  margin-bottom: 3px;
  line-height: 1.1;
  color: #968c5f;
  font-size: 2.2rem;
}
#plan .flex .doc .date span,
#scene .flex .doc .date span {
  display: inline-block;
  background: #968c5f;
  padding: 4px 6px 1px;
  line-height: 1.1;
  color: #fff;
  font-size: 1.8rem;
}
#plan .flex .doc .tx1,
#scene .flex .doc .tx1 {
  margin-top: 0.4em;
  font-size: 1.8rem;
}

/* @media : PC
---------------------------------------- */
/* @media : SP
---------------------------------------- */
@media screen and (max-width: 768px) {
  #titleArea {
    padding: 30px 20px 20px;
  }

  #lead {
    padding-bottom: 30px;
    line-height: 1.8;
  }
}
@media screen and (max-width: 480px) {
  #titleArea h1 {
    letter-spacing: 0.15em;
    font-size: 4rem;
  }

  #titleArea h1 span.s1 {
    margin-bottom: 10px;
    font-size: 2rem;
  }

  #lead {
    line-height: 1.5;
    text-align: left;
    font-size: 1.6rem;
  }
  #lead br {
    display: none;
  }

  #plan .flex .doc h3,
  #scene .flex .doc h3 {
    font-size: 1.8rem;
  }
  #plan .flex .doc .date span,
  #scene .flex .doc .date span {
    font-size: 1.5rem;
  }
  #plan .flex .doc .tx1,
  #scene .flex .doc .tx1 {
    font-size: 1.6rem;
  }
}