@charset "utf-8";

h1 {
  font-size: clamp(1rem, 0.6761rem + 1.3289vw, 1.5rem);
  text-align: center;
  font-weight: bold;
  margin-top: 60px;
}

h1 span {
  display: block;
  font-size: clamp(0.6875rem, 0.3651rem + 1.3228vw, 1rem);
  color: var(--main-color);
  margin-bottom: 4px;
}

h2 {
  font-size: clamp(1rem, 0.6761rem + 1.3289vw, 1.5rem);
  text-align: center;
  font-weight: bold;
  margin-bottom: clamp(2.5rem, 0.8804rem + 6.6445vw, 5rem);
}

h2 span {
  display: block;
  font-size: clamp(0.6875rem, 0.3651rem + 1.3228vw, 1rem);
  color: var(--main-color);
  margin-bottom: 4px;
}

.shadow-wrapper {
  background-color: #fff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  padding: 5%;
  font-weight: bold;

}

main ul li {
  padding-left: 20px;
  margin-bottom: 8px;
  position: relative;
}

main ul li:before {
  content: '●';
  color: var(--main-color);
  position: absolute;
  left: 0;
}

main dl {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  row-gap: 8px;
}

main dl dt {
  flex-basis: 20%;
  color: var(--main-color);
}

main dl dd {
  flex-basis: 78%;
  margin-bottom: 0;
}

main img {
  width: 100%;
}

/* 理事長挨拶 */
#message {
  margin-top: 60px;
}

#message .cc {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: clamp(1.4375rem, 1.1541rem + 1.1628vw, 1.875rem);
  line-height: 1.5;
  margin: 20px 0;
}

#message .cc+p {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: clamp(1.125rem, 0.8821rem + 0.9967vw, 1.5rem);
}

#message .cc+p span {
  display: block;
  font-size: clamp(0.8125rem, 0.6505rem + 0.6645vw, 1.0625rem);
}

.about1 {
  margin-bottom: 40px;
}

.about2 {
  margin-top: 40px;
}

@media screen and (min-width:992px) {

  #message {
    margin-top: 80px;
  }

  #message .pc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  #message .pc-grid .about1 {
    margin-right: -30px;
  }

  #message .pc-grid .shadow-wrapper {
    margin-left: -30px;
    margin-top: 50px;
    padding: 30px 0px 30px 80px;
  }

  #message .pc-grid-r {
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    margin-top: 100px;
  }

  #message .pc-grid-r .about2 {
    order: 2;
    margin-top: 0;
  }
}

/* 法人理念 */

#philosophy {
  margin-top: 60px;
}

#philosophy .about3,
#philosophy .about4 {
  margin-bottom: 20px;
}

@media screen and (min-width:992px) {

  #philosophy {
    margin-top: 160px;
  }

  #philosophy .pc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-template-areas:
      "img1 img1"
      "p img2"
  }

  .about4 {
    grid-area: img1;
    padding: 0 50px;
    margin-bottom: 0;
  }

  .about3 {
    grid-area: img2;
    margin-left: -70px;
    margin-bottom: 0;
  }

  #philosophy .shadow-wrapper {
    grid-area: p;
    margin-right: -70px;
    margin-top: 45%;
  }
}


/* 行動指針 */

#guidelines {
  margin-top: 60px;
  font-weight: bold;
}

@media screen and (min-width:992px) {

  #guidelines {
    margin-top: 160px;
  }

}

/* 法人概要 */

#profile {
  margin-top: 60px;
}

.about5 {
  display: block;
  margin-bottom: 40px;
}

@media screen and (min-width:992px) {

  #profile {
    margin-top: 160px;
  }

  #profile .pc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .about5 {
    margin-bottom: 0;
    margin-right: -50px;
  }

  #profile .shadow-wrapper {
    padding: 40px;
    margin-left: -70px;
    margin-top: 15%;
  }
}

/* 沿革 */

#history {
  margin-top: 60px;
}

#history dl {
  font-size: clamp(0.6875rem, 0.4446rem + 0.9967vw, 1.0625rem);
  font-weight: bold;
}

#history dd p {
  display: flex;
  gap: 1em;
  margin-bottom: 8px;
}

#history dd p span {
  display: inline-block;
  flex-shrink: 0;
  width: 3em;
}

@media screen and (min-width:992px) {

  #history {
    margin-top: 160px;
  }

}

/* 法人の取り組み */

#effort {
  margin-top: 60px;
}

#effort h3 {
  font-size: clamp(1rem, 0.6761rem + 1.3289vw, 1.5rem);
  color: var(--main-color);
  font-weight: bold;
  padding-bottom: 8px;
  border-bottom: var(--font-color) 1px solid;
  margin-bottom: 20px;
}

#effort .shadow-wrapper {
  margin: 40px 0;
}

@media screen and (min-width:992px) {

  #effort {
    margin-top: 160px;
  }

  #effort h3 {
    margin-bottom: 40px;
  }

  #effort .pc-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: start;
  }

  #effort .pc-grid .grid-img {
    order: 2;
    margin-left: -30px;
  }

  #effort .shadow-wrapper {
    margin-right: -30px;
    margin-top: 50px;
    margin-bottom: 80px;
    z-index: 2;
  }

}