.contents {
  margin: 100px auto;
  max-width: 1200px;
  padding: 0 20px;
} 

b {
  color: var(--main-color);
}

.br {
  display: inline-block;
}

h2 {
  margin-bottom: 1em;
}
p {
  max-width: 40em;
  margin: 0 auto;
  letter-spacing: 1px;
  line-height: 2;
}

/*-------------------------------

  about

-------------------------------*/
.about img {
  max-width: 640px;
  margin: 0 auto;
}

.about p {
  padding: 1em 0;
  margin: 0 auto;
}

@media(min-width:700px){
  .about .inner {
    display: flex;
    align-items: flex-start;
  }

  .about img {
    width: 45%;
  }

  .about p {
    padding: 0 20px;
  }
}

/*-------------------------------

  detail period

-------------------------------*/
.detail h2::before,.period h2::before {
  margin-top: 8px;
}

.detail-list {
  max-width: 700px;
}

.detail-list > li,.detail-list > div {
  border-bottom: solid black 1px;
  padding: 20px 10px;
}

.detail-list > li:first-child,.detail-list > div:first-child {
  border-top: solid black 1px;
}

.detail .detail-list > li h3 {
  color: var(--main-color);
}

.detail-list .date {
  color: #885C5D;
  margin: 16px 0;
}

.detail .txt li {
  list-style-type: disc;
  line-height: 1.4;
  margin: 0.5em 0 0.5em 1em;
}

@media(min-width:750px){
  .detail,.period {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .detail h2,.period h2 {
    margin: 0;
    width: 45%;
    flex-direction: row;
    align-items: flex-start;
    min-width: 312px;
  }
}

.period dl {
  max-width: 550px;
  margin: 0 auto;
}

.period .detail-list div dt {
  color: var(--main-color);
  font-weight: bold;
  margin-bottom: 1em;
}

.period .detail-list div dd {
  line-height: 1.8;
}

@media(min-width:500px){
  .period .detail-list div {
    display: flex;
  }

  .period .detail-list div dt {
    width: 45%;
  }

  .period .detail-list div dd {
    width: 55%;
  }
}

/*-------------------------------

  contactform

-------------------------------*/
.contactform p,#confirm p {
  margin: 0 auto;
  max-width: 21em;
}

.contactform p a {
  color: black;
}

dl dt span.l_required {
    background: rgb(216, 1, 1);
    color: white;
    padding: 4px 8px;
    font-weight: normal;
    font-size: 14px;
    margin: 0 8px;
}
/*------------------------
　入力時の画面拡大を防ぐ
------------------------*/
input,
select,
textarea {
  font-size: 1rem;
}
/*------------------------
　小見出し
------------------------*/
.contactform dt {
  text-align: left;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 0.7em;
}

.contactform dl div {
  margin: 30px auto;
  max-width: 530px;
}
/*------------------------
　index.php
------------------------*/
/*--- 入力欄（氏名等） ---*/
.contactform dl input,
.contactform dl select {
  width: 80%;
  aspect-ratio: 9/2;
  max-width: 500px;
  max-height: 60px;
  border: var(--sub-color-darkblue), solid 1px;
  border-radius: 4px;
  padding-left: 1em;
}

.contactform dd {
  text-align: center;
}
/*--- 入力欄（応募内容） ---*/
.contactform dl textarea {
  width: 80%;
  height: 120px;
  border: var(--sub-color-darkblue), solid 1px;
  border-radius: 4px;
}

.contactform .btn-1 {
  margin: 0 auto;
  padding: 8px 16px;
  width: min(100%, 300px);
}

.contactform .btn-1::after,.submit_btn::after {
  rotate: -90deg;
}

.contactform button p::after {
  content: '!';
  width: 16px;
  height: 36px;
  rotate: 25deg;
  display: inline-block;
}

@media (min-width:600px) {
  .contactform dl div {
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin: 30px auto;
  }

  .contactform dt {
    flex-basis: 40%;
  }

  .contactform dd {
    flex-basis: 60%;
  }
}
/*--- 未入力時のエラー ---*/


input:invalid {
  border: 2px solid red;
  background-color: #ffecec;
}

input:focus:invalid {
  outline: none;
  box-shadow: 0 0 3px red;
}

/*------------------------
　confirm.php
------------------------*/
#confirm,#submit {
  padding: 0 20px;
  margin-top: 120px;
}

#confirm h2,#submit h2 {
  margin-top: 6em;
}

.form_list {
  margin: 30px auto;
  max-width: 825px;
}

.form_list div {
  margin: 1.5em 0;
}

#confirm dd {
  text-align: left;
  margin: 1em 0 1em 30px;
}

#confirm .btn_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  justify-content: center;
}

#confirm .return::after {
  rotate: 90deg;
}

#confirm .btn_wrapper .btn-1 {
  padding: 8px 16px;
}

@media (min-width: 500px) {
  .form_list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    margin: 30px auto;
  }
}

#submit p {
  margin: 0 auto 1em;
}

pre {
  text-align: left; 
  border: 1px solid black;
  white-space: pre-wrap;
}

#submit .btn-1 {
  margin: 1em auto;
  width: min(100%, 300px);
}

#submit .btn-1::after {
  rotate: -90deg;
}