@charset "shift-jis";

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

ver1.0.6

UpDate:2019/9

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

/*-----------------------------------------------
スタイル初期化
-----------------------------------------------*/
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

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

body{
	font-size: 1.6rem; /*font-size: 16px*/
	/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif; */
	font-family: 
		Helvetica,
		Arial,
		'Hiragino Kaku Gothic ProN',
		'Hiragino Kaku Gothic Pro',
		"Yu Gothic",
		'ヒラギノ角ゴ ProN W3',
		'ヒラギノ角ゴ Pro W3',
		"游ゴシック",
		'メイリオ',
		'ＭＳ Ｐゴシック',
		'Meiryo',
		'MS PGothic',
		sans-serif;
	text-align: justify;
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
}
/*見出し*/
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);
}

/*AOS利用時*/
.for_aos{
	overflow: hidden;
}

/*-----------------------------------------------
フレックスボックス
-----------------------------------------------*/
/*左端配置 折り返えす（初期値）*/
.flex_box{
	display: flex;
	flex-wrap: wrap;
}

/*右端配置*/
.content_end{
	justify-content: flex-end;
}

/*左右中央に配置*/
.content_center{
	justify-content: center;
}

/*アイテムの間にスペースを均等に割り付け*/
.content_between{
	justify-content: space-between;
}

/*アイテムの両端にスペースを均等に割り付け*/
.content_around{
	justify-content: space-around;
}

.flex_nowrap{
	flex-wrap: nowrap;
}

/*縦並び*/
.column{
	flex-direction: column;
}

/*子要素の垂直方向の位置(rowの場合、vertical-align的な動き、columnの場合、text-align的な動き)*/
.align_items_center{
	align-items: center;
}

.align_items_end{
	align-items: flex-end;
}

/*-----------------------------------------------
マージン
-----------------------------------------------*/
.mgn_0a{margin: 0 auto;}

.mgn_t8{margin-top: 8px;}

.mgn_t16{margin-top: 16px;}

.mgn_t24{margin-top: 24px;}

.mgn_t32{margin-top: 32px;}

.mgn_t48{margin-top: 48px;}

.mgn_b8{margin-bottom: 8px;}

.mgn_b16{margin-bottom: 16px;}

.mgn_b24{margin-bottom: 24px;}

.mgn_b32{margin-bottom: 32px;}

.mgn_b48{margin-bottom: 48px;}

.mgn_tb8{margin: 8px auto;}

.mgn_tb16{margin: 16px auto;}

.mgn_tb24{margin: 24px auto;}

.mgn_tb32{margin: 32px auto;}

/*-----------------------------------------------
パディング
-----------------------------------------------*/
.pad_a8{padding: 8px;}

.pad_a16{padding: 16px;}

.pad_a24{padding: 24px;}

.pad_tb8{padding: 8px 0;}

.pad_tb16{padding: 16px 0;}

.pad_tb24{padding: 24px 0;}

.pad_lr8{padding: 0 8px;}

.pad_lr16{padding: 0 16px;}

.pad_lr24{padding: 0 24px;}

/*-----------------------------------------------
各コンテンツ配置用BOX
-----------------------------------------------*/
.in_box{
	height: 100%;
	padding: 8px;
	border:1px solid #e5e5e5;
		background: #fff;
}

/*-----------------------------------------------
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;
}

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

/*ボタン ベース*/
.btn{
	display: block;
	width: 60%;
	margin: 32px auto 16px;
	padding: .5em;
	text-align: center;
	font-weight: bold;
	border-radius: 4px;
}

/*-----------------------------------------------
クロスフェードリスト用(ボタン交互に表示系)
-----------------------------------------------*/
/*配置用BOX ※サイズ・位置はダミー*/
.cross_fade_box{
	width: 120px;
	height: 120px;
	margin: 16px auto;
}

.cross_fade_box ul{
	position: relative;
}

.cross_fade_box ul li{
	position: absolute;
	top: 0;
	left: 0;
}

.cross_fade_box ul li.crossfade{
	z-index: 999;
}

.cross_fade_box ul li.crossfade:hover{
	animation-play-state: paused;
}

/*-----------------------------------------------
テキスト系
-----------------------------------------------*/
.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_24{ font-size: 2.4rem; }/*24px*/

.txt_18{ font-size: 1.8rem; }/*18px*/

.txt_12{ font-size: 1.2rem; }/*12px*/

.txt_10{ font-size: 1rem; }/*10px*/

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

/*-----------------------------------------------
input系
-----------------------------------------------*/
input::placeholder,
textarea::placeholder{
	color: #b1b1b1;
}

/* IE */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #b1b1b1;
}

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: .5em;
	font-size: 1.6rem;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*ie用セレクト右矢印非表示*/
select::-ms-expand {
	display: none;
}

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


/*---------------------------------------------------
フォーム装飾
---------------------------------------------------*/
.form_box{
	padding: 16px;
}

