:root{

  --main:#0D2454;

  --accent:#00448d;

  --gold:#F3E195;

  --bg:#ffffff;

  --text:#14213d;

  --sub:#5b6475;

  --line:#d9e2f0;

  --cardText:#ffffff;

}

body{

  margin:0;

  font-family:'Noto Sans JP',sans-serif;

  background:var(--bg);

  color:var(--text);

}

/* HEADER */

.site-header{

  background:linear-gradient(135deg,var(--main),var(--accent));

  padding:12px 20px;

  box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.header-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  max-width:1100px;

  margin:0 auto;

}

.header-logo{

  font-weight:900;

  color:#fff;

  text-decoration:none;

  font-size:1.1rem;

  letter-spacing:.04em;

}

.header-nav{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

}

.header-nav a{

  color:rgba(255,255,255,.8);

  text-decoration:none;

  font-size:.95rem;

  transition:.2s ease;

}

.header-nav a:hover,

.header-nav a.active{

  color:#fff;

}

/* WRAP */

.wrap{

  max-width:1100px;

  margin:0 auto;

  padding:0 20px 50px;

  box-sizing:border-box;

}

/* HERO */

.about-hero{

  margin:30px 0 40px;

  border-radius:24px;

  overflow:hidden;

  box-shadow:0 14px 36px rgba(13,36,84,.12);

}

.about-hero-inner{

  background:linear-gradient(135deg,var(--main),var(--accent));

  padding:60px 24px;

  text-align:center;

}

.about-logo-wrap{

  margin-bottom:18px;

}

.about-logo{

  width:96px;

  border-radius:50%;

  background:#fff;

  padding:6px;

  box-shadow:0 6px 18px rgba(0,0,0,.15);

}

.about-title{

  margin:0;

  font-size:34px;

  font-weight:900;

  color:var(--gold);

  letter-spacing:.03em;

}

.about-divider{

  width:64px;

  height:3px;

  background:var(--gold);

  margin:14px auto 22px;

  border-radius:999px;

}

.about-lead{

  margin:0 auto;

  max-width:760px;

  font-size:15px;

  line-height:1.9;

  color:rgba(255,255,255,.94);

}

/* STATS */

.about-stats{

  padding:10px 0 45px;

}

.about-stats-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;

  max-width:620px;

  margin:0 auto;

}

.about-stat-card{

  background:linear-gradient(135deg,var(--main),var(--accent));

  color:var(--cardText);

  padding:28px 20px;

  border-radius:20px;

  text-align:center;

  box-shadow:0 12px 26px rgba(13,36,84,.14);

  border:1px solid rgba(255,255,255,.08);

}

.about-stat-num{

  font-size:42px;

  font-weight:900;

  line-height:1.1;

  color:var(--gold);

}

.about-stat-label{

  margin-top:8px;

  font-size:14px;

  color:rgba(255,255,255,.88);

}

/* SECTION HEAD */

.about-section-head{

  text-align:center;

  margin-bottom:30px;

}

.about-section-head h2{

  margin:0;

  font-size:28px;

  color:var(--main);

  font-weight:900;

}

.line{

  width:52px;

  height:3px;

  background:linear-gradient(135deg,var(--main),var(--accent));

  margin:12px auto 0;

  border-radius:999px;

}

/* PROJECTS */

.about-projects{

  padding:10px 0 50px;

}

.about-project-list{

  display:grid;

  gap:22px;

}

.about-project-card{

  background:linear-gradient(135deg,var(--main),var(--accent));

  color:var(--cardText);

  padding:24px;

  border-radius:20px;

  box-shadow:0 12px 28px rgba(13,36,84,.12);

  border:1px solid rgba(255,255,255,.08);

}

.project-tag{

  display:inline-block;

  margin-bottom:10px;

  padding:6px 10px;

  border-radius:999px;

  background:rgba(255,255,255,.14);

  color:var(--gold);

  font-size:12px;

  font-weight:700;

  letter-spacing:.02em;

}

.about-project-card h3{

  margin:0 0 10px;

  font-size:22px;

  color:#fff;

}

.about-project-card p{

  margin:0;

  font-size:15px;

  line-height:1.9;

  color:rgba(255,255,255,.92);

}

/* FOLLOW */

.about-follow{

  text-align:center;

  margin:50px 0 28px;

}

.about-follow-label{

  margin:0 0 14px;

  font-size:13px;

  font-weight:700;

  letter-spacing:.14em;

  color:var(--sub);

}

.btn-action{

  display:inline-block;

  padding:13px 22px;

  background:linear-gradient(135deg,var(--main),var(--accent));

  border-radius:12px;

  color:#fff;

  text-decoration:none;

  font-weight:700;

  box-shadow:0 10px 22px rgba(13,36,84,.14);

  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;

}

.btn-action:hover{

  transform:translateY(-2px);

  box-shadow:0 14px 28px rgba(13,36,84,.18);

  opacity:.98;

}

/* NOTE */

.about-note{

  text-align:center;

  margin:24px 0 30px;

}

.about-note p{

  margin:0;

  color:var(--sub);

  font-size:14px;

}

/* BACK */

.about-back{

  text-align:center;

  margin-bottom:20px;

}

/* REVEAL */

.reveal{

  opacity:1;

  transform:none;

}

/* RESPONSIVE */

@media (max-width:768px){

  .header-inner{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

  }

  .header-nav{

    gap:10px 14px;

  }

  .about-hero-inner{

    padding:48px 18px;

  }

  .about-title{

    font-size:28px;

  }

  .about-lead{

    font-size:14px;

  }

  .about-stats-grid{

    grid-template-columns:1fr;

    max-width:380px;

  }

  .about-section-head h2{

    font-size:24px;

  }

  .about-project-card h3{

    font-size:20px;

  }

}
 .header-nav a{

  position:relative;

  color:rgba(255,255,255,.7);

  text-decoration:none;

  padding-bottom:4px;

  transition:0.2s;

}

/* 通常ホバー */

.header-nav a:hover{

  color:#fff;

}

/* 今いるページ */

.header-nav a.active{

  color:#fff;

  font-weight:700;

}

/* 下線アニメーション */

.header-nav a.active::after{

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:100%;

  height:2px;

  background:#F3E195;

  border-radius:2px;

}

/* ホバー時にも線出す（任意） */

.header-nav a:hover::after{

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:100%;

  height:2px;

  background:rgba(255,255,255,.5);

}