@charset "utf-8";
/* CSS Document */

/* reset
---------------------------------------------------------- */ 
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i, dl, dt, dd, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	list-style: none;
	vertical-align:baseline;
	background:transparent;
	
}

body{
	padding:0;
	margin:0;
	line-height: 1.6;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, sans-serif;
	color: #2e2e2e;
	font-size: 14px;
	overflow-x:auto;
	font-weight: normal;
	-webkit-text-size-adjust: 100%;
	

}
a {
	text-decoration: none;
}

img {
	display: block;
}
/* common
---------------------------------------------------------- */ 
#wrapper {
	width: 100%;
	overflow-x:auto;
}
.container {
	width: 1200px;
	margin: 0 auto;
	overflow-x:auto;
}

/* header
---------------------------------------------------------- */ 
header .headerIn {
	padding: 5px 0;
}
header .headerIn .headerlogo img{
	width: 147px;
	padding-top:10px;
}
header .headerIn .headerlogo {
	float: left;
}
header .headerIn .right {
	float: right;
	background:url(../img/common/tel.png) no-repeat 0 50%;
}
header .headerIn .right a {
	padding-left:25px;
	display: block;
	color: #19305c;
	font-size: 24px;
	font-weight:bold;
	letter-spacing: 1px;
}
header .headerIn .menu_sp{
	display: none;
}
/* gnav
---------------------------------------------------------- */ 
#gnav {
	padding: 20px 0 12px 0;
	border-bottom: 5px solid #dbdbdb;
	height: 26px;
	font-size: 18px;
}
#gnav ul li{
	width: 200px;
	float: left;
	background: url(../img/common/ico_line.png) left top 6px no-repeat;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	transition: all .6s;
	border-bottom: 5px solid transparent;
}
#gnav ul li:last-child {
	background: url(../img/common/ico_line.png) left top 6px no-repeat, url(../img/common/ico_line.png) right top 6px no-repeat;
}
#gnav ul li a{
	color: #2e2e2e;
	text-align: center;
	display: block;
	padding-bottom: 10px;
}
#gnav ul li:hover,
.page_home #gnav .navHome,
.page_product #gnav .navProduct,
.page_business #gnav .navBusiness,
.page_message #gnav .navMessage,
.page_contact #gnav .navContact
{
	border-bottom: 5px solid #019cdf;
	z-index: 99999;
}



