@charset "utf-8";
/* ==========================================================================
   代表プロフィールページ（profile.html）専用スタイル

   🔴 読み込み順：style.css（サイト共通）→ subsidy.css（下層ページ共通）→ profile.css
      style.css と subsidy.css は変更していません。
      ・style.css から使い回し：ヘッダー／フッター／ハンバーガー／.section-title／
        .stance__item（補助金の3つの立場）／.contact／.reveal／br-pc・br-sp
      ・subsidy.css から使い回し：.back-home（← TOPに戻る）／.page-hero／.prose／.key-msg

   構成:
     01. ファーストビュー（写真＋氏名）
     02. 時代ごとのセクション（3つの時代を色で分ける）
     03. タイムライン（各実績のカード）
     04. 数字・キーワードの強調
     05. 3つの立場（つくる／審査する／獲得する）
     06. 締めのメッセージ
   ========================================================================== */

/* ---------- 01. ファーストビュー（写真＋氏名） ---------- */
.pf-hero{
  display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr;            /* スマホ：写真 → 氏名 */
  align-items:center;
  text-align:left;
}
@media (min-width:820px){
  .pf-hero{grid-template-columns:280px 1fr;}   /* PC：左＝写真／右＝氏名 */
}
.pf-hero__photo{max-width:280px;width:100%;margin-inline:auto;}
.pf-hero__photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-lg);
  border:6px solid var(--white);
  box-shadow:var(--shadow-md);
}
.pf-hero__name{
  font-size:clamp(28px,6.4vw,44px);font-weight:800;
  letter-spacing:.05em;color:var(--text);
  margin:0 0 .4em;line-height:1.3;
}
.pf-hero__role{
  font-size:clamp(13.5px,3vw,16px);font-weight:700;
  line-height:1.95;color:var(--orange-text);
  margin:0 0 1em;padding-bottom:1em;
  border-bottom:1px solid var(--line);
}
.pf-hero__place{
  font-size:clamp(13.5px,3vw,15px);
  color:var(--text-sub);margin:0;
}
@media (max-width:819px){
  .pf-hero{text-align:center;}
  .pf-hero__role{border-bottom:none;padding-bottom:0;}
}

/* ---------- 02. 時代ごとのセクション ----------
   3つの時代を、背景色・上のライン・見出しのバーで分ける
   ------------------------------------------------------------------------ */
