/*!
Theme Name: TSD Theme
Theme URI: http://underscores.me/
Author: Normal Inc.
Author URI:
Description: Custom theme: TSD Theme, developed by Normal Inc.
Version: 1.0.25
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tsd-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

TSD Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
/* Font stack and base text color match the real site's compiled CSS
   (uktsc.com/thestyledictionary/) exactly, not a redesign. */
body,
button,
input,
select,
optgroup,
textarea {
	color: #333;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Segoe UI", Meiryo, "メイリオ", Arial, "Lucida Grande", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

/* 移行元サイトはホバー時の変化（opacity・色など）を要素を問わず
   `:hover { transition: 0.3s; }` という汎用ルール1本でアニメーションさせている。 */
:hover {
	transition: 0.3s;
}

/* 本文（.article-body）中のリンク色は移行元サイトの実測値に合わせる。
   outline-body a等、後方でより具体的な色を指定している箇所を優先させるため
   ファイル冒頭の汎用リンク色としてここに置く。 */
.article-body a {
	color: #0782c1;
}

a:visited {
	color: #800080;
}

/* 移行元サイトはパンくず・グローバルナビを含むサイト全体で、ホバー時に文字色を
   変えずopacity:0.7に下げるだけの実装のため、_sテーマ標準の
   a:hover,a:focus,a:active{color:#191970}を上書きする。 */
a:hover,
a:active {
	opacity: 0.7;
	outline: 0;
}

a:focus {
	outline: thin dotted;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# TSD Theme
----------------------------------------------------------------
# 基本
# レイアウト
# ヘッダー
# トップページ：ヒーロー記事＋記事一覧
# サイドバー：ランキングウィジェット
# 記事一覧ページ
# カテゴリーアーカイブ
# 記事詳細（single）
# フッター
--------------------------------------------------------------*/

/* 基本
--------------------------------------------------------------
移行元サイトはサイト全体でアンチエイリアス済みのフォントスムージングを設定している
（<body>のgetComputedStyleで確認済み）— WebKit/Blinkではブラウザ標準より
文字が明らかに薄く・細く表示される。これが同じ色の値でも自サイトの文字が
太く見えていた原因だった。
--------------------------------------------------------------*/
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* レイアウト
--------------------------------------------------------------
#contentのデスクトップ時のカラム幅（.site-mainが1fr、#secondaryが固定256px、
gap64px、最大幅960px）は、getComputedStyleで計測した移行元サイト自体のレイアウトを
そのまま再現したもの — 独自デザインではない。
--------------------------------------------------------------*/
#content {
	padding: 0 16px;
}

@media (min-width: 632px) {
	#content {
		display: grid;
		grid-template-columns: 1fr 256px;
		column-gap: 64px;
		max-width: 960px;
		margin: 28px auto 0;
		padding: 0;
	}
}

.site-main {
	min-width: 0;
}

#secondary {
	min-width: 0;
}

/* ヘッダー
--------------------------------------------------------------
移行元サイト（uktsc.com/thestyledictionary/）のヘッダーを、そのコンパイル済み
CSSから計測した値で再現：色・ブレークポイント（632px）・以下のボックス
サイズは、そのスタイルシートから直接取得したもので独自デザインではない。
--------------------------------------------------------------*/
.site-header {
	background: #fff;
}

@media (min-width: 632px) {
	.site-header {
		border-bottom: 1px solid #000;
	}
}

.header-bar {
	display: flex;
	align-items: stretch;
	height: 62px;
	background-color: #fff;
	box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.11);
}

@media (min-width: 632px) {
	.header-bar {
		height: 78px;
		max-width: 960px;
		margin: 0 auto;
		box-shadow: none;
	}
}

.brand-parent {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	background: #000;
}

@media (min-width: 632px) {
	.brand-parent {
		width: 100px;
		padding: 0 10px;
	}
}

.brand-parent img {
	height: 27px;
	width: 42px;
}

@media (min-width: 632px) {
	.brand-parent img {
		height: 40px;
		width: 64px;
	}
}

.site-logo {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px;
}

.site-logo img {
	width: min(56vw, 240px);
	height: auto;
}

@media (min-width: 632px) {
	.site-logo img {
		width: 270px;
		height: 40px;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.header-search-form {
	display: flex;
	align-items: center;
	gap: 4px;
}

input.header-search-form__input[type="search"] {
	display: none;
	width: 200px;
	padding: 4px 12px;
	font-size: 15px;
	color: #333;
	border: 1px solid #e9e9e9;
	border-radius: 0;
}

.header-search-form--expanded input.header-search-form__input[type="search"] {
	display: block;
}

@media (min-width: 632px) {
	input.header-search-form__input[type="search"] {
		display: block;
	}
}

.header-search-form__submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 12px 0 8px;
	border: none;
	background: none;
	cursor: pointer;
}

.header-search-form__label {
	font-size: 8px;
	white-space: nowrap;
	color: #333;
}

@media (min-width: 632px) {
	.header-search-form__label {
		display: none;
	}
}

.menu-toggle {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px 0 8px;
	border: none;
	background-color: #fff;
	cursor: pointer;
}

@media (min-width: 632px) {
	.menu-toggle {
		display: none;
	}
}

/* グローバルナビ：1つの<nav>マークアップを、632px未満ではモバイルの
   オフキャンバスドロワーとして、632px以上ではインラインの横並びバーとして配置する。 */
.main-navigation {
	background: #fff;
}

@media (max-width: 631.98px) {
	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 20;
		width: 85vw;
		max-width: 320px;
		max-height: 100dvh;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}
}

@media (min-width: 632px) {
	.main-navigation {
		max-width: 960px;
		margin: 0 auto;
	}
}

.main-navigation__panel-head {
	display: none;
}

@media (max-width: 631.98px) {
	.main-navigation__panel-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #eee;
	}

	.main-navigation__panel-head h2 {
		margin: 0;
		padding: 16px;
		color: #3c3c3c;
		font-size: 16px;
		font-weight: 700;
	}

	.nav-close {
		padding: 16px 20px;
		border: none;
		background-color: #aaa;
		color: #fff;
		cursor: pointer;
	}
}

.global-nav-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.global-nav-item a {
	color: #3c3c3c;
	text-decoration: none;
}

.global-nav-item__line {
	display: block;
}

/* 「身だしなみ・エチケット」だけがモバイル専用のアコーディオンサブメニュー
   （身だしなみ・エチケットTOP＋AGA）を持つナビ項目 — 移行元サイトで開いて確認済み。
   デスクトップでは他の6項目と同じただのリンクとして扱われる。 */
.nav-accordion-toggle {
	display: none;
}

.global-nav-submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 631.98px) {
	.global-nav-list {
		flex-direction: column;
	}

	.global-nav-item {
		padding: 24px 16px;
		border-bottom: 1px solid #dbdbdb;
	}

	.global-nav-item a {
		position: relative;
		display: flex;
		width: 100%;
		font-size: 13px;
	}

	.global-nav-item a::after {
		content: "";
		position: absolute;
		top: 0;
		right: 4px;
		bottom: 0;
		width: 7px;
		height: 7px;
		margin: auto;
		border-right: 1px solid #333;
		border-bottom: 1px solid #333;
		transform: rotate(-45deg);
	}

	.global-nav-item--has-children .global-nav-item__link {
		display: none;
	}

	.global-nav-item--has-children {
		padding: 0;
	}

	.nav-accordion-toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 24px 16px;
		border: none;
		background: transparent;
		color: #3c3c3c;
		font: inherit;
		font-size: 13px;
		text-align: left;
		cursor: pointer;
	}

	.nav-accordion-toggle__icon {
		position: relative;
		flex-shrink: 0;
		width: 13px;
		height: 13px;
		margin-left: auto;
	}

	.nav-accordion-toggle__icon::before,
	.nav-accordion-toggle__icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 13px;
		border-top: 1px solid #333;
		transform: translateY(-50%);
	}

	.nav-accordion-toggle__icon::after {
		transition: transform 0.2s ease;
		transform: translateY(-50%) rotate(90deg);
	}

	.nav-accordion-toggle[aria-expanded="true"] .nav-accordion-toggle__icon::after {
		transform: translateY(-50%) rotate(0deg);
	}

	.global-nav-submenu.is-open {
		display: block;
	}

	.global-nav-submenu a {
		display: block;
		padding: 16px 16px 16px 32px;
		background: #f7f7f7;
		color: #3c3c3c;
		text-decoration: none;
		font-size: 13px;
		border-bottom: 1px solid #dbdbdb;
	}
}

@media (min-width: 632px) {
	.global-nav-list {
		justify-content: space-between;
	}

	.global-nav-item {
		flex: 1;
		display: grid;
		align-items: center;
		margin: 8px 0;
		border-right: 1px solid #ccc;
	}

	.global-nav-item:first-child {
		border-left: 1px solid #ccc;
	}

	.global-nav-item a {
		display: block;
		margin: 0 16px;
		text-align: center;
		font-size: 11px;
	}
}

.nav-overlay {
	display: none;
	position: fixed;
	top: 62px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-overlay.is-open {
	display: block;
}

@media (min-width: 632px) {
	.nav-overlay {
		display: none !important;
	}
}

/* トップページ：ヒーロー記事＋最新記事一覧
--------------------------------------------------------------
uktsc.com/thestyledictionary/のトップページのメインカラムを、レンダリング済み
DOM/CSSから計測して再現（そこの記事一覧はクライアントサイドレンダリングのため、
静的HTMLからではなく実際のブラウザで確認した）：モバイルでのヒーロー画像の
フルブリード表示、ヘッダー／ナビと共通の632pxブレークポイント、デスクトップの
2カラムグリッドがその下でサムネ左・テキスト右の行に変わる挙動。
--------------------------------------------------------------*/
.hero-post {
	margin: 0 -16px 16px;
}

@media (min-width: 632px) {
	.hero-post {
		margin: 0 0 16px;
	}
}

.hero-post__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
	overflow: hidden;
}

.hero-post__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-post__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-post__title {
	margin: 0;
	padding: 8px 16px 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #3c3c3c;
}

@media (min-width: 632px) {
	.hero-post__title {
		padding: 16px 0 0;
	}
}

.hero-post__title a {
	color: inherit;
	text-decoration: none;
}

.hero-post__date {
	display: block;
	padding: 4px 16px 0;
	font-size: 13px;
	color: #aaa;
	text-align: right;
}

@media (min-width: 632px) {
	.hero-post__date {
		padding: 4px 0 0;
	}
}

.latest-posts {
	margin-top: 32px;
}

.latest-posts__heading {
	margin: 0 0 16px;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
	text-align: center;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
}

@media (min-width: 632px) {
	.latest-posts__heading {
		margin: 0 0 30px;
		padding: 16px 0;
		font-size: 24px;
	}
}

.latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.latest-posts__item {
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid #eee;
}

@media (min-width: 632px) {
	.latest-posts__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.latest-posts__item {
		margin: 0;
		padding: 0;
		border-bottom: none;
	}
}

.latest-post {
	display: grid;
	grid-template-columns: 35% 1fr;
	column-gap: 16px;
}

.latest-post__thumb {
	grid-row: 1 / 3;
	display: block;
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
	overflow: hidden;
}

.latest-post__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.latest-post__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.latest-post__title {
	grid-row: 1;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #3c3c3c;
}

