@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
*/

/****************************************
 非表示にするもの
*****************************************/

/* フッターメニューのボーダー */
.l-footer__nav a,
.l-footer__nav li:first-child a {
	border: none;
}

/* 記事下部のカテゴリー */
.p-articleFoot {
	display: none;
}

/* ヘッダー */
#header,
#fix_header {
	display: none;
}

/* サブタイトル */
.c-pageTitle__subTitle {
	display: none;
}

/* 各アイコンの非表示 */
.c-categoryList:before,
.icon-folder:before,
.c-tagList:before,
.widget_categories>ul>.cat-item>a::before {
	display: none;
}


/****************************************
 全体
*****************************************/

/* サムネイルの角丸を解除 */
.p-postList__thumb {
	border-radius: 0;
}

/* プロフィールの丸写真の表示位置を左に寄せる */
.p-authorBox .avatar,
.p-profileBox__iconImg {
	object-position: left;
}

/* トップページのメインコンテンツ上の余白を狭める */
.top #content {
		padding-top: 1em;
	}

/****************************************
 トップページメインビジュアル
*****************************************/
/* トップページのメインビジュアルの背景 */
#post_slider {
	/**
	 * 【等比縮小の基準】
	 * 設計原寸 1517 × 783px（メインビジュアルのスクショ.png）を基準とし、
	 * 600px までは MV 内の全パーツが同じ倍率で縮小する（＝ズームアウトと同じ見え方）。
	 * --mv-u は「設計上の 1px」に相当する単位。
	 * 1517px を超えると 1px で頭打ちになるため、それ以上は拡大せず原寸で止まる。
	 * ※ cqw は自分自身ではなく子孫側で解決されるため、#post_slider 自身では --mv-u を使わないこと。
	 */
	container-type: inline-size;
	--mv-u: min(1px, 0.06592vw);
	/* cqw 非対応環境向けフォールバック */
	--mv-u: min(1px, 0.06592cqw);
	/* 100cqw ÷ 1517 */

	/* カード間の余白も等比縮小させる（親テーマの原寸 8px を基準にする） */
	--ps_space: calc(8 * var(--mv-u));

	/**
	 * 高さは画面高さ基準（80vh）をやめ、設計原寸の縦横比から決める。
	 * width: 100% は必須。省略すると max-height が縦横比を通じて max-width に
	 * 転送され（CSS Sizing 4 の transferred size）、幅まで 1517px で止まって
	 * 右側に余白ができてしまう。
	 */
	width: 100%;
	aspect-ratio: 1517 / 783;
	max-height: 783px;

	background-image: url(https://fillman-create.com/media/wp-content/uploads/top-mv-bg-normal.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 記事スライダーの位置を下部に移動 */
.p-postSlider__inner {
	position: absolute;
	bottom: calc(31.3 * var(--mv-u));
	/* 原寸 783px の 4% */
	/* 重なり順: 背景 < 模様(mv-object):1 < コピー:2 < 人物:3 < 記事スライダー:4 */
	z-index: 4;
	/**
	 * スライダーは画面幅いっぱいのまま。
	 * 1517px を超えたときのサムネイルサイズの維持は、幅を制限するのではなく
	 * 表示枚数を増やすことで行う（assets/js/mv-slider.js を参照）。
	 */
	width: 100%;
}

/* 記事スライダーを画面幅いっぱいに広げる */
.p-postSlider__inner.l-container {
	max-width: unset;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* デコレーション用（人物＋キャッチコピーの配置枠） */
.p-postSlider__inner__deco {
	/* ::before（音符）の位置基準 */
	position: relative;
	width: 90%;
	/* 原寸 1517px の 90% */
	height: 100%;
	border-left: 1px solid var(--color_main);
	margin: 0 auto;
	/**
	 * 音符 1 つのサイズ（他パーツと同じ倍率で等比縮小する）。
	 * 上下の余白を狭くしつつ最後の音符を切らさないため、上限 30px に対して 28px を採用。
	 * 音符の間隔は自動的にこの 2 倍（原寸 56px。要望の「最大 64px」以内）になる。
	 */
	--mv-note-size: calc(28 * var(--mv-u));
	/**
	 * 画面端〜縦ラインまでの余白の幅。
	 * この要素は width:90% ＋ margin:auto なので、片側の余白は #post_slider の 5%。
	 * ::before の width は「この要素の幅」基準の % になるため 5 ÷ 90 で換算する。
	 * ※ 上の width を変えたら、ここの 5 と 90 も合わせて直すこと。
	 */
	--mv-note-gutter: calc(100% * 5 / 90);
	/**
	 * 音符を並べる範囲の上下の余白（上下同値・原寸 41.5px）。
	 * これは「最低限あける余白」で、実際の余白は後述の round() による切り下げ分だけ
	 * 広がることがある（上下均等に配分されるので左右のように偏ることはない）。
	 * PC 幅では 783 −（41.5 × 2）= 700 = 84px 周期 × 8 ＋ 音符 28px でちょうど収まる（音符 9 個）。
	 */
	--mv-note-pad: calc(41.5 * var(--mv-u));
}

/**
 * border-left の外側に並べる音符（mv-note.png）
 *
 * 背景画像のタイルは「絵柄と同じ大きさ」でしか敷けず、repeat-y だけでは隙間を作れない。
 * そこで音符サイズのピッチで敷き詰めた背景を、3 タイル分（= 音符サイズ × 3）を周期とする
 * マスクで 1 つおきに切り抜くことで、音符の間隔をあけている。
 * 間隔 = 音符サイズ × 2（原寸 56px。要望の「最大 64px」以内に収まる）。
 */
.p-postSlider__inner__deco::before {
	content: "";
	position: absolute;
	/* 上下に同じ値の余白をあける（height は指定せず top / bottom で決める） */
	top: var(--mv-note-pad);
	bottom: var(--mv-note-pad);
	/**
	 * 帯の右端をボーダー（1px）の外側に合わせ、幅を余白いっぱいに広げる。
	 * これで帯 = 画面端〜縦ラインの間そのものになり、
	 * background-position: top center により音符がその左右中央に並ぶ。
	 */
	right: calc(100% + 1px);
	width: var(--mv-note-gutter);
	background-image: url(https://fillman-create.com/media/wp-content/uploads/mv-note.png);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: var(--mv-note-size) var(--mv-note-size);
	-webkit-mask-image: repeating-linear-gradient(to bottom,
			#000 0 var(--mv-note-size),
			transparent var(--mv-note-size) calc(var(--mv-note-size) * 3));
	mask-image: repeating-linear-gradient(to bottom,
			#000 0 var(--mv-note-size),
			transparent var(--mv-note-size) calc(var(--mv-note-size) * 3));
	/* スライダーの操作を妨げないようにする */
	pointer-events: none;
}

/**
 * 表示範囲の高さを「周期 × n ＋ 音符 1 つ分」に切り下げ、
 * 一番下の音符が途中で見切れないようにする。
 * スマホ幅では #post_slider が 80vh（＝画面高さ依存の可変値）になり、
 * 高さが周期の整数倍にならないため、この切り下げがないと最後の音符が欠ける。
 * 切り下げで余った分は上下へ均等に配分したいので、上下中央配置にしている。
 * round() 非対応ブラウザでは上の top / bottom がそのまま使われる。
 */
@supports (height: round(down, 10px, 3px)) {
	.p-postSlider__inner__deco::before {
		top: 50%;
		bottom: auto;
		height: calc(round(down,
				100% - var(--mv-note-pad) * 2 - var(--mv-note-size),
				var(--mv-note-size) * 3) + var(--mv-note-size));
		transform: translateY(-50%);
	}
}

@media screen and (max-width: 600px) {
	.p-postSlider__inner__deco {
		width: 80%;
		/* スマホは等比縮小をやめているので、音符まわりも固定値にする（間隔は 40px） */
		--mv-note-size: 20px;
		/* 片側の余白は #post_slider の 10%。width:80% 基準に換算する */
		--mv-note-gutter: calc(100% * 10 / 80);
		--mv-note-pad: 24px;
	}
}

/**
 * メインビジュアルのビジュアル要素
 * parts/top/post_slider.php の .p-postSlider__inner__deco 内で出力
 */
.p-mvVisual {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(45.5 * var(--mv-u));
	/* 原寸 1517px の 3vw */
	height: 100%;
	/* 下部の記事スライダーと重ならないように上寄せする（原寸 978px の 30vh 相当） */
	padding-bottom: calc(364 * var(--mv-u));
	/* スライダーの操作を妨げないようにする */
	pointer-events: none;
}

.p-mvVisual__person,
.p-mvVisual__copy {
	/* 模様（#post_slider::after）より前面に置く */
	position: relative;
}

/* 人物はコピーより前面 */
.p-mvVisual__person {
	z-index: 3;
	flex: 0 0 auto;
	min-width: 0;
	width: calc(440 * var(--mv-u));
	/* 原寸 440px */
}

.p-mvVisual__copy {
	z-index: 2;
	flex: 0 0 auto;
	min-width: 0;
	width: calc(520 * var(--mv-u));
	/* 原寸 520px */
}

.p-mvVisual__personImg,
.p-mvVisual__copyImg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.p-mvVisual__personImg {
	object-position: bottom center;
}

.p-mvVisual__copyImg {
	object-position: left center;
}

/*
 * 959px 以下で比率を変える分岐は削除した。
 * 600px までは等比縮小でスクショ通りのレイアウトを維持する方針のため。
 */

/* スマホはキャッチコピーを上、人物を下に縦並び */
@media screen and (max-width: 600px) {

	/* 等比縮小を解除し、従来どおり画面高さ基準に戻す */
	#post_slider {
		aspect-ratio: auto;
		max-height: none;
		height: 80vh;
		--ps_space: 8px;
	}

	.p-postSlider__inner {
		bottom: 4%;
	}

	.p-mvVisual {
		flex-direction: column;
		justify-content: space-evenly;
		gap: 0;
		/* 記事スライダーに人物写真の裾が少し隠れる位置まで下げる */
		padding-bottom: clamp(48px, 28vh, 180px);
	}

	.p-mvVisual__copy {
		order: 1;
		flex: 0 0 auto;
		width: 90%;
		max-width: none;
	}

	.p-mvVisual__person {
		order: 2;
		flex: 0 1 auto;
		width: 74%;
		max-width: 320px;
		/* 上のコピー画像に重ねる（前後関係は .p-mvVisual__person の z-index に従う） */
		margin-top: clamp(-64px, -7vh, -24px);
	}
}

/* ページネーション */
.p-postSlider .swiper-pagination-bullet {
	background: var(--color_main);
	opacity: 0.7;
}

/* ページネーションのアクティブの色を濃く */
.p-postSlider .swiper-pagination-bullet.swiper-pagination-bullet-active {
	opacity: 1;
}

/* 模様 */
.p-mvVisual__person::after {
	content: "";
	position: absolute;
	/* 人物・コピー画像より1つ下のレイヤー（親テーマ .c-filterLayer:after の z-index:2 を上書き） */
	z-index: -1;
	width: calc(310 * var(--mv-u));
	/* 原寸 310px */
	height: calc(310 * var(--mv-u));
	/* 原寸 310px */
	aspect-ratio: 1 / 1;
	background-image: url("https://fillman-create.com/media/wp-content/uploads/mv-object.png");
	background-repeat: no-repeat;
	background-size: contain;
	top: -4%;
	left: -20%;
}

@media screen and (max-width: 600px) {
	.p-mvVisual__person::after {
		/* 等比縮小を解除して従来の指定に戻す */
		width: clamp(160px, 21vw, 310px);
		height: clamp(160px, 21vw, 310px);
	}
}

@media screen and (max-width: 600px) {
	
}

/****************************************
 カテゴリーリスト
*****************************************/

/**
 * parts/category_nav.php で出力。呼び出し元は2箇所:
 *   - トップページ … parts/top/post_slider.php（#post_slider の直後）
 *   - その他のページ … parts/breadcrumb.php（#breadcrumb の直前）
 *
 * 設計値（カテゴリーリスト.png の実測）:
 *   アイコン 22px 角 / アイコンとラベルの間 7px / ラベル 13px
 *   項目の左右パディング 19px / 項目の高さ 32px
 *   区切り線 1px・var(--color_main) を「項目と項目の間だけ」に引く
 */
.c-categoryNav {
	/* 1行に収まらない幅のときだけ横スクロールさせる（折り返すと区切り線が破綻するため） */
	overflow-x: auto;
	padding: 32px 16px;

	/* スクロールバーは隠す（区切り線のデザインを邪魔しないため） */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-categoryNav::-webkit-scrollbar {
	display: none;
}

.c-categoryNav__list {
	display: flex;
	flex-wrap: nowrap;

	/* 区切り線（li の border-left）を項目の高さいっぱいに伸ばす */
	align-items: stretch;

	/**
	 * justify-content: center だけだと、項目がはみ出して横スクロールになったとき
	 * はみ出し分を左右対称に扱おうとし、初期スクロール位置（0）で先頭の項目が
	 * 見切れてしまう（実機のSafari等で顕在化。例:「Canva活用」→「a活用」）。
	 * safe center は「収まらない場合は中央寄せをやめて先頭から表示する」という
	 * 安全側の指定。1行目は safe 未対応ブラウザ向けのフォールバック。
	 */
	justify-content: center;
	justify-content: safe center;

	/**
	 * min-width: 100% と width: fit-content の併用で
	 * 「収まるときは中央寄せ」「はみ出すときは左詰め＋横スクロール」を両立させる。
	 * 1行目は fit-content キーワード未対応のブラウザ向けのフォールバック。
	 */
	width: -webkit-fit-content;
	width: fit-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-categoryNav__item {
	flex: 0 0 auto;
	margin: 0;
}

/* 区切り線は項目の間だけ（先頭の左・末尾の右には引かない） */
.c-categoryNav__item+.c-categoryNav__item {
	border-left: 1px solid var(--color_main);
}

.c-categoryNav__link {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 0 19px;
	color: var(--color_text);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;

	/* ラベルは折り返さず1行で表示する */
	white-space: nowrap;
	transition: opacity 0.25s;
}

.c-categoryNav__link:hover {
	opacity: 0.6;
}

.c-categoryNav__icon {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* 狭い画面では余白と文字を詰めて、横スクロールの発生をできるだけ遅らせる */
@media screen and (max-width: 959px) {
	.c-categoryNav {
		padding: 24px 0;
	}

	.c-categoryNav__link {
		padding: 0 14px;
		font-size: 12px;
	}

	.c-categoryNav__icon {
		width: 20px;
		height: 20px;
	}
}

/**
 * トップページ以外（ロゴビジュアルの直後）での余白調整。
 * 上の .c-breadcrumbVisual が padding-bottom: 40px を持っているため、
 * リスト側の上パディングは打ち消してパンくずリストまでの間隔を詰める。
 * padding-top / padding-bottom だけを指定して、左右パディングは
 * 上の基本指定・メディアクエリ側の値をそのまま活かす。
 */
.c-breadcrumbVisual+.c-categoryNav {
	padding-top: 12px;
	padding-bottom: 24px;
}


/****************************************
 詳細ページのヘッダー
*****************************************/

/**
 * パンくずリスト上部のロゴビジュアル
 * parts/breadcrumb.php で出力
 */
.c-breadcrumbVisual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background-image: url('https://fillman-create.com/media/wp-content/uploads/top-mv-bg-normal.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
}

.c-breadcrumbVisual__logoLink {
	display: inline-block;
}

.c-breadcrumbVisual__logo {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
}


/****************************************
 パンくずリスト
*****************************************/

.p-breadcrumb__text .__home:before {
	color: var(--color_main);
}


/****************************************
 記事スライダー
*****************************************/
/* 上下のパディングを打ち消し */
.p-postSlider {
	padding: 0;
}

/* 記事タイトル・メタ情報は非表示にして、サムネイル画像だけのカードにする */
#post_slider .p-postList__body {
	display: none;
}

/* カテゴリーラベルも非表示にする */
#post_slider .c-postThumb__cat.icon-folder {
	display: none;
}


/* サムネとページネーションの間の余白 */
.p-postSlider__postList {
	margin-bottom: 12px !important;
}

/**
 * メインビジュアル内のスライダーも等比縮小の対象にする
 * （--mv-u の定義は「トップページメインビジュアル」セクションを参照）
 *
 * ただしカード1枚の幅は Swiper がインラインスタイルで直接指定するため CSS では
 * 制御できない。表示枚数（＝カード幅）の調整は assets/js/mv-slider.js が担当する。
 */
@media screen and (min-width: 601px) {
	#post_slider .p-postSlider__postList {
		margin-bottom: calc(12 * var(--mv-u)) !important;
		/* 原寸 12px */
	}

	#post_slider .swiper-pagination-bullet {
		width: calc(10 * var(--mv-u)) !important;
		/* 原寸 10px */
		height: calc(10 * var(--mv-u)) !important;
		margin: 0 calc(10 * var(--mv-u)) !important;
	}
}


/* ページネーション */
.p-postSlider .swiper-pagination-bullet {
	color: var(--hero-accent);
}

.swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	margin: 0 10px !important;
}


