@charset "UTF-8";
/*
Theme Name: Petal
Theme URI: https://example.com/petal/
Author: ATHENA
Description: 大型スライダーと3段の記事一覧を備えた、キュレーションサイト向けのブログテーマです。白基調＋モノトーンに、差し色としてローズを使ったデザインです。
Version: 1.7.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petal
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   0. デザイントークン（色・サイズはここで一括管理）
   ========================================================================== */
:root {
	--c-text: #000;
	--c-text-sub: #666;
	--c-meta: #999;
	--c-line: #ddd;
	--c-line-soft: #eee;
	--c-bg: #fff;
	--c-bg-soft: #f7f7f7;
	--c-accent: #c84d63;
	--c-overlay: rgba(0, 0, 0, .5);

	--w-inner: 1139px;
	--w-main: 789px;
	--w-side: 300px;
	--gap-col: 50px;

	--h-bar: 58px;
	--h-slide: 856px;

	--font-base: Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
	--font-head: "Noto Sans JP", var(--font-base);

	--ease: cubic-bezier(.25, .46, .45, .94);
}

/* ==========================================================================
   1. リセットと土台
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
figure, p, ul, ol, dl, dd, blockquote {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 0;
}

a {
	color: var(--c-text);
	text-decoration: none;
	transition: color .3s var(--ease), opacity .3s var(--ease);
}

a:hover {
	color: var(--c-accent);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   2. レイアウト
   ========================================================================== */
.l-inner {
	position: relative;
	width: var(--w-inner);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.l-2columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: var(--w-inner);
	max-width: 100%;
	margin: 0 auto;
}

.l-primary {
	width: var(--w-main);
	min-width: 0;
}

.l-secondary {
	width: var(--w-side);
	flex-shrink: 0;
}

.l-main {
	display: block;
}

.l-main--inner {
	padding-top: 60px;
}

/* 画面読み上げ用（見た目には出さない） */
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.u-clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

/* ==========================================================================
   3. ローディング演出
   ========================================================================== */
.p-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: opacity .8s var(--ease), visibility .8s var(--ease);
}

.p-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.p-loader__mark {
	width: 34px;
	height: 34px;
	border: 2px solid var(--c-line);
	border-top-color: var(--c-accent);
	border-radius: 50%;
	animation: petal-spin 1s linear infinite;
}

@keyframes petal-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */
.l-header {
	position: relative;
	z-index: 100;
	background: #fff;
}

.l-header__bar {
	position: relative;
	z-index: 2;
	height: var(--h-bar);
	background: rgba(255, 255, 255, .8);
	border-bottom: 1px solid var(--c-line-soft);
	backdrop-filter: saturate(160%) blur(6px);
}

.l-header.is-fixed .l-header__bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.l-header__bar .l-inner {
	height: 100%;
}

/* グローバルナビ */
.p-global-nav > ul {
	display: flex;
	justify-content: center;
}

.p-global-nav > ul > li {
	position: static;
}

.p-global-nav > ul > li > a {
	display: block;
	padding: 0 22px;
	line-height: var(--h-bar);
	font-size: 14px;
	letter-spacing: .06em;
	color: #aaa;
}

.p-global-nav > ul > li:hover > a,
.p-global-nav > ul > li.current-menu-item > a {
	color: var(--c-text);
}

/* ロゴ */
.l-header__logo {
	margin: 50px 0 55px;
	text-align: center;
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .18em;
}

.l-header__logo a {
	display: inline-block;
}

.l-header__logo img {
	width: auto;
	max-height: 46px;
}

.l-header__tagline {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--c-meta);
}

/* ヘッダー右上のボタン類 */
.c-icon-button {
	position: absolute;
	top: 0;
	width: var(--h-bar);
	height: var(--h-bar);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.c-icon-button--search { right: 0; }
.c-icon-button--menu { left: 0; }

.c-icon-button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}

/* メガメニュー */
.p-megamenu {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	background: var(--c-bg-soft);
	border-bottom: 1px solid var(--c-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease);
}

