@charset "UTF-8";


/*form_area
-----------------------------------------------------------------------------------------*/
.form_area{
	background:rgba(0,0,0,0.05);
	padding:50px;
	border-radius:10px;
}
@media screen and (max-width: 767px) {
	.form_area{padding:20px 5px;}
}
/*-------------------------form_item*/
.form_item{
	background:#FFFFFF;
	display:flex;
	padding:30px;
	gap:30px;
	margin-bottom:5px;
}
.form_item dt{
	min-width:33%;
	max-width:33%;
	color:#555;
	display:flex;
	gap:5px;
	font-size:1.6rem;
}
.kakunin .form_item dt::after{
	display:none;
}
.form_item dt::after{
	content:"必須";
	display:inline-block;
	margin-top:0;
	margin-left:auto;
	margin-bottom:auto;
	font-weight:normal;
	background:#F44336;
	color:#FFF;
	padding:0.1em 0;
	font-size:80%;
	border-radius:0.25em;
	min-width:3em;
	text-align:center;
}
.form_item.nini dt::after{
	content:"任意";
	background:#607D8B;
}
.form_item dd,
.form_item dd div{
	display:flex;
	flex-wrap:wrap;
	gap:10px 5px;
}
.form_item dd div,
.form_item dd p{
	width:100%;
}
.form_item .subtitle{
	display:block;
	font-size:1.4rem;
	color:#555;
}
/*radio/checkbox*/
.wpcf7-list-item{
	margin:0;
}
span.wpcf7-list-item{
	margin:0 !important;
}
.wpcf7-radio,
.wpcf7-checkbox{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
}
/*要素をたて並び（form_item + item_y）*/
.form_item.item_y dd,
.form_item.item_y .wpcf7-radio,
.form_item.item_y .wpcf7-checkbox{
	flex-direction:column;
}
/*複数アイテムをまとめる(pタグでくくる + item_unit)*/
.form_item p.item_unit{
	position:relative;
}
.form_item p.item_unit span{
	position:static;
}
.form_item p.item_unit .wpcf7-not-valid{
	margin-bottom:1.5em;
}
.form_item p.item_unit .wpcf7-not-valid-tip{
	position:absolute;
	left:0;
	bottom:-0.1em;
}
@media screen and (max-width: 767px) {
	.form_item{padding:15px;gap:5px;flex-direction:column}
	.form_item dt{min-width:100%;max-width:100%;}
	.form_item dd > span,
	.form_item dd > label,
	.form_item dd > label > span,
	.form_item div > label{display:block;width:100%}
	.wpcf7-radio,
	.wpcf7-checkbox{flex-direction:column;}
}
/*-------------------------------------------------------------フォーム材料*/
.form_item input[type="text"],
.form_item input[type="tel"],
.form_item input[type="email"],
.form_item input[type="url"],
.form_item input[type="number"],
.form_item input[type="password"],
.form_item textarea,
.form_item select,
.form_item input[type="checkbox"] + span,
.form_item input[type="radio"] + span{
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance: none;
	border-radius: 4px !important;
	min-height:2.5em;
	border:1px solid #CCCCCC;
	padding:0.5em;
	background-color:#FAFAFA;
	width:100%;
	max-width:100%;
	position:relative;
	font-size:inherit;
}
/*select*/
.form_item select{
	height:2.6em;
	padding-right:1.5em;
	background-image:url(images/form_select.svg);
	background-position:top 55% right 0.7em;
	background-repeat:no-repeat;
	background-size:0.6em;
}
/*textarea*/
.form_item textarea{
	line-height:1.6;
}
/*checkbox/radio*/
.form_item input[type="checkbox"],
.form_item input[type="radio"]{
    position:absolute;
    opacity:0;
}
.form_item input[type="checkbox"] + span,
.form_item input[type="radio"] + span{
	padding:0.5em 1em;
}
.form_item input[type="checkbox"] + span,
.form_item input[type="radio"] + span{
	position:relative;
	padding-left:2.25em;
	cursor:pointer;
}
.form_item input[type="checkbox"] + span:before,
.form_item input[type="radio"] + span:before{
	content:"";
	display:block;
	position:absolute;
	left:0.75em;
	top:0.75em;
	width:1em;
	height:1em;
	outline:solid 2px #ccc;
	background: #f4f4f4;
	transition: all 250ms ease;
}
.form_item input[type=checkbox] + span:before{
	border-radius:0.15em;
}
.form_item input[type=radio] + span:before{
	border-radius:100%;
}
.form_item input[type="checkbox"] + span:after{
	content:"";
	position:absolute;
	top:1.2em;
	left:1em;
	transform:rotate(-45deg) scaleX(0);
	transform-origin:left;
	width:0.6em;
	height:0.3em;
	border-left:0.15em solid #fff;
	border-bottom:0.15em solid #fff;
	transition: all 250ms ease;
}
.form_item input[type=radio]:disabled + span:before{
	box-shadow: inset 0 0 0 0.2em #f4f4f4;
	outline-color: #b4b4b4;
	background: #b4b4b4;
}

