@charset "UTF-8";

.u-news {
  padding: 144rem 0 220rem;
}

.u-news .c-news__list {
  margin-top: 0;
}

/* =========================================
   u-detail（記事詳細ページ）
   ※ パンくず top:121px(PC) / 78px(SP) は基準にしているが、
     ヘッダー実装後に padding-top の値を再調整すること。
========================================= */
  .u-detail {
  max-width: 1200rem;
  margin: 0 auto;
  padding: 57rem 0 144rem;
}
.u-breadcrumb__list {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8rem 12rem;
  -webkit-overflow-scrolling: touch;
}

.u-breadcrumb__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12rem;
  color: #333;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .16em;
  white-space: nowrap;
}

.u-breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  background: url(/drivers/enjoy/2025etcsmart/common/images/icn_breadcrumbs.svg) no-repeat center / contain;
}

.u-breadcrumb__link {
  color: inherit;
}

@media (hover: hover) {
  .u-breadcrumb__link:hover {
    text-decoration: underline;
  }
}

@media screen and (max-width: 768px) {
  .u-detail {
    padding: 32rem 0 280em;
  }
  .u-breadcrumb__list {
    gap: 16rem;
  }
  .u-breadcrumb__item {
    gap: 16rem;
    font-size: 28rem;
  }
  .u-breadcrumb__item:not(:last-child)::after {
    width: 32rem;
    height: 32rem;
  }
}

/* =========================================
   u-articleHdr（記事ヘッダー：日付＋H1）
   PC: パンくず→日付 72px / 日付→H1 24px
   SP: パンくず→日付 48px / 日付→H1 24px
========================================= */
.u-articleHdr {
  margin-top: 72rem;
}

.u-articleHdr__date {
  display: block;
  color: #0080d0;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.6;
}

.u-articleHdr__ttl {
  margin-top: 24rem;
  color: #3c3c3c;
  font-size: 44rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}

@media screen and (max-width: 768px) {
  .u-articleHdr {
    margin-top: 96rem;
  }
  .u-articleHdr__date {
    font-size: 28rem;
  }
  .u-articleHdr__ttl {
    margin-top: 48rem;
    font-size: 64rem;
  }
}

/* =========================================
   u-divider（区切り線）
   PC: H1→区切り線 40px / SP: 32px
========================================= */
.u-divider {
  height: 0;
  margin-top: 40rem;
  border: 0;
  border-top: 1px solid #dedede;
}

@media screen and (max-width: 768px) {
  .u-divider {
    margin-top: 64rem;
  }
}

/* =========================================
   u-articleBody（記事本文ラッパー）
   PC: 区切り線→本文先頭 72px / SP: 48px
   ※ 子要素の :first-child は margin-top を打ち消す。
========================================= */
.u-articleBody {
  margin-top: 72rem;
}

.u-articleBody > :first-child {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .u-articleBody {
    margin-top: 96rem;
  }
}

/* =========================================
   u-articleBody（記事本文ラッパー）
   WYSIWYG想定：直下の各タグを直接スタイリング
   PC: 区切り線→本文先頭 72px / SP: 48px
   ※ 子要素の :first-child は margin-top を打ち消す。
========================================= */
.u-articleBody {
  margin-top: 72rem;
}

.u-articleBody > :first-child {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .u-articleBody {
    margin-top: 96rem;
  }
}

/* =========================================
   見出し（h2〜h5）
========================================= */
.u-articleBody h2 {
  margin-top: 72rem;
  color: #0080d0;
  font-size: 36rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}

.u-articleBody h3 {
  position: relative;
  margin-top: 56rem;
  padding-left: 24rem;
  color: #3c3c3c;
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}

.u-articleBody h3::before {
  content: "";
  position: absolute;
  top: .25em;
  left: 0;
  width: 4rem;
  height: calc(100% - .5em);
  background: #0080d0;
}

.u-articleBody h4 {
  margin-top: 40rem;
  color: #3c3c3c;
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}

