.u-details .u-lead__txt a {
  display: inline;
  gap: 8rem;
  color: #005bab;
  font-family: var(--font-family-base);
  font-size: 16rem;
  line-height: 1.5;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-underline-position: from-font;
}

.u-details .u-lead__txt a[target="_blank"]::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 16rem;
  height: 14rem;
  margin-left: 8rem;
  background: #005bab;
  mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
}

.u-details .u-lead__txt a:hover {
  text-decoration: none;
}



/* ==========================================================================
  u-articleHdr 記事ヘッダー
========================================================================== */
.u-articleHdr {
  padding: 80rem 0 56rem;
}

.u-articleCat {
  display: flex;
  align-items: center;
  font-size: 14rem;
  font-weight: 700;
  line-height: 1.4;
}

.u-articleCat::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 8rem;
  height: 8rem;
  margin-right: 8rem;
  border-radius: 2rem;
}

.u-articleCat.--color-green::before {
  background: #009905;
}

.u-articleCat.--color-orange::before {
  background: #ff7b37;
}

.u-articleCat.--color-blue-lt::before {
  background: #60a3e5;
}

.u-articleTtl {
  margin-top: 24rem;
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.6;
}

.u-articleTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin-top: 16rem;
}

.u-articleTags__item {
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  align-items: center;
  padding: 6rem 16rem;
  border-radius: 100rem;
  background: #fff;
  font-size: 14rem;
  line-height: 1.65;
  white-space: nowrap;
}

.u-articleDate {
  display: flex;
  align-items: center;
  margin-top: 20rem;
}
.u-articleDate__label {
  display: flex;
  align-items: center;
  gap: 8rem;
  margin-right: 8rem;
  font-size: 14rem;
  font-weight: 500;
}

.u-articleDate__label::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 8rem;
  height: 1rem;
  background: #333;
}
.u-articleDate__date {
  font-family: var(--font-family-en);
  font-size: 14rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .u-articleHdr {
    padding: 56rem 0 40rem;
  }
  .u-articleCat {
    font-size: 16rem;
  }
  .u-articleTtl {
    font-size: 28rem;
  }
  .u-articleTags {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .u-articleTags::-webkit-scrollbar {
    display: none;
  }
  .u-articleTags__item {
    padding: 3rem 12rem 6rem;
    font-size: 14rem;
  }
  .u-articleDate {
    font-size: 12rem;
  }
}



/* --------------------------------------------------------------------------
  記事メインラッパー
-------------------------------------------------------------------------- */
.u-details {
  position: relative;
  z-index: 10;
  padding-bottom: 80rem;
  border-radius: 16rem;
  background: #fff;
}

.u-details__inr {
  box-sizing: border-box;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 40rem;
}

@media (max-width: 768px) {
  .u-details__inr {
    width: 100%;
    padding: 0 16rem;
  }
}
/* ==================================================
  sns
================================================== */
.u-sns {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20rem;
  padding: 16rem 0 12rem;
}
.u-sns.--rev {
  justify-content: flex-end;
}
.u-sns__txt {
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.2;
}
.u-sns__icons {
  display: flex;
  align-items: center;
}
.u-sns__iconImg {
  width: 40rem;
  height: 40rem;
}
.u-sns a[target="_blank"]::after {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-sns {
    padding: 20rem 0 ;
  }
}
/* ==========================================================================
  アイキャッチ画像
========================================================================== */
.u-eyeCatch__img {
  overflow: hidden;
  border-radius: 8rem;
}

@media screen and (max-width: 768px) {
  .u-eyeCatch__img {
    width: 100%;
    /* height: 500rem; */
  }
}
/* ==================================================
  u-text
================================================== */
.u-text {
  margin-top: 40rem;
  font-size: 16rem;
  line-height: 1.8;
}
/* ==========================================================================
  u-quiz クイズパーツ
========================================================================== */
.u-quiz {
  margin-top: 40rem;
  padding: 40rem;
  border-radius: 8rem;
  background: #f5f7fa;
}

.u-quiz__question {
  display: flex;
  align-items: center;
  gap: 16rem;
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.6;
}

/* Qアイコン（青丸 + Q） */
.u-quiz__qIcon {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: #005bab;
  color: #fff;
  font-family: var(--font-family-en);
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.u-quiz__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem 40rem;
  margin-top: 20rem;
  padding: 0;
  list-style: none;
}


/* .u-quiz.--col2 .u-quiz__items,
.u-quiz.--col4 .u-quiz__items {
  grid-template-columns: repeat(2, 1fr);
} */

.u-quiz__btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 18rem 10rem;
  border: none;
  border: 1rem solid transparent;
  border-radius: 8rem;
  background: #fff;
  color: #333;
  font-family: var(--font-family-base);
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  transition: background .3s ease, color .3s ease, opacity .3s ease, border .3s;
  cursor: pointer;
}

