@charset "UTF-8";
/* CSS Document */
* {
    outline: none !important;
}


img {
    vertical-align: bottom !important;
}


.algn_center {
    text-align:center !important;
}



.mb-xxsmall {margin-bottom:5px !important;}
.mb-xsmall {margin-bottom:10px !important;}
.mb-small {margin-bottom:15px !important;}
.mb-medium {margin-bottom:30px !important;}
.mb-large {margin-bottom:50px !important;}
.mb-xlarge {margin-bottom:80px !important;}
.mb-xxlarge {margin-bottom:100px !important;}


.pc {
    display:block;
}

.sp {
    display:none;
}


@media all and (max-width:768px) {
.pc {
    display:none;
}

.sp {
    display:block;
}    
}


/* 製造の流れ */
.area_process {
    width:100%;
    padding:70px 0;
    margin:0 auto;
}
@media all and (max-width:375px){
    .area_process {
        width:100%;
        padding:70px 0 0;
        margin:0 auto;
    }
}


/* 背景色の設定 */
.area_process.harvest {
    background:#f1fbda;
}

.area_process.frozen {
    background:#e2eff7;
}

.area_process.powder {
    background:#e2f7eb;
}

/* 1つのステップとその矢印の設定 */
.block_process {
    width:96%;
    max-width:1345px;
    margin:0 auto;
    padding:0 0 25px;
    position:relative;
    overflow: hidden;
}

.process_arrow,
.process_arrow_sp {
    width:80px;
    position:absolute;
    top:0;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    text-align:center;
    padding:25px 20px;
    font-size:30px;
    color:#FFF;
    font-weight:bold;   
}


/* 冷凍タイプ */
.process_arrow_frozen01 {
    width:80px;
    position:absolute;
    top:0;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    text-align:center;
    padding:25px 20px;
    font-size:30px;
    color:#FFF;
    font-weight:bold;
    background:#191919; 
}


.process_arrow_frozen02 {
    width:80px;
    position:absolute;
    top:0;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    text-align:center;
    padding:25px 20px;
    font-size:30px;
    color:#FFF;
    font-weight:bold;
    background:#191919; 
}


.area_process.harvest .process_arrow {
    background:#191919; 
}

.area_process.frozen .process_arrow {
    background:#191919; 
}

.area_process.frozen .process_arrow_sp {
    background:#0068b7; 
}

.area_process.powder .process_arrow {
    background:#191919; 
}

.area_process.powder .process_arrow_sp {
    background:#191919; 
}

.area_process.harvest .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.area_process.frozen .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.process_arrow_frozen01::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.process_arrow_frozen02::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.area_process.powder .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}

.area_process.powder .process_arrow_sp::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


@media all and (max-width:1024px) {
.process_arrow,
.process_arrow_sp {
    width:60px;
    position:absolute;
    top:0;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    text-align:center;
    padding:20px 10px;
    font-size:25px;
    color:#FFF;
    font-weight:bold;   
}
    
    
.process_arrow_frozen01 {
    width:60px;
    position:absolute;
    top:0;
    left:50%;
    bottom:calc(50% + 25px);
    transform:translateX(-50%);
    text-align:center;
    padding:25px 20px;
    font-size:30px;
    color:#FFF;
    font-weight:bold;
    background:#0068b7; 
}


.process_arrow_frozen02 {
    width:80px;
    position:absolute;
    top:50%;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    text-align:center;
    padding:25px 20px;
    font-size:30px;
    color:#FFF;
    font-weight:bold;
    background:#0068b7; 
}
    
    
.area_process.harvest .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #80c269;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}

.area_process.frozen .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #00b7ee;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}
    
    
.process_arrow_frozen01::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #0068b7;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.process_arrow_frozen02::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #0068b7;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
}


.area_process.powder .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #32b16c;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
} 
    
.area_process.powder .process_arrow_sp::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #00c7be;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
} 
}


/* 768px以下で矢印を左寄せ */
@media all and (max-width:768px) {
.process_arrow,
.process_arrow_sp {
    width:50px;
    position:absolute;
    top:0;
    left:0;
    bottom:25px;
    text-align:center;
    padding:20px 10px;
    font-size:21px;
    color:#FFF;
    font-weight:bold;
    transform:none;
}
    
    
.process_arrow_frozen01 {
    width:50px;
    position:absolute;
    top:0;
    left:0;
    bottom:25px;
    text-align:center;
    padding:20px 10px;
    font-size:21px;
    color:#FFF;
    font-weight:bold;
    background:#191919;
    transform:none;
}


.process_arrow_frozen02 {
    width:50px;
    position:absolute;
    top:0;
    left:0;
    bottom:25px;
    text-align:center;
    padding:20px 10px;
    font-size:21px;
    color:#FFF;
    font-weight:bold;
    background:#191919;
    transform:none;
}
    
    
.area_process.harvest .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}

