/**
 * OpenCampus リニューアル用 UI（ocn_ プレフィックス）
 * OPENCAMPUS_RENEWAL_RULES.md に準拠
 *
 * Figma: 2603_京都聖カタリナ_オープンキャンパスページ / node-id=1-123
 * ※トークンは Dev Mode の値で上書きしてください。
 */

/* ===== カラーパレット（Figma node 30-601） ===== */

:root {
	--ocn-blue:         #0075c2;
	--ocn-blue-light:   #e9f8fe;
	--ocn-blue-mid:     #94c6da;  /* タブパネル枠線など中間トーン */
	--ocn-yellow:       #ffd900;
	--ocn-yellow-light: #fff99f;
	--ocn-green:        #00913a;
	--ocn-green-light:  #def0a8;
	--ocn-red:          #ea5550;
	--ocn-red-light:    #f8d9d1;
	--ocn-text:         #1a1311;
	--ocn-white:        #ffffff;
}

/* ===== コンポーネント変数 ===== */

:root {
	--ocn-sh-title-color: var(--ocn-blue);
	--ocn-sh-eyebrow-color: var(--ocn-blue-light);
	--ocn-sh-line-color: var(--ocn-blue);
	--ocn-sh-eyebrow-size-pc: 180px;
	--ocn-sh-eyebrow-size-sp: 80px;
	--ocn-sh-eyebrow-opacity: 0.7;
	--ocn-sh-eyebrow-offset-pc: -60px;
	--ocn-sh-eyebrow-offset-sp: -24px;
	--ocn-sh-title-size-pc: 40px;
	--ocn-sh-title-size-sp: 28px;
	--ocn-sh-line-width: 150px;
	--ocn-sh-gap: 0px;
}

/* ----- 既存パーツ指定 ----- */
.sub_parts,
#sp_bnr,
#pageTop{
	display:none!important;
}
.accordion {
	margin-bottom: 0;
}

/* ----- セクション見出し（Figma node 1-123） ----- */

.ocn_section_heading {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ocn-sh-gap);
	margin: 0;
	text-align: center;
}

.ocn_section_heading__eyebrow {
	position: absolute;
	top: var(--ocn-sh-eyebrow-offset-pc);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: "century-gothic", "m-plus-1p", sans-serif;
	font-weight: 400;
	font-size: clamp(var(--ocn-sh-eyebrow-size-sp), 14vw, var(--ocn-sh-eyebrow-size-pc));
	line-height: 1;
	color: var(--ocn-sh-eyebrow-color);
	opacity: var(--ocn-sh-eyebrow-opacity);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
}

.ocn_section_heading__title {
	position: relative;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: var(--ocn-sh-title-size-pc);
	line-height: 1.35;
	color: var(--ocn-sh-title-color);
	z-index: 1;
}

.ocn_section_heading__line {
	display: block;
	width: var(--ocn-sh-line-width);
	height: 1px;
	background-color: var(--ocn-sh-line-color);
	border: 0;
	margin: 0;
	position: relative;
}

/*
 * 薄い色（#e9f8fe 等）のセクション背景向けデフォルトの英字色が溶けるとき、
 * 親に付与: #ffffff + 透明度 70%（Figma の白 70% 表現と同等）
 */
.ocn_section_heading.ocn_section_heading--eyebrow_white {
	--ocn-sh-eyebrow-color: #ffffff;
	--ocn-sh-eyebrow-opacity: 0.7;
}

@media screen and (max-width: 767px) {
	.ocn_section_heading__eyebrow {
		top: var(--ocn-sh-eyebrow-offset-sp);
		font-size: var(--ocn-sh-eyebrow-size-sp);
	}

	.ocn_section_heading__title {
		font-size: var(--ocn-sh-title-size-sp);
	}
}

/* ----- セクション見出し ABOUT 型（Figma node 1-215） ----- */

/*
 * タイトル（複数行可）＋本文 のブロック型セクション見出し。
 * eyebrow の大型英字は白 70% のため、色付き／画像の背景セクション上で使う想定。
 * 白背景ページ上で使う場合は --ocn-intro-eyebrow-color を書き換えること（例: #e9f8fe）。
 */

:root {
	--ocn-intro-title-color: var(--ocn-blue);
	--ocn-intro-body-color: var(--ocn-text);
	--ocn-intro-eyebrow-color: var(--ocn-white);
	--ocn-intro-eyebrow-opacity: 0.7;
	--ocn-intro-eyebrow-size-pc: 180px;
	--ocn-intro-eyebrow-size-sp: 80px;
	--ocn-intro-eyebrow-offset-top-pc: -60px;
	--ocn-intro-eyebrow-offset-left-pc: -40px;
	--ocn-intro-eyebrow-offset-top-sp: -24px;
	--ocn-intro-eyebrow-offset-left-sp: 0;
	--ocn-intro-title-size-pc: 40px;
	--ocn-intro-title-size-sp: 22px;
	--ocn-intro-title-lh: 1.7;
	--ocn-intro-body-size-pc: 18px;
	--ocn-intro-body-size-sp: 15px;
	--ocn-intro-body-lh: 2;
	--ocn-intro-gap: 20px;
}

.ocn_section_intro {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ocn-intro-gap);
}

.ocn_section_intro__eyebrow {
	position: absolute;
	top: var(--ocn-intro-eyebrow-offset-top-pc);
	left: var(--ocn-intro-eyebrow-offset-left-pc);
	margin: 0;
	font-family: "Century Gothic Pro", "Century Gothic", "CenturyGothic", "Avenir", "Helvetica Neue", sans-serif;
	font-weight: 400;
	font-size: var(--ocn-intro-eyebrow-size-pc);
	line-height: 1;
	color: var(--ocn-intro-eyebrow-color);
	opacity: var(--ocn-intro-eyebrow-opacity);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
}

.ocn_section_intro__title {
	position: relative;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: var(--ocn-intro-title-size-pc);
	line-height: var(--ocn-intro-title-lh);
	color: var(--ocn-intro-title-color);
	z-index: 1;
}

.ocn_section_intro__body {
	position: relative;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: var(--ocn-intro-body-size-pc);
	line-height: var(--ocn-intro-body-lh);
	color: var(--ocn-intro-body-color);
	z-index: 1;
}

@media screen and (max-width: 767px) {
	.ocn_section_intro {
		max-width: 400px;
		margin-inline: auto;
	}
	.ocn_section_intro__eyebrow {
		top: var(--ocn-intro-eyebrow-offset-top-sp);
		left: var(--ocn-intro-eyebrow-offset-left-sp);
		font-size: var(--ocn-intro-eyebrow-size-sp);
	}

	.ocn_section_intro__title {
		font-size: var(--ocn-intro-title-size-sp);
	}

	.ocn_section_intro__body {
		font-size: var(--ocn-intro-body-size-sp);
	}
}

/* ----- ボタン（Figma node 1-138） ----- */

:root {
	--ocn-btn-bg: var(--ocn-blue);
	--ocn-btn-color: var(--ocn-white);
	--ocn-btn-radius: 40px;
	--ocn-btn-padding-pc: 20px;
	--ocn-btn-padding-sp: 10px 20px;
	--ocn-btn-gap-pc: 60px;
	--ocn-btn-icon-size: 36px;
	--ocn-btn-font-size-pc: 25px;
	--ocn-btn-font-size-sp: 20px;
	--ocn-btn-max-width-sp: 380px;
	--ocn-btn-wrap-mt-pc: 60px;
	--ocn-btn-wrap-mt-sp: 40px;
}

/*
 * セクション内CTA用ラッパー（上余白のみ）。
 * 一覧: page-component.php「汎用クラス一覧」→ 3. CTA ボタンラッパー
 * 横位置: 汎用 `.ocn_ta_left` / `.ocn_ta_center` / `.ocn_ta_right` を併用する。
 * 子が width:100%（block）のときは text-align では揃わないため `.ocn_btn_wrap--items-center` 等を使う。
 */
