/* ========== Base ========== */
:root {
  --bg: #fdfcf9;
  --text: #333;
  --hero-bg: #fff2e6;
  --hero-text: #4a322d;
  --accent-1: #f4a261; /* GitHub等 詳細ボタン */
  --accent-2: #e76f51;
  --primary-1: #fc4a1a; /* 無料診断ボタン */
  --primary-2: #f7b733;
  --line: #f4c095;
  --card: #fff7f2;
  --chip: #ffe9d6;
  --footer-bg: #fbe9e7;
  --footer-text: #4a322d;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
               Arial, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* アクセシビリティ：スキップリンク */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: .6rem 1rem;
  background: #111;
  color: #fff;
  border-radius: 6px;
  z-index: 1000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 3px solid #fff;
}

/* ========== Hero ========== */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  text-align: center;
  padding: 3rem 1rem;
}
.hero > * { max-width: 900px; margin-inline: auto; }
.hero h1 { font-size: 2.5rem; margin: 0 0 .5rem; }
.hero p  { font-size: 1.2rem; font-weight: 500; margin: 0; }

/* ========== Section ========== */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.section h2 {
  font-size: 1.8rem;
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--line);
  display: inline-block;
}

/* ========== Tech List ========== */
.tech-list {
  display: flex; flex-wrap: wrap; gap: 1rem;
  list-style: none; padding-left: 0; margin: 0;
}
.tech-list li {
  background: var(--chip);
  padding: .5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
}

/* ========== Projects ========== */
.projects { display: flex; flex-direction: column; gap: 2rem; }

.project {
  background: var(--card);
  padding: 1.5rem;
  border-left: 4px solid var(--accent-1);
  border-radius: 6px;
}
.project h3 { margin: 0 0 .5rem; color: #3d2b1f; font-size: 1.3rem; }
.project p  { margin: 0 0 1rem; }

/* 画像はすべて1536x1024の比率前提。トリミングせず原寸比で表示 */
.project figure { margin: 0; }
.project img {
  width: 100%;
  height: auto;          /* ← 切れない */
  display: block;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
}

/* プロジェクト内CTAの余白 */
.project .cta { margin-top: 1rem; }

/* ========== CTA（共通） ========== */
.cta {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 8px 16px rgba(231,111,81,.28);
}
.cta:active {
  transform: translateY(-1px) scale(.99);
  box-shadow: 0 3px 10px rgba(231,111,81,.18);
}
.cta:focus-visible {
  outline: 3px solid rgba(252,74,26,.5);
  outline-offset: 2px;
}
.cta:visited { color: #fff; }

/* 主役CTA（無料診断） */
.cta--lg {
  padding: .85rem 1.6rem;
  font-size: 1.08rem;
  background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
  box-shadow: 0 3px 8px rgba(252,74,26,.25);
  letter-spacing: .01em;
}
.cta--lg:hover {
  background: linear-gradient(90deg, var(--primary-2), var(--primary-1));
  box-shadow: 0 8px 16px rgba(252,74,26,.35);
}

/* ========== Special Sections ========== */
#feedback, #diagnosis {
  background: #fffbe6;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
#feedback p:last-of-type,
#diagnosis p:last-of-type {
  font-size: .9rem;
  margin-top: .8rem;
  color: #5c4432;
}

/* ========== Footer ========== */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 2.5rem 1rem;
}
.footer h2 { margin: 0 0 .5rem; }
.contact-links { margin-top: 1rem; }
.contact-links a {
  margin: 0 1rem;
  color: #7b341e;
  text-decoration: none;
  font-weight: 700;
}
.contact-links a:hover { text-decoration: underline; }

/* ========== Responsive ========== */
@media (max-width: 600px) {
  .tech-list { flex-direction: column; }
  .contact-links a { display: block; margin: .5rem 0; }
  .hero h1 { font-size: 2rem; }
  .section { padding: 2rem 1rem 3rem; }
  .cta { padding: .8rem 1.25rem; }
}

/* ========== Reduce Motion ========== */
@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; transform: none; }
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cta-inline {
  animation: fadeInUp 0.8s ease both;
}

/* ========== Certification Image Responsive ========== */
.cert-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 3 / 2;
  display: block;
  margin-inline: auto;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

a {
  color: var(--hero-text); /* 例：#5c4432 などに揃える */
  text-decoration: underline;
  transition: color 0.3s ease;
}
a:hover {
  color: #7b341e; /* 少し明るめ or 暖色寄りに振るとよい */
}
a:focus-visible {
  outline: 3px solid rgba(124, 58, 18, 0.5); /* 暖色寄りに */
  outline-offset: 2px;
}

.lang-switch {
  position: absolute;
  top: .75rem;
  right: 1rem;
}
.lang-switch a {
  display: inline-block;
  font-size: .9rem;
  padding: .35rem .7rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  text-decoration: none;
  color: var(--hero-text);
  background: #fff;
}
.lang-switch a:hover { background: #f5f5f5; }