/*------------------------------------------------------------- date（カレンダー入力）*/
.form_item input[type="date"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 4px !important;
	min-height: 2.5em;
	border: 1px solid #CCCCCC;
	padding: 0.5em;
	background-color: #FAFAFA;
	width: 100%;
	max-width: 100%;
	position: relative;
	font-size: inherit;
	line-height: 1.4;
}

/* カレンダーアイコンの非表示（ブラウザデフォルト）*/
.form_item input[type="date"]::-webkit-inner-spin-button,
.form_item input[type="date"]::-webkit-clear-button {
	display: none;
	-webkit-appearance: none;
}

/* カレンダーの選択ボタン（ブラウザによって異なる） */
.form_item input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	position: absolute;
	right: 0.7em;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	opacity: 0.7;
}

/* Firefox用カレンダーアイコン調整 */
.form_item input[type="date"]::-moz-calendar-picker-indicator {
	cursor: pointer;
}

/*-------------------------エラー*/
.form_item input[type="tel"]:invalid,
.form_item input[type="email"]:invalid,
.form_item input[type="url"]:invalid,
.form_item input[type="number"]:invalid,
.form_item input[type="password"]:invalid,
.form_item input[type="text"].wpcf7-not-valid,
.form_item input[type="tel"].wpcf7-not-valid,
.form_item input[type="email"].wpcf7-not-valid,
.form_item input[type="url"].wpcf7-not-valid,
.form_item input[type="number"].wpcf7-not-valid,
.form_item textarea.wpcf7-not-valid,
.form_item select.wpcf7-not-valid,
.form_item .wpcf7-not-valid input[type="checkbox"] + span,
.form_item .wpcf7-not-valid input[type="radio"] + span{
	border-color:#F44336;
	background-color:#FDE8E6;
}
/*-------------------------hover,focus*/
.form_item input[type="text"]:hover,
.form_item input[type="tel"]:hover,
.form_item input[type="email"]:hover,
.form_item input[type="url"]:hover,
.form_item input[type="number"]:hover,
.form_item textarea:hover,
.form_item select:hover,
.form_item input[type="checkbox"] + span:hover,
.form_item input[type="radio"] + span:hover,
.form_item input[type="text"]:focus,
.form_item input[type="tel"]:focus,
.form_item input[type="email"]:focus,
.form_item input[type="url"]:focus,
.form_item input[type="number"]:focus,
.form_item textarea:focus,
.form_item select:focus,
.form_item input[type="radio"]:focus + span,
.form_item input[type="checkbox"]:focus + span{
	outline:1px solid #2196F3;
	border-color:#2196F3;
	background-color:#FFFFFF;
}
.form_item ::placeholder{
	color:#777;
}
/*-------------------------入力したら*/
.form_item input:not(:placeholder-shown),
.form_item textarea:not(:placeholder-shown),
.form_item select.selected,
.form_item input:checked + span,
.form_item input:checked + span{
	background-color:#FFF;
	border-color:#2196F3;
}
.form_item input[type="checkbox"]:checked + span:before,
.form_item input[type=radio]:checked + span:before{
	background:#074DBF;
	outline-color:#074DBF;
}
.form_item input[type="checkbox"]:checked + span:after{
	transform:rotate(-45deg) scaleX(1);
}
.form_item input[type=radio]:checked + span:before{
	box-shadow: inset 0 0 0 0.2em #f4f4f4;
}
/*-------------------------同意チェック*/
.form_item .doui span{
	color:#F44336;
	font-weight:bold;
}
/*-------------------------ボタン*/
.navbtn{
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:20px;
}
.navbtn input{
	border:none;
	line-height:1.75;
	padding:0.5em;
	width:40%;
	display:inline-block;
	color:#FFFFFF;
	background:#006deb;
	border-radius:10em;	
	box-shadow: 0 0.2em 0.1em rgba(0,0,0,0.15);
	position:relative;
	transition: all 0.2s;
}
.form_area input[type="button"]{
	background:#999999;
}
.navbtn input:hover,
.navbtn input:focus{
	filter:brightness(115%);
	opacity:1;
	box-shadow:none;
	transform: translateY(0.1em);
}
.wpcf7-spinner{
	display:none;
}


