@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
*/

/* ==========================================================================
   1. デザイントークン（Arkhe の変数を上書き）
   ========================================================================== */
:root {
	--cl-ink: #373431;
	--cl-muted: #7e7775;
	--cl-pink: #b85e77;
	--cl-deep: #92425b;
	--cl-pale: #f8eef1;
	--cl-line: #eadfe1;
	--cl-bg: #fffdfa;
	--cl-green: #4b7767;

	--ark-color--main: #b85e77;
	--ark-color--text: #373431;
	--ark-color--link: #92425b;
	--ark-color--bg: #fffdfa;
	--ark-color--border: #eadfe1;
	--ark-color--gray: #f4eeeb;
	--ark-color--gray--hover: #eee7e4;
	--ark-font_size: 14px;
	--ark-line_height: 1.8;
	--ark-width--container: 1160px;
}

html { scroll-behavior: smooth; scroll-padding-top: 95px; }

body {
	background: var(--cl-bg);
	color: var(--cl-ink);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	font-size: 14px;
	line-height: 1.8;
}
@media (max-width: 650px) { body { font-size: 13px; } }

a:focus-visible, button:focus-visible { outline: 3px solid var(--cl-pink); outline-offset: 4px; }


/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.l-header {
	background: rgba(255, 253, 250, .93);
	border-bottom: 1px solid var(--cl-line);
	backdrop-filter: blur(12px);
	color: var(--cl-ink);
}
.l-header__body { padding-top: 19px; padding-bottom: 19px; gap: 25px; }
@media (max-width: 650px) { .l-header__body { padding-top: 13px; padding-bottom: 13px; } }

.cl-brand { display: inline-flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; }
.cl-brand__mark { font-size: 29px; color: var(--cl-pink); line-height: 1; }
.cl-brand__text { display: block; text-align: left; }
.cl-brand small { display: block; font-size: 10px; letter-spacing: .13em; color: var(--cl-muted); font-weight: 400; line-height: 1.5; }
.cl-brand strong { display: block; font-size: 18px; letter-spacing: .04em; font-weight: 700; line-height: 1.5; }
@media (max-width: 850px) { .cl-brand strong { font-size: 15px; } }
@media (max-width: 650px) {
	.cl-brand strong { font-size: 14px; }
	.cl-brand small { font-size: 8px; }
	.cl-brand__mark { font-size: 25px; }
}

.c-gnav { gap: 27px; }
.c-gnav .c-gnav__a { font-size: 12px; font-weight: 700; padding: 0; color: var(--cl-ink); }
.c-gnav .c-gnav__a:hover { color: var(--cl-pink); }
.c-gnav .c-gnav__a::after { display: none; }
@media (max-width: 1000px) { .c-gnav { gap: 16px; } }
@media (max-width: 850px) { .c-gnav { gap: 15px; } .c-gnav .c-gnav__a { font-size: 11px; } }


/* ==========================================================================
   3. フッター
   ========================================================================== */