.p-global-nav > ul > li:hover .p-megamenu,
.p-megamenu:hover {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.p-megamenu__list {
	display: flex;
	width: var(--w-inner);
	max-width: 100%;
	margin: 0 auto;
	padding: 25px 0;
}

.p-megamenu__item {
	width: 20%;
	padding: 0 10px;
}

.p-megamenu__thumb {
	position: relative;
	padding-top: 62%;
	overflow: hidden;
	background: var(--c-line-soft);
}

.p-megamenu__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.p-megamenu__item a:hover .p-megamenu__thumb img {
	transform: scale(1.08);
}

.p-megamenu__title {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   5. サイドメニュー（右からスライド）
   ========================================================================== */
.p-sidemenu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9000;
	width: 320px;
	max-width: 85%;
	height: 100%;
	padding: 80px 30px 40px;
	overflow-y: auto;
	background: #fff;
	transform: translateX(100%);
	transition: transform .4s var(--ease);
}

.p-sidemenu.is-open {
	transform: none;
}

.p-sidemenu__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.p-sidemenu__nav li + li {
	border-top: 1px solid var(--c-line-soft);
}

.p-sidemenu__nav a {
	display: block;
	padding: 14px 0;
	font-size: 14px;
}

.p-sidemenu-overlay {
	position: fixed;
	inset: 0;
	z-index: 8000;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s var(--ease);
}

.p-sidemenu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* 検索ボックス（ヘッダー展開） */
.p-header-search {
	display: none;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-line-soft);
	background: var(--c-bg-soft);
}

.p-header-search.is-open {
	display: block;
}

/* ==========================================================================
   6. 共通パーツ：サムネイルのホバー効果・カテゴリラベル・メタ
   ========================================================================== */
.c-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--c-line-soft);
}

.c-thumb__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}

/* アイキャッチ未設定のときの代わりの箱 */
span.c-thumb__image {
	background: linear-gradient(135deg, #ececec 0%, #f7f7f7 100%);
}

.c-thumb:hover .c-thumb__image {
	transform: scale(1.06);
}

/* 画像の上にかぶるタイトル用の黒帯 */
.c-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var(--c-overlay);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: opacity .4s var(--ease);
}

.c-thumb:hover .c-overlay {
	opacity: 1;
}

.c-overlay__title {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.48;
	color: #fff;
}

.c-overlay__title--sm {
	font-size: 16px;
}

.c-overlay__meta {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1;
	color: #fff;
}

.c-overlay__meta span + span::before {
	content: "／";
	margin: 0 6px;
	opacity: .6;
}

/* サムネ左上に浮かぶカテゴリ名 */
.c-float-category {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100px;
	padding: 0 14px 11px;
	background: #fff;
	font-size: 12px;
	line-height: 2;
	text-align: center;
	letter-spacing: .08em;
	color: var(--c-accent);
}

.c-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--c-meta);
}

.c-meta a {
	color: var(--c-meta);
}

.c-meta a:hover {
	color: var(--c-accent);
}

/* 中央に線を引いた見出し */
.c-headline {
	position: relative;
	margin-bottom: 30px;
	padding-top: 30px;
	border-top: 3px solid var(--c-text);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	letter-spacing: .1em;
}

/* ボタン */
.c-button {
	display: inline-block;
	min-width: 240px;
	padding: 17px 30px;
	border: 1px solid var(--c-text);
	background: transparent;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background-color .3s var(--ease), color .3s var(--ease);
}

.c-button:hover {
	background: var(--c-text);
	color: #fff;
}

.c-button--light {
	border-color: #fff;
	color: #fff;
}

.c-button--light:hover {
	background: #fff;
	color: var(--c-text);
}

/* ==========================================================================
   7. トップページ：大型スライダー
   ========================================================================== */
.p-hero {
	position: relative;
	margin-bottom: 70px;
	overflow: hidden;
}

.p-hero__track {
	display: flex;
	transition: transform .8s var(--ease);
}

.p-hero__item {
	position: relative;
	flex: 0 0 100%;
	padding: 0 10px;
}

.p-hero__thumb {
	position: relative;
	display: block;
	height: var(--h-slide);
	overflow: hidden;
	background: var(--c-line-soft);
}

.p-hero__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 54px;
	height: 54px;
	margin-top: -27px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .85);
	border: 0;
	cursor: pointer;
	transition: background-color .3s var(--ease);
}

.p-hero__arrow:hover {
	background: #fff;
}

