/*============================================================
お問い合わせ・資料請求用
============================================================*/
h1{
	text-align: center;
	margin: 64px auto 0 auto;
	color: var(--color-blue);
}
p.contactLead{
	text-align: center;
	margin: 24px auto 80px auto;
}

h2 {
	margin:0 0 40px 0;
	padding:0;
}

div.columnHalf section#exp{
	padding-top: 0;
  padding-bottom: 0;
}

div.columnHalf section#exp h2 {
	text-align:center;
}

div.expImage{
	margin:0 0 40px 0;
	padding:0;
}
div.expImage img{
	border:1px solid var(--color-lightgray);
	margin: 0 auto;
}

div.expRecommend{
	/*margin:0 0 80px 0;*/
	padding:0;
}

div.expRecommend h3{
	background: var(--color-blue);
	color: var(--color-white);
	padding: 4px;
	width: fit-content;
	margin: 0 auto 20px 0;
	border-radius: 19px;
	font-size: 16px;
	min-width: 180px;
	text-align: center;
}
ul.expTarget{
	/*margin:0 0 40px 0;*/
	position: relative;
	padding-left: 1.2em;
	text-indent: 0;
}
ul.expTarget li:before{
  content: "●";
  margin-right: 0.5em;
  color: var(--color-blue);
	position: absolute;
  left: 0;
}
ol.expPage {
	list-style-type: decimal;
	padding: 0 0 0 20px;
}
ul.expTarget li,
ul.expTarget oli{
	font-size:90%;
}

section#form {
	background:#f3f3f3;
	border-radius:8px;
	margin-bottom:80px;
}
section#form form{
	margin:0 auto 0 auto;
	padding:0;
}

form dl {
  margin: 0;
  padding: 20px;
}

form dt, dd {
  margin: 0;
}

form dt { 
  padding: 6px 0 4px;
  font-weight: 600;
}
form dd { 
  margin-bottom: 12px;
}

/* チェックボックスエリア全体 */
.policy {
  margin: 0 auto 16px auto;
}

/* 横並び＋中央寄せ（折返し可） */
.policy .checks {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: center;
  gap: 12px 20px;            /* 行間 / 列間 */
  flex-wrap: wrap;           /* 画面幅が狭いときは折返し */
  text-align: center;
}

/* 1項目（ラベル） */
.policy .check {
  display: inline-flex;
  align-items: center;       /* 縦中央 */
  gap: 8px;                  /* 角丸ボックスとテキストの間隔 */
  cursor: pointer;
  user-select: none;
}

/* チェックボックスの見た目（任意） */
.policy input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  /* 対応ブラウザなら色指定： */
  accent-color: #0066cc;     /* 好みで変更 */
}

div.policyText{
	margin: 0 20px 20px 20px;
	padding: 10px 10px 0 10px;
	font-size: 80%;
	border: 1px solid var(--color-lightgray);
	border-radius: 4px;
	background: var(--color-white);
	text-align: left;
}

input[type="submit"] {
  display: block;       /* 幅指定＋中央寄せのためにブロック要素化 */
  width: 50%;           /* 幅50% */
  margin: 20px auto;    /* 上下余白20px, 左右autoで中央寄せ */
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: var(--color-link);
  color: var(--color-white);
  cursor: pointer;
  text-align: center;
	transition: background-color .3s ease, color .3s ease;
}

/* hover効果（任意） */
input[type="submit"]:hover {
  background-color: var(--color-link-hover);
}

div.downloadBox,
div.contactBox{
	border: 1px solid var(--color-lightgray);
	background: var(--color-lightgray2);
	padding: 24px;
	border-radius: 8px;
}
div.downloadBox strong,
div.contactBox strong{
	color:red;
}

div.downloadBox a,
div.contactBox a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 240px;
  min-height: 60px;
  padding: 10px 14px;
  line-height: 1.2;
  font-size:clamp(16px, 2vw, 18px);
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s ease-in-out;
  text-decoration: none;
	border:1px solid var(--color-link);
	background: var(--color-link);
	color:#fff;
}
div.downloadBox a:hover,
div.contactBox a:hover{
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
}
div.downloadBox p.dlBtn,
div.contactBox p.topBtn{
	text-align:center;
}
div.downloadBox p.notice,
div.contactBox p.notice{
	text-align:center;
	font-size:80%;
	color:var(--color-gray);
}

/****************
ブレークポイント
****************/
@media (max-width: 359.98px) {}

@media (min-width: 640px) {
	form dl {
		display: grid;
		grid-template-columns: 120px 1fr; /* 左: dt 固定 / 右: dd 可変 */
		column-gap: 16px;
		row-gap: 12px;
	}
	form dt, form dd {
		display: flex;
		align-items: center;       /* ← 縦中央揃えのキモ */
	}
	form dt {
		justify-content: flex-start;
	} /* ラベル右寄せ（好みで） */
	form dd {
		justify-content: flex-start;
	}
	/* 最後のdd(テキストエリア等)の行間調整 */
	form dd:has(textarea) {
		align-items: stretch;
	}
	form dd:has(textarea) textarea {
		height: 100%;
	}
}

@media (min-width: 768px) {}

@media (min-width: 960px) {}

@media (min-width: 1200px) {}