.area_process.frozen .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}
    
    
.process_arrow_frozen01::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}


.process_arrow_frozen02::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #191919;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}


.area_process.powder .process_arrow::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #32b16c;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}
    
.area_process.powder .process_arrow_sp::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:25px solid #00c7be;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    position:absolute;
    left:0;
    bottom:-25px;
    transform:none;
}
}


/* 吹き出し部分設定 */
.block_comment {
    width:43%;
    padding:1em;
    background:#FFF;
    border-radius: 5px;
    position:relative;
    box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}


.block_comment.flt_left {
    float:left;
}


.block_comment.flt_left::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:30px solid #FFF;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:none;
    position:absolute;
    top:30px;
    right:-30px;
    z-index:2;
}


.block_comment.flt_left.frozen_sp::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:30px solid #00b7ee;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:none;
    position:absolute;
    top:30px;
    right:-30px;
    z-index:2;
}


.block_comment.flt_left.powder_sp::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:30px solid #00c7be;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:none;
    position:absolute;
    top:30px;
    right:-30px;
    z-index:2;
}


.block_comment.flt_left::after {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:30px solid rgba(0,0,0,.3);
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    top:35px;
    right:-30px;
    z-index:1;
}


.block_comment.flt_right {
    float:right;
}


.block_comment.flt_right::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-right:30px solid #FFF;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    top:30px;
    left:-30px;
    z-index:2;
}



.block_comment.flt_right::after {
    display:block;
    content:"";
    width:0;
    height:0;
    border-right:30px solid rgba(0,0,0,.3);
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    top:35px;
    left:-30px;
    z-index:1;
}


.block_comment.flt_right > *,
.block_comment.flt_left > * {
    z-index:3;
}


/* 吹き出しじゃないコンテンツ */
.block_comment2 {
    width:43%;
    padding:1em;
    position:relative;
    overflow:hidden;
}

.block_comment2.flt_left {
    float:left;
    padding:1em 1em 1em 70px;
}

.block_comment2.flt_right {
    float:right;
    padding:1em 70px 1em 1em;
}



.sec_circle_content {
    width:100%;
    display:table;
}

/*コメントの左右入れ替え*/
@media (max-width: 768px){
.revers{
    display: flex;
    justify-content: center;
    flex-flow: row-reverse;
}
.revers_right{
    float:right !important;
}

.revers_padding{
    padding: 30px 0px 30px 10px !important;
}

.revers_img{
    display: flex !important;
    align-items: center;
}

}

/* コメント左・丸い画像右 */
.img_circle_right {
    display:table-cell;
    width:33%;
    vertical-align: middle;
}

.comment_circle_left {
    width:66%;
    padding:30px 0;
    display:table-cell;
}

/* コメント右・丸い画像左 */
.img_circle_left {
    display:table-cell;
    width:33%;
    vertical-align: middle;
}

.comment_circle_right {
    width:66%;
    padding:30px 0;
    display:table-cell;
}


.img_circle_right div img,
.img_circle_left div img {
    display:block;
    width:100%;
    max-width:170px;
}


.comment_circle_left p,
.comment_circle_right p {
    display:table-cell;
    vertical-align: middle;
    position:relative;
    padding:20px 0;
}


.comment_circle_left p span,
.comment_circle_right p span {
    font-size:20px;
    display:block;
    font-weight:bold;
    margin:0 0 5px;
}


.comment_circle_left p::before {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(15deg);
    position:absolute;
    top:-20px;
    right:0;
}


.comment_circle_left p::after {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(-15deg);
    position:absolute;
    bottom:-20px;
    right:0;
}


.comment_circle_right p::before {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(-15deg);
    position:absolute;
    top:-20px;
    left:0;
}


.comment_circle_right p::after {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(15deg);
    position:absolute;
    bottom:-20px;
    left:0;
}


