#bulletinboard {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
  width: 100%;
  margin: 50px 0 0;
}

#bulletinboard > article:nth-of-type(1) { /* -- 共済たより */
  width: 291px; height: 177px;
  position: relative;
  background: url(../images/kouhou_bg.png) center center /cover no-repeat;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(1) {/* -- 市町村共済広報 いばらき共済 */
  display: block;
  width: 107px; height: 151px;
  position: absolute;
  top: 12px; left: 13px;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(1) img {
  width: 100%; height: 100%;
  border: solid 1px rgb(201, 201, 201);
}
#bulletinboard > article:nth-of-type(1) > p {
  position: absolute;
  top: 81px; left: 138px;
  margin: 0;
  font-size: 13px; line-height: 1.5;
}
#bulletinboard > article:nth-of-type(1) > p > a {
  text-decoration: underline;
  color: rgb(0, 87, 184);
}
#bulletinboard > article:nth-of-type(1) > p > a:hover {
  text-decoration: none;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(2) {/* -- バックナンバー */
  display: block;
  width: 110px; height: 24px;
  position: absolute;
  top: 136px; left: 151px;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(2) img {
  width: 100%; height: 100%;
}

#bulletinboard > article:nth-of-type(2) { /* -- 大洗温泉の宿 大洗 鷗松亭 */
  width: 291px; height: 177px;
}
#bulletinboard > article:nth-of-type(2) img {
  width: 100%; height: 100%;
}

#bulletinboard > article:nth-of-type(3) { /* -- 福利厚生倶楽部 */
  width: 291px; height: 177px;
  overflow: hidden;
  position: relative;
  background: url(../images/index/bulletinboard_03_1_pc.png) center center /cover no-repeat;
  border: solid 2px rgb(8, 90, 163);
}
#bulletinboard > article:nth-of-type(3) > menu {
  list-style: none;
  position: absolute;
  top: 89px; left: 8px;
  margin: 0; padding: 0;
}
#bulletinboard > article:nth-of-type(3) > menu > li {
  margin: 6px 0 0;
  font-size: 12px; line-height: 1;
}
#bulletinboard > article:nth-of-type(3) > menu > li:first-of-type {
  margin: 0;
}
#bulletinboard > article:nth-of-type(3) > menu > li > a {
  text-decoration: underline;
  color: rgb(0, 87, 184);
}
#bulletinboard > article:nth-of-type(3) > menu > li > a:hover {
  text-decoration: none;
}
#bulletinboard > article:nth-of-type(3) > a {
  display: block;
  width: 120px; height: 70px;
  position: absolute;
  top: 93px; left: 157px;
}
#bulletinboard > article:nth-of-type(3) > a img {
  width: 100%; height: 100%;
}
#bulletinboard > article:nth-of-type(3) > button {
  display: none;
}

#bulletinboard > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 291px; height: 177px;
}
#bulletinboard > div > a:nth-of-type(1) { /* -- MY HEALTH WEB */
  display: block;
  width: 291px; height: 120px;
}
#bulletinboard > div > a:nth-of-type(1) img {
  width: 100%; height: 100%;
}
#bulletinboard > div > a:nth-of-type(2) { /* -- 事務担当者ページ */
  display: block;
  width: 291px; height: 47px;
}
#bulletinboard > div > a:nth-of-type(2) img {
  width: 100%; height: 100%;
}

#bulletinboard > article:nth-of-type(4) { /* -- スライダー */
  width: 100%; height: 96px;
  box-sizing: border-box;
  position: relative;
  padding: 20px 27px;
  border: solid 1px rgb(201, 201, 201);
}
#bulletinboard > article:nth-of-type(4) .bx-wrapper {
  margin: 0 auto;
}
#bulletinboard > article:nth-of-type(4) .bx-wrapper .bx-next {
  width: 15px; height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  white-space: nowrap;
  text-indent: 100%;
  outline: 0;
  background: url(../images/scroll_right.png) center center /cover no-repeat;
}
#bulletinboard > article:nth-of-type(4) .bx-wrapper .bx-prev {
  width: 15px; height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  text-indent: 100%;
  outline: 0;
  background: url(../images/scroll_left.png) center center /cover no-repeat;
}





@media screen and (max-width: 700px) {

#bulletinboard {
  gap: calc(30 / 720 * 100vw);
  margin: calc(36 / 720 * 100vw) 0 0;
}

#bulletinboard > article:nth-of-type(1) { /* -- 共済たより */
  width: 100%; height: calc(194 / 720 * 100vw);
  background: url(../images/sp/kouhou_bg.png) center center /cover no-repeat;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(1) {/* -- 市町村共済広報 いばらき共済 */
  width: calc(117 / 720 * 100vw); height: calc(164 / 720 * 100vw);
  top: calc(14 / 720 * 100vw); left: calc(44 / 720 * 100vw);
}
#bulletinboard > article:nth-of-type(1) > p {
  top: calc(83 / 720 * 100vw); left: calc(190 / 720 * 100vw);
  font-size: calc(15 / 720 * 100vw); line-height: 1;
}
#bulletinboard > article:nth-of-type(1) > p > br {
  display: none;
}
#bulletinboard > article:nth-of-type(1) > a:nth-of-type(2) {/* -- バックナンバー */
  width: calc(164 / 720 * 100vw); height: calc(38 / 720 * 100vw);
  top: calc(136 / 720 * 100vw); left: calc(464 / 720 * 100vw);
}

#bulletinboard > article:nth-of-type(2) { /* -- 大洗温泉の宿 大洗 鷗松亭 */
  width: 100%; height: calc(200 / 720 * 100vw);
}

#bulletinboard > article:nth-of-type(3) { /* -- 福利厚生倶楽部 */
  width: 100%; height: calc(117 / 720 * 100vw);
  background: url(../images/sp/club.png) top center /100% no-repeat;
  transition: height 0.3s;
}
#bulletinboard > article:nth-of-type(3).rotate {
  height: calc(260 / 720 * 100vw);
}
#bulletinboard > article:nth-of-type(3) > menu {
  top: calc(137 / 720 * 100vw); left: calc(19 / 720 * 100vw);
}
#bulletinboard > article:nth-of-type(3) > menu > li {
  margin: calc(30 / 720 * 100vw) 0 0;
  font-size: calc(22 / 720 * 100vw);
}
#bulletinboard > article:nth-of-type(3) > a {
  width: calc(396 / 720 * 100vw); height: calc(101 / 720 * 100vw);
  top: calc(138 / 720 * 100vw); left: calc(245 / 720 * 100vw);
}
#bulletinboard > article:nth-of-type(3) > button {
  display: block;
  width: calc(38 / 720 * 100vw); height: calc(38 / 720 * 100vw);
  position: absolute;
  top: calc(40 / 720 * 100vw); left: calc(605 / 720 * 100vw);
  background: url(../images/sp/plus.png) center center /contain no-repeat;
}
#bulletinboard > article:nth-of-type(3).rotate > button {
  background: url(../images/sp/minus.png) center center /contain no-repeat;
}

#bulletinboard > div {
  gap: calc(30 / 720 * 100vw);
  width: 100%; height: auto;
}
#bulletinboard > div > a:nth-of-type(1) { /* -- MY HEALTH WEB */
  width: 100%; height: calc(373 / 720 * 100vw);
}
#bulletinboard > div > a:nth-of-type(2) { /* -- 事務担当者ページ */
  width: 100%; height: calc(96 / 720 * 100vw);
}

}