:root {
	/* メインカラー */
	--primary: #3AACAE;
	--primary-light: #4BBCBE;
	--primary-dark: #2A9C9E;
	/* アクセントカラー */
	--accent: #FF4B4B;
	--accent-light: #FF6B6B;
	--accent-dark: #E63E3E;
	/* サブカラー */
	--secondary: #FFB7C5;
	--secondary-light: #FFD7E5;
	--secondary-dark: #FF97A5;
	/* 背景色 */
	--background: #FFF9E6;
	--background-light: #FFFDF5;
	--background-dark: #F5EFD6;
	/* テキストカラー */
	--text: #333333;
	--text-light: #666666;
	--text-dark: #000000;
	/* その他の色 */
	--gray-light: #E5E5E5;
	--gray-lightest: #F5F5F5;
	--teal: var(--primary);
	--soft-yellow: var(--background);
}
/* リセットCSS */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--background);
	font-size: 16px;
}
/* 共通レイアウト */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	margin-bottom: 1.5rem;
	/* フッターとの余白を追加 */
}
.main {
	padding: 0;
	min-height: calc(100vh - 500px);
	/* フッターが下部に固定されるように最小の高さを設定 */
}
/* セクション共通 */

.section {
	margin-bottom: 1.5rem;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 2rem;
}
/* セクションタイトル - h2レベルの見出しとして使用 */

.section-title {
	font-size: 1.75rem;
	color: #0e5474 !important;
	margin: 0 -2rem 1.5rem;
	padding: 0 2rem 0.5rem;
	border-bottom: 3px solid #0e5474;
	position: relative;
}
.section-title::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #0e5474;
}
/* h3レベルの見出しは通常のh2タグを使用 */

h3 {
	font-size: 1.5rem;
	color: #fff;
	background: #0e5474;
	padding: 0.5rem 1.2rem;
	margin: 1.5rem 0 1rem;
	position: relative;
	line-height: 1.4;
}
/* h3の左端に装飾 */

h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 4px;
	background: #0e5474;
}
/* ヘッダー */