/* headings
---------------------------------------------------------- */ 
.tit_top {
	font-size: 14px;
	color: #aaa;
}
.tit_top a {
	color: #707070;
    text-decoration: none;
}
.tit_top a:visited,.tit_top a:hover{
    text-decoration: underline 1px;   
}
.tit_sub {
	border-left: 6px solid #003759;
	font-size: 22px;
	padding: 5px 0 5px 25px;
	margin: 20px 0;
	font-weight: normal;
}
.tit_sec{
	color: #003759;
	font-size: 20px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	font-weight: normal;
}
.tit_topic{
	font-weight: normal;
}
.tit_topic02 {
	padding-bottom: 10px;
	font-size: 16px;
}
/* topic path
---------------------------------------------------------- */ 
#topic_path{
	font-size: 12px;
	margin: 20px 0;
}
#topic_path ul li:first-child{
	background: none;
	padding: 0 10px 0 0;
}
#topic_path ul li{
	display: inline;
	color: #333;
	padding: 0 15px;
	background: url(../img/common/ico_arrow02.png) left center no-repeat;
}
#topic_path ul li a{
	text-decoration: underline;
	color: #333;
}
/* aside
---------------------------------------------------------- */ 
aside{
	width: 240px;
	float: right;
}
aside img{ padding-bottom: 5px; }
/* main
---------------------------------------------------------- */ 
main {
	float: left;
	margin-right: 10px;
	width: 950px;
}
/* case
---------------------------------------------------------- */ 
.case {
	margin-bottom: 60px;
	width: 97%;
}
.case:last-child {
	margin-bottom: 0;
}
/* list
---------------------------------------------------------- */ 
.list_style01{
	padding-bottom: 10px;
}
dd .list_style01  {
	margin-left: 58px
}
.list_style01 li {
	background: url(../img/common/ico_square.png) left top 6px no-repeat;
	padding: 0 0 0 20px;
	display: block;
	margin-bottom: 10px;
}
.list_style01 li:first-child {
	margin-top: 10px;
}
.list_style01 li:last-child{
	margin-bottom: 0;
}
.list_style01 span {
	font-weight: bold;
	padding-bottom: 10px;
	display: inline-block;
}
.list_style02 li .list_style01 li {
	background: url(../img/common/ico_square.png) left center no-repeat;
	padding: 0 0 0 20px;
	display: block;
	margin-bottom: 10px;
}
.list_style02 li .list_style01 li:last-child{
	margin-bottom: 0;
}
.list_style02 li .list_style01 span {
	font-weight: bold;
	padding-bottom: 10px;
	display: inline-block;
}
.list_style02 li{
	padding-bottom: 20px;
	display: table;
}
.list_style02 li:last-child{
	padding-bottom: 0;
}
.list_style02 li span{
	display: table-cell;
	padding-right: 5px;
}
/* table
---------------------------------------------------------- */ 
.tb_style01 {
	border-spacing: 0;
	background: #fff;
	width: 100%;
	border-collapse: collapse;
}
.tb_style01 th, .tb_style01 td {
	padding: 14px 15px;
	vertical-align: middle;
	border: 1px solid #dbdbdb;
}
.tb_style01 th {
	background: #f4f4f4;
	width: 187px;
	color: #010101;
	text-align: center;
}
.tb_style01 td {
	word-break: break-all;
}
.tb_style01 tr td p:first-child{
	margin-top: 0;
	margin-bottom: 20px;
}
.tb_style01 td p{
	margin-top: 20px;
}
.tb_style01 td a {
	color: #010101;
	text-decoration: underline;
}
.tb_style01 td a:hover {
	text-decoration: none;
}
/* pagetop
---------------------------------------------------------- */ 
.cd-top {
	position: fixed;
	right: 20px;
	bottom: 80px;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: all 0.3s linear;
	z-index: 2;
}
.cd-top span{
	display: block;
}
.cd-top.cd-is-visible {
	visibility: visible;
	opacity: 1;
}
/* footer
---------------------------------------------------------- */ 
footer {
	background-color: #d5d4d4;
	margin-top: 100px;
	position: relative;
}
.footerLinks {
	padding: 30px 0;
	overflow: hidden;
}
.footerLinks ul li {
	padding: 0 28px;
	float: left;
	border-right: 1px solid rgba(50, 50, 50, .50);
}
.footerLinks ul li a{
	padding-top: 7px;
	font-size: 16px;
	color: #323232;
	font-weight: bold;
}
.footerLinks ul li a:hover {
	text-decoration: underline;
}
#pagetop_sp{
	display: none;
}
.copyright {
	text-align: center;
	font-size: 14px;
	color: #fff;
	background-color: #000;
	padding: 12px 0;
	font-weight: normal;
}
#backToPC a{
	text-align: center;
	position: absolute;
	top: 20px;
	right: 365px;
	color: #959595;
	font-weight: bold;
	padding: 10px 40px 10px 45px;
	box-sizing: border-box;
	width: 220px;
	margin: 0 auto;
	border: 1px solid #959595;
	font-size: 100%;
	border-radius: 20px;
	background: url(../img/common/ico_sp.png) left 15px center no-repeat, url(../img/common/ico_arrow.png) right 15px center no-repeat ,#fff;
	background-size: 20px, 6px;
}

.contact-block{ width:840px; border:5px solid #e9e9e9; margin: 0 auto; overflow:hidden;}
.contact-block .inner{ width:400px; float:left; padding:15px 30px;}
.contact-form-block{ width:300px; float:left; padding:15px; text-align:center;}
.contact-form-block a {
	background-color: #083863;
	border-radius: 8px;
	padding: 8px 30px;
	display: block;
	color: #fff;
	box-shadow: 0px 2px 0px rgba(1, 156, 223, 1);
	font-size: 20px;
	letter-spacing: 1px;
	transition: 0.5s ;
	box-shadow: 0px 4px 5px 0 #333;
}
.contact-form-block a:hover{
	opacity: 0.7 ;
	box-shadow:none;
	transform: translate3d(0, 5px, 0);
}

.contact-form-block2{
	width: 600px;
	margin: 0 auto;
	float: none;
}
.contact-form-block2 a{
    font-size: 32px;
}




@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #fcb900;
    overflow: hidden;
    border-radius:0.25rem;
    font-weight: bold;
}
.shiny-btn::before{
	box-sizing: border-box; 
}
.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    box-sizing: border-box; 
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.shiny-btn:hover{
	opacity: .8;
	box-shadow: 0 0 0 0.2rem rgba(171,184,195,.25);
}


