@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.12
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ▼▼▼ ここからデザインの定義（CSS） ▼▼▼ */
.subcat-nav-container {
    background-color: #f8f9fa; /* 背景色（薄いグレー） */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5em 1em;
    margin-bottom: 2.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.subcat-nav-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.2em;
}

.subcat-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列表示 */
    gap: 12px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* PCやタブレット（画面幅768px以上）では3列表示にする */
@media (min-width: 768px) {
    .subcat-nav-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.subcat-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.subcat-nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    padding: 12px 8px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
}

/* マウスカーソルを乗せた時の動き（ホバーエフェクト） */
.subcat-nav-list a:hover {
    background-color: #3498db; /* ホバー時の背景色（ブルー） */
    color: #ffffff; /* ホバー時の文字色（白） */
    border-color: #3498db;
    transform: translateY(-2px); /* 少し上に浮くアニメーション */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* ▲▲▲ ここまでデザインの定義（CSS） ▲▲▲ */

/* ===== REALINE design 2026-10-08 (BEGIN) ===== */
/* 仕様: F:\REALINEAI\realineme\realineme_P1デザイン仕様書_S2施策案_20261008.md（色を変える時は :root と仕様書の表を合わせる） */
:root{--rl-indigo:#2B4590;--rl-indigo-d:#1E3270;--rl-base:#1E2A5A;--rl-bg:#F4F6FA;--rl-tint:#E8EDF8;--rl-text:#1F2633;--rl-muted:#5A6473;--rl-line:#D9DEE8;--rl-green:#2E7D5B;--rl-amber:#9A6B1A;--rl-teal:#1F7A8C;--rl-slate:#556070;--rl-violet:#6B4BA3;--rl-badge-bg:#FDE9C9;--rl-badge-tx:#6B4A0E;--rl-radius:12px}
body.public-page{background:var(--rl-bg);color:var(--rl-text)}
.public-page a{color:var(--rl-indigo)}
.public-page a:hover{color:var(--rl-indigo-d)}
/* ヘッダー：上端に6色のインデックスタブの帯、白地、ロゴ画像 */
#header-container::before{content:"";display:block;height:8px;background:linear-gradient(90deg,var(--rl-indigo) 0 16.6%,var(--rl-green) 0 33.3%,var(--rl-amber) 0 50%,var(--rl-teal) 0 66.6%,var(--rl-slate) 0 83.3%,var(--rl-violet) 0)}
#header,#header-container{background:#fff}
#header-in{padding:12px 0}
/* ロゴは高さを固定して読込後のずれ（CLS）を防ぐ。画像は 520×110（width/height 属性は Cocoon 設定で出力） */
.logo-header{min-height:56px}
.logo-header img{height:56px;width:auto;max-width:100%;aspect-ratio:520/110}
#navi,#navi .navi-in>ul{background:var(--rl-indigo)}
#navi .navi-in>ul>li>a{color:#fff;font-weight:700;letter-spacing:.02em}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li>a:focus-visible{background:var(--rl-indigo-d);color:#fff}
#navi .navi-in>.menu-header .sub-menu{background:var(--rl-indigo-d)}
#navi .navi-in>.menu-header .sub-menu a:hover{background:var(--rl-base)}
/* スマホのヘッダーメニューは横1行で横スクロール（折り返して画面上部を占めない） */
@media screen and (max-width:1023px){#navi .navi-in>ul.menu-mobile{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}#navi .navi-in>ul.menu-mobile>li{flex:0 0 auto;width:auto}#navi .navi-in>ul.menu-mobile>li>a{padding:10px 14px;white-space:nowrap}}
/* 検索ボックス（全ページ上部のウィジェット） */
.widget-content-top .wp-block-search__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.widget-content-top .wp-block-search__inside-wrapper,.widget-content-top .search-box{border:2px solid var(--rl-line);border-radius:999px;background:#fff;overflow:hidden;padding:0}
.widget-content-top .wp-block-search__input,.widget-content-top .search-edit{border:0;padding:10px 18px;background:#fff;color:var(--rl-text)}
.widget-content-top .wp-block-search__button{background:var(--rl-indigo);color:#fff;border:0;margin:0;padding:0 24px;font-weight:700;border-radius:0}
.widget-content-top .wp-block-search__button:hover{background:var(--rl-indigo-d)}
/* パンくず */
.breadcrumb a{color:var(--rl-muted)}
.breadcrumb a:hover{color:var(--rl-indigo)}
/* トップのハブ（固定ページ 71614 の本文。本文内の <style> より詳細度を上げて上書き。本文は変えない） */
/* 文字は左 56% の薄い藍の面（グラデーションの不透明部分）の上にだけ置く。絵は右側。base 文字×tint 11.67:1 */
body.home .realine-guide-top .rt-hero{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--rl-tint) 0 58%,rgba(232,237,248,0) 74%),url(https://realine.me/wp-content/uploads/2026/10/realine-hero.jpg) right center/auto 100% no-repeat var(--rl-tint);border:1px solid var(--rl-line);border-radius:18px;padding:30px 44% 30px 28px;min-height:280px}
body.home .realine-guide-top .rt-kicker{display:inline-block;background:#fff;color:var(--rl-indigo)!important;border:1px solid var(--rl-line);border-radius:999px;padding:4px 14px;font-size:13px;letter-spacing:.06em}
body.home .realine-guide-top h2.rt-main-title{color:var(--rl-base)!important;background:none!important;border:0!important;padding:0!important;border-radius:0!important;font-size:30px;font-weight:800;line-height:1.4}
body.home .realine-guide-top .rt-lead p{color:var(--rl-text)!important;font-size:15px;line-height:1.85}
body.home .realine-guide-top .rt-head h2{position:relative;color:var(--rl-base)!important;background:none!important;border:0!important;border-radius:0!important;padding:4px 0 4px 24px!important;font-size:22px;font-weight:800}
body.home .realine-guide-top .rt-head h2::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1.1em;margin-top:-.55em;border-radius:3px;background:var(--rl-indigo);box-shadow:3px -6px 0 -1px var(--rl-green)}
body.home .realine-guide-top .rt-head p{color:var(--rl-muted)!important}
body.home .realine-guide-top .rt-card{position:relative;border:1px solid var(--rl-line);border-top:4px solid var(--rl-indigo);border-radius:var(--rl-radius);box-shadow:0 1px 3px rgba(30,42,90,.06)}
body.home .realine-guide-top .rt-card:hover{border-color:var(--rl-indigo);box-shadow:0 8px 18px rgba(30,42,90,.14);transform:translateY(-2px)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(1),body.home .realine-guide-top .rt-grid-2 .rt-card-featured:nth-child(1){border-top-color:var(--rl-indigo)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(2),body.home .realine-guide-top .rt-grid-2 .rt-card-featured:nth-child(2){border-top-color:var(--rl-slate)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(3){border-top-color:var(--rl-green)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(4){border-top-color:var(--rl-violet)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(5){border-top-color:var(--rl-amber)}
body.home .realine-guide-top .rt-grid-2 .rt-card-large:nth-child(6){border-top-color:var(--rl-teal)}
body.home .realine-guide-top .rt-card-featured{background:#fff!important}
body.home .realine-guide-top .rt-label{background:#fff;color:var(--rl-indigo)!important;border:1px solid var(--rl-line)}
body.home .realine-guide-top .rt-badge{background:var(--rl-badge-bg);color:var(--rl-badge-tx)!important}
body.home .realine-guide-top .rt-title{color:var(--rl-base)!important}
body.home .realine-guide-top .rt-text{color:var(--rl-muted)!important}
body.home .realine-guide-top .rt-tags a{border-color:var(--rl-line);color:var(--rl-indigo)!important;background:#fff!important}
body.home .realine-guide-top .rt-tags a:hover{border-color:var(--rl-indigo);background:var(--rl-tint)!important}
body.home .realine-guide-top h3{color:var(--rl-base)!important;background:none!important;border:0!important;border-left:4px solid var(--rl-green)!important;padding:0 0 0 12px!important}
body.home .realine-guide-top .rt-criteria{background:#fff;border-color:var(--rl-line)}
body.home .realine-guide-top .rt-check{border-color:var(--rl-line);border-top:3px solid var(--rl-green)}
body.home .realine-guide-top .rt-check strong{color:var(--rl-base)!important}
body.home .realine-guide-top .rt-check strong::before{content:"";display:inline-block;width:14px;height:14px;margin:0 8px -1px 0;border-radius:3px;background:var(--rl-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* 一覧の見出し・一覧タイトル */
.archive-title,.archive-title.entry-title{position:relative;text-align:left;background:#fff!important;color:var(--rl-base)!important;border:1px solid var(--rl-line)!important;border-top:4px solid var(--rl-indigo)!important;border-radius:var(--rl-radius);padding:.6em 1em;font-size:1.4em}
.archive-title .fa{color:var(--rl-indigo)}
.list-title{color:var(--rl-base)}
.list-title .list-title-in::before,.list-title .list-title-in::after{background:var(--rl-line)!important;border-color:var(--rl-line)!important}
.list-more-button{border:2px solid var(--rl-indigo)!important;color:var(--rl-indigo)!important;border-radius:999px!important;font-weight:700;background:#fff}
.list-more-button:hover{background:var(--rl-indigo)!important;color:#fff!important}
/* 記事一覧：格子に固定し、自動広告の挿入枠で並びが崩れないようにする（広告の数・位置は変えない。dense は使わない） */
.list.ect-vertical-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.list.ect-vertical-card>.entry-card-wrap{width:auto;max-width:none;margin:0}
.list.ect-vertical-card>.google-auto-placed,.list.ect-vertical-card>ins.adsbygoogle,.list.ect-vertical-card>.ad-area{grid-column:1/-1;width:100%}
.list.ect-vertical-card>.google-auto-placed:has(ins[data-ad-status="unfilled"]),.list.ect-vertical-card>ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
/* 記事カード */
.entry-card-wrap{background:#fff;border:1px solid var(--rl-line);border-top:4px solid var(--rl-indigo);border-radius:var(--rl-radius);overflow:hidden;box-shadow:0 1px 3px rgba(30,42,90,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.entry-card-wrap:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,42,90,.14);border-color:var(--rl-indigo)}
.entry-card-title{font-weight:700;color:var(--rl-text);line-height:1.5}
.entry-card-snippet,.entry-card-meta,.post-date,.post-update{color:var(--rl-muted)}
.cat-label{background:#fff!important;color:var(--rl-indigo)!important;border:1px solid var(--rl-indigo)!important;border-radius:4px;font-weight:700;padding:1px 8px}
.cat-link,.tag-link{background:#fff!important;color:var(--rl-indigo)!important;border-color:var(--rl-line)!important}
.new-entry-card-link,.widget-entry-card-link,.popular-entry-card-link{border-radius:8px}
/* 記事の見出し・目次（記事本文直下の見出しのみ。カテゴリ案内ボックス等の中は変えない） */
.article h1.entry-title,.entry-title{text-align:left;color:var(--rl-base);line-height:1.5}
.single .article .entry-content>h2,.page .article .entry-content>h2{position:relative;text-align:left;background:var(--rl-indigo)!important;color:#fff!important;border:0!important;border-radius:var(--rl-radius);padding:.65em 1em .65em 1.9em;font-size:1.25em;margin-top:1.8em}
.single .article .entry-content>h2::before,.page .article .entry-content>h2::before{content:"";position:absolute;left:.8em;top:50%;width:.55em;height:.7em;margin-top:-.35em;border-radius:3px;background:#fff;opacity:.9}
.single .article .entry-content>h3,.page .article .entry-content>h3{position:relative;background:none!important;color:var(--rl-base)!important;border:0!important;border-bottom:2px solid var(--rl-line)!important;padding:.3em .1em .3em .9em}
.single .article .entry-content>h3::before,.page .article .entry-content>h3::before{content:"";position:absolute;left:0;top:.45em;width:.45em;height:1em;border-radius:3px;background:var(--rl-green)}
.single .article .entry-content>h4,.page .article .entry-content>h4{background:none!important;border:0!important;border-left:4px solid var(--rl-amber)!important;padding:.1em .1em .1em .7em;color:var(--rl-base)}
.entry-content>.toc{background:#fff;border:2px solid var(--rl-line);border-top:6px solid var(--rl-indigo);border-radius:var(--rl-radius)}
.toc-title{color:var(--rl-base);font-weight:800}
.pr-label{border-color:var(--rl-muted)!important;color:var(--rl-muted)!important;background:#fff}
.entry-content>.table-of-contents{border-color:var(--rl-line)}
/* サイドバー・フッター */
.sidebar h2,.sidebar h3{position:relative;background:#fff!important;color:var(--rl-base)!important;border:1px solid var(--rl-line)!important;border-left:6px solid var(--rl-indigo)!important;border-radius:8px;padding:.45em .8em;font-weight:800;font-size:1.05em}
.sidebar .widget{background:transparent}
#footer.footer{background:var(--rl-base)}
#footer.footer,#footer.footer a:not(.sns-button),.footer .copyright,.footer .site-name-text{color:#E9EDF7}
.navi-footer-in a:hover{color:#fff;text-decoration:underline}
.logo-footer img{max-height:44px;width:auto;height:auto;background:#fff;border-radius:8px;padding:4px 8px}
/* HTML サイトマップ（固定ページ） */
.rl-sitemap{list-style:none;padding:0;margin:0 0 1.5em}
.rl-sitemap>li{background:#fff;border:1px solid var(--rl-line);border-left:5px solid var(--rl-indigo);border-radius:8px;padding:.6em .9em;margin:0 0 .6em}
.rl-sitemap>li>a{font-weight:800;color:var(--rl-base)}
.rl-sitemap ul{list-style:none;padding:.3em 0 0 .8em;margin:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.rl-sitemap ul li{font-size:.92em}
/* 下部モバイルボタン */
.mobile-menu-buttons{background:#fff;border-top:1px solid var(--rl-line)}
.mobile-menu-buttons .menu-button-in,.mobile-menu-buttons .menu-caption,.mobile-menu-buttons .menu-icon{color:var(--rl-base)}
/* フォーカスの見える化（outline を消さない） */
.realine-guide-top a:focus-visible,#navi a:focus-visible,.entry-card-wrap:focus-visible,.navi-footer-in a:focus-visible{outline:3px solid var(--rl-indigo);outline-offset:2px}
.footer a:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.entry-card-wrap,.realine-guide-top .rt-card{transition:none}.entry-card-wrap:hover,body.home .realine-guide-top .rt-card:hover{transform:none}}
/* レスポンシブ */
@media screen and (max-width:1023px){.logo-header{min-height:44px}.logo-header img{height:44px}}
@media screen and (max-width:834px){
 .list.ect-vertical-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body.home .realine-guide-top .rt-hero{background:var(--rl-tint) url(https://realine.me/wp-content/uploads/2026/10/realine-hero-sp.jpg) right bottom/auto 140px no-repeat;min-height:0;padding:22px 16px 150px}
 body.home .realine-guide-top h2.rt-main-title{font-size:24px}
}
@media screen and (max-width:480px){.list.ect-vertical-card{grid-template-columns:minmax(0,1fr)}}
/* ===== REALINE design (END) ===== */