.latest-post__title a {
	color: inherit;
	text-decoration: none;
}

.latest-post__date {
	display: block;
	grid-row: 2;
	align-self: start;
	margin: 4px 0 0;
	font-size: 13px;
	color: #aaa;
	text-align: right;
}

@media (min-width: 632px) {
	.latest-post {
		display: block;
	}

	.latest-post__title {
		margin: 14px 0 0;
	}

	.latest-post__date {
		margin: 4px 0 0;
	}
}

.latest-posts__more {
	margin: 16px 0 60px;
	text-align: center;
}

@media (min-width: 632px) {
	.latest-posts__more {
		margin: 40px 0;
	}
}

.button--more,
.button--more:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 250px;
	padding: 12px;
	background-color: #333;
	color: #fff;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}

.button--more:hover,
.button--more:focus,
.button--more:active {
	opacity: 0.7;
}

.button--more::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

@media (min-width: 632px) {
	.button--more,
	.button--more:visited {
		width: 200px;
	}
}

/* サイドバー：ランキングウィジェット
--------------------------------------------------------------
移行元サイトのランキングウィジェット（クラウンアイコンの「人気記事ランキング」／
サムズアップアイコンの「オススメ記事ランキング」）を、レンダリング済みDOM/CSSから
計測して再現：順位バッジはサムネイル左上角のclip-pathによる三角形で、
1〜3位を金・銀・銅で色分けしている。アイテム自体は.latest-postと同じ
サムネ左・テキスト右のモバイルグリッドを再利用している。
--------------------------------------------------------------*/
.widget-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

.widget-title__icon {
	display: inline-block;
	margin-right: 8px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.widget-title__icon--crown {
	width: 20px;
	height: 22px;
	background-image: url("assets/images/top-crown-icon.webp");
}

.widget-title__icon--thumbs-up {
	width: 16px;
	height: 16px;
	background-image: url("assets/images/thumbs-up.svg");
}

.ranking-list {
	list-style: none;
	margin: 18px 0 40px;
	padding: 0;
}

.ranking-item {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid #eee;
}

@media (max-width: 631.98px) {
	.ranking-item {
		display: grid;
		grid-template-columns: 35% 1fr;
		column-gap: 16px;
	}
}

.ranking-item__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
	overflow: hidden;
}

@media (max-width: 631.98px) {
	.ranking-item__thumb {
		grid-row: 1 / 3;
	}
}

.ranking-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ranking-item__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.ranking-item__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 33px;
	height: 33px;
	padding: 1px 0 0 4px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background-color: #be9523;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.ranking-item__badge--2 {
	background-color: #939393;
}

.ranking-item__badge--3 {
	background-color: #ca4933;
}

.ranking-item__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #3c3c3c;
}

@media (max-width: 631.98px) {
	.ranking-item__title {
		grid-row: 1;
	}
}

.ranking-item__title a {
	color: inherit;
	text-decoration: none;
}

.ranking-item__date {
	display: block;
	margin: 4px 0 0;
	font-size: 13px;
	color: #aaa;
	text-align: right;
}

@media (max-width: 631.98px) {
	.ranking-item__date {
		grid-row: 2;
		align-self: start;
		margin: 0;
	}
}

@media (min-width: 632px) {
	.ranking-item__badge {
		width: 44px;
		height: 44px;
		padding: 2px 0 0 6px;
		font-size: 18px;
	}

	.ranking-item__title {
		margin: 14px 0 0;
	}
}

/* 記事一覧ページ（「すべての記事」）：パンくず・ページ数付き見出し・
   番号付きページネーションを、移行元サイトのレンダリング済みDOM/CSSから計測。
   記事グリッド自体は.latest-posts__list / .latest-postをそのまま再利用している。
--------------------------------------------------------------*/
.breadcrumb {
	margin: 16px 0;
	font-size: 11px;
	line-height: 1.6;
	color: #3c3c3c;
}

