/*
 * article.css
 * カスタムHTML化した記事の共通スタイル（ショートカット記事シリーズ等）
 *
 * ルートIDは全記事で #noveblo-article に統一。クラスの接頭辞は na-（noveblo-article）。
 * 記事ごとに別ページなのでID重複は起きない。クラスにすると詳細度が下がりSWELLと競合するためIDのまま統一している。
 * 記事固有の差分が要る場合は、ルートdivに修飾クラスを足して #noveblo-article.na-xxxx で当てる。
 *
 * 適用中の記事（functions.php のスラッグ配列と一致させること）:
 *   - https://noveblo.com/resize-iphone/          (08_Other Articles/html/resize-iphone/)
 *   - https://noveblo.com/heic-to-jpg-iphone/     (08_Other Articles/html/heic-to-jpg-iphone/)
 *   - https://noveblo.com/no-background-iphone/   (08_Other Articles/html/no-background-iphone/)
 *   - https://noveblo.com/pdf-iphone/             (08_Other Articles/html/pdf-iphone/)
 *   - https://noveblo.com/combine-iphone/         (08_Other Articles/html/combine-iphone/)
 *   - https://noveblo.com/shortcuts-image-upload/ (08_Other Articles/html/shortcuts-image-upload/)
 *   - https://noveblo.com/colormode-setting/      (08_Other Articles/html/colormode-setting/)
 *
 * 実行正本はこのファイル（子テーマ直置き）。functions.php でスラッグ配列に一致したときだけ読み込む。
 * 編集したら FTP アップロードが必要（WordPress管理画面には現れない）。
 * この経路は管理画面のWAF保存を通らないため、コメントや通常の変数名を使ってよい。
 * 記事本文のHTMLは 08_Other Articles/html/[slug]/[slug].html（カスタムHTMLブロックへ貼る）。
 */

#noveblo-article {
    --na-main: #04384c;
    --na-border: hsla(0, 0%, 78%, 0.5);
    --na-page-bg: #fdfdfd;
    --na-mark-o: #ffddbc;
    --na-mark-b: #b7e3ff;
    --na-good: #86d67c;
    --na-memo: #84878a;
    --na-caution: #f7da38;
    --na-announce: #ffa537;
    --na-pen: #7a7a7a;
    --na-faq-q: #d55656;
    --na-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 4px -4px rgba(0, 0, 0, .1);
    color: #333;
    line-height: 1.8;
}

#noveblo-article *,
#noveblo-article *::before,
#noveblo-article *::after {
    box-sizing: border-box;
}

#noveblo-article p {
    margin: 0 0 1.5em;
}

#noveblo-article a {
    color: inherit;
}

#noveblo-article img {
    max-width: 100%;
    height: auto;
    display: block;
}

#noveblo-article figure {
    margin: 0;
}

#noveblo-article h2,
#noveblo-article h3,
#noveblo-article h4 {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-weight: 700;
    color: inherit;
}

#noveblo-article h2::before,
#noveblo-article h2::after,
#noveblo-article h3::before,
#noveblo-article h3::after,
#noveblo-article h4::before,
#noveblo-article h4::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

#noveblo-article .na-h2 {
    position: relative;
    z-index: 1;
    background: var(--na-main);
    color: #fff;
    font-size: 1.4em;
    line-height: 1.4;
    padding: .75em 1em;
    margin: 4em 0 2em;
}

#noveblo-article .na-h2::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: -4px;
    left: 0;
    width: 100% !important;
    height: calc(100% + 4px) !important;
    box-sizing: content-box;
    border-top: 2px solid var(--na-main) !important;
    border-bottom: 2px solid var(--na-main) !important;
    pointer-events: none;
}

#noveblo-article .na-h3 {
    position: relative;
    font-size: 1.3em;
    line-height: 1.4;
    padding: 0 .5em .5em;
    margin: 3em 0 1.5em;
}

