@charset "utf-8";
/* CSS Document */
body {
	font-size: 14px;
}
.inner {
	max-width: 96%;
}
.sp {
	display: block;
}
.sp_visiable {
	display: inline;
}
.pc {
	display: none;
}
.sp_wrap::before {
	content: "\A";
	white-space: pre;
}
.pc_wrap::before {
    display: none;	
}
/****** 見出し ********/
h2.ttl ,h3.ttl {
    font-size: 3.75em;
	padding-top: 0;
    text-align: center;
}
body#about_page img.line01,body#about_page  img.line02,
body#staff_page img.line01,body#staff_page  img.line02,
body#recruit_page img.line01,body#recruit_page  img.line02,
body#contact_page img.line01,body#contact_page  img.line02 {
    width: 3.25em;
}
/****** ボタン ********/
.more {
  width: 200px;
  height: 42px;
  line-height: 42px;
  font-size: 1.025em;
  margin-top: 1.0em;
  margin-left: auto;
  margin-right: auto; 
}
a.more .material-icons {
	font-size: 1.5em;
	top: 0.25em;
	right: 2%;
}
/****** class ********/

.arrow,
.arrow_green {
    width: 19px;
}

.arrow_green {
	display:inline-block;	
    vertical-align: middle;
	margin-left: 0.4em;
}

.h_line {
  height: 40px;
}
.lower_inner {
    max-width: 450px;
}
/****** cow ********/

.right_cow01 {
    bottom: 2%;
}
.left_cow02 {}
.right_cow02 {}
.left_cow04 {}
/****** triangle ********/
.middle_inner .triangle_bottom_left, .middle_inner .triangle_bottom_right_yellow {
    height: 15vw;
}
.triangle_white_left {
    background: linear-gradient(to top left, transparent 50%, #FFF 50.1%) bottom left/ 15% 100% no-repeat;
}
/*************** header ***********************************************************/
header {height: 80px;
}
header .inner {
   width: 96%;
   max-width: 96%;	
}
header h1{
	width: calc(100% - 42px - 124px - 1.5em);
	margin-top: 0.2em;
    margin-bottom: 0;
	max-width: 360px;
	margin-left: 0;
}
a.logo {
	width: 100%;
}
.zdo_drawer_menu .zdo_drawer_button {
	width: 40px;
	top: 10px;
	right: 4%;
}
.zdo_drawer_menu .zdo_drawer_button {
    width: 42px;
    top: 0;
    right: 0;
    padding: 4px 11px 8px 11px;

}
header div.trans {
    margin-right: 4.8em;
    margin-top: 1.35em;
}	

/*************** mv ***********************************************************/
.mv {width:100%; aspect-ratio: 1 / 0.75; margin-top:4em;}
.mv video {object-fit:cover;height: 100%;}
.mv_txt {top:30vw;}
img.line01,
img.line02 {
    width: 3em;
}
.mv_txt p.s_ttl {
    font-size: 0.75em;
}
.mv_txt p.l_ttl {
    font-size: 2.25em;
}
/*************** slide content_top ***********************************************************/
div#slide div.pr {
    width: 22em;
}
.swiper-slide, .top_img {
    padding: 31% 0 27% 0;
}
div#slide p.l_ttl {
    font-size: 2.25em;
}
div#slide p.s_ttl {
    font-size: 0.75em;
}
/*************** top ***********************************************************/
section#top_about h2 {
    margin-top: 0;
}
h2.ttl span.sub_ttl, h3.ttl span.sub_ttl {
    font-size: 0.35em;
    line-height: 1.6;
}
section#top_about h2 img.line03 {
    width: 0.7em;
}
section#top_about {
    padding-top: 2em;
    padding-bottom: 43%;
}
section#top_about .text_box {
    width: 100%;
    max-width: 100%;
}
section#top_about .text_box p,
section#top_staff .text_box p,
section#top_recruit .img_box p {
    font-size: 1em;
}
section#top_staff {
    padding-top: 3em;
    padding-bottom: 4em;
}
section#top_staff h2 {
    margin-top: 0;
    float: none;
}
section#top_staff h2 img.line03 {
    width: 0.7em;
}
section#top_staff div.right {
    width: 96%;
    padding-left: 0;
    padding-right: 0;
    float: none;
    display: block;
    margin: auto;
}
section#top_staff .img_box {
    width: 100%;
    margin-top: 2em;
}
section#top_recruit img.center.mt1 {
    width: 30%;
    max-width: 240px;
}
section#top_recruit h2 img.line04,
section#top_recruit h2 img.line05 {
    width: 0.7em;
}
section#top_recruit h2.ttl span.sub_ttl {
    margin-bottom: 0.5em;
}
section#top_recruit .inner_l img.left_cow,
section#top_recruit .inner_l img.right_cow {
    display: none;
}
section#top_recruit .img_box {
    padding: 1.25em 0 1em 0;
}
section#top_recruit .img_box p {
    width: 96%;
}
section#top_recruit .flex {
    display: block;
}
section#top_recruit .flex .item {
    outline: 7px solid #000;
    width: 96%;
    padding: 1.25em 0 2em 0;
    display: block;
    margin: 2em auto 6em auto;
}
section#top_recruit .flex .item h3 span {
    margin-bottom: 0.5em;
}
section#top_recruit .flex .item img.icon {
    width: 22%;
    margin-bottom: 1em;
}
section#top_recruit .flex .item img.cow {
    bottom: -23%;
    right: 3%;
    max-width: 200px;
    width: 40%;
}
section#top_recruit img.arrow_l {
    width: 35%;
    margin-top: -2em;
}
div.circle {
    max-width: 180px;
    border: 8px solid #000;
}
div.circle p {
    font-size: 1.25em;
}
/**************************************about**************************************/
body#about_page .top_img div.pr {
    width: 15em;
}
body#about_page .top_img p.s_ttl {
    line-height: 1.5em;
    font-size: 1em;
}
body#about_page .top_img p.l_ttl {
    font-size: 3em;
}
body#about_page .top_img {
    padding: 13% 0 29% 0;
}
section#recycling div.recycling_img {
    margin: 2em auto 2em auto;
    background-size: 23em;
    padding: 2.5em 0 3.8em 0;
}
section#about_us .flex,
section#profile .flex,
section#recycling .flex {
    margin-top: 3em;
    display: block;
}
section#about_us .flex .item1, section#about_us .flex .item2,
section#profile .flex .item1, section#profile .flex .item2,
section#recycling .flex .item1, section#recycling .flex .item2 {
    width: 100%;
    padding: 4% 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
