@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ（キャッシュレス決済 比較サイト用のデザイン・レイアウト）
Version: 1.1.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   デザイントークン（サイト全体の配色・文字・余白）
   プラグイン側のコンポーネントもここの値を参照する。
   ========================================================================== */
:root {
	--cl-text: #10263a;
	--cl-muted: #5a6c79;
	--cl-accent: #0e7f86;
	--cl-accent-dark: #0a636a;
	--cl-accent-soft: #e4f2f3;
	--cl-line: #dbe5e9;
	--cl-surface: #f6f9fa;
	--cl-radius: 10px;
	--cl-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, system-ui, sans-serif;
	--cl-gap: clamp(1rem, 2.5vw, 1.5rem);

	/* Arkhe 標準の変数にも反映（カスタマイザー設定が優先される場合は、そちらが効く） */
	--ark-color--text: var(--cl-text);
	--ark-color--main: var(--cl-accent);
	--ark-color--link: var(--cl-accent-dark);
}

body {
	font-family: var(--cl-font);
	color: var(--cl-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	line-height: 1.75;
}

/* ==========================================================================
   ヘッダー（コンパクト）：サイト名＋キャッチ ／ 右にナビ
   ========================================================================== */
.l-header {
	background: #fff;
	border-bottom: 1px solid var(--cl-line);
	box-shadow: none;
}
.l-header__body {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: .25rem 1rem;
	min-height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}
.l-header__center { order: 1; flex: 0 0 auto; margin: 0; text-align: left; }
.l-header__left { order: 2; flex: 1 1 auto; min-width: 0; }
.l-header__right { order: 3; margin-left: auto; flex: 0 0 auto; }
.l-header__logo { margin: 0; line-height: 1.2; }
.c-headLogo, .c-headLogo:hover { color: var(--cl-text); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; text-decoration: none; }
.cl-header__tagline { margin: 0; font-size: .75rem; color: var(--cl-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-gnav__a { font-size: .8125rem; color: var(--cl-text); }
.c-gnav__a:hover { color: var(--cl-accent-dark); }
@media (max-width: 599px) {
	.cl-header__tagline { display: none; }
	.c-headLogo { font-size: 1.125rem; }
}
/* Arkhe の「.has-text > .c-headLogo」(0.75em) がロゴ幅40px基準で効き、スマホで横にはみ出すため、同じ強さで上書きする */
.l-header__logo.has-text > .c-headLogo { font-size: 1.25rem; }
@media (max-width: 599px) {
	.l-header__logo.has-text > .c-headLogo { font-size: 1rem; overflow-wrap: anywhere; }
	.l-header__center { min-width: 0; max-width: 100%; }
}

/* ==========================================================================
   キャッシュレス比較ページ：レイアウト（広め・サイドバーなし）
   ========================================================================== */
.cc-page .l-content__body.l-container,
.cc-page .l-header__body.l-container,
.cc-page .l-footer .l-container {
	max-width: 1240px;
}
.cc-page .l-content { background: #fff; }
.cc-page .l-main__body { padding-bottom: 2rem; }
.cc-page .c-postContent > * + * { margin-top: var(--cl-gap); }

/* 見出し */
.cc-page .c-postContent h1 {
	margin: 1.25rem 0 .5rem;
	font-size: clamp(1.75rem, 4.2vw, 2.5rem);
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--cl-text);
}
.cc-page .c-postContent h2 {
	margin: 0 0 .9rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: 800;
	color: var(--cl-text);
}
.cc-page .c-postContent h2::before, .cc-page .c-postContent h2::after { display: none; }
.cc-page .c-postContent h3 { font-size: 1rem; border: 0; padding: 0; background: none; }
.cc-page .c-postContent h3::before, .cc-page .c-postContent h3::after { display: none; }

/* ページ冒頭（タイトル＋短い説明）。ブロックエディターで「グループ」に className を付けて使う */
.cc-hero { margin-bottom: 1.25rem; }
.cc-hero__lead { margin: 0; font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--cl-text); }
.cc-hero__note { margin: .4rem 0 0; font-size: .8125rem; color: var(--cl-muted); }

/* 結論ボックス（トップのリード文）：調査結果の要点と、各章へのページ内リンク */
.cc-lead { margin: 0 0 1.75rem; padding: 1.1rem 1.25rem; background: var(--cl-accent-soft); border: 2px solid var(--cl-accent); border-radius: var(--cl-radius); font-size: .9375rem; line-height: 1.8; }
.cc-lead > :first-child { margin-top: 0; }
.cc-lead > :last-child { margin-bottom: 0; }
.cc-lead__title { margin: 0 0 .6rem; font-weight: 700; color: var(--cl-accent-dark); font-size: 1rem; }
.cc-lead ul { margin: 0 0 .8rem; padding-left: 1.25rem; }
.cc-lead li { margin: .3rem 0; }
.cc-lead a { color: var(--cl-accent-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cc-lead p { margin: 0 0 .7rem; }
.cc-lead__note { font-size: .8125rem; color: var(--cl-muted); }
@media (max-width: 599px) {
	.cc-lead { padding: .9rem 1rem; font-size: .875rem; }
}

/* 下部の説明セクション（2カラム）。「カラム」ブロックに className: cc-info を付けて使う */
.cc-info { margin-top: 3rem !important; gap: 2rem !important; align-items: flex-start; }
.cc-info h2 { display: flex; align-items: center; gap: .5rem; }
.cc-info p { margin: 0 0 .75rem; font-size: .9375rem; color: var(--cl-text); }
.cc-info .wp-block-table { margin: 0; }
.cc-info .wp-block-table table { border-collapse: collapse; width: 100%; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); overflow: hidden; }
.cc-info .wp-block-table td, .cc-info .wp-block-table th { border: 0; border-bottom: 1px solid var(--cl-line); padding: .6rem .9rem; font-size: .9375rem; vertical-align: top; }
.cc-info .wp-block-table tr:last-child td { border-bottom: 0; }
.cc-info .wp-block-table td:first-child { width: 6.5em; font-weight: 800; background: #edf3f5; white-space: nowrap; }
@media (max-width: 781px) { .cc-info { gap: 1.5rem !important; } }

/* 解説記事。グループブロックに className: cc-article を付けて使う（パターン「解説記事」） */
.cc-article { margin-top: 3.5rem !important; max-width: 52rem; margin-left: auto; margin-right: auto; font-size: 1rem; line-height: 1.9; }
.cc-page .c-postContent .cc-article > * + * { margin-top: 1rem; }
.cc-page .c-postContent .cc-article h2 {
	margin: 3.25rem 0 1rem; padding: .25rem 0 .25rem .85rem;
	border-left: 5px solid var(--cl-accent);
	font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.45; font-weight: 800;
	scroll-margin-top: 5rem;
}
.cc-page .c-postContent .cc-article h3 {
	margin: 2rem 0 .5rem; padding-bottom: .35rem;
	border-bottom: 2px solid var(--cl-accent-soft);
	font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); line-height: 1.5; font-weight: 800; color: var(--cl-text);
}
.cc-article p { margin: 0; }
.cc-article ul.wp-block-list { margin: 0; padding-left: 1.4em; }
.cc-article li { margin: .3rem 0; }
.cc-article__toc, .cc-article__src, .cc-article__note { background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); padding: 1rem 1.25rem; }
.cc-article__toc-title, .cc-article__src-title { font-weight: 800; margin: 0 0 .4rem !important; }
.cc-article__toc ul { margin: 0; padding-left: 1.3em; }
.cc-article__src { font-size: .875rem; line-height: 1.7; }
.cc-article__src ul { margin: 0; padding-left: 1.3em; }
.cc-article__note { font-size: .9375rem; line-height: 1.8; border-left: 4px solid var(--cl-accent); }
.cc-article__table { margin: 0; overflow-x: auto; }
.cc-article__table table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .9375rem; line-height: 1.6; }
.cc-article__table th, .cc-article__table td { border: 1px solid var(--cl-line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.cc-article__table thead th { background: var(--cl-accent-soft); color: var(--cl-text); font-weight: 800; white-space: nowrap; }
.cc-article__table tbody td:first-child { font-weight: 800; background: #f1f6f8; white-space: nowrap; }
@media (max-width: 599px) { .cc-article { line-height: 1.85; } }

/* アンケート結果（調査概要・棒グラフ・円グラフ。HTMLのみで描画） */
.cc-survey-info { border: 1px solid var(--cl-line); border-radius: var(--cl-radius); background: #fff; padding: 1rem 1.25rem; }
.cc-survey-info__title, .cc-chart__title { font-weight: 800; margin: 0 0 .5rem; line-height: 1.5; }
.cc-survey-info table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.6; }
.cc-survey-info th, .cc-survey-info td { padding: .5rem .25rem; border-top: 1px solid var(--cl-line); text-align: left; vertical-align: top; }
.cc-survey-info th { width: 7em; white-space: nowrap; color: var(--cl-muted); font-weight: 700; }
.cc-survey-info__note { margin: .6rem 0 0 !important; font-size: .8125rem; line-height: 1.7; color: var(--cl-muted); }
.cc-chart { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); }
.cc-chart__meta { display: block; font-size: .8125rem; font-weight: 400; color: var(--cl-muted); }
.cc-bars { list-style: none; margin: .75rem 0 0 !important; padding: 0 !important; counter-reset: ccrank; }
.cc-bar { display: grid; grid-template-columns: minmax(8rem, 17rem) 1fr 8.5rem; gap: .25rem .75rem; align-items: center; margin: 0 0 .55rem !important; font-size: .9375rem; line-height: 1.5; }
.cc-bar__t { height: .85rem; background: #e6eef1; border-radius: 999px; overflow: hidden; }
.cc-bar__f { display: block; height: 100%; background: var(--cl-accent); border-radius: 999px; }
.cc-bar__v { text-align: right; white-space: nowrap; font-size: .875rem; }
.cc-bar__v b { font-size: 1rem; }
.cc-chart--rank .cc-bar { counter-increment: ccrank; }
.cc-chart--rank .cc-bar__l::before { content: counter(ccrank) "位"; display: inline-block; min-width: 2.2em; margin-right: .35em; font-weight: 800; color: var(--cl-accent-dark); }
.cc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .75rem; }
.cc-pie__g { width: 10.5rem; height: 10.5rem; border-radius: 50%; flex: none; }
.cc-pie__lg { list-style: none; margin: 0 !important; padding: 0 !important; flex: 1 1 14rem; font-size: .9375rem; line-height: 1.5; }
.cc-pie__lg li { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .4rem !important; }
.cc-pie__lg i { width: .85rem; height: .85rem; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); flex: none; transform: translateY(.1rem); }
.cc-pie__lg span { flex: 1 1 auto; }
/* 「この調査結果を引用する」（JSで生成） */
.cc-cite { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--cl-line); }
.cc-cite > summary { cursor: pointer; font-weight: 800; color: var(--cl-accent-dark); font-size: .9375rem; list-style: none; }
.cc-cite > summary::-webkit-details-marker { display: none; }
.cc-cite > summary::before { content: "＋"; display: inline-block; margin-right: .4em; }
.cc-cite[open] > summary::before { content: "－"; }
.cc-cite__lead { margin: .6rem 0 !important; font-size: .8125rem; line-height: 1.7; color: var(--cl-muted); }
.cc-cite__ta { display: block; width: 100%; box-sizing: border-box; padding: .7rem .85rem; border: 1px solid var(--cl-line); border-radius: 8px; background: #fff; color: var(--cl-text); font: inherit; font-size: .875rem; line-height: 1.7; resize: vertical; }
.cc-cite__btn { margin-top: .6rem; padding: .55rem 1.1rem; border: 0; border-radius: 8px; background: var(--cl-accent-dark); color: #fff; font-weight: 800; font-size: .9375rem; cursor: pointer; }
.cc-cite__btn:hover { background: var(--cl-accent); }
.cc-cite > summary:focus-visible, .cc-cite__btn:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
@media (max-width: 599px) {
	.cc-bar { grid-template-columns: 1fr 7.5rem; }
	.cc-bar__l { grid-column: 1 / -1; }
	.cc-bar__t { grid-column: 1; }
	.cc-chart { padding: .85rem; }
}

/* ==========================================================================
   ボタン・リンク
   ========================================================================== */
.wp-block-button__link, .c-btn { border-radius: 999px; background: var(--cl-accent); color: #fff; font-weight: 700; }
.wp-block-button__link:hover { background: var(--cl-accent-dark); color: #fff; }
.cc-page .c-postContent a:not(.wp-block-button__link):not(.cc-btn) { color: var(--cl-accent-dark); }

/* ==========================================================================
   フッター
   ========================================================================== */
.l-footer { background: #fff; color: var(--cl-text); border-top: 1px solid var(--cl-line); }
.l-footer__foot { padding: 1.25rem 0; }
.l-footer__foot > .l-container { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.cl-footer__brand { display: flex; align-items: baseline; gap: .75rem; flex: 1 1 auto; margin: 0; }
.cl-footer__brand strong { font-size: 1.0625rem; font-weight: 800; }
.cl-footer__brand span { font-size: .75rem; color: var(--cl-muted); }
.l-footer__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; justify-content: flex-end; }
.l-footer__nav a { font-size: .8125rem; color: var(--cl-text); text-decoration: none; }
.l-footer__nav a:hover { color: var(--cl-accent-dark); text-decoration: underline; }
.c-copyright { flex: 1 1 100%; text-align: left; font-size: .75rem; color: var(--cl-muted); margin: 0; }
@media (max-width: 599px) {
	.l-footer__nav { justify-content: flex-start; }
}