@charset "UTF-8";
/* ==========================================================================
   06-blocks.css
   SWELL 独自ブロック (.swell-block-*) の見た目だけを上書き。
   出力HTMLの構造・クラス名は一切変更しない。
   ========================================================================== */

/* --- ボックスメニュー（カテゴリ入口） ----------------------------------- */
/* 使用例：kurashi / taberu / meguru / hataraku / mukaeru / iju の6枚 */
.swell-block-boxMenu {
	border-radius: var(--mishima-radius-m);
	overflow: hidden;
	background: var(--mishima-color-bg);
	box-shadow: var(--mishima-shadow-s);
	transition: transform var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-boxMenu:hover {
	transform: translateY(-4px);
	box-shadow: var(--mishima-shadow-l);
}

.swell-block-boxMenu__link {
	text-decoration: none;
	display: block;
	position: relative;
	color: var(--mishima-color-text);
}

.swell-block-boxMenu__figure {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
}

.swell-block-boxMenu__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mishima-dur-slow) var(--mishima-ease);
}

.swell-block-boxMenu:hover .swell-block-boxMenu__figure img {
	transform: scale(1.06);
}

.swell-block-boxMenu__label {
	padding: var(--mishima-space-s) var(--mishima-space-m);
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	letter-spacing: 0.04em;
	color: var(--mishima-color-text);
	background: var(--mishima-color-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.swell-block-boxMenu__label::after {
	content: "→";
	font-family: var(--mishima-font-en);
	color: var(--mishima-color-water);
	font-size: var(--mishima-fz-base);
	transition: transform var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-boxMenu:hover .swell-block-boxMenu__label::after {
	transform: translateX(4px);
}

/* --- フルワイド（-cont-wide / -pad-m）--------------------------------- */
.swell-block-fullWide {
	position: relative;
}

.swell-block-fullWide.-pad-m {
	padding-block: var(--mishima-section-py);
}

.swell-block-fullWide__bg {
	background: var(--mishima-color-cream);
}

.swell-block-fullWide.-bg-water .swell-block-fullWide__bg { background: var(--mishima-color-water-thin); }
.swell-block-fullWide.-bg-fuji  .swell-block-fullWide__bg { background: var(--mishima-color-fuji-thin); }
.swell-block-fullWide.-bg-deep  .swell-block-fullWide__bg { background: var(--mishima-gradient-water); }

/* 濃い背景時の文字色 */
.swell-block-fullWide.-bg-deep {
	color: var(--mishima-color-text-invert);
}

.swell-block-fullWide.-bg-deep h1,
.swell-block-fullWide.-bg-deep h2,
.swell-block-fullWide.-bg-deep h3,
.swell-block-fullWide.-bg-deep p {
	color: inherit;
}

.swell-block-fullWide__inner {
	max-width: var(--mishima-container-max);
	margin-inline: auto;
	padding-inline: var(--mishima-gutter);
}

/* --- SWELLボタン ------------------------------------------------------- */
.swell-block-button__link {
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	letter-spacing: var(--mishima-ls-wide);
	border-radius: var(--mishima-radius-pill);
	transition: transform var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow  var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--mishima-shadow-m);
}

.swell-block-button.is-style-btn_solid .swell-block-button__link {
	background: var(--mishima-color-water);
	color: var(--mishima-color-text-invert);
}

.swell-block-button.is-style-btn_solid .swell-block-button__link:hover {
	background: var(--mishima-color-water-deep);
	color: var(--mishima-color-text-invert);
}

.swell-block-button.is-style-btn_accent .swell-block-button__link {
	background: var(--mishima-color-accent);
	color: var(--mishima-color-text-invert);
}

.swell-block-button.is-style-btn_accent .swell-block-button__link:hover {
	background: var(--mishima-color-accent-deep);
}

.swell-block-button.is-style-btn_line .swell-block-button__link {
	border: 1px solid var(--mishima-color-water);
	color: var(--mishima-color-water-deep);
	background: transparent;
}

.swell-block-button.is-style-btn_line .swell-block-button__link:hover {
	background: var(--mishima-color-water);
	color: var(--mishima-color-text-invert);
}

/* --- FAQ --------------------------------------------------------------- */
.swell-block-faq {
	border-top: 1px solid var(--mishima-color-border-thin);
}

.swell-block-faq__item {
	border-bottom: 1px solid var(--mishima-color-border-thin);
	padding-block: var(--mishima-space-s);
}

.swell-block-faq__q {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-water-deep);
}

.swell-block-faq__a {
	font-size: var(--mishima-fz-base);
	line-height: var(--mishima-lh-loose);
	color: var(--mishima-color-text);
}

/* --- ステップ ---------------------------------------------------------- */
.swell-block-step {
	counter-reset: mishima-step;
}

.swell-block-step__item {
	padding: var(--mishima-space-m);
	border-left: 2px solid var(--mishima-color-water);
	margin-left: 1.2em;
	position: relative;
}

.swell-block-step__number {
	background: var(--mishima-color-water);
	color: var(--mishima-color-text-invert);
	font-family: var(--mishima-font-en);
	font-weight: 600;
	letter-spacing: var(--mishima-ls-wide);
}

.swell-block-step__title {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-text);
}