#noveblo-article .na-h3::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 2px !important;
    background: repeating-linear-gradient(90deg, var(--na-main) 0%, var(--na-main) 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%) !important;
}

/*
 * h4 は h2（帯）・h3（下線）より一段弱い「左の縦バー」で表す。
 * SWELLのTOCは h2 / h3 までを拾う設定のため、h4 は目次に出ない前提の小見出し。
 *
 * リセット側 #noveblo-article h4::before は詳細度 (1,0,2)、こちらは (1,1,1)。
 * !important 同士では詳細度で決まるため、この再定義が勝ってバーが表示される
 * （common_rules.md「意図的に ::before を使う見出しはリセットより強い !important で再定義する」）。
 */
#noveblo-article .na-h4 {
    position: relative;
    font-size: 1.1em;
    line-height: 1.5;
    padding-left: .7em;
    margin: 2.5em 0 1.2em;
}

#noveblo-article .na-h4::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: .25em;
    bottom: .25em;
    left: 0;
    width: 4px !important;
    height: auto !important;
    background: var(--na-main) !important;
    border-radius: 2px;
}

/* カラム先頭の見出しは、カラム上端との余白が二重にならないよう上マージンを消す */
#noveblo-article .na-col > h2:first-child,
#noveblo-article .na-col > h3:first-child,
#noveblo-article .na-col > h4:first-child {
    margin-top: 0;
}

#noveblo-article .na-faq {
    margin-bottom: 1.5em;
}

#noveblo-article .na-faq__q,
#noveblo-article .na-faq__a {
    position: relative;
    padding: 1em 1em 1em 3em;
    line-height: 1.6;
}

#noveblo-article .na-faq__q {
    font-size: 1.1em;
    font-weight: 700;
}

#noveblo-article .na-faq__q::before,
#noveblo-article .na-faq__a::before {
    position: absolute;
    left: 0;
    top: .75em;
    display: block;
    width: 2em;
    line-height: 2;
    text-align: center;
    border-radius: 10%;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

#noveblo-article .na-faq__q::before {
    content: "Q";
    background-color: var(--na-faq-q);
    color: #fff;
}

#noveblo-article .na-faq__a::before {
    content: "A";
    box-shadow: 0 0 0 1px currentcolor;
}

#noveblo-article .na-faq__a > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-notes {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
    font-size: .9em;
    opacity: .85;
}

#noveblo-article .na-notes li {
    position: relative;
    margin: .5em 0;
    padding-left: 1.25em;
    line-height: 1.7;
}

#noveblo-article .na-notes li::before {
    content: "\203B";
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(.75);
    transform-origin: 0 50%;
}

#noveblo-article .na-numlist {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}

#noveblo-article .na-numlist li {
    position: relative;
    margin: .5em 0;
    padding-left: 2.4em;
    line-height: 1.8;
}

#noveblo-article .na-numlist__n {
    position: absolute;
    left: 0;
    top: .2em;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 50%;
    background-color: var(--na-main);
    color: #fff;
    font-size: .85em;
    font-weight: 700;
}

#noveblo-article .na-crease {
    position: relative;
    background-color: #f7f7f7;
    padding: calc(.5em + 20px);
    margin-bottom: 1.5em;
}

#noveblo-article .na-crease::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    background-color: inherit;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: var(--na-page-bg) var(--na-page-bg) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, .05);
}

#noveblo-article .na-intro > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-lead {
    border-left: 2px solid;
    padding-left: 10px;
    font-size: 1.1em;
    margin-bottom: 1em;
}

#noveblo-article .na-callout {
    position: relative;
    border: 2px solid var(--na-callout-color, currentcolor);
    border-radius: 2px;
    padding: 2.5em 2em 2em;
    margin: 2.5em 0 1.5em;
}

#noveblo-article .na-callout::before {
    content: "";
    position: absolute;
    top: 0;
    left: .75em;
    transform: translateY(-50%);
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    border: 2px solid var(--na-page-bg);
    background-color: var(--na-callout-color, currentcolor);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}

