/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */


/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/


/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	font-size: 1em;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
min-width:1000px;
}


/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}


/*
* A better looking default horizontal rule
*/

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}


/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/

audio,
canvas,
img,
video {
	vertical-align: middle;
}


/*
* Remove default fieldset styles.
*/

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}


/*
* Allow only vertical resizing of textareas.
*/

textarea {
	resize: vertical;
}


/* ==========================================================================
Browse Happy prompt
========================================================================== */

.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}


/* ==========================================================================
Author's custom styles
========================================================================== */


/* helper class */

.tac {
	text-align: center;
}

.tal {
	text-align: left;
}

.tar {
	text-align: right;
}

.fll {
	float: left;
}

.flr {
	float: right;
}

.clr {
	clear: both;
}


/* Basic Box Setting */

header {
	width: 100%;
	position: relative;
	z-index: 10;
	border-bottom: 1px solid #eee;
	background: url('../img/common/bg_header_sky.png') repeat-x top center;
}

header .inner {
	width: 960px;
	height:100px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}


/* Header Setting */

header h1 {
	float: left;
	width: 296px !important;
	height: 53px !important;
	padding: 10px 0 !important;
	margin: 0 10px 0 0;
}

#gnav {
	border-top:1px solid #eee;
	height: 40px;
}

#gnav ul {
	width: 960px;
	list-style: none;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	padding: 0;
	margin: 0 auto;
}

#gnav ul li {
	/* float: left; */
	/*	width: calc(590 / 6 - 10px);*/
	/* width: 120px; */
/*	width:160px;*/
	width: calc(100% / 6 );
	float:left;
	height: 40px;
	text-align: center;
	line-height: 40px;
	margin: 0 5px 0 0;
}
#nav07{
	width: calc(100% / 6 * 2) !important;
}
#gnav ul li a {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 0 6px 6px;
	padding: 0 5px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
	font-size: 80%;
	font-family: 'Noto Sans', sans-serif;
	text-decoration: none;
	color: #333;
	background: url('../img/common/bg_gnav01.png') repeat-x bottom center;
}

#gnav2 {
	float:right;
	width: 390px;
}

#gnav2 p{
	padding:5px 3px 0 0;
	text-align:right;
	clear:both;
}

#gnav2 ul {
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
}

#gnav2 ul li {
	height: 40px;
	float:left;
	margin:0 0 0 5px;
}

#nav11,
#gnav2 ul li a {
	display: block;
	width: 100%;
	height: 100%;
	/*	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);*/
	line-height: 40px;
	text-align: center;
}

#nav11 {
	width: 250px;
	border-radius: 0 0 6px 6px;
	margin: 0 0 10px 0;
	/* background: rgba(255, 255, 255, 0.8); */
}
#nav12{
	/* width: 150px; */
}
#nav12 a {
	border-radius: 6px;
}

#header_address{
	margin: 0 5px 0 0;
font-size:14px !important;
}

header #gnav li a,
header #gnav2 li a {
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

header #gnav li a:link,
header #gnav li a:visited,
header #gnav2 li a:link,
header #gnav2 li a:visited {
	/* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); */
	/* background: rgba(255, 255, 255, 0.8); */
}

header #gnav li a:hover,
header #gnav2 li a:hover {
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
	background: #FFEAC3;
}

header #gnav li a:active,
header #gnav2 li a:active {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.6);
	background: #FECA6E;
}

#nav01 a,
#nav02 a,
#nav03 a,
#nav04 a,
#nav05 a,
#nav06 a,
#nav07 a,
#nav08 a,
#nav12 a{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feca6e+0,fcd188+33,fcbb4b+100 */
background: rgb(254,202,110); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,202,110,1) 0%, rgba(252,209,136,1) 33%, rgba(252,187,75,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(254,202,110,1) 0%,rgba(252,209,136,1) 33%,rgba(252,187,75,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(254,202,110,1) 0%,rgba(252,209,136,1) 33%,rgba(252,187,75,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feca6e', endColorstr='#fcbb4b',GradientType=0 ); /* IE6-9 */
}

#section1 {
	position: relative;
}

.bx-wrapper {
	margin: 0 auto !important;
}

.bx-wrapper .bx-pager {
	position: relative !important;
	bottom: 160px !important;
}

#floatnig_btn {
	position: absolute;
	top: 200px;
	right: 200px;
}

#kamoku ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	position: relative;
	width: 960px;
	list-style: none;
	padding: 0;
	margin: -60px auto 30px;
	z-index: 2000;
}

#kamoku ul li {
	width: 110px;
	text-align: center;
	margin: 0 5px;
	font-size: 110%;
}

#kamoku ul li span {
	display: block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	margin: 0 0 20px 0;
	text-align: center;
	line-height: 106px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

#kamoku ul li span img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

#kamoku ul li a {
	text-decoration: none;
	color: #333;
}

#kamoku ul li a:link,
#kamoku ul li a:visited {
	opacity: 1;
	filter: alpha(opacity=100);
}

#kamoku ul li a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

#kamoku ul li a:active {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

#news {
	width: 960px;
	height: 160px;
	overflow: auto;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: url('../img/index/title_news.png') no-repeat 10px 10px;
	box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.6);
	margin: 0 auto 40px;
}

#news .inner {
	padding: 10px 10px 10px 90px;
}

#news .inner dt {
	float: left;
	width: 100px;
	font-size: 85%;
	font-weight: bold;
	color: #008be3;
	line-height: 1.7;
}

#news .inner dd {
	float: right;
	width: 740px;
	padding: 0;
	margin: 0;
	font-size: 93%;
	line-height: 1.7;
}

#news .inner dd p {
	margin: 0;
}

