@charset "utf-8";

/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
	height: 100%;
}

/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	height: 100%;
	min-width: 980px;
	color: #000000;
	font-family: 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 14px;
	line-height: 1.8;
}
img{
	max-width: 100%;
	height: auto;
	border-style:none;
}

/* **************************************************************************
   body  -- Break Point --
*************************************************************************** */

@media screen and (max-width:1200px){

	body{
		min-width: 320px;
	}

}

/*--------------------------------------------------------------------------
   base link
--------------------------------------------------------------------------*/
a{
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transition         : 0.2s ease-out;
	-webkit-transition : 0.2s ease-out;
	-moz-transition    : 0.2s ease-out;
	cursor             : pointer;
}
a:link,
a:visited{
	color: #000000;
	text-decoration: none;
}
a:hover{
	color: #000000;
	text-decoration:underline;
	outline: none;
}
a:active{
	outline: none;
}
a.hover{
	text-decoration:none;
}
a.hover:hover{
	text-decoration:none;
	color: #295989;
}

/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Stage{
	width:100%;
	position:relative;
	z-index:1;
}

/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
@media screen and (min-width:721px){
	#Header{
		position:relative;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		padding: 10px 0;
		background: #f55b15;
		min-height:40px;
	}
}
@media screen and (max-width:720px){
	#Header{
		position:relative;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		padding:0;
		background: #f55b15;
		min-height:35px;
	}
}

/* ロゴ
-----------------------------------------------------------------*/
@media screen and (min-width:721px){
	#Header #Top{
		width: 38px;
		position:absolute;
		right:15px;
		top:8px;
	}
}
@media screen and (max-width:720px){
	#Header #Top{
		/*background:#f55b15;*/
		background:rgba(245,91,21,1);
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:5px 0;
		text-align:center;
		margin:0;
		z-index:4000;
		/*border-bottom:1px solid #ff8148;*/
	}
	#Header #Top img{
		width:18px;
	}
}

/* ニュース
-----------------------------------------------------------------*/
#Header #News ul li a{color:#fff;}
@media screen and (min-width:721px){
	#Header #News{
		padding-left:15px;
	}
	#Header #News ul li{
		width:100%;
		background:url(../images/new.png) no-repeat scroll 0 0;
		background-size: 48px 20px;
		-moz-background-size: 48px 20px;
		-webkit-background-size: 48px 20px;
		-o-background-size: 48px 20px;
		-ms-background-size: 48px 20px;
		padding-left:60px;
		padding-right:80px;
		font-size:11px;
		color:#fff;
		_background:url(../images/new.gif) no-repeat scroll 0 0;
		*background:url(../images/new.gif) no-repeat scroll 0 0;
		background:url(../images/new.gif) no-repeat scroll 0 0\9;
	}
}
@media screen and (max-width:720px){
	#Header #News{
		padding:10px 15px;
		width:100%;
		background:#f55b15;
		position:relative;
		margin-top:35px;
	}
	#Header #News ul li{
		width:100%;
		background:url(../images/new.png) no-repeat scroll 0 0;
		background-size: 45px 19px;
		-moz-background-size: 45px 19px;
		-webkit-background-size: 45px 19px;
		-o-background-size: 45px 19px;
		-ms-background-size: 45px 19px;
		padding-left:55px;
		padding-right:5px;
		font-size:10px;
		color:#fff;
		_background:url(../images/new.gif) no-repeat scroll 0 0;
		*background:url(../images/new.gif) no-repeat scroll 0 0;
		background:url(../images/new.gif) no-repeat scroll 0 0\9;
	}
}


