/* Theme base styles */


/* Generic
This is where reset, normalize & box-sizing styles go.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main {
    overflow-x: hidden; /* 横スクロールを無効化 */
}


p{
  line-height: 160% !important;
}

table{
  width: 100%;
  overflow-x: auto;
  min-width:60rem;
  border-collapse: collapse;
}

table td, table th {
  padding: 2.4rem !important;
  font-size:1.8rem;
  border:1px solid #A0A8B6;
}


.section_blog ul, ol {
  padding: 3rem 2.4rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 167%;
  list-style-position: inside;
}


.section_blog li {
  margin-bottom: 2.4rem;
}

.blog_img{
  margin:0 auto;
  margin-bottom:6rem;
}


.blogPostImg{
  padding:4rem;
  width;100%;
  max-width:86rem;
  margin:0 auto; 
}

.blogPostImg img{
  width:100%;
  height:auto;
  object-fit:fill;

}

.section_blog h2 {
  font-size: 3.2rem;
  font-weight: bold;
  color: #012866;
  position: relative;
  margin: 0;
  margin-bottom: 3rem; /* h3の下に3.5remの余白 */
  padding-bottom: 1rem; /* 見出しと棒の間隔 */
  margin-left: 1.6rem; /* 左側に1.6remの余白を追加 */
}

/* 太い棒 */
.section_blog h2::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 0.4rem;
  background-color: #436FB0;
  bottom: 0;
  left: -1.6rem; /* 左の余白分だけ戻して配置 */
  transform: translateY(50%);
}

/* 細い棒 */
.section_blog h2::after {
  content: "";
  position: absolute;
  width: calc(100% + 1.6rem); /* 左余白分を足して全幅をカバー */
  height: 0.2rem;
  background-color: #0072B2;
  bottom: 0;
  left: -1.6rem; /* 左の余白分だけ戻して配置 */
  transform: translateY(50%);
}

@media screen and (max-width: 768px) {
  
  .footer_contact_wrapper img{
    width:auto;
  }

.section_blog h2{
    font-size: 2rem;
  }

}

.section_blog h3 {
  font-size: 2.4rem;
  font-weight: bold;
  color: #012866;
  position: relative;
  margin: 0;
  margin-top: 0.55rem; /* h3の上に0.55remの余白 */
  margin-bottom: 3.5rem; /* h3の下に3.5remの余白 */
  padding-bottom: 1.5rem; /* 棒との距離を維持 */
  margin-left: 1.6rem; /* 左側に1.6remの余白 */
}

/* 太い棒 */
.section_blog h3::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 0.4rem;
  background-color: #436FB0;
  bottom: 0;
  left: -1.6rem; /* 左の余白分だけ戻して配置 */
  transform: translateY(50%);
}

/* 細い棒 */
.section_blog h3::after {
  content: "";
  position: absolute;
  width: 55%; /* コンテンツ幅の55% */
  height: 0.2rem;
  background-color: #0072B2;
  bottom: 0;
  left: -1.6rem; /* 左の余白分だけ戻して配置 */
  transform: translateY(50%);
}


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

 .section_blog  h3{
    font-size: 1.8rem;
  }

}

.section_blog h4 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #012866;
  position: relative;
  margin: 0;
  margin-top: 0.55rem; /* h4の上に0.55remの余白 */
  margin-bottom: 3.5rem; /* h4の下に3.5remの余白 */
  padding-bottom: 1.5rem; /* 棒との距離 */
  margin-left: 1.6rem; /* 左に1.6remの余白 */
}

/* 太い棒 */
.section_blog h4::before {
  content: "";
  position: absolute;
  width: 2.4rem; /* 太い線の長さを2.4remに設定 */
  height: 0.4rem;
  background-color: #436FB0;
  bottom: 0;
  left: -1.6rem; /* 左の余白分だけ戻して配置 */
  transform: translateY(50%);
}


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

 .section_blog  h4{
    font-size: 1.7rem;
  }

}

p{
  font-size:1.6rem;
  font-weight:500;
  line-height:1.3;
}


.section_blog{
  width:60%;
  margin:0 auto;
}