.ocn_btn_wrap {
	margin-top: var(--ocn-btn-wrap-mt-pc);
}

.ocn_btn_wrap--items-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ocn_btn_wrap--items-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ocn_btn_wrap--items-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

@media screen and (max-width: 767px) {
	.ocn_btn_wrap {
		margin-top: var(--ocn-btn-wrap-mt-sp);
	}
}

/*
 * ----- 汎用 text-align（テキスト・ラッパー・ocn_btn_wrap と併用可） -----
 * 一覧: page-component.php「汎用クラス一覧」→ 2. テキスト配置
 */

.ocn_ta_left {
	text-align: left;
}

.ocn_ta_center {
	text-align: center;
}

.ocn_ta_right {
	text-align: right;
}

/* ----- 本文テキスト ----- */

.ocn_text {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--ocn-text);
}

.ocn_text_sm {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ocn-text);
}

.ocn_text_sm--medium {
	font-weight: 500;
}

.ocn_fixed_br {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 15;
}

@media screen and (max-width: 767px) {
	.ocn_text {
		font-size: 16px;
	}
}

/* 1080px以下で改行を挿入するユーティリティ */
.ocn_br_md {
	display: none;
}

/* 767px以下（SP）のみ改行を有効化するユーティリティ */
.ocn_br_sp {
	display: none;
}

@media screen and (max-width: 767px) {
	.ocn_br_sp {
		display: block;
	}
}

@media screen and (max-width: 1080px) {
	.ocn_br_md {
		display: block;
	}
}

.ocn_btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ocn-btn-gap-pc);
	padding: var(--ocn-btn-padding-pc);
	background-color: var(--ocn-btn-bg);
	color: var(--ocn-btn-color);
	border: 2px solid var(--ocn-btn-bg);
	border-radius: var(--ocn-btn-radius);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: var(--ocn-btn-font-size-pc);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	max-width: 100%;
}

.ocn_btn:hover,
.ocn_btn:focus-visible {
	background-color: var(--ocn-btn-color);
	color: var(--ocn-btn-bg);
	border-color: var(--ocn-btn-bg);
}

.ocn_btn:focus-visible {
	outline: 2px solid var(--ocn-btn-bg);
	outline-offset: 3px;
}

.ocn_btn__spacer,
.ocn_btn__icon {
	flex-shrink: 0;
	width: var(--ocn-btn-icon-size);
	height: var(--ocn-btn-icon-size);
}

.ocn_btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ocn_btn__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ocn_btn__icon svg circle,
.ocn_btn__icon svg path {
	transition: fill 0.2s ease, stroke 0.2s ease;
}

.ocn_btn:hover .ocn_btn__icon svg circle,
.ocn_btn:focus-visible .ocn_btn__icon svg circle {
	fill: var(--ocn-btn-bg);
}

.ocn_btn:hover .ocn_btn__icon svg path,
.ocn_btn:focus-visible .ocn_btn__icon svg path {
	stroke: var(--ocn-btn-color);
}

.ocn_btn__label {
	flex-shrink: 1;
	min-width: 0;
	white-space: nowrap;
}

@media screen and (max-width: 767px) {
	.ocn_btn {
		gap: 0;
		justify-content: space-between;
		padding: var(--ocn-btn-padding-sp);
		font-size: var(--ocn-btn-font-size-sp);
		width: 100%;
		max-width: var(--ocn-btn-max-width-sp);
	}
}

/* ----- イベント日付カード（Figma node 1-130） ----- */

:root {
	--ocn-event-size: 240px;
	--ocn-event-bg: var(--ocn-blue-light);
	--ocn-event-border: var(--ocn-blue);
	--ocn-event-border-width: 3px;
	--ocn-event-radius: 15px;
	--ocn-event-text: var(--ocn-text);
	--ocn-event-accent: var(--ocn-blue);
	--ocn-event-gap: 12.5px;
	--ocn-event-ended-bg: rgba(26, 19, 17, 0.6);
}

.ocn_event_list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ocn-event-gap);
	max-width: 1000px;
	margin-inline: auto;
}

.ocn_event_card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: var(--ocn-event-size);
	height: auto;
	padding: 30px 20px;
	background-color: var(--ocn-event-bg);
	border: var(--ocn-event-border-width) solid var(--ocn-event-border);
	border-radius: var(--ocn-event-radius);
	overflow: hidden;
}

.ocn_event_card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.ocn_event_card__badge {
	display: inline-block;
	min-width: 181px;
	padding: 3px 8px;
	background-color: var(--ocn-event-accent);
	border-radius: 5px;
	color: var(--ocn-white);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
}

.ocn_event_card--nyushi .ocn_event_card__badge {
	background-color: var(--ocn-yellow);
	color: var(--ocn-blue);
}

.ocn_event_card__date {
	margin: 0;
	width: 100%;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--ocn-event-border);
	color: var(--ocn-event-text);
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
}

.ocn_event_card__date-num {
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
}

.ocn_event_card__date-day {
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}

.ocn_event_card__time {
	margin: 0;
	padding-top: 6px;
	padding-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--ocn-event-text);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}

.ocn_event_card__time-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: block;
}

.ocn_event_card__note {
	margin: 0;
	color: var(--ocn-event-text);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
}

.ocn_event_card__ended {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ocn-event-ended-bg);
	color: var(--ocn-white);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	padding-bottom: 8px;
}

@media screen and (max-width: 1080px) {
	:root {
		--ocn-event-size: calc((100% - var(--ocn-event-gap) * 2) / 3);
	}
	.ocn_event_list {
		max-width: 720px;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-event-size: calc((100% - 20px) / 2);
		--ocn-event-gap: 20px;
	}

	.ocn_event_list {
		justify-content: space-between;
		max-width: 480px;
	}

	.ocn_event_card {
		height: auto;
		padding: 16px 12px;
	}

	.ocn_event_card__badge    { min-width: 162px; font-size: 12px; }
	.ocn_event_card__date-num { font-size: 32px; }
	.ocn_event_card__date-day { font-size: 20px; }
	.ocn_event_card__time     { font-size: 20px; }
	.ocn_event_card__note     { font-size: 14px; }
	.ocn_event_card__ended    { font-size: 20px; }
}

@media screen and (max-width: 540px) {
	:root {
		--ocn-event-size: calc(50% - 10px);
	}
}

/* ----- 次回イベントカード（Figma node 1-161） ----- */

:root {
	--ocn-next-bg: var(--ocn-yellow);
	--ocn-next-border: var(--ocn-blue);
	--ocn-next-border-width: 3px;
	--ocn-next-radius: 15px;
	--ocn-next-text: var(--ocn-text);
	--ocn-next-accent: var(--ocn-blue);
	--ocn-next-padding-pc: 30px 60px;
	--ocn-next-padding-sp: 24px 30px;
	--ocn-next-row-width-pc: 319px;
	--ocn-next-max-width: 760px;
}

/*
 * 下のブロックとの余白はコンポーネント内に固定で入れず、ページ側で
 * 汎用 .ocn_mb_* を併用する（例: class="ocn_next_event ocn_mb_64"）。
 */
.ocn_next_event {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ocn-next-max-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: var(--ocn-next-padding-pc);
	background-color: var(--ocn-next-bg);
	border: var(--ocn-next-border-width) solid var(--ocn-next-border);
	border-radius: var(--ocn-next-radius);
}

.ocn_next_event__label {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	color: var(--ocn-next-accent);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}

.ocn_next_event__label-ja {
	margin: 0;
	font-size: 34px;
	line-height: 1.5;
	text-align: center;
}

.ocn_next_event__label-en {
	margin: 0;
	font-size: 20px;
	line-height: 1;
	text-align: left;
}

