/* ===== 共通トーン（index4 / porfile に合わせる） ===== */
:root{
  --brand:#0a5db3;
  --brand-dark:#084a8f;
  --ink:#0f172a;
  --muted:#5f6b7e;
  --line:#e7eef7;
  --radius:14px;
  --shadow:0 10px 28px rgba(2,12,27,.08);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  color:var(--ink);
  line-height:1.8;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,
               "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  /* 左右の黒帯（既存サイト仕様に合わせる） */
  background-color:#fff;
  background-image: url(../images/image_bk.jpg);
  background-repeat: repeat-x;
}

/* ===== ヒーロー（上部写真帯） ===== */
#top{
  max-width:1080px;
  margin:0 auto 48px;
  padding:100px 20px 0;            /* 画像下に余白、左右は安全パディング */
  background-repeat:no-repeat;
  background-position:center 0;
  text-align:left;
}

/* 画像切替（既存の profile 系画像を流用。必要なら差し替え可） */
@media (max-width:480px){
  #top{ background-image: url(../images/image_profile_s.jpg); }
}
@media (min-width:481px) and (max-width:759px){
  #top{ background-image: url(../images/image_profile_m.jpg); }
}
@media (min-width:760px){
  #top{ background-image: url(../images/image_profile.jpg); }
}

/* ===== 見出し・導入 ===== */
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-dark); text-decoration:underline }

.tagline{
  margin:0;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight:700;
  letter-spacing:.08em;
  color:#0a2a57;
}
.hero-title{
  margin:8px 0 12px;
  color:#0a2a57;
  font-weight:900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing:.02em;
}

/* ===== カード（共通） ===== */
.card{
  background:#fff;
  border:1px solid #e8eef7;
  border-radius: var(--radius);
  padding:16px 18px;
  box-shadow: var(--shadow);
  color:#22324d;
  margin:18px 0 22px;
}

/* ===== フォーム ===== */
.contact-card{ padding: 18px 20px; }
.grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px; grid-column: span 6; }
.field.full{ grid-column: span 12; }
.field > span, .field > legend{
  font-weight:700; color:#0a2a57; font-size: .98em;
}
.field em{
  font-style: normal; font-weight: 800; color: #d93025; margin-left: .25em; font-size: .9em;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="subject"], textarea, select{
  width: 100%;
  border: 1px solid #dbe6f6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1em;
  background: #fff;
  outline: none;
}
textarea{ resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: #a5c4f7;
  box-shadow: 0 0 0 4px rgba(10,93,179,.12);
}
.check, .radio{ display:inline-flex; align-items:center; gap:8px; margin-right: 14px; }

.agree{
  display:flex; align-items:flex-start; gap:10px;
  padding-top: 6px;
  border-top: 1px dashed #e6eef8;
}

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; }

/* ===== ボタン ===== */
.actions{ display:flex; align-items:center; gap:12px; margin-top: 8px; flex-wrap: wrap; }
#form-status{ margin: 6px 0 0; color:#35506f; }
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  background: linear-gradient(135deg, #1556d1, #003aa3); /* 高コントラスト */
  color:#fff !important;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 16px rgba(10,93,179,.25);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10,93,179,.28);
  text-decoration:none;
}
.btn.ghost{
  background:#e8f1ff; color:#0b3b78 !important; border:1px solid #cfe0ff; box-shadow: 0 6px 16px rgba(11,59,120,.12);
}
.btn.ghost:hover{ background:#deebff; }

/* ===== 下部ナビ（チップ風） ===== */
.site-nav{
  display:flex; gap:12px; flex-wrap:wrap;
  padding-top:12px; margin-top:8px;
  border-top:1px solid var(--line);
}
.chip{
  background:#fff;
  border:1px solid #e8eef7;
  padding:10px 12px;
  border-radius:10px;
  box-shadow:var(--shadow);
  font-weight:700;
  color:#0a5db3;
}
.chip:hover{ color:#084a8f; text-decoration:underline }

/* 同意文の行をグリッド全幅に */
.grid > .full { grid-column: 1 / -1; }   /* どの .full でも全幅に */
.agree {                                   /* 同意チェック行の整形 */
  grid-column: 1 / -1;                     /* 念のため明示 */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.8;
}
.agree input { margin-top: .35em; flex: 0 0 auto; }


/* ===== レスポンシブ ===== */
@media (max-width:860px){
  .grid{ grid-template-columns: repeat(6,1fr); }
  .field{ grid-column: span 6; }
  .field.full{ grid-column: span 6; }
}