.p-hero__arrow--prev { left: 24px; }
.p-hero__arrow--next { right: 24px; }

.p-hero__dots {
	position: absolute;
	left: 0;
	bottom: 26px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.p-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color .3s var(--ease);
}

.p-hero__dot.is-active {
	background: #fff;
}

/* ==========================================================================
   8. トップページ：記事セクション3段（最新記事 / 話題のトレンド / 特集記事）
   ========================================================================== */
.p-section {
	margin-bottom: 70px;
}

/* 3列で並ぶ記事カード */
.p-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 22px;
}

.p-grid__item {
	width: calc((100% - 44px) / 3);
}

.p-grid__link {
	display: block;
}

.p-grid__thumb {
	height: 180px;
}

.p-grid__meta {
	margin-top: 14px;
	font-size: 12px;
}

.p-grid__title {
	display: block;
	margin-top: 8px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}

.p-grid__link:hover .p-grid__title {
	color: var(--c-accent);
}

/* 「もっと見る」ボタン（押すと、その段用の固定ページへ移動します） */
.p-section__more {
	margin-top: 40px;
	text-align: center;
}

/* ==========================================================================
   8-2. トップページ：人気上昇中のキーワード
   ========================================================================== */
.p-keywords {
	margin-bottom: 70px;
}

.p-keywords__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.p-keywords__link {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--c-text-sub);
	transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}

.p-keywords__link:hover {
	border-color: var(--c-accent);
	background: var(--c-accent);
	color: #fff;
}

.p-keywords__hash {
	margin-right: 2px;
	color: var(--c-accent);
	transition: color .3s var(--ease);
}

.p-keywords__link:hover .p-keywords__hash {
	color: #fff;
}

/* ==========================================================================
   8-3. トップページ：よくあるご質問（FAQ）へのリンク
   ========================================================================== */
.p-faq-link {
	margin-bottom: 70px;
}

.p-faq-link__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 30px;
	border: 1px solid var(--c-line);
	background: var(--c-bg-soft);
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.p-faq-link__box:hover {
	border-color: var(--c-text);
	background: #fff;
}

.p-faq-link__body {
	display: block;
	min-width: 0;
}

.p-faq-link__label {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--c-accent);
}

.p-faq-link__title {
	display: block;
	font-family: var(--font-head);
	font-size: 18px;
	line-height: 1.6;
}

.p-faq-link__text {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--c-text-sub);
}

.p-faq-link__arrow {
	flex: 0 0 auto;
	color: var(--c-text-sub);
	transition: transform .3s var(--ease);
}

.p-faq-link__box:hover .p-faq-link__arrow {
	transform: translateX(4px);
}

/* ==========================================================================
   9. 記事リスト
   ========================================================================== */
/* 上部：大きめ2カラム */
.p-list-large {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-bottom: 49px;
}

.p-list-large__item {
	width: calc(50% - .5px);
}

.p-list-large__thumb {
	height: 271px;
}

/* 下部：サムネ左・本文右の横並び */
.p-list__item {
	margin-bottom: 50px;
}

.p-list__item:last-child {
	margin-bottom: 0;
}

.p-list__link {
	display: flex;
	align-items: flex-start;
	gap: 41px;
}

.p-list__thumb {
	flex: 0 0 240px;
	height: 240px;
}

.p-list__info {
	min-width: 0;
}

.p-list__meta {
	margin-bottom: 12px;
}

.p-list__category {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--c-accent);
}

.p-list__title {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
}

.p-list__excerpt {
	margin-top: 16px;
	font-size: 14px;
	line-height: 2;
	color: var(--c-text-sub);
}

/* ==========================================================================
   10. ページャー
   ========================================================================== */
.p-pager {
	margin-top: 60px;
	text-align: center;
}

.p-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0 3px;
	padding: 0 8px;
	border: 1px solid var(--c-line);
	font-size: 14px;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.p-pager .page-numbers.current,
.p-pager .page-numbers:hover {
	background: var(--c-text);
	border-color: var(--c-text);
	color: #fff;
}

/* ==========================================================================
   11. サイドバー・ウィジェット
   ========================================================================== */
.p-widget {
	margin-bottom: 50px;
}

.p-widget:last-child {
	margin-bottom: 0;
}

