@charset "UTF-8";
/*
    Template: swell
    Theme Name: 学協 - GAKKYOU
    Theme URI: https://swell-theme.com/
    Description: 学費・奨学金情報サイト「学協」のSWELL子テーマ
    Version: 2.0.0
    Author: GAKKYOU
    Author URI: https://swell-theme.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===========================================
   SWELL デフォルト要素の非表示
   =========================================== */
body.home .p-mainVisual,
body.home .p-postSlider,
body.home .p-pickupBanners,
body.home .p-topSlider,
body.home .p-infoBar,
body.home .c-pageTitle,
body.home .l-sidebar,
body.home .p-postList,
body.home .p-blogCard,
body.home .p-postList__body,
body.home [class*="p-postSlider"],
body.home [class*="p-postList"],
body.home .l-scrollObserver {
	display: none !important;
}

body.home .l-header,
body.home .l-fixHeader {
	position: relative !important;
	background: transparent !important;
	z-index: 100 !important;
}

body.home .l-header .c-gnav,
body.home .l-header .l-header__nav {
	display: none !important;
}

/* ===========================================
   SWELLラッパーの制約解除
   =========================================== */
body.home {
	background: #fff !important;
	overflow-x: hidden !important;
}

body.home > div:not(.splash),
div.home.blog,
body > div[class*="home"] {
	z-index: auto !important;
	overflow: visible !important;
}

body.home .l-content,
body.home .l-mainContent,
body.home .l-mainContent__inner,
body.home .l-content__inner,
body.home .l-main--front,
body.home #content,
body.home main,
body.home .post_content,
body.home .l-mainContent__body,
body.home .l-content__main {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	overflow: visible !important;
}

body.home .l-footer,
body.home footer,
.l-footer,
footer.l-footer {
	position: relative !important;
	z-index: 999 !important;
}

body.home .l-header + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ===========================================
   Design Tokens
   =========================================== */
:root {
	--gk-blue: #3333CC;
	--gk-blue-light: #4472C4;
	--gk-orange: #FFA205;
	--fv-autoplay: 3s;
}

/* ===========================================
   Splash Screen
   =========================================== */
.splash {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 9999999 !important;
	background: #fff !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) !important;
	will-change: transform !important;
}

/* Phase 2: content fades out */
.splash.is-fadeout .splash__logo,
.splash.is-fadeout .splash__copy {
	opacity: 0 !important;
	transform: scale(0.95) !important;
	transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* Phase 3: curtain opens (split top/bottom) */
.splash::before,
.splash::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important; right: 0 !important;
	height: 50% !important;
	background: #fff !important;
	z-index: -1 !important;
	transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

.splash::before { top: 0 !important; }
.splash::after { bottom: 0 !important; top: auto !important; }

.splash.is-hidden::before {
	transform: translateY(-100%) !important;
}

.splash.is-hidden::after {
	transform: translateY(100%) !important;
}

.splash.is-hidden {
	pointer-events: none !important;
	background: transparent !important;
}

.splash.is-hidden .splash__deco {
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.splash__deco {
	position: absolute !important;
	border-radius: 50% !important;
	opacity: 1 !important;
}

.splash__deco--1 {
	width: 500px !important; height: 500px !important;
	background: radial-gradient(circle, rgba(51,51,204,0.08) 0%, transparent 70%) !important;
	top: -150px !important; right: -100px !important;
}

.splash__deco--2 {
	width: 350px !important; height: 350px !important;
	background: radial-gradient(circle, rgba(255,162,5,0.08) 0%, transparent 70%) !important;
	bottom: -100px !important; left: -80px !important;
}

.splash__deco--3 {
	width: 200px !important; height: 200px !important;
	background: radial-gradient(circle, rgba(68,114,196,0.06) 0%, transparent 70%) !important;
	top: 40% !important; left: 60% !important;
}

.splash__logo {
	height: 48px !important; margin-bottom: 28px !important;
	opacity: 1 !important;
	position: relative !important; z-index: 1 !important;
}

.splash__copy {
	font-size: 26px !important; font-weight: 800 !important; color: #222 !important;
	letter-spacing: 0.14em !important;
	position: relative !important; z-index: 1 !important; overflow: visible !important;
}

.splash__copy span {
	display: inline-block !important; opacity: 1 !important;
	transform: none !important;
}

/* ===========================================
   FV Section
   =========================================== */
.fv {
	background: linear-gradient(160deg, #fff 5%, rgba(51,51,204,0.08) 30%, rgba(68,114,196,0.10) 50%, rgba(255,162,5,0.05) 70%, #fff 95%) !important;
	padding: 80px 0 48px !important;
	margin-top: -60px !important;
	opacity: 0;
	transition: opacity 0.5s ease;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	position: relative !important;
	z-index: 2 !important;
	overflow: hidden !important;
}

.fv.is-loaded { opacity: 1; }

/* FV下部のフェード不要 — グラデーションはグレー線まで */

.fv__deco {
	position: absolute !important;
	border-radius: 50% !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.fv__deco--1 {
	width: 650px !important; height: 650px !important;
	background: radial-gradient(circle, rgba(51,51,204,0.15) 0%, transparent 70%) !important;
	top: -150px !important; right: -100px !important;
	animation: fvFloat1 7s ease-in-out infinite !important;
}

.fv__deco--2 {
	width: 550px !important; height: 550px !important;
	background: radial-gradient(circle, rgba(68,114,196,0.12) 0%, transparent 70%) !important;
	bottom: -5% !important; left: 10% !important;
	animation: fvFloat2 9s ease-in-out infinite !important;
}

.fv__deco--3 {
	width: 400px !important; height: 400px !important;
	background: radial-gradient(circle, rgba(51,51,204,0.08) 0%, transparent 70%) !important;
	top: 30% !important; left: 45% !important;
	animation: fvFloat3 11s ease-in-out infinite !important;
}

@keyframes fvFloat1 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-80px,50px) scale(1.12)} 66%{transform:translate(30px,-20px) scale(0.95)} 100%{transform:translate(0,0) scale(1)} }
@keyframes fvFloat2 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-70px) scale(1.1)} 66%{transform:translate(-40px,30px) scale(0.96)} 100%{transform:translate(0,0) scale(1)} }
@keyframes fvFloat3 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-50px,40px) scale(1.15)} 66%{transform:translate(40px,-30px) scale(0.92)} 100%{transform:translate(0,0) scale(1)} }

