@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caveat&display=swap');
/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
	background: #fff;
	font: .81em/150% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666; 
}
a {
	color: #026acb;
	text-decoration: none; 
	outline: none;
}
a:hover {
	text-decoration: underline;
}
p { 
	margin: 0px;
	padding: 0px;
}

/* list */
ul, ol {
	margin: 1em 0 1.4em 24px;
	padding: 0;
	line-height: 140%;
}
li  {
	margin: 0 0 .5em 0;
	padding: 0; list-style: none;
}


/* headings */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	margin: 20px 0 .4em;
	color: #000;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.1em;
}

p{font-size: 20px;}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#container {width:100%; float: left;	}

#top {  width: 100%;  float:left;height:51px; background-color: #7b070a;  border-bottom: 1px solid #46b4ef;color: #ffffff; }
.top-con {  width: 25%;  float:left; padding: 10px 0px 0px 0px;    margin: 0% 0% 0% 5%;  border-right: 1px solid #ae1e22; }
.top-con p{  font-size: 20px;}
.top-ph p{  font-size: 20px;}
.top-ph {  width: 30%;  float:left;  padding: 10px 0px 0px 20px;   margin: 0% 0% 0% 0%;   }
.follow {   width: 10%;  float:right;   margin: 0% 5% 0% 0%; color: #ffffff;font-size: 1.2em; padding: 10px 0px 0px 0px; }

#top-head {  width: 100%;  float:left; padding: 1% 0% 1% 0%; background-color: #ffffff;  }

#logo {  width: 18%;  float:left;  margin: 0% 0% 0% 5%; }

#mmenu {  width: 50%;  float:left; margin: 0% 0% 0% 15%;  }


.nav-link {  color:#000; text-transform: uppercase; margin: 0px 10px 0px 10px; font-size: 1em; padding: 0px;  }

.nav-item { margin: 0px 0px 0px 0px; padding: 0px;  }



.dropdown-menu{ background-color: aqua;}

.drop-icon{color:red;}

.fa.fa-navicon {
  color:#000;
}

/* site logo */


.active img{
  width: 100%;
}


#content {width:100%; float: left; padding: 2% 5% 2% 5%; 	}
#content h1{ font-size:52px;  font-weight:bold; font-family: 'Oswald', sans-serif; color: #7b070a;text-align: center; }
#content p{ font-size:20px;  text-align: center; }

#room {width:100%; float: left; padding: 2% 5% 2% 5%; border: solid 1px; border: #000000; 	}
#room .img1{ width:40%; float: left; margin-right: 3% }
#room .rtext p{ width:50%; float: left; font-size:20px; }
#room .rtext h2{  font-size:20px; font-weight: bold; color: #c70a0a; }

/************************************************************************************
HEADER
*************************************************************************************/

#header{ width:100%; float:left; }
#header img{ width:100%;   }
.carousel-caption h2{font-size:72px; text-align: left; color: #7c7974;  font-weight:bold; font-family: 'Noto Sans JP', sans-serif; margin: -15% 0% 2% -5%;line-height: 30px; position: absolute;
   top:20px;}
.carousel-caption p{font-size:90px; text-align: left; color: #0095e5;  font-weight:bold; font-family: 'Lalezar', cursive; margin: 6% 0% 2% -5%; line-height: 50px;position: absolute;
   top:-100px}

.carousel-indicators .ssa {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin: 10px;
      text-indent: 0;
      cursor: pointer;
      border: none;
      border-radius: 100%;
      background-color: #0000ff;
      box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);      
  list-style-type: square;
}

.carousel-indicators .active {
      width: 18px;
      height: 18px;
      margin: 10px;
      background-color: #ffff99;
}

.carousel-indicators {
    top: 270px;
}

/************************************************************************************
Main Content
*************************************************************************************/

#products{  width:100%;   float:left; padding: 2% 5% 2% 5%; background-color: #cb1b28;  }

#products h2{ font-size:52px; text-align: center; color: #ffffff;  font-weight:bold; font-family: 'Oswald', sans-serif; padding: 0% 0% 2% 0%;}



.pro-box1 { width: 100%;  padding: 3%;height: auto; text-align: center; color: #fff;}
.pro-box1 img {  border-radius: 80%; }

.pro-head{font-size:25px; text-align: center; font-weight:bold;color: #e3f109; margin: 20px 0px 10px 0px; }

.pro-box a:link{ width: 28%; float: left;   margin: 0% 0% 3% 3%; text-decoration: none;}
.pro-box  a:hover{ background-color: #ee4854;color: #3b8af8;  text-decoration: none;  }



#blogs{  width:100%;   float:left; padding: 2% 7% 2% 7%; }
#blogs h2{ font-size:52px; text-align: center; color: #cb1b28; font-weight:bold; font-family: 'Oswald', sans-serif; padding: 0% 0% 2% 0%;}
#blogs h3{ font-size:25px; font-weight:bold; color: #0095e5; margin: 3% 0% 3% 0%; }

.bdate{ font-size:32px; text-align: center;  margin: 0% 0% 2% 0%;}

#help {width:100%; float: left; padding: 2% 10% 2% 10%; background-color: #d50819;	}
#help h4{ font-size:42px;  font-weight:bold;  color: #ffffff; }
#help p{ font-size:37px; color: #ffffff; width: 100%; }
#help .tfield{   color: #0095e5; }
.hh{ margin-top: 3%;}

#people{  width:100%; text-align: center;   float:left; padding: 2% 5% 4% 5%;   }
#people h2{ font-size:52px; text-align: center; color: #c50707;  font-weight:bold;  padding: 0% 0% 2% 0%;}


.people-box { width: 10%; float: left; margin: 0% 45% 0% 45%; }

.ptext{ margin: 1% 5% 1% 5%; font-size: 24px; color:#c50707; font-weight:bold; }
.ptext1{ margin: 1% 5% 0% 5%; font-size: 18px; color:#000; font-weight:bold; }
.ptext2{ margin: 0% 5% 1% 5%; font-size: 14px; color:#535151;  }
#client{  width:100%;   float:left; padding: 2% 5% 4% 5%; background-color: #f0f4f8; }
#client h2{ font-size:32px; text-align: center;  font-weight:bold; font-family: 'Oswald', sans-serif; padding: 0% 0% 2% 0%;}
.car-bt {
    height: 40px;  top:-60px; position: absolute; left: auto;
    width: 150px; right: 60px; background-color: #000; 
   
}



.clogo{ width: 15%; margin: 0% 0% 1% 4%; background-color: aqua;  float: left;  text-align: center;}



/************************************************************************************
FOOTER
*************************************************************************************/

#footer {
	 width:100%; float:left;  background-color:#181818; padding: 1% 5% 1% 5%; color: #ffffff; height:auto; margin-top: 2%; }
#footer a {
	color: #fff;
}

#footer p { font-size: 1.3em; margin-top: 15px;
	color: #fff;
}

.about{  width:22%; float:left; margin:3% 0% 2% 3%; }


.fhead{ color:#FFF; font-size:1.4em; font-weight:bold;  margin-bottom:3%;}
.service{  width:17%; float:left; margin:3% 0% 2% 10%; }
.service li{ list-style: none; list-style-image: url(../images/arrow.png); margin-left: 18px; }
.service1{  width:17%; float:left; margin:3% 0% 2% 2%; }
.service1 li{ list-style: none; list-style-image: url(../images/arrow.png);margin-left: 18px;}
.contact{  width:32%; float:left; margin:3% 0% 2% 13%; }
.contact li{ list-style: none; }



/************************************************************************************
Innerpage
*************************************************************************************/
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  
  
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #e6e8de;
  border-width: 1px 1px 0;
  margin: 0 1em; 
}

#menu .sub-menu li:last-child {
  border-width: 0;
}


 #menu .sub-menu li {
    width: 115%;  background-color: #e6e8de;margin: 0px; color: #000; 
  }	

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: #000; font-size: 18px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
 
}

#toggle-menu, 
#menu a {
  padding: 1em 1em; text-decoration: none;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  background-color: white;
  color: #7b070a;
}

#menu .sub-menu {
  display: none; 
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a {
  color: #000; font-size: 16px;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: #000;;
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}

@media only screen and (min-width: 222em) {
  #menu li {
    
  }
	
	#menu .sub-menu {
  background-color: #2c7ae7;
  border-width: 1px 1px 0;
  margin: 0 1em; width: 658px; 
}


  #menu .sub-menu li {
    width: auto;
  }
	
	
	#menu, 
