/**
 * 固定ページ: circle 専用スタイル
 * page-circle.php で読み込み
 * tokens は functions.php で先に読み込み済み
 */
body {
	padding: 0 !important;
}

.page-circle {
	margin-top: -16px;
}

.page-circle .sp-only {
	display: none !important;
}

@media (max-width: 768px) {
	.page-circle .sp-only {
		display: block !important;
	}
}

.page-circle .container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
	.page-circle .container {
		max-width: 1280px;
		width: 100%;
		padding: 0 24px;
	}
}

/* パンくず（therapist01 と同様） */
.page-circle .breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0 8px;
	padding: 12px 2em;
	margin-bottom: 120px;
	background-color: var(--color-gray-bg);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
	font-weight: var(--font-weight-bold);
	color: var(--color-gray-dark);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

@media (max-width: 768px) {
	.page-circle .breadcrumb {
		margin-bottom: 64px;
	}
}

.page-circle .breadcrumb::-webkit-scrollbar {
	display: none;
}

.page-circle .breadcrumb a,
.page-circle .breadcrumb span {
	white-space: nowrap;
}

.page-circle .breadcrumb a {
	color: var(--color-gray-dark);
	text-decoration: none;
}

.page-circle .breadcrumb a:hover {
	text-decoration: underline;
}

.page-circle .breadcrumb span {
	color: var(--color-gray-dark);
	user-select: none;
}

/* KVセクション（day_top と同構成・同スタイル。アニメーションは common/_footer.css の .title-animation で共通） */
.page-circle .circle-kv {
	position: relative;
	width: 100%;
}

.page-circle .circle-kv__image {
	width: 100%;
	line-height: 0;
}

.page-circle .circle-kv__image img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
}

@media (max-width: 1440px) {
	.page-circle .circle-kv__image {
		height: 270px;
		overflow: hidden;
	}
	.page-circle .circle-kv__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

@media (max-width: 768px) {
	.page-circle .circle-kv__image {
		height: 160px;
	}
}

.page-circle .circle-kv__text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 4.8125rem;
	box-sizing: border-box;
}

/* タイトル（page-column の column-kv__title に合わせた構成） */
.page-circle .circle-kv__title {
	margin: 0;
	display: flex;
	column-gap: 0.5rem;
	row-gap: 0.75rem;
	flex-wrap: wrap;
}

.page-circle .circle-kv__title-break {
	flex-basis: 100%;
	height: 0;
}

.page-circle .circle-kv__title .title-contact-text {
	display: flex;
}

.page-circle .circle-kv__title .mask-text {
	display: block;
	height: auto;
	width: auto;
}

@media (max-width: 768px) {
	.page-circle .circle-kv__text {
		height: auto;
		padding: 2.1875rem var(--container-padding-x-sp);
	}

	.page-circle .circle-kv__title {
		column-gap: 0.25rem;
		row-gap: 0.5rem;
	}

	.page-circle .circle-kv__title .mask-text {
		height: 2.5rem;
		width: 40px;
	}
}

/*--------------------------------------------------------------
# コンテンツエリア（パンくず以下 / Figma 1588-30151）
--------------------------------------------------------------*/

.page-circle {
	--circle-max: 1280px;
	--circle-border: 4px;
}

@media (max-width: 768px) {
	.page-circle {
		--circle-border: 2px;
	}
}

/* 六角形タイトル（circle内はFigma寄せ） */
.page-circle .hexagon-title {
	width: 362px;
	height: 71px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	--hex-border: var(--circle-border);
}

.page-circle .hexagon-title::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-black);
	clip-path: polygon(7.3% 2.8%, 92.7% 2.8%, 99.3% 50%, 92.7% 97.2%, 7.3% 97.2%, 0.7% 50%);
	z-index: 1;
}

.page-circle .hexagon-title::after {
	content: '';
	position: absolute;
	inset: var(--hex-border);
	background-color: var(--color-white);
	clip-path: polygon(7.3% 2.8%, 92.7% 2.8%, 99.3% 50%, 92.7% 97.2%, 7.3% 97.2%, 0.7% 50%);
	z-index: 2;
}

