:root{
  --bg:#e6e9e2;
  --body:#212d21;
  --muted:#6b6b6b;
  --card:#ffffff;
  --accent:#111;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--body);
  background:var(--bg);
  line-height:1.8;
}
img{max-width:100%;display:block;height:auto}
/* Global link style */
a{ color: var(--body); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }
/* Keep special button-like link unaffected */
.hero .scroll-down{ text-decoration: none; }

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.section{padding:64px 0}
.section-title{
  text-align:center;
  font-size:28px;
  margin:0 0 28px;
  letter-spacing:.04em;
}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(230,233,226,.85);backdrop-filter: blur(6px);border-bottom:1px solid #ddd}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-weight:700}
.logo img{width:auto;height:47px; /*border-radius:50%;*/}
.site-nav{display:flex;gap:20px}
.site-nav a{color:var(--body);text-decoration:none;font-weight:500}
.site-nav a:hover{text-decoration:underline}
.nav-toggle{display:none;border:0;background:transparent;font-size:26px}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero-bg{width:100%;height:420px;object-fit:cover;display:block;border-radius:20px;margin:20px auto 0;max-width:1100px}
.hero-overlay{position:absolute;inset:0;display:block;max-width:1100px;margin:0 auto;border-radius:20px;box-shadow: inset 0 -120px 120px rgba(0,0,0,.55)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:#fff}
.hero h1{font-size:32px;margin:0;text-shadow:0 3px 12px rgba(0,0,0,.6)}
.hero p{font-size:18px;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.scroll-down{margin-top:12px;background:#fff;color:#000;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* About */
.about-grid{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.about-thumb img{border-radius:12px;}
.about-thumb {padding: 20px 0 0px 0px;}
.about-list{margin:12px 0 0 1em}

/* Cards (Services) */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 1px 10px rgba(0,0,0,.05)}
.card img{aspect-ratio:16/9;object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin:0 0 8px;font-size:18px}

/* Works */
.works-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.works-columns h3{margin:0 0 6px}
.works-columns ul{margin:0 0 16px 1em}

/* FAQ */
.faq{background:#fff;border-radius:12px;margin:10px 0;padding:12px 16px}
.faq summary{cursor:pointer;font-weight:600}

/* Contact */
.contact-wrap{background:transparent}
.contact-card{background:#fff;border-radius:16px;box-shadow:0 1px 12px rgba(0,0,0,.06);padding:28px}
.contact-lead{color:var(--muted);margin-top:-6px}
.contact-form{display:grid;gap:14px;max-width:720px;margin:18px auto 0}
.contact-form label{display:grid;gap:8px;font-weight:600}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:12px 14px;
  border:1px solid #ddd;border-radius:10px;
  font:inherit;
}
.contact-form .consent{display:flex;align-items:center;gap:8px;font-weight:500}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:0;border-radius:12px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
}
.btn-primary:hover{opacity:.9}
.hidden{position:absolute !important;left:-9999px !important}
.contact-form input.ch{
  width:auto;
  margin-left: 20px;
}

/* Footer */
.site-footer{padding:0px 0 20px 0;color:#777}
.site-footer a{color:inherit}

/* Responsive */
.sp-only{display:none}
@media (max-width: 1024px){
  .hero-bg{height:380px}
  .works-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  /* ==== Mobile adjustments (requested) ==== */
  /* Hamburger button color consistent with theme (no iOS default blue) */
  .nav-toggle{
    color: var(--body);
    background: transparent;
    border: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Add comfortable side paddings for text-heavy sections */
  .section.container{
    padding-left: 20px;
    padding-right: 20px;
  }
  #about .about-text,
  #works .works-columns{
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Reduce extra space around profile image and grid gap */
  .about-grid{
    gap: 12px;
  }
  .about-thumb{
    padding: 0;
    margin-bottom: 8px;
  }

  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;right:12px;top:64px;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.1);flex-direction:column}
  .site-nav a{padding:6px 2px; color: var(--body);}
  .about-grid{grid-template-columns:1fr;gap:16px}
  .card-grid{grid-template-columns:1fr}
  .works-columns{grid-template-columns:1fr}
  .hero-bg{height:300px;border-radius:0;max-width:100%;margin:0}
  .hero-overlay{border-radius:0;max-width:100%}
  .hero-content{padding:0 20px}
  .sp-only{display:inline}
}

/* ===============================
   Link styling (PC & Mobile 共通)
   =============================== */

/* 本文のリンクは常時アンダーラインで判別可能に（サイトのダークトーンに合わせる） */
a {
  color: var(--body);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

/* ホバー/フォーカス時は少し強調＆アクセシビリティ強化 */
a:hover,
a:focus {
  text-decoration-thickness: .12em;
}

a:focus-visible {
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

/* ナビやボタン風リンクは下線を出さない（既存トーン維持） */
.site-nav a,
.btn-primary,
.hero .scroll-down {
  text-decoration: none;
}

/* カードや見出し内のリンクがうるさく見える場合は、必要に応じて局所的に上書きしてね
.card-body a { text-decoration: underline; }
*/

/* ===============================
   Mobile adjustments
   =============================== */
@media (max-width: 768px) {
  /* ハンバーガーの色（iOSデフォ青を打ち消し、サイトトーンに統一） */
  .nav-toggle{
    color: var(--body);
    background: transparent;
    border: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* 自己紹介：プロフィール画像と本文の間をさらに詰める */
  .about-thumb { margin-bottom: 4px; }

  /* 自己紹介・実績：読みやすさのため左右に適度な余白 */
  .section.container { padding-left: 20px; padding-right: 20px; }

  /* スマホ時のグリッドの隙間を微調整（詰めすぎ防止で控えめ） */
  .about-grid { gap: 12px; }

  /* モバイルメニュー内リンクの色も本文と統一（青リンク防止） */
  .site-nav a { color: var(--body); }
}
/* ============================
   リンクデザイン調整
   ============================ */
a {
  color: #333; /* 本文より少し濃いグレー or サイトのアクセントカラー */
  text-decoration: underline; /* 下線を出してリンクとわかりやすく */
  transition: color 0.3s, text-decoration 0.3s;
}

a:hover {
  color: #000; /* ホバー時に濃くする（またはアクセントカラーに） */
  text-decoration: none; /* ホバー時に下線を消す or 別の演出 */
}
/* ==== ボタン調整 ==== */

/* ボタンの文字サイズを統一（両方「無料で相談する」と同じ大きさに） */
.btn-primary {
  font-size: 16px;  /* 必要なら 18px に変更してもOK */
  color: #fff;      /* 常に白文字 */
}

/* ホバー時も白文字を維持 */
.btn-primary:hover {
  color: #fff;
  opacity: 0.9;     /* 既存のホバー演出を残す */
}
/* ===== About: 画像が無いときは1カラムに ===== */
.about-grid:not(:has(.about-thumb)) {
  grid-template-columns: 1fr;
}
.about-grid:not(:has(.about-thumb)) .about-text {
  grid-column: 1 / -1; /* 全幅に広げる */
}

/* PCのときだけ本文幅をほどよく（読みやすさ向上・中央寄せ） */
@media (min-width: 769px) {
  .about-grid:not(:has(.about-thumb)) .about-text {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
  }
}
/* スマホ時のプロフィール画像サイズ調整 */
@media (max-width: 768px) {
  .about-thumb img {
    width: 240px;
    max-width: 100%;
    margin: 0 auto; /* 中央寄せ */
    display: block;
  }
}
/* ===== Fade-in ===== */
[data-fade] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
  will-change: opacity, transform;
}

[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 右や左からも出したい時（任意） */
[data-fade="right"] { transform: translateX(18px); }
[data-fade="left"]  { transform: translateX(-18px); }

/* 表示時は常に 0 に収束 */
[data-fade="right"].is-visible,
[data-fade="left"].is-visible {
  transform: translateX(0);
}

/* 動きを好まないユーザー対応 */
@media (prefers-reduced-motion: reduce) {
  [data-fade] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}