#toggle-menu {
  
}

	
}

@media only screen and (min-width: 62em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none; 
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 22em;
    z-index: 3000; 
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px; 
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}


/******************************************Inner Content ******************/

#breadcrumb{  width:90%;   float:left; margin:  0% 0% 0% 7%;   }

ul.breadcrumb {
  padding: 20px 16px;font-family: 'Noto+Sans', sans-serif;
  list-style: none;
  background-color: #fff;
}
ul.breadcrumb li {
  display: inline;
  font-size: 14px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">\00a0";
}
ul.breadcrumb li a {
  color: #000;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #878787;
  text-decoration: underline;
}

#inner-content{  width:100%;   float:left; padding: 2% 10% 0% 10%;   }

#inner-content h1{ font-family: 'Montserrat', sans-serif; font-size: 40px; color: #DB0A0D; font-weight: bold; padding-bottom: 6%;   }
#inner-content h3{ font-family: 'Montserrat', sans-serif; font-size: 25px; color: #042C8C; font-weight: bold;   }

#map{ width: 100%; float:left; margin: 5% 0% 0% 0%;}


#other-pro{  width:86%;   float:left; margin: 0% 6% 0% 8%;  }
#other-pro h2{ font-size:25px; font-weight:bold; padding: 0% 0% 0% 1%; }
.other-bt {
    height: 40px;  top:-60px; position: absolute; left: auto;
    width: 150px; right: 60px; background-color: #000; 
   
}