/* ----------------------------------------------------------------------
 font-size - フォントサイズ
---------------------------------------------------------------------- */
.text70{font-size:70%}      /* フォントサイズ70% */
.text80{font-size:80%}
.text90{font-size:90%}
.text100{font-size:100%}
.text110{font-size:110%}
.text120{font-size:120%}
.text130{font-size:130%}
.text140{font-size:140%}
.text150{font-size:150%}
.text160{font-size:160%}
.text170{font-size:170%}
.text180{font-size:180%}
.text190{font-size:190%}
.text200{font-size:200%}
.text210{font-size:210%}
.text220{font-size:220%}
.u{text-decoration:underline}     /* 下線 */
.del{text-decoration:line-throug} /* 打ち消し線 */
.b{ font-weight:bold}
/* ----------------------------------------------------------------------
 font-color - フォントカラー
---------------------------------------------------------------------- */
.red{color:red}     /* 赤色 */
.blue{color:#2ca9e1}    /* 青色 */
.green{color:#82ae46}   /* 緑色 */
.orange{color:#ff7d00}    /* 橙色 */
.yellow{color:#fff000}    /* 黄色 */
.pink{color:#ff0084}    /* ピンク */
.gray{color:#999999}    /* グレー */

/* ----------------------------------------------------------------------
 background-color - 背景色
---------------------------------------------------------------------- */
.bg-yellow{padding:2px;background-color:#ff0} /* 黄色の文字背景 */
.bg-blue{padding:2px;background-color:#4ab0f5}  /* 青色の文字背景 */
.bg-lightblue{background-color:#e9f4f5;}  /* ライト青色の文字背景 */
.bg-red{padding:2px;background-color:red} /* 赤色の文字背景 */

/* ----------------------------------------------------------------------
 text-align - 配置
---------------------------------------------------------------------- */
.align1{text-align:center !important} /* 中央寄せ */
.align2{text-align:right !important}  /* 右寄せ */
.align3{text-align:left !important} /* 左寄せ */

/* ----------------------------------------------------------------------
 float - 回り込み
---------------------------------------------------------------------- */
.r-flo{float:right;margin:10px} /* 右に回り込み */
.l-flo{float:left;margin:10px}  /* 左に回り込み */
.f-clear{clear:both}      /* 回り込みの解除 */


/* ----------------------------------------------------------------------
 margin - 要素の外側の余白
---------------------------------------------------------------------- */
.m0{margin:0 !important}    /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}   /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}   /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}  /* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}    /* margin-left0px を指定するクラス*/

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}

/* ----------------------------------------------------------------------
 padding - 要素の内側の余白
---------------------------------------------------------------------- */
.p0{padding:0 !important}   /* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}    /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}  /* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}   /* padding-left0px を指定するクラス */

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pt15{padding-top:15px !important}
.pt20{padding-top:20px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}

@media screen and (max-width:640px) { 
	body {
		font-size: 14px;
	}
	p {
		font-size: 100%;
	}
	.sp-none{ display:none;}
	#topic_path .container{
		width: 94%;
	}
	.contents .container{
		width: 94%;
	}
	.container {
		width: 100%
	}
	header .headerIn{
		padding: 5px 0;
	}
	header .headerIn .headerlogo {
		width: 182px;
		padding: 0 10px;
	}
	header .headerIn .headerlogo img {
		width: 80%;
	}
	header .headerIn .right {
		display: block;
		width:100%;
		text-align:center;
		background:none;
		padding-top:15px;
	}	
	header .headerIn .right a {
	padding-left:0;
	font-size: 34px;
	line-height:90%;
}
	header .headerIn .menu_sp{
		display: block;
		float: right;
		width: 95px;
		padding: 5px 10px 0 0px;
	}
	header .headerIn .menu_sp img{
		width: 100%
	}
	header .headerIn .menu_sp .menu_trigger {
		cursor: pointer;
	}
	#gnav {
		width: 100%;
		position: absolute;
		background: #2e2e2e;
		margin: 0;
		padding: 0px;
		height: auto;
		border-bottom: 0;
		display: none;
		z-index: 1;
	}
	#gnav ul li{
		float: none;
		border-bottom: 1px solid #616161 !important;
		height: auto;
		padding-bottom: 0;
		background: none;
		width: 100%;
	}
	#gnav ul li:last-child {
		background: none;
	}
	#gnav ul li a {
		text-align: left;
		padding: 10px;
		font-size: 80%;
		color: #fff; 
	}
	#gnav ul li:hover {
		border-bottom: 1px solid #959595;
	}
	#gnav ul li:hover a{
		text-decoration: underline;
	}
	.tit_top {
		width: 100%;
		font-size: 65%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 0 0 10px;
	}
	.tit_sub {
		width: 100%;
		font-size: 150%;
		border-left: 3px solid #2c5200;
	
		padding: 0 0 0 12px;
		box-sizing: border-box;
	}
	.tit_sec {
		font-size: 140%;
		width: 100%;
	}
	#pagetop {
		display: none;
	}
	footer {
		background-color: #fff;
		margin-top: 50px;
	}
	.footerLinks {
		padding: 0;
		border-top: 1px solid #959595;
	}
	.footerLinks ul li {
		padding: 10px 0;
		width: 50%;
		border-right: none;
		border-bottom: 1px solid #959595;
	}
	.footerLinks ul li:nth-child(odd){
		border-right: 1px solid #959595;
		width: 50%;
		box-sizing: border-box;
	}
	.footerLinks ul li a{
		padding: 0 0 0 25px;
		width: 100%;
		font-size: 80%;
		color: #959595;
		font-weight: bold;
		background: url(../img/common/ico_arrow.png) left 5px center no-repeat;
		background-size: 6px;
	}
	#pagetop_sp {
		display: block;
		background-color: #f0f0f0;
	}
	#pagetop_sp a{
		color: #959595;
		text-align: center;
		font-weight: bold;
		display: block;
		width: 100%;
		padding: 25px 0 10px 0;
		font-size: 80%;
		background: url(../img/common/ico_arrowUp.png) top 15px center no-repeat;
		background-size: 10px;
	}
	#backToPC {
		display: block;
		text-align: center;
		margin: 30px 0;
	}
	#backToPC a{
		text-align: center;
		position: static;
		color: #959595;
		font-weight: bold;
		padding: 10px 40px 10px 45px;
		box-sizing: border-box;
		width: 220px;
		margin: 0 auto;
		border: 1px solid #959595;
		font-size: 100%;
		border-radius: 20px;
		background: url(../img/common/ico_pc.png) left 15px center no-repeat, url(../img/common/ico_arrow.png) right 15px center no-repeat;
		background-size: 20px, 6px;
	}
	.copyright{
		font-size: 80%;
		padding: 10px 20px;
	}
	main{
		width: 100%;
		float: none;
		margin: 0;
	}
	aside {
		width: 100%;
		float: none;
		margin-top: 20px;
	}
	.tb_style01 th {
		width: 120px;
	}
	.tb_style01 th, .tb_style01 td {
		font-size: 100%;
	}
	.case {
		margin-bottom: 30px;
	}
	body.isMobile {
		padding-top: 50px;
	}
	.contact-block{ width:96%; border:5px solid #e9e9e9; margin: 0 auto; overflow:hidden;}
.contact-block .inner{ width:100%; float:none; padding:15px 30px;}
.contact-form-block{ width:96%; float:none; padding:5px; text-align:center;}
.contact-form-block a {
	padding: 8px 5x;
	font-size: 18px;
}
}

@media screen and (min-width:768px) {
	#gnav {
		display: block!important;
	}
	
	#vpswitch {
		display: none;
	}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
	#backToPC {
		display: none;
	}
 }
@media only screen and (min-device-width: 320px) and (max-device-width: 768px){
	#vpswitch {
		display: block;
	}
}