.u-articleBody h5 {
  margin-top: 24rem;
  color: #3c3c3c;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}

@media screen and (max-width: 768px) {
  .u-articleBody h2 {
    margin-top: 96rem;
    font-size: 56rem;
  }
  .u-articleBody h3 {
    margin-top: 80rem;
    padding-left: 48rem;
    font-size: 48rem;
  }
  .u-articleBody h3::before {
    width: 8rem;
  }
  .u-articleBody h4 {
    margin-top: 80rem;
    font-size: 48rem;
  }
  .u-articleBody h5 {
    margin-top: 48rem;
    font-size: 40rem;
  }
}

/* =========================================
   本文（p）
   ・通常テキスト
   ・太字は <strong> でラップ
   ・注意喚起はWYSIWYGの文字色機能（インライン style="color:#d12118"）想定
   ・補足は <small> でラップ
========================================= */
.u-articleBody p {
  margin-top: 16rem;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
}

.u-articleBody strong,
.u-articleBody b {
  font-weight: 700;
}

.u-articleBody small {
  font-size: 13rem;
  line-height: 1.5;
}

.u-articleBody p:has( > small:only-child) {
  margin-top: 8rem;
}

@media screen and (max-width: 768px) {
  .u-articleBody p {
    margin-top: 32rem;
    font-size: 32rem;
  }
  .u-articleBody small {
    font-size: 26rem;
    line-height: 1.7;
  }
  .u-articleBody p:has( > small:only-child) {
    margin-top: 16rem;
  }
}

/* =========================================
   リンク（a）
   ・通常 / 外部（target="_blank"） / PDF（href$=".pdf"）
========================================= */
.u-articleBody a {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  color: #0080d0;
  text-decoration: underline;
  text-underline-offset: 3rem;
}

@media (hover: hover) {
  .u-articleBody a:hover {
    text-decoration: none;
  }
}

/* 外部リンク（target="_blank" かつ PDF 以外） */
.u-articleBody a[target="_blank"]:not([href$=".pdf"])::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 12rem;
  height: 12rem;
  background-color: #0080d0;
  mask: url(/drivers/enjoy/2025etcsmart/common/images/icn_blank.svg) no-repeat center / contain;
  -webkit-mask: url(/drivers/enjoy/2025etcsmart/common/images/icn_blank.svg) no-repeat center / contain;
}

/* PDFリンク */
.u-articleBody a[href$=".pdf"]::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: #005bab;
  mask: url(/drivers/enjoy/2025etcsmart/images/icn_pdf.svg) no-repeat center / contain;
  -webkit-mask: url(/drivers/enjoy/2025etcsmart/images/icn_pdf.svg) no-repeat center / contain;
}

@media screen and (max-width: 768px) {
  .u-articleBody a {
    gap: 16rem;
  }
  .u-articleBody a[target="_blank"]:not([href$=".pdf"])::after {
    width: 24rem;
    height: 24rem;
  }
  .u-articleBody a[href$=".pdf"]::after {
    width: 40rem;
    height: 40rem;
  }
}

/* =========================================
   リスト（ul / ol）
========================================= */
.u-articleBody ul {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 16rem;
  padding: 0;
  list-style: none;
}

.u-articleBody ul > li {
  position: relative;
  padding-left: 24rem;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
}

.u-articleBody ul > li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 8rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: #0080d0;
  transform: translateY(-50%);
}

.u-articleBody ol {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 16rem;
  padding: 0;
  list-style: none;
  counter-reset: numList;
}

.u-articleBody ol > li {
  position: relative;
  padding-left: 24rem;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
  counter-increment: numList;
}

.u-articleBody ol > li::before {
  content: counter(numList) ".";
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 768px) {
  .u-articleBody ul,
  .u-articleBody ol {
    gap: 16rem;
    margin-top: 32rem;
  }
  .u-articleBody ul > li,
  .u-articleBody ol > li {
    padding-left: 48rem;
    font-size: 32rem;
  }
  .u-articleBody ul > li::before {
    left: 16rem;
    width: 16rem;
    height: 16rem;
  }
}