.header {
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 100%;
	z-index: 1000;
	position: relative;
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.title-logo {
	width: 200px; /* デスクトップ向けの新しいサイズ */
	height: auto; /* 縦横比を維持 */
	max-width: 100%; /* オーバーフロー防止 */
	margin: 0;
}
.header-menus {
	flex: 1;
	margin-left: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* ユーティリティナビゲーション */

.utility-nav {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: flex-end;
}
.utility-nav-item {
	text-decoration: none;
	color: var(--text);
	font-size: 0.875rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--text-light);
	border-radius: 4px;
	white-space: nowrap;
	transition: all 0.3s ease;
}
.utility-nav-item:hover {
	background-color: var(--background-light);
	border-color: var(--primary);
	color: var(--primary);
}
/* メインナビゲーション */

.nav {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.nav-item {
	text-decoration: none;
	color: #ffffff;
	padding: 0.8rem;
	text-align: center;
	position: relative;
	display: block;
	transition: all 0.3s ease;
	border-radius: 4px;
	font-size: 1rem;
	background-color: #FF8B9E;
	min-width: 200px;
	margin: 0;
	border: none;
	font-weight: 500;
}
@media (max-width: 1073px) {
	.title-logo {
		width: 150px;
	}
	
	.nav {
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		width: 100%;
		height: calc(100vh - 60px);
		background: white;
		z-index: 1999;
		overflow-y: auto;
	}
	.nav.active {
		display: flex;
		flex-direction: column;
	}
	.nav.active::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: white;
		z-index: 2000;
	}
	.nav-group {
		margin: 0;
	}
	.nav-group-items {
		position: static;
		width: 100%;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		margin: 0;
		padding: 0;
		display: none;
	}
	.nav-group-items.active {
		display: none;
	}
	.nav-subitem {
		padding: 0.5rem 1.5rem;
		margin: 0;
	}
	.pc-only {
		display: none !important;
	}
	.sp-only {
		display: block !important;
	}
}
@media (min-width: 1074px) {
	.nav-item {
		text-align: center;
		width: 240px;
		margin: 0 auto;
		border: none;
		padding: 0.8rem;
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.nav-item:hover {
	color: var(--primary);
	background-color: var(--background-light);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-group {
	position: relative;
	display: inline-block;
}
.nav-group-items {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	min-width: 220px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	z-index: 1000;
	padding: 0.5rem 0;
	border: 1px solid var(--background-dark);
}
.nav-group:hover .nav-group-items {
	display: block;
	animation: fadeInDown 0.3s ease-out forwards;
}
.nav-subitem {
	display: block;
	padding: 0.8rem 1.5rem;
	text-decoration: none;
	color: var(--text);
	border-bottom: 1px solid var(--background-dark);
	transition: all 0.3s ease;
}
.nav-subitem:last-child {
	border-bottom: 1px solid var(--background-dark);
}
.nav-subitem:hover {
	background-color: var(--background-light);
	color: var(--primary);
	border: 1px solid var(--background-dark);
	margin: -1px;
}
/* ハンバーガーメニュー */

.mobile-menu-button {
	display: none;
	position: fixed;
	z-index: 2000;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: #fff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease;
}
.mobile-menu-button span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px auto;
	background-color: #333;
	transition: all 0.3s ease-in-out;
	position: relative;
}
/* ハンバーガーメニューのアニメーション */

.mobile-menu-button.active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mobile-menu-button.active span:nth-child(2) {
	opacity: 0;
}
.mobile-menu-button.active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 1073px) {
	.mobile-menu-button {
		display: block;
	}
}
/* メニューオープン時の背景固定 */

body.menu-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
body.menu-open .container, body.menu-open .main, body.menu-open .footer {
	display: none;
}
/* PC表示時の設定 */

@media (min-width: 1074px) {
	.mobile-menu-button {
		display: none;
	}
	.header-menus {
		display: flex;
		flex-direction: column;
	}
	.nav-top, .nav-bottom {
		display: flex;
		justify-content: flex-start;
		gap: 1.5rem;
	}
	/* PCでのみフレックスレイアウトを適用 */
	.nav-group {
		position: relative;
		display: inline-block;
	}
	/* PC表示時のドロップダウンメニュー */
	.nav-group-items {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		min-width: 220px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		z-index: 1000;
		padding: 0.5rem 0;
		border: 1px solid var(--background-dark);
	}
	.nav-group:hover .nav-group-items {
		display: block;
	}
}
/* イベントページ専用スタイル */

.cta-box {
	background-color: var(--primary);
	color: white;
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
	margin: 2rem 0;
}
.cta-box h3 {
	margin: 0 0 1rem 0;
}
.cta-box a.cta-link {
	color: white;
	text-decoration: none;
	border-bottom: 2px solid white;
	padding-bottom: 2px;
	transition: all 0.3s ease;
}
.cta-box a.cta-link:hover {
	opacity: 0.8;
}
.introduction {
	margin: 2rem 0;
	line-height: 1.8;
}
.info-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.info-list li {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
	position: relative;
}
.info-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--primary);
}
.event-list {
	list-style: none;
	padding-left: 1.5rem;
}
.event-list li {
	margin-bottom: 0.5rem;
	position: relative;
}
.event-list li::before {
	content: "•";
	position: absolute;
	left: -1.5rem;
	color: var(--primary);
}
/* タイムテーブル */

