/* CSS Document */

/*
========================================================================================================================================
位置調整
========================================================================================================================================
*/
.m0 {margin:0px;}
.m5 {margin:5px;}
.m10 {margin:10px;}
.p0 {padding:0px;}
.mb0 {	margin-bottom:0px;}
.mb5 {	margin-bottom:5px;}
.mb8 {	margin-bottom:5px;}
.mb10 {	margin-bottom:10px;}
.mb15 {	margin-bottom:15px;}
.mb20 {	margin-bottom:20px;}
.mb30 {	margin-bottom:30px;}
.mb40 {	margin-bottom:40px;}
.mb50 {	margin-bottom:50px;}
.mb60 {	margin-bottom:60px;}
.mb100 {	margin-bottom:100px;}
.mb02em{ margin-bottom:0.2em;}
.mb05em{ margin-bottom:0.5em;}
.mb1em{ margin-bottom:1em;}
.mb2em{ margin-bottom:2em;}
.mb3em{ margin-bottom:3em;}
.mb4em{ margin-bottom:4em;}
.mb5em{ margin-bottom:5em;}
.mb100 { margin-bottom:100px;}
.mauto { margin:auto;}
.mt0 {	margin-top:0px;}
.mt5 {	margin-top:5px;}
.mt10 {	margin-top:10px;}
.mt15 {	margin-top:15px;}
.mt20 {	margin-top:20px;}
.mt30 {	margin-top:30px;}
.mt40 {	margin-top:40px;}
.mt50 {	margin-top:50px;}
.mt80 {	margin-top:80px;}
.mt-05{ margin-top:-0.5em}
.mt-50{ margin-top:-140px}
.mlt1 {	margin-left:1em;}
.ml0 { margin-left:0px;}
.ml4 { margin-left:4px;}
.ml5 { margin-left:5px;}
.ml7 { margin-left:7px;}
.ml8 { margin-left:8px;}
.ml10 {	margin-left:10px;}
.ml12 {	margin-left:12px;}
.ml13 {	margin-left:13px;}
.ml15 {	margin-left:15px;}
.ml20 {	margin-left:20px;}
.ml24 {	margin-left:24px;}
.ml25 {	margin-left:25px;}
.ml30 {	margin-left:30px;}
.ml35 {	margin-left:35px;}
.ml40 {	margin-left:40px;}
.ml50 {	margin-left:50px;}
.ml60 {	margin-left:60px;}
.ml70 {	margin-left:70px;}
.ml75 {	margin-left:75px;}
.ml100 {	margin-left:100px;}
.ml150 {	margin-left:150px;}
.ml270 {	margin-left:270px;}
.ml300 {	margin-left:300px;}
.ml350 {	margin-left:350px;}
.ml-20 { margin-left:-20px;}
.mr5 {	margin-right:5px;}
.mr10 {	margin-right:10px;}
.mr20 {	margin-right:20px;}
.mr30 {	margin-right:30px;}
.mr100 {	margin-right:100px;}
.mr130 {	margin-right:100px;}
.vatop { vertical-align:top;}
.p20{ padding:10px;}
.p20{ padding:20px;}
.pl0{ padding-left:0px}
.pl16{ padding-left:16px}
.pl20{ padding-left:20px}
.pl30{ padding-left:30px}
.pl50{ padding-left:50px}
.pl55{ padding-left:55px}
.pl70{ padding-left:70px}
.pl75{ padding-left:75px}
.pb0{ padding-bottom:0;}
.pb02em{ padding-bottom:0.2em;}
.pb5{ padding-bottom:5px}
.pb10{ padding-bottom:10px}
.pb30{ padding-bottom:30px}
.pb4em{ padding-bottom:4em;}
.pt10{ padding-top:10px}
.pt20{ padding-top:20px}
.pt30{ padding-top:30px}
.pr0{ padding-right:0;}
.pr30{ padding-right:30px;}
.pt27em{ padding-top:5.1em;}

/*
========================================================================================================================================
ライン調整
========================================================================================================================================
*/
.lh-100{line-height:100%;}
.lh-120{line-height:120%;}
.lh-140{line-height:140%;}
.lh-180{line-height:180%;}

/*
========================================================================================================================================
ボーダー
========================================================================================================================================
*/

.boder1{
	border-bottom:1px solid #F39
}

