@charset "utf-8";

/* TOP CSS */

.pc-none
{
	display:block;
}

#toggle
{
	position:absolute;
	top:0;
	right:4%;
}

#toggle img
{
	width:40px;
}

.w
{
	padding:0 4%;}

#menu
{
	display:none;}
	
header nav ul
{
	background:#efefef;
	margin-top:10px;}

header nav ul li {
    display: block;
    width: 50%;
    padding: 0 1%;
    float: left;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

header nav ul li a
{
    display: block;
    font-size: 14px;
    text-shadow: 0px 1px 0px #fff;
    width: 100%;
    color: #494984;
    text-align: center;
    border: none;
    line-height: 45px;
}
/* ------------ base ------------*/

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, sans-serif;
	text-align:left;
	border-top:#000099 solid 3px;
	color:#313131;
	font-size:13px;
	line-height:1.8;
	width:100%;
	overflow-x:hidden;
}

.bottom50
{
	margin-bottom:30px!important;
}

img
{
	max-width:100%!important;
	height:auto;

}

.sp-none
{
	display:none!important;
}



.wrapper
{
	width:100%;
	margin:0 auto;
	clear:both;
}


.left
{
	float:left;
}

.right
{
	float:right;
}


.img-right
{
	float:none;
	margin:0;
	text-align:center;
}

.img-left
{
	float:none;
	margin:0;
	text-align:center;
}

.text-center img
{
	width:100%;}

.big
{
	font-size:35px;
	font-weight:bold;
}

.col3
{
	width:33%;
	float:left;
	padding:0 1% 10px;
}

.col3 img
{
	width:100%;}

.border-d
{
	border-top:1px dashed #ddd;
	padding:20px 0;
}

.border-d-b
{
	border-bottom:1px dashed #ddd;
}

