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

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

/* --- ヘッダーSNS帯の非表示（全ページ） --- */
.l-header__bar .c-iconList {
	display: none;
}

/* --- トップページセクション共通 --- */
.p-top-section {
	margin-bottom: 60px;
}

.p-top-section__title {
	letter-spacing: 0.05em;
	margin-bottom: 30px;
}

/* --- セクション別タイトルスタイル --- */
.p-top-section--pickup .p-top-section__title {
	font-family: var(--top-pickup-title-font);
	font-size: var(--top-pickup-title-size);
	font-weight: var(--top-pickup-title-weight);
	text-align: var(--top-pickup-title-align);
}

.p-top-section--latest .p-top-section__title {
	font-family: var(--top-latest-title-font);
	font-size: var(--top-latest-title-size);
	font-weight: var(--top-latest-title-weight);
	text-align: var(--top-latest-title-align);
}

.p-top-section--cat-1 .p-top-section__title {
	font-family: var(--top-cat_1-title-font);
	font-size: var(--top-cat_1-title-size);
	font-weight: var(--top-cat_1-title-weight);
	text-align: var(--top-cat_1-title-align);
}

.p-top-section--cat-2 .p-top-section__title {
	font-family: var(--top-cat_2-title-font);
	font-size: var(--top-cat_2-title-size);
	font-weight: var(--top-cat_2-title-weight);
	text-align: var(--top-cat_2-title-align);
}

.p-top-section--cat-3 .p-top-section__title {
	font-family: var(--top-cat_3-title-font);
	font-size: var(--top-cat_3-title-size);
	font-weight: var(--top-cat_3-title-weight);
	text-align: var(--top-cat_3-title-align);
}

.p-top-section--cat-4 .p-top-section__title {
	font-family: var(--top-cat_4-title-font);
	font-size: var(--top-cat_4-title-size);
	font-weight: var(--top-cat_4-title-weight);
	text-align: var(--top-cat_4-title-align);
}

.p-top-section--cat-5 .p-top-section__title {
	font-family: var(--top-cat_5-title-font);
	font-size: var(--top-cat_5-title-size);
	font-weight: var(--top-cat_5-title-weight);
	text-align: var(--top-cat_5-title-align);
}

.p-top-section--cat-6 .p-top-section__title {
	font-family: var(--top-cat_6-title-font);
	font-size: var(--top-cat_6-title-size);
	font-weight: var(--top-cat_6-title-weight);
	text-align: var(--top-cat_6-title-align);
}

.p-top-section--cat-7 .p-top-section__title {
	font-family: var(--top-cat_7-title-font);
	font-size: var(--top-cat_7-title-size);
	font-weight: var(--top-cat_7-title-weight);
	text-align: var(--top-cat_7-title-align);
}

.p-top-section--cat-8 .p-top-section__title {
	font-family: var(--top-cat_8-title-font);
	font-size: var(--top-cat_8-title-size);
	font-weight: var(--top-cat_8-title-weight);
	text-align: var(--top-cat_8-title-align);
}

.p-top-section--instagram .p-top-section__title {
	font-family: var(--top-instagram-title-font);
	font-size: var(--top-instagram-title-size);
	font-weight: var(--top-instagram-title-weight);
	text-align: var(--top-instagram-title-align);
}

/* --- レスポンシブ --- */
@media (max-width: 599px) {
	.p-top-section {
		margin-bottom: 40px;
	}
	.p-top-section__title {
		margin-bottom: 20px;
	}
	.p-top-section--pickup .p-top-section__title {
		font-size: var(--top-pickup-title-size-sp);
	}
	.p-top-section--latest .p-top-section__title {
		font-size: var(--top-latest-title-size-sp);
	}
	.p-top-section--cat-1 .p-top-section__title {
		font-size: var(--top-cat_1-title-size-sp);
	}
	.p-top-section--cat-2 .p-top-section__title {
		font-size: var(--top-cat_2-title-size-sp);
	}
	.p-top-section--cat-3 .p-top-section__title {
		font-size: var(--top-cat_3-title-size-sp);
	}
	.p-top-section--cat-4 .p-top-section__title {
		font-size: var(--top-cat_4-title-size-sp);
	}
	.p-top-section--cat-5 .p-top-section__title {
		font-size: var(--top-cat_5-title-size-sp);
	}
	.p-top-section--cat-6 .p-top-section__title {
		font-size: var(--top-cat_6-title-size-sp);
	}
	.p-top-section--cat-7 .p-top-section__title {
		font-size: var(--top-cat_7-title-size-sp);
	}
	.p-top-section--cat-8 .p-top-section__title {
		font-size: var(--top-cat_8-title-size-sp);
	}
	.p-top-section--instagram .p-top-section__title {
		font-size: var(--top-instagram-title-size-sp);
	}
}