.table-responsive {
	overflow-x: auto;
	margin: 1rem 0;
}
.timetable {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
}
.timetable th, .timetable td {
	border: 1px solid var(--gray-light);
	padding: 1rem;
	text-align: left;
	vertical-align: top;
}
.timetable th {
	background-color: var(--gray-lightest);
	font-weight: bold;
}
/* フッター */
.footer {
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    padding: 0;
    width: 100%;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* フッターの上部（3分割） */
.footer-top {
    display: flex;
    padding: 20px 0 10px;
    position: relative;
}

/* 左側：リンク集 */
.footer-links-container {
    width: 25%;
    padding-right: 30px;
    padding-top: 10px;
}

/* 左右の区切り線 */
.footer-divider {
    position: absolute;
    left: 25%;
    top: 15px;
    bottom: 20px;
    width: 1px;
    background-color: #e5e5e5;
}

.footer-links {
    list-style: none;
    display: block;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: #333333;
    text-decoration: none;
    font-size: 16px;
}

.footer-links li a:hover {
    text-decoration: underline;
}

/* 中央：事務局情報 */
.office-info {
    width: 45%;
    padding: 10px 30px 0;
}

.office-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.office-address {
    font-size: 16px;
    margin-bottom: 5px;
}

/* 右側：ロゴ */
.logo-container {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 10px;
}

.akajan-logo {
    max-width: 300px; /* 1.5倍に拡大 */
    height: auto;
}

/* SNSリンク */
.social-links {
    display: flex;
    flex-direction: column; /* 縦並びに変更 */
    gap: 15px; /* 間隔を15pxに広げる */
    margin-top: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

/* コピーライト */
.copyright {
    font-size: 14px;
    color: #333333;
    padding: 0 0 20px;
    margin-top: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
    }
    
    .footer-links-container, .office-info, .logo-container {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .logo-container {
        justify-content: flex-start;
    }
    
    .footer-divider {
        display: none;
    }
}
/* サイトマップ */

.sitemap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
.sitemap-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sitemap-title {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: #fff;
}
.sitemap-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sitemap-item {
	margin-bottom: 0.3rem;
}
.sitemap-link {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
}
.sitemap-link:hover {
	text-decoration: underline;
}
.footer-copyright {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	grid-column: 1 / -1;
}
/* アニメーション */

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate(-50%, -10px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}
/* レスポンシブ対応 */
/* レスポンシブ対応 */

@media (max-width: 1073px) {
	.nav {
		display: none;
		position: fixed;
		/* 追加: 画面全体に表示 */
		top: 60px;
		/* 追加: ヘッダーの高さ分下げる */
		left: 0;
		width: 100%;
		height: calc(100vh - 60px);
		/* 追加: ビューポートの高さからヘッダー分を引く */
		background: white;
		z-index: 1999;
		/* 追加: 他の要素より前面に */
		overflow-y: auto;
		/* 追加: スクロール可能に */
	}
	.nav.active {
		display: block;
		/* 変更: flexからblockに */
	}
	.mobile-menu-button {
		display: block;
		position: fixed;
		/* 変更: absoluteからfixedに */
		top: 1rem;
		right: 1rem;
		z-index: 2000;
	}
	.nav-top, .nav-bottom {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0.5rem;
		/* 追加: 内側の余白 */
		gap: 0.1rem;
	}
	.nav-item {
		width: 100%;
		text-align: left;
		padding: 1rem 1.5rem;
		margin: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		background: white;
		/* 追加: 背景色を明示 */
		font-size: 1rem;
		/* フォントサイズを明示的に指定 */
	}
	.nav-group {
		position: relative;
		width: 100%;
	}
	.nav-group-items {
		position: static;
		width: 100%;
		transform: none;
		left: auto;
		border: none;
		border-left: 2px solid #FF8B9E;
		margin: 0;
		padding-left: 1rem;
		box-shadow: none;
		display: none;
		background: white;
		/* 追加: 背景色を明示 */
	}
	.nav-subitem {
		padding: 0.8rem 1.5rem;
		width: 100%;
		text-align: left;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		/* 追加: 区切り線 */
	}
	.nav-subitem:last-child {
		border-bottom: none;
		/* 追加: 最後の区切り線を削除 */
	}
	/* 追加: メニュー表示時の背景オーバーレイ */
	body.menu-open::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}
}

/* 最後の要素の下マージンを削除 */

.section p:last-child, .section ul:last-child, .section table:last-child, .activity-list:last-child {
	margin-bottom: 0;
}
/* ボタンは余白から除外 */

.btn {
	padding-left: initial;
}
/* h4のスタイル */

h4 {
	font-size: 1.25rem;
	/* h3(1.5rem)より少し小さく */
	color: #0e5474;
	/* h2, h3と同じ緑色 */
	margin: 1.5rem 0 1rem;
	/* 上1.5rem、下1remの余白 */
	padding-left: 0.5em;
	/* 左側の余白を本文と揃える */
}
/* h4の後に来る要素との間隔 */

h4+p, h4+ul, h4+table {
	margin-top: 0.5rem;
	/* 直後の要素との間隔 */
}
/* リストのスタイル調整 */

/* リストのスタイル調整 */

.section ul {
	list-style: none;
	padding-left: 2em;
}
.section ul li {
	position: relative;
}

.section:last-child {
    margin-bottom: 0;
}

/* サークルの日についてのセクション */
.circles-introduction {
    margin-bottom: 2rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section {
        margin-bottom: 1.5rem;
    }
    
    .circles-introduction {
        margin-bottom: 1.5rem;
    }
    
    .support-banner {
        padding: 0.75rem 2rem;
    }
}
/* サポートバナーのスタイル */

.support-banners {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0 auto 1.5rem;
	max-width: 1200px;
	padding: 0 1rem;
}
.support-banner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 2rem;
	background: #0e5474;
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(14, 84, 116, 0.3);
	margin: 0;
	width: 100%;
}
.banner-icon {
	flex-shrink: 0;
	width: 80px;
	/* サイズを大きく */
	height: 80px;
	/* サイズを大きく */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
}
.banner-icon img {
	width: 56px;
	/* アイコンのサイズも調整（親要素の70%） */
	height: 56px;
}
.banner-title {
	font-size: 1.5rem;
	color: #fff;
	margin: 0;
	background: none;
	padding: 0;
	font-weight: bold;
}
.banner-title::before {
	display: none;
}
/* モバイル対応 */