#noveblo-article .na-callout > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-callout--good,
#noveblo-article .na-callout--check {
    --na-callout-color: var(--na-good);
}

#noveblo-article .na-callout--good::before,
#noveblo-article .na-callout--check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

#noveblo-article .na-callout--memo {
    --na-callout-color: var(--na-memo);
}

#noveblo-article .na-callout--memo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M9 11h6M9 15h6'/%3E%3C/svg%3E");
}

#noveblo-article .na-callout--caution {
    --na-callout-color: var(--na-caution);
}

#noveblo-article .na-callout--caution::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10.7 4h2.6v10h-2.6z'/%3E%3Ccircle cx='12' cy='18.4' r='1.6'/%3E%3C/svg%3E");
}

#noveblo-article .na-note {
    position: relative;
    border-radius: 2px;
    line-height: 1.7;
    padding: 1em 1em 1em 4.25em;
    margin-bottom: 1.5em;
}

#noveblo-article .na-note::before {
    content: "";
    position: absolute;
    left: 1.1em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#noveblo-article .na-note::after {
    content: "";
    position: absolute;
    left: 3.25em;
    top: 25%;
    height: 50%;
    width: 0;
    border-right: 1px solid var(--na-note-color, currentcolor);
    opacity: .4;
}

#noveblo-article .na-note--pen {
    --na-note-color: var(--na-pen);
    background: #f7f7f7;
}

#noveblo-article .na-note--pen::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1.2L19 8.3 15.7 5 5.2 15.5z'/%3E%3Cpath d='M14.2 6.5l3.3 3.3'/%3E%3C/svg%3E");
}

#noveblo-article .na-note--announce {
    --na-note-color: var(--na-announce);
    background: #fff5f0;
}

#noveblo-article .na-note--announce::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffa537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5v5h3.5L13 19V5L6.5 9.5z'/%3E%3Cpath d='M16.5 9a4.2 4.2 0 010 6'/%3E%3Cpath d='M19.5 6.2a8.2 8.2 0 010 11.6'/%3E%3C/svg%3E");
}

#noveblo-article .na-blogcard {
    display: flex;
    align-items: center;
    gap: .5em;
    line-height: 1.5;
    margin: 0 0 1.5em;
    text-decoration: none;
}

#noveblo-article .na-blogcard__icon {
    flex: 0 0 auto;
    display: inline-flex;
    border: 1px solid;
    border-radius: 50%;
    padding: 4px;
    font-size: .9em;
}

#noveblo-article .na-blogcard__icon svg {
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

#noveblo-article .na-blogcard__text {
    text-decoration: underline;
}

#noveblo-article .na-blogcard:hover .na-blogcard__text {
    text-decoration: none;
}

#noveblo-article .na-acc {
    margin: 0 0 .5em;
    background: rgba(150, 150, 150, .08);
}

#noveblo-article .na-acc--bordered {
    background: none;
    border: 1px solid var(--na-border);
}

#noveblo-article .na-acc__ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    cursor: pointer;
    list-style: none;
    font-weight: 400;
}

#noveblo-article .na-acc__ttl::-webkit-details-marker {
    display: none;
}

#noveblo-article .na-acc__label {
    flex: 1 1 auto;
    padding-right: 1em;
}

#noveblo-article .na-acc__icon {
    position: relative;
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    transition: transform .25s;
}

#noveblo-article .na-acc__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .5em;
    height: .5em;
    margin-top: -.35em;
    margin-left: -.25em;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(45deg);
}

#noveblo-article .na-acc[open] .na-acc__icon {
    transform: rotate(180deg);
}

#noveblo-article .na-acc__body {
    padding: 1em;
}

#noveblo-article .na-acc--bordered .na-acc__body {
    border-top: 1px dashed var(--na-border);
    margin: 0 .5em;
    padding: 1em .5em;
}

#noveblo-article .na-acc__body > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-acc.is-na-animating .na-acc__body {
    overflow: hidden;
}

