@charset "UTF-8";
#topic {
  margin-top: 100px;
  background: url("images/topic.png") no-repeat center center / cover;
}
#topic .left {
  margin-left: 200px;
}
#topic .left .pin-blue {
  display: inline-block;
  background: #7FCDD7;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: 20px;
}
#topic .left .pin-green {
  display: inline-block;
  background: #328e29;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: 20px;
}
#topic .left .english {
  display: inline-block;
  margin-left: 10px;
}
#topic .right {
  margin-right: 200px;
}
#topic .right {
  display: flex; /* 横並びに配置 */
  justify-content: flex-end; /* 左端に揃える */
}
#topic .right img {
  width: 300px;
  height: auto;
  margin-top: -100px;
}
/* ---------------------footer*/
footer {
  margin-top: 200px;
}
/* ---------------------main*/
#notice .inner {
  width: 70%;
  background: #7FCDD7;
  padding: 50px 50px 100px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#notice .title {
  font-size: 2rem;
  line-height: 1;
  display: inline;
  position: relative;
  top: -10px;
}
#notice p {
  text-align: left;
}
#notice .date {
  font-size: 1.5rem;
}
#notice .pin {
  display: inline-block;
  background: #328e29;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: -10px;
}
#notice a {
  color: #333;
}
#notice hr {
  border: 0.1px solid #222;
  margin: 30px auto;
}
/*-----------------------------------
タブレット
-----------------------------------*/
@media screen and (max-width: 768px) {
	  #topic {
    margin-top: 80px;
  }
  #topic .left {
    margin-left: 100px;
  }
  #topic .right {
    margin-right: 100px;
  }
  #topic .right img {
    width: 200px;
    margin-top: -100px;
  }
  /*-----------------------------------
スマホ
-----------------------------------*/
  @media screen and (max-width: 414px) {
    #topic {
      margin-top: 60px;
    }
    #topic .left {
      margin-left: 50px;
    }
    #topic .left .pin-blue {
      width: 10px;
      height: 10px;
      top: 15px;
    }
    #topic .left .pin-green {
      width: 10px;
      height: 10px;
      top: 15px;
    }
    #topic .left .english {
      margin-left: 10px;
    }
    #topic .right {
      margin-right: 50px;
    }
    #topic .right img {
      width: 150px;
      margin-top: -60px;
    }
    /* ---------------------footer*/
    footer {
      margin-top: 100px;
    }
    /* ---------------------main*/
    #notice .inner {
      padding: 10px;;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
  }
    }
    #notice .title {
      font-size: 3.5vw;
    }
    #notice .item-blk {
      padding: 20px;
      margin: 30px 5px;
    }
    #notice .date {
      font-size: 3vw;
    }
    #notice .pin {
      width: 10px;
      height: 10px;
      top: -10px;
    }
    #notice hr {
      margin: 10px auto;
    }