@media (max-width: 768px) {
	.support-banner {
		flex-direction: row;
		text-align: left;
		padding: 1rem 1.5rem;
		gap: 1rem;
	}
	.banner-icon {
		width: 60px;
		height: 60px;
		margin: 0;
	}
	.banner-icon img {
		width: 42px;
		height: 42px;
	}
	.banner-title {
		font-size: 1.25rem;
	}
}

@media (max-width: 1073px) {
	.main-banner {
		flex-direction: column;
		text-align: center;
		padding: 2rem;
		gap: 1.5rem;
		min-width: 100%;
	}
	.main-banner-icon {
		margin: 0 auto;
	}
	.main-banner-title {
		font-size: 1.75rem;
	}
}
/* ブログページ */

.blog-section {
	margin-bottom: 3rem;
}
.blog-section h3 {
	font-size: 1.5rem;
	color: var(--primary);
	margin-bottom: 1rem;
}
.blog-section p {
	margin-bottom: 1rem;
	line-height: 1.8;
}
.blog-links {
	margin: 2rem 0;
}
/* .blog-links h4 {
	font-size: 1.2rem;
	color: var(--text);
	margin: 2rem 0 1rem;
} */
.blog-link-item {
	background: var(--background-light);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
	border: 1px solid var(--background-dark);
}
.blog-link-item a {
	color: var(--primary);
	text-decoration: none;
	font-weight: bold;
	word-break: break-all;
}
.blog-link-item a:hover {
	text-decoration: underline;
}
.blog-link-item p {
	margin: 0.5rem 0 0;
	font-size: 1rem;
}
.blog-note {
	color: var(--text-light);
	font-style: italic;
}
/* サークル紹介ページ */

.circles-section {
	margin-bottom: 3rem;
}
.circles-section h3 {
	font-size: 1.5rem;
	color: var(--primary);
	margin-bottom: 1rem;
}
.circles-section h4 {
	font-size: 1.2rem;
	color: var(--text);
	margin: 2rem 0 1rem;
}
.circles-section p {
	margin-bottom: 1rem;
	line-height: 1.8;
}
.circles-section a {
	color: var(--primary);
	text-decoration: none;
	word-break: break-all;
}
.circles-section a:hover {
	text-decoration: underline;
}
@media (max-width: 768px) {
	.blog-link-item, .circles-section {
		padding: 1rem;
	}
}
/* 共通セクションスタイル */

.section-content {
	margin-bottom: 3rem;
}
.section-content h3 {
	font-size: 1.5rem;
	color: var(--primary);
	margin-bottom: 1rem;
	position: relative;
	padding-left: 1rem;
}
.section-content h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2rem;
	bottom: 0.2rem;
	width: 4px;
	background: var(--primary);
	border-radius: 2px;
}
.section-content h4 {
	font-size: 1.2rem;
	color: var(--text);
	margin: 2rem 0 1rem;
}
.section-content p {
	margin-bottom: 1.5rem;
	line-height: 1.8;
}
/* リンクカード共通スタイル */

.link-card {
	background: var(--background-light);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
	border: 1px solid var(--background-dark);
}
.link-card:hover {
	background: var(--background);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.link-card a {
	color: var(--primary);
	text-decoration: none;
	font-weight: bold;
	word-break: break-all;
}
.link-card a:hover {
	text-decoration: underline;
}
.link-card p {
	margin: 0.5rem 0 0;
	font-size: 1rem;
}
/* ソーシャルリンク共通スタイル */

.social-links-container {
	display: flex;
	gap: 1.5rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}
.social-link-button {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--text);
	text-decoration: none;
	font-size: 1rem;
	padding: 1rem 1.5rem;
	background: var(--background-light);
	border-radius: 8px;
	transition: all 0.3s ease;
	border: 1px solid var(--background-dark);
}
.social-link-button:hover {
	background: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--text);
	color: var(--text);
}
.social-link-button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
/* ブログページ */

.blog-section {
	margin-bottom: 3rem;
}
.blog-links {
	margin: 2rem 0;
}
.blog-link-item {
	background: var(--background-light);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
	border: 1px solid var(--background-dark);
}
.blog-note {
	color: var(--text-light);
	font-style: italic;
}
/* サークル紹介ページ */