.breadcrumb__link,
.breadcrumb__link:visited {
	color: inherit;
	text-decoration: none;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus,
.breadcrumb__link:active {
	opacity: 0.7;
}

.breadcrumb__label {
	text-decoration: underline;
}

.breadcrumb__link:hover .breadcrumb__label {
	text-decoration: none;
}

.breadcrumb__sep {
	margin: 0 1em;
}

.article-list__heading {
	margin: 0 0 30px;
	padding: 14px 0;
	font-size: 20px;
	font-weight: 700;
	color: #333;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
}

/* カテゴリーアーカイブ：サブカテゴリータイル一覧（例:「身だしなみ・エチケット」
   の下の「AGA」）を、移行元サイトのレンダリング済みDOM/CSSから計測して再現。
--------------------------------------------------------------*/
.subcategory-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.subcategory-tile,
.subcategory-tile:visited {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 203px;
	padding: 16px;
	border: 1px solid #333;
	color: inherit;
	text-decoration: none;
}

.subcategory-tile:hover,
.subcategory-tile:focus,
.subcategory-tile:active {
	opacity: 0.7;
}

.subcategory-tile__icon {
	flex-shrink: 0;
	width: 34px;
	height: 39px;
}

.subcategory-tile__label {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #3c3c3c;
}

.subcategory-tile__arrow {
	flex-shrink: 0;
	width: 7px;
	height: 10px;
}

.pagination {
	margin: 32px 0;
}

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

.pagination__item {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 1px solid #333;
}

.pagination__item--prev,
.pagination__item--next {
	width: 56px;
}

.pagination__item a,
.pagination__item span {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 16px;
	color: #333;
	text-decoration: none;
}

.pagination__item a:hover,
.pagination__item--current span {
	background: #000;
	color: #fff;
}

/* 記事詳細（single）：ヘッダー・シェアブロック・執筆者プロフィールボックス・
   目次・タグ・おすすめ記事一覧を、移行元サイトのレンダリング済みDOM/CSS
   （uktsc.com/thestyledictionary/<slug>）から計測して再現。編集者が本文自体に
   埋め込むパーツ（image-container・conversation・box・togglearea・
   article-button・gallery・grid-container・比較表など — CLAUDE.md参照）も
   同様に1パーツずつ移行元サイトで検証して再現している。
--------------------------------------------------------------*/
.article-header {
	margin-top: 16px;
}

.article-header__date {
	display: block;
	font-size: 13px;
	color: #aaa;
}

.article-header__eyecatch {
	margin-top: 16px;
}

/* 移行元サイトはモバイル幅のみ`margin: 0 calc(50% - 50vw)`で#content側のpadding
   （16px）を突き破り、画像を画面幅いっぱいに表示するfull-bleedになっている
   （タイトル・投稿日はこのbleedの対象外で通常通りpadding内に収まる）。 */
@media (max-width: 631.98px) {
	.article-header__eyecatch {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* 移行元サイトのimgはwidth:640px（max-width:100%で縮小可）・aspect-ratio:16/9・
   object-fit:coverを持ち、元画像の縦横比によらず640×360で固定表示される。 */
.article-header__eyecatch img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.article-header__title {
	margin: 16px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
}

@media (min-width: 632px) {
	.article-header__title {
		font-size: 22px;
	}
}

/* 「広告表示」設定ON時のみ表示される注意書き。記事ヒーロー直後・シェアボタン
   （上部）直前に、margin無しで挟まる（移行元サイトgetComputedStyleで1:1計測、
   直後の.article-shareが持つmargin-top: 40pxがそのまま次要素との間隔になる）。 */
.article-pr-notification {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: #333;
}

/* シェアブロック：タイトル上部と本文後の2箇所で表示される。
   移行元サイト：左にサムネイル、右に「＼ この記事をシェアする ／」という文言と
   4つのシェアアイコン（サイト自身のアイコン画像 — 形・色は画像自体に
   焼き込まれており、CSSで描いたものではない）。
   グリッド1列目は固定幅ではなく35%（相対値）指定。タイトル・アイコン列側には
   paddingを持たせない（margin:0 auto中央寄せのみ）— paddingがあると、
   モバイル幅でサムネイルが縮小した際に本文側の方が高くなり、
   align-items:centerでサムネイルが縦方向中央に浮いてしまう。 */
.article-share {
	display: grid;
	grid-template-columns: 35% 1fr;
	align-items: center;
	margin-top: 40px;
	border: 1px solid #ccc;
	background: #f6f6f6;
}

.article-share__thumb {
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
	overflow: hidden;
}

.article-share__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-share__heading {
	margin: 0 0 12px;
	font-size: 12px;
	color: #555;
	text-align: center;
}

@media (min-width: 632px) {
	.article-share__heading {
		font-size: 16px;
	}
}

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

.article-share__item a {
	display: block;
	width: 30px;
	height: 30px;
}

@media (min-width: 632px) {
	.article-share__item a {
		width: 40px;
		height: 40px;
	}
}

.article-share__item img {
	display: block;
	width: 100%;
	height: 100%;
}

/* LINE公式クーポン誘導カード（親ブランドSUIT SQUAREの公式LINEへの誘導）。
   移行元サイトのkslprl2/hu66yy0/hu66yy1をgetComputedStyleで実測して再現。 */
.article-line-banner {
	margin-top: 40px;
}

.article-line-banner__label {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 400;
	color: #333;
}

.article-line-banner__label::before {
	content: '▼';
}

.article-line-banner__link {
	display: block;
	width: 100%;
}

.article-line-banner__link img {
	display: block;
	width: 100%;
	height: auto;
}

/* 執筆者プロフィールボックス（移行元サイトでの「editor-box」）。
   本文中に一言コメント枠として再利用されることもある（CLAUDE.md参照）。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため、隣接セレクタで再現する。 */
.editor-box {
	border: 1px solid #acacac;
	border-radius: 8px;
}

:is(p, h2, h3, h4, table, .component-block) + .editor-box {
	margin-top: 16px;
}

.editor-box-heading {
	display: flex;
	align-items: center;
	background-color: #efefef;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	padding: 24px 32px;
}

@media (max-width: 631.98px) {
	.editor-box-heading {
		padding: 12px 24px;
	}
}

/* アバター画像（editor-box-image）・テキスト側の左マージン（editor-box-overview、
   image側のmargin-rightではなくoverview側のmargin-left）・タイトル・
   サブタイトル・本文（editor-box-detail）は、いずれもモバイル幅
   （max-width:631.98px）で一回り小さい値を持つ。editor-box-detailの
   padding自体もモバイル12px 24px／デスクトップ24px 32pxとブレイクポイントで
   変わる（このpadding上書きは.editor-box-detailの基本ルールより後に書く
   必要があるため、下記メディアクエリではなく基本ルール直後に置いている）。 */
.editor-box-image {
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
}

@media (max-width: 631.98px) {
	.editor-box-image {
		width: 50px;
		height: 50px;
	}

	.editor-box-overview {
		margin-left: 24px;
	}

	.editor-box-title {
		font-size: 14px;
	}

	.editor-box-subtitle {
		font-size: 13px;
	}

	.editor-box-detail {
		font-size: 10px;
	}
}

@media (min-width: 632px) {
	.editor-box-image {
		width: 70px;
		height: 70px;
	}

	.editor-box-overview {
		margin-left: 50px;
	}

	.editor-box-title {
		font-size: 16px;
	}

	.editor-box-subtitle {
		font-size: 14px;
	}

	.editor-box-detail {
		font-size: 11px;
	}
}

.editor-box-title {
	font-weight: 700;
	color: #3c3c3c;
}

.editor-box-subtitle {
	margin-top: 4px;
	font-weight: 700;
	color: #2095cc;
}

.editor-box-detail {
	padding: 24px 32px;
	border-top: 1px solid #e6e6e6;
	line-height: 1.75;
	color: #3c3c3c;
}

/* .editor-box-detailの基本ルール（上記）がpaddingを無条件指定しているため、
   モバイル用の上書きは同じセレクタ詳細度でも「後に書かれたルールが勝つ」
   仕様上、この基本ルールより後に置く必要がある（他プロパティとまとめた
   メディアクエリ内にpaddingを書いても無効化される）。 */
@media (max-width: 631.98px) {
	.editor-box-detail {
		padding: 12px 24px;
	}
}

.editor-box-detail p {
	margin: 0;
}

/* 目次（Outline）。本文中にこのマークアップがそのまま埋め込まれる（CLAUDE.md参照）。
   移行元サイトはh3単位のネストした子リストにも対応しているが、記事全数を確認した
   結果ネスト使用例が無かったため、フラットな1階層リストのみ実装している。
   font-family:Poppinsは移行元サイトのCSSにも指定はあるが、フォント自体はどこからも
   読み込まれておらずsans-serifへフォールバックしているため追加していない。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。 */
.outline {
	padding: 20px 20px 32px;
	background-color: #f9f9f9;
}

:is(p, h2, h3, h4, table, .component-block) + .outline {
	margin-top: 32px;
}

.outline .outline-heading {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	margin: 0;
	padding: 0 0 2px;
	border: none;
	font-size: 20px;
	line-height: 1.5;
	color: #3c3c3c;
}

.outline-heading::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 18px;
	background-color: #222;
}

.outline-heading + .outline-body {
	margin-top: 14px;
}

.outline-body {
	word-break: break-all;
}

.outline-body ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}

.outline-body ul > li {
	font-weight: 400;
	position: relative;
}

/* h3単位のネストしたサブリスト（outline-body ul ul）にのみ移行元サイトは
   padding-left:18pxを持つ。margin-bottom:24pxは、`_s`テーマ標準の
   `li > ul, li > ol { margin-bottom: 0 }`リセットがネストしたulにだけ
   効いてしまい下マージンが消えるのを打ち消すために指定している
   （移行元サイトは`.article-body ol, .article-body ul { margin-top:16px;
   margin-bottom:24px }`という汎用ルールで、ネスト有無に関わらず24pxになる）。 */
.outline-body ul ul {
	padding-left: 18px;
	margin-bottom: 24px;
}

.outline-body > ul > li {
	font-weight: 600;
}

.outline-body > ul > li > a {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
}

/* h3単位のネストした項目のaタグにも移行元サイトはpadding-bottom/margin-bottom
   8pxを持つ（親のborder-bottom付きリンクとは違い罫線は無し）。 */
.outline-body ul > li > ul > li > a {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 8px;
}

.outline-body a {
	color: #585657;
	text-decoration: none;
}

.outline-body a:hover {
	text-decoration: underline;
}

@media (max-width: 631.98px) {
	.outline {
		padding: 16px 16px 26px;
	}

	:is(p, h2, h3, h4, table, .component-block) + .outline {
		margin-top: 24px;
	}

	.outline-body ul {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.5;
	}

	/* ネストした項目（h3単位のサブリスト等、outline-body内の全てのliが対象）は
	   5pxが移行元サイトの値。直下の項目（h2単位）用の次のルール（詳細度同点・
	   ソース順で後勝ち）で8pxに上書きされるよう、必ずこのルールより後に書くこと。 */
	.outline-body ul > li {
		margin-top: 5px;
	}

	.outline-body > ul > li {
		margin-top: 8px;
	}
}

@media (min-width: 632px) {
	.outline-body ul {
		margin-top: 4px;
		font-size: 15px;
		line-height: 1.75;
	}

	.outline-body ul > li {
		margin-top: 1px;
	}

	.outline-body > ul > li {
		margin-top: 4px;
	}
}

/* 本文の段落。テーマ標準の`p { margin-bottom: 1.5em }`だけでは行間・余白が
   移行元サイトと異なるため上書きする。font-sizeは移行元サイトに合わせ
   max-width:631.98pxで14px／min-width:632pxで15px。 */
.article-body p {
	margin-bottom: 16px;
	line-height: 1.7;
}

@media (max-width: 631.98px) {
	.article-body p {
		font-size: 14px;
	}
}

@media (min-width: 632px) {
	.article-body p {
		font-size: 15px;
	}
}

/* 本文中の見出し（記事コンテンツ内のh2/h3/h4）。移行元サイトのレンダリング済み
   article_wrapから1:1で計測。h2/h3ともに、`cms-outline-anchor-target`の
   有無に関わらず全てのケースでモバイル幅（max-width:631.98px）でそれぞれ
   16px/14pxに縮小される。 */
.article-body h2 {
	margin: 32px 0 30px;
	padding: 14px 0;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: #3c3c3c;
}

/* h3と同様、margin-top/bottomはモバイル幅でデスクトップ値（32px/30px）とは
   異なる24px/24pxになる。 */
@media (max-width: 631.98px) {
	.article-body h2 {
		margin-top: 24px;
		margin-bottom: 24px;
		font-size: 16px;
	}
}

.article-body h3 {
	margin: 32px 0 30px;
	padding: 2px 14px;
	border-left: 4px solid #333;
	font-size: 18px;
	font-weight: 700;
	color: #3c3c3c;
}

/* モバイル幅では移行元サイトに合わせmargin-top/bottomを24px/16pxにする
   （デスクトップ値32px/30pxのままだと後続要素との間隔が異なる）。 */
@media (max-width: 631.98px) {
	.article-body h3 {
		margin-top: 24px;
		margin-bottom: 16px;
		font-size: 14px;
	}
}

.article-body h4 {
	margin: 24px 0;
	font-size: 12px;
	font-weight: 400;
	color: #3c3c3c;
}

/* h4はモバイル幅のみ移行元サイトに合わせmargin:16px 0にする。 */
@media (max-width: 631.98px) {
	.article-body h4 {
		margin: 16px 0;
	}
}

/* 本文中に画像を直接含む<p>（`<p><img></p>`パターン）は、移行元サイトはモバイル幅
   のみ上下マージンを16px/16pxに揃える専用ルールを持つ（デスクトップは通常の
   .article-body pのmargin-bottomのみ）。 */
@media (max-width: 631.98px) {
	.article-body p:has(img) {
		margin-top: 16px;
		margin-bottom: 16px;
	}
}

/* 本文中のマーカー装飾（<span class="marker">、蛍光ペン風の黄色背景ハイライト）。 */
.article-body span.marker {
	background-color: #ffff00;
	font-weight: 700;
	vertical-align: baseline;
}

/* 本文中の通常のリスト（list_tempの無いul/ol、list_temp付きは既存の
   .list_temp規則が優先されるよう除外）。font-sizeは移行元サイトに合わせ
   max-width:631.98pxで14px／min-width:632pxで15px。list-style-positionも
   `_s`テーマ標準のoutside＋margin-left:3em継承ではなく、移行元サイトと同じ
   insideでバレットを本文の折り返しに収め、padding-leftのみでインデントを
   作る。 */
.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area),
.article-body ol:not(.outline-body *):not(.k132x57):not(.article_img_area) {
	margin: 16px 0 24px;
}

.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area) {
	list-style: disc none inside;
}

.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area) ul {
	list-style: circle none inside;
}

.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area) ul ul {
	list-style: square none inside;
}

.article-body ol:not(.outline-body *):not(.k132x57):not(.article_img_area) {
	list-style: decimal inside;
}

.article-body :is(ul, ol):not(.list_temp):not(.outline-body *):not(.k132x57):not(.article_img_area) li + li {
	margin-top: 8px;
}

@media (max-width: 631.98px) {
	.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area),
	.article-body ol:not(.outline-body *):not(.k132x57):not(.article_img_area) {
		padding-left: 16px;
		margin-bottom: 16px;
		font-size: 14px;
	}
}

@media (min-width: 632px) {
	.article-body ul:not(.outline-body *):not(.k132x57):not(.article_img_area),
	.article-body ol:not(.outline-body *):not(.k132x57):not(.article_img_area) {
		padding-left: 24px;
		font-size: 15px;
	}
}

/* 本文中の独自パーツ：image-container（画像ラッパー）。
   size-{1-1,16-9,191-100,3-2}はpadding-top比率のアスペクト比ボックス
   （::before）＋絶対配置<a><img>で高さを固定し、fit-{scale-down,horizontal,
   vertical}でimgの収め方を切り替える。size-autoのみ比率固定をせず、画像本来の
   サイズのまま中央寄せ表示する。
   本文HTMLには、リンク付き画像（<a><img></a>）だけでなく<a>で囲まれない裸の
   <img>も同じクラス構成で存在するため、fit-{scale-down,horizontal,vertical}
   の各セレクタは`> a > img`に加えて`> img`にも同じ宣言を当てている。
   一方、base側の絶対配置フィル（top/right/bottom/left:0）は`> a`のみに
   当てること。ここに`> img`を加えると、fit-vertical/horizontalのように
   右/下辺をあえて指定しないルールと衝突してwidth/heightが両方固定され
   （over-constrained）、アスペクト比を保てず画像が強制変形される。
   なお本文投入時にCLS対策でwidth/height属性を自動補完する仕組み
   （inc/tsd-seo-meta.php）があるが、これらのfit-vertical/horizontalの
   <img>には適用しないよう除外している（本来width/height属性を持たない
   移行元サイトの構成と合わせるため、詳細は同ファイルの関数コメント参照）。

   margin-topはconversation-image・editor-box-image（丸型アバター）内に
   image-containerが唯一の子として入れ子になるケースがあり、無条件に
   margin-topを当てるとアバター画像が円の中で下にずれて欠ける。移行元サイトは
   p/h2/h3/h4/table/.component-blockの直後に隣接する場合のみmargin-topが
   付与される仕様（隣接要素なしで入れ子の唯一の子になっている場合は付与
   されない）のため、同じ条件で再現する。 */
:is(p, h2, h3, h4, table, .component-block) + .image-container {
	margin-top: 16px;
}

.image-container-body:not(.image-container-body-size-auto) {
	position: relative;
	overflow: hidden;
}

.image-container-body:not(.image-container-body-size-auto) > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.image-container-body.image-container-body-size-1-1::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.image-container-body.image-container-body-size-16-9::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.image-container-body.image-container-body-size-191-100::before {
	content: "";
	display: block;
	padding-top: 52.356%;
}

.image-container-body.image-container-body-size-3-2::before {
	content: "";
	display: block;
	padding-top: 66.6667%;
}

.image-container-body.image-container-body-size-auto {
	text-align: center;
}

.image-container-body.image-container-body-size-auto > a {
	display: block;
}

.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-scale-down > a > img,
.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-scale-down > img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-horizontal > a > img,
.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-horizontal > img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
}

.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-vertical > a > img,
.image-container-body:not(.image-container-body-size-auto).image-container-body-fit-vertical > img {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translateX(-50%);
	object-fit: cover;
}