/****************************************
 フッター
*****************************************/

/* フッターのCSSをリセット */
.l-footer__foot,
.l-footer__foot .l-container {
	padding: 0;
	margin: 0;
	max-width: unset;
}


/* フッターのナビ */
.l-footer__nav {
	padding: 2em;
	background: #ffffff;
	color: #333333;
}


/* フッターのコピーライト */
.l-footer__foot .copyright {
	padding: 1em;
}


/****************************************
 サイドバー
*****************************************/

/* プロフィールの枠線 */
.p-profileBox {
	border: 1px solid var(--color_main);
	border-radius: 0;
	padding: 4px 4px 16px;
}


/*
 * スマホ・タブレットではサイドバーのプロフィールを非表示
 * 記事下に「この記事を書いた人」が表示されるため
 */
@media screen and (max-width: 959px) {
	#sidebar .widget_swell_prof_widget {
		display: none;
	}
}


/* プロフィールのデフォルトのインスタアイコンを非表示にする */
#sidebar .c-iconList__item.-pinterest .icon-pinterest::before,
.c-iconList__icon:before {
	content: none !important;
}


/* プロフィールのインスタアイコンを新しい画像にする */
#sidebar .c-iconList__item.-instagram .icon-instagram,
.c-iconList__icon.icon-instagram {
	display: inline-block;
	position: relative;
	top: -50%;
	left: -50%;
	width: 40px;
	height: 40px;
	background-image: url('https://fillman-create.com/media/wp-content/uploads/instagram-icon.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


/* プロフィールのVoicyアイコンを新しい画像にする */
#sidebar .c-iconList__item.-pinterest .icon-pinterest,
.c-iconList__icon.icon-pinterest {
	display: inline-block;
	position: relative;
	top: -50%;
	left: -50%;
	width: 40px;
	height: 40px;
	background-image: url('https://fillman-create.com/media/wp-content/uploads/voicy-icon.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


/* SNSアイコンリストのスキマをあける */
.c-iconList {
	gap: 32px;
}


/* サイドバーのカテゴリ一覧を横並びにする */
.c-widget.c-listMenu.widget_categories ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}


/* サイドバーのリストをボタン風にする */
#sidebar .c-listMenu a {
	border: none;
	padding: 6px 24px;
	background: #F4EFEF;
	border-radius: 1000px;
}


/****************************************
 この記事を書いた人
*****************************************/

/* この記事を書いた人の枠線 */
.p-authorBox {
	border: 1px solid var(--color_main);
	border-radius: 0;
}

@media screen and (max-width: 600px) {
	.p-authorBox {
		padding-bottom: 24px;
	}
}


/* この記事を書いた人の肩書 */
.p-authorBox__position {
	font-style: normal;
	font-size: 10px !important;
}


/* この記事を書いた人の紹介文 */
.p-authorBox__r {
	text-align: left;
}


/* インスタアイコンの枠線を非表示 */
.is-style-circle .c-iconList__link {
	border: none;
}


/* インスタアイコンのホバーアニメーションを非表示 */
.hov-flash-up:hover {
	box-shadow: none;
}


/* 名前の文字太さ調整 */
.p-authorBox__name {
	font-weight: 500;
}


/****************************************
 個別の記事
*****************************************/

.p-articleThumb__img {
	border-radius: 0;
}


/****************************************
 記事内テーブル
*****************************************/

@media screen and (max-width: 767px) {

	/* 列幅均等を解除し、文章の列に幅を割り当てる */
	.post_content table,
	.post_content table.has-fixed-layout {
		table-layout: auto;
	}

	/* 万一はみ出す場合は表だけ横スクロールさせる */
	.post_content .wp-block-table {
		overflow-x: auto;
	}
}