.circles-section {
	margin-bottom: 3rem;
}
/* お問い合わせページ */

.contact-section {
	margin-bottom: 3rem;
}
.social-contact {
	display: flex;
	gap: 1.5rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}
.social-contact-link {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--text);
	text-decoration: none;
	font-size: 1rem;
	padding: 1rem 1.5rem;
	background: var(--background-light);
	border-radius: 8px;
	transition: all 0.3s ease;
	border: 1px solid var(--background-dark);
}
.form-container {
	margin: 2rem 0;
	background: #fff;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-container iframe {
	width: 100%;
	min-height: 600px;
	border: none;
}
.sns-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sns-list li {
	background: var(--background-light);
	padding: 1.5rem;
	border-radius: 8px;
}
.sns-account {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.sns-account img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
/* レスポンシブ対応 */

@media (max-width: 768px) {
	.social-links-container, .social-contact {
		flex-direction: column;
	}
	.social-link-button, .social-contact-link {
		width: 100%;
		justify-content: center;
	}
	.link-card, .form-container {
		padding: 1rem;
	}
}
/* タイトルバナー */

.page-title-banner {
	background: #0E5474; /* 紺色の背景 */
	color: white;
	padding: 1.2rem 2rem;
	border-radius: 0; /* 角丸なし */
	margin: 1.5rem 0 1.5rem;
	position: relative;
	text-align: left; /* 左寄せに統一 */
}

.page-title-banner h1 {
	font-size: 1.75rem;
	margin: 0;
	font-weight: bold; /* ボールド体 */
	line-height: 1.3;
}

/* ヘッダーレイアウト */

.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1rem;
}
.logo-link {
	flex-grow: 1;
}
/* ナビゲーション */

.nav-top, .nav-bottom {
	display: flex;
	justify-content: center;
	gap: 1rem;
	position: relative;
}
.nav-group {
	position: relative;
	display: flex;
	justify-content: center;
	width: auto;
}
/* ドロップダウンメニュー */

.nav-group-items {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
	width: 100%;
	background-color: #ffffff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border: 2px solid #FF8B9E;
	border-radius: 8px;
	z-index: 1000;
	padding: 0.3rem;
	overflow: hidden;
}
/* ナビゲーションボタン */

.nav-item {
	display: block;
	padding: 0.8rem 0.8rem;
	text-decoration: none;
	color: #ffffff;
	background-color: #FF8B9E;
	border-radius: 4px;
	text-align: center;
	min-width: 200px;
	transition: all 0.3s ease;
	border: none;
	font-weight: 500;
}
.nav-item:hover {
	background-color: #ffffff;
	color: #FF8B9E;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid #FF8B9E;
}
/* サブメニュー項目 */

.nav-subitem {
	display: block;
	padding: 0.8rem 1rem;
	color: #333333;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease;
	background-color: transparent;
	border: 2px solid transparent;
	white-space: normal;
	border-radius: 4px;
	width: 100%;
	margin: 0;
}
.nav-subitem:last-child {
	border: 2px solid transparent;
}
.nav-subitem:hover {
	background-color: #FFF0F3;
	border: 2px solid #FF8B9E;
	color: #333333;
	margin: -2px -2px -2px 0;
	position: relative;
	z-index: 1;
}

.section:last-child {
    margin-bottom: 0;
}

/* モバイル対応 */

@media (max-width: 768px) {
	.nav-item {
		padding: 0.6rem 1rem;
		font-size: 1rem;
	}
	.nav-group-items {
		margin-left: 0.5rem;
	}
	.section {
		margin-bottom: 1.5rem;
	}
}
@media (min-width: 1074px) {
	.mobile-menu-button {
		display: none;
	}
	.nav {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.nav-item {
		padding: 0.8rem 0.8rem;
		font-size: 1rem;
	}
}
/* 本文コンテンツの余白設定 */

.section p, .section ul, .section table, .activity-list {
	padding: 0 0.5em;
	margin-bottom: 1rem;
}
/* 最後の要素の下マージンを削除 */

.section p:last-child, .section ul:last-child, .section table:last-child, .activity-list:last-child {
	margin-bottom: 0;
}
/* ボタンは余白から除外 */

.btn {
	padding-left: initial;
}
/* h4のスタイル */

h4 {
	font-size: 1.25rem;
	/* h3(1.5rem)より少し小さく */
	color: #0e5474;
	/* h2, h3と同じ緑色 */
	margin: 1.5rem 0 1rem;
	/* 上1.5rem、下1remの余白 */
	padding-left: 0.5em;
	/* 左側の余白を本文と揃える */
}
/* h4の後に来る要素との間隔 */

h4+p, h4+ul, h4+table {
	margin-top: 0.5rem;
	/* 直後の要素との間隔 */
}
/* リストのスタイル調整 */

.section ul {
	list-style: none;
	padding-left: 2em;
}
.section ul li {
	position: relative;
	padding-left: 0;
	text-indent: 0;
}
.section ul li::before {
	content: "•";
	position: absolute;
	left: -1.5em;
	width: 1em;
	text-align: center;
}
/* サポートバナーのスタイル */

.support-banner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 2rem;
	background: #0e5474;
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(14, 84, 116, 0.3);
	margin: 0;
	width: 100%;
}
.support-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(14, 84, 116, 0.4);
	background-color: #ffffff;
	color: #0e5474;
	border: 2px solid #0e5474;
}
.support-banner:hover .banner-icon {
	border: 2px solid #0e5474;
}
.support-banner:hover .banner-title {
	color: #0e5474;
}
/* LINE申し込みバナー専用スタイル */