.p-widget__title {
	margin-bottom: 30px;
	padding-top: 30px;
	border-top: 3px solid var(--c-text);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	letter-spacing: .1em;
}

/* 2列カード型（おすすめ記事） */
.p-widget-list--card {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 30px;
}

.p-widget-list--card > li {
	width: 135px;
}

.p-widget-list--card .c-thumb {
	height: 135px;
}

.p-widget-list--card .p-widget-list__title {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.7;
}

/* 横並び型（最新記事・ランキング） */
.p-widget-list--row > li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 30px;
}

.p-widget-list--row > li:last-child {
	margin-bottom: 0;
}

.p-widget-list--row .c-thumb {
	flex: 0 0 100px;
	height: 100px;
}

.p-widget-list--row .p-widget-list__title {
	font-size: 13px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-widget-list__meta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--c-meta);
}

/* ランキングの順位バッジ */
.p-widget-list--ranking > li {
	position: relative;
}

.p-widget-list__rank {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-text);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

.p-widget-list--ranking > li:nth-child(1) .p-widget-list__rank { background: var(--c-accent); }

.p-widget__more {
	margin-top: 16px;
	font-size: 13px;
	text-align: right;
}

/* カテゴリー一覧 */
.p-widget-categories > li {
	border-bottom: 1px solid var(--c-line-soft);
}

.p-widget-categories > li:first-child {
	border-top: 1px solid var(--c-line-soft);
}

.p-widget-categories a {
	display: block;
	padding: 12px 4px;
	line-height: 1.8;
	font-size: 14px;
}

.p-widget-categories .children {
	padding-left: 16px;
	border-top: 1px solid var(--c-line-soft);
}

/* アーカイブのプルダウン */
.p-widget select {
	width: 100%;
	height: 50px;
	padding: 0 18px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 0;
}

/* 検索フォーム */
.c-searchform {
	display: flex;
	border: 1px solid var(--c-line);
	background: #fff;
}

.c-searchform__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	outline: none;
}

.c-searchform__submit {
	width: 52px;
	border: 0;
	background: var(--c-text);
	color: #fff;
	cursor: pointer;
}

/* ==========================================================================
   12. 記事詳細ページ
   ========================================================================== */
.p-entry__header {
	margin-bottom: 40px;
}

.p-entry__category {
	margin-bottom: 14px;
	font-size: 12px;
	letter-spacing: .12em;
	text-align: center;
	color: var(--c-accent);
}

.p-entry__title {
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
}

.p-entry__meta {
	justify-content: center;
	margin-top: 18px;
}

.p-entry__eyecatch {
	margin: 40px 0;
}

.p-entry__body {
	font-size: 15px;
	line-height: 2.1;
}

.p-entry__body > * + * {
	margin-top: 1.8em;
}

.p-entry__body h2 {
	margin-top: 2.4em;
	padding: 14px 20px;
	background: var(--c-bg-soft);
	border-left: 3px solid var(--c-accent);
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.6;
}

.p-entry__body h3 {
	margin-top: 2.2em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-line);
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
}

.p-entry__body h4 {
	margin-top: 2em;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 600;
}

.p-entry__body ul,
.p-entry__body ol {
	padding-left: 1.5em;
}

.p-entry__body ul { list-style: disc; }
.p-entry__body ol { list-style: decimal; }

.p-entry__body li + li {
	margin-top: .5em;
}

.p-entry__body a {
	color: var(--c-accent);
	text-decoration: underline;
}

.p-entry__body blockquote {
	padding: 20px 24px;
	background: var(--c-bg-soft);
	border-left: 3px solid var(--c-line);
	color: var(--c-text-sub);
}

.p-entry__body img {
	height: auto;
}

.p-entry__body table {
	width: 100%;
	border-collapse: collapse;
}

.p-entry__body th,
.p-entry__body td {
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	text-align: left;
}

.p-entry__body th {
	background: var(--c-bg-soft);
	font-weight: 600;
}

/* 記事下のシェアボタン */
.p-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 50px;
}

.p-share__item {
	flex: 1;
	min-width: 120px;
}

.p-share__link {
	display: block;
	padding: 12px;
	border: 1px solid var(--c-line);
	font-size: 12px;
	text-align: center;
	letter-spacing: .08em;
}