.fv__inner {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 48px !important;
}

.fv__head {
	display: flex !important; align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: -2px !important;
	position: relative !important; z-index: 3 !important;
}

.fv__label {
	display: inline-block !important; font-size: 16px !important; font-weight: 700 !important;
	color: #fff !important; background: #1a0dab !important;
	padding: 7px 40px 7px 16px !important; line-height: 1.4 !important;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%) !important;
}

.fv__content {
	position: relative !important;
	max-width: 1300px !important; margin: 0 auto !important; padding: 0 48px !important;
}

.fv__nav {
	position: absolute !important; bottom: 12px !important; right: 0 !important;
	width: calc((100% - 44px) * (1 / 2.2)) !important;
	display: flex !important; align-items: center !important;
	justify-content: center !important; gap: 6px !important;
	z-index: 10 !important;
}

.fv__arrow {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 36px !important; height: 36px !important;
	background: none !important; border: 1px solid #ddd !important; border-radius: 50% !important;
	cursor: pointer !important; color: #999 !important;
	transition: border-color 0.25s, color 0.25s !important;
	padding: 0 !important;
}

.fv__arrow:hover { border-color: var(--gk-blue) !important; color: var(--gk-blue) !important; }
.fv__arrow svg { width: 14px !important; height: 14px !important; }

.fv__dots { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 6px !important; }

.fv__dot {
	position: relative !important; width: 28px !important; height: 28px !important;
	border: none !important; background: none !important;
	cursor: pointer !important; padding: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}

.fv__dot-core {
	width: 6px !important; height: 6px !important; border-radius: 50% !important;
	background: #ccc !important; transition: background 0.3s, transform 0.3s !important;
	z-index: 1 !important;
}

.fv__dot.is-active .fv__dot-core { background: var(--gk-orange) !important; transform: scale(1.3) !important; }

/* SVG ring hidden — CSS ring used instead */
.fv__ring { display: none !important; }

.fv__dot::after {
	content: '' !important;
	position: absolute !important;
	inset: -4px !important;
	border-radius: 50% !important;
	border: 2px solid transparent !important;
	pointer-events: none !important;
}

.fv__dot.is-active::after {
	border-color: transparent !important;
	border-top-color: var(--gk-orange) !important;
	animation: fvSpin var(--fv-autoplay) linear forwards !important;
}

@keyframes fvSpin {
	0%   { transform: rotate(0deg);   border-top-color: var(--gk-orange); border-right-color: transparent;      border-bottom-color: transparent;      border-left-color: transparent; }
	25%  { border-right-color: var(--gk-orange); }
	50%  { border-bottom-color: var(--gk-orange); }
	75%  { border-left-color: var(--gk-orange); }
	100% { transform: rotate(360deg); border-color: var(--gk-orange); }
}

.fv__track {
	position: relative !important; overflow: hidden !important;
	transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fv__slide {
	position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important;
	opacity: 0 !important; pointer-events: none !important; transition: opacity 0.5s ease !important;
}

.fv__slide.is-active { opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important; }

.fv__card {
	display: grid !important; grid-template-columns: 1.2fr 1fr !important;
	gap: 44px !important; align-items: start !important;
	text-decoration: none !important; color: inherit !important;
}

.fv__img {
	position: relative !important; aspect-ratio: 16 / 9 !important;
	overflow: hidden !important; border-radius: 6px !important; margin: 0 !important;
}

.fv__img img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important; transition: transform 0.5s ease !important;
}