.ocn_next_event__body {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.ocn_next_event__badge {
	margin-left: 12px;
	padding: 6px 30px;
	background-color: var(--ocn-next-accent);
	border-radius: 30px;
	color: var(--ocn-white);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	white-space: nowrap;
}

.ocn_next_event--nyushi .ocn_next_event__badge {
	background-color: var(--ocn-yellow);
	color: var(--ocn-blue);
}

.ocn_next_event__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: var(--ocn-next-row-width-pc);
}

.ocn_next_event__date {
	margin: 0;
	color: var(--ocn-next-text);
	font-family: "Noto Sans JP", sans-serif;
	white-space: nowrap;
}

.ocn_next_event__date-num {
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
}

.ocn_next_event__date-day {
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}

.ocn_next_event__time {
	margin: 0;
	padding-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ocn-next-text);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}

.ocn_next_event__time-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: block;
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-next-max-width: 340px;
	}

	.ocn_next_event {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: var(--ocn-next-padding-sp);
	}

	.ocn_next_event__label {
		align-items: flex-start;
		width: 90%;
	}

	.ocn_next_event__label-ja {
		font-size: 24px;
	}

	.ocn_next_event__label-en {
		text-align: center;
	}

	.ocn_next_event__body {
		align-items: center;
		gap: 16px;
		width: 100%;
	}

	.ocn_next_event__badge {
		margin-left: 0;
		font-size: 16px;
		padding: 6px 20px;
		width: 90%;
		text-align: center;
	}

	.ocn_next_event__row {
		width: 100%;
		max-width: var(--ocn-next-row-width-pc);
		align-self: center;
	}

	.ocn_next_event__date-num {
		font-size: 40px;
	}

	.ocn_next_event__date-day,
	.ocn_next_event__time {
		font-size: 20px;
	}
}

/* ----- コンテンツ幅（コンテナ） ----- */

/*
 * 4 種類のコンテンツ幅 + 可変ガーター。
 * 実装ではラッパーに .ocn_container と幅モディファイア (--xl/--lg/--md/--sm) を併用する。
 * 例: <div class="ocn_container ocn_container--lg"> ... </div>
 * 値は :root の CSS 変数で集中管理 — サイズ変更時はここ 1 箇所を編集すれば全体に反映。
 */

:root {
	--ocn-container-xl: 1425px;
	--ocn-container-lg: 1370px;
	--ocn-container-md: 1250px;
	--ocn-container-sm: 930px;

	/* ガーター（左右の余白）: ブレイクポイントで切替 */
	--ocn-gutter: 40px;
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-gutter: 20px;
	}
}

.ocn_container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ocn-gutter);
	padding-right: var(--ocn-gutter);
	box-sizing: border-box;
}

.ocn_container--xl {
	max-width: calc(var(--ocn-container-xl) + var(--ocn-gutter) * 2);
}

.ocn_container--lg {
	max-width: calc(var(--ocn-container-lg) + var(--ocn-gutter) * 2);
}

.ocn_container--md {
	max-width: calc(var(--ocn-container-md) + var(--ocn-gutter) * 2);
}

.ocn_container--sm {
	max-width: calc(var(--ocn-container-sm) + var(--ocn-gutter) * 2);
}

.ocn_container--about {
	max-width: calc(1270px + var(--ocn-gutter) * 2);
	position: relative;
	z-index: 1;
}

/* ----- ABOUT セクション（Figma node 16-560 / ocn_section_intro + 単一画像） ----- */

:root {
	--ocn-about-gap-pc: 60px 0px;
	--ocn-about-gap-sp: 32px;
	--ocn-about-media-width-pc: 609px;
	--ocn-about-media-width-tablet: 380px;
	--ocn-about-media-max-sp: 420px;
}

.ocn_about {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ocn-about-gap-pc);
}

.ocn_about__text {
/* 	flex: 1 1 0; */
	min-width: 0;
	padding-top: 60px;
	padding-left: 40px;
}

.ocn_about__media {
	display: block;
	flex-shrink: 0;
	width: var(--ocn-about-media-width-pc);
	max-width: 100%;
	height: auto;
	z-index: 2;
}

@media screen and (max-width: 1024px) {
	.ocn_about__media {
		width: var(--ocn-about-media-width-tablet);
	}
}

@media screen and (max-width: 767px) {
	.ocn_about {
		flex-direction: column;
		align-items: center;
		gap: var(--ocn-about-gap-sp);
	}

	.ocn_about__text {
		width: 100%;
		padding-top: 40px;
		padding-left: 0;
	}

	.ocn_about__media {
		width: 100%;
		max-width: var(--ocn-about-media-max-sp);
	}
}

/* ----- YouTube Shorts 埋め込み（Figma node 1-95） ----- */

/*
 * YouTube Shorts セクションコンテナ。
 * 横幅いっぱいの黄色背景 (#FFF99F) + radius 15px、padding 50px。
 * 内部の iframe (332×590) は中央寄せ、10px 白枠付き。
 */

:root {
	--ocn-short-bg: var(--ocn-yellow-light);
	--ocn-short-radius: 15px;
	--ocn-short-padding: 50px;
	--ocn-short-iframe-w: 332px;
	--ocn-short-iframe-h: 590px;
}

.ocn_short {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--ocn-short-bg);
	border-radius: var(--ocn-short-radius);
	padding: var(--ocn-short-padding);
	display: flex;
	justify-content: center;
	align-items: center;
}

.ocn_short::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../../img/object/bg-object.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: var(--ocn-short-radius);
	pointer-events: none;
	z-index: 0;
}

.ocn_short iframe {
	display: block;
	width: var(--ocn-short-iframe-w);
	height: var(--ocn-short-iframe-h);
	border: 10px solid var(--ocn-white);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 767px) {
	.ocn_short {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 0;
		padding: clamp(20px, 5vw, 40px) 0;
	}

	.ocn_short::before {
		border-radius: 0;
		background-image: url('../../img/object/sp_bg-object.webp');
	}

	.ocn_short iframe {
		width: min(var(--ocn-short-iframe-w), 100%);
		height: auto;
		aspect-ratio: 332 / 590;
		max-width: 100%;
	}
}

/* ----- アクセスマップ（Figma node 23-593） ----- */

/*
 * マップ画像 + 住所 + GoogleMap リンクの縦並びブロック。
 * マップは中央寄せ、画像は max-width 内で自動スケール。
 */

:root {
	--ocn-access-max-width: 683px;
	--ocn-access-text-color: var(--ocn-text);
	--ocn-access-link-color: var(--ocn-blue);
	--ocn-access-gap-pc: 24px;
	--ocn-access-gap-sp: 16px;
	--ocn-access-info-gap: 4px;
	--ocn-access-font-size: 16px;
}

.ocn_access {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ocn-access-gap-pc);
}

.ocn_access__map {
	width: 100%;
	max-width: var(--ocn-access-max-width);
}

.ocn_access__map img {
	display: block;
	width: 100%;
	height: auto;
}

.ocn_access__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ocn-access-info-gap);
	text-align: left;
	width: 100%;
	max-width: var(--ocn-access-max-width);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: var(--ocn-access-font-size);
	line-height: 1.7;
}

.ocn_access__address {
	margin: 0;
	color: var(--ocn-access-text-color);
	font-size: 16px;
}

.ocn_access__link {
	margin: 0;
}