.support-banner[style*="background-color: #06C755"] {
	background: #06C755 !important;
	color: #fff;
	border: 2px solid transparent;
	box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
}
.support-banner[style*="background-color: #06C755"]:hover {
	background-color: #ffffff !important;
	color: #06C755;
	border: 2px solid #06C755;
	box-shadow: 0 6px 16px rgba(6, 199, 85, 0.4);
}
.support-banner[style*="background-color: #06C755"]:hover .banner-icon {
	border: 2px solid #06C755;
}
.support-banner[style*="background-color: #06C755"]:hover .banner-title {
	color: #06C755;
}
.support-banner[style*="background-color: #06C755"]:hover .banner-description {
	color: #06C755;
}
.support-banner[style*="background-color: #06C755"]:hover .new-window-icon {
	stroke: #06C755;
}
.banner-content {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex: 1;
}

.banner-text {
	flex: 1;
	min-width: 0;
}

.support-banner .new-window-icon {
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.banner-content {
		gap: 1rem;
	}
}
.banner-icon {
	flex-shrink: 0;
	width: 80px;
	/* サイズを大きく */
	height: 80px;
	/* サイズを大きく */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
.banner-icon img {
	width: 56px;
	/* アイコンのサイズも調整（親要素の70%） */
	height: 56px;
}
.banner-title {
	font-size: 1.5rem;
	color: #fff;
	margin: 0;
	background: none;
	padding: 0;
	font-weight: bold;
	transition: color 0.3s ease;
}
.banner-title::before {
	display: none;
}
/* メインバナー */

.main-banners {
	display: flex;
	gap: 1.5rem;
	margin: 0 0 1.5rem;
	flex-wrap: wrap;
}
.main-banner {
	flex: 1;
	min-width: 300px;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.5rem 3rem;
	/* パディングを上下1.5rem、左右3remに調整 */
	background: #0e5474;
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(14, 84, 116, 0.3);
}
.main-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(14, 84, 116, 0.4);
	background-color: #ffffff;
	color: #0e5474;
	border: 2px solid #0e5474;
}
.main-banner:hover .main-banner-icon {
	border: 2px solid #0e5474;
}
.main-banner:hover .main-banner-title {
	color: #0e5474;
}
.main-banner-icon {
	flex-shrink: 0;
	width: 160px;
	/* サイズを大きく */
	height: 160px;
	/* サイズを大きく */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
.main-banner-icon img {
	width: 112px;
	/* アイコンのサイズも調整（親要素の70%） */
	height: 112px;
}
.main-banner-title {
	font-size: 2rem;
	color: #fff;
	margin: 0;
	background: none;
	padding: 0;
	font-weight: bold;
	transition: color 0.3s ease;
}
.main-banner-title::before {
	display: none;
}

/* セクション内のリンクバナー */

.section-link-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 2px solid #0e5474;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
    margin: 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
}

