/* =========================================================
   メールレター登録フォーム（共通コンポーネント）

   設置箇所によって読み込まれるCSSが異なるため、このファイルは
   front-page.css の :root 変数に依存させず自己完結させる。
     - トップページ    : front-page.css あり
     - 説明ページ      : front-page.css あり
     - 記事サイドバー  : front-page.css なし（style.css のみ）

   MyASP 配布のCSS（format_css / mobile_css / myasp-ui-form.css）は
   読み込まない。ブランド意匠と競合するうえ、全記事ページに3本の
   外部CSSと1本のJSを追加する負荷が見合わないため。フォームは
   name属性のみ踏襲し、検証はHTML5ネイティブに任せる。

   配色は 1ビュー2色ルールに従い navy + cyan のみ。
   ========================================================= */

.jelma-ml {
  /* ブランドトークン（このコンポーネント内に閉じる） */
  --ml-navy: #1b3a5c;
  --ml-navy-deep: #14304c;
  --ml-navy-soft: #2c557d;
  --ml-pearl: #faf7f2;
  --ml-pearl-2: #f3ede3;
  --ml-white: #ffffff;
  --ml-text: #2b2722;
  --ml-muted: #6f675e;
  --ml-hairline: #ece4d7;
  --ml-field-line: #e0d8c8;
  /* 入力欄の枠。UI部品は背景に対し3:1が必要で、#e0d8c8 は1.36:1しかなかった。
     #948a7c は #fcfaf6 に対し3.26:1 */
  --ml-field-strong: #948a7c;
  /* 装飾専用のシアン。テキストやフォーカス表示には使わない（白背景で2.36:1しかない） */
  --ml-cyan: #3fb6d9;
  /* テキスト・フォーカス・図形に使う濃いシアン。白背景で4.90:1（WCAG 2.1 AA 適合） */
  --ml-cyan-deep: #247a94;

  --ml-font-display: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif;
  --ml-font-body: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;

  box-sizing: border-box;
  color: var(--ml-text);
  font-family: var(--ml-font-body);
  line-height: 1.9;
  /* 日本語の改行制御。auto-phrase 未対応ブラウザは keep-all で語中改行を防ぐ */
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.jelma-ml *,
.jelma-ml *::before,
.jelma-ml *::after {
  box-sizing: border-box;
}

/* 語中改行の保護。
   word-break:auto-phrase はChromeの形態素解析に依存するため、かな続きの複合語
   （「なんとなく」「立場としても」「捉えなおす」等）を誤って分割することがある。
   実測で分割が確認された箇所だけこのクラスで囲い、明示的に守る。
   長い語に付けると狭い画面で横あふれするので、目安10文字程度までに限る。
   メールレター関連の全設置箇所（トップ・説明ページ・サイドバー）で使えるよう
   ページ専用CSSではなくこのコンポーネント側に置く。 */
.ml-nb {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   ヘッダービジュアル（写真 + ネイビーオーバーレイ + 実テキスト）

   当初SVGバナーで作ったが、サイト内の他セクションが実写ベースのため
   SVG単体だと浮くという指摘を受けて写真合成に変更した。
   写真をSVGに埋め込むと巨大化しWebフォントも効かないため、
   <img> + CSSオーバーレイ + 実テキストで構成する。

   フォントは vw ではなく cqi（コンテナ幅基準）でスケールさせる。
   同じ部品が 300px（PCサイドバー）/ 343px（スマホ全幅）/ 470px（PC2カラム左）
   の3幅で使われ、ビューポート幅とコンテナ幅が一致しないため。
   container-type 未対応ブラウザ向けに px の先出しフォールバックを置いている。
   --------------------------------------------------------- */
figure.ml-visual {
  --ml-visual-navy-deep: #14304c;
  --ml-visual-pearl: #faf7f2;

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  color: var(--ml-visual-pearl);
  background: var(--ml-visual-navy-deep);
  border-radius: 12px;
  box-sizing: border-box;
}

/* テキスト可読性のためのオーバーレイ。上（テキスト帯）を濃く、
   下（人物が写っている帯）を薄くして写真の存在感を残す */
figure.ml-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 48, 76, 0.86) 0%,
    rgba(20, 48, 76, 0.78) 46%,
    rgba(20, 48, 76, 0.7) 65%,
    rgba(20, 48, 76, 0.34) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, 0.18);
}

.ml-visual .ml-visual__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  /* 4:3の原画を16:9枠に入れるため上下を約20%捨てる。
     人物（原画の縦720〜955px）を残しつつ、テキストを載せる空を確保する位置 */
  object-position: 50% 30%;
}

.ml-visual .ml-visual__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 10px;
  padding: clamp(10px, 3.4cqi, 18px);
  box-sizing: border-box;
  font-family: var(--ml-font-body);
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

.ml-visual .ml-visual__copy {
  min-width: 0;
}

.ml-visual .ml-visual__eyebrow,
.ml-visual .ml-visual__title,
.ml-visual .ml-visual__subtitle,
.ml-visual .ml-visual__badge {
  margin: 0;
  color: inherit;
}

