/*
 Theme Name:   Appli-S Article Child
 Template:     appli-s_article
 Version:      1.0.0
*/

/* 目次が #sec-◯ 形式なら、着地点の要素に余白を足す */



/* これまでの html だけ → まとめて適用に変更 */
html, body, #page, .site, .l-container, .wrap {
  scroll-padding-top: var(--fixed-header-h) !important;
}

.article-title-main {
  margin-bottom: 20px;
}


/* H1 を必ず表示させる（カード用の .article-title 非表示ルールを打ち消す） */
.article-heading .article-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  text-indent:0 !important;
  color:#111 !important;
}

.sub-heading-text {
  border-bottom: 1px solid #e5e7eb; /* 薄いグレー線（親テーマに近い色） */
  padding-bottom: 16px;
  margin-bottom: 16px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2B303C;
  margin-top: 0;
  margin-bottom: 8px;
}

p {
  font-weight: 400 !important;
  font-size: 16px !important;
} 

.card-excerpt {
  font-weight: 700 !important;
}

.lead-text p {
  font-weight: 500 !important;
}

/* 目次 */
.toc__list { list-style: decimal; padding-left: 1.2em; }
.toc__item { margin: .4em 0; }

.toc__sublist {
  list-style: square !important;       /* 子は番号を消して点に */
  margin: -8px 72px;
  font-size: .95em;
  color: #c9c9c9 !important;
  
}
.toc__subitem { 
  display: block;
  margin: .2em 0;
 }

.toc__sublist a::before {
  display: none !important;
}

.toc__sublist li a {
  display: block !important;
    white-space: normal;   /* 通常の折り返し */
  word-break: keep-all;  /* 日本語や単語を途中で切らない */
  color: #5c5c5c !important;
  border-bottom: none !important;
  scroll-margin-top: 28px;
}

.toc__list li a {
  border-bottom: none !important;
  align-items: center !important;
  display: block !important;

}

.toc__list li li a {
  padding: 6px 0 !important;
}
.toc__list li a::before {
  top: 1px !important;
}


/* TOC リンク共通：基本は下線なし */
.toc__list a {
  border-bottom: none;
  text-decoration: none;
}

/* 子（ネスト）のリンクは常に下線なし */
.toc__list li li a {
  border-bottom: none;
}

/* 子を持たない親（葉）のみ下線を付ける */
.toc__list > li:not(:has(> ul, > ol)) > a {
  border-bottom: 1px solid #ddd;
  display: inline-block;
  padding-bottom: .35em;
  margin-bottom: 0px;
}

/* 子を持つ親の「最後の子」だけ下線＋余白 */
.toc__list > li:has(> ul, > ol) > ul > li:last-child > a,
.toc__list > li:has(> ul, > ol) > ol > li:last-child > a {
  border-bottom: 1px solid #ddd;
  display: inline-block;
  padding-bottom: .35em;
  margin-bottom: 8px;
}

.toc__title {
  margin-bottom: 0 !important;
}

.toc-level-2 {
  font-size: 22px !important;
  color: #505050 !important;
}

.toc-level-2 .article-section-border {
  background: none !important;

}

.article-section-title {
  margin-bottom: 24px !important;
}

/* 子見出し（レベル2）: 下線を消し、左に二重線 */
h2.article-section-title-text.toc-level-2,
.sub-heading-text.toc-level-2 {
  border-bottom: none !important;   /* 下線を消す */
  position: relative;               /* 疑似要素の基準にする */
  padding-left: 20px;               /* 二重線ぶんの余白 */
}

/* 左の二重線 */
h2.article-section-title-text.toc-level-2::before,
h2.article-section-title-text.toc-level-2::after,
.sub-heading-text.toc-level-2::before,
.sub-heading-text.toc-level-2::after {
  content: "";
  position: absolute;
  top: 0.25em;          /* 文字高さに合わせて調整 */
  bottom: 0.25em;
  left: 0;
  width: 3px;
  height: 20px;
  background: #2AABE3; /* 線の色（お好みで） */
  pointer-events: none;
  align-self: center;
}
h2.article-section-title-text.toc-level-2::after,
.sub-heading-text.toc-level-2::after {
  left: 5px;            /* 2 本目の線の間隔 */
}

@media (max-width: 767px) {
  .toc-level-2 {
  font-size: 20px !important;
}

}

