/*----------------------------------------------------------------------------------*/
/*                                                                                  */
/*  COMMON STYLE                                                                    */
/*                                                                                  */
/*----------------------------------------------------------------------------------*/

/* ================================================================================ */
/*  1.COMMON                                                                        */  
/* ================================================================================ */

/* -------------------------------------------------------------------------------- */
/*  1-1.COMMON RESET                                                                */  
/* -------------------------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video, source {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	}  

html, body {	
	height:100%;
	}

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

@media screen and (max-width: 640px) {
		html{
			/*font-size:75.89%;*/ /*  ex) 17 / 14 * 62.5  */
			font-size:71.42%; /*  ex) 16 / 14 * 62.5  */
		}
	}

body{
	font-size:1.4rem;
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color:#333;
	-webkit-text-size-adjust:100%;
	}

body.bg--black{
	background:url(/common/img/bg_05.gif);
	}

h1 , h2 , h3 , h4 , h5{
	box-sizing:border-box;
	}

table {
	border-collapse:collapse;
	}
	
p , li , th , td , dt , dd{
	line-height:1.8em;
	}

a{
	opacity: 1;
	color:#1a5cbe;
	transition: all .3s;
	}

a:hover{
	opacity: 0.5;
	}

img {
	border:0px;
	vertical-align:top;
	}

li {
	list-style:none;
	}

em{
	font-weight: bold ;
	font-style:normal;
	}

input[type=text] , textarea , input[type=password] {
	/*margin: 0;*/
	padding: 5px;
	background: #fff;
	border: solid 1px #c8c8c8;
	border-radius: 5px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size:1.6rem;
	box-sizing: border-box;
}

input[type=button]{
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}

@media screen and (max-width: 640px) {
	input[type=button]{
		display:block;
		}
	}

select{
	padding: 5px;
	background: #fff;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size:1.6rem;
	box-sizing: border-box;
	padding-right:30px;
	background-image:url(/common/img/icon_select.png);
	background-repeat:no-repeat;
	background-position:96% center;
	border: solid 1px #c8c8c8;
	border-radius: 5px;
	padding-right:10px;
	width:100%;
	display:block;
    line-height: 20px;
}

input[type=checkbox] , input[type=radio] {
	display: none;
	}

.chkbox{
	box-sizing: border-box;
	display:inline-block;
	margin:0 30px 0 0;
	padding-left:25px;
	vertical-align: middle;
	cursor:pointer;
	position:relative;
	}

.chkbox::after{
	content:"";
	width:18px;
	height:18px;
	border: solid 1px #c8c8c8;
	background-color:#fff;
	border-radius:5px;
	display:block;
	position:absolute;
	top:5px;
	left:0;
	}

.chkbox.small{
	margin:0 0px 0 0;
	vertical-align: top;
	}

input[type=checkbox]:checked + .chkbox::after{
	background-color:#787878;
	border: solid 1px #787878;
	}

input[type=checkbox]:checked + .chkbox::before{
	width:7px;
	height:7px;
	content:"";
	display:block;
	position: absolute;
	top: 7px;
	left: 5px;
	border-right:solid 3px #fff;
	border-bottom:solid 3px #fff;
	z-index: 10;
	transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
	}


.radio{
	box-sizing: border-box;
	display:inline-block;
	margin:0 30px 0 0;
	padding-left:25px;
	vertical-align: middle;
	cursor:pointer;
	position:relative;
	}

.radio::after{
	content:"";
	width:17px;
	height:17px;
	border: solid 1px #c8c8c8;
	background-color:#fff;
	border-radius:16px;
	display:block;
	position:absolute;
	top:3px;
	left:0;
	}

/*
input[type=radio]:checked + .radio::after{
	background-color:#aaaaaa;
	border: solid 1px #aaaaaa;
	}
*/

input[type=radio]:checked + .radio::before{
	width:11px;
	height:11px;
	content:"";
	display:block;
	position: absolute;
	top: 7px;
	left: 4px;
	border-radius:7px;
	z-index: 10;
	background-color:#787878;
	}

/*
.fm--select{
	padding: 0px 30px 0px 0px;	
	border: solid 1px #c8c8c8;
	border-radius: 5px;
	overflow: hidden;
	display: inline-block;
	background-color: #fff;
	background-image:url(../img/arrow_select.png);
	background-repeat:no-repeat;
	background-position:96% 12px;
	position:relative;
	top:5px;
	box-sizing: border-box;
	}

select{
	width:150%;
	outline: none;
	box-sizing: border-box;
	background:none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-ms-appearance: none; 	
	appearance: none;
	border:0;
	font-size:1em;
	height: 2em; 
	line-height: 2em;
	padding-left:5px;
	}
*/



/* ================================================================================ */
/*  2.COMMON STYLE                                                                  */  
/* ================================================================================ */

/* -------------------------------------------------------------------------------- */
/*  2-1.MARGIN                                                                      */  
/* -------------------------------------------------------------------------------- */

.mg--Xsmall{margin-bottom:15px;}
.mg--small{margin-bottom:25px;}
.mg--default{margin-bottom:50px;}
.mg--large{margin-bottom:80px;}
.mg--Xlarge{margin-bottom:140px;}

.mg5{margin-bottom:5px;}
.mg10{margin-bottom:10px;}
.mg15{margin-bottom:15px;}
.mg20{margin-bottom:20px;}
.mg30{margin-bottom:30px;}
.mg40{margin-bottom:40px;}
.mg50{margin-bottom:50px;}
.mg60{margin-bottom:60px;}
.mg70{margin-bottom:70px;}

.mgT10{margin-top:10px;}
.mgT15{margin-top:15px;}

.mgR10{margin-right:10px;}



/* -------------------------------------------------------------------------------- */
/*  2-2.POSITION                                                                    */  
/* -------------------------------------------------------------------------------- */

.alignright{text-align:right;}
.alignleft{text-align:left;}
.aligncenter{text-align:center;}

.top{vertical-align:top;}

.ab{position:absolute;}
.rel{position:relative;}

.posi--right , .posi--bottom , .posi--top{position:absolute;}
.posi--right{right:0;}
.posi--bottom{bottom:0}
.posi--top{top:0}

.LEFT{float:left;}
.RIGHT{float:right;}


/* -------------------------------------------------------------------------------- */
/*  2-3.TEXT                                                                        */  
/* -------------------------------------------------------------------------------- */

.text--small{font-size:1.2rem;}
.text--default{font-size:1.4rem;}
.text--large{font-size:1.6rem;}
.text--Xlarge{font-size:1.8rem;}
.text--Xlarge--line{font-size:1.8rem;text-decoration: underline;}
.text--form{font-size:2.2rem;}

.bold{font-weight:bold;}
.normal{font-weight: normal;}
.under{text-decoration:underline;}

.text--red{color:#f00;}
.text--blue{color:#1a5cbe;} 
.text--logo{color:#131682;}
.text--gray{color:#585858;}


@media screen and (max-width: 640px) {
	.text--large{font-size:1.5rem;}
	.text--form{font-size:1.7rem;}
}


/* -------------------------------------------------------------------------------- */
/*  2-4.ANCHOR                                                                      */  
/* -------------------------------------------------------------------------------- */

.anc{
	margin-top:-150px !important;
	padding-top:150px !important;
	}

@media screen and (max-width: 640px) {
	.anc{
		margin-top: -65px !important;
		padding-top: 65px !important;
	}
}


/* ================================================================================ */
/*  3.COMMON CLEAR                                                                  */  
/* ================================================================================ */

.clear {
	clear:both;
	}

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