.p-share__link:hover {
	background: var(--c-text);
	border-color: var(--c-text);
	color: #fff;
}

/* 前後の記事 */
.p-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--c-line);
	font-size: 13px;
}

.p-post-nav__item {
	width: 48%;
}

.p-post-nav__item--next {
	text-align: right;
}

.p-post-nav__label {
	display: block;
	margin-bottom: 6px;
	color: var(--c-meta);
	font-size: 12px;
}

/* 関連記事 */
.p-related {
	margin-top: 70px;
}

.p-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 22px;
}

.p-related__item {
	width: calc((100% - 44px) / 3);
}

.p-related__item .c-thumb {
	height: 160px;
}

.p-related__title {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.7;
}

/* ==========================================================================
   13. 固定ページ・検索結果・404
   ========================================================================== */
.p-page-header {
	margin-bottom: 50px;
	text-align: center;
}

/* 「記事一覧（3列）」テンプレートで、一覧の前に出る説明文 */
.p-postgrid__lead {
	margin-bottom: 50px;
}

/* ---- 「FAQ（ページ内検索つき）」テンプレート ---- */
.p-faq-search {
	margin-bottom: 40px;
}

.p-faq-search[hidden] {
	display: none;
}

.p-faq-search__field {
	display: flex;
	align-items: center;
	border: 1px solid var(--c-line);
	background: #fff;
	transition: border-color .3s var(--ease);
}

.p-faq-search__field:focus-within {
	border-color: var(--c-text);
}

.p-faq-search__icon {
	flex: 0 0 auto;
	margin-left: 16px;
	color: var(--c-meta);
}

.p-faq-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 15px 12px;
	border: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.5;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

/* ブラウザが標準でつける「×」は、独自のボタンと重なるので消します */
.p-faq-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.p-faq-search__clear {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--c-meta);
	cursor: pointer;
	transition: color .3s var(--ease);
}

.p-faq-search__clear:hover {
	color: var(--c-text);
}

.p-faq-search__clear[hidden] {
	display: none;
}

.p-faq-search__status {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--c-text-sub);
}

/* 検索で絞り込んだときに、当てはまらない質問を隠すための印 */
.is-faq-hidden {
	display: none !important;
}

/* 探した言葉に付く黄色マーカー */
.p-faq-mark {
	padding: 0 2px;
	border-radius: 2px;
	background: #ffef8a;
	color: inherit;
	font-weight: inherit;
}

/* 「詳細」ブロック（クリックで開くアコーディオン）でFAQを書いたときの見た目 */
.p-faq-body details {
	border-bottom: 1px solid var(--c-line);
}

.p-faq-body > details + details {
	margin-top: 0;
}

.p-faq-body summary {
	position: relative;
	padding: 20px 46px 20px 0;
	font-family: var(--font-head);
	font-size: 16px;
	line-height: 1.7;
	cursor: pointer;
	list-style: none;
	transition: color .3s var(--ease);
}

.p-faq-body summary::-webkit-details-marker {
	display: none;
}

.p-faq-body summary:hover {
	color: var(--c-accent);
}

/* 右端の「V」印。開いているときは上向きになります */
.p-faq-body summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s var(--ease);
}

.p-faq-body details[open] summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.p-faq-body details > * + * {
	margin-top: 1em;
}

.p-faq-body details > summary + * {
	margin-top: 0;
}

.p-faq-body details > *:last-child {
	margin-bottom: 22px;
}

.p-faq-body details > *:not(summary) {
	font-size: 15px;
	line-height: 2;
	color: var(--c-text-sub);
}

.p-page-header__title {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: .1em;
}

.p-page-header__sub {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--c-meta);
	text-transform: uppercase;
}

.p-breadcrumb {
	margin-bottom: 30px;
	font-size: 12px;
	color: var(--c-meta);
}

.p-breadcrumb a {
	color: var(--c-meta);
}

.p-breadcrumb span + span::before {
	content: "›";
	margin: 0 8px;
}

.p-not-found {
	padding: 60px 0;
	text-align: center;
}

.p-not-found__code {
	font-family: var(--font-head);
	font-size: 64px;
	line-height: 1;
	letter-spacing: .1em;
}

.p-not-found__text {
	margin: 20px 0 34px;
	color: var(--c-text-sub);
}

