@charset "utf-8";

/* ---------------------------------
	フォーム
------------------------------------*/
/* フォーム手順の確認表示部分 */
#form_flow {
	text-align:center;
	margin:50px 20px 30px 20px;
}
#form_flow span {
	margin:0 20px 0 20px;
	padding:5px 10px;
  -webkit-border-radius:5px;
     -moz-border-radius:5px;
      -ms-border-radius:5px;
          border-radius:5px;
}
#form_flow .form_flow_on {
	background:#22BDFF;
	color:#FFF;
}
#form_flow .form_flow_off {
	background:#CCC;
	color:#666;
}

p.caution {
	box-sizing: border-box;
	margin:10px auto 10px auto;
	padding:5px 10px;
	width:98%;
	color:#DB5700;
	background:#FCDEDD;
}
p.description {
	margin:10px auto 10px auto;
	width:98%;
	color:#9E4C00;
}
#complete {
	margin:10px auto 10px auto;
	width:90%;
	color:#000;
}
#complete p {
	margin:15px 0 0 0;
}
#complete p.mt30 {
	margin:30px 0 0 0;
}

/* フォーム入力 dl dt dd */
dl.form {
	display:flex;
	flex-wrap: wrap;
	margin:40px auto 10px auto;
	width:98%;
}
dl.form dt {
	box-sizing: border-box;
	margin:5px 0 0 0;
	padding:10px 10px 10px 10px;
	width:25%;
	background:#D8D8D8;
	font-size:16px;
	font-weight:normal;
}
span.hissu {
	display:inline-block;
	padding:0 5px;
	background:#ffa4a4;
	font-weight:normal;
	font-size:12px;
	color:#FFF;
  -webkit-border-radius:5px;
     -moz-border-radius:5px;
      -ms-border-radius:5px;
          border-radius:5px;
}
dl.form dt span.hissu {
	float:right;		/* 入力見出しDT内　右寄せ */
}
dl.form dd {
	box-sizing: border-box;
	margin:5px 0 0 10px;
	padding:10px 10px;
	width:calc(75% - 10px);
	background:#FFF;
}
/* フォーム */
dl.form dd input,
dl.form dd select {
	margin:0 0 3px 5px;
	padding:3px;
	height:1.5em;
	font-size:16px;
	border:1px solid #ccc;
}

/* チェックボックス入力フォーム
		<div id="box_name" class="checkbox">
			<input type="hidden" id="post_name" name="post_name" value="0"><label for="post_name" id="label_post_name">選択名称</label>
		</div>
 */
p.checkbox,
div.checkbox {
	position: relative;
	display: block;
	margin:30px auto 0px auto;
	padding:10px 25px 10px 55px;
	width: fit-content;
	background: #FFF;
	border: 1px solid #ccc;
	cursor:pointer;
	border-radius: 5px;
	transition: .5s;
}
p.checkbox input,
p.checkbox label,
div.checkbox input,
div.checkbox label {
	cursor:pointer;
}
p.checkbox label:after,
p.checkbox label:before,
div.checkbox label:after,
div.checkbox label:before{
	position: absolute;
	content: ""; 
	display: block;
	top: 50%;
}
p.checkbox label:after,
div.checkbox label:after {
	left: 16px;
	margin-top: -13px;
	width: 22px;
	height: 22px;
	border: 2px solid #d1d1d1;
	background: #FFF;
}
p.checkbox label:before,
div.checkbox label:before {
	left: 25px;
	margin-top: -10px;
	width: 6px;
	height: 12px;
	border-right: 3px solid #0055c1;
	border-bottom: 3px solid #0055c1;
	transform: rotate(45deg);
	z-index:1;
	opacity: 0;
}
p.checkbox:hover label:after,
div.checkbox:hover label:after {
	border-color: #0055c1;
}
p.checkbox.checked label:after,
div.checkbox.checked label:after {
	border: 2px solid #0055c1;
}
p.checkbox.checked label:before,
div.checkbox.checked label:before {
	opacity: 1;
}
p.checkbox:hover,
p.checkbox.checked,
div.checkbox:hover,
div.checkbox.checked{
    background: #ddedfd;
}

/* 各フォームの調整 */
dl.form dd input[type="radio"],
dl.form dd input[type="checkbox"]{			/* 縦位置のズレ修正 */
	position:relative;
	top:-2px;
	vertical-align:middle;
	cursor:pointer;
}

dl.form dd input[type="text"]{
	width:20em;
	max-width: 100%;
}
dl.form dd input.first_name,
dl.form dd input#first_name,
dl.form dd input.last_name,
dl.form dd input#last_name,
dl.form dd input.first_kname,
dl.form dd input#first_kname,
dl.form dd input.last_kname,
dl.form dd input#last_kname {
	width:10em;
}
dl.form dd input.company_name,
dl.form dd input#company_name {
	width:20em;
}
dl.form dd input.ninzu,
dl.form dd input#ninzu {
	width:5em;
	text-align:center;
}
dl.form dd input.zip,
dl.form dd input#post {
	width:8em;
}
dl.form dd input.addr,
dl.form dd input#addr,
dl.form dd input.addr1,
dl.form dd input#addr1 {
	width:25em;
}
dl.form dd input.room,
dl.form dd input#room,
dl.form dd input.addr2,
dl.form dd input#addr2 {
	width:30em;
}
dl.form dd input#rsv_y {
	width:4em;
	text-align:center;
}
dl.form dd input#rsv_m,
dl.form dd input#rsv_d {
	width:2em;
	text-align:center;
}

