@charset "utf-8";
/* ============================================================
   有限会社ワイシステムサービス メールフォーム 自作スキン用CSS
   （XServer メールフォーム「スタイルシート(CSS)」欄にこの内容を貼り付け）
   ※ {$form_data} が <table class="table"> 内に行を自動生成します。
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;700&display=swap');

/* ---- リセット（最小限） ---- */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ border:0; vertical-align:middle; max-width:100%; }
table{ border-collapse:collapse; border-spacing:0; }

/* ---- カラー変数 ---- */
:root{
  --primary:#0d3f66;
  --accent:#2e7bc4;
  --ink:#2c3242;
  --light:#eaf1f8;
  --line:#d7e2ef;
}

/* ---- ベース ---- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:#f4f7fb; color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  line-height:1.8; letter-spacing:.01em; word-wrap:break-word;
}
a{ color:var(--accent); }

/* ---- ヘッダー（サイトと共通イメージ） ---- */
.site-header{
  background:#fff; border-bottom:1px solid var(--line);
  padding:16px 5vw;
}
.site-logo{ display:inline-flex; flex-direction:column; line-height:1.15; text-decoration:none; }
.site-logo .ja{ font-weight:700; font-size:1.15rem; color:var(--primary); letter-spacing:.02em; }
.site-logo .en{ font-family:"Jost",sans-serif; font-size:.66rem; letter-spacing:.16em; color:#7a8aa0; margin-top:.15rem; }

/* ---- 全体ラッパー ---- */
#wrapper{
  width:100%; max-width:760px; margin:28px auto;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 2px 16px rgba(0,0,0,.06); overflow:hidden;
}
#main{ padding:28px 30px 36px; }
@media (max-width:600px){ #main{ padding:22px 18px 28px; } }

/* ---- セクション見出し ---- */
.section{ margin-bottom:32px; }
.section:last-child{ margin-bottom:0; }
.section__ttl{
  position:relative; margin-bottom:22px; padding:0 0 12px;
  font-size:1.5rem; font-weight:700; color:var(--primary); text-align:center;
  border:0;
}
.section__ttl:after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:46px; height:3px; background:var(--accent); border-radius:2px;
}
.section__body{ padding:0; }

/* ---- 説明文 ---- */
#txt_explain{ color:var(--ink); font-size:.95rem; margin-bottom:18px; }
#txt_explain p{ margin:0; }
.red_txt{ color:#c0392b; font-weight:700; }
.red_txt:empty{ display:none; }

/* ---- 入力項目テーブル（{$form_data} が行を生成） ---- */
.table{
  width:100%; margin:0 0 22px;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.table th{
  width:32%; padding:16px 18px; text-align:left; vertical-align:top;
  background:var(--light); color:var(--primary); font-weight:700; font-size:.92rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.table td{
  padding:16px 18px; vertical-align:middle;
  background:#fff; color:var(--ink); font-size:.95rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* ---- 入力コントロール ---- */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=url], input[type=password], textarea, select{
  width:100%; max-width:100%; box-sizing:border-box;
  padding:.7rem .8rem; background:#fff;
  border:1px solid #cfd6e0; border-radius:6px;
  font-family:inherit; font-size:1rem; color:var(--ink);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,123,196,.15);
}
textarea{ min-height:160px; overflow:auto; vertical-align:top; }
input[type=checkbox], input[type=radio]{ cursor:pointer; margin-right:.3em; }
label{ cursor:pointer; }

/* ---- ボタン ---- */
.button_box{ clear:both; padding:4px 0 0; text-align:center; }
input[type=submit], input[type=button]{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  min-width:180px; margin:6px; padding:.9rem 2rem;
  background:var(--accent); color:#fff; font-size:1rem; font-weight:700;
  border:none; border-radius:999px; transition:background .2s, transform .05s;
}
input[type=submit]:hover, input[type=button]:hover{ background:var(--primary); }
input[type=submit]:active{ transform:translateY(1px); }
/* 「戻る」ボタン（value="戻る"）はサブ扱いの見た目に */
input[type=submit][value="戻る"]{ background:#8898ac; }
input[type=submit][value="戻る"]:hover{ background:#6b7a8f; }
input[type=submit]:disabled, input[type=button]:disabled{ background:#b9c4d2; cursor:default; }
/* リンクをボタン表示にする（完了画面の「サイトへ戻る」など） */
.btn-link{
  display:inline-block; min-width:180px; margin:6px; padding:.9rem 2rem;
  background:var(--accent); color:#fff; font-size:1rem; font-weight:700;
  border-radius:999px; text-decoration:none; transition:background .2s;
}
.btn-link:hover{ background:var(--primary); color:#fff; }

/* ---- サイトへ戻るリンク ---- */
.back-link{ text-align:center; margin-top:8px; padding:0 30px 4px; }
.back-link a{ color:var(--accent); font-size:.9rem; text-decoration:none; }
.back-link a:hover{ text-decoration:underline; }

/* ---- フッター（サイトと共通イメージ） ---- */
.site-footer{
  max-width:760px; margin:0 auto; padding:22px 5vw 40px; text-align:center; color:var(--ink);
}
.site-footer .f-logo{ font-weight:700; color:var(--primary); font-size:1.05rem; margin:0 0 .3rem; }
.site-footer .f-addr{ font-size:.82rem; color:#5a6b80; margin:0 0 .8rem; }
.site-footer .f-copy{ font-size:.72rem; color:#8898ac; margin:0; }

/* ---- レスポンシブ：項目テーブルを縦積みに ---- */
@media (max-width:600px){
  .section__ttl{ font-size:1.3rem; }
  .table, .table tbody, .table tr, .table th, .table td{ display:block; width:100%; }
  .table{ border-left:0; border-top:0; }
  .table th{
    border:0; border-top:1px solid var(--line);
    padding:12px 14px 4px; background:transparent; color:var(--primary);
  }
  .table td{ border:0; padding:4px 14px 14px; }
  input[type=submit], input[type=button]{ width:100%; min-width:0; }
}