.section-link-banner:hover {
    background: var(--background-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(14, 84, 116, 0.2);
}

.section-link-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.section-link-banner-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.section-link-banner-content {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

.section-link-banner-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: #0e5474;
    margin: 0 0 0.5rem 0;
    position: relative;
    padding-right: 24px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    transition: color 0.3s ease;
}

.section-link-banner:hover .section-link-banner-title {
    color: #0e5474;
}

.section-link-banner-description {
    font-size: 1rem;
    color: var(--text);
    margin: 0;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

.section-link-banner .new-window-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .section-link-banner {
        padding: 1rem;
        gap: 1rem;
    }
    
    .section-link-banner-icon {
        width: 40px;
        height: 40px;
    }
    
    .section-link-banner-icon img {
        width: 40px;
        height: 40px;
    }
    
    .section-link-banner-title {
        font-size: 1rem;
        padding-right: 20px;
    }
    
    .section-link-banner-description {
        font-size: 0.875rem;
    }
    
    .section-link-banner .new-window-icon {
        width: 14px;
        height: 14px;
    }
}
/* デバイス別表示制御 */

.pc-only {
	display: table;
}
.sp-only {
	display: none;
}
@media (max-width: 768px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
}
/* 新歓スケジュール表のスタイル */
.schedule-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.schedule-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	table-layout: auto;
	/* セル幅を均等に */
}

.schedule-table th, .schedule-table td {
	border: 1px solid #0e5474;
	padding: 1rem;
	text-align: left;
	vertical-align: top;
	width: 25%;
	/* 4列なので25%ずつ */
	white-space: nowrap;
}

.schedule-table td ul li {
	text-align: left; /* td内のliのtextを左寄せに */
}
/* コースリストのスタイル */

.schedule-table .course-list {
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
	padding-left: 1rem !important;
}
.schedule-table .course-list li {
	margin-bottom: 0.3rem !important;
}
.schedule-table .course-list li:last-child {
	margin-bottom: 0 !important;
}
.schedule-table th {
	background: rgba(14, 84, 116, 0.8);
	/* 元の色を少し薄く */
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.schedule-table td {
	line-height: 1.6;
	padding: 10px;
	vertical-align: middle; /* 上下中央揃え */
	min-width: 200px; /* 最小幅を設定 */
	word-wrap: break-word; /* 長いテキストを折り返す */
	text-align: center; /* 左右中央揃え */
}
.schedule-table td ul {
	margin: 0;
	padding-left: 20px; /* リストマーカーのためのスペース */
}
.schedule-table td ul li {
	margin-bottom: 5px; /* リスト項目間の間隔 */
}
.schedule-table td ul.bullet-list {
	list-style-position: inside; /* マーカーをテキスト内に配置 */
}
.schedule-table .time-column {
	white-space: nowrap;
	background: #f8fbfc;
	width: 20%;
	/* 時間帯の列は少し狭めに */
}
@media (max-width: 768px) {
	.schedule-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
	}
	/* スマートフォン表示用スタイル */
	.schedule-mobile .schedule-day {
		margin-bottom: 2rem;
	}
	.schedule-mobile .schedule-day:last-child {
		margin-bottom: 0;
	}
	.schedule-mobile h3 {
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}
	.schedule-mobile .schedule-time {
		margin-bottom: 1.5rem;
	}
	.schedule-mobile .schedule-time:last-child {
		margin-bottom: 0;
	}
	.schedule-mobile h4 {
		font-size: 1.125rem;
		margin-bottom: 0.5rem;
		color: #0e5474;
	}
	.schedule-table {
		min-width: 100px;
		margin: 0;
	}
	.schedule-table th, .schedule-table td {
		padding: 0.8rem;
		font-size: 1rem;
		min-width: 100px;
	}
}
/* 部署リストのスタイル */

.department-list {
	padding-left: 2rem;
	margin: 1rem 0;
}
.department-list>li {
	margin-bottom: 1.5rem;
}
.department-list ul {
	padding-left: 1.5rem;
	margin: 0.5rem 0;
}
.department-list ul li {
	margin: 0.25rem 0;
}

/* リンクルキャラクター表示エリアのスタイル */
.linkle-characters-container {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    background-color: var(--background);
    position: relative;
    margin: 10px 0;
    min-height: 50px; /* 最小高さを50pxに変更 */
}

.linkle-characters {
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    align-items: flex-end;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    flex-wrap: nowrap; /* 折り返しを禁止 */
    overflow: hidden; /* はみ出した部分を隠す */
    height: auto;
    min-height: 50px; /* 最小高さを50pxに変更 */
}

.linkle-character {
    width: 7.69%; /* 13個で100%になるように設定（100/13） */
    height: auto;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    min-height: 50px; /* 最小高さを50pxに変更 */
    object-fit: contain; /* アスペクト比を保持 */
    flex-shrink: 0; /* 縮小しないように変更 */
}