#noveblo-article .na-hr {
    border: none;
    border-top: 1px solid var(--na-border);
    margin: 2em 0;
    opacity: .8;
}

#noveblo-article .na-steps {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}

/* STEPは「バッジ＋タイトル」を1本の帯にして手順の切れ目を強調し、本文は帯の下に全幅で置く。 */
#noveblo-article .na-step {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 0 3em;
    padding: 0;
}

#noveblo-article .na-step:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-step__num {
    flex: 0 0 auto;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--na-main);
    color: #fff;
    line-height: 1;
    text-align: center;
}

#noveblo-article .na-step__label {
    font-size: 10px;
    letter-spacing: .04em;
    padding-bottom: 3px;
    opacity: .85;
}

#noveblo-article .na-step__no {
    font-size: 22px;
    font-weight: 700;
}

#noveblo-article .na-step__ttl {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px;
    padding: .5em .9em;
    background: rgba(5, 70, 95, .07);
    border-bottom: 2px solid var(--na-main);
    font-size: 1.15em;
    line-height: 1.4;
}

#noveblo-article .na-step__body {
    flex: 0 0 100%;
    margin-top: 1.25em;
    margin-left: 0;
}

#noveblo-article .na-step__body > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1.5em;
}

#noveblo-article .na-col {
    flex: 1 1 0;
    min-width: 0;
}

#noveblo-article .na-col > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-cols--middle {
    align-items: center;
}

#noveblo-article .na-cols--wide-narrow > .na-col:first-child {
    flex: 1 1 66%;
}

#noveblo-article .na-cols--wide-narrow > .na-col:last-child {
    flex: 1 1 33%;
}

#noveblo-article .na-cols--narrow-wide > .na-col:first-child {
    flex: 1 1 33%;
}

#noveblo-article .na-cols--narrow-wide > .na-col:last-child {
    flex: 1 1 66%;
}

#noveblo-article .na-cols--gap {
    margin-top: 1.5em;
}

/*
 * スクショの手順番号はCSSカウンタで振る（本文HTML側に手書きの番号を置かないため、
 * 順番の入れ替えや差し替えをしても番号が崩れない）。
 * counter系は "count" を含むWAF禁止トークンだが、このファイルは子テーマ直置きで
 * 管理画面のWAF保存を通らないため使用できる（common_rules.md 0-1）。
 */
#noveblo-article .na-cols--cards {
    background-color: rgba(5, 70, 95, .05);
    padding: 1.25em;
    gap: 1rem;
    counter-reset: na-shot;
}

#noveblo-article .na-cols--warm {
    background-color: #fdf9ee;
}

/*
 * 手順ではないカード列（作例の並べ比べなど）用。
 * 囲みの地色と連番バッジを外し、カードだけを並べる。
 * ファイル末尾のメディアクエリが .na-cols--cards の padding を上書きするため、
 * クラス2つ分の詳細度にして記述位置に依存しないようにしている。
 */
#noveblo-article .na-cols--cards.na-cols--plain {
    background-color: transparent;
    padding: 0;
}

#noveblo-article .na-cols--cards.na-cols--plain > .na-col::before {
    content: none;
}

#noveblo-article .na-cols--cards > .na-col {
    position: relative;
    background: #fff;
    box-shadow: var(--na-shadow);
    padding: .85em;
    counter-increment: na-shot;
}

#noveblo-article .na-cols--cards > .na-col::before {
    content: counter(na-shot);
    position: absolute;
    top: -.5em;
    left: -.5em;
    z-index: 2;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 50%;
    background: var(--na-main);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .95em;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

#noveblo-article .na-cols--compare > .na-col {
    box-shadow: var(--na-shadow);
    padding: 1.25em;
}

#noveblo-article .na-col--before {
    background-color: #fff2f0;
}

#noveblo-article .na-col--after {
    background-color: #f3f8fd;
}

#noveblo-article .na-figure {
    margin: 0 0 .75em;
}