.u-quiz__btn:hover {
  border: 1rem solid #333;
  opacity: .7;
}

/* 解答後の状態 */
.u-quiz.js-answered .u-quiz__btn {
  pointer-events: none;
}

.u-quiz.js-answered .u-quiz__btn:hover {
  opacity: 1;
}

/* 選択した選択肢 → 黒背景 + 白文字 */
.u-quiz.js-answered .u-quiz__item.js-selected .u-quiz__btn {
  background: #2b2b2b;
  color: #fff;
}

/* 不正解の選択肢 → ×アイコン（全て） */
.u-quiz.js-answered .u-quiz__item:not([data-answer="correct"]) .u-quiz__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20rem;
  width: 32rem;
  height: 32rem;
  background: currentColor;
  mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  transform: translateY(-50%);
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_cross.svg") no-repeat center / contain;
}

/* 正解の選択肢 → ○アイコン */
.u-quiz.js-answered .u-quiz__item[data-answer="correct"] .u-quiz__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20rem;
  width: 32rem;
  height: 32rem;
  background: currentColor;
  mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  transform: translateY(-50%);
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icn_circle.svg") no-repeat center / contain;
}

/* 解答エリア */
.u-quiz__result {
  display: none;
  padding-top: 32rem;
}

.u-quiz.js-answered .u-quiz__result {
  display: block;
}

.u-quiz__resultTitle {
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.8;
}

.u-quiz.js-correct .u-quiz__resultTitle::before {
  content: "正解！";
}

.u-quiz.js-wrong .u-quiz__resultTitle::before {
  content: "残念！";
}

.u-quiz__resultText {
  display: flex;
  align-items: baseline;
  gap: 8rem;
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

.u-quiz__aIcon {
  flex: 0 0 auto;
  color: #005bab;
  font-family: var(--font-family-en);
  font-size: 24rem;
  font-weight: 700;
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .u-quiz {
    margin-top: 20rem;
    padding: 32rem 16rem 40rem;
  }

  .u-quiz__question {
    gap: 8rem;
    font-size: 16rem;
  }

  .u-quiz__items {
    grid-template-columns: 1fr;
    gap: 12rem;
  }

  .u-quiz__btn {
    padding: 14rem 10rem;
    font-size: 14rem;
  }

  .u-quiz__qIcon {
    width: 32rem;
    height: 32rem;
    font-size: 16rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
  }

  .u-quiz__result {
    padding-top: 24rem;
  }

  .u-quiz__resultTitle {
    font-size: 18rem;
  }

  .u-quiz__resultText {
    margin-top: 8rem;
    font-size: 15rem;
  }
  .u-quiz.js-answered .u-quiz__item:not([data-answer="correct"]) .u-quiz__btn::after,
  .u-quiz.js-answered .u-quiz__item[data-answer="correct"] .u-quiz__btn::after {
    right: 16rem;
    width: 20rem;
    height: 20rem;
  }
}

/* ==================================================
  見出しモジュール
================================================== */
.u-h2,
.u-h3,
.u-h4,
.u-h5 {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* 最初に来る見出しのみ上マージンなし */
:is(.u-h2,
.u-h3,
.u-h4,
.u-h5):first-child {
  margin-top: 0;
}

/* h2 */
.u-h2 {
  display: flex;
  align-items: flex-start;
  gap: 8rem;
  margin-top: 56rem;
  font-size: 24rem;
}

.u-h2::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 13rem;
  height: 20rem;
  background: url("/drivers/blogarekore/details/images/icon_h2.svg") no-repeat center / contain;
}

/* h3 */
.u-h3 {
  display: flex;
  align-items: flex-start;
  gap: 16rem;
  margin-top: 40rem;
  font-size: 20rem;
}

.u-h3::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 6rem;
  height: 16rem;
  margin-top: 8rem;
  background: #005bab;
}