.ocn_access__link a {
	color: var(--ocn-access-link-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.2s ease;
}

.ocn_access__link a:hover,
.ocn_access__link a:focus-visible {
	opacity: 0.75;
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	.ocn_access {
		gap: var(--ocn-access-gap-sp);
	}

	.ocn_access__info {
		font-size: 14px;
	}

	.ocn_access__address {
		/* 長い住所が改行できるようwrap許可 */
		word-break: break-all;
	}
}

/* ----- ポラロイド写真カード（Figma node 1-278） ----- */

/*
 * クリーム色のポラロイド風フレームに写真を配置。
 * カードごとに微妙な回転角でランダム感を演出。
 * 装飾テープ (.ocn_tape) を 4隅に配置可能 (--tl, --tr, --bl, --br)。
 * サイズはデフォルト（144×37）か、小さいカード向けに .ocn_tape--small（122×31）を併用。
 * テープは assets/img/tape-ill.png を使用し、各コーナーで向きを調整。
 */

:root {
	--ocn-polaroid-width: 400px;
	--ocn-polaroid-height: 250px;
	--ocn-polaroid-bg: #f2f0e4;
	--ocn-polaroid-radius: 5px;
	--ocn-polaroid-inset: 10px;
	--ocn-polaroid-gap: 45px;
	/* リスト 2 枚目の上オフセット。max-width: 924px で 0 に上書き */
	--ocn-polaroid-2nd-mt: 55px;
	--ocn-polaroid-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
	--ocn-tape-src: url("../../img/tape-ill.png");
	--ocn-tape-width: 144px;
	--ocn-tape-height: 37px;
	--ocn-tape-width-sm: 122px;
	--ocn-tape-height-sm: 31px;
	--ocn-tape-offset-corner-sm: -12px;
	--ocn-tape-offset-edge-sm: -15px;
	--ocn-tape-rotate-left: -28deg;
	--ocn-tape-rotate-right: 28deg;
	--ocn-tape-offset-corner: 1px;
	--ocn-tape-offset-edge: -44px;
}

.ocn_polaroid_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ocn-polaroid-gap);
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.ocn_polaroid {
	position: relative;
	box-sizing: border-box;
	width: var(--ocn-polaroid-width);
	height: var(--ocn-polaroid-height);
	padding: var(--ocn-polaroid-inset);
	background: var(--ocn-polaroid-bg);
	border-radius: var(--ocn-polaroid-radius);
	box-shadow: var(--ocn-polaroid-shadow);
}

.ocn_polaroid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}

/* ランダム回転（3枚ごとに -3.76 / 3.28 / 1.77 のリピート）。
   個別制御したい場合はこのルールを無効化して .ocn_polaroid にインラインで transform を指定する。 */
.ocn_polaroid_list .ocn_polaroid:nth-child(3n+1) { transform: rotate(-3.76deg); }
.ocn_polaroid_list .ocn_polaroid:nth-child(3n+2) { transform: rotate(3.28deg); }
.ocn_polaroid_list .ocn_polaroid:nth-child(3n+3) { transform: rotate(1.77deg); }

.ocn_polaroid_list .ocn_polaroid:nth-child(2) {
	margin-top: var(--ocn-polaroid-2nd-mt);
}

@media screen and (max-width: 767px) {
	.ocn_polaroid_list .ocn_polaroid:nth-child(3n+3) { transform: rotate(-1.77deg); }
}

/* テープ装飾 */
.ocn_tape {
	position: absolute;
	display: block;
	width: var(--ocn-tape-width);
	height: var(--ocn-tape-height);
	background-image: var(--ocn-tape-src);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 2;
}

.ocn_tape--tl {
	top: var(--ocn-tape-offset-corner);
	left: var(--ocn-tape-offset-edge);
	transform: rotate(var(--ocn-tape-rotate-left));
	transform-origin: center center;
}

.ocn_tape--tr {
	top: var(--ocn-tape-offset-corner);
	right: var(--ocn-tape-offset-edge);
	transform: scaleX(-1) rotate(var(--ocn-tape-rotate-left));
	transform-origin: center center;
}

.ocn_tape--bl {
	bottom: var(--ocn-tape-offset-corner);
	left: var(--ocn-tape-offset-edge);
	transform: rotate(var(--ocn-tape-rotate-right));
	transform-origin: center center;
}

.ocn_tape--br {
	bottom: var(--ocn-tape-offset-corner);
	right: var(--ocn-tape-offset-edge);
	transform: scaleX(-1) rotate(var(--ocn-tape-rotate-right));
	transform-origin: center center;
}

.ocn_tape--small {
	width: var(--ocn-tape-width-sm);
	height: var(--ocn-tape-height-sm);
}

.ocn_tape--small.ocn_tape--tl {
	top: var(--ocn-tape-offset-corner-sm);
	left: var(--ocn-tape-offset-edge-sm);
}

.ocn_tape--small.ocn_tape--tr {
	top: var(--ocn-tape-offset-corner-sm);
	right: var(--ocn-tape-offset-edge-sm);
}

.ocn_tape--small.ocn_tape--bl {
	bottom: var(--ocn-tape-offset-corner-sm);
	left: var(--ocn-tape-offset-edge-sm);
}

.ocn_tape--small.ocn_tape--br {
	bottom: var(--ocn-tape-offset-corner-sm);
	right: var(--ocn-tape-offset-edge-sm);
}

/*
 * 924px 以下: 2 枚目の上マージン 0、リスト gap 75px。
 * 767px 以下では別ブロックで gap 32px・カード縮小などを上書き。
 */
@media screen and (max-width: 1080px) {
	:root {
		--ocn-polaroid-2nd-mt: 0;
		--ocn-polaroid-gap: 40px;
	}

	.ocn_polaroid_list {
		flex-direction: column;
		align-items: flex-start;
		padding-left: 40px;
		padding-right: 40px;
	}

	.ocn_polaroid_list .ocn_polaroid:nth-child(even) {
		align-self: flex-end;
	}

	.ocn_polaroid_list .ocn_polaroid:nth-child(2) {
		margin-top: 0;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-polaroid-gap: 60px;
		--ocn-polaroid-width: 320px;
		--ocn-polaroid-height: 200px;
		--ocn-tape-width: 110px;
		--ocn-tape-height: 30px;
		--ocn-tape-width-sm: 93px;
		--ocn-tape-height-sm: 25px;
		--ocn-tape-offset-corner-sm: -10px;
		--ocn-tape-offset-edge-sm: -12px;
	}

	.ocn_polaroid {
		max-width: 80%;
		aspect-ratio: 296 / 185;
		width: 100%;
		height: 100%;
		min-width: 220px;
	}
	
	.ocn_polaroid_list {
		padding-left: 30px;
		padding-right: 30px;
	}
	
}

/* ----- 吹き出しカード（Figma node 18-578） ----- */

/*
 * 3枚1セットで使う想定の吹き出し(speech bubble)カード。
 * 偶数番目のカードは垂直方向にオフセット（stagger）されジグザグ配置になる。
 * 中身（テキスト・画像）はコンテナ内に自由に配置。
 */

:root {
	--ocn-bubble-bg: #fafcff;
	--ocn-bubble-radius: 40px;
	--ocn-bubble-shadow: 0 4px 16px rgba(0, 117, 194, 0.08);
	--ocn-bubble-tail-shadow: drop-shadow(0 4px 6px rgba(0, 117, 194, 0.08));
	--ocn-bubble-width: 400px;
	--ocn-bubble-min-height: 250px;
	--ocn-bubble-padding: 40px 30px;
	--ocn-bubble-gap: 25px;
	--ocn-bubble-stagger: 69px;
	--ocn-bubble-tail-width: 53px;
	--ocn-bubble-tail-height: 38px;
	--ocn-bubble-tail-offset-right: 48px;
	--ocn-bubble-tail-src: url("../../img/opc_fukidashi-shape.webp");
	--ocn-bubble-title-color: var(--ocn-blue);
	--ocn-bubble-category-color: var(--ocn-green);
	--ocn-bubble-category-color-nursing: var(--ocn-red);
	--ocn-bubble-body-color: var(--ocn-text);
	--ocn-bubble-content-gap: 19px;
	--ocn-bubble-header-gap: 5px;
	--ocn-bubble-title-size: 20px;
	--ocn-bubble-category-size: 14px;
	--ocn-bubble-body-size: 16px;
}

.ocn_bubble_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ocn-bubble-gap);
}

