/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; position: relative}
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
.hidden{display: none;}


@media (max-width: 767px){.pc-show{display: none;}	}
@media (min-width: 768px){.mobile-show{display: none;}	.pc-show{display: block;}}


/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html {
height: 100%;/* ウィンドウフィットのため */
font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Varela Round', sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { height: 100%; margin: 0; 
				font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}



/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }



/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
 
h1 { font-size: 2em; margin: 0; color: #000; line-height: 1.2;}
h2 { font-size: 1.5em; margin: 0;line-height: 1.3;}
h3 { font-size: 1.17em;  margin: 0;line-height: 1.4;}
h4 { font-size: 1em; margin: 0;line-height: 1.4;}
h5 { font-size: 0.83em; margin: 0;line-height: 1.4;}
h6 { font-size: 0.75em;margin: 0;line-height: 1.4;}
h7 { font-size: 2em; margin: 0;line-height: 1.4;}

/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
em,i{font-style: normal;}
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0; line-height: 1.4;}
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }




/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
 
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }





/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
 
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }



/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
 
figure { margin: 0; }




/* ==========================================================================
Forms
========================================================================== */
/* * Corrects margin displayed oddly in IE 6/7. */
 
form { margin: 0; }
/* * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */
legend { border: 0; /* 1 */
	padding: 0; white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */ }
/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */
button, input, select, textarea { font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */ }
/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */
button, input { line-height: normal; }
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
*overflow: visible; /* 4 */ }
/* * Re-set default cursor for disabled elements. */
button[disabled], input[disabled] { cursor: default; }
/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
*width: 13px; /* 3 */ }
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box; }
/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* * Removes inner padding and border in Firefox 3+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */
vertical-align: top; /* 2 */ }



/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }



