@charset "utf-8";

/* =========================================================
   FRK 住み替えと暮らしのオンラインセミナー2026  style.css
   基調カラー: ネイビーブルー
   ブレークポイント: 768px / 1rem = 10px (reset.css: html 62.5%)
========================================================= */

:root{
	--navy:#375c97;        /* 主色（見出し・ラベル・アクセント） */
	--navy-deep:#2f3566;   /* ボタン濃部 */
	--navy-mid:#465191;    /* ボタン明部 */
	--badge:#3f3b6e;       /* 事前申込制バッジ */
	--value-bg:#eef1f7;    /* 値ボックス背景 */
	--about-bg:#eef1f6;    /* FRKとは背景 */
	--text:#231815;        /* 本文 */
	--line:#375c97;
}

/* ---------- wrapper ---------- */
.wrapper{ width:90%; max-width:1000px; margin:0 auto; }
.wrapper700{ width:90%; max-width:700px; margin:0 auto; }
.wrapper900{ width:90%; max-width:900px; margin:0 auto; }

@media screen and (max-width:768px){
	.wrapper,.wrapper700,.wrapper900{ width:90%; }
}

/* ---------- flex ---------- */
.flex{ display:flex; flex-wrap:wrap; }
.flexb{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.flexc{ display:flex; flex-wrap:wrap; justify-content:center; }

/* ---------- text ---------- */
.txtcenter{ text-align:center; }
.txtjustify{ text-align:justify; }
.fw600{ font-weight:600; }
.fw700{ font-weight:700; }
.lh14{ line-height:1.4; }
.lh15{ line-height:1.5; }

.fz10{ font-size:1.0rem; }
.fz12{ font-size:1.2rem; }
.fz13{ font-size:1.3rem; }
.fz14{ font-size:1.4rem; }
.fz15{ font-size:1.5rem; }
.fz16{ font-size:1.6rem; }
.fz18{ font-size:1.8rem; }
.fz20{ font-size:2.0rem; }
.fz22{ font-size:2.2rem; }
.fz24{ font-size:2.4rem; }

@media screen and (max-width:768px){
	.fz10sp{ font-size:1.0rem; }
	.fz11sp{ font-size:1.1rem; }
	.fz12sp{ font-size:1.2rem; }
	.fz13sp{ font-size:1.3rem; }
	.fz14sp{ font-size:1.4rem; }
	.fz15sp{ font-size:1.5rem; }
	.fz16sp{ font-size:1.6rem; }
}

/* ---------- pc / sp 出し分け ---------- */
@media screen and (min-width:769px){
	.sponly{ display:none; }
}
@media screen and (max-width:768px){
	.pconly{ display:none; }
	.sponly{ display:block; }
}

/* ---------- a / img ---------- */
a{ transition:opacity .3s; }
a:hover{ opacity:.8; }
img{ max-width:100%; height:auto; vertical-align:bottom; }

/* ---------- fadeIn ---------- */
.fadeUpTrigger{ opacity:0; }
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:.6s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
	from{ opacity:0; transform:translateY(40px); }
	to{ opacity:1; transform:translateY(0); }
}