/*
 * 画像を縦に並べるときの間隔は 1rem。
 * .na-figure の margin-bottom は .75em だが、通常フローでは隣接マージンが相殺され
 * max(.75em, 1rem) = 1rem になる。作例の縦並びや【発展】の2枚並びがこれに当たる。
 */
#noveblo-article .na-figure + .na-figure {
    margin-top: 1rem;
}

#noveblo-article .na-figure--shadow img {
    box-shadow: var(--na-shadow);
}

/*
 * 画像は既定でセンター合わせにする。
 * 1枚だけ置くケース（カード列に入らない図・カードが1枚だけの列）で左に寄って見えるのを防ぐ。
 * カード内など画像がコンテナ幅いっぱいに広がる場合は、この指定があっても見た目は変わらない。
 *
 * .na-figure--center は既存HTMLとの互換のために残してある（同じ指定なので実質no-op）。
 * 新しく書くHTMLでは付けなくてよい。
 */
#noveblo-article .na-figure img,
#noveblo-article .na-figure--center img {
    margin-left: auto;
    margin-right: auto;
}

/*
 * 透過PNGの見本用。白背景のカードに置くと「背景白」と見分けが付かないため、
 * 市松模様を敷いて透明であることを分かるようにする。
 */
#noveblo-article .na-figure--checker img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #dfe3e8 25%, transparent 25%, transparent 75%, #dfe3e8 75%),
        linear-gradient(45deg, #dfe3e8 25%, transparent 25%, transparent 75%, #dfe3e8 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

#noveblo-article .na-figcap {
    margin-top: .5em;
    font-size: .8em;
    text-align: center;
    opacity: .8;
    line-height: 1.5;
}

#noveblo-article .na-cap {
    text-align: center;
    font-size: .9em;
    line-height: 1.6;
    margin: 0 0 .5em;
}

#noveblo-article .na-cap:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-mininote {
    display: inline-block;
    font-size: .8em;
    line-height: 1.5;
    opacity: .75;
}

#noveblo-article .na-zoomhint {
    margin: 0 0 4px;
    text-align: right;
}

#noveblo-article .na-zoomhint span {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    opacity: .7;
}

#noveblo-article .na-zoomhint span::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* min-width を外して折り返しで収める。overflow-x は極端に狭い端末向けの保険として残す。 */
#noveblo-article .na-tablewrap {
    overflow-x: auto;
    margin: 0 0 1.5em;
    cursor: zoom-in;
}

#noveblo-article .na-tablewrap:focus-visible {
    outline: 3px solid var(--na-main);
    outline-offset: 2px;
}

#noveblo-article .na-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .95em;
}

/*
 * SWELLは th に白文字を当てている（濃い背景を前提としたスタイル）。
 * 背景だけ上書きして color を指定しないと「ほぼ白の背景に白文字」になり実質不可視になる。
 * 実際にそれで見えなくなっていたため、th / td とも color を明示すること。
 */
#noveblo-article .na-table th,
#noveblo-article .na-table td {
    border: 1px solid #dcdcdc;
    padding: .6em .8em;
    text-align: center;
    line-height: 1.6;
    color: #333;
}

#noveblo-article .na-table thead th {
    background: var(--na-main);
    border-color: var(--na-main);
    color: #fff;
    font-weight: 700;
}

#noveblo-article .na-table tbody td:first-child {
    background: rgba(5, 70, 95, .07);
    font-weight: 700;
}

#noveblo-article .na-balloon {
    position: relative;
    width: fit-content;
    margin: 0 auto 1.25em;
    padding: .5em 1.25em;
    background-color: #fff;
    border: 1px solid;
    border-radius: 2px;
    line-height: 1.4;
    font-size: 1.1em;
    text-align: center;
}

#noveblo-article .na-balloon::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: inherit;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: translateX(-50%) rotate(45deg);
}