.cl-footer { background: #f4eeeb; border-top: 1px solid var(--cl-line); color: var(--cl-ink); }
.cl-footer .l-footer__foot { padding: 35px 0 22px; background: transparent; }
.cl-footer__top { display: flex; justify-content: space-between; gap: 30px; text-align: left; }
.cl-footer__tagline { font-size: 11px; color: var(--cl-muted); margin: 8px 0 0; }
.cl-footer__links {
	display: grid; grid-template-columns: repeat(2, auto); gap: 10px 30px;
	font-size: 11px; list-style: none; margin: 0; padding: 0; align-content: start;
}
.cl-footer__links a { color: inherit; }
.cl-footer .c-copyright {
	border-top: 1px solid #e5d9d4; margin-top: 25px; padding-top: 17px;
	font-size: 9px; color: #9a8e87; text-align: left;
}
@media (max-width: 650px) {
	.cl-footer__top { flex-direction: column; gap: 20px; }
	.cl-footer__links { font-size: 10px; }
}


/* ==========================================================================
   4. 共通パーツ（SWELLから引き継ぎ）
   ========================================================================== */

/* ブログパーツ */
.p-blogParts { margin: 2em 0; }
.p-blogParts > :first-child { margin-top: 0; }
.p-blogParts > :last-child { margin-bottom: 0; }
.p-termContent { margin-bottom: 2em; }

/* 基本情報テーブル */
.basic-info { overflow: hidden; border: none; }
.basic-info table { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; }
.basic-info th, .basic-info td { font-size: 1.05em; border: none; }
.basic-info th { border-right: 2px solid #f3e5f5; color: #a05fa7; font-weight: bold; text-align: left; background: #fff; }
.basic-info td { background: #fff; color: #6d4c5b; word-break: break-word; }
.basic-info tr:last-child th, .basic-info tr:last-child td { border-bottom: none; }
@media (max-width: 600px) {
	.basic-info { max-width: 100%; font-size: .98em; }
	.basic-info th, .basic-info td { padding: .8em .6em; }
}


/* FAQ（SWELLのFAQブロック .swell-block-faq 互換）
   記事側のHTMLはそのまま。アイコン形状・色のバリエーションとスタイル3種を再現する。 */
.swell-block-faq {
	--swl-faq_icon_radius: 0;
	--color_faq_q: var(--cl-deep);
	--color_faq_a: var(--cl-pink);
	margin: 2em 0;
}
.swell-block-faq.-icon-rounded { --swl-faq_icon_radius: 10%; }
.swell-block-faq.-icon-circle { --swl-faq_icon_radius: 50%; }
.swell-block-faq dl, .swell-block-faq dt, .swell-block-faq dd { margin: 0; }
.swell-block-faq .swell-block-faq__item + .swell-block-faq__item { margin-top: 1em; }
.swell-block-faq .faq_q {
	position: relative; margin: 0; padding: 1em 1em 1em 3em;
	font-weight: 700; font-size: inherit; line-height: 1.5;
}
.swell-block-faq .faq_q::before {
	content: "Q"; position: absolute; top: .75em; left: 0; display: block; width: 2em;
	font-weight: 400; font-family: Arial, sans-serif; line-height: 2; text-align: center;
	border-radius: var(--swl-faq_icon_radius);
}
.swell-block-faq .faq_a { position: relative; margin: 0; padding: 1em 1em 1em 3em; line-height: 1.5; }
.swell-block-faq .faq_a::before {
	content: "A"; position: absolute; top: .75em; left: 0; display: block; width: 2em;
	font-family: Arial, sans-serif; line-height: 2; text-align: center;
	border-radius: var(--swl-faq_icon_radius);
}
.swell-block-faq .faq_a > :first-child { margin-top: 0; }
.swell-block-faq .faq_a > :last-child { margin-bottom: 0; }

/* アイコンの色 */
[data-q="col-text"] .faq_q::before, [data-a="col-text"] .faq_a::before { box-shadow: 0 0 0 1px currentcolor; }
[data-q="fill-text"] .faq_q::before, [data-a="fill-text"] .faq_a::before { color: #fff; background-color: var(--ark-color--text); }
[data-q="col-main"] .faq_q::before, [data-a="col-main"] .faq_a::before { color: var(--ark-color--main); box-shadow: 0 0 0 1px currentcolor; }
[data-q="fill-main"] .faq_q::before, [data-a="fill-main"] .faq_a::before { color: #fff; background-color: var(--ark-color--main); }
[data-q="col-custom"] .faq_q::before { color: var(--color_faq_q); box-shadow: 0 0 0 1px currentcolor; }
[data-a="col-custom"] .faq_a::before { color: var(--color_faq_a); box-shadow: 0 0 0 1px currentcolor; }
[data-q="fill-custom"] .faq_q::before { color: #fff; background-color: var(--color_faq_q); }
[data-a="fill-custom"] .faq_a::before { color: #fff; background-color: var(--color_faq_a); }

/* スタイル：線 */
.is-style-faq-border .swell-block-faq__item { padding-right: .5em; padding-left: .5em; }
.is-style-faq-border .swell-block-faq__item + .swell-block-faq__item { padding-top: 1em; border-top: solid 1px var(--ark-color--border); }

/* スタイル：ボックス / ストライプ */
.is-style-faq-box .swell-block-faq__item { border: solid 1px var(--ark-color--border); }
.is-style-faq-box .faq_q { border-bottom: dashed 1px var(--ark-color--border); }
.is-style-faq-box .faq_q, .is-style-faq-box .faq_a,
.is-style-faq-stripe .faq_q, .is-style-faq-stripe .faq_a { padding: 1.25em 1em 1.25em 4em; }
.is-style-faq-box .faq_q::before, .is-style-faq-box .faq_a::before,
.is-style-faq-stripe .faq_q::before, .is-style-faq-stripe .faq_a::before { top: 1em; left: 1em; }
.is-style-faq-stripe .swell-block-faq__item:not(:last-child) { margin-bottom: 1.5em; }
.is-style-faq-stripe .faq_q { background-color: var(--ark-color--gray); }


/* テーブル（SWELLのテーブルブロック互換：横スクロール・列幅・ヘッダー固定） */
.wp-block-table { --table-border: 1px solid var(--ark-color--border); }
.wp-block-table > table { --swl-cell1-width: unset; margin-bottom: 0; }
.wp-block-table td, .wp-block-table th { padding: .5em .75em; vertical-align: top; min-width: var(--swl-minwidth-cell, 0); }
.wp-block-table > table tr > :first-child {
	max-width: var(--swl-cell1-width, auto);
	min-width: var(--swl-cell1-width, var(--swl-minwidth-cell, 0));
	width: var(--swl-cell1-width, auto);
}
.wp-block-table thead td, .wp-block-table thead th {
	background-color: var(--thead-color--bg, var(--ark-color--gray));
	color: var(--thead-color--txt, inherit);
}
.wp-block-table tbody th { background-color: var(--tbody-th-color--bg, transparent); color: var(--tbody-th-color--txt, inherit); }

[data-table-scrollable] { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
[data-table-scrollable] table {
	border-collapse: separate; border-spacing: 0;
	min-width: 100%; max-width: var(--table-width, 100%) !important; width: var(--table-width, 100%) !important;
	border-bottom: var(--table-border); border-right: var(--table-border);
}
[data-table-scrollable] td, [data-table-scrollable] th { border-bottom: 0; border-right: 0; }
[data-table-scrollable=both] { display: block; width: 100%; max-width: 100%; overflow-x: scroll; }
[data-table-scrollable=sp] { --table-width--sp: var(--table-width); }
[data-table-scrollable=sp] table { --table-width: 100% !important; }
[data-table-scrollable=pc] { display: block; width: var(--table-width, 100%); max-width: var(--table-width, 100%); overflow-x: scroll; }
[data-table-scrollable=pc] table { --table-width: 100% !important; }
@media (max-width: 959px) {
	[data-table-scrollable=sp] { display: block; overflow-x: scroll; }
	[data-table-scrollable=sp] table { width: var(--table-width--sp, 100%) !important; max-width: var(--table-width--sp, 100%) !important; }
	[data-table-scrollable=pc] { width: 100%; max-width: 100%; }
	[data-table-scrollable=pc] table { width: 100% !important; }
}
@media (min-width: 960px) {
	[data-table-scrollable=sp] { overflow-x: visible; padding-bottom: 0; }
	.c-scrollHint.sp_ { display: none !important; }
}
@media (max-width: 959px) { .c-scrollHint.pc_ { display: none !important; } }

/* 1列目固定 */
[data-cell1-fixed] table tr > :first-child { position: sticky; left: 0; z-index: 2; background-color: var(--ark-color--bg, #fff) !important; }

/* ヘッダー固定 */
.wp-block-table[data-theadfix] { overflow: visible; }
.wp-block-table[data-theadfix] table { border-collapse: separate; }
.wp-block-table[data-theadfix=both] thead th { position: sticky; top: 0; z-index: 3; }

/* スクロールヒント */
.c-scrollHint { margin: 3em 0 2px !important; text-align: right; animation: ark-float-h 2s ease-in-out infinite alternate; }
.c-scrollHint span { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; opacity: .75; }
.c-scrollHint span i { font-style: normal; font-size: 14px; margin-left: 4px; }
.c-scrollHint + .wp-block-table { margin-top: 0 !important; }
@keyframes ark-float-h { 0% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 100% { transform: translateX(4px); } }


/* ふきだし（SWELLの .c-balloon 互換。色はSWELLの初期値） */
.swell-block-balloon { margin: 1.5em 0; }
.c-balloon { position: relative; display: flex; align-content: flex-start; justify-content: space-between; }
.c-balloon.-bln-right { flex-direction: row-reverse; }
.c-balloon__icon { position: relative; flex-shrink: 0; width: 60px; text-align: center; }
.c-balloon__iconImg { display: block; margin: 0 auto; object-fit: cover; }
.c-balloon .c-balloon__iconImg { width: 60px; height: 60px; }
.c-balloon__icon.-circle > .c-balloon__iconImg { border: solid 2px #ececec; border-radius: 50%; }
.c-balloon__iconName { display: block; padding-top: 4px; font-size: 10px; line-height: 1; opacity: .8; }
.c-balloon__body { display: flex; flex-basis: 100%; align-items: flex-start; padding: 4px 24px; }
.c-balloon__body.-thinking { padding-top: 8px; }
.c-balloon.-bln-left .c-balloon__body { justify-content: flex-start; }
.c-balloon.-bln-right .c-balloon__body { justify-content: flex-end; }
.c-balloon__text { position: relative; max-width: 560px; padding: 1em; color: #333; line-height: 1.6; border-radius: 8px; font-size: .95em; }
.-border-on .c-balloon__text { border-style: solid; border-width: 1px; }
.c-balloon .c-balloon__text > p { margin-top: 0; margin-bottom: 0; }
.c-balloon .c-balloon__text > p + p { margin-top: .75em; }
.c-balloon__shapes { position: absolute; top: 16px; z-index: 1; width: 0; height: 0; background-color: inherit; border-color: inherit; }
.c-balloon.-bln-left .c-balloon__shapes { left: 0; }
.c-balloon.-bln-right .c-balloon__shapes { right: 0; transform: rotateY(180deg); }
.c-balloon__before, .c-balloon__after { position: absolute; top: 0; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; }
.-speaking .c-balloon__before, .-speaking .c-balloon__after { left: -10px; border-width: 8px 10px 8px 0; }
.-thinking .c-balloon__before, .-thinking .c-balloon__after { background: inherit; border-radius: 50%; }
.-thinking.-border-none .c-balloon__before, .-thinking.-border-none .c-balloon__after { border: none; }
.-thinking.-border-on .c-balloon__before, .-thinking.-border-on .c-balloon__after { border-color: inherit; border-width: 1px; }
.c-balloon__before { z-index: 3; }
.-speaking.-border-on .c-balloon__before { left: -8px; }
.-thinking .c-balloon__before { top: 0; left: -21px; width: 8px; height: 8px; border-radius: 50%; }
.c-balloon__after { z-index: 2; border-right-color: inherit; }
.-speaking.-border-none .c-balloon__after { display: none; }
.-thinking .c-balloon__after { top: 8px; left: -16px; width: 12px; height: 12px; }

[data-col="gray"] .c-balloon__text { background: #f7f7f7; border-color: #ccc; }
[data-col="green"] .c-balloon__text { background: #d1f8c2; border-color: #9ddd93; }
[data-col="blue"] .c-balloon__text { background: #e2f6ff; border-color: #93d2f0; }
[data-col="red"] .c-balloon__text { background: #ffebeb; border-color: #f48789; }
[data-col="yellow"] .c-balloon__text { background: #f9f7d2; border-color: #fbe593; }
[data-col="gray"] .c-balloon__before { border-right-color: #f7f7f7; }
[data-col="green"] .c-balloon__before { border-right-color: #d1f8c2; }
[data-col="blue"] .c-balloon__before { border-right-color: #e2f6ff; }
[data-col="red"] .c-balloon__before { border-right-color: #ffebeb; }
[data-col="yellow"] .c-balloon__before { border-right-color: #f9f7d2; }

@media (min-width: 600px) {
	.c-balloon__icon { width: 80px; }
	.c-balloon .c-balloon__iconImg { width: 80px; height: 80px; }
	.c-balloon__body { padding: 8px 24px; }
	.c-balloon__body.-thinking { padding-top: 16px; }
}
@media (max-width: 599px) {
	.-sp-vrtcl.c-balloon { flex-wrap: wrap; }
	.-sp-vrtcl .c-balloon__body { width: 100%; padding: 8px 0 0; }
	.-sp-vrtcl .-speaking { margin-top: 8px; }
	.-sp-vrtcl .-speaking .c-balloon__shapes { top: 0; margin: 0 22px 0 36px; transform: rotate(90deg); }
	.-sp-vrtcl .-thinking .c-balloon__shapes { top: -24px; margin: 0 88px; }
}

/* 星評価（[review_stars 4.6/5] など。SWELLのアイコンフォントの代わりに文字で表示） */
.c-reviewStars { display: inline-flex; gap: 1px; vertical-align: middle; font-style: normal; line-height: 1; }
.c-reviewStars i { font-style: normal; font-size: 1.1em; line-height: 1; color: #f2b21c; font-family: Arial, sans-serif; }
.c-reviewStars i::before { content: "★"; }
.c-reviewStars .icon-star-empty::before { content: "☆"; }
.c-reviewStars .icon-star-half { background: linear-gradient(90deg, #f2b21c 50%, #cdb88a 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-reviewStars .icon-star-half::before { content: "★"; }


/* テーブルの基本デザイン（淡い枠線・見出しセルの背景） */
.wp-block-table { --table-border: 1px solid #e6dcdc; margin: 1.5em 0; }
.wp-block-table table { width: 100%; border-collapse: collapse; border-spacing: 0; line-height: 1.6; }
.wp-block-table:not(.is-style-stripes) table td,
.wp-block-table:not(.is-style-stripes) table th { border: var(--table-border); }
.wp-block-table table th { font-weight: 700; text-align: left; background-color: #f8f2f3; }
.wp-block-table table td { background-color: #fff; }
.wp-block-table table thead th, .wp-block-table table thead td { text-align: center; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #faf6f6; }
.wp-block-table table caption, .wp-block-table figcaption { font-size: .85em; opacity: .8; margin-top: .5em; }
@media (max-width: 599px) {
	.wp-block-table td, .wp-block-table th { padding: .5em .6em; }
}

/* 上の基本デザインより優先させる指定（ヘッダー色・横スクロール表の二重線防止） */
.wp-block-table table thead th, .wp-block-table table thead td {
	background-color: var(--thead-color--bg, #f1e4e7);
	color: var(--thead-color--txt, inherit);
}
.wp-block-table table tbody th { background-color: var(--tbody-th-color--bg, #f8f2f3); color: var(--tbody-th-color--txt, inherit); }
.wp-block-table[data-table-scrollable]:not(.is-style-stripes) table td,
.wp-block-table[data-table-scrollable]:not(.is-style-stripes) table th { border-bottom: 0; border-right: 0; }