.ocn_bubble {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	gap: var(--ocn-bubble-content-gap);
	width: var(--ocn-bubble-width);
	max-width: 100%;
	padding: var(--ocn-bubble-padding);
	background: var(--ocn-bubble-bg);
	border-radius: var(--ocn-bubble-radius);
	box-shadow: var(--ocn-bubble-shadow);
}

.ocn_bubble__header {
	display: flex;
	flex-direction: column;
	gap: var(--ocn-bubble-header-gap);
}

.ocn_bubble__title {
	margin: 0;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: var(--ocn-bubble-title-size);
	line-height: 1.4;
	color: var(--ocn-bubble-title-color);
}

.ocn_bubble__category {
	margin: 5px 0 0;
	font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: 600;
	font-size: var(--ocn-bubble-category-size);
	line-height: 1.4;
	color: var(--ocn-bubble-category-color);
}

.ocn_bubble__category--nursing {
	color: var(--ocn-bubble-category-color-nursing);
}

.ocn_bubble__body {
	margin: 0;
	font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: 500;
	font-size: var(--ocn-bubble-body-size);
	line-height: 1.5;
	color: var(--ocn-bubble-body-color);
}

.ocn_bubble::after {
	content: "";
	position: absolute;
	top: calc(100% - 4px); /* 1px overlap で縁の隙間を防ぐ */
	right: var(--ocn-bubble-tail-offset-right);
	width: var(--ocn-bubble-tail-width);
	height: var(--ocn-bubble-tail-height);
	background-color: var(--ocn-bubble-bg);
	/* opc_fukidashi-shape.svg をマスクとして使用。色は background-color で制御。 */
	-webkit-mask-image: var(--ocn-bubble-tail-src);
	mask-image: var(--ocn-bubble-tail-src);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* mask 適用後のシェイプに沿ってシャドウが出る */
	filter: var(--ocn-bubble-tail-shadow);
}

/* ジグザグ配置: 偶数番目のカードを下方向にオフセット（PC のみ） */
@media screen and (min-width: 768px) {
	.ocn_bubble:nth-child(even) {
		margin-top: var(--ocn-bubble-stagger);
	}
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-bubble-gap: 40px;
		--ocn-bubble-min-height: 180px;
		--ocn-bubble-padding: 42px 26px;
	}

	.ocn_bubble {
		width: 100%;
		max-width: 400px;
	}
}

/* ----- 装飾付き見出し（Figma node 17-572） ----- */

/*
 * 両サイドに heading-ill.svg 装飾をもつシンプルな見出し。
 * 左装飾: -22.33deg 回転 / 右装飾: 左の鏡像（-157.67deg + scaleY(-1)）。
 * SVG ファイルは assets/img/heading-ill.svg を使用。右側は CSS transform で反転表示。
 */

:root {
	--ocn-sh2-text-color: var(--ocn-blue);
	--ocn-sh2-font-size-pc: 34px;
	--ocn-sh2-font-size-sp: 24px;
	--ocn-sh2-gap-pc: 15px;
	--ocn-sh2-gap-sp: 0px;
	--ocn-sh2-sparkle-width-pc: 102px;
	--ocn-sh2-sparkle-height-pc: 67px;
	--ocn-sh2-sparkle-width-sp: 55px;
	--ocn-sh2-sparkle-height-sp: 52px;
}

.ocn_sparkle_heading {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--ocn-sh2-gap-pc);
}

.ocn_sparkle_heading__text {
	margin: 0;
	color: var(--ocn-sh2-text-color);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: var(--ocn-sh2-font-size-pc);
	line-height: 1.7;
	text-align: center;
	white-space: nowrap;
}

.ocn_sparkle_heading__decoration {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ocn-sh2-sparkle-width-pc);
	height: var(--ocn-sh2-sparkle-height-pc);
}

.ocn_sparkle_heading__decoration img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ocn_sparkle_heading__decoration--left img {
	transform: rotate(-22.33deg);
}

.ocn_sparkle_heading__decoration--right img {
	transform: rotate(-157.67deg) scaleY(-1);
}

@media screen and (max-width: 767px) {
	.ocn_sparkle_heading {
		gap: var(--ocn-sh2-gap-sp);
	}

	.ocn_sparkle_heading__text {
		font-size: var(--ocn-sh2-font-size-sp);
		white-space: normal;
	}

	.ocn_sparkle_heading__decoration {
		width: var(--ocn-sh2-sparkle-width-sp);
		height: var(--ocn-sh2-sparkle-height-sp);
	}

	.ocn_sparkle_heading__decoration--left {
		margin-right: -25px;
	}
	
	.ocn_sparkle_heading__decoration--right {
		margin-left: -25px;
	}
}

/* ----- プログラム紹介カード（Figma node 1-325） ----- */

:root {
	--ocn-program-shadow:         5px 5px 25px 0px rgba(0, 117, 194, 0.2);
	--ocn-program-radius:         10px;
	--ocn-program-col-gap:        25px;
	--ocn-program-row-gap:        37px;
	--ocn-program-content-bg:     var(--ocn-green-light);
	--ocn-program-content-pad:    30px;
	--ocn-program-content-pad-sp:   20px 24px;
	--ocn-program-content-gap:    10px;
	--ocn-program-content-gap-sp:    7px;
	--ocn-program-tag-bg:         var(--ocn-green);
	--ocn-program-tag-color:      var(--ocn-white);
	--ocn-program-title-color:    var(--ocn-green);
	--ocn-program-body-color:     var(--ocn-text);
	--ocn-program-title-size-pc:  24px;
	--ocn-program-title-size-sp:  20px;
	--ocn-program-body-size-pc:   16px;
	--ocn-program-body-size-sp:   14px;
}

/* PC: 3列固定 / 1080px: 2列 / SP: 1列 */
.ocn_program_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--ocn-program-col-gap);
	row-gap: var(--ocn-program-row-gap);
	width: 100%;
	position: relative;
}

@media screen and (max-width: 1080px) {
	.ocn_program_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 767px) {
	.ocn_program_list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	/* 専用クラスを付けた場合のみSP横スクロール */
	.ocn_program_list.ocn_program_list--sp_scroll {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		width: calc(100% + (50vw - 50%));
		max-width: none;
		margin-left: 0;
		margin-right: calc(50% - 50vw);
		padding-left: 0;
		padding-right: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
	}

	.ocn_program_list.ocn_program_list--sp_scroll .ocn_program_card {
		flex: 0 0 min(76%, 86vw);
		max-width: min(76%, 86vw);
		scroll-snap-align: start;
	}
	.ocn_program_list.ocn_program_list--sp_scroll .ocn_program_card:last-child {
		margin-right: 20px;
	}
}

.ocn_program_card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	border-radius: var(--ocn-program-radius);
	overflow: hidden;
	box-shadow: var(--ocn-program-shadow);
}

.ocn_program_card__media {
	width: 100%;
	aspect-ratio: 400 / 217;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: var(--ocn-polaroid-shadow);
}

.ocn_program_card__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.ocn_program_card__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ocn-program-content-gap);
	padding: var(--ocn-program-content-pad);
	background-color: var(--ocn-program-content-bg);
	margin-top: 16px;
}

/* 一部カードのみ: 画像エリアの影なし + テキスト上余白なし */
.ocn_program_card--plain .ocn_program_card__media {
	box-shadow: none;
}

.ocn_program_card--plain .ocn_program_card__text {
	margin-top: 0;
}

.ocn_program_card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	background-color: var(--ocn-program-tag-bg);
	color: var(--ocn-program-tag-color);
	border-radius: 5px;
	padding: 3px 8px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	white-space: nowrap;
}

.ocn_program_card__title {
	margin: 0;
	color: var(--ocn-program-title-color);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: var(--ocn-program-title-size-pc);
	line-height: 1.5;
}