/*
========================================================================================================================================
画像枠
========================================================================================================================================
*/
.wak{
	padding:5px;
	border:1px solid #999;
	margin-bottom: 5px;
	background-color:#FFF;
}

.wak-l{
	padding:5px;
	border:1px solid #999;
	margin:10px;
	float:left;
}

.wak-r{
	padding:5px;
	border:1px solid #999;
	margin:0 0 10px 10px;
	float:right;
}


/*
========================================================================================================================================
テキスト調整
========================================================================================================================================
*/
.ti-1{	text-indent:-1em;}
.ti-15{	text-indent:-1.5em;}
.ti1{	text-indent:1em;}
.ti0{	text-indent:0em;}


/*
========================================================================================================================================
文字装飾
========================================================================================================================================
*/
.red {	color:#FF0000;}
.pink { color:#F66}
.green {	color:#009900;}
.orange {	color:#FF9900;}
.blue {	color:#0066FF;}
.gray {	color:#CCCCCC;}
.yellow {	color:#FFFF33;}
.d-blue{ color:#036}
.brown{ color:#960;}
.winered{ color:#C36;}
.parple{ color:#639;}
.fs08 {	font-size:0.8em;}
.fs09 { font-size:0.9em;}
.fs11 {	font-size:1.1em;}
.fs12 {	font-size:1.2em;}	
.fs14 {	font-size:1.4em;}
.fs16 {	font-size:1.6em;}
.fs18 {	font-size:1.8em;}
.fl1 {	line-height:1em;}
.fl18 {	line-height:1.8em;}
.fl2 {	line-height:2em;}
.txtB {	font-weight:bold;}
.txtR {	text-align:right;}
.txtC {	text-align:center;}
.txtU { text-decoration:underline;}
.txtI { text-indent:-1em; margin-left:1em;}
/*
========================================================================================================================================
フロート
========================================================================================================================================
*/
.fl-l{	float:left;}
.fl-r{	float:right;}
.cl-b{	clear:both;}
/*
========================================================================================================================================
clearfix
========================================================================================================================================
*/

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
	visibility:hidden;
}
.clearfix{
	display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}

#acMenu dt{
	display:block;
	cursor:pointer;
}

#acMenu dt img:hover{
	opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}


#acMenu dd:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
	visibility:hidden;
}
#acMenu dd{
	display: inline-block;
	padding-top:2em;
	display:none;
}


/*
========================================================================================================================================
写真枠
========================================================================================================================================
*/

.waku-r{
	border:1px solid #CCC;
	padding:4px;
	margin:10px;
	float:right;
}

.waku-l{
	border:1px solid #CCC;
	padding:4px;
	margin:10px;
	float:left;
}

.wakn-r{
	padding:5px;
	margin:0 0 10px 10px;
	float:right;
	display:inline-block;
}


@media only screen and (max-width: 650px){
	.waku-r, .waku-l{
	margin:10px auto;
	float:none;
	display:inline-block;
}

.wakn-r{
	float:none;
	display:inherit;
}

	}

@media only screen and (max-width: 500px){

.wakn-r img{
	width:96%;
}

	}


@media only screen and (max-width: 400px){
	.waku-r img, .waku-l img{ width:100%;}

	}
	

/*
========================================================================================================================================
画像管理
========================================================================================================================================
*/

/*幅400右寄せ*/
.sasie{
	float:right;
	width:400px;
	margin:20px 0 1em 2em;
	text-align:center;
	}

/*幅330右寄せ*/
.sasie3{
	float:right;
	width:330px;
	padding:1em;
	background-color:#FFF;
	}

/*挿絵に対するリード文*/
.read1{ padding:2em !important;}

/*幅100％中央寄せ（750px以上要切替）*/
.sasie2{
	clear:both;
	width:100%;
	text-align:center;
	margin:1em 0;
	}

.sasie-ex{
	display:table;
	margin:1em;
	float:right;
	}

/*ページ切り替えjquary*/

.tab, .tab2, .tab3, .tab4 {
	padding:2em 0 2em 0;
	display: flex !important;
	justify-content: center;
}

.tab li {
  color: #333;
  float: left;
  margin: 0 10px -1px 0;
  padding: 10px 0;
  border: 1px solid #666;
  cursor: pointer;
  list-style: none;
  transition: .3s;
  width:25%;
  text-align:center;
}

.tab li.active {
  color: #fff;
  background: #666;
  cursor: auto;
}

.tab2 li {
  color:#F69;
  float: left;
  margin: 0 10px -1px 0;
  padding: 10px 0;
  border: 1px solid #F6C;
  cursor: pointer;
  list-style: none;
  transition: .3s;
  width:25%;
  text-align:center;
}

.tab2 li.active {
  color: #fff;
  background: #F69;
  cursor: auto;
}

.tab3 li, .tab4 li {
  color:#09C;
  float: left;
  margin: 0 10px -1px 0;
  padding: 10px 0;
  border: 1px solid #09C;
  cursor: pointer;
  list-style: none;
  transition: .3s;
  width:25%;
  text-align:center;
  border-radius: 5px;
}

.tab3 li.active, .tab4 li.active {
  color: #fff;
  background: #09C;
  cursor: auto;
}




.area { padding:20px 0 0 0; margin:0 auto;}
.area div { display: none;}
.area div.look { display: block;}


/*
========================================================================================================================================
背景スライドショー
========================================================================================================================================
*/

.bg-slider {
	width: 100%;
	height: 680px;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	width:100%;
	text-align:left;
	padding:495px 6% 0 6%;
	position:relative;
	background:url(http://waiwai-farm.co.jp/wpad/img/sllide-logo.png) no-repeat left top;
	height:680px;
}
.bg-slider__title div{ width:725px; position:absolute; bottom:150px; left:6%}
.bg-slider__title div h2{ margin-bottom:0.4em;}
.bg-slider__title div p{ color:#FFF; font-weight:bold; font-size:1.1em; line-height:1.8em;}
.bg-slider__title figure{
	position:absolute;
	display:table;
	margin:0 auto;
	right:0;
	left:0;
	bottom:40px;
}

@media only screen and (max-width: 1100px){

.bg-slider {
position: relative;
padding-bottom: 52.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.bg-slider__title{
	padding:112% 6% 0 6%;
	position:relative;
	background:url(http://waiwai-farm.co.jp/wpad/img/sllide-logo.png) no-repeat left 0 top 70%;
	height:0;
	background-size:80%;
}

/*.bg-slider__title{
	position:absolute;
	right:0;
	left:0;
	bottom:20px;
	margin:0 auto;
	padding-top:0;
}

.bg-slider__title img{
	width:90%;
}*/

}

@media only screen and (max-width: 950px){
	
	.bg-slider__title div{ width:80%; left:3%}
    .bg-slider__title div h2 img{ width:100%;}

}

@media only screen and (max-width: 700px){
	
	.bg-slider__title{
		display:none;
}

}

.google-maps {
position: relative;
padding-bottom: 20%; // これが縦横比
height: 0;
overflow: hidden;
width:1080px;
margin:0 auto 4em;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

@media only screen and (max-width: 1100px) {
	
.google-maps {
	width:96%;
padding-bottom: 40%; // これが縦横比
}
	
	}

@media only screen and (max-width: 700px) {
	
.google-maps {
padding-bottom: 60%; // これが縦横比
}
	
	}

/*
========================================================================================================================================
テーブル管理
========================================================================================================================================
*/

table, table th, table td{ border:1px solid #CCC; border-collapse:collapse;}
table th, table td{ padding:1em;}

.recruit th{ width:9em; text-align:center; color:#069; font-weight:bold;}


/*
========================================================================================================================================
画像管理
========================================================================================================================================
*/

.img_100, .img_90, .img_80, .img_70, .img_50{ text-align:center;}

@media only screen and (max-width: 1099px) {
	
.img_100{ width:96%; margin:0 auto;}
.img_100 img{ width:100%;}
	
	}
@media only screen and (max-width: 900px) {
	
.img_90{ width:96%; margin:0 auto;}
.img_90 img{ width:100%;}
	
	}
@media only screen and (max-width: 800px) {
	
.img_80{ width:96%; margin:0 auto;}
.img_80 img{ width:100%;}
	
	}
@media only screen and (max-width: 700px) {
	
.img_70{ width:96%; margin:0 auto;}
.img_70 img{ width:100%;}
	
	}
@media only screen and (max-width: 500px) {
	
.img_50{ width:96%; margin:0 auto;}
.img_50 img{ width:100%;}
	
	}


/* Hang */
@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
.hvr-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}