@charset "utf-8";

/*---------------------------------------
幅ユーティリティ（for-desktop/for-mobileのさらに細かい版）
500px以下のときだけ表示（改行タグなどに使用）
---------------------------------------*/
@media all and (min-width: 501px) {
  .for-narrow {
    display: none !important;
  }
}

/*---------------------------------------
記事共通
---------------------------------------*/
.article {
  max-width: 1100px;
  margin: 0 auto;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif;
}
.article__img {
  display: block;
  width: 100%;
}

/*---------------------------------------
幅指定ユーティリティ（PC・SP共通）
---------------------------------------*/
.w25,
.w30,
.w40,
.w50,
.w60,
.w70,
.w75,
.w80,
.w90 {
  margin-inline: auto;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w40 {
  width: 40%;
}
.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w70 {
  width: 70%;
}
.w75 {
  width: 75%;
}
.w80 {
  width: 80%;
}
.w90 {
  width: 90%;
}
.w100 {
  width: 100%;
}

/*---------------------------------------
幅指定ユーティリティ（PC表示のみ）
---------------------------------------*/
@media screen and (min-width: 768px) {
  .pc-w30,
  .pc-w40,
  .pc-w50,
  .pc-w60,
  .pc-w70,
  .pc-w80,
  .pc-w90 {
    margin-inline: auto;
  }
  .pc-w30 {
    width: 30%;
  }
  .pc-w40 {
    width: 40%;
  }
  .pc-w50 {
    width: 50%;
  }
  .pc-w60 {
    width: 60%;
  }
  .pc-w70 {
    width: 70%;
  }
  .pc-w80 {
    width: 80%;
  }
  .pc-w90 {
    width: 90%;
  }
  .pc-w100 {
    width: 100%;
  }
}

/*---------------------------------------
ヒーロー画像
---------------------------------------*/
.article__heroWrap {
  position: relative;
}
.article__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.article__heroImg {
  display: block;
  width: 100%;
  height: auto;
  /* SPは横長の元画像だと縦が短く見えるため、比率を変えて存在感を出す */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: right center;
}
@media screen and (min-width: 768px) {
  .article__heroImg {
    /* PCは元画像の比率のまま表示 */
    aspect-ratio: auto;
  }
}
/*---------------------------------------
リード（ヒーローに重なる吹き出し）
---------------------------------------*/
.article__leadWrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px;
}
@media screen and (min-width: 768px) {
  .article__leadWrap {
    position: absolute;
    left: 50%;
    /* 1920px幅で130pxになるよう、heroImgと同じvw比例で余白も可変に */
    bottom: 6.7708vw;
    width: 100%;
    max-width: 1100px;
    margin: 0;
    transform: translateX(-50%);
  }
}
.article__lead {
  /* SPは囲み（背景）なしでテキストのみ表示 */
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background-color: transparent;
}
@media screen and (min-width: 768px) {
  .article__lead {
    /* PCは中身（leadTitleなどの最長行）の幅にpaddingを足した幅に自動フィット */
    padding: calc(20px + (100vw - 768px) * 0.001736);
    background-color: rgba(255, 255, 255, 0.9);
  }
}
.article__leadTitle {
  line-height: 1.4;
  /* SPは320px〜767pxの画面幅に合わせて1.8rem(18px)〜2.56remの間でなめらかに拡縮 */
  font-size: clamp(1.8rem, calc(1.8rem + (100vw - 320px) * 0.0017), 2.56rem);
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .article__leadTitle {
    /* 768px=1.6rem(=25.6px)、1920px=40px前後になるよう再調整 */
    font-size: calc(2.56rem + (100vw - 768px) * 0.0125);
  }
}
.article__leadText {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.5;
  /* SPは320px〜767pxの画面幅に合わせて1.6rem〜2.08remの間でなめらかに拡縮 */
  font-size: clamp(1.6rem, calc(1.6rem + (100vw - 320px) * 0.00107), 2.08rem);
  font-weight: 700;
}
.article__leadText span {
  color: #036eb8;
}
@media screen and (min-width: 768px) {
  .article__leadText {
    /* leadTitleと同じバランスで、1920px=23px前後になるよう再調整 */
    font-size: calc(2.08rem + (100vw - 768px) * 0.00191);
  }
}
.article__leadSubtitle {
  margin-top: 4px;
  margin-bottom: 8px;
  line-height: 1.4;
  font-size: 2.3rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .article__leadSubtitle {
    /* leadTextとleadTitleの中間になるよう調整（768px=23px、1920px=31px前後） */
    font-size: calc(2.3rem + (100vw - 768px) * 0.0072);
  }
}