.u-articleBody figure {
  margin-top: 24rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .u-articleBody figure {
    margin-top: 48rem;
  }
}

/* =========================================
   テーブル
   ・WYSIWYG出力はラッパー無しの <table> 直書き
   ・幅指定なし（セル内容で自然に決まる）
   ・SP横スクロールなし
========================================= */
.u-articleBody table {
  width: 100%;
  margin-top: 24rem;
  border-bottom: 1px solid #dedede;
  border-collapse: collapse;
}

.u-articleBody thead th {
  padding: 20rem 24rem;
  border-right: 1px solid #fff;
  background: #3aa6ea;
  color: #fff;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .16em;
  text-align: center;
  vertical-align: middle;
}

.u-articleBody thead th:last-child {
  border-right: 0;
}

.u-articleBody tbody th {
  padding: 24rem;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-left: 1px solid #dedede;
  background: transparent;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
  text-align: center;
  vertical-align: middle;
}

.u-articleBody td {
  padding: 24rem;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
  vertical-align: top;
}

.u-articleBody td[rowspan] {
  vertical-align: middle;
}

/* セル内：1個目の要素は上余白を打ち消す */
.u-articleBody td > :first-child {
  margin-top: 0;
}

/* セル内のリスト：gapを詰める、見出しの後は16rem余白 */
.u-articleBody td ul {
  gap: 4rem;
  margin-top: 16rem;
}

.u-articleBody td > ul:first-child {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .u-articleBody table {
    margin-top: 48rem;
  }
  .u-articleBody thead th {
    padding: 32rem 40rem;
    font-size: 32rem;
  }
  .u-articleBody tbody th {
    padding: 40rem;
    font-size: 32rem;
  }
  .u-articleBody td {
    padding: 40rem;
    font-size: 32rem;
  }
  .u-articleBody td ul {
    gap: 8rem;
  }
}


/* =========================================
  u-articleFtr（記事フッター：一覧に戻るボタン）
  PC: 本文最後→区切り線 72px、区切り線→ボタン 56px
  SP: 本文最後→区切り線 48px、区切り線→ボタン 32px
========================================= */
.u-articleFtr {
  display: flex;
  justify-content: center;
  margin-top: 72rem;
  padding-top: 56rem;
  border-top: 1px solid #dedede;
}

@media screen and (max-width: 768px) {
  .u-articleFtr {
    margin-top: 96rem;
    padding-top: 64rem;
  }
}

/* =========================================
  u-btn（共通ボタン）
  ※ 共通CSSに既にある場合は削除し、--type-outline の差分のみを残すこと。
========================================= */
.u-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  width: 200rem;
  height: 46rem;
  border-radius: 8rem;
  background: #fff;
  color: #3aa6ea;
  font-size: 14rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  transition: opacity .2s ease;
}

.u-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16rem;
  display: block;
  width: 24rem;
  height: 24rem;
  background-color: #3aa6ea;
  mask: url(/drivers/enjoy/2025etcsmart/common/images/icn_arrow_right.svg) no-repeat center / contain;
  transform: translateY(-50%);
  -webkit-mask: url(/drivers/enjoy/2025etcsmart/common/images/icn_arrow_right.svg) no-repeat center / contain;
  -webkit-mask: url(/drivers/enjoy/2025etcsmart/common/images/icn_arrow_right.svg) no-repeat center / contain;
}

.u-btn--type-outline {
  border: 1rem solid #3aa6ea;
  background: transparent;
  color: #3aa6ea;
}

@media (hover: hover) {
  .u-btn:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 768px) {
  .u-btn {
    gap: 24rem;
    width: 400rem;
    height: 84rem;
    padding: 0 48rem;
    border-radius: 16rem;
    font-size: 28rem;
  }
  .u-btn::after {
    width: 48rem;
    height: 48rem;
  }
}