/*昆虫と仲良くなろう・ココラム　共通CSS*/
body{
  max-width: none;
}
article{
  max-width: 1100px;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

/*ヘッダー*/
.cocolamuTopHeader{
  max-height: 715px;
}

/*ヘッダー背景*/
.insectNews_background{
  position: absolute;
  top: 0;
  background-color: #CC6161;
  height: 280px;
  width: 100%;
}
.insectDetail_background{
  position: absolute;
  top: 0;
  background-color: #6D7D3E;
  height: 280px;
  width: 100%;
}
.cocolamuTop_Background{
  position: absolute;
  top: 0;
  background-color: #2DB9A3;
  height: 715px;
  width: 100%;
}
.cocolamuMewsDetail_Background{
  position: absolute;
  top: 0;
  background-color: #2DB9A3;
  height: 287px;
  width: 100%;
}
@media (max-width:1100px){
  .insectNews_background{
    display: none;
  }
  .insectDetail_background{
    display: none;
  }
  .cocolamuTop_Background{
    display: none;
  }
  .cocolamuMewsDetail_Background{
    display: none;
  }
}

/*トップメッセージ*/
.icMsg{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.icMsg h2{
  font-size: 23px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
#cocolamuh2{
  margin-top: 80px;
}
.icMsg p{
  font-size: 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}
#cocolamuNewsNavi{
  margin-bottom: 50px;
}

/*パンくずナビ*/
.navi_ic{
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: left;
  align-items: center;
  height: 40px;
  padding-left: 20px;
}
.navi_ic a{
  color: blue;
  text-decoration: underline;
  font-size: 13px;
}
.navi_ic a:hover{
  text-decoration: none;
}
.navi_ic p{
  font-size: 13px;
}

@media (max-width:540px){
  .navi_ic{
    display: none;
  }

}

/*メイン記事*/
.article{
  margin-top: 50px;
  margin-bottom: 50px;
}
.articleDate{
  display: block;
  max-width: 800px;
  font-size: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 26px;
  padding-left: 20px;
}
.articleTitle{
  display: block;
  max-width: 800px;
  font-size: 22px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.6;
}
.articleTopImgage{
  display: block;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}
.articleContent{
  display: block;
  max-width: 710px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
  font-size: 18px;
  line-height: 1.6;
}
.articleSubImage{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 50px;
}
.subimages{
  width: 45%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.subText{
  max-width: 710px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}
.articleSubTitle{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 28px;
  line-height: 1.6;
}
.articleSubContent{
  font-size: 18px;
  margin-bottom: 70px;
  line-height: 1.6;
}
.articleYtmv{
  width: 80%;
  height: auto;
  aspect-ratio: 16/9;
  margin-bottom: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:540px){
  .articleTitle{
    font-size: 18px;
  }
  .articleSubTitle{
    font-size: 18px;
  }
  .articleContent{
    font-size: 16px;
  }
  .articleSubContent{
    font-size: 16px;
  }
}

@media (max-width:630px){
  .articleSubImage{
    flex-direction: column;
  }
  .subimages{
    width: 92%;
  }
}