/* ==========================================================================
   AXIA decorations.css — 記事内装飾デザイン
   見出しスタイル群とブロックスタイル方式を解析し、
   オリジナルのデザイン・実装として再構築したもの。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 本文ベース
   -------------------------------------------------------------------------- */
.axia-content {
	font-size: 1rem;
	line-height: 1.9;
}

.axia-content > * + * {
	margin-top: 1.4em;
}

/* --------------------------------------------------------------------------
   1. 見出しデザイン
   デフォルトはカスタマイザー（body クラス axia-h2--xxx）で一括指定。
   記事内ではブロックスタイル .is-style-axia-* で個別上書き可能。
   -------------------------------------------------------------------------- */
.axia-content h2 {
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
	line-height: 1.4;
	margin: 2.8em 0 1em;
}

.axia-content h3 {
	font-size: clamp(1.1rem, 2.2vw, 1.25rem);
	line-height: 1.4;
	margin: 2.2em 0 .9em;
}

.axia-content h4 {
	font-size: 1.05rem;
	margin: 2em 0 .8em;
}

/* ----- H2 ----- */

/* 塗りつぶし */
.axia-h2--fill .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-fill {
	background: var(--axia-main);
	color: #fff;
	padding: .7em 1em;
	border-radius: 8px;
}

/* 塗りつぶし＋吹き出し */
.axia-h2--fill-balloon .axia-content h2:not([class*="is-style"]) {
	position: relative;
	background: var(--axia-main);
	color: #fff;
	padding: .7em 1em;
	border-radius: 8px;
}

.axia-h2--fill-balloon .axia-content h2:not([class*="is-style"])::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 1.4em;
	border: 10px solid transparent;
	border-top-color: var(--axia-main);
}

/* 左ライン＋背景 */
.axia-h2--border-left-bg .axia-content h2:not([class*="is-style"]) {
	background: rgba(var(--axia-main-rgb), .07);
	border-left: 6px solid var(--axia-main);
	padding: .65em .9em;
	border-radius: 0 8px 8px 0;
}

/* 左ライン */
.axia-h2--border-left .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-border-left {
	border-left: 6px solid var(--axia-main);
	padding: .2em 0 .2em .7em;
}

/* 下線 */
.axia-h2--border-bottom .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-border-bottom {
	border-bottom: 3px solid var(--axia-main);
	padding: 0 .2em .5em;
}

/* 下線2色 */
.axia-h2--border-2tone .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-border-2tone {
	position: relative;
	border-bottom: 3px solid rgba(var(--axia-main-rgb), .15);
	padding: 0 .2em .5em;
}

.axia-h2--border-2tone .axia-content h2:not([class*="is-style"])::after,
.axia-content h2.is-style-axia-border-2tone::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 110px;
	height: 3px;
	background: var(--axia-main);
}

/* 上下線 */
.axia-h2--border-both .axia-content h2:not([class*="is-style"]) {
	border-top: 2px solid var(--axia-main);
	border-bottom: 2px solid var(--axia-main);
	padding: .6em .2em;
}

/* ステッチ */
.axia-h2--stitch .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-stitch {
	background: rgba(var(--axia-main-rgb), .07);
	outline: 2px dashed var(--axia-main);
	outline-offset: -7px;
	padding: .8em 1.1em;
	border-radius: 8px;
}

/* グラデーション */
.axia-h2--gradient .axia-content h2:not([class*="is-style"]),
.axia-content h2.is-style-axia-gradient {
	background: linear-gradient(120deg, var(--axia-main), rgba(var(--axia-accent-rgb), .85));
	color: #fff;
	padding: .7em 1em;
	border-radius: 8px;
}

/* ストライプ背景 */
.axia-h2--stripe .axia-content h2:not([class*="is-style"]) {
	background: repeating-linear-gradient(-45deg, rgba(var(--axia-main-rgb), .08) 0 6px, transparent 6px 12px);
	border-bottom: 3px solid var(--axia-main);
	padding: .7em 1em;
}

/* センター飾り線 */
.axia-h2--center-deco .axia-content h2:not([class*="is-style"]) {
	text-align: center;
	position: relative;
	padding-bottom: .6em;
}

.axia-h2--center-deco .axia-content h2:not([class*="is-style"])::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--axia-main), var(--axia-accent));
}

/* ----- H3 ----- */
.axia-h3--border-bottom .axia-content h3:not([class*="is-style"]) {
	border-bottom: 2px solid var(--axia-main);
	padding: 0 .2em .35em;
}

