@charset "utf-8";
/* CSS Document 天徳町 */


article{
	 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 1.6rem;
	line-height: 2;
	background-image: url(../img/base.png);
	color:#28302f;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clear{clear: both;}


article #contesntsWrapper {
	width: 100%;
	border: none;
}


article .main{
	width:95%;
	max-width: 950px;
	margin: 0 auto;
    position: relative;
}

article h2{font-size:160%;
	text-align: center;
	font-family: fot-tsukuardgothic-std, sans-serif;
	color:#367c75;
	margin-bottom: 50px;	
}

.catch{font-size:140%;
	text-align: center;
	font-family: fot-tsukuardgothic-std, sans-serif;
	color:#367c75;
	margin-bottom: 50px;
	font-weight: 800;
}

.catch2{
	font-size:120%;
	border: 1px solid;
	margin: 0 auto;

	padding: 24px;
	line-height: 2em;
	width: 50%;
}


article h3{
	font-size:160%;
	 font-family: fot-tsukuardgothic-std, sans-serif;
	 color:#fff;
	background-image: url(../img/h2back.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 75px;
	width: 300px;
	line-height: 75px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	
}


article h4{
	font-size:140%;
	
	background:#debcb9; 
	margin-bottom: 50px;
	margin-top: 50px;
	font-weight: normal;
	display: inline-block;
	padding: 16px;
}



.back1{
	background-image: url(../img/cork.png);
	background-repeat: repeat;
}


.back1{
	background-image: url(../img/old.png);
	background-repeat: repeat;
}

.mb50{margin-bottom: 50px;}
.mb100{margin-bottom: 100px;}
.mb150{margin-bottom: 150px;}

.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}
.mt150{margin-top: 150px;}

.pt50{padding-top: 50px;}
.pt75{padding-top: 75px;}
.pt150{padding-top: 150px;}
.pt100{padding-top: 100px;}
.pb50{padding-bottom: 50px;}
.pb75{padding-bottom: 75px;}
.pb100{padding-bottom: 100px;}
.pb150{padding-bottom: 150px;}


.w700{
	width: 600px;
	margin: 0 auto;
}
.w600{
	width: 600px;
}

/* ---------------------------
セクション
------------------------------ */	
#top,#plan,#info,#map,#gmap{
	margin: 0 auto;
	max-width: 950px;
}


#lead{
	position: relative;
	max-width: 950px;
	margin: 0 auto;
}

#lead span{font-weight: 800;}

.img1{
	position: absolute;
	bottom:0;
	left:0;
}

.text1{
	max-width:500px;
	margin: 0 auto;
}

#plan{
	text-align: center;
	position: relative;
}






.colum1l{
	width: 40%;
	float:left;
}

.colum1r{
	width: 58%;
	float:right;
}

.tool2{
	position: absolute;
	bottom:10%;
	right: 0;
}



#info dl {
	font-size:140%;
	margin:0 auto;
	 width:100%;
 
} 

#info dt{
 
 	padding:3px 2% 4px;
  	margin:0;
	 float:left;
	display: inline-block;
	font-weight: 800;
	box-sizing: border-box;
}

#info dd {

  float:left;
  padding:3px 2% 4px;
  margin:0;

}



/* ---------------------------
フォトラマ
------------------------------ */	
section#photo{
margin: 0 auto ;
	text-align: center;
	padding: 10px 0 60px;
	box-sizing: border-box;
}

#photo .fotorama{
	margin:0 auto;	
	max-width: 950px;
}


#photo:after{
	content: "";
	clear: both;
	display: block;
}



/* ---------------------------
お問い合わせ
------------------------------ */	

#form{
	margin: 0 auto;
	background-image: url("../img/formback.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding: 60px;
	
}




#form p{
	display: block;
	width: 380px;
	height: 70px;
	margin: 0 auto;
	
}


form {
	display: inline-block;
	position: relative;
}
form:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
		inset 0 0 100px rgba(0, 0, 0, 0.2);
	background: rgba(0, 255, 0, 0.1); /* カラーを重ねる */
}


.bt{
	border: 3px solid #fff;
	width: 380px;
	margin: 0 auto;
	background: rgba(255,255,255,0.7);
}

