@charset "UTF-8";

/* ============================================================
   I・M・PRESS SEO記事用テンプレートCSS
   既存サイト（impress.mercury-group.co.jp）のトンマナに準拠
   - フォント     : 秀英丸ゴシック（TypeSquare）
   - 見出し       : 背景 #eaf3ff ＋ 下線 #516ab6（テストサーバー準拠）
   - リスト       : 水色ドット #49c4ef
   - テキストリンク: オレンジ #ff9e00
   - マーカー     : あお #b4e1fa ／ ぴんく #F7C6E5 ／ みどり #b2ffb2
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
}

/* ---------- 目次（Easy Table of Contents プラグインのDOMに対応） ----------
   対応DOM:
   <div id="ez-toc-container" class="ez-toc-v2_0_85 ez-toc-wrap-left counter-hierarchy
        ez-toc-counter ez-toc-custom ez-toc-container-direction toc_close">
     <div class="ez-toc-title-container">
       <p class="ez-toc-title">目次</p>
       <span class="ez-toc-title-toggle"><a class="... ez-toc-toggle">（SVGアイコン）</a></span>
     </div>
     <nav><ul class="ez-toc-list ez-toc-list-level-1">
       <li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link" href="#...">見出し</a></li>
     </ul></nav>
   </div>
   ------------------------------------------------------------------------ */
div#ez-toc-container {
    display: table;
    width: auto;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #548dbf;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 40px 0;
    position: relative;
}

/* タイトル行（「目次」＋トグルボタン） */
div#ez-toc-container .ez-toc-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

div#ez-toc-container p.ez-toc-title {
    color: #777777;
    font-size: 100%;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    display: inline-block;
}

/* トグルボタン */
div#ez-toc-container .ez-toc-title-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 3px 6px;
    background: #ffffff;
    line-height: 0;
    text-decoration: none;
}

div#ez-toc-container .ez-toc-title-toggle a:hover {
    background: #f5f5f5;
}

div#ez-toc-container .ez-toc-js-icon-con svg {
    vertical-align: middle;
}

div#ez-toc-container .eztoc-hide {
    display: none;
}

/* リスト本体 */
div#ez-toc-container nav {
    margin-top: 10px;
}

div#ez-toc-container ul.ez-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

div#ez-toc-container ul.ez-toc-list li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 6px;
    padding: 0;
}

div#ez-toc-container ul.ez-toc-list li::before {
    content: none;
    /* 記事本文ul用の水色ドットを無効化 */
}

/* 番号付き階層（counter-hierarchy / ez-toc-counter） */
div#ez-toc-container.counter-hierarchy ul {
    counter-reset: item;
}

div#ez-toc-container.counter-hierarchy ul li {
    display: block;
}

div#ez-toc-container.counter-hierarchy ul li::before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    color: #129cce;
}

/* 入れ子（h3レベル）の目次 */
div#ez-toc-container ul.ez-toc-list ul {
    margin: 6px 0 0 1.2em;
    padding: 0;
    list-style: none;
}

/* リンク色（既存サイトのez-toc設定と同じ） */
div#ez-toc-container ul.ez-toc-list a {
    color: #129cce;
    text-decoration: none;
}

div#ez-toc-container ul.ez-toc-list a:hover {
    color: #2a6496;
    text-decoration: underline;
}

div#ez-toc-container ul.ez-toc-list a:visited {
    color: #848484;
}

/* 折りたたみ時（ulにdisplay:noneが入る想定。JSなしでも崩れないように） */
div#ez-toc-container.toc_close nav ul[style*="display: none"] {
    display: none;
}

/* 見出し内のアンカー用スパン（ez-tocが自動挿入するものと同じ） */
.ez-toc-section {
    display: inline-block;
}

/* ---------- 見出し ---------- */
/* 記事タイトル */
.article h1 {
    font-size: 30px;
    font-family: '秀英丸ゴシック B', 'Shuei MaruGo B', 'Hiragino Maru Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 30px;
}