/* コメント */
.p-comments {
	margin-top: 70px;
}

.p-comments__list li {
	padding: 22px 0;
	border-bottom: 1px solid var(--c-line-soft);
}

.p-comments__list .children {
	padding-left: 28px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	background: #fff;
}

.comment-form p {
	margin-bottom: 16px;
}

/* ==========================================================================
   14. フッター
   ========================================================================== */
.l-footer {
	margin-top: 100px;
}

/* CTA（背景画像＋暗幕） */
.p-footer-cta {
	position: relative;
	padding: 105px 0;
	background: #333 center / cover no-repeat;
	color: #fff;
	text-align: center;
}

.p-footer-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
}

.p-footer-cta__inner {
	position: relative;
}

.p-footer-cta__desc {
	margin-bottom: 34px;
	font-family: var(--font-head);
	font-size: 22px;
	line-height: 1.9;
	letter-spacing: .06em;
}

/* ウィジェットエリア（4カラム） */
.p-footer-widget-area {
	border-top: 1px solid var(--c-line-soft);
	color: var(--c-text-sub);
}

.p-footer-widget-area__inner {
	display: flex;
	width: var(--w-inner);
	max-width: 100%;
	margin: 0 auto;
}

.p-footer-widget {
	padding: 80px 0 75px;
}

.p-footer-widget--wide { width: 379px; }
.p-footer-widget--narrow { width: 190px; }

.p-footer-widget + .p-footer-widget {
	border-left: 1px solid var(--c-line-soft);
}

.p-footer-widget:nth-child(1) { padding-right: 48px; }
.p-footer-widget:nth-child(2) { padding-left: 48px; }
.p-footer-widget:nth-child(3) { padding-left: 23px; }
.p-footer-widget:nth-child(4) { padding-left: 48px; }

.p-footer-widget .p-widget__title {
	margin-bottom: 18px;
	padding-top: 0;
	border-top: 0;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	color: var(--c-text);
}

.p-footer-widget a {
	color: var(--c-text-sub);
}

.p-footer-widget a:hover {
	color: var(--c-accent);
}

.p-footer-widget .p-widget {
	margin-bottom: 0;
}

/* サイト情報ウィジェット */
.p-siteinfo__logo {
	margin-bottom: 18px;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--c-text);
}

.p-siteinfo__desc {
	font-size: 14px;
	line-height: 1.8;
}

.p-social {
	display: flex;
	gap: 14px;
	margin-top: 22px;
}

.p-social a {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line);
	border-radius: 50%;
}

.p-social a:hover {
	background: var(--c-text);
	border-color: var(--c-text);
	color: #fff;
}

.p-social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* フッターのメニューリスト */
.p-footer-widget .menu li a,
.p-footer-widget .p-widget-list--text li a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
}

/* コピーライト */
.p-copyright {
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid var(--c-line-soft);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--c-text-sub);
}

/* ページトップ */
.p-pagetop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 500;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-text);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.p-pagetop.is-visible {
	opacity: 1;
	visibility: visible;
}

.p-pagetop:hover {
	background: var(--c-accent);
	color: #fff;
}

/* ==========================================================================
   15. スクロールで浮かび上がる演出
   ========================================================================== */
/*
 * 「隠してから表示する」演出です。
 * JavaScript が動く環境でだけ html に .js-anim が付くようにしてあります。
 * こうしておくと、万一 JS が動かなくても記事が見えなくなることはありません。
 */