/* --- 記事の日付を非表示 --- */
.c-postTimes,
.c-postTitle__date,
.p-postList__times {
	display: none;
}

/* --- PC列数4〜6列のwidth定義（親テーマに1〜3列しかないため） --- */
@media (min-width: 960px) {
	.-type-card.-pc-col4 .p-postList__item { width: 25%; }
	.-type-card.-pc-col5 .p-postList__item { width: 20%; }
	.-type-card.-pc-col6 .p-postList__item { width: 16.66666%; }
}

/* --- カスタマイザープレビュー用列数CSS --- */
body.customize-preview .p-top-section .-pc-col2 .p-postList__item {
	width: 50% !important;
}
body.customize-preview .p-top-section .-pc-col3 .p-postList__item {
	width: 33.33333% !important;
}
body.customize-preview .p-top-section .-pc-col4 .p-postList__item {
	width: 25% !important;
}
body.customize-preview .p-top-section .-pc-col5 .p-postList__item {
	width: 20% !important;
}
body.customize-preview .p-top-section .-pc-col6 .p-postList__item {
	width: 16.66666% !important;
}

/* =============================================
   カードスタイル
   ============================================= */

/* --- Overlay（オーバーレイ） --- */
.p-top-section--card-overlay .p-postList__link {
	overflow: hidden;
}
.p-top-section--card-overlay .c-postThumb__figure::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	z-index: 1;
	pointer-events: none;
}
.p-top-section--card-overlay .p-postList__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	padding: 1em;
	z-index: 2;
}
.p-top-section--card-overlay .p-postList__title {
	color: #fff;
}
.p-top-section--card-overlay .p-postList__meta,
.p-top-section--card-overlay .p-postList__meta * {
	color: rgba(255, 255, 255, 0.8);
}

/* --- Square（スクエア） --- */
.p-top-section--card-square .c-postThumb__figure::before {
	padding-top: 100% !important;
}

/* --- Portrait（ポートレート） --- */
.p-top-section--card-portrait .c-postThumb__figure::before {
	padding-top: 133.33% !important;
}

/* --- Horizontal（ホリゾンタル） --- */
.p-top-section--card-horizontal .-type-card .p-postList__link {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.p-top-section--card-horizontal .-type-card .p-postList__thumb {
	width: 40%;
	flex-shrink: 0;
}
.p-top-section--card-horizontal .-type-card .c-postThumb__figure::before {
	padding-top: 75% !important;
}
.p-top-section--card-horizontal .-type-card .p-postList__body {
	flex: 1;
	padding: 0 0 0 1em;
}

/* --- Wide（ワイド） --- */
.p-top-section--card-wide .c-postThumb__figure::before {
	padding-top: 50% !important;
}

/* --- Tile（タイル） --- */
.p-top-section--card-tile .p-postList__link {
	overflow: hidden;
}
.p-top-section--card-tile .c-postThumb__figure::before {
	padding-top: 100% !important;
}
.p-top-section--card-tile .p-postList__body {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	text-align: center;
	z-index: 2;
	padding: 1em;
}
.p-top-section--card-tile .p-postList__title {
	color: #fff;
}
.p-top-section--card-tile .p-postList__meta,
.p-top-section--card-tile .p-postList__excerpt {
	display: none;
}

/* --- Minimal（ミニマル） --- */
.p-top-section--card-minimal .p-postList__thumb {
	display: none;
}
.p-top-section--card-minimal .-type-card .p-postList__item {
	width: 100% !important;
	border-bottom: 1px solid #eee;
}
.p-top-section--card-minimal .p-postList__body {
	padding: 1em 0;
}

/* --- カードスタイル: レスポンシブ --- */
@media (max-width: 599px) {
	.p-top-section--card-horizontal .-type-card .p-postList__thumb {
		width: 35%;
	}
	.p-top-section--card-horizontal .-type-card .p-postList__body {
		padding: 0 0 0 0.75em;
	}
}

/* --- カードスタイル: カスタマイザープレビュー対応 --- */
body.customize-preview .p-top-section--card-minimal .-type-card .p-postList__item {
	width: 100% !important;
}

/* =============================================
   背景スタイル
   ============================================= */

/* --- 4-0. 共通基盤 --- */
.p-top-section[class*="--bg-"] {
	position: relative;
	isolation: isolate;
}

/* 帯系スタイル: セクションに直接パディング */
.p-top-section--bg-solid-band,
.p-top-section--bg-gradient-band,
.p-top-section--bg-dark-band,
.p-top-section--bg-pattern-band {
	padding-top: var(--section-bg-padding);
	padding-bottom: var(--section-bg-padding);
}

/* --- 4-1. ソリッド帯 (solid-band) --- */
.p-top-section--bg-solid-band::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: var(--section-bg-color);
	z-index: -1;
}