/* h4 */
.u-h4 {
  margin-top: 32rem;
  font-size: 18rem;
}

/* h5 */
.u-h5 {
  margin-top: 24rem;
  font-size: 16rem;
}

@media (max-width: 768px) {
  .u-h2 {
    font-size: 24rem;
  }

  .u-h3 {
    margin-top: 40rem;
    font-size: 20rem;
  }

  .u-h4 {
    font-size: 18rem;
  }
}

/* ==========================================================================
  u-lead リード文ブロック
========================================================================== */
.u-lead {
  margin-top: 40rem;
  padding: 40rem;
  border-radius: 8rem;
  background: #f5f7fa;
}

.u-lead__txt {
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

.u-link {
  margin-top: 20rem;
}

.u-link__label {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-size: 15rem;
  line-height: 1.5;
}

.u-link__label::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: #333;
}


@media (max-width: 768px) {
  .u-lead {
    margin-top: 24rem;
    padding: 40rem 20rem;
  }

  .u-link__label {
    font-size: 15rem;
  }
}

/* ==========================================================================
  u-imgFlex 画像横並びブロック（2カラム固定）
========================================================================== */
.u-imgFlex {
  margin-top: 40rem;
  padding: 40rem;
  border-radius: 8rem;
  background: #f5f7fa;
}

.u-imgFlex__cols {
  display: flex;
  gap: 40rem;
}

.u-imgFlex__col {
  flex: 1;
  min-width: 0;
}

.u-imgFlex__img {
  overflow: hidden;
  margin-top: 24rem;
  border-radius: 8rem;
}

.u-imgCaption {
  margin-top: 8rem;
  color: #777;
  font-size: 13rem;
  line-height: 1.5;
  text-align: right;
}

.u-imgFlex__txt {
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-imgFlex {
    margin-top: 24rem;
    padding: 40rem 20rem;
  }

  .u-imgFlex__cols {
    flex-direction: column;
    gap: 40rem;
  }
  .u-imgFlex__cols .u-imgFlex__img {
    margin-top: 0;
  }
}
/* ==========================================================================
  u-textImg 画像＋テキスト横並びブロック
  ※ Modifier: --rev で左右反転
========================================================================== */
.u-textImg {
  display: flex;
  align-items: center;
  gap: 40rem;
  margin-top: 24rem;
}

.u-textImg.--rev {
  flex-direction: row-reverse;
}

.u-textImg__img {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  border-radius: 8rem;
}

.u-textImg__body {
  flex: 1;
  min-width: 0;
}

.u-textImg__txt {
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-textImg {
    flex-direction: column;
    align-items: flex-start;
    gap: 24rem;
  }

  .u-textImg.--rev {
    flex-direction: column;
  }
}
/* ==========================================================================
  u-imgFull 大きな画像ブロック
========================================================================== */
.u-imgFull {
  margin-top: 40rem;
  padding: 40rem;
  border-radius: 8rem;
  background: #f5f7fa;
}

.u-imgFull__img {
  overflow: hidden;
  margin-top: 24rem;
  border-radius: 8rem;
}

.u-imgFull__txt {
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-imgFull {
    margin-top: 24rem;
    padding: 40rem 20rem;
  }
}
/* ==========================================================================
  u-table 項目リスト（dl構造）
========================================================================== */
.u-table {
  margin-top: 40rem;
  padding: 40rem 40rem 72rem;
  border-radius: 8rem;
  background: #f7f7f7;
}

.u-table__list {
  margin-top: 56rem;
}

.u-table__row {
  display: flex;
  gap: 40rem;
  padding: 24rem 0 32rem;
  border-bottom: 1rem solid #d8dfec;
}