.ocn_program_card__text .ocn_text_sm {
	margin: 0;
	color: var(--ocn-program-body-color);
	font-size: var(--ocn-program-body-size-pc);
	line-height: 1.5;
}

/* 看護科：朱色テーマ */
.ocn_program_card--nursing .ocn_program_card__text {
	background-color: var(--ocn-red-light);
}

.ocn_program_card--nursing .ocn_program_card__tag {
	background-color: var(--ocn-red);
}

.ocn_program_card--nursing .ocn_program_card__title {
	color: var(--ocn-red);
}

@media screen and (max-width: 767px) {
	.ocn_program_card__title {
		font-size: var(--ocn-program-title-size-sp);
	}

	.ocn_program_card__text .ocn_text_sm {
		font-size: var(--ocn-program-body-size-sp);
	}
	.ocn_program_card__tag {
		font-size: 12px;
	}
	.ocn_program_card__text {
		padding: var(--ocn-program-content-pad-sp);
		gap: var(--ocn-program-content-gap-sp);
	}
}

/* イベントカード（旧デザイン復元）：クリーム色インセット枠 + 青タイトル、タグなし */
.ocn_program_card--event {
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.ocn_program_card--event .ocn_program_card__media {
	height: auto;
	aspect-ratio: 400 / 250;
	box-sizing: border-box;
	padding: 10px;
	background-color: #f2f0e4;
	border-radius: 5px;
	overflow: hidden;
}

.ocn_program_card--event .ocn_program_card__image {
	border-radius: 3px;
}

.ocn_program_card--event .ocn_program_card__text {
	flex: none;
	background-color: transparent;
	padding: 0 10px;
	gap: 8px;
}

.ocn_program_card--event .ocn_program_card__tag {
	display: none;
}

.ocn_program_card--event .ocn_program_card__title {
	color: var(--ocn-blue);
	font-weight: 600;
}

/* ----- 余白調整ユーティリティ（margin-bottom） ----- */

/*
 * 任意の要素に併用して固定の下マージンを加えるユーティリティ。
 * セクション見出しの直下余白など、共通サイズの縦スペースをクラス指定で管理できる。
 * 一覧: page-component.php「汎用クラス一覧」→ 4. 縦方向の余白
 * 数値を追加したい場合は同じ命名規則（.ocn_mb_{px}）で増やす。
 *
 * 例:
 *   <div class="ocn_section_heading ocn_mb_64">...</div>
 *   <h2 class="ocn_section_heading__title ocn_mb_16">...</h2>
 */

.ocn_mb_96 { margin-bottom: 96px; }
.ocn_mb_64 { margin-bottom: 64px; }
.ocn_mb_32 { margin-bottom: 32px; }
.ocn_mb_16 { margin-bottom: 16px; }

@media screen and (max-width: 767px) {
	.ocn_mb_96 { margin-bottom: 48px; }
	.ocn_mb_64 { margin-bottom: 32px; }
}

/* ----- UIコンポーネント一覧ページ用（本番ページでは未使用可） ----- */

.ocn_lab {
	max-width: 1920px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 32px) 80px;
}

.ocn_lab__page_title {
	margin: 0 0 0.35em;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
}

.ocn_lab__page_lead {
	margin: 0 0 32px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #444;
}

.ocn_lab__toc {
	margin: 0 0 48px;
	padding: 24px 28px 28px;
	background: #f4f8fb;
	border: 1px solid #d8e6f0;
	border-radius: 8px;
}

.ocn_lab__toc_title {
	margin: 0 0 16px;
	font-size: 1rem;
	font-weight: 700;
	color: #1a1311;
}

.ocn_lab__toc_nav {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #333;
}

.ocn_lab__toc_group {
	display: block;
	margin: 14px 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #0075c2;
	text-transform: uppercase;
}

.ocn_lab__toc_group:first-child {
	margin-top: 0;
}

.ocn_lab__toc_list {
	margin: 0;
	padding-left: 1.15em;
}

.ocn_lab__toc_list .ocn_lab__toc_list {
	margin-top: 4px;
	margin-bottom: 4px;
}

.ocn_lab__toc_list a {
	color: #0b5cab;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ocn_lab__toc_list a:hover {
	color: #004a8c;
}

@media screen and (min-width: 768px) {
	.ocn_lab__toc_nav {
		columns: 2;
		column-gap: 36px;
	}

	.ocn_lab__toc_group {
		break-after: avoid;
	}

	.ocn_lab__toc_list {
		break-inside: avoid;
		margin-bottom: 4px;
	}
}

.ocn_doc[id],
#ocn-lab-toc {
	scroll-margin-top: 24px;
}

.ocn_doc {
	margin-bottom: 56px;
	padding-bottom: 48px;
	border-bottom: 1px solid #e5e5e5;
}

.ocn_doc:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ocn_doc__label {
	margin: 0 0 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #888;
}

.ocn_doc__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
}

.ocn_doc__figma {
	margin: 0 0 20px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #666;
	word-break: break-all;
}

.ocn_doc__preview {
	padding-block: clamp(56px, 10vw, 120px);
	padding-inline: clamp(24px, 4vw, 40px);
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
}

.ocn_doc__preview + .ocn_doc__preview {
	margin-top: 20px;
}

.ocn_doc__note {
	margin: 16px 0 0;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: #666;
}

/*
 * ----- 汎用セクションユーティリティ -----
 * 一覧: page-component.php「汎用クラス一覧」→ 1. セクション余白・背景
 * （2〜4 は別ブロック: text-align / CTA ラッパー / margin-bottom）
 */

.ocn_section {
	position: relative;
	padding-top: var(--ocn-sec-pt, 0);
	padding-bottom: var(--ocn-sec-pb, 0);
	background-color: var(--ocn-sec-bg, transparent);
	background-image: var(--ocn-sec-bg-image, none);
	background-repeat: var(--ocn-sec-bg-repeat, repeat);
	background-size: var(--ocn-sec-bg-size, auto);
	background-position: var(--ocn-sec-bg-pos, 0 0);
	overflow: hidden;
}

.ocn_section--movie-arch::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: 159px;
	transform: translateX(-50%);
	background-image: url("../../img/bg-arch.webp");
	background-repeat: no-repeat;
	background-size: 100% 159px;
	background-position: center bottom;
	pointer-events: none;
	z-index: 0;
}

@media screen and (max-width: 1440px) {
	.ocn_section--movie-arch::after {
		width: 1920px;
		background-size: 1920px 159px;
	}	
}

@media screen and (max-width: 767px) {
	.ocn_section--movie-arch::after {
		display: none;
	}
}