/* 1024px〜768px で画面幅に応じてフォントが縮小（他画面と同様） */
.page-circle .hexagon-title-text {
	font-size: clamp(1.25rem, 0.5rem + 1.5vw, 1.75rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	position: relative;
	z-index: 3;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.page-circle .hexagon-title {
		width: 294px;
		height: 60px;
	}

	.page-circle .hexagon-title-text {
		font-size: 20px;
	}
}

/* 導入 */
.page-circle .circle-intro {
	position: relative;
	max-width: 925px;
	margin: 80px auto 64px;
}

.page-circle .circle-intro__title {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 768px) {
	.page-circle .circle-intro__title {
		top: -30px;
	}
}

.page-circle .circle-intro__box {
	border: var(--circle-border) solid var(--color-black);
	border-radius: 10px;
	background: var(--color-white);
	padding: 44px 40px 36px;
}

.page-circle .circle-intro__text {
	margin: 0;
	font-size: clamp(1rem, 0.5rem + 1vw, 1.125rem);
	line-height: 1.6;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	text-align: center;
}

@media (max-width: 768px) {
	.page-circle .circle-intro {
		margin: 40px auto 64px;
	}

	.page-circle .circle-intro__box {
		padding: 40px 20px 24px;
	}

	.page-circle .circle-intro__text {
		font-size: 16px;
		text-align: left;
	}
}

/* 共通：虹アイコン付き箇条書き */
.page-circle .circle-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.page-circle .circle-bullet {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 8px;
	align-items: start;
}

.page-circle .circle-bullet__icon {
	margin-top: 5px;
	width: 14px;
	height: 14px;
	display: block;
}

.page-circle .circle-bullet__text {
	font-size: clamp(0.875rem, 0.4rem + 0.8vw, 1rem);
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
}

@media (max-width: 768px) {
	.page-circle .circle-bullets {
		gap: 12px;
	}

	.page-circle .circle-bullet__text {
		font-size: 14px;
	}
}

/* 横長六角形タイトル */
.page-circle .circle-wide-hex {
	--wide-hex-border: var(--circle-border);
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	width: min(526px, 92%);
	height: 71px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-circle .circle-wide-hex::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-black);
	clip-path: polygon(4.4% 2.8%, 95.6% 2.8%, 98.8% 50%, 95.6% 97.2%, 4.4% 97.2%, 1.2% 50%);
	z-index: 1;
}

.page-circle .circle-wide-hex::after {
	content: '';
	position: absolute;
	inset: var(--wide-hex-border);
	background: var(--color-white);
	clip-path: polygon(4.4% 2.8%, 95.6% 2.8%, 98.8% 50%, 95.6% 97.2%, 4.4% 97.2%, 1.2% 50%);
	z-index: 2;
}

.page-circle .circle-wide-hex__text {
	position: relative;
	z-index: 3;
	font-size: clamp(1.125rem, 0.5rem + 1.2vw, 1.5rem);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* 研究-学会発表部：グリッド基準で左右中央に配置 */
.page-circle .circle-wide-hex.circle-wide-hex--panel {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 1024px) {
	.page-circle .circle-wide-hex.circle-wide-hex--panel {
		top: -30px;
	}
}

@media (max-width: 768px) {
	.page-circle .circle-wide-hex {
		top: -30px;
		height: 60px;
	}

	.page-circle .circle-wide-hex__text {
		font-size: 20px;
	}
}

/* 研究-学会発表部 */
/* 幅の伸び方は .circle-clubs に合わせる（max-width なしでコンテナ幅いっぱい） */
.page-circle .circle-feature {
	margin: 0 auto 56px;
}

/* .circle-clubs__grid と同様に max-width なし。中は半分ずつ均等に伸縮 */
.page-circle .circle-feature__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.page-circle .circle-feature__image {
	border: var(--circle-border) solid var(--color-black);
	border-radius: 4px 0 0 4px;
	overflow: hidden;
	background: var(--color-gray-bg);
	position: relative;
}

.page-circle .circle-feature__image-main {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 右パネル：Figmaでは下角のみ角丸、左端は画像と接続（六角形はグリッド基準のため position なし） */
.page-circle .circle-feature__panel {
	border: var(--circle-border) solid var(--color-black);
	border-left: none;
	border-radius: 0 4px 4px 0;
	background: var(--color-white);
	padding: 56px 36px 28px;
	box-sizing: border-box;
}

.page-circle .circle-feature__notes {
	margin-top: 20px;
	display: grid;
	gap: 12px;
	margin-left: 24px;
}

.page-circle .circle-feature__note {
	margin: 0;
	font-size: clamp(0.6875rem, 0.3rem + 0.6vw, 0.75rem);
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
}

/* 768px以下：.circle-club-card と同じカードレイアウト（画像上・コンテンツ下） */
@media (max-width: 768px) {
	.page-circle .circle-feature__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		gap: 0;
	}

	.page-circle .circle-feature__image {
		border-radius: 4px 4px 0 0;
		border-bottom: none;
		aspect-ratio: 620 / 335;
		height: auto;
	}

	.page-circle .circle-feature__panel {
		position: relative; /* h3 を .circle-club-card__content と同じくパネル基準で配置 */
		border-left: var(--circle-border) solid var(--color-black);
		border-radius: 0 0 4px 4px;
		height: auto;
		min-height: 0;
		padding: 48px 20px 20px;
	}

	.page-circle .circle-feature__note {
		font-size: 12px;
	}

	.page-circle .circle-feature {
		margin-bottom: 40px;
	}
}

/* 部活カード */
.page-circle .circle-clubs {
	margin: 0 auto;
	padding-bottom: 40px;
}

.page-circle .circle-clubs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.page-circle .circle-club-card {
	display: grid;
	grid-template-rows: auto 1fr;
}

.page-circle .circle-club-card__image {
	border: var(--circle-border) solid var(--color-black);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
	background: var(--color-gray-bg);
	aspect-ratio: 620 / 335;
}

.page-circle .circle-club-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-circle .circle-club-card__content {
	position: relative; /* h3.circle-wide-hex の配置基準 */
	border: var(--circle-border) solid var(--color-black);
	border-radius: 0 0 4px 4px;
	background: var(--color-white);
	padding: 56px 36px 28px;
}

@media (max-width: 768px) {
	.page-circle .circle-clubs__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.page-circle .circle-club-card__content {
		padding: 48px 20px 20px;
	}
}