/*--------------------------------------------------------------------------
   .main
---------------------------------------------------------------------------*/
.main{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/*--------------------------------------------------------------------------
   .aside
---------------------------------------------------------------------------*/
.Banner{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	padding: 0 10px;
	line-height: 0;
	overflow: auto;
}
.Banner li{
	margin-left: 6px;
	width: 100%;
	max-width: 236px;
	min-width: 100px;
}
.Banner li:first-child{
	margin-left: 0px;
}
.Banner li img{
	margin-bottom: 3px;
}
.Banner p{
	line-height: 1.8;
}
@media screen and (max-width:740px){
	.Banner{
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.Banner li{
		margin: 10px 0;
	}
}
/* 見出し
-----------------------------------------------------------------*/
h3{
	height:30px;
	margin-bottom: 30px;
	text-align: center;
	}

@media screen and (min-width:740px){
	h3{
		height:36px;
	}
}
@media screen and (max-width:540px){
	h3{
		height:26px;
		margin-bottom: 10px;
	}
}
h3>img{
	height: inherit;
}
h4{
	color: #285789;
}

/* .Bold
-----------------------------------------------------------------*/
.Bold{
	font-weight: bold;
	font-size: 18px;
}
@media screen and (min-width:740px){
	.Bold{
		font-size: 20px;
	}
}
@media screen and (max-width:540px){
	.Bold{
		font-size: 15px;
	}
}

/* .Border
-----------------------------------------------------------------*/
.Border{
	border: solid 3px #285789;
	border-radius: 5px;		/* CSS3pre */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome?p */
	-moz-border-radius: 5px;	/* Firefox */
}
@media screen and (max-width:540px){
	.Border{
	border: solid 2px #285789;
	}
}

/*--------------------------------------------------------------------------
   .sec
---------------------------------------------------------------------------*/
.Sec{
	width:100%;
	position:relative;
	clear:both;
}
.Sec .ServiceInner .Col3 a{
	display:block;
}
.BgWhite{
	background:#ffffff;
	padding: 45px 0;
}
.BgGray{
	background:#eff3f5;
	padding: 45px 0;
}
@media screen and (min-width:740px){
	.BgWhite{
		padding: 80px 0;
}
	.BgGray{
		padding: 80px 0;
}
}
@media screen and (max-width:320px){
	.BgWhite{
		padding: 30px 0;
}
	.BgGray{
		padding: 30px 0;
}
}

/* サービス
-----------------------------------------------------------------*/
.cf{
	display: flex;
	justify-content: space-between;
}
.ServiceInner{
	width: 100%;
	max-width: 1000px;
	margin:0 auto;
	padding: 0 15px;
}
.ServiceInner .Col3{
	width: 100%;
	max-width: 300px;
	margin: 0 0 30px 25px;
	text-align:center;
}
.ServiceInner .Col3:first-child{
	margin-left:0;
}
.Col3 img{
	width: 100%;
	max-width: 300px;
}
.Col3List li{
	border-bottom:1px solid #ccc;
}
.Col3List li:last-child{
	border-bottom:0;
}
.Col3List li a{
	padding: 10px 5px;
}
.Col3List li a:hover {
	background: #285789;
	color: #FFF;
	text-decoration: none;
}
.Col3 h4{
	margin-bottom: 6px;
}
.usersupport{
	background: url(../images/userSupport.png) center no-repeat;
	background-size: contain;
	width: 630px;
	max-width: 100%;
	height: 70px;
	max-height: 100%;
	line-height: 1.8em;	
	margin: 0 auto;
	color:#fff;
	text-align: center;
}
.usersupport a{
	display: table-cell;
	color:#000;
	width: inherit;
	height: inherit;
	vertical-align: middle
}
.usersupport a:hover{
	color: #fff;
	text-decoration: none;
}
.usersupport:hover{
	background-color: #285789;
	transition         : 0.2s ease-out;
	-webkit-transition : 0.2s ease-out;
	-moz-transition    : 0.2s ease-out;
}
@media screen and (min-width:740px){
	.usersupport{
		height: 94px;
		line-height: 2em;
	}
}
@media screen and (max-width:640px){
	.ServiceInner{
		width: 100%;
	}
	.ServiceInner .Col3{
		width: 85%;
		margin: 0 auto 25px;
	}
	.ServiceInner .cf{
		flex-direction: column;
	}
	.ServiceInner .Col3:first-child{
		margin: 0 auto 25px;
	}
}
@media screen and (max-width:320px){
	.ServiceInner{
		width: 100%;
	}
	.ServiceInner .Col3{
		min-width: 230px;
		float: none;
		margin: 0 auto 25px;
	}
	.ServiceInner .Col3:first-child{
		margin: 0 auto 25px;
	}
	.usersupport{
		height: 54px;
		line-height: 1.6em;
		border: solid 2px #285789;
	}
}

/* ニュース
-----------------------------------------------------------------*/
.NewsInner{
	width: 100%;
	max-width:740px;
	margin:0 auto;
	padding: 10px;
}
.NewsList li{
	border-bottom:1px solid #ccc;
	padding: 15px 20px;
	line-height: normal;
}
.NewsList li a{
	display: block;
	overflow: auto;
}
.NewsList a:hover{
	transition         : 0.1s ease-out;
	-webkit-transition : 0.1s ease-out;
	-moz-transition    : 0.1s ease-out;
}
.NewsList a:hover .Info{
	background-color: #285789;
	color: #fff;
	transition         : 0.1s ease-out;
	-webkit-transition : 0.1s ease-out;
	-moz-transition    : 0.1s ease-out;
}
.Info{
	float: left;
	border: 2px solid #285789;
	border-radius: 5px;
	padding: 2px 10px 0;
	line-height: normal;
}
.Detail{
	overflow: auto;
	padding-left: 50px;
}
@media screen and (max-width:540px){
	.NewsList li{
		padding: 10px 10px;
	}
	.Detail{
		padding-left: 30px;
		line-height: normal;
	}
}
@media screen and (max-width:320px){
	.NewsList li{
		padding: 8px 8px;
	}
	.Detail{
		padding-left: 20px;
	}
}

/*--------------------------------------------------------------------------
   電話番号
---------------------------------------------------------------------------*/
.Tell{
	text-align: center;
}
.TellInner{
	display: -webkit-inline-flex;
	display: inline-flex;
	justify-content: -webkit-center;
	justify-content: center;
	-webkit-align-items:center;
	align-items: center;
	text-align: center;
}
/*--------------------------------------------------------------------------
   #Nav
---------------------------------------------------------------------------*/
#Nav{
	width:100%;
	background:#000;
	position:relative;
	color:#fff;
	padding: 65px 0;
}
#Nav a{
	display:block;
	color:#fff;
	text-decoration:none;
}
#Nav a:hover{
	text-decoration:underline;
}
@media screen and (min-width:890px){
	#Nav #NavInner{width:830px; margin:0 auto;}
	#Nav #NavInner .NavList:first-child{width:175px; float:left; margin-left:0px;}
	#Nav #NavInner .NavList{width:175px; float:left; margin-left:40px;}
	#Nav #NavInner .NavList li a{font-size:14px; margin-bottom:12px;}
	#Nav #NavInner .NavList li .NavInnerList li a{
		font-size:12px;
		background:url(../images/arw02.png) no-repeat scroll 0 8px;
		background-size: 4px 5px;
		-moz-background-size: 4px 5px;
		-webkit-background-size: 4px 5px;
		-o-background-size: 4px 5px;
		-ms-background-size: 4px 5px;
		padding-left:14px;
		margin-bottom:2px;
		_background:url(../images/arw02.gif) no-repeat scroll 0 8px;
		*background:url(../images/arw02.gif) no-repeat scroll 0 8px;
		background:url(../images/arw02.gif) no-repeat scroll 0 8px\9;
	}
	#Nav #NavInner .NavList li.Other a{
		background:url(../images/arw01.png) no-repeat scroll 0 4px;
		background-size: 16px 16px;
		-moz-background-size: 16px 16px;
		-webkit-background-size: 16px 16px;
		-o-background-size: 16px 16px;
		-ms-background-size: 16px 16px;
		min-height:16px;
		padding-left:26px;
		_background:url(../images/arw01.gif) no-repeat scroll 0 4px;
		*background:url(../images/arw01.gif) no-repeat scroll 0 4px;
		background:url(../images/arw01.gif) no-repeat scroll 0 4px\9;
	}
}
@media screen and (max-width:889px){
	#Nav #NavInner{width:700px; margin:0 auto;}
	#Nav #NavInner .NavList:first-child{width:152px; float:left; margin-left:0px;}
	#Nav #NavInner .NavList{width:152px; float:left; margin-left:30px;}
	#Nav #NavInner .NavList li a{font-size:12px; margin-bottom:12px;}
	#Nav #NavInner .NavList li .NavInnerList li a{
		font-size:11px;
		background:url(../images/arw02.png) no-repeat scroll 0 6px;
		background-size: 4px 5px;
		-moz-background-size: 4px 5px;
		-webkit-background-size: 4px 5px;
		-o-background-size: 4px 5px;
		-ms-background-size: 4px 5px;
		padding-left:14px;
		margin-bottom:2px;
		_background:url(../images/arw02.gif) no-repeat scroll 0 6px;
		*background:url(../images/arw02.gif) no-repeat scroll 0 6px;
		background:url(../images/arw02.gif) no-repeat scroll 0 6px\9;
	}
	#Nav #NavInner .NavList li.Other a{
		background:url(../images/arw01.png) no-repeat scroll 0 3px;
		background-size: 16px 16px;
		-moz-background-size: 16px 16px;
		-webkit-background-size: 16px 16px;
		-o-background-size: 16px 16px;
		-ms-background-size: 16px 16px;
		min-height:16px;
		padding-left:26px;
		_background:url(../images/arw01.gif) no-repeat scroll 0 3px;
		*background:url(../images/arw01.gif) no-repeat scroll 0 3px;
		background:url(../images/arw01.gif) no-repeat scroll 0 3px\9;
	}
}
@media screen and (max-width:740px){
	#Nav #NavInner{width:500px; margin:0 auto;}
	#Nav #NavInner .NavList:first-child{width:110px; float:left; margin-left:0px;}
	#Nav #NavInner .NavList{width:110px; float:left; margin-left:20px;}
	#Nav #NavInner .NavList li a{font-size:12px; margin-bottom:12px;}
	#Nav #NavInner .NavList li .NavInnerList li a{
		font-size:11px;
		background:url(../images/arw02.png) no-repeat scroll 0 6px;
		background-size: 4px 5px;
		-moz-background-size: 4px 5px;
		-webkit-background-size: 4px 5px;
		-o-background-size: 4px 5px;
		-ms-background-size: 4px 5px;
		padding-left:14px;
		margin-bottom:2px;
		_background:url(../images/arw02.png) no-repeat scroll 0 6px;
		*background:url(../images/arw02.png) no-repeat scroll 0 6px;
		background:url(../images/arw02.png) no-repeat scroll 0 6px\9;
	}
	#Nav #NavInner .NavList li.Other a{
		background:url(../images/arw01.png) no-repeat scroll 0 3px;
		background-size: 16px 16px;
		-moz-background-size: 16px 16px;
		-webkit-background-size: 16px 16px;
		-o-background-size: 16px 16px;
		-ms-background-size: 16px 16px;
		min-height:16px;
		padding-left:26px;
		_background:url(../images/arw01.gif) no-repeat scroll 0 3px;
		*background:url(../images/arw01.gif) no-repeat scroll 0 3px;
		background:url(../images/arw01.gif) no-repeat scroll 0 3px\9;
	}
}
@media screen and (max-width:540px){
	#Nav{
		padding: 45px 0;
	}
	#Nav #NavInner{width:auto; margin:0 15px;}
	#Nav #NavInner .NavList:first-child{width:50%; float:left; margin-left:0px;}
	#Nav #NavInner .NavList{width:50%; float:left; margin-left:0px;}
	#Nav #NavInner .NavList li a{font-size:12px; margin-bottom:12px;}
	#Nav #NavInner .NavList li .NavInnerList li a{
		font-size:10px;
		background:url(../images/arw02.png) no-repeat scroll 0 6px;
		background-size: 4px 5px;
		-moz-background-size: 4px 5px;
		-webkit-background-size: 4px 5px;
		-o-background-size: 4px 5px;
		-ms-background-size: 4px 5px;
		padding-left:14px;
		margin-bottom:2px;
	}
	#Nav #NavInner .NavList li.Other a{
		background:url(../images/arw01.png) no-repeat scroll 0 2px;
		background-size: 16px 16px;
		-moz-background-size: 16px 16px;
		-webkit-background-size: 16px 16px;
		-o-background-size: 16px 16px;
		-ms-background-size: 16px 16px;
		min-height:16px;
		padding-left:26px;
	}
}


