@charset "UTF-8";
/* ============================================
   AWAIRO お問い合わせフォーム（reserve：入力・確認・完了の3画面共用）
   家風: coding-rules/style_guide.md 準拠
   ・色は直値／クラスは最小限。CMS（Outlet）が吐く構造をそのまま装う
     入力：section.form > div > form > table（th/td）＋ div.form_button > input
     確認：section.form > div > table ＋ div.clearfix.form_button > a（戻る）＋ form > input（送信）
     完了：section.form_intro.complete に本文、section.form は空
   ・自前の本文は section#form_intro（CMSページの本文枠）に置く：div.step・h2.mds・p.lead・div.photo・p
   ・PCは幅を絶対値、SP（1079px以下）は相対値＋max-width 600px
   ・立体影は filter:drop-shadow。hover はトップの共通ボタンと同じ「影を消して沈む」
   ・SPはファイル末尾に max-width:1079px で一括
============================================ */

/* 共通 *******************/
/*画像は置いた箱の幅いっぱい（各箱側で幅を決める）*/
img {
	width: 100%;
	height: auto;
}
/*必須・任意バッジ（CMSが吐く span.require／span.require.non）*/
span.require {
	height: 19px;
	padding: 0 5px;
	display: inline-block;
	background: #dc000c;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: 19px;
	letter-spacing: 0;
	vertical-align: middle;
}
span.require.non {
	background: #989898;
}




/* form_intro（STEP進行図・見出し帯・導入文） *******************/
section.form_intro {
	width: 980px;
	margin: 30px auto 0;
}
/*見出し帯：上下2本線。下辺中央に▽の切り欠き*/
section.form_intro > h2.mds {
	margin-top: 60px;
	padding: 14px 0 15px;
	border-top: 2px solid #5094d6;
	border-bottom: 2px solid #5094d6;
	font-size: 20px;
	font-weight: 700;
	color: #5094d6;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
	position: relative;
}
/*▽：青の三角の上に白の三角を重ねて、下線が切れて見えるようにする*/
section.form_intro > h2.mds::before,
section.form_intro > h2.mds::after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 11px solid #5094d6;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
section.form_intro > h2.mds::before {
	bottom: -12px;
}
section.form_intro > h2.mds::after {
	bottom: -9px;
	border-top-color: #fff;
}
/*確認：導入文*/
section.form_intro > p.lead {
	margin-top: 50px;
	font-size: 14px;
	color: #333333;
	line-height: 1.6;
	letter-spacing: 0.06em;
}