.js-anim .js-inview {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js-anim .js-inview.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.js-anim .js-inview {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   16. WordPress 標準クラス
   ========================================================================== */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	margin-top: 8px;
	font-size: 12px;
	color: var(--c-meta);
	text-align: center;
}
.sticky .p-list__title::before {
	content: "★ ";
	color: var(--c-accent);
}

/* ==========================================================================
   17. レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1239px) {
	:root {
		--w-inner: 92%;
		--w-main: calc(100% - 350px);
	}
}

@media screen and (max-width: 991px) {
	:root {
		--h-slide: 500px;
	}

	.l-2columns {
		display: block;
	}

	.l-primary,
	.l-secondary {
		width: 100%;
	}

	.l-secondary {
		margin-top: 70px;
	}

	.p-global-nav {
		display: none;
	}

	.p-footer-widget-area__inner {
		flex-wrap: wrap;
	}

	.p-footer-widget,
	.p-footer-widget--wide,
	.p-footer-widget--narrow {
		width: 50%;
		padding: 40px 20px !important;
	}

	.p-footer-widget:nth-child(odd) {
		border-left: 0;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--h-slide: 320px;
		--w-inner: 88%;
	}

	body {
		font-size: 14px;
	}

	.l-header__logo {
		margin: 30px 0 32px;
		font-size: 22px;
	}

	.p-hero {
		margin-bottom: 45px;
	}

	.p-hero__item {
		padding: 0;
	}

	.p-hero__arrow {
		width: 40px;
		height: 40px;
		margin-top: -20px;
	}

	.p-hero__arrow--prev { left: 8px; }
	.p-hero__arrow--next { right: 8px; }

	/* スマホではホバーが効かないので、タイトルは常に画像の下に表示 */
	.c-overlay {
		position: static;
		padding: 14px 0 0;
		background: none;
		opacity: 1;
		text-align: left;
		display: block;
	}

	/*
	 * タイトルが画像の下に回り込むため、枠の高さ指定と「はみ出しを隠す」設定を外し、
	 * 代わりに画像そのものへ高さを指定します。
	 * （これをしないとタイトルが枠に隠れて見えなくなります）
	 */
	.p-hero__thumb,
	.p-list-large__thumb {
		height: auto;
		overflow: visible;
	}

	.p-hero__thumb > img,
	.p-hero__thumb > .c-thumb__image {
		height: var(--h-slide);
	}

	.p-list-large__thumb > img,
	.p-list-large__thumb > .c-thumb__image {
		height: 200px;
	}

	.c-overlay__title,
	.c-overlay__meta {
		color: var(--c-text);
	}

	.c-overlay__title {
		font-size: 16px;
	}

	.c-overlay__meta {
		color: var(--c-meta);
	}

	.p-list-large {
		display: block;
		margin-bottom: 0;
	}

	.p-list-large__item {
		width: 100%;
		margin-bottom: 34px;
	}

	.p-list__link {
		display: block;
	}

	.p-list__thumb {
		height: 200px;
		margin-bottom: 14px;
	}

	.p-list__title {
		font-size: 17px;
	}

	.p-list__item {
		margin-bottom: 34px;
	}

	/* トップページの3列カードは、スマホでは2列にします */
	.p-section,
	.p-keywords,
	.p-faq-link {
		margin-bottom: 50px;
	}

	.p-grid {
		gap: 28px 16px;
	}

	.p-grid__item {
		width: calc((100% - 16px) / 2);
	}

	.p-grid__thumb {
		height: 120px;
	}

	.p-grid__title {
		font-size: 14px;
	}

	.p-section__more {
		margin-top: 28px;
	}

	.p-section__more .c-button {
		min-width: 0;
		width: 100%;
		padding: 14px 20px;
	}

	.p-faq-link__box {
		padding: 22px 20px;
	}

	.p-faq-search__input {
		padding: 13px 10px;
		font-size: 16px; /* iPhoneで入力時に拡大されないよう16px以上にします */
	}

	.p-faq-body summary {
		padding: 16px 40px 16px 0;
		font-size: 15px;
	}

	.p-faq-link__title {
		font-size: 16px;
	}

	.p-entry__title {
		font-size: 21px;
	}

	.p-entry__body {
		font-size: 15px;
	}

	.p-entry__body h2 { font-size: 18px; }
	.p-entry__body h3 { font-size: 16px; }

	.p-related__item {
		width: calc((100% - 22px) / 2);
	}

	.p-footer-cta {
		padding: 60px 0;
	}

	.p-footer-cta__desc {
		font-size: 17px;
	}

	.p-footer-widget,
	.p-footer-widget--wide,
	.p-footer-widget--narrow {
		width: 100%;
		border-left: 0 !important;
		border-top: 1px solid var(--c-line-soft);
	}

	.p-footer-widget-area__inner {
		width: 88%;
	}

	.p-post-nav {
		display: block;
	}

	.p-post-nav__item {
		width: 100%;
	}

	.p-post-nav__item--next {
		margin-top: 20px;
		text-align: left;
	}

	.l-footer {
		margin-top: 60px;
	}
}