/* --- ふきだし --------------------------------------------------------- */
.c-balloon,
.swell-block-balloon {
	font-family: var(--mishima-font-jp);
}

.c-balloon__text,
.swell-block-balloon__text {
	background: var(--mishima-color-fuji-thin);
	border-radius: var(--mishima-radius-m);
}

/* --- キャプションボックス --------------------------------------------- */
.swell-block-capBox {
	border-radius: var(--mishima-radius-m);
	overflow: hidden;
	border: 1px solid var(--mishima-color-border);
	background: var(--mishima-color-bg);
}

.swell-block-capBox__label {
	background: var(--mishima-color-water);
	color: var(--mishima-color-text-invert);
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	letter-spacing: var(--mishima-ls-wide);
}

.swell-block-capBox__body {
	padding: var(--mishima-space-m);
}

/* --- タブ ------------------------------------------------------------- */
.swell-block-tab__label {
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	color: var(--mishima-color-text-sub);
	border-bottom: 2px solid transparent;
	transition: color var(--mishima-dur-base) var(--mishima-ease),
	            border-color var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-tab__label.is-active,
.swell-block-tab__label[aria-selected="true"] {
	color: var(--mishima-color-water-deep);
	border-bottom-color: var(--mishima-color-water);
}

/* --- リッチカラム ----------------------------------------------------- */
.swell-block-columns {
	gap: var(--mishima-space-m);
}

/* --- バナーリンク ----------------------------------------------------- */
.swell-block-bannerLink {
	border-radius: var(--mishima-radius-m);
	overflow: hidden;
	box-shadow: var(--mishima-shadow-s);
	transition: transform var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-bannerLink:hover {
	transform: translateY(-2px);
	box-shadow: var(--mishima-shadow-m);
}

/* --- アコーディオン --------------------------------------------------- */
.swell-block-accordion {
	border: 1px solid var(--mishima-color-border);
	border-radius: var(--mishima-radius-m);
	overflow: hidden;
}

.swell-block-accordion__title {
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	background: var(--mishima-color-bg);
	padding: var(--mishima-space-s) var(--mishima-space-m);
}

.swell-block-accordion__body {
	padding: var(--mishima-space-s) var(--mishima-space-m);
	background: var(--mishima-color-bg-alt);
}

/* --- 投稿リストブロック（.swell-block-postList の器） ----------------- */
.swell-block-postList {
	margin-block: var(--mishima-space-m);
}

/* --- リンクリスト ----------------------------------------------------- */
.swell-block-linkList ul {
	display: grid;
	gap: 0.6em;
}

.swell-block-linkList a {
	color: var(--mishima-color-water-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--mishima-color-water-thin);
	padding-block: 0.3em;
	transition: border-color var(--mishima-dur-base) var(--mishima-ease);
}

.swell-block-linkList a:hover {
	border-bottom-color: var(--mishima-color-water);
}

/* --- ブログパーツ ----------------------------------------------------- */
.swell-block-blogParts {
	margin-block: var(--mishima-space-m);
}

/* --- 商品レビュー ----------------------------------------------------- */
.swell-block-review {
	border: 1px solid var(--mishima-color-border);
	border-radius: var(--mishima-radius-m);
	padding: var(--mishima-space-m);
	background: var(--mishima-color-cream);
}