/* 子見出しの直後にある既存の下線用要素を無効化 */
h2.article-section-title-text.toc-level-2 + .article-section-border,
.sub-heading-text.toc-level-2 + .article-section-border {
  display: none !important;
}


/* 汎用テーブル（横スク対応・見やすい装飾） */
.tbl {
  margin:16px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
   border-radius: 4px;
}
.tbl table {
  width:100%;
  min-width:640px;
  border-collapse:separate;
  border-spacing:0;
}
.tbl th,
.tbl td {
  padding:12px 14px;
  border:1px solid #e5e7eb;
  vertical-align:top;
  line-height:1.6;
}
.tbl thead th {
  background:#66b9de;
  position:sticky;
  top:0;
  z-index:1;
  color:white;
  font-size: 14px;
  font-weight: 500;
}
.tbl tbody tr:nth-child(odd) {
  background:#fafafa;
}

.tbl thead th:first-child {
  background: #bdbdbd !important; /* ←水色。サイトに合わせて調整OK */
  color: #fff;    
  border-top-left-radius: 4px;       /* 文字色を白に */
}

.tbl thead th:last-child {
  border-top-right-radius: 8px; /* 右上角を丸める */
}

/* 左端の見出し列だけ文字を通常の太さに */
.tbl th:first-child {
  font-weight: 500; /* 通常（標準） */
  letter-spacing: 0.05em;
}


/* 省スペース */
.tbl.is-compact th,
.tbl.is-compact td {
  padding:8px 10px;
  font-size:.95rem;
}

/* 左端列固定 */
.tbl.is-sticky-first th:first-child,
.tbl.is-sticky-first td:first-child {
  position:sticky;
  left:0;
  background:#fff;
  z-index:2;
  box-shadow:1px 0 0 #e5e7eb;
}