.ml-visual .ml-visual__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-family: "Cormorant Garamond", "Inter", serif;
  font-size: 10px;
  font-size: clamp(10px, 3.2cqi, 12px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.ml-visual .ml-visual__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.ml-visual .ml-visual__title {
  margin-top: 2px;
  font-family: var(--ml-font-display);
  font-size: 22px;
  font-size: clamp(22px, 6.8cqi, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ml-visual .ml-visual__subtitle {
  margin-top: 3px;
  font-size: 13px;
  font-size: clamp(13px, 3.8cqi, 15px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

/* サブコピーは意味の切れ目で必ず2行に割る（語中改行を許さない） */
.ml-visual .ml-visual__line {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.ml-visual .ml-visual__badge {
  align-self: flex-start;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  margin-top: clamp(5px, 1.8cqi, 9px);
  padding: 4px 9px;
  font-size: 11px;
  font-size: clamp(11px, 3.2cqi, 12px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.015em;
  background: rgba(20, 48, 76, 0.46);
  border: 1px solid rgba(250, 247, 242, 0.56);
  border-radius: 4px;
  box-sizing: border-box;
}

.ml-visual .ml-visual__badge-part {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   見出し・リード
   --------------------------------------------------------- */
.jelma-ml-title {
  margin: 0 0 0.7em;
  color: var(--ml-navy);
  font-family: var(--ml-font-display);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.jelma-ml-lead {
  margin: 0 0 1.6em;
  color: var(--ml-text);
  line-height: 1.95;
}

.jelma-ml-lead:last-of-type {
  margin-bottom: 1.9em;
}
/* ---------------------------------------------------------
   フォーム本体
   --------------------------------------------------------- */
.jelma-ml-form {
  margin: 0;
}

.jelma-ml-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jelma-ml-field {
  margin: 0 0 1.15em;
}

.jelma-ml-label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.45em;
  color: var(--ml-navy);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.jelma-ml-req {
  flex: 0 0 auto;
  padding: 0.15em 0.6em;
  background: var(--ml-navy);
  border-radius: 999px;
  color: var(--ml-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.jelma-ml-input {
  width: 100%;
  padding: 0.8em 1em;
  border: 1.5px solid var(--ml-field-strong);
  border-radius: 12px;
  background: #fcfaf6;
  color: #1a1a1a;
  /* Xserverの TypeSquare Webフォントプラグインが input に
     style="font-family: ts-unused;" をインラインで差し込んでくるため、
     inherit では負ける。フォーム内の書体を揃えるには !important が必要。 */
  font-family: var(--ml-font-body) !important;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* placeholderは入力後に消えるため意味は可視labelが担うが、
   入力前の可読性としてAA（4.5:1）を満たす濃さにする。#b3a994 は2.23:1で不足だった */
.jelma-ml-input::placeholder {
  color: #6f675e;
  opacity: 1;
}

.jelma-ml-input:focus {
  outline: none;
  border-color: var(--ml-navy);
  background: var(--ml-white);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
}

/* 入力済みかつ不正な値のときだけ赤くする（初期表示では出さない） */
.jelma-ml-input:not(:placeholder-shown):invalid {
  border-color: #d2555f;
}

.jelma-ml-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 1.5em 0 0;
  padding: 0.95em 1.5em;
  border: none;
  border-radius: 999px;
  background: var(--ml-navy);
  color: var(--ml-white);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 10px 24px rgba(27, 58, 92, 0.16);
}

.jelma-ml-submit:hover {
  background: var(--ml-navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(27, 58, 92, 0.22);
}

.jelma-ml-submit:focus-visible {
  outline: 3px solid var(--ml-cyan-deep);
  outline-offset: 3px;
}

.jelma-ml-submit:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------
   注記
   --------------------------------------------------------- */
.jelma-ml-note {
  margin: 1.2em 0 0;
  color: var(--ml-muted);
  font-size: 0.82rem;
  line-height: 1.8;
  text-align: center;
}

.jelma-ml-note a {
  color: var(--ml-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   バリアント: page
   説明ページ（/mailletter/）の白カード。面積に余裕があるので
   ラベル可視・姓名分離のフル構成で使う
   ========================================================= */
.jelma-ml--page {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--ml-white);
  border: 1px solid var(--ml-hairline);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(27, 58, 92, 0.08);
}

.jelma-ml--page .jelma-ml-lead {
  font-size: 0.98rem;
}

/* =========================================================
   バリアント: compact
   記事サイドバーのウィジェットと、トップページのセクション。

   設計方針: スマホ1画面（375x812、実効表示領域おおよそ660px）に
   「ビジュアルからボタンまで」が収まること。
   そのためリード文と特典ブロックは持たず、文言はビジュアル側に集約し、
   入力は2項目（姓・メール）に絞ってラベルは視覚的に隠している。
   高さの実測内訳は .claude/progress.md に記録。
   ========================================================= */
.jelma-ml--compact {
  padding: 20px;
  background: var(--ml-white);
  border: 1px solid var(--ml-hairline);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(27, 58, 92, 0.07);
  line-height: 1.8;
}

.jelma-ml--compact .jelma-ml-title {
  font-size: 1.05rem;
  margin-bottom: 0.6em;
}

.jelma-ml--compact .jelma-ml-lead {
  margin-bottom: 1.2em;
  font-size: 0.88rem;
  line-height: 1.85;
}

.jelma-ml--compact .jelma-ml-field {
  margin-bottom: 10px;
}

.jelma-ml--compact .jelma-ml-input {
  padding: 0.75em 0.9em;
  border-radius: 10px;
  /* iOS Safari のズーム発動を防ぐため16pxを下限にする */
  font-size: 16px;
}

.jelma-ml--compact .jelma-ml-submit {
  margin-top: 14px;
  padding: 0.85em 1rem;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
}

.jelma-ml--compact .jelma-ml-note {
  margin-top: 12px;
  font-size: 0.76rem;
  line-height: 1.7;
}

/* SWELLのウィジェット枠内に置かれたときの余白調整 */
.widget .jelma-ml--compact,
.c-widget .jelma-ml--compact {
  margin-top: 4px;
}

/* =========================================================
   トップページのセクション枠

   スマホはサイドバーウィジェットと完全に同じ1カラム、
   PCは「左ビジュアル・右フォーム」の2カラムに組み替える。
   マークアップは compact 1種類のままで、切り替えはCSSだけで行う。
   ========================================================= */
.mailletter-section {
  background: linear-gradient(180deg, #faf7f2 0%, #f3ede3 100%);
}

.mailletter-section .mailletter-section-head {
  max-width: 720px;
  margin: 0 auto clamp(24px, 4vw, 36px);
  text-align: center;
}

/* section-title の既定の下余白48pxは、直下にカードが来るこの構成では空きすぎる */
.mailletter-section .mailletter-section-head .section-title {
  margin-bottom: 0;
}

/* トップページに置くときは、サイドバー用の幅制限を外して
   セクション内で中央に据える */
.mailletter-section .jelma-ml--compact {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 26px);
}

.mailletter-section-more {
  margin: clamp(20px, 3vw, 28px) 0 0;
  text-align: center;
  font-size: 0.92rem;
}

.mailletter-section-more a {
  color: #1b3a5c;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mailletter-section-more a::after {
  content: " ›";
  text-decoration: none;
}

/* --- PC: 左ビジュアル / 右フォームの2カラム ---
   「にじつなカード」バナーと並んでも浮かないよう、横長の1枚ブロックとして見せる。
   1061px はサイト全体のPC/タブレット境界に合わせている。

   本文側は .jelma-ml-body で必ず包んであるので、2要素を並べるだけで済む。
   以前は grid-row: 1 / span 3 で右列の行数を決め打ちしていたが、
   見出しやリードの有無で行数が変わると崩れるためラッパー方式に改めた。 */
@media (min-width: 1061px) {
  .mailletter-section .jelma-ml--compact {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(32px, 4vw, 52px);
    max-width: 1080px;
    padding: clamp(28px, 3vw, 40px);
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(27, 58, 92, 0.08);
  }

  /* 左右の高さを揃えるため、PCではアスペクト比指定を解いて行の高さに従わせる。
     aspect-ratio と align-self:stretch を同時に効かせると比率が破られて
     どちらの意図も満たさないので、ここでは「高さ一致」を優先する。
     写真は object-fit:cover なので変形はせずトリミング範囲だけが変わる。 */
  .mailletter-section .jelma-ml--compact .ml-visual {
    aspect-ratio: auto;
    min-height: 320px;
    margin: 0;
    border-radius: 14px;
  }

  .mailletter-section .jelma-ml--compact .jelma-ml-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mailletter-section .jelma-ml--compact .jelma-ml-note {
    text-align: left;
  }

  .mailletter-section .jelma-ml--compact .jelma-ml-field {
    margin-bottom: 12px;
  }

  .mailletter-section .jelma-ml--compact .jelma-ml-input {
    padding: 0.85em 1em;
    border-radius: 12px;
  }

  .mailletter-section .jelma-ml--compact .jelma-ml-submit {
    margin-top: 16px;
    padding: 0.95em 1.5em;
    font-size: 1.02rem;
  }
}

/* =========================================================
   レスポンシブ
   ========================================================= */

@media (max-width: 560px) {
  .jelma-ml--page {
    padding: 22px 18px;
    border-radius: 14px;
  }

  /* スマホでは姓名を縦積みにして入力しやすくする */
  .jelma-ml--page .jelma-ml-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .jelma-ml--page .jelma-ml-input {
    /* iOS Safari のズーム発動を防ぐため16px以上を維持する */
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jelma-ml-submit {
    transition: none;
  }

  .jelma-ml-submit:hover {
    transform: none;
  }
}