@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 企業一覧ページなどでタブ切り替え時にコンテンツの高さが変わり、
   縦スクロールバーの有無が切り替わることでページ全体の表示位置が
   左右にズレてしまう問題を防ぐため、常にスクロールバー分の余白を
   確保しておく */
html {
	overflow-y: scroll;
	/* ヘッダー・フッターの内側の要素（Cocoon本体の「.wrap」の計算）が、
	   環境によって、ページの幅よりごくわずか（数〜十数px）広くなり、
	   横スクロールが発生することがある。原因側（Cocoon本体）を直接触らず、
	   はみ出た分だけを、ここで見えないように吸収して、横スクロールを防ぐ。
	   ヘッダーのプルダウンなど、通常の（画面内に収まる）要素の見え方には影響しない。
	   htmlだけでなくbodyにも指定し、どちらがスクロールの起点になっても防げるようにする */
	overflow-x: hidden;
}
body {
	overflow-x: hidden;
}
/* サイト全体のフォントを游ゴシックに統一 */
body,
button,
input,
select,
textarea,
.kzf-front {
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック Medium", sans-serif !important;
}

/* 独自ページテンプレート共通：フルワイド表示
   （kz_mark_fullwidth_page() を呼んだテンプレートに適用される。
   トップページ・企業一覧ページ、および今後追加する同様のページ全てで
   表示幅を統一するための共通ルール。） */
.kz-app-page #secondary { display: none !important; }
.kz-app-page #sidebar { display: none !important; }
.kz-app-page #content-in { width: 100% !important; max-width: none !important; }
.kz-app-page #content { width: 100% !important; }
.kz-app-page #main {
	width: 100% !important;
	border: 0 !important;
	margin: 0 !important;
	background: #FFF7F2 !important;
	padding: 16px 26px !important;
}
@media (max-width: 900px) {
	.kz-app-page #main { padding: 16px !important; }
}
@media (max-width: 600px) {
	.kz-app-page #main { padding: 10px 12px !important; }
}

/* =====================================================
 * 独自ページテンプレート共通シェル（kz_page_shell_start/end）用CSS
 * 左サイドバー・右広告枠・中央カラム幅を、全ページ共通の見た目にする。
 * ===================================================== */
.kzf-front {
	--kzf-brand: #F36C21;
	--kzf-brand-light: #F4A671;
	--kzf-brand-dark: #B4490F;
	--kzf-bg-page: #FFF7F2;
	--kzf-bg-section: #FCEEE2;
	--kzf-border: #F5D9C4;
	--kzf-ad-blue: #3D6FB4;
}

.kzf-front-inner {
	display: flex;
	align-items: stretch;
	/* サイドバー・広告枠との間隔。幅1181px付近で中央カラムが極端に狭くならないよう詰めている */
	gap: 40px;
}

.kzf-front-col { min-width: 0; }
.kzf-front-left  { flex: 0 0 190px; padding-top: 2px; }
.kzf-front-center{ flex: 1 1 0; }
.kzf-front-right { flex: 0 0 200px; display: flex; }

/* --- 左サイドバー：ナビゲーション --- */
.kzf-nav { display: flex; flex-direction: column; gap: 24px; }
/* 「収録データ説明」は、サイドバーが下に移る狭い画面幅のときだけ表示する */
.kzf-nav > .kzf-nav-btn.kzf-nav-data { display: none; }

.kzf-nav-btn {
	display: block;
	background: var(--kzf-brand);
	color: #fff !important;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	text-decoration: none !important;
	padding: 10px 10px;
	border-radius: 5px;
	transition: background-color 0.15s ease;
}
.kzf-nav-btn:hover { background: var(--kzf-brand-dark); }

.kzf-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	appearance: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.kzf-nav-chevron { width: 12px; height: 12px; flex: 0 0 auto; transition: transform 0.2s ease; }
.kzf-nav-group.is-open .kzf-nav-chevron { transform: rotate(180deg); }

.kzf-nav-sublist {
	list-style: none;
	margin: 0;
	padding: 0 0 0 6px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease;
}
.kzf-nav-group.is-open .kzf-nav-sublist {
	margin: 2px 0 4px;
	max-height: 500px;
	padding: 2px 0 2px 6px;
}
.kzf-nav-sublist li { line-height: 2; }
.kzf-nav-sublist a {
	color: #000 !important;
	font-weight: bold;
	font-size: 12.5px;
	text-decoration: none !important;
}
.kzf-nav-sublist a:before { content: "・"; }
.kzf-nav-sublist a:hover { color: var(--kzf-brand-dark) !important; }