/* 比較表（◯/—/×） */
.tbl.is-compare th,
.tbl.is-compare td {
  text-align:center;
  font-size: 14px;
}
.tbl.is-compare th:first-child {
  text-align:left;
}
.tbl.is-compare td.ok::before { content:"✓"; font-weight:700; color: #2AABE3;}
.tbl.is-compare td.ng::before { content:"—"; font-weight:700; color: #999999;}
.tbl.is-compare td.x::before  { content:"×"; font-weight:700; color: #999999; }


/* 個別記事ページ -クイックタグ- */
/* 「参考」ラベル */

.link-label {
  display: flex;
  align-items: center;
}
.link-ref {
  color: #2B2F3B;   /* または #2B303C */
  font-size: 15px;
  margin-right: 4px;
	font-weight: 700;
}

/* リンク部分 */
a.custom-link {
  color: #1192CD;       /* 青系 */
  text-decoration: underline;
  letter-spacing: 0;
  font-size: 16px !important; 
	font-weight: 400;/* 12〜14pxで調整可 */
  position: relative !important;
  margin-top: -16px !important; /* ← これで高さを揃える */
}
/* 参考リンクの段落は上下マージンを潰す */
p:has(> a.custom-link){
  margin: 0;                 /* ← これで段落の既定余白を消す */
}

/* リンク自体はインライン扱い＆行高を普通に */
a.custom-link{
  display: inline;           /* block/inline-block なら inline に戻す */
  line-height: 1.6;          /* テキストの行高だけに */
  padding: 0;                /* 念のためリセット */
}

.link-label{ margin:0; }
.link-label a.custom-link{ display:inline; line-height:1.6; padding:0; }

.link-label{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0;
}
.link-label .link-ref{ white-space:nowrap; }
.link-label .custom-link{ display:inline; margin:0; }

p.link-label {
  display: flex;
  align-items: center;   /* 高さを揃える */
  gap: 4px;              /* 「参考:」とリンクの間に余白 */
  margin: 0;             /* p の上下余白を消す */
}

.link-ref {
  white-space: nowrap;   /* 「参考:」が改行されないように */
  margin-top: 12px;
}

.custom-link {
  display: inline;       /* リンクは通常テキストと同じ扱い */
  line-height: 1.6;      /* 全体の高さを揃える */
}

/* 「参考:」の段落をインライン化して改行を消す */
.entry-content p.link-label{
  display: inline;
  margin: 0;
  padding: 0;
}
.entry-content p.link-label .link-ref{
  margin-right: .6em;      /* 「参考:」とリンクの間 */
  white-space: nowrap;
}

/* 参考ラベル直後の “リンクだけ” の段落をインライン化して横並びに */
.entry-content p.link-label + p,
.entry-content p.link-label + p + p,
.entry-content p.link-label + p + p + p{
  display: inline;
  margin: 0 .8em 0 0;      /* リンク間の余白 */
  padding: 0;
}

/* リンク自体のボタン風スタイルを無効化（高さの原因） */
.entry-content p.link-label + p a.custom-link{
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: inherit !important;
}

.entry-content .wp-block-image.full-width-image > figcaption.wp-element-caption {
  padding: 7vw 8vw !important;
}

.wp-element-caption h2 {
  font-size:clamp(28px, 3vw, 44px )!important;
}

.wp-element-caption p {
  font-size: clamp(18px, 1vw, 22px) !important;
}


@media (min-width: 768px) and (max-width: 1023px) {
  .wp-element-caption p {
  font-size: 18px !important;
  }
}

.custom-list-box li {
  font-size: 16px !important;

}

.custom-list-box strong {
 font-size: 17px !important;
}


.decorate-box strong {
  font-size: 16px !important;
  display: inline-block !important;
  color: #505050 !important;
  margin-bottom: 0 !important;

}

.decorate-box h3 {
  color: #0074C2 !important;
}


@media(min-width: 540px) and (max-width: 767px) {
.wp-element-caption h2 {
  font-size: clamp(24px, 6vw, 28px) !important;

}

.wp-element-caption p {
  font-size: 18px !important;
}

.entry-content .wp-block-image.full-width-image > figcaption.wp-element-caption {
  padding: 10vw 8vw !important;
}
}

@media (max-width: 539px) {
  .wp-element-caption h2 { 
  font-size: clamp(20px, 8vw, 32px) !important;
  }

.wp-element-caption p {
    font-size: 16px !important;
}

.entry-content .wp-block-image.full-width-image > figcaption.wp-element-caption {
  padding: 20vw 8vw !important;
}
}

.article-bottom-banner img {
  border-radius: 9.2px;
}

.article-bottom-banner {
  margin-top: -48px;
}

@media (max-width: 767px) {
  .article-bottom-banner {
    margin-top: -20px;
  }

  .article-bottom-banner img {
  border-radius: 5px;
}

#banner {
  margin-bottom: 40px;
}
}

.sub-heading-text .tag {
  font-weight: 700 !important;
}

.share-icons {
  gap: .32rem !important;
}

.note a {
  color:#1192CD !important;
  text-decoration: underline !important;
}

.note {
  font-size: 16px !important;
  letter-spacing: 0em !important;
}

/* ===== Scroll Hint (bridge method) ===== */

/* 基準点（高さ0）。ここを起点に“間の余白”へ重ねる */
.scroll-hint-bridge{
  position: relative;
  height: 0;
}

.hint-text {
  display: none;
}
/* ヒント本体：中央揃え＆余白の上側に配置 */
.scroll-hint{
  position: absolute;
  left: 50%;
  top: var(--overlap, 28px);      /* 余白への食い込み量（pxで調整） */
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  pointer-events: none;           /* 背後のリンク操作を邪魔しない */
  color: #777;
  font-size: 12px;
  line-height: 1;
  z-index: 10;
}

/* テキスト */
.hint-text{ line-height: 1; }

/* ▼矢印（縦だけ動くアニメーション） */
.chev{
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-block;
  overflow: visible;
}

/* アニメーションは wrapper に */
.chev i{
  position: absolute;
  inset: 0;
  animation: hint-bounce 1.6s ease-in-out infinite;
}

/* 矢印の形は ::before で */
.chev i::before{
  content: "";
  position: absolute;
  inset: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* ← これで固定 */
  transform-origin: center;
}

/* 上下にだけ動かす */
@keyframes hint-bounce{
  0%, 100% { transform: translateY(0);   opacity: .6; }
  50%      { transform: translateY(6px); opacity: 1;  }
}

.scroll-hint {
  display: none !important;
}

.decorate-box h3 {
  font-size: 20px !important;
}

img.wp-smiley, img.emoji {
  margin: 0 0.20em 0 0 !important;
}

.share-btn {
  cursor: pointer;
}

.u-marker {
  color: #505050 !important;
}