/* ==========================================================================
Thema Rewrite
========================================================================== */
.iphone{box-shadow:0 0 0!important;background:#fff}
@media (min-width: 768px){.col-md-8{width: 100%;}}



/* ==========================================================================
Global Styles
========================================================================== */
a { color: #353535; transition: all 0.5s; }
a:hover, a:focus { color: #3dc9b3; text-decoration: none; }
p { color: #000; word-spacing: 1px; line-height: 25px; font-size: 14px; }
/*h2 { font-size: 15px; color: #353535; text-transform: uppercase; font-weight: bold; }*/
.section-padding { padding: 90px 0 100px }
.dark-bg { background: #f3f5f8; }
.light-bg { background-color: #fff; }
.dark-box { background: #f3f5f8; box-shadow: 0px 3px 0px 0px #f0f2f4; }
.light-box { background-color: #fff; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 20px 0; }
.light-box:hover, .light-box:focus { box-shadow: 0px 3px 0px 0px #3dc9b3; }
.box-hover { transition: all 500ms ease-in-out; }
.box-hover:hover, .box-hover:focus { transform: translate(0, -15px); }
.wrapper { height: 650px; }
.nopadding { padding: 0; }
/*.inner { padding-top: 170px; }*/
.box-shadow30{box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);}
.text-hover-nav:hover {background-color: rgba(255, 0, 0, 0.37);}




/* ==========================================================================
Navigation
========================================================================== */
.navbar{position: block; z-index: 100; width: 100%; background-color: rgba(255, 255, 255, 0.9);flex-wrap: nowrap;margin-bottom: 0px; }
.navbar>.container-fluid{display: block;justify-content: normal; align-items: normal;padding-bottom: 0px;}
.navbar-brand{ padding: 0px 0px;}
.navbar-brand img{width: 60px;}
@media (min-width: 768px){.navbar>.container-fluid{padding-bottom: 5px;}.navbar-brand{ padding: 0px 15px;}.navbar-brand img{width: 70px; }}

.navbar .row{width: 100%!important;  margin-left: 0px;}
.navbar .col-md-offset-2{margin-left:0;}
@media (min-width: 768px){.navbar .col-md-offset-2{margin-left:0;}}
@media (min-width: 992px){.navbar .col-md-offset-2{margin-left:0;}}

.navbar .col-md-offset-2{width: 100%;}
.navbar ul { list-style: none; padding: 0; } 
.navbar ul li { color: rgba(0, 0, 0, 10); display: block; border-bottom: 1px dotted rgba(0, 0, 0, 1); transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
.navbar ul li:last-child { border: none; }
.navbar ul li a { color: rgba(0, 0, 0, 1); display: block; padding: 20px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; }
.navbar ul li a:hover, nav ul li a:focus { text-decoration: none; color: rgba(0, 0, 0, 1); }

#nav-toggle {cursor: pointer; position: absolute; right:110px; padding: 0px; outline: none; }
#nav-toggle {display: block;width: 15px;height: 15px;border-top: 1px solid #f00;border-right: 1px solid #f00;transform: rotate(135deg);}
#nav-toggle{transition: all 500ms ease-in-out;}
@media (min-width: 768px){#nav-toggle{right:130px;}}


#nav-toggle.active{ transform: rotate(-45deg);}
#nav-toggle.active:hover{animation:rotate-90-cw .4s cubic-bezier(.25,.46,.45,.94) both}
@keyframes nav-toggle{0%{transform:rotate(0)}100%{transform:rotate(-45deg)}}
.indicator { position: absolute; right: 0 !important; }
.pull { display: none; }

#bt-contact{font-size:10px;background: #d80000; color: #fff; font-weight: bold;position: absolute; right:20px; padding: 0.2rem 1em;border-radius: 15px;}
#bt-contact:hover, #bt-contact:focus { background: rgba(221, 39, 34, 0.6); color: #fff; }
#nav-toggle,#bt-contact{top: 15px;}



/* ==========================================================================
Button Layout
========================================================================== */
.learn-more-btn,
.toi-more-btn,
.learn-more-btn2,
.toi-more-blue-btn,
.toi-more-blue-btn2{font-size:12px; color: #fff; background: #d80000; padding: 5px 20px; border-radius: 20px;  font-weight: bold; }

.toi-more-blue-btn,.toi-more-blue-btn2{background: rgb(46, 114, 185);}

.learn-more-btn:hover, .toi-more-btn:focus ,
.toi-more-btn:hover, .toi-more-blue-btn:focus,
.learn-more-btn2:hover, .learn-more-btn2:focus{background: rgba(221, 39, 34, 0.6);color: #fff;}

.toi-more-blue-btn:hover, .toi-more-blue-btn:focus,
.toi-more-blue-btn2:hover, .toi-more-blue-btn2:focus{background: rgba(46, 114, 185, 0.6);color: #fff;}


@media (min-width: 768px) {
.learn-more-btn,
.toi-more-btn,
.learn-more-btn2,
.toi-more-blue-btn,
.toi-more-blue-btn2{ font-size:14px;}
}



/* ==========================================================================
Hero indexメインイメージ
========================================================================== */
.hero {
	background:url('../img/index_top_bgimg.jpg') no-repeat top center;
	background-size: cover;
	padding: 15% 0 15% 0;
/*	height: 60%;*/
	width: auto;
	max-width: 100vw;
}
.hero h1 img {height: 100px;}
.hero p { font-size: 1em;letter-spacing: 1px;font-weight: bold; line-height: 1.4;}
.hero-inner{position: relative;top:0px; }

/*@media (min-width: 500px) {.hero h1 img {width: 30%;}}*/

/*中デバイス（タブレット, 768px 以上）*/
@media (min-width: 768px) {
.hero {background-size: contain;}
.hero h1 img {height: 200px;}
.hero p { font-size: 1.4em;letter-spacing: 1px;font-weight: bold; }
.hero-inner{position: relative;bottom:50%;}
}




/* ==========================================================================
index-hero  共通CSS
========================================================================== */
.index-hero {position: relative;background: #fff;padding: 5% 0 0% 0;margin-bottom: 40px;}
.index-hero h1 { font-size: 1.1em; }
.index-hero h2 {font-size: 1.75em; margin: 0.25em 0 .5em;font-weight: bold; }
.index-hero h3 {font-size: 1em;}
.index-hero p { margin:2em 0;}
.index-hero .h-box{
	height:180px;
	width: 90%;
	margin: 0 auto; 
	padding: 1rem 0 0px 70px;
	background-size: 60px ;
	background-repeat: no-repeat;
	background-position: top 30px;
}

.index-hero1 .h-box{background-image:url(../img/common_header_section1_no.png) }
.index-hero2 .h-box{background-image:url(../img/common_header_section2_no.png) }
.index-hero3 .h-box{background-image:url(../img/common_header_section3_no.png) }

@media (min-width: 600px){
	.index-hero .h-box{margin-left: 16%; }
	.index-hero h2 em{display: block;}
}


@media (min-width: 768px){
	.index-hero .h-box{margin-left: 20%; }
	.index-hero h2 em{display: block;}
.index-hero h2 {font-size: 2.25em; }
}




/* ==========================================================================
index-hero  #hotelinfo
========================================================================== */
.index-hero1 img{width: 65%;}



/* ==========================================================================
index-hero2  #corting
========================================================================== */
.index-hero2 { background: url('../img/index_section2_bgimg.jpg') no-repeat top center; background-size: cover; height: auto; }
.index-hero2 img{width: 40%;}
.index-hero2 .maincopy{filter:drop-shadow(0px 0px 6px #000) drop-shadow(0px 0px 6px #000);}


/* ==========================================================================
index-hero3  #consulting
========================================================================== */
.index-hero3 { background: #000 url('../img/index_section3_bgimg.jpg') no-repeat left center; background-size: contain;  height: 350px; }
.index-hero3 h1,.index-hero3 h2,.index-hero3 h3,.index-hero3 .read { color: #ffffff;filter:drop-shadow(0px 0px 9px rgba(0,0,0,1));}
.index-hero3 .read{text-align: center; font-size: 1.2em;font-weight: bold;margin-top: 1em;}

@media (min-width: 768px){
.index-hero3 { background-position:left center; background-size: cover;  height: 550px; }
.index-hero3 .read{text-align: center; font-size: 2em;margin-top: 4em;line-height: 1.5;}
}




/* ==========================================================================
index  #company
========================================================================== */
#company .wrapper{height:auto; background: #fff;}
#company .wp3{text-align: center; font-size: 80%;background: #fcc;position: relative; background:url('../img/index_top_bgimg.jpg') no-repeat top right; background-size: cover;padding: 5% 0;}
#company .wp3_inner {position: relative;;width: 14em;margin: 0 auto;}
#company .wp3 h1{border-bottom: 1px solid #888;padding: 0.5em 0;font-size: 140%;font-weight: bold;}
#company .wp3 p,#company .wp3 .learn-more-btn2{font-size: 100%;}

#company dl,#company dt,#company dd{margin: 0;padding: 0;}
#company dl{width: 80%;border: 1px #ddd solid;border-radius: 10px;margin: 0 auto;padding: 0 1em;}
#company dd:last-child{padding-bottom: 1.5em;;}
#company dt{font-weight: normal;color: #888;font-size: 0.8em;margin-top: 1.5em;}

@media (min-width: 599px){
	#company .wrapper{ display: flex;justify-content: flex-start; flex-wrap: wrap;}
	#company .wp3{width: 50%;}
	#company dl{width:auto;height: 260px;margin-left: -1em;}
}


/* ==========================================================================
index  #toiform
========================================================================== */
#toiform{background: #eee;  background-size: cover; background-attachment: fixed; padding: 30px;margin-top: 3em;}
#toiform h1{ color: #000;text-align: center;font-size: 1.5em;}
#toiform th,#toiform h4{font-weight: normal;color: #888;width: 10em;}
#toiform h4{border-top: 1px solid #ddd; width: 100%;padding-top: 10px;}

#toiform th span,#toiform h4 span{color: #d80000;font-size: 90%;display: block;}
#toiform h4{border-top: 1px solid #ddd;}
#toiform label{color: #666; font-weight: normal; cursor: pointer;margin: 0.5em 0 0.5em 2em; }


@media (min-width: 599px){
	#toiform {margin-top: 0;}
	#toiform form{width: 80%;margin:0 auto;}
	#toiform th span,#toiform h4 span{display: inline;font-size: 80%;padding-left: 0.5em;}
#toiform th{width: 150px;}
}


#toiform input[type=text],#toiform input[type=email]{
background-color: rgba(255, 255, 255, 0.6);
border: solid 1px #ddd;
padding: 0.5em;
width: 100%;
color: #000;
}

/* チェックボックス */
input[type=checkbox] { display:none; } /* 元のチェックボックスを表示しない  */
.chk{margin:			0 0 0px -1.5em;}
.chk label {
padding-left:1.5em;			/* ラベルの位置 */
	display:		inline-block;
	cursor:			pointer;
	position:		relative;}

/* チェック前のスタイル */
.chk label:before { 
	content:		'';
	width:			12px;			/* ボックスの横幅 */
	height:			12px;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			-0em;
	top:5px;
background: #fff;
}

/* チェックした時のスタイル */
.chk input[type=checkbox]:checked + label:before {
content:		'\2713';		/* チェックの文字 */ 
font-size: 24px;
	color:#f00;			/* チェックの色 */
background: transparent;
top: -8px;
left: -5px;
}

#toiform .formkakunin th,
#toiform .formkakunin td{padding: 1em 0;}
#toiform .formkakunin p{margin: 0;}


/* ==========================================================================
下層ページ　共通CSS  #pagetitle
#hotelinfo  #corting  #consulting
========================================================================== */
#pagetitle{
	background: url(../img/index_top_bgimg.jpg) no-repeat;
	background-size: 30%;
	background-position: top left;
}
#pagetitle .h-box{
	height: auto;
	margin-left: 30%; 
	padding: 0.5rem  0 0.5rem 45px; 
	background-size: auto 100% ;
	background-repeat: no-repeat;
}
#pagetitle h1 {font-size: 0.75em;}
#pagetitle h2 {font-size: 1.15em; margin: 0.25em 0;font-weight: bold; }
#pagetitle h2 em {display: block;}

#hotelinfo #pagetitle .h-box{background-image:url(../img/common_header_section1_no.png); }
#corting #pagetitle .h-box{background-image:url(../img/common_header_section2_no.png); }
#consulting #pagetitle .h-box{background-image:url(../img/common_header_section3_no.png); }

@media (min-width: 414px){#pagetitle h2 {font-size: 1.25em;}}
@media (min-width: 599px){#pagetitle h1 {font-size: 1em;} #pagetitle h2 {font-size: 2em;}#pagetitle .h-box{padding: 0.5rem  0 0.5rem 65px; }}
@media (min-width: 999px){#pagetitle h2 em {display: inline;}#pagetitle .h-box{padding: 1rem  0 1rem 60px; }}


.hotelinfo{position: relative;margin-bottom: 4em;}
.hotelinfo .maincopy{width: 90%;margin: 0 auto;}
.hotelinfo .mainimg {position: absolute; width: 100vw;  z-index: -10;}
.hotelinfo .read{width: 70%;margin: 0 auto;position: relative;top:-2em;}
.hotelinfo h1 {color: #FFFFFF;}
.hotelinfo h2 {color: #e4ab47;}
.hotelinfo dt,.hotelinfo dd{margin: 0;padding: 0;}
.hotelinfo dt { font-size: 1.5em;}
.hotelinfo dd{line-height: 1.8;}
.hotelinfo small {color: #d80000;display: block;}
.hotelinfo .read dl{background-color: rgba(255, 255, 255, 0.5);padding: 10px 10px 0 ;}


#hotelhero .bt-box,.hotelinfo .bt-box,
#coatsec .bt-box,.coatsec .bt-box,
.consultsec .bt-box,.consultsec .bt-box
{margin-top: 3em;}


ul.banner{list-style-type: none;display: flex; justify-content: space-between;flex-wrap:wrap;width: 90%; margin: 0 auto;padding: 0;position: relative;top:-30px;}
ul.banner li{width: 50%;margin: 0 auto;}
ul.banner img{width: 100%;}

@media (min-width: 767px){
.hotelinfo .maincopy{padding: 100px 0 80px 0%; }
.hotelinfo .maincopy h1 {font-size: 2em;}
.hotelinfo .read{display: flex; width: 90%;margin: 0 auto;}
.hotelinfo .read div{width: 60%;padding: 0em 0 0 2em ;margin: 0;position: relative;}
.hotelinfo .read dl{position: absolute;bottom: 0;}
}
@media (min-width: 1024px){
.hotelinfo .maincopy h1 {font-size: 2.5em;}
.hotelinfo .maincopy{padding: 100px 0 80px 0%;}
}


/* ==========================================================================
下層ページ　ホテルインフォメーション
#hotelhero 
========================================================================== */
figure img{width: 100%;}
#hotelhero{margin-bottom: 2em;position: relative;}
.hotelhero{	background: url('../img/hotel_section1_mainimg2.jpg') no-repeat;background-size: cover;}
.maincopy{
	text-align: center;
	padding: 40px 0 50px;

}
h1.maincopy,.maincopy h1{font-size:1.25em;font-weight: bold; line-height: 1.6;}
.maincopy h2{font-size:0.8em;margin-bottom: 1em;}


@media (min-width: 767px){
#hotelhero{margin-bottom: 1em;}
#hotelhero .maincopy{padding: 100px 0 180px 0; }
.maincopy h1{font-size:1.75em ;}
.maincopy h2{font-size:1.25em ;}
.maincopy .toi-more-blue-btn,#hotelhero .maincopy .toi-more-btn{margin: 6em 1em 0;}
ul.banner{width: 80%;display: flex; top:-80px;justify-content: space-between;flex-wrap:nowrap;}
ul.banner li{width: 33%;margin: 0 auto;}
}


/* ==========================================================================
hotel1　共通CSSで対応
========================================================================== */



/* ==========================================================================
hotel2 VODサービス
========================================================================== */
.hotel2 h2 {color: #86bea1;}
.hotel2 .maincopy .toi-more-btn{margin-top: 2em;}
.hotel2-1 h1.maincopy {color: #000;text-align: center;padding: 0 0 0;margin-left:none;}
.hotel2-1 h1.maincopy em{display: block;}
.hotel2-1 ul{background: #fff;width: 70vw;display: flex; justify-content: space-between;flex-wrap:wrap;margin: 0 auto;padding-left: 0;}
.hotel2-1 ul li{background: #fff;list-style-type: none;text-align: center;margin:10px 10px;} 
.hotel2-1 ul li img{height: 120px;}


@media (min-width: 767px){
.hotel2 .maincopy h1 em{display: block;} 
.hotel2 .maincopy{text-align: left;padding-left:8%;}
.hotel2-1 h1.maincopy {text-align: center;font-size: 1.8em;margin-top:2em; }
.hotel2-1 h1.maincopy em{display: inline;margin-left: 0;}
.hotel2-1 ul{width: 70%;flex-wrap:nowrap;justify-content: space-between; margin: 30px auto;}
.hotel2-1 ul li{margin:0 0;} 
}

@media (min-width: 767px){
#hotelhero .maincopy{padding: 100px 0 180px 0; }
}


/* ==========================================================================
hotel3 混雑状況案内サービス
========================================================================== */
.hotel3{	background: url('../img/vod_bk3.jpg') no-repeat;background-size: contain;}
.hotel3 .maincopy{padding: 20px 0 20px;}
.hotel3 .maincopy h2{color: #fff; font-weight: bold;}
.hotel3 h3{color: #fff; font-weight: bold; font-size: 0.8em;text-align: center;}
/*.hotel3 h3 em{display: block;}*/
.hotel3 ul.banner{display: flex; justify-content: space-between;flex-wrap:wrap;top:0px;}
.hotel3 ul.banner li{margin-bottom: 2em;width: 45%;}
.hotel3 ul.banner li:last-child{margin-bottom: 0em;}
.hotel3 ul.banner img{width: 100%;}
.hotel3 small{text-align: center;margin-top: 20px;color: #888;}

@media (min-width: 767px){
.hotel3 ul.banner{width: 95%;display: flex; justify-content: space-between; margin-top:60px;}
.hotel3 ul.banner li{width: 30%;}
.hotel3 h3{font-size: 1.25em;}
	.hotel3 h3 em{display: inline;}
.hotel3 small{margin-top: 0px;}

}
/*@media (min-width: 1024px){.hotel3 ul.banner{top:100px;}}*/
@media (min-width: 1367px){.hotel3 ul.banner{background-color: rgba(255, 255, 255, 0.6);padding: 20px 10px 0 10px;}}



/* ==========================================================================
Hotel4 設置事例
========================================================================== */
.hotel4 .maincopy {
	height: 150px;
text-align: right;
	padding: 1em;
	background: url('../img/vod_bk4.jpg') no-repeat bottom center;
	background-size: cover;
}
.hotel4 .maincopy h1,.hotel4 .maincopy h2,.hotel4 .maincopy h3{}
.hotel4 .maincopy h1,.hotel4 .maincopy h2{color: #fff;	font-weight: bold;margin: 0.5rem 0;}
.hotel4 .maincopy h1{font-size: 2em;}
.hotel4 .maincopy h3{color: #fff;	font-size: 0.8em;}

.setup{background: url(../img/common_section_backgrade.jpg);padding-bottom: 1em;text-align: center;}
.setup h1{color: #2e72b9;font-weight: bold;font-size: 1.5em;padding: 1em 0;}
.setup h1 em{display: block;}
.setup figure{width: 90%; margin: 0 auto;}
.setup figure img{width: 80%;}

@media (min-width: 767px){
.hotel4 .maincopy {	height: 200px;}
.hotel4 .maincopy h1,.hotel4 .maincopy h2,.hotel4 .maincopy h3{width: 90%;margin: 0 auto;}
.hotel4 .maincopy h1{font-size: 2.5em;}
.hotel4 .maincopy h3{color: #fff;	font-size:1.2em;}
.setup h1{font-size: 1.5em;padding: 1.5em 0;}
.setup h1 em{display: inline;}
}





/* ==========================================================================
下層ページ　抗菌・抗ウイルスコーティング施工
#corting  #coathero .coat1
========================================================================== */
.coat1{margin-bottom: 2em;position: relative;}
#coathero .maincopy{
	background: url('../img/index_section2_bgimg.jpg') no-repeat top left;
	background-size: cover;
	text-align: center;
	padding: 30px 0 50px;
	height: 330px;
}

.coatsec .maincopy h2{font-weight: bold;}
.coatsec .maincopy h3{font-size:1em;color: #666;}
.coatsec figure.banner{width: 50%;margin: -130px auto 0;}
.coatsec figcaption{color: #c31010;font-size: 1.25em;font-weight: bold;text-align: center;margin-top: 0.5em;}

@media (min-width: 767px){
.coatsec{margin-bottom: 1em;}
#coathero .maincopy{	height: 470px;}
.coatsec .maincopy h1{font-size:2.25em ;}
.coatsec .maincopy h2{font-size:1.25em ;}
.coatsec .maincopy h3{font-size:1.25em;}
.coatsec .maincopy .toi-more-blue-btn,#coathero .maincopy .toi-more-btn{margin: 3em 1em 0;}
.coatsec figure.banner{width: 350px;margin: -230px auto 0;}
.coatsec figcaption{font-size: 1.5em;margin-top: 0.5em;letter-spacing: 0.1em;}
}


/* ==========================================================================
#coat2
========================================================================== */
#coat2{height: auto;position: relative;margin-top: 2em;}
#coat2 .maincopy{width: 90%;margin: 0 auto; padding: 0px 0 50px;text-align: left;}
#coat2 .maincopy h1{font-size:2em;margin: 0em 0  0.5em;text-align: center;}
#coat2 .maincopy h2{font-size:1.25em;}
#coat2 .maincopy h2 i{font-size:75%;}
#coat2 ul.banner{width: 300px;margin: 0 auto;top:-30px;}
#coat2 ul.banner li{width: 40%;margin-bottom: 20px;}
#coat2	.point-img{display: none;}

@media (min-width: 559px){
#coat2	.point-img {
display: block;
position: absolute;top:-60px;left:0;
z-index: -20;
	}
#coat2	.point-img img{height: 600px;width: auto;}
#coat2 .container{padding-left: 20%;}
#coat2 .maincopy h1,#coat2 .maincopy h2,#coat2 .maincopy h3,#coat2 .maincopy p,#coat2 .maincopy small{text-align: left;}
#coat2 .maincopy h1{font-size:2.5em;}
#coat2 .maincopy h2{font-size:1.6em;line-height:1.5;}
#coat2 .maincopy h2 em{display: block;}
#coat2 .maincopy p{font-size:1.2em;line-height:1.8;}
#coat2 ul.banner{width: 300px;margin-left: 40px;top:0;justify-content: flex-start;}
}

@media (min-width: 767px){
#coat2 ul.banner{width: 600px;}
#coat2 ul.banner li{width: 130px;margin-bottom: 20px;}
}


/* ==========================================================================
#coat3
========================================================================== */
.coat3{	background: url(../img/common_section_backgrade.jpg);padding-bottom: 1em;}
.coat3 h1{font-weight: bold;font-size: 1.5em;padding: 1em 0;line-height: 1.4;}
.coat3 h1 em{display: block;}

.coat3 #servicesSlider{margin-top: 0px;}

.coat3 .img img {
width: calc(100% + 0px) !important;
width: 100% !important;
transition: opacity 0.25s, transform 0.25s;
transform: translate3d(0px, 0, 0);
}


@media (min-width: 767px){
.coat3 .maincopy {	height: 200px;}
.coat3 .maincopy{width: 90%;margin: 0 auto;font-size: 2.5em;}
}




/* ==========================================================================
#coat4
========================================================================== */
.coat4{
background: url(../img/common_section_backgrade.jpg);
margin-top: 3em;
padding-bottom: 1em;
}
#coat4	.point-img{display: none;}
#coat4 ul.banner{width: 300px;margin: 0 auto;top:-30px;}
#coat4 ul.banner li{width: 40%;margin-bottom: 20px;}
#coat4 h1.maincopy{font-size: 1.6em;}
#coat4 h1.maincopy em{display: block;}

#coat4 div.maincopy{overflow: hidden;text-align: left;width: 90%; margin: 0 auto;padding: 0px 0em 20px 0em;}
#coat4 p.iso{float: left;margin-right: 1em;position: relative;top:-1em;}
#coat4 p.iso img{width: 110px;}
#coat4 p.read small{display: block; line-height: 1.6;margin-top: 0.5em;}
#coat4 .maincopy2 h2{font-size:1.25em;color: #2ea3b3;margin-bottom: 0;}

@media (min-width: 559px){
#coat4	.point-img {
display: block;
position: -webkit-sticky; /* Safariに対応する */
position: sticky;
top:0px;left:0;
z-index: -1;
	}
#coat4	.point-img img{
	height: 600px;
	width: auto;
	display: block;
	position: absolute;}
#coat4 .container{padding-left: 150px;}
}

@media (min-width: 767px){
#coat4 ul.banner{width: 550px;}
#coat4 ul.banner li{width: 120px;}
}
/*.point-imgの移動ズレ修正*/
#coat6{position: relative;z-index: 10;background: #fff;margin-top: -1em;}
#coat7{position: relative;z-index: 9;background: #fff;margin-top: -1em;}


/* ==========================================================================
#coat5 #fardlass_graph
========================================================================== */
#coat5 .maincopy{padding: 40px 0 10px;}
#coat5 h1 img {width: 80vw;}
@media (min-width: 559px){#coat5 h1 img {width: 350px;}}

#coat5 .accordion{width: 90%; margin: 0 auto;}
#coat5 .accordion-button{background: #fff;padding: 1rem;display: inline-grid;}
#coat5 .accordion .accordion-button p{margin: 10px 3em 10px 0;}
#coat5 .accordion .accordion-button p em{display: block;margin-bottom: 5px;}
#coat5 .accordion .accordion-button img{height: 35px;}
.accordion-button::after{position: absolute;right: 15px;}

#coat5 .accordion .accordion-item{margin-bottom: 1em;}
#coat5 .accordion h3{color: #000;font-weight: bold;font-size: 1em;}
#coat5 .accordion span{color: #7eafe0;font-size: 0.7em;display: block;}

@media (min-width: 767px){
#coat5 .accordion{width: 90%; margin: 0 auto;}
#coat5 .accordion-button{display: flex;justify-content: space-between; }
#coat5 .accordion-button h3{display: block;font-size: 1.25em;}
#coat5 .accordion-button h3 em{display: block;font-size: 70%;}
}
@media (min-width: 992px){#coat5 .accordion .accordion-button p em{display: inline-block;margin-right: 1em;}
}

/* ==========================================================================
#coat6 施工事例
========================================================================== */
#coat6 h1.maincopy {font-size: 1.5em;padding: 40px 0 20px;}
#coat6 .jirei_container{
width: 90%;
margin: 0 auto;
padding-bottom: 3em;
display: flex;justify-content:space-between;flex-wrap: wrap;}
.jirei_box{width: 47%;margin-bottom: 15px;}

@media (min-width: 767px){
.coat6 .jirei_container{
	}
.jirei_box{width: 32%;}
.jirei_box:nth-child(2){margin: 0 1%;}
}

.bt-jirei{
cursor: pointer;
width: 47%;
display: table-cell;
vertical-align: middle;
padding: 0 10px 10px;
white-space: wrap;
border: 1px #aaa solid;
background-color: #f7f7f7;
margin-bottom: 15px;
vertical-align: middle;
}
.jirei_box button.btn{white-space: normal;height: 4em;outline: none;}
.bt-jirei img{width: 100%;height: 80px; display: block;object-fit: cover;}

.bt-jirei:hover,.bt-jirei:focus{cursor: pointer;opacity: 0.7;background-color:#f7f7f7 }
.bt-jirei .btn-primary:hover, .bt-jirei .btn-primary:focus, .bt-jirei .btn-primary:active, .bt-jirei .btn-primary.active, .bt-jirei .open .bt-jirei .dropdown-toggle.btn-primary {
color: transparent;
background-color: #aad0f0;
border-color: #888;
}

@media (min-width: 500px){.bt-jirei img{height: 120px; }}
@media (min-width: 768px){.bt-jirei img{height: 180px; }}


.jirei_box .offcanvas-title{font-weight: bold;font-size: 1.5em;}
/*.jirei_box .offcanvas-title::after{content: " 施工事例"}*/
.jirei_box .offcanvas {background:rgba(255, 255, 255, 1);}
.jirei_box .offcanvas-bottom {width: 100%;height: 100vh;top: 6em;
}


.jirei_box .offcanvas-body .jirei_img{display: flex;justify-content:flex-start;flex-wrap: nowrap;}
.jirei_box .offcanvas-body .jirei_img figure img{width: 250px;height: 320px; margin: 0 5px 5px 0px;object-fit: cover;}
@media (min-width: 500px){.jirei_box .offcanvas-body .jirei_img figure img{width: 320px;height: 400px;}}
@media (min-width: 768px){.jirei_box .offcanvas-body .jirei_img figure img{width: 600px;height: 500px;}}

.jirei_box .offcanvas{
/* box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.5);*/
	border: 1px solid #aaa;
	filter: drop-shadow(0px 1px 4px rgba(0,0,0,0.6));
}




/* ==========================================================================
#coat7 Dr.ハドラス施工モデルケース
========================================================================== */
#coat7{margin-bottom: 3em;}
#coat7 h1.maincopy {font-size: 1.5em;padding: 40px 0 20px;}
#coat7 ul{
	width: 90%;
	margin: 0 auto;
	padding: 0;
}
#coat7 ul li{
display: block;
	border: 1px #aaa solid;
	padding: 10px;
background-color: #f7f7f7;
margin-bottom: 15px;
background-size: 100%;
background-repeat: no-repeat;
}
#coat7 ul li div.h-box{display: flex;}
#coat7 ul li figure{margin:0 10px 20px 0;width:40%;}
#coat7 ul li div.h-box div{width:60%;}
#coat7 ul li div h2{font-weight: bold;font-size: 1.4em;}
#coat7 ul li div h2 span{font-weight: normal;font-size: 12px;display: block;color: #4b62a9;padding-top: 5px;}
#coat7 ul li div h3{font-weight: bold;font-size: 26px;line-height: 1;margin-top: 0.3em;}
#coat7 ul li div h3 span{font-size: 70%; padding-left: 0.2em;}
#coat7 ul li p{font-size: 85%;line-height: 1.6;margin-top: 5px;}

@media (min-width: 599px){
#coat7 ul li div.h-box div{width:100%;}
	#coat7 ul{width: 90%;}
}
@media (min-width: 767px){
	#coat7 ul{display: flex;justify-content: space-between;width: 90%;}
	#coat7 ul li{width: 32%;display: block;}
	#coat7 ul li div,#coat7 ul li figure{width:100%;}
	#coat7 ul li div.h-box{display: block;}
}





/* ==========================================================================
下層ページ　除菌施工・コンサルティング
#consulting  #consult1 .consult1
========================================================================== */
#consult1 .h-box{
background-image: none;
padding: 0;
text-align: center;
	margin: 0 auto;
height: auto;
}

#consult1 { background: #000 url('../img/index_section3_bgimg.jpg') no-repeat left bottom; background-size: cover;  height: 400px; }
#consult1 h1,#consult1 h2,#consult1 h3,#consult1 .read { color: #ffffff;filter: drop-shadow(0px 0px 9px rgba(0,0,0,1));}
#consult1 .read{text-align: center; font-size: 1.2em;font-weight: bold;margin-top: 1em;}
#consult1 h1{font-size: 1em;line-height: 1.6;padding-bottom: 10px;}
#consult1 h2{font-size: 1.25em;}
#consult1 h1 em,#consult1 h2 em{display: block;}
/*#consult1 h2{font-size: 1.25em;}*/
#consult1 p{margin: 0;}
#consult1 .read img{width: 250px;margin-top: 20px; filter: drop-shadow(0px 0px 9px rgba(0,0,0,1));}

@media (min-width: 439px){
	#consult1 h1 em{display: inline;}
#consult1 h1{font-size: 1em;line-height: 1.8;}
#consult1 h2{font-size: 1.5em;line-height: 1.6;}
}


@media (min-width: 768px){
#consult1 { background-position:left center; background-size: cover;  height: 65%; }
#consult1 h2{font-size: 2em;}

	#consult1 h1 em{display: inline;}
#consult1 .read{text-align: center; font-size: 2em;margin-top: 1.5em;line-height: 1.5;}
#consult1 .read img{width: 300px;}
}
@media (min-width: 1240px){
#consult1 { height: 660px; }
#consult1 h1{font-size: 1.6em;line-height: 1.8;}
#consult1 h2{font-size: 2.5em;}
#consult1 .read img{width: 370px;}
}


/* ==========================================================================
#consult2
========================================================================== */

#consult2{position: relative;}
#consult2{background: url('../img/consulting_section2_backimg.jpg') no-repeat center bottom;background-size: cover;}
#consult2 .maincopy{text-align: center;padding: 30px 0 20px;}
#consult2 .read{font-size: 0.8em;line-height: 1.7; width: 90%;margin: 0 auto;text-align: center;padding-bottom: 3em;}
@media (min-width: 413px){#consult2.maincopy h1{font-size:1.5em ;}#consult2 .read{font-size: 100%;}}

@media (min-width: 767px){
#consult2{margin-bottom: 1em;}
#consult2 .maincopy{padding: 20px 0 20px; }
#consult2 .maincopy h1{font-size:1.75em;line-height:1.4;}
#consult2 .maincopy h2{font-size:1.25em ;}
}

@media (min-width: 1240px){
#consult2 .maincopy h1{font-size:2em;line-height:1.6;}
	#consult2 .read{font-size: 1.4em;}
}


/* ==========================================================================
consult3
========================================================================== */
#consult3{width: 90%;margin: 0 auto;}
#consult3 .maincopy h1{font-size: 1.75em;}
#consult3 .maincopy h2{font-size: 1em;font-weight: bold;}

#consult3 ul.banner{
display: block;
top:0;
	margin-top: 2em;
}
#consult3 ul.banner li{width: 80%;}

@media (min-width: 599px){
#consult3 ul.banner{display: flex;}
#consult3 ul.banner li{width: 50%;}
}
@media (min-width: 1024px){
#consult3 ul.banner{width: 900px;justify-content: center;}
#consult3 ul.banner li{width: 380px;}
}


/* ==========================================================================
consult4
========================================================================== */
#consult4{background: url('../img/consulting_section4_backimg.jpg') no-repeat right bottom;background-size: cover;padding-bottom: 3em;}
#consult4 .maincopy h1{font-size: 1.75em;}

.consult-price table{width: 90%;margin: 0 auto 1em;border: 1px #aaa solid;background: rgba(255, 255, 255, 0.51)}
.consult-price th,.consult-price td{padding: 0.25em 20px;}
.consult-price th{width: 100px;}

th.menseki,td.menseki{background: rgba(59, 147, 211, 0.31)}
td.menseki{font-size: 1.75em;font-weight: bold;}
td.price span{display: block;}
td.price strong span{display: inline;font-size: 14px;padding-left: 0.2em;}

td.price strong{font-size: 1.5em;font-weight: bold;}
td.price p{font-size: 0.8em;line-height: 1.4;}

table.sozai{background: transparent;border: none;}
table.sozai th,table.sozai td{display:table-row;}
th.sozai{vertical-align: top;padding: 1em 0;background: transparent;border-bottom: 1px #aaa solid;}
th.sozai h4{font-weight: bold;padding: 12px 0; }
td.sozai{font-size: small;}
td.sozai p{padding: 10px 0;margin: 0;font-size: 1em;line-height: 1.6;}
td.sozai i{font-weight: bold;}



@media (min-width: 768px){
.consult-price table{width: 100%;border: none;margin: 0;}
.consult-price{width: 80%;margin: 0 auto;max-width: 900px;}
.consult-price th,.consult-price td{border-bottom: 1px #aaa solid;padding:1em 0;}
.consult-price .colum3 table{border-top: 1px #aaa solid;}
.consult-price .colum3{	display: flex;}
	
td.menseki{font-size: 1.5em;}
td.price strong{font-size: 1.25em;}
	
table.menseki50{width: 40%;}
table.menseki51-100{width: 30%;}
table.menseki101,table.menseki101{width: 30%;}
table.menseki50,table.menseki51-100,table.menseki101,table.sozai,th.menseki,td.menseki{background: transparent;}
	
table.menseki51-100 th,table.menseki101 th{display: none;width: 0;}
td.menseki50 {width: 25%;}
th.sozai em{display: block;}
td.sozai i{display: inline-block;}
td.sozai p{padding: 0;margin: 0;}
table.sozai th,table.sozai td{display: table-cell;}
}

@media (min-width: 992px){
td.menseki{font-size: 1.75em;}
td.price strong{font-size: 1.5em;}
}


/* ==========================================================================
privacypolicy プライバシーポリシー
========================================================================== */
#privacypolicy .container{
padding: 40px 0 50px;
	background: url(../img/common_section_backgrade.jpg);
	margin-bottom: 3em;

}

#privacypolicy .container .policysec{width: 80%;margin: 0 auto;}
#privacypolicy .container .maincopy{padding: 10px 0 0px;text-align: left;}

@media (min-width: 767px){
	#privacypolicy .container{margin: 0;width: 100%;}
	#privacypolicy .container .policysec {width: 65%;}
}



/* ==========================================================================
Intro
========================================================================== */
.intro { background: #f3f5f8; }
.intro p { margin: 50px 0 0; }
h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }
/* ==========================================================================
Features
========================================================================== */
.features-wrapper, .team-wrapper { margin: 70px 0 0; }
.shadow { text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px; }
.icon { height: 175px; width: 175px; line-height: 175px; max-width: 100%; background: #3dc9b3; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
/* ==========================================================================
iPhone Section
========================================================================== */
.iphone { width: 50%; background: #f3f5f8; float: left; height: 100%; box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); z-index: 1; }
.fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; }
.responsive-services { position: relative; }



/* ==========================================================================
Swag
========================================================================== */
.swag { background: url('../img/plants-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 50px 0; }
.swag h1 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; }
.swag h1 span { display: block; font-size: 25px; margin-top: 20px; }
.down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.8); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; }
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }


/* ==========================================================================
Portfolio
========================================================================== */
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; height: auto; }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(100, 194, 158, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; }
.overlay-effect .img i { font-size: 30px; }
.overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; }
.overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
.overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
.img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; }


/* ==========================================================================
Subscribe
========================================================================== */
.subscribe { background: url('../img/keyboard-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; }
.subscribe h1 { color: #fff; margin-bottom: 40px; }
.subscribe h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; }
.subscribe input[type=text] { background-color: rgba(255, 255, 255, 0.1); border: solid 1px #fff; padding: 20px; width: 30%; color: #fff; }
.subscribe input[type=submit] { background: rgba(201, 61, 72, 0.5); border: solid 1px rgba(201, 61, 72, 0.5); padding: 10px 3em; color: #fff; text-transform: uppercase; letter-spacing: 1px; transition: all 0.5s ease;}
.subscribe input[type=submit]:hover { background: rgb(201, 61, 72); border: solid 1px rgba(201, 61, 72, 1); color: #fff; }
/* ==========================================================================




CTA
========================================================================== */
.ignite-cta { background-color: #242830; padding: 70px 0; }
.ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.ignite-btn:hover, .ignite-btn:focus { color: #3dc9b3; border: solid 1px #3dc9b3; }
/* ==========================================================================
Team
========================================================================== */
.team img { margin-bottom: 40px; }
ul.social-buttons { list-style: none; margin: 0; padding: 0; }
ul.social-buttons li { display: inline-block; margin-right: 10px; }
ul.social-buttons li:last-child { margin-right: 0; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #242830; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; }
.social-btn:hover, .social-btn:focus { background: #3dc9b3; color: #fff; }
.social { margin-top: 25px }
/* ==========================================================================
Contact
========================================================================== */
.up-btn { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.5); display: block; margin: 0 auto; color: #fff; font-size: 18px; line-height: 46px; text-align: center; position: absolute; top: -26px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.up-btn:hover, up-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }
.contact-details { margin: 70px 0; }
.contact-details h2 { font-size: 20px; }
.contact-details h2 span { display: block; color: #3dc9b3; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 15px; }
.contact-wrap { position: relative; }



/* ==========================================================================
Footer
========================================================================== */
footer { background-color: #fff; text-align: center;}


#fotternav .wrapper{ background-color: #fff;text-align: left;height: auto;}
#fotternav .wp3{text-align: left;position: relative; background:url('../img/index_top_bgimg.jpg') no-repeat top center; background-size: cover;height: 40%;}
#fotternav .wp3_inner {position: relative;;width: 200px;margin: 0 auto;padding: 30px 0 0;}
#fotternav .wp3 h1{border-bottom: 1px solid #888;padding: 1em 0;font-size: 110%;font-weight: bold;}
#fotternav .wp3 h1 img{width: 80px;}
#fotternav .wp3 address{margin-top: 1em;font-size: 80%;}

#fotternav h2{font-size: 0.9em;font-weight: bold;}
#fotternav .footernav{width: 80%;border: 1px #ddd solid;border-radius: 10px;margin: 0 auto 2em;padding: 1em;}
	#fotternav ul{list-style: disc;padding-left: 1em;}
#fotternav .footernav li{font-weight: normal;color: #888;font-size: 0.8em;margin-top: 1.5em;}

@media (min-width: 599px){
	#fotternav .wrapper{ display: flex;justify-content: flex-start; flex-wrap: wrap;}
	#fotternav .wp3{width: 60%;height: 300px;}
	#fotternav .footernav{width: 40%;height: 260px;border: none;margin: 0 auto 0em}
}
@media (min-width: 767px){#fotternav .wrapper{margin-top: 30px;}}

footer #copyright{
	width:100%;
	margin-top: 1em;
	position: relative;bottom: 0;
box-shadow: 0px -2px 16px -2px rgba(10,10,10,0.1);
}
footer #copyright{	font-size: 10px;padding:1em 0;margin: 0;}

ul.legals { list-style: none; color: #fff; line-height: 25px; }
ul.legals li { display: inline-block; }
ul.legals li::after { content: " |"; }
ul.legals li:last-child::after { content: ""; }
.legals { text-align: left; }
.credit { text-align: right; }
.indicator{display: none;}



/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 70px; }
ul.slides li { margin-bottom: 20px; }

/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp9 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp9 { background: url('../img/index_section4_bgimg.jpg') no-repeat center center; background-position: 200px 10px; height: 100%; }