/*送信完了
-----------------------------------------------------------------------------------------*/
#contents div.wpcf7-mail-sent-ok{
	border:none;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
}
.sendmail{
	padding:50px 0;
	width:640px;
	margin:30px auto 50px auto;
	border:10px solid #E6E6E6;
	text-align:center;
}
.sendmail h2{
	font-size:30px;
	color:#CC0000;
}
.sendmail p{
	margin:20px 0 0 0;
	line-height:1.8;
}
@media screen and (max-width: 767px) {
.sendmail{padding:30px 15px;width:auto;margin:0;border:none;}
.sendmail h2{font-size:20px;line-height:30px;font-weight:bold;}
.sendmail p{margin:15px 0 0 0;}
}


/* dateフォーカス調整（フォーカス時だけ青／hoverはポインタ端末のみ）
-----------------------------------------------------------------------------------------*/
.form_item input[type="date"]:focus,
.form_item input[type="date"]:focus-visible {
  outline: 1px solid #2196F3 !important;
  border-color: #2196F3 !important;
  background-color: #FFFFFF;
}

/* ポインタ（マウス）環境のみ hover を青に。タッチ端末の“hover貼り付き”を回避 */
@media (hover: hover) and (pointer: fine) {
  .form_item input[type="date"]:hover,
  .form_item label:hover input[type="date"] { /* ← 追加：ラベル上のhoverでも反応 */
    outline: 1px solid #2196F3;
    border-color: #2196F3;
    background-color: #FFFFFF;
  }
}

/* date入力済み（:valid）は通常枠に戻す（＝常時フォーカスっぽく見せない）
-----------------------------------------------------------------------------------------*/
.form_item input[type="date"]:valid {
  background-color: #FFF;
  border-color: #CCCCCC;
  outline: none;
}

/* スマホ表示：date/select 横幅いっぱい + iOSズーム対策
-----------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .form_item input[type="date"],
  .form_item select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px; /* iOS自動ズーム防止 */
  }
  .form_item .wpcf7-form-control-wrap,
  .form_item .wpcf7-form-control {
    display: block;
    width: 100%;
    max-width: 100%;
  }
}

/* selectフォーカス統一
-----------------------------------------------------------------------------------------*/
.form_item select:focus {
  outline: 1px solid #2196F3;
  border-color: #2196F3;
  background-color: #FFFFFF;
}

/* カレンダーアイコン位置調整
-----------------------------------------------------------------------------------------*/
.form_item input[type="date"]::-webkit-calendar-picker-indicator {
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  opacity: 0.7;
}

/* dateエラー時（最優先で赤）
-----------------------------------------------------------------------------------------*/
.form_item input[type="date"]:invalid,
.form_item .wpcf7-not-valid input[type="date"] {
  border-color: #F44336 !important;
  background-color: #FDE8E6 !important;
  outline: none !important;
}
.form_item input[type="date"] {
  text-align: left;
  text-align-last: left; /* Android対策 */
}

/* チェックボックス（第2・第3希望）スマホは横幅いっぱい
-----------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* ラッパを100%幅に */
  .form_item dd > span.wpcf7-form-control-wrap { 
    display:block; width:100%; 
  }
  /* グループ全体と各項目を縦積み＋100%幅に */
  .form_item .wpcf7-checkbox { 
    display:flex; flex-direction:column; gap:8px; width:100%; 
  }
  .form_item .wpcf7-checkbox .wpcf7-list-item { 
    display:block; width:100%; margin:0; 
  }
  /* ラベル全体をクリック領域として100%幅に */
  .form_item .wpcf7-checkbox .wpcf7-list-item label { 
    display:block; width:100%; 
  }
  /* テキスト部分（inputの隣のspan）も100%幅に */
  .form_item .wpcf7-checkbox .wpcf7-list-item label > span { 
    display:block; width:100%; 
  }
}


/* タブレット表示調整
-----------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1199px) {

  /* dd は既に flex ですが、伸縮前提にして縦積み安定化 */
  .form_item dd {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: stretch;
  }

  /* ← ここが肝：flex 子を 1列100% にし、min-width:0 で縮退バグ回避 */
  .form_item dd > label,
  .form_item dd > span.wpcf7-form-control-wrap {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: initial !important; /* 親の center 継承を打ち消し */
  }

  /* CF7 が label 内に wrap を作るケースの保険 */
  .form_item dd > label > span.wpcf7-form-control-wrap {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* 入力本体：幅いっぱい＋左寄せ（WebKitの内部要素も左寄せ） */
  .form_item input[type="date"],
  .form_item select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: left !important;
    text-align-last: left !important;
  }
  .form_item input[type="date"]::-webkit-datetime-edit,
  .form_item input[type="date"]::-webkit-date-and-time-value {
    text-align: left !important;
  }
}
	