/*フォーム上部のタイトル*/
.form_box .form_ttl{
	margin: 0 auto 24px;
	padding: 16px 8px;
	font-size: 1.6rem;
	text-align: center;
	background: #fff8ea;
	border-radius: 8px;
}

/*フォーム内各行*/
.form_box .form_row{
	margin-bottom: 16px;
	position: relative;
}

/*各種項目名*/
.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: 0 8px;
	content: '\f138';
	transform: rotate(90deg);
}

/*---------------------------------------------------
フォーム内　エラー系
---------------------------------------------------*/
/*エラー吹き出し*/
.form_box .error_msg{
	padding: 0 16px;
	min-width: 33%;
	height: 25px;
	line-height: 25px;
	font-size:1.2rem;
	text-align: center;
	color: #fff;
	background: #d43d3d;
	border-radius: 24px;
	position:absolute;
	top: 2px;
	right: 0;
	display: none;
}

/*失敗時表示文言*/
.form_box .faile_msg{
	width: 100%;
	margin: -16px auto 16px;
	padding: 16px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	background: #c31616;
	border-radius: 4px;
}

/*---------------------------------------------------
フォーム内　入力関連
---------------------------------------------------*/
/*フォーム内横並び用のフレックスボックス*/
.form_box .flex_box{
	justify-content: space-between;
}

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

/*ボタン化したラジオボタンのスタイル*/
.form_box .btn_radio{
	padding: 8px 0;
	font-size: 1.5rem;
	text-align: center;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
}

/*性別用ボタン*/
.btn_sex_radio{
	flex-basis: 48%;
}

/*男性選択時*/
.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;
}

/*血液型用ボタン*/
.btn_blood_radio{
	flex-basis: 24%;
}

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

/*婚姻暦用ボタン*/
.btn_marriage_radio{
	flex-basis: 32%;
}

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

/*生年月日のセレクト*/
.form_box .year,
.form_box .month,
.form_box .day{
	max-width: 32%; /*ie用 padding設定時、box-sizing:border-boxが効かない対策*/
	flex-basis: 32%;
}

/*チェックボックス装飾*/
input[type="checkbox"]{
	display: none;
}

.check_label{
	display: inline-block;
	margin-bottom: 16px;
	padding: 0 0 0 24px;
	vertical-align: middle;
	cursor: pointer;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
}

/*チェックボックス*/
.check_label:after{
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	content: '';
	width: 16px;
	height: 16px;
	margin-top: -10px;
	border: 2px solid #e5e5e5;
	border-radius: 4px;
}

/*チェックマーク*/
.check_label:before{
	position: absolute;
	top: 50%;
	left: 6px;
	display: block;
	content: '';
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #00b98e;
	border-bottom: 3px solid #00b98e;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*チェックマーク チェック時時に表示*/
input[type="checkbox"]:checked + .check_label:before{
	opacity: 1;
}

input[type="checkbox"]:checked + .check_label:after{
	border: 2px solid #00b98e;
}

input[type="checkbox"]:checked + .check_label{
	color: #00b98e;
	font-weight: bold;
}

.form_box .check_box.flex_box{
	flex-wrap: wrap;
	justify-content: space-betweent;
}

/*pc*/
@media screen and ( min-width : 960px ){

	.form_box .check_box.flex_box{
		justify-content: flex-start;
	}	

	.check_label{
		flex-basis: 25%;
	}

	.check_label:hover:after{
		border-color: #ccc;
	}
}

/* テキストエリア */
.form_box form textarea{
	height: 96px;
	overflow-y: scroll;
}

/*-----------------------------------------------
tableレイアウト
-----------------------------------------------*/
.tbl{
	display:table;
	width:100%;
	table-layout:fixed;
}

.tbl_row{display:table-row;}

.tbl_cell{display:table-cell;}

/*-----------------------------------------------
スクロール可能table
-----------------------------------------------*/
.scrollable_table{
	display: block;
	background: #fff;
	border: 1px solid #e5e5e5;
}

.scrollable_table th,
.scrollable_table td{
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 1.3rem;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: middle;
}

.scrollable_table thead{
	display: block;
	float:left;
}

.scrollable_table thead th{
	display: block;
	width: 130px;
	font-weight: normal;
}

.scrollable_table thead th:last-child{
	border-bottom: none;
}

.scrollable_table .headline{
	background: #f4f4f4;
}

.scrollable_table tbody{
	display: block;
	white-space: nowrap;
	overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

.scrollable_table tbody td{
	display: inline-block;
	width: 40px;
}

.scrollable_table tbody tr:last-child td{
	border-bottom: none;
}

/*-----------------------------------------------
右矢印付きリンクリスト
-----------------------------------------------*/
ul.right_arrow li a{
	display: block;
	position: relative;
}

ul.right_arrow li a:after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 4px);
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: 1px solid #7f8499;
	border-right: 1px solid #7f8499;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*-----------------------------------------------
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'; }

/*チェックマーク*/
.icn_logout:before{ content:'\f00c'; }

/*右二重矢印*/
.icn_double_right_arrow:before{ content:'\f101'; }