@charset "utf-8";


@import url("fontawesome-4.4.0.min.css");
@import url("framework.css");
@import url("navi.css");


/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{padding:30px 0;}

.row1_in{padding:0 0 50px 0; background-image: url("../img/index_main.jpg"); background-position: bottom center; background-size:cover; background-color:#FFF}

.row1_in02{padding:0 0 50px 0; background-image: url("../img/page_back.jpg"); background-position: center center; background-size:cover;}

.row1 a{}
.row2, .row2 a{position:relative;}
.row3{position:relative;} .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
header{margin:0; position:relative; z-index: 2;}

#header{padding:0; margin:0 auto 20px auto; max-width:1200px; z-index: 3;}


.row1_in{width: 100%; height: 100vh;}
.row1_in .logo, .row1_in02 .logo{
  margin:-50px auto 0 auto;
  display:inline-block;
}
.row1_in .head_tx{
  width: 100%;
  height: 100vh;
}




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

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
.sectiontitle *{margin:0;}

.box01{ border:solid 10px #CCC; padding:50px;}

.box02{width:48%; position:absolute; bottom:-100px; left:0; background-color:#FFF; padding: 30px;}


ul.menu{padding:0; position:absolute; top:-40px; letter-spacing:0.1em !important; font-size:0.9rem}
ul.menu li{float:left; padding: 10px 10px 0px 10px; list-style:none;}


ul.menu_list{padding:0; border-bottom: dotted 1px #999; font-size:1.1rem;}
ul.menu_list li{padding: 10px 20px; list-style:none;}
ul.menu_list li.menu{float:left; width: 60%;}
ul.menu_list li.price{float:right; width: 20%;}

.qa-list dl {position: relative; margin: 20px 0 0; cursor: pointer; border: 1px solid #F99;}
.qa-list dl:first-child {margin-top: 0;}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: bold;
    background: #FCC;
}
.qa-list dl dt::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #F66;
}
.qa-list dl dd::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #09C;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {margin: 30px 0 0;}
.qa-list dl dd p:first-child{margin-top: 0;}

@media screen and (max-width: 767px) {
.qa-list dl {margin: 10px 0 0;}
.qa-list dl:after {top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}




/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:50px 20px 40px 20px; overflow:hidden;}

#footer .logo{margin-bottom:30px; font-size:2.5rem; color:#FF0;}

#footer .text01{font-size:1rem;}
#footer .text02{font-size:2.5rem; color:#fff; line-height:1.2;}

.googlemap-bw iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}



/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:0 0 30px 0; font-size:1rem;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


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


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}


/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:50px; height:50px; line-height:48px; font-size:18px; text-align:center; opacity:.2; border-radius:50%;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop: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;}

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

.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:#000;}
a{color: #F90; text-decoration:none;}
a:hover{color: #F90; text-decoration:underline;}
/* a:active, a:focus{background:transparent;} 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:#95103B;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.40);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}



.imgover:hover::before{background:rgba(0,0,0,.55);}
.imgover, .imgover:hover::after{color:#95103B;}


/* Rows */
.row0{color:#474747;}
.row1, .row1 a{}
.row2{color:#000;}
.row3{background: url(../img/backimg01.jpg) no-repeat; background-position: top; background-size: cover;}
.row4{color:#000; background-color: #EAEBEE; padding:40px 20px;}
.row5, .row5 a{color:#fff; background-color: #121212;}

.gradient{color:#FFFFFF; background:linear-gradient(to bottom right, #8F9297, #C1C2C4);}


/* Header */
#header #logo h1::before{background-color:#474747;}
#header #logo h1::after{background-color:#95103B;}
#header #logo h1 a{color:inherit;}
#header #logo h1 span{color:#95103B;}




/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Content Area */

.overview a{color:inherit;}
.overview article:hover a{color:#95103B;}


/* Latest */
#latest article .excerpt{color:inherit; background-color:#FFFFFF; border-color:rgba(0,0,0,.2);}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#474747; background-color:#C1C2C4;}
#footer input:focus{border-color:#95103B;}
#footer button{color:#FFFFFF; background-color:#95103B;}

#backtotop{color: #FF0; background-color: #0CF;}



/* Navigation */
#breadcrumb{background-color:inherit; font-size:0.9rem;}
#breadcrumb li:last-child a{}

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



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


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


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

@media screen and (min-width:1050px) and (max-width:1199px){
	.hoc{max-width:95%;}
	#header{padding:20px 0 0 0;}
	
}


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

	#header{padding:10px 0;}
	#header .logo{float:left; width:50%; padding:0 0 0 20px;}
	
	#header #main{max-width:96%; margin:0 auto;}



	#breadcrumb{}

	.container{padding:60px 30px;}
	
	#index_policy{position: relative; right:0; bottom:0px;}

	.width40_pc, .width50_pc, .width85_pc, .width70_pc, .width75_pc{max-width:100%;}
	
	
	.pc{display:none;}
	.sp{display:block;}

	.wrapper{display:block; position:relative; max-width:96%; margin:auto; padding:0; text-align:left; word-wrap:break-word;}

	.container{}


	#footer{}
	#footer .logo{margin-bottom:30px; font-size:2.2rem;}

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

@media screen and (max-width:1000px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	/*.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;} Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.work_box{background-color:#FFF; padding: 15px;}
	.work_box .one_quarter{display:inline-block; width:47%; float:left; margin:0 0 10% 2%; list-style:none;}

	#news .one_third{margin:0 0 10px 0;}

	#header{padding:20px 0 0 0;}
	
	.container{padding:30px 5px;}

	.box01{ border:solid 8px #CCC; padding:30px 23px;}
	.box02{width:100%; position:absolute; margin: 0 0 -50px 0; left:0; background-color:#FFF; padding: 30px;}

	ul.menu_list li{padding: 10px 10px; list-style:none;}
	ul.menu_list li.menu{float: none; width: 100%;}
	ul.menu_list li.price{float:none; width: 80%; margin: 0 0 0 20%; text-align:right}
	



	.sectiontitle{max-width:none;}

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


	#latest article{max-width:348px;}/* Change it to suit your needs - default is the one_third grid width */

	#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:10px; right:10px; font-size:16px;}


	#footer{padding:30px 0px;}/* Not required, just looks a little better */
	
	#footer .text01{font-size:0.9rem; line-height:2; margin:0 0 10px 0;}
	#footer .text02{font-size:2.1rem; line-height:1.2;}
	
	#copyright{padding:0 0 40px 0; font-size:0.8rem;}
	
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:480px){
	.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;}
	#footer .font-x3{font-size:2.8rem;}
	
}