.u-table__row:first-child {
  padding: 0 0 32rem;
}

.u-table__row:last-child {
  padding: 24rem 0 0;
  border-bottom: none;
}

.u-table__head {
  flex: 0 0 auto;
  width: 238rem;
  color: #005bab;
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.5;
}

.u-table__body {
  flex: 1;
  min-width: 0;
}

.u-table__item + .u-table__item {
  margin-top: 16rem;
}

.u-table__item strong {
  display: block;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.5;
}

.u-table__item strong + .u-table__text {
  margin-top: 8rem;
}

.u-table__text {
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-table__list {
    margin-top: 32rem;
  }

  .u-table {
    margin-top: 24rem;
    padding: 40rem 20rem;
  }

  .u-table__row {
    flex-direction: column;
    gap: 8rem;
    padding: 16rem 0;
  }

  .u-table__row:first-child {
    padding: 0 0 16rem;
  }

  .u-table__row:last-child {
    padding: 16rem 0 0;
  }

  .u-table__head {
    width: auto;
    font-size: 16rem;
  }

  .u-table__text {
    font-size: 16rem;
  }

  .u-table__item strong {
    font-size: 16rem;
  }
}
/* ==========================================================================
  u-attention 注意事項リスト
========================================================================== */
.u-attention {
  margin-top: 40rem;
  padding: 32rem 40rem;
  border: 1rem solid #f2c8dd;
  border-radius: 8rem;
  background: #fff9fc;
}

.u-attention__title {
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.6;
}

.u-attention__list {
  margin-top: 20rem;
  padding: 0;
  list-style: none;
}

.u-attention__item {
  position: relative;
  padding-left: 24rem;
  font-size: 16rem;
  line-height: 1.8;
}

.u-attention__item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .u-attention {
    margin-top: 24rem;
    padding: 32rem 20rem;
  }
  .u-attention__list {
    margin-top: 16rem;
  }
}
/* ==========================================================================
  u-borderBox 枠付きテキストエリア
========================================================================== */
.u-borderBox {
  margin-top: 40rem;
  padding: 32rem 40rem;
  border: 1rem solid #d8dfec;
  border-radius: 8rem;
}

.u-borderBox__title {
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.5;
}

.u-borderBox__text {
  margin-top: 20rem;
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-borderBox {
    margin-top: 24rem;
    padding: 32rem 20rem;
  }
}
/* ==========================================================================
  u-index INDEX（目次）アコーディオン
  ※ comJs.flexBox 使用（js-open クラスで開閉状態管理）
========================================================================== */
.u-index {
  margin-top: 40rem;
  border-radius: 8rem;
  background: #f4f7fb;
}

/* ボタン部分 */
.u-index__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18rem 32rem;
  border: none;
  background: transparent;
  cursor: pointer;
}

.u-index__title {
  color: #333;
  font-family: var(--font-family-en);
  font-size: 20rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .04em;
}

/* +/− アイコン（擬似要素で生成、SVG差し替え予定） */
.u-index__icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 24rem;
  height: 24rem;
}

/* 横棒（常に表示） */
.u-index__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4rem;
  border-radius: 8rem;
  background: #333;
  transform: translateY(-50%);
}

/* +/− アイコン: 縦棒を回転させて滑らかにアニメーション */
.u-index__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 100%;
  border-radius: 8rem;
  background: #333;
  transform: translate(-50%, -50%) rotate(0);
  transition: transform .4s ease;
}

.u-index.js-open .u-index__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開閉対象: marginなし、paddingで余白 */
.u-index__body {
  display: none;
}

.u-index__list {
  padding: 18rem 32rem 32rem;
  list-style: none;
}

.u-index__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20rem;
  border-radius: 4rem;
  background: #fff;
  font-size: 16rem;
  line-height: 1.5;
}

.u-index__item + .u-index__item {
  margin-top: 4rem;
}

/* ■ */
.u-index__item::before {
  content: "";
  display: inline-block;
  flex-shrink: 0  ;
  width: 8rem;
  height: 8rem;
  margin-right: 16rem;
  background: #005bab;
}

