/* Base tokens */
:root{
  --orange:#FF6B35;
  --soft:#FFF6F0;
  --text:#333333;
  --muted:#666666;
  --bg:#FFFFFF;
  --container: 1100px;
  --radius: 12px;
  --shadow: 0 6px 14px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{width:90%;max-width:var(--container);margin:0 auto}
.container--narrow{max-width:800px}

/* Header */
.skip-link{position:absolute;left:-999px;top:-999px}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:999}

.site-header{position:sticky;top:0;background:#fff;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.site-title{font-weight:700;color:var(--text)}
.header-accent{height:2px;background:var(--orange)}

.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.site-nav a{color:var(--text)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--text);margin:6px 0;transition:.2s}

@media (max-width: 900px){
  .site-nav{position:fixed;inset:72px 0 auto 0;background:#fff;transform:translateY(-120%);transition:.25s;padding:16px;border-bottom:1px solid #eee}
  .site-nav.open{transform:translateY(0)}
  .site-nav ul{flex-direction:column;gap:12px}
  .nav-toggle{display:block}
}

/* Sections */
.section{padding:72px 0}
.section--muted{background:#F9F9F9}
.section--soft{background:linear-gradient(90deg, var(--soft), #ffffff 60%)}
.section-title{font-size:28px;margin:0 0 24px;display:inline-block;border-bottom:3px solid var(--orange);padding-bottom:6px}
.lead{color:var(--muted);margin-bottom:28px}

/* Hero */
.hero {
  color: white;
  text-align: center;
  padding: 100px 20px;
}
.hero > * {
  position: relative;
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;min-height:520px;height:100%;z-index: 2;}
.hero-text h1{font-size:40px;margin:.2em 0}
.hero-text p{font-size:18px;}
.avatar-placeholder{width:250px;height:250px;border-radius:999px;
  background: url('../images/user_top.jpg') center/cover no-repeat;
  border:6px solid #fff;box-shadow:var(--shadow);margin-inline:auto}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .avatar-placeholder{width:200px;height:200px}
}

/* スライダー */
.slider-container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.slider-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  object-fit: cover;
}
.slide.active {
  opacity: 1;
}

/* Cards */
.cards{display:grid;gap:20px}
.cards.trio{grid-template-columns:repeat(3,1fr)}
.cards.duo{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){
  .cards.trio, .cards.duo{grid-template-columns:1fr}
}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:1px solid #eee}
.card h3{margin-top:0}

/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width: 900px){
  .skills-grid{grid-template-columns:1fr}
}

/* Works */
.work .work-thumb{aspect-ratio:16/9;background:repeating-linear-gradient(45deg, var(--soft), var(--soft) 10px, #fff 10px, #fff 20px);border-radius:8px;margin-bottom:12px;border:1px solid #f1e5de}

/* Blog */
.post .thumb, .post-thumb-placeholder{display:block}
.post-thumb-placeholder{aspect-ratio:16/9;background:#f4f4f4;border-radius:8px;border:1px solid #e8e8e8}
.post-meta{font-size:12px;color:#888;margin:8px 0;display:flex;align-items:center;gap:8px}
.entry-title{margin:.2em 0}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:8px;border:1px solid var(--orange);color:var(--orange);text-decoration:none;font-weight:700}
.btn:hover{text-decoration:none;filter:brightness(.95)}
.btn-primary{background:var(--orange);color:#fff}

/* Contact */
.contact-box{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.contact-form label{display:block;font-size:14px;margin:10px 0}
.contact-form input, .contact-form textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font:inherit}
.contact-form button{margin-top:8px}
.contact-form input.btn{
  margin-top:8px;
  padding: 12px 18px;
  border: 1px solid var(--orange);
  width:unset;
  font: revert;
}
.sns{list-style:none;display:flex;gap:12px;margin:0;padding:0}
@media (max-width: 900px){
  .contact-box{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:var(--orange);color:#fff;padding:28px 0;margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:center;gap:16px}
.footer-nav{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.footer-nav a{color:#fff}
@media (max-width: 600px){
  .footer-inner{flex-direction:column;align-items:flex-start}
}


/* 経歴ページ */
.career-section {
  background: #fff6f0;
  padding: 60px 20px;
}
.section-title {
  font-size: 2rem;
  color: #FF6B35;
  text-align: center;
  margin-bottom: 40px;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.timeline-item {
  position: relative;
  background: #fff;
  padding: 20px;
  border-left: 4px solid #FF6B35;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-radius: 8px;
}
.timeline-date {
  font-weight: bold;
  color: #FF6B35;
  margin-bottom: 8px;
}
.timeline-content h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}
.timeline-content .role {
  font-style: italic;
  color: #555;
  margin-bottom: 8px;
}
.timeline-content ul {
  padding-left: 20px;
  margin: 10px 0;
}
.timeline-content .achievements {
  color: #333;
  font-size: 0.9rem;
  margin-top: 10px;
  background: #ffece3;
  padding: 8px;
  border-radius: 4px;
}
.timeline-content .skills {
  font-size: 0.9rem;
  color: #444;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .timeline-item {
    border-left-width: 3px;
    padding: 16px;
  }
}

/* フェードアニメーション */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}