#noveblo-article .na-mark-o {
    display: inline;
    padding: 2px;
    background: linear-gradient(transparent 64%, var(--na-mark-o) 0%);
}

#noveblo-article .na-mark-b {
    display: inline;
    padding: 2px;
    background: linear-gradient(transparent 64%, var(--na-mark-b) 0%);
}

#noveblo-article .na-big {
    font-size: 1.1em;
}

#noveblo-article .na-linklist {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}

#noveblo-article .na-linklist li {
    margin: 0;
    padding: 0;
}

#noveblo-article .na-linklist li::before {
    content: none;
}

#noveblo-article .na-linklist a {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .75em 0;
    line-height: 1.5;
    text-decoration: none;
    border-bottom: 1px solid var(--na-border);
    transition: color .25s;
}

#noveblo-article .na-linklist li:first-child a {
    border-top: 1px solid var(--na-border);
}

#noveblo-article .na-linklist a:hover {
    color: var(--na-main);
}

#noveblo-article .na-linklist__icon {
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304384c' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.5 8.5l3.5 3.5-3.5 3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: transform .25s;
}

#noveblo-article .na-linklist__text {
    flex: 1 1 auto;
}

#noveblo-article .na-linklist a:hover .na-linklist__icon {
    transform: translateX(.3em);
}

#noveblo-article .na-embed {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
}

#noveblo-article .na-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

#noveblo-article .na-figure img {
    cursor: zoom-in;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

#noveblo-article .na-figure img:focus-visible {
    outline: 3px solid var(--na-main);
    outline-offset: 2px;
}

#noveblo-article .na-lightbox {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

#noveblo-article .na-lightbox::backdrop {
    background: rgba(0, 0, 0, .88);
}

#noveblo-article .na-lightbox__shell {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 16px 24px;
    background: rgba(0, 0, 0, .88);
}

#noveblo-article .na-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

/* 表など画像以外を拡大するときの差し込み先。JSで is-na-slotmode を付けて切り替える。 */
#noveblo-article .na-lightbox__slot {
    display: none;
    width: 100%;
    max-width: 40em;
    max-height: 100%;
    overflow: auto;
}

#noveblo-article .na-lightbox.is-na-slotmode .na-lightbox__img {
    display: none;
}

#noveblo-article .na-lightbox.is-na-slotmode .na-lightbox__slot {
    display: block;
}

#noveblo-article .na-lightbox__slot .na-table {
    font-size: 1.05em;
    cursor: default;
}

#noveblo-article .na-lightbox__slot .na-table th,
#noveblo-article .na-lightbox__slot .na-table td {
    padding: .7em .8em;
}

#noveblo-article .na-lightbox__cap {
    flex: 0 0 auto;
    max-width: 40em;
    margin: 0;
    color: #fff;
    font-size: .85em;
    line-height: 1.5;
    text-align: center;
}

#noveblo-article .na-lightbox__cap:empty {
    display: none;
}

#noveblo-article .na-lightbox__shut {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    transition: background .2s;
}

#noveblo-article .na-lightbox__shut:hover {
    background: rgba(255, 255, 255, .3);
}

#noveblo-article .na-lightbox__shut::before,
#noveblo-article .na-lightbox__shut::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    margin-left: -10px;
    background: #fff;
}

#noveblo-article .na-lightbox__shut::before {
    transform: rotate(45deg);
}

#noveblo-article .na-lightbox__shut::after {
    transform: rotate(-45deg);
}

/*
 * 1行あたり最大4枚に制限する（.na-cols--cards と併用）。
 * 手順カードが5枚以上ある行で使う。5枚以上を素の .na-cols--cards に入れると
 * flex: 1 1 0 で1行に全部詰め込まれ、1枚あたりが極端に細くなって読めなくなる。
 *
 * コンテナは1つのままなので counter-reset が走らず、連番（1〜7 など）が途切れない。
 * 分割して2コンテナにすると番号が振り直される（wp_articles_rules.md 7-3 罠13）。
 *
 * .na-cols--cards > .na-col より詳細度が1つ高いため、
 * 下のメディアクエリ側にも .na-cols--max4 付きの打ち消しを置いてある（無いとスマホでも4列のままになる）。
 */