/*--------------------------------------------------------------------------
 フッター
---------------------------------------------------------------------------*/
.isms{
	float: right;
	position: relative;
	height: 80px;
	background-color: #fff;
	border-radius: 5px;
	padding: 2px;
	margin-right: 15px;
}
.privacymark{
	float: right;
	position: relative;
	width: 80px;
	padding: 2px;
	background-color: #fff;
	border-radius: 5px;
	margin-right: 10px;
}
.MarkInner{
	height: 80px;
	width: 100%;
	max-width: 830px;
	margin: 30px auto 0;
	line-height: 0;
}
.MarkInner img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
#Footer{width:100%; position:relative; background:#f55b15; text-align:center;}
@media screen and (min-width:741px){
	#FooterInner{
		padding:40px 0 40px 0;
	}
	#FooterInner img{
		width:242px;
	}
	.privacymark{
		width:80px;
		height:80px;
	}

}
@media screen and (max-width:740px){
	#FooterInner{
		padding:15px 0;
	}
	#FooterInner img{
		width:215px;
	}
}
@media screen and (max-width:540px){
	.privacymark, .isms{
		height: 54px;
		width: auto;
	}
	.MarkInner img{
		height: 50px;
	}
	.MarkInner{
		height: 54px;
		margin-top: 15px;
	}
}