.fv__slide.is-active:hover .fv__img img { transform: scale(1.02) !important; }

.fv__noimage {
	width: 100% !important; height: 100% !important;
	background: linear-gradient(135deg, #e0e4ea 0%, #cdd2db 100%) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	color: #aaa !important; font-size: 14px !important;
}

.fv__body {
	display: flex !important; flex-direction: column !important;
	justify-content: flex-start !important;
	min-height: 100% !important; padding-top: 0 !important;
}

.fv__date { font-size: 13px !important; color: #999 !important; margin-bottom: 14px !important; }

.fv__title {
	font-size: 26px !important; font-weight: 700 !important; line-height: 1.7 !important;
	color: #222 !important; margin: 0 0 16px !important;
	display: -webkit-box !important; -webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important; overflow: hidden !important;
	background-image: linear-gradient(var(--gk-blue), var(--gk-blue)) !important;
	background-size: 0% 2px !important; background-position: left bottom !important;
	background-repeat: no-repeat !important;
	transition: background-size 0.6s ease !important; padding-bottom: 2px !important;
	border: none !important;
}

.fv__slide.is-active .fv__card:hover .fv__title { background-size: 100% 2px !important; }

.fv__excerpt {
	font-size: 14px !important; line-height: 1.8 !important; color: #888 !important;
	margin-bottom: 20px !important;
	display: -webkit-box !important; -webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important; overflow: hidden !important;
}

.fv__tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 0 !important; }

.fv__tag {
	font-size: 11px !important; font-weight: 600 !important; color: #fff !important;
	background: var(--gk-orange) !important; border-radius: 3px !important;
	padding: 4px 10px !important; line-height: 1.3 !important;
}

/* ===========================================
   Main Content — 2 Column Layout
   =========================================== */
.gk-main {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 80px 48px 80px !important;
	border-top: 1px solid #e8e8ee !important;
	background: #fff !important;
	position: relative !important;
	z-index: 5 !important;
}

.gk-main__inner {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	gap: 48px !important;
	align-items: start !important;
}

/* --- Section --- */
.gk-section {
	margin-bottom: 56px !important;
}

.gk-section__head {
	margin-bottom: 24px !important;
}

.gk-section__title-wrap {
	display: inline-block !important; position: relative !important;
	border-top: 4px solid var(--gk-blue) !important;
	border-left: 4px solid var(--gk-blue) !important;
}

.gk-section__title {
	display: block !important; position: relative !important;
	font-size: 15px !important; font-weight: 700 !important;
	color: #fff !important; background: var(--gk-blue) !important;
	padding: 9px 60px 9px 36px !important; margin: 0 !important;
}

.gk-section__title::before {
	content: '' !important; position: absolute !important;
	top: -1px !important; left: -1px !important;
	width: 26px !important; height: calc(100% + 1px) !important;
	background: #fff !important;
	clip-path: polygon(0 0, 100% 0, 0 100%) !important;
}

/* --- Article Card (2-column grid, Mercan style) --- */
.gk-section__list {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 28px !important;
}

.gk-card {
	display: block !important;
	background: #fff !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease !important;
	text-decoration: none !important;
	color: inherit !important;
}

.gk-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
	transform: translateY(-2px) !important;
}

.gk-card__img {
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
}

.gk-card__img img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s ease !important;
}

.gk-card:hover .gk-card__img img { transform: scale(1.03) !important; }

.gk-card__noimg {
	width: 100% !important; height: 100% !important;
	background: linear-gradient(135deg, #e0e4ea 0%, #cdd2db 100%) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	color: #aaa !important; font-size: 12px !important;
}

.gk-card__body {
	padding: 14px 16px 16px !important;
}

.gk-card__title {
	font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important;
	color: #333 !important; margin: 0 0 10px !important;
	display: -webkit-box !important; -webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important; overflow: hidden !important;
	background-image: linear-gradient(var(--gk-blue), var(--gk-blue)) !important;
	background-size: 0% 2px !important; background-position: left bottom !important;
	background-repeat: no-repeat !important;
	transition: background-size 0.5s ease !important; padding-bottom: 1px !important;
}

.gk-card:hover .gk-card__title { background-size: 100% 2px !important; }

.gk-card__meta {
	display: flex !important; align-items: center !important;
	flex-wrap: wrap !important; gap: 8px !important;
}

.gk-card__date {
	font-size: 12px !important; color: #aaa !important;
}

/* --- More Button (orange pill with arrow) --- */
.gk-section__more {
	text-align: center !important;
	margin-top: 24px !important;
}

.gk-section__more-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 15px !important; font-weight: 700 !important;
	color: #fff !important;
	background: var(--gk-orange) !important;
	border-radius: 8px !important;
	padding: 12px 28px 12px 18px !important;
	text-decoration: none !important;
	transition: opacity 0.3s, transform 0.3s !important;
	box-shadow: 0 2px 8px rgba(255,162,5,0.3) !important;
}