.article__text--intro,
.article__text--summary {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
@media screen and (min-width: 768px) {
  .article__text--intro,
  .article__text--summary {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
}

/* 段落分けした複数のsummaryが連続する場合、間だけ通常の段落間隔にする */
.article__text--summary:has(+ .article__text--summary) {
  margin-bottom: 16px !important;
}
.article__text--summary + .article__text--summary {
  margin-top: 16px !important;
}

/* 段落分けした複数のintroが連続する場合、間だけ通常の段落間隔にする */
.article__text--intro:has(+ .article__text--intro) {
  margin-bottom: 16px !important;
}
.article__text--intro + .article__text--intro {
  margin-top: 16px !important;
}

/*---------------------------------------
インタビュイー一覧
---------------------------------------*/
.article__people {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .article__people {
    flex-direction: row;
    justify-content: space-between;
  }
}
/* 2名分のみの場合は、画像を横長比率（498:297）に。SPも含めて常に適用 */
.article__people--col2 .article__person .article__img {
  max-width: 498px;
  aspect-ratio: 498 / 297;
  object-fit: cover;
}
/* 間隔は768px〜1100pxの画面幅に合わせて20px〜104pxの間でなめらかに拡縮（3カラム時と同程度の間隔が上限） */
@media screen and (min-width: 768px) {
  .article__people--col2 {
    justify-content: flex-start;
    gap: clamp(20px, calc(20px + (100vw - 768px) * 0.253), 104px);
  }
  .article__people--col2 .article__person {
    max-width: 498px;
  }
}
.article__person {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .article__person {
    width: auto;
    max-width: 297px;
    flex: 1 1 0;
    text-align: left;
  }
}
.article__person .article__img {
  width: 100%;
  max-width: 297px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.article__personDept {
  margin-top: 8px;
  line-height: 1.5;
  font-size: 14px;
  color: #767676;
}
.article__personName {
  margin-top: 2px;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 700;
}

/*---------------------------------------
本文
---------------------------------------*/
.article__body {
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .article__body {
    margin-top: 60px;
  }
}
.article__text {
  margin-top: 16px;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}
.article__text .link {
  font-size: 16px;
}
.article__body > .article__text:first-child {
  margin-top: 0;
}

/*---------------------------------------
見出し
---------------------------------------*/
.article__heading {
  margin: 0 !important;
  margin-top: 80px !important;
  padding: 0 !important;
  background: none !important;
  line-height: 1.5;
  /* SPは320px〜767pxの画面幅に合わせて18px〜26pxの間でなめらかに拡縮 */
  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.0179), 26px);
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .article__heading {
    margin-top: 140px !important;
    font-size: 40px;
  }
}
/* 見出し内の注釈記号(sup)は、共通CSSの固定10px指定だと見出しサイズに対して小さすぎるため相対指定に */
.article__leadTitle sup,
.article__heading sup {
  font-size: 0.5em;
}
.article__body > .article__heading:first-child {
  margin-top: 0 !important;
}
/* article__peopleの直後だけ、見出しの余白を小さくする */
.article__people + .article__heading {
  margin-top: 40px !important;
}
@media screen and (min-width: 768px) {
  .article__people + .article__heading {
    margin-top: 60px !important;
  }
}

/* 画像・columnボックスの直後だけ余白を広げる（article__blockで囲んだ場合も対象） */
.article__inlineImg + .article__question,
.article__column + .article__question,
.article__inlineImg + .article__block,
.article__column + .article__block {
  margin-top: 80px !important;
}
@media screen and (min-width: 768px) {
  .article__inlineImg + .article__question,
  .article__column + .article__question,
  .article__inlineImg + .article__block,
  .article__column + .article__block {
    margin-top: 140px !important;
  }
}

/*---------------------------------------
Q.質問
---------------------------------------*/
.article__question {
  margin-top: 32px;
  margin-bottom: 24px;
  line-height: 1.6;
  /* SPは320px〜767pxの画面幅に合わせて16px〜20pxの間でなめらかに拡縮 */
  font-size: clamp(16px, calc(16px + (100vw - 320px) * 0.0089), 20px);
  font-weight: 700;
  color: #000;
}
@media screen and (min-width: 768px) {
  .article__question {
    margin-top: 50px;
    margin-bottom: 40px;
    font-size: 26px;
  }
}

/*---------------------------------------
話者ラベル
---------------------------------------*/
.article__speaker {
  font-weight: 700;
}

/*---------------------------------------
単体画像＋キャプション
---------------------------------------*/
.article__inlineImg {
  margin: 40px auto 0;
}

.article__caption {
  margin-top: 8px!important;
  line-height: 1.6!important;
  font-size: 1.4rem!important;
  color: #333!important;
  font-style: normal!important;
  opacity: 1!important;
}

/*---------------------------------------
注釈
---------------------------------------*/
.article__note {
  margin-top: 8px;
  line-height: 1.6;
  font-size: 1.28rem;
}
/* 記事全体に対する注記（掲載時点の日付など）。前後の要素の有無に関わらず余白を固定 */
.article__note--page {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .article__note--page {
    margin-top: 32px;
  }
}

/*---------------------------------------
columnボックス
---------------------------------------*/
.article__column {
  position: relative;
  margin-top: 56px;
}
.article__columnBadge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 105px;
}
.article__column .article__text {
  font-size: 16px;
}
.article__columnBody {
  padding: 56px 24px 24px 24px;
  background-color: #f4f4f4;
}
@media screen and (min-width: 768px) {
  .article__columnBody {
    padding: 70px 40px 40px 40px;
  }
}
/* columnBadge画像がない囲みは、上paddingをバッジ分の余白なしに縮小 */
.article__column--plain .article__columnBody {
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .article__column--plain .article__columnBody {
    padding-top: 40px;
  }
}
.article__columnTitle {
  line-height: 1.5;
  /* SPは320px〜767pxの画面幅に合わせて16px〜20pxの間でなめらかに拡縮 */
  font-size: clamp(16px, calc(16px + (100vw - 320px) * 0.0089), 20px);
  font-weight: 700;
}
.article__columnImg {
  margin-top: 20px;
}
.article__columnLink,
.article__columnLink:link,
.article__columnLink:visited,
.article__columnLink:hover,
.article__columnLink:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
.article__columnLink::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-bottom: -2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/*---------------------------------------
次のPartへのリンクカード
---------------------------------------*/
.article__nextPart,
.article__nextPart:link,
.article__nextPart:visited,
.article__nextPart:hover,
.article__nextPart:active {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  color: inherit;
  text-decoration: none;
}
.article__nextPartImg {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 1 / 1;
}
@media screen and (min-width: 768px) {
  .article__nextPartImg {
    width: 160px;
  }
}
.article__nextPartText {
  line-height: 1.6;
  font-size: 2.24rem;
  font-weight: 700;
}

/*---------------------------------------
関連リンク
---------------------------------------*/
.article__related {
  margin-top: 56px;
}
@media screen and (min-width: 768px) {
  .article__related {
    margin-top: 80px;
  }
}
.article__relatedTitle {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #e0e0e0;
  line-height: 1.5;
  font-size: 20px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .article__relatedTitle {
    font-size: 26px;
  }
}
.article__relatedList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .article__relatedList {
    grid-template-columns: repeat(4, 1fr);
  }
}
.article__relatedImg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #e0e0e0;
}
.article__relatedItem .link {
  font-weight: 700;
}
.article__relatedDesc {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/*---------------------------------------
クロージング画像
---------------------------------------*/
.article__closing {
  margin-top: 56px;
  aspect-ratio: 16 / 7;
}

/*---------------------------------------
リンクタイトル（装飾なし見出し）
---------------------------------------*/
.title_link {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--color_primary_black);
  margin-top: 40px;
}