/* ========== Base Reset ========== */
*{box-sizing:border-box}
html,body{margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","游ゴシック",sans-serif;
  color:#111;background:#f7f7f9;
  padding: 50px 0 100px 0;
}

main{
	width: 100%;
	margin: 24px auto;
	padding: 0 1em;
}

div.mainflame{

}

div.mainflame3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}

div.mainflame > div,
div.mainflame3 > div{
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1em;
    margin-bottom: 1em;
    box-shadow: var(--shadow);
}

/* ========== table ========== */
.mainflame table{
	width: 100%;
	border: 0;
}

.mainflame table th{
	display: block;
    width: 100%;
	font-weight: 400;
	padding: 7px 0;
	text-align: left;
}

.mainflame td{
	padding: 7px 0;
	display: block;
    width: 100%;
}

.mini{
	font-size: 80%;
}


/* ========== Design Tokens (px固定) ========== */
:root{
  --control-h: 44px;          /* 入力・ボタンの基本高さ */
  --radius: 10px;             /* 角丸 */
  --gap: 18px;                /* グリッド間隔 */
  --c-brand:#0b69c7;
  --c-border:#d1d5db;
  --c-border-strong:#b9c4d0;
  --c-muted:#333;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ========== Layouts ========== */
.container{max-width:1100px;margin:24px auto;padding:0 1em}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.full{grid-column:1/-1}

/* ========== Headings（書体・サイズ統一） ========== */
h1{font-size:24px;line-height:1.4;margin:0 0 12px;font-weight:700}
h2{font-size:20px;line-height:1.5;margin:0 0 12px;font-weight:700}
h3{font-size:1em;line-height:1.6;margin:8px 0 8px;font-weight:700;color:#333}

/* ========== Text & Links ========== */
a{color:var(--c-brand);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:#888}
.error{color:#c70b2e}
.note{color:#333}
.red{color: #c70b2e; font-weight: bold;}

/* ========== Forms（高さを統一） ========== */
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
label.cb{display:block;flex-direction:column;gap:6px;font-size:14px}

/* Text系（text/password/email/date/number/textarea/select） */
input[type=text],
input[type=tel],
input[type=password],
input[type=email],
input[type=date],
input[type=month],
input[type=number],
select{
	width: 88%;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  
  padding:0 12px;
  height:var(--control-h);
  line-height:var(--control-h);
}
textarea{
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  
  padding:10px 12px;
  min-height:calc(var(--control-h) * 2);
  line-height:1.6;
  resize:vertical;
}

/* チェックボックス/ラジオの素のサイズ（検索フォームなど） */

input[type=radio]{
  width:18px;height:18px;
  accent-color:var(--c-brand);
}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius);
  background:var(--c-brand);color:#fff;
  padding:0 14px;cursor:pointer;
  height:var(--control-h);line-height:var(--control-h);
  
}
.btn:hover{filter:brightness(0.95)}
.btn-outline{background:#fff;color:var(--c-brand);border:1px solid var(--c-brand)}
.btn-danger{background:#c70b2e}
.btn-sm{height:32px;line-height:32px;padding:0 10px;}
.w-100{width:100%}

/* ========== Tables ========== */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:top;}
.table thead th{background:#fafafa}

/* ========== Key-Value Blocks ========== */
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px}
.kv dt{color:var(--c-muted)}

/* ========== Utilities ========== */
.toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0}
.inline{display:inline}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:1em 0}
.pager a{padding:6px 10px;border-radius:8px;border:1px solid #ddd;background:#fff}
.pager a.current{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
details>summary{cursor:pointer}
.flex-1{flex:1}



/* form */
#shinsaForm input[type=radio]{
    display: none;
}




/* ラジオボタン */
.radios2 .inputRadio {
	width: 48%;
	font-weight: bold;
	display: block;		/* ブロックレベル要素化する */ 
	margin: 1%;			/* ボックス外側の余白を指定する */
	/* ボックスの横幅を指定する */
	padding-left: 0;	/* ボックス内左側の余白を指定する */
	padding-right: 0;	/* ボックス内御右側の余白を指定する */
	padding: 0.5em;
	color: #00a5a8;		/* フォントの色を指定 */
	background: #FFFFFF;
	text-align: center;	/* テキストのセンタリングを指定する */
	line-height: auto;	/* 行の高さを指定する */
	cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #00a5a8;/* ボックスの境界線を実線で指定する */
	border-radius: 5px;	/* 角丸を指定する */
	box-sizing: border-box;
}

.radios3 .inputRadio {
	width: 48%;
	font-weight: bold;
	display: block;		/* ブロックレベル要素化する */ 
	margin: 1%;			/* ボックス外側の余白を指定する */
	/* ボックスの横幅を指定する */
	padding-left: 0;	/* ボックス内左側の余白を指定する */
	padding-right: 0;	/* ボックス内御右側の余白を指定する */
	padding: 0.5em;
	color: #00a5a8;		/* フォントの色を指定 */
	background: #FFFFFF;
	text-align: center;	/* テキストのセンタリングを指定する */
	line-height: auto;	/* 行の高さを指定する */
	cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #00a5a8;/* ボックスの境界線を実線で指定する */
	border-radius: 5px;	/* 角丸を指定する */
	box-sizing: border-box;
}

#shinsaForm input[type="radio"]:checked + label{
	color: #FFF;
	background: #00a5a8;/* マウス選択時の背景色を指定する */
	border: 2px solid #00a5a8;
	color: #ffffff; 	/* マウス選択時のフォント色を指定する */
	transition: all .3s;
}

.actions{
	text-align: center;
	margin: 20px 0;
}

.privacyBox{
	width: 90%;
	margin: auto;
	display: block;
	text-align: center;
	background: #efbfc6;
	border: 5px solid #e76471;
	padding: 0.5em;
	font-size: 90%;
	line-height: 180%;
}

/* オンのとき */
input#submitBtn[type="submit"]{
	border: 0;
	width: 100%;
	font-size: 120%;
	color: #FFF;
	display: block;
	padding: 0.5em;
	margin: 0.5em 0 0.5em 0;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	background: #00ae35;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 50px;
	border-radius: 5px;
	transition: all .3s;
}

/* オンのとき */
input#submitBtn[type="submit"]:hover{
	color: #FFF;
	display: block;
	background: #e76471;
	transition: all .3s;
}


/* オフのとき */
input#submitBtn[type="submit"][disabled]{
	color: #222;
	background: #CCCCCC;
}

td.radios2,
td.radios3{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}