h2{
  position: relative;
  padding: .5rem 5rem;
  width: max-content;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: var(--main-color);
  display: block;
  text-align: center; 
  margin: 3rem auto;
  margin-inline: auto;
}
h2::before,
h2::after {
  content:'';
  position: absolute;
  width: 30px;
  height: 30px;
}
h2::before {
  border-left: solid 1px var(--main-color);
  border-top: solid 1px var(--main-color);
  top:0;
  left: 0;
}
h2::after {
  border-right: solid 1px var(--main-color);
  border-bottom: solid 1px var(--main-color);
  bottom:0;
  right: 0;
}
h2 span:before,
h2 span:after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}
h2 span:before {
  border-left: solid 1px var(--main-color);
  top:2px;
  left: 2px;
}
h2 span:after {
  border-right: solid 1px var(--main-color);
  bottom:2px;
  right: 2px;
}
.greeting h3,
.director h3,
.history h3,
.bylaws h3,
.report h3{
  position: relative;
  padding: .5rem 3rem;
  outline: 1px solid var(--main-color);
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--main-color);
  max-width: max-content;
  text-align: center; 
  margin: 1.5rem auto 4rem;
  margin-inline: auto;
}
.greeting h3::before,
.director h3::before,
.history h3::before,
.bylaws h3::before,
.report h3::before{
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #eee9e6;
  z-index:-999;
}
ol{
  width: clamp(48rem, 90%, 68.75rem);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  li{
    padding: 0 2rem;
    a{
      color: var(--main-color);
      text-decoration: underline;
    }
  }
}
@media (max-width: 767px){
  h2{
    font-size: 1.5rem;
    padding: .5rem 2.5rem;
  }
  ol{
    width: 90%;
    display: block;
    margin-bottom: 3rem;
  }
}


.about{
  background-image: linear-gradient(#ffffff, #ffffff 25%, rgba(236,238,230,1) 25% 100%);
  .about__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
    padding-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,15rem);
    div{
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      margin-right: 4rem;
      h3{
        font-size: 2rem;
        letter-spacing: .3rem;
        display: flex;
        flex-direction: column;
      }
      h3::after{
        display: block;
        content: "";
        width: 7.5rem;
        height: 1px;
        background: var(--main-color);
        margin: 1rem 0 2rem;
      }
      p{
        font-size: 1.1rem;
        line-height: 2;
        text-align: justify;
        margin-bottom: 1rem;
      }
    }
    figure{
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      img{
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      }
    }
  }
}
@media (max-width: 767px){
  .about{
    background-image: none;
    background-color: rgba(236,238,230,1);
    padding: 3rem 0;
    .about__contents{
      width: 90%;
      display: block;
      padding-top: 0;
      div{
        margin-right: 0;
        h2{
          font-size: 1.5rem;
          letter-spacing: .2rem;

          br{
          display: none;
          }
        }
      }
    }
  }
}

@media (max-width: 479px){
  .about{
    padding: 2rem 0;
    .about__contents{
      div{
        h2{
          font-size: 1.25rem;
        }
        p{
          font-size: 1rem;
          line-height: 1.7;
        }
      }
    }
  }
}

.greeting{
  padding: 4rem 0;
  .greeting__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 10rem auto;
    gap: 4rem;
    h4{
      font-size: 1.3rem;
      border-bottom: 1px solid var(--main-color);
      padding-bottom: .5rem;
      margin-bottom: .5rem;
    }
    p{
      text-align: justify;
      span{
        display: block;
        text-align: right;
      }
    }
  }
}
@media (max-width: 767px){
  .greeting{
    padding: 2rem 0;
    .greeting__contents{
      width: 90%;
      grid-template-columns: 1fr;
    }
  }
}

.director{
  padding: 4rem 0;
  .director__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
  }
}
@media (max-width: 767px){
  .director{
    padding: 2rem 0;
    .director__contents{
      width: 90%;
    }
  }
}

.history{
  padding: 4rem 0;
  dl{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto 4rem;
    dt{
      position: relative;
      padding: .6rem 2rem;
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      color: var(--main-color);
      display: block;
      margin: 2rem auto;
      margin-inline: auto;
      width: max-content;
    }
    dt::before {
      content:'';
      position: absolute;
      top: 50%;
      right: -12px;
      background: var(--main-color);
      width: 52px;
      height: 1px;
      rotate: 60deg;
      display: inline-block;
    }
    dt::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 6px;
      background: var(--main-color);
      width: 60%;
      height: 1px;
    }
    dd{
      line-height: 1.8;
      text-align: justify;
    }
  }
  table{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
    border-collapse: collapse;
    th,td{
      padding: .5rem 1rem;
      text-align: center;
      border-bottom: 1px solid var(--main-color);
    }
    tr:nth-of-type(even){
      background: #f7f5f4;
    }
  }
}
@media (max-width: 767px){
  .history{
    padding: 2rem 0;
    dl{
      width: 90%;
      margin: 0 auto 2rem;
    }
    table{
      width: 90%;
      font-size: .9rem;
      th,td{
        padding: .5rem;
      }
    }
  }
}

.bylaws{
  padding: 4rem 0;
  .bylaws__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
    p{
      text-align: center;
      margin-bottom: 2rem;
    }
    ul{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 2rem;
      li{
        border-bottom: 1px solid var(--main-color);
        padding: .5rem 1.5rem;
        a{
          color: var(--main-color);
        }
      }
    }
  }
}
@media (max-width: 767px){
  .bylaws{
    padding: 2rem 0;
    .bylaws__contents{
      width: 90%;
    }
  }
}

.report{
  padding: 4rem 0;
  .report__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
    p{
      text-align: center;
      margin-bottom: 2rem;
    }
    ul{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 2rem;
      li{
        border-bottom: 1px solid var(--main-color);
        padding: .5rem 1.5rem;
        a{
          color: var(--main-color);
        }
      }
    }
  }
}
@media (max-width: 767px){
  .report{
    padding: 2rem 0;
    .report__contents{
      width: 90%;
    }
  }
}