@media (max-width: 768px) {
  .u-index {
    margin-top: 24rem;
  }

  .u-index__btn {
    padding: 18rem 20rem;
  }

  .u-index__list {
    padding: 0 20rem  20rem;
  }

  .u-index__item {
    align-items: flex-start;
    padding: 20rem 16rem ;
    font-size: 14rem;
  }

  .u-index__item::before {
    margin-top: 6rem;
    margin-right: 12rem;
  }
}

.u-parts_ttl {
  margin-top: 41rem;
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}
/* ==========================================================================
  u-btn ボタン
========================================================================== */
.u-btn {
  position: relative;
  display: inline-block;
  min-width: 288rem;
  margin-top: 40rem;
  padding: 11rem 42rem;
  border: 1rem solid #333;
  border-radius: 100rem;
  background: #fff;
  color: #333;
  font-size: 15rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  opacity: 1;
  transition: background .3s ease, color .3s ease;
}

.u-btn.--black {
  background: #111;
  color: #fff;
  transition: opacity .3s ease;
}

.u-btn.--blank::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16rem;
  display: block;
  flex: 0 0 auto;
  width: 16rem;
  height: 14rem;
  background: currentColor;
  mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  transform: translateY(-50%);
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/common/images/icn_blank.svg") no-repeat center / contain;
}

.u-btn:hover {
  background: #111;
  color: #fff;
}


@media (max-width: 768px) {
  .u-btn {
    width: 100%;
    min-width: 0;
  }
}
/* ==========================================================================
  u-endLink 記事末尾のページネーション
========================================================================== */
.u-endLink {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rem;
  margin-top: 40rem;
  padding-top: 40rem;
  border-top: 1rem solid  #d8dfec;
}

/* 前の記事 / 次の記事 共通 */
.u-endLink__prev,
.u-endLink__next {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8rem;
  max-width: calc(50% - 195rem);
  color: currentColor;
  text-decoration: none;
}
/* PC
----------------------------------*/
@media screen and (min-width: 769px) {
  .u-endLink__prev,
  .u-endLink__next {
    top: 20rem;
  }
}
.u-endLink__prev {
  left: 0;
}
.u-endLink__next {
  right: 0;
}

/* 矢印付きラベル */
.u-endLink__prevLabel,
.u-endLink__nextLabel {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-size: 12rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 前の記事の矢印（左向き） */
.u-endLink__prevLabel::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 16rem;
  height: 16rem;
  background: #005bab;
  mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
}

/* 次の記事 - ラベルを右寄せ、矢印は右側 */
.u-endLink__next {
  align-items: flex-end;
  text-align: right;
}

.u-endLink__nextLabel::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 16rem;
  height: 16rem;
  background: #005bab;
  mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  transform: scaleX(-1);
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/blogarekore/details/images/icon_details_arrow.svg") no-repeat center / contain;
}

/* 記事タイトル */
.u-endLink__prevTitle,
.u-endLink__nextTitle {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.u-endLink__back {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 210rem;
  padding: 12rem 70rem;
  border: 1rem solid #333;
  border-radius: 100rem;
  background: #fff;
  color: #333;
  font-size: 14rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}

.u-endLink__back:hover {
  background: #333;
  color: #fff;
}

.u-endLink__back:hover {
  opacity: .7;
}

@media (max-width: 768px) {
  .u-endLink {
    gap: 30rem;
    padding-top: 20rem;
  }
  .u-endLink__back {
    padding: 12rem 40rem;
  }

  /* SP: タイトル・カテゴリ非表示、矢印ラベルは矢印のみに */
  .u-endLink__prevTitle,
  .u-endLink__nextTitle,
  .u-endLink .u-articleCat {
    display: none;
  }

  .u-endLink__prevLabel,
  .u-endLink__nextLabel {
    font-size: 0;
  }
}
/* ==========================================================================
  u-balloon 吹き出しパーツ
========================================================================== */
.u-balloon {
  display: flex;
  align-items: flex-start;
  gap: 22rem;
  margin-top: 48rem;
  --balloon-bg: #f5f7fa;
}
.u-balloon.--blue {
  --balloon-bg: #e2eaf6;
}
.u-balloon.--rev {
  flex-direction: row-reverse;
}

/* アイコン */
.u-balloon__icon {
  flex: 0 0 auto;
  width: 98rem;
  height: 98rem;
  border-radius: 50%;
  background-color: #f4f4f4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* アイコン画像 */
.u-balloon.--man01 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_man_01.svg");
}

.u-balloon.--man02 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_man_02.svg");
}

