@charset "utf-8";

@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0{border-bottom:1px solid;}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Top Bar
--------------------------------------------------------------------------------------------------------------- */
#topbar{padding:12px 0; font-size:1.1rem; text-transform:uppercase;}

#topbar *{margin:0; padding:0; list-style:none;}
#topbar ul li{display:inline-block; margin-right:10px; padding-right:15px; border-right:1px solid;}
#topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;}
#topbar i{margin:0 5px 0 0; line-height:normal;}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{}

#header #logo{margin:18px 0;}
#header #logo ul{margin:0; padding:0;}
#header #logo h1{margin:0; padding:0; font-size:22px; text-transform:uppercase;}

#head_btn{position:absolute; top:20px; right:20%;}



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 0;}

/* Content */
.container .content{}

.pc{display:block;}
.sp{display:none;}


.sectiontitle{display:block; margin-bottom:80px;}
.sectiontitle *{margin:0;}

.title01{border-bottom:dotted 1px #333; margin: 0 0 30px 0;}
.title01 h3{font-size:2.4em; line-height:1.4em; margin:0;}
.title01 span{display:block; font-size:1.1em; line-height:1.4em; color:#666; margin:0 0 12px 0;}



/* Sidebar */
.container .sidebar{}

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:1px 0;}

#footer .heading, #footer ul{margin-bottom:30px;}
#footer > ul:last-of-type{margin-bottom:0;}
#footer .faico a{border-radius:50%;}

#footer .title{margin:0 0 30px 0; padding:0; font-size:1.6rem;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}

#footer .contact{}
#footer .contact.linklist li, #footer .contact.linklist li:last-child{position:relative; padding-left:3px;}
#footer .contact li *{margin:0; padding:0; line-height:1.6;}
#footer .contact li i{top:0; left:0; font-size:16px; text-align:center;}




/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:40px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */



/*PCのスタイル*/
header nav {margin:0 0 16px 0;}
header nav ul{
	display: flex;
	align-items: center;
	
}
header nav ul li a{
	color: #fff;
	text-decoration: none;
	margin:0 16px 0 0;
}
#nav_toggle{
	display: none;
}






/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2; border-radius:50%; background-clip:padding-box;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}



/* side btn */
#sidebtn01{z-index:999; display:inline-block; width:158px; position:fixed; visibility:hidden; bottom:215px; right:5px; text-align:right; opacity:.2;}
/* #sidebtn01 i{display:block; line-height:nherit; padding-bottom:10px; margin-bottom:10px; font-size:30px; border-bottom:dotted 1px #fff}
#sidebtn01 span i{display:block; line-height:nherit; padding:8px 0; color:#FFF; font-size:18px; border-bottom:dotted 1px #fff} */
#sidebtn01.visible{visibility:visible; opacity:.8;}
#sidebtn01:hover{opacity:1;}

#sidebtn02{z-index:999; display:inline-block; width:158px; position:fixed; visibility:hidden; bottom:150px; right:5px; text-align:right; opacity:.2;}
/* #sidebtn02 i{display:block; line-height:nherit; padding-bottom:10px; margin-bottom:10px; font-size:30px; border-bottom:dotted 1px #fff}
#sidebtn02 span i{display:block; line-height:nherit; padding:8px 0; color:#FFF; font-size:18px; border-bottom:dotted 1px #fff} */
#sidebtn02.visible{visibility:visible; opacity:.8;}
#sidebtn02:hover{opacity:1;}

#sidebtn03{z-index:999; display:inline-block; width:158px; position:fixed; visibility:hidden; bottom:85px; right:5px; text-align:right; opacity:.2;}
/* #sidebtn01 i{display:block; line-height:nherit; padding-bottom:10px; margin-bottom:10px; font-size:30px; border-bottom:dotted 1px #fff}
#sidebtn01 span i{display:block; line-height:nherit; padding:8px 0; color:#FFF; font-size:18px; border-bottom:dotted 1px #fff} */
#sidebtn03.visible{visibility:visible; opacity:.8;}
#sidebtn03:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}




/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center; border-radius:50%; background-clip:padding-box;}