dl.form dd input.email,
dl.form dd input.email1,
dl.form dd input.email2,
dl.form dd input#email,
dl.form dd input#email1,
dl.form dd input#email2 {
	width:30em;
}
dl.form dd input.tel,
dl.form dd input#tel {
	width:13em;
}
dl.form dd textarea {
	padding:3px;
	width:98%;
	height:8em;
	font-family: 'Noto Sans JP';
	font-weight: 300;
	font-size:16px;
}

/* submitボックス */
#submit_box {
	box-sizing: border-box;
	display: flex;
	width:98%;
	margin:0px auto;
	padding:15px 15px;
	text-align:center;
	background:#FFF;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
/* 同意 */
span.agreebox {
	margin:0 0 0 10px;
	padding:3px 0;
}
#submit_box .newtab:after {
	position:relative;
	display:inline-block;
	margin:0 10px 0 5px;
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;											/* Awesome5では太さ指定しないと文字化け */
	font-size:15px;
	color:#999;
}
#submit_box .privacy:hover {
	opacity:0.7;
}

/* formタグをインライン要素にする */
#submit_box form {
	display:inline;
}
/* submitボタン */
.submit {
	display:inline-block;
	width:max-content;
/*	margin:15px auto;*/
	padding:10px 40px;
	border:1px solid #CCC;
	border-radius:5px;
	text-align:center;
	font-size:16px;
	box-sizing: border-box;
	cursor:pointer;
}
.submit:hover {
	opacity:0.7;
}
.submit_chk {
/*	margin:20px auto 10px auto;*/
}
.submit_before {
/*	background:#D8D8D8;*/
}
.submit_send {
}

form#before,
form#send {
	margin:0 10px 0 10px;
}
/* →アイコン */
.submit_chk:after {
	position:relative;
	display:inline-block;
	margin:0 0 0 20px;
	content: "\f0a9";
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
}
/* ←アイコン */
.submit_before:before {
	position:relative;
	display:inline-block;
	margin:0 20px 0 0;
	content: "\f0a8";
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
}
/* メールアイコン */
.submit_send:after {
	position:relative;
	display:inline-block;
	margin:0 0 0 20px;
	content: "\f0e0";
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
}



/* **********************************
	スマホ用スタイル
********************************** */
@media screen and (max-width:700px){

.sp_hidden {
	display:none;
}
.sp_br_none br{
	display:none;
}

/* ---------------------------------
	フォーム
------------------------------------*/
/* フォーム手順の確認表示部分 */
#form_flow {
	margin:30px 0 20px 5px;
	font-size:15px;
}
#form_flow span {
	margin:0 5px 0 5px;
	padding:5px 3px;
	font-size:15px;
}
/* フォーム入力エラーメッセージ用 */
p.ex {
	margin:0px 5px 0 5px;
	color:#309897;
}
p.description {
	width:auto;
	font-size:15px;
	padding: 0px 15px;
}
/* フォーム入力 dl dt dd */
dl.form {
	display:flex;
	flex-wrap: wrap;
	margin:20px auto 10px auto;
	width:94%;
}
dl.form dt {
	padding:10px 10px 10px 10px;
	width:100%;
	font-size:18px;
}
dl.form dt span.hissu {
	font-size:14px;
}
dl.form dd {
	margin:5px 0 0 0;
	padding:2px 0px;
	width:100%;
	background:#FFF;
	font-size:16px;
}
/* フォーム */
dl.form dd input,
dl.form dd select {
	margin:0 0 5px 5px;
	background:#FFF;
}
/* 各フォームの調整 */
dl.form dd input[type="radio"],
dl.form dd input[type="checkbox"]{			/* 縦位置のズレ修正 */
	top:2px;
}
dl.form dd input[type="text"],
dl.form dd input#addr1,
dl.form dd input#addr2,
dl.form dd input#email1,
dl.form dd input#email2 {
	width:calc(100% - 20px);
}
dl.form dd textarea {
	border:1px solid #ccc;
}
/* 同意 */
#submit_box {
	margin:15px auto;
	padding:10px 3%;
}
/* submitボタン */
.submit {
	width:100%;
	padding:10px 20px;
	font-size:20px;
	box-sizing: border-box;
  -webkit-border-radius:5px;
     -moz-border-radius:5px;
      -ms-border-radius:5px;
          border-radius:5px;
}
.submit_chk {
	margin:10px 0 10px 0;
}
form#before,
form#send {
	margin:0 0 0 0;
}




}
/* スマートフォン専用スタイル　ここまで */
/* =================================================== */