.axia-h3--border-left .axia-content h3:not([class*="is-style"]) {
	border-left: 4px solid var(--axia-main);
	padding: .15em 0 .15em .6em;
}

.axia-h3--left-dashed .axia-content h3:not([class*="is-style"]) {
	border-left: 4px solid var(--axia-main);
	border-bottom: 2px dashed rgba(var(--axia-main-rgb), .4);
	padding: .15em 0 .35em .6em;
}

.axia-h3--double .axia-content h3:not([class*="is-style"]) {
	border-bottom: 5px double var(--axia-main);
	padding: 0 .2em .35em;
}

.axia-h3--square .axia-content h3:not([class*="is-style"]) {
	position: relative;
	padding-left: 1.3em;
}

.axia-h3--square .axia-content h3:not([class*="is-style"])::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: .8em;
	height: .8em;
	border-radius: 3px;
	background: var(--axia-main);
}

.axia-h3--circle .axia-content h3:not([class*="is-style"]) {
	position: relative;
	padding-left: 1.3em;
}

.axia-h3--circle .axia-content h3:not([class*="is-style"])::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: .75em;
	height: .75em;
	border-radius: 50%;
	border: 3px solid var(--axia-main);
}

.axia-h3--fill .axia-content h3:not([class*="is-style"]) {
	background: rgba(var(--axia-main-rgb), .1);
	padding: .5em .8em;
	border-radius: 6px;
}

/* ----- H4 ----- */
.axia-h4--dot .axia-content h4:not([class*="is-style"]) {
	position: relative;
	padding-left: 1.1em;
}

.axia-h4--dot .axia-content h4:not([class*="is-style"])::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--axia-accent);
}

.axia-h4--dash .axia-content h4:not([class*="is-style"]) {
	position: relative;
	padding-left: 1.2em;
}

.axia-h4--dash .axia-content h4:not([class*="is-style"])::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: .75em;
	height: 2px;
	background: var(--axia-main);
}

.axia-h4--dashed-line .axia-content h4:not([class*="is-style"]) {
	border-bottom: 1px dashed rgba(var(--axia-main-rgb), .5);
	padding-bottom: .3em;
}

.axia-h4--border-left .axia-content h4:not([class*="is-style"]) {
	border-left: 3px solid var(--axia-main);
	padding-left: .55em;
}