#bui {
	background: url('../img/common/bg_ptn1.jpg');
	padding: 40px 0;
}

#bui .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 960px;
	margin: 0 auto;
}

#supportshitsu {
	width: 620px;
	/* height: 100px; */
}

#kenko_kan {
	width: 300px;
	height: 100px;
	margin: 0 0 0 20px;
}

#kenko_kan a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	text-align: center;
	line-height: 96px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7f16+0,ff7400+100 */
	background: rgb(255, 127, 22);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(255, 127, 22, 1) 0%, rgba(255, 116, 0, 1) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255, 127, 22, 1) 0%, rgba(255, 116, 0, 1) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255, 127, 22, 1) 0%, rgba(255, 116, 0, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff7f16', endColorstr='#ff7400', GradientType=0);
	/* IE6-9 */
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
	text-decoration: none;
	color: #fff;
}

#kenko_kan a:after {
	content: "\f054";
	font-family: FontAwesome;
	margin-left: 10px;
}

#supportshitsu h3 {
	/* width: 940px; */
	/* height: 50px; */
	width: 620px;
	height: 100px;
	margin: 0 auto;
	line-height: 96px;
	text-align: center;
	background: #527a94;
	border-radius: 6px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
}

#bui ul {
	width: 960px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

#bui ul li {
	float: left;
	width: 190px;
	height: 181px;
	padding: 150px 20px 0;
}

#bui ul li h4 {
	display: none;
}

#bui ul li ul {
	width: 190px;
	border-top: 1px solid #ccc;
}

#bui ul li ul li {
	float: none;
	height: auto;
	font-size: 85%;
	line-height: 1.8;
	padding: 0;
	border-bottom: 1px solid #ccc;
}

#bui ul li ul li a {
	text-decoration: none;
	color: #333;
	padding: 0 0 0 10px;
	background: url('../img/index/arrow_blu.png') no-repeat center left;
}

#bui01 {
	background: url('../img/index/bg_bui01.png') no-repeat center center;
}

#bui02 {
	background: url('../img/index/bg_bui02.png') no-repeat center center;
}

#bui03 {
	background: url('../img/index/bg_bui03.png') no-repeat center center;
}

#bui04 {
	background: url('../img/index/bg_bui04.png') no-repeat center center;
}

#bui05 {
	background: url('../img/index/bg_bui05.png') no-repeat center center;
}

#bui06 {
	background: url('../img/index/bg_bui06.png') no-repeat center center;
}

#bui07 {
	background: url('../img/index/bg_bui07.png') no-repeat center center;
}

#bui08 {
	background: url('../img/index/bg_bui08.png') no-repeat center center;
}

#nayami {
	padding: 40px 0;
	background: url('../img/common/bg_ptn02.png');
}

#nayami h3 {
	text-align: center;
	margin: 0 0 40px 0;
}

#nayami ul {
	width: 960px;
	margin: 0 auto;
	list-style: none;
	padding: ;
}

#nayami ul li {
	float: left;
	width: 270px;
	height: 220px;
	padding: 120px 20px 0;
}

#nayami ul li h4 {
	display: none;
}

#nayami ul li ul {
	list-style: none;
	width: 270px;
	border-top: 1px solid #ccc;
	padding: 0;
	margin: 0;
}

#nayami ul li ul li {
	float: none;
	height: auto;
	font-size: 85%;
	line-height: 1.8;
	padding: 0;
	border-bottom: 1px solid #ccc;
}

#nayami ul li ul li a {
	text-decoration: none;
	color: #333;
	padding: 0 0 0 10px;
	background: url('../img/index/arrow_blu.png') no-repeat center left;
}

#nayami01 {
	background: url('../img/index/bg_nayami01.png');
}

#nayami02 {
	background: url('../img/index/bg_nayami02.png');
}

#nayami03 {
	background: url('../img/index/bg_nayami03.png');
}

#contact {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0;
}


.gotop {
	display: none;
	position: fixed;
	width: 143px;
	height:37px;
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
	bottom: 40px;
	right: 30px;
	z-index: 999;
	background: #fff;
}

.gotop a {
	border-radius: 5px;
	text-decoration: none;
	width: 143px;
	height:37px;
	text-align: center;
	display: block;
}


footer {
	background: url('../img/common/bg_footer.jpg') repeat-x top center;
}

footer .inner {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0;
}

#fnav ul {
	float: left;
	width: 540px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#fnav ul li {
width:33%;
margin:0 0 10px 0;
float:left;
}

#fnav ul li a {
	text-decoration: none;
	color: #fff;
	margin: 0 10px 0;
	font-size: 85%;
}

footer address {
	display: block;
	float: left;
	width: 310px;
	padding: 0 0 0 40px;
	background: url('../img/common/footer_logo.png') no-repeat top left;
	color: #fff;
	font-size: 85%;
	font-style: normal;
}

address h4 {
	margin: 0 0 20px 0;
	padding: 5px 0 0 0;
}

#copyright {
	clear: both;
	background: #fff;
	text-align: center;
	font-size: 77%;
	font-family: serif;
	color: #527a94;
	padding: 5px 0;
}


/* ==========================================================================
Helper classes
========================================================================== */


/*
* Image replacement
*/

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	/* IE 6/7 fallback */
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}


/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/

.hidden {
	display: none !important;
	visibility: hidden;
}


/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}


/*
* Hide visually and from screenreaders, but maintain layout
*/

.invisible {
	visibility: hidden;
}


/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
	content: " ";
	/* 1 */
	display: table;
	/* 2 */
}

.clearfix:after {
	clear: both;
}


/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/

.clearfix {
	*zoom: 1;
}


/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

@media print {
    .gotop {
        display:none !important;
    }
}