.gk-section__more-link::before {
	content: '›' !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important; height: 28px !important;
	background: #fff !important;
	color: var(--gk-orange) !important;
	border-radius: 50% !important;
	font-size: 18px !important; font-weight: 700 !important;
	line-height: 1 !important;
}

.gk-section__more-link:hover {
	opacity: 0.85 !important;
	transform: translateY(-1px) !important;
}

/* ===========================================
   Sidebar
   =========================================== */
.gk-sidebar {
	position: sticky !important;
	top: 24px !important;
}

.gk-sidebar__block {
	background: #fff !important;
	border: 1px solid #e8e8ee !important;
	border-top: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	margin-bottom: 24px !important;
}

.gk-sidebar__title {
	font-size: 14px !important; font-weight: 700 !important;
	color: #fff !important; margin: 0 !important;
	padding: 10px 20px !important;
	background: var(--gk-orange) !important;
	position: relative !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 12px !important;
	width: calc(100% + 20px) !important;
	box-sizing: border-box !important;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%) !important;
}

.gk-sidebar__title-sub {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: rgba(255,255,255,0.85) !important;
	white-space: nowrap !important;
}

/* Sidebar: おすすめ記事 */
.gk-sidebar__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
}

.gk-sidebar__card {
	display: grid !important;
	grid-template-columns: 60px 1fr !important;
	align-items: center !important;
	gap: 12px !important;
	text-decoration: none !important;
	color: #333 !important;
	padding: 14px 16px !important;
	border-bottom: 1px dashed var(--gk-blue) !important;
	transition: background 0.2s !important;
}

.gk-sidebar__card:last-child { border-bottom: none !important; }
.gk-sidebar__card:hover { background: #f0f0f8 !important; }

.gk-sidebar__card-img {
	aspect-ratio: 16 / 9 !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}

.gk-sidebar__card-img img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important;
}

.gk-sidebar__card-title {
	font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important;
	color: #333 !important; margin: 0 !important;
	display: -webkit-box !important; -webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* Sidebar: タグ */
.gk-sidebar__tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 16px !important;
}

.gk-sidebar__tag {
	display: inline-block !important;
	font-size: 12px !important;
	color: var(--gk-blue) !important;
	background: #f5f5fa !important;
	border: 1px solid #e0e0e8 !important;
	border-radius: 4px !important;
	padding: 5px 12px !important;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s !important;
	line-height: 1.4 !important;
}

.gk-sidebar__tag:hover {
	background: var(--gk-blue) !important;
	color: #fff !important;
	border-color: var(--gk-blue) !important;
}

/* ===========================================
   Responsive — Tablet
   =========================================== */
@media (max-width: 900px) {
	.fv__inner, .fv__content { padding: 0 24px !important; }
	.fv__card { gap: 20px !important; }
	.fv__title { font-size: 19px !important; }

	.gk-main { padding: 40px 24px 60px !important; }
	.gk-main__inner { grid-template-columns: 1fr !important; gap: 40px !important; }

	.gk-sidebar {
		position: static !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}

	.gk-sidebar__block { margin-bottom: 0 !important; }
}

/* ===========================================
   Responsive — Mobile
   =========================================== */
@media (max-width: 767px) {
	.splash__logo { height: 36px !important; margin-bottom: 22px !important; }
	.splash__copy { font-size: 20px !important; letter-spacing: 0.08em !important; }

	.fv { padding: 60px 0 0 !important; margin-top: -50px !important; padding-top: 60px !important; }
	.fv__inner, .fv__content { padding: 0 16px !important; }
	.fv__nav { position: static !important; width: auto !important; justify-content: center !important; margin-top: 16px !important; }
	.fv__card { grid-template-columns: 1fr !important; gap: 16px !important; }
	.fv__img { aspect-ratio: 16 / 9 !important; }
	.fv__body { padding-top: 0 !important; min-height: auto !important; }
	.fv__title { font-size: 18px !important; -webkit-line-clamp: 2 !important; margin-bottom: 10px !important; }
	.fv__excerpt { display: none !important; }
	.fv__deco { display: none !important; }

	.gk-main { padding: 32px 16px 48px !important; }
	.gk-main__inner { grid-template-columns: 1fr !important; }

	.gk-section__list {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.gk-section__list .gk-card:nth-child(n+4) {
		display: none !important;
	}

	.gk-card__title { font-size: 14px !important; }

	.gk-sidebar { display: none !important; }
}