.border-s-r
{
	border-right:solid 1px #ddd;}

.bg-gray
{
	background:#f8f8f8;

}

.bg-gray2
{
	background:#f4f4f4;

}

.bg-black
{
	background:#282828;
	color:#999;
}

.line0
{
	line-height:0;}


.brown
{
	color:#774e0f;
	font-size:12px;
	text-align:center;
}

.gray
{
	color:#999;}


.iframe-content {
  position: relative;
  width: 100%;
  padding: 75% 0 0 0;
}
.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------ header ------------*/

header
{
	padding:8px 4%;
	position:relative;
}

header h1
{
	font-size:15px;
	padding-top:8px;
	line-height:1.5;
}

header h1 span
{
	display:none;
}

header a.left{ display:block; color: #313131;}

header #logo img
{
	float:left;
	padding-right:6px;
	height:36px;
	width:auto;
	
}

header .left
{
	width:100%;
}

header #h-contact
{
	display:none;
}


header #h-contact .left
{
	width:348px;
	font-size:12px;
	color:#494984;
	line-height:1.2;
	text-align:right;
	padding-right:16px;
}

header #h-contact .right
{
	width:127px;
	margin-top:-17px;
}

header #h-contact #h-nav ul li
{
	float:right;
	margin-left:6px;
}

header #h-contact #h-nav ul li a
{
	display:block;
	background:url(../img/ico/arrow-r.png) no-repeat 8px 8px,#daf8ff;
	padding:4px 24px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}



/* ------------ banar ------------*/

#bg-sky
{
	background:url(../img/sky.jpg) repeat-x top left;
}

#banar
{
	width:100%;
	margin:0 auto;
	position:relative;
}

#banar nav ul li { display:none;}

#banar nav ul li.ex{ top:271px; left:102px;}
#banar nav ul li.cl{ top:472px; left:531px;}
#banar nav ul li.in{ top:283px; right:119px;}

/*sub*/

.sub #bg-sky
{
	background:url(../img/sky2.jpg) repeat-x top left;
}

.sub .wrapper2
{
	clear:both;
	width:100%;
	margin:0 auto;
	background:url(../img/town.jpg) bottom center no-repeat;
	background-size:auto 100%;
}

.sub #bg-sky h1
{
	font-size:24px;
	font-weight:bold;
	line-height:1.5;
	padding:20px 0;
	text-align:center;
	text-shadow:0 0 3px #777;
}

.sub #bg-sky h1 span
{
	display:block;
	font-size:14px;
}


/* ------------ main ------------*/

#g-nav
{
	display:none;
	border-top:3px solid #ddd;
	position:relative;
	margin-bottom:20px;
	padding:10px 4%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,eaeaea+100 */
background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top, #f2f2f2 0%, #eaeaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f2f2f2 0%,#eaeaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f2f2f2 0%,#eaeaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
}



#g-nav:after
{
	content:"";
	position:absolute;
	text-align:center;
	bottom:-11px;
	left:0px;
	display:block;
	width:100%;
	height:11px;
	background:url(../img/shadow.png) no-repeat top center;
}


#g-nav ul
{
	border-left:0;
	border-right:0;
}

#g-nav ul li
{
	float:left;
	width:33%;
}

#g-nav ul li a
{
	display:block;
	line-height:80px;
	width:100%;
	text-align:center;
}

#g-nav ul li img
{
	vertical-align:middle;
	pointer-events: none;
}


/*sub*/



.sub #g-nav
{
	display:none;
	margin-bottom:0px;
}

.sub .border-d-b
{
	margin-bottom:20px;
}

.sub #breadcrumb
{
	line-height:29px;
	font-size:12px;
	color:#999;
	padding:0 4%;
}

.sub #breadcrumb a
{	color:#999;}




/* ------------ contents ------------*/

.sub #contents a
{
	text-decoration:underline;
}

.sub #contents
{
	width:100%;
	float:none;
	padding:0 4%;
	font-size:14px;
}


.sub #contents h2
{
	background:#f8f8f8;
	border-top:3px solid #000099;
	font-size:20px;
	padding:8px 10px 5px;
	margin-bottom:15px;
}

.sub #contents .works h2
{
	margin-bottom:35px!important;
}

.sub #contents h2 span
{
	display:block;
	font-size:12px!important;
	font-weight:normal;
	position:absolute;
	top:auto;
	right:auto;
	left:0;
	bottom:-24px;
	font-size:13px;
	color:#777;
	background:#eee;
	padding:2px 2% 2px 10px;
	width:100%;
}

.sub #contents aside
{
	background: none;
	background:#fffae2;
	padding:10px 4%;
}

.sub #contents aside h3
{
	margin-bottom:-6px}

.sub #contents aside h3 img
{
	vertical-align:middle;
	display:none;
}

.sub #contents aside .img-right
{
	margin-top:0px;
	float:none;
	display:none;
}


.sub #contents #service-banar
{
	margin-left:0px;
}

.sub.service #contents h3
{
	font-size:24px;
	text-shadow:1px 1px 3px #999;
}

.sub.service #contents h3 span
{
	font-size:12px;
	font-weight:normal;
	display:inline-block;
	vertical-align:middle;
	padding-left:10px;
}

.sub.service #contents h3 span.first
{
	font-size:30px;
	font-weight:bold;
	color:#fff;
	display:inline-block;
}

.sub.service #contents .cl h3 span.first
{
	background:url(../img/ico/baloon-o.gif) no-repeat center center;
	padding-right:10px;
	padding-bottom:6px;
}

.sub.service #contents .ex h3 span.first
{
	background:url(../img/ico/baloon-b.gif) no-repeat center center;
	padding-right:10px;
	padding-bottom:6px;
}

.sub.service #contents .in h3 span.first
{
	background:url(../img/ico/baloon-p.gif) no-repeat center center;
	padding-right:10px;
	padding-bottom:6px;
}

.sub.service #contents .cl,
.sub.service #contents .ex,
.sub.service #contents .in
{
	padding-bottom:16px;
}






.sub.service #contents .big h3
{
	font-size:40px;
	display:none;
}

.sub.service #contents .big h3 span
{
	font-size:16px;
	padding-left:14px;
}

.sub.service #contents .big h3 span.first
{
	font-size:50px;
}

.sub.service #contents.cl  .big h3 span.first
{
	background:url(../img/ico/baloon-o-big.gif) no-repeat center center;
	padding-right:17px;
}

.sub.service #contents.ex  .big h3 span.first
{
	background:url(../img/ico/baloon-b-big.gif) no-repeat center center;
	padding-right:17px;
}

.sub.service #contents.in  .big h3 span.first
{
	background:url(../img/ico/baloon-p-big.gif) no-repeat center center;
	padding-right:17px;
}



.sub.service #contents.cl .big h3,
.sub.service #contents.ex .big h3,
.sub.service #contents.in .big h3
{
	background:none;
	background-size:auto;
}




.sub.service #contents h3.border-d-b
{
	font-size:20px;
	border-color:#000099;
	margin-bottom:10px;
	text-shadow:none;
}

.sub.service #contents h3.border-d-b .blue
{
	font-size:20px;
	font-weight:bold;
}

.sub.service #contents ul.cir li
{
	background:url(../img/ico/cir-b.gif) no-repeat 0px 9px;
	padding-left:16px;
}


.sub.service #contents .service-box
{
	padding-bottom:20px;
	border-bottom:1px dashed #000099;
	margin-bottom:20px;
	font-size:12px;
}


.sub.service #contents .service-box img
{
	width:100%;
}

.sub.service #contents .service-box h3
{
	text-shadow:none;
	font-size:20px;
	margin:0;
	line-height:1.5;
}

.sub.service #contents .merit-box
{
	width:50%;
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
	font-size:12px;
	padding:30px 12px;
	float:left;
}

.sub.service #contents .merit-box h3
{
	font-size:22px;
	font-weight:normal;
	color:#2983e5;
	text-align:center;
	text-shadow:none;
	margin-bottom:18px;
}

.sub.service #contents.cl .merit-box h3
{
	color:#ff9920;
}

.sub.service #contents.ex .merit-box h3
{
	
	color:#2983e5;
}

.sub.service #contents.in .merit-box h3
{
	color:#ff7bb9;
}


.sub #contents aside h3
{
	font-size:20px!important;
	line-height:28px!important;
	margin-bottom:8px!important;
	text-shadow:none!important;
}


.sub #contents .qa-box h3
{
	background:#f4fcff;
	border-bottom:1px dashed #ddd;
	border-top:3px solid #abc8e8;
	font-size:18px;
	padding:10px 20px;
	margin-bottom:10px;
}


.sub #contents .qa-box .ans
{
	padding-left:0px;
}

.sub #contents .qa-box .qa-middle
{
	display:none;
}

.sub #contents .qa-box .img-right
{
	display:none;}

.sub #contents .qa-box ul li a
{
	text-decoration:none;
}

.sub #contents.qa .border-d
{
	padding-bottom:6px;}


.sub #contents table th.topth
{
	background:#ddd;
	font-weight:bold;
}

.sub #contents .btn-clean a
{
	display:block;
	width:270px;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:normal;
	line-height:50px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background:#2983e5;
	text-decoration:none;
	font-size:16px;
}

.sub #contents .btn-ex a
{
	display:block;
	width:270px;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:normal;
	line-height:50px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background:#ff7bb9;
	text-decoration:none;
	font-size:16px;
}

.sub #contents .btn-in a
{
	display:block;
	width:270px;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:normal;
	line-height:50px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background:#ffb952;
	text-decoration:none;
	font-size:16px;
}


.sub #contents table.form
{
	width:100%;
	border:none;
}

.sub #contents table.form th,
.sub #contents table.form td
{
	background:none;
	font-size:16px;
	border:none;
	display:block;
}

.sub #contents table.form th
{
	font-weight:bold;
	vertical-align:top;
	padding-bottom:0;
	
	
}

.sub #contents table.form input[type="text"]
{
	width:100%;
}

.sub #contents table.form textarea
{
	width:100%;
}

.sub #contents table.form .btn
{
	border:none;
	width:100%;
	height:50px;
	font-weight:bold;
	text-align:center;
	color:#4e4e4e;
	font-size:18px;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffde97+0,ffc936+100 */
background: #ffde97; /* Old browsers */
background: -moz-linear-gradient(top, #ffde97 0%, #ffc936 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffde97 0%,#ffc936 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffde97 0%,#ffc936 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffde97', endColorstr='#ffc936',GradientType=0 ); /* IE6-9 */
text-shadow:1px 1px #ffe3a3;
box-shadow:0px 0px 3px #999;
margin:0 auto!important;
	
	
	}



.sub #contents .flow-box img
{
	width:100%;}

.sub #contents .flow-box .right
{
	width:100%;
	float:none;
	}

.sub #contents .flow-arrow
{
	margin:10px;
	text-align:center;
}

.sub #contents .flow-arrow img
{
	clear:both;
	margin:0;
}

.sub #contents table
{
	width:100%;
}


.sub #contents .col .left,
.sub #contents .col .right
{float:none;}

/* ------------ side ------------*/

.sub #side
{
	width:100%;
	float:none;
	display:none;
}


.sub #side aside
{
	display:none;}

.sub #side .box-y
{
	background:#faf4e8;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	padding:12px 9px 9px;
}

.sub #side .box-w
{
	background:#fff;
	padding:9px;
}

.sub #side h3
{
	font-size:16px;
	padding-bottom:6px;
}

.sub #side #side-contact
{
	color:#494984;
	line-height:1.5;
}

.sub #side #side-contact .big
{
	font-size:25px;
}



.sub #side #side-nav li
{
	line-height:80px;
	border-bottom:1px dashed #ddd;
}

.sub #side #side-nav li:first-child
{
	margin-top:-9px;}
	
	.sub #side #side-nav li:last-child
{
	border:none;
	margin-bottom:-9px;}

.sub #side #side-nav li a
{
	display:block;
	color:#313131;
}


/* ------------ footer ------------*/

footer
{
	border-top:7px solid #eee;
	padding-top:30px;
}



footer .left
{
	width:100%;
	text-align:center;
}

footer .right
{
	width:100%;
}

footer #f-contact
{
	font-size:14px;
	color:#494984;
	line-height:1.2;
	padding-right:0px;
}

footer #f-contact .big
{
	font-size:36px;
}

footer .left h3
{
	font-size:20px;
}

footer .left .border-d
{
	padding:10px 0;
}

footer .right
{}


footer #area .left
{
	width:100%;
	text-align:left;
	padding:0 4% 10px;
	font-size:16px;
}

footer #area h4
{
	font-size:16px;
}

footer #area .right
{
	width:100%;
	margin-top:0px;
	text-align:center;
	border-bottom:1px dashed #ddd;
}



	
footer #area h3
{
	font-size:18px;
	background:#456dbe;
	color:#fff;
	text-align:center;
	padding-bottom:0;
	border-top:7px solid #eee;
}




footer .bg-black .left
{
	width:100%;}
	
footer .bg-black .right
{
	width:100%;}


footer #f-nav ul li
{
	float:none;
	font-size:12px;
	padding:0 4%;
	line-height:50px;
	border-bottom:1px solid #555;
	text-align:left;
}

footer #f-nav ul li:after
{
	content:"|";
	padding-left:4px;
	display:none;
}

footer #f-nav ul li a
{
	display:block;
	color:#999;
}



footer small
{
	font-size:11px;
	text-align:center;
	line-height:30px;
	background:#000;
}

footer small a.none,
footer small a.none:visited
{
	color:#999;
}