@charset "UTF-8";
/* ----------------------------------------------

	個別パーツ

----------------------------------------------- */
/* -------------------------------------
	明朝体
---------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700);
.mincho {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, 'Libre Baskerville', "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-ms-transform: rotate(0.001deg);
	-moz-transform: rotate(0.001deg);
	-webkit-transform: rotate(0.001deg);
	transform: rotate(0.001deg);
	/*-----------------------------------------------------------
		※.rotateにopacityつけると挙動がおかしくなるので注意
	------------------------------------------------------------*/
}

/* -------------------------------------
	Webフォント設定
---------------------------------------- */
@font-face {
	font-family: 'condenseicon';
	/* 設定するフォント名 */
	src: url("../fonts/CONDENSEicon.eot");
	/* IE用 */
	src: url("../fonts/CONDENSEicon.woff") format("woff"), url("../fonts/CONDENSEicon.otf") format("opentype");
}

/* -------------------------------------
	吹き出し
---------------------------------------- */
.balloon {
	background: #E8EAF6;
	margin-bottom: 20px;
	padding: 12px 15px;
	position: relative;
}

.balloon:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 12.5px 0 12.5px;
	border-color: #E8EAF6 transparent transparent transparent;
	bottom: -18px;
	left: 50%;
	margin-left: -12.5px;
	position: absolute;
}

/* -------------------------------------
	ページング/ページャー
---------------------------------------- */
.pager_box {
	position: relative;
	width: 550px;
	margin: 0 auto;
}

.pager_list {
	letter-spacing: -.50em;
	text-align: center;
}

.pager_list li {
	border: 1px solid #ccc;
	display: inline-block;
	letter-spacing: normal;
	margin: 0 5px;
}

.pager_list li a,
.pager_list .active {
	line-height: 30px;
	text-align: center;
	width: 30px;
}

.pager_list li a {
	display: block;
	text-decoration: none;
}

.pager_list .active {
	background: #D98FAA;
}

.pager_list .prev,
.pager_list .next {
	margin: 0;
}

.pager_list .prev a,
.pager_list .next a {
	width: 90px;
}

.pager_list .prev {
	position: absolute;
	left: 0;
	top: 0;
}

.pager_list .next {
	position: absolute;
	right: 0;
	top: 0;
}

/* -------------------------------------
	form構成用
---------------------------------------- */
.form_area table {
	width: 100%;
	border-top: 1px solid #ECEFF1;
	border-left: 1px solid #ECEFF1;
	margin-bottom: 30px;
}

.form_area table th, .form_area table td {
	border-right: 1px solid #ECEFF1;
	border-bottom: 1px solid #ECEFF1;
	line-height: 1.3;
	padding: 10px 15px;
}

.form_area table th {
	background: #CFD8DC;
	width: 25%;
}

.form_area table th .notes {
	margin-bottom: 8px;
	display: block;
	font-size: 1.2rem;
}

.form_area table th .notes:last-child {
	margin-bottom: 0;
}

.form_area table td {
	width: 75%;
}

.form_area table td .notes {
	margin-bottom: 8px;
	display: block;
	font-size: 1.2rem;
}

.form_area table td .notes:last-child {
	margin-bottom: 0;
}

.form_area table table {
	border: none;
	margin-bottom: 0;
}

.form_area table table th {
	border: none;
	background: none;
}

.form_area table table td {
	border: none;
}

.error_area {
	background: rgba(213, 0, 0, 0.1);
	color: #D50000;
	display: block;
	padding: 15px 20px;
	margin: 0 0 25px 0;
	line-height: 1.3;
}

.error_area ul li {
	list-style-type: disc;
	margin-left: 1em;
}

table .error_text {
	background: rgba(213, 0, 0, 0.1);
	color: #D50000;
	display: block;
	line-height: 1.3;
	padding: 0.5em 1em;
	margin: 0;
}

.input_list {
	letter-spacing: 0.50em;
}

.input_list li {
	letter-spacing: normal;
	display: inline-block;
}

.readonly {
	background: #eee;
	color: #555;
}

.required {
	color: #e60033;
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1;
	vertical-align: middle;
}

.free {
	color: #007EE6;
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1;
	vertical-align: middle;
}