/* --- 4-2. グラデーション帯 (gradient-band) --- */
.p-top-section--bg-gradient-band::before {
	content: "";
	position: absolute;
	top: -24px;
	bottom: -24px;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: linear-gradient(to bottom, transparent, var(--section-bg-color) 15%, var(--section-bg-color) 85%, transparent);
	z-index: -1;
}

/* --- 4-3. コンテナ (contained) --- */
.p-top-section--bg-contained {
	background-color: var(--section-bg-color);
	border-radius: 12px;
	padding: var(--section-bg-padding);
}

/* --- 4-4. エレベーテッド (elevated) --- */
.p-top-section--bg-elevated {
	background-color: var(--section-bg-color);
	border-radius: 16px;
	padding: var(--section-bg-padding);
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --- 4-5. ダーク帯 (dark-band) --- */
.p-top-section--bg-dark-band::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: var(--section-bg-color);
	z-index: -1;
}
.p-top-section--bg-dark-band .p-top-section__title {
	color: #fff;
}
.p-top-section--bg-dark-band .p-postList__title {
	color: #fff;
}
.p-top-section--bg-dark-band .p-postList__body {
	color: rgba(255, 255, 255, 0.85);
}
.p-top-section--bg-dark-band .p-postList__meta,
.p-top-section--bg-dark-band .p-postList__meta * {
	color: rgba(255, 255, 255, 0.7);
}

/* --- 4-6. 左アクセント (accent) --- */
.p-top-section--bg-accent {
	border-left: 5px solid var(--section-bg-color);
	padding-left: 24px;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.03), transparent 40%);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.p-top-section--bg-accent {
		background: linear-gradient(to right, color-mix(in srgb, var(--section-bg-color) 8%, transparent), transparent 40%);
	}
}

/* --- 4-7. パターン帯 (pattern-band) --- */
.p-top-section--bg-pattern-band::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: var(--section-bg-color);
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	z-index: -1;
}

/* --- 4-8. セパレーター (separator) --- */
.p-top-section--bg-separator {
	border-top: 2px solid var(--section-bg-color);
	padding-top: var(--section-bg-padding);
}

/* --- 4-9. 背景スタイル: レスポンシブ --- */
@media (max-width: 599px) {
	.p-top-section--bg-solid-band,
	.p-top-section--bg-gradient-band,
	.p-top-section--bg-dark-band,
	.p-top-section--bg-pattern-band {
		padding-top: calc(var(--section-bg-padding) * 0.75);
		padding-bottom: calc(var(--section-bg-padding) * 0.75);
	}
	.p-top-section--bg-separator {
		padding-top: calc(var(--section-bg-padding) * 0.75);
	}
	.p-top-section--bg-contained,
	.p-top-section--bg-elevated {
		padding: calc(var(--section-bg-padding) * 0.75);
		border-radius: 8px;
	}
	.p-top-section--bg-accent {
		padding-left: 16px;
	}
}