.image-container-body-size-auto.image-container-body-fit-scale-down > a > img,
.image-container-body-size-auto.image-container-body-fit-scale-down > img {
	max-width: 100%;
}

.image-container-body-size-auto.image-container-body-fit-horizontal > a > img,
.image-container-body-size-auto.image-container-body-fit-horizontal > img {
	width: 100%;
}

.image-container-body-size-auto.image-container-body-fit-vertical > a > img,
.image-container-body-size-auto.image-container-body-fit-vertical > img {
	max-width: 100%;
}

.image-container-footer {
	height: 14px;
	line-height: 1.1em;
	color: #ccc;
	font-size: 10px;
}

.image-container-footer cite {
	font-style: normal;
}

.image-container-footer cite a {
	color: #0070f4;
}

/* 出典表記（cite）はモバイル幅のみさらに小さいfont-size:6pxになり、
   内部リンクの色も強調しないinherit（親のcite色#ccc）に変わる。 */
@media (max-width: 631.98px) {
	.image-container-footer cite {
		font-size: 6px;
	}

	.image-container-footer cite a {
		color: inherit;
	}
}

.image-container-comment p {
	margin-top: 6px;
	font-size: 12px;
	color: #aaa;
	word-break: break-all;
}

/* 本文中の独自パーツ：conversation（独自コメント吹き出し）。
   グリッドで丸型アバター（image）・名前（title）・吹き出し本文（body）を
   配置し、conversation-reverseで左右反転する。吹き出しの三角ポインタは
   ::beforeの正方形を回転（135deg）＋スキューして再現。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため、togglearea-body等の唯一の子として入れ子になる
   ケースで不要な余白が付かないよう隣接セレクタで再現する。 */
.conversation {
	display: grid;
	grid-template-rows: auto 1fr;
}

/* モバイル幅のみmargin-bottom:16pxが付く（デスクトップは0のまま）。 */
@media (max-width: 631.98px) {
	.conversation {
		margin-bottom: 16px;
	}
}

:is(p, h2, h3, h4, table, .component-block) + .conversation {
	margin-top: 16px;
}

.conversation:not(.conversation-reverse) {
	grid-template-columns: auto 1fr;
	grid-template-areas: "image title" "image body";
}

.conversation.conversation-reverse {
	grid-template-columns: 1fr auto;
	grid-template-areas: "title image" "body image";
}

.conversation-image {
	grid-area: image;
	overflow: hidden;
	border: 2px solid #ddd;
	border-radius: 50%;
}

.conversation:not(.conversation-reverse) .conversation-image {
	margin-right: 15px;
}

.conversation.conversation-reverse .conversation-image {
	margin-left: 15px;
}

.conversation-title {
	grid-area: title;
	font-weight: 600;
	line-height: 1.68;
}

.conversation.conversation-reverse .conversation-title {
	text-align: right;
}

.conversation-body {
	grid-area: body;
	position: relative;
	margin-top: 8px;
	padding-top: 16px;
	padding-bottom: 16px;
	border: 1px solid #ddd;
	border-radius: 16px;
}

.conversation-body > p {
	margin: 0;
	font-weight: 400;
	line-height: 1.75;
}

.conversation-body::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	background: #fff;
	transform: rotate(135deg) skew(15deg, 15deg);
}

.conversation:not(.conversation-reverse) .conversation-body::before {
	left: -9px;
	border-right: inherit;
	border-bottom: inherit;
	border-top-left-radius: 100%;
}

.conversation.conversation-reverse .conversation-body::before {
	right: -9px;
	border-left: inherit;
	border-top: inherit;
	border-bottom-right-radius: 100%;
}

@media (max-width: 631.98px) {
	.conversation-image {
		width: 60px;
		height: 60px;
	}

	.conversation-title {
		font-size: 15px;
	}

	.conversation-body > p {
		font-size: 14px;
	}

	.conversation-body::before {
		top: 13px;
	}

	.conversation:not(.conversation-reverse) .conversation-body {
		margin-left: 4px;
		padding-left: 12px;
		padding-right: 16px;
	}

	.conversation.conversation-reverse .conversation-body {
		margin-left: 4px;
		padding-left: 16px;
		padding-right: 12px;
	}
}

@media (min-width: 632px) {
	.conversation-image {
		width: 80px;
		height: 80px;
	}

	.conversation-title {
		font-size: 16px;
	}

	.conversation-body > p {
		font-size: 15px;
	}

	.conversation-body::before {
		top: 16px;
	}

	.conversation:not(.conversation-reverse) .conversation-body {
		margin-left: 6px;
		padding-left: 10px;
		padding-right: 18px;
	}

	.conversation.conversation-reverse .conversation-body {
		margin-left: 6px;
		padding-left: 16px;
		padding-right: 10px;
	}
}

/* 本文中の独自パーツ：box / link-box（罫線囲みの内部リンク誘導ボックス）。
   見た目はほぼ同じでクラス名が2種類ある（CLAUDE.md参照）。boxは自身に
   margin（16px 0 24px）を持つ実装なのでそのまま単純化できるが、link-boxは
   marginを持たず、直前要素との隣接セレクタ（p/h2/h3/h4/table/.component-block）
   でのみmargin-topが付与される実装のため、togglearea-body等の唯一の子として
   入れ子になるケースで不要な余白が付かないよう隣接セレクタで再現する。 */
.box {
	margin: 16px 0 24px;
	padding: 16px;
	border: 1px solid #ccc;
}

/* 本文の見出しへのジャンプリンク（h4+アンカー）がbox内に置かれるケースが
   ある（「予約する」「オーダーする」「受け取る」等の手順見出し）。移行元サイトは
   h4自体にデスクトップ用のfont-size指定を持たず、box-body（デスクトップ
   15px）をそのまま継承する。モバイル幅では通常のh4と同じ12px固定
   （box-body専用のモバイル上書きは存在しない）ため、この継承指定は
   デスクトップ幅のみに限定する。 */
@media (min-width: 632px) {
	.box-body h4 {
		font-size: inherit;
	}
}

.box-body p {
	margin: 0;
}

.box-body p + p {
	margin-top: 16px;
}

.link-box {
	padding: 16px;
	border: 1px solid #ccc;
}

:is(p, h2, h3, h4, table, .component-block) + .link-box {
	margin-top: 16px;
}

.link-box-body p {
	margin: 0;
}

.link-box-body p > a {
	color: #0782c1;
	text-decoration: underline;
}

.link-box-body p + p {
	margin-top: 16px;
}

@media (max-width: 631.98px) {
	.box {
		margin: 16px 0;
	}

	.box-body,
	.link-box-body {
		font-size: 14px;
	}
}

@media (min-width: 632px) {
	.box-body,
	.link-box-body {
		font-size: 15px;
	}
}

/* 本文中の独自パーツ：box_area（CLAUDE.md記載のbox/link-boxとは別の、
   出典リンク付き旧世代の情報ボックス）。全プロパティがインラインstyleで
   都度べた書きされたspan構造のため一見CSS不要に見えるが、移行元サイトは
   `.box_area span { display:block }`でラベル・本文・出典を縦積みの行に
   分離しており、これが無いと全て1行に連結表示されてしまう。 */
.article-body .box_area {
	border: 1px solid #ccc;
	padding: 20px;
	font-size: 14px;
	margin-bottom: 50px;
}

.article-body .box_area span {
	display: block;
}

.article-body .box_area strong a {
	color: #1b95e0;
	vertical-align: top;
	text-decoration: underline;
}

/* 本文中の独自パーツ：togglearea / togglearea2（アコーディオン）。
   開閉の実体は見出しのis-open/is-closedクラスの入れ替え＋本文ラッパーの
   heightインラインstyleの付け外し（0px⇔なし）。JSはjs/tsd-theme.jsの
   initToggleAreas()を参照。
   なお`togglearea-button`（ボタン型見出し）は、外部サイトへリダイレクトされる
   記事（本文自体が表示されない、tsd_theme_redirect_external_articles()参照）
   にしか存在しないため対象外とした。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため、togglearea同士や他ブロック内への入れ子で不要な
   余白が付かないよう隣接セレクタで再現する。 */
:is(p, h2, h3, h4, table, .component-block) + .togglearea {
	margin-top: 16px;
}

.togglearea-center {
	text-align: center;
}

.togglearea-right {
	text-align: right;
}

.togglearea-heading {
	font-size: 14px;
	font-weight: 400;
	color: inherit;
	text-decoration: none;
}

.togglearea-heading > p {
	margin: 0;
}

.togglearea-heading-open,
.togglearea-heading-closed {
	display: inline-flex;
	align-items: center;
}

.togglearea-heading-open::before,
.togglearea-heading-closed::before {
	content: "";
	display: inline-block;
	margin-right: 4px;
	width: 17px;
	height: 19px;
	background-repeat: no-repeat;
}