.ocn_section-wrapper {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.ocn_section--nohidden {
	overflow: visible;
}
@media screen and (max-width: 767px) {
	.ocn_overflow_visible_sp {
		overflow: visible !important;
	}
	.ocn_overflow_hidden_sp {
		overflow: hidden !important;
	}
}

/* ----- 装飾オブジェクト ----- */

.ocn_object {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.ocn_object--01 {
	width: 248px;
	height: 286px;
	top: 160px;
	left: calc(50% - 910px);
	transform: translateX(-50%);
}
.ocn_object--02 {
	width: 203px;
	height: 211px;
	top: calc(50% + 110px);
	left: calc(50% + 910px);
	transform: translate(-50%, -50%);
}
.ocn_object--03 {
	width: 241px;
	height: 241px;
	bottom: -82px;
	left: calc(50% - 650px);
	transform: translateX(-50%);
}
.ocn_object--04 {
	width: 255px;
	height: 255px;
	top: 162px;
	left: calc(50% + 590px);
	transform: translateX(-50%);
}
.ocn_object--05 {
	width: 175px;
	height: 182px;
	bottom: 72px;
	left: calc(50% - 730px);
	transform: translateX(-50%);
}
.ocn_object--06 {
	width: 264px;
	height: 230px;
	top: 222px;
	left: calc(50% + 650px);
	transform: translateX(-50%);
}
.ocn_object--07 {
	width: 172px;
	height: 198px;
	top: 760px;
	left: calc(50% - 840px);
	transform: translateX(-50%);
}
.ocn_object--08 {
	width: 213px;
	height: 286px;
	bottom: 370px;
	left: calc(50% + 890px);
	transform: translateX(-50%);
}
.ocn_object--09 {
	width: 195px;
	height: 221px;
	bottom: -92px;
	left: calc(50% - 710px);
	transform: translateX(-50%);
}
.ocn_object--10 {
	width: 148px;
	height: 148px;
	top: 175px;
	left: calc(50% + 680px);
	transform: translateX(-50%);
}
.ocn_object--11 {
	width: 233px;
	height: 113px;
	bottom: 228px;
	left: calc(50% + 858px);
	transform: translateX(-50%);
}
.ocn_object--12 {
	width: 307px;
	height: 282px;
	top: 58px;
	left: calc(50% - 680px);
	transform: translateX(-50%);
}
.ocn_object--13 {
	width: 457px;
	height: 457px;
	bottom: 0px;
	left: calc(50% + 780px);
	transform: translateX(-50%);
}
.ocn_object--14 {
	width: 196px;
	height: 223px;
	bottom: 0px;
	left: calc(50% - 640px);
	transform: translateX(-50%);
	z-index: 1;
}
.ocn_object--15 {
	width: 99px;
	height: 181px;
	bottom: 26px;
	right: 0;
}
.ocn_object--16 {
	width: 417px;
	height: 518px;
	top: 199px;
	left: calc(50% - 930px);
	transform: translateX(-50%);
}
.ocn_object--17 {
	width: 327px;
	height: 327px;
	bottom: -50px;
	left: calc(50% + 880px);
	transform: translateX(-50%);
}
.ocn_object--18 {
	width: 433px;
	height: 379px;
	top: 0px;
	left: calc(50% + 860px);
	transform: translateX(-50%);
}
.ocn_object--19 {
	width: 361px;
	height: 314px;
	top: 69px;
	left: calc(50% - 810px);
	transform: translateX(-50%);
}
.ocn_object--20 {
	width: 406px;
	height: 406px;
	bottom: 167px;
	left: calc(50% - 870px);
	transform: translateX(-50%);
}
.ocn_object--21 {
	width: 361px;
	height: 465px;
	bottom: -50px;
	left: calc(50% + 730px);
	transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
	.ocn_object--04 {
		width: 135px;
		height: 135px;
		top: 752px;
		left: calc(50% + 170px);
	}
	.ocn_object--06 {
		width: 204px;
		height: 150px;
		top: 534px;
		left: calc(50% + 180px);
	}
	.ocn_object--07 {
		width: 82px;
		height: 118px;
		top: 1040px;
		left: calc(50% - 210px);
	}
	.ocn_object--08 {
		width: 93px;
		height: 136px;
		bottom: 540px;
		left: calc(50% + 191px);
	}
	.ocn_object--09 {
		width: 95px;
		height: 121px;
		bottom: -42px;
		left: calc(50% - 190px);
	}
	.ocn_object--7,
	.ocn_object--12,
	.ocn_object--13{
		display:none;
	}
	.ocn_object--14 {
		width: 116px;
		height: 163px;
		bottom: -83px;
		left: calc(50% - 125px);
	}
	.ocn_object--15 {
		width: 76px;
		height: 151px;
		bottom: -72px;
		right: 0;
	}
}

/* 上余白 */
.ocn_pt_200 {
	--ocn-sec-pt: 200px;
}

.ocn_pt_120 {
	--ocn-sec-pt: 120px;
}

.ocn_pt_80 {
	--ocn-sec-pt: 80px;
}

/* 下余白 */
.ocn_pb_300 {
	--ocn-sec-pb: 300px;
}

.ocn_pb_200 {
	--ocn-sec-pb: 200px;
}

.ocn_pb_120 {
	--ocn-sec-pb: 120px;
}

.ocn_pb_80 {
	--ocn-sec-pb: 80px;
}

.ocn_pb_70 {
	--ocn-sec-pb: 70px;
}

/* SP（767px以下）: 大きい余白を100pxに統一 / 120px専用クラス追加 */
@media screen and (max-width: 767px) {
	.ocn_pt_200,
	.ocn_pt_120 { --ocn-sec-pt: 100px; }

	.ocn_pb_300,
	.ocn_pb_200,
	.ocn_pb_120 { --ocn-sec-pb: 100px; }

	/* SP専用120px（標準100pxより大きい余白を明示したい場合に上書き） */
	.ocn_pt_sp_120 { --ocn-sec-pt: 120px; }
	.ocn_pb_sp_120 { --ocn-sec-pb: 120px; }
}

/* 背景色 */
.ocn_bg_white {
	--ocn-sec-bg: #fff;
}

.ocn_bg_blue {
	--ocn-sec-bg: #e9f8fe;
}

/* 背景パターン（色クラスと併用可） */
.ocn_bg_graph_paper {
	--ocn-sec-bg-image:   url("../../img/ocp_bg-graph-paper.webp");
	--ocn-sec-bg-repeat:  repeat;
	--ocn-sec-bg-size:    496px 496px;
	--ocn-sec-bg-pos:     0 0;
}

/* コンテンツ幅デモ（lab ページのみ・本番では未使用） */
.ocn_container_demo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.ocn_container_demo__bar {
	box-sizing: border-box;
	padding: 14px 18px;
	border-radius: 6px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 12px;
	color: #0075c2;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
	max-width: 100%;
	margin-inline: auto;
}

/*
 * インナー幅は Figma の数値どおり（px）で上限を切る。
 * width: 100% で親（.ocn_container 等）の content box いっぱいに広がり、親の padding（--ocn-gutter）より内側にはみ出さない。
 * 親が max-width: calc(インナー + ガーター*2) のとき、可視のテキスト列は最大でちょうどインナー幅になる。
 */
.ocn_container_demo__bar--xl {
	width: 100%;
	max-width: var(--ocn-container-xl);
}

.ocn_container_demo__bar--lg {
	width: 100%;
	max-width: var(--ocn-container-lg);
}

.ocn_container_demo__bar--md {
	width: 100%;
	max-width: var(--ocn-container-md);
}

.ocn_container_demo__bar--sm {
	width: 100%;
	max-width: var(--ocn-container-sm);
}

.ocn_container_demo__gutter {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: repeating-linear-gradient(45deg, #fff4e5 0 8px, #ffe8c8 8px 16px);
	border: 1px dashed #b8860b;
	border-radius: 6px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 12px;
	color: #6b4a00;
}

.ocn_doc__kbd_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #333;
}

.ocn_doc__kbd_list dt {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	color: #0075c2;
}

.ocn_doc__kbd_list dd {
	margin: 0;
	color: #555;
}

/* ----- プログラムタブ（Figma node 1-325） ----- */

:root {
	--ocn-tab-border:         var(--ocn-blue-mid);
	--ocn-tab-radius:         50px;
	--ocn-tab-btn-radius:     40px;
	--ocn-tab-bar-max-w:      760px;
	--ocn-tab-overlap:        50px;
	--ocn-tab-body-pt:        140px;
	--ocn-tab-body-pb:        100px;
	--ocn-tab-body-px:        60px;
	--ocn-tab-general-color:  var(--ocn-green);
	--ocn-tab-general-bg:     var(--ocn-green-light);
	--ocn-tab-nursing-color:  var(--ocn-red);
	--ocn-tab-nursing-bg:     var(--ocn-red-light);
	--ocn-tab-btn-font-size:  25px;
	--ocn-tab-btn-py:         15px;
	--ocn-tab-btn-px:         20px;
	--ocn-tab-bar-py:         17px;
	--ocn-tab-bar-px:         20px;
}

.ocn_tab {
	position: relative;
}

.ocn_tab__bar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
	max-width: var(--ocn-tab-bar-max-w);
	background: var(--ocn-white);
	border: 3px solid var(--ocn-tab-border);
	border-radius: var(--ocn-tab-radius);
	padding: var(--ocn-tab-bar-py) var(--ocn-tab-bar-px);
	gap: 8px;
}

.ocn_tab__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ocn-tab-btn-py) var(--ocn-tab-btn-px);
	border: none;
	border-radius: var(--ocn-tab-btn-radius);
	background: transparent;
	cursor: pointer;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: var(--ocn-tab-btn-font-size);
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.ocn_tab__btn--general {
	color: var(--ocn-tab-general-color);
}