#noveblo-article .na-cols--cards.na-cols--max4 > .na-col {
    flex: 0 0 calc(25% - .75rem);
    max-width: calc(25% - .75rem);
}

/*
 * カードが1枚だけの列は、全幅に伸ばさず中身の幅に縮めて中央に置く。
 * 全幅のままだと画像だけが中央にぽつんと残り、左上の連番バッジも遠く離れて見える。
 *
 * .na-cols--max4 と詳細度が同じ (1,3,0) なので、必ずその後ろに書くこと（後勝ちで効かせている）。
 * スマホ側の2列指定 (1,2,0) より高いので、メディアクエリでの打ち消しは不要。
 */
#noveblo-article .na-cols--cards > .na-col:only-child {
    flex: 0 0 auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
 * ショートカット配布ボタン（.na-dl）
 * iCloudの配布リンクが「こちら」という地の文リンクで埋もれていたのを、押せると分かる形にする。
 * アイコンは ::before ではなく専用spanの background-image。
 * データURIはこのファイル（子テーマ直置き＝WAF検査を通らない）に置き、
 * 本文HTML側にはクラスしか書かせない（common_rules.md 0-1）。
 */
#noveblo-article .na-dl {
    display: flex;
    align-items: center;
    gap: .9em;
    max-width: 560px;
    margin: 0 auto 1em;
    padding: 1em 1.4em;
    border-radius: 12px;
    background: var(--na-main);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 6px 14px rgba(4, 56, 76, .25);
    transition: transform .15s, box-shadow .15s, background .15s;
}

#noveblo-article .na-dl:hover {
    background: #06506d;
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 3px 8px rgba(4, 56, 76, .25);
}

#noveblo-article .na-dl:focus-visible {
    outline: 3px solid var(--na-announce);
    outline-offset: 3px;
}

#noveblo-article .na-dl__icon {
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M7.5 10l4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4 19.5h16'/%3E%3C/svg%3E");
}

#noveblo-article .na-dl__body {
    flex: 1 1 auto;
    min-width: 0;
}

#noveblo-article .na-dl__ttl {
    display: block;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: .2em;
}

#noveblo-article .na-dl__note {
    display: block;
    margin-top: .3em;
    font-size: .78em;
    line-height: 1.5;
    opacity: .85;
}

#noveblo-article .na-dl__arrow {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    transition: transform .15s;
}

#noveblo-article .na-dl:hover .na-dl__arrow {
    transform: translateX(.25em);
}

/*
 * 切り替えタブ（.na-switch）
 * 「OneDriveの場合／Googleドライブの場合」のように、読者がどちらか一方を選ぶ分岐で使う。
 * SWELLのタブブロックの置き換え。
 *
 * 本文HTMLには .na-switch__nav / __btn / __pane と data-na-key しか置かない。
 * role や aria-selected は article.js が実行時に付ける。
 * 理由: 本文HTMLはカスタムHTMLブロック経由でWAFの保存検査を通るため、
 *       "selected" のようなSQL予約語を含む文字列を持たせたくない（common_rules.md 3-1）。
 *
 * JSが動かない環境では pane に hidden が付かないので、全パネルがそのまま縦に並ぶ。
 * 内容が消えないフォールバックになっている。
 */
#noveblo-article .na-switch {
    margin: 0 0 1.5em;
}

#noveblo-article .na-switch__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--na-main);
}

#noveblo-article .na-switch__btn {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d6dde3;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #eef2f5;
    color: #55636e;
    font-family: inherit;
    font-size: .95em;
    font-weight: 700;
    line-height: 1.4;
    padding: .7em 1em;
    cursor: pointer;
    transition: background .15s, color .15s;
}

#noveblo-article .na-switch__btn:hover {
    background: #e2e8ee;
}