.togglearea-heading-open::before {
	background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20width%3D%2217%22%20height%3D%2219%22%20viewBox%3D%220%200%2017%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.00391%22%20r%3D%228.5%22%20fill%3D%22%233c3c3c%22%2F%3E%0A%3Cline%20x1%3D%223.5238%22%20y1%3D%228.95605%22%20x2%3D%2213.4762%22%20y2%3D%228.95605%22%20stroke%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.togglearea-heading-closed::before {
	background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20width%3D%2217%22%20height%3D%2219%22%20viewBox%3D%220%200%2017%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.50391%22%20r%3D%228.5%22%20fill%3D%22%233c3c3c%22%2F%3E%0A%3Cline%20x1%3D%223.5238%22%20y1%3D%228.45605%22%20x2%3D%2213.4762%22%20y2%3D%228.45605%22%20stroke%3D%22white%22%2F%3E%0A%3Cline%20x1%3D%228.45215%22%20y1%3D%2213.48%22%20x2%3D%228.45215%22%20y2%3D%223.5276%22%20stroke%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.togglearea-body {
	margin-top: 16px;
	text-align: left;
}

/* 開閉アニメーション用（js/tsd-theme.jsのinitToggleAreas()参照）。移行元サイトは
   グローバルな:hover { transition: 0.3s }の副次効果でheight変化がアニメー
   ションするため、WP側はhover条件を外し常時同じ長さでアニメーションする。 */
.togglearea-body > * {
	transition: height 0.3s ease;
}

/* margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。 */
.togglearea2 {
	border-bottom: 1px solid #aaa;
}

:is(p, h2, h3, h4, table, .component-block) + .togglearea2 {
	margin-top: 8px;
}

.togglearea2-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.togglearea2-heading > p {
	flex: 1;
	margin: 0;
}

.togglearea2-heading-open::after,
.togglearea2-heading-closed::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	margin-left: 4px;
	width: 17px;
	height: 18px;
	background-repeat: no-repeat;
}

.togglearea2-heading-open::after {
	background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20width%3D%2217%22%20height%3D%2219%22%20viewBox%3D%220%200%2017%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.00391%22%20r%3D%228.5%22%20fill%3D%22%233c3c3c%22%2F%3E%0A%3Cline%20x1%3D%223.5238%22%20y1%3D%228.95605%22%20x2%3D%2213.4762%22%20y2%3D%228.95605%22%20stroke%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.togglearea2-heading-closed::after {
	background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20width%3D%2217%22%20height%3D%2219%22%20viewBox%3D%220%200%2017%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.50391%22%20r%3D%228.5%22%20fill%3D%22%233c3c3c%22%2F%3E%0A%3Cline%20x1%3D%223.5238%22%20y1%3D%228.45605%22%20x2%3D%2213.4762%22%20y2%3D%228.45605%22%20stroke%3D%22white%22%2F%3E%0A%3Cline%20x1%3D%228.45215%22%20y1%3D%2213.48%22%20x2%3D%228.45215%22%20y2%3D%223.5276%22%20stroke%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.togglearea2-body {
	width: 100%;
	padding: 8px 16px 0;
}

/* togglearea-body側と同じ理由（開閉アニメーション、js/tsd-theme.jsの
   initToggleAreas()参照）。 */
.togglearea2-body > * {
	transition: height 0.3s ease;
}

.togglearea2-body p {
	padding-bottom: 16px;
}

/* 本文中の独自パーツ：article-button（CTAボタン、CLAUDE.mdの「販促ブロック」）。
   移行元サイトの_next static CSSバンドルから計測。-square/-roundが土台の背景色
   （グレー／青）を持ち、-with-shadowが赤系の背景・枠線・下方向シャドウで
   上書きする構成。-without-shadow・-without-arrow・-largeは移行元サイトのCSSにも
   対応ルールが存在しない（=修飾クラスが無い状態と同じ）ため、無印のセレクタで
   十分と判断した。 */
.article-button {
	text-align: center;
}

.article-button-link {
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	transition: 0.3s;
}

/* .article-button-link（class1つ、詳細度0-1-0）は.article-body a（class+
   要素、詳細度0-1-1）に負けて文字色が白から本文リンク色へ上書きされて
   しまうため、詳細度を高くして白を維持する。 */
.article-body .article-button-link {
	color: #fff;
}

.article-button-link:active {
	opacity: 0.7;
}

.article-button-square {
	border-radius: 4px;
	background-color: #656364;
}

.article-button-round {
	border-radius: 1000px;
	background-color: #2f6bbf;
}

.article-button-with-shadow {
	border: 1px solid #e8584a;
	background-color: #e8584a;
	box-shadow: 0 4px 0 #d98801;
}

.article-button-with-shadow:active {
	transform: translateY(4px);
	box-shadow: 0 0 0 #000;
}

.article-button-with-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-50%) rotate(-45deg);
}

.article-button-small {
	padding: 5px 15px;
	font-size: 12px;
	min-width: 150px;
}

.article-button-small.article-button-with-arrow::after {
	right: 8px;
}

@media (max-width: 631.98px) {
	.article-button-link {
		display: block;
	}

	.article-button-padding {
		padding: 15px 16px;
	}
}

@media (min-width: 632px) {
	.article-button-link {
		display: inline-block;
		min-width: 300px;
	}

	.article-button-padding {
		padding: 15px 0;
	}
}

/* 本文中の独自パーツ：grid-container（カラムグリッド、商品カード等を複数列に
   並べる）。移行元サイトの_next static CSSバンドルから計測。ブレークポイントによる
   変化は無く、常にflexの横並び（gap:32px）。 */
.grid-container {
	display: flex;
	gap: 32px;
}

.grid-container-item {
	flex: 1 1 0%;
	overflow: hidden;
}

/* 本文中の独自パーツ：heading-box（タイトル付き情報ボックス）。
   移行元サイトの_next static CSSバンドルから計測。boxとほぼ同じ罫線ボックスに
   太字の見出しが付く構成。 */
.heading-box {
	margin: 16px 0 24px;
	padding: 16px;
	background-color: #fff;
	border: 1px solid #ccc;
}

.heading-box-heading {
	font-weight: 700;
	color: #3c3c3c;
}

.heading-box-heading + .heading-box-body {
	margin-top: 16px;
}

.heading-box-body p {
	margin: 0;
}

.heading-box-body p + p {
	margin-top: 16px;
}

@media (max-width: 631.98px) {
	.heading-box {
		margin: 16px 0;
	}

	.heading-box-heading,
	.heading-box-body {
		font-size: 14px;
	}
}

@media (min-width: 632px) {
	.heading-box-heading,
	.heading-box-body {
		font-size: 15px;
	}
}

/* 本文中の独自パーツ：profile-box-blue（ブランド担当者・監修者紹介用の
   作り込まれたプロフィールボックス）。ヘッダー帯（青地白文字）＋丸型アバター＋
   タイトル/サブタイトル/経歴＋破線区切りの詳細文、という構成。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。 */
.profile-box-blue {
	border: 1px solid #2095cc;
	border-radius: 8px;
}

:is(p, h2, h3, h4, table, .component-block) + .profile-box-blue {
	margin-top: 16px;
}

.profile-box-blue-header-title {
	text-align: center;
	line-height: 2.2;
	color: #fff;
	background-color: #2095cc;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.profile-box-blue-heading {
	display: flex;
	align-items: center;
	padding: 24px 0;
}

.profile-box-blue-image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 75px;
}

.profile-box-blue-title {
	font-size: 16px;
	line-height: 1.7;
}

.profile-box-blue-subtitle {
	font-weight: 700;
}

.profile-box-blue-detail {
	padding-top: 12px;
	line-height: 1.75;
	border-top: 1px dashed #2095cc;
}

@media (max-width: 631.98px) {
	.profile-box-blue-header-title {
		font-size: 13px;
	}

	.profile-box-blue-heading {
		margin: 0 20px;
		column-gap: 20px;
	}

	.profile-box-blue-image {
		width: 100px;
		height: 100px;
	}

	.profile-box-blue-overview {
		margin-left: 12px;
	}

	.profile-box-blue-subtitle {
		font-size: 18px;
		line-height: 1.73;
	}

	.profile-box-blue-description {
		font-size: 12px;
		line-height: 1.5;
	}

	.profile-box-blue-detail {
		margin: 16px 20px;
		font-size: 11px;
	}
}

@media (min-width: 632px) {
	.profile-box-blue-header-title {
		font-size: 15px;
	}

	.profile-box-blue-heading {
		margin: 0 40px;
		column-gap: 40px;
	}

	.profile-box-blue-image {
		width: 150px;
		height: 150px;
	}

	.profile-box-blue-overview {
		margin-left: 16px;
	}

	.profile-box-blue-subtitle {
		font-size: 20px;
		line-height: 1.77;
	}

	.profile-box-blue-description {
		font-size: 16px;
		line-height: 1.4;
	}

	.profile-box-blue-detail {
		margin: 16px 40px 24px;
		font-size: 12px;
	}
}

/* 本文中の独自パーツ：profile-box-pink（医療監修者紹介ボックス）。
   profile-box-blueとほぼ同構成だが別クラス名の独立実装。配色（#ea7ca2、
   article-comment-subtitle-redと同色）以外もblueと細部が異なり、特に
   -descriptionは-subtitleと同じ大きめのフォントサイズ（blueの-descriptionは
   小さめ）になっている点に注意。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。 */
.profile-box-pink {
	border: 1px solid #ea7ca2;
	border-radius: 8px;
}

:is(p, h2, h3, h4, table, .component-block) + .profile-box-pink {
	margin-top: 16px;
}

.profile-box-pink-header-title {
	text-align: center;
	line-height: 2.2;
	color: #fff;
	background-color: #ea7ca2;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.profile-box-pink-heading {
	display: flex;
	align-items: center;
	padding: 24px 0;
}

.profile-box-pink-image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 75px;
}

.profile-box-pink-subtitle {
	font-weight: 700;
}

.profile-box-pink-title {
	font-size: 16px;
	line-height: 1.7;
}

.profile-box-pink-detail {
	margin-top: 12px;
	padding-top: 12px;
	line-height: 1.75;
	border-top: 1px dashed #ea7ca2;
}

@media (max-width: 631.98px) {
	.profile-box-pink-header-title {
		font-size: 13px;
	}

	.profile-box-pink-heading {
		margin: 0 20px;
		column-gap: 20px;
	}

	.profile-box-pink-image {
		width: 100px;
		height: 100px;
	}

	.profile-box-pink-overview {
		margin-left: 12px;
	}

	.profile-box-pink-subtitle,
	.profile-box-pink-description {
		font-size: 18px;
		line-height: 1.73;
	}

	.profile-box-pink-detail {
		margin: 16px 20px;
		font-size: 11px;
	}
}

@media (min-width: 632px) {
	.profile-box-pink-header-title {
		font-size: 15px;
	}

	.profile-box-pink-heading {
		margin: 0 40px;
		column-gap: 40px;
	}

	.profile-box-pink-image {
		width: 150px;
		height: 150px;
	}

	.profile-box-pink-overview {
		margin-left: 16px;
	}

	.profile-box-pink-subtitle,
	.profile-box-pink-description {
		font-size: 20px;
		line-height: 1.77;
	}

	.profile-box-pink-detail {
		margin: 16px 40px 24px;
		font-size: 12px;
	}
}

/* 本文中の独自パーツ：比較表（wrap_table＋<table>、CLAUDE.md参照）。
   セル色・幅などは都度インラインstyleで指定される都度書きのため、テーマ側は
   ラッパーの余白・横スクロール・罫線・sticky列/行のみ担当すればよい
   （比較表本体のCSSはコア標準テーブルブロックで再現可能と判断した根拠）。
   table-scroll-wrapper（fixed-header/fixed-first-column/custom-header-width
   の各修飾）は、大きい比較表で横スクロール＋見出し列・行の固定に対応する
   より作り込まれた実装で、wrap_tableの中にネストされることも本文中に単独で
   出てくることもある。移行元サイトの_next static CSSバンドルから計測。 */
.wrap_table {
	margin-top: 24px;
	margin-bottom: 24px;
	overflow-x: auto;
}

