@charset "UTF-8";
/* Body */
html{scroll-behavior: smooth;}
body {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	background-color: #396D53;
	margin-top: 0px; 	margin-right: 0px;
	margin-bottom: 0px;	margin-left: 0px;
	font-style: normal;	font-weight: 200;}

/* Container */
.container {
	width: 100%; max-width: 1100px; 
	margin-left: auto; margin-right: auto;
	height: auto; background-color: #C6F8DD;}

/* Navigation */
#top{width: 100%; height: auto;
	background-color: #28855E;}
#top p{
	font-size: 13px; color: #FFFFFF;	
	padding: 15px 20px; margin: 0;}
#tel{
	padding: 10px;	display: flex;
	justify-content: flex-end;}
#tel img {transition: 0.4s ;}
#tel img:hover {opacity: 0.7;}
header {
	width: 100%;
	height: 135px;
	background-color: #2FA175;}
.logo {
	color: #fff;
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 15px;
	margin-left: 25px;
	letter-spacing: 4px;}
nav {
	width: 100%;
	text-align: right;
	margin-right: 25px;}
header nav ul {
	list-style: none;
	float: right;}
nav ul li {
	float: left;
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	transition: all 0.3s linear;}
ul li a {
	color: #FFFFFF;
	text-decoration: none;}
ul li:hover a {
	color: #EEEEEE;}

/* Hero Section */
.hero {
	background:url("../images/main-bg.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	background-color: #B3B3B3;
	padding-top: 200px;
	padding-bottom: 70px;}
.hero img{width: 50%; height: 50%;}
.light {font-weight: bold;	color: #717070;}

/* About Section */

.text_column a{color:#000;}
.text_column {
	width: 90%;
	margin: auto;
	text-align: justify;
	font-weight: lighter;
	line-height: 25px;
	color: #333333;}
.about {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 35px;
	background-color: #A2F5CD;
	margin-top: 0px;}

.about2 {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 35px;
	background-color: #C6F8DD;
	margin-top: 0px;
}

#map{margin-top: 0px;	 padding-top: 0px; padding-bottom: 20px; background-color: #C6F8DD; clear: both;}
#map iframe{max-width: 1100px!important;}
#map .text_column{margin: 30px 80px; line-height: 1.5;}


.about h2{color: #164930; text-align: center; letter-spacing: 0.2em;}
.about2 h2{color: #164930; text-align: center; letter-spacing: 0.2em;}
.jimusho h3{color: #164930; text-align: left; margin-left: 20px;}




/* More info */
footer {
	background-color: #FFFFFF;
	padding-bottom: 35px;}
.footer_column {
	width: 50%;
	text-align: center;
	padding-top: 30px;
	float: left;}
footer .footer_column h3 {
	color: #B3B3B3;
	text-align: center;}
footer .footer_column p {
	color: #717070;
	background-color: #FFFFFF;
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;}
.button {
	font-size: 16px;
	width: 300px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	background-color: #2FA175;
	color: #FFFFFF;
	transition: all 0.3s linear;}
.button:hover {background-color: #47C994;cursor: pointer;}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #28855E;
	color: #FFFFFF;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;}
.copyright p{font-size: 10px;}
.copyright a{color: #FFFFFF;}
.copyright a:visited{color: #FFFFFF;}


.footer_banner p{text-align: center;}
.footer_banner h2{color: #164930; text-align: center; letter-spacing: 0.2em;}
footer {display: inline-block;}
.hidden {	display: none;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* PC */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media (min-width: 1097px) {
	
.hero_header {
	color: #FFFFFF;
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 50px;
	letter-spacing: 4px;
	animation: fadein 3s ease-out forwards;}


.foot{
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #28855E;
	color: #FFFFFF;
	letter-spacing: 2px;
	border-top-width: 2px;
}

.foot h2{font-size:20px;}

	/* Parallax Section */
.banner {
	padding-top: 50px;
	background-color: #2D9AB7;
	background-image: url("../images/build.jpg");
	height: 300px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;}
.bannerin{width:600px; margin: auto; }
.bannerin img{width: 100%;}

.parallax {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;}

.banner img{
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;}

.gallery{
    display: flex;
    flex-wrap: wrap;}
.gallery>div{
    width: 30%;
	margin: 1%;
}
	

.thumbnail  img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	padding: 10px;
	transition:0.4s all;}

.thumbnail img:hover{
  transform:scale(1.05,1.05);
  transition:0.4s all;}

	
.jimusho{
    display: flex;
    padding: 20px;
}
.jimusho img{margin: 20px; margin-top: 50px;}
.jimusho>div{
    width: 50%;
    padding: 10px;
}
	
	
.foot{
    display: flex;
    padding: 20px;
	height: 200px;
}
.foot img{height: 100%; bottom: 0; margin-top: 10px;}
.foot>div{
    width: 50%;
    padding: 10px;
}
	
	.footer_banner {
	background-color: #C6F8DD;
	padding-top: 30px;
	padding-bottom: 30PX;
	margin-bottom: 0px;
	background-repeat: repeat;}
	
}/* end */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Small Tablets */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media (min-width: 321px)and (max-width: 1096px) {
	
#tel{
	padding: 10px;
	display: flex;
	justify-content:center;}

header {
	width: 100%;
	height: auto;
	background-color: #2FA175;}

	
	/**
#map {
	position: relative;
	width: 100%;
	padding: calc(500 / 1100 * 100%) 0 0;
	}
 
#map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}  **/
	
	
	
#map iframe{max-width: 100%!important;  max-height: 320px!important;}
#map .text_column{margin: 30px 20px 10px; width: calc(100% - 40px); line-height: 1.5;}
	
	
.w50 img{width: 70%; margin: 30px;}

.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;}

	.hero {
	background:url("../images/main-bg.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	background-color: #B3B3B3;
	padding-top: 100px;
	padding-bottom: 50px;}

.hero_header {
	margin-left: 20px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	letter-spacing: 4px;
	text-align: left;
	color: #FFFFFF;
	animation: fadein 3s ease-out forwards;}

.hero img{width: 100%; height: 100%;}
.jimusho img{width: 100%; height: 100%;}

.foot{
	padding-top: 20px;
	height: 400px;
	background-color: #28855E;
	color: #FFFFFF;
	letter-spacing: 2px;
	border-top-width: 2px;}
	
.foot h2{font-size:20px;}
.foot img{height: 100%; bottom: 0; margin-top: 10px;}
.gallery{
    display: flex;
    flex-wrap: wrap;}
.gallery>div{
    width: 45%;
}
		
.thumbnail:nth-child(odd){padding-right: 10%;}

.thumbnail  img{  max-width: 100%; max-height: 100%;}

	
	
nav {
	text-align: center;
	margin: auto;
	display: inline-block;	}
header nav ul {
	list-style: none;}
nav ul li {
	float: left;
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	transition: all 0.3s linear;}
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}
ul li:hover a {
	color: #EEEEEE;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
#formWrap p{margin-bottom: 20px;}
	
	form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	padding: 10px;
	width:70%;
}

	/* Parallax Section */
.banner {
	margin-top: 30px;
	padding-top: 20px;
	background-color: #2D9AB7;
	background-image: url("../images/build.jpg");
	height: 250px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;}

.bannerin {width: 100%;}
.bannerin img{width: 100%; height: 100%;}
	

.banner img{
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
	
.footer_column {
	width: 100%;
}

	
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
	
.jimusho{
    display: block;
    padding: 0px;
	padding-bottom: 20px;
}
.jimusho img{margin-top: 20px;}
.jimusho>div{
    width: 100%;
    padding: 0px;
}
	.footer_banner {
	background-color: #C6F8DD;
	padding-top: 20px;
	padding-bottom: 20PX;
	margin-bottom: 0px;
	background-repeat: repeat;}
	
	
}/* end */


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Mobile */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.gallery{
    display: flex;
    flex-wrap: wrap;}
.gallery>div{
    width: 50%;
}
	
.footer_column {
	width: 100%;
	margin-top: 0px;
}
	.hero img{width: 100%; height: 100%;}

.w50 img{width: 70%; margin: 30px;}

.foot{
	padding-top: 20px;
	height: 200px;
	background-color: #28855E;
	color: #FFFFFF;
	letter-spacing: 2px;
	border-top-width: 2px;
}

.foot h2{font-size:20px;}

	

.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}

	/* Parallax Section */
.banner {
	margin-top: 30px;
	padding-top: 20px;
	background-color: #2D9AB7;
	background-image: url("../images/build.jpg");
	height: 250px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;}
	
.bannerin {width: 100%;}
.bannerin img{width: 100%; height: 100%;}

.hero_header {
	margin-left: 20px;
	padding-left: 10px;
	padding-right: 10px;

	line-height: 22px;
	letter-spacing: 4px;
	text-align: left;
	color: #FFFFFF;
	animation: fadein 3s ease-out forwards;}

	
	/**
#map{margin-top: 0px; 
  position: relative;
  width: 100%;
  padding: calc(500 / 1100 * 100%) 0 0;}
 
#map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}  **/
	
	
	
.jimusho{
    display: block;
    padding: 0px;
}
.jimusho img{margin: 20px; }
.jimusho>div{
    width: 100%;
    padding: 10px;
}
	.footer_banner {
	background-color: #C6F8DD;
	padding-top: 20px;
	padding-bottom: 20PX;
	margin-bottom: 0px;
	background-repeat: repeat;}
	
#formWrap p{margin-bottom: 20px;}
	
	form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	padding: 10px;
	width:70%;
}

	
	
}/* end */




/* メールフォーム */

#formWrap {
	width:900px;
	margin:auto;	
}
#formWrap p{margin-bottom: 20px;}

table.formTable{
	background: #FFF;
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

@media screen and (max-width:572px) {
#formWrap {
	width:95%;
}
	
#formWrap p{margin-bottom: 20px;}

table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
}
}



@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}}
@keyframes zoomin {
  0% {
    opacity: 0;
    transform: scale(0.9); 
  }
  100% {
    opacity: 1;
    transform: scale(1); 
  }}



@media screen and (min-width:768px) {
	section {padding:80px 0; line-height: 2;}
	h2{font-size:1.8rem;}
	.jimusho img{max-width: 100%; margin: 0px;}
	.jimusho {    display: flex;    padding: 20px; align-items: flex-end;}
	.jimusho h3{font-size:1.4rem; line-height: 1.5;}	
	#map .text_column{line-height: 2;}
}