@charset "UTF-8";

/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   ページ固有：l-common ブロック（お知らせ・エラー画面）

   対象ファイル
     error-entry-period.html  … お申し込み期間外
     error-else.html          … システムエラー
     error-is-reserved.html   … 既に受付済み

   l-common は l-thanks とは別ブロック。元のEJSがこの構造なので
   そのまま踏襲し、HTML側の追加は次の1クラスだけにする。

     <div class="l-common l-common--card">

   見出しタグが h1 と div>h2 で揺れているため、どちらでも同じ
   見た目になるように両方へ効くセレクタで書く。

   【読み込み順】c-base → c-shell → c-error → c-form → c-blocks
                → c-layout-full → c-motion → 本ファイル
   ============================================================ */


/* ============================================================
   1. カード

   l-thanks__container に相当する入れ物が l-common にはないため、
   l-common 自体をカードとして扱う。
   ============================================================ */
.l-common--card{
  max-width:620px;
  margin:0 auto 20px;
  padding:6px 24px 28px;
  background:var(--card);
  border-top:5px solid var(--green);
  border-radius:28px;
  box-shadow:0 6px 20px rgba(120,140,120,.08);
  animation:om-rise .42s cubic-bezier(.25,.8,.3,1) both;
}

/* 他ページと同じく、左右に画面端からの余白を確保する */
.wrapper > .l-common--card{margin-left:16px;margin-right:16px;}
@media (min-width:652px){
  .wrapper > .l-common--card{margin-left:auto;margin-right:auto;}
}


/* ============================================================
   2. 見出しと状況説明

   h1 と div>h2 の両方に同じ見た目を与える。
   ============================================================ */
.l-common--card .l-common__title,
.l-common--card .l-common__title h2{
  margin:0;
  padding:30px 0 6px;
  font-size:21px;
  font-weight:900;
  line-height:1.5;
  text-align:center;
  color:var(--green-deep);
  letter-spacing:.01em;
}

.l-common--card .l-common__title h2{padding:0;}

.l-common--card .l-common__subtitle{
  margin:12px 0 0;
  font-size:16px;
  font-weight:700;
  line-height:1.7;
  text-align:center;
  color:var(--ink);
}


/* ============================================================
   3. 本文

   __msg 直下の段落を、案内のかたまりとして地色に置く。
   ============================================================ */
.l-common--card .l-common__msg{margin-top:20px;}

.l-common--card .l-common__msg > p{
  margin:0;
  padding:18px 20px;
  font-size:15px;
  line-height:1.95;
  text-align:left;
  background:var(--cream);
  border-radius:18px;
}

.l-common--card .l-common__msg > p span{display:block;}


/* ============================================================
   4. 戻るリンク

   元HTMLにあったリスト記号「・」と囲みの span は削除し、
   <a> を直接置く形にした（EJS側も同様に削除すること）。
   決済リンク画面の l-back__btn と同じ淡い緑の面で、
   ボタンほど強くない中間の扱い。
   ============================================================ */
.l-common--card .l-common__link{
  margin-top:16px;
  font-size:15px;
  font-weight:700;
  text-align:center;
}

.l-common--card .l-common__link a{
  display:inline-block;
  padding:11px 22px;
  font-size:15px;
  color:var(--green-deep);
  background:var(--green-tint);
  border:1px solid var(--green-line, #cfe6d4);
  border-radius:999px;
  text-decoration:none;
  transition:background-color .16s,border-color .16s,color .16s;
}

.l-common--card .l-common__link a:hover{
  color:#fff;
  background:var(--green);
  border-color:var(--green);
}


/* ============================================================
   5. 連絡先

   案内文と役割が違うため、白地＋実線で描き分ける。
   （破線は注意・案内、実線は問い合わせ先というフォーム全体のルール）
   ============================================================ */
.l-common--card .l-common__contact{
  margin-top:14px;
  padding:16px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
}

.l-common--card .l-common__contact p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  text-align:center;
}

/* 連絡先が2段落あるとき、1段落目は前置きの案内文なので控えめに */
.l-common--card .l-common__contact p:first-child:not(:last-child){
  margin-bottom:6px;
  font-size:13.5px;
  font-weight:700;
  color:var(--muted);
}

.l-common--card .l-common__contact p span{display:inline;}

/* 連絡先が __msg 直下に直接置かれている場合（entry-period）も
   同じ見た目にする */
.l-common--card .l-common__msg > p:only-child{
  padding:16px 20px;
  font-size:14.5px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
}