@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
	background: #FFF ;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1rem ;
}

a {
	text-decoration: none ;
	transition: 0.4s ;
}

a:hover {
	text-decoration: none ;
}

h2 {
	font-weight: 700 ;
	color: #ea5504 ;
	font-size: 1.5rem ;
	margin-bottom: 20px ;
	border-left: 3px solid #ea5504 ;
	padding-left: 7px ;
}



.navi {
	padding: 5px 0 ;
	background: #facd89 ; 
	height: auto ;
	font-weight: 400 ;
}



.logo img {
	max-height: 24px ;
}

.menu {
	text-align: right ;
}

.menu a {
	color: #ea5504 ;
	font-size: 1rem ;
}

.menu a:hover {
	color: #fff ;	
}

.gaiyou {
	padding: 70px 0 50px ;
	background: url("../gaiyou_bg.jpg") center bottom no-repeat fixed ;
	background-size: cover;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px dotted #555;
}

.access {
	padding: 70px 0 ;
	background: #FAFAFA ;
	border-bottom: 1px solid #DDD ;
}

.access img {
	border: 1px solid #CCC ;
	padding: 15px ;
}

.gmap {
	position: relative;
  padding-bottom: 46%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.gmap iframe,
  .gmap object,
  .gmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

/* Contact Section
--------------------------------*/
.form h5 {
	color: #ea5504;
}

.form p {
	color: #888 ;
	font-size: 13px ;
}


#contact {
  padding: 60px 0;
}

#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 10px;
  color: #ea5504;
}

#contact .contact-info address, #contact .contact-info p {
  margin-bottom: 0;
  color: #000;
}

#contact .contact-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#contact .contact-info a {
  color: #000;
}

#contact .contact-info a:hover {
  color: #00A199;
}

#contact .contact-address, #contact .contact-phone, #contact .contact-email {
  margin-bottom: 20px;
}

form input {
	backface-visibility: #F00 ;
}

@media (min-width: 768px) {
  .contact-address, .contact-phone, .contact-email {
    padding: 20px 0;
  }
}

@media (min-width: 768px) {
.contact-phone {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
}

.php-email-form {
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 30px;
}

.php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #00A199;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #00A199;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.php-email-form input, .php-email-form textarea {
  padding: 10px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
	width: 100% !important ;
}

.php-email-form input::focus, .php-email-form textarea::focus {
  background-color: #00A199;
}

.php-email-form .text-center.send-button input {
  background: #ea5504;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  cursor: pointer;
}

.php-email-form .text-center.send-button input[type="submit"]:hover {
  background: #ea5504;
	opacity: 0.7 ;
}


#mailform input {
	border-radius: 3px ;
	
}

.score {
	padding: 50px 0 70px ;
	text-align: center ;
}

.score a {
	background: #ea5504;
	display: inline-block ;
  border: 0;
  padding: 10px 50px;
  color: #fff;
  transition: 0.4s;
	text-align: center ;
	font-size: 1.5rem ;
	font-weight: bold ;
	border-radius: 5px ;
}

.score a:hover {
	opacity: 0.7 ;
}

.footer {
	background: #626262 ;
	text-align: center ;
	color: #FFF ;
	font-size: 0.8rem ;
	padding: 10px 7px ;
	
	line-height: 0.8rem ;
}

.footer p {
	margin-bottom: 0 ;
}

.page-top {
	position: fixed;
  right: 8px;
  bottom: 40px;
  display: none;
	z-index: 2000 ;
}

a.page-top {
	display: block;
  color: #FFF;

  text-decoration: none;
	font-size: 20px ;
	width: 30px;
  height: 30px;
  border-radius: 50%;
	background: #ea5504;
	text-align:center;
  line-height: 0px;
	line-height: 24px ;
}

a.page-top:hover {
	background: #facd89 ;
}


@media screen and (max-width: 767px) {
	.navi {
	padding: 3px 0 ;
}

	.main-img {
		padding-top: 30px ;
	}
	
	.logo img {
	max-height: 20px ;
}
	
	.menu a {
	font-size: 0.7rem ;
}
	.gmap {
            position: relative;
            padding-bottom: 90%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
            }
             
            .gmap iframe,
            .gmap object,
            .gmap embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            }
}