/* --- 中央カード（共通の白背景カード） --- */
.kzf-card {
	background: #fff;
	border-radius: 8px;
	border-top: 8px solid var(--kzf-brand);
	box-shadow: 0 2px 10px rgba(178, 96, 40, 0.08);
	overflow: hidden;
}

/* --- 右サイドバー：広告枠 --- */
.kzf-ad-slot {
	background: var(--kzf-ad-blue);
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 広告ウィジェットを複数設置した場合に、横並びではなく縦に積む */
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
	width: 100%;
}

/* 左メニュー(190px固定)・右広告枠(200px固定)・その間の余白(80px×2)が、
   画面幅901px〜1180px程度のとき、中央のカード（ランキング表・企業ページ等）を
   極端に狭く圧迫することがある。トップページ・企業一覧ページと同じく、境目を
   900pxから1180pxに広げ、この範囲でも、左右を下に回して中央に十分な幅を確保する */
@media (max-width: 1180px) {
	.kzf-front-inner { flex-direction: column; gap: 20px; }
	.kzf-front-left  { order: 2; flex: 1 1 auto; width: 100%; }
	.kzf-front-center{ order: 1; flex: 1 1 auto; width: 100%; }
	.kzf-front-right { order: 3; flex: 1 1 auto; width: 100%; }

	.kzf-nav { flex-direction: row; flex-wrap: wrap; }
	.kzf-nav > .kzf-nav-btn { flex: 1 1 45%; }
	/* お問い合わせは単独行になるため、他と同じ45%幅のまま中央に寄せる（伸びて全幅にならないようにする） */
	.kzf-nav > .kzf-nav-btn:last-child { flex: 0 1 45%; margin: 0 auto; }
	/* 決算新着とお問い合わせは、同じ行に横並び（どちらも他と同じ45%幅）。収録データ説明は最後に単独行で中央に出す */
	.kzf-nav > .kzf-nav-btn.kzf-nav-new,
	.kzf-nav > .kzf-nav-btn.kzf-nav-new + .kzf-nav-btn { flex: 1 1 45%; margin: 0; }
	.kzf-nav > .kzf-nav-btn.kzf-nav-data { display: block; }
	.kzf-nav-group { flex: 1 1 45%; }
	.kzf-nav-group.is-open .kzf-nav-sublist { display: flex; flex-wrap: wrap; gap: 0 12px; }
	.kzf-nav-sublist li { flex: 0 0 auto; line-height: 1.8; }

	.kzf-ad-slot { min-height: 200px; padding: 20px; }
}

@media (max-width: 600px) {
	.kzf-front-inner { gap: 14px; }
	.kzf-nav > .kzf-nav-btn { flex: 1 1 100%; }
	.kzf-nav-btn { font-size: 12.5px; padding: 8px 8px; }
	.kzf-card { border-top-width: 6px; }
}

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

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

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

/* グローバルナビの文字サイズと間隔を調整 */
.navi-in a {
    font-size: 14px; /* 文字の大きさ */
    font-weight: bold; /* 太字 */
    padding-left: 16px !important;  /* 左側の余白 */
    padding-right: 16px !important; /* 右側の余白 */
}
/* 項目ごとの固定幅（176px）が原因で末尾の項目が省略されていたため、
   文字数に応じた可変幅に変更する */
.navi-in > ul li {
    width: auto !important;
    margin: 0 8px; /* 項目同士の間隔 */
}
.navi-in > ul .caption-wrap > div {
    width: auto !important;
}
.navi .item-label {
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
}
/* プルダウンの矢印アイコンが文字に重ならないよう、
   矢印がある項目だけ右側の余白を広げる */
.navi-in > ul li.menu-item-has-children > a {
    padding-right: 30px !important;
}
/* スクロールしてヘッダーがスリム表示（li高さ60px→40px）になった際に
   矢印が消えないよう、親要素の高さに依存しない中央揃えにする */
