:root {
  font-family:  "noto-sans-cjk-jp", sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: #002C44;
  background-color: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Article Header */
.article-header {
  margin-bottom: .7rem;
}

.article-tags {
  display: flex;
  align-items: center;
  gap: .69rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.category-tag-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: .5rem;
}

/* 日付 */
.article-tags .date {
  color: var(--title--deco-navy);
font-family: var(--font--openSans);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04375rem;
}

/* カテゴリー */
.category-tag {
  border-radius: var(--card--borderRadius);
  padding: var(--card--tag--padding);
  border:var(--card--tag--border-blue);
  background: var(--card--tag--BG);
  color: var(--text-color-normal);
  font-family: var(--font--notoSans);
  line-height: var(--card--tag--lineHeight); 
  font-size: var(--card--tag--textSize);
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.02438rem;
}
.article-section .category-tag {
  text-decoration: none;
}

.article-title {
  color: #002C44;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8125rem; /* 125% */
  letter-spacing: 0.045rem;
  margin-bottom: 3rem;
}

/* Article Image */
.article-image,
.article-top-image {
  margin-bottom: 2.25rem;
}
.article-top-image {
  max-width: 1000px;
  height: 30rem;
  margin: 0 auto;
}
.article-image img,
.article-top-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.article-top-image img {
  height: 30rem;
  object-fit: cover;
}

.article-image p {
  margin-top: .8rem;
}


.article-text.headline {
  margin-bottom: 4rem;
}

.high-light {
  background: #ABC7DA;
}


/* interviewee Section */
.interviewee-section {
  margin: 4rem 0;
}

.interviewee-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.interviewee-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.interviewee-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.interviewee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interviewee-info {
  flex-grow: 1;
}

.interviewee-name-en {
  color: #00547D;
font-family: "Open Sans", sans-serif;
font-size: 0.625rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.0125rem;
}

.interviewee-name-ja {
  margin-bottom: 0.66rem;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.9375rem; /* 155% */
letter-spacing: 0.075rem;
}

.interviewee-position {
  color: #002C44;
  font-family:  "noto-sans-cjk-jp", sans-serif;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5625rem; /* 166.667% */
  letter-spacing: 0.01875rem;
}

/* Quote Section */
.article-content {
  margin: 4rem 0;
}





.speaker-text {
  margin-left: 1rem;
}

.speaker {
  font-weight: 700;
  color: #333;
}

/* Back to List Button */
.back-to-list {
  text-align: center;
  margin: 5rem 0;
}

.back-button {
  display: inline-block;
  padding: 1rem 3.125rem;
  border-radius: 3.125rem;
  border: 1px solid #00547D;
  color: #00547D;
  font-weight: 500;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #00547D;
  color: #FFF;
}

/* Fade In Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-title {
    font-size: 2rem;
    margin-bottom: 2.4rem;
    line-height: 1.4;
  }

  .article-tags {
    margin-bottom: .96rem;
  }
  .article-top-image {
    margin-bottom: 1.7rem;
  }

  .article-text {
    margin-bottom: 1.65rem;
  font-size: 0.9375rem;
  line-height: 1.75rem; /* 186.667% */
  letter-spacing: 0.01875rem;
    }

    .article-text.headline {
      margin-bottom: 3rem;
    }


  .back-to-list {
    text-align: center;
    margin: 3.6rem 0;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }

  .article-title {
    font-size: 1.75rem;
    margin-bottom: 1.2rem;
  }

  .article-tags {
    margin-bottom: .6rem;
  }

  .article-top-image {
    margin-bottom: .7rem;
    height: 18rem;
  }

  .article-top-image img {
    height: 18rem;
  }
  

  .interviewee-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
    row-gap: 0;
  }

  .interviewee-avatar {
    width: 10rem;
    height: 10rem;
    margin-bottom: 1rem;
  }

  .interviewee-info {
    width: 100%;
    text-align: center;
  }




  .interview-text {
    font-size: 0.95rem;
  }
  .back-to-list {
    margin: 4.5rem 0;
  }
  .back-button {
    font-size: 0.9375rem;
  }
}




/* wordpressから出力される表示を修正 */

/* リンク */
 .article-section a {
  color: #004E81;
  text-decoration: underline;
  transition: .3s ease all;
}

.article-section a:hover {
  opacity: .7;
}



/* 記事内のボタンを上書き */

.article-section a.back-button {
  display: inline-block;
  padding: 1rem 3.125rem;
  border-radius: 3.125rem;
  border: 1px solid #00547D;
  color: #00547D;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;

}


.article-section a.back-button:hover {
  opacity: 1;
  color: #FFF;
}

/* h2, h3タイトル */