/* form（CMSが吐く表・ボタン。入力・確認 共用） *******************/
section.form {
	padding-bottom: 80px;
}
/*CMSのフォーム枠（表・同意枠・ボタンを包む div）に幅を持たせる*/
section.form > div {
	width: 980px;
	margin: 0 auto;
}
/*入力：表は form に包まれる／確認：表は div 直下*/
section.form form {
	margin-top: 50px;
}
section.form > div > table {
	margin-top: 40px;
}
/*表：薄灰の枠＋角丸。左列（項目名）は淡い青灰*/
section.form table {
	width: 100%;
	border: 1px solid #cccccc;
	border-radius: 5px;
	border-collapse: separate;
	border-spacing: 0;
}
section.form table th {
	width: 282px;
	padding: 15px 20px;
	background: #e9ebf3;
	font-size: 18px;
	font-weight: 700;
	color: #333333;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-align: left;
	vertical-align: middle;
	position: relative;
}
section.form table td {
	padding: 15px 30px;
	background: #fff;
	font-size: 18px;
	font-weight: 400;
	color: #333333;
	line-height: 1.4;
	letter-spacing: 0.03em;
	vertical-align: middle;
}
/*入力の表：項目名は上揃え（入力欄の高さに合わせて行が伸びる）*/
section.form form table th {
	padding: 25px 20px;
	vertical-align: top;
}
section.form form table td {
	vertical-align: top;
}
section.form table tr:first-of-type th {
	border-top-left-radius: 4px;
}
section.form table tr:last-of-type th {
	border-bottom-left-radius: 4px;
}
/*最終行は下を広めに（入力25・確認30）*/
section.form form table tr:last-of-type td {
	padding-bottom: 25px;
}
section.form > div > table tr:last-of-type th,
section.form > div > table tr:last-of-type td {
	padding-bottom: 30px;
}
/*行の区切り線*/
section.form table tr + tr th,
section.form table tr + tr td {
	border-top: 1px solid #bebebe;
}
/*項目名の右端に必須バッジ*/
section.form table th span.require {
	position: absolute;
	top: 29px;
	right: 20px;
}
/*入力欄*/
section.form input[type="text"],
section.form textarea {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	display: block;
	background: #fff;
	border: 1px solid #707070;
	border-radius: 4px;
	font-size: 16px;
	color: #333333;
}
section.form textarea {
	height: 200px;
	padding: 10px 12px;
	line-height: 1.6;
	resize: vertical;
}
/*入力例・注記（CMSは空でも div を吐くので、空のものは畳む）*/
section.form div.owlet-input-sample {
	margin-top: 10px;
	font-size: 14px;
	color: #707070;
	line-height: 1.4;
	letter-spacing: 0.06em;
}
section.form div.owlet-input-sample:empty {
	display: none;
}
/*エラー文（CMSが吐く .alert）*/
section.form div.alert,
section.form p.alert {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 500;
	color: #dc000c;
}
/*個人情報取扱い（CMSの owlet-rules 三点セット：題・本文（スクロール枠）・同意。フォーム設定で有効にしたときに出る）*/
section.form div.owlet-rules {
	margin-top: 80px;
}
section.form div.owlet-rules-title {
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	line-height: 1.6;
}
section.form div.owlet-rules-body {
	height: 200px;
	margin-top: 10px;
	padding: 15px 20px;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	font-size: 14px;
	color: #333333;
	line-height: 1.6;
	overflow-y: scroll;
}
section.form div.owlet-rules-agree {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	color: #333333;
}
section.form div.owlet-rules-agree input {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	flex-shrink: 0;
	appearance: auto;
	-webkit-appearance: auto;
	cursor: pointer;
}
section.form div.owlet-rules-agree span.require {
	margin-left: 6px;
}
/*ボタン枠（入力：赤ボタンのみ／確認：戻るリンク＋送信フォーム）*/
section.form div.form_button {
	width: 440px;
	margin: 60px auto 0;
}
section.form div.owlet-rules + div.form_button {
	margin-top: 50px;
}
/*赤ボタン（確認画面に進む／この内容で送信する）*/
section.form div.form_button input[type="submit"] {
	width: 100%;
	height: 80px;
	display: block;
	background: #ff211f;
	border-radius: 8px;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.05em;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;/*iPhone対策*/
}
/*赤ボタンの立体影と右端の白い山括弧は、ボタンを包む箱に付ける（入力：div.form_button／確認：form）*/
section.form div.form_button:not(.clearfix),
section.form div.form_button > form {
	position: relative;
	filter: drop-shadow(0px 6px 0px rgb(31 37 55 / .2));
}
section.form div.form_button:not(.clearfix)::after,
section.form div.form_button > form::after {
	content: '';
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 46px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
}
/*hover：影を消して沈む（トップの共通ボタンと同じ）*/
section.form div.form_button:not(.clearfix):hover,
section.form div.form_button > form:hover {
	filter: drop-shadow(0px 0px 0px rgb(255 255 255 / 1)) brightness(1.1);
	transform: translate3d(0, 6px, 0);
	-webkit-transform: translate3d(0, 6px, 0);
	-ms-transform: translate3d(0, 6px, 0);
}
/*確認：前に戻って修正（白・立体。左端に黒の山括弧）*/
section.form div.form_button > a {
	width: 360px;
	height: 56px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #222222;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 700;
	color: #222222;
	letter-spacing: 0.05em;
	position: relative;
	filter: drop-shadow(0px 4px 0px rgb(34 34 34 / .2));
}
section.form div.form_button > a::before {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 50%;
	left: 22px;
	border-top: 3px solid #222222;
	border-left: 3px solid #222222;
	transform: translateY(-50%) rotate(-45deg);
	-webkit-transform: translateY(-50%) rotate(-45deg);
	-ms-transform: translateY(-50%) rotate(-45deg);
}
section.form div.form_button > a:hover {
	filter: drop-shadow(0px 0px 0px rgb(255 255 255 / 1));
	transform: translate3d(0, 4px, 0);
	-webkit-transform: translate3d(0, 4px, 0);
	-ms-transform: translate3d(0, 4px, 0);
}
/*確認：戻る→送信の間*/
section.form div.form_button > a + form {
	margin-top: 60px;
}