.era{position:relative;border-top:4px solid var(--era);}
.era--kencho{--era:var(--orange-light);background:var(--bg-soft);}
.era--fukucho{--era:var(--sky);background:linear-gradient(180deg,var(--sky-tint) 0%,var(--sky-tint-2) 100%);}
.era--keiei{--era:var(--orange-mid);background:linear-gradient(180deg,#fff6ec 0%,#fffdfa 100%);}

.era-head{text-align:center;margin-bottom:clamp(26px,4vw,44px);}
.era-head__bar{
  display:block;width:56px;height:5px;border-radius:3px;
  background:var(--era);margin:0 auto clamp(14px,2vw,20px);
}
.era-head__title{
  font-size:clamp(25px,5.8vw,40px);
  line-height:1.45;color:var(--text);
  margin:0;letter-spacing:.01em;
}

/* ---------- 03. タイムライン（各実績のカード） ----------
   左に1本のレールを引き、実績ごとにカードを並べる。
   ※年号は入れていません（副町長は県庁在職中の経歴のため、
     年表のように見せると前後関係を誤解させるおそれがあるため）
   ------------------------------------------------------------------------ */
.tl{
  position:relative;
  max-width:800px;margin:clamp(24px,3.6vw,40px) auto 0;
  padding-left:clamp(26px,4vw,38px);
  /* style.css の reset は ul のみ。ol の連番は出さない
     （番号を振ると、副町長→産業振興課長 の前後関係を誤解させるため） */
  list-style:none;
}
.tl::before{
  content:"";position:absolute;left:6px;top:10px;bottom:10px;
  width:2px;border-radius:1px;
  background:linear-gradient(180deg,var(--era),rgba(0,0,0,0));
  opacity:.55;
}
.tl__item{
  position:relative;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(20px,2.8vw,26px) clamp(18px,2.6vw,28px);
  box-shadow:var(--shadow-sm);
  margin-bottom:clamp(12px,1.8vw,18px);
}
.tl__item:last-child{margin-bottom:0;}
/* レール上の点 */
.tl__item::before{
  content:"";position:absolute;
  left:calc(clamp(26px,4vw,38px) * -1 + 1px);
  top:clamp(24px,3vw,30px);
  width:12px;height:12px;border-radius:50%;
  background:var(--white);
  border:3px solid var(--era);
}
.tl__title{
  font-size:clamp(17px,3.8vw,21px);
  line-height:1.55;color:var(--text);
  margin:0 0 .7em;
}
.tl__body{
  font-size:clamp(14.5px,3.1vw,16px);
  line-height:2;color:var(--text-sub);
}
.tl__body p{margin:0 0 1.2em;}
.tl__body p:last-child{margin-bottom:0;}

/* 時代の導入文（大見出しの直後・カードの前） */
.era-lead{
  max-width:720px;margin:0 auto;
  font-size:clamp(15px,3.3vw,17px);
  line-height:2.05;color:var(--text-sub);
}
.era-lead p{margin:0 0 1.4em;}
.era-lead p:last-child{margin-bottom:0;}

/* ---------- 04. 数字・キーワードの強調 ---------- */
.num{
  font-family:var(--font-en);
  font-size:1.5em;font-weight:800;
  letter-spacing:-.01em;line-height:1;
  color:var(--era,var(--orange));
  font-feature-settings:"tnum" 1;
  margin:0 .03em;
  vertical-align:-.04em;
}
.num__unit{
  font-family:var(--font-jp);
  font-size:.62em;font-weight:800;letter-spacing:0;margin-left:.04em;
}
/* 数字以外のキーワード（「ゼロ予算」など） */
.hl{
  font-weight:800;color:var(--text);
  background:linear-gradient(transparent 62%,rgba(244,161,26,.38) 62%);
  padding-bottom:.05em;
}

/* ---------- 05. 3つの立場 ----------
   style.css の .stance__item をそのまま使い、並べ方だけ調整する
   ------------------------------------------------------------------------ */
.tl__body .stance{
  margin-top:clamp(18px,2.6vw,24px);
  margin-bottom:clamp(18px,2.6vw,24px);
}
@media (min-width:860px){
  .stance--pair{max-width:640px;margin-inline:auto;}
  .stance--solo{max-width:320px;margin-inline:auto;}
}

/* ---------- 06. 締めのメッセージ ----------
   TOPページの「目指すは『地方創生』」につながる締め。
   お問い合わせセクションと同じ配色で、ページの終わりを印象づける
   ------------------------------------------------------------------------ */
.closing{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-tint) 0%,#fff6ec 62%,var(--orange-tint) 100%);
  border-top:4px solid var(--orange-light);
}
.closing__deco{position:absolute;inset:0;pointer-events:none;}
.closing__blob{position:absolute;border-radius:50%;}
.closing__blob--a{
  width:clamp(180px,32vw,400px);aspect-ratio:1;left:-10%;bottom:-16%;
  background:radial-gradient(circle at 50% 50%,rgba(244,161,26,.35),rgba(244,161,26,0) 70%);
}
.closing__blob--b{
  width:clamp(160px,28vw,340px);aspect-ratio:1;right:-8%;top:-14%;
  background:radial-gradient(circle at 50% 50%,rgba(84,194,240,.40),rgba(84,194,240,0) 70%);
}
.closing__inner{position:relative;z-index:2;text-align:center;}
.closing__title{
  font-size:clamp(27px,6.4vw,46px);
  line-height:1.45;color:var(--text);
  margin:0 0 clamp(24px,3.6vw,36px);
}
.closing__title::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange-light),var(--sky));
  margin:clamp(18px,2.6vw,26px) auto 0;
}
.closing__body{
  font-size:clamp(15px,3.3vw,17.5px);
  line-height:2.05;color:var(--text-sub);
}
.closing__body p{margin:0 0 1.5em;}
.closing__body p:last-child{margin-bottom:0;}
/* 「行政職員として。副町長として。…」の4行 */
.closing__steps{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:clamp(20px,3vw,30px) 0;
}
.closing__steps li{
  background:rgba(255,255,255,.85);
  border-radius:999px;padding:8px 18px;
  font-size:clamp(14px,3vw,16px);font-weight:700;color:var(--text);
  line-height:1.6;
}

/* ---------- 極小幅（〜359px）だけの微調整 ---------- */
@media (max-width:359px){
  .tl{padding-left:24px;}
  .tl__item::before{left:-23px;}
  .closing__steps li{padding:7px 14px;}
}