.navi-in .has-icon {
    right: 10px !important;
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%);
}
/* 矢印アイコンの要素には「has-sub」クラスも付いており、
   固定ヘッダー時にCocoon側の「.fixed-header .has-sub{display:none}」
   ルール（本来はドロップダウン中身を隠すためのもの）に巻き込まれて
   アイコンごと消えてしまうため、アイコンだけ再表示する */
.fixed-header .navi-in .has-icon {
    display: flex !important;
}
/* 固定ヘッダー時は「.fixed-header .navi-in .sub-menu{display:none}」
   （Cocoon本体）が常時プルダウンを隠してしまい、ホバーしても
   展開されなかったため、ホバー時だけ強制的に表示する */
.fixed-header .navi-in > ul li:hover > .sub-menu {
    display: block !important;
}

/* 「業績比較」「ランキング」のプルダウンが縦に長すぎるため、
   指定の行数で折り返して横に列を追加する形にする
   （業績比較＝3行で折返し、ランキング＝6行で折返し） */
#menu-item-277 > .sub-menu {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: auto !important;
    column-gap: 8px;
}
#menu-item-279 > .sub-menu {
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: auto !important;
    column-gap: 8px;
}
/* 表示時（ホバー時）はgridとして展開する。id指定で
   固定ヘッダー時のdisplay:blockルールより優先させる */
#menu-item-277:hover > .sub-menu,
#menu-item-279:hover > .sub-menu {
    display: grid !important;
}
/* 「税引き前当期純利益」等の長い項目名が箱からはみ出さないよう、
   各項目の幅を文字幅に合わせて自動調整する（gridの列幅で解決） */
#menu-item-277 > .sub-menu li,
#menu-item-279 > .sub-menu li {
    width: auto !important;
}
#menu-item-277 > .sub-menu .item-label,
#menu-item-279 > .sub-menu .item-label {
    white-space: nowrap !important;
}

/* ヘッダーロゴのサイズがスクロール位置によって変わってしまう問題を修正。
   カスタマイザーの「ロゴ画像の幅・高さ」設定により、ページ最上部では
   幅が固定値(120px)で描画され、下にスクロールして固定ヘッダーになると
   幅・高さともにauto（画像本来の比率で自動計算）に切り替わっていたため、
   常にスクロール時と同じauto/autoのサイズに統一する */
.logo-header img {
    width: auto !important;
    height: auto !important;
}
/* ロゴ（アイコン＋「くらべる財務」の文字）は、Cocoon側で高さの上限
   （通常60px、画面が狭い時は40px）が決まっているが、上限を超える分を
   切り取る指定が付いていなかったため、環境によって、ヘッダーの
   オレンジの帯からロゴがはみ出て見えることがあった。上限を超えた分は、
   見えないように切り取り、必ずヘッダーの帯の中に収まるようにする */
.logo-header {
    overflow: hidden;
}

/* フッターのナビは専用メニュー（フッターナビ／menu id 3）を使用。
   ヘッダーのメニューとは独立しているため、項目の並び順を
   ヘッダーとは別にフッター側だけで自由に変更できる。 */

/* 「くらべる財務」の大見出しテキスト（footer-left）と、
   使っていないfooter-rightは非表示にし、footer-centerのナビを
   フッター全幅に広げる */