/* 大見出し（h2） */
.article h2 {
    font-size: 24px;
    font-family: '秀英丸ゴシック B', 'Shuei MaruGo B', 'Hiragino Maru Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: bold;
    line-height: 1.5;
    padding: 0.5em;
    color: #010101;
    background: #eaf3ff;
    border-bottom: solid 3px #516ab6;
    margin: 60px 0 25px;
}

/* 中見出し（h3） */
.article h3 {
    font-size: 20px;
    font-family: '秀英丸ゴシック B', 'Shuei MaruGo B', 'Hiragino Maru Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: bold;
    line-height: 1.5;
    color: #010101;
    padding: 0.4em 0.6em;
    border-left: solid 5px #516ab6;
    border-bottom: solid 1px #c3d5f2;
    margin: 40px 0 15px;
}

/* ---------- 本文 ---------- */
.article p {
    margin: 25px 0;
    font-size: 17px;
    line-height: 1.9;
    text-align: justify;
}

.article h2 + p,
.article h3 + p {
    margin-top: 15px;
}

/* リスト */
.article ul {
    margin: 30px 0;
    padding-left: 0;
    list-style: none;
}

.article li {
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 8px;
}

.article ul li::before {
    content: "";
    background: #49c4ef;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 1px;
}

.article ol {
    margin: 30px 0;
    padding-left: 1.6em;
}

.article ol li {
    font-size: 17px;
}

/* テキストリンク */
.article a {
    color: #ff9e00;
}

.article a:hover {
    color: #c8c8c8;
}

/* 強調・マーカー（既存記事のエディタ装飾を再現） */
.article strong {
    font-weight: bold;
}

.marker-blue {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #b4e1fa 0%);
    font-weight: bold;
}

.marker-pink {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #F7C6E5 0%);
    font-weight: bold;
}

.marker-green {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #b2ffb2 0%);
    font-weight: bold;
}

/* ---------- 目次 ---------- */
.toc {
    background: #ffffff;
    border: 1px solid #548dbf;
    padding: 20px 25px;
    margin: 40px 0;
}

.toc-title {
    color: #777777;
    font-size: 16px;
    margin: 0 0 10px;
    font-weight: bold;
}

.toc ol {
    margin: 0;
    padding-left: 1.4em;
}

.toc li {
    font-size: 15px;
    margin-bottom: 6px;
}

.toc a {
    color: #129cce;
    text-decoration: none;
}

.toc a:hover {
    color: #2a6496;
    text-decoration: underline;
}

/* ---------- 引用（一般） ---------- */
.article blockquote {
    position: relative;
    margin: 30px 0;
    padding: 25px 30px 25px 55px;
    background: #f5f6f8;
    border-left: solid 4px #9fb3d9;
    font-size: 16px;
    line-height: 1.9;
    color: #323232;
}

.article blockquote::before {
    content: "“";
    position: absolute;
    top: 6px;
    left: 14px;
    font-size: 48px;
    line-height: 1;
    color: #9fb3d9;
    font-family: Georgia, serif;
}

.article blockquote p {
    margin: 0 0 10px;
    font-size: 16px;
}

.article blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
    color: #777777;
    text-align: right;
}

/* ---------- 引用（社員インタビュー） ---------- */
.interview {
    position: relative;
    margin: 30px 0;
    padding: 30px;
    background: #eaf3ff;
    border: solid 2px #516ab6;
    border-radius: 10px;
}

.interview::before {
    content: "社員インタビュー";
    position: absolute;
    top: -14px;
    left: 20px;
    background: #516ab6;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 14px;
    letter-spacing: 0.1em;
}

.interview p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.9;
}

.interview p:last-child {
    margin-bottom: 0;
}

/* インタビュー前後の注記（※以下は～） */
.interview-note {
    font-size: 13px;
    color: #777777;
    margin: 20px 0 10px;
}

/* ---------- YouTubeリンクカード ---------- */
.yt-card {
    display: flex;
    align-items: center;
    margin: 30px 0;
    border: solid 1px #d5d5d5;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    text-decoration: none;
    color: #000000 !important;
    transition: box-shadow 0.2s;
    padding: 15px;
}

