@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ============================================================
   吹き出しをスマホで読みやすくする（2026-07-30）
   ------------------------------------------------------------
   問題：Cocoonから引き継いだ吹き出しは、スマホでもアイコンが80px
        あり、横幅の3割を占めて本文が1行9文字ほどになっていた。
   対応：スマホ幅のときだけアイコンと名前を小さくして、
        吹き出し側の幅を広げる。文章には手を触れない。
   ============================================================ */
@media screen and (max-width: 599px) {

	/* アイコンの列を細くする */
	.speech-wrap .speech-person {
		width: 52px !important;
		min-width: 52px !important;
	}

	/* アイコン画像そのものを小さく */
	.speech-wrap .speech-icon,
	.speech-wrap .speech-icon-image {
		width: 52px !important;
		height: 52px !important;
	}

	/* 名前の文字も小さく */
	.speech-wrap .speech-name {
		font-size: 10px !important;
		line-height: 1.3;
	}

	/* 空いた分を吹き出しに使わせる */
	.speech-wrap .speech-balloon {
		flex: 1 1 auto;
		font-size: 15px;
		padding: 12px 14px;
	}
}

/* ============================================================
   「今日のひとこと」メニューを目立たせる（2026-08-01）
   ------------------------------------------------------------
   Cocoonで付けていたピル型の装飾がSWELL移行で消え、ただの黒文字
   になっていた（読者が気づかない、というワカボンさんの指摘）。
   ⚠️PCのメニューは a タグ自体が高さ64〜72pxあるため、a に
     border-radius を付けると巨大な楕円になる（Cocoonで一度失敗
     済み）。必ず文字を囲む .ttl の方に付けること。
   ============================================================ */

/* PC・タブレットのヘッダーメニュー */
.c-gnav a[href*="/omamori"] .ttl {
	display: inline-block;
	background: #e8f0fe;
	color: #1155cc;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 20px;
	line-height: 1.4;
}
.c-gnav a[href*="/omamori"] .ttl::before {
	content: "🎋";
	margin-right: 4px;
}
.c-gnav a[href*="/omamori"]:hover .ttl {
	background: #d6e4fd;
}

/* スマホのメニュー（中に span がないので a に直接付ける） */
.c-spnav a[href*="/omamori"] {
	display: inline-block;
	background: #e8f0fe;
	color: #1155cc !important;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
	line-height: 1.4;
}
.c-spnav a[href*="/omamori"]::before {
	content: "🎋";
	margin-right: 4px;
}

/* スマホ用ヘッダー（サイト名のすぐ下・p-spHeadMenu）
   ※中の span にはクラス名が無いので直下の span を指定する。
     a の高さは36pxなので a に丸みを付けても崩れないが、
     文字幅に沿ったピルにしたいので span 側に付ける。 */
.p-spHeadMenu a[href*="/omamori"] > span {
	display: inline-block;
	background: #e8f0fe;
	color: #1155cc;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 20px;
	line-height: 1.4;
	font-size: 14px;
}
.p-spHeadMenu a[href*="/omamori"] > span::before {
	content: "🎋";
	margin-right: 4px;
}

/* ============================================================
   Cocoon互換プラグインが面倒を見ていないブロックを整える
   （2026-08-01）
   ------------------------------------------------------------
   cocoon-to-swell v1.1.2 の互換CSSは balloon / blank-box /
   toggle には対応しているが、faq と label-box には記述がない。
   そのため素の枠線だけの地味な表示になっていた。
   ★記事本文は一切触らずCSSだけで整える方針
     （faq13個・label-box16個に一度に効く。元に戻すのも消すだけ）
   ⚠️.blank-box は正常表示の82個と共有のクラスなので触らない。
     必ず .faq-wrap / .label-box に限定して指定する。
   ============================================================ */

