@charset "UTF-8";
/* カスタム CSS をここに入力してください */
#js-header-slider div{
	min-width: 10%;
}
.right{
	top:45%;
	left:65%;
	z-index:1;
	position:absolute;
}

.sakunyu {
    top: 43%;
    left: 55%;
    z-index: 1;
    position: absolute;
		width:155.75px;
		height:87px;
background:url(https://sutofarm.com/wp-content/uploads/2021/04/搾乳-1.png) no-repeat;
		animation: milk 2.9s steps(4) infinite;
}

@keyframes milk {
  to {
    background-position: -660px 0;
  }
}

.sakunyu png{
  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.ushi-gohan {
    z-index: 1;
    position: absolute;
    width: 5%;
    top: 54%;
    left: 69%;
}

.ushi-gohan{
    width:96.5px;
    height:118px;
   background:url(https://sutofarm.com/wp-content/uploads/2021/04/gohan-small.png) no-repeat;
    animation: eat 2.9s steps(4) infinite;
}

@keyframes eat {
  to {
    background-position: -404px 0;
  }
}
	
.bed{
		position:absolute;
		z-index:1;
		width:130px;
		left:36%;
		top:40%;
}
	
.bed img{
  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.asobi {
    position: absolute;
    z-index: 1;
    top: 28%;
    left: 38%;
		 width:136px;
		height:85px;
		background:url(https://sutofarm.com/wp-content/uploads/2021/04/brush.png) no-repeat;
		animation: asobi 2.9s steps(4) infinite;
}

@keyframes asobi {
  to {
    background-position: -612px 0;
  }
}

.hukushiushi {
position:absolute;
    z-index: 2;
    top: 31%;
    left: 50%;
}
.hukushiushi png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
/*右上の牛さん*/
@keyframes r2{
    0%{
        transform: translate(2px,2px)
    }
    
    100%{
        transform: translate(0px,-0px)
    }
}


.cowR2 {
    position: absolute;
    z-index: 1;
    top: 33%;
    left: 65%;
   	width:100px;
		height:55px;
background:url(https://sutofarm.com/wp-content/uploads/2021/04/牛-1.png) no-repeat;
		 animation: cowR2 2.9s steps(4) infinite;
}

@keyframes cowR2 {
  to {
    background-position: -403px 0;
  }
}


.cowC {
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 46%;
}
.cowC png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.cowL1 {
    position: absolute;
    z-index: 1;
    top: 54%;
		left:27%;
background:url(https://sutofarm.com/wp-content/uploads/2021/04/牛電波-1.png) no-repeat;
		width:110px;
		height:100px;
		 animation: ushi-denpa 2.9s steps(4) infinite;
}

@keyframes ushi-denpa {
  to {
    background-position: -608px 0;
  }
}

.cowL1 png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.cowL2 {
    position: absolute;
    z-index: 1;
    top: 61%;
    left: 35%;
}

.farmer{
		position:absolute;
		z-index:1;
		    width:84px;
    height:110px;
		left:78%;
		top:51%;
    background:url(https://sutofarm.com/wp-content/uploads/2021/04/作業１-1.png) no-repeat;
    animation: farmer 2.9s steps(4) infinite;
}

@keyframes farmer {
  to {
    background-position: -383px 0;
  }
}

.wara{
		position:absolute;
		z-index:1;
		    width:90px;
    height:75px;
		left:31%;
		top:41%;
		background:url(https://sutofarm.com/wp-content/uploads/2021/04/wara-bed.png) no-repeat;
		animation: wara 2.9s steps(4) infinite;
}

@keyframes wara{
  to {
    background-position: -421px 0;
  }
}

.suto {
    position: absolute;
    z-index: 1;
    top: 53%;
    left: 63%;
		width:64.8px;
		height:93px;
background:url(https://sutofarm.com/wp-content/uploads/2021/04/須藤さん.png);
		   animation: suto 2.9s steps(4) infinite;
}

@keyframes suto{
  to {
    background-position: -405px 0;
  }
}


.suto png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.IOT {
    position: absolute;
    z-index: 1;
    left: 23%;
    top: 64%;
		background:url(https://sutofarm.com/wp-content/uploads/2021/04/IT-1.png) no-repeat;
		width:65px;
		height:87px;
		animation: IOT 2.9s steps(4) infinite;
}

@keyframes IOT {
  to {
    background-position: -395px 0;
  }
}

.IOT png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.staffC {
    position: absolute;
    z-index: 1;
    top: 59%;
    left: 46%;
}
.staffC png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.chef {
    position: absolute;
    z-index: 1;
    top: 68%;
    left: 58%;
}

.lobo {
    position: absolute;
    z-index: 1;
    top: 13%;
    left: 50%;
}
.lobo img{

  width: calc(61px*1.2);
height: calc(106px*1.2);
  cursor: pointer;
 transition-duration: 0.5s;
}

.sutofarm {
    position: absolute;
    z-index: 1;
    top: 83%;
    left: 63%;
}

.sutofarm img{
  width:103px;
		height:100px;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.haccp {
    position: absolute;
    z-index: 1;
    top: 69%;
    left: 27.5%;
}
.haccp img{
		width:103px;
		height:100px;
  cursor: pointer;
 transition-duration: 0.5s;
}

.kyoiku {
    position: absolute;
    z-index: 1;
    top: 73%;
    left: 70%;
}
.kyoiku img{

  width:103px;
		height:100px;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.GTP {
    position: absolute;
    z-index: 1;
    top: 20%;
		left:62%;
}

.GTP png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.SDGs {
    position: absolute;
    z-index: 1;
    top: 70%;
    left: 42%;
}
.SDGs img{

  width:103px;
		height:100px;
  cursor: pointer;
 transition-duration: 0.5s;
}

.sfhata{
	position:absolute;
	z-index:1;
		top:85%;
		left:40%;
}

.sfhata png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.cheese {
    position: absolute;
    z-index: 1;
    top: 66%;
    left: 63%;
}

.cheese png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}
	
.koyasi {
    position: absolute;
    z-index: 1;
    top: 36%;
    left: 71%;
}
.koyasi png{

  width: 100%;
height: 100%;
  cursor: pointer;
 transition-duration: 0.5s;
}

.bike {
    position: absolute;
    z-index: 1;
    top: 89%;
    left: 33%;
	 animation: bike-move 12s ease-in-out 0s infinite normal;
}

/*バイク走る*/
@keyframes bike-move{
  
  0%{
    left: -83px;
  }
		50%{
				left:35%;
		}
  100%{
    left:calc(100% + 83px);
  }
}

.post{
				 position:absolute;
		 z-index:1;
		top:83%;
		left:35%;
		width:100px;
		height:93px;
                  background:url(https://sutofarm.com/wp-content/uploads/2021/04/post.png) no-repeat;
		animation: post-in 6s steps(4) infinite;
}

@keyframes post-in{
	 to{
				background-position: -406px 0;
		}
}

.balloon{
	background-color:rgba(0,0,0,0);
    position: absolute;
			 top: -2%;
		animation: balloon-move 15s linear 0s infinite normal;
}

@keyframes balloon-move{
  
  0%{
    left:100%;
  }

  100%{
			left:-30%;
  }
}

.pop-up:hover{
			position:absolute;
  transform: scale(1.2) rotate(2deg);
  transition-duration: 0s;
}

a.asobi{
}

a.asobi:hover{
		position:absolute;
  transform: scale(1.2) rotate(2deg);
  transition-duration: 0.5s;
}

/*画像サイズ調整*/
.cheese img{
		width:130px;
	}

.g_button  {
  display: inline-block;
  max-width: 200px;
  text-align: left;
  border: 2px solid #9ec34b;
  font-size: 1.5em;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}

.g_button:hover {
  background-color: #9ec34b;
  border-color: #cbe585;
  color: #FFF;
}


.l-header__inner.l-inner {
 background-image: url(https://sutofarm.com/wp-content/uploads/2021/04/sutofarm_illust_アートボード-1-scaled.jpg);
}

.p-block02__item--img{
animation: slideIn 7s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.wpcf7 .wpcf7-submit {
    background-color: #a9d145;
    color: #fff;
    font-size: 20px;
}

.p-global-nav{
	font-size: 16px;
}

.p-triangle{
	text-shadow: 1px 1px 2px silver;
  font-weight: bold;
}

span.p-triangle__inner {
	color: #000;
	background-color: rgba(245,245,245,0.7);
}

.p-interview__faq dt {
    margin-bottom: 0px;
}

.p-interview__faq dd {
	margin-bottom: 20px;
}

.p-interview__title {
	margin-bottom: 30px;
}

.youtubemovie {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.youtubemovie iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


.l-primary{
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
}

.callno{
	font-size:20px;
}

.infotext{
	text-align: center;
	margin-bottom: 10px;
	font-size:20px;
}

.attentionbox{
  width: 80%;
  margin: 0 auto;
  max-width: 500px;
	border: dotted 3px #000;
	margin-bottom:30px;
	margin-top:10px;
}

.attentionbox p{
	line-height: 150%;
	text-align: center !important ;
	padding-top: 15px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom:15px;
	font-size:1.03rem;
}

h3.reservationinfo{
	margin:0 0 30px;
}

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required{
	border: solid #707070 1px;
    border-radius: 3px;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 280px;
    max-width: 100%;
}

.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-required.wpcf7-validates-as-number{
	border: solid #707070 1px;
    border-radius: 3px;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
}

#contact-content01 .wpcf7 form.p{
	margin-bottom:15px;
}

.reservation-form {
    margin: 0 4% 0 0;
}

.hpbtn{
	float: right;
	display:block;
font-size:1.1rem;}

.btntext{
	text-align:right;
	padding: 10px 10 10px  !important;
}

#voice-content01 .menu ul li strong {
	line-height: 110%;}

.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
}
span.wpcf7-list-item {
  position: relative;
  margin: 0 20px 0 0 !important;/*項目ごとの余白を調整*/
}
.wpcf7-list-item-label {/*項目の色や文字サイズ*/
  color: #000;
	font-weight: 600;
  cursor: pointer;
  font-size: 16px;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;/*既存のチェックボックスを見えなくする*/
}
.wpcf7-list-item-label:before {/*チェックボックスの枠*/
  content: '';
  border: 2px solid #000;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: -3px;
  margin-right: 10px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 2px;
  width: 25px;
  height: 25px;
  background: url("https://sutofarm.com/wp-content/uploads/2021/07/checkbox_mark_icon_160923.svg") no-repeat center;
  background-size: contain;
}


/* custom menu */
.widget_nav_menu li { margin-bottom: 18px; font-size: 12px; }

@media only screen and (max-width: 767px) { .p-widget { margin-bottom: 40px; }
  .p-widget__title { height: 45px; margin-bottom: 20px; line-height: 45px; }
  .ad_widget { text-align: center; }
  .ad_widget img { margin-right: -10px; margin-left: -10px; } }



/* button - CSSボタンのスタイル */
 .q_button { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; min-width: 200px; max-width: 90%; margin: 0; padding: .6em 1.3em .5em; background-color: #eedcb3; color: #fff !important; font-size: 100%; font-weight: 400; text-align: center; text-decoration: none; vertical-align: middle; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.q_button:hover,  .q_button:focus { background-color: #eedcb3; color: #fff; text-decoration: none; }

/* Button option */
 .rounded { border-radius: 6px; }

.pill { border-radius: 50px; }

 .sz_full { display: block; min-width: 100px; max-width: 100%; padding: 1em 1.5em .9em; font-size: 110%; }

 .sz_l { min-width: 350px; max-width: 90%; padding: .8em 1.5em .7em; font-size: 110%; }

@media screen and (max-width: 767px) { p .sz_l { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; } }

 .sz_s { min-width: 100px; max-width: 90%; padding: .4em 1em .3em; font-size: 85%; }

 .bt_red { background: #c01f0e; color: #fff; }

 .bt_red:hover, .bt_red:focus { background-color: #d33929; color: #fff; }

 .bt_yellow { background: #f1c40f; color: #fff; }

 .bt_yellow:hover,  .bt_yellow:focus { background-color: #f9d441; color: #fff; }

 .bt_blue { background: #eedcb3; color: #fff; }

 .bt_blue:hover,  .bt_blue:focus { background-color: #eedcb3; color: #fff; }

 .bt_green { background: #27ae60; color: #fff; }

 .bt_green:hover,  .bt_green:focus { background-color: #39c574; color: #fff; }

.map_img{
    background-color: #fff;
    margin: 20px auto;
    border-radius: 40px;
    width: 80%;
    text-align: center;
}

@media screen and (max-width: 600px){
.map_img {
    width: 90%;
}
}