.u-balloon.--man03 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_man_03.svg");
}

.u-balloon.--man04 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_man_04.svg");
}

.u-balloon.--woman01 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_woman_01.svg");
}

.u-balloon.--woman02 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_woman_02.svg");
}

.u-balloon.--woman03 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_woman_03.svg");
}

.u-balloon.--woman04 .u-balloon__icon {
  background-image: url("/drivers/blogarekore/details/images/icon_woman_04.svg");
}

/* 吹き出し本体 */
.u-balloon__body {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 40rem;
  border-radius: 8rem;
  background: var(--balloon-bg);
}
.u-balloon__body > *:first-child {
  margin-top: 0;
}
.u-balloon__body:has(.u-balloon__text) {
  padding: 20rem 32rem;
}
/* しっぽ：左側 */
.u-balloon__body::before {
  content: "";
  position: absolute;
  top: 32rem;
  left: -13rem;
  width: 0;
  height: 0;
  border-width: 6rem 19rem 6rem 0;
  border-style: solid;
  border-color: transparent var(--balloon-bg) transparent transparent;
  rotate: -5deg;
}

.u-balloon.--rev .u-balloon__body::before {
  right: -13rem;
  left: auto;
  border-width: 6rem 0 6rem 19rem;
  border-color: transparent transparent transparent var(--balloon-bg);
  rotate: 5deg;
}

.u-balloon__text {
  font-size: 16rem;
  line-height: 1.8;
}

.u-balloon__body > .u-imgFlex,
.u-balloon__body > .u-imgFull {
  margin-top: 0;
}

@media (max-width: 768px) {
  /* SP: 縦積み（アイコン上 / 吹き出し下、アイコンは少し重なる） */
  .u-balloon {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 32rem;
  }

  .u-balloon:not(:first-of-type) {
    margin-top: 24rem;
  }

  .u-balloon.--rev {
    flex-direction: column;
    align-items: flex-end;
  }

  .u-balloon__icon {
    position: relative;
    z-index: 1;
    width: 64rem;
    height: 64rem;
    margin-bottom: -32rem;
  }

  .u-balloon__body {
    width: 100%;
    padding: 40rem 20rem;
  }

  /* SP: しっぽは非表示 */
  .u-balloon__body::before,
  .u-balloon.--rev .u-balloon__body::before {
    display: none;
  }

  .u-balloon__body:has(.u-balloon__text) {
    padding: 20rem;
  }

  .u-balloon__body > .u-imgFlex,
  .u-balloon__body > .u-imgFull {
    margin-top: 0;
    padding: 0;
  }

  .u-balloon__text {
    font-size: 14rem;
  }
}
/* ==========================================================================
  u-accordion アコーディオン
========================================================================== */
.u-accordion {
  margin-top: 40rem;
  border-radius: 8rem;
  background: #f7f7f7;
}

.u-accordion__btn {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24rem;
  width: 100%;
  padding: 28rem 30rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.u-accordion__title {
  flex: 1;
  color: #333;
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.8;
  text-decoration: none;
}

/* +/− アイコン */
.u-accordion__icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 24rem;
  height: 24rem;
  margin-top: 6rem;
}

.u-accordion__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4rem;
  border-radius: 8rem;
  background: #333;
  transform: translateY(-50%);
}

.u-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 100%;
  border-radius: 8rem;
  background: #333;
  transform: translate(-50%, -50%) rotate(0);
  transition: transform .4s ease;
}

.u-accordion.js-open .u-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.u-accordion__body {
  display: none;
}
.u-accordion__inr {
  padding: 0 32rem 32rem;
}

/* 中身の白背景枠 */
.u-accordion__wrap {
  margin-top: 0;
  padding: 24rem;
  border-radius: 8rem;
  background: #fff;
}
.u-accordion__subTitle {
  color: #005bab;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.8;
}