/* ---- Q&A（faq）---- */
.faq-wrap {
	border: 1px solid #e2dcea !important;
	border-radius: 8px !important;
	background: #faf9fc;
	padding: 18px 20px;
}
.faq-wrap .faq-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.faq-wrap .faq-answer {
	margin-top: 12px;
}
.faq-wrap .faq-item-label {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
}
/* Q＝濃いラベンダーの丸に白文字（読みやすさ4.88で合格） */
.faq-wrap .faq-question-label {
	background: #7a6a92;
	color: #fff;
}
/* A＝白丸に濃いラベンダーの文字 */
.faq-wrap .faq-answer-label {
	background: #fff;
	color: #7a6a92;
	border: 2px solid #7a6a92;
}
.faq-wrap .faq-item-content {
	flex: 1 1 auto;
	padding-top: 3px;
}
.faq-wrap .faq-question-content {
	font-weight: 700;
}

/* ---- ラベル付きボックス（label-box）---- */
.label-box {
	border: 1px solid #e2dcea !important;
	border-radius: 8px !important;
	background: #faf9fc;
	padding: 0 0 4px;
	margin: 2em 0;
}
.label-box .box-label {
	background: #a89bbf;
	border-radius: 8px 8px 0 0;
	padding: 9px 16px;
}
.label-box .box-label-text {
	color: #fff;
	font-weight: 700;
}
.label-box .box-content {
	padding: 14px 20px 4px;
}

/* ============================================================
   ヘッダーのRSSアイコンを非表示（2026-08-01）
   ------------------------------------------------------------
   繊細さん向けブログの読者がRSSを使う可能性はほぼなく、押すと
   XMLの生データが表示されて戸惑わせるため（ワカボンさん本人が
   実際に戸惑った）。
   ★フィード自体( /feed/ )は生かしたまま。アイコンを隠すだけなので
     Googleなどへの新着通知の仕組みは失われない。
   戻すときはこの5行を消すだけ。
   ============================================================ */
.c-iconList__item.-rss {
	display: none !important;
}

/* ============================================================
   SWELL標準のQ&Aブロックを、旧Cocoon記事のQ&Aと同じ見た目に揃える
   （2026-08-01）
   ------------------------------------------------------------
   旧記事(584/864/848/879)のQ&Aは .faq-wrap 側で丸アイコンに装飾済み。
   新記事はSWELL標準(.swell-block-faq)で書くため別のつくりになり、
   同じサイトなのに記事によってQ&Aの形が違う状態になっていた。
   ★QとAは ::before で出力されているので、そこを丸くする。
   ============================================================ */

/* 1問ごとを、うすい枠の箱にする */
.swell-block-faq .swell-block-faq__item {
	border: 1px solid #e2dcea;
	border-radius: 8px;
	background: #faf9fc;
	padding: 16px 18px;
	margin-bottom: 14px;
}

/* 質問・答えの行を横並びに */
.swell-block-faq .faq_q,
.swell-block-faq .faq_a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-left: 0;
}
.swell-block-faq .faq_a {
	margin-top: 12px;
}

/* QとAの印を丸くする（旧記事と同じ形） */
.swell-block-faq .faq_q::before,
.swell-block-faq .faq_a::before {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	position: static;
	margin: 0;
}
/* Q＝濃いラベンダーの丸に白文字（読みやすさ4.88で合格） */
.swell-block-faq .faq_q::before {
	background: #7a6a92;
	color: #fff;
}
/* A＝白丸に濃いラベンダーの文字 */
.swell-block-faq .faq_a::before {
	background: #fff;
	color: #7a6a92;
	border: 2px solid #7a6a92;
}

/* 文章側 */
.swell-block-faq .faq_q {
	font-weight: 700;
}
.swell-block-faq .faq_q > *:not(::before),
.swell-block-faq .faq_a > * {
	flex: 1 1 auto;
}
.swell-block-faq .faq_a > *:first-child,
.swell-block-faq .faq_q {
	padding-top: 2px;
}

/* --- 上の指定の修正（2026-08-01）---
   .faq_a を flex にしたことで、答えの段落が横に2列に割れてしまった。
   答え側は「丸アイコン」と「文章のかたまり」の2つに分けて、
   文章側は縦積みのままにする。 */
.swell-block-faq .faq_a {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	align-items: start;
}
.swell-block-faq .faq_a::before {
	grid-column: 1;
	grid-row: 1;
}
.swell-block-faq .faq_a > * {
	grid-column: 2;
}
.swell-block-faq .faq_a > *:first-of-type {
	grid-row: 1;
}