/* Next移植用オーバーライド ── デザイン時の <image-slot>(ドラッグ枠) を本番の <img> に置換したぶんのサイズ指定。
   デザイナーの style.css は無改変のまま、この1枚で差分だけ当てる。 */
.portrait-frame > img.photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--r-photo);
  box-shadow: var(--sh-md);
}
.founder .pcol > img.photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--r-photo);
  box-shadow: var(--sh-md);
}

/* セクション見出しの説明文（「タイトル＋説明」の統一パターン） */
.sec-head .sec-desc {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.95;
  max-width: 42em;
}

/* 日本語の改行を自然に：見出しは行数バランス、テキストは文節区切り（対応ブラウザのみ・非対応は従来どおり） */
h1, h2, h3, h4 { text-wrap: balance; }
h1, h2, h3, h4, p, li, .lead { word-break: auto-phrase; }

/* お知らせ/コラムのカード・行をリンク（<a>）にしたぶんの調整 */
a.row, a.col { color: inherit; text-decoration: none; }

/* 記事本文（Markdown → HTML） */
.article-meta { font-family: var(--latin); font-size: 13px; letter-spacing: .04em; color: var(--ink-3); }
.article-body { margin-top: 32px; font-size: 16px; line-height: 2.1; color: var(--ink-2); }
.article-body p { margin: 0 0 1.4em; }
.article-body a { color: var(--accent-deep); text-decoration: underline; }
.article-body h2, .article-body h3 { font-family: var(--display); color: var(--ink); margin: 1.6em 0 .6em; line-height: 1.5; }
.article-body ul, .article-body ol { margin: 0 0 1.4em 1.4em; }
.article-body li { margin: .3em 0; }

/* お問い合わせフォーム（濃色セクション #contact 内） */
.contact-form { margin-top: 28px; display: grid; gap: 16px; max-width: 540px; }
.contact-form label { font-size: 13px; color: rgba(255,255,255,.85); display: block; margin-bottom: 7px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
  color: #fff; font: inherit; line-height: 1.6;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); background: rgba(255,255,255,.12);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 0; }
.contact-form .consent input { width: auto; }
.contact-form .consent a { color: var(--accent-soft); text-decoration: underline; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form button[disabled] { opacity: .6; cursor: default; }
.msg-ok { color: #bdeccb; font-size: 15px; line-height: 1.9; }
.msg-err { color: #ffc0b4; font-size: 13.5px; }
.contact-form .form-note {
  font-size: 13.5px; line-height: 1.95; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.05); border-left: 3px solid var(--accent);
  padding: 13px 16px; border-radius: 0 10px 10px 0; margin: 6px 0 2px;
  text-wrap: balance;
}
.contact-form .form-note strong { color: var(--accent-soft); font-weight: 700; }

/* 送信完了カード（はっきり見せる） */
.form-done {
  margin-top: 28px; max-width: 540px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 36px 30px; text-align: center;
}
.form-done-icon {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.form-done h3 { font-family: var(--display); font-size: 23px; color: #fff; margin-bottom: 12px; letter-spacing: .02em; }
.form-done p { font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.85); }

/* 成果事例：4件を2×2で（モバイルは1列） */
.outcomes { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .outcomes { grid-template-columns: 1fr; } }