.yt-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    color: #000000 !important;
}

.yt-card-thumb {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    border-radius: 12px;
    overflow: hidden;
}

.yt-card-thumb img {
    display: block;
    width: 100%;
}

/* 再生ボタン */
.yt-card-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 38px;
    background: rgba(230, 33, 23, 0.9);
    border-radius: 8px;
}

.yt-card-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #ffffff;
    z-index: 1;
}

.yt-card-body {
    padding: 15px 20px;
}

.yt-card-label {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    background: #e62117;
    border-radius: 3px;
    padding: 3px 8px;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.yt-card-title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.yt-card-url {
    display: block;
    font-size: 12px;
    color: #777777;
    margin-top: 6px;
    word-break: break-all;
}

/* ---------- 関連記事リンクカード（note・ブログなど） ---------- */
.link-card {
    display: block;
    margin: 30px 0;
    padding: 18px 22px;
    border: solid 1px #d5d5d5;
    border-left: solid 5px #516ab6;
    border-radius: 6px;
    background: #ffffff;
    text-decoration: none;
    color: #000000 !important;
    transition: box-shadow 0.2s;
}

.link-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    color: #000000 !important;
}

.link-card-label {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: #516ab6;
    border: solid 1px #516ab6;
    border-radius: 3px;
    padding: 2px 8px;
    margin-bottom: 6px;
    letter-spacing: 0.1em;
}

.link-card-title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.link-card-url {
    display: block;
    font-size: 12px;
    color: #777777;
    margin-top: 6px;
    word-break: break-all;
}

/* ---------- CTA（応募導線） ---------- */
.cta {
    margin: 40px 0 40px;
    padding: 30px;
    background: #eaf3ff;
    border-radius: 10px;
    text-align: center;
}

.cta p {
    font-size: 16px;
    margin: 0 0 20px;
    text-align: center;
}

.cta-btn {
    display: inline-block;
    background: #516ab6;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    padding: 18px 40px;
    border-radius: 40px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.cta-btn:hover {
    opacity: 0.8;
    color: #ffffff !important;
}

/* 強調・マーカー（本番エディタのマーカースタイルと同一） */
.article strong {
    font-weight: bold;
}

/* 色文字（本文の強調用。本番の色文字と同系統） */
.txt-blue {
    color: #1a6fb4;
}

.txt-red {
    color: #e2412f;
}

/* マーカー あお／ぴんく／みどり */
.blue {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #b4e1fa 0%);
}

.pink {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #F7C6E5 0%);
}

.green {
    padding: 0 0.3em;
    background: linear-gradient(transparent 50%, #b2ffb2 0%);
}

/* ---------- スマホ対応 ---------- */
@media screen and (max-width: 768px) {
    .article h1 {
        font-size: 24px;
    }

    .article h2 {
        font-size: 20px;
    }

    .article h3 {
        font-size: 18px;
    }

    .article p,
    .article li {
        font-size: 16px;
        line-height: 1.8;
    }
}

@media screen and (max-width: 512px) {
    .article {
        padding: 25px 15px 50px;
    }

    .article h1 {
        font-size: 21px;
        margin-bottom: 20px;
    }

    .article h2 {
        font-size: 18px;
        margin: 45px 0 20px;
    }

    .article h3 {
        font-size: 16px;
        margin: 30px 0 10px;
    }

    .article p,
    .article li {
        font-size: 14px;
        margin: 20px 0;
    }

    .article ul li::before {
        width: 8px;
        height: 8px;
        margin-right: 7px;
    }

    .article blockquote {
        padding: 20px 20px 20px 45px;
        font-size: 14px;
    }

    .interview {
        padding: 25px 20px 20px;
    }

    .interview p {
        font-size: 14px;
    }

    .yt-card {
        flex-direction: column;
        align-items: stretch;
    }

    .yt-card-thumb {
        width: 100%;
    }

    .yt-card-body {
        padding: 12px 15px;
    }

    .cta {
        padding: 25px 20px;
    }

    .cta-btn {
        font-size: 15px;
        padding: 16px 30px;
    }
}