@charset "utf-8";
/* CSS Document */

@media (max-width: 320px) { body { font-size:16px; } }
@media (min-width: 321px) and (max-width: 480px) { body { font-size:16px; } }
@media (min-width: 481px) and (max-width: 540px) { body { font-size:18px; } }
@media (min-width: 541px) and (max-width: 640px) { body { font-size:22px; } }
@media (min-width: 641px) and (max-width: 720px) { body { font-size:24px; } }
@media (min-width: 721px) { body { font-size:28px; } }

body {
	width: 100%;
}
/********** 共通 *******************/

.main_img_box .main_img {
	height: 60vh;
	width: 100%;
	padding: 0;
	margin: 0;
	object-position: left;
}
.main_img_box .main_ttl {
	top: 17vh;
}
.eng_ttl {
	font-size: 2.375em;
}
h2.ttl {
	font-size: 1.325rem;
	letter-spacing: 0.1em;
}
.more1, .more2, .more3, .more4, .more5 {
	padding: 1.25% 1.25%;
}
.main_img_box .grass {
	width: 100%;
	height: 30px;
	object-fit: cover;
}
.dairy_cattle {
	width: 36px;
    padding-right: 0.5em;	
}
h3.ttl {
	letter-spacing: 0.1em;
	margin-bottom: 2em;
	font-size: 1.25rem;
}

p.read {
	font-size: 0.95em;
}
.sub_ttl {
	font-size: 1.125em;
	font-weight: 700;
}
.grass02 {
    margin-top: 50px;
    height: 50px;
}
.main_ttl h2.ttl {
    font-size: 1.75rem;	
}
.pc {
    display: none;	
}
.sp {
    display: block;	
}
/********** header *******************/
header {
}
.logo {
	width: 240px;
	max-width: 96%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	float: none;
}
header .logo {
	margin: 10px 0 12px 2%;
}
header#header nav {
	position: relative;
	display: block;
	padding-top: 0;
	width: 100%;
}
header a.contact {
	display: none;
}
header#header #spnav {
	display: block;
	font-size: 2.25em;
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	font-weight: 300;
}
header#header #spnav a {
	color: #FFF;
}
header#header nav ul#nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	margin: 0 0 1px 0;
	padding: 0;
	display: none;
}
header#header nav ul#nav li {
	display: block;
	margin: 0 0 0 0;
	width: 100%;
	background-color: #8CCE9B;
	padding-left: 0;
	border-bottom: 1px dotted #FFF;
}
header#header nav ul#nav li:last-of-type {
	border-bottom: none;
}
header#header nav ul#nav li a {
	display: block;
	padding: 0.6em 1em;
	color: #FFF;
}
#header li a {
	text-shadow: none !important;
}
/* top */
#top_helper .text_box, #top_oumu .text_box {
	width: 98%;
	float: none;
	padding: 5px 1% 40px 1%;
	height: auto;
}
#top_helper .img_box, #top_oumu .img_box {
	width: 100%;
}
#top_helper .img_box img, #top_oumu .img_box img {
	max-width: 100%;
	width: 100%;
	height: auto;
}
#top_helper .eng_ttl, #top_oumu .eng_ttl {
	font-size: 2.375em;
}
#top_helper h2, #top_oumu h2 {
	font-size: 1.325rem;
}
#top_helper .icon {
	width: 40px;
}
#top_oumu .icon {
	width: 60px;
}
#top_about .container {
	top: 5%;
}
#top_about img.fit {
	height: 50vh;
}
#top_senior img.fit {
	height: 55vh;
}
#top_recruit img.fit {
	height: 50vh;
}
section#top_farmer, section.contact_block {
	padding: 5px 0 40px 0;
}
.news {
	padding: 5px 0 60px 0;
}
section.sky {
	background-image: url(../img/sp_bgi01.jpg);
}
.flex_topnews{
	flex-flow: column;
}
.topnews_cont {
    inline-size: 100%;
    margin: auto;
	padding: 0;
}
.topnews_cont1{
	inline-size: 80%; 
	margin-block-end: 2em;
}