.ocn_tab__btn--general.ocn_tab__btn--active {
	background-color: var(--ocn-tab-general-bg);
}

.ocn_tab__btn--nursing {
	color: var(--ocn-tab-nursing-color);
}

.ocn_tab__btn--nursing.ocn_tab__btn--active {
	background-color: var(--ocn-tab-nursing-bg);
}

.ocn_tab__body {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--ocn-white);
	border: 3px solid var(--ocn-tab-border);
	border-radius: var(--ocn-tab-radius);
	margin-top: calc(var(--ocn-tab-overlap) * -1);
	padding: var(--ocn-tab-body-pt) var(--ocn-tab-body-px) var(--ocn-tab-body-pb);
	box-sizing: border-box;
}

.ocn_tab__pane[hidden] {
	display: none;
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-tab-btn-font-size: 17px;
		--ocn-tab-bar-max-w:     305px;
		--ocn-tab-body-pt:       80px;
		--ocn-tab-body-pb:       60px;
		--ocn-tab-body-px:       20px;
		--ocn-tab-overlap:       36px;
	}
	.ocn_tab__bar {
		padding: 10px 12px;
	}
	.ocn_tab__body {
		border-radius: 30px;
	}
}

/* ============================================================
   フローティングイベントウィジェット（ocn_nev_widget）
   Figma node 1-335 / 画面右下に固定表示（.ocn_fixed_br と組み合わせ）
   ============================================================ */
:root {
	--ocn-nevw-w:        390px;
	--ocn-nevw-hdr-w:    209px;
	--ocn-nevw-hdr-h:    71px;
	--ocn-nevw-px:       17px;
	--ocn-nevw-body-pt:  94px;
}

.ocn_nev_widget {
	position: relative;
	width: var(--ocn-nevw-w);
	background-color: var(--ocn-blue-light);
	border-top:  3px solid var(--ocn-blue);
	border-left: 3px solid var(--ocn-blue);
	border-top-left-radius: 5px;
	box-sizing: border-box;
}

.ocn_nev_widget__header {
	position: absolute;
	top:  -3px;
	left: -3px;
	width:  var(--ocn-nevw-hdr-w);
	height: var(--ocn-nevw-hdr-h);
	background-color: var(--ocn-blue);
	border-bottom-right-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 8px 20px;
	box-sizing: border-box;
	justify-content: center;
	gap: 4px;
}

.ocn_nev_widget__heading {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: var(--ocn-white);
	margin: 0;
}

.ocn_nev_widget__sub {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var(--ocn-white);
	margin: 0;
}

.ocn_nev_widget__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: var(--ocn-nevw-body-pt) var(--ocn-nevw-px) 35px;
}

.ocn_nev_widget__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ocn-blue);
	color: var(--ocn-white);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	padding: 3px 16px;
	border-radius: 5px;
	white-space: nowrap;
	box-sizing: border-box;
}

.ocn_nev_widget__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.ocn_nev_widget__schedule {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
}

.ocn_nev_widget__date {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 0;
	color: var(--ocn-text);
	white-space: nowrap;
	margin: 0;
}

.ocn_nev_widget__date-num {
	font-size: 40px;
	line-height: 1;
}

.ocn_nev_widget__date-day {
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
}

.ocn_nev_widget__time {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 8px;
	flex-shrink: 0;
}

.ocn_nev_widget__time-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ocn_nev_widget__time-text {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	color: var(--ocn-text);
	white-space: nowrap;
}

.ocn_nev_widget__cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 250px;
	background-color: var(--ocn-yellow);
	padding: 20px 20px 20px 24px;
	text-decoration: none;
	box-sizing: border-box;
}

.ocn_nev_widget__cta-label {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: var(--ocn-text);
	white-space: nowrap;
}

.ocn_nev_widget__sp-link,
.ocn_nev_widget__sp-icon {
	display: none;
}

.ocn_nev_widget__cta-icon {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 13px;
}

@media screen and (max-width: 767px) {
	:root {
		--ocn-nevw-w:       350px;
		--ocn-nevw-px:      17px;
		--ocn-nevw-body-pt: 10px;
	}

	.ocn_fixed_br {
		left: 50%;
		right: auto;
		bottom: 20px;
		transform: translateX(-50%);
	}

	/* 全周ボーダー・丸角・シャドウ。CTAピル分の上余白を確保 */
	.ocn_nev_widget {
		max-width: var(--ocn-nevw-w);
		width: var(--ocn-nevw-w);
		border: 3px solid var(--ocn-blue);
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
		margin-top: 22px;
	}

	/* ヘッダー: フロー配置・全幅の青バー・横並びテキスト */
	.ocn_nev_widget__header {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		border-radius: 7px 7px 0 0;
		border-bottom-right-radius: 0;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 8px;
		padding: 8px 14px 12px;
	}

	.ocn_nev_widget__body {
		padding: var(--ocn-nevw-body-pt) var(--ocn-nevw-px) 14px;
		gap: 8px;
	}

	/* バッジ: 横幅いっぱい */
	.ocn_nev_widget__badge {
		font-size: 14px;
	}

	.ocn_nev_widget__info    { gap: 6px; }
	.ocn_nev_widget__schedule { gap: 11px; }

	.ocn_nev_widget__time {
		gap: 4px;
		padding-bottom: 3px;
	}

	.ocn_nev_widget__heading   { font-size: 18px; }
	.ocn_nev_widget__sub       { font-size: 12px; }
	.ocn_nev_widget__date-num  { font-size: 24px; }
	.ocn_nev_widget__date-day,
	.ocn_nev_widget__time-text { font-size: 16px; }
	.ocn_nev_widget__time-icon { width: 16px; height: 16px; }

	/* CTAピル: 右上に浮かせる */
	.ocn_nev_widget__cta {
		position: absolute;
		top: -29px;
		right: -20px;
		width: 160px;
		height: 41px;
		padding: 0 15px;
		border-radius: 70px;
		justify-content: center;
		gap: 8px;
		overflow: visible;
	}

	/* 吹き出しのしっぽ：ピル底辺中央から下向き三角 */
	.ocn_nev_widget__cta::after {
		content: '';
		position: absolute;
		bottom: -9px;
		left: 50%;
		transform: translateX(-50%) rotate(11deg);
		width: 0;
		height: 0;
		border-left:  0px solid transparent;
		border-right: 8px solid transparent;
		border-top:  14px solid var(--ocn-yellow);
	}

	.ocn_nev_widget__cta-label { font-size: 14px; }
	.ocn_nev_widget__cta-icon  { display: none; }

	/* ウィジェット全体リンク（SP専用） */
	.ocn_nev_widget__sp-link {
		display: block;
		position: absolute;
		inset: 0;
		border-radius: 7px;
		z-index: 1;
	}

	/* 右下サークルアイコン（SP専用） */
	.ocn_nev_widget__sp-icon {
		display: block;
		position: absolute;
		right: 8px;
		bottom: 8px;
		width: 28px;
		height: 28px;
		pointer-events: none;
		z-index: 2;
	}
}

@media screen and (max-width: 430px) {
	.ocn_nev_widget {
		width: calc(100vw - 44px);
	}
}