.wrap_table table {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

/* 比較表本体（table-scroll-wrapperを伴わない素の<table>）のボーダー・
   フォントサイズ・セルパディング。セル色・幅などは都度インラインstyleで
   指定される一方、テーブルの罫線・th背景色・セルpadding・全体のfont-size
   は旧サイト時代の表示エディタ用CSS（本文の生HTMLを流し込むラッパーdiv
   自体に残っている）が担っており、インラインstyleには含まれない。移行元サイト
   実測値：table{border-collapse:collapse;border:1px solid #ccc;
   max-width:640px;margin-top:24px}、td/th{border:1px solid #ccc;
   padding:8px}、th{background:#f7f7f7}、table全体でfont-size:12px。
   table-scroll-wrapper配下のtableは別実装のため対象外にする。 */
.article-body table:not(.table-scroll-wrapper *) {
	border-collapse: collapse;
	border: 1px solid #ccc;
	max-width: 640px;
	margin-top: 24px;
	margin-bottom: 24px;
	font-size: 12px;
}

.article-body td:not(.table-scroll-wrapper *),
.article-body th:not(.table-scroll-wrapper *) {
	border: 1px solid #ccc;
	padding: 8px;
}

.article-body th:not(.table-scroll-wrapper *) {
	background: #f7f7f7;
	text-align: left;
}

/* margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。wrap_tableの唯一の子として
   入れ子になるケースが多く、無条件のmargin-topだと比較表の中に不要な余白
   （wrap_tableはoverflow-x:autoで新しいBFCを作るため親子間のmargin
   collapseが起きず、素通しで隙間になる）が生じる。 */
.table-scroll-wrapper {
	overflow: scroll;
}

.article-body :is(p, h2, h3, h4, table, .component-block) + .table-scroll-wrapper {
	margin-top: 16px;
}

/* 見出し行・sticky列に使われるthセルもtdと同じfont-size:12px・
   line-height:16.8px・padding:8px・text-align:left・font-weight:400・
   background:#f7f7f7で扱う（ブラウザ標準のth装飾＝太字・中央揃えを上書き）。
   本文の<table>にはCMS由来の`cellspacing="1"`属性が付いており、
   border-spacingを明示的に0へ上書きしないとそのまま反映されてしまう。
   また`border="1"`属性も付いておりブラウザのUA既定スタイルでtable要素
   自体に縁取りが乗るが、移行元サイトはCSS側でborder:0に上書きしている。
   sticky列（fixed-first-column）はこのtable自体の枠より内側にleft:0で
   固定されるため、この縁取りを消していないとスクロール開始時に線が
   ガクッと現れて見える。table要素自体のborderを明示的に0へ上書きして解消。 */
.table-scroll-wrapper > table {
	border: 0;
	max-width: none;
	margin-top: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
	line-height: 1.4;
}

.table-scroll-wrapper > table > tbody > tr > td,
.table-scroll-wrapper > table > tbody > tr > th {
	padding: 8px;
	text-align: left;
	word-break: keep-all;
	border-style: none solid solid none;
	border-width: medium 1px 1px medium;
	border-color: currentColor #b9b9b9 #b9b9b9 currentColor;
}

.table-scroll-wrapper > table > tbody > tr > th {
	font-weight: 400;
	background-color: #f7f7f7;
}

.table-scroll-wrapper > table > tbody:first-child > tr:first-child {
	border-top: 1px solid #b9b9b9;
}

/* border-collapse:separateのtableでは<tr>自体のborderは本来描画されない
   はずだが、sticky列（fixed-first-column）と組み合わさるとスクロール開始と
   同時にborder-leftだけがChromeで描画されてしまう。移行元サイトでも効果の無い
   指定のため、<tr>へのborder指定は意図的に行わない。 */

.table-scroll-wrapper.fixed-header > table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.table-scroll-wrapper.fixed-first-column > table > tbody > tr > th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.table-scroll-wrapper.fixed-header.fixed-first-column > table > thead > tr > th:first-child {
	z-index: 2;
}

.table-scroll-wrapper.custom-header-width > table {
	table-layout: fixed;
}

.table-scroll-wrapper.custom-header-width > table > thead > tr > th {
	width: 17px;
}

.table-scroll-wrapper.custom-header-width > table > tbody > tr > td,
.table-scroll-wrapper.custom-header-width > table > tbody > tr > th {
	white-space: normal;
	word-break: break-all !important;
}

/* 旧世代パーツ：fukidashi（口コミ・体験談用のコメント吹き出し。conversationと
   同用途の別実装、CLAUDE.mdに記載の無い旧パーツ）。吹き出しの三角ポインタは
   罫線トリックの::before（塗り）＋::after（縁取り）を重ねて再現。fukidashi_many
   の中に複数のfukidashi_left/rightが並ぶ「口コミ一覧」としても使われる。
   画像は本文側にサイズ指定が無いため、`.fukidashi_left img`/
   `.fukidashi_right img`にwidth/height（移行元サイト実測50px）を明示する。 */
.fukidashi {
	margin-bottom: 40px;
}

.fukidashi_many .fukidashi_left + .fukidashi_left,
.fukidashi_many .fukidashi_left + .fukidashi_right,
.fukidashi_many .fukidashi_right + .fukidashi_left,
.fukidashi_many .fukidashi_right + .fukidashi_right {
	margin-top: 40px;
}

.fukidashi_left,
.fukidashi_right {
	display: flex;
}

.fukidashi_left img,
.fukidashi_right img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.fukidashi_left .writer_contents {
	flex: 1 1 0%;
	margin-left: 25px;
}

.fukidashi_right {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.fukidashi_right .writer_contents {
	flex: 1 1 0%;
	margin-right: 25px;
}

.writer_name {
	margin: 0 0 5px !important;
	padding-left: 5px;
}

.fukidashi_right .writer_name {
	padding-right: 10px;
	padding-left: 0;
	text-align: right;
}

.writer_comment {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 15px 20px;
	border: 2px solid #ccc;
	border-radius: 10px;
}

.writer_comment::before,
.writer_comment::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.fukidashi_left .writer_comment::before {
	top: 12px;
	left: -18px;
	border-width: 7px 12px 7px 7px;
	border-color: transparent #fff transparent transparent;
	z-index: 2;
}

.fukidashi_left .writer_comment::after {
	top: 11px;
	left: -22px;
	border-width: 8px 13px 8px 8px;
	border-color: transparent #ccc transparent transparent;
	z-index: 1;
}

.fukidashi_right .writer_comment::before {
	top: 12px;
	right: -18px;
	border-width: 7px 7px 7px 12px;
	border-color: transparent transparent transparent #fff;
	z-index: 2;
}

.fukidashi_right .writer_comment::after {
	top: 11px;
	right: -22px;
	border-width: 8px 8px 8px 13px;
	border-color: transparent transparent transparent #ccc;
	z-index: 1;
}

/* 旧世代パーツ：waku（監修者・専門家紹介用）／midashiwaku（タイトル付き情報
   ボックス、heading-boxと似た用途の別実装）。移行元サイトのCSSでは両者が全く同じ
   罫線ボックスのルールを共有している。中の`<p>`は下マージン無し
   （`.article-body p`の共通margin-bottomを打ち消す）。移行元サイトのルートは
   font-size:10pxのため、`.midashiwaku h4`のfont-sizeはpx換算した17pxを
   採用する（ソース表記の1.7remをそのまま使うと標準16pxルートでは
   27.2pxになってしまう）。 */
.waku,
.midashiwaku {
	margin: 0 0 20px;
	padding: 15px 20px;
	border: 1px solid #aaa;
}

.waku p,
.midashiwaku p {
	margin-bottom: 0;
}

.midashiwaku h4 {
	margin: 0 0 5px;
	font-size: 17px;
	font-weight: 700;
}

/* 旧世代パーツ：comment（component-block版、Q&A形式のプロフィール・コメント
   ボックス。editor-box/profile-box-blueとは別の独立した実装、CLAUDE.mdに
   記載の無い旧パーツ）。article-comment-round/squareで角丸有無、
   article-comment-subtitle-blue/redでサブタイトル色を切り替える。
   margin-topはp/h2/h3/h4/table/.component-blockの直後に隣接する場合のみ
   付与される仕様のため隣接セレクタで再現する。margin-bottomはcomment自身の
   固定値なのでそのまま。 */
.comment {
	margin-bottom: 24px;
	border: 1px solid #acacac;
}

/* モバイル幅ではmargin-bottomが16pxに縮小される。 */
@media (max-width: 631.98px) {
	.comment {
		margin-bottom: 16px;
	}
}

:is(p, h2, h3, h4, table, .component-block) + .comment {
	margin-top: 16px;
}

.article-comment-round {
	border-radius: 8px;
}

.article-comment-round .comment-heading {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.comment-heading {
	display: flex;
	padding: 24px 32px;
	background-color: #efefef;
}

.comment-image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 75px;
}

.comment-overview {
	align-self: center;
}

.comment-title {
	font-weight: 700;
}

.comment-title p {
	margin-top: 0;
}

.comment-subtitle p {
	margin-top: 0;
	font-weight: 700;
}

.article-comment-subtitle-blue .comment-subtitle {
	color: #2095cc;
}

.article-comment-subtitle-red .comment-subtitle {
	color: #ea7ca2;
}

.comment-detail {
	padding: 24px 32px;
	border-top: 1px solid #e6e6e6;
}

@media (max-width: 631.98px) {
	.comment-image {
		width: 50px;
		height: 50px;
	}

	.comment-overview {
		margin-left: 12px;
	}

	.comment-title {
		font-size: 16px;
	}

	.comment-subtitle p {
		font-size: 11px;
	}

	.comment-detail {
		padding: 16px;
		font-size: 13px;
	}
}

@media (min-width: 632px) {
	.comment-image {
		width: 70px;
		height: 70px;
	}

	.comment-overview {
		margin-left: 40px;
	}

	.comment-title {
		font-size: 18px;
	}

	.comment-subtitle p {
		font-size: 12px;
	}

	.comment-detail {
		font-size: 15px;
	}
}

/* 旧世代パーツ：editor/editor_m/editor_l（監修者・取材協力紹介ボックス。
   profile-box-blue/waku/comment（component-block版）とは別の、独立した
   第四の専門家プロフィール実装）。editor_mが青、editor_lがピンク（#ea7ca2、
   article-comment-subtitle-redと同色）のアクセントカラー修飾。他の本文
   パーツと異なり隣接セレクタによるmargin-top規則は存在しない
   （旧WordPress時代からの静的HTMLのため）。 */
.editor p {
	margin-bottom: 0;
}

.editor {
	overflow: hidden;
	margin-bottom: 40px;
	border-radius: 8px;
}

.editor_m {
	border: 1px solid #2095cc;
}

.editor_l {
	border: 1px solid #ea7ca2;
}

p.editor_ttl {
	text-align: center;
	line-height: 2.2;
	color: #fff;
}

.editor_m p.editor_ttl {
	background-color: #2095cc;
}

.editor_l p.editor_ttl {
	background-color: #ea7ca2;
}

.editor_about {
	display: flex;
	align-items: center;
	width: 85%;
	margin: 0 auto;
	padding: 25px 0;
}

.editor_about img {
	flex-shrink: 0;
	margin-right: 50px;
	border-radius: 50%;
	object-fit: cover;
	width: 180px;
	height: 180px;
}

.editor_prof {
	flex: 1;
}

.editor_prof > p.editor_name,
.editor_prof > p.editor_position {
	margin-top: 0;
}

p.editor_position {
	font-size: 15px;
	color: #3c3c3c;
}

p.editor_name {
	font-size: 20px;
	font-weight: 700;
	color: #3c3c3c;
}

.editor_career {
	margin-top: 15px;
	line-height: 1.5;
	color: #3c3c3c;
}

.editor_career p {
	font-size: 12px;
}

p.editor_comment {
	width: 90%;
	margin: 0 auto;
	padding: 11px 0 25px;
	color: #3c3c3c;
}

.editor_m p.editor_comment {
	border-top: 1px dashed #2095cc;
}

.editor_l p.editor_comment {
	border-top: 1px dashed #ea7ca2;
}

/* 旧世代パーツ：btn01/btn02/btn05/btn06 + btn_shadow（CTAボタン、article-button
   と同用途の別実装）。btn01/btn02はラッパーdivの直下に<a>を置くグレー角丸／
   青ピル型ボタン、btn05/btn06はbtn_shadowと組み合わせて赤の立体的なボタンに
   なる（btn06のみ矢印付き）。btn02がbtn05/btn06の中にネストされることも
   あり、その場合はbtn_shadowの見た目が優先される（移行元サイトのCSS定義順で
   後勝ちになるため、ここでも同じ順序を保っている）。btn01は実データでは
   未使用だが、移行元サイトのCSSに準拠して残してある。移行元サイトのルートは
   font-size:10pxのため、font-sizeはpx換算した14px/16pxを採用する。 */
.btn01,
.btn02,
.btn05,
.btn06 {
	width: 60%;
	margin: 0 auto 40px;
}

.btn01 a,
.btn02 a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	padding: 10px;
	border: none;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

.btn01 a {
	background-color: #656364;
	border-radius: 3px;
}

.btn02 a {
	background-color: #2f6bbf;
	border-radius: 1000px;
}

.btn01 a:hover,
.btn02 a:hover {
	opacity: 0.7;
}

.btn_shadow a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 50px;
	margin: 0 auto 40px;
	padding: 10px 10px 14px;
	border: none;
	border-radius: 12px;
	background-color: #e8584a;
	box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.btn06 a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-100%);
}