.specification{ width: 100%; float:left; margin: 5% 0% 0% 0%;}

.specification h2{ font-size: 26px; background-color: #000; padding: 1%; color: #fff; text-align: center; margin: 0% 0% 4% 0%;}
.arr{ list-style-image: url(../images/arrow.gif); font-size:20px;}


#inner-pro{  width:100%;   float:left; padding: 0% 10% 0% 10%;   }
#inner-pro h2{ font-size:34px; text-align: center;  padding: 0% 0% 3% 0%; font-family: 'Oswal', sans-serif; }
#inner-pro .box1{  width:22%; text-align: center;   float:left; margin: 0% 0% 2% 0%; padding: 2%; border: solid 1px #9C9898;    }
#inner-pro .box1 h4{font-size:20px; text-align: center; font-weight:bold;color: #180288; margin: 0%; }
#inner-pro .box1 p{font-size:16px; text-align: center; color: #000; margin: 0%; }
#inner-pro .box2{  width:22%; text-align: center;   float:left; margin: 0% 0% 2% 4%; padding: 2%; border: solid 1px #9C9898;    }
#inner-pro .box2 h4{font-size:20px; text-align: center; font-weight:bold;color: #180288; margin: 0%; }
#inner-pro .box2 p{font-size:16px; text-align: center; color: #000; margin: 0%; }
.box2a {font-size:16px; text-align: center; line-height: 16px; color: #000; margin: 0%; }


#inner-pro h4{ font-size:14px;  padding: 3% 0% 3% 0%; font-family: 'Oswal', sans-serif; }
#inner-pro a:link{ text-decoration: none;  }
#inner-pro a:hover{  color: #A09C9C;  }
#probase{  width:100%;  float:left;   margin: 1% 0% 4% 0%; border: solid 1px #9C9898;    }
#probase .basetext1{  width:20%;  float:left;  font-family: 'Oswal', sans-serif;  font-size:14px; padding: 1%;   }
#probase .basetext2{  width:80%; text-align: right;  float:left;  font-family: 'Oswal', sans-serif;  font-size:14px; padding: 1%;   }


.red{ color: #FC0307; font-size: 38px;}



form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

label {display: block;}

input[type=text], select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #343131;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #7e050f;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}