.footer-left,
.footer-right {
    display: none !important;
}
.footer-center {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* フッターのグローバルナビ：トップレベル項目（トップ／企業一覧／
   業績比較／ランキング／お問い合わせ）を折り返さず横一列に、
   右寄せで並べる。各項目の子リスト（資産・負債など）は
   その項目の下に縦並びで表示。 */
.footer-center .widget_nav_menu > ul.menu {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: min-content min-content 1fr;
    grid-auto-columns: max-content;
    justify-content: end;
    gap: 0 40px;
}
.footer-center .widget_nav_menu > ul.menu > li {
    width: auto !important;
    grid-row: span 3;
}
/* 決算新着（お問い合わせの上）・お問い合わせ・収録データ説明（お問い合わせの下）は、
   最後の列に上から順に縦に積む */
.footer-center .widget_nav_menu > ul.menu > #menu-item-4271,
.footer-center .widget_nav_menu > ul.menu > #menu-item-333,
.footer-center .widget_nav_menu > ul.menu > #menu-item-333 ~ li {
    grid-row: auto;
}
/* 縦に積んだ項目どうしの文字の間隔を、従来の半分にする */
.footer-center .widget_nav_menu > ul.menu > #menu-item-4271 > a,
.footer-center .widget_nav_menu > ul.menu > #menu-item-333 > a {
    padding-bottom: 5px !important;
}
.footer-center .widget_nav_menu > ul.menu > #menu-item-4271 + #menu-item-333 > a,
.footer-center .widget_nav_menu > ul.menu > #menu-item-333 ~ li > a {
    padding-top: 5px !important;
}
.footer-center .widget_nav_menu > ul.menu > li > a {
    font-size: 14px;
    font-weight: bold;
}
.footer-center .widget_nav_menu .sub-menu {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.footer-center .widget_nav_menu .sub-menu li {
    width: auto !important;
    margin-bottom: 4px;
}
.footer-center .widget_nav_menu .sub-menu a {
    font-size: 12px;
    font-weight: normal;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* フッターの「業績比較」「ランキング」の子項目も、ヘッダーの
   プルダウンと同じく指定の行数で折り返して2列にする
   （フッターは常時展開表示のため、ホバー不要で常にgrid表示にする） */
.footer-center #menu-item-331 > .sub-menu {
    display: grid !important;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 24px;
    width: auto !important;
}
.footer-center #menu-item-332 > .sub-menu {
    display: grid !important;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 24px;
    width: auto !important;
}

/* ボタン類は、クリック・フォーカス時に枠線（アウトライン）を一切表示しない。
   今後追加するボタンにも自動で適用される。 */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
summary,
button:focus,
button:focus-visible,
button:active,
[role="button"]:focus,
[role="button"]:focus-visible,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
summary:focus,
summary:focus-visible {
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}
/* ヘッダーの「業績比較」「ランキング」のプルダウンは、親項目の文字の
   真下を中心にして展開する（左寄せではなく中央寄せ） */
#menu-item-277,
#menu-item-279 {
    position: relative;
}
#menu-item-277 > .sub-menu,
#menu-item-279 > .sub-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}


/* フッター下部：
   ・メニューの下と、ロゴ・リンクの行までの余白を詰める
   ・プライバシーポリシー／利用規約／運営者情報のリンクから縦線を無くし、
     コピーライト（© くらべる財務.）の左横に、同じ行で並べる */
#footer .footer-widgets {
    margin-bottom: 0;
}
#footer .footer-center {
    padding-bottom: 0;
}
#footer .footer-center .widget {
    margin-bottom: 0;
}
#footer .footer-bottom {
    margin-top: 16px;
}
#footer .footer-bottom-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    column-gap: 16px;
    min-height: 50px;
}
/* ロゴは、リンク・コピーライトの行と、上下の中央をそろえる */
#footer .footer-bottom-logo {
    top: 8px;
    bottom: auto;
}
#footer #navi-footer {
    flex: 0 0 auto;
}
#footer #navi-footer .menu-item,
#footer #navi-footer li {
    border-left: 0 !important;
    border-right: 0 !important;
}
#footer #navi-footer li a {
    padding-left: 8px;
    padding-right: 8px;
}
#footer .footer-bottom-content .copyright {
    margin: 0;
    flex: 0 0 auto;
}
/* スマホ幅：3つのリンクを1行に中央でまとめ、その下にコピーライトを置く */
@media (max-width: 600px) {
    #footer .footer-bottom-content {
        justify-content: center;
    }
    #footer #navi-footer,
    #footer #navi-footer ul {
        width: 100%;
    }
    #footer #navi-footer ul {
        justify-content: center;
    }
    #footer #navi-footer li {
        width: auto !important;
        flex: 0 0 auto;
    }
    #footer #navi-footer li a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* --- 右の広告枠：アフィリエイト広告（PR表示つき・縦に並べる） ---
   広い画面では右の列に1つずつ縦に。広告が下に回る1180px以下では横に最大2つ、560px以下では1つずつ縦に並べる */
