@charset "UTF-8";

/* =========================
   contents (recruit)
========================= */

.main .box{
  width: 90%;
  margin: 0 auto 2rem;
  border: 1px solid #7e1083;
  box-sizing: border-box;
}

.main p {
text-align: center;
font-size: var(--font-size-24);
font-weight: 700;
}

/* ===== box1 ===== */
.box1 dl { 
margin: 0;
background: #fff;
}

.box1 dt{
  background: #7e1083;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 1.2rem 1rem;
  font-size: var(--font-size-20);
  letter-spacing: .04em;
}

.box1 dd{
  margin: 0;
  text-align: center;
  padding: 2.4rem 1rem;
  font-size: var(--font-size-30);
  font-weight: 700;
}

/* ===== box2 frame ===== */
.box2{
  width: 90%;
  margin: 3rem auto 0;
  border: 1px solid #7e1083;
  box-sizing: border-box;
  padding: 3.2rem 0 2.6rem;
  background: #fff;
}

/* box2 heading (white label + purple line) */
.box2 h4{
 display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto 2.2rem;
  font-size: var(--font-size-34);
  font-weight: 700;
  text-align: center;
   padding: 0 4.5rem; 
}

.box2 h4::before,
.box2 h4::after{
  content:"";
  flex: 1;
  height: 1px;
  background: #7e1083;
}

/* ===== box2 rows (ul) ===== */
.box2 ul {
  width: 88%;
  margin: 0 auto 1.2rem;
  padding: 0;
  list-style: none;
background-color: #f7f7f7!important;
  display: flex;    
  align-items: flex-start;
  gap: 0;
    font-size: var(--font-size-20);
}

.box2 ul:last-of-type{ margin-bottom: 0; }

/* left label */
.box2 .sub{
  flex: 0 0 10rem;
  font-weight: 700;
  padding: 1.1rem 1.2rem;
  border-radius: .25rem 0 0 .25rem;
  box-sizing: border-box;
}

/* right content */
.box2 .content{
  flex: 1 1 auto;
  padding: 1.1rem 1.4rem;
  border-radius: 0 .25rem .25rem 0;
  box-sizing: border-box;
}

/* dl blocks inside content */
.box2 .content dl{
  padding: .6rem 0;
  border-bottom: 1px solid #e6e6e6;
}

.box2 .content dl:first-child{
  padding-top: 0;
}



.box2 .content dt{
  font-weight: 700;
  margin: 0 0 .4rem;
}

.box2 .content dd{
  margin: 0 0 .35rem;
  line-height: 1.85;
  display: list-item;
  list-style-type: square;
}

.box2 .content dd:last-child{ margin-bottom: 0; }

.box2 .content p{
  margin: 0;
  font-size: var(--font-size-20);
  line-height: 1.85;
}

/* ===== consul (same as top.css) ===== */
/* 見た目を変えないため中身は触らず、外側の配置だけ */
#contents .consul{
  width: 90%;
  margin: 4rem auto 0;
}

/* 応募フォームボタン行を中央寄せ（レイアウトだけ） */
#contents .consul dd:last-child{
  text-align: center;
}

.consul .btn a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .85rem 1rem;
    font-weight: 800;
    border-radius: .15rem;
    width: min(24rem, 100%);
    color: #fff;
    margin: 0 auto;
}
.consul p {
    padding: 0 1.4rem 0;
    margin: 0;
    text-align: center;
    color: #7e1083;
    font-weight: 700;
    font-size: var(--font-size-24);
}
.consul .ulred {
color: #c10d23;
text-decoration: underline;
}
.consul .ulred:hover {
text-decoration: none;
}


/* ===== responsive ===== */
@media (max-width: 768px){



  .subject{ padding: 4rem 0 3rem; }

  .main h3{ margin-bottom: 2.6rem; }

  .box2 ul{
    flex-direction: column;
  }

  .box2 .sub{
    flex: none;
    width: 100%;
    border-radius: .25rem .25rem 0 0;
  }

  .box2 .content{
    border-radius: 0 0 .25rem .25rem;
  }

  .box2 h4{
    width: 16rem;
  }

  .box2 h4::before{
    width: 92vw;
  }
}

@media (max-width: 520px){
.main .box{
  width: 100%;
  }
.box2 h4 {
padding: 0;
}
#contents .consul{
  width: 100%;
  }
.consul dl dd {
padding: 1rem 0rem;
}  
.consul .btn a {
width: 90%;
}

}