.detail_fv {
  width: 100vw;
  min-height:20rem;            
  display: flex;
  flex-direction: column;
  justify-content: center;     /* テキストを中央に配置 */
  align-items: left;         /* 水平方向も中央揃え */
  gap: 1.2rem;                   /* h1とpの間のスペース */
  overflow: hidden;
  background-size: cover;      /* 背景画像を全体にカバー */
  background-position: center; /* 背景画像を中央揃え */
}

.detail_fv_wrapper{
  padding-top:3rem;
  padding-bottom:3rem;
  padding-left:13.2%;
  padding-right:13.2%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.background_wrapper{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background_wrapper img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像が要素全体を覆うように調整 */
  z-index: -1;
}

.detail_fv h1 {
  width:100%;
  font-size: 3.2rem;
  line-height: 1.75;
  font-weight: bold;
  margin: 0;
  color: #000000;
}

.detail_fv p{
  font-size: 1.5rem;
  font-family: Lexend; 
  line-height: 1.1;
  font-weight: bold;
  margin: 0;
  color: #012866;
}

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

  .detail_fv_wrapper{
    padding-top:4rem;
    padding-bottom:4rem;
    padding-left:5%;
    padding-right:5%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .detail_fv h1 {
    font-size: 2.2rem;
  }

  .detail_fv p {
    font-size: 1.8rem;
    font-family: Lexend;
    line-height: 1.1;
    font-weight: bold;
    margin: 0;
    color: #000000;
  }



}

.list_fv {
  width: 100vw;                /* 横幅を画面いっぱいに */
  height: 200px;               /* 縦幅を200pxに設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* テキストを中央に配置 */
  align-items: center;         /* 水平方向も中央揃え */
  gap: 1.6rem;                   /* h1とpの間のスペース */
  overflow: hidden;
  background-size: cover;      /* 背景画像を全体にカバー */
  background-position: center; /* 背景画像を中央揃え */
}

.background_wrapper{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background_wrapper img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像が要素全体を覆うように調整 */
  z-index: -1;
}

.list_fv h1 {
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 800;
  margin: 0;
  color: #012866;
}

.list_fv p {
  font-size: 1.8rem;
  font-family: Lexend;
  line-height: 1.1;
  font-weight: bold;
  margin: 0;
  color: #012866;
}

.Pagination{
  padding-top:6rem;
  padding-bottom:4rem;
  display:flex;
  gap:6rem;
  justify-content:center;
}

.Previous_Next,.nextPost{
  font-family:Lexend;
  font-size:2.4rem;
  font-weight:600;
}


.previousPost a{
  display:flex;
  gap:1.6rem;
  align-items:center;

}
.previousPost_text{
  color:#012866;
}

.nextPost a{
  color:#012866;
}


.nextPost_title{
  display:flex;
  gap:1.6rem;
  align-items:center;
  padding:0 3.2rem;
  color:#012866;
}


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

  .list_fv h1 {
    font-size: 3.2rem;
  }

  .list_fv p {
    font-size: 1.8rem;
    font-family: Lexend;
    line-height: 1.1;
    font-weight: bold;
    margin: 0;
    color: #012866;
  }

  .Pagination{
    gap:2.8rem;
  }

  .section_blog{
    width:90%;
    margin:0 auto;
  }
}

.previousPost{
  display:flex;
  gap:1.6rem;
  padding:0 3.2rem;
  align-items:center;
}

.nextPost{
  display:flex;
  gap:1.6rem;
  padding:0 3.2rem;
  align-items:center;
}  

.blog_img {
  padding-top: 6rem; /* 上部の余白 */
  width: 100%; /* 幅を100%に設定して画面幅に広がるようにする */
  max-width: 86rem; /* 最大幅を指定 */
  height: auto; /* 高さは自動で調整 */
  overflow: hidden; /* はみ出した部分を隠す */
}

.blog_img img {
  width: 100%; /* 画像の幅を親要素に合わせる */
  height: auto; /* 高さを自動調整し、アスペクト比を維持 */
  object-fit: cover; /* アスペクト比を維持しつつ、親要素にフィットさせる */
}

@media screen and (max-width: 500px) {
  
  img{
  width:100%;
  height:auto;
}