.faico a{color:#000000; background-color:#FFFFFF;}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#474747; background-color: #F5F7F8;}
a{color:#6677BC;}
a:active, a:focus{}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#6677BC;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.45);}

.btn, .btn.inverse:hover, a .icon, a.inverse:hover .icon{color:#FFFFFF; background-color:#09C; border-color:#09C;}
.btn:hover, .btn.inverse, a:hover .icon, a.inverse .icon{color:inherit; background-color:transparent; border-color:inherit;}

a.btn02, a.btn02.inverse:hover, a.btn02 .icon, a.btn02.inverse:hover .icon{color:#6677BC; background-color:#FFFFFF; text-decoration:none; border-color:#6677BC;}
a.btn02:hover, a.btn02.inverse, a.btn02:hover .icon, a.btn02.inverse .icon{color:#fff; background-color:#6677BC; text-decoration:none; border-color:inherit;}

a.btn03, a.btn03.inverse:hover, a.btn03 .icon, a.btn03.inverse:hover .icon{color:#6677BC; background-color:inherit; text-decoration:none; border-color:#6677BC;}
a.btn03:hover, a.btn03.inverse, a.btn03:hover .icon, a.btn03.inverse .icon{color:#fff; background-color:#6677BC; text-decoration:none; border-color:inherit;}


/* Rows */
.row0, .row0 a{color:#CBCBCB; background-color:#000000; border-color:rgba(255,255,255,.2);}
.row1{color:#FFFFFF; background-color:rgba(0,0,0,.4);}
.row2{background-color:#000; color:#FFFFFF;}
.row3{color:#474747; background-color: #DBDDE3;}
.row4{color:#CBCBCB; background-color: #29305A;}
.row5{color:#474747; background-color:#FFFFFF;}
.row5 a{color:#6677BC; text-decoration:underline;}
.row6{color:#fff; background-color: #DBDDE3;}
.row7{color:#474747; background-color:#FFFFFF;}
.row7 a{color:#fff; text-decoration:none;}


.coloured{color:#FFFFFF; background-color:#6677BC;}
.coloured .btn{color:inherit; background-color:transparent; border-color:inherit;}
.coloured .btn:hover{color:#6677BC; background-color:#FFFFFF;}


/* Top Bar */
#topbar, #topbar ul li{border-color:rgba(255,255,255,.2);}
#topbar > div:last-of-type li:first-child a{color:#6677BC;}


/* Header */
#header #logo a{color:inherit;}


/* Page Intro */
#pageintro footer input, #pageintro footer button{color:#000000; background-color:#FFFFFF;}
#pageintro footer button{color:#FFFFFF; background-color:#6677BC;}

.flex-direction-nav a{color:rgba(255,255,255,1);}
.flex-control-paging li a{background-color:rgba(255,255,255,1); border-color:rgba(255,255,255,0);}
.flex-control-paging li a.flex-active{background-color:rgba(255,255,255,0); border-color:rgba(255,255,255,1);}



/* Footer */
#footer .heading{color:inherit;}
#footer nav a{color:inherit;}
#footer nav li:first-child a, #footer nav a:hover{color:#6677BC;}
#footer .linklist li{border-color:rgba(255,255,255,.2);}




nav .active a, #mainav a:hover, #mainav li:hover > a{color:#6677BC; background-color:inherit;}


#breadcrumb ul{border-color:rgba(255,255,255,.2);}
#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color: #DDE8F2;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#6677BC;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#6677BC;}

#backtotop{color:#FFFFFF; background-color:#6677BC;}

/* #sidebtn01{color:#FFFFFF; background-color:#F63;}
#sidebtn02{color:#FFFFFF; background-color:#F06;} */




/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#6677BC;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px){
	.hoc{max-width:1024px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:90%;}

	#topbar{}

	#header{padding:20px 0;}
	#header #logo{margin-top:3px;}

	/* #mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block;}*/

	#breadcrumb{}
	
	#introblocks > ul{display:block; margin:0 0 10px;}
	#introblocks ul{display:block; width:900px; position:relative;}
	#introblocks .one_third{width:31.28834355828221%; float:left; margin:0 0 0 2%;}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}


@media screen and (max-width:750px){
	.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{display:none;}
	.flex-control-nav{display:block;}

	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 15px 0;}
    .one_seventh, .six_seventh{display:block; float:none; width:auto; margin:0 0 10px 0; padding:0;}

	#banner .one_quarter, #banner .one_third{float:left; width:48%; margin:0 0 20px 2%;}

	#introblocks .one_third{width:31.28834355828221%;}

	#topbar{text-align:center;}
	#topbar ul{margin:0 0 15px 0;}
	#topbar div:last-child ul{margin:0;}

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}
	#header .one_quarter02{float:left; width:49%; margin:0 0 0 1%;}

	#head_btn{display:none;}


	#introblocks > ul > li{margin-bottom:50px;}
	#introblocks > ul > li:last-child{margin-bottom:0;}

	.services .one_third{float:left; width:49%; margin:0 0 2% 1%;}
	.services article{height:350px;}
	.services02 .one_quarter{float:left; width:49%; margin:0 0 2% 1%;}
	.services02 article{height:200px;}

	.container{padding-bottom:50px;}/* Not neccessary - just looks better */
	.pc{display: none;}
	.sp{display: block;}
	
.leftspace-120{margin-left:30px;}
.rightspace-120{margin-right:30px;}



/* side btn */
#sidebtn01{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:0px; left:0; width:33.3%; line-height:22px; font-size:15px; text-align:center; opacity:.2;}
#sidebtn02{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:0px; left:33.3%; width:33.3%; line-height:22px; font-size:15px; text-align:center; opacity:.2;}
#sidebtn03{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:0px; left:66.6%; width:33.3%; line-height:22px; font-size:15px; text-align:center; opacity:.2;}
}


@media screen and (max-width:450px){
	#topbar ul li{margin-bottom:2px; padding-right:0; border-right:none;}
	.pc{display: none;}
	#pageintro li footer form{max-width:none; width:100%;}
	.services article{height:250px;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}
	

.right02{text-align:left;}

	#pageintro{padding:60px 0 100px;}
	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:1.6rem;}
	.pc{display: none;}
	.services article{height:270px;}
	
}