@charset "UTF-8";
/*
 * 秀峰祭 Instagram 風カード / 企画紹介レイアウト
 *
 * カードの寸法・色・影は index.html に貼られた Instagram 公式埋め込みコードの
 * style 属性からそのまま写している（コメントに元の値を併記）。
 * Lightning のテーマ CSS に負けないよう、値はすべてこのファイル内で完結させる。
 */

/* =========================================================
 * 1. Instagram 風カード
 * =======================================================*/

/* 元: background:#FFF; border-radius:3px; margin:1px;
 *     max-width:540px; min-width:326px; padding:0;
 *     width:99.375%; width:calc(100% - 2px);
 *
 * 影は付けない。index.html の blockquote には box-shadow が入っているが、
 * あれは読み込み前プレースホルダの装飾で、実際に描画される埋め込み iframe は
 * 影なしの 1px solid #dbdbdb。こちらに合わせている。 */
.sfic {
	/* ここを書き換えれば配色をまとめて変更できる */
	--sfic-bg: #fff;
	--sfic-text: #262626;
	--sfic-link: #3897f0;  /* 元: 「この投稿をInstagramで見る」の色 */
	--sfic-like: #ed4956;
	--sfic-radius: 3px;
	--sfic-pad: 16px;
	--sfic-border: #dbdbdb;
	/* 既定は置いた場所いっぱい。width 属性（例 width="540px"）で細くできる */
	--sfic-max: 100%;
	--sfic-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", Meiryo, Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	display: block;
	background: var(--sfic-bg);
	border: 1px solid var(--sfic-border);
	border-radius: var(--sfic-radius);
	margin: 1px auto;
	max-width: var(--sfic-max);
	/* 元は min-width:326px。狭い画面ではみ出さないよう上限を 100% にしている */
	min-width: min(326px, 100%);
	padding: 0;
	width: calc(100% - 2px);
	font-family: var(--sfic-font);
	font-size: 14px;
	line-height: 18px;
	color: var(--sfic-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.sfic *,
.sfic *::before,
.sfic *::after {
	box-sizing: border-box;
}

/* Lightning 側の a / p / figure / button スタイルを打ち消す */
.sfic a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.sfic a:hover,
.sfic a:focus {
	color: inherit;
	text-decoration: none;
}

.sfic p,
.sfic figure {
	margin: 0;
	padding: 0;
}

.sfic button {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* 元: <div style="padding:16px;"> — カード内側の余白 */
.sfic__inner {
	padding: var(--sfic-pad);
}

/* PDF デザイン準拠のフラット版（枠線なし・薄いグレー地） */
.sfic--flat {
	--sfic-bg: #f1f1f1;
	--sfic-border: transparent;
	--sfic-radius: 0;
}

/* --- ヘッダー（アイコン + アカウント名 + …） --- */
/* 元: display:flex; flex-direction:row; align-items:center; */
.sfic__header {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 元: height:40px; width:40px; margin-right:14px; border-radius:50%; */
.sfic__avatar {
	flex-grow: 0;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-right: 14px;
	padding: 2px;
	border-radius: 50%;
	/* Instagram のプロフィールリング */
	background: radial-gradient(
		circle at 30% 107%,
		#fdf497 0%,
		#fdf497 5%,
		#fd5949 45%,
		#d6249f 60%,
		#285aeb 90%
	);
}

/* リングなしにしたいとき */
.sfic--noring .sfic__avatar {
	padding: 0;
	background: #f4f4f4;
}

.sfic__avatar-inner {
	width: 100%;
	height: 100%;
	border: 2px solid var(--sfic-bg);
	border-radius: 50%;
	background: #f4f4f4;
	overflow: hidden;
}

.sfic--noring .sfic__avatar-inner {
	border: 0;
}

.sfic__avatar-inner img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

/* 元: display:flex; flex-direction:column; flex-grow:1; justify-content:center; */
.sfic__names {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	min-width: 0;
}

/* link 指定時はアカウント名が <a> で包まれる */
.sfic__names > a {
	min-width: 0;
}

/* 元: .Username > .UsernameText（+ 認証済みバッジ） */
.sfic__user {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: var(--sfic-text);
	min-width: 0;
}

.sfic__user-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 元: .VerifiedSprite */
.sfic__verified {
	flex: 0 0 auto;
	line-height: 0;
}

.sfic__verified svg {
	display: block;
	width: 12px;
	height: 12px;
}

.sfic__verified-star {
	fill: #0095f6;
}

.sfic__verified-check {
	fill: #fff;
}

.sfic__place {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	line-height: 16px;
	color: var(--sfic-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfic__more {
	flex: 0 0 auto;
	margin-left: 8px;
	color: var(--sfic-text);
	line-height: 0;
}

.sfic__more svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* --- 画像 --- */
/* 元: <div class="Content EmbedFrame" style="padding-bottom:133.16993464052%">
 *     本物の埋め込みは 1 枚目の画像の実寸から比率を出して padding-bottom に入れている。
 *     高さは PHP 側がインラインの padding-bottom で指定する（既定は 100% = 正方形）。 */
/* 既定（ratio="natural"）：高さを固定せず、画像の大きさなりに伸び縮みする。
 * 縦横比が分からない画像でも、どんな寸法でもそのまま収まる。 */
.sfic__media {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 14px;
	background: #f4f4f4;
	overflow: hidden;
	line-height: 0;
}

.sfic__media > a {
	display: block;
}

.sfic__media > img,
.sfic__media > a > img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ratio を指定したとき：padding-bottom で高さを固定する（本物の埋め込みと同じ方式）。
 * 高さのパーセントは PHP がインラインで書き込む。
 * 1:1 = 100% / 4:5 = 125% / 1.91:1 = 52.35602% */
.sfic__media--fixed {
	height: 0;
}

.sfic__media--fixed > a,
.sfic__media--fixed > img,
.sfic__media--fixed > a > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.sfic__media--fixed > img,
.sfic__media--fixed > a > img {
	object-fit: cover;
}

/* 画像未指定時のプレースホルダ（PDF の「画像」枠） */
.sfic__media--empty {
	background: #fff;
	border: 1px solid #d9d9d9;
}

.sfic__media--empty span {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #767676;
	font-size: 16px;
	line-height: 1.4;
}

/* --- 複数画像（カルーセル） ---
 * 本物の埋め込み（GraphSidecar）は translateX のトラックで、
 * 各スライドがフレーム幅ちょうど（例 width:540px）になっている。
 * ここでは同じ見た目のまま、スマホのスワイプが素直に効くよう scroll-snap で組んでいる。 */
.sfic__track {
	display: flex;
	flex-direction: row;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.sfic__track::-webkit-scrollbar {
	display: none;
}

/* 高さ自由（既定）：スライドは一番背の高い画像に合わせて伸び、
 * それより低い画像は上下中央に置かれる。どの画像も切られない。 */
.sfic__slide {
	display: flex;
	flex: 0 0 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	background: #f4f4f4;
}

.sfic__slide > a {
	display: block;
	width: 100%;
}

.sfic__slide img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* 高さ固定モードのカルーセル */
.sfic__media--fixed .sfic__track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.sfic__media--fixed .sfic__slide,
.sfic__media--fixed .sfic__slide > a,
.sfic__media--fixed .sfic__slide img {
	height: 100%;
}

.sfic__media--fixed .sfic__slide img {
	object-fit: cover;
}

/* fit="contain"：高さ固定モードで、比率の違う画像を切らずに収める */
.sfic--contain .sfic__media--fixed img {
	object-fit: contain;
}

/* 左右の送りボタン（ドットと同じ理由でセレクタを .sfic から書き始める） */
.sfic .sfic__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #262626;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.15s ease;
	line-height: 0;
}

.sfic__media:hover .sfic__nav,
.sfic__nav:focus-visible {
	opacity: 1;
}

/* タッチ端末はスワイプで操作するのでボタンを隠す */
@media (hover: none) {
	.sfic .sfic__nav {
		display: none;
	}
}

.sfic__nav[hidden],
.sfic__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

.sfic__nav--prev {
	left: 8px;
}

.sfic__nav--next {
	right: 8px;
}

.sfic__nav svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 右上の「1/3」バッジ */
.sfic__counter {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.2px;
	pointer-events: none;
}

/* 画像下のドット */
.sfic__dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 0 0;
}

/*
 * 表示中の画像だけ青、それ以外はグレー（本物の埋め込みと同じ）。
 *
 * セレクタを .sfic で始めているのは詳細度のため。
 * 上の方にある .sfic button { background: none } が (0,1,1) で、
 * .sfic__dot 単体 (0,1,0) より強く、グレーが打ち消されてしまう。
 */
.sfic .sfic__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a8a8a8;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sfic .sfic__dot[aria-current="true"] {
	background: var(--sfic-link);
}

/* --- アクションアイコン --- */
/* 元: display:flex; flex-direction:row; align-items:center; margin-bottom:14px; */
.sfic__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 14px;
	margin-bottom: 14px;
}

/* コメント・シェア・保存は線画（stroke-width:2 は Instagram と同じ） */
.sfic__actions svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.sfic__action {
	margin-right: 16px;
	line-height: 0;
	color: var(--sfic-text);
}

/*
 * ハートだけはパス自体が輪郭の形をしているので、線ではなく塗りで描く。
 * Instagram の実アイコンと同じ作り。
 */
.sfic__action--like svg {
	fill: currentColor;
	stroke: none;
}

/* like="filled" のとき（デザイン PDF の赤いハート） */
.sfic__action--like.is-liked svg {
	fill: var(--sfic-like);
}

/* 保存だけ右端。元の埋め込みと同じ配置 */
.sfic__action--save {
	margin-left: auto;
	margin-right: 0;
}

/* --- ハッシュタグ・いいね・日付 --- */
.sfic__likes {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
}

/*
 * ハッシュタグは見た目だけの飾り。リンクにはせず、
 * カーソルもテキスト選択も反応しないようにしておく。
 */
.sfic__tags {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sfic-link);
	word-break: break-word;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.sfic__date {
	margin-top: 8px;
	font-size: 12px;
	line-height: 16px;
	color: #8e8e8e;
	letter-spacing: 0.2px;
}

/* =========================================================
 * 2. 企画紹介ページ レイアウト（PDF 準拠）
 * =======================================================*/
.sf-kikaku {
	--sf-gap: 32px;

	box-sizing: border-box;
	display: grid;
	/* PDF 実測の左 35% : 右 65% */
	grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
	gap: var(--sf-gap);
	align-items: start;
	margin: 32px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", Meiryo, Roboto, Helvetica, Arial, sans-serif;
}

.sf-kikaku *,
.sf-kikaku *::before,
.sf-kikaku *::after {
	box-sizing: border-box;
}

/* タブレット以下は 1 カラム */
@media (max-width: 991px) {
	.sf-kikaku {
		grid-template-columns: minmax(0, 1fr);
		--sf-gap: 24px;
	}
}

/* 見出し（Lightning のページタイトルを使う場合は title 属性を省略） */
.sf-kikaku__title {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	padding: 0 0 12px;
	border-bottom: 1px solid #b5b5b5;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: #222;
}

.sf-kikaku__body {
	display: flex;
	flex-direction: column;
	gap: var(--sf-gap);
	min-width: 0;
}

/* 説明側のパネル。カードと地の色を変えて見分けやすくする（.sf-panel と同じ設計） */
.sf-kikaku__catch,
.sf-kikaku__desc {
	width: 100%;
	background: #f4f4f4;
	border: 0;
	border-radius: 3px;
	padding: 32px;
	color: #262626;
}

/* キャッチコピーは白い箱の中に中央寄せ（PDF どおり。.sf-catch と同じ設計） */
.sf-kikaku__catch-inner {
	background: #fff;
	padding: 32px 24px;
	text-align: center;
	font-size: clamp(19px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.1em;
	/* letter-spacing の分だけ右にずれるのを補正 */
	text-indent: 0.1em;
	color: #222;
	word-break: break-word;
	overflow-wrap: break-word;
	line-break: strict;
}

/* 本文。文字は左寄せ、塊はパネル中央 */
.sf-kikaku__desc {
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: 0.08em;
	text-align: left;
	color: #222;
}

.sf-kikaku__desc > * {
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.sf-kikaku__desc > *:first-child {
	margin-top: 0;
}

.sf-kikaku__desc > *:last-child {
	margin-bottom: 0;
}

.sf-kikaku__desc p {
	margin: 0 0 1.4em;
}

@media (max-width: 575px) {
	.sf-kikaku__catch,
	.sf-kikaku__desc {
		padding: 16px;
	}

	.sf-kikaku__catch-inner {
		padding: 20px 12px;
		line-height: 1.6;
		letter-spacing: 0.06em;
		text-indent: 0.06em;
	}

	.sf-kikaku__desc {
		font-size: 15px;
		line-height: 2;
	}
}

/* =========================================================
 * 3. ブロックパターン用のクラス
 *
 * 「秀峰祭 企画紹介」パターンが使う。中身は普通のカラム／グループ／段落ブロックなので、
 * 文字はいつも通りエディタで打てる。見た目だけをここで受け持つ。
 * 色や余白を変えたいときはこのセクションを直せば全ページに反映される。
 * =======================================================*/
.sf-kikaku-pattern {
	--sf-gap: 32px;
}

/* 左右カラムの間隔と、カラム内でブロックを積むときの間隔 */
.sf-kikaku-pattern.wp-block-columns {
	gap: var(--sf-gap);
	align-items: flex-start;
	margin-bottom: var(--sf-gap);
}

/*
 * Lightning は「幅広」ブロックにも独自の上限を掛けてくるので、それを外して
 * 本文エリア（サイドバーの内側）を左右いっぱいに使わせる。
 */
.sf-kikaku-pattern.wp-block-columns,
.sf-kikaku-pattern.wp-block-columns.alignwide,
.sf-kikaku-pattern.wp-block-columns.alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Lightning の本文列を全幅に戻す。
 *
 * Lightning は本文列に .mainSection-col-two を付けて 2 カラム用の幅（約 2/3）に固定する。
 * サイドバーのウィジェットが空だと <!-- [ /.subSection ] --> というコメントだけが残り、
 * 実体は出力されないのに本文だけ 2/3 のまま＝右側が白く空く、という状態になる。
 *
 * このレイアウトを置いたページに限って、その幅指定を打ち消す。
 * :has() 未対応の古いブラウザでは何も起きない（今までどおり 2/3 幅）だけなので安全。
 */
body:has(.sf-kikaku-pattern) .mainSection-col-two,
body:has(.sf-kikaku) .mainSection-col-two,
body:has(.sf-kikaku-pattern) .mainSection,
body:has(.sf-kikaku) .mainSection {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}


/* 992px 以下は 1 カラムに落とす（カード上・テキスト下） */
@media (max-width: 991px) {
	.sf-kikaku-pattern.wp-block-columns {
		--sf-gap: 24px;
		flex-wrap: wrap;
	}

	.sf-kikaku-pattern.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.sf-kikaku-pattern .wp-block-column > * + * {
	margin-top: var(--sf-gap);
}

/*
 * 左カラムのカードには何も上書きしない。
 * 単体で置いた [sf_insta_card] とまったく同じ寸法・余白で描画される。
 */

/*
 * キャッチコピー／本文のパネル。
 * Instagram カード（.sfic）とまったく同じ外装にして、ページ全体の見た目を揃える。
 * 値の出どころは index.html の埋め込みコードの style 属性。
 */
/*
 * 説明側のパネル。
 * カード（白地＋1px 枠線）と地の色を変えて、Instagram の投稿と説明文が
 * ひと目で別物だと分かるようにする。デザイン PDF のグレーパネルと同じ考え方。
 */
.sf-panel {
	width: 100%;
	background: #f4f4f4;
	border: 0;
	border-radius: 3px;
	padding: 32px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", Meiryo, Roboto, Helvetica, Arial, sans-serif;
	color: #262626;
	-webkit-font-smoothing: antialiased;
}

/*
 * キャッチコピー（見出し）。デザイン PDF どおり、
 * グレーのパネルの中に「白い箱」を置いて、その中に中央寄せで組む。
 *
 * 上限 32px。大きさを変えたいときはこの値をいじる。
 */
.sf-catch {
	margin: 0;
	background: #fff;
	padding: 32px 24px;
	text-align: center;
	font-size: clamp(19px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.75;
	/* PDF の広い字間。読みやすさとのバランスで 0.1em */
	letter-spacing: 0.1em;
	/* letter-spacing の分だけ右にずれるのを補正 */
	text-indent: 0.1em;
	color: #222;
	word-break: break-word;
	overflow-wrap: break-word;
	/* 行頭・行末の禁則を効かせて不自然な折り返しを避ける */
	line-break: strict;
}

/*
 * 本文。PDF と同じく、行間・字間をゆったり取った読み物の組み方。
 * 文字そのものは左寄せ（日本語の長文は左揃えが読みやすい）で、
 * 塊はパネルの中央に置く。
 */
.sf-desc {
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: 0.08em;
	text-align: left;
	color: #222;
}

.sf-desc > * {
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.sf-desc > *:first-child {
	margin-top: 0;
}

.sf-desc > *:last-child {
	margin-bottom: 0;
}

.sf-desc p {
	margin-bottom: 1.4em;
}

@media (max-width: 575px) {
	.sf-panel {
		padding: 16px;
	}

	.sf-catch {
		padding: 20px 12px;
		line-height: 1.6;
		letter-spacing: 0.06em;
		text-indent: 0.06em;
	}

	.sf-desc {
		font-size: 15px;
		line-height: 2;
	}
}

/* =========================================================
 * 4. カードを並べる一覧用グリッド
 * =======================================================*/
.sf-ig-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.sf-ig-grid .sfic {
	max-width: none;
	min-width: 0;
	width: 100%;
	margin: 0;
}