section#about_us  .flex .item1 img, section#about_us  .flex .item2 img,
section#profile .flex .item1 img, section#profile .flex .item2 img,
section#recycling .flex .item1 img, section#recycling .flex .item2 img {
    width: 92%;
}
section#recycling .flex {
    margin-bottom: 4em;
}
section#recycling h3 {
    font-size: 2.65em;
    margin-bottom: 0.9em;
}
section#shibecha h3,
section#about_us h3,
section#profile h3,
section#product h3 {
    font-size: 3.75em;
}
section#shibecha {
    background-position: center bottom 3em;
    padding: 2em 0 25.5% 0;
}
section#about_us {
    padding: 2em 0 5em 0;
}
section#recycling {
    padding: 2em 0 9em 0;
}
section#profile {
    padding: 3em 0 3.5em 0;
}
section#profile .map iframe {
    height: 250px;
}
section#recycling p,
section#about_us p,
section#shibecha p,
section#product p {
    font-size: 0.875em;
    text-align: left;
}
section#shibecha img.left_cow,
section#shibecha img.right_cow {
    top: 6%;
    width: 8em;
}
section#about_us img.meat,
section#about_us img.milk {
    top: 3.5%;
    width: 7em;
}
section#about_us img.meat {
    width: 8.25em;	
}
section#recycling img.left_cow,
section#recycling img.right_cow {
    width: 7em;
}
section#profile .img_box dl dt, section#profile .img_box dl dd {
    font-size: 0.875em;
}
section#profile .img_box {
    padding: 1.5em 0 1em 0;
}
section#shibecha div.video {
    margin-bottom: 4em;
}
section#shibecha div.video iframe {
    height: 30vh;
}
section#product .flex {
    display: block;
}
section#product .flex .flex_item01,
section#product .flex .flex_item02 {
    width: 100%;
    margin: 2em auto;
    padding: 1.5em 0;
}
section#product img.milk01,
section#product img.milk02 {
    top: 2%;
    width: 6em;
    z-index: 100;
}
section#product p {
    width: 96%;
}
section#product a.milk_net {
    margin: 3em auto 4em auto;
}
/*************************************recruit*************************************/
body#recruit_page .top_img div.pr {
    width: 17em;
}
body#recruit_page .top_img p.s_ttl {
    line-height: 1.5em;
    font-size: 1em;
}
body#recruit_page .top_img p.l_ttl {
    font-size: 3em;
}
body#recruit_page .top_img {
    padding: 13% 0 29% 0;
}
section#message h3, section#voice h3, section#interview h3, section#gallery h3 {
    font-size: 3.75em;
    margin-bottom: 10%;
}
section#message {
    padding-top: 2em;
    padding-bottom: 1em;
}
section#message p {
    margin-bottom: 1em;
    font-size: 0.875em;
    text-align: left;
}
section#message img.center.heading {
    margin-top: 2em;
    margin-bottom: 3em;
}
section#message img.left_cow,
section#message img.right_cow {
    top: 3%;
    width: 7em;
}
section#message img.left_cow2,
section#message img.right_cow2 {
    display: none;
}
section#message p.p_08 {
    font-size: 0.975em;
}
section#message p.p_11 {
    text-align: right;
    padding-right: 2em;
    margin-top: 2em;
}
section#voice {
    padding-top: 2em;
    padding-bottom: 4em;
}
section#voice .flex {
    margin-top: 3em;
    display: block;
}
section#voice .flex .item1, 
section#voice .flex .item2 {
    width: 100%;
    padding: 4% 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
