@charset "UTF-8";
/*----------------------------------------
  ●保護者・学校関係者さまへ
----------------------------------------*/
.p-message {
  overflow: hidden;
  width: 100%;
  padding: 40px 0 min(120px, 20vw);
  background-color: #fff;
}
.p-message h1 {
  width: 100%;
  margin: 70px auto;
  display: flex;
  justify-content: center; /* 横方向中央 */
}
.p-message h1 img {
  width: 100%;
  max-width: 450px;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 600px){
  .p-message h1 img {
    width: calc(100% - 40px);
  }
}
#message_1{
  background-color: #BDB3D3;
  border-radius: 50px 50px 0 0;
}
.message_lead {
  padding: 70px 0;
}
.message_lead img{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.message_lead p,
.message_summary p{
  font-weight: bold;
  font-size: max(1rem, 14px);
  font-weight: 600;
  line-height: 1.7;
  color: #0A1E50;
}
/*このサイトの特徴*/
.message_exposition{
  background-color: #FFF;
  border-radius: 50px 50px 0 0;
  padding: 70px 0;
}
.message_exposition h2 {
  display: flex;
  justify-content: center; /* 横方向中央 */
}
.message_exposition img{
  width: 100%;
  height: auto;
}
.message_exposition ul{
  margin: 40px 20px;
}
.message_exposition ul li > div{
  background-color: #FFF;
  border: 4px solid #0A1E50;
  border-radius: 15px;
  box-shadow: 10px 10px 0 #0A1E50; /* 影 */
  padding: 20px 40px 40px;
  margin-bottom: 40px;
}
.message_exposition ul li:nth-of-type(1) > div{
  transform: rotate(3.6deg);
}
.message_exposition ul li:nth-of-type(1) > div > div{
  transform: rotate(-3.6deg);
}
.message_exposition ul li:nth-of-type(2) > div{
  transform: rotate(-3.6deg);
}
.message_exposition ul li:nth-of-type(2) > div > div{
  transform: rotate(3.6deg);
}
.message_exposition ul li:nth-of-type(3) > div{
  transform: rotate(3.6deg);
  margin-bottom: 100px;
}
.message_exposition ul li:nth-of-type(3) > div > div{
  transform: rotate(-3.6deg);
}
@media screen and (max-width: 600px){
  .message_exposition ul{
    margin: 40px 0;
  }
  .message_exposition ul li > div{
    box-shadow: 2dvw 2dvw 0 #0A1E50; /* 影 */
    padding: 3dvw 6dvw 6dvw;
    margin-bottom: 10dvw;
  }
  .message_exposition ul li:nth-of-type(3) > div{
    margin-bottom: 16dvw;
  }
}
.message_exposition ul li p{
  font-weight: bold;
  font-size: max(1.15rem, 14px);
  font-weight: 600;
  line-height: 1.7;
  color: #0A1E50;
}
.message_exposition ul li p span{
  font-weight: bold;
  font-size: max(1.15rem, 14px);
  font-weight: 600;
  line-height: 1.7;
  color: #0063D6;
}
.message_btn {
  font-size: max(2rem , 16px);
  font-weight: bold;
  flex-basis: auto;
  width: 100%;
  padding-top: 4px;
  border: solid 2px #0a1e50;
  border-radius: 20px;
  margin: 12px auto 0;
  color: #FFFFFF;
  background-color: #0063D6;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}
.message_btn:hover {
  background-color: #E04826;
  color: #FFFFFF;
}
.message_summary h3{ 
  position: relative;
  width: 100%;
  height: min(53px , 8.5dvw);
  line-height: min(53px , 8.5dvw);
  background-color: #0A1E50;
  color: #fff; /* 白文字 */
  font-size: min(30px , 5dvw);
  font-weight: bold;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: min(50px , 8dvw) auto;
}
.message_summary h3::after {
  content: "";
  position: absolute;
  bottom: -14px; /* 吹き出しの下に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12.5px solid transparent; /* 横25pxの半分 */
  border-right: 12.5px solid transparent;
  border-top: 15px solid #0A1E50; /* 高さ15px、黒色 */
}