/*--------------------------------------------------------------------------
   Other
---------------------------------------------------------------------------*/
@media screen and (min-width:741px){
	#btnTop{ position: fixed; z-index:3000; bottom:20px; right:20px;}
}
@media screen and (max-width:740px){
	#btnTop{ position: fixed; z-index:3000; bottom:15px; right:15px;}
}
#btnTop a img{ width:55px;}

/* -----------------------------------------------------------------------------
	.loading
----------------------------------------------------------------------------- */
.loadingWrap{
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index:9000;
}
@media screen and (min-width:541px){
	.loadingWrap img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -24px;
		margin-left: -24px;
		z-index:9001;
		width:48px;
	}
}
@media screen and (max-width:540px){
	.loadingWrap img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		z-index:9001;
		width:24px;
	}
}

/* clearfix
-----------------------------------------------------------------*/
.cf:before,
.cf:after{
	content: "";
	display: table;
}
.cf:after{
	clear: both;
}
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
} 

/* box-model
-----------------------------------------------------------------*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*--------------------------------------------------------------------------
   汎用スタイル
---------------------------------------------------------------------------*/

/* テキスト
-----------------------------------------------------------------*/
.em{
	font-weight: bold;
}

/* 配置
-----------------------------------------------------------------*/
.t-ct{
	text-align: center;
}
.t-lt{
	text-align: left;
}
.t-rt{
	text-align: right;
}

/* リンクアイコン
-----------------------------------------------------------------*/
.link-icon{
	margin: 0 7px;
	vertical-align: baseline;
}