/********** about *******************/
section#about_top {
	padding: 20px 0 40px 0;
}
#about .main_ttl h2.ttl {
	font-size: 1.575rem;
}
figure.content_block_main img.fit {
	height: 35vh;
	object-position: center;
}
figcaption.ttl_box {
	bottom: 3vh;
}
a.content_block_menu {
	width: 100%;
	float: none;
}
a.content_block_menu img.fit {
	height: 35vh;
	width: 100%;
	padding: 0;
	margin: 0;
}
a.content_block_menu .tti_box {
    bottom: 0;
    top: 10vh;
    font-size: 1.25em;
}
section#organizations {
	background-image: url(../img/sp_bgi02.jpg);
	background-repeat: repeat;
	padding: 10px 0 0 0;
}
section#organizations dl {
	width: 100%;
	margin: 0 auto 0 auto;
	font-size: 0.875rem;
}
section#organizations .map {
	width: 100%;
	margin: 30px auto 0 auto;
}
section#organizations img.cattle_farm_img {
	margin-top: 60px;
	height: 20vh;
}
/********** oumu *******************/
section#oumu_top {
	padding: 20px 0 40px 0;
}
section#oumu_top p.sub_ttl {
	text-shadow: none;
	font-size: 0.95em;		
}

section#oumu_top p {
	text-shadow: 2px 2px 3px #FFF;
}

section#oumu_top .text_left {
	width: 100%;
	margin-top: 10px;
	float: none;
}
section#oumu_top .oumu_map_img {
	width: 80%;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	float: none;
}
section#oumu_top .img-box {
   margin: 20px auto 20px auto;	
}
.street_view {
	width: 100%;
	height: 250px;
}
section.view {
	padding: 10px 0 20px 0;
}

section#oumu_top .sub_ttl img.sea {
	width: 24px;
	padding-right: 0.3em;
}
section#oumu_top .sub_ttl img.mountain {
	width: 24px;
	padding-left: 0.3em;
}
/********** helper *******************/
#helper .main_ttl .main_ttl_img {
    width: 260px;
}
section#helper_top, section#recruit_top {
	padding: 20px 0 0 0;
}
section#work_flow, section#requirements  {
    padding: 20px 0 60px 0;
}
img.boy {
    width: 24px;	
}
img.girl {
    width: 24px;	
}
section#helper_top dl.text_box, section#helper_top .helper_img,section#recruit_top dl.text_box, section#recruit_top .helper_img  {
    margin-top: 20px;
	width: 100%;
	float: none;	
}
section#helper_top .helper_img,section#recruit_top .helper_img {
    margin-top: 10px;	
}
.face_of_cattle {
    width: 24px;
    padding-right: 0.3em;
}
section#helper_top dl.text_box dt,section#recruit_top dl.text_box dt {
    font-size: 1.0em;
	margin-top: 2.5em;
}
section#work_flow h3.ttl {
	letter-spacing: 0.05em;
	font-size: 1.2rem;
}
section#work_flow .schedule {
    width: 100%;
    border-collapse: collapse;
    margin-top: 60px;
    margin-bottom: 40px;
}
section#work_flow .schedule th {
	padding-bottom: 2em;
	font-size: 0.95em; 
}
section#work_flow .schedule td {
	padding-bottom: 2em; 	
}
section#work_flow .schedule td.circle .fa {
	margin-right: -0.6em;	
}

section#work_flow .schedule td.work {
	font-size: 1.0em;	
}
section#work_flow p.indent {
    font-size: 0.875em;	
}
figure.picture img {
    height: 220px;
	box-sizing: border-box;
	border-left: 3px solid #FFF;
	border-right: 3px solid #FFF;
}
figure.picture figcaption {
    background-color: #FFF;
    padding: 1em 6% 1.5em 6%;
}
/********** senior *******************/
#senior .main_ttl .main_ttl_img {
    width: 140px;
}
section#senior_top {
	padding: 20px 0 10px 0;
}
.member dl {
    width: 48%;
	float: left;
	margin-right: 0;
    position: relative;
}
.member dl:nth-of-type(2n) {
	float: right;
}

.member dl:nth-of-type(3) {
    margin-top: 3.5em;
}
.member dl dt p {
	bottom: 20px;	
}
.member dl dt p span {
    font-size: 0.875em;
}
.member dl dd {
    padding-top: 0.4em;
	font-size: 1.0em;	
}
.member dl dt p span {
    max-width: 90%;
}
.member .takahashi_link {
    max-width: 90%;
    margin-top: 1.5em;
    font-size: 0.75em;
}
.member .takahashi_link .fa-angle-double-right {
    font-size: 1.0em;
}

/********** farmer *******************/
#farmer .main_ttl .main_ttl_img {
    width: 160px;
}
section#farmer_top {
	padding: 20px 0 10px 0;
}