section#voice .flex .item1 img,
section#voice .flex .item2 img {
    width: 92%;
}
section#requirement .inner_l img.left_cow,
section#requirement .inner_l img.right_cow {
    display: none;
}
section#requirement h2 {
    font-size: 3.25em;
}
section#requirement h2 img.line04 {
    margin-right: 0.125em;
    width: 0.7em;
}
section#requirement h2 img.line05 {
    margin-left: 0.125em;
    width: 0.7em;
}
section#requirement .img_box dl dt, 
section#requirement .img_box dl dd {
    font-size: 0.875em;
}
section#requirement .img_box dl dt {
    padding-right: 1em;
}
section#requirement .img_box dl dd {
    width: 22em;
}
section#requirement .img_box {
    padding: 1em 0 1em 0;
    margin-bottom: 3em;
}
section#requirement img.arrow_l {
    margin-bottom: 2em;
    width: 35%;
}
section#voice p {
    font-size: 0.875em;
    text-align: left;
}

/* interview */
section#interview {padding-bottom:3em;}
section#interview .interview_box {padding-bottom: 2em;}
section#interview .interview_box .data {width:100%; padding-bottom: 1.5em;}
section#interview .name {font-size:1.25em; line-height:2em;padding-top: 0.5em;}
section#interview .name .osw {display: inline-block; font-size: 2em; margin-right:0.5em;}
section#interview .name::before {top:-0.35em;}
section#interview .p_info {line-height: 1.75em;}
section#interview .interview_img1, section#interview .interview_img2 {position:relative; width:100%;}
section#interview .interview_img1 img, section#interview .interview_img2 img {object-fit:contain; height: auto;}
section#interview .qa_box {margin-top:-1.5em;padding:1.25em 0 2.5em 0}
section#interview .qa_box .inner {width: 86%;}
section#interview .qa {margin-top:-1em;}
section#interview .qa dt {font-size:1.125em;}
section#interview .qa dt .large {margin-right:0.25em;font-size: 2.5em;}
section#interview .qa dd {margin-top: -1em; margin-left: 2.25em;}
/**************************************staff**************************************/
body#staff_page .top_img div.pr {
    width: 14em;
}
body#staff_page .top_img p.s_ttl {
    line-height: 1.5em;
    font-size: 1em;
}
body#staff_page .top_img p.l_ttl {
    font-size: 3em;
}
body#staff_page .top_img {
    padding: 11% 0 31% 0
}
section#staff {
    padding-top: 2.5em;
    padding-bottom: 3em;
}
section#staff .staff {
    width: 84%;
    float: none;
    display: block;
    margin: 1em auto 3em auto;
}
section#staff .img_bg {
    box-shadow:17px 17px 0px 0px #ADC754;
}
section#staff .staff .name h3 {
    width: 94%;
    padding-left: 0.25em;
    font-size: 1.25em;
}
section#staff #staff01 .name img.right {
    margin-top: -1.5em;
}
section#staff .staff .name img {
    width: 1.25em;
}
section#staff div#staff01 .name img {
    width: 1.75em;
}
section#staff .staff.right {
    margin-right: auto;
}
section#bottom_staff {
    padding: 2.5em 0 4.5em 0;
}
section#bottom_staff img.left_cow,
section#bottom_staff img.right_cow {
    top: 45%;
    width: 40%;
}
section#staff .middle_inner {
    padding-bottom: 1em;
}
section#staff #staff03 .img_bg,
section#staff #staff04 .img_bg,
section#staff #staff05 .img_bg,
section#staff #staff06 .img_bg,
section#staff #staff07 .img_bg,
section#staff #staff08 .img_bg,
section#staff #staff09 .img_bg,
section#staff #staff10 .img_bg,
section#staff #staff11 .img_bg,
section#staff #staff12 .img_bg,
section#staff #staff13 .img_bg,
section#staff #staff14 .img_bg,
section#staff #staff15 .img_bg,
section#staff #staff16 .img_bg,
section#staff #staff17 .img_bg,
section#staff #staff18 .img_bg,
section#staff #staff19 .img_bg,
section#staff #staff20 .img_bg,
section#staff #staff21 .img_bg {
    margin-top: 5em;
}
/************************************** gallery **************************************/