.axia-h4--bg-soft .axia-content h4:not([class*="is-style"]) {
	background: var(--axia-sub-bg);
	padding: .4em .7em;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   2. ボックス装飾（段落ブロックスタイル）
   -------------------------------------------------------------------------- */
[class*="is-style-axia-box-"] {
	padding: 1.2em 1.4em;
	border-radius: 10px;
}

.is-style-axia-box-simple {
	border: 2px solid var(--axia-border);
}

.is-style-axia-box-soft {
	background: rgba(var(--axia-main-rgb), .07);
}

.is-style-axia-box-stitch {
	background: rgba(var(--axia-accent-rgb), .08);
	outline: 2px dashed rgba(var(--axia-accent-rgb), .6);
	outline-offset: -7px;
}

.is-style-axia-box-shadow {
	background: var(--axia-bg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

/* ラベル付きボックス（POINT / CHECK / MEMO / 注意 / GOOD / BAD） */
.is-style-axia-box-point,
.is-style-axia-box-check,
.is-style-axia-box-memo,
.is-style-axia-box-alert,
.is-style-axia-box-good,
.is-style-axia-box-bad {
	position: relative;
	margin-top: 2.4em !important;
	padding-top: 1.6em;
	border-width: 2px;
	border-style: solid;
}

.is-style-axia-box-point::before,
.is-style-axia-box-check::before,
.is-style-axia-box-memo::before,
.is-style-axia-box-alert::before,
.is-style-axia-box-good::before,
.is-style-axia-box-bad::before {
	position: absolute;
	top: -0.9em;
	left: 1em;
	padding: .15em .9em;
	border-radius: 99px;
	font-size: .78em;
	font-weight: 700;
	color: #fff;
	letter-spacing: .06em;
}

.is-style-axia-box-point {
	border-color: var(--axia-main);
	background: rgba(var(--axia-main-rgb), .05);
}

.is-style-axia-box-point::before {
	content: "POINT";
	background: var(--axia-main);
}

.is-style-axia-box-check {
	border-color: var(--axia-accent);
	background: rgba(var(--axia-accent-rgb), .07);
}

.is-style-axia-box-check::before {
	content: "CHECK";
	background: var(--axia-accent);
}

.is-style-axia-box-memo {
	border-color: #94a3b8;
	background: #f8fafc;
}

.is-style-axia-box-memo::before {
	content: "MEMO";
	background: #64748b;
}

.is-style-axia-box-alert {
	border-color: #ef4444;
	background: #fef2f2;
}

.is-style-axia-box-alert::before {
	content: "注意";
	background: #ef4444;
}

.is-style-axia-box-good {
	border-color: #22c55e;
	background: #f0fdf4;
}

.is-style-axia-box-good::before {
	content: "GOOD";
	background: #22c55e;
}

.is-style-axia-box-bad {
	border-color: #f43f5e;
	background: #fff1f2;
}

.is-style-axia-box-bad::before {
	content: "BAD";
	background: #f43f5e;
}

/* --------------------------------------------------------------------------
   3. タイトル付きボックス（グループブロックスタイル / キャップボックス）
   1ブロック目の要素をタイトルとして扱う
   -------------------------------------------------------------------------- */
[class*="is-style-axia-cap-"] {
	border-radius: 10px;
	overflow: visible;
}

.is-style-axia-cap-fill {
	border: 2px solid var(--axia-main);
}

.is-style-axia-cap-fill > :first-child {
	background: var(--axia-main);
	color: #fff;
	margin: 0 !important;
	padding: .5em 1.2em;
	border-radius: 7px 7px 0 0;
	font-weight: 700;
}

.is-style-axia-cap-fill > :not(:first-child) {
	margin: 1em 1.2em;
}

.is-style-axia-cap-border {
	border: 2px solid var(--axia-main);
}

.is-style-axia-cap-border > :first-child {
	color: var(--axia-main);
	font-weight: 700;
	margin: .8em 1.2em 0 !important;
	padding-bottom: .4em;
	border-bottom: 1px solid rgba(var(--axia-main-rgb), .3);
}

.is-style-axia-cap-border > :not(:first-child) {
	margin: .8em 1.2em 1em;
}

.is-style-axia-cap-onborder {
	position: relative;
	border: 2px solid var(--axia-main);
	margin-top: 2em !important;
	padding: 1.4em 1.2em .6em;
}

.is-style-axia-cap-onborder > :first-child {
	position: absolute;
	top: -1em;
	left: 1em;
	background: var(--axia-bg);
	color: var(--axia-main);
	font-weight: 700;
	margin: 0 !important;
	padding: 0 .6em;
	line-height: 2em;
}

.is-style-axia-cap-shadow {
	box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
	background: var(--axia-bg);
}

.is-style-axia-cap-shadow > :first-child {
	background: var(--axia-sub-bg);
	font-weight: 700;
	margin: 0 !important;
	padding: .5em 1.2em;
	border-radius: 10px 10px 0 0;
}

.is-style-axia-cap-shadow > :not(:first-child) {
	margin: 1em 1.2em;
}

/* --------------------------------------------------------------------------
   4. リスト装飾
   -------------------------------------------------------------------------- */
ul[class*="is-style-axia-list-"] {
	list-style: none;
	padding-left: .4em;
}

ul[class*="is-style-axia-list-"] li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: .5em;
}

ul[class*="is-style-axia-list-"] li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.is-style-axia-list-check li::before {
	content: "✔";
	color: var(--axia-main);
}

.is-style-axia-list-good li::before {
	content: "○";
	color: #22c55e;
}

.is-style-axia-list-bad li::before {
	content: "✕";
	color: #ef4444;
}

.is-style-axia-list-arrow li::before {
	content: "➤";
	color: var(--axia-accent);
}

ol.is-style-axia-list-num-circle {
	list-style: none;
	counter-reset: axia-num;
	padding-left: .4em;
}

ol.is-style-axia-list-num-circle li {
	position: relative;
	counter-increment: axia-num;
	padding-left: 2.2em;
	margin-bottom: .6em;
}

ol.is-style-axia-list-num-circle li::before {
	content: counter(axia-num);
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--axia-main);
	color: #fff;
	font-size: .85em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.is-style-axia-list-none {
	list-style: none;
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   5. ボタン装飾
   -------------------------------------------------------------------------- */
.wp-block-button[class*="is-style-axia-btn-"] .wp-block-button__link {
	border-radius: 99px;
	padding: .8em 2.4em;
	font-weight: 700;
	transition: transform .15s, box-shadow .15s, opacity .15s;
}

.wp-block-button[class*="is-style-axia-btn-"] .wp-block-button__link:hover {
	transform: translateY(-2px);
	opacity: 1;
}

.is-style-axia-btn-solid .wp-block-button__link {
	background: var(--axia-main);
	color: #fff;
	box-shadow: 0 4px 0 rgba(var(--axia-main-rgb), .45);
}

.is-style-axia-btn-gradient .wp-block-button__link {
	background: linear-gradient(120deg, var(--axia-main), var(--axia-accent));
	color: #fff;
	box-shadow: 0 6px 16px rgba(var(--axia-main-rgb), .35);
}

.is-style-axia-btn-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--axia-main);
	color: var(--axia-main);
}

/* シャインボタン（光が走る） */
.is-style-axia-btn-shine .wp-block-button__link {
	position: relative;
	overflow: hidden;
	background: var(--axia-accent);
	color: #fff;
	box-shadow: 0 6px 16px rgba(var(--axia-accent-rgb), .4);
}

.is-style-axia-btn-shine .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -80%;
	width: 40%;
	height: 200%;
	background: rgba(255, 255, 255, .5);
	transform: rotate(25deg);
	animation: axia-shine 3s ease-in-out infinite;
}

