@charset "shift_jis";

/*************************************************

components ver1.0.3

UpDate　2018/11

**************************************************/

/*-----------------------------------------------

スタイル初期化

-----------------------------------------------*/
*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	word-break:break-all;
}

html{
	font-size: 62.5%; /*font-size: 10px*/
}

body{
	font-size: 1.6rem; /*font-size: 16px*/
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;
	text-align:justify;
	-webkit-text-size-adjust: 100%;
}

/*見出し*/
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
}

/*テーブル*/
table{
	border-collapse:collapse;
	border-spacing:0;
}

/*リスト*/
ol, ul{list-style:none;}

/*リンク*/
a{
	outline:none;
	text-decoration:none;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,.25);
}


/*-----------------------------------------------

位置

-----------------------------------------------*/
.center{
	margin: 0 auto;
}



/*-----------------------------------------------

float

-----------------------------------------------*/
.left{float:left;}

.right{float:right;}

.cf:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}

/*-----------------------------------------------

非表示系

-----------------------------------------------*/
/*PC非表示*/
@media ( min-width :960px){
	.pc_hide{
		display:none;
	}
}

/*SP非表示*/
@media ( max-width :959px){
	.sp_hide{
		display:none;
	}
}

/*-----------------------------------------------

画像

-----------------------------------------------*/
img{
	width: 100%;
	max-width:100%;
	height:auto;
	border-style:none;
	vertical-align:bottom;
}

/*-----------------------------------------------

水平リスト

-----------------------------------------------*/
/**/
ul.list_horizontal{
	letter-spacing:-.4em;
}

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

/*-----------------------------------------------

link

-----------------------------------------------*/
/* ホバー効果 */
.hvr:hover{
	opacity:0.75;
}

/*ボタン ベース*/
.btn{
	display:block;
	margin:0 auto;
	text-align:center;
	border-radius:4px;
}

/*-----------------------------------------------

テキスト系

-----------------------------------------------*/
.txt_hide{
	text-indent:150%;
	white-space:nowrap;
	overflow:hidden;
}

/* align */
.txt_l{ text-align:left; }

.txt_r{ text-align:right; }

.txt_cntr{ text-align:center; }

/* size */
.txt_xl{ font-size:2rem; }

.txt_lg{ font-size:1.5rem; }

.txt_sm{ font-size:.75rem; }

.txt_xs{ font-size:.625rem; }

/*weight*/
.txt_b{ font-weight:bold; }

/*-----------------------------------------------

input

-----------------------------------------------*/
button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
}