/* complete（完了：本文は form_intro 側、CMSの form 枠は空） *******************/
section.form_intro.complete {
	padding-bottom: 80px;
}
section.form_intro.complete + section.form {
	padding-bottom: 0;
}
/*お辞儀のイラスト（@2x素材を半分で表示）*/
section.form_intro.complete > div.photo {
	width: 168px;
	margin: 50px auto 0;
}
section.form_intro.complete > p {
	margin-top: 40px;
	font-size: 18px;
	color: #333333;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-align: center;
}




/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width: 1079px) {
*{}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* 共通 *******************/
/*SP追従バー（CMS共通部）はフォーム3画面では出さない（殿指示 2026-09-09）。common.css の下逃げ74pxも戻す*/
div.tsuiju {
	display: none;
}
body {
	padding-bottom: 0;
}




/* form_intro（STEP進行図・見出し帯・導入文） *******************/
section.form_intro {
	width: 95%;
	max-width: 600px;
	margin-top: 20px;
}
section.form_intro > h2.mds {
	margin-top: 20px;
	padding: 13px 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.06em;
}
section.form_intro > h2.mds::after {
	bottom: -8px;
}
section.form_intro > p.lead {
	margin-top: 20px;
}




/* form（CMSが吐く表・ボタン） *******************/
section.form > div {
	width: 95%;
	max-width: 600px;
}
section.form form {
	margin-top: 20px;
}
/*確認の表はXDでは入力の表より一回り狭い*/
section.form > div > table {
	width: 94%;
	margin: 20px auto 0;
}
/*表：項目名を帯にして縦積み（CMS既定の表組みをブロック化）*/
section.form table th,
section.form table td {
	width: 100% !important;
	display: block;
}
section.form table th {
	padding: 9px 10px;
	font-size: 16px;
	line-height: 1.6;
}
section.form table td {
	padding: 10px 20px 8px;
	font-size: 16px;
	line-height: 1.6;
}
section.form form table th {
	padding: 9px 15px;
}
section.form form table td {
	padding: 20px 15px;
}
section.form table tr:first-of-type th {
	border-top-right-radius: 4px;
}
section.form table tr:last-of-type th {
	border-bottom-left-radius: 0;
}
section.form form table tr:last-of-type td {
	padding-bottom: 50px;
}
section.form > div > table tr:last-of-type th {
	padding-bottom: 9px;
}
section.form > div > table tr:last-of-type td {
	padding-bottom: 20px;
}
/*縦積みでは行の区切り線は無し（帯の色で区切る）*/
section.form table tr + tr th,
section.form table tr + tr td {
	border-top: 0;
}
section.form table th span.require {
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
/*入力欄*/
section.form input[type="text"],
section.form textarea {
	height: 48px;
}
section.form textarea {
	height: 180px;
}
section.form div.owlet-input-sample {
	margin-top: 15px;
}
/*個人情報取扱い*/
section.form div.owlet-rules {
	margin-top: 30px;
}
section.form div.owlet-rules-body {
	padding: 12px 15px;
}
section.form div.owlet-rules-agree {
	font-size: min(4.2vw, 16px);
}
/*ボタン枠*/
section.form div.form_button {
	width: 90%;
	max-width: 440px;
	margin-top: 40px;
}
section.form div.form_button.clearfix {
	margin-top: 60px;
}
section.form div.form_button input[type="submit"] {
	height: 72px;
	font-size: 20px;
}
section.form div.form_button:not(.clearfix),
section.form div.form_button > form {
	filter: drop-shadow(0px 4px 0px rgb(0 0 0 / .2));
}
section.form div.form_button:not(.clearfix)::after,
section.form div.form_button > form::after {
	right: 26px;
}
section.form div.form_button:not(.clearfix):hover,
section.form div.form_button > form:hover {
	transform: translate3d(0, 4px, 0);
	-webkit-transform: translate3d(0, 4px, 0);
	-ms-transform: translate3d(0, 4px, 0);
}
/*確認：前に戻って修正*/
section.form div.form_button > a {
	width: 70%;
	max-width: 360px;
	height: 44px;
	font-size: 16px;
}
section.form div.form_button > a::before {
	left: 14px;
}
section.form div.form_button > a + form {
	margin-top: 34px;
}




/* complete（完了） *******************/
section.form_intro.complete > div.photo {
	margin-top: 20px;
}
section.form_intro.complete > p {
	margin-top: 20px;
	font-size: 16px;
	text-align: left;
}




/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/