/* モバイル・タブレットで date アイコンを強制表示 */
@media screen and (max-width: 1199px) {
	.form_item input[type="date"] {
		background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 2v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z"/></svg>');
		background-repeat: no-repeat;
		background-position: right 0.7em center;
		background-size: 1.1em auto;
		padding-right: 2em; /* アイコン分の余白 */
	}

	/* iOS Safariで元アイコンが残る可能性があるので非表示 */
	.form_item input[type="date"]::-webkit-calendar-picker-indicator {
		opacity: 0;
		display: none;
	}
}

/* モバイル・タブレットで checkbox をPCと同じにする*/
@media screen and (max-width: 1199px) {

	/* ラベル構造をブロック化して擬似要素の描画を安定させる */
	.form_item .wpcf7-checkbox .wpcf7-list-item label {
		display: block;
		width: 100%;
	}
	.form_item .wpcf7-checkbox .wpcf7-list-item label > span {
		display: inline-block; /* ← beforeのボックスを安定表示 */
	}

	/* ネイティブUIは完全無効化（丸いOS標準を殺す） */
	.form_item input[type="checkbox"] {
		-webkit-appearance: none !important;
		appearance: none !important;
	}

	/* ここが肝：丸形上書き。checkboxの枠は必ず角丸0にする */
	.form_item .wpcf7-checkbox .wpcf7-list-item 
	input[type="checkbox"] + span::before {
		border-radius: 0 !important;            /* ← 四角に固定 */
		outline: 2px solid #ccc !important;
		background: #f4f4f4 !important;
		width: 1em; height: 1em;                /* 念のため明示 */
	}

	/* チェック時は全面を青で塗る（PCと同じ） */
	.form_item .wpcf7-checkbox .wpcf7-list-item 
	input[type="checkbox"]:checked + span::before {
		background: #074DBF !important;
		outline-color: #074DBF !important;
	}

	/*チェックマークを表示（必要なければ display:none; に）*/
	.form_item .wpcf7-checkbox .wpcf7-list-item 
	input[type="checkbox"]:checked + span::after {
		transform: rotate(-45deg) scaleX(1) !important;
		display: block !important;
	}

	/* 念のため：radio の丸指定が勝たないように“より強い”否定 */
	.form_item .wpcf7-checkbox .wpcf7-list-item 
	input[type="radio"] + span::before {
		border-radius: 100% !important; /* radio は丸のまま */
	}
}

/* ===== CF7 ラジオ／チェック：flex + gap を強制（特異性で勝つ）
-----------------------------------------------------------------------------------------*/
.wpcf7 .wpcf7-form-control.wpcf7-radio,
.wpcf7 .wpcf7-form-control.wpcf7-checkbox {
	display: flex !important;      /* CF7 既定を打ち消す */
	flex-wrap: wrap;
	column-gap: 5px;               /* 横方向 */
	row-gap: 5px;                  /* 縦方向 */
	gap: 5px;                      /* 併記しておく */
}

/* 子要素（wpcf7-list-item）の余白はゼロのままでOK */
.wpcf7 .wpcf7-form-control .wpcf7-list-item {
	margin: 0 !important;
}

/* モバイルの縦積み指定がある場合の補強（既存の column 指定は尊重） */
@media screen and (max-width: 767px) {
	.wpcf7 .wpcf7-form-control.wpcf7-radio,
	.wpcf7 .wpcf7-form-control.wpcf7-checkbox {
		flex-direction: column;
		row-gap: 8px;                /* 縦の余白だけ少し広めに */
	}
}

/* ==== CF7「検査項目」だけはネイティブ挙動に戻す（名前= kensa 用） ==== */
.wpcf7-form-control-wrap.kensa .wpcf7-list-item label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
}

/* 実体の input を“見える/触れる”状態に（まずは診断のため） */
.wpcf7-form-control-wrap.kensa input[type="checkbox"]{
  position: static !important;
  opacity: 1 !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width: auto !important;
  height: auto !important;
  margin: 0 .25em 0 0 !important;
}

/* 擬似ボックスは無効化（見た目二重防止） */
.wpcf7-form-control-wrap.kensa label > span.wpcf7-list-item-label::before,
.wpcf7-form-control-wrap.kensa label > span.wpcf7-list-item-label::after{
  content: none !important;
}

/* “未入力エラー時は赤”の見た目もネイティブに */
.wpcf7-form-control-wrap.kensa .wpcf7-not-valid input[type="checkbox"]{
  outline: 2px solid #F44336 !important;
}

/* クリックが奪われないよう保険 */
.wpcf7-form-control-wrap.kensa .wpcf7-list-item-label{
  pointer-events: auto !important;
}