@media all and (max-width:768px) {
.revers_padding p::before {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(-15deg);
    position:absolute;
    top:-20px;
    left:0;
}


.revers_padding p::after {
    display:block;
    content:"";
    width:80px;
    height:3px;
    background:#000;
    transform:rotate(15deg);
    position:absolute;
    bottom:-20px;
    left:0;
}
}


/* 768px以下ではコメントは全て右側に */
@media all and (max-width:768px) {
.block_comment {
    width:calc(100% - 80px);
    padding:1em;
    background:#FFF;
    border-radius: 5px;
    position:relative;
    box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}
    
    
.block_comment2 {
    width:calc(100% - 80px);
    padding:1em;
    position:relative;
    overflow:hidden;
}

.block_comment.flt_left,
.block_comment.flt_right,
.block_comment2.flt_left,
.block_comment2.flt_right {
    float:right;
}


.block_comment.flt_left::before,
.block_comment.flt_right::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:none;
    border-right:30px solid #FFF;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    top:30px;
    left:-30px;
    z-index:2;
}
    
    
.block_comment.flt_left::after,
.block_comment.flt_right::after {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:none;
    border-right:30px solid rgba(0,0,0,.3);
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    position:absolute;
    top:35px;
    left:-30px;
    z-index:1;
}
    
    
.block_comment.flt_left.frozen_sp::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:none;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:30px solid #00b7ee;
    position:absolute;
    top:30px;
    right:-30px;
    z-index:2;
}
    
    
.block_comment.flt_left.powder_sp::before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-left:none;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right:30px solid #00c7be;
    position:absolute;
    top:30px;
    right:-30px;
    z-index:2;
}



.block_comment.flt_right > *,
.block_comment.flt_left > * {
    z-index:3;
}
    
    
.block_comment2.flt_left {
    float:left;
    padding:.5em 0;
}

.block_comment2.flt_right {
    float:right;
    padding:.5em 0;
}
    
    
/* コメント左・丸い画像右 */
.img_circle_right {
    display:table-cell;
    width:20%;
    vertical-align: middle;
}

.comment_circle_left {
    width:80%;
    padding:30px 10px 30px 0;
    display:table-cell;
    font-size:14px;
}

/* コメント右・丸い画像左 */
.img_circle_left {
    display:table-cell;
    width:20%;
    vertical-align: middle;
}

.comment_circle_right {
    width:80%;
    padding:30px 0 30px 10px;
    display:table-cell;
    font-size:14px;
}
    
    
.img_circle_right img,
.img_circle_left img {
    width:100%;
    max-width:auto;
    }
}


.sec_comment {
    width:100%;
    margin:0 auto 20px;
    overflow:hidden;
}


.sec_comment:last-child {
    width:100%;
    margin:0 auto;
    overflow:hidden;
}


.comment_txt {
    width:60%;
    float:left;
    font-size:16px;
    margin:0;
}

.comment_img {
    width:38%;
    float:right;
    background:#DDD;
}

.comment_img img {
    width:100%;
}


@media all and (max-width:560px) {
.comment_txt {
    width:100%;
    float:none;
    font-size:16px;
    margin:0 0 20px;
}

.comment_img {
    width:100%;
    float:none;
    background:#DDD;
}    
}

.area_process.harvest .block_comment h4 {
    font-size:21px;
    font-weight:bold;
    color:#191919;
    margin:0 0 10px;
}

.area_process.frozen .block_comment h4 {
    font-size:21px;
    font-weight:bold;
    color:#191919;
    margin:0 0 10px;
}

.area_process.powder .block_comment h4 {
    font-size:21px;
    font-weight:bold;
    color:#191919;
    margin:0 0 10px;
}

/* 一部吹き出しの色の変更 */
.frozen_sp {
    background:#00b7ee !important;
    color:#FFF !important;
}


.frozen_sp h4 {
    color:#FFF !important;
}


.frozen_sp span {
    /*color:#fff799 !important;*/
}


.powder_sp {
    background:#00c7be !important;
    color:#FFF !important;
}


.powder_sp h4 {
    color:#FFF !important;
}

.sec_comment h5 {
    text-align:center;
    font-size:18px;
    font-weight:bold;
    padding:10px 0;
    border-top:1px solid #FFF;
    border-bottom:1px solid #FFF;
    margin:0 0 10px;
}


a.low_oxygen {
    display:inline-block;
    color:#000;
    text-decoration:none;
    padding:.5em 1.5em;
    background:#FFF;
    font-weight:bold;
}


