/* Hero（TOP専用） */
.hero{
  padding:120px 0 200px;
  text-align:center;
  background:radial-gradient(800px 300px at 50% -20%,#f3effb,transparent 55%);
}
.hero-constellation{width:80px;margin:0 auto 12px}
.hero-title{font-size:40px;margin:10px 0;color:var(--navy)}
.hero-sub{color:var(--ink-2);margin:0 0 20px}
.hero-cta{display:flex;gap:12px;justify-content:center}

/* Philosophy（TOP内） */
.h2{font-size:15px;line-height:1.5;color:var(--navy);margin:0 0 10px}
.lead{font-size:14px;color:var(--ink-2);margin:0}

/* News（TOP内） */
.section-muted{background:linear-gradient(180deg,#fff,#fbfbff)}
.news-list{list-style:none;margin:0 auto;max-width:600px;padding:0;font-size:14px;color:var(--ink-2)}
.news-list li{padding:6px 0;border-bottom:1px solid #eee}
.news-list time{color:var(--gold-strong);margin-right:10px}

/* Projects（TOP内） */
.projects{display:grid;gap:24px;max-width:860px;margin:0 auto}
.project{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;border:1px solid #eee;border-radius:18px;background:#fff;padding:16px}
.cover img{width:100%;height:220px;object-fit:cover;border-radius:12px}
.h3{font-size:15px;color:var(--navy);margin:.2em 0 .4em}
.desc{font-size:14px;color:var(--ink-2);margin:0 0 8px}
.chip{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;background:#fff6e5;color:#946d12;border:1px solid rgba(201,164,75,.6)}

/* Contact（TOP内） */
#contact .desc{text-align: center;margin: 0 auto 12px;max-width: 64ch;line-height: 1.9;text-wrap: balance;}

/* Responsive（TOP専用の崩れ対策） */
@media(max-width:768px){
  .project{grid-template-columns:1fr}
  .hero-title{font-size:32px}
  .h2{font-size:20px}
}

/* ====== Mobile: TOP専用レスポンシブ ====== */
@media (max-width: 560px){

  /* Hero をコンパクトに & 余白のバランス調整 */
  .hero{
    padding: 96px 0 120px;             /* 下の余白短めに */
    background: radial-gradient(620px 240px at 50% -18%, #f3effb, transparent 55%);
  }
  .hero-constellation{ width: 64px; margin-bottom: 10px; }
  .hero-title{ font-size: 32px; margin: 8px 0; }
  .hero-sub{ font-size: 14px; margin-bottom: 16px; }
  .hero-cta{ gap: 10px; }
  .hero-cta .btn{ padding: 9px 14px; } /* タップしやすく */
  /* ※ボタンを横並びのままにする。縦並びにしたい場合は下をON
     .hero-cta{ flex-direction: column; }
     .hero-cta .btn{ width: 100%; }
  */

  /* Philosophy パネルの内側を少し詰める */
  .panel{ padding: 24px 20px; border-radius: 16px; }
  .h2{ font-size: 16px; line-height: 1.6; }
  .lead{ font-size: 14px; line-height: 1.9; }

  /* News：読みやすい幅と行間に */
  .section-muted{ background: linear-gradient(180deg,#fff,#fbfbff); }
  .news-list{
    max-width: 100%;
    font-size: 13.5px;
  }
  .news-list li{ padding: 8px 0; }

  /* Projects：縦1カラムは既にOK。カードを軽やかに */
  .projects{ gap: 20px; }
  .project{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
  }
  .cover img{
    height: 180px;           /* 写真の縦を短めに */
    border-radius: 10px;
  }
  .h3{ font-size: 16px; margin: .1em 0 .35em; }
  .desc{ font-size: 14px; line-height: 1.8; }
  .chip{ font-size: 12px; padding: 4px 10px; }

  /* Contact：文章の改行を安定させ、ボタン間を確保 */
  #contact .desc{
    text-align: center;
    margin: 0 auto 14px;
    max-width: 64ch;
    line-height: 1.9;
    text-wrap: balance;
  }
  #contact .btn{ padding: 10px 18px; }

  /* Footer：上下をややタイトに */
  .site-footer{ padding: 20px 0; }
  .footer-inner{ gap: 12px; }
}

/* ====== SP 専用調整（PC は非影響）====== */
@media (max-width: 560px){

  /* Hero を 1画面に収めて、Philosophy はスクロールで登場 */
  .hero{
    min-height: calc(100vh - 100px);  /* ヘッダー分を差し引き */
    display: flex;
    align-items: center;              /* 中央寄せ */
    padding: 0px 0 0px;             /* 既存の見た目を大きく崩さない程度に調整 */
  }
}