input[type="text"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
select,
textarea{
	display: inline-block;
	width: 100%;
	padding: 8px;
	font-size: 1.6rem;
	background: #f1f1f1;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* サブミット&ボタン */
input[type="submit"],
input[type="button"]{
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*---------------------------------------------------
フォーム装飾
---------------------------------------------------*/
.form_box .form_ttl{
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 16px;
}

/*各種項目タイトルBOX*/
.form_box .form_row{
	margin-bottom: 16px;
	position: relative;
}

/*エラー吹き出し表示用BOX*/
.form_box .error_box{
	position:absolute;
	top: 2px;
	right: 0;
	min-width: 160px;
	display: none;
}

/*エラー吹き出し*/
.form_box .error_msg{
	padding: 0 16px;
	height: 25px;
	line-height: 25px;
	font-size:1.2rem;
	text-align: center;
	color: #fff;
	background: #d43d3d;
	border-radius: 24px;
	position:relative;
}

.form_box .error_msg:before{
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
	content: "";
	width: 8px;
	height: 8px;
	background: #d43d3d;
	transform: rotate(45deg);
}

/*各種項目名*/
.form_box .form_item{
	display: inline-block;
	color: #888;
	font-size: 1.3rem;
	margin-bottom: 8px;
}

/*各種項目名アイコン*/
.form_box .form_item:before{
	display: inline-block;
	margin-right: 8px;
	content: '\f138';
}

.form_box input[type="text"]{
	width: 100%;
}

/*
.form_box .select_box{
	position: relative;
}

.form_box .select_box:after{
	position: absolute;
	top: 8px;
	right: 18px;
	content: "\f107";
	color: #888888;
	font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-size: 24px;
}
*/

/*生年月日*/
.form_box .year{
	width: 32%;
}

.form_box .month{
	width: 30%;
}

.form_box .day{
	width: 30%;
}

/*ラジオボタン 不可視化*/
.form_box input[type="radio"]{
	display: none;
}

/*ボタン化したラジオボタンのスタイル*/
.form_box .btn_radio{
	display: block;
	float: left;
	margin: 0;
	padding: 8px;
	font-size: 1.6rem;
	text-align: center;
	background: #f1f1f1;
	border: 1px solid #ccc;
}

/*ボタン化したラジオボタン 最初のボタン*/
.form_box .btn_first{
	border-right: none;
	border-radius: 3px 0 0 3px;
}

/*ボタン化したラジオボタン 2つ目のボタン*/
.form_box .btn_second{
	border-right: none;
	border-radius: 0 0 0 0;
}

/*ボタン化したラジオボタン3つ目のボタン*/
.form_box .btn_third{
	border-right: none;
	border-radius: 0 0 0 0;
}

/*ボタン化したラジオボタン 最後のボタン*/
.form_box .btn_last{
	border-radius: 0 3px 3px 0;
}

/*性別ボタン*/
.form_box .btn_w50{
	width: 50%;
}

/*血液型ボタン*/
.form_box .btn_w25{
	width: 25%;
}

/*婚姻暦ボタン*/
.form_box .btn_w33{
	width: 33.333%;
}

/*男性選択時*/
.form_box input[type="radio"].sex:checked + .on{
	color: #fff;
	background-color: #4b97b9;
}

/*女性選択時*/
.form_box input[type="radio"].sex:checked + .off{
	color: #fff;
	background-color: #ef5b8e;
}

/*血液型選択時*/
.form_box input[type="radio"].blood:checked + .on{
	color: #fff;
	background-color: #f24a4a;
}

/*婚姻暦選択時*/
.form_box input[type="radio"].marriage:checked + .on{
	color: #fff;
	background-color: #a66bcb;
}

/*-----------------------------------------------

tableレイアウト

-----------------------------------------------*/
.tbl{
	display:table;
	width:100%;
	table-layout:fixed;
}

.tbl_row{display:table-row;}

.tbl_cell{display:table-cell;}

/*-----------------------------------------------

Font Awesome ver5 アイコン

-----------------------------------------------*/
.icn_fa:before{
	font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/*ホーム*/
.icn_home:before{ content:'\f015'; }

/*カメラ*/
.icn_camera:before{ content:'\f030'; }

/*歯車*/
.icn_cog:before{ content:'\f085'; }

/*メール*/
.icn_mail:before{ content:'\f0e0'; }

/*携帯*/
.icn_mob:before{ content:'\f3cd'; }

/*電話*/
.icn_tel:before{ content:'\f095'; }

/*送信*/
.icn_send:before{ content:'\f1d8'; }

/*リンク*/
.icn_link:before{ content:'\f0c1'; }

/*パソコン*/
.icn_pc:before{ content:'\f108'; }

/*カレンダー*/
.icn_days:before{ content:'\f073'; }

/*電卓*/
.icn_cal:before{ content:'\f1ec'; }

/*鉛筆*/
.icn_memo:before{ content:'\f303'; }

/*マップ*/
.icn_map:before{ content:'\f3c5'; }

/*コメント*/
.icn_come:before{ content:'\f27a'; }

/*四角ペン*/
.icn_pencil:before{ content:'\f044'; }

/*サイトマップ*/
.icn_sitemap:before{ content:'\f0e8'; }

/*いいね*/
.icn_good:before{ content:'\f164'; }

/*コード*/
.icn_code:before{ content:'\f1c9'; }

/*ギフト*/
.icn_gift:before{ content:'\f06b'; }

/*人々*/
.icn_users:before{ content:'\f0c0'; }

/*人*/
.icn_user:before{ content:'\f007'; }

/*鍵*/
.icn_lock:before{ content:"\f023"; }

/*テキストファイル*/
.icn_file:before{ content:'\f15c' }

/*円マーク*/
.icn_yen:before{ content:'\f157'; }

/*二重丸*/
.icn_dot:before{ content:'\f192'; }

/*リスト*/
.icn_list:before{ content:"\f03a"; }

/*虫眼鏡*/
.icn_search:before{ content:"\f002"; }

/*スピン*/
.icn_spin:before{ content:"\f110"; }

/*電話四角枠*/
.icn_phone:before{ content:"\f2a0"; }

/*前へ*/
.icn_prev:before{ content:"\f100"; }

/*次へ*/
.icn_next:before{ content:"\f101"; }

/*ツイッター*/
.icn_tw:before{ content:"\f099"; }

/*フェイスブック*/
.icn_fb:before{ content:"\f39e"; }

/*フォーク＆ナイフ*/
.icn_utensils:before{ content:"\f2e7"; }

/*グラス*/
.icn_glass:before{ content:"\f000"; }

/*タグ*/
.icn_tag:before{ content:"\f02b"; }

/*前へ*/
.icn_prev:before{ content:"\f100"; }

/*次へ*/
.icn_next:before{ content:"\f101"; }

/*男性*/
.icn_male:before{ content:'\f183'; }

/*女性*/
.icn_female:before{ content:'\f182'; }

/*星*/
.icn_star:before{ content:'\f005'; }

/*月*/
.icn_moon:before{ content:'\f186'; }

/*ハート*/
.icn_heart:before{ content:'\f004'; }

/*エクスクラメーション*/
.icn_excla:before{ content:'\f06a'; }

/*クエスチョン*/
.icn_question:before{ content:'\f059'; }

/*お知らせ*/
.icn_info:before{ content:'\f05a'; }

/*グラフ*/
.icn_chart:before{ content:'\f080'; }

/*クレジットカード*/
.icn_credit:before{ content:'\f09d'; }

/*ポイント*/
.icn_pt:before{ content:'\f288'; }

/*コイン*/
.icn_coin:before{ content:'\f1f9'; }

/*三本バー*/
.icn_bars:before{ content:'\f0c9'; }

/*ベル*/
.icn_bell:before{ content:'\f0f3'; }

/*プロフィール*/
.icn_prof:before{ content:'\f2bb'; }

/*イメージ*/
.icn_images:before{ content:'\f302'; }

/*履歴*/
.icn_history:before{ content:'\f1da'; }

/*口座*/
.icn_bank:before{ content:'\f09d'; }

/*ログアウト*/
.icn_logout:before{ content:'\f2f5'; }