/* ===== Minimal custom styles (site.css) ===== */

/* --- CTA card（About/日本語ページ用） --- */
.cta-card{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  padding:22px; margin:32px 0;
  border:4px solid #1E3A8A;            /* ディープブルーの枠線 */
  border-radius:16px;
  background:#fff;                      /* 背景を白に変更 */
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}
.cta-text{
  font-size:1.1rem; line-height:1.5;
  color:#000;                        /* 枠線と統一 */
}

/* --- CTAボタン（メール用：ディープブルー背景＋白文字） --- */
.btn-cta{
  display:inline-block;
  padding:14px 24px;
  border-radius:999px;
  background:#1E3A8A;                   /* ディープブルー背景 */
  color:#fff !important;                /* 白文字を固定 */
  font-weight:700;
  text-decoration:none;
  border:2px solid #1E3A8A;             /* 枠線もディープブルー */
  box-shadow:0 6px 18px rgba(30,58,138,.25);
  transition:transform .2s ease, filter .2s ease;
}
.btn-cta:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
  color:#fff !important;                /* ホバー時も白文字のまま */
}

/* --- 「ご依頼いただけること」などで使う余白付きリスト --- */
.spaced-list li,
.spaced-list li p{ margin-bottom:12px !important; }
.spaced-list .meta{ color:#64748B; font-size:.95rem; }

/* --- 補助 --- */
hr{ border-color:#E2E8F0; }
.mark-border{ border-left:4px solid #1E3A8A; padding-left:12px; }

/* --- Profile header (画像＋紹介文の横並び) --- */
.profile-container{
  display:flex;
  align-items:flex-start;     /* 上揃え */
  gap:24px;                   /* 画像と文章の間隔 */
  margin:12px 0 20px;         /* セクション間の余白 */
  flex-wrap:nowrap;
}

.profile-container img{
  width:auto;
  max-width: clamp(200px, 30vw, 320px);
  height:auto;
  border-radius:8px;
  flex:0 0 auto;              /* 画像幅を固定扱いに */
}

.profile-text{
  flex:1 1 auto;              /* 残り幅をテキストに */
  min-width: 240px;
  line-height:1.75;           /* 読みやすさ */
}

.profile-name {
  font-size: 1.8rem;   /* 大きさ。デフォルトより大きめ */
  font-weight: 700;    /* 太字 */
  margin-bottom: 0.5em;
}

@media (max-width: 768px){
  .profile-name {
    font-size: 1.5rem; /* スマホ用に少し小さめ */
  }
}

/* スマホ・タブレットでは縦積み＆中央寄せ */
@media (max-width: 768px){
  .profile-container{
    flex-direction:column;
    align-items:center;
    text-align:left;          /* 左寄せのままが読みやすいなら left */
    gap:16px;
  }
  .profile-container img{
    max-width:220px;          /* スマホでの上限 */
  }
  .profile-text{
    width:100%;
  }
}