#headline1{
  /*font-size: clamp(16px, 2vw, 30px);*/
  font-size: clamp(16px, 2vw, 24px);
  font-weight:normal;
  text-align: center;
  padding:0 20px;
  font-weight:200;
  color:var(--navi-color);
}


/* hero
---------------------------------------------------- */
#hero{
	background:#FFF;
  background:var(--grad-color);
	/*line-height: 1.0;*/
  /*font-size:0;*/
  /*border-bottom:1px solid var(--default-color);*/
  /*background-image:url(/img/herobackground.png);*/
  background-size:50%;
}

#hero .inner{
  display: flex;
  align-items:stretch;
  justify-content: space-between;
  gap:20px;
}

#hero .inner > div#hero-title{
  /*width:calc(100% - 320px);*/
  width:calc(85% - 20px);
}


#hero .inner > div#hero-image{
/*  display: flex;
  align-items: end;
  width:calc(50% - 40px);
*/}

/* バナー張り付け */
#hero div#hero-bana{
  display: flex;
  flex-direction: column;
  gap:30px;
  /*width:300px;*/
  width:25%;
}

#hero div#hero-bana img{
  width:100%;
  height:auto;
}

#hero img{
	width:100%;
  height:auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

#hero .kaisetu{
  padding:10px 20px;
  font-size:15px;
  font-weight: 300;
  line-height: 1.85;
  color:var(--navi-color);
  text-align: center;
  font-size: clamp(12px, 1vw, 15px);
}

#hero a{
    text-decoration: none;
}

#hero .button{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a67e34;
    background: linear-gradient(#d7132e,#7e1822);
    font-size: 18px;
    color: #FFF;
    height:60px;
    border-radius: 10px;
}

@media(max-width:1000px){

  #hero{
    height:48vw;
  }

}

@media(max-width:680px){

  #hero{
    height:auto;
  }

  #hero .inner{
    align-items: center;
    flex-direction: column;
  }

  #hero .inner > div#hero-title,
  #hero .inner > div#hero-image{
    width:100%;
  }

  #hero .inner > div#hero-title{  
    padding-top:40px;
  }


  #hero div#hero-bana{
      width:100%;
      max-width:320px;
      height:auto;
  }

}

@media(max-width:480px){

  #hero div#hero-bana{
      right:25%;
  }

}

/* 新着情報
---------------------------------------*/

.section-title {
  /*font-size: 1.4rem;*/
  font-weight: bold;
  /*color: var(--default-color);*/
  font-size: clamp(16px, 2vw, 24px);
  color:#555;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;
}


/* topics
----------------------------------------------------*/

#topics {
  list-style: none;
  padding:10px 20px;
  margin: 0 auto 50px;
  width:100%;
  height:250px;
  overflow: auto;
  background:#FFF;
  border-radius: 10px;
  /*outline:1px solid var(--default-color);*/
}

#topics li {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border-bottom: 1px solid #f4dce2;
  gap: 1rem;
  cursor: pointer;
  position:relative;
}

#topics .date {
  font-weight: bold;
  color: var(--default-color);;
  font-size: 1rem;
  min-width: 7rem;
}

#topics .text .title {
  font-weight: bold;
  color: var(--navi-color);
  margin: 0;
}

#topics .detail {
  word-wrap: break-word;
  white-space: pre-wrap;
  font-weight: 500;
  font-size:14px;
  color: #555;
  margin: 0;
}

#topics .extra{
  font-size: 0.8rem;
  color: #999;
  margin-top:0;
}

/* ################ 780px 以下 ###################### */
@media(max-width:780px){

  #topics{
    background:#FFFc;
    outline:none;
    overflow: auto;
    height:inherit;
  }


  #topics li {
    display:block;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #f4dce2;
    gap: 1rem;
    cursor: pointer;
    position:relative;
  }



}


/* バナー ------------------*/

#apply{
  padding-top:40px;
}


#apply a{
  display: block;
  width:300px;
  margin:0 auto;
}

#apply a img{
  width:100%;
  height:auto;
}