.example {
	display: block;
	padding: 0 0 5px;
}

.text_ss {
	width: 20%;
}

.text_s {
	width: 20%;
}

.text_m {
	width: 50%;
}

.text_l {
	width: 80%;
}

.text_ll {
	width: 100%;
}

.select_ss {
	width: 15%;
}

.select_s {
	width: 25%;
}

.select_m {
	width: 50%;
}

.select_l {
	width: 80%;
}

.select_ll {
	width: 100%;
}

/* -------------------------------------
	装飾セレクト
---------------------------------------- */
.js-designSelect {
	position: relative;
}

.js-designSelectText {
	background: #fff;
	height: 36px;
	line-height: 36px;
	overflow: hidden;
	border: 1px solid #dddddd;
	padding: 0 30px 0 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.js-designSelectText:after {
	content: "\f0d7";
	font-family: FontAwesome;
	display: inline-block;
	text-align: center;
	position: absolute;
	right: 10px;
	top: 0px;
}

.js-designSelect option {
	font-size: 1.4rem;
}

.js-designSelect select {
	background: #fffffe none repeat scroll 0 0;
	height: 36px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

/* -------------------------------------
	装飾ラジオボタン
---------------------------------------- */
.design_radio input {
	display: none !important;
}

.design_radio input + span {
	display: inline-block;
	position: relative;
	padding: 2px 0 0 25px;
	cursor: pointer;
	min-height: 17px;
}

.design_radio input + span:before {
	background: #fafafa;
	border: 1px solid #666666;
}

.design_radio input + span:before,
.design_radio input + span:after {
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	left: 0;
	border-radius: 50%;
	width: 15px;
	height: 15px;
}

.design_radio input:checked + span:after {
	top: 6px;
	left: 3px;
	height: 11px;
	width: 11px;
	background: #F2A88C;
}

/* -------------------------------------
	装飾チェックボックス
---------------------------------------- */
.design_check input {
	display: none !important;
}

.design_check input + span {
	display: inline-block;
	position: relative;
	padding: 2px 0 0 25px;
	cursor: pointer;
	min-height: 17px;
}

.design_check input + span:before {
	background: #fafafa;
	border: 1px solid #666666;
	border-radius: 3px;
}

.design_check input + span:before,
.design_check input + span:after {
	content: '';
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: 15px;
}

.design_check input:checked + span:after {
	top: 1px;
	height: 10px;
	border-left: 4px solid #F28888;
	border-bottom: 3px solid #F28888;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* -------------------------------------
	リンクアイコン
---------------------------------------- */
.external:after {
	/* 別窓リンク */
}

.pdf:after {
	/* pdfリンク */
	content: "\f1c1";
	color: #e14045;
	font-family: "FontAwesome";
	font-size: 90%;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin: 0 10px 0 5px;
}

.word:after {
	/* wordリンク */
	content: "\f1c2";
	color: #285395;
	font-family: "FontAwesome";
	font-size: 90%;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin: 0 10px 0 5px;
}

.excel:after {
	/* excelリンク */
	content: "\f1c3";
	color: #207347;
	font-family: "FontAwesome";
	font-size: 90%;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin: 0 10px 0 5px;
}

/* -------------------------------------
	ボタンの色サンプル
---------------------------------------- */
.red_btn {
	background-color: #F94242;
}

.blue_btn {
	background-color: #72AEE1;
}

.green_btn {
	background-color: #8CC11E;
}

.gray_btn {
	background-color: #A8A8A8;
}

.yellow_btn {
	background-color: #E9C030;
}

.pink_btn {
	background-color: #F4679C;
}

/* -------------------------------------
	hoverで丸くなる .round
---------------------------------------- */
.round {
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.round:hover {
	border-radius: 100px;
}

/* -------------------------------------
	色付き数字リスト
---------------------------------------- */
.numbering_list {
	counter-reset: section;
}

.numbering_list li {
	position: relative;
	padding: 0 0 0 30px;
}

.numbering_list li:before {
	counter-increment: section;
	content: counters(section, ".") ".";
	color: #e388ab;
	text-indent: -1.5em;
	display: inline-block;
}

/* -------------------------------------
	まるいフロー
---------------------------------------- */
.round_flow {
	position: relative;
	min-height: 60px;
}

.round_flow li {
	background: #60c00e;
	border-radius: 30px;
	color: #fff;
	line-height: 48px;
	position: absolute;
	text-align: center;
	width: 40%;
}

.round_flow li:nth-child(1) {
	background: #5C6BC0;
	left: 0;
	z-index: 5;
}

.round_flow li:nth-child(2) {
	background: #3949AB;
	left: 30%;
	padding: 0 0 0 4em;
	z-index: 4;
}

.round_flow li:nth-child(3) {
	background: #283593;
	left: 60%;
	padding: 0 0 0 4em;
	z-index: 3;
}

.round_flow li:after {
	content: "\f0a9";
	color: #fff;
	display: inline-block;
	font-family: "FontAwesome";
	font-size: 2rem;
	letter-spacing: normal;
	margin: 0 10px 0;
	position: absolute;
	right: 3%;
	vertical-align: top;
	-ms-transform: rotate(0.001deg);
	-moz-transform: rotate(0.001deg);
	-webkit-transform: rotate(0.001deg);
	transform: rotate(0.001deg);
}

.round_flow li:last-child:after {
	content: "";
}

/* -------------------------------------
	active前後で状態を変更できるフロー
---------------------------------------- */
.active_flow {
	background: #E0F2F1;
	margin: 5px 0 0 0;
}

.active_flow ol {
	border: solid 2px #E0F2F1;
	margin: auto;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.active_flow ol li {
	background: #E0F2F1;
	border-right: solid 2px #E0F2F1;
	color: #000;
	float: left;
	font-size: 1.8rem;
	line-height: 40px;
	position: relative;
	text-align: center;
	width: 25%;
}

.active_flow ol li.active {
	background: #E0F2F1;
	font-weight: bold;
	color: #00897B;
}

.active_flow ol li.active:after {
	border: 20px solid transparent;
	border-left: 20px solid #26A69A;
}

.active_flow ol li.active ~ li {
	background: #fff;
}

.active_flow ol li.active ~ li:after {
	border: 20px solid transparent;
	border-left: 20px solid #E0F2F1;
}

.active_flow ol li:after {
	content: "";
	border: 20px solid transparent;
	border-left: 20px solid #80CBC4;
	display: inline-block;
	height: 0;
	width: 0;
	position: absolute;
	right: -42px;
	top: 0;
	z-index: 5;
}

.active_flow ol li:last-child, .active_flow ol li:last-child:after,
.active_flow ol li.active ~ li:last-child:after {
	border: none;
}

/* -------------------------------------
	タブきりかえ
---------------------------------------- */
.tab_area {
	width: 50%;
}

.tab_area ul {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	background: #E1F5FE;
	border: 1px solid #CFD8DC;
}

.tab_area ul li {
	width: 33.33333%;
	cursor: pointer;
	padding: 20px;
}

.tab_area ul li:not(:first-child) {
	border-left: 1px solid #CFD8DC;
}

.tab_area .tab_item {
	padding: 20px;
	border: 1px solid #CFD8DC;
	border-top: none;
}

/* -------------------------------------
	bxslider
---------------------------------------- */
.bx-wrapper {
	position: relative;
}

.bx-controls-direction {
	font-family: "FontAwesome";
}

.bx-prev,
.bx-next {
	font-size: 5rem;
	color: #333;
	text-decoration: none;
	position: absolute;
	top: calc(50% - 45px);
}

.bx-prev {
	left: -40px;
}

.bx-next {
	right: -40px;
}

.bx-viewport {
	/* スライダーの親 */
	margin-bottom: 10px;
}

.bx-pager {
	/* ページャーの親 */
	text-align: center;
	letter-spacing: -.5em;
}

.bx-pager-item {
	/* ページャーの各アイテム */
	display: inline-block;
	margin: 0 8px;
}

.bx-pager-link {
	/* ページャーリンク部分（●になるところ） */
	text-indent: -9999px;
	display: block;
	width: 15px;
	height: 15px;
	text-decoration: none;
	background: #999;
	border-radius: 50%;
}

.bx-pager-link.active {
	background: #333;
}

@media screen and (max-width: 736px) {
	.bx-controls-direction {
		display: none;
	}
}