body#gallery_page .top_img div.pr {
    width: 14em;
}
body#gallery_page .top_img p.s_ttl {
    line-height: 1.5em;
    font-size: 1em;
}
body#gallery_page .top_img p.l_ttl {
    font-size: 3em;
}
body#gallery_page .top_img {
    padding: 13% 0 29% 0;
}
body#gallery_page img.line01,body#gallery_page img.line02 {top:0.25em;}
section#gallery {
    padding-top: 2.5em;
    padding-bottom: 3em;
}
section#gallery .group {padding:0.85em 0;}
section#gallery h3 {margin-bottom:0.25em;}
section#gallery .img_box {width:48%; margin:0 1% 0.75em 1%;}
section#gallery .group .img_box:nth-of-type(2n) {margin-top:1em;}
section#gallery .group .img_box:nth-of-type(2n+1) {clear:both;}
/*************************************contact*************************************/
body#contact_page .top_img div.pr {
    width: 19em;
}
body#contact_page .top_img p.s_ttl {
    line-height: 1.5em;
    font-size: 1em;
}
body#contact_page .top_img p.l_ttl {
    font-size: 3em;
}
body#contact_page .top_img {
    padding: 13% 0 29% 0;
}
section#contact h3 {
    font-size: 3.5em;
    margin-bottom: 0.5em;
}
section#contact h3 span.noto {
    font-size: 0.3em;
}
h3 span.stripe::after {
    bottom: -2px;
}
section#contact p {
    font-size: 0.875em;
    text-align: left;
}
section#contact form table th,
section#contact form table td {
    font-size: 0.875em;
}
section#contact form input[type="submit"] {
    width: 60%;
}
section#contact {
    padding-top: 3em;
}
/**********************************page_contact**********************************/
section#page_contact {}
section#page_contact .flex {
    display: block;
}
section#page_contact .pc_inner div.tel,
section#page_contact .pc_inner div.mail {
    width: 96%;
    display: block;
    margin: 2em auto;
}
section#page_contact .pc_inner div.tel a,
section#page_contact .pc_inner div.mail a,
section#page_contact .pc_inner div.tel a:hover,
section#page_contact .pc_inner div.mail a:hover {
    width: 90%;
    margin: 1em auto;
    display: block;
    float: none;
    font-size: 1.25em;
}
section#page_contact .pc_inner div.tel h4,
section#page_contact .pc_inner div.mail h4 {
    font-size: 1.25em;
    margin-bottom: 0;
}
section#page_contact {
    padding-bottom: 2em;

}
section#page_contact .pc_inner div.mail h4 {
    margin-top: 3em;
}
/************************************footer************************************/
footer#footer a.logo{
	max-width: 90%;
}
footer#footer ul li {
    float: none;
}
footer#footer ul li:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 0.5em;
}
footer#footer a.logo img {
    width: 80%;
    margin-top: 3em;
}
footer#footer {
    padding: 2em 0 1em 0;
}
footer#footer ul li a {
    font-size: 1.125em;
}
@media (min-width: 465px) and (max-width: 767px) {
    section#shibecha div.video iframe {
    height: 37vh;
}
}