.u-accordion__list {
  padding: 16rem 0 0;
  list-style: none;
}

.u-accordion__item {
  position: relative;
  padding-left: 18rem;
}

.u-accordion__item + .u-accordion__item {
  margin-top: 16rem;
}

.u-accordion__item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16rem;
  font-weight: 700;
}

.u-accordion__text {
  margin-top: 4rem;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-accordion {
    margin-top: 24rem;
  }

  .u-accordion__btn {
    padding: 18rem 20rem;
  }
  .u-accordion__title {
    font-size: 16rem;
  }

  .u-accordion__inr {
    padding: 0 20rem 20rem;
  }
  .u-accordion__wrap {
    padding: 20rem 16rem;
  }
  .u-accordion__item {
    padding-left: 20rem;
  }
}


/* ==========================================================================
  u-summary
========================================================================== */
.u-summary {
  margin-top: 80rem;
  /* 親のpaddingを打ち消して、自分でpaddingを取り直す */
  margin-inline: -40rem;
  padding: 40rem 40rem 0;
  /* 上端の点線 */
  border-top: 2rem dashed transparent;
  border-image: repeating-linear-gradient(
    to right,
    #d8dfec 0 5rem,
    transparent 6rem 10rem
  ) 30;
  -o-border-image: repeating-linear-gradient(
    to right,
    #d8dfec 0 5rem,
    transparent 6rem 10rem
  ) 30;
}

.u-summary__text {
  margin-top: 24rem;
  font-size: 16rem;
  line-height: 1.8;
}

/* u-link が来た時の上余白 */
.u-summary > .u-link {
  margin-top: 24rem;
}

@media (max-width: 768px) {
  .u-summary {
    margin-top: 60rem;
    margin-inline: -16rem;
    padding: 56rem 16rem 0;
    border-image: repeating-linear-gradient(to right, #d8dfec 0 4rem, transparent 4rem 8rem) 30;
    -o-border-image: repeating-linear-gradient(to right, #d8dfec 0 4rem, transparent 4rem 8rem) 30;
  }

  .u-summary__text {
    font-size: 14rem;
  }
}
/* ==================================================
  u-recommend
================================================== */

.u-recommend {
  position: relative;
  overflow: hidden;
  margin-top: 100rem;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background-color: #fff;
}
.u-recommend__inr {
  position: relative;
  z-index: 0;
  padding: 80rem 0 100rem;
}
.u-recommend__inr::after {
  content: "";
  position: absolute;
  top: -512rem;
  right: -589rem;
  z-index: -1;
  display: block;
  width: 1428rem;
  aspect-ratio: 1428/1668;
  background-image: url("/drivers/blogarekore/details/images/recommend_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.u-recommend__hd {
  text-align: center;
}
.u-recommend__ttl {
  font-family: var(--font-family-en);
  font-size: 56rem;
  font-weight: 700;
}
.u-recommend__subTtl {
  margin-top: 8rem;
  font-size: 15rem;
  font-weight: 500;
}
.u-recommend__btnWrap {
  margin: 64rem auto 0;
  text-align: center;
}
.u-recommend__btn {
  padding: 11rem 42rem;
}

@media screen and (max-width: 768px) {
  .u-recommend {
    margin-top: 80rem;
  }
  .u-recommend__inr {
    padding: 80rem 0;
  }
  .u-recommend__inr::after {
    top: 303rem;
    right: -200rem;
  }
  .u-recommend__hd {
    text-align: center;
  }
  .u-recommend__ttl {
    font-size: 32rem;
  }
  .u-recommend__subTtl {
    font-size: 15rem;
  }
  .u-recommend__list {
    margin-top: 48rem;
  }
  .u-recommend__btnWrap {
    margin: 40rem auto 0;
  }
}

.u-greyBlock {
  margin-top: 40rem;
  padding: 40rem;
  border-radius: 8rem;
  background: #f5f7fa;
}
.u-greyBlock > *:first-child {
  margin-top: 0;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-greyBlock {
    margin-top: 20rem;
    padding: 32rem 16rem 40rem;
  }
}