.f_member dl dt p {
	bottom: 0.3em;	
}
.member dl dd span.f_position:after {
   content: "\A";
	white-space: pre;
}
.member dl dd span.f_position {
    padding-right: 0;
	font-size: 0.875rem;
}
/********** pop_up *******************/

section.pop_up img.left {
   width: 100%;
   max-width: 100%;
   display: block;
   float: none;	
   margin-bottom: 30px;
}
section.pop_up img.pc_avator {
  display: none; 	
}
section.pop_up div.right {
   width: 100%;
   float: none;
   font-size: 0.875em;	   	
}
section.farmer_popup div.right dl dt {
    font-size: 1.0rem;
}
.mfp-iframe-holder .mfp-content {

}
#body_popup {
	height: auto;
    padding-bottom: 40px;

}
section.pop_up h3.ttl {
	margin-top: 10px;
}

.mfp-iframe-scaler {
	overflow-scrolling: touch;
    -webkit-overflow-scrolling:touch;
	overflow: visible;
    height: 150%;
	padding-bottom: 100px;
}
.mfp-iframe-scaler iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 320px) { #body_popup { width: 300px; } }
@media (min-width: 321px) and (max-width: 380px) { #body_popup { width: 320px; } }
@media (min-width: 381px) and (max-width: 420px) { #body_popup { width: 380px; } }
@media (min-width: 421px) and (max-width: 480px) { #body_popup { width: 420px; } }
@media (min-width: 481px) and (max-width: 540px) { #body_popup { width: 480px; } }
@media (min-width: 541px) and (max-width: 600px) { #body_popup { width: 540px; } }
@media (min-width: 601px) and (max-width: 640px) { #body_popup { width: 600px; } }
@media (min-width: 641px) and (max-width: 720px) { #body_popup { width: 540px; } }
@media (min-width: 721px) { body { width: 720px; } }


section.farmer_popup span.farm_name {
    display: block;
	font-size: 1.125rem;	
}
section.farmer_popup span.f_position {
    display: block;
	font-size: 1.0rem;	
}

/********** recruit *******************/
section#requirements .outline {
    margin: 40px 0 40px 0;	
}
#recruit .main_ttl .main_ttl_img {
    width: 320px;
	max-width: 96%;
}
section#requirements .outline dl {
	width: 100%;
	float: none;
	font-size: 0.95em;
}	
section#requirements .outline dl dt {
    width: 8em;
	padding: 0.25em 0 0.25em 1em;
	float: left;
	clear: both;			
}
section#requirements .outline dl dd {
    width: calc(100% - 9em);
	padding: 0.25em 0;
	float: right;
}

/********** contact_block *******************/
.contact_block dl.half {
	width: 100%;
}
.contact_block dl.half a {
	color: #FFF;
}
dl.tel dd.tel_banner, dl.web a {
	font-size: 1.125em;
	margin: 5px 0;
	width: 90%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}
dl.tel dd.tel_banner {
	font-size: 1.25em;
}
.contact_block .flex {
    flex-direction: column;
}
/********** form *******************/
#contact .main_ttl .main_ttl_img {
    width: 320px;
}
#contact_form h3.ttl span.pre:after {
   content: "\A";
	white-space: pre;
}
#contact_form {
	padding: 20px 0 40px 0;
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;		
}
#contact_form p.read {
    padding-bottom: 40px;
	font-size: 0.875rem;
}
#contact_form input[type="submit"] {
    width: 80%;
    margin: -10px auto 0px auto;
    height: 50px;
    font-size: 1.25em;
	-webkit-appearance: none;
	border-radius: 0;
}
form a.back {
    line-height: 51px;
    width: 40%;
    margin-bottom: 31px;
    height: 51px;
    font-size: 1.125em;
}

#contact_form input[type="submit"].post {
    line-height: 51px;
    width: 40%;
    margin-bottom: 31px;
    height: 51px;
    font-size: 1.125em;
	-webkit-appearance: none;
	border-radius: 0;	
}
/********** footer *******************/
footer .footer {
    padding: 10px 0 30px 0;
}
footer ul.left {
	float: none;
	padding: 0;
	padding-bottom: 60px;
	margin-top: 0;
	font-size: 0.875em;
}
footer li {
	margin-right: 1em;
}
footer a.contact {
	font-size: 1.0em;
	margin: 0 auto 0 auto;
	padding: 0.25em 1em 0.35em 1em;
	float: none;
	width: 240px;
}
footer .copy {
	font-size: 0.75em;
}