a.low_oxygen span {
    font-size:0.68em;
    color:#000 !important;
    vertical-align:text-top;
}



/* 虫や遺物を取り除きケールがやっと工場内へ！ */
.block_factory {
    width:100%;
    max-width:900px;
    padding:1.5em 0 3em;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1);
    text-align:center;
    margin:0 auto 50px;
    background:#FFF;
}


.block_factory h3 {
    color:#191919;
    font-size:24px;
    margin:0 0 30px;
    padding:0 1em;
}

.block_link_type {
    width:85%;
    margin:0 auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.block_link_type a {
    display:block;
    width:46%;
    border-radius: 5px;
    transition:all .3s ease;
    opacity:1;
    text-decoration:none;
    color:#FFF;
    font-size:2em;
    padding:1em;
    margin:0;
}


.link_frozen {
    background:#00a0e9;
}


.link_powder {
    background:#009e96;
}


.block_link_type a:hover {
    opacity:.8;
}


.block_link_type a h4 {
    padding:0 0 50px;
    font-size:20px;
    position:relative;
}


.block_link_type a h4::after {
    display:block;
    content:"";
    width:20px;
    height:20px;
    border-bottom:1px solid #FFF;
    border-right:1px solid #FFF;
    transform:rotate(45deg) translateX(-50%);
    position:absolute;
    left:50%;
    bottom:20px;
}


.block_link_type a img {
    width:100%;
}


@media all and (max-width:768px) {
.block_link_type {
    width:95%;
    margin:0 auto;
    display:block;
    flex-wrap:nowrap;
    justify-content:none;
}


.block_link_type a {
    display:block;
    width:100%;
    border-radius: 5px;
    transition:all .3s ease;
    opacity:1;
    text-decoration:none;
    color:#FFF;
    font-size:2em;
    padding:1em;
    margin:0 auto 10px;
}
    
.block_link_type a img {
    width:50%;
}
}



/************************　ケールを育てる　*****************************/
/* 拡大アニメーション */
@keyframes enlargement {
    0% {
        transform:scale(0,0);
        opacity:0;
    }
    100% {
        transform:scale(1,1);
        opacity:1;
    }
}


.sec_kale {
    width:100%;
    max-width:1345px;
    margin:0 auto;
    position:relative;
}


.sec_kale > img {
    width:100%;
}


.block_detail_farm {
    width:25%;
    max-width:260px;
    padding:15px;
    background:#FFF;
    border-radius: 3px;
    position:absolute;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    animation:enlargement .3s ease;
}


.block_detail_farm .pc {
    display:block;
}

.block_detail_farm .sp {
    display:none;
}

/* モーダルアイコン */
.openWin {
    display:block;
    width:100px;
    height:100px;
    text-align:center;
    background:#00b7ee;
    padding:0;
    line-height:2em;
    border-radius: 50%;
    border:3px solid #FFF;
    color:#FFF;
    font-size:45px;
    position:absolute;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    transition:all .3s ease;
    animation:enlargement .3s ease;
}

.openWin:hover {
    transform:scale(1.1, 1.1);
}


h4.ttl_h4 {
    text-align:center;
    color:#009e96;
    font-size:21px;
    margin:0 0 10px;
}


.block_detail_farm .sp a {
    display:block;
    text-align:center;
    color:#009e96;
    font-size:16px;
    margin:0 0 10px;
    text-decoration: none;
}



@media all and (max-width:1024px) {
.openWin {
    display:block;
    width:60px;
    height:60px;
    text-align:center;
    background:#00b7ee;
    padding:0;
    line-height:2em;
    border-radius: 50%;
    border:3px solid #FFF;
    color:#FFF;
    font-size:27px;
    position:absolute;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    transition:all .3s ease;
    animation:enlargement .3s ease;
}
}



@media all and (max-width:768px) {
.block_detail_farm {
    width:200px;
    padding:10px 15px;
    background:#FFF;
    border-radius: 3px;
    position:absolute;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    animation:enlargement .3s ease;
}
}


@media all and (max-width:560px) {
.block_detail_farm {
    display:inline-block;
    width:auto;
    padding:10px 15px 3px;
    background:#FFF;
    border-radius: 3px;
    position:absolute;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    animation:enlargement .3s ease;
}
    
.block_detail_farm .pc {
    display:none;
}

.block_detail_farm .sp {
    display:block;
} 
}


#farm01 {
    top:9%;
    left:5%;
}