#noveblo-article .na-switch__btn.is-na-on {
    background: var(--na-main);
    border-color: var(--na-main);
    color: #fff;
}

#noveblo-article .na-switch__btn:focus-visible {
    outline: 3px solid var(--na-main);
    outline-offset: 2px;
}

#noveblo-article .na-switch__pane {
    padding-top: 1.5em;
}

#noveblo-article .na-switch__pane > *:last-child {
    margin-bottom: 0;
}

#noveblo-article .na-switch__pane[hidden] {
    display: none;
}

@media (min-width: 782px) {
    #noveblo-article .na-cols--cards {
        padding: 1.5em;
    }
}

@media (max-width: 781px) {
    #noveblo-article .na-cols > .na-col {
        flex-basis: 100%;
    }

    #noveblo-article .na-cols--wide-narrow > .na-col,
    #noveblo-article .na-cols--narrow-wide > .na-col {
        flex: 1 1 100%;
    }

    #noveblo-article .na-cols--narrow-wide > .na-col:first-child {
        max-width: 60%;
        margin: 0 auto;
    }

    #noveblo-article .na-cols--cards,
    #noveblo-article .na-cols--compare {
        gap: .75rem;
    }

    #noveblo-article .na-cols--cards > .na-col,
    #noveblo-article .na-cols--compare > .na-col {
        flex: 0 0 calc(50% - .375rem);
        max-width: calc(50% - .375rem);
    }

    /* .na-cols--max4 は上の指定より詳細度が高いので、スマホの2列を同じ詳細度で書き直す */
    #noveblo-article .na-cols--cards.na-cols--max4 > .na-col {
        flex: 0 0 calc(50% - .375rem);
        max-width: calc(50% - .375rem);
    }

    #noveblo-article .na-cols--cards > .na-col {
        padding: .6em;
    }

    #noveblo-article .na-cols--cards > .na-col::before {
        top: -.4em;
        left: -.4em;
        width: 1.8em;
        height: 1.8em;
        line-height: 1.8em;
        font-size: .85em;
    }

    #noveblo-article .na-cols--compare > .na-col {
        padding: .75em;
    }

    #noveblo-article .na-cap {
        font-size: .8em;
    }

    #noveblo-article .na-balloon {
        font-size: .95em;
        padding: .4em .9em;
    }
}

@media (max-width: 599px) {
    #noveblo-article .na-h2 {
        font-size: 1.25em;
        margin: 3em 0 1.5em;
    }

    #noveblo-article .na-h3 {
        font-size: 1.15em;
    }

    #noveblo-article .na-h4 {
        font-size: 1.05em;
        margin: 2em 0 1em;
    }

    #noveblo-article .na-step__num {
        width: 48px;
    }

    #noveblo-article .na-step__no {
        font-size: 20px;
    }

    #noveblo-article .na-step__ttl {
        min-height: 48px;
        padding: .5em .7em;
        font-size: 1.05em;
    }

    #noveblo-article .na-table {
        font-size: .85em;
    }

    #noveblo-article .na-table th,
    #noveblo-article .na-table td {
        padding: .5em .4em;
    }

    /* 見出し列は途中で折らない。数値列は折り返させて幅を吸収する。 */
    #noveblo-article .na-table tbody td:first-child {
        white-space: nowrap;
    }

    #noveblo-article .na-callout {
        padding: 2.25em 1.25em 1.25em;
    }

    #noveblo-article .na-crease {
        padding: calc(.5em + 14px);
    }

    #noveblo-article .na-note {
        padding-left: 3.75em;
    }

    #noveblo-article .na-cols--cards {
        padding: 1em;
    }

    #noveblo-article .na-dl {
        gap: .7em;
        padding: .9em 1em;
    }

    #noveblo-article .na-dl__icon {
        width: 1.7em;
        height: 1.7em;
    }

    #noveblo-article .na-dl__ttl {
        font-size: 1em;
    }
}