@media (max-width: 631.98px) {
	.btn01,
	.btn02,
	.btn05,
	.btn06 {
		width: 92%;
	}
}

/* 旧世代パーツ：ttl_icon i_cart（アイコン付き見出し、「関連商品をチェック！」
   等のプロモーション枠で使用。CLAUDE.md未記載）。h3.ttl_icon.i_cartは
   display:flexで、アイコン（::before、Font Awesome Free「cart-shopping」の
   インラインSVGをcontent:url()で埋め込み）＋テキスト＋残り幅を埋める罫線
   （::after）という構成。テンプレート側の.section-heading（関連キーワード／
   おすすめ記事用）と似た構成だが別実装で、本文（body_html）に直接含まれる。
   移行元サイト自身のCSSは`h3.ttl_icon`のみのタグ限定セレクタだが、一部記事では
   pタグでttl_icon.i_cartが使われており（移行元サイト側でもアイコン崩れが起きる
   ソースデータ起因の問題）、WP側はp/h3どちらのタグでも正しく表示されるよう
   セレクタを拡張しカバレッジを広げている。 */
/* h3.ttl_icon（要素+クラス）でセレクタの詳細度を.article-body h3と揃え、
   ソース順で後勝ちさせてborder-left/padding/margin-bottomを打ち消す
   （margin-topの32pxは.article-body h3の値とたまたま一致するため未指定）。 */
:is(h3, p).ttl_icon {
	display: flex;
	margin-bottom: 18px;
	padding: 0;
	border-left: none;
	font-size: 18px;
	font-weight: 700;
	color: #3c3c3c;
}

.ttl_icon.i_cart::before {
	display: block;
	width: 20px;
	height: 25px;
	margin-top: 2px;
	margin-right: 10px;
	content: url("data:image/svg+xml;utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>");
}

/* height/margin-topを指定しないとalign-items:normal（=stretch）により
   罫線が見出しの最上部に張り付いてしまう。height:15px・margin-top:12pxで
   アイコン・テキストと垂直方向中央付近に揃える。 */
.ttl_icon::after {
	content: "";
	display: block;
	height: 15px;
	margin-top: 12px;
	margin-left: 10px;
	flex-grow: 1;
	border-top: 1px solid #333;
}

/* 旧世代パーツ：relation_product（ttl_icon.i_cart見出しとセットで使われる
   「ご紹介商品はこちら」等の関連商品リンクリスト。CLAUDE.md未記載）。
   各リンクの前に固定PNGアイコン（18×18pxの右向き矢印、記事ごとに変わらない
   固定テンプレート素材のためline-coupon-banner等と同様にテーマ内に静的配置）
   を表示する。 */
.relation_product {
	margin-bottom: 50px;
}

.relation_product ul {
	margin: 16px 0 24px;
	padding: 0;
	list-style: none;
}

/* list-style:noneはul側でなくli自身に付与する（汎用リストルール
   `.article-body ul:not(...)`がulのlist-styleを詳細度で上書きしてしまう
   ため、liを直接指定してinherit経由の反映漏れを回避する）。 */
.relation_product li {
	margin: 0 0 14px;
	list-style: none;
}

.relation_product li a {
	display: inline-block;
	font-size: 14px;
}

.relation_product li a:hover {
	opacity: 0.5;
}

.relation_product li a::before {
	content: url("assets/images/icon-right-arrow.png");
	display: inline-block;
	width: 16px;
	height: 18px;
	margin-right: 10px;
	background-size: 100%;
	vertical-align: text-bottom;
}

/* 旧世代パーツ：list_temp（リストの見た目調整用クラス、midashiwaku内のほか
   本文中に単独でも使用（見出しへのリンク一覧など））。
   `.list_temp`（クラス1つ、詳細度0-1-0）よりも`.article-body ol, ul`という
   汎用ルール（クラス+要素、詳細度0-1-1）の方が詳細度で勝るため、
   font-size/padding-left/margin-top/margin-bottomは汎用側に委ね、
   list_tempに残すのは実際に汎用ルールと異なる値（li+liのmargin-top:7px、
   汎用は8px）のみとする。ただしline-heightは通常リストの1.75倍とは異なり
   list_tempのみ1.7倍のため、明示的に指定して残す。 */
.list_temp {
	line-height: 1.7;
}

ul.list_temp li {
	padding-left: 2px;
	list-style: disc inside;
}

ol.list_temp li {
	list-style: decimal inside;
}

.list_temp li + li {
	margin-top: 7px;
}

/* 旧世代パーツ：Before/Afterスライダー（画像比較カルーセル、ハッシュ化クラス名
   k132x5系・i4m8kw系。CSS Modulesのハッシュは記事ごとではなくビルド単位で
   決まるため全記事共通、k132x50=全体ラッパー、k132x59=ビューポート、
   k132x5a=スライドトラック、k132x5c=各スライド、i4m8kw0/i4m8kw1=画像ラッパー
   ／img、k132x52/k132x53=矢印ボタンのゾーン、k132x54=矢印ボタン本体、
   k132x55〜58=サムネイル行、i4m8kw5/i4m8kw6=サムネイル画像ラッパー／img）。
   タイトルバー・クリーニング前後ラベル・SUIT SQUAREロゴは全て画像ファイル
   自体に焼き込まれており、DOM側は構造のみで良い。
   矢印アイコンは::afterでの罫線シェブロン（実測: 7px角、border-right/bottom
   2px solid #fff、-45deg回転）で、左矢印はスクレイピングされたHTMLの
   style="rotate:180deg"がそのままボタン全体を反転させる（別セレクタ不要）。
   移行元サイトはscrollLeftアニメーションのネイティブ横スクロール実装だが、
   スライド枚数が記事ごとに2〜46枚と幅があり内部の複製スライド（無限ループ用
   クローン）も再現困難なため、WP側はtransform:translateXの単純な実装に
   置き換える（挙動はjs/tsd-theme.jsのinitBeforeAfterSlider()参照）。
   i4m8kw2（8pxの半透明バー）は中身が空の記事では実質見えない装飾だが、
   医療クリニック系のレビュー記事では画像の引用元クレジット
   （<cite><a class="i4m8kw4">引用：〇〇クリニック</a></cite>）が入り、
   可視のキャプションとして機能する。中身が空の場合はrgba(255,255,255,.75)の
   背景（padding 4pxぶんの高さ）のまま、中身がある場合は読めるキャプション
   として表示されるようスタイルを当てる（元のJS実装がスライド再構築時に
   このi4m8kw2ごと破棄するため、js/tsd-theme.jsのinitBeforeAfterSliders()
   側で退避・再アタッチしている）。
   サムネイル行（k132x57/k132x58）は移行元サイトのソースではflex-wrap:nowrap＋
   各liにwidth:100%（flex-basis相当）＋flex-shrink:1で、枚数に関わらず
   1行に収まるよう全サムネイルが均等に縮小される（min-width指定は無い）。
   メイン画像（i4m8kw0/i4m8kw1）はimgがposition:staticの通常フロー要素で、
   ボックス高さは各画像の実際の縦横比を640px幅にスケールしたぶんそのまま
   （固定アスペクト比・object-fit:coverによるトリミングは行わない）。
   i4m8kw0・i4m8kw5の画像ラッパーは背景透過（rgba(0,0,0,0)）で、
   プレースホルダー背景は付けない。 */
.k132x50 {
	position: relative;
	margin-top: 16px;
}

.k132x59 {
	overflow: hidden;
}

.k132x5a {
	display: flex;
	transition: transform 0.3s ease;
}

.k132x5c {
	flex: 0 0 100%;
	min-width: 100%;
}

.i4m8kw0 {
	position: relative;
}

.i4m8kw1 {
	display: block;
	width: 100%;
	height: auto;
}

.i4m8kw2 {
	padding: 4px;
	font-size: 10px;
	color: #3c3c3c;
	background: rgba(255, 255, 255, 0.75);
}

.i4m8kw2 a {
	color: #8b8b8b;
	text-decoration: underline;
}

.k132x52,
.k132x53 {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	z-index: 1;
}

/* 矢印ゾーンの左右paddingは移行元サイトに合わせモバイル6px／デスクトップ8px。 */
@media (max-width: 631.98px) {
	.k132x52 {
		padding-left: 6px;
	}

	.k132x53 {
		padding-right: 6px;
	}
}

@media (min-width: 632px) {
	.k132x52 {
		padding-left: 8px;
	}

	.k132x53 {
		padding-right: 8px;
	}
}

.k132x52 {
	left: 0;
	justify-content: flex-start;
}

.k132x53 {
	right: 0;
	justify-content: flex-end;
}

.k132x54 {
	position: relative;
	width: 30px;
	height: 50px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.k132x54::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 11px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* marginは移行元サイトに合わせモバイル4px 0 40px／デスクトップ6px 0 40px。 */
@media (max-width: 631.98px) {
	.k132x55 {
		margin: 4px 0 40px;
	}
}

@media (min-width: 632px) {
	.k132x55 {
		margin: 6px 0 40px;
	}
}

.k132x57 {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 632px) {
	.k132x57 {
		gap: 6px;
	}
}

.k132x58 {
	flex: 0 1 auto;
	width: 100%;
	border: 2px solid transparent;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	transition: border 0.15s ease-in;
}

.k132x58:hover {
	border-color: #9e9e9e;
}

.k132x58.selected {
	border-color: #3c3c3c;
}

.i4m8kw5 {
	width: 100%;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* サムネイル画像のimgは`i4m8kw6`だけでなく`i4m8kw8`という別バリアントの
   クラスも実在する（同じスライダー内で1枚目だけi4m8kw8、2枚目以降i4m8kw6と
   いう記事がある）。移行元サイトはi4m8kw8をposition:absoluteで実装しているが、
   最終的な描画サイズ（height:76px・width:auto相当）はi4m8kw6と同一のため、
   同じルールを適用する。 */
.i4m8kw6,
.i4m8kw8 {
	height: 100%;
	width: auto;
	display: block;
}

/* 「関連キーワード」／「あなたにおすすめの記事」共通の見出しスタイル：
   小さなFont Awesome Freeアイコン、見出しテキスト、残り幅を埋める罫線という
   構成 — 移行元サイトの::before/::afterから1:1で計測。 */
.section-heading {
	display: flex;
	align-items: center;
	margin: 40px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

.section-heading::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.section-heading::after {
	content: "";
	flex: 1;
	margin-left: 10px;
	border-bottom: 1px solid #ddd;
}

.section-heading--tag::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%20252.1V48C0%2021.5%2021.5%200%2048%200h204.1a48%2048%200%200%201%2033.9%2014.1l211.9%20211.9c18.7%2018.7%2018.7%2049.1%200%2067.9L293.8%20497.9c-18.7%2018.7-49.1%2018.7-67.9%200L14.1%20286.1A48%2048%200%200%201%200%20252.1zM112%2064c-26.5%200-48%2021.5-48%2048s21.5%2048%2048%2048%2048-21.5%2048-48-21.5-48-48-48z%22%2F%3E%3C%2Fsvg%3E");
}

.section-heading--newspaper::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M312%20320h136V56c0-13.3-10.7-24-24-24H24C10.7%2032%200%2042.7%200%2056v400c0%2013.3%2010.7%2024%2024%2024h264V344c0-13.2%2010.8-24%2024-24zm129%2055l-98%2098c-4.5%204.5-10.6%207-17%207h-6V352h128v6.1c0%206.3-2.5%2012.4-7%2016.9z%22%2F%3E%3C%2Fsvg%3E");
}

.article-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.article-tags__list a {
	display: inline-block;
	border: 1px solid #666;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 12px;
	color: #666;
	text-decoration: none;
}

.recommended-articles {
	margin-bottom: 40px;
}

.recommended-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

/* どの画面幅でもサムネ左・テキスト右の行を維持する — トップページの
   グリッド用にデスクトップで縦積みカードに変わる.latest-postとは異なり、
   移行元サイトは幅の広い記事本文カラム内でもこのリストを行のまま表示する。 */
.recommended-item {
	display: grid;
	grid-template-columns: minmax(160px, 256px) 1fr;
	column-gap: 24px;
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid #eee;
}

.recommended-item__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
	overflow: hidden;
}