#farm02 {
    top:15%;
    left:58%;
}

#farm03 {
    top:23%;
    right:2%;
}

#farm04 {
    top:24%;
    left:36.5%;
}

#farm05 {
    top:31%;
    left:5%;
}

#farm06 {
    top:35%;
    left:65.5%;
}

#farm07 {
    top:40%;
    left:30%;
}

#farm08 {
    top:48%;
    left:42%;
}

#farm09 {
    top:58%;
    left:2.5%;
}

#farm10 {
    top:61%;
    left:72%;
}

#farm11 {
    top:63%;
    left:38%;
}

#farm12 {
    top:71%;
    left:5%;
}

#farm13 {
    top:79%;
    right:2%;
}

#farm14 {
    top:85%;
    left:4%;
}

#farm15 {
    top:88%;
    left:68%;
}

#farm16 {
    top:16%;
    left:19.6%;
}

#farm17 {
    top:29%;
    left:67.5%;
}


@media all and (max-width:1024px) {
#farm01 {
    top:9%;
    left:5%;
}

#farm02 {
    top:12%;
    left:58%;
}

#farm03 {
    top:23%;
    right:2%;
}

#farm04 {
    top:24%;
    left:36.5%;
}

#farm05 {
    top:28%;
    left:3%;
}

#farm06 {
    top:35%;
    left:65.5%;
}

#farm07 {
    top:40%;
    left:30%;
}

#farm08 {
    top:48%;
    left:42%;
}

#farm09 {
    top:58%;
    left:2%;
}

#farm10 {
    top:61%;
    left:72%;
}

#farm11 {
    top:62%;
    left:38%;
}

#farm12 {
    top:71%;
    left:5%;
}

#farm13 {
    top:78%;
    right:2%;
}

#farm14 {
    top:85%;
    left:4%;
}

#farm15 {
    top:89%;
    left:68%;
}

#farm16 {
    top:18%;
    left:25%;
}

#farm17 {
    top:31%;
    left:65%;
}    
}


@media all and (max-width:768px) {
#farm01 {
    top:10%;
    left:8%;
}

#farm02 {
    top:19%;
    left:66%;
}

#farm03 {
    top:29%;
    right:2%;
}

#farm04 {
    top:26%;
    left:36.5%;
}

#farm05 {
    top:30%;
    left:3%;
}

#farm06 {
    top:40%;
    left:65.5%;
}

#farm07 {
    top:45%;
    left:23%;
}

#farm08 {
    top:52%;
    left:46%;
}

#farm09 {
    top:61%;
    left:2%;
}

#farm10 {
    top:62.5%;
    left:72%;
}

#farm11 {
    top:64%;
    left:38%;
}

#farm12 {
    top:71%;
    left:5%;
}

#farm13 {
    top:79%;
    right:2%;
}

#farm14 {
    top:86%;
    left:4%;
}

#farm15 {
    top:89%;
    left:66%;
}

#farm16 {
    top:17%;
    left:42%;
}

#farm17 {
    top:37%;
    left:53%;
}    
}


@media all and (max-width:560px) {
#farm01 {
    top:10%;
    left:7%;
}

#farm02 {
    top:25%;
    left:53%;
}

#farm03 {
    top:31%;
    right:2%;
}

#farm04 {
    top:30%;
    left:23%;
}

#farm05 {
    top:36%;
    left:3%;
}

#farm06 {
    top:40%;
    left:70%;
}

#farm07 {
    top:45%;
    left:18%;
}

#farm08 {
    top:55%;
    left:49%;
}

#farm09 {
    top:55%;
    left:1%;
}

#farm10 {
    top:63%;
    left:52%;
}

#farm11 {
    top:65%;
    left:5%;
}

#farm12 {
    top:72%;
    left:5%;
}

#farm13 {
    top:70%;
    right:2%;
}

#farm14 {
    top:82%;
    left:48%;
}

#farm15 {
    top:90%;
    left:40%;
}

#farm16 {
    top:16%;
    left:19.6%;
}

#farm17 {
    top:36%;
    left:48%;
}    
}


/* モーダル */
#modal01,
#modal02,
#modal03,
#modal04,
#modal05,
#modal06,
#modal07,
#modal08,
#modal09,
#modal10,
#modal11,
#modal12,
#modal13,
#modal14,
#modal15,
#modal16,
#modal17 {
    display:none;
}