.bt:hover{
	border: 3px solid #59706c;
	 background: rgba(255,255,255,0.6);
	width: 380px
}

/* ---------------------------
詳細
------------------------------ */


#detail{	
	max-width: 950px;
	margin:0 auto;
	display: block;
}

#detail table{
border-collapse: collapse;
margin:60px auto;
box-sizing: border-box;
	display: block
}

#detail table th,td {
padding: 10px 30px;
border-bottom: 1px solid #171918;
}

#detail table th {
width:25%;
text-align: left;
}

#detail table td {
width:75%;
text-align: left;
}

/* ---------------------------
お問い合わせ
------------------------------ */	

#form{
	padding-top: 200px;
	padding-bottom: 200px;
}

#form a{
	color:#fff;
	text-decoration: none;
	font-size:130%;}
	
#form div{
	display: block;
	width: 380px;
	height:70px;
	margin: 0 auto;
	text-align: center;
	line-height: 70px;
	
	
}


#bt{
	background: rgba(86,74,74,0.9);
	width: 380px;
	height: 70px;
	display: block;
}

#bt:hover{
	 background: rgba(86,74,74,0.7);
}




/* navi 
______________________*/
article #navi{
	z-index: 1000;
	height: 60px;
	width: 100%;
	background: rgba(255,255,255,0.63);
	border-bottom: 6px solid rgba(76,114,124,0.9);
	max-width: 100%;
	font-size:120%;
}


.fixed {
    position: fixed;
    top: 56px;
    padding: 0;
    width: 100%;
    z-index: 1000;
}
article #navi ul{
	max-width:930px;
	 margin:0 auto;
	display:block;
	 z-index:50;
}

article #navi ul li a h3:hover{
	color:#B0B0B0;
}

article #navi ul img{
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
}
article #navi ul li h3{
	color:#4c727c;
	font-size:100%;
    font-weight: 500;
	padding-top:10px;
	display:block;
	float:left;
	width:16%;
	text-align: center;
	background: none;
	height: 60px;
	line-height: 60px;
	
}




/* ---------------------------
グーグルマップ
------------------------------ */	


#gmap{
	width: 85%;
	height:600px;
	margin: 0 auto;
position: relative;

}

#gmap iframe{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
}



/* ---------------------------
アニメーション
------------------------------ */	


.fuwafuwa {
	-webkit-animation-name:fuwafuwa; 
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease-in-out;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease-in-out;
}
/* fuwafuwa */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}

@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

#toform {
  height: 90px;
  width: 90px;
  position: fixed;
  bottom: 3%;
  right: 1.5%;
  z-index: 11;
  line-height: 90px;
  background: #5f7774;
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
}
#toform:hover {
  transform: scale(1.2);
  background: #EE6F57;
}
#toform a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: absolute;
  top: 22%;
  left: 22%;
}
#toform span {
  align-self: center;
  color: #FFFFFF;
  font-size: 50px;
}
.bl_backToTop {
  z-index: 98;
}
#toform.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#toform.DownMove {
  animation: DownAnime 1s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(200px);
  }
}
/*スマホ表示*/
@media screen and (max-width:768px) {
  #toform {
    height: 70px;
    width: 70px;
  }
  #toform span {
    font-size: 40px;
  }
}

/* ---------------------------
スマホ対応
------------------------------ */	


@media screen and (max-width: 768px) {
	article img {
		width: 100%;
	}
	#top,#plan,#info,#map,#gmap,#lead,#photo,#detail{
		width: 95%;
		margin: 0 auto;
	}
	#gFooter{
		margin-top: 0;
	}
	.w700{
		width:100%;
	}
	.w600{
		width: 100%;
	}
	.catch2{
		width: 100%;
	}
	article #navi ul li h3{
		font-size: 1.6rem;
	}
	#form div{
		width: 100%;
	}
	#form div img{
		position: relative;
		top: 7px;
	}
	#detail table th, #detail table td {
		display: block;
		width: 100%;
		height: auto;
		border-block-end: 0px;
		padding: 3px 10px;
  	}
	#detail	 table th {
		background-color: #7F92903B;
	  }
	.img1{
		bottom: -120px;
		left: inherit;
		right: 0;
	}
	.tool2{
		bottom: 0;
	}
}