/* 右側のキャラクターが上に重なるようにする */
.linkle-character:nth-child(1) { z-index: 13; }
.linkle-character:nth-child(2) { z-index: 12; }
.linkle-character:nth-child(3) { z-index: 11; }
.linkle-character:nth-child(4) { z-index: 10; }
.linkle-character:nth-child(5) { z-index: 9; }
.linkle-character:nth-child(6) { z-index: 8; }
.linkle-character:nth-child(7) { z-index: 7; }
.linkle-character:nth-child(8) { z-index: 6; }
.linkle-character:nth-child(9) { z-index: 5; }
.linkle-character:nth-child(10) { z-index: 4; }
.linkle-character:nth-child(11) { z-index: 3; }
.linkle-character:nth-child(12) { z-index: 2; }
.linkle-character:nth-child(13) { z-index: 1; }

/* レスポンシブ対応 - 画面幅に応じて表示数を制限 */
@media (max-width: 1200px) {
    .linkle-character {
        width: 10%; /* 10個で100%になるように設定 */
    }
    .linkle-character:nth-child(n+11) {
        display: none; /* 11個目以降を非表示 */
    }
}

@media (max-width: 992px) {
    .linkle-character {
        width: 12.5%; /* 8個で100%になるように設定 */
    }
    .linkle-character:nth-child(n+9) {
        display: none; /* 9個目以降を非表示 */
    }
}

@media (max-width: 768px) {
    .linkle-characters {
        padding: 0 10px;
    }
    
    .linkle-character {
        width: 16.66%; /* 6個で100%になるように設定 */
    }
    
    .linkle-character:nth-child(n+7) {
        display: none; /* 7個目以降を非表示 */
    }
}

@media (max-width: 480px) {
    .linkle-character {
        width: 25%; /* 4個で100%になるように設定 */
    }
    
    .linkle-character:nth-child(n+5) {
        display: none; /* 5個目以降を非表示 */
    }
}

/* カルーセルのスタイル */
.carousel-container {
    width: 100%;
    max-width: 1200px;
    margin: 1.5rem auto 1.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 500px;
}

.carousel-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
    background-color: #ffffff;
}

.carousel-slide-link {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
}

/* JPEG画像用のスタイル - 画面いっぱいに表示 */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SVG画像用の特別なスタイル */
.carousel-slide img[src$=".svg"] {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* はっぴ用の特別なスタイル */
.carousel-slide[data-slide-type="happi"] {
    background-color: #ffffff;
}
.carousel-slide[data-slide-type="happi"] img {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* サークルの日ロゴ用の特別なスタイル */
.carousel-slide[data-slide-type="circles"] {
    background-color: #f6ed99;
}
.carousel-slide[data-slide-type="circles"] img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
}

/* 事務局ロゴ用の特別なスタイル */
.carousel-slide[data-slide-type="akajan"] {
    background-color: #ffffff;
}
.carousel-slide[data-slide-type="akajan"] img {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
}

.carousel-slide:hover img {
    transform: scale(1.05);
}

.carousel-slide:hover img[src$=".svg"] {
    transform: scale(1.05);
}

.carousel-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: left;
    text-shadow: none;
}

.carousel-navigation {
    position: absolute;
    bottom: 15px; /* 下部の位置を調整 */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 10;
}

.carousel-prev,
.carousel-next {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute; /* 絶対位置指定に変更 */
}

.carousel-prev {
    left: 15px; /* 左側に配置 */
}

.carousel-next {
    right: 15px; /* 右側に配置 */
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(255, 255, 255, 0.9);
}

.carousel-dots {
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: white;
    transform: scale(1.2);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .carousel-slides {
        height: 300px;
    }
    
    .carousel-slide-caption {
        font-size: 0.75rem;
        padding: 0.4rem;
        bottom: 0;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }
    
    .carousel-container {
        margin: 1.5rem auto 1.5rem; /* デスクトップと同じ余白を維持 */
    }
}

/* アクセシビリティのための視覚的に隠れた要素 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* サークルの日についてのセクション */
.circles-introduction {
    margin-bottom: 2rem;
}

.circles-introduction-content,
.theme-introduction-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.circles-introduction-logo {
    flex: 0 0 300px;
    width: 300px;
    aspect-ratio: 1;
}

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

.circles-introduction-text {
    flex: 1;
    min-width: 0;
}

.circles-introduction-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.circles-introduction-text h3 {
    margin: 2rem 0 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .circles-introduction-content,
	.theme-introduction-content {
        flex-direction: column;
        align-items: center;
    }

    .circles-introduction-text {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .circles-introduction-content,
	.theme-introduction-content {
        gap: 1rem;
    }
}

.summary-paragraph {
    margin-top: 1rem; /* 上部に2remの余白を追加 */
}