@charset 'UTF-8';
/*------------------------------------*
 	General Style
\*------------------------------------*/
#tb_contact {
	font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	color: #333;
	line-height: 1.6;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

/*------------------------------------*
 	Components
\*------------------------------------*/
/**
 * 見出し
 */
.tb-headline {
	border-bottom: 2px solid #59bded;
	color: #003894;
	font-size: 20px;
	font-weight: 700;
	margin: 1em 10px;
}

/**
 * ボタン
 */
.tb-button {
	font-family: inherit;
	display: inline-block;
	position: relative;
	line-height: normal;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
	padding: .5em;
	text-decoration: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
	color: #666;
	overflow: hidden;
	max-width: 290px;
	width: 95%;
	margin: .5em auto;
	zoom: 1;
	cursor: pointer;
}

.tb-button.\--isPrimaty {
	background: -webkit-linear-gradient(#f39c32, #f08401);
	background:         linear-gradient(#f39c32, #f08401);
	color: #fff;
	border: 1px solid #f6b260;
	font-weight: 700;
	box-shadow: 0 0 0 1px #d87600;
}

.tb-button.\--isPrimaty:link,
.tb-button.\--isPrimaty:visited {
	color: #fff;
}

.tb-button.\--isSecondary {
	background: -webkit-linear-gradient(#5ec3a3, #38b48c);
	background:         linear-gradient(#5ec3a3, #38b48c);
	color: #fff;
	border: 1px solid #64c4a5;
	font-weight: 700;
	box-shadow: 0 0 0 1px #31a27e;
}

.tb-button.\--isSecondary:link,
.tb-button.\--isSecondary:visited {
	color: #fff;
}

.tb-button.\--isTertiary {
	background-color: #e9e9e9;
	background: -webkit-linear-gradient(#ebebeb, #e6e6e6);
	background:         linear-gradient(#ebebeb, #e6e6e6);
	color: #666;
	border: 1px solid #efefef;
	font-weight: 700;
	box-shadow: 0 0 0 1px #ccc;
}

.tb-button.\--isTertiary:link,
.tb-button.\--isTertiary:visited {
	color: #666;
}

/**
 * ステップナビゲーション
 */
.tb-steps {
	position: relative;
	height: 33px;
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	padding-right: 16px;
	margin: 0 10px 2em;
}

.tb-steps__item {
	height: inherit;
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #ade1ff;
	position: relative;
	word-break: keep-all;
}

.tb-steps__item:first-child {
	z-index: 3;
	-webkit-box-flex: 2;
	-webkit-flex: 2;
	        flex: 2;
	padding-left: 5px;
}

.tb-steps__item:nth-child(2) {
	z-index: 2;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	        flex: 1;
	padding-left: 10px;
}

.tb-steps__item:nth-child(3) {
	z-index: 1;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	        flex: 1;
	padding-left: 10px;
}

.tb-steps__item::after {
	content: '';
	height: 33px;
	width: 15px;
	background-image: url('../img/ui_steps_passive.png');
	background-size: 15px 33px;
	position: absolute;
	right: 0;
	top: 0;
	margin-right: -15px;
}

.tb-steps__item.\--isActive {
	background: #3779b3;
}

.tb-steps__item.\--isActive::after {
	background-image: url('../img/ui_steps_active.png');
}

/**
 * テキスト
 */
.tb-text {
	color: #030200;
	font-size: 14px;
	margin: 0 10px 1em;
}

.tb-text span {
	color: #F00;
    padding-left: 1.2em;
    position: relative;
    display: block;
	margin: 5px 0 0;
}

.tb-text span::before {
	content: "※";
    display: block;
    left: 0;
    top: 0px;
    position: absolute;
}

/**
 * 入力フォーム
 */
/* 入力項目 */
.tb-form__group__item {
	margin: 0 10px;
	box-sizing: border-box;
	font-size: 16px;
}

.tb-form__group__item:nth-child(odd) {
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	background: #f2f2f2;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	padding: .5em;
}

.tb-form__group.\--isRequire .tb-form__group__item:nth-child(odd) {
	position: relative;
}

.tb-form__group.\--isRequire .tb-form__group__item:nth-child(odd)::after {
	content: 'required';
	font-size: 12px;
	padding: .1em .5em;
	margin-left: .5em;
	background: #ff5959;
	color: #fff;
}

.tb-form__group__item:nth-child(even) {
	padding: 1em 0 1.5em;
}

.tb-form__group__item> input,
.tb-form__group__item> select,
.tb-form__group__item> textarea {
	padding: .5em;
	font-family: inherit;
	font-size: 16px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #fff;
}

.tb-form__group__item> input {
	width: 100%;
	/*width: 220px;*/
}

.tb-form__group__item> input.\--isWide {
	width: 100%;
}

.tb-form__group__item> select {
	width: 100%;
	/*width: 220px;*/
}

.tb-form__group__item> textarea {
	width: 100%;
}

.tb-form__group__item label.error {
	margin: 1em 0 0;
	font-size: 14px;
	word-break: break-all;
	color: #f00;
	display: block;
}

.tb-form__group__item label.error::before {
	content: '※';
}

/* 注釈テキスト */
.tb-form__annotation {
	margin: 1em 0 0;
	font-size: 14px;
	word-break: break-all;
}

.tb-form__annotation.\--isWarning li::before {
	content: '※';
}

.tb-form__annotation.\--isError {
	color: #f00;
}

/* 送信ボタンラッパー */
.tb-form__button {
	margin: 1em 0 0;
	padding-bottom: 2em;
	text-align: center;
}

.tb-form__button p {
	color: #F00;
    font-size: 14px;
    text-align: left;
    margin: 0 10px 1em;
}

.tb-form__button p span {
	color: #F00;
    padding-left: 1.2em;
    position: relative;
    display: block;
	margin: 5px 0 0;
}

.tb-form__button p span::before{
	content: "※";
    display: block;
    left: 0;
    top: 0px;
    position: absolute;
}

/* input入力欄用 */
.input_box {
	display: flex; /*アイコン、テキストボックスを調整する*/
	align-items: center; /*アイコン、テキストボックスを縦方向の中心に*/
	justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/
	width: 100%;
	height: 50px;
	border-radius: 5px;
	border: 1px solid lightgray;
	margin-top: 10px;
}

.input_inner {
	width: 100%;
	height: 100%;
	background-color: transparent;
	position: relative;
}

.people {
	position: absolute;
	z-index: 1;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: none; /*枠線非表示*/
	outline: none; /*フォーカス時の枠線非表示*/
	padding: 0 10px;
	font-size: 16px;
	background-color: transparent; /*後ろの.password_stringを見せるため*/
	box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

.input_title {
	/*position: absolute;
	height: 100%;
	width: 140px;*/ /*文字列分の長さ*/
	/*top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding-left: 10px;*/ /*position: absolute;でのmarginは親要素はみ出す*/
	/*font-size: 16px;
	line-height: 50px;*/ /*文字列を縦方向にmiddleに見せるため*/
	/*background-color: transparent;
	color: #80868b;
	box-sizing: border-box;*/ /*横幅の解釈をpadding, borderまでとする*/
	/*transition: all 0.2s;
	-webkit-transition: all 0.2s;*/
	font-size: 10px;
	line-height: 10px;
	width: fit-content;
	height: 10px;
	padding: 0 2px;
	background-color: white;
	transform: translate3d(5px, -6px, 0);
}

/*.people + .input_title {
	font-size: 10px;
	line-height: 10px;
	width: fit-content;
	height: 10px;
	padding: 0 2px;
	background-color: white;
	transform: translate3d(5px, -6px, 0);
}*/

.schedule {
	width: 100%;
	padding: .5em;
	font-family: inherit;
	font-size: 16px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #fff;
}

.tb-form__calendar {
	padding: .5em;
	font-family: inherit;
	font-size: 16px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #fff;
}