@charset "utf-8";

/* mobile----------------------------------------------------*/
@media screen and (max-width: 480px) {
.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.farm_diary{width: 80%; margin: 60px auto 30px; }
.box {
    position: relative;
    margin: 0 auto;
    border: solid 2px #333;
    width: 90%;
    margin-bottom: 40px;
}

.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 1.2em;
    background: #333;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 10px;
}
.farm_img img{width: 100%; height: auto;}

.box_none{width: 28%;    margin: 2em 2%;}

.kako{width: 80%; margin: 0 auto 40px; height: 300px; overflow-y: scroll;}
.kako dl{width: 96%; border-bottom: thin dotted #888;align-items: center;padding: 20px 5px;}
.kako dt{width: 100%; margin-right: 1%; font-weight: bold;}
.kako dd{width: 100%;border-bottom: }
.kako p{width: 40%; text-align: center; margin: 10px auto;}
.kako_btn a{width: 100%; display: inline-block;padding: 0.2em 10%;text-decoration: none;
  font-size: 1em;transition: .4s;background: #888;color: #fff !important; border-radius: 4px;}
.kako_btn a:hover {background: #333;color: #fff !important;}


}/* Tablet---------------------------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {

.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.farm_diary{width: 80%; margin: 60px auto 30px; display:flex; flex-wrap: wrap;justify-content: center;}
.box {
    position: relative;
    margin: 2em 2%;
    border: solid 2px #333;
    width: 28%;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 1.2em;
    background: #333;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 10px;
}
.farm_img img{width: 100%; height: auto;}

.box_none{width: 28%;    margin: 2em 2%;}

.kako{width: 80%; margin: 0 auto 40px; height: 300px; overflow-y: scroll;}
.kako dl{width: 96%; border-bottom: thin dotted #888; display: flex;padding: 20px 5px;}
.kako dt{width: 19%; margin-right: 1%; text-align: center; font-weight: bold;}
.kako dd{width: 70%;border-bottom: }
.kako p{width: 10%; text-align: center; margin: 10px;}
.kako_btn a{width: 100%; display: inline-block;padding: 0.2em 10%;text-decoration: none;
  font-size: 1em;transition: .4s;background: #888;color: #fff !important; border-radius: 4px;}
.kako_btn a:hover {background: #333;color: #fff !important;}


}/* PC-------------------------------------------------------*/
@media print, screen and (min-width: 769px) {	
   
.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.farm_diary{width: 80%; margin: 60px auto 30px; display:flex; flex-wrap: wrap;justify-content: center;}
.box {
    position: relative;
    margin: 2em 2%;
    border: solid 2px #333;
    width: 28%;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 1.2em;
    background: #333;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 10px;
}
.farm_img img{width: 100%; height: auto;}

.box_none{width: 28%;    margin: 2em 2%;}

.kako{width: 80%; margin: 0 auto 40px; height: 300px; overflow-y: scroll;}
.kako dl{width: 96%; border-bottom: thin dotted #888; display: flex;padding: 20px 5px;}
.kako dt{width: 19%; margin-right: 1%; text-align: center; font-weight: bold;}
.kako dd{width: 70%;border-bottom: }
.kako p{width: 10%; text-align: center; margin: 10px;}
.kako_btn a{width: 100%; display: inline-block;padding: 0.2em 0;text-decoration: none;
  font-size: 1em;transition: .4s;background: #888;color: #fff !important; border-radius: 4px;}
.kako_btn a:hover {background: #333;color: #fff !important;}
}