@keyframes axia-shine {
	0%   { left: -80%; }
	30%  { left: 140%; }
	100% { left: 140%; }
}

/* CVボタン（大型・脈動） */
.is-style-axia-btn-cv {
	width: 100%;
	max-width: 480px;
}

.is-style-axia-btn-cv .wp-block-button__link {
	display: block;
	width: 100%;
	font-size: 1.1em;
	padding: 1em 2em;
	background: linear-gradient(180deg, #fb923c, #ea580c);
	color: #fff;
	box-shadow: 0 6px 0 #9a3412, 0 10px 24px rgba(0, 0, 0, .2);
	animation: axia-pulse 2.4s ease-in-out infinite;
}

@keyframes axia-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.025); }
}

/* --------------------------------------------------------------------------
   6. テーブル装飾
   -------------------------------------------------------------------------- */
.axia-content table {
	border-collapse: collapse;
	width: 100%;
}

.axia-content th,
.axia-content td {
	padding: .7em 1em;
}

.is-style-axia-table-simple th {
	background: var(--axia-main);
	color: #fff;
}

.is-style-axia-table-simple td {
	border-bottom: 1px solid var(--axia-border);
}

.is-style-axia-table-stripe th {
	background: var(--axia-main);
	color: #fff;
}

.is-style-axia-table-stripe tr:nth-child(even) td {
	background: rgba(var(--axia-main-rgb), .06);
}

.is-style-axia-table-border th,
.is-style-axia-table-border td {
	border: 1px solid var(--axia-border);
}

.is-style-axia-table-border th {
	background: var(--axia-sub-bg);
}

.is-style-axia-table-sp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.is-style-axia-table-sp-scroll table {
	min-width: 640px;
}

/* --------------------------------------------------------------------------
   7. 引用・区切り線
   -------------------------------------------------------------------------- */
.is-style-axia-quote-modern {
	position: relative;
	border: 0;
	background: var(--axia-sub-bg);
	border-radius: 10px;
	padding: 1.6em 1.6em 1.6em 3.2em;
}

.is-style-axia-quote-modern::before {
	content: "“";
	position: absolute;
	left: .35em;
	top: .1em;
	font-size: 3em;
	font-family: Georgia, serif;
	color: rgba(var(--axia-main-rgb), .4);
}

.is-style-axia-quote-soft {
	border-left: 4px solid rgba(var(--axia-main-rgb), .35);
	background: rgba(var(--axia-main-rgb), .05);
	padding: 1em 1.4em;
	border-radius: 0 8px 8px 0;
}

.is-style-axia-sep-wave {
	border: 0;
	height: 12px;
	background: radial-gradient(circle at 6px -4px, transparent 8px, var(--axia-border) 8px, var(--axia-border) 9px, transparent 10px) repeat-x;
	background-size: 14px 14px;
}

.is-style-axia-sep-dots {
	border: 0;
	text-align: center;
	height: auto;
	background: none;
}

.is-style-axia-sep-dots::before {
	content: "・・・";
	letter-spacing: .8em;
	color: rgba(var(--axia-main-rgb), .6);
	font-size: 1.2em;
}

/* --------------------------------------------------------------------------
   8. インラインマーカー（蛍光ペン）
   カラーパレットの背景色指定をマーカー風（下半分）に変換
   -------------------------------------------------------------------------- */