.kz-ad-pr { margin: 0; font-size: 12px; font-weight: 700; color: #777; line-height: 1.4; text-align: left; align-self: stretch; }
.kz-ad-widget { width: 100%; text-align: center; }
.kz-ad-widget a { display: block; }
.kz-ad-widget img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.kz-ad-widget .kz-ad-risk { margin: 4px 0 0; font-size: 11px; line-height: 1.5; text-align: center; }
.kz-ad-widget .kz-ad-risk a { display: inline; color: #777; text-decoration: underline; }
@media (max-width: 1180px) {
	.kzf-ad-slot:not(.kz-ad-empty), .kzc-ad-slot:not(.kz-ad-empty) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start !important; justify-items: center; }
	.kz-ad-pr { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
	.kzf-ad-slot:not(.kz-ad-empty), .kzc-ad-slot:not(.kz-ad-empty) { grid-template-columns: minmax(0, 1fr); }
}


/* ===== 公式SNS(X・Instagram)のアイコン ===== */
/* ロゴはそのまま(Xは黒地に白いX、Instagramは公式のグラデーション地に白いマーク)。下地は付けない */
.kz-sns-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: #fff !important; text-decoration: none !important; line-height: 1; transition: opacity 0.15s; }
.kz-sns-badge i { font-size: 15px; line-height: 1; color: #fff; }
.kz-sns-badge:hover { opacity: 0.8; }
.kz-sns-x { background: #000 !important; }
.kz-sns-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.kz-sns-item > a.kz-sns-badge, .kz-sns-footer > a.kz-sns-badge { display: inline-flex !important; width: 26px !important; min-width: 0 !important; height: 26px !important; padding: 0 !important; margin: 0 !important; }
/* ヘッダー: お問い合わせの右横。画面が十分に広い(1500px以上)ときだけ表示。メニューの位置は動かさない */
.menu-header { position: relative; }
.menu-header .kz-sns-item { display: none; }
@media (min-width: 1500px) {
	.menu-header .kz-sns-item { display: flex !important; align-items: center; position: absolute !important; top: 50%; margin: -13.5px 0 0 !important; padding: 0 !important; width: 26px !important; min-width: 0 !important; height: 26px !important; background: none !important; }
	.menu-header .kz-sns-pos1 { left: calc(100% + 4px); }
	.menu-header .kz-sns-pos2 { left: calc(100% + 54px); }
}
/* フッター: 左上の空き */
.footer-center { position: relative; }
.kz-sns-footer { position: absolute; top: 10px; left: 22px; display: flex; gap: 12px; }
.kz-sns-footer > a.kz-sns-badge { width: 32px !important; height: 32px !important; border-radius: 8px; }
.kz-sns-footer .kz-sns-badge i { font-size: 18px; }
@media (max-width: 900px) { .kz-sns-footer { position: static; margin: 0 0 12px 22px; } }

/* スマホ幅のフッター: アイコンは中央ぞろえ。アイコンとロゴの間隔を半分に(50px → 25px)して、フッターを薄く */
.footer-mobile .kz-sns-footer { position: static; margin: 0; justify-content: center; }
.footer-widgets-mobile { margin-bottom: 0; }
.footer-widgets-mobile .footer-mobile { padding-bottom: 0; }
#footer .footer-widgets-mobile + .footer-bottom { margin-top: 1px; }

/* 決算新着: 更新履歴(この部分だけをスクロールにして、ページ自体は長くしない) */
.kzh-scroll { max-height: 360px; overflow-y: auto; border: 1px solid #f0e2d8; border-radius: 6px; -webkit-overflow-scrolling: touch; }
.kzh-table { margin: 0; }
.kzh-table thead th { position: sticky; top: 0; background: #FFF6F0; z-index: 1; }
.kzh-table td, .kzh-table th { vertical-align: top; }
.kzh-table .kzh-date { white-space: nowrap; font-weight: 700; width: 9em; }
.kzh-kind { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 12px; white-space: nowrap; }
.kzh-data { background: #FFE9DD; color: #B4490F; }
.kzh-site { background: #E8EEF6; color: #2F4A6B; }
.kzh-text { line-height: 1.8; }
@media (max-width: 640px) {
	.kzh-table thead { display: none; }
	.kzh-table, .kzh-table tbody, .kzh-table tr, .kzh-table td { display: block; width: 100%; }
	.kzh-table tr { padding: 10px 12px; border-bottom: 1px solid #f0e2d8; }
	.kzh-table td { border: 0; padding: 2px 0; }
	.kzh-table .kzh-date { width: auto; }
}