body{ color:var(--text); background:#fff; }

/* =========================================================
   header 主催・後援
========================================================= */
.header{
	width:100%;
	padding:12px 0;
	border-bottom:1px solid #d5dae4;
}
.header-info{ text-align:center; }
.header-info-line{
	font-size:1.55rem;
	line-height:1.7;
	color:#333;
}
.header-info-label{ font-weight:600; }

@media screen and (max-width:768px){
	.header{ padding:8px 0; }
	.header-info-line{ font-size:1.25rem; line-height:1.6; }
	.header-info-label{ display:inline-block; }
}

/* =========================================================
   main visual  方法1：背景(ビル)は全幅可変／前面(人物・タイトル)は固定
   透過PNGの前面を、全幅可変のビル背景の上に下揃えで重ねる
========================================================= */
.top-mainvisual{
	position:relative;
	width:100%;
	max-width:1900px;
	margin:0 auto;
	overflow:hidden;
	background:#fff;
}
/* 背景のビル写真：ブラウザ幅に合わせて可変 */
.mv-bg-img{ width:100%; display:block; }
/* 前面：固定幅（原寸のため拡大されずボケない）・下揃え */
.mv-inner{
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:82%;
	max-width:1100px;
	margin:0;
}
.mv-fg-pc{ width:100%; display:block; }
.mv-fg-sp{ display:none; }

@media screen and (max-width:768px){
	.top-mainvisual{
		background:url(../img/mv-bg-wide-2.jpg) center bottom / cover no-repeat #cfe0ef;
	}
	.mv-bg-img{ display:none; }
	.mv-inner{
		position:static;
		transform:none;
		width:100%;
		max-width:520px;
		margin:0 auto;
	}
	.mv-fg-pc{ display:none; }
	.mv-fg-sp{ display:block; width:100%; }
}

/* =========================================================
   intro
========================================================= */
.section-intro{ padding:45px 0 10px; }
.intro-text{
	font-size:1.8rem;
	font-weight:500;
	line-height:2.1;
	color:#333;
}
@media screen and (max-width:768px){
	.section-intro{ padding:25px 0 5px; }
	.intro-text{ font-size:1.5rem; line-height:1.9; }
	.intro-text br{ display:none; }
}

/* =========================================================
   FRKとは
========================================================= */
.section-about{ padding:20px 0 40px; }
.about-box{
	background:var(--about-bg);
	border-radius:6px;
	padding:34px 40px;
	max-width:780px;
	margin:0 auto;
}
.about-logo{
	text-align:center;
	margin-bottom:16px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:6px;
}
.about-logo img{ width:120px; }
.about-logo-text{ font-size:1.9rem; font-weight:600; color:#333; }
.about-text{
	font-size:1.6rem;
	line-height:1.9;
	text-align:justify;
	color:#333;
}
@media screen and (max-width:768px){
	.section-about{ padding:10px 0 30px; }
	.about-box{ padding:22px 20px; }
	.about-logo img{ width:90px; }
	.about-logo-text{ font-size:1.6rem; }
	.about-text{ font-size:1.4rem; line-height:1.8; }
}

/* =========================================================
   section title (INFORMATION / PROGRAM / PROFILE)
========================================================= */
.section-title{ text-align:center; margin-bottom:44px; }
.section-title-en{
	font-size:3.4rem;
	font-weight:700;
	letter-spacing:.28em;
	color:var(--navy);
	line-height:1.2;
	text-indent:.28em;
}
.section-title-ja{
	font-size:1.6rem;
	font-weight:600;
	letter-spacing:.4em;
	color:#333;
	margin-top:4px;
	text-indent:.4em;
}
@media screen and (max-width:768px){
	.section-title{ margin-bottom:26px; }
	.section-title-en{ font-size:2.4rem; }
	.section-title-ja{ font-size:1.3rem; }
}

/* =========================================================
   INFORMATION
========================================================= */
.section-information{ padding:70px 0 80px; }

.komoku-list{ width:100%; margin-bottom:18px; align-items:stretch; }
.komoku-list dt{
	width:22%;
	background:var(--navy);
	color:#fff;
	font-size:1.6rem;
	font-weight:600;
	letter-spacing:.05em;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:14px 4px;
	border-radius:5px 0 0 5px;
	line-height:1.4;
}
.komoku-list dd{
	width:78%;
	background:var(--value-bg);
	padding:14px 24px;
	border-radius:0 5px 5px 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.komoku-list dd.jizen-moushikomisei{
	position:relative;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	padding-right:16px;
}
.jizen-badge{
	flex-shrink:0;
	background:var(--badge);
	color:#fff;
	font-size:1.45rem;
	font-weight:600;
	line-height:1.3;
	text-align:center;
	padding:10px 14px;
	border-radius:4px;
	margin-left:14px;
}

.komoku-list dd.pt20-wrapper{ padding-top:22px; padding-bottom:22px; }

/* flow */
.flow-list{ justify-content:center; align-items:flex-start; gap:4%; margin-bottom:14px; }
.flow-item{ position:relative; width:28%; text-align:center; }
.flow-item:not(:last-child)::after{
	content:"";
	position:absolute;
	top:38%;
	right:-14%;
	width:0; height:0;
	border-style:solid;
	border-width:9px 0 9px 13px;
	border-color:transparent transparent transparent var(--navy);
}
.flow-item-img{ max-width:140px; margin:0 auto 8px; }
.flow-item-img img{ width:100%; display:block; }
.flow-item-text{ font-size:1.5rem; font-weight:600; line-height:1.45; color:#333; }
.flow-note{ font-size:1.45rem; color:#555; line-height:1.5; margin-top:6px; }

@media screen and (max-width:768px){
	.section-information{ padding:40px 0 45px; }
	.komoku-list{ margin-bottom:14px; }
	.komoku-list dt{
		width:100%;
		border-radius:5px 5px 0 0;
		padding:8px 4px;
		font-size:1.45rem;
	}
	.komoku-list dt br{ display:none; }
	.komoku-list dd{
		width:100%;
		border-radius:0 0 5px 5px;
		padding:12px 16px;
	}
	.komoku-list dd.jizen-moushikomisei{ padding-right:16px; }
	.jizen-badge{ font-size:1.3rem; padding:8px 10px; }
	.flow-list{ display:block; max-width:280px; margin:0 auto 10px; }
	.flow-item{ width:100%; display:flex; align-items:center; justify-content:flex-start; text-align:left; margin-bottom:26px; gap:16px; }
	.flow-item-img{ width:38%; flex-shrink:0; margin:0; }
	.flow-item-text{ font-size:1.4rem; }
	.flow-item:not(:last-child)::after{
		top:auto; bottom:-20px; right:auto; left:19%;
		border-width:12px 8px 0 8px;
		border-color:var(--navy) transparent transparent transparent;
	}
	.flow-note{ font-size:1.25rem; }
}

/* =========================================================
   button (お申し込みフォーム)
========================================================= */
.btn-wrap{ text-align:center; margin:50px 0 0; }
.btn-form{
	position:relative;
	display:block;
	width:100%;
	max-width:640px;
	margin:0 auto;
	padding:24px 20px;
	border-radius:100vh;
	text-align:center;
	color:#fff;
	font-size:1.8rem;
	font-weight:600;
	letter-spacing:.03em;
	background:linear-gradient(180deg,var(--navy-mid) 0%,var(--navy-deep) 100%);
	box-shadow:0 4px 10px rgba(47,53,102,.25);
}
.btn-form:hover{ opacity:1; background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy-mid) 100%); }
.btn-arrow{
	display:inline-block;
	width:34px; height:2px;
	background:#fff;
	position:absolute;
	top:50%; right:34px;
	transform:translateY(-50%);
}
.btn-arrow::after{
	content:"";
	position:absolute;
	right:0; top:50%;
	width:10px; height:10px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
}
@media screen and (max-width:768px){
	.btn-wrap{ margin:30px 0 0; }
	.btn-form{ font-size:1.35rem; padding:18px 34px 18px 20px; max-width:400px; }
	.btn-arrow{ width:22px; right:20px; }
}

/* =========================================================
   PROGRAM
========================================================= */
.section-program{ padding:70px 0 80px; }
.program-block{ margin-bottom:44px; }
.program-tag{
	display:flex;
	align-items:stretch;
	max-width:560px;
	width:100%;
	margin-bottom:20px;
	border:1px solid var(--navy);
}
.program-tag-num{
	background:var(--navy);
	color:#fff;
	font-size:1.8rem;
	font-weight:600;
	padding:8px 22px;
	display:flex;
	align-items:center;
}
.program-tag-label{
	color:var(--navy);
	font-size:1.8rem;
	font-weight:600;
	letter-spacing:.05em;
	padding:6px 18px;
	display:flex;
	align-items:center;
}
.program-body{ justify-content:space-between; align-items:flex-start; }
.program-body-text{ width:60%; }
.program-body-img{ width:37%; display:flex; align-items:flex-start; justify-content:center; margin-top:-56px; }
.program-body-img img{ width:100%; }
.program-heading{
	font-size:2.2rem;
	font-weight:700;
	color:#222;
	line-height:1.4;
	padding-left:14px;
	border-left:5px solid var(--navy);
	margin-bottom:6px;
}
.program-subheading{
	font-size:1.8rem;
	font-weight:600;
	color:#333;
	padding-left:14px;
	margin-bottom:14px;
}
.program-lecturer{
	color:#222;
	border-bottom:1px solid var(--navy);
	padding-bottom:8px;
	margin-bottom:12px;
}
.program-desc{ color:#333; }

@media screen and (max-width:768px){
	.section-program{ padding:40px 0 45px; }
	.program-block{ margin-bottom:30px; }
	.program-tag{ margin-bottom:12px; }
	.program-tag-num{ font-size:1.45rem; padding:4px 12px; }
	.program-tag-label{ font-size:1.45rem; padding:4px 12px; }
	.program-body-text{ width:62%; }
	.program-body-img{ width:35%; }
	.program-heading{ font-size:1.7rem; padding-left:8px; border-left-width:4px; }
	.program-subheading{ font-size:1.4rem; padding-left:8px; margin-bottom:10px; }
}

/* =========================================================
   PROFILE
========================================================= */
.section-profile{ padding:70px 0 90px; }
.profile-list{ justify-content:space-between; }
.profile-item{ width:47%; margin-bottom:30px; }
.profile-item-img{ text-align:center; margin-bottom:14px; }
.profile-item-img img{ width:100%; max-width:320px; }
.profile-item-head{
	text-align:center;
	padding-bottom:10px;
	margin-bottom:14px;
}
.profile-role{ font-size:1.6rem; color:var(--navy); font-weight:600; }
.profile-name{ font-size:2.2rem; font-weight:700; color:#222; line-height:1.4; }
.profile-name-sub{ font-size:1.5rem; font-weight:600; }
.profile-name-en{ font-size:1.4rem; letter-spacing:.2em; color:#888; }
.profile-bio{ font-size:1.6rem; line-height:1.85; text-align:justify; color:#333; }

/* contact */
.contact-box{
	border:2px solid var(--navy);
	background:var(--value-bg);
	border-radius:4px;
	padding:16px 22px;
	margin-top:30px;
}
.contact-box-flex{ align-items:center; }
.contact-box-left{
	width:22%;
	border-right:2px dotted #666;
	display:flex; align-items:center; justify-content:center;
	min-height:56px;
	font-weight:600;
}
.contact-box-right{ width:74%; padding-left:26px; line-height:1.6; }

@media screen and (max-width:768px){
	.section-profile{ padding:40px 0 50px; }
	.profile-list{ display:block; }
	.profile-item{ width:100%; margin-bottom:34px; }
	.profile-item-img img{ width:180px; }
	.profile-name{ font-size:1.8rem; }
	.profile-bio{ font-size:1.4rem; line-height:1.8; }
	.contact-box-flex{ display:block; }
	.contact-box-left{
		width:100%;
		border-right:none;
		border-bottom:1px dashed #666;
		min-height:auto;
		padding-bottom:8px; margin-bottom:8px;
		justify-content:flex-start;
	}
	.contact-box-right{ width:100%; padding-left:0; }
}

/* =========================================================
   footer / 追従ボタン
========================================================= */
.footer{ padding:26px 0; border-top:1px solid #d5dae4; }
.copy{ display:flex; justify-content:center; }
.copy small{ font-size:1.15rem; color:#555; text-align:center; }
@media screen and (max-width:768px){
	.copy small{ font-size:1.0rem; transform:scale(.9); white-space:nowrap; }
}

.pagetop,.formto{
	position:fixed;
	right:24px;
	z-index:999;
	display:none;
}
.pagetop{ bottom:96px; }
.formto{ bottom:24px; }
.pagetop a,.formto a{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:62px; height:62px;
	border-radius:50%;
	background:var(--navy-deep);
	color:#fff;
	font-size:0.9rem;
	font-weight:600;
	line-height:1.3;
	box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.pagetop a{ font-size:1.3rem; }
.pagetop a:hover,.formto a:hover{ opacity:.85; }
@media screen and (max-width:768px){
	.pagetop,.formto{ right:14px; }
	.pagetop{ bottom:82px; }
	.pagetop a,.formto a{ width:52px; height:52px; font-size:.95rem; }
	.pagetop a{ font-size:1.15rem; }
}