.recommended-item__body {
	align-self: start;
}

.recommended-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recommended-item__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.recommended-item__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #666;
}

.recommended-item__title a {
	color: inherit;
	text-decoration: none;
}

.recommended-item__date {
	display: block;
	margin: 0 0 8px;
	font-size: 11px;
	color: #aaa;
}

.recommended-item__category {
	display: inline-block;
	padding: 4px 8px;
	background: #333;
	color: #fff;
	font-size: 12px;
}

/* フッター上部のナビ：固定カテゴリーのグローバルナビをフッター直上に
   繰り返し表示する暗色バー。移行元サイトでは632px未満で完全に非表示になる
   （代わりにモバイルはヘッダーのオフキャンバスドロワーでカバーされる）ため、
   .global-nav-*と違いデスクトップ幅のスタイルだけでよい — それ未満では
   どのみち何も表示されない。
--------------------------------------------------------------*/
.footer-global-nav {
	display: none;
}

@media (min-width: 632px) {
	.footer-global-nav {
		display: block;
		width: 100%;
		margin-top: 40px;
		background-color: #333;
	}
}

.footer-global-nav__list {
	display: flex;
	justify-content: space-between;
	max-width: 960px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.footer-global-nav-item {
	flex: 1;
	display: grid;
	align-items: center;
	margin: 8px 0;
	border-right: 1px solid #ccc;
}

.footer-global-nav-item:first-child {
	border-left: 1px solid #ccc;
}

.footer-global-nav-item a {
	display: block;
	margin: 0 16px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
}

/* フッター
--------------------------------------------------------------
移行元サイトのフッター（uktsc.com/thestyledictionary/）を再現。これはグループ
共通のSUIT SQUAREフッターで、店舗ロゴ／CTA、「コンテンツ」ナビ（サブリスト
2つを横並び）、「規約・ヘルプ」ナビ、コピーライト行から成る。色・幅・
gap・632pxのブレークポイントはそのコンパイル済みCSS/computed styleから
取得したもので独自デザインではない。モバイルでは移行元サイトも「コンテンツ」／
「規約・ヘルプ」のリストをアコーディオンに折りたたみ、店舗CTAは完全に
非表示にする — ここではブレークポイントごとにマークアップを複製するのではなく、
グローバルナビが既に使っているのと同じ.nav-accordion-toggleパターンで再現している。
--------------------------------------------------------------*/
.site-footer {
	background: #ededed;
}

.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 20px 40px;
}

.footer-columns {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* カラム幅は最大幅1200pxに対するパーセンテージ（移行元サイトで計測した
   310/482/264px）にしているため、ビューポートが狭くなるとき3カラムが
   バラバラ・不均等にではなく、比例して一緒に縮む。 */
.footer-column--store {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 25.83%;
}

.footer-store-logo {
	display: block;
	width: 100%;
	margin-bottom: 24px;
}

.footer-store-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.footer-store-btn {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	padding: 10px;
	background: #fff;
	color: #585657;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	opacity: 1;
	transition: opacity 0.3s;
}

.footer-store-btn:hover {
	color: #585657;
	opacity: 0.8;
}

.footer-store-link {
	display: block;
	margin-bottom: 12px;
	color: #585657;
	text-decoration: none;
	font-size: 13px;
}

.footer-store-link:hover {
	color: #585657;
}

.footer-store-link::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	background: url("assets/images/footer-right-arrow.svg") center / contain no-repeat;
	vertical-align: middle;
}

.footer-column--content {
	flex: 0 0 40.17%;
	border-right: 1px solid #707070;
}

.footer-column--legal {
	flex: 0 0 22%;
}

.footer-column__heading {
	margin: 0 0 16px;
	color: #585657;
	font-size: 12px;
	font-weight: 400;
}

.footer-column__head .nav-accordion-toggle {
	width: 100%;
}

.footer-link-list-wrap {
	display: flex;
	gap: 40px;
}

@media (min-width: 632px) {
	.footer-column--legal .footer-link-list-wrap {
		display: block;
	}
}

.footer-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-link-list__item {
	padding: 4px 0 4px 16px;
}

.footer-link-list__item a {
	color: #585657;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.8;
	opacity: 1;
	transition: opacity 0.3s;
}

.footer-link-list__item a:hover {
	color: #585657;
	opacity: 0.8;
}

.footer-link-list__line {
	display: block;
}

.footer-link-list__item a small {
	display: block;
	font-size: 0.9em;
}

/* モバイル：アコーディオンナビ、店舗カラムなし
--------------------------------------------------------------*/
@media (max-width: 631.98px) {
	.site-footer__inner {
		padding: 40px 20px;
	}

	.footer-columns {
		flex-direction: column;
	}

	.footer-column--store {
		display: none;
	}

	.footer-column--content,
	.footer-column--legal {
		flex-basis: auto;
	}

	.footer-column--content {
		border-right: none;
	}

	.footer-column__heading {
		display: none;
	}

	.footer-accordion-toggle {
		padding: 32px 0;
		border-bottom: 1px solid #fff;
		color: #585657;
		font-size: 12px;
	}

	.footer-link-list-wrap {
		display: none;
		flex-direction: column;
		gap: 0;
	}

	.footer-link-list-wrap.is-open {
		display: flex;
	}

	.footer-link-list__item {
		padding: 20px 0;
		border-bottom: 1px solid #fff;
	}

	.footer-link-list__item a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-right: 20px;
	}

	/* The right-arrow is only shown in this mobile accordion view — the
	   real site hides it (parent display:none) in the desktop flat list. */
	.footer-link-list__item a::after {
		content: "";
		flex-shrink: 0;
		width: 8px;
		height: 8px;
		margin-left: 12px;
		background: url("assets/images/footer-right-arrow.svg") center / contain no-repeat;
	}
}

.site-footer .site-info {
	margin: 60px 0 0;
	text-align: center;
	font-size: 10px;
	color: #585657;
}

/* トップに戻るボタン：全ページで右下に固定表示。移行元サイトのレンダリング済み
   DOM/CSSから計測（クラス名も同一に保っている：
   .global-layout__back-to-top-button）。
--------------------------------------------------------------*/
.global-layout__back-to-top-button {
	position: fixed;
	right: 16px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	z-index: 100;
}

.back-to-top-button {
	display: grid;
	place-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.back-to-top-button__icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("assets/images/back-to-top-icon.svg") no-repeat center / contain;
}

/* 旧世代パーツ：article_img_area / imgfit_l(_2line) / img_caption(_2line)
   （CLAUDE.md未記載）。2枚の画像をキャプション付きで横並びに表示する
   float+clearfixレイアウト。`<ul class="article_img_area cf">`の各`<li>`に
   `<p class="imgfit_l_2line"><img></p><p class="img_caption_2line">...</p>`が
   入る構成（imgfit_lは単独画像時の同種パーツ、mg_bはmargin-bottom修飾）。
   移行元サイトにはimgfit_fb/imgfit_m/imgfit_xl(_2line)という兄弟バリエーションも
   存在するが、記事データでは未使用のため未実装（値も不明、必要になった時点で
   改めて実測すること）。
   移行元サイトの実測値：
   - li は float:left; width:calc(50% - 16px); margin-right:32px（最後の
     li のみmargin-right:0、liのデフォルト縦積みmargin-topも打ち消す）
   - imgfit_l(_2line) は position:relative; width:100%で、::beforeの
     padding-top:55%（imgfit_fbのみ56%）が疑似要素で高さを確保し、
     子のimgはposition:absoluteでobject-fit:coverするクラシックな
     アスペクト比固定手法
   - img_caption(_2line) はfont-size:12px（移行元サイト実測、ルートfont-size
     10pxの1.2rem換算）; color:#aaa; margin-top:6px（_2line版のみ
     margin-bottom:0; word-break:break-all）
   - .cf はfloat解除の定番clearfix（::after/::before { clear:both }） */
.cf::after,
.cf::before {
	content: "";
	display: block;
	clear: both;
}

.article_img_area {
	margin-bottom: 50px;
}

ul.article_img_area {
	padding-left: 0;
	margin-top: 0;
	margin-left: 0;
	list-style: none;
}

/* `.article-body ul:not(...)`系の汎用リストルールは`:not(.article_img_area)`
   で除外する。特にli+liのmargin-top:8pxはfloatレイアウトの2カラムに縦方向の
   ズレを生じさせる（list-style:noneはul側でなくli自身に付与する、
   .relation_product liと同じ理由でここでも直接liへ指定するが、margin-topは
   float由来の縦積みマージンでli自身への直接指定だけでは詳細度で汎用ルールを
   上回れないため、汎用ルール側を除外する方式にする必要がある）。 */
ul.article_img_area li {
	float: left;
	width: calc(50% - 16px);
	margin-right: 32px;
	list-style: none;
}

ul.article_img_area li:last-child {
	margin-right: 0;
}

ul.article_img_area li + li {
	margin-top: 0;
}

.mg_b {
	margin-bottom: 24px !important;
}

p.imgfit_l,
p.imgfit_l_2line {
	margin-bottom: 0;
	line-height: 0;
}

.imgfit_l,
.imgfit_l_2line {
	position: relative;
	width: 100%;
}

.imgfit_l::before,
.imgfit_l_2line::before {
	content: "";
	display: block;
	padding-top: 55%;
}

.imgfit_l img,
.imgfit_l_2line img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

p.img_caption,
p.img_caption_2line {
	font-size: 12px;
	color: #aaa;
	margin-top: 6px;
}

p.img_caption_2line {
	margin-bottom: 0;
	word-break: break-all;
}