.article-section h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: #002C44;
  padding-bottom: 1.2rem;
  border-bottom: 0.06rem solid #00619E;;

  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 133.333% */
  letter-spacing: 0.075rem;
}

.article-section h3 {
  background: #EAEAEA;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem .81rem;
  margin-bottom: .69rem;
  color: #002C44;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 166.667% */
  letter-spacing: 0.06rem;
}

.article-section h4 {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #002C44;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 166.667% */
  letter-spacing: 0.06rem;
}


/* サービス詳細のタイトル */
.article-section.servivce h2 {
  margin-top: 6rem;
}


.third-wrapper.service .article-image.banner +  h3 {
  margin-top: 3rem;
}

/* Responsive Design */
@media (max-width: 1024px) {

  
  .article-section h2 {
    font-size: 1.75rem;
    line-height: 2.375rem; /* 135.714% */
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .article-section h3{
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding: .5rem 1.25rem;
    font-size: 1.375rem;
    line-height: 2.5rem; /* 181.818% */
    letter-spacing: 0.055rem;
  }
  .article-section h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    line-height: 2rem; /* 181.818% */
    letter-spacing: 0.055rem;
  }
}



@media (max-width: 768px) {
  
  .article-section h2 {
    font-size: 1.56rem;
  line-height: 1.875rem; /* 120% */
  letter-spacing: 0.0625rem;
  }

  
  .article-section h3 {
    padding: .5rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.5; /* 200% */
    letter-spacing: 0.05rem;
  }

  .article-section.servivce h2 {
    margin-top: 5rem;
  }
}


/*  Text */

.article-section p {
  margin-top: 0.8em;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem; /* 187.5% */
  letter-spacing: 0.02rem;
  }



  /* 画像の左右、中央寄せを修正*/
  
  .article-section p:has(.aligncenter) {
    display: flex;
    align-items: center;
    justify-content:center;
  }

  
  .article-section p:has(.alignright) {
    display: flex;
    align-items: center;
    justify-content:flex-end;
  }
  
  .article-section p:has(.alignleft) {
    display: flex;
    align-items: center;
    justify-content:flex-start;
  }

  
  .article-section p > img{
    margin: 2rem 0;
  }


  .article-section table tbody {
    display: table-row-group;
    min-width: 100%;
  }
  .article-section table td {
    padding: 12px 12px;
  }
  .article-section  table {
    display: table;
    margin: 30px 0;
  }

  .article-section  table tr:not(:nth-last-of-type(1)) {
    border-bottom: 1px #e6e6e6 solid;
  }



  /* ----
サービスページ 
------*/


.service-detail {
  margin-top: 1rem;

  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem; /* 173.333% */
  letter-spacing: 0.0375rem;

  text-align: center;
}

.article-content.service {
  margin-top: 10rem;
}

.service-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}

.third-wrapper.service .article-image {
  margin-top: 1.25rem;
}
.service-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.9rem;
  margin-bottom: 1.25rem;
}


.service-img-container img {
  border-radius: 0.5rem;
  height: 19rem;
  object-fit: cover;
  width: 50%;
}
.service-img-container.image {
  margin-top: 1.25rem;
}
.service-img-container.image img {
  box-shadow: 0px 3px 14px 1px rgba(20, 67, 99, 0.08);
  width: auto;
}

.article-image.banner {
  display: block;
}

.article-image.banner:hover {
  opacity: 0.8;
}

.article-image.banner img{
  height: 12rem;
  object-fit: contain;
  border-radius: 0;
}


.article-section .button-large.blue {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.article-image, .article-top-image + .button-large.blue  {
  margin-bottom: 1.25rem;
}

.article-section a.button {
  text-decoration: none;
}

.article-section p.service-bold {
  margin-top: 5rem;
  color:  #002C44;
font-size: 1.0625rem;
font-style: normal;
font-weight: 700;
line-height: 1.4375rem; /* 135.294% */
letter-spacing: 0.02125rem;
}


@media (max-width: 768px) {


  /* ーーーーーーーーーーーーー
  サービスページのため追加
  ーーーーーー */


.service-header {
  margin-top: 1rem;
}

.article-top-image.service img {
  height: 16rem;
}

  .service-img-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    row-gap: 1.325rem;
    margin-bottom: 0;
  }
  .service-img-container + .button-large.blue {
    margin-top: 1.25rem;

  }

  .article-content.service {
    margin-top: 6.25rem;
  }

  .article-image.banner {
    width: 100%;
    margin: 0 auto 3.5rem;
  }
  .article-image.banner img {
    height: 100%;
    border-radius: 0;
  }

  .article-section p.service-bold {
    margin-top: 2rem;
  }
  .service-img-container img {
    height: auto;
    width: 100%;
  }
}