.axia-content mark,
.axia-content .has-axia-marker-yellow-background-color,
.axia-content .has-axia-marker-blue-background-color,
.axia-content .has-axia-marker-pink-background-color,
.axia-content .has-axia-marker-green-background-color {
	background-color: transparent !important;
	padding: 0 .1em;
	font-weight: inherit;
}

.axia-content mark,
.axia-content .has-axia-marker-yellow-background-color {
	background-image: linear-gradient(transparent 62%, #fff3a3 62%);
}

.axia-content .has-axia-marker-blue-background-color {
	background-image: linear-gradient(transparent 62%, #bfe1ff 62%);
}

.axia-content .has-axia-marker-pink-background-color {
	background-image: linear-gradient(transparent 62%, #ffd6e7 62%);
}

.axia-content .has-axia-marker-green-background-color {
	background-image: linear-gradient(transparent 62%, #c9f3d4 62%);
}

/* --------------------------------------------------------------------------
   9. 吹き出し（パターン: axia-balloon）
   -------------------------------------------------------------------------- */
.axia-balloon {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 1.6em 0;
}

.axia-balloon--right {
	flex-direction: row-reverse;
}

.axia-balloon__avatar {
	flex-shrink: 0;
	margin: 0;
}

.axia-balloon__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--axia-border);
}

.axia-balloon__text {
	position: relative;
	background: var(--axia-sub-bg);
	border-radius: 12px;
	padding: .9em 1.2em;
	margin: 0;
	max-width: calc(100% - 100px);
}

.axia-balloon--left .axia-balloon__text::before {
	content: "";
	position: absolute;
	top: 22px;
	left: -8px;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent var(--axia-sub-bg) transparent transparent;
}

.axia-balloon--right .axia-balloon__text::before {
	content: "";
	position: absolute;
	top: 22px;
	right: -8px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent var(--axia-sub-bg);
}

/* --------------------------------------------------------------------------
   10. FAQ（パターン: axia-faq）
   -------------------------------------------------------------------------- */
.axia-faq__item {
	border: 1px solid var(--axia-border);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1em;
}

.axia-faq__q,
.axia-faq__a {
	position: relative;
	margin: 0 !important;
	padding: 1em 1.2em 1em 3.4em;
}

.axia-faq__q::before,
.axia-faq__a::before {
	position: absolute;
	left: 1em;
	top: .85em;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9em;
}

.axia-faq__q {
	background: rgba(var(--axia-main-rgb), .07);
	font-weight: 700;
}

.axia-faq__q::before {
	content: "Q";
	background: var(--axia-main);
}

.axia-faq__a::before {
	content: "A";
	background: var(--axia-accent);
}

/* --------------------------------------------------------------------------
   11. ステップ / タイムライン（パターン: axia-steps）
   -------------------------------------------------------------------------- */
.axia-steps {
	counter-reset: axia-step;
}

.axia-step {
	position: relative;
	padding: 0 0 1.8em 64px;
	counter-increment: axia-step;
}

.axia-step::before {
	content: "STEP " counter(axia-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	padding: .35em 0;
	text-align: center;
	background: var(--axia-main);
	color: #fff;
	font-size: .62rem;
	font-weight: 700;
	border-radius: 6px;
	letter-spacing: .04em;
}

.axia-step::after {
	content: "";
	position: absolute;
	left: 25px;
	top: 34px;
	bottom: 4px;
	width: 2px;
	background: rgba(var(--axia-main-rgb), .25);
}

.axia-step:last-child::after {
	display: none;
}

.axia-step__title {
	margin: 0 0 .4em !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 1.05rem !important;
	color: var(--axia-text) !important;
}

.axia-step__body {
	margin: 0;
	font-size: .95rem;
}

/* --------------------------------------------------------------------------
   12. アコーディオン（details）
   -------------------------------------------------------------------------- */
.axia-accordion {
	border: 1px solid var(--axia-border);
	border-radius: 10px;
	overflow: hidden;
	margin: 1.2em 0;
}

.axia-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: 1em 3em 1em 1.2em;
	font-weight: 700;
	background: var(--axia-sub-bg);
	position: relative;
}

.axia-accordion summary::-webkit-details-marker {
	display: none;
}

.axia-accordion summary::after {
	content: "";
	position: absolute;
	right: 1.2em;
	top: 50%;
	width: .6em;
	height: .6em;
	border-right: 2px solid var(--axia-main);
	border-bottom: 2px solid var(--axia-main);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s;
}

.axia-accordion[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.axia-accordion > *:not(summary) {
	padding: 0 1.2em;
}

/* --------------------------------------------------------------------------
   13. 星評価（パターン: axia-review）
   -------------------------------------------------------------------------- */
.axia-review {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--axia-sub-bg);
	border-radius: 10px;
	padding: .9em 1.3em;
}

.axia-review__label {
	margin: 0 !important;
	font-weight: 700;
	font-size: .9rem;
}

.axia-review__stars {
	margin: 0 !important;
	color: #f59e0b;
	letter-spacing: .1em;
	font-size: 1.15rem;
}

.axia-review__stars-empty {
	color: #d1d5db;
}

.axia-review__score {
	color: var(--axia-text);
	font-weight: 700;
	font-size: .95rem;
	margin-left: .3em;
}

/* --------------------------------------------------------------------------
   14. CTAエリア（パターン: axia-cta）
   -------------------------------------------------------------------------- */
.axia-cta {
	background: linear-gradient(135deg, rgba(var(--axia-main-rgb), .08), rgba(var(--axia-accent-rgb), .1));
	border: 2px solid rgba(var(--axia-main-rgb), .25);
	border-radius: 14px;
	padding: 2em 1.6em;
	text-align: center;
}

.axia-cta__title {
	margin: 0 0 .5em !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--axia-text) !important;
}

.axia-cta__text {
	margin: 0 0 1.2em;
	font-size: .95rem;
}

/* --------------------------------------------------------------------------
   15. 目次（main.jsが自動生成: .axia-toc）
   -------------------------------------------------------------------------- */
.axia-toc {
	background: var(--axia-sub-bg);
	border: 1px solid var(--axia-border);
	border-radius: 12px;
	padding: 1.2em 1.6em;
	margin: 2em 0;
}

.axia-toc__title {
	margin: 0 0 .6em;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: var(--axia-main);
}

.axia-toc__list {
	margin: 0;
	padding-left: 1.4em;
}

.axia-toc__list li {
	margin-bottom: .35em;
	font-size: .92rem;
}

.axia-toc__list .axia-toc__sub {
	margin-top: .35em;
	padding-left: 1.2em;
	list-style: circle;
}

.axia-toc a {
	color: var(--axia-text);
	text-decoration: none;
}

.axia-toc a:hover {
	color: var(--axia-main);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   16. SNSシェア / 著者ボックス / タグ
   -------------------------------------------------------------------------- */
.sns-share {
	margin: 2.4em 0;
}

.sns-share__title {
	text-align: center;
	font-weight: 700;
	font-size: .92rem;
	margin: 0 0 .8em;
}

.sns-share__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sns-share__item a {
	display: inline-block;
	padding: .55em 1.4em;
	border-radius: 99px;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
}

.sns-share__item--x a { background: #111; }
.sns-share__item--facebook a { background: #1877f2; }
.sns-share__item--line a { background: #06c755; }
.sns-share__item--hatena a { background: #00a4de; }
.sns-share__item--pocket a { background: #ef4056; }

.author-box {
	display: flex;
	gap: 18px;
	background: var(--axia-bg);
	border: 1px solid var(--axia-border);
	border-radius: 12px;
	padding: 20px;
	margin: 2em 0;
}

.author-box__avatar img {
	border-radius: 50%;
}

.author-box__name {
	margin: 0 0 .4em;
	font-weight: 700;
}

.author-box__job {
	font-size: .75rem;
	color: rgba(0, 0, 0, .55);
	margin-left: .8em;
	font-weight: 400;
}

.author-box__bio {
	margin: 0;
	font-size: .88rem;
	color: rgba(0, 0, 0, .7);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1.6em 0;
}

.tag-list a {
	font-size: .78rem;
	background: var(--axia-sub-bg);
	border-radius: 99px;
	padding: .3em 1em;
	color: var(--axia-text);
	text-decoration: none;
}

.tag-list a::before {
	content: "#";
	color: var(--axia-main);
	margin-right: 2px;
}

/* 関連記事 */
.related-posts {
	margin-top: 2.4em;
}

.related-posts__title {
	font-size: 1.15rem;
	border-left: 5px solid var(--axia-main);
	padding-left: .6em;
	margin-bottom: 1em;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.axia-balloon__avatar img {
		width: 48px